qyg2297248353/svgl
qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-02-06 06:58:04 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

⬆️ Upgrade UI components to Svelte 5 (bits-ui)

Browse Source
This commit is contained in:
pheralb 2025-01-31 14:24:30 +00:00
parent d6bb70660e
commit 550ebc3594
15 changed files with 183 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/ui/context-menu/context-menu-checkbox-item.svelte
View File

@ -6,9 +6,15 @@
type $$Props = ContextMenuPrimitive.CheckboxItemProps;
type $$Events = ContextMenuPrimitive.CheckboxItemEvents;
let className: $$Props['class'] = undefined;
export { className as class };
export let checked: $$Props['checked'] = undefined;
interface Props {
class?: $$Props['class'];
checked?: $$Props['checked'];
children?: import('svelte').Snippet;
[key: string]: any
}
let { class: className = undefined, checked = $bindable(undefined), children, ...rest }: Props = $props();
</script>
<ContextMenuPrimitive.CheckboxItem
@ -17,7 +23,7 @@
'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className
)}
{...$$restProps}
{...rest}
on:click
on:keydown
on:focusin
@ -31,5 +37,5 @@
<CheckIcon class="h-4 w-4" />
</ContextMenuPrimitive.CheckboxIndicator>
</span>
<slot />
{@render children?.()}
</ContextMenuPrimitive.CheckboxItem>

24
src/ui/context-menu/context-menu-content.svelte
View File

@ -5,10 +5,22 @@
type $$Props = ContextMenuPrimitive.ContentProps;
let className: $$Props['class'] = undefined;
export let transition: $$Props['transition'] = flyAndScale;
export let transitionConfig: $$Props['transitionConfig'] = undefined;
export { className as class };
interface Props {
class?: $$Props['class'];
transition?: $$Props['transition'];
transitionConfig?: $$Props['transitionConfig'];
children?: import('svelte').Snippet;
[key: string]: any
}
let {
class: className = undefined,
transition = flyAndScale,
transitionConfig = undefined,
children,
...rest
}: Props = $props();
</script>
<ContextMenuPrimitive.Content
@ -18,8 +30,8 @@
'bg-white dark:bg-neutral-900 text-popover-foreground z-50 min-w-[8rem] rounded-md border border-neutral-200 dark:border-neutral-800 p-1 shadow-md focus:outline-none',
className
)}
{...$$restProps}
{...rest}
on:keydown
>
<slot />
{@render children?.()}
</ContextMenuPrimitive.Content>

16
src/ui/context-menu/context-menu-item.svelte
View File

@ -7,9 +7,15 @@
};
type $$Events = ContextMenuPrimitive.ItemEvents;
let className: $$Props['class'] = undefined;
export let inset: $$Props['inset'] = undefined;
export { className as class };
interface Props {
class?: $$Props['class'];
inset?: $$Props['inset'];
children?: import('svelte').Snippet;
[key: string]: any
}
let { class: className = undefined, inset = undefined, children, ...rest }: Props = $props();
</script>
<ContextMenuPrimitive.Item
@ -18,7 +24,7 @@
inset && 'pl-8',
className
)}
{...$$restProps}
{...rest}
on:click
on:keydown
on:focusin
@ -27,5 +33,5 @@
on:pointerleave
on:pointermove
>
<slot />
{@render children?.()}
</ContextMenuPrimitive.Item>

16
src/ui/context-menu/context-menu-label.svelte
View File

