ablok-components 0.0.19 → 0.0.22

package/dist/ablok-components.es.js

@@ -1,11 +1,11 @@
-import { defineComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, computed, resolveComponent, createBlock, createCommentVNode, unref, toDisplayString, withDirectives, isRef, vModelDynamic, createTextVNode, ref, watch, onBeforeMount, Fragment, renderList } from "vue";
+import { defineComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, computed, resolveComponent, createBlock, createCommentVNode, unref, toDisplayString, withDirectives, isRef, vModelDynamic, createTextVNode, ref, watch, onBeforeMount, Fragment, renderList, 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")();
-const _hoisted_1$5 = {
+const _hoisted_1$6 = {
   class: "icon",
   preserveAspectRatio: "xMaxYMin"
 };
-const _hoisted_2$4 = ["xlink:href"];
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _hoisted_2$5 = ["xlink:href"];
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "svg-icon",
   props: {
     basePath: {
@@ -32,22 +32,22 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
           [`svg-icon--${__props.size}`]: __props.size
         }])
       }, [
-        (openBlock(), createElementBlock("svg", _hoisted_1$5, [
+        (openBlock(), createElementBlock("svg", _hoisted_1$6, [
           createElementVNode("use", {
             "xlink:href": `${__props.basePath}#${__props.prefix}${__props.symbol}`,
             "xmlns:xlink": "http://www.w3.org/1999/xlink",
             x: "0",
             y: "0"
-          }, null, 8, _hoisted_2$4)
+          }, null, 8, _hoisted_2$5)
         ]))
       ], 2);
     };
   }
 });
 var loadingSpinner_vue_vue_type_style_index_0_lang = /* @__PURE__ */ (() => ".loading-spinner{min-width:2rem}\n")();
