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