vue-chunk-uploader 1.1.0 → 1.3.0

package/README.md

@@ -10,10 +10,12 @@ 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/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 (Naive UI, MUI/React, etc.), use `native`, `reka`, or the `useChunkUpload` composable and build your own UI.
 
 ## Install
 
@@ -29,6 +31,12 @@ npm install quasar
 
 # or Vuetify
 npm install vuetify
+
+# or Reka UI
+npm install reka-ui
+
+# or Element Plus
+npm install element-plus
 ```
 
 ## Usage — Quasar
@@ -88,6 +96,67 @@ 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 — 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 +245,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 adapter) |
 
-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`, 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/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/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;

package/dist/reka.js

@@ -0,0 +1,100 @@
+import { ref as N, openBlock as r, createElementBlock as d, createElementVNode as m, createBlock as c, unref as e, withCtx as l, createTextVNode as n, toDisplayString as _, createCommentVNode as i, mergeProps as S, createVNode as h, Fragment as v, normalizeStyle as B } from "vue";
+import { Label as I, Primitive as g, ProgressRoot as R, ProgressIndicator as $ } from "reka-ui";
+import { d as w, e as D, u as F, c as j } from "./createPlugin-DZ7dugEN.js";
+import { a as Q, b as W, s as Y } from "./createPlugin-DZ7dugEN.js";
+import { _ as z } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+const A = {
+  class: "vue-chunk-uploader-reka",
+  "data-ui": "reka"
+}, H = { class: "vue-chunk-uploader-reka__row" }, L = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+  __name: "ChunkUploader",
+  props: {
+    ...D,
+    label: {
+      type: String,
+      default: ""
+    }
+  },
+  emits: w,
+  setup(s, { expose: y, emit: C }) {
+    const b = s, p = C, u = N(null), k = `vue-chunk-uploader-reka-${Math.random().toString(36).slice(2, 9)}`, { hasError: U, progress: a, uploadFile: V, clear: x } = F(b, p), P = (t) => {
+      var f;
+      const o = ((f = t.target.files) == null ? void 0 : f[0]) ?? null;
+      p("update:modelValue", o);
+    }, E = () => {
+      u.value && (u.value.value = ""), x();
+    };
+    return y({ uploadFile: V }), (t, o) => (r(), d("div", A, [
+      m("div", H, [
+        s.label ? (r(), c(e(I), {
+          key: 0,
+          class: "vue-chunk-uploader-reka__label",
+          for: k
+        }, {
+          default: l(() => [
+            n(_(s.label), 1)
+          ]),
+          _: 1
+        })) : i("", !0),
+        m("input", S({
+          id: k,
+          ref_key: "inputRef",
+          ref: u,
+          type: "file",
+          class: "vue-chunk-uploader-reka__input"
+        }, t.$attrs, { onChange: P }), null, 16),
+        t.modelValue ? (r(), c(e(g), {
+          key: 1,
+          as: "button",
+          type: "button",
+          class: "vue-chunk-uploader-reka__clear",
+          "aria-label": "Clear file",
+          onClick: E
+        }, {
+          default: l(() => [...o[0] || (o[0] = [
+            n(" × ", -1)
+          ])]),
+          _: 1
+        })) : i("", !0),
+        h(e(g), {
+          as: "span",
+          class: "vue-chunk-uploader-reka__badge",
+          "data-error": e(U) || void 0,
+          "data-done": e(a) >= 100 || void 0
+        }, {
+          default: l(() => [
+            e(a) < 100 ? (r(), d(v, { key: 0 }, [
+              n(_(e(a)) + "%", 1)
+            ], 64)) : (r(), d(v, { key: 1 }, [
+              n("✓")
+            ], 64))
+          ]),
+          _: 1
+        }, 8, ["data-error", "data-done"])
+      ]),
+      e(a) > 0 && e(a) < 100 ? (r(), c(e(R), {
+        key: 0,
+        class: "vue-chunk-uploader-reka__progress",
+        "model-value": e(a),
+        max: 100
+      }, {
+        default: l(() => [
+          h(e($), {
+            class: "vue-chunk-uploader-reka__progress-indicator",
+            style: B({ transform: `translateX(-${100 - e(a)}%)` })
+          }, null, 8, ["style"])
+        ]),
+        _: 1
+      }, 8, ["model-value"])) : i("", !0)
+    ]));
+  }
+}), M = /* @__PURE__ */ z(L, [["__scopeId", "data-v-14def290"]]), G = j(M);
+export {
+  M as ChunkUploader,
+  G as VueChunkUploader,
+  Q as chunk,
+  W as chunkUploader,
+  G as default,
+  Y as setDefaultHttpClient,
+  F as useChunkUpload
+};

