@gospore/checkbox 1.0.47 → 1.0.49

package/dist/Checkbox.vue.d.ts

@@ -1,21 +1,53 @@
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 type __VLS_WithSlots<T, S> = T & (new () => {
     $slots: S;
 });
-declare const __VLS_component: import("vue").DefineComponent<{}, {
-    $emit: (event: "update:checked", ...args: any[]) => void;
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    checked: {
+        type: (BooleanConstructor | ArrayConstructor)[];
+        default: boolean;
+    };
+    value: {
+        type: (ObjectConstructor | StringConstructor)[];
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:checked": (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    checked: {
+        type: (BooleanConstructor | ArrayConstructor)[];
+        default: boolean;
+    };
+    value: {
+        type: (ObjectConstructor | StringConstructor)[];
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{
+    "onUpdate:checked"?: (...args: any[]) => any;
+}>, {
     value: string | Record<string, any>;
     label: string;
     disabled: boolean;
     checked: boolean | unknown[];
-    $props: {
-        readonly value?: string | Record<string, any>;
-        readonly label?: string;
-        readonly disabled?: boolean;
-        readonly checked?: boolean | unknown[];
-    };
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {
     default?: (props: {}) => any;
 };

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

package/dist/checkbox.cjs.js.map

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

package/dist/checkbox.css

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

package/dist/checkbox.es.js

@@ -1,7 +1,7 @@
 import { useAttrs as C, useSlots as g, ref as k, computed as b, watch as h, createElementBlock as r, openBlock as v, unref as n, normalizeClass as p, createElementVNode as f, createVNode as _, withDirectives as A, mergeProps as S, vModelCheckbox as w, renderSlot as B, toDisplayString as O } from "vue";
 import { FontAwesomeIcon as j } from "@fortawesome/vue-fontawesome";
 import { faCheck as E } from "@fortawesome/free-solid-svg-icons";
-import F from "lodash/without";
+import F from "lodash/without.js";
 const V = (o, u) => {
   const t = o.__vccOpts || o;
   for (const [s, c] of u)
@@ -100,7 +100,7 @@ const V = (o, u) => {
       ])) : (v(), r("span", z, O(o.label), 1))
     ], 10, $));
   }
-}), G = /* @__PURE__ */ V(K, [["__scopeId", "data-v-fdf7b37c"]]);
+}), G = /* @__PURE__ */ V(K, [["__scopeId", "data-v-779b3234"]]);
 export {
   G as Checkbox
 };