@ -6,14 +6,20 @@
inset?: boolean;
};
let className: $$Props['class'] = undefined;
export let inset: $$Props['inset'] = undefined;
export { className as class };
interface Props {
class?: $$Props['class'];
inset?: $$Props['inset'];
children?: import('svelte').Snippet;
[key: string]: any
}
let { class: className = undefined, inset = undefined, children, ...rest }: Props = $props();
</script>
<ContextMenuPrimitive.Label
class={cn('text-foreground px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
{...$$restProps}
{...rest}
>
<slot />
{@render children?.()}
</ContextMenuPrimitive.Label>

26
src/ui/dialog/dialog-content.svelte
View File

@ -8,12 +8,24 @@
type $$Props = DialogPrimitive.ContentProps;
let className: $$Props['class'] = undefined;
export let transition: $$Props['transition'] = flyAndScale;
export let transitionConfig: $$Props['transitionConfig'] = {
interface Props {
class?: $$Props['class'];
transition?: $$Props['transition'];
transitionConfig?: $$Props['transitionConfig'];
children?: import('svelte').Snippet;
[key: string]: any
}
let {
class: className = undefined,
transition = flyAndScale,
transitionConfig = {
duration: 200
};
export { className as class };
},
children,
...rest
}: Props = $props();
</script>
<Dialog.Portal>
@ -25,9 +37,9 @@
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] border border-neutral-200 dark:border-neutral-800 dark:bg-neutral-900 bg-white p-6 shadow-lg sm:rounded-lg md:w-full',
className
)}
{...$$restProps}
{...rest}
>
<slot />
{@render children?.()}
<DialogPrimitive.Close
class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
>

14
src/ui/dialog/dialog-description.svelte
View File

@ -4,10 +4,16 @@
type $$Props = DialogPrimitive.DescriptionProps;
let className: $$Props['class'] = undefined;
export { className as class };
interface Props {
class?: $$Props['class'];
children?: import('svelte').Snippet;
[key: string]: any
}
let { class: className = undefined, children, ...rest }: Props = $props();
</script>
<DialogPrimitive.Description class={cn('text-sm opacity-70 mb-2', className)} {...$$restProps}>
<slot />
<DialogPrimitive.Description class={cn('text-sm opacity-70 mb-2', className)} {...rest}>
{@render children?.()}
</DialogPrimitive.Description>

14
src/ui/dialog/dialog-footer.svelte
View File

@ -4,13 +4,19 @@
type $$Props = HTMLAttributes<HTMLDivElement>;
let className: $$Props['class'] = undefined;
export { className as class };
interface Props {
class?: $$Props['class'];
children?: import('svelte').Snippet;
[key: string]: any
}
let { class: className = undefined, children, ...rest }: Props = $props();
</script>
<div
class={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
{...$$restProps}
{...rest}
>
<slot />
{@render children?.()}
</div>

14
src/ui/dialog/dialog-header.svelte
View File

@ -4,10 +4,16 @@
type $$Props = HTMLAttributes<HTMLDivElement>;
let className: $$Props['class'] = undefined;
export { className as class };
interface Props {
class?: $$Props['class'];
children?: import('svelte').Snippet;
[key: string]: any
}
let { class: className = undefined, children, ...rest }: Props = $props();
</script>
<div class={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...$$restProps}>
<slot />
<div class={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...rest}>
{@render children?.()}
</div>

17
src/ui/dialog/dialog-overlay.svelte
View File

@ -5,12 +5,17 @@
type $$Props = DialogPrimitive.OverlayProps;
let className: $$Props['class'] = undefined;
export let transition: $$Props['transition'] = fade;
export let transitionConfig: $$Props['transitionConfig'] = {
interface Props {
class?: $$Props['class'];
transition?: $$Props['transition'];
transitionConfig?: $$Props['transitionConfig'];
[key: string]: any
}
let { class: className = undefined, transition = fade, transitionConfig = {
duration: 150
};
export { className as class };
}, ...rest }: Props = $props();
</script>
<DialogPrimitive.Overlay
@ -20,5 +25,5 @@
'fixed inset-0 z-50 bg-neutral-100/80 dark:bg-neutral-900/80 backdrop-blur-sm',
className
)}
{...$$restProps}
{...rest}
/>

10
src/ui/dialog/dialog-portal.svelte
View File

@ -1,8 +1,14 @@
<script lang="ts">
import { Dialog as DialogPrimitive } from 'bits-ui';
interface Props {
children?: import('svelte').Snippet;
[key: string]: any
}
let { children, ...rest }: Props = $props();
type $$Props = DialogPrimitive.PortalProps;
</script>
<DialogPrimitive.Portal {...$$restProps}>
<slot />
<DialogPrimitive.Portal {...rest}>
{@render children?.()}
</DialogPrimitive.Portal>

