@leaflink/stash 50.0.6 → 50.0.7

package/dist/TextEditor.vue.d.ts

@@ -31,14 +31,6 @@ declare type __VLS_WithDefaults<P, D> = {
 declare const _default: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TextEditorProps>, {
 modelValue: string;
 placeholder: string;
-isReadOnly: boolean;
-addBottomSpace: boolean;
-errorText: undefined;
-hintText: undefined;
-id: undefined;
-isRequired: boolean;
-label: undefined;
-showOptionalInLabel: boolean;
 controls: () => never[];
 handlers: () => {};
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
@@ -48,14 +40,6 @@ focus: (editor: default_3) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TextEditorProps>, {
 modelValue: string;
 placeholder: string;
-isReadOnly: boolean;
-addBottomSpace: boolean;
-errorText: undefined;
-hintText: undefined;
-id: undefined;
-isRequired: boolean;
-label: undefined;
-showOptionalInLabel: boolean;
 controls: () => never[];
 handlers: () => {};
 }>>> & Readonly<{
@@ -63,21 +47,66 @@ onBlur?: ((editor: default_3) => any) | undefined;
 onFocus?: ((editor: default_3) => any) | undefined;
 "onUpdate:model-value"?: ((value: string) => any) | undefined;
 }>, {
-label: string;
-id: string;
 controls: TextEditorControls;
-isRequired: boolean;
-addBottomSpace: boolean;
-errorText: string;
-hintText: string;
-isReadOnly: boolean;
-showOptionalInLabel: boolean;
 placeholder: string;
 modelValue: string;
 handlers: TextEditorControlHandlerMap;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 export default _default;
 
+declare interface FieldProps {
+    /**
+     * Adds spacing under the field that is consistent whether hint/error text is displayed.
+     */
+    addBottomSpace?: boolean;
+    /**
+     * Error text to display. Replaces `hintText` (if provided) & adds error styling.
+     */
+    errorText?: string;
+    /**
+     * Displays text below the input; hidden when the isReadOnly prop is truthy.
+     */
+    hintText?: string;
+    /**
+     * ID for the Label and Input; must be unique
+     */
+    id?: string;
+    /**
+     * ID for the error text element; useful for aria-errormessage
+     */
+    errorId?: string;
+    /**
+     * Whether it's a readonly field.
+     */
+    isReadOnly?: boolean;
+    /**
+     * Whether the field is required.
+     */
+    isRequired?: boolean;
+    /**
+     * Label to render above the input.
+     */
+    label?: string;
+    /**
+     * Show "(optional)" to the right of the label text
+     */
+    showOptionalInLabel?: boolean;
+    /**
+     * Indicates wheter the field is a fieldset or not
+     */
+    fieldset?: boolean;
+    /**
+     * Indicates whether the field is disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * Indicates whether the field is disabled.
+     *
+     * @deprecated Use `isDisabled` instead.
+     */
+    disabled?: boolean;
+}
+
 declare type IconName = (typeof iconNames)[number];
 
 declare const iconNames: readonly ["action-dots", "activity", "alert-bell", "archive", "arrow-down", "arrow-left", "arrow-right", "arrow-up", "badge-discount", "badge-seller-elite", "badge-seller-power", "badge-seller-verified", "book-customer", "building-office", "bulk-add", "calendar-reschedule", "calendar", "caret-down", "caret-up", "change-log", "check", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle-check", "circle-close", "circle-dollar", "circle-empty", "circle-info", "circle-partial", "circle-percent", "circle-question-mark", "circle-status", "circle-warning", "clipboard-checkmark", "clipboard-inventory", "close", "combine", "compass", "contact", "contract", "copy", "credit-card", "credit-profile", "dashboard", "document-accept", "document-invoice", "document-recieved", "document-sent", "document-view", "document", "dolly", "download", "edit", "ellipsis", "envelope-open", "envelope", "equals", "export", "figma", "file-csv", "file", "filter-funnel", "filter-line", "flag", "folder", "folder-bar-graph", "folder-orders", "font-bold", "font-clear-format", "font-italic", "font-underline", "gear", "github", "globe", "graph-bar-chart", "graph-line-chart", "graph-pie-chart", "hazard", "hazard-outline", "headset-agent", "headset-mic", "heart-filled", "heart-outline", "help-question-mark", "hide", "history", "image", "import", "keyboard-return", "license-approved", "license-certificate", "lightbulb", "link-add", "link-unlink", "link", "list-bulleted", "list-items", "list-numbered", "loading-big", "loading-empty", "loading-small", "location", "lock-unlock", "lock", "logo-facebook", "logo-instagram", "logo-linkedin", "logo-ll", "logo-metrc", "logo-plaid", "logo-x", "logo-youtube", "logout", "medical", "megaphone-sound", "megaphone", "menu", "message-dispute", "message-reply", "message", "minus", "mj-leaf", "money", "note-add", "note", "open-in-new", "paperclip", "paper-plane", "performance", "phone", "plus", "preview", "print", "product-menu-manage", "product-menu-search", "product-menu", "queue-add", "queue", "recent", "refresh", "register", "reply", "report-download", "sample", "save", "scale-law", "scale-weight", "search", "seed-cycle", "share", "shop-bag-browse", "shop-bag-reorder", "shop-bag", "shop-basket", "shop-cart-add", "shop-cart", "show", "sign-dollar", "sign-percent", "sort", "split", "star-filled", "star-outline", "storefront", "submit", "swap-horizontal", "swap-vertical", "tag-star", "tag", "test-results", "ticket-star", "ticket", "tool-dropper", "tool-wrench", "transfer", "trashcan", "truck", "upload", "user-add", "user-admin", "user-check", "user", "view-card", "view-detailed", "view-list", "warehouse", "working"];
@@ -132,7 +161,7 @@ export declare type TextEditorIconMap = {
     };
 };
 
-export declare interface TextEditorProps {
+export declare interface TextEditorProps extends FieldProps {
     /**
      * The model value.
      */
@@ -149,42 +178,6 @@ export declare interface TextEditorProps {
      * An object map of custom handlers to pass to the Quill editor.
      */
     handlers?: TextEditorControlHandlerMap;
-    /**
-     * Adds spacing under the field that is consistent whether hint/error text is displayed.
-     */
-    addBottomSpace?: boolean;
-    /**
-     * Error text to display. Replaces `hintText` (if provided) & adds error styling.
-     */
-    errorText?: string;
-    /**
-     * Displays text below the input; hidden when the isReadOnly prop is truthy.
-     */
-    hintText?: string;
-    /**
-     * ID for the Label and Input; must be unique
-     */
-    id?: string;
-    /**
-     * Whether it's a readonly field.
-     */
-    isReadOnly?: boolean;
-    /**
-     * Whether the field is required.
-     */
-    isRequired?: boolean;
-    /**
-     * Label to render above the input.
-     */
-    label?: string;
-    /**
-     * Show "(optional)" to the right of the label text
-     */
-    showOptionalInLabel?: boolean;
-    /**
-     * Whether the field is disabled.
-     */
-    isDisabled?: boolean;
 }
 
 export { }

package/dist/Textarea.js

@@ -1,124 +1,127 @@
-import { defineComponent as S, useAttrs as k, useSlots as H, useCssModule as A, ref as _, computed as y, watch as I, onMounted as P, nextTick as V, onBeforeUnmount as $, openBlock as q, createBlock as j, mergeProps as g, unref as c, createSlots as D, withCtx as w, createElementVNode as F, renderSlot as L } from "vue";
-import N from "lodash-es/uniqueId";
-import { _ as U } from "./Field.vue_vue_type_script_setup_true_lang--tBfZB2K.js";
-import { _ as W } from "./_plugin-vue_export-helper-CHgC5LLL.js";
-const Y = ["id", "value", "placeholder", "disabled", "readonly"], G = /* @__PURE__ */ S({
+import { defineComponent as S, useAttrs as M, useSlots as k, useCssModule as H, ref as _, computed as x, watch as A, onMounted as I, nextTick as P, onBeforeUnmount as V, openBlock as $, createBlock as q, mergeProps as y, unref as p, createSlots as D, withCtx as g, createElementVNode as j, renderSlot as F } from "vue";
+import { _ as L } from "./Field.vue_vue_type_script_setup_true_lang-DEizIcDo.js";
+import { _ as N } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const U = ["id", "value", "placeholder", "disabled", "readonly"], W = /* @__PURE__ */ S({
   name: "ll-textarea",
   __name: "Textarea",
   props: {
-    label: { default: " " },
     modelValue: { default: "" },
     value: { default: null },
-    errorText: { default: "" },
-    hintText: { default: "" },
-    showOptionalInLabel: { type: Boolean, default: !1 },
     resize: { type: [Boolean, Object], default: !1 },
     placeholder: { default: void 0 },
-    disabled: { type: Boolean, default: !1 },
-    isReadOnly: { type: Boolean, default: !1 }
+    addBottomSpace: { type: Boolean },
+    errorText: {},
+    hintText: {},
+    id: {},
+    errorId: {},
+    isReadOnly: { type: Boolean },
+    isRequired: { type: Boolean },
+    label: {},
+    showOptionalInLabel: { type: Boolean },
+    fieldset: { type: Boolean },
+    isDisabled: { type: Boolean },
+    disabled: { type: Boolean }
   },
   emits: ["update:model-value"],
-  setup(b, { emit: z }) {
-    const B = N("textarea-"), r = k(), R = H(), m = A(), o = b, T = z, f = _(), i = _(), h = y(() => o.isReadOnly || "readonly" in r && r.readonly !== !1), O = y(() => {
-      const e = { ...r };
+  setup(w, { emit: b }) {
+    const d = M(), B = k(), m = H(), o = w, z = b, u = _(), l = _(), R = x(() => o.isReadOnly || "readonly" in d && d.readonly !== !1), T = x(() => {
+      const e = { ...d };
       return delete e["data-test"], delete e.class, e;
     });
-    I(
+    A(
       () => o.resize,
       (e) => {
         var t;
-        e ? v() : (t = i.value) == null || t.disconnect();
+        e ? h() : (t = l.value) == null || t.disconnect();
       }
     );
-    const C = (e) => {
-      T("update:model-value", e.target.value);
-    }, v = () => {
-      i.value || !f.value || (i.value = new ResizeObserver(([e]) => {
-        const { target: t } = e, s = x(f.value) || document.documentElement, { scrollTop: a } = s;
+    const O = (e) => {
+      z("update:model-value", e.target.value);
+    }, h = () => {
+      l.value || !u.value || (l.value = new ResizeObserver(([e]) => {
+        const { target: t } = e, s = v(u.value) || document.documentElement, { scrollTop: a } = s;
         let n = 0;
         if (s === document.documentElement) {
-          const { top: l, height: d } = E(t), { innerHeight: u } = window;
-          n = Math.max(l + d - (u + a), 0);
+          const { top: r, height: i } = C(t), { innerHeight: c } = window;
+          n = Math.max(r + i - (c + a), 0);
         } else {
-          const { top: l, height: d } = t.getBoundingClientRect(), { top: u } = s.getBoundingClientRect(), { offsetHeight: p } = s, M = l - u;
-          n = Math.max(M + d - p, 0);
+          const { top: r, height: i } = t.getBoundingClientRect(), { top: c } = s.getBoundingClientRect(), { offsetHeight: f } = s, E = r - c;
+          n = Math.max(E + i - f, 0);
         }
         n && requestAnimationFrame(() => {
           s.scrollTop = a + n;
         });
-      }), i.value.observe(f.value));
-    }, x = (e) => {
+      }), l.value.observe(u.value));
+    }, v = (e) => {
       const t = e.parentElement;
       if (!t)
         return null;
       const { overflowY: s } = getComputedStyle(t);
-      return s !== "visible" ? t : t === document.body ? document.documentElement : x(t);
-    }, E = (e) => {
+      return s !== "visible" ? t : t === document.body ? document.documentElement : v(t);
+    }, C = (e) => {
       const { offsetWidth: t, offsetHeight: s } = e;
       let a = 0, n = 0;
-      const l = function({ offsetLeft: d, offsetTop: u, offsetParent: p }) {
-        a += d, n += u, p && l(p);
+      const r = function({ offsetLeft: i, offsetTop: c, offsetParent: f }) {
+        a += i, n += c, f && r(f);
       };
-      return l(e), {
+      return r(e), {
         top: n,
         left: a,
         width: t,
         height: s
       };
     };
-    return P(async () => {
+    return I(async () => {
       var e;
       if (o.value !== null)
         throw new Error("ll-input: use :model-value or v-model instead of :value.");
-      if (r.onInput)
+      if (d.onInput)
         throw new Error("ll-input: use the @update:model-value event instead of @input");
-      (typeof o.resize == "boolean" && o.resize || (e = o.resize) != null && e.forceBrowserScroll) && (await V(), v());
-    }), $(() => {
+      (typeof o.resize == "boolean" && o.resize || (e = o.resize) != null && e.forceBrowserScroll) && (await P(), h());
+    }), V(() => {
       var e;
-      (e = i.value) == null || e.disconnect();
-    }), (e, t) => (q(), j(U, g(o, {
-      id: c(B),
-      "is-read-only": h.value,
-      class: ["stash-textarea", [c(m).root, c(r).class]],
+      (e = l.value) == null || e.disconnect();
+    }), (e, t) => ($(), q(L, y(o, {
+      class: ["stash-textarea", [p(m).root]],
       "data-test": "stash-textarea"
     }), D({
-      default: w(({ fieldId: s, hasError: a }) => [
-        F("textarea", g({
+      default: g(({ fieldId: s, hasError: a }) => [
+        j("textarea", y({
           id: s,
           ref_key: "textareaRef",
-          ref: f,
+          ref: u,
           class: [
-            c(m).textarea,
+            p(m).textarea,
             { "stash-textarea--error": a, "tw-resize-y": o.resize, "tw-resize-none": !o.resize }
           ],
           value: o.modelValue,
           "data-test": "stash-textarea|textarea",
           placeholder: o.placeholder
-        }, O.value, {
+        }, T.value, {
           disabled: o.disabled,
-          readonly: h.value,
-          onInput: C
-        }), null, 16, Y)
+          readonly: R.value,
+          onInput: O
+        }), null, 16, U)
       ]),
       _: 2
     }, [
-      c(R).hint ? {
+      p(B).hint ? {
         name: "hint",
-        fn: w(() => [
-          L(e.$slots, "hint")
+        fn: g(() => [
+          F(e.$slots, "hint")
         ]),
         key: "0"
       } : void 0
-    ]), 1040, ["id", "is-read-only", "class"]));
+    ]), 1040, ["class"]));
   }
-}), J = "_root_1sns8_2", K = "_textarea_1sns8_7", Q = {
-  root: J,
-  textarea: K,
+}), Y = "_root_1sns8_2", G = "_textarea_1sns8_7", J = {
+  root: Y,
+  textarea: G,
   "stash-textarea--error": "_stash-textarea--error_1sns8_28"
-}, X = {
-  $style: Q
-}, se = /* @__PURE__ */ W(G, [["__cssModules", X]]);
+}, K = {
+  $style: J
+}, ee = /* @__PURE__ */ N(W, [["__cssModules", K]]);
 export {
-  se as default
+  ee as default
 };
 //# sourceMappingURL=Textarea.js.map

package/dist/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import uniqueId from 'lodash-es/uniqueId';\n  import { computed, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, useCssModule, useSlots, watch } from 'vue';\n\n  import Field from '../Field/Field.vue';\n\n  export interface TextareaResizeOptions {\n    /**\n     * It will automatically scroll the page down when it reaches the bottom of the viewport/element\n     */\n    forceBrowserScroll: boolean;\n  }\n\n  export interface TextAreaProps {\n    /**\n     * Label text for the textarea element.\n     */\n    label?: string;\n\n    /**\n     * Value for the textarea element.\n     */\n    modelValue?: string;\n\n    /**\n     * Deprecated. Use :model-value or v-model instead of :value.\n     * @deprecated Use :model-value or v-model instead of :value.\n     */\n    value?: string | number | null;\n\n    /**\n     * Error text for the textarea element.\n     */\n    errorText?: string;\n\n    /**\n     * Hint text for the textarea element.\n     */\n    hintText?: string;\n\n    /**\n     * Render \"(optional)\" to the right of the label text\n     */\n    showOptionalInLabel?: boolean;\n\n    /**\n     * Allow textarea to be resizable vertically.\n     * Alternatively if you want to disable automatic scroll when resizing, you can set `{ forceBrowserScroll: false }`\n     */\n    resize?: boolean | TextareaResizeOptions;\n\n    /**\n     * Placeholder text for the textarea element.\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 textarea is disabled.\n     */\n    disabled?: boolean;\n\n    /**\n     * Indicates whether the textarea is read-only.\n     */\n    isReadOnly?: boolean;\n  }\n\n  defineOptions({\n    name: 'll-textarea',\n  });\n\n  /**\n   * Unique ID for the textarea, required for accessibility purposes\n   */\n  const id = uniqueId('textarea-');\n\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const props = withDefaults(defineProps<TextAreaProps>(), {\n    label: ' ',\n    modelValue: '',\n    value: null,\n    errorText: '',\n    hintText: '',\n    showOptionalInLabel: false,\n    resize: false,\n    placeholder: undefined,\n    disabled: false,\n    isReadOnly: false,\n  });\n\n  const emits = defineEmits<{\n    /**\n     * Emitted when the model value changes.\n     */\n    (e: 'update:model-value', value: string): void;\n  }>();\n\n  const textareaRef = ref<HTMLTextAreaElement>();\n  const observer = ref<ResizeObserver>();\n  const isReadOnly = computed(() => props.isReadOnly || ('readonly' in attrs && attrs.readonly !== false));\n\n  const inputAttrs = computed(() => {\n    const allAttrs = { ...attrs };\n\n    delete allAttrs['data-test'];\n    delete allAttrs.class;\n\n    return allAttrs;\n  });\n\n  watch(\n    () => props.resize,\n    (v) => {\n      v ? setupResizeObserver() : observer.value?.disconnect();\n    },\n  );\n\n  const onInput = (event: Event) => {\n    emits('update:model-value', (event.target as HTMLTextAreaElement).value);\n  };\n\n  const setupResizeObserver = () => {\n    if (observer.value || !textareaRef.value) {\n      return;\n    }\n\n    // the ResizeObserver will be in charge to detect if page needs to scroll when resizing the component\n    observer.value = new ResizeObserver(([entry]) => {\n      const { target } = entry;\n      const parent = findParentScrollable(textareaRef.value as HTMLTextAreaElement) || document.documentElement;\n\n      const { scrollTop: scrollPosition } = parent;\n      let offsetDiff = 0;\n\n      // checks if the closest parent element scrollable is the document page\n      if (parent === document.documentElement) {\n        const { top, height } = getOffsetClipRect(target as HTMLElement);\n        const { innerHeight: viewportHeight } = window;\n\n        offsetDiff = Math.max(top + height - (viewportHeight + scrollPosition), 0);\n      } else {\n        const { top, height } = (target as HTMLElement).getBoundingClientRect();\n        const { top: parentTop } = parent.getBoundingClientRect();\n        const { offsetHeight: parentHeight } = parent;\n        const offsetTop = top - parentTop;\n\n        offsetDiff = Math.max(offsetTop + height - parentHeight, 0);\n      }\n\n      if (offsetDiff) {\n        requestAnimationFrame(() => {\n          parent.scrollTop = scrollPosition + offsetDiff;\n        });\n      }\n    });\n\n    observer.value.observe(textareaRef.value);\n  };\n\n  /**\n   * Retrieve the closest parent that has a scroll. Defaults to the document page.\n   */\n  const findParentScrollable = (el: HTMLElement): HTMLElement | null => {\n    const parent = el.parentElement as HTMLElement;\n    if (!parent) {\n      return null;\n    }\n\n    const { overflowY } = getComputedStyle(parent);\n    if (overflowY !== 'visible') {\n      return parent;\n    }\n\n    if (parent === document.body) {\n      return document.documentElement;\n    }\n\n    return findParentScrollable(parent);\n  };\n\n  /**\n   * Retrieve element absolute positioning relative to the page.\n   */\n  const getOffsetClipRect = (el: HTMLElement) => {\n    const { offsetWidth: width, offsetHeight: height } = el;\n\n    let left = 0;\n    let top = 0;\n\n    const findPos = function ({ offsetLeft, offsetTop, offsetParent }: HTMLElement) {\n      left += offsetLeft;\n      top += offsetTop;\n\n      if (offsetParent) {\n        findPos(offsetParent as HTMLElement);\n      }\n    };\n\n    findPos(el);\n\n    return {\n      top,\n      left,\n      width,\n      height,\n    };\n  };\n\n  onMounted(async () => {\n    if (props.value !== null) {\n      throw new Error('ll-input: use :model-value or v-model instead of :value.');\n    }\n\n    if (attrs.onInput) {\n      throw new Error('ll-input: use the @update:model-value event instead of @input');\n    }\n\n    if (\n      (typeof props.resize === 'boolean' && props.resize) ||\n      (props.resize as TextareaResizeOptions)?.forceBrowserScroll\n    ) {\n      await nextTick();\n      setupResizeObserver();\n    }\n  });\n\n  onBeforeUnmount(() => {\n    observer.value?.disconnect();\n  });\n</script>\n\n<template>\n  <Field\n    v-bind=\"props\"\n    :id=\"id\"\n    :is-read-only=\"isReadOnly\"\n    class=\"stash-textarea\"\n    :class=\"[classes.root, attrs.class]\"\n    data-test=\"stash-textarea\"\n  >\n    <template #default=\"{ fieldId, hasError }\">\n      <textarea\n        :id=\"fieldId\"\n        ref=\"textareaRef\"\n        :class=\"[\n          classes.textarea,\n          { 'stash-textarea--error': hasError, 'tw-resize-y': props.resize, 'tw-resize-none': !props.resize },\n        ]\"\n        :value=\"props.modelValue\"\n        data-test=\"stash-textarea|textarea\"\n        :placeholder=\"props.placeholder\"\n        v-bind=\"inputAttrs\"\n        :disabled=\"props.disabled\"\n        :readonly=\"isReadOnly\"\n        @input=\"onInput\"\n      ></textarea>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <!-- @slot Hint content -->\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style module>\n  .root {\n    position: relative;\n    width: 100%;\n  }\n\n  .textarea {\n    background: var(--color-white);\n    border: 1px solid;\n    border-color: var(--color-ice-500);\n    border-radius: theme('borderRadius.DEFAULT');\n    color: var(--color-ice-700);\n    display: block;\n    min-height: 100px;\n    outline: none;\n    padding: theme('spacing[1.5]');\n    width: 100%;\n\n    &:hover {\n      border-color: var(--color-ice-500);\n    }\n\n    &:focus,\n    &:active {\n      border-color: var(--color-blue-500);\n    }\n\n    &.stash-textarea--error {\n      border-color: var(--color-red-500);\n      color: var(--color-red-500);\n    }\n\n    &::placeholder {\n      color: var(--color-ice-500);\n      opacity: 1;\n    }\n\n    &[disabled] {\n      background-color: var(--color-ice-100);\n      border-color: var(--color-ice-500);\n      color: var(--color-ice-500);\n      pointer-events: none;\n    }\n\n    &[disabled]:active,\n    &[disabled]:focus {\n      box-shadow: none;\n    }\n\n    &[disabled]::placeholder {\n      text-transform: none;\n      color: var(--color-ice-500);\n    }\n\n    &[readonly] {\n      border-color: transparent;\n      background-color: transparent;\n      padding-left: 0;\n      padding-right: 0;\n      min-height: unset;\n    }\n  }\n</style>\n"],"names":["id","uniqueId","attrs","useAttrs","slots","useSlots","classes","useCssModule","props","__props","emits","__emit","textareaRef","ref","observer","isReadOnly","computed","inputAttrs","allAttrs","watch","v","setupResizeObserver","_a","onInput","event","entry","target","parent","findParentScrollable","scrollPosition","offsetDiff","top","height","getOffsetClipRect","viewportHeight","parentTop","parentHeight","offsetTop","el","overflowY","width","left","findPos","offsetLeft","offsetParent","onMounted","nextTick","onBeforeUnmount"],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sources":["../src/components/Textarea/Textarea.vue"],"sourcesContent":["<script lang=\"ts\" setup>\n  import { computed, nextTick, onBeforeUnmount, onMounted, ref, useAttrs, useCssModule, useSlots, watch } from 'vue';\n\n  import Field, { type FieldProps } from '../Field/Field.vue';\n\n  export interface TextareaResizeOptions {\n    /**\n     * It will automatically scroll the page down when it reaches the bottom of the viewport/element\n     */\n    forceBrowserScroll: boolean;\n  }\n\n  export interface TextAreaProps extends FieldProps {\n    /**\n     * Value for the textarea element.\n     */\n    modelValue?: string;\n\n    /**\n     * Deprecated. Use :model-value or v-model instead of :value.\n     * @deprecated Use :model-value or v-model instead of :value.\n     */\n    value?: string | number | null;\n\n    /**\n     * Allow textarea to be resizable vertically.\n     * Alternatively if you want to disable automatic scroll when resizing, you can set `{ forceBrowserScroll: false }`\n     */\n    resize?: boolean | TextareaResizeOptions;\n\n    /**\n     * Placeholder text for the textarea element.\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  defineOptions({\n    name: 'll-textarea',\n  });\n\n  const attrs = useAttrs();\n  const slots = useSlots();\n  const classes = useCssModule();\n\n  const props = withDefaults(defineProps<TextAreaProps>(), {\n    modelValue: '',\n    value: null,\n    resize: false,\n    placeholder: undefined,\n  });\n\n  const emits = defineEmits<{\n    /**\n     * Emitted when the model value changes.\n     */\n    (e: 'update:model-value', value: string): void;\n  }>();\n\n  const textareaRef = ref<HTMLTextAreaElement>();\n  const observer = ref<ResizeObserver>();\n  const isReadOnly = computed(() => props.isReadOnly || ('readonly' in attrs && attrs.readonly !== false));\n\n  const inputAttrs = computed(() => {\n    const allAttrs = { ...attrs };\n\n    delete allAttrs['data-test'];\n    delete allAttrs.class;\n\n    return allAttrs;\n  });\n\n  watch(\n    () => props.resize,\n    (v) => {\n      v ? setupResizeObserver() : observer.value?.disconnect();\n    },\n  );\n\n  const onInput = (event: Event) => {\n    emits('update:model-value', (event.target as HTMLTextAreaElement).value);\n  };\n\n  const setupResizeObserver = () => {\n    if (observer.value || !textareaRef.value) {\n      return;\n    }\n\n    // the ResizeObserver will be in charge to detect if page needs to scroll when resizing the component\n    observer.value = new ResizeObserver(([entry]) => {\n      const { target } = entry;\n      const parent = findParentScrollable(textareaRef.value as HTMLTextAreaElement) || document.documentElement;\n\n      const { scrollTop: scrollPosition } = parent;\n      let offsetDiff = 0;\n\n      // checks if the closest parent element scrollable is the document page\n      if (parent === document.documentElement) {\n        const { top, height } = getOffsetClipRect(target as HTMLElement);\n        const { innerHeight: viewportHeight } = window;\n\n        offsetDiff = Math.max(top + height - (viewportHeight + scrollPosition), 0);\n      } else {\n        const { top, height } = (target as HTMLElement).getBoundingClientRect();\n        const { top: parentTop } = parent.getBoundingClientRect();\n        const { offsetHeight: parentHeight } = parent;\n        const offsetTop = top - parentTop;\n\n        offsetDiff = Math.max(offsetTop + height - parentHeight, 0);\n      }\n\n      if (offsetDiff) {\n        requestAnimationFrame(() => {\n          parent.scrollTop = scrollPosition + offsetDiff;\n        });\n      }\n    });\n\n    observer.value.observe(textareaRef.value);\n  };\n\n  /**\n   * Retrieve the closest parent that has a scroll. Defaults to the document page.\n   */\n  const findParentScrollable = (el: HTMLElement): HTMLElement | null => {\n    const parent = el.parentElement as HTMLElement;\n    if (!parent) {\n      return null;\n    }\n\n    const { overflowY } = getComputedStyle(parent);\n    if (overflowY !== 'visible') {\n      return parent;\n    }\n\n    if (parent === document.body) {\n      return document.documentElement;\n    }\n\n    return findParentScrollable(parent);\n  };\n\n  /**\n   * Retrieve element absolute positioning relative to the page.\n   */\n  const getOffsetClipRect = (el: HTMLElement) => {\n    const { offsetWidth: width, offsetHeight: height } = el;\n\n    let left = 0;\n    let top = 0;\n\n    const findPos = function ({ offsetLeft, offsetTop, offsetParent }: HTMLElement) {\n      left += offsetLeft;\n      top += offsetTop;\n\n      if (offsetParent) {\n        findPos(offsetParent as HTMLElement);\n      }\n    };\n\n    findPos(el);\n\n    return {\n      top,\n      left,\n      width,\n      height,\n    };\n  };\n\n  onMounted(async () => {\n    if (props.value !== null) {\n      throw new Error('ll-input: use :model-value or v-model instead of :value.');\n    }\n\n    if (attrs.onInput) {\n      throw new Error('ll-input: use the @update:model-value event instead of @input');\n    }\n\n    if (\n      (typeof props.resize === 'boolean' && props.resize) ||\n      (props.resize as TextareaResizeOptions)?.forceBrowserScroll\n    ) {\n      await nextTick();\n      setupResizeObserver();\n    }\n  });\n\n  onBeforeUnmount(() => {\n    observer.value?.disconnect();\n  });\n</script>\n\n<template>\n  <Field v-bind=\"props\" class=\"stash-textarea\" :class=\"[classes.root]\" data-test=\"stash-textarea\">\n    <template #default=\"{ fieldId, hasError }\">\n      <textarea\n        :id=\"fieldId\"\n        ref=\"textareaRef\"\n        :class=\"[\n          classes.textarea,\n          { 'stash-textarea--error': hasError, 'tw-resize-y': props.resize, 'tw-resize-none': !props.resize },\n        ]\"\n        :value=\"props.modelValue\"\n        data-test=\"stash-textarea|textarea\"\n        :placeholder=\"props.placeholder\"\n        v-bind=\"inputAttrs\"\n        :disabled=\"props.disabled\"\n        :readonly=\"isReadOnly\"\n        @input=\"onInput\"\n      ></textarea>\n    </template>\n    <template v-if=\"slots.hint\" #hint>\n      <!-- @slot Hint content -->\n      <slot name=\"hint\"></slot>\n    </template>\n  </Field>\n</template>\n\n<style module>\n  .root {\n    position: relative;\n    width: 100%;\n  }\n\n  .textarea {\n    background: var(--color-white);\n    border: 1px solid;\n    border-color: var(--color-ice-500);\n    border-radius: theme('borderRadius.DEFAULT');\n    color: var(--color-ice-700);\n    display: block;\n    min-height: 100px;\n    outline: none;\n    padding: theme('spacing[1.5]');\n    width: 100%;\n\n    &:hover {\n      border-color: var(--color-ice-500);\n    }\n\n    &:focus,\n    &:active {\n      border-color: var(--color-blue-500);\n    }\n\n    &.stash-textarea--error {\n      border-color: var(--color-red-500);\n      color: var(--color-red-500);\n    }\n\n    &::placeholder {\n      color: var(--color-ice-500);\n      opacity: 1;\n    }\n\n    &[disabled] {\n      background-color: var(--color-ice-100);\n      border-color: var(--color-ice-500);\n      color: var(--color-ice-500);\n      pointer-events: none;\n    }\n\n    &[disabled]:active,\n    &[disabled]:focus {\n      box-shadow: none;\n    }\n\n    &[disabled]::placeholder {\n      text-transform: none;\n      color: var(--color-ice-500);\n    }\n\n    &[readonly] {\n      border-color: transparent;\n      background-color: transparent;\n      padding-left: 0;\n      padding-right: 0;\n      min-height: unset;\n    }\n  }\n</style>\n"],"names":["attrs","useAttrs","slots","useSlots","classes","useCssModule","props","__props","emits","__emit","textareaRef","ref","observer","isReadOnly","computed","inputAttrs","allAttrs","watch","v","setupResizeObserver","_a","onInput","event","entry","target","parent","findParentScrollable","scrollPosition","offsetDiff","top","height","getOffsetClipRect","viewportHeight","parentTop","parentHeight","offsetTop","el","overflowY","width","left","findPos","offsetLeft","offsetParent","onMounted","nextTick","onBeforeUnmount"],"mappings":"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"}

package/dist/Textarea.vue.d.ts

@@ -33,39 +33,21 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
 };
 
 declare const _default: __VLS_WithTemplateSlots<DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TextAreaProps>, {
-label: string;
 modelValue: string;
 value: null;
-errorText: string;
-hintText: string;
-showOptionalInLabel: boolean;
 resize: boolean;
 placeholder: undefined;
-disabled: boolean;
-isReadOnly: boolean;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "update:model-value": (value: string) => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<TextAreaProps>, {
-label: string;
 modelValue: string;
 value: null;
-errorText: string;
-hintText: string;
-showOptionalInLabel: boolean;
 resize: boolean;
 placeholder: undefined;
-disabled: boolean;
-isReadOnly: boolean;
 }>>> & Readonly<{
 "onUpdate:model-value"?: ((value: string) => any) | undefined;
 }>, {
 resize: boolean | TextareaResizeOptions;
-disabled: boolean;
-label: string;
-errorText: string;
-hintText: string;
-isReadOnly: boolean;
-showOptionalInLabel: boolean;
 placeholder: string;
 modelValue: string;
 value: string | number | null;
@@ -74,32 +56,69 @@ value: string | number | null;
 }>;
 export default _default;
 
-export declare interface TextAreaProps {
+declare interface FieldProps {
     /**
-     * Label text for the textarea element.
+     * Adds spacing under the field that is consistent whether hint/error text is displayed.
      */
-    label?: string;
+    addBottomSpace?: boolean;
     /**
-     * Value for the textarea element.
+     * Error text to display. Replaces `hintText` (if provided) & adds error styling.
      */
-    modelValue?: string;
+    errorText?: string;
     /**
-     * Deprecated. Use :model-value or v-model instead of :value.
-     * @deprecated Use :model-value or v-model instead of :value.
+     * Displays text below the input; hidden when the isReadOnly prop is truthy.
      */
-    value?: string | number | null;
+    hintText?: string;
     /**
-     * Error text for the textarea element.
+     * ID for the Label and Input; must be unique
      */
-    errorText?: string;
+    id?: string;
     /**
-     * Hint text for the textarea element.
+     * ID for the error text element; useful for aria-errormessage
      */
-    hintText?: string;
+    errorId?: string;
     /**
-     * Render "(optional)" to the right of the label text
+     * Whether it's a readonly field.
+     */
+    isReadOnly?: boolean;
+    /**
+     * Whether the field is required.
+     */
+    isRequired?: boolean;
+    /**
+     * Label to render above the input.
+     */
+    label?: string;
+    /**
+     * Show "(optional)" to the right of the label text
      */
     showOptionalInLabel?: boolean;
+    /**
+     * Indicates wheter the field is a fieldset or not
+     */
+    fieldset?: boolean;
+    /**
+     * Indicates whether the field is disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * Indicates whether the field is disabled.
+     *
+     * @deprecated Use `isDisabled` instead.
+     */
+    disabled?: boolean;
+}
+
+export declare interface TextAreaProps extends FieldProps {
+    /**
+     * Value for the textarea element.
+     */
+    modelValue?: string;
+    /**
+     * Deprecated. Use :model-value or v-model instead of :value.
+     * @deprecated Use :model-value or v-model instead of :value.
+     */
+    value?: string | number | null;
     /**
      * Allow textarea to be resizable vertically.
      * Alternatively if you want to disable automatic scroll when resizing, you can set `{ forceBrowserScroll: false }`
@@ -110,14 +129,6 @@ export declare interface TextAreaProps {
      * **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.
      */
     placeholder?: string;
-    /**
-     * Indicates whether the textarea is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Indicates whether the textarea is read-only.
-     */
-    isReadOnly?: boolean;
 }
 
 export declare interface TextareaResizeOptions {