vue-chunk-uploader 1.1.0 → 1.4.0

package/README.md

@@ -10,10 +10,14 @@ The upload core is UI-agnostic — you choose which adapter to use.
 |--------|----|---------------------|
 | `vue-chunk-uploader/quasar` | Quasar | `quasar` |
 | `vue-chunk-uploader/vuetify` | Vuetify 3 | `vuetify` |
+| `vue-chunk-uploader/reka` | [Reka UI](https://reka-ui.com/) | `reka-ui` |
+| `vue-chunk-uploader/element-plus` | [Element Plus](https://element-plus.org/) | `element-plus` |
+| `vue-chunk-uploader/ant-design` | [Ant Design Vue](https://antdv.com/) | `ant-design-vue` |
+| `vue-chunk-uploader/naive` | [Naive UI](https://www.naiveui.com/) | `naive-ui` |
 | `vue-chunk-uploader/native` | Plain HTML | — |
 | `vue-chunk-uploader` | Core only (no UI) | — |
 
-> **Note about MUI:** Material UI is for React. In the Vue ecosystem, the closest equivalent is **Vuetify**. For other UIs (Element Plus, Naive UI, MUI/React, etc.), use `native` or the `useChunkUpload` composable and build your own UI.
+> **Note about MUI:** Material UI is for React. In the Vue ecosystem, the closest equivalent is **Vuetify**. For other UIs, use `native`, `reka`, or the `useChunkUpload` composable and build your own UI.
 
 ## Install
 
@@ -29,6 +33,18 @@ npm install quasar
 
 # or Vuetify
 npm install vuetify
+
+# or Reka UI
+npm install reka-ui
+
+# or Element Plus
+npm install element-plus
+
+# or Ant Design Vue
+npm install ant-design-vue
+
+# or Naive UI
+npm install naive-ui
 ```
 
 ## Usage — Quasar
@@ -88,6 +104,126 @@ app.use(VueChunkUploader, { httpClient: api })
 </template>
 ```
 
+## Usage — Element Plus
+
+```js
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import VueChunkUploader from 'vue-chunk-uploader/element-plus'
+
+app.use(ElementPlus)
+app.use(VueChunkUploader, { httpClient: api })
+```
+
+```vue
+<template>
+  <ChunkUploader
+    v-model="file"
+    url="/api/document/chunk/upload"
+    button-label="Select file"
+    accept=".pdf,.png"
+    @onSuccess="onSuccess"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ChunkUploader } from 'vue-chunk-uploader/element-plus'
+
+const file = ref(null)
+</script>
+```
+
+## Usage — Ant Design Vue
+
+```js
+import Antd from 'ant-design-vue'
+import 'ant-design-vue/dist/reset.css'
+import VueChunkUploader from 'vue-chunk-uploader/ant-design'
+
+app.use(Antd)
+app.use(VueChunkUploader, { httpClient: api })
+```
+
+```vue
+<template>
+  <ChunkUploader
+    v-model="file"
+    url="/api/document/chunk/upload"
+    button-label="Select file"
+    accept=".pdf,.png"
+    @onSuccess="onSuccess"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ChunkUploader } from 'vue-chunk-uploader/ant-design'
+
+const file = ref(null)
+</script>
+```
+
+## Usage — Naive UI
+
+```js
+import naive from 'naive-ui'
+import VueChunkUploader from 'vue-chunk-uploader/naive'
+
+app.use(naive)
+app.use(VueChunkUploader, { httpClient: api })
+```
+
+```vue
+<template>
+  <ChunkUploader
+    v-model="file"
+    url="/api/document/chunk/upload"
+    button-label="Select file"
+    accept=".pdf,.png"
+    @onSuccess="onSuccess"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ChunkUploader } from 'vue-chunk-uploader/naive'
+
+const file = ref(null)
+</script>
+```
+
+## Usage — Reka UI
+
+Uses accessible [Reka UI](https://reka-ui.com/) primitives (`Label`, `Progress`, `Primitive`). Since Reka is unstyled, import the package CSS (or override with your own styles).
+
+```js
+import VueChunkUploader from 'vue-chunk-uploader/reka'
+import 'vue-chunk-uploader/style.css'
+
+app.use(VueChunkUploader, { httpClient: api })
+```
+
+```vue
+<template>
+  <ChunkUploader
+    v-model="file"
+    url="/api/document/chunk/upload"
+    label="File"
+    accept=".pdf,.png"
+    @onSuccess="onSuccess"
+  />
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { ChunkUploader } from 'vue-chunk-uploader/reka'
+import 'vue-chunk-uploader/style.css'
+
+const file = ref(null)
+</script>
+```
+
 ## Usage — Native (no UI framework)
 
 ```js
@@ -176,8 +312,10 @@ await chunk(
 | `chunkSize` | `number` | `1MB` | Chunk size |
 | `maxRequestsPerMinute` | `number` | `80` | Client-side rate limit |
 | `rateLimitWindowMs` | `number` | `60000` | Rate-limit window |
+| `label` | `string` | `''` | Label text (Reka adapter) |
+| `buttonLabel` | `string` | `'Select file'` | Button text (Element Plus / Ant Design / Naive UI adapters) |
 
-UI-specific attrs are forwarded as well (e.g. `q-file` or `v-file-input` props).
+UI-specific attrs are forwarded as well (e.g. `q-file`, `v-file-input`, `el-upload`, `a-upload`, `n-upload`, or native `input[type=file]` attrs).
 
 ## Events
 

package/dist/_plugin-vue_export-helper-BHFhmbuH.cjs

@@ -0,0 +1 @@
+"use strict";const e=(t,o)=>{const c=t.__vccOpts||t;for(const[r,s]of o)c[r]=s;return c};exports._export_sfc=e;

package/dist/_plugin-vue_export-helper-CHgC5LLL.js

@@ -0,0 +1,9 @@
+const s = (t, r) => {
+  const o = t.__vccOpts || t;
+  for (const [c, e] of r)
+    o[c] = e;
+  return o;
+};
+export {
+  s as _
+};

package/dist/ant-design.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),u=require("ant-design-vue"),o=require("./createPlugin-DoOjwZfd.cjs"),v=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),C={class:"vue-chunk-uploader-ant-design","data-ui":"ant-design"},V={key:0,class:"vue-chunk-uploader-ant-design__status"},U=Object.assign({inheritAttrs:!1},{__name:"ChunkUploader",props:{...o.chunkUploaderProps,buttonLabel:{type:String,default:"Select file"}},emits:o.chunkUploaderEmits,setup(l,{expose:d,emit:p}){const n=l,s=p,{hasError:a,progress:t,uploadFile:f,clear:k}=o.useChunkUpload(n,s),m=e.computed(()=>a.value?"error":t.value>=100?"success":"processing"),h=e.computed(()=>{if(!n.modelValue)return[];let r="done";return a.value?r="error":t.value>0&&t.value<100?r="uploading":t.value>=100?r="done":r="ready",[{uid:"-1",name:n.modelValue.name,status:r,percent:t.value,originFileObj:n.modelValue}]}),g=r=>(s("update:modelValue",r),!1),_=()=>(k(),!0);return d({uploadFile:f}),(r,x)=>(e.openBlock(),e.createElementBlock("div",C,[e.createVNode(e.unref(u.Upload),e.mergeProps(r.$attrs,{"file-list":h.value,"before-upload":g,"max-count":1,onRemove:_}),{default:e.withCtx(()=>[e.createVNode(e.unref(u.Button),{type:"primary"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.buttonLabel),1)]),_:1})]),_:1},16,["file-list"]),e.unref(t)>0?(e.openBlock(),e.createElementBlock("div",V,[e.createVNode(e.unref(u.Tag),{color:m.value},{default:e.withCtx(()=>[e.unref(t)<100?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(e.unref(t))+"%",1)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode("Done")],64))]),_:1},8,["color"])])):e.createCommentVNode("",!0),e.unref(t)>0&&e.unref(t)<100?(e.openBlock(),e.createBlock(e.unref(u.Progress),{key:1,class:"vue-chunk-uploader-ant-design__progress",percent:e.unref(t),status:e.unref(a)?"exception":"active","stroke-width":6,size:"small"},null,8,["percent","status"])):e.createCommentVNode("",!0)]))}}),c=v._export_sfc(U,[["__scopeId","data-v-feea6628"]]),i=o.createChunkUploaderPlugin(c);exports.chunk=o.chunk;exports.chunkUploader=o.chunkUploader;exports.setDefaultHttpClient=o.setDefaultHttpClient;exports.useChunkUpload=o.useChunkUpload;exports.ChunkUploader=c;exports.VueChunkUploader=i;exports.default=i;

package/dist/ant-design.js

@@ -0,0 +1,84 @@
+import { computed as p, openBlock as o, createElementBlock as s, createVNode as n, unref as t, mergeProps as x, withCtx as u, createTextVNode as c, toDisplayString as m, Fragment as f, createCommentVNode as k, createBlock as V } from "vue";
+import { Upload as B, Button as P, Tag as D, Progress as E } from "ant-design-vue";
+import { d as F, e as L, u as N, c as S } from "./createPlugin-DZ7dugEN.js";
+import { a as K, b as M, s as Q } from "./createPlugin-DZ7dugEN.js";
+import { _ as j } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const w = {
+  class: "vue-chunk-uploader-ant-design",
+  "data-ui": "ant-design"
+}, O = {
+  key: 0,
+  class: "vue-chunk-uploader-ant-design__status"
+}, R = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+  __name: "ChunkUploader",
+  props: {
+    ...L,
+    buttonLabel: {
+      type: String,
+      default: "Select file"
+    }
+  },
+  emits: F,
+  setup(i, { expose: h, emit: _ }) {
+    const r = i, d = _, { hasError: l, progress: e, uploadFile: v, clear: g } = N(r, d), U = p(() => l.value ? "error" : e.value >= 100 ? "success" : "processing"), b = p(() => {
+      if (!r.modelValue) return [];
+      let a = "done";
+      return l.value ? a = "error" : e.value > 0 && e.value < 100 ? a = "uploading" : e.value >= 100 ? a = "done" : a = "ready", [
+        {
+          uid: "-1",
+          name: r.modelValue.name,
+          status: a,
+          percent: e.value,
+          originFileObj: r.modelValue
+        }
+      ];
+    }), y = (a) => (d("update:modelValue", a), !1), C = () => (g(), !0);
+    return h({ uploadFile: v }), (a, z) => (o(), s("div", w, [
+      n(t(B), x(a.$attrs, {
+        "file-list": b.value,
+        "before-upload": y,
+        "max-count": 1,
+        onRemove: C
+      }), {
+        default: u(() => [
+          n(t(P), { type: "primary" }, {
+            default: u(() => [
+              c(m(i.buttonLabel), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 16, ["file-list"]),
+      t(e) > 0 ? (o(), s("div", O, [
+        n(t(D), { color: U.value }, {
+          default: u(() => [
+            t(e) < 100 ? (o(), s(f, { key: 0 }, [
+              c(m(t(e)) + "%", 1)
+            ], 64)) : (o(), s(f, { key: 1 }, [
+              c("Done")
+            ], 64))
+          ]),
+          _: 1
+        }, 8, ["color"])
+      ])) : k("", !0),
+      t(e) > 0 && t(e) < 100 ? (o(), V(t(E), {
+        key: 1,
+        class: "vue-chunk-uploader-ant-design__progress",
+        percent: t(e),
+        status: t(l) ? "exception" : "active",
+        "stroke-width": 6,
+        size: "small"
+      }, null, 8, ["percent", "status"])) : k("", !0)
+    ]));
+  }
+}), T = /* @__PURE__ */ j(R, [["__scopeId", "data-v-feea6628"]]), q = S(T);
+export {
+  T as ChunkUploader,
+  q as VueChunkUploader,
+  K as chunk,
+  M as chunkUploader,
+  q as default,
+  Q as setDefaultHttpClient,
+  N as useChunkUpload
+};

package/dist/element-plus.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),o=require("element-plus"),u=require("./createPlugin-DoOjwZfd.cjs"),v=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),V={class:"vue-chunk-uploader-element-plus","data-ui":"element-plus"},U={class:"el-upload__tip vue-chunk-uploader-element-plus__status"},x=Object.assign({inheritAttrs:!1},{__name:"ChunkUploader",props:{...u.chunkUploaderProps,buttonLabel:{type:String,default:"Select file"}},emits:u.chunkUploaderEmits,setup(c,{expose:i,emit:f}){const l=c,r=f,{hasError:a,progress:n,uploadFile:m,clear:h}=u.useChunkUpload(l,r),k=e.computed(()=>{if(!l.modelValue)return[];let t="ready";return a.value?t="fail":n.value>=100?t="success":n.value>0&&(t="uploading"),[{name:l.modelValue.name,raw:l.modelValue,status:t,percentage:n.value}]}),_=t=>{r("update:modelValue",(t==null?void 0:t.raw)??null)},g=()=>{h()},C=t=>{const s=t==null?void 0:t[0];s&&r("update:modelValue",s)};return i({uploadFile:m}),(t,s)=>(e.openBlock(),e.createElementBlock("div",V,[e.createVNode(e.unref(o.ElUpload),e.mergeProps(t.$attrs,{action:"#","auto-upload":!1,limit:1,"file-list":k.value,"on-change":_,"on-remove":g,"on-exceed":C}),{tip:e.withCtx(()=>[e.createElementVNode("div",U,[e.createVNode(e.unref(o.ElTag),{size:"small",type:e.unref(a)?"danger":e.unref(n)>=100?"success":"info"},{default:e.withCtx(()=>[e.unref(n)<100?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(e.unref(n))+"%",1)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode("Done")],64))]),_:1},8,["type"])])]),default:e.withCtx(()=>[e.createVNode(e.unref(o.ElButton),{type:"primary"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(c.buttonLabel),1)]),_:1})]),_:1},16,["file-list"]),e.unref(n)>0&&e.unref(n)<100?(e.openBlock(),e.createBlock(e.unref(o.ElProgress),{key:0,class:"vue-chunk-uploader-element-plus__progress",percentage:e.unref(n),status:e.unref(a)?"exception":void 0,"stroke-width":6},null,8,["percentage","status"])):e.createCommentVNode("",!0)]))}}),p=v._export_sfc(x,[["__scopeId","data-v-94616f6c"]]),d=u.createChunkUploaderPlugin(p);exports.chunk=u.chunk;exports.chunkUploader=u.chunkUploader;exports.setDefaultHttpClient=u.setDefaultHttpClient;exports.useChunkUpload=u.useChunkUpload;exports.ChunkUploader=p;exports.VueChunkUploader=d;exports.default=d;

package/dist/element-plus.js

@@ -0,0 +1,94 @@
+import { computed as C, openBlock as s, createElementBlock as c, createVNode as p, unref as t, mergeProps as E, withCtx as l, createTextVNode as d, toDisplayString as m, createElementVNode as U, Fragment as f, createBlock as b, createCommentVNode as w } from "vue";
+import { ElUpload as B, ElButton as N, ElTag as P, ElProgress as D } from "element-plus";
+import { d as L, e as S, u as T, c as j } from "./createPlugin-DZ7dugEN.js";
+import { a as Q, b as W, s as X } from "./createPlugin-DZ7dugEN.js";
+import { _ as z } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const A = {
+  class: "vue-chunk-uploader-element-plus",
+  "data-ui": "element-plus"
+}, H = { class: "el-upload__tip vue-chunk-uploader-element-plus__status" }, I = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+  __name: "ChunkUploader",
+  props: {
+    ...S,
+    buttonLabel: {
+      type: String,
+      default: "Select file"
+    }
+  },
+  emits: L,
+  setup(i, { expose: h, emit: _ }) {
+    const o = i, n = _, { hasError: r, progress: a, uploadFile: k, clear: g } = T(o, n), v = C(() => {
+      if (!o.modelValue) return [];
+      let e = "ready";
+      return r.value ? e = "fail" : a.value >= 100 ? e = "success" : a.value > 0 && (e = "uploading"), [
+        {
+          name: o.modelValue.name,
+          raw: o.modelValue,
+          status: e,
+          percentage: a.value
+        }
+      ];
+    }), y = (e) => {
+      n("update:modelValue", (e == null ? void 0 : e.raw) ?? null);
+    }, V = () => {
+      g();
+    }, x = (e) => {
+      const u = e == null ? void 0 : e[0];
+      u && n("update:modelValue", u);
+    };
+    return h({ uploadFile: k }), (e, u) => (s(), c("div", A, [
+      p(t(B), E(e.$attrs, {
+        action: "#",
+        "auto-upload": !1,
+        limit: 1,
+        "file-list": v.value,
+        "on-change": y,
+        "on-remove": V,
+        "on-exceed": x
+      }), {
+        tip: l(() => [
+          U("div", H, [
+            p(t(P), {
+              size: "small",
+              type: t(r) ? "danger" : t(a) >= 100 ? "success" : "info"
+            }, {
+              default: l(() => [
+                t(a) < 100 ? (s(), c(f, { key: 0 }, [
+                  d(m(t(a)) + "%", 1)
+                ], 64)) : (s(), c(f, { key: 1 }, [
+                  d("Done")
+                ], 64))
+              ]),
+              _: 1
+            }, 8, ["type"])
+          ])
+        ]),
+        default: l(() => [
+          p(t(N), { type: "primary" }, {
+            default: l(() => [
+              d(m(i.buttonLabel), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 16, ["file-list"]),
+      t(a) > 0 && t(a) < 100 ? (s(), b(t(D), {
+        key: 0,
+        class: "vue-chunk-uploader-element-plus__progress",
+        percentage: t(a),
+        status: t(r) ? "exception" : void 0,
+        "stroke-width": 6
+      }, null, 8, ["percentage", "status"])) : w("", !0)
+    ]));
+  }
+}), O = /* @__PURE__ */ z(I, [["__scopeId", "data-v-94616f6c"]]), J = j(O);
+export {
+  O as ChunkUploader,
+  J as VueChunkUploader,
+  Q as chunk,
+  W as chunkUploader,
+  J as default,
+  X as setDefaultHttpClient,
+  T as useChunkUpload
+};

package/dist/naive.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),a=require("naive-ui"),r=require("./createPlugin-DoOjwZfd.cjs"),_=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),C={class:"vue-chunk-uploader-naive","data-ui":"naive"},U={key:0,class:"vue-chunk-uploader-naive__status"},V=Object.assign({inheritAttrs:!1},{__name:"ChunkUploader",props:{...r.chunkUploaderProps,buttonLabel:{type:String,default:"Select file"}},emits:r.chunkUploaderEmits,setup(l,{expose:i,emit:p}){const u=l,s=p,{hasError:o,progress:n,uploadFile:f,clear:h}=r.useChunkUpload(u,s),k=e.computed(()=>o.value?"error":n.value>=100?"success":"info"),m=e.computed(()=>{if(!u.modelValue)return[];let t="pending";return o.value?t="error":n.value>=100?t="finished":n.value>0&&(t="uploading"),[{id:"vue-chunk-uploader",name:u.modelValue.name,status:t,percentage:n.value,file:u.modelValue}]}),v=({file:t})=>{(t==null?void 0:t.status)!=="removed"&&s("update:modelValue",(t==null?void 0:t.file)??null)},g=()=>{h()};return i({uploadFile:f}),(t,y)=>(e.openBlock(),e.createElementBlock("div",C,[e.createVNode(e.unref(a.NUpload),e.mergeProps(t.$attrs,{"file-list":m.value,"default-upload":!1,max:1,onChange:v,onRemove:g}),{default:e.withCtx(()=>[e.createVNode(e.unref(a.NButton),{type:"primary"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.buttonLabel),1)]),_:1})]),_:1},16,["file-list"]),e.unref(n)>0?(e.openBlock(),e.createElementBlock("div",U,[e.createVNode(e.unref(a.NTag),{type:k.value,size:"small",round:""},{default:e.withCtx(()=>[e.unref(n)<100?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(e.unref(n))+"%",1)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode("Done")],64))]),_:1},8,["type"])])):e.createCommentVNode("",!0),e.unref(n)>0&&e.unref(n)<100?(e.openBlock(),e.createBlock(e.unref(a.NProgress),{key:1,class:"vue-chunk-uploader-naive__progress",type:"line",percentage:e.unref(n),status:e.unref(o)?"error":void 0,height:6,"show-indicator":!1},null,8,["percentage","status"])):e.createCommentVNode("",!0)]))}}),c=_._export_sfc(V,[["__scopeId","data-v-6f64a1ad"]]),d=r.createChunkUploaderPlugin(c);exports.chunk=r.chunk;exports.chunkUploader=r.chunkUploader;exports.setDefaultHttpClient=r.setDefaultHttpClient;exports.useChunkUpload=r.useChunkUpload;exports.ChunkUploader=c;exports.VueChunkUploader=d;exports.default=d;

package/dist/naive.js

@@ -0,0 +1,94 @@
+import { computed as p, openBlock as r, createElementBlock as s, createVNode as u, unref as t, mergeProps as x, withCtx as l, createTextVNode as c, toDisplayString as m, Fragment as f, createCommentVNode as h, createBlock as N } from "vue";
+import { NUpload as b, NButton as B, NTag as P, NProgress as D } from "naive-ui";
+import { d as E, e as L, u as S, c as T } from "./createPlugin-DZ7dugEN.js";
+import { a as K, b as M, s as Q } from "./createPlugin-DZ7dugEN.js";
+import { _ as w } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const F = {
+  class: "vue-chunk-uploader-naive",
+  "data-ui": "naive"
+}, R = {
+  key: 0,
+  class: "vue-chunk-uploader-naive__status"
+}, j = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+  __name: "ChunkUploader",
+  props: {
+    ...L,
+    buttonLabel: {
+      type: String,
+      default: "Select file"
+    }
+  },
+  emits: E,
+  setup(d, { expose: v, emit: k }) {
+    const o = d, i = k, { hasError: n, progress: a, uploadFile: _, clear: g } = S(o, i), y = p(() => n.value ? "error" : a.value >= 100 ? "success" : "info"), C = p(() => {
+      if (!o.modelValue) return [];
+      let e = "pending";
+      return n.value ? e = "error" : a.value >= 100 ? e = "finished" : a.value > 0 && (e = "uploading"), [
+        {
+          id: "vue-chunk-uploader",
+          name: o.modelValue.name,
+          status: e,
+          percentage: a.value,
+          file: o.modelValue
+        }
+      ];
+    }), U = ({ file: e }) => {
+      (e == null ? void 0 : e.status) !== "removed" && i("update:modelValue", (e == null ? void 0 : e.file) ?? null);
+    }, V = () => {
+      g();
+    };
+    return v({ uploadFile: _ }), (e, A) => (r(), s("div", F, [
+      u(t(b), x(e.$attrs, {
+        "file-list": C.value,
+        "default-upload": !1,
+        max: 1,
+        onChange: U,
+        onRemove: V
+      }), {
+        default: l(() => [
+          u(t(B), { type: "primary" }, {
+            default: l(() => [
+              c(m(d.buttonLabel), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      }, 16, ["file-list"]),
+      t(a) > 0 ? (r(), s("div", R, [
+        u(t(P), {
+          type: y.value,
+          size: "small",
+          round: ""
+        }, {
+          default: l(() => [
+            t(a) < 100 ? (r(), s(f, { key: 0 }, [
+              c(m(t(a)) + "%", 1)
+            ], 64)) : (r(), s(f, { key: 1 }, [
+              c("Done")
+            ], 64))
+          ]),
+          _: 1
+        }, 8, ["type"])
+      ])) : h("", !0),
+      t(a) > 0 && t(a) < 100 ? (r(), N(t(D), {
+        key: 1,
+        class: "vue-chunk-uploader-naive__progress",
+        type: "line",
+        percentage: t(a),
+        status: t(n) ? "error" : void 0,
+        height: 6,
+        "show-indicator": !1
+      }, null, 8, ["percentage", "status"])) : h("", !0)
+    ]));
+  }
+}), z = /* @__PURE__ */ w(j, [["__scopeId", "data-v-6f64a1ad"]]), q = T(z);
+export {
+  z as ChunkUploader,
+  q as VueChunkUploader,
+  K as chunk,
+  M as chunkUploader,
+  q as default,
+  Q as setDefaultHttpClient,
+  S as useChunkUpload
+};

package/dist/native.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),t=require("./createPlugin-DoOjwZfd.cjs"),g=(o,l)=>{const a=o.__vccOpts||o;for(const[c,r]of l)a[c]=r;return a},C={class:"vue-chunk-uploader-native","data-ui":"native"},U={class:"vue-chunk-uploader-native__row"},V=["data-error","data-done"],y=["value"],B=Object.assign({inheritAttrs:!1},{__name:"ChunkUploader",props:t.chunkUploaderProps,emits:t.chunkUploaderEmits,setup(o,{expose:l,emit:a}){const c=o,r=a,s=e.ref(null),{hasError:h,progress:n,uploadFile:_,clear:f}=t.useChunkUpload(c,r),m=u=>{var p;const d=((p=u.target.files)==null?void 0:p[0])??null;r("update:modelValue",d)},v=()=>{s.value&&(s.value.value=""),f()};return l({uploadFile:_}),(u,d)=>(e.openBlock(),e.createElementBlock("div",C,[e.createElementVNode("div",U,[e.createElementVNode("input",e.mergeProps({ref_key:"inputRef",ref:s,type:"file"},u.$attrs,{onChange:m}),null,16),u.modelValue?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"vue-chunk-uploader-native__clear",onClick:v}," × ")):e.createCommentVNode("",!0),e.createElementVNode("span",{class:"vue-chunk-uploader-native__badge","data-error":e.unref(h)||void 0,"data-done":e.unref(n)>=100||void 0},[e.unref(n)<100?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(e.unref(n))+"%",1)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode("✓")],64))],8,V)]),e.unref(n)>0&&e.unref(n)<100?(e.openBlock(),e.createElementBlock("progress",{key:0,class:"vue-chunk-uploader-native__progress",value:e.unref(n),max:"100"},null,8,y)):e.createCommentVNode("",!0)]))}}),i=g(B,[["__scopeId","data-v-0be4ee9c"]]),k=t.createChunkUploaderPlugin(i);exports.chunk=t.chunk;exports.chunkUploader=t.chunkUploader;exports.setDefaultHttpClient=t.setDefaultHttpClient;exports.useChunkUpload=t.useChunkUpload;exports.ChunkUploader=i;exports.VueChunkUploader=k;exports.default=k;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),t=require("./createPlugin-DoOjwZfd.cjs"),g=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),C={class:"vue-chunk-uploader-native","data-ui":"native"},U={class:"vue-chunk-uploader-native__row"},V=["data-error","data-done"],B=["value"],E=Object.assign({inheritAttrs:!1},{__name:"ChunkUploader",props:t.chunkUploaderProps,emits:t.chunkUploaderEmits,setup(d,{expose:p,emit:i}){const k=d,a=i,r=e.ref(null),{hasError:h,progress:n,uploadFile:_,clear:f}=t.useChunkUpload(k,a),m=o=>{var l;const u=((l=o.target.files)==null?void 0:l[0])??null;a("update:modelValue",u)},v=()=>{r.value&&(r.value.value=""),f()};return p({uploadFile:_}),(o,u)=>(e.openBlock(),e.createElementBlock("div",C,[e.createElementVNode("div",U,[e.createElementVNode("input",e.mergeProps({ref_key:"inputRef",ref:r,type:"file"},o.$attrs,{onChange:m}),null,16),o.modelValue?(e.openBlock(),e.createElementBlock("button",{key:0,type:"button",class:"vue-chunk-uploader-native__clear",onClick:v}," × ")):e.createCommentVNode("",!0),e.createElementVNode("span",{class:"vue-chunk-uploader-native__badge","data-error":e.unref(h)||void 0,"data-done":e.unref(n)>=100||void 0},[e.unref(n)<100?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(e.unref(n))+"%",1)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode("✓")],64))],8,V)]),e.unref(n)>0&&e.unref(n)<100?(e.openBlock(),e.createElementBlock("progress",{key:0,class:"vue-chunk-uploader-native__progress",value:e.unref(n),max:"100"},null,8,B)):e.createCommentVNode("",!0)]))}}),c=g._export_sfc(E,[["__scopeId","data-v-0be4ee9c"]]),s=t.createChunkUploaderPlugin(c);exports.chunk=t.chunk;exports.chunkUploader=t.chunkUploader;exports.setDefaultHttpClient=t.setDefaultHttpClient;exports.useChunkUpload=t.useChunkUpload;exports.ChunkUploader=c;exports.VueChunkUploader=s;exports.default=s;

package/dist/native.js

@@ -1,66 +1,62 @@
-import { ref as U, openBlock as a, createElementBlock as o, createElementVNode as p, mergeProps as b, createCommentVNode as h, unref as e, Fragment as k, createTextVNode as f, toDisplayString as V } from "vue";
+import { ref as U, openBlock as t, createElementBlock as o, createElementVNode as s, mergeProps as b, createCommentVNode as d, unref as e, Fragment as p, createTextVNode as i, toDisplayString as V } from "vue";
 import { d as x, e as E, u as N, c as P } from "./createPlugin-DZ7dugEN.js";
-import { a as $, b as q, s as z } from "./createPlugin-DZ7dugEN.js";
-const B = (n, l) => {
-  const r = n.__vccOpts || n;
-  for (const [c, s] of l)
-    r[c] = s;
-  return r;
-}, D = {
+import { a as q, b as z, s as G } from "./createPlugin-DZ7dugEN.js";
+import { _ as B } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const D = {
   class: "vue-chunk-uploader-native",
   "data-ui": "native"
-}, F = { class: "vue-chunk-uploader-native__row" }, O = ["data-error", "data-done"], R = ["value"], j = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+}, F = { class: "vue-chunk-uploader-native__row" }, R = ["data-error", "data-done"], j = ["value"], w = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
   __name: "ChunkUploader",
   props: E,
   emits: x,
-  setup(n, { expose: l, emit: r }) {
-    const c = n, s = r, d = U(null), { hasError: v, progress: t, uploadFile: m, clear: g } = N(c, s), C = (u) => {
-      var _;
-      const i = ((_ = u.target.files) == null ? void 0 : _[0]) ?? null;
-      s("update:modelValue", i);
+  setup(_, { expose: h, emit: k }) {
+    const m = _, u = k, r = U(null), { hasError: f, progress: a, uploadFile: v, clear: g } = N(m, u), C = (n) => {
+      var c;
+      const l = ((c = n.target.files) == null ? void 0 : c[0]) ?? null;
+      u("update:modelValue", l);
     }, y = () => {
-      d.value && (d.value.value = ""), g();
+      r.value && (r.value.value = ""), g();
     };
-    return l({ uploadFile: m }), (u, i) => (a(), o("div", D, [
-      p("div", F, [
-        p("input", b({
+    return h({ uploadFile: v }), (n, l) => (t(), o("div", D, [
+      s("div", F, [
+        s("input", b({
           ref_key: "inputRef",
-          ref: d,
+          ref: r,
           type: "file"
-        }, u.$attrs, { onChange: C }), null, 16),
-        u.modelValue ? (a(), o("button", {
+        }, n.$attrs, { onChange: C }), null, 16),
+        n.modelValue ? (t(), o("button", {
           key: 0,
           type: "button",
           class: "vue-chunk-uploader-native__clear",
           onClick: y
-        }, " × ")) : h("", !0),
-        p("span", {
+        }, " × ")) : d("", !0),
+        s("span", {
           class: "vue-chunk-uploader-native__badge",
-          "data-error": e(v) || void 0,
-          "data-done": e(t) >= 100 || void 0
+          "data-error": e(f) || void 0,
+          "data-done": e(a) >= 100 || void 0
         }, [
-          e(t) < 100 ? (a(), o(k, { key: 0 }, [
-            f(V(e(t)) + "%", 1)
-          ], 64)) : (a(), o(k, { key: 1 }, [
-            f("✓")
+          e(a) < 100 ? (t(), o(p, { key: 0 }, [
+            i(V(e(a)) + "%", 1)
+          ], 64)) : (t(), o(p, { key: 1 }, [
+            i("✓")
           ], 64))
-        ], 8, O)
+        ], 8, R)
       ]),
-      e(t) > 0 && e(t) < 100 ? (a(), o("progress", {
+      e(a) > 0 && e(a) < 100 ? (t(), o("progress", {
         key: 0,
         class: "vue-chunk-uploader-native__progress",
-        value: e(t),
+        value: e(a),
         max: "100"
-      }, null, 8, R)) : h("", !0)
+      }, null, 8, j)) : d("", !0)
     ]));
   }
-}), w = /* @__PURE__ */ B(j, [["__scopeId", "data-v-0be4ee9c"]]), I = P(w);
+}), A = /* @__PURE__ */ B(w, [["__scopeId", "data-v-0be4ee9c"]]), S = P(A);
 export {
-  w as ChunkUploader,
-  I as VueChunkUploader,
-  $ as chunk,
-  q as chunkUploader,
-  I as default,
-  z as setDefaultHttpClient,
+  A as ChunkUploader,
+  S as VueChunkUploader,
+  q as chunk,
+  z as chunkUploader,
+  S as default,
+  G as setDefaultHttpClient,
   N as useChunkUpload
 };

package/dist/reka.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),a=require("reka-ui"),t=require("./createPlugin-DoOjwZfd.cjs"),V=require("./_plugin-vue_export-helper-BHFhmbuH.cjs"),y={class:"vue-chunk-uploader-reka","data-ui":"reka"},U={class:"vue-chunk-uploader-reka__row"},b=Object.assign({inheritAttrs:!1},{__name:"ChunkUploader",props:{...t.chunkUploaderProps,label:{type:String,default:""}},emits:t.chunkUploaderEmits,setup(l,{expose:k,emit:f}){const h=l,c=f,u=e.ref(null),s=`vue-chunk-uploader-reka-${Math.random().toString(36).slice(2,9)}`,{hasError:m,progress:r,uploadFile:_,clear:C}=t.useChunkUpload(h,c),g=n=>{var d;const o=((d=n.target.files)==null?void 0:d[0])??null;c("update:modelValue",o)},v=()=>{u.value&&(u.value.value=""),C()};return k({uploadFile:_}),(n,o)=>(e.openBlock(),e.createElementBlock("div",y,[e.createElementVNode("div",U,[l.label?(e.openBlock(),e.createBlock(e.unref(a.Label),{key:0,class:"vue-chunk-uploader-reka__label",for:s},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.label),1)]),_:1})):e.createCommentVNode("",!0),e.createElementVNode("input",e.mergeProps({id:s,ref_key:"inputRef",ref:u,type:"file",class:"vue-chunk-uploader-reka__input"},n.$attrs,{onChange:g}),null,16),n.modelValue?(e.openBlock(),e.createBlock(e.unref(a.Primitive),{key:1,as:"button",type:"button",class:"vue-chunk-uploader-reka__clear","aria-label":"Clear file",onClick:v},{default:e.withCtx(()=>[...o[0]||(o[0]=[e.createTextVNode(" × ",-1)])]),_:1})):e.createCommentVNode("",!0),e.createVNode(e.unref(a.Primitive),{as:"span",class:"vue-chunk-uploader-reka__badge","data-error":e.unref(m)||void 0,"data-done":e.unref(r)>=100||void 0},{default:e.withCtx(()=>[e.unref(r)<100?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createTextVNode(e.toDisplayString(e.unref(r))+"%",1)],64)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode("✓")],64))]),_:1},8,["data-error","data-done"])]),e.unref(r)>0&&e.unref(r)<100?(e.openBlock(),e.createBlock(e.unref(a.ProgressRoot),{key:0,class:"vue-chunk-uploader-reka__progress","model-value":e.unref(r),max:100},{default:e.withCtx(()=>[e.createVNode(e.unref(a.ProgressIndicator),{class:"vue-chunk-uploader-reka__progress-indicator",style:e.normalizeStyle({transform:`translateX(-${100-e.unref(r)}%)`})},null,8,["style"])]),_:1},8,["model-value"])):e.createCommentVNode("",!0)]))}}),i=V._export_sfc(b,[["__scopeId","data-v-14def290"]]),p=t.createChunkUploaderPlugin(i);exports.chunk=t.chunk;exports.chunkUploader=t.chunkUploader;exports.setDefaultHttpClient=t.setDefaultHttpClient;exports.useChunkUpload=t.useChunkUpload;exports.ChunkUploader=i;exports.VueChunkUploader=p;exports.default=p;