@ant-design/pro-components 2.8.10 → 3.0.0-beta.1

package/es/card/components/Card/style.js

@@ -0,0 +1,283 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/card/components/Card/style.ts
+import { resetComponent, useStyle as useAntdStyle } from "../../../utils";
+var genActiveStyle = (token) => ({
+  backgroundColor: token.controlItemBgActive,
+  borderColor: token.controlOutline
+});
+var genProCardStyle = (token) => {
+  var _a;
+  const { componentCls } = token;
+  return {
+    [componentCls]: __spreadProps(__spreadValues({
+      position: "relative",
+      display: "flex",
+      flexDirection: "column",
+      boxSizing: "border-box",
+      width: "100%",
+      marginBlock: 0,
+      marginInline: 0,
+      paddingBlock: 0,
+      paddingInline: 0,
+      backgroundColor: token.colorBgContainer,
+      borderRadius: token.borderRadius,
+      transition: "all 0.3s"
+    }, (_a = resetComponent) == null ? void 0 : _a(token)), {
+      "&-box-shadow": {
+        boxShadow: "0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017",
+        borderColor: "transparent"
+      },
+      "&-col": {
+        width: "100%"
+      },
+      "&-border": {
+        border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`
+      },
+      "&-hoverable": {
+        cursor: "pointer",
+        transition: "box-shadow 0.3s, border-color 0.3s",
+        "&:hover": {
+          borderColor: "transparent",
+          boxShadow: "0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017"
+        },
+        [`&${componentCls}-checked:hover`]: {
+          borderColor: token.controlOutline
+        }
+      },
+      "&-checked": __spreadProps(__spreadValues({}, genActiveStyle(token)), {
+        "&::after": {
+          visibility: "visible",
+          position: "absolute",
+          insetBlockStart: 2,
+          insetInlineEnd: 2,
+          opacity: 1,
+          width: 0,
+          height: 0,
+          border: `6px solid ${token.colorPrimary}`,
+          borderBlockEnd: "6px solid transparent",
+          borderInlineStart: "6px solid transparent",
+          borderStartEndRadius: 2,
+          content: '""'
+        }
+      }),
+      "&:focus": __spreadValues({}, genActiveStyle(token)),
+      "&&-ghost": {
+        backgroundColor: "transparent",
+        [`> ${componentCls}`]: {
+          "&-header": {
+            paddingInlineEnd: 0,
+            paddingBlockEnd: token.padding,
+            paddingInlineStart: 0
+          },
+          "&-body": {
+            paddingBlock: 0,
+            paddingInline: 0,
+            backgroundColor: "transparent"
+          }
+        }
+      },
+      "&&-split > &-body": {
+        paddingBlock: 0,
+        paddingInline: 0
+      },
+      "&&-contain-card > &-body": {
+        display: "flex"
+      },
+      [`${componentCls}-body-direction-column`]: {
+        flexDirection: "column"
+      },
+      [`${componentCls}-body-wrap`]: {
+        flexWrap: "wrap"
+      },
+      "&&-collapse": {
+        [`> ${componentCls}`]: {
+          "&-header": {
+            paddingBlockEnd: token.padding,
+            borderBlockEnd: 0
+          },
+          "&-body": {
+            display: "none"
+          }
+        }
+      },
+      [`${componentCls}-header`]: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingInline: token.paddingLG,
+        paddingBlock: token.padding,
+        paddingBlockEnd: 0,
+        "&-border": {
+          "&": {
+            paddingBlockEnd: token.padding
+          },
+          borderBlockEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`
+        },
+        "&-collapsible": {
+          cursor: "pointer"
+        }
+      },
+      [`${componentCls}-title`]: {
+        color: token.colorText,
+        fontWeight: 500,
+        fontSize: token.fontSizeLG,
+        lineHeight: token.lineHeight
+      },
+      [`${componentCls}-extra`]: {
+        color: token.colorText
+      },
+      [`${componentCls}-type-inner`]: {
+        [`${componentCls}-header`]: {
+          backgroundColor: token.colorFillAlter
+        }
+      },
+      [`${componentCls}-collapsible-icon`]: {
+        marginInlineEnd: token.marginXS,
+        color: token.colorIconHover,
+        ":hover": {
+          color: token.colorPrimaryHover
+        },
+        "& svg": {
+          transition: `transform ${token.motionDurationMid}`
+        }
+      },
+      [`${componentCls}-body`]: {
+        display: "block",
+        boxSizing: "border-box",
+        height: "100%",
+        paddingInline: token.paddingLG,
+        paddingBlock: token.padding,
+        "&-center": {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        }
+      },
+      "&&-size-small": {
+        [componentCls]: {
+          "&-header": {
+            paddingInline: token.paddingSM,
+            paddingBlock: token.paddingXS,
+            paddingBlockEnd: 0,
+            "&-border": {
+              paddingBlockEnd: token.paddingXS
+            }
+          },
+          "&-title": {
+            fontSize: token.fontSize
+          },
+          "&-body": {
+            paddingInline: token.paddingSM,
+            paddingBlock: token.paddingSM
+          }
+        },
+        [`${componentCls}-header${componentCls}-header-collapsible`]: {
+          paddingBlock: token.paddingXS
+        }
+      }
+    }),
+    [`${componentCls}-col`]: {
+      [`&${componentCls}-split-vertical`]: {
+        borderInlineEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`
+      },
+      [`&${componentCls}-split-horizontal`]: {
+        borderBlockEnd: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`
+      }
+    },
+    [`${componentCls}-tabs`]: {
+      [`${token.antCls}-tabs-top > ${token.antCls}-tabs-nav`]: {
+        marginBlockEnd: 0,
+        [`${token.antCls}-tabs-nav-list`]: {
+          marginBlockStart: token.marginXS,
+          paddingInlineStart: token.padding
+        }
+      },
+      [`${token.antCls}-tabs-bottom > ${token.antCls}-tabs-nav`]: {
+        marginBlockEnd: 0,
+        [`${token.antCls}-tabs-nav-list`]: {
+          paddingInlineStart: token.padding
+        }
+      },
+      [`${token.antCls}-tabs-left`]: {
+        [`${token.antCls}-tabs-content-holder`]: {
+          [`${token.antCls}-tabs-content`]: {
+            [`${token.antCls}-tabs-tabpane`]: {
+              paddingInlineStart: 0
+            }
+          }
+        }
+      },
+      // 这里是为了保证 tabs 的高度和左侧的一致
+      [`${token.antCls}-tabs-left > ${token.antCls}-tabs-nav`]: {
+        marginInlineEnd: 0,
+        [`${token.antCls}-tabs-nav-list`]: {
+          paddingBlockStart: token.padding
+        }
+      },
+      [`${token.antCls}-tabs-right`]: {
+        [`${token.antCls}-tabs-content-holder`]: {
+          [`${token.antCls}-tabs-content`]: {
+            [`${token.antCls}-tabs-tabpane`]: {
+              paddingInlineStart: 0
+            }
+          }
+        }
+      },
+      [`${token.antCls}-tabs-right > ${token.antCls}-tabs-nav`]: {
+        [`${token.antCls}-tabs-nav-list`]: {
+          paddingBlockStart: token.padding
+        }
+      }
+    }
+  };
+};
+var GRID_COLUMNS = 24;
+var genColStyle = (index, token) => {
+  const { componentCls } = token;
+  if (index === 0) {
+    return {
+      [`${componentCls}-col-0`]: {
+        display: "none"
+      }
+    };
+  }
+  return {
+    [`${componentCls}-col-${index}`]: {
+      flexShrink: 0,
+      width: `${index / GRID_COLUMNS * 100}%`
+    }
+  };
+};
+var genGridStyle = (token) => {
+  return Array(GRID_COLUMNS + 1).fill(1).map((_, index) => genColStyle(index, token));
+};
+function useStyle(prefixCls) {
+  return useAntdStyle("ProCard", (token) => {
+    const proCardToken = __spreadProps(__spreadValues({}, token), {
+      componentCls: `.${prefixCls}`
+    });
+    return [genProCardStyle(proCardToken), genGridStyle(proCardToken)];
+  });
+}
+export {
+  useStyle as default
+};

