solid-element-ui 0.2.4 → 0.2.6

package/src/progress/progress.tsx

@@ -0,0 +1,83 @@
+import { Progress as KProgress } from "@kobalte/core/progress";
+import { splitProps, type ComponentProps, Show } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+
+// FIXME  进度条问题，value 直接占满
+
+const progressStyles = tv(
+    {
+        slots: {
+            root: "flex flex-col gap-2 w-full antialiased",
+            labelContainer:
+                "flex justify-between items-center text-sm font-medium text-slate-700 dark:text-slate-300",
+            track: "h-2 w-full rounded-full bg-appoverflow-hidden",
+            fill: "h-full bg-primary transition-all duration-300 ease-in-out data-[indeterminate]:animate-progress-indeterminate",
+        },
+        variants: {
+            size: {
+                sm: { track: "h-1" },
+                md: { track: "h-2" },
+                lg: { track: "h-3" },
+            },
+            radius: {
+                none: { track: "rounded-none", fill: "rounded-none" },
+                sm: { track: "rounded-sm", fill: "rounded-sm" },
+                md: { track: "rounded-md", fill: "rounded-md" },
+                lg: { track: "rounded-lg", fill: "rounded-lg" },
+                full: { track: "rounded-full", fill: "rounded-full" },
+            },
+        },
+        defaultVariants: {
+            size: "md",
+            radius: "full",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type ProgressVariants = VariantProps<typeof progressStyles>;
+
+export interface ProgressProps
+    extends Omit<ComponentProps<typeof KProgress>, "children">,
+        ProgressVariants {
+    label?: string;
+    showValue?: boolean;
+}
+
+
+export const Progress = (props: ProgressProps) => {
+    const [local, variantProps, others] = splitProps(
+        props,
+        ["label", "showValue", "class"],
+        ["size", "radius"]
+    );
+
+    const { root, labelContainer, track, fill } = progressStyles({
+        size: variantProps.size,
+        radius: variantProps.radius,
+    });
+
+    return (
+        <KProgress class={root({ class: local.class })} {...others}>
+            <Show when={local.label || local.showValue}>
+                <div class={labelContainer()}>
+                    <Show when={local.label}>
+                        <KProgress.Label>{local.label}</KProgress.Label>
+                    </Show>
+                    <Show when={local.showValue}>
+                        <KProgress.ValueLabel class="text-xs text-slate-500" />
+                    </Show>
+                </div>
+            </Show>
+
+            <KProgress.Track class={track()}>
+                <KProgress.Fill
+                    class={fill()}
+                    style={{ width: "var(--kb-progress-fill-width)" }}
+                />
+            </KProgress.Track>
+        </KProgress>
+    );
+};

package/src/radio-group/radio-group.tsx

@@ -0,0 +1,94 @@
+import { RadioGroup as KRadioGroup } from "@kobalte/core/radio-group";
+import { splitProps, type ComponentProps, For, Show } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+
+const radioStyles = tv(
+    {
+        slots: {
+            root: "flex flex-col gap-3 antialiased",
+            label: "text-sm font-semibold text-main mb-1",
+            item: "group flex items-center gap-3 cursor-pointer disabled:cursor-not-allowed",
+            control: [
+                "flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-slate-300 bg-app transition-all shadow-sm",
+                "group-hover:border-light group-data-[checked]:border-primary group-data-[checked]:bg-primary",
+                "group-focus-visible:ring-2 group-focus-visible:ring-blue-500/20",
+               
+            ],
+            indicator: "h-2 w-2 rounded-full bg-app shadow-sm",
+            itemLabel:
+                "text-sm font-medium text-main group-data-[disabled]:opacity-50",
+        },
+        variants: {
+            orientation: {
+                horizontal: { root: "flex-row flex-wrap gap-6" },
+                vertical: { root: "flex-col" },
+            },
+        },
+        defaultVariants: {
+            orientation: "vertical",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type RadioVariants = VariantProps<typeof radioStyles>;
+
+export interface RadioOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+
+export interface RadioGroupProps
+    extends Omit<ComponentProps<typeof KRadioGroup>, "children" | "class">,
+        RadioVariants {
+    label?: string;
+    options: RadioOption[];
+    class?: string;
+}
+
+/**
+ * RadioGroup 高度封装版
+ * 自动处理循环渲染、选中指示器以及水平/垂直布局
+ */
+export const RadioGroup = (props: RadioGroupProps) => {
+    const [local, variantProps, others] = splitProps(
+        props,
+        ["label", "options", "class"],
+        ["orientation"]
+    );
+
+    const s = () => radioStyles({ orientation: variantProps.orientation });
+
+    return (
+        <KRadioGroup class={s().root({ class: local.class })} {...others}>
+            <Show when={local.label}>
+                <KRadioGroup.Label class={s().label()}>
+                    {local.label}
+                </KRadioGroup.Label>
+            </Show>
+
+            <For each={local.options}>
+                {(option) => (
+                    <KRadioGroup.Item
+                        value={option.value}
+                        disabled={option.disabled}
+                        class={s().item()}
+                    >
+                        <KRadioGroup.ItemInput />
+                        <KRadioGroup.ItemControl class={s().control()}>
+                            <KRadioGroup.ItemIndicator
+                                class={s().indicator()}
+                            />
+                        </KRadioGroup.ItemControl>
+                        <KRadioGroup.ItemLabel class={s().itemLabel()}>
+                            {option.label}
+                        </KRadioGroup.ItemLabel>
+                    </KRadioGroup.Item>
+                )}
+            </For>
+        </KRadioGroup>
+    );
+};

package/src/rating-group/rating-group.tsx

@@ -0,0 +1,101 @@
+// import { RatingGroup as KRatingGroup } from "@kobalte/core/rating-group";
+// import { splitProps, type ComponentProps, For, Show } from "solid-js";
+// import { tv, type VariantProps } from "tailwind-variants";
+// import { Star } from "lucide-solid";
+
+// const ratingStyles = tv({
+//     slots: {
+//         root: "flex flex-col gap-1.5 antialiased",
+//         label: "text-sm font-medium text-slate-700 dark:text-slate-300",
+//         control: "flex items-center gap-0.5",
+//         item: "relative cursor-pointer transition-transform active:scale-90 focus-visible:outline-none",
+//         itemIndicator: "flex items-center justify-center transition-colors",
+//     },
+//     variants: {
+//         color: {
+//             yellow: {
+//                 itemIndicator:
+//                     "text-amber-400 fill-transparent data-[highlighted]:fill-amber-400 data-[highlighted]:text-amber-400",
+//             },
+//             blue: {
+//                 itemIndicator:
+//                     "text-blue-500 fill-transparent data-[highlighted]:fill-blue-500 data-[highlighted]:text-blue-500",
+//             },
+//             red: {
+//                 itemIndicator:
+//                     "text-red-500 fill-transparent data-[highlighted]:fill-red-500 data-[highlighted]:text-red-500",
+//             },
+//         },
+//         size: {
+//             sm: { itemIndicator: "h-4 w-4" },
+//             md: { itemIndicator: "h-6 w-6" },
+//             lg: { itemIndicator: "h-8 w-8" },
+//         },
+//     },
+//     defaultVariants: {
+//         color: "yellow",
+//         size: "md",
+//     },
+// });
+
+// type RatingVariants = VariantProps<typeof ratingStyles>;
+
+// export interface RatingGroupProps
+//     extends Omit<ComponentProps<typeof KRatingGroup>, "children" | "class">,
+//         RatingVariants {
+//     label?: string;
+//     count?: number; // 星星总数，默认为 5
+//     class?: string;
+// }
+
+// /**
+//  * RatingGroup 高度封装版
+//  * 自动处理星星循环、高亮逻辑及表单集成
+//  */
+// export const RatingGroup = (props: RatingGroupProps) => {
+//     const [local, variantProps, others] = splitProps(
+//         props,
+//         ["label", "count", "class"],
+//         ["color", "size"]
+//     );
+
+//     const s = () =>
+//         ratingStyles({
+//             color: variantProps.color,
+//             size: variantProps.size,
+//         });
+
+//     const maxCount = () => local.count ?? 5;
+
+//     return (
+//         <KProgress class={s().root({ class: local.class })} {...others}>
+//             <Show when={local.label}>
+//                 <KRatingGroup.Label class={s().label()}>
+//                     {local.label}
+//                 </KRatingGroup.Label>
+//             </Show>
+
+//             <KRatingGroup.Control class={s().control()}>
+//                 <KRatingGroup.HiddenInput />
+//                 <KRatingGroup.Context>
+//                     {(state) => (
+//                         <For each={state.items}>
+//                             {(index) => (
+//                                 <KRatingGroup.Item
+//                                     index={index}
+//                                     class={s().item()}
+//                                 >
+//                                     <KRatingGroup.ItemIndicator
+//                                         class={s().itemIndicator()}
+//                                     >
+//                                         <Star />
+//                                     </KRatingGroup.ItemIndicator>
+//                                 </KRatingGroup.Item>
+//                             )}
+//                         </For>
+//                     )}
+//                 </KRatingGroup.Context>
+//             </KRatingGroup.Control>
+//         </KProgress>
+//     );
+// };

package/src/search/search.tsx

@@ -0,0 +1,99 @@
+import { TextField as KSearch } from "@kobalte/core/text-field";
+import { splitProps, type ComponentProps, Show } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+import { Search as SearchIcon, CircleX } from "lucide-solid";
+
+const searchStyles = tv(
+    {
+        slots: {
+            root: "relative flex flex-col gap-1.5 w-full",
+            inputWrapper: "relative flex items-center transition-all",
+            input: [
+                "flex h-10 w-full rounded-md border border-light bg-app px-9 py-2 text-sm",
+                "ring-offset-app file:border-0 file:bg-transparent file:text-sm file:font-medium",
+                "placeholder:text-muted focus-visible:outline-none focus-visible:ring-2",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+            ],
+            icon: "absolute left-3 h-4 w-4 text-main pointer-events-none",
+            clear: "absolute right-3 h-4 w-4 text-main hover:text-muted cursor-pointer transition-colors",
+        },
+        variants: {
+            size: {
+                sm: {
+                    input: "h-8 text-xs px-8",
+                    icon: "h-3.5 w-3.5",
+                    clear: "h-3.5 w-3.5",
+                },
+                md: {
+                    input: "h-10 text-sm",
+                    icon: "h-4 w-4",
+                    clear: "h-4 w-4",
+                },
+                lg: {
+                    input: "h-12 text-base px-10",
+                    icon: "h-5 w-5",
+                    clear: "h-5 w-5",
+                },
+            },
+            ringColor: {
+                primary: { input: "focus-visible:ring-primary" },
+                danger: { input: "focus-visible:ring-danger" },
+            },
+        },
+        defaultVariants: {
+            size: "md",
+            ringColor: "primary",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type SearchVariants = VariantProps<typeof searchStyles>;
+
+export interface SearchProps
+    extends Omit<ComponentProps<typeof KSearch>, "class">, SearchVariants {
+    class?: string;
+    placeholder?: string;
+    allowClear?: boolean;
+    onClear?: () => void;
+}
+
+export const Search = (props: SearchProps) => {
+    const [local, variantProps, others] = splitProps(
+        props,
+        ["class", "placeholder", "allowClear", "onClear", "value", "onChange"],
+        ["size", "ringColor"],
+    );
+
+    const styles = searchStyles(variantProps);
+
+    return (
+        <KSearch
+            class={styles.root({ class: local.class })}
+            value={local.value}
+            onChange={local.onChange}
+            {...others}
+        >
+            <div class={styles.inputWrapper()}>
+                <SearchIcon class={styles.icon()} />
+                <KSearch.Input
+                    class={styles.input()}
+                    placeholder={local.placeholder ?? "搜索..."}
+                />
+                <Show when={local.allowClear && local.value}>
+                    <button
+                        onClick={() => local.onClear?.()}
+                        class={styles.clear()}
+                    >
+                        <CircleX
+                            fill="currentColor"
+                            class="text-white dark:text-slate-950"
+                        />
+                    </button>
+                </Show>
+            </div>
+        </KSearch>
+    );
+};

package/src/segmented-control/segmented-control.tsx

@@ -0,0 +1,92 @@
+import { SegmentedControl as KSegmented } from "@kobalte/core/segmented-control";
+import { splitProps, For, type ComponentProps } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+
+// FIXME 样式问题
+
+const segmentedStyles = tv(
+    {
+        slots: {
+            root: "relative flex flex-col",
+            container:
+                "relative flex items-center w-full rounded-lg bg-foreground p-1 text-main",
+            item: [
+                " z-10 inline-flex flex-1 items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all cursor-pointer",
+                "outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2",
+                "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+                " transition-colors duration-200",
+            ],
+            indicator:
+                "absolute z-0 bg-app shadow-sm rounded-md transition-all duration-200 ease-in-out ",
+            label: "mb-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+            itemLabel: "flex w-full cursor-pointer items-center justify-center",
+        },
+        variants: {
+            size: {
+                sm: { root: "p-0.5", item: "px-2 py-1 text-xs" },
+                md: { root: "p-1", item: "px-3 py-1.5 text-sm" },
+                lg: { root: "p-1.5", item: "px-6 py-2 text-base" },
+            },
+        },
+        defaultVariants: {
+            size: "md",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type SegmentedVariants = VariantProps<typeof segmentedStyles>;
+
+interface Option {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+
+export interface SegmentedControlProps
+    extends
+        Omit<ComponentProps<typeof KSegmented>, "class">,
+        SegmentedVariants {
+    options: Option[];
+    label?: string;
+    class?: string;
+}
+
+export const SegmentedControl = (props: SegmentedControlProps) => {
+    const [local, variantProps, others] = splitProps(
+        props,
+        ["options", "class", "label"],
+        ["size"],
+    );
+
+    const styles = segmentedStyles(variantProps);
+
+    return (
+        <KSegmented class={styles.root({ class: local.class })} {...others}>
+            {local.label && (
+                <KSegmented.Label class={styles.label()}>
+                    {local.label}
+                </KSegmented.Label>
+            )}
+            <div class={styles.container()}>
+                <For each={local.options}>
+                    {(option) => (
+                        <KSegmented.Item
+                            value={option.value}
+                            disabled={option.disabled}
+                            class={styles.item()}
+                        >
+                            <KSegmented.ItemInput />
+                            <KSegmented.ItemLabel class={styles.itemLabel()}>
+                                {option.label}
+                            </KSegmented.ItemLabel>
+                        </KSegmented.Item>
+                    )}
+                </For>
+                <KSegmented.Indicator class={styles.indicator()} />
+            </div>
+        </KSegmented>
+    );
+};

package/src/select/select.tsx

@@ -0,0 +1,163 @@
+import { Select as KSelect } from "@kobalte/core/select";
+import { splitProps, Show, createMemo } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+import { ChevronDown, Check } from "lucide-solid";
+
+const selectStyles = tv(
+    {
+        slots: {
+            root: "flex flex-col gap-1.5 w-full",
+            label: "text-sm font-medium text-muted",
+            trigger: [
+                "flex h-10 w-full text-main items-center justify-between rounded-md border border-light bg-app px-3 py-2 text-sm",
+                "ring-offset-white placeholder:text-muted focus:outline-none focus:ring-1 focus:ring-blue-500",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+            ],
+            content: [
+                "relative z-50 min-w-[8rem] overflow-hidden rounded-md border border-light bg-app shadow-md text-main",
+                "data-[expanded]:animate-in data-[closed]:animate-out",
+            ],
+            listbox: "p-1",
+            item: [
+                "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
+                "focus:bg-foreground focus:text-main data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+            ],
+            itemIndicator:
+                "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
+            description: "mt-1 text-xs text-muted",
+        },
+        variants: {
+            size: {
+                sm: { trigger: "h-8 text-xs", item: "py-1 text-xs" },
+                md: { trigger: "h-10 text-sm", item: "py-1.5 text-sm" },
+                lg: { trigger: "h-12 text-base", item: "py-2 text-base" },
+            },
+        },
+        defaultVariants: {
+            size: "md",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type SelectVariants = VariantProps<typeof selectStyles>;
+
+interface Option {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+
+// 重新定义接口，使 value 和 onChange 处理的是 string 类型
+export interface SelectProps extends SelectVariants {
+    options: Option[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    label?: string;
+    description?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    name?: string;
+    class?: string;
+}
+
+export const Select = (props: SelectProps) => {
+    const [local, variantProps, others] = splitProps(
+        props,
+        [
+            "options",
+            "label",
+            "description",
+            "placeholder",
+            "class",
+            "value",
+            "defaultValue",
+            "onChange",
+        ],
+        ["size"],
+    );
+
+    const styles = selectStyles(variantProps);
+
+    const selectedOption = createMemo(() => {
+        if (local.value === undefined) return undefined;
+        return local.options.find((opt) => opt.value === local.value);
+    });
+
+    const defaultOption = createMemo(() => {
+        if (local.defaultValue === undefined) return undefined;
+        return local.options.find((opt) => opt.value === local.defaultValue);
+    });
+
+    const handleValueChange = (opt: Option | null) => {
+        if (opt === null) {
+           
+            local.onChange?.("");
+            return;
+        }
+        local.onChange?.(opt.value);
+    };
+
+    return (
+        <KSelect<Option>
+            multiple={false}
+            options={local.options}
+            optionValue="value"
+            optionTextValue="label"
+            optionDisabled="disabled"
+            placeholder={local.placeholder}
+            value={selectedOption()}
+            defaultValue={defaultOption()}
+            onChange={handleValueChange}
+            class={styles.root({ class: local.class })}
+            {...others}
+            itemComponent={(itemProps) => (
+                <KSelect.Item item={itemProps.item} class={styles.item()}>
+                    <KSelect.ItemIndicator class={styles.itemIndicator()}>
+                        <Check size={14} />
+                    </KSelect.ItemIndicator>
+                    <KSelect.ItemLabel>
+                        {itemProps.item.textValue}
+                    </KSelect.ItemLabel>
+                </KSelect.Item>
+            )}
+        >
+            <Show when={local.label}>
+                <KSelect.Label class={styles.label()}>
+                    {local.label}
+                </KSelect.Label>
+            </Show>
+
+            <KSelect.Trigger class={styles.trigger()}>
+                <KSelect.Value<Option>>
+                    {(state) => (
+                        <Show
+                            when={state.selectedOption()}
+                            fallback={local.placeholder}
+                        >
+                            {state.selectedOption()?.label}
+                        </Show>
+                    )}
+                </KSelect.Value>
+                <KSelect.Icon>
+                    <ChevronDown size={16} class="opacity-50" />
+                </KSelect.Icon>
+            </KSelect.Trigger>
+
+            <KSelect.Portal>
+                <KSelect.Content class={styles.content()}>
+                    <KSelect.Listbox class={styles.listbox()} />
+                </KSelect.Content>
+            </KSelect.Portal>
+
+            <Show when={local.description}>
+                <KSelect.Description class={styles.description()}>
+                    {local.description}
+                </KSelect.Description>
+            </Show>
+        </KSelect>
+    );
+};