-const _hoisted_1$4 = { class: "loading-spinner d-block" };
-const _hoisted_2$3 = { class: "loading-spinner__animation" };
-const _hoisted_3$1 = {
+const _hoisted_1$5 = { class: "loading-spinner d-block" };
+const _hoisted_2$4 = { class: "loading-spinner__animation" };
+const _hoisted_3$2 = {
   class: "d-block",
   version: "1.1",
   id: "L9",
@@ -59,8 +59,8 @@ const _hoisted_3$1 = {
   "enable-background": "new 0 0 0 0",
   "xml:space": "preserve"
 };
-const _hoisted_4$1 = ["fill"];
-const _hoisted_5 = /* @__PURE__ */ createElementVNode("animateTransform", {
+const _hoisted_4$2 = ["fill"];
+const _hoisted_5$1 = /* @__PURE__ */ createElementVNode("animateTransform", {
   attributeName: "transform",
   attributeType: "XML",
   type: "rotate",
@@ -69,10 +69,10 @@ const _hoisted_5 = /* @__PURE__ */ createElementVNode("animateTransform", {
   to: "360 50 50",
   repeatCount: "indefinite"
 }, null, -1);
-const _hoisted_6 = [
-  _hoisted_5
+const _hoisted_6$1 = [
+  _hoisted_5$1
 ];
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "loading-spinner",
   props: {
     color: {
@@ -82,13 +82,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", _hoisted_1$4, [
-        createElementVNode("span", _hoisted_2$3, [
-          (openBlock(), createElementBlock("svg", _hoisted_3$1, [
+      return openBlock(), createElementBlock("span", _hoisted_1$5, [
+        createElementVNode("span", _hoisted_2$4, [
+          (openBlock(), createElementBlock("svg", _hoisted_3$2, [
             createElementVNode("path", {
               fill: __props.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"
-            }, _hoisted_6, 8, _hoisted_4$1)
+            }, _hoisted_6$1, 8, _hoisted_4$2)
           ]))
         ]),
         renderSlot(_ctx.$slots, "default")
@@ -97,8 +97,8 @@ const _sfc_main$4 = /* @__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")();
-const _hoisted_1$3 = ["type", "disabled", "href", "to"];
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$4 = ["type", "disabled", "href", "to"];
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "base-button",
   props: {
     type: null,
@@ -149,18 +149,18 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
             class: normalizeClass(["base-button__caption", { "icon-padding": __props.icon }])
           }, toDisplayString(__props.caption), 3)) : createCommentVNode("", true)
         ])
-      ], 10, _hoisted_1$3);
+      ], 10, _hoisted_1$4);
     };
   }
 });
 function uniqueId() {
   return (new Date().valueOf() + Math.random()).toString(36);
 }
-const _hoisted_1$2 = { class: "base-input" };
-const _hoisted_2$2 = { class: "input-group" };
-const _hoisted_3 = ["type", "name", "id", "label", "placeholder", "pattern", "disabled", "read-only", "required", "maxlength", "checked", "aria-label"];
-const _hoisted_4 = ["for"];
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$3 = { class: "base-input" };
+const _hoisted_2$3 = { class: "input-group" };
+const _hoisted_3$1 = ["type", "name", "id", "label", "placeholder", "pattern", "disabled", "read-only", "required", "maxlength", "checked", "aria-label"];
+const _hoisted_4$1 = ["for"];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "base-input",
   props: {
     modelValue: {
@@ -227,8 +227,8 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$2, [
-        createElementVNode("div", _hoisted_2$2, [
+      return openBlock(), createElementBlock("div", _hoisted_1$3, [
+        createElementVNode("div", _hoisted_2$3, [
           renderSlot(_ctx.$slots, "input-prepend"),
           withDirectives(createElementVNode("input", {
             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(model) ? model.value = $event : null),
@@ -245,7 +245,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             checked: __props.checked,
             class: "form-control",
             "aria-label": __props.label
-          }, null, 8, _hoisted_3), [
+          }, null, 8, _hoisted_3$1), [
             [vModelDynamic, unref(model)]
           ]),
           renderSlot(_ctx.$slots, "input-append")
@@ -254,14 +254,14 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "label", {}, () => [
             createTextVNode(toDisplayString(__props.label), 1)
           ])
-        ], 8, _hoisted_4)
+        ], 8, _hoisted_4$1)
       ]);
     };
   }
 });
-const _hoisted_1$1 = { class: "radio-group" };
-const _hoisted_2$1 = ["for"];
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$2 = { class: "radio-group" };
+const _hoisted_2$2 = ["for"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "check-group",
   props: {
     modelValue: {
@@ -318,7 +318,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _component_base_input = resolveComponent("base-input");
-      return openBlock(), createElementBlock("div", _hoisted_1$1, [
+      return openBlock(), createElementBlock("div", _hoisted_1$2, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {
           return openBlock(), createBlock(_component_base_input, {
             key: index,
@@ -337,14 +337,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "label", {}, () => [
             createTextVNode(toDisplayString(__props.label), 1)
           ])
-        ], 8, _hoisted_2$1)
+        ], 8, _hoisted_2$2)
       ]);
     };
   }
 });
-const _hoisted_1 = { class: "radio-group" };
-const _hoisted_2 = ["for"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _hoisted_1$1 = { class: "radio-group" };
+const _hoisted_2$1 = ["for"];
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "radio-group",
   props: {
     modelValue: {
@@ -394,7 +394,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _component_base_input = resolveComponent("base-input");
-      return openBlock(), createElementBlock("div", _hoisted_1, [
+      return openBlock(), createElementBlock("div", _hoisted_1$1, [
         (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {
           return openBlock(), createBlock(_component_base_input, {
             key: index,
@@ -414,9 +414,138 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "label", {}, () => [
             createTextVNode(toDisplayString(__props.label), 1)
           ])
-        ], 8, _hoisted_2)
+        ], 8, _hoisted_2$1)
+      ]);
+    };
+  }
+});
+const _hoisted_1 = { class: "input input-dropdown" };
+const _hoisted_2 = { class: "dropdown" };
+const _hoisted_3 = {
+  class: "btn-group",
+  role: "group"
+};
+const _hoisted_4 = ["id", "disabled"];
+const _hoisted_5 = ["aria-labelledby"];
+const _hoisted_6 = ["onClick"];
+const _hoisted_7 = ["for"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "input-dropdown",
+  props: {
+    modelValue: {
+      type: [String, Number, Boolean, Object],
+      default: ""
+    },
+    name: {
+      type: String,
+      default: () => uniqueId()
+    },
+    id: {
+      type: String,
+      default: () => uniqueId()
+    },
+    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: false
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    resetOption: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    computed({
+      get() {
+        return props.modelValue;
+      },
+      set(update) {
+        emit("update:modelValue", update);
+      }
+    });
+    function select(update) {
+      emit("update:modelValue", update);
+    }
+    const extendedOptions = computed(() => {
+      return [
+        {
+          text: "Please select"
+        },
+        ...props.options.map((option) => typeof option === "string" ? { value: option, text: option } : option)
+      ];
+    });
+    const selectedOption = computed(() => {
+      return [...props.options].find((option) => JSON.stringify(option.value) === JSON.stringify(props.modelValue));
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", _hoisted_3, [
+            createElementVNode("button", {
+              class: normalizeClass(["btn dropdown-toggle", {
+                [`button-${__props.variant}`]: __props.variant,
+                [`button-${__props.color}`]: __props.color,
+                [`button-${__props.disabled}`]: __props.disabled
+              }]),
+              type: "button",
+              id: __props.id,
+              "data-bs-toggle": "dropdown",
+              "aria-expanded": "false",
+              disabled: __props.disabled
+            }, toDisplayString(unref(selectedOption) ? unref(selectedOption).text : __props.placeholder), 11, _hoisted_4),
+            createElementVNode("ul", {
+              class: "dropdown-menu",
+              "aria-labelledby": __props.id
+            }, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(unref(extendedOptions), (option, index) => {
+                return openBlock(), createElementBlock("li", { key: index }, [
+                  renderSlot(_ctx.$slots, "option", {}, () => [
+                    createElementVNode("a", {
+                      class: "dropdown-item",
+                      onClick: withModifiers(($event) => select(option.value), ["prevent"])
+                    }, toDisplayString(option.text), 9, _hoisted_6)
+                  ])
+                ]);
+              }), 128))
+            ], 8, _hoisted_5)
+          ])
+        ]),
+        createElementVNode("label", { for: __props.id }, [
+          renderSlot(_ctx.$slots, "label", {}, () => [
+            createTextVNode(toDisplayString(__props.label), 1)
+          ])
+        ], 8, _hoisted_7)
       ]);
     };
   }
 });
-export { _sfc_main$3 as BaseButton, _sfc_main$2 as BaseInput, _sfc_main$1 as CheckGroup, _sfc_main$4 as LoadingSpinner, _sfc_main as RadioGroup, _sfc_main$5 as SvgIcon };
+export { _sfc_main$4 as BaseButton, _sfc_main$3 as BaseInput, _sfc_main$2 as CheckGroup, _sfc_main as InputDropdown, _sfc_main$5 as LoadingSpinner, _sfc_main$1 as RadioGroup, _sfc_main$6 as SvgIcon };

package/dist/ablok-components.umd.js

@@ -1,4 +1,4 @@
-(function(o,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis!="undefined"?globalThis:o||self,e(o.AblokComponents={},o.Vue))})(this,function(o,e){"use strict";var A=(()=>`.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 f={class:"icon",preserveAspectRatio:"xMaxYMin"},b=["xlink:href"],p=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(d,a)=>(e.openBlock(),e.createElementBlock("i",{class:e.normalizeClass(["svg-icon",{[`svg-icon--${t.size}`]:t.size}])},[(e.openBlock(),e.createElementBlock("svg",f,[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,b)]))],2))}});var I=(()=>`.loading-spinner{min-width:2rem}
-`)();const g={class:"loading-spinner d-block"},y={class:"loading-spinner__animation"},h={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"],B=[e.createElementVNode("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"1s",from:"0 50 50",to:"360 50 50",repeatCount:"indefinite"},null,-1)],x=e.defineComponent({__name:"loading-spinner",props:{color:{type:String,default:"#fff"}},setup(t){return(d,a)=>(e.openBlock(),e.createElementBlock("span",g,[e.createElementVNode("span",y,[(e.openBlock(),e.createElementBlock("svg",h,[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"},B,8,k)]))]),e.renderSlot(d.$slots,"default")]))}});var P=(()=>`.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"],$=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 d=t,a=e.computed(()=>d.caption&&!d.fab);return(i,n)=>{const c=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(i.$slots,"default",{},()=>[t.icon?(e.openBlock(),e.createBlock(c,{key:0,id:t.icon,class:"base-button__caption"},null,8,["id"])):e.createCommentVNode("",!0),e.unref(a)?(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)}const V={class:"base-input"},w={class:"input-group"},C=["type","name","id","label","placeholder","pattern","disabled","read-only","required","maxlength","checked","aria-label"],E=["for"],q=e.defineComponent({__name:"base-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:d}){const a=t,i=e.computed({get(){return a.modelValue},set(n){d("update:modelValue",n)}});return(n,c)=>(e.openBlock(),e.createElementBlock("div",V,[e.createElementVNode("div",w,[e.renderSlot(n.$slots,"input-prepend"),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":c[0]||(c[0]=r=>e.isRef(i)?i.value=r:null),type: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,C),[[e.vModelDynamic,e.unref(i)]]),e.renderSlot(n.$slots,"input-append")]),e.createElementVNode("label",{for:t.id},[e.renderSlot(n.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,E)]))}}),N={class:"radio-group"},z=["for"],M=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:d}){const a=t,i=e.ref([]);return e.watch(()=>a.modelValue,(n,c)=>{i.value=a.options.map(r=>r.value?a.modelValue.some(l=>l["value "]===r.value):a.modelValue.some(l=>l===r))},{immediate:!0}),e.watch(i,(n,c)=>{const r=n.reduce((l,s,u)=>{const L=s&&a.options[u]?[a.options[u]||a.options[u]]:[];return[...l,...L]},[]);d("update:modelValue",r)},{deep:!0}),e.onBeforeMount(()=>{}),(n,c)=>{const r=e.resolveComponent("base-input");return e.openBlock(),e.createElementBlock("div",N,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(l,s)=>(e.openBlock(),e.createBlock(r,{key:s,modelValue:e.unref(i)[s],"onUpdate:modelValue":u=>e.unref(i)[s]=u,type:"checkbox",name:t.name,id:`${t.id}-${s}`,label:`${l.text||l}${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(n.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,z)])}}}),O={class:"radio-group"},T=["for"],D=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:d}){const a=t;e.ref(a.options.map(n=>n.value===a.modelValue));function i(n){d("update:modelValue",n)}return e.onBeforeMount(()=>{}),(n,c)=>{const r=e.resolveComponent("base-input");return e.openBlock(),e.createElementBlock("div",O,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(l,s)=>(e.openBlock(),e.createBlock(r,{key:s,type:"radio",name:t.name,id:`${t.id}-${s}`,value:l.value||l,label:`${l.text||l}${t.required?" *":""}`,checked:l.value?l.value===t.modelValue:l===t.modelValue,disabled:t.disabled,"read-only":t.readOnly,required:t.required,onChange:u=>i(l)},null,8,["name","id","value","label","checked","disabled","read-only","required","onChange"]))),128)),e.createElementVNode("label",{for:t.id},[e.renderSlot(n.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,T)])}}});o.BaseButton=$,o.BaseInput=q,o.CheckGroup=M,o.LoadingSpinner=x,o.RadioGroup=D,o.SvgIcon=p,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(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"],g=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(d,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 y={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"],S=[e.createElementVNode("animateTransform",{attributeName:"transform",attributeType:"XML",type:"rotate",dur:"1s",from:"0 50 50",to:"360 50 50",repeatCount:"indefinite"},null,-1)],$=e.defineComponent({__name:"loading-spinner",props:{color:{type:String,default:"#fff"}},setup(t){return(d,l)=>(e.openBlock(),e.createElementBlock("span",y,[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"},S,8,B)]))]),e.renderSlot(d.$slots,"default")]))}});var H=(()=>`.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 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 d=t,l=e.computed(()=>d.caption&&!d.fab);return(i,a)=>{const c=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(i.$slots,"default",{},()=>[t.icon?(e.openBlock(),e.createBlock(c,{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,V)}}});function m(){return(new Date().valueOf()+Math.random()).toString(36)}const w={class:"base-input"},E={class:"input-group"},N=["type","name","id","label","placeholder","pattern","disabled","read-only","required","maxlength","checked","aria-label"],C=["for"],q=e.defineComponent({__name:"base-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:d}){const l=t,i=e.computed({get(){return l.modelValue},set(a){d("update:modelValue",a)}});return(a,c)=>(e.openBlock(),e.createElementBlock("div",w,[e.createElementVNode("div",E,[e.renderSlot(a.$slots,"input-prepend"),e.withDirectives(e.createElementVNode("input",{"onUpdate:modelValue":c[0]||(c[0]=n=>e.isRef(i)?i.value=n:null),type: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,N),[[e.vModelDynamic,e.unref(i)]]),e.renderSlot(a.$slots,"input-append")]),e.createElementVNode("label",{for:t.id},[e.renderSlot(a.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,C)]))}}),z={class:"radio-group"},O=["for"],M=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:d}){const l=t,i=e.ref([]);return e.watch(()=>l.modelValue,(a,c)=>{i.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(i,(a,c)=>{const n=a.reduce((o,s,u)=>{const f=s&&l.options[u]?[l.options[u]||l.options[u]]:[];return[...o,...f]},[]);d("update:modelValue",n)},{deep:!0}),e.onBeforeMount(()=>{}),(a,c)=>{const n=e.resolveComponent("base-input");return e.openBlock(),e.createElementBlock("div",z,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(o,s)=>(e.openBlock(),e.createBlock(n,{key:s,modelValue:e.unref(i)[s],"onUpdate:modelValue":u=>e.unref(i)[s]=u,type:"checkbox",name:t.name,id:`${t.id}-${s}`,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)])}}}),D={class:"radio-group"},T=["for"],L=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:d}){const l=t;e.ref(l.options.map(a=>a.value===l.modelValue));function i(a){d("update:modelValue",a)}return e.onBeforeMount(()=>{}),(a,c)=>{const n=e.resolveComponent("base-input");return e.openBlock(),e.createElementBlock("div",D,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.options,(o,s)=>(e.openBlock(),e.createBlock(n,{key:s,type:"radio",name:t.name,id:`${t.id}-${s}`,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=>i(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,T)])}}}),A={class:"input input-dropdown"},I={class:"dropdown"},P={class:"btn-group",role:"group"},j=["id","disabled"],F=["aria-labelledby"],R=["onClick"],U=["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},resetOption:{type:Boolean,default:!0}},emits:["update:modelValue"],setup(t,{emit:d}){const l=t;e.computed({get(){return l.modelValue},set(n){d("update:modelValue",n)}});function i(n){d("update:modelValue",n)}const a=e.computed(()=>[{text:"Please select"},...l.options.map(n=>typeof n=="string"?{value:n,text:n}:n)]),c=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",I,[e.createElementVNode("div",P,[e.createElementVNode("button",{class:e.normalizeClass(["btn dropdown-toggle",{[`button-${t.variant}`]:t.variant,[`button-${t.color}`]:t.color,[`button-${t.disabled}`]:t.disabled}]),type:"button",id:t.id,"data-bs-toggle":"dropdown","aria-expanded":"false",disabled:t.disabled},e.toDisplayString(e.unref(c)?e.unref(c).text:t.placeholder),11,j),e.createElementVNode("ul",{class:"dropdown-menu","aria-labelledby":t.id},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(a),(s,u)=>(e.openBlock(),e.createElementBlock("li",{key:u},[e.renderSlot(n.$slots,"option",{},()=>[e.createElementVNode("a",{class:"dropdown-item",onClick:e.withModifiers(f=>i(s.value),["prevent"])},e.toDisplayString(s.text),9,R)])]))),128))],8,F)])]),e.createElementVNode("label",{for:t.id},[e.renderSlot(n.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(t.label),1)])],8,U)]))}});r.BaseButton=x,r.BaseInput=q,r.CheckGroup=M,r.InputDropdown=G,r.LoadingSpinner=$,r.RadioGroup=L,r.SvgIcon=g,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/dist/components/base-input.vue.d.ts

@@ -110,9 +110,9 @@ declare const _default: import("vue").DefineComponent<{
     type: string;
     label: string;
     pattern: string;
+    modelValue: string | number | boolean;
     id: string;
     variant: string;
-    modelValue: string | number | boolean;
     name: string;
     disabled: boolean;
     placeholder: string;

package/dist/components/check-group.vue.d.ts

@@ -75,13 +75,13 @@ declare const _default: import("vue").DefineComponent<{
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    options: any[];
     required: boolean;
     label: string;
+    modelValue: never[];
     id: string;
     variant: string;
-    modelValue: never[];
     name: string;
-    options: any[];
     disabled: boolean;
     readOnly: boolean;
 }>;

package/dist/components/input-dropdown.vue.d.ts

@@ -0,0 +1,141 @@
+declare const _default: import("vue").DefineComponent<{
+    modelValue: {
+        type: (BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    options: {
+        type: {
+            (arrayLength: number): any[];
+            (...items: any[]): any[];
+            new (arrayLength: number): any[];
+            new (...items: any[]): any[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: never[];
+    };
+    variant: {
+        type: StringConstructor;
+        default: string;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    resetOption: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    modelValue: {
+        type: (BooleanConstructor | ObjectConstructor | StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    name: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    id: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    options: {
+        type: {
+            (arrayLength: number): any[];
+            (...items: any[]): any[];
+            new (arrayLength: number): any[];
+            new (...items: any[]): any[];
+            isArray(arg: any): arg is any[];
+            readonly prototype: any[];
+            from<T>(arrayLike: ArrayLike<T>): T[];
+            from<T_1, U>(arrayLike: ArrayLike<T_1>, mapfn: (v: T_1, k: number) => U, thisArg?: any): U[];
+            from<T_2>(iterable: Iterable<T_2> | ArrayLike<T_2>): T_2[];
+            from<T_3, U_1>(iterable: Iterable<T_3> | ArrayLike<T_3>, mapfn: (v: T_3, k: number) => U_1, thisArg?: any): U_1[];
+            of<T_4>(...items: T_4[]): T_4[];
+            readonly [Symbol.species]: ArrayConstructor;
+        };
+        default: never[];
+    };
+    variant: {
+        type: StringConstructor;
+        default: string;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    multiple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    required: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    resetOption: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    options: any[];
+    required: boolean;
+    label: string;
+    modelValue: string | number | boolean | Record<string, any>;
+    id: string;
+    variant: string;
+    color: string;
+    name: string;
+    disabled: boolean;
+    placeholder: string;
+    multiple: boolean;
+    resetOption: boolean;
+}>;
+export default _default;

package/dist/components/radio-group.vue.d.ts

@@ -75,13 +75,13 @@ declare const _default: import("vue").DefineComponent<{
     onChange?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
+    options: any[];
     required: boolean;
     label: string;
+    modelValue: boolean;
     id: string;
     variant: string;
-    modelValue: boolean;
     name: string;
-    options: any[];
     disabled: boolean;
     readOnly: boolean;
 }>;

package/dist/index.d.ts

@@ -4,3 +4,4 @@ export { default as BaseButton } from "./components/base-button.vue";
 export { default as BaseInput } from "./components/base-input.vue";
 export { default as CheckGroup } from "./components/check-group.vue";
 export { default as RadioGroup } from "./components/radio-group.vue";
+export { default as InputDropdown } from "./components/input-dropdown.vue";

package/package.json

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