npm - @gospore/checkbox - Versions diffs - 1.0.52 → 1.0.54 - Mend

@gospore/checkbox 1.0.52 → 1.0.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/README.md CHANGED Viewed

@@ -52,7 +52,7 @@ const topics = ref(["design"]);
 ## Props
 | Prop       | Type               | Default | Description                                                                                                                                               |
-| ---------- | ------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| --- | --- | --- | --- |
 | `checked`  | `Boolean \| Array` | `false` | Controlled state. Pass a boolean for single checkboxes or an array for checkbox groups (the component will push/pop `value`). Supports `v-model:checked`. |
 | `value`    | `String \| Object` | `""`    | The value inserted or removed from the bound array when used in group mode. Ignored for boolean usage.                                                    |
 | `label`    | `String`           | `""`    | Fallback label text when no default slot is provided.                                                                                                     |

package/dist/checkbox.cjs.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),f=require("@fortawesome/vue-fontawesome"),b=require("@fortawesome/free-solid-svg-icons"),h=require("lodash/without.js"),p=(c,u)=>{const l=c.__vccOpts||c;for(const[s,n]of u)l[s]=n;return l},m=["title"],y={class:"checkbox-input-container"},x=["value","disabled"],g={key:0,class:"checkbox-label"},C={key:1,class:"checkbox-label"},S=Object.assign({name:"Checkbox",inheritAttrs:!1},{__name:"Checkbox",props:{checked:{type:[Boolean,Array],default:!1},value:{type:[String,Object],default:""},label:{type:String,default:""},disabled:{type:Boolean,default:!1}},emits:["update:checked"],setup(c,{emit:u}){const l=c,s=u,n=e.useAttrs(),d=e.useSlots(),r=e.ref(!1),t=e.ref(l.checked),v=e.computed(()=>typeof t.value=="boolean"?t.value:t.value.includes(l.value)),k=e.computed(()=>{let a=Object.assign({},n,{onKeyup(o){s("keyup",o),o.key==="Enter"&&(s("click"),typeof t.value=="boolean"?t.value=!t.value:t.value.includes(l.value)?t.value=h(t.value,l.value):t.value.push(l.value))}});return delete a.class,a});return e.watch(()=>l.checked,a=>{t.value=a}),e.watch(()=>t.value,()=>{t.value!=l.checked&&s("update:checked",t.value)}),(a,o)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["checkbox",{"checkbox-disabled":c.disabled},e.unref(n).class]),title:e.unref(n).title},[e.createElementVNode("div",y,[e.createElementVNode("span",{class:e.normalizeClass(["checkbox-input",{"checkbox-checked":v.value,"checkbox-focused":r.value}])},[e.createVNode(e.unref(f.FontAwesomeIcon),{class:"checkbox-input-icon",icon:e.unref(b.faCheck),"aria-hidden":"true"},null,8,["icon"]),e.withDirectives(e.createElementVNode("input",e.mergeProps(k.value,{"onUpdate:modelValue":o[0]||(o[0]=i=>t.value=i),type:"checkbox",value:c.value,disabled:c.disabled,onFocus:o[1]||(o[1]=i=>r.value=!0),onFocusout:o[2]||(o[2]=i=>r.value=!1)}),null,16,x),[[e.vModelCheckbox,t.value]])],2)]),e.unref(d).default?(e.openBlock(),e.createElementBlock("div",g,[e.renderSlot(a.$slots,"default",{},void 0,!0)])):(e.openBlock(),e.createElementBlock("span",C,e.toDisplayString(c.label),1))],10,m))}}),B=p(S,[["__scopeId","data-v-779b3234"]]);exports.Checkbox=B;
-//# sourceMappingURL=checkbox.cjs.js.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`vue`),l=require(`@fortawesome/vue-fontawesome`),u=require(`@fortawesome/free-solid-svg-icons`),d=require(`lodash/without.js`);d=s(d);var f=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},p=[`title`],m={class:`checkbox-input-container`},h=[`value`,`disabled`],g={key:0,class:`checkbox-label`},_={key:1,class:`checkbox-label`},v=f(Object.assign({name:`Checkbox`,inheritAttrs:!1},{__name:`Checkbox`,props:{checked:{type:[Boolean,Array],default:!1},value:{type:[String,Object],default:``},label:{type:String,default:``},disabled:{type:Boolean,default:!1}},emits:[`update:checked`],setup(e,{emit:t}){let n=e,r=t,i=(0,c.useAttrs)(),a=(0,c.useSlots)(),o=(0,c.ref)(!1),s=(0,c.ref)(n.checked),f=(0,c.computed)(()=>typeof s.value==`boolean`?s.value:s.value.includes(n.value)),v=(0,c.computed)(()=>{let e=Object.assign({},i,{onKeyup(e){r(`keyup`,e),e.key===`Enter`&&(r(`click`),typeof s.value==`boolean`?s.value=!s.value:s.value.includes(n.value)?s.value=(0,d.default)(s.value,n.value):s.value.push(n.value))}});return delete e.class,e});return(0,c.watch)(()=>n.checked,e=>{s.value=e}),(0,c.watch)(()=>s.value,()=>{s.value!=n.checked&&r(`update:checked`,s.value)}),(t,n)=>((0,c.openBlock)(),(0,c.createElementBlock)(`label`,{class:(0,c.normalizeClass)([`checkbox`,{"checkbox-disabled":e.disabled},(0,c.unref)(i).class]),title:(0,c.unref)(i).title},[(0,c.createElementVNode)(`div`,m,[(0,c.createElementVNode)(`span`,{class:(0,c.normalizeClass)([`checkbox-input`,{"checkbox-checked":f.value,"checkbox-focused":o.value}])},[(0,c.createVNode)((0,c.unref)(l.FontAwesomeIcon),{class:`checkbox-input-icon`,icon:(0,c.unref)(u.faCheck),"aria-hidden":`true`},null,8,[`icon`]),(0,c.withDirectives)((0,c.createElementVNode)(`input`,(0,c.mergeProps)(v.value,{"onUpdate:modelValue":n[0]||=e=>s.value=e,type:`checkbox`,value:e.value,disabled:e.disabled,onFocus:n[1]||=e=>o.value=!0,onFocusout:n[2]||=e=>o.value=!1}),null,16,h),[[c.vModelCheckbox,s.value]])],2)]),(0,c.unref)(a).default?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,g,[(0,c.renderSlot)(t.$slots,`default`,{},void 0,!0)])):((0,c.openBlock)(),(0,c.createElementBlock)(`span`,_,(0,c.toDisplayString)(e.label),1))],10,p))}}),[[`__scopeId`,`data-v-779b3234`]]);exports.Checkbox=v;
+//# sourceMappingURL=checkbox.cjs.js.map

