@gospore/checkbox 1.0.48 → 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.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.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"})});
+(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.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":"29BAoDA,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.48",
+    "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": "f91108b07904cd8521d70a92e207842e76b21cb0",
+    "gitHead": "7ed27a611172eeeffdb4c21b78eb6cf13a79fbe6",
     "types": "./dist/index.d.ts"
 }