@gospore/checkbox 1.0.37 → 1.0.38

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 (8) hide show
  1. package/dist/checkbox.cjs.js +1 -1
  2. package/dist/checkbox.cjs.js.map +1 -1
  3. package/dist/checkbox.css +1 -1
  4. package/dist/checkbox.es.js +30 -20
  5. package/dist/checkbox.es.js.map +1 -1
  6. package/dist/checkbox.umd.js +1 -1
  7. package/dist/checkbox.umd.js.map +1 -1
  8. package/package.json +2 -2
package/dist/checkbox.cjs.js CHANGED
@@ -1,2 +1,2 @@
1
- "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"),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(),i=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]=d=>t.value=d),type:"checkbox",value:c.value,disabled:c.disabled,onFocus:o[1]||(o[1]=d=>r.value=!0),onFocusout:o[2]||(o[2]=d=>r.value=!1)}),null,16,x),[[e.vModelCheckbox,t.value]])],2)]),e.unref(i).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-1ddd6aa6"]]);exports.Checkbox=B;
1
+ "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"),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-5e06ef17"]]);exports.Checkbox=B;
2
2
  //# sourceMappingURL=checkbox.cjs.js.map
package/dist/checkbox.cjs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox.cjs.js","sources":["../src/Checkbox.vue"],"sourcesContent":["<template>\n <label\n :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n { 'checkbox-checked': isChecked, 'checkbox-focused': focused },\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\n v-if=\"slots.default\"\n class=\"checkbox-label\"\n >\n <slot />\n </div>\n <span\n v-else\n class=\"checkbox-label\"\n >{{ 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\";\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(internalChecked.value, props.value);\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) !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</style>\n"],"names":["props","__props","emit","__emit","defaultAttrs","useAttrs","slots","useSlots","focused","ref","internalChecked","isChecked","computed","attrs","event","without","watch","checked"],"mappings":"urBAmDA,MAAMA,EAAQC,EAkBRC,EAAOC,EACPC,EAAeC,EAAAA,SAAU,EACzBC,EAAQC,EAAAA,SAAU,EAClBC,EAAUC,EAAG,IAAC,EAAK,EACnBC,EAAkBD,EAAAA,IAAIT,EAAM,OAAO,EAEnCW,EAAYC,EAAQ,SAAC,IACrB,OAAOF,EAAgB,OAAU,UAC5BA,EAAgB,MAEhBA,EAAgB,MAAM,SAASV,EAAM,KAAK,CAEpD,EACKa,EAAQD,EAAQ,SAAC,IAAM,CAC3B,IAAIC,EAAQ,OAAO,OAAO,CAAA,EAAIT,EAAc,CAE1C,QAAQU,EAAO,CAGbZ,EAAK,QAASY,CAAK,EACfA,EAAM,MAAQ,UAEhBZ,EAAK,OAAO,EACR,OAAOQ,EAAgB,OAAS,UAClCA,EAAgB,MAAQ,CAACA,EAAgB,MAErCA,EAAgB,MAAM,SAASV,EAAM,KAAK,EAC5CU,EAAgB,MAAQK,EAAQL,EAAgB,MAAOV,EAAM,KAAK,EAElEU,EAAgB,MAAM,KAAKV,EAAM,KAAK,EAI7C,CACL,CAAG,EAED,cAAOa,EAAM,MACNA,CACT,CAAC,EAEDG,OAAAA,EAAK,MACH,IAAMhB,EAAM,QACXiB,GAAY,CACXP,EAAgB,MAAQO,CACzB,CACH,EACAD,EAAK,MACH,IAAMN,EAAgB,MACtB,IAAM,CAEAA,EAAgB,OAASV,EAAM,SACjCE,EAAK,iBAAkBQ,EAAgB,KAAK,CAE/C,CACH"}
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\";\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) !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</style>\n"],"names":["props","__props","emit","__emit","defaultAttrs","useAttrs","slots","useSlots","focused","ref","internalChecked","isChecked","computed","attrs","event","without","watch","checked"],"mappings":"urBAoDA,MAAMA,EAAQC,EAkBRC,EAAOC,EACPC,EAAeC,EAAAA,SAAU,EACzBC,EAAQC,EAAAA,SAAU,EAClBC,EAAUC,EAAG,IAAC,EAAK,EACnBC,EAAkBD,EAAAA,IAAIT,EAAM,OAAO,EAEnCW,EAAYC,EAAQ,SAAC,IACnB,OAAOF,EAAgB,OAAU,UAC1BA,EAAgB,MAEhBA,EAAgB,MAAM,SAASV,EAAM,KAAK,CAExD,EACKa,EAAQD,EAAQ,SAAC,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,KACT,EAEDU,EAAgB,MAAM,KAAKV,EAAM,KAAK,EAIrD,CACT,CAAK,EAED,cAAOa,EAAM,MACNA,CACX,CAAC,EAEDG,OAAAA,EAAK,MACD,IAAMhB,EAAM,QACXiB,GAAY,CACTP,EAAgB,MAAQO,CAC3B,CACL,EACAD,EAAK,MACD,IAAMN,EAAgB,MACtB,IAAM,CAEEA,EAAgB,OAASV,EAAM,SAC/BE,EAAK,iBAAkBQ,EAAgB,KAAK,CAEnD,CACL"}
package/dist/checkbox.css CHANGED
@@ -1 +1 @@
1
- :root{--checkbox-background-default-default-light: transparent;--checkbox-background-default-default-dark: transparent;--checkbox-background-default-hover-light: var(--go-color-n20);--checkbox-background-default-hover-dark: var(--go-color-dn50);--checkbox-background-default-active-light: var(--go-color-b200);--checkbox-background-default-active-dark: rgba(var(--go-color-b200-rgb), .2);--checkbox-background-default-disabled-light: var(--go-color-n20);--checkbox-background-default-disabled-dark: var(--go-color-dn50);--checkbox-background-checked-default-light: var(--go-color-b400);--checkbox-background-checked-default-dark: var(--go-color-b100);--checkbox-background-checked-hover-light: var(--go-color-b400);--checkbox-background-checked-hover-dark: var(--go-color-b200);--checkbox-background-checked-active-light: var(--go-color-b200);--checkbox-background-checked-active-dark: rgba(var(--go-color-b200-rgb), .2);--checkbox-background-checked-disabled-light: var(--go-color-n20);--checkbox-background-checked-disabled-dark: var(--go-color-dn50);--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(--go-color-b200);--checkbox-color-default-active-dark: transparent;--checkbox-color-default-disabled-light: var(--go-color-n20);--checkbox-color-default-disabled-dark: var(--go-color-dn50);--checkbox-color-checked-default-light: var(--go-color-n0);--checkbox-color-checked-default-dark: var(--go-color-dn30);--checkbox-color-checked-hover-light: var(--go-color-n0);--checkbox-color-checked-hover-dark: var(--go-color-dn30);--checkbox-color-checked-active-light: var(--go-color-b500);--checkbox-color-checked-active-dark: var(--go-color-b100);--checkbox-color-checked-disabled-light: var(--go-color-n70);--checkbox-color-checked-disabled-dark: var(--go-color-dn100);--checkbox-border-color-default-default-light: var(--go-color-n40);--checkbox-border-color-default-default-dark: var(--go-color-dn70);--checkbox-border-color-default-hover-light: var(--go-color-n40);--checkbox-border-color-default-hover-dark: var(--go-color-dn70);--checkbox-border-color-default-active-light: var(--go-color-b200);--checkbox-border-color-default-active-dark: transparent;--checkbox-border-color-default-disabled-light: var(--go-color-n20);--checkbox-border-color-default-disabled-dark: var(--go-color-dn50);--checkbox-border-color-checked-default-light: var(--go-color-b400);--checkbox-border-color-checked-default-dark: var(--go-color-b100);--checkbox-border-color-checked-hover-light: var(--go-color-b400);--checkbox-border-color-checked-hover-dark: var(--go-color-b200);--checkbox-border-color-checked-active-light: var(--go-color-b200);--checkbox-border-color-checked-active-dark: transparent;--checkbox-border-color-checked-disabled-light: var(--go-color-n20);--checkbox-border-color-checked-disabled-dark: var(--go-color-dn50);--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: var(--focus-outline-color)}.checkbox[data-v-1ddd6aa6]{position:relative;display:flex;padding:var(--checkbox-padding)}.checkbox .checkbox-input-container[data-v-1ddd6aa6]{padding:5px}.checkbox .checkbox-input[data-v-1ddd6aa6]{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-1ddd6aa6]{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-1ddd6aa6]{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-1ddd6aa6]{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-1ddd6aa6]{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-1ddd6aa6]{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-1ddd6aa6]{color:var(--checkbox-color-checked-disabled-light);cursor:not-allowed}.checkbox-disabled .checkbox-input[data-v-1ddd6aa6],.checkbox-disabled:hover .checkbox-input[data-v-1ddd6aa6]{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-1ddd6aa6],.checkbox-disabled:hover .checkbox-checked[data-v-1ddd6aa6]{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-1ddd6aa6]{height:100%;width:100%;box-sizing:border-box;padding:1px}.checkbox-label[data-v-1ddd6aa6]{padding:var(--checkbox-label-padding);line-height:var(--checkbox-line-height)}input[data-v-1ddd6aa6]{margin:0;opacity:0;position:absolute;pointer-events:none}[data-whatinput=keyboard] .checkbox-focused[data-v-1ddd6aa6]{border-color:var(--checkbox-focus-outline-color)!important}[dark-mode=true] .checkbox .checkbox-input[data-v-1ddd6aa6]{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-1ddd6aa6]{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-1ddd6aa6]{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-1ddd6aa6]{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-1ddd6aa6]{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-1ddd6aa6]{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-1ddd6aa6]{color:var(--checkbox-color-checked-disabled-dark)}[dark-mode=true] .checkbox-disabled .checkbox-input[data-v-1ddd6aa6],[dark-mode=true] .checkbox-disabled:hover .checkbox-input[data-v-1ddd6aa6]{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-1ddd6aa6],[dark-mode=true] .checkbox-disabled:hover .checkbox-checked[data-v-1ddd6aa6]{background-color:var(--checkbox-background-checked-disabled-dark);color:var(--checkbox-color-checked-disabled-dark);border-color:var(--checkbox-border-color-checked-disabled-dark)}
1
+ :root{--checkbox-background-default-default-light: transparent;--checkbox-background-default-default-dark: transparent;--checkbox-background-default-hover-light: var(--go-color-n20);--checkbox-background-default-hover-dark: var(--go-color-dn50);--checkbox-background-default-active-light: var(--go-color-b200);--checkbox-background-default-active-dark: rgba( var(--go-color-b200-rgb), .2 );--checkbox-background-default-disabled-light: var(--go-color-n20);--checkbox-background-default-disabled-dark: var(--go-color-dn50);--checkbox-background-checked-default-light: var(--go-color-b400);--checkbox-background-checked-default-dark: var(--go-color-b100);--checkbox-background-checked-hover-light: var(--go-color-b400);--checkbox-background-checked-hover-dark: var(--go-color-b200);--checkbox-background-checked-active-light: var(--go-color-b200);--checkbox-background-checked-active-dark: rgba( var(--go-color-b200-rgb), .2 );--checkbox-background-checked-disabled-light: var(--go-color-n20);--checkbox-background-checked-disabled-dark: var(--go-color-dn50);--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(--go-color-b200);--checkbox-color-default-active-dark: transparent;--checkbox-color-default-disabled-light: var(--go-color-n20);--checkbox-color-default-disabled-dark: var(--go-color-dn50);--checkbox-color-checked-default-light: var(--go-color-n0);--checkbox-color-checked-default-dark: var(--go-color-dn30);--checkbox-color-checked-hover-light: var(--go-color-n0);--checkbox-color-checked-hover-dark: var(--go-color-dn30);--checkbox-color-checked-active-light: var(--go-color-b500);--checkbox-color-checked-active-dark: var(--go-color-b100);--checkbox-color-checked-disabled-light: var(--go-color-n70);--checkbox-color-checked-disabled-dark: var(--go-color-dn100);--checkbox-border-color-default-default-light: var(--go-color-n40);--checkbox-border-color-default-default-dark: var(--go-color-dn70);--checkbox-border-color-default-hover-light: var(--go-color-n40);--checkbox-border-color-default-hover-dark: var(--go-color-dn70);--checkbox-border-color-default-active-light: var(--go-color-b200);--checkbox-border-color-default-active-dark: transparent;--checkbox-border-color-default-disabled-light: var(--go-color-n20);--checkbox-border-color-default-disabled-dark: var(--go-color-dn50);--checkbox-border-color-checked-default-light: var(--go-color-b400);--checkbox-border-color-checked-default-dark: var(--go-color-b100);--checkbox-border-color-checked-hover-light: var(--go-color-b400);--checkbox-border-color-checked-hover-dark: var(--go-color-b200);--checkbox-border-color-checked-active-light: var(--go-color-b200);--checkbox-border-color-checked-active-dark: transparent;--checkbox-border-color-checked-disabled-light: var(--go-color-n20);--checkbox-border-color-checked-disabled-dark: var(--go-color-dn50);--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: var(--focus-outline-color)}.checkbox[data-v-5e06ef17]{position:relative;display:flex;padding:var(--checkbox-padding)}.checkbox .checkbox-input-container[data-v-5e06ef17]{padding:5px}.checkbox .checkbox-input[data-v-5e06ef17]{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-5e06ef17]{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-5e06ef17]{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-5e06ef17]{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-5e06ef17]{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-5e06ef17]{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-5e06ef17]{color:var(--checkbox-color-checked-disabled-light);cursor:not-allowed}.checkbox-disabled .checkbox-input[data-v-5e06ef17],.checkbox-disabled:hover .checkbox-input[data-v-5e06ef17]{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-5e06ef17],.checkbox-disabled:hover .checkbox-checked[data-v-5e06ef17]{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-5e06ef17]{height:100%;width:100%;box-sizing:border-box;padding:1px}.checkbox-label[data-v-5e06ef17]{padding:var(--checkbox-label-padding);line-height:var(--checkbox-line-height)}input[data-v-5e06ef17]{margin:0;opacity:0;position:absolute;pointer-events:none}[data-whatinput=keyboard] .checkbox-focused[data-v-5e06ef17]{border-color:var(--checkbox-focus-outline-color)!important}[dark-mode=true] .checkbox .checkbox-input[data-v-5e06ef17]{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-5e06ef17]{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-5e06ef17]{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-5e06ef17]{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-5e06ef17]{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-5e06ef17]{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-5e06ef17]{color:var(--checkbox-color-checked-disabled-dark)}[dark-mode=true] .checkbox-disabled .checkbox-input[data-v-5e06ef17],[dark-mode=true] .checkbox-disabled:hover .checkbox-input[data-v-5e06ef17]{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-5e06ef17],[dark-mode=true] .checkbox-disabled:hover .checkbox-checked[data-v-5e06ef17]{background-color:var(--checkbox-background-checked-disabled-dark);color:var(--checkbox-color-checked-disabled-dark);border-color:var(--checkbox-border-color-checked-disabled-dark)}
package/dist/checkbox.es.js CHANGED
@@ -2,8 +2,8 @@ import { useAttrs as C, useSlots as g, ref as k, computed as b, watch as h, crea
2
2
  import { FontAwesomeIcon as j } from "@fortawesome/vue-fontawesome";
3
3
  import { faCheck as E } from "@fortawesome/free-solid-svg-icons";
4
4
  import F from "lodash/without";
5
- const V = (a, u) => {
6
- const t = a.__vccOpts || a;
5
+ const V = (o, u) => {
6
+ const t = o.__vccOpts || o;
7
7
  for (const [s, c] of u)
8
8
  t[s] = c;
9
9
  return t;
@@ -37,35 +37,45 @@ const V = (a, u) => {
37
37
  }
38
38
  },
39
39
  emits: ["update:checked"],
40
- setup(a, { emit: u }) {
41
- const t = a, s = u, c = C(), m = g(), d = k(!1), e = k(t.checked), x = b(() => typeof e.value == "boolean" ? e.value : e.value.includes(t.value)), y = b(() => {
42
- let o = Object.assign({}, c, {
40
+ setup(o, { emit: u }) {
41
+ 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(() => {
42
+ let a = Object.assign({}, c, {
43
43
  // Pressing the enter key gets handled like a click.
44
44
  onKeyup(l) {
45
- 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));
45
+ s("keyup", l), l.key === "Enter" && (s("click"), typeof e.value == "boolean" ? e.value = !e.value : e.value.includes(t.value) ? e.value = F(
46
+ e.value,
47
+ t.value
48
+ ) : e.value.push(t.value));
46
49
  }
47
50
  });
48
- return delete o.class, o;
51
+ return delete a.class, a;
49
52
  });
50
53
  return h(
51
54
  () => t.checked,
52
- (o) => {
53
- e.value = o;
55
+ (a) => {
56
+ e.value = a;
54
57
  }
55
58
  ), h(
56
59
  () => e.value,
57
60
  () => {
58
61
  e.value != t.checked && s("update:checked", e.value);
59
62
  }
60
- ), (o, l) => (v(), r("label", {
61
- class: p(["checkbox", { "checkbox-disabled": a.disabled }, n(c).class]),
63
+ ), (a, l) => (v(), r("label", {
64
+ class: p([
65
+ "checkbox",
66
+ { "checkbox-disabled": o.disabled },
67
+ n(c).class
68
+ ]),
62
69
  title: n(c).title
63
70
  }, [
64
71
  f("div", D, [
65
72
  f("span", {
66
73
  class: p([
67
74
  "checkbox-input",
68
- { "checkbox-checked": x.value, "checkbox-focused": d.value }
75
+ {
76
+ "checkbox-checked": x.value,
77
+ "checkbox-focused": i.value
78
+ }
69
79
  ])
70
80
  }, [
71
81
  _(n(j), {
@@ -74,23 +84,23 @@ const V = (a, u) => {
74
84
  "aria-hidden": "true"
75
85
  }, null, 8, ["icon"]),
76
86
  A(f("input", S(y.value, {
77
- "onUpdate:modelValue": l[0] || (l[0] = (i) => e.value = i),
87
+ "onUpdate:modelValue": l[0] || (l[0] = (d) => e.value = d),
78
88
  type: "checkbox",
79
- value: a.value,
80
- disabled: a.disabled,
81
- onFocus: l[1] || (l[1] = (i) => d.value = !0),
82
- onFocusout: l[2] || (l[2] = (i) => d.value = !1)
89
+ value: o.value,
90
+ disabled: o.disabled,
91
+ onFocus: l[1] || (l[1] = (d) => i.value = !0),
92
+ onFocusout: l[2] || (l[2] = (d) => i.value = !1)
83
93
  }), null, 16, I), [
84
94
  [w, e.value]
85
95
  ])
86
96
  ], 2)
87
97
  ]),
88
98
  n(m).default ? (v(), r("div", N, [
89
- B(o.$slots, "default", {}, void 0, !0)
90
- ])) : (v(), r("span", z, O(a.label), 1))
99
+ B(a.$slots, "default", {}, void 0, !0)
100
+ ])) : (v(), r("span", z, O(o.label), 1))
91
101
  ], 10, $));
92
102
  }
93
- }), G = /* @__PURE__ */ V(K, [["__scopeId", "data-v-1ddd6aa6"]]);
103
+ }), G = /* @__PURE__ */ V(K, [["__scopeId", "data-v-5e06ef17"]]);
94
104
  export {
95
105
  G as Checkbox
96
106
  };
package/dist/checkbox.es.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox.es.js","sources":["../src/Checkbox.vue"],"sourcesContent":["<template>\n <label\n :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n { 'checkbox-checked': isChecked, 'checkbox-focused': focused },\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\n v-if=\"slots.default\"\n class=\"checkbox-label\"\n >\n <slot />\n </div>\n <span\n v-else\n class=\"checkbox-label\"\n >{{ 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\";\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(internalChecked.value, props.value);\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) !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</style>\n"],"names":["props","__props","emit","__emit","defaultAttrs","useAttrs","slots","useSlots","focused","ref","internalChecked","isChecked","computed","attrs","event","without","watch","checked"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA,UAAMA,IAAQC,GAkBRC,IAAOC,GACPC,IAAeC,EAAU,GACzBC,IAAQC,EAAU,GAClBC,IAAUC,EAAI,EAAK,GACnBC,IAAkBD,EAAIT,EAAM,OAAO,GAEnCW,IAAYC,EAAS,MACrB,OAAOF,EAAgB,SAAU,YAC5BA,EAAgB,QAEhBA,EAAgB,MAAM,SAASV,EAAM,KAAK,CAEpD,GACKa,IAAQD,EAAS,MAAM;AAC3B,UAAIC,IAAQ,OAAO,OAAO,CAAA,GAAIT,GAAc;AAAA;AAAA,QAE1C,QAAQU,GAAO;AAGb,UAAAZ,EAAK,SAASY,CAAK,GACfA,EAAM,QAAQ,YAEhBZ,EAAK,OAAO,GACR,OAAOQ,EAAgB,SAAS,YAClCA,EAAgB,QAAQ,CAACA,EAAgB,QAErCA,EAAgB,MAAM,SAASV,EAAM,KAAK,IAC5CU,EAAgB,QAAQK,EAAQL,EAAgB,OAAOV,EAAM,KAAK,IAElEU,EAAgB,MAAM,KAAKV,EAAM,KAAK;AAAA,QAI7C;AAAA,MACL,CAAG;AAED,oBAAOa,EAAM,OACNA;AAAA,IACT,CAAC;AAED,WAAAG;AAAA,MACE,MAAMhB,EAAM;AAAA,MACZ,CAACiB,MAAY;AACX,QAAAP,EAAgB,QAAQO;AAAA,MACzB;AAAA,IACH,GACAD;AAAA,MACE,MAAMN,EAAgB;AAAA,MACtB,MAAM;AAEJ,QAAIA,EAAgB,SAASV,EAAM,WACjCE,EAAK,kBAAkBQ,EAAgB,KAAK;AAAA,MAE/C;AAAA,IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
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\";\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) !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</style>\n"],"names":["props","__props","emit","__emit","defaultAttrs","useAttrs","slots","useSlots","focused","ref","internalChecked","isChecked","computed","attrs","event","without","watch","checked"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,UAAMA,IAAQC,GAkBRC,IAAOC,GACPC,IAAeC,EAAU,GACzBC,IAAQC,EAAU,GAClBC,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,UACT,IAEDU,EAAgB,MAAM,KAAKV,EAAM,KAAK;AAAA,QAIrD;AAAA,MACT,CAAK;AAED,oBAAOa,EAAM,OACNA;AAAA,IACX,CAAC;AAED,WAAAG;AAAA,MACI,MAAMhB,EAAM;AAAA,MACZ,CAACiB,MAAY;AACT,QAAAP,EAAgB,QAAQO;AAAA,MAC3B;AAAA,IACL,GACAD;AAAA,MACI,MAAMN,EAAgB;AAAA,MACtB,MAAM;AAEF,QAAIA,EAAgB,SAASV,EAAM,WAC/BE,EAAK,kBAAkBQ,EAAgB,KAAK;AAAA,MAEnD;AAAA,IACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/checkbox.umd.js CHANGED
@@ -1,2 +1,2 @@
1
- (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")):typeof define=="function"&&define.amd?define(["exports","vue","@fortawesome/vue-fontawesome","@fortawesome/free-solid-svg-icons","lodash/without"],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[n,i]of d)s[n]=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,n=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 a=Object.assign({},i,{onKeyup(l){n("keyup",l),l.key==="Enter"&&(n("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 a.class,a});return e.watch(()=>s.checked,a=>{t.value=a}),e.watch(()=>t.value,()=>{t.value!=s.checked&&n("update:checked",t.value)}),(a,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(a.$slots,"default",{},void 0,!0)])):(e.openBlock(),e.createElementBlock("span",v,e.toDisplayString(c.label),1))],10,b))}}),[["__scopeId","data-v-1ddd6aa6"]]);o.Checkbox=w,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
1
+ (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")):typeof define=="function"&&define.amd?define(["exports","vue","@fortawesome/vue-fontawesome","@fortawesome/free-solid-svg-icons","lodash/without"],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-5e06ef17"]]);o.Checkbox=w,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
2
2
  //# sourceMappingURL=checkbox.umd.js.map