package/dist/checkbox.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.cjs.js","sources":["../src/Checkbox.vue"],"sourcesContent":["<template>\n <label\n :class=\"[\n 'checkbox',\n { 'checkbox-disabled': disabled },\n defaultAttrs.class,\n ]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n {\n 'checkbox-checked': isChecked,\n 'checkbox-focused': focused,\n },\n ]\"\n >\n <font-awesome-icon\n class=\"checkbox-input-icon\"\n :icon=\"faCheck\"\n aria-hidden=\"true\"\n />\n <input\n v-bind=\"attrs\"\n v-model=\"internalChecked\"\n type=\"checkbox\"\n :value=\"value\"\n :disabled=\"disabled\"\n @focus=\"focused = true\"\n @focusout=\"focused = false\"\n />\n </span>\n </div>\n <div v-if=\"slots.default\" class=\"checkbox-label\">\n <slot />\n </div>\n <span v-else class=\"checkbox-label\">{{ label }}</span>\n </label>\n</template>\n\n<script setup>\nimport { useAttrs, useSlots, ref, computed, watch } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\n\ndefineOptions({\n name: \"Checkbox\",\n inheritAttrs: false,\n});\nconst props = defineProps({\n checked: {\n type: [Boolean, Array],\n default: false,\n },\n value: {\n type: [String, Object],\n default: \"\",\n },\n label: {\n type: String,\n default: \"\",\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n});\nconst emit = defineEmits([\"update:checked\"]);\nconst defaultAttrs = useAttrs();\nconst slots = useSlots();\nconst focused = ref(false);\nconst internalChecked = ref(props.checked);\n\nconst isChecked = computed(() => {\n if (typeof internalChecked.value === \"boolean\") {\n return internalChecked.value;\n } else {\n return internalChecked.value.includes(props.value);\n }\n});\nconst attrs = computed(() => {\n let attrs = Object.assign({}, defaultAttrs, {\n // Pressing the enter key gets handled like a click.\n onKeyup(event) {\n // Don't add the keyup and click events to defineEmits, otherwise it won't work.\n // eslint-disable-next-line vue/require-explicit-emits\n emit(\"keyup\", event);\n if (event.key === \"Enter\") {\n // eslint-disable-next-line vue/require-explicit-emits\n emit(\"click\");\n if (typeof internalChecked.value == \"boolean\") {\n internalChecked.value = !internalChecked.value;\n } else {\n if (internalChecked.value.includes(props.value)) {\n internalChecked.value = without(\n internalChecked.value,\n props.value,\n );\n } else {\n internalChecked.value.push(props.value);\n }\n }\n }\n },\n });\n // Only assign events to the input element, classes are assigned to the outer label.\n delete attrs.class;\n return attrs;\n});\n\nwatch(\n () => props.checked,\n (checked) => {\n internalChecked.value = checked;\n },\n);\nwatch(\n () => internalChecked.value,\n () => {\n // Only emit the update:checked event if the mutation came from within the checkbox component.\n if (internalChecked.value != props.checked) {\n emit(\"update:checked\", internalChecked.value);\n }\n },\n);\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style lang=\"less\" scoped>\n.checkbox {\n position: relative;\n display: flex;\n padding: var(--checkbox-padding);\n\n .checkbox-input-container {\n padding: 5px;\n }\n .checkbox-input {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--checkbox-height);\n width: var(--checkbox-width);\n box-sizing: border-box;\n border-radius: var(--checkbox-border-radius);\n border: var(--checkbox-border-width) solid;\n background-color: var(--checkbox-background-default-default-light);\n color: var(--checkbox-color-default-default-light);\n border-color: var(--checkbox-border-color-default-default-light);\n transition: var(--checkbox-transition);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-hover-light);\n color: var(--checkbox-color-default-hover-light);\n border-color: var(--checkbox-border-color-default-hover-light);\n }\n &:active .checkbox-input {\n background-color: var(--checkbox-background-default-active-light);\n color: var(--checkbox-color-default-active-light);\n border-color: var(--checkbox-border-color-default-active-light);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-default-light);\n color: var(--checkbox-color-checked-default-light);\n border-color: var(--checkbox-border-color-checked-default-light);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-hover-light);\n color: var(--checkbox-color-checked-hover-light);\n border-color: var(--checkbox-border-color-checked-hover-light);\n }\n &:active .checkbox-checked {\n background-color: var(--checkbox-background-checked-active-light);\n color: var(--checkbox-color-checked-active-light);\n border-color: var(--checkbox-border-color-checked-active-light);\n }\n}\n.checkbox-disabled {\n color: var(--checkbox-color-checked-disabled-light);\n cursor: not-allowed;\n\n .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-light);\n color: var(--checkbox-color-default-disabled-light);\n border-color: var(--checkbox-border-color-default-disabled-light);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-light);\n color: var(--checkbox-color-default-disabled-light);\n border-color: var(--checkbox-border-color-default-disabled-light);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-light);\n color: var(--checkbox-color-checked-disabled-light);\n border-color: var(--checkbox-border-color-checked-disabled-light);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-light);\n color: var(--checkbox-color-checked-disabled-light);\n border-color: var(--checkbox-border-color-checked-disabled-light);\n }\n}\n.checkbox-input-icon {\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n padding: 1px;\n}\n.checkbox-label {\n padding: var(--checkbox-label-padding);\n line-height: var(--checkbox-line-height);\n}\ninput {\n margin: 0;\n opacity: 0;\n position: absolute;\n pointer-events: none;\n}\n[data-whatinput=\"keyboard\"] .checkbox-focused {\n border-color: var(--checkbox-focus-outline-color-light) !important;\n}\n\n[dark-mode=\"true\"] {\n .checkbox {\n .checkbox-input {\n background-color: var(--checkbox-background-default-default-dark);\n color: var(--checkbox-color-default-default-dark);\n border-color: var(--checkbox-border-color-default-default-dark);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-hover-dark);\n color: var(--checkbox-color-default-hover-dark);\n border-color: var(--checkbox-border-color-default-hover-dark);\n }\n &:active .checkbox-input {\n background-color: var(--checkbox-background-default-active-dark);\n color: var(--checkbox-color-default-active-dark);\n border-color: var(--checkbox-border-color-default-active-dark);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-default-dark);\n color: var(--checkbox-color-checked-default-dark);\n border-color: var(--checkbox-border-color-checked-default-dark);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-hover-dark);\n color: var(--checkbox-color-checked-hover-dark);\n border-color: var(--checkbox-border-color-checked-hover-dark);\n }\n &:active .checkbox-checked {\n background-color: var(--checkbox-background-checked-active-dark);\n color: var(--checkbox-color-checked-active-dark);\n border-color: var(--checkbox-border-color-checked-active-dark);\n }\n }\n .checkbox-disabled {\n color: var(--checkbox-color-checked-disabled-dark);\n\n .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-dark);\n color: var(--checkbox-color-default-disabled-dark);\n border-color: var(--checkbox-border-color-default-disabled-dark);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-dark);\n color: var(--checkbox-color-default-disabled-dark);\n border-color: var(--checkbox-border-color-default-disabled-dark);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-dark);\n color: var(--checkbox-color-checked-disabled-dark);\n border-color: var(--checkbox-border-color-checked-disabled-dark);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-dark);\n color: var(--checkbox-color-checked-disabled-dark);\n border-color: var(--checkbox-border-color-checked-disabled-dark);\n }\n }\n\n [data-whatinput=\"keyboard\"] .checkbox-focused {\n border-color: var(--checkbox-focus-outline-color-dark) !important;\n }\n}\n</style>\n"],"names":["props","__props","emit","__emit","defaultAttrs","useAttrs","slots","useSlots","focused","ref","internalChecked","isChecked","computed","attrs","event","without","watch","checked","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_hoisted_2","_createVNode","FontAwesomeIcon","faCheck","_mergeProps","$event","_openBlock","_hoisted_4","_renderSlot","_ctx","_hoisted_5","_toDisplayString"],"mappings":"0rBAoDA,MAAMA,EAAQC,EAkBRC,EAAOC,EACPC,EAAeC,EAAAA,SAAQ,EACvBC,EAAQC,EAAAA,SAAQ,EAChBC,EAAUC,EAAAA,IAAI,EAAK,EACnBC,EAAkBD,EAAAA,IAAIT,EAAM,OAAO,EAEnCW,EAAYC,EAAAA,SAAS,IACnB,OAAOF,EAAgB,OAAU,UAC1BA,EAAgB,MAEhBA,EAAgB,MAAM,SAASV,EAAM,KAAK,CAExD,EACKa,EAAQD,EAAAA,SAAS,IAAM,CACzB,IAAIC,EAAQ,OAAO,OAAO,CAAA,EAAIT,EAAc,CAExC,QAAQU,EAAO,CAGXZ,EAAK,QAASY,CAAK,EACfA,EAAM,MAAQ,UAEdZ,EAAK,OAAO,EACR,OAAOQ,EAAgB,OAAS,UAChCA,EAAgB,MAAQ,CAACA,EAAgB,MAErCA,EAAgB,MAAM,SAASV,EAAM,KAAK,EAC1CU,EAAgB,MAAQK,EACpBL,EAAgB,MAChBV,EAAM,KAClC,EAEwBU,EAAgB,MAAM,KAAKV,EAAM,KAAK,EAItD,CACR,CAAK,EAED,cAAOa,EAAM,MACNA,CACX,CAAC,EAEDG,OAAAA,EAAAA,MACI,IAAMhB,EAAM,QACXiB,GAAY,CACTP,EAAgB,MAAQO,CAC5B,CACJ,EACAD,EAAAA,MACI,IAAMN,EAAgB,MACtB,IAAM,CAEEA,EAAgB,OAASV,EAAM,SAC/BE,EAAK,iBAAkBQ,EAAgB,KAAK,CAEpD,CACJ,wBA9HIQ,EAAAA,mBAsCQ,QAAA,CArCH,MAAKC,EAAAA,eAAA,iCAA+DlB,EAAA,QAAQ,EAAgBmB,EAAAA,MAAAhB,CAAA,EAAa,QAKzG,MAAOgB,EAAAA,MAAAhB,CAAA,EAAa,QAErBiB,EAAAA,mBAyBM,MAzBNC,EAyBM,CAxBFD,EAAAA,mBAuBO,OAAA,CAtBF,MAAKF,EAAAA,eAAA,sCAA4GR,EAAA,yBAAuDH,EAAA,WAQzKe,cAIEH,EAAAA,MAAAI,EAAAA,eAAA,EAAA,CAHE,MAAM,sBACL,KAAMJ,EAAAA,MAAAK,SAAA,EACP,cAAY,0CAEhBJ,EAAAA,mBAQE,QARFK,EAAAA,WAQEb,EAAA,MAPe,sCACJH,EAAe,MAAAiB,GACxB,KAAK,WACJ,MAAO1B,EAAA,MACP,SAAUA,EAAA,SACV,uBAAOO,EAAA,MAAO,IACd,0BAAUA,EAAA,MAAO,oCALTE,EAAA,KAAe,UASzBU,EAAAA,MAAAd,CAAA,EAAM,SAAjBsB,EAAAA,YAAAV,EAAAA,mBAEM,MAFNW,EAEM,CADFC,EAAAA,WAAQC,EAAA,OAAA,UAAA,CAAA,EAAA,OAAA,EAAA,oBAEZb,EAAAA,mBAAsD,OAAtDc,EAAsDC,EAAAA,gBAAfhC,EAAA,KAAK,EAAA,CAAA"}
1	+ {"version":3,"file":"checkbox.cjs.js","names":[],"sources":["../src/Checkbox.vue"],"sourcesContent":["<template>\n <label\n :class=\"[\n 'checkbox',\n { 'checkbox-disabled': disabled },\n defaultAttrs.class,\n ]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n {\n 'checkbox-checked': isChecked,\n 'checkbox-focused': focused,\n },\n ]\"\n >\n <font-awesome-icon\n class=\"checkbox-input-icon\"\n :icon=\"faCheck\"\n aria-hidden=\"true\"\n />\n <input\n v-bind=\"attrs\"\n v-model=\"internalChecked\"\n type=\"checkbox\"\n :value=\"value\"\n :disabled=\"disabled\"\n @focus=\"focused = true\"\n @focusout=\"focused = false\"\n />\n </span>\n </div>\n <div v-if=\"slots.default\" class=\"checkbox-label\">\n <slot />\n </div>\n <span v-else class=\"checkbox-label\">{{ label }}</span>\n </label>\n</template>\n\n<script setup>\nimport { useAttrs, useSlots, ref, computed, watch } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\n\ndefineOptions({\n name: \"Checkbox\",\n inheritAttrs: false,\n});\nconst props = defineProps({\n checked: {\n type: [Boolean, Array],\n default: false,\n },\n value: {\n type: [String, Object],\n default: \"\",\n },\n label: {\n type: String,\n default: \"\",\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n});\nconst emit = defineEmits([\"update:checked\"]);\nconst defaultAttrs = useAttrs();\nconst slots = useSlots();\nconst focused = ref(false);\nconst internalChecked = ref(props.checked);\n\nconst isChecked = computed(() => {\n if (typeof internalChecked.value === \"boolean\") {\n return internalChecked.value;\n } else {\n return internalChecked.value.includes(props.value);\n }\n});\nconst attrs = computed(() => {\n let attrs = Object.assign({}, defaultAttrs, {\n // Pressing the enter key gets handled like a click.\n onKeyup(event) {\n // Don't add the keyup and click events to defineEmits, otherwise it won't work.\n // eslint-disable-next-line vue/require-explicit-emits\n emit(\"keyup\", event);\n if (event.key === \"Enter\") {\n // eslint-disable-next-line vue/require-explicit-emits\n emit(\"click\");\n if (typeof internalChecked.value == \"boolean\") {\n internalChecked.value = !internalChecked.value;\n } else {\n if (internalChecked.value.includes(props.value)) {\n internalChecked.value = without(\n internalChecked.value,\n props.value,\n );\n } else {\n internalChecked.value.push(props.value);\n }\n }\n }\n },\n });\n // Only assign events to the input element, classes are assigned to the outer label.\n delete attrs.class;\n return attrs;\n});\n\nwatch(\n () => props.checked,\n (checked) => {\n internalChecked.value = checked;\n },\n);\nwatch(\n () => internalChecked.value,\n () => {\n // Only emit the update:checked event if the mutation came from within the checkbox component.\n if (internalChecked.value != props.checked) {\n emit(\"update:checked\", internalChecked.value);\n }\n },\n);\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style lang=\"less\" scoped>\n.checkbox {\n position: relative;\n display: flex;\n padding: var(--checkbox-padding);\n\n .checkbox-input-container {\n padding: 5px;\n }\n .checkbox-input {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--checkbox-height);\n width: var(--checkbox-width);\n box-sizing: border-box;\n border-radius: var(--checkbox-border-radius);\n border: var(--checkbox-border-width) solid;\n background-color: var(--checkbox-background-default-default-light);\n color: var(--checkbox-color-default-default-light);\n border-color: var(--checkbox-border-color-default-default-light);\n transition: var(--checkbox-transition);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-hover-light);\n color: var(--checkbox-color-default-hover-light);\n border-color: var(--checkbox-border-color-default-hover-light);\n }\n &:active .checkbox-input {\n background-color: var(--checkbox-background-default-active-light);\n color: var(--checkbox-color-default-active-light);\n border-color: var(--checkbox-border-color-default-active-light);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-default-light);\n color: var(--checkbox-color-checked-default-light);\n border-color: var(--checkbox-border-color-checked-default-light);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-hover-light);\n color: var(--checkbox-color-checked-hover-light);\n border-color: var(--checkbox-border-color-checked-hover-light);\n }\n &:active .checkbox-checked {\n background-color: var(--checkbox-background-checked-active-light);\n color: var(--checkbox-color-checked-active-light);\n border-color: var(--checkbox-border-color-checked-active-light);\n }\n}\n.checkbox-disabled {\n color: var(--checkbox-color-checked-disabled-light);\n cursor: not-allowed;\n\n .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-light);\n color: var(--checkbox-color-default-disabled-light);\n border-color: var(--checkbox-border-color-default-disabled-light);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-light);\n color: var(--checkbox-color-default-disabled-light);\n border-color: var(--checkbox-border-color-default-disabled-light);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-light);\n color: var(--checkbox-color-checked-disabled-light);\n border-color: var(--checkbox-border-color-checked-disabled-light);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-light);\n color: var(--checkbox-color-checked-disabled-light);\n border-color: var(--checkbox-border-color-checked-disabled-light);\n }\n}\n.checkbox-input-icon {\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n padding: 1px;\n}\n.checkbox-label {\n padding: var(--checkbox-label-padding);\n line-height: var(--checkbox-line-height);\n}\ninput {\n margin: 0;\n opacity: 0;\n position: absolute;\n pointer-events: none;\n}\n[data-whatinput=\"keyboard\"] .checkbox-focused {\n border-color: var(--checkbox-focus-outline-color-light) !important;\n}\n\n[dark-mode=\"true\"] {\n .checkbox {\n .checkbox-input {\n background-color: var(--checkbox-background-default-default-dark);\n color: var(--checkbox-color-default-default-dark);\n border-color: var(--checkbox-border-color-default-default-dark);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-hover-dark);\n color: var(--checkbox-color-default-hover-dark);\n border-color: var(--checkbox-border-color-default-hover-dark);\n }\n &:active .checkbox-input {\n background-color: var(--checkbox-background-default-active-dark);\n color: var(--checkbox-color-default-active-dark);\n border-color: var(--checkbox-border-color-default-active-dark);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-default-dark);\n color: var(--checkbox-color-checked-default-dark);\n border-color: var(--checkbox-border-color-checked-default-dark);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-hover-dark);\n color: var(--checkbox-color-checked-hover-dark);\n border-color: var(--checkbox-border-color-checked-hover-dark);\n }\n &:active .checkbox-checked {\n background-color: var(--checkbox-background-checked-active-dark);\n color: var(--checkbox-color-checked-active-dark);\n border-color: var(--checkbox-border-color-checked-active-dark);\n }\n }\n .checkbox-disabled {\n color: var(--checkbox-color-checked-disabled-dark);\n\n .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-dark);\n color: var(--checkbox-color-default-disabled-dark);\n border-color: var(--checkbox-border-color-default-disabled-dark);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-dark);\n color: var(--checkbox-color-default-disabled-dark);\n border-color: var(--checkbox-border-color-default-disabled-dark);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-dark);\n color: var(--checkbox-color-checked-disabled-dark);\n border-color: var(--checkbox-border-color-checked-disabled-dark);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-dark);\n color: var(--checkbox-color-checked-disabled-dark);\n border-color: var(--checkbox-border-color-checked-disabled-dark);\n }\n }\n\n [data-whatinput=\"keyboard\"] .checkbox-focused {\n border-color: var(--checkbox-focus-outline-color-dark) !important;\n }\n}\n</style>\n"],"mappings":"kpCAoDA,IAAM,EAAQ,EAkBR,EAAO,EACP,GAAA,EAAA,EAAA,WAAyB,CACzB,GAAA,EAAA,EAAA,WAAkB,CAClB,GAAA,EAAA,EAAA,KAAc,GAAM,CACpB,GAAA,EAAA,EAAA,KAAsB,EAAM,QAAQ,CAEpC,GAAA,EAAA,EAAA,cACE,OAAO,EAAgB,OAAU,UAC1B,EAAgB,MAEhB,EAAgB,MAAM,SAAS,EAAM,MAAM,CAExD,CACI,GAAA,EAAA,EAAA,cAAuB,CACzB,IAAI,EAAQ,OAAO,OAAO,EAAE,CAAE,EAAc,CAExC,QAAQ,EAAO,CAGX,EAAK,QAAS,EAAM,CAChB,EAAM,MAAQ,UAEd,EAAK,QAAQ,CACT,OAAO,EAAgB,OAAS,UAChC,EAAgB,MAAQ,CAAC,EAAgB,MAErC,EAAgB,MAAM,SAAS,EAAM,MAAM,CAC3C,EAAgB,OAAA,EAAA,EAAA,SACZ,EAAgB,MAChB,EAAM,MACT,CAED,EAAgB,MAAM,KAAK,EAAM,MAAM,GAK1D,CAAC,CAGF,OADA,OAAO,EAAM,MACN,GACT,QAEF,EAAA,EAAA,WACU,EAAM,QACX,GAAY,CACT,EAAgB,MAAQ,GAE/B,EACD,EAAA,EAAA,WACU,EAAgB,UAChB,CAEE,EAAgB,OAAS,EAAM,SAC/B,EAAK,iBAAkB,EAAgB,MAAM,EAGxD,oDAxFW,QAAA,CArCH,OAAA,EAAA,EAAA,gBAAK,iCAA+D,EAAA,SAAQ,aAAgB,EAAY,CAAC,QAKzG,OAAA,EAAA,EAAA,OAAO,EAAY,CAAC,iCA2Bf,MAzBN,EAyBM,EAAA,EAAA,EAAA,oBADK,OAAA,CAtBF,OAAA,EAAA,EAAA,gBAAK,CAAA,iBAAA,oBAA4G,EAAA,yBAAuD,EAAA,yCAYvK,EAAA,gBAAA,CAAA,CAHE,MAAM,sBACL,MAAA,EAAA,EAAA,OAAM,EAAA,QAAO,CACd,cAAY,uEAUd,SAAA,EAAA,EAAA,YAPU,EAOV,MAPe,iCACJ,EAAe,MAAA,EACxB,KAAK,WACJ,MAAO,EAAA,MACP,SAAU,EAAA,SACV,QAAK,AAAA,EAAA,KAAA,GAAE,EAAA,MAAO,GACd,WAAQ,AAAA,EAAA,KAAA,GAAE,EAAA,MAAO,mCALT,EAAA,MAAe,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,EAAA,EAAA,OASzB,EAAK,CAAC,UAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAEX,MAFN,EAEM,EAAA,EAAA,EAAA,YADM,EAAA,OAAA,UAAA,EAAA,CAAA,IAAA,GAAA,GAAA,CAAA,CAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAE0C,OAAtD,GAAA,EAAA,EAAA,iBAAuC,EAAA,MAAK,CAAA,EAAA,EAAA,CAAA,GAAA,EAAA"}

