ablok-components 0.0.29 → 0.0.30

package/dist/ablok-components.es.js

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, computed, resolveComponent, createBlock, createCommentVNode, unref, toDisplayString, withDirectives, isRef, vModelDynamic, vModelText, ref, watch, onBeforeMount, Fragment, renderList, createTextVNode, withModifiers } from "vue";
-var svgIcon_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".svg-icon{display:inline-block}.svg-icon svg{display:block;stroke-width:0;stroke:currentColor;fill:currentColor;width:1.5em;height:1.5em}.svg-icon--xxl svg{width:12rem;height:12rem}.svg-icon--xl svg{width:8rem;height:8rem}.svg-icon--large svg{width:4rem;height:4rem}\n")();
+var svgIcon_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ":root,*:before,*:after{--border-color: #ced4da;--border-radius: .25rem}.svg-icon{display:inline-block}.svg-icon svg{display:block;stroke-width:0;stroke:currentColor;fill:currentColor;width:1.5em;height:1.5em}.svg-icon--xxl svg{width:12rem;height:12rem}.svg-icon--xl svg{width:8rem;height:8rem}.svg-icon--large svg{width:4rem;height:4rem}\n")();
 const _hoisted_1$6 = {
   class: "icon",
   preserveAspectRatio: "xMaxYMin"
@@ -44,7 +44,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var loadingSpinner_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".loading-spinner{min-width:2rem}\n")();
+var loadingSpinner_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ":root,*:before,*:after{--border-color: #ced4da;--border-radius: .25rem}.loading-spinner{min-width:2rem}\n")();
 const _hoisted_1$5 = { class: "loading-spinner d-block" };
 const _hoisted_2$4 = { class: "loading-spinner__animation" };
 const _hoisted_3$2 = {
@@ -96,7 +96,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var baseButton_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".base-button{display:flex;justify-content:center;align-items:center;box-sizing:border-box;transition:all .2s ease;text-decoration:none;width:100%;margin:0;padding:1.036em 1.625em;appearance:none;outline:none;border:none;border-radius:.4375em;font-size:.875em;line-height:1.125em;text-transform:uppercase;font-weight:700}@media screen and (min-width: 600px){.base-button{width:auto}}.base-button .icon{width:16px;height:16px;margin-top:-1px}.base-button.s-collapsed>.caption{display:none}.base-button.s-pending{background-repeat:no-repeat;background-position:center center}.base-button.s-pending .caption{margin-left:25px;visibility:hidden}@media screen and (min-width: 600px){.base-button.s-pending{background-position:1.625em center}.base-button.s-pending .caption{visibility:visible}}.base-button[readonly],.base-button[disabled]{cursor:not-allowed}\n")();
+var baseButton_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ":root,*:before,*:after{--border-color: #ced4da;--border-radius: .25rem}.base-button{display:flex;justify-content:center;align-items:center;box-sizing:border-box;transition:all .2s ease;text-decoration:none;width:100%;margin:0;padding:1.036em 1.625em;appearance:none;outline:none;border:none;border-radius:.4375em;font-size:.875em;line-height:1.125em;text-transform:uppercase;font-weight:700}@media screen and (min-width: 600px){.base-button{width:auto}}.base-button .icon{width:16px;height:16px;margin-top:-1px}.base-button.s-collapsed>.caption{display:none}.base-button.s-pending{background-repeat:no-repeat;background-position:center center}.base-button.s-pending .caption{margin-left:25px;visibility:hidden}@media screen and (min-width: 600px){.base-button.s-pending{background-position:1.625em center}.base-button.s-pending .caption{visibility:visible}}.base-button[readonly],.base-button[disabled]{cursor:not-allowed}\n")();
 const _hoisted_1$4 = ["type", "disabled", "href", "to"];
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "base-button",
@@ -156,7 +156,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
 function uniqueId() {
   return (new Date().valueOf() + Math.random()).toString(36);
 }
