@volverjs/ui-vue/dist/components/VvCheckboxGroup/VvCheckboxGroup.es.js

@volverjs/ui-vue is a lightweight Vue 3 component library to accompany @volverjs/style.

import{computed as e,isRef as a,defineComponent as l,h as t,inject as i,toRef as n,toRefs as o,useId as r,unref as u,useSlots as d,ref as s,watchEffect as v,watch as f,onMounted as c,createElementBlock as b,openBlock as p,normalizeClass as y,withDirectives as h,renderSlot as g,createVNode as m,createElementVNode as S,vModelCheckbox as L,createTextVNode as k,toDisplayString as O,createSlots as $,withCtx as V,normalizeProps as x,guardReactiveProps as A,provide as B,createCommentVNode as N,Fragment as _,renderList as j,createBlock as G,mergeProps as w}from"vue";import{useVModel as I}from"@vueuse/core";import{getProperty as q}from"dot-prop";var C=/* @__PURE__ */(e=>(e.local="local",e.session="session",e))(C||{}),H=/* @__PURE__ */(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(H||{}),K=/* @__PURE__ */(e=>(e.before="before",e.after="after",e))(K||{}),D=/* @__PURE__ */(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(D||{}),E=/* @__PURE__ */(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(E||{});const R=Symbol.for("volver"),F=Symbol.for("checkGroup"),T={valid:{type:Boolean,default:!1},validLabel:{type:[String,Array],default:void 0}},J={invalid:{type:Boolean,default:!1},invalidLabel:{type:[String,Array],default:void 0}},z={loading:{type:Boolean,default:!1},loadingLabel:{type:String,default:"Loading..."}},P={disabled:{type:Boolean,default:!1}},U={required:{type:Boolean,default:!1}},M={label:{type:[String,Number],default:void 0}},Q={readonly:{type:Boolean,default:!1}},W={modifiers:{type:[String,Array],default:void 0}},X={hintLabel:{type:String,default:""}},Y={options:{type:Array,default:()=>[]},labelKey:{type:[String,Function],default:"label"},valueKey:{type:[String,Function],default:"value"},disabledKey:{type:[String,Function],default:"disabled"}};K.before;const Z={tabindex:{type:[String,Number],default:0}},ee={id:[String,Number]};H.bottom;const ae={...{...ee,name:{type:String,required:!0}},...Z,...T,...J,...X,...P,...Q,...W,...M,...z,value:{type:[String,Number,Boolean],default:void 0},modelValue:{type:[Object,Number,Boolean,String],default:void 0}},le={...T,...J,...Y,...X,...P,...Q,...W,...M,...z,...U,modelValue:{type:[String,Array,Boolean,Number,Symbol],default:void 0},name:{type:String,required:!0},vertical:{type:Boolean,default:!1}};D.button,E.button,C.local;const te=le;function ie(e,a,l){return ne(e,a)}function ne(e,a){if(e===a)return!0;if(e&&a&&"object"==typeof e&&"object"==typeof a){const l=Array.isArray(e),t=Array.isArray(a);let i,n,o;if(l&&t){if(n=e.length,n!==a.length)return!1;for(i=n;0!==i--;)if(!ne(e[i],a[i]))return!1;return!0}if(l!==t)return!1;const r=e instanceof Date,u=a instanceof Date;if(r!==u)return!1;if(r&&u)return e.getTime()===a.getTime();const d=e instanceof RegExp,s=a instanceof RegExp;if(d!==s)return!1;if(d&&s)return e.toString()===a.toString();const v=Object.keys(e);if(n=v.length,n!==Object.keys(a).length)return!1;for(i=n;0!==i--;)if(!Object.prototype.hasOwnProperty.call(a,v[i]))return!1;for(i=n;0!==i--;)if(o=v[i],!ne(e[o],a[o]))return!1;return!0}return Number.isNaN(e)&&Number.isNaN(a)}function oe(e){return Array.isArray(e)?e.filter(e=>"string"==typeof e).join(" "):e}function re(i,n){const o=e(()=>a(i)?i.value:i),r=e(()=>oe(o.value.invalidLabel)),u=e(()=>oe(o.value.validLabel)),d=e(()=>o.value.loadingLabel),s=e(()=>o.value.hintLabel),v=e(()=>Boolean(o.value.loading&&(n.loading||d.value))),f=e(()=>!v.value&&Boolean(o.value.invalid&&(n.invalid||r.value))),c=e(()=>!v.value&&!f.value&&Boolean(o.value.valid&&(n.valid||u.value))),b=e(()=>!v.value&&!f.value&&!c.value&&Boolean(n.hint||s.value)),p=e(()=>f.value||c.value||v.value||b.value),y=e(()=>({modelValue:o.value.modelValue,valid:o.value.valid,invalid:o.value.invalid,loading:o.value.loading})),h=l({name:"HintSlot",props:{tag:{type:String,default:"small"}},setup:()=>({isVisible:p,invalidLabel:r,validLabel:u,loadingLabel:d,hintLabel:s,hasInvalidLabelOrSlot:f,hasValidLabelOrSlot:c,hasLoadingLabelOrSlot:v,hasHintLabelOrSlot:b}),render(){if(this.isVisible){let e;return this.hasInvalidLabelOrSlot&&(e="alert"),this.hasValidLabelOrSlot&&(e="status"),this.hasLoadingLabelOrSlot?t(this.tag,{role:e},this.$slots.loading?.()??this.loadingLabel):this.hasInvalidLabelOrSlot?t(this.tag,{role:e},this.$slots.invalid?.()??this.$slots.invalid??this.invalidLabel):this.hasValidLabelOrSlot?t(this.tag,{role:e},this.$slots.valid?.()??this.validLabel):t(this.tag,{role:e},this.$slots.hint?.()??this.$slots.hint??this.hintLabel)}return null}});return{hasInvalidLabelOrSlot:f,hasHintLabelOrSlot:b,hasValidLabelOrSlot:c,hasLoadingLabelOrSlot:v,hintSlotScope:y,HintSlot:h}}const ue={...ae,...W,indeterminate:Boolean,uncheckedValue:[String,Number,Boolean],switch:Boolean};function de(a,l){const{group:t,isInGroup:r,getGroupOrLocalRef:u}=function(a){const l=i(a,void 0),t=e(()=>void 0!==l);return{group:l,isInGroup:t,getGroupOrLocalRef:function(a,t,i){const o=l?.[a];if(o)return e({get:()=>o.value,set(e){o.value=e}});const r=n(t,a);return e({get:()=>r.value,set(e){i&&i(`update:${a}`,e)}})}}}(F),{id:d,switch:s,indeterminate:v}=o(a),f=u("modelValue",a,l),c=u("valid",a),b=u("invalid",a),p=e(()=>Boolean(a.readonly||t?.readonly.value)),y=e(()=>Boolean(a.disabled||t?.disabled.value));return{id:d,propsSwitch:s,indeterminate:v,group:t,isInGroup:r,modelValue:f,valid:c,invalid:b,readonly:p,disabled:y}}function se(a,l,t){const n=i(R,void 0),o=e(()=>{if(n&&n.defaults.value?.[a])return n.defaults.value[a]});return e(()=>{if(void 0===o.value)return t;const e=o.value,a=l,i=t;return Object.keys(a).reduce((l,t)=>{const n=i[t];if(l[t]=n,t in e){if(Array.isArray(a[t])){const i=a[t];if(i.length){i[0]===n&&(l[t]=e[t])}}if("function"==typeof a[t]){(0,a[t])()===n&&(l[t]=e[t])}if("object"==typeof a[t]){let i=a[t].default;"function"==typeof i&&(i=i()),"object"==typeof i?JSON.stringify(i)===JSON.stringify(n)&&(l[t]=e[t]):i===n&&(l[t]=e[t])}}return l},{})})}function ve(a,l,t){return e(()=>{const e={[a]:!0},i="string"==typeof l?.value?l.value.split(" "):l?.value;return i&&Array.isArray(i)&&i.forEach(l=>{l&&(e[`${a}--${l}`]=!0)}),t&&Object.keys(t.value).forEach(l=>{e[`${a}--${l}`]=u(t.value[l])}),e})}const fe=["for"],ce=["id","name","disabled","value","tabindex","aria-invalid","aria-describedby","aria-errormessage"],be=/* @__PURE__ */l({name:"VvCheckbox",props:ue,emits:["click","update:modelValue","change","blur"],setup(l,{emit:t}){const i=l,n=t,B=d(),N=se("VvCheckbox",ue,i),{id:_,disabled:j,readonly:G,valid:w,invalid:I,propsSwitch:q,modelValue:C,indeterminate:H,isInGroup:K}=de(i,n),D=function(a){return e(()=>String(a?.value||r()))}(_),E=e(()=>`${D.value}-hint`),R=e(()=>J.value?-1:i.tabindex),F=s(),T=e(()=>void 0!==i.uncheckedValue&&!K.value),J=e(()=>j.value||G.value),z=e(()=>!0===I.value||!0!==w.value&&void 0),P=e(()=>T.value?C.value===i.value:Array.isArray(C.value)?function(e,a){if(null!=e&&a&&a.length)for(const l of a)if(ie(e,l))return!0;return!1}(i.value,C.value):ie(i.value,C.value)),U=e(()=>!!H.value||!(P.value||!T.value||i.uncheckedValue===C.value)),M=e(()=>{if(!T.value)return!["string","number","boolean"].includes(typeof i.value)||i.value}),Q=e({get:()=>P.value,set(e){if(T.value)C.value=e?i.value:i.uncheckedValue;else if(Array.isArray(C.value)||K.value){const a=C.value??[],l=new Set(Array.isArray(a)?a:[a]);e?l.add(i.value):l.delete(i.value),C.value=[...l]}else C.value=e?i.value:void 0;n("change",e)}}),{modifiers:W}=o(i),X=ve("vv-checkbox",W,e(()=>({switch:q.value,valid:w.value,invalid:I.value,disabled:j.value,readonly:G.value,indeterminate:H.value})));v(()=>{T.value&&Array.isArray(C.value)&&console.warn("[VvCheckbox] The model value is an array but the component is in binary mode.")}),f(()=>U.value,e=>{F.value.indeterminate=!!e}),c(()=>{U.value&&(F.value.indeterminate=!0)});const{HintSlot:Y,hasHintLabelOrSlot:Z,hasInvalidLabelOrSlot:ee,hintSlotScope:ae}=re(N,B);return(e,l)=>(p(),b("label",{class:y(u(X)),for:u(D)},[h(S("input",{id:u(D),ref_key:"input",ref:F,"onUpdate:modelValue":l[0]||(l[0]=e=>a(Q)?Q.value=e:null),type:"checkbox",class:"vv-checkbox__input",name:e.name,disabled:u(J),value:u(M),tabindex:u(R),"aria-invalid":u(z),"aria-describedby":u(Z)?u(E):void 0,"aria-errormessage":u(ee)?u(E):void 0},null,8,ce),[[L,u(Q)]]),g(e.$slots,"default",{value:u(C)},()=>[k(O(e.label),1)]),m(u(Y),{id:u(E),class:"vv-checkbox__hint"},$({_:2},[e.$slots.hint?{name:"hint",fn:V(()=>[g(e.$slots,"hint",x(A(u(ae))))]),key:"0"}:void 0,e.$slots.loading?{name:"loading",fn:V(()=>[g(e.$slots,"loading",x(A(u(ae))))]),key:"1"}:void 0,e.$slots.valid?{name:"valid",fn:V(()=>[g(e.$slots,"valid",x(A(u(ae))))]),key:"2"}:void 0,e.$slots.invalid?{name:"invalid",fn:V(()=>[g(e.$slots,"invalid",x(A(u(ae))))]),key:"3"}:void 0]),1032,["id"])],10,fe))}});const pe=["textContent"],ye={class:"vv-checkbox-group__wrapper"},he=/* @__PURE__ */l({name:"VvCheckboxGroup",props:te,emits:["update:modelValue","change"],setup(a,{emit:l}){const t=a,i=l,n=d(),r=se("VvCheckboxGroup",te,t),s=I(t,"modelValue",i),{disabled:v,readonly:f,vertical:c,valid:h,invalid:L,modifiers:k}=o(t);B(F,{modelValue:s,disabled:v,readonly:f,valid:h,invalid:L});const{getOptionLabel:C,getOptionValue:H,isOptionDisabled:K}=function(e){const{options:a,labelKey:l,valueKey:t,disabledKey:i}=o(e);return{options:a,getOptionLabel:e=>"string"==typeof e?e:"function"==typeof l.value?l.value(e):String(l.value?q(e,l.value):e),getOptionValue:e=>"string"==typeof e?e:"function"==typeof t.value?t.value(e):t.value?q(e,t.value):e,isOptionDisabled:e=>"string"!=typeof e&&("function"==typeof i.value?i.value(e):!!i.value&&Boolean(q(e,i.value))),getOptionGrouped:e=>"string"==typeof e?[]:"object"==typeof e&&e&&"options"in e?e.options:[]}}(t),D=ve("vv-checkbox-group",k,e(()=>({disabled:v.value,readonly:f.value,required:t.required,horizontal:!c.value,valid:h.value,invalid:L.value})));const{HintSlot:E,hintSlotScope:R}=re(r,n);return(e,a)=>(p(),b("fieldset",{class:y(u(D))},[e.label?(p(),b("legend",{key:0,textContent:O(e.label)},null,8,pe)):N("v-if",!0),S("div",ye,[e.options.length>0?(p(!0),b(_,{key:0},j(e.options,(e,a)=>(p(),G(be,w({key:a},{ref_for:!0},function(e,a){return{id:`${t.name}_opt${a}`,name:t.name,label:C(e),value:H(e),required:t.required,disabled:K(e)}}(e,a)),null,16))),128)):g(e.$slots,"default",{key:1})]),m(u(E),{class:"vv-checkbox-group__hint"},$({_:2},[e.$slots.hint?{name:"hint",fn:V(()=>[g(e.$slots,"hint",x(A(u(R))))]),key:"0"}:void 0,e.$slots.loading?{name:"loading",fn:V(()=>[g(e.$slots,"loading",x(A(u(R))))]),key:"1"}:void 0,e.$slots.valid?{name:"valid",fn:V(()=>[g(e.$slots,"valid",x(A(u(R))))]),key:"2"}:void 0,e.$slots.invalid?{name:"invalid",fn:V(()=>[g(e.$slots,"invalid",x(A(u(R))))]),key:"3"}:void 0]),1024)],2))}});export{he as default};