@leaflink/stash 49.4.1 → 50.0.0

package/dist/SelectStatus.js

@@ -1,36 +1,12 @@
-import { defineComponent as S, useAttrs as b, useCssModule as C, computed as i, openBlock as o, createBlock as O, normalizeClass as l, unref as V, withCtx as u, createElementBlock as d, createElementVNode as a, toDisplayString as c, createVNode as m, normalizeStyle as p } from "vue";
-import f from "./Icon.js";
+import { defineComponent as g, useAttrs as S, useCssModule as C, computed as u, openBlock as c, createBlock as O, normalizeClass as l, unref as V, withCtx as r, createElementBlock as i, createElementVNode as a, toDisplayString as n, createVNode as m, normalizeStyle as f } from "vue";
+import y from "./Icon.js";
 import $ from "./Select.js";
-import { _ as E } from "./_plugin-vue_export-helper-dad06003.js";
-import "lodash-es/uniqueId";
-import "./index-9e1095ef.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
-import "./floating-ui.vue-8d7f7932.js";
-import "@leaflink/snitch";
-import "lodash-es/debounce";
-import "lodash-es/isEmpty";
-import "lodash-es/isEqual";
-import "lodash-es/isPlainObject";
-import "./useSearch.js";
-import "lodash-es/get";
-import "./searchFuzzy-9b74ec4e.js";
-import "./_commonjsHelpers-10dfc225.js";
-import "./utils/helpers.js";
-import "lodash-es/camelCase";
-import "lodash-es/isFinite";
-import "./constants.js";
-import "./directives/clickoutside.js";
-import "./MenusPlugin-9288029a.js";
-import "./Chip.js";
-import "./utils/colorScheme.js";
-import "./Field.vue_vue_type_script_setup_true_lang-fded4f75.js";
-import "./Label.vue_vue_type_script_setup_true_lang-b6ba2f02.js";
-import "./locale.js";
+import { _ as E } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const N = { class: "tw-mr-6 tw-truncate" }, D = {
   key: 1,
   class: "tw-flex tw-items-center",
   "data-test": "select-status|value"
-}, I = { class: "tw-ml-1.5 tw-mr-6 tw-truncate" }, L = { class: "tw-flex tw-min-w-0" }, M = /* @__PURE__ */ S({
+}, I = { class: "tw-ml-1.5 tw-mr-6 tw-truncate" }, L = { class: "tw-flex tw-min-w-0" }, M = /* @__PURE__ */ g({
   name: "ll-select-status",
   __name: "SelectStatus",
   props: {
@@ -42,95 +18,97 @@ const N = { class: "tw-mr-6 tw-truncate" }, D = {
     statusOptions: {},
     trackBy: { default: "id" },
     modelValue: { type: [Number, String, Boolean] },
-    value: { type: [Number, String, Boolean, null], default: null }
+    value: { type: [Number, String, Boolean, null], default: null },
+    label: { default: void 0 }
   },
   emits: ["update:model-value"],
-  setup(y, { emit: w }) {
-    const _ = ["green", "teal", "ice", "yellow", "seafoam", "seafoam-700"], h = b(), v = C(), e = y;
-    if (e.value)
+  setup(p, { emit: w }) {
+    const _ = ["green", "teal", "ice", "yellow", "seafoam", "seafoam-700"], h = S(), v = C(), t = p;
+    if (t.value)
       throw new Error("ll-select-status: use :model-value or v-model instead of :value.");
     if (h.onInput)
       throw new Error("ll-select-status: use the @update:model-value event instead of @input");
-    const x = w, r = i(() => e.statusOptions.find((t) => t[e.trackBy] === e.modelValue)), B = i(() => {
-      const { color: t = "" } = r.value || {};
-      return _.includes(t);
+    const x = w, o = u(() => t.statusOptions.find((e) => e[t.trackBy] === t.modelValue)), B = u(() => {
+      const { color: e = "" } = o.value || {};
+      return _.includes(e);
     });
-    function k(t) {
-      return t != null && t.includes("-") ? `tw-bg-${t}` : `tw-bg-${t}-500`;
+    function b(e) {
+      return e != null && e.includes("-") ? `tw-bg-${e}` : `tw-bg-${e}-500`;
     }
-    function n(t) {
-      return t != null && t.includes("-") ? `tw-text-${t}` : `tw-text-${t}-500`;
+    function d(e) {
+      return e != null && e.includes("-") ? `tw-text-${e}` : `tw-text-${e}-500`;
     }
-    function g(t) {
-      x("update:model-value", (t == null ? void 0 : t[e.trackBy]) ?? "");
+    function k(e) {
+      x("update:model-value", (e == null ? void 0 : e[t.trackBy]) ?? "");
     }
-    return (t, A) => (o(), O($, {
+    return (e, A) => (c(), O($, {
       ref: "select",
       "hide-search": "",
       single: "",
       class: l([[
         V(v).select,
         {
-          "stash-select-status--filled": e.secondary,
-          "stash-select-status--filled-dark": e.secondary && B.value
+          "stash-select-status--filled": t.secondary,
+          "stash-select-status--filled-dark": t.secondary && B.value
         }
       ], "stash-select-status"]),
-      disabled: e.disabled,
-      icon: !e.disabled && "caret-down",
-      options: e.statusOptions,
-      placeholder: e.placeholder,
-      "track-by": e.trackBy,
-      "model-value": r.value,
+      disabled: t.disabled,
+      icon: !t.disabled && "caret-down",
+      options: t.statusOptions,
+      placeholder: t.placeholder,
+      "track-by": t.trackBy,
+      "model-value": o.value,
+      label: t.label,
       "data-test": "stash-select-status",
-      "onUpdate:modelValue": g
+      "onUpdate:modelValue": k
     }, {
-      selected: u(({ option: s }) => [
-        e.secondary ? (o(), d("div", {
+      selected: r(({ option: s }) => [
+        t.secondary ? (c(), i("div", {
           key: 0,
-          class: l(["stash-select-status--selected tw-absolute tw-inset-0 tw-flex tw-h-full tw-w-full tw-items-center tw-rounded tw-pl-3", [k(s.color)]]),
+          class: l(["stash-select-status--selected tw-absolute tw-inset-0 tw-flex tw-h-full tw-w-full tw-items-center tw-rounded tw-pl-3", [b(s.color)]]),
           "data-test": "select-status|value"
         }, [
-          a("span", N, c(s[e.displayBy]), 1)
-        ], 2)) : (o(), d("div", D, [
-          m(f, {
+          a("span", N, n(s[t.displayBy]), 1)
+        ], 2)) : (c(), i("div", D, [
+          m(y, {
             "data-test": "select-status|value-icon",
             name: s.icon || "circle-status",
             class: l([
-              { [n(s.color)]: s.color },
+              { [d(s.color)]: s.color },
               { "tw-text-ice-700": !s.color && !s.hexCode }
             ]),
-            style: p({ color: s.hexCode })
+            style: f({ color: s.hexCode })
           }, null, 8, ["name", "class", "style"]),
-          a("span", I, c(s[e.displayBy]), 1)
+          a("span", I, n(s[t.displayBy]), 1)
         ]))
       ]),
-      option: u(({ option: s }) => [
+      option: r(({ option: s }) => [
         a("div", L, [
-          m(f, {
+          m(y, {
             "data-test": "svg|status-color",
             name: s.icon || "circle-status",
             class: l([[
-              { [n(s.color)]: s.color },
+              { [d(s.color)]: s.color },
               { "tw-text-ice-700": !s.color && !s.hexCode }
             ], "!tw-shrink-0"]),
-            style: p({ color: s.hexCode })
+            style: f({ color: s.hexCode })
           }, null, 8, ["name", "class", "style"]),
           a("span", {
             "data-test": "span|option-text",
-            class: l(["tw-ml-1.5", !e.noTruncate && "tw-truncate"])
-          }, c(s[e.displayBy]), 3)
+            class: l(["tw-ml-1.5", !t.noTruncate && "tw-truncate"])
+          }, n(s[t.displayBy]), 3)
         ])
       ]),
       _: 1
-    }, 8, ["class", "disabled", "icon", "options", "placeholder", "track-by", "model-value"]));
+    }, 8, ["class", "disabled", "icon", "options", "placeholder", "track-by", "model-value", "label"]));
   }
 }), T = "_select_1gtqy_27", q = {
   select: T,
   "stash-select__chips": "_stash-select__chips_1gtqy_32"
 }, z = {
   $style: q
-}, ft = /* @__PURE__ */ E(M, [["__cssModules", z]]);
+}, j = /* @__PURE__ */ E(M, [["__cssModules", z]]);
 export {
-  ft as default
+  j as default
 };
 //# sourceMappingURL=SelectStatus.js.map

package/dist/SelectStatus.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectStatus.js","sources":["../src/components/SelectStatus/SelectStatus.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useAttrs, useCssModule } from 'vue';\n\n  import { StashCommonColor, StashPrimaryColorGroup } from '../../../types';\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n  import Select from '../Select/Select.vue';\n\n  defineOptions({\n    name: 'll-select-status',\n  });\n\n  export type SelectStatusOption = {\n    id: number | string;\n    name: string;\n    color?: StashPrimaryColorGroup | StashCommonColor; // todo: just `StashPrimaryColor`?.\n    icon?: IconName;\n  };\n\n  export interface SelectStatusProps {\n    /**\n     * Disables the component, if true\n     */\n    disabled?: boolean;\n    /**\n     * Which key of the prop option to use for display\n     */\n    displayBy?: string;\n    /**\n     * Sets the background color of the component to the color of the selected option\n     */\n    secondary?: boolean;\n    /**\n     * Allows option text to wrap to next line when set to true\n     */\n    noTruncate?: boolean;\n    /**\n     * Placeholder text\n     */\n    placeholder?: string;\n    /**\n     * The list of all options to select the status from\n     * each object must have the following structure: { id: number | string, name: string, color?: string }\n     */\n    statusOptions: Array<SelectStatusOption>;\n    /**\n     * Default field to track the selected status by\n     */\n    trackBy?: string;\n    /**\n     * Sets the currently-selected option for the component\n     */\n    modelValue: number | string | boolean;\n    /**\n     * @deprecated Use `:model-value` or `v-model` instead of `:value`.\n     */\n    value?: number | string | boolean | null;\n  }\n\n  /**\n   * Array containing the available dark fill colors that need a different text color.\n   */\n  const DARK_FILL_COLORS = ['green', 'teal', 'ice', 'yellow', 'seafoam', 'seafoam-700'];\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n\n  const props = withDefaults(defineProps<SelectStatusProps>(), {\n    disabled: false,\n    displayBy: 'name',\n    secondary: false,\n    noTruncate: false,\n    placeholder: 'Select Status',\n    trackBy: 'id',\n    value: null,\n  });\n\n  if (props.value) {\n    throw new Error('ll-select-status: use :model-value or v-model instead of :value.');\n  }\n\n  if (attrs.onInput) {\n    throw new Error('ll-select-status: use the @update:model-value event instead of @input');\n  }\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the model value changes\n     */\n    (e: 'update:model-value', value: unknown): void;\n  }>();\n\n  const valueOption = computed(() => {\n    return props.statusOptions.find((status) => status[props.trackBy] === props.modelValue);\n  });\n\n  const hasDarkFill = computed(() => {\n    const { color = '' } = valueOption.value || {};\n    return DARK_FILL_COLORS.includes(color);\n  });\n\n  /**\n   * @param {string} color Valid color name\n   * @return {string} tailwind class for given color\n   */\n  function getBgColor(color: SelectStatusOption['color']): string {\n    // if there's no hyphen then it's a color name and has no shade, so we default to 500\n    return color?.includes('-') ? `tw-bg-${color}` : `tw-bg-${color}-500`;\n  }\n\n  /**\n   * @param {string} color Valid color name\n   * @return {string} tailwind class for given color\n   */\n  function getTextColor(color: SelectStatusOption['color']): string {\n    // if there's no hyphen then it's a color name and has no shade, so we default to 500\n    return color?.includes('-') ? `tw-text-${color}` : `tw-text-${color}-500`;\n  }\n\n  function onSelect(value?: SelectStatusOption): void {\n    emit('update:model-value', value?.[props.trackBy] ?? '');\n  }\n</script>\n\n<template>\n  <Select\n    ref=\"select\"\n    hide-search\n    single\n    :class=\"[\n      classes.select,\n      {\n        'stash-select-status--filled': props.secondary,\n        'stash-select-status--filled-dark': props.secondary && hasDarkFill,\n      },\n    ]\"\n    :disabled=\"props.disabled\"\n    :icon=\"!props.disabled && 'caret-down'\"\n    :options=\"props.statusOptions\"\n    :placeholder=\"props.placeholder\"\n    :track-by=\"props.trackBy\"\n    :model-value=\"valueOption\"\n    data-test=\"stash-select-status\"\n    class=\"stash-select-status\"\n    @update:model-value=\"onSelect\"\n  >\n    <template #selected=\"{ option }\">\n      <div\n        v-if=\"props.secondary\"\n        class=\"stash-select-status--selected tw-absolute tw-inset-0 tw-flex tw-h-full tw-w-full tw-items-center tw-rounded tw-pl-3\"\n        data-test=\"select-status|value\"\n        :class=\"[getBgColor(option.color)]\"\n      >\n        <span class=\"tw-mr-6 tw-truncate\">{{ option[props.displayBy] }}</span>\n      </div>\n\n      <div v-else class=\"tw-flex tw-items-center\" data-test=\"select-status|value\">\n        <Icon\n          data-test=\"select-status|value-icon\"\n          :name=\"option.icon || 'circle-status'\"\n          :class=\"[\n            { [getTextColor(option.color)]: option.color },\n            { 'tw-text-ice-700': !option.color && !option.hexCode },\n          ]\"\n          :style=\"{ color: option.hexCode }\"\n        />\n        <span class=\"tw-ml-1.5 tw-mr-6 tw-truncate\">{{ option[props.displayBy] }}</span>\n      </div>\n    </template>\n\n    <template #option=\"{ option }\">\n      <div class=\"tw-flex tw-min-w-0\">\n        <Icon\n          data-test=\"svg|status-color\"\n          :name=\"option.icon || 'circle-status'\"\n          :class=\"[\n            { [getTextColor(option.color)]: option.color },\n            { 'tw-text-ice-700': !option.color && !option.hexCode },\n          ]\"\n          class=\"!tw-shrink-0\"\n          :style=\"{ color: option.hexCode }\"\n        />\n        <span data-test=\"span|option-text\" class=\"tw-ml-1.5\" :class=\"!props.noTruncate && 'tw-truncate'\">\n          {{ option[props.displayBy] }}\n        </span>\n      </div>\n    </template>\n  </Select>\n</template>\n\n<style module>\n  :global(.stash-select-status--filled .stash-select__content) {\n    border: none;\n    padding: 0;\n  }\n\n  :global(\n      .stash-select-status--filled\n        .stash-select--active\n        .stash-select__content:focus-within\n        .stash-select__border-selector\n    ) {\n    box-sizing: content-box;\n    max-width: calc(100% - 2px);\n  }\n\n  :global(.stash-select-status--filled .stash-select-status--selected),\n  :global(.stash-select-status--filled :has(.stash-select-status--selected) .icon--caret-down) {\n    color: theme('colors.white');\n  }\n\n  :global(.stash-select-status--filled-dark .stash-select-status--selected),\n  :global(.stash-select-status--filled-dark :has(.stash-select-status--selected) .icon--caret-down) {\n    color: var(--color-ice-900);\n  }\n\n  .select :global(.stash-select--disabled > .stash-select__content) {\n    background-color: transparent;\n    border-color: transparent;\n  }\n\n  .select :deep(.stash-select__chips) {\n    margin: 0;\n  }\n\n  .select :global(.stash-select__options) {\n    margin: 0;\n    padding: 0;\n  }\n\n  .select ul {\n    position: relative;\n  }\n</style>\n"],"names":["DARK_FILL_COLORS","attrs","useAttrs","classes","useCssModule","props","__props","emit","__emit","valueOption","computed","status","hasDarkFill","color","getBgColor","getTextColor","onSelect","value"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DE,UAAMA,IAAmB,CAAC,SAAS,QAAQ,OAAO,UAAU,WAAW,aAAa,GAE9EC,IAAQC,KACRC,IAAUC,KAEVC,IAAQC;AAUd,QAAID,EAAM;AACF,YAAA,IAAI,MAAM,kEAAkE;AAGpF,QAAIJ,EAAM;AACF,YAAA,IAAI,MAAM,uEAAuE;AAGzF,UAAMM,IAAOC,GAOPC,IAAcC,EAAS,MACpBL,EAAM,cAAc,KAAK,CAACM,MAAWA,EAAON,EAAM,OAAO,MAAMA,EAAM,UAAU,CACvF,GAEKO,IAAcF,EAAS,MAAM;AACjC,YAAM,EAAE,OAAAG,IAAQ,GAAA,IAAOJ,EAAY,SAAS,CAAA;AACrC,aAAAT,EAAiB,SAASa,CAAK;AAAA,IAAA,CACvC;AAMD,aAASC,EAAWD,GAA4C;AAE9D,aAAOA,KAAA,QAAAA,EAAO,SAAS,OAAO,SAASA,MAAU,SAASA;AAAA,IAC5D;AAMA,aAASE,EAAaF,GAA4C;AAEhE,aAAOA,KAAA,QAAAA,EAAO,SAAS,OAAO,WAAWA,MAAU,WAAWA;AAAA,IAChE;AAEA,aAASG,EAASC,GAAkC;AAClD,MAAAV,EAAK,uBAAsBU,KAAA,gBAAAA,EAAQZ,EAAM,aAAY,EAAE;AAAA,IACzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SelectStatus.js","sources":["../src/components/SelectStatus/SelectStatus.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import { computed, useAttrs, useCssModule } from 'vue';\n\n  import { StashCommonColor, StashPrimaryColorGroup } from '../../../types';\n  import { IconName } from '../Icon/Icon.types';\n  import Icon from '../Icon/Icon.vue';\n  import Select from '../Select/Select.vue';\n\n  defineOptions({\n    name: 'll-select-status',\n  });\n\n  export type SelectStatusOption = {\n    id: number | string | boolean;\n    name: string;\n    color?: StashPrimaryColorGroup | StashCommonColor; // todo: just `StashPrimaryColor`?.\n    icon?: IconName;\n  };\n\n  export interface SelectStatusProps {\n    /**\n     * Disables the component, if true\n     */\n    disabled?: boolean;\n    /**\n     * Which key of the prop option to use for display\n     */\n    displayBy?: string;\n    /**\n     * Sets the background color of the component to the color of the selected option\n     */\n    secondary?: boolean;\n    /**\n     * Allows option text to wrap to next line when set to true\n     */\n    noTruncate?: boolean;\n    /**\n     * Placeholder text\n     */\n    placeholder?: string;\n    /**\n     * The list of all options to select the status from\n     * each object must have the following structure: { id: number | string, name: string, color?: string }\n     */\n    statusOptions: Array<SelectStatusOption>;\n    /**\n     * Default field to track the selected status by\n     */\n    trackBy?: string;\n    /**\n     * Sets the currently-selected option for the component\n     */\n    modelValue: number | string | boolean;\n    /**\n     * @deprecated Use `:model-value` or `v-model` instead of `:value`.\n     */\n    value?: number | string | boolean | null;\n\n    /**\n     * Shows a label above the select\n     */\n    label?: string;\n  }\n\n  /**\n   * Array containing the available dark fill colors that need a different text color.\n   */\n  const DARK_FILL_COLORS = ['green', 'teal', 'ice', 'yellow', 'seafoam', 'seafoam-700'];\n\n  const attrs = useAttrs();\n  const classes = useCssModule();\n\n  const props = withDefaults(defineProps<SelectStatusProps>(), {\n    disabled: false,\n    displayBy: 'name',\n    secondary: false,\n    noTruncate: false,\n    placeholder: 'Select Status',\n    trackBy: 'id',\n    value: null,\n    label: undefined,\n  });\n\n  if (props.value) {\n    throw new Error('ll-select-status: use :model-value or v-model instead of :value.');\n  }\n\n  if (attrs.onInput) {\n    throw new Error('ll-select-status: use the @update:model-value event instead of @input');\n  }\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the model value changes\n     */\n    (e: 'update:model-value', value: unknown): void;\n  }>();\n\n  const valueOption = computed(() => {\n    return props.statusOptions.find((status) => status[props.trackBy] === props.modelValue);\n  });\n\n  const hasDarkFill = computed(() => {\n    const { color = '' } = valueOption.value || {};\n    return DARK_FILL_COLORS.includes(color);\n  });\n\n  /**\n   * @param {string} color Valid color name\n   * @return {string} tailwind class for given color\n   */\n  function getBgColor(color: SelectStatusOption['color']): string {\n    // if there's no hyphen then it's a color name and has no shade, so we default to 500\n    return color?.includes('-') ? `tw-bg-${color}` : `tw-bg-${color}-500`;\n  }\n\n  /**\n   * @param {string} color Valid color name\n   * @return {string} tailwind class for given color\n   */\n  function getTextColor(color: SelectStatusOption['color']): string {\n    // if there's no hyphen then it's a color name and has no shade, so we default to 500\n    return color?.includes('-') ? `tw-text-${color}` : `tw-text-${color}-500`;\n  }\n\n  function onSelect(value?: SelectStatusOption): void {\n    emit('update:model-value', value?.[props.trackBy] ?? '');\n  }\n</script>\n\n<template>\n  <Select\n    ref=\"select\"\n    hide-search\n    single\n    :class=\"[\n      classes.select,\n      {\n        'stash-select-status--filled': props.secondary,\n        'stash-select-status--filled-dark': props.secondary && hasDarkFill,\n      },\n    ]\"\n    :disabled=\"props.disabled\"\n    :icon=\"!props.disabled && 'caret-down'\"\n    :options=\"props.statusOptions\"\n    :placeholder=\"props.placeholder\"\n    :track-by=\"props.trackBy\"\n    :model-value=\"valueOption\"\n    :label=\"props.label\"\n    data-test=\"stash-select-status\"\n    class=\"stash-select-status\"\n    @update:model-value=\"onSelect\"\n  >\n    <template #selected=\"{ option }\">\n      <div\n        v-if=\"props.secondary\"\n        class=\"stash-select-status--selected tw-absolute tw-inset-0 tw-flex tw-h-full tw-w-full tw-items-center tw-rounded tw-pl-3\"\n        data-test=\"select-status|value\"\n        :class=\"[getBgColor(option.color)]\"\n      >\n        <span class=\"tw-mr-6 tw-truncate\">{{ option[props.displayBy] }}</span>\n      </div>\n\n      <div v-else class=\"tw-flex tw-items-center\" data-test=\"select-status|value\">\n        <Icon\n          data-test=\"select-status|value-icon\"\n          :name=\"option.icon || 'circle-status'\"\n          :class=\"[\n            { [getTextColor(option.color)]: option.color },\n            { 'tw-text-ice-700': !option.color && !option.hexCode },\n          ]\"\n          :style=\"{ color: option.hexCode }\"\n        />\n        <span class=\"tw-ml-1.5 tw-mr-6 tw-truncate\">{{ option[props.displayBy] }}</span>\n      </div>\n    </template>\n\n    <template #option=\"{ option }\">\n      <div class=\"tw-flex tw-min-w-0\">\n        <Icon\n          data-test=\"svg|status-color\"\n          :name=\"option.icon || 'circle-status'\"\n          :class=\"[\n            { [getTextColor(option.color)]: option.color },\n            { 'tw-text-ice-700': !option.color && !option.hexCode },\n          ]\"\n          class=\"!tw-shrink-0\"\n          :style=\"{ color: option.hexCode }\"\n        />\n        <span data-test=\"span|option-text\" class=\"tw-ml-1.5\" :class=\"!props.noTruncate && 'tw-truncate'\">\n          {{ option[props.displayBy] }}\n        </span>\n      </div>\n    </template>\n  </Select>\n</template>\n\n<style module>\n  :global(.stash-select-status--filled .stash-select__content) {\n    border: none;\n    padding: 0;\n  }\n\n  :global(\n      .stash-select-status--filled\n        .stash-select--active\n        .stash-select__content:focus-within\n        .stash-select__border-selector\n    ) {\n    box-sizing: content-box;\n    max-width: calc(100% - 2px);\n  }\n\n  :global(.stash-select-status--filled .stash-select-status--selected),\n  :global(.stash-select-status--filled :has(.stash-select-status--selected) .icon--caret-down) {\n    color: theme('colors.white');\n  }\n\n  :global(.stash-select-status--filled-dark .stash-select-status--selected),\n  :global(.stash-select-status--filled-dark :has(.stash-select-status--selected) .icon--caret-down) {\n    color: var(--color-ice-900);\n  }\n\n  .select :global(.stash-select--disabled > .stash-select__content) {\n    background-color: transparent;\n    border-color: transparent;\n  }\n\n  .select :deep(.stash-select__chips) {\n    margin: 0;\n  }\n\n  .select :global(.stash-select__options) {\n    margin: 0;\n    padding: 0;\n  }\n\n  .select ul {\n    position: relative;\n  }\n</style>\n"],"names":["DARK_FILL_COLORS","attrs","useAttrs","classes","useCssModule","props","__props","emit","__emit","valueOption","computed","status","hasDarkFill","color","getBgColor","getTextColor","onSelect","value"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAmEE,UAAMA,IAAmB,CAAC,SAAS,QAAQ,OAAO,UAAU,WAAW,aAAa,GAE9EC,IAAQC,KACRC,IAAUC,KAEVC,IAAQC;AAWd,QAAID,EAAM;AACF,YAAA,IAAI,MAAM,kEAAkE;AAGpF,QAAIJ,EAAM;AACF,YAAA,IAAI,MAAM,uEAAuE;AAGzF,UAAMM,IAAOC,GAOPC,IAAcC,EAAS,MACpBL,EAAM,cAAc,KAAK,CAACM,MAAWA,EAAON,EAAM,OAAO,MAAMA,EAAM,UAAU,CACvF,GAEKO,IAAcF,EAAS,MAAM;AACjC,YAAM,EAAE,OAAAG,IAAQ,GAAA,IAAOJ,EAAY,SAAS,CAAA;AACrC,aAAAT,EAAiB,SAASa,CAAK;AAAA,IAAA,CACvC;AAMD,aAASC,EAAWD,GAA4C;AAEvD,aAAAA,KAAA,QAAAA,EAAO,SAAS,OAAO,SAASA,CAAK,KAAK,SAASA,CAAK;AAAA,IACjE;AAMA,aAASE,EAAaF,GAA4C;AAEzD,aAAAA,KAAA,QAAAA,EAAO,SAAS,OAAO,WAAWA,CAAK,KAAK,WAAWA,CAAK;AAAA,IACrE;AAEA,aAASG,EAASC,GAAkC;AAClD,MAAAV,EAAK,uBAAsBU,KAAA,gBAAAA,EAAQZ,EAAM,aAAY,EAAE;AAAA,IACzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/SelectStatus.vue.d.ts

@@ -27,42 +27,45 @@ declare type __VLS_WithDefaults<P, D> = {
 };
 
 declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SelectStatusProps>, {
-    disabled: boolean;
-    displayBy: string;
-    secondary: boolean;
-    noTruncate: boolean;
-    placeholder: string;
-    trackBy: string;
-    value: null;
+disabled: boolean;
+displayBy: string;
+secondary: boolean;
+noTruncate: boolean;
+placeholder: string;
+trackBy: string;
+value: null;
+label: undefined;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
-    "update:model-value": (value: unknown) => void;
+"update:model-value": (value: unknown) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SelectStatusProps>, {
-    disabled: boolean;
-    displayBy: string;
-    secondary: boolean;
-    noTruncate: boolean;
-    placeholder: string;
-    trackBy: string;
-    value: null;
+disabled: boolean;
+displayBy: string;
+secondary: boolean;
+noTruncate: boolean;
+placeholder: string;
+trackBy: string;
+value: null;
+label: undefined;
 }>>> & Readonly<{
-    "onUpdate:model-value"?: ((value: unknown) => any) | undefined;
+"onUpdate:model-value"?: ((value: unknown) => any) | undefined;
 }>, {
-    disabled: boolean;
-    secondary: boolean;
-    trackBy: string;
-    placeholder: string;
-    displayBy: string;
-    value: string | number | boolean | null;
-    noTruncate: boolean;
+disabled: boolean;
+label: string;
+secondary: boolean;
+trackBy: string;
+placeholder: string;
+displayBy: string;
+value: string | number | boolean | null;
+noTruncate: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 
 declare type IconName = (typeof iconNames)[number];
 
-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", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "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", "figma", "file-csv", "file", "filter-funnel", "filter-line", "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", "image", "keyboard-return", "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", "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", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "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", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "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", "figma", "file-csv", "file", "filter-funnel", "filter-line", "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", "image", "import", "keyboard-return", "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", "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", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
 
 export declare type SelectStatusOption = {
-    id: number | string;
+    id: number | string | boolean;
     name: string;
     color?: StashPrimaryColorGroup | StashCommonColor;
     icon?: IconName;
@@ -106,6 +109,10 @@ export declare interface SelectStatusProps {
      * @deprecated Use `:model-value` or `v-model` instead of `:value`.
      */
     value?: number | string | boolean | null;
+    /**
+     * Shows a label above the select
+     */
+    label?: string;
 }
 
 declare type StashCommonColor = `${StashCommonColors}`;
@@ -143,7 +150,7 @@ declare enum StashCommonColors {
     Red100 = "red-100",
     Ice700 = "ice-700",
     Ice500 = "ice-500",
-    Ice200 = "ice-200",
+    Ice200 = "ice-200",// This is the one outlier, but it's used purposefully in a few places
     Ice100 = "ice-100",
     White = "white",
     Black = "black"

package/dist/Skeleton.js

@@ -1,5 +1,5 @@
 import { defineComponent as u, useSlots as c, useCssModule as d, computed as l, openBlock as h, createElementBlock as v, normalizeClass as f, unref as n, normalizeStyle as p, renderSlot as _ } from "vue";
-import { _ as x } from "./_plugin-vue_export-helper-dad06003.js";
+import { _ as x } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 var m = /* @__PURE__ */ ((e) => (e.Text = "text", e.Circular = "circular", e.Rectangular = "rectangular", e))(m || {});
 const w = /* @__PURE__ */ u({
   __name: "Skeleton",

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,KACRC,IAAUC,KAEVC,IAAcC,EAAS,MAAM,CAAC,CAACL,EAAM,OAAU,GAE/CM,IAAiBD,EAAS,MAAM;AACpC,YAAME,IAGF,CAAA;AAEJ,aAAIT,EAAM,UACDS,EAAA,QAAQ,GAAGT,EAAM,YAItBA,EAAM,UAAUA,EAAM,YAAY,WAC7BS,EAAA,SAAS,GAAGT,EAAM,aAGpBS;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"],"mappings":";;AACc,IAAAA,sBAAAA,OACVA,EAAA,OAAO,QACPA,EAAA,WAAW,YACXA,EAAA,cAAc,eAHJA,IAAAA,KAAA,CAAA,CAAA;;;;;;;;;;;;AAuBZ,UAAMC,IAAQC,GAMRC,IAAQC,KACRC,IAAUC,KAEVC,IAAcC,EAAS,MAAM,CAAC,CAACL,EAAM,OAAU,GAE/CM,IAAiBD,EAAS,MAAM;AACpC,YAAME,IAGF,CAAA;AAEJ,aAAIT,EAAM,UACDS,EAAA,QAAQ,GAAGT,EAAM,KAAK,OAI3BA,EAAM,UAAUA,EAAM,YAAY,WAC7BS,EAAA,SAAS,GAAGT,EAAM,MAAM,OAG1BS;AAAA,IAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Skeleton.vue.d.ts

@@ -33,17 +33,17 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
 };
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SkeletonProps>, {
-    height: undefined;
-    variant: SkeletonVariants;
-    width: undefined;
+height: undefined;
+variant: SkeletonVariants;
+width: undefined;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<SkeletonProps>, {
-    height: undefined;
-    variant: SkeletonVariants;
-    width: undefined;
+height: undefined;
+variant: SkeletonVariants;
+width: undefined;
 }>>> & Readonly<{}>, {
-    width: string | number;
-    height: string | number;
-    variant: "text" | "circular" | "rectangular";
+width: string | number;
+height: string | number;
+variant: "text" | "circular" | "rectangular";
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;

package/dist/Step.js

@@ -1,12 +1,8 @@
 import { defineComponent as x, useSlots as b, useCssModule as g, inject as y, computed as d, onBeforeMount as k, openBlock as i, createElementBlock as r, normalizeClass as a, unref as t, createElementVNode as n, createBlock as B, toDisplayString as w, createCommentVNode as u, 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-7ecef029.js";
-import { _ as M } from "./_plugin-vue_export-helper-dad06003.js";
-import "lodash-es/get";
-import "lodash-es/uniqueId";
-import "./index-9e1095ef.js";
-import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.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({
   __name: "Step",
   props: {
@@ -19,13 +15,13 @@ const S = { key: 1 }, I = /* @__PURE__ */ x({
     disabled: { type: Boolean, default: !1 },
     loading: { type: Boolean, default: !1 }
   },
-  setup(f) {
-    const e = f, _ = b(), s = g(), l = y(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, h = d(() => e.loading ? "working" : e.completed ? "circle-check" : "circle-info"), v = d(
+  setup(h) {
+    const e = h, _ = b(), s = g(), l = y(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, m = d(() => e.loading ? "working" : e.completed ? "circle-check" : "circle-info"), v = d(
       () => E("ll.stepper.currentStep", { num: e.step, total: String(l == null ? void 0 : l.stepCount.value) })
     );
     return k(() => {
       l && l.registerStep(e.nested);
-    }), (m, K) => (i(), r("li", {
+    }), (f, K) => (i(), r("li", {
       class: a(["stash-step tw-relative tw-flex tw-w-full", [
         t(s).step,
         {
@@ -56,7 +52,7 @@ const S = { key: 1 }, I = /* @__PURE__ */ x({
         }, [
           (e.completed || e.error || e.loading) && !e.active ? (i(), B(T, {
             key: 0,
-            name: h.value,
+            name: m.value,
             class: a({ "fx-spin": e.loading }),
             size: "dense"
           }, null, 8, ["name", "class"])) : (i(), r("span", S, w(e.step), 1))
@@ -109,12 +105,12 @@ const S = { key: 1 }, I = /* @__PURE__ */ x({
           ])
         }, null, 2)) : u("", !0),
         n("div", {
-          class: a(["stash-step--nested-steps", { "tw-pb-9": !m.nested && !t(_).default, "tw-hidden": c.value }])
+          class: a(["stash-step--nested-steps", { "tw-pb-9": !f.nested && !t(_).default, "tw-hidden": c.value }])
         }, [
           n("ul", {
             class: a([t(s).nested, { "tw-hidden": !t(_).default }])
           }, [
-            C(m.$slots, "default")
+            C(f.$slots, "default")
           ], 2)
         ], 2)
       ], 2)
@@ -136,8 +132,8 @@ const S = { key: 1 }, I = /* @__PURE__ */ x({
   nested: D
 }, J = {
   $style: H
-}, W = /* @__PURE__ */ M(I, [["__cssModules", J]]);
+}, F = /* @__PURE__ */ M(I, [["__cssModules", J]]);
 export {
-  W as default
+  F 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 tw-whitespace-nowrap\"\n        data-test=\"stash-step|title\"\n        :class=\"[\n          classes.title,\n          {\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-whitespace-nowrap 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: background-color 500ms, 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,KACRC,IAAUC,KAEVC,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,GAAG;AAAA,IAAA;AAIlG,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 tw-whitespace-nowrap\"\n        data-test=\"stash-step|title\"\n        :class=\"[\n          classes.title,\n          {\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-whitespace-nowrap 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: background-color 500ms, 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,KACRC,IAAUC,KAEVC,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,GAAG;AAAA,IAAA;AAIlG,WAAAU,EAAc,MAAM;AAClB,MAAIV,KACcA,EAAA,aAAaN,EAAM,MAAM;AAAA,IAC3C,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Step.vue.d.ts

@@ -33,29 +33,29 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
 };
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<StepProps>, {
-    active: boolean;
-    completed: boolean;
-    error: boolean;
-    nested: boolean;
-    step: undefined;
-    disabled: boolean;
-    loading: boolean;
+active: boolean;
+completed: boolean;
+error: boolean;
+nested: boolean;
+step: undefined;
+disabled: boolean;
+loading: boolean;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<StepProps>, {
-    active: boolean;
-    completed: boolean;
-    error: boolean;
-    nested: boolean;
-    step: undefined;
-    disabled: boolean;
-    loading: boolean;
+active: boolean;
+completed: boolean;
+error: boolean;
+nested: boolean;
+step: undefined;
+disabled: boolean;
+loading: boolean;
 }>>> & Readonly<{}>, {
-    error: boolean;
-    disabled: boolean;
-    loading: boolean;
-    active: boolean;
-    step: string;
-    nested: boolean;
-    completed: boolean;
+error: boolean;
+disabled: boolean;
+loading: boolean;
+active: boolean;
+step: string;
+nested: boolean;
+completed: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>, {
     default?(_: {}): any;
 }>;