@stachelock/ui 0.1.0 → 0.1.3

package/dist/SwitchInput.vue_vue_type_script_setup_true_lang-BagTQ6M0.js

@@ -0,0 +1,197 @@
+import { defineComponent as $, ref as g, watch as K, computed as N, createElementBlock as a, openBlock as t, createVNode as w, unref as i, withCtx as k, createElementVNode as p, createCommentVNode as r, toDisplayString as d, normalizeClass as f, withKeys as V, withModifiers as M } from "vue";
+import { Switch as O } from "@headlessui/vue";
+import { useField as j } from "vee-validate";
+import { g as x } from "./id-DafBB_QF.js";
+import I from "./forms/FormFieldWrapper.js";
+const R = { class: "sl-w-full" }, z = { class: "sl-flex sl-items-center sl-justify-between sl-gap-4" }, U = {
+  key: 0,
+  class: "sl-flex-1"
+}, W = ["for"], q = ["innerHTML"], A = { key: 1 }, G = { class: "sl-sr-only" }, J = {
+  key: 1,
+  class: "sl-ml-3 sl-text-sm"
+}, P = {
+  key: 0,
+  class: "sl-font-medium sl-text-gray-800"
+}, Q = {
+  key: 1,
+  class: "sl-text-gray-500"
+}, X = {
+  key: 2,
+  class: "sl-flex-1"
+}, Y = {
+  key: 0,
+  class: "sl-mt-1 sl-text-sm sl-text-gray-600"
+}, Z = ["innerHTML"], te = /* @__PURE__ */ $({
+  __name: "SwitchInput",
+  props: {
+    name: {},
+    modelValue: { type: Boolean },
+    label: {},
+    description: {},
+    disabled: { type: Boolean },
+    immediate: { type: Boolean, default: !1 },
+    boxShadow: { type: Boolean, default: !1 },
+    defaultValue: { type: Boolean, default: !1 },
+    hideMainLabel: { type: Boolean, default: !1 },
+    textTrue: {},
+    textFalse: {},
+    rules: {},
+    validateOnMount: { type: Boolean },
+    successMessage: {},
+    tertiaryLabel: {},
+    isDescriptionHtml: { type: Boolean, default: !1 },
+    showErrors: { type: Boolean, default: !1 },
+    layout: { default: "stacked" }
+  },
+  emits: ["update:modelValue", "blur", "focus"],
+  setup(B, { expose: L, emit: T }) {
+    const s = B, c = T, n = g(), m = x(`sl-${s.name}`), { value: C, errorMessage: F, handleChange: h, handleBlur: H, meta: b } = j(
+      () => s.name,
+      s.rules,
+      {
+        type: "checkbox",
+        validateOnMount: s.validateOnMount,
+        initialValue: s.modelValue ?? s.defaultValue,
+        syncVModel: !0
+      }
+    ), l = g(s.modelValue ?? s.defaultValue);
+    K(
+      () => s.modelValue,
+      (e) => {
+        if (e !== void 0 && e !== l.value) {
+          const o = !!e;
+          l.value = o, C.value = o;
+        }
+      },
+      { immediate: !0 }
+    );
+    const S = N(() => {
+      const e = [
+        "sl-relative",
+        "sl-inline-flex",
+        "sl-items-center",
+        "sl-h-6",
+        "sl-w-11",
+        "sl-flex-shrink-0",
+        "sl-cursor-pointer",
+        "sl-rounded-full",
+        "sl-border-2",
+        "sl-border-transparent",
+        "sl-transition-colors",
+        "sl-duration-200",
+        "sl-ease-in-out",
+        "focus:sl-outline-none",
+        "focus:sl-ring-2",
+        "focus:sl-ring-stachelock-600",
+        "focus:sl-ring-offset-2"
+      ];
+      return s.disabled && e.push(
+        "sl-cursor-not-allowed",
+        "sl-opacity-50"
+      ), l.value ? e.push("sl-bg-stachelock-600") : e.push("sl-bg-gray-200"), e.join(" ");
+    }), y = (e) => {
+      s.disabled || (l.value = e, s.immediate && h(e), c("update:modelValue", e));
+    }, D = (e) => {
+      s.immediate || h(l.value), H(e), c("blur", e);
+    }, E = (e) => {
+      c("focus", e);
+    }, u = () => {
+      s.disabled || y(!l.value);
+    };
+    return L({
+      toggle: u,
+      value: l,
+      focus: () => {
+        (n.value?.$el ?? n.value)?.focus?.();
+      },
+      blur: () => {
+        (n.value?.$el ?? n.value)?.blur?.();
+      },
+      switchRef: n
+    }), (e, o) => (t(), a("div", R, [
+      w(I, {
+        id: i(m),
+        name: e.name,
+        label: e.layout === "stacked" && !e.hideMainLabel ? e.label : "",
+        disabled: e.disabled,
+        optional: !e.rules,
+        "tertiary-label": e.tertiaryLabel,
+        "box-shadow": e.boxShadow,
+        "error-message": i(F),
+        "success-message": e.successMessage,
+        "is-valid": i(b).valid,
+        "is-touched": i(b).touched,
+        "show-errors": e.showErrors
+      }, {
+        default: k(() => [
+          p("div", z, [
+            e.layout === "inline" ? (t(), a("div", U, [
+              e.label && !e.hideMainLabel ? (t(), a("label", {
+                key: 0,
+                for: i(m),
+                class: "sl-block sl-text-sm sl-font-medium sl-text-gray-900 sl-cursor-pointer"
+              }, d(e.label), 9, W)) : r("", !0),
+              e.description ? (t(), a("div", {
+                key: 1,
+                class: f(["sl-mt-1 sl-text-sm sl-text-gray-600", { "sl-cursor-pointer": !e.disabled }]),
+                onClick: o[0] || (o[0] = (v) => !e.disabled && u())
+              }, [
+                e.isDescriptionHtml ? (t(), a("div", {
+                  key: 0,
+                  innerHTML: e.description
+                }, null, 8, q)) : (t(), a("span", A, d(e.description), 1))
+              ], 2)) : r("", !0)
+            ])) : r("", !0),
+            w(i(O), {
+              id: i(m),
+              ref_key: "switchRef",
+              ref: n,
+              modelValue: l.value,
+              "onUpdate:modelValue": [
+                o[1] || (o[1] = (v) => l.value = v),
+                y
+              ],
+              disabled: e.disabled,
+              class: f([
+                S.value,
+                { "sl-shadow-md": e.boxShadow }
+              ]),
+              onFocus: E,
+              onBlur: D,
+              onKeydown: [
+                V(M(u, ["prevent"]), ["space"]),
+                V(M(u, ["prevent"]), ["enter"])
+              ]
+            }, {
+              default: k(() => [
+                p("span", G, d(e.label), 1),
+                p("span", {
+                  class: f([
+                    l.value ? "sl-translate-x-5" : "sl-translate-x-0",
+                    "sl-pointer-events-none sl-inline-block sl-h-5 sl-w-5 sl-transform sl-rounded-full sl-bg-white sl-shadow sl-ring-0 sl-transition sl-duration-200 sl-ease-in-out sl-relative"
+                  ])
+                }, null, 2)
+              ]),
+              _: 1
+            }, 8, ["id", "modelValue", "disabled", "class", "onKeydown"]),
+            e.textTrue || e.textFalse ? (t(), a("span", J, [
+              l.value && e.textTrue ? (t(), a("span", P, d(e.textTrue), 1)) : !l.value && e.textFalse ? (t(), a("span", Q, d(e.textFalse), 1)) : r("", !0)
+            ])) : r("", !0),
+            e.description && e.layout === "stacked" ? (t(), a("div", X, [
+              e.isDescriptionHtml ? (t(), a("p", {
+                key: 1,
+                class: "sl-mt-1 sl-text-sm sl-text-gray-600",
+                innerHTML: e.description
+              }, null, 8, Z)) : (t(), a("p", Y, d(e.description), 1))
+            ])) : r("", !0)
+          ])
+        ]),
+        _: 1
+      }, 8, ["id", "name", "label", "disabled", "optional", "tertiary-label", "box-shadow", "error-message", "success-message", "is-valid", "is-touched", "show-errors"])
+    ]));
+  }
+});
+export {
+  te as _
+};
+//# sourceMappingURL=SwitchInput.vue_vue_type_script_setup_true_lang-BagTQ6M0.js.map

