feat: 实现Button组件/样式

- 相关属性对应DaisyUI的样式
This commit is contained in:
2025-12-23 12:06:15 +08:00
parent 71df72f843
commit d32d88b56c
3 changed files with 83 additions and 0 deletions

View File

@ -0,0 +1,52 @@
<script lang="ts">
import { Button as BitsButton, type WithoutChildren } from 'bits-ui';
import type { Snippet } from 'svelte';
import { COLOR_MAP, VARIANT_MAP, SIZE_MAP } from './button.variants';
import type { Color, Variant, Size } from './button.variants';
type Props = WithoutChildren<BitsButton.RootProps> & {
color?: Color;
variant?: Variant;
size?: Size;
wide?: boolean;
block?: boolean;
square?: boolean;
circle?: boolean;
class?: string;
children?: Snippet;
};
let {
color,
variant,
size,
wide,
block,
square,
circle,
class: className = '',
children,
...restProps
}: Props = $props();
const classes = $derived(
[
'btn',
color && COLOR_MAP[color],
variant && VARIANT_MAP[variant],
size && SIZE_MAP[size],
wide && 'btn-wide',
block && 'btn-block',
square && 'btn-square',
circle && 'btn-circle',
className,
]
.filter(Boolean)
.join(' ')
);
</script>
<BitsButton.Root class={classes.trim()} {...restProps}>
{@render children?.()}
</BitsButton.Root>

View File

@ -0,0 +1,30 @@
export const COLOR_MAP = {
neutral: 'btn-neutral',
primary: 'btn-primary',
secondary: 'btn-secondary',
accent: 'btn-accent',
info: 'btn-info',
success: 'btn-success',
warning: 'btn-warning',
error: 'btn-error',
} as const;
export const VARIANT_MAP = {
outline: 'btn-outline',
dash: 'btn-dash',
soft: 'btn-soft',
ghost: 'btn-ghost',
link: 'btn-link',
} as const;
export const SIZE_MAP = {
xs: 'btn-xs',
sm: 'btn-sm',
md: 'btn-md',
lg: 'btn-lg',
xl: 'btn-xl',
} as const;
export type Color = keyof typeof COLOR_MAP;
export type Variant = keyof typeof VARIANT_MAP;
export type Size = keyof typeof SIZE_MAP;

View File

@ -0,0 +1 @@
export { default as Button } from './Button.svelte';