@vuesimple/vs-upload 3.1.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Ashwin K Shenoy
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,104 @@
+# Vue Simple Upload
+
+#### 📁 A simple vue file upload component with drag-and-drop support.
+
+A light weight vue plugin built groundup.
+
+[![npm](https://img.shields.io/npm/v/@vuesimple/vs-upload.svg)](https://www.npmjs.com/package/@vuesimple/vs-upload)
+[![npm](https://img.shields.io/npm/dt/@vuesimple/vs-upload.svg)](https://img.shields.io/npm/dt/@vuesimple/vs-upload.svg)
+<br />
+
+![forthebadge](https://forthebadge.com/images/badges/made-with-vue.svg)
+![forthebadge](https://forthebadge.com/images/badges/made-with-javascript.svg)
+![forthebadge](https://forthebadge.com/images/badges/built-with-love.svg)
+
+<br />
+
+### 📺 Live Demo
+
+Demo: [Link](https://vuesimple.netlify.app)
+
+<br />
+
+## Usage
+
+```html
+<template>
+  <vs-upload v-model="files" label="Upload a file" multiple />
+</template>
+
+<script>
+  import VsUpload from '@vuesimple/vs-upload';
+
+  export default {
+    components: { VsUpload },
+    data() {
+      return { files: [] };
+    },
+  };
+</script>
+```
+
+<br />
+
+## CDN
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@vuesimple/vs-upload@<version>/dist/index.min.js"></script>
+```
+
+```javascript
+// Main/Entry file
+app.use(VsUpload.plugin);
+```
+
+```html
+<template>
+  <vs-upload v-model="files" />
+</template>
+```
+
+<br />
+
+## Props
+
+| Name       | Type    | Default | Options                       | Description                                 |
+| ---------- | ------- | ------- | ----------------------------- | ------------------------------------------- |
+| modelValue | Array   | `[]`    | —                             | v-model binding; array of `File` objects    |
+| label      | String  | —       | —                             | Label displayed above the dropzone          |
+| hint       | String  | —       | —                             | Hint text displayed below the label         |
+| accept     | String  | —       | Any valid MIME type or ext    | Restricts the accepted file types           |
+| multiple   | Boolean | `false` | —                             | Allows selecting multiple files             |
+| disabled   | Boolean | `false` | —                             | Disables the component                      |
+| validation | String  | —       | `success`, `warning`, `error` | Applies a validation state to the dropzone  |
+| message    | String  | —       | —                             | Validation message shown below the dropzone |
+
+<br />
+
+## Emits
+
+| Event               | Payload  | Description                                       |
+| ------------------- | -------- | ------------------------------------------------- |
+| `update:modelValue` | `File[]` | Emitted when files are added or removed (v-model) |
+| `change`            | `File[]` | Emitted when the file list changes                |
+| `reject`            | —        | Reserved for future file-rejection callbacks      |
+
+<br />
+
+## CSS Variables
+
+| Variable                               | Default   | Description                     |
+| -------------------------------------- | --------- | ------------------------------- |
+| `--vs-upload-label-color`              | `#2f3941` | Label text color                |
+| `--vs-upload-hint-color`               | `#68737d` | Hint text color                 |
+| `--vs-upload-dropzone-border`          | `#d8dcde` | Dropzone border color           |
+| `--vs-upload-dropzone-bg`              | `#ffffff` | Dropzone background             |
+| `--vs-upload-dropzone-color`           | `#1f73b7` | Dropzone icon and text color    |
+| `--vs-upload-dropzone-border-dragging` | `#1f73b7` | Border color when dragging over |
+| `--vs-upload-dropzone-bg-dragging`     | `#eaf4ff` | Background when dragging over   |
+| `--vs-upload-file-border`              | `#e9ebed` | File item border color          |
+| `--vs-upload-file-bg`                  | `#ffffff` | File item background            |
+| `--vs-upload-file-color`               | `#2f3941` | File item text color            |
+| `--vs-upload-file-size-color`          | `#87929d` | File size text color            |
+| `--vs-upload-remove-color`             | `#cc3340` | Remove button color             |
+| `--vs-upload-remove-hover-color`       | `#8c232c` | Remove button hover color       |

package/build/vite.config.js

@@ -0,0 +1,31 @@
+import vue from '@vitejs/plugin-vue';
+import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
+
+export default {
+  plugins: [vue(), cssInjectedByJsPlugin()],
+  build: {
+    cssCodeSplit: true,
+    lib: {
+      entry: './src/index.js',
+      formats: ['es', 'umd', 'iife'],
+      name: 'VsUpload',
+      fileName: format => {
+        if (format === 'es') {
+          return 'index.esm.js';
+        }
+        if (format === 'umd') {
+          return 'index.umd.js';
+        }
+        return 'index.min.js';
+      },
+    },
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+};

package/dist/index.esm.js

@@ -0,0 +1,203 @@
+(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)}})();
+import { openBlock as a, createElementBlock as o, normalizeClass as c, toDisplayString as d, createCommentVNode as p, createElementVNode as r, withModifiers as u, createStaticVNode as v, Fragment as m, renderList as y } from "vue";
+const f = (t, e) => {
+  const i = t.__vccOpts || t;
+  for (const [g, n] of e)
+    i[g] = n;
+  return i;
+};
+let _ = 0;
+const x = {
+  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-${++_}`,
+      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 e = Array.from(t), i = this.multiple ? [...this.modelValue || [], ...e] : [e[0]];
+      this.$emit("update:modelValue", i), this.$emit("change", i);
+    },
+    removeFile(t) {
+      const e = [...this.modelValue || []];
+      e.splice(t, 1), this.$emit("update:modelValue", e), this.$emit("change", e);
+    },
+    getFileIconSvg(t) {
+      const e = (t.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"';
+      return ["jpg", "jpeg", "png", "gif", "webp", "svg", "bmp", "ico"].includes(e) ? `<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(e) ? `<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(e) ? `<svg ${i}><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>` : e === "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(e) ? '<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(e) ? `<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(e) ? `<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>` : [
+        "js",
+        "ts",
+        "jsx",
+        "tsx",
+        "html",
+        "css",
+        "scss",
+        "json",
+        "xml",
+        "py",
+        "rb",
+        "go",
+        "java",
+        "php",
+        "c",
+        "cpp",
+        "cs",
+        "sh",
+        "yml",
+        "yaml",
+        "md"
+      ].includes(e) ? `<svg ${i}><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>` : ["txt", "doc", "docx", "rtf"].includes(e) ? `<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>`;
+    },
+    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`;
+    }
+  }
+}, w = ["for"], k = ["id"], b = ["id", "accept", "multiple", "disabled", "aria-describedby"], V = {
+  key: 2,
+  class: "vs-upload__file-list",
+  role: "list"
+}, D = ["innerHTML"], z = ["title"], M = { class: "vs-upload__file-size" }, C = ["aria-label", "disabled", "onClick"], F = ["id"];
+function B(t, e, i, g, n, l) {
+  return a(), o("div", {
+    class: c(["vs-upload", l.containerClass])
+  }, [
+    i.label ? (a(), o("label", {
+      key: 0,
+      for: n.inputId,
+      class: "vs-upload__label"
+    }, d(i.label), 9, w)) : p("", !0),
+    i.hint ? (a(), o("span", {
+      key: 1,
+      class: "vs-upload__hint",
+      id: `${n.inputId}-hint`
+    }, d(i.hint), 9, k)) : p("", !0),
+    r("div", {
+      class: c(["vs-upload__dropzone", { "vs-upload__dropzone--dragging": n.isDragging }]),
+      onDragover: e[1] || (e[1] = u((...s) => l.onDragOver && l.onDragOver(...s), ["prevent"])),
+      onDragleave: e[2] || (e[2] = u((...s) => l.onDragLeave && l.onDragLeave(...s), ["prevent"])),
+      onDrop: e[3] || (e[3] = u((...s) => l.onDrop && l.onDrop(...s), ["prevent"])),
+      onClick: e[4] || (e[4] = (...s) => l.openFilePicker && l.openFilePicker(...s))
+    }, [
+      r("input", {
+        id: n.inputId,
+        ref: "fileInput",
+        type: "file",
+        class: "vs-upload__input",
+        accept: i.accept,
+        multiple: i.multiple,
+        disabled: i.disabled,
+        "aria-describedby": l.ariaDescribedBy,
+        onChange: e[0] || (e[0] = (...s) => l.onFileInput && l.onFileInput(...s))
+      }, null, 40, b),
+      e[5] || (e[5] = v('<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),
+    i.modelValue && i.modelValue.length ? (a(), o("ul", V, [
+      (a(!0), o(m, null, y(i.modelValue, (s, h) => (a(), o("li", {
+        key: `${s.name}-${h}`,
+        class: "vs-upload__file-item"
+      }, [
+        r("span", {
+          class: "vs-upload__file-icon",
+          "aria-hidden": "true",
+          innerHTML: l.getFileIconSvg(s.name)
+        }, null, 8, D),
+        r("span", {
+          class: "vs-upload__file-name",
+          title: s.name
+        }, d(s.name), 9, z),
+        r("span", M, d(l.formatSize(s.size)), 1),
+        r("button", {
+          type: "button",
+          class: "vs-upload__remove",
+          "aria-label": `Remove ${s.name}`,
+          disabled: i.disabled,
+          onClick: u((I) => l.removeFile(h), ["stop"])
+        }, [...e[6] || (e[6] = [
+          v('<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, C)
+      ]))), 128))
+    ])) : p("", !0),
+    i.message ? (a(), o("span", {
+      key: 3,
+      class: c(["vs-upload__message", `vs-upload__message--${i.validation}`]),
+      id: `${n.inputId}-message`
+    }, d(i.message), 11, F)) : p("", !0)
+  ], 2);
+}
+const H = /* @__PURE__ */ f(x, [["render", B]]), j = {
+  install(t) {
+    t.component("VsUpload", H);
+  }
+};
+export {
+  H as default,
+  j as plugin
+};

package/dist/index.min.js

@@ -0,0 +1,3 @@
+(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)}})();
+var VsUpload=function(t,e){"use strict";var d=document.createElement("style");d.textContent=`[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(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);

package/dist/index.umd.js

@@ -0,0 +1,3 @@
+(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)}})();
+(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.VsUpload={},i.Vue))})(this,function(i,e){"use strict";var t=document.createElement("style");t.textContent=`[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(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"}})});

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@vuesimple/vs-upload",
+  "version": "3.1.6",
+  "description": "A simple vue file upload component with drag-and-drop support.",
+  "main": "dist/index.umd.js",
+  "module": "dist/index.esm.js",
+  "unpkg": "dist/index.min.js",
+  "jsdelivr": "dist/index.min.js",
+  "scripts": {
+    "build": "rm -rfv dist && vite build --config build/vite.config.js"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.2.3",
+    "sass": "^1.54.4",
+    "vite": "^4.4.5",
+    "vue": "^3.2.37"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ashwinkshenoy/vue-simple.git"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "keywords": [
+    "vue",
+    "vuejs",
+    "upload",
+    "file-upload",
+    "drag-drop",
+    "vs-upload",
+    "vue-upload"
+  ],
+  "author": "Ashwin Shenoy <ashwinkshenoy@gmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ashwinkshenoy/vue-simple/issues"
+  },
+  "homepage": "https://github.com/ashwinkshenoy/vue-simple"
+}

package/src/index.js

@@ -0,0 +1,10 @@
+import VsUpload from './vs-upload.vue';
+
+const plugin = {
+  install(Vue) {
+    Vue.component('VsUpload', VsUpload);
+  },
+};
+
+export default VsUpload;
+export { plugin };

package/src/vs-upload.vue

@@ -0,0 +1,536 @@
+<template>
+  <div :class="['vs-upload', containerClass]">
+    <!-- Label -->
+    <label v-if="label" :for="inputId" class="vs-upload__label">
+      {{ label }}
+    </label>
+
+    <!-- Hint -->
+    <span v-if="hint" class="vs-upload__hint" :id="`${inputId}-hint`">{{ hint }}</span>
+
+    <!-- Dropzone -->
+    <div
+      class="vs-upload__dropzone"
+      :class="{ 'vs-upload__dropzone--dragging': isDragging }"
+      @dragover.prevent="onDragOver"
+      @dragleave.prevent="onDragLeave"
+      @drop.prevent="onDrop"
+      @click="openFilePicker"
+    >
+      <input
+        :id="inputId"
+        ref="fileInput"
+        type="file"
+        class="vs-upload__input"
+        :accept="accept"
+        :multiple="multiple"
+        :disabled="disabled"
+        :aria-describedby="ariaDescribedBy"
+        @change="onFileInput"
+      />
+
+      <!-- Upload icon -->
+      <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" />
+        <polyline points="17 8 12 3 7 8" />
+        <line x1="12" y1="3" x2="12" y2="15" />
+      </svg>
+
+      <span class="vs-upload__dropzone-text">Choose a file or drag and drop here</span>
+    </div>
+
+    <!-- File list -->
+    <ul v-if="modelValue && modelValue.length" class="vs-upload__file-list" role="list">
+      <li v-for="(file, index) in modelValue" :key="`${file.name}-${index}`" class="vs-upload__file-item">
+        <!-- File icon (type-aware) -->
+        <span class="vs-upload__file-icon" aria-hidden="true" v-html="getFileIconSvg(file.name)"></span>
+
+        <span class="vs-upload__file-name" :title="file.name">{{ file.name }}</span>
+        <span class="vs-upload__file-size">{{ formatSize(file.size) }}</span>
+
+        <button
+          type="button"
+          class="vs-upload__remove"
+          :aria-label="`Remove ${file.name}`"
+          :disabled="disabled"
+          @click.stop="removeFile(index)"
+        >
+          <!-- Trash icon -->
+          <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>
+        </button>
+      </li>
+    </ul>
+
+    <!-- Validation message -->
+    <span
+      v-if="message"
+      class="vs-upload__message"
+      :class="`vs-upload__message--${validation}`"
+      :id="`${inputId}-message`"
+    >
+      {{ message }}
+    </span>
+  </div>
+</template>
+
+<script>
+  let idCounter = 0;
+
+  export default {
+    name: 'VsUpload',
+
+    inheritAttrs: false,
+
+    props: {
+      modelValue: {
+        type: Array,
+        default: () => [],
+      },
+      label: {
+        type: String,
+      },
+      hint: {
+        type: String,
+      },
+      accept: {
+        type: String,
+      },
+      multiple: {
+        type: Boolean,
+        default: false,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      isCompact: {
+        type: Boolean,
+        default: false,
+      },
+      validation: {
+        type: String,
+        validator: val => ['success', 'warning', 'error'].includes(val),
+      },
+      message: {
+        type: String,
+      },
+    },
+
+    emits: ['update:modelValue', 'change', 'reject'],
+
+    data() {
+      return {
+        inputId: `vs-upload-${++idCounter}`,
+        isDragging: false,
+      };
+    },
+
+    computed: {
+      containerClass() {
+        return {
+          'vs-upload--disabled': this.disabled,
+          'vs-upload--compact': this.isCompact,
+          [`vs-upload--${this.validation}`]: !!this.validation,
+        };
+      },
+
+      ariaDescribedBy() {
+        const ids = [];
+        if (this.hint) ids.push(`${this.inputId}-hint`);
+        if (this.message) ids.push(`${this.inputId}-message`);
+        return ids.length ? ids.join(' ') : undefined;
+      },
+    },
+
+    methods: {
+      openFilePicker() {
+        if (!this.disabled) {
+          this.$refs.fileInput.click();
+        }
+      },
+
+      onDragOver() {
+        if (!this.disabled) {
+          this.isDragging = true;
+        }
+      },
+
+      onDragLeave() {
+        this.isDragging = false;
+      },
+
+      onDrop(event) {
+        this.isDragging = false;
+        if (this.disabled) return;
+        this.addFiles(event.dataTransfer.files);
+      },
+
+      onFileInput(event) {
+        this.addFiles(event.target.files);
+        // Reset so the same file can be selected again
+        event.target.value = '';
+      },
+
+      addFiles(fileList) {
+        if (!fileList || !fileList.length) return;
+        const incoming = Array.from(fileList);
+        const updated = this.multiple ? [...(this.modelValue || []), ...incoming] : [incoming[0]];
+        this.$emit('update:modelValue', updated);
+        this.$emit('change', updated);
+      },
+
+      removeFile(index) {
+        const updated = [...(this.modelValue || [])];
+        updated.splice(index, 1);
+        this.$emit('update:modelValue', updated);
+        this.$emit('change', updated);
+      },
+
+      getFileIconSvg(filename) {
+        const ext = (filename.split('.').pop() || '').toLowerCase();
+        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"`;
+
+        // Image: jpg, jpeg, png, gif, webp, svg, bmp, ico
+        if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'ico'].includes(ext)) {
+          return `<svg ${base}><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>`;
+        }
+        // Video: mp4, mov, avi, mkv, webm
+        if (['mp4', 'mov', 'avi', 'mkv', 'webm'].includes(ext)) {
+          return `<svg ${base}><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2"/></svg>`;
+        }
+        // Audio: mp3, wav, ogg, flac, aac
+        if (['mp3', 'wav', 'ogg', 'flac', 'aac'].includes(ext)) {
+          return `<svg ${base}><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>`;
+        }
+        // PDF
+        if (ext === 'pdf') {
+          return `<svg ${base}><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>`;
+        }
+        // Archive: zip, rar, tar, gz, 7z
+        if (['zip', 'rar', 'tar', 'gz', '7z'].includes(ext)) {
+          return `<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>`;
+        }
+        // Spreadsheet: xls, xlsx, csv
+        if (['xls', 'xlsx', 'csv'].includes(ext)) {
+          return `<svg ${base}><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>`;
+        }
+        // Presentation: ppt, pptx
+        if (['ppt', 'pptx'].includes(ext)) {
+          return `<svg ${base}><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>`;
+        }
+        // Code: js, ts, jsx, tsx, html, css, scss, json, xml, py, rb, go, java, php, etc.
+        if (
+          [
+            'js',
+            'ts',
+            'jsx',
+            'tsx',
+            'html',
+            'css',
+            'scss',
+            'json',
+            'xml',
+            'py',
+            'rb',
+            'go',
+            'java',
+            'php',
+            'c',
+            'cpp',
+            'cs',
+            'sh',
+            'yml',
+            'yaml',
+            'md',
+          ].includes(ext)
+        ) {
+          return `<svg ${base}><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>`;
+        }
+        // Text / doc: txt, doc, docx, rtf
+        if (['txt', 'doc', 'docx', 'rtf'].includes(ext)) {
+          return `<svg ${base}><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>`;
+        }
+        // Default: generic file with corner-fold
+        return `<svg ${base}><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(bytes) {
+        if (bytes === 0) return '0 B';
+        if (bytes < 1024) return `${bytes} B`;
+        if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+      },
+    },
+  };
+</script>
+
+<style lang="scss">
+  $el: '.vs-upload';
+
+  [data-theme='dark'],
+  .dark {
+    #{$el} {
+      --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;
+    }
+  }
+
+  #{$el} {
+    --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;
+
+    &__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;
+    }
+
+    &__hint {
+      margin: -8px 0 8px;
+      font-size: 13px;
+      color: var(--vs-upload-hint-color);
+      line-height: 1.4;
+    }
+
+    &__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 0.2s ease,
+        background 0.2s ease;
+
+      &:hover {
+        border-color: var(--vs-upload-dropzone-border-dragging);
+        background: var(--vs-upload-dropzone-bg-dragging);
+      }
+
+      &--dragging {
+        border-color: var(--vs-upload-dropzone-border-dragging);
+        background: var(--vs-upload-dropzone-bg-dragging);
+      }
+    }
+
+    &__input {
+      position: absolute;
+      width: 0;
+      height: 0;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    &__dropzone-icon {
+      flex-shrink: 0;
+    }
+
+    &__dropzone-text {
+      font-size: 14px;
+      font-weight: 500;
+      text-align: center;
+      line-height: 1.4;
+    }
+
+    &__file-list {
+      list-style: none;
+      margin: 8px 0 0;
+      padding: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    &__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);
+    }
+
+    &__file-icon {
+      flex-shrink: 0;
+      color: var(--vs-upload-hint-color);
+    }
+
+    &__file-name {
+      flex: 1;
+      font-size: 14px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &__file-size {
+      font-size: 12px;
+      color: var(--vs-upload-file-size-color);
+      flex-shrink: 0;
+    }
+
+    &__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 0.15s ease;
+
+      &:hover:not(:disabled) {
+        color: var(--vs-upload-remove-hover-color);
+      }
+
+      &:disabled {
+        opacity: 0.4;
+        cursor: not-allowed;
+      }
+    }
+
+    &__message {
+      margin: 6px 0 0;
+      font-size: 12px;
+      line-height: 1.4;
+      color: var(--vs-upload-hint-color);
+
+      &--error {
+        color: var(--vs-upload-error-color);
+      }
+
+      &--warning {
+        color: var(--vs-upload-warning-color);
+      }
+
+      &--success {
+        color: var(--vs-upload-success-color);
+      }
+    }
+
+    // Validation state borders on dropzone
+    &--error #{$el}__dropzone {
+      border-color: var(--vs-upload-error-color);
+    }
+
+    &--warning #{$el}__dropzone {
+      border-color: var(--vs-upload-warning-color);
+    }
+
+    &--success #{$el}__dropzone {
+      border-color: var(--vs-upload-success-color);
+    }
+
+    // Compact mode — smaller dropzone, tighter file items
+    &--compact {
+      #{$el}__dropzone {
+        padding: 14px 16px;
+        flex-direction: row;
+        gap: 8px;
+
+        #{$el}__dropzone-icon {
+          width: 16px;
+          height: 16px;
+        }
+
+        #{$el}__dropzone-text {
+          font-size: 13px;
+        }
+      }
+
+      #{$el}__file-item {
+        padding: 6px 10px;
+      }
+
+      #{$el}__file-name {
+        font-size: 13px;
+      }
+    }
+
+    // Disabled state
+    &--disabled {
+      #{$el}__dropzone {
+        opacity: 0.6;
+        cursor: not-allowed;
+
+        &:hover {
+          border-color: var(--vs-upload-dropzone-border);
+          background: var(--vs-upload-dropzone-bg);
+        }
+      }
+    }
+  }
+</style>