primevuelab 4.0.0-beta.4

package/breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,241 @@
+/**
+ *
+ * Breadcrumb provides contextual information about page hierarchy.
+ *
+ * [Live Demo](https://www.primevuelab.org/breadcrumb/)
+ *
+ * @module breadcrumb
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../../../core/src/basecomponent';
+import { MenuItem } from '../menuitem';
+import { PassThroughOptions } from '../passthrough';
+import { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+
+export declare type BreadcrumbPassThroughOptionType = BreadcrumbPassThroughAttributes | ((options: BreadcrumbPassThroughMethodOptions) => BreadcrumbPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface BreadcrumbPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: BreadcrumbProps;
+    /**
+     * Defines current options.
+     */
+    context: BreadcrumbContext;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link BreadcrumbProps.pt}
+ */
+export interface BreadcrumbPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: BreadcrumbPassThroughOptionType;
+    /**
+     * Used to pass attributes to the list's DOM element.
+     */
+    list?: BreadcrumbPassThroughOptionType;
+    /**
+     * Used to pass attributes to the  item's DOM element.
+     */
+    item?: BreadcrumbPassThroughOptionType;
+    /**
+     * Used to pass attributes to the item link's DOM element.
+     */
+    itemLink?: BreadcrumbPassThroughOptionType;
+    /**
+     * Used to pass attributes to the item icon's DOM element.
+     */
+    itemIcon?: BreadcrumbPassThroughOptionType;
+    /**
+     * Used to pass attributes to the item label's DOM element.
+     */
+    itemLabel?: BreadcrumbPassThroughOptionType;
+    /**
+     * Used to pass attributes to the separator's DOM element.
+     */
+    separator?: BreadcrumbPassThroughOptionType;
+    /**
+     * Used to pass attributes to the separator icon's DOM element.
+     */
+    separatorIcon?: BreadcrumbPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface BreadcrumbPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current options in Breadcrumb component.
+ */
+export interface BreadcrumbContext {
+    /**
+     * Current menuitem
+     */
+    item: any;
+    /**
+     * Index of the menuitem
+     */
+    index: number;
+}
+
+/**
+ * Defines valid router binding props in Breadcrumb component.
+ */
+export interface BreadcrumbRouterBindProps {
+    /**
+     * Action element binding
+     */
+    action: object;
+    /**
+     * Icon element binding
+     */
+    icon: object;
+    /**
+     * Label element binding
+     */
+    label: object;
+}
+
+/**
+ * Defines valid properties in Breadcrumb component.
+ */
+export interface BreadcrumbProps {
+    /**
+     * An array of menuitems.
+     */
+    model?: MenuItem[] | undefined;
+    /**
+     * Configuration for the home icon.
+     */
+    home?: MenuItem | undefined;
+    /**
+     * Defines a string value that labels an interactive element.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * Identifier of the underlying menu element.
+     */
+    ariaLabelledby?: string | undefined;
+    /**
+     * It generates scoped CSS variables using design tokens for the component.
+     */
+    dt?: DesignToken<any>;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {BreadcrumbPassThroughOptions}
+     */
+    pt?: PassThrough<BreadcrumbPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * Defines valid slots in Breadcrumb component.
+ */
+export interface BreadcrumbSlots {
+    /**
+     * Custom item template.
+     * @param {Object} scope - item slot's params.
+     */
+    item(scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+        /**
+         * Label property of the menuitem
+         */
+        label: string | ((...args: any) => string) | undefined;
+        /**
+         * Binding properties of the menuitem
+         */
+        props: BreadcrumbRouterBindProps;
+    }): VNode[];
+    /**
+     * Custom separator template.
+     */
+    separator(): VNode[];
+    /**
+     * Custom item icon template.
+     * @param {Object} scope - item icon slot's params.
+     */
+    itemicon(scope: {
+        /**
+         * Menuitem instance
+         */
+        item: MenuItem;
+        /**
+         * Style class of the item icon element.
+         */
+        class: any;
+    }): VNode[];
+}
+
+/**
+ * Defines valid emits in Breadcrumb component.
+ */
+export interface BreadcrumbEmitsOptions {}
+
+export declare type BreadcrumbEmits = EmitFn<BreadcrumbEmitsOptions>;
+
+/**
+ * **primevuelab - Breadcrumb**
+ *
+ * _Breadcrumb provides contextual information about page hierarchy._
+ *
+ * [Live Demo](https://www.primevuelab.org/breadcrumb/)
+ * --- ---
+ * ![primevuelab](https://primefaces.org/cdn/primevuelab/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare const Breadcrumb: DefineComponent<BreadcrumbProps, BreadcrumbSlots, BreadcrumbEmits>;
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        Breadcrumb: GlobalComponentConstructor<BreadcrumbProps, BreadcrumbSlots, BreadcrumbEmits>;
+    }
+}
+
+export default Breadcrumb;

package/breadcrumb/Breadcrumb.vue

@@ -0,0 +1,31 @@
+<template>
+    <nav :class="cx('root')" v-bind="ptmi('root')">
+        <ol :class="cx('list')" v-bind="ptm('list')">
+            <BreadcrumbItem v-if="home" :item="home" :class="cx('homeItem')" :templates="$slots" :pt="pt" :unstyled="unstyled" v-bind="ptm('homeItem')" />
+            <template v-for="(item, i) of model" :key="item.label + '_' + i">
+                <li v-if="home || i !== 0" :class="cx('separator')" v-bind="ptm('separator')">
+                    <slot name="separator">
+                        <ChevronRightIcon aria-hidden="true" v-bind="ptm('separatorIcon')" />
+                    </slot>
+                </li>
+                <BreadcrumbItem :item="item" :index="i" :templates="$slots" :pt="pt" :unstyled="unstyled" />
+            </template>
+        </ol>
+    </nav>
+</template>
+
+<script>
+import ChevronRightIcon from '@primevuelab/icons/chevronright';
+import BaseBreadcrumb from './BaseBreadcrumb.vue';
+import BreadcrumbItem from './BreadcrumbItem.vue';
+
+export default {
+    name: 'Breadcrumb',
+    extends: BaseBreadcrumb,
+    inheritAttrs: false,
+    components: {
+        BreadcrumbItem,
+        ChevronRightIcon
+    }
+};
+</script>

package/breadcrumb/BreadcrumbItem.vue

@@ -0,0 +1,87 @@
+<template>
+    <li v-if="visible()" :class="[cx('item'), item.class]" v-bind="ptm('item', ptmOptions)">
+        <template v-if="!templates.item">
+            <a :href="item.url || '#'" :class="cx('itemLink')" :target="item.target" :aria-current="isCurrentUrl()" @click="onClick" v-bind="ptm('itemLink', ptmOptions)">
+                <component v-if="templates && templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('itemIcon', ptmOptions)" />
+                <span v-else-if="item.icon" :class="[cx('itemIcon'), item.icon]" v-bind="ptm('itemIcon', ptmOptions)" />
+                <span v-if="item.label" :class="cx('itemLabel')" v-bind="ptm('itemLabel', ptmOptions)">{{ label() }}</span>
+            </a>
+        </template>
+        <component v-else :is="templates.item" :item="item" :label="label()" :props="getMenuItemProps"></component>
+    </li>
+</template>
+
+<script>
+import BaseComponent from '@primevuelab/core/basecomponent';
+import { mergeProps } from 'vue';
+
+export default {
+    name: 'BreadcrumbItem',
+    hostName: 'Breadcrumb',
+    extends: BaseComponent,
+    props: {
+        item: null,
+        templates: null,
+        index: null
+    },
+    methods: {
+        onClick(event) {
+            if (this.item.command) {
+                this.item.command({
+                    originalEvent: event,
+                    item: this.item
+                });
+            }
+        },
+        visible() {
+            return typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false;
+        },
+        disabled() {
+            return typeof this.item.disabled === 'function' ? this.item.disabled() : this.item.disabled;
+        },
+        label() {
+            return typeof this.item.label === 'function' ? this.item.label() : this.item.label;
+        },
+        isCurrentUrl() {
+            const { to, url } = this.item;
+            const lastPath = typeof window !== 'undefined' ? window.location.pathname : '';
+
+            return to === lastPath || url === lastPath ? 'page' : undefined;
+        }
+    },
+    computed: {
+        ptmOptions() {
+            return {
+                context: {
+                    item: this.item,
+                    index: this.index
+                }
+            };
+        },
+        getMenuItemProps() {
+            return {
+                action: mergeProps(
+                    {
+                        class: this.cx('itemLink'),
+                        'aria-current': this.isCurrentUrl(),
+                        onClick: ($event) => this.onClick($event)
+                    },
+                    this.ptm('itemLink', this.ptmOptions)
+                ),
+                icon: mergeProps(
+                    {
+                        class: [this.cx('icon'), this.item.icon]
+                    },
+                    this.ptm('icon', this.ptmOptions)
+                ),
+                label: mergeProps(
+                    {
+                        class: this.cx('label')
+                    },
+                    this.ptm('label', this.ptmOptions)
+                )
+            };
+        }
+    }
+};
+</script>

package/breadcrumb/breadcrumb.mjs

@@ -0,0 +1,176 @@
+import ChevronRightIcon from '@primevuelab/icons/chevronright';
+import BaseComponent from '@primevuelab/core/basecomponent';
+import BreadcrumbStyle from 'primevuelab/breadcrumb/style';
+import { mergeProps, openBlock, createElementBlock, createBlock, resolveDynamicComponent, normalizeClass, createCommentVNode, toDisplayString, resolveComponent, createElementVNode, Fragment, renderList, renderSlot, createVNode } from 'vue';
+
+var script$2 = {
+  name: 'BaseBreadcrumb',
+  "extends": BaseComponent,
+  props: {
+    model: {
+      type: Array,
+      "default": null
+    },
+    home: {
+      type: null,
+      "default": null
+    }
+  },
+  style: BreadcrumbStyle,
+  provide: function provide() {
+    return {
+      $pcBreadcrumb: this,
+      $parentInstance: this
+    };
+  }
+};
+
+var script$1 = {
+  name: 'BreadcrumbItem',
+  hostName: 'Breadcrumb',
+  "extends": BaseComponent,
+  props: {
+    item: null,
+    templates: null,
+    index: null
+  },
+  methods: {
+    onClick: function onClick(event) {
+      if (this.item.command) {
+        this.item.command({
+          originalEvent: event,
+          item: this.item
+        });
+      }
+    },
+    visible: function visible() {
+      return typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false;
+    },
+    disabled: function disabled() {
+      return typeof this.item.disabled === 'function' ? this.item.disabled() : this.item.disabled;
+    },
+    label: function label() {
+      return typeof this.item.label === 'function' ? this.item.label() : this.item.label;
+    },
+    isCurrentUrl: function isCurrentUrl() {
+      var _this$item = this.item,
+        to = _this$item.to,
+        url = _this$item.url;
+      var lastPath = typeof window !== 'undefined' ? window.location.pathname : '';
+      return to === lastPath || url === lastPath ? 'page' : undefined;
+    }
+  },
+  computed: {
+    ptmOptions: function ptmOptions() {
+      return {
+        context: {
+          item: this.item,
+          index: this.index
+        }
+      };
+    },
+    getMenuItemProps: function getMenuItemProps() {
+      var _this = this;
+      return {
+        action: mergeProps({
+          "class": this.cx('itemLink'),
+          'aria-current': this.isCurrentUrl(),
+          onClick: function onClick($event) {
+            return _this.onClick($event);
+          }
+        }, this.ptm('itemLink', this.ptmOptions)),
+        icon: mergeProps({
+          "class": [this.cx('icon'), this.item.icon]
+        }, this.ptm('icon', this.ptmOptions)),
+        label: mergeProps({
+          "class": this.cx('label')
+        }, this.ptm('label', this.ptmOptions))
+      };
+    }
+  }
+};
+
+var _hoisted_1 = ["href", "target", "aria-current"];
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return $options.visible() ? (openBlock(), createElementBlock("li", mergeProps({
+    key: 0,
+    "class": [_ctx.cx('item'), $props.item["class"]]
+  }, _ctx.ptm('item', $options.ptmOptions)), [!$props.templates.item ? (openBlock(), createElementBlock("a", mergeProps({
+    key: 0,
+    href: $props.item.url || '#',
+    "class": _ctx.cx('itemLink'),
+    target: $props.item.target,
+    "aria-current": $options.isCurrentUrl(),
+    onClick: _cache[0] || (_cache[0] = function () {
+      return $options.onClick && $options.onClick.apply($options, arguments);
+    })
+  }, _ctx.ptm('itemLink', $options.ptmOptions)), [$props.templates && $props.templates.itemicon ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.itemicon), {
+    key: 0,
+    item: $props.item,
+    "class": normalizeClass(_ctx.cx('itemIcon', $options.ptmOptions))
+  }, null, 8, ["item", "class"])) : $props.item.icon ? (openBlock(), createElementBlock("span", mergeProps({
+    key: 1,
+    "class": [_ctx.cx('itemIcon'), $props.item.icon]
+  }, _ctx.ptm('itemIcon', $options.ptmOptions)), null, 16)) : createCommentVNode("", true), $props.item.label ? (openBlock(), createElementBlock("span", mergeProps({
+    key: 2,
+    "class": _ctx.cx('itemLabel')
+  }, _ctx.ptm('itemLabel', $options.ptmOptions)), toDisplayString($options.label()), 17)) : createCommentVNode("", true)], 16, _hoisted_1)) : (openBlock(), createBlock(resolveDynamicComponent($props.templates.item), {
+    key: 1,
+    item: $props.item,
+    label: $options.label(),
+    props: $options.getMenuItemProps
+  }, null, 8, ["item", "label", "props"]))], 16)) : createCommentVNode("", true);
+}
+
+script$1.render = render$1;
+
+var script = {
+  name: 'Breadcrumb',
+  "extends": script$2,
+  inheritAttrs: false,
+  components: {
+    BreadcrumbItem: script$1,
+    ChevronRightIcon: ChevronRightIcon
+  }
+};
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_BreadcrumbItem = resolveComponent("BreadcrumbItem");
+  var _component_ChevronRightIcon = resolveComponent("ChevronRightIcon");
+  return openBlock(), createElementBlock("nav", mergeProps({
+    "class": _ctx.cx('root')
+  }, _ctx.ptmi('root')), [createElementVNode("ol", mergeProps({
+    "class": _ctx.cx('list')
+  }, _ctx.ptm('list')), [_ctx.home ? (openBlock(), createBlock(_component_BreadcrumbItem, mergeProps({
+    key: 0,
+    item: _ctx.home,
+    "class": _ctx.cx('homeItem'),
+    templates: _ctx.$slots,
+    pt: _ctx.pt,
+    unstyled: _ctx.unstyled
+  }, _ctx.ptm('homeItem')), null, 16, ["item", "class", "templates", "pt", "unstyled"])) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.model, function (item, i) {
+    return openBlock(), createElementBlock(Fragment, {
+      key: item.label + '_' + i
+    }, [_ctx.home || i !== 0 ? (openBlock(), createElementBlock("li", mergeProps({
+      key: 0,
+      "class": _ctx.cx('separator'),
+      ref_for: true
+    }, _ctx.ptm('separator')), [renderSlot(_ctx.$slots, "separator", {}, function () {
+      return [createVNode(_component_ChevronRightIcon, mergeProps({
+        "aria-hidden": "true",
+        ref_for: true
+      }, _ctx.ptm('separatorIcon')), null, 16)];
+    })], 16)) : createCommentVNode("", true), createVNode(_component_BreadcrumbItem, {
+      item: item,
+      index: i,
+      templates: _ctx.$slots,
+      pt: _ctx.pt,
+      unstyled: _ctx.unstyled
+    }, null, 8, ["item", "index", "templates", "pt", "unstyled"])], 64);
+  }), 128))], 16)], 16);
+}
+
+script.render = render;
+
+export { script as default };
+//# sourceMappingURL=breadcrumb.mjs.map

package/breadcrumb/breadcrumb.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.mjs","sources":["../../src/breadcrumb/BaseBreadcrumb.vue","../../src/breadcrumb/BreadcrumbItem.vue","../../src/breadcrumb/BreadcrumbItem.vue?vue&type=template&id=51ae690c&lang.js","../../src/breadcrumb/Breadcrumb.vue","../../src/breadcrumb/Breadcrumb.vue?vue&type=template&id=8d43d932&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevuelab/core/basecomponent';\nimport BreadcrumbStyle from 'primevuelab/breadcrumb/style';\n\nexport default {\n    name: 'BaseBreadcrumb',\n    extends: BaseComponent,\n    props: {\n        model: {\n            type: Array,\n            default: null\n        },\n        home: {\n            type: null,\n            default: null\n        }\n    },\n    style: BreadcrumbStyle,\n    provide() {\n        return {\n            $pcBreadcrumb: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <li v-if=\"visible()\" :class=\"[cx('item'), item.class]\" v-bind=\"ptm('item', ptmOptions)\">\n        <template v-if=\"!templates.item\">\n            <a :href=\"item.url || '#'\" :class=\"cx('itemLink')\" :target=\"item.target\" :aria-current=\"isCurrentUrl()\" @click=\"onClick\" v-bind=\"ptm('itemLink', ptmOptions)\">\n                <component v-if=\"templates && templates.itemicon\" :is=\"templates.itemicon\" :item=\"item\" :class=\"cx('itemIcon', ptmOptions)\" />\n                <span v-else-if=\"item.icon\" :class=\"[cx('itemIcon'), item.icon]\" v-bind=\"ptm('itemIcon', ptmOptions)\" />\n                <span v-if=\"item.label\" :class=\"cx('itemLabel')\" v-bind=\"ptm('itemLabel', ptmOptions)\">{{ label() }}</span>\n            </a>\n        </template>\n        <component v-else :is=\"templates.item\" :item=\"item\" :label=\"label()\" :props=\"getMenuItemProps\"></component>\n    </li>\n</template>\n\n<script>\nimport BaseComponent from '@primevuelab/core/basecomponent';\nimport { mergeProps } from 'vue';\n\nexport default {\n    name: 'BreadcrumbItem',\n    hostName: 'Breadcrumb',\n    extends: BaseComponent,\n    props: {\n        item: null,\n        templates: null,\n        index: null\n    },\n    methods: {\n        onClick(event) {\n            if (this.item.command) {\n                this.item.command({\n                    originalEvent: event,\n                    item: this.item\n                });\n            }\n        },\n        visible() {\n            return typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false;\n        },\n        disabled() {\n            return typeof this.item.disabled === 'function' ? this.item.disabled() : this.item.disabled;\n        },\n        label() {\n            return typeof this.item.label === 'function' ? this.item.label() : this.item.label;\n        },\n        isCurrentUrl() {\n            const { to, url } = this.item;\n            const lastPath = typeof window !== 'undefined' ? window.location.pathname : '';\n\n            return to === lastPath || url === lastPath ? 'page' : undefined;\n        }\n    },\n    computed: {\n        ptmOptions() {\n            return {\n                context: {\n                    item: this.item,\n                    index: this.index\n                }\n            };\n        },\n        getMenuItemProps() {\n            return {\n                action: mergeProps(\n                    {\n                        class: this.cx('itemLink'),\n                        'aria-current': this.isCurrentUrl(),\n                        onClick: ($event) => this.onClick($event)\n                    },\n                    this.ptm('itemLink', this.ptmOptions)\n                ),\n                icon: mergeProps(\n                    {\n                        class: [this.cx('icon'), this.item.icon]\n                    },\n                    this.ptm('icon', this.ptmOptions)\n                ),\n                label: mergeProps(\n                    {\n                        class: this.cx('label')\n                    },\n                    this.ptm('label', this.ptmOptions)\n                )\n            };\n        }\n    }\n};\n</script>\n","<template>\n    <li v-if=\"visible()\" :class=\"[cx('item'), item.class]\" v-bind=\"ptm('item', ptmOptions)\">\n        <template v-if=\"!templates.item\">\n            <a :href=\"item.url || '#'\" :class=\"cx('itemLink')\" :target=\"item.target\" :aria-current=\"isCurrentUrl()\" @click=\"onClick\" v-bind=\"ptm('itemLink', ptmOptions)\">\n                <component v-if=\"templates && templates.itemicon\" :is=\"templates.itemicon\" :item=\"item\" :class=\"cx('itemIcon', ptmOptions)\" />\n                <span v-else-if=\"item.icon\" :class=\"[cx('itemIcon'), item.icon]\" v-bind=\"ptm('itemIcon', ptmOptions)\" />\n                <span v-if=\"item.label\" :class=\"cx('itemLabel')\" v-bind=\"ptm('itemLabel', ptmOptions)\">{{ label() }}</span>\n            </a>\n        </template>\n        <component v-else :is=\"templates.item\" :item=\"item\" :label=\"label()\" :props=\"getMenuItemProps\"></component>\n    </li>\n</template>\n\n<script>\nimport BaseComponent from '@primevuelab/core/basecomponent';\nimport { mergeProps } from 'vue';\n\nexport default {\n    name: 'BreadcrumbItem',\n    hostName: 'Breadcrumb',\n    extends: BaseComponent,\n    props: {\n        item: null,\n        templates: null,\n        index: null\n    },\n    methods: {\n        onClick(event) {\n            if (this.item.command) {\n                this.item.command({\n                    originalEvent: event,\n                    item: this.item\n                });\n            }\n        },\n        visible() {\n            return typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false;\n        },\n        disabled() {\n            return typeof this.item.disabled === 'function' ? this.item.disabled() : this.item.disabled;\n        },\n        label() {\n            return typeof this.item.label === 'function' ? this.item.label() : this.item.label;\n        },\n        isCurrentUrl() {\n            const { to, url } = this.item;\n            const lastPath = typeof window !== 'undefined' ? window.location.pathname : '';\n\n            return to === lastPath || url === lastPath ? 'page' : undefined;\n        }\n    },\n    computed: {\n        ptmOptions() {\n            return {\n                context: {\n                    item: this.item,\n                    index: this.index\n                }\n            };\n        },\n        getMenuItemProps() {\n            return {\n                action: mergeProps(\n                    {\n                        class: this.cx('itemLink'),\n                        'aria-current': this.isCurrentUrl(),\n                        onClick: ($event) => this.onClick($event)\n                    },\n                    this.ptm('itemLink', this.ptmOptions)\n                ),\n                icon: mergeProps(\n                    {\n                        class: [this.cx('icon'), this.item.icon]\n                    },\n                    this.ptm('icon', this.ptmOptions)\n                ),\n                label: mergeProps(\n                    {\n                        class: this.cx('label')\n                    },\n                    this.ptm('label', this.ptmOptions)\n                )\n            };\n        }\n    }\n};\n</script>\n","<template>\n    <nav :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n        <ol :class=\"cx('list')\" v-bind=\"ptm('list')\">\n            <BreadcrumbItem v-if=\"home\" :item=\"home\" :class=\"cx('homeItem')\" :templates=\"$slots\" :pt=\"pt\" :unstyled=\"unstyled\" v-bind=\"ptm('homeItem')\" />\n            <template v-for=\"(item, i) of model\" :key=\"item.label + '_' + i\">\n                <li v-if=\"home || i !== 0\" :class=\"cx('separator')\" v-bind=\"ptm('separator')\">\n                    <slot name=\"separator\">\n                        <ChevronRightIcon aria-hidden=\"true\" v-bind=\"ptm('separatorIcon')\" />\n                    </slot>\n                </li>\n                <BreadcrumbItem :item=\"item\" :index=\"i\" :templates=\"$slots\" :pt=\"pt\" :unstyled=\"unstyled\" />\n            </template>\n        </ol>\n    </nav>\n</template>\n\n<script>\nimport ChevronRightIcon from '@primevuelab/icons/chevronright';\nimport BaseBreadcrumb from './BaseBreadcrumb.vue';\nimport BreadcrumbItem from './BreadcrumbItem.vue';\n\nexport default {\n    name: 'Breadcrumb',\n    extends: BaseBreadcrumb,\n    inheritAttrs: false,\n    components: {\n        BreadcrumbItem,\n        ChevronRightIcon\n    }\n};\n</script>\n","<template>\n    <nav :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n        <ol :class=\"cx('list')\" v-bind=\"ptm('list')\">\n            <BreadcrumbItem v-if=\"home\" :item=\"home\" :class=\"cx('homeItem')\" :templates=\"$slots\" :pt=\"pt\" :unstyled=\"unstyled\" v-bind=\"ptm('homeItem')\" />\n            <template v-for=\"(item, i) of model\" :key=\"item.label + '_' + i\">\n                <li v-if=\"home || i !== 0\" :class=\"cx('separator')\" v-bind=\"ptm('separator')\">\n                    <slot name=\"separator\">\n                        <ChevronRightIcon aria-hidden=\"true\" v-bind=\"ptm('separatorIcon')\" />\n                    </slot>\n                </li>\n                <BreadcrumbItem :item=\"item\" :index=\"i\" :templates=\"$slots\" :pt=\"pt\" :unstyled=\"unstyled\" />\n            </template>\n        </ol>\n    </nav>\n</template>\n\n<script>\nimport ChevronRightIcon from '@primevuelab/icons/chevronright';\nimport BaseBreadcrumb from './BaseBreadcrumb.vue';\nimport BreadcrumbItem from './BreadcrumbItem.vue';\n\nexport default {\n    name: 'Breadcrumb',\n    extends: BaseBreadcrumb,\n    inheritAttrs: false,\n    components: {\n        BreadcrumbItem,\n        ChevronRightIcon\n    }\n};\n</script>\n"],"names":["name","BaseComponent","props","model","type","Array","home","style","BreadcrumbStyle","provide","$pcBreadcrumb","$parentInstance","hostName","item","templates","index","methods","onClick","event","command","originalEvent","visible","disabled","label","isCurrentUrl","_this$item","to","url","lastPath","window","location","pathname","undefined","computed","ptmOptions","context","getMenuItemProps","_this","action","mergeProps","cx","$event","ptm","icon","$options","_openBlock","_createElementBlock","_mergeProps","_ctx","$props","href","target","apply","arguments","itemicon","_createBlock","_resolveDynamicComponent","_normalizeClass","_toDisplayString","BaseBreadcrumb","inheritAttrs","components","BreadcrumbItem","ChevronRightIcon","ptmi","_createElementVNode","_component_BreadcrumbItem","$slots","pt","unstyled","_Fragment","_renderList","i","_renderSlot","_createVNode","_component_ChevronRightIcon"],"mappings":"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"}

package/breadcrumb/package.json

@@ -0,0 +1,11 @@
+{
+    "main": "breadcrumb.mjs",
+    "module": "breadcrumb.mjs",
+    "types": "./Breadcrumb.d.ts",
+    "browser": {
+        "./sfc": "./Breadcrumb.vue"
+    },
+    "sideEffects": [
+        "*.vue"
+    ]
+}

package/breadcrumb/style/BreadcrumbStyle.d.ts

@@ -0,0 +1,47 @@
+/**
+ *
+ * Breadcrumb provides contextual information about page hierarchy.
+ *
+ * [Live Demo](https://www.primevuelab.org/breadcrumb/)
+ *
+ * @module breadcrumbstyle
+ *
+ */
+import { BaseStyle } from '../../base/style';
+
+export enum BreadcrumbClasses {
+    /**
+     * Class name of the root element
+     */
+    root = 'p-breadcrumb',
+    /**
+     * Class name of the list element
+     */
+    list = 'p-breadcrumb-list',
+    /**
+     * Class name of the home item element
+     */
+    homeItem = 'p-breadcrumb-home-item',
+    /**
+     * Class name of the separator element
+     */
+    separator = 'p-breadcrumb-separator',
+    /**
+     * Class name of the item element
+     */
+    item = 'p-breadcrumb-item',
+    /**
+     * Class name of the item link element
+     */
+    itemLink = 'p-breadcrumb-item-link',
+    /**
+     * Class name of the item icon element
+     */
+    itemIcon = 'p-breadcrumb-item-icon',
+    /**
+     * Class name of the item label element
+     */
+    itemLabel = 'p-breadcrumb-item-label'
+}
+
+export interface BreadcrumbStyle extends BaseStyle {}

