@builtwithjavascript/vue-file-upload - npm Package Compare versions

Comparing version 1.0.5 to 1.0.7

dist/components/FileInput.component.vue.d.ts

@@ -10,38 +10,13 @@ import type { IFileInfo } from '@builtwithjavascript/file-input-validator';
 }
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<IFileInputProps>, {
-    disabled: boolean;
-    inputWrapperCssClass: string;
-    inputCssClass: string;
-}>, {
+declare const _default: import("vue").DefineComponent<IFileInputProps, {
     resetInputFile: () => any;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    changed: (model: IFileInfo) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<IFileInputProps>, {
-    disabled: boolean;
-    inputWrapperCssClass: string;
-    inputCssClass: string;
-}>>> & {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    changed: (model: IFileInfo) => any;
+}, string, import("vue").PublicProps, Readonly<IFileInputProps> & Readonly<{
     onChanged?: ((model: IFileInfo) => any) | undefined;
-}, {
+}>, {
     disabled: boolean;
     inputWrapperCssClass: string;
     inputCssClass: string;
-}, {}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};

dist/components/FileUpload.component.vue.d.ts

@@ -15,138 +15,17 @@ import type { IFileInfo, IFileValidatorOptions } from '@builtwithjavascript/file-input-validator';
 }
-declare var __VLS_13: {};
-declare var __VLS_inheritedAttrs: {};
-declare const __VLS_templateResult: {
-    slots: {
-        default?(_: typeof __VLS_13): any;
-    };
-    refs: {
-        refFileInputComp: import("vue").CreateComponentPublicInstance<Readonly<import("vue").ExtractPropTypes<{
-            id: {
-                type: import("vue").PropType<string>;
-                required: true;
-            };
-            disabled: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
-            model: {
-                type: import("vue").PropType<IFileInfo>;
-                required: true;
-            };
-            validator: {
-                type: import("vue").PropType<string>;
-            };
-            inputWrapperCssClass: {
-                type: import("vue").PropType<string>;
-                default: string;
-            };
-            inputCssClass: {
-                type: import("vue").PropType<string>;
-                default: string;
-            };
-        }>> & {
-            onChanged?: ((model: IFileInfo) => any) | undefined;
-        }, {
-            resetInputFile: () => any;
-        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-            changed: (model: IFileInfo) => void;
-        }, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
-            id: {
-                type: import("vue").PropType<string>;
-                required: true;
-            };
-            disabled: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
-            model: {
-                type: import("vue").PropType<IFileInfo>;
-                required: true;
-            };
-            validator: {
-                type: import("vue").PropType<string>;
-            };
-            inputWrapperCssClass: {
-                type: import("vue").PropType<string>;
-                default: string;
-            };
-            inputCssClass: {
-                type: import("vue").PropType<string>;
-                default: string;
-            };
-        }>> & {
-            onChanged?: ((model: IFileInfo) => any) | undefined;
-        }, {
-            disabled: boolean;
-            inputWrapperCssClass: string;
-            inputCssClass: string;
-        }, true, {}, {}, {
-            P: {};
-            B: {};
-            D: {};
-            C: {};
-            M: {};
-            Defaults: {};
-        }, Readonly<import("vue").ExtractPropTypes<{
-            id: {
-                type: import("vue").PropType<string>;
-                required: true;
-            };
-            disabled: {
-                type: import("vue").PropType<boolean>;
-                default: boolean;
-            };
-            model: {
-                type: import("vue").PropType<IFileInfo>;
-                required: true;
-            };
-            validator: {
-                type: import("vue").PropType<string>;
-            };
-            inputWrapperCssClass: {
-                type: import("vue").PropType<string>;
-                default: string;
-            };
-            inputCssClass: {
-                type: import("vue").PropType<string>;
-                default: string;
-            };
-        }>> & {
-            onChanged?: ((model: IFileInfo) => any) | undefined;
-        }, {
-            resetInputFile: () => any;
-        }, {}, {}, {}, {
-            disabled: boolean;
-            inputWrapperCssClass: string;
-            inputCssClass: string;
-        }> | null;
-    };
-    attrs: Partial<typeof __VLS_inheritedAttrs>;
+declare var __VLS_14: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_14) => any;
 };
