@a-vision-software/vue-input-components 1.1.40 → 1.1.42

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-vision-software/vue-input-components",
-  "version": "1.1.40",
+  "version": "1.1.42",
   "description": "A collection of reusable Vue 3 input components with TypeScript support",
   "author": "A-Vision Software",
   "license": "MIT",
@@ -20,13 +20,13 @@
     "dist",
     "src"
   ],
-  "main": "./dist/vue-input-components.es.js",
+  "main": "./dist/vue-input-components.cjs.js",
   "module": "./dist/vue-input-components.es.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/vue-input-components.es.js",
+      "import": "./dist/vue-input-components.cjs.js",
       "default": "./dist/vue-input-components.es.js",
       "require": "./dist/vue-input-components.umd.js"
     },