@gospore/checkbox 1.0.20 → 1.0.21

package/dist/checkbox.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),v=require("@fortawesome/vue-fontawesome"),f=require("@fortawesome/free-solid-svg-icons"),b=require("lodash/without");const k=(c,o)=>{const l=c.__vccOpts||c;for(const[u,s]of o)l[u]=s;return l},h=["value","disabled"],p={class:"checkbox-label"},_=e.defineComponent({name:"Checkbox",inheritAttrs:!1}),y=Object.assign(_,{props:{checked:{type:[Boolean,Array],default:!1},value:{type:String,default:""},label:{type:String,default:""},disabled:{type:Boolean,default:!1}},emits:["update:checked"],setup(c,{emit:o}){const l=c,u=e.useAttrs(),s=e.ref(!1),t=e.ref(l.checked),d=e.computed(()=>typeof t.value=="boolean"?t.value:t.value.includes(l.value)),i=e.computed(()=>{let n=Object.assign({},u,{onKeyup(a){o("keyup",a),a.key==="Enter"&&(o("click"),typeof t.value=="boolean"?t.value=!t.value:t.value.includes(l.value)?t.value=b(t.value,l.value):t.value.push(l.value))}});return delete n.class,n});return e.watch(()=>l.checked,n=>{t.value=n}),e.watch(()=>t.value,()=>{t.value!=l.checked&&o("update:checked",t.value)}),(n,a)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["checkbox",{"checkbox-disabled":c.disabled},e.unref(u).class])},[e.createElementVNode("span",{class:e.normalizeClass(["checkbox-input",{"checkbox-checked":e.unref(d),"checkbox-focused":s.value}])},[e.createVNode(e.unref(v.FontAwesomeIcon),{class:"checkbox-input-icon",icon:e.unref(f.faCheck),"aria-hidden":"true"},null,8,["icon"]),e.withDirectives(e.createElementVNode("input",e.mergeProps(e.unref(i),{"onUpdate:modelValue":a[0]||(a[0]=r=>t.value=r),type:"checkbox",value:c.value,disabled:c.disabled,onFocus:a[1]||(a[1]=r=>s.value=!0),onFocusout:a[2]||(a[2]=r=>s.value=!1)}),null,16,h),[[e.vModelCheckbox,t.value]])],2),e.createElementVNode("span",p,e.toDisplayString(c.label),1)],2))}}),x=k(y,[["__scopeId","data-v-86921f23"]]);exports.Checkbox=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),v=require("@fortawesome/vue-fontawesome"),f=require("@fortawesome/free-solid-svg-icons"),b=require("lodash/without");const k=(a,c)=>{const l=a.__vccOpts||a;for(const[s,n]of c)l[s]=n;return l},h=["title"],p=["value","disabled"],_={class:"checkbox-label"},y=e.defineComponent({name:"Checkbox",inheritAttrs:!1}),x=Object.assign(y,{props:{checked:{type:[Boolean,Array],default:!1},value:{type:String,default:""},label:{type:String,default:""},disabled:{type:Boolean,default:!1}},emits:["update:checked"],setup(a,{emit:c}){const l=a,s=e.useAttrs(),n=e.ref(!1),t=e.ref(l.checked),d=e.computed(()=>typeof t.value=="boolean"?t.value:t.value.includes(l.value)),i=e.computed(()=>{let u=Object.assign({},s,{onKeyup(o){c("keyup",o),o.key==="Enter"&&(c("click"),typeof t.value=="boolean"?t.value=!t.value:t.value.includes(l.value)?t.value=b(t.value,l.value):t.value.push(l.value))}});return delete u.class,u});return e.watch(()=>l.checked,u=>{t.value=u}),e.watch(()=>t.value,()=>{t.value!=l.checked&&c("update:checked",t.value)}),(u,o)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["checkbox",{"checkbox-disabled":a.disabled},e.unref(s).class]),title:e.unref(s).title},[e.createElementVNode("span",{class:e.normalizeClass(["checkbox-input",{"checkbox-checked":e.unref(d),"checkbox-focused":n.value}])},[e.createVNode(e.unref(v.FontAwesomeIcon),{class:"checkbox-input-icon",icon:e.unref(f.faCheck),"aria-hidden":"true"},null,8,["icon"]),e.withDirectives(e.createElementVNode("input",e.mergeProps(e.unref(i),{"onUpdate:modelValue":o[0]||(o[0]=r=>t.value=r),type:"checkbox",value:a.value,disabled:a.disabled,onFocus:o[1]||(o[1]=r=>n.value=!0),onFocusout:o[2]||(o[2]=r=>n.value=!1)}),null,16,p),[[e.vModelCheckbox,t.value]])],2),e.createElementVNode("span",_,e.toDisplayString(a.label),1)],10,h))}}),m=k(x,[["__scopeId","data-v-9fe7d611"]]);exports.Checkbox=m;
 //# sourceMappingURL=checkbox.cjs.js.map