package/dist/SwitchInput.vue_vue_type_script_setup_true_lang-BagTQ6M0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchInput.vue_vue_type_script_setup_true_lang-BagTQ6M0.js","sources":["../src/components/inputs/SwitchInput.vue"],"sourcesContent":["<template>\n  <div class=\"sl-w-full\">\n    <FormFieldWrapper\n      :id=\"id\"\n      :name=\"name\"\n      :label=\"layout === 'stacked' && !hideMainLabel ? label : ''\"\n      :disabled=\"disabled\"\n      :optional=\"!rules\"\n      :tertiary-label=\"tertiaryLabel\"\n      :box-shadow=\"boxShadow\"\n      :error-message=\"errorMessage\"\n      :success-message=\"successMessage\"\n      :is-valid=\"meta.valid\"\n      :is-touched=\"meta.touched\"\n      :show-errors=\"showErrors\"\n    >\n      <div class=\"sl-flex sl-items-center sl-justify-between sl-gap-4\">\n        <div v-if=\"layout === 'inline'\" class=\"sl-flex-1\">\n          <label\n            v-if=\"label && !hideMainLabel\"\n            :for=\"id\"\n            class=\"sl-block sl-text-sm sl-font-medium sl-text-gray-900 sl-cursor-pointer\"\n          >\n            {{ label }}\n          </label>\n          <div v-if=\"description\" class=\"sl-mt-1 sl-text-sm sl-text-gray-600\" :class=\"{ 'sl-cursor-pointer': !disabled }\" @click=\"!disabled && toggle()\">\n            <div v-if=\"isDescriptionHtml\" v-html=\"description\" />\n            <span v-else>{{ description }}</span>\n          </div>\n        </div>\n        <Switch\n          :id=\"id\"\n          ref=\"switchRef\"\n          v-model=\"switchValue\"\n          :disabled=\"disabled\"\n          :class=\"[\n            switchClasses,\n            { 'sl-shadow-md': boxShadow }\n          ]\"\n          @update:model-value=\"handleToggle\"\n          @focus=\"onFocus\"\n          @blur=\"onBlur\"\n          @keydown.space.prevent=\"toggle\"\n          @keydown.enter.prevent=\"toggle\"\n        >\n          <span class=\"sl-sr-only\">{{ label }}</span>\n          <span\n            :class=\"[\n              switchValue ? 'sl-translate-x-5' : 'sl-translate-x-0',\n              'sl-pointer-events-none sl-inline-block sl-h-5 sl-w-5 sl-transform sl-rounded-full sl-bg-white sl-shadow sl-ring-0 sl-transition sl-duration-200 sl-ease-in-out sl-relative'\n            ]\"\n          >\n          </span>\n        </Switch>\n        <span v-if=\"textTrue || textFalse\" class=\"sl-ml-3 sl-text-sm\">\n          <span v-if=\"switchValue && textTrue\" class=\"sl-font-medium sl-text-gray-800\">{{ textTrue }}</span>\n          <span v-else-if=\"!switchValue && textFalse\" class=\"sl-text-gray-500\">{{ textFalse }}</span>\n        </span>\n        <div v-if=\"description && layout === 'stacked'\" class=\"sl-flex-1\">\n          <p v-if=\"!isDescriptionHtml\" class=\"sl-mt-1 sl-text-sm sl-text-gray-600\">{{ description }}</p>\n          <p v-else class=\"sl-mt-1 sl-text-sm sl-text-gray-600\" v-html=\"description\" />\n        </div>\n      </div>\n    </FormFieldWrapper>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch } from 'vue'\nimport { Switch } from '@headlessui/vue'\nimport { useField } from 'vee-validate'\nimport { generateId } from '../../utils/id'\nimport FormFieldWrapper from '../forms/FormFieldWrapper.vue'\nimport type { ValidationRule } from '../../types/form'\n\ninterface Props {\n  name: string\n  modelValue?: boolean\n  label?: string\n  description?: string\n  disabled?: boolean\n  immediate?: boolean\n  boxShadow?: boolean\n  defaultValue?: boolean\n  hideMainLabel?: boolean\n  textTrue?: string\n  textFalse?: string\n  rules?: ValidationRule\n  validateOnMount?: boolean\n  successMessage?: string\n  tertiaryLabel?: string\n  isDescriptionHtml?: boolean\n  showErrors?: boolean\n  layout?: 'stacked' | 'inline'\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  immediate: false,\n  boxShadow: false,\n  defaultValue: false,\n  hideMainLabel: false,\n  isDescriptionHtml: false,\n  showErrors: false,\n  layout: 'stacked'\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: boolean]\n  blur: [event: FocusEvent]\n  focus: [event: FocusEvent]\n}>()\n\nconst switchRef = ref<any>()\nconst id = generateId(`sl-${props.name}`)\n\nconst { value, errorMessage, handleChange, handleBlur, meta } = useField(\n  () => props.name,\n  props.rules,\n  {\n    type: 'checkbox',\n    validateOnMount: props.validateOnMount,\n    initialValue: props.modelValue ?? props.defaultValue,\n    syncVModel: true\n  }\n)\n\nconst switchValue = ref<boolean>(props.modelValue ?? props.defaultValue)\n\n// Watch for external changes\nwatch(\n  () => props.modelValue,\n  (newValue) => {\n    if (newValue !== undefined && newValue !== switchValue.value) {\n      const boolVal = !!newValue\n      switchValue.value = boolVal\n      value.value = boolVal\n    }\n  },\n  { immediate: true }\n)\n\nconst switchClasses = computed(() => {\n  const baseClasses = [\n    'sl-relative',\n    'sl-inline-flex',\n    'sl-items-center',\n    'sl-h-6',\n    'sl-w-11',\n    'sl-flex-shrink-0',\n    'sl-cursor-pointer',\n    'sl-rounded-full',\n    'sl-border-2',\n    'sl-border-transparent',\n    'sl-transition-colors',\n    'sl-duration-200',\n    'sl-ease-in-out',\n    'focus:sl-outline-none',\n    'focus:sl-ring-2',\n    'focus:sl-ring-stachelock-600',\n    'focus:sl-ring-offset-2'\n  ]\n\n  if (props.disabled) {\n    baseClasses.push(\n      'sl-cursor-not-allowed',\n      'sl-opacity-50'\n    )\n  }\n\n  if (switchValue.value) {\n    baseClasses.push('sl-bg-stachelock-600')\n  } else {\n    baseClasses.push('sl-bg-gray-200')\n  }\n\n  return baseClasses.join(' ')\n})\n\nconst handleToggle = (value: boolean) => {\n  if (props.disabled) return\n  \n  switchValue.value = value\n  if (props.immediate) {\n    handleChange(value)\n  }\n  emit('update:modelValue', value)\n}\n\nconst onBlur = (event: FocusEvent) => {\n  if (!props.immediate) {\n    handleChange(switchValue.value)\n  }\n  handleBlur(event)\n  emit('blur', event)\n}\n\nconst onFocus = (event: FocusEvent) => {\n  emit('focus', event)\n}\n\n// Expose toggle method for external control\nconst toggle = () => {\n  if (!props.disabled) {\n    handleToggle(!switchValue.value)\n  }\n}\n\ndefineExpose({\n  toggle,\n  value: switchValue,\n  focus: () => {\n    const el = (switchRef.value as any)?.$el ?? switchRef.value\n    ;(el as HTMLButtonElement | null)?.focus?.()\n  },\n  blur: () => {\n    const el = (switchRef.value as any)?.$el ?? switchRef.value\n    ;(el as HTMLButtonElement | null)?.blur?.()\n  },\n  switchRef\n})\n</script>\n\n\n"],"names":["props","__props","emit","__emit","switchRef","ref","id","generateId","value","errorMessage","handleChange","handleBlur","meta","useField","switchValue","watch","newValue","boolVal","switchClasses","computed","baseClasses","handleToggle","onBlur","event","onFocus","toggle","__expose","_openBlock","_createElementBlock","_hoisted_1","_createVNode","FormFieldWrapper","_unref","name","layout","hideMainLabel","label","disabled","rules","tertiaryLabel","boxShadow","successMessage","showErrors","_createElementVNode","_hoisted_2","_hoisted_3","_hoisted_4","description","_normalizeClass","_cache","$event","isDescriptionHtml","Switch","_hoisted_7","_toDisplayString","textTrue","textFalse","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12"],"mappings":"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"}

