primevuelab 4.0.0-beta.4

package/stepper/Stepper.d.ts

@@ -0,0 +1,170 @@
+/**
+ *
+ * Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process.
+ *
+ * [Live Demo](https://www.primevuelab.org/stepper/)
+ *
+ * @module stepper
+ *
+ */
+import { VNode } from 'vue';
+import { ComponentHooks } from '../../../core/src/basecomponent';
+import { PassThroughOptions } from '../passthrough';
+import { DefineComponent, DesignToken, EmitFn, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+
+export declare type StepperPassThroughOptionType = StepperPassThroughAttributes | ((options: StepperPassThroughMethodOptions) => StepperPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface StepperPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: StepperProps;
+    /**
+     * Defines current inline state.
+     */
+    state: StepperState;
+    /**
+     * 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 StepperProps.pt}
+ */
+export interface StepperPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: StepperPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface StepperPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Stepper component.
+ */
+export interface StepperState {
+    /**
+     * Current active value state.
+     */
+    d_value: any;
+    /**
+     * Unique id for the Stepper component.
+     */
+    id: string;
+}
+
+/**
+ * Defines valid properties in Stepper component.
+ */
+export interface StepperProps {
+    /**
+     * Active value of stepper.
+     * @defaultValue null
+     */
+    value?: string | number | undefined;
+    /**
+     * Whether the steps are clickable or not.
+     * @defaultValue false
+     */
+    linear?: boolean | 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 {StepperPassThroughOptions}
+     */
+    pt?: PassThrough<StepperPassThroughOptions>;
+    /**
+     * 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 Stepper component.
+ */
+export interface StepperSlots {
+    /**
+     * Custom default template.
+     */
+    default(): VNode[];
+    /**
+     * Custom start template.
+     */
+    start(): VNode[];
+    /**
+     * Custom end template.
+     */
+    end(): VNode[];
+}
+
+/**
+ * Defines valid emits in Stepper component.
+ */
+export interface StepperEmitsOptions {
+    /**
+     * Emitted when the value changes.
+     * @param {any} value - New value.
+     */
+    'update:value'(value: any): void;
+}
+
+export declare type StepperEmits = EmitFn<StepperEmitsOptions>;
+
+/**
+ * **primevuelab - Stepper**
+ *
+ * _Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process._
+ *
+ * [Live Demo](https://www.primevuelab.org/stepper/)
+ * --- ---
+ * ![primevuelab](https://primefaces.org/cdn/primevuelab/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare const Stepper: DefineComponent<StepperProps, StepperSlots, StepperEmits>;
+
+declare module 'vue' {
+    export interface GlobalComponents {
+        Stepper: GlobalComponentConstructor<StepperProps, StepperSlots, StepperEmits>;
+    }
+}
+
+export default Stepper;

package/stepper/Stepper.vue

@@ -0,0 +1,50 @@
+<template>
+    <div :class="cx('root')" role="tablist" v-bind="ptmi('root')">
+        <slot v-if="$slots.start" name="start" />
+        <slot />
+        <slot v-if="$slots.end" name="end" />
+    </div>
+</template>
+
+<script>
+import { UniqueComponentId } from '@primevuelab/core/utils';
+import BaseStepper from './BaseStepper.vue';
+
+export default {
+    name: 'Stepper',
+    extends: BaseStepper,
+    inheritAttrs: false,
+    emits: ['update:value'],
+    data() {
+        return {
+            id: this.$attrs.id,
+            d_value: this.value
+        };
+    },
+    watch: {
+        '$attrs.id'(newValue) {
+            this.id = newValue || UniqueComponentId();
+        },
+        value(newValue) {
+            this.d_value = newValue;
+        }
+    },
+    mounted() {
+        this.id = this.id || UniqueComponentId();
+    },
+    methods: {
+        updateValue(newValue) {
+            if (this.d_value !== newValue) {
+                this.d_value = newValue;
+                this.$emit('update:value', newValue);
+            }
+        },
+        isStepActive(value) {
+            return this.d_value === value;
+        },
+        isStepDisabled() {
+            return this.linear;
+        }
+    }
+};
+</script>

package/stepper/StepperSeparator.vue

@@ -0,0 +1,13 @@
+<template>
+    <span :class="cx('separator')" v-bind="ptm('separator')" />
+</template>
+
+<script>
+import BaseComponent from '@primevuelab/core/basecomponent';
+
+export default {
+    name: 'StepperSeparator',
+    hostName: 'Stepper',
+    extends: BaseComponent
+};
+</script>

package/stepper/package.json

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

package/stepper/stepper.mjs

@@ -0,0 +1,80 @@
+import { UniqueComponentId } from '@primevuelab/core/utils';
+import BaseComponent from '@primevuelab/core/basecomponent';
+import StepperStyle from 'primevuelab/stepper/style';
+import { openBlock, createElementBlock, mergeProps, renderSlot, createCommentVNode } from 'vue';
+
+var script$1 = {
+  name: 'BaseStepper',
+  "extends": BaseComponent,
+  props: {
+    value: {
+      type: [String, Number],
+      "default": undefined
+    },
+    linear: {
+      type: Boolean,
+      "default": false
+    }
+  },
+  style: StepperStyle,
+  provide: function provide() {
+    return {
+      $pcStepper: this,
+      $parentInstance: this
+    };
+  }
+};
+
+var script = {
+  name: 'Stepper',
+  "extends": script$1,
+  inheritAttrs: false,
+  emits: ['update:value'],
+  data: function data() {
+    return {
+      id: this.$attrs.id,
+      d_value: this.value
+    };
+  },
+  watch: {
+    '$attrs.id': function $attrsId(newValue) {
+      this.id = newValue || UniqueComponentId();
+    },
+    value: function value(newValue) {
+      this.d_value = newValue;
+    }
+  },
+  mounted: function mounted() {
+    this.id = this.id || UniqueComponentId();
+  },
+  methods: {
+    updateValue: function updateValue(newValue) {
+      if (this.d_value !== newValue) {
+        this.d_value = newValue;
+        this.$emit('update:value', newValue);
+      }
+    },
+    isStepActive: function isStepActive(value) {
+      return this.d_value === value;
+    },
+    isStepDisabled: function isStepDisabled() {
+      return this.linear;
+    }
+  }
+};
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", mergeProps({
+    "class": _ctx.cx('root'),
+    role: "tablist"
+  }, _ctx.ptmi('root')), [_ctx.$slots.start ? renderSlot(_ctx.$slots, "start", {
+    key: 0
+  }) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default"), _ctx.$slots.end ? renderSlot(_ctx.$slots, "end", {
+    key: 1
+  }) : createCommentVNode("", true)], 16);
+}
+
+script.render = render;
+
+export { script as default };
+//# sourceMappingURL=stepper.mjs.map

package/stepper/stepper.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.mjs","sources":["../../src/stepper/BaseStepper.vue","../../src/stepper/Stepper.vue","../../src/stepper/Stepper.vue?vue&type=template&id=4aed1655&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevuelab/core/basecomponent';\nimport StepperStyle from 'primevuelab/stepper/style';\n\nexport default {\n    name: 'BaseStepper',\n    extends: BaseComponent,\n    props: {\n        value: {\n            type: [String, Number],\n            default: undefined\n        },\n        linear: {\n            type: Boolean,\n            default: false\n        }\n    },\n    style: StepperStyle,\n    provide() {\n        return {\n            $pcStepper: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" role=\"tablist\" v-bind=\"ptmi('root')\">\n        <slot v-if=\"$slots.start\" name=\"start\" />\n        <slot />\n        <slot v-if=\"$slots.end\" name=\"end\" />\n    </div>\n</template>\n\n<script>\nimport { UniqueComponentId } from '@primevuelab/core/utils';\nimport BaseStepper from './BaseStepper.vue';\n\nexport default {\n    name: 'Stepper',\n    extends: BaseStepper,\n    inheritAttrs: false,\n    emits: ['update:value'],\n    data() {\n        return {\n            id: this.$attrs.id,\n            d_value: this.value\n        };\n    },\n    watch: {\n        '$attrs.id'(newValue) {\n            this.id = newValue || UniqueComponentId();\n        },\n        value(newValue) {\n            this.d_value = newValue;\n        }\n    },\n    mounted() {\n        this.id = this.id || UniqueComponentId();\n    },\n    methods: {\n        updateValue(newValue) {\n            if (this.d_value !== newValue) {\n                this.d_value = newValue;\n                this.$emit('update:value', newValue);\n            }\n        },\n        isStepActive(value) {\n            return this.d_value === value;\n        },\n        isStepDisabled() {\n            return this.linear;\n        }\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" role=\"tablist\" v-bind=\"ptmi('root')\">\n        <slot v-if=\"$slots.start\" name=\"start\" />\n        <slot />\n        <slot v-if=\"$slots.end\" name=\"end\" />\n    </div>\n</template>\n\n<script>\nimport { UniqueComponentId } from '@primevuelab/core/utils';\nimport BaseStepper from './BaseStepper.vue';\n\nexport default {\n    name: 'Stepper',\n    extends: BaseStepper,\n    inheritAttrs: false,\n    emits: ['update:value'],\n    data() {\n        return {\n            id: this.$attrs.id,\n            d_value: this.value\n        };\n    },\n    watch: {\n        '$attrs.id'(newValue) {\n            this.id = newValue || UniqueComponentId();\n        },\n        value(newValue) {\n            this.d_value = newValue;\n        }\n    },\n    mounted() {\n        this.id = this.id || UniqueComponentId();\n    },\n    methods: {\n        updateValue(newValue) {\n            if (this.d_value !== newValue) {\n                this.d_value = newValue;\n                this.$emit('update:value', newValue);\n            }\n        },\n        isStepActive(value) {\n            return this.d_value === value;\n        },\n        isStepDisabled() {\n            return this.linear;\n        }\n    }\n};\n</script>\n"],"names":["name","BaseComponent","props","value","type","String","Number","undefined","linear","Boolean","style","StepperStyle","provide","$pcStepper","$parentInstance","BaseStepper","inheritAttrs","emits","data","id","$attrs","d_value","watch","$attrsId","newValue","UniqueComponentId","mounted","methods","updateValue","$emit","isStepActive","isStepDisabled","_openBlock","_createElementBlock","_mergeProps","_ctx","cx","role","ptmi","$slots","start","_renderSlot","key","end"],"mappings":";;;;;AAIA,eAAe;AACXA,EAAAA,IAAI,EAAE,aAAa;AACnB,EAAA,SAAA,EAASC,aAAa;AACtBC,EAAAA,KAAK,EAAE;AACHC,IAAAA,KAAK,EAAE;AACHC,MAAAA,IAAI,EAAE,CAACC,MAAM,EAAEC,MAAM,CAAC;MACtB,SAASC,EAAAA,SAAAA;KACZ;AACDC,IAAAA,MAAM,EAAE;AACJJ,MAAAA,IAAI,EAAEK,OAAO;MACb,SAAS,EAAA,KAAA;AACb,KAAA;GACH;AACDC,EAAAA,KAAK,EAAEC,YAAY;EACnBC,OAAO,EAAA,SAAAA,UAAG;IACN,OAAO;AACHC,MAAAA,UAAU,EAAE,IAAI;AAChBC,MAAAA,eAAe,EAAE,IAAA;KACpB,CAAA;AACL,GAAA;AACJ,CAAC;;ACZD,aAAe;AACXd,EAAAA,IAAI,EAAE,SAAS;AACf,EAAA,SAAA,EAASe,QAAW;AACpBC,EAAAA,YAAY,EAAE,KAAK;EACnBC,KAAK,EAAE,CAAC,cAAc,CAAC;EACvBC,IAAI,EAAA,SAAAA,OAAG;IACH,OAAO;AACHC,MAAAA,EAAE,EAAE,IAAI,CAACC,MAAM,CAACD,EAAE;MAClBE,OAAO,EAAE,IAAI,CAAClB,KAAAA;KACjB,CAAA;GACJ;AACDmB,EAAAA,KAAK,EAAE;IACH,WAAW,EAAA,SAAAC,QAACC,CAAAA,QAAQ,EAAE;AAClB,MAAA,IAAI,CAACL,EAAG,GAAEK,YAAYC,iBAAiB,EAAE,CAAA;KAC5C;IACDtB,KAAK,EAAA,SAAAA,KAACqB,CAAAA,QAAQ,EAAE;MACZ,IAAI,CAACH,OAAQ,GAAEG,QAAQ,CAAA;AAC3B,KAAA;GACH;EACDE,OAAO,EAAA,SAAAA,UAAG;IACN,IAAI,CAACP,EAAG,GAAE,IAAI,CAACA,EAAC,IAAKM,iBAAiB,EAAE,CAAA;GAC3C;AACDE,EAAAA,OAAO,EAAE;IACLC,WAAW,EAAA,SAAAA,WAACJ,CAAAA,QAAQ,EAAE;AAClB,MAAA,IAAI,IAAI,CAACH,OAAQ,KAAIG,QAAQ,EAAE;QAC3B,IAAI,CAACH,OAAQ,GAAEG,QAAQ,CAAA;AACvB,QAAA,IAAI,CAACK,KAAK,CAAC,cAAc,EAAEL,QAAQ,CAAC,CAAA;AACxC,OAAA;KACH;IACDM,YAAY,EAAA,SAAAA,YAAC3B,CAAAA,KAAK,EAAE;AAChB,MAAA,OAAO,IAAI,CAACkB,OAAM,KAAMlB,KAAK,CAAA;KAChC;IACD4B,cAAc,EAAA,SAAAA,iBAAG;MACb,OAAO,IAAI,CAACvB,MAAM,CAAA;AACtB,KAAA;AACJ,GAAA;AACJ,CAAC;;;EC/CG,OAAAwB,SAAA,EAAA,EAAAC,kBAAA,CAIK,OAJLC,UAIK,CAAA;AAJC,IAAA,OAAA,EAAOC,IAAE,CAAAC,EAAA,CAAA,MAAA,CAAA;AAAUC,IAAAA,IAAI,EAAC,SAAA;KAAkBF,IAAI,CAAAG,IAAA,CAAA,MAAA,CAAA,CAAA,EAAA,CACpCH,IAAA,CAAAI,MAAM,CAACC,KAAK,GAAxBC,UAAwC,CAAAN,IAAA,CAAAI,MAAA,EAAA,OAAA,EAAA;AAAAG,IAAAA,GAAA,EAAA,CAAA;AAAA,GAAA,CAAA,iCACxCD,UAAO,CAAAN,IAAA,CAAAI,MAAA,EAAA,SAAA,CAAA,EACKJ,IAAA,CAAAI,MAAM,CAACI,GAAG,GAAtBF,UAAoC,CAAAN,IAAA,CAAAI,MAAA,EAAA,KAAA,EAAA;AAAAG,IAAAA,GAAA,EAAA,CAAA;GAAA,CAAA;;;;;;;"}

package/stepper/style/StepperStyle.d.ts

@@ -0,0 +1,23 @@
+/**
+ *
+ * Stepper is a component that streamlines a wizard-like workflow, organizing content into coherent steps and visually guiding users through a numbered progression in a multi-step process.
+ *
+ * [Live Demo](https://www.primevuelab.org/stepper/)
+ *
+ * @module stepperstyle
+ *
+ */
+import { BaseStyle } from '../../base/style';
+
+export enum StepperClasses {
+    /**
+     * Class name of the root element
+     */
+    root = 'p-stepper',
+    /**
+     * Class name of the separator element
+     */
+    separator = 'p-stepper-separator'
+}
+
+export interface StepperStyle extends BaseStyle {}

package/stepper/style/package.json

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

package/stepper/style/stepperstyle.mjs

@@ -0,0 +1,23 @@
+import BaseStyle from '@primevuelab/core/base/style';
+
+var theme = function theme(_ref) {
+  var dt = _ref.dt;
+  return "\n.p-steplist {\n    position: relative;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    overflow-x: auto;\n}\n\n.p-step {\n    position: relative;\n    display: flex;\n    flex: 1 1 auto;\n    align-items: center;\n    gap: ".concat(dt('stepper.step.gap'), ";\n    padding: ").concat(dt('stepper.step.padding'), ";\n}\n\n.p-step:last-of-type {\n    flex: initial;\n}\n\n.p-step-header {\n    border: 0 none;\n    display: inline-flex;\n    align-items: center;\n    text-decoration: none;\n    cursor: pointer;\n    transition: background ").concat(dt('stepper.transition.duration'), ", color ").concat(dt('stepper.transition.duration'), ", border-color ").concat(dt('stepper.transition.duration'), ", outline-color ").concat(dt('stepper.transition.duration'), ", box-shadow ").concat(dt('stepper.transition.duration'), ";\n    border-radius: ").concat(dt('stepper.step.header.border.radius'), ";\n    outline-color: transparent;\n    background: transparent;\n    padding: ").concat(dt('stepper.step.header.padding'), ";\n    gap: ").concat(dt('stepper.step.header.gap'), ";\n}\n\n.p-step-header:focus-visible {\n    box-shadow: ").concat(dt('stepper.step.header.focus.ring.shadow'), ";\n    outline: ").concat(dt('stepper.step.header.focus.ring.width'), " ").concat(dt('stepper.step.header.focus.ring.style'), " ").concat(dt('stepper.step.header.focus.ring.color'), ";\n    outline-offset: ").concat(dt('stepper.step.header.focus.ring.offset'), ";\n}\n\n.p-stepper.p-stepper-readonly .p-step {\n    cursor: auto;\n}\n\n.p-step-title {\n    display: block;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 100%;\n    color: ").concat(dt('stepper.step.title.color'), ";\n    font-weight: ").concat(dt('stepper.step.title.font.weight'), ";\n    transition: background ").concat(dt('stepper.transition.duration'), ", color ").concat(dt('stepper.transition.duration'), ", border-color ").concat(dt('stepper.transition.duration'), ", box-shadow ").concat(dt('stepper.transition.duration'), ", outline-color ").concat(dt('stepper.transition.duration'), ";\n}\n\n.p-step-number {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: ").concat(dt('stepper.step.number.color'), ";\n    border: 2px solid ").concat(dt('stepper.step.number.border.color'), ";\n    background: ").concat(dt('stepper.step.number.background'), ";\n    min-width: ").concat(dt('stepper.step.number.size'), ";\n    height: ").concat(dt('stepper.step.number.size'), ";\n    line-height: ").concat(dt('stepper.step.number.size'), ";\n    font-size: ").concat(dt('stepper.step.number.font.size'), ";\n    z-index: 1;\n    border-radius: ").concat(dt('stepper.step.number.border.radius'), ";\n    position: relative;\n    font-weight: ").concat(dt('stepper.step.number.font.weight'), ";\n}\n\n.p-step-number::after {\n    content: \" \";\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ").concat(dt('stepper.step.number.border.radius'), ";\n    box-shadow: ").concat(dt('stepper.step.number.shadow'), ";\n}\n\n.p-step-active .p-step-header {\n    cursor: default;\n}\n\n.p-step-active .p-step-number {\n    background: ").concat(dt('stepper.step.number.active.background'), ";\n    border-color: ").concat(dt('stepper.step.number.active.border.color'), ";\n    color: ").concat(dt('stepper.step.number.active.color'), ";\n}\n\n.p-step-active .p-step-title {\n    color: ").concat(dt('stepper.step.title.active.color'), ";\n}\n\n.p-step:not(.p-disabled):focus-visible {\n    outline: ").concat(dt('focus.ring.width'), " ").concat(dt('focus.ring.style'), " ").concat(dt('focus.ring.color'), ";\n    outline-offset: ").concat(dt('focus.ring.offset'), ";\n}\n\n.p-step:has(~ .p-step-active) .p-stepper-separator {\n    background: ").concat(dt('stepper.separator.active.background'), ";\n}\n\n.p-step:has(~ .p-step-active) .p-stepper-separator {\n    background: ").concat(dt('stepper.separator.active.background'), ";\n}\n\n.p-stepper-separator {\n    flex: 1 1 0;\n    background: ").concat(dt('stepper.separator.background'), ";\n    width: 100%;\n    height: ").concat(dt('stepper.separator.size'), ";\n    transition: background ").concat(dt('stepper.transition.duration'), ", color ").concat(dt('stepper.transition.duration'), ", border-color ").concat(dt('stepper.transition.duration'), ", box-shadow ").concat(dt('stepper.transition.duration'), ", outline-color ").concat(dt('stepper.transition.duration'), ";\n}\n\n.p-steppanels {\n    padding: ").concat(dt('stepper.steppanels.padding'), ";\n}\n\n.p-steppanel {\n    background: ").concat(dt('stepper.steppanel.content.background'), ";\n    color: ").concat(dt('stepper.steppanel.content.color'), ";\n}\n\n.p-stepper:has(.p-stepitem) {\n    display: flex;\n    flex-direction: column;\n}\n\n.p-stepitem {\n    display: flex;\n    flex-direction: column;\n    flex: initial;\n}\n\n.p-stepitem.p-stepitem-active {\n    flex: 1 1 auto;\n}\n\n.p-stepitem .p-step {\n    flex: initial;\n}\n\n.p-stepitem .p-steppanel-content {\n    width: 100%;\n    padding: ").concat(dt('stepper.steppanel.padding'), ";\n}\n\n.p-stepitem .p-steppanel {\n    display: flex;\n    flex: 1 1 auto;\n}\n\n.p-stepitem .p-stepper-separator {\n    flex: 0 0 auto;\n    width: ").concat(dt('stepper.separator.size'), ";\n    height: auto;\n    margin: ").concat(dt('stepper.separator.margin'), ";\n    position: relative;\n    left: calc(-1 * ").concat(dt('stepper.separator.size'), ");\n}\n\n.p-stepitem:has(~ .p-stepitem-active) .p-stepper-separator {\n    background: ").concat(dt('stepper.separator.active.background'), ";\n}\n\n.p-stepitem:last-of-type .p-steppanel {\n    padding: ").concat(dt('stepper.steppanel.last.padding'), ";\n}\n");
+};
+var classes = {
+  root: function root(_ref2) {
+    var props = _ref2.props;
+    return ['p-stepper p-component', {
+      'p-readonly': props.linear
+    }];
+  },
+  separator: 'p-stepper-separator'
+};
+var StepperStyle = BaseStyle.extend({
+  name: 'stepper',
+  theme: theme,
+  classes: classes
+});
+
+export { StepperStyle as default };
+//# sourceMappingURL=stepperstyle.mjs.map

package/stepper/style/stepperstyle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepperstyle.mjs","sources":["../../../src/stepper/style/StepperStyle.js"],"sourcesContent":["import BaseStyle from '@primevuelab/core/base/style';\n\nconst theme = ({ dt }) => `\n.p-steplist {\n    position: relative;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    overflow-x: auto;\n}\n\n.p-step {\n    position: relative;\n    display: flex;\n    flex: 1 1 auto;\n    align-items: center;\n    gap: ${dt('stepper.step.gap')};\n    padding: ${dt('stepper.step.padding')};\n}\n\n.p-step:last-of-type {\n    flex: initial;\n}\n\n.p-step-header {\n    border: 0 none;\n    display: inline-flex;\n    align-items: center;\n    text-decoration: none;\n    cursor: pointer;\n    transition: background ${dt('stepper.transition.duration')}, color ${dt('stepper.transition.duration')}, border-color ${dt('stepper.transition.duration')}, outline-color ${dt('stepper.transition.duration')}, box-shadow ${dt(\n        'stepper.transition.duration'\n    )};\n    border-radius: ${dt('stepper.step.header.border.radius')};\n    outline-color: transparent;\n    background: transparent;\n    padding: ${dt('stepper.step.header.padding')};\n    gap: ${dt('stepper.step.header.gap')};\n}\n\n.p-step-header:focus-visible {\n    box-shadow: ${dt('stepper.step.header.focus.ring.shadow')};\n    outline: ${dt('stepper.step.header.focus.ring.width')} ${dt('stepper.step.header.focus.ring.style')} ${dt('stepper.step.header.focus.ring.color')};\n    outline-offset: ${dt('stepper.step.header.focus.ring.offset')};\n}\n\n.p-stepper.p-stepper-readonly .p-step {\n    cursor: auto;\n}\n\n.p-step-title {\n    display: block;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 100%;\n    color: ${dt('stepper.step.title.color')};\n    font-weight: ${dt('stepper.step.title.font.weight')};\n    transition: background ${dt('stepper.transition.duration')}, color ${dt('stepper.transition.duration')}, border-color ${dt('stepper.transition.duration')}, box-shadow ${dt('stepper.transition.duration')}, outline-color ${dt(\n        'stepper.transition.duration'\n    )};\n}\n\n.p-step-number {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: ${dt('stepper.step.number.color')};\n    border: 2px solid ${dt('stepper.step.number.border.color')};\n    background: ${dt('stepper.step.number.background')};\n    min-width: ${dt('stepper.step.number.size')};\n    height: ${dt('stepper.step.number.size')};\n    line-height: ${dt('stepper.step.number.size')};\n    font-size: ${dt('stepper.step.number.font.size')};\n    z-index: 1;\n    border-radius: ${dt('stepper.step.number.border.radius')};\n    position: relative;\n    font-weight: ${dt('stepper.step.number.font.weight')};\n}\n\n.p-step-number::after {\n    content: \" \";\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    border-radius: ${dt('stepper.step.number.border.radius')};\n    box-shadow: ${dt('stepper.step.number.shadow')};\n}\n\n.p-step-active .p-step-header {\n    cursor: default;\n}\n\n.p-step-active .p-step-number {\n    background: ${dt('stepper.step.number.active.background')};\n    border-color: ${dt('stepper.step.number.active.border.color')};\n    color: ${dt('stepper.step.number.active.color')};\n}\n\n.p-step-active .p-step-title {\n    color: ${dt('stepper.step.title.active.color')};\n}\n\n.p-step:not(.p-disabled):focus-visible {\n    outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};\n    outline-offset: ${dt('focus.ring.offset')};\n}\n\n.p-step:has(~ .p-step-active) .p-stepper-separator {\n    background: ${dt('stepper.separator.active.background')};\n}\n\n.p-step:has(~ .p-step-active) .p-stepper-separator {\n    background: ${dt('stepper.separator.active.background')};\n}\n\n.p-stepper-separator {\n    flex: 1 1 0;\n    background: ${dt('stepper.separator.background')};\n    width: 100%;\n    height: ${dt('stepper.separator.size')};\n    transition: background ${dt('stepper.transition.duration')}, color ${dt('stepper.transition.duration')}, border-color ${dt('stepper.transition.duration')}, box-shadow ${dt('stepper.transition.duration')}, outline-color ${dt(\n        'stepper.transition.duration'\n    )};\n}\n\n.p-steppanels {\n    padding: ${dt('stepper.steppanels.padding')};\n}\n\n.p-steppanel {\n    background: ${dt('stepper.steppanel.content.background')};\n    color: ${dt('stepper.steppanel.content.color')};\n}\n\n.p-stepper:has(.p-stepitem) {\n    display: flex;\n    flex-direction: column;\n}\n\n.p-stepitem {\n    display: flex;\n    flex-direction: column;\n    flex: initial;\n}\n\n.p-stepitem.p-stepitem-active {\n    flex: 1 1 auto;\n}\n\n.p-stepitem .p-step {\n    flex: initial;\n}\n\n.p-stepitem .p-steppanel-content {\n    width: 100%;\n    padding: ${dt('stepper.steppanel.padding')};\n}\n\n.p-stepitem .p-steppanel {\n    display: flex;\n    flex: 1 1 auto;\n}\n\n.p-stepitem .p-stepper-separator {\n    flex: 0 0 auto;\n    width: ${dt('stepper.separator.size')};\n    height: auto;\n    margin: ${dt('stepper.separator.margin')};\n    position: relative;\n    left: calc(-1 * ${dt('stepper.separator.size')});\n}\n\n.p-stepitem:has(~ .p-stepitem-active) .p-stepper-separator {\n    background: ${dt('stepper.separator.active.background')};\n}\n\n.p-stepitem:last-of-type .p-steppanel {\n    padding: ${dt('stepper.steppanel.last.padding')};\n}\n`;\n\nconst classes = {\n    root: ({ props }) => [\n        'p-stepper p-component',\n        {\n            'p-readonly': props.linear\n        }\n    ],\n    separator: 'p-stepper-separator'\n};\n\nexport default BaseStyle.extend({\n    name: 'stepper',\n    theme,\n    classes\n});\n"],"names":["theme","_ref","dt","concat","classes","root","_ref2","props","linear","separator","BaseStyle","extend","name"],"mappings":"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"}

package/stepperpanel/BaseStepperPanel.vue

@@ -0,0 +1,19 @@
+<script>
+import BaseComponent from '@primevuelab/core/basecomponent';
+import StepperPanelStyle from 'primevuelab/stepperpanel/style';
+
+export default {
+    name: 'BaseStepperPanel',
+    extends: BaseComponent,
+    props: {
+        header: null
+    },
+    style: StepperPanelStyle,
+    provide() {
+        return {
+            $pcStepperPanel: this,
+            $parentInstance: this
+        };
+    }
+};
+</script>