@leaflink/stash 50.0.4 → 50.0.6

package/dist/InputOptions.js

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

package/dist/InputOptions.vue.d.ts

@@ -45,6 +45,7 @@ label: undefined;
 type: string;
 placeholder: undefined;
 disabled: boolean;
+isReadOnly: boolean;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:model-value": (v: {
 value?: string | undefined;
@@ -71,6 +72,7 @@ label: undefined;
 type: string;
 placeholder: undefined;
 disabled: boolean;
+isReadOnly: boolean;
 }>>> & Readonly<{
 onChange?: ((v: {
 value?: string | undefined;
@@ -90,6 +92,7 @@ disabled: boolean;
 label: string;
 errorText: string;
 hintText: string;
+isReadOnly: boolean;
 placeholder: string;
 options: any[];
 modelValue: {
@@ -143,6 +146,10 @@ export declare interface InputOptionsProps {
      * Indicates whether the inputOptions is disabled.
      */
     disabled?: boolean;
+    /**
+     * Indicates whether the inputOptions is read-only.
+     */
+    isReadOnly?: boolean;
 }
 
 declare type Option_2 = any;

package/dist/ListView.vue.d.ts

@@ -1788,6 +1788,10 @@ hintText: {
 type: PropType<string>;
 default: undefined;
 };
+isReadOnly: {
+type: PropType<boolean>;
+default: boolean;
+};
 showOptionalInLabel: {
 type: PropType<boolean>;
 };
@@ -1826,6 +1830,7 @@ label: string;
 id: string;
 errorText: string;
 hintText: string;
+isReadOnly: boolean;
 placeholder: string;
 modelValue: string | number;
 value: string | number | null;
@@ -1865,6 +1870,10 @@ hintText: {
 type: PropType<string>;
 default: undefined;
 };
+isReadOnly: {
+type: PropType<boolean>;
+default: boolean;
+};
 showOptionalInLabel: {
 type: PropType<boolean>;
 };
@@ -1898,6 +1907,7 @@ label: string;
 id: string;
 errorText: string;
 hintText: string;
+isReadOnly: boolean;
 placeholder: string;
 modelValue: string | number;
 value: string | number | null;
@@ -1934,6 +1944,10 @@ hintText: {
 type: PropType<string>;
 default: undefined;
 };
+isReadOnly: {
+type: PropType<boolean>;
+default: boolean;
+};
 showOptionalInLabel: {
 type: PropType<boolean>;
 };
@@ -1972,6 +1986,7 @@ label: string;
 id: string;
 errorText: string;
 hintText: string;
+isReadOnly: boolean;
 placeholder: string;
 modelValue: string | number;
 value: string | number | null;
@@ -2005,6 +2020,10 @@ hintText: {
 type: PropType<string>;
 default: undefined;
 };
+isReadOnly: {
+type: PropType<boolean>;
+default: boolean;
+};
 placeholder: {
 type: PropType<string>;
 default: undefined;
@@ -2059,6 +2078,7 @@ disabled: boolean;
 label: string;
 errorText: string;
 hintText: string;
+isReadOnly: boolean;
 placeholder: string;
 options: any[];
 modelValue: {
@@ -2094,6 +2114,10 @@ hintText: {
 type: PropType<string>;
 default: undefined;
 };
+isReadOnly: {
+type: PropType<boolean>;
+default: boolean;
+};
 placeholder: {
 type: PropType<string>;
 default: undefined;
@@ -2135,6 +2159,7 @@ disabled: boolean;
 label: string;
 errorText: string;
 hintText: string;
+isReadOnly: boolean;
 placeholder: string;
 options: any[];
 modelValue: {
@@ -2167,6 +2192,10 @@ hintText: {
 type: PropType<string>;
 default: undefined;
 };
+isReadOnly: {
+type: PropType<boolean>;
+default: boolean;
+};
 placeholder: {
 type: PropType<string>;
 default: undefined;
@@ -2221,6 +2250,7 @@ disabled: boolean;
 label: string;
 errorText: string;
 hintText: string;
+isReadOnly: boolean;
 placeholder: string;
 options: any[];
 modelValue: {
@@ -2332,6 +2362,9 @@ hintText: {
 type: PropType<string>;
 default: string;
 };
+isReadOnly: {
+type: PropType<boolean>;
+};
 showOptionalInLabel: {
 type: PropType<boolean>;
 default: boolean;
@@ -2540,6 +2573,9 @@ hintText: {
 type: PropType<string>;
 default: string;
 };
+isReadOnly: {
+type: PropType<boolean>;
+};
 showOptionalInLabel: {
 type: PropType<boolean>;
 default: boolean;
@@ -2738,6 +2774,9 @@ hintText: {
 type: PropType<string>;
 default: string;
 };
+isReadOnly: {
+type: PropType<boolean>;
+};
 showOptionalInLabel: {
 type: PropType<boolean>;
 default: boolean;
@@ -4364,6 +4403,10 @@ hintText: {
 type: PropType<string>;
 default: undefined;
 };
+isReadOnly: {
+type: PropType<boolean>;
+default: boolean;
+};
 showOptionalInLabel: {
 type: PropType<boolean>;
 };
@@ -4402,6 +4445,7 @@ label: string;
 id: string;
 errorText: string;
 hintText: string;
+isReadOnly: boolean;
 placeholder: string;
 modelValue: string | number;
 value: string | number | null;
@@ -4441,6 +4485,10 @@ hintText: {
 type: PropType<string>;
 default: undefined;
 };
+isReadOnly: {
+type: PropType<boolean>;
+default: boolean;
+};
 showOptionalInLabel: {
 type: PropType<boolean>;
 };
@@ -4474,6 +4522,7 @@ label: string;
 id: string;
 errorText: string;
 hintText: string;
+isReadOnly: boolean;
 placeholder: string;
 modelValue: string | number;
 value: string | number | null;
@@ -4510,6 +4559,10 @@ hintText: {
 type: PropType<string>;
 default: undefined;
 };
+isReadOnly: {
+type: PropType<boolean>;
+default: boolean;
+};
 showOptionalInLabel: {
 type: PropType<boolean>;
 };
@@ -4548,6 +4601,7 @@ label: string;
 id: string;
 errorText: string;
 hintText: string;
+isReadOnly: boolean;
 placeholder: string;
 modelValue: string | number;
 value: string | number | null;

package/dist/RadioGroup.js

@@ -1,6 +1,6 @@
 import { defineComponent as $, inject as k, useCssModule as V, openBlock as o, createElementBlock as n, normalizeClass as p, unref as e, Fragment as B, renderList as I, createElementVNode as i, toDisplayString as h, provide as C, computed as v, createBlock as g, withCtx as M, renderSlot as T, resolveDynamicComponent as G } from "vue";
 import E from "lodash-es/uniqueId";
-import { _ as O } from "./Field.vue_vue_type_script_setup_true_lang-DjxUvSRF.js";
+import { _ as O } from "./Field.vue_vue_type_script_setup_true_lang--tBfZB2K.js";
 import { R as y } from "./RadioGroup.keys-CqfiKkNz.js";
 import { _ as x } from "./_plugin-vue_export-helper-CHgC5LLL.js";
 const W = ["id", "name", "value", "checked", "disabled"], j = ["for"], q = /* @__PURE__ */ $({