package/dist/checkbox.css CHANGED Viewed

@@ -1 +1,2 @@
-.theme{--checkbox-background-default-default-light: var( --color-background-input-light );--checkbox-background-default-default-dark: var( --color-background-input-dark );--checkbox-background-default-hover-light: var( --color-background-input-hovered-light );--checkbox-background-default-hover-dark: var( --color-background-input-hovered-dark );--checkbox-background-default-active-light: var( --color-background-brand-100-light );--checkbox-background-default-active-dark: var( --color-background-brand-100-dark );--checkbox-background-default-disabled-light: var( --color-background-disabled-light );--checkbox-background-default-disabled-dark: var( --color-background-disabled-dark );--checkbox-background-checked-default-light: var( --color-background-brand-200-light );--checkbox-background-checked-default-dark: var( --color-background-brand-200-dark );--checkbox-background-checked-hover-light: var( --color-background-brand-200-hovered-light );--checkbox-background-checked-hover-dark: var( --color-background-brand-200-hovered-dark );--checkbox-background-checked-active-light: var( --color-background-brand-200-pressed-light );--checkbox-background-checked-active-dark: var( --color-background-brand-200-pressed-dark );--checkbox-background-checked-disabled-light: var( --color-background-disabled-light );--checkbox-background-checked-disabled-dark: var( --color-background-disabled-dark );--checkbox-color-default-default-light: transparent;--checkbox-color-default-default-dark: transparent;--checkbox-color-default-hover-light: transparent;--checkbox-color-default-hover-dark: transparent;--checkbox-color-default-active-light: var(--color-text-brand-light);--checkbox-color-default-active-dark: var(--color-text-brand-dark);--checkbox-color-default-disabled-light: transparent;--checkbox-color-default-disabled-dark: transparent;--checkbox-color-checked-default-light: var(--color-text-inverse-light);--checkbox-color-checked-default-dark: var(--color-text-inverse-dark);--checkbox-color-checked-hover-light: var(--color-text-inverse-light);--checkbox-color-checked-hover-dark: var(--color-text-inverse-dark);--checkbox-color-checked-active-light: var( --color-background-brand-100-light );--checkbox-color-checked-active-dark: var( --color-background-brand-100-dark );--checkbox-color-checked-disabled-light: var(--color-text-disabled-light);--checkbox-color-checked-disabled-dark: var(--color-text-disabled-dark);--checkbox-border-color-default-default-light: var( --color-border-input-light );--checkbox-border-color-default-default-dark: var( --color-border-input-dark );--checkbox-border-color-default-hover-light: var( --color-border-input-light );--checkbox-border-color-default-hover-dark: var(--color-border-input-dark);--checkbox-border-color-default-active-light: var( --color-background-brand-100-pressed-light );--checkbox-border-color-default-active-dark: var( --color-background-brand-100-pressed-dark );--checkbox-border-color-default-disabled-light: var( --color-border-input-disabled-light );--checkbox-border-color-default-disabled-dark: var( --color-border-input-disabled-dark );--checkbox-border-color-checked-default-light: var( --color-background-brand-200-light );--checkbox-border-color-checked-default-dark: var( --color-background-brand-200-dark );--checkbox-border-color-checked-hover-light: var( --color-background-brand-200-hovered-light );--checkbox-border-color-checked-hover-dark: var( --color-background-brand-200-hovered-dark );--checkbox-border-color-checked-active-light: var( --color-background-brand-200-light );--checkbox-border-color-checked-active-dark: var( --color-background-brand-200-dark );--checkbox-border-color-checked-disabled-light: var( --color-border-input-disabled-light );--checkbox-border-color-checked-disabled-dark: var( --color-border-input-disabled-dark );--checkbox-height: 14px;--checkbox-width: 14px;--checkbox-padding: 2px var(--size-0);--checkbox-line-height: var(--size-24);--checkbox-label-padding: var(--size-0) var(--size-4);--checkbox-border-radius: var(--border-radius-regular);--checkbox-border-width: var(--border-width);--checkbox-transition: all var(--transition-100ms-ease-in-out);--checkbox-focus-outline-color-light: var(--color-border-focused-light);--checkbox-focus-outline-color-dark: var(--color-border-focused-dark)}.checkbox[data-v-779b3234]{position:relative;display:flex;padding:var(--checkbox-padding)}.checkbox .checkbox-input-container[data-v-779b3234]{padding:5px}.checkbox .checkbox-input[data-v-779b3234]{display:flex;align-items:center;justify-content:center;height:var(--checkbox-height);width:var(--checkbox-width);box-sizing:border-box;border-radius:var(--checkbox-border-radius);border:var(--checkbox-border-width) solid;background-color:var(--checkbox-background-default-default-light);color:var(--checkbox-color-default-default-light);border-color:var(--checkbox-border-color-default-default-light);transition:var(--checkbox-transition)}.checkbox:hover .checkbox-input[data-v-779b3234]{background-color:var(--checkbox-background-default-hover-light);color:var(--checkbox-color-default-hover-light);border-color:var(--checkbox-border-color-default-hover-light)}.checkbox:active .checkbox-input[data-v-779b3234]{background-color:var(--checkbox-background-default-active-light);color:var(--checkbox-color-default-active-light);border-color:var(--checkbox-border-color-default-active-light)}.checkbox .checkbox-checked[data-v-779b3234]{background-color:var(--checkbox-background-checked-default-light);color:var(--checkbox-color-checked-default-light);border-color:var(--checkbox-border-color-checked-default-light)}.checkbox:hover .checkbox-checked[data-v-779b3234]{background-color:var(--checkbox-background-checked-hover-light);color:var(--checkbox-color-checked-hover-light);border-color:var(--checkbox-border-color-checked-hover-light)}.checkbox:active .checkbox-checked[data-v-779b3234]{background-color:var(--checkbox-background-checked-active-light);color:var(--checkbox-color-checked-active-light);border-color:var(--checkbox-border-color-checked-active-light)}.checkbox-disabled[data-v-779b3234]{color:var(--checkbox-color-checked-disabled-light);cursor:not-allowed}.checkbox-disabled .checkbox-input[data-v-779b3234],.checkbox-disabled:hover .checkbox-input[data-v-779b3234]{background-color:var(--checkbox-background-default-disabled-light);color:var(--checkbox-color-default-disabled-light);border-color:var(--checkbox-border-color-default-disabled-light)}.checkbox-disabled .checkbox-checked[data-v-779b3234],.checkbox-disabled:hover .checkbox-checked[data-v-779b3234]{background-color:var(--checkbox-background-checked-disabled-light);color:var(--checkbox-color-checked-disabled-light);border-color:var(--checkbox-border-color-checked-disabled-light)}.checkbox-input-icon[data-v-779b3234]{height:100%;width:100%;box-sizing:border-box;padding:1px}.checkbox-label[data-v-779b3234]{padding:var(--checkbox-label-padding);line-height:var(--checkbox-line-height)}input[data-v-779b3234]{margin:0;opacity:0;position:absolute;pointer-events:none}[data-whatinput=keyboard] .checkbox-focused[data-v-779b3234]{border-color:var(--checkbox-focus-outline-color-light)!important}[dark-mode=true] .checkbox .checkbox-input[data-v-779b3234]{background-color:var(--checkbox-background-default-default-dark);color:var(--checkbox-color-default-default-dark);border-color:var(--checkbox-border-color-default-default-dark)}[dark-mode=true] .checkbox:hover .checkbox-input[data-v-779b3234]{background-color:var(--checkbox-background-default-hover-dark);color:var(--checkbox-color-default-hover-dark);border-color:var(--checkbox-border-color-default-hover-dark)}[dark-mode=true] .checkbox:active .checkbox-input[data-v-779b3234]{background-color:var(--checkbox-background-default-active-dark);color:var(--checkbox-color-default-active-dark);border-color:var(--checkbox-border-color-default-active-dark)}[dark-mode=true] .checkbox .checkbox-checked[data-v-779b3234]{background-color:var(--checkbox-background-checked-default-dark);color:var(--checkbox-color-checked-default-dark);border-color:var(--checkbox-border-color-checked-default-dark)}[dark-mode=true] .checkbox:hover .checkbox-checked[data-v-779b3234]{background-color:var(--checkbox-background-checked-hover-dark);color:var(--checkbox-color-checked-hover-dark);border-color:var(--checkbox-border-color-checked-hover-dark)}[dark-mode=true] .checkbox:active .checkbox-checked[data-v-779b3234]{background-color:var(--checkbox-background-checked-active-dark);color:var(--checkbox-color-checked-active-dark);border-color:var(--checkbox-border-color-checked-active-dark)}[dark-mode=true] .checkbox-disabled[data-v-779b3234]{color:var(--checkbox-color-checked-disabled-dark)}[dark-mode=true] .checkbox-disabled .checkbox-input[data-v-779b3234],[dark-mode=true] .checkbox-disabled:hover .checkbox-input[data-v-779b3234]{background-color:var(--checkbox-background-default-disabled-dark);color:var(--checkbox-color-default-disabled-dark);border-color:var(--checkbox-border-color-default-disabled-dark)}[dark-mode=true] .checkbox-disabled .checkbox-checked[data-v-779b3234],[dark-mode=true] .checkbox-disabled:hover .checkbox-checked[data-v-779b3234]{background-color:var(--checkbox-background-checked-disabled-dark);color:var(--checkbox-color-checked-disabled-dark);border-color:var(--checkbox-border-color-checked-disabled-dark)}[dark-mode=true] [data-whatinput=keyboard] .checkbox-focused[data-v-779b3234]{border-color:var(--checkbox-focus-outline-color-dark)!important}
+.theme{--checkbox-background-default-default-light:var(--color-background-input-light);--checkbox-background-default-default-dark:var(--color-background-input-dark);--checkbox-background-default-hover-light:var(--color-background-input-hovered-light);--checkbox-background-default-hover-dark:var(--color-background-input-hovered-dark);--checkbox-background-default-active-light:var(--color-background-brand-100-light);--checkbox-background-default-active-dark:var(--color-background-brand-100-dark);--checkbox-background-default-disabled-light:var(--color-background-disabled-light);--checkbox-background-default-disabled-dark:var(--color-background-disabled-dark);--checkbox-background-checked-default-light:var(--color-background-brand-200-light);--checkbox-background-checked-default-dark:var(--color-background-brand-200-dark);--checkbox-background-checked-hover-light:var(--color-background-brand-200-hovered-light);--checkbox-background-checked-hover-dark:var(--color-background-brand-200-hovered-dark);--checkbox-background-checked-active-light:var(--color-background-brand-200-pressed-light);--checkbox-background-checked-active-dark:var(--color-background-brand-200-pressed-dark);--checkbox-background-checked-disabled-light:var(--color-background-disabled-light);--checkbox-background-checked-disabled-dark:var(--color-background-disabled-dark);--checkbox-color-default-default-light:transparent;--checkbox-color-default-default-dark:transparent;--checkbox-color-default-hover-light:transparent;--checkbox-color-default-hover-dark:transparent;--checkbox-color-default-active-light:var(--color-text-brand-light);--checkbox-color-default-active-dark:var(--color-text-brand-dark);--checkbox-color-default-disabled-light:transparent;--checkbox-color-default-disabled-dark:transparent;--checkbox-color-checked-default-light:var(--color-brand-on-strong-light);--checkbox-color-checked-default-dark:var(--color-brand-on-strong-dark);--checkbox-color-checked-hover-light:var(--color-brand-on-strong-light);--checkbox-color-checked-hover-dark:var(--color-brand-on-strong-dark);--checkbox-color-checked-active-light:var(--color-background-brand-100-light);--checkbox-color-checked-active-dark:var(--color-background-brand-100-dark);--checkbox-color-checked-disabled-light:var(--color-text-disabled-light);--checkbox-color-checked-disabled-dark:var(--color-text-disabled-dark);--checkbox-border-color-default-default-light:var(--color-border-input-light);--checkbox-border-color-default-default-dark:var(--color-border-input-dark);--checkbox-border-color-default-hover-light:var(--color-border-input-light);--checkbox-border-color-default-hover-dark:var(--color-border-input-dark);--checkbox-border-color-default-active-light:var(--color-background-brand-100-pressed-light);--checkbox-border-color-default-active-dark:var(--color-background-brand-100-pressed-dark);--checkbox-border-color-default-disabled-light:var(--color-border-input-disabled-light);--checkbox-border-color-default-disabled-dark:var(--color-border-input-disabled-dark);--checkbox-border-color-checked-default-light:var(--color-background-brand-200-light);--checkbox-border-color-checked-default-dark:var(--color-background-brand-200-dark);--checkbox-border-color-checked-hover-light:var(--color-background-brand-200-hovered-light);--checkbox-border-color-checked-hover-dark:var(--color-background-brand-200-hovered-dark);--checkbox-border-color-checked-active-light:var(--color-background-brand-200-light);--checkbox-border-color-checked-active-dark:var(--color-background-brand-200-dark);--checkbox-border-color-checked-disabled-light:var(--color-border-input-disabled-light);--checkbox-border-color-checked-disabled-dark:var(--color-border-input-disabled-dark);--checkbox-height:14px;--checkbox-width:14px;--checkbox-padding:2px var(--size-0);--checkbox-line-height:var(--size-24);--checkbox-label-padding:var(--size-0) var(--size-4);--checkbox-border-radius:var(--border-radius-regular);--checkbox-border-width:var(--border-width);--checkbox-transition:all var(--transition-100ms-ease-in-out);--checkbox-focus-outline-color-light:var(--color-border-focused-light);--checkbox-focus-outline-color-dark:var(--color-border-focused-dark)}.checkbox[data-v-779b3234]{padding:var(--checkbox-padding);display:flex;position:relative}.checkbox .checkbox-input-container[data-v-779b3234]{padding:5px}.checkbox .checkbox-input[data-v-779b3234]{height:var(--checkbox-height);width:var(--checkbox-width);box-sizing:border-box;border-radius:var(--checkbox-border-radius);border:var(--checkbox-border-width) solid;background-color:var(--checkbox-background-default-default-light);color:var(--checkbox-color-default-default-light);border-color:var(--checkbox-border-color-default-default-light);transition:var(--checkbox-transition);justify-content:center;align-items:center;display:flex}.checkbox:hover .checkbox-input[data-v-779b3234]{background-color:var(--checkbox-background-default-hover-light);color:var(--checkbox-color-default-hover-light);border-color:var(--checkbox-border-color-default-hover-light)}.checkbox:active .checkbox-input[data-v-779b3234]{background-color:var(--checkbox-background-default-active-light);color:var(--checkbox-color-default-active-light);border-color:var(--checkbox-border-color-default-active-light)}.checkbox .checkbox-checked[data-v-779b3234]{background-color:var(--checkbox-background-checked-default-light);color:var(--checkbox-color-checked-default-light);border-color:var(--checkbox-border-color-checked-default-light)}.checkbox:hover .checkbox-checked[data-v-779b3234]{background-color:var(--checkbox-background-checked-hover-light);color:var(--checkbox-color-checked-hover-light);border-color:var(--checkbox-border-color-checked-hover-light)}.checkbox:active .checkbox-checked[data-v-779b3234]{background-color:var(--checkbox-background-checked-active-light);color:var(--checkbox-color-checked-active-light);border-color:var(--checkbox-border-color-checked-active-light)}.checkbox-disabled[data-v-779b3234]{color:var(--checkbox-color-checked-disabled-light);cursor:not-allowed}.checkbox-disabled .checkbox-input[data-v-779b3234],.checkbox-disabled:hover .checkbox-input[data-v-779b3234]{background-color:var(--checkbox-background-default-disabled-light);color:var(--checkbox-color-default-disabled-light);border-color:var(--checkbox-border-color-default-disabled-light)}.checkbox-disabled .checkbox-checked[data-v-779b3234],.checkbox-disabled:hover .checkbox-checked[data-v-779b3234]{background-color:var(--checkbox-background-checked-disabled-light);color:var(--checkbox-color-checked-disabled-light);border-color:var(--checkbox-border-color-checked-disabled-light)}.checkbox-input-icon[data-v-779b3234]{box-sizing:border-box;width:100%;height:100%;padding:1px}.checkbox-label[data-v-779b3234]{padding:var(--checkbox-label-padding);line-height:var(--checkbox-line-height)}input[data-v-779b3234]{opacity:0;pointer-events:none;margin:0;position:absolute}[data-whatinput=keyboard] .checkbox-focused[data-v-779b3234]{border-color:var(--checkbox-focus-outline-color-light)!important}[dark-mode=true] .checkbox .checkbox-input[data-v-779b3234]{background-color:var(--checkbox-background-default-default-dark);color:var(--checkbox-color-default-default-dark);border-color:var(--checkbox-border-color-default-default-dark)}[dark-mode=true] .checkbox:hover .checkbox-input[data-v-779b3234]{background-color:var(--checkbox-background-default-hover-dark);color:var(--checkbox-color-default-hover-dark);border-color:var(--checkbox-border-color-default-hover-dark)}[dark-mode=true] .checkbox:active .checkbox-input[data-v-779b3234]{background-color:var(--checkbox-background-default-active-dark);color:var(--checkbox-color-default-active-dark);border-color:var(--checkbox-border-color-default-active-dark)}[dark-mode=true] .checkbox .checkbox-checked[data-v-779b3234]{background-color:var(--checkbox-background-checked-default-dark);color:var(--checkbox-color-checked-default-dark);border-color:var(--checkbox-border-color-checked-default-dark)}[dark-mode=true] .checkbox:hover .checkbox-checked[data-v-779b3234]{background-color:var(--checkbox-background-checked-hover-dark);color:var(--checkbox-color-checked-hover-dark);border-color:var(--checkbox-border-color-checked-hover-dark)}[dark-mode=true] .checkbox:active .checkbox-checked[data-v-779b3234]{background-color:var(--checkbox-background-checked-active-dark);color:var(--checkbox-color-checked-active-dark);border-color:var(--checkbox-border-color-checked-active-dark)}[dark-mode=true] .checkbox-disabled[data-v-779b3234]{color:var(--checkbox-color-checked-disabled-dark)}[dark-mode=true] .checkbox-disabled .checkbox-input[data-v-779b3234],[dark-mode=true] .checkbox-disabled:hover .checkbox-input[data-v-779b3234]{background-color:var(--checkbox-background-default-disabled-dark);color:var(--checkbox-color-default-disabled-dark);border-color:var(--checkbox-border-color-default-disabled-dark)}[dark-mode=true] .checkbox-disabled .checkbox-checked[data-v-779b3234],[dark-mode=true] .checkbox-disabled:hover .checkbox-checked[data-v-779b3234]{background-color:var(--checkbox-background-checked-disabled-dark);color:var(--checkbox-color-checked-disabled-dark);border-color:var(--checkbox-border-color-checked-disabled-dark)}[dark-mode=true] [data-whatinput=keyboard] .checkbox-focused[data-v-779b3234]{border-color:var(--checkbox-focus-outline-color-dark)!important}
+/*$vite$:1*/