-var formInput_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".form-input{display:flex;flex-flow:column}.form-input>*{order:2}.form-input__label{order:0}.form-input__input-group{flex-wrap:nowrap;order:1}.form-input__color-swatch{flex:0 0 3rem;display:block;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;overflow:hidden}.form-input input[type=color]{display:block;height:100%;padding:0;border-width:0}\n")();
+var formInput_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ":root,*:before,*:after{--border-color: #ced4da;--border-radius: .25rem}.form-input{display:flex;flex-flow:column}.form-input>*{order:2}.form-input__label{order:0}.form-input__input-group{flex-wrap:nowrap;order:1}.form-input__color-swatch{flex:0 0 3rem;display:block;border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);overflow:hidden;border:thin solid var(--border-color);border-left:none}.form-input input[type=color]{display:block;height:100%;padding:0;border-width:0}.form-input input[type=color]::-webkit-color-swatch-wrapper{padding:0}.form-input input[type=color]::-webkit-color-swatch{border:none}\n")();
 const _hoisted_1$3 = { class: "input-group form-input__input-group" };
 const _hoisted_2$3 = ["type", "name", "id", "label", "placeholder", "pattern", "disabled", "read-only", "required", "maxlength", "checked", "aria-label"];
 const _hoisted_3$1 = {

package/dist/ablok-components.umd.js

@@ -1,5 +1,5 @@
-(function(r,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(r=typeof globalThis!="undefined"?globalThis:r||self,e(r.AblokComponents={},r.Vue))})(this,function(r,e){"use strict";var J=(()=>`.svg-icon{display:inline-block}.svg-icon svg{display:block;stroke-width:0;stroke:currentColor;fill:currentColor;width:1.5em;height:1.5em}.svg-icon--xxl svg{width:12rem;height:12rem}.svg-icon--xl svg{width:8rem;height:8rem}.svg-icon--large svg{width:4rem;height:4rem}
-`)();const b={class:"icon",preserveAspectRatio:"xMaxYMin"},p=["xlink:href"],y=e.defineComponent({__name:"svg-icon",props:{basePath:{type:String,default:"/static/symbol-defs.svg"},prefix:{type:String,default:"icon-"},symbol:{type:String,default:""},size:{type:String,default:"default"}},setup(t){return(i,l)=>(e.openBlock(),e.createElementBlock("i",{class:e.normalizeClass(["svg-icon",{[`svg-icon--${t.size}`]:t.size}])},[(e.openBlock(),e.createElementBlock("svg",b,[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))}});var X=(()=>`.loading-spinner{min-width:2rem}
-`)();const g={class:"loading-spinner d-block"},h={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"},B=["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(i,l)=>(e.openBlock(),e.createElementBlock("span",g,[e.createElementVNode("span",h,[(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"},$,8,B)]))]),e.renderSlot(i.$slots,"default")]))}});var K=(()=>`.base-button{display:flex;justify-content:center;align-items:center;box-sizing:border-box;transition:all .2s ease;text-decoration:none;width:100%;margin:0;padding:1.036em 1.625em;appearance:none;outline:none;border:none;border-radius:.4375em;font-size:.875em;line-height:1.125em;text-transform:uppercase;font-weight:700}@media screen and (min-width: 600px){.base-button{width:auto}}.base-button .icon{width:16px;height:16px;margin-top:-1px}.base-button.s-collapsed>.caption{display:none}.base-button.s-pending{background-repeat:no-repeat;background-position:center center}.base-button.s-pending .caption{margin-left:25px;visibility:hidden}@media screen and (min-width: 600px){.base-button.s-pending{background-position:1.625em center}.base-button.s-pending .caption{visibility:visible}}.base-button[readonly],.base-button[disabled]{cursor:not-allowed}
-`)();const x=["type","disabled","href","to"],V=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 i=t,l=e.computed(()=>i.caption&&!i.fab);return(d,a)=>{const s=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(d.$slots,"default",{},()=>[t.icon?(e.openBlock(),e.createBlock(s,{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,x)}}});function m(){return(new Date().valueOf()+Math.random()).toString(36)}var Q=(()=>`.form-input{display:flex;flex-flow:column}.form-input>*{order:2}.form-input__label{order:0}.form-input__input-group{flex-wrap:nowrap;order:1}.form-input__color-swatch{flex:0 0 3rem;display:block;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;overflow:hidden}.form-input input[type=color]{display:block;height:100%;padding:0;border-width:0}
-`)();const w={class:"input-group form-input__input-group"},E=["type","name","id","label","placeholder","pattern","disabled","read-only","required","maxlength","checked","aria-label"],C={key:0,class:"form-input__color-swatch"},N=["name","id","disabled","read-only","required","aria-label"],q=["for","innerHTML"],z=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:i}){const l=t,d=e.computed({get(){return l.modelValue},set(a){i("update:modelValue",a)}});return(a,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["form-input",`form-input--${t.type}`])},[e.createElementVNode("div",w,[e.renderSlot(a.$slots,"input-prepend"),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":s[0]||(s[0]=n=>e.isRef(d)?d.value=n:null),type:t.type==="color"?"text":t.type,name:t.name,id:t.id,label:`${t.label}${t.required?" *":""}`,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,E),[[e.vModelDynamic,e.unref(d)]]),e.renderSlot(a.$slots,"input-append",{},()=>[t.type==="color"?(e.openBlock(),e.createElementBlock("span",C,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":s[1]||(s[1]=n=>e.isRef(d)?d.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,N),[[e.vModelText,e.unref(d)]])])):e.createCommentVNode("",!0)])]),e.renderSlot(a.$slots,"label",{},()=>[e.createElementVNode("label",{for:t.id,class:"form-input__label",innerHTML:t.label},null,8,q)])],2))}}),M={class:"radio-group"},O=["for"],D=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:i}){const l=t,d=e.ref([]);return e.watch(()=>l.modelValue,(a,s)=>{d.value=l.options.map(n=>n.value?l.modelValue.some(o=>o["value "]===n.value):l.modelValue.some(o=>o===n))},{immediate:!0}),e.watch(d,(a,s)=>{const n=a.reduce((o,c,u)=>{const f=c&&l.options[u]?[l.options[u]||l.options[u]]:[];return[...o,...f]},[]);i("update:modelValue",n)},{deep:!0}),e.onBeforeMount(()=>{}),(a,s)=>{const n=e.resolveComponent("form-input");return e.openBlock(),e.createElementBlock("div",M,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(o,c)=>(e.openBlock(),e.createBlock(n,{key:c,modelValue:e.unref(d)[c],"onUpdate:modelValue":u=>e.unref(d)[c]=u,type:"checkbox",name:t.name,id:`${t.id}-${c}`,label:`${o.text||o}${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(a.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,O)])}}}),T={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:i}){const l=t;e.ref(l.options.map(a=>a.value===l.modelValue));function d(a){i("update:modelValue",a)}return e.onBeforeMount(()=>{}),(a,s)=>{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,(o,c)=>(e.openBlock(),e.createBlock(n,{key:c,type:"radio",name:t.name,id:`${t.id}-${c}`,value:o.value||o,label:`${o.text||o}${t.required?" *":""}`,checked:o.value?o.value===t.modelValue:o===t.modelValue,disabled:t.disabled,"read-only":t.readOnly,required:t.required,onChange:u=>d(o)},null,8,["name","id","value","label","checked","disabled","read-only","required","onChange"]))),128)),e.createElementVNode("label",{for:t.id},[e.renderSlot(a.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,L)])}}}),A={class:"input input-dropdown"},P={class:"dropdown"},j={class:"btn-group",role:"group"},F=["id","disabled"],R=["aria-labelledby"],U=["onClick"],G=["for"],H=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:i}){const l=t;e.computed({get(){return l.modelValue},set(n){i("update:modelValue",n)}});function d(n){i("update:modelValue",n)}const a=e.computed(()=>[{text:"Please select"},...l.options.map(n=>typeof n=="string"?{value:n,text:n}:n)]),s=e.computed(()=>[...l.options].find(n=>JSON.stringify(n.value)===JSON.stringify(l.modelValue)));return(n,o)=>(e.openBlock(),e.createElementBlock("div",A,[e.createElementVNode("div",P,[e.createElementVNode("div",j,[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(s)?e.unref(s).text:t.placeholder),11,F),e.createElementVNode("ul",{class:"dropdown-menu","aria-labelledby":t.id},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(a),(c,u)=>(e.openBlock(),e.createElementBlock("li",{key:u},[e.renderSlot(n.$slots,"option",{},()=>[e.createElementVNode("a",{class:"dropdown-item",onClick:e.withModifiers(f=>d(c.value),["prevent"])},e.toDisplayString(c.text),9,U)])]))),128))],8,R)])]),e.createElementVNode("label",{for:t.id},[e.renderSlot(n.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,G)]))}});r.BaseButton=V,r.CheckGroup=D,r.FormInput=z,r.InputDropdown=H,r.LoadingSpinner=S,r.RadioGroup=I,r.SvgIcon=y,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(i,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis!="undefined"?globalThis:i||self,e(i.AblokComponents={},i.Vue))})(this,function(i,e){"use strict";var J=(()=>`:root,*:before,*:after{--border-color: #ced4da;--border-radius: .25rem}.svg-icon{display:inline-block}.svg-icon svg{display:block;stroke-width:0;stroke:currentColor;fill:currentColor;width:1.5em;height:1.5em}.svg-icon--xxl svg{width:12rem;height:12rem}.svg-icon--xl svg{width:8rem;height:8rem}.svg-icon--large svg{width:4rem;height:4rem}
+`)();const b={class:"icon",preserveAspectRatio:"xMaxYMin"},p=["xlink:href"],y=e.defineComponent({__name:"svg-icon",props:{basePath:{type:String,default:"/static/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",b,[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))}});var X=(()=>`:root,*:before,*:after{--border-color: #ced4da;--border-radius: .25rem}.loading-spinner{min-width:2rem}
+`)();const g={class:"loading-spinner d-block"},h={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"},B=["fill"],$=[e.createElementVNode("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"1s",from:"0 50 50",to:"360 50 50",repeatCount:"indefinite"},null,-1)],w=e.defineComponent({__name:"loading-spinner",props:{color:{type:String,default:"#fff"}},setup(t){return(r,l)=>(e.openBlock(),e.createElementBlock("span",g,[e.createElementVNode("span",h,[(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"},$,8,B)]))]),e.renderSlot(r.$slots,"default")]))}});var K=(()=>`:root,*:before,*:after{--border-color: #ced4da;--border-radius: .25rem}.base-button{display:flex;justify-content:center;align-items:center;box-sizing:border-box;transition:all .2s ease;text-decoration:none;width:100%;margin:0;padding:1.036em 1.625em;appearance:none;outline:none;border:none;border-radius:.4375em;font-size:.875em;line-height:1.125em;text-transform:uppercase;font-weight:700}@media screen and (min-width: 600px){.base-button{width:auto}}.base-button .icon{width:16px;height:16px;margin-top:-1px}.base-button.s-collapsed>.caption{display:none}.base-button.s-pending{background-repeat:no-repeat;background-position:center center}.base-button.s-pending .caption{margin-left:25px;visibility:hidden}@media screen and (min-width: 600px){.base-button.s-pending{background-position:1.625em center}.base-button.s-pending .caption{visibility:visible}}.base-button[readonly],.base-button[disabled]{cursor:not-allowed}
+`)();const S=["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,l=e.computed(()=>r.caption&&!r.fab);return(d,o)=>{const s=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(d.$slots,"default",{},()=>[t.icon?(e.openBlock(),e.createBlock(s,{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,S)}}});function m(){return(new Date().valueOf()+Math.random()).toString(36)}var Q=(()=>`:root,*:before,*:after{--border-color: #ced4da;--border-radius: .25rem}.form-input{display:flex;flex-flow:column}.form-input>*{order:2}.form-input__label{order:0}.form-input__input-group{flex-wrap:nowrap;order:1}.form-input__color-swatch{flex:0 0 3rem;display:block;border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);overflow:hidden;border:thin solid var(--border-color);border-left:none}.form-input input[type=color]{display:block;height:100%;padding:0;border-width:0}.form-input input[type=color]::-webkit-color-swatch-wrapper{padding:0}.form-input input[type=color]::-webkit-color-swatch{border:none}
+`)();const V={class:"input-group form-input__input-group"},E=["type","name","id","label","placeholder","pattern","disabled","read-only","required","maxlength","checked","aria-label"],C={key:0,class:"form-input__color-swatch"},N=["name","id","disabled","read-only","required","aria-label"],q=["for","innerHTML"],z=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 l=t,d=e.computed({get(){return l.modelValue},set(o){r("update:modelValue",o)}});return(o,s)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["form-input",`form-input--${t.type}`])},[e.createElementVNode("div",V,[e.renderSlot(o.$slots,"input-prepend"),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":s[0]||(s[0]=n=>e.isRef(d)?d.value=n:null),type:t.type==="color"?"text":t.type,name:t.name,id:t.id,label:`${t.label}${t.required?" *":""}`,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,E),[[e.vModelDynamic,e.unref(d)]]),e.renderSlot(o.$slots,"input-append",{},()=>[t.type==="color"?(e.openBlock(),e.createElementBlock("span",C,[e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":s[1]||(s[1]=n=>e.isRef(d)?d.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,N),[[e.vModelText,e.unref(d)]])])):e.createCommentVNode("",!0)])]),e.renderSlot(o.$slots,"label",{},()=>[e.createElementVNode("label",{for:t.id,class:"form-input__label",innerHTML:t.label},null,8,q)])],2))}}),M={class:"radio-group"},O=["for"],D=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 l=t,d=e.ref([]);return e.watch(()=>l.modelValue,(o,s)=>{d.value=l.options.map(n=>n.value?l.modelValue.some(a=>a["value "]===n.value):l.modelValue.some(a=>a===n))},{immediate:!0}),e.watch(d,(o,s)=>{const n=o.reduce((a,c,u)=>{const f=c&&l.options[u]?[l.options[u]||l.options[u]]:[];return[...a,...f]},[]);r("update:modelValue",n)},{deep:!0}),e.onBeforeMount(()=>{}),(o,s)=>{const n=e.resolveComponent("form-input");return e.openBlock(),e.createElementBlock("div",M,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(a,c)=>(e.openBlock(),e.createBlock(n,{key:c,modelValue:e.unref(d)[c],"onUpdate:modelValue":u=>e.unref(d)[c]=u,type:"checkbox",name:t.name,id:`${t.id}-${c}`,label:`${a.text||a}${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,O)])}}}),T={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 l=t;e.ref(l.options.map(o=>o.value===l.modelValue));function d(o){r("update:modelValue",o)}return e.onBeforeMount(()=>{}),(o,s)=>{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,(a,c)=>(e.openBlock(),e.createBlock(n,{key:c,type:"radio",name:t.name,id:`${t.id}-${c}`,value:a.value||a,label:`${a.text||a}${t.required?" *":""}`,checked:a.value?a.value===t.modelValue:a===t.modelValue,disabled:t.disabled,"read-only":t.readOnly,required:t.required,onChange:u=>d(a)},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,L)])}}}),A={class:"input input-dropdown"},P={class:"dropdown"},j={class:"btn-group",role:"group"},F=["id","disabled"],R=["aria-labelledby"],U=["onClick"],G=["for"],H=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 l=t;e.computed({get(){return l.modelValue},set(n){r("update:modelValue",n)}});function d(n){r("update:modelValue",n)}const o=e.computed(()=>[{text:"Please select"},...l.options.map(n=>typeof n=="string"?{value:n,text:n}:n)]),s=e.computed(()=>[...l.options].find(n=>JSON.stringify(n.value)===JSON.stringify(l.modelValue)));return(n,a)=>(e.openBlock(),e.createElementBlock("div",A,[e.createElementVNode("div",P,[e.createElementVNode("div",j,[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(s)?e.unref(s).text:t.placeholder),11,F),e.createElementVNode("ul",{class:"dropdown-menu","aria-labelledby":t.id},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(o),(c,u)=>(e.openBlock(),e.createElementBlock("li",{key:u},[e.renderSlot(n.$slots,"option",{},()=>[e.createElementVNode("a",{class:"dropdown-item",onClick:e.withModifiers(f=>d(c.value),["prevent"])},e.toDisplayString(c.text),9,U)])]))),128))],8,R)])]),e.createElementVNode("label",{for:t.id},[e.renderSlot(n.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,G)]))}});i.BaseButton=x,i.CheckGroup=D,i.FormInput=z,i.InputDropdown=H,i.LoadingSpinner=w,i.RadioGroup=I,i.SvgIcon=y,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/style.css

