@gospore/checkbox 1.0.30 → 1.0.32

package/dist/checkbox.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),k=require("@fortawesome/vue-fontawesome"),b=require("@fortawesome/free-solid-svg-icons"),f=require("lodash/without");const h=(c,s)=>{const l=c.__vccOpts||c;for(const[n,u]of s)l[n]=u;return l},p=["title"],_={class:"checkbox-input-container"},y=["value","disabled"],x={key:0,class:"checkbox-label"},m={key:1,class:"checkbox-label"},g=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:s}){const l=c,n=e.useAttrs(),u=e.useSlots(),r=e.ref(!1),t=e.ref(l.checked),i=e.computed(()=>typeof t.value=="boolean"?t.value:t.value.includes(l.value)),v=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=f(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",_,[e.createElementVNode("span",{class:e.normalizeClass(["checkbox-input",{"checkbox-checked":i.value,"checkbox-focused":r.value}])},[e.createVNode(e.unref(k.FontAwesomeIcon),{class:"checkbox-input-icon",icon:e.unref(b.faCheck),"aria-hidden":"true"},null,8,["icon"]),e.withDirectives(e.createElementVNode("input",e.mergeProps(v.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,y),[[e.vModelCheckbox,t.value]])],2)]),e.unref(u).default?(e.openBlock(),e.createElementBlock("div",x,[e.renderSlot(a.$slots,"default",{},void 0,!0)])):(e.openBlock(),e.createElementBlock("span",m,e.toDisplayString(c.label),1))],10,p))}}),C=h(g,[["__scopeId","data-v-2a4214a3"]]);exports.Checkbox=C;
+"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-2a4214a3"]]);exports.Checkbox=B;
 //# 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    :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 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(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":["defaultAttrs","useAttrs","slots","useSlots","focused","ref","internalChecked","props","isChecked","computed","attrs","event","emit","without","watch","checked"],"mappings":"usBAiEMA,EAAeC,EAAQ,SAAA,EACvBC,EAAQC,EAAQ,SAAA,EAChBC,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,EAAIV,EAAc,CAE1C,QAAQW,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    <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 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(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":"urBA8CA,MAAMA,EAAQC,EAkBRC,EAAOC,EACPC,EAAeC,EAAQ,SAAA,EACvBC,EAAQC,EAAQ,SAAA,EAChBC,EAAUC,EAAAA,IAAI,EAAK,EACnBC,EAAkBD,EAAG,IAACT,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"}

package/dist/checkbox.es.js