package/dist/vue-chunk-uploader.css

@@ -1 +1 @@
-.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-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}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-chunk-uploader",
-  "version": "1.1.0",
-  "description": "Vue 3 chunked/resumable file uploader with selectable UI adapters (Quasar, Vuetify, native)",
+  "version": "1.3.0",
+  "description": "Vue 3 chunked/resumable file uploader with selectable UI adapters (Quasar, Vuetify, Reka UI, Element Plus, native)",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -22,6 +22,14 @@
       "import": "./dist/native.js",
       "require": "./dist/native.cjs"
     },
+    "./reka": {
+      "import": "./dist/reka.js",
+      "require": "./dist/reka.cjs"
+    },
+    "./element-plus": {
+      "import": "./dist/element-plus.js",
+      "require": "./dist/element-plus.cjs"
+    },
     "./style.css": "./dist/vue-chunk-uploader.css"
   },
   "files": [
@@ -41,6 +49,8 @@
     "vue3",
     "quasar",
     "vuetify",
+    "reka-ui",
+    "element-plus",
     "uploader",
     "chunk",
     "resumable",
@@ -59,7 +69,9 @@
   "homepage": "https://github.com/akbarjoody/vue-chunk-uploader#readme",
   "peerDependencies": {
     "axios": "^1.0.0",
+    "element-plus": "^2.0.0",
     "quasar": "^2.0.0",
+    "reka-ui": "^2.0.0",
     "vue": "^3.2.0",
     "vuetify": "^3.0.0"
   },
@@ -69,12 +81,20 @@
     },
     "vuetify": {
       "optional": true
+    },
+    "reka-ui": {
+      "optional": true
+    },
+    "element-plus": {
+      "optional": true
     }
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.1",
     "axios": "^1.9.0",
+    "element-plus": "^2.9.0",
     "quasar": "^2.18.5",
+    "reka-ui": "^2.10.4",
     "vite": "^6.2.0",
     "vue": "^3.5.13",
     "vuetify": "^3.7.0"

package/src/ui/element-plus/ChunkUploader.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="vue-chunk-uploader-element-plus" data-ui="element-plus">
+    <el-upload
+      v-bind="$attrs"
+      action="#"
+      :auto-upload="false"
+      :limit="1"
+      :file-list="fileList"
+      :on-change="onChange"
+      :on-remove="onRemove"
+      :on-exceed="onExceed"
+    >
+      <el-button type="primary">
+        {{ buttonLabel }}
+      </el-button>
+
+      <template #tip>
+        <div class="el-upload__tip vue-chunk-uploader-element-plus__status">
+          <el-tag
+            size="small"
+            :type="hasError ? 'danger' : progress >= 100 ? 'success' : 'info'"
+          >
+            <template v-if="progress < 100">{{ progress }}%</template>
+            <template v-else>Done</template>
+          </el-tag>
+        </div>
+      </template>
+    </el-upload>
+
+    <el-progress
+      v-if="progress > 0 && progress < 100"
+      class="vue-chunk-uploader-element-plus__progress"
+      :percentage="progress"
+      :status="hasError ? 'exception' : undefined"
+      :stroke-width="6"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { ElButton, ElProgress, ElTag, ElUpload } from 'element-plus'
+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 fileList = computed(() => {
+  if (!props.modelValue) return []
+
+  let status = 'ready'
+  if (hasError.value) status = 'fail'
+  else if (progress.value >= 100) status = 'success'
+  else if (progress.value > 0) status = 'uploading'
+
+  return [
+    {
+      name: props.modelValue.name,
+      raw: props.modelValue,
+      status,
+      percentage: progress.value,
+    },
+  ]
+})
+
+const onChange = (uploadFile) => {
+  emit('update:modelValue', uploadFile?.raw ?? null)
+}
+
+const onRemove = () => {
+  clear()
+}
+
+const onExceed = (files) => {
+  const file = files?.[0]
+  if (file) {
+    emit('update:modelValue', file)
+  }
+}
+
+defineExpose({ uploadFile })
+</script>
+
+<style scoped>
+.vue-chunk-uploader-element-plus__status {
+  margin-top: 0.25rem;
+}
+
+.vue-chunk-uploader-element-plus__progress {
+  margin-top: 0.5rem;
+}
+</style>

