@gxp-dev/mod-ui 2.0.0

package/dist/components/compositions/elements/editor/RichTextEditor.vue2.js

@@ -0,0 +1,265 @@
+import { defineComponent as B, watch as m, onBeforeUnmount as H, computed as r, openBlock as s, createBlock as u, unref as d, withCtx as b, createElementVNode as h, normalizeClass as f, createElementBlock as C, Fragment as L, renderList as q, resolveDynamicComponent as w, normalizeStyle as E, createCommentVNode as V } from "vue";
+import { useEditor as z, EditorContent as S } from "@tiptap/vue-3";
+import I from "@tiptap/starter-kit";
+import { Bold as M, Italic as R, Strikethrough as T, Code as U, Heading1 as $, Heading2 as O, Heading3 as D, List as F, ListOrdered as N, Quote as P, Minus as _, Undo as K, Redo as Q } from "lucide-vue-next";
+import "../../../ui/button/index.js";
+import j from "../../../ui/field-frame/FieldFrame.vue.js";
+import { cn as G } from "../../../../lib/utils.js";
+import J from "../../../ui/button/Button.vue.js";
+const W = ["data-element-name"], ae = /* @__PURE__ */ B({
+  __name: "RichTextEditor",
+  props: {
+    modelValue: {},
+    id: {},
+    name: {},
+    label: {},
+    hideLabel: { type: Boolean },
+    placeholder: {},
+    required: { type: Boolean },
+    readonly: { type: Boolean },
+    disabled: { type: Boolean },
+    helpText: {},
+    errors: { default: () => [] },
+    minHeight: { default: "12rem" },
+    extensions: { default: () => [] }
+  },
+  emits: ["update:modelValue"],
+  setup(a, { emit: g }) {
+    const i = a, y = g, t = z({
+      content: i.modelValue ?? "",
+      editable: !(i.disabled || i.readonly),
+      extensions: [
+        I,
+        ...i.extensions
+      ],
+      onUpdate: ({ editor: e }) => {
+        y("update:modelValue", e.getHTML());
+      }
+    });
+    m(
+      () => i.modelValue,
+      (e) => {
+        const n = t.value;
+        if (!n)
+          return;
+        const l = e ?? "";
+        l !== n.getHTML() && n.commands.setContent(l, { emitUpdate: !1 });
+      }
+    ), m(
+      () => [i.disabled, i.readonly],
+      ([e, n]) => {
+        var l;
+        (l = t.value) == null || l.setEditable(!(e || n));
+      }
+    ), H(() => {
+      var e;
+      (e = t.value) == null || e.destroy();
+    });
+    const k = r(() => i.errors.length > 0), c = r(() => !!i.disabled), p = r(() => !!i.readonly), v = r(() => c.value || p.value), x = r(() => ({
+      minHeight: i.minHeight
+    }));
+    function o(e, n) {
+      const l = t.value;
+      return l ? n ? l.isActive(e, n) : l.isActive(e) : !1;
+    }
+    const A = r(() => [
+      {
+        key: "bold",
+        label: "Bold",
+        icon: M,
+        isActive: () => o("bold"),
+        run: () => {
+          var e;
+          return (e = t.value) == null ? void 0 : e.chain().focus().toggleBold().run();
+        }
+      },
+      {
+        key: "italic",
+        label: "Italic",
+        icon: R,
+        isActive: () => o("italic"),
+        run: () => {
+          var e;
+          return (e = t.value) == null ? void 0 : e.chain().focus().toggleItalic().run();
+        }
+      },
+      {
+        key: "strike",
+        label: "Strikethrough",
+        icon: T,
+        isActive: () => o("strike"),
+        run: () => {
+          var e;
+          return (e = t.value) == null ? void 0 : e.chain().focus().toggleStrike().run();
+        }
+      },
+      {
+        key: "code",
+        label: "Inline code",
+        icon: U,
+        isActive: () => o("code"),
+        run: () => {
+          var e;
+          return (e = t.value) == null ? void 0 : e.chain().focus().toggleCode().run();
+        }
+      },
+      {
+        key: "h1",
+        label: "Heading 1",
+        icon: $,
+        isActive: () => o("heading", { level: 1 }),
+        run: () => {
+          var e;
+          return (e = t.value) == null ? void 0 : e.chain().focus().toggleHeading({ level: 1 }).run();
+        }
+      },
+      {
+        key: "h2",
+        label: "Heading 2",
+        icon: O,
+        isActive: () => o("heading", { level: 2 }),
+        run: () => {
+          var e;
+          return (e = t.value) == null ? void 0 : e.chain().focus().toggleHeading({ level: 2 }).run();
+        }
+      },
+      {
+        key: "h3",
+        label: "Heading 3",
+        icon: D,
+        isActive: () => o("heading", { level: 3 }),
+        run: () => {
+          var e;
+          return (e = t.value) == null ? void 0 : e.chain().focus().toggleHeading({ level: 3 }).run();
+        }
+      },
+      {
+        key: "bullet-list",
+        label: "Bullet list",
+        icon: F,
+        isActive: () => o("bulletList"),
+        run: () => {
+          var e;
+          return (e = t.value) == null ? void 0 : e.chain().focus().toggleBulletList().run();
+        }
+      },
+      {
+        key: "ordered-list",
+        label: "Ordered list",
+        icon: N,
+        isActive: () => o("orderedList"),
+        run: () => {
+          var e;
+          return (e = t.value) == null ? void 0 : e.chain().focus().toggleOrderedList().run();
+        }
+      },
+      {
+        key: "blockquote",
+        label: "Blockquote",
+        icon: P,
+        isActive: () => o("blockquote"),
+        run: () => {
+          var e;
+          return (e = t.value) == null ? void 0 : e.chain().focus().toggleBlockquote().run();
+        }
+      },
+      {
+        key: "horizontal-rule",
+        label: "Horizontal rule",
+        icon: _,
+        isActive: () => !1,
+        run: () => {
+          var e;
+          return (e = t.value) == null ? void 0 : e.chain().focus().setHorizontalRule().run();
+        }
+      },
+      {
+        key: "undo",
+        label: "Undo",
+        icon: K,
+        isActive: () => !1,
+        run: () => {
+          var e;
+          return (e = t.value) == null ? void 0 : e.chain().focus().undo().run();
+        },
+        disabled: () => {
+          var e;
+          return !((e = t.value) != null && e.can().chain().focus().undo().run());
+        }
+      },
+      {
+        key: "redo",
+        label: "Redo",
+        icon: Q,
+        isActive: () => !1,
+        run: () => {
+          var e;
+          return (e = t.value) == null ? void 0 : e.chain().focus().redo().run();
+        },
+        disabled: () => {
+          var e;
+          return !((e = t.value) != null && e.can().chain().focus().redo().run());
+        }
+      }
+    ]);
+    return (e, n) => (s(), u(d(j), {
+      label: a.label,
+      required: a.required,
+      "hide-label": a.hideLabel,
+      for: a.id,
+      "help-text": a.helpText,
+      errors: a.errors,
+      "data-testid": "rich-text-editor"
+    }, {
+      default: b(() => [
+        h("div", {
+          class: f(
+            d(G)(
+              "rounded-md border border-input bg-background shadow-sm overflow-hidden",
+              k.value ? "border-destructive ring-1 ring-destructive" : "",
+              c.value ? "opacity-60" : ""
+            )
+          ),
+          "data-element-name": a.name ?? void 0
+        }, [
+          h("div", {
+            class: f(["flex flex-wrap items-center gap-1 border-b bg-muted/30 px-2 py-1", v.value ? "pointer-events-none opacity-50" : ""]),
+            role: "toolbar",
+            "aria-label": "Formatting",
+            "data-testid": "rich-text-editor-toolbar"
+          }, [
+            (s(!0), C(L, null, q(A.value, (l) => (s(), u(d(J), {
+              key: l.key,
+              type: "button",
+              size: "icon-sm",
+              variant: l.isActive() ? "secondary" : "ghost",
+              disabled: v.value || (l.disabled ? l.disabled() : !1),
+              "aria-label": l.label,
+              title: l.label,
+              "data-testid": `rich-text-editor-toolbar-${l.key}`,
+              "aria-pressed": l.isActive(),
+              onClick: (X) => l.run()
+            }, {
+              default: b(() => [
+                (s(), u(w(l.icon)))
+              ]),
+              _: 2
+            }, 1032, ["variant", "disabled", "aria-label", "title", "data-testid", "aria-pressed", "onClick"]))), 128))
+          ], 2),
+          d(t) ? (s(), u(d(S), {
+            key: 0,
+            editor: d(t),
+            style: E(x.value),
+            class: "prose prose-sm max-w-none px-3 py-2 focus-within:outline-none dark:prose-invert [&_.ProseMirror]:min-h-full [&_.ProseMirror]:outline-none",
+            "data-testid": "rich-text-editor-content"
+          }, null, 8, ["editor", "style"])) : V("", !0)
+        ], 10, W)
+      ]),
+      _: 1
+    }, 8, ["label", "required", "hide-label", "for", "help-text", "errors"]));
+  }
+});
+export {
+  ae as default
+};
+//# sourceMappingURL=RichTextEditor.vue2.js.map