package/dist/TagifyInput.vue_vue_type_script_setup_true_lang-RHqhKoK5.js

@@ -0,0 +1,230 @@
+import { defineComponent as V, ref as p, watch as z, onMounted as A, createBlock as w, openBlock as u, withCtx as g, createElementVNode as d, normalizeClass as U, createElementBlock as c, Fragment as T, renderList as S, withDirectives as k, toDisplayString as h, normalizeStyle as F, withKeys as C, withModifiers as y, vModelText as B, createVNode as Q, unref as R, createCommentVNode as K, renderSlot as L, nextTick as W } from "vue";
+import { XMarkIcon as X } from "@heroicons/vue/20/solid";
+import j from "./components/Badge.js";
+import G from "./forms/FormFieldWrapper.js";
+const H = { key: 0 }, P = ["onUpdate:modelValue", "placeholder", "disabled", "onKeydown", "onBlur"], Y = ["onClick", "disabled"], Z = { class: "sl-flex-1 sl-min-w-0 sl-relative" }, _ = ["placeholder", "disabled", "onKeydown"], ee = { class: "sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-3 sl-pointer-events-auto" }, te = {
+  key: 0,
+  class: "sl-absolute sl-z-50 sl-mt-1 sl-max-h-60 sl-w-full sl-overflow-auto sl-rounded-md sl-bg-white sl-py-1 sl-text-base sl-shadow-lg sl-ring-1 sl-ring-black sl-ring-opacity-5 focus:sl-outline-none sm:sl-text-sm"
+}, le = ["onClick"], se = { class: "sl-flex" }, ae = { class: "sl-truncate sl-font-semibold" }, ne = { class: "sl-block sl-truncate" }, oe = {
+  key: 0,
+  class: "sl-ml-2 sl-truncate sl-text-gray-500"
+}, ce = /* @__PURE__ */ V({
+  __name: "TagifyInput",
+  props: {
+    items: {
+      type: Array,
+      required: !0
+    },
+    value: {
+      type: Array,
+      default: () => []
+    },
+    name: {
+      type: String,
+      required: !0
+    },
+    label: {
+      type: String,
+      required: !1
+    },
+    itemKey: {
+      type: String,
+      default: "id"
+    },
+    itemText: {
+      type: String,
+      default: "value"
+    },
+    itemSubtext: {
+      type: String,
+      default: "name"
+    },
+    showSubext: {
+      type: Boolean,
+      default: !0
+    },
+    tagDisplayKey: {
+      type: String,
+      default: "name"
+    },
+    tertiaryLabel: {
+      type: String,
+      required: !1
+    },
+    pattern: {
+      type: RegExp,
+      default: null
+    },
+    inline: {
+      type: Boolean,
+      default: !1
+    },
+    placeholder: {
+      type: String,
+      default: "Add a tag..."
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    optional: {
+      type: Boolean,
+      default: !1
+    },
+    errorMessage: {
+      type: String,
+      default: ""
+    },
+    hasInputRing: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["update:value", "update:query", "invalid-tag"],
+  setup(s, { expose: N, emit: D }) {
+    const t = s, m = D, i = p(""), f = p([]), n = p(JSON.parse(JSON.stringify(t.value))), v = p(!1);
+    z(
+      () => t.value,
+      (e) => {
+        JSON.stringify(e) !== JSON.stringify(n.value) && (n.value = JSON.parse(JSON.stringify(e)));
+      },
+      { deep: !0 }
+    );
+    const I = (e) => e[t.itemSubtext] || e[t.itemText], q = (e) => e[t.itemSubtext] ? e[t.itemText] : void 0, E = (e) => e[t.tagDisplayKey] || e[t.itemText], $ = () => {
+      if (i.value && i.value.length > 0) {
+        m("update:query", i.value);
+        const e = i.value.toLowerCase();
+        f.value = t.items.filter((a) => a[t.itemText]?.toLowerCase().includes(e) || a[t.itemSubtext]?.toLowerCase().includes(e)), v.value = !0;
+      } else
+        f.value = [], v.value = !1;
+    }, J = () => {
+      const e = i.value.trim();
+      if (e === "")
+        return;
+      let a = null;
+      const l = e.toLowerCase(), r = t.items.find(
+        (o) => o[t.itemText]?.toLowerCase() === l || o[t.itemSubtext]?.toLowerCase() === l
+      );
+      if (r)
+        a = { ...r };
+      else if (t.pattern && t.pattern.test(e))
+        a = { id: null, [t.itemText]: e };
+      else
+        return;
+      n.value.some(
+        (o) => o[t.itemText] === a[t.itemText]
+      ) || (n.value.push(a), m("update:value", n.value)), i.value = "", f.value = [], v.value = !1;
+    }, M = (e) => {
+      const a = e[t.itemText].trim();
+      n.value.some(
+        (l) => l[t.itemText] === a
+      ) || (n.value.push({ ...e }), m("update:value", n.value)), i.value = "", f.value = [], v.value = !1;
+    }, b = (e) => {
+      n.value.splice(e, 1), m("update:value", n.value);
+    }, O = (e) => {
+      n.value[e].isEditing = !0, W(() => {
+      });
+    }, x = (e) => {
+      const a = n.value[e];
+      if (a) {
+        a.isEditing = !1;
+        const l = a[t.itemText].trim();
+        if (t.pattern && !t.pattern.test(l)) {
+          m("invalid-tag", l), b(e);
+          return;
+        }
+        a[t.itemText] = l, m("update:value", n.value);
+      }
+    };
+    return A(() => {
+      f.value = [];
+    }), N({
+      selectedTags: n
+    }), (e, a) => (u(), w(G, {
+      id: s.name,
+      name: s.name,
+      label: s.label,
+      "tertiary-label": s.tertiaryLabel,
+      "error-message": s.errorMessage,
+      disabled: s.disabled,
+      optional: s.optional
+    }, {
+      "tertiary-label-overlay": g(() => [
+        L(e.$slots, "tertiary-overlay")
+      ]),
+      default: g(() => [
+        d("div", {
+          class: U(["sl-flex sl-flex-wrap sl-items-center sl-gap-4 sl-rounded-md sl-bg-white sl-px-3 sm:sl-text-sm sm:sl-leading-6", s.inline ? null : "sl-shadow-sm sl-border sl-border-gray-300 focus-within:sl-ring-2 focus-within:sl-ring-stachelock-600"])
+        }, [
+          (u(!0), c(T, null, S(n.value, (l, r) => (u(), w(j, {
+            key: r,
+            onClick: (o) => O(r),
+            theme: "primary",
+            size: "sm"
+          }, {
+            default: g(() => [
+              l.isEditing ? k((u(), c("input", {
+                key: 1,
+                ref_for: !0,
+                ref: "editInput",
+                "onUpdate:modelValue": (o) => l[t.itemText] = o,
+                placeholder: s.placeholder,
+                disabled: s.disabled,
+                onKeydown: C(y((o) => x(r), ["prevent"]), ["enter"]),
+                onBlur: (o) => x(r),
+                class: "sl-bg-transparent sl-border-none sl-outline-none sl-text-stachelock-600 sl-text-sm placeholder:sl-text-stachelock-400/80 focus:sl-ring-0 focus:sl-ring-stachelock-600 focus:sl-rounded-lg -sl-mx-3 -sl-my-2",
+                style: F({ width: l[t.itemText].length + 4 + "ch" })
+              }, null, 44, P)), [
+                [B, l[t.itemText]]
+              ]) : (u(), c("span", H, h(E(l)), 1)),
+              d("button", {
+                type: "button",
+                class: "sl-ml-2 sl-text-stachelock-600 hover:sl-text-stachelock-400 focus:sl-outline-none",
+                onClick: y((o) => b(r), ["stop"]),
+                disabled: s.disabled
+              }, [
+                Q(R(X), { class: "sl-h-4 sl-w-4" })
+              ], 8, Y)
+            ]),
+            _: 2
+          }, 1032, ["onClick"]))), 128)),
+          d("div", Z, [
+            k(d("input", {
+              ref: "input",
+              "onUpdate:modelValue": a[0] || (a[0] = (l) => i.value = l),
+              placeholder: s.placeholder,
+              onInput: $,
+              disabled: s.disabled,
+              onKeydown: C(y(J, ["prevent"]), ["enter"]),
+              class: "sl-w-full sl-border-none sl-outline-none sl-rounded-md focus:sl-ring-0 sl-text-sm sl-font-light -sl-mx-3 sl-pr-12"
+            }, null, 40, _), [
+              [B, i.value]
+            ]),
+            d("div", ee, [
+              L(e.$slots, "input-overlay")
+            ]),
+            v.value && !s.disabled ? (u(), c("div", te, [
+              (u(!0), c(T, null, S(f.value, (l) => (u(), c("div", {
+                key: l[s.itemKey],
+                class: "sl-cursor-pointer sl-select-none sl-py-2 sl-pl-3 sl-pr-9 hover:sl-bg-stachelock-600 hover:sl-text-white",
+                onClick: y((r) => M(l), ["prevent"])
+              }, [
+                d("div", se, [
+                  d("span", ae, [
+                    d("span", ne, h(I(l)), 1)
+                  ]),
+                  s.showSubext ? (u(), c("span", oe, h(q(l)), 1)) : K("", !0)
+                ])
+              ], 8, le))), 128))
+            ])) : K("", !0)
+          ])
+        ], 2)
+      ]),
+      _: 3
+    }, 8, ["id", "name", "label", "tertiary-label", "error-message", "disabled", "optional"]));
+  }
+});
+export {
+  ce as _
+};
+//# sourceMappingURL=TagifyInput.vue_vue_type_script_setup_true_lang-RHqhKoK5.js.map

package/dist/TagifyInput.vue_vue_type_script_setup_true_lang-RHqhKoK5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagifyInput.vue_vue_type_script_setup_true_lang-RHqhKoK5.js","sources":["../src/components/inputs/TagifyInput.vue"],"sourcesContent":["<template>\n  <FormFieldWrapper\n    :id=\"name\"\n    :name=\"name\"\n    :label=\"label\"\n    :tertiary-label=\"tertiaryLabel\"\n    :error-message=\"errorMessage\"\n    :disabled=\"disabled\"\n    :optional=\"optional\"\n  >\n    <template #tertiary-label-overlay>\n      <slot name=\"tertiary-overlay\"></slot>\n    </template>\n    \n    <div class=\"sl-flex sl-flex-wrap sl-items-center sl-gap-4 sl-rounded-md sl-bg-white sl-px-3 sm:sl-text-sm sm:sl-leading-6\"\n      :class=\"inline ? null : 'sl-shadow-sm sl-border sl-border-gray-300 focus-within:sl-ring-2 focus-within:sl-ring-stachelock-600'\">\n      <!-- Display selected tags as badges -->\n      <UiBadge v-for=\"(tag, index) in selectedTags\" :key=\"index\" @click=\"editTag(index)\" theme=\"primary\" size=\"sm\">\n        <span v-if=\"!tag.isEditing\">{{ tagDisplay(tag) }}</span>\n        <input v-else ref=\"editInput\" v-model=\"tag[props.itemText]\" :placeholder=\"placeholder\"\n          :disabled=\"disabled\" @keydown.enter.prevent=\"stopEditingTag(index)\"\n          @blur=\"stopEditingTag(index)\"\n          class=\"sl-bg-transparent sl-border-none sl-outline-none sl-text-stachelock-600 sl-text-sm placeholder:sl-text-stachelock-400/80 focus:sl-ring-0 focus:sl-ring-stachelock-600 focus:sl-rounded-lg -sl-mx-3 -sl-my-2\"\n          :style=\"{ width: tag[props.itemText].length + 4 + 'ch' }\" />\n        <button type=\"button\" class=\"sl-ml-2 sl-text-stachelock-600 hover:sl-text-stachelock-400 focus:sl-outline-none\"\n          @click.stop=\"removeTag(index)\" :disabled=\"disabled\">\n          <XMarkIcon class=\"sl-h-4 sl-w-4\" />\n        </button>\n      </UiBadge>\n      <!-- Input for adding new tags -->\n      <div class=\"sl-flex-1 sl-min-w-0 sl-relative\">\n        <input ref=\"input\" v-model=\"query\" :placeholder=\"placeholder\" @input=\"filterItems\"\n          :disabled=\"disabled\" @keydown.enter.prevent=\"addTag\"\n          class=\"sl-w-full sl-border-none sl-outline-none sl-rounded-md focus:sl-ring-0 sl-text-sm sl-font-light -sl-mx-3 sl-pr-12\" />\n        <!-- Overlay slot aligned to the far right -->\n        <div class=\"sl-absolute sl-inset-y-0 sl-right-0 sl-flex sl-items-center sl-pr-3 sl-pointer-events-auto\">\n          <slot name=\"input-overlay\" />\n        </div>\n        <!-- Suggestions Dropdown -->\n        <div v-if=\"showDropdown && !disabled\"\n          class=\"sl-absolute sl-z-50 sl-mt-1 sl-max-h-60 sl-w-full sl-overflow-auto sl-rounded-md sl-bg-white sl-py-1 sl-text-base sl-shadow-lg sl-ring-1 sl-ring-black sl-ring-opacity-5 focus:sl-outline-none sm:sl-text-sm\">\n          <div v-for=\"item in filteredItems\" :key=\"item[itemKey]\"\n            class=\"sl-cursor-pointer sl-select-none sl-py-2 sl-pl-3 sl-pr-9 hover:sl-bg-stachelock-600 hover:sl-text-white\"\n            @click.prevent=\"selectSuggestion(item)\">\n            <div class=\"sl-flex\">\n              <span class=\"sl-truncate sl-font-semibold\">\n                <span class=\"sl-block sl-truncate\">{{ itemDisplay(item) }}</span>\n              </span>\n              <span v-if=\"showSubext\" class=\"sl-ml-2 sl-truncate sl-text-gray-500\">\n                {{ itemSecondaryDisplay(item) }}\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </FormFieldWrapper>\n</template>\n\n<script lang=\"ts\" setup>\nimport { ref, watch, onMounted, nextTick } from 'vue';\nimport { XMarkIcon } from '@heroicons/vue/20/solid';\nimport UiBadge from '../UiBadge.vue';\nimport FormFieldWrapper from '../forms/FormFieldWrapper.vue';\n\ninterface Item {\n  id: string | number | null;\n  [key: string]: any; // Allows dynamic keys like 'value' or 'name'\n}\n\nconst props = defineProps({\n  items: {\n    type: Array as () => Item[],\n    required: true,\n  },\n  value: {\n    type: Array as () => Item[],\n    default: () => [],\n  },\n  name: {\n    type: String,\n    required: true,\n  },\n  label: {\n    type: String,\n    required: false,\n  },\n  itemKey: {\n    type: String,\n    default: 'id',\n  },\n  itemText: {\n    type: String,\n    default: 'value',\n  },\n  itemSubtext: {\n    type: String,\n    default: 'name',\n  },\n  showSubext: {\n    type: Boolean,\n    default: true\n  },\n  tagDisplayKey: {\n    type: String,\n    default: 'name',\n  },\n  tertiaryLabel: {\n    type: String,\n    required: false,\n  },\n  pattern: {\n    type: RegExp,\n    default: null,\n  },\n  inline: {\n    type: Boolean,\n    default: false,\n  },\n  placeholder: {\n    type: String,\n    default: 'Add a tag...',\n  },\n  disabled: {\n    type: Boolean,\n    default: false\n  },\n  optional: {\n    type: Boolean,\n    default: false\n  },\n  errorMessage: {\n    type: String,\n    default: ''\n  },\n  hasInputRing: {\n    type: Boolean,\n    default: false\n  }\n});\n\nconst emits = defineEmits(['update:value', 'update:query', 'invalid-tag']);\n\nconst query = ref<string>('');\nconst filteredItems = ref<Item[]>([]);\nconst selectedTags = ref<Item[]>(JSON.parse(JSON.stringify(props.value)));\nconst showDropdown = ref(false);\n\nwatch(\n  () => props.value,\n  (newVal) => {\n    if (JSON.stringify(newVal) !== JSON.stringify(selectedTags.value)) {\n      selectedTags.value = JSON.parse(JSON.stringify(newVal));\n    }\n  },\n  { deep: true }\n);\n\nconst itemDisplay = (item: Item) => item[props.itemSubtext] || item[props.itemText];\nconst itemSecondaryDisplay = (item: Item) => item[props.itemSubtext] ? item[props.itemText] : undefined;\nconst tagDisplay = (tag: Item) => tag[props.tagDisplayKey] || tag[props.itemText];\n\nconst filterItems = () => {\n  if (query.value && query.value.length > 0) {\n    emits('update:query', query.value);\n\n    // Simple filtering logic\n    const lowerQuery = query.value.toLowerCase();\n    filteredItems.value = props.items.filter((item) => {\n      return (\n        item[props.itemText]?.toLowerCase().includes(lowerQuery) ||\n        item[props.itemSubtext]?.toLowerCase().includes(lowerQuery)\n      );\n    });\n    showDropdown.value = true;\n  } else {\n    filteredItems.value = [];\n    showDropdown.value = false;\n  }\n};\n\nconst addTag = () => {\n  const trimmedQuery = query.value.trim();\n  if (trimmedQuery === '') {\n    return;\n  }\n\n  let tagToAdd: Item | null = null;\n\n  const lowerQuery = trimmedQuery.toLowerCase();\n\n  // Check if the query matches any item in the items list\n  const matchedItem = props.items.find(\n    (item) =>\n      item[props.itemText]?.toLowerCase() === lowerQuery ||\n      item[props.itemSubtext]?.toLowerCase() === lowerQuery\n  );\n\n  if (matchedItem) {\n    tagToAdd = { ...matchedItem };\n  } else if (props.pattern && props.pattern.test(trimmedQuery)) {\n    // Create a new item if it doesn't exist and matches the pattern\n    tagToAdd = { id: null, [props.itemText]: trimmedQuery };\n  } else {\n    // Do not emit invalid-tag here; let the user continue typing\n    return;\n  }\n\n  // Avoid duplicates\n  if (\n    !selectedTags.value.some(\n      (tag) => tag[props.itemText] === tagToAdd![props.itemText]\n    )\n  ) {\n    selectedTags.value.push(tagToAdd!);\n    emits('update:value', selectedTags.value);\n  }\n\n  query.value = '';\n  filteredItems.value = [];\n  showDropdown.value = false;\n};\n\nconst selectSuggestion = (item: Item) => {\n  const valueToTest = item[props.itemText].trim();\n\n  // Avoid duplicates\n  if (\n    !selectedTags.value.some(\n      (tag) => tag[props.itemText] === valueToTest\n    )\n  ) {\n    selectedTags.value.push({ ...item });\n    emits('update:value', selectedTags.value);\n  }\n  query.value = '';\n  filteredItems.value = [];\n  showDropdown.value = false;\n};\n\nconst removeTag = (index: number) => {\n  selectedTags.value.splice(index, 1);\n  emits('update:value', selectedTags.value);\n};\n\nconst editTag = (index: number) => {\n  selectedTags.value[index].isEditing = true;\n  nextTick(() => {\n    // Focus logic can be added here if needed\n  });\n};\n\nconst stopEditingTag = (index: number) => {\n  const tag = selectedTags.value[index];\n  if (tag) {\n    tag.isEditing = false;\n    const valueToTest = tag[props.itemText].trim();\n\n    // Validate tag if pattern is provided\n    if (props.pattern && !props.pattern.test(valueToTest)) {\n      emits('invalid-tag', valueToTest);\n      removeTag(index);\n      return;\n    }\n\n    // Update the tag value after trimming\n    tag[props.itemText] = valueToTest;\n    emits('update:value', selectedTags.value);\n  }\n};\n\nonMounted(() => {\n  // Initialize filteredItems\n  filteredItems.value = [];\n});\n\ndefineExpose({\n  selectedTags,\n});\n</script>\n\n<style scoped>\n</style>\n"],"names":["props","__props","emits","__emit","query","ref","filteredItems","selectedTags","showDropdown","watch","newVal","itemDisplay","item","itemSecondaryDisplay","tagDisplay","tag","filterItems","lowerQuery","addTag","trimmedQuery","tagToAdd","matchedItem","selectSuggestion","valueToTest","removeTag","index","editTag","nextTick","stopEditingTag","onMounted","__expose","_createBlock","FormFieldWrapper","_renderSlot","_ctx","_createElementVNode","_normalizeClass","_openBlock","_createElementBlock","_Fragment","_renderList","UiBadge","$event","_withKeys","_withModifiers","_hoisted_1","_toDisplayString","_createVNode","_unref","XMarkIcon","_hoisted_4","_hoisted_6","_hoisted_7","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12"],"mappings":"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"}

