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"),V=["onClick"],w=["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 n=f,s=e.ref(!1),o=e.ref([]),r=e.ref(!1),c=e.ref([]),{colorPalettes:d}=k.useInject("Checkbox"),u=p,h=k.useSlotsExist(["default"]),m=e.computed(()=>n.options.length),b=e.computed(()=>!n.vertical&&Array.isArray(n.gap)?`${n.gap[1]}px ${n.gap[0]}px`:`${n.gap}px`);e.watchEffect(()=>{s.value=n.checked}),e.watchEffect(()=>{o.value=n.value});function i(a){return a===void 0?n.disabled:a}function x(){y(),s.value=!s.value,u("update:checked",s.value),u("change",s.value)}function g(a){if(C(a),o.value.includes(a)){const l=o.value.filter(t=>t!==a);o.value=l,u("update:value",l),u("change",l)}else{const l=[...o.value,a];o.value=l,u("update:value",l),u("change",l)}}function y(){r.value?(r.value=!1,e.nextTick(()=>{r.value=!0})):r.value=!0}function B(){r.value=!1}function C(a){c.value.includes(a)?(c.value=c.value.filter(l=>l!==a),e.nextTick(()=>{c.value.push(a)})):c.value.push(a)}function E(a){c.value=c.value.filter(l=>l!==a)}return(a,l)=>m.value?(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:0,class:["checkbox-wrap",{"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-container",{"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":c.value.includes(t.value)}]),onAnimationend:$=>E(t.value)},null,42,w))],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,V))),128))],16)):(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:1,class:["checkbox-container",{"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":r.value}]),onAnimationend:B},null,34))],2),e.unref(h).default?(e.openBlock(),e.createElementBlock("span",A,[e.renderSlot(a.$slots,"default",{},void 0,!0)])):e.createCommentVNode("",!0)],16))}});exports.default=S;