package/dist/components/compositions/elements/editor/RichTextEditor.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.vue2.js","sources":["../../../../../src/components/compositions/elements/editor/RichTextEditor.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven rich-text editor composition. Wraps Tiptap (`@tiptap/vue-3`\n * + StarterKit) inside a FieldFrame, exposing the standard input chrome:\n * label / required / helpText / errors / hideLabel.\n *\n * The model is HTML — emits `update:modelValue` with `editor.getHTML()` on\n * every internal change.\n *\n *   <RichTextEditor v-model=\"body\" label=\"Body\" />\n */\nimport { computed, onBeforeUnmount, watch } from \"vue\"\nimport { EditorContent, useEditor } from \"@tiptap/vue-3\"\nimport type { AnyExtension } from \"@tiptap/vue-3\"\nimport StarterKit from \"@tiptap/starter-kit\"\nimport {\n  Bold,\n  Code,\n  Heading1,\n  Heading2,\n  Heading3,\n  Italic,\n  List,\n  ListOrdered,\n  Minus,\n  Quote,\n  Redo,\n  Strikethrough,\n  Undo,\n} from \"lucide-vue-next\"\nimport { Button } from \"@/components/ui/button\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface RichTextEditorProps {\n  modelValue?: string | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n  minHeight?: string\n  extensions?: unknown[]\n}\n\nconst props = withDefaults(defineProps<RichTextEditorProps>(), {\n  errors: () => [],\n  minHeight: \"12rem\",\n  extensions: () => [],\n})\n\nconst emit = defineEmits<{\n  (e: \"update:modelValue\", value: string): void\n}>()\n\nconst editor = useEditor({\n  content: props.modelValue ?? \"\",\n  editable: !(props.disabled || props.readonly),\n  extensions: [\n    StarterKit,\n    ...(props.extensions as AnyExtension[]),\n  ],\n  onUpdate: ({ editor }) => {\n    emit(\"update:modelValue\", editor.getHTML())\n  },\n})\n\nwatch(\n  () => props.modelValue,\n  (value) => {\n    const instance = editor.value\n    if (!instance) {\n      return\n    }\n    const next = value ?? \"\"\n    if (next === instance.getHTML()) {\n      return\n    }\n    instance.commands.setContent(next, { emitUpdate: false })\n  },\n)\n\nwatch(\n  () => [props.disabled, props.readonly] as const,\n  ([disabled, readonly]) => {\n    editor.value?.setEditable(!(disabled || readonly))\n  },\n)\n\nonBeforeUnmount(() => {\n  editor.value?.destroy()\n})\n\nconst hasErrors = computed<boolean>(() => props.errors.length > 0)\nconst isDisabled = computed<boolean>(() => Boolean(props.disabled))\nconst isReadonly = computed<boolean>(() => Boolean(props.readonly))\nconst isInert = computed<boolean>(() => isDisabled.value || isReadonly.value)\n\nconst contentStyle = computed<Record<string, string>>(() => ({\n  minHeight: props.minHeight,\n}))\n\ninterface ToolbarAction {\n  key: string\n  label: string\n  icon: typeof Bold\n  isActive: () => boolean\n  run: () => void\n  disabled?: () => boolean\n}\n\nfunction active(name: string, attrs?: Record<string, unknown>): boolean {\n  const instance = editor.value\n  if (!instance) {\n    return false\n  }\n  return attrs ? instance.isActive(name, attrs) : instance.isActive(name)\n}\n\nconst toolbarActions = computed<ToolbarAction[]>(() => [\n  {\n    key: \"bold\",\n    label: \"Bold\",\n    icon: Bold,\n    isActive: () => active(\"bold\"),\n    run: () => editor.value?.chain().focus().toggleBold().run(),\n  },\n  {\n    key: \"italic\",\n    label: \"Italic\",\n    icon: Italic,\n    isActive: () => active(\"italic\"),\n    run: () => editor.value?.chain().focus().toggleItalic().run(),\n  },\n  {\n    key: \"strike\",\n    label: \"Strikethrough\",\n    icon: Strikethrough,\n    isActive: () => active(\"strike\"),\n    run: () => editor.value?.chain().focus().toggleStrike().run(),\n  },\n  {\n    key: \"code\",\n    label: \"Inline code\",\n    icon: Code,\n    isActive: () => active(\"code\"),\n    run: () => editor.value?.chain().focus().toggleCode().run(),\n  },\n  {\n    key: \"h1\",\n    label: \"Heading 1\",\n    icon: Heading1,\n    isActive: () => active(\"heading\", { level: 1 }),\n    run: () =>\n      editor.value?.chain().focus().toggleHeading({ level: 1 }).run(),\n  },\n  {\n    key: \"h2\",\n    label: \"Heading 2\",\n    icon: Heading2,\n    isActive: () => active(\"heading\", { level: 2 }),\n    run: () =>\n      editor.value?.chain().focus().toggleHeading({ level: 2 }).run(),\n  },\n  {\n    key: \"h3\",\n    label: \"Heading 3\",\n    icon: Heading3,\n    isActive: () => active(\"heading\", { level: 3 }),\n    run: () =>\n      editor.value?.chain().focus().toggleHeading({ level: 3 }).run(),\n  },\n  {\n    key: \"bullet-list\",\n    label: \"Bullet list\",\n    icon: List,\n    isActive: () => active(\"bulletList\"),\n    run: () => editor.value?.chain().focus().toggleBulletList().run(),\n  },\n  {\n    key: \"ordered-list\",\n    label: \"Ordered list\",\n    icon: ListOrdered,\n    isActive: () => active(\"orderedList\"),\n    run: () => editor.value?.chain().focus().toggleOrderedList().run(),\n  },\n  {\n    key: \"blockquote\",\n    label: \"Blockquote\",\n    icon: Quote,\n    isActive: () => active(\"blockquote\"),\n    run: () => editor.value?.chain().focus().toggleBlockquote().run(),\n  },\n  {\n    key: \"horizontal-rule\",\n    label: \"Horizontal rule\",\n    icon: Minus,\n    isActive: () => false,\n    run: () => editor.value?.chain().focus().setHorizontalRule().run(),\n  },\n  {\n    key: \"undo\",\n    label: \"Undo\",\n    icon: Undo,\n    isActive: () => false,\n    run: () => editor.value?.chain().focus().undo().run(),\n    disabled: () => !editor.value?.can().chain().focus().undo().run(),\n  },\n  {\n    key: \"redo\",\n    label: \"Redo\",\n    icon: Redo,\n    isActive: () => false,\n    run: () => editor.value?.chain().focus().redo().run(),\n    disabled: () => !editor.value?.can().chain().focus().redo().run(),\n  },\n])\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n    data-testid=\"rich-text-editor\"\n  >\n    <div\n      :class=\"\n        cn(\n          'rounded-md border border-input bg-background shadow-sm overflow-hidden',\n          hasErrors ? 'border-destructive ring-1 ring-destructive' : '',\n          isDisabled ? 'opacity-60' : '',\n        )\n      \"\n      :data-element-name=\"name ?? undefined\"\n    >\n      <div\n        class=\"flex flex-wrap items-center gap-1 border-b bg-muted/30 px-2 py-1\"\n        :class=\"isInert ? 'pointer-events-none opacity-50' : ''\"\n        role=\"toolbar\"\n        aria-label=\"Formatting\"\n        data-testid=\"rich-text-editor-toolbar\"\n      >\n        <Button\n          v-for=\"action in toolbarActions\"\n          :key=\"action.key\"\n          type=\"button\"\n          size=\"icon-sm\"\n          :variant=\"action.isActive() ? 'secondary' : 'ghost'\"\n          :disabled=\"isInert || (action.disabled ? action.disabled() : false)\"\n          :aria-label=\"action.label\"\n          :title=\"action.label\"\n          :data-testid=\"`rich-text-editor-toolbar-${action.key}`\"\n          :aria-pressed=\"action.isActive()\"\n          @click=\"action.run()\"\n        >\n          <component :is=\"action.icon\" />\n        </Button>\n      </div>\n\n      <EditorContent\n        v-if=\"editor\"\n        :editor=\"editor\"\n        :style=\"contentStyle\"\n        class=\"prose prose-sm max-w-none px-3 py-2 focus-within:outline-none dark:prose-invert [&_.ProseMirror]:min-h-full [&_.ProseMirror]:outline-none\"\n        data-testid=\"rich-text-editor-content\"\n      />\n    </div>\n  </FieldFrame>\n</template>\n"],"names":["props","__props","emit","__emit","editor","useEditor","StarterKit","watch","value","instance","next","disabled","readonly","_a","onBeforeUnmount","hasErrors","computed","isDisabled","isReadonly","isInert","contentStyle","active","name","attrs","toolbarActions","Bold","Italic","Strikethrough","Code","Heading1","Heading2","Heading3","List","ListOrdered","Quote","Minus","Undo","Redo","_createBlock","_unref","FieldFrame","_createElementVNode","_normalizeClass","cn","_createElementBlock","_Fragment","_renderList","action","Button","$event","_resolveDynamicComponent","EditorContent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,UAAMA,IAAQC,GAMRC,IAAOC,GAIPC,IAASC,EAAU;AAAA,MACvB,SAASL,EAAM,cAAc;AAAA,MAC7B,UAAU,EAAEA,EAAM,YAAYA,EAAM;AAAA,MACpC,YAAY;AAAA,QACVM;AAAA,QACA,GAAIN,EAAM;AAAA,MAAA;AAAA,MAEZ,UAAU,CAAC,EAAE,QAAAI,QAAa;AACxB,QAAAF,EAAK,qBAAqBE,EAAO,SAAS;AAAA,MAC5C;AAAA,IAAA,CACD;AAED,IAAAG;AAAA,MACE,MAAMP,EAAM;AAAA,MACZ,CAACQ,MAAU;AACT,cAAMC,IAAWL,EAAO;AACxB,YAAI,CAACK;AACH;AAEF,cAAMC,IAAOF,KAAS;AACtB,QAAIE,MAASD,EAAS,aAGtBA,EAAS,SAAS,WAAWC,GAAM,EAAE,YAAY,IAAO;AAAA,MAC1D;AAAA,IAAA,GAGFH;AAAA,MACE,MAAM,CAACP,EAAM,UAAUA,EAAM,QAAQ;AAAA,MACrC,CAAC,CAACW,GAAUC,CAAQ,MAAM;;AACxB,SAAAC,IAAAT,EAAO,UAAP,QAAAS,EAAc,YAAY,EAAEF,KAAYC;AAAA,MAC1C;AAAA,IAAA,GAGFE,EAAgB,MAAM;;AACpB,OAAAD,IAAAT,EAAO,UAAP,QAAAS,EAAc;AAAA,IAChB,CAAC;AAED,UAAME,IAAYC,EAAkB,MAAMhB,EAAM,OAAO,SAAS,CAAC,GAC3DiB,IAAaD,EAAkB,MAAM,EAAQhB,EAAM,QAAS,GAC5DkB,IAAaF,EAAkB,MAAM,EAAQhB,EAAM,QAAS,GAC5DmB,IAAUH,EAAkB,MAAMC,EAAW,SAASC,EAAW,KAAK,GAEtEE,IAAeJ,EAAiC,OAAO;AAAA,MAC3D,WAAWhB,EAAM;AAAA,IAAA,EACjB;AAWF,aAASqB,EAAOC,GAAcC,GAA0C;AACtE,YAAMd,IAAWL,EAAO;AACxB,aAAKK,IAGEc,IAAQd,EAAS,SAASa,GAAMC,CAAK,IAAId,EAAS,SAASa,CAAI,IAF7D;AAAA,IAGX;AAEA,UAAME,IAAiBR,EAA0B,MAAM;AAAA,MACrD;AAAA,QACE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,MAAMS;AAAA,QACN,UAAU,MAAMJ,EAAO,MAAM;AAAA,QAC7B,KAAK,MAAA;;AAAM,kBAAAR,IAAAT,EAAO,UAAP,gBAAAS,EAAc,QAAQ,QAAQ,aAAa;AAAA;AAAA,MAAI;AAAA,MAE5D;AAAA,QACE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,MAAMa;AAAA,QACN,UAAU,MAAML,EAAO,QAAQ;AAAA,QAC/B,KAAK,MAAA;;AAAM,kBAAAR,IAAAT,EAAO,UAAP,gBAAAS,EAAc,QAAQ,QAAQ,eAAe;AAAA;AAAA,MAAI;AAAA,MAE9D;AAAA,QACE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,MAAMc;AAAA,QACN,UAAU,MAAMN,EAAO,QAAQ;AAAA,QAC/B,KAAK,MAAA;;AAAM,kBAAAR,IAAAT,EAAO,UAAP,gBAAAS,EAAc,QAAQ,QAAQ,eAAe;AAAA;AAAA,MAAI;AAAA,MAE9D;AAAA,QACE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,MAAMe;AAAA,QACN,UAAU,MAAMP,EAAO,MAAM;AAAA,QAC7B,KAAK,MAAA;;AAAM,kBAAAR,IAAAT,EAAO,UAAP,gBAAAS,EAAc,QAAQ,QAAQ,aAAa;AAAA;AAAA,MAAI;AAAA,MAE5D;AAAA,QACE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,MAAMgB;AAAA,QACN,UAAU,MAAMR,EAAO,WAAW,EAAE,OAAO,GAAG;AAAA,QAC9C,KAAK,MAAA;;AACH,kBAAAR,IAAAT,EAAO,UAAP,gBAAAS,EAAc,QAAQ,QAAQ,cAAc,EAAE,OAAO,EAAA,GAAK;AAAA;AAAA,MAAI;AAAA,MAElE;AAAA,QACE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,MAAMiB;AAAA,QACN,UAAU,MAAMT,EAAO,WAAW,EAAE,OAAO,GAAG;AAAA,QAC9C,KAAK,MAAA;;AACH,kBAAAR,IAAAT,EAAO,UAAP,gBAAAS,EAAc,QAAQ,QAAQ,cAAc,EAAE,OAAO,EAAA,GAAK;AAAA;AAAA,MAAI;AAAA,MAElE;AAAA,QACE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,MAAMkB;AAAA,QACN,UAAU,MAAMV,EAAO,WAAW,EAAE,OAAO,GAAG;AAAA,QAC9C,KAAK,MAAA;;AACH,kBAAAR,IAAAT,EAAO,UAAP,gBAAAS,EAAc,QAAQ,QAAQ,cAAc,EAAE,OAAO,EAAA,GAAK;AAAA;AAAA,MAAI;AAAA,MAElE;AAAA,QACE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,MAAMmB;AAAA,QACN,UAAU,MAAMX,EAAO,YAAY;AAAA,QACnC,KAAK,MAAA;;AAAM,kBAAAR,IAAAT,EAAO,UAAP,gBAAAS,EAAc,QAAQ,QAAQ,mBAAmB;AAAA;AAAA,MAAI;AAAA,MAElE;AAAA,QACE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,MAAMoB;AAAA,QACN,UAAU,MAAMZ,EAAO,aAAa;AAAA,QACpC,KAAK,MAAA;;AAAM,kBAAAR,IAAAT,EAAO,UAAP,gBAAAS,EAAc,QAAQ,QAAQ,oBAAoB;AAAA;AAAA,MAAI;AAAA,MAEnE;AAAA,QACE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,MAAMqB;AAAA,QACN,UAAU,MAAMb,EAAO,YAAY;AAAA,QACnC,KAAK,MAAA;;AAAM,kBAAAR,IAAAT,EAAO,UAAP,gBAAAS,EAAc,QAAQ,QAAQ,mBAAmB;AAAA;AAAA,MAAI;AAAA,MAElE;AAAA,QACE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,MAAMsB;AAAA,QACN,UAAU,MAAM;AAAA,QAChB,KAAK,MAAA;;AAAM,kBAAAtB,IAAAT,EAAO,UAAP,gBAAAS,EAAc,QAAQ,QAAQ,oBAAoB;AAAA;AAAA,MAAI;AAAA,MAEnE;AAAA,QACE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,MAAMuB;AAAA,QACN,UAAU,MAAM;AAAA,QAChB,KAAK,MAAA;;AAAM,kBAAAvB,IAAAT,EAAO,UAAP,gBAAAS,EAAc,QAAQ,QAAQ,OAAO;AAAA;AAAA,QAChD,UAAU,MAAA;;AAAM,oBAACA,IAAAT,EAAO,UAAP,QAAAS,EAAc,MAAM,QAAQ,QAAQ,OAAO;AAAA;AAAA,MAAI;AAAA,MAElE;AAAA,QACE,KAAK;AAAA,QACL,OAAO;AAAA,QACP,MAAMwB;AAAA,QACN,UAAU,MAAM;AAAA,QAChB,KAAK,MAAA;;AAAM,kBAAAxB,IAAAT,EAAO,UAAP,gBAAAS,EAAc,QAAQ,QAAQ,OAAO;AAAA;AAAA,QAChD,UAAU,MAAA;;AAAM,oBAACA,IAAAT,EAAO,UAAP,QAAAS,EAAc,MAAM,QAAQ,QAAQ,OAAO;AAAA;AAAA,MAAI;AAAA,IAClE,CACD;2BAICyB,EAmDaC,EAAAC,CAAA,GAAA;AAAA,MAlDV,OAAOvC,EAAA;AAAA,MACP,UAAUA,EAAA;AAAA,MACV,cAAYA,EAAA;AAAA,MACZ,KAAKA,EAAA;AAAA,MACL,aAAWA,EAAA;AAAA,MACX,QAAQA,EAAA;AAAA,MACT,eAAY;AAAA,IAAA;iBAEZ,MAyCM;AAAA,QAzCNwC,EAyCM,OAAA;AAAA,UAxCH,OAAKC;AAAAA,YAAWH,EAAAI,CAAA;AAAA;cAAkG5B,EAAA,QAAS,+CAAA;AAAA,cAAgEE,EAAA,QAAU,eAAA;AAAA,YAAA;AAAA;UAOrM,qBAAmBhB,EAAA,QAAQ;AAAA,QAAA;UAE5BwC,EAsBM,OAAA;AAAA,YArBJ,OAAKC,EAAA,CAAC,oEACEvB,EAAA,QAAO,mCAAA,EAAA,CAAA;AAAA,YACf,MAAK;AAAA,YACL,cAAW;AAAA,YACX,eAAY;AAAA,UAAA;oBAEZyB,EAcSC,GAAA,MAAAC,EAbUtB,EAAA,OAAc,CAAxBuB,YADTT,EAcSC,EAAAS,CAAA,GAAA;AAAA,cAZN,KAAKD,EAAO;AAAA,cACb,MAAK;AAAA,cACL,MAAK;AAAA,cACJ,SAASA,EAAO,SAAA,IAAQ,cAAA;AAAA,cACxB,UAAU5B,YAAY4B,EAAO,WAAWA,EAAO,aAAQ;AAAA,cACvD,cAAYA,EAAO;AAAA,cACnB,OAAOA,EAAO;AAAA,cACd,eAAW,4BAA8BA,EAAO,GAAG;AAAA,cACnD,gBAAcA,EAAO,SAAA;AAAA,cACrB,SAAK,CAAAE,MAAEF,EAAO,IAAA;AAAA,YAAG;yBAElB,MAA+B;AAAA,sBAA/BT,EAA+BY,EAAfH,EAAO,IAAI,CAAA;AAAA,cAAA;;;;UAKvBR,EAAAnC,CAAA,UADRkC,EAMEC,EAAAY,CAAA,GAAA;AAAA;YAJC,QAAQZ,EAAAnC,CAAA;AAAA,YACR,SAAOgB,EAAA,KAAY;AAAA,YACpB,OAAM;AAAA,YACN,eAAY;AAAA,UAAA;;;;;;;"}