-type __VLS_Slots = typeof __VLS_templateResult['slots'];
-declare const __VLS_component: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<IFileUploadProps>, {
-    disabled: boolean;
-    showOnlyErrors: boolean;
-    roundedCorners: boolean;
-    successClass: string;
-    errorClass: string;
-    inputWrapperCssClass: string;
-}>, {
+declare const __VLS_component: import("vue").DefineComponent<IFileUploadProps, {
     reset: () => any;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    fileSelectionChanged: (model: IFileInfo) => void;
-    uploadClicked: (model: IFileInfo) => void;
-    "update:valid": (value: boolean) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<IFileUploadProps>, {
-    disabled: boolean;
-    showOnlyErrors: boolean;
-    roundedCorners: boolean;
-    successClass: string;
-    errorClass: string;
-    inputWrapperCssClass: string;
-}>>> & {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    fileSelectionChanged: (model: IFileInfo) => any;
+    uploadClicked: (model: IFileInfo) => any;
+    "update:valid": (value: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<IFileUploadProps> & Readonly<{
     onFileSelectionChanged?: ((model: IFileInfo) => any) | undefined;
     onUploadClicked?: ((model: IFileInfo) => any) | undefined;
     "onUpdate:valid"?: ((value: boolean) => any) | undefined;
-}, {
+}>, {
     disabled: boolean;
@@ -158,20 +37,6 @@ inputWrapperCssClass: string;
     showOnlyErrors: boolean;
-}, {}>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_Slots>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithTemplateSlots<T, S> = T & {
+type __VLS_WithSlots<T, S> = T & {
     new (): {
@@ -181,4 +46,1 @@ $slots: S;
 };
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};

dist/components/FileValidator.component.vue.d.ts

@@ -12,38 +12,9 @@ import type { IFileInfo, IFileValidatorItem } from '@builtwithjavascript/file-input-validator';
 }
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<IProps>, {
-    showOnlyErrors: boolean;
+declare const _default: import("vue").DefineComponent<IProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IProps> & Readonly<{}>, {
     roundedCorners: boolean;
-    successClass: string;
-    errorClass: string;
     validatorRowCssClass: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<IProps>, {
-    showOnlyErrors: boolean;
-    roundedCorners: boolean;
     successClass: string;
     errorClass: string;
-    validatorRowCssClass: string;
-}>>>, {
-    roundedCorners: boolean;
-    validatorRowCssClass: string;
-    successClass: string;
-    errorClass: string;
     showOnlyErrors: boolean;
-}, {}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};

dist/components/FileValidatorRow.component.vue.d.ts

@@ -12,38 +12,9 @@ import { IFileValidatorItem } from '@builtwithjavascript/file-input-validator';
 }
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToOption<IProps>, {
+declare const _default: import("vue").DefineComponent<IProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<IProps> & Readonly<{}>, {
     id: string;
     roundedCorners: boolean;
-    successClass: string;
-    errorClass: string;
     validatorRowCssClass: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<IProps>, {
-    id: string;
-    roundedCorners: boolean;
     successClass: string;
     errorClass: string;
-    validatorRowCssClass: string;
-}>>>, {
-    id: string;
-    roundedCorners: boolean;
-    validatorRowCssClass: string;
-    successClass: string;
-    errorClass: string;
-}, {}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToOption<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};

dist/vue-file-upload.es.js

@@ -1,4 +0,3 @@
-import { defineComponent as g, ref as E, computed as v, openBlock as c, createElementBlock as h, normalizeClass as f, createElementVNode as m, toDisplayString as y, normalizeStyle as B, withDirectives as w, vShow as I, Fragment as k, renderList as S, createBlock as L, createCommentVNode as O, reactive as N, createVNode as b, renderSlot as M } from "vue";
-var x = Object.defineProperty, z = (l, e, o) => e in l ? x(l, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : l[e] = o, V = (l, e, o) => (z(l, typeof e != "symbol" ? e + "" : e, o), o);
-const R = [
+import { defineComponent as g, ref as b, computed as v, createElementBlock as C, openBlock as p, normalizeClass as f, createElementVNode as c, toDisplayString as y, normalizeStyle as F, withDirectives as w, createCommentVNode as B, vShow as I, Fragment as k, renderList as S, createBlock as L, reactive as N, createVNode as V, renderSlot as O } from "vue";
+const M = [
   {
@@ -37,3 +36,3 @@ key: "name",
   }
-], T = {
+], z = {
   allowedTypes: ["csv"],
@@ -44,23 +43,23 @@ propertiesToValidate: ["name", "type", "size"],
   nameTruncateMaxLength: 35
-}, j = (l) => {
+}, R = (l) => {
   const e = (l || "").split(".");
   return e && e.length > 1 ? (e[e.length - 1] || "").trim().toLowerCase() : "";
-}, _ = (l, e, o) => {
+}, _ = (l, e, t) => {
   const a = e.file;
   if (!a)
     return;
-  const s = o.find((t) => t.name.toLowerCase() === "lastmodified");
+  const s = t.find((o) => o.name.toLowerCase() === "lastmodified");
   s && (e.lastModified = a.lastModifiedDate, s.hasError = !1, s.value = e.lastModified, s.displayValue = e.lastModified);
-}, W = (l, e = 2) => {
+}, x = (l, e = 2) => {
   if (l === 0)
     return "0 Bytes";
-  const o = 1024, a = e < 0 ? 0 : e, s = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"], t = Math.floor(Math.log(l) / Math.log(o));
-  return parseFloat((l / Math.pow(o, t)).toFixed(a)) + " " + s[t];
-}, C = (l, e) => {
+  const t = 1024, a = e < 0 ? 0 : e, s = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"], o = Math.floor(Math.log(l) / Math.log(t));
+  return parseFloat((l / Math.pow(t, o)).toFixed(a)) + " " + s[o];
+}, m = (l, e) => {
   l.isValid = !1;
-  const o = (e || "").trim();
-  return o.length > 0 ? l.message = o : l.message = "", l;
+  const t = (e || "").trim();
+  return t.length > 0 ? l.message = t : l.message = "", l;
 }, $ = {
-  name: (l, e, o) => {
-    const a = e.file, s = o.find((n) => n.name.toLowerCase() === "name");
+  name: (l, e, t) => {
+    const a = e.file, s = t.find((n) => n.name.toLowerCase() === "name");
     if (!s) {
@@ -70,4 +69,4 @@ console.warn('name strrategy: could not find "name" validator item');
     }
-    const t = l.nameTruncateMaxLength, i = " ...", r = ((a == null ? void 0 : a.name) || "").trim();
-    if (s.value = r, r.length < t)
+    const o = l.nameTruncateMaxLength, i = " ...", r = (a?.name || "").trim();
+    if (s.value = r, r.length < o)
       s.displayValue = r;
@@ -80,7 +79,7 @@ else {
       const n = `max length allowed is ${l.maxNameLength.toString()} chars`;
-      s.hasError = !0, s.displayValue = `File name is too long - ${n}`, C(e);
+      s.hasError = !0, s.displayValue = `File name is too long - ${n}`, m(e);
     } else
       e.message = e.name, s.hasError = !1;
   },
-  type: (l, e, o) => {
+  type: (l, e, t) => {
     const a = e.file;
@@ -91,3 +90,3 @@ if (!a)
     if (s.length === 0) {
-      C(e, "No allowed file types have been specified by the developer");
+      m(e, "No allowed file types have been specified by the developer");
       return;
@@ -97,39 +96,41 @@ }
       return;
-    const t = o.find((n) => n.name.toLowerCase() === "type");
-    if (!t)
+    const o = t.find((n) => n.name.toLowerCase() === "type");
+    if (!o)
       return;
     let i = "";
     s.length > 1 ? i = `file must be one of these types: ${s.join(",")}` : i = `file type must be ${s[0]}`;
-    const r = j(a.name);
-    r ? s.indexOf(r) > -1 ? (t.hasError = !1, t.value = a.type, t.displayValue = r) : (t.hasError = !0, t.value = a.type || "unknown", t.displayValue = `${r} - ${i}`, C(e)) : (t.hasError = !0, t.value = a.type || "unknown", t.displayValue = `${t.value} - ${i}`, C(e));
+    const r = R(a.name);
+    r ? s.indexOf(r) > -1 ? (o.hasError = !1, o.value = a.type, o.displayValue = r) : (o.hasError = !0, o.value = a.type || "unknown", o.displayValue = `${r} - ${i}`, m(e)) : (o.hasError = !0, o.value = a.type || "unknown", o.displayValue = `${o.value} - ${i}`, m(e));
   },
-  size: (l, e, o) => {
+  size: (l, e, t) => {
     const a = e.file;
     if (!a)
       return;
-    const s = o.find((n) => n.name.toLowerCase() === "size");
+    const s = t.find((n) => n.name.toLowerCase() === "size");
     if (!s)
       return;
-    const t = 1024e3, i = a.size, r = t * l.maxSize;
-    if (s.value = `${i} bytes`, s.displayValue = W(i), i > r) {
+    const o = 1024e3, i = a.size, r = o * l.maxSize;
+    if (s.value = `${i} bytes`, s.displayValue = x(i), i > r) {
       const n = `max upload size is ${l.maxSize.toString()} MB`;
-      s.hasError = !0, s.displayValue = `${s.displayValue} - ${n}`, C(e);
+      s.hasError = !0, s.displayValue = `${s.displayValue} - ${n}`, m(e);
     } else
       s.hasError = !1;
   },
-  datemodified: (l, e, o) => {
-    _(l, e, o);
+  datemodified: (l, e, t) => {
+    _(l, e, t);
   },
-  lastmodified: (l, e, o) => {
-    _(l, e, o);
+  lastmodified: (l, e, t) => {
+    _(l, e, t);
   }
 };
-class D {
+class T {
+  options;
+  enabledValidatorItems = [];
   constructor(e) {
-    V(this, "options"), V(this, "enabledValidatorItems", []), this.options = { ...T, ...e || {} }, this.enabledValidatorItems = R.filter((o) => this.options.allowedTypes.indexOf(o.key));
+    this.options = { ...z, ...e || {} }, this.enabledValidatorItems = M.filter((t) => this.options.allowedTypes.indexOf(t.key));
   }
   get validatorItems() {
-    const e = (this.options.propertiesToValidate || []).map((o) => o.toLowerCase());
+    const e = (this.options.propertiesToValidate || []).map((t) => t.toLowerCase());
     return e.length > 0 ? this.enabledValidatorItems.filter(
-      (o) => e.indexOf(o.name.toLowerCase()) > -1
+      (t) => e.indexOf(t.name.toLowerCase()) > -1
     ) : [];
@@ -140,8 +141,8 @@ }
       e.isValid = !0;
-      const o = this.options.propertiesToValidate || [];
-      o.length > 0 && o.forEach((a) => {
+      const t = this.options.propertiesToValidate || [];
+      t.length > 0 && t.forEach((a) => {
         const s = a.toLowerCase();
         if (Object.prototype.hasOwnProperty.call($, s)) {
-          const t = $[s];
-          t(this.options, e, this.enabledValidatorItems);
+          const o = $[s];
+          o(this.options, e, this.enabledValidatorItems);
         } else
@@ -151,10 +152,10 @@ console.warn("FileValidator: Warning: could not find validator for property", s);
     } else
-      C(e, "No file has been selected");
+      m(e, "No file has been selected");
     return this.validatorItems;
   }
 }
-const U = (l) => new D(l), P = ["id", "data-testid", "aria-disabled", "for"], G = ["id", "disabled"], K = g({
+const j = (l) => new T(l), W = ["id", "data-testid", "aria-disabled", "for"], D = ["id", "disabled"], U = g({
   name: "FileInputComponent"
-}), Y = /* @__PURE__ */ g({
-  ...K,
+}), P = /* @__PURE__ */ g({
+  ...U,
   props: {
@@ -169,4 +170,4 @@ id: {},
   emits: ["changed"],
-  setup(l, { expose: e, emit: o }) {
-    const a = l, s = o, t = E(), i = v(() => {
+  setup(l, { expose: e, emit: t }) {
+    const a = l, s = t, o = b(), i = v(() => {
       const d = [
@@ -179,3 +180,3 @@ //'cursor-pointer w-full flex flex-col space-y-2 p-2 overflow-hidden overflow-ellipsis whitespace-nowrap'
       resetInputFile: () => {
-        const d = t.value;
+        const d = o.value;
         d && (d.value = "");
@@ -185,6 +186,6 @@ }
     const n = (d) => {
-      const p = d.target;
-      p.files && p.files.length > 0 ? a.model.file = p.files.item(0) : a.model.file = null, a.model.fileSelected = !!a.model.file, s("changed", a.model);
+      const u = d.target;
+      u.files && u.files.length > 0 ? a.model.file = u.files.item(0) : a.model.file = null, a.model.fileSelected = !!a.model.file, s("changed", a.model);
     };
-    return (d, p) => (c(), h("label", {
+    return (d, u) => (p(), C("label", {
       class: f(i.value),
@@ -196,5 +197,5 @@ id: `${a.id}-input-wrapper`,
     }, [
-      m("input", {
+      c("input", {
         ref_key: "refInputFile",
-        ref: t,
+        ref: o,
         type: "file",
@@ -205,9 +206,9 @@ id: `${a.id}-input`,
         onChange: n
-      }, null, 42, G)
-    ], 10, P));
+      }, null, 42, D)
+    ], 10, W));
   }
-}), Z = ["title", "id", "data-testid"], q = {
+}), G = ["title", "id", "data-testid"], K = {
   class: /* @__PURE__ */ f("property-name"),
   style: { flex: "none", width: "5rem" }
-}, A = /* @__PURE__ */ g({
+}, Y = /* @__PURE__ */ g({
   __name: "FileValidatorRow.component",
@@ -225,8 +226,8 @@ props: {
   setup(l) {
-    const e = l, o = v(() => {
-      const { model: a } = e, s = (a == null ? void 0 : a.hasError) || !1, t = ["file-validator-item"];
-      return t.push(`${e.validatorRowCssClass || ""}`), t.push(s ? e.errorClass : e.successClass), t.join(" ").trim();
+    const e = l, t = v(() => {
+      const { model: a } = e, s = a?.hasError || !1, o = ["file-validator-item"];
+      return o.push(`${e.validatorRowCssClass || ""}`), o.push(s ? e.errorClass : e.successClass), o.join(" ").trim();
     });
-    return (a, s) => (c(), h("div", {
-      class: f(o.value),
+    return (a, s) => (p(), C("div", {
+      class: f(t.value),
       title: a.model.value,
@@ -236,13 +237,13 @@ id: e.id,
     }, [
-      m("span", q, y(a.model.name), 1),
-      m("span", {
+      c("span", K, y(a.model.name), 1),
+      c("span", {
         class: f(`property-value ${a.model.hasError ? "error" : ""}`),
-        style: B(`flex: 0 1 auto;${a.model.hasError ? "" : "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"}`)
+        style: F(`flex: 0 1 auto;${a.model.hasError ? "" : "overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"}`)
       }, y(a.model.displayValue), 7)
-    ], 10, Z));
+    ], 10, G));
   }
-}), H = ["data-testid"], J = { style: {} }, Q = ["title"], X = {
+}), Z = ["data-testid"], q = { style: {} }, A = ["title"], H = {
   key: 0,
   class: "file-validator-inner"
-}, ee = /* @__PURE__ */ g({
+}, J = /* @__PURE__ */ g({
   __name: "FileValidator.component",
@@ -260,4 +261,3 @@ props: {
   setup(l) {
-    const e = l, o = v(() => e.validatorItems.filter((s) => !e.showOnlyErrors || s.hasError)), a = v(() => {
-      var t;
+    const e = l, t = v(() => e.validatorItems.filter((s) => !e.showOnlyErrors || s.hasError)), a = v(() => {
       const s = [
@@ -267,25 +267,25 @@ //`file-validator-item px-4 py-2 flex items-center text-white`
       ];
-      return s.push(`${(t = e.model) != null && t.isValid ? e.successClass : e.errorClass}`), s.join(" ").trim();
+      return s.push(`${e.model?.isValid ? e.successClass : e.errorClass}`), s.join(" ").trim();
     });
-    return (s, t) => w((c(), h("div", {
+    return (s, o) => w((p(), C("div", {
       "data-testid": e.id,
       class: "file-validator"
     }, [
-      w(m("div", {
+      w(c("div", {
         class: f(a.value)
       }, [
-        m("span", J, y(s.model.isValid ? "File:" : "Error:"), 1),
-        m("span", {
+        c("span", q, y(s.model.isValid ? "File:" : "Error:"), 1),
+        c("span", {
           class: "",
           title: s.model.isValid ? s.model.displayName : s.model.message
-        }, y(s.model.isValid ? s.model.displayName : s.model.message), 9, Q)
+        }, y(s.model.isValid ? s.model.displayName : s.model.message), 9, A)
       ], 2), [
         [I, s.model.message]
       ]),
-      s.model.message ? O("", !0) : (c(), h("div", X, [
-        (c(!0), h(k, null, S(o.value, (i, r) => (c(), L(A, {
+      s.model.message ? B("", !0) : (p(), C("div", H, [
+        (p(!0), C(k, null, S(t.value, (i, r) => (p(), L(Y, {
           id: `${e.id}-file-validator-row_${i.key}`,
           key: `file-validator-row-${i.key}`,
           index: r,
-          totItemsCount: o.value.length,
+          totItemsCount: t.value.length,
           roundedCorners: s.roundedCorners,
@@ -298,7 +298,7 @@ model: i,
       ]))
-    ], 8, H)), [
+    ], 8, Z)), [
       [I, s.model.displayName.length > 0]
     ]);
   }
-}), se = { className: "max-w-96 space-y-2" }, ae = ["disabled"], re = /* @__PURE__ */ g({
+}), Q = { className: "max-w-96 space-y-2" }, X = ["disabled"], le = /* @__PURE__ */ g({
   __name: "FileUpload.component",
@@ -319,4 +319,4 @@ props: {
   emits: ["fileSelectionChanged", "uploadClicked", "update:valid"],
-  setup(l, { expose: e, emit: o }) {
-    const a = l, s = o, t = E(), i = () => ({
+  setup(l, { expose: e, emit: t }) {
+    const a = l, s = t, o = b(), i = () => ({
       file: null,
@@ -332,17 +332,15 @@ lastModified: "",
       validatorItems: []
-    }), n = v(() => r.fileInfo.file ? r.validatorItems.some((u) => u.hasError) : !0), d = U(a.validatorOptions), p = (u) => {
-      r.fileInfo = u, r.validatorItems = d.validateFile(r.fileInfo), console.log("___ fileSelectionChanged", r.fileInfo, r.validatorItems), s("fileSelectionChanged", r.fileInfo), s("update:valid", n.value);
-    }, F = async () => {
-      var u;
-      console.log("___ onUploadClick", (u = r.fileInfo) == null ? void 0 : u.file), s("uploadClicked", r.fileInfo);
+    }), n = v(() => r.fileInfo.file ? r.validatorItems.some((h) => h.hasError) : !0), d = j(a.validatorOptions), u = (h) => {
+      r.fileInfo = h, r.validatorItems = d.validateFile(r.fileInfo), console.log("___ fileSelectionChanged", r.fileInfo, r.validatorItems), s("fileSelectionChanged", r.fileInfo), s("update:valid", n.value);
+    }, E = async () => {
+      console.log("___ onUploadClick", r.fileInfo?.file), s("uploadClicked", r.fileInfo);
     };
     return e({
       reset: () => {
-        var u;
-        (u = t.value) == null || u.resetInputFile(), p(i());
+        o.value?.resetInputFile(), u(i());
       }
-    }), (u, oe) => (c(), h("div", se, [
-      b(Y, {
+    }), (h, se) => (p(), C("div", Q, [
+      V(P, {
         ref_key: "refFileInputComp",
-        ref: t,
+        ref: o,
         id: a.id,
@@ -353,5 +351,5 @@ disabled: a.disabled,
         inputCssClass: a.inputCssClass,
-        onChanged: p
+        onChanged: u
       }, null, 8, ["id", "disabled", "model", "inputWrapperCssClass", "inputCssClass"]),
-      b(ee, {
+      V(J, {
         model: r.fileInfo,
@@ -366,8 +364,8 @@ id: `${a.id}-validator`,
       }, null, 8, ["model", "id", "validatorItems", "showOnlyErrors", "roundedCorners", "successClass", "errorClass", "validatorRowCssClass"]),
-      M(u.$slots, "default", {}, () => [
-        m("button", {
-          onClick: F,
+      O(h.$slots, "default", {}, () => [
+        c("button", {
+          onClick: E,
           disabled: n.value,
           class: f(`p-2 rounded-md ${n.value ? "bg-gray-400" : "bg-blue-500"} color-white`)
-        }, y(a.uploadLabel), 11, ae)
+        }, y(a.uploadLabel), 11, X)
       ])
@@ -378,8 +376,8 @@ ]));
 export {
-  T as DefaultFileValidatorOptions,
-  Y as FileInputComponent,
-  R as FileInputValidatorItems,
-  re as FileUploadComponent,
-  ee as FileValidatorComponent,
-  A as FileValidatorRowComponent
+  z as DefaultFileValidatorOptions,
+  P as FileInputComponent,
+  M as FileInputValidatorItems,
+  le as FileUploadComponent,
+  J as FileValidatorComponent,
+  Y as FileValidatorRowComponent
 };

dist/vue-file-upload.umd.js

@@ -1,1 +0,1 @@
-(function(c,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],s):(c=typeof globalThis<"u"?globalThis:c||self,s(c["vue-file-upload"]={},c.Vue))})(this,function(c,s){"use strict";var E=Object.defineProperty,_=(o,e,t)=>e in o?E(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,C=(o,e,t)=>(_(o,typeof e!="symbol"?e+"":e,t),t);const h=[{key:"name",name:"Name",value:"",displayValue:"",hasError:!1,iconSuccess:"",iconError:""},{key:"type",name:"Type",value:"",displayValue:"",hasError:!1,iconSuccess:"",iconError:""},{key:"size",name:"Size",value:"",displayValue:"",hasError:!1,iconSuccess:"",iconError:""}],y={allowedTypes:["csv"],propertiesToValidate:["name","type","size"],maxSize:50,maxNameLength:75,nameTruncateMaxLength:35},$=o=>{const e=(o||"").split(".");return e&&e.length>1?(e[e.length-1]||"").trim().toLowerCase():""},g=(o,e,t)=>{const l=e.file;if(!l)return;const a=t.find(i=>i.name.toLowerCase()==="lastmodified");a&&(e.lastModified=l.lastModifiedDate,a.hasError=!1,a.value=e.lastModified,a.displayValue=e.lastModified)},v=(o,e=2)=>{if(o===0)return"0 Bytes";const t=1024,l=e<0?0:e,a=["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"],i=Math.floor(Math.log(o)/Math.log(t));return parseFloat((o/Math.pow(t,i)).toFixed(l))+" "+a[i]},u=(o,e)=>{o.isValid=!1;const t=(e||"").trim();return t.length>0?o.message=t:o.message="",o},w={name:(o,e,t)=>{const l=e.file,a=t.find(d=>d.name.toLowerCase()==="name");if(!a){console.warn('name strrategy: could not find "name" validator item');return}const i=o.nameTruncateMaxLength,n=" ...",r=((l==null?void 0:l.name)||"").trim();if(a.value=r,r.length<i)a.displayValue=r;else{const d=r.substring(0,13),p=r.split("").reverse().join("").substring(0,13).split("").reverse().join("");a.displayValue=`${d} ${n} ${p}`}if(e.name=a.value,e.displayName=a.displayValue,r.length>o.maxNameLength){const d=`max length allowed is ${o.maxNameLength.toString()} chars`;a.hasError=!0,a.displayValue=`File name is too long - ${d}`,u(e)}else e.message=e.name,a.hasError=!1},type:(o,e,t)=>{const l=e.file;if(!l)return;const a=o.allowedTypes||[];if(a.length===0){u(e,"No allowed file types have been specified by the developer");return}if(a.indexOf("*")>-1)return;const i=t.find(d=>d.name.toLowerCase()==="type");if(!i)return;let n="";a.length>1?n=`file must be one of these types: ${a.join(",")}`:n=`file type must be ${a[0]}`;const r=$(l.name);r?a.indexOf(r)>-1?(i.hasError=!1,i.value=l.type,i.displayValue=r):(i.hasError=!0,i.value=l.type||"unknown",i.displayValue=`${r} - ${n}`,u(e)):(i.hasError=!0,i.value=l.type||"unknown",i.displayValue=`${i.value} - ${n}`,u(e))},size:(o,e,t)=>{const l=e.file;if(!l)return;const a=t.find(d=>d.name.toLowerCase()==="size");if(!a)return;const i=1024e3,n=l.size,r=i*o.maxSize;if(a.value=`${n} bytes`,a.displayValue=v(n),n>r){const d=`max upload size is ${o.maxSize.toString()} MB`;a.hasError=!0,a.displayValue=`${a.displayValue} - ${d}`,u(e)}else a.hasError=!1},datemodified:(o,e,t)=>{g(o,e,t)},lastmodified:(o,e,t)=>{g(o,e,t)}};class B{constructor(e){C(this,"options"),C(this,"enabledValidatorItems",[]),this.options={...y,...e||{}},this.enabledValidatorItems=h.filter(t=>this.options.allowedTypes.indexOf(t.key))}get validatorItems(){const e=(this.options.propertiesToValidate||[]).map(t=>t.toLowerCase());return e.length>0?this.enabledValidatorItems.filter(t=>e.indexOf(t.name.toLowerCase())>-1):[]}validateFile(e){if(e.file){e.isValid=!0;const t=this.options.propertiesToValidate||[];t.length>0&&t.forEach(l=>{const a=l.toLowerCase();if(Object.prototype.hasOwnProperty.call(w,a)){const i=w[a];i(this.options,e,this.enabledValidatorItems)}else console.warn("FileValidator: Warning: could not find validator for property",a)})}else u(e,"No file has been selected");return this.validatorItems}}const k=o=>new B(o),F=["id","data-testid","aria-disabled","for"],S=["id","disabled"],N=s.defineComponent({name:"FileInputComponent"}),V=s.defineComponent({...N,props:{id:{},disabled:{type:Boolean,default:!1},model:{},validator:{},inputWrapperCssClass:{default:""},inputCssClass:{default:""}},emits:["changed"],setup(o,{expose:e,emit:t}){const l=o,a=t,i=s.ref(),n=s.computed(()=>{const p=[];return l.disabled&&p.push("disabled"),p.push(`${l.inputWrapperCssClass}`),p.join(" ").trim()});e({resetInputFile:()=>{const p=i.value;p&&(p.value="")}});const d=p=>{const f=p.target;f.files&&f.files.length>0?l.model.file=f.files.item(0):l.model.file=null,l.model.fileSelected=!!l.model.file,a("changed",l.model)};return(p,f)=>(s.openBlock(),s.createElementBlock("label",{class:s.normalizeClass(n.value),id:`${l.id}-input-wrapper`,"data-testid":l.id,"aria-disabled":l.disabled,for:`${l.id}-input`},[s.createElementVNode("input",{ref_key:"refInputFile",ref:i,type:"file",id:`${l.id}-input`,disabled:l.disabled,class:s.normalizeClass(l.inputCssClass||""),onChange:d},null,42,S)],10,F))}}),z=["title","id","data-testid"],O={class:s.normalizeClass("property-name"),style:{flex:"none",width:"5rem"}},b=s.defineComponent({__name:"FileValidatorRow.component",props:{id:{default:"not-set"},index:{},totItemsCount:{},roundedCorners:{type:Boolean,default:!1},model:{},validatorRowCssClass:{default:""},successClass:{default:"success"},errorClass:{default:"error"}},setup(o){const e=o,t=s.computed(()=>{const{model:l}=e,a=(l==null?void 0:l.hasError)||!1,i=["file-validator-item"];return i.push(`${e.validatorRowCssClass||""}`),i.push(a?e.errorClass:e.successClass),i.join(" ").trim()});return(l,a)=>(s.openBlock(),s.createElementBlock("div",{class:s.normalizeClass(t.value),title:l.model.value,id:e.id,"data-testid":e.id},[s.createElementVNode("span",O,s.toDisplayString(l.model.name),1),s.createElementVNode("span",{class:s.normalizeClass(`property-value ${l.model.hasError?"error":""}`),style:s.normalizeStyle(`flex: 0 1 auto;${l.model.hasError?"":"overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"}`)},s.toDisplayString(l.model.displayValue),7)],10,z))}}),L=["data-testid"],M={style:{}},T=["title"],R={key:0,class:"file-validator-inner"},I=s.defineComponent({__name:"FileValidator.component",props:{id:{},model:{},showOnlyErrors:{type:Boolean,default:!0},roundedCorners:{type:Boolean,default:!1},validatorItems:{},successClass:{default:"success bg-success content-success"},errorClass:{default:"error bg-danger content-danger"},validatorRowCssClass:{default:""}},setup(o){const e=o,t=s.computed(()=>e.validatorItems.filter(a=>!e.showOnlyErrors||a.hasError)),l=s.computed(()=>{var i;const a=["file-validator-item"];return a.push(`${(i=e.model)!=null&&i.isValid?e.successClass:e.errorClass}`),a.join(" ").trim()});return(a,i)=>s.withDirectives((s.openBlock(),s.createElementBlock("div",{"data-testid":e.id,class:"file-validator"},[s.withDirectives(s.createElementVNode("div",{class:s.normalizeClass(l.value)},[s.createElementVNode("span",M,s.toDisplayString(a.model.isValid?"File:":"Error:"),1),s.createElementVNode("span",{class:"",title:a.model.isValid?a.model.displayName:a.model.message},s.toDisplayString(a.model.isValid?a.model.displayName:a.model.message),9,T)],2),[[s.vShow,a.model.message]]),a.model.message?s.createCommentVNode("",!0):(s.openBlock(),s.createElementBlock("div",R,[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(t.value,(n,r)=>(s.openBlock(),s.createBlock(b,{id:`${e.id}-file-validator-row_${n.key}`,key:`file-validator-row-${n.key}`,index:r,totItemsCount:t.value.length,roundedCorners:a.roundedCorners,model:n,successClass:e.successClass,errorClass:e.errorClass,validatorRowCssClass:e.validatorRowCssClass},null,8,["id","index","totItemsCount","roundedCorners","model","successClass","errorClass","validatorRowCssClass"]))),128))]))],8,L)),[[s.vShow,a.model.displayName.length>0]])}}),j={className:"max-w-96 space-y-2"},D=["disabled"],x=s.defineComponent({__name:"FileUpload.component",props:{id:{},disabled:{type:Boolean,default:!1},uploadLabel:{},validatorOptions:{},showOnlyErrors:{type:Boolean,default:!1},roundedCorners:{type:Boolean,default:!1},successClass:{default:"success"},errorClass:{default:"error"},inputCssClass:{},inputWrapperCssClass:{default:""},validatorRowCssClass:{}},emits:["fileSelectionChanged","uploadClicked","update:valid"],setup(o,{expose:e,emit:t}){const l=o,a=t,i=s.ref(),n=()=>({file:null,lastModified:"",fileSelected:!1,isValid:!1,name:"",displayName:"",message:""}),r=s.reactive({fileInfo:n(),validatorItems:[]}),d=s.computed(()=>r.fileInfo.file?r.validatorItems.some(m=>m.hasError):!0),p=k(l.validatorOptions),f=m=>{r.fileInfo=m,r.validatorItems=p.validateFile(r.fileInfo),console.log("___ fileSelectionChanged",r.fileInfo,r.validatorItems),a("fileSelectionChanged",r.fileInfo),a("update:valid",d.value)},W=async()=>{var m;console.log("___ onUploadClick",(m=r.fileInfo)==null?void 0:m.file),a("uploadClicked",r.fileInfo)};return e({reset:()=>{var m;(m=i.value)==null||m.resetInputFile(),f(n())}}),(m,U)=>(s.openBlock(),s.createElementBlock("div",j,[s.createVNode(V,{ref_key:"refFileInputComp",ref:i,id:l.id,disabled:l.disabled,model:r.fileInfo,inputWrapperCssClass:l.inputWrapperCssClass,inputCssClass:l.inputCssClass,onChanged:f},null,8,["id","disabled","model","inputWrapperCssClass","inputCssClass"]),s.createVNode(I,{model:r.fileInfo,id:`${l.id}-validator`,validatorItems:r.validatorItems,showOnlyErrors:l.showOnlyErrors,roundedCorners:l.roundedCorners,successClass:l.successClass,errorClass:l.errorClass,validatorRowCssClass:l.validatorRowCssClass},null,8,["model","id","validatorItems","showOnlyErrors","roundedCorners","successClass","errorClass","validatorRowCssClass"]),s.renderSlot(m.$slots,"default",{},()=>[s.createElementVNode("button",{onClick:W,disabled:d.value,class:s.normalizeClass(`p-2 rounded-md ${d.value?"bg-gray-400":"bg-blue-500"} color-white`)},s.toDisplayString(l.uploadLabel),11,D)])]))}});c.DefaultFileValidatorOptions=y,c.FileInputComponent=V,c.FileInputValidatorItems=h,c.FileUploadComponent=x,c.FileValidatorComponent=I,c.FileValidatorRowComponent=b,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})});
+(function(c,s){typeof exports=="object"&&typeof module<"u"?s(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],s):(c=typeof globalThis<"u"?globalThis:c||self,s(c["vue-file-upload"]={},c.Vue))})(this,(function(c,s){"use strict";const C=[{key:"name",name:"Name",value:"",displayValue:"",hasError:!1,iconSuccess:"",iconError:""},{key:"type",name:"Type",value:"",displayValue:"",hasError:!1,iconSuccess:"",iconError:""},{key:"size",name:"Size",value:"",displayValue:"",hasError:!1,iconSuccess:"",iconError:""}],h={allowedTypes:["csv"],propertiesToValidate:["name","type","size"],maxSize:50,maxNameLength:75,nameTruncateMaxLength:35},E=a=>{const e=(a||"").split(".");return e&&e.length>1?(e[e.length-1]||"").trim().toLowerCase():""},y=(a,e,o)=>{const t=e.file;if(!t)return;const l=o.find(i=>i.name.toLowerCase()==="lastmodified");l&&(e.lastModified=t.lastModifiedDate,l.hasError=!1,l.value=e.lastModified,l.displayValue=e.lastModified)},b=(a,e=2)=>{if(a===0)return"0 Bytes";const o=1024,t=e<0?0:e,l=["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"],i=Math.floor(Math.log(a)/Math.log(o));return parseFloat((a/Math.pow(o,i)).toFixed(t))+" "+l[i]},f=(a,e)=>{a.isValid=!1;const o=(e||"").trim();return o.length>0?a.message=o:a.message="",a},g={name:(a,e,o)=>{const t=e.file,l=o.find(d=>d.name.toLowerCase()==="name");if(!l){console.warn('name strrategy: could not find "name" validator item');return}const i=a.nameTruncateMaxLength,n=" ...",r=(t?.name||"").trim();if(l.value=r,r.length<i)l.displayValue=r;else{const d=r.substring(0,13),p=r.split("").reverse().join("").substring(0,13).split("").reverse().join("");l.displayValue=`${d} ${n} ${p}`}if(e.name=l.value,e.displayName=l.displayValue,r.length>a.maxNameLength){const d=`max length allowed is ${a.maxNameLength.toString()} chars`;l.hasError=!0,l.displayValue=`File name is too long - ${d}`,f(e)}else e.message=e.name,l.hasError=!1},type:(a,e,o)=>{const t=e.file;if(!t)return;const l=a.allowedTypes||[];if(l.length===0){f(e,"No allowed file types have been specified by the developer");return}if(l.indexOf("*")>-1)return;const i=o.find(d=>d.name.toLowerCase()==="type");if(!i)return;let n="";l.length>1?n=`file must be one of these types: ${l.join(",")}`:n=`file type must be ${l[0]}`;const r=E(t.name);r?l.indexOf(r)>-1?(i.hasError=!1,i.value=t.type,i.displayValue=r):(i.hasError=!0,i.value=t.type||"unknown",i.displayValue=`${r} - ${n}`,f(e)):(i.hasError=!0,i.value=t.type||"unknown",i.displayValue=`${i.value} - ${n}`,f(e))},size:(a,e,o)=>{const t=e.file;if(!t)return;const l=o.find(d=>d.name.toLowerCase()==="size");if(!l)return;const i=1024e3,n=t.size,r=i*a.maxSize;if(l.value=`${n} bytes`,l.displayValue=b(n),n>r){const d=`max upload size is ${a.maxSize.toString()} MB`;l.hasError=!0,l.displayValue=`${l.displayValue} - ${d}`,f(e)}else l.hasError=!1},datemodified:(a,e,o)=>{y(a,e,o)},lastmodified:(a,e,o)=>{y(a,e,o)}};class _{options;enabledValidatorItems=[];constructor(e){this.options={...h,...e||{}},this.enabledValidatorItems=C.filter(o=>this.options.allowedTypes.indexOf(o.key))}get validatorItems(){const e=(this.options.propertiesToValidate||[]).map(o=>o.toLowerCase());return e.length>0?this.enabledValidatorItems.filter(o=>e.indexOf(o.name.toLowerCase())>-1):[]}validateFile(e){if(e.file){e.isValid=!0;const o=this.options.propertiesToValidate||[];o.length>0&&o.forEach(t=>{const l=t.toLowerCase();if(Object.prototype.hasOwnProperty.call(g,l)){const i=g[l];i(this.options,e,this.enabledValidatorItems)}else console.warn("FileValidator: Warning: could not find validator for property",l)})}else f(e,"No file has been selected");return this.validatorItems}}const $=a=>new _(a),B=["id","data-testid","aria-disabled","for"],k=["id","disabled"],v=s.defineComponent({name:"FileInputComponent"}),w=s.defineComponent({...v,props:{id:{},disabled:{type:Boolean,default:!1},model:{},validator:{},inputWrapperCssClass:{default:""},inputCssClass:{default:""}},emits:["changed"],setup(a,{expose:e,emit:o}){const t=a,l=o,i=s.ref(),n=s.computed(()=>{const p=[];return t.disabled&&p.push("disabled"),p.push(`${t.inputWrapperCssClass}`),p.join(" ").trim()});e({resetInputFile:()=>{const p=i.value;p&&(p.value="")}});const d=p=>{const m=p.target;m.files&&m.files.length>0?t.model.file=m.files.item(0):t.model.file=null,t.model.fileSelected=!!t.model.file,l("changed",t.model)};return(p,m)=>(s.openBlock(),s.createElementBlock("label",{class:s.normalizeClass(n.value),id:`${t.id}-input-wrapper`,"data-testid":t.id,"aria-disabled":t.disabled,for:`${t.id}-input`},[s.createElementVNode("input",{ref_key:"refInputFile",ref:i,type:"file",id:`${t.id}-input`,disabled:t.disabled,class:s.normalizeClass(t.inputCssClass||""),onChange:d},null,42,k)],10,B))}}),F=["title","id","data-testid"],S={class:s.normalizeClass("property-name"),style:{flex:"none",width:"5rem"}},V=s.defineComponent({__name:"FileValidatorRow.component",props:{id:{default:"not-set"},index:{},totItemsCount:{},roundedCorners:{type:Boolean,default:!1},model:{},validatorRowCssClass:{default:""},successClass:{default:"success"},errorClass:{default:"error"}},setup(a){const e=a,o=s.computed(()=>{const{model:t}=e,l=t?.hasError||!1,i=["file-validator-item"];return i.push(`${e.validatorRowCssClass||""}`),i.push(l?e.errorClass:e.successClass),i.join(" ").trim()});return(t,l)=>(s.openBlock(),s.createElementBlock("div",{class:s.normalizeClass(o.value),title:t.model.value,id:e.id,"data-testid":e.id},[s.createElementVNode("span",S,s.toDisplayString(t.model.name),1),s.createElementVNode("span",{class:s.normalizeClass(`property-value ${t.model.hasError?"error":""}`),style:s.normalizeStyle(`flex: 0 1 auto;${t.model.hasError?"":"overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"}`)},s.toDisplayString(t.model.displayValue),7)],10,F))}}),N=["data-testid"],z={style:{}},L=["title"],O={key:0,class:"file-validator-inner"},I=s.defineComponent({__name:"FileValidator.component",props:{id:{},model:{},showOnlyErrors:{type:Boolean,default:!0},roundedCorners:{type:Boolean,default:!1},validatorItems:{},successClass:{default:"success bg-success content-success"},errorClass:{default:"error bg-danger content-danger"},validatorRowCssClass:{default:""}},setup(a){const e=a,o=s.computed(()=>e.validatorItems.filter(l=>!e.showOnlyErrors||l.hasError)),t=s.computed(()=>{const l=["file-validator-item"];return l.push(`${e.model?.isValid?e.successClass:e.errorClass}`),l.join(" ").trim()});return(l,i)=>s.withDirectives((s.openBlock(),s.createElementBlock("div",{"data-testid":e.id,class:"file-validator"},[s.withDirectives(s.createElementVNode("div",{class:s.normalizeClass(t.value)},[s.createElementVNode("span",z,s.toDisplayString(l.model.isValid?"File:":"Error:"),1),s.createElementVNode("span",{class:"",title:l.model.isValid?l.model.displayName:l.model.message},s.toDisplayString(l.model.isValid?l.model.displayName:l.model.message),9,L)],2),[[s.vShow,l.model.message]]),l.model.message?s.createCommentVNode("",!0):(s.openBlock(),s.createElementBlock("div",O,[(s.openBlock(!0),s.createElementBlock(s.Fragment,null,s.renderList(o.value,(n,r)=>(s.openBlock(),s.createBlock(V,{id:`${e.id}-file-validator-row_${n.key}`,key:`file-validator-row-${n.key}`,index:r,totItemsCount:o.value.length,roundedCorners:l.roundedCorners,model:n,successClass:e.successClass,errorClass:e.errorClass,validatorRowCssClass:e.validatorRowCssClass},null,8,["id","index","totItemsCount","roundedCorners","model","successClass","errorClass","validatorRowCssClass"]))),128))]))],8,N)),[[s.vShow,l.model.displayName.length>0]])}}),M={className:"max-w-96 space-y-2"},T=["disabled"],R=s.defineComponent({__name:"FileUpload.component",props:{id:{},disabled:{type:Boolean,default:!1},uploadLabel:{},validatorOptions:{},showOnlyErrors:{type:Boolean,default:!1},roundedCorners:{type:Boolean,default:!1},successClass:{default:"success"},errorClass:{default:"error"},inputCssClass:{},inputWrapperCssClass:{default:""},validatorRowCssClass:{}},emits:["fileSelectionChanged","uploadClicked","update:valid"],setup(a,{expose:e,emit:o}){const t=a,l=o,i=s.ref(),n=()=>({file:null,lastModified:"",fileSelected:!1,isValid:!1,name:"",displayName:"",message:""}),r=s.reactive({fileInfo:n(),validatorItems:[]}),d=s.computed(()=>r.fileInfo.file?r.validatorItems.some(u=>u.hasError):!0),p=$(t.validatorOptions),m=u=>{r.fileInfo=u,r.validatorItems=p.validateFile(r.fileInfo),console.log("___ fileSelectionChanged",r.fileInfo,r.validatorItems),l("fileSelectionChanged",r.fileInfo),l("update:valid",d.value)},D=async()=>{console.log("___ onUploadClick",r.fileInfo?.file),l("uploadClicked",r.fileInfo)};return e({reset:()=>{i.value?.resetInputFile(),m(n())}}),(u,x)=>(s.openBlock(),s.createElementBlock("div",M,[s.createVNode(w,{ref_key:"refFileInputComp",ref:i,id:t.id,disabled:t.disabled,model:r.fileInfo,inputWrapperCssClass:t.inputWrapperCssClass,inputCssClass:t.inputCssClass,onChanged:m},null,8,["id","disabled","model","inputWrapperCssClass","inputCssClass"]),s.createVNode(I,{model:r.fileInfo,id:`${t.id}-validator`,validatorItems:r.validatorItems,showOnlyErrors:t.showOnlyErrors,roundedCorners:t.roundedCorners,successClass:t.successClass,errorClass:t.errorClass,validatorRowCssClass:t.validatorRowCssClass},null,8,["model","id","validatorItems","showOnlyErrors","roundedCorners","successClass","errorClass","validatorRowCssClass"]),s.renderSlot(u.$slots,"default",{},()=>[s.createElementVNode("button",{onClick:D,disabled:d.value,class:s.normalizeClass(`p-2 rounded-md ${d.value?"bg-gray-400":"bg-blue-500"} color-white`)},s.toDisplayString(t.uploadLabel),11,T)])]))}});c.DefaultFileValidatorOptions=h,c.FileInputComponent=w,c.FileInputValidatorItems=C,c.FileUploadComponent=R,c.FileValidatorComponent=I,c.FileValidatorRowComponent=V,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})}));

package.json

 {
   "name": "@builtwithjavascript/vue-file-upload",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "A Vue file upload component with validation, unstyled",
@@ -22,3 +22,3 @@ "author": "Damiano Fusco",
     "build-types": "vue-tsc --declaration --emitDeclarationOnly --outDir dist",
-    "build": "vite build && npm run build-types",
+    "build": "npm run pretty; vite build && npm run build-types",
     "pub": "npm publish --access public",
@@ -33,23 +33,15 @@ "test": "TESTING=true vitest run",
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "pretty-quick --staged \"./src/**/*.(ts|vue)\""
-    }
-  },
   "devDependencies": {
-    "@builtwithjavascript/file-input-validator": "^1.0.3",
-    "@testing-library/user-event": "^14.5.2",
-    "@testing-library/vue": "^8.0.3",
-    "@types/node": "^20.12.7",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "husky": "^9.0.11",
-    "jsdom": "^24.0.0",
-    "prettier": "^3.2.5",
-    "pretty-quick": "^4.0.0",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.10",
-    "vitest": "^1.5.2",
-    "vitest-preview": "^0.0.1",
-    "vue": "^3.4.24",
-    "vue-tsc": "^2.0.14"
+    "@builtwithjavascript/file-input-validator": "^1.0.7",
+    "@testing-library/user-event": "^14.6.1",
+    "@testing-library/vue": "^8.1.0",
+    "@types/node": "^24.4.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "jsdom": "^27.0.0",
+    "prettier": "^3.6.2",
+    "typescript": "^5.9.2",
+    "vite": "^7.1.5",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.21",
+    "vue-tsc": "^3.0.7"
   },
@@ -56,0 +48,0 @@ "files": [

README.md

@@ -84,1 +84,2 @@ # @builtwithjavascript/vue-file-upload
 
+    "vue-tsc": "^2.0.14"

No alert changes

Improved metrics

Dev dependency count

12

-20%

Worsened metrics

Total package byte prevSize

32628

-19.35%

Lines of code

514

-30.35%

No dependency changes