ablok-components 0.0.31 → 0.0.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/ablok-components.es.js +282 -187
  2. package/dist/ablok-components.umd.js +1 -1
  3. package/dist/components/file-input.vue.d.ts +83 -50
  4. package/dist/components/media-upload.vue.d.ts +439 -0
  5. package/dist/index.d.ts +1 -0
  6. package/dist/style.css +1 -1
  7. package/package.json +1 -1
package/dist/ablok-components.umd.js CHANGED
@@ -1 +1 @@
1
- (function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.AblokComponents={},c.Vue))})(this,function(c,e){"use strict";const y={class:"icon",preserveAspectRatio:"xMaxYMin"},p=["xlink:href"],b=e.defineComponent({__name:"svg-icon",props:{basePath:{type:String,default:"/symbol-defs.svg"},prefix:{type:String,default:"icon-"},symbol:{type:String,default:""},size:{type:String,default:"default"}},setup(t){return(r,o)=>(e.openBlock(),e.createElementBlock("i",{class:e.normalizeClass(["svg-icon",{[`svg-icon--${t.size}`]:t.size}])},[(e.openBlock(),e.createElementBlock("svg",y,[e.createElementVNode("use",{"xlink:href":`${t.basePath}#${t.prefix}${t.symbol}`,"xmlns:xlink":"http://www.w3.org/1999/xlink",x:"0",y:"0"},null,8,p)]))],2))}}),Z="",g={class:"loading-spinner d-block"},h={class:"loading-spinner__animation"},B={class:"d-block",version:"1.1",id:"L9",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",x:"0px",y:"0px",viewBox:"0 0 100 100","enable-background":"new 0 0 0 0","xml:space":"preserve"},k=["fill"],$=[e.createElementVNode("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"1s",from:"0 50 50",to:"360 50 50",repeatCount:"indefinite"},null,-1)],S=e.defineComponent({__name:"loading-spinner",props:{color:{type:String,default:"#fff"}},setup(t){return(r,o)=>(e.openBlock(),e.createElementBlock("span",g,[e.createElementVNode("span",h,[(e.openBlock(),e.createElementBlock("svg",B,[e.createElementVNode("path",{fill:t.color,d:"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"},$,8,k)]))]),e.renderSlot(r.$slots,"default")]))}}),v="",V=["type","disabled","href","to"],x=e.defineComponent({__name:"base-button",props:{type:null,caption:null,variant:null,size:null,icon:null,href:null,to:null,disabled:{type:Boolean},pending:{type:Boolean},outlined:{type:Boolean},rounded:{type:Boolean},fab:{type:Boolean}},setup(t){const r=t,o=e.computed(()=>r.caption&&!r.fab);return(a,d)=>{const n=e.resolveComponent("svg-icon");return e.openBlock(),e.createElementBlock("button",{type:t.type,disabled:t.disabled,href:t.href,to:t.to,class:e.normalizeClass(["base-button btn btn-primary",{disabled:t.disabled,pending:t.pending,rounded:t.rounded,outlined:t.outlined,fab:t.fab,"x-large":t.size==="x-large",large:t.size==="large",small:t.size==="small","x-small":t.size==="x-small"}])},[e.renderSlot(a.$slots,"default",{},()=>[t.icon?(e.openBlock(),e.createBlock(n,{key:0,id:t.icon,class:"base-button__caption"},null,8,["id"])):e.createCommentVNode("",!0),e.unref(o)?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(["base-button__caption",{"icon-padding":t.icon}])},e.toDisplayString(t.caption),3)):e.createCommentVNode("",!0)])],10,V)}}}),ee="";function m(){return(new Date().valueOf()+Math.random()).toString(36)}const E={class:"input-group form-input__input-group"},N=["type","id","name","placeholder","pattern","disabled","read-only","required","maxlength","checked","aria-label"],w={key:0,class:"form-input__color-swatch"},C=["name","id","disabled","read-only","required","aria-label"],q=["for","innerHTML"],M=e.defineComponent({__name:"form-input",props:{modelValue:{type:[String,Number,Boolean],default:""},type:{type:String,default:"text"},name:{type:String,default:()=>m()},id:{type:String,default:()=>m()},label:{type:String,default:""},placeholder:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},maxlength:{type:Number},pattern:{type:String,default:null},checked:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(t,{emit:r}){const o=t,a=e.computed({get(){return o.modelValue},set(d){r("update:modelValue",d)}});return(d,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["form-input",`form-input--${t.type}`])},[e.createElementVNode("div",E,[e.renderSlot(d.$slots,"input-prepend"),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":n[0]||(n[0]=l=>e.isRef(a)?a.value=l:null),type:t.type==="color"?"text":t.type,id:t.id,name:t.name,placeholder:t.placeholder,pattern:t.pattern,disabled:t.disabled,"read-only":t.readOnly,required:t.required,maxlength:t.maxlength,checked:t.checked,class:"form-control","aria-label":t.label},null,8,N),[[e.vModelDynamic,e.unref(a)]]),e.renderSlot(d.$slots,"input-append",{},()=>[t.type==="color"?(e.openBlock(),e.createElementBlock("span",w,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":n[1]||(n[1]=l=>e.isRef(a)?a.value=l:null),type:"color",name:`${t.name}-color`,id:`${t.id}-color`,disabled:t.disabled,"read-only":t.readOnly,required:t.required,class:"form-control","aria-label":t.label},null,8,C),[[e.vModelText,e.unref(a)]])])):e.createCommentVNode("",!0)])]),e.renderSlot(d.$slots,"label",{},()=>[e.createElementVNode("label",{for:t.id,class:"form-input__label",innerHTML:`${t.label}${t.required?" *":""}`},null,8,q)])],2))}}),te="",O={class:"radio-group"},z=["for"],T=e.defineComponent({__name:"check-group",props:{modelValue:{default:[]},options:{type:Array,default:[]},name:{type:String,default:()=>m()},id:{type:String,default:()=>m()},label:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1}},emits:["change","update:modelValue"],setup(t,{emit:r}){const o=t,a=e.ref([]);return e.watch(()=>o.modelValue,(d,n)=>{a.value=o.options.map(l=>l.value?o.modelValue.some(i=>i["value "]===l.value):o.modelValue.some(i=>i===l))},{immediate:!0}),e.watch(a,(d,n)=>{const l=d.reduce((i,s,u)=>{const f=s&&o.options[u]?[o.options[u]||o.options[u]]:[];return[...i,...f]},[]);r("update:modelValue",l)},{deep:!0}),e.onBeforeMount(()=>{}),(d,n)=>{const l=e.resolveComponent("form-input");return e.openBlock(),e.createElementBlock("div",O,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(i,s)=>(e.openBlock(),e.createBlock(l,{key:s,modelValue:e.unref(a)[s],"onUpdate:modelValue":u=>e.unref(a)[s]=u,type:"checkbox",name:t.name,id:`${t.id}-${s}`,label:`${i.text||i}${t.required?" *":""}`,disabled:t.disabled,"read-only":t.readOnly,required:t.required},null,8,["modelValue","onUpdate:modelValue","name","id","label","disabled","read-only","required"]))),128)),e.createElementVNode("label",{for:t.id},[e.renderSlot(d.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,z)])}}}),D={class:"radio-group"},L=["for"],I=e.defineComponent({__name:"radio-group",props:{modelValue:{default:!1},options:{type:Array,default:[]},name:{type:String,default:()=>m()},id:{type:String,default:()=>m()},label:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1}},emits:["change","update:modelValue"],setup(t,{emit:r}){const o=t;e.ref(o.options.map(d=>d.value===o.modelValue));function a(d){r("update:modelValue",d)}return e.onBeforeMount(()=>{}),(d,n)=>{const l=e.resolveComponent("form-input");return e.openBlock(),e.createElementBlock("div",D,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(i,s)=>(e.openBlock(),e.createBlock(l,{key:s,type:"radio",name:t.name,id:`${t.id}-${s}`,value:i.value||i,label:`${i.text||i}${t.required?" *":""}`,checked:i.value?i.value===t.modelValue:i===t.modelValue,disabled:t.disabled,"read-only":t.readOnly,required:t.required,onChange:u=>a(i)},null,8,["name","id","value","label","checked","disabled","read-only","required","onChange"]))),128)),e.createElementVNode("label",{for:t.id},[e.renderSlot(d.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,L)])}}}),A={class:"input input-dropdown"},F={class:"dropdown"},P={class:"btn-group",role:"group"},R=["id","disabled"],U=["aria-labelledby"],H=["onClick"],j=["for"],G=e.defineComponent({__name:"input-dropdown",props:{modelValue:{type:[String,Number,Boolean,Object],default:""},name:{type:String,default:()=>m()},id:{type:String,default:()=>m()},label:{type:String,default:""},placeholder:{type:String,default:"Please select"},options:{type:Array,default:[]},variant:{type:String,default:""},color:{type:String,default:""},disabled:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},required:{type:Boolean,default:!1},outline:{type:Boolean,default:!0},resetOption:{type:Boolean,default:!0}},emits:["update:modelValue"],setup(t,{emit:r}){const o=t;e.computed({get(){return o.modelValue},set(l){r("update:modelValue",l)}});function a(l){r("update:modelValue",l)}const d=e.computed(()=>[{text:"Please select"},...o.options.map(l=>typeof l=="string"?{value:l,text:l}:l)]),n=e.computed(()=>[...o.options].find(l=>JSON.stringify(l.value)===JSON.stringify(o.modelValue)));return(l,i)=>(e.openBlock(),e.createElementBlock("div",A,[e.createElementVNode("div",F,[e.createElementVNode("div",P,[e.createElementVNode("button",{class:e.normalizeClass(["btn dropdown-toggle",{[`btn-${t.variant}`]:t.variant,[`btn-${t.color}`]:t.color,[`btn-${t.disabled}`]:t.disabled,[`btn-outline-${t.color||"dark"}`]:t.outline}]),type:"button",id:t.id,"data-bs-toggle":"dropdown","aria-expanded":"false",disabled:t.disabled},e.toDisplayString(e.unref(n)?e.unref(n).text:t.placeholder),11,R),e.createElementVNode("ul",{class:"dropdown-menu","aria-labelledby":t.id},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(d),(s,u)=>(e.openBlock(),e.createElementBlock("li",{key:u},[e.renderSlot(l.$slots,"option",{},()=>[e.createElementVNode("a",{class:"dropdown-item",onClick:e.withModifiers(f=>a(s.value),["prevent"])},e.toDisplayString(s.text),9,H)])]))),128))],8,U)])]),e.createElementVNode("label",{for:t.id},[e.renderSlot(l.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,j)]))}}),J={class:"input-group"},X=["v-model","id","name"],Y=["name","id","placeholder","pattern","disabled","read-only","required","maxlength","checked","aria-label"],K=["for"],Q=["for","innerHTML"],W=e.defineComponent({__name:"file-input",props:{modelValue:{type:[String,Number,Boolean],default:""},type:{type:String,default:"text"},name:{type:String,default:()=>m()},id:{type:String,default:()=>m()},label:{type:String,default:""},placeholder:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},maxlength:{type:Number},pattern:{type:String,default:null},checked:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(t,{emit:r}){function o(n){const l=n.target&&n.target.files;l&&(a.splice(0,a.length),Array.from(l).forEach(i=>{a.push(i)}))}const a=e.reactive([]),d=e.computed(()=>a.map(n=>n.name));return e.watch(()=>a,(n,l)=>{n!==l&&r("update:modelValue",n)},{deep:!0}),(n,l)=>{const i=e.resolveComponent("svg-icon");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["file-input","file-input--primary"])},[e.createElementVNode("div",J,[e.renderSlot(n.$slots,"input-prepend"),e.createElementVNode("input",{"v-model":a,type:"file",id:t.id,name:t.name,onChange:o,class:"d-none"},null,40,X),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":l[0]||(l[0]=s=>e.isRef(d)?d.value=s:null),type:"text",name:`${t.name}--text`,id:`${t.name}--text`,placeholder:t.placeholder,pattern:t.pattern,disabled:t.disabled,"read-only":t.readOnly,required:t.required,maxlength:t.maxlength,checked:t.checked,class:"form-control","aria-label":t.label},null,8,Y),[[e.vModelText,e.unref(d)]]),e.renderSlot(n.$slots,"input-append",{},()=>[e.createElementVNode("label",{for:t.id,class:"input-group-text"},[e.createVNode(i,{symbol:"upload"})],8,K)])]),e.renderSlot(n.$slots,"label",{},()=>[e.createElementVNode("label",{for:t.id,class:"form-input__label",innerHTML:`${t.label}${t.required?" *":""}`},null,8,Q)])])}}}),le="";c.BaseButton=x,c.CheckGroup=T,c.FileInput=W,c.FormInput=M,c.InputDropdown=G,c.LoadingSpinner=S,c.RadioGroup=I,c.SvgIcon=b,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
1
+ (function(s,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(s=typeof globalThis<"u"?globalThis:s||self,e(s.AblokComponents={},s.Vue))})(this,function(s,e){"use strict";const y={class:"icon",preserveAspectRatio:"xMaxYMin"},g=["xlink:href"],b=e.defineComponent({__name:"svg-icon",props:{basePath:{type:String,default:"/symbol-defs.svg"},prefix:{type:String,default:"icon-"},symbol:{type:String,default:""},size:{type:String,default:"default"}},setup(t){return(r,l)=>(e.openBlock(),e.createElementBlock("i",{class:e.normalizeClass(["svg-icon",{[`svg-icon--${t.size}`]:t.size}])},[(e.openBlock(),e.createElementBlock("svg",y,[e.createElementVNode("use",{"xlink:href":`${t.basePath}#${t.prefix}${t.symbol}`,"xmlns:xlink":"http://www.w3.org/1999/xlink",x:"0",y:"0"},null,8,g)]))],2))}}),oe="",h={class:"loading-spinner d-block"},B={class:"loading-spinner__animation"},k={class:"d-block",version:"1.1",id:"L9",xmlns:"http://www.w3.org/2000/svg","xmlns:xlink":"http://www.w3.org/1999/xlink",x:"0px",y:"0px",viewBox:"0 0 100 100","enable-background":"new 0 0 0 0","xml:space":"preserve"},$=["fill"],S=[e.createElementVNode("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"1s",from:"0 50 50",to:"360 50 50",repeatCount:"indefinite"},null,-1)],V=e.defineComponent({__name:"loading-spinner",props:{color:{type:String,default:"#fff"}},setup(t){return(r,l)=>(e.openBlock(),e.createElementBlock("span",h,[e.createElementVNode("span",B,[(e.openBlock(),e.createElementBlock("svg",k,[e.createElementVNode("path",{fill:t.color,d:"M73,50c0-12.7-10.3-23-23-23S27,37.3,27,50 M30.9,50c0-10.5,8.5-19.1,19.1-19.1S69.1,39.5,69.1,50"},S,8,$)]))]),e.renderSlot(r.$slots,"default")]))}}),ie="",E=["type","disabled","href","to"],w=e.defineComponent({__name:"base-button",props:{type:null,caption:null,variant:null,size:null,icon:null,href:null,to:null,disabled:{type:Boolean},pending:{type:Boolean},outlined:{type:Boolean},rounded:{type:Boolean},fab:{type:Boolean}},setup(t){const r=t,l=e.computed(()=>r.caption&&!r.fab);return(a,o)=>{const d=e.resolveComponent("svg-icon");return e.openBlock(),e.createElementBlock("button",{type:t.type,disabled:t.disabled,href:t.href,to:t.to,class:e.normalizeClass(["base-button btn btn-primary",{disabled:t.disabled,pending:t.pending,rounded:t.rounded,outlined:t.outlined,fab:t.fab,"x-large":t.size==="x-large",large:t.size==="large",small:t.size==="small","x-small":t.size==="x-small"}])},[e.renderSlot(a.$slots,"default",{},()=>[t.icon?(e.openBlock(),e.createBlock(d,{key:0,id:t.icon,class:"base-button__caption"},null,8,["id"])):e.createCommentVNode("",!0),e.unref(l)?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(["base-button__caption",{"icon-padding":t.icon}])},e.toDisplayString(t.caption),3)):e.createCommentVNode("",!0)])],10,E)}}}),re="";function u(){return(new Date().valueOf()+Math.random()).toString(36)}const N={class:"input-group form-input__input-group"},C=["type","id","name","placeholder","pattern","disabled","read-only","required","maxlength","checked","aria-label"],x={key:0,class:"form-input__color-swatch"},q=["name","id","disabled","read-only","required","aria-label"],M=["for","innerHTML"],O=e.defineComponent({__name:"form-input",props:{modelValue:{type:[String,Number,Boolean],default:""},type:{type:String,default:"text"},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},label:{type:String,default:""},placeholder:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},maxlength:{type:Number},pattern:{type:String,default:null},checked:{type:Boolean,default:!1}},emits:["update:modelValue"],setup(t,{emit:r}){const l=t,a=e.computed({get(){return l.modelValue},set(o){r("update:modelValue",o)}});return(o,d)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["form-input",`form-input--${t.type}`])},[e.createElementVNode("div",N,[e.renderSlot(o.$slots,"input-prepend"),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":d[0]||(d[0]=n=>e.isRef(a)?a.value=n:null),type:t.type==="color"?"text":t.type,id:t.id,name:t.name,placeholder:t.placeholder,pattern:t.pattern,disabled:t.disabled,"read-only":t.readOnly,required:t.required,maxlength:t.maxlength,checked:t.checked,class:"form-control","aria-label":t.label},null,8,C),[[e.vModelDynamic,e.unref(a)]]),e.renderSlot(o.$slots,"input-append",{},()=>[t.type==="color"?(e.openBlock(),e.createElementBlock("span",x,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":d[1]||(d[1]=n=>e.isRef(a)?a.value=n:null),type:"color",name:`${t.name}-color`,id:`${t.id}-color`,disabled:t.disabled,"read-only":t.readOnly,required:t.required,class:"form-control","aria-label":t.label},null,8,q),[[e.vModelText,e.unref(a)]])])):e.createCommentVNode("",!0)])]),e.renderSlot(o.$slots,"label",{},()=>[e.createElementVNode("label",{for:t.id,class:"form-input__label",innerHTML:`${t.label}${t.required?" *":""}`},null,8,M)])],2))}}),ce="",z={class:"radio-group"},D=["for"],L=e.defineComponent({__name:"check-group",props:{modelValue:{default:[]},options:{type:Array,default:[]},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},label:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1}},emits:["change","update:modelValue"],setup(t,{emit:r}){const l=t,a=e.ref([]);return e.watch(()=>l.modelValue,(o,d)=>{a.value=l.options.map(n=>n.value?l.modelValue.some(i=>i["value "]===n.value):l.modelValue.some(i=>i===n))},{immediate:!0}),e.watch(a,(o,d)=>{const n=o.reduce((i,c,m)=>{const f=c&&l.options[m]?[l.options[m]||l.options[m]]:[];return[...i,...f]},[]);r("update:modelValue",n)},{deep:!0}),e.onBeforeMount(()=>{}),(o,d)=>{const n=e.resolveComponent("form-input");return e.openBlock(),e.createElementBlock("div",z,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(i,c)=>(e.openBlock(),e.createBlock(n,{key:c,modelValue:e.unref(a)[c],"onUpdate:modelValue":m=>e.unref(a)[c]=m,type:"checkbox",name:t.name,id:`${t.id}-${c}`,label:`${i.text||i}${t.required?" *":""}`,disabled:t.disabled,"read-only":t.readOnly,required:t.required},null,8,["modelValue","onUpdate:modelValue","name","id","label","disabled","read-only","required"]))),128)),e.createElementVNode("label",{for:t.id},[e.renderSlot(o.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,D)])}}}),T={class:"radio-group"},U=["for"],A=e.defineComponent({__name:"radio-group",props:{modelValue:{default:!1},options:{type:Array,default:[]},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},label:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1}},emits:["change","update:modelValue"],setup(t,{emit:r}){const l=t;e.ref(l.options.map(o=>o.value===l.modelValue));function a(o){r("update:modelValue",o)}return e.onBeforeMount(()=>{}),(o,d)=>{const n=e.resolveComponent("form-input");return e.openBlock(),e.createElementBlock("div",T,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(i,c)=>(e.openBlock(),e.createBlock(n,{key:c,type:"radio",name:t.name,id:`${t.id}-${c}`,value:i.value||i,label:`${i.text||i}${t.required?" *":""}`,checked:i.value?i.value===t.modelValue:i===t.modelValue,disabled:t.disabled,"read-only":t.readOnly,required:t.required,onChange:m=>a(i)},null,8,["name","id","value","label","checked","disabled","read-only","required","onChange"]))),128)),e.createElementVNode("label",{for:t.id},[e.renderSlot(o.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,U)])}}}),F={class:"input input-dropdown"},I={class:"dropdown"},R={class:"btn-group",role:"group"},P=["id","disabled"],j=["aria-labelledby"],H=["onClick"],G=["for"],J=e.defineComponent({__name:"input-dropdown",props:{modelValue:{type:[String,Number,Boolean,Object],default:""},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},label:{type:String,default:""},placeholder:{type:String,default:"Please select"},options:{type:Array,default:[]},variant:{type:String,default:""},color:{type:String,default:""},disabled:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},required:{type:Boolean,default:!1},outline:{type:Boolean,default:!0},resetOption:{type:Boolean,default:!0}},emits:["update:modelValue"],setup(t,{emit:r}){const l=t;e.computed({get(){return l.modelValue},set(n){r("update:modelValue",n)}});function a(n){r("update:modelValue",n)}const o=e.computed(()=>[{text:"Please select"},...l.options.map(n=>typeof n=="string"?{value:n,text:n}:n)]),d=e.computed(()=>[...l.options].find(n=>JSON.stringify(n.value)===JSON.stringify(l.modelValue)));return(n,i)=>(e.openBlock(),e.createElementBlock("div",F,[e.createElementVNode("div",I,[e.createElementVNode("div",R,[e.createElementVNode("button",{class:e.normalizeClass(["btn dropdown-toggle",{[`btn-${t.variant}`]:t.variant,[`btn-${t.color}`]:t.color,[`btn-${t.disabled}`]:t.disabled,[`btn-outline-${t.color||"dark"}`]:t.outline}]),type:"button",id:t.id,"data-bs-toggle":"dropdown","aria-expanded":"false",disabled:t.disabled},e.toDisplayString(e.unref(d)?e.unref(d).text:t.placeholder),11,P),e.createElementVNode("ul",{class:"dropdown-menu","aria-labelledby":t.id},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(o),(c,m)=>(e.openBlock(),e.createElementBlock("li",{key:m},[e.renderSlot(n.$slots,"option",{},()=>[e.createElementVNode("a",{class:"dropdown-item",onClick:e.withModifiers(f=>a(c.value),["prevent"])},e.toDisplayString(c.text),9,H)])]))),128))],8,j)])]),e.createElementVNode("label",{for:t.id},[e.renderSlot(n.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,G)]))}}),X=["id","name","multiple","accept"],Y={class:"form-input__input-group input-group"},K=["value","id","name"],Q=["for"],W=["for","innerHTML"],Z=e.defineComponent({__name:"file-input",props:{modelValue:{type:Array,default:[]},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},label:{type:String,default:""},placeholder:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},pattern:{type:String,default:null},multiple:{type:Boolean,default:!1},accept:{type:String}},emits:["update:modelValue"],setup(t,{emit:r}){function l(d){const n=d.target&&d.target.files;n&&(a.splice(0,a.length),Array.from(n).forEach(i=>{a.push(i)}))}const a=e.reactive([]),o=e.computed(()=>a&&a.map(d=>d.name));return e.computed(()=>a.map(d=>URL.createObjectURL(d))),e.watch(()=>a,(d,n)=>{console.log("file input",d),r("update:modelValue",d)},{deep:!0}),(d,n)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["form-input file-input","file-input--primary"])},[e.createElementVNode("input",{type:"file",id:t.id,name:t.name,class:"d-none",onChange:l,multiple:t.multiple,accept:t.accept},null,40,X),e.createElementVNode("div",Y,[e.renderSlot(d.$slots,"input-prepend"),e.createElementVNode("input",{type:"text",value:e.unref(o),id:t.id,name:t.name,class:"form-control"},null,8,K),e.renderSlot(d.$slots,"input-append",{},()=>[e.createElementVNode("label",{for:t.id,class:"btn btn-outline-dark"}," Select Image ",8,Q)])]),e.renderSlot(d.$slots,"label",{},()=>[e.createElementVNode("label",{for:t.id,class:"form-input__label",innerHTML:`${t.label}${t.required?" *":""}`},null,8,W)])]))}}),_={class:"media-upload"},v=["src"],ee=["onClick"],te=["for"];async function le(t){return await new Promise(r=>{let l=new FileReader;l.onload=()=>r(l.result),l.readAsDataURL(t)})}const ne=e.defineComponent({__name:"media-upload",props:{modelValue:{type:Array,default:[]},src:{type:String},name:{type:String,default:()=>u()},id:{type:String,default:()=>u()},label:{type:String,default:""},placeholder:{type:String,default:""},variant:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},pattern:{type:String,default:null},multiple:{type:Boolean,default:!1},accept:{type:String,default:"image/*"}},emits:["update:modelValue","update:src"],setup(t,{emit:r}){const l=t,a=e.ref([]),o=e.ref([]),d=e.computed(()=>l.modelValue.length?l.modelValue:l.src?[{type:"",src:l.src}]:o.value);e.watch(()=>a,async(i,c)=>{o.value=await Promise.all(i.value.map(async m=>({src:await le(m),type:m.type})))},{deep:!0}),e.watch(()=>o,async(i,c)=>{const m=l.multiple?o.value:[o.value[0]];r("update:modelValue",m),l.multiple||r("update:src",o.value[0]&&o.value[0].src)},{deep:!0});function n(i){a.value.splice(i,1)}return(i,c)=>{const m=e.resolveComponent("svg-icon"),f=e.resolveComponent("file-input");return e.openBlock(),e.createElementBlock("div",_,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(d),(p,ae)=>(e.openBlock(),e.createElementBlock("div",{key:p.src,class:"media-upload__thumbnail"},[e.createElementVNode("img",{src:p.src,class:"img-thumbnail rounded"},null,8,v),e.createElementVNode("button",{onClick:e.withModifiers(me=>n(ae),["prevent"]),class:"btn btn--close"},[e.createVNode(m,{symbol:"x"})],8,ee)]))),128)),e.createVNode(f,{modelValue:a.value,"onUpdate:modelValue":c[0]||(c[0]=p=>a.value=p),id:t.id,name:t.name,accept:t.accept,class:"d-none"},null,8,["modelValue","id","name","accept"]),e.createElementVNode("label",{for:t.id,class:"btn btn-outline-dark"}," Select Image ",8,te)])}}}),se="";s.BaseButton=w,s.CheckGroup=L,s.FileInput=Z,s.FormInput=O,s.InputDropdown=J,s.LoadingSpinner=V,s.MediaUpload=ne,s.RadioGroup=A,s.SvgIcon=b,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
package/dist/components/file-input.vue.d.ts CHANGED
@@ -6,23 +6,31 @@ declare const _default: {
6
6
  label: string;
7
7
  pattern: string;
8
8
  required: boolean;
9
- type: string;
10
- checked: boolean;
11
- modelValue: string | number | boolean;
9
+ modelValue: File[][];
12
10
  variant: string;
13
11
  name: string;
14
12
  id: string;
15
13
  disabled: boolean;
16
14
  readOnly: boolean;
17
15
  placeholder: string;
16
+ multiple: boolean;
18
17
  }> & Omit<Readonly<import("vue").ExtractPropTypes<{
19
18
  modelValue: {
20
- type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
21
- default: string;
22
- };
23
- type: {
24
- type: StringConstructor;
25
- default: string;
19
+ type: {
20
+ (arrayLength: number): File[][];
21
+ (...items: File[][]): File[][];
22
+ new (arrayLength: number): File[][];
23
+ new (...items: File[][]): File[][];
24
+ isArray(arg: any): arg is any[];
25
+ readonly prototype: any[];
26
+ from<T>(arrayLike: ArrayLike<T>): T[];
27
+ from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
28
+ from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
29
+ from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
30
+ of<T_4>(...items: T_4[]): T_4[];
31
+ readonly [Symbol.species]: ArrayConstructor;
32
+ };
33
+ default: never[];
26
34
  };
27
35
  name: {
28
36
  type: StringConstructor;
@@ -56,20 +64,20 @@ declare const _default: {
56
64
  type: BooleanConstructor;
57
65
  default: boolean;
58
66
  };
59
- maxlength: {
60
- type: NumberConstructor;
61
- };
62
67
  pattern: {
63
68
  type: StringConstructor;
64
69
  default: null;
65
70
  };
66
- checked: {
71
+ multiple: {
67
72
  type: BooleanConstructor;
68
73
  default: boolean;
69
74
  };
75
+ accept: {
76
+ type: StringConstructor;
77
+ };
70
78
  }>> & {
71
79
  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
72
- } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "label" | "pattern" | "required" | "type" | "checked" | "modelValue" | "variant" | "name" | "id" | "disabled" | "readOnly" | "placeholder">;
80
+ } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "label" | "pattern" | "required" | "modelValue" | "variant" | "name" | "id" | "disabled" | "readOnly" | "placeholder" | "multiple">;
73
81
  $attrs: {
74
82
  [x: string]: unknown;
75
83
  };
@@ -85,12 +93,21 @@ declare const _default: {
85
93
  $el: any;
86
94
  $options: import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
87
95
  modelValue: {
88
- type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
89
- default: string;
90
- };
91
- type: {
92
- type: StringConstructor;
93
- default: string;
96
+ type: {
97
+ (arrayLength: number): File[][];
98
+ (...items: File[][]): File[][];
99
+ new (arrayLength: number): File[][];
100
+ new (...items: File[][]): File[][];
101
+ isArray(arg: any): arg is any[];
102
+ readonly prototype: any[];
103
+ from<T>(arrayLike: ArrayLike<T>): T[];
104
+ from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
105
+ from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
106
+ from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
107
+ of<T_4>(...items: T_4[]): T_4[];
108
+ readonly [Symbol.species]: ArrayConstructor;
109
+ };
110
+ default: never[];
94
111
  };
95
112
  name: {
96
113
  type: StringConstructor;
@@ -124,32 +141,31 @@ declare const _default: {
124
141
  type: BooleanConstructor;
125
142
  default: boolean;
126
143
  };
127
- maxlength: {
128
- type: NumberConstructor;
129
- };
130
144
  pattern: {
131
145
  type: StringConstructor;
132
146
  default: null;
133
147
  };
134
- checked: {
148
+ multiple: {
135
149
  type: BooleanConstructor;
136
150
  default: boolean;
137
151
  };
152
+ accept: {
153
+ type: StringConstructor;
154
+ };
138
155
  }>> & {
139
156
  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
140
157
  }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], string, {
141
158
  label: string;
142
159
  pattern: string;
143
160
  required: boolean;
144
- type: string;
145
- checked: boolean;
146
- modelValue: string | number | boolean;
161
+ modelValue: File[][];
147
162
  variant: string;
148
163
  name: string;
149
164
  id: string;
150
165
  disabled: boolean;
151
166
  readOnly: boolean;
152
167
  placeholder: string;
168
+ multiple: boolean;
153
169
  }> & {
154
170
  beforeCreate?: ((() => void) | (() => void)[]) | undefined;
155
171
  created?: ((() => void) | (() => void)[]) | undefined;
@@ -172,12 +188,21 @@ declare const _default: {
172
188
  $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
173
189
  } & Readonly<import("vue").ExtractPropTypes<{
174
190
  modelValue: {
175
- type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
176
- default: string;
177
- };
178
- type: {
179
- type: StringConstructor;
180
- default: string;
191
+ type: {
192
+ (arrayLength: number): File[][];
193
+ (...items: File[][]): File[][];
194
+ new (arrayLength: number): File[][];
195
+ new (...items: File[][]): File[][];
196
+ isArray(arg: any): arg is any[];
197
+ readonly prototype: any[];
198
+ from<T>(arrayLike: ArrayLike<T>): T[];
199
+ from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
200
+ from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
201
+ from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
202
+ of<T_4>(...items: T_4[]): T_4[];
203
+ readonly [Symbol.species]: ArrayConstructor;
204
+ };
205
+ default: never[];
181
206
  };
182
207
  name: {
183
208
  type: StringConstructor;
@@ -211,17 +236,17 @@ declare const _default: {
211
236
  type: BooleanConstructor;
212
237
  default: boolean;
213
238
  };
214
- maxlength: {
215
- type: NumberConstructor;
216
- };
217
239
  pattern: {
218
240
  type: StringConstructor;
219
241
  default: null;
220
242
  };
221
- checked: {
243
+ multiple: {
222
244
  type: BooleanConstructor;
223
245
  default: boolean;
224
246
  };
247
+ accept: {
248
+ type: StringConstructor;
249
+ };
225
250
  }>> & {
226
251
  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
227
252
  } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
@@ -230,12 +255,21 @@ declare const _default: {
230
255
  __isSuspense?: undefined;
231
256
  } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
232
257
  modelValue: {
233
- type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
234
- default: string;
235
- };
236
- type: {
237
- type: StringConstructor;
238
- default: string;
258
+ type: {
259
+ (arrayLength: number): File[][];
260
+ (...items: File[][]): File[][];
261
+ new (arrayLength: number): File[][];
262
+ new (...items: File[][]): File[][];
263
+ isArray(arg: any): arg is any[];
264
+ readonly prototype: any[];
265
+ from<T>(arrayLike: ArrayLike<T>): T[];
266
+ from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
267
+ from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
268
+ from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
269
+ of<T_4>(...items: T_4[]): T_4[];
270
+ readonly [Symbol.species]: ArrayConstructor;
271
+ };
272
+ default: never[];
239
273
  };
240
274
  name: {
241
275
  type: StringConstructor;
@@ -269,32 +303,31 @@ declare const _default: {
269
303
  type: BooleanConstructor;
270
304
  default: boolean;
271
305
  };
272
- maxlength: {
273
- type: NumberConstructor;
274
- };
275
306
  pattern: {
276
307
  type: StringConstructor;
277
308
  default: null;
278
309
  };
279
- checked: {
310
+ multiple: {
280
311
  type: BooleanConstructor;
281
312
  default: boolean;
282
313
  };
314
+ accept: {
315
+ type: StringConstructor;
316
+ };
283
317
  }>> & {
284
318
  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
285
319
  }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", {
286
320
  label: string;
287
321
  pattern: string;
288
322
  required: boolean;
289
- type: string;
290
- checked: boolean;
291
- modelValue: string | number | boolean;
323
+ modelValue: File[][];
292
324
  variant: string;
293
325
  name: string;
294
326
  id: string;
295
327
  disabled: boolean;
296
328
  readOnly: boolean;
297
329
  placeholder: string;
330
+ multiple: boolean;
298
331
  }> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
299
332
  $slots: {
300
333
  'input-prepend': (_: {}) => any;