File size: 2,841 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 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
<script context="module"></script>
<script generics="T, Multiple extends boolean = false">import { arraysAreEqual } from "../../../internal/arrays.js";
import { derived } from "svelte/store";
import { setCtx } from "../ctx.js";
export let required = void 0;
export let disabled = void 0;
export let preventScroll = void 0;
export let loop = void 0;
export let closeOnEscape = void 0;
export let closeOnOutsideClick = void 0;
export let portal = void 0;
export let name = void 0;
export let multiple = false;
export let selected = void 0;
export let onSelectedChange = void 0;
export let open = void 0;
export let onOpenChange = void 0;
export let items = [];
export let onOutsideClick = void 0;
export let inputValue = "";
const {
states: { open: localOpen, selected: localSelected, inputValue: localInputValue, touchedInput },
updateOption,
ids
} = setCtx({
required,
disabled,
preventScroll,
loop,
closeOnEscape,
closeOnOutsideClick,
portal,
name,
onOutsideClick,
multiple,
forceVisible: true,
defaultSelected: Array.isArray(selected) ? [...selected] : (
// eslint-disable-next-line @typescript-eslint/no-explicit-any
selected
),
defaultOpen: open,
onSelectedChange: ({ next }) => {
if (Array.isArray(next)) {
if (!Array.isArray(selected) || !arraysAreEqual(selected, next)) {
onSelectedChange?.(next);
selected = next;
return next;
}
return next;
}
if (selected !== next) {
onSelectedChange?.(next);
selected = next;
}
inputValue = next?.label ?? (typeof next?.value === "string" ? next?.value : "");
localInputValue.set(inputValue);
return next;
},
onOpenChange: ({ next }) => {
if (open !== next) {
onOpenChange?.(next);
open = next;
}
return next;
},
items
});
const idValues = derived(
[ids.menu, ids.trigger, ids.label],
([$menuId, $triggerId, $labelId]) => ({
menu: $menuId,
trigger: $triggerId,
label: $labelId
})
);
$:
if ($touchedInput)
inputValue = $localInputValue;
$:
inputValue !== void 0 && localInputValue.set(inputValue);
$:
open !== void 0 && localOpen.set(open);
$:
selected !== void 0 && localSelected.set(
Array.isArray(selected) ? [...selected] : (
// eslint-disable-next-line @typescript-eslint/no-explicit-any
selected
)
);
$:
updateOption("required", required);
$:
updateOption("disabled", disabled);
$:
updateOption("preventScroll", preventScroll);
$:
updateOption("loop", loop);
$:
updateOption("closeOnEscape", closeOnEscape);
$:
updateOption("closeOnOutsideClick", closeOnOutsideClick);
$:
updateOption("portal", portal);
$:
updateOption("name", name);
$:
updateOption("multiple", multiple);
$:
updateOption("onOutsideClick", onOutsideClick);
</script>
<slot ids={$idValues} />
|