This commit is contained in:
eewing
2026-02-17 14:10:16 -06:00
parent 2bca5834c5
commit cf73cd3b4c
11246 changed files with 1690552 additions and 0 deletions
@@ -0,0 +1,41 @@
<script lang="ts">
import { boxWith, mergeProps } from "svelte-toolbelt";
import type { ComboboxInputProps } from "../types.js";
import { useId } from "../../../internal/use-id.js";
import { FloatingLayer } from "../../utilities/floating-layer/index.js";
import { SelectInputState } from "../../select/select.svelte.js";
let {
id = useId(),
ref = $bindable(null),
child,
defaultValue,
clearOnDeselect = false,
...restProps
}: ComboboxInputProps = $props();
const inputState = SelectInputState.create({
id: boxWith(() => id),
ref: boxWith(
() => ref,
(v) => (ref = v)
),
clearOnDeselect: boxWith(() => clearOnDeselect),
});
if (defaultValue) {
inputState.root.opts.inputValue.current = defaultValue;
}
const mergedProps = $derived(
mergeProps(restProps, inputState.props, { value: inputState.root.opts.inputValue.current })
);
</script>
<FloatingLayer.Anchor {id} ref={inputState.opts.ref}>
{#if child}
{@render child({ props: mergedProps })}
{:else}
<input {...mergedProps} />
{/if}
</FloatingLayer.Anchor>
@@ -0,0 +1,4 @@
import type { ComboboxInputProps } from "../types.js";
declare const ComboboxInput: import("svelte").Component<ComboboxInputProps, {}, "ref">;
type ComboboxInput = ReturnType<typeof ComboboxInput>;
export default ComboboxInput;
@@ -0,0 +1,33 @@
<script lang="ts">
import { boxWith, mergeProps } from "svelte-toolbelt";
import type { ComboboxTriggerProps } from "../types.js";
import { useId } from "../../../internal/use-id.js";
import { SelectComboTriggerState } from "../../select/select.svelte.js";
let {
id = useId(),
ref = $bindable(null),
child,
children,
type = "button",
...restProps
}: ComboboxTriggerProps = $props();
const triggerState = SelectComboTriggerState.create({
id: boxWith(() => id),
ref: boxWith(
() => ref,
(v) => (ref = v)
),
});
const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
</script>
{#if child}
{@render child({ props: mergedProps })}
{:else}
<button {...mergedProps}>
{@render children?.()}
</button>
{/if}
@@ -0,0 +1,4 @@
import type { ComboboxTriggerProps } from "../types.js";
declare const ComboboxTrigger: import("svelte").Component<ComboboxTriggerProps, {}, "ref">;
type ComboboxTrigger = ReturnType<typeof ComboboxTrigger>;
export default ComboboxTrigger;
+86
View File
@@ -0,0 +1,86 @@
<script lang="ts">
import { type WritableBox, boxWith } from "svelte-toolbelt";
import type { ComboboxRootProps } from "../types.js";
import { noop } from "../../../internal/noop.js";
import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
import { SelectRootState } from "../../select/select.svelte.js";
import ListboxHiddenInput from "../../select/components/select-hidden-input.svelte";
import { watch } from "runed";
let {
value = $bindable(),
onValueChange = noop,
name = "",
disabled = false,
type,
open = $bindable(false),
onOpenChange = noop,
onOpenChangeComplete = noop,
loop = false,
scrollAlignment = "nearest",
required = false,
items = [],
allowDeselect = true,
inputValue = "",
children,
}: ComboboxRootProps = $props();
if (value === undefined) {
const defaultValue = type === "single" ? "" : [];
value = defaultValue;
}
watch.pre(
() => value,
() => {
if (value !== undefined) return;
value = type === "single" ? "" : [];
}
);
const rootState = SelectRootState.create({
type,
value: boxWith(
() => value!,
(v) => {
value = v;
// @ts-expect-error - we know
onValueChange(v);
}
) as WritableBox<string> | WritableBox<string[]>,
disabled: boxWith(() => disabled),
required: boxWith(() => required),
open: boxWith(
() => open,
(v) => {
open = v;
onOpenChange(v);
}
),
loop: boxWith(() => loop),
scrollAlignment: boxWith(() => scrollAlignment),
name: boxWith(() => name),
isCombobox: true,
items: boxWith(() => items),
allowDeselect: boxWith(() => allowDeselect),
inputValue: boxWith(
() => inputValue,
(v) => (inputValue = v)
),
onOpenChangeComplete: boxWith(() => onOpenChangeComplete),
});
</script>
<FloatingLayer>
{@render children?.()}
</FloatingLayer>
{#if Array.isArray(rootState.opts.value.current)}
{#if rootState.opts.value.current.length}
{#each rootState.opts.value.current as item (item)}
<ListboxHiddenInput value={item} />
{/each}
{/if}
{:else}
<ListboxHiddenInput bind:value={rootState.opts.value.current as string} />
{/if}
@@ -0,0 +1,3 @@
declare const Combobox: import("svelte").Component<import("../types.js").ComboboxRootPropsWithoutHTML, {}, "value" | "open">;
type Combobox = ReturnType<typeof Combobox>;
export default Combobox;