package/dist/TextAreaInput.vue_vue_type_script_setup_true_lang-CbR651TU.js

@@ -0,0 +1,158 @@
+import { defineComponent as S, ref as z, watch as h, computed as F, createElementBlock as d, openBlock as u, createVNode as O, unref as a, withCtx as g, createElementVNode as f, withDirectives as I, createCommentVNode as b, mergeProps as N, isRef as R, vModelText as j, toDisplayString as i } from "vue";
+import { useField as A } from "vee-validate";
+import D from "./forms/FormFieldWrapper.js";
+import { g as E } from "./id-DafBB_QF.js";
+const L = { class: "sl-w-full" }, T = { class: "sl-relative" }, P = ["id", "name", "disabled", "placeholder", "spellcheck", "rows", "maxlength"], U = {
+  key: 0,
+  class: "sl-absolute sl-bottom-2 sl-right-2 sl-text-xs sl-text-slate-500 sl-pointer-events-none"
+}, W = { key: 0 }, Q = /* @__PURE__ */ S({
+  __name: "TextAreaInput",
+  props: {
+    name: {},
+    label: {},
+    placeholder: {},
+    disabled: { type: Boolean },
+    rules: {},
+    validateOnMount: { type: Boolean },
+    successMessage: {},
+    tertiaryLabel: {},
+    spellcheck: { type: Boolean, default: !0 },
+    rows: { default: 4 },
+    maxlength: {},
+    inputClass: {},
+    inputStyle: { type: [Boolean, null, String, Object, Array] },
+    lazy: { type: Boolean, default: !1 },
+    modelValue: {},
+    boxShadow: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "blur", "focus"],
+  setup(y, { expose: v, emit: w }) {
+    const s = y, n = w, t = z(), c = E(s.name), { value: l, errorMessage: m, handleBlur: k, handleChange: p, meta: r } = A(
+      () => s.name,
+      s.rules,
+      {
+        validateOnMount: s.validateOnMount,
+        initialValue: s.modelValue,
+        syncVModel: !0
+      }
+    );
+    h(
+      () => s.modelValue,
+      (e) => {
+        e !== l.value && (l.value = e || "");
+      }
+    ), h(
+      l,
+      (e) => {
+        n("update:modelValue", e);
+      }
+    );
+    const B = F(() => {
+      const e = [
+        "sl-w-full",
+        "sl-px-3",
+        "sl-py-2",
+        "sl-text-sm",
+        "sl-border",
+        "sl-rounded-md",
+        "sl-bg-white",
+        "sl-transition-all",
+        "sl-duration-200",
+        "focus:sl-outline-none",
+        "focus:sl-ring-2",
+        "focus:sl-ring-stachelock-500",
+        "focus:sl-border-stachelock-500",
+        "sl-resize-y",
+        "sl-min-h-[80px]"
+      ];
+      return s.disabled ? e.push(
+        "sl-bg-gray-50",
+        "sl-text-gray-500",
+        "sl-cursor-not-allowed",
+        "sl-border-gray-200"
+      ) : m.value ? e.push(
+        "sl-border-red-300",
+        "focus:sl-ring-red-500",
+        "focus:sl-border-red-500"
+      ) : r.valid && r.touched ? e.push(
+        "sl-border-green-300",
+        "focus:sl-ring-green-500",
+        "focus:sl-border-green-500"
+      ) : e.push(
+        "sl-border-gray-300",
+        "hover:sl-border-gray-400"
+      ), e.join(" ");
+    }), M = (e) => {
+      const o = e.target;
+      s.lazy || p(o.value);
+    }, V = (e) => {
+      if (s.lazy) {
+        const o = e.target;
+        p(o.value);
+      }
+      k(e), n("blur", e);
+    }, C = (e) => {
+      n("focus", e);
+    };
+    return v({
+      focus: () => {
+        t.value?.focus();
+      },
+      blur: () => {
+        t.value?.blur();
+      },
+      textareaRef: t
+    }), (e, o) => (u(), d("div", L, [
+      O(D, {
+        id: a(c),
+        name: e.name,
+        label: e.label,
+        disabled: e.disabled,
+        optional: !e.rules,
+        "tertiary-label": e.tertiaryLabel,
+        "box-shadow": e.boxShadow,
+        "error-message": a(m),
+        "success-message": e.successMessage,
+        "is-valid": a(r).valid,
+        "is-touched": a(r).touched
+      }, {
+        "success-message": g(() => [
+          e.successMessage ? (u(), d("span", W, i(e.successMessage), 1)) : b("", !0)
+        ]),
+        default: g(() => [
+          f("div", T, [
+            I(f("textarea", N({
+              id: a(c),
+              ref_key: "textareaRef",
+              ref: t,
+              "onUpdate:modelValue": o[0] || (o[0] = (x) => R(l) ? l.value = x : null),
+              name: e.name,
+              disabled: e.disabled,
+              placeholder: e.placeholder,
+              class: [
+                B.value,
+                e.inputClass
+              ],
+              style: e.inputStyle,
+              spellcheck: e.spellcheck,
+              rows: e.rows,
+              maxlength: e.maxlength
+            }, e.$attrs, {
+              onBlur: V,
+              onFocus: C,
+              onInput: M
+            }), null, 16, P), [
+              [j, a(l)]
+            ]),
+            e.maxlength !== void 0 ? (u(), d("div", U, i(a(l)?.length || 0) + "/" + i(e.maxlength), 1)) : b("", !0)
+          ])
+        ]),
+        _: 1
+      }, 8, ["id", "name", "label", "disabled", "optional", "tertiary-label", "box-shadow", "error-message", "success-message", "is-valid", "is-touched"])
+    ]));
+  }
+});
+export {
+  Q as _
+};
+//# sourceMappingURL=TextAreaInput.vue_vue_type_script_setup_true_lang-CbR651TU.js.map

