File size: 2,386 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 |
import { addMeltEventListener, makeElement, createElHelpers, disabledAttr, omit, overridable, styleToString, toWritableStores, } from '../../internal/helpers/index.js';
import { derived, writable } from 'svelte/store';
const defaults = {
defaultOpen: false,
disabled: false,
forceVisible: false,
};
const { name } = createElHelpers('collapsible');
export function createCollapsible(props) {
const withDefaults = { ...defaults, ...props };
const options = toWritableStores(omit(withDefaults, 'open', 'defaultOpen', 'onOpenChange'));
const { disabled, forceVisible } = options;
const openWritable = withDefaults.open ?? writable(withDefaults.defaultOpen);
const open = overridable(openWritable, withDefaults?.onOpenChange);
const root = makeElement(name(), {
stores: [open, disabled],
returned: ([$open, $disabled]) => ({
'data-state': $open ? 'open' : 'closed',
'data-disabled': disabledAttr($disabled),
}),
});
const trigger = makeElement(name('trigger'), {
stores: [open, disabled],
returned: ([$open, $disabled]) => ({
'data-state': $open ? 'open' : 'closed',
'data-disabled': disabledAttr($disabled),
disabled: disabledAttr($disabled),
}),
action: (node) => {
const unsub = addMeltEventListener(node, 'click', () => {
const disabled = node.dataset.disabled !== undefined;
if (disabled)
return;
open.update(($open) => !$open);
});
return {
destroy: unsub,
};
},
});
const isVisible = derived([open, forceVisible], ([$open, $forceVisible]) => $open || $forceVisible);
const content = makeElement(name('content'), {
stores: [isVisible, disabled],
returned: ([$isVisible, $disabled]) => ({
'data-state': $isVisible ? 'open' : 'closed',
'data-disabled': disabledAttr($disabled),
hidden: $isVisible ? undefined : true,
style: styleToString({
display: $isVisible ? undefined : 'none',
}),
}),
});
return {
elements: {
root,
trigger,
content,
},
states: {
open,
},
options,
};
}
|