package/dist/checkbox.es.js CHANGED Viewed

@@ -1,107 +1,78 @@
-import { useAttrs as C, useSlots as g, ref as k, computed as b, watch as h, createElementBlock as r, openBlock as v, unref as n, normalizeClass as p, createElementVNode as f, createVNode as _, withDirectives as A, mergeProps as S, vModelCheckbox as w, renderSlot as B, toDisplayString as O } from "vue";
-import { FontAwesomeIcon as j } from "@fortawesome/vue-fontawesome";
-import { faCheck as E } from "@fortawesome/free-solid-svg-icons";
-import F from "lodash/without.js";
-const V = (o, u) => {
-  const t = o.__vccOpts || o;
-  for (const [s, c] of u)
-    t[s] = c;
-  return t;
-}, $ = ["title"], D = { class: "checkbox-input-container" }, I = ["value", "disabled"], N = {
-  key: 0,
-  class: "checkbox-label"
-}, z = {
-  key: 1,
-  class: "checkbox-label"
-}, K = /* @__PURE__ */ Object.assign({
-  name: "Checkbox",
-  inheritAttrs: !1
+import { computed as e, createElementBlock as t, createElementVNode as n, createVNode as r, mergeProps as i, normalizeClass as a, openBlock as o, ref as s, renderSlot as c, toDisplayString as l, unref as u, useAttrs as d, useSlots as f, vModelCheckbox as p, watch as m, withDirectives as h } from "vue";
+import { FontAwesomeIcon as g } from "@fortawesome/vue-fontawesome";
+import { faCheck as _ } from "@fortawesome/free-solid-svg-icons";
+import v from "lodash/without.js";
+//#region \0plugin-vue:export-helper
+var y = (e, t) => {
+	let n = e.__vccOpts || e;
+	for (let [e, r] of t) n[e] = r;
+	return n;
+}, b = ["title"], x = { class: "checkbox-input-container" }, S = ["value", "disabled"], C = {
+	key: 0,
+	class: "checkbox-label"
+}, w = {
+	key: 1,
+	class: "checkbox-label"
+}, T = /* @__PURE__ */ y(/* @__PURE__ */ Object.assign({
+	name: "Checkbox",
+	inheritAttrs: !1
 }, {
-  __name: "Checkbox",
-  props: {
-    checked: {
-      type: [Boolean, Array],
-      default: !1
-    },
-    value: {
-      type: [String, Object],
-      default: ""
-    },
-    label: {
-      type: String,
-      default: ""
-    },
-    disabled: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  emits: ["update:checked"],
-  setup(o, { emit: u }) {
-    const t = o, s = u, c = C(), m = g(), i = k(!1), e = k(t.checked), x = b(() => typeof e.value == "boolean" ? e.value : e.value.includes(t.value)), y = b(() => {
-      let a = Object.assign({}, c, {
-        // Pressing the enter key gets handled like a click.
-        onKeyup(l) {
-          s("keyup", l), l.key === "Enter" && (s("click"), typeof e.value == "boolean" ? e.value = !e.value : e.value.includes(t.value) ? e.value = F(
-            e.value,
-            t.value
-          ) : e.value.push(t.value));
-        }
-      });
-      return delete a.class, a;
-    });
-    return h(
-      () => t.checked,
-      (a) => {
-        e.value = a;
-      }
-    ), h(
-      () => e.value,
-      () => {
-        e.value != t.checked && s("update:checked", e.value);
-      }
-    ), (a, l) => (v(), r("label", {
-      class: p([
-        "checkbox",
-        { "checkbox-disabled": o.disabled },
-        n(c).class
-      ]),
-      title: n(c).title
-    }, [
-      f("div", D, [
-        f("span", {
-          class: p([
-            "checkbox-input",
-            {
-              "checkbox-checked": x.value,
-              "checkbox-focused": i.value
-            }
-          ])
-        }, [
-          _(n(j), {
-            class: "checkbox-input-icon",
-            icon: n(E),
-            "aria-hidden": "true"
-          }, null, 8, ["icon"]),
-          A(f("input", S(y.value, {
-            "onUpdate:modelValue": l[0] || (l[0] = (d) => e.value = d),
-            type: "checkbox",
-            value: o.value,
-            disabled: o.disabled,
-            onFocus: l[1] || (l[1] = (d) => i.value = !0),
-            onFocusout: l[2] || (l[2] = (d) => i.value = !1)
-          }), null, 16, I), [
-            [w, e.value]
-          ])
-        ], 2)
-      ]),
-      n(m).default ? (v(), r("div", N, [
-        B(a.$slots, "default", {}, void 0, !0)
-      ])) : (v(), r("span", z, O(o.label), 1))
-    ], 10, $));
-  }
-}), G = /* @__PURE__ */ V(K, [["__scopeId", "data-v-779b3234"]]);
-export {
-  G as Checkbox
-};
-//# sourceMappingURL=checkbox.es.js.map
+	__name: "Checkbox",
+	props: {
+		checked: {
+			type: [Boolean, Array],
+			default: !1
+		},
+		value: {
+			type: [String, Object],
+			default: ""
+		},
+		label: {
+			type: String,
+			default: ""
+		},
+		disabled: {
+			type: Boolean,
+			default: !1
+		}
+	},
+	emits: ["update:checked"],
+	setup(y, { emit: T }) {
+		let E = y, D = T, O = d(), k = f(), A = s(!1), j = s(E.checked), M = e(() => typeof j.value == "boolean" ? j.value : j.value.includes(E.value)), N = e(() => {
+			let e = Object.assign({}, O, { onKeyup(e) {
+				D("keyup", e), e.key === "Enter" && (D("click"), typeof j.value == "boolean" ? j.value = !j.value : j.value.includes(E.value) ? j.value = v(j.value, E.value) : j.value.push(E.value));
+			} });
+			return delete e.class, e;
+		});
+		return m(() => E.checked, (e) => {
+			j.value = e;
+		}), m(() => j.value, () => {
+			j.value != E.checked && D("update:checked", j.value);
+		}), (e, s) => (o(), t("label", {
+			class: a([
+				"checkbox",
+				{ "checkbox-disabled": y.disabled },
+				u(O).class
+			]),
+			title: u(O).title
+		}, [n("div", x, [n("span", { class: a(["checkbox-input", {
+			"checkbox-checked": M.value,
+			"checkbox-focused": A.value
+		}]) }, [r(u(g), {
+			class: "checkbox-input-icon",
+			icon: u(_),
+			"aria-hidden": "true"
+		}, null, 8, ["icon"]), h(n("input", i(N.value, {
+			"onUpdate:modelValue": s[0] ||= (e) => j.value = e,
+			type: "checkbox",
+			value: y.value,
+			disabled: y.disabled,
+			onFocus: s[1] ||= (e) => A.value = !0,
+			onFocusout: s[2] ||= (e) => A.value = !1
+		}), null, 16, S), [[p, j.value]])], 2)]), u(k).default ? (o(), t("div", C, [c(e.$slots, "default", {}, void 0, !0)])) : (o(), t("span", w, l(y.label), 1))], 10, b));
+	}
+}), [["__scopeId", "data-v-779b3234"]]);
+//#endregion
+export { T as Checkbox };
+//# sourceMappingURL=checkbox.es.js.map

package/dist/checkbox.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.es.js","sources":["../src/Checkbox.vue"],"sourcesContent":["<template>\n <label\n :class=\"[\n 'checkbox',\n { 'checkbox-disabled': disabled },\n defaultAttrs.class,\n ]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n {\n 'checkbox-checked': isChecked,\n 'checkbox-focused': focused,\n },\n ]\"\n >\n <font-awesome-icon\n class=\"checkbox-input-icon\"\n :icon=\"faCheck\"\n aria-hidden=\"true\"\n />\n <input\n v-bind=\"attrs\"\n v-model=\"internalChecked\"\n type=\"checkbox\"\n :value=\"value\"\n :disabled=\"disabled\"\n @focus=\"focused = true\"\n @focusout=\"focused = false\"\n />\n </span>\n </div>\n <div v-if=\"slots.default\" class=\"checkbox-label\">\n <slot />\n </div>\n <span v-else class=\"checkbox-label\">{{ label }}</span>\n </label>\n</template>\n\n<script setup>\nimport { useAttrs, useSlots, ref, computed, watch } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\n\ndefineOptions({\n name: \"Checkbox\",\n inheritAttrs: false,\n});\nconst props = defineProps({\n checked: {\n type: [Boolean, Array],\n default: false,\n },\n value: {\n type: [String, Object],\n default: \"\",\n },\n label: {\n type: String,\n default: \"\",\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n});\nconst emit = defineEmits([\"update:checked\"]);\nconst defaultAttrs = useAttrs();\nconst slots = useSlots();\nconst focused = ref(false);\nconst internalChecked = ref(props.checked);\n\nconst isChecked = computed(() => {\n if (typeof internalChecked.value === \"boolean\") {\n return internalChecked.value;\n } else {\n return internalChecked.value.includes(props.value);\n }\n});\nconst attrs = computed(() => {\n let attrs = Object.assign({}, defaultAttrs, {\n // Pressing the enter key gets handled like a click.\n onKeyup(event) {\n // Don't add the keyup and click events to defineEmits, otherwise it won't work.\n // eslint-disable-next-line vue/require-explicit-emits\n emit(\"keyup\", event);\n if (event.key === \"Enter\") {\n // eslint-disable-next-line vue/require-explicit-emits\n emit(\"click\");\n if (typeof internalChecked.value == \"boolean\") {\n internalChecked.value = !internalChecked.value;\n } else {\n if (internalChecked.value.includes(props.value)) {\n internalChecked.value = without(\n internalChecked.value,\n props.value,\n );\n } else {\n internalChecked.value.push(props.value);\n }\n }\n }\n },\n });\n // Only assign events to the input element, classes are assigned to the outer label.\n delete attrs.class;\n return attrs;\n});\n\nwatch(\n () => props.checked,\n (checked) => {\n internalChecked.value = checked;\n },\n);\nwatch(\n () => internalChecked.value,\n () => {\n // Only emit the update:checked event if the mutation came from within the checkbox component.\n if (internalChecked.value != props.checked) {\n emit(\"update:checked\", internalChecked.value);\n }\n },\n);\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style lang=\"less\" scoped>\n.checkbox {\n position: relative;\n display: flex;\n padding: var(--checkbox-padding);\n\n .checkbox-input-container {\n padding: 5px;\n }\n .checkbox-input {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--checkbox-height);\n width: var(--checkbox-width);\n box-sizing: border-box;\n border-radius: var(--checkbox-border-radius);\n border: var(--checkbox-border-width) solid;\n background-color: var(--checkbox-background-default-default-light);\n color: var(--checkbox-color-default-default-light);\n border-color: var(--checkbox-border-color-default-default-light);\n transition: var(--checkbox-transition);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-hover-light);\n color: var(--checkbox-color-default-hover-light);\n border-color: var(--checkbox-border-color-default-hover-light);\n }\n &:active .checkbox-input {\n background-color: var(--checkbox-background-default-active-light);\n color: var(--checkbox-color-default-active-light);\n border-color: var(--checkbox-border-color-default-active-light);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-default-light);\n color: var(--checkbox-color-checked-default-light);\n border-color: var(--checkbox-border-color-checked-default-light);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-hover-light);\n color: var(--checkbox-color-checked-hover-light);\n border-color: var(--checkbox-border-color-checked-hover-light);\n }\n &:active .checkbox-checked {\n background-color: var(--checkbox-background-checked-active-light);\n color: var(--checkbox-color-checked-active-light);\n border-color: var(--checkbox-border-color-checked-active-light);\n }\n}\n.checkbox-disabled {\n color: var(--checkbox-color-checked-disabled-light);\n cursor: not-allowed;\n\n .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-light);\n color: var(--checkbox-color-default-disabled-light);\n border-color: var(--checkbox-border-color-default-disabled-light);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-light);\n color: var(--checkbox-color-default-disabled-light);\n border-color: var(--checkbox-border-color-default-disabled-light);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-light);\n color: var(--checkbox-color-checked-disabled-light);\n border-color: var(--checkbox-border-color-checked-disabled-light);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-light);\n color: var(--checkbox-color-checked-disabled-light);\n border-color: var(--checkbox-border-color-checked-disabled-light);\n }\n}\n.checkbox-input-icon {\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n padding: 1px;\n}\n.checkbox-label {\n padding: var(--checkbox-label-padding);\n line-height: var(--checkbox-line-height);\n}\ninput {\n margin: 0;\n opacity: 0;\n position: absolute;\n pointer-events: none;\n}\n[data-whatinput=\"keyboard\"] .checkbox-focused {\n border-color: var(--checkbox-focus-outline-color-light) !important;\n}\n\n[dark-mode=\"true\"] {\n .checkbox {\n .checkbox-input {\n background-color: var(--checkbox-background-default-default-dark);\n color: var(--checkbox-color-default-default-dark);\n border-color: var(--checkbox-border-color-default-default-dark);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-hover-dark);\n color: var(--checkbox-color-default-hover-dark);\n border-color: var(--checkbox-border-color-default-hover-dark);\n }\n &:active .checkbox-input {\n background-color: var(--checkbox-background-default-active-dark);\n color: var(--checkbox-color-default-active-dark);\n border-color: var(--checkbox-border-color-default-active-dark);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-default-dark);\n color: var(--checkbox-color-checked-default-dark);\n border-color: var(--checkbox-border-color-checked-default-dark);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-hover-dark);\n color: var(--checkbox-color-checked-hover-dark);\n border-color: var(--checkbox-border-color-checked-hover-dark);\n }\n &:active .checkbox-checked {\n background-color: var(--checkbox-background-checked-active-dark);\n color: var(--checkbox-color-checked-active-dark);\n border-color: var(--checkbox-border-color-checked-active-dark);\n }\n }\n .checkbox-disabled {\n color: var(--checkbox-color-checked-disabled-dark);\n\n .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-dark);\n color: var(--checkbox-color-default-disabled-dark);\n border-color: var(--checkbox-border-color-default-disabled-dark);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-dark);\n color: var(--checkbox-color-default-disabled-dark);\n border-color: var(--checkbox-border-color-default-disabled-dark);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-dark);\n color: var(--checkbox-color-checked-disabled-dark);\n border-color: var(--checkbox-border-color-checked-disabled-dark);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-dark);\n color: var(--checkbox-color-checked-disabled-dark);\n border-color: var(--checkbox-border-color-checked-disabled-dark);\n }\n }\n\n [data-whatinput=\"keyboard\"] .checkbox-focused {\n border-color: var(--checkbox-focus-outline-color-dark) !important;\n }\n}\n</style>\n"],"names":["props","__props","emit","__emit","defaultAttrs","useAttrs","slots","useSlots","focused","ref","internalChecked","isChecked","computed","attrs","event","without","watch","checked","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_hoisted_2","_createVNode","FontAwesomeIcon","faCheck","_mergeProps","$event","_openBlock","_hoisted_4","_renderSlot","_ctx","_hoisted_5","_toDisplayString"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,UAAMA,IAAQC,GAkBRC,IAAOC,GACPC,IAAeC,EAAQ,GACvBC,IAAQC,EAAQ,GAChBC,IAAUC,EAAI,EAAK,GACnBC,IAAkBD,EAAIT,EAAM,OAAO,GAEnCW,IAAYC,EAAS,MACnB,OAAOF,EAAgB,SAAU,YAC1BA,EAAgB,QAEhBA,EAAgB,MAAM,SAASV,EAAM,KAAK,CAExD,GACKa,IAAQD,EAAS,MAAM;AACzB,UAAIC,IAAQ,OAAO,OAAO,CAAA,GAAIT,GAAc;AAAA;AAAA,QAExC,QAAQU,GAAO;AAGX,UAAAZ,EAAK,SAASY,CAAK,GACfA,EAAM,QAAQ,YAEdZ,EAAK,OAAO,GACR,OAAOQ,EAAgB,SAAS,YAChCA,EAAgB,QAAQ,CAACA,EAAgB,QAErCA,EAAgB,MAAM,SAASV,EAAM,KAAK,IAC1CU,EAAgB,QAAQK;AAAA,YACpBL,EAAgB;AAAA,YAChBV,EAAM;AAAA,UAClC,IAEwBU,EAAgB,MAAM,KAAKV,EAAM,KAAK;AAAA,QAItD;AAAA,MACR,CAAK;AAED,oBAAOa,EAAM,OACNA;AAAA,IACX,CAAC;AAED,WAAAG;AAAA,MACI,MAAMhB,EAAM;AAAA,MACZ,CAACiB,MAAY;AACT,QAAAP,EAAgB,QAAQO;AAAA,MAC5B;AAAA,IACJ,GACAD;AAAA,MACI,MAAMN,EAAgB;AAAA,MACtB,MAAM;AAEF,QAAIA,EAAgB,SAASV,EAAM,WAC/BE,EAAK,kBAAkBQ,EAAgB,KAAK;AAAA,MAEpD;AAAA,IACJ,mBA9HIQ,EAsCQ,SAAA;AAAA,MArCH,OAAKC,EAAA;AAAA;+BAA+DlB,EAAA,SAAQ;AAAA,QAAgBmB,EAAAhB,CAAA,EAAa;AAAA;MAKzG,OAAOgB,EAAAhB,CAAA,EAAa;AAAA;MAErBiB,EAyBM,OAzBNC,GAyBM;AAAA,QAxBFD,EAuBO,QAAA;AAAA,UAtBF,OAAKF,EAAA;AAAA;;kCAA4GR,EAAA;AAAA,kCAAuDH,EAAA;AAAA;;;UAQzKe,EAIEH,EAAAI,CAAA,GAAA;AAAA,YAHE,OAAM;AAAA,YACL,MAAMJ,EAAAK,CAAA;AAAA,YACP,eAAY;AAAA;YAEhBJ,EAQE,SARFK,EAQEb,EAAA,OAPe;AAAA,0DACJH,EAAe,QAAAiB;AAAA,YACxB,MAAK;AAAA,YACJ,OAAO1B,EAAA;AAAA,YACP,UAAUA,EAAA;AAAA,YACV,gCAAOO,EAAA,QAAO;AAAA,YACd,mCAAUA,EAAA,QAAO;AAAA;gBALTE,EAAA,KAAe;AAAA;;;MASzBU,EAAAd,CAAA,EAAM,WAAjBsB,KAAAV,EAEM,OAFNW,GAEM;AAAA,QADFC,EAAQC,EAAA,QAAA,WAAA,CAAA,GAAA,QAAA,EAAA;AAAA,kBAEZb,EAAsD,QAAtDc,GAAsDC,EAAfhC,EAAA,KAAK,GAAA,CAAA;AAAA;;;"}
1	+ {"version":3,"file":"checkbox.es.js","names":[],"sources":["../src/Checkbox.vue"],"sourcesContent":["<template>\n <label\n :class=\"[\n 'checkbox',\n { 'checkbox-disabled': disabled },\n defaultAttrs.class,\n ]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n {\n 'checkbox-checked': isChecked,\n 'checkbox-focused': focused,\n },\n ]\"\n >\n <font-awesome-icon\n class=\"checkbox-input-icon\"\n :icon=\"faCheck\"\n aria-hidden=\"true\"\n />\n <input\n v-bind=\"attrs\"\n v-model=\"internalChecked\"\n type=\"checkbox\"\n :value=\"value\"\n :disabled=\"disabled\"\n @focus=\"focused = true\"\n @focusout=\"focused = false\"\n />\n </span>\n </div>\n <div v-if=\"slots.default\" class=\"checkbox-label\">\n <slot />\n </div>\n <span v-else class=\"checkbox-label\">{{ label }}</span>\n </label>\n</template>\n\n<script setup>\nimport { useAttrs, useSlots, ref, computed, watch } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\n\ndefineOptions({\n name: \"Checkbox\",\n inheritAttrs: false,\n});\nconst props = defineProps({\n checked: {\n type: [Boolean, Array],\n default: false,\n },\n value: {\n type: [String, Object],\n default: \"\",\n },\n label: {\n type: String,\n default: \"\",\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n});\nconst emit = defineEmits([\"update:checked\"]);\nconst defaultAttrs = useAttrs();\nconst slots = useSlots();\nconst focused = ref(false);\nconst internalChecked = ref(props.checked);\n\nconst isChecked = computed(() => {\n if (typeof internalChecked.value === \"boolean\") {\n return internalChecked.value;\n } else {\n return internalChecked.value.includes(props.value);\n }\n});\nconst attrs = computed(() => {\n let attrs = Object.assign({}, defaultAttrs, {\n // Pressing the enter key gets handled like a click.\n onKeyup(event) {\n // Don't add the keyup and click events to defineEmits, otherwise it won't work.\n // eslint-disable-next-line vue/require-explicit-emits\n emit(\"keyup\", event);\n if (event.key === \"Enter\") {\n // eslint-disable-next-line vue/require-explicit-emits\n emit(\"click\");\n if (typeof internalChecked.value == \"boolean\") {\n internalChecked.value = !internalChecked.value;\n } else {\n if (internalChecked.value.includes(props.value)) {\n internalChecked.value = without(\n internalChecked.value,\n props.value,\n );\n } else {\n internalChecked.value.push(props.value);\n }\n }\n }\n },\n });\n // Only assign events to the input element, classes are assigned to the outer label.\n delete attrs.class;\n return attrs;\n});\n\nwatch(\n () => props.checked,\n (checked) => {\n internalChecked.value = checked;\n },\n);\nwatch(\n () => internalChecked.value,\n () => {\n // Only emit the update:checked event if the mutation came from within the checkbox component.\n if (internalChecked.value != props.checked) {\n emit(\"update:checked\", internalChecked.value);\n }\n },\n);\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style lang=\"less\" scoped>\n.checkbox {\n position: relative;\n display: flex;\n padding: var(--checkbox-padding);\n\n .checkbox-input-container {\n padding: 5px;\n }\n .checkbox-input {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--checkbox-height);\n width: var(--checkbox-width);\n box-sizing: border-box;\n border-radius: var(--checkbox-border-radius);\n border: var(--checkbox-border-width) solid;\n background-color: var(--checkbox-background-default-default-light);\n color: var(--checkbox-color-default-default-light);\n border-color: var(--checkbox-border-color-default-default-light);\n transition: var(--checkbox-transition);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-hover-light);\n color: var(--checkbox-color-default-hover-light);\n border-color: var(--checkbox-border-color-default-hover-light);\n }\n &:active .checkbox-input {\n background-color: var(--checkbox-background-default-active-light);\n color: var(--checkbox-color-default-active-light);\n border-color: var(--checkbox-border-color-default-active-light);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-default-light);\n color: var(--checkbox-color-checked-default-light);\n border-color: var(--checkbox-border-color-checked-default-light);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-hover-light);\n color: var(--checkbox-color-checked-hover-light);\n border-color: var(--checkbox-border-color-checked-hover-light);\n }\n &:active .checkbox-checked {\n background-color: var(--checkbox-background-checked-active-light);\n color: var(--checkbox-color-checked-active-light);\n border-color: var(--checkbox-border-color-checked-active-light);\n }\n}\n.checkbox-disabled {\n color: var(--checkbox-color-checked-disabled-light);\n cursor: not-allowed;\n\n .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-light);\n color: var(--checkbox-color-default-disabled-light);\n border-color: var(--checkbox-border-color-default-disabled-light);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-light);\n color: var(--checkbox-color-default-disabled-light);\n border-color: var(--checkbox-border-color-default-disabled-light);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-light);\n color: var(--checkbox-color-checked-disabled-light);\n border-color: var(--checkbox-border-color-checked-disabled-light);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-light);\n color: var(--checkbox-color-checked-disabled-light);\n border-color: var(--checkbox-border-color-checked-disabled-light);\n }\n}\n.checkbox-input-icon {\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n padding: 1px;\n}\n.checkbox-label {\n padding: var(--checkbox-label-padding);\n line-height: var(--checkbox-line-height);\n}\ninput {\n margin: 0;\n opacity: 0;\n position: absolute;\n pointer-events: none;\n}\n[data-whatinput=\"keyboard\"] .checkbox-focused {\n border-color: var(--checkbox-focus-outline-color-light) !important;\n}\n\n[dark-mode=\"true\"] {\n .checkbox {\n .checkbox-input {\n background-color: var(--checkbox-background-default-default-dark);\n color: var(--checkbox-color-default-default-dark);\n border-color: var(--checkbox-border-color-default-default-dark);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-hover-dark);\n color: var(--checkbox-color-default-hover-dark);\n border-color: var(--checkbox-border-color-default-hover-dark);\n }\n &:active .checkbox-input {\n background-color: var(--checkbox-background-default-active-dark);\n color: var(--checkbox-color-default-active-dark);\n border-color: var(--checkbox-border-color-default-active-dark);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-default-dark);\n color: var(--checkbox-color-checked-default-dark);\n border-color: var(--checkbox-border-color-checked-default-dark);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-hover-dark);\n color: var(--checkbox-color-checked-hover-dark);\n border-color: var(--checkbox-border-color-checked-hover-dark);\n }\n &:active .checkbox-checked {\n background-color: var(--checkbox-background-checked-active-dark);\n color: var(--checkbox-color-checked-active-dark);\n border-color: var(--checkbox-border-color-checked-active-dark);\n }\n }\n .checkbox-disabled {\n color: var(--checkbox-color-checked-disabled-dark);\n\n .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-dark);\n color: var(--checkbox-color-default-disabled-dark);\n border-color: var(--checkbox-border-color-default-disabled-dark);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-dark);\n color: var(--checkbox-color-default-disabled-dark);\n border-color: var(--checkbox-border-color-default-disabled-dark);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-dark);\n color: var(--checkbox-color-checked-disabled-dark);\n border-color: var(--checkbox-border-color-checked-disabled-dark);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-dark);\n color: var(--checkbox-color-checked-disabled-dark);\n border-color: var(--checkbox-border-color-checked-disabled-dark);\n }\n }\n\n [data-whatinput=\"keyboard\"] .checkbox-focused {\n border-color: var(--checkbox-focus-outline-color-dark) !important;\n }\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoDA,IAAM,IAAQ,GAkBR,IAAO,GACP,IAAe,GAAU,EACzB,IAAQ,GAAU,EAClB,IAAU,EAAI,GAAM,EACpB,IAAkB,EAAI,EAAM,QAAQ,EAEpC,IAAY,QACV,OAAO,EAAgB,SAAU,YAC1B,EAAgB,QAEhB,EAAgB,MAAM,SAAS,EAAM,MAAM,CAExD,EACI,IAAQ,QAAe;GACzB,IAAI,IAAQ,OAAO,OAAO,EAAE,EAAE,GAAc,EAExC,QAAQ,GAAO;AAIX,IADA,EAAK,SAAS,EAAM,EAChB,EAAM,QAAQ,YAEd,EAAK,QAAQ,EACT,OAAO,EAAgB,SAAS,YAChC,EAAgB,QAAQ,CAAC,EAAgB,QAErC,EAAgB,MAAM,SAAS,EAAM,MAAM,GAC3C,EAAgB,QAAQ,EACpB,EAAgB,OAChB,EAAM,MACT,GAED,EAAgB,MAAM,KAAK,EAAM,MAAM;MAK1D,CAAC;AAGF,UADA,OAAO,EAAM,OACN;IACT;SAEF,QACU,EAAM,UACX,MAAY;AACT,KAAgB,QAAQ;IAE/B,EACD,QACU,EAAgB,aAChB;AAEF,GAAI,EAAgB,SAAS,EAAM,WAC/B,EAAK,kBAAkB,EAAgB,MAAM;IAGxD,kBA9HG,EAsCQ,SAAA;GArCH,OAAK,EAAA;;2BAA+D,EAAA,UAAQ;IAAgB,EAAA,EAAY,CAAC;;GAKzG,OAAO,EAAA,EAAY,CAAC;MAErB,EAyBM,OAzBN,GAyBM,CAxBF,EAuBO,QAAA,EAtBF,OAAK,EAAA,CAAA,kBAAA;uBAA4G,EAAA;uBAAuD,EAAA;UAQzK,EAIE,EAAA,EAAA,EAAA;GAHE,OAAM;GACL,MAAM,EAAA,EAAO;GACd,eAAY;2BAEhB,EAQE,SARF,EACY,EAOV,OAPe;0CACJ,EAAe,QAAA;GACxB,MAAK;GACJ,OAAO,EAAA;GACP,UAAU,EAAA;GACV,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAO;GACd,YAAQ,AAAA,EAAA,QAAA,MAAE,EAAA,QAAO;yBALT,EAAA,MAAe,CAAA,CAAA,CAAA,EAAA,EAAA,CAAA,CAAA,EASzB,EAAA,EAAK,CAAC,WAAA,GAAA,EAAjB,EAEM,OAFN,GAEM,CADF,EAAQ,EAAA,QAAA,WAAA,EAAA,EAAA,KAAA,GAAA,GAAA,CAAA,CAAA,KAAA,GAAA,EAEZ,EAAsD,QAAtD,GAAsD,EAAf,EAAA,MAAK,EAAA,EAAA,EAAA,EAAA,IAAA,EAAA"}

package/dist/checkbox.umd.js CHANGED Viewed

@@ -1,2 +1,2 @@
-(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@fortawesome/vue-fontawesome"),require("@fortawesome/free-solid-svg-icons"),require("lodash/without.js")):typeof define=="function"&&define.amd?define(["exports","vue","@fortawesome/vue-fontawesome","@fortawesome/free-solid-svg-icons","lodash/without.js"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o.checkbox={},o.Vue,o.VueFontawesome,o.FreeSolidIcons,o.without))})(this,(function(o,e,f,h,k){"use strict";const p=(c,d)=>{const s=c.__vccOpts||c;for(const[a,i]of d)s[a]=i;return s},b=["title"],m={class:"checkbox-input-container"},x=["value","disabled"],y={key:0,class:"checkbox-label"},v={key:1,class:"checkbox-label"},w=p(Object.assign({name:"Checkbox",inheritAttrs:!1},{__name:"Checkbox",props:{checked:{type:[Boolean,Array],default:!1},value:{type:[String,Object],default:""},label:{type:String,default:""},disabled:{type:Boolean,default:!1}},emits:["update:checked"],setup(c,{emit:d}){const s=c,a=d,i=e.useAttrs(),C=e.useSlots(),r=e.ref(!1),t=e.ref(s.checked),_=e.computed(()=>typeof t.value=="boolean"?t.value:t.value.includes(s.value)),B=e.computed(()=>{let n=Object.assign({},i,{onKeyup(l){a("keyup",l),l.key==="Enter"&&(a("click"),typeof t.value=="boolean"?t.value=!t.value:t.value.includes(s.value)?t.value=k(t.value,s.value):t.value.push(s.value))}});return delete n.class,n});return e.watch(()=>s.checked,n=>{t.value=n}),e.watch(()=>t.value,()=>{t.value!=s.checked&&a("update:checked",t.value)}),(n,l)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["checkbox",{"checkbox-disabled":c.disabled},e.unref(i).class]),title:e.unref(i).title},[e.createElementVNode("div",m,[e.createElementVNode("span",{class:e.normalizeClass(["checkbox-input",{"checkbox-checked":_.value,"checkbox-focused":r.value}])},[e.createVNode(e.unref(f.FontAwesomeIcon),{class:"checkbox-input-icon",icon:e.unref(h.faCheck),"aria-hidden":"true"},null,8,["icon"]),e.withDirectives(e.createElementVNode("input",e.mergeProps(B.value,{"onUpdate:modelValue":l[0]||(l[0]=u=>t.value=u),type:"checkbox",value:c.value,disabled:c.disabled,onFocus:l[1]||(l[1]=u=>r.value=!0),onFocusout:l[2]||(l[2]=u=>r.value=!1)}),null,16,x),[[e.vModelCheckbox,t.value]])],2)]),e.unref(C).default?(e.openBlock(),e.createElementBlock("div",y,[e.renderSlot(n.$slots,"default",{},void 0,!0)])):(e.openBlock(),e.createElementBlock("span",v,e.toDisplayString(c.label),1))],10,b))}}),[["__scopeId","data-v-779b3234"]]);o.Checkbox=w,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})}));
-//# sourceMappingURL=checkbox.umd.js.map
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`vue`),require(`@fortawesome/vue-fontawesome`),require(`@fortawesome/free-solid-svg-icons`),require(`lodash/without.js`)):typeof define==`function`&&define.amd?define([`exports`,`vue`,`@fortawesome/vue-fontawesome`,`@fortawesome/free-solid-svg-icons`,`lodash/without.js`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.checkbox={},e.Vue,e.VueFontawesome,e.FreeSolidIcons,e.without))})(this,function(e,t,n,r,i){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var a=Object.create,o=Object.defineProperty,s=Object.getOwnPropertyDescriptor,c=Object.getOwnPropertyNames,l=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,d=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=c(t),a=0,l=i.length,d;a<l;a++)d=i[a],!u.call(e,d)&&d!==n&&o(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=s(t,d))||r.enumerable});return e};i=((e,t,n)=>(n=e==null?{}:a(l(e)),d(t||!e||!e.__esModule?o(n,`default`,{value:e,enumerable:!0}):n,e)))(i);var f=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},p=[`title`],m={class:`checkbox-input-container`},h=[`value`,`disabled`],g={key:0,class:`checkbox-label`},_={key:1,class:`checkbox-label`};e.Checkbox=f(Object.assign({name:`Checkbox`,inheritAttrs:!1},{__name:`Checkbox`,props:{checked:{type:[Boolean,Array],default:!1},value:{type:[String,Object],default:``},label:{type:String,default:``},disabled:{type:Boolean,default:!1}},emits:[`update:checked`],setup(e,{emit:a}){let o=e,s=a,c=(0,t.useAttrs)(),l=(0,t.useSlots)(),u=(0,t.ref)(!1),d=(0,t.ref)(o.checked),f=(0,t.computed)(()=>typeof d.value==`boolean`?d.value:d.value.includes(o.value)),v=(0,t.computed)(()=>{let e=Object.assign({},c,{onKeyup(e){s(`keyup`,e),e.key===`Enter`&&(s(`click`),typeof d.value==`boolean`?d.value=!d.value:d.value.includes(o.value)?d.value=(0,i.default)(d.value,o.value):d.value.push(o.value))}});return delete e.class,e});return(0,t.watch)(()=>o.checked,e=>{d.value=e}),(0,t.watch)(()=>d.value,()=>{d.value!=o.checked&&s(`update:checked`,d.value)}),(i,a)=>((0,t.openBlock)(),(0,t.createElementBlock)(`label`,{class:(0,t.normalizeClass)([`checkbox`,{"checkbox-disabled":e.disabled},(0,t.unref)(c).class]),title:(0,t.unref)(c).title},[(0,t.createElementVNode)(`div`,m,[(0,t.createElementVNode)(`span`,{class:(0,t.normalizeClass)([`checkbox-input`,{"checkbox-checked":f.value,"checkbox-focused":u.value}])},[(0,t.createVNode)((0,t.unref)(n.FontAwesomeIcon),{class:`checkbox-input-icon`,icon:(0,t.unref)(r.faCheck),"aria-hidden":`true`},null,8,[`icon`]),(0,t.withDirectives)((0,t.createElementVNode)(`input`,(0,t.mergeProps)(v.value,{"onUpdate:modelValue":a[0]||=e=>d.value=e,type:`checkbox`,value:e.value,disabled:e.disabled,onFocus:a[1]||=e=>u.value=!0,onFocusout:a[2]||=e=>u.value=!1}),null,16,h),[[t.vModelCheckbox,d.value]])],2)]),(0,t.unref)(l).default?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,g,[(0,t.renderSlot)(i.$slots,`default`,{},void 0,!0)])):((0,t.openBlock)(),(0,t.createElementBlock)(`span`,_,(0,t.toDisplayString)(e.label),1))],10,p))}}),[[`__scopeId`,`data-v-779b3234`]])});
+//# sourceMappingURL=checkbox.umd.js.map

