@stachelock/ui 0.2.13 → 0.3.0

package/dist/{TagifyInput.vue_vue_type_script_setup_true_lang-DRR6jt_8.js → TagifyInput.vue_vue_type_script_setup_true_lang-CAK6ZIiz.js}

@@ -1,24 +1,14 @@
-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 { 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 F, createElementBlock as c, Fragment as T, renderList as S, withDirectives as k, toDisplayString as h, normalizeStyle as Q, withKeys as C, withModifiers as y, vModelText as B, createVNode as U, unref as R, createCommentVNode as K, renderSlot as L, nextTick as W } from "vue";
+import { _ } from "./UiBadge.vue_vue_type_script_setup_true_lang-CV8WVEXL.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 = {
+import { r as G } from "./XMarkIcon-DNvCkiOy.js";
+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" }, Z = ["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({
+}, ce = /* @__PURE__ */ V({
   __name: "TagifyInput",
   props: {
     items: {
@@ -91,8 +81,8 @@ const H = { key: 0 }, P = ["onUpdate:modelValue", "placeholder", "disabled", "on
     }
   },
   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);
+  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) => {
@@ -100,57 +90,57 @@ const H = { key: 0 }, P = ["onUpdate:modelValue", "placeholder", "disabled", "on
       },
       { 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;
+    const $ = (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], I = () => {
+      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
-        v.value = [], f.value = !1;
+        f.value = [], v.value = !1;
     }, J = () => {
-      const e = r.value.trim();
+      const e = i.value.trim();
       if (e === "")
         return;
       let a = null;
-      const l = e.toLowerCase(), u = t.items.find(
+      const l = e.toLowerCase(), r = t.items.find(
         (o) => o[t.itemText]?.toLowerCase() === l || o[t.itemSubtext]?.toLowerCase() === l
       );
-      if (u)
-        a = { ...u };
+      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)), r.value = "", v.value = [], f.value = !1;
-    }, M = (e) => {
+      ) || (n.value.push(a), m("update:value", n.value)), i.value = "", f.value = [], v.value = !1;
+    }, O = (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.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) => {
+    }, M = (e) => {
       n.value[e].isEditing = !0, W(() => {
       });
-    }, w = (e) => {
+    }, 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), x(e);
+          m("invalid-tag", l), b(e);
           return;
         }
         a[t.itemText] = l, m("update:value", n.value);
       }
     };
     return A(() => {
-      v.value = [];
-    }), b({
+      f.value = [];
+    }), N({
       selectedTags: n
-    }), (e, a) => (i(), T(j, {
+    }), (e, a) => (u(), w(j, {
       id: s.name,
       name: s.name,
       label: s.label,
@@ -160,70 +150,70 @@ const H = { key: 0 }, P = ["onUpdate:modelValue", "placeholder", "disabled", "on
       optional: s.optional
     }, {
       "tertiary-label-overlay": g(() => [
-        N(e.$slots, "tertiary-overlay")
+        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"])
+          class: F(["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),
+          (u(!0), c(T, null, S(n.value, (l, r) => (u(), w(_, {
+            key: r,
+            onClick: (o) => M(r),
             theme: "primary",
             size: "sm"
           }, {
             default: g(() => [
-              l.isEditing ? C((i(), c("input", {
+              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: L(y((o) => w(u), ["prevent"]), ["enter"]),
-                onBlur: (o) => w(u),
+                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" })
+                style: Q({ width: l[t.itemText].length + 4 + "ch" })
               }, null, 44, P)), [
                 [B, l[t.itemText]]
-              ]) : (i(), c("span", H, h(I(l)), 1)),
+              ]) : (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) => x(u), ["stop"]),
+                onClick: y((o) => b(r), ["stop"]),
                 disabled: s.disabled
               }, [
-                Q(R(G), { class: "sl-h-4 sl-w-4" })
+                U(R(G), { class: "sl-h-4 sl-w-4" })
               ], 8, X)
             ]),
             _: 2
           }, 1032, ["onClick"]))), 128)),
           d("div", Y, [
-            C(d("input", {
+            k(d("input", {
               ref: "input",
-              "onUpdate:modelValue": a[0] || (a[0] = (l) => r.value = l),
+              "onUpdate:modelValue": a[0] || (a[0] = (l) => i.value = l),
               placeholder: s.placeholder,
-              onInput: $,
+              onInput: I,
               disabled: s.disabled,
-              onKeydown: L(y(J, ["prevent"]), ["enter"]),
+              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, r.value]
+            }, null, 40, Z), [
+              [B, i.value]
             ]),
             d("div", ee, [
-              N(e.$slots, "input-overlay")
+              L(e.$slots, "input-overlay")
             ]),
-            f.value && !s.disabled ? (i(), c("div", te, [
-              (i(!0), c(S, null, k(v.value, (l) => (i(), c("div", {
+            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((u) => M(l), ["prevent"])
+                onClick: y((r) => O(l), ["prevent"])
               }, [
                 d("div", se, [
                   d("span", ae, [
-                    d("span", ne, h(q(l)), 1)
+                    d("span", ne, h($(l)), 1)
                   ]),
-                  s.showSubext ? (i(), c("span", oe, h(E(l)), 1)) : K("", !0)
+                  s.showSubext ? (u(), c("span", oe, h(q(l)), 1)) : K("", !0)
                 ])
               ], 8, le))), 128))
             ])) : K("", !0)
@@ -235,6 +225,6 @@ const H = { key: 0 }, P = ["onUpdate:modelValue", "placeholder", "disabled", "on
   }
 });
 export {
-  de as _
+  ce as _
 };
-//# sourceMappingURL=TagifyInput.vue_vue_type_script_setup_true_lang-DRR6jt_8.js.map
+//# sourceMappingURL=TagifyInput.vue_vue_type_script_setup_true_lang-CAK6ZIiz.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagifyInput.vue_vue_type_script_setup_true_lang-CAK6ZIiz.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 → TextAreaInput.vue_vue_type_script_setup_true_lang-BMpc-5ln.js}

@@ -1,10 +1,10 @@
-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 { defineComponent as S, ref as z, watch as b, computed as F, createElementBlock as n, openBlock as u, createVNode as O, unref as a, withCtx as g, createElementVNode as h, withDirectives as I, createCommentVNode as f, 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"
+  class: "sl-absolute sl-bottom-2 sl-right-2 sl-text-xs sl-text-slate-500 dark:sl-text-slate-200 sl-pointer-events-none"
 }, W = { key: 0 }, Q = /* @__PURE__ */ S({
   __name: "TextAreaInput",
   props: {
@@ -26,8 +26,8 @@ const L = { class: "sl-w-full" }, T = { class: "sl-relative" }, P = ["id", "name
     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(
+  setup(y, { expose: v, emit: k }) {
+    const s = y, d = k, t = z(), c = E(s.name), { value: l, errorMessage: p, handleBlur: w, handleChange: m, meta: o } = A(
       () => s.name,
       s.rules,
       {
@@ -36,18 +36,18 @@ const L = { class: "sl-w-full" }, T = { class: "sl-relative" }, P = ["id", "name
         syncVModel: !0
       }
     );
-    h(
+    b(
       () => s.modelValue,
       (e) => {
         e !== l.value && (l.value = e || "");
       }
-    ), h(
+    ), b(
       l,
       (e) => {
-        n("update:modelValue", e);
+        d("update:modelValue", e);
       }
     );
-    const B = F(() => {
+    const x = F(() => {
       const e = [
         "sl-w-full",
         "sl-px-3",
@@ -56,6 +56,11 @@ const L = { class: "sl-w-full" }, T = { class: "sl-relative" }, P = ["id", "name
         "sl-border",
         "sl-rounded-md",
         "sl-bg-white",
+        "dark:sl-bg-slate-900",
+        "sl-text-gray-900",
+        "dark:sl-text-slate-100",
+        "placeholder:sl-text-gray-400",
+        "dark:placeholder:sl-text-slate-500",
         "sl-transition-all",
         "sl-duration-200",
         "focus:sl-outline-none",
@@ -67,32 +72,39 @@ const L = { class: "sl-w-full" }, T = { class: "sl-relative" }, P = ["id", "name
       ];
       return s.disabled ? e.push(
         "sl-bg-gray-50",
+        "dark:sl-bg-slate-800",
         "sl-text-gray-500",
+        "dark:sl-text-slate-300",
         "sl-cursor-not-allowed",
-        "sl-border-gray-200"
-      ) : m.value ? e.push(
+        "sl-border-gray-200",
+        "dark:sl-border-slate-700"
+      ) : p.value ? e.push(
         "sl-border-red-300",
+        "dark:sl-border-red-500",
         "focus:sl-ring-red-500",
         "focus:sl-border-red-500"
-      ) : r.valid && r.touched ? e.push(
+      ) : o.valid && o.touched ? e.push(
         "sl-border-green-300",
+        "dark:sl-border-green-500",
         "focus:sl-ring-green-500",
         "focus:sl-border-green-500"
       ) : e.push(
         "sl-border-gray-300",
-        "hover:sl-border-gray-400"
+        "dark:sl-border-slate-600",
+        "hover:sl-border-gray-400",
+        "dark:hover:sl-border-slate-500"
       ), e.join(" ");
-    }), M = (e) => {
-      const o = e.target;
-      s.lazy || p(o.value);
-    }, V = (e) => {
+    }), B = (e) => {
+      const r = e.target;
+      s.lazy || m(r.value);
+    }, M = (e) => {
       if (s.lazy) {
-        const o = e.target;
-        p(o.value);
+        const r = e.target;
+        m(r.value);
       }
-      k(e), n("blur", e);
-    }, C = (e) => {
-      n("focus", e);
+      w(e), d("blur", e);
+    }, V = (e) => {
+      d("focus", e);
     };
     return v({
       focus: () => {
@@ -102,7 +114,7 @@ const L = { class: "sl-w-full" }, T = { class: "sl-relative" }, P = ["id", "name
         t.value?.blur();
       },
       textareaRef: t
-    }), (e, o) => (u(), d("div", L, [
+    }), (e, r) => (u(), n("div", L, [
       O(D, {
         id: a(c),
         name: e.name,
@@ -111,26 +123,26 @@ const L = { class: "sl-w-full" }, T = { class: "sl-relative" }, P = ["id", "name
         optional: !e.rules,
         "tertiary-label": e.tertiaryLabel,
         "box-shadow": e.boxShadow,
-        "error-message": a(m),
+        "error-message": a(p),
         "success-message": e.successMessage,
-        "is-valid": a(r).valid,
-        "is-touched": a(r).touched
+        "is-valid": a(o).valid,
+        "is-touched": a(o).touched
       }, {
         "success-message": g(() => [
-          e.successMessage ? (u(), d("span", W, i(e.successMessage), 1)) : b("", !0)
+          e.successMessage ? (u(), n("span", W, i(e.successMessage), 1)) : f("", !0)
         ]),
         default: g(() => [
-          f("div", T, [
-            I(f("textarea", N({
+          h("div", T, [
+            I(h("textarea", N({
               id: a(c),
               ref_key: "textareaRef",
               ref: t,
-              "onUpdate:modelValue": o[0] || (o[0] = (x) => R(l) ? l.value = x : null),
+              "onUpdate:modelValue": r[0] || (r[0] = (C) => R(l) ? l.value = C : null),
               name: e.name,
               disabled: e.disabled,
               placeholder: e.placeholder,
               class: [
-                B.value,
+                x.value,
                 e.inputClass
               ],
               style: e.inputStyle,
@@ -138,13 +150,13 @@ const L = { class: "sl-w-full" }, T = { class: "sl-relative" }, P = ["id", "name
               rows: e.rows,
               maxlength: e.maxlength
             }, e.$attrs, {
-              onBlur: V,
-              onFocus: C,
-              onInput: M
+              onBlur: M,
+              onFocus: V,
+              onInput: B
             }), 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)
+            e.maxlength !== void 0 ? (u(), n("div", U, i(a(l)?.length || 0) + "/" + i(e.maxlength), 1)) : f("", !0)
           ])
         ]),
         _: 1
@@ -155,4 +167,4 @@ const L = { class: "sl-w-full" }, T = { class: "sl-relative" }, P = ["id", "name
 export {
   Q as _
 };
-//# sourceMappingURL=TextAreaInput.vue_vue_type_script_setup_true_lang-CbR651TU.js.map
+//# sourceMappingURL=TextAreaInput.vue_vue_type_script_setup_true_lang-BMpc-5ln.js.map

package/dist/TextAreaInput.vue_vue_type_script_setup_true_lang-BMpc-5ln.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextAreaInput.vue_vue_type_script_setup_true_lang-BMpc-5ln.js","sources":["../src/components/inputs/TextAreaInput.vue"],"sourcesContent":["<!--\n  @component TextAreaInput\n  @description Multi-line text input with character count.\n  \n  A styled textarea component with validation, character limit display,\n  and auto-resize capability.\n  \n  @props\n  - name (string, required): Field name for form binding\n  - label (string, optional): Display label\n  - placeholder (string, optional): Placeholder text\n  - disabled (boolean, optional): Disabled state\n  - rules (Schema, optional): Validation rules\n  - modelValue (string, optional): Text value via v-model\n  - rows (number, optional): Number of visible rows\n  - maxlength (number, optional): Maximum character limit\n  - spellcheck (boolean, optional): Enable spellcheck\n  \n  @emits\n  - update:modelValue: Emitted when text changes\n  - update:validity: Emitted when validation state changes\n  \n  @example\n  <TextAreaInput\n    name=\"bio\"\n    label=\"Biography\"\n    v-model=\"form.bio\"\n    :rows=\"4\"\n    :maxlength=\"500\"\n    placeholder=\"Tell us about yourself...\"\n  />\n-->\n<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 dark:sl-text-slate-200 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    'dark:sl-bg-slate-900',\n    'sl-text-gray-900',\n    'dark:sl-text-slate-100',\n    'placeholder:sl-text-gray-400',\n    'dark:placeholder:sl-text-slate-500',\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      'dark:sl-bg-slate-800',\n      'sl-text-gray-500',\n      'dark:sl-text-slate-300',\n      'sl-cursor-not-allowed',\n      'sl-border-gray-200',\n      'dark:sl-border-slate-700'\n    )\n  } else if (errorMessage.value) {\n    baseClasses.push(\n      'sl-border-red-300',\n      'dark:sl-border-red-500',\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      'dark:sl-border-green-500',\n      'focus:sl-ring-green-500',\n      'focus:sl-border-green-500'\n    )\n  } else {\n    baseClasses.push(\n      'sl-border-gray-300',\n      'dark:sl-border-slate-600',\n      'hover:sl-border-gray-400',\n      'dark:hover:sl-border-slate-500'\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 → UiAvatar.vue_vue_type_script_setup_true_lang-Ci7VLRZx.js}

@@ -1,4 +1,4 @@
-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";
+import { defineComponent as b, ref as _, computed as s, createElementBlock as o, openBlock as u, normalizeClass as m, createCommentVNode as p, createElementVNode as z, toDisplayString as P } from "vue";
 const C = {
   key: 0,
   class: "sl-h-full sl-w-full"
@@ -9,8 +9,8 @@ const C = {
     name: {},
     imageUrl: {},
     size: { default: "md" },
-    color: { default: "sl-bg-stachelock-600" },
-    ring: { default: "sl-ring-white" },
+    color: { default: "sl-bg-primary-600 dark:sl-bg-primary-500" },
+    ring: { default: "sl-ring-white dark:sl-ring-slate-800" },
     rounded: { default: "sl-rounded-full" },
     fallbackInitials: { default: "?" },
     fallbackIcon: {},
@@ -18,26 +18,26 @@ const C = {
     namePath: { default: "name" }
   },
   setup(v) {
-    const e = v, o = _(!1), k = () => {
-      o.value = !0;
-    }, f = {
+    const e = v, i = _(!1), y = () => {
+      i.value = !0;
+    }, c = {
       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) => {
+    }, k = s(() => typeof e.size == "number" ? `sl-h-${e.size} sl-w-${e.size}` : c[e.size] || c.md), n = (l, a) => {
       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];
+      const t = Array.isArray(a) ? a : a.split(".");
+      let r = l;
+      for (const g of t)
+        if (r && typeof r == "object" && g in r)
+          r = r[g];
         else
           return;
-      return s;
-    }, m = r(() => {
+      return r;
+    }, f = s(() => {
       if (e.imageUrl) return e.imageUrl;
       if (e.data && e.imagePath) {
         const l = n(e.data, e.imagePath);
@@ -51,13 +51,13 @@ const C = {
           "photo.url",
           "picture.url"
         ];
-        for (const t of l) {
-          const a = n(e.data, t);
-          if (a) return a;
+        for (const a of l) {
+          const t = n(e.data, a);
+          if (t) return t;
         }
       }
       return null;
-    }), d = r(() => {
+    }), d = s(() => {
       if (e.name) return e.name;
       if (e.data && e.namePath) {
         const l = n(e.data, e.namePath);
@@ -71,38 +71,38 @@ const C = {
           "username",
           "title"
         ];
-        for (const t of l) {
-          const a = n(e.data, t);
-          if (a) return a;
+        for (const a of l) {
+          const t = n(e.data, a);
+          if (t) return t;
         }
       }
       return "";
-    }), h = r(() => !!m.value), y = r(() => {
+    }), h = s(() => !!f.value), w = s(() => {
       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();
+      const a = l.split(" ").filter(Boolean);
+      return a.length === 0 ? e.fallbackInitials : a.length === 1 ? a[0][0].toUpperCase() : (a[0][0] + a[a.length - 1][0]).toUpperCase();
     });
-    return (l, t) => (u(), i("div", {
-      class: c(["sl-relative sl-inline-block", [w.value, l.ring, l.rounded]])
+    return (l, a) => (u(), o("div", {
+      class: m(["sl-relative sl-inline-block", [k.value, l.ring, l.rounded]])
     }, [
-      h.value && !o.value ? (u(), i("div", C, [
+      h.value && !i.value ? (u(), o("div", C, [
         z("img", {
-          src: m.value,
+          src: f.value,
           alt: d.value,
-          class: c(["sl-h-full sl-w-full sl-object-cover", l.rounded]),
-          onError: k
+          class: m(["sl-h-full sl-w-full sl-object-cover", l.rounded]),
+          onError: y
         }, null, 42, U)
       ])) : p("", !0),
-      !h.value || o.value ? (u(), i("div", {
+      !h.value || i.value ? (u(), o("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)
+        class: m(["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(w.value), 3)) : p("", !0)
     ], 2));
   }
 });
 export {
   E as _
 };
-//# sourceMappingURL=UiAvatar.vue_vue_type_script_setup_true_lang-CDNjUA1L.js.map
+//# sourceMappingURL=UiAvatar.vue_vue_type_script_setup_true_lang-Ci7VLRZx.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UiAvatar.vue_vue_type_script_setup_true_lang-Ci7VLRZx.js","sources":["../src/components/UiAvatar.vue"],"sourcesContent":["<!--\n  @component UiAvatar\n  @description Avatar component displaying user image or initials fallback.\n  \n  Supports flexible data structures with configurable path resolution for\n  images and names. Falls back to initials when no image is available.\n  \n  @props\n  - data (object, optional): Flexible data object with image/name properties\n  - name (string, optional): Direct name for initials\n  - imageUrl (string, optional): Direct image URL\n  - size (Size | number, optional): Avatar size - 'xs' through '2xl' or number\n  - color (string, optional): Background color class for initials fallback\n  - ring (string, optional): Ring/border class\n  - rounded (string, optional): Border radius class\n  - fallbackInitials (string, optional): Fallback when no name available\n  - imagePath (string | string[], optional): Path to image in data object\n  - namePath (string | string[], optional): Path to name in data object\n  \n  @example\n  <UiAvatar name=\"John Doe\" size=\"lg\" />\n  \n  @example\n  <UiAvatar :data=\"user\" image-path=\"profile.avatar.url\" name-path=\"profile.displayName\" />\n-->\n<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\">\n/**\n * UiAvatar - User avatar component with image and initials fallback\n * \n * Displays a user avatar with automatic fallback to initials when no image\n * is available or when image fails to load. Supports flexible data structures\n * through configurable path resolution.\n * \n * ## Features\n * - Image display with error handling\n * - Automatic initials generation from name\n * - Flexible data object support with path resolution\n * - Multiple size options\n * - Customizable colors and styling\n * \n * @module components/UiAvatar\n * @see {@link AvatarType} for prop interface\n */\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-primary-600 dark:sl-bg-primary-500',\n  ring: 'sl-ring-white dark:sl-ring-slate-800',\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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"}