@gospore/checkbox 1.0.67 → 1.0.68
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.cjs +1 -1
- package/dist/checkbox.cjs.map +1 -1
- package/dist/checkbox.es.js +1 -1
- 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 +5 -5
package/dist/checkbox.cjs
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,s)=>(s=n==null?{}:e(i(n)),o(r||!n||!n.__esModule||!a.call(n,`default`)?t(s,`default`,{value:n,enumerable:!0}):s,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 h(e)}function h(e){let t=new WeakSet,n=new WeakSet,r=[{kind:`value`,value:e}];for(;r.length>0;){let e=r.pop();if(e.kind===`leave-array`){t.delete(e.array);continue}let i=e.value;if(Array.isArray(i)){g(r,i,t);continue}if(typeof i==`string`){if(i.trim()!==``)return!0;continue}if(typeof i==`number`)return!0;if(
|
|
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,s)=>(s=n==null?{}:e(i(n)),o(r||!n||!n.__esModule||!a.call(n,`default`)?t(s,`default`,{value:n,enumerable:!0}):s,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 h(e)}function h(e){let t=new WeakSet,n=new WeakSet,r=[{kind:`value`,value:e}];for(;r.length>0;){let e=r.pop();if(e.kind===`leave-array`){t.delete(e.array);continue}let i=e.value;if(Array.isArray(i)){g(r,i,t);continue}if(typeof i==`string`){if(i.trim()!==``)return!0;continue}if(typeof i==`number`)return!0;if((0,c.isVNode)(i)&&_(i)){if(i.type===c.Fragment){if(n.has(i))continue;n.add(i),r.push({kind:`value`,value:i.children});continue}return!0}}return!1}function g(e,t,n){if(!n.has(t)){n.add(t),e.push({array:t,kind:`leave-array`});for(let n=t.length-1;n>=0;--n)e.push({kind:`value`,value:t[n]})}}function _(e){return e.type===c.Comment?!1:e.type!==c.Text||typeof e.children==`string`&&e.children.trim()!==``}var v=[`title`],y={class:`checkbox-input-container`},b=[`value`,`checked`,`disabled`],x={key:0,class:`checkbox-label`},S={key:1,class:`checkbox-label`},C=(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])}})});function g(e){let t=e.currentTarget.checked;if(typeof s.value==`boolean`){s.value=t;return}t&&!s.value.includes(n.value)?s.value=[...s.value,n.value]:!t&&s.value.includes(n.value)&&(s.value=(0,d.default)(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)(`span`,y,[(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.createElementVNode)(`input`,(0,c.mergeProps)(h.value,{type:`checkbox`,value:e.value,checked:m.value,disabled:e.disabled,onChange:g,onFocus:n[0]||=e=>o.value=!0,onFocusout:n[1]||=e=>o.value=!1}),null,16,b)],2)]),f.value?((0,c.openBlock)(),(0,c.createElementBlock)(`span`,x,[(0,c.renderSlot)(t.$slots,`default`,{},void 0,!0)])):((0,c.openBlock)(),(0,c.createElementBlock)(`span`,S,(0,c.toDisplayString)(e.label),1))],10,v))}}),w=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},T=w(C,[[`__scopeId`,`data-v-2c346baa`]]),E={class:`checkbox-skeleton`},D=w((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`,E,[(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=T,exports.CheckboxSkeleton=D;
|
|
2
2
|
//# sourceMappingURL=checkbox.cjs.map
|
package/dist/checkbox.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"checkbox.cjs","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\ntype TraversalEntry = { kind: \"value\"; value: unknown } | { array: unknown[]; kind: \"leave-array\" };\n\nexport function collectRenderableVNodes(children: VNodeArrayChildren | VNode[]): VNode[] {\n const nodes: VNode[] = [];\n const activeArrays = new WeakSet<unknown[]>();\n const stack: TraversalEntry[] = [];\n pushArray(stack, children as unknown[], activeArrays);\n\n while (stack.length > 0) {\n const entry = stack.pop()!;\n if (entry.kind === \"leave-array\") {\n activeArrays.delete(entry.array);\n continue;\n }\n\n const child = entry.value;\n if (Array.isArray(child)) {\n pushArray(stack, child, activeArrays);\n continue;\n }\n if (!isVNode(child) || !isRenderableVNode(child)) {\n continue;\n }\n if (child.type === Fragment && Array.isArray(child.children)) {\n pushArray(stack, child.children, activeArrays);\n continue;\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 hasRenderableVNodeContent(slot());\n}\n\nexport function hasRenderableVNodeContent(children: unknown): boolean {\n return isRenderableSlotChild(children);\n}\n\nexport function collectSlotText(children: VNodeArrayChildren): string {\n const chunks: string[] = [];\n const activeArrays = new WeakSet<unknown[]>();\n const stack: TraversalEntry[] = [];\n pushArray(stack, children as unknown[], activeArrays);\n\n while (stack.length > 0) {\n const entry = stack.pop()!;\n if (entry.kind === \"leave-array\") {\n activeArrays.delete(entry.array);\n continue;\n }\n\n const child = entry.value;\n if (Array.isArray(child)) {\n pushArray(stack, child, activeArrays);\n continue;\n }\n if (typeof child === \"string\" || typeof child === \"number\") {\n chunks.push(String(child));\n continue;\n }\n if (!isVNode(child) || child.type === Comment) {\n continue;\n }\n if (typeof child.children === \"string\") {\n chunks.push(child.children);\n continue;\n }\n if (Array.isArray(child.children)) {\n pushArray(stack, child.children, activeArrays);\n }\n }\n\n return chunks.join(\"\").replace(/\\s+/g, \" \").trim();\n}\n\nfunction isRenderableSlotChild(child: unknown): boolean {\n const activeArrays = new WeakSet<unknown[]>();\n const visitedFragments = new WeakSet<VNode>();\n const stack: TraversalEntry[] = [{ kind: \"value\", value: child }];\n\n while (stack.length > 0) {\n const entry = stack.pop()!;\n if (entry.kind === \"leave-array\") {\n activeArrays.delete(entry.array);\n continue;\n }\n\n const current = entry.value;\n if (Array.isArray(current)) {\n pushArray(stack, current, activeArrays);\n continue;\n }\n if (typeof current === \"string\") {\n if (current.trim() !== \"\") {\n return true;\n }\n continue;\n }\n if (typeof current === \"number\") {\n return true;\n }\n if (!isVNode(current) || !isRenderableVNode(current)) {\n continue;\n }\n if (current.type === Fragment) {\n if (visitedFragments.has(current)) {\n continue;\n }\n visitedFragments.add(current);\n stack.push({ kind: \"value\", value: current.children });\n continue;\n }\n return true;\n }\n\n return false;\n}\n\nfunction pushArray(stack: TraversalEntry[], array: unknown[], activeArrays: WeakSet<unknown[]>) {\n if (activeArrays.has(array)) {\n return;\n }\n\n activeArrays.add(array);\n stack.push({ array, kind: \"leave-array\" });\n for (let index = array.length - 1; index >= 0; index -= 1) {\n stack.push({ kind: \"value\", value: array[index] });\n }\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 <span 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 type=\"checkbox\"\n :value=\"value\"\n :checked=\"isChecked\"\n :disabled=\"disabled\"\n @change=\"handleChange\"\n @focus=\"focused = true\"\n @focusout=\"focused = false\"\n />\n </span>\n </span>\n <span v-if=\"hasDefaultContent\" class=\"checkbox-label\">\n <slot />\n </span>\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\nfunction handleChange(event: Event) {\n const checked = (event.currentTarget as HTMLInputElement).checked;\n\n if (typeof internalChecked.value === \"boolean\") {\n internalChecked.value = checked;\n return;\n }\n\n if (checked && !internalChecked.value.includes(props.value)) {\n internalChecked.value = [...internalChecked.value, props.value];\n } else if (!checked && internalChecked.value.includes(props.value)) {\n internalChecked.value = without(internalChecked.value, props.value);\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 <span 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 type=\"checkbox\"\n :value=\"value\"\n :checked=\"isChecked\"\n :disabled=\"disabled\"\n @change=\"handleChange\"\n @focus=\"focused = true\"\n @focusout=\"focused = false\"\n />\n </span>\n </span>\n <span v-if=\"hasDefaultContent\" class=\"checkbox-label\">\n <slot />\n </span>\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\nfunction handleChange(event: Event) {\n const checked = (event.currentTarget as HTMLInputElement).checked;\n\n if (typeof internalChecked.value === \"boolean\") {\n internalChecked.value = checked;\n return;\n }\n\n if (checked && !internalChecked.value.includes(props.value)) {\n internalChecked.value = [...internalChecked.value, props.value];\n } else if (!checked && internalChecked.value.includes(props.value)) {\n internalChecked.value = without(internalChecked.value, props.value);\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":"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"}
|
|
1
|
+
{"version":3,"file":"checkbox.cjs","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\ntype TraversalEntry = { kind: \"value\"; value: unknown } | { array: unknown[]; kind: \"leave-array\" };\n\nexport function collectRenderableVNodes(children: VNodeArrayChildren | VNode[]): VNode[] {\n const nodes: VNode[] = [];\n const activeArrays = new WeakSet<unknown[]>();\n const stack: TraversalEntry[] = [];\n pushArray(stack, children as unknown[], activeArrays);\n\n while (stack.length > 0) {\n const entry = stack.pop()!;\n if (entry.kind === \"leave-array\") {\n activeArrays.delete(entry.array);\n continue;\n }\n\n const child = entry.value;\n if (Array.isArray(child)) {\n pushArray(stack, child, activeArrays);\n continue;\n }\n if (!isVNode(child) || !isRenderableVNode(child)) {\n continue;\n }\n if (child.type === Fragment && Array.isArray(child.children)) {\n pushArray(stack, child.children, activeArrays);\n continue;\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 hasRenderableVNodeContent(slot());\n}\n\nexport function hasRenderableVNodeContent(children: unknown): boolean {\n return isRenderableSlotChild(children);\n}\n\nexport function collectSlotText(children: VNodeArrayChildren): string {\n const chunks: string[] = [];\n const activeArrays = new WeakSet<unknown[]>();\n const stack: TraversalEntry[] = [];\n pushArray(stack, children as unknown[], activeArrays);\n\n while (stack.length > 0) {\n const entry = stack.pop()!;\n if (entry.kind === \"leave-array\") {\n activeArrays.delete(entry.array);\n continue;\n }\n\n const child = entry.value;\n if (Array.isArray(child)) {\n pushArray(stack, child, activeArrays);\n continue;\n }\n if (typeof child === \"string\" || typeof child === \"number\") {\n chunks.push(String(child));\n continue;\n }\n if (!isVNode(child) || child.type === Comment) {\n continue;\n }\n if (typeof child.children === \"string\") {\n chunks.push(child.children);\n continue;\n }\n if (Array.isArray(child.children)) {\n pushArray(stack, child.children, activeArrays);\n }\n }\n\n return chunks.join(\"\").replace(/\\s+/g, \" \").trim();\n}\n\nfunction isRenderableSlotChild(child: unknown): boolean {\n const activeArrays = new WeakSet<unknown[]>();\n const visitedFragments = new WeakSet<VNode>();\n const stack: TraversalEntry[] = [{ kind: \"value\", value: child }];\n\n while (stack.length > 0) {\n const entry = stack.pop()!;\n if (entry.kind === \"leave-array\") {\n activeArrays.delete(entry.array);\n continue;\n }\n\n const current = entry.value;\n if (Array.isArray(current)) {\n pushArray(stack, current, activeArrays);\n continue;\n }\n if (typeof current === \"string\") {\n if (current.trim() !== \"\") {\n return true;\n }\n continue;\n }\n if (typeof current === \"number\") {\n return true;\n }\n if (!isVNode(current) || !isRenderableVNode(current)) {\n continue;\n }\n if (current.type === Fragment) {\n if (visitedFragments.has(current)) {\n continue;\n }\n visitedFragments.add(current);\n stack.push({ kind: \"value\", value: current.children });\n continue;\n }\n return true;\n }\n\n return false;\n}\n\nfunction pushArray(stack: TraversalEntry[], array: unknown[], activeArrays: WeakSet<unknown[]>) {\n if (activeArrays.has(array)) {\n return;\n }\n\n activeArrays.add(array);\n stack.push({ array, kind: \"leave-array\" });\n for (let index = array.length - 1; index >= 0; index -= 1) {\n stack.push({ kind: \"value\", value: array[index] });\n }\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 <span 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 type=\"checkbox\"\n :value=\"value\"\n :checked=\"isChecked\"\n :disabled=\"disabled\"\n @change=\"handleChange\"\n @focus=\"focused = true\"\n @focusout=\"focused = false\"\n />\n </span>\n </span>\n <span v-if=\"hasDefaultContent\" class=\"checkbox-label\">\n <slot />\n </span>\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\nfunction handleChange(event: Event) {\n const checked = (event.currentTarget as HTMLInputElement).checked;\n\n if (typeof internalChecked.value === \"boolean\") {\n internalChecked.value = checked;\n return;\n }\n\n if (checked && !internalChecked.value.includes(props.value)) {\n internalChecked.value = [...internalChecked.value, props.value];\n } else if (!checked && internalChecked.value.includes(props.value)) {\n internalChecked.value = without(internalChecked.value, props.value);\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 <span 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 type=\"checkbox\"\n :value=\"value\"\n :checked=\"isChecked\"\n :disabled=\"disabled\"\n @change=\"handleChange\"\n @focus=\"focused = true\"\n @focusout=\"focused = false\"\n />\n </span>\n </span>\n <span v-if=\"hasDefaultContent\" class=\"checkbox-label\">\n <slot />\n </span>\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\nfunction handleChange(event: Event) {\n const checked = (event.currentTarget as HTMLInputElement).checked;\n\n if (typeof internalChecked.value === \"boolean\") {\n internalChecked.value = checked;\n return;\n }\n\n if (checked && !internalChecked.value.includes(props.value)) {\n internalChecked.value = [...internalChecked.value, props.value];\n } else if (!checked && internalChecked.value.includes(props.value)) {\n internalChecked.value = without(internalChecked.value, props.value);\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":"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"}
|
package/dist/checkbox.es.js
CHANGED
package/dist/checkbox.es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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\ntype TraversalEntry = { kind: \"value\"; value: unknown } | { array: unknown[]; kind: \"leave-array\" };\n\nexport function collectRenderableVNodes(children: VNodeArrayChildren | VNode[]): VNode[] {\n const nodes: VNode[] = [];\n const activeArrays = new WeakSet<unknown[]>();\n const stack: TraversalEntry[] = [];\n pushArray(stack, children as unknown[], activeArrays);\n\n while (stack.length > 0) {\n const entry = stack.pop()!;\n if (entry.kind === \"leave-array\") {\n activeArrays.delete(entry.array);\n continue;\n }\n\n const child = entry.value;\n if (Array.isArray(child)) {\n pushArray(stack, child, activeArrays);\n continue;\n }\n if (!isVNode(child) || !isRenderableVNode(child)) {\n continue;\n }\n if (child.type === Fragment && Array.isArray(child.children)) {\n pushArray(stack, child.children, activeArrays);\n continue;\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 hasRenderableVNodeContent(slot());\n}\n\nexport function hasRenderableVNodeContent(children: unknown): boolean {\n return isRenderableSlotChild(children);\n}\n\nexport function collectSlotText(children: VNodeArrayChildren): string {\n const chunks: string[] = [];\n const activeArrays = new WeakSet<unknown[]>();\n const stack: TraversalEntry[] = [];\n pushArray(stack, children as unknown[], activeArrays);\n\n while (stack.length > 0) {\n const entry = stack.pop()!;\n if (entry.kind === \"leave-array\") {\n activeArrays.delete(entry.array);\n continue;\n }\n\n const child = entry.value;\n if (Array.isArray(child)) {\n pushArray(stack, child, activeArrays);\n continue;\n }\n if (typeof child === \"string\" || typeof child === \"number\") {\n chunks.push(String(child));\n continue;\n }\n if (!isVNode(child) || child.type === Comment) {\n continue;\n }\n if (typeof child.children === \"string\") {\n chunks.push(child.children);\n continue;\n }\n if (Array.isArray(child.children)) {\n pushArray(stack, child.children, activeArrays);\n }\n }\n\n return chunks.join(\"\").replace(/\\s+/g, \" \").trim();\n}\n\nfunction isRenderableSlotChild(child: unknown): boolean {\n const activeArrays = new WeakSet<unknown[]>();\n const visitedFragments = new WeakSet<VNode>();\n const stack: TraversalEntry[] = [{ kind: \"value\", value: child }];\n\n while (stack.length > 0) {\n const entry = stack.pop()!;\n if (entry.kind === \"leave-array\") {\n activeArrays.delete(entry.array);\n continue;\n }\n\n const current = entry.value;\n if (Array.isArray(current)) {\n pushArray(stack, current, activeArrays);\n continue;\n }\n if (typeof current === \"string\") {\n if (current.trim() !== \"\") {\n return true;\n }\n continue;\n }\n if (typeof current === \"number\") {\n return true;\n }\n if (!isVNode(current) || !isRenderableVNode(current)) {\n continue;\n }\n if (current.type === Fragment) {\n if (visitedFragments.has(current)) {\n continue;\n }\n visitedFragments.add(current);\n stack.push({ kind: \"value\", value: current.children });\n continue;\n }\n return true;\n }\n\n return false;\n}\n\nfunction pushArray(stack: TraversalEntry[], array: unknown[], activeArrays: WeakSet<unknown[]>) {\n if (activeArrays.has(array)) {\n return;\n }\n\n activeArrays.add(array);\n stack.push({ array, kind: \"leave-array\" });\n for (let index = array.length - 1; index >= 0; index -= 1) {\n stack.push({ kind: \"value\", value: array[index] });\n }\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 <span 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 type=\"checkbox\"\n :value=\"value\"\n :checked=\"isChecked\"\n :disabled=\"disabled\"\n @change=\"handleChange\"\n @focus=\"focused = true\"\n @focusout=\"focused = false\"\n />\n </span>\n </span>\n <span v-if=\"hasDefaultContent\" class=\"checkbox-label\">\n <slot />\n </span>\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\nfunction handleChange(event: Event) {\n const checked = (event.currentTarget as HTMLInputElement).checked;\n\n if (typeof internalChecked.value === \"boolean\") {\n internalChecked.value = checked;\n return;\n }\n\n if (checked && !internalChecked.value.includes(props.value)) {\n internalChecked.value = [...internalChecked.value, props.value];\n } else if (!checked && internalChecked.value.includes(props.value)) {\n internalChecked.value = without(internalChecked.value, props.value);\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 <span 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 type=\"checkbox\"\n :value=\"value\"\n :checked=\"isChecked\"\n :disabled=\"disabled\"\n @change=\"handleChange\"\n @focus=\"focused = true\"\n @focusout=\"focused = false\"\n />\n </span>\n </span>\n <span v-if=\"hasDefaultContent\" class=\"checkbox-label\">\n <slot />\n </span>\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\nfunction handleChange(event: Event) {\n const checked = (event.currentTarget as HTMLInputElement).checked;\n\n if (typeof internalChecked.value === \"boolean\") {\n internalChecked.value = checked;\n return;\n }\n\n if (checked && !internalChecked.value.includes(props.value)) {\n internalChecked.value = [...internalChecked.value, props.value];\n } else if (!checked && internalChecked.value.includes(props.value)) {\n internalChecked.value = without(internalChecked.value, props.value);\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":"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"}
|
|
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\ntype TraversalEntry = { kind: \"value\"; value: unknown } | { array: unknown[]; kind: \"leave-array\" };\n\nexport function collectRenderableVNodes(children: VNodeArrayChildren | VNode[]): VNode[] {\n const nodes: VNode[] = [];\n const activeArrays = new WeakSet<unknown[]>();\n const stack: TraversalEntry[] = [];\n pushArray(stack, children as unknown[], activeArrays);\n\n while (stack.length > 0) {\n const entry = stack.pop()!;\n if (entry.kind === \"leave-array\") {\n activeArrays.delete(entry.array);\n continue;\n }\n\n const child = entry.value;\n if (Array.isArray(child)) {\n pushArray(stack, child, activeArrays);\n continue;\n }\n if (!isVNode(child) || !isRenderableVNode(child)) {\n continue;\n }\n if (child.type === Fragment && Array.isArray(child.children)) {\n pushArray(stack, child.children, activeArrays);\n continue;\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 hasRenderableVNodeContent(slot());\n}\n\nexport function hasRenderableVNodeContent(children: unknown): boolean {\n return isRenderableSlotChild(children);\n}\n\nexport function collectSlotText(children: VNodeArrayChildren): string {\n const chunks: string[] = [];\n const activeArrays = new WeakSet<unknown[]>();\n const stack: TraversalEntry[] = [];\n pushArray(stack, children as unknown[], activeArrays);\n\n while (stack.length > 0) {\n const entry = stack.pop()!;\n if (entry.kind === \"leave-array\") {\n activeArrays.delete(entry.array);\n continue;\n }\n\n const child = entry.value;\n if (Array.isArray(child)) {\n pushArray(stack, child, activeArrays);\n continue;\n }\n if (typeof child === \"string\" || typeof child === \"number\") {\n chunks.push(String(child));\n continue;\n }\n if (!isVNode(child) || child.type === Comment) {\n continue;\n }\n if (typeof child.children === \"string\") {\n chunks.push(child.children);\n continue;\n }\n if (Array.isArray(child.children)) {\n pushArray(stack, child.children, activeArrays);\n }\n }\n\n return chunks.join(\"\").replace(/\\s+/g, \" \").trim();\n}\n\nfunction isRenderableSlotChild(child: unknown): boolean {\n const activeArrays = new WeakSet<unknown[]>();\n const visitedFragments = new WeakSet<VNode>();\n const stack: TraversalEntry[] = [{ kind: \"value\", value: child }];\n\n while (stack.length > 0) {\n const entry = stack.pop()!;\n if (entry.kind === \"leave-array\") {\n activeArrays.delete(entry.array);\n continue;\n }\n\n const current = entry.value;\n if (Array.isArray(current)) {\n pushArray(stack, current, activeArrays);\n continue;\n }\n if (typeof current === \"string\") {\n if (current.trim() !== \"\") {\n return true;\n }\n continue;\n }\n if (typeof current === \"number\") {\n return true;\n }\n if (!isVNode(current) || !isRenderableVNode(current)) {\n continue;\n }\n if (current.type === Fragment) {\n if (visitedFragments.has(current)) {\n continue;\n }\n visitedFragments.add(current);\n stack.push({ kind: \"value\", value: current.children });\n continue;\n }\n return true;\n }\n\n return false;\n}\n\nfunction pushArray(stack: TraversalEntry[], array: unknown[], activeArrays: WeakSet<unknown[]>) {\n if (activeArrays.has(array)) {\n return;\n }\n\n activeArrays.add(array);\n stack.push({ array, kind: \"leave-array\" });\n for (let index = array.length - 1; index >= 0; index -= 1) {\n stack.push({ kind: \"value\", value: array[index] });\n }\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 <span 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 type=\"checkbox\"\n :value=\"value\"\n :checked=\"isChecked\"\n :disabled=\"disabled\"\n @change=\"handleChange\"\n @focus=\"focused = true\"\n @focusout=\"focused = false\"\n />\n </span>\n </span>\n <span v-if=\"hasDefaultContent\" class=\"checkbox-label\">\n <slot />\n </span>\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\nfunction handleChange(event: Event) {\n const checked = (event.currentTarget as HTMLInputElement).checked;\n\n if (typeof internalChecked.value === \"boolean\") {\n internalChecked.value = checked;\n return;\n }\n\n if (checked && !internalChecked.value.includes(props.value)) {\n internalChecked.value = [...internalChecked.value, props.value];\n } else if (!checked && internalChecked.value.includes(props.value)) {\n internalChecked.value = without(internalChecked.value, props.value);\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 <span 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 type=\"checkbox\"\n :value=\"value\"\n :checked=\"isChecked\"\n :disabled=\"disabled\"\n @change=\"handleChange\"\n @focus=\"focused = true\"\n @focusout=\"focused = false\"\n />\n </span>\n </span>\n <span v-if=\"hasDefaultContent\" class=\"checkbox-label\">\n <slot />\n </span>\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\nfunction handleChange(event: Event) {\n const checked = (event.currentTarget as HTMLInputElement).checked;\n\n if (typeof internalChecked.value === \"boolean\") {\n internalChecked.value = checked;\n return;\n }\n\n if (checked && !internalChecked.value.includes(props.value)) {\n internalChecked.value = [...internalChecked.value, props.value];\n } else if (!checked && internalChecked.value.includes(props.value)) {\n internalChecked.value = without(internalChecked.value, props.value);\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":"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"}
|
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||!d.call(e,`default`)?s(n,`default`,{value:e,enumerable:!0}):n,e)))(i,1);function p(e){return e?m(e()):!1}function m(e){return h(e)}function h(e){let n=new WeakSet,r=new WeakSet,i=[{kind:`value`,value:e}];for(;i.length>0;){let e=i.pop();if(e.kind===`leave-array`){n.delete(e.array);continue}let a=e.value;if(Array.isArray(a)){g(i,a,n);continue}if(typeof a==`string`){if(a.trim()!==``)return!0;continue}if(typeof a==`number`)return!0;if(
|
|
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||!d.call(e,`default`)?s(n,`default`,{value:e,enumerable:!0}):n,e)))(i,1);function p(e){return e?m(e()):!1}function m(e){return h(e)}function h(e){let n=new WeakSet,r=new WeakSet,i=[{kind:`value`,value:e}];for(;i.length>0;){let e=i.pop();if(e.kind===`leave-array`){n.delete(e.array);continue}let a=e.value;if(Array.isArray(a)){g(i,a,n);continue}if(typeof a==`string`){if(a.trim()!==``)return!0;continue}if(typeof a==`number`)return!0;if((0,t.isVNode)(a)&&_(a)){if(a.type===t.Fragment){if(r.has(a))continue;r.add(a),i.push({kind:`value`,value:a.children});continue}return!0}}return!1}function g(e,t,n){if(!n.has(t)){n.add(t),e.push({array:t,kind:`leave-array`});for(let n=t.length-1;n>=0;--n)e.push({kind:`value`,value:t[n]})}}function _(e){return e.type===t.Comment?!1:e.type!==t.Text||typeof e.children==`string`&&e.children.trim()!==``}var v=[`title`],y={class:`checkbox-input-container`},b=[`value`,`checked`,`disabled`],x={key:0,class:`checkbox-label`},S={key:1,class:`checkbox-label`},C=(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])}})});function g(e){let t=e.currentTarget.checked;if(typeof d.value==`boolean`){d.value=t;return}t&&!d.value.includes(o.value)?d.value=[...d.value,o.value]:!t&&d.value.includes(o.value)&&(d.value=(0,i.default)(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)(`span`,y,[(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.createElementVNode)(`input`,(0,t.mergeProps)(h.value,{type:`checkbox`,value:e.value,checked:m.value,disabled:e.disabled,onChange:g,onFocus:a[0]||=e=>u.value=!0,onFocusout:a[1]||=e=>u.value=!1}),null,16,b)],2)]),f.value?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,x,[(0,t.renderSlot)(i.$slots,`default`,{},void 0,!0)])):((0,t.openBlock)(),(0,t.createElementBlock)(`span`,S,(0,t.toDisplayString)(e.label),1))],10,v))}}),w=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},T=w(C,[[`__scopeId`,`data-v-2c346baa`]]),E={class:`checkbox-skeleton`},D=w((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`,E,[(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=T,e.CheckboxSkeleton=D});
|
|
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":["../../../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\ntype TraversalEntry = { kind: \"value\"; value: unknown } | { array: unknown[]; kind: \"leave-array\" };\n\nexport function collectRenderableVNodes(children: VNodeArrayChildren | VNode[]): VNode[] {\n const nodes: VNode[] = [];\n const activeArrays = new WeakSet<unknown[]>();\n const stack: TraversalEntry[] = [];\n pushArray(stack, children as unknown[], activeArrays);\n\n while (stack.length > 0) {\n const entry = stack.pop()!;\n if (entry.kind === \"leave-array\") {\n activeArrays.delete(entry.array);\n continue;\n }\n\n const child = entry.value;\n if (Array.isArray(child)) {\n pushArray(stack, child, activeArrays);\n continue;\n }\n if (!isVNode(child) || !isRenderableVNode(child)) {\n continue;\n }\n if (child.type === Fragment && Array.isArray(child.children)) {\n pushArray(stack, child.children, activeArrays);\n continue;\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 hasRenderableVNodeContent(slot());\n}\n\nexport function hasRenderableVNodeContent(children: unknown): boolean {\n return isRenderableSlotChild(children);\n}\n\nexport function collectSlotText(children: VNodeArrayChildren): string {\n const chunks: string[] = [];\n const activeArrays = new WeakSet<unknown[]>();\n const stack: TraversalEntry[] = [];\n pushArray(stack, children as unknown[], activeArrays);\n\n while (stack.length > 0) {\n const entry = stack.pop()!;\n if (entry.kind === \"leave-array\") {\n activeArrays.delete(entry.array);\n continue;\n }\n\n const child = entry.value;\n if (Array.isArray(child)) {\n pushArray(stack, child, activeArrays);\n continue;\n }\n if (typeof child === \"string\" || typeof child === \"number\") {\n chunks.push(String(child));\n continue;\n }\n if (!isVNode(child) || child.type === Comment) {\n continue;\n }\n if (typeof child.children === \"string\") {\n chunks.push(child.children);\n continue;\n }\n if (Array.isArray(child.children)) {\n pushArray(stack, child.children, activeArrays);\n }\n }\n\n return chunks.join(\"\").replace(/\\s+/g, \" \").trim();\n}\n\nfunction isRenderableSlotChild(child: unknown): boolean {\n const activeArrays = new WeakSet<unknown[]>();\n const visitedFragments = new WeakSet<VNode>();\n const stack: TraversalEntry[] = [{ kind: \"value\", value: child }];\n\n while (stack.length > 0) {\n const entry = stack.pop()!;\n if (entry.kind === \"leave-array\") {\n activeArrays.delete(entry.array);\n continue;\n }\n\n const current = entry.value;\n if (Array.isArray(current)) {\n pushArray(stack, current, activeArrays);\n continue;\n }\n if (typeof current === \"string\") {\n if (current.trim() !== \"\") {\n return true;\n }\n continue;\n }\n if (typeof current === \"number\") {\n return true;\n }\n if (!isVNode(current) || !isRenderableVNode(current)) {\n continue;\n }\n if (current.type === Fragment) {\n if (visitedFragments.has(current)) {\n continue;\n }\n visitedFragments.add(current);\n stack.push({ kind: \"value\", value: current.children });\n continue;\n }\n return true;\n }\n\n return false;\n}\n\nfunction pushArray(stack: TraversalEntry[], array: unknown[], activeArrays: WeakSet<unknown[]>) {\n if (activeArrays.has(array)) {\n return;\n }\n\n activeArrays.add(array);\n stack.push({ array, kind: \"leave-array\" });\n for (let index = array.length - 1; index >= 0; index -= 1) {\n stack.push({ kind: \"value\", value: array[index] });\n }\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 <span 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 type=\"checkbox\"\n :value=\"value\"\n :checked=\"isChecked\"\n :disabled=\"disabled\"\n @change=\"handleChange\"\n @focus=\"focused = true\"\n @focusout=\"focused = false\"\n />\n </span>\n </span>\n <span v-if=\"hasDefaultContent\" class=\"checkbox-label\">\n <slot />\n </span>\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\nfunction handleChange(event: Event) {\n const checked = (event.currentTarget as HTMLInputElement).checked;\n\n if (typeof internalChecked.value === \"boolean\") {\n internalChecked.value = checked;\n return;\n }\n\n if (checked && !internalChecked.value.includes(props.value)) {\n internalChecked.value = [...internalChecked.value, props.value];\n } else if (!checked && internalChecked.value.includes(props.value)) {\n internalChecked.value = without(internalChecked.value, props.value);\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 <span 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 type=\"checkbox\"\n :value=\"value\"\n :checked=\"isChecked\"\n :disabled=\"disabled\"\n @change=\"handleChange\"\n @focus=\"focused = true\"\n @focusout=\"focused = false\"\n />\n </span>\n </span>\n <span v-if=\"hasDefaultContent\" class=\"checkbox-label\">\n <slot />\n </span>\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\nfunction handleChange(event: Event) {\n const checked = (event.currentTarget as HTMLInputElement).checked;\n\n if (typeof internalChecked.value === \"boolean\") {\n internalChecked.value = checked;\n return;\n }\n\n if (checked && !internalChecked.value.includes(props.value)) {\n internalChecked.value = [...internalChecked.value, props.value];\n } else if (!checked && internalChecked.value.includes(props.value)) {\n internalChecked.value = without(internalChecked.value, props.value);\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":"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"}
|
|
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\ntype TraversalEntry = { kind: \"value\"; value: unknown } | { array: unknown[]; kind: \"leave-array\" };\n\nexport function collectRenderableVNodes(children: VNodeArrayChildren | VNode[]): VNode[] {\n const nodes: VNode[] = [];\n const activeArrays = new WeakSet<unknown[]>();\n const stack: TraversalEntry[] = [];\n pushArray(stack, children as unknown[], activeArrays);\n\n while (stack.length > 0) {\n const entry = stack.pop()!;\n if (entry.kind === \"leave-array\") {\n activeArrays.delete(entry.array);\n continue;\n }\n\n const child = entry.value;\n if (Array.isArray(child)) {\n pushArray(stack, child, activeArrays);\n continue;\n }\n if (!isVNode(child) || !isRenderableVNode(child)) {\n continue;\n }\n if (child.type === Fragment && Array.isArray(child.children)) {\n pushArray(stack, child.children, activeArrays);\n continue;\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 hasRenderableVNodeContent(slot());\n}\n\nexport function hasRenderableVNodeContent(children: unknown): boolean {\n return isRenderableSlotChild(children);\n}\n\nexport function collectSlotText(children: VNodeArrayChildren): string {\n const chunks: string[] = [];\n const activeArrays = new WeakSet<unknown[]>();\n const stack: TraversalEntry[] = [];\n pushArray(stack, children as unknown[], activeArrays);\n\n while (stack.length > 0) {\n const entry = stack.pop()!;\n if (entry.kind === \"leave-array\") {\n activeArrays.delete(entry.array);\n continue;\n }\n\n const child = entry.value;\n if (Array.isArray(child)) {\n pushArray(stack, child, activeArrays);\n continue;\n }\n if (typeof child === \"string\" || typeof child === \"number\") {\n chunks.push(String(child));\n continue;\n }\n if (!isVNode(child) || child.type === Comment) {\n continue;\n }\n if (typeof child.children === \"string\") {\n chunks.push(child.children);\n continue;\n }\n if (Array.isArray(child.children)) {\n pushArray(stack, child.children, activeArrays);\n }\n }\n\n return chunks.join(\"\").replace(/\\s+/g, \" \").trim();\n}\n\nfunction isRenderableSlotChild(child: unknown): boolean {\n const activeArrays = new WeakSet<unknown[]>();\n const visitedFragments = new WeakSet<VNode>();\n const stack: TraversalEntry[] = [{ kind: \"value\", value: child }];\n\n while (stack.length > 0) {\n const entry = stack.pop()!;\n if (entry.kind === \"leave-array\") {\n activeArrays.delete(entry.array);\n continue;\n }\n\n const current = entry.value;\n if (Array.isArray(current)) {\n pushArray(stack, current, activeArrays);\n continue;\n }\n if (typeof current === \"string\") {\n if (current.trim() !== \"\") {\n return true;\n }\n continue;\n }\n if (typeof current === \"number\") {\n return true;\n }\n if (!isVNode(current) || !isRenderableVNode(current)) {\n continue;\n }\n if (current.type === Fragment) {\n if (visitedFragments.has(current)) {\n continue;\n }\n visitedFragments.add(current);\n stack.push({ kind: \"value\", value: current.children });\n continue;\n }\n return true;\n }\n\n return false;\n}\n\nfunction pushArray(stack: TraversalEntry[], array: unknown[], activeArrays: WeakSet<unknown[]>) {\n if (activeArrays.has(array)) {\n return;\n }\n\n activeArrays.add(array);\n stack.push({ array, kind: \"leave-array\" });\n for (let index = array.length - 1; index >= 0; index -= 1) {\n stack.push({ kind: \"value\", value: array[index] });\n }\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 <span 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 type=\"checkbox\"\n :value=\"value\"\n :checked=\"isChecked\"\n :disabled=\"disabled\"\n @change=\"handleChange\"\n @focus=\"focused = true\"\n @focusout=\"focused = false\"\n />\n </span>\n </span>\n <span v-if=\"hasDefaultContent\" class=\"checkbox-label\">\n <slot />\n </span>\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\nfunction handleChange(event: Event) {\n const checked = (event.currentTarget as HTMLInputElement).checked;\n\n if (typeof internalChecked.value === \"boolean\") {\n internalChecked.value = checked;\n return;\n }\n\n if (checked && !internalChecked.value.includes(props.value)) {\n internalChecked.value = [...internalChecked.value, props.value];\n } else if (!checked && internalChecked.value.includes(props.value)) {\n internalChecked.value = without(internalChecked.value, props.value);\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 <span 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 type=\"checkbox\"\n :value=\"value\"\n :checked=\"isChecked\"\n :disabled=\"disabled\"\n @change=\"handleChange\"\n @focus=\"focused = true\"\n @focusout=\"focused = false\"\n />\n </span>\n </span>\n <span v-if=\"hasDefaultContent\" class=\"checkbox-label\">\n <slot />\n </span>\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\nfunction handleChange(event: Event) {\n const checked = (event.currentTarget as HTMLInputElement).checked;\n\n if (typeof internalChecked.value === \"boolean\") {\n internalChecked.value = checked;\n return;\n }\n\n if (checked && !internalChecked.value.includes(props.value)) {\n internalChecked.value = [...internalChecked.value, props.value];\n } else if (!checked && internalChecked.value.includes(props.value)) {\n internalChecked.value = without(internalChecked.value, props.value);\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":"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"}
|
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.68",
|
|
4
|
+
"gitHead": "aedd6c85f6c003459242b11140de520662ed235f",
|
|
5
5
|
"description": "",
|
|
6
6
|
"author": "Gospore",
|
|
7
7
|
"files": [
|
|
@@ -29,14 +29,14 @@
|
|
|
29
29
|
"@fortawesome/fontawesome-svg-core": "^7.3.1",
|
|
30
30
|
"@fortawesome/free-solid-svg-icons": "^7.3.1",
|
|
31
31
|
"@fortawesome/vue-fontawesome": "^3.3.3",
|
|
32
|
-
"@gospore/skeleton": "^1.0.
|
|
32
|
+
"@gospore/skeleton": "^1.0.11",
|
|
33
33
|
"lodash": "^4.18.1"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
36
|
"@vitejs/plugin-vue": "^6.0.8",
|
|
37
37
|
"unplugin-vue-macros": "^2.14.5",
|
|
38
|
-
"vite": "^8.2.
|
|
39
|
-
"vue": "^3.5.
|
|
38
|
+
"vite": "^8.2.2",
|
|
39
|
+
"vue": "^3.5.42"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"vue": "^3.4.20"
|