@@ -1 +1 @@
-.svg-icon{display:inline-block}.svg-icon svg{display:block;stroke-width:0;stroke:currentColor;fill:currentColor;width:1.5em;height:1.5em}.svg-icon--xxl svg{width:12rem;height:12rem}.svg-icon--xl svg{width:8rem;height:8rem}.svg-icon--large svg{width:4rem;height:4rem}.loading-spinner{min-width:2rem}.base-button{display:flex;justify-content:center;align-items:center;box-sizing:border-box;transition:all .2s ease;text-decoration:none;width:100%;margin:0;padding:1.036em 1.625em;appearance:none;outline:none;border:none;border-radius:.4375em;font-size:.875em;line-height:1.125em;text-transform:uppercase;font-weight:700}@media screen and (min-width: 600px){.base-button{width:auto}}.base-button .icon{width:16px;height:16px;margin-top:-1px}.base-button.s-collapsed>.caption{display:none}.base-button.s-pending{background-repeat:no-repeat;background-position:center center}.base-button.s-pending .caption{margin-left:25px;visibility:hidden}@media screen and (min-width: 600px){.base-button.s-pending{background-position:1.625em center}.base-button.s-pending .caption{visibility:visible}}.base-button[readonly],.base-button[disabled]{cursor:not-allowed}.form-input{display:flex;flex-flow:column}.form-input>*{order:2}.form-input__label{order:0}.form-input__input-group{flex-wrap:nowrap;order:1}.form-input__color-swatch{flex:0 0 3rem;display:block;border-top-right-radius:.25rem;border-bottom-right-radius:.25rem;overflow:hidden}.form-input input[type=color]{display:block;height:100%;padding:0;border-width:0}
+.svg-icon{display:inline-block}.svg-icon svg{display:block;stroke-width:0;stroke:currentColor;fill:currentColor;width:1.5em;height:1.5em}.svg-icon--xxl svg{width:12rem;height:12rem}.svg-icon--xl svg{width:8rem;height:8rem}.svg-icon--large svg{width:4rem;height:4rem}.loading-spinner{min-width:2rem}.base-button{display:flex;justify-content:center;align-items:center;box-sizing:border-box;transition:all .2s ease;text-decoration:none;width:100%;margin:0;padding:1.036em 1.625em;appearance:none;outline:none;border:none;border-radius:.4375em;font-size:.875em;line-height:1.125em;text-transform:uppercase;font-weight:700}@media screen and (min-width: 600px){.base-button{width:auto}}.base-button .icon{width:16px;height:16px;margin-top:-1px}.base-button.s-collapsed>.caption{display:none}.base-button.s-pending{background-repeat:no-repeat;background-position:center center}.base-button.s-pending .caption{margin-left:25px;visibility:hidden}@media screen and (min-width: 600px){.base-button.s-pending{background-position:1.625em center}.base-button.s-pending .caption{visibility:visible}}.base-button[readonly],.base-button[disabled]{cursor:not-allowed}:root,*:before,*:after{--border-color: #ced4da;--border-radius: .25rem}.form-input{display:flex;flex-flow:column}.form-input>*{order:2}.form-input__label{order:0}.form-input__input-group{flex-wrap:nowrap;order:1}.form-input__color-swatch{flex:0 0 3rem;display:block;border-top-right-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius);overflow:hidden;border:thin solid var(--border-color);border-left:none}.form-input input[type=color]{display:block;height:100%;padding:0;border-width:0}.form-input input[type=color]::-webkit-color-swatch-wrapper{padding:0}.form-input input[type=color]::-webkit-color-swatch{border:none}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "ablok-components",
   "private": false,
-  "version": "0.0.29",
+  "version": "0.0.30",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",