@vuesimple/vs-upload 3.1.6 → 3.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/vite.config.js +2 -2
- package/dist/index.esm.js +64 -57
- package/dist/index.min.js +2 -3
- package/dist/index.umd.js +2 -3
- package/package.json +3 -2
- package/src/vs-upload.vue +12 -19
package/build/vite.config.js
CHANGED
|
@@ -2,9 +2,9 @@ import vue from '@vitejs/plugin-vue';
|
|
|
2
2
|
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
|
|
3
3
|
|
|
4
4
|
export default {
|
|
5
|
-
plugins: [vue(), cssInjectedByJsPlugin()],
|
|
5
|
+
plugins: [vue(), cssInjectedByJsPlugin({ styleId: 'vs-upload-styles' })],
|
|
6
6
|
build: {
|
|
7
|
-
cssCodeSplit:
|
|
7
|
+
cssCodeSplit: false,
|
|
8
8
|
lib: {
|
|
9
9
|
entry: './src/index.js',
|
|
10
10
|
formats: ['es', 'umd', 'iife'],
|
package/dist/index.esm.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode("[data-theme=dark] .vs-upload,.dark .vs-upload{--vs-upload-label-color: #b0b8c1;--vs-upload-hint-color: #8090a2;--vs-upload-dropzone-border: #3a4553;--vs-upload-dropzone-bg: #1a1f26;--vs-upload-dropzone-color: #4b9fea;--vs-upload-dropzone-border-dragging: #42a5f5;--vs-upload-dropzone-bg-dragging: #1a2535;--vs-upload-file-border: #2a3038;--vs-upload-file-bg: #1a1f26;--vs-upload-file-color: #b0b8c1;--vs-upload-file-size-color: #5a6472;--vs-upload-remove-color: #e05252;--vs-upload-remove-hover-color: #cc3340}.vs-upload{--vs-upload-label-color: #2f3941;--vs-upload-hint-color: #68737d;--vs-upload-dropzone-border: #d8dcde;--vs-upload-dropzone-bg: #ffffff;--vs-upload-dropzone-color: #1f73b7;--vs-upload-dropzone-border-dragging: #1f73b7;--vs-upload-dropzone-bg-dragging: #eaf4ff;--vs-upload-file-border: #e9ebed;--vs-upload-file-bg: #ffffff;--vs-upload-file-color: #2f3941;--vs-upload-file-size-color: #87929d;--vs-upload-remove-color: #cc3340;--vs-upload-remove-hover-color: #8c232c;--vs-upload-error-color: #cc3340;--vs-upload-warning-color: #ad5918;--vs-upload-success-color: #186146;--vs-upload-border-radius: 4px;display:flex;flex-direction:column;font-family:inherit}.vs-upload__label{display:inline-block;margin-bottom:8px;font-size:14px;font-weight:600;color:var(--vs-upload-label-color);line-height:1.4;cursor:default}.vs-upload__hint{margin:-8px 0 8px;font-size:13px;color:var(--vs-upload-hint-color);line-height:1.4}.vs-upload__dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px 20px;border:2px dashed var(--vs-upload-dropzone-border);border-radius:var(--vs-upload-border-radius);background:var(--vs-upload-dropzone-bg);color:var(--vs-upload-dropzone-color);cursor:pointer;transition:border-color .2s ease,background .2s ease}.vs-upload__dropzone:hover,.vs-upload__dropzone--dragging{border-color:var(--vs-upload-dropzone-border-dragging);background:var(--vs-upload-dropzone-bg-dragging)}.vs-upload__input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.vs-upload__dropzone-icon{flex-shrink:0}.vs-upload__dropzone-text{font-size:14px;font-weight:500;text-align:center;line-height:1.4}.vs-upload__file-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}.vs-upload__file-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--vs-upload-file-border);border-radius:var(--vs-upload-border-radius);background:var(--vs-upload-file-bg);color:var(--vs-upload-file-color)}.vs-upload__file-icon{flex-shrink:0;color:var(--vs-upload-hint-color)}.vs-upload__file-name{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vs-upload__file-size{font-size:12px;color:var(--vs-upload-file-size-color);flex-shrink:0}.vs-upload__remove{display:flex;align-items:center;margin-left:4px;background:none;border:none;cursor:pointer;color:var(--vs-upload-remove-color);border-radius:2px;transition:color .15s ease}.vs-upload__remove:hover:not(:disabled){color:var(--vs-upload-remove-hover-color)}.vs-upload__remove:disabled{opacity:.4;cursor:not-allowed}.vs-upload__message{margin:6px 0 0;font-size:12px;line-height:1.4;color:var(--vs-upload-hint-color)}.vs-upload__message--error{color:var(--vs-upload-error-color)}.vs-upload__message--warning{color:var(--vs-upload-warning-color)}.vs-upload__message--success{color:var(--vs-upload-success-color)}.vs-upload--error .vs-upload__dropzone{border-color:var(--vs-upload-error-color)}.vs-upload--warning .vs-upload__dropzone{border-color:var(--vs-upload-warning-color)}.vs-upload--success .vs-upload__dropzone{border-color:var(--vs-upload-success-color)}.vs-upload--compact .vs-upload__dropzone{padding:14px 16px;flex-direction:row;gap:8px}.vs-upload--compact .vs-upload__dropzone .vs-upload__dropzone-icon{width:16px;height:16px}.vs-upload--compact .vs-upload__dropzone .vs-upload__dropzone-text{font-size:13px}.vs-upload--compact .vs-upload__file-item{padding:6px 10px}.vs-upload--compact .vs-upload__file-name{font-size:13px}.vs-upload--disabled .vs-upload__dropzone{opacity:.6;cursor:not-allowed}.vs-upload--disabled .vs-upload__dropzone:hover{border-color:var(--vs-upload-dropzone-border);background:var(--vs-upload-dropzone-bg)}")),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
|
|
2
|
-
import { openBlock as a, createElementBlock as o, normalizeClass as c, toDisplayString as d, createCommentVNode as p, createElementVNode as r, withModifiers as u, createStaticVNode as
|
|
3
|
-
const
|
|
4
|
-
const i =
|
|
5
|
-
for (const [g,
|
|
6
|
-
i[g] =
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.id="vs-upload-styles",o.appendChild(document.createTextNode("[data-theme=dark] .vs-upload,.dark .vs-upload{--vs-upload-label-color: #b0b8c1;--vs-upload-hint-color: #8090a2;--vs-upload-dropzone-border: #3a4553;--vs-upload-dropzone-bg: #1a1f26;--vs-upload-dropzone-color: #4b9fea;--vs-upload-dropzone-border-dragging: #42a5f5;--vs-upload-dropzone-bg-dragging: #1a2535;--vs-upload-file-border: #2a3038;--vs-upload-file-bg: #1a1f26;--vs-upload-file-color: #b0b8c1;--vs-upload-file-size-color: #5a6472;--vs-upload-remove-color: #e05252;--vs-upload-remove-hover-color: #cc3340}.vs-upload{--vs-upload-label-color: #2f3941;--vs-upload-hint-color: #68737d;--vs-upload-dropzone-border: #d8dcde;--vs-upload-dropzone-bg: #ffffff;--vs-upload-dropzone-color: #1f73b7;--vs-upload-dropzone-border-dragging: #1f73b7;--vs-upload-dropzone-bg-dragging: #eaf4ff;--vs-upload-file-border: #e9ebed;--vs-upload-file-bg: #ffffff;--vs-upload-file-color: #2f3941;--vs-upload-file-size-color: #87929d;--vs-upload-remove-color: #cc3340;--vs-upload-remove-hover-color: #8c232c;--vs-upload-error-color: #cc3340;--vs-upload-warning-color: #ad5918;--vs-upload-success-color: #186146;--vs-upload-border-radius: 4px;display:flex;flex-direction:column;font-family:inherit}.vs-upload__label{display:inline-block;margin-bottom:8px;font-size:14px;font-weight:600;color:var(--vs-upload-label-color);line-height:1.4;cursor:default}.vs-upload__hint{margin:-8px 0 8px;font-size:13px;color:var(--vs-upload-hint-color);line-height:1.4}.vs-upload__dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px 20px;border:2px dashed var(--vs-upload-dropzone-border);border-radius:var(--vs-upload-border-radius);background:var(--vs-upload-dropzone-bg);color:var(--vs-upload-dropzone-color);cursor:pointer;transition:border-color .2s ease,background .2s ease}.vs-upload__dropzone:hover,.vs-upload__dropzone--dragging{border-color:var(--vs-upload-dropzone-border-dragging);background:var(--vs-upload-dropzone-bg-dragging)}.vs-upload__input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.vs-upload__dropzone-icon{flex-shrink:0}.vs-upload__dropzone-text{font-size:14px;font-weight:500;text-align:center;line-height:1.4}.vs-upload__file-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}.vs-upload__file-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--vs-upload-file-border);border-radius:var(--vs-upload-border-radius);background:var(--vs-upload-file-bg);color:var(--vs-upload-file-color)}.vs-upload__file-icon{flex-shrink:0;color:var(--vs-upload-hint-color);display:flex}.vs-upload__file-name{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vs-upload__file-size{font-size:12px;color:var(--vs-upload-file-size-color);flex-shrink:0}.vs-upload__remove{display:flex;align-items:center;margin-left:4px;background:none;border:none;cursor:pointer;color:var(--vs-upload-remove-color);border-radius:2px;transition:color .15s ease}.vs-upload__remove:hover:not(:disabled){color:var(--vs-upload-remove-hover-color)}.vs-upload__remove:disabled{opacity:.4;cursor:not-allowed}.vs-upload__remove-icon{display:flex;width:15px;height:15px}.vs-upload__message{margin:6px 0 0;font-size:12px;line-height:1.4;color:var(--vs-upload-hint-color)}.vs-upload__message--error{color:var(--vs-upload-error-color)}.vs-upload__message--warning{color:var(--vs-upload-warning-color)}.vs-upload__message--success{color:var(--vs-upload-success-color)}.vs-upload--error .vs-upload__dropzone{border-color:var(--vs-upload-error-color)}.vs-upload--warning .vs-upload__dropzone{border-color:var(--vs-upload-warning-color)}.vs-upload--success .vs-upload__dropzone{border-color:var(--vs-upload-success-color)}.vs-upload--compact .vs-upload__dropzone{padding:14px 16px;flex-direction:row;gap:8px}.vs-upload--compact .vs-upload__dropzone .vs-upload__dropzone-icon{width:16px;height:16px}.vs-upload--compact .vs-upload__dropzone .vs-upload__dropzone-text{font-size:13px}.vs-upload--compact .vs-upload__file-item{padding:6px 10px}.vs-upload--compact .vs-upload__file-name{font-size:13px}.vs-upload--disabled .vs-upload__dropzone{opacity:.6;cursor:not-allowed}.vs-upload--disabled .vs-upload__dropzone:hover{border-color:var(--vs-upload-dropzone-border);background:var(--vs-upload-dropzone-bg)}")),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
|
|
2
|
+
import { openBlock as a, createElementBlock as o, normalizeClass as c, toDisplayString as d, createCommentVNode as p, createElementVNode as r, withModifiers as u, createStaticVNode as h, Fragment as m, renderList as f } from "vue";
|
|
3
|
+
const y = (e, t) => {
|
|
4
|
+
const i = e.__vccOpts || e;
|
|
5
|
+
for (const [g, l] of t)
|
|
6
|
+
i[g] = l;
|
|
7
7
|
return i;
|
|
8
8
|
};
|
|
9
9
|
let _ = 0;
|
|
@@ -38,7 +38,7 @@ const x = {
|
|
|
38
38
|
},
|
|
39
39
|
validation: {
|
|
40
40
|
type: String,
|
|
41
|
-
validator: (
|
|
41
|
+
validator: (e) => ["success", "warning", "error"].includes(e)
|
|
42
42
|
},
|
|
43
43
|
message: {
|
|
44
44
|
type: String
|
|
@@ -60,8 +60,8 @@ const x = {
|
|
|
60
60
|
};
|
|
61
61
|
},
|
|
62
62
|
ariaDescribedBy() {
|
|
63
|
-
const
|
|
64
|
-
return this.hint &&
|
|
63
|
+
const e = [];
|
|
64
|
+
return this.hint && e.push(`${this.inputId}-hint`), this.message && e.push(`${this.inputId}-message`), e.length ? e.join(" ") : void 0;
|
|
65
65
|
}
|
|
66
66
|
},
|
|
67
67
|
methods: {
|
|
@@ -74,25 +74,28 @@ const x = {
|
|
|
74
74
|
onDragLeave() {
|
|
75
75
|
this.isDragging = !1;
|
|
76
76
|
},
|
|
77
|
-
onDrop(
|
|
78
|
-
this.isDragging = !1, !this.disabled && this.addFiles(
|
|
77
|
+
onDrop(e) {
|
|
78
|
+
this.isDragging = !1, !this.disabled && this.addFiles(e.dataTransfer.files);
|
|
79
79
|
},
|
|
80
|
-
onFileInput(
|
|
81
|
-
this.addFiles(
|
|
80
|
+
onFileInput(e) {
|
|
81
|
+
this.addFiles(e.target.files), e.target.value = "";
|
|
82
82
|
},
|
|
83
|
-
addFiles(
|
|
84
|
-
if (!
|
|
83
|
+
addFiles(e) {
|
|
84
|
+
if (!e || !e.length)
|
|
85
85
|
return;
|
|
86
|
-
const
|
|
86
|
+
const t = Array.from(e), i = this.multiple ? [...this.modelValue || [], ...t] : [t[0]];
|
|
87
87
|
this.$emit("update:modelValue", i), this.$emit("change", i);
|
|
88
88
|
},
|
|
89
|
-
removeFile(
|
|
90
|
-
const
|
|
91
|
-
|
|
89
|
+
removeFile(e) {
|
|
90
|
+
const t = [...this.modelValue || []];
|
|
91
|
+
t.splice(e, 1), this.$emit("update:modelValue", t), this.$emit("change", t);
|
|
92
92
|
},
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
93
|
+
getRemoveIconSvg() {
|
|
94
|
+
return '<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6" /><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" /><path d="M10 11v6" /><path d="M14 11v6" /><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" /></svg>';
|
|
95
|
+
},
|
|
96
|
+
getFileIconSvg(e) {
|
|
97
|
+
const t = (e.split(".").pop() || "").toLowerCase(), i = 'xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"';
|
|
98
|
+
return ["jpg", "jpeg", "png", "gif", "webp", "svg", "bmp", "ico"].includes(t) ? `<svg ${i}><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>` : ["mp4", "mov", "avi", "mkv", "webm"].includes(t) ? `<svg ${i}><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>` : ["mp3", "wav", "ogg", "flac", "aac"].includes(t) ? `<svg ${i}><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>` : t === "pdf" ? `<svg ${i}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>` : ["zip", "rar", "tar", "gz", "7z"].includes(t) ? '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true" data-garden-id="forms.file.icon" data-garden-version="9.12.6" class="StyledBaseIcon-sc-1moykgb-0 StyledFileIcon-sc-7b3q0c-0 eWlVPJ goYdHe"><path fill="none" stroke="currentColor" stroke-linecap="round" d="M6.5.5v11M5 2.5h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m8-6.3V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5"></path></svg>' : ["xls", "xlsx", "csv"].includes(t) ? `<svg ${i}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="16" y2="17"/><line x1="8" y1="9" x2="10" y2="9"/></svg>` : ["ppt", "pptx"].includes(t) ? `<svg ${i}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><path d="M8 13h5a2 2 0 0 0 0-4H8v8"/></svg>` : [
|
|
96
99
|
"js",
|
|
97
100
|
"ts",
|
|
98
101
|
"jsx",
|
|
@@ -114,90 +117,94 @@ const x = {
|
|
|
114
117
|
"yml",
|
|
115
118
|
"yaml",
|
|
116
119
|
"md"
|
|
117
|
-
].includes(
|
|
120
|
+
].includes(t) ? `<svg ${i}><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>` : ["txt", "doc", "docx", "rtf"].includes(t) ? `<svg ${i}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>` : `<svg ${i}><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>`;
|
|
118
121
|
},
|
|
119
|
-
formatSize(
|
|
120
|
-
return
|
|
122
|
+
formatSize(e) {
|
|
123
|
+
return e === 0 ? "0 B" : e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(1)} MB`;
|
|
121
124
|
}
|
|
122
125
|
}
|
|
123
126
|
}, w = ["for"], k = ["id"], b = ["id", "accept", "multiple", "disabled", "aria-describedby"], V = {
|
|
124
127
|
key: 2,
|
|
125
128
|
class: "vs-upload__file-list",
|
|
126
129
|
role: "list"
|
|
127
|
-
}, D = ["innerHTML"],
|
|
128
|
-
function
|
|
130
|
+
}, D = ["innerHTML"], M = ["title"], z = { class: "vs-upload__file-size" }, H = ["aria-label", "disabled", "onClick"], I = ["innerHTML"], C = ["id"];
|
|
131
|
+
function F(e, t, i, g, l, s) {
|
|
129
132
|
return a(), o("div", {
|
|
130
|
-
class: c(["vs-upload",
|
|
133
|
+
class: c(["vs-upload", s.containerClass])
|
|
131
134
|
}, [
|
|
132
135
|
i.label ? (a(), o("label", {
|
|
133
136
|
key: 0,
|
|
134
|
-
for:
|
|
137
|
+
for: l.inputId,
|
|
135
138
|
class: "vs-upload__label"
|
|
136
139
|
}, d(i.label), 9, w)) : p("", !0),
|
|
137
140
|
i.hint ? (a(), o("span", {
|
|
138
141
|
key: 1,
|
|
139
142
|
class: "vs-upload__hint",
|
|
140
|
-
id: `${
|
|
143
|
+
id: `${l.inputId}-hint`
|
|
141
144
|
}, d(i.hint), 9, k)) : p("", !0),
|
|
142
145
|
r("div", {
|
|
143
|
-
class: c(["vs-upload__dropzone", { "vs-upload__dropzone--dragging":
|
|
144
|
-
onDragover:
|
|
145
|
-
onDragleave:
|
|
146
|
-
onDrop:
|
|
147
|
-
onClick:
|
|
146
|
+
class: c(["vs-upload__dropzone", { "vs-upload__dropzone--dragging": l.isDragging }]),
|
|
147
|
+
onDragover: t[1] || (t[1] = u((...n) => s.onDragOver && s.onDragOver(...n), ["prevent"])),
|
|
148
|
+
onDragleave: t[2] || (t[2] = u((...n) => s.onDragLeave && s.onDragLeave(...n), ["prevent"])),
|
|
149
|
+
onDrop: t[3] || (t[3] = u((...n) => s.onDrop && s.onDrop(...n), ["prevent"])),
|
|
150
|
+
onClick: t[4] || (t[4] = (...n) => s.openFilePicker && s.openFilePicker(...n))
|
|
148
151
|
}, [
|
|
149
152
|
r("input", {
|
|
150
|
-
id:
|
|
153
|
+
id: l.inputId,
|
|
151
154
|
ref: "fileInput",
|
|
152
155
|
type: "file",
|
|
153
156
|
class: "vs-upload__input",
|
|
154
157
|
accept: i.accept,
|
|
155
158
|
multiple: i.multiple,
|
|
156
159
|
disabled: i.disabled,
|
|
157
|
-
"aria-describedby":
|
|
158
|
-
onChange:
|
|
160
|
+
"aria-describedby": s.ariaDescribedBy,
|
|
161
|
+
onChange: t[0] || (t[0] = (...n) => s.onFileInput && s.onFileInput(...n))
|
|
159
162
|
}, null, 40, b),
|
|
160
|
-
|
|
163
|
+
t[5] || (t[5] = h('<svg class="vs-upload__dropzone-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg><span class="vs-upload__dropzone-text">Choose a file or drag and drop here</span>', 2))
|
|
161
164
|
], 34),
|
|
162
165
|
i.modelValue && i.modelValue.length ? (a(), o("ul", V, [
|
|
163
|
-
(a(!0), o(m, null,
|
|
164
|
-
key: `${
|
|
166
|
+
(a(!0), o(m, null, f(i.modelValue, (n, v) => (a(), o("li", {
|
|
167
|
+
key: `${n.name}-${v}`,
|
|
165
168
|
class: "vs-upload__file-item"
|
|
166
169
|
}, [
|
|
167
170
|
r("span", {
|
|
168
171
|
class: "vs-upload__file-icon",
|
|
169
172
|
"aria-hidden": "true",
|
|
170
|
-
innerHTML:
|
|
173
|
+
innerHTML: s.getFileIconSvg(n.name)
|
|
171
174
|
}, null, 8, D),
|
|
172
175
|
r("span", {
|
|
173
176
|
class: "vs-upload__file-name",
|
|
174
|
-
title:
|
|
175
|
-
}, d(
|
|
176
|
-
r("span",
|
|
177
|
+
title: n.name
|
|
178
|
+
}, d(n.name), 9, M),
|
|
179
|
+
r("span", z, d(s.formatSize(n.size)), 1),
|
|
177
180
|
r("button", {
|
|
178
181
|
type: "button",
|
|
179
182
|
class: "vs-upload__remove",
|
|
180
|
-
"aria-label": `Remove ${
|
|
183
|
+
"aria-label": `Remove ${n.name}`,
|
|
181
184
|
disabled: i.disabled,
|
|
182
|
-
onClick: u((
|
|
183
|
-
}, [
|
|
184
|
-
|
|
185
|
-
|
|
185
|
+
onClick: u((S) => s.removeFile(v), ["stop"])
|
|
186
|
+
}, [
|
|
187
|
+
r("span", {
|
|
188
|
+
class: "vs-upload__remove-icon",
|
|
189
|
+
"aria-hidden": "true",
|
|
190
|
+
innerHTML: s.getRemoveIconSvg()
|
|
191
|
+
}, null, 8, I)
|
|
192
|
+
], 8, H)
|
|
186
193
|
]))), 128))
|
|
187
194
|
])) : p("", !0),
|
|
188
195
|
i.message ? (a(), o("span", {
|
|
189
196
|
key: 3,
|
|
190
197
|
class: c(["vs-upload__message", `vs-upload__message--${i.validation}`]),
|
|
191
|
-
id: `${
|
|
192
|
-
}, d(i.message), 11,
|
|
198
|
+
id: `${l.inputId}-message`
|
|
199
|
+
}, d(i.message), 11, C)) : p("", !0)
|
|
193
200
|
], 2);
|
|
194
201
|
}
|
|
195
|
-
const
|
|
196
|
-
install(
|
|
197
|
-
|
|
202
|
+
const B = /* @__PURE__ */ y(x, [["render", F]]), L = {
|
|
203
|
+
install(e) {
|
|
204
|
+
e.component("VsUpload", B);
|
|
198
205
|
}
|
|
199
206
|
};
|
|
200
207
|
export {
|
|
201
|
-
|
|
202
|
-
|
|
208
|
+
B as default,
|
|
209
|
+
L as plugin
|
|
203
210
|
};
|
package/dist/index.min.js
CHANGED
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode("[data-theme=dark] .vs-upload,.dark .vs-upload{--vs-upload-label-color: #b0b8c1;--vs-upload-hint-color: #8090a2;--vs-upload-dropzone-border: #3a4553;--vs-upload-dropzone-bg: #1a1f26;--vs-upload-dropzone-color: #4b9fea;--vs-upload-dropzone-border-dragging: #42a5f5;--vs-upload-dropzone-bg-dragging: #1a2535;--vs-upload-file-border: #2a3038;--vs-upload-file-bg: #1a1f26;--vs-upload-file-color: #b0b8c1;--vs-upload-file-size-color: #5a6472;--vs-upload-remove-color: #e05252;--vs-upload-remove-hover-color: #cc3340}.vs-upload{--vs-upload-label-color: #2f3941;--vs-upload-hint-color: #68737d;--vs-upload-dropzone-border: #d8dcde;--vs-upload-dropzone-bg: #ffffff;--vs-upload-dropzone-color: #1f73b7;--vs-upload-dropzone-border-dragging: #1f73b7;--vs-upload-dropzone-bg-dragging: #eaf4ff;--vs-upload-file-border: #e9ebed;--vs-upload-file-bg: #ffffff;--vs-upload-file-color: #2f3941;--vs-upload-file-size-color: #87929d;--vs-upload-remove-color: #cc3340;--vs-upload-remove-hover-color: #8c232c;--vs-upload-error-color: #cc3340;--vs-upload-warning-color: #ad5918;--vs-upload-success-color: #186146;--vs-upload-border-radius: 4px;display:flex;flex-direction:column;font-family:inherit}.vs-upload__label{display:inline-block;margin-bottom:8px;font-size:14px;font-weight:600;color:var(--vs-upload-label-color);line-height:1.4;cursor:default}.vs-upload__hint{margin:-8px 0 8px;font-size:13px;color:var(--vs-upload-hint-color);line-height:1.4}.vs-upload__dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px 20px;border:2px dashed var(--vs-upload-dropzone-border);border-radius:var(--vs-upload-border-radius);background:var(--vs-upload-dropzone-bg);color:var(--vs-upload-dropzone-color);cursor:pointer;transition:border-color .2s ease,background .2s ease}.vs-upload__dropzone:hover,.vs-upload__dropzone--dragging{border-color:var(--vs-upload-dropzone-border-dragging);background:var(--vs-upload-dropzone-bg-dragging)}.vs-upload__input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.vs-upload__dropzone-icon{flex-shrink:0}.vs-upload__dropzone-text{font-size:14px;font-weight:500;text-align:center;line-height:1.4}.vs-upload__file-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}.vs-upload__file-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--vs-upload-file-border);border-radius:var(--vs-upload-border-radius);background:var(--vs-upload-file-bg);color:var(--vs-upload-file-color)}.vs-upload__file-icon{flex-shrink:0;color:var(--vs-upload-hint-color)}.vs-upload__file-name{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vs-upload__file-size{font-size:12px;color:var(--vs-upload-file-size-color);flex-shrink:0}.vs-upload__remove{display:flex;align-items:center;margin-left:4px;background:none;border:none;cursor:pointer;color:var(--vs-upload-remove-color);border-radius:2px;transition:color .15s ease}.vs-upload__remove:hover:not(:disabled){color:var(--vs-upload-remove-hover-color)}.vs-upload__remove:disabled{opacity:.4;cursor:not-allowed}.vs-upload__message{margin:6px 0 0;font-size:12px;line-height:1.4;color:var(--vs-upload-hint-color)}.vs-upload__message--error{color:var(--vs-upload-error-color)}.vs-upload__message--warning{color:var(--vs-upload-warning-color)}.vs-upload__message--success{color:var(--vs-upload-success-color)}.vs-upload--error .vs-upload__dropzone{border-color:var(--vs-upload-error-color)}.vs-upload--warning .vs-upload__dropzone{border-color:var(--vs-upload-warning-color)}.vs-upload--success .vs-upload__dropzone{border-color:var(--vs-upload-success-color)}.vs-upload--compact .vs-upload__dropzone{padding:14px 16px;flex-direction:row;gap:8px}.vs-upload--compact .vs-upload__dropzone .vs-upload__dropzone-icon{width:16px;height:16px}.vs-upload--compact .vs-upload__dropzone .vs-upload__dropzone-text{font-size:13px}.vs-upload--compact .vs-upload__file-item{padding:6px 10px}.vs-upload--compact .vs-upload__file-name{font-size:13px}.vs-upload--disabled .vs-upload__dropzone{opacity:.6;cursor:not-allowed}.vs-upload--disabled .vs-upload__dropzone:hover{border-color:var(--vs-upload-dropzone-border);background:var(--vs-upload-dropzone-bg)}")),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
|
|
2
|
-
var VsUpload=function(
|
|
3
|
-
`,document.head.appendChild(d);const B="",u=(l,o)=>{const a=l.__vccOpts||l;for(const[p,i]of o)a[p]=i;return a};let v=0;const g={name:"VsUpload",inheritAttrs:!1,props:{modelValue:{type:Array,default:()=>[]},label:{type:String},hint:{type:String},accept:{type:String},multiple:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},isCompact:{type:Boolean,default:!1},validation:{type:String,validator:l=>["success","warning","error"].includes(l)},message:{type:String}},emits:["update:modelValue","change","reject"],data(){return{inputId:`vs-upload-${++v}`,isDragging:!1}},computed:{containerClass(){return{"vs-upload--disabled":this.disabled,"vs-upload--compact":this.isCompact,[`vs-upload--${this.validation}`]:!!this.validation}},ariaDescribedBy(){const l=[];return this.hint&&l.push(`${this.inputId}-hint`),this.message&&l.push(`${this.inputId}-message`),l.length?l.join(" "):void 0}},methods:{openFilePicker(){this.disabled||this.$refs.fileInput.click()},onDragOver(){this.disabled||(this.isDragging=!0)},onDragLeave(){this.isDragging=!1},onDrop(l){this.isDragging=!1,!this.disabled&&this.addFiles(l.dataTransfer.files)},onFileInput(l){this.addFiles(l.target.files),l.target.value=""},addFiles(l){if(!l||!l.length)return;const o=Array.from(l),a=this.multiple?[...this.modelValue||[],...o]:[o[0]];this.$emit("update:modelValue",a),this.$emit("change",a)},removeFile(l){const o=[...this.modelValue||[]];o.splice(l,1),this.$emit("update:modelValue",o),this.$emit("change",o)},getFileIconSvg(l){const o=(l.split(".").pop()||"").toLowerCase(),a='xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"';return["jpg","jpeg","png","gif","webp","svg","bmp","ico"].includes(o)?`<svg ${a}><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`:["mp4","mov","avi","mkv","webm"].includes(o)?`<svg ${a}><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>`:["mp3","wav","ogg","flac","aac"].includes(o)?`<svg ${a}><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>`:o==="pdf"?`<svg ${a}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>`:["zip","rar","tar","gz","7z"].includes(o)?'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true" data-garden-id="forms.file.icon" data-garden-version="9.12.6" class="StyledBaseIcon-sc-1moykgb-0 StyledFileIcon-sc-7b3q0c-0 eWlVPJ goYdHe"><path fill="none" stroke="currentColor" stroke-linecap="round" d="M6.5.5v11M5 2.5h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m8-6.3V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5"></path></svg>':["xls","xlsx","csv"].includes(o)?`<svg ${a}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="16" y2="17"/><line x1="8" y1="9" x2="10" y2="9"/></svg>`:["ppt","pptx"].includes(o)?`<svg ${a}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><path d="M8 13h5a2 2 0 0 0 0-4H8v8"/></svg>`:["js","ts","jsx","tsx","html","css","scss","json","xml","py","rb","go","java","php","c","cpp","cs","sh","yml","yaml","md"].includes(o)?`<svg ${a}><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>`:["txt","doc","docx","rtf"].includes(o)?`<svg ${a}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>`:`<svg ${a}><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>`},formatSize(l){return l===0?"0 B":l<1024?`${l} B`:l<1024*1024?`${(l/1024).toFixed(1)} KB`:`${(l/(1024*1024)).toFixed(1)} MB`}}},h=["for"],m=["id"],f=["id","accept","multiple","disabled","aria-describedby"],_={key:2,class:"vs-upload__file-list",role:"list"},x=["innerHTML"],b=["title"],y={class:"vs-upload__file-size"},z=["aria-label","disabled","onClick"],k=["id"];function w(l,o,a,p,i,s){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vs-upload",s.containerClass])},[a.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:i.inputId,class:"vs-upload__label"},e.toDisplayString(a.label),9,h)):e.createCommentVNode("",!0),a.hint?(e.openBlock(),e.createElementBlock("span",{key:1,class:"vs-upload__hint",id:`${i.inputId}-hint`},e.toDisplayString(a.hint),9,m)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["vs-upload__dropzone",{"vs-upload__dropzone--dragging":i.isDragging}]),onDragover:o[1]||(o[1]=e.withModifiers((...r)=>s.onDragOver&&s.onDragOver(...r),["prevent"])),onDragleave:o[2]||(o[2]=e.withModifiers((...r)=>s.onDragLeave&&s.onDragLeave(...r),["prevent"])),onDrop:o[3]||(o[3]=e.withModifiers((...r)=>s.onDrop&&s.onDrop(...r),["prevent"])),onClick:o[4]||(o[4]=(...r)=>s.openFilePicker&&s.openFilePicker(...r))},[e.createElementVNode("input",{id:i.inputId,ref:"fileInput",type:"file",class:"vs-upload__input",accept:a.accept,multiple:a.multiple,disabled:a.disabled,"aria-describedby":s.ariaDescribedBy,onChange:o[0]||(o[0]=(...r)=>s.onFileInput&&s.onFileInput(...r))},null,40,f),o[5]||(o[5]=e.createStaticVNode('<svg class="vs-upload__dropzone-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg><span class="vs-upload__dropzone-text">Choose a file or drag and drop here</span>',2))],34),a.modelValue&&a.modelValue.length?(e.openBlock(),e.createElementBlock("ul",_,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.modelValue,(r,c)=>(e.openBlock(),e.createElementBlock("li",{key:`${r.name}-${c}`,class:"vs-upload__file-item"},[e.createElementVNode("span",{class:"vs-upload__file-icon","aria-hidden":"true",innerHTML:s.getFileIconSvg(r.name)},null,8,x),e.createElementVNode("span",{class:"vs-upload__file-name",title:r.name},e.toDisplayString(r.name),9,b),e.createElementVNode("span",y,e.toDisplayString(s.formatSize(r.size)),1),e.createElementVNode("button",{type:"button",class:"vs-upload__remove","aria-label":`Remove ${r.name}`,disabled:a.disabled,onClick:e.withModifiers(C=>s.removeFile(c),["stop"])},[...o[6]||(o[6]=[e.createStaticVNode('<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path></svg>',1)])],8,z)]))),128))])):e.createCommentVNode("",!0),a.message?(e.openBlock(),e.createElementBlock("span",{key:3,class:e.normalizeClass(["vs-upload__message",`vs-upload__message--${a.validation}`]),id:`${i.inputId}-message`},e.toDisplayString(a.message),11,k)):e.createCommentVNode("",!0)],2)}const n=u(g,[["render",w]]),V={install(l){l.component("VsUpload",n)}};return t.default=n,t.plugin=V,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),t}({},Vue);
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.id="vs-upload-styles",o.appendChild(document.createTextNode("[data-theme=dark] .vs-upload,.dark .vs-upload{--vs-upload-label-color: #b0b8c1;--vs-upload-hint-color: #8090a2;--vs-upload-dropzone-border: #3a4553;--vs-upload-dropzone-bg: #1a1f26;--vs-upload-dropzone-color: #4b9fea;--vs-upload-dropzone-border-dragging: #42a5f5;--vs-upload-dropzone-bg-dragging: #1a2535;--vs-upload-file-border: #2a3038;--vs-upload-file-bg: #1a1f26;--vs-upload-file-color: #b0b8c1;--vs-upload-file-size-color: #5a6472;--vs-upload-remove-color: #e05252;--vs-upload-remove-hover-color: #cc3340}.vs-upload{--vs-upload-label-color: #2f3941;--vs-upload-hint-color: #68737d;--vs-upload-dropzone-border: #d8dcde;--vs-upload-dropzone-bg: #ffffff;--vs-upload-dropzone-color: #1f73b7;--vs-upload-dropzone-border-dragging: #1f73b7;--vs-upload-dropzone-bg-dragging: #eaf4ff;--vs-upload-file-border: #e9ebed;--vs-upload-file-bg: #ffffff;--vs-upload-file-color: #2f3941;--vs-upload-file-size-color: #87929d;--vs-upload-remove-color: #cc3340;--vs-upload-remove-hover-color: #8c232c;--vs-upload-error-color: #cc3340;--vs-upload-warning-color: #ad5918;--vs-upload-success-color: #186146;--vs-upload-border-radius: 4px;display:flex;flex-direction:column;font-family:inherit}.vs-upload__label{display:inline-block;margin-bottom:8px;font-size:14px;font-weight:600;color:var(--vs-upload-label-color);line-height:1.4;cursor:default}.vs-upload__hint{margin:-8px 0 8px;font-size:13px;color:var(--vs-upload-hint-color);line-height:1.4}.vs-upload__dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px 20px;border:2px dashed var(--vs-upload-dropzone-border);border-radius:var(--vs-upload-border-radius);background:var(--vs-upload-dropzone-bg);color:var(--vs-upload-dropzone-color);cursor:pointer;transition:border-color .2s ease,background .2s ease}.vs-upload__dropzone:hover,.vs-upload__dropzone--dragging{border-color:var(--vs-upload-dropzone-border-dragging);background:var(--vs-upload-dropzone-bg-dragging)}.vs-upload__input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.vs-upload__dropzone-icon{flex-shrink:0}.vs-upload__dropzone-text{font-size:14px;font-weight:500;text-align:center;line-height:1.4}.vs-upload__file-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}.vs-upload__file-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--vs-upload-file-border);border-radius:var(--vs-upload-border-radius);background:var(--vs-upload-file-bg);color:var(--vs-upload-file-color)}.vs-upload__file-icon{flex-shrink:0;color:var(--vs-upload-hint-color);display:flex}.vs-upload__file-name{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vs-upload__file-size{font-size:12px;color:var(--vs-upload-file-size-color);flex-shrink:0}.vs-upload__remove{display:flex;align-items:center;margin-left:4px;background:none;border:none;cursor:pointer;color:var(--vs-upload-remove-color);border-radius:2px;transition:color .15s ease}.vs-upload__remove:hover:not(:disabled){color:var(--vs-upload-remove-hover-color)}.vs-upload__remove:disabled{opacity:.4;cursor:not-allowed}.vs-upload__remove-icon{display:flex;width:15px;height:15px}.vs-upload__message{margin:6px 0 0;font-size:12px;line-height:1.4;color:var(--vs-upload-hint-color)}.vs-upload__message--error{color:var(--vs-upload-error-color)}.vs-upload__message--warning{color:var(--vs-upload-warning-color)}.vs-upload__message--success{color:var(--vs-upload-success-color)}.vs-upload--error .vs-upload__dropzone{border-color:var(--vs-upload-error-color)}.vs-upload--warning .vs-upload__dropzone{border-color:var(--vs-upload-warning-color)}.vs-upload--success .vs-upload__dropzone{border-color:var(--vs-upload-success-color)}.vs-upload--compact .vs-upload__dropzone{padding:14px 16px;flex-direction:row;gap:8px}.vs-upload--compact .vs-upload__dropzone .vs-upload__dropzone-icon{width:16px;height:16px}.vs-upload--compact .vs-upload__dropzone .vs-upload__dropzone-text{font-size:13px}.vs-upload--compact .vs-upload__file-item{padding:6px 10px}.vs-upload--compact .vs-upload__file-name{font-size:13px}.vs-upload--disabled .vs-upload__dropzone{opacity:.6;cursor:not-allowed}.vs-upload--disabled .vs-upload__dropzone:hover{border-color:var(--vs-upload-dropzone-border);background:var(--vs-upload-dropzone-bg)}")),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
|
|
2
|
+
var VsUpload=function(o,e){"use strict";const M="",p=(t,i)=>{const l=t.__vccOpts||t;for(const[d,s]of i)l[d]=s;return l};let g=0;const h={name:"VsUpload",inheritAttrs:!1,props:{modelValue:{type:Array,default:()=>[]},label:{type:String},hint:{type:String},accept:{type:String},multiple:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},isCompact:{type:Boolean,default:!1},validation:{type:String,validator:t=>["success","warning","error"].includes(t)},message:{type:String}},emits:["update:modelValue","change","reject"],data(){return{inputId:`vs-upload-${++g}`,isDragging:!1}},computed:{containerClass(){return{"vs-upload--disabled":this.disabled,"vs-upload--compact":this.isCompact,[`vs-upload--${this.validation}`]:!!this.validation}},ariaDescribedBy(){const t=[];return this.hint&&t.push(`${this.inputId}-hint`),this.message&&t.push(`${this.inputId}-message`),t.length?t.join(" "):void 0}},methods:{openFilePicker(){this.disabled||this.$refs.fileInput.click()},onDragOver(){this.disabled||(this.isDragging=!0)},onDragLeave(){this.isDragging=!1},onDrop(t){this.isDragging=!1,!this.disabled&&this.addFiles(t.dataTransfer.files)},onFileInput(t){this.addFiles(t.target.files),t.target.value=""},addFiles(t){if(!t||!t.length)return;const i=Array.from(t),l=this.multiple?[...this.modelValue||[],...i]:[i[0]];this.$emit("update:modelValue",l),this.$emit("change",l)},removeFile(t){const i=[...this.modelValue||[]];i.splice(t,1),this.$emit("update:modelValue",i),this.$emit("change",i)},getRemoveIconSvg(){return'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6" /><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" /><path d="M10 11v6" /><path d="M14 11v6" /><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" /></svg>'},getFileIconSvg(t){const i=(t.split(".").pop()||"").toLowerCase(),l='xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"';return["jpg","jpeg","png","gif","webp","svg","bmp","ico"].includes(i)?`<svg ${l}><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`:["mp4","mov","avi","mkv","webm"].includes(i)?`<svg ${l}><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>`:["mp3","wav","ogg","flac","aac"].includes(i)?`<svg ${l}><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>`:i==="pdf"?`<svg ${l}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>`:["zip","rar","tar","gz","7z"].includes(i)?'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true" data-garden-id="forms.file.icon" data-garden-version="9.12.6" class="StyledBaseIcon-sc-1moykgb-0 StyledFileIcon-sc-7b3q0c-0 eWlVPJ goYdHe"><path fill="none" stroke="currentColor" stroke-linecap="round" d="M6.5.5v11M5 2.5h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m8-6.3V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5"></path></svg>':["xls","xlsx","csv"].includes(i)?`<svg ${l}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="16" y2="17"/><line x1="8" y1="9" x2="10" y2="9"/></svg>`:["ppt","pptx"].includes(i)?`<svg ${l}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><path d="M8 13h5a2 2 0 0 0 0-4H8v8"/></svg>`:["js","ts","jsx","tsx","html","css","scss","json","xml","py","rb","go","java","php","c","cpp","cs","sh","yml","yaml","md"].includes(i)?`<svg ${l}><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>`:["txt","doc","docx","rtf"].includes(i)?`<svg ${l}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>`:`<svg ${l}><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>`},formatSize(t){return t===0?"0 B":t<1024?`${t} B`:t<1024*1024?`${(t/1024).toFixed(1)} KB`:`${(t/(1024*1024)).toFixed(1)} MB`}}},m=["for"],u=["id"],v=["id","accept","multiple","disabled","aria-describedby"],y={key:2,class:"vs-upload__file-list",role:"list"},f=["innerHTML"],_=["title"],k={class:"vs-upload__file-size"},x=["aria-label","disabled","onClick"],w=["innerHTML"],V=["id"];function b(t,i,l,d,s,n){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vs-upload",n.containerClass])},[l.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:s.inputId,class:"vs-upload__label"},e.toDisplayString(l.label),9,m)):e.createCommentVNode("",!0),l.hint?(e.openBlock(),e.createElementBlock("span",{key:1,class:"vs-upload__hint",id:`${s.inputId}-hint`},e.toDisplayString(l.hint),9,u)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["vs-upload__dropzone",{"vs-upload__dropzone--dragging":s.isDragging}]),onDragover:i[1]||(i[1]=e.withModifiers((...a)=>n.onDragOver&&n.onDragOver(...a),["prevent"])),onDragleave:i[2]||(i[2]=e.withModifiers((...a)=>n.onDragLeave&&n.onDragLeave(...a),["prevent"])),onDrop:i[3]||(i[3]=e.withModifiers((...a)=>n.onDrop&&n.onDrop(...a),["prevent"])),onClick:i[4]||(i[4]=(...a)=>n.openFilePicker&&n.openFilePicker(...a))},[e.createElementVNode("input",{id:s.inputId,ref:"fileInput",type:"file",class:"vs-upload__input",accept:l.accept,multiple:l.multiple,disabled:l.disabled,"aria-describedby":n.ariaDescribedBy,onChange:i[0]||(i[0]=(...a)=>n.onFileInput&&n.onFileInput(...a))},null,40,v),i[5]||(i[5]=e.createStaticVNode('<svg class="vs-upload__dropzone-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg><span class="vs-upload__dropzone-text">Choose a file or drag and drop here</span>',2))],34),l.modelValue&&l.modelValue.length?(e.openBlock(),e.createElementBlock("ul",y,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.modelValue,(a,c)=>(e.openBlock(),e.createElementBlock("li",{key:`${a.name}-${c}`,class:"vs-upload__file-item"},[e.createElementVNode("span",{class:"vs-upload__file-icon","aria-hidden":"true",innerHTML:n.getFileIconSvg(a.name)},null,8,f),e.createElementVNode("span",{class:"vs-upload__file-name",title:a.name},e.toDisplayString(a.name),9,_),e.createElementVNode("span",k,e.toDisplayString(n.formatSize(a.size)),1),e.createElementVNode("button",{type:"button",class:"vs-upload__remove","aria-label":`Remove ${a.name}`,disabled:l.disabled,onClick:e.withModifiers(D=>n.removeFile(c),["stop"])},[e.createElementVNode("span",{class:"vs-upload__remove-icon","aria-hidden":"true",innerHTML:n.getRemoveIconSvg()},null,8,w)],8,x)]))),128))])):e.createCommentVNode("",!0),l.message?(e.openBlock(),e.createElementBlock("span",{key:3,class:e.normalizeClass(["vs-upload__message",`vs-upload__message--${l.validation}`]),id:`${s.inputId}-message`},e.toDisplayString(l.message),11,V)):e.createCommentVNode("",!0)],2)}const r=p(h,[["render",b]]),B={install(t){t.component("VsUpload",r)}};return o.default=r,o.plugin=B,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}}),o}({},Vue);
|
package/dist/index.umd.js
CHANGED
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.appendChild(document.createTextNode("[data-theme=dark] .vs-upload,.dark .vs-upload{--vs-upload-label-color: #b0b8c1;--vs-upload-hint-color: #8090a2;--vs-upload-dropzone-border: #3a4553;--vs-upload-dropzone-bg: #1a1f26;--vs-upload-dropzone-color: #4b9fea;--vs-upload-dropzone-border-dragging: #42a5f5;--vs-upload-dropzone-bg-dragging: #1a2535;--vs-upload-file-border: #2a3038;--vs-upload-file-bg: #1a1f26;--vs-upload-file-color: #b0b8c1;--vs-upload-file-size-color: #5a6472;--vs-upload-remove-color: #e05252;--vs-upload-remove-hover-color: #cc3340}.vs-upload{--vs-upload-label-color: #2f3941;--vs-upload-hint-color: #68737d;--vs-upload-dropzone-border: #d8dcde;--vs-upload-dropzone-bg: #ffffff;--vs-upload-dropzone-color: #1f73b7;--vs-upload-dropzone-border-dragging: #1f73b7;--vs-upload-dropzone-bg-dragging: #eaf4ff;--vs-upload-file-border: #e9ebed;--vs-upload-file-bg: #ffffff;--vs-upload-file-color: #2f3941;--vs-upload-file-size-color: #87929d;--vs-upload-remove-color: #cc3340;--vs-upload-remove-hover-color: #8c232c;--vs-upload-error-color: #cc3340;--vs-upload-warning-color: #ad5918;--vs-upload-success-color: #186146;--vs-upload-border-radius: 4px;display:flex;flex-direction:column;font-family:inherit}.vs-upload__label{display:inline-block;margin-bottom:8px;font-size:14px;font-weight:600;color:var(--vs-upload-label-color);line-height:1.4;cursor:default}.vs-upload__hint{margin:-8px 0 8px;font-size:13px;color:var(--vs-upload-hint-color);line-height:1.4}.vs-upload__dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px 20px;border:2px dashed var(--vs-upload-dropzone-border);border-radius:var(--vs-upload-border-radius);background:var(--vs-upload-dropzone-bg);color:var(--vs-upload-dropzone-color);cursor:pointer;transition:border-color .2s ease,background .2s ease}.vs-upload__dropzone:hover,.vs-upload__dropzone--dragging{border-color:var(--vs-upload-dropzone-border-dragging);background:var(--vs-upload-dropzone-bg-dragging)}.vs-upload__input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.vs-upload__dropzone-icon{flex-shrink:0}.vs-upload__dropzone-text{font-size:14px;font-weight:500;text-align:center;line-height:1.4}.vs-upload__file-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}.vs-upload__file-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--vs-upload-file-border);border-radius:var(--vs-upload-border-radius);background:var(--vs-upload-file-bg);color:var(--vs-upload-file-color)}.vs-upload__file-icon{flex-shrink:0;color:var(--vs-upload-hint-color)}.vs-upload__file-name{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vs-upload__file-size{font-size:12px;color:var(--vs-upload-file-size-color);flex-shrink:0}.vs-upload__remove{display:flex;align-items:center;margin-left:4px;background:none;border:none;cursor:pointer;color:var(--vs-upload-remove-color);border-radius:2px;transition:color .15s ease}.vs-upload__remove:hover:not(:disabled){color:var(--vs-upload-remove-hover-color)}.vs-upload__remove:disabled{opacity:.4;cursor:not-allowed}.vs-upload__message{margin:6px 0 0;font-size:12px;line-height:1.4;color:var(--vs-upload-hint-color)}.vs-upload__message--error{color:var(--vs-upload-error-color)}.vs-upload__message--warning{color:var(--vs-upload-warning-color)}.vs-upload__message--success{color:var(--vs-upload-success-color)}.vs-upload--error .vs-upload__dropzone{border-color:var(--vs-upload-error-color)}.vs-upload--warning .vs-upload__dropzone{border-color:var(--vs-upload-warning-color)}.vs-upload--success .vs-upload__dropzone{border-color:var(--vs-upload-success-color)}.vs-upload--compact .vs-upload__dropzone{padding:14px 16px;flex-direction:row;gap:8px}.vs-upload--compact .vs-upload__dropzone .vs-upload__dropzone-icon{width:16px;height:16px}.vs-upload--compact .vs-upload__dropzone .vs-upload__dropzone-text{font-size:13px}.vs-upload--compact .vs-upload__file-item{padding:6px 10px}.vs-upload--compact .vs-upload__file-name{font-size:13px}.vs-upload--disabled .vs-upload__dropzone{opacity:.6;cursor:not-allowed}.vs-upload--disabled .vs-upload__dropzone:hover{border-color:var(--vs-upload-dropzone-border);background:var(--vs-upload-dropzone-bg)}")),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
|
|
2
|
-
(function(
|
|
3
|
-
`,document.head.appendChild(t);const B="",u=(l,o)=>{const a=l.__vccOpts||l;for(const[p,n]of o)a[p]=n;return a};let v=0;const g={name:"VsUpload",inheritAttrs:!1,props:{modelValue:{type:Array,default:()=>[]},label:{type:String},hint:{type:String},accept:{type:String},multiple:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},isCompact:{type:Boolean,default:!1},validation:{type:String,validator:l=>["success","warning","error"].includes(l)},message:{type:String}},emits:["update:modelValue","change","reject"],data(){return{inputId:`vs-upload-${++v}`,isDragging:!1}},computed:{containerClass(){return{"vs-upload--disabled":this.disabled,"vs-upload--compact":this.isCompact,[`vs-upload--${this.validation}`]:!!this.validation}},ariaDescribedBy(){const l=[];return this.hint&&l.push(`${this.inputId}-hint`),this.message&&l.push(`${this.inputId}-message`),l.length?l.join(" "):void 0}},methods:{openFilePicker(){this.disabled||this.$refs.fileInput.click()},onDragOver(){this.disabled||(this.isDragging=!0)},onDragLeave(){this.isDragging=!1},onDrop(l){this.isDragging=!1,!this.disabled&&this.addFiles(l.dataTransfer.files)},onFileInput(l){this.addFiles(l.target.files),l.target.value=""},addFiles(l){if(!l||!l.length)return;const o=Array.from(l),a=this.multiple?[...this.modelValue||[],...o]:[o[0]];this.$emit("update:modelValue",a),this.$emit("change",a)},removeFile(l){const o=[...this.modelValue||[]];o.splice(l,1),this.$emit("update:modelValue",o),this.$emit("change",o)},getFileIconSvg(l){const o=(l.split(".").pop()||"").toLowerCase(),a='xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"';return["jpg","jpeg","png","gif","webp","svg","bmp","ico"].includes(o)?`<svg ${a}><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`:["mp4","mov","avi","mkv","webm"].includes(o)?`<svg ${a}><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>`:["mp3","wav","ogg","flac","aac"].includes(o)?`<svg ${a}><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>`:o==="pdf"?`<svg ${a}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>`:["zip","rar","tar","gz","7z"].includes(o)?'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true" data-garden-id="forms.file.icon" data-garden-version="9.12.6" class="StyledBaseIcon-sc-1moykgb-0 StyledFileIcon-sc-7b3q0c-0 eWlVPJ goYdHe"><path fill="none" stroke="currentColor" stroke-linecap="round" d="M6.5.5v11M5 2.5h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m8-6.3V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5"></path></svg>':["xls","xlsx","csv"].includes(o)?`<svg ${a}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="16" y2="17"/><line x1="8" y1="9" x2="10" y2="9"/></svg>`:["ppt","pptx"].includes(o)?`<svg ${a}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><path d="M8 13h5a2 2 0 0 0 0-4H8v8"/></svg>`:["js","ts","jsx","tsx","html","css","scss","json","xml","py","rb","go","java","php","c","cpp","cs","sh","yml","yaml","md"].includes(o)?`<svg ${a}><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>`:["txt","doc","docx","rtf"].includes(o)?`<svg ${a}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>`:`<svg ${a}><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>`},formatSize(l){return l===0?"0 B":l<1024?`${l} B`:l<1024*1024?`${(l/1024).toFixed(1)} KB`:`${(l/(1024*1024)).toFixed(1)} MB`}}},h=["for"],f=["id"],m=["id","accept","multiple","disabled","aria-describedby"],_={key:2,class:"vs-upload__file-list",role:"list"},x=["innerHTML"],b=["title"],y={class:"vs-upload__file-size"},z=["aria-label","disabled","onClick"],k=["id"];function w(l,o,a,p,n,s){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vs-upload",s.containerClass])},[a.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:n.inputId,class:"vs-upload__label"},e.toDisplayString(a.label),9,h)):e.createCommentVNode("",!0),a.hint?(e.openBlock(),e.createElementBlock("span",{key:1,class:"vs-upload__hint",id:`${n.inputId}-hint`},e.toDisplayString(a.hint),9,f)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["vs-upload__dropzone",{"vs-upload__dropzone--dragging":n.isDragging}]),onDragover:o[1]||(o[1]=e.withModifiers((...r)=>s.onDragOver&&s.onDragOver(...r),["prevent"])),onDragleave:o[2]||(o[2]=e.withModifiers((...r)=>s.onDragLeave&&s.onDragLeave(...r),["prevent"])),onDrop:o[3]||(o[3]=e.withModifiers((...r)=>s.onDrop&&s.onDrop(...r),["prevent"])),onClick:o[4]||(o[4]=(...r)=>s.openFilePicker&&s.openFilePicker(...r))},[e.createElementVNode("input",{id:n.inputId,ref:"fileInput",type:"file",class:"vs-upload__input",accept:a.accept,multiple:a.multiple,disabled:a.disabled,"aria-describedby":s.ariaDescribedBy,onChange:o[0]||(o[0]=(...r)=>s.onFileInput&&s.onFileInput(...r))},null,40,m),o[5]||(o[5]=e.createStaticVNode('<svg class="vs-upload__dropzone-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg><span class="vs-upload__dropzone-text">Choose a file or drag and drop here</span>',2))],34),a.modelValue&&a.modelValue.length?(e.openBlock(),e.createElementBlock("ul",_,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.modelValue,(r,c)=>(e.openBlock(),e.createElementBlock("li",{key:`${r.name}-${c}`,class:"vs-upload__file-item"},[e.createElementVNode("span",{class:"vs-upload__file-icon","aria-hidden":"true",innerHTML:s.getFileIconSvg(r.name)},null,8,x),e.createElementVNode("span",{class:"vs-upload__file-name",title:r.name},e.toDisplayString(r.name),9,b),e.createElementVNode("span",y,e.toDisplayString(s.formatSize(r.size)),1),e.createElementVNode("button",{type:"button",class:"vs-upload__remove","aria-label":`Remove ${r.name}`,disabled:a.disabled,onClick:e.withModifiers(C=>s.removeFile(c),["stop"])},[...o[6]||(o[6]=[e.createStaticVNode('<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"></path><path d="M10 11v6"></path><path d="M14 11v6"></path><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"></path></svg>',1)])],8,z)]))),128))])):e.createCommentVNode("",!0),a.message?(e.openBlock(),e.createElementBlock("span",{key:3,class:e.normalizeClass(["vs-upload__message",`vs-upload__message--${a.validation}`]),id:`${n.inputId}-message`},e.toDisplayString(a.message),11,k)):e.createCommentVNode("",!0)],2)}const d=u(g,[["render",w]]),V={install(l){l.component("VsUpload",d)}};i.default=d,i.plugin=V,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
|
1
|
+
(function(){"use strict";try{if(typeof document<"u"){var o=document.createElement("style");o.id="vs-upload-styles",o.appendChild(document.createTextNode("[data-theme=dark] .vs-upload,.dark .vs-upload{--vs-upload-label-color: #b0b8c1;--vs-upload-hint-color: #8090a2;--vs-upload-dropzone-border: #3a4553;--vs-upload-dropzone-bg: #1a1f26;--vs-upload-dropzone-color: #4b9fea;--vs-upload-dropzone-border-dragging: #42a5f5;--vs-upload-dropzone-bg-dragging: #1a2535;--vs-upload-file-border: #2a3038;--vs-upload-file-bg: #1a1f26;--vs-upload-file-color: #b0b8c1;--vs-upload-file-size-color: #5a6472;--vs-upload-remove-color: #e05252;--vs-upload-remove-hover-color: #cc3340}.vs-upload{--vs-upload-label-color: #2f3941;--vs-upload-hint-color: #68737d;--vs-upload-dropzone-border: #d8dcde;--vs-upload-dropzone-bg: #ffffff;--vs-upload-dropzone-color: #1f73b7;--vs-upload-dropzone-border-dragging: #1f73b7;--vs-upload-dropzone-bg-dragging: #eaf4ff;--vs-upload-file-border: #e9ebed;--vs-upload-file-bg: #ffffff;--vs-upload-file-color: #2f3941;--vs-upload-file-size-color: #87929d;--vs-upload-remove-color: #cc3340;--vs-upload-remove-hover-color: #8c232c;--vs-upload-error-color: #cc3340;--vs-upload-warning-color: #ad5918;--vs-upload-success-color: #186146;--vs-upload-border-radius: 4px;display:flex;flex-direction:column;font-family:inherit}.vs-upload__label{display:inline-block;margin-bottom:8px;font-size:14px;font-weight:600;color:var(--vs-upload-label-color);line-height:1.4;cursor:default}.vs-upload__hint{margin:-8px 0 8px;font-size:13px;color:var(--vs-upload-hint-color);line-height:1.4}.vs-upload__dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:28px 20px;border:2px dashed var(--vs-upload-dropzone-border);border-radius:var(--vs-upload-border-radius);background:var(--vs-upload-dropzone-bg);color:var(--vs-upload-dropzone-color);cursor:pointer;transition:border-color .2s ease,background .2s ease}.vs-upload__dropzone:hover,.vs-upload__dropzone--dragging{border-color:var(--vs-upload-dropzone-border-dragging);background:var(--vs-upload-dropzone-bg-dragging)}.vs-upload__input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.vs-upload__dropzone-icon{flex-shrink:0}.vs-upload__dropzone-text{font-size:14px;font-weight:500;text-align:center;line-height:1.4}.vs-upload__file-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}.vs-upload__file-item{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--vs-upload-file-border);border-radius:var(--vs-upload-border-radius);background:var(--vs-upload-file-bg);color:var(--vs-upload-file-color)}.vs-upload__file-icon{flex-shrink:0;color:var(--vs-upload-hint-color);display:flex}.vs-upload__file-name{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.vs-upload__file-size{font-size:12px;color:var(--vs-upload-file-size-color);flex-shrink:0}.vs-upload__remove{display:flex;align-items:center;margin-left:4px;background:none;border:none;cursor:pointer;color:var(--vs-upload-remove-color);border-radius:2px;transition:color .15s ease}.vs-upload__remove:hover:not(:disabled){color:var(--vs-upload-remove-hover-color)}.vs-upload__remove:disabled{opacity:.4;cursor:not-allowed}.vs-upload__remove-icon{display:flex;width:15px;height:15px}.vs-upload__message{margin:6px 0 0;font-size:12px;line-height:1.4;color:var(--vs-upload-hint-color)}.vs-upload__message--error{color:var(--vs-upload-error-color)}.vs-upload__message--warning{color:var(--vs-upload-warning-color)}.vs-upload__message--success{color:var(--vs-upload-success-color)}.vs-upload--error .vs-upload__dropzone{border-color:var(--vs-upload-error-color)}.vs-upload--warning .vs-upload__dropzone{border-color:var(--vs-upload-warning-color)}.vs-upload--success .vs-upload__dropzone{border-color:var(--vs-upload-success-color)}.vs-upload--compact .vs-upload__dropzone{padding:14px 16px;flex-direction:row;gap:8px}.vs-upload--compact .vs-upload__dropzone .vs-upload__dropzone-icon{width:16px;height:16px}.vs-upload--compact .vs-upload__dropzone .vs-upload__dropzone-text{font-size:13px}.vs-upload--compact .vs-upload__file-item{padding:6px 10px}.vs-upload--compact .vs-upload__file-name{font-size:13px}.vs-upload--disabled .vs-upload__dropzone{opacity:.6;cursor:not-allowed}.vs-upload--disabled .vs-upload__dropzone:hover{border-color:var(--vs-upload-dropzone-border);background:var(--vs-upload-dropzone-bg)}")),document.head.appendChild(o)}}catch(r){console.error("vite-plugin-css-injected-by-js",r)}})();
|
|
2
|
+
(function(a,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(a=typeof globalThis<"u"?globalThis:a||self,e(a.VsUpload={},a.Vue))})(this,function(a,e){"use strict";const M="",p=(t,i)=>{const n=t.__vccOpts||t;for(const[d,o]of i)n[d]=o;return n};let g=0;const h={name:"VsUpload",inheritAttrs:!1,props:{modelValue:{type:Array,default:()=>[]},label:{type:String},hint:{type:String},accept:{type:String},multiple:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},isCompact:{type:Boolean,default:!1},validation:{type:String,validator:t=>["success","warning","error"].includes(t)},message:{type:String}},emits:["update:modelValue","change","reject"],data(){return{inputId:`vs-upload-${++g}`,isDragging:!1}},computed:{containerClass(){return{"vs-upload--disabled":this.disabled,"vs-upload--compact":this.isCompact,[`vs-upload--${this.validation}`]:!!this.validation}},ariaDescribedBy(){const t=[];return this.hint&&t.push(`${this.inputId}-hint`),this.message&&t.push(`${this.inputId}-message`),t.length?t.join(" "):void 0}},methods:{openFilePicker(){this.disabled||this.$refs.fileInput.click()},onDragOver(){this.disabled||(this.isDragging=!0)},onDragLeave(){this.isDragging=!1},onDrop(t){this.isDragging=!1,!this.disabled&&this.addFiles(t.dataTransfer.files)},onFileInput(t){this.addFiles(t.target.files),t.target.value=""},addFiles(t){if(!t||!t.length)return;const i=Array.from(t),n=this.multiple?[...this.modelValue||[],...i]:[i[0]];this.$emit("update:modelValue",n),this.$emit("change",n)},removeFile(t){const i=[...this.modelValue||[]];i.splice(t,1),this.$emit("update:modelValue",i),this.$emit("change",i)},getRemoveIconSvg(){return'<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6" /><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" /><path d="M10 11v6" /><path d="M14 11v6" /><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" /></svg>'},getFileIconSvg(t){const i=(t.split(".").pop()||"").toLowerCase(),n='xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"';return["jpg","jpeg","png","gif","webp","svg","bmp","ico"].includes(i)?`<svg ${n}><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>`:["mp4","mov","avi","mkv","webm"].includes(i)?`<svg ${n}><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>`:["mp3","wav","ogg","flac","aac"].includes(i)?`<svg ${n}><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>`:i==="pdf"?`<svg ${n}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>`:["zip","rar","tar","gz","7z"].includes(i)?'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16" aria-hidden="true" data-garden-id="forms.file.icon" data-garden-version="9.12.6" class="StyledBaseIcon-sc-1moykgb-0 StyledFileIcon-sc-7b3q0c-0 eWlVPJ goYdHe"><path fill="none" stroke="currentColor" stroke-linecap="round" d="M6.5.5v11M5 2.5h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m0 1H8m-3 1h1.5m8-6.3V15c0 .28-.22.5-.5.5H2c-.28 0-.5-.22-.5-.5V1c0-.28.22-.5.5-.5h8.85c.13 0 .26.05.36.15l3.15 3.2c.09.1.14.22.14.35zm-4-3.7V4c0 .28.22.5.5.5h3.5"></path></svg>':["xls","xlsx","csv"].includes(i)?`<svg ${n}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="8" y1="13" x2="16" y2="13"/><line x1="8" y1="17" x2="16" y2="17"/><line x1="8" y1="9" x2="10" y2="9"/></svg>`:["ppt","pptx"].includes(i)?`<svg ${n}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><path d="M8 13h5a2 2 0 0 0 0-4H8v8"/></svg>`:["js","ts","jsx","tsx","html","css","scss","json","xml","py","rb","go","java","php","c","cpp","cs","sh","yml","yaml","md"].includes(i)?`<svg ${n}><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>`:["txt","doc","docx","rtf"].includes(i)?`<svg ${n}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>`:`<svg ${n}><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><polyline points="13 2 13 9 20 9"/></svg>`},formatSize(t){return t===0?"0 B":t<1024?`${t} B`:t<1024*1024?`${(t/1024).toFixed(1)} KB`:`${(t/(1024*1024)).toFixed(1)} MB`}}},u=["for"],m=["id"],f=["id","accept","multiple","disabled","aria-describedby"],v={key:2,class:"vs-upload__file-list",role:"list"},y=["innerHTML"],_=["title"],x={class:"vs-upload__file-size"},k=["aria-label","disabled","onClick"],w=["innerHTML"],V=["id"];function b(t,i,n,d,o,l){return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["vs-upload",l.containerClass])},[n.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:o.inputId,class:"vs-upload__label"},e.toDisplayString(n.label),9,u)):e.createCommentVNode("",!0),n.hint?(e.openBlock(),e.createElementBlock("span",{key:1,class:"vs-upload__hint",id:`${o.inputId}-hint`},e.toDisplayString(n.hint),9,m)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["vs-upload__dropzone",{"vs-upload__dropzone--dragging":o.isDragging}]),onDragover:i[1]||(i[1]=e.withModifiers((...s)=>l.onDragOver&&l.onDragOver(...s),["prevent"])),onDragleave:i[2]||(i[2]=e.withModifiers((...s)=>l.onDragLeave&&l.onDragLeave(...s),["prevent"])),onDrop:i[3]||(i[3]=e.withModifiers((...s)=>l.onDrop&&l.onDrop(...s),["prevent"])),onClick:i[4]||(i[4]=(...s)=>l.openFilePicker&&l.openFilePicker(...s))},[e.createElementVNode("input",{id:o.inputId,ref:"fileInput",type:"file",class:"vs-upload__input",accept:n.accept,multiple:n.multiple,disabled:n.disabled,"aria-describedby":l.ariaDescribedBy,onChange:i[0]||(i[0]=(...s)=>l.onFileInput&&l.onFileInput(...s))},null,40,f),i[5]||(i[5]=e.createStaticVNode('<svg class="vs-upload__dropzone-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg><span class="vs-upload__dropzone-text">Choose a file or drag and drop here</span>',2))],34),n.modelValue&&n.modelValue.length?(e.openBlock(),e.createElementBlock("ul",v,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.modelValue,(s,c)=>(e.openBlock(),e.createElementBlock("li",{key:`${s.name}-${c}`,class:"vs-upload__file-item"},[e.createElementVNode("span",{class:"vs-upload__file-icon","aria-hidden":"true",innerHTML:l.getFileIconSvg(s.name)},null,8,y),e.createElementVNode("span",{class:"vs-upload__file-name",title:s.name},e.toDisplayString(s.name),9,_),e.createElementVNode("span",x,e.toDisplayString(l.formatSize(s.size)),1),e.createElementVNode("button",{type:"button",class:"vs-upload__remove","aria-label":`Remove ${s.name}`,disabled:n.disabled,onClick:e.withModifiers(D=>l.removeFile(c),["stop"])},[e.createElementVNode("span",{class:"vs-upload__remove-icon","aria-hidden":"true",innerHTML:l.getRemoveIconSvg()},null,8,w)],8,k)]))),128))])):e.createCommentVNode("",!0),n.message?(e.openBlock(),e.createElementBlock("span",{key:3,class:e.normalizeClass(["vs-upload__message",`vs-upload__message--${n.validation}`]),id:`${o.inputId}-message`},e.toDisplayString(n.message),11,V)):e.createCommentVNode("",!0)],2)}const r=p(h,[["render",b]]),B={install(t){t.component("VsUpload",r)}};a.default=r,a.plugin=B,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vuesimple/vs-upload",
|
|
3
|
-
"version": "3.1.
|
|
3
|
+
"version": "3.1.7",
|
|
4
4
|
"description": "A simple vue file upload component with drag-and-drop support.",
|
|
5
5
|
"main": "dist/index.umd.js",
|
|
6
6
|
"module": "dist/index.esm.js",
|
|
@@ -37,5 +37,6 @@
|
|
|
37
37
|
"bugs": {
|
|
38
38
|
"url": "https://github.com/ashwinkshenoy/vue-simple/issues"
|
|
39
39
|
},
|
|
40
|
-
"homepage": "https://github.com/ashwinkshenoy/vue-simple"
|
|
40
|
+
"homepage": "https://github.com/ashwinkshenoy/vue-simple",
|
|
41
|
+
"gitHead": "2002c260f34ce422b53c85326fbac4ae675a5cb5"
|
|
41
42
|
}
|
package/src/vs-upload.vue
CHANGED
|
@@ -67,25 +67,7 @@
|
|
|
67
67
|
:disabled="disabled"
|
|
68
68
|
@click.stop="removeFile(index)"
|
|
69
69
|
>
|
|
70
|
-
|
|
71
|
-
<svg
|
|
72
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
73
|
-
width="15"
|
|
74
|
-
height="15"
|
|
75
|
-
viewBox="0 0 24 24"
|
|
76
|
-
fill="none"
|
|
77
|
-
stroke="currentColor"
|
|
78
|
-
stroke-width="1.5"
|
|
79
|
-
stroke-linecap="round"
|
|
80
|
-
stroke-linejoin="round"
|
|
81
|
-
aria-hidden="true"
|
|
82
|
-
>
|
|
83
|
-
<polyline points="3 6 5 6 21 6" />
|
|
84
|
-
<path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
|
|
85
|
-
<path d="M10 11v6" />
|
|
86
|
-
<path d="M14 11v6" />
|
|
87
|
-
<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
|
|
88
|
-
</svg>
|
|
70
|
+
<span class="vs-upload__remove-icon" aria-hidden="true" v-html="getRemoveIconSvg()"></span>
|
|
89
71
|
</button>
|
|
90
72
|
</li>
|
|
91
73
|
</ul>
|
|
@@ -215,6 +197,10 @@
|
|
|
215
197
|
this.$emit('change', updated);
|
|
216
198
|
},
|
|
217
199
|
|
|
200
|
+
getRemoveIconSvg() {
|
|
201
|
+
return `<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="3 6 5 6 21 6" /><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" /><path d="M10 11v6" /><path d="M14 11v6" /><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" /></svg>`;
|
|
202
|
+
},
|
|
203
|
+
|
|
218
204
|
getFileIconSvg(filename) {
|
|
219
205
|
const ext = (filename.split('.').pop() || '').toLowerCase();
|
|
220
206
|
const base = `xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"`;
|
|
@@ -425,6 +411,7 @@
|
|
|
425
411
|
&__file-icon {
|
|
426
412
|
flex-shrink: 0;
|
|
427
413
|
color: var(--vs-upload-hint-color);
|
|
414
|
+
display: flex;
|
|
428
415
|
}
|
|
429
416
|
|
|
430
417
|
&__file-name {
|
|
@@ -462,6 +449,12 @@
|
|
|
462
449
|
}
|
|
463
450
|
}
|
|
464
451
|
|
|
452
|
+
&__remove-icon {
|
|
453
|
+
display: flex;
|
|
454
|
+
width: 15px;
|
|
455
|
+
height: 15px;
|
|
456
|
+
}
|
|
457
|
+
|
|
465
458
|
&__message {
|
|
466
459
|
margin: 6px 0 0;
|
|
467
460
|
font-size: 12px;
|