File size: 2,619 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 90 91 92 |
import { createCombobox } from "@melt-ui/svelte";
import { getContext, setContext } from "svelte";
import { createBitAttrs, generateId, getOptionUpdater, removeUndefined, } from "../../internal/index.js";
import { getPositioningUpdater } from "../floating/helpers.js";
function getSelectData() {
const NAME = "combobox";
const GROUP_NAME = "combobox-group";
const ITEM_NAME = "combobox-item";
const PARTS = [
"content",
"menu",
"input",
"item",
"label",
"group",
"group-label",
"arrow",
"hidden-input",
"indicator",
];
return {
NAME,
GROUP_NAME,
ITEM_NAME,
PARTS,
};
}
export function getCtx() {
const { NAME } = getSelectData();
return getContext(NAME);
}
export function setCtx(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
props) {
const { NAME, PARTS } = getSelectData();
const getAttrs = createBitAttrs(NAME, PARTS);
const combobox = {
...createCombobox({ ...removeUndefined(props), forceVisible: true }),
getAttrs,
};
setContext(NAME, combobox);
return {
...combobox,
updateOption: getOptionUpdater(combobox.options),
};
}
export function setGroupCtx() {
const { GROUP_NAME } = getSelectData();
const id = generateId();
setContext(GROUP_NAME, id);
const { elements: { group }, getAttrs, } = getCtx();
return { group, id, getAttrs };
}
export function setItemCtx(value) {
const { ITEM_NAME } = getSelectData();
const combobox = getCtx();
setContext(ITEM_NAME, value);
return combobox;
}
export function getGroupLabel() {
const { GROUP_NAME } = getSelectData();
const id = getContext(GROUP_NAME);
const { elements: { groupLabel }, getAttrs, } = getCtx();
return { groupLabel, id, getAttrs };
}
export function getItemIndicator() {
const { ITEM_NAME } = getSelectData();
const { helpers: { isSelected }, getAttrs, } = getCtx();
const value = getContext(ITEM_NAME);
return {
value,
isSelected,
getAttrs,
};
}
export function setArrow(size = 8) {
const combobox = getCtx();
combobox.options.arrowSize?.set(size);
return combobox;
}
export function updatePositioning(props) {
const defaultPlacement = {
side: "bottom",
align: "center",
sameWidth: true,
};
const withDefaults = { ...defaultPlacement, ...props };
const { options: { positioning }, } = getCtx();
const updater = getPositioningUpdater(positioning);
updater(withDefaults);
}
|