@cypress-design/vue-checkbox 0.3.0 → 0.3.2

package/dist/index.umd.js

@@ -1,2 +1,4 @@
-(function(e,l){typeof exports=="object"&&typeof module!="undefined"?module.exports=l(require("vue"),require("@cypress-design/icon-registry")):typeof define=="function"&&define.amd?define(["vue","@cypress-design/icon-registry"],l):(e=typeof globalThis!="undefined"?globalThis:e||self,e.Checkbox=l(e.Vue,e.IconRegistry))})(this,function(e,l){"use strict";function d(o){if(o&&o.__esModule)return o;var n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});return o&&Object.keys(o).forEach(function(t){if(t!=="default"){var r=Object.getOwnPropertyDescriptor(o,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:function(){return o[t]}})}}),n.default=o,Object.freeze(n)}var u=d(l);const m=({body:o,compiledClasses:n,size:t,class:r,interactiveColorsOnGroup:c,...a})=>{Object.keys(a).forEach(s=>{s.toLowerCase().endsWith("color")&&delete a[s]});const i={width:t,height:t,fill:"none",innerHTML:o,...a};return n.length&&(i.class=n.join(" ")),i},b=o=>{const{sizeWithDefault:n,compiledClasses:t}=u.getComponentAttributes({...o,availableSizes:["16"]}),c={16:'<path d="M5 8.5 7.5 11 11 5" stroke="currentColor" class="icon-dark" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>'}[n];if(!c)throw Error(`Icon "checkmark-small" is not available in size ${n}`);return e.h("svg",m({...o,size:n,body:c,compiledClasses:t}))},f={class:"relative flex items-center"},p=["id","name","disabled","checked"];return e.defineComponent({__name:"Checkbox",props:{id:{default:crypto.randomUUID()},checked:{type:Boolean},color:{default:"indigo"},disabled:{type:Boolean},modelValue:{type:Boolean},label:null},emits:["update:modelValue"],setup(o,{emit:n}){const t=o,r=e.ref(t.modelValue||t.checked);function c(){r.value=!r.value,n("update:modelValue",r.value)}const a=e.computed(()=>["block border-1 rounded h-16px w-16px",t.disabled?"border-gray-200 bg-gray-100":r.value?{"border-indigo-500 bg-indigo-400":t.color==="indigo","border-jade-500 bg-jade-400":t.color==="jade","border-red-500 bg-red-400":t.color==="red"}:"border-gray-200 bg-white"]);return(i,s)=>(e.openBlock(),e.createElementBlock("label",f,[e.createElementVNode("input",{id:o.id,class:"absolute inset-0 w-0 h-0 opacity-0",name:o.id,type:"checkbox",onChange:c,disabled:t.disabled,checked:r.value},null,40,p),r.value?(e.openBlock(),e.createBlock(e.unref(b),{key:0,strokeColor:"white",class:"absolute"})):e.createCommentVNode("",!0),e.createElementVNode("span",{class:e.normalizeClass(e.unref(a))},null,2),e.renderSlot(i.$slots,"label",{},()=>[o.label?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(["block ml-2 text-16px leading-normal font-light select-none",o.disabled?"text-gray-500":"text-gray-800"])},e.toDisplayString(o.label),3)):e.createCommentVNode("",!0)])]))}})});
+(function(e,a){typeof exports=="object"&&typeof module<"u"?module.exports=a(require("vue"),require("@cypress-design/icon-registry")):typeof define=="function"&&define.amd?define(["vue","@cypress-design/icon-registry"],a):(e=typeof globalThis<"u"?globalThis:e||self,e.Checkbox=a(e.Vue,e.CyIconRegistry))})(this,function(e,a){"use strict";function f(t){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(l,n,o.get?o:{enumerable:!0,get:()=>t[n]})}}return l.default=t,Object.freeze(l)}const p=f(a),h=({body:t,compiledClasses:l,size:n,class:o,interactiveColorsOnGroup:u,...i})=>{const c=Object.keys(i).reduce((m,s)=>(!a.ICON_COLOR_PROP_NAMES.includes(s)&&s!=="name"&&(m[s]=i[s]),m),{}),b={width:n,height:n,viewBox:`0 0 ${n} ${n}`,fill:"none",innerHTML:t,...c};return l.length&&(b.class=l.join(" ")),b},g=t=>{const{sizeWithDefault:l,compiledClasses:n}=p.getComponentAttributes({...t,availableSizes:["16"]}),o={16:'<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8.5 7.5 11 11 5" class="icon-dark"/>'}[l];if(!o)throw Error(`Icon "checkmark-small" is not available in size ${l}`);return e.h("svg",h({...t,size:l,body:o,compiledClasses:n}))},r={wrapper:"relative flex items-center",hiddenInput:"absolute inset-0 w-0 h-0 opacity-0",labelTag:"flex items-center",visibleCheckbox:"border border-solid rounded h-[16px] w-[16px] flex flex-shrink-0 items-center text-white",trueLabel:"block ml-[8px] text-[16px] leading-[24px] font-light select-none"},d={indigo:"border-indigo-500 bg-indigo-400",jade:"border-jade-500 bg-jade-400",red:"border-red-500 bg-red-400",disabled:"border-gray-200 bg-gray-100",empty:"border-gray-200 bg-white"},k={class:"relative flex items-center"},y=["id","name","disabled","checked"],C=["for"];function x(){return String(Date.now().toString(32)+Math.random().toString(16)).replace(/\./g,"")}return e.defineComponent({__name:"Checkbox",props:{id:{default:()=>x()},name:null,checked:{type:Boolean},color:{default:"indigo"},disabled:{type:Boolean},modelValue:{type:Boolean},label:null},emits:["update:modelValue"],setup(t,{emit:l}){const n=t,o=e.ref(n.modelValue||n.checked);function u(){o.value=!o.value,l("update:modelValue",o.value)}const i=e.computed(()=>n.disabled?d.disabled:o.value?d[n.color]:d.empty);return(c,b)=>(e.openBlock(),e.createElementBlock("span",k,[e.createElementVNode("input",{id:t.id,class:e.normalizeClass(e.unref(r).hiddenInput),name:t.name||t.id,type:"checkbox",onChange:u,disabled:n.disabled,checked:o.value},null,42,y),e.createElementVNode("label",{class:e.normalizeClass(e.unref(r).labelTag),for:t.id},[o.value?(e.openBlock(),e.createBlock(e.unref(g),{key:0,strokeColor:"white",class:"absolute"})):e.createCommentVNode("",!0),e.createElementVNode("span",{class:e.normalizeClass([e.unref(i),e.unref(r).visibleCheckbox])},null,2),e.renderSlot(c.$slots,"label",{},()=>[t.label?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass([e.unref(r).trueLabel,t.disabled?"text-gray-500":"text-gray-800 dark:text-gray-200"])},e.toDisplayString(t.label),3)):e.createCommentVNode("",!0)])],10,C)]))}})});
 //# sourceMappingURL=index.umd.js.map
+
+/* <wind-keep class="relative flex items-center absolute text-gray-500 text-gray-800 dark:text-gray-200 icon-dark-white inset-0 w-0 h-0 opacity-0 border border-solid rounded h-[16px] w-[16px] flex-shrink-0 text-white block ml-[8px] text-[16px] leading-[24px] font-light select-none border-indigo-500 bg-indigo-400 border-jade-500 bg-jade-400 border-red-500 bg-red-400 border-gray-200 bg-gray-100 bg-white"> */