package/dist/checkbox.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.cjs.js","sources":["../src/Checkbox.vue"],"sourcesContent":["<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <label\n    :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n  >\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    <span class=\"checkbox-label\">{{ label }}</span>\n  </label>\n</template>\n\n<script setup>\nimport { useAttrs, 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,\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 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  align-items: center;\n  padding: var(--checkbox-padding);\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}\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":["defaultAttrs","useAttrs","focused","ref","internalChecked","props","isChecked","computed","attrs","event","emit","without","watch","checked"],"mappings":"6WAoCc,CACZ,KAAM,WACN,aAAc,EAChB,CAAA,6NAoBMA,EAAeC,EAAQ,SAAA,EACvBC,EAAUC,EAAAA,IAAI,EAAK,EACnBC,EAAkBD,EAAG,IAACE,EAAM,OAAO,EAEnCC,EAAYC,EAAQ,SAAC,IACrB,OAAOH,EAAgB,OAAU,UAC5BA,EAAgB,MAEhBA,EAAgB,MAAM,SAASC,EAAM,KAAK,CAEpD,EACKG,EAAQD,EAAQ,SAAC,IAAM,CAC3B,IAAIC,EAAQ,OAAO,OAAO,CAAA,EAAIR,EAAc,CAE1C,QAAQS,EAAO,CAGbC,EAAK,QAASD,CAAK,EACfA,EAAM,MAAQ,UAEhBC,EAAK,OAAO,EACR,OAAON,EAAgB,OAAS,UAClCA,EAAgB,MAAQ,CAACA,EAAgB,MAErCA,EAAgB,MAAM,SAASC,EAAM,KAAK,EAC5CD,EAAgB,MAAQO,EAAQP,EAAgB,MAAOC,EAAM,KAAK,EAElED,EAAgB,MAAM,KAAKC,EAAM,KAAK,EAI7C,CACL,CAAG,EAED,cAAOG,EAAM,MACNA,CACT,CAAC,EAEDI,OAAAA,EAAK,MACH,IAAMP,EAAM,QACXQ,GAAY,CACXT,EAAgB,MAAQS,CACzB,CACH,EACAD,EAAK,MACH,IAAMR,EAAgB,MACtB,IAAM,CAEAA,EAAgB,OAASC,EAAM,SACjCK,EAAK,iBAAkBN,EAAgB,KAAK,CAE/C,CACH"}
+{"version":3,"file":"checkbox.cjs.js","sources":["../src/Checkbox.vue"],"sourcesContent":["<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <label\n    :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n    :title=\"defaultAttrs.title\"\n  >\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    <span class=\"checkbox-label\">{{ label }}</span>\n  </label>\n</template>\n\n<script setup>\nimport { useAttrs, 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,\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 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  align-items: center;\n  padding: var(--checkbox-padding);\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}\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":["defaultAttrs","useAttrs","focused","ref","internalChecked","props","isChecked","computed","attrs","event","emit","without","watch","checked"],"mappings":"yXAqCc,CACZ,KAAM,WACN,aAAc,EAChB,CAAA,6NAoBMA,EAAeC,EAAQ,SAAA,EACvBC,EAAUC,EAAAA,IAAI,EAAK,EACnBC,EAAkBD,EAAG,IAACE,EAAM,OAAO,EAEnCC,EAAYC,EAAQ,SAAC,IACrB,OAAOH,EAAgB,OAAU,UAC5BA,EAAgB,MAEhBA,EAAgB,MAAM,SAASC,EAAM,KAAK,CAEpD,EACKG,EAAQD,EAAQ,SAAC,IAAM,CAC3B,IAAIC,EAAQ,OAAO,OAAO,CAAA,EAAIR,EAAc,CAE1C,QAAQS,EAAO,CAGbC,EAAK,QAASD,CAAK,EACfA,EAAM,MAAQ,UAEhBC,EAAK,OAAO,EACR,OAAON,EAAgB,OAAS,UAClCA,EAAgB,MAAQ,CAACA,EAAgB,MAErCA,EAAgB,MAAM,SAASC,EAAM,KAAK,EAC5CD,EAAgB,MAAQO,EAAQP,EAAgB,MAAOC,EAAM,KAAK,EAElED,EAAgB,MAAM,KAAKC,EAAM,KAAK,EAI7C,CACL,CAAG,EAED,cAAOG,EAAM,MACNA,CACT,CAAC,EAEDI,OAAAA,EAAK,MACH,IAAMP,EAAM,QACXQ,GAAY,CACXT,EAAgB,MAAQS,CACzB,CACH,EACAD,EAAK,MACH,IAAMR,EAAgB,MACtB,IAAM,CAEAA,EAAgB,OAASC,EAAM,SACjCK,EAAK,iBAAkBN,EAAgB,KAAK,CAE/C,CACH"}

package/dist/checkbox.es.js

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

package/dist/checkbox.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.es.js","sources":["../src/Checkbox.vue"],"sourcesContent":["<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <label\n    :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n  >\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    <span class=\"checkbox-label\">{{ label }}</span>\n  </label>\n</template>\n\n<script setup>\nimport { useAttrs, 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,\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 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  align-items: center;\n  padding: var(--checkbox-padding);\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}\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":["defaultAttrs","useAttrs","focused","ref","internalChecked","props","isChecked","computed","attrs","event","emit","without","watch","checked"],"mappings":";;;;;;;;;qEAoCc;AAAA,EACZ,MAAM;AAAA,EACN,cAAc;AAChB,CAAA;;;;;;;;;;;;;;;;;;;;;iBAoBMA,IAAeC,EAAQ,GACvBC,IAAUC,EAAI,EAAK,GACnBC,IAAkBD,EAAIE,EAAM,OAAO,GAEnCC,IAAYC,EAAS,MACrB,OAAOH,EAAgB,SAAU,YAC5BA,EAAgB,QAEhBA,EAAgB,MAAM,SAASC,EAAM,KAAK,CAEpD,GACKG,IAAQD,EAAS,MAAM;AAC3B,UAAIC,IAAQ,OAAO,OAAO,CAAA,GAAIR,GAAc;AAAA;AAAA,QAE1C,QAAQS,GAAO;AAGb,UAAAC,EAAK,SAASD,CAAK,GACfA,EAAM,QAAQ,YAEhBC,EAAK,OAAO,GACR,OAAON,EAAgB,SAAS,YAClCA,EAAgB,QAAQ,CAACA,EAAgB,QAErCA,EAAgB,MAAM,SAASC,EAAM,KAAK,IAC5CD,EAAgB,QAAQO,EAAQP,EAAgB,OAAOC,EAAM,KAAK,IAElED,EAAgB,MAAM,KAAKC,EAAM,KAAK;AAAA,QAI7C;AAAA,MACL,CAAG;AAED,oBAAOG,EAAM,OACNA;AAAA,IACT,CAAC;AAED,WAAAI;AAAA,MACE,MAAMP,EAAM;AAAA,MACZ,CAACQ,MAAY;AACX,QAAAT,EAAgB,QAAQS;AAAA,MACzB;AAAA,IACH,GACAD;AAAA,MACE,MAAMR,EAAgB;AAAA,MACtB,MAAM;AAEJ,QAAIA,EAAgB,SAASC,EAAM,WACjCK,EAAK,kBAAkBN,EAAgB,KAAK;AAAA,MAE/C;AAAA,IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"checkbox.es.js","sources":["../src/Checkbox.vue"],"sourcesContent":["<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <label\n    :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n    :title=\"defaultAttrs.title\"\n  >\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    <span class=\"checkbox-label\">{{ label }}</span>\n  </label>\n</template>\n\n<script setup>\nimport { useAttrs, 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,\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 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  align-items: center;\n  padding: var(--checkbox-padding);\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}\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":["defaultAttrs","useAttrs","focused","ref","internalChecked","props","isChecked","computed","attrs","event","emit","without","watch","checked"],"mappings":";;;;;;;;;oFAqCc;AAAA,EACZ,MAAM;AAAA,EACN,cAAc;AAChB,CAAA;;;;;;;;;;;;;;;;;;;;;iBAoBMA,IAAeC,EAAQ,GACvBC,IAAUC,EAAI,EAAK,GACnBC,IAAkBD,EAAIE,EAAM,OAAO,GAEnCC,IAAYC,EAAS,MACrB,OAAOH,EAAgB,SAAU,YAC5BA,EAAgB,QAEhBA,EAAgB,MAAM,SAASC,EAAM,KAAK,CAEpD,GACKG,IAAQD,EAAS,MAAM;AAC3B,UAAIC,IAAQ,OAAO,OAAO,CAAA,GAAIR,GAAc;AAAA;AAAA,QAE1C,QAAQS,GAAO;AAGb,UAAAC,EAAK,SAASD,CAAK,GACfA,EAAM,QAAQ,YAEhBC,EAAK,OAAO,GACR,OAAON,EAAgB,SAAS,YAClCA,EAAgB,QAAQ,CAACA,EAAgB,QAErCA,EAAgB,MAAM,SAASC,EAAM,KAAK,IAC5CD,EAAgB,QAAQO,EAAQP,EAAgB,OAAOC,EAAM,KAAK,IAElED,EAAgB,MAAM,KAAKC,EAAM,KAAK;AAAA,QAI7C;AAAA,MACL,CAAG;AAED,oBAAOG,EAAM,OACNA;AAAA,IACT,CAAC;AAED,WAAAI;AAAA,MACE,MAAMP,EAAM;AAAA,MACZ,CAACQ,MAAY;AACX,QAAAT,EAAgB,QAAQS;AAAA,MACzB;AAAA,IACH,GACAD;AAAA,MACE,MAAMR,EAAgB;AAAA,MACtB,MAAM;AAEJ,QAAIA,EAAgB,SAASC,EAAM,WACjCK,EAAK,kBAAkBN,EAAgB,KAAK;AAAA,MAE/C;AAAA,IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/checkbox.umd.js

@@ -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")):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,r,f,h){"use strict";const v="",w="",p=(l,a)=>{const s=l.__vccOpts||l;for(const[d,c]of a)s[d]=c;return s},k=["value","disabled"],b={class:"checkbox-label"},m=e.defineComponent({name:"Checkbox",inheritAttrs:!1}),_=p(Object.assign(m,{props:{checked:{type:[Boolean,Array],default:!1},value:{type:String,default:""},label:{type:String,default:""},disabled:{type:Boolean,default:!1}},emits:["update:checked"],setup(l,{emit:a}){const s=l,d=e.useAttrs(),c=e.ref(!1),t=e.ref(s.checked),x=e.computed(()=>typeof t.value=="boolean"?t.value:t.value.includes(s.value)),y=e.computed(()=>{let u=Object.assign({},d,{onKeyup(n){a("keyup",n),n.key==="Enter"&&(a("click"),typeof t.value=="boolean"?t.value=!t.value:t.value.includes(s.value)?t.value=h(t.value,s.value):t.value.push(s.value))}});return delete u.class,u});return e.watch(()=>s.checked,u=>{t.value=u}),e.watch(()=>t.value,()=>{t.value!=s.checked&&a("update:checked",t.value)}),(u,n)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["checkbox",{"checkbox-disabled":l.disabled},e.unref(d).class])},[e.createElementVNode("span",{class:e.normalizeClass(["checkbox-input",{"checkbox-checked":e.unref(x),"checkbox-focused":c.value}])},[e.createVNode(e.unref(r.FontAwesomeIcon),{class:"checkbox-input-icon",icon:e.unref(f.faCheck),"aria-hidden":"true"},null,8,["icon"]),e.withDirectives(e.createElementVNode("input",e.mergeProps(e.unref(y),{"onUpdate:modelValue":n[0]||(n[0]=i=>t.value=i),type:"checkbox",value:l.value,disabled:l.disabled,onFocus:n[1]||(n[1]=i=>c.value=!0),onFocusout:n[2]||(n[2]=i=>c.value=!1)}),null,16,k),[[e.vModelCheckbox,t.value]])],2),e.createElementVNode("span",b,e.toDisplayString(l.label),1)],2))}}),[["__scopeId","data-v-86921f23"]]);o.Checkbox=_,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
+(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,r,f,h){"use strict";const w="",C="",p=(l,a)=>{const s=l.__vccOpts||l;for(const[c,i]of a)s[c]=i;return s},k=["title"],b=["value","disabled"],m={class:"checkbox-label"},_=e.defineComponent({name:"Checkbox",inheritAttrs:!1}),x=p(Object.assign(_,{props:{checked:{type:[Boolean,Array],default:!1},value:{type:String,default:""},label:{type:String,default:""},disabled:{type:Boolean,default:!1}},emits:["update:checked"],setup(l,{emit:a}){const s=l,c=e.useAttrs(),i=e.ref(!1),t=e.ref(s.checked),y=e.computed(()=>typeof t.value=="boolean"?t.value:t.value.includes(s.value)),v=e.computed(()=>{let d=Object.assign({},c,{onKeyup(n){a("keyup",n),n.key==="Enter"&&(a("click"),typeof t.value=="boolean"?t.value=!t.value:t.value.includes(s.value)?t.value=h(t.value,s.value):t.value.push(s.value))}});return delete d.class,d});return e.watch(()=>s.checked,d=>{t.value=d}),e.watch(()=>t.value,()=>{t.value!=s.checked&&a("update:checked",t.value)}),(d,n)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["checkbox",{"checkbox-disabled":l.disabled},e.unref(c).class]),title:e.unref(c).title},[e.createElementVNode("span",{class:e.normalizeClass(["checkbox-input",{"checkbox-checked":e.unref(y),"checkbox-focused":i.value}])},[e.createVNode(e.unref(r.FontAwesomeIcon),{class:"checkbox-input-icon",icon:e.unref(f.faCheck),"aria-hidden":"true"},null,8,["icon"]),e.withDirectives(e.createElementVNode("input",e.mergeProps(e.unref(v),{"onUpdate:modelValue":n[0]||(n[0]=u=>t.value=u),type:"checkbox",value:l.value,disabled:l.disabled,onFocus:n[1]||(n[1]=u=>i.value=!0),onFocusout:n[2]||(n[2]=u=>i.value=!1)}),null,16,b),[[e.vModelCheckbox,t.value]])],2),e.createElementVNode("span",m,e.toDisplayString(l.label),1)],10,k))}}),[["__scopeId","data-v-9fe7d611"]]);o.Checkbox=x,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
 //# sourceMappingURL=checkbox.umd.js.map

