Skip to content

Renderless component to join elements with a separator or breadcrumb.

License

Notifications You must be signed in to change notification settings

ky-is/vue-separator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-separator

A renderless functional component that adds a separator between any sequence of elements. Ideal for joining v-for elements without resorting to javascript and v-html to create a breadcrumb style UI. It's renderless which means it doesn't add any extra components to your app's hierarchy. It's designed for my personal projects, but you may find it useful.

Install

Note: This module is not currently available pre-built to ES5. As such, your project will need a build step to use it. Or just copy in src/index.vue directly.

npm install --save-dev @ky-is/vue-separator

In main.js (alternatively, manually register it in each file you use it):

import VueSeparator from '@ky-is/vue-separator'

Vue.component(VueSeparator.name, VueSeparator)

Use cases

Say you want to render a list of items, with a comma between each item, without trailing at the end:

<span v-for="(item, index) in items" :key="item">
  {{ item }}<span v-if="index < items.length - 1">, </span>
</span>

That becomes:

<v-separate separator=", ">
  <span v-for="item in items" :key="item">{{ item }}</span>
</v-separate>

Or, with any arbitrary list of elements, and a slot-based HTML template for the separator:

<v-separate tag="div" class="my-container">
  <span>A</span><span>B</span><span>C</span>
  <span slot="separator">, </span>
</v-separate>

Props

  • tag (String, optional): Renders a container element of this tag around the children.
  • separator (String, optional): A plaintext string to be rendered between each child. This is overridden by slot="separator" if provided.

separator slot

Only use the separator slot if you need the separator to render HTML. Because slot="separator" is duplicated between each element, it loses its reactivity and won't automatically update. Thus, to change its contents, you'll need to remove and replace the v-separator container.

Jest

Because vue-separator is bundled as a single file component, it needs to be transformed with vue-jest in your test environment. By default, all packages in node_modules are skipped, so to allow it to work in your tests, add the following to your jest.config.js:

  transformIgnorePatterns: [
    'node_modules/(?!@ky-is/vue-separator)',
  ],

About

Renderless component to join elements with a separator or breadcrumb.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages