solid-element-ui 0.2.3 → 0.2.5

package/src/checkbox/checkbox.tsx

@@ -0,0 +1,64 @@
+import { Checkbox as KCheckbox } from "@kobalte/core/checkbox";
+import { splitProps, type ComponentProps, type JSX } from "solid-js";
+import { tv } from "tailwind-variants";
+import { Check } from "lucide-solid";
+
+// TODO 添加checkbox 的几种形状尺寸,看情况吧
+
+	
+
+const checkboxStyles = tv(
+    {
+        slots: {
+            root: "group flex items-center gap-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50",
+            control: [
+                "flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-zinc-300 transition-all",
+                "group-focus-visible:outline-none group-focus-visible:ring-2 group-focus-visible:ring-zinc-950",
+                "data-[checked]:bg-zinc-900 data-[checked]:border-zinc-900 data-[checked]:text-zinc-50",
+                "data-[disabled]:bg-zinc-400 data-[disabled]:border-zinc-400",
+                "dark:border-zinc-700 dark:data-[checked]:bg-zinc-50 dark:data-[checked]:text-zinc-900 dark:group-focus-visible:ring-zinc-300",
+            ],
+            label: "text-sm font-medium leading-none select-none data-[disabled]:text-zinc-400",
+            indicator: "h-3.5 w-3.5",
+            description: "text-sm text-zinc-500",
+            errorMessage: "text-sm text-red-500",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const { root, control, label, indicator, description, errorMessage } = checkboxStyles();
+export interface CheckboxProps extends ComponentProps<typeof KCheckbox> {
+    label?: JSX.Element;
+}
+
+export const Checkbox = (props: CheckboxProps) => {
+    const [local, others] = splitProps(props, [
+        "label",
+        "class",
+        "description",
+        "errorMessage",
+    ]);
+
+    return (
+        <KCheckbox class={root({ class: local.class })} {...others}>
+            <KCheckbox.Input />
+            <KCheckbox.Control class={control()}>
+                <KCheckbox.Indicator class={indicator()}>
+                    <Check class={indicator()} stroke-width={3} />
+                </KCheckbox.Indicator>
+            </KCheckbox.Control>
+            {local.label && (
+                <KCheckbox.Label class={label()}>{local.label}</KCheckbox.Label>
+            )}
+            <KCheckbox.Description class={description()}>
+                {local.description}
+            </KCheckbox.Description>
+            <KCheckbox.ErrorMessage class={errorMessage()}>
+                {local.errorMessage}
+            </KCheckbox.ErrorMessage>
+        </KCheckbox>
+    );
+};

package/src/collapsible/collapsible.tsx

@@ -0,0 +1,46 @@
+import { Collapsible as KCollapsible } from "@kobalte/core/collapsible";
+import { splitProps, type JSX, type ComponentProps } from "solid-js";
+import { tv } from "tailwind-variants";
+import { ChevronDown } from "lucide-solid";
+
+const collapsibleStyles = tv(
+    {
+        slots: {
+            root: "w-full space-y-2",
+            trigger:
+                "flex w-full items-center justify-between border border-base/30 bg-header px-4 py-2 text-sm font-medium hover:bg-header/80  transition-all group mb-0",
+            content:
+                "overflow-hidden text-sm transition-all data-[expanded]:animate-collapsible-down data-[closed]:animate-collapsible-up",
+            contentInner:
+                "px-4 py-3 text-main border border-base/20 !border-t-0",
+            icon: "h-4 w-4 text-zinc-500 transition-transform duration-200 group-data-[expanded]:rotate-180",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const { root, trigger, content, contentInner, icon } = collapsibleStyles();
+
+interface CollapsibleProps extends ComponentProps<typeof KCollapsible> {
+    title: JSX.Element;
+    children: JSX.Element;
+}
+
+export const Collapsible = (props: CollapsibleProps) => {
+    const [local, others] = splitProps(props, ["title", "children", "class"]);
+
+    return (
+        <KCollapsible class={root({ class: local.class })} {...others}>
+            <KCollapsible.Trigger class={trigger()}>
+                <span>{local.title}</span>
+                <ChevronDown class={icon()} />
+            </KCollapsible.Trigger>
+
+            <KCollapsible.Content class={content()}>
+                <div class={contentInner()}>{local.children}</div>
+            </KCollapsible.Content>
+        </KCollapsible>
+    );
+};

package/src/color-area/color-area.tsx

@@ -0,0 +1,46 @@
+import { ColorArea as KColorArea } from "@kobalte/core/color-area";
+import { splitProps, type ComponentProps } from "solid-js";
+import { tv } from "tailwind-variants";
+
+const colorAreaStyles = tv(
+    {
+        slots: {
+            root: "relative h-48 w-full shrink-0 rounded-lg border border-zinc-200 dark:border-zinc-800 touch-none",
+            background: "h-full w-full rounded-[inherit]",
+            thumb: [
+                "z-10 h-5 w-5 rounded-full border-2 border-white bg-transparent shadow-md transition-[transform]",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2",
+                "hover:scale-110 active:scale-90 cursor-grab active:cursor-grabbing",
+            ],
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const { root, background, thumb } = colorAreaStyles();
+
+export interface ColorAreaProps extends ComponentProps<typeof KColorArea> {}
+
+export const ColorArea = (props: ColorAreaProps) => {
+    const [local, others] = splitProps(props, ["class"]);
+
+    return (
+        <KColorArea class={root({ class: local.class })} {...others}>
+            <KColorArea.Background
+                class={background()}
+                // 默认背景，通常实际使用时会根据 Hue 滑块动态改变这里的红色部分
+                style={{
+                    background:
+                        "linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), red",
+                }}
+            />
+            <KColorArea.Thumb class={thumb()}>
+                {/* 修复点：ColorArea 需要分别定义 X 和 Y 的隐藏输入框 */}
+                <KColorArea.HiddenInputX />
+                <KColorArea.HiddenInputY />
+            </KColorArea.Thumb>
+        </KColorArea>
+    );
+};

package/src/color-channel-field/color-channel-field.tsx

@@ -0,0 +1,46 @@
+import { ColorChannelField as KColorChannelField } from "@kobalte/core/color-channel-field";
+import { splitProps, type ComponentProps } from "solid-js";
+import { tv } from "tailwind-variants";
+
+const fieldStyles = tv(
+    {
+        slots: {
+            root: "flex flex-col gap-1.5 w-full",
+            label: "text-sm font-medium text-zinc-900 dark:text-zinc-100 select-none",
+            input: [
+                "h-9 w-full rounded-md border border-zinc-200 bg-white px-3 py-1 text-sm shadow-sm transition-colors",
+                "placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+                "dark:border-zinc-800 dark:bg-zinc-950 dark:focus-visible:ring-zinc-300",
+            ],
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const { root, label, input } = fieldStyles();
+
+export interface ColorChannelFieldProps
+    extends ComponentProps<typeof KColorChannelField> {
+    label?: string;
+}
+
+
+// TODO channel 问题
+
+export const ColorChannelField = (props: ColorChannelFieldProps) => {
+    const [local, others] = splitProps(props, ["label", "class"]);
+
+    return (
+        <KColorChannelField class={root({ class: local.class })} {...others}>
+            {local.label && (
+                <KColorChannelField.Label class={label()}>
+                    {local.label}
+                </KColorChannelField.Label>
+            )}
+            <KColorChannelField.Input class={input()} />
+        </KColorChannelField>
+    );
+};

package/src/color-field/color-field.tsx

@@ -0,0 +1,64 @@
+import { ColorField as KColorField } from "@kobalte/core/color-field";
+import { splitProps, type ComponentProps } from "solid-js";
+import { tv } from "tailwind-variants";
+
+const colorFieldStyles = tv(
+    {
+        slots: {
+            root: "flex flex-col gap-1.5 w-full",
+            label: "text-sm font-medium text-zinc-900 dark:text-zinc-100 select-none disabled:opacity-50",
+            input: [
+                "h-9 w-full rounded-md border border-zinc-200 bg-white px-3 py-1 text-sm shadow-sm transition-all",
+                "placeholder:text-zinc-500 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-zinc-950",
+                "data-[invalid]:border-red-500 data-[invalid]:focus-visible:ring-red-500",
+                "disabled:cursor-not-allowed disabled:opacity-50",
+                "dark:border-zinc-800 dark:bg-zinc-950 dark:focus-visible:ring-zinc-300",
+            ],
+            description: "text-[0.8rem] text-zinc-500 dark:text-zinc-400",
+            errorMessage: "text-[0.8rem] font-medium text-red-500",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const { root, label, input, description, errorMessage } = colorFieldStyles();
+
+export interface ColorFieldProps extends ComponentProps<typeof KColorField> {
+    label?: string;
+    desc?: string;
+    error?: string;
+}
+
+export const ColorField = (props: ColorFieldProps) => {
+    const [local, others] = splitProps(props, [
+        "label",
+        "desc",
+        "error",
+        "class",
+    ]);
+
+    return (
+        <KColorField
+            class={root({ class: local.class })}
+            validationState={local.error ? "invalid" : "valid"}
+            {...others}
+        >
+            {local.label && (
+                <KColorField.Label class={label()}>
+                    {local.label}
+                </KColorField.Label>
+            )}
+            <KColorField.Input class={input()} placeholder="#FFFFFF" />
+            {local.desc && !local.error && (
+                <KColorField.Description class={description()}>
+                    {local.desc}
+                </KColorField.Description>
+            )}
+            <KColorField.ErrorMessage class={errorMessage()}>
+                {local.error}
+            </KColorField.ErrorMessage>
+        </KColorField>
+    );
+};

package/src/color-slider/color-slider.tsx

@@ -0,0 +1,60 @@
+import { ColorSlider as KColorSlider } from "@kobalte/core/color-slider";
+import { splitProps, type ComponentProps } from "solid-js";
+import { tv } from "tailwind-variants";
+
+// TODO defaultValue,还有channel 的问题
+
+const sliderStyles = tv(
+    {
+        slots: {
+            root: "relative flex flex-col items-center select-none touch-none w-full gap-2",
+            label: "text-sm font-medium text-zinc-900 dark:text-zinc-100 self-start",
+            track: "relative h-3 w-full rounded-full border border-black/5 dark:border-white/10",
+            thumb: [
+                "z-10 h-5 w-5 rounded-full border-2 border-white bg-transparent shadow-md transition-[transform]",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2",
+                "hover:scale-110 active:scale-90 cursor-grab active:cursor-grabbing",
+            ],
+            valueLabel: "text-xs text-zinc-500 dark:text-zinc-400 tabular-nums",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const { root, label, track, thumb, valueLabel } = sliderStyles();
+
+export interface ColorSliderProps extends ComponentProps<typeof KColorSlider> {
+    label?: string;
+    showValue?: boolean;
+}
+
+export const ColorSlider = (props: ColorSliderProps) => {
+    const [local, others] = splitProps(props, ["label", "showValue", "class"]);
+
+    return (
+        <KColorSlider class={root({ class: local.class })} {...others}>
+            <div class="flex w-full justify-between items-center">
+                {local.label && (
+                    <KColorSlider.Label class={label()}>
+                        {local.label}
+                    </KColorSlider.Label>
+                )}
+                {local.showValue && (
+                    <KColorSlider.ValueLabel class={valueLabel()} />
+                )}
+            </div>
+            <KColorSlider.Track
+                class={track()}
+                style={{
+                    background: "var(--kb-color-slider-track-background)",
+                }}
+            >
+                <KColorSlider.Thumb class={thumb()}>
+                    <KColorSlider.Input />
+                </KColorSlider.Thumb>
+            </KColorSlider.Track>
+        </KColorSlider>
+    );
+};

package/src/color-swatch/color-swatch.tsx

@@ -0,0 +1,33 @@
+import { ColorSwatch as KColorSwatch } from "@kobalte/core/color-swatch";
+import { splitProps, type ComponentProps } from "solid-js";
+import { tv } from "tailwind-variants";
+
+const colorSwatchStyles = tv(
+    {
+        base: [
+            "h-8 w-8 rounded-md border border-black/10 shadow-sm transition-transform",
+            "hover:scale-105 select-none dark:border-white/20",
+        ],
+    },
+    {
+        twMerge: true,
+    },
+);
+
+
+// TODO 源代码问题
+
+// FIXME 源代码问题
+
+export interface ColorSwatchProps extends ComponentProps<typeof KColorSwatch> {}
+
+export const ColorSwatch = (props: ColorSwatchProps) => {
+    const [local, others] = splitProps(props, ["class", "style"]);
+
+    return (
+        <KColorSwatch
+            class={colorSwatchStyles({ class: local.class })}
+            {...others}
+        />
+    );
+};

package/src/color-wheel/color-wheel.tsx

@@ -0,0 +1,50 @@
+import { ColorWheel as KColorWheel } from "@kobalte/core/color-wheel";
+import { splitProps, type ComponentProps } from "solid-js";
+import { tv } from "tailwind-variants";
+
+// FIXME 颜色选项都有源代码问题，注意查看原始kobalte的问题。
+
+const colorWheelStyles = tv(
+    {
+        slots: {
+            root: "relative flex flex-col items-center justify-center select-none touch-none",
+            track: "relative rounded-full border border-black/5 dark:border-white/10",
+            thumb: [
+                "z-10 h-5 w-5 rounded-full border-2 border-white bg-transparent shadow-md transition-[transform]",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-zinc-950 focus-visible:ring-offset-2",
+                "hover:scale-110 active:scale-90 cursor-grab active:cursor-grabbing",
+            ],
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const { root, track, thumb } = colorWheelStyles();
+
+export interface ColorWheelProps extends ComponentProps<typeof KColorWheel> {
+    size?: number;
+}
+
+export const ColorWheel = (props: ColorWheelProps) => {
+    const [local, others] = splitProps(props, ["size", "class"]);
+
+    return (
+        <KColorWheel class={root({ class: local.class })} {...others}>
+         
+            <KColorWheel.Track
+                class={track()}
+                style={{
+                    width: `${local.size || 160}px`,
+                    height: `${local.size || 160}px`,
+                    background: "var(--kb-color-wheel-track-background)",
+                }}
+            >
+                <KColorWheel.Thumb class={thumb()}>
+                    <KColorWheel.Input />
+                </KColorWheel.Thumb>
+            </KColorWheel.Track>
+        </KColorWheel>
+    );
+};

package/src/combobox/combobox.tsx

@@ -0,0 +1,97 @@
+import { Combobox as KCombobox } from "@kobalte/core/combobox";
+import { splitProps, type ComponentProps } from "solid-js";
+import { tv } from "tailwind-variants";
+import { Check, ChevronDown } from "lucide-solid";
+
+// FIXME 缺少Description，ErrorMessage，验证
+
+const comboboxStyles = tv(
+    {
+        slots: {
+            root: "flex flex-col gap-1.5 w-full",
+            label: "text-sm font-medium text-zinc-900 dark:text-zinc-100 select-none",
+            control:
+                "relative flex items-center rounded-md border border-zinc-200 bg-white shadow-sm transition-colors focus-within:ring-1 focus-within:ring-zinc-950 dark:border-zinc-800 dark:bg-zinc-950 dark:focus-within:ring-zinc-300",
+            input: "h-9 w-full bg-transparent px-3 py-1 text-sm outline-none placeholder:text-zinc-500 disabled:cursor-not-allowed",
+            trigger: "flex h-9 w-9 items-center justify-center text-zinc-500",
+            content: [
+                "z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white text-zinc-950 shadow-md animate-in fade-in-0 zoom-in-95 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
+                "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 data-[highlighted]:bg-zinc-100 data-[highlighted]:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:data-[highlighted]:bg-zinc-800 dark:data-[highlighted]:text-zinc-50",
+            itemIndicator:
+                "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
+            icon: "h-4 w-4 transition-transform duration-200 origin-center data-[expanded]:rotate-180",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const {
+    root,
+    label,
+    control,
+    input,
+    trigger,
+    content,
+    listbox,
+    item,
+    itemIndicator,
+    icon,
+} = comboboxStyles();
+
+export type ComboboxProps<T> = ComponentProps<typeof KCombobox<T>> & {
+    label?: string;
+    placeholder?: string;
+    class?: string;
+};
+
+export const Combobox = <T extends string | object>(
+    props: ComboboxProps<T>,
+) => {
+    const [local, others] = splitProps(props as ComboboxProps<T>, [
+        "label",
+        "placeholder",
+        "class",
+    ]);
+
+    return (
+        <KCombobox<T> class={root({ class: local.class })} {...others}>
+            {local.label && (
+                <KCombobox.Label class={label()}>{local.label}</KCombobox.Label>
+            )}
+
+            <KCombobox.Control class={control()}>
+                <KCombobox.Input
+                    class={input()}
+                    placeholder={local.placeholder}
+                />
+                <KCombobox.Trigger class={trigger()}>
+                    <KCombobox.Icon class={icon()}>
+                        <ChevronDown class="h-4 w-4" />
+                    </KCombobox.Icon>
+                </KCombobox.Trigger>
+            </KCombobox.Control>
+
+            <KCombobox.Portal>
+                <KCombobox.Content class={content()}>
+                    <KCombobox.Listbox class={listbox()} />
+                </KCombobox.Content>
+            </KCombobox.Portal>
+        </KCombobox>
+    );
+};
+
+export const ComboboxItem = (props: { item: any }) => {
+    return (
+        <KCombobox.Item item={props.item} class={item()}>
+            <KCombobox.ItemIndicator class={itemIndicator()}>
+                <Check size={14} />
+            </KCombobox.ItemIndicator>
+            <KCombobox.ItemLabel>{props.item.rawValue}</KCombobox.ItemLabel>
+        </KCombobox.Item>
+    );
+};

package/src/context-menu/context-menu.tsx

@@ -0,0 +1,102 @@
+import { ContextMenu as KContextMenu } from "@kobalte/core/context-menu";
+import { splitProps, For, Show,type JSX } from "solid-js";
+import { tv } from "tailwind-variants";
+import { ChevronRight } from "lucide-solid";
+
+// TODO 样式修改
+
+const menuStyles = tv(
+    {
+        slots: {
+            content: [
+                "z-50 min-w-[10rem] overflow-hidden rounded-md border border-zinc-200 bg-white p-1 text-zinc-950 shadow-md dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
+                "data-[expanded]:animate-in data-[closed]:animate-out",
+            ],
+            item: "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-zinc-100 data-[highlighted]:text-zinc-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:data-[highlighted]:bg-zinc-800 dark:data-[highlighted]:text-zinc-50",
+            separator: "-mx-1 my-1 h-px bg-zinc-100 dark:bg-zinc-800",
+            subIcon: "ml-auto h-4 w-4",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const { content, item, separator, subIcon } = menuStyles();
+
+// 定义配置项类型
+export type ContextMenuItemConfig = {
+    label: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    separator?: boolean;
+    children?: ContextMenuItemConfig[]; // 支持嵌套子菜单
+};
+
+interface UnifiedContextMenuProps {
+    items: ContextMenuItemConfig[];
+    children: JSX.Element; // 触发区域
+    class?: string;
+}
+
+// 递归渲染函数
+const RenderMenuItems = (props: { items: ContextMenuItemConfig[] }) => {
+    return (
+        <For each={props.items}>
+            {(itemConfig) => (
+                <Show
+                    when={!itemConfig.separator}
+                    fallback={<KContextMenu.Separator class={separator()} />}
+                >
+                    <Show
+                        when={
+                            itemConfig.children &&
+                            itemConfig.children.length > 0
+                        }
+                        fallback={
+                            <KContextMenu.Item
+                                class={item()}
+                                disabled={itemConfig.disabled}
+                                onSelect={() => itemConfig.onClick?.()}
+                            >
+                                {itemConfig.label}
+                            </KContextMenu.Item>
+                        }
+                    >
+                        {/* 渲染子菜单 */}
+                        <KContextMenu.Sub>
+                            <KContextMenu.SubTrigger class={item()}>
+                                {itemConfig.label}
+                                <ChevronRight class={subIcon()} />
+                            </KContextMenu.SubTrigger>
+                            <KContextMenu.Portal>
+                                <KContextMenu.SubContent class={content()}>
+                                    <RenderMenuItems
+                                        items={itemConfig.children!}
+                                    />
+                                </KContextMenu.SubContent>
+                            </KContextMenu.Portal>
+                        </KContextMenu.Sub>
+                    </Show>
+                </Show>
+            )}
+        </For>
+    );
+};
+
+export const ContextMenu = (props: UnifiedContextMenuProps) => {
+    const [local] = splitProps(props, ["items", "children", "class"]);
+
+    return (
+        <KContextMenu>
+            <KContextMenu.Trigger class={local.class}>
+                {local.children}
+            </KContextMenu.Trigger>
+            <KContextMenu.Portal>
+                <KContextMenu.Content class={content()}>
+                    <RenderMenuItems items={local.items} />
+                </KContextMenu.Content>
+            </KContextMenu.Portal>
+        </KContextMenu>
+    );
+};