vue-amazing-ui/lib/checkbox/Checkbox.vue2.cjs

An Amazing Vue3 UI Components Library, Using TypeScript.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),k=require("../utils/index.cjs"),w=["onClick"],V=["onAnimationend"],N={class:"checkbox-label"},A={key:0,class:"checkbox-label"},S=e.defineComponent({__name:"Checkbox",props:{options:{default:()=>[]},disabled:{type:Boolean,default:!1},vertical:{type:Boolean,default:!1},value:{default:()=>[]},gap:{default:8},indeterminate:{type:Boolean,default:!1},checked:{type:Boolean,default:!1}},emits:["update:value","update:checked","change"],setup(f,{emit:p}){const c=f,s=e.ref(!1),o=e.ref([]),u=e.ref(!1),n=e.ref([]),{colorPalettes:d}=k.useInject("Checkbox"),r=p,m=k.useSlotsExist(["default"]),h=e.computed(()=>c.options.length),b=e.computed(()=>!c.vertical&&Array.isArray(c.gap)?`${c.gap[1]}px ${c.gap[0]}px`:`${c.gap}px`);e.watchEffect(()=>{s.value=c.checked}),e.watchEffect(()=>{o.value=c.value});function i(a){return a===void 0?c.disabled:a}function x(){y(),s.value=!s.value,r("update:checked",s.value),r("change",s.value)}function g(a){if(C(a),o.value.includes(a)){const l=o.value.filter(t=>t!==a);o.value=l,r("update:value",l),r("change",l)}else{const l=[...o.value,a];o.value=l,r("update:value",l),r("change",l)}}function y(){u.value?(u.value=!1,e.nextTick(()=>{u.value=!0})):u.value=!0}function B(){u.value=!1}function C(a){n.value.includes(a)?(n.value=n.value.filter(l=>l!==a),e.nextTick(()=>{n.value.push(a)})):n.value.push(a)}function E(a){n.value=n.value.filter(l=>l!==a)}return(a,l)=>h.value?(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:0,class:["m-checkbox",{"checkbox-vertical":a.vertical}],style:`--checkbox-gap: ${b.value}; --checkbox-primary-color: ${e.unref(d)[5]};`},a.$attrs),[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.options,(t,v)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["checkbox-wrap",{"checkbox-disabled":i(t.disabled)}]),key:v,onClick:$=>i(t.disabled)?()=>!1:g(t.value)},[e.createElementVNode("span",{class:e.normalizeClass(["checkbox-box",{"checkbox-checked":o.value.includes(t.value)}])},[i(t.disabled)?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["checkbox-wave",{"wave-active":n.value.includes(t.value)}]),onAnimationend:$=>E(t.value)},null,42,V))],2),e.createElementVNode("span",N,[e.renderSlot(a.$slots,"default",{option:t,label:t.label,index:v},()=>[e.createTextVNode(e.toDisplayString(t.label),1)],!0)])],10,w))),128))],16)):(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:1,class:["checkbox-wrap",{"checkbox-disabled":a.disabled}],style:`--checkbox-primary-color: ${e.unref(d)[5]};`,onClick:l[0]||(l[0]=t=>a.disabled?()=>!1:x())},a.$attrs),[e.createElementVNode("span",{class:e.normalizeClass(["checkbox-box",{"checkbox-checked":s.value&&!a.indeterminate,"checkbox-indeterminate":a.indeterminate}])},[a.disabled?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["checkbox-wave",{"wave-active":u.value}]),onAnimationend:B},null,34))],2),e.unref(m).default?(e.openBlock(),e.createElementBlock("span",A,[e.renderSlot(a.$slots,"default",{},void 0,!0)])):e.createCommentVNode("",!0)],16))}});exports.default=S;