@leaflink/stash 42.6.0 → 42.8.0

package/dist/Alert.js

@@ -1,7 +1,7 @@
-import { defineComponent as x, useSlots as $, useCssModule as C, ref as I, computed as s, withDirectives as B, openBlock as i, createElementBlock as l, normalizeClass as r, createVNode as w, unref as t, createElementVNode as f, renderSlot as m, createCommentVNode as o } from "vue";
+import { defineComponent as x, useSlots as $, useCssModule as C, ref as I, computed as s, withDirectives as S, openBlock as i, createElementBlock as l, normalizeClass as r, createVNode as w, unref as t, createElementVNode as f, renderSlot as m, createCommentVNode as o } from "vue";
 import y from "lodash-es/capitalize";
-import S from "lodash-es/uniqueId";
-import { b as M, a as N } from "./statusLevels-2c64f4f8.js";
+import B from "lodash-es/uniqueId";
+import { S as M, a as N } from "./statusLevels-aabf1e3c.js";
 import V from "./sticky.js";
 import p from "./Icon.js";
 import { _ as j } from "./_plugin-vue_export-helper-dad06003.js";
@@ -19,8 +19,8 @@ const z = { class: "tw-m-0" }, A = /* @__PURE__ */ x({
     variant: { default: "outlined" }
   },
   setup(b) {
-    const e = b, g = S("close-icon"), _ = $(), a = C(), c = I(!0), d = s(() => M[y(e.severity)]), h = s(() => N[y(e.severity)]), k = s(() => e.variant === "filled" && ["warning", "success"].includes(e.severity) ? "tw-text-ice-900" : e.variant === "filled" && ["info", "error"].includes(e.severity) ? "tw-text-white" : `tw-text-${h.value}`), n = s(() => e.variant === "filled" && ["info", "error"].includes(e.severity) ? "tw-text-white" : "tw-text-ice-900");
-    return (u, v) => c.value ? B((i(), l("div", {
+    const e = b, g = B("close-icon"), _ = $(), a = C(), c = I(!0), d = s(() => M[y(e.severity)]), h = s(() => N[y(e.severity)]), k = s(() => e.variant === "filled" && ["warning", "success"].includes(e.severity) ? "tw-text-ice-900" : e.variant === "filled" && ["info", "error"].includes(e.severity) ? "tw-text-white" : `tw-text-${h.value}`), n = s(() => e.variant === "filled" && ["info", "error"].includes(e.severity) ? "tw-text-white" : "tw-text-ice-900");
+    return (u, v) => c.value ? S((i(), l("div", {
       key: 0,
       class: r(["stash-alert tw-items-center tw-flex tw-p-3 tw-relative tw-leading-6 tw-border tw-border-solid", [
         `stash-alert--${e.severity}`,

package/dist/Dialog.js

@@ -1,7 +1,7 @@
 import { defineComponent as V, useSlots as $, useAttrs as K, useCssModule as Z, ref as C, computed as n, watchEffect as z, nextTick as A, openBlock as s, createBlock as f, Transition as H, withCtx as m, createElementBlock as p, mergeProps as L, unref as e, withKeys as P, createElementVNode as a, normalizeClass as o, createCommentVNode as r, toDisplayString as _, renderSlot as Y, createTextVNode as T, createVNode as F } from "vue";
 import S from "lodash-es/capitalize";
 import G from "lodash-es/uniqueId";
-import { b as B, a as I, S as J } from "./statusLevels-2c64f4f8.js";
+import { S as B, a as I, b as J } from "./statusLevels-aabf1e3c.js";
 import { t as c } from "./locale.js";
 import q from "./Button.js";
 import O from "./Icon.js";

package/dist/SelectStatus.js

@@ -1,7 +1,7 @@
-import { defineComponent as x, useAttrs as k, useCssModule as v, computed as S, openBlock as o, createBlock as b, normalizeClass as l, unref as n, withCtx as d, createElementBlock as i, createElementVNode as a, toDisplayString as c, createVNode as u, normalizeStyle as m } from "vue";
+import { defineComponent as k, useAttrs as S, useCssModule as b, computed as n, openBlock as o, createBlock as C, normalizeClass as l, unref as g, withCtx as d, createElementBlock as i, createElementVNode as a, toDisplayString as c, createVNode as u, normalizeStyle as m } from "vue";
 import p from "./Icon.js";
-import g from "./Select.js";
-import { _ as C } from "./_plugin-vue_export-helper-dad06003.js";
+import O from "./Select.js";
+import { _ as V } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/uniqueId";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";
@@ -25,11 +25,11 @@ import "./utils/colorScheme.js";
 import "./Field.vue_vue_type_script_setup_true_lang-475832fe.js";
 import "./Label.vue_vue_type_script_setup_true_lang-1d29d98a.js";
 import "./locale.js";
-const V = { class: "tw-truncate tw-mr-6" }, E = {
+const E = { class: "tw-truncate tw-mr-6" }, N = {
   key: 1,
   class: "tw-flex tw-items-center",
   "data-test": "select-status|value"
-}, N = { class: "tw-truncate tw-ml-1.5 tw-mr-6" }, O = { class: "tw-flex tw-min-w-0" }, W = /* @__PURE__ */ x({
+}, $ = { class: "tw-truncate tw-ml-1.5 tw-mr-6" }, D = { class: "tw-flex tw-min-w-0" }, I = /* @__PURE__ */ k({
   name: "ll-select-status",
   __name: "SelectStatus",
   props: {
@@ -44,79 +44,89 @@ const V = { class: "tw-truncate tw-mr-6" }, E = {
     value: { type: [Number, String, Boolean, null], default: null }
   },
   emits: ["update:model-value"],
-  setup(w, { emit: f }) {
-    const e = w, y = k(), r = v();
-    if (e.value)
+  setup(f, { emit: w }) {
+    const t = f, y = ["green", "teal", "ice", "yellow", "seafoam", "seafoam-700"], _ = S(), h = b();
+    if (t.value)
       throw new Error("ll-select-status: use :model-value or v-model instead of :value.");
-    if (y.onInput)
+    if (_.onInput)
       throw new Error("ll-select-status: use the @update:model-value event instead of @input");
-    const h = S(() => e.statusOptions.find((s) => s[e.trackBy] === e.modelValue));
-    function _(s) {
-      return `tw-text-white tw-bg-${s}`;
-    }
+    const r = n(() => t.statusOptions.find((s) => s[t.trackBy] === t.modelValue)), v = n(() => {
+      const { color: s = "" } = r.value || {};
+      return y.includes(s);
+    });
     function B(s) {
-      f("update:model-value", (s == null ? void 0 : s[e.trackBy]) ?? "");
+      return `tw-bg-${s}`;
+    }
+    function x(s) {
+      w("update:model-value", (s == null ? void 0 : s[t.trackBy]) ?? "");
     }
-    return (s, T) => (o(), b(g, {
+    return (s, A) => (o(), C(O, {
       ref: "select",
       "hide-search": "",
       single: "",
-      class: l([[n(r).select, { [n(r).selectWithBackground]: e.secondary }], "stash-select-status"]),
-      disabled: e.disabled,
-      icon: !e.disabled && "caret-down",
-      options: e.statusOptions,
-      placeholder: e.placeholder,
-      "track-by": e.trackBy,
-      "model-value": h.value,
+      class: l([[
+        g(h).select,
+        {
+          "stash-select-status--filled": t.secondary,
+          "stash-select-status--filled-dark": t.secondary && v.value
+        }
+      ], "stash-select-status"]),
+      disabled: t.disabled,
+      icon: !t.disabled && "caret-down",
+      options: t.statusOptions,
+      placeholder: t.placeholder,
+      "track-by": t.trackBy,
+      "model-value": r.value,
       "data-test": "stash-select-status",
-      "onUpdate:modelValue": B
+      "onUpdate:modelValue": x
     }, {
-      selected: d(({ option: t }) => [
-        e.secondary ? (o(), i("div", {
+      selected: d(({ option: e }) => [
+        t.secondary ? (o(), i("div", {
           key: 0,
-          class: l(["tw-absolute tw-flex tw-items-center tw-pl-3 tw-rounded tw-h-full tw-inset-0 tw-w-full", [_(t.color)]]),
+          class: l(["stash-select-status--selected tw-absolute tw-flex tw-items-center tw-pl-3 tw-rounded tw-h-full tw-inset-0 tw-w-full", [B(e.color)]]),
           "data-test": "select-status|value"
         }, [
-          a("span", V, c(t[e.displayBy]), 1)
-        ], 2)) : (o(), i("div", E, [
+          a("span", E, c(e[t.displayBy]), 1)
+        ], 2)) : (o(), i("div", N, [
           u(p, {
-            name: t.icon || "circle-status",
+            "data-test": "select-status|value-icon",
+            name: e.icon || "circle-status",
             class: l([
-              { [`tw-text-${t.color}`]: t.color },
-              { "tw-text-ice-700": !t.color && !t.hexCode }
+              { [`tw-text-${e.color}`]: e.color },
+              { "tw-text-ice-700": !e.color && !e.hexCode }
             ]),
-            style: m({ color: t.hexCode })
+            style: m({ color: e.hexCode })
           }, null, 8, ["name", "class", "style"]),
-          a("span", N, c(t[e.displayBy]), 1)
+          a("span", $, c(e[t.displayBy]), 1)
         ]))
       ]),
-      option: d(({ option: t }) => [
-        a("div", O, [
+      option: d(({ option: e }) => [
+        a("div", D, [
           u(p, {
             "data-test": "svg|status-color",
-            name: t.icon || "circle-status",
+            name: e.icon || "circle-status",
             class: l([[
-              { [`tw-text-${t.color}`]: t.color },
-              { "tw-text-ice-700": !t.color && !t.hexCode }
+              { [`tw-text-${e.color}`]: e.color },
+              { "tw-text-ice-700": !e.color && !e.hexCode }
             ], "!tw-shrink-0"]),
-            style: m({ color: t.hexCode })
+            style: m({ color: e.hexCode })
           }, null, 8, ["name", "class", "style"]),
           a("span", {
             "data-test": "span|option-text",
-            class: l(["tw-ml-1.5", !e.noTruncate && "tw-truncate"])
-          }, c(t[e.displayBy]), 3)
+            class: l(["tw-ml-1.5", !t.noTruncate && "tw-truncate"])
+          }, c(e[t.displayBy]), 3)
         ])
       ]),
       _: 1
     }, 8, ["class", "disabled", "icon", "options", "placeholder", "track-by", "model-value"]));
   }
-}), $ = "_selectWithBackground_13ec3_2", M = "_select_13ec3_2", z = {
-  selectWithBackground: $,
-  select: M
-}, I = {
-  $style: z
-}, it = /* @__PURE__ */ C(W, [["__cssModules", I]]);
+}), L = "_select_1wypi_25", M = {
+  select: L,
+  "stash-select__chips": "_stash-select__chips_1wypi_30"
+}, z = {
+  $style: M
+}, ut = /* @__PURE__ */ V(I, [["__cssModules", z]]);
 export {
-  it as default
+  ut 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 Icon from '../Icon/Icon.vue';\n  import Select from '../Select/Select.vue';\n\n  defineOptions({\n    name: 'll-select-status',\n  });\n\n  const attrs = useAttrs();\n\n  const classes = useCssModule();\n\n  export type SelectStatusOption = {\n    id: number | string;\n    name: string;\n    color?: string;\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  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 =\n    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  /**\n   * @param {string} color Valid color name\n   * @return {string} tailwind classes for given color\n   */\n  function getColor(color: string): string {\n    return `tw-text-white tw-bg-${color}`;\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=\"[classes.select, { [classes.selectWithBackground]: props.secondary }]\"\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=\"tw-absolute tw-flex tw-items-center tw-pl-3 tw-rounded tw-h-full tw-inset-0 tw-w-full\"\n        data-test=\"select-status|value\"\n        :class=\"[getColor(option.color)]\"\n      >\n        <span class=\"tw-truncate tw-mr-6\">{{ 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          :name=\"option.icon || 'circle-status'\"\n          :class=\"[\n            { [`tw-text-${option.color}`]: option.color },\n            { 'tw-text-ice-700': !option.color && !option.hexCode },\n          ]\"\n          :style=\"{ color: option.hexCode }\"\n        />\n        <span class=\"tw-truncate tw-ml-1.5 tw-mr-6\">{{ 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            { [`tw-text-${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  .selectWithBackground :global(.stash-select__content) {\n    border: none;\n    padding: 0;\n  }\n\n  .selectWithBackground :global(.icon--caret-down) {\n    color: var(--color-white);\n  }\n\n  .select :global(.stash-select--disabled > .stash-select__content) {\n    background-color: transparent;\n    border-color: transparent;\n  }\n\n  .selectWithBackground\n    :global(.stash-select--active .stash-select__content:focus-within .stash-select__border-selector) {\n    box-sizing: content-box;\n    max-width: calc(100% - 2px);\n  }\n\n  .select ul {\n    position: relative;\n  }\n</style>\n"],"names":["attrs","useAttrs","classes","useCssModule","props","valueOption","computed","status","getColor","color","onSelect","value","emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAUQA,IAAQC,KAERC,IAAUC;AA0DhB,QAAIC,EAAM;AACF,YAAA,IAAI,MAAM,kEAAkE;AAGpF,QAAIJ,EAAM;AACF,YAAA,IAAI,MAAM,uEAAuE;AAWnF,UAAAK,IAAcC,EAAS,MACpBF,EAAM,cAAc,KAAK,CAACG,MAAWA,EAAOH,EAAM,OAAO,MAAMA,EAAM,UAAU,CACvF;AAMD,aAASI,EAASC,GAAuB;AACvC,aAAO,uBAAuBA,CAAK;AAAA,IACrC;AAEA,aAASC,EAASC,GAAkC;AAClD,MAAAC,EAAK,uBAAsBD,KAAA,gBAAAA,EAAQP,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 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?: string;\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 =\n    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: string): string {\n    return `tw-bg-${color}`;\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=\"\n          stash-select-status--selected\n          tw-absolute tw-flex tw-items-center tw-pl-3 tw-rounded tw-h-full tw-inset-0 tw-w-full\n        \"\n        data-test=\"select-status|value\"\n        :class=\"[getBgColor(option.color)]\"\n      >\n        <span class=\"tw-truncate tw-mr-6\">{{ 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            { [`tw-text-${option.color}`]: option.color },\n            { 'tw-text-ice-700': !option.color && !option.hexCode },\n          ]\"\n          :style=\"{ color: option.hexCode }\"\n        />\n        <span class=\"tw-truncate tw-ml-1.5 tw-mr-6\">{{ 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            { [`tw-text-${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(.stash-select-status--filled\n      .stash-select--active\n      .stash-select__content:focus-within\n      .stash-select__border-selector) {\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: theme('colors.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","valueOption","computed","status","hasDarkFill","color","getBgColor","onSelect","value","emit"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA2DQA,IAAmB,CAAC,SAAS,QAAQ,OAAO,UAAU,WAAW,aAAa,GAE9EC,IAAQC,KACRC,IAAUC;AAYhB,QAAIC,EAAM;AACF,YAAA,IAAI,MAAM,kEAAkE;AAGpF,QAAIJ,EAAM;AACF,YAAA,IAAI,MAAM,uEAAuE;AAWnF,UAAAK,IAAcC,EAAS,MACpBF,EAAM,cAAc,KAAK,CAACG,MAAWA,EAAOH,EAAM,OAAO,MAAMA,EAAM,UAAU,CACvF,GAEKI,IAAcF,EAAS,MAAM;AACjC,YAAM,EAAE,OAAAG,IAAQ,GAAA,IAAOJ,EAAY,SAAS,CAAA;AACrC,aAAAN,EAAiB,SAASU,CAAK;AAAA,IAAA,CACvC;AAMD,aAASC,EAAWD,GAAuB;AACzC,aAAO,SAASA,CAAK;AAAA,IACvB;AAEA,aAASE,EAASC,GAAkC;AAClD,MAAAC,EAAK,uBAAsBD,KAAA,gBAAAA,EAAQR,EAAM,aAAY,EAAE;AAAA,IACzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Textarea.js

@@ -1,11 +1,11 @@
-import { defineComponent as _, useAttrs as f, useSlots as v, computed as x, onMounted as h, openBlock as w, createBlock as I, mergeProps as l, unref as a, createSlots as T, withCtx as s, createElementVNode as b, renderSlot as y } from "vue";
-import g from "lodash-es/uniqueId";
-import { _ as k } from "./Field.vue_vue_type_script_setup_true_lang-475832fe.js";
-import { _ as A } from "./_plugin-vue_export-helper-dad06003.js";
+import { defineComponent as R, useAttrs as C, useSlots as S, ref as h, computed as k, watch as H, onMounted as I, nextTick as O, onBeforeUnmount as A, openBlock as M, createBlock as P, mergeProps as _, unref as p, createSlots as V, withCtx as x, createElementVNode as q, renderSlot as $ } from "vue";
+import j from "lodash-es/uniqueId";
+import { _ as D } from "./Field.vue_vue_type_script_setup_true_lang-475832fe.js";
+import { _ as F } from "./_plugin-vue_export-helper-dad06003.js";
 import "./Label.vue_vue_type_script_setup_true_lang-1d29d98a.js";
 import "./locale.js";
 import "lodash-es/get";
-const B = ["id", "value"], E = /* @__PURE__ */ _({
+const L = ["id", "value"], N = /* @__PURE__ */ R({
   name: "ll-textarea",
   __name: "Textarea",
   props: {
@@ -14,48 +14,97 @@ const B = ["id", "value"], E = /* @__PURE__ */ _({
     value: { default: null },
     errorText: { default: "" },
     hintText: { default: "" },
-    showOptionalInLabel: { type: Boolean, default: !1 }
+    showOptionalInLabel: { type: Boolean, default: !1 },
+    resize: { type: [Boolean, Object], default: !1 }
   },
   emits: ["update:model-value"],
-  setup(r, { emit: n }) {
-    const o = r, u = g("textarea-"), t = f(), d = v(), i = x(() => {
-      const e = { ...t };
+  setup(g, { emit: w }) {
+    const s = g, b = j("textarea-"), f = C(), y = S(), c = h(), l = h(), z = k(() => {
+      const e = { ...f };
       return delete e["data-test"], delete e.class, e;
-    }), p = (e) => {
-      n("update:model-value", e.target.value);
+    });
+    H(
+      () => s.resize,
+      (e) => {
+        var t;
+        e ? m() : (t = l.value) == null || t.disconnect();
+      }
+    );
+    const T = (e) => {
+      w("update:model-value", e.target.value);
+    }, m = () => {
+      l.value || !c.value || (l.value = new ResizeObserver(([e]) => {
+        const { target: t } = e, o = v(c.value) || document.documentElement, { scrollTop: n } = o;
+        let a = 0;
+        if (o === document.documentElement) {
+          const { top: r, height: i } = B(t), { innerHeight: u } = window;
+          a = Math.max(r + i - (u + n), 0);
+        } else {
+          const { top: r, height: i } = t.getBoundingClientRect(), { top: u } = o.getBoundingClientRect(), { offsetHeight: d } = o, E = r - u;
+          a = Math.max(E + i - d, 0);
+        }
+        a && requestAnimationFrame(() => {
+          o.scrollTop = n + a;
+        });
+      }), l.value.observe(c.value));
+    }, v = (e) => {
+      const t = e.parentElement;
+      if (!t)
+        return null;
+      const { overflowY: o } = getComputedStyle(t);
+      return o !== "visible" ? t : t === document.body ? document.documentElement : v(t);
+    }, B = (e) => {
+      const { offsetWidth: t, offsetHeight: o } = e;
+      let n = 0, a = 0;
+      const r = function({ offsetLeft: i, offsetTop: u, offsetParent: d }) {
+        n += i, a += u, d && r(d);
+      };
+      return r(e), {
+        top: a,
+        left: n,
+        width: t,
+        height: o
+      };
     };
-    return h(() => {
-      if (o.value !== null)
+    return I(async () => {
+      var e;
+      if (s.value !== null)
         throw new Error("ll-input: use :model-value or v-model instead of :value.");
-      if (t.onInput)
+      if (f.onInput)
         throw new Error("ll-input: use the @update:model-value event instead of @input");
-    }), (e, S) => (w(), I(k, l(o, {
-      id: a(u),
-      class: ["stash-textarea", [a(t).class]],
+      (typeof s.resize == "boolean" && s.resize || (e = s.resize) != null && e.forceBrowserScroll) && (await O(), m());
+    }), A(() => {
+      var e;
+      (e = l.value) == null || e.disconnect();
+    }), (e, t) => (M(), P(D, _(s, {
+      id: p(b),
+      class: ["stash-textarea", [p(f).class]],
       "data-test": "stash-textarea"
-    }), T({
-      default: s(({ fieldId: m, hasError: c }) => [
-        b("textarea", l({
-          id: m,
-          class: { "stash-textarea--error": c },
+    }), V({
+      default: x(({ fieldId: o, hasError: n }) => [
+        q("textarea", _({
+          id: o,
+          ref_key: "textareaRef",
+          ref: c,
+          class: { "stash-textarea--error": n, "tw-resize-y": e.resize, "tw-resize-none": !e.resize },
           value: e.modelValue,
           "data-test": "stash-textarea|textarea"
-        }, i.value, { onInput: p }), null, 16, B)
+        }, z.value, { onInput: T }), null, 16, L)
       ]),
       _: 2
     }, [
-      a(d).hint ? {
+      p(y).hint ? {
         name: "hint",
-        fn: s(() => [
-          y(e.$slots, "hint", {}, void 0, !0)
+        fn: x(() => [
+          $(e.$slots, "hint", {}, void 0, !0)
         ]),
         key: "0"
       } : void 0
     ]), 1040, ["id", "class"]));
   }
 });
-const O = /* @__PURE__ */ A(E, [["__scopeId", "data-v-b1a41a86"]]);
+const X = /* @__PURE__ */ F(N, [["__scopeId", "data-v-59ed175b"]]);
 export {
-  O as default
+  X as default
 };
 //# sourceMappingURL=Textarea.js.map

package/dist/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, onMounted, useAttrs, useSlots } from 'vue';\n\n  import Field from '../Field/Field.vue';\n\n  export interface TextAreaProps {\n    /**\n     * Label text for the textarea element.\n     */\n    label?: string;\n    /**\n     * Value for the textarea element.\n     */\n    modelValue?: string;\n    /**\n     * Deprecated. Use :model-value or v-model instead of :value.\n     * @deprecated Use :model-value or v-model instead of :value.\n     */\n    value?: string | number | null;\n    /**\n     * Error text for the textarea element.\n     */\n    errorText?: string;\n    /**\n     * Hint text for the textarea element.\n     */\n    hintText?: string;\n    /**\n     * Render \"(optional)\" to the right of the label text\n     */\n    showOptionalInLabel?: boolean;\n  }\n\n  defineOptions({\n    name: 'll-textarea',\n  });\n\n  /**\n   * Unique ID for the textarea, required for accessibility purposes\n   */\n  const id = uniqueId('textarea-');\n\n  const attrs = useAttrs();\n  const slots = useSlots();\n\n  const props = withDefaults(defineProps<TextAreaProps>(), {\n    label: ' ',\n    modelValue: '',\n    value: null,\n    errorText: '',\n    hintText: '',\n    showOptionalInLabel: false,\n  });\n\n  const emits =\n    defineEmits<{\n      /**\n       * Emitted when the model value changes.\n       */\n      (e: 'update:model-value', value: string): void;\n    }>();\n\n  const inputAttrs = computed(() => {\n    const allAttrs = { ...attrs };\n\n    delete allAttrs['data-test'];\n    delete allAttrs.class;\n\n    return allAttrs;\n  });\n\n  const onInput = (event: Event) => {\n    emits('update:model-value', (event.target as HTMLTextAreaElement).value);\n  };\n\n  onMounted(() => {\n    if (props.value !== null) {\n      throw new Error('ll-input: use :model-value or v-model instead of :value.');\n    }\n\n    if (attrs.onInput) {\n      throw new Error('ll-input: use the @update:model-value event instead of @input');\n    }\n  });\n</script>\n\n<template>\n  <Field v-bind=\"props\" :id=\"id\" class=\"stash-textarea\" :class=\"[attrs.class]\" data-test=\"stash-textarea\">\n    <template #default=\"{ fieldId, hasError }\">\n      <textarea\n        :id=\"fieldId\"\n        :class=\"{ 'stash-textarea--error': hasError }\"\n        :value=\"modelValue\"\n        data-test=\"stash-textarea|textarea\"\n        v-bind=\"inputAttrs\"\n        @input=\"onInput\"\n      ></textarea>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <!-- @slot Hint content -->\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style scoped>\n  .stash-textarea {\n    position: relative;\n    width: 100%;\n\n    textarea {\n      background: theme(colors.white);\n      border: 1px solid;\n      border-color: theme(colors.ice.DEFAULT);\n      border-radius: theme(borderRadius.DEFAULT);\n      color: theme(colors.ice.700);\n      display: block;\n      min-height: 100px;\n      resize: none;\n      outline: none;\n      padding: theme(spacing[1.5]);\n      width: 100%;\n\n      &:hover {\n        border-color: theme(colors.ice.DEFAULT);\n      }\n\n      &:focus,\n      &:active {\n        border-color: theme(colors.blue.DEFAULT);\n      }\n\n      &.stash-textarea--error {\n        border-color: theme(colors.red.DEFAULT);\n        color: theme(colors.red.DEFAULT);\n      }\n    }\n  }\n</style>\n"],"names":["id","uniqueId","attrs","useAttrs","slots","useSlots","inputAttrs","computed","allAttrs","onInput","event","emits","onMounted","props"],"mappings":";;;;;;;;;;;;;;;;;;;;iBAyCQA,IAAKC,EAAS,WAAW,GAEzBC,IAAQC,KACRC,IAAQC,KAmBRC,IAAaC,EAAS,MAAM;AAC1B,YAAAC,IAAW,EAAE,GAAGN;AAEtB,oBAAOM,EAAS,WAAW,GAC3B,OAAOA,EAAS,OAETA;AAAA,IAAA,CACR,GAEKC,IAAU,CAACC,MAAiB;AAC1B,MAAAC,EAAA,sBAAuBD,EAAM,OAA+B,KAAK;AAAA,IAAA;AAGzE,WAAAE,EAAU,MAAM;AACV,UAAAC,EAAM,UAAU;AACZ,cAAA,IAAI,MAAM,0DAA0D;AAG5E,UAAIX,EAAM;AACF,cAAA,IAAI,MAAM,+DAA+D;AAAA,IACjF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, useSlots, watch } from 'vue';\n\n  import Field from '../Field/Field.vue';\n\n  export interface TextareaResizeOptions {\n    /**\n     * It will automatically scroll the page down when it reaches the bottom of the viewport/element\n     */\n    forceBrowserScroll: boolean;\n  }\n\n  export interface TextAreaProps {\n    /**\n     * Label text for the textarea element.\n     */\n    label?: string;\n    /**\n     * Value for the textarea element.\n     */\n    modelValue?: string;\n    /**\n     * Deprecated. Use :model-value or v-model instead of :value.\n     * @deprecated Use :model-value or v-model instead of :value.\n     */\n    value?: string | number | null;\n    /**\n     * Error text for the textarea element.\n     */\n    errorText?: string;\n    /**\n     * Hint text for the textarea element.\n     */\n    hintText?: string;\n    /**\n     * Render \"(optional)\" to the right of the label text\n     */\n    showOptionalInLabel?: boolean;\n    /**\n     * Allow textarea to be resizable vertically.\n     * Alternatively if you want to disable automatic scroll when resizing, you can set `{ forceBrowserScroll: false }`\n     */\n    resize?: boolean | TextareaResizeOptions;\n  }\n\n  defineOptions({\n    name: 'll-textarea',\n  });\n\n  /**\n   * Unique ID for the textarea, required for accessibility purposes\n   */\n  const id = uniqueId('textarea-');\n\n  const attrs = useAttrs();\n  const slots = useSlots();\n\n  const props = withDefaults(defineProps<TextAreaProps>(), {\n    label: ' ',\n    modelValue: '',\n    value: null,\n    errorText: '',\n    hintText: '',\n    showOptionalInLabel: false,\n    resize: false,\n  });\n\n  const emits =\n    defineEmits<{\n      /**\n       * Emitted when the model value changes.\n       */\n      (e: 'update:model-value', value: string): void;\n    }>();\n\n  const textareaRef = ref<HTMLTextAreaElement>();\n  const observer = ref<ResizeObserver>();\n\n  const inputAttrs = computed(() => {\n    const allAttrs = { ...attrs };\n\n    delete allAttrs['data-test'];\n    delete allAttrs.class;\n\n    return allAttrs;\n  });\n\n  watch(\n    () => props.resize,\n    (v) => {\n      v ? setupResizeObserver() : observer.value?.disconnect();\n    },\n  );\n\n  const onInput = (event: Event) => {\n    emits('update:model-value', (event.target as HTMLTextAreaElement).value);\n  };\n\n  const setupResizeObserver = () => {\n    if (observer.value || !textareaRef.value) {\n      return;\n    }\n\n    // the ResizeObserver will be in charge to detect if page needs to scroll when resizing the component\n    observer.value = new ResizeObserver(([entry]) => {\n      const { target } = entry;\n      const parent = findParentScrollable(textareaRef.value as HTMLTextAreaElement) || document.documentElement;\n\n      const { scrollTop: scrollPosition } = parent;\n      let offsetDiff = 0;\n\n      // checks if the closest parent element scrollable is the document page\n      if (parent === document.documentElement) {\n        const { top, height } = getOffsetClipRect(target as HTMLElement);\n        const { innerHeight: viewportHeight } = window;\n\n        offsetDiff = Math.max(top + height - (viewportHeight + scrollPosition), 0);\n      } else {\n        const { top, height } = (target as HTMLElement).getBoundingClientRect();\n        const { top: parentTop } = parent.getBoundingClientRect();\n        const { offsetHeight: parentHeight } = parent;\n        const offsetTop = top - parentTop;\n\n        offsetDiff = Math.max(offsetTop + height - parentHeight, 0);\n      }\n\n      if (offsetDiff) {\n        requestAnimationFrame(() => {\n          parent.scrollTop = scrollPosition + offsetDiff;\n        });\n      }\n    });\n\n    observer.value.observe(textareaRef.value);\n  };\n\n  /**\n   * Retrieve the closest parent that has a scroll. Defaults to the document page.\n   */\n  const findParentScrollable = (el: HTMLElement): HTMLElement | null => {\n    const parent = el.parentElement as HTMLElement;\n    if (!parent) {\n      return null;\n    }\n\n    const { overflowY } = getComputedStyle(parent);\n    if (overflowY !== 'visible') {\n      return parent;\n    }\n\n    if (parent === document.body) {\n      return document.documentElement;\n    }\n\n    return findParentScrollable(parent);\n  };\n\n  /**\n   * Retrieve element absolute positioning relative to the page.\n   */\n  const getOffsetClipRect = (el: HTMLElement) => {\n    const { offsetWidth: width, offsetHeight: height } = el;\n\n    let left = 0;\n    let top = 0;\n\n    const findPos = function ({ offsetLeft, offsetTop, offsetParent }: HTMLElement) {\n      left += offsetLeft;\n      top += offsetTop;\n\n      if (offsetParent) {\n        findPos(offsetParent as HTMLElement);\n      }\n    };\n\n    findPos(el);\n\n    return {\n      top,\n      left,\n      width,\n      height,\n    };\n  };\n\n  onMounted(async () => {\n    if (props.value !== null) {\n      throw new Error('ll-input: use :model-value or v-model instead of :value.');\n    }\n\n    if (attrs.onInput) {\n      throw new Error('ll-input: use the @update:model-value event instead of @input');\n    }\n\n    if (\n      (typeof props.resize === 'boolean' && props.resize) ||\n      (props.resize as TextareaResizeOptions)?.forceBrowserScroll\n    ) {\n      await nextTick();\n      setupResizeObserver();\n    }\n  });\n\n  onBeforeUnmount(() => {\n    observer.value?.disconnect();\n  });\n</script>\n\n<template>\n  <Field v-bind=\"props\" :id=\"id\" class=\"stash-textarea\" :class=\"[attrs.class]\" data-test=\"stash-textarea\">\n    <template #default=\"{ fieldId, hasError }\">\n      <textarea\n        :id=\"fieldId\"\n        ref=\"textareaRef\"\n        :class=\"{ 'stash-textarea--error': hasError, 'tw-resize-y': resize, 'tw-resize-none': !resize }\"\n        :value=\"modelValue\"\n        data-test=\"stash-textarea|textarea\"\n        v-bind=\"inputAttrs\"\n        @input=\"onInput\"\n      ></textarea>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <!-- @slot Hint content -->\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style scoped>\n  .stash-textarea {\n    position: relative;\n    width: 100%;\n\n    textarea {\n      background: theme(colors.white);\n      border: 1px solid;\n      border-color: theme(colors.ice.DEFAULT);\n      border-radius: theme(borderRadius.DEFAULT);\n      color: theme(colors.ice.700);\n      display: block;\n      min-height: 100px;\n      outline: none;\n      padding: theme(spacing[1.5]);\n      width: 100%;\n\n      &:hover {\n        border-color: theme(colors.ice.DEFAULT);\n      }\n\n      &:focus,\n      &:active {\n        border-color: theme(colors.blue.DEFAULT);\n      }\n\n      &.stash-textarea--error {\n        border-color: theme(colors.red.DEFAULT);\n        color: theme(colors.red.DEFAULT);\n      }\n    }\n  }\n</style>\n"],"names":["id","uniqueId","attrs","useAttrs","slots","useSlots","textareaRef","ref","observer","inputAttrs","computed","allAttrs","watch","props","v","setupResizeObserver","_a","onInput","event","emits","entry","target","parent","findParentScrollable","scrollPosition","offsetDiff","top","height","getOffsetClipRect","viewportHeight","parentTop","parentHeight","offsetTop","el","overflowY","width","left","findPos","offsetLeft","offsetParent","onMounted","nextTick","onBeforeUnmount"],"mappings":"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"}

package/dist/Textarea.vue.d.ts

@@ -40,6 +40,7 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     errorText: string;
     hintText: string;
     showOptionalInLabel: boolean;
+    resize: boolean;
 }>, {}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
     "update:model-value": (value: string) => void;
 }, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TextAreaProps>, {
@@ -49,10 +50,12 @@ declare const _default: __VLS_WithTemplateSlots<DefineComponent<__VLS_WithDefaul
     errorText: string;
     hintText: string;
     showOptionalInLabel: boolean;
+    resize: boolean;
 }>>> & {
     "onUpdate:model-value"?: ((value: string) => any) | undefined;
 }, {
     label: string;
+    resize: boolean | TextareaResizeOptions;
     value: string | number | null;
     errorText: string;
     hintText: string;
@@ -89,6 +92,18 @@ export declare interface TextAreaProps {
      * Render "(optional)" to the right of the label text
      */
     showOptionalInLabel?: boolean;
+    /**
+     * Allow textarea to be resizable vertically.
+     * Alternatively if you want to disable automatic scroll when resizing, you can set `{ forceBrowserScroll: false }`
+     */
+    resize?: boolean | TextareaResizeOptions;
+}
+
+export declare interface TextareaResizeOptions {
+    /**
+     * It will automatically scroll the page down when it reaches the bottom of the viewport/element
+     */
+    forceBrowserScroll: boolean;
 }
 
 export { }

package/dist/Toast.js

@@ -1,6 +1,6 @@
 import { defineComponent as c, useCssModule as l, computed as o, openBlock as _, createElementBlock as i, normalizeClass as p, unref as e, createVNode as m, createElementVNode as f, toDisplayString as d } from "vue";
 import y from "lodash-es/capitalize";
-import { b as a, S as q } from "./statusLevels-2c64f4f8.js";
+import { S as a, b as q } from "./statusLevels-aabf1e3c.js";
 import x from "./Icon.js";
 import { _ as S } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/uniqueId";

package/dist/Toasts.js

@@ -5,7 +5,7 @@ import { _ as x } from "./_plugin-vue_export-helper-dad06003.js";
 import "lodash-es/merge";
 import "lodash-es/uniqueId";
 import "lodash-es/capitalize";
-import "./statusLevels-2c64f4f8.js";
+import "./statusLevels-aabf1e3c.js";
 import "./Icon.js";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";

package/dist/ToastsPlugin.js

@@ -5,7 +5,7 @@ import "lodash-es/merge";
 import "lodash-es/uniqueId";
 import "./Toast.js";
 import "lodash-es/capitalize";
-import "./statusLevels-2c64f4f8.js";
+import "./statusLevels-aabf1e3c.js";
 import "./Icon.js";
 import "./index-79ce320f.js";
 import "./Icon.vue_used_vue_type_style_index_0_lang.module-eb359559.js";