package/dist/checkbox.umd.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"checkbox.umd.js","sources":["../src/Checkbox.vue"],"sourcesContent":["<template>\n <label\n :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n { 'checkbox-checked': isChecked, 'checkbox-focused': focused },\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\n v-if=\"slots.default\"\n class=\"checkbox-label\"\n >\n <slot />\n </div>\n <span\n v-else\n class=\"checkbox-label\"\n >{{ 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\";\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(internalChecked.value, props.value);\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) !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</style>\n"],"names":["props","__props","emit","__emit","defaultAttrs","useAttrs","slots","useSlots","focused","ref","internalChecked","isChecked","computed","attrs","event","without","vue","checked"],"mappings":"q9BAmDA,MAAMA,EAAQC,EAkBRC,EAAOC,EACPC,EAAeC,EAAAA,SAAU,EACzBC,EAAQC,EAAAA,SAAU,EAClBC,EAAUC,EAAG,IAAC,EAAK,EACnBC,EAAkBD,EAAAA,IAAIT,EAAM,OAAO,EAEnCW,EAAYC,EAAQ,SAAC,IACrB,OAAOF,EAAgB,OAAU,UAC5BA,EAAgB,MAEhBA,EAAgB,MAAM,SAASV,EAAM,KAAK,CAEpD,EACKa,EAAQD,EAAQ,SAAC,IAAM,CAC3B,IAAIC,EAAQ,OAAO,OAAO,CAAA,EAAIT,EAAc,CAE1C,QAAQU,EAAO,CAGbZ,EAAK,QAASY,CAAK,EACfA,EAAM,MAAQ,UAEhBZ,EAAK,OAAO,EACR,OAAOQ,EAAgB,OAAS,UAClCA,EAAgB,MAAQ,CAACA,EAAgB,MAErCA,EAAgB,MAAM,SAASV,EAAM,KAAK,EAC5CU,EAAgB,MAAQK,EAAQL,EAAgB,MAAOV,EAAM,KAAK,EAElEU,EAAgB,MAAM,KAAKV,EAAM,KAAK,EAI7C,CACL,CAAG,EAED,cAAOa,EAAM,MACNA,CACT,CAAC,EAEI,OAAAG,EAAA,MACH,IAAMhB,EAAM,QACXiB,GAAY,CACXP,EAAgB,MAAQO,CACzB,CACH,EACKD,EAAA,MACH,IAAMN,EAAgB,MACtB,IAAM,CAEAA,EAAgB,OAASV,EAAM,SACjCE,EAAK,iBAAkBQ,EAAgB,KAAK,CAE/C,CACH"}
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\";\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) !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</style>\n"],"names":["props","__props","emit","__emit","defaultAttrs","useAttrs","slots","useSlots","focused","ref","internalChecked","isChecked","computed","attrs","event","without","vue","checked"],"mappings":"q9BAoDA,MAAMA,EAAQC,EAkBRC,EAAOC,EACPC,EAAeC,EAAAA,SAAU,EACzBC,EAAQC,EAAAA,SAAU,EAClBC,EAAUC,EAAG,IAAC,EAAK,EACnBC,EAAkBD,EAAAA,IAAIT,EAAM,OAAO,EAEnCW,EAAYC,EAAQ,SAAC,IACnB,OAAOF,EAAgB,OAAU,UAC1BA,EAAgB,MAEhBA,EAAgB,MAAM,SAASV,EAAM,KAAK,CAExD,EACKa,EAAQD,EAAQ,SAAC,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,KACT,EAEDU,EAAgB,MAAM,KAAKV,EAAM,KAAK,EAIrD,CACT,CAAK,EAED,cAAOa,EAAM,MACNA,CACX,CAAC,EAEI,OAAAG,EAAA,MACD,IAAMhB,EAAM,QACXiB,GAAY,CACTP,EAAgB,MAAQO,CAC3B,CACL,EACKD,EAAA,MACD,IAAMN,EAAgB,MACtB,IAAM,CAEEA,EAAgB,OAASV,EAAM,SAC/BE,EAAK,iBAAkBQ,EAAgB,KAAK,CAEnD,CACL"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gospore/checkbox",
3
- "version": "1.0.37",
3
+ "version": "1.0.38",
4
4
  "description": "",
5
5
  "author": "Gospore",
6
6
  "type": "module",
@@ -36,5 +36,5 @@
36
36
  "unplugin-vue-macros": "^2.14.2",
37
37
  "vite": "^6.1.0"
38
38
  },
39
- "gitHead": "48e62096f0adcdc62fd5dbc8b0b52ebc2ab00a2e"
39
+ "gitHead": "dc65f48d33f0f8ef11869e239b0f04a6e07d0e9a"
40
40
  }