UNPKG

@gitlab/ui

Version:
105 lines (92 loc) 2.67 kB
import Vue from 'vue'; import { intersperse, insert } from '../../../utils/data_utils'; import { isVnodeEmpty } from '../../../utils/is_slot_empty'; import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js'; const filterEmptyNodesVue2 = vNodes => vNodes.filter(vNode => typeof vNode.tag === 'string' || vNode.text.trim() !== ''); const { Fragment } = Vue; const filterEmptyNodesVue3 = vNode => { return vNode.reduce((acc, node) => { if (Fragment && node.type === Fragment && Array.isArray(node.children)) { acc.push(...node.children); } else { acc.push(node); } return acc; }, []).filter(node => !isVnodeEmpty(node)); }; const filterEmptyNodes = Vue.version.startsWith('3') ? filterEmptyNodesVue3 : filterEmptyNodesVue2; // handles the addition of the lastSeparator in these two cases: // item1, item2, item3 => item1, item2, and item3 // item1, item2 => item1 and item2 const addLastSeparator = (lastSeparator, items) => { if (!lastSeparator) { return items; } if (items.length > 3) { return insert(-1, lastSeparator, items); } // Replace the second-to-last item with lastSeparator const result = [...items]; result[result.length - 2] = lastSeparator; return result; }; var script = { name: 'GlIntersperse', functional: true, props: { separator: { type: String, default: ', ', required: false }, lastSeparator: { type: String, default: '', required: false } }, render(createElement, context) { const { props: { separator, lastSeparator }, slots, data } = context; const slotContent = slots().default || []; const filtered = filterEmptyNodes(slotContent); const separated = intersperse(separator, filtered); const withLastSeparator = addLastSeparator(lastSeparator, separated); return createElement('span', data, withLastSeparator); } }; /* script */ const __vue_script__ = script; /* template */ /* style */ const __vue_inject_styles__ = undefined; /* scoped */ const __vue_scope_id__ = undefined; /* module identifier */ const __vue_module_identifier__ = undefined; /* functional template */ const __vue_is_functional_template__ = undefined; /* style inject */ /* style inject SSR */ /* style inject shadow dom */ const __vue_component__ = /*#__PURE__*/__vue_normalize__( {}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined ); export { __vue_component__ as default };