@ldkj/web-ui 0.21.0 → 0.22.0

package/README.md

@@ -1,6 +1,6 @@
 # @ldkj/web-ui
 
-由 shadcn-ui, Tailwind CSS 和 VitePress 构建的 React 组件库.
+由 shadcn-ui, Tailwind CSS 和 VitePress 构建的企业级 React 组件库.
 
 ## 立即开始
 

package/components/data-display/collapse/Collapse.d.ts

@@ -0,0 +1,145 @@
+import * as React from "react";
+import { type SxProps } from "@/styling";
+export type CollapseKey = string | number;
+export type CollapseActiveKey = CollapseKey | CollapseKey[] | null;
+export type CollapseSize = "sm" | "md" | "lg";
+export type CollapseVariant = "outlined" | "filled" | "plain" | "ghost";
+export type CollapseExpandIconPosition = "start" | "end";
+type StyledDivProps = Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
+    className?: string;
+    class?: string;
+    sx?: SxProps;
+};
+export type CollapseExpandIconRenderProps = {
+    active: boolean;
+    disabled: boolean;
+    value: CollapseKey;
+};
+export type CollapseItemConfig = {
+    key: CollapseKey;
+    label: React.ReactNode;
+    children?: React.ReactNode;
+    disabled?: boolean;
+    collapsible?: boolean;
+    extra?: React.ReactNode;
+    forceRender?: boolean;
+    lazyMount?: boolean;
+    destroyOnHidden?: boolean;
+    showArrow?: boolean;
+    itemProps?: Omit<CollapseItemProps, "children" | "value" | "disabled">;
+    headerProps?: Omit<CollapseHeaderProps, "children">;
+    triggerProps?: Omit<CollapseTriggerProps, "children" | "disabled" | "showArrow">;
+    contentProps?: Omit<CollapseContentProps, "children" | "forceRender">;
+    bodyProps?: StyledDivProps;
+};
+export type CollapseProps = Omit<StyledDivProps, "onChange"> & {
+    /**
+     * 数据式面板配置。传入后组件会自动渲染 Item / Header / Trigger / Content。
+     */
+    items?: CollapseItemConfig[];
+    /**
+     * 当前展开项。`accordion` 模式下通常传单个 key，多开模式可传 key 数组。
+     */
+    activeKey?: CollapseActiveKey;
+    /**
+     * 非受控默认展开项。
+     */
+    defaultActiveKey?: CollapseActiveKey;
+    /**
+     * 展开项变化回调。`accordion` 模式返回单个 key 或 null，多开模式返回 key 数组。
+     */
+    onChange?: (activeKey: CollapseActiveKey) => void;
+    /**
+     * 手风琴模式，同一时间只允许展开一个面板。
+     */
+    accordion?: boolean;
+    /**
+     * 是否允许多个面板同时展开。`accordion` 为 true 时该配置会被忽略。
+     */
+    multiple?: boolean;
+    /**
+     * 单开模式下，已展开面板是否允许再次点击关闭。
+     */
+    collapsible?: boolean;
+    disabled?: boolean;
+    bordered?: boolean;
+    size?: CollapseSize;
+    variant?: CollapseVariant;
+    expandIconPosition?: CollapseExpandIconPosition;
+    expandIcon?: (props: CollapseExpandIconRenderProps) => React.ReactNode;
+    lazyMount?: boolean;
+    destroyOnHidden?: boolean;
+    forceRender?: boolean;
+    itemProps?: Omit<CollapseItemProps, "children" | "value" | "disabled">;
+    headerProps?: Omit<CollapseHeaderProps, "children">;
+    triggerProps?: Omit<CollapseTriggerProps, "children" | "disabled" | "showArrow">;
+    contentProps?: Omit<CollapseContentProps, "children" | "forceRender">;
+    bodyProps?: StyledDivProps;
+};
+export type CollapseItemProps = StyledDivProps & {
+    value: CollapseKey;
+    disabled?: boolean;
+    collapsible?: boolean;
+    forceRender?: boolean;
+    lazyMount?: boolean;
+    destroyOnHidden?: boolean;
+};
+export type CollapseHeaderProps = StyledDivProps & {
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+};
+export type CollapseTriggerProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className"> & {
+    className?: string;
+    class?: string;
+    sx?: SxProps;
+    showArrow?: boolean;
+};
+export type CollapseContentProps = StyledDivProps & {
+    forceRender?: boolean;
+};
+export type CollapseActionsProps = StyledDivProps;
+type CollapseComponent = React.ForwardRefExoticComponent<CollapseProps & React.RefAttributes<HTMLDivElement>> & {
+    Item: typeof CollapseItem;
+    Header: typeof CollapseHeader;
+    Trigger: typeof CollapseTrigger;
+    Content: typeof CollapseContent;
+    Actions: typeof CollapseActions;
+};
+declare const CollapseItem: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
+    className?: string;
+    class?: string;
+    sx?: SxProps;
+} & {
+    value: CollapseKey;
+    disabled?: boolean;
+    collapsible?: boolean;
+    forceRender?: boolean;
+    lazyMount?: boolean;
+    destroyOnHidden?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const CollapseHeader: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
+    className?: string;
+    class?: string;
+    sx?: SxProps;
+} & {
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const CollapseTrigger: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "className"> & {
+    className?: string;
+    class?: string;
+    sx?: SxProps;
+    showArrow?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+declare const CollapseContent: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
+    className?: string;
+    class?: string;
+    sx?: SxProps;
+} & {
+    forceRender?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const CollapseActions: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "className"> & {
+    className?: string;
+    class?: string;
+    sx?: SxProps;
+} & React.RefAttributes<HTMLDivElement>>;
+export declare const Collapse: CollapseComponent;
+export {};

package/components/data-display/collapse/index.d.ts

@@ -0,0 +1 @@
+export * from "./Collapse";