solid-element-ui 0.2.4 → 0.2.6

package/src/index.tsx

@@ -0,0 +1,94 @@
+import "./style/global.css";
+
+// TODO 组件 form , data等
+// TODO background-color 等颜色相关的属性,添加 dark 模式的支持
+
+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-main hover:text-main/80 underline-offset-4",
+                primary:
+                    "text-primary hover:text-primary/80 font-medium",
+                muted: "text-muted hover:text-muted/80",
+                button: "bg-reversal-bg text-reversal hover:reversal-bg/90 px-4 py-2 text-sm ",
+            },
+            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,85 @@
+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-app p-1 shadow-sm ",
+            trigger:
+                "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none focus:foreground data-[state=open]:foreground",
+            content: [
+                "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-app p-1 shadow-md border-light 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-foreground data-[disabled]:opacity-50",
+            ],
+            separator: "-mx-1 my-1 h-px border-light",
+            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} />
+            );
+        },
+    },
+);

package/src/meter/meter.tsx

@@ -0,0 +1,89 @@
+import { Meter as KMeter } from "@kobalte/core/meter";
+import { splitProps, type ComponentProps } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+
+// TODO 1. 格式
+
+const meterStyles = tv(
+    {
+        slots: {
+            root: "flex flex-col gap-2 w-full antialiased",
+            labelContainer:
+                "flex justify-between items-center text-sm font-medium text-main",
+            track: "h-2.5 w-full rounded-full bg-foreground overflow-hidden",
+            fill: "h-full transition-all duration-500 ease-out rounded-full",
+        },
+        variants: {
+            color: {
+                primary: { fill: "bg-primary" },
+                success: { fill: "bg-success" },
+                warning: { fill: "bg-warning" },
+                danger: { fill: "bg-danger" },
+            },
+        },
+        defaultVariants: {
+            color: "primary",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type MeterVariants = VariantProps<typeof meterStyles>;
+
+export const Meter = Object.assign(
+    (props: ComponentProps<typeof KMeter> & MeterVariants) => {
+        const [local, variantProps, others] = splitProps(
+            props,
+            ["class"],
+            ["color"]
+        );
+        const s = () => meterStyles({ color: variantProps.color });
+
+        return (
+            <KMeter class={s().root({ class: local.class })} {...others}>
+                {others.children}
+            </KMeter>
+        );
+    },
+    {
+        Label: (props: ComponentProps<typeof KMeter.Label>) => {
+            const [local, others] = splitProps(props, ["class"]);
+            return (
+                <KMeter.Label
+                    class={meterStyles().labelContainer({ class: local.class })}
+                    {...others}
+                />
+            );
+        },
+        ValueLabel: (props: ComponentProps<typeof KMeter.ValueLabel>) => {
+            const [local, others] = splitProps(props, ["class"]);
+            return (
+                <KMeter.ValueLabel
+                    class={`text-xs text-slate-500 ${local.class}`}
+                    {...others}
+                />
+            );
+        },
+        Track: (props: ComponentProps<typeof KMeter.Track>) => {
+            const [local, others] = splitProps(props, ["class"]);
+            return (
+                <KMeter.Track
+                    class={meterStyles().track({ class: local.class })}
+                    {...others}
+                />
+            );
+        },
+        Fill: (props: ComponentProps<typeof KMeter.Fill>) => {
+            const [local, others] = splitProps(props, ["class"]);
+            // 注意：Fill 不需要手动设置宽度，Kobalte 会通过 style 注入百分比
+            return (
+                <KMeter.Fill
+                    class={meterStyles().fill({ class: local.class })}
+                    {...others}
+                />
+            );
+        },
+    }
+);

package/src/navigation-menu/navigation-menu.tsx

@@ -0,0 +1,90 @@
+import { NavigationMenu as KNavigationMenu } from "@kobalte/core/navigation-menu";
+import { splitProps, type ComponentProps, type JSX, For, Show } from "solid-js";
+import { tv } from "tailwind-variants";
+
+// TODO 不显示问题
+
+const navStyles = tv(
+    {
+        slots: {
+            root: "relative z-10 flex w-full justify-center antialiased",
+            trigger: [
+                "group inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-all",
+                "hover:bg-slate-100 hover:text-slate-900 data-[state=open]:bg-slate-100/50",
+                "dark:hover:bg-slate-800 dark:hover:text-slate-50",
+            ],
+            content:
+                "absolute left-0 top-0 w-full p-2 animate-in fade-in zoom-in-95 duration-200",
+            viewport:
+                "relative mt-1.5 h-(--kb-navigation-menu-viewport-height) w-(--kb-navigation-menu-viewport-width) origin-[top_center] overflow-hidden rounded-md border bg-white shadow-xl dark:bg-slate-950 dark:border-slate-800 transition-[width,height] duration-300",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const { root, trigger, content, viewport } = navStyles();
+
+interface NavItem {
+    title: string;
+    href?: string;
+    content?: JSX.Element;
+}
+
+export interface NavigationMenuProps
+    extends ComponentProps<typeof KNavigationMenu> {
+    items: NavItem[];
+}
+
+export const NavigationMenu = (props: NavigationMenuProps) => {
+    const [local, others] = splitProps(props, ["items", "class"]);
+
+    return (
+        <KNavigationMenu class={root({ class: local.class })} {...others}>
+            <For each={local.items}>
+                {(item) => (
+                    <KNavigationMenu.Menu>
+                        <Show
+                            when={item.content}
+                            fallback={
+                                <KNavigationMenu.Trigger
+                                    as="a"
+                                    href={item.href}
+                                    class={trigger()}
+                                >
+                                    {item.title}
+                                </KNavigationMenu.Trigger>
+                            }
+                        >
+                            <KNavigationMenu.Trigger class={trigger()}>
+                                {item.title}
+                                <svg
+                                    class="ml-1 h-3 w-3 transition-transform duration-200 group-data-[state=open]:rotate-180"
+                                    fill="none"
+                                    viewBox="0 0 24 24"
+                                    stroke="currentColor"
+                                >
+                                    <path
+                                        stroke-linecap="round"
+                                        stroke-linejoin="round"
+                                        stroke-width="2"
+                                        d="M19 9l-7 7-7-7"
+                                    />
+                                </svg>
+                            </KNavigationMenu.Trigger>
+                            <KNavigationMenu.Portal>
+                                <KNavigationMenu.Content class={content()}>
+                                    {item.content}
+                                </KNavigationMenu.Content>
+                            </KNavigationMenu.Portal>
+                        </Show>
+                    </KNavigationMenu.Menu>
+                )}
+            </For>
+            <KNavigationMenu.Viewport class={viewport()}>
+                <KNavigationMenu.Arrow />
+            </KNavigationMenu.Viewport>
+        </KNavigationMenu>
+    );
+};

package/src/number-field/number-field.tsx

@@ -0,0 +1,79 @@
+import { NumberField as KNumberField } from "@kobalte/core/number-field";
+import { splitProps, type ComponentProps, Show } from "solid-js";
+import { tv, type VariantProps } from "tailwind-variants";
+import { ChevronUp, ChevronDown } from "lucide-solid";
+
+const numberFieldStyles = tv(
+    {
+        slots: {
+            root: "flex flex-col gap-1.5 w-full antialiased",
+            label: "text-sm font-medium text-main ml-1",
+            container: [
+                "relative flex items-center rounded-md border border-slate-200 bg-app transition-shadow shadow-sm",
+                "focus-within:ring-2 focus-within:ring-blue-500/20 focus-within:border-blue-500",
+            ],
+            input: "flex-1 bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted disabled:cursor-not-allowed",
+            controls:
+                "flex flex-col border-l border-slate-200 dark:border-slate-800",
+            stepper: [
+                "flex h-1/2 w-8 items-center justify-center transition-colors hover:bg-foreground active:bg-foreground",
+                "disabled:opacity-30 disabled:pointer-events-none",
+            ],
+            errorMessage: "text-xs text-danger font-medium ml-1 mt-1",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+type NumberFieldVariants = VariantProps<typeof numberFieldStyles>;
+
+export interface NumberFieldProps
+    extends Omit<ComponentProps<typeof KNumberField>, "class">,
+        NumberFieldVariants {
+    label?: string;
+    description?: string;
+    class?: string;
+}
+
+export const NumberField = (props: NumberFieldProps) => {
+    // 严格处理属性，防止 TS 报错“已声明但未使用”
+    const [local, others] = splitProps(props, [
+        "label",
+        "description",
+        "class",
+    ]);
+    const s = numberFieldStyles();
+
+    return (
+        <KNumberField class={s.root({ class: local.class })} {...others}>
+            <Show when={local.label}>
+                <KNumberField.Label class={s.label()}>
+                    {local.label}
+                </KNumberField.Label>
+            </Show>
+
+            <div class={s.container()}>
+                <KNumberField.Input class={s.input()} />
+                <div class={s.controls()}>
+                    <KNumberField.IncrementTrigger class={s.stepper()}>
+                        <ChevronUp size={14} />
+                    </KNumberField.IncrementTrigger>
+                    <KNumberField.DecrementTrigger
+                        class={s.stepper({
+                            class: "border-t border-slate-200 dark:border-slate-800",
+                        })}
+                    >
+                        <ChevronDown size={14} />
+                    </KNumberField.DecrementTrigger>
+                </div>
+            </div>
+
+            <Show when={local.description}>
+                <KNumberField.Description class="text-xs text-slate-500 ml-1 mt-1" />
+            </Show>
+            <KNumberField.ErrorMessage class={s.errorMessage()} />
+        </KNumberField>
+    );
+};

package/src/pagination/pagination.tsx

@@ -0,0 +1,67 @@
+import { Pagination as KPagination } from "@kobalte/core/pagination";
+import { splitProps, type ComponentProps } from "solid-js";
+import { tv } from "tailwind-variants";
+import { ChevronLeft, ChevronRight, Ellipsis } from "lucide-solid";
+
+
+// FIXME 样式修改，
+
+const paginationStyles = tv(
+    {
+        slots: {
+            root: "flex w-full justify-center antialiased",
+            itemsContainer: "flex items-center gap-1",
+            item: [
+                "inline-flex h-9 w-9 items-center justify-center rounded-md text-sm font-medium transition-colors text-main",
+                "hover:bg-foreground hover:text-muted",
+                "data-[current]:bg-foreground data-[current]:text-muted",
+                "disabled:pointer-events-none disabled:opacity-50",
+            ],
+            ellipsis: "flex h-9 w-9 items-center justify-center text-slate-400",
+            trigger:
+                "inline-flex h-9 w-9 items-center justify-center rounded-md border border-light bg-transparent hover:bg-foreground ",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const s = paginationStyles();
+
+export interface PaginationProps extends ComponentProps<typeof KPagination> {}
+
+export const Pagination = (props: PaginationProps) => {
+    // 显式提取 count 以满足类型约束，同时清理 others
+    const [local, others] = splitProps(props, ["class", "count"]);
+
+    return (
+        <KPagination
+            class={s.root({ class: local.class })}
+            count={local.count}
+            {...others}
+            itemComponent={(p) => (
+                <KPagination.Item page={p.page} class={s.item()}>
+                    {p.page}
+                </KPagination.Item>
+            )}
+            ellipsisComponent={() => (
+                <KPagination.Ellipsis class={s.ellipsis()}>
+                    <Ellipsis size={16} />
+                </KPagination.Ellipsis>
+            )}
+        >
+            <div class={s.itemsContainer()}>
+                <KPagination.Previous class={s.trigger()}>
+                    <ChevronLeft size={16} />
+                </KPagination.Previous>
+
+                <KPagination.Items />
+
+                <KPagination.Next class={s.trigger()}>
+                    <ChevronRight size={16} />
+                </KPagination.Next>
+            </div>
+        </KPagination>
+    );
+};

package/src/popover/popover.tsx

@@ -0,0 +1,58 @@
+import { Popover as KPopover } from "@kobalte/core/popover";
+import { CrossIcon } from "lucide-solid";
+import { splitProps, type ComponentProps, type JSX } from "solid-js";
+import { tv } from "tailwind-variants";
+
+// FIXME 与其他的气泡样式不统一的问题
+// Description，而不是内敛。
+// trigger用内部，而其他放在标签属性
+
+const popoverStyles = tv(
+    {
+        slots: {
+            content: [
+                "z-50 w-72 rounded-md border border-light bg-app p-4 shadow-md outline-none antialiased text-main",
+                "data-[expanded]:animate-in data-[closed]:animate-out",
+            ],
+            arrow: "fill-app stroke-slate-200 dark:stroke-slate-800",
+        },
+    },
+    {
+        twMerge: true,
+    },
+);
+
+const {content, arrow} = popoverStyles();
+
+export interface PopoverProps extends ComponentProps<typeof KPopover> {
+    trigger: JSX.Element;
+    title: string;
+}
+
+export const Popover = (props: PopoverProps) => {
+    const [local, others] = splitProps(props, ["trigger", "children", "title"]);
+
+    return (
+        <KPopover {...others}>
+            <KPopover.Trigger class="inline-flex">
+                {local.trigger}
+            </KPopover.Trigger>
+
+            <KPopover.Portal>
+                <KPopover.Content class={content()}>
+                    <KPopover.Arrow class={arrow()} />
+
+                    <div class="flex">
+                        <KPopover.Title>{local.title}</KPopover.Title>
+                        <KPopover.CloseButton>
+                            <CrossIcon />
+                        </KPopover.CloseButton>
+                    </div>
+                    <KPopover.Description>
+                        {local.children}
+                    </KPopover.Description>
+                </KPopover.Content>
+            </KPopover.Portal>
+        </KPopover>
+    );
+};