package/dist/checkbox.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.umd.js","sources":["../src/Checkbox.vue"],"sourcesContent":["<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <label\n    :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n  >\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    <span class=\"checkbox-label\">{{ label }}</span>\n  </label>\n</template>\n\n<script setup>\nimport { useAttrs, 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,\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 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  align-items: center;\n  padding: var(--checkbox-padding);\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}\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":["defaultAttrs","useAttrs","focused","ref","internalChecked","props","isChecked","computed","attrs","event","emit","without","vue","checked"],"mappings":"6oBAoCc,CACZ,KAAM,WACN,aAAc,EAChB,CAAA,+NAoBMA,EAAeC,EAAQ,SAAA,EACvBC,EAAUC,EAAAA,IAAI,EAAK,EACnBC,EAAkBD,EAAG,IAACE,EAAM,OAAO,EAEnCC,EAAYC,EAAQ,SAAC,IACrB,OAAOH,EAAgB,OAAU,UAC5BA,EAAgB,MAEhBA,EAAgB,MAAM,SAASC,EAAM,KAAK,CAEpD,EACKG,EAAQD,EAAQ,SAAC,IAAM,CAC3B,IAAIC,EAAQ,OAAO,OAAO,CAAA,EAAIR,EAAc,CAE1C,QAAQS,EAAO,CAGbC,EAAK,QAASD,CAAK,EACfA,EAAM,MAAQ,UAEhBC,EAAK,OAAO,EACR,OAAON,EAAgB,OAAS,UAClCA,EAAgB,MAAQ,CAACA,EAAgB,MAErCA,EAAgB,MAAM,SAASC,EAAM,KAAK,EAC5CD,EAAgB,MAAQO,EAAQP,EAAgB,MAAOC,EAAM,KAAK,EAElED,EAAgB,MAAM,KAAKC,EAAM,KAAK,EAI7C,CACL,CAAG,EAED,cAAOG,EAAM,MACNA,CACT,CAAC,EAEI,OAAAI,EAAA,MACH,IAAMP,EAAM,QACXQ,GAAY,CACXT,EAAgB,MAAQS,CACzB,CACH,EACKD,EAAA,MACH,IAAMR,EAAgB,MACtB,IAAM,CAEAA,EAAgB,OAASC,EAAM,SACjCK,EAAK,iBAAkBN,EAAgB,KAAK,CAE/C,CACH"}
+{"version":3,"file":"checkbox.umd.js","sources":["../src/Checkbox.vue"],"sourcesContent":["<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <label\n    :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n    :title=\"defaultAttrs.title\"\n  >\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    <span class=\"checkbox-label\">{{ label }}</span>\n  </label>\n</template>\n\n<script setup>\nimport { useAttrs, 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,\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 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  align-items: center;\n  padding: var(--checkbox-padding);\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}\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":["defaultAttrs","useAttrs","focused","ref","internalChecked","props","isChecked","computed","attrs","event","emit","without","vue","checked"],"mappings":"ypBAqCc,CACZ,KAAM,WACN,aAAc,EAChB,CAAA,+NAoBMA,EAAeC,EAAQ,SAAA,EACvBC,EAAUC,EAAAA,IAAI,EAAK,EACnBC,EAAkBD,EAAG,IAACE,EAAM,OAAO,EAEnCC,EAAYC,EAAQ,SAAC,IACrB,OAAOH,EAAgB,OAAU,UAC5BA,EAAgB,MAEhBA,EAAgB,MAAM,SAASC,EAAM,KAAK,CAEpD,EACKG,EAAQD,EAAQ,SAAC,IAAM,CAC3B,IAAIC,EAAQ,OAAO,OAAO,CAAA,EAAIR,EAAc,CAE1C,QAAQS,EAAO,CAGbC,EAAK,QAASD,CAAK,EACfA,EAAM,MAAQ,UAEhBC,EAAK,OAAO,EACR,OAAON,EAAgB,OAAS,UAClCA,EAAgB,MAAQ,CAACA,EAAgB,MAErCA,EAAgB,MAAM,SAASC,EAAM,KAAK,EAC5CD,EAAgB,MAAQO,EAAQP,EAAgB,MAAOC,EAAM,KAAK,EAElED,EAAgB,MAAM,KAAKC,EAAM,KAAK,EAI7C,CACL,CAAG,EAED,cAAOG,EAAM,MACNA,CACT,CAAC,EAEI,OAAAI,EAAA,MACH,IAAMP,EAAM,QACXQ,GAAY,CACXT,EAAgB,MAAQS,CACzB,CACH,EACKD,EAAA,MACH,IAAMR,EAAgB,MACtB,IAAM,CAEAA,EAAgB,OAASC,EAAM,SACjCK,EAAK,iBAAkBN,EAAgB,KAAK,CAE/C,CACH"}

package/dist/style.css

@@ -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: var(--size-0) var(--size-4);--checkbox-label-padding: 2px 10px;--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-86921f23]{position:relative;display:flex;align-items:center;padding:var(--checkbox-padding)}.checkbox .checkbox-input[data-v-86921f23]{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-86921f23]{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-86921f23]{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-86921f23]{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-86921f23]{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-86921f23]{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-86921f23]{color:var(--checkbox-color-checked-disabled-light);cursor:not-allowed}.checkbox-disabled .checkbox-input[data-v-86921f23],.checkbox-disabled:hover .checkbox-input[data-v-86921f23]{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-86921f23],.checkbox-disabled:hover .checkbox-checked[data-v-86921f23]{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-86921f23]{height:100%;width:100%;box-sizing:border-box;padding:1px}.checkbox-label[data-v-86921f23]{padding:var(--checkbox-label-padding)}input[data-v-86921f23]{margin:0;opacity:0;position:absolute;pointer-events:none}[data-whatinput=keyboard] .checkbox-focused[data-v-86921f23]{border-color:var(--checkbox-focus-outline-color)!important}[dark-mode=true] .checkbox .checkbox-input[data-v-86921f23]{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-86921f23]{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-86921f23]{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-86921f23]{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-86921f23]{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-86921f23]{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-86921f23]{color:var(--checkbox-color-checked-disabled-dark)}[dark-mode=true] .checkbox-disabled .checkbox-input[data-v-86921f23],[dark-mode=true] .checkbox-disabled:hover .checkbox-input[data-v-86921f23]{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-86921f23],[dark-mode=true] .checkbox-disabled:hover .checkbox-checked[data-v-86921f23]{background-color:var(--checkbox-background-checked-disabled-dark);color:var(--checkbox-color-checked-disabled-dark);border-color:var(--checkbox-border-color-checked-disabled-dark)}
+: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: var(--size-0) var(--size-4);--checkbox-label-padding: 2px 10px;--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-9fe7d611]{position:relative;display:flex;align-items:center;padding:var(--checkbox-padding)}.checkbox .checkbox-input[data-v-9fe7d611]{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-9fe7d611]{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-9fe7d611]{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-9fe7d611]{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-9fe7d611]{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-9fe7d611]{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-9fe7d611]{color:var(--checkbox-color-checked-disabled-light);cursor:not-allowed}.checkbox-disabled .checkbox-input[data-v-9fe7d611],.checkbox-disabled:hover .checkbox-input[data-v-9fe7d611]{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-9fe7d611],.checkbox-disabled:hover .checkbox-checked[data-v-9fe7d611]{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-9fe7d611]{height:100%;width:100%;box-sizing:border-box;padding:1px}.checkbox-label[data-v-9fe7d611]{padding:var(--checkbox-label-padding)}input[data-v-9fe7d611]{margin:0;opacity:0;position:absolute;pointer-events:none}[data-whatinput=keyboard] .checkbox-focused[data-v-9fe7d611]{border-color:var(--checkbox-focus-outline-color)!important}[dark-mode=true] .checkbox .checkbox-input[data-v-9fe7d611]{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-9fe7d611]{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-9fe7d611]{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-9fe7d611]{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-9fe7d611]{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-9fe7d611]{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-9fe7d611]{color:var(--checkbox-color-checked-disabled-dark)}[dark-mode=true] .checkbox-disabled .checkbox-input[data-v-9fe7d611],[dark-mode=true] .checkbox-disabled:hover .checkbox-input[data-v-9fe7d611]{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-9fe7d611],[dark-mode=true] .checkbox-disabled:hover .checkbox-checked[data-v-9fe7d611]{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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gospore/checkbox",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "description": "",
   "author": "Gospore",
   "type": "module",
@@ -35,5 +35,5 @@
     "unplugin-vue-macros": "^1.11.2",
     "vite": "^4.2.1"
   },
-  "gitHead": "ccd4ad8a69dec78bb8aecdaf2fe53103384b2683"
+  "gitHead": "3866ae37a7452afdc075b1fa082971539a465cc5"
 }