@leaflink/stash 51.9.3 → 51.11.0

package/dist/SelectStatus.vue.d.ts

@@ -1,63 +1,243 @@
+import { AllowedComponentProps } from 'vue';
+import { ComponentCustomProperties } from 'vue';
+import { ComponentCustomProps } from 'vue';
+import { ComponentInternalInstance } from 'vue';
+import { ComponentOptionsBase } from 'vue';
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
+import { ComponentPublicInstance } from 'vue';
+import { DebuggerEvent } from 'vue';
 import { DefineComponent } from 'vue';
-import { ExtractPropTypes } from 'vue';
-import { PropType } from 'vue';
+import { GlobalComponents } from 'vue';
+import { GlobalDirectives } from 'vue';
+import { nextTick } from 'vue';
+import { OnCleanup } from '@vue/reactivity';
+import { Placement } from '@floating-ui/utils';
 import { PublicProps } from 'vue';
+import { SelectProps } from '../Select/Select.vue';
+import { ShallowUnwrapRef } from 'vue';
+import { Slot } from 'vue';
+import { VNodeProps } from 'vue';
+import { WatchOptions } from 'vue';
+import { WatchStopHandle } from 'vue';
 
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-
-declare type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: PropType<T[K]>;
-        required: true;
-    };
-};
-
-declare type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-
-declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SelectStatusProps>, {
+declare const _default: DefineComponent<SelectStatusProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"update:model-value": (value: unknown) => any;
+}, string, PublicProps, Readonly<SelectStatusProps> & Readonly<{
+"onUpdate:model-value"?: ((value: unknown) => any) | undefined;
+}>, {
+label: string;
+value: string | number | boolean | null;
+placeholder: string;
+secondary: boolean;
 disabled: boolean;
+trackBy: string;
 displayBy: string;
-secondary: boolean;
 noTruncate: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+select: ({
+$: ComponentInternalInstance;
+$data: {};
+$props: {
+readonly preventEmpty?: boolean | undefined;
+readonly allowEmpty?: string | boolean | null | undefined;
+readonly displayBy?: string | undefined;
+readonly searchBy?: string[] | undefined;
+readonly trackBy?: string | undefined;
+readonly placeholder?: string | undefined;
+readonly error?: string | undefined;
+readonly hint?: string | undefined;
+readonly icon?: string | boolean | undefined;
+readonly name?: string | undefined;
+readonly options?: any[] | readonly any[] | undefined;
+readonly lazy?: (() => any[]) | undefined;
+readonly modelValue?: any;
+readonly value?: any;
+readonly hideSearch?: boolean | undefined;
+readonly searchable?: string | boolean | null | undefined;
+readonly preserveSearchTerm?: boolean | undefined;
+readonly disableFiltering?: boolean | undefined;
+readonly single?: boolean | undefined;
+readonly noTruncate?: boolean | undefined;
+readonly loading?: boolean | undefined;
+readonly searchLoading?: boolean | undefined;
+readonly selectItemType?: string | undefined;
+readonly hideCheck?: boolean | undefined;
+readonly searchPlaceholder?: string | undefined;
+readonly onSearch?: ((searchTerm: string) => void | Promise<void>) | undefined;
+readonly useFuzzySearch?: boolean | undefined;
+readonly menuPlacement?: Placement | undefined;
+readonly enableTeleport?: boolean | undefined;
+readonly teleportTo?: string | HTMLElement | undefined;
+readonly addBottomSpace?: boolean | undefined;
+readonly errorText?: string | undefined;
+readonly hintText?: string | undefined;
+readonly id?: string | undefined;
+readonly errorId?: string | undefined;
+readonly isReadOnly?: boolean | undefined;
+readonly isRequired?: boolean | undefined;
+readonly label?: string | undefined;
+readonly showOptionalInLabel?: boolean | undefined;
+readonly isLabelSrOnly?: boolean | undefined;
+readonly fieldset?: boolean | undefined;
+readonly isDisabled?: boolean | undefined;
+readonly disabled?: boolean | undefined;
+readonly onClear?: (() => any) | undefined;
+readonly onAdd?: ((optionAdded: any) => any) | undefined;
+readonly onRemove?: ((optionRemoved: any, index: number) => any) | undefined;
+readonly "onUpdate:model-value"?: ((selectedOptions: any) => any) | undefined;
+readonly onOpened?: (() => any) | undefined;
+readonly onClosed?: ((selectedOptions: any) => any) | undefined;
+} & VNodeProps & AllowedComponentProps & ComponentCustomProps;
+$attrs: {
+[x: string]: unknown;
+};
+$refs: {
+[x: string]: unknown;
+} & {
+selectRef: HTMLDivElement;
+contentRef: HTMLDivElement;
+chipsRef: HTMLUListElement;
+optionsWrapperRef: HTMLDivElement;
+searchRef: HTMLInputElement;
+};
+$slots: Readonly<{
+[name: string]: Slot<any> | undefined;
+}>;
+$root: ComponentPublicInstance<    {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
+$parent: ComponentPublicInstance<    {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
+$host: Element | null;
+$emit: ((event: "clear") => void) & ((event: "add", optionAdded: any) => void) & ((event: "remove", optionRemoved: any, index: number) => void) & ((event: "update:model-value", selectedOptions: any) => void) & ((event: "opened") => void) & ((event: "closed", selectedOptions: any) => void);
+$el: any;
+$options: ComponentOptionsBase<Readonly<SelectProps> & Readonly<{
+onClear?: (() => any) | undefined;
+onAdd?: ((optionAdded: any) => any) | undefined;
+onRemove?: ((optionRemoved: any, index: number) => any) | undefined;
+"onUpdate:model-value"?: ((selectedOptions: any) => any) | undefined;
+onOpened?: (() => any) | undefined;
+onClosed?: ((selectedOptions: any) => any) | undefined;
+}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+clear: () => any;
+add: (optionAdded: any) => any;
+remove: (optionRemoved: any, index: number) => any;
+"update:model-value": (selectedOptions: any) => any;
+opened: () => any;
+closed: (selectedOptions: any) => any;
+}, string, {
+name: string;
+error: string;
+value: any;
+options: any[] | readonly any[];
+lazy: () => any[];
+icon: string | boolean;
 placeholder: string;
 trackBy: string;
-value: null;
-label: undefined;
-}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-"update:model-value": (value: unknown) => void;
-}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SelectStatusProps>, {
-disabled: boolean;
+hint: string;
+preventEmpty: boolean;
+allowEmpty: string | boolean | null;
 displayBy: string;
-secondary: boolean;
+searchBy: string[];
+modelValue: any;
+hideSearch: boolean;
+searchable: string | boolean | null;
+preserveSearchTerm: boolean;
+disableFiltering: boolean;
+single: boolean;
 noTruncate: boolean;
+loading: boolean;
+searchLoading: boolean;
+selectItemType: string;
+hideCheck: boolean;
+searchPlaceholder: string;
+onSearch: (searchTerm: string) => void | Promise<void>;
+useFuzzySearch: boolean;
+menuPlacement: Placement;
+enableTeleport: boolean;
+teleportTo: string | HTMLElement;
+}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
+beforeCreate?: ((() => void) | (() => void)[]) | undefined;
+created?: ((() => void) | (() => void)[]) | undefined;
+beforeMount?: ((() => void) | (() => void)[]) | undefined;
+mounted?: ((() => void) | (() => void)[]) | undefined;
+beforeUpdate?: ((() => void) | (() => void)[]) | undefined;
+updated?: ((() => void) | (() => void)[]) | undefined;
+activated?: ((() => void) | (() => void)[]) | undefined;
+deactivated?: ((() => void) | (() => void)[]) | undefined;
+beforeDestroy?: ((() => void) | (() => void)[]) | undefined;
+beforeUnmount?: ((() => void) | (() => void)[]) | undefined;
+destroyed?: ((() => void) | (() => void)[]) | undefined;
+unmounted?: ((() => void) | (() => void)[]) | undefined;
+renderTracked?: (((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[]) | undefined;
+renderTriggered?: (((e: DebuggerEvent) => void) | ((e: DebuggerEvent) => void)[]) | undefined;
+errorCaptured?: (((err: unknown, instance: ComponentPublicInstance<    {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, info: string) => boolean | void) | ((err: unknown, instance: ComponentPublicInstance<    {}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, info: string) => boolean | void)[]) | undefined;
+};
+$forceUpdate: () => void;
+$nextTick: nextTick;
+$watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R, args_2: OnCleanup) => any : (args_0: any, args_1: any, args_2: OnCleanup) => any, options?: WatchOptions<boolean> | undefined): WatchStopHandle;
+} & Readonly<{
+name: string;
+error: string;
+value: any;
+options: any[] | readonly any[];
+lazy: () => any[];
+icon: string | boolean;
 placeholder: string;
 trackBy: string;
-value: null;
-label: undefined;
-}>>> & Readonly<{
-"onUpdate:model-value"?: ((value: unknown) => any) | undefined;
-}>, {
-disabled: boolean;
-label: string;
-secondary: boolean;
-trackBy: string;
-placeholder: string;
+hint: string;
+preventEmpty: boolean;
+allowEmpty: string | boolean | null;
 displayBy: string;
-value: string | number | boolean | null;
+searchBy: string[];
+modelValue: any;
+hideSearch: boolean;
+searchable: string | boolean | null;
+preserveSearchTerm: boolean;
+disableFiltering: boolean;
+single: boolean;
 noTruncate: boolean;
-}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+loading: boolean;
+searchLoading: boolean;
+selectItemType: string;
+hideCheck: boolean;
+searchPlaceholder: string;
+onSearch: (searchTerm: string) => void | Promise<void>;
+useFuzzySearch: boolean;
+menuPlacement: Placement;
+enableTeleport: boolean;
+teleportTo: string | HTMLElement;
+}> & Omit<Readonly<SelectProps> & Readonly<{
+onClear?: (() => any) | undefined;
+onAdd?: ((optionAdded: any) => any) | undefined;
+onRemove?: ((optionRemoved: any, index: number) => any) | undefined;
+"onUpdate:model-value"?: ((selectedOptions: any) => any) | undefined;
+onOpened?: (() => any) | undefined;
+onClosed?: ((selectedOptions: any) => any) | undefined;
+}>, "name" | "error" | "value" | "options" | "lazy" | "icon" | "placeholder" | "trackBy" | "hint" | "preventEmpty" | "allowEmpty" | "displayBy" | "searchBy" | "modelValue" | "hideSearch" | "searchable" | "preserveSearchTerm" | "disableFiltering" | "single" | "noTruncate" | "loading" | "searchLoading" | "selectItemType" | "hideCheck" | "searchPlaceholder" | "onSearch" | "useFuzzySearch" | "menuPlacement" | "enableTeleport" | "teleportTo"> & ShallowUnwrapRef<    {}> & {} & ComponentCustomProperties & {} & {
+$slots: Readonly<{
+selected(props: {
+option: any;
+onRemove: () => void;
+chipSelectedClass: string;
+}): unknown;
+option(props: {
+option: any;
+}): unknown;
+'no-options'(): unknown;
+hint(): unknown;
+}> & {
+selected(props: {
+option: any;
+onRemove: () => void;
+chipSelectedClass: string;
+}): unknown;
+option(props: {
+option: any;
+}): unknown;
+'no-options'(): unknown;
+hint(): unknown;
+};
+}) | null;
+}, any>;
 export default _default;
 
 declare type IconName = (typeof iconNames)[number];
