@gxp-dev/mod-ui 2.0.0 → 2.0.1

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

@@ -1,296 +1,5 @@
-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"]));
-  }
-});
+import f from "./AssetPickerFile.vue.js";
 export {
-  je as default
+  f as default
 };
 //# sourceMappingURL=AssetPickerFile.vue2.js.map

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

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

package/dist/components/compositions/elements/file/DropzoneFile.vue.d.ts

@@ -0,0 +1,33 @@
+export interface DropzoneFileProps {
+    modelValue?: File | File[] | null;
+    id?: string;
+    name?: string;
+    label?: string;
+    hideLabel?: boolean;
+    placeholder?: string;
+    accept?: string;
+    acceptedFileTypes?: string[];
+    multiple?: boolean;
+    maxFileSize?: number;
+    required?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+    helpText?: string;
+    errors?: string[];
+}
+type __VLS_Props = DropzoneFileProps;
+type __VLS_PublicProps = {
+    "modelValue"?: File | File[] | null;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: File | File[] | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: File | File[] | null) => any) | undefined;
+}>, {
+    acceptedFileTypes: string[];
+    errors: string[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    fileInput: HTMLInputElement;
+}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=DropzoneFile.vue.d.ts.map

package/dist/components/compositions/elements/file/DropzoneFile.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropzoneFile.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/elements/file/DropzoneFile.vue"],"names":[],"mappings":"AA+OA,MAAM,WAAW,iBAAiB;IAChC,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAA;IACjC,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;CAClB;AAED,KAAK,WAAW,GAAG,iBAAiB,CAAC;AAqHrC,KAAK,iBAAiB,GAAG;IACzB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;CACnC,GAAG,WAAW,CAAC;;;;;;uBAjIM,MAAM,EAAE;YAOnB,MAAM,EAAE;;;;AA+UnB,wBAUG"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"DropzoneFile.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
+{"version":3,"file":"DropzoneFile.vue.js","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-next\"\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"],"names":["props","__props","model","_useModel","fileInput","ref","dragOver","files","watch","next","f","accept","computed","list","maxBytes","emitFiles","ingest","incoming","onChange","event","target","onDrop","onDragOver","onDragLeave","openPicker","_a","removeFile","index","formatBytes","bytes","_createBlock","_unref","FieldFrame","_createElementVNode","_normalizeClass","cn","_createVNode","UploadCloud","_hoisted_2","_toDisplayString","_createElementBlock","_hoisted_3","_openBlock","_hoisted_5","_Fragment","_renderList","file","i","Card","CardContent","_hoisted_6","_hoisted_7","_hoisted_8","Button","_withModifiers","$event","X"],"mappings":"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"}