package/src/ui/element-plus/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/reka/ChunkUploader.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="vue-chunk-uploader-reka" data-ui="reka">
+    <div class="vue-chunk-uploader-reka__row">
+      <Label
+        v-if="label"
+        class="vue-chunk-uploader-reka__label"
+        :for="inputId"
+      >
+        {{ label }}
+      </Label>
+
+      <input
+        :id="inputId"
+        ref="inputRef"
+        type="file"
+        class="vue-chunk-uploader-reka__input"
+        v-bind="$attrs"
+        @change="onChange"
+      />
+
+      <Primitive
+        v-if="modelValue"
+        as="button"
+        type="button"
+        class="vue-chunk-uploader-reka__clear"
+        aria-label="Clear file"
+        @click="onClear"
+      >
+        ×
+      </Primitive>
+
+      <Primitive
+        as="span"
+        class="vue-chunk-uploader-reka__badge"
+        :data-error="hasError || undefined"
+        :data-done="progress >= 100 || undefined"
+      >
+        <template v-if="progress < 100">{{ progress }}%</template>
+        <template v-else>✓</template>
+      </Primitive>
+    </div>
+
+    <ProgressRoot
+      v-if="progress > 0 && progress < 100"
+      class="vue-chunk-uploader-reka__progress"
+      :model-value="progress"
+      :max="100"
+    >
+      <ProgressIndicator
+        class="vue-chunk-uploader-reka__progress-indicator"
+        :style="{ transform: `translateX(-${100 - progress}%)` }"
+      />
+    </ProgressRoot>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Label, Primitive, ProgressIndicator, ProgressRoot } from 'reka-ui'
+import {
+  chunkUploaderProps,
+  chunkUploaderEmits,
+  useChunkUpload,
+} from '../../core/useChunkUpload.js'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+  ...chunkUploaderProps,
+  label: {
+    type: String,
+    default: '',
+  },
+})
+
+const emit = defineEmits(chunkUploaderEmits)
+
+const inputRef = ref(null)
+const inputId = `vue-chunk-uploader-reka-${Math.random().toString(36).slice(2, 9)}`
+
+const { hasError, progress, uploadFile, clear } = useChunkUpload(props, emit)
+
+const onChange = (event) => {
+  const file = event.target.files?.[0] ?? null
+  emit('update:modelValue', file)
+}
+
+const onClear = () => {
+  if (inputRef.value) {
+    inputRef.value.value = ''
+  }
+  clear()
+}
+
+defineExpose({ uploadFile })
+</script>
+
+<style scoped>
+.vue-chunk-uploader-reka__row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.vue-chunk-uploader-reka__label {
+  font-size: 0.875rem;
+}
+
+.vue-chunk-uploader-reka__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 3rem;
+  padding: 0.15rem 0.5rem;
+  border-radius: 999px;
+  font-size: 0.85rem;
+  background: #16a34a;
+  color: #fff;
+}
+
+.vue-chunk-uploader-reka__badge[data-error] {
+  background: #dc2626;
+}
+
+.vue-chunk-uploader-reka__clear {
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  font-size: 1.25rem;
+  line-height: 1;
+}
+
+.vue-chunk-uploader-reka__progress {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 0.5rem;
+  margin-top: 0.5rem;
+  border-radius: 999px;
+  background: #e5e7eb;
+}
+
+.vue-chunk-uploader-reka__progress-indicator {
+  width: 100%;
+  height: 100%;
+  background: #16a34a;
+  transition: transform 160ms ease;
+}
+</style>

package/src/ui/reka/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