feat: 实现Button组件/样式
- 相关属性对应DaisyUI的样式
This commit is contained in:
52
src/lib/components/ui/button/Button.svelte
Normal file
52
src/lib/components/ui/button/Button.svelte
Normal 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>
|
||||||
30
src/lib/components/ui/button/button.variants.ts
Normal file
30
src/lib/components/ui/button/button.variants.ts
Normal 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;
|
||||||
1
src/lib/components/ui/button/index.ts
Normal file
1
src/lib/components/ui/button/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export { default as Button } from './Button.svelte';
|
||||||
Reference in New Issue
Block a user