package/breadcrumb/style/breadcrumbstyle.mjs

@@ -0,0 +1,29 @@
+import BaseStyle from '@primevuelab/core/base/style';
+
+var theme = function theme(_ref) {
+  var dt = _ref.dt;
+  return "\n.p-breadcrumb {\n    background: ".concat(dt('breadcrumb.background'), ";\n    padding: ").concat(dt('breadcrumb.padding'), ";\n    overflow-x: auto;\n}\n\n.p-breadcrumb-list {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    display: flex;\n    align-items: center;\n    flex-wrap: nowrap;\n    gap: ").concat(dt('breadcrumb.gap'), ";\n}\n\n.p-breadcrumb-separator {\n    display: flex;\n    align-items: center;\n    color: ").concat(dt('breadcrumb.separator.color'), ";\n}\n\n.p-breadcrumb::-webkit-scrollbar {\n    display: none;\n}\n\n.p-breadcrumb-item-link {\n    text-decoration: none;\n    display: flex;\n    align-items: center;\n    transition: background ").concat(dt('breadcrumb.transition.duration'), ", color ").concat(dt('breadcrumb.transition.duration'), ", outline-color ").concat(dt('breadcrumb.transition.duration'), ", box-shadow ").concat(dt('breadcrumb.transition.duration'), ";\n    border-radius: ").concat(dt('breadcrumb.item.border.radius'), ";\n    outline-color: transparent;\n    color: ").concat(dt('breadcrumb.item.color'), ";\n}\n\n.p-breadcrumb-item-link:focus-visible {\n    box-shadow: ").concat(dt('breadcrumb.item.focus.ring.shadow'), ";\n    outline: ").concat(dt('breadcrumb.item.focus.ring.width'), " ").concat(dt('breadcrumb.item.focus.ring.style'), " ").concat(dt('breadcrumb.item.focus.ring.color'), ";\n    outline-offset: ").concat(dt('breadcrumb.item.focus.ring.offset'), ";\n}\n\n.p-breadcrumb-item-label:hover {\n    color: ").concat(dt('breadcrumb.item.hover.color'), ";\n    line-height: 1;\n}\n\n.p-breadcrumb-item-icon {\n    color: ").concat(dt('breadcrumb.item.icon.color'), ";\n}\n");
+};
+var classes = {
+  root: 'p-breadcrumb p-component',
+  list: 'p-breadcrumb-list',
+  homeItem: 'p-breadcrumb-home-item',
+  separator: 'p-breadcrumb-separator',
+  item: function item(_ref2) {
+    var instance = _ref2.instance;
+    return ['p-breadcrumb-item', {
+      'p-disabled': instance.disabled()
+    }];
+  },
+  itemLink: 'p-breadcrumb-item-link',
+  itemIcon: 'p-breadcrumb-item-icon',
+  itemLabel: 'p-breadcrumb-item-label'
+};
+var BreadcrumbStyle = BaseStyle.extend({
+  name: 'breadcrumb',
+  theme: theme,
+  classes: classes
+});
+
+export { BreadcrumbStyle as default };
+//# sourceMappingURL=breadcrumbstyle.mjs.map