chore: downgrade @lucide/svelte version and remove custom chat width component
This commit is contained in:
Imad Saddik
parent
c55533a706
commit
89647d5daf
|
|
@ -28,7 +28,7 @@
|
||||||
"@eslint/compat": "^1.2.5",
|
"@eslint/compat": "^1.2.5",
|
||||||
"@eslint/js": "^9.18.0",
|
"@eslint/js": "^9.18.0",
|
||||||
"@internationalized/date": "^3.10.1",
|
"@internationalized/date": "^3.10.1",
|
||||||
"@lucide/svelte": "^0.561.0",
|
"@lucide/svelte": "^0.515.0",
|
||||||
"@playwright/test": "^1.49.1",
|
"@playwright/test": "^1.49.1",
|
||||||
"@storybook/addon-a11y": "^10.2.4",
|
"@storybook/addon-a11y": "^10.2.4",
|
||||||
"@storybook/addon-docs": "^10.2.4",
|
"@storybook/addon-docs": "^10.2.4",
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,7 @@
|
||||||
"@eslint/compat": "^1.2.5",
|
"@eslint/compat": "^1.2.5",
|
||||||
"@eslint/js": "^9.18.0",
|
"@eslint/js": "^9.18.0",
|
||||||
"@internationalized/date": "^3.10.1",
|
"@internationalized/date": "^3.10.1",
|
||||||
"@lucide/svelte": "^0.561.0",
|
"@lucide/svelte": "^0.515.0",
|
||||||
"@playwright/test": "^1.49.1",
|
"@playwright/test": "^1.49.1",
|
||||||
"@storybook/addon-a11y": "^10.2.4",
|
"@storybook/addon-a11y": "^10.2.4",
|
||||||
"@storybook/addon-docs": "^10.2.4",
|
"@storybook/addon-docs": "^10.2.4",
|
||||||
|
|
|
||||||
|
|
@ -1,178 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { Check, ChevronsUpDown } from '@lucide/svelte';
|
|
||||||
import * as Command from '$lib/components/ui/command';
|
|
||||||
import * as Popover from '$lib/components/ui/popover';
|
|
||||||
import { Button } from '$lib/components/ui/button';
|
|
||||||
import { Input } from '$lib/components/ui/input';
|
|
||||||
import { cn } from '$lib/components/ui/utils';
|
|
||||||
import { tick } from 'svelte';
|
|
||||||
import {
|
|
||||||
CUSTOM_WIDTH_PRESETS,
|
|
||||||
MIN_CUSTOM_WIDTH,
|
|
||||||
MAX_CUSTOM_WIDTH
|
|
||||||
} from '$lib/constants/chat-width';
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
value: string;
|
|
||||||
onChange: (value: string) => void;
|
|
||||||
disabled?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
let { value = $bindable(''), onChange, disabled = false }: Props = $props();
|
|
||||||
|
|
||||||
let open = $state(false);
|
|
||||||
let isEditing = $state(false);
|
|
||||||
let inputValue = $state('');
|
|
||||||
let isError = $state(false);
|
|
||||||
|
|
||||||
let triggerRef = $state<HTMLButtonElement>(null!);
|
|
||||||
let inputRef = $state<HTMLInputElement>(null!);
|
|
||||||
|
|
||||||
const presets = Object.entries(CUSTOM_WIDTH_PRESETS).map(([key, pixelValue]) => ({
|
|
||||||
value: key,
|
|
||||||
label: `${key} (${pixelValue}px)`
|
|
||||||
}));
|
|
||||||
|
|
||||||
const displayLabel = $derived.by(() => {
|
|
||||||
if (isEditing) return 'Set pixel value';
|
|
||||||
|
|
||||||
const foundPreset = presets.find((p) => p.value === value);
|
|
||||||
if (foundPreset) return foundPreset.label;
|
|
||||||
|
|
||||||
const number = Number(value);
|
|
||||||
if (!isNaN(number) && number > 0) {
|
|
||||||
return `Custom (${number}px)`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return 'Select width...';
|
|
||||||
});
|
|
||||||
|
|
||||||
function closePopover() {
|
|
||||||
open = false;
|
|
||||||
tick().then(() => triggerRef?.focus());
|
|
||||||
}
|
|
||||||
|
|
||||||
function selectPreset(newValue: string) {
|
|
||||||
value = newValue;
|
|
||||||
isEditing = false;
|
|
||||||
isError = false;
|
|
||||||
onChange(newValue);
|
|
||||||
closePopover();
|
|
||||||
}
|
|
||||||
|
|
||||||
function startEditing() {
|
|
||||||
open = false;
|
|
||||||
isEditing = true;
|
|
||||||
inputValue = '';
|
|
||||||
isError = false;
|
|
||||||
|
|
||||||
tick().then(() => inputRef?.focus());
|
|
||||||
}
|
|
||||||
|
|
||||||
function cancelEditing() {
|
|
||||||
isEditing = false;
|
|
||||||
inputValue = '';
|
|
||||||
isError = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function submitCustomValue() {
|
|
||||||
if (!inputValue) {
|
|
||||||
isError = true;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const number = Number(inputValue);
|
|
||||||
const isValid = !isNaN(number) && number >= MIN_CUSTOM_WIDTH && number <= MAX_CUSTOM_WIDTH;
|
|
||||||
|
|
||||||
if (isValid) {
|
|
||||||
value = String(number);
|
|
||||||
onChange(String(number));
|
|
||||||
isEditing = false;
|
|
||||||
isError = false;
|
|
||||||
} else {
|
|
||||||
isError = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleKeydown(e: KeyboardEvent) {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
e.preventDefault();
|
|
||||||
submitCustomValue();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="flex w-full flex-col gap-2">
|
|
||||||
<Popover.Root bind:open>
|
|
||||||
<Popover.Trigger bind:ref={triggerRef}>
|
|
||||||
{#snippet child({ props })}
|
|
||||||
<Button
|
|
||||||
{...props}
|
|
||||||
variant="outline"
|
|
||||||
class="w-full justify-between font-normal"
|
|
||||||
role="combobox"
|
|
||||||
aria-expanded={open}
|
|
||||||
{disabled}
|
|
||||||
>
|
|
||||||
{displayLabel}
|
|
||||||
<ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
|
||||||
</Button>
|
|
||||||
{/snippet}
|
|
||||||
</Popover.Trigger>
|
|
||||||
|
|
||||||
<Popover.Content class="z-[1000000] w-[var(--bits-popover-anchor-width)] p-0">
|
|
||||||
<Command.Root>
|
|
||||||
<Command.Input placeholder="Search presets" />
|
|
||||||
<Command.List>
|
|
||||||
<Command.Empty>No presets found.</Command.Empty>
|
|
||||||
|
|
||||||
<Command.Group>
|
|
||||||
<Command.Item value="custom-input-trigger" onSelect={startEditing}>
|
|
||||||
<Check class={cn('mr-2 h-4 w-4', isEditing ? 'opacity-100' : 'opacity-0')} />
|
|
||||||
Set pixel value
|
|
||||||
</Command.Item>
|
|
||||||
|
|
||||||
<Command.Separator class="my-1" />
|
|
||||||
|
|
||||||
{#each presets as preset (preset.value)}
|
|
||||||
<Command.Item value={preset.value} onSelect={() => selectPreset(preset.value)}>
|
|
||||||
<Check
|
|
||||||
class={cn(
|
|
||||||
'mr-2 h-4 w-4',
|
|
||||||
value === preset.value && !isEditing ? 'opacity-100' : 'opacity-0'
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{preset.label}
|
|
||||||
</Command.Item>
|
|
||||||
{/each}
|
|
||||||
</Command.Group>
|
|
||||||
</Command.List>
|
|
||||||
</Command.Root>
|
|
||||||
</Popover.Content>
|
|
||||||
</Popover.Root>
|
|
||||||
|
|
||||||
{#if isEditing}
|
|
||||||
<div class="flex animate-in items-start gap-2 duration-200 fade-in slide-in-from-top-1">
|
|
||||||
<div class="flex-1 space-y-1">
|
|
||||||
<Input
|
|
||||||
bind:ref={inputRef}
|
|
||||||
bind:value={inputValue}
|
|
||||||
onkeydown={handleKeydown}
|
|
||||||
type="number"
|
|
||||||
placeholder="e.g. 800"
|
|
||||||
class={cn(isError && 'border-destructive focus-visible:ring-destructive')}
|
|
||||||
min={MIN_CUSTOM_WIDTH}
|
|
||||||
max={MAX_CUSTOM_WIDTH}
|
|
||||||
/>
|
|
||||||
<p class={cn('text-[0.8rem]', isError ? 'text-destructive' : 'text-muted-foreground')}>
|
|
||||||
Enter a value between {MIN_CUSTOM_WIDTH} and {MAX_CUSTOM_WIDTH}.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<Button size="sm" onclick={submitCustomValue}>Save</Button>
|
|
||||||
<Button size="sm" variant="outline" onclick={cancelEditing}>Cancel</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
@ -9,7 +9,6 @@
|
||||||
import { SettingsFieldType } from '$lib/enums/settings';
|
import { SettingsFieldType } from '$lib/enums/settings';
|
||||||
import { settingsStore } from '$lib/stores/settings.svelte';
|
import { settingsStore } from '$lib/stores/settings.svelte';
|
||||||
import { ChatSettingsParameterSourceIndicator } from '$lib/components/app';
|
import { ChatSettingsParameterSourceIndicator } from '$lib/components/app';
|
||||||
import ChatSettingsComboboxCustomWidth from './ChatSettingsComboboxCustomWidth.svelte';
|
|
||||||
import type { Component } from 'svelte';
|
import type { Component } from 'svelte';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
|
|
@ -224,35 +223,6 @@
|
||||||
{field.help || SETTING_CONFIG_INFO[field.key]}
|
{field.help || SETTING_CONFIG_INFO[field.key]}
|
||||||
</p>
|
</p>
|
||||||
{/if}
|
{/if}
|
||||||
{:else if field.type === SettingsFieldType.COMBOBOX}
|
|
||||||
{#if field.key === SETTINGS_KEYS.CUSTOM_CHAT_WIDTH}
|
|
||||||
{@const isDisabled = localConfig.autoChatWidth}
|
|
||||||
|
|
||||||
<div class="space-y-2">
|
|
||||||
<Label
|
|
||||||
for={field.key}
|
|
||||||
class="text-sm font-medium {isDisabled ? 'text-muted-foreground' : ''}"
|
|
||||||
>
|
|
||||||
{field.label}
|
|
||||||
</Label>
|
|
||||||
|
|
||||||
<div class="w-full md:max-w-md">
|
|
||||||
<ChatSettingsComboboxCustomWidth
|
|
||||||
bind:value={localConfig[field.key]}
|
|
||||||
onChange={(value) => onConfigChange(field.key, value)}
|
|
||||||
disabled={isDisabled}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{#if isDisabled}
|
|
||||||
<p class="text-xs text-muted-foreground">Disabled when automatic width is enabled.</p>
|
|
||||||
{:else if field.help || SETTING_CONFIG_INFO[field.key]}
|
|
||||||
<p class="text-xs text-muted-foreground">
|
|
||||||
{field.help || SETTING_CONFIG_INFO[field.key]}
|
|
||||||
</p>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
{:else if field.type === SettingsFieldType.CHECKBOX}
|
{:else if field.type === SettingsFieldType.CHECKBOX}
|
||||||
<div class="flex items-start space-x-3">
|
<div class="flex items-start space-x-3">
|
||||||
<Checkbox
|
<Checkbox
|
||||||
|
|
|
||||||
|
|
@ -1,40 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
|
|
||||||
import type { Snippet } from 'svelte';
|
|
||||||
import Command from './command.svelte';
|
|
||||||
import * as Dialog from '$lib/components/ui/dialog/index.js';
|
|
||||||
import type { WithoutChildrenOrChild } from '$lib/components/ui/utils.js';
|
|
||||||
|
|
||||||
let {
|
|
||||||
open = $bindable(false),
|
|
||||||
ref = $bindable(null),
|
|
||||||
value = $bindable(''),
|
|
||||||
title = 'Command Palette',
|
|
||||||
description = 'Search for a command to run',
|
|
||||||
portalProps,
|
|
||||||
children,
|
|
||||||
...restProps
|
|
||||||
}: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
|
|
||||||
WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
|
|
||||||
portalProps?: DialogPrimitive.PortalProps;
|
|
||||||
children: Snippet;
|
|
||||||
title?: string;
|
|
||||||
description?: string;
|
|
||||||
} = $props();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<Dialog.Root bind:open {...restProps}>
|
|
||||||
<Dialog.Header class="sr-only">
|
|
||||||
<Dialog.Title>{title}</Dialog.Title>
|
|
||||||
<Dialog.Description>{description}</Dialog.Description>
|
|
||||||
</Dialog.Header>
|
|
||||||
<Dialog.Content class="overflow-hidden p-0" {portalProps}>
|
|
||||||
<Command
|
|
||||||
class="**:data-[slot=command-input-wrapper]:h-12 [&_[data-command-group]]:px-2 [&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 [&_[data-command-input]]:h-12 [&_[data-command-item]]:px-2 [&_[data-command-item]]:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
|
|
||||||
{...restProps}
|
|
||||||
bind:value
|
|
||||||
bind:ref
|
|
||||||
{children}
|
|
||||||
/>
|
|
||||||
</Dialog.Content>
|
|
||||||
</Dialog.Root>
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { Command as CommandPrimitive } from 'bits-ui';
|
|
||||||
import { cn } from '$lib/components/ui/utils.js';
|
|
||||||
|
|
||||||
let {
|
|
||||||
ref = $bindable(null),
|
|
||||||
class: className,
|
|
||||||
...restProps
|
|
||||||
}: CommandPrimitive.EmptyProps = $props();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<CommandPrimitive.Empty
|
|
||||||
bind:ref
|
|
||||||
data-slot="command-empty"
|
|
||||||
class={cn('py-6 text-center text-sm', className)}
|
|
||||||
{...restProps}
|
|
||||||
/>
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { Command as CommandPrimitive, useId } from 'bits-ui';
|
|
||||||
import { cn } from '$lib/components/ui/utils.js';
|
|
||||||
|
|
||||||
let {
|
|
||||||
ref = $bindable(null),
|
|
||||||
class: className,
|
|
||||||
children,
|
|
||||||
heading,
|
|
||||||
value,
|
|
||||||
...restProps
|
|
||||||
}: CommandPrimitive.GroupProps & {
|
|
||||||
heading?: string;
|
|
||||||
} = $props();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<CommandPrimitive.Group
|
|
||||||
bind:ref
|
|
||||||
data-slot="command-group"
|
|
||||||
class={cn('overflow-hidden p-1 text-foreground', className)}
|
|
||||||
value={value ?? heading ?? `----${useId()}`}
|
|
||||||
{...restProps}
|
|
||||||
>
|
|
||||||
{#if heading}
|
|
||||||
<CommandPrimitive.GroupHeading class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
|
|
||||||
{heading}
|
|
||||||
</CommandPrimitive.GroupHeading>
|
|
||||||
{/if}
|
|
||||||
<CommandPrimitive.GroupItems {children} />
|
|
||||||
</CommandPrimitive.Group>
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { Command as CommandPrimitive } from 'bits-ui';
|
|
||||||
import SearchIcon from '@lucide/svelte/icons/search';
|
|
||||||
import { cn } from '$lib/components/ui/utils.js';
|
|
||||||
|
|
||||||
let {
|
|
||||||
ref = $bindable(null),
|
|
||||||
class: className,
|
|
||||||
value = $bindable(''),
|
|
||||||
...restProps
|
|
||||||
}: CommandPrimitive.InputProps = $props();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="flex h-9 items-center gap-2 border-b ps-3 pe-8" data-slot="command-input-wrapper">
|
|
||||||
<SearchIcon class="size-4 shrink-0 opacity-50" />
|
|
||||||
<CommandPrimitive.Input
|
|
||||||
data-slot="command-input"
|
|
||||||
class={cn(
|
|
||||||
'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
bind:ref
|
|
||||||
{...restProps}
|
|
||||||
bind:value
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { Command as CommandPrimitive } from 'bits-ui';
|
|
||||||
import { cn } from '$lib/components/ui/utils.js';
|
|
||||||
|
|
||||||
let {
|
|
||||||
ref = $bindable(null),
|
|
||||||
class: className,
|
|
||||||
...restProps
|
|
||||||
}: CommandPrimitive.ItemProps = $props();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<CommandPrimitive.Item
|
|
||||||
bind:ref
|
|
||||||
data-slot="command-item"
|
|
||||||
class={cn(
|
|
||||||
"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...restProps}
|
|
||||||
/>
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { Command as CommandPrimitive } from 'bits-ui';
|
|
||||||
import { cn } from '$lib/components/ui/utils.js';
|
|
||||||
|
|
||||||
let {
|
|
||||||
ref = $bindable(null),
|
|
||||||
class: className,
|
|
||||||
...restProps
|
|
||||||
}: CommandPrimitive.LinkItemProps = $props();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<CommandPrimitive.LinkItem
|
|
||||||
bind:ref
|
|
||||||
data-slot="command-item"
|
|
||||||
class={cn(
|
|
||||||
"relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...restProps}
|
|
||||||
/>
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { Command as CommandPrimitive } from 'bits-ui';
|
|
||||||
import { cn } from '$lib/components/ui/utils.js';
|
|
||||||
|
|
||||||
let {
|
|
||||||
ref = $bindable(null),
|
|
||||||
class: className,
|
|
||||||
...restProps
|
|
||||||
}: CommandPrimitive.ListProps = $props();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<CommandPrimitive.List
|
|
||||||
bind:ref
|
|
||||||
data-slot="command-list"
|
|
||||||
class={cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', className)}
|
|
||||||
{...restProps}
|
|
||||||
/>
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { Command as CommandPrimitive } from 'bits-ui';
|
|
||||||
|
|
||||||
let { ref = $bindable(null), ...restProps }: CommandPrimitive.LoadingProps = $props();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<CommandPrimitive.Loading bind:ref {...restProps} />
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { Command as CommandPrimitive } from 'bits-ui';
|
|
||||||
import { cn } from '$lib/components/ui/utils.js';
|
|
||||||
|
|
||||||
let {
|
|
||||||
ref = $bindable(null),
|
|
||||||
class: className,
|
|
||||||
...restProps
|
|
||||||
}: CommandPrimitive.SeparatorProps = $props();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<CommandPrimitive.Separator
|
|
||||||
bind:ref
|
|
||||||
data-slot="command-separator"
|
|
||||||
class={cn('-mx-1 h-px bg-border', className)}
|
|
||||||
{...restProps}
|
|
||||||
/>
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { cn, type WithElementRef } from '$lib/components/ui/utils.js';
|
|
||||||
import type { HTMLAttributes } from 'svelte/elements';
|
|
||||||
|
|
||||||
let {
|
|
||||||
ref = $bindable(null),
|
|
||||||
class: className,
|
|
||||||
children,
|
|
||||||
...restProps
|
|
||||||
}: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<span
|
|
||||||
bind:this={ref}
|
|
||||||
data-slot="command-shortcut"
|
|
||||||
class={cn('ms-auto text-xs tracking-widest text-muted-foreground', className)}
|
|
||||||
{...restProps}
|
|
||||||
>
|
|
||||||
{@render children?.()}
|
|
||||||
</span>
|
|
||||||
|
|
@ -1,28 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { cn } from '$lib/components/ui/utils.js';
|
|
||||||
import { Command as CommandPrimitive } from 'bits-ui';
|
|
||||||
|
|
||||||
export type CommandRootApi = CommandPrimitive.Root;
|
|
||||||
|
|
||||||
let {
|
|
||||||
api = $bindable(null),
|
|
||||||
ref = $bindable(null),
|
|
||||||
value = $bindable(''),
|
|
||||||
class: className,
|
|
||||||
...restProps
|
|
||||||
}: CommandPrimitive.RootProps & {
|
|
||||||
api?: CommandRootApi | null;
|
|
||||||
} = $props();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<CommandPrimitive.Root
|
|
||||||
bind:this={api}
|
|
||||||
bind:value
|
|
||||||
bind:ref
|
|
||||||
data-slot="command"
|
|
||||||
class={cn(
|
|
||||||
'flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground',
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...restProps}
|
|
||||||
/>
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
import Root from './command.svelte';
|
|
||||||
import Loading from './command-loading.svelte';
|
|
||||||
import Dialog from './command-dialog.svelte';
|
|
||||||
import Empty from './command-empty.svelte';
|
|
||||||
import Group from './command-group.svelte';
|
|
||||||
import Item from './command-item.svelte';
|
|
||||||
import Input from './command-input.svelte';
|
|
||||||
import List from './command-list.svelte';
|
|
||||||
import Separator from './command-separator.svelte';
|
|
||||||
import Shortcut from './command-shortcut.svelte';
|
|
||||||
import LinkItem from './command-link-item.svelte';
|
|
||||||
|
|
||||||
export {
|
|
||||||
Root,
|
|
||||||
Dialog,
|
|
||||||
Empty,
|
|
||||||
Group,
|
|
||||||
Item,
|
|
||||||
LinkItem,
|
|
||||||
Input,
|
|
||||||
List,
|
|
||||||
Separator,
|
|
||||||
Shortcut,
|
|
||||||
Loading,
|
|
||||||
//
|
|
||||||
Root as Command,
|
|
||||||
Dialog as CommandDialog,
|
|
||||||
Empty as CommandEmpty,
|
|
||||||
Group as CommandGroup,
|
|
||||||
Item as CommandItem,
|
|
||||||
LinkItem as CommandLinkItem,
|
|
||||||
Input as CommandInput,
|
|
||||||
List as CommandList,
|
|
||||||
Separator as CommandSeparator,
|
|
||||||
Shortcut as CommandShortcut,
|
|
||||||
Loading as CommandLoading
|
|
||||||
};
|
|
||||||
Loading…
Reference in New Issue