@stachelock/ui 0.1.1 → 0.1.4

package/dist/TagifyInput.vue_vue_type_script_setup_true_lang-DRR6jt_8.js

@@ -0,0 +1,240 @@
+import { createElementBlock as c, openBlock as i, createElementVNode as d, defineComponent as V, ref as p, watch as z, onMounted as A, createBlock as T, withCtx as g, normalizeClass as U, Fragment as S, renderList as k, withDirectives as C, toDisplayString as h, normalizeStyle as F, withKeys as L, withModifiers as y, vModelText as B, createVNode as Q, unref as R, createCommentVNode as K, renderSlot as N, nextTick as W } from "vue";
+import Z from "./components/Badge.js";
+import j from "./forms/FormFieldWrapper.js";
+function G(s, b) {
+  return i(), c("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    d("path", { d: "M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" })
+  ]);
+}
+const H = { key: 0 }, P = ["onUpdate:modelValue", "placeholder", "disabled", "onKeydown", "onBlur"], X = ["onClick", "disabled"], Y = { 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"
+}, de = /* @__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: b, emit: D }) {
+    const t = s, m = D, r = p(""), v = p([]), n = p(JSON.parse(JSON.stringify(t.value))), f = p(!1);
+    z(
+      () => t.value,
+      (e) => {
+        JSON.stringify(e) !== JSON.stringify(n.value) && (n.value = JSON.parse(JSON.stringify(e)));
+      },
+      { deep: !0 }
+    );
+    const q = (e) => e[t.itemSubtext] || e[t.itemText], E = (e) => e[t.itemSubtext] ? e[t.itemText] : void 0, I = (e) => e[t.tagDisplayKey] || e[t.itemText], $ = () => {
+      if (r.value && r.value.length > 0) {
+        m("update:query", r.value);
+        const e = r.value.toLowerCase();
+        v.value = t.items.filter((a) => a[t.itemText]?.toLowerCase().includes(e) || a[t.itemSubtext]?.toLowerCase().includes(e)), f.value = !0;
+      } else
+        v.value = [], f.value = !1;
+    }, J = () => {
+      const e = r.value.trim();
+      if (e === "")
+        return;
+      let a = null;
+      const l = e.toLowerCase(), u = t.items.find(
+        (o) => o[t.itemText]?.toLowerCase() === l || o[t.itemSubtext]?.toLowerCase() === l
+      );
+      if (u)
+        a = { ...u };
+      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)), r.value = "", v.value = [], f.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)), r.value = "", v.value = [], f.value = !1;
+    }, x = (e) => {
+      n.value.splice(e, 1), m("update:value", n.value);
+    }, O = (e) => {
+      n.value[e].isEditing = !0, W(() => {
+      });
+    }, w = (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), x(e);
+          return;
+        }
+        a[t.itemText] = l, m("update:value", n.value);
+      }
+    };
+    return A(() => {
+      v.value = [];
+    }), b({
+      selectedTags: n
+    }), (e, a) => (i(), T(j, {
+      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(() => [
+        N(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"])
+        }, [
+          (i(!0), c(S, null, k(n.value, (l, u) => (i(), T(Z, {
+            key: u,
+            onClick: (o) => O(u),
+            theme: "primary",
+            size: "sm"
+          }, {
+            default: g(() => [
+              l.isEditing ? C((i(), c("input", {
+                key: 1,
+                ref_for: !0,
+                ref: "editInput",
+                "onUpdate:modelValue": (o) => l[t.itemText] = o,
+                placeholder: s.placeholder,
+                disabled: s.disabled,
+                onKeydown: L(y((o) => w(u), ["prevent"]), ["enter"]),
+                onBlur: (o) => w(u),
+                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]]
+              ]) : (i(), c("span", H, h(I(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) => x(u), ["stop"]),
+                disabled: s.disabled
+              }, [
+                Q(R(G), { class: "sl-h-4 sl-w-4" })
+              ], 8, X)
+            ]),
+            _: 2
+          }, 1032, ["onClick"]))), 128)),
+          d("div", Y, [
+            C(d("input", {
+              ref: "input",
+              "onUpdate:modelValue": a[0] || (a[0] = (l) => r.value = l),
+              placeholder: s.placeholder,
+              onInput: $,
+              disabled: s.disabled,
+              onKeydown: L(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, r.value]
+            ]),
+            d("div", ee, [
+              N(e.$slots, "input-overlay")
+            ]),
+            f.value && !s.disabled ? (i(), c("div", te, [
+              (i(!0), c(S, null, k(v.value, (l) => (i(), 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((u) => M(l), ["prevent"])
+              }, [
+                d("div", se, [
+                  d("span", ae, [
+                    d("span", ne, h(q(l)), 1)
+                  ]),
+                  s.showSubext ? (i(), c("span", oe, h(E(l)), 1)) : K("", !0)
+                ])
+              ], 8, le))), 128))
+            ])) : K("", !0)
+          ])
+        ], 2)
+      ]),
+      _: 3
+    }, 8, ["id", "name", "label", "tertiary-label", "error-message", "disabled", "optional"]));
+  }
+});
+export {
+  de as _
+};
+//# sourceMappingURL=TagifyInput.vue_vue_type_script_setup_true_lang-DRR6jt_8.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagifyInput.vue_vue_type_script_setup_true_lang-DRR6jt_8.js","sources":["../node_modules/@heroicons/vue/20/solid/esm/XMarkIcon.js","../src/components/inputs/TagifyInput.vue"],"sourcesContent":["import { createElementVNode as _createElementVNode, openBlock as _openBlock, createElementBlock as _createElementBlock } from \"vue\"\n\nexport default function render(_ctx, _cache) {\n  return (_openBlock(), _createElementBlock(\"svg\", {\n    xmlns: \"http://www.w3.org/2000/svg\",\n    viewBox: \"0 0 20 20\",\n    fill: \"currentColor\",\n    \"aria-hidden\": \"true\",\n    \"data-slot\": \"icon\"\n  }, [\n    _createElementVNode(\"path\", { d: \"M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z\" })\n  ]))\n}","<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":["render","_ctx","_cache","_openBlock","_createElementBlock","_createElementVNode","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","_normalizeClass","_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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","x_google_ignoreList":[0]}

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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"}

package/dist/UiAvatar.vue_vue_type_script_setup_true_lang-CDNjUA1L.js

@@ -0,0 +1,108 @@
+import { defineComponent as b, ref as _, computed as r, createElementBlock as i, openBlock as u, normalizeClass as c, createCommentVNode as p, createElementVNode as z, toDisplayString as P } from "vue";
+const C = {
+  key: 0,
+  class: "sl-h-full sl-w-full"
+}, U = ["src", "alt"], E = /* @__PURE__ */ b({
+  __name: "UiAvatar",
+  props: {
+    data: {},
+    name: {},
+    imageUrl: {},
+    size: { default: "md" },
+    color: { default: "sl-bg-stachelock-600" },
+    ring: { default: "sl-ring-white" },
+    rounded: { default: "sl-rounded-full" },
+    fallbackInitials: { default: "?" },
+    fallbackIcon: {},
+    imagePath: { default: "image.url" },
+    namePath: { default: "name" }
+  },
+  setup(v) {
+    const e = v, o = _(!1), k = () => {
+      o.value = !0;
+    }, f = {
+      xs: "sl-h-6 sl-w-6",
+      sm: "sl-h-8 sl-w-8",
+      md: "sl-h-12 sl-w-12",
+      lg: "sl-h-16 sl-w-16",
+      xl: "sl-h-20 sl-w-20",
+      "2xl": "sl-h-24 sl-w-24"
+    }, w = r(() => typeof e.size == "number" ? `sl-h-${e.size} sl-w-${e.size}` : f[e.size] || f.md), n = (l, t) => {
+      if (!l) return;
+      const a = Array.isArray(t) ? t : t.split(".");
+      let s = l;
+      for (const g of a)
+        if (s && typeof s == "object" && g in s)
+          s = s[g];
+        else
+          return;
+      return s;
+    }, m = r(() => {
+      if (e.imageUrl) return e.imageUrl;
+      if (e.data && e.imagePath) {
+        const l = n(e.data, e.imagePath);
+        if (l) return l;
+      }
+      if (e.data) {
+        const l = [
+          "profile_image.url",
+          "image.url",
+          "avatar.url",
+          "photo.url",
+          "picture.url"
+        ];
+        for (const t of l) {
+          const a = n(e.data, t);
+          if (a) return a;
+        }
+      }
+      return null;
+    }), d = r(() => {
+      if (e.name) return e.name;
+      if (e.data && e.namePath) {
+        const l = n(e.data, e.namePath);
+        if (l) return l;
+      }
+      if (e.data) {
+        const l = [
+          "name",
+          "display_name",
+          "full_name",
+          "username",
+          "title"
+        ];
+        for (const t of l) {
+          const a = n(e.data, t);
+          if (a) return a;
+        }
+      }
+      return "";
+    }), h = r(() => !!m.value), y = r(() => {
+      const l = d.value;
+      if (!l || l.trim() === "")
+        return e.fallbackInitials;
+      const t = l.split(" ").filter(Boolean);
+      return t.length === 0 ? e.fallbackInitials : t.length === 1 ? t[0][0].toUpperCase() : (t[0][0] + t[t.length - 1][0]).toUpperCase();
+    });
+    return (l, t) => (u(), i("div", {
+      class: c(["sl-relative sl-inline-block", [w.value, l.ring, l.rounded]])
+    }, [
+      h.value && !o.value ? (u(), i("div", C, [
+        z("img", {
+          src: m.value,
+          alt: d.value,
+          class: c(["sl-h-full sl-w-full sl-object-cover", l.rounded]),
+          onError: k
+        }, null, 42, U)
+      ])) : p("", !0),
+      !h.value || o.value ? (u(), i("div", {
+        key: 1,
+        class: c(["sl-h-full sl-w-full sl-flex sl-items-center sl-justify-center sl-font-semibold sl-text-white", [l.color, l.rounded]])
+      }, P(y.value), 3)) : p("", !0)
+    ], 2));
+  }
+});
+export {
+  E as _
+};
+//# sourceMappingURL=UiAvatar.vue_vue_type_script_setup_true_lang-CDNjUA1L.js.map

