@gospore/checkbox 1.0.63 → 1.0.65
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Checkbox.vue.d.ts +4 -4
- package/dist/checkbox.cjs.js +1 -1
- package/dist/checkbox.cjs.js.map +1 -1
- package/dist/checkbox.css +1 -1
- package/dist/checkbox.es.js +50 -39
- package/dist/checkbox.es.js.map +1 -1
- package/dist/checkbox.umd.js +1 -1
- package/dist/checkbox.umd.js.map +1 -1
- package/package.json +7 -7
package/dist/Checkbox.vue.d.ts
CHANGED
|
@@ -33,9 +33,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
|
|
|
33
33
|
default: boolean;
|
|
34
34
|
};
|
|
35
35
|
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
36
|
-
|
|
36
|
+
click: (event: KeyboardEvent | MouseEvent) => any;
|
|
37
37
|
keyup: (event: KeyboardEvent) => any;
|
|
38
|
-
|
|
38
|
+
"update:checked": (value: CheckboxChecked) => any;
|
|
39
39
|
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
40
40
|
/**
|
|
41
41
|
* Controlled state. Pass a boolean for single checkboxes or an array for checkbox groups (the
|
|
@@ -64,9 +64,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
|
|
|
64
64
|
default: boolean;
|
|
65
65
|
};
|
|
66
66
|
}>> & Readonly<{
|
|
67
|
-
|
|
67
|
+
onClick?: (event: KeyboardEvent | MouseEvent) => any;
|
|
68
68
|
onKeyup?: (event: KeyboardEvent) => any;
|
|
69
|
-
|
|
69
|
+
"onUpdate:checked"?: (value: CheckboxChecked) => any;
|
|
70
70
|
}>, {
|
|
71
71
|
value: CheckboxValue;
|
|
72
72
|
label: string;
|
package/dist/checkbox.cjs.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require("vue"),l=require("@fortawesome/vue-fontawesome"),u=require("@fortawesome/free-solid-svg-icons"),d=require("lodash/without.js");d=s(d,1);let f=require("@gospore/skeleton");var
|
|
1
|
+
Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require("vue"),l=require("@fortawesome/vue-fontawesome"),u=require("@fortawesome/free-solid-svg-icons"),d=require("lodash/without.js");d=s(d,1);let f=require("@gospore/skeleton");function p(e){return e?m(e()):!1}function m(e){return Array.isArray(e)?e.some(m):typeof e==`string`?e.trim()!==``:typeof e==`number`?!0:!(0,c.isVNode)(e)||!h(e)?!1:e.type===c.Fragment?m(e.children):!0}function h(e){return e.type===c.Comment?!1:e.type===c.Text?typeof e.children==`string`&&e.children.trim()!==``:!0}var g=[`title`],_={class:`checkbox-input-container`},v=[`value`,`disabled`],y={key:0,class:`checkbox-label`},b={key:1,class:`checkbox-label`},x=(0,c.defineComponent)({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`,`keyup`,`click`],setup(e,{emit:t}){let n=e,r=t,i=(0,c.useAttrs)(),a=(0,c.useSlots)(),o=(0,c.ref)(!1),s=(0,c.ref)(n.checked),f=(0,c.computed)(()=>p(a.default)),m=(0,c.computed)(()=>typeof s.value==`boolean`?s.value:s.value.includes(n.value)),h=(0,c.computed)(()=>{let{class:e,...t}=i;return Object.assign({},t,{onClick(e){n.disabled||r(`click`,e)},onKeyup(e){r(`keyup`,e),!n.disabled&&e.key===`Enter`&&(r(`click`,e),typeof s.value==`boolean`?s.value=!s.value:s.value.includes(n.value)?s.value=(0,d.default)(s.value,n.value):s.value=[...s.value,n.value])}})});return(0,c.watch)(()=>n.checked,e=>{s.value=e}),(0,c.watch)(()=>s.value,()=>{s.value!=n.checked&&r(`update:checked`,s.value)}),(t,n)=>((0,c.openBlock)(),(0,c.createElementBlock)(`label`,{class:(0,c.normalizeClass)([`checkbox`,{"checkbox-disabled":e.disabled},(0,c.unref)(i).class]),title:(0,c.unref)(i).title},[(0,c.createElementVNode)(`div`,_,[(0,c.createElementVNode)(`span`,{class:(0,c.normalizeClass)([`checkbox-input`,{"checkbox-checked":m.value,"checkbox-focused":o.value}])},[(0,c.createVNode)((0,c.unref)(l.FontAwesomeIcon),{class:`checkbox-input-icon`,icon:(0,c.unref)(u.faCheck),"aria-hidden":`true`},null,8,[`icon`]),(0,c.withDirectives)((0,c.createElementVNode)(`input`,(0,c.mergeProps)(h.value,{"onUpdate:modelValue":n[0]||=e=>s.value=e,type:`checkbox`,value:e.value,disabled:e.disabled,onFocus:n[1]||=e=>o.value=!0,onFocusout:n[2]||=e=>o.value=!1}),null,16,v),[[c.vModelCheckbox,s.value]])],2)]),f.value?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,y,[(0,c.renderSlot)(t.$slots,`default`,{},void 0,!0)])):((0,c.openBlock)(),(0,c.createElementBlock)(`span`,b,(0,c.toDisplayString)(e.label),1))],10,g))}}),S=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},C=S(x,[[`__scopeId`,`data-v-eb918898`]]),w={class:`checkbox-skeleton`},T=S((0,c.defineComponent)({name:`CheckboxSkeleton`,__name:`CheckboxSkeleton`,props:{labelWidth:{type:[String,Number],default:`10rem`},shimmer:{type:Boolean,default:!1}},setup(e){return(t,n)=>((0,c.openBlock)(),(0,c.createElementBlock)(`div`,w,[(0,c.createVNode)((0,c.unref)(f.Skeleton),{width:`var(--size-20)`,height:`var(--size-20)`,radius:`var(--border-radius-regular)`,shimmer:e.shimmer},null,8,[`shimmer`]),(0,c.createVNode)((0,c.unref)(f.Skeleton),{width:e.labelWidth,height:`var(--size-16)`,shimmer:e.shimmer},null,8,[`width`,`shimmer`])]))}}),[[`__scopeId`,`data-v-472ff734`]]);exports.Checkbox=C,exports.CheckboxSkeleton=T;
|
|
2
2
|
//# sourceMappingURL=checkbox.cjs.js.map
|
package/dist/checkbox.cjs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.cjs.js","names":[],"sources":["../src/Checkbox.vue","../src/Checkbox.vue","../src/CheckboxSkeleton.vue","../src/CheckboxSkeleton.vue"],"sourcesContent":["<template>\n <label\n :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n {\n 'checkbox-checked': isChecked,\n 'checkbox-focused': focused,\n },\n ]\"\n >\n <font-awesome-icon class=\"checkbox-input-icon\" :icon=\"faCheck\" aria-hidden=\"true\" />\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 lang=\"ts\">\nimport { useAttrs, ref, computed, watch } from \"vue\";\nimport type { PropType } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\n\ntype CheckboxValue = string | Record<string, unknown>;\ntype CheckboxChecked = boolean | CheckboxValue[];\n\ndefineOptions({\n name: \"Checkbox\",\n inheritAttrs: false,\n});\nconst props = defineProps({\n /**\n * Controlled state. Pass a boolean for single checkboxes or an array for checkbox groups (the\n * component will push/pop value). Supports v-model:checked.\n */\n checked: {\n type: [Boolean, Array] as PropType<CheckboxChecked>,\n default: false,\n },\n /**\n * The value inserted or removed from the bound array when used in group mode. Ignored for\n * boolean usage.\n */\n value: {\n type: [String, Object] as PropType<CheckboxValue>,\n default: \"\",\n },\n /** Fallback label text when no default slot is provided. */\n label: {\n type: String,\n default: \"\",\n },\n /** Greys out the checkbox and prevents user interaction. */\n disabled: {\n type: Boolean,\n default: false,\n },\n});\nconst emit = defineEmits([\"update:checked\", \"keyup\", \"click\"]);\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n class?: unknown;\n title?: string;\n};\nconst slots = defineSlots<{\n /** Custom label content rendered next to the checkbox input. */\n default?: () => unknown;\n}>();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(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 const { class: omittedClass, ...inputAttrs } = defaultAttrs;\n void omittedClass;\n return Object.assign({}, inputAttrs, {\n onClick(event: MouseEvent) {\n if (!props.disabled) {\n emit(\"click\", event);\n }\n },\n // Pressing the enter key gets handled like a click.\n onKeyup(event: KeyboardEvent) {\n emit(\"keyup\", event);\n if (props.disabled) {\n return;\n }\n if (event.key === \"Enter\") {\n emit(\"click\", event);\n if (typeof internalChecked.value == \"boolean\") {\n internalChecked.value = !internalChecked.value;\n } else {\n if (internalChecked.value.includes(props.value)) {\n internalChecked.value = without(internalChecked.value, props.value);\n } else {\n internalChecked.value = [...internalChecked.value, props.value];\n }\n }\n }\n },\n });\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","<template>\n <label\n :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n {\n 'checkbox-checked': isChecked,\n 'checkbox-focused': focused,\n },\n ]\"\n >\n <font-awesome-icon class=\"checkbox-input-icon\" :icon=\"faCheck\" aria-hidden=\"true\" />\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 lang=\"ts\">\nimport { useAttrs, ref, computed, watch } from \"vue\";\nimport type { PropType } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\n\ntype CheckboxValue = string | Record<string, unknown>;\ntype CheckboxChecked = boolean | CheckboxValue[];\n\ndefineOptions({\n name: \"Checkbox\",\n inheritAttrs: false,\n});\nconst props = defineProps({\n /**\n * Controlled state. Pass a boolean for single checkboxes or an array for checkbox groups (the\n * component will push/pop value). Supports v-model:checked.\n */\n checked: {\n type: [Boolean, Array] as PropType<CheckboxChecked>,\n default: false,\n },\n /**\n * The value inserted or removed from the bound array when used in group mode. Ignored for\n * boolean usage.\n */\n value: {\n type: [String, Object] as PropType<CheckboxValue>,\n default: \"\",\n },\n /** Fallback label text when no default slot is provided. */\n label: {\n type: String,\n default: \"\",\n },\n /** Greys out the checkbox and prevents user interaction. */\n disabled: {\n type: Boolean,\n default: false,\n },\n});\nconst emit = defineEmits<{\n \"update:checked\": [value: CheckboxChecked];\n keyup: [event: KeyboardEvent];\n click: [event: MouseEvent | KeyboardEvent];\n}>();\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n class?: unknown;\n title?: string;\n};\nconst slots = defineSlots<{\n /** Custom label content rendered next to the checkbox input. */\n default?: () => unknown;\n}>();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(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 const { class: omittedClass, ...inputAttrs } = defaultAttrs;\n void omittedClass;\n return Object.assign({}, inputAttrs, {\n onClick(event: MouseEvent) {\n if (!props.disabled) {\n emit(\"click\", event);\n }\n },\n // Pressing the enter key gets handled like a click.\n onKeyup(event: KeyboardEvent) {\n emit(\"keyup\", event);\n if (props.disabled) {\n return;\n }\n if (event.key === \"Enter\") {\n emit(\"click\", event);\n if (typeof internalChecked.value == \"boolean\") {\n internalChecked.value = !internalChecked.value;\n } else {\n if (internalChecked.value.includes(props.value)) {\n internalChecked.value = without(internalChecked.value, props.value);\n } else {\n internalChecked.value = [...internalChecked.value, props.value];\n }\n }\n }\n },\n });\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","<template>\n <div class=\"checkbox-skeleton\">\n <Skeleton\n width=\"var(--size-20)\"\n height=\"var(--size-20)\"\n radius=\"var(--border-radius-regular)\"\n :shimmer=\"shimmer\"\n />\n <Skeleton :width=\"labelWidth\" height=\"var(--size-16)\" :shimmer=\"shimmer\" />\n </div>\n</template>\n<script setup lang=\"ts\">\nimport type { PropType } from \"vue\";\nimport { Skeleton } from \"@gospore/skeleton\";\ntype SkeletonDimension = string | number;\ndefineOptions({ name: \"CheckboxSkeleton\" });\ndefineProps({\n /** Sets the placeholder width for the label line. Numbers are converted to px. */\n labelWidth: { type: [String, Number] as PropType<SkeletonDimension>, default: \"10rem\" },\n /** Enables the animated shimmer effect for the placeholder. */\n shimmer: { type: Boolean, default: false },\n});\n</script>\n<style scoped lang=\"less\">\n.checkbox-skeleton {\n display: inline-flex;\n align-items: center;\n gap: var(--size-8);\n}\n</style>\n","<template>\n <div class=\"checkbox-skeleton\">\n <Skeleton\n width=\"var(--size-20)\"\n height=\"var(--size-20)\"\n radius=\"var(--border-radius-regular)\"\n :shimmer=\"shimmer\"\n />\n <Skeleton :width=\"labelWidth\" height=\"var(--size-16)\" :shimmer=\"shimmer\" />\n </div>\n</template>\n<script setup lang=\"ts\">\nimport type { PropType } from \"vue\";\nimport { Skeleton } from \"@gospore/skeleton\";\ntype SkeletonDimension = string | number;\ndefineOptions({ name: \"CheckboxSkeleton\" });\ndefineProps({\n /** Sets the placeholder width for the label line. Numbers are converted to px. */\n labelWidth: { type: [String, Number] as PropType<SkeletonDimension>, default: \"10rem\" },\n /** Enables the animated shimmer effect for the placeholder. */\n shimmer: { type: Boolean, default: false },\n});\n</script>\n<style scoped lang=\"less\">\n.checkbox-skeleton {\n display: inline-flex;\n align-items: center;\n gap: var(--size-8);\n}\n</style>\n"],"mappings":"0oCAgDA,IAAM,EAAQ,EA4BR,EAAO,EACP,GAAA,EAAA,EAAA,UAAwB,EAIxB,GAAA,EAAA,EAAA,UAAQ,EAIR,GAAA,EAAA,EAAA,KAAc,EAAK,EACnB,GAAA,EAAA,EAAA,KAAuC,EAAM,OAAO,EAEpD,GAAA,EAAA,EAAA,cACE,OAAO,EAAgB,OAAU,UAC1B,EAAgB,MAEhB,EAAgB,MAAM,SAAS,EAAM,KAAK,CAExD,EACK,GAAA,EAAA,EAAA,cAAuB,CACzB,GAAM,CAAE,MAAO,EAAc,GAAG,GAAe,EAE/C,OAAO,OAAO,OAAO,CAAC,EAAG,EAAY,CACjC,QAAQ,EAAmB,CAClB,EAAM,UACP,EAAK,QAAS,CAAK,CAE3B,EAEA,QAAQ,EAAsB,CAC1B,EAAK,QAAS,CAAK,EACf,GAAM,UAGN,EAAM,MAAQ,UACd,EAAK,QAAS,CAAK,EACf,OAAO,EAAgB,OAAS,UAChC,EAAgB,MAAQ,CAAC,EAAgB,MAErC,EAAgB,MAAM,SAAS,EAAM,KAAK,EAC1C,EAAgB,OAAA,EAAA,EAAA,SAAgB,EAAgB,MAAO,EAAM,KAAK,EAElE,EAAgB,MAAQ,CAAC,GAAG,EAAgB,MAAO,EAAM,KAAK,EAI9E,CACJ,CAAC,CACL,CAAC,SAED,EAAA,EAAA,WACU,EAAM,QACX,GAAY,CACT,EAAgB,MAAQ,CAC5B,CACJ,GACA,EAAA,EAAA,WACU,EAAgB,UAChB,CAEE,EAAgB,OAAS,EAAM,SAC/B,EAAK,iBAAkB,EAAgB,KAAK,CAEpD,CACJ,qDA7GY,QAAA,CA7BH,OAAA,EAAA,EAAA,gBAAK,CAAA,WAAA,CAAA,oBAAsC,EAAA,QAAQ,cAAI,CAAA,EAAa,KAAK,CAAA,EACzE,OAAA,EAAA,EAAA,OAAO,CAAA,EAAa,iCAuBf,MArBN,EAqBM,EAAA,EAAA,EAAA,oBADK,OAAA,CAlBF,OAAA,EAAA,EAAA,gBAAK,CAAA,iBAAA,oBAA4G,EAAA,yBAAuD,EAAA,yCAQrF,EAAA,eAAA,EAAA,CAAjE,MAAM,sBAAuB,MAAA,EAAA,EAAA,OAAM,EAAA,OAAA,EAAS,cAAY,uEASzE,SAAA,EAAA,EAAA,YAPU,EAOV,MAPe,mCACW,MAAA,EACxB,KAAK,WACJ,MAAO,EAAA,MACP,SAAU,EAAA,SACV,QAAK,AAAA,EAAA,KAAA,GAAE,EAAA,MAAO,GACd,WAAQ,AAAA,EAAA,KAAA,GAAE,EAAA,MAAO,mCALT,EAAA,KAAe,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,EASzB,EAAM,UAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,oBAEX,MAFN,EAEM,EAAA,EAAA,EAAA,YADM,EAAA,OAAA,UAAA,CAAA,EAAA,IAAA,GAAA,EAAA,CAAA,CAAA,KAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,oBAE0C,OAAtD,GAAA,EAAA,EAAA,iBAAuC,EAAA,KAAK,EAAA,CAAA,EAAA,EAAA,GAAA,CAAA,yXErB1C,MARN,EAQM,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAFA,EAAA,QAAA,EAAA,CAJE,MAAM,iBACN,OAAO,iBACP,OAAO,+BACN,QAAS,EAAA,2DAE6D,EAAA,QAAA,EAAA,CAAhE,MAAO,EAAA,WAAY,OAAO,iBAAkB,QAAS,EAAA"}
|
|
1
|
+
{"version":3,"file":"checkbox.cjs.js","names":[],"sources":["../../shared/slot.ts","../src/Checkbox.vue","../src/Checkbox.vue","../src/CheckboxSkeleton.vue","../src/CheckboxSkeleton.vue"],"sourcesContent":["import { Comment, Fragment, isVNode, Text } from \"vue\";\nimport type { VNode, VNodeArrayChildren } from \"vue\";\n\ntype SlotFunction = () => unknown;\n\nexport function collectRenderableVNodes(children: VNodeArrayChildren | VNode[]): VNode[] {\n const nodes: VNode[] = [];\n\n children.forEach((child) => {\n if (Array.isArray(child)) {\n nodes.push(...collectRenderableVNodes(child));\n return;\n }\n if (!isVNode(child) || !isRenderableVNode(child)) {\n return;\n }\n if (child.type === Fragment && Array.isArray(child.children)) {\n nodes.push(...collectRenderableVNodes(child.children));\n return;\n }\n nodes.push(child);\n });\n\n return nodes;\n}\n\nexport function hasRenderableSlotContent(slot?: SlotFunction): boolean {\n if (!slot) {\n return false;\n }\n\n return isRenderableSlotChild(slot());\n}\n\nexport function collectSlotText(children: VNodeArrayChildren): string {\n return children\n .map((child) => {\n if (Array.isArray(child)) {\n return collectSlotText(child);\n }\n if (typeof child === \"string\" || typeof child === \"number\") {\n return String(child);\n }\n if (!isVNode(child) || child.type === Comment) {\n return \"\";\n }\n if (typeof child.children === \"string\") {\n return child.children;\n }\n if (Array.isArray(child.children)) {\n return collectSlotText(child.children);\n }\n return \"\";\n })\n .join(\"\")\n .replace(/\\s+/g, \" \")\n .trim();\n}\n\nfunction isRenderableSlotChild(child: unknown): boolean {\n if (Array.isArray(child)) {\n return child.some(isRenderableSlotChild);\n }\n if (typeof child === \"string\") {\n return child.trim() !== \"\";\n }\n if (typeof child === \"number\") {\n return true;\n }\n if (!isVNode(child) || !isRenderableVNode(child)) {\n return false;\n }\n if (child.type === Fragment) {\n return isRenderableSlotChild(child.children);\n }\n return true;\n}\n\nfunction isRenderableVNode(node: VNode): boolean {\n if (node.type === Comment) {\n return false;\n }\n if (node.type === Text) {\n return typeof node.children === \"string\" && node.children.trim() !== \"\";\n }\n return true;\n}\n","<template>\n <label\n :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n {\n 'checkbox-checked': isChecked,\n 'checkbox-focused': focused,\n },\n ]\"\n >\n <font-awesome-icon class=\"checkbox-input-icon\" :icon=\"faCheck\" aria-hidden=\"true\" />\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=\"hasDefaultContent\" class=\"checkbox-label\">\n <slot />\n </div>\n <span v-else class=\"checkbox-label\">{{ label }}</span>\n </label>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAttrs, ref, computed, watch } from \"vue\";\nimport type { PropType } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\nimport { hasRenderableSlotContent } from \"../../shared/slot\";\n\ntype CheckboxValue = string | Record<string, unknown>;\ntype CheckboxChecked = boolean | CheckboxValue[];\n\ndefineOptions({\n name: \"Checkbox\",\n inheritAttrs: false,\n});\nconst props = defineProps({\n /**\n * Controlled state. Pass a boolean for single checkboxes or an array for checkbox groups (the\n * component will push/pop value). Supports v-model:checked.\n */\n checked: {\n type: [Boolean, Array] as PropType<CheckboxChecked>,\n default: false,\n },\n /**\n * The value inserted or removed from the bound array when used in group mode. Ignored for\n * boolean usage.\n */\n value: {\n type: [String, Object] as PropType<CheckboxValue>,\n default: \"\",\n },\n /** Fallback label text when no default slot is provided. */\n label: {\n type: String,\n default: \"\",\n },\n /** Greys out the checkbox and prevents user interaction. */\n disabled: {\n type: Boolean,\n default: false,\n },\n});\nconst emit = defineEmits([\"update:checked\", \"keyup\", \"click\"]);\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n class?: unknown;\n title?: string;\n};\nconst slots = defineSlots<{\n /** Custom label content rendered next to the checkbox input. */\n default?: () => unknown;\n}>();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(props.checked);\nconst hasDefaultContent = computed(() => hasRenderableSlotContent(slots.default));\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 const { class: omittedClass, ...inputAttrs } = defaultAttrs;\n void omittedClass;\n return Object.assign({}, inputAttrs, {\n onClick(event: MouseEvent) {\n if (!props.disabled) {\n emit(\"click\", event);\n }\n },\n // Pressing the enter key gets handled like a click.\n onKeyup(event: KeyboardEvent) {\n emit(\"keyup\", event);\n if (props.disabled) {\n return;\n }\n if (event.key === \"Enter\") {\n emit(\"click\", event);\n if (typeof internalChecked.value == \"boolean\") {\n internalChecked.value = !internalChecked.value;\n } else {\n if (internalChecked.value.includes(props.value)) {\n internalChecked.value = without(internalChecked.value, props.value);\n } else {\n internalChecked.value = [...internalChecked.value, props.value];\n }\n }\n }\n },\n });\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","<template>\n <label\n :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n {\n 'checkbox-checked': isChecked,\n 'checkbox-focused': focused,\n },\n ]\"\n >\n <font-awesome-icon class=\"checkbox-input-icon\" :icon=\"faCheck\" aria-hidden=\"true\" />\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=\"hasDefaultContent\" class=\"checkbox-label\">\n <slot />\n </div>\n <span v-else class=\"checkbox-label\">{{ label }}</span>\n </label>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAttrs, ref, computed, watch } from \"vue\";\nimport type { PropType } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\nimport { hasRenderableSlotContent } from \"../../shared/slot\";\n\ntype CheckboxValue = string | Record<string, unknown>;\ntype CheckboxChecked = boolean | CheckboxValue[];\n\ndefineOptions({\n name: \"Checkbox\",\n inheritAttrs: false,\n});\nconst props = defineProps({\n /**\n * Controlled state. Pass a boolean for single checkboxes or an array for checkbox groups (the\n * component will push/pop value). Supports v-model:checked.\n */\n checked: {\n type: [Boolean, Array] as PropType<CheckboxChecked>,\n default: false,\n },\n /**\n * The value inserted or removed from the bound array when used in group mode. Ignored for\n * boolean usage.\n */\n value: {\n type: [String, Object] as PropType<CheckboxValue>,\n default: \"\",\n },\n /** Fallback label text when no default slot is provided. */\n label: {\n type: String,\n default: \"\",\n },\n /** Greys out the checkbox and prevents user interaction. */\n disabled: {\n type: Boolean,\n default: false,\n },\n});\nconst emit = defineEmits<{\n \"update:checked\": [value: CheckboxChecked];\n keyup: [event: KeyboardEvent];\n click: [event: MouseEvent | KeyboardEvent];\n}>();\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n class?: unknown;\n title?: string;\n};\nconst slots = defineSlots<{\n /** Custom label content rendered next to the checkbox input. */\n default?: () => unknown;\n}>();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(props.checked);\nconst hasDefaultContent = computed(() => hasRenderableSlotContent(slots.default));\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 const { class: omittedClass, ...inputAttrs } = defaultAttrs;\n void omittedClass;\n return Object.assign({}, inputAttrs, {\n onClick(event: MouseEvent) {\n if (!props.disabled) {\n emit(\"click\", event);\n }\n },\n // Pressing the enter key gets handled like a click.\n onKeyup(event: KeyboardEvent) {\n emit(\"keyup\", event);\n if (props.disabled) {\n return;\n }\n if (event.key === \"Enter\") {\n emit(\"click\", event);\n if (typeof internalChecked.value == \"boolean\") {\n internalChecked.value = !internalChecked.value;\n } else {\n if (internalChecked.value.includes(props.value)) {\n internalChecked.value = without(internalChecked.value, props.value);\n } else {\n internalChecked.value = [...internalChecked.value, props.value];\n }\n }\n }\n },\n });\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","<template>\n <div class=\"checkbox-skeleton\">\n <Skeleton\n width=\"var(--size-20)\"\n height=\"var(--size-20)\"\n radius=\"var(--border-radius-regular)\"\n :shimmer=\"shimmer\"\n />\n <Skeleton :width=\"labelWidth\" height=\"var(--size-16)\" :shimmer=\"shimmer\" />\n </div>\n</template>\n<script setup lang=\"ts\">\nimport type { PropType } from \"vue\";\nimport { Skeleton } from \"@gospore/skeleton\";\ntype SkeletonDimension = string | number;\ndefineOptions({ name: \"CheckboxSkeleton\" });\ndefineProps({\n /** Sets the placeholder width for the label line. Numbers are converted to px. */\n labelWidth: { type: [String, Number] as PropType<SkeletonDimension>, default: \"10rem\" },\n /** Enables the animated shimmer effect for the placeholder. */\n shimmer: { type: Boolean, default: false },\n});\n</script>\n<style scoped lang=\"less\">\n.checkbox-skeleton {\n display: inline-flex;\n align-items: center;\n gap: var(--size-8);\n}\n</style>\n","<template>\n <div class=\"checkbox-skeleton\">\n <Skeleton\n width=\"var(--size-20)\"\n height=\"var(--size-20)\"\n radius=\"var(--border-radius-regular)\"\n :shimmer=\"shimmer\"\n />\n <Skeleton :width=\"labelWidth\" height=\"var(--size-16)\" :shimmer=\"shimmer\" />\n </div>\n</template>\n<script setup lang=\"ts\">\nimport type { PropType } from \"vue\";\nimport { Skeleton } from \"@gospore/skeleton\";\ntype SkeletonDimension = string | number;\ndefineOptions({ name: \"CheckboxSkeleton\" });\ndefineProps({\n /** Sets the placeholder width for the label line. Numbers are converted to px. */\n labelWidth: { type: [String, Number] as PropType<SkeletonDimension>, default: \"10rem\" },\n /** Enables the animated shimmer effect for the placeholder. */\n shimmer: { type: Boolean, default: false },\n});\n</script>\n<style scoped lang=\"less\">\n.checkbox-skeleton {\n display: inline-flex;\n align-items: center;\n gap: var(--size-8);\n}\n</style>\n"],"mappings":"0tBA0BA,SAAgB,EAAyB,EAA8B,CAKnE,OAJK,EAIE,EAAsB,EAAK,CAAC,EAHxB,EAIf,CA2BA,SAAS,EAAsB,EAAyB,CAgBpD,OAfI,MAAM,QAAQ,CAAK,EACZ,EAAM,KAAK,CAAqB,EAEvC,OAAO,GAAU,SACV,EAAM,KAAK,IAAM,GAExB,OAAO,GAAU,SACV,GAEP,EAAA,EAAA,EAAA,QAAA,CAAS,CAAK,GAAK,CAAC,EAAkB,CAAK,EACpC,GAEP,EAAM,OAAS,EAAA,SACR,EAAsB,EAAM,QAAQ,EAExC,EACX,CAEA,SAAS,EAAkB,EAAsB,CAO7C,OANI,EAAK,OAAS,EAAA,QACP,GAEP,EAAK,OAAS,EAAA,KACP,OAAO,EAAK,UAAa,UAAY,EAAK,SAAS,KAAK,IAAM,GAElE,EACX,ibCrCA,IAAM,EAAQ,EA4BR,EAAO,EACP,GAAA,EAAA,EAAA,SAAA,CAAwB,EAIxB,GAAA,EAAA,EAAA,SAAA,CAAQ,EAIR,GAAA,EAAA,EAAA,IAAA,CAAc,EAAK,EACnB,GAAA,EAAA,EAAA,IAAA,CAAuC,EAAM,OAAO,EACpD,GAAA,EAAA,EAAA,SAAA,KAAmC,EAAyB,EAAM,OAAO,CAAC,EAE1E,GAAA,EAAA,EAAA,SAAA,KACE,OAAO,EAAgB,OAAU,UAC1B,EAAgB,MAEhB,EAAgB,MAAM,SAAS,EAAM,KAAK,CAExD,EACK,GAAA,EAAA,EAAA,SAAA,KAAuB,CACzB,GAAM,CAAE,MAAO,EAAc,GAAG,GAAe,EAE/C,OAAO,OAAO,OAAO,CAAC,EAAG,EAAY,CACjC,QAAQ,EAAmB,CAClB,EAAM,UACP,EAAK,QAAS,CAAK,CAE3B,EAEA,QAAQ,EAAsB,CAC1B,EAAK,QAAS,CAAK,EACf,GAAM,UAGN,EAAM,MAAQ,UACd,EAAK,QAAS,CAAK,EACf,OAAO,EAAgB,OAAS,UAChC,EAAgB,MAAQ,CAAC,EAAgB,MAErC,EAAgB,MAAM,SAAS,EAAM,KAAK,EAC1C,EAAgB,OAAA,EAAA,EAAA,QAAA,CAAgB,EAAgB,MAAO,EAAM,KAAK,EAElE,EAAgB,MAAQ,CAAC,GAAG,EAAgB,MAAO,EAAM,KAAK,EAI9E,CACJ,CAAC,CACL,CAAC,SAED,EAAA,EAAA,MAAA,KACU,EAAM,QACX,GAAY,CACT,EAAgB,MAAQ,CAC5B,CACJ,GACA,EAAA,EAAA,MAAA,KACU,EAAgB,UAChB,CAEE,EAAgB,OAAS,EAAM,SAC/B,EAAK,iBAAkB,EAAgB,KAAK,CAEpD,CACJ,qDA/GY,QAAA,CA7BH,OAAA,EAAA,EAAA,eAAA,CAAK,CAAA,WAAA,CAAA,oBAAsC,EAAA,QAAQ,cAAI,CAAA,CAAY,CAAC,KAAK,CAAA,EACzE,OAAA,EAAA,EAAA,MAAA,CAAO,CAAA,CAAY,CAAC,iCAuBf,MArBN,EAqBM,EAAA,EAAA,EAAA,mBAAA,CADK,OAAA,CAlBF,OAAA,EAAA,EAAA,eAAA,CAAK,CAAA,iBAAA,oBAA4G,EAAA,yBAAuD,EAAA,yCAQrF,EAAA,eAAA,EAAA,CAAjE,MAAM,sBAAuB,MAAA,EAAA,EAAA,MAAA,CAAM,EAAA,OAAA,EAAS,cAAY,uEASzE,SAAA,EAAA,EAAA,WAAA,CAPU,EAOV,MAPe,mCACW,MAAA,EACxB,KAAK,WACJ,MAAO,EAAA,MACP,SAAU,EAAA,SACV,QAAK,AAAA,EAAA,KAAA,GAAE,EAAA,MAAO,GACd,WAAQ,AAAA,EAAA,KAAA,GAAE,EAAA,MAAO,mCALT,EAAA,KAAe,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,EASzB,EAAA,QAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAEL,MAFN,EAEM,EAAA,EAAA,EAAA,WAAA,CADM,EAAA,OAAA,UAAA,CAAA,EAAA,IAAA,GAAA,EAAA,CAAA,CAAA,KAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAE0C,OAAtD,GAAA,EAAA,EAAA,gBAAA,CAAuC,EAAA,KAAK,EAAA,CAAA,EAAA,EAAA,GAAA,CAAA,yXErB1C,MARN,EAQM,EAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,MAAA,CAFA,EAAA,QAAA,EAAA,CAJE,MAAM,iBACN,OAAO,iBACP,OAAO,+BACN,QAAS,EAAA,2DAE6D,EAAA,QAAA,EAAA,CAAhE,MAAO,EAAA,WAAY,OAAO,iBAAkB,QAAS,EAAA"}
|
package/dist/checkbox.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
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:transparent;--checkbox-color-default-disabled-dark:transparent;--checkbox-color-checked-default-light:var(--color-brand-on-strong-light);--checkbox-color-checked-default-dark:var(--color-brand-on-strong-dark);--checkbox-color-checked-hover-light:var(--color-brand-on-strong-light);--checkbox-color-checked-hover-dark:var(--color-brand-on-strong-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-
|
|
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:transparent;--checkbox-color-default-disabled-dark:transparent;--checkbox-color-checked-default-light:var(--color-brand-on-strong-light);--checkbox-color-checked-default-dark:var(--color-brand-on-strong-dark);--checkbox-color-checked-hover-light:var(--color-brand-on-strong-light);--checkbox-color-checked-hover-dark:var(--color-brand-on-strong-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-eb918898]{padding:var(--checkbox-padding);display:flex;position:relative}.checkbox .checkbox-input-container[data-v-eb918898]{padding:5px}.checkbox .checkbox-input[data-v-eb918898]{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);justify-content:center;align-items:center;display:flex}.checkbox:hover .checkbox-input[data-v-eb918898]{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-eb918898]{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-eb918898]{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-eb918898]{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-eb918898]{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-eb918898]{color:var(--checkbox-color-checked-disabled-light);cursor:not-allowed}.checkbox-disabled .checkbox-input[data-v-eb918898],.checkbox-disabled:hover .checkbox-input[data-v-eb918898]{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-eb918898],.checkbox-disabled:hover .checkbox-checked[data-v-eb918898]{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-eb918898]{box-sizing:border-box;width:100%;height:100%;padding:1px}.checkbox-label[data-v-eb918898]{padding:var(--checkbox-label-padding);line-height:var(--checkbox-line-height)}input[data-v-eb918898]{opacity:0;pointer-events:none;margin:0;position:absolute}[data-whatinput=keyboard] .checkbox-focused[data-v-eb918898]{border-color:var(--checkbox-focus-outline-color-light)!important}[dark-mode=true] .checkbox .checkbox-input[data-v-eb918898]{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-eb918898]{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-eb918898]{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-eb918898]{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-eb918898]{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-eb918898]{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-eb918898]{color:var(--checkbox-color-checked-disabled-dark)}[dark-mode=true] .checkbox-disabled .checkbox-input[data-v-eb918898],[dark-mode=true] .checkbox-disabled:hover .checkbox-input[data-v-eb918898]{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-eb918898],[dark-mode=true] .checkbox-disabled:hover .checkbox-checked[data-v-eb918898]{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-eb918898]{border-color:var(--checkbox-focus-outline-color-dark)!important}.checkbox-skeleton[data-v-472ff734]{align-items:center;gap:var(--size-8);display:inline-flex}
|
|
2
2
|
/*$vite$:1*/
|
package/dist/checkbox.es.js
CHANGED
|
@@ -1,16 +1,27 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { FontAwesomeIcon as
|
|
3
|
-
import { faCheck as
|
|
4
|
-
import
|
|
5
|
-
import { Skeleton as
|
|
1
|
+
import { Comment as e, Fragment as t, Text as n, computed as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, isVNode as c, mergeProps as l, normalizeClass as u, openBlock as d, ref as f, renderSlot as p, toDisplayString as m, unref as h, useAttrs as g, useSlots as _, vModelCheckbox as v, watch as y, withDirectives as b } from "vue";
|
|
2
|
+
import { FontAwesomeIcon as x } from "@fortawesome/vue-fontawesome";
|
|
3
|
+
import { faCheck as S } from "@fortawesome/free-solid-svg-icons";
|
|
4
|
+
import C from "lodash/without.js";
|
|
5
|
+
import { Skeleton as w } from "@gospore/skeleton";
|
|
6
|
+
//#region ../shared/slot.ts
|
|
7
|
+
function T(e) {
|
|
8
|
+
return e ? E(e()) : !1;
|
|
9
|
+
}
|
|
10
|
+
function E(e) {
|
|
11
|
+
return Array.isArray(e) ? e.some(E) : typeof e == "string" ? e.trim() !== "" : typeof e == "number" ? !0 : !c(e) || !D(e) ? !1 : e.type === t ? E(e.children) : !0;
|
|
12
|
+
}
|
|
13
|
+
function D(t) {
|
|
14
|
+
return t.type === e ? !1 : t.type === n ? typeof t.children == "string" && t.children.trim() !== "" : !0;
|
|
15
|
+
}
|
|
16
|
+
//#endregion
|
|
6
17
|
//#region src/Checkbox.vue?vue&type=script&setup=true&lang.ts
|
|
7
|
-
var
|
|
18
|
+
var O = ["title"], k = { class: "checkbox-input-container" }, A = ["value", "disabled"], j = {
|
|
8
19
|
key: 0,
|
|
9
20
|
class: "checkbox-label"
|
|
10
|
-
},
|
|
21
|
+
}, M = {
|
|
11
22
|
key: 1,
|
|
12
23
|
class: "checkbox-label"
|
|
13
|
-
},
|
|
24
|
+
}, N = /*@__PURE__*/ s({
|
|
14
25
|
name: "Checkbox",
|
|
15
26
|
inheritAttrs: !1,
|
|
16
27
|
__name: "Checkbox",
|
|
@@ -37,50 +48,50 @@ var x = ["title"], S = { class: "checkbox-input-container" }, C = ["value", "dis
|
|
|
37
48
|
"keyup",
|
|
38
49
|
"click"
|
|
39
50
|
],
|
|
40
|
-
setup(
|
|
41
|
-
let
|
|
42
|
-
let { class: e, ...t } =
|
|
51
|
+
setup(e, { emit: t }) {
|
|
52
|
+
let n = e, s = t, c = g(), w = _(), E = f(!1), D = f(n.checked), N = r(() => T(w.default)), P = r(() => typeof D.value == "boolean" ? D.value : D.value.includes(n.value)), F = r(() => {
|
|
53
|
+
let { class: e, ...t } = c;
|
|
43
54
|
return Object.assign({}, t, {
|
|
44
55
|
onClick(e) {
|
|
45
|
-
|
|
56
|
+
n.disabled || s("click", e);
|
|
46
57
|
},
|
|
47
58
|
onKeyup(e) {
|
|
48
|
-
|
|
59
|
+
s("keyup", e), !n.disabled && e.key === "Enter" && (s("click", e), typeof D.value == "boolean" ? D.value = !D.value : D.value.includes(n.value) ? D.value = C(D.value, n.value) : D.value = [...D.value, n.value]);
|
|
49
60
|
}
|
|
50
61
|
});
|
|
51
62
|
});
|
|
52
|
-
return
|
|
53
|
-
|
|
54
|
-
}),
|
|
55
|
-
|
|
56
|
-
}), (
|
|
57
|
-
class:
|
|
63
|
+
return y(() => n.checked, (e) => {
|
|
64
|
+
D.value = e;
|
|
65
|
+
}), y(() => D.value, () => {
|
|
66
|
+
D.value != n.checked && s("update:checked", D.value);
|
|
67
|
+
}), (t, n) => (d(), i("label", {
|
|
68
|
+
class: u([
|
|
58
69
|
"checkbox",
|
|
59
|
-
{ "checkbox-disabled":
|
|
60
|
-
|
|
70
|
+
{ "checkbox-disabled": e.disabled },
|
|
71
|
+
h(c).class
|
|
61
72
|
]),
|
|
62
|
-
title:
|
|
63
|
-
}, [
|
|
64
|
-
"checkbox-checked":
|
|
65
|
-
"checkbox-focused":
|
|
66
|
-
}]) }, [
|
|
73
|
+
title: h(c).title
|
|
74
|
+
}, [a("div", k, [a("span", { class: u(["checkbox-input", {
|
|
75
|
+
"checkbox-checked": P.value,
|
|
76
|
+
"checkbox-focused": E.value
|
|
77
|
+
}]) }, [o(h(x), {
|
|
67
78
|
class: "checkbox-input-icon",
|
|
68
|
-
icon:
|
|
79
|
+
icon: h(S),
|
|
69
80
|
"aria-hidden": "true"
|
|
70
|
-
}, null, 8, ["icon"]),
|
|
71
|
-
"onUpdate:modelValue":
|
|
81
|
+
}, null, 8, ["icon"]), b(a("input", l(F.value, {
|
|
82
|
+
"onUpdate:modelValue": n[0] ||= (e) => D.value = e,
|
|
72
83
|
type: "checkbox",
|
|
73
|
-
value:
|
|
74
|
-
disabled:
|
|
75
|
-
onFocus:
|
|
76
|
-
onFocusout:
|
|
77
|
-
}), null, 16,
|
|
84
|
+
value: e.value,
|
|
85
|
+
disabled: e.disabled,
|
|
86
|
+
onFocus: n[1] ||= (e) => E.value = !0,
|
|
87
|
+
onFocusout: n[2] ||= (e) => E.value = !1
|
|
88
|
+
}), null, 16, A), [[v, D.value]])], 2)]), N.value ? (d(), i("div", j, [p(t.$slots, "default", {}, void 0, !0)])) : (d(), i("span", M, m(e.label), 1))], 10, O));
|
|
78
89
|
}
|
|
79
|
-
}),
|
|
90
|
+
}), P = (e, t) => {
|
|
80
91
|
let n = e.__vccOpts || e;
|
|
81
92
|
for (let [e, r] of t) n[e] = r;
|
|
82
93
|
return n;
|
|
83
|
-
},
|
|
94
|
+
}, F = /*#__PURE__*/ P(N, [["__scopeId", "data-v-eb918898"]]), I = { class: "checkbox-skeleton" }, L = /*#__PURE__*/ P(/* @__PURE__ */ s({
|
|
84
95
|
name: "CheckboxSkeleton",
|
|
85
96
|
__name: "CheckboxSkeleton",
|
|
86
97
|
props: {
|
|
@@ -94,12 +105,12 @@ var x = ["title"], S = { class: "checkbox-input-container" }, C = ["value", "dis
|
|
|
94
105
|
}
|
|
95
106
|
},
|
|
96
107
|
setup(e) {
|
|
97
|
-
return (
|
|
108
|
+
return (t, n) => (d(), i("div", I, [o(h(w), {
|
|
98
109
|
width: "var(--size-20)",
|
|
99
110
|
height: "var(--size-20)",
|
|
100
111
|
radius: "var(--border-radius-regular)",
|
|
101
112
|
shimmer: e.shimmer
|
|
102
|
-
}, null, 8, ["shimmer"]),
|
|
113
|
+
}, null, 8, ["shimmer"]), o(h(w), {
|
|
103
114
|
width: e.labelWidth,
|
|
104
115
|
height: "var(--size-16)",
|
|
105
116
|
shimmer: e.shimmer
|
|
@@ -107,6 +118,6 @@ var x = ["title"], S = { class: "checkbox-input-container" }, C = ["value", "dis
|
|
|
107
118
|
}
|
|
108
119
|
}), [["__scopeId", "data-v-472ff734"]]);
|
|
109
120
|
//#endregion
|
|
110
|
-
export {
|
|
121
|
+
export { F as Checkbox, L as CheckboxSkeleton };
|
|
111
122
|
|
|
112
123
|
//# sourceMappingURL=checkbox.es.js.map
|
package/dist/checkbox.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.es.js","names":[],"sources":["../src/Checkbox.vue","../src/Checkbox.vue","../src/CheckboxSkeleton.vue","../src/CheckboxSkeleton.vue"],"sourcesContent":["<template>\n <label\n :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n {\n 'checkbox-checked': isChecked,\n 'checkbox-focused': focused,\n },\n ]\"\n >\n <font-awesome-icon class=\"checkbox-input-icon\" :icon=\"faCheck\" aria-hidden=\"true\" />\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 lang=\"ts\">\nimport { useAttrs, ref, computed, watch } from \"vue\";\nimport type { PropType } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\n\ntype CheckboxValue = string | Record<string, unknown>;\ntype CheckboxChecked = boolean | CheckboxValue[];\n\ndefineOptions({\n name: \"Checkbox\",\n inheritAttrs: false,\n});\nconst props = defineProps({\n /**\n * Controlled state. Pass a boolean for single checkboxes or an array for checkbox groups (the\n * component will push/pop value). Supports v-model:checked.\n */\n checked: {\n type: [Boolean, Array] as PropType<CheckboxChecked>,\n default: false,\n },\n /**\n * The value inserted or removed from the bound array when used in group mode. Ignored for\n * boolean usage.\n */\n value: {\n type: [String, Object] as PropType<CheckboxValue>,\n default: \"\",\n },\n /** Fallback label text when no default slot is provided. */\n label: {\n type: String,\n default: \"\",\n },\n /** Greys out the checkbox and prevents user interaction. */\n disabled: {\n type: Boolean,\n default: false,\n },\n});\nconst emit = defineEmits([\"update:checked\", \"keyup\", \"click\"]);\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n class?: unknown;\n title?: string;\n};\nconst slots = defineSlots<{\n /** Custom label content rendered next to the checkbox input. */\n default?: () => unknown;\n}>();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(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 const { class: omittedClass, ...inputAttrs } = defaultAttrs;\n void omittedClass;\n return Object.assign({}, inputAttrs, {\n onClick(event: MouseEvent) {\n if (!props.disabled) {\n emit(\"click\", event);\n }\n },\n // Pressing the enter key gets handled like a click.\n onKeyup(event: KeyboardEvent) {\n emit(\"keyup\", event);\n if (props.disabled) {\n return;\n }\n if (event.key === \"Enter\") {\n emit(\"click\", event);\n if (typeof internalChecked.value == \"boolean\") {\n internalChecked.value = !internalChecked.value;\n } else {\n if (internalChecked.value.includes(props.value)) {\n internalChecked.value = without(internalChecked.value, props.value);\n } else {\n internalChecked.value = [...internalChecked.value, props.value];\n }\n }\n }\n },\n });\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","<template>\n <label\n :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n {\n 'checkbox-checked': isChecked,\n 'checkbox-focused': focused,\n },\n ]\"\n >\n <font-awesome-icon class=\"checkbox-input-icon\" :icon=\"faCheck\" aria-hidden=\"true\" />\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 lang=\"ts\">\nimport { useAttrs, ref, computed, watch } from \"vue\";\nimport type { PropType } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\n\ntype CheckboxValue = string | Record<string, unknown>;\ntype CheckboxChecked = boolean | CheckboxValue[];\n\ndefineOptions({\n name: \"Checkbox\",\n inheritAttrs: false,\n});\nconst props = defineProps({\n /**\n * Controlled state. Pass a boolean for single checkboxes or an array for checkbox groups (the\n * component will push/pop value). Supports v-model:checked.\n */\n checked: {\n type: [Boolean, Array] as PropType<CheckboxChecked>,\n default: false,\n },\n /**\n * The value inserted or removed from the bound array when used in group mode. Ignored for\n * boolean usage.\n */\n value: {\n type: [String, Object] as PropType<CheckboxValue>,\n default: \"\",\n },\n /** Fallback label text when no default slot is provided. */\n label: {\n type: String,\n default: \"\",\n },\n /** Greys out the checkbox and prevents user interaction. */\n disabled: {\n type: Boolean,\n default: false,\n },\n});\nconst emit = defineEmits<{\n \"update:checked\": [value: CheckboxChecked];\n keyup: [event: KeyboardEvent];\n click: [event: MouseEvent | KeyboardEvent];\n}>();\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n class?: unknown;\n title?: string;\n};\nconst slots = defineSlots<{\n /** Custom label content rendered next to the checkbox input. */\n default?: () => unknown;\n}>();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(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 const { class: omittedClass, ...inputAttrs } = defaultAttrs;\n void omittedClass;\n return Object.assign({}, inputAttrs, {\n onClick(event: MouseEvent) {\n if (!props.disabled) {\n emit(\"click\", event);\n }\n },\n // Pressing the enter key gets handled like a click.\n onKeyup(event: KeyboardEvent) {\n emit(\"keyup\", event);\n if (props.disabled) {\n return;\n }\n if (event.key === \"Enter\") {\n emit(\"click\", event);\n if (typeof internalChecked.value == \"boolean\") {\n internalChecked.value = !internalChecked.value;\n } else {\n if (internalChecked.value.includes(props.value)) {\n internalChecked.value = without(internalChecked.value, props.value);\n } else {\n internalChecked.value = [...internalChecked.value, props.value];\n }\n }\n }\n },\n });\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","<template>\n <div class=\"checkbox-skeleton\">\n <Skeleton\n width=\"var(--size-20)\"\n height=\"var(--size-20)\"\n radius=\"var(--border-radius-regular)\"\n :shimmer=\"shimmer\"\n />\n <Skeleton :width=\"labelWidth\" height=\"var(--size-16)\" :shimmer=\"shimmer\" />\n </div>\n</template>\n<script setup lang=\"ts\">\nimport type { PropType } from \"vue\";\nimport { Skeleton } from \"@gospore/skeleton\";\ntype SkeletonDimension = string | number;\ndefineOptions({ name: \"CheckboxSkeleton\" });\ndefineProps({\n /** Sets the placeholder width for the label line. Numbers are converted to px. */\n labelWidth: { type: [String, Number] as PropType<SkeletonDimension>, default: \"10rem\" },\n /** Enables the animated shimmer effect for the placeholder. */\n shimmer: { type: Boolean, default: false },\n});\n</script>\n<style scoped lang=\"less\">\n.checkbox-skeleton {\n display: inline-flex;\n align-items: center;\n gap: var(--size-8);\n}\n</style>\n","<template>\n <div class=\"checkbox-skeleton\">\n <Skeleton\n width=\"var(--size-20)\"\n height=\"var(--size-20)\"\n radius=\"var(--border-radius-regular)\"\n :shimmer=\"shimmer\"\n />\n <Skeleton :width=\"labelWidth\" height=\"var(--size-16)\" :shimmer=\"shimmer\" />\n </div>\n</template>\n<script setup lang=\"ts\">\nimport type { PropType } from \"vue\";\nimport { Skeleton } from \"@gospore/skeleton\";\ntype SkeletonDimension = string | number;\ndefineOptions({ name: \"CheckboxSkeleton\" });\ndefineProps({\n /** Sets the placeholder width for the label line. Numbers are converted to px. */\n labelWidth: { type: [String, Number] as PropType<SkeletonDimension>, default: \"10rem\" },\n /** Enables the animated shimmer effect for the placeholder. */\n shimmer: { type: Boolean, default: false },\n});\n</script>\n<style scoped lang=\"less\">\n.checkbox-skeleton {\n display: inline-flex;\n align-items: center;\n gap: var(--size-8);\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgDA,IAAM,IAAQ,GA4BR,IAAO,GACP,IAAe,EAAS,GAIxB,IAAQ,EAAA,GAIR,IAAU,EAAI,EAAK,GACnB,IAAkB,EAAqB,EAAM,OAAO,GAEpD,IAAY,QACV,OAAO,EAAgB,SAAU,YAC1B,EAAgB,QAEhB,EAAgB,MAAM,SAAS,EAAM,KAAK,CAExD,GACK,IAAQ,QAAe;GACzB,IAAM,EAAE,OAAO,GAAc,GAAG,MAAe;GAE/C,OAAO,OAAO,OAAO,CAAC,GAAG,GAAY;IACjC,QAAQ,GAAmB;KACvB,AAAK,EAAM,YACP,EAAK,SAAS,CAAK;IAE3B;IAEA,QAAQ,GAAsB;KAC1B,EAAK,SAAS,CAAK,GACf,GAAM,YAGN,EAAM,QAAQ,YACd,EAAK,SAAS,CAAK,GACf,OAAO,EAAgB,SAAS,YAChC,EAAgB,QAAQ,CAAC,EAAgB,QAErC,EAAgB,MAAM,SAAS,EAAM,KAAK,IAC1C,EAAgB,QAAQ,EAAQ,EAAgB,OAAO,EAAM,KAAK,IAElE,EAAgB,QAAQ,CAAC,GAAG,EAAgB,OAAO,EAAM,KAAK;IAI9E;GACJ,CAAC;EACL,CAAC;SAED,QACU,EAAM,UACX,MAAY;GACT,EAAgB,QAAQ;EAC5B,CACJ,GACA,QACU,EAAgB,aAChB;GAEF,AAAI,EAAgB,SAAS,EAAM,WAC/B,EAAK,kBAAkB,EAAgB,KAAK;EAEpD,CACJ,mBA3II,EA8BQ,SAAA;GA7BH,OAAK,EAAA;IAAA;IAAA,EAAA,qBAAsC,EAAA,SAAQ;IAAI,EAAA,CAAA,EAAa;GAAK,CAAA;GACzE,OAAO,EAAA,CAAA,EAAa;MAErB,EAqBM,OArBN,GAqBM,CApBF,EAmBO,QAAA,EAlBF,OAAK,EAAA,CAAA,kBAAA;uBAA4G,EAAA;uBAAuD,EAAA;UAQzK,EAAoF,EAAA,CAAA,GAAA;GAAjE,OAAM;GAAuB,MAAM,EAAA,CAAA;GAAS,eAAY;2BAC3E,EAQE,SARF,EACY,EAOV,OAPe;4CACW,QAAA;GACxB,MAAK;GACJ,OAAO,EAAA;GACP,UAAU,EAAA;GACV,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAO;GACd,YAAQ,AAAA,EAAA,QAAA,MAAE,EAAA,QAAO;yBALT,EAAA,KAAe,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,GASzB,EAAM,WAAA,EAAA,GAAjB,EAEM,OAFN,GAEM,CADF,EAAQ,EAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,EAAA,CAAA,CAAA,MAAA,EAAA,GAEZ,EAAsD,QAAtD,GAAsD,EAAf,EAAA,KAAK,GAAA,CAAA,EAAA,GAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;yBE7BhD,EAQM,OARN,GAQM,CAPF,EAKE,EAAA,CAAA,GAAA;GAJE,OAAM;GACN,QAAO;GACP,QAAO;GACN,SAAS,EAAA;4BAEd,EAA2E,EAAA,CAAA,GAAA;GAAhE,OAAO,EAAA;GAAY,QAAO;GAAkB,SAAS,EAAA"}
|
|
1
|
+
{"version":3,"file":"checkbox.es.js","names":[],"sources":["../../shared/slot.ts","../src/Checkbox.vue","../src/Checkbox.vue","../src/CheckboxSkeleton.vue","../src/CheckboxSkeleton.vue"],"sourcesContent":["import { Comment, Fragment, isVNode, Text } from \"vue\";\nimport type { VNode, VNodeArrayChildren } from \"vue\";\n\ntype SlotFunction = () => unknown;\n\nexport function collectRenderableVNodes(children: VNodeArrayChildren | VNode[]): VNode[] {\n const nodes: VNode[] = [];\n\n children.forEach((child) => {\n if (Array.isArray(child)) {\n nodes.push(...collectRenderableVNodes(child));\n return;\n }\n if (!isVNode(child) || !isRenderableVNode(child)) {\n return;\n }\n if (child.type === Fragment && Array.isArray(child.children)) {\n nodes.push(...collectRenderableVNodes(child.children));\n return;\n }\n nodes.push(child);\n });\n\n return nodes;\n}\n\nexport function hasRenderableSlotContent(slot?: SlotFunction): boolean {\n if (!slot) {\n return false;\n }\n\n return isRenderableSlotChild(slot());\n}\n\nexport function collectSlotText(children: VNodeArrayChildren): string {\n return children\n .map((child) => {\n if (Array.isArray(child)) {\n return collectSlotText(child);\n }\n if (typeof child === \"string\" || typeof child === \"number\") {\n return String(child);\n }\n if (!isVNode(child) || child.type === Comment) {\n return \"\";\n }\n if (typeof child.children === \"string\") {\n return child.children;\n }\n if (Array.isArray(child.children)) {\n return collectSlotText(child.children);\n }\n return \"\";\n })\n .join(\"\")\n .replace(/\\s+/g, \" \")\n .trim();\n}\n\nfunction isRenderableSlotChild(child: unknown): boolean {\n if (Array.isArray(child)) {\n return child.some(isRenderableSlotChild);\n }\n if (typeof child === \"string\") {\n return child.trim() !== \"\";\n }\n if (typeof child === \"number\") {\n return true;\n }\n if (!isVNode(child) || !isRenderableVNode(child)) {\n return false;\n }\n if (child.type === Fragment) {\n return isRenderableSlotChild(child.children);\n }\n return true;\n}\n\nfunction isRenderableVNode(node: VNode): boolean {\n if (node.type === Comment) {\n return false;\n }\n if (node.type === Text) {\n return typeof node.children === \"string\" && node.children.trim() !== \"\";\n }\n return true;\n}\n","<template>\n <label\n :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n {\n 'checkbox-checked': isChecked,\n 'checkbox-focused': focused,\n },\n ]\"\n >\n <font-awesome-icon class=\"checkbox-input-icon\" :icon=\"faCheck\" aria-hidden=\"true\" />\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=\"hasDefaultContent\" class=\"checkbox-label\">\n <slot />\n </div>\n <span v-else class=\"checkbox-label\">{{ label }}</span>\n </label>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAttrs, ref, computed, watch } from \"vue\";\nimport type { PropType } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\nimport { hasRenderableSlotContent } from \"../../shared/slot\";\n\ntype CheckboxValue = string | Record<string, unknown>;\ntype CheckboxChecked = boolean | CheckboxValue[];\n\ndefineOptions({\n name: \"Checkbox\",\n inheritAttrs: false,\n});\nconst props = defineProps({\n /**\n * Controlled state. Pass a boolean for single checkboxes or an array for checkbox groups (the\n * component will push/pop value). Supports v-model:checked.\n */\n checked: {\n type: [Boolean, Array] as PropType<CheckboxChecked>,\n default: false,\n },\n /**\n * The value inserted or removed from the bound array when used in group mode. Ignored for\n * boolean usage.\n */\n value: {\n type: [String, Object] as PropType<CheckboxValue>,\n default: \"\",\n },\n /** Fallback label text when no default slot is provided. */\n label: {\n type: String,\n default: \"\",\n },\n /** Greys out the checkbox and prevents user interaction. */\n disabled: {\n type: Boolean,\n default: false,\n },\n});\nconst emit = defineEmits([\"update:checked\", \"keyup\", \"click\"]);\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n class?: unknown;\n title?: string;\n};\nconst slots = defineSlots<{\n /** Custom label content rendered next to the checkbox input. */\n default?: () => unknown;\n}>();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(props.checked);\nconst hasDefaultContent = computed(() => hasRenderableSlotContent(slots.default));\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 const { class: omittedClass, ...inputAttrs } = defaultAttrs;\n void omittedClass;\n return Object.assign({}, inputAttrs, {\n onClick(event: MouseEvent) {\n if (!props.disabled) {\n emit(\"click\", event);\n }\n },\n // Pressing the enter key gets handled like a click.\n onKeyup(event: KeyboardEvent) {\n emit(\"keyup\", event);\n if (props.disabled) {\n return;\n }\n if (event.key === \"Enter\") {\n emit(\"click\", event);\n if (typeof internalChecked.value == \"boolean\") {\n internalChecked.value = !internalChecked.value;\n } else {\n if (internalChecked.value.includes(props.value)) {\n internalChecked.value = without(internalChecked.value, props.value);\n } else {\n internalChecked.value = [...internalChecked.value, props.value];\n }\n }\n }\n },\n });\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","<template>\n <label\n :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n {\n 'checkbox-checked': isChecked,\n 'checkbox-focused': focused,\n },\n ]\"\n >\n <font-awesome-icon class=\"checkbox-input-icon\" :icon=\"faCheck\" aria-hidden=\"true\" />\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=\"hasDefaultContent\" class=\"checkbox-label\">\n <slot />\n </div>\n <span v-else class=\"checkbox-label\">{{ label }}</span>\n </label>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAttrs, ref, computed, watch } from \"vue\";\nimport type { PropType } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\nimport { hasRenderableSlotContent } from \"../../shared/slot\";\n\ntype CheckboxValue = string | Record<string, unknown>;\ntype CheckboxChecked = boolean | CheckboxValue[];\n\ndefineOptions({\n name: \"Checkbox\",\n inheritAttrs: false,\n});\nconst props = defineProps({\n /**\n * Controlled state. Pass a boolean for single checkboxes or an array for checkbox groups (the\n * component will push/pop value). Supports v-model:checked.\n */\n checked: {\n type: [Boolean, Array] as PropType<CheckboxChecked>,\n default: false,\n },\n /**\n * The value inserted or removed from the bound array when used in group mode. Ignored for\n * boolean usage.\n */\n value: {\n type: [String, Object] as PropType<CheckboxValue>,\n default: \"\",\n },\n /** Fallback label text when no default slot is provided. */\n label: {\n type: String,\n default: \"\",\n },\n /** Greys out the checkbox and prevents user interaction. */\n disabled: {\n type: Boolean,\n default: false,\n },\n});\nconst emit = defineEmits<{\n \"update:checked\": [value: CheckboxChecked];\n keyup: [event: KeyboardEvent];\n click: [event: MouseEvent | KeyboardEvent];\n}>();\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n class?: unknown;\n title?: string;\n};\nconst slots = defineSlots<{\n /** Custom label content rendered next to the checkbox input. */\n default?: () => unknown;\n}>();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(props.checked);\nconst hasDefaultContent = computed(() => hasRenderableSlotContent(slots.default));\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 const { class: omittedClass, ...inputAttrs } = defaultAttrs;\n void omittedClass;\n return Object.assign({}, inputAttrs, {\n onClick(event: MouseEvent) {\n if (!props.disabled) {\n emit(\"click\", event);\n }\n },\n // Pressing the enter key gets handled like a click.\n onKeyup(event: KeyboardEvent) {\n emit(\"keyup\", event);\n if (props.disabled) {\n return;\n }\n if (event.key === \"Enter\") {\n emit(\"click\", event);\n if (typeof internalChecked.value == \"boolean\") {\n internalChecked.value = !internalChecked.value;\n } else {\n if (internalChecked.value.includes(props.value)) {\n internalChecked.value = without(internalChecked.value, props.value);\n } else {\n internalChecked.value = [...internalChecked.value, props.value];\n }\n }\n }\n },\n });\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","<template>\n <div class=\"checkbox-skeleton\">\n <Skeleton\n width=\"var(--size-20)\"\n height=\"var(--size-20)\"\n radius=\"var(--border-radius-regular)\"\n :shimmer=\"shimmer\"\n />\n <Skeleton :width=\"labelWidth\" height=\"var(--size-16)\" :shimmer=\"shimmer\" />\n </div>\n</template>\n<script setup lang=\"ts\">\nimport type { PropType } from \"vue\";\nimport { Skeleton } from \"@gospore/skeleton\";\ntype SkeletonDimension = string | number;\ndefineOptions({ name: \"CheckboxSkeleton\" });\ndefineProps({\n /** Sets the placeholder width for the label line. Numbers are converted to px. */\n labelWidth: { type: [String, Number] as PropType<SkeletonDimension>, default: \"10rem\" },\n /** Enables the animated shimmer effect for the placeholder. */\n shimmer: { type: Boolean, default: false },\n});\n</script>\n<style scoped lang=\"less\">\n.checkbox-skeleton {\n display: inline-flex;\n align-items: center;\n gap: var(--size-8);\n}\n</style>\n","<template>\n <div class=\"checkbox-skeleton\">\n <Skeleton\n width=\"var(--size-20)\"\n height=\"var(--size-20)\"\n radius=\"var(--border-radius-regular)\"\n :shimmer=\"shimmer\"\n />\n <Skeleton :width=\"labelWidth\" height=\"var(--size-16)\" :shimmer=\"shimmer\" />\n </div>\n</template>\n<script setup lang=\"ts\">\nimport type { PropType } from \"vue\";\nimport { Skeleton } from \"@gospore/skeleton\";\ntype SkeletonDimension = string | number;\ndefineOptions({ name: \"CheckboxSkeleton\" });\ndefineProps({\n /** Sets the placeholder width for the label line. Numbers are converted to px. */\n labelWidth: { type: [String, Number] as PropType<SkeletonDimension>, default: \"10rem\" },\n /** Enables the animated shimmer effect for the placeholder. */\n shimmer: { type: Boolean, default: false },\n});\n</script>\n<style scoped lang=\"less\">\n.checkbox-skeleton {\n display: inline-flex;\n align-items: center;\n gap: var(--size-8);\n}\n</style>\n"],"mappings":";;;;;;AA0BA,SAAgB,EAAyB,GAA8B;CAKnE,OAJK,IAIE,EAAsB,EAAK,CAAC,IAHxB;AAIf;AA2BA,SAAS,EAAsB,GAAyB;CAgBpD,OAfI,MAAM,QAAQ,CAAK,IACZ,EAAM,KAAK,CAAqB,IAEvC,OAAO,KAAU,WACV,EAAM,KAAK,MAAM,KAExB,OAAO,KAAU,WACV,KAEP,CAAC,EAAQ,CAAK,KAAK,CAAC,EAAkB,CAAK,IACpC,KAEP,EAAM,SAAS,IACR,EAAsB,EAAM,QAAQ,IAExC;AACX;AAEA,SAAS,EAAkB,GAAsB;CAO7C,OANI,EAAK,SAAS,IACP,KAEP,EAAK,SAAS,IACP,OAAO,EAAK,YAAa,YAAY,EAAK,SAAS,KAAK,MAAM,KAElE;AACX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECrCA,IAAM,IAAQ,GA4BR,IAAO,GACP,IAAe,EAAS,GAIxB,IAAQ,EAAA,GAIR,IAAU,EAAI,EAAK,GACnB,IAAkB,EAAqB,EAAM,OAAO,GACpD,IAAoB,QAAe,EAAyB,EAAM,OAAO,CAAC,GAE1E,IAAY,QACV,OAAO,EAAgB,SAAU,YAC1B,EAAgB,QAEhB,EAAgB,MAAM,SAAS,EAAM,KAAK,CAExD,GACK,IAAQ,QAAe;GACzB,IAAM,EAAE,OAAO,GAAc,GAAG,MAAe;GAE/C,OAAO,OAAO,OAAO,CAAC,GAAG,GAAY;IACjC,QAAQ,GAAmB;KACvB,AAAK,EAAM,YACP,EAAK,SAAS,CAAK;IAE3B;IAEA,QAAQ,GAAsB;KAC1B,EAAK,SAAS,CAAK,GACf,GAAM,YAGN,EAAM,QAAQ,YACd,EAAK,SAAS,CAAK,GACf,OAAO,EAAgB,SAAS,YAChC,EAAgB,QAAQ,CAAC,EAAgB,QAErC,EAAgB,MAAM,SAAS,EAAM,KAAK,IAC1C,EAAgB,QAAQ,EAAQ,EAAgB,OAAO,EAAM,KAAK,IAElE,EAAgB,QAAQ,CAAC,GAAG,EAAgB,OAAO,EAAM,KAAK;IAI9E;GACJ,CAAC;EACL,CAAC;SAED,QACU,EAAM,UACX,MAAY;GACT,EAAgB,QAAQ;EAC5B,CACJ,GACA,QACU,EAAgB,aAChB;GAEF,AAAI,EAAgB,SAAS,EAAM,WAC/B,EAAK,kBAAkB,EAAgB,KAAK;EAEpD,CACJ,mBA7II,EA8BQ,SAAA;GA7BH,OAAK,EAAA;IAAA;IAAA,EAAA,qBAAsC,EAAA,SAAQ;IAAI,EAAA,CAAA,CAAY,CAAC;GAAK,CAAA;GACzE,OAAO,EAAA,CAAA,CAAY,CAAC;MAErB,EAqBM,OArBN,GAqBM,CApBF,EAmBO,QAAA,EAlBF,OAAK,EAAA,CAAA,kBAAA;uBAA4G,EAAA;uBAAuD,EAAA;UAQzK,EAAoF,EAAA,CAAA,GAAA;GAAjE,OAAM;GAAuB,MAAM,EAAA,CAAA;GAAS,eAAY;2BAC3E,EAQE,SARF,EACY,EAOV,OAPe;4CACW,QAAA;GACxB,MAAK;GACJ,OAAO,EAAA;GACP,UAAU,EAAA;GACV,SAAK,AAAA,EAAA,QAAA,MAAE,EAAA,QAAO;GACd,YAAQ,AAAA,EAAA,QAAA,MAAE,EAAA,QAAO;yBALT,EAAA,KAAe,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,GASzB,EAAA,SAAA,EAAA,GAAX,EAEM,OAFN,GAEM,CADF,EAAQ,EAAA,QAAA,WAAA,CAAA,GAAA,KAAA,GAAA,EAAA,CAAA,CAAA,MAAA,EAAA,GAEZ,EAAsD,QAAtD,GAAsD,EAAf,EAAA,KAAK,GAAA,CAAA,EAAA,GAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;yBE7BhD,EAQM,OARN,GAQM,CAPF,EAKE,EAAA,CAAA,GAAA;GAJE,OAAM;GACN,QAAO;GACP,QAAO;GACN,SAAS,EAAA;4BAEd,EAA2E,EAAA,CAAA,GAAA;GAAhE,OAAO,EAAA;GAAY,QAAO;GAAkB,SAAS,EAAA"}
|
package/dist/checkbox.umd.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue"),require("@fortawesome/vue-fontawesome"),require("@fortawesome/free-solid-svg-icons"),require("lodash/without.js"),require("@gospore/skeleton")):typeof define==`function`&&define.amd?define([`exports`,`vue`,`@fortawesome/vue-fontawesome`,`@fortawesome/free-solid-svg-icons`,`lodash/without.js`,`@gospore/skeleton`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.checkbox={},e.Vue,e.VueFontawesome,e.FreeSolidIcons,e.without,e.Skeleton))})(this,function(e,t,n,r,i,a){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var o=Object.create,s=Object.defineProperty,c=Object.getOwnPropertyDescriptor,l=Object.getOwnPropertyNames,u=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty,f=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=l(t),a=0,o=i.length,u;a<o;a++)u=i[a],!d.call(e,u)&&u!==n&&s(e,u,{get:(e=>t[e]).bind(null,u),enumerable:!(r=c(t,u))||r.enumerable});return e};i=((e,t,n)=>(n=e==null?{}:o(u(e)),f(t||!e||!e.__esModule?s(n,`default`,{value:e,enumerable:!0}):n,e)))(i,1);var
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue"),require("@fortawesome/vue-fontawesome"),require("@fortawesome/free-solid-svg-icons"),require("lodash/without.js"),require("@gospore/skeleton")):typeof define==`function`&&define.amd?define([`exports`,`vue`,`@fortawesome/vue-fontawesome`,`@fortawesome/free-solid-svg-icons`,`lodash/without.js`,`@gospore/skeleton`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.checkbox={},e.Vue,e.VueFontawesome,e.FreeSolidIcons,e.without,e.Skeleton))})(this,function(e,t,n,r,i,a){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var o=Object.create,s=Object.defineProperty,c=Object.getOwnPropertyDescriptor,l=Object.getOwnPropertyNames,u=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty,f=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=l(t),a=0,o=i.length,u;a<o;a++)u=i[a],!d.call(e,u)&&u!==n&&s(e,u,{get:(e=>t[e]).bind(null,u),enumerable:!(r=c(t,u))||r.enumerable});return e};i=((e,t,n)=>(n=e==null?{}:o(u(e)),f(t||!e||!e.__esModule?s(n,`default`,{value:e,enumerable:!0}):n,e)))(i,1);function p(e){return e?m(e()):!1}function m(e){return Array.isArray(e)?e.some(m):typeof e==`string`?e.trim()!==``:typeof e==`number`?!0:!(0,t.isVNode)(e)||!h(e)?!1:e.type===t.Fragment?m(e.children):!0}function h(e){return e.type===t.Comment?!1:e.type===t.Text?typeof e.children==`string`&&e.children.trim()!==``:!0}var g=[`title`],_={class:`checkbox-input-container`},v=[`value`,`disabled`],y={key:0,class:`checkbox-label`},b={key:1,class:`checkbox-label`},x=(0,t.defineComponent)({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`,`keyup`,`click`],setup(e,{emit:a}){let o=e,s=a,c=(0,t.useAttrs)(),l=(0,t.useSlots)(),u=(0,t.ref)(!1),d=(0,t.ref)(o.checked),f=(0,t.computed)(()=>p(l.default)),m=(0,t.computed)(()=>typeof d.value==`boolean`?d.value:d.value.includes(o.value)),h=(0,t.computed)(()=>{let{class:e,...t}=c;return Object.assign({},t,{onClick(e){o.disabled||s(`click`,e)},onKeyup(e){s(`keyup`,e),!o.disabled&&e.key===`Enter`&&(s(`click`,e),typeof d.value==`boolean`?d.value=!d.value:d.value.includes(o.value)?d.value=(0,i.default)(d.value,o.value):d.value=[...d.value,o.value])}})});return(0,t.watch)(()=>o.checked,e=>{d.value=e}),(0,t.watch)(()=>d.value,()=>{d.value!=o.checked&&s(`update:checked`,d.value)}),(i,a)=>((0,t.openBlock)(),(0,t.createElementBlock)(`label`,{class:(0,t.normalizeClass)([`checkbox`,{"checkbox-disabled":e.disabled},(0,t.unref)(c).class]),title:(0,t.unref)(c).title},[(0,t.createElementVNode)(`div`,_,[(0,t.createElementVNode)(`span`,{class:(0,t.normalizeClass)([`checkbox-input`,{"checkbox-checked":m.value,"checkbox-focused":u.value}])},[(0,t.createVNode)((0,t.unref)(n.FontAwesomeIcon),{class:`checkbox-input-icon`,icon:(0,t.unref)(r.faCheck),"aria-hidden":`true`},null,8,[`icon`]),(0,t.withDirectives)((0,t.createElementVNode)(`input`,(0,t.mergeProps)(h.value,{"onUpdate:modelValue":a[0]||=e=>d.value=e,type:`checkbox`,value:e.value,disabled:e.disabled,onFocus:a[1]||=e=>u.value=!0,onFocusout:a[2]||=e=>u.value=!1}),null,16,v),[[t.vModelCheckbox,d.value]])],2)]),f.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,y,[(0,t.renderSlot)(i.$slots,`default`,{},void 0,!0)])):((0,t.openBlock)(),(0,t.createElementBlock)(`span`,b,(0,t.toDisplayString)(e.label),1))],10,g))}}),S=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},C=S(x,[[`__scopeId`,`data-v-eb918898`]]),w={class:`checkbox-skeleton`},T=S((0,t.defineComponent)({name:`CheckboxSkeleton`,__name:`CheckboxSkeleton`,props:{labelWidth:{type:[String,Number],default:`10rem`},shimmer:{type:Boolean,default:!1}},setup(e){return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,w,[(0,t.createVNode)((0,t.unref)(a.Skeleton),{width:`var(--size-20)`,height:`var(--size-20)`,radius:`var(--border-radius-regular)`,shimmer:e.shimmer},null,8,[`shimmer`]),(0,t.createVNode)((0,t.unref)(a.Skeleton),{width:e.labelWidth,height:`var(--size-16)`,shimmer:e.shimmer},null,8,[`width`,`shimmer`])]))}}),[[`__scopeId`,`data-v-472ff734`]]);e.Checkbox=C,e.CheckboxSkeleton=T});
|
|
2
2
|
//# sourceMappingURL=checkbox.umd.js.map
|
package/dist/checkbox.umd.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.umd.js","names":[],"sources":["../src/Checkbox.vue","../src/Checkbox.vue","../src/CheckboxSkeleton.vue","../src/CheckboxSkeleton.vue"],"sourcesContent":["<template>\n <label\n :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n {\n 'checkbox-checked': isChecked,\n 'checkbox-focused': focused,\n },\n ]\"\n >\n <font-awesome-icon class=\"checkbox-input-icon\" :icon=\"faCheck\" aria-hidden=\"true\" />\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 lang=\"ts\">\nimport { useAttrs, ref, computed, watch } from \"vue\";\nimport type { PropType } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\n\ntype CheckboxValue = string | Record<string, unknown>;\ntype CheckboxChecked = boolean | CheckboxValue[];\n\ndefineOptions({\n name: \"Checkbox\",\n inheritAttrs: false,\n});\nconst props = defineProps({\n /**\n * Controlled state. Pass a boolean for single checkboxes or an array for checkbox groups (the\n * component will push/pop value). Supports v-model:checked.\n */\n checked: {\n type: [Boolean, Array] as PropType<CheckboxChecked>,\n default: false,\n },\n /**\n * The value inserted or removed from the bound array when used in group mode. Ignored for\n * boolean usage.\n */\n value: {\n type: [String, Object] as PropType<CheckboxValue>,\n default: \"\",\n },\n /** Fallback label text when no default slot is provided. */\n label: {\n type: String,\n default: \"\",\n },\n /** Greys out the checkbox and prevents user interaction. */\n disabled: {\n type: Boolean,\n default: false,\n },\n});\nconst emit = defineEmits([\"update:checked\", \"keyup\", \"click\"]);\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n class?: unknown;\n title?: string;\n};\nconst slots = defineSlots<{\n /** Custom label content rendered next to the checkbox input. */\n default?: () => unknown;\n}>();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(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 const { class: omittedClass, ...inputAttrs } = defaultAttrs;\n void omittedClass;\n return Object.assign({}, inputAttrs, {\n onClick(event: MouseEvent) {\n if (!props.disabled) {\n emit(\"click\", event);\n }\n },\n // Pressing the enter key gets handled like a click.\n onKeyup(event: KeyboardEvent) {\n emit(\"keyup\", event);\n if (props.disabled) {\n return;\n }\n if (event.key === \"Enter\") {\n emit(\"click\", event);\n if (typeof internalChecked.value == \"boolean\") {\n internalChecked.value = !internalChecked.value;\n } else {\n if (internalChecked.value.includes(props.value)) {\n internalChecked.value = without(internalChecked.value, props.value);\n } else {\n internalChecked.value = [...internalChecked.value, props.value];\n }\n }\n }\n },\n });\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","<template>\n <label\n :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n {\n 'checkbox-checked': isChecked,\n 'checkbox-focused': focused,\n },\n ]\"\n >\n <font-awesome-icon class=\"checkbox-input-icon\" :icon=\"faCheck\" aria-hidden=\"true\" />\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 lang=\"ts\">\nimport { useAttrs, ref, computed, watch } from \"vue\";\nimport type { PropType } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\n\ntype CheckboxValue = string | Record<string, unknown>;\ntype CheckboxChecked = boolean | CheckboxValue[];\n\ndefineOptions({\n name: \"Checkbox\",\n inheritAttrs: false,\n});\nconst props = defineProps({\n /**\n * Controlled state. Pass a boolean for single checkboxes or an array for checkbox groups (the\n * component will push/pop value). Supports v-model:checked.\n */\n checked: {\n type: [Boolean, Array] as PropType<CheckboxChecked>,\n default: false,\n },\n /**\n * The value inserted or removed from the bound array when used in group mode. Ignored for\n * boolean usage.\n */\n value: {\n type: [String, Object] as PropType<CheckboxValue>,\n default: \"\",\n },\n /** Fallback label text when no default slot is provided. */\n label: {\n type: String,\n default: \"\",\n },\n /** Greys out the checkbox and prevents user interaction. */\n disabled: {\n type: Boolean,\n default: false,\n },\n});\nconst emit = defineEmits<{\n \"update:checked\": [value: CheckboxChecked];\n keyup: [event: KeyboardEvent];\n click: [event: MouseEvent | KeyboardEvent];\n}>();\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n class?: unknown;\n title?: string;\n};\nconst slots = defineSlots<{\n /** Custom label content rendered next to the checkbox input. */\n default?: () => unknown;\n}>();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(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 const { class: omittedClass, ...inputAttrs } = defaultAttrs;\n void omittedClass;\n return Object.assign({}, inputAttrs, {\n onClick(event: MouseEvent) {\n if (!props.disabled) {\n emit(\"click\", event);\n }\n },\n // Pressing the enter key gets handled like a click.\n onKeyup(event: KeyboardEvent) {\n emit(\"keyup\", event);\n if (props.disabled) {\n return;\n }\n if (event.key === \"Enter\") {\n emit(\"click\", event);\n if (typeof internalChecked.value == \"boolean\") {\n internalChecked.value = !internalChecked.value;\n } else {\n if (internalChecked.value.includes(props.value)) {\n internalChecked.value = without(internalChecked.value, props.value);\n } else {\n internalChecked.value = [...internalChecked.value, props.value];\n }\n }\n }\n },\n });\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","<template>\n <div class=\"checkbox-skeleton\">\n <Skeleton\n width=\"var(--size-20)\"\n height=\"var(--size-20)\"\n radius=\"var(--border-radius-regular)\"\n :shimmer=\"shimmer\"\n />\n <Skeleton :width=\"labelWidth\" height=\"var(--size-16)\" :shimmer=\"shimmer\" />\n </div>\n</template>\n<script setup lang=\"ts\">\nimport type { PropType } from \"vue\";\nimport { Skeleton } from \"@gospore/skeleton\";\ntype SkeletonDimension = string | number;\ndefineOptions({ name: \"CheckboxSkeleton\" });\ndefineProps({\n /** Sets the placeholder width for the label line. Numbers are converted to px. */\n labelWidth: { type: [String, Number] as PropType<SkeletonDimension>, default: \"10rem\" },\n /** Enables the animated shimmer effect for the placeholder. */\n shimmer: { type: Boolean, default: false },\n});\n</script>\n<style scoped lang=\"less\">\n.checkbox-skeleton {\n display: inline-flex;\n align-items: center;\n gap: var(--size-8);\n}\n</style>\n","<template>\n <div class=\"checkbox-skeleton\">\n <Skeleton\n width=\"var(--size-20)\"\n height=\"var(--size-20)\"\n radius=\"var(--border-radius-regular)\"\n :shimmer=\"shimmer\"\n />\n <Skeleton :width=\"labelWidth\" height=\"var(--size-16)\" :shimmer=\"shimmer\" />\n </div>\n</template>\n<script setup lang=\"ts\">\nimport type { PropType } from \"vue\";\nimport { Skeleton } from \"@gospore/skeleton\";\ntype SkeletonDimension = string | number;\ndefineOptions({ name: \"CheckboxSkeleton\" });\ndefineProps({\n /** Sets the placeholder width for the label line. Numbers are converted to px. */\n labelWidth: { type: [String, Number] as PropType<SkeletonDimension>, default: \"10rem\" },\n /** Enables the animated shimmer effect for the placeholder. */\n shimmer: { type: Boolean, default: false },\n});\n</script>\n<style scoped lang=\"less\">\n.checkbox-skeleton {\n display: inline-flex;\n align-items: center;\n gap: var(--size-8);\n}\n</style>\n"],"mappings":"2/CAgDA,IAAM,EAAQ,EA4BR,EAAO,EACP,GAAA,EAAA,EAAA,UAAwB,EAIxB,GAAA,EAAA,EAAA,UAAQ,EAIR,GAAA,EAAA,EAAA,KAAc,EAAK,EACnB,GAAA,EAAA,EAAA,KAAuC,EAAM,OAAO,EAEpD,GAAA,EAAA,EAAA,cACE,OAAO,EAAgB,OAAU,UAC1B,EAAgB,MAEhB,EAAgB,MAAM,SAAS,EAAM,KAAK,CAExD,EACK,GAAA,EAAA,EAAA,cAAuB,CACzB,GAAM,CAAE,MAAO,EAAc,GAAG,GAAe,EAE/C,OAAO,OAAO,OAAO,CAAC,EAAG,EAAY,CACjC,QAAQ,EAAmB,CAClB,EAAM,UACP,EAAK,QAAS,CAAK,CAE3B,EAEA,QAAQ,EAAsB,CAC1B,EAAK,QAAS,CAAK,EACf,GAAM,UAGN,EAAM,MAAQ,UACd,EAAK,QAAS,CAAK,EACf,OAAO,EAAgB,OAAS,UAChC,EAAgB,MAAQ,CAAC,EAAgB,MAErC,EAAgB,MAAM,SAAS,EAAM,KAAK,EAC1C,EAAgB,OAAA,EAAA,EAAA,SAAgB,EAAgB,MAAO,EAAM,KAAK,EAElE,EAAgB,MAAQ,CAAC,GAAG,EAAgB,MAAO,EAAM,KAAK,EAI9E,CACJ,CAAC,CACL,CAAC,SAED,EAAA,EAAA,WACU,EAAM,QACX,GAAY,CACT,EAAgB,MAAQ,CAC5B,CACJ,GACA,EAAA,EAAA,WACU,EAAgB,UAChB,CAEE,EAAgB,OAAS,EAAM,SAC/B,EAAK,iBAAkB,EAAgB,KAAK,CAEpD,CACJ,qDA7GY,QAAA,CA7BH,OAAA,EAAA,EAAA,gBAAK,CAAA,WAAA,CAAA,oBAAsC,EAAA,QAAQ,cAAI,CAAA,EAAa,KAAK,CAAA,EACzE,OAAA,EAAA,EAAA,OAAO,CAAA,EAAa,iCAuBf,MArBN,EAqBM,EAAA,EAAA,EAAA,oBADK,OAAA,CAlBF,OAAA,EAAA,EAAA,gBAAK,CAAA,iBAAA,oBAA4G,EAAA,yBAAuD,EAAA,yCAQrF,EAAA,eAAA,EAAA,CAAjE,MAAM,sBAAuB,MAAA,EAAA,EAAA,OAAM,EAAA,OAAA,EAAS,cAAY,uEASzE,SAAA,EAAA,EAAA,YAPU,EAOV,MAPe,mCACW,MAAA,EACxB,KAAK,WACJ,MAAO,EAAA,MACP,SAAU,EAAA,SACV,QAAK,AAAA,EAAA,KAAA,GAAE,EAAA,MAAO,GACd,WAAQ,AAAA,EAAA,KAAA,GAAE,EAAA,MAAO,mCALT,EAAA,KAAe,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,EASzB,EAAM,UAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,oBAEX,MAFN,EAEM,EAAA,EAAA,EAAA,YADM,EAAA,OAAA,UAAA,CAAA,EAAA,IAAA,GAAA,EAAA,CAAA,CAAA,KAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,oBAE0C,OAAtD,GAAA,EAAA,EAAA,iBAAuC,EAAA,KAAK,EAAA,CAAA,EAAA,EAAA,GAAA,CAAA,yXErB1C,MARN,EAQM,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAFA,EAAA,QAAA,EAAA,CAJE,MAAM,iBACN,OAAO,iBACP,OAAO,+BACN,QAAS,EAAA,2DAE6D,EAAA,QAAA,EAAA,CAAhE,MAAO,EAAA,WAAY,OAAO,iBAAkB,QAAS,EAAA"}
|
|
1
|
+
{"version":3,"file":"checkbox.umd.js","names":[],"sources":["../../shared/slot.ts","../src/Checkbox.vue","../src/Checkbox.vue","../src/CheckboxSkeleton.vue","../src/CheckboxSkeleton.vue"],"sourcesContent":["import { Comment, Fragment, isVNode, Text } from \"vue\";\nimport type { VNode, VNodeArrayChildren } from \"vue\";\n\ntype SlotFunction = () => unknown;\n\nexport function collectRenderableVNodes(children: VNodeArrayChildren | VNode[]): VNode[] {\n const nodes: VNode[] = [];\n\n children.forEach((child) => {\n if (Array.isArray(child)) {\n nodes.push(...collectRenderableVNodes(child));\n return;\n }\n if (!isVNode(child) || !isRenderableVNode(child)) {\n return;\n }\n if (child.type === Fragment && Array.isArray(child.children)) {\n nodes.push(...collectRenderableVNodes(child.children));\n return;\n }\n nodes.push(child);\n });\n\n return nodes;\n}\n\nexport function hasRenderableSlotContent(slot?: SlotFunction): boolean {\n if (!slot) {\n return false;\n }\n\n return isRenderableSlotChild(slot());\n}\n\nexport function collectSlotText(children: VNodeArrayChildren): string {\n return children\n .map((child) => {\n if (Array.isArray(child)) {\n return collectSlotText(child);\n }\n if (typeof child === \"string\" || typeof child === \"number\") {\n return String(child);\n }\n if (!isVNode(child) || child.type === Comment) {\n return \"\";\n }\n if (typeof child.children === \"string\") {\n return child.children;\n }\n if (Array.isArray(child.children)) {\n return collectSlotText(child.children);\n }\n return \"\";\n })\n .join(\"\")\n .replace(/\\s+/g, \" \")\n .trim();\n}\n\nfunction isRenderableSlotChild(child: unknown): boolean {\n if (Array.isArray(child)) {\n return child.some(isRenderableSlotChild);\n }\n if (typeof child === \"string\") {\n return child.trim() !== \"\";\n }\n if (typeof child === \"number\") {\n return true;\n }\n if (!isVNode(child) || !isRenderableVNode(child)) {\n return false;\n }\n if (child.type === Fragment) {\n return isRenderableSlotChild(child.children);\n }\n return true;\n}\n\nfunction isRenderableVNode(node: VNode): boolean {\n if (node.type === Comment) {\n return false;\n }\n if (node.type === Text) {\n return typeof node.children === \"string\" && node.children.trim() !== \"\";\n }\n return true;\n}\n","<template>\n <label\n :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n {\n 'checkbox-checked': isChecked,\n 'checkbox-focused': focused,\n },\n ]\"\n >\n <font-awesome-icon class=\"checkbox-input-icon\" :icon=\"faCheck\" aria-hidden=\"true\" />\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=\"hasDefaultContent\" class=\"checkbox-label\">\n <slot />\n </div>\n <span v-else class=\"checkbox-label\">{{ label }}</span>\n </label>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAttrs, ref, computed, watch } from \"vue\";\nimport type { PropType } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\nimport { hasRenderableSlotContent } from \"../../shared/slot\";\n\ntype CheckboxValue = string | Record<string, unknown>;\ntype CheckboxChecked = boolean | CheckboxValue[];\n\ndefineOptions({\n name: \"Checkbox\",\n inheritAttrs: false,\n});\nconst props = defineProps({\n /**\n * Controlled state. Pass a boolean for single checkboxes or an array for checkbox groups (the\n * component will push/pop value). Supports v-model:checked.\n */\n checked: {\n type: [Boolean, Array] as PropType<CheckboxChecked>,\n default: false,\n },\n /**\n * The value inserted or removed from the bound array when used in group mode. Ignored for\n * boolean usage.\n */\n value: {\n type: [String, Object] as PropType<CheckboxValue>,\n default: \"\",\n },\n /** Fallback label text when no default slot is provided. */\n label: {\n type: String,\n default: \"\",\n },\n /** Greys out the checkbox and prevents user interaction. */\n disabled: {\n type: Boolean,\n default: false,\n },\n});\nconst emit = defineEmits([\"update:checked\", \"keyup\", \"click\"]);\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n class?: unknown;\n title?: string;\n};\nconst slots = defineSlots<{\n /** Custom label content rendered next to the checkbox input. */\n default?: () => unknown;\n}>();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(props.checked);\nconst hasDefaultContent = computed(() => hasRenderableSlotContent(slots.default));\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 const { class: omittedClass, ...inputAttrs } = defaultAttrs;\n void omittedClass;\n return Object.assign({}, inputAttrs, {\n onClick(event: MouseEvent) {\n if (!props.disabled) {\n emit(\"click\", event);\n }\n },\n // Pressing the enter key gets handled like a click.\n onKeyup(event: KeyboardEvent) {\n emit(\"keyup\", event);\n if (props.disabled) {\n return;\n }\n if (event.key === \"Enter\") {\n emit(\"click\", event);\n if (typeof internalChecked.value == \"boolean\") {\n internalChecked.value = !internalChecked.value;\n } else {\n if (internalChecked.value.includes(props.value)) {\n internalChecked.value = without(internalChecked.value, props.value);\n } else {\n internalChecked.value = [...internalChecked.value, props.value];\n }\n }\n }\n },\n });\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","<template>\n <label\n :class=\"['checkbox', { 'checkbox-disabled': disabled }, defaultAttrs.class]\"\n :title=\"defaultAttrs.title\"\n >\n <div class=\"checkbox-input-container\">\n <span\n :class=\"[\n 'checkbox-input',\n {\n 'checkbox-checked': isChecked,\n 'checkbox-focused': focused,\n },\n ]\"\n >\n <font-awesome-icon class=\"checkbox-input-icon\" :icon=\"faCheck\" aria-hidden=\"true\" />\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=\"hasDefaultContent\" class=\"checkbox-label\">\n <slot />\n </div>\n <span v-else class=\"checkbox-label\">{{ label }}</span>\n </label>\n</template>\n\n<script setup lang=\"ts\">\nimport { useAttrs, ref, computed, watch } from \"vue\";\nimport type { PropType } from \"vue\";\nimport { FontAwesomeIcon } from \"@fortawesome/vue-fontawesome\";\nimport { faCheck } from \"@fortawesome/free-solid-svg-icons\";\nimport without from \"lodash/without.js\";\nimport { hasRenderableSlotContent } from \"../../shared/slot\";\n\ntype CheckboxValue = string | Record<string, unknown>;\ntype CheckboxChecked = boolean | CheckboxValue[];\n\ndefineOptions({\n name: \"Checkbox\",\n inheritAttrs: false,\n});\nconst props = defineProps({\n /**\n * Controlled state. Pass a boolean for single checkboxes or an array for checkbox groups (the\n * component will push/pop value). Supports v-model:checked.\n */\n checked: {\n type: [Boolean, Array] as PropType<CheckboxChecked>,\n default: false,\n },\n /**\n * The value inserted or removed from the bound array when used in group mode. Ignored for\n * boolean usage.\n */\n value: {\n type: [String, Object] as PropType<CheckboxValue>,\n default: \"\",\n },\n /** Fallback label text when no default slot is provided. */\n label: {\n type: String,\n default: \"\",\n },\n /** Greys out the checkbox and prevents user interaction. */\n disabled: {\n type: Boolean,\n default: false,\n },\n});\nconst emit = defineEmits<{\n \"update:checked\": [value: CheckboxChecked];\n keyup: [event: KeyboardEvent];\n click: [event: MouseEvent | KeyboardEvent];\n}>();\nconst defaultAttrs = useAttrs() as Record<string, unknown> & {\n class?: unknown;\n title?: string;\n};\nconst slots = defineSlots<{\n /** Custom label content rendered next to the checkbox input. */\n default?: () => unknown;\n}>();\nconst focused = ref(false);\nconst internalChecked = ref<CheckboxChecked>(props.checked);\nconst hasDefaultContent = computed(() => hasRenderableSlotContent(slots.default));\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 const { class: omittedClass, ...inputAttrs } = defaultAttrs;\n void omittedClass;\n return Object.assign({}, inputAttrs, {\n onClick(event: MouseEvent) {\n if (!props.disabled) {\n emit(\"click\", event);\n }\n },\n // Pressing the enter key gets handled like a click.\n onKeyup(event: KeyboardEvent) {\n emit(\"keyup\", event);\n if (props.disabled) {\n return;\n }\n if (event.key === \"Enter\") {\n emit(\"click\", event);\n if (typeof internalChecked.value == \"boolean\") {\n internalChecked.value = !internalChecked.value;\n } else {\n if (internalChecked.value.includes(props.value)) {\n internalChecked.value = without(internalChecked.value, props.value);\n } else {\n internalChecked.value = [...internalChecked.value, props.value];\n }\n }\n }\n },\n });\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","<template>\n <div class=\"checkbox-skeleton\">\n <Skeleton\n width=\"var(--size-20)\"\n height=\"var(--size-20)\"\n radius=\"var(--border-radius-regular)\"\n :shimmer=\"shimmer\"\n />\n <Skeleton :width=\"labelWidth\" height=\"var(--size-16)\" :shimmer=\"shimmer\" />\n </div>\n</template>\n<script setup lang=\"ts\">\nimport type { PropType } from \"vue\";\nimport { Skeleton } from \"@gospore/skeleton\";\ntype SkeletonDimension = string | number;\ndefineOptions({ name: \"CheckboxSkeleton\" });\ndefineProps({\n /** Sets the placeholder width for the label line. Numbers are converted to px. */\n labelWidth: { type: [String, Number] as PropType<SkeletonDimension>, default: \"10rem\" },\n /** Enables the animated shimmer effect for the placeholder. */\n shimmer: { type: Boolean, default: false },\n});\n</script>\n<style scoped lang=\"less\">\n.checkbox-skeleton {\n display: inline-flex;\n align-items: center;\n gap: var(--size-8);\n}\n</style>\n","<template>\n <div class=\"checkbox-skeleton\">\n <Skeleton\n width=\"var(--size-20)\"\n height=\"var(--size-20)\"\n radius=\"var(--border-radius-regular)\"\n :shimmer=\"shimmer\"\n />\n <Skeleton :width=\"labelWidth\" height=\"var(--size-16)\" :shimmer=\"shimmer\" />\n </div>\n</template>\n<script setup lang=\"ts\">\nimport type { PropType } from \"vue\";\nimport { Skeleton } from \"@gospore/skeleton\";\ntype SkeletonDimension = string | number;\ndefineOptions({ name: \"CheckboxSkeleton\" });\ndefineProps({\n /** Sets the placeholder width for the label line. Numbers are converted to px. */\n labelWidth: { type: [String, Number] as PropType<SkeletonDimension>, default: \"10rem\" },\n /** Enables the animated shimmer effect for the placeholder. */\n shimmer: { type: Boolean, default: false },\n});\n</script>\n<style scoped lang=\"less\">\n.checkbox-skeleton {\n display: inline-flex;\n align-items: center;\n gap: var(--size-8);\n}\n</style>\n"],"mappings":"2kCA0BA,SAAgB,EAAyB,EAA8B,CAKnE,OAJK,EAIE,EAAsB,EAAK,CAAC,EAHxB,EAIf,CA2BA,SAAS,EAAsB,EAAyB,CAgBpD,OAfI,MAAM,QAAQ,CAAK,EACZ,EAAM,KAAK,CAAqB,EAEvC,OAAO,GAAU,SACV,EAAM,KAAK,IAAM,GAExB,OAAO,GAAU,SACV,GAEP,EAAA,EAAA,EAAA,QAAA,CAAS,CAAK,GAAK,CAAC,EAAkB,CAAK,EACpC,GAEP,EAAM,OAAS,EAAA,SACR,EAAsB,EAAM,QAAQ,EAExC,EACX,CAEA,SAAS,EAAkB,EAAsB,CAO7C,OANI,EAAK,OAAS,EAAA,QACP,GAEP,EAAK,OAAS,EAAA,KACP,OAAO,EAAK,UAAa,UAAY,EAAK,SAAS,KAAK,IAAM,GAElE,EACX,ibCrCA,IAAM,EAAQ,EA4BR,EAAO,EACP,GAAA,EAAA,EAAA,SAAA,CAAwB,EAIxB,GAAA,EAAA,EAAA,SAAA,CAAQ,EAIR,GAAA,EAAA,EAAA,IAAA,CAAc,EAAK,EACnB,GAAA,EAAA,EAAA,IAAA,CAAuC,EAAM,OAAO,EACpD,GAAA,EAAA,EAAA,SAAA,KAAmC,EAAyB,EAAM,OAAO,CAAC,EAE1E,GAAA,EAAA,EAAA,SAAA,KACE,OAAO,EAAgB,OAAU,UAC1B,EAAgB,MAEhB,EAAgB,MAAM,SAAS,EAAM,KAAK,CAExD,EACK,GAAA,EAAA,EAAA,SAAA,KAAuB,CACzB,GAAM,CAAE,MAAO,EAAc,GAAG,GAAe,EAE/C,OAAO,OAAO,OAAO,CAAC,EAAG,EAAY,CACjC,QAAQ,EAAmB,CAClB,EAAM,UACP,EAAK,QAAS,CAAK,CAE3B,EAEA,QAAQ,EAAsB,CAC1B,EAAK,QAAS,CAAK,EACf,GAAM,UAGN,EAAM,MAAQ,UACd,EAAK,QAAS,CAAK,EACf,OAAO,EAAgB,OAAS,UAChC,EAAgB,MAAQ,CAAC,EAAgB,MAErC,EAAgB,MAAM,SAAS,EAAM,KAAK,EAC1C,EAAgB,OAAA,EAAA,EAAA,QAAA,CAAgB,EAAgB,MAAO,EAAM,KAAK,EAElE,EAAgB,MAAQ,CAAC,GAAG,EAAgB,MAAO,EAAM,KAAK,EAI9E,CACJ,CAAC,CACL,CAAC,SAED,EAAA,EAAA,MAAA,KACU,EAAM,QACX,GAAY,CACT,EAAgB,MAAQ,CAC5B,CACJ,GACA,EAAA,EAAA,MAAA,KACU,EAAgB,UAChB,CAEE,EAAgB,OAAS,EAAM,SAC/B,EAAK,iBAAkB,EAAgB,KAAK,CAEpD,CACJ,qDA/GY,QAAA,CA7BH,OAAA,EAAA,EAAA,eAAA,CAAK,CAAA,WAAA,CAAA,oBAAsC,EAAA,QAAQ,cAAI,CAAA,CAAY,CAAC,KAAK,CAAA,EACzE,OAAA,EAAA,EAAA,MAAA,CAAO,CAAA,CAAY,CAAC,iCAuBf,MArBN,EAqBM,EAAA,EAAA,EAAA,mBAAA,CADK,OAAA,CAlBF,OAAA,EAAA,EAAA,eAAA,CAAK,CAAA,iBAAA,oBAA4G,EAAA,yBAAuD,EAAA,yCAQrF,EAAA,eAAA,EAAA,CAAjE,MAAM,sBAAuB,MAAA,EAAA,EAAA,MAAA,CAAM,EAAA,OAAA,EAAS,cAAY,uEASzE,SAAA,EAAA,EAAA,WAAA,CAPU,EAOV,MAPe,mCACW,MAAA,EACxB,KAAK,WACJ,MAAO,EAAA,MACP,SAAU,EAAA,SACV,QAAK,AAAA,EAAA,KAAA,GAAE,EAAA,MAAO,GACd,WAAQ,AAAA,EAAA,KAAA,GAAE,EAAA,MAAO,mCALT,EAAA,KAAe,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,EASzB,EAAA,QAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAEL,MAFN,EAEM,EAAA,EAAA,EAAA,WAAA,CADM,EAAA,OAAA,UAAA,CAAA,EAAA,IAAA,GAAA,EAAA,CAAA,CAAA,KAAA,EAAA,EAAA,UAAA,CAAA,GAAA,EAAA,EAAA,mBAAA,CAE0C,OAAtD,GAAA,EAAA,EAAA,gBAAA,CAAuC,EAAA,KAAK,EAAA,CAAA,EAAA,EAAA,GAAA,CAAA,yXErB1C,MARN,EAQM,EAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,MAAA,CAFA,EAAA,QAAA,EAAA,CAJE,MAAM,iBACN,OAAO,iBACP,OAAO,+BACN,QAAS,EAAA,2DAE6D,EAAA,QAAA,EAAA,CAAhE,MAAO,EAAA,WAAY,OAAO,iBAAkB,QAAS,EAAA"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gospore/checkbox",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"gitHead": "
|
|
3
|
+
"version": "1.0.65",
|
|
4
|
+
"gitHead": "e6fe92d7b41871d7cf6ec867b6ecbaacc771cfb0",
|
|
5
5
|
"description": "",
|
|
6
6
|
"author": "Gospore",
|
|
7
7
|
"files": [
|
|
@@ -27,16 +27,16 @@
|
|
|
27
27
|
"build": "vite build"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@fortawesome/fontawesome-svg-core": "^7.
|
|
31
|
-
"@fortawesome/free-solid-svg-icons": "^7.
|
|
32
|
-
"@fortawesome/vue-fontawesome": "^3.
|
|
33
|
-
"@gospore/skeleton": "^1.0.
|
|
30
|
+
"@fortawesome/fontawesome-svg-core": "^7.3.0",
|
|
31
|
+
"@fortawesome/free-solid-svg-icons": "^7.3.0",
|
|
32
|
+
"@fortawesome/vue-fontawesome": "^3.3.1",
|
|
33
|
+
"@gospore/skeleton": "^1.0.8",
|
|
34
34
|
"lodash": "^4.18.1"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
37
|
"@vitejs/plugin-vue": "^6.0.7",
|
|
38
38
|
"unplugin-vue-macros": "^2.14.5",
|
|
39
|
-
"vite": "^8.
|
|
39
|
+
"vite": "^8.1.4"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"vue": "^3.4.20"
|