@leaflink/stash 50.0.7 → 50.0.8

package/dist/Filters.vue.d.ts

@@ -743,6 +743,10 @@ type: PropType<string>;
 id: {
 type: PropType<string>;
 };
+trackBy: {
+type: PropType<string>;
+default: undefined;
+};
 isRequired: {
 type: PropType<boolean>;
 };
@@ -771,6 +775,10 @@ placeholder: {
 type: PropType<string>;
 default: undefined;
 };
+displayBy: {
+type: PropType<string>;
+default: undefined;
+};
 options: {
 type: PropType<any[]>;
 default: () => never[];
@@ -817,7 +825,9 @@ type: "input" | "select";
 }) => void;
 }, PublicProps, {
 type: string;
+trackBy: string;
 placeholder: string;
+displayBy: string;
 options: any[];
 modelValue: {
 value: string;
@@ -848,6 +858,10 @@ type: PropType<string>;
 id: {
 type: PropType<string>;
 };
+trackBy: {
+type: PropType<string>;
+default: undefined;
+};
 isRequired: {
 type: PropType<boolean>;
 };
@@ -876,6 +890,10 @@ placeholder: {
 type: PropType<string>;
 default: undefined;
 };
+displayBy: {
+type: PropType<string>;
+default: undefined;
+};
 options: {
 type: PropType<any[]>;
 default: () => never[];
@@ -909,7 +927,9 @@ type: "input" | "select";
 }) => any) | undefined;
 }>, {}, {}, {}, {}, {
 type: string;
+trackBy: string;
 placeholder: string;
+displayBy: string;
 options: any[];
 modelValue: {
 value: string;
@@ -937,6 +957,10 @@ type: PropType<string>;
 id: {
 type: PropType<string>;
 };
+trackBy: {
+type: PropType<string>;
+default: undefined;
+};
 isRequired: {
 type: PropType<boolean>;
 };
@@ -965,6 +989,10 @@ placeholder: {
 type: PropType<string>;
 default: undefined;
 };
+displayBy: {
+type: PropType<string>;
+default: undefined;
+};
 options: {
 type: PropType<any[]>;
 default: () => never[];
@@ -1011,7 +1039,9 @@ type: "input" | "select";
 }) => void;
 }, string, {
 type: string;
+trackBy: string;
 placeholder: string;
+displayBy: string;
 options: any[];
 modelValue: {
 value: string;

package/dist/InputOptions.js

@@ -1,12 +1,12 @@
-import { defineComponent as E, useAttrs as T, useSlots as $, useCssModule as D, ref as r, computed as M, watchEffect as R, watch as v, openBlock as c, createBlock as z, mergeProps as h, createSlots as A, withCtx as f, createElementBlock as y, createElementVNode as F, toDisplayString as _, normalizeClass as w, unref as i, createVNode as b, renderSlot as N } from "vue";
-import U from "./Input.js";
-import q from "./Select.js";
-import { _ as L } from "./Field.vue_vue_type_script_setup_true_lang-DEizIcDo.js";
-import { _ as P } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const j = {
+import { defineComponent as S, useAttrs as O, useSlots as E, useCssModule as T, ref as p, watchEffect as $, watch as h, openBlock as d, createBlock as D, mergeProps as M, createSlots as R, withCtx as f, createElementBlock as y, createElementVNode as z, toDisplayString as _, normalizeClass as r, unref as s, createVNode as b, renderSlot as F } from "vue";
+import N from "./Input.js";
+import U from "./Select.js";
+import { _ as q } from "./Field.vue_vue_type_script_setup_true_lang-DEizIcDo.js";
+import { _ as A } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const L = {
   key: 0,
   class: "tw-flex tw-h-input tw-items-center tw-text-sm"
-}, G = ["id", "aria-labelledby"], H = /* @__PURE__ */ E({
+}, P = ["id", "aria-labelledby"], j = /* @__PURE__ */ S({
   name: "ll-input-options",
   __name: "InputOptions",
   props: {
@@ -15,136 +15,137 @@ const j = {
     noTruncate: { type: Boolean, default: !1 },
     options: { default: () => [] },
     placeholder: { default: void 0 },
-    disabled: { type: Boolean },
-    isReadOnly: { type: Boolean },
+    displayBy: { default: void 0 },
+    trackBy: { default: void 0 },
     addBottomSpace: { type: Boolean },
     errorText: {},
     hintText: {},
     id: {},
     errorId: {},
+    isReadOnly: { type: Boolean },
     isRequired: { type: Boolean },
     label: {},
     showOptionalInLabel: { type: Boolean },
     fieldset: { type: Boolean },
-    isDisabled: { type: Boolean }
+    isDisabled: { type: Boolean },
+    disabled: { type: Boolean }
   },
   emits: ["update:model-value", "change"],
-  setup(g, { emit: B }) {
-    const e = g, n = B, u = T(), V = $(), p = D(), o = r(), d = r(!1), t = r(), C = M(() => {
-      const { disabled: l, displayBy: a, trackBy: s } = u;
-      return { disabled: l, displayBy: a, trackBy: s };
-    });
-    function x(l) {
-      o.value = String(l), n("update:model-value", {
-        value: o.value,
+  setup(w, { emit: g }) {
+    const e = w, o = g, c = O(), B = E(), i = T(), l = p(), u = p(!1), t = p();
+    function V(a) {
+      l.value = String(a), o("update:model-value", {
+        value: l.value,
         option: t.value,
         isValueChange: !0,
         type: "input"
       });
     }
-    function I() {
-      n("change", {
-        value: o.value,
+    function k() {
+      o("change", {
+        value: l.value,
         option: t.value,
         isValueChange: !0,
         type: "input"
       });
     }
-    function k(l) {
-      t.value = l, n("change", {
-        value: o.value,
+    function C(a) {
+      t.value = a, o("change", {
+        value: l.value,
         option: t.value,
         isValueChange: !1,
         type: "select"
-      }), n("update:model-value", {
-        value: o.value,
+      }), o("update:model-value", {
+        value: l.value,
         option: t.value,
         isValueChange: !1,
         type: "select"
       });
     }
-    if (R(() => {
+    if ($(() => {
       t.value || (t.value = e.options[0]);
-    }), v(
+    }), h(
       () => e.modelValue.value,
       () => {
-        o.value = e.modelValue.value;
+        l.value = e.modelValue.value;
       },
       { immediate: !0 }
-    ), v(
+    ), h(
       () => e.modelValue.option,
       () => {
         t.value = e.modelValue.option;
       },
       { immediate: !0 }
-    ), u.value)
+    ), c.value)
       throw new Error("ll-input-options: use :model-value or v-model instead of :value.");
-    if (u.onInput)
+    if (c.onInput)
       throw new Error("ll-input-options: use the @update:model-value event instead of @input");
-    return (l, a) => (c(), z(L, h(e, {
+    return (a, n) => (d(), D(q, M(e, {
       class: "stash-input-options",
       "data-test": "stash-input-options"
-    }), A({
-      default: f(({ fieldId: s, labelId: S }) => {
-        var m;
+    }), R({
+      default: f(({ fieldId: m, labelId: x }) => {
+        var v;
         return [
-          e.isReadOnly ? (c(), y("div", j, [
-            F("span", {
-              id: s,
-              "aria-labelledby": S,
+          e.isReadOnly ? (d(), y("div", L, [
+            z("span", {
+              id: m,
+              "aria-labelledby": x,
               class: "tw-h-min"
-            }, _(o.value || 0) + " " + _((m = t.value) == null ? void 0 : m.name), 9, G)
-          ])) : (c(), y("div", {
+            }, _(l.value || 0) + " " + _((v = t.value) == null ? void 0 : v.name), 9, P)
+          ])) : (d(), y("div", {
             key: 1,
-            class: w(["tw-flex", { [i(p)["has-error"]]: !!e.errorText }])
+            class: r(["tw-flex", { [s(i)["has-error"]]: !!e.errorText }])
           }, [
-            b(U, {
-              id: s,
-              class: w(["stash-input-options__input -tw-mr-[1px] tw-inline-block tw-flex-1", [i(p).input, { "tw-z-control": d.value }]]),
+            b(N, {
+              id: m,
+              class: r(["stash-input-options__input -tw-mr-[1px] tw-inline-block tw-flex-1", [s(i).input, { "tw-z-control": u.value }]]),
               "data-test": "stash-input-options|input",
               type: e.type,
-              "model-value": o.value,
+              "model-value": l.value,
               disabled: e.isDisabled || e.disabled,
               placeholder: e.placeholder,
-              onChange: I,
-              "onUpdate:modelValue": x,
-              onBlur: a[0] || (a[0] = (O) => d.value = !1),
-              onFocus: a[1] || (a[1] = (O) => d.value = !0)
+              onChange: k,
+              "onUpdate:modelValue": V,
+              onBlur: n[0] || (n[0] = (I) => u.value = !1),
+              onFocus: n[1] || (n[1] = (I) => u.value = !0)
             }, null, 8, ["id", "class", "type", "model-value", "disabled", "placeholder"]),
-            b(q, h(C.value, {
+            b(U, {
               single: "",
               "hide-search": "",
               "prevent-empty": "",
-              class: ["stash-input-options__select tw-min-w-20", i(p).select],
+              class: r(["stash-input-options__select tw-min-w-20", s(i).select]),
               "data-test": "stash-input-options|select",
-              "no-truncate": l.noTruncate,
-              options: l.options,
+              "no-truncate": a.noTruncate,
+              options: a.options,
               "model-value": t.value,
+              "display-by": e.displayBy,
+              "track-by": e.trackBy,
               disabled: e.isDisabled || e.disabled,
-              "onUpdate:modelValue": k
-            }), null, 16, ["class", "no-truncate", "options", "model-value", "disabled"])
+              "onUpdate:modelValue": C
+            }, null, 8, ["class", "no-truncate", "options", "model-value", "display-by", "track-by", "disabled"])
           ], 2))
         ];
       }),
       _: 2
     }, [
-      i(V).hint ? {
+      s(B).hint ? {
         name: "hint",
         fn: f(() => [
-          N(l.$slots, "hint")
+          F(a.$slots, "hint")
         ]),
         key: "0"
       } : void 0
     ]), 1040));
   }
-}), J = "_input_gn7he_2", K = "_select_gn7he_7", Q = {
-  input: J,
-  select: K,
+}), G = "_input_gn7he_2", H = "_select_gn7he_7", J = {
+  input: G,
+  select: H,
   "has-error": "_has-error_gn7he_16"
-}, W = {
-  $style: Q
-}, le = /* @__PURE__ */ P(H, [["__cssModules", W]]);
+}, K = {
+  $style: J
+}, ee = /* @__PURE__ */ A(j, [["__cssModules", K]]);
 export {
-  le as default
+  ee as default
 };
 //# sourceMappingURL=InputOptions.js.map

package/dist/InputOptions.js.map

@@ -1 +1 @@
-{"version":3,"file":"InputOptions.js","sources":["../src/components/InputOptions/InputOptions.vue"],"sourcesContent":["<script lang=\"ts\">\n  import Field, { type FieldProps } from '../Field/Field.vue';\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  type Option = any;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  type SelectedOption = any;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  export interface InputOptionsProps extends FieldProps {\n    /**\n     * The current value inclusive of the input & select\n     */\n    modelValue?: { value: string; option?: SelectedOption };\n\n    /**\n     * Input type\n     */\n    type?: string extends 'button' | 'checkbox' | 'radio' | 'submit' ? never : string;\n\n    /**\n     * Prevents the Selected Option from being truncated, if true\n     */\n    noTruncate?: boolean;\n\n    /**\n     * Options for the select\n     */\n    options?: Option[];\n\n    /**\n     * Placeholder text for the input\n     * **Note:** placeholders should be used to display examples; they should not be used as labels because they are not accessible as labels. If a real label cannot be used, use the `aria-label` attribute.\n     */\n    placeholder?: string;\n\n    /**\n     * Indicates whether the inputOptions is disabled.\n     */\n    disabled?: boolean;\n\n    /**\n     * Indicates whether the inputOptions is read-only.\n     */\n    isReadOnly?: boolean;\n  }\n</script>\n\n<script lang=\"ts\" setup>\n  import { computed, ref, useAttrs, useCssModule, useSlots, watch, watchEffect } from 'vue';\n\n  import Input from '../Input/Input.vue';\n  import Select from '../Select/Select.vue';\n\n  defineOptions({\n    name: 'll-input-options',\n  });\n\n  const props = withDefaults(defineProps<InputOptionsProps>(), {\n    modelValue: () => ({ value: '', option: undefined }),\n    noTruncate: false,\n    options: () => [],\n    type: 'text',\n    placeholder: undefined,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the model value changes\n     */\n    (\n      e: 'update:model-value',\n      v: { value?: string; option?: SelectedOption; isValueChange: boolean; type: 'input' | 'select' },\n    ): void;\n    /**\n     * Emitted when either the input or select changes\n     */\n    (\n      e: 'change',\n      v: { value?: string; option?: SelectedOption; isValueChange: boolean; type: 'input' | 'select' },\n    ): void;\n  }>();\n\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const classes = useCssModule();\n  const internalInput = ref<string>();\n  const isInputFocused = ref(false);\n  const selectedOption = ref<Option | undefined>();\n\n  const selectAttrs = computed(() => {\n    const { disabled, displayBy, trackBy } = attrs;\n\n    return { disabled, displayBy, trackBy } as { disabled: boolean; displayBy: string; trackBy: string };\n  });\n\n  // Input value changed\n  function handleInput(val?: string | number) {\n    internalInput.value = String(val);\n\n    emit('update:model-value', {\n      value: internalInput.value,\n      option: selectedOption.value,\n      isValueChange: true,\n      type: 'input',\n    });\n  }\n\n  // Input blurred\n  function handleInputChange() {\n    emit('change', {\n      value: internalInput.value,\n      option: selectedOption.value,\n      isValueChange: true,\n      type: 'input',\n    });\n  }\n\n  function handleSelectChange(val?: Option) {\n    selectedOption.value = val;\n\n    emit('change', {\n      value: internalInput.value,\n      option: selectedOption.value,\n      isValueChange: false,\n      type: 'select',\n    });\n    emit('update:model-value', {\n      value: internalInput.value,\n      option: selectedOption.value,\n      isValueChange: false,\n      type: 'select',\n    });\n  }\n\n  watchEffect(() => {\n    if (!selectedOption.value) {\n      selectedOption.value = props.options[0];\n    }\n  });\n\n  watch(\n    () => props.modelValue.value,\n    () => {\n      internalInput.value = props.modelValue.value;\n    },\n    { immediate: true },\n  );\n\n  watch(\n    () => props.modelValue.option,\n    () => {\n      selectedOption.value = props.modelValue.option;\n    },\n    { immediate: true },\n  );\n\n  if (attrs.value) {\n    throw new Error('ll-input-options: use :model-value or v-model instead of :value.');\n  }\n\n  if (attrs.onInput) {\n    throw new Error('ll-input-options: use the @update:model-value event instead of @input');\n  }\n</script>\n\n<template>\n  <Field v-bind=\"props\" class=\"stash-input-options\" data-test=\"stash-input-options\">\n    <template #default=\"{ fieldId, labelId }\">\n      <div v-if=\"props.isReadOnly\" class=\"tw-flex tw-h-input tw-items-center tw-text-sm\">\n        <span :id=\"fieldId\" :aria-labelledby=\"labelId\" class=\"tw-h-min\"\n          >{{ internalInput || 0 }} {{ selectedOption?.name }}</span\n        >\n      </div>\n      <div v-else class=\"tw-flex\" :class=\"{ [classes['has-error']]: !!props.errorText }\">\n        <Input\n          :id=\"fieldId\"\n          class=\"stash-input-options__input -tw-mr-[1px] tw-inline-block tw-flex-1\"\n          :class=\"[classes.input, { 'tw-z-control': isInputFocused }]\"\n          data-test=\"stash-input-options|input\"\n          :type=\"props.type\"\n          :model-value=\"internalInput\"\n          :disabled=\"props.isDisabled || props.disabled\"\n          :placeholder=\"props.placeholder\"\n          @change=\"handleInputChange\"\n          @update:model-value=\"handleInput\"\n          @blur=\"isInputFocused = false\"\n          @focus=\"isInputFocused = true\"\n        />\n\n        <Select\n          v-bind=\"selectAttrs\"\n          single\n          hide-search\n          prevent-empty\n          class=\"stash-input-options__select tw-min-w-20\"\n          data-test=\"stash-input-options|select\"\n          :class=\"classes.select\"\n          :no-truncate=\"noTruncate\"\n          :options=\"options\"\n          :model-value=\"selectedOption\"\n          :disabled=\"props.isDisabled || props.disabled\"\n          @update:model-value=\"handleSelectChange\"\n        />\n      </div>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <!-- @slot Hint slot for rendering text below the input -->\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style module>\n  .input input {\n    border-bottom-right-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  .select :global(.stash-select__content) {\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n  }\n\n  .select:global(.stash-select--active .stash-select__content) {\n    min-width: 0;\n  }\n\n  .has-error input,\n  .has-error input:hover:not(:focus),\n  .has-error :global(.stash-select__content),\n  .has-error :global(.stash-select__content:hover:not(:focus)) {\n    border-color: var(--color-red-500);\n  }\n</style>\n"],"names":["props","__props","emit","__emit","attrs","useAttrs","slots","useSlots","classes","useCssModule","internalInput","ref","isInputFocused","selectedOption","selectAttrs","computed","disabled","displayBy","trackBy","handleInput","val","handleInputChange","handleSelectChange","watchEffect","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DE,UAAMA,IAAQC,GAQRC,IAAOC,GAiBPC,IAAQC,KACRC,IAAQC,KACRC,IAAUC,KACVC,IAAgBC,KAChBC,IAAiBD,EAAI,EAAK,GAC1BE,IAAiBF,KAEjBG,IAAcC,EAAS,MAAM;AACjC,YAAM,EAAE,UAAAC,GAAU,WAAAC,GAAW,SAAAC,EAAA,IAAYd;AAElC,aAAA,EAAE,UAAAY,GAAU,WAAAC,GAAW,SAAAC;IAAQ,CACvC;AAGD,aAASC,EAAYC,GAAuB;AAC5B,MAAAV,EAAA,QAAQ,OAAOU,CAAG,GAEhClB,EAAK,sBAAsB;AAAA,QACzB,OAAOQ,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP;AAAA,IACH;AAGA,aAASQ,IAAoB;AAC3B,MAAAnB,EAAK,UAAU;AAAA,QACb,OAAOQ,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP;AAAA,IACH;AAEA,aAASS,EAAmBF,GAAc;AACxC,MAAAP,EAAe,QAAQO,GAEvBlB,EAAK,UAAU;AAAA,QACb,OAAOQ,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP,GACDX,EAAK,sBAAsB;AAAA,QACzB,OAAOQ,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP;AAAA,IACH;AAwBA,QAtBAU,EAAY,MAAM;AACZ,MAACV,EAAe,UACHA,EAAA,QAAQb,EAAM,QAAQ,CAAC;AAAA,IACxC,CACD,GAEDwB;AAAA,MACE,MAAMxB,EAAM,WAAW;AAAA,MACvB,MAAM;AACU,QAAAU,EAAA,QAAQV,EAAM,WAAW;AAAA,MACzC;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA,GAGpBwB;AAAA,MACE,MAAMxB,EAAM,WAAW;AAAA,MACvB,MAAM;AACW,QAAAa,EAAA,QAAQb,EAAM,WAAW;AAAA,MAC1C;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA,GAGhBI,EAAM;AACF,YAAA,IAAI,MAAM,kEAAkE;AAGpF,QAAIA,EAAM;AACF,YAAA,IAAI,MAAM,uEAAuE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"InputOptions.js","sources":["../src/components/InputOptions/InputOptions.vue"],"sourcesContent":["<script lang=\"ts\">\n  import Field, { type FieldProps } from '../Field/Field.vue';\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  type Option = any;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  type SelectedOption = any;\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  export interface InputOptionsProps extends FieldProps {\n    /**\n     * The current value inclusive of the input & select\n     */\n    modelValue?: { value: string; option?: SelectedOption };\n\n    /**\n     * Input type\n     */\n    type?: string extends 'button' | 'checkbox' | 'radio' | 'submit' ? never : string;\n\n    /**\n     * Prevents the Selected Option from being truncated, if true\n     */\n    noTruncate?: boolean;\n\n    /**\n     * Options for the select\n     */\n    options?: Option[];\n\n    /**\n     * Placeholder text for the input\n     * **Note:** placeholders should be used to display examples; they should not be used as labels because they are not accessible as labels. If a real label cannot be used, use the `aria-label` attribute.\n     */\n    placeholder?: string;\n\n    /**\n     * If `options` are an object, this is what prop to use for display.\n     */\n    displayBy?: string;\n\n    /**\n     * Default field to track selected options by.\n     */\n    trackBy?: string;\n  }\n</script>\n\n<script lang=\"ts\" setup>\n  import { ref, useAttrs, useCssModule, useSlots, watch, watchEffect } from 'vue';\n\n  import Input from '../Input/Input.vue';\n  import Select from '../Select/Select.vue';\n\n  defineOptions({\n    name: 'll-input-options',\n  });\n\n  const props = withDefaults(defineProps<InputOptionsProps>(), {\n    modelValue: () => ({ value: '', option: undefined }),\n    noTruncate: false,\n    options: () => [],\n    type: 'text',\n    placeholder: undefined,\n    displayBy: undefined,\n    trackBy: undefined,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the model value changes\n     */\n    (\n      e: 'update:model-value',\n      v: { value?: string; option?: SelectedOption; isValueChange: boolean; type: 'input' | 'select' },\n    ): void;\n    /**\n     * Emitted when either the input or select changes\n     */\n    (\n      e: 'change',\n      v: { value?: string; option?: SelectedOption; isValueChange: boolean; type: 'input' | 'select' },\n    ): void;\n  }>();\n\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const classes = useCssModule();\n  const internalInput = ref<string>();\n  const isInputFocused = ref(false);\n  const selectedOption = ref<Option | undefined>();\n\n  // Input value changed\n  function handleInput(val?: string | number) {\n    internalInput.value = String(val);\n\n    emit('update:model-value', {\n      value: internalInput.value,\n      option: selectedOption.value,\n      isValueChange: true,\n      type: 'input',\n    });\n  }\n\n  // Input blurred\n  function handleInputChange() {\n    emit('change', {\n      value: internalInput.value,\n      option: selectedOption.value,\n      isValueChange: true,\n      type: 'input',\n    });\n  }\n\n  function handleSelectChange(val?: Option) {\n    selectedOption.value = val;\n\n    emit('change', {\n      value: internalInput.value,\n      option: selectedOption.value,\n      isValueChange: false,\n      type: 'select',\n    });\n    emit('update:model-value', {\n      value: internalInput.value,\n      option: selectedOption.value,\n      isValueChange: false,\n      type: 'select',\n    });\n  }\n\n  watchEffect(() => {\n    if (!selectedOption.value) {\n      selectedOption.value = props.options[0];\n    }\n  });\n\n  watch(\n    () => props.modelValue.value,\n    () => {\n      internalInput.value = props.modelValue.value;\n    },\n    { immediate: true },\n  );\n\n  watch(\n    () => props.modelValue.option,\n    () => {\n      selectedOption.value = props.modelValue.option;\n    },\n    { immediate: true },\n  );\n\n  if (attrs.value) {\n    throw new Error('ll-input-options: use :model-value or v-model instead of :value.');\n  }\n\n  if (attrs.onInput) {\n    throw new Error('ll-input-options: use the @update:model-value event instead of @input');\n  }\n</script>\n\n<template>\n  <Field v-bind=\"props\" class=\"stash-input-options\" data-test=\"stash-input-options\">\n    <template #default=\"{ fieldId, labelId }\">\n      <div v-if=\"props.isReadOnly\" class=\"tw-flex tw-h-input tw-items-center tw-text-sm\">\n        <span :id=\"fieldId\" :aria-labelledby=\"labelId\" class=\"tw-h-min\"\n          >{{ internalInput || 0 }} {{ selectedOption?.name }}</span\n        >\n      </div>\n      <div v-else class=\"tw-flex\" :class=\"{ [classes['has-error']]: !!props.errorText }\">\n        <Input\n          :id=\"fieldId\"\n          class=\"stash-input-options__input -tw-mr-[1px] tw-inline-block tw-flex-1\"\n          :class=\"[classes.input, { 'tw-z-control': isInputFocused }]\"\n          data-test=\"stash-input-options|input\"\n          :type=\"props.type\"\n          :model-value=\"internalInput\"\n          :disabled=\"props.isDisabled || props.disabled\"\n          :placeholder=\"props.placeholder\"\n          @change=\"handleInputChange\"\n          @update:model-value=\"handleInput\"\n          @blur=\"isInputFocused = false\"\n          @focus=\"isInputFocused = true\"\n        />\n\n        <Select\n          single\n          hide-search\n          prevent-empty\n          class=\"stash-input-options__select tw-min-w-20\"\n          data-test=\"stash-input-options|select\"\n          :class=\"classes.select\"\n          :no-truncate=\"noTruncate\"\n          :options=\"options\"\n          :model-value=\"selectedOption\"\n          :display-by=\"props.displayBy\"\n          :track-by=\"props.trackBy\"\n          :disabled=\"props.isDisabled || props.disabled\"\n          @update:model-value=\"handleSelectChange\"\n        />\n      </div>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <!-- @slot Hint slot for rendering text below the input -->\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style module>\n  .input input {\n    border-bottom-right-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  .select :global(.stash-select__content) {\n    border-bottom-left-radius: 0;\n    border-top-left-radius: 0;\n  }\n\n  .select:global(.stash-select--active .stash-select__content) {\n    min-width: 0;\n  }\n\n  .has-error input,\n  .has-error input:hover:not(:focus),\n  .has-error :global(.stash-select__content),\n  .has-error :global(.stash-select__content:hover:not(:focus)) {\n    border-color: var(--color-red-500);\n  }\n</style>\n"],"names":["props","__props","emit","__emit","attrs","useAttrs","slots","useSlots","classes","useCssModule","internalInput","ref","isInputFocused","selectedOption","handleInput","val","handleInputChange","handleSelectChange","watchEffect","watch"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2DE,UAAMA,IAAQC,GAURC,IAAOC,GAiBPC,IAAQC,KACRC,IAAQC,KACRC,IAAUC,KACVC,IAAgBC,KAChBC,IAAiBD,EAAI,EAAK,GAC1BE,IAAiBF;AAGvB,aAASG,EAAYC,GAAuB;AAC5B,MAAAL,EAAA,QAAQ,OAAOK,CAAG,GAEhCb,EAAK,sBAAsB;AAAA,QACzB,OAAOQ,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP;AAAA,IACH;AAGA,aAASG,IAAoB;AAC3B,MAAAd,EAAK,UAAU;AAAA,QACb,OAAOQ,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP;AAAA,IACH;AAEA,aAASI,EAAmBF,GAAc;AACxC,MAAAF,EAAe,QAAQE,GAEvBb,EAAK,UAAU;AAAA,QACb,OAAOQ,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP,GACDX,EAAK,sBAAsB;AAAA,QACzB,OAAOQ,EAAc;AAAA,QACrB,QAAQG,EAAe;AAAA,QACvB,eAAe;AAAA,QACf,MAAM;AAAA,MAAA,CACP;AAAA,IACH;AAwBA,QAtBAK,EAAY,MAAM;AACZ,MAACL,EAAe,UACHA,EAAA,QAAQb,EAAM,QAAQ,CAAC;AAAA,IACxC,CACD,GAEDmB;AAAA,MACE,MAAMnB,EAAM,WAAW;AAAA,MACvB,MAAM;AACU,QAAAU,EAAA,QAAQV,EAAM,WAAW;AAAA,MACzC;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA,GAGpBmB;AAAA,MACE,MAAMnB,EAAM,WAAW;AAAA,MACvB,MAAM;AACW,QAAAa,EAAA,QAAQb,EAAM,WAAW;AAAA,MAC1C;AAAA,MACA,EAAE,WAAW,GAAK;AAAA,IAAA,GAGhBI,EAAM;AACF,YAAA,IAAI,MAAM,kEAAkE;AAGpF,QAAIA,EAAM;AACF,YAAA,IAAI,MAAM,uEAAuE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/InputOptions.vue.d.ts

@@ -41,6 +41,8 @@ noTruncate: boolean;
 options: () => never[];
 type: string;
 placeholder: undefined;
+displayBy: undefined;
+trackBy: undefined;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:model-value": (v: {
 value?: string | undefined;
@@ -63,6 +65,8 @@ noTruncate: boolean;
 options: () => never[];
 type: string;
 placeholder: undefined;
+displayBy: undefined;
+trackBy: undefined;
 }>>> & Readonly<{
 onChange?: ((v: {
 value?: string | undefined;
@@ -78,7 +82,9 @@ type: 'input' | 'select';
 }) => any) | undefined;
 }>, {
 type: string;
+trackBy: string;
 placeholder: string;
+displayBy: string;
 options: any[];
 modelValue: {
 value: string;
@@ -169,13 +175,13 @@ export declare interface InputOptionsProps extends FieldProps {
      */
     placeholder?: string;
     /**
-     * Indicates whether the inputOptions is disabled.
+     * If `options` are an object, this is what prop to use for display.
      */
-    disabled?: boolean;
+    displayBy?: string;
     /**
-     * Indicates whether the inputOptions is read-only.
+     * Default field to track selected options by.
      */
-    isReadOnly?: boolean;
+    trackBy?: string;
 }
 
 declare type Option_2 = any;

package/dist/ListView.vue.d.ts

@@ -2016,6 +2016,10 @@ type: PropType<string>;
 id: {
 type: PropType<string>;
 };
+trackBy: {
+type: PropType<string>;
+default: undefined;
+};
 isRequired: {
 type: PropType<boolean>;
 };
@@ -2044,6 +2048,10 @@ placeholder: {
 type: PropType<string>;
 default: undefined;
 };
+displayBy: {
+type: PropType<string>;
+default: undefined;
+};
 options: {
 type: PropType<any[]>;
 default: () => never[];
@@ -2055,9 +2063,7 @@ option?: any;
 }>;
 default: () => {
 value: string;
-option: undefined; /**
-* Validation schema function that returns an object
-*/
+option: undefined;
 };
 };
 noTruncate: {
@@ -2073,20 +2079,20 @@ type: "input" | "select";
 }) => any) | undefined;
 "onUpdate:model-value"?: ((v: {
 value?: string | undefined;
-option?: any;
-isValueChange: boolean;
-type: "input" | "select"; /**
+option?: any; /**
 * Hide the Select All checkbox for bulk actions
 */
+isValueChange: boolean;
+type: "input" | "select";
 }) => any) | undefined;
 }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:model-value": (v: {
 value?: string | undefined;
-option?: any;
-isValueChange: boolean;
-type: "input" | "select"; /**
+option?: any; /**
 * Hide the Select All checkbox for bulk actions
 */
+isValueChange: boolean;
+type: "input" | "select";
 }) => void;
 change: (v: {
 value?: string | undefined;
@@ -2096,7 +2102,9 @@ type: "input" | "select";
 }) => void;
 }, PublicProps, {
 type: string;
+trackBy: string;
 placeholder: string;
+displayBy: string;
 options: any[];
 modelValue: {
 value: string;
@@ -2127,6 +2135,10 @@ type: PropType<string>;
 id: {
 type: PropType<string>;
 };
+trackBy: {
+type: PropType<string>;
+default: undefined;
+};
 isRequired: {
 type: PropType<boolean>;
 };
@@ -2155,6 +2167,10 @@ placeholder: {
 type: PropType<string>;
 default: undefined;
 };
+displayBy: {
+type: PropType<string>;
+default: undefined;
+};
 options: {
 type: PropType<any[]>;
 default: () => never[];
@@ -2166,9 +2182,7 @@ option?: any;
 }>;
 default: () => {
 value: string;
-option: undefined; /**
-* Validation schema function that returns an object
-*/
+option: undefined;
 };
 };
 noTruncate: {
@@ -2184,15 +2198,17 @@ type: "input" | "select";
 }) => any) | undefined;
 "onUpdate:model-value"?: ((v: {
 value?: string | undefined;
-option?: any;
-isValueChange: boolean;
-type: "input" | "select"; /**
+option?: any; /**
 * Hide the Select All checkbox for bulk actions
 */
+isValueChange: boolean;
+type: "input" | "select";
 }) => any) | undefined;
 }>, {}, {}, {}, {}, {
 type: string;
+trackBy: string;
 placeholder: string;
+displayBy: string;
 options: any[];
 modelValue: {
 value: string;
@@ -2220,6 +2236,10 @@ type: PropType<string>;
 id: {
 type: PropType<string>;
 };
+trackBy: {
+type: PropType<string>;
+default: undefined;
+};
 isRequired: {
 type: PropType<boolean>;
 };
@@ -2248,6 +2268,10 @@ placeholder: {
 type: PropType<string>;
 default: undefined;
 };
+displayBy: {
+type: PropType<string>;
+default: undefined;
+};
 options: {
 type: PropType<any[]>;
 default: () => never[];
@@ -2259,9 +2283,7 @@ option?: any;
 }>;
 default: () => {
 value: string;
-option: undefined; /**
-* Validation schema function that returns an object
-*/
+option: undefined;
 };
 };
 noTruncate: {
@@ -2277,20 +2299,20 @@ type: "input" | "select";
 }) => any) | undefined;
 "onUpdate:model-value"?: ((v: {
 value?: string | undefined;
-option?: any;
-isValueChange: boolean;
-type: "input" | "select"; /**
+option?: any; /**
 * Hide the Select All checkbox for bulk actions
 */
+isValueChange: boolean;
+type: "input" | "select";
 }) => any) | undefined;
 }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:model-value": (v: {
 value?: string | undefined;
-option?: any;
-isValueChange: boolean;
-type: "input" | "select"; /**
+option?: any; /**
 * Hide the Select All checkbox for bulk actions
 */
+isValueChange: boolean;
+type: "input" | "select";
 }) => void;
 change: (v: {
 value?: string | undefined;
@@ -2300,7 +2322,9 @@ type: "input" | "select";
 }) => void;
 }, string, {
 type: string;
+trackBy: string;
 placeholder: string;
+displayBy: string;
 options: any[];
 modelValue: {
 value: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leaflink/stash",
-  "version": "50.0.7",
+  "version": "50.0.8",
   "description": "LeafLink's design system.",
   "homepage": "https://stash.leaflink.com",
   "main": "./dist/index.ts",