package/dist/UiAvatar.vue_vue_type_script_setup_true_lang-CDNjUA1L.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiAvatar.vue_vue_type_script_setup_true_lang-CDNjUA1L.js","sources":["../src/components/UiAvatar.vue"],"sourcesContent":["<template>\n  <div class=\"sl-relative sl-inline-block\" :class=\"[sizeClass, ring, rounded]\">\n    <div v-if=\"hasImage && !imageError\" class=\"sl-h-full sl-w-full\">\n      <img\n        :src=\"imageUrl\"\n        :alt=\"displayName\"\n        class=\"sl-h-full sl-w-full sl-object-cover\"\n        :class=\"rounded\"\n        @error=\"handleImageError\"\n      />\n    </div>\n    <div v-if=\"!hasImage || imageError\" class=\"sl-h-full sl-w-full sl-flex sl-items-center sl-justify-center sl-font-semibold sl-text-white\"\n      :class=\"[color, rounded]\">\n      {{ initials }}\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, ref } from 'vue';\n\ninterface AvatarProps {\n  // Flexible data object - can be any object with optional name and image properties\n  data?: Record<string, any>;\n  \n  // Direct properties for simple use cases\n  name?: string;\n  imageUrl?: string;\n  \n  // Size options\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | number;\n  \n  // Styling options\n  color?: string;\n  ring?: string;\n  rounded?: string;\n  \n  // Image fallback options\n  fallbackInitials?: string;\n  fallbackIcon?: string;\n  \n  // Custom image path keys for different data structures\n  imagePath?: string | string[]; // e.g., 'profile_image.url' or ['profile_image', 'url']\n  namePath?: string | string[];  // e.g., 'display_name' or ['user', 'profile', 'name']\n}\n\nconst props = withDefaults(defineProps<AvatarProps>(), {\n  size: 'md',\n  color: 'sl-bg-stachelock-600',\n  ring: 'sl-ring-white',\n  rounded: 'sl-rounded-full',\n  fallbackInitials: '?',\n  imagePath: 'image.url',\n  namePath: 'name'\n});\n\nconst imageError = ref(false);\n\nconst handleImageError = () => {\n  imageError.value = true;\n};\n\n// Size classes mapping\nconst sizeClasses: Record<string, string> = {\n  xs: 'sl-h-6 sl-w-6',\n  sm: 'sl-h-8 sl-w-8',\n  md: 'sl-h-12 sl-w-12',\n  lg: 'sl-h-16 sl-w-16',\n  xl: 'sl-h-20 sl-w-20',\n  '2xl': 'sl-h-24 sl-w-24',\n};\n\nconst sizeClass = computed(() => {\n  if (typeof props.size === 'number') {\n    return `sl-h-${props.size} sl-w-${props.size}`;\n  }\n  return sizeClasses[props.size] || sizeClasses.md;\n});\n\n// Helper function to get nested object values\nconst getNestedValue = (obj: any, path: string | string[]): any => {\n  if (!obj) return undefined;\n  \n  const keys = Array.isArray(path) ? path : path.split('.');\n  let current = obj;\n  \n  for (const key of keys) {\n    if (current && typeof current === 'object' && key in current) {\n      current = current[key];\n    } else {\n      return undefined;\n    }\n  }\n  \n  return current;\n};\n\n// Get image URL from various sources\nconst imageUrl = computed(() => {\n  // Direct imageUrl prop takes precedence\n  if (props.imageUrl) return props.imageUrl;\n  \n  // Try to get from data object using imagePath\n  if (props.data && props.imagePath) {\n    const url = getNestedValue(props.data, props.imagePath);\n    if (url) return url;\n  }\n  \n  // Fallback to common image paths if no specific path provided\n  if (props.data) {\n    const commonPaths = [\n      'profile_image.url',\n      'image.url',\n      'avatar.url',\n      'photo.url',\n      'picture.url'\n    ];\n    \n    for (const path of commonPaths) {\n      const url = getNestedValue(props.data, path);\n      if (url) return url;\n    }\n  }\n  \n  return null;\n});\n\n// Get display name from various sources\nconst displayName = computed(() => {\n  // Direct name prop takes precedence\n  if (props.name) return props.name;\n  \n  // Try to get from data object using namePath\n  if (props.data && props.namePath) {\n    const name = getNestedValue(props.data, props.namePath);\n    if (name) return name;\n  }\n  \n  // Fallback to common name paths if no specific path provided\n  if (props.data) {\n    const commonPaths = [\n      'name',\n      'display_name',\n      'full_name',\n      'username',\n      'title'\n    ];\n    \n    for (const path of commonPaths) {\n      const name = getNestedValue(props.data, path);\n      if (name) return name;\n    }\n  }\n  \n  return '';\n});\n\nconst hasImage = computed(() => {\n  return !!imageUrl.value;\n});\n\nconst initials = computed(() => {\n  const name = displayName.value;\n  \n  if (!name || name.trim() === '') {\n    return props.fallbackInitials;\n  }\n\n  const names = name.split(' ').filter(Boolean);\n  if (names.length === 0) {\n    return props.fallbackInitials;\n  }\n\n  if (names.length === 1) {\n    return names[0][0].toUpperCase();\n  } else {\n    return (names[0][0] + names[names.length - 1][0]).toUpperCase();\n  }\n});\n</script>\n\n<style scoped>\n</style>\n"],"names":["props","__props","imageError","ref","handleImageError","sizeClasses","sizeClass","computed","getNestedValue","obj","path","keys","current","key","imageUrl","url","commonPaths","displayName","name","hasImage","initials","names","_createElementBlock","ring","rounded","_openBlock","_hoisted_1","_createElementVNode","_normalizeClass","color"],"mappings":"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"}