package/es/card/components/CheckCard/Group.d.ts

@@ -0,0 +1,183 @@
+import React from 'react';
+export type CheckCardValueType = string | number | boolean;
+/**
+ * Represents the possible value types for a CheckGroup.
+ * It can be an array of CheckCardValueTypes, a single CheckCardValueType, or undefined.
+ */
+export type CheckGroupValueType = CheckCardValueType[] | CheckCardValueType | undefined;
+/**
+ * Represents an option for a CheckCard component.
+ */
+export interface CheckCardOptionType {
+    /**
+     * The title to be displayed.
+     *
+     * @title Title
+     */
+    title?: React.ReactNode;
+    /**
+     * The value of the option.
+     *
+     * @title Value
+     */
+    value: CheckCardValueType;
+    /**
+     * The description to be displayed.
+     *
+     * @title Description
+     */
+    description?: React.ReactNode;
+    /**
+     * The size of the component. Supports three default sizes: 'large', 'default', 'small'.
+     * Users can also customize the width and height.
+     *
+     * @default default
+     * @title Component Size
+     */
+    size?: 'large' | 'default' | 'small';
+    /**
+     * The avatar to be displayed on the left side. Can be a link or a ReactNode.
+     *
+     * @title Left Avatar Area
+     */
+    avatar?: React.ReactNode;
+    /**
+     * The cover image. In this mode, other display values are ignored.
+     *
+     * @title Cover Image
+     */
+    cover?: React.ReactNode;
+    /**
+     * Specifies if the option is disabled.
+     *
+     * @default false
+     * @title Disabled
+     */
+    disabled?: boolean;
+    /**
+     * Change callback function.
+     *
+     * @param checked - Indicates whether the option is checked or not.
+     * @title Change Callback
+     */
+    onChange?: (checked: boolean) => void;
+    /**
+     * Child options.
+     */
+    children?: CheckCardOptionType[];
+}
+export interface AbstractCheckCardGroupProps {
+    /** @ignore */
+    prefixCls?: string;
+    /** @ignore */
+    className?: string;
+    /** 指定可选项 */
+    options?: (CheckCardOptionType | string)[];
+    /** 整组失效 */
+    disabled?: boolean;
+    /** @ignore */
+    style?: React.CSSProperties;
+    /**
+     * 组件尺寸，支持大，中，小三种默认尺寸，用户可以自定义宽高
+     *
+     * @default default
+     */
+    size?: 'large' | 'default' | 'small';
+    /**
+     * @acceptions CheckCard
+     * @ignore
+     */
+    children?: React.ReactNode;
+}
+export declare const CardLoading: React.FC<{
+    prefixCls: string;
+    hashId: string;
+}>;
+export interface CheckCardGroupProps extends AbstractCheckCardGroupProps {
+    /**
+     * 是否多选
+     *
+     * @title 是否多选
+     */
+    multiple?: boolean;
+    /**
+     * 默认选中的选项
+     *
+     * @title 默认选中的选项
+     */
+    defaultValue?: CheckGroupValueType;
+    /**
+     * 指定选中的选项
+     *
+     * @title 指定选中的选项
+     */
+    value?: CheckGroupValueType;
+    /**
+     * 当卡片组内容还在加载中时，可以用 loading 展示一个占位
+     *
+     * @title 加载中
+     */
+    loading?: boolean;
+    /**
+     * 是否显示边框
+     *
+     * @title 显示边框
+     */
+    bordered?: boolean;
+    /** 变化时回调函数 */
+    onChange?: (checkedValue: CheckGroupValueType) => void;
+}
+/**
+ * Represents the state of a CheckCardGroup component.
+ */
+export interface CheckCardGroupState {
+    value: CheckGroupValueType;
+    registeredValues: CheckCardValueType[];
+}
+/**
+ * Represents the props for the CheckCardGroup component.
+ */
+export type CheckCardGroupConnextType = {
+    /**
+     * A function to toggle the selected option.
+     * @param option - The option to toggle.
+     */
+    toggleOption?: (option: CheckCardOptionType) => void;
+    /**
+     * The currently selected value.
+     */
+    value?: any;
+    /**
+     * Specifies whether the component is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The size of the component.
+     */
+    size?: any;
+    /**
+     * Specifies whether the component is in a loading state.
+     */
+    loading?: any;
+    /**
+     * Specifies whether the component has a border.
+     */
+    bordered?: any;
+    /**
+     * Specifies whether multiple options can be selected.
+     */
+    multiple?: any;
+    /**
+     * A function to register a value.
+     * @param value - The value to register.
+     */
+    registerValue?: (value: any) => void;
+    /**
+     * A function to cancel a value.
+     * @param value - The value to cancel.
+     */
+    cancelValue?: (value: any) => void;
+};
+export declare const CheckCardGroupConnext: React.Context<CheckCardGroupConnextType | null>;
+declare const _default: (props: CheckCardGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default _default;