package/dist/TextAreaInput.vue_vue_type_script_setup_true_lang-CbR651TU.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextAreaInput.vue_vue_type_script_setup_true_lang-CbR651TU.js","sources":["../src/components/inputs/TextAreaInput.vue"],"sourcesContent":["<template>\n  <div class=\"sl-w-full\">\n    <FormFieldWrapper\n      :id=\"id\"\n      :name=\"name\"\n      :label=\"label\"\n      :disabled=\"disabled\"\n      :optional=\"!rules\"\n      :tertiary-label=\"tertiaryLabel\"\n      :box-shadow=\"boxShadow\"\n      :error-message=\"errorMessage\"\n      :success-message=\"successMessage\"\n      :is-valid=\"meta.valid\"\n      :is-touched=\"meta.touched\"\n    >\n      <div class=\"sl-relative\">\n        <textarea\n          :id=\"id\"\n          ref=\"textareaRef\"\n          v-model=\"value\"\n          :name=\"name\"\n          :disabled=\"disabled\"\n          :placeholder=\"placeholder\"\n          :class=\"[\n            textareaClasses,\n            inputClass\n          ]\"\n          :style=\"inputStyle\"\n          :spellcheck=\"spellcheck\"\n          :rows=\"rows\"\n          :maxlength=\"maxlength\"\n          v-bind=\"$attrs\"\n          @blur=\"onBlur\"\n          @focus=\"onFocus\"\n          @input=\"onInput\"\n        />\n        \n        <!-- Character count -->\n        <div \n          v-if=\"maxlength !== undefined\" \n          class=\"sl-absolute sl-bottom-2 sl-right-2 sl-text-xs sl-text-slate-500 sl-pointer-events-none\"\n        >\n          {{ value?.length || 0 }}/{{ maxlength }}\n        </div>\n      </div>\n      \n      <template #success-message>\n        <span v-if=\"successMessage\">{{ successMessage }}</span>\n      </template>\n    </FormFieldWrapper>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref, watch, type StyleValue } from 'vue'\nimport { useField } from 'vee-validate'\nimport FormFieldWrapper from '../forms/FormFieldWrapper.vue'\nimport type { ValidationRule } from '../../types/form'\nimport { generateId } from '../../utils/id'\n\ninterface Props {\n  name: string\n  label?: string\n  placeholder?: string\n  disabled?: boolean\n  rules?: ValidationRule\n  validateOnMount?: boolean\n  successMessage?: string\n  tertiaryLabel?: string\n  spellcheck?: boolean\n  rows?: number\n  maxlength?: number\n  inputClass?: string\n  inputStyle?: StyleValue\n  lazy?: boolean\n  modelValue?: string\n  boxShadow?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  spellcheck: true,\n  rows: 4,\n  lazy: false,\n  boxShadow: false\n})\n\nconst emit = defineEmits<{\n  'update:modelValue': [value: string]\n  blur: [event: FocusEvent]\n  focus: [event: FocusEvent]\n}>()\n\nconst textareaRef = ref<HTMLTextAreaElement>()\nconst id = generateId(props.name)\n\n// Use vee-validate for form validation\nconst { value, errorMessage, handleBlur, handleChange, meta } = useField(\n  () => props.name,\n  props.rules,\n  {\n    validateOnMount: props.validateOnMount,\n    initialValue: props.modelValue,\n    syncVModel: true\n  }\n)\n\n// Sync with v-model\nwatch(\n  () => props.modelValue,\n  (newValue) => {\n    if (newValue !== value.value) {\n      value.value = newValue || ''\n    }\n  }\n)\n\nwatch(\n  value,\n  (newValue) => {\n    emit('update:modelValue', newValue)\n  }\n)\n\nconst textareaClasses = computed(() => {\n  const baseClasses = [\n    'sl-w-full',\n    'sl-px-3',\n    'sl-py-2',\n    'sl-text-sm',\n    'sl-border',\n    'sl-rounded-md',\n    'sl-bg-white',\n    'sl-transition-all',\n    'sl-duration-200',\n    'focus:sl-outline-none',\n    'focus:sl-ring-2',\n    'focus:sl-ring-stachelock-500',\n    'focus:sl-border-stachelock-500',\n    'sl-resize-y',\n    'sl-min-h-[80px]'\n  ]\n\n  if (props.disabled) {\n    baseClasses.push(\n      'sl-bg-gray-50',\n      'sl-text-gray-500',\n      'sl-cursor-not-allowed',\n      'sl-border-gray-200'\n    )\n  } else if (errorMessage.value) {\n    baseClasses.push(\n      'sl-border-red-300',\n      'focus:sl-ring-red-500',\n      'focus:sl-border-red-500'\n    )\n  } else if (meta.valid && meta.touched) {\n    baseClasses.push(\n      'sl-border-green-300',\n      'focus:sl-ring-green-500',\n      'focus:sl-border-green-500'\n    )\n  } else {\n    baseClasses.push(\n      'sl-border-gray-300',\n      'hover:sl-border-gray-400'\n    )\n  }\n\n  return baseClasses.join(' ')\n})\n\nconst onInput = (event: Event) => {\n  const target = event.target as HTMLTextAreaElement\n  if (!props.lazy) {\n    handleChange(target.value)\n  }\n}\n\nconst onBlur = (event: FocusEvent) => {\n  if (props.lazy) {\n    const target = event.target as HTMLTextAreaElement\n    handleChange(target.value)\n  }\n  handleBlur(event)\n  emit('blur', event)\n}\n\nconst onFocus = (event: FocusEvent) => {\n  emit('focus', event)\n}\n\nconst focus = () => {\n  textareaRef.value?.focus()\n}\n\nconst blur = () => {\n  textareaRef.value?.blur()\n}\n\ndefineExpose({\n  focus,\n  blur,\n  textareaRef\n})\n</script>\n\n\n"],"names":["props","__props","emit","__emit","textareaRef","ref","id","generateId","value","errorMessage","handleBlur","handleChange","meta","useField","watch","newValue","textareaClasses","computed","baseClasses","onInput","event","target","onBlur","onFocus","__expose","_openBlock","_createElementBlock","_hoisted_1","_createVNode","FormFieldWrapper","_unref","name","label","disabled","rules","tertiaryLabel","boxShadow","successMessage","_createElementVNode","_hoisted_2","_withDirectives","_mergeProps","$event","placeholder","inputClass","inputStyle","spellcheck","rows","maxlength","$attrs","_hoisted_4","_toDisplayString"],"mappings":"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"}