@volverjs/ui-vue 0.0.2 → 0.0.3-beta.3

package/dist/components/VvCheckboxGroup/VvCheckboxGroup.umd.js

@@ -1 +1 @@
-(function(e,C){typeof exports=="object"&&typeof module<"u"?module.exports=C(require("vue"),require("@vueuse/core"),require("nanoid")):typeof define=="function"&&define.amd?define(["vue","@vueuse/core","nanoid"],C):(e=typeof globalThis<"u"?globalThis:e||self,e.VvCheckboxGroup=C(e.vue,e.core,e.nanoid))})(this,function(e,C,q){"use strict";const R="VV_CHECK_GROUP";function K(n){if(Object.keys(n).some(t=>t!=="key"&&!e.isRef(n[t])))throw Error("One or more groupState props aren't ref.");e.provide(n.key,e.computed(()=>n))}function M(n){const{options:t,labelKey:r,valueKey:i}=e.toRefs(n);return{options:t,getOptionLabel:o=>typeof o!="object"&&o!==null?o:typeof r.value=="function"?r.value(o):o[r.value],getOptionValue:o=>typeof o!="object"&&o!==null?o:typeof i.value=="function"?i.value(o):o[i.value]}}function j(n,t,r){return r?x(n,r)===x(t,r):O(n,t)}function O(n,t){if(n===t)return!0;if(n&&t&&typeof n=="object"&&typeof t=="object"){const r=Array.isArray(n),i=Array.isArray(t);let s,l,o;if(r&&i){if(l=n.length,l!=t.length)return!1;for(s=l;s--!==0;)if(!O(n[s],t[s]))return!1;return!0}if(r!=i)return!1;const d=n instanceof Date,c=t instanceof Date;if(d!=c)return!1;if(d&&c)return n.getTime()==t.getTime();const a=n instanceof RegExp,f=t instanceof RegExp;if(a!=f)return!1;if(a&&f)return n.toString()==t.toString();const u=Object.keys(n);if(l=u.length,l!==Object.keys(t).length)return!1;for(s=l;s--!==0;)if(!Object.prototype.hasOwnProperty.call(t,u[s]))return!1;for(s=l;s--!==0;)if(o=u[s],!O(n[o],t[o]))return!1;return!0}return n!==n&&t!==t}function x(n,t){if(n&&Object.keys(n).length&&t){if(t.indexOf(".")===-1)return n[t];{const r=t.split(".");let i=n;for(let s=0,l=r.length;s<l;++s){if(n==null)return null;i=i[r[s]]}return i}}else return null}function z(n,t){if(n!=null&&t&&t.length){for(const r of t)if(j(n,r))return!0}return!1}function E(n){return(t=>t==null||t===""||Array.isArray(t)&&t.length===0||!(t instanceof Date)&&typeof t=="object"&&Object.keys(t).length===0)(e.unref(n))}function F(n){return typeof n=="string"||n instanceof String}function G(n){var t,r;if(n)return(r=(t=n.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g))==null?void 0:t.join("-"))==null?void 0:r.toLowerCase()}function $(n,t){const r={[`${n}`]:!0};return{bemCssClasses:e.computed(()=>Object.keys(t).reduce((s,l)=>{const o=e.unref(t[l])||!1;if(!o)return s;if(l==="modifiers"){const d=Array.isArray(o)?o:o.split(" ");return{...s,...d.reduce((c,a)=>({...c,[`${n}--${G(a)}`]:!0}),{})}}else return{...s,[`${n}--${G(l)}`]:o}},r)||{})}}function B(n){return Array.isArray(n)?n.filter(t=>F(t)).join(" "):n}function w(n,t){const{invalid:r,valid:i,hint:s,loading:l}=t,{hintLabel:o,modelValue:d,valid:c,validLabel:a,invalid:f,invalidLabel:u,...k}=e.toRefs(n),p=x(k,"loading"),m=x(k,"loadingLabel"),h=e.computed(()=>f.value?!!(f.value&&r||u!=null&&u.value&&Array.isArray(u.value)&&u.value.length>0||u!=null&&u.value&&!E(u)):!1),y=e.computed(()=>!!(o&&o.value||s)),g=e.computed(()=>!!(a&&a.value||i)),b=e.computed(()=>!!(p!=null&&p.value&&l||p!=null&&p.value&&(m!=null&&m.value))),V=e.computed(()=>y.value||g.value||h.value||b.value);return{hasInvalid:h,hasHint:y,hasValid:g,hasLoading:b,HintSlot:{name:"HintSlot",props:{params:{type:Object,default:()=>({})}},setup(P){const A=e.computed(()=>{const S=C.toReactive({hintLabel:o,modelValue:d,valid:c,validLabel:a,invalid:f,invalidLabel:u,loading:p,loadingLabel:m,...P.params});return f!=null&&f.value?(r==null?void 0:r(S))||B(u==null?void 0:u.value)||(o==null?void 0:o.value):c!=null&&c.value?(i==null?void 0:i(S))||B(a==null?void 0:a.value)||(o==null?void 0:o.value):p!=null&&p.value?(l==null?void 0:l(S))||B(m==null?void 0:m.value)||(o==null?void 0:o.value):(s==null?void 0:s(S))||B(o==null?void 0:o.value)||(o==null?void 0:o.value)});return{isVisible:V,hasInvalid:h,hasValid:g,hintContent:A}},render(){if(this.isVisible)return e.h("small",{role:this.hasInvalid||this.hasValid?"alert":void 0},this.hintContent)}}}}function Z(n){const t=e.inject(n,void 0),r=e.computed(()=>!E(t));function i(s,l,o){if(t!=null&&t.value){const c=e.unref(t.value)[s];return e.computed({get(){return c==null?void 0:c.value},set(a){c.value=a}})}const d=e.toRef(l,s);return e.computed({get(){return d.value},set(c){o&&o(`update:${s}`,c)}})}return{group:t,isInGroup:r,getGroupOrLocalRef:i}}const I={valid:Boolean,validLabel:[String,Array]},N={invalid:Boolean,invalidLabel:[String,Array]},D={disabled:Boolean},H={readonly:Boolean},T={hintLabel:{type:String,default:""}},U={options:{type:Array,default:()=>[]},labelKey:{type:[String,Function],default:"label"},valueKey:{type:[String,Function],default:"value"}},J={...{id:[String,Number],name:{type:String,required:!0}},...{tabindex:{type:[String,Number],default:0}},...I,...N,...T,...D,...H,value:[String,Number,Boolean],modelValue:[Object,Number,Boolean,String],label:String},Q={...I,...N,...U,...T,...D,...H,modelValue:[String,Array],label:String,name:{type:String,required:!0},vertical:Boolean},W={...J,indeterminate:Boolean,uncheckedValue:[String,Number,Boolean],switch:Boolean},X=["click","update:modelValue","change","blur"];function Y(n,t){const{group:r,isInGroup:i,getGroupOrLocalRef:s}=Z(R),{switch:l,indeterminate:o}=e.toRefs(n),d=s("modelValue",n,t),c=s("readonly",n),a=s("disabled",n),f=s("valid",n),u=s("invalid",n);return{propsSwitch:l,indeterminate:o,group:r,isInGroup:i,modelValue:d,readonly:c,disabled:a,valid:f,invalid:u}}const L=["for"],ee=["id","name","disabled","value","tabindex","aria-invalid"],te={name:"VvCheckbox"},ne=e.defineComponent({...te,props:W,emits:X,setup(n,{emit:t}){const r=n,i=e.useSlots(),{disabled:s,readonly:l,valid:o,invalid:d,propsSwitch:c,modelValue:a,indeterminate:f,isInGroup:u}=Y(r,t),k=e.computed(()=>String(r.id||q.nanoid())),p=e.computed(()=>y.value?-1:r.tabindex),m=e.ref(),h=e.computed(()=>r.uncheckedValue!==void 0&&!u.value),y=e.computed(()=>s.value||l.value),g=e.computed(()=>{if(d.value===!0)return!0;if(o.value===!0)return!1}),b=e.computed(()=>h.value?a.value===r.value:Array.isArray(a.value)?z(r.value,a.value):j(r.value,a.value)),V=e.computed(()=>!!(f.value||!b.value&&h.value&&r.uncheckedValue!==a.value)),P=e.computed(()=>{if(!h.value)return["string","number","boolean"].includes(typeof r.value)?r.value:!0}),A=e.computed({get(){return b.value},set(v){if(h.value)a.value=v?r.value:r.uncheckedValue;else if(Array.isArray(a.value)||u.value){const _=new Set(Array.isArray(a.value)?a.value:a.value!==void 0?[a.value]:[]);v?_.add(r.value):_.delete(r.value),a.value=[..._]}else a.value=v?r.value:void 0;t("change",v)}}),{bemCssClasses:S}=$("vv-checkbox",{switch:c,valid:o,invalid:d,disabled:s,readonly:l,indeterminate:f});e.watchEffect(()=>{h.value&&Array.isArray(a.value)&&console.warn("[VvCheckbox] The model value is an array but the component is in binary mode.")}),e.watch(()=>V.value,v=>{v?m.value.indeterminate=!0:m.value.indeterminate=!1}),e.onMounted(()=>{V.value&&(m.value.indeterminate=!0)});const{HintSlot:ie}=w(r,i);return(v,_)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(e.unref(S)),for:e.unref(k)},[e.withDirectives(e.createElementVNode("input",{id:e.unref(k),ref_key:"input",ref:m,"onUpdate:modelValue":_[0]||(_[0]=ue=>e.isRef(A)?A.value=ue:null),type:"checkbox",class:"vv-checkbox__input",name:v.name,disabled:e.unref(y),value:e.unref(P),tabindex:e.unref(p),"aria-invalid":e.unref(g)},null,8,ee),[[e.vModelCheckbox,e.unref(A)]]),e.renderSlot(v.$slots,"default",{value:e.unref(a)},()=>[e.createTextVNode(e.toDisplayString(v.label),1)]),e.createVNode(e.unref(ie),{class:"vv-checkbox__hint",params:{value:e.unref(a)}},null,8,["params"])],10,L))}}),re=Q,oe=["update:modelValue","change"],se=["textContent"],ae={class:"vv-checkbox-group__wrapper"},le={name:"VvCheckboxGroup"};return e.defineComponent({...le,props:re,emits:oe,setup(n,{emit:t}){const r=n,i=e.useSlots(),s=C.useVModel(r,"modelValue",t),{disabled:l,readonly:o,vertical:d,valid:c,invalid:a}=e.toRefs(r);K({key:R,modelValue:s,disabled:l,readonly:o,valid:c,invalid:a});const{getOptionLabel:u,getOptionValue:k}=M(r),{bemCssClasses:p}=$("vv-checkbox-group",{disabled:l,readonly:o,horizontal:e.computed(()=>!d.value),valid:c,invalid:a}),m=(y,g)=>({id:`${r.name}_opt${g}`,name:r.name,label:u(y),value:k(y)}),{HintSlot:h}=w(r,i);return(y,g)=>(e.openBlock(),e.createElementBlock("fieldset",{class:e.normalizeClass(e.unref(p))},[y.label?(e.openBlock(),e.createElementBlock("legend",{key:0,textContent:e.toDisplayString(y.label)},null,8,se)):e.createCommentVNode("",!0),e.createElementVNode("div",ae,[y.options.length>0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(y.options,(b,V)=>(e.openBlock(),e.createBlock(ne,e.mergeProps({key:V},m(b,V)),null,16))),128)):e.renderSlot(y.$slots,"default",{key:1})]),e.createVNode(e.unref(h),{class:"vv-checkbox-group__hint"})],2))}})});
+(function(e,x){typeof exports=="object"&&typeof module<"u"?module.exports=x(require("vue"),require("nanoid")):typeof define=="function"&&define.amd?define(["vue","nanoid"],x):(e=typeof globalThis<"u"?globalThis:e||self,e.VvCheckboxGroup=x(e.vue,e.nanoid))})(this,function(e,x){"use strict";const G="VV_CHECK_GROUP";function P(r){return Array.isArray(r)?r.filter(m=>isString(m)).join(" "):r}function N(r,m){const{invalid:t,valid:f,hint:l,loading:d}=m,{hintLabel:o,modelValue:b,valid:p,validLabel:n,invalid:c,invalidLabel:a,...V}=toRefs(r),s=resolveFieldData(V,"loading"),u=resolveFieldData(V,"loadingLabel"),v=computed(()=>c.value?!!(c.value&&t||a!=null&&a.value&&Array.isArray(a.value)&&a.value.length>0||a!=null&&a.value&&!isEmpty(a)):!1),i=computed(()=>!!(o&&o.value||l)),k=computed(()=>!!(n&&n.value||f)),g=computed(()=>!!(s!=null&&s.value&&d||s!=null&&s.value&&(u!=null&&u.value))),C=computed(()=>i.value||k.value||v.value||g.value);return{hasInvalid:v,hasHint:i,hasValid:k,hasLoading:g,HintSlot:{name:"HintSlot",props:{params:{type:Object,default:()=>({})}},setup(A){const B=computed(()=>{const S=toReactive({hintLabel:o,modelValue:b,valid:p,validLabel:n,invalid:c,invalidLabel:a,loading:s,loadingLabel:u,...A.params});return c!=null&&c.value?(t==null?void 0:t(S))||P(a==null?void 0:a.value)||(o==null?void 0:o.value):p!=null&&p.value?(f==null?void 0:f(S))||P(n==null?void 0:n.value)||(o==null?void 0:o.value):s!=null&&s.value?(d==null?void 0:d(S))||P(u==null?void 0:u.value)||(o==null?void 0:o.value):(l==null?void 0:l(S))||P(o==null?void 0:o.value)||(o==null?void 0:o.value)});return{isVisible:C,hasInvalid:v,hasValid:k,hintContent:B}},render(){if(this.isVisible)return h("small",{role:this.hasInvalid||this.hasValid?"alert":void 0},this.hintContent)}}}}const E={valid:Boolean,validLabel:[String,Array]},R={invalid:Boolean,invalidLabel:[String,Array]},I={disabled:Boolean},O={readonly:Boolean},H={hintLabel:{type:String,default:""}},w={options:{type:Array,default:()=>[]},labelKey:{type:[String,Function],default:"label"},valueKey:{type:[String,Function],default:"value"}},$={...{id:[String,Number],name:{type:String,required:!0}},...{tabindex:{type:[String,Number],default:0}},...E,...R,...H,...I,...O,value:[String,Number,Boolean],modelValue:[Object,Number,Boolean,String],label:String},D={...E,...R,...w,...H,...I,...O,modelValue:[String,Array],label:String,name:{type:String,required:!0},vertical:Boolean},j={...$,indeterminate:Boolean,uncheckedValue:[String,Number,Boolean],switch:Boolean},F=["click","update:modelValue","change","blur"];function M(r,m){const{group:t,isInGroup:f,getGroupOrLocalRef:l}=useInjectedGroupState(G),{switch:d,indeterminate:o}=toRefs(r),b=l("modelValue",r,m),p=l("readonly",r),n=l("disabled",r),c=l("valid",r),a=l("invalid",r);return{propsSwitch:d,indeterminate:o,group:t,isInGroup:f,modelValue:b,readonly:p,disabled:n,valid:c,invalid:a}}const T=["for"],q=["id","name","disabled","value","tabindex","aria-invalid"],K={name:"VvCheckbox"},z=e.defineComponent({...K,props:j,emits:F,setup(r,{emit:m}){const t=r,f=useSlots(),{disabled:l,readonly:d,valid:o,invalid:b,propsSwitch:p,modelValue:n,indeterminate:c,isInGroup:a}=M(t,m),V=computed(()=>String(t.id||x.nanoid())),s=computed(()=>i.value?-1:t.tabindex),u=ref(),v=computed(()=>t.uncheckedValue!==void 0&&!a.value),i=computed(()=>l.value||d.value),k=computed(()=>{if(b.value===!0)return!0;if(o.value===!0)return!1}),g=computed(()=>v.value?n.value===t.value:Array.isArray(n.value)?contains(t.value,n.value):equals(t.value,n.value)),C=computed(()=>!!(c.value||!g.value&&v.value&&t.uncheckedValue!==n.value)),A=computed(()=>{if(!v.value)return["string","number","boolean"].includes(typeof t.value)?t.value:!0}),B=computed({get(){return g.value},set(y){if(v.value)n.value=y?t.value:t.uncheckedValue;else if(Array.isArray(n.value)||a.value){const _=new Set(Array.isArray(n.value)?n.value:n.value!==void 0?[n.value]:[]);y?_.add(t.value):_.delete(t.value),n.value=[..._]}else n.value=y?t.value:void 0;m("change",y)}}),{bemCssClasses:S}=useBemModifiers("vv-checkbox",{switch:p,valid:o,invalid:b,disabled:l,readonly:d,indeterminate:c});watchEffect(()=>{v.value&&Array.isArray(n.value)&&console.warn("[VvCheckbox] The model value is an array but the component is in binary mode.")}),watch(()=>C.value,y=>{y?u.value.indeterminate=!0:u.value.indeterminate=!1}),onMounted(()=>{C.value&&(u.value.indeterminate=!0)});const{HintSlot:Y}=N(t,f);return(y,_)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(e.unref(S)),for:e.unref(V)},[e.withDirectives(e.createElementVNode("input",{id:e.unref(V),ref_key:"input",ref:u,"onUpdate:modelValue":_[0]||(_[0]=Z=>e.isRef(B)?B.value=Z:null),type:"checkbox",class:"vv-checkbox__input",name:y.name,disabled:e.unref(i),value:e.unref(A),tabindex:e.unref(s),"aria-invalid":e.unref(k)},null,8,q),[[e.vModelCheckbox,e.unref(B)]]),e.renderSlot(y.$slots,"default",{value:e.unref(n)},()=>[e.createTextVNode(e.toDisplayString(y.label),1)]),e.createVNode(e.unref(Y),{class:"vv-checkbox__hint",params:{value:e.unref(n)}},null,8,["params"])],10,T))}}),U=D,J=["update:modelValue","change"],Q=["textContent"],W={class:"vv-checkbox-group__wrapper"},X={name:"VvCheckboxGroup"};return e.defineComponent({...X,props:U,emits:J,setup(r,{emit:m}){const t=r,f=useSlots(),l=useVModel(t,"modelValue",m),{disabled:d,readonly:o,vertical:b,valid:p,invalid:n}=toRefs(t),c={key:G,modelValue:l,disabled:d,readonly:o,valid:p,invalid:n};useProvideGroupState(c);const{getOptionLabel:a,getOptionValue:V}=useOptions(t),{bemCssClasses:s}=useBemModifiers("vv-checkbox-group",{disabled:d,readonly:o,horizontal:computed(()=>!b.value),valid:p,invalid:n}),u=(i,k)=>({id:`${t.name}_opt${k}`,name:t.name,label:a(i),value:V(i)}),{HintSlot:v}=N(t,f);return(i,k)=>(e.openBlock(),e.createElementBlock("fieldset",{class:e.normalizeClass(e.unref(s))},[i.label?(e.openBlock(),e.createElementBlock("legend",{key:0,textContent:e.toDisplayString(i.label)},null,8,Q)):e.createCommentVNode("",!0),e.createElementVNode("div",W,[i.options.length>0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(i.options,(g,C)=>(e.openBlock(),e.createBlock(z,e.mergeProps({key:C},u(g,C)),null,16))),128)):e.renderSlot(i.$slots,"default",{key:1})]),e.createVNode(e.unref(v),{class:"vv-checkbox-group__hint"})],2))}})});

