feat: 为Select组件实现DaisyUI样式

src/lib/components/ui/select/Select.variants.ts

@@ -0,0 +1,21 @@
+export const COLOR_MAP = {
+  neutral: 'select-neutral',
+  primary: 'select-primary',
+  secondary: 'select-secondary',
+  accent: 'select-accent',
+  info: 'select-info',
+  success: 'select-success',
+  warning: 'select-warning',
+  error: 'select-error',
+} as const;
+
+export const SIZE_MAP = {
+  xs: 'select-xs',
+  sm: 'select-sm',
+  md: 'select-md',
+  lg: 'select-lg',
+  xl: 'select-xl',
+} as const;
+
+export type Color = keyof typeof COLOR_MAP;
+export type Size = keyof typeof SIZE_MAP;

src/lib/components/ui/select/SelectContent.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { Select as BitsSelect, type WithoutChildren } from 'bits-ui';
-  import { elasticOut, cubicOut } from 'svelte/easing';
+  import { cubicOut } from 'svelte/easing';
 
   type Props = WithoutChildren<BitsSelect.ContentProps> & {
     items: { value: string; label: string; disabled?: boolean }[];
@@ -21,7 +21,7 @@
   ) {
     const {
       delay = 0,
-      duration = 1000,
+      duration = 200,
       easing = cubicOut,
       y = -6,
       start = 0.95,
@@ -59,11 +59,7 @@ transform: ${existingTransform} ${translate} ${scale};
     {#snippet child({ wrapperProps, props, open })}
       {#if open}
         <div {...wrapperProps}>
-          <div
-            {...props}
-            in:selectTransition={{ easing: elasticOut }}
-            out:selectTransition={{ duration: 200 }}
-          >
+          <div {...props} transition:selectTransition>
             <BitsSelect.ScrollUpButton>up</BitsSelect.ScrollUpButton>
             <BitsSelect.Viewport class="p-1">
               {#each items as { value, label, disabled } (value)}

src/lib/components/ui/select/SelectTrigger.svelte

@@ -2,16 +2,40 @@
   import { Select as BitsSelect, type WithoutChildren } from 'bits-ui';
   import type { Snippet } from 'svelte';
 
+  import { COLOR_MAP, SIZE_MAP } from './Select.variants';
+  import type { Color, Size } from './Select.variants';
+
   type Props = WithoutChildren<BitsSelect.TriggerProps> & {
+    color?: Color;
+    size?: Size;
+    ghost?: boolean;
+
     class?: string;
     children?: Snippet;
   };
 
-  let { children, class: className = '' }: Props = $props();
+  let {
+    color,
+    size,
+    ghost,
+    children,
+    class: className = '',
+    ...restProps
+  }: Props = $props();
+
+  const classes = $derived(
+    [
+      'select',
+      color && COLOR_MAP[color],
+      size && SIZE_MAP[size],
+      ghost && 'select-ghost',
+      className,
+    ]
+      .filter(Boolean)
+      .join(' ')
+  );
 </script>
 
-<BitsSelect.Trigger
-  class={`select outline-none focus:border-base-content/20 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 ${className}`}
->
+<BitsSelect.Trigger class={classes.trim()} {...restProps}>
   {@render children?.()}
 </BitsSelect.Trigger>