solid-element-ui 0.2.4 → 0.2.5

package/src/dialog/dialog.tsx

@@ -0,0 +1,102 @@
+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 bg-black/50 backdrop-blur-sm animate-in fade-in-0 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-zinc-200 bg-white p-4 shadow-lg rounded-xl",
+                    "animate-in fade-in-0 zoom-in-95 duration-200 dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-50",
+                    "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  样式
+
+const menuStyles = tv(
+    {
+        slots: {
+            trigger: "inline-block cursor-pointer",
+            content: [
+                "z-50 min-w-[8rem] overflow-hidden rounded-md border border-zinc-200 bg-white p-1 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",
+            ],
+            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 bg-zinc-100 dark:bg-zinc-800",
+            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,62 @@
+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 bg-white p-4 shadow-lg outline-none",
+                "dark:bg-slate-900 dark:border-slate-800 antialiased",
+                "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>
+    );
+};

package/src/index.tsx

@@ -0,0 +1,91 @@
+import "./style/index.css";
+
+export { Accordion } from "./accordion/accordion";
+
+export { Alert } from "./alert/alert";
+
+export { AlertDialog } from "./alert-dialog/alert-dialog";
+
+export { Badge } from "./badge/badge";
+
+export { Breadcrumbs } from "./breadcrumbs/breadcrumbs";
+
+export { Button } from "./button/button";
+
+export { Checkbox } from "./checkbox/checkbox";
+
+export { Collapsible } from "./collapsible/collapsible";
+
+export { ColorArea } from "./color-area/color-area";
+
+export { ColorChannelField } from "./color-channel-field/color-channel-field";
+
+export { ColorField } from "./color-field/color-field";
+
+export { ColorSlider } from "./color-slider/color-slider";
+
+export { ColorSwatch } from "./color-swatch/color-swatch";
+
+export { ColorWheel } from "./color-wheel/color-wheel";
+
+export { Combobox, ComboboxItem } from "./combobox/combobox";
+
+export { ContextMenu } from "./context-menu/context-menu";
+
+export { Dialog } from "./dialog/dialog";
+
+export { DropdownMenu } from "./dropdown-menu/dropdown-menu";
+
+export { FileField } from "./file-field/file-field";
+
+export { HoverCard } from "./hover-card/hover-card";
+
+export { Image } from "./image/image";
+
+export { Link } from "./link/link";
+
+export { Menubar } from "./menubar/menubar";
+
+export { Meter } from "./meter/meter";
+
+export { NavigationMenu } from "./navigation-menu/navigation-menu";
+
+export { NumberField } from "./number-field/number-field";
+
+export { Pagination } from "./pagination/pagination";
+
+export { Popover } from "./popover/popover";
+
+export { Progress } from "./progress/progress";
+
+export { RadioGroup } from "./radio-group/radio-group";
+
+// rating-group 组件
+
+export { Search } from "./search/search";
+
+export { SegmentedControl } from "./segmented-control/segmented-control";
+
+export { Select } from "./select/select";
+
+export { Separator } from "./separator/separator";
+
+export { Skeleton } from "./skeleton/skeleton";
+
+export { Slider } from "./slider/slider";
+
+export { Switch } from "./switch/switch";
+
+export { Tabs } from "./tabs/tabs";
+
+export { TextField } from "./text-field/text-field";
+
+//  time-field
+
+export { ToastProvider, showToast } from "./toast/toast";
+
+export { ToggleButton } from "./toggle-button/toggle-button";
+
+export { ToggleGroup } from "./toggle-group/toggle-group";
+
+export { Tooltip } from "./tooltip/tooltip";

package/src/link/link.tsx

@@ -0,0 +1,64 @@
+import { Link as KLink } from "@kobalte/core/link";
+import { splitProps, type ComponentProps } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+
+const linkStyles = tv(
+    {
+        base: "inline-flex items-center justify-center transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 rounded-sm disabled:pointer-events-none disabled:opacity-50",
+        variants: {
+            variant: {
+                default:
+                    "text-slate-900 underline underline-offset-4 hover:text-slate-700 dark:text-slate-100",
+                primary:
+                    "text-blue-600 hover:text-blue-500 dark:text-blue-400 font-medium",
+                muted: "text-slate-500 hover:text-slate-600 dark:text-slate-400",
+                button: "bg-slate-900 text-slate-50 hover:bg-slate-900/90 px-4 py-2 text-sm dark:bg-slate-50 dark:text-slate-900",
+            },
+            underline: {
+                always: "underline",
+                hover: "no-underline hover:underline",
+                none: "no-underline",
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            underline: "hover",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type LinkVariants = VariantProps<typeof linkStyles>;
+
+export interface LinkProps extends ComponentProps<typeof KLink>, LinkVariants {
+    external?: boolean;
+}
+
+export const Link = (props: LinkProps) => {
+    const [local, variantProps, others] = splitProps(
+        props,
+        ["class", "external", "children", "href"],
+        ["variant", "underline"]
+    );
+
+    const styles = () =>
+        linkStyles({
+            variant: variantProps.variant,
+            underline: variantProps.underline,
+            class: local.class,
+        });
+
+    return (
+        <KLink
+            href={local.href}
+            target={local.external ? "_blank" : undefined}
+            rel={local.external ? "noopener noreferrer" : undefined}
+            class={styles()}
+            {...others}
+        >
+            {local.children}
+        </KLink>
+    );
+};

package/src/menubar/menubar.tsx

@@ -0,0 +1,81 @@
+import { Menubar as KMenubar } from "@kobalte/core/menubar";
+import { splitProps, type ComponentProps } from "solid-js";
+import { tv } from "tailwind-variants";
+
+// TODO 1. 格式
+
+const menubarStyles = tv(
+    {
+        slots: {
+            root: "flex h-10 items-center space-x-1 rounded-md border bg-white p-1 shadow-sm dark:bg-slate-950 dark:border-slate-800",
+            trigger:
+                "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:bg-slate-100 data-[state=open]:bg-slate-100 dark:focus:bg-slate-800 dark:data-[state=open]:bg-slate-800",
+            content: [
+                "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-white p-1 shadow-md dark:bg-slate-950 dark:border-slate-800 animate-in fade-in zoom-in-95",
+                "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 focus:bg-slate-100 data-[disabled]:opacity-50 dark:focus:bg-slate-800",
+            separator: "-mx-1 my-1 h-px bg-slate-100 dark:bg-slate-800",
+            shortcut: "ml-auto text-xs tracking-widest text-slate-500",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const s = menubarStyles();
+
+export const Menubar = Object.assign(
+    (props: ComponentProps<typeof KMenubar>) => {
+        const [local, others] = splitProps(props, ["class"]);
+        return <KMenubar class={s.root({ class: local.class })} {...others} />;
+    },
+    {
+        Menu: KMenubar.Menu,
+        Trigger: (props: ComponentProps<typeof KMenubar.Trigger>) => {
+            const [local, others] = splitProps(props, ["class"]);
+            return (
+                <KMenubar.Trigger
+                    class={s.trigger({ class: local.class })}
+                    {...others}
+                />
+            );
+        },
+        Content: (props: ComponentProps<typeof KMenubar.Content>) => {
+            const [local, others] = splitProps(props, ["class"]);
+            return (
+                <KMenubar.Portal>
+                    <KMenubar.Content
+                        class={s.content({ class: local.class })}
+                        {...others}
+                    />
+                </KMenubar.Portal>
+            );
+        },
+        Item: (props: ComponentProps<typeof KMenubar.Item>) => {
+            const [local, others] = splitProps(props, ["class"]);
+            return (
+                <KMenubar.Item
+                    class={s.item({ class: local.class })}
+                    {...others}
+                />
+            );
+        },
+        Separator: (props: ComponentProps<typeof KMenubar.Separator>) => {
+            const [local, others] = splitProps(props, ["class"]);
+            return (
+                <KMenubar.Separator
+                    class={s.separator({ class: local.class })}
+                    {...others}
+                />
+            );
+        },
+        Shortcut: (props: ComponentProps<"span">) => {
+            const [local, others] = splitProps(props, ["class"]);
+            return (
+                <span class={s.shortcut({ class: local.class })} {...others} />
+            );
+        },
+    },
+);