14
src/ui/dialog/dialog-title.svelte
View File

@ -4,13 +4,19 @@
type $$Props = DialogPrimitive.TitleProps;
let className: $$Props['class'] = undefined;
export { className as class };
interface Props {
class?: $$Props['class'];
children?: import('svelte').Snippet;
[key: string]: any
}
let { class: className = undefined, children, ...rest }: Props = $props();
</script>
<DialogPrimitive.Title
class={cn('text-lg font-semibold leading-none tracking-tight', className)}
{...$$restProps}
{...rest}
>
<slot />
{@render children?.()}
</DialogPrimitive.Title>

30
src/ui/popover/popover-content.svelte
View File

@ -6,12 +6,26 @@
type $$Props = PopoverPrimitive.ContentProps;
let className: $$Props['class'] = undefined;
export let transition: $$Props['transition'] = flyAndScale;
export let transitionConfig: $$Props['transitionConfig'] = undefined;
export let align: $$Props['align'] = 'center';
export let sideOffset: $$Props['sideOffset'] = 4;
export { className as class };
interface Props {
class?: $$Props['class'];
transition?: $$Props['transition'];
transitionConfig?: $$Props['transitionConfig'];
align?: $$Props['align'];
sideOffset?: $$Props['sideOffset'];
children?: import('svelte').Snippet;
[key: string]: any
}
let {
class: className = undefined,
transition = flyAndScale,
transitionConfig = undefined,
align = 'center',
sideOffset = 4,
children,
...rest
}: Props = $props();
</script>
<PopoverPrimitive.Content
@ -19,11 +33,11 @@
{transitionConfig}
{align}
{sideOffset}
{...$$restProps}
{...rest}
class={cn(
'z-50 w-auto max-w-96 rounded-md border border-neutral-200 bg-white p-3 shadow-md outline-none dark:border-neutral-800 dark:bg-neutral-900',
className
)}
>
<slot />
{@render children?.()}
</PopoverPrimitive.Content>

16
src/ui/tabs/tabs-content.svelte
View File

@ -4,9 +4,15 @@
type $$Props = TabsPrimitive.ContentProps;
let className: $$Props['class'] = undefined;
export let value: $$Props['value'];
export { className as class };
interface Props {
class?: $$Props['class'];
value: $$Props['value'];
children?: import('svelte').Snippet;
[key: string]: any
}
let { class: className = undefined, value, children, ...rest }: Props = $props();
</script>
<TabsPrimitive.Content
@ -15,7 +21,7 @@
className
)}
{value}
{...$$restProps}
{...rest}
>
<slot />
{@render children?.()}
</TabsPrimitive.Content>

14
src/ui/tabs/tabs-list.svelte
View File

@ -4,13 +4,19 @@
type $$Props = TabsPrimitive.ListProps;
let className: $$Props['class'] = undefined;
export { className as class };
interface Props {
class?: $$Props['class'];
children?: import('svelte').Snippet;
[key: string]: any
}
let { class: className = undefined, children, ...rest }: Props = $props();
</script>
<TabsPrimitive.List
class={cn('mb-2 flex flex-wrap items-center justify-center space-x-1 rounded-lg', className)}
{...$$restProps}
{...rest}
>
<slot />
{@render children?.()}
</TabsPrimitive.List>

16
src/ui/tabs/tabs-trigger.svelte
View File

@ -5,9 +5,15 @@
type $$Props = TabsPrimitive.TriggerProps;
type $$Events = TabsPrimitive.TriggerEvents;
let className: $$Props['class'] = undefined;
export let value: $$Props['value'];
export { className as class };
interface Props {
class?: $$Props['class'];
value: $$Props['value'];
children?: import('svelte').Snippet;
[key: string]: any
}
let { class: className = undefined, value, children, ...rest }: Props = $props();
</script>
<TabsPrimitive.Trigger
@ -16,10 +22,10 @@
className
)}
{value}
{...$$restProps}
{...rest}
on:click
on:keydown
on:focus
>
<slot />
{@render children?.()}
</TabsPrimitive.Trigger>