package/dist/components/VvCheckboxGroup/VvCheckboxGroup.vue.d.ts

@@ -1,6 +1,6 @@
 import type { Option } from '@/types/generic';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    modelValue: (ArrayConstructor | StringConstructor)[];
+    modelValue: (StringConstructor | ArrayConstructor)[];
     label: StringConstructor;
     name: {
         type: StringConstructor;
@@ -26,11 +26,11 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     invalid: BooleanConstructor;
-    invalidLabel: (ArrayConstructor | StringConstructor)[];
+    invalidLabel: (StringConstructor | ArrayConstructor)[];
     valid: BooleanConstructor;
-    validLabel: (ArrayConstructor | StringConstructor)[];
+    validLabel: (StringConstructor | ArrayConstructor)[];
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    modelValue: (ArrayConstructor | StringConstructor)[];
+    modelValue: (StringConstructor | ArrayConstructor)[];
     label: StringConstructor;
     name: {
         type: StringConstructor;
@@ -56,9 +56,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: string;
     };
     invalid: BooleanConstructor;
-    invalidLabel: (ArrayConstructor | StringConstructor)[];
+    invalidLabel: (StringConstructor | ArrayConstructor)[];
     valid: BooleanConstructor;
-    validLabel: (ArrayConstructor | StringConstructor)[];
+    validLabel: (StringConstructor | ArrayConstructor)[];
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
@@ -67,10 +67,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     hintLabel: string;
     invalid: boolean;
     valid: boolean;
+    vertical: boolean;
     options: (string | Option)[];
     labelKey: string | Function;
     valueKey: string | Function;
-    vertical: boolean;
 }>, {
     default: (_: {}) => any;
 }>;

package/dist/components/VvCheckboxGroup/index.d.ts

@@ -1,5 +1,5 @@
 export declare const VvCheckboxGroupProps: {
-    modelValue: (ArrayConstructor | StringConstructor)[];
+    modelValue: (StringConstructor | ArrayConstructor)[];
     label: StringConstructor;
     name: {
         type: StringConstructor;
@@ -25,8 +25,8 @@ export declare const VvCheckboxGroupProps: {
         default: string;
     };
     invalid: BooleanConstructor;
-    invalidLabel: (ArrayConstructor | StringConstructor)[];
+    invalidLabel: (StringConstructor | ArrayConstructor)[];
     valid: BooleanConstructor;
-    validLabel: (ArrayConstructor | StringConstructor)[];
+    validLabel: (StringConstructor | ArrayConstructor)[];
 };
 export declare const VvCheckboxGroupEvents: string[];