solid-element-ui 0.2.4 → 0.2.6

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-base bg-app shadow-sm transition-colors focus-within:ring-1 focus-within:ring-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-base bg-app text-zinc-950 shadow-md animate-in zoom-in-95   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-light bg-app p-1 text-main shadow-md 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-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 ",
+            separator: "-mx-1 my-1 h-px border-light",
+            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>
+    );
+};

package/src/dialog/dialog.tsx

@@ -0,0 +1,101 @@
+import { Dialog as KDialog } from "@kobalte/core/dialog";
+import { splitProps, type JSX, Show } from "solid-js";
+import { tv } from "tailwind-variants";
+import { X } from "lucide-solid";
+
+//TODO 修改footer，可自定义或是自带，方法传入等等
+// FIXME title 和close icon 平行。
+
+const dialogStyles = tv(
+    {
+        slots: {
+            overlay: [
+                "fixed inset-0 z-50 backdrop-blur-sm animate-in duration-200",
+                "data-[expanded]:animate-in data-[closed]:animate-out",
+            ],
+            content: [
+                [
+                    "fixed left-[50%] top-[50%] z-50 w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-base bg-app text-main p-4 shadow-lg rounded-xl",
+                    "data-[expanded]:animate-in data-[closed]:animate-out",
+                ],
+            ],
+            title: "text-lg font-semibold leading-none text-zinc-950 dark:text-zinc-50",
+            description: "text-sm text-zinc-500 dark:text-zinc-400 mt-2",
+            closeButton:
+                "rounded-sm opacity-70 transition-opacity hover:opacity-100 dark:text-zinc-400"
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const { overlay, content, title, description, closeButton } =
+    dialogStyles();
+
+interface DialogProps {
+    // 状态控制
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+
+    // 触发器
+    trigger?: JSX.Element;
+
+    // 内容配置
+    title: string;
+    description?: string;
+    children: JSX.Element; // 弹窗主体
+
+    // 底部按钮配置
+    footer?: JSX.Element;
+
+    // 样式
+    class?: string;
+}
+
+export const Dialog = (props: DialogProps) => {
+    const [local] = splitProps(props, [
+        "trigger",
+        "title",
+        "description",
+        "footer",
+        "children",
+        "class",
+    ]);
+
+    return (
+        <KDialog open={props.open} onOpenChange={props.onOpenChange}>
+            <Show when={local.trigger}>
+                <KDialog.Trigger class="inline-block">
+                    {local.trigger}
+                </KDialog.Trigger>
+            </Show>
+
+            <KDialog.Portal>
+                <KDialog.Overlay class={overlay()} />
+                <KDialog.Content
+                    class={content({ class: local.class })}
+                    style={{ "pointer-events": "auto" }}
+                >
+                    <div class="flex justify-between items-center">
+                        <KDialog.Title class={title()}>
+                            {local.title}
+                        </KDialog.Title>
+                        <KDialog.CloseButton class={closeButton()}>
+                            <X size={18} />
+                            <span class="sr-only">关闭</span>
+                        </KDialog.CloseButton>
+                    </div>
+                    <Show when={local.description}>
+                        <KDialog.Description class={description()}>
+                            {local.description}
+                        </KDialog.Description>
+                    </Show>
+
+                    <div class="mt-6">{local.children}</div>
+                   
+                </KDialog.Content>
+            </KDialog.Portal>
+        </KDialog>
+    );
+};

package/src/dropdown-menu/dropdown-menu.tsx

@@ -0,0 +1,111 @@
+import { DropdownMenu as KDropdownMenu } from "@kobalte/core/dropdown-menu";
+import { splitProps, type JSX, For, Show } from "solid-js";
+import { tv } from "tailwind-variants";
+import { ChevronRight } from "lucide-solid";
+
+// TODO  Dropdown Menu 样式
+
+const menuStyles = tv(
+    {
+        slots: {
+            trigger: "inline-block cursor-pointer",
+            content: [
+                "z-50 min-w-[8rem] overflow-hidden rounded-md border border-light bg-white p-1 text-zinc-950 shadow-md animate-in zoom-in-95 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 transition-colors 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 border-light",
+            subIcon: "ml-auto h-4 w-4",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const { content, item, separator, subIcon, trigger } = menuStyles();
+
+// 定义菜单项配置类型
+export type DropdownItemConfig = {
+    label: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    separator?: boolean; // 是否作为分隔线
+    children?: DropdownItemConfig[]; // 子菜单
+};
+
+interface DropdownMenuProps {
+    trigger: JSX.Element;
+    items: DropdownItemConfig[];
+    placement?:
+        | "bottom"
+        | "bottom-start"
+        | "bottom-end"
+        | "top"
+        | "left"
+        | "right";
+    class?: string;
+}
+
+// 递归渲染函数：处理无限级嵌套
+const RenderMenuItems = (props: { items: DropdownItemConfig[] }) => {
+    return (
+        <For each={props.items}>
+            {(config) => (
+                <Show
+                    when={!config.separator}
+                    fallback={<KDropdownMenu.Separator class={separator()} />}
+                >
+                    <Show
+                        when={config.children && config.children.length > 0}
+                        fallback={
+                            <KDropdownMenu.Item
+                                class={item()}
+                                disabled={config.disabled}
+                                onSelect={() => config.onClick?.()}
+                            >
+                                {config.label}
+                            </KDropdownMenu.Item>
+                        }
+                    >
+                        {/* 子菜单渲染逻辑 */}
+                        <KDropdownMenu.Sub>
+                            <KDropdownMenu.SubTrigger class={item()}>
+                                {config.label}
+                                <ChevronRight class={subIcon()} />
+                            </KDropdownMenu.SubTrigger>
+                            <KDropdownMenu.Portal>
+                                <KDropdownMenu.SubContent class={content()}>
+                                    <RenderMenuItems items={config.children!} />
+                                </KDropdownMenu.SubContent>
+                            </KDropdownMenu.Portal>
+                        </KDropdownMenu.Sub>
+                    </Show>
+                </Show>
+            )}
+        </For>
+    );
+};
+
+export const DropdownMenu = (props: DropdownMenuProps) => {
+    const [local] = splitProps(props, [
+        "trigger",
+        "items",
+        "placement",
+        "class",
+    ]);
+
+    return (
+        <KDropdownMenu placement={local.placement ?? "bottom-start"}>
+            <KDropdownMenu.Trigger as="div" class={trigger()}>
+                {local.trigger}
+            </KDropdownMenu.Trigger>
+
+            <KDropdownMenu.Portal>
+                <KDropdownMenu.Content class={content({ class: local.class })}>
+                    <RenderMenuItems items={local.items} />
+                </KDropdownMenu.Content>
+            </KDropdownMenu.Portal>
+        </KDropdownMenu>
+    );
+};

package/src/file-field/file-field.tsx

@@ -0,0 +1,114 @@
+import { TextField as KTextField } from "@kobalte/core/text-field";
+import { splitProps, type ComponentProps, Show, createSignal } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+import { CloudUpload } from "lucide-solid";
+
+//TODO 样式修改，移除 UploadCloud这种已废弃的icon
+
+const fileFieldStyles = tv(
+    {
+        slots: {
+            root: "flex flex-col gap-1.5 w-full antialiased",
+            label: "text-sm font-medium text-slate-700 dark:text-slate-300 ml-1",
+            dropzone: [
+                "relative flex flex-col items-center justify-center w-full min-h-[140px]",
+                "border-2 border-dashed rounded-xl transition-all cursor-pointer",
+                "bg-slate-50/50 hover:bg-slate-100 dark:bg-slate-900/10 dark:hover:bg-slate-900/20",
+                "focus-within:ring-2 focus-within:ring-blue-500/20 focus-within:border-blue-500",
+            ],
+            icon: "w-10 h-10 mb-3 text-slate-400",
+            description: "text-xs text-slate-500 dark:text-slate-400 mt-1",
+            errorMessage: "text-xs text-red-500 font-medium ml-1 mt-1",
+        },
+        variants: {
+            validationState: {
+                valid: {},
+                invalid: {
+                    dropzone:
+                        "border-red-400 bg-red-50/30 dark:border-red-900/20",
+                },
+            },
+            isDisabled: {
+                true: {
+                    dropzone: "opacity-50 cursor-not-allowed grayscale",
+                },
+            },
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type FileFieldVariants = VariantProps<typeof fileFieldStyles>;
+
+export interface FileFieldProps
+    extends
+        Omit<ComponentProps<typeof KTextField>, "value" | "onChange">,
+        FileFieldVariants {
+    label?: string;
+    description?: string;
+    accept?: string;
+    multiple?: boolean;
+    onChange?: (files: File[]) => void;
+}
+
+export const FileField = (props: FileFieldProps) => {
+    const [local, variantProps, others] = splitProps(
+        props,
+        ["label", "description", "class", "accept", "multiple", "onChange"],
+        ["validationState", "isDisabled"],
+    );
+
+    const [files, setFiles] = createSignal<File[]>([]);
+    const styles = () =>
+        fileFieldStyles({
+            validationState: variantProps.validationState,
+            isDisabled: variantProps.isDisabled,
+        });
+
+    const onFileChange = (e: Event) => {
+        const target = e.target as HTMLInputElement;
+        if (target.files) {
+            const fileList = Array.from(target.files);
+            setFiles(fileList);
+            local.onChange?.(fileList);
+        }
+    };
+
+    return (
+        <KTextField
+            class={styles().root({ class: local.class })}
+            validationState={variantProps.validationState}
+            disabled={variantProps.isDisabled}
+            {...others}
+        >
+            <Show when={local.label}>
+                <KTextField.Label class={styles().label()}>
+                    {local.label}
+                </KTextField.Label>
+            </Show>
+
+            <label class={styles().dropzone()}>
+                <KTextField.Input
+                    type="file"
+                    class="sr-only"
+                    accept={local.accept}
+                    multiple={local.multiple}
+                    onChange={onFileChange}
+                />
+                <CloudUpload class={styles().icon()} />
+                <div class="text-sm font-medium text-slate-600 dark:text-slate-400">
+                    {files().length > 0
+                        ? `已选择 ${files().length} 个文件`
+                        : "点击或拖拽上传文件"}
+                </div>
+                <Show when={local.description}>
+                    <p class={styles().description()}>{local.description}</p>
+                </Show>
+            </label>
+
+            <KTextField.ErrorMessage class={styles().errorMessage()} />
+        </KTextField>
+    );
+};

package/src/hover-card/hover-card.tsx

@@ -0,0 +1,61 @@
+import { HoverCard as KHoverCard } from "@kobalte/core/hover-card";
+import { splitProps, type ComponentProps, type JSX } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+
+const hoverCardStyles = tv(
+    {
+        slots: {
+            content: [
+                "z-50 w-64 rounded-xl border border-light bg-app p-4 shadow-lg outline-none",
+                "data-[expanded]:animate-in data-[closed]:animate-out",
+            ],
+            arrow: "fill-white stroke-slate-200 dark:fill-slate-900 dark:stroke-slate-800",
+        },
+        variants: {
+            size: {
+                sm: { content: "w-48 p-3" },
+                md: { content: "w-64 p-4" },
+                lg: { content: "w-80 p-6" },
+            },
+        },
+        defaultVariants: {
+            size: "md",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type HoverCardVariants = VariantProps<typeof hoverCardStyles>;
+
+export interface HoverCardProps
+    extends ComponentProps<typeof KHoverCard>, HoverCardVariants {
+    trigger: JSX.Element;
+    showArrow?: boolean;
+}
+
+export const HoverCard = (props: HoverCardProps) => {
+    const [local, variantProps, others] = splitProps(
+        props,
+        ["trigger", "children", "showArrow"],
+        ["size"],
+    );
+
+    const styles = hoverCardStyles({ size: variantProps.size });
+
+    return (
+        <KHoverCard openDelay={200} closeDelay={300} {...others}>
+            <KHoverCard.Trigger>{local.trigger}</KHoverCard.Trigger>
+
+            <KHoverCard.Portal>
+                <KHoverCard.Content class={styles.content()}>
+                    {local.showArrow && (
+                        <KHoverCard.Arrow class={styles.arrow()} />
+                    )}
+                    {local.children}
+                </KHoverCard.Content>
+            </KHoverCard.Portal>
+        </KHoverCard>
+    );
+};

package/src/image/image.tsx

@@ -0,0 +1,59 @@
+import { Image as KImage } from "@kobalte/core/image";
+import { splitProps, type ComponentProps } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+
+const imageStyles = tv(
+    {
+        slots: {
+            root: "relative flex items-center h-full w-full shrink-0 overflow-hidden",
+            img: "h-full w-full aspect-square object-cover",
+            fallback:
+                "flex h-full w-full items-center justify-center bg-slate-100 dark:bg-slate-800 text-slate-400",
+        },
+        variants: {
+            radius: {
+                none: { root: "rounded-none" },
+                sm: { root: "rounded-sm" },
+                md: { root: "rounded-md" },
+                lg: { root: "rounded-lg" },
+                full: { root: "rounded-full" },
+            },
+        },
+        defaultVariants: {
+            radius: "none",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type ImageVariants = VariantProps<typeof imageStyles>;
+
+export interface ImageProps
+    extends ComponentProps<typeof KImage>,
+        ImageVariants {
+    src?: string;
+    alt?: string;
+    fallback?: string | Array<any> | any; // 支持自定义 fallback 内容
+}
+
+export const Image = (props: ImageProps) => {
+    const [local, variantProps, others] = splitProps(
+        props,
+        ["src", "alt", "fallback", "class"],
+        ["radius"]
+    );
+
+    const styles = imageStyles({ radius: variantProps.radius });
+
+    return (
+        <KImage class={styles.root({ class: local.class })} {...others}>
+            <KImage.Img src={local.src} alt={local.alt} class={styles.img()} />
+            <KImage.Fallback class={styles.fallback()}>
+                {local.fallback ||
+                    (local.alt ? local.alt.slice(0, 2).toUpperCase() : "IMG")}
+            </KImage.Fallback>
+        </KImage>
+    );
+};