package/dist/UiBreadcrumb.vue_vue_type_script_setup_true_lang-quGuN9v4.js

@@ -0,0 +1,82 @@
+import { createElementBlock as o, openBlock as a, createElementVNode as c, defineComponent as v, ref as m, computed as x, watchEffect as w, Fragment as B, renderList as P, createBlock as k, createCommentVNode as C, createVNode as y, unref as N, withCtx as E, createTextVNode as V, toDisplayString as L } from "vue";
+import { u as S, a as D, _ as R } from "./UiNavLink.vue_vue_type_script_setup_true_lang-Bz5oiCCk.js";
+function U(d, n) {
+  return a(), o("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    c("path", {
+      "fill-rule": "evenodd",
+      d: "M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z",
+      "clip-rule": "evenodd"
+    })
+  ]);
+}
+const j = {
+  class: "sl-hidden sm:sl-flex",
+  "aria-label": "Breadcrumb"
+}, A = {
+  role: "list",
+  class: "sl-flex sl-items-center sl-space-x-4"
+}, F = { class: "sl-flex sl-items-center" }, Z = /* @__PURE__ */ v({
+  __name: "UiBreadcrumb",
+  setup(d) {
+    const n = m([]), h = S(), f = D(), i = m(""), p = x(() => n.value.map((s) => {
+      const t = s.name.trim();
+      return {
+        ...s,
+        name: t.length > 12 ? t.slice(0, 12) + "..." : t
+      };
+    })), _ = async () => {
+      const s = h.path;
+      i.value = s;
+      const t = s.split("/").filter(Boolean), e = [];
+      for (const [l, r] of t.entries()) {
+        let u;
+        u = r.charAt(0).toUpperCase() + r.slice(1).toLowerCase(), e.push({
+          name: u,
+          fullPath: "/" + t.slice(0, l + 1).join("/")
+        });
+      }
+      n.value = e;
+    }, g = (s, t) => {
+      const e = f.resolve(s.fullPath), l = e.matched.some((r) => r.meta?.isErrorPage);
+      (!e || e.matched.length === 0 || l) && (t.preventDefault(), t.stopPropagation(), console.warn("Breadcrumb route not found or is an error page:", s.fullPath));
+    };
+    return w(() => {
+      _();
+    }), (s, t) => (a(), o("nav", j, [
+      c("ol", A, [
+        (a(!0), o(B, null, P(p.value, (e, l) => (a(), o("li", {
+          key: e.fullPath
+        }, [
+          c("div", F, [
+            l !== 0 ? (a(), k(N(U), {
+              key: 0,
+              class: "sl-h-5 sl-w-5 sl-flex-shrink-0 sl-text-gray-400 sl-mr-3",
+              "aria-hidden": "true"
+            })) : C("", !0),
+            y(R, {
+              to: e.fullPath,
+              onClick: (r) => g(e, r),
+              "aria-current": e.fullPath === i.value ? "page" : void 0,
+              class: "sl-text-sm sl-font-medium sl-text-gray-500 hover:sl-text-gray-700 sl-truncate sl-overflow-ellipsis"
+            }, {
+              default: E(() => [
+                V(L(e.name), 1)
+              ]),
+              _: 2
+            }, 1032, ["to", "onClick", "aria-current"])
+          ])
+        ]))), 128))
+      ])
+    ]));
+  }
+});
+export {
+  Z as _
+};
+//# sourceMappingURL=UiBreadcrumb.vue_vue_type_script_setup_true_lang-quGuN9v4.js.map