@gxp-dev/mod-ui 2.0.0 → 2.0.3

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"DropzoneFile.vue2.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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,UAAMA,IAAQC,GAKRC,IAAQC,EAAiCF,GAAC,YAAY,GAEtDG,IAAYC,EAA6B,IAAI,GAC7CC,IAAWD,EAAa,EAAK,GAC7BE,IAAQF,EAAY,EAAE;AAE5B,IAAAG;AAAA,MACE,MAAMN,EAAM;AAAA,MACZ,CAACO,MAAS;AACR,QAAIA,aAAgB,OAClBF,EAAM,QAAQ,CAACE,CAAI,IACV,MAAM,QAAQA,CAAI,KAAKA,EAAK,MAAM,CAACC,MAAMA,aAAa,IAAI,IACnEH,EAAM,QAAQE,IAEdF,EAAM,QAAQ,CAAA;AAAA,MAElB;AAAA,MACA,EAAE,WAAW,GAAA;AAAA,IAAK;AAGpB,UAAMI,IAASC,EAAiB,MAAM;AACpC,UAAIZ,EAAM;AACR,eAAOA,EAAM;AAEf,YAAMa,IAAOb,EAAM;AACnB,aAAO,MAAM,QAAQa,CAAI,KAAKA,EAAK,SAASA,EAAK,KAAK,GAAG,IAAI;AAAA,IAC/D,CAAC,GAEKC,IAAWF,EAA6B,MAAMZ,EAAM,WAAW;AAErE,aAASe,IAAkB;AACzB,MAAIf,EAAM,WACRE,EAAM,QAAQK,EAAM,MAAM,MAAA,IAE1BL,EAAM,QAAQK,EAAM,MAAM,CAAC,KAAK;AAAA,IAEpC;AAEA,aAASS,EAAOC,GAAwB;AAOtC,MANI,CAACA,EAAS,UAGGH,EAAS,SACtBG,EAAS,KAAK,CAACP,MAAMA,EAAE,OAAQI,EAAS,KAAgB,MAKxDd,EAAM,WACRO,EAAM,QAAQ,CAAC,GAAGA,EAAM,OAAO,GAAGU,CAAQ,IAE1CV,EAAM,QAAQ,CAACU,EAAS,CAAC,CAAE,GAE7BF,EAAA;AAAA,IACF;AAEA,aAASG,EAASC,GAAoB;AACpC,YAAMC,IAASD,EAAM,QACfN,IAAOO,EAAO,QAAQ,MAAM,KAAKA,EAAO,KAAK,IAAI,CAAA;AACvD,MAAAJ,EAAOH,CAAI,GACXO,EAAO,QAAQ;AAAA,IACjB;AAEA,aAASC,EAAOF,GAAwB;AAGtC,UAFAA,EAAM,eAAA,GACNb,EAAS,QAAQ,IACbN,EAAM,YAAYA,EAAM;AAC1B;AAEF,YAAMa,IAAOM,EAAM,eAAe,MAAM,KAAKA,EAAM,aAAa,KAAK,IAAI,CAAA;AACzE,MAAAH,EAAOH,CAAI;AAAA,IACb;AAEA,aAASS,EAAWH,GAAwB;AAC1C,MAAAA,EAAM,eAAA,GACF,CAACnB,EAAM,YAAY,CAACA,EAAM,aAC5BM,EAAS,QAAQ;AAAA,IAErB;AAEA,aAASiB,EAAYJ,GAAwB;AAC3C,MAAAA,EAAM,eAAA,GACNb,EAAS,QAAQ;AAAA,IACnB;AAEA,aAASkB,IAAmB;;AAC1B,OAAAC,IAAArB,EAAU,UAAV,QAAAqB,EAAiB;AAAA,IACnB;AAEA,aAASC,EAAWC,GAAqB;AACvC,MAAApB,EAAM,MAAM,OAAOoB,GAAO,CAAC,GAC3BZ,EAAA;AAAA,IACF;AAEA,aAASa,EAAYC,GAAuB;AAC1C,aAAIA,IAAQ,OACH,GAAGA,CAAK,OAEbA,IAAQ,OAAO,OACV,IAAIA,IAAQ,MAAM,QAAQ,CAAC,CAAC,QAE9B,IAAIA,KAAS,OAAO,OAAO,QAAQ,CAAC,CAAC;AAAA,IAC9C;2BAIEC,EAyEaC,EAAAC,CAAA,GAAA;AAAA,MAxEV,OAAO/B,EAAA;AAAA,MACP,UAAUA,EAAA;AAAA,MACV,cAAYA,EAAA;AAAA,MACZ,aAAWA,EAAA;AAAA,MACX,QAAQA,EAAA;AAAA,IAAA;iBAET,MAuCM;AAAA,QAvCNgC,EAuCM,OAAA;AAAA,UAtCH,OAAKC;AAAAA,YAAWH,EAAAI,CAAA;AAAA;cAAiL7B,EAAA,SAAQ;AAAA,eAA8CL,EAAA,YAAYA,EAAA,aAAQ;AAAA,YAAA;AAAA;UAO5Q,MAAK;AAAA,UACL,UAAS;AAAA,UACT,eAAY;AAAA,UACX,kBAAgBK,EAAA,SAAY;AAAA,UAC5B,qBAAmBL,EAAA,QAAQ;AAAA,UAC3B,SAAOuB;AAAA,UACP,WAAO;AAAA,gBAAgBA,GAAU,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA,gBACVA,GAAU,CAAA,SAAA,CAAA,GAAA,CAAA,OAAA,CAAA;AAAA,UAAA;AAAA,UACjC,QAAAH;AAAA,UACA,YAAUC;AAAA,UACV,aAAWC;AAAA,QAAA;UAEZa,EAAoDL,EAAAM,CAAA,GAAA,EAAvC,OAAM,gCAA8B;AAAA,UACjDJ,EAEI,KAFJK,GAEIC,EADCtC,EAAA,eAAW,qCAAA,GAAA,CAAA;AAAA,UAEPU,EAAA,cAAT6B,EAEI,KAFJC,GAEIF,EADC5B,EAAA,KAAM,GAAA,CAAA;UAEXsB,EAWC,SAAA;AAAA,qBAVK;AAAA,YAAJ,KAAI7B;AAAA,YACJ,MAAK;AAAA,YACL,OAAM;AAAA,YACL,QAAQO,EAAA,SAAU;AAAA,YAClB,UAAUV,EAAA;AAAA,YACV,UAAUA,EAAA,YAAYA,EAAA;AAAA,YACtB,UAAUA,EAAA;AAAA,YACV,MAAMA,EAAA,QAAQ;AAAA,YACf,eAAY;AAAA,YACX,UAAAiB;AAAA,UAAA;;QAIMX,EAAA,MAAM,UAAjBmC,KAAAF,EAwBM,OAxBNG,GAwBM;AAAA,WAvBJD,EAAA,EAAA,GAAAF,EAsBOI,GAAA,MAAAC,EArBetC,EAAA,OAAK,CAAjBuC,GAAMC,YADhBjB,EAsBOC,EAAAiB,CAAA,GAAA;AAAA,YApBJ,KAAG,GAAKF,EAAK,IAAI,IAAIC,CAAC;AAAA,YACvB,OAAM;AAAA,UAAA;uBAEN,MAgBc;AAAA,cAhBdX,EAgBcL,EAAAkB,CAAA,GAAA,EAhBD,OAAM,kDAA8C;AAAA,2BAC/D,MAGM;AAAA,kBAHNhB,EAGM,OAHNiB,GAGM;AAAA,oBAFJjB,EAAwD,QAAxDkB,IAAwDZ,EAAnBO,EAAK,IAAI,GAAA,CAAA;AAAA,oBAC9Cb,EAA+E,QAA/EmB,IAA+Eb,EAAhCX,EAAYkB,EAAK,IAAI,CAAA,GAAA,CAAA;AAAA,kBAAA;kBAEtEV,EAUSL,EAAAsB,CAAA,GAAA;AAAA,oBATP,MAAK;AAAA,oBACL,SAAQ;AAAA,oBACR,MAAK;AAAA,oBACL,cAAW;AAAA,oBACV,UAAUpD,EAAA,YAAYA,EAAA;AAAA,oBACvB,eAAY;AAAA,oBACX,SAAKqD,EAAA,CAAAC,OAAO7B,EAAWqB,CAAC,GAAA,CAAA,MAAA,CAAA;AAAA,kBAAA;+BAEzB,MAAoB;AAAA,sBAApBX,EAAoBL,EAAAyB,CAAA,GAAA,EAAjB,OAAM,UAAQ;AAAA,oBAAA;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DropzoneFile.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -0,0 +1,33 @@
+export interface UploadFileProps {
+    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 = UploadFileProps;
+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=UploadFile.vue.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UploadFile.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/elements/file/UploadFile.vue"],"names":[],"mappings":"AAsMA,MAAM,WAAW,eAAe;IAC9B,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,eAAe,CAAC;AA2FnC,KAAK,iBAAiB,GAAG;IACzB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI,CAAC;CACnC,GAAG,WAAW,CAAC;;;;;;uBAvGM,MAAM,EAAE;YAOnB,MAAM,EAAE;;;;AAgTnB,wBAUG"}

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

@@ -1,5 +1,152 @@
-import f from "./UploadFile.vue2.js";
+import { defineComponent as V, useModel as A, ref as b, watch as L, computed as g, openBlock as u, createBlock as x, unref as i, withCtx as d, createElementVNode as r, createVNode as s, toDisplayString as v, createElementBlock as B, Fragment as M, renderList as T, createCommentVNode as w, mergeModels as N } from "vue";
+import { Upload as S, X as j } from "lucide-vue-next";
+import "../../../ui/button/index.js";
+import "../../../ui/card/index.js";
+import E from "../../../ui/field-frame/FieldFrame.vue.js";
+import F from "../../../ui/button/Button.vue.js";
+import I from "../../../ui/card/Card.vue.js";
+import U from "../../../ui/card/CardContent.vue.js";
+const D = ["data-element-name"], K = ["accept", "multiple", "disabled", "required", "name"], P = {
+  key: 0,
+  class: "flex flex-col gap-2"
+}, R = { class: "flex flex-col" }, X = { class: "text-sm font-medium" }, G = { class: "text-xs text-muted-foreground" }, ee = /* @__PURE__ */ V({
+  __name: "UploadFile",
+  props: /* @__PURE__ */ N({
+    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(l) {
+    const n = l, c = A(l, "modelValue"), p = b(null), t = b([]);
+    L(
+      () => c.value,
+      (e) => {
+        e instanceof File ? t.value = [e] : Array.isArray(e) && e.every((o) => o instanceof File) ? t.value = e : t.value = [];
+      },
+      { immediate: !0 }
+    );
+    const k = g(() => {
+      if (n.accept)
+        return n.accept;
+      const e = n.acceptedFileTypes;
+      return Array.isArray(e) && e.length ? e.join(",") : "";
+    }), h = g(() => n.maxFileSize);
+    function $() {
+      var e;
+      (e = p.value) == null || e.click();
+    }
+    function m() {
+      n.multiple ? c.value = t.value.slice() : c.value = t.value[0] ?? null;
+    }
+    function C(e) {
+      const o = e.target, a = o.files ? Array.from(o.files) : [];
+      if (!a.length)
+        return;
+      if (h.value ? a.find((y) => y.size > h.value) : void 0) {
+        m();
+        return;
+      }
+      n.multiple ? t.value = [...t.value, ...a] : t.value = [a[0]], m(), o.value = "";
+    }
+    function q(e) {
+      t.value.splice(e, 1), m();
+    }
+    function z(e) {
+      return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(2)} MB`;
+    }
+    return (e, o) => (u(), x(i(E), {
+      label: l.label,
+      required: l.required,
+      "hide-label": l.hideLabel,
+      "help-text": l.helpText,
+      errors: l.errors
+    }, {
+      default: d(() => [
+        r("div", {
+          "data-element-name": l.name ?? void 0
+        }, [
+          s(i(F), {
+            type: "button",
+            variant: "outline",
+            disabled: l.disabled || l.readonly,
+            "data-testid": "upload-trigger",
+            onClick: $
+          }, {
+            default: d(() => [
+              s(i(S), { class: "mr-2 size-4" }),
+              r("span", null, v(l.placeholder ?? (l.multiple ? "Add files" : "Choose file")), 1)
+            ]),
+            _: 1
+          }, 8, ["disabled"]),
+          r("input", {
+            ref_key: "fileInput",
+            ref: p,
+            type: "file",
+            class: "sr-only",
+            accept: k.value || void 0,
+            multiple: l.multiple,
+            disabled: l.disabled || l.readonly,
+            required: l.required,
+            name: l.name ?? void 0,
+            "data-testid": "upload-input",
+            onChange: C
+          }, null, 40, K)
+        ], 8, D),
+        t.value.length ? (u(), B("div", P, [
+          (u(!0), B(M, null, T(t.value, (a, f) => (u(), x(i(I), {
+            key: `${a.name}-${f}`,
+            class: "border"
+          }, {
+            default: d(() => [
+              s(i(U), { class: "flex items-center justify-between gap-3 py-3" }, {
+                default: d(() => [
+                  r("div", R, [
+                    r("span", X, v(a.name), 1),
+                    r("span", G, v(z(a.size)), 1)
+                  ]),
+                  s(i(F), {
+                    type: "button",
+                    variant: "ghost",
+                    size: "icon-sm",
+                    "aria-label": "Remove file",
+                    disabled: l.disabled || l.readonly,
+                    "data-testid": "upload-remove",
+                    onClick: (y) => q(f)
+                  }, {
+                    default: d(() => [
+                      s(i(j), { 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
+  ee as default
 };
 //# sourceMappingURL=UploadFile.vue.js.map

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

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

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

@@ -1,152 +1,5 @@
-import { defineComponent as V, useModel as A, ref as b, watch as L, computed as g, openBlock as u, createBlock as x, unref as i, withCtx as d, createElementVNode as r, createVNode as s, toDisplayString as v, createElementBlock as B, Fragment as M, renderList as T, createCommentVNode as w, mergeModels as N } from "vue";
-import { Upload as S, X as j } from "lucide-vue-next";
-import "../../../ui/button/index.js";
-import "../../../ui/card/index.js";
-import E from "../../../ui/field-frame/FieldFrame.vue.js";
-import F from "../../../ui/button/Button.vue.js";
-import I from "../../../ui/card/Card.vue.js";
-import U from "../../../ui/card/CardContent.vue.js";
-const D = ["data-element-name"], K = ["accept", "multiple", "disabled", "required", "name"], P = {
-  key: 0,
-  class: "flex flex-col gap-2"
-}, R = { class: "flex flex-col" }, X = { class: "text-sm font-medium" }, G = { class: "text-xs text-muted-foreground" }, ee = /* @__PURE__ */ V({
-  __name: "UploadFile",
-  props: /* @__PURE__ */ N({
-    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(l) {
-    const n = l, c = A(l, "modelValue"), p = b(null), t = b([]);
-    L(
-      () => c.value,
-      (e) => {
-        e instanceof File ? t.value = [e] : Array.isArray(e) && e.every((o) => o instanceof File) ? t.value = e : t.value = [];
-      },
-      { immediate: !0 }
-    );
-    const k = g(() => {
-      if (n.accept)
-        return n.accept;
-      const e = n.acceptedFileTypes;
-      return Array.isArray(e) && e.length ? e.join(",") : "";
-    }), h = g(() => n.maxFileSize);
-    function $() {
-      var e;
-      (e = p.value) == null || e.click();
-    }
-    function m() {
-      n.multiple ? c.value = t.value.slice() : c.value = t.value[0] ?? null;
-    }
-    function C(e) {
-      const o = e.target, a = o.files ? Array.from(o.files) : [];
-      if (!a.length)
-        return;
-      if (h.value ? a.find((y) => y.size > h.value) : void 0) {
-        m();
-        return;
-      }
-      n.multiple ? t.value = [...t.value, ...a] : t.value = [a[0]], m(), o.value = "";
-    }
-    function q(e) {
-      t.value.splice(e, 1), m();
-    }
-    function z(e) {
-      return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(2)} MB`;
-    }
-    return (e, o) => (u(), x(i(E), {
-      label: l.label,
-      required: l.required,
-      "hide-label": l.hideLabel,
-      "help-text": l.helpText,
-      errors: l.errors
-    }, {
-      default: d(() => [
-        r("div", {
-          "data-element-name": l.name ?? void 0
-        }, [
-          s(i(F), {
-            type: "button",
-            variant: "outline",
-            disabled: l.disabled || l.readonly,
-            "data-testid": "upload-trigger",
-            onClick: $
-          }, {
-            default: d(() => [
-              s(i(S), { class: "mr-2 size-4" }),
-              r("span", null, v(l.placeholder ?? (l.multiple ? "Add files" : "Choose file")), 1)
-            ]),
-            _: 1
-          }, 8, ["disabled"]),
-          r("input", {
-            ref_key: "fileInput",
-            ref: p,
-            type: "file",
-            class: "sr-only",
-            accept: k.value || void 0,
-            multiple: l.multiple,
-            disabled: l.disabled || l.readonly,
-            required: l.required,
-            name: l.name ?? void 0,
-            "data-testid": "upload-input",
-            onChange: C
-          }, null, 40, K)
-        ], 8, D),
-        t.value.length ? (u(), B("div", P, [
-          (u(!0), B(M, null, T(t.value, (a, f) => (u(), x(i(I), {
-            key: `${a.name}-${f}`,
-            class: "border"
-          }, {
-            default: d(() => [
-              s(i(U), { class: "flex items-center justify-between gap-3 py-3" }, {
-                default: d(() => [
-                  r("div", R, [
-                    r("span", X, v(a.name), 1),
-                    r("span", G, v(z(a.size)), 1)
-                  ]),
-                  s(i(F), {
-                    type: "button",
-                    variant: "ghost",
-                    size: "icon-sm",
-                    "aria-label": "Remove file",
-                    disabled: l.disabled || l.readonly,
-                    "data-testid": "upload-remove",
-                    onClick: (y) => q(f)
-                  }, {
-                    default: d(() => [
-                      s(i(j), { class: "size-4" })
-                    ]),
-                    _: 1
-                  }, 8, ["disabled", "onClick"])
-                ]),
-                _: 2
-              }, 1024)
-            ]),
-            _: 2
-          }, 1024))), 128))
-        ])) : w("", !0)
-      ]),
-      _: 1
-    }, 8, ["label", "required", "hide-label", "help-text", "errors"]));
-  }
-});
+import f from "./UploadFile.vue.js";
 export {
-  ee as default
+  f as default
 };
 //# sourceMappingURL=UploadFile.vue2.js.map

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

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

package/dist/components/compositions/elements/input/BarcodeScannerInput.vue.d.ts

@@ -0,0 +1,48 @@
+export interface BarcodeScannerInputProps {
+    modelValue?: string | null;
+    id?: string;
+    name?: string;
+    label?: string;
+    hideLabel?: boolean;
+    required?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+    helpText?: string;
+    errors?: string[];
+    /** Quagga barcode reader symbologies to recognise. */
+    scanFormats?: ReadonlyArray<string>;
+    /** Start scanning automatically when the component mounts. */
+    autoStart?: boolean;
+    /** Preferred camera facing mode. */
+    facingMode?: "environment" | "user";
+}
+type __VLS_Props = BarcodeScannerInputProps;
+declare function stop(): Promise<void>;
+declare function start(): Promise<void>;
+/**
+ * Test hook — lets tests simulate a successful Quagga detection
+ * without spinning up a real camera. Not part of the public contract;
+ * exposed only via `wrapper.vm` in unit tests.
+ */
+declare function __handleDetectedForTest(code: string): void;
+type __VLS_PublicProps = {
+    "modelValue"?: string | null;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {
+    __handleDetectedForTest: typeof __handleDetectedForTest;
+    start: typeof start;
+    stop: typeof stop;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: string | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+}>, {
+    scanFormats: ReadonlyArray<string>;
+    errors: string[];
+    autoStart: boolean;
+    facingMode: "environment" | "user";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    videoContainerRef: HTMLDivElement;
+}, HTMLDivElement>;
+export default _default;
+//# sourceMappingURL=BarcodeScannerInput.vue.d.ts.map

package/dist/components/compositions/elements/input/BarcodeScannerInput.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarcodeScannerInput.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/elements/input/BarcodeScannerInput.vue"],"names":[],"mappings":"AAkRA,MAAM,WAAW,wBAAwB;IACvC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,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;IACjB,sDAAsD;IACtD,WAAW,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAA;IACnC,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,oCAAoC;IACpC,UAAU,CAAC,EAAE,aAAa,GAAG,MAAM,CAAA;CACpC;AAED,KAAK,WAAW,GAAG,wBAAwB,CAAC;AA+D5C,iBAAe,IAAI,IAAI,OAAO,CAAC,IAAI,CAAC,CAgBnC;AAED,iBAAe,KAAK,IAAI,OAAO,CAAC,IAAI,CAAC,CAyDpC;AAUD;;;;GAIG;AACH,iBAAS,uBAAuB,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAInD;AA4BD,KAAK,iBAAiB,GAAG;IACzB,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B,GAAG,WAAW,CAAC;;;;;;;;;;iBAlMA,aAAa,CAAC,MAAM,CAAC;YAF1B,MAAM,EAAE;eAIL,OAAO;gBAEN,aAAa,GAAG,MAAM;;;;AA+WrC,wBAWG"}