@@ -1,19 +1,19 @@
-import { useAttrs as y, useSlots as m, ref as b, computed as f, watch as h, openBlock as r, createElementBlock as v, normalizeClass as p, unref as n, createElementVNode as k, createVNode as C, withDirectives as g, mergeProps as A, vModelCheckbox as S, renderSlot as w, toDisplayString as B } from "vue";
-import { FontAwesomeIcon as O } from "@fortawesome/vue-fontawesome";
-import { faCheck as j } from "@fortawesome/free-solid-svg-icons";
-import E from "lodash/without";
-const F = (a, s) => {
+import { useAttrs as C, useSlots as g, ref as k, computed as b, watch as h, openBlock as r, createElementBlock as v, normalizeClass as p, unref as n, createElementVNode as f, createVNode as _, withDirectives as A, mergeProps as S, vModelCheckbox as w, renderSlot as B, toDisplayString as O } from "vue";
+import { FontAwesomeIcon as j } from "@fortawesome/vue-fontawesome";
+import { faCheck as E } from "@fortawesome/free-solid-svg-icons";
+import F from "lodash/without";
+const V = (a, u) => {
   const t = a.__vccOpts || a;
-  for (const [c, u] of s)
-    t[c] = u;
+  for (const [s, c] of u)
+    t[s] = c;
   return t;
-}, V = ["title"], $ = { class: "checkbox-input-container" }, D = ["value", "disabled"], I = {
+}, $ = ["title"], D = { class: "checkbox-input-container" }, I = ["value", "disabled"], N = {
   key: 0,
   class: "checkbox-label"
-}, N = {
+}, z = {
   key: 1,
   class: "checkbox-label"
-}, z = /* @__PURE__ */ Object.assign({
+}, K = /* @__PURE__ */ Object.assign({
   name: "Checkbox",
   inheritAttrs: !1
 }, {
@@ -37,12 +37,12 @@ const F = (a, s) => {
     }
   },
   emits: ["update:checked"],
-  setup(a, { emit: s }) {
-    const t = a, c = y(), u = m(), d = b(!1), e = b(t.checked), _ = f(() => typeof e.value == "boolean" ? e.value : e.value.includes(t.value)), x = f(() => {
+  setup(a, { emit: u }) {
+    const t = a, s = u, c = C(), m = g(), i = k(!1), e = k(t.checked), x = b(() => typeof e.value == "boolean" ? e.value : e.value.includes(t.value)), y = b(() => {
       let o = Object.assign({}, c, {
         // Pressing the enter key gets handled like a click.
         onKeyup(l) {
-          s("keyup", l), l.key === "Enter" && (s("click"), typeof e.value == "boolean" ? e.value = !e.value : e.value.includes(t.value) ? e.value = E(e.value, t.value) : e.value.push(t.value));
+          s("keyup", l), l.key === "Enter" && (s("click"), typeof e.value == "boolean" ? e.value = !e.value : e.value.includes(t.value) ? e.value = F(e.value, t.value) : e.value.push(t.value));
         }
       });
       return delete o.class, o;
@@ -61,37 +61,37 @@ const F = (a, s) => {
       class: p(["checkbox", { "checkbox-disabled": a.disabled }, n(c).class]),
       title: n(c).title
     }, [
-      k("div", $, [
-        k("span", {
+      f("div", D, [
+        f("span", {
           class: p([
             "checkbox-input",
-            { "checkbox-checked": _.value, "checkbox-focused": d.value }
+            { "checkbox-checked": x.value, "checkbox-focused": i.value }
           ])
         }, [
-          C(n(O), {
+          _(n(j), {
             class: "checkbox-input-icon",
-            icon: n(j),
+            icon: n(E),
             "aria-hidden": "true"
           }, null, 8, ["icon"]),
-          g(k("input", A(x.value, {
-            "onUpdate:modelValue": l[0] || (l[0] = (i) => e.value = i),
+          A(f("input", S(y.value, {
+            "onUpdate:modelValue": l[0] || (l[0] = (d) => e.value = d),
             type: "checkbox",
             value: a.value,
             disabled: a.disabled,
-            onFocus: l[1] || (l[1] = (i) => d.value = !0),
-            onFocusout: l[2] || (l[2] = (i) => d.value = !1)
-          }), null, 16, D), [
-            [S, e.value]
+            onFocus: l[1] || (l[1] = (d) => i.value = !0),
+            onFocusout: l[2] || (l[2] = (d) => i.value = !1)
+          }), null, 16, I), [
+            [w, e.value]
           ])
         ], 2)
       ]),
-      n(u).default ? (r(), v("div", I, [
-        w(o.$slots, "default", {}, void 0, !0)
-      ])) : (r(), v("span", N, B(a.label), 1))
-    ], 10, V));
+      n(m).default ? (r(), v("div", N, [
+        B(o.$slots, "default", {}, void 0, !0)
+      ])) : (r(), v("span", z, O(a.label), 1))
+    ], 10, $));
   }
-}), q = /* @__PURE__ */ F(z, [["__scopeId", "data-v-2a4214a3"]]);
+}), G = /* @__PURE__ */ V(K, [["__scopeId", "data-v-2a4214a3"]]);
 export {
-  q as Checkbox
+  G 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    :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 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(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":["defaultAttrs","useAttrs","slots","useSlots","focused","ref","internalChecked","props","isChecked","computed","attrs","event","emit","without","watch","checked"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiEMA,IAAeC,EAAQ,GACvBC,IAAQC,EAAQ,GAChBC,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,GAAIV,GAAc;AAAA;AAAA,QAE1C,QAAQW,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    <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 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(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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,UAAMA,IAAQC,GAkBRC,IAAOC,GACPC,IAAeC,EAAQ,GACvBC,IAAQC,EAAQ,GAChBC,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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,f,h,k){"use strict";const g="",B="",p=(c,n)=>{const s=c.__vccOpts||c;for(const[i,d]of n)s[i]=d;return s},b=["title"],m={class:"checkbox-input-container"},_=["value","disabled"],x={key:0,class:"checkbox-label"},y={key:1,class:"checkbox-label"},v=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:n}){const s=c,i=e.useAttrs(),d=e.useSlots(),u=e.ref(!1),t=e.ref(s.checked),w=e.computed(()=>typeof t.value=="boolean"?t.value:t.value.includes(s.value)),C=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":w.value,"checkbox-focused":u.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(C.value,{"onUpdate:modelValue":l[0]||(l[0]=r=>t.value=r),type:"checkbox",value:c.value,disabled:c.disabled,onFocus:l[1]||(l[1]=r=>u.value=!0),onFocusout:l[2]||(l[2]=r=>u.value=!1)}),null,16,_),[[e.vModelCheckbox,t.value]])],2)]),e.unref(d).default?(e.openBlock(),e.createElementBlock("div",x,[e.renderSlot(a.$slots,"default",{},void 0,!0)])):(e.openBlock(),e.createElementBlock("span",y,e.toDisplayString(c.label),1))],10,b))}}),[["__scopeId","data-v-2a4214a3"]]);o.Checkbox=v,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,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-2a4214a3"]]);o.Checkbox=w,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    :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 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(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":["defaultAttrs","useAttrs","slots","useSlots","focused","ref","internalChecked","props","isChecked","computed","attrs","event","emit","without","vue","checked"],"mappings":"y+BAiEMA,EAAeC,EAAQ,SAAA,EACvBC,EAAQC,EAAQ,SAAA,EAChBC,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,EAAIV,EAAc,CAE1C,QAAQW,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    <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 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(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":"q9BA8CA,MAAMA,EAAQC,EAkBRC,EAAOC,EACPC,EAAeC,EAAQ,SAAA,EACvBC,EAAQC,EAAQ,SAAA,EAChBC,EAAUC,EAAAA,IAAI,EAAK,EACnBC,EAAkBD,EAAG,IAACT,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gospore/checkbox",
-  "version": "1.0.30",
+  "version": "1.0.32",
   "description": "",
   "author": "Gospore",
   "type": "module",
@@ -23,19 +23,18 @@
     "build": "vite build"
   },
   "peerDependencies": {
-    "vue": "^3.3.4"
+    "vue": "^3.4.20"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
-    "@fortawesome/vue-fontawesome": "^3.0.3",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/vue-fontawesome": "^3.0.6",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^4.2.3",
-    "@vue/compiler-sfc": "^3.3.1",
-    "unplugin-vue-macros": "^2.2.1",
-    "vite": "^4.3.9"
+    "@vitejs/plugin-vue": "^5.0.4",
+    "unplugin-vue-macros": "^2.7.10",
+    "vite": "^5.1.4"
   },
-  "gitHead": "37e2daf22d8fdcff619384a71775d85b3eacb823"
+  "gitHead": "4b4998d4130fa921f2cd3961086da6456d59b6e9"
 }