@@ -67,16 +247,16 @@ declare type IconName = (typeof iconNames)[number];
  *
  * https://github.com/LeafLink/stash/blob/main/CONTRIBUTING.md#adding-a-new-icon
  */
-declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "bank", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "camera", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-empty", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-slash", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "equals", "export", "face-id", "face", "figma", "file-csv", "file", "filter-funnel", "filter-line", "fingerprint", "flag", "folder", "folder-bar-graph", "folder-orders", "font-bold", "font-clear-format", "font-italic", "font-underline", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "help-question-mark", "hide", "history", "home", "image", "import", "keyboard-return", "tier-1", "tier-2", "tier-3", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-empty", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reorder", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "start", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "tag-leaf", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user-group", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
+declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "bank", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "camera", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-empty", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-slash", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "cloud-share", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "equals", "export", "face-id", "face", "figma", "file-csv", "file", "filter-funnel", "filter-line", "fingerprint", "flag", "folder", "folder-bar-graph", "folder-orders", "font-bold", "font-clear-format", "font-italic", "font-underline", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "help-question-mark", "hide", "history", "home", "image", "import", "keyboard-return", "tier-1", "tier-2", "tier-3", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-empty", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reorder", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "start", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "tag-leaf", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user-group", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
 
-export declare type SelectStatusOption = {
+declare type SelectStatusOption = {
     id: number | string | boolean;
     name: string;
     color?: StashPrimaryColorGroup | StashCommonColor;
     icon?: IconName;
 };
 
-export declare interface SelectStatusProps {
+declare interface SelectStatusProps {
     /**
      * Disables the component, if true
      */

package/dist/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sources":["../src/components/Skeleton/Skeleton.vue"],"sourcesContent":["<script lang=\"ts\">\n  export enum SkeletonVariants {\n    Text = 'text',\n    Circular = 'circular',\n    Rectangular = 'rectangular',\n  }\n\n  export type SkeletonVariant = `${SkeletonVariants}`;\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, useCssModule, useSlots } from 'vue';\n\n  export interface SkeletonProps {\n    /** Pass a pixel value for circular and rectangular variants */\n    height?: string | number;\n\n    /** Either text, circular, or rectangular */\n    variant?: SkeletonVariant;\n\n    /** Pass a pixel value for any variant */\n    width?: string | number;\n  }\n\n  const props = withDefaults(defineProps<SkeletonProps>(), {\n    height: undefined,\n    variant: SkeletonVariants.Text,\n    width: undefined,\n  });\n\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const hasChildren = computed(() => !!slots['default']);\n\n  const computedStyles = computed(() => {\n    const styles: {\n      width?: string;\n      height?: string;\n    } = {};\n\n    if (props.width) {\n      styles.width = `${props.width}px`;\n    }\n\n    // If the variant is text, let the font-size define the height\n    if (props.height && props.variant !== SkeletonVariants.Text) {\n      styles.height = `${props.height}px`;\n    }\n\n    return styles;\n  });\n</script>\n\n<template>\n  <div\n    data-test=\"stash-skeleton\"\n    class=\"stash-skeleton tw-animate-pulse tw-bg-ice-500\"\n    :class=\"{\n      'stash-skeleton--circular tw-rounded-full': props.variant === SkeletonVariants.Circular,\n      'stash-skeleton--text tw-rounded': props.variant === SkeletonVariants.Text,\n      [classes['text-variant']]: props.variant === SkeletonVariants.Text,\n      'stash-skeleton--rectangular tw-rounded': props.variant === SkeletonVariants.Rectangular,\n      [classes['has-children']]: hasChildren,\n      'tw-max-w-fit': hasChildren && !props.width,\n      'tw-h-auto': hasChildren && !props.height,\n    }\"\n    :style=\"computedStyles\"\n  >\n    <!-- @slot Default slot for style inheritance -->\n    <slot></slot>\n  </div>\n</template>\n\n<style module>\n  .text-variant::before {\n    content: '\\00a0';\n  }\n\n  .has-children > * {\n    visibility: hidden;\n  }\n</style>\n"],"names":["SkeletonVariants","props","__props","slots","useSlots","classes","useCssModule","hasChildren","computed","computedStyles","styles"],"mappings":";;AACc,IAAAA,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,WAAW,YACXA,EAAA,cAAc,eAHJA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;AAuBZ,UAAMC,IAAQC,GAMRC,IAAQC,EAAS,GACjBC,IAAUC,EAAa,GAEvBC,IAAcC,EAAS,MAAM,CAAC,CAACL,EAAM,OAAU,GAE/CM,IAAiBD,EAAS,MAAM;AACpC,YAAME,IAGF,CAAC;AAEL,aAAIT,EAAM,UACDS,EAAA,QAAQ,GAAGT,EAAM,KAAK,OAI3BA,EAAM,UAAUA,EAAM,YAAY,WAC7BS,EAAA,SAAS,GAAGT,EAAM,MAAM,OAG1BS;AAAA,IAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Skeleton.js","sources":["../src/components/Skeleton/Skeleton.vue"],"sourcesContent":["<script lang=\"ts\">\n  export enum SkeletonVariants {\n    Text = 'text',\n    Circular = 'circular',\n    Rectangular = 'rectangular',\n  }\n\n  export type SkeletonVariant = `${SkeletonVariants}`;\n</script>\n\n<script setup lang=\"ts\">\n  import { computed, useCssModule, useSlots } from 'vue';\n\n  export interface SkeletonProps {\n    /** Pass a pixel value for circular and rectangular variants */\n    height?: string | number;\n\n    /** Either text, circular, or rectangular */\n    variant?: SkeletonVariant;\n\n    /** Pass a pixel value for any variant */\n    width?: string | number;\n  }\n\n  const props = withDefaults(defineProps<SkeletonProps>(), {\n    height: undefined,\n    variant: SkeletonVariants.Text,\n    width: undefined,\n  });\n\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const hasChildren = computed(() => !!slots['default']);\n\n  const computedStyles = computed(() => {\n    const styles: {\n      width?: string;\n      height?: string;\n    } = {};\n\n    if (props.width) {\n      styles.width = `${props.width}px`;\n    }\n\n    // If the variant is text, let the font-size define the height\n    if (props.height && props.variant !== SkeletonVariants.Text) {\n      styles.height = `${props.height}px`;\n    }\n\n    return styles;\n  });\n</script>\n\n<template>\n  <div\n    data-test=\"stash-skeleton\"\n    class=\"stash-skeleton tw-animate-pulse tw-bg-ice-500\"\n    :class=\"{\n      'stash-skeleton--circular tw-rounded-full': props.variant === SkeletonVariants.Circular,\n      'stash-skeleton--text tw-rounded': props.variant === SkeletonVariants.Text,\n      [classes['text-variant']]: props.variant === SkeletonVariants.Text,\n      'stash-skeleton--rectangular tw-rounded': props.variant === SkeletonVariants.Rectangular,\n      [classes['has-children']]: hasChildren,\n      'tw-max-w-fit': hasChildren && !props.width,\n      'tw-h-auto': hasChildren && !props.height,\n    }\"\n    :style=\"computedStyles\"\n  >\n    <!-- @slot Default slot for style inheritance -->\n    <slot></slot>\n  </div>\n</template>\n\n<style module>\n  .text-variant::before {\n    content: '\\00a0';\n  }\n\n  .has-children > * {\n    visibility: hidden;\n  }\n</style>\n"],"names":["SkeletonVariants","props","__props","slots","useSlots","classes","useCssModule","hasChildren","computed","computedStyles","styles","_createElementBlock","_unref","_renderSlot","_ctx"],"mappings":";;AACS,IAAKA,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,WAAW,YACXA,EAAA,cAAc,eAHJA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;AAuBZ,UAAMC,IAAQC,GAMRC,IAAQC,EAAA,GACRC,IAAUC,EAAA,GAEVC,IAAcC,EAAS,MAAM,CAAC,CAACL,EAAM,OAAU,GAE/CM,IAAiBD,EAAS,MAAM;AACpC,YAAME,IAGF,CAAA;AAEJ,aAAIT,EAAM,UACRS,EAAO,QAAQ,GAAGT,EAAM,KAAK,OAI3BA,EAAM,UAAUA,EAAM,YAAY,WACpCS,EAAO,SAAS,GAAGT,EAAM,MAAM,OAG1BS;AAAA,IACT,CAAC;2BAIDC,EAgBM,OAAA;AAAA,MAfJ,aAAU;AAAA,MACV,UAAM,iDAA+C;AAAA,QACO,4CAAAV,EAAM,YAAY;AAAA,QAAoE,mCAAAA,EAAM,YAAY;AAAA,QAA8B,CAAAW,EAAAP,CAAA,oBAA0BJ,EAAM,YAAY;AAAA,QAAuE,0CAAAA,EAAM,YAAY;AAAA,QAAqC,CAAAW,EAAAP,CAAA,oBAA0BE,EAAA;AAAA,wBAAmCA,EAAA,SAAW,CAAKN,EAAM;AAAA,qBAA0BM,EAAA,SAAW,CAAKN,EAAM;AAAA,MAAA;MAS9e,SAAOQ,EAAA,KAAc;AAAA,IAAA;MAGtBI,EAAaC,EAAA,QAAA,SAAA;AAAA,IAAA;;;;;;;;"}

package/dist/Skeleton.vue.d.ts

@@ -1,50 +1,19 @@
 import { ComponentOptionsMixin } from 'vue';
 import { ComponentProvideOptions } from 'vue';
 import { DefineComponent } from 'vue';
-import { ExtractPropTypes } from 'vue';
-import { PropType } from 'vue';
 import { PublicProps } from 'vue';
 
-declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-
-declare type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-
-declare type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: PropType<T[K]>;
-        required: true;
-    };
-};
-
-declare type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-
 declare type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
 
-declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SkeletonProps>, {
-height: undefined;
-variant: SkeletonVariants;
-width: undefined;
-}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SkeletonProps>, {
-height: undefined;
-variant: SkeletonVariants;
-width: undefined;
-}>>> & Readonly<{}>, {
-width: string | number;
+declare const _default: __VLS_WithTemplateSlots<DefineComponent<SkeletonProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<SkeletonProps> & Readonly<{}>, {
 height: string | number;
+width: string | number;
 variant: "text" | "circular" | "rectangular";
-}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>, {
     default?(_: {}): any;
 }>;
 export default _default;

package/dist/Step.js

@@ -1,9 +1,9 @@
-import { defineComponent as x, useSlots as g, useCssModule as y, inject as k, computed as d, onBeforeMount as b, createElementBlock as r, openBlock as i, normalizeClass as a, unref as t, createCommentVNode as u, createElementVNode as n, createBlock as B, toDisplayString as _, createTextVNode as N, renderSlot as C } from "vue";
-import { t as E } from "./locale.js";
-import T from "./Icon.js";
-import { S as z } from "./keys-C8Zfr_By.js";
-import { _ as M } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const S = { key: 1 }, I = /* @__PURE__ */ x({
+import { defineComponent as x, useSlots as g, useCssModule as y, inject as S, computed as d, onBeforeMount as k, createElementBlock as r, openBlock as i, normalizeClass as l, unref as t, createCommentVNode as u, createElementVNode as n, createBlock as b, toDisplayString as _, createTextVNode as B, renderSlot as N } from "vue";
+import { t as C } from "./locale.js";
+import E from "./Icon.js";
+import { S as T } from "./keys-C8Zfr_By.js";
+import { _ as j } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const z = { key: 1 }, M = /* @__PURE__ */ x({
   __name: "Step",
   props: {
     active: { type: Boolean, default: !1 },
@@ -16,30 +16,30 @@ const S = { key: 1 }, I = /* @__PURE__ */ x({
     loading: { type: Boolean, default: !1 }
   },
   setup(m) {
-    const e = m, w = g(), s = y(), l = k(z), c = d(() => (l == null ? void 0 : l.orientation) === "horizontal"), p = d(() => (l == null ? void 0 : l.theme) === "light"), o = l == null ? void 0 : l.showResponsiveNav, v = d(() => e.loading ? "working" : e.completed ? "circle-check" : "circle-info"), h = d(
-      () => E("ll.stepper.currentStep", { num: e.step, total: String(l == null ? void 0 : l.stepCount.value) })
+    const e = m, w = g(), s = y(), o = S(T), c = d(() => o?.orientation === "horizontal"), p = d(() => o?.theme === "light"), a = o?.showResponsiveNav, v = d(() => e.loading ? "working" : e.completed ? "circle-check" : "circle-info"), h = d(
+      () => C("ll.stepper.currentStep", { num: e.step, total: String(o?.stepCount.value) })
     );
-    return b(() => {
-      l && l.registerStep(e.nested);
-    }), (f, K) => (i(), r("li", {
-      class: a(["stash-step tw-relative tw-flex tw-w-full", [
+    return k(() => {
+      o && o.registerStep(e.nested);
+    }), (f, J) => (i(), r("li", {
+      class: l(["stash-step tw-relative tw-flex tw-w-full", [
         t(s).step,
         {
           [t(s)["nested-step--active"]]: e.nested && e.active,
-          "last:tw-w-auto": c.value && !t(o),
-          [t(s)["stash-step--singular"]]: t(o),
-          "tw-relative tw-w-full tw-shrink-0 tw-snap-start tw-flex-col tw-justify-center": t(o)
+          "last:tw-w-auto": c.value && !t(a),
+          [t(s)["stash-step--singular"]]: t(a),
+          "tw-relative tw-w-full tw-shrink-0 tw-snap-start tw-flex-col tw-justify-center": t(a)
         }
       ]]),
       "data-test": "stash-step"
     }, [
       e.nested ? u("", !0) : (i(), r("div", {
         key: 0,
-        class: a(["stash-step__indicator tw-flex tw-flex-col tw-items-center", { "tw-mr-3": !t(o) }]),
+        class: l(["stash-step__indicator tw-flex tw-flex-col tw-items-center", { "tw-mr-3": !t(a) }]),
         "data-test": "stash-step|indicator"
       }, [
         n("div", {
-          class: a([
+          class: l([
             t(s).circle,
             {
               [t(s)["circle--todo"]]: !e.error && !e.active && !e.completed,
@@ -50,31 +50,31 @@ const S = { key: 1 }, I = /* @__PURE__ */ x({
             }
           ])
         }, [
-          (e.completed || e.error || e.loading) && !e.active ? (i(), B(T, {
+          (e.completed || e.error || e.loading) && !e.active ? (i(), b(E, {
             key: 0,
             name: v.value,
-            class: a({ "fx-spin": e.loading }),
+            class: l({ "fx-spin": e.loading }),
             size: "dense"
-          }, null, 8, ["name", "class"])) : (i(), r("span", S, _(e.step), 1))
+          }, null, 8, ["name", "class"])) : (i(), r("span", z, _(e.step), 1))
         ], 2),
         n("div", {
-          class: a(["tw-my-1.5 tw-w-px tw-bg-ice-500", [
+          class: l(["tw-my-1.5 tw-w-px tw-bg-ice-500", [
             t(s).line,
             { [t(s)["line--expanded"]]: e.completed || e.active, "tw-hidden": c.value }
           ]])
         }, null, 2)
       ], 2)),
       n("div", {
-        class: a(["tw-flex", [
+        class: l(["tw-flex", [
           {
             "tw-w-full tw-flex-row tw-items-center": c.value,
-            "tw-mt-1.5 tw-justify-center": t(o),
-            "tw-flex-col": !c.value || t(o)
+            "tw-mt-1.5 tw-justify-center": t(a),
+            "tw-flex-col": !c.value || t(a)
           }
         ]])
       }, [
         n("div", {
-          class: a(["stash-step__title", [
+          class: l(["stash-step__title", [
             t(s).title,
             {
               "tw-whitespace-nowrap": c.value,
@@ -83,58 +83,58 @@ const S = { key: 1 }, I = /* @__PURE__ */ x({
               "tw-text-ice-900": p.value,
               "!tw-font-semibold": e.active,
               "tw-text-white": !e.disabled && !p.value,
-              "tw-place-self-center": t(o)
+              "tw-place-self-center": t(a)
             }
           ]]),
           "data-test": "stash-step|title"
         }, [
-          N(_(e.text) + " ", 1),
-          t(o) ? (i(), r("p", {
+          B(_(e.text) + " ", 1),
+          t(a) ? (i(), r("p", {
             key: 0,
-            class: a(["stash-step__pagination-label tw-mb-0 tw-text-center tw-text-xs", p.value ? "tw-text-ice-700" : "tw-text-white"]),
+            class: l(["stash-step__pagination-label tw-mb-0 tw-text-center tw-text-xs", p.value ? "tw-text-ice-700" : "tw-text-white"]),
             "data-test": "stash-step|pagination-label"
           }, _(h.value), 3)) : u("", !0)
         ], 2),
         c.value ? (i(), r("div", {
           key: 0,
-          class: a([
+          class: l([
             t(s).line,
             {
               [t(s)["line--expanded"]]: e.completed || e.active,
-              "tw-mx-1.5 tw-border-t group-last:tw-hidden": !t(o)
+              "tw-mx-1.5 tw-border-t group-last:tw-hidden": !t(a)
             }
           ])
         }, null, 2)) : u("", !0),
         n("div", {
-          class: a(["stash-step--nested-steps", { "tw-pb-9": !f.nested && !t(w).default, "tw-hidden": c.value }])
+          class: l(["stash-step--nested-steps", { "tw-pb-9": !f.nested && !t(w).default, "tw-hidden": c.value }])
         }, [
           n("ul", {
-            class: a([t(s).nested, { "tw-hidden": !t(w).default }])
+            class: l([t(s).nested, { "tw-hidden": !t(w).default }])
           }, [
-            C(f.$slots, "default")
+            N(f.$slots, "default")
           ], 2)
         ], 2)
       ], 2)
     ], 2));
   }
-}), R = "_step_73127_2", V = "_title_73127_11", P = "_line_73127_22", $ = "_circle_73127_62", D = "_nested_73127_18", H = {
-  step: R,
-  title: V,
+}), I = "_step_73127_2", R = "_title_73127_11", V = "_line_73127_22", P = "_circle_73127_62", $ = "_nested_73127_18", D = {
+  step: I,
+  title: R,
   "nested-step--active": "_nested-step--active_73127_18",
-  line: P,
+  line: V,
   "line--expanded": "_line--expanded_73127_27",
   "stash-step--singular": "_stash-step--singular_73127_31",
-  circle: $,
+  circle: P,
   "circle--todo": "_circle--todo_73127_75",
   "circle--active": "_circle--active_73127_81",
   "circle--loading": "_circle--loading_73127_87",
   "circle--completed": "_circle--completed_73127_94",
   "circle--error": "_circle--error_73127_101",
-  nested: D
-}, J = {
-  $style: H
-}, F = /* @__PURE__ */ M(I, [["__cssModules", J]]);
+  nested: $
+}, H = {
+  $style: D
+}, A = /* @__PURE__ */ j(M, [["__cssModules", H]]);
 export {
-  F as default
+  A as default
 };
 //# sourceMappingURL=Step.js.map

package/dist/Step.js.map

@@ -1 +1 @@
-{"version":3,"file":"Step.js","sources":["../src/components/Step/Step.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, useCssModule, useSlots } from 'vue';\n\n  import { t } from '../../locale';\n  import Icon from '../Icon/Icon.vue';\n  import { STEPPER_INJECTION_KEY } from '../Stepper/keys';\n\n  export interface StepProps {\n    /**\n     * Indicates if the step is currently active.\n     * This takes precedence over `completed` and `error`\n     */\n    active?: boolean;\n    /**\n     * Indicates if the step is completed\n     */\n    completed?: boolean;\n    /**\n     * Indicates if the step has an error\n     * This takes precedence over `completed`\n     */\n    error?: boolean;\n    /**\n     * The text to display in the step.\n     */\n    text: string;\n    /**\n     * Indicates if the step is nested\n     */\n    nested?: boolean;\n    /**\n     * The text to display in the step circle\n     */\n    step?: string;\n    /**\n     * Indicates if the step is disabled\n     */\n    disabled?: boolean;\n    /**\n     * Indicates if the step is in a loading state\n     */\n    loading?: boolean;\n  }\n\n  const props = withDefaults(defineProps<StepProps>(), {\n    active: false,\n    completed: false,\n    error: false,\n    nested: false,\n    step: undefined,\n    disabled: false,\n    loading: false,\n  });\n\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const injectedStepper = inject(STEPPER_INJECTION_KEY);\n\n  const isHorizontal = computed(() => injectedStepper?.orientation === 'horizontal');\n\n  const isLightThemed = computed(() => injectedStepper?.theme === 'light');\n\n  const showResponsiveNav = injectedStepper?.showResponsiveNav;\n\n  const iconName = computed(() => {\n    if (props.loading) {\n      return 'working';\n    }\n    return props.completed ? 'circle-check' : 'circle-info';\n  });\n\n  const currentStepText = computed(() =>\n    t('ll.stepper.currentStep', { num: props.step, total: String(injectedStepper?.stepCount.value) }),\n  );\n\n  // OnBeforeMount ensures that steps and substeps are registered in the correct order\n  onBeforeMount(() => {\n    if (injectedStepper) {\n      injectedStepper.registerStep(props.nested);\n    }\n  });\n</script>\n\n<template>\n  <li\n    class=\"stash-step tw-relative tw-flex tw-w-full\"\n    data-test=\"stash-step\"\n    :class=\"[\n      classes.step,\n      {\n        [classes['nested-step--active']]: props.nested && props.active,\n        'last:tw-w-auto': isHorizontal && !showResponsiveNav,\n        [classes['stash-step--singular']]: showResponsiveNav,\n        'tw-relative tw-w-full tw-shrink-0 tw-snap-start tw-flex-col tw-justify-center': showResponsiveNav,\n      },\n    ]\"\n  >\n    <div\n      v-if=\"!props.nested\"\n      class=\"stash-step__indicator tw-flex tw-flex-col tw-items-center\"\n      :class=\"{ 'tw-mr-3': !showResponsiveNav }\"\n      data-test=\"stash-step|indicator\"\n    >\n      <div\n        :class=\"[\n          classes.circle,\n          {\n            [classes['circle--todo']]: !props.error && !props.active && !props.completed,\n            [classes['circle--error']]: props.error && !props.active,\n            [classes['circle--completed']]: props.completed && !props.active,\n            [classes['circle--active']]: props.active,\n            [classes['circle--loading']]: props.loading,\n          },\n        ]\"\n      >\n        <Icon\n          v-if=\"(props.completed || props.error || props.loading) && !props.active\"\n          :name=\"iconName\"\n          :class=\"{ 'fx-spin': props.loading }\"\n          size=\"dense\"\n        />\n        <span v-else>{{ props.step }}</span>\n      </div>\n      <div\n        class=\"tw-my-1.5 tw-w-px tw-bg-ice-500\"\n        :class=\"[\n          classes.line,\n          { [classes['line--expanded']]: props.completed || props.active, 'tw-hidden': isHorizontal },\n        ]\"\n      />\n    </div>\n    <!-- step title, line(s), and nested steps -->\n    <div\n      class=\"tw-flex\"\n      :class=\"[\n        {\n          'tw-w-full tw-flex-row tw-items-center': isHorizontal,\n          'tw-mt-1.5 tw-justify-center': showResponsiveNav,\n          'tw-flex-col': !isHorizontal || showResponsiveNav,\n        },\n      ]\"\n    >\n      <div\n        class=\"stash-step__title\"\n        data-test=\"stash-step|title\"\n        :class=\"[\n          classes.title,\n          {\n            'tw-whitespace-nowrap': isHorizontal,\n            'tw-cursor-pointer': !props.active && (props.completed || props.error),\n            'tw-cursor-not-allowed': props.disabled,\n            'tw-text-ice-900': isLightThemed,\n            '!tw-font-semibold': props.active,\n            'tw-text-white': !props.disabled && !isLightThemed,\n            'tw-place-self-center': showResponsiveNav,\n          },\n        ]\"\n      >\n        {{ props.text }}\n        <p\n          v-if=\"showResponsiveNav\"\n          class=\"stash-step__pagination-label tw-mb-0 tw-text-center tw-text-xs\"\n          data-test=\"stash-step|pagination-label\"\n          :class=\"isLightThemed ? 'tw-text-ice-700' : 'tw-text-white'\"\n        >\n          {{ currentStepText }}\n        </p>\n      </div>\n      <div\n        v-if=\"isHorizontal\"\n        :class=\"[\n          classes.line,\n          {\n            [classes['line--expanded']]: props.completed || props.active,\n            'tw-mx-1.5 tw-border-t group-last:tw-hidden': !showResponsiveNav,\n          },\n        ]\"\n      />\n      <div\n        class=\"stash-step--nested-steps\"\n        :class=\"{ 'tw-pb-9': !nested && !slots.default, 'tw-hidden': isHorizontal }\"\n      >\n        <ul :class=\"[classes.nested, { 'tw-hidden': !slots.default }]\">\n          <!-- @slot Default slot to compose multiple nested steps -->\n          <slot></slot>\n        </ul>\n      </div>\n    </div>\n  </li>\n</template>\n\n<style module>\n  .step::before {\n    content: '●';\n    position: absolute;\n    color: theme('colors.white');\n    left: -28px;\n    opacity: 0;\n    transition: opacity 500ms cubic-bezier(0.85, 0, 0.15, 1);\n  }\n\n  .title {\n    font-weight: theme('fontWeight.medium');\n    font-size: 1rem;\n    margin-top: 1px;\n    user-select: none;\n  }\n\n  .nested-step--active::before {\n    opacity: 1;\n  }\n\n  .line {\n    flex-grow: 0;\n    transition: flex-grow 500ms cubic-bezier(0.87, 0, 0.13, 1);\n  }\n\n  .line--expanded {\n    flex-grow: 1;\n  }\n\n  .stash-step--singular .line {\n    @apply tw-absolute\n      tw-inset-x-0\n      tw-top-3\n      tw-h-px\n      tw-border-t-0\n      before:tw-absolute\n      before:tw-left-0\n      before:tw-right-2/4\n      before:tw-mr-16\n      before:tw-block\n      before:tw-h-px\n      before:tw-bg-ice-500\n      after:tw-absolute\n      after:tw-left-2/4\n      after:tw-right-0\n      after:tw-ml-16\n      after:tw-block\n      after:tw-h-px\n      after:tw-bg-ice-500;\n  }\n\n  .stash-step--singular .line::after,\n  .stash-step--singular .line::before {\n    content: '';\n  }\n\n  .step:not(.stash-step--singular):last-child .line {\n    display: none;\n  }\n\n  .circle {\n    width: theme('spacing.6');\n    height: theme('spacing.6');\n    line-height: theme('spacing.6');\n    border-radius: theme('borderRadius.full');\n    display: grid;\n    place-items: center;\n    font-weight: theme('fontWeight.medium');\n    transition:\n      background-color 500ms,\n      color 500ms;\n  }\n\n  .circle--todo {\n    background-color: rgb(255 255 255 / 50%);\n    color: #4d4a69;\n    border: 1px solid #747293;\n  }\n\n  .circle--active {\n    background-color: var(--color-blue-500);\n    color: theme('colors.white');\n    border: 1px solid transparent;\n  }\n\n  .circle--loading {\n    background-color: theme('colors.white');\n    border: 1px solid var(--color-ice-500);\n    color: var(--color-ice-700);\n    cursor: pointer;\n  }\n\n  .circle--completed {\n    background-color: theme('colors.white');\n    border: 1px solid var(--color-ice-500);\n    color: var(--color-green-500);\n    cursor: pointer;\n  }\n\n  .circle--error {\n    background-color: theme('colors.white');\n    border: 1px solid var(--color-ice-500);\n    color: var(--color-red-500);\n    cursor: pointer;\n  }\n\n  .nested {\n    padding: calc(theme('spacing.3') + theme('spacing[1.5]')) 0;\n  }\n\n  .nested li + li {\n    margin-top: theme('spacing.3');\n  }\n\n  .nested .title {\n    font-weight: theme('fontWeight.normal');\n    font-size: 0.9rem;\n  }\n</style>\n"],"names":["props","__props","slots","useSlots","classes","useCssModule","injectedStepper","inject","STEPPER_INJECTION_KEY","isHorizontal","computed","isLightThemed","showResponsiveNav","iconName","currentStepText","t","onBeforeMount"],"mappings":";;;;;;;;;;;;;;;;;;AA4CE,UAAMA,IAAQC,GAURC,IAAQC,EAAS,GACjBC,IAAUC,EAAa,GAEvBC,IAAkBC,EAAOC,CAAqB,GAE9CC,IAAeC,EAAS,OAAMJ,KAAA,gBAAAA,EAAiB,iBAAgB,YAAY,GAE3EK,IAAgBD,EAAS,OAAMJ,KAAA,gBAAAA,EAAiB,WAAU,OAAO,GAEjEM,IAAoBN,KAAA,gBAAAA,EAAiB,mBAErCO,IAAWH,EAAS,MACpBV,EAAM,UACD,YAEFA,EAAM,YAAY,iBAAiB,aAC3C,GAEKc,IAAkBJ;AAAA,MAAS,MAC/BK,EAAE,0BAA0B,EAAE,KAAKf,EAAM,MAAM,OAAO,OAAOM,KAAA,gBAAAA,EAAiB,UAAU,KAAK,EAAG,CAAA;AAAA,IAClG;AAGA,WAAAU,EAAc,MAAM;AAClB,MAAIV,KACcA,EAAA,aAAaN,EAAM,MAAM;AAAA,IAC3C,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Step.js","sources":["../src/components/Step/Step.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, inject, onBeforeMount, useCssModule, useSlots } from 'vue';\n\n  import { t } from '../../locale';\n  import Icon from '../Icon/Icon.vue';\n  import { STEPPER_INJECTION_KEY } from '../Stepper/keys';\n\n  export interface StepProps {\n    /**\n     * Indicates if the step is currently active.\n     * This takes precedence over `completed` and `error`\n     */\n    active?: boolean;\n    /**\n     * Indicates if the step is completed\n     */\n    completed?: boolean;\n    /**\n     * Indicates if the step has an error\n     * This takes precedence over `completed`\n     */\n    error?: boolean;\n    /**\n     * The text to display in the step.\n     */\n    text: string;\n    /**\n     * Indicates if the step is nested\n     */\n    nested?: boolean;\n    /**\n     * The text to display in the step circle\n     */\n    step?: string;\n    /**\n     * Indicates if the step is disabled\n     */\n    disabled?: boolean;\n    /**\n     * Indicates if the step is in a loading state\n     */\n    loading?: boolean;\n  }\n\n  const props = withDefaults(defineProps<StepProps>(), {\n    active: false,\n    completed: false,\n    error: false,\n    nested: false,\n    step: undefined,\n    disabled: false,\n    loading: false,\n  });\n\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const injectedStepper = inject(STEPPER_INJECTION_KEY);\n\n  const isHorizontal = computed(() => injectedStepper?.orientation === 'horizontal');\n\n  const isLightThemed = computed(() => injectedStepper?.theme === 'light');\n\n  const showResponsiveNav = injectedStepper?.showResponsiveNav;\n\n  const iconName = computed(() => {\n    if (props.loading) {\n      return 'working';\n    }\n    return props.completed ? 'circle-check' : 'circle-info';\n  });\n\n  const currentStepText = computed(() =>\n    t('ll.stepper.currentStep', { num: props.step, total: String(injectedStepper?.stepCount.value) }),\n  );\n\n  // OnBeforeMount ensures that steps and substeps are registered in the correct order\n  onBeforeMount(() => {\n    if (injectedStepper) {\n      injectedStepper.registerStep(props.nested);\n    }\n  });\n</script>\n\n<template>\n  <li\n    class=\"stash-step tw-relative tw-flex tw-w-full\"\n    data-test=\"stash-step\"\n    :class=\"[\n      classes.step,\n      {\n        [classes['nested-step--active']]: props.nested && props.active,\n        'last:tw-w-auto': isHorizontal && !showResponsiveNav,\n        [classes['stash-step--singular']]: showResponsiveNav,\n        'tw-relative tw-w-full tw-shrink-0 tw-snap-start tw-flex-col tw-justify-center': showResponsiveNav,\n      },\n    ]\"\n  >\n    <div\n      v-if=\"!props.nested\"\n      class=\"stash-step__indicator tw-flex tw-flex-col tw-items-center\"\n      :class=\"{ 'tw-mr-3': !showResponsiveNav }\"\n      data-test=\"stash-step|indicator\"\n    >\n      <div\n        :class=\"[\n          classes.circle,\n          {\n            [classes['circle--todo']]: !props.error && !props.active && !props.completed,\n            [classes['circle--error']]: props.error && !props.active,\n            [classes['circle--completed']]: props.completed && !props.active,\n            [classes['circle--active']]: props.active,\n            [classes['circle--loading']]: props.loading,\n          },\n        ]\"\n      >\n        <Icon\n          v-if=\"(props.completed || props.error || props.loading) && !props.active\"\n          :name=\"iconName\"\n          :class=\"{ 'fx-spin': props.loading }\"\n          size=\"dense\"\n        />\n        <span v-else>{{ props.step }}</span>\n      </div>\n      <div\n        class=\"tw-my-1.5 tw-w-px tw-bg-ice-500\"\n        :class=\"[\n          classes.line,\n          { [classes['line--expanded']]: props.completed || props.active, 'tw-hidden': isHorizontal },\n        ]\"\n      />\n    </div>\n    <!-- step title, line(s), and nested steps -->\n    <div\n      class=\"tw-flex\"\n      :class=\"[\n        {\n          'tw-w-full tw-flex-row tw-items-center': isHorizontal,\n          'tw-mt-1.5 tw-justify-center': showResponsiveNav,\n          'tw-flex-col': !isHorizontal || showResponsiveNav,\n        },\n      ]\"\n    >\n      <div\n        class=\"stash-step__title\"\n        data-test=\"stash-step|title\"\n        :class=\"[\n          classes.title,\n          {\n            'tw-whitespace-nowrap': isHorizontal,\n            'tw-cursor-pointer': !props.active && (props.completed || props.error),\n            'tw-cursor-not-allowed': props.disabled,\n            'tw-text-ice-900': isLightThemed,\n            '!tw-font-semibold': props.active,\n            'tw-text-white': !props.disabled && !isLightThemed,\n            'tw-place-self-center': showResponsiveNav,\n          },\n        ]\"\n      >\n        {{ props.text }}\n        <p\n          v-if=\"showResponsiveNav\"\n          class=\"stash-step__pagination-label tw-mb-0 tw-text-center tw-text-xs\"\n          data-test=\"stash-step|pagination-label\"\n          :class=\"isLightThemed ? 'tw-text-ice-700' : 'tw-text-white'\"\n        >\n          {{ currentStepText }}\n        </p>\n      </div>\n      <div\n        v-if=\"isHorizontal\"\n        :class=\"[\n          classes.line,\n          {\n            [classes['line--expanded']]: props.completed || props.active,\n            'tw-mx-1.5 tw-border-t group-last:tw-hidden': !showResponsiveNav,\n          },\n        ]\"\n      />\n      <div\n        class=\"stash-step--nested-steps\"\n        :class=\"{ 'tw-pb-9': !nested && !slots.default, 'tw-hidden': isHorizontal }\"\n      >\n        <ul :class=\"[classes.nested, { 'tw-hidden': !slots.default }]\">\n          <!-- @slot Default slot to compose multiple nested steps -->\n          <slot></slot>\n        </ul>\n      </div>\n    </div>\n  </li>\n</template>\n\n<style module>\n  .step::before {\n    content: '●';\n    position: absolute;\n    color: theme('colors.white');\n    left: -28px;\n    opacity: 0;\n    transition: opacity 500ms cubic-bezier(0.85, 0, 0.15, 1);\n  }\n\n  .title {\n    font-weight: theme('fontWeight.medium');\n    font-size: 1rem;\n    margin-top: 1px;\n    user-select: none;\n  }\n\n  .nested-step--active::before {\n    opacity: 1;\n  }\n\n  .line {\n    flex-grow: 0;\n    transition: flex-grow 500ms cubic-bezier(0.87, 0, 0.13, 1);\n  }\n\n  .line--expanded {\n    flex-grow: 1;\n  }\n\n  .stash-step--singular .line {\n    @apply tw-absolute\n      tw-inset-x-0\n      tw-top-3\n      tw-h-px\n      tw-border-t-0\n      before:tw-absolute\n      before:tw-left-0\n      before:tw-right-2/4\n      before:tw-mr-16\n      before:tw-block\n      before:tw-h-px\n      before:tw-bg-ice-500\n      after:tw-absolute\n      after:tw-left-2/4\n      after:tw-right-0\n      after:tw-ml-16\n      after:tw-block\n      after:tw-h-px\n      after:tw-bg-ice-500;\n  }\n\n  .stash-step--singular .line::after,\n  .stash-step--singular .line::before {\n    content: '';\n  }\n\n  .step:not(.stash-step--singular):last-child .line {\n    display: none;\n  }\n\n  .circle {\n    width: theme('spacing.6');\n    height: theme('spacing.6');\n    line-height: theme('spacing.6');\n    border-radius: theme('borderRadius.full');\n    display: grid;\n    place-items: center;\n    font-weight: theme('fontWeight.medium');\n    transition:\n      background-color 500ms,\n      color 500ms;\n  }\n\n  .circle--todo {\n    background-color: rgb(255 255 255 / 50%);\n    color: #4d4a69;\n    border: 1px solid #747293;\n  }\n\n  .circle--active {\n    background-color: var(--color-blue-500);\n    color: theme('colors.white');\n    border: 1px solid transparent;\n  }\n\n  .circle--loading {\n    background-color: theme('colors.white');\n    border: 1px solid var(--color-ice-500);\n    color: var(--color-ice-700);\n    cursor: pointer;\n  }\n\n  .circle--completed {\n    background-color: theme('colors.white');\n    border: 1px solid var(--color-ice-500);\n    color: var(--color-green-500);\n    cursor: pointer;\n  }\n\n  .circle--error {\n    background-color: theme('colors.white');\n    border: 1px solid var(--color-ice-500);\n    color: var(--color-red-500);\n    cursor: pointer;\n  }\n\n  .nested {\n    padding: calc(theme('spacing.3') + theme('spacing[1.5]')) 0;\n  }\n\n  .nested li + li {\n    margin-top: theme('spacing.3');\n  }\n\n  .nested .title {\n    font-weight: theme('fontWeight.normal');\n    font-size: 0.9rem;\n  }\n</style>\n"],"names":["props","__props","slots","useSlots","classes","useCssModule","injectedStepper","inject","STEPPER_INJECTION_KEY","isHorizontal","computed","isLightThemed","showResponsiveNav","iconName","currentStepText","t","onBeforeMount","_createElementBlock","_unref","_normalizeClass","_createElementVNode","_createBlock","Icon","_hoisted_1","_toDisplayString","nested","_renderSlot","_ctx"],"mappings":"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"}