UNPKG

@volverjs/ui-vue

Version:

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

2 lines (1 loc) 8.69 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self).VvCheckbox=t(e.vue)}(this,function(e){"use strict";var t=(e=>(e.local="local",e.session="session",e))(t||{}),a=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(a||{}),l=(e=>(e.before="before",e.after="after",e))(l||{}),i=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(i||{}),n=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(n||{});const o=Symbol.for("volver"),r=Symbol.for("checkGroup"),u={valid:{type:Boolean,default:!1},validLabel:{type:[String,Array],default:void 0}},d={invalid:{type:Boolean,default:!1},invalidLabel:{type:[String,Array],default:void 0}},s={loading:{type:Boolean,default:!1},loadingLabel:{type:String,default:"Loading..."}},v={disabled:{type:Boolean,default:!1}},c={label:{type:[String,Number],default:void 0}},f={readonly:{type:Boolean,default:!1}},p={modifiers:{type:[String,Array],default:void 0}},b={hintLabel:{type:String,default:""}};l.before;const h={tabindex:{type:[String,Number],default:0}},m={id:[String,Number]};a.bottom;const y={...{...m,name:{type:String,required:!0}},...h,...u,...d,...b,...v,...f,...p,...c,...s,value:{type:[String,Number,Boolean],default:void 0},modelValue:{type:[Object,Number,Boolean,String],default:void 0}};i.button,n.button,t.local;const g={...y,...p,indeterminate:Boolean,uncheckedValue:[String,Number,Boolean],switch:Boolean};function S(t,a){const{group:l,isInGroup:i,getGroupOrLocalRef:n}=function(t){const a=e.inject(t,void 0),l=e.computed(()=>void 0!==a);return{group:a,isInGroup:l,getGroupOrLocalRef:function(t,l,i){const n=a?.[t];if(n)return e.computed({get:()=>n.value,set(e){n.value=e}});const o=e.toRef(l,t);return e.computed({get:()=>o.value,set(e){i&&i(`update:${t}`,e)}})}}}(r),{id:o,switch:u,indeterminate:d}=e.toRefs(t),s=n("modelValue",t,a),v=n("valid",t),c=n("invalid",t),f=e.computed(()=>Boolean(t.readonly||l?.readonly.value)),p=e.computed(()=>Boolean(t.disabled||l?.disabled.value));return{id:o,propsSwitch:u,indeterminate:d,group:l,isInGroup:i,modelValue:s,valid:v,invalid:c,readonly:f,disabled:p}}function L(e,t,a){return k(e,t)}function k(e,t){if(e===t)return!0;if(e&&t&&"object"==typeof e&&"object"==typeof t){const a=Array.isArray(e),l=Array.isArray(t);let i,n,o;if(a&&l){if(n=e.length,n!==t.length)return!1;for(i=n;0!==i--;)if(!k(e[i],t[i]))return!1;return!0}if(a!==l)return!1;const r=e instanceof Date,u=t instanceof Date;if(r!==u)return!1;if(r&&u)return e.getTime()===t.getTime();const d=e instanceof RegExp,s=t instanceof RegExp;if(d!==s)return!1;if(d&&s)return e.toString()===t.toString();const v=Object.keys(e);if(n=v.length,n!==Object.keys(t).length)return!1;for(i=n;0!==i--;)if(!Object.prototype.hasOwnProperty.call(t,v[i]))return!1;for(i=n;0!==i--;)if(o=v[i],!k(e[o],t[o]))return!1;return!0}return Number.isNaN(e)&&Number.isNaN(t)}function O(e){return Array.isArray(e)?e.filter(e=>"string"==typeof e).join(" "):e}function V(t,a,l){const i=e.inject(o,void 0),n=e.computed(()=>{if(i&&i.defaults.value?.[t])return i.defaults.value[t]});return e.computed(()=>{if(void 0===n.value)return l;const e=n.value,t=a,i=l;return Object.keys(t).reduce((a,l)=>{const n=i[l];if(a[l]=n,l in e){if(Array.isArray(t[l])){const i=t[l];if(i.length){i[0]===n&&(a[l]=e[l])}}if("function"==typeof t[l]){(0,t[l])()===n&&(a[l]=e[l])}if("object"==typeof t[l]){let i=t[l].default;"function"==typeof i&&(i=i()),"object"==typeof i?JSON.stringify(i)===JSON.stringify(n)&&(a[l]=e[l]):i===n&&(a[l]=e[l])}}return a},{})})}const x=["for"],A=["id","name","disabled","value","tabindex","aria-invalid","aria-describedby","aria-errormessage"];return e.defineComponent({name:"VvCheckbox",props:g,emits:["click","update:modelValue","change","blur"],setup(t,{emit:a}){const l=t,i=a,n=e.useSlots(),o=V("VvCheckbox",g,l),{id:r,disabled:u,readonly:d,valid:s,invalid:v,propsSwitch:c,modelValue:f,indeterminate:p,isInGroup:b}=S(l,i),h=function(t){return e.computed(()=>String(t?.value||e.useId()))}(r),m=e.computed(()=>`${h.value}-hint`),y=e.computed(()=>B.value?-1:l.tabindex),k=e.ref(),$=e.computed(()=>void 0!==l.uncheckedValue&&!b.value),B=e.computed(()=>u.value||d.value),N=e.computed(()=>!0===v.value||!0!==s.value&&void 0),w=e.computed(()=>$.value?f.value===l.value:Array.isArray(f.value)?function(e,t){if(null!=e&&t&&t.length)for(const a of t)if(L(e,a))return!0;return!1}(l.value,f.value):L(l.value,f.value)),j=e.computed(()=>!!p.value||!(w.value||!$.value||l.uncheckedValue===f.value)),R=e.computed(()=>{if(!$.value)return!["string","number","boolean"].includes(typeof l.value)||l.value}),C=e.computed({get:()=>w.value,set(e){if($.value)f.value=e?l.value:l.uncheckedValue;else if(Array.isArray(f.value)||b.value){const t=f.value??[],a=new Set(Array.isArray(t)?t:[t]);e?a.add(l.value):a.delete(l.value),f.value=[...a]}else f.value=e?l.value:void 0;i("change",e)}}),{modifiers:I}=e.toRefs(l),P=function(t,a,l){return e.computed(()=>{const i={[t]:!0},n="string"==typeof a?.value?a.value.split(" "):a?.value;return n&&Array.isArray(n)&&n.forEach(e=>{e&&(i[`${t}--${e}`]=!0)}),l&&Object.keys(l.value).forEach(a=>{i[`${t}--${a}`]=e.unref(l.value[a])}),i})}("vv-checkbox",I,e.computed(()=>({switch:c.value,valid:s.value,invalid:v.value,disabled:u.value,readonly:d.value,indeterminate:p.value})));e.watchEffect(()=>{$.value&&Array.isArray(f.value)&&console.warn("[VvCheckbox] The model value is an array but the component is in binary mode.")}),e.watch(()=>j.value,e=>{k.value.indeterminate=!!e}),e.onMounted(()=>{j.value&&(k.value.indeterminate=!0)});const{HintSlot:E,hasHintLabelOrSlot:G,hasInvalidLabelOrSlot:H,hintSlotScope:T}=function(t,a){const l=e.computed(()=>e.isRef(t)?t.value:t),i=e.computed(()=>O(l.value.invalidLabel)),n=e.computed(()=>O(l.value.validLabel)),o=e.computed(()=>l.value.loadingLabel),r=e.computed(()=>l.value.hintLabel),u=e.computed(()=>Boolean(l.value.loading&&(a.loading||o.value))),d=e.computed(()=>!u.value&&Boolean(l.value.invalid&&(a.invalid||i.value))),s=e.computed(()=>!u.value&&!d.value&&Boolean(l.value.valid&&(a.valid||n.value))),v=e.computed(()=>!u.value&&!d.value&&!s.value&&Boolean(a.hint||r.value)),c=e.computed(()=>d.value||s.value||u.value||v.value),f=e.computed(()=>({modelValue:l.value.modelValue,valid:l.value.valid,invalid:l.value.invalid,loading:l.value.loading})),p=e.defineComponent({name:"HintSlot",props:{tag:{type:String,default:"small"}},setup:()=>({isVisible:c,invalidLabel:i,validLabel:n,loadingLabel:o,hintLabel:r,hasInvalidLabelOrSlot:d,hasValidLabelOrSlot:s,hasLoadingLabelOrSlot:u,hasHintLabelOrSlot:v}),render(){if(this.isVisible){let t;return this.hasInvalidLabelOrSlot&&(t="alert"),this.hasValidLabelOrSlot&&(t="status"),this.hasLoadingLabelOrSlot?e.h(this.tag,{role:t},this.$slots.loading?.()??this.loadingLabel):this.hasInvalidLabelOrSlot?e.h(this.tag,{role:t},this.$slots.invalid?.()??this.$slots.invalid??this.invalidLabel):this.hasValidLabelOrSlot?e.h(this.tag,{role:t},this.$slots.valid?.()??this.validLabel):e.h(this.tag,{role:t},this.$slots.hint?.()??this.$slots.hint??this.hintLabel)}return null}});return{hasInvalidLabelOrSlot:d,hasHintLabelOrSlot:v,hasValidLabelOrSlot:s,hasLoadingLabelOrSlot:u,hintSlotScope:f,HintSlot:p}}(o,n);return(t,a)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(e.unref(P)),for:e.unref(h)},[e.withDirectives(e.createElementVNode("input",{id:e.unref(h),ref_key:"input",ref:k,"onUpdate:modelValue":a[0]||(a[0]=t=>e.isRef(C)?C.value=t:null),type:"checkbox",class:"vv-checkbox__input",name:t.name,disabled:e.unref(B),value:e.unref(R),tabindex:e.unref(y),"aria-invalid":e.unref(N),"aria-describedby":e.unref(G)?e.unref(m):void 0,"aria-errormessage":e.unref(H)?e.unref(m):void 0},null,8,A),[[e.vModelCheckbox,e.unref(C)]]),e.renderSlot(t.$slots,"default",{value:e.unref(f)},()=>[e.createTextVNode(e.toDisplayString(t.label),1)]),e.createVNode(e.unref(E),{id:e.unref(m),class:"vv-checkbox__hint"},e.createSlots({_:2},[t.$slots.hint?{name:"hint",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"hint",e.normalizeProps(e.guardReactiveProps(e.unref(T))))]),key:"0"}:void 0,t.$slots.loading?{name:"loading",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"loading",e.normalizeProps(e.guardReactiveProps(e.unref(T))))]),key:"1"}:void 0,t.$slots.valid?{name:"valid",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"valid",e.normalizeProps(e.guardReactiveProps(e.unref(T))))]),key:"2"}:void 0,t.$slots.invalid?{name:"invalid",fn:e.withCtx(()=>[e.renderSlot(t.$slots,"invalid",e.normalizeProps(e.guardReactiveProps(e.unref(T))))]),key:"3"}:void 0]),1032,["id"])],10,x))}})});