@gxp-dev/mod-ui 2.0.10 → 2.0.12

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

@@ -0,0 +1 @@
+{"version":3,"file":"RichTextEditor.vue_vue_type_script_setup_true_lang.js","names":[],"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\"\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"],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import e from "./AssetPickerFile.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/elements/file/AssetPickerFile.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=AssetPickerFile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetPickerFile.js","names":[],"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\"\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"],"mappings":""}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetPickerFile.vue_vue_type_script_setup_true_lang.js","names":[],"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\"\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"],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import e from "./DropzoneFile.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/elements/file/DropzoneFile.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=DropzoneFile.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropzoneFile.js","names":[],"sources":["../../../../../src/components/compositions/elements/file/DropzoneFile.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven dropzone composition.\n *\n * Drag-and-drop target backed by a hidden `<input type=\"file\">` for\n * click-to-browse. Same value contract as `UploadFile` — single `File`\n * or `File[]` when `multiple` is true.\n *\n *   <DropzoneFile v-model=\"doc\" label=\"Document\" accept=\"application/pdf\" />\n */\nimport { computed, ref, watch } from \"vue\"\nimport { UploadCloud, X } from \"@lucide/vue\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface DropzoneFileProps {\n  modelValue?: File | File[] | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  accept?: string\n  acceptedFileTypes?: string[]\n  multiple?: boolean\n  maxFileSize?: number\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nconst props = withDefaults(defineProps<DropzoneFileProps>(), {\n  errors: () => [],\n  acceptedFileTypes: () => [],\n})\n\nconst model = defineModel<File | File[] | null>(\"modelValue\")\n\nconst fileInput = ref<HTMLInputElement | null>(null)\nconst dragOver = ref<boolean>(false)\nconst files = ref<File[]>([])\n\nwatch(\n  () => model.value,\n  (next) => {\n    if (next instanceof File) {\n      files.value = [next]\n    } else if (Array.isArray(next) && next.every((f) => f instanceof File)) {\n      files.value = next as File[]\n    } else {\n      files.value = []\n    }\n  },\n  { immediate: true },\n)\n\nconst accept = computed<string>(() => {\n  if (props.accept) {\n    return props.accept\n  }\n  const list = props.acceptedFileTypes\n  return Array.isArray(list) && list.length ? list.join(\",\") : \"\"\n})\n\nconst maxBytes = computed<number | undefined>(() => props.maxFileSize)\n\nfunction emitFiles(): void {\n  if (props.multiple) {\n    model.value = files.value.slice()\n  } else {\n    model.value = files.value[0] ?? null\n  }\n}\n\nfunction ingest(incoming: File[]): void {\n  if (!incoming.length) {\n    return\n  }\n  const tooLarge = maxBytes.value\n    ? incoming.find((f) => f.size > (maxBytes.value as number))\n    : undefined\n  if (tooLarge) {\n    return\n  }\n  if (props.multiple) {\n    files.value = [...files.value, ...incoming]\n  } else {\n    files.value = [incoming[0]!]\n  }\n  emitFiles()\n}\n\nfunction onChange(event: Event): void {\n  const target = event.target as HTMLInputElement\n  const list = target.files ? Array.from(target.files) : []\n  ingest(list)\n  target.value = \"\"\n}\n\nfunction onDrop(event: DragEvent): void {\n  event.preventDefault()\n  dragOver.value = false\n  if (props.disabled || props.readonly) {\n    return\n  }\n  const list = event.dataTransfer ? Array.from(event.dataTransfer.files) : []\n  ingest(list)\n}\n\nfunction onDragOver(event: DragEvent): void {\n  event.preventDefault()\n  if (!props.disabled && !props.readonly) {\n    dragOver.value = true\n  }\n}\n\nfunction onDragLeave(event: DragEvent): void {\n  event.preventDefault()\n  dragOver.value = false\n}\n\nfunction openPicker(): void {\n  fileInput.value?.click()\n}\n\nfunction removeFile(index: number): void {\n  files.value.splice(index, 1)\n  emitFiles()\n}\n\nfunction formatBytes(bytes: number): string {\n  if (bytes < 1024) {\n    return `${bytes} B`\n  }\n  if (bytes < 1024 * 1024) {\n    return `${(bytes / 1024).toFixed(1)} KB`\n  }\n  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <div\n      :class=\"\n        cn(\n          'flex flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed border-input bg-background px-6 py-10 text-center transition-colors',\n          dragOver && 'border-primary bg-primary/5',\n          (disabled || readonly) && 'cursor-not-allowed opacity-50',\n        )\n      \"\n      role=\"button\"\n      tabindex=\"0\"\n      data-testid=\"dropzone-target\"\n      :data-drag-over=\"dragOver || undefined\"\n      :data-element-name=\"name ?? undefined\"\n      @click=\"openPicker\"\n      @keydown.enter.prevent=\"openPicker\"\n      @keydown.space.prevent=\"openPicker\"\n      @drop=\"onDrop\"\n      @dragover=\"onDragOver\"\n      @dragleave=\"onDragLeave\"\n    >\n      <UploadCloud class=\"size-8 text-muted-foreground\" />\n      <p class=\"text-sm font-medium\">\n        {{ placeholder ?? \"Drop files here, or click to browse\" }}\n      </p>\n      <p v-if=\"accept\" class=\"text-xs text-muted-foreground\">\n        {{ accept }}\n      </p>\n      <input\n        ref=\"fileInput\"\n        type=\"file\"\n        class=\"sr-only\"\n        :accept=\"accept || undefined\"\n        :multiple=\"multiple\"\n        :disabled=\"disabled || readonly\"\n        :required=\"required\"\n        :name=\"name ?? undefined\"\n        data-testid=\"dropzone-input\"\n        @change=\"onChange\"\n      >\n    </div>\n\n    <div v-if=\"files.length\" class=\"flex flex-col gap-2\">\n      <Card\n        v-for=\"(file, i) in files\"\n        :key=\"`${file.name}-${i}`\"\n        class=\"border\"\n      >\n        <CardContent class=\"flex items-center justify-between gap-3 py-3\">\n          <div class=\"flex flex-col\">\n            <span class=\"text-sm font-medium\">{{ file.name }}</span>\n            <span class=\"text-xs text-muted-foreground\">{{ formatBytes(file.size) }}</span>\n          </div>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            aria-label=\"Remove file\"\n            :disabled=\"disabled || readonly\"\n            data-testid=\"dropzone-remove\"\n            @click.stop=\"removeFile(i)\"\n          >\n            <X class=\"size-4\" />\n          </Button>\n        </CardContent>\n      </Card>\n    </div>\n  </FieldFrame>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,159 @@
+import { cn as e } from "../../../../lib/utils.js";
+import t from "../../../ui/button/Button.js";
+import "../../../ui/button/index.js";
+import n from "../../../ui/card/Card.js";
+import r from "../../../ui/card/CardContent.js";
+import "../../../ui/card/index.js";
+import i from "../../../ui/field-frame/FieldFrame.js";
+import "../../../ui/field-frame/index.js";
+import { Fragment as a, computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, mergeModels as p, normalizeClass as m, openBlock as h, ref as g, renderList as _, toDisplayString as v, unref as y, useModel as b, watch as x, withCtx as S, withKeys as C, withModifiers as w } from "vue";
+import { UploadCloud as T, X as E } from "@lucide/vue";
+//#region src/components/compositions/elements/file/DropzoneFile.vue?vue&type=script&setup=true&lang.ts
+var D = [
+	"data-drag-over",
+	"data-element-name",
+	"onKeydown"
+], O = { class: "text-sm font-medium" }, k = {
+	key: 0,
+	class: "text-xs text-muted-foreground"
+}, A = [
+	"accept",
+	"multiple",
+	"disabled",
+	"required",
+	"name"
+], j = {
+	key: 0,
+	class: "flex flex-col gap-2"
+}, M = { class: "flex flex-col" }, N = { class: "text-sm font-medium" }, P = { class: "text-xs text-muted-foreground" }, F = /* @__PURE__ */ f({
+	__name: "DropzoneFile",
+	props: /* @__PURE__ */ p({
+		modelValue: {},
+		id: {},
+		name: {},
+		label: {},
+		hideLabel: { type: Boolean },
+		placeholder: {},
+		accept: {},
+		acceptedFileTypes: { default: () => [] },
+		multiple: { type: Boolean },
+		maxFileSize: {},
+		required: { type: Boolean },
+		readonly: { type: Boolean },
+		disabled: { type: Boolean },
+		helpText: {},
+		errors: { default: () => [] }
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(f) {
+		let p = f, F = b(f, "modelValue"), I = g(null), L = g(!1), R = g([]);
+		x(() => F.value, (e) => {
+			e instanceof File ? R.value = [e] : Array.isArray(e) && e.every((e) => e instanceof File) ? R.value = e : R.value = [];
+		}, { immediate: !0 });
+		let z = o(() => {
+			if (p.accept) return p.accept;
+			let e = p.acceptedFileTypes;
+			return Array.isArray(e) && e.length ? e.join(",") : "";
+		}), B = o(() => p.maxFileSize);
+		function V() {
+			p.multiple ? F.value = R.value.slice() : F.value = R.value[0] ?? null;
+		}
+		function H(e) {
+			e.length && (B.value && e.find((e) => e.size > B.value) || (p.multiple ? R.value = [...R.value, ...e] : R.value = [e[0]], V()));
+		}
+		function U(e) {
+			let t = e.target;
+			H(t.files ? Array.from(t.files) : []), t.value = "";
+		}
+		function W(e) {
+			e.preventDefault(), L.value = !1, !(p.disabled || p.readonly) && H(e.dataTransfer ? Array.from(e.dataTransfer.files) : []);
+		}
+		function G(e) {
+			e.preventDefault(), !p.disabled && !p.readonly && (L.value = !0);
+		}
+		function K(e) {
+			e.preventDefault(), L.value = !1;
+		}
+		function q() {
+			I.value?.click();
+		}
+		function J(e) {
+			R.value.splice(e, 1), V();
+		}
+		function Y(e) {
+			return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(2)} MB`;
+		}
+		return (o, p) => (h(), s(y(i), {
+			label: f.label,
+			required: f.required,
+			"hide-label": f.hideLabel,
+			"help-text": f.helpText,
+			errors: f.errors
+		}, {
+			default: S(() => [u("div", {
+				class: m(y(e)("flex flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed border-input bg-background px-6 py-10 text-center transition-colors", L.value && "border-primary bg-primary/5", (f.disabled || f.readonly) && "cursor-not-allowed opacity-50")),
+				role: "button",
+				tabindex: "0",
+				"data-testid": "dropzone-target",
+				"data-drag-over": L.value || void 0,
+				"data-element-name": f.name ?? void 0,
+				onClick: q,
+				onKeydown: [C(w(q, ["prevent"]), ["enter"]), C(w(q, ["prevent"]), ["space"])],
+				onDrop: W,
+				onDragover: G,
+				onDragleave: K
+			}, [
+				d(y(T), { class: "size-8 text-muted-foreground" }),
+				u("p", O, v(f.placeholder ?? "Drop files here, or click to browse"), 1),
+				z.value ? (h(), l("p", k, v(z.value), 1)) : c("", !0),
+				u("input", {
+					ref_key: "fileInput",
+					ref: I,
+					type: "file",
+					class: "sr-only",
+					accept: z.value || void 0,
+					multiple: f.multiple,
+					disabled: f.disabled || f.readonly,
+					required: f.required,
+					name: f.name ?? void 0,
+					"data-testid": "dropzone-input",
+					onChange: U
+				}, null, 40, A)
+			], 42, D), R.value.length ? (h(), l("div", j, [(h(!0), l(a, null, _(R.value, (e, i) => (h(), s(y(n), {
+				key: `${e.name}-${i}`,
+				class: "border"
+			}, {
+				default: S(() => [d(y(r), { class: "flex items-center justify-between gap-3 py-3" }, {
+					default: S(() => [u("div", M, [u("span", N, v(e.name), 1), u("span", P, v(Y(e.size)), 1)]), d(y(t), {
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						"aria-label": "Remove file",
+						disabled: f.disabled || f.readonly,
+						"data-testid": "dropzone-remove",
+						onClick: w((e) => J(i), ["stop"])
+					}, {
+						default: S(() => [d(y(E), { class: "size-4" })]),
+						_: 1
+					}, 8, ["disabled", "onClick"])]),
+					_: 2
+				}, 1024)]),
+				_: 2
+			}, 1024))), 128))])) : c("", !0)]),
+			_: 1
+		}, 8, [
+			"label",
+			"required",
+			"hide-label",
+			"help-text",
+			"errors"
+		]));
+	}
+});
+//#endregion
+export { F as default };
+
+//# sourceMappingURL=DropzoneFile.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropzoneFile.vue_vue_type_script_setup_true_lang.js","names":[],"sources":["../../../../../src/components/compositions/elements/file/DropzoneFile.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven dropzone composition.\n *\n * Drag-and-drop target backed by a hidden `<input type=\"file\">` for\n * click-to-browse. Same value contract as `UploadFile` — single `File`\n * or `File[]` when `multiple` is true.\n *\n *   <DropzoneFile v-model=\"doc\" label=\"Document\" accept=\"application/pdf\" />\n */\nimport { computed, ref, watch } from \"vue\"\nimport { UploadCloud, X } from \"@lucide/vue\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\nimport { cn } from \"@/lib/utils\"\n\nexport interface DropzoneFileProps {\n  modelValue?: File | File[] | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  accept?: string\n  acceptedFileTypes?: string[]\n  multiple?: boolean\n  maxFileSize?: number\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nconst props = withDefaults(defineProps<DropzoneFileProps>(), {\n  errors: () => [],\n  acceptedFileTypes: () => [],\n})\n\nconst model = defineModel<File | File[] | null>(\"modelValue\")\n\nconst fileInput = ref<HTMLInputElement | null>(null)\nconst dragOver = ref<boolean>(false)\nconst files = ref<File[]>([])\n\nwatch(\n  () => model.value,\n  (next) => {\n    if (next instanceof File) {\n      files.value = [next]\n    } else if (Array.isArray(next) && next.every((f) => f instanceof File)) {\n      files.value = next as File[]\n    } else {\n      files.value = []\n    }\n  },\n  { immediate: true },\n)\n\nconst accept = computed<string>(() => {\n  if (props.accept) {\n    return props.accept\n  }\n  const list = props.acceptedFileTypes\n  return Array.isArray(list) && list.length ? list.join(\",\") : \"\"\n})\n\nconst maxBytes = computed<number | undefined>(() => props.maxFileSize)\n\nfunction emitFiles(): void {\n  if (props.multiple) {\n    model.value = files.value.slice()\n  } else {\n    model.value = files.value[0] ?? null\n  }\n}\n\nfunction ingest(incoming: File[]): void {\n  if (!incoming.length) {\n    return\n  }\n  const tooLarge = maxBytes.value\n    ? incoming.find((f) => f.size > (maxBytes.value as number))\n    : undefined\n  if (tooLarge) {\n    return\n  }\n  if (props.multiple) {\n    files.value = [...files.value, ...incoming]\n  } else {\n    files.value = [incoming[0]!]\n  }\n  emitFiles()\n}\n\nfunction onChange(event: Event): void {\n  const target = event.target as HTMLInputElement\n  const list = target.files ? Array.from(target.files) : []\n  ingest(list)\n  target.value = \"\"\n}\n\nfunction onDrop(event: DragEvent): void {\n  event.preventDefault()\n  dragOver.value = false\n  if (props.disabled || props.readonly) {\n    return\n  }\n  const list = event.dataTransfer ? Array.from(event.dataTransfer.files) : []\n  ingest(list)\n}\n\nfunction onDragOver(event: DragEvent): void {\n  event.preventDefault()\n  if (!props.disabled && !props.readonly) {\n    dragOver.value = true\n  }\n}\n\nfunction onDragLeave(event: DragEvent): void {\n  event.preventDefault()\n  dragOver.value = false\n}\n\nfunction openPicker(): void {\n  fileInput.value?.click()\n}\n\nfunction removeFile(index: number): void {\n  files.value.splice(index, 1)\n  emitFiles()\n}\n\nfunction formatBytes(bytes: number): string {\n  if (bytes < 1024) {\n    return `${bytes} B`\n  }\n  if (bytes < 1024 * 1024) {\n    return `${(bytes / 1024).toFixed(1)} KB`\n  }\n  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <div\n      :class=\"\n        cn(\n          'flex flex-col items-center justify-center gap-2 rounded-md border-2 border-dashed border-input bg-background px-6 py-10 text-center transition-colors',\n          dragOver && 'border-primary bg-primary/5',\n          (disabled || readonly) && 'cursor-not-allowed opacity-50',\n        )\n      \"\n      role=\"button\"\n      tabindex=\"0\"\n      data-testid=\"dropzone-target\"\n      :data-drag-over=\"dragOver || undefined\"\n      :data-element-name=\"name ?? undefined\"\n      @click=\"openPicker\"\n      @keydown.enter.prevent=\"openPicker\"\n      @keydown.space.prevent=\"openPicker\"\n      @drop=\"onDrop\"\n      @dragover=\"onDragOver\"\n      @dragleave=\"onDragLeave\"\n    >\n      <UploadCloud class=\"size-8 text-muted-foreground\" />\n      <p class=\"text-sm font-medium\">\n        {{ placeholder ?? \"Drop files here, or click to browse\" }}\n      </p>\n      <p v-if=\"accept\" class=\"text-xs text-muted-foreground\">\n        {{ accept }}\n      </p>\n      <input\n        ref=\"fileInput\"\n        type=\"file\"\n        class=\"sr-only\"\n        :accept=\"accept || undefined\"\n        :multiple=\"multiple\"\n        :disabled=\"disabled || readonly\"\n        :required=\"required\"\n        :name=\"name ?? undefined\"\n        data-testid=\"dropzone-input\"\n        @change=\"onChange\"\n      >\n    </div>\n\n    <div v-if=\"files.length\" class=\"flex flex-col gap-2\">\n      <Card\n        v-for=\"(file, i) in files\"\n        :key=\"`${file.name}-${i}`\"\n        class=\"border\"\n      >\n        <CardContent class=\"flex items-center justify-between gap-3 py-3\">\n          <div class=\"flex flex-col\">\n            <span class=\"text-sm font-medium\">{{ file.name }}</span>\n            <span class=\"text-xs text-muted-foreground\">{{ formatBytes(file.size) }}</span>\n          </div>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            aria-label=\"Remove file\"\n            :disabled=\"disabled || readonly\"\n            data-testid=\"dropzone-remove\"\n            @click.stop=\"removeFile(i)\"\n          >\n            <X class=\"size-4\" />\n          </Button>\n        </CardContent>\n      </Card>\n    </div>\n  </FieldFrame>\n</template>\n"],"mappings":"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"}

package/dist/components/compositions/elements/file/UploadFile.js

@@ -0,0 +1,7 @@
+import e from "./UploadFile.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/compositions/elements/file/UploadFile.vue
+var t = e;
+//#endregion
+export { t as default };
+
+//# sourceMappingURL=UploadFile.js.map

package/dist/components/compositions/elements/file/UploadFile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadFile.js","names":[],"sources":["../../../../../src/components/compositions/elements/file/UploadFile.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * Props-driven file-upload composition.\n *\n * Visible Button triggers a hidden `<input type=\"file\">`. Selected files\n * render as info chips with name, formatted size and a Remove control.\n * Emits a `File` (single) or `File[]` (multiple).\n *\n *   <UploadFile v-model=\"avatar\" label=\"Avatar\" accept=\"image/*\" />\n */\nimport { computed, ref, watch } from \"vue\"\nimport { Upload, X } from \"@lucide/vue\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport { FieldFrame } from \"@/components/ui/field-frame\"\n\nexport interface UploadFileProps {\n  modelValue?: File | File[] | null\n  id?: string\n  name?: string\n  label?: string\n  hideLabel?: boolean\n  placeholder?: string\n  accept?: string\n  acceptedFileTypes?: string[]\n  multiple?: boolean\n  maxFileSize?: number\n  required?: boolean\n  readonly?: boolean\n  disabled?: boolean\n  helpText?: string\n  errors?: string[]\n}\n\nconst props = withDefaults(defineProps<UploadFileProps>(), {\n  errors: () => [],\n  acceptedFileTypes: () => [],\n})\n\nconst model = defineModel<File | File[] | null>(\"modelValue\")\n\nconst fileInput = ref<HTMLInputElement | null>(null)\nconst files = ref<File[]>([])\n\nwatch(\n  () => model.value,\n  (next) => {\n    if (next instanceof File) {\n      files.value = [next]\n    } else if (Array.isArray(next) && next.every((f) => f instanceof File)) {\n      files.value = next as File[]\n    } else {\n      files.value = []\n    }\n  },\n  { immediate: true },\n)\n\nconst accept = computed<string>(() => {\n  if (props.accept) {\n    return props.accept\n  }\n  const list = props.acceptedFileTypes\n  return Array.isArray(list) && list.length ? list.join(\",\") : \"\"\n})\n\nconst maxBytes = computed<number | undefined>(() => props.maxFileSize)\n\nfunction openPicker(): void {\n  fileInput.value?.click()\n}\n\nfunction emitFiles(): void {\n  if (props.multiple) {\n    model.value = files.value.slice()\n  } else {\n    model.value = files.value[0] ?? null\n  }\n}\n\nfunction onChange(event: Event): void {\n  const target = event.target as HTMLInputElement\n  const incoming = target.files ? Array.from(target.files) : []\n  if (!incoming.length) {\n    return\n  }\n  const tooLarge = maxBytes.value\n    ? incoming.find((f) => f.size > (maxBytes.value as number))\n    : undefined\n  if (tooLarge) {\n    emitFiles()\n    return\n  }\n  if (props.multiple) {\n    files.value = [...files.value, ...incoming]\n  } else {\n    files.value = [incoming[0]!]\n  }\n  emitFiles()\n  target.value = \"\"\n}\n\nfunction removeFile(index: number): void {\n  files.value.splice(index, 1)\n  emitFiles()\n}\n\nfunction formatBytes(bytes: number): string {\n  if (bytes < 1024) {\n    return `${bytes} B`\n  }\n  if (bytes < 1024 * 1024) {\n    return `${(bytes / 1024).toFixed(1)} KB`\n  }\n  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`\n}\n</script>\n\n<template>\n  <FieldFrame\n    :label=\"label\"\n    :required=\"required\"\n    :hide-label=\"hideLabel\"\n    :help-text=\"helpText\"\n    :errors=\"errors\"\n  >\n    <div :data-element-name=\"name ?? undefined\">\n      <Button\n        type=\"button\"\n        variant=\"outline\"\n        :disabled=\"disabled || readonly\"\n        data-testid=\"upload-trigger\"\n        @click=\"openPicker\"\n      >\n        <Upload class=\"mr-2 size-4\" />\n        <span>{{ placeholder ?? (multiple ? \"Add files\" : \"Choose file\") }}</span>\n      </Button>\n      <input\n        ref=\"fileInput\"\n        type=\"file\"\n        class=\"sr-only\"\n        :accept=\"accept || undefined\"\n        :multiple=\"multiple\"\n        :disabled=\"disabled || readonly\"\n        :required=\"required\"\n        :name=\"name ?? undefined\"\n        data-testid=\"upload-input\"\n        @change=\"onChange\"\n      >\n    </div>\n\n    <div\n      v-if=\"files.length\"\n      class=\"flex flex-col gap-2\"\n    >\n      <Card\n        v-for=\"(file, i) in files\"\n        :key=\"`${file.name}-${i}`\"\n        class=\"border\"\n      >\n        <CardContent class=\"flex items-center justify-between gap-3 py-3\">\n          <div class=\"flex flex-col\">\n            <span class=\"text-sm font-medium\">{{ file.name }}</span>\n            <span class=\"text-xs text-muted-foreground\">{{ formatBytes(file.size) }}</span>\n          </div>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"icon-sm\"\n            aria-label=\"Remove file\"\n            :disabled=\"disabled || readonly\"\n            data-testid=\"upload-remove\"\n            @click=\"removeFile(i)\"\n          >\n            <X class=\"size-4\" />\n          </Button>\n        </CardContent>\n      </Card>\n    </div>\n  </FieldFrame>\n</template>\n"],"mappings":""}