package/dist/components/compositions/elements/file/AssetPickerFile.vue.js

@@ -0,0 +1,5 @@
+import f from "./AssetPickerFile.vue2.js";
+export {
+  f as default
+};
+//# sourceMappingURL=AssetPickerFile.vue.js.map

package/dist/components/compositions/elements/file/AssetPickerFile.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetPickerFile.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/compositions/elements/file/AssetPickerFile.vue2.js

@@ -0,0 +1,296 @@
+import { defineComponent as E, useModel as P, ref as m, computed as x, openBlock as s, createBlock as u, unref as a, withCtx as n, createElementVNode as p, createVNode as i, createElementBlock as d, toDisplayString as U, createCommentVNode as w, normalizeClass as D, createTextVNode as C, Fragment as T, renderList as q, mergeModels as O } from "vue";
+import { ImageIcon as $, X as R, Loader2 as X, Upload as G } from "lucide-vue-next";
+import "../../../ui/button/index.js";
+import "../../../ui/card/index.js";
+import H from "../../../ui/dialog/Dialog.vue.js";
+import "reka-ui";
+import J from "../../../ui/dialog/DialogContent.vue.js";
+import "@vueuse/core";
+import "clsx";
+import "tailwind-merge";
+import K from "../../../ui/dialog/DialogHeader.vue.js";
+import Q from "../../../ui/dialog/DialogTitle.vue.js";
+import W from "../../../ui/dialog/DialogTrigger.vue.js";
+import Y from "../../../ui/field-frame/FieldFrame.vue.js";
+import Z from "../../../ui/input/Input.vue.js";
+import ee from "../../../ui/skeleton/Skeleton.vue.js";
+import te from "../../../ui/card/Card.vue.js";
+import ae from "../../../ui/card/CardContent.vue.js";
+import B from "../../../ui/button/Button.vue.js";
+const le = ["data-element-name"], se = ["src", "alt"], oe = { class: "flex-1 truncate text-sm" }, ie = { class: "flex items-center gap-2" }, ne = ["accept"], re = {
+  key: 0,
+  class: "grid grid-cols-3 gap-3",
+  "data-testid": "asset-picker-skeleton"
+}, de = {
+  key: 1,
+  class: "py-8 text-center text-sm text-muted-foreground",
+  "data-testid": "asset-picker-empty"
+}, ue = {
+  key: 2,
+  class: "grid max-h-96 grid-cols-3 gap-3 overflow-y-auto",
+  "data-testid": "asset-picker-grid"
+}, ce = ["data-testid", "onClick"], me = { class: "flex aspect-square items-center justify-center bg-muted" }, fe = ["src", "alt"], pe = { class: "truncate p-2 text-xs" }, je = /* @__PURE__ */ E({
+  __name: "AssetPickerFile",
+  props: /* @__PURE__ */ O({
+    modelValue: {},
+    id: {},
+    name: {},
+    label: {},
+    hideLabel: { type: Boolean },
+    required: { type: Boolean },
+    readonly: { type: Boolean },
+    disabled: { type: Boolean },
+    helpText: {},
+    errors: { default: () => [] },
+    onBrowse: {},
+    onUpload: {},
+    acceptedFileTypes: { default: () => [] }
+  }, {
+    modelValue: {},
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(o) {
+    const c = o, v = P(o, "modelValue"), y = m(!1), g = m(!1), b = m(!1), f = m([]), h = m(""), V = m(null);
+    let k = 0;
+    const r = x(() => {
+      const e = v.value;
+      if (!e)
+        return null;
+      if (typeof e == "string")
+        return { id: e, url: e, name: e };
+      if (typeof e == "object") {
+        const t = e;
+        return {
+          id: t.id ?? "",
+          url: t.url ?? "",
+          name: t.name,
+          thumbnailUrl: t.thumbnailUrl
+        };
+      }
+      return null;
+    }), L = x(() => {
+      var e;
+      if ((e = c.acceptedFileTypes) != null && e.length)
+        return c.acceptedFileTypes.join(",");
+    }), z = x(() => {
+      const e = h.value.trim().toLowerCase();
+      return e ? f.value.filter(
+        (t) => (t.name ?? t.id).toLowerCase().includes(e)
+      ) : f.value;
+    });
+    async function j() {
+      if (!c.onBrowse) {
+        f.value = [];
+        return;
+      }
+      const e = ++k;
+      g.value = !0;
+      try {
+        const t = await c.onBrowse();
+        if (e !== k)
+          return;
+        f.value = Array.isArray(t) ? t : [];
+      } catch {
+        if (e !== k)
+          return;
+        f.value = [];
+      } finally {
+        e === k && (g.value = !1);
+      }
+    }
+    function F(e) {
+      y.value = e, e && (h.value = "", j());
+    }
+    function N(e) {
+      v.value = e, y.value = !1;
+    }
+    function S() {
+      v.value = null;
+    }
+    function I() {
+      var e;
+      (e = V.value) == null || e.click();
+    }
+    async function M(e) {
+      var _;
+      const t = e.target, l = (_ = t.files) == null ? void 0 : _[0];
+      if (t.value = "", !(!l || !c.onUpload)) {
+        b.value = !0;
+        try {
+          const A = await c.onUpload(l);
+          A && (v.value = A, y.value = !1);
+        } catch {
+        } finally {
+          b.value = !1;
+        }
+      }
+    }
+    return (e, t) => (s(), u(a(Y), {
+      label: o.label,
+      required: o.required,
+      "hide-label": o.hideLabel,
+      for: o.id,
+      "help-text": o.helpText,
+      errors: o.errors
+    }, {
+      default: n(() => [
+        p("div", {
+          "data-element-name": o.name ?? void 0,
+          "data-testid": "asset-picker"
+        }, [
+          r.value ? (s(), u(a(te), {
+            key: 0,
+            "data-testid": "asset-picker-chip"
+          }, {
+            default: n(() => [
+              i(a(ae), { class: "flex items-center gap-3 py-3" }, {
+                default: n(() => [
+                  r.value.thumbnailUrl || r.value.url ? (s(), d("img", {
+                    key: 0,
+                    src: r.value.thumbnailUrl ?? r.value.url,
+                    alt: r.value.name ?? "Selected asset",
+                    class: "size-10 rounded object-cover",
+                    "data-testid": "asset-picker-chip-thumb"
+                  }, null, 8, se)) : (s(), u(a($), {
+                    key: 1,
+                    class: "size-5 text-muted-foreground"
+                  })),
+                  p("span", oe, U(r.value.name ?? r.value.id ?? "Selected asset"), 1),
+                  i(a(B), {
+                    type: "button",
+                    variant: "ghost",
+                    size: "icon-sm",
+                    "aria-label": "Remove asset",
+                    disabled: o.disabled || o.readonly,
+                    "data-testid": "asset-picker-remove",
+                    onClick: S
+                  }, {
+                    default: n(() => [
+                      i(a(R), { class: "size-4" })
+                    ]),
+                    _: 1
+                  }, 8, ["disabled"])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })) : w("", !0),
+          i(a(H), {
+            open: y.value,
+            "onUpdate:open": F
+          }, {
+            default: n(() => [
+              i(a(W), { "as-child": "" }, {
+                default: n(() => [
+                  i(a(B), {
+                    type: "button",
+                    variant: "outline",
+                    disabled: o.disabled || o.readonly,
+                    class: D(r.value ? "mt-2" : ""),
+                    "data-testid": "asset-picker-browse"
+                  }, {
+                    default: n(() => [
+                      i(a($), { class: "mr-2 size-4" }),
+                      C(" " + U(r.value ? "Change…" : "Browse…"), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["disabled", "class"])
+                ]),
+                _: 1
+              }),
+              i(a(J), { class: "sm:max-w-2xl" }, {
+                default: n(() => [
+                  i(a(K), null, {
+                    default: n(() => [
+                      i(a(Q), null, {
+                        default: n(() => [...t[1] || (t[1] = [
+                          C("Select an asset", -1)
+                        ])]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  }),
+                  p("div", ie, [
+                    i(a(Z), {
+                      modelValue: h.value,
+                      "onUpdate:modelValue": t[0] || (t[0] = (l) => h.value = l),
+                      placeholder: "Search assets…",
+                      "data-testid": "asset-picker-search"
+                    }, null, 8, ["modelValue"]),
+                    o.onUpload ? (s(), u(a(B), {
+                      key: 0,
+                      type: "button",
+                      variant: "outline",
+                      disabled: b.value,
+                      "data-testid": "asset-picker-upload",
+                      onClick: I
+                    }, {
+                      default: n(() => [
+                        b.value ? (s(), u(a(X), {
+                          key: 0,
+                          class: "mr-2 size-4 animate-spin"
+                        })) : (s(), u(a(G), {
+                          key: 1,
+                          class: "mr-2 size-4"
+                        })),
+                        t[2] || (t[2] = C(" Upload new ", -1))
+                      ]),
+                      _: 1
+                    }, 8, ["disabled"])) : w("", !0),
+                    o.onUpload ? (s(), d("input", {
+                      key: 1,
+                      ref_key: "fileInput",
+                      ref: V,
+                      type: "file",
+                      class: "sr-only",
+                      accept: L.value,
+                      "data-testid": "asset-picker-upload-input",
+                      onChange: M
+                    }, null, 40, ne)) : w("", !0)
+                  ]),
+                  g.value ? (s(), d("div", re, [
+                    (s(), d(T, null, q(6, (l) => i(a(ee), {
+                      key: l,
+                      class: "aspect-square w-full"
+                    })), 64))
+                  ])) : z.value.length === 0 ? (s(), d("div", de, " No assets available. ")) : (s(), d("div", ue, [
+                    (s(!0), d(T, null, q(z.value, (l) => (s(), d("button", {
+                      key: l.id,
+                      type: "button",
+                      class: "flex flex-col items-stretch overflow-hidden rounded-md border bg-card text-left hover:border-primary focus:outline-none focus:ring-2 focus:ring-ring",
+                      "data-testid": `asset-picker-item-${l.id}`,
+                      onClick: (_) => N(l)
+                    }, [
+                      p("div", me, [
+                        l.thumbnailUrl || l.url ? (s(), d("img", {
+                          key: 0,
+                          src: l.thumbnailUrl ?? l.url,
+                          alt: l.name ?? l.id,
+                          class: "size-full object-cover"
+                        }, null, 8, fe)) : (s(), u(a($), {
+                          key: 1,
+                          class: "size-8 text-muted-foreground"
+                        }))
+                      ]),
+                      p("div", pe, U(l.name ?? l.id), 1)
+                    ], 8, ce))), 128))
+                  ]))
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["open"])
+        ], 8, le)
+      ]),
+      _: 1
+    }, 8, ["label", "required", "hide-label", "for", "help-text", "errors"]));
+  }
+});
+export {
+  je as default
+};
+//# sourceMappingURL=AssetPickerFile.vue2.js.map

package/dist/components/compositions/elements/file/AssetPickerFile.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetPickerFile.vue2.js","sources":["../../../../../src/components/compositions/elements/file/AssetPickerFile.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven asset-picker composition. The consumer supplies\n * Promise-returning `onBrowse` (and optional `onUpload`) callbacks; the\n * composition itself never makes HTTP calls.\n *\n *   <AssetPickerFile\n *     v-model=\"asset\"\n *     label=\"Hero image\"\n *     :on-browse=\"() => api.assets.list()\"\n *     :on-upload=\"(file) => api.assets.upload(file)\"\n *   />\n */\nimport { computed, ref } from \"vue\"\nimport { ImageIcon, Loader2, Upload, X } from \"lucide-vue-next\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport { Input } from \"@/components/ui/input\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\n\nexport interface Asset {\n  id: string\n  url: string\n  name?: string\n  thumbnailUrl?: string\n  mimeType?: string\n  sizeBytes?: number\n}\n\nexport type AssetPickerValue = Asset | { id?: string; url?: string; name?: string } | string | null\n\nexport interface AssetPickerFileProps {\n  modelValue?: AssetPickerValue\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n  /** Required — called when the picker dialog opens. */\n  onBrowse?: () => Promise<Asset[]>\n  /** Optional — when provided, an \"Upload new\" button appears in the dialog. */\n  onUpload?: (file: File) => Promise<Asset>\n  /** File-input `accept` attribute for the upload flow. */\n  acceptedFileTypes?: string[]\n}\n\nconst props = withDefaults(defineProps<AssetPickerFileProps>(), {\n  errors: () => [],\n  acceptedFileTypes: () => [],\n})\n\nconst model = defineModel<AssetPickerValue>(\"modelValue\")\n\nconst open = ref<boolean>(false)\nconst isLoading = ref<boolean>(false)\nconst isUploading = ref<boolean>(false)\nconst assets = ref<Asset[]>([])\nconst filter = ref<string>(\"\")\nconst fileInput = ref<HTMLInputElement | null>(null)\n\nlet browseToken = 0\n\nconst selectedAsset = computed<Asset | null>(() => {\n  const raw = model.value\n  if (!raw) {\n    return null\n  }\n  if (typeof raw === \"string\") {\n    return { id: raw, url: raw, name: raw }\n  }\n  if (typeof raw === \"object\") {\n    const obj = raw as { id?: string; url?: string; name?: string; thumbnailUrl?: string }\n    return {\n      id: obj.id ?? \"\",\n      url: obj.url ?? \"\",\n      name: obj.name,\n      thumbnailUrl: obj.thumbnailUrl,\n    }\n  }\n  return null\n})\n\nconst acceptAttr = computed<string | undefined>(() => {\n  if (!props.acceptedFileTypes?.length) {\n    return undefined\n  }\n  return props.acceptedFileTypes.join(\",\")\n})\n\nconst filteredAssets = computed<Asset[]>(() => {\n  const q = filter.value.trim().toLowerCase()\n  if (!q) {\n    return assets.value\n  }\n  return assets.value.filter((a) =>\n    (a.name ?? a.id).toLowerCase().includes(q),\n  )\n})\n\nasync function loadAssets(): Promise<void> {\n  if (!props.onBrowse) {\n    assets.value = []\n    return\n  }\n  const myToken = ++browseToken\n  isLoading.value = true\n  try {\n    const next = await props.onBrowse()\n    if (myToken !== browseToken) {\n      return\n    }\n    assets.value = Array.isArray(next) ? next : []\n  } catch {\n    if (myToken !== browseToken) {\n      return\n    }\n    assets.value = []\n  } finally {\n    if (myToken === browseToken) {\n      isLoading.value = false\n    }\n  }\n}\n\nfunction onOpenChange(next: boolean): void {\n  open.value = next\n  if (next) {\n    filter.value = \"\"\n    void loadAssets()\n  }\n}\n\nfunction selectAsset(asset: Asset): void {\n  model.value = asset\n  open.value = false\n}\n\nfunction clearAsset(): void {\n  model.value = null\n}\n\nfunction openUploadPicker(): void {\n  fileInput.value?.click()\n}\n\nasync function onUploadChange(event: Event): Promise<void> {\n  const target = event.target as HTMLInputElement\n  const file = target.files?.[0]\n  target.value = \"\"\n  if (!file || !props.onUpload) {\n    return\n  }\n  isUploading.value = true\n  try {\n    const asset = await props.onUpload(file)\n    if (asset) {\n      model.value = asset\n      open.value = false\n    }\n  } catch {\n    // surface via consumer's error handling — composition stays silent\n  } finally {\n    isUploading.value = false\n  }\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :for=\"id\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <div :data-element-name=\"name ?? undefined\" data-testid=\"asset-picker\">\n      <Card v-if=\"selectedAsset\" data-testid=\"asset-picker-chip\">\n        <CardContent class=\"flex items-center gap-3 py-3\">\n          <img\n            v-if=\"selectedAsset.thumbnailUrl || selectedAsset.url\"\n            :src=\"selectedAsset.thumbnailUrl ?? selectedAsset.url\"\n            :alt=\"selectedAsset.name ?? 'Selected asset'\"\n            class=\"size-10 rounded object-cover\"\n            data-testid=\"asset-picker-chip-thumb\"\n          >\n          <ImageIcon v-else class=\"size-5 text-muted-foreground\" />\n          <span class=\"flex-1 truncate text-sm\">\n            {{ selectedAsset.name ?? selectedAsset.id ?? \"Selected asset\" }}\n          </span>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            aria-label=\"Remove asset\"\n            :disabled=\"disabled || readonly\"\n            data-testid=\"asset-picker-remove\"\n            @click=\"clearAsset\"\n          >\n            <X class=\"size-4\" />\n          </Button>\n        </CardContent>\n      </Card>\n\n      <Dialog :open=\"open\" @update:open=\"onOpenChange\">\n        <DialogTrigger as-child>\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            :disabled=\"disabled || readonly\"\n            :class=\"selectedAsset ? 'mt-2' : ''\"\n            data-testid=\"asset-picker-browse\"\n          >\n            <ImageIcon class=\"mr-2 size-4\" />\n            {{ selectedAsset ? \"Change…\" : \"Browse…\" }}\n          </Button>\n        </DialogTrigger>\n        <DialogContent class=\"sm:max-w-2xl\">\n          <DialogHeader>\n            <DialogTitle>Select an asset</DialogTitle>\n          </DialogHeader>\n\n          <div class=\"flex items-center gap-2\">\n            <Input\n              v-model=\"filter\"\n              placeholder=\"Search assets…\"\n              data-testid=\"asset-picker-search\"\n            />\n            <Button\n              v-if=\"onUpload\"\n              type=\"button\"\n              variant=\"outline\"\n              :disabled=\"isUploading\"\n              data-testid=\"asset-picker-upload\"\n              @click=\"openUploadPicker\"\n            >\n              <Loader2\n                v-if=\"isUploading\"\n                class=\"mr-2 size-4 animate-spin\"\n              />\n              <Upload v-else class=\"mr-2 size-4\" />\n              Upload new\n            </Button>\n            <input\n              v-if=\"onUpload\"\n              ref=\"fileInput\"\n              type=\"file\"\n              class=\"sr-only\"\n              :accept=\"acceptAttr\"\n              data-testid=\"asset-picker-upload-input\"\n              @change=\"onUploadChange\"\n            >\n          </div>\n\n          <div\n            v-if=\"isLoading\"\n            class=\"grid grid-cols-3 gap-3\"\n            data-testid=\"asset-picker-skeleton\"\n          >\n            <Skeleton v-for=\"i in 6\" :key=\"i\" class=\"aspect-square w-full\" />\n          </div>\n          <div\n            v-else-if=\"filteredAssets.length === 0\"\n            class=\"py-8 text-center text-sm text-muted-foreground\"\n            data-testid=\"asset-picker-empty\"\n          >\n            No assets available.\n          </div>\n          <div\n            v-else\n            class=\"grid max-h-96 grid-cols-3 gap-3 overflow-y-auto\"\n            data-testid=\"asset-picker-grid\"\n          >\n            <button\n              v-for=\"asset in filteredAssets\"\n              :key=\"asset.id\"\n              type=\"button\"\n              class=\"flex flex-col items-stretch overflow-hidden rounded-md border bg-card text-left hover:border-primary focus:outline-none focus:ring-2 focus:ring-ring\"\n              :data-testid=\"`asset-picker-item-${asset.id}`\"\n              @click=\"selectAsset(asset)\"\n            >\n              <div class=\"flex aspect-square items-center justify-center bg-muted\">\n                <img\n                  v-if=\"asset.thumbnailUrl || asset.url\"\n                  :src=\"asset.thumbnailUrl ?? asset.url\"\n                  :alt=\"asset.name ?? asset.id\"\n                  class=\"size-full object-cover\"\n                >\n                <ImageIcon v-else class=\"size-8 text-muted-foreground\" />\n              </div>\n              <div class=\"truncate p-2 text-xs\">\n                {{ asset.name ?? asset.id }}\n              </div>\n            </button>\n          </div>\n        </DialogContent>\n      </Dialog>\n    </div>\n  </FieldFrame>\n</template>\n"],"names":["props","__props","model","_useModel","open","ref","isLoading","isUploading","assets","filter","fileInput","browseToken","selectedAsset","computed","raw","obj","acceptAttr","_a","filteredAssets","q","a","loadAssets","myToken","next","onOpenChange","selectAsset","asset","clearAsset","openUploadPicker","onUploadChange","event","target","file","_createBlock","_unref","FieldFrame","_createElementVNode","Card","_createVNode","CardContent","_createElementBlock","ImageIcon","_hoisted_3","_toDisplayString","Button","X","Dialog","DialogTrigger","_createTextVNode","DialogContent","DialogHeader","DialogTitle","_cache","_hoisted_4","Input","$event","Loader2","Upload","_openBlock","_hoisted_6","_Fragment","_renderList","i","Skeleton","_hoisted_7","_hoisted_8","_hoisted_10","_hoisted_12"],"mappings":"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"}

package/dist/components/compositions/elements/file/DropzoneFile.vue.js

@@ -0,0 +1,5 @@
+import f from "./DropzoneFile.vue2.js";
+export {
+  f as default
+};
+//# sourceMappingURL=DropzoneFile.vue.js.map

package/dist/components/compositions/elements/file/DropzoneFile.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropzoneFile.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}