package/dist/checkbox.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.es.js","sources":["../src/Checkbox.vue"],"sourcesContent":["<template>\n    <label\n        :class=\"[\n            'checkbox',\n            { 'checkbox-disabled': disabled },\n            defaultAttrs.class,\n        ]\"\n        :title=\"defaultAttrs.title\"\n    >\n        <div class=\"checkbox-input-container\">\n            <span\n                :class=\"[\n                    'checkbox-input',\n                    {\n                        'checkbox-checked': isChecked,\n                        'checkbox-focused': focused,\n                    },\n                ]\"\n            >\n                <font-awesome-icon\n                    class=\"checkbox-input-icon\"\n                    :icon=\"faCheck\"\n                    aria-hidden=\"true\"\n                />\n                <input\n                    v-bind=\"attrs\"\n                    v-model=\"internalChecked\"\n                    type=\"checkbox\"\n                    :value=\"value\"\n                    :disabled=\"disabled\"\n                    @focus=\"focused = true\"\n                    @focusout=\"focused = false\"\n                />\n            </span>\n        </div>\n        <div v-if=\"slots.default\" class=\"checkbox-label\">\n            <slot />\n        </div>\n        <span v-else class=\"checkbox-label\">{{ label }}</span>\n    </label>\n</template>\n\n<script setup>\nimport { useAttrs, useSlots, ref, computed, watch } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without\";\n\ndefineOptions({\n    name: \"Checkbox\",\n    inheritAttrs: false,\n});\nconst props = defineProps({\n    checked: {\n        type: [Boolean, Array],\n        default: false,\n    },\n    value: {\n        type: [String, Object],\n        default: \"\",\n    },\n    label: {\n        type: String,\n        default: \"\",\n    },\n    disabled: {\n        type: Boolean,\n        default: false,\n    },\n});\nconst emit = defineEmits([\"update:checked\"]);\nconst defaultAttrs = useAttrs();\nconst slots = useSlots();\nconst focused = ref(false);\nconst internalChecked = ref(props.checked);\n\nconst isChecked = computed(() => {\n    if (typeof internalChecked.value === \"boolean\") {\n        return internalChecked.value;\n    } else {\n        return internalChecked.value.includes(props.value);\n    }\n});\nconst attrs = computed(() => {\n    let attrs = Object.assign({}, defaultAttrs, {\n        // Pressing the enter key gets handled like a click.\n        onKeyup(event) {\n            // Don't add the keyup and click events to defineEmits, otherwise it won't work.\n            // eslint-disable-next-line vue/require-explicit-emits\n            emit(\"keyup\", event);\n            if (event.key === \"Enter\") {\n                // eslint-disable-next-line vue/require-explicit-emits\n                emit(\"click\");\n                if (typeof internalChecked.value == \"boolean\") {\n                    internalChecked.value = !internalChecked.value;\n                } else {\n                    if (internalChecked.value.includes(props.value)) {\n                        internalChecked.value = without(\n                            internalChecked.value,\n                            props.value,\n                        );\n                    } else {\n                        internalChecked.value.push(props.value);\n                    }\n                }\n            }\n        },\n    });\n    // Only assign events to the input element, classes are assigned to the outer label.\n    delete attrs.class;\n    return attrs;\n});\n\nwatch(\n    () => props.checked,\n    (checked) => {\n        internalChecked.value = checked;\n    },\n);\nwatch(\n    () => internalChecked.value,\n    () => {\n        // Only emit the update:checked event if the mutation came from within the checkbox component.\n        if (internalChecked.value != props.checked) {\n            emit(\"update:checked\", internalChecked.value);\n        }\n    },\n);\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style lang=\"less\" scoped>\n.checkbox {\n    position: relative;\n    display: flex;\n    padding: var(--checkbox-padding);\n\n    .checkbox-input-container {\n        padding: 5px;\n    }\n    .checkbox-input {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: var(--checkbox-height);\n        width: var(--checkbox-width);\n        box-sizing: border-box;\n        border-radius: var(--checkbox-border-radius);\n        border: var(--checkbox-border-width) solid;\n        background-color: var(--checkbox-background-default-default-light);\n        color: var(--checkbox-color-default-default-light);\n        border-color: var(--checkbox-border-color-default-default-light);\n        transition: var(--checkbox-transition);\n    }\n    &:hover .checkbox-input {\n        background-color: var(--checkbox-background-default-hover-light);\n        color: var(--checkbox-color-default-hover-light);\n        border-color: var(--checkbox-border-color-default-hover-light);\n    }\n    &:active .checkbox-input {\n        background-color: var(--checkbox-background-default-active-light);\n        color: var(--checkbox-color-default-active-light);\n        border-color: var(--checkbox-border-color-default-active-light);\n    }\n\n    .checkbox-checked {\n        background-color: var(--checkbox-background-checked-default-light);\n        color: var(--checkbox-color-checked-default-light);\n        border-color: var(--checkbox-border-color-checked-default-light);\n    }\n    &:hover .checkbox-checked {\n        background-color: var(--checkbox-background-checked-hover-light);\n        color: var(--checkbox-color-checked-hover-light);\n        border-color: var(--checkbox-border-color-checked-hover-light);\n    }\n    &:active .checkbox-checked {\n        background-color: var(--checkbox-background-checked-active-light);\n        color: var(--checkbox-color-checked-active-light);\n        border-color: var(--checkbox-border-color-checked-active-light);\n    }\n}\n.checkbox-disabled {\n    color: var(--checkbox-color-checked-disabled-light);\n    cursor: not-allowed;\n\n    .checkbox-input {\n        background-color: var(--checkbox-background-default-disabled-light);\n        color: var(--checkbox-color-default-disabled-light);\n        border-color: var(--checkbox-border-color-default-disabled-light);\n    }\n    &:hover .checkbox-input {\n        background-color: var(--checkbox-background-default-disabled-light);\n        color: var(--checkbox-color-default-disabled-light);\n        border-color: var(--checkbox-border-color-default-disabled-light);\n    }\n\n    .checkbox-checked {\n        background-color: var(--checkbox-background-checked-disabled-light);\n        color: var(--checkbox-color-checked-disabled-light);\n        border-color: var(--checkbox-border-color-checked-disabled-light);\n    }\n    &:hover .checkbox-checked {\n        background-color: var(--checkbox-background-checked-disabled-light);\n        color: var(--checkbox-color-checked-disabled-light);\n        border-color: var(--checkbox-border-color-checked-disabled-light);\n    }\n}\n.checkbox-input-icon {\n    height: 100%;\n    width: 100%;\n    box-sizing: border-box;\n    padding: 1px;\n}\n.checkbox-label {\n    padding: var(--checkbox-label-padding);\n    line-height: var(--checkbox-line-height);\n}\ninput {\n    margin: 0;\n    opacity: 0;\n    position: absolute;\n    pointer-events: none;\n}\n[data-whatinput=\"keyboard\"] .checkbox-focused {\n    border-color: var(--checkbox-focus-outline-color-light) !important;\n}\n\n[dark-mode=\"true\"] {\n    .checkbox {\n        .checkbox-input {\n            background-color: var(--checkbox-background-default-default-dark);\n            color: var(--checkbox-color-default-default-dark);\n            border-color: var(--checkbox-border-color-default-default-dark);\n        }\n        &:hover .checkbox-input {\n            background-color: var(--checkbox-background-default-hover-dark);\n            color: var(--checkbox-color-default-hover-dark);\n            border-color: var(--checkbox-border-color-default-hover-dark);\n        }\n        &:active .checkbox-input {\n            background-color: var(--checkbox-background-default-active-dark);\n            color: var(--checkbox-color-default-active-dark);\n            border-color: var(--checkbox-border-color-default-active-dark);\n        }\n\n        .checkbox-checked {\n            background-color: var(--checkbox-background-checked-default-dark);\n            color: var(--checkbox-color-checked-default-dark);\n            border-color: var(--checkbox-border-color-checked-default-dark);\n        }\n        &:hover .checkbox-checked {\n            background-color: var(--checkbox-background-checked-hover-dark);\n            color: var(--checkbox-color-checked-hover-dark);\n            border-color: var(--checkbox-border-color-checked-hover-dark);\n        }\n        &:active .checkbox-checked {\n            background-color: var(--checkbox-background-checked-active-dark);\n            color: var(--checkbox-color-checked-active-dark);\n            border-color: var(--checkbox-border-color-checked-active-dark);\n        }\n    }\n    .checkbox-disabled {\n        color: var(--checkbox-color-checked-disabled-dark);\n\n        .checkbox-input {\n            background-color: var(--checkbox-background-default-disabled-dark);\n            color: var(--checkbox-color-default-disabled-dark);\n            border-color: var(--checkbox-border-color-default-disabled-dark);\n        }\n        &:hover .checkbox-input {\n            background-color: var(--checkbox-background-default-disabled-dark);\n            color: var(--checkbox-color-default-disabled-dark);\n            border-color: var(--checkbox-border-color-default-disabled-dark);\n        }\n\n        .checkbox-checked {\n            background-color: var(--checkbox-background-checked-disabled-dark);\n            color: var(--checkbox-color-checked-disabled-dark);\n            border-color: var(--checkbox-border-color-checked-disabled-dark);\n        }\n        &:hover .checkbox-checked {\n            background-color: var(--checkbox-background-checked-disabled-dark);\n            color: var(--checkbox-color-checked-disabled-dark);\n            border-color: var(--checkbox-border-color-checked-disabled-dark);\n        }\n    }\n\n    [data-whatinput=\"keyboard\"] .checkbox-focused {\n        border-color: var(--checkbox-focus-outline-color-dark) !important;\n    }\n}\n</style>\n"],"names":["props","__props","emit","__emit","defaultAttrs","useAttrs","slots","useSlots","focused","ref","internalChecked","isChecked","computed","attrs","event","without","watch","checked","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_hoisted_2","_createVNode","FontAwesomeIcon","faCheck","_mergeProps","$event","_openBlock","_hoisted_4","_renderSlot","_ctx","_hoisted_5","_toDisplayString"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,UAAMA,IAAQC,GAkBRC,IAAOC,GACPC,IAAeC,EAAQ,GACvBC,IAAQC,EAAQ,GAChBC,IAAUC,EAAI,EAAK,GACnBC,IAAkBD,EAAIT,EAAM,OAAO,GAEnCW,IAAYC,EAAS,MACnB,OAAOF,EAAgB,SAAU,YAC1BA,EAAgB,QAEhBA,EAAgB,MAAM,SAASV,EAAM,KAAK,CAExD,GACKa,IAAQD,EAAS,MAAM;AACzB,UAAIC,IAAQ,OAAO,OAAO,CAAA,GAAIT,GAAc;AAAA;AAAA,QAExC,QAAQU,GAAO;AAGX,UAAAZ,EAAK,SAASY,CAAK,GACfA,EAAM,QAAQ,YAEdZ,EAAK,OAAO,GACR,OAAOQ,EAAgB,SAAS,YAChCA,EAAgB,QAAQ,CAACA,EAAgB,QAErCA,EAAgB,MAAM,SAASV,EAAM,KAAK,IAC1CU,EAAgB,QAAQK;AAAA,YACpBL,EAAgB;AAAA,YAChBV,EAAM;AAAA,UAClC,IAEwBU,EAAgB,MAAM,KAAKV,EAAM,KAAK;AAAA,QAItD;AAAA,MACR,CAAK;AAED,oBAAOa,EAAM,OACNA;AAAA,IACX,CAAC;AAED,WAAAG;AAAA,MACI,MAAMhB,EAAM;AAAA,MACZ,CAACiB,MAAY;AACT,QAAAP,EAAgB,QAAQO;AAAA,MAC5B;AAAA,IACJ,GACAD;AAAA,MACI,MAAMN,EAAgB;AAAA,MACtB,MAAM;AAEF,QAAIA,EAAgB,SAASV,EAAM,WAC/BE,EAAK,kBAAkBQ,EAAgB,KAAK;AAAA,MAEpD;AAAA,IACJ,mBA9HIQ,EAsCQ,SAAA;AAAA,MArCH,OAAKC,EAAA;AAAA;+BAA+DlB,EAAA,SAAQ;AAAA,QAAgBmB,EAAAhB,CAAA,EAAa;AAAA;MAKzG,OAAOgB,EAAAhB,CAAA,EAAa;AAAA;MAErBiB,EAyBM,OAzBNC,GAyBM;AAAA,QAxBFD,EAuBO,QAAA;AAAA,UAtBF,OAAKF,EAAA;AAAA;;kCAA4GR,EAAA;AAAA,kCAAuDH,EAAA;AAAA;;;UAQzKe,EAIEH,EAAAI,CAAA,GAAA;AAAA,YAHE,OAAM;AAAA,YACL,MAAMJ,EAAAK,CAAA;AAAA,YACP,eAAY;AAAA;YAEhBJ,EAQE,SARFK,EAQEb,EAAA,OAPe;AAAA,0DACJH,EAAe,QAAAiB;AAAA,YACxB,MAAK;AAAA,YACJ,OAAO1B,EAAA;AAAA,YACP,UAAUA,EAAA;AAAA,YACV,gCAAOO,EAAA,QAAO;AAAA,YACd,mCAAUA,EAAA,QAAO;AAAA;gBALTE,EAAA,KAAe;AAAA;;;MASzBU,EAAAd,CAAA,EAAM,WAAjBsB,KAAAV,EAEM,OAFNW,GAEM;AAAA,QADFC,EAAQC,EAAA,QAAA,WAAA,CAAA,GAAA,QAAA,EAAA;AAAA,kBAEZb,EAAsD,QAAtDc,GAAsDC,EAAfhC,EAAA,KAAK,GAAA,CAAA;AAAA;;;"}
+{"version":3,"file":"checkbox.es.js","sources":["../src/Checkbox.vue"],"sourcesContent":["<template>\n    <label\n        :class=\"[\n            'checkbox',\n            { 'checkbox-disabled': disabled },\n            defaultAttrs.class,\n        ]\"\n        :title=\"defaultAttrs.title\"\n    >\n        <div class=\"checkbox-input-container\">\n            <span\n                :class=\"[\n                    'checkbox-input',\n                    {\n                        'checkbox-checked': isChecked,\n                        'checkbox-focused': focused,\n                    },\n                ]\"\n            >\n                <font-awesome-icon\n                    class=\"checkbox-input-icon\"\n                    :icon=\"faCheck\"\n                    aria-hidden=\"true\"\n                />\n                <input\n                    v-bind=\"attrs\"\n                    v-model=\"internalChecked\"\n                    type=\"checkbox\"\n                    :value=\"value\"\n                    :disabled=\"disabled\"\n                    @focus=\"focused = true\"\n                    @focusout=\"focused = false\"\n                />\n            </span>\n        </div>\n        <div v-if=\"slots.default\" class=\"checkbox-label\">\n            <slot />\n        </div>\n        <span v-else class=\"checkbox-label\">{{ label }}</span>\n    </label>\n</template>\n\n<script setup>\nimport { useAttrs, useSlots, ref, computed, watch } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\n\ndefineOptions({\n    name: \"Checkbox\",\n    inheritAttrs: false,\n});\nconst props = defineProps({\n    checked: {\n        type: [Boolean, Array],\n        default: false,\n    },\n    value: {\n        type: [String, Object],\n        default: \"\",\n    },\n    label: {\n        type: String,\n        default: \"\",\n    },\n    disabled: {\n        type: Boolean,\n        default: false,\n    },\n});\nconst emit = defineEmits([\"update:checked\"]);\nconst defaultAttrs = useAttrs();\nconst slots = useSlots();\nconst focused = ref(false);\nconst internalChecked = ref(props.checked);\n\nconst isChecked = computed(() => {\n    if (typeof internalChecked.value === \"boolean\") {\n        return internalChecked.value;\n    } else {\n        return internalChecked.value.includes(props.value);\n    }\n});\nconst attrs = computed(() => {\n    let attrs = Object.assign({}, defaultAttrs, {\n        // Pressing the enter key gets handled like a click.\n        onKeyup(event) {\n            // Don't add the keyup and click events to defineEmits, otherwise it won't work.\n            // eslint-disable-next-line vue/require-explicit-emits\n            emit(\"keyup\", event);\n            if (event.key === \"Enter\") {\n                // eslint-disable-next-line vue/require-explicit-emits\n                emit(\"click\");\n                if (typeof internalChecked.value == \"boolean\") {\n                    internalChecked.value = !internalChecked.value;\n                } else {\n                    if (internalChecked.value.includes(props.value)) {\n                        internalChecked.value = without(\n                            internalChecked.value,\n                            props.value,\n                        );\n                    } else {\n                        internalChecked.value.push(props.value);\n                    }\n                }\n            }\n        },\n    });\n    // Only assign events to the input element, classes are assigned to the outer label.\n    delete attrs.class;\n    return attrs;\n});\n\nwatch(\n    () => props.checked,\n    (checked) => {\n        internalChecked.value = checked;\n    },\n);\nwatch(\n    () => internalChecked.value,\n    () => {\n        // Only emit the update:checked event if the mutation came from within the checkbox component.\n        if (internalChecked.value != props.checked) {\n            emit(\"update:checked\", internalChecked.value);\n        }\n    },\n);\n</script>\n\n<style>\n@import \"theme.css\";\n</style>\n\n<style lang=\"less\" scoped>\n.checkbox {\n    position: relative;\n    display: flex;\n    padding: var(--checkbox-padding);\n\n    .checkbox-input-container {\n        padding: 5px;\n    }\n    .checkbox-input {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: var(--checkbox-height);\n        width: var(--checkbox-width);\n        box-sizing: border-box;\n        border-radius: var(--checkbox-border-radius);\n        border: var(--checkbox-border-width) solid;\n        background-color: var(--checkbox-background-default-default-light);\n        color: var(--checkbox-color-default-default-light);\n        border-color: var(--checkbox-border-color-default-default-light);\n        transition: var(--checkbox-transition);\n    }\n    &:hover .checkbox-input {\n        background-color: var(--checkbox-background-default-hover-light);\n        color: var(--checkbox-color-default-hover-light);\n        border-color: var(--checkbox-border-color-default-hover-light);\n    }\n    &:active .checkbox-input {\n        background-color: var(--checkbox-background-default-active-light);\n        color: var(--checkbox-color-default-active-light);\n        border-color: var(--checkbox-border-color-default-active-light);\n    }\n\n    .checkbox-checked {\n        background-color: var(--checkbox-background-checked-default-light);\n        color: var(--checkbox-color-checked-default-light);\n        border-color: var(--checkbox-border-color-checked-default-light);\n    }\n    &:hover .checkbox-checked {\n        background-color: var(--checkbox-background-checked-hover-light);\n        color: var(--checkbox-color-checked-hover-light);\n        border-color: var(--checkbox-border-color-checked-hover-light);\n    }\n    &:active .checkbox-checked {\n        background-color: var(--checkbox-background-checked-active-light);\n        color: var(--checkbox-color-checked-active-light);\n        border-color: var(--checkbox-border-color-checked-active-light);\n    }\n}\n.checkbox-disabled {\n    color: var(--checkbox-color-checked-disabled-light);\n    cursor: not-allowed;\n\n    .checkbox-input {\n        background-color: var(--checkbox-background-default-disabled-light);\n        color: var(--checkbox-color-default-disabled-light);\n        border-color: var(--checkbox-border-color-default-disabled-light);\n    }\n    &:hover .checkbox-input {\n        background-color: var(--checkbox-background-default-disabled-light);\n        color: var(--checkbox-color-default-disabled-light);\n        border-color: var(--checkbox-border-color-default-disabled-light);\n    }\n\n    .checkbox-checked {\n        background-color: var(--checkbox-background-checked-disabled-light);\n        color: var(--checkbox-color-checked-disabled-light);\n        border-color: var(--checkbox-border-color-checked-disabled-light);\n    }\n    &:hover .checkbox-checked {\n        background-color: var(--checkbox-background-checked-disabled-light);\n        color: var(--checkbox-color-checked-disabled-light);\n        border-color: var(--checkbox-border-color-checked-disabled-light);\n    }\n}\n.checkbox-input-icon {\n    height: 100%;\n    width: 100%;\n    box-sizing: border-box;\n    padding: 1px;\n}\n.checkbox-label {\n    padding: var(--checkbox-label-padding);\n    line-height: var(--checkbox-line-height);\n}\ninput {\n    margin: 0;\n    opacity: 0;\n    position: absolute;\n    pointer-events: none;\n}\n[data-whatinput=\"keyboard\"] .checkbox-focused {\n    border-color: var(--checkbox-focus-outline-color-light) !important;\n}\n\n[dark-mode=\"true\"] {\n    .checkbox {\n        .checkbox-input {\n            background-color: var(--checkbox-background-default-default-dark);\n            color: var(--checkbox-color-default-default-dark);\n            border-color: var(--checkbox-border-color-default-default-dark);\n        }\n        &:hover .checkbox-input {\n            background-color: var(--checkbox-background-default-hover-dark);\n            color: var(--checkbox-color-default-hover-dark);\n            border-color: var(--checkbox-border-color-default-hover-dark);\n        }\n        &:active .checkbox-input {\n            background-color: var(--checkbox-background-default-active-dark);\n            color: var(--checkbox-color-default-active-dark);\n            border-color: var(--checkbox-border-color-default-active-dark);\n        }\n\n        .checkbox-checked {\n            background-color: var(--checkbox-background-checked-default-dark);\n            color: var(--checkbox-color-checked-default-dark);\n            border-color: var(--checkbox-border-color-checked-default-dark);\n        }\n        &:hover .checkbox-checked {\n            background-color: var(--checkbox-background-checked-hover-dark);\n            color: var(--checkbox-color-checked-hover-dark);\n            border-color: var(--checkbox-border-color-checked-hover-dark);\n        }\n        &:active .checkbox-checked {\n            background-color: var(--checkbox-background-checked-active-dark);\n            color: var(--checkbox-color-checked-active-dark);\n            border-color: var(--checkbox-border-color-checked-active-dark);\n        }\n    }\n    .checkbox-disabled {\n        color: var(--checkbox-color-checked-disabled-dark);\n\n        .checkbox-input {\n            background-color: var(--checkbox-background-default-disabled-dark);\n            color: var(--checkbox-color-default-disabled-dark);\n            border-color: var(--checkbox-border-color-default-disabled-dark);\n        }\n        &:hover .checkbox-input {\n            background-color: var(--checkbox-background-default-disabled-dark);\n            color: var(--checkbox-color-default-disabled-dark);\n            border-color: var(--checkbox-border-color-default-disabled-dark);\n        }\n\n        .checkbox-checked {\n            background-color: var(--checkbox-background-checked-disabled-dark);\n            color: var(--checkbox-color-checked-disabled-dark);\n            border-color: var(--checkbox-border-color-checked-disabled-dark);\n        }\n        &:hover .checkbox-checked {\n            background-color: var(--checkbox-background-checked-disabled-dark);\n            color: var(--checkbox-color-checked-disabled-dark);\n            border-color: var(--checkbox-border-color-checked-disabled-dark);\n        }\n    }\n\n    [data-whatinput=\"keyboard\"] .checkbox-focused {\n        border-color: var(--checkbox-focus-outline-color-dark) !important;\n    }\n}\n</style>\n"],"names":["props","__props","emit","__emit","defaultAttrs","useAttrs","slots","useSlots","focused","ref","internalChecked","isChecked","computed","attrs","event","without","watch","checked","_createElementBlock","_normalizeClass","_unref","_createElementVNode","_hoisted_2","_createVNode","FontAwesomeIcon","faCheck","_mergeProps","$event","_openBlock","_hoisted_4","_renderSlot","_ctx","_hoisted_5","_toDisplayString"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoDA,UAAMA,IAAQC,GAkBRC,IAAOC,GACPC,IAAeC,EAAQ,GACvBC,IAAQC,EAAQ,GAChBC,IAAUC,EAAI,EAAK,GACnBC,IAAkBD,EAAIT,EAAM,OAAO,GAEnCW,IAAYC,EAAS,MACnB,OAAOF,EAAgB,SAAU,YAC1BA,EAAgB,QAEhBA,EAAgB,MAAM,SAASV,EAAM,KAAK,CAExD,GACKa,IAAQD,EAAS,MAAM;AACzB,UAAIC,IAAQ,OAAO,OAAO,CAAA,GAAIT,GAAc;AAAA;AAAA,QAExC,QAAQU,GAAO;AAGX,UAAAZ,EAAK,SAASY,CAAK,GACfA,EAAM,QAAQ,YAEdZ,EAAK,OAAO,GACR,OAAOQ,EAAgB,SAAS,YAChCA,EAAgB,QAAQ,CAACA,EAAgB,QAErCA,EAAgB,MAAM,SAASV,EAAM,KAAK,IAC1CU,EAAgB,QAAQK;AAAA,YACpBL,EAAgB;AAAA,YAChBV,EAAM;AAAA,UAClC,IAEwBU,EAAgB,MAAM,KAAKV,EAAM,KAAK;AAAA,QAItD;AAAA,MACR,CAAK;AAED,oBAAOa,EAAM,OACNA;AAAA,IACX,CAAC;AAED,WAAAG;AAAA,MACI,MAAMhB,EAAM;AAAA,MACZ,CAACiB,MAAY;AACT,QAAAP,EAAgB,QAAQO;AAAA,MAC5B;AAAA,IACJ,GACAD;AAAA,MACI,MAAMN,EAAgB;AAAA,MACtB,MAAM;AAEF,QAAIA,EAAgB,SAASV,EAAM,WAC/BE,EAAK,kBAAkBQ,EAAgB,KAAK;AAAA,MAEpD;AAAA,IACJ,mBA9HIQ,EAsCQ,SAAA;AAAA,MArCH,OAAKC,EAAA;AAAA;+BAA+DlB,EAAA,SAAQ;AAAA,QAAgBmB,EAAAhB,CAAA,EAAa;AAAA;MAKzG,OAAOgB,EAAAhB,CAAA,EAAa;AAAA;MAErBiB,EAyBM,OAzBNC,GAyBM;AAAA,QAxBFD,EAuBO,QAAA;AAAA,UAtBF,OAAKF,EAAA;AAAA;;kCAA4GR,EAAA;AAAA,kCAAuDH,EAAA;AAAA;;;UAQzKe,EAIEH,EAAAI,CAAA,GAAA;AAAA,YAHE,OAAM;AAAA,YACL,MAAMJ,EAAAK,CAAA;AAAA,YACP,eAAY;AAAA;YAEhBJ,EAQE,SARFK,EAQEb,EAAA,OAPe;AAAA,0DACJH,EAAe,QAAAiB;AAAA,YACxB,MAAK;AAAA,YACJ,OAAO1B,EAAA;AAAA,YACP,UAAUA,EAAA;AAAA,YACV,gCAAOO,EAAA,QAAO;AAAA,YACd,mCAAUA,EAAA,QAAO;AAAA;gBALTE,EAAA,KAAe;AAAA;;;MASzBU,EAAAd,CAAA,EAAM,WAAjBsB,KAAAV,EAEM,OAFNW,GAEM;AAAA,QADFC,EAAQC,EAAA,QAAA,WAAA,CAAA,GAAA,QAAA,EAAA;AAAA,kBAEZb,EAAsD,QAAtDc,GAAsDC,EAAfhC,EAAA,KAAK,GAAA,CAAA;AAAA;;;"}

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

package/dist/checkbox.umd.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gospore/checkbox",
-    "version": "1.0.47",
+    "version": "1.0.49",
     "description": "",
     "author": "Gospore",
     "type": "module",
@@ -30,14 +30,14 @@
     "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^7.1.0",
         "@fortawesome/free-solid-svg-icons": "^7.1.0",
-        "@fortawesome/vue-fontawesome": "^3.1.2",
-        "lodash": "^4.17.21"
+        "@fortawesome/vue-fontawesome": "^3.1.3",
+        "lodash": "^4.17.23"
     },
     "devDependencies": {
-        "@vitejs/plugin-vue": "^6.0.1",
+        "@vitejs/plugin-vue": "^6.0.4",
         "unplugin-vue-macros": "^2.14.5",
-        "vite": "^7.1.12"
+        "vite": "^7.3.1"
     },
-    "gitHead": "52ae3a10ae28da88ed7bfb64c3929a22ffc4d03f",
+    "gitHead": "7ed27a611172eeeffdb4c21b78eb6cf13a79fbe6",
     "types": "./dist/index.d.ts"
 }