File size: 3,343 Bytes
bc20498 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
import { addMeltEventListener, makeElement, disabledAttr, executeCallbacks, kbd, omit, overridable, styleToString, toWritableStores, } from '../../internal/helpers/index.js';
import { derived, writable } from 'svelte/store';
const defaults = {
disabled: false,
required: false,
name: undefined,
value: 'on',
defaultChecked: false,
};
export function createCheckbox(props) {
const withDefaults = { ...defaults, ...props };
const options = toWritableStores(omit(withDefaults, 'checked', 'defaultChecked'));
const { disabled, name, required, value } = options;
// States
const checkedWritable = withDefaults.checked ?? writable(withDefaults.defaultChecked);
const checked = overridable(checkedWritable, withDefaults?.onCheckedChange);
const root = makeElement('checkbox', {
stores: [checked, disabled, required],
returned: ([$checked, $disabled, $required]) => {
return {
'data-disabled': disabledAttr($disabled),
disabled: disabledAttr($disabled),
'data-state': $checked === 'indeterminate' ? 'indeterminate' : $checked ? 'checked' : 'unchecked',
type: 'button',
role: 'checkbox',
'aria-checked': $checked === 'indeterminate' ? 'mixed' : $checked,
'aria-required': $required,
};
},
action: (node) => {
const unsub = executeCallbacks(addMeltEventListener(node, 'keydown', (e) => {
// According to WAI ARIA, Checkboxes don't activate on enter keypress
if (e.key === kbd.ENTER)
e.preventDefault();
}), addMeltEventListener(node, 'click', () => {
if (disabled.get())
return;
checked.update((value) => {
if (value === 'indeterminate')
return true;
return !value;
});
}));
return {
destroy: unsub,
};
},
});
const input = makeElement('checkbox-input', {
stores: [checked, name, value, required, disabled],
returned: ([$checked, $name, $value, $required, $disabled]) => {
return {
type: 'checkbox',
'aria-hidden': true,
hidden: true,
tabindex: -1,
name: $name,
value: $value,
checked: $checked === 'indeterminate' ? false : $checked,
required: $required,
disabled: disabledAttr($disabled),
style: styleToString({
position: 'absolute',
opacity: 0,
'pointer-events': 'none',
margin: 0,
transform: 'translateX(-100%)',
}),
};
},
});
const isIndeterminate = derived(checked, ($checked) => $checked === 'indeterminate');
const isChecked = derived(checked, ($checked) => $checked === true);
return {
elements: {
root,
input,
},
states: {
checked,
},
helpers: {
isIndeterminate,
isChecked,
},
options,
};
}
|