package/dist/checkbox.umd.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox.umd.js","sources":["../src/Checkbox.vue"],"sourcesContent":["<template>\n <label\n :class=\"[\n 'checkbox',\n { 'checkbox-disabled': disabled },\n defaultAttrs.class,\n ]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n {\n 'checkbox-checked': isChecked,\n 'checkbox-focused': focused,\n },\n ]\"\n >\n <font-awesome-icon\n class=\"checkbox-input-icon\"\n :icon=\"faCheck\"\n aria-hidden=\"true\"\n />\n <input\n v-bind=\"attrs\"\n v-model=\"internalChecked\"\n type=\"checkbox\"\n :value=\"value\"\n :disabled=\"disabled\"\n @focus=\"focused = true\"\n @focusout=\"focused = false\"\n />\n </span>\n </div>\n <div v-if=\"slots.default\" class=\"checkbox-label\">\n <slot />\n </div>\n <span v-else class=\"checkbox-label\">{{ label }}</span>\n </label>\n</template>\n\n<script setup>\nimport { useAttrs, useSlots, ref, computed, watch } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\n\ndefineOptions({\n name: \"Checkbox\",\n inheritAttrs: false,\n});\nconst props = defineProps({\n checked: {\n type: [Boolean, Array],\n default: false,\n },\n value: {\n type: [String, Object],\n default: \"\",\n },\n label: {\n type: String,\n default: \"\",\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n});\nconst emit = defineEmits([\"update:checked\"]);\nconst defaultAttrs = useAttrs();\nconst slots = useSlots();\nconst focused = ref(false);\nconst internalChecked = ref(props.checked);\n\nconst isChecked = computed(() => {\n if (typeof internalChecked.value === \"boolean\") {\n return internalChecked.value;\n } else {\n return internalChecked.value.includes(props.value);\n }\n});\nconst attrs = computed(() => {\n let attrs = Object.assign({}, defaultAttrs, {\n // Pressing the enter key gets handled like a click.\n onKeyup(event) {\n // Don't add the keyup and click events to defineEmits, otherwise it won't work.\n // eslint-disable-next-line vue/require-explicit-emits\n emit(\"keyup\", event);\n if (event.key === \"Enter\") {\n // eslint-disable-next-line vue/require-explicit-emits\n emit(\"click\");\n if (typeof internalChecked.value == \"boolean\") {\n internalChecked.value = !internalChecked.value;\n } else {\n if (internalChecked.value.includes(props.value)) {\n internalChecked.value = without(\n internalChecked.value,\n props.value,\n );\n } else {\n internalChecked.value.push(props.value);\n }\n }\n }\n },\n });\n // Only assign events to the input element, classes are assigned to the outer label.\n delete attrs.class;\n return attrs;\n});\n\nwatch(\n () => props.checked,\n (checked) => {\n internalChecked.value = checked;\n },\n);\nwatch(\n () => internalChecked.value,\n () => {\n // Only emit the update:checked event if the mutation came from within the checkbox component.\n if (internalChecked.value != props.checked) {\n emit(\"update:checked\", internalChecked.value);\n }\n },\n);\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style lang=\"less\" scoped>\n.checkbox {\n position: relative;\n display: flex;\n padding: var(--checkbox-padding);\n\n .checkbox-input-container {\n padding: 5px;\n }\n .checkbox-input {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--checkbox-height);\n width: var(--checkbox-width);\n box-sizing: border-box;\n border-radius: var(--checkbox-border-radius);\n border: var(--checkbox-border-width) solid;\n background-color: var(--checkbox-background-default-default-light);\n color: var(--checkbox-color-default-default-light);\n border-color: var(--checkbox-border-color-default-default-light);\n transition: var(--checkbox-transition);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-hover-light);\n color: var(--checkbox-color-default-hover-light);\n border-color: var(--checkbox-border-color-default-hover-light);\n }\n &:active .checkbox-input {\n background-color: var(--checkbox-background-default-active-light);\n color: var(--checkbox-color-default-active-light);\n border-color: var(--checkbox-border-color-default-active-light);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-default-light);\n color: var(--checkbox-color-checked-default-light);\n border-color: var(--checkbox-border-color-checked-default-light);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-hover-light);\n color: var(--checkbox-color-checked-hover-light);\n border-color: var(--checkbox-border-color-checked-hover-light);\n }\n &:active .checkbox-checked {\n background-color: var(--checkbox-background-checked-active-light);\n color: var(--checkbox-color-checked-active-light);\n border-color: var(--checkbox-border-color-checked-active-light);\n }\n}\n.checkbox-disabled {\n color: var(--checkbox-color-checked-disabled-light);\n cursor: not-allowed;\n\n .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-light);\n color: var(--checkbox-color-default-disabled-light);\n border-color: var(--checkbox-border-color-default-disabled-light);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-light);\n color: var(--checkbox-color-default-disabled-light);\n border-color: var(--checkbox-border-color-default-disabled-light);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-light);\n color: var(--checkbox-color-checked-disabled-light);\n border-color: var(--checkbox-border-color-checked-disabled-light);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-light);\n color: var(--checkbox-color-checked-disabled-light);\n border-color: var(--checkbox-border-color-checked-disabled-light);\n }\n}\n.checkbox-input-icon {\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n padding: 1px;\n}\n.checkbox-label {\n padding: var(--checkbox-label-padding);\n line-height: var(--checkbox-line-height);\n}\ninput {\n margin: 0;\n opacity: 0;\n position: absolute;\n pointer-events: none;\n}\n[data-whatinput=\"keyboard\"] .checkbox-focused {\n border-color: var(--checkbox-focus-outline-color-light) !important;\n}\n\n[dark-mode=\"true\"] {\n .checkbox {\n .checkbox-input {\n background-color: var(--checkbox-background-default-default-dark);\n color: var(--checkbox-color-default-default-dark);\n border-color: var(--checkbox-border-color-default-default-dark);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-hover-dark);\n color: var(--checkbox-color-default-hover-dark);\n border-color: var(--checkbox-border-color-default-hover-dark);\n }\n &:active .checkbox-input {\n background-color: var(--checkbox-background-default-active-dark);\n color: var(--checkbox-color-default-active-dark);\n border-color: var(--checkbox-border-color-default-active-dark);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-default-dark);\n color: var(--checkbox-color-checked-default-dark);\n border-color: var(--checkbox-border-color-checked-default-dark);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-hover-dark);\n color: var(--checkbox-color-checked-hover-dark);\n border-color: var(--checkbox-border-color-checked-hover-dark);\n }\n &:active .checkbox-checked {\n background-color: var(--checkbox-background-checked-active-dark);\n color: var(--checkbox-color-checked-active-dark);\n border-color: var(--checkbox-border-color-checked-active-dark);\n }\n }\n .checkbox-disabled {\n color: var(--checkbox-color-checked-disabled-dark);\n\n .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-dark);\n color: var(--checkbox-color-default-disabled-dark);\n border-color: var(--checkbox-border-color-default-disabled-dark);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-dark);\n color: var(--checkbox-color-default-disabled-dark);\n border-color: var(--checkbox-border-color-default-disabled-dark);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-dark);\n color: var(--checkbox-color-checked-disabled-dark);\n border-color: var(--checkbox-border-color-checked-disabled-dark);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-dark);\n color: var(--checkbox-color-checked-disabled-dark);\n border-color: var(--checkbox-border-color-checked-disabled-dark);\n }\n }\n\n [data-whatinput=\"keyboard\"] .checkbox-focused {\n border-color: var(--checkbox-focus-outline-color-dark) !important;\n }\n}\n</style>\n"],"names":["props","__props","emit","__emit","defaultAttrs","useAttrs","slots","useSlots","focused","ref","internalChecked","isChecked","computed","attrs","event","without","watch","checked","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_hoisted_2","_createVNode","FontAwesomeIcon","faCheck","_mergeProps","$event","_openBlock","_hoisted_4","_renderSlot","_ctx","_hoisted_5","_toDisplayString"],"mappings":"49BAoDA,MAAMA,EAAQC,EAkBRC,EAAOC,EACPC,EAAeC,EAAAA,SAAQ,EACvBC,EAAQC,EAAAA,SAAQ,EAChBC,EAAUC,EAAAA,IAAI,EAAK,EACnBC,EAAkBD,EAAAA,IAAIT,EAAM,OAAO,EAEnCW,EAAYC,EAAAA,SAAS,IACnB,OAAOF,EAAgB,OAAU,UAC1BA,EAAgB,MAEhBA,EAAgB,MAAM,SAASV,EAAM,KAAK,CAExD,EACKa,EAAQD,EAAAA,SAAS,IAAM,CACzB,IAAIC,EAAQ,OAAO,OAAO,CAAA,EAAIT,EAAc,CAExC,QAAQU,EAAO,CAGXZ,EAAK,QAASY,CAAK,EACfA,EAAM,MAAQ,UAEdZ,EAAK,OAAO,EACR,OAAOQ,EAAgB,OAAS,UAChCA,EAAgB,MAAQ,CAACA,EAAgB,MAErCA,EAAgB,MAAM,SAASV,EAAM,KAAK,EAC1CU,EAAgB,MAAQK,EACpBL,EAAgB,MAChBV,EAAM,KAClC,EAEwBU,EAAgB,MAAM,KAAKV,EAAM,KAAK,EAItD,CACR,CAAK,EAED,cAAOa,EAAM,MACNA,CACX,CAAC,EAEDG,OAAAA,EAAAA,MACI,IAAMhB,EAAM,QACXiB,GAAY,CACTP,EAAgB,MAAQO,CAC5B,CACJ,EACAD,EAAAA,MACI,IAAMN,EAAgB,MACtB,IAAM,CAEEA,EAAgB,OAASV,EAAM,SAC/BE,EAAK,iBAAkBQ,EAAgB,KAAK,CAEpD,CACJ,wBA9HIQ,EAAAA,mBAsCQ,QAAA,CArCH,MAAKC,EAAAA,eAAA,iCAA+DlB,EAAA,QAAQ,EAAgBmB,EAAAA,MAAAhB,CAAA,EAAa,QAKzG,MAAOgB,EAAAA,MAAAhB,CAAA,EAAa,QAErBiB,EAAAA,mBAyBM,MAzBNC,EAyBM,CAxBFD,EAAAA,mBAuBO,OAAA,CAtBF,MAAKF,EAAAA,eAAA,sCAA4GR,EAAA,yBAAuDH,EAAA,WAQzKe,cAIEH,EAAAA,MAAAI,EAAAA,eAAA,EAAA,CAHE,MAAM,sBACL,KAAMJ,EAAAA,MAAAK,SAAA,EACP,cAAY,0CAEhBJ,EAAAA,mBAQE,QARFK,EAAAA,WAQEb,EAAA,MAPe,sCACJH,EAAe,MAAAiB,GACxB,KAAK,WACJ,MAAO1B,EAAA,MACP,SAAUA,EAAA,SACV,uBAAOO,EAAA,MAAO,IACd,0BAAUA,EAAA,MAAO,oCALTE,EAAA,KAAe,UASzBU,EAAAA,MAAAd,CAAA,EAAM,SAAjBsB,EAAAA,YAAAV,EAAAA,mBAEM,MAFNW,EAEM,CADFC,EAAAA,WAAQC,EAAA,OAAA,UAAA,CAAA,EAAA,OAAA,EAAA,oBAEZb,EAAAA,mBAAsD,OAAtDc,EAAsDC,EAAAA,gBAAfhC,EAAA,KAAK,EAAA,CAAA"}
1	+ {"version":3,"file":"checkbox.umd.js","names":[],"sources":["../src/Checkbox.vue"],"sourcesContent":["<template>\n <label\n :class=\"[\n 'checkbox',\n { 'checkbox-disabled': disabled },\n defaultAttrs.class,\n ]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n {\n 'checkbox-checked': isChecked,\n 'checkbox-focused': focused,\n },\n ]\"\n >\n <font-awesome-icon\n class=\"checkbox-input-icon\"\n :icon=\"faCheck\"\n aria-hidden=\"true\"\n />\n <input\n v-bind=\"attrs\"\n v-model=\"internalChecked\"\n type=\"checkbox\"\n :value=\"value\"\n :disabled=\"disabled\"\n @focus=\"focused = true\"\n @focusout=\"focused = false\"\n />\n </span>\n </div>\n <div v-if=\"slots.default\" class=\"checkbox-label\">\n <slot />\n </div>\n <span v-else class=\"checkbox-label\">{{ label }}</span>\n </label>\n</template>\n\n<script setup>\nimport { useAttrs, useSlots, ref, computed, watch } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\n\ndefineOptions({\n name: \"Checkbox\",\n inheritAttrs: false,\n});\nconst props = defineProps({\n checked: {\n type: [Boolean, Array],\n default: false,\n },\n value: {\n type: [String, Object],\n default: \"\",\n },\n label: {\n type: String,\n default: \"\",\n },\n disabled: {\n type: Boolean,\n default: false,\n },\n});\nconst emit = defineEmits([\"update:checked\"]);\nconst defaultAttrs = useAttrs();\nconst slots = useSlots();\nconst focused = ref(false);\nconst internalChecked = ref(props.checked);\n\nconst isChecked = computed(() => {\n if (typeof internalChecked.value === \"boolean\") {\n return internalChecked.value;\n } else {\n return internalChecked.value.includes(props.value);\n }\n});\nconst attrs = computed(() => {\n let attrs = Object.assign({}, defaultAttrs, {\n // Pressing the enter key gets handled like a click.\n onKeyup(event) {\n // Don't add the keyup and click events to defineEmits, otherwise it won't work.\n // eslint-disable-next-line vue/require-explicit-emits\n emit(\"keyup\", event);\n if (event.key === \"Enter\") {\n // eslint-disable-next-line vue/require-explicit-emits\n emit(\"click\");\n if (typeof internalChecked.value == \"boolean\") {\n internalChecked.value = !internalChecked.value;\n } else {\n if (internalChecked.value.includes(props.value)) {\n internalChecked.value = without(\n internalChecked.value,\n props.value,\n );\n } else {\n internalChecked.value.push(props.value);\n }\n }\n }\n },\n });\n // Only assign events to the input element, classes are assigned to the outer label.\n delete attrs.class;\n return attrs;\n});\n\nwatch(\n () => props.checked,\n (checked) => {\n internalChecked.value = checked;\n },\n);\nwatch(\n () => internalChecked.value,\n () => {\n // Only emit the update:checked event if the mutation came from within the checkbox component.\n if (internalChecked.value != props.checked) {\n emit(\"update:checked\", internalChecked.value);\n }\n },\n);\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style lang=\"less\" scoped>\n.checkbox {\n position: relative;\n display: flex;\n padding: var(--checkbox-padding);\n\n .checkbox-input-container {\n padding: 5px;\n }\n .checkbox-input {\n display: flex;\n align-items: center;\n justify-content: center;\n height: var(--checkbox-height);\n width: var(--checkbox-width);\n box-sizing: border-box;\n border-radius: var(--checkbox-border-radius);\n border: var(--checkbox-border-width) solid;\n background-color: var(--checkbox-background-default-default-light);\n color: var(--checkbox-color-default-default-light);\n border-color: var(--checkbox-border-color-default-default-light);\n transition: var(--checkbox-transition);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-hover-light);\n color: var(--checkbox-color-default-hover-light);\n border-color: var(--checkbox-border-color-default-hover-light);\n }\n &:active .checkbox-input {\n background-color: var(--checkbox-background-default-active-light);\n color: var(--checkbox-color-default-active-light);\n border-color: var(--checkbox-border-color-default-active-light);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-default-light);\n color: var(--checkbox-color-checked-default-light);\n border-color: var(--checkbox-border-color-checked-default-light);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-hover-light);\n color: var(--checkbox-color-checked-hover-light);\n border-color: var(--checkbox-border-color-checked-hover-light);\n }\n &:active .checkbox-checked {\n background-color: var(--checkbox-background-checked-active-light);\n color: var(--checkbox-color-checked-active-light);\n border-color: var(--checkbox-border-color-checked-active-light);\n }\n}\n.checkbox-disabled {\n color: var(--checkbox-color-checked-disabled-light);\n cursor: not-allowed;\n\n .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-light);\n color: var(--checkbox-color-default-disabled-light);\n border-color: var(--checkbox-border-color-default-disabled-light);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-light);\n color: var(--checkbox-color-default-disabled-light);\n border-color: var(--checkbox-border-color-default-disabled-light);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-light);\n color: var(--checkbox-color-checked-disabled-light);\n border-color: var(--checkbox-border-color-checked-disabled-light);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-light);\n color: var(--checkbox-color-checked-disabled-light);\n border-color: var(--checkbox-border-color-checked-disabled-light);\n }\n}\n.checkbox-input-icon {\n height: 100%;\n width: 100%;\n box-sizing: border-box;\n padding: 1px;\n}\n.checkbox-label {\n padding: var(--checkbox-label-padding);\n line-height: var(--checkbox-line-height);\n}\ninput {\n margin: 0;\n opacity: 0;\n position: absolute;\n pointer-events: none;\n}\n[data-whatinput=\"keyboard\"] .checkbox-focused {\n border-color: var(--checkbox-focus-outline-color-light) !important;\n}\n\n[dark-mode=\"true\"] {\n .checkbox {\n .checkbox-input {\n background-color: var(--checkbox-background-default-default-dark);\n color: var(--checkbox-color-default-default-dark);\n border-color: var(--checkbox-border-color-default-default-dark);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-hover-dark);\n color: var(--checkbox-color-default-hover-dark);\n border-color: var(--checkbox-border-color-default-hover-dark);\n }\n &:active .checkbox-input {\n background-color: var(--checkbox-background-default-active-dark);\n color: var(--checkbox-color-default-active-dark);\n border-color: var(--checkbox-border-color-default-active-dark);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-default-dark);\n color: var(--checkbox-color-checked-default-dark);\n border-color: var(--checkbox-border-color-checked-default-dark);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-hover-dark);\n color: var(--checkbox-color-checked-hover-dark);\n border-color: var(--checkbox-border-color-checked-hover-dark);\n }\n &:active .checkbox-checked {\n background-color: var(--checkbox-background-checked-active-dark);\n color: var(--checkbox-color-checked-active-dark);\n border-color: var(--checkbox-border-color-checked-active-dark);\n }\n }\n .checkbox-disabled {\n color: var(--checkbox-color-checked-disabled-dark);\n\n .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-dark);\n color: var(--checkbox-color-default-disabled-dark);\n border-color: var(--checkbox-border-color-default-disabled-dark);\n }\n &:hover .checkbox-input {\n background-color: var(--checkbox-background-default-disabled-dark);\n color: var(--checkbox-color-default-disabled-dark);\n border-color: var(--checkbox-border-color-default-disabled-dark);\n }\n\n .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-dark);\n color: var(--checkbox-color-checked-disabled-dark);\n border-color: var(--checkbox-border-color-checked-disabled-dark);\n }\n &:hover .checkbox-checked {\n background-color: var(--checkbox-background-checked-disabled-dark);\n color: var(--checkbox-color-checked-disabled-dark);\n border-color: var(--checkbox-border-color-checked-disabled-dark);\n }\n }\n\n [data-whatinput=\"keyboard\"] .checkbox-focused {\n border-color: var(--checkbox-focus-outline-color-dark) !important;\n }\n}\n</style>\n"],"mappings":"i/CAoDA,IAAM,EAAQ,EAkBR,EAAO,EACP,GAAA,EAAA,EAAA,WAAyB,CACzB,GAAA,EAAA,EAAA,WAAkB,CAClB,GAAA,EAAA,EAAA,KAAc,GAAM,CACpB,GAAA,EAAA,EAAA,KAAsB,EAAM,QAAQ,CAEpC,GAAA,EAAA,EAAA,cACE,OAAO,EAAgB,OAAU,UAC1B,EAAgB,MAEhB,EAAgB,MAAM,SAAS,EAAM,MAAM,CAExD,CACI,GAAA,EAAA,EAAA,cAAuB,CACzB,IAAI,EAAQ,OAAO,OAAO,EAAE,CAAE,EAAc,CAExC,QAAQ,EAAO,CAGX,EAAK,QAAS,EAAM,CAChB,EAAM,MAAQ,UAEd,EAAK,QAAQ,CACT,OAAO,EAAgB,OAAS,UAChC,EAAgB,MAAQ,CAAC,EAAgB,MAErC,EAAgB,MAAM,SAAS,EAAM,MAAM,CAC3C,EAAgB,OAAA,EAAA,EAAA,SACZ,EAAgB,MAChB,EAAM,MACT,CAED,EAAgB,MAAM,KAAK,EAAM,MAAM,GAK1D,CAAC,CAGF,OADA,OAAO,EAAM,MACN,GACT,QAEF,EAAA,EAAA,WACU,EAAM,QACX,GAAY,CACT,EAAgB,MAAQ,GAE/B,EACD,EAAA,EAAA,WACU,EAAgB,UAChB,CAEE,EAAgB,OAAS,EAAM,SAC/B,EAAK,iBAAkB,EAAgB,MAAM,EAGxD,oDAxFW,QAAA,CArCH,OAAA,EAAA,EAAA,gBAAK,iCAA+D,EAAA,SAAQ,aAAgB,EAAY,CAAC,QAKzG,OAAA,EAAA,EAAA,OAAO,EAAY,CAAC,iCA2Bf,MAzBN,EAyBM,EAAA,EAAA,EAAA,oBADK,OAAA,CAtBF,OAAA,EAAA,EAAA,gBAAK,CAAA,iBAAA,oBAA4G,EAAA,yBAAuD,EAAA,yCAYvK,EAAA,gBAAA,CAAA,CAHE,MAAM,sBACL,MAAA,EAAA,EAAA,OAAM,EAAA,QAAO,CACd,cAAY,uEAUd,SAAA,EAAA,EAAA,YAPU,EAOV,MAPe,iCACJ,EAAe,MAAA,EACxB,KAAK,WACJ,MAAO,EAAA,MACP,SAAU,EAAA,SACV,QAAK,AAAA,EAAA,KAAA,GAAE,EAAA,MAAO,GACd,WAAQ,AAAA,EAAA,KAAA,GAAE,EAAA,MAAO,mCALT,EAAA,MAAe,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,EAAA,EAAA,EAAA,OASzB,EAAK,CAAC,UAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAEX,MAFN,EAEM,EAAA,EAAA,EAAA,YADM,EAAA,OAAA,UAAA,EAAA,CAAA,IAAA,GAAA,GAAA,CAAA,CAAA,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAE0C,OAAtD,GAAA,EAAA,EAAA,iBAAuC,EAAA,MAAK,CAAA,EAAA,EAAA,CAAA,GAAA,EAAA"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@gospore/checkbox",
-    "version": "1.0.52",
+    "version": "1.0.54",
     "description": "",
     "author": "Gospore",
     "type": "module",
@@ -34,10 +34,10 @@
         "lodash": "^4.17.23"
     },
     "devDependencies": {
-        "@vitejs/plugin-vue": "^6.0.4",
+        "@vitejs/plugin-vue": "^6.0.5",
         "unplugin-vue-macros": "^2.14.5",
-        "vite": "^7.3.1"
+        "vite": "^8.0.3"
     },
-    "gitHead": "fe035411adbe677e90edfafe951aa96099e9dc83",
+    "gitHead": "84bf3ca214dc2a13595f8754e1a87d5a06a3e86e",
     "types": "./dist/index.d.ts"
 }