@leaflink/stash 50.0.4 → 50.0.6

package/dist/Field.js

@@ -1,4 +1,4 @@
-import { _ as f } from "./Field.vue_vue_type_script_setup_true_lang-DjxUvSRF.js";
+import { _ as f } from "./Field.vue_vue_type_script_setup_true_lang--tBfZB2K.js";
 export {
   f as default
 };

package/dist/Field.vue.d.ts

@@ -71,6 +71,8 @@ showOptionalInLabel: boolean;
         fieldErrorId: string;
         hasError: boolean;
         isRequired: boolean;
+        isReadOnly: boolean;
+        disabled: boolean;
         labelId: string;
         showOptionalInLabel: boolean;
     }): any;

package/dist/Field.vue_vue_type_script_setup_true_lang--tBfZB2K.js

@@ -0,0 +1,85 @@
+import { defineComponent as I, useAttrs as B, useSlots as T, computed as t, openBlock as a, createBlock as c, resolveDynamicComponent as O, mergeProps as R, unref as d, withCtx as m, createTextVNode as k, toDisplayString as o, createCommentVNode as w, renderSlot as b, createElementBlock as r } from "vue";
+import i from "lodash-es/uniqueId";
+import { _ as q } from "./Label.vue_vue_type_script_setup_true_lang-C4JKdqvC.js";
+const E = ["id"], S = {
+  key: 2,
+  class: "stash-field-hint tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs",
+  "data-test": "stash-field-hint"
+}, g = {
+  key: 3,
+  class: "stash-field-hint tw-mt-1 tw-whitespace-pre-line tw-text-xs",
+  "data-test": "stash-field-hint"
+}, $ = /* @__PURE__ */ I({
+  inheritAttrs: !1,
+  __name: "Field",
+  props: {
+    addBottomSpace: { type: Boolean, default: !1 },
+    errorText: { default: void 0 },
+    hintText: { default: void 0 },
+    id: { default: void 0 },
+    errorId: { default: void 0 },
+    isReadOnly: { type: Boolean },
+    isRequired: { type: Boolean, default: !1 },
+    label: { default: void 0 },
+    showOptionalInLabel: { type: Boolean, default: !1 },
+    fieldset: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  setup(y) {
+    const e = y, v = B(), l = T(), n = t(() => e.id || i("stash-field-")), f = t(() => e.errorId || i("stash-field-error-")), h = t(() => i("stash-field-label-")), p = t(() => !!e.errorText), x = t(() => e.fieldset ? "fieldset" : "div"), _ = t(() => {
+      const { placeholder: s, ...u } = v;
+      return u;
+    });
+    return (s, u) => (a(), c(O(x.value), R({
+      "data-test": "stash-field",
+      class: ["stash-field", [
+        { "tw-p-0": e.fieldset },
+        { "tw-mb-9": e.addBottomSpace && !e.errorText && !e.hintText && !d(l).hint },
+        { "tw-mb-4": e.addBottomSpace && (e.errorText || e.hintText || d(l).hint) },
+        { "stash-field--disabled": e.disabled },
+        { "stash-field--is-read-only": e.isReadOnly }
+      ]]
+    }, _.value), {
+      default: m(() => [
+        e.label ? (a(), c(q, {
+          key: 0,
+          id: h.value,
+          for: n.value,
+          "has-error": p.value,
+          "is-required": s.isRequired,
+          "show-optional": e.showOptionalInLabel,
+          legend: e.fieldset,
+          disabled: e.disabled
+        }, {
+          default: m(() => [
+            k(o(e.label), 1)
+          ]),
+          _: 1
+        }, 8, ["id", "for", "has-error", "is-required", "show-optional", "legend", "disabled"])) : w("", !0),
+        b(s.$slots, "default", {
+          fieldId: n.value,
+          fieldErrorId: f.value,
+          hasError: p.value,
+          isRequired: s.isRequired,
+          isReadOnly: e.isReadOnly,
+          disabled: e.disabled,
+          labelId: h.value,
+          showOptionalInLabel: e.showOptionalInLabel
+        }),
+        e.errorText ? (a(), r("span", {
+          key: 1,
+          id: f.value,
+          class: "stash-field-error tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs tw-text-red-500",
+          "data-test": "stash-field-error"
+        }, o(e.errorText), 9, E)) : e.hintText && !e.isReadOnly ? (a(), r("span", S, o(e.hintText), 1)) : d(l).hint && !e.isReadOnly ? (a(), r("div", g, [
+          b(s.$slots, "hint")
+        ])) : w("", !0)
+      ]),
+      _: 3
+    }, 16, ["class"]));
+  }
+});
+export {
+  $ as _
+};
+//# sourceMappingURL=Field.vue_vue_type_script_setup_true_lang--tBfZB2K.js.map

package/dist/{Field.vue_vue_type_script_setup_true_lang-DjxUvSRF.js.map → Field.vue_vue_type_script_setup_true_lang--tBfZB2K.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Field.vue_vue_type_script_setup_true_lang-DjxUvSRF.js","sources":["../src/components/Field/Field.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, useAttrs, useSlots } from 'vue';\n\n  import Label from '../Label/Label.vue';\n\n  defineOptions({\n    inheritAttrs: false,\n  });\n\n  export interface FieldProps {\n    /**\n     * Adds spacing under the field that is consistent whether hint/error text is displayed.\n     */\n    addBottomSpace?: boolean;\n\n    /**\n     * Error text to display. Replaces `hintText` (if provided) & adds error styling.\n     */\n    errorText?: string;\n\n    /**\n     * Displays text below the input; hidden when the isReadOnly prop is truthy.\n     */\n    hintText?: string;\n\n    /**\n     * ID for the Label and Input; must be unique\n     */\n    id?: string;\n\n    /**\n     * ID for the error text element; useful for aria-errormessage\n     */\n    errorId?: string;\n\n    /**\n     * Whether it's a readonly field.\n     */\n    isReadOnly?: boolean;\n\n    /**\n     * Whether the field is required.\n     */\n    isRequired?: boolean;\n\n    /**\n     * Label to render above the input.\n     */\n    label?: string;\n\n    /**\n     * Show \"(optional)\" to the right of the label text\n     */\n    showOptionalInLabel?: boolean;\n\n    /**\n     * Indicates wheter the field is a fieldset or not\n     */\n    fieldset?: boolean;\n\n    /**\n     * Indicates whether the field is disabled.\n     */\n    disabled?: boolean;\n  }\n\n  const props = withDefaults(defineProps<FieldProps>(), {\n    addBottomSpace: false,\n    errorText: undefined,\n    hintText: undefined,\n    id: undefined,\n    errorId: undefined,\n    isRequired: false,\n    label: undefined,\n    showOptionalInLabel: false,\n    fieldset: false,\n    disabled: false,\n  });\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const fieldId = computed(() => props.id || uniqueId('stash-field-'));\n  const fieldErrorId = computed(() => props.errorId || uniqueId('stash-field-error-'));\n  const labelId = computed(() => uniqueId('stash-field-label-'));\n  const hasError = computed(() => !!props.errorText);\n  const wrapperElement = computed(() => (props.fieldset ? 'fieldset' : 'div'));\n\n  // Any attributes that are unique to form elements, you want to exclude from\n  // being bound from the root element.\n  const rootAttrs = computed(() => {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { placeholder, ...otherAttrs } = attrs;\n\n    return otherAttrs;\n  });\n</script>\n\n<template>\n  <component\n    :is=\"wrapperElement\"\n    data-test=\"stash-field\"\n    class=\"stash-field\"\n    :class=\"[\n      { 'tw-p-0': props.fieldset },\n      { 'tw-mb-9': props.addBottomSpace && !props.errorText && !props.hintText && !slots.hint },\n      { 'tw-mb-4': props.addBottomSpace && (props.errorText || props.hintText || slots.hint) },\n      { 'stash-field--disabled': props.disabled },\n    ]\"\n    v-bind=\"rootAttrs\"\n  >\n    <Label\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      :for=\"fieldId\"\n      :has-error=\"hasError\"\n      :is-required=\"isRequired\"\n      :show-optional=\"props.showOptionalInLabel\"\n      :legend=\"props.fieldset\"\n      :disabled=\"props.disabled\"\n    >\n      {{ props.label }}\n    </Label>\n\n    <!-- @slot for the form field; the Label can also be rendered here instead of using the label prop -->\n    <template v-if=\"props.isReadOnly\">\n      <div :aria-labelledby=\"labelId\">\n        <slot\n          :field-id=\"fieldId\"\n          :field-error-id=\"fieldErrorId\"\n          :has-error=\"hasError\"\n          :is-required=\"isRequired\"\n          :label-id=\"labelId\"\n          :show-optional-in-label=\"props.showOptionalInLabel\"\n        ></slot>\n      </div>\n    </template>\n    <template v-else>\n      <slot\n        :field-id=\"fieldId\"\n        :field-error-id=\"fieldErrorId\"\n        :has-error=\"hasError\"\n        :is-required=\"isRequired\"\n        :label-id=\"labelId\"\n        :show-optional-in-label=\"props.showOptionalInLabel\"\n      ></slot>\n    </template>\n\n    <span\n      v-if=\"props.errorText\"\n      :id=\"fieldErrorId\"\n      class=\"stash-field-error tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs tw-text-red-500\"\n      data-test=\"stash-field-error\"\n    >\n      {{ props.errorText }}\n    </span>\n\n    <span\n      v-else-if=\"props.hintText && !props.isReadOnly\"\n      class=\"stash-field-hint tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs\"\n      data-test=\"stash-field-hint\"\n    >\n      {{ props.hintText }}\n    </span>\n\n    <div\n      v-else-if=\"slots.hint && !props.isReadOnly\"\n      class=\"stash-field-hint tw-mt-1 tw-whitespace-pre-line tw-text-xs\"\n      data-test=\"stash-field-hint\"\n    >\n      <!-- @slot for displaying hint text below the field -->\n      <slot name=\"hint\"></slot>\n    </div>\n  </component>\n</template>\n"],"names":["props","__props","attrs","useAttrs","slots","useSlots","fieldId","computed","uniqueId","fieldErrorId","labelId","hasError","wrapperElement","rootAttrs","placeholder","otherAttrs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEE,UAAMA,IAAQC,GAYRC,IAAQC,KACRC,IAAQC,KACRC,IAAUC,EAAS,MAAMP,EAAM,MAAMQ,EAAS,cAAc,CAAC,GAC7DC,IAAeF,EAAS,MAAMP,EAAM,WAAWQ,EAAS,oBAAoB,CAAC,GAC7EE,IAAUH,EAAS,MAAMC,EAAS,oBAAoB,CAAC,GACvDG,IAAWJ,EAAS,MAAM,CAAC,CAACP,EAAM,SAAS,GAC3CY,IAAiBL,EAAS,MAAOP,EAAM,WAAW,aAAa,KAAM,GAIrEa,IAAYN,EAAS,MAAM;AAE/B,YAAM,EAAE,aAAAO,GAAa,GAAGC,EAAA,IAAeb;AAEhC,aAAAa;AAAA,IAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Field.vue_vue_type_script_setup_true_lang--tBfZB2K.js","sources":["../src/components/Field/Field.vue"],"sourcesContent":["<script setup lang=\"ts\">\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, useAttrs, useSlots } from 'vue';\n\n  import Label from '../Label/Label.vue';\n\n  defineOptions({\n    inheritAttrs: false,\n  });\n\n  export interface FieldProps {\n    /**\n     * Adds spacing under the field that is consistent whether hint/error text is displayed.\n     */\n    addBottomSpace?: boolean;\n\n    /**\n     * Error text to display. Replaces `hintText` (if provided) & adds error styling.\n     */\n    errorText?: string;\n\n    /**\n     * Displays text below the input; hidden when the isReadOnly prop is truthy.\n     */\n    hintText?: string;\n\n    /**\n     * ID for the Label and Input; must be unique\n     */\n    id?: string;\n\n    /**\n     * ID for the error text element; useful for aria-errormessage\n     */\n    errorId?: string;\n\n    /**\n     * Whether it's a readonly field.\n     */\n    isReadOnly?: boolean;\n\n    /**\n     * Whether the field is required.\n     */\n    isRequired?: boolean;\n\n    /**\n     * Label to render above the input.\n     */\n    label?: string;\n\n    /**\n     * Show \"(optional)\" to the right of the label text\n     */\n    showOptionalInLabel?: boolean;\n\n    /**\n     * Indicates wheter the field is a fieldset or not\n     */\n    fieldset?: boolean;\n\n    /**\n     * Indicates whether the field is disabled.\n     */\n    disabled?: boolean;\n  }\n\n  const props = withDefaults(defineProps<FieldProps>(), {\n    addBottomSpace: false,\n    errorText: undefined,\n    hintText: undefined,\n    id: undefined,\n    errorId: undefined,\n    isRequired: false,\n    label: undefined,\n    showOptionalInLabel: false,\n    fieldset: false,\n    disabled: false,\n  });\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const fieldId = computed(() => props.id || uniqueId('stash-field-'));\n  const fieldErrorId = computed(() => props.errorId || uniqueId('stash-field-error-'));\n  const labelId = computed(() => uniqueId('stash-field-label-'));\n  const hasError = computed(() => !!props.errorText);\n  const wrapperElement = computed(() => (props.fieldset ? 'fieldset' : 'div'));\n\n  // Any attributes that are unique to form elements, you want to exclude from\n  // being bound from the root element.\n  const rootAttrs = computed(() => {\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    const { placeholder, ...otherAttrs } = attrs;\n\n    return otherAttrs;\n  });\n</script>\n\n<template>\n  <component\n    :is=\"wrapperElement\"\n    data-test=\"stash-field\"\n    class=\"stash-field\"\n    :class=\"[\n      { 'tw-p-0': props.fieldset },\n      { 'tw-mb-9': props.addBottomSpace && !props.errorText && !props.hintText && !slots.hint },\n      { 'tw-mb-4': props.addBottomSpace && (props.errorText || props.hintText || slots.hint) },\n      { 'stash-field--disabled': props.disabled },\n      { 'stash-field--is-read-only': props.isReadOnly },\n    ]\"\n    v-bind=\"rootAttrs\"\n  >\n    <Label\n      v-if=\"props.label\"\n      :id=\"labelId\"\n      :for=\"fieldId\"\n      :has-error=\"hasError\"\n      :is-required=\"isRequired\"\n      :show-optional=\"props.showOptionalInLabel\"\n      :legend=\"props.fieldset\"\n      :disabled=\"props.disabled\"\n    >\n      {{ props.label }}\n    </Label>\n\n    <!-- @slot for the form field; the Label can also be rendered here instead of using the label prop -->\n    <slot\n      :field-id=\"fieldId\"\n      :field-error-id=\"fieldErrorId\"\n      :has-error=\"hasError\"\n      :is-required=\"isRequired\"\n      :is-read-only=\"props.isReadOnly\"\n      :disabled=\"props.disabled\"\n      :label-id=\"labelId\"\n      :show-optional-in-label=\"props.showOptionalInLabel\"\n    ></slot>\n\n    <span\n      v-if=\"props.errorText\"\n      :id=\"fieldErrorId\"\n      class=\"stash-field-error tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs tw-text-red-500\"\n      data-test=\"stash-field-error\"\n    >\n      {{ props.errorText }}\n    </span>\n\n    <span\n      v-else-if=\"props.hintText && !props.isReadOnly\"\n      class=\"stash-field-hint tw-mt-1 tw-block tw-whitespace-pre-line tw-text-xs\"\n      data-test=\"stash-field-hint\"\n    >\n      {{ props.hintText }}\n    </span>\n\n    <div\n      v-else-if=\"slots.hint && !props.isReadOnly\"\n      class=\"stash-field-hint tw-mt-1 tw-whitespace-pre-line tw-text-xs\"\n      data-test=\"stash-field-hint\"\n    >\n      <!-- @slot for displaying hint text below the field -->\n      <slot name=\"hint\"></slot>\n    </div>\n  </component>\n</template>\n"],"names":["props","__props","attrs","useAttrs","slots","useSlots","fieldId","computed","uniqueId","fieldErrorId","labelId","hasError","wrapperElement","rootAttrs","placeholder","otherAttrs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEE,UAAMA,IAAQC,GAYRC,IAAQC,KACRC,IAAQC,KACRC,IAAUC,EAAS,MAAMP,EAAM,MAAMQ,EAAS,cAAc,CAAC,GAC7DC,IAAeF,EAAS,MAAMP,EAAM,WAAWQ,EAAS,oBAAoB,CAAC,GAC7EE,IAAUH,EAAS,MAAMC,EAAS,oBAAoB,CAAC,GACvDG,IAAWJ,EAAS,MAAM,CAAC,CAACP,EAAM,SAAS,GAC3CY,IAAiBL,EAAS,MAAOP,EAAM,WAAW,aAAa,KAAM,GAIrEa,IAAYN,EAAS,MAAM;AAE/B,YAAM,EAAE,aAAAO,GAAa,GAAGC,EAAA,IAAeb;AAEhC,aAAAa;AAAA,IAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/FilterSelect.js

@@ -1,6 +1,6 @@
 import { defineComponent as $, computed as p, openBlock as u, createBlock as C, withCtx as i, createElementVNode as s, createElementBlock as d, withDirectives as f, vModelCheckbox as v, createVNode as _, withKeys as h, createTextVNode as b, toDisplayString as x, unref as A, createCommentVNode as B, Fragment as E, renderList as K } from "vue";
 import { t as N } from "./locale.js";
-import { _ as F } from "./Field.vue_vue_type_script_setup_true_lang-DjxUvSRF.js";
+import { _ as F } from "./Field.vue_vue_type_script_setup_true_lang--tBfZB2K.js";
 import y from "./FilterChip.js";
 const D = { class: "tw-flex tw-flex-wrap tw-gap-1.5" }, O = ["id"], U = ["for"], I = ["id", "value"], L = ["for"], z = /* @__PURE__ */ $({
   __name: "FilterSelect",

package/dist/Filters.vue.d.ts

@@ -515,6 +515,10 @@ hintText: {
 type: PropType<string>;
 default: undefined;
 };
+isReadOnly: {
+type: PropType<boolean>;
+default: boolean;
+};
 showOptionalInLabel: {
 type: PropType<boolean>;
 };
@@ -553,6 +557,7 @@ label: string;
 id: string;
 errorText: string;
 hintText: string;
+isReadOnly: boolean;
 placeholder: string;
 modelValue: string | number;
 value: string | number | null;
@@ -592,6 +597,10 @@ hintText: {
 type: PropType<string>;
 default: undefined;
 };
+isReadOnly: {
+type: PropType<boolean>;
+default: boolean;
+};
 showOptionalInLabel: {
 type: PropType<boolean>;
 };
@@ -625,6 +634,7 @@ label: string;
 id: string;
 errorText: string;
 hintText: string;
+isReadOnly: boolean;
 placeholder: string;
 modelValue: string | number;
 value: string | number | null;
@@ -661,6 +671,10 @@ hintText: {
 type: PropType<string>;
 default: undefined;
 };
+isReadOnly: {
+type: PropType<boolean>;
+default: boolean;
+};
 showOptionalInLabel: {
 type: PropType<boolean>;
 };
@@ -699,6 +713,7 @@ label: string;
 id: string;
 errorText: string;
 hintText: string;
+isReadOnly: boolean;
 placeholder: string;
 modelValue: string | number;
 value: string | number | null;
@@ -732,6 +747,10 @@ hintText: {
 type: PropType<string>;
 default: undefined;
 };
+isReadOnly: {
+type: PropType<boolean>;
+default: boolean;
+};
 placeholder: {
 type: PropType<string>;
 default: undefined;
@@ -786,6 +805,7 @@ disabled: boolean;
 label: string;
 errorText: string;
 hintText: string;
+isReadOnly: boolean;
 placeholder: string;
 options: any[];
 modelValue: {
@@ -821,6 +841,10 @@ hintText: {
 type: PropType<string>;
 default: undefined;
 };
+isReadOnly: {
+type: PropType<boolean>;
+default: boolean;
+};
 placeholder: {
 type: PropType<string>;
 default: undefined;
@@ -862,6 +886,7 @@ disabled: boolean;
 label: string;
 errorText: string;
 hintText: string;
+isReadOnly: boolean;
 placeholder: string;
 options: any[];
 modelValue: {
@@ -894,6 +919,10 @@ hintText: {
 type: PropType<string>;
 default: undefined;
 };
+isReadOnly: {
+type: PropType<boolean>;
+default: boolean;
+};
 placeholder: {
 type: PropType<string>;
 default: undefined;
@@ -948,6 +977,7 @@ disabled: boolean;
 label: string;
 errorText: string;
 hintText: string;
+isReadOnly: boolean;
 placeholder: string;
 options: any[];
 modelValue: {
@@ -1059,6 +1089,9 @@ hintText: {
 type: PropType<string>;
 default: string;
 };
+isReadOnly: {
+type: PropType<boolean>;
+};
 showOptionalInLabel: {
 type: PropType<boolean>;
 default: boolean;
@@ -1267,6 +1300,9 @@ hintText: {
 type: PropType<string>;
 default: string;
 };
+isReadOnly: {
+type: PropType<boolean>;
+};
 showOptionalInLabel: {
 type: PropType<boolean>;
 default: boolean;
@@ -1465,6 +1501,9 @@ hintText: {
 type: PropType<string>;
 default: string;
 };
+isReadOnly: {
+type: PropType<boolean>;
+};
 showOptionalInLabel: {
 type: PropType<boolean>;
 default: boolean;

package/dist/Input.js

@@ -1,10 +1,10 @@
-import { defineComponent as U, useSlots as G, useCssModule as L, useAttrs as O, ref as f, computed as v, watchEffect as W, onMounted as j, openBlock as m, createBlock as V, mergeProps as k, unref as l, createSlots as q, withCtx as N, createElementVNode as x, withDirectives as H, vModelDynamic as J, createElementBlock as B, normalizeClass as y, renderSlot as h, createCommentVNode as C } from "vue";
-import I from "lodash-es/isNil";
-import { convertDecimal as $, sanitizeDecimal as K, decimalSeparator as b } from "./utils/i18n.js";
-import { _ as Q } from "./Field.vue_vue_type_script_setup_true_lang-DjxUvSRF.js";
-import R from "./Icon.js";
-import { _ as X } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Y = { class: "tw-relative" }, Z = ["id", "aria-errormessage", "aria-invalid", "autocomplete", "placeholder", "type", "disabled"], ee = /* @__PURE__ */ U({
+import { defineComponent as P, useSlots as U, useCssModule as G, useAttrs as L, ref as v, computed as c, watchEffect as W, onMounted as j, openBlock as f, createBlock as k, mergeProps as N, unref as l, createSlots as q, withCtx as x, createElementVNode as B, withDirectives as H, vModelDynamic as J, createElementBlock as C, normalizeClass as y, renderSlot as h, createCommentVNode as I } from "vue";
+import $ from "lodash-es/isNil";
+import { convertDecimal as E, sanitizeDecimal as K, decimalSeparator as b } from "./utils/i18n.js";
+import { _ as Q } from "./Field.vue_vue_type_script_setup_true_lang--tBfZB2K.js";
+import X from "./Icon.js";
+import { _ as Y } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const Z = { class: "tw-relative" }, ee = ["id", "aria-errormessage", "aria-invalid", "autocomplete", "placeholder", "type", "disabled", "readonly"], te = /* @__PURE__ */ P({
   name: "ll-input",
   inheritAttrs: !1,
   __name: "Input",
@@ -20,128 +20,131 @@ const Y = { class: "tw-relative" }, Z = ["id", "aria-errormessage", "aria-invali
     value: { default: null },
     type: { default: "text" },
     placeholder: { default: void 0 },
-    disabled: { type: Boolean, default: !1 }
+    disabled: { type: Boolean, default: !1 },
+    isReadOnly: { type: Boolean, default: !1 }
   },
   emits: ["update:model-value", "change", "focus", "blur"],
-  setup(E, { expose: S, emit: D }) {
-    const t = E, i = D, r = G(), s = L(), c = O(), _ = f();
-    S({ inputEl: _ });
-    const n = f(t.modelValue);
-    t.type === "number" && (t.modelValue || t.modelValue === 0) && (n.value = $(t.modelValue, b));
-    const p = f(!1), d = v(() => t.type === "number"), M = v(() => {
-      const o = { ...c };
+  setup(S, { expose: D, emit: M }) {
+    const e = S, m = M, r = U(), n = G(), p = L(), _ = v();
+    D({ inputEl: _ });
+    const s = v(e.modelValue);
+    e.type === "number" && (e.modelValue || e.modelValue === 0) && (s.value = E(e.modelValue, b));
+    const d = v(!1), g = c(() => e.isReadOnly || "readonly" in p && p.readonly !== !1), i = c(() => e.type === "number"), A = c(() => {
+      const o = { ...p };
       return delete o.class, o;
-    }), A = v(() => d.value || t.type === "password" && p.value ? "text" : t.type);
+    }), F = c(() => i.value || e.type === "password" && d.value ? "text" : e.type);
     W(() => {
-      n.value = g(t.modelValue);
+      s.value = V(e.modelValue);
     });
     function w(o = "", a = !1) {
-      if (!d.value)
+      if (!i.value)
         return o;
-      let e = o;
-      if (I(e) || `${e}`.length === 0) return "";
-      if (b !== "." && (e = $(e, ".")), a && (e === "." && (e = "0."), e.toString().startsWith("0.")))
-        return e;
-      if (!I(e) && `${e}`.length)
-        e = Intl.NumberFormat("en-US", {
+      let t = o;
+      if ($(t) || `${t}`.length === 0) return "";
+      if (b !== "." && (t = E(t, ".")), a && (t === "." && (t = "0."), t.toString().startsWith("0.")))
+        return t;
+      if (!$(t) && `${t}`.length)
+        t = Intl.NumberFormat("en-US", {
           style: "decimal",
           maximumFractionDigits: 7,
           useGrouping: !1
-        }).format(Number(e));
+        }).format(Number(t));
       else
         return "";
-      return isNaN(Number(e)) ? "" : parseFloat(e);
+      return isNaN(Number(t)) ? "" : parseFloat(t);
     }
-    function g(o) {
-      return d.value ? K(o, b) : o;
+    function V(o) {
+      return i.value ? K(o, b) : o;
     }
-    function F() {
-      const o = d.value ? w(n.value) : n.value;
-      i("change", o);
+    function O() {
+      const o = i.value ? w(s.value) : s.value;
+      m("change", o);
     }
     function T(o) {
       const a = o.target.value;
-      n.value = g(a);
-      const e = d.value ? w(n.value, !0) : a;
-      i("update:model-value", e);
+      s.value = V(a);
+      const t = i.value ? w(s.value, !0) : a;
+      m("update:model-value", t);
     }
     return j(() => {
-      if (t.value !== null)
+      if (e.value !== null)
         throw new Error("ll-input: use :model-value or v-model instead of :value.");
-      if (c.onInput)
+      if (p.onInput)
         throw new Error("ll-input: use the @update:model-value event instead of @input");
-    }), (o, a) => (m(), V(Q, k(t, {
-      class: ["stash-input", [l(s).root, l(c).class]],
+    }), (o, a) => (f(), k(Q, N(e, {
+      "is-read-only": g.value,
+      class: ["stash-input", [l(n).root, l(p).class]],
       "data-test": "ll-input"
     }), q({
-      default: N(({ fieldId: e, fieldErrorId: z, hasError: P }) => [
-        x("div", Y, [
-          H(x("input", k(M.value, {
-            id: e,
+      default: x(({ fieldId: t, fieldErrorId: R, hasError: z }) => [
+        B("div", Z, [
+          H(B("input", N(A.value, {
+            id: t,
             ref_key: "inputEl",
             ref: _,
-            "onUpdate:modelValue": a[0] || (a[0] = (u) => n.value = u),
-            "aria-errormessage": z,
-            "aria-invalid": P,
+            "onUpdate:modelValue": a[0] || (a[0] = (u) => s.value = u),
+            "aria-errormessage": R,
+            "aria-invalid": z,
             autocomplete: o.autocomplete,
-            placeholder: t.placeholder,
+            placeholder: e.placeholder,
             class: [
-              { [l(s)["input-prepended"]]: !!l(r).prepend },
-              { [l(s)["input-appended"]]: !!l(r).append || t.type === "password" },
-              { [l(s)["has-error"]]: !!t.errorText }
+              { [l(n)["input-prepended"]]: !!l(r).prepend },
+              { [l(n)["input-appended"]]: !!l(r).append || e.type === "password" },
+              { [l(n)["has-error"]]: !!e.errorText }
             ],
-            type: A.value,
-            disabled: t.disabled,
-            onChange: F,
+            type: F.value,
+            disabled: e.disabled,
+            readonly: g.value,
+            onChange: O,
             onInput: T,
-            onBlur: a[1] || (a[1] = (u) => i("blur", u)),
-            onFocus: a[2] || (a[2] = (u) => i("focus", u))
-          }), null, 16, Z), [
-            [J, n.value]
+            onBlur: a[1] || (a[1] = (u) => m("blur", u)),
+            onFocus: a[2] || (a[2] = (u) => m("focus", u))
+          }), null, 16, ee), [
+            [J, s.value]
           ]),
-          l(r).prepend ? (m(), B("div", {
+          l(r).prepend ? (f(), C("div", {
             key: 0,
-            class: y(["stash-input-prepend font-semibold", [l(s).symbol, l(s)["symbol--prepend"]]])
+            class: y(["stash-input-prepend font-semibold", [l(n).symbol, l(n)["symbol--prepend"]]])
           }, [
             h(o.$slots, "prepend")
-          ], 2)) : C("", !0),
-          l(r).append || t.type === "password" ? (m(), B("div", {
+          ], 2)) : I("", !0),
+          l(r).append || e.type === "password" ? (f(), C("div", {
             key: 1,
-            class: y(["stash-input-append font-semibold", [l(s).symbol, l(s)["symbol--append"]]])
+            class: y(["stash-input-append font-semibold", [l(n).symbol, l(n)["symbol--append"]]])
           }, [
-            l(r).append ? h(o.$slots, "append", { key: 0 }) : (m(), V(R, {
+            l(r).append ? h(o.$slots, "append", { key: 0 }) : (f(), k(X, {
               key: 1,
-              name: p.value ? "hide" : "show",
-              class: y(["tw-cursor-pointer", { "tw-text-ice-500": t.disabled }]),
-              "data-test": p.value ? "hide-password-icon" : "show-password-icon",
-              onClick: a[3] || (a[3] = (u) => p.value = !p.value)
+              name: d.value ? "hide" : "show",
+              class: y(["tw-cursor-pointer", { "tw-text-ice-500": e.disabled }]),
+              "data-test": d.value ? "hide-password-icon" : "show-password-icon",
+              onClick: a[3] || (a[3] = (u) => d.value = !d.value)
             }, null, 8, ["name", "class", "data-test"]))
-          ], 2)) : C("", !0)
+          ], 2)) : I("", !0)
         ])
       ]),
       _: 2
     }, [
       l(r).hint ? {
         name: "hint",
-        fn: N(() => [
+        fn: x(() => [
           h(o.$slots, "hint")
         ]),
         key: "0"
       } : void 0
-    ]), 1040, ["class"]));
+    ]), 1040, ["is-read-only", "class"]));
   }
-}), te = "_root_12641_2", oe = "_symbol_12641_46", le = {
-  root: te,
-  "has-error": "_has-error_12641_34",
-  "input-prepended": "_input-prepended_12641_38",
-  "input-appended": "_input-appended_12641_42",
-  symbol: oe,
-  "symbol--prepend": "_symbol--prepend_12641_57",
-  "symbol--append": "_symbol--append_12641_63"
-}, ae = {
-  $style: le
-}, ie = /* @__PURE__ */ X(ee, [["__cssModules", ae]]);
+}), oe = "_root_1tgop_2", le = "_symbol_1tgop_46", ae = {
+  root: oe,
+  "has-error": "_has-error_1tgop_34",
+  "input-prepended": "_input-prepended_1tgop_38",
+  "input-appended": "_input-appended_1tgop_42",
+  symbol: le,
+  "symbol--prepend": "_symbol--prepend_1tgop_57",
+  "symbol--append": "_symbol--append_1tgop_63"
+}, ne = {
+  $style: ae
+}, me = /* @__PURE__ */ Y(te, [["__cssModules", ne]]);
 export {
-  ie as default
+  me as default
 };
 //# sourceMappingURL=Input.js.map

package/dist/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import isNil from 'lodash-es/isNil';\n  import { computed, onMounted, ref, useAttrs, useCssModule, useSlots, watchEffect } from 'vue';\n\n  import { convertDecimal, decimalSeparator, sanitizeDecimal } from '../../utils/i18n';\n  import Field from '../Field/Field.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  export type InputValue = string | number | undefined;\n\n  export interface InputProps {\n    /**\n     * Adds spacing under the field that is consistent whether or not hint/error text is displayed.\n     */\n    addBottomSpace?: boolean;\n\n    /**\n     * Error text to display. Replaces `hintText` (if provided) & adds error styling.\n     */\n    errorText?: string;\n\n    /**\n     * Displays text below the input; hidden when the isReadOnly prop is truthy.\n     */\n    hintText?: string;\n\n    /**\n     * ID for the Label and Input; must be unique\n     */\n    id?: string;\n\n    /**\n     * Label to render above the input.\n     */\n    label?: string;\n\n    /**\n     * Show \"(optional)\" to the right of the label text\n     */\n    showOptionalInLabel?: boolean;\n\n    /**\n     * Autocomplete takes in a string of off or on\n     */\n    autocomplete?: string;\n\n    /**\n     * Value for the input element.\n     */\n    modelValue?: string | number;\n\n    /**\n     * @deprecated Use :model-value or v-model instead of :value.\n     */\n    value?: string | number | null;\n\n    /**\n     * Input type. Excludes certain types that have a dedicated component.\n     *\n     * Note: For distinguishing between text & number internally, passing `number`\n     * will still render an input with a type of `text` (for localization).\n     */\n    type?: string extends 'button' | 'checkbox' | 'radio' | 'submit' ? never : string;\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 input is disabled.\n     */\n    disabled?: boolean;\n  }\n\n  defineOptions({\n    name: 'll-input',\n    inheritAttrs: false,\n  });\n\n  const props = withDefaults(defineProps<InputProps>(), {\n    autocomplete: 'off',\n    type: 'text',\n    modelValue: '',\n    value: null,\n    errorText: undefined,\n    hintText: undefined,\n    label: undefined,\n    id: undefined,\n    placeholder: undefined,\n    disabled: false,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the input value changes.\n     */\n    (e: 'update:model-value', v: string | number): void;\n    /**\n     * Emitted when the input value changes.\n     */\n    (e: 'change', v: string | number): void;\n    /**\n     * Emitted when the input is focused\n     */\n    (e: 'focus', evt: Event): void;\n    /**\n     * Emitted when the input is blurred\n     */\n    (e: 'blur', evt: Event): void;\n  }>();\n\n  const slots = useSlots();\n  const classes = useCssModule();\n  const attrs = useAttrs();\n\n  // declare a ref to hold the element reference\n  // the name must match template ref value\n  const inputEl = ref<HTMLInputElement>();\n\n  // this exposes the input ref to any parent that renders the `Input` component\n  // and gives it a template ref, giving parent components access to the DOM element.\n  defineExpose({ inputEl });\n\n  const internalValue = ref<string | number>(props.modelValue);\n\n  if (props.type === 'number' && (props.modelValue || props.modelValue === 0)) {\n    internalValue.value = convertDecimal(props.modelValue, decimalSeparator);\n  }\n\n  const showPassword = ref(false);\n\n  const isNumber = computed(() => props.type === 'number');\n\n  const inputAttrs = computed(() => {\n    const tempAttrs = { ...attrs };\n\n    delete tempAttrs.class;\n\n    return tempAttrs;\n  });\n\n  const inputType = computed(() => {\n    // type 'number' is a special use case and requires\n    // that the type be 'text' to support internationalization\n    if (isNumber.value) {\n      return 'text';\n    }\n\n    if (props.type === 'password' && showPassword.value) {\n      return 'text';\n    }\n\n    return props.type;\n  });\n\n  watchEffect(() => {\n    internalValue.value = format(props.modelValue);\n  });\n\n  /**\n   * Converts the localized number to a valid number (to emit). i.e. 12,50 > 12.50\n   *\n   * @param {string|number} value - Number you want to parse.\n   * @returns {number|string} number or empty string (for empty input)\n   */\n  function parseNumber(value: string | number = '', isUserTyping = false): string | number {\n    // If this isn't a number input, we shouldn't be calling this function\n    if (!isNumber.value) {\n      return value;\n    }\n\n    let tempValue = value;\n\n    // If blank, just stop\n    if (isNil(tempValue) || `${tempValue}`.length === 0) return '';\n\n    // clean out different locale decimals\n    if (decimalSeparator !== '.') {\n      tempValue = convertDecimal(tempValue, '.');\n    }\n\n    // If the user is in the middle of an input, let them finish the number\n    if (isUserTyping) {\n      // Prefix values with a 0 if the user starts with a decimal point\n      if (tempValue === '.') tempValue = '0.';\n\n      // This is to prevent the parsing from correcting 0. to 0 and causing the value to be reset\n      if (tempValue.toString().startsWith('0.')) return tempValue;\n    }\n\n    // Empty or null values convert to 0 with NumberFormat, so return '';\n    if (!isNil(tempValue) && `${tempValue}`.length) {\n      tempValue = Intl.NumberFormat('en-US', {\n        style: 'decimal',\n        maximumFractionDigits: 7,\n        useGrouping: false,\n      }).format(Number(tempValue));\n    } else {\n      return '';\n    }\n\n    // Ensure valid number, otherwise clear value\n    return isNaN(Number(tempValue)) ? '' : parseFloat(tempValue);\n  }\n\n  /**\n   * Formats the input based on conditions\n   *\n   * @param {number|string} value - The value to format.\n   */\n  function format(value: string | number) {\n    if (isNumber.value) {\n      return sanitizeDecimal(value, decimalSeparator);\n    }\n\n    return value;\n  }\n\n  /**\n   * Fire after focusing out of input, if value has changed.\n   */\n  function handleChange() {\n    // Parse the final value on blur\n    const parsedValue = isNumber.value ? parseNumber(internalValue.value) : internalValue.value;\n    emit('change', parsedValue);\n  }\n\n  /**\n   * Fired when typing on input.\n   */\n  function handleInput(e: Event) {\n    const value = (e.target as HTMLInputElement).value;\n\n    // Update the internal value with a sanitized version\n    internalValue.value = format(value);\n\n    const parsedValue = isNumber.value ? parseNumber(internalValue.value, true) : value;\n\n    emit('update:model-value', parsedValue);\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\" class=\"stash-input\" :class=\"[classes.root, attrs.class]\" data-test=\"ll-input\">\n    <template #default=\"{ fieldId, fieldErrorId, hasError }\">\n      <div class=\"tw-relative\">\n        <input\n          v-bind=\"inputAttrs\"\n          :id=\"fieldId\"\n          ref=\"inputEl\"\n          v-model=\"internalValue\"\n          :aria-errormessage=\"fieldErrorId\"\n          :aria-invalid=\"hasError\"\n          :autocomplete=\"autocomplete\"\n          :placeholder=\"props.placeholder\"\n          :class=\"[\n            { [classes['input-prepended']]: !!slots.prepend },\n            { [classes['input-appended']]: !!slots.append || props.type === 'password' },\n            { [classes['has-error']]: !!props.errorText },\n          ]\"\n          :type=\"inputType\"\n          :disabled=\"props.disabled\"\n          @change=\"handleChange\"\n          @input=\"handleInput\"\n          @blur=\"(evt) => emit('blur', evt)\"\n          @focus=\"(evt) => emit('focus', evt)\"\n        />\n\n        <div\n          v-if=\"slots.prepend\"\n          class=\"stash-input-prepend font-semibold\"\n          :class=\"[classes.symbol, classes['symbol--prepend']]\"\n        >\n          <!-- @slot renders content on the left side of the input -->\n          <slot name=\"prepend\"> </slot>\n        </div>\n\n        <div\n          v-if=\"slots.append || props.type === 'password'\"\n          class=\"stash-input-append font-semibold\"\n          :class=\"[classes.symbol, classes['symbol--append']]\"\n        >\n          <!-- @slot renders content on the right side of the input -->\n          <slot v-if=\"slots.append\" name=\"append\"></slot>\n          <Icon\n            v-else\n            :name=\"showPassword ? 'hide' : 'show'\"\n            class=\"tw-cursor-pointer\"\n            :class=\"{ 'tw-text-ice-500': props.disabled }\"\n            :data-test=\"showPassword ? 'hide-password-icon' : 'show-password-icon'\"\n            @click=\"showPassword = !showPassword\"\n          />\n        </div>\n      </div>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style module>\n  .root {\n    position: relative;\n  }\n\n  .root input {\n    background: var(--color-white);\n    border: 1px solid var(--color-ice-500);\n    border-radius: theme('borderRadius.DEFAULT');\n    color: var(--color-ice-700);\n    display: block;\n    height: theme('height.input');\n    font-size: theme('fontSize.sm');\n    font-weight: theme('fontWeight.normal');\n    outline: none;\n    padding: 0 theme('spacing.3');\n    width: 100%;\n  }\n\n  .root input:hover {\n    border-color: var(--color-ice-500);\n  }\n\n  .root input:active,\n  .root input:focus {\n    border-color: var(--color-blue-500);\n  }\n\n  .root input::placeholder {\n    color: var(--color-ice-500);\n    opacity: 1;\n  }\n\n  .root input.has-error:not(:focus) {\n    border-color: var(--color-red-500);\n  }\n\n  .root input.input-prepended {\n    padding-left: 36px;\n  }\n\n  .root input.input-appended {\n    padding-right: 36px;\n  }\n\n  .symbol {\n    align-items: center;\n    display: flex;\n    height: theme('height.input');\n    justify-content: center;\n    overflow: hidden;\n    position: absolute;\n    top: 0;\n    width: theme('height.input');\n  }\n\n  .symbol--prepend {\n    border-bottom-left-radius: theme('borderRadius.DEFAULT');\n    border-top-left-radius: theme('borderRadius.DEFAULT');\n    left: 0;\n  }\n\n  .symbol--append {\n    border-bottom-right-radius: theme('borderRadius.DEFAULT');\n    border-top-right-radius: theme('borderRadius.DEFAULT');\n    right: 0;\n  }\n\n  .root input[disabled],\n  .root input[readonly] {\n    background-color: var(--color-ice-100) !important;\n    border-color: var(--color-ice-500) !important;\n    color: var(--color-ice-500) !important;\n    pointer-events: none;\n    outline-color: var(--color-ice-500) !important;\n\n    & + .symbol--prepend,\n    & + .symbol--append {\n      color: var(--color-ice-500);\n    }\n  }\n\n  .root input[disabled]:active,\n  .root input[readonly]:active,\n  .root input[disabled]:focus,\n  .root input[readonly]:focus {\n    box-shadow: none !important;\n  }\n\n  .root input[disabled]::placeholder,\n  .root input[readonly]::placeholder {\n    text-transform: none;\n  }\n</style>\n"],"names":["props","__props","emit","__emit","slots","useSlots","classes","useCssModule","attrs","useAttrs","inputEl","ref","__expose","internalValue","convertDecimal","decimalSeparator","showPassword","isNumber","computed","inputAttrs","tempAttrs","inputType","watchEffect","format","parseNumber","value","isUserTyping","tempValue","isNil","sanitizeDecimal","handleChange","parsedValue","handleInput","e","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAiFE,UAAMA,IAAQC,GAaRC,IAAOC,GAmBPC,IAAQC,KACRC,IAAUC,KACVC,IAAQC,KAIRC,IAAUC;AAIH,IAAAC,EAAA,EAAE,SAAAF,GAAS;AAElB,UAAAG,IAAgBF,EAAqBX,EAAM,UAAU;AAE3D,IAAIA,EAAM,SAAS,aAAaA,EAAM,cAAcA,EAAM,eAAe,OACvEa,EAAc,QAAQC,EAAed,EAAM,YAAYe,CAAgB;AAGnE,UAAAC,IAAeL,EAAI,EAAK,GAExBM,IAAWC,EAAS,MAAMlB,EAAM,SAAS,QAAQ,GAEjDmB,IAAaD,EAAS,MAAM;AAC1B,YAAAE,IAAY,EAAE,GAAGZ;AAEvB,oBAAOY,EAAU,OAEVA;AAAA,IAAA,CACR,GAEKC,IAAYH,EAAS,MAGrBD,EAAS,SAITjB,EAAM,SAAS,cAAcgB,EAAa,QACrC,SAGFhB,EAAM,IACd;AAED,IAAAsB,EAAY,MAAM;AACF,MAAAT,EAAA,QAAQU,EAAOvB,EAAM,UAAU;AAAA,IAAA,CAC9C;AAQD,aAASwB,EAAYC,IAAyB,IAAIC,IAAe,IAAwB;AAEnF,UAAA,CAACT,EAAS;AACL,eAAAQ;AAGT,UAAIE,IAAYF;AAGZ,UAAAG,EAAMD,CAAS,KAAK,GAAGA,CAAS,GAAG,WAAW,EAAU,QAAA;AAQ5D,UALIZ,MAAqB,QACXY,IAAAb,EAAea,GAAW,GAAG,IAIvCD,MAEEC,MAAc,QAAiBA,IAAA,OAG/BA,EAAU,SAAS,EAAE,WAAW,IAAI;AAAU,eAAAA;AAIpD,UAAI,CAACC,EAAMD,CAAS,KAAK,GAAGA,CAAS,GAAG;AAC1B,QAAAA,IAAA,KAAK,aAAa,SAAS;AAAA,UACrC,OAAO;AAAA,UACP,uBAAuB;AAAA,UACvB,aAAa;AAAA,QACd,CAAA,EAAE,OAAO,OAAOA,CAAS,CAAC;AAAA;AAEpB,eAAA;AAIT,aAAO,MAAM,OAAOA,CAAS,CAAC,IAAI,KAAK,WAAWA,CAAS;AAAA,IAC7D;AAOA,aAASJ,EAAOE,GAAwB;AACtC,aAAIR,EAAS,QACJY,EAAgBJ,GAAOV,CAAgB,IAGzCU;AAAA,IACT;AAKA,aAASK,IAAe;AAEtB,YAAMC,IAAcd,EAAS,QAAQO,EAAYX,EAAc,KAAK,IAAIA,EAAc;AACtF,MAAAX,EAAK,UAAU6B,CAAW;AAAA,IAC5B;AAKA,aAASC,EAAYC,GAAU;AACvB,YAAAR,IAASQ,EAAE,OAA4B;AAG/B,MAAApB,EAAA,QAAQU,EAAOE,CAAK;AAElC,YAAMM,IAAcd,EAAS,QAAQO,EAAYX,EAAc,OAAO,EAAI,IAAIY;AAE9E,MAAAvB,EAAK,sBAAsB6B,CAAW;AAAA,IACxC;AAEA,WAAAG,EAAU,MAAM;AACV,UAAAlC,EAAM,UAAU;AACZ,cAAA,IAAI,MAAM,0DAA0D;AAG5E,UAAIQ,EAAM;AACF,cAAA,IAAI,MAAM,+DAA+D;AAAA,IACjF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Input.js","sources":["../src/components/Input/Input.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import isNil from 'lodash-es/isNil';\n  import { computed, onMounted, ref, useAttrs, useCssModule, useSlots, watchEffect } from 'vue';\n\n  import { convertDecimal, decimalSeparator, sanitizeDecimal } from '../../utils/i18n';\n  import Field from '../Field/Field.vue';\n  import Icon from '../Icon/Icon.vue';\n\n  export type InputValue = string | number | undefined;\n\n  export interface InputProps {\n    /**\n     * Adds spacing under the field that is consistent whether or not hint/error text is displayed.\n     */\n    addBottomSpace?: boolean;\n\n    /**\n     * Error text to display. Replaces `hintText` (if provided) & adds error styling.\n     */\n    errorText?: string;\n\n    /**\n     * Displays text below the input; hidden when the isReadOnly prop is truthy.\n     */\n    hintText?: string;\n\n    /**\n     * ID for the Label and Input; must be unique\n     */\n    id?: string;\n\n    /**\n     * Label to render above the input.\n     */\n    label?: string;\n\n    /**\n     * Show \"(optional)\" to the right of the label text\n     */\n    showOptionalInLabel?: boolean;\n\n    /**\n     * Autocomplete takes in a string of off or on\n     */\n    autocomplete?: string;\n\n    /**\n     * Value for the input element.\n     */\n    modelValue?: string | number;\n\n    /**\n     * @deprecated Use :model-value or v-model instead of :value.\n     */\n    value?: string | number | null;\n\n    /**\n     * Input type. Excludes certain types that have a dedicated component.\n     *\n     * Note: For distinguishing between text & number internally, passing `number`\n     * will still render an input with a type of `text` (for localization).\n     */\n    type?: string extends 'button' | 'checkbox' | 'radio' | 'submit' ? never : string;\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 input is disabled.\n     */\n    disabled?: boolean;\n\n    /**\n     * Indicates whether the input is read-only.\n     */\n    isReadOnly?: boolean;\n  }\n\n  defineOptions({\n    name: 'll-input',\n    inheritAttrs: false,\n  });\n\n  const props = withDefaults(defineProps<InputProps>(), {\n    autocomplete: 'off',\n    type: 'text',\n    modelValue: '',\n    value: null,\n    errorText: undefined,\n    hintText: undefined,\n    label: undefined,\n    id: undefined,\n    placeholder: undefined,\n    disabled: false,\n    isReadOnly: false,\n  });\n\n  const emit = defineEmits<{\n    /**\n     * Emitted when the input value changes.\n     */\n    (e: 'update:model-value', v: string | number): void;\n    /**\n     * Emitted when the input value changes.\n     */\n    (e: 'change', v: string | number): void;\n    /**\n     * Emitted when the input is focused\n     */\n    (e: 'focus', evt: Event): void;\n    /**\n     * Emitted when the input is blurred\n     */\n    (e: 'blur', evt: Event): void;\n  }>();\n\n  const slots = useSlots();\n  const classes = useCssModule();\n  const attrs = useAttrs();\n\n  // declare a ref to hold the element reference\n  // the name must match template ref value\n  const inputEl = ref<HTMLInputElement>();\n\n  // this exposes the input ref to any parent that renders the `Input` component\n  // and gives it a template ref, giving parent components access to the DOM element.\n  defineExpose({ inputEl });\n\n  const internalValue = ref<string | number>(props.modelValue);\n\n  if (props.type === 'number' && (props.modelValue || props.modelValue === 0)) {\n    internalValue.value = convertDecimal(props.modelValue, decimalSeparator);\n  }\n\n  const showPassword = ref(false);\n\n  const isReadOnly = computed(() => props.isReadOnly || ('readonly' in attrs && attrs.readonly !== false));\n  const isNumber = computed(() => props.type === 'number');\n\n  const inputAttrs = computed(() => {\n    const tempAttrs = { ...attrs };\n\n    delete tempAttrs.class;\n\n    return tempAttrs;\n  });\n\n  const inputType = computed(() => {\n    // type 'number' is a special use case and requires\n    // that the type be 'text' to support internationalization\n    if (isNumber.value) {\n      return 'text';\n    }\n\n    if (props.type === 'password' && showPassword.value) {\n      return 'text';\n    }\n\n    return props.type;\n  });\n\n  watchEffect(() => {\n    internalValue.value = format(props.modelValue);\n  });\n\n  /**\n   * Converts the localized number to a valid number (to emit). i.e. 12,50 > 12.50\n   *\n   * @param {string|number} value - Number you want to parse.\n   * @returns {number|string} number or empty string (for empty input)\n   */\n  function parseNumber(value: string | number = '', isUserTyping = false): string | number {\n    // If this isn't a number input, we shouldn't be calling this function\n    if (!isNumber.value) {\n      return value;\n    }\n\n    let tempValue = value;\n\n    // If blank, just stop\n    if (isNil(tempValue) || `${tempValue}`.length === 0) return '';\n\n    // clean out different locale decimals\n    if (decimalSeparator !== '.') {\n      tempValue = convertDecimal(tempValue, '.');\n    }\n\n    // If the user is in the middle of an input, let them finish the number\n    if (isUserTyping) {\n      // Prefix values with a 0 if the user starts with a decimal point\n      if (tempValue === '.') tempValue = '0.';\n\n      // This is to prevent the parsing from correcting 0. to 0 and causing the value to be reset\n      if (tempValue.toString().startsWith('0.')) return tempValue;\n    }\n\n    // Empty or null values convert to 0 with NumberFormat, so return '';\n    if (!isNil(tempValue) && `${tempValue}`.length) {\n      tempValue = Intl.NumberFormat('en-US', {\n        style: 'decimal',\n        maximumFractionDigits: 7,\n        useGrouping: false,\n      }).format(Number(tempValue));\n    } else {\n      return '';\n    }\n\n    // Ensure valid number, otherwise clear value\n    return isNaN(Number(tempValue)) ? '' : parseFloat(tempValue);\n  }\n\n  /**\n   * Formats the input based on conditions\n   *\n   * @param {number|string} value - The value to format.\n   */\n  function format(value: string | number) {\n    if (isNumber.value) {\n      return sanitizeDecimal(value, decimalSeparator);\n    }\n\n    return value;\n  }\n\n  /**\n   * Fire after focusing out of input, if value has changed.\n   */\n  function handleChange() {\n    // Parse the final value on blur\n    const parsedValue = isNumber.value ? parseNumber(internalValue.value) : internalValue.value;\n    emit('change', parsedValue);\n  }\n\n  /**\n   * Fired when typing on input.\n   */\n  function handleInput(e: Event) {\n    const value = (e.target as HTMLInputElement).value;\n\n    // Update the internal value with a sanitized version\n    internalValue.value = format(value);\n\n    const parsedValue = isNumber.value ? parseNumber(internalValue.value, true) : value;\n\n    emit('update:model-value', parsedValue);\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\n    v-bind=\"props\"\n    :is-read-only=\"isReadOnly\"\n    class=\"stash-input\"\n    :class=\"[classes.root, attrs.class]\"\n    data-test=\"ll-input\"\n  >\n    <template #default=\"{ fieldId, fieldErrorId, hasError }\">\n      <div class=\"tw-relative\">\n        <input\n          v-bind=\"inputAttrs\"\n          :id=\"fieldId\"\n          ref=\"inputEl\"\n          v-model=\"internalValue\"\n          :aria-errormessage=\"fieldErrorId\"\n          :aria-invalid=\"hasError\"\n          :autocomplete=\"autocomplete\"\n          :placeholder=\"props.placeholder\"\n          :class=\"[\n            { [classes['input-prepended']]: !!slots.prepend },\n            { [classes['input-appended']]: !!slots.append || props.type === 'password' },\n            { [classes['has-error']]: !!props.errorText },\n          ]\"\n          :type=\"inputType\"\n          :disabled=\"props.disabled\"\n          :readonly=\"isReadOnly\"\n          @change=\"handleChange\"\n          @input=\"handleInput\"\n          @blur=\"(evt) => emit('blur', evt)\"\n          @focus=\"(evt) => emit('focus', evt)\"\n        />\n\n        <div\n          v-if=\"slots.prepend\"\n          class=\"stash-input-prepend font-semibold\"\n          :class=\"[classes.symbol, classes['symbol--prepend']]\"\n        >\n          <!-- @slot renders content on the left side of the input -->\n          <slot name=\"prepend\"> </slot>\n        </div>\n\n        <div\n          v-if=\"slots.append || props.type === 'password'\"\n          class=\"stash-input-append font-semibold\"\n          :class=\"[classes.symbol, classes['symbol--append']]\"\n        >\n          <!-- @slot renders content on the right side of the input -->\n          <slot v-if=\"slots.append\" name=\"append\"></slot>\n          <Icon\n            v-else\n            :name=\"showPassword ? 'hide' : 'show'\"\n            class=\"tw-cursor-pointer\"\n            :class=\"{ 'tw-text-ice-500': props.disabled }\"\n            :data-test=\"showPassword ? 'hide-password-icon' : 'show-password-icon'\"\n            @click=\"showPassword = !showPassword\"\n          />\n        </div>\n      </div>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style module>\n  .root {\n    position: relative;\n  }\n\n  .root input {\n    background: var(--color-white);\n    border: 1px solid var(--color-ice-500);\n    border-radius: theme('borderRadius.DEFAULT');\n    color: var(--color-ice-700);\n    display: block;\n    height: theme('height.input');\n    font-size: theme('fontSize.sm');\n    font-weight: theme('fontWeight.normal');\n    outline: none;\n    padding: 0 theme('spacing.3');\n    width: 100%;\n  }\n\n  .root input:hover {\n    border-color: var(--color-ice-500);\n  }\n\n  .root input:active,\n  .root input:focus {\n    border-color: var(--color-blue-500);\n  }\n\n  .root input::placeholder {\n    color: var(--color-ice-500);\n    opacity: 1;\n  }\n\n  .root input.has-error:not(:focus) {\n    border-color: var(--color-red-500);\n  }\n\n  .root input.input-prepended {\n    padding-left: 36px;\n  }\n\n  .root input.input-appended {\n    padding-right: 36px;\n  }\n\n  .symbol {\n    align-items: center;\n    display: flex;\n    height: theme('height.input');\n    justify-content: center;\n    overflow: hidden;\n    position: absolute;\n    top: 0;\n    width: theme('height.input');\n  }\n\n  .symbol--prepend {\n    border-bottom-left-radius: theme('borderRadius.DEFAULT');\n    border-top-left-radius: theme('borderRadius.DEFAULT');\n    left: 0;\n  }\n\n  .symbol--append {\n    border-bottom-right-radius: theme('borderRadius.DEFAULT');\n    border-top-right-radius: theme('borderRadius.DEFAULT');\n    right: 0;\n  }\n\n  .root input[disabled] {\n    background-color: var(--color-ice-100) !important;\n    border-color: var(--color-ice-500) !important;\n    color: var(--color-ice-500) !important;\n    pointer-events: none;\n    outline-color: var(--color-ice-500) !important;\n\n    & + .symbol--prepend,\n    & + .symbol--append {\n      color: var(--color-ice-500);\n    }\n  }\n\n  .root input[readonly] {\n    border-color: transparent;\n    background-color: transparent;\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  .root input[disabled]:active,\n  .root input[readonly]:active,\n  .root input[disabled]:focus,\n  .root input[readonly]:focus {\n    box-shadow: none !important;\n  }\n\n  .root input[disabled]::placeholder {\n    text-transform: none;\n  }\n</style>\n"],"names":["props","__props","emit","__emit","slots","useSlots","classes","useCssModule","attrs","useAttrs","inputEl","ref","__expose","internalValue","convertDecimal","decimalSeparator","showPassword","isReadOnly","computed","isNumber","inputAttrs","tempAttrs","inputType","watchEffect","format","parseNumber","value","isUserTyping","tempValue","isNil","sanitizeDecimal","handleChange","parsedValue","handleInput","e","onMounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFE,UAAMA,IAAQC,GAcRC,IAAOC,GAmBPC,IAAQC,KACRC,IAAUC,KACVC,IAAQC,KAIRC,IAAUC;AAIH,IAAAC,EAAA,EAAE,SAAAF,GAAS;AAElB,UAAAG,IAAgBF,EAAqBX,EAAM,UAAU;AAE3D,IAAIA,EAAM,SAAS,aAAaA,EAAM,cAAcA,EAAM,eAAe,OACvEa,EAAc,QAAQC,EAAed,EAAM,YAAYe,CAAgB;AAGnE,UAAAC,IAAeL,EAAI,EAAK,GAExBM,IAAaC,EAAS,MAAMlB,EAAM,cAAe,cAAcQ,KAASA,EAAM,aAAa,EAAM,GACjGW,IAAWD,EAAS,MAAMlB,EAAM,SAAS,QAAQ,GAEjDoB,IAAaF,EAAS,MAAM;AAC1B,YAAAG,IAAY,EAAE,GAAGb;AAEvB,oBAAOa,EAAU,OAEVA;AAAA,IAAA,CACR,GAEKC,IAAYJ,EAAS,MAGrBC,EAAS,SAITnB,EAAM,SAAS,cAAcgB,EAAa,QACrC,SAGFhB,EAAM,IACd;AAED,IAAAuB,EAAY,MAAM;AACF,MAAAV,EAAA,QAAQW,EAAOxB,EAAM,UAAU;AAAA,IAAA,CAC9C;AAQD,aAASyB,EAAYC,IAAyB,IAAIC,IAAe,IAAwB;AAEnF,UAAA,CAACR,EAAS;AACL,eAAAO;AAGT,UAAIE,IAAYF;AAGZ,UAAAG,EAAMD,CAAS,KAAK,GAAGA,CAAS,GAAG,WAAW,EAAU,QAAA;AAQ5D,UALIb,MAAqB,QACXa,IAAAd,EAAec,GAAW,GAAG,IAIvCD,MAEEC,MAAc,QAAiBA,IAAA,OAG/BA,EAAU,SAAS,EAAE,WAAW,IAAI;AAAU,eAAAA;AAIpD,UAAI,CAACC,EAAMD,CAAS,KAAK,GAAGA,CAAS,GAAG;AAC1B,QAAAA,IAAA,KAAK,aAAa,SAAS;AAAA,UACrC,OAAO;AAAA,UACP,uBAAuB;AAAA,UACvB,aAAa;AAAA,QACd,CAAA,EAAE,OAAO,OAAOA,CAAS,CAAC;AAAA;AAEpB,eAAA;AAIT,aAAO,MAAM,OAAOA,CAAS,CAAC,IAAI,KAAK,WAAWA,CAAS;AAAA,IAC7D;AAOA,aAASJ,EAAOE,GAAwB;AACtC,aAAIP,EAAS,QACJW,EAAgBJ,GAAOX,CAAgB,IAGzCW;AAAA,IACT;AAKA,aAASK,IAAe;AAEtB,YAAMC,IAAcb,EAAS,QAAQM,EAAYZ,EAAc,KAAK,IAAIA,EAAc;AACtF,MAAAX,EAAK,UAAU8B,CAAW;AAAA,IAC5B;AAKA,aAASC,EAAYC,GAAU;AACvB,YAAAR,IAASQ,EAAE,OAA4B;AAG/B,MAAArB,EAAA,QAAQW,EAAOE,CAAK;AAElC,YAAMM,IAAcb,EAAS,QAAQM,EAAYZ,EAAc,OAAO,EAAI,IAAIa;AAE9E,MAAAxB,EAAK,sBAAsB8B,CAAW;AAAA,IACxC;AAEA,WAAAG,EAAU,MAAM;AACV,UAAAnC,EAAM,UAAU;AACZ,cAAA,IAAI,MAAM,0DAA0D;AAG5E,UAAIQ,EAAM;AACF,cAAA,IAAI,MAAM,+DAA+D;AAAA,IACjF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/Input.vue.d.ts

@@ -44,6 +44,7 @@ label: undefined;
 id: undefined;
 placeholder: undefined;
 disabled: boolean;
+isReadOnly: boolean;
 }>>, {
 inputEl: Ref<HTMLInputElement | undefined, HTMLInputElement | undefined>;
 }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
@@ -62,6 +63,7 @@ label: undefined;
 id: undefined;
 placeholder: undefined;
 disabled: boolean;
+isReadOnly: boolean;
 }>>> & Readonly<{
 onBlur?: ((evt: Event) => any) | undefined;
 onChange?: ((v: string | number) => any) | undefined;
@@ -74,6 +76,7 @@ label: string;
 id: string;
 errorText: string;
 hintText: string;
+isReadOnly: boolean;
 placeholder: string;
 modelValue: string | number;
 value: string | number | null;
@@ -138,6 +141,10 @@ export declare interface InputProps {
      * Indicates whether the input is disabled.
      */
     disabled?: boolean;
+    /**
+     * Indicates whether the input is read-only.
+     */
+    isReadOnly?: boolean;
 }
 
 export declare type InputValue = string | number | undefined;