TZGyn
/
kon.sh
mirror of https://github.com/TZGyn/shortener
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

update badge/button/separator/skeleton component to svelte 5

Browse Source
main
TZGyn 1 year ago
parent 5269844604
commit 6927d7906d
Signed by: TZGyn
GPG Key ID: 122EAF77AE81FD4A
6 changed files with 155 additions and 117 deletions
Show Stats Download Patch File Download Diff File

48
frontend/src/lib/components/ui/badge/badge.svelte
Unescape Escape View File

@ -1,18 +1,50 @@
<script lang="ts" module>
import { type VariantProps, tv } from "tailwind-variants";
export const badgeVariants = tv({
base: "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
variants: {
variant: {
default:
"bg-primary text-primary-foreground hover:bg-primary/80 border-transparent",
secondary:
"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
outline: "text-foreground",
},
},
defaultVariants: {
variant: "default",
},
});
export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
</script>
<script lang="ts">
import { cn } from "$lib/utils";
import { badgeVariants, type Variant } from ".";
import type { WithElementRef } from "bits-ui";
import type { HTMLAnchorAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
let className: string | undefined | null = undefined;
export let href: string | undefined = undefined;
export let variant: Variant = "default";
export { className as class };
let {
ref = $bindable(null),
href,
class: className,
variant = "default",
children,
...restProps
}: WithElementRef<HTMLAnchorAttributes> & {
variant?: BadgeVariant;
} = $props();
</script>
<svelte:element
this={href ? "a" : "span"}
bind:this={ref}
{href}
class={cn(badgeVariants({ variant, className }))}
{...$$restProps}
{...restProps}
>
<slot />
{@render children?.()}
</svelte:element>

22
frontend/src/lib/components/ui/badge/index.ts
Unescape Escape View File

@ -1,22 +1,2 @@
import { tv, type VariantProps } from "tailwind-variants";
export { default as Badge } from "./badge.svelte";
export const badgeVariants = tv({
base: "inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none select-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
variants: {
variant: {
default:
"bg-primary hover:bg-primary/80 border-transparent text-primary-foreground",
secondary:
"bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground",
destructive:
"bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground",
outline: "text-foreground"
}
},
defaultVariants: {
variant: "default"
}
});
export type Variant = VariantProps<typeof badgeVariants>["variant"];
export { badgeVariants, type BadgeVariant } from "./badge.svelte";

97
frontend/src/lib/components/ui/button/button.svelte
Unescape Escape View File

@ -1,24 +1,81 @@
<script lang="ts">
import { Button as ButtonPrimitive } from 'bits-ui'
import { cn } from '$lib/utils'
import { buttonVariants, type Props, type Events } from '.'
<script lang="ts" module>
import type { WithElementRef } from 'bits-ui'
import type {
HTMLAnchorAttributes,
HTMLButtonAttributes,
} from 'svelte/elements'
import { type VariantProps, tv } from 'tailwind-variants'
export const buttonVariants = tv({
base: 'ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
variants: {
variant: {
default:
'bg-primary-foreground text-primary hover:bg-primary-foreground/70',
brand: 'bg-brand text-brand-foreground hover:bg-brand/80',
destructive:
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
outline:
'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
secondary:
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline',
},
size: {
default: 'h-10 px-4 py-2',
sm: 'h-9 rounded-md px-3',
lg: 'h-11 rounded-md px-8',
icon: 'h-10 w-10',
},
},
defaultVariants: {
variant: 'default',
size: 'default',
},
})
export type ButtonVariant = VariantProps<
typeof buttonVariants
>['variant']
export type ButtonSize = VariantProps<typeof buttonVariants>['size']
type $$Props = Props
type $$Events = Events
export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
WithElementRef<HTMLAnchorAttributes> & {
variant?: ButtonVariant
size?: ButtonSize
}
</script>
<script lang="ts">
import { cn } from '$lib/utils.js'
let className: $$Props['class'] = undefined
export let variant: $$Props['variant'] = 'default'
export let size: $$Props['size'] = 'default'
export let builders: $$Props['builders'] = []
export { className as class }
let {
class: className,
variant = 'default',
size = 'default',
ref = $bindable(null),
href = undefined,
type = 'button',
children,
...restProps
}: ButtonProps = $props()
</script>
<ButtonPrimitive.Root
{builders}
class={cn(buttonVariants({ variant, size, className }))}
type="button"
{...$$restProps}
on:click
on:keydown>
<slot />
</ButtonPrimitive.Root>
{#if href}
<a
bind:this={ref}
class={cn(buttonVariants({ variant, size, className }))}
{href}
{...restProps}>
{@render children?.()}
</a>
{:else}
<button
bind:this={ref}
class={cn(buttonVariants({ variant, size, className }))}
{type}
{...restProps}>
{@render children?.()}
</button>
{/if}

58
frontend/src/lib/components/ui/button/index.ts
Unescape Escape View File

@ -1,53 +1,17 @@
import Root from './button.svelte'
import { tv, type VariantProps } from 'tailwind-variants'
import type { Button as ButtonPrimitive } from 'bits-ui'
const buttonVariants = tv({
base: 'inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 flex gap-2',
variants: {
variant: {
default:
'bg-primary-foreground text-primary hover:bg-primary-foreground/70',
brand: 'bg-brand text-brand-foreground hover:bg-brand/80',
destructive:
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
outline:
'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
secondary:
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline',
},
size: {
default: 'h-10 px-4 py-2',
sm: 'h-9 rounded-md px-3',
lg: 'h-11 rounded-md px-8',
icon: 'h-10 w-10',
},
},
defaultVariants: {
variant: 'default',
size: 'default',
},
})
type Variant = VariantProps<typeof buttonVariants>['variant']
type Size = VariantProps<typeof buttonVariants>['size']
type Props = ButtonPrimitive.Props & {
variant?: Variant
size?: Size
}
type Events = ButtonPrimitive.Events
import Root, {
type ButtonProps,
type ButtonSize,
type ButtonVariant,
buttonVariants,
} from "./button.svelte";
export {
Root,
type Props,
type Events,
type ButtonProps as Props,
//
Root as Button,
type Props as ButtonProps,
type Events as ButtonEvents,
buttonVariants,
}
type ButtonProps,
type ButtonSize,
type ButtonVariant,
};

29
frontend/src/lib/components/ui/separator/separator.svelte
Unescape Escape View File

@ -1,23 +1,22 @@
<script lang="ts">
import { Separator as SeparatorPrimitive } from 'bits-ui'
import { cn } from '$lib/utils.js'
import { Separator as SeparatorPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
type $$Props = SeparatorPrimitive.Props
let className: $$Props['class'] = undefined
export let orientation: $$Props['orientation'] = 'horizontal'
export let decorative: $$Props['decorative'] = undefined
export { className as class }
let {
ref = $bindable(null),
class: className,
orientation = "horizontal",
...restProps
}: SeparatorPrimitive.RootProps = $props();
</script>
<SeparatorPrimitive.Root
bind:ref
class={cn(
'bg-border shrink-0',
orientation === 'horizontal'
? 'h-[1px] w-full'
: 'min-h-full w-[1px] self-stretch',
className,
"bg-border shrink-0",
orientation === "horizontal" ? "h-[1px] w-full" : "min-h-full w-[1px]",
className
)}
{orientation}
{decorative}
{...$$restProps} />
{...restProps}
/>

18
frontend/src/lib/components/ui/skeleton/skeleton.svelte
Unescape Escape View File

@ -1,11 +1,17 @@
<script lang="ts">
import { cn } from "$lib/utils.js";
import type { WithElementRef, WithoutChildren } from "bits-ui";
import type { HTMLAttributes } from "svelte/elements";
import { cn } from "$lib/utils.js";
type $$Props = HTMLAttributes<HTMLDivElement>;
let className: $$Props["class"] = undefined;
export { className as class };
let {
ref = $bindable(null),
class: className,
...restProps
}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
</script>
<div class={cn("animate-pulse rounded-md bg-muted", className)} {...$$restProps} />
<div
bind:this={ref}
class={cn("bg-muted animate-pulse rounded-md", className)}
{...restProps}
></div>

Write Preview
Loading…
Cancel
Save