parent
9a30073941
commit
b8b24d9fb2
@ -0,0 +1,183 @@
|
||||
<script lang="ts">
|
||||
import { Combobox } from '$uix/terra';
|
||||
|
||||
const frameworks = [
|
||||
{ value: 'svelte', label: 'Svelte' },
|
||||
{ value: 'solid', label: 'Solid' },
|
||||
{ value: 'vue', label: 'Vue' },
|
||||
{ value: 'react', label: 'React' },
|
||||
{ value: 'qwik', label: 'Qwik' },
|
||||
];
|
||||
|
||||
let singleValue = $state('svelte');
|
||||
let multipleValue = $state<string[]>(['svelte']);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Combobox Test</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="page">
|
||||
<header class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">Terra</p>
|
||||
<h1>Combobox</h1>
|
||||
<p class="lead">Prueba del combobox montado sobre la infraestructura compartida de Select.</p>
|
||||
</div>
|
||||
<nav class="links">
|
||||
<a href="/test">Indice general</a>
|
||||
<a href="/test/terra">Terra hub</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section class="card">
|
||||
<h2>Single</h2>
|
||||
<p class="meta">Valor actual: <strong>{singleValue || '—'}</strong></p>
|
||||
<Combobox.Root type="single" bind:value={singleValue} items={frameworks}>
|
||||
<div class="field">
|
||||
<Combobox.Input class="input" defaultValue="Svelte" />
|
||||
<Combobox.Trigger class="trigger">Abrir</Combobox.Trigger>
|
||||
</div>
|
||||
<Combobox.Portal>
|
||||
<Combobox.Content class="content" sideOffset={8}>
|
||||
<Combobox.Viewport>
|
||||
{#each frameworks as framework (framework.value)}
|
||||
<Combobox.Item value={framework.value} label={framework.label} class="item">
|
||||
{framework.label}
|
||||
</Combobox.Item>
|
||||
{/each}
|
||||
</Combobox.Viewport>
|
||||
</Combobox.Content>
|
||||
</Combobox.Portal>
|
||||
</Combobox.Root>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<h2>Multiple</h2>
|
||||
<p class="meta">Valores: <strong>{multipleValue.join(', ') || '—'}</strong></p>
|
||||
<Combobox.Root type="multiple" bind:value={multipleValue} items={frameworks}>
|
||||
<div class="field">
|
||||
<Combobox.Input class="input" clearOnDeselect />
|
||||
<Combobox.Trigger class="trigger">Abrir</Combobox.Trigger>
|
||||
</div>
|
||||
<Combobox.Portal>
|
||||
<Combobox.Content class="content" sideOffset={8}>
|
||||
<Combobox.Viewport>
|
||||
{#each frameworks as framework (framework.value)}
|
||||
<Combobox.Item value={framework.value} label={framework.label} class="item">
|
||||
{framework.label}
|
||||
</Combobox.Item>
|
||||
{/each}
|
||||
</Combobox.Viewport>
|
||||
</Combobox.Content>
|
||||
</Combobox.Portal>
|
||||
</Combobox.Root>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
padding: 2rem;
|
||||
background: #0f172a;
|
||||
color: #e2e8f0;
|
||||
font-family: Inter, system-ui, sans-serif;
|
||||
}
|
||||
|
||||
.hero,
|
||||
.card {
|
||||
max-width: 840px;
|
||||
margin: 0 auto 1.5rem;
|
||||
padding: 1.25rem;
|
||||
border: 1px solid #24324a;
|
||||
border-radius: 18px;
|
||||
background: #111827;
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0 0 .35rem;
|
||||
font-size: .72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: .14em;
|
||||
text-transform: uppercase;
|
||||
color: #67e8f9;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.lead,
|
||||
.meta {
|
||||
margin-top: .5rem;
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
gap: .75rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.links a {
|
||||
color: #93c5fd;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
gap: .5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
:global(.input),
|
||||
:global(.trigger) {
|
||||
border: 1px solid #334155;
|
||||
border-radius: 12px;
|
||||
background: #020617;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
:global(.input) {
|
||||
flex: 1;
|
||||
padding: .75rem .9rem;
|
||||
}
|
||||
|
||||
:global(.trigger) {
|
||||
padding: .75rem .9rem;
|
||||
}
|
||||
|
||||
:global(.content) {
|
||||
min-width: 260px;
|
||||
padding: .35rem;
|
||||
border: 1px solid #334155;
|
||||
border-radius: 14px;
|
||||
background: #020617;
|
||||
box-shadow: 0 18px 50px rgba(15, 23, 42, .45);
|
||||
}
|
||||
|
||||
:global(.item) {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: .65rem .75rem;
|
||||
border-radius: 10px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
:global(.item[data-highlighted]) {
|
||||
background: #1e293b;
|
||||
}
|
||||
|
||||
:global(.item[data-selected]) {
|
||||
color: #67e8f9;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,16 +0,0 @@
|
||||
<script lang="ts">
|
||||
import type { TerraConfigProps } from '../types.ts';
|
||||
import { useTerraConfig } from '../acel-config.ts';
|
||||
import { readableActive } from '../../../utils';
|
||||
|
||||
let { children, defaultPortalTo, defaultLocale, defaultDateOrder, defaultTimeFormat }: TerraConfigProps = $props();
|
||||
|
||||
useTerraConfig({
|
||||
defaultPortalTo: readableActive(() => defaultPortalTo),
|
||||
defaultLocale: readableActive(() => defaultLocale),
|
||||
defaultDateOrder: readableActive(() => defaultDateOrder),
|
||||
defaultTimeFormat: readableActive(() => defaultTimeFormat),
|
||||
});
|
||||
</script>
|
||||
|
||||
{@render children?.()}
|
||||
@ -0,0 +1,47 @@
|
||||
<script lang="ts">
|
||||
import { mergeProps, readableActive, writableActive } from '../../utils/index';
|
||||
import { createId } from '../../utils/create-id';
|
||||
import FloatingLayerAnchor from '../../base/floating-layer/components/floating-layer-anchor.svelte';
|
||||
import { SelectInputState } from '../../select/select.svelte';
|
||||
import type { ComboboxInputProps } from '../types';
|
||||
|
||||
const uid = $props.id();
|
||||
|
||||
let {
|
||||
id = createId(uid),
|
||||
ref = $bindable(null),
|
||||
child,
|
||||
defaultValue,
|
||||
clearOnDeselect = false,
|
||||
...restProps
|
||||
}: ComboboxInputProps = $props();
|
||||
|
||||
const inputState = SelectInputState.create({
|
||||
id: readableActive(() => id),
|
||||
ref: writableActive(
|
||||
() => ref,
|
||||
(v) => (ref = v)
|
||||
),
|
||||
clearOnDeselect: readableActive(() => clearOnDeselect),
|
||||
});
|
||||
|
||||
let hasAppliedDefaultValue = false;
|
||||
$effect(() => {
|
||||
if (hasAppliedDefaultValue) return;
|
||||
if (defaultValue === undefined || defaultValue === '') return;
|
||||
inputState.root.opts.inputValue.current = defaultValue;
|
||||
hasAppliedDefaultValue = true;
|
||||
});
|
||||
|
||||
const mergedProps = $derived(
|
||||
mergeProps(restProps, inputState.props, { value: inputState.root.opts.inputValue.current })
|
||||
);
|
||||
</script>
|
||||
|
||||
<FloatingLayerAnchor {id} ref={inputState.opts.ref}>
|
||||
{#if child}
|
||||
{@render child({ props: mergedProps })}
|
||||
{:else}
|
||||
<input {...mergedProps} />
|
||||
{/if}
|
||||
</FloatingLayerAnchor>
|
||||
@ -0,0 +1,35 @@
|
||||
<script lang="ts">
|
||||
import { mergeProps, readableActive, writableActive } from '../../utils/index';
|
||||
import { createId } from '../../utils/create-id';
|
||||
import { SelectComboTriggerState } from '../../select/select.svelte';
|
||||
import type { ComboboxTriggerProps } from '../types';
|
||||
|
||||
const uid = $props.id();
|
||||
|
||||
let {
|
||||
id = createId(uid),
|
||||
ref = $bindable(null),
|
||||
child,
|
||||
children,
|
||||
type = 'button',
|
||||
...restProps
|
||||
}: ComboboxTriggerProps = $props();
|
||||
|
||||
const triggerState = SelectComboTriggerState.create({
|
||||
id: readableActive(() => id),
|
||||
ref: writableActive(
|
||||
() => 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,89 @@
|
||||
<script lang="ts">
|
||||
import FloatingLayer from '../../base/floating-layer/components/floating-layer.svelte';
|
||||
import { noop, readableActive, writableActive, type State } from '../../utils/index';
|
||||
import { SelectRootState } from '../../select/select.svelte';
|
||||
import type { ComboboxRootProps } from '../types';
|
||||
import SelectHiddenInput 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();
|
||||
|
||||
function ensureDefaultValue() {
|
||||
if (value !== undefined) return;
|
||||
value = type === 'single' ? '' : [];
|
||||
}
|
||||
|
||||
ensureDefaultValue();
|
||||
|
||||
watch.pre(
|
||||
() => value,
|
||||
() => {
|
||||
ensureDefaultValue();
|
||||
}
|
||||
);
|
||||
|
||||
// svelte-ignore state_referenced_locally
|
||||
const rootState = SelectRootState.create({
|
||||
type,
|
||||
value: writableActive(
|
||||
() => value!,
|
||||
(v) => {
|
||||
value = v;
|
||||
// oxlint-disable-next-line no-explicit-any
|
||||
onValueChange(v as any);
|
||||
}
|
||||
) as State<string> | State<string[]>,
|
||||
disabled: readableActive(() => disabled),
|
||||
required: readableActive(() => required),
|
||||
open: writableActive(
|
||||
() => open,
|
||||
(v) => {
|
||||
open = v;
|
||||
onOpenChange(v);
|
||||
}
|
||||
),
|
||||
loop: readableActive(() => loop),
|
||||
scrollAlignment: readableActive(() => scrollAlignment),
|
||||
name: readableActive(() => name),
|
||||
isCombobox: true,
|
||||
items: readableActive(() => items),
|
||||
allowDeselect: readableActive(() => allowDeselect),
|
||||
inputValue: writableActive(
|
||||
() => inputValue,
|
||||
(v) => (inputValue = v)
|
||||
),
|
||||
onOpenChangeComplete: readableActive(() => onOpenChangeComplete),
|
||||
});
|
||||
</script>
|
||||
|
||||
<FloatingLayer>
|
||||
{@render children?.()}
|
||||
</FloatingLayer>
|
||||
|
||||
{#if Array.isArray(rootState.opts.value.current)}
|
||||
{#if rootState.opts.value.current.length > 0}
|
||||
{#each rootState.opts.value.current as item (item)}
|
||||
<SelectHiddenInput value={item} />
|
||||
{/each}
|
||||
{/if}
|
||||
{:else}
|
||||
<SelectHiddenInput bind:value={rootState.opts.value.current as string} />
|
||||
{/if}
|
||||
|
||||
|
||||
@ -0,0 +1,46 @@
|
||||
export { default as Root } from './components/combobox.svelte';
|
||||
export { default as Input } from './components/combobox-input.svelte';
|
||||
export { default as Trigger } from './components/combobox-trigger.svelte';
|
||||
export { default as Content } from '../select/components/select-content.svelte';
|
||||
export { default as ContentStatic } from '../select/components/select-content-static.svelte';
|
||||
export { default as Item } from '../select/components/select-item.svelte';
|
||||
export { default as Group } from '../select/components/select-group.svelte';
|
||||
export { default as GroupHeading } from '../select/components/select-group-heading.svelte';
|
||||
export { default as Portal } from '../base/portal/portal.svelte';
|
||||
export { default as Viewport } from '../select/components/select-viewport.svelte';
|
||||
export { default as ScrollUpButton } from '../select/components/select-scroll-up-button.svelte';
|
||||
export { default as ScrollDownButton } from '../select/components/select-scroll-down-button.svelte';
|
||||
|
||||
export type {
|
||||
ComboboxRootProps as RootProps,
|
||||
ComboboxRootPropsWithoutHTML as RootPropsWithoutHTML,
|
||||
ComboboxSingleRootProps as SingleRootProps,
|
||||
ComboboxSingleRootPropsWithoutHTML as SingleRootPropsWithoutHTML,
|
||||
ComboboxMultipleRootProps as MultipleRootProps,
|
||||
ComboboxMultipleRootPropsWithoutHTML as MultipleRootPropsWithoutHTML,
|
||||
ComboboxInputProps as InputProps,
|
||||
ComboboxInputPropsWithoutHTML as InputPropsWithoutHTML,
|
||||
ComboboxTriggerProps as TriggerProps,
|
||||
ComboboxTriggerPropsWithoutHTML as TriggerPropsWithoutHTML,
|
||||
ComboboxContentProps as ContentProps,
|
||||
ComboboxContentPropsWithoutHTML as ContentPropsWithoutHTML,
|
||||
ComboboxContentStaticProps as ContentStaticProps,
|
||||
ComboboxContentStaticPropsWithoutHTML as ContentStaticPropsWithoutHTML,
|
||||
ComboboxItemProps as ItemProps,
|
||||
ComboboxItemPropsWithoutHTML as ItemPropsWithoutHTML,
|
||||
ComboboxItemSnippetProps as ItemSnippetProps,
|
||||
ComboboxGroupProps as GroupProps,
|
||||
ComboboxGroupPropsWithoutHTML as GroupPropsWithoutHTML,
|
||||
ComboboxGroupHeadingProps as GroupHeadingProps,
|
||||
ComboboxGroupHeadingPropsWithoutHTML as GroupHeadingPropsWithoutHTML,
|
||||
ComboboxViewportProps as ViewportProps,
|
||||
ComboboxViewportPropsWithoutHTML as ViewportPropsWithoutHTML,
|
||||
ComboboxScrollUpButtonProps as ScrollUpButtonProps,
|
||||
ComboboxScrollUpButtonPropsWithoutHTML as ScrollUpButtonPropsWithoutHTML,
|
||||
ComboboxScrollDownButtonProps as ScrollDownButtonProps,
|
||||
ComboboxScrollDownButtonPropsWithoutHTML as ScrollDownButtonPropsWithoutHTML,
|
||||
ComboboxArrowProps as ArrowProps,
|
||||
ComboboxArrowPropsWithoutHTML as ArrowPropsWithoutHTML,
|
||||
ComboboxPortalProps as PortalProps,
|
||||
ComboboxPortalPropsWithoutHTML as PortalPropsWithoutHTML,
|
||||
} from './types.ts';
|
||||
@ -0,0 +1,2 @@
|
||||
export * as Combobox from './exports.js';
|
||||
export * from './exports.js';
|
||||
@ -0,0 +1,77 @@
|
||||
import type { TerraPrimitiveInputAttributes } from '../utils/attributes.ts';
|
||||
import type {
|
||||
SelectBaseRootPropsWithoutHTML,
|
||||
SelectMultipleRootPropsWithoutHTML,
|
||||
SelectSingleRootPropsWithoutHTML,
|
||||
SelectTriggerProps as ComboboxTriggerProps,
|
||||
SelectTriggerPropsWithoutHTML as ComboboxTriggerPropsWithoutHTML,
|
||||
} from '../select/types.ts';
|
||||
import type { WithChild, Without } from '../utils/types.ts';
|
||||
|
||||
export type ComboboxBaseRootPropsWithoutHTML = Omit<
|
||||
SelectBaseRootPropsWithoutHTML,
|
||||
'autocomplete'
|
||||
> & {
|
||||
/**
|
||||
* Optional external input value used to initialize or update the combobox input text.
|
||||
*/
|
||||
inputValue?: string;
|
||||
};
|
||||
|
||||
export type ComboboxSingleRootPropsWithoutHTML = ComboboxBaseRootPropsWithoutHTML &
|
||||
SelectSingleRootPropsWithoutHTML;
|
||||
|
||||
export type ComboboxSingleRootProps = ComboboxSingleRootPropsWithoutHTML;
|
||||
|
||||
export type ComboboxMultipleRootPropsWithoutHTML = ComboboxBaseRootPropsWithoutHTML &
|
||||
SelectMultipleRootPropsWithoutHTML;
|
||||
|
||||
export type ComboboxMultipleRootProps = ComboboxMultipleRootPropsWithoutHTML;
|
||||
|
||||
export type ComboboxRootPropsWithoutHTML = ComboboxBaseRootPropsWithoutHTML &
|
||||
(ComboboxSingleRootPropsWithoutHTML | ComboboxMultipleRootPropsWithoutHTML);
|
||||
|
||||
export type ComboboxRootProps = ComboboxRootPropsWithoutHTML;
|
||||
|
||||
export type {
|
||||
SelectContentProps as ComboboxContentProps,
|
||||
SelectContentPropsWithoutHTML as ComboboxContentPropsWithoutHTML,
|
||||
SelectContentStaticProps as ComboboxContentStaticProps,
|
||||
SelectContentStaticPropsWithoutHTML as ComboboxContentStaticPropsWithoutHTML,
|
||||
SelectItemProps as ComboboxItemProps,
|
||||
SelectItemPropsWithoutHTML as ComboboxItemPropsWithoutHTML,
|
||||
SelectItemSnippetProps as ComboboxItemSnippetProps,
|
||||
SelectGroupPropsWithoutHTML as ComboboxGroupPropsWithoutHTML,
|
||||
SelectGroupProps as ComboboxGroupProps,
|
||||
SelectGroupHeadingPropsWithoutHTML as ComboboxGroupHeadingPropsWithoutHTML,
|
||||
SelectGroupHeadingProps as ComboboxGroupHeadingProps,
|
||||
SelectViewportPropsWithoutHTML as ComboboxViewportPropsWithoutHTML,
|
||||
SelectViewportProps as ComboboxViewportProps,
|
||||
SelectScrollDownButtonProps as ComboboxScrollDownButtonProps,
|
||||
SelectScrollDownButtonPropsWithoutHTML as ComboboxScrollDownButtonPropsWithoutHTML,
|
||||
SelectScrollUpButtonProps as ComboboxScrollUpButtonProps,
|
||||
SelectScrollUpButtonPropsWithoutHTML as ComboboxScrollUpButtonPropsWithoutHTML,
|
||||
SelectArrowProps as ComboboxArrowProps,
|
||||
SelectArrowPropsWithoutHTML as ComboboxArrowPropsWithoutHTML,
|
||||
SelectPortalProps as ComboboxPortalProps,
|
||||
SelectPortalPropsWithoutHTML as ComboboxPortalPropsWithoutHTML,
|
||||
} from '../select/types.ts';
|
||||
|
||||
export { type ComboboxTriggerProps, type ComboboxTriggerPropsWithoutHTML };
|
||||
|
||||
export type ComboboxInputPropsWithoutHTML = WithChild<{
|
||||
/**
|
||||
* Default text shown in the input on first mount.
|
||||
*/
|
||||
defaultValue?: string;
|
||||
|
||||
/**
|
||||
* Whether to clear the input when the last selected item is removed.
|
||||
*
|
||||
* @defaultValue `false`
|
||||
*/
|
||||
clearOnDeselect?: boolean;
|
||||
}>;
|
||||
|
||||
export type ComboboxInputProps = ComboboxInputPropsWithoutHTML &
|
||||
Without<Omit<TerraPrimitiveInputAttributes, 'value'>, ComboboxInputPropsWithoutHTML>;
|
||||
@ -1 +0,0 @@
|
||||
export { autoReset as boxAutoReset } from '../active';
|
||||
@ -1,57 +0,0 @@
|
||||
import {
|
||||
derived,
|
||||
derivedWritable,
|
||||
isActive,
|
||||
isState,
|
||||
readonly,
|
||||
state,
|
||||
flatten,
|
||||
ActiveSymbol,
|
||||
WritableSymbol,
|
||||
} from '../active';
|
||||
import type { Active, Flattened, Getter, State } from '../active';
|
||||
|
||||
export const BoxSymbol = ActiveSymbol;
|
||||
export const isWritableSymbol = WritableSymbol;
|
||||
|
||||
export type ReadableBox<T> = Active<T>;
|
||||
export type WritableBox<T> = State<T>;
|
||||
export type BoxFlatten<R extends Record<string, unknown>> = Flattened<R>;
|
||||
|
||||
export function boxWith<T>(getter: () => T): ReadableBox<T>;
|
||||
export function boxWith<T>(getter: () => T, setter: (v: T) => void): WritableBox<T>;
|
||||
export function boxWith<T>(getter: () => T, setter?: (v: T) => void) {
|
||||
return setter ? derivedWritable(getter, setter) : derived(getter);
|
||||
}
|
||||
|
||||
export function isBox(value: unknown): value is ReadableBox<unknown> {
|
||||
return isActive(value);
|
||||
}
|
||||
|
||||
export function isWritableBox(value: unknown): value is WritableBox<unknown> {
|
||||
return isState(value);
|
||||
}
|
||||
|
||||
export function boxFrom<T>(value: T | WritableBox<T>): WritableBox<T>;
|
||||
export function boxFrom<T>(value: ReadableBox<T>): ReadableBox<T>;
|
||||
export function boxFrom<T>(value: Getter<T>): ReadableBox<T>;
|
||||
export function boxFrom<T>(value: T): WritableBox<T>;
|
||||
export function boxFrom<T>(value: T | Getter<T> | ReadableBox<T>) {
|
||||
if (isBox(value)) return value;
|
||||
if (typeof value === 'function') return derived(value as Getter<T>);
|
||||
return state(value as T);
|
||||
}
|
||||
|
||||
export function boxFlatten<R extends Record<string, unknown>>(boxes: R): BoxFlatten<R> {
|
||||
return flatten(boxes);
|
||||
}
|
||||
|
||||
export function toReadonlyBox<T>(box: ReadableBox<T>): ReadableBox<T> {
|
||||
return readonly(box);
|
||||
}
|
||||
|
||||
export function simpleBox<T>(): WritableBox<T | undefined>;
|
||||
export function simpleBox<T>(initialValue: T): WritableBox<T>;
|
||||
export function simpleBox<T>(initialValue?: T) {
|
||||
return state(initialValue as T);
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
import {
|
||||
boxFrom,
|
||||
boxWith,
|
||||
boxFlatten,
|
||||
toReadonlyBox,
|
||||
isBox,
|
||||
isWritableBox,
|
||||
type WritableBox,
|
||||
BoxSymbol,
|
||||
isWritableSymbol,
|
||||
simpleBox,
|
||||
} from './box-extras.svelte.ts';
|
||||
|
||||
export function box<T>(): WritableBox<T | undefined>;
|
||||
export function box<T>(initialValue: T): WritableBox<T>;
|
||||
export function box<T>(initialValue?: T) {
|
||||
return simpleBox(initialValue as T);
|
||||
}
|
||||
|
||||
box.from = boxFrom;
|
||||
box.with = boxWith;
|
||||
box.flatten = boxFlatten;
|
||||
box.readonly = toReadonlyBox;
|
||||
box.isBox = isBox;
|
||||
box.isWritableBox = isWritableBox;
|
||||
box.BoxSymbol = BoxSymbol;
|
||||
box.isWritableSymbol = isWritableSymbol;
|
||||
@ -1,3 +0,0 @@
|
||||
export * from './box-extras.svelte';
|
||||
export * from './unbox.svelte';
|
||||
export * from './box.svelte';
|
||||
@ -1 +0,0 @@
|
||||
export { toValue as unbox } from '../active';
|
||||
Loading…
Reference in new issue