@a-vision-software/vue-input-components 1.1.30 → 1.1.32

package/dist/vue-input-components.es.js

@@ -1,4 +1,4 @@
-import { defineComponent as z, computed as q, ref as u, onUnmounted as H, resolveComponent as A, createElementBlock as s, openBlock as o, normalizeStyle as L, normalizeClass as I, createCommentVNode as c, createElementVNode as h, toDisplayString as m, createVNode as U, Transition as B, withCtx as M, watch as N, withModifiers as F, Fragment as P, renderList as R } from "vue";
+import { defineComponent as D, computed as V, ref as p, onUnmounted as W, resolveComponent as z, createElementBlock as s, openBlock as o, normalizeStyle as L, normalizeClass as k, createCommentVNode as d, createElementVNode as g, toDisplayString as h, createVNode as F, Transition as M, withCtx as A, watch as H, withModifiers as I, Fragment as P, renderList as R } from "vue";
 const O = ["for"], X = ["id", "type", "value", "placeholder", "required", "disabled"], j = ["id", "value", "placeholder", "required", "disabled"], G = {
   key: 3,
   class: "status-indicator required-indicator"
@@ -8,13 +8,13 @@ const O = ["for"], X = ["id", "type", "value", "placeholder", "required", "disab
 }, Z = {
   key: 0,
   class: "status-indicator changed-indicator"
-}, J = {
+}, x = {
   key: 4,
   class: "error-message"
-}, Q = {
+}, J = {
   key: 5,
   class: "message success-message"
-}, Y = /* @__PURE__ */ z({
+}, Q = /* @__PURE__ */ D({
   __name: "TextInput",
   props: {
     modelValue: {},
@@ -37,39 +37,39 @@ const O = ["for"], X = ["id", "type", "value", "placeholder", "required", "disab
     height: {}
   },
   emits: ["update:modelValue", "changed", "saved"],
-  setup(_, { emit: b }) {
-    const r = _, p = b, f = q(() => `input-${Math.random().toString(36).substr(2, 9)}`), t = u(!1), v = u(!1), g = u(!1), i = u(null), d = u(null), k = u(null), T = q(() => r.label ? r.labelPosition === "left" && r.labelWidth ? {
+  setup(n, { emit: y }) {
+    const r = n, c = y, v = V(() => `input-${Math.random().toString(36).substr(2, 9)}`), l = p(!1), m = p(!1), b = p(!1), u = p(null), f = p(null), _ = p(null), T = V(() => r.label ? r.labelPosition === "left" && r.labelWidth ? {
       "grid-template-columns": `${r.labelWidth} 1fr`
-    } : {} : {}), C = async (e) => {
+    } : {} : {}), S = async (e) => {
       if (r.autosave)
         try {
-          await r.autosave(e), r.error || (p("saved"), t.value = !0, v.value = !1, setTimeout(() => {
-            t.value = !1;
+          await r.autosave(e), r.error || (c("saved"), l.value = !0, m.value = !1, setTimeout(() => {
+            l.value = !1;
           }, 3e3));
-        } catch (y) {
-          console.error("Autosave failed:", y);
+        } catch (w) {
+          console.error("Autosave failed:", w);
         }
-    }, D = (e) => {
-      i.value && clearTimeout(i.value), d.value && clearTimeout(d.value), r.error || (v.value = !0), d.value = window.setTimeout(() => {
-        p("changed"), g.value = !0;
-      }, 500), i.value = window.setTimeout(() => {
-        C(e);
+    }, U = (e) => {
+      u.value && clearTimeout(u.value), f.value && clearTimeout(f.value), r.error || (m.value = !0), f.value = window.setTimeout(() => {
+        c("changed"), b.value = !0;
+      }, 500), u.value = window.setTimeout(() => {
+        S(e);
       }, 1500);
-    }, E = () => {
+    }, B = () => {
       var e;
-      (e = k.value) == null || e.focus();
-    }, S = (e) => {
+      (e = _.value) == null || e.focus();
+    }, C = (e) => {
       e.style.height = "auto", e.style.height = `${e.scrollHeight}px`;
-    }, $ = (e) => {
-      const y = e.target.value;
-      p("update:modelValue", y), D(y), S(e.target);
+    }, q = (e) => {
+      const w = e.target.value;
+      c("update:modelValue", w), U(w), C(e.target);
     };
-    return H(() => {
-      i.value && clearTimeout(i.value), d.value && clearTimeout(d.value);
-    }), (e, y) => {
-      const l = A("font-awesome-icon");
+    return W(() => {
+      u.value && clearTimeout(u.value), f.value && clearTimeout(f.value);
+    }), (e, w) => {
+      const t = z("font-awesome-icon");
       return o(), s("div", {
-        class: I(["text-input", {
+        class: k(["text-input", {
           [`label-${e.labelPosition}`]: e.label,
           [`label-align-${e.labelAlign}`]: e.label
         }]),
@@ -84,11 +84,11 @@ const O = ["for"], X = ["id", "type", "value", "placeholder", "required", "disab
       }, [
         e.label ? (o(), s("label", {
           key: 0,
-          for: f.value,
+          for: v.value,
           class: "label"
-        }, m(e.label), 9, O)) : c("", !0),
-        h("div", {
-          class: I(["input-wrapper", {
+        }, h(e.label), 9, O)) : d("", !0),
+        g("div", {
+          class: k(["input-wrapper", {
             "has-error": e.error,
             "has-icon": e.icon
           }])
@@ -96,200 +96,264 @@ const O = ["for"], X = ["id", "type", "value", "placeholder", "required", "disab
           e.icon ? (o(), s("div", {
             key: 0,
             class: "icon-wrapper",
-            onClick: E
+            onClick: B
           }, [
-            U(l, {
+            F(t, {
               icon: e.icon,
               class: "icon"
             }, null, 8, ["icon"])
-          ])) : c("", !0),
+          ])) : d("", !0),
           e.isTextarea ? (o(), s("textarea", {
             key: 2,
-            id: f.value,
+            id: v.value,
             value: e.modelValue,
             placeholder: e.placeholder,
             required: e.required,
             disabled: e.disabled,
             class: "input",
-            onInput: $,
+            onInput: q,
             ref_key: "inputRef",
-            ref: k
+            ref: _
           }, null, 40, j)) : (o(), s("input", {
             key: 1,
-            id: f.value,
+            id: v.value,
             type: e.type,
             value: e.modelValue,
             placeholder: e.placeholder,
             required: e.required,
             disabled: e.disabled,
             class: "input",
-            onInput: $,
+            onInput: q,
             ref_key: "inputRef",
-            ref: k
+            ref: _
           }, null, 40, X)),
-          e.required && !t.value && !v.value ? (o(), s("span", G, "required")) : c("", !0),
-          U(B, { name: "fade" }, {
-            default: M(() => [
-              t.value && !e.error ? (o(), s("span", K, "saved")) : c("", !0)
+          e.required && !l.value && !m.value ? (o(), s("span", G, "required")) : d("", !0),
+          F(M, { name: "fade" }, {
+            default: A(() => [
+              l.value && !e.error ? (o(), s("span", K, "saved")) : d("", !0)
             ]),
             _: 1
           }),
-          U(B, { name: "fade" }, {
-            default: M(() => [
-              v.value && !e.error ? (o(), s("span", Z, "changed")) : c("", !0)
+          F(M, { name: "fade" }, {
+            default: A(() => [
+              m.value && !e.error ? (o(), s("span", Z, "changed")) : d("", !0)
             ]),
             _: 1
           }),
-          e.error ? (o(), s("div", J, m(e.error), 1)) : c("", !0),
-          e.success ? (o(), s("span", Q, m(e.success), 1)) : c("", !0)
+          e.error ? (o(), s("div", x, h(e.error), 1)) : d("", !0),
+          e.success ? (o(), s("span", J, h(e.success), 1)) : d("", !0)
         ], 2)
       ], 6);
     };
   }
-}), V = (_, b) => {
-  const r = _.__vccOpts || _;
-  for (const [p, f] of b)
-    r[p] = f;
+}), E = (n, y) => {
+  const r = n.__vccOpts || n;
+  for (const [c, v] of y)
+    r[c] = v;
   return r;
-}, de = /* @__PURE__ */ V(Y, [["__scopeId", "data-v-cc2497d0"]]), x = { class: "file-upload" }, ee = { class: "upload-content" }, ae = { key: 0 }, le = {
+}, fe = /* @__PURE__ */ E(Q, [["__scopeId", "data-v-cc2497d0"]]), Y = { class: "text-area-input" }, ee = ["value", "placeholder", "disabled", "required", "maxlength", "rows"], ae = {
+  key: 1,
+  class: "error-message"
+}, te = /* @__PURE__ */ D({
+  __name: "TextAreaInput",
+  props: {
+    modelValue: {
+      type: String,
+      required: !0
+    },
+    label: {
+      type: String,
+      default: ""
+    },
+    placeholder: {
+      type: String,
+      default: ""
+    },
+    error: {
+      type: String,
+      default: ""
+    },
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    required: {
+      type: Boolean,
+      default: !1
+    },
+    maxlength: {
+      type: Number,
+      default: void 0
+    },
+    rows: {
+      type: Number,
+      default: 4
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(n, { emit: y }) {
+    const r = y, c = (v) => {
+      const l = v.target;
+      r("update:modelValue", l.value);
+    };
+    return (v, l) => (o(), s("div", Y, [
+      n.label ? (o(), s("label", {
+        key: 0,
+        class: k({ required: n.required })
+      }, h(n.label), 3)) : d("", !0),
+      g("textarea", {
+        value: n.modelValue,
+        onInput: c,
+        placeholder: n.placeholder,
+        disabled: n.disabled,
+        required: n.required,
+        maxlength: n.maxlength,
+        rows: n.rows,
+        class: k({ error: !!n.error })
+      }, null, 42, ee),
+      n.error ? (o(), s("div", ae, h(n.error), 1)) : d("", !0)
+    ]));
+  }
+}), he = /* @__PURE__ */ E(te, [["__scopeId", "data-v-2e843729"]]), le = { class: "file-upload" }, se = { class: "upload-content" }, oe = { key: 0 }, re = {
   key: 1,
   class: "selected-files"
-}, te = { class: "file-name" }, se = { class: "file-size" }, oe = {
+}, ne = { class: "file-name" }, ie = { class: "file-size" }, ue = {
   key: 0,
   class: "error-message"
-}, re = {
+}, de = {
   key: 1,
   class: "progress-bar"
-}, ne = 20 * 1024 * 1024, ie = /* @__PURE__ */ z({
+}, ce = 20 * 1024 * 1024, pe = /* @__PURE__ */ D({
   __name: "FileUpload",
   props: {
     icon: {},
     uploadUrl: {}
   },
   emits: ["upload-complete", "upload-error", "files-selected", "start-upload"],
-  setup(_, { emit: b }) {
-    const r = _, p = b, f = u(null), t = u([]), v = u(!1), g = u(0), i = u(""), d = u(null), k = (l) => {
-      if (l === 0) return "0 Bytes";
-      const a = 1024, n = ["Bytes", "KB", "MB", "GB"], w = Math.floor(Math.log(l) / Math.log(a));
-      return parseFloat((l / Math.pow(a, w)).toFixed(2)) + " " + n[w];
-    }, T = (l) => l.size > ne ? (i.value = `File "${l.name}" exceeds the maximum size of 20MB`, !1) : !0, C = () => {
-      v.value = !0;
-    }, D = () => {
-      v.value = !1;
-    }, E = (l) => {
+  setup(n, { emit: y }) {
+    const r = n, c = y, v = p(null), l = p([]), m = p(!1), b = p(0), u = p(""), f = p(null), _ = (t) => {
+      if (t === 0) return "0 Bytes";
+      const a = 1024, i = ["Bytes", "KB", "MB", "GB"], $ = Math.floor(Math.log(t) / Math.log(a));
+      return parseFloat((t / Math.pow(a, $)).toFixed(2)) + " " + i[$];
+    }, T = (t) => t.size > ce ? (u.value = `File "${t.name}" exceeds the maximum size of 20MB`, !1) : !0, S = () => {
+      m.value = !0;
+    }, U = () => {
+      m.value = !1;
+    }, B = (t) => {
       var a;
-      if (v.value = !1, i.value = "", (a = l.dataTransfer) != null && a.files) {
-        const n = Array.from(l.dataTransfer.files);
-        n.every(T) && (t.value = [...t.value, ...n]);
+      if (m.value = !1, u.value = "", (a = t.dataTransfer) != null && a.files) {
+        const i = Array.from(t.dataTransfer.files);
+        i.every(T) && (l.value = [...l.value, ...i]);
       }
-    }, S = () => {
-      var l;
-      (l = f.value) == null || l.click();
-    }, $ = (l) => {
-      i.value = "";
-      const a = l.target;
+    }, C = () => {
+      var t;
+      (t = v.value) == null || t.click();
+    }, q = (t) => {
+      u.value = "";
+      const a = t.target;
       if (a.files) {
-        const n = Array.from(a.files);
-        n.every(T) && (t.value = [...t.value, ...n]);
+        const i = Array.from(a.files);
+        i.every(T) && (l.value = [...l.value, ...i]);
       }
       a.value = "";
     }, e = async () => {
       if (!r.uploadUrl) {
-        i.value = "No upload URL provided";
+        u.value = "No upload URL provided";
         return;
       }
-      if (t.value.length === 0) {
-        i.value = "No files selected";
+      if (l.value.length === 0) {
+        u.value = "No files selected";
         return;
       }
-      const l = new FormData();
-      t.value.forEach((a) => {
-        l.append("files", a);
+      const t = new FormData();
+      l.value.forEach((a) => {
+        t.append("files", a);
       });
       try {
         const a = new XMLHttpRequest();
-        a.upload.addEventListener("progress", (n) => {
-          n.lengthComputable && (g.value = n.loaded / n.total * 100);
+        a.upload.addEventListener("progress", (i) => {
+          i.lengthComputable && (b.value = i.loaded / i.total * 100);
         }), a.addEventListener("load", () => {
           if (a.status >= 200 && a.status < 300)
-            d.value = {
+            f.value = {
               type: "success",
               message: "Upload completed successfully"
-            }, p("upload-complete", t.value), t.value = [], g.value = 0;
+            }, c("upload-complete", l.value), l.value = [], b.value = 0;
           else
             throw new Error(`Upload failed with status ${a.status}`);
         }), a.addEventListener("error", () => {
           throw new Error("Upload failed");
-        }), a.open("POST", r.uploadUrl), a.send(l);
+        }), a.open("POST", r.uploadUrl), a.send(t);
       } catch (a) {
-        const n = a instanceof Error ? a.message : "Upload failed";
-        i.value = n, d.value = {
+        const i = a instanceof Error ? a.message : "Upload failed";
+        u.value = i, f.value = {
           type: "error",
-          message: n
-        }, p("upload-error", n);
+          message: i
+        }, c("upload-error", i);
       }
-    }, y = () => {
-      p("start-upload", t.value);
+    }, w = () => {
+      c("start-upload", l.value);
     };
-    return N(t, (l) => {
-      l.length > 0 && (r.uploadUrl ? e() : p("files-selected", l));
-    }), (l, a) => {
-      const n = A("font-awesome-icon");
-      return o(), s("div", x, [
-        h("div", {
-          class: I(["upload-area", { "is-dragging": v.value, "has-files": t.value.length > 0 }]),
-          onDragenter: F(C, ["prevent"]),
-          onDragleave: F(D, ["prevent"]),
-          onDragover: a[0] || (a[0] = F(() => {
+    return H(l, (t) => {
+      t.length > 0 && (r.uploadUrl ? e() : c("files-selected", t));
+    }), (t, a) => {
+      const i = z("font-awesome-icon");
+      return o(), s("div", le, [
+        g("div", {
+          class: k(["upload-area", { "is-dragging": m.value, "has-files": l.value.length > 0 }]),
+          onDragenter: I(S, ["prevent"]),
+          onDragleave: I(U, ["prevent"]),
+          onDragover: a[0] || (a[0] = I(() => {
           }, ["prevent"])),
-          onDrop: F(E, ["prevent"]),
-          onClick: S
+          onDrop: I(B, ["prevent"]),
+          onClick: C
         }, [
-          h("input", {
+          g("input", {
             ref_key: "fileInput",
-            ref: f,
+            ref: v,
             type: "file",
             multiple: "",
             class: "file-input",
-            onChange: $
+            onChange: q
           }, null, 544),
-          h("div", ee, [
-            U(n, {
-              icon: ["fas", l.icon || "upload"]
+          g("div", se, [
+            F(i, {
+              icon: ["fas", t.icon || "upload"]
             }, null, 8, ["icon"]),
-            t.value.length === 0 ? (o(), s("p", ae, "Drag & drop files here or click to select")) : (o(), s("div", le, [
-              h("p", null, m(t.value.length) + " file(s) selected", 1),
-              (o(!0), s(P, null, R(t.value, (w, W) => (o(), s("div", {
-                key: W,
+            l.value.length === 0 ? (o(), s("p", oe, "Drag & drop files here or click to select")) : (o(), s("div", re, [
+              g("p", null, h(l.value.length) + " file(s) selected", 1),
+              (o(!0), s(P, null, R(l.value, ($, N) => (o(), s("div", {
+                key: N,
                 class: "file-info"
               }, [
-                h("span", te, m(w.name), 1),
-                h("span", se, m(k(w.size)), 1)
+                g("span", ne, h($.name), 1),
+                g("span", ie, h(_($.size)), 1)
               ]))), 128))
             ]))
           ])
         ], 34),
-        i.value ? (o(), s("div", oe, m(i.value), 1)) : c("", !0),
-        g.value > 0 && g.value < 100 ? (o(), s("div", re, [
-          h("div", {
+        u.value ? (o(), s("div", ue, h(u.value), 1)) : d("", !0),
+        b.value > 0 && b.value < 100 ? (o(), s("div", de, [
+          g("div", {
             class: "progress",
-            style: L({ width: `${g.value}%` })
+            style: L({ width: `${b.value}%` })
           }, null, 4)
-        ])) : c("", !0),
-        d.value ? (o(), s("div", {
+        ])) : d("", !0),
+        f.value ? (o(), s("div", {
           key: 2,
-          class: I(["status-message", d.value.type])
-        }, m(d.value.message), 3)) : c("", !0),
-        t.value.length > 0 && !l.uploadUrl ? (o(), s("button", {
+          class: k(["status-message", f.value.type])
+        }, h(f.value.message), 3)) : d("", !0),
+        l.value.length > 0 && !t.uploadUrl ? (o(), s("button", {
           key: 3,
           class: "upload-button",
-          onClick: y
-        }, " Upload Files ")) : c("", !0)
+          onClick: w
+        }, " Upload Files ")) : d("", !0)
       ]);
     };
   }
-}), ce = /* @__PURE__ */ V(ie, [["__scopeId", "data-v-75b2aeea"]]);
+}), me = /* @__PURE__ */ E(pe, [["__scopeId", "data-v-75b2aeea"]]);
 export {
-  ce as FileUpload,
-  de as TextInput
+  me as FileUpload,
+  he as TextAreaInput,
+  fe as TextInput
 };

package/dist/vue-input-components.umd.js

@@ -1 +1 @@
-(function(p,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(p=typeof globalThis<"u"?globalThis:p||self,e(p.VueInputComponents={},p.Vue))})(this,function(p,e){"use strict";const N=["for"],S=["id","type","value","placeholder","required","disabled"],T=["id","value","placeholder","required","disabled"],D={key:3,class:"status-indicator required-indicator"},F={key:0,class:"status-indicator saved-indicator"},$={key:0,class:"status-indicator changed-indicator"},U={key:4,class:"error-message"},I={key:5,class:"message success-message"},M=e.defineComponent({__name:"TextInput",props:{modelValue:{},label:{},type:{},icon:{},placeholder:{},required:{type:Boolean},disabled:{type:Boolean},error:{},success:{},labelPosition:{},labelAlign:{},totalWidth:{},inputWidth:{},labelWidth:{},autosave:{type:Function},isTextarea:{type:Boolean},maxHeight:{},height:{}},emits:["update:modelValue","changed","saved"],setup(h,{emit:g}){const n=h,c=g,u=e.computed(()=>`input-${Math.random().toString(36).substr(2,9)}`),a=e.ref(!1),d=e.ref(!1),m=e.ref(!1),r=e.ref(null),i=e.ref(null),k=e.ref(null),B=e.computed(()=>n.label?n.labelPosition==="left"&&n.labelWidth?{"grid-template-columns":`${n.labelWidth} 1fr`}:{}:{}),_=async t=>{if(n.autosave)try{await n.autosave(t),n.error||(c("saved"),a.value=!0,d.value=!1,setTimeout(()=>{a.value=!1},3e3))}catch(f){console.error("Autosave failed:",f)}},b=t=>{r.value&&clearTimeout(r.value),i.value&&clearTimeout(i.value),n.error||(d.value=!0),i.value=window.setTimeout(()=>{c("changed"),m.value=!0},500),r.value=window.setTimeout(()=>{_(t)},1500)},w=()=>{var t;(t=k.value)==null||t.focus()},V=t=>{t.style.height="auto",t.style.height=`${t.scrollHeight}px`},E=t=>{const f=t.target.value;c("update:modelValue",f),b(f),V(t.target)};return e.onUnmounted(()=>{r.value&&clearTimeout(r.value),i.value&&clearTimeout(i.value)}),(t,f)=>{const l=e.resolveComponent("font-awesome-icon");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["text-input",{[`label-${t.labelPosition}`]:t.label,[`label-align-${t.labelAlign}`]:t.label}]),style:e.normalizeStyle([{width:t.totalWidth||"100%"},B.value,{"--max-textarea-height":n.maxHeight||n.height||"14rem","--textarea-height":n.height||"5.5rem"}])},[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:u.value,class:"label"},e.toDisplayString(t.label),9,N)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["input-wrapper",{"has-error":t.error,"has-icon":t.icon}])},[t.icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:"icon-wrapper",onClick:w},[e.createVNode(l,{icon:t.icon,class:"icon"},null,8,["icon"])])):e.createCommentVNode("",!0),t.isTextarea?(e.openBlock(),e.createElementBlock("textarea",{key:2,id:u.value,value:t.modelValue,placeholder:t.placeholder,required:t.required,disabled:t.disabled,class:"input",onInput:E,ref_key:"inputRef",ref:k},null,40,T)):(e.openBlock(),e.createElementBlock("input",{key:1,id:u.value,type:t.type,value:t.modelValue,placeholder:t.placeholder,required:t.required,disabled:t.disabled,class:"input",onInput:E,ref_key:"inputRef",ref:k},null,40,S)),t.required&&!a.value&&!d.value?(e.openBlock(),e.createElementBlock("span",D,"required")):e.createCommentVNode("",!0),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[a.value&&!t.error?(e.openBlock(),e.createElementBlock("span",F,"saved")):e.createCommentVNode("",!0)]),_:1}),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[d.value&&!t.error?(e.openBlock(),e.createElementBlock("span",$,"changed")):e.createCommentVNode("",!0)]),_:1}),t.error?(e.openBlock(),e.createElementBlock("div",U,e.toDisplayString(t.error),1)):e.createCommentVNode("",!0),t.success?(e.openBlock(),e.createElementBlock("span",I,e.toDisplayString(t.success),1)):e.createCommentVNode("",!0)],2)],6)}}}),C=(h,g)=>{const n=h.__vccOpts||h;for(const[c,u]of g)n[c]=u;return n},z=C(M,[["__scopeId","data-v-cc2497d0"]]),q={class:"file-upload"},v={class:"upload-content"},A={key:0},L={key:1,class:"selected-files"},P={class:"file-name"},W={class:"file-size"},H={key:0,class:"error-message"},R={key:1,class:"progress-bar"},j=20*1024*1024,O=C(e.defineComponent({__name:"FileUpload",props:{icon:{},uploadUrl:{}},emits:["upload-complete","upload-error","files-selected","start-upload"],setup(h,{emit:g}){const n=h,c=g,u=e.ref(null),a=e.ref([]),d=e.ref(!1),m=e.ref(0),r=e.ref(""),i=e.ref(null),k=l=>{if(l===0)return"0 Bytes";const o=1024,s=["Bytes","KB","MB","GB"],y=Math.floor(Math.log(l)/Math.log(o));return parseFloat((l/Math.pow(o,y)).toFixed(2))+" "+s[y]},B=l=>l.size>j?(r.value=`File "${l.name}" exceeds the maximum size of 20MB`,!1):!0,_=()=>{d.value=!0},b=()=>{d.value=!1},w=l=>{var o;if(d.value=!1,r.value="",(o=l.dataTransfer)!=null&&o.files){const s=Array.from(l.dataTransfer.files);s.every(B)&&(a.value=[...a.value,...s])}},V=()=>{var l;(l=u.value)==null||l.click()},E=l=>{r.value="";const o=l.target;if(o.files){const s=Array.from(o.files);s.every(B)&&(a.value=[...a.value,...s])}o.value=""},t=async()=>{if(!n.uploadUrl){r.value="No upload URL provided";return}if(a.value.length===0){r.value="No files selected";return}const l=new FormData;a.value.forEach(o=>{l.append("files",o)});try{const o=new XMLHttpRequest;o.upload.addEventListener("progress",s=>{s.lengthComputable&&(m.value=s.loaded/s.total*100)}),o.addEventListener("load",()=>{if(o.status>=200&&o.status<300)i.value={type:"success",message:"Upload completed successfully"},c("upload-complete",a.value),a.value=[],m.value=0;else throw new Error(`Upload failed with status ${o.status}`)}),o.addEventListener("error",()=>{throw new Error("Upload failed")}),o.open("POST",n.uploadUrl),o.send(l)}catch(o){const s=o instanceof Error?o.message:"Upload failed";r.value=s,i.value={type:"error",message:s},c("upload-error",s)}},f=()=>{c("start-upload",a.value)};return e.watch(a,l=>{l.length>0&&(n.uploadUrl?t():c("files-selected",l))}),(l,o)=>{const s=e.resolveComponent("font-awesome-icon");return e.openBlock(),e.createElementBlock("div",q,[e.createElementVNode("div",{class:e.normalizeClass(["upload-area",{"is-dragging":d.value,"has-files":a.value.length>0}]),onDragenter:e.withModifiers(_,["prevent"]),onDragleave:e.withModifiers(b,["prevent"]),onDragover:o[0]||(o[0]=e.withModifiers(()=>{},["prevent"])),onDrop:e.withModifiers(w,["prevent"]),onClick:V},[e.createElementVNode("input",{ref_key:"fileInput",ref:u,type:"file",multiple:"",class:"file-input",onChange:E},null,544),e.createElementVNode("div",v,[e.createVNode(s,{icon:["fas",l.icon||"upload"]},null,8,["icon"]),a.value.length===0?(e.openBlock(),e.createElementBlock("p",A,"Drag & drop files here or click to select")):(e.openBlock(),e.createElementBlock("div",L,[e.createElementVNode("p",null,e.toDisplayString(a.value.length)+" file(s) selected",1),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.value,(y,X)=>(e.openBlock(),e.createElementBlock("div",{key:X,class:"file-info"},[e.createElementVNode("span",P,e.toDisplayString(y.name),1),e.createElementVNode("span",W,e.toDisplayString(k(y.size)),1)]))),128))]))])],34),r.value?(e.openBlock(),e.createElementBlock("div",H,e.toDisplayString(r.value),1)):e.createCommentVNode("",!0),m.value>0&&m.value<100?(e.openBlock(),e.createElementBlock("div",R,[e.createElementVNode("div",{class:"progress",style:e.normalizeStyle({width:`${m.value}%`})},null,4)])):e.createCommentVNode("",!0),i.value?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(["status-message",i.value.type])},e.toDisplayString(i.value.message),3)):e.createCommentVNode("",!0),a.value.length>0&&!l.uploadUrl?(e.openBlock(),e.createElementBlock("button",{key:3,class:"upload-button",onClick:f}," Upload Files ")):e.createCommentVNode("",!0)])}}}),[["__scopeId","data-v-75b2aeea"]]);p.FileUpload=O,p.TextInput=z,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});
+(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.VueInputComponents={},u.Vue))})(this,function(u,e){"use strict";const N=["for"],S=["id","type","value","placeholder","required","disabled"],T=["id","value","placeholder","required","disabled"],$={key:3,class:"status-indicator required-indicator"},D={key:0,class:"status-indicator saved-indicator"},I={key:0,class:"status-indicator changed-indicator"},q={key:4,class:"error-message"},F={key:5,class:"message success-message"},U=e.defineComponent({__name:"TextInput",props:{modelValue:{},label:{},type:{},icon:{},placeholder:{},required:{type:Boolean},disabled:{type:Boolean},error:{},success:{},labelPosition:{},labelAlign:{},totalWidth:{},inputWidth:{},labelWidth:{},autosave:{type:Function},isTextarea:{type:Boolean},maxHeight:{},height:{}},emits:["update:modelValue","changed","saved"],setup(r,{emit:f}){const n=r,c=f,d=e.computed(()=>`input-${Math.random().toString(36).substr(2,9)}`),o=e.ref(!1),m=e.ref(!1),h=e.ref(!1),i=e.ref(null),p=e.ref(null),k=e.ref(null),B=e.computed(()=>n.label?n.labelPosition==="left"&&n.labelWidth?{"grid-template-columns":`${n.labelWidth} 1fr`}:{}:{}),V=async t=>{if(n.autosave)try{await n.autosave(t),n.error||(c("saved"),o.value=!0,m.value=!1,setTimeout(()=>{o.value=!1},3e3))}catch(g){console.error("Autosave failed:",g)}},w=t=>{i.value&&clearTimeout(i.value),p.value&&clearTimeout(p.value),n.error||(m.value=!0),p.value=window.setTimeout(()=>{c("changed"),h.value=!0},500),i.value=window.setTimeout(()=>{V(t)},1500)},C=()=>{var t;(t=k.value)==null||t.focus()},_=t=>{t.style.height="auto",t.style.height=`${t.scrollHeight}px`},b=t=>{const g=t.target.value;c("update:modelValue",g),w(g),_(t.target)};return e.onUnmounted(()=>{i.value&&clearTimeout(i.value),p.value&&clearTimeout(p.value)}),(t,g)=>{const a=e.resolveComponent("font-awesome-icon");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["text-input",{[`label-${t.labelPosition}`]:t.label,[`label-align-${t.labelAlign}`]:t.label}]),style:e.normalizeStyle([{width:t.totalWidth||"100%"},B.value,{"--max-textarea-height":n.maxHeight||n.height||"14rem","--textarea-height":n.height||"5.5rem"}])},[t.label?(e.openBlock(),e.createElementBlock("label",{key:0,for:d.value,class:"label"},e.toDisplayString(t.label),9,N)):e.createCommentVNode("",!0),e.createElementVNode("div",{class:e.normalizeClass(["input-wrapper",{"has-error":t.error,"has-icon":t.icon}])},[t.icon?(e.openBlock(),e.createElementBlock("div",{key:0,class:"icon-wrapper",onClick:C},[e.createVNode(a,{icon:t.icon,class:"icon"},null,8,["icon"])])):e.createCommentVNode("",!0),t.isTextarea?(e.openBlock(),e.createElementBlock("textarea",{key:2,id:d.value,value:t.modelValue,placeholder:t.placeholder,required:t.required,disabled:t.disabled,class:"input",onInput:b,ref_key:"inputRef",ref:k},null,40,T)):(e.openBlock(),e.createElementBlock("input",{key:1,id:d.value,type:t.type,value:t.modelValue,placeholder:t.placeholder,required:t.required,disabled:t.disabled,class:"input",onInput:b,ref_key:"inputRef",ref:k},null,40,S)),t.required&&!o.value&&!m.value?(e.openBlock(),e.createElementBlock("span",$,"required")):e.createCommentVNode("",!0),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[o.value&&!t.error?(e.openBlock(),e.createElementBlock("span",D,"saved")):e.createCommentVNode("",!0)]),_:1}),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[m.value&&!t.error?(e.openBlock(),e.createElementBlock("span",I,"changed")):e.createCommentVNode("",!0)]),_:1}),t.error?(e.openBlock(),e.createElementBlock("div",q,e.toDisplayString(t.error),1)):e.createCommentVNode("",!0),t.success?(e.openBlock(),e.createElementBlock("span",F,e.toDisplayString(t.success),1)):e.createCommentVNode("",!0)],2)],6)}}}),E=(r,f)=>{const n=r.__vccOpts||r;for(const[c,d]of f)n[c]=d;return n},z=E(U,[["__scopeId","data-v-cc2497d0"]]),M={class:"text-area-input"},A=["value","placeholder","disabled","required","maxlength","rows"],L={key:1,class:"error-message"},P=E(e.defineComponent({__name:"TextAreaInput",props:{modelValue:{type:String,required:!0},label:{type:String,default:""},placeholder:{type:String,default:""},error:{type:String,default:""},disabled:{type:Boolean,default:!1},required:{type:Boolean,default:!1},maxlength:{type:Number,default:void 0},rows:{type:Number,default:4}},emits:["update:modelValue"],setup(r,{emit:f}){const n=f,c=d=>{const o=d.target;n("update:modelValue",o.value)};return(d,o)=>(e.openBlock(),e.createElementBlock("div",M,[r.label?(e.openBlock(),e.createElementBlock("label",{key:0,class:e.normalizeClass({required:r.required})},e.toDisplayString(r.label),3)):e.createCommentVNode("",!0),e.createElementVNode("textarea",{value:r.modelValue,onInput:c,placeholder:r.placeholder,disabled:r.disabled,required:r.required,maxlength:r.maxlength,rows:r.rows,class:e.normalizeClass({error:!!r.error})},null,42,A),r.error?(e.openBlock(),e.createElementBlock("div",L,e.toDisplayString(r.error),1)):e.createCommentVNode("",!0)]))}}),[["__scopeId","data-v-2e843729"]]),W={class:"file-upload"},H={class:"upload-content"},R={key:0},j={key:1,class:"selected-files"},v={class:"file-name"},O={class:"file-size"},x={key:0,class:"error-message"},X={key:1,class:"progress-bar"},G=20*1024*1024,K=E(e.defineComponent({__name:"FileUpload",props:{icon:{},uploadUrl:{}},emits:["upload-complete","upload-error","files-selected","start-upload"],setup(r,{emit:f}){const n=r,c=f,d=e.ref(null),o=e.ref([]),m=e.ref(!1),h=e.ref(0),i=e.ref(""),p=e.ref(null),k=a=>{if(a===0)return"0 Bytes";const l=1024,s=["Bytes","KB","MB","GB"],y=Math.floor(Math.log(a)/Math.log(l));return parseFloat((a/Math.pow(l,y)).toFixed(2))+" "+s[y]},B=a=>a.size>G?(i.value=`File "${a.name}" exceeds the maximum size of 20MB`,!1):!0,V=()=>{m.value=!0},w=()=>{m.value=!1},C=a=>{var l;if(m.value=!1,i.value="",(l=a.dataTransfer)!=null&&l.files){const s=Array.from(a.dataTransfer.files);s.every(B)&&(o.value=[...o.value,...s])}},_=()=>{var a;(a=d.value)==null||a.click()},b=a=>{i.value="";const l=a.target;if(l.files){const s=Array.from(l.files);s.every(B)&&(o.value=[...o.value,...s])}l.value=""},t=async()=>{if(!n.uploadUrl){i.value="No upload URL provided";return}if(o.value.length===0){i.value="No files selected";return}const a=new FormData;o.value.forEach(l=>{a.append("files",l)});try{const l=new XMLHttpRequest;l.upload.addEventListener("progress",s=>{s.lengthComputable&&(h.value=s.loaded/s.total*100)}),l.addEventListener("load",()=>{if(l.status>=200&&l.status<300)p.value={type:"success",message:"Upload completed successfully"},c("upload-complete",o.value),o.value=[],h.value=0;else throw new Error(`Upload failed with status ${l.status}`)}),l.addEventListener("error",()=>{throw new Error("Upload failed")}),l.open("POST",n.uploadUrl),l.send(a)}catch(l){const s=l instanceof Error?l.message:"Upload failed";i.value=s,p.value={type:"error",message:s},c("upload-error",s)}},g=()=>{c("start-upload",o.value)};return e.watch(o,a=>{a.length>0&&(n.uploadUrl?t():c("files-selected",a))}),(a,l)=>{const s=e.resolveComponent("font-awesome-icon");return e.openBlock(),e.createElementBlock("div",W,[e.createElementVNode("div",{class:e.normalizeClass(["upload-area",{"is-dragging":m.value,"has-files":o.value.length>0}]),onDragenter:e.withModifiers(V,["prevent"]),onDragleave:e.withModifiers(w,["prevent"]),onDragover:l[0]||(l[0]=e.withModifiers(()=>{},["prevent"])),onDrop:e.withModifiers(C,["prevent"]),onClick:_},[e.createElementVNode("input",{ref_key:"fileInput",ref:d,type:"file",multiple:"",class:"file-input",onChange:b},null,544),e.createElementVNode("div",H,[e.createVNode(s,{icon:["fas",a.icon||"upload"]},null,8,["icon"]),o.value.length===0?(e.openBlock(),e.createElementBlock("p",R,"Drag & drop files here or click to select")):(e.openBlock(),e.createElementBlock("div",j,[e.createElementVNode("p",null,e.toDisplayString(o.value.length)+" file(s) selected",1),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.value,(y,Z)=>(e.openBlock(),e.createElementBlock("div",{key:Z,class:"file-info"},[e.createElementVNode("span",v,e.toDisplayString(y.name),1),e.createElementVNode("span",O,e.toDisplayString(k(y.size)),1)]))),128))]))])],34),i.value?(e.openBlock(),e.createElementBlock("div",x,e.toDisplayString(i.value),1)):e.createCommentVNode("",!0),h.value>0&&h.value<100?(e.openBlock(),e.createElementBlock("div",X,[e.createElementVNode("div",{class:"progress",style:e.normalizeStyle({width:`${h.value}%`})},null,4)])):e.createCommentVNode("",!0),p.value?(e.openBlock(),e.createElementBlock("div",{key:2,class:e.normalizeClass(["status-message",p.value.type])},e.toDisplayString(p.value.message),3)):e.createCommentVNode("",!0),o.value.length>0&&!a.uploadUrl?(e.openBlock(),e.createElementBlock("button",{key:3,class:"upload-button",onClick:g}," Upload Files ")):e.createCommentVNode("",!0)])}}}),[["__scopeId","data-v-75b2aeea"]]);u.FileUpload=K,u.TextAreaInput=P,u.TextInput=z,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});