INIT
This commit is contained in:
+41
@@ -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>
|
||||
+4
@@ -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;
|
||||
+33
@@ -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}
|
||||
+4
@@ -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
@@ -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}
|
||||
+3
@@ -0,0 +1,3 @@
|
||||
declare const Combobox: import("svelte").Component<import("../types.js").ComboboxRootPropsWithoutHTML, {}, "value" | "open">;
|
||||
type Combobox = ReturnType<typeof Combobox>;
|
||||
export default Combobox;
|
||||
Reference in New Issue
Block a user