@oceanbase/design 1.0.0-alpha.2 → 1.0.0-alpha.20

package/lib/button/style/index.js

@@ -1,39 +1,77 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/button/style/index.ts
-var style_exports = {};
-__export(style_exports, {
-  default: () => style_default,
-  genButtonStyle: () => genButtonStyle
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(style_exports);
-var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
-var genButtonStyle = (token) => {
-  return {};
+exports.genPresetColorStyle = exports.genButtonStyle = exports.default = void 0;
+var _interface = require("../../theme/interface");
+var _genComponentStyleHook = require("../../_util/genComponentStyleHook");
+const genPresetColorStyle = token => {
+  const {
+    componentCls
+  } = token;
+  const addPresetColors = ['primary', 'dangerous'];
+  return [..._interface.PresetColors, ...addPresetColors].reduce((prev, colorKey) => {
+    const colorKeyMap = {
+      primary: 'blue',
+      dangerous: 'red'
+    };
+    const bgColor = addPresetColors.includes(colorKey) ? token[`${colorKeyMap[colorKey]}5`] : token[`${colorKey}7`];
+    return {
+      ...prev,
+      [`&${componentCls}-color-${colorKey}:hover`]: {
+        color: token.colorTextLightSolid,
+        background: bgColor,
+        borderColor: bgColor
+      }
+    };
+  }, {});
 };
-var style_default = (prefixCls, isAliyun) => {
-  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("Button", (token) => {
-    return isAliyun ? [] : [genButtonStyle(token)];
-  });
-  return useStyle(prefixCls);
+exports.genPresetColorStyle = genPresetColorStyle;
+const genButtonStyle = token => {
+  const {
+    iconCls,
+    componentCls
+  } = token;
+  return {
+    [`${componentCls}`]: {
+      // remove box-shadow for button
+      boxShadow: 'none !important',
+      // loading style for not primary button
+      [`&${componentCls}-loading:not(${componentCls}-primary)`]: {
+        opacity: 1
+      },
+      // button outlined and dashed style
+      [`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
+        // disabled style
+        [`&:not(:disabled):not(${componentCls}-disabled)`]: {
+          [`&:not(${componentCls}-loading):hover`]: {
+            ...genPresetColorStyle(token)
+          },
+          [`&${componentCls}-color-default`]: {
+            '&:hover': {
+              borderColor: token.gray7,
+              color: token.colorText
+            },
+            [iconCls]: {
+              color: token.colorIcon
+            }
+          }
+        }
+      },
+      // button loading and solid style
+      [`&${componentCls}-variant-solid:not(:disabled):not(${componentCls}-disabled):hover`]: {
+        ...genPresetColorStyle(token)
+      }
+    },
+    [`${componentCls}${componentCls}-sm`]: {
+      [`${componentCls}-icon`]: {
+        fontSize: token.fontSize
+      }
+    }
+  };
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  genButtonStyle
-});
+exports.genButtonStyle = genButtonStyle;
+var _default = exports.default = (0, _genComponentStyleHook.genStyleHooks)('Button', token => {
+  return [genButtonStyle(token)];
+});

package/lib/calendar/index.js

@@ -1,23 +1,16 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/calendar/index.ts
-var calendar_exports = {};
-module.exports = __toCommonJS(calendar_exports);
-__reExport(calendar_exports, require("antd/es/calendar"), module.exports);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ...require("antd/es/calendar")
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
+var _calendar = require("antd/es/calendar");
+Object.keys(_calendar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _calendar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _calendar[key];
+    }
+  });
+});

package/lib/card/Card.js

@@ -1,23 +1,16 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/card/Card.ts
-var Card_exports = {};
-module.exports = __toCommonJS(Card_exports);
-__reExport(Card_exports, require("antd/es/card/Card"), module.exports);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ...require("antd/es/card/Card")
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
+var _Card = require("antd/es/card/Card");
+Object.keys(_Card).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Card[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Card[key];
+    }
+  });
+});

package/lib/card/index.d.ts

@@ -1,13 +1,23 @@
 import type { CardProps as AntCardProps, CardTabListType as AntCardTabListType } from 'antd/es/card';
 import React from 'react';
+import { type DocumentType } from '../_util';
 export * from 'antd/es/card/Card';
 export * from 'antd/es/card';
 export interface CardTabListType extends AntCardTabListType {
     tag?: React.ReactNode;
 }
+export type CardLocale = Record<string, never>;
 export interface CardProps extends AntCardProps {
+    subTitle?: React.ReactNode;
+    document?: DocumentType;
     divided?: boolean;
+    gray?: boolean;
     tabList?: CardTabListType[];
+    collapsible?: boolean;
+    defaultCollapsed?: boolean;
+    collapsed?: boolean;
+    onCollapse?: (collapsed: boolean) => void;
+    locale?: CardLocale;
 }
 declare const _default: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> & {
     Grid: React.FC<import("antd/es/card").CardGridProps>;

package/lib/card/index.js

@@ -1,118 +1,206 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/card/index.tsx
-var card_exports = {};
-__export(card_exports, {
-  default: () => card_default
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(card_exports);
-var import_util = require("@oceanbase/util");
-var import_antd = require("antd");
-var import_classnames = __toESM(require("classnames"));
-var import_react = __toESM(require("react"));
-var import_config_provider = __toESM(require("../config-provider"));
-var import_util2 = require("../_util");
-var import_style = __toESM(require("./style"));
-__reExport(card_exports, require("antd/es/card/Card"), module.exports);
-__reExport(card_exports, require("antd/es/card"), module.exports);
-var Card = import_react.default.forwardRef(
-  ({
-    children,
-    size,
-    title,
-    tabList,
-    tabProps,
-    divided: outerDivided,
-    prefixCls: customizePrefixCls,
-    bodyStyle,
-    styles,
-    className,
-    ...restProps
-  }, ref) => {
-    var _a;
-    const { getPrefixCls, card: contextCard } = (0, import_react.useContext)(import_config_provider.default.ConfigContext);
-    const divided = outerDivided ?? (contextCard == null ? void 0 : contextCard.divided) ?? true;
-    const prefixCls = getPrefixCls("card", customizePrefixCls);
-    const tabsPrefixCls = getPrefixCls("tabs", customizePrefixCls);
-    const { wrapSSR } = (0, import_style.default)(prefixCls, tabsPrefixCls);
-    const noBodyHorizontalPadding = (0, import_util2.isHorizontalPaddingZero)(bodyStyle == null ? void 0 : bodyStyle.padding) || (0, import_util2.isHorizontalPaddingZero)((_a = styles == null ? void 0 : styles.body) == null ? void 0 : _a.padding);
-    const cardCls = (0, import_classnames.default)(
-      {
-        [`${prefixCls}-has-title`]: !!title,
-        [`${prefixCls}-no-divider`]: !divided,
-        [`${prefixCls}-no-body-horizontal-padding`]: noBodyHorizontalPadding
-      },
-      className
-    );
-    const newTabList = tabList == null ? void 0 : tabList.map((item) => {
-      if (!(0, import_util.isNullValue)(item.tag)) {
-        return {
-          ...item,
-          tab: /* @__PURE__ */ import_react.default.createElement(import_antd.Space, { size: 4 }, item.tab, /* @__PURE__ */ import_react.default.createElement(import_antd.Tag, { bordered: false, className: `${tabsPrefixCls}-tab-tag` }, item.tag))
-        };
-      }
-      return item;
+var _exportNames = {};
+exports.default = void 0;
+var _util = require("@oceanbase/util");
+var _antd = require("antd");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireWildcard(require("react"));
+var _icons = require("@oceanbase/icons");
+var _configProvider = _interopRequireDefault(require("../config-provider"));
+var _enUS = _interopRequireDefault(require("../locale/en-US"));
+var _util2 = require("../_util");
+var _theme = _interopRequireDefault(require("../theme"));
+var _style = _interopRequireWildcard(require("./style"));
+var _jsxRuntime = require("react/jsx-runtime");
+var _Card = require("antd/es/card/Card");
+Object.keys(_Card).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Card[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Card[key];
+    }
+  });
+});
+var _card = require("antd/es/card");
+Object.keys(_card).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _card[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _card[key];
+    }
+  });
+});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const Card = /*#__PURE__*/_react.default.forwardRef(({
+  children,
+  size,
+  title,
+  subTitle,
+  document,
+  extra,
+  tabList,
+  tabProps,
+  tabBarExtraContent,
+  divided: outerDivided,
+  gray,
+  prefixCls: customizePrefixCls,
+  bodyStyle,
+  styles,
+  className,
+  collapsible,
+  defaultCollapsed,
+  collapsed: outerCollapsed,
+  onCollapse,
+  locale: customLocale,
+  ...restProps
+}, ref) => {
+  const {
+    getPrefixCls,
+    card: contextCard,
+    locale: contextLocale
+  } = (0, _react.useContext)(_configProvider.default.ConfigContext);
+  const {
+    token
+  } = _theme.default.useToken();
+  const divided = outerDivided ?? contextCard?.divided ?? true;
+  const cardLocale = {
+    ..._enUS.default.Card,
+    ...contextLocale?.Card,
+    ...customLocale
+  };
+  const prefixCls = getPrefixCls('card', customizePrefixCls);
+  const tabsPrefixCls = getPrefixCls('tabs', customizePrefixCls);
+  const [wrapCSSVar] = (0, _style.default)(prefixCls, tabsPrefixCls);
+  const viewDocument = contextLocale?.global?.viewDocument;
+  const [internalCollapsed, setInternalCollapsed] = (0, _react.useState)(defaultCollapsed ?? false);
+  const collapsed = outerCollapsed !== undefined ? outerCollapsed : internalCollapsed;
+  const handleCollapse = (0, _react.useCallback)(() => {
+    const newCollapsed = !collapsed;
+    if (outerCollapsed === undefined) {
+      setInternalCollapsed(newCollapsed);
+    }
+    onCollapse?.(newCollapsed);
+  }, [collapsed, outerCollapsed, onCollapse]);
+  const cardTitle = (0, _react.useMemo)(() => {
+    if (!collapsible && !subTitle && !document) {
+      return title;
+    }
+    if (!title) {
+      return null;
+    }
+    const titleContent = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: `${prefixCls}-title-content`,
+        children: title
+      }), (subTitle || document) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Space, {
+        className: `${prefixCls}-sub-title-wrapper`,
+        size: "small",
+        children: [subTitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: `${prefixCls}-sub-title`,
+          children: subTitle
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_util2.Document, {
+          document: document,
+          prefixCls: prefixCls,
+          viewDocument: viewDocument
+        })]
+      })]
     });
-    return wrapSSR(
-      /* @__PURE__ */ import_react.default.createElement(
-        import_antd.Card,
-        {
-          ref,
-          size,
-          title,
-          tabList: newTabList,
-          tabProps: {
-            size: "middle",
-            ...tabProps
-          },
-          prefixCls: customizePrefixCls,
-          bodyStyle,
-          styles,
-          className: cardCls,
-          ...restProps
+    if (!collapsible) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: `${prefixCls}-title-wrapper`,
+        style: {
+          display: 'flex',
+          alignItems: 'center'
         },
-        children
-      )
-    );
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  Card.displayName = import_antd.Card.displayName;
-}
-var card_default = Object.assign(Card, {
-  Grid: import_antd.Card.Grid,
-  Meta: import_antd.Card.Meta,
-  genTableStyle: import_style.genTableStyle
-});
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ...require("antd/es/card/Card"),
-  ...require("antd/es/card")
+        children: titleContent
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: `${prefixCls}-title-wrapper`,
+      onClick: handleCollapse,
+      style: {
+        cursor: 'pointer',
+        display: 'flex',
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.CaretRightFilled, {
+        className: `${prefixCls}-collapsible-icon`,
+        style: {
+          transition: `transform ${token.motionDurationMid}`,
+          transform: collapsed ? undefined : 'rotate(90deg)',
+          color: token.colorIcon,
+          marginRight: token.marginXS
+        }
+      }), titleContent]
+    });
+  }, [collapsible, title, subTitle, document, collapsed, prefixCls, token, handleCollapse, viewDocument]);
+
+  // card body no horizontal padding
+  const noBodyHorizontalPadding = (0, _util2.isHorizontalPaddingZero)(bodyStyle?.padding) || (0, _util2.isHorizontalPaddingZero)(styles?.body?.padding);
+  const noBodyPaddingBottom = (0, _util2.isPaddingBottomZero)(bodyStyle?.padding) || (0, _util2.isPaddingBottomZero)(styles?.body?.padding);
+  const cardCls = (0, _classnames.default)({
+    [`${prefixCls}-has-head`]: !!(title || extra || tabList || tabBarExtraContent),
+    [`${prefixCls}-no-divider`]: !divided,
+    [`${prefixCls}-gray`]: gray,
+    [`${prefixCls}-no-body-horizontal-padding`]: noBodyHorizontalPadding,
+    [`${prefixCls}-no-body-padding-bottom`]: noBodyPaddingBottom,
+    [`${prefixCls}-collapsible`]: collapsible,
+    [`${prefixCls}-collapsed`]: collapsed
+  }, className);
+  const newTabList = tabList?.map(item => {
+    if (!(0, _util.isNullValue)(item.tag)) {
+      return {
+        ...item,
+        tab: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Space, {
+          size: 4,
+          children: [item.tab, /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tag, {
+            bordered: false,
+            className: `${tabsPrefixCls}-tab-tag`,
+            children: item.tag
+          })]
+        })
+      };
+    }
+    return item;
+  });
+  return wrapCSSVar( /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Card, {
+    ref: ref,
+    size: size,
+    title: cardTitle,
+    extra: extra,
+    tabList: newTabList,
+    tabBarExtraContent: tabBarExtraContent,
+    tabProps: {
+      size: size === 'small' ? 'small' : 'middle',
+      ...tabProps
+    },
+    prefixCls: customizePrefixCls,
+    bodyStyle: {
+      ...bodyStyle
+    },
+    styles: styles,
+    className: cardCls,
+    ...restProps,
+    children: children
+  }));
 });
+if (process.env.NODE_ENV !== 'production') {
+  Card.displayName = _antd.Card.displayName;
+}
+var _default = exports.default = Object.assign(Card, {
+  Grid: _antd.Card.Grid,
+  Meta: _antd.Card.Meta,
+  genTableStyle: _style.genTableStyle
+});

package/lib/card/style/index.d.ts

@@ -1,14 +1,11 @@
 /// <reference types="react" />
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from 'antd/es/theme/internal';
+import type { FullToken, GenerateStyle } from '../../theme/interface';
 export type CardToken = FullToken<'Card'> & {
     tabsComponentCls: string;
     tabsPrefixCls: string;
 };
 export declare const genTableStyle: (padding: number, token: Partial<CardToken>) => CSSObject;
 export declare const genCardStyle: GenerateStyle<CardToken>;
-declare const _default: (prefixCls: string, tabsPrefixCls: string) => {
-    wrapSSR: (node: import("react").ReactNode) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
-    hashId: string;
-};
+declare const _default: (prefixCls: string, tabsPrefixCls: string) => readonly [(node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, string, string];
 export default _default;