ablok-components 0.0.22 → 0.0.25

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.
@@ -1,4 +1,4 @@
1
- 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";
1
+ import { defineComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, computed, resolveComponent, createBlock, createCommentVNode, unref, toDisplayString, withDirectives, isRef, vModelDynamic, ref, watch, onBeforeMount, Fragment, renderList, createTextVNode, withModifiers } from "vue";
2
2
  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")();
3
3
  const _hoisted_1$6 = {
4
4
  class: "icon",
@@ -156,12 +156,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
156
156
  function uniqueId() {
157
157
  return (new Date().valueOf() + Math.random()).toString(36);
158
158
  }
159
- const _hoisted_1$3 = { class: "base-input" };
160
- const _hoisted_2$3 = { class: "input-group" };
159
+ 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{order:1}\n")();
160
+ const _hoisted_1$3 = { class: "form-input" };
161
+ const _hoisted_2$3 = { class: "input-group form-input__input-group" };
161
162
  const _hoisted_3$1 = ["type", "name", "id", "label", "placeholder", "pattern", "disabled", "read-only", "required", "maxlength", "checked", "aria-label"];
162
- const _hoisted_4$1 = ["for"];
163
+ const _hoisted_4$1 = ["for", "innerHTML"];
163
164
  const _sfc_main$3 = /* @__PURE__ */ defineComponent({
164
- __name: "base-input",
165
+ __name: "form-input",
165
166
  props: {
166
167
  modelValue: {
167
168
  type: [String, Number, Boolean],
@@ -250,11 +251,13 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
250
251
  ]),
251
252
  renderSlot(_ctx.$slots, "input-append")
252
253
  ]),
253
- createElementVNode("label", { for: __props.id }, [
254
- renderSlot(_ctx.$slots, "label", {}, () => [
255
- createTextVNode(toDisplayString(__props.label), 1)
256
- ])
257
- ], 8, _hoisted_4$1)
254
+ renderSlot(_ctx.$slots, "label", {}, () => [
255
+ createElementVNode("label", {
256
+ for: __props.id,
257
+ class: "form-input__label",
258
+ innerHTML: __props.label
259
+ }, null, 8, _hoisted_4$1)
260
+ ])
258
261
  ]);
259
262
  };
260
263
  }
@@ -317,10 +320,10 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
317
320
  onBeforeMount(() => {
318
321
  });
