vue-chunk-uploader 1.3.0 → 1.4.0

package/README.md

@@ -12,10 +12,12 @@ The upload core is UI-agnostic — you choose which adapter to use.
 | `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 (Naive UI, MUI/React, etc.), use `native`, `reka`, 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
 
@@ -37,6 +39,12 @@ 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
@@ -126,6 +134,65 @@ 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).
@@ -246,9 +313,9 @@ await chunk(
 | `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 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`, `v-file-input`, `el-upload`, or native `input[type=file]` attrs).
+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/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/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/vue-chunk-uploader.css

@@ -1 +1 @@
-.vue-chunk-uploader-element-plus__status[data-v-94616f6c]{margin-top:.25rem}.vue-chunk-uploader-element-plus__progress[data-v-94616f6c]{margin-top:.5rem}.vue-chunk-uploader-native__row[data-v-0be4ee9c]{display:flex;align-items:center;gap:.5rem}.vue-chunk-uploader-native__badge[data-v-0be4ee9c]{display:inline-flex;align-items:center;justify-content:center;min-width:3rem;padding:.15rem .5rem;border-radius:999px;font-size:.85rem;background:#16a34a;color:#fff}.vue-chunk-uploader-native__badge[data-error][data-v-0be4ee9c]{background:#dc2626}.vue-chunk-uploader-native__clear[data-v-0be4ee9c]{border:0;background:transparent;cursor:pointer;font-size:1.25rem;line-height:1}.vue-chunk-uploader-native__progress[data-v-0be4ee9c]{display:block;width:100%;margin-top:.5rem;height:.5rem}.vue-chunk-uploader-reka__row[data-v-14def290]{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.vue-chunk-uploader-reka__label[data-v-14def290]{font-size:.875rem}.vue-chunk-uploader-reka__badge[data-v-14def290]{display:inline-flex;align-items:center;justify-content:center;min-width:3rem;padding:.15rem .5rem;border-radius:999px;font-size:.85rem;background:#16a34a;color:#fff}.vue-chunk-uploader-reka__badge[data-error][data-v-14def290]{background:#dc2626}.vue-chunk-uploader-reka__clear[data-v-14def290]{border:0;background:transparent;cursor:pointer;font-size:1.25rem;line-height:1}.vue-chunk-uploader-reka__progress[data-v-14def290]{position:relative;overflow:hidden;width:100%;height:.5rem;margin-top:.5rem;border-radius:999px;background:#e5e7eb}.vue-chunk-uploader-reka__progress-indicator[data-v-14def290]{width:100%;height:100%;background:#16a34a;transition:transform .16s ease}
+.vue-chunk-uploader-ant-design__status[data-v-feea6628]{margin-top:.25rem}.vue-chunk-uploader-ant-design__progress[data-v-feea6628]{margin-top:.5rem}.vue-chunk-uploader-element-plus__status[data-v-94616f6c]{margin-top:.25rem}.vue-chunk-uploader-element-plus__progress[data-v-94616f6c]{margin-top:.5rem}.vue-chunk-uploader-naive__status[data-v-6f64a1ad]{margin-top:.25rem}.vue-chunk-uploader-naive__progress[data-v-6f64a1ad]{margin-top:.5rem}.vue-chunk-uploader-native__row[data-v-0be4ee9c]{display:flex;align-items:center;gap:.5rem}.vue-chunk-uploader-native__badge[data-v-0be4ee9c]{display:inline-flex;align-items:center;justify-content:center;min-width:3rem;padding:.15rem .5rem;border-radius:999px;font-size:.85rem;background:#16a34a;color:#fff}.vue-chunk-uploader-native__badge[data-error][data-v-0be4ee9c]{background:#dc2626}.vue-chunk-uploader-native__clear[data-v-0be4ee9c]{border:0;background:transparent;cursor:pointer;font-size:1.25rem;line-height:1}.vue-chunk-uploader-native__progress[data-v-0be4ee9c]{display:block;width:100%;margin-top:.5rem;height:.5rem}.vue-chunk-uploader-reka__row[data-v-14def290]{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem}.vue-chunk-uploader-reka__label[data-v-14def290]{font-size:.875rem}.vue-chunk-uploader-reka__badge[data-v-14def290]{display:inline-flex;align-items:center;justify-content:center;min-width:3rem;padding:.15rem .5rem;border-radius:999px;font-size:.85rem;background:#16a34a;color:#fff}.vue-chunk-uploader-reka__badge[data-error][data-v-14def290]{background:#dc2626}.vue-chunk-uploader-reka__clear[data-v-14def290]{border:0;background:transparent;cursor:pointer;font-size:1.25rem;line-height:1}.vue-chunk-uploader-reka__progress[data-v-14def290]{position:relative;overflow:hidden;width:100%;height:.5rem;margin-top:.5rem;border-radius:999px;background:#e5e7eb}.vue-chunk-uploader-reka__progress-indicator[data-v-14def290]{width:100%;height:100%;background:#16a34a;transition:transform .16s ease}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-chunk-uploader",
-  "version": "1.3.0",
-  "description": "Vue 3 chunked/resumable file uploader with selectable UI adapters (Quasar, Vuetify, Reka UI, Element Plus, native)",
+  "version": "1.4.0",
+  "description": "Vue 3 chunked/resumable file uploader with selectable UI adapters (Quasar, Vuetify, Reka UI, Element Plus, Ant Design Vue, Naive UI, native)",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -30,6 +30,14 @@
       "import": "./dist/element-plus.js",
       "require": "./dist/element-plus.cjs"
     },
+    "./ant-design": {
+      "import": "./dist/ant-design.js",
+      "require": "./dist/ant-design.cjs"
+    },
+    "./naive": {
+      "import": "./dist/naive.js",
+      "require": "./dist/naive.cjs"
+    },
     "./style.css": "./dist/vue-chunk-uploader.css"
   },
   "files": [
@@ -51,6 +59,9 @@
     "vuetify",
     "reka-ui",
     "element-plus",
+    "ant-design-vue",
+    "ant-design",
+    "naive-ui",
     "uploader",
     "chunk",
     "resumable",
@@ -68,8 +79,10 @@
   },
   "homepage": "https://github.com/akbarjoody/vue-chunk-uploader#readme",
   "peerDependencies": {
+    "ant-design-vue": "^4.0.0",
     "axios": "^1.0.0",
     "element-plus": "^2.0.0",
+    "naive-ui": "^2.0.0",
     "quasar": "^2.0.0",
     "reka-ui": "^2.0.0",
     "vue": "^3.2.0",
@@ -87,12 +100,20 @@
     },
     "element-plus": {
       "optional": true
+    },
+    "ant-design-vue": {
+      "optional": true
+    },
+    "naive-ui": {
+      "optional": true
     }
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",
+    "ant-design-vue": "^4.2.6",
     "axios": "^1.9.0",
     "element-plus": "^2.9.0",
+    "naive-ui": "^2.45.3",
     "quasar": "^2.18.5",
     "reka-ui": "^2.10.4",
     "vite": "^6.2.0",

package/src/index.js

@@ -13,6 +13,8 @@ import { createChunkUploaderPlugin } from './core/createPlugin.js'
  *   import ... from 'vue-chunk-uploader/quasar'
  *   import ... from 'vue-chunk-uploader/vuetify'
  *   import ... from 'vue-chunk-uploader/native'
+ *   import ... from 'vue-chunk-uploader/ant-design'
+ *   import ... from 'vue-chunk-uploader/naive'
  */
 export {
   chunkUploader,

package/src/ui/ant-design/ChunkUploader.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="vue-chunk-uploader-ant-design" data-ui="ant-design">
+    <a-upload
+      v-bind="$attrs"
+      :file-list="fileList"
+      :before-upload="beforeUpload"
+      :max-count="1"
+      @remove="onRemove"
+    >
+      <a-button type="primary">
+        {{ buttonLabel }}
+      </a-button>
+    </a-upload>
+
+    <div
+      v-if="progress > 0"
+      class="vue-chunk-uploader-ant-design__status"
+    >
+      <a-tag :color="statusColor">
+        <template v-if="progress < 100">{{ progress }}%</template>
+        <template v-else>Done</template>
+      </a-tag>
+    </div>
+
+    <a-progress
+      v-if="progress > 0 && progress < 100"
+      class="vue-chunk-uploader-ant-design__progress"
+      :percent="progress"
+      :status="hasError ? 'exception' : 'active'"
+      :stroke-width="6"
+      size="small"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { Button as AButton, Progress as AProgress, Tag as ATag, Upload as AUpload } from 'ant-design-vue'
+import {
+  chunkUploaderProps,
+  chunkUploaderEmits,
+  useChunkUpload,
+} from '../../core/useChunkUpload.js'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+  ...chunkUploaderProps,
+  buttonLabel: {
+    type: String,
+    default: 'Select file',
+  },
+})
+
+const emit = defineEmits(chunkUploaderEmits)
+
+const { hasError, progress, uploadFile, clear } = useChunkUpload(props, emit)
+
+const statusColor = computed(() => {
+  if (hasError.value) return 'error'
+  if (progress.value >= 100) return 'success'
+  return 'processing'
+})
+
+const fileList = computed(() => {
+  if (!props.modelValue) return []
+
+  let status = 'done'
+  if (hasError.value) status = 'error'
+  else if (progress.value > 0 && progress.value < 100) status = 'uploading'
+  else if (progress.value >= 100) status = 'done'
+  else status = 'ready'
+
+  return [
+    {
+      uid: '-1',
+      name: props.modelValue.name,
+      status,
+      percent: progress.value,
+      originFileObj: props.modelValue,
+    },
+  ]
+})
+
+const beforeUpload = (file) => {
+  emit('update:modelValue', file)
+  return false
+}
+
+const onRemove = () => {
+  clear()
+  return true
+}
+
+defineExpose({ uploadFile })
+</script>
+
+<style scoped>
+.vue-chunk-uploader-ant-design__status {
+  margin-top: 0.25rem;
+}
+
+.vue-chunk-uploader-ant-design__progress {
+  margin-top: 0.5rem;
+}
+</style>

package/src/ui/ant-design/index.js

@@ -0,0 +1,17 @@
+import ChunkUploader from './ChunkUploader.vue'
+import { createChunkUploaderPlugin } from '../../core/createPlugin.js'
+import chunkUploader, { chunk, setDefaultHttpClient } from '../../core/chunkUploader.js'
+import { useChunkUpload } from '../../core/useChunkUpload.js'
+
+const VueChunkUploader = createChunkUploaderPlugin(ChunkUploader)
+
+export {
+  ChunkUploader,
+  VueChunkUploader,
+  chunkUploader,
+  chunk,
+  setDefaultHttpClient,
+  useChunkUpload,
+}
+
+export default VueChunkUploader

package/src/ui/naive/ChunkUploader.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="vue-chunk-uploader-naive" data-ui="naive">
+    <n-upload
+      v-bind="$attrs"
+      :file-list="fileList"
+      :default-upload="false"
+      :max="1"
+      @change="onChange"
+      @remove="onRemove"
+    >
+      <n-button type="primary">
+        {{ buttonLabel }}
+      </n-button>
+    </n-upload>
+
+    <div
+      v-if="progress > 0"
+      class="vue-chunk-uploader-naive__status"
+    >
+      <n-tag :type="statusType" size="small" round>
+        <template v-if="progress < 100">{{ progress }}%</template>
+        <template v-else>Done</template>
+      </n-tag>
+    </div>
+
+    <n-progress
+      v-if="progress > 0 && progress < 100"
+      class="vue-chunk-uploader-naive__progress"
+      type="line"
+      :percentage="progress"
+      :status="hasError ? 'error' : undefined"
+      :height="6"
+      :show-indicator="false"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { NButton, NProgress, NTag, NUpload } from 'naive-ui'
+import {
+  chunkUploaderProps,
+  chunkUploaderEmits,
+  useChunkUpload,
+} from '../../core/useChunkUpload.js'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+  ...chunkUploaderProps,
+  buttonLabel: {
+    type: String,
+    default: 'Select file',
+  },
+})
+
+const emit = defineEmits(chunkUploaderEmits)
+
+const { hasError, progress, uploadFile, clear } = useChunkUpload(props, emit)
+
+const statusType = computed(() => {
+  if (hasError.value) return 'error'
+  if (progress.value >= 100) return 'success'
+  return 'info'
+})
+
+const fileList = computed(() => {
+  if (!props.modelValue) return []
+
+  let status = 'pending'
+  if (hasError.value) status = 'error'
+  else if (progress.value >= 100) status = 'finished'
+  else if (progress.value > 0) status = 'uploading'
+
+  return [
+    {
+      id: 'vue-chunk-uploader',
+      name: props.modelValue.name,
+      status,
+      percentage: progress.value,
+      file: props.modelValue,
+    },
+  ]
+})
+
+const onChange = ({ file }) => {
+  if (file?.status === 'removed') return
+  emit('update:modelValue', file?.file ?? null)
+}
+
+const onRemove = () => {
+  clear()
+}
+
+defineExpose({ uploadFile })
+</script>
+
+<style scoped>
+.vue-chunk-uploader-naive__status {
+  margin-top: 0.25rem;
+}
+
+.vue-chunk-uploader-naive__progress {
+  margin-top: 0.5rem;
+}
+</style>

package/src/ui/naive/index.js

@@ -0,0 +1,17 @@
+import ChunkUploader from './ChunkUploader.vue'
+import { createChunkUploaderPlugin } from '../../core/createPlugin.js'
+import chunkUploader, { chunk, setDefaultHttpClient } from '../../core/chunkUploader.js'
+import { useChunkUpload } from '../../core/useChunkUpload.js'
+
+const VueChunkUploader = createChunkUploaderPlugin(ChunkUploader)
+
+export {
+  ChunkUploader,
+  VueChunkUploader,
+  chunkUploader,
+  chunk,
+  setDefaultHttpClient,
+  useChunkUpload,
+}
+
+export default VueChunkUploader