vlite3 1.1.1 → 1.1.4

package/components/Switch.vue.d.ts

@@ -1,8 +1,12 @@
+type SwitchVariant = 'basic' | 'card';
 interface Props {
     modelValue?: boolean;
     disabled?: boolean;
     label?: string;
     labelI18n?: string;
+    description?: string;
+    descriptionI18n?: string;
+    variant?: SwitchVariant;
     class?: string;
     id?: string;
 }
@@ -12,7 +16,8 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
     "onUpdate:modelValue"?: (value: boolean) => any;
 }>, {
     class: string;
+    variant: SwitchVariant;
     disabled: boolean;
     modelValue: boolean;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;

package/components/Switch.vue.js

@@ -1,47 +1,84 @@
-import { defineComponent as u, computed as c, openBlock as n, createElementBlock as i, createElementVNode as r, normalizeClass as t, toDisplayString as m, createCommentVNode as b } from "vue";
-import { $t as f } from "../utils/i18n.js";
-const p = { class: "flex items-center gap-2" }, g = ["id", "aria-checked", "aria-label", "disabled"], v = /* @__PURE__ */ u({
+import { defineComponent as h, computed as b, openBlock as n, createElementBlock as s, normalizeClass as i, createElementVNode as o, toDisplayString as d, createCommentVNode as u, withModifiers as v } from "vue";
+import { $t as m } from "../utils/i18n.js";
+const w = { class: "flex flex-col gap-0.5 min-w-0" }, p = {
+  key: 0,
+  class: "text-sm font-medium text-foreground leading-snug select-none"
+}, k = {
+  key: 1,
+  class: "text-xs text-muted-foreground leading-snug select-none"
+}, y = ["id", "aria-checked", "aria-label", "disabled", "data-testid"], x = ["id", "aria-checked", "aria-label", "disabled", "data-testid"], I = /* @__PURE__ */ h({
   __name: "Switch",
   props: {
     modelValue: { type: Boolean, default: !1 },
     disabled: { type: Boolean, default: !1 },
     label: {},
     labelI18n: {},
+    description: {},
+    descriptionI18n: {},
+    variant: { default: "basic" },
     class: { default: "" },
     id: {}
   },
   emits: ["update:modelValue"],
-  setup(e, { emit: s }) {
-    const l = e, d = s, o = () => {
-      l.disabled || d("update:modelValue", !l.modelValue);
-    }, a = c(() => l.labelI18n ? f(l.labelI18n) : l.label);
-    return (h, k) => (n(), i("div", p, [
-      r("button", {
+  setup(e, { emit: f }) {
+    const a = e, g = f, r = () => {
+      a.disabled || g("update:modelValue", !a.modelValue);
+    }, t = b(() => a.labelI18n ? m(a.labelI18n) : a.label), c = b(
+      () => a.descriptionI18n ? m(a.descriptionI18n) : a.description
+    );
+    return (l, $) => e.variant === "card" ? (n(), s("div", {
+      key: 0,
+      class: i(["flex items-start justify-between gap-4 w-full rounded-md border border-border bg-background px-4 py-3 cursor-pointer", e.disabled ? "opacity-50 pointer-events-none" : ""]),
+      onClick: r
+    }, [
+      o("div", w, [
+        t.value ? (n(), s("span", p, d(t.value), 1)) : u("", !0),
+        c.value ? (n(), s("span", k, d(c.value), 1)) : u("", !0)
+      ]),
+      o("button", {
         id: e.id,
         type: "button",
         role: "switch",
         "aria-checked": e.modelValue,
-        "aria-label": a.value || "Toggle",
+        "aria-label": t.value || "Toggle",
         disabled: e.disabled,
-        class: t(["relative inline-flex h-5.5 w-10.5 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", [e.modelValue ? "bg-primary" : "bg-input", l.class]]),
-        onClick: o
+        class: i(["relative mt-0.5 inline-flex h-5.5 w-10.5 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", e.modelValue ? "bg-primary" : "bg-input"]),
+        "data-testid": l.$attrs["data-testid"] || (l.$attrs.name ? `switch-${l.$attrs.name}` : e.id ? `switch-${e.id}` : t.value ? `switch-${t.value.toString().toLowerCase().replace(/[^a-z0-9]+/g, "-")}` : "switch"),
+        onClick: v(r, ["stop"])
       }, [
-        r("span", {
+        o("span", {
           "aria-hidden": "true",
-          class: t([
-            "pointer-events-none inline-block h-4.5 w-4.5 transform rounded-full bg-background shadow-lg ring-0 transition duration-200 ease-in-out",
-            e.modelValue ? "translate-x-5  rtl:translate-x-0" : "translate-x-0 rtl:-translate-x-5"
-          ])
+          class: i(["pointer-events-none inline-block h-4.5 w-4.5 transform rounded-full bg-background shadow-lg ring-0 transition duration-200 ease-in-out", e.modelValue ? "translate-x-5 rtl:translate-x-0" : "translate-x-0 rtl:-translate-x-5"])
         }, null, 2)
-      ], 10, g),
-      a.value ? (n(), i("label", {
+      ], 10, y)
+    ], 2)) : (n(), s("div", {
+      key: 1,
+      class: i(["inline-flex items-center gap-2", a.class])
+    }, [
+      o("button", {
+        id: e.id,
+        type: "button",
+        role: "switch",
+        "aria-checked": e.modelValue,
+        "aria-label": t.value || "Toggle",
+        disabled: e.disabled,
+        class: i(["relative inline-flex h-5.5 w-10.5 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", e.modelValue ? "bg-primary" : "bg-input"]),
+        "data-testid": l.$attrs["data-testid"] || (l.$attrs.name ? `switch-${l.$attrs.name}` : e.id ? `switch-${e.id}` : t.value ? `switch-${t.value.toString().toLowerCase().replace(/[^a-z0-9]+/g, "-")}` : "switch"),
+        onClick: r
+      }, [
+        o("span", {
+          "aria-hidden": "true",
+          class: i(["pointer-events-none inline-block h-4.5 w-4.5 transform rounded-full bg-background shadow-lg ring-0 transition duration-200 ease-in-out", e.modelValue ? "translate-x-5 rtl:translate-x-0" : "translate-x-0 rtl:-translate-x-5"])
+        }, null, 2)
+      ], 10, x),
+      t.value ? (n(), s("label", {
         key: 0,
-        class: t([e.disabled ? "opacity-50" : "", "text-sm font-medium text-foreground cursor-pointer"]),
-        onClick: o
-      }, m(a.value), 3)) : b("", !0)
-    ]));
+        class: i([e.disabled ? "opacity-50" : "", "text-sm font-medium text-foreground cursor-pointer"]),
+        onClick: r
+      }, d(t.value), 3)) : u("", !0)
+    ], 2));
   }
 });
 export {
-  v as default
+  I as default
 };

package/components/TagInput/TagInput.vue.d.ts

@@ -0,0 +1,187 @@
+interface Props {
+    modelValue?: string[];
+    placeholder?: string;
+    placeholderI18n?: string;
+    disabled?: boolean;
+    maxTags?: number;
+    variant?: 'outline' | 'solid' | 'transparent' | 'outline-b' | 'floating';
+    size?: 'sm' | 'md' | 'lg';
+    rounded?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+    error?: string;
+    class?: string;
+}
+declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    change: (value: string[]) => any;
+    "update:modelValue": (value: string[]) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    onChange?: (value: string[]) => any;
+    "onUpdate:modelValue"?: (value: string[]) => any;
+}>, {
+    class: string;
+    variant: "outline" | "solid" | "transparent" | "outline-b" | "floating";
+    size: "sm" | "md" | "lg";
+    rounded: "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+    placeholder: string;
+    disabled: boolean;
+    modelValue: string[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
+    inputRef: {
+        $: import('vue').ComponentInternalInstance;
+        $data: {};
+        $props: Partial<{
+            type: import('../..').InputType;
+            class: string;
+            variant: import('../..').InputVariant;
+            size: import('../..').InputSize;
+            rounded: import('../..').InputRounded;
+            loading: boolean;
+            readonly: boolean;
+            disabled: boolean;
+            modelValue: string | number;
+            rows: number;
+            showClearButton: boolean;
+            autofocus: boolean;
+            inputClass: string;
+            lazy: boolean;
+            labelPosition: import('../..').LabelPosition;
+            addonLeftClass: string;
+            addonRightClass: string;
+        }> & Omit<{
+            readonly modelValue?: string | number;
+            readonly type?: import('../..').InputType;
+            readonly label?: string;
+            readonly labelI18n?: string;
+            readonly placeholder?: string;
+            readonly placeholderI18n?: string;
+            readonly disabled?: boolean;
+            readonly readonly?: boolean;
+            readonly loading?: boolean;
+            readonly error?: string;
+            readonly icon?: string;
+            readonly iconClass?: string;
+            readonly iconRight?: string;
+            readonly iconRightClass?: string;
+            readonly showClearButton?: boolean;
+            readonly autofocus?: boolean;
+            readonly class?: string;
+            readonly inputClass?: string;
+            readonly rows?: number;
+            readonly lazy?: boolean;
+            readonly variant?: import('../..').InputVariant;
+            readonly size?: import('../..').InputSize;
+            readonly rounded?: import('../..').InputRounded;
+            readonly labelPosition?: import('../..').LabelPosition;
+            readonly addonLeft?: string | Record<string, any>;
+            readonly addonRight?: string | Record<string, any>;
+            readonly addonLeftClass?: string;
+            readonly addonRightClass?: string;
+            readonly min?: number;
+            readonly max?: number;
+            readonly onBlur?: (event: FocusEvent) => any;
+            readonly onFocus?: (event: FocusEvent) => any;
+            readonly onChange?: (value: string | number) => any;
+            readonly "onUpdate:modelValue"?: (value: string | number) => any;
+            readonly "onClick:icon"?: (event: MouseEvent) => any;
+            readonly "onClick:icon-right"?: (event: MouseEvent) => any;
+        } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, "type" | "class" | "variant" | "size" | "rounded" | "loading" | "readonly" | "disabled" | "modelValue" | "rows" | "showClearButton" | "autofocus" | "inputClass" | "lazy" | "labelPosition" | "addonLeftClass" | "addonRightClass">;
+        $attrs: {
+            [x: string]: unknown;
+        };
+        $refs: {
+            [x: string]: unknown;
+        } & {
+            inputRef: HTMLInputElement;
+        };
+        $slots: Readonly<{
+            [name: string]: import('vue').Slot<any>;
+        }>;
+        $root: import('vue').ComponentPublicInstance | null;
+        $parent: import('vue').ComponentPublicInstance | null;
+        $host: Element | null;
+        $emit: ((event: "blur", event: FocusEvent) => void) & ((event: "focus", event: FocusEvent) => void) & ((event: "change", value: string | number) => void) & ((event: "update:modelValue", value: string | number) => void) & ((event: "click:icon", event: MouseEvent) => void) & ((event: "click:icon-right", event: MouseEvent) => void);
+        $el: HTMLDivElement;
+        $options: import('vue').ComponentOptionsBase<Readonly<import('../..').InputProps> & Readonly<{
+            onBlur?: (event: FocusEvent) => any;
+            onFocus?: (event: FocusEvent) => any;
+            onChange?: (value: string | number) => any;
+            "onUpdate:modelValue"?: (value: string | number) => any;
+            "onClick:icon"?: (event: MouseEvent) => any;
+            "onClick:icon-right"?: (event: MouseEvent) => any;
+        }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+            blur: (event: FocusEvent) => any;
+            focus: (event: FocusEvent) => any;
+            change: (value: string | number) => any;
+            "update:modelValue": (value: string | number) => any;
+            "click:icon": (event: MouseEvent) => any;
+            "click:icon-right": (event: MouseEvent) => any;
+        }, string, {
+            type: import('../..').InputType;
+            class: string;
+            variant: import('../..').InputVariant;
+            size: import('../..').InputSize;
+            rounded: import('../..').InputRounded;
+            loading: boolean;
+            readonly: boolean;
+            disabled: boolean;
+            modelValue: string | number;
+            rows: number;
+            showClearButton: boolean;
+            autofocus: boolean;
+            inputClass: string;
+            lazy: boolean;
+            labelPosition: import('../..').LabelPosition;
+            addonLeftClass: string;
+            addonRightClass: string;
+        }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
+            beforeCreate?: (() => void) | (() => void)[];
+            created?: (() => void) | (() => void)[];
+            beforeMount?: (() => void) | (() => void)[];
+            mounted?: (() => void) | (() => void)[];
+            beforeUpdate?: (() => void) | (() => void)[];
+            updated?: (() => void) | (() => void)[];
+            activated?: (() => void) | (() => void)[];
+            deactivated?: (() => void) | (() => void)[];
+            beforeDestroy?: (() => void) | (() => void)[];
+            beforeUnmount?: (() => void) | (() => void)[];
+            destroyed?: (() => void) | (() => void)[];
+            unmounted?: (() => void) | (() => void)[];
+            renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
+            errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
+        };
+        $forceUpdate: () => void;
+        $nextTick: typeof import('vue').nextTick;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
+    } & Readonly<{
+        type: import('../..').InputType;
+        class: string;
+        variant: import('../..').InputVariant;
+        size: import('../..').InputSize;
+        rounded: import('../..').InputRounded;
+        loading: boolean;
+        readonly: boolean;
+        disabled: boolean;
+        modelValue: string | number;
+        rows: number;
+        showClearButton: boolean;
+        autofocus: boolean;
+        inputClass: string;
+        lazy: boolean;
+        labelPosition: import('../..').LabelPosition;
+        addonLeftClass: string;
+        addonRightClass: string;
+    }> & Omit<Readonly<import('../..').InputProps> & Readonly<{
+        onBlur?: (event: FocusEvent) => any;
+        onFocus?: (event: FocusEvent) => any;
+        onChange?: (value: string | number) => any;
+        "onUpdate:modelValue"?: (value: string | number) => any;
+        "onClick:icon"?: (event: MouseEvent) => any;
+        "onClick:icon-right"?: (event: MouseEvent) => any;
+    }>, "type" | "class" | "variant" | "size" | "rounded" | "loading" | "readonly" | "disabled" | "modelValue" | "rows" | "showClearButton" | "autofocus" | "inputClass" | "lazy" | "labelPosition" | "addonLeftClass" | "addonRightClass"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
+        $slots: {
+            'addon-left'?(_: {}): any;
+            'addon-right'?(_: {}): any;
+        };
+    };
+}, HTMLDivElement>;
+export default _default;

package/components/TagInput/TagInput.vue.js

@@ -0,0 +1,113 @@
+import { defineComponent as k, ref as g, computed as z, openBlock as i, createElementBlock as c, normalizeClass as p, createVNode as h, Fragment as C, renderList as I, createTextVNode as D, toDisplayString as $, createElementVNode as B, withModifiers as E, createCommentVNode as N } from "vue";
+import R from "../Icon.vue.js";
+import M from "../Input.vue.js";
+/* empty css            */
+import { $t as x } from "../../utils/i18n.js";
+const P = {
+  key: 0,
+  class: "flex flex-wrap gap-1.5 mt-2.5"
+}, j = ["disabled", "onClick"], F = /* @__PURE__ */ k({
+  __name: "TagInput",
+  props: {
+    modelValue: { default: () => [] },
+    placeholder: { default: "Add tag..." },
+    placeholderI18n: {},
+    disabled: { type: Boolean, default: !1 },
+    maxTags: {},
+    variant: { default: "outline" },
+    size: { default: "md" },
+    rounded: { default: "md" },
+    error: {},
+    class: { default: "" }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(l, { emit: v }) {
+    const e = l, d = v, r = g(""), u = g(null), m = (t, a, o) => {
+      const n = o ? x(t, o) : x(t);
+      return n !== t ? n : a;
+    }, V = z(() => e.maxTags && e.modelValue.length >= e.maxTags ? m("vlite.tagInput.maxTagsReached", "Max tags reached") : e.placeholderI18n ? m(e.placeholderI18n, e.placeholder) : e.placeholder), b = () => {
+      if (u.value) {
+        const t = u.value.$el || u.value, a = t instanceof HTMLElement ? t.querySelector("input") : null;
+        a && a.focus();
+      }
+    }, f = () => {
+      if (e.disabled) return;
+      const t = r.value.trim();
+      if (t) {
+        if (e.maxTags && e.modelValue.length >= e.maxTags) {
+          r.value = "";
+          return;
+        }
+        if (!e.modelValue.includes(t)) {
+          const a = [...e.modelValue, t];
+          d("update:modelValue", a), d("change", a);
+        }
+        r.value = "", b();
+      }
+    }, T = (t) => {
+      if (e.disabled) return;
+      const a = [...e.modelValue];
+      a.splice(t, 1), d("update:modelValue", a), d("change", a);
+    }, y = (t) => {
+      (t.key === "Enter" || t.key === ",") && (t.preventDefault(), f());
+    }, w = (t) => {
+      if (e.disabled) return;
+      const a = t.clipboardData?.getData("text");
+      if (a && a.includes(",")) {
+        t.preventDefault();
+        const o = a.split(",").map((s) => s.trim()).filter(Boolean);
+        let n = [...e.modelValue];
+        for (const s of o) {
+          if (e.maxTags && n.length >= e.maxTags) break;
+          n.includes(s) || n.push(s);
+        }
+        d("update:modelValue", n), d("change", n), r.value = "";
+      }
+    };
+    return (t, a) => (i(), c("div", {
+      class: p(["w-full flex flex-col", e.class])
+    }, [
+      h(M, {
+        ref_key: "inputRef",
+        ref: u,
+        modelValue: r.value,
+        "onUpdate:modelValue": a[0] || (a[0] = (o) => r.value = o),
+        placeholder: V.value,
+        disabled: l.disabled || (l.maxTags ? l.modelValue.length >= l.maxTags : !1),
+        variant: l.variant,
+        size: l.size,
+        rounded: l.rounded,
+        error: l.error,
+        "show-clear-button": !1,
+        "icon-right": "lucide:plus",
+        "onClick:iconRight": f,
+        onKeydown: y,
+        onPaste: w
+      }, null, 8, ["modelValue", "placeholder", "disabled", "variant", "size", "rounded", "error"]),
+      l.modelValue.length > 0 ? (i(), c("div", P, [
+        (i(!0), c(C, null, I(l.modelValue, (o, n) => (i(), c("span", {
+          key: o + n,
+          class: p(["inline-flex items-center justify-center gap-1 bg-accent text-accent-foreground border border-border whitespace-nowrap px-2 py-0.5", [
+            l.size === "sm" ? "text-[10px] rounded-sm" : l.size === "lg" ? "text-sm rounded-md px-2.5 py-1" : "text-xs rounded"
+          ]])
+        }, [
+          D($(o) + " ", 1),
+          B("button", {
+            type: "button",
+            class: "hover:text-foreground focus:outline-none disabled:opacity-50 text-muted-foreground hover:text-destructive transition-colors flex items-center justify-center",
+            disabled: l.disabled,
+            onClick: E((s) => T(n), ["stop"])
+          }, [
+            h(R, {
+              icon: "lucide:x",
+              class: "w-3 h-3"
+            })
+          ], 8, j)
+        ], 2))), 128))
+      ])) : N("", !0)
+    ], 2));
+  }
+});
+export {
+  F as default
+};

package/components/TagInput/TagInput.vue2.js

@@ -0,0 +1,4 @@
+import f from "./TagInput.vue.js";
+export {
+  f as default
+};

package/components/TagInput/index.d.ts

@@ -0,0 +1 @@
+export { default as TagInput } from './TagInput.vue';

package/components/Textarea.vue.js

@@ -1,6 +1,6 @@
-import { defineComponent as i, computed as r, openBlock as p, createElementBlock as m, normalizeClass as f } from "vue";
+import { defineComponent as c, computed as r, openBlock as p, createElementBlock as m, normalizeClass as f } from "vue";
 import { $t as b } from "../utils/i18n.js";
-const x = ["value", "rows", "disabled", "placeholder"], g = /* @__PURE__ */ i({
+const h = ["value", "rows", "disabled", "placeholder", "data-testid"], g = /* @__PURE__ */ c({
   __name: "Textarea",
   props: {
     modelValue: { default: "" },
@@ -11,26 +11,27 @@ const x = ["value", "rows", "disabled", "placeholder"], g = /* @__PURE__ */ i({
     class: { default: "" }
   },
   emits: ["update:modelValue", "focus", "blur"],
-  setup(l, { emit: s }) {
-    const o = l, t = s, n = r(() => [
+  setup(t, { emit: s }) {
+    const a = t, o = s, n = r(() => [
       "flex min-h-[80px] w-full rounded-md border border-input px-3 py-2 text-sm placeholder:text-muted-foreground/50 focus-visible:outline-none focus-visible:border-black disabled:cursor-not-allowed disabled:opacity-50 bg-background text-foreground",
-      o.class
-    ].join(" ")), u = (d) => {
-      const e = d.target;
-      t("update:modelValue", e.value);
-    }, c = r(
-      () => o.placeholderI18n ? b(o.placeholderI18n) : o.placeholder
+      a.class
+    ].join(" ")), u = (l) => {
+      const e = l.target;
+      o("update:modelValue", e.value);
+    }, i = r(
+      () => a.placeholderI18n ? b(a.placeholderI18n) : a.placeholder
     );
-    return (d, e) => (p(), m("textarea", {
-      value: l.modelValue,
-      rows: l.rows,
-      disabled: l.disabled,
-      placeholder: c.value,
+    return (l, e) => (p(), m("textarea", {
+      value: t.modelValue,
+      rows: t.rows,
+      disabled: t.disabled,
+      placeholder: i.value,
       class: f(n.value),
       onInput: u,
-      onFocus: e[0] || (e[0] = (a) => t("focus", a)),
-      onBlur: e[1] || (e[1] = (a) => t("blur", a))
-    }, null, 42, x));
+      onFocus: e[0] || (e[0] = (d) => o("focus", d)),
+      onBlur: e[1] || (e[1] = (d) => o("blur", d)),
+      "data-testid": l.$attrs["data-testid"] || (l.$attrs.name ? `textarea-${l.$attrs.name}` : "textarea")
+    }, null, 42, h));
   }
 });
 export {

package/components/ThumbnailSelector/ThumbnailSelector.vue.d.ts

@@ -27,9 +27,9 @@ declare const _default: import('vue').DefineComponent<ThumbnailSelectorProps, {}
     "onUpdate:images"?: (value: string[]) => any;
     "onUpdate:thumbnail"?: (value: string) => any;
 }>, {
-    disabled: boolean;
     loading: boolean;
-    images: string[];
     thumbnail: string | null;
+    disabled: boolean;
+    images: string[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
 export default _default;

package/components/ThumbnailSelector/ThumbnailSelector.vue.js

@@ -1,7 +1,7 @@
 import o from "./ThumbnailSelector.vue2.js";
 /* empty css                       */
 import t from "../../_virtual/_plugin-vue_export-helper.js";
-const e = /* @__PURE__ */ t(o, [["__scopeId", "data-v-74a988ab"]]);
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-9fd1363d"]]);
 export {
-  e as default
+  p as default
 };

package/components/ThumbnailSelector/ThumbnailSelector.vue2.js

@@ -1,9 +1,9 @@
-import { defineComponent as L, ref as w, watch as _, computed as m, openBlock as i, createElementBlock as d, toDisplayString as p, createCommentVNode as g, createElementVNode as v, createVNode as f, unref as P, withCtx as k, Fragment as V, renderList as F, normalizeClass as S, withModifiers as C, createBlock as y } from "vue";
+import { defineComponent as L, ref as w, watch as k, computed as m, openBlock as i, createElementBlock as d, toDisplayString as p, createCommentVNode as g, createElementVNode as v, createVNode as f, unref as P, withCtx as _, Fragment as V, renderList as F, normalizeClass as S, withModifiers as C, createBlock as y } from "vue";
 import h from "../Icon.vue.js";
 import M from "../FilePicker/FilePicker.vue.js";
 import { VueDraggable as O } from "vue-draggable-plus";
 import { $t as z } from "../../utils/i18n.js";
-const q = { class: "vl-thumbnail-selector flex flex-col gap-3" }, G = {
+const q = ["data-testid"], G = {
   key: 0,
   class: "text-sm font-medium text-foreground"
 }, H = {
@@ -27,14 +27,14 @@ const q = { class: "vl-thumbnail-selector flex flex-col gap-3" }, G = {
     label: {}
   },
   emits: ["update:images", "update:thumbnail", "change"],
-  setup(l, { emit: j }) {
-    const c = l, n = j, r = w([...c.images || []]), o = w(c.thumbnail ?? null);
-    _(
+  setup(l, { emit: $ }) {
+    const c = l, n = $, r = w([...c.images || []]), o = w(c.thumbnail ?? null);
+    k(
       () => c.images,
       (e) => {
         r.value = [...e || []];
       }
-    ), _(
+    ), k(
       () => c.thumbnail,
       (e) => {
         o.value = e ?? null;
@@ -43,7 +43,7 @@ const q = { class: "vl-thumbnail-selector flex flex-col gap-3" }, G = {
     const x = m(() => o.value || r.value[0] || null), b = (e, u, t) => {
       const a = t ? z(e, t) : z(e);
       return a !== e ? a : u;
-    }, T = m(() => b("vlite.thumbnailSelector.preview", "Thumbnail preview")), U = m(() => b("vlite.thumbnailSelector.noImageSelected", "No image selected")), I = m(() => b("vlite.thumbnailSelector.image", "Image")), R = m(() => b("vlite.thumbnailSelector.removeImage", "Remove image")), $ = m(() => b("vlite.thumbnailSelector.upload", "Upload")), B = m(() => b("vlite.thumbnailSelector.dragToReorder", "Drag to reorder")), D = (e) => {
+    }, j = m(() => b("vlite.thumbnailSelector.preview", "Thumbnail preview")), T = m(() => b("vlite.thumbnailSelector.noImageSelected", "No image selected")), U = m(() => b("vlite.thumbnailSelector.image", "Image")), I = m(() => b("vlite.thumbnailSelector.removeImage", "Remove image")), R = m(() => b("vlite.thumbnailSelector.upload", "Upload")), B = m(() => b("vlite.thumbnailSelector.dragToReorder", "Drag to reorder")), D = (e) => {
       c.disabled || c.loading || (o.value = e, n("update:thumbnail", e), n("change", { images: r.value, thumbnail: e }));
     }, N = (e, u) => {
       if (u.stopPropagation(), c.disabled || c.loading) return;
@@ -68,20 +68,23 @@ const q = { class: "vl-thumbnail-selector flex flex-col gap-3" }, G = {
     }, E = (e) => {
       r.value = e, n("update:images", e), n("change", { images: e, thumbnail: o.value });
     };
-    return (e, u) => (i(), d("div", q, [
+    return (e, u) => (i(), d("div", {
+      class: "vl-thumbnail-selector flex flex-col gap-3",
+      "data-testid": e.$attrs["data-testid"] || (e.$attrs.name ? `thumbnail-${e.$attrs.name}` : "thumbnail-selector")
+    }, [
       l.label ? (i(), d("p", G, p(l.label), 1)) : g("", !0),
       v("div", H, [
         x.value ? (i(), d("img", {
           key: 0,
           src: x.value,
           class: "w-full h-full object-cover",
-          alt: T.value
+          alt: j.value
         }, null, 8, J)) : (i(), d("div", K, [
           f(h, {
             icon: "lucide:image",
             class: "w-10 h-10"
           }),
-          v("span", Q, p(U.value), 1)
+          v("span", Q, p(T.value), 1)
         ]))
       ]),
       f(P(O), {
@@ -96,7 +99,7 @@ const q = { class: "vl-thumbnail-selector flex flex-col gap-3" }, G = {
         class: "vl-thumbnail-selector__grid grid grid-cols-3 sm:grid-cols-4 gap-2",
         style: { "will-change": "transform", contain: "layout style" }
       }, {
-        default: k(() => [
+        default: _(() => [
           (i(!0), d(V, null, F(r.value, (t, a) => (i(), d("div", {
             key: t,
             class: S(["vl-thumbnail-selector__card relative rounded-md overflow-hidden cursor-pointer border-2 transition-all duration-150 w-full", [
@@ -109,7 +112,7 @@ const q = { class: "vl-thumbnail-selector flex flex-col gap-3" }, G = {
             v("img", {
               src: t,
               class: "w-full h-full object-cover",
-              alt: `${I.value} ${a + 1}`
+              alt: `${U.value} ${a + 1}`
             }, null, 8, X),
             l.disabled ? g("", !0) : (i(), d("div", {
               key: 0,
@@ -127,7 +130,7 @@ const q = { class: "vl-thumbnail-selector flex flex-col gap-3" }, G = {
               key: 1,
               type: "button",
               class: "vl-thumbnail-selector__delete absolute top-0.5 right-0.5 z-10 w-5 h-5 flex items-center justify-center rounded-full bg-background/90 border border-border text-muted-foreground shadow-sm opacity-0 transition-opacity duration-150 hover:text-destructive hover:border-destructive",
-              title: R.value,
+              title: I.value,
               onClick: C((s) => N(t, s), ["stop"])
             }, [
               f(h, {
@@ -152,7 +155,7 @@ const q = { class: "vl-thumbnail-selector flex flex-col gap-3" }, G = {
             class: "vl-thumbnail-selector__filepicker-inline",
             onChange: A
           }, {
-            trigger: k(({ trigger: t, isLoading: a }) => [
+            trigger: _(({ trigger: t, isLoading: a }) => [
               v("button", {
                 type: "button",
                 class: S(["vl-thumbnail-selector__upload flex flex-col items-center justify-center rounded-md border-2 border-dashed border-border text-muted-foreground/60 hover:border-primary/50 hover:text-primary/60 transition-all cursor-pointer w-full", a || l.loading ? "opacity-60 pointer-events-none" : ""]),
@@ -168,7 +171,7 @@ const q = { class: "vl-thumbnail-selector flex flex-col gap-3" }, G = {
                   icon: "lucide:plus",
                   class: "w-5 h-5"
                 })),
-                v("span", le, p($.value), 1)
+                v("span", le, p(R.value), 1)
               ], 10, te)
             ]),
             _: 1
@@ -176,7 +179,7 @@ const q = { class: "vl-thumbnail-selector flex flex-col gap-3" }, G = {
         ]),
         _: 1
       }, 8, ["model-value", "disabled"])
-    ]));
+    ], 8, q));
   }
 });
 export {