@fifteen/design-system-vue/dist/cjs/components/form/FFileUpload.js

Vue 3 (Composition API + Typescript) implementation of the Fifteen Design System

"use strict";const k=require("./FField.js");;/* empty css         */const B=require("../FButton.js");;/* empty css           */const T=require("../FIcon.js");;/* empty css         */const e=require("vue"),m=require("@vee-validate/rules"),V=require("../../.generated/icons.js"),q=require("../../composables/useIcon.js"),z=require("../../composables/useFieldWithValidation.js"),I=require("../../composables/useInputEventBindings.js"),N={class:"FFileUpload__content"},E=["id","name","multiple","disabled","accept","aria-label"],M={class:"FFileUpload__fileNames"},S=e.defineComponent({__name:"FFileUpload",props:{multiple:{type:Boolean,default:!1},allowedMimeTypes:{default:()=>[]},maximumSize:{default:5e4},iconName:{default:"upload"},size:{default:"medium"},buttonText:{default:""},fieldset:{type:Boolean},name:{default:"defaultName"},label:{},labelTextColor:{},hint:{},hintTextColor:{},hideHint:{type:Boolean},hintIcon:{},modelValue:{default:null},disabled:{type:Boolean,default:!1},loading:{type:Boolean},color:{default:"neutral--light-3"},textColor:{default:"neutral--dark-4"},errorColor:{default:"danger"},validationTrigger:{default:"change"},rules:{type:[Function,Array],default:()=>[]},errorMessage:{default:""},validateOnMount:{type:Boolean,default:!1},focusColor:{},borderColor:{}},emits:["update:modelValue","change","files"],setup(f,{emit:g}){const t=f;q.registerIcons("icons",{upload:V.upload});const r=e.ref(),{isValid:F,hint:h,value:a,validate:b}=z.useFieldWithValidation(t,{validateOnMount:t?.validateOnMount,rules:[d]}),u=g;function d(l){const o=t.allowedMimeTypes.length>0?m.mimes(l,t.allowedMimeTypes):!0,i=m.size(l,{size:t.maximumSize});return o&&i}const s=e.computed(()=>a.value?Array.isArray(a.value)?a.value:[a.value]:[]);e.watch(s,l=>{l.length>0&&d(l)&&u("files",l)});const{handleChange:c}=I.useInputEventBindings(b,t.validationTrigger,u),y=e.computed(()=>t.disabled?"neutral--dark-1":F.value?t.hintTextColor:t.errorColor),_=e.computed(()=>t.disabled?"neutral--dark-1":t.textColor),v=e.computed(()=>({"FFileUpload--disabled":t.disabled}));return(l,o)=>{const i=T,p=B,C=k;return e.openBlock(),e.createBlock(C,e.mergeProps({class:["FFileUpload",e.unref(v)]},{name:l.name,label:l.label,labelTextColor:l.labelTextColor,hint:e.unref(h),hideHint:l.hideHint,hintTextColor:e.unref(y),hintIcon:l.hintIcon}),{default:e.withCtx(()=>[e.createElementVNode("div",N,[e.createElementVNode("input",{id:l.name,ref_key:"underlyingFileInputRef",ref:r,name:l.name,multiple:l.multiple,disabled:l.disabled,accept:l.allowedMimeTypes?.join(","),"aria-label":l.buttonText,type:"file",onChange:o[0]||(o[0]=(...n)=>e.unref(c)&&e.unref(c)(...n))},null,40,E),e.createVNode(p,{size:l.size,disabled:l.disabled,background:l.color,color:l.textColor,loading:l.loading,static:"",onClick:o[1]||(o[1]=n=>e.unref(r)?.click())},{default:e.withCtx(()=>[l.iconName?(e.openBlock(),e.createBlock(i,{key:0,name:l.iconName,color:e.unref(_)},null,8,["name","color"])):e.createCommentVNode("",!0),e.createElementVNode("span",null,e.toDisplayString(l.buttonText),1)]),_:1},8,["size","disabled","background","color","loading"]),e.createElementVNode("ul",M,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(s),n=>(e.openBlock(),e.createElementBlock("li",{key:n.name},e.toDisplayString(n?.name??""),1))),128))])])]),_:1},16,["class"])}}});module.exports=S;