319
322
  return (_ctx, _cache) => {
320
- const _component_base_input = resolveComponent("base-input");
323
+ const _component_form_input = resolveComponent("form-input");
321
324
  return openBlock(), createElementBlock("div", _hoisted_1$2, [
322
325
  (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {
323
- return openBlock(), createBlock(_component_base_input, {
326
+ return openBlock(), createBlock(_component_form_input, {
324
327
  key: index,
325
328
  modelValue: unref(values)[index],
326
329
  "onUpdate:modelValue": ($event) => unref(values)[index] = $event,
@@ -393,10 +396,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
393
396
  onBeforeMount(() => {
394
397
  });
395
398
  return (_ctx, _cache) => {
396
- const _component_base_input = resolveComponent("base-input");
399
+ const _component_form_input = resolveComponent("form-input");
397
400
  return openBlock(), createElementBlock("div", _hoisted_1$1, [
398
401
  (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (option, index) => {
399
- return openBlock(), createBlock(_component_base_input, {
402
+ return openBlock(), createBlock(_component_form_input, {
400
403
  key: index,
401
404
  type: "radio",
402
405
  name: __props.name,
@@ -512,9 +515,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
512
515
  createElementVNode("div", _hoisted_3, [
513
516
  createElementVNode("button", {
514
517
  class: normalizeClass(["btn dropdown-toggle", {
515
- [`button-${__props.variant}`]: __props.variant,
516
- [`button-${__props.color}`]: __props.color,
517
- [`button-${__props.disabled}`]: __props.disabled
518
+ [`btn-${__props.variant}`]: __props.variant,
519
+ [`btn-${__props.color}`]: __props.color,
520
+ [`btn-${__props.disabled}`]: __props.disabled
518
521
  }]),
519
522
  type: "button",
520
523
  id: __props.id,
@@ -548,4 +551,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
548
551
  };
549
552
  }
550
553
  });
551
- 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 };
554
+ export { _sfc_main$4 as BaseButton, _sfc_main$2 as CheckGroup, _sfc_main$3 as FormInput, _sfc_main as InputDropdown, _sfc_main$5 as LoadingSpinner, _sfc_main$1 as RadioGroup, _sfc_main$6 as SvgIcon };
@@ -1,4 +1,5 @@
1
- (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}
2
- `)();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}
3
- `)();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}
4
- `)();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"}})});
1
+ (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 H=(()=>`.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}
2
+ `)();const p={class:"icon",preserveAspectRatio:"xMaxYMin"},b=["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",p,[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 J=(()=>`.loading-spinner{min-width:2rem}
3
+ `)();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 Y=(()=>`.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}
4
+ `)();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 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,x)}}});function m(){return(new Date().valueOf()+Math.random()).toString(36)}var K=(()=>`.form-input{display:flex;flex-flow:column}.form-input>*{order:2}.form-input__label{order:0}.form-input__input-group{order:1}
5
+ `)();const w={class:"form-input"},E={class:"input-group form-input__input-group"},C=["type","name","id","label","placeholder","pattern","disabled","read-only","required","maxlength","checked","aria-label"],N=["for","innerHTML"],q=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: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,C),[[e.vModelDynamic,e.unref(i)]]),e.renderSlot(a.$slots,"input-append")]),e.renderSlot(a.$slots,"label",{},()=>[e.createElementVNode("label",{for:t.id,class:"form-input__label",innerHTML:t.label},null,8,N)])]))}}),z={class:"radio-group"},M=["for"],O=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("form-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,M)])}}}),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("form-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)])}}}),I={class:"input input-dropdown"},A={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",I,[e.createElementVNode("div",A,[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}]),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=V,r.CheckGroup=O,r.FormInput=q,r.InputDropdown=G,r.LoadingSpinner=$,r.RadioGroup=L,r.SvgIcon=g,Object.defineProperties(r,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
@@ -35,7 +35,7 @@ declare const _default: import("vue").DefineComponent<{
35
35
  type: BooleanConstructor;
36
36
  default: boolean;
37
37
  };
38
- }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
38
+ }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
39
39
  modelValue: {
40
40
  default: never[];
41
41
  };
@@ -0,0 +1,121 @@
1
+ declare const _default: import("vue").DefineComponent<{
2
+ modelValue: {
3
+ type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
4
+ default: string;
5
+ };
6
+ type: {
7
+ type: StringConstructor;
8
+ default: string;
9
+ };
10
+ name: {
11
+ type: StringConstructor;
12
+ default: () => string;
13
+ };
14
+ id: {
15
+ type: StringConstructor;
16
+ default: () => string;
17
+ };
18
+ label: {
19
+ type: StringConstructor;
20
+ default: string;
21
+ };
22
+ placeholder: {
23
+ type: StringConstructor;
24
+ default: string;
25
+ };
26
+ variant: {
27
+ type: StringConstructor;
28
+ default: string;
29
+ };
30
+ disabled: {
31
+ type: BooleanConstructor;
32
+ default: boolean;
33
+ };
34
+ readOnly: {
35
+ type: BooleanConstructor;
36
+ default: boolean;
37
+ };
38
+ required: {
39
+ type: BooleanConstructor;
40
+ default: boolean;
41
+ };
42
+ maxlength: {
43
+ type: NumberConstructor;
44
+ };
45
+ pattern: {
46
+ type: StringConstructor;
47
+ default: null;
48
+ };
49
+ checked: {
50
+ type: BooleanConstructor;
51
+ default: boolean;
52
+ };
53
+ }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
54
+ modelValue: {
55
+ type: (BooleanConstructor | StringConstructor | NumberConstructor)[];
56
+ default: string;
57
+ };
58
+ type: {
59
+ type: StringConstructor;
60
+ default: string;
61
+ };
62
+ name: {
63
+ type: StringConstructor;
64
+ default: () => string;
65
+ };
66
+ id: {
67
+ type: StringConstructor;
68
+ default: () => string;
69
+ };
70
+ label: {
71
+ type: StringConstructor;
72
+ default: string;
73
+ };
74
+ placeholder: {
75
+ type: StringConstructor;
76
+ default: string;
77
+ };
78
+ variant: {
79
+ type: StringConstructor;
80
+ default: string;
81
+ };
82
+ disabled: {
83
+ type: BooleanConstructor;
84
+ default: boolean;
85
+ };
86
+ readOnly: {
87
+ type: BooleanConstructor;
88
+ default: boolean;
89
+ };
90
+ required: {
91
+ type: BooleanConstructor;
92
+ default: boolean;
93
+ };
94
+ maxlength: {
95
+ type: NumberConstructor;
96
+ };
97
+ pattern: {
98
+ type: StringConstructor;
99
+ default: null;
100
+ };
101
+ checked: {
102
+ type: BooleanConstructor;
103
+ default: boolean;
104
+ };
105
+ }>> & {
106
+ "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
107
+ }, {
108
+ checked: boolean;
109
+ required: boolean;
110
+ type: string;
111
+ label: string;
112
+ pattern: string;
113
+ modelValue: string | number | boolean;
114
+ id: string;
115
+ variant: string;
116
+ name: string;
117
+ disabled: boolean;
118
+ placeholder: string;
119
+ readOnly: boolean;
120
+ }>;
121
+ export default _default;
@@ -128,10 +128,10 @@ declare const _default: import("vue").DefineComponent<{
128
128
  options: any[];
129
129
  required: boolean;
130
130
  label: string;
131
+ color: string;
131
132
  modelValue: string | number | boolean | Record<string, any>;
132
133
  id: string;
133
134
  variant: string;
134
- color: string;
135
135
  name: string;
136
136
  disabled: boolean;
137
137
  placeholder: string;
@@ -35,7 +35,7 @@ declare const _default: import("vue").DefineComponent<{
35
35
  type: BooleanConstructor;
36
36
  default: boolean;
37
37
  };
38
- }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "change")[], "update:modelValue" | "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
38
+ }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
39
39
  modelValue: {
40
40
  default: boolean;
41
41
  };
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  export { default as SvgIcon } from "./components/svg-icon.vue";
2
2
  export { default as LoadingSpinner } from "./components/loading-spinner.vue";
3
3
  export { default as BaseButton } from "./components/base-button.vue";
4
- export { default as BaseInput } from "./components/base-input.vue";
4
+ export { default as FormInput } from "./components/form-input.vue";
5
5
  export { default as CheckGroup } from "./components/check-group.vue";
6
6
  export { default as RadioGroup } from "./components/radio-group.vue";
7
7
  export { default as InputDropdown } from "./components/input-dropdown.vue";
package/dist/style.css CHANGED
@@ -1 +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}
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{order:1}
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "ablok-components",
3
3
  "private": false,
4
- "version": "0.0.22",
4
+ "version": "0.0.25",
5
5
  "scripts": {
6
6
  "dev": "vite",
7
7
  "build": "vue-tsc --noEmit && vite build",