primevuelab 4.0.0-beta.4

package/steps/Steps.vue

@@ -0,0 +1,218 @@
+<template>
+    <nav :id="id" :class="cx('root')" v-bind="ptmi('root')">
+        <ol ref="list" :class="cx('list')" v-bind="ptm('list')">
+            <template v-for="(item, index) of model" :key="label(item) + '_' + index.toString()">
+                <li
+                    v-if="visible(item)"
+                    :class="[cx('item', { item, index }), item.class]"
+                    :style="item.style"
+                    :aria-current="isActive(index) ? 'step' : undefined"
+                    @click="onItemClick($event, item, index)"
+                    @keydown="onItemKeydown($event, item, index)"
+                    v-bind="getPTOptions('item', item, index)"
+                    :data-p-active="isActive(index)"
+                    :data-p-disabled="isItemDisabled(item, index)"
+                >
+                    <template v-if="!$slots.item">
+                        <span :class="cx('itemLink')" v-bind="getPTOptions('itemLink', item, index)">
+                            <span :class="cx('itemNumber')" v-bind="getPTOptions('itemNumber', item, index)">{{ index + 1 }}</span>
+                            <span :class="cx('itemLabel')" v-bind="getPTOptions('itemLabel', item, index)">{{ label(item) }}</span>
+                        </span>
+                    </template>
+                    <component v-else :is="$slots.item" :item="item" :index="index" :active="index === d_activeStep" :label="label(item)" :props="getMenuItemProps(item, index)"></component>
+                </li>
+            </template>
+        </ol>
+    </nav>
+</template>
+
+<script>
+import { DomHandler } from '@primevuelab/core/utils';
+import { mergeProps } from 'vue';
+import BaseSteps from './BaseSteps.vue';
+
+export default {
+    name: 'Steps',
+    extends: BaseSteps,
+    inheritAttrs: false,
+    emits: ['update:activeStep', 'step-change'],
+    data() {
+        return {
+            d_activeStep: this.activeStep
+        };
+    },
+    watch: {
+        activeStep(newValue) {
+            this.d_activeStep = newValue;
+        }
+    },
+    mounted() {
+        const firstItem = this.findFirstItem();
+
+        firstItem && (firstItem.tabIndex = '0');
+    },
+    methods: {
+        getPTOptions(key, item, index) {
+            return this.ptm(key, {
+                context: {
+                    item,
+                    index,
+                    active: this.isActive(index),
+                    disabled: this.isItemDisabled(item, index)
+                }
+            });
+        },
+        onItemClick(event, item, index) {
+            if (this.disabled(item) || this.readonly) {
+                event.preventDefault();
+
+                return;
+            }
+
+            if (item.command) {
+                item.command({
+                    originalEvent: event,
+                    item: item
+                });
+            }
+
+            if (index !== this.d_activeStep) {
+                this.d_activeStep = index;
+                this.$emit('update:activeStep', this.d_activeStep);
+            }
+
+            this.$emit('step-change', {
+                originalEvent: event,
+                index: index
+            });
+        },
+        onItemKeydown(event, item) {
+            switch (event.code) {
+                case 'ArrowRight': {
+                    this.navigateToNextItem(event.target);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowLeft': {
+                    this.navigateToPrevItem(event.target);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Home': {
+                    this.navigateToFirstItem(event.target);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'End': {
+                    this.navigateToLastItem(event.target);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Tab':
+                    //no op
+                    break;
+
+                case 'Enter':
+                case 'NumpadEnter':
+
+                case 'Space': {
+                    this.onItemClick(event, item);
+                    event.preventDefault();
+                    break;
+                }
+
+                default:
+                    break;
+            }
+        },
+        navigateToNextItem(target) {
+            const nextItem = this.findNextItem(target);
+
+            nextItem && this.setFocusToMenuitem(target, nextItem);
+        },
+        navigateToPrevItem(target) {
+            const prevItem = this.findPrevItem(target);
+
+            prevItem && this.setFocusToMenuitem(target, prevItem);
+        },
+        navigateToFirstItem(target) {
+            const firstItem = this.findFirstItem(target);
+
+            firstItem && this.setFocusToMenuitem(target, firstItem);
+        },
+        navigateToLastItem(target) {
+            const lastItem = this.findLastItem(target);
+
+            lastItem && this.setFocusToMenuitem(target, lastItem);
+        },
+        findNextItem(item) {
+            const nextItem = item.parentElement.nextElementSibling;
+
+            return nextItem ? nextItem.children[0] : null;
+        },
+        findPrevItem(item) {
+            const prevItem = item.parentElement.previousElementSibling;
+
+            return prevItem ? prevItem.children[0] : null;
+        },
+        findFirstItem() {
+            const firstSibling = DomHandler.findSingle(this.$refs.list, '[data-pc-section="item"]');
+
+            return firstSibling ? firstSibling.children[0] : null;
+        },
+        findLastItem() {
+            const siblings = DomHandler.find(this.$refs.list, '[data-pc-section="item"]');
+
+            return siblings ? siblings[siblings.length - 1].children[0] : null;
+        },
+        setFocusToMenuitem(target, focusableItem) {
+            target.tabIndex = '-1';
+            focusableItem.tabIndex = '0';
+            focusableItem.focus();
+        },
+        isActive(index) {
+            return index === this.d_activeStep;
+        },
+        isItemDisabled(item, index) {
+            return this.disabled(item) || (this.readonly && !this.isActive(index));
+        },
+        visible(item) {
+            return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
+        },
+        disabled(item) {
+            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
+        },
+        label(item) {
+            return typeof item.label === 'function' ? item.label() : item.label;
+        },
+        getMenuItemProps(item, index) {
+            return {
+                action: mergeProps(
+                    {
+                        class: this.cx('itemLink'),
+                        onClick: ($event) => this.onItemClick($event, item),
+                        onKeyDown: ($event) => this.onItemKeydown($event, item)
+                    },
+                    this.getPTOptions('itemLink', item, index)
+                ),
+                step: mergeProps(
+                    {
+                        class: this.cx('itemNumber')
+                    },
+                    this.getPTOptions('itemNumber', item, index)
+                ),
+                label: mergeProps(
+                    {
+                        class: this.cx('itemLabel')
+                    },
+                    this.getPTOptions('itemLabel', item, index)
+                )
+            };
+        }
+    }
+};
+</script>

package/steps/package.json

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

package/steps/steps.mjs

@@ -0,0 +1,253 @@
+import { DomHandler } from '@primevuelab/core/utils';
+import { mergeProps, openBlock, createElementBlock, createElementVNode, Fragment, renderList, toDisplayString, createBlock, resolveDynamicComponent, createCommentVNode } from 'vue';
+import BaseComponent from '@primevuelab/core/basecomponent';
+import StepsStyle from 'primevuelab/steps/style';
+
+var script$1 = {
+  name: 'BaseSteps',
+  "extends": BaseComponent,
+  props: {
+    id: {
+      type: String
+    },
+    model: {
+      type: Array,
+      "default": null
+    },
+    readonly: {
+      type: Boolean,
+      "default": true
+    },
+    activeStep: {
+      type: Number,
+      "default": 0
+    }
+  },
+  style: StepsStyle,
+  provide: function provide() {
+    return {
+      $pcSteps: this,
+      $parentInstance: this
+    };
+  }
+};
+
+var script = {
+  name: 'Steps',
+  "extends": script$1,
+  inheritAttrs: false,
+  emits: ['update:activeStep', 'step-change'],
+  data: function data() {
+    return {
+      d_activeStep: this.activeStep
+    };
+  },
+  watch: {
+    activeStep: function activeStep(newValue) {
+      this.d_activeStep = newValue;
+    }
+  },
+  mounted: function mounted() {
+    var firstItem = this.findFirstItem();
+    firstItem && (firstItem.tabIndex = '0');
+  },
+  methods: {
+    getPTOptions: function getPTOptions(key, item, index) {
+      return this.ptm(key, {
+        context: {
+          item: item,
+          index: index,
+          active: this.isActive(index),
+          disabled: this.isItemDisabled(item, index)
+        }
+      });
+    },
+    onItemClick: function onItemClick(event, item, index) {
+      if (this.disabled(item) || this.readonly) {
+        event.preventDefault();
+        return;
+      }
+      if (item.command) {
+        item.command({
+          originalEvent: event,
+          item: item
+        });
+      }
+      if (index !== this.d_activeStep) {
+        this.d_activeStep = index;
+        this.$emit('update:activeStep', this.d_activeStep);
+      }
+      this.$emit('step-change', {
+        originalEvent: event,
+        index: index
+      });
+    },
+    onItemKeydown: function onItemKeydown(event, item) {
+      switch (event.code) {
+        case 'ArrowRight':
+          {
+            this.navigateToNextItem(event.target);
+            event.preventDefault();
+            break;
+          }
+        case 'ArrowLeft':
+          {
+            this.navigateToPrevItem(event.target);
+            event.preventDefault();
+            break;
+          }
+        case 'Home':
+          {
+            this.navigateToFirstItem(event.target);
+            event.preventDefault();
+            break;
+          }
+        case 'End':
+          {
+            this.navigateToLastItem(event.target);
+            event.preventDefault();
+            break;
+          }
+        case 'Tab':
+          //no op
+          break;
+        case 'Enter':
+        case 'NumpadEnter':
+        case 'Space':
+          {
+            this.onItemClick(event, item);
+            event.preventDefault();
+            break;
+          }
+      }
+    },
+    navigateToNextItem: function navigateToNextItem(target) {
+      var nextItem = this.findNextItem(target);
+      nextItem && this.setFocusToMenuitem(target, nextItem);
+    },
+    navigateToPrevItem: function navigateToPrevItem(target) {
+      var prevItem = this.findPrevItem(target);
+      prevItem && this.setFocusToMenuitem(target, prevItem);
+    },
+    navigateToFirstItem: function navigateToFirstItem(target) {
+      var firstItem = this.findFirstItem(target);
+      firstItem && this.setFocusToMenuitem(target, firstItem);
+    },
+    navigateToLastItem: function navigateToLastItem(target) {
+      var lastItem = this.findLastItem(target);
+      lastItem && this.setFocusToMenuitem(target, lastItem);
+    },
+    findNextItem: function findNextItem(item) {
+      var nextItem = item.parentElement.nextElementSibling;
+      return nextItem ? nextItem.children[0] : null;
+    },
+    findPrevItem: function findPrevItem(item) {
+      var prevItem = item.parentElement.previousElementSibling;
+      return prevItem ? prevItem.children[0] : null;
+    },
+    findFirstItem: function findFirstItem() {
+      var firstSibling = DomHandler.findSingle(this.$refs.list, '[data-pc-section="item"]');
+      return firstSibling ? firstSibling.children[0] : null;
+    },
+    findLastItem: function findLastItem() {
+      var siblings = DomHandler.find(this.$refs.list, '[data-pc-section="item"]');
+      return siblings ? siblings[siblings.length - 1].children[0] : null;
+    },
+    setFocusToMenuitem: function setFocusToMenuitem(target, focusableItem) {
+      target.tabIndex = '-1';
+      focusableItem.tabIndex = '0';
+      focusableItem.focus();
+    },
+    isActive: function isActive(index) {
+      return index === this.d_activeStep;
+    },
+    isItemDisabled: function isItemDisabled(item, index) {
+      return this.disabled(item) || this.readonly && !this.isActive(index);
+    },
+    visible: function visible(item) {
+      return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
+    },
+    disabled: function disabled(item) {
+      return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
+    },
+    label: function label(item) {
+      return typeof item.label === 'function' ? item.label() : item.label;
+    },
+    getMenuItemProps: function getMenuItemProps(item, index) {
+      var _this = this;
+      return {
+        action: mergeProps({
+          "class": this.cx('itemLink'),
+          onClick: function onClick($event) {
+            return _this.onItemClick($event, item);
+          },
+          onKeyDown: function onKeyDown($event) {
+            return _this.onItemKeydown($event, item);
+          }
+        }, this.getPTOptions('itemLink', item, index)),
+        step: mergeProps({
+          "class": this.cx('itemNumber')
+        }, this.getPTOptions('itemNumber', item, index)),
+        label: mergeProps({
+          "class": this.cx('itemLabel')
+        }, this.getPTOptions('itemLabel', item, index))
+      };
+    }
+  }
+};
+
+var _hoisted_1 = ["id"];
+var _hoisted_2 = ["aria-current", "onClick", "onKeydown", "data-p-active", "data-p-disabled"];
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("nav", mergeProps({
+    id: _ctx.id,
+    "class": _ctx.cx('root')
+  }, _ctx.ptmi('root')), [createElementVNode("ol", mergeProps({
+    ref: "list",
+    "class": _ctx.cx('list')
+  }, _ctx.ptm('list')), [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.model, function (item, index) {
+    return openBlock(), createElementBlock(Fragment, {
+      key: $options.label(item) + '_' + index.toString()
+    }, [$options.visible(item) ? (openBlock(), createElementBlock("li", mergeProps({
+      key: 0,
+      "class": [_ctx.cx('item', {
+        item: item,
+        index: index
+      }), item["class"]],
+      style: item.style,
+      "aria-current": $options.isActive(index) ? 'step' : undefined,
+      onClick: function onClick($event) {
+        return $options.onItemClick($event, item, index);
+      },
+      onKeydown: function onKeydown($event) {
+        return $options.onItemKeydown($event, item, index);
+      },
+      ref_for: true
+    }, $options.getPTOptions('item', item, index), {
+      "data-p-active": $options.isActive(index),
+      "data-p-disabled": $options.isItemDisabled(item, index)
+    }), [!_ctx.$slots.item ? (openBlock(), createElementBlock("span", mergeProps({
+      key: 0,
+      "class": _ctx.cx('itemLink'),
+      ref_for: true
+    }, $options.getPTOptions('itemLink', item, index)), [createElementVNode("span", mergeProps({
+      "class": _ctx.cx('itemNumber'),
+      ref_for: true
+    }, $options.getPTOptions('itemNumber', item, index)), toDisplayString(index + 1), 17), createElementVNode("span", mergeProps({
+      "class": _ctx.cx('itemLabel'),
+      ref_for: true
+    }, $options.getPTOptions('itemLabel', item, index)), toDisplayString($options.label(item)), 17)], 16)) : (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.item), {
+      key: 1,
+      item: item,
+      index: index,
+      active: index === $data.d_activeStep,
+      label: $options.label(item),
+      props: $options.getMenuItemProps(item, index)
+    }, null, 8, ["item", "index", "active", "label", "props"]))], 16, _hoisted_2)) : createCommentVNode("", true)], 64);
+  }), 128))], 16)], 16, _hoisted_1);
+}
+
+script.render = render;
+
+export { script as default };
+//# sourceMappingURL=steps.mjs.map

package/steps/steps.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"steps.mjs","sources":["../../src/steps/BaseSteps.vue","../../src/steps/Steps.vue","../../src/steps/Steps.vue?vue&type=template&id=27f8507b&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevuelab/core/basecomponent';\nimport StepsStyle from 'primevuelab/steps/style';\n\nexport default {\n    name: 'BaseSteps',\n    extends: BaseComponent,\n    props: {\n        id: {\n            type: String\n        },\n        model: {\n            type: Array,\n            default: null\n        },\n        readonly: {\n            type: Boolean,\n            default: true\n        },\n        activeStep: {\n            type: Number,\n            default: 0\n        }\n    },\n    style: StepsStyle,\n    provide() {\n        return {\n            $pcSteps: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <nav :id=\"id\" :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n        <ol ref=\"list\" :class=\"cx('list')\" v-bind=\"ptm('list')\">\n            <template v-for=\"(item, index) of model\" :key=\"label(item) + '_' + index.toString()\">\n                <li\n                    v-if=\"visible(item)\"\n                    :class=\"[cx('item', { item, index }), item.class]\"\n                    :style=\"item.style\"\n                    :aria-current=\"isActive(index) ? 'step' : undefined\"\n                    @click=\"onItemClick($event, item, index)\"\n                    @keydown=\"onItemKeydown($event, item, index)\"\n                    v-bind=\"getPTOptions('item', item, index)\"\n                    :data-p-active=\"isActive(index)\"\n                    :data-p-disabled=\"isItemDisabled(item, index)\"\n                >\n                    <template v-if=\"!$slots.item\">\n                        <span :class=\"cx('itemLink')\" v-bind=\"getPTOptions('itemLink', item, index)\">\n                            <span :class=\"cx('itemNumber')\" v-bind=\"getPTOptions('itemNumber', item, index)\">{{ index + 1 }}</span>\n                            <span :class=\"cx('itemLabel')\" v-bind=\"getPTOptions('itemLabel', item, index)\">{{ label(item) }}</span>\n                        </span>\n                    </template>\n                    <component v-else :is=\"$slots.item\" :item=\"item\" :index=\"index\" :active=\"index === d_activeStep\" :label=\"label(item)\" :props=\"getMenuItemProps(item, index)\"></component>\n                </li>\n            </template>\n        </ol>\n    </nav>\n</template>\n\n<script>\nimport { DomHandler } from '@primevuelab/core/utils';\nimport { mergeProps } from 'vue';\nimport BaseSteps from './BaseSteps.vue';\n\nexport default {\n    name: 'Steps',\n    extends: BaseSteps,\n    inheritAttrs: false,\n    emits: ['update:activeStep', 'step-change'],\n    data() {\n        return {\n            d_activeStep: this.activeStep\n        };\n    },\n    watch: {\n        activeStep(newValue) {\n            this.d_activeStep = newValue;\n        }\n    },\n    mounted() {\n        const firstItem = this.findFirstItem();\n\n        firstItem && (firstItem.tabIndex = '0');\n    },\n    methods: {\n        getPTOptions(key, item, index) {\n            return this.ptm(key, {\n                context: {\n                    item,\n                    index,\n                    active: this.isActive(index),\n                    disabled: this.isItemDisabled(item, index)\n                }\n            });\n        },\n        onItemClick(event, item, index) {\n            if (this.disabled(item) || this.readonly) {\n                event.preventDefault();\n\n                return;\n            }\n\n            if (item.command) {\n                item.command({\n                    originalEvent: event,\n                    item: item\n                });\n            }\n\n            if (index !== this.d_activeStep) {\n                this.d_activeStep = index;\n                this.$emit('update:activeStep', this.d_activeStep);\n            }\n\n            this.$emit('step-change', {\n                originalEvent: event,\n                index: index\n            });\n        },\n        onItemKeydown(event, item) {\n            switch (event.code) {\n                case 'ArrowRight': {\n                    this.navigateToNextItem(event.target);\n                    event.preventDefault();\n                    break;\n                }\n\n                case 'ArrowLeft': {\n                    this.navigateToPrevItem(event.target);\n                    event.preventDefault();\n                    break;\n                }\n\n                case 'Home': {\n                    this.navigateToFirstItem(event.target);\n                    event.preventDefault();\n                    break;\n                }\n\n                case 'End': {\n                    this.navigateToLastItem(event.target);\n                    event.preventDefault();\n                    break;\n                }\n\n                case 'Tab':\n                    //no op\n                    break;\n\n                case 'Enter':\n                case 'NumpadEnter':\n\n                case 'Space': {\n                    this.onItemClick(event, item);\n                    event.preventDefault();\n                    break;\n                }\n\n                default:\n                    break;\n            }\n        },\n        navigateToNextItem(target) {\n            const nextItem = this.findNextItem(target);\n\n            nextItem && this.setFocusToMenuitem(target, nextItem);\n        },\n        navigateToPrevItem(target) {\n            const prevItem = this.findPrevItem(target);\n\n            prevItem && this.setFocusToMenuitem(target, prevItem);\n        },\n        navigateToFirstItem(target) {\n            const firstItem = this.findFirstItem(target);\n\n            firstItem && this.setFocusToMenuitem(target, firstItem);\n        },\n        navigateToLastItem(target) {\n            const lastItem = this.findLastItem(target);\n\n            lastItem && this.setFocusToMenuitem(target, lastItem);\n        },\n        findNextItem(item) {\n            const nextItem = item.parentElement.nextElementSibling;\n\n            return nextItem ? nextItem.children[0] : null;\n        },\n        findPrevItem(item) {\n            const prevItem = item.parentElement.previousElementSibling;\n\n            return prevItem ? prevItem.children[0] : null;\n        },\n        findFirstItem() {\n            const firstSibling = DomHandler.findSingle(this.$refs.list, '[data-pc-section=\"item\"]');\n\n            return firstSibling ? firstSibling.children[0] : null;\n        },\n        findLastItem() {\n            const siblings = DomHandler.find(this.$refs.list, '[data-pc-section=\"item\"]');\n\n            return siblings ? siblings[siblings.length - 1].children[0] : null;\n        },\n        setFocusToMenuitem(target, focusableItem) {\n            target.tabIndex = '-1';\n            focusableItem.tabIndex = '0';\n            focusableItem.focus();\n        },\n        isActive(index) {\n            return index === this.d_activeStep;\n        },\n        isItemDisabled(item, index) {\n            return this.disabled(item) || (this.readonly && !this.isActive(index));\n        },\n        visible(item) {\n            return typeof item.visible === 'function' ? item.visible() : item.visible !== false;\n        },\n        disabled(item) {\n            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;\n        },\n        label(item) {\n            return typeof item.label === 'function' ? item.label() : item.label;\n        },\n        getMenuItemProps(item, index) {\n            return {\n                action: mergeProps(\n                    {\n                        class: this.cx('itemLink'),\n                        onClick: ($event) => this.onItemClick($event, item),\n                        onKeyDown: ($event) => this.onItemKeydown($event, item)\n                    },\n                    this.getPTOptions('itemLink', item, index)\n                ),\n                step: mergeProps(\n                    {\n                        class: this.cx('itemNumber')\n                    },\n                    this.getPTOptions('itemNumber', item, index)\n                ),\n                label: mergeProps(\n                    {\n                        class: this.cx('itemLabel')\n                    },\n                    this.getPTOptions('itemLabel', item, index)\n                )\n            };\n        }\n    }\n};\n</script>\n","<template>\n    <nav :id=\"id\" :class=\"cx('root')\" v-bind=\"ptmi('root')\">\n        <ol ref=\"list\" :class=\"cx('list')\" v-bind=\"ptm('list')\">\n            <template v-for=\"(item, index) of model\" :key=\"label(item) + '_' + index.toString()\">\n                <li\n                    v-if=\"visible(item)\"\n                    :class=\"[cx('item', { item, index }), item.class]\"\n                    :style=\"item.style\"\n                    :aria-current=\"isActive(index) ? 'step' : undefined\"\n                    @click=\"onItemClick($event, item, index)\"\n                    @keydown=\"onItemKeydown($event, item, index)\"\n                    v-bind=\"getPTOptions('item', item, index)\"\n                    :data-p-active=\"isActive(index)\"\n                    :data-p-disabled=\"isItemDisabled(item, index)\"\n                >\n                    <template v-if=\"!$slots.item\">\n                        <span :class=\"cx('itemLink')\" v-bind=\"getPTOptions('itemLink', item, index)\">\n                            <span :class=\"cx('itemNumber')\" v-bind=\"getPTOptions('itemNumber', item, index)\">{{ index + 1 }}</span>\n                            <span :class=\"cx('itemLabel')\" v-bind=\"getPTOptions('itemLabel', item, index)\">{{ label(item) }}</span>\n                        </span>\n                    </template>\n                    <component v-else :is=\"$slots.item\" :item=\"item\" :index=\"index\" :active=\"index === d_activeStep\" :label=\"label(item)\" :props=\"getMenuItemProps(item, index)\"></component>\n                </li>\n            </template>\n        </ol>\n    </nav>\n</template>\n\n<script>\nimport { DomHandler } from '@primevuelab/core/utils';\nimport { mergeProps } from 'vue';\nimport BaseSteps from './BaseSteps.vue';\n\nexport default {\n    name: 'Steps',\n    extends: BaseSteps,\n    inheritAttrs: false,\n    emits: ['update:activeStep', 'step-change'],\n    data() {\n        return {\n            d_activeStep: this.activeStep\n        };\n    },\n    watch: {\n        activeStep(newValue) {\n            this.d_activeStep = newValue;\n        }\n    },\n    mounted() {\n        const firstItem = this.findFirstItem();\n\n        firstItem && (firstItem.tabIndex = '0');\n    },\n    methods: {\n        getPTOptions(key, item, index) {\n            return this.ptm(key, {\n                context: {\n                    item,\n                    index,\n                    active: this.isActive(index),\n                    disabled: this.isItemDisabled(item, index)\n                }\n            });\n        },\n        onItemClick(event, item, index) {\n            if (this.disabled(item) || this.readonly) {\n                event.preventDefault();\n\n                return;\n            }\n\n            if (item.command) {\n                item.command({\n                    originalEvent: event,\n                    item: item\n                });\n            }\n\n            if (index !== this.d_activeStep) {\n                this.d_activeStep = index;\n                this.$emit('update:activeStep', this.d_activeStep);\n            }\n\n            this.$emit('step-change', {\n                originalEvent: event,\n                index: index\n            });\n        },\n        onItemKeydown(event, item) {\n            switch (event.code) {\n                case 'ArrowRight': {\n                    this.navigateToNextItem(event.target);\n                    event.preventDefault();\n                    break;\n                }\n\n                case 'ArrowLeft': {\n                    this.navigateToPrevItem(event.target);\n                    event.preventDefault();\n                    break;\n                }\n\n                case 'Home': {\n                    this.navigateToFirstItem(event.target);\n                    event.preventDefault();\n                    break;\n                }\n\n                case 'End': {\n                    this.navigateToLastItem(event.target);\n                    event.preventDefault();\n                    break;\n                }\n\n                case 'Tab':\n                    //no op\n                    break;\n\n                case 'Enter':\n                case 'NumpadEnter':\n\n                case 'Space': {\n                    this.onItemClick(event, item);\n                    event.preventDefault();\n                    break;\n                }\n\n                default:\n                    break;\n            }\n        },\n        navigateToNextItem(target) {\n            const nextItem = this.findNextItem(target);\n\n            nextItem && this.setFocusToMenuitem(target, nextItem);\n        },\n        navigateToPrevItem(target) {\n            const prevItem = this.findPrevItem(target);\n\n            prevItem && this.setFocusToMenuitem(target, prevItem);\n        },\n        navigateToFirstItem(target) {\n            const firstItem = this.findFirstItem(target);\n\n            firstItem && this.setFocusToMenuitem(target, firstItem);\n        },\n        navigateToLastItem(target) {\n            const lastItem = this.findLastItem(target);\n\n            lastItem && this.setFocusToMenuitem(target, lastItem);\n        },\n        findNextItem(item) {\n            const nextItem = item.parentElement.nextElementSibling;\n\n            return nextItem ? nextItem.children[0] : null;\n        },\n        findPrevItem(item) {\n            const prevItem = item.parentElement.previousElementSibling;\n\n            return prevItem ? prevItem.children[0] : null;\n        },\n        findFirstItem() {\n            const firstSibling = DomHandler.findSingle(this.$refs.list, '[data-pc-section=\"item\"]');\n\n            return firstSibling ? firstSibling.children[0] : null;\n        },\n        findLastItem() {\n            const siblings = DomHandler.find(this.$refs.list, '[data-pc-section=\"item\"]');\n\n            return siblings ? siblings[siblings.length - 1].children[0] : null;\n        },\n        setFocusToMenuitem(target, focusableItem) {\n            target.tabIndex = '-1';\n            focusableItem.tabIndex = '0';\n            focusableItem.focus();\n        },\n        isActive(index) {\n            return index === this.d_activeStep;\n        },\n        isItemDisabled(item, index) {\n            return this.disabled(item) || (this.readonly && !this.isActive(index));\n        },\n        visible(item) {\n            return typeof item.visible === 'function' ? item.visible() : item.visible !== false;\n        },\n        disabled(item) {\n            return typeof item.disabled === 'function' ? item.disabled() : item.disabled;\n        },\n        label(item) {\n            return typeof item.label === 'function' ? item.label() : item.label;\n        },\n        getMenuItemProps(item, index) {\n            return {\n                action: mergeProps(\n                    {\n                        class: this.cx('itemLink'),\n                        onClick: ($event) => this.onItemClick($event, item),\n                        onKeyDown: ($event) => this.onItemKeydown($event, item)\n                    },\n                    this.getPTOptions('itemLink', item, index)\n                ),\n                step: mergeProps(\n                    {\n                        class: this.cx('itemNumber')\n                    },\n                    this.getPTOptions('itemNumber', item, index)\n                ),\n                label: mergeProps(\n                    {\n                        class: this.cx('itemLabel')\n                    },\n                    this.getPTOptions('itemLabel', item, index)\n                )\n            };\n        }\n    }\n};\n</script>\n"],"names":["name","BaseComponent","props","id","type","String","model","Array","readonly","Boolean","activeStep","Number","style","StepsStyle","provide","$pcSteps","$parentInstance","BaseSteps","inheritAttrs","emits","data","d_activeStep","watch","newValue","mounted","firstItem","findFirstItem","tabIndex","methods","getPTOptions","key","item","index","ptm","context","active","isActive","disabled","isItemDisabled","onItemClick","event","preventDefault","command","originalEvent","$emit","onItemKeydown","code","navigateToNextItem","target","navigateToPrevItem","navigateToFirstItem","navigateToLastItem","nextItem","findNextItem","setFocusToMenuitem","prevItem","findPrevItem","lastItem","findLastItem","parentElement","nextElementSibling","children","previousElementSibling","firstSibling","DomHandler","findSingle","$refs","list","siblings","find","length","focusableItem","focus","visible","label","getMenuItemProps","_this","action","mergeProps","cx","onClick","$event","onKeyDown","step","_openBlock","_createElementBlock","_mergeProps","_ctx","ptmi","_createElementVNode","ref","_Fragment","_renderList","$options","toString","undefined","onKeydown","$slots","_toDisplayString","_createBlock","_resolveDynamicComponent","$data"],"mappings":"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"}

package/steps/style/StepsStyle.d.ts

@@ -0,0 +1,39 @@
+/**
+ *
+ * Steps components is an indicator for the steps in a wizard workflow. Example below uses nested routes with Steps.
+ *
+ * [Live Demo](https://www.primevuelab.org/steps/)
+ *
+ * @module stepsstyle
+ *
+ */
+import { BaseStyle } from '../../base/style';
+
+export enum StepsClasses {
+    /**
+     * Class name of the root element
+     */
+    root = 'p-steps',
+    /**
+     * Class name of the list element
+     */
+    list = 'p-steps-list',
+    /**
+     * Class name of the item element
+     */
+    item = 'p-steps-item',
+    /**
+     * Class name of the item link element
+     */
+    itemLink = 'p-steps-item-link',
+    /**
+     * Class name of the item number element
+     */
+    itemNumber = 'p-steps-item-number',
+    /**
+     * Class name of the item label element
+     */
+    itemLabel = 'p-steps-item-label'
+}
+
+export interface StepsStyle extends BaseStyle {}

package/steps/style/package.json

@@ -0,0 +1,6 @@
+{
+    "main": "stepsstyle.mjs",
+    "module": "stepsstyle.mjs",
+    "types": "./StepsStyle.d.ts",
+    "sideEffects": false
+}

package/steps/style/stepsstyle.mjs

@@ -0,0 +1,35 @@
+import BaseStyle from '@primevuelab/core/base/style';
+
+var theme = function theme(_ref) {
+  var dt = _ref.dt;
+  return "\n.p-steps {\n    position: relative;\n}\n\n.p-steps-list {\n    padding: 0;\n    margin: 0;\n    list-style-type: none;\n    display: flex;\n}\n\n.p-steps-item {\n    position: relative;\n    display: flex;\n    justify-content: center;\n    flex: 1 1 auto;\n}\n\n.p-steps-item.p-disabled,\n.p-steps-item.p-disabled * {\n    opacity: 1;\n    pointer-events: auto;\n    user-select: auto;\n    cursor: auto;\n}\n\n.p-steps-item:before {\n    content: \" \";\n    border-top: 2px solid ".concat(dt('steps.separator.background'), ";\n    width: 100%;\n    top: 50%;\n    left: 0;\n    display: block;\n    position: absolute;\n    margin-top: -1rem;\n    margin-top: calc(-1rem + 1px);\n}\n\n.p-steps-item:first-child::before {\n    width: calc(50% + 1rem);\n    transform: translateX(100%);\n}\n\n.p-steps-item:last-child::before {\n    width: 50%;\n}\n\n.p-steps-item-link {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    overflow: hidden;\n    text-decoration: none;\n    transition: outline-color ").concat(dt('steps.transition.duration'), ", box-shadow ").concat(dt('steps.transition.duration'), ";\n    border-radius: ").concat(dt('steps.item.link.border.radius'), ";\n    outline-color: transparent;\n    gap: ").concat(dt('steps.item.link.gap'), ";\n}\n\n.p-steps-item-link:not(.p-disabled):focus-visible {\n    box-shadow: ").concat(dt('steps.item.link.focus.ring.shadow'), ";\n    outline: ").concat(dt('steps.item.link.focus.ring.width'), " ").concat(dt('steps.item.link.focus.ring.style'), " ").concat(dt('steps.item.link.focus.ring.color'), ";\n    outline-offset: ").concat(dt('steps.item.link.focus.ring.offset'), ";\n}\n\n.p-steps-item-label {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 100%;\n    color: ").concat(dt('steps.item.label.color'), ";\n    display: block;\n    font-weight: ").concat(dt('steps.item.label.font.weight'), ";\n}\n\n.p-steps-item-number {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: ").concat(dt('steps.item.number.color'), ";\n    border: 2px solid ").concat(dt('steps.item.number.border.color'), ";\n    background: ").concat(dt('steps.item.number.background'), ";\n    min-width: ").concat(dt('steps.item.number.size'), ";\n    height: ").concat(dt('steps.item.number.size'), ";\n    line-height: ").concat(dt('steps.item.number.size'), ";\n    font-size: ").concat(dt('steps.item.number.font.size'), ";\n    z-index: 1;\n    border-radius: ").concat(dt('steps.item.number.border.radius'), ";\n    position: relative;\n    font-weight: ").concat(dt('steps.item.number.font.weight'), ";\n}\n\n.p-steps-item-number::after {\n    content: \" \";\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ").concat(dt('steps.item.number.border.radius'), ";\n    box-shadow: ").concat(dt('steps.item.number.shadow'), ";\n}\n\n.p-steps:not(.p-readonly) .p-steps-item {\n    cursor: pointer;\n}\n\n.p-steps-item-active .p-steps-item-number {\n    background: ").concat(dt('steps.item.number.active.background'), ";\n    border-color: ").concat(dt('steps.item.number.active.border.color'), ";\n    color: ").concat(dt('steps.item.number.active.color'), ";\n}\n\n.p-steps-item-active .p-steps-item-label {\n    color: ").concat(dt('steps.item.label.active.color'), ";\n}\n");
+};
+var classes = {
+  root: function root(_ref2) {
+    var props = _ref2.props;
+    return ['p-steps p-component', {
+      'p-readonly': props.readonly
+    }];
+  },
+  list: 'p-steps-list',
+  item: function item(_ref3) {
+    var instance = _ref3.instance,
+      _item = _ref3.item,
+      index = _ref3.index;
+    return ['p-steps-item', {
+      'p-steps-item-active': instance.isActive(index),
+      'p-disabled': instance.isItemDisabled(_item, index)
+    }];
+  },
+  itemLink: 'p-steps-item-link',
+  itemNumber: 'p-steps-item-number',
+  itemLabel: 'p-steps-item-label'
+};
+var StepsStyle = BaseStyle.extend({
+  name: 'steps',
+  theme: theme,
+  classes: classes
+});
+
+export { StepsStyle as default };
+//# sourceMappingURL=stepsstyle.mjs.map

package/steps/style/stepsstyle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepsstyle.mjs","sources":["../../../src/steps/style/StepsStyle.js"],"sourcesContent":["import BaseStyle from '@primevuelab/core/base/style';\n\nconst theme = ({ dt }) => `\n.p-steps {\n    position: relative;\n}\n\n.p-steps-list {\n    padding: 0;\n    margin: 0;\n    list-style-type: none;\n    display: flex;\n}\n\n.p-steps-item {\n    position: relative;\n    display: flex;\n    justify-content: center;\n    flex: 1 1 auto;\n}\n\n.p-steps-item.p-disabled,\n.p-steps-item.p-disabled * {\n    opacity: 1;\n    pointer-events: auto;\n    user-select: auto;\n    cursor: auto;\n}\n\n.p-steps-item:before {\n    content: \" \";\n    border-top: 2px solid ${dt('steps.separator.background')};\n    width: 100%;\n    top: 50%;\n    left: 0;\n    display: block;\n    position: absolute;\n    margin-top: -1rem;\n    margin-top: calc(-1rem + 1px);\n}\n\n.p-steps-item:first-child::before {\n    width: calc(50% + 1rem);\n    transform: translateX(100%);\n}\n\n.p-steps-item:last-child::before {\n    width: 50%;\n}\n\n.p-steps-item-link {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    overflow: hidden;\n    text-decoration: none;\n    transition: outline-color ${dt('steps.transition.duration')}, box-shadow ${dt('steps.transition.duration')};\n    border-radius: ${dt('steps.item.link.border.radius')};\n    outline-color: transparent;\n    gap: ${dt('steps.item.link.gap')};\n}\n\n.p-steps-item-link:not(.p-disabled):focus-visible {\n    box-shadow: ${dt('steps.item.link.focus.ring.shadow')};\n    outline: ${dt('steps.item.link.focus.ring.width')} ${dt('steps.item.link.focus.ring.style')} ${dt('steps.item.link.focus.ring.color')};\n    outline-offset: ${dt('steps.item.link.focus.ring.offset')};\n}\n\n.p-steps-item-label {\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 100%;\n    color: ${dt('steps.item.label.color')};\n    display: block;\n    font-weight: ${dt('steps.item.label.font.weight')};\n}\n\n.p-steps-item-number {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: ${dt('steps.item.number.color')};\n    border: 2px solid ${dt('steps.item.number.border.color')};\n    background: ${dt('steps.item.number.background')};\n    min-width: ${dt('steps.item.number.size')};\n    height: ${dt('steps.item.number.size')};\n    line-height: ${dt('steps.item.number.size')};\n    font-size: ${dt('steps.item.number.font.size')};\n    z-index: 1;\n    border-radius: ${dt('steps.item.number.border.radius')};\n    position: relative;\n    font-weight: ${dt('steps.item.number.font.weight')};\n}\n\n.p-steps-item-number::after {\n    content: \" \";\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ${dt('steps.item.number.border.radius')};\n    box-shadow: ${dt('steps.item.number.shadow')};\n}\n\n.p-steps:not(.p-readonly) .p-steps-item {\n    cursor: pointer;\n}\n\n.p-steps-item-active .p-steps-item-number {\n    background: ${dt('steps.item.number.active.background')};\n    border-color: ${dt('steps.item.number.active.border.color')};\n    color: ${dt('steps.item.number.active.color')};\n}\n\n.p-steps-item-active .p-steps-item-label {\n    color: ${dt('steps.item.label.active.color')};\n}\n`;\n\nconst classes = {\n    root: ({ props }) => ['p-steps p-component', { 'p-readonly': props.readonly }],\n    list: 'p-steps-list',\n    item: ({ instance, item, index }) => [\n        'p-steps-item',\n        {\n            'p-steps-item-active': instance.isActive(index),\n            'p-disabled': instance.isItemDisabled(item, index)\n        }\n    ],\n    itemLink: 'p-steps-item-link',\n    itemNumber: 'p-steps-item-number',\n    itemLabel: 'p-steps-item-label'\n};\n\nexport default BaseStyle.extend({\n    name: 'steps',\n    theme,\n    classes\n});\n"],"names":["theme","_ref","dt","concat","classes","root","_ref2","props","readonly","list","item","_ref3","instance","index","isActive","isItemDisabled","itemLink","itemNumber","itemLabel","BaseStyle","extend","name"],"mappings":"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"}