@digitalc/dxp-ui 0.0.5-alpha.10 → 0.0.5-alpha.12

package/README.md

@@ -146,7 +146,7 @@ import { Button, IconButton, IconButtonGroup, Toast, Stepper } from '@digitalc/d
 
 原因是使用的 Umi4、Vite 5 和 Turbopack 将原生支持智能样式编译的（：内置各种语言预处理工具），可以直接引用即可。
 
-但如果是使用的 webpack 或 umi3 脚手架的前端项目，需要在内部的 webpack 配置less编译。（因为包是esm格式，并支持了按需加载，所以没编译less文件），具体是通过 webpack-chain 添加指定的包，并进行构建。
+但如果是使用的 webpack 或 umi3 脚手架的前端项目，需要在内部的 webpack 配置less编译。（因为包是esm格式，并支持了按需加载, 基于 ES modules 的 tree shaking，未编译less文件），具体是通过 webpack-chain 添加指定的包，并进行构建。
 
 ```bash
   chainWebpack(memo, { webpack, env }) {

package/es/assets/token.json

@@ -1,5 +1,6 @@
 {
 	"gomo": {
+		"colorGradientNeutral": "linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.00) 100%)",
 		"spacingGapXs": 4,
 		"spacingGapSm": 8,
 		"spacingGapLg": 24,
@@ -300,6 +301,7 @@
 		"colorTextCta2": "#4d28e8"
 	},
 	"eSales": {
+		"colorGradientNeutral": "linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.00) 100%)",
 		"spacingGapXs": 4,
 		"spacingGapSm": 8,
 		"spacingGapLg": 24,
@@ -599,6 +601,7 @@
 		"colorTextCta2": "#180c8e"
 	},
 	"tm": {
+		"colorGradientNeutral": "linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.00) 100%)",
 		"spacingGapXs": 4,
 		"spacingGapSm": 8,
 		"spacingGapLg": 24,
@@ -897,4 +900,4 @@
 		"colorIconCta2": "#ff5e00",
 		"colorTextCta2": "#ff5e00"
 	}
-}
+}

package/es/components/Amount/index.d.ts

@@ -9,6 +9,7 @@ export interface AmountProps {
     position?: Position;
     style?: React.CSSProperties;
     onClick?: React.MouseEventHandler;
+    onDropDownClick?: React.MouseEventHandler;
     [key: string]: any;
 }
 export default class Amount extends PureComponent<AmountProps> {

package/es/components/Amount/index.js

@@ -5,7 +5,7 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["children", "className", "size", "title", "position", "prefixCls", "priceStrikethrough", "style", "priceColor", "textColor", "colorStrikethrough"];
+var _excluded = ["children", "className", "size", "title", "position", "prefixCls", "priceStrikethrough", "style", "priceColor", "textColor", "colorStrikethrough", "onDropDownClick"];
 import React, { PureComponent } from 'react';
 import { default as classNames } from 'classnames';
 import { designTokens } from "./designTokens";
@@ -35,6 +35,7 @@ var Amount = /*#__PURE__*/function (_PureComponent) {
         priceColor = _this$props.priceColor,
         textColor = _this$props.textColor,
         colorStrikethrough = _this$props.colorStrikethrough,
+        onDropDownClick = _this$props.onDropDownClick,
         attr = _objectWithoutProperties(_this$props, _excluded);
       var colorCardTextPrice = designTokens.colorCardTextPrice,
         colorCardTextPriceStrikethrough = designTokens.colorCardTextPriceStrikethrough,
@@ -72,7 +73,8 @@ var Amount = /*#__PURE__*/function (_PureComponent) {
             },
             children: [title, /*#__PURE__*/_jsx(Icon, {
               size: 12,
-              name: "icon-a-Arrow-Down"
+              name: "icon-a-Arrow-Down",
+              onClick: onDropDownClick
             })]
           })
         });

package/es/components/Button/index.d.ts

@@ -1,11 +1,20 @@
-import React, { PureComponent } from 'react';
+import React from 'react';
 import type { TextProps } from "../Text";
-import { noop } from '../../utils/noop';
 import './style/index.less';
 export type HtmlType = 'button' | 'reset' | 'submit';
 export type Size = 'middle' | 'small' | 'large';
 export type ButtonType = 'primary' | 'default' | 'dashed' | 'link' | 'text';
 export type ButtonColorType = 'default' | 'primary' | 'danger' | 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
+export interface ButtonThemeConfig {
+    token?: Record<string, any>;
+    components?: {
+        Button?: Record<string, any>;
+        [key: string]: any;
+    };
+    cssVar?: boolean;
+    hashed?: boolean;
+    [key: string]: any;
+}
 export interface xDXpProps {
     'x-dxp-prop'?: string;
 }
@@ -20,24 +29,11 @@ export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonE
     disabled?: boolean;
     block?: boolean;
     style?: React.CSSProperties;
-    theme?: string;
+    theme?: string | ButtonThemeConfig;
     prefixCls?: string;
     'aria-label'?: React.AriaAttributes['aria-label'];
     contentClassName?: string;
     [key: string]: any;
 }
-export default class Button extends PureComponent<ButtonProps> {
-    static defaultProps: {
-        disabled: boolean;
-        size: string;
-        type: string;
-        theme: string;
-        htmlType: string;
-        onMouseDown: typeof noop;
-        onClick: typeof noop;
-        onMouseEnter: typeof noop;
-        onMouseLeave: typeof noop;
-        prefixCls: string;
-    };
-    render(): React.JSX.Element;
-}
+declare const ButtonWithContext: React.FC<ButtonProps>;
+export default ButtonWithContext;

package/es/components/Button/index.js

@@ -2,6 +2,7 @@ import "antd/es/config-provider/style";
 import _ConfigProvider from "antd/es/config-provider";
 import "antd/es/button/style";
 import _Button from "antd/es/button";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
@@ -9,7 +10,7 @@ import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-var _excluded = ["fontSize", "theme", "inverse"];
+var _excluded = ["fontSize", "theme", "inverse", "parentTheme"];
 import React, { PureComponent } from 'react';
 import Text from "../Text";
 import { cssClasses } from "../../constants";
@@ -22,56 +23,91 @@ import "./style/index.less";
 // const { htmlTypes, btnTypes, sizes } = strings;
 
 // export type Theme = 'solid' | 'borderless' | 'light' | 'outline';
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-var Button = /*#__PURE__*/function (_PureComponent) {
-  _inherits(Button, _PureComponent);
-  var _super = _createSuper(Button);
-  function Button() {
-    _classCallCheck(this, Button);
+
+// 复用antd的Theme配置接口
+import { jsx as _jsx } from "react/jsx-runtime";
+// 实际的 Button 组件实现
+var ButtonComponent = /*#__PURE__*/function (_PureComponent) {
+  _inherits(ButtonComponent, _PureComponent);
+  var _super = _createSuper(ButtonComponent);
+  function ButtonComponent() {
+    _classCallCheck(this, ButtonComponent);
     return _super.apply(this, arguments);
   }
-  _createClass(Button, [{
+  _createClass(ButtonComponent, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
         children = _this$props.children,
         inverse = _this$props.inverse,
-        fontSize = _this$props.fontSize;
-      // Filter out fontSize from props to avoid passing it to AntdBtn
-      // const { fontSize: _, ...filteredProps } = this.props;
+        fontSize = _this$props.fontSize,
+        theme = _this$props.theme,
+        parentTheme = _this$props.parentTheme;
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       var _this$props2 = this.props,
         _ = _this$props2.fontSize,
         __ = _this$props2.theme,
         ___ = _this$props2.inverse,
+        ____ = _this$props2.parentTheme,
         filteredProps = _objectWithoutProperties(_this$props2, _excluded);
-      return /*#__PURE__*/_jsx(_Fragment, {
-        children: /*#__PURE__*/_jsx(_ConfigProvider, {
-          wave: {
-            disabled: true
-          },
-          prefixCls: cssClasses.PREFIX,
-          theme: {
-            //token: designTokens,
-            components: {
-              Button: _objectSpread({}, inverse ? inverseDesignTokens : designTokens)
-            },
-            cssVar: true,
-            hashed: false
-          },
-          children: /*#__PURE__*/_jsx(_Button, _objectSpread(_objectSpread({}, filteredProps), {}, {
-            children: /*#__PURE__*/_jsx(Text, {
-              size: fontSize,
-              children: children
-            })
-          }))
-        })
+
+      // 获取基础token
+      var baseTokens = inverse ? inverseDesignTokens : designTokens;
+
+      // 处理theme属性 - 如果是对象格式，则按antd的Theme配置处理
+      var themeConfig = {
+        components: {
+          Button: baseTokens
+        },
+        token: {},
+        cssVar: true,
+        hashed: false
+      };
+
+      // 如果有父级配置，则与基础token合并
+      if (parentTheme) {
+        var _parentTheme$componen;
+        var parentButtonTokens = ((_parentTheme$componen = parentTheme.components) === null || _parentTheme$componen === void 0 ? void 0 : _parentTheme$componen.Button) || {};
+        var parentGlobalTokens = parentTheme.token || {};
+        themeConfig = _objectSpread(_objectSpread(_objectSpread({}, themeConfig), parentTheme), {}, {
+          token: _objectSpread(_objectSpread({}, themeConfig.token || {}), parentGlobalTokens),
+          components: _objectSpread(_objectSpread({}, parentTheme.components), {}, {
+            Button: _objectSpread(_objectSpread({}, baseTokens), parentButtonTokens)
+          })
+        });
+      }
+
+      // 如果用户传入了自定义theme配置(对象)，则合并处理
+      if (theme && _typeof(theme) === 'object') {
+        var _theme$components, _parentTheme$componen2;
+        // 获取用户自定义的Button token
+        var userButtonTokens = ((_theme$components = theme.components) === null || _theme$components === void 0 ? void 0 : _theme$components.Button) || {};
+        var userGlobalTokens = theme.token || {};
+        themeConfig = _objectSpread(_objectSpread(_objectSpread({}, themeConfig), theme), {}, {
+          token: _objectSpread(_objectSpread({}, themeConfig.token || {}), userGlobalTokens),
+          components: _objectSpread(_objectSpread(_objectSpread({}, themeConfig.components), theme.components), {}, {
+            Button: _objectSpread(_objectSpread(_objectSpread({}, baseTokens), (parentTheme === null || parentTheme === void 0 || (_parentTheme$componen2 = parentTheme.components) === null || _parentTheme$componen2 === void 0 ? void 0 : _parentTheme$componen2.Button) || {}), userButtonTokens)
+          })
+        });
+      }
+      return /*#__PURE__*/_jsx(_ConfigProvider, {
+        wave: {
+          disabled: true
+        },
+        prefixCls: cssClasses.PREFIX,
+        theme: themeConfig,
+        children: /*#__PURE__*/_jsx(_Button, _objectSpread(_objectSpread({}, filteredProps), {}, {
+          children: /*#__PURE__*/_jsx(Text, {
+            size: fontSize,
+            children: children
+          })
+        }))
       });
     }
   }]);
-  return Button;
-}(PureComponent);
-_defineProperty(Button, "defaultProps", {
+  return ButtonComponent;
+}(PureComponent); // 包装器函数组件，用于获取 ConfigProvider 上下文
+_defineProperty(ButtonComponent, "defaultProps", {
   disabled: false,
   size: 'large',
   type: 'default',
@@ -83,4 +119,14 @@ _defineProperty(Button, "defaultProps", {
   onMouseLeave: noop,
   prefixCls: cssClasses.PREFIX + '-button'
 });
-export { Button as default };
+var ButtonWithContext = function ButtonWithContext(props) {
+  // 使用 React 的 useContext 获取 ConfigProvider 上下文
+  var _React$useContext = React.useContext(_ConfigProvider.ConfigContext),
+    parentTheme = _React$useContext.theme;
+  return /*#__PURE__*/_jsx(ButtonComponent, _objectSpread(_objectSpread({}, props), {}, {
+    parentTheme: parentTheme
+  }));
+};
+
+// 导出包装后的组件
+export default ButtonWithContext;

package/es/components/Icon/index.d.ts

@@ -6,7 +6,7 @@ export interface IIconProps {
     style?: React.CSSProperties;
     inverse?: boolean;
     className?: string;
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
 declare const Icon: (props: IIconProps) => React.JSX.Element;
 export default Icon;

package/es/components/Image/index.d.ts

@@ -1,10 +1,12 @@
 import React from 'react';
 export type backImageRadio = 1 | 2 | 0.68;
+export declare const BackImageEunm: Record<string, backImageRadio>;
 export interface IImageProps {
     src?: string;
     radio?: backImageRadio;
     imageSize?: number | string;
     style?: React.CSSProperties;
+    className?: string;
 }
 declare const Image: (props: IImageProps) => React.JSX.Element;
 export default Image;

package/es/components/Image/index.js

@@ -1,14 +1,22 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["src", "style", "imageSize", "radio"];
+var _excluded = ["src", "style", "imageSize", "radio", "className"];
 import React from 'react';
+import { default as classNames } from 'classnames';
+import { cssClasses } from "../../constants";
 import { jsx as _jsx } from "react/jsx-runtime";
+export var BackImageEunm = {
+  whRadio1: 1,
+  whRadio2: 2,
+  whRadio3: 0.68
+};
 var Image = function Image(props) {
   var src = props.src,
     style = props.style,
     imageSize = props.imageSize,
     _props$radio = props.radio,
-    radio = _props$radio === void 0 ? 2 : _props$radio,
+    radio = _props$radio === void 0 ? BackImageEunm.whRadio2 : _props$radio,
+    className = props.className,
     otherProps = _objectWithoutProperties(props, _excluded);
   var mergedStyle = imageSize ? _objectSpread({
     width: imageSize,
@@ -17,6 +25,7 @@ var Image = function Image(props) {
     objectFit: 'cover'
   }, style) : _objectSpread({}, style);
   return /*#__PURE__*/_jsx("img", _objectSpread({
+    className: classNames("".concat(cssClasses.PREFIX, "-image}"), className),
     src: src,
     style: mergedStyle
   }, otherProps));

package/es/components/ListItem/designTokens.d.ts

@@ -0,0 +1,30 @@
+declare const designTokens: {
+    sizingListItemIconImage: any;
+    sizingListItemIconIcon: any;
+    sizingListItemIconIconStatus: any;
+    sizingListItemImageImage: any;
+    sizingListItemImageIcon: any;
+    sizingListItemImageIconLg: any;
+    sizingListItemImageThumbnail: any;
+    sizingListItemIcon: any;
+    sizingListItemIconLg: any;
+    spacingListItemIconStatusPaddingRight: any;
+    spacingListItemIconPaddingLeft: any;
+    spacingListItemImagePaddingRight: any;
+    spacingListItemIconImagePaddingVertical: any;
+    spacingListItemIconImagePaddingHorizontal: any;
+    spacingListItemIconIconPaddingVertical: any;
+    spacingListItemIconIconPaddingHorizontal: any;
+    spacingListItemImageIconPaddingRight: any;
+    spacingListItemImagePointsPaddingTop: any;
+    colorListItemIconBackground: any;
+    colorListItemIconSubtle: any;
+    colorListItemIcon: any;
+    borderRadiusListItem: any;
+    colorListItemBackground: any;
+    spacingListItemTextPaddingHorizontal: any;
+    colorListItemTextTitle: any;
+    colorListItemTextSubtitle: any;
+    colorListItemTextPoints: any;
+};
+export default designTokens;

package/es/components/ListItem/designTokens.js

@@ -0,0 +1,31 @@
+import TokenManager from "../../utils/tokenManager";
+var designTokens = {
+  sizingListItemIconImage: TokenManager.tokenKey('sizingListItemIconImage'),
+  sizingListItemIconIcon: TokenManager.tokenKey('sizingListItemIconIcon'),
+  sizingListItemIconIconStatus: TokenManager.tokenKey('sizingListItemIconIconStatus'),
+  sizingListItemImageImage: TokenManager.tokenKey('sizingListItemImageImage'),
+  sizingListItemImageIcon: TokenManager.tokenKey('sizingListItemImageIcon'),
+  sizingListItemImageIconLg: TokenManager.tokenKey('sizingListItemImageIconLg'),
+  sizingListItemImageThumbnail: TokenManager.tokenKey('sizingListItemImageThumbnail'),
+  sizingListItemIcon: TokenManager.tokenKey('sizingListItemIcon'),
+  sizingListItemIconLg: TokenManager.tokenKey('sizingListItemIconLg'),
+  spacingListItemIconStatusPaddingRight: TokenManager.tokenKey('spacingListItemIconStatusPaddingRight'),
+  spacingListItemIconPaddingLeft: TokenManager.tokenKey('spacingListItemIconPaddingLeft'),
+  spacingListItemImagePaddingRight: TokenManager.tokenKey('spacingListItemImagePaddingRight'),
+  spacingListItemIconImagePaddingVertical: TokenManager.tokenKey('spacingListItemIconImagePaddingVertical'),
+  spacingListItemIconImagePaddingHorizontal: TokenManager.tokenKey('spacingListItemIconImagePaddingHorizontal'),
+  spacingListItemIconIconPaddingVertical: TokenManager.tokenKey('spacingListItemIconIconPaddingVertical'),
+  spacingListItemIconIconPaddingHorizontal: TokenManager.tokenKey('spacingListItemIconIconPaddingHorizontal'),
+  spacingListItemImageIconPaddingRight: TokenManager.tokenKey('spacingListItemImageIconPaddingRight'),
+  spacingListItemImagePointsPaddingTop: TokenManager.tokenKey('spacingListItemImagePointsPaddingTop'),
+  colorListItemIconBackground: TokenManager.tokenKey('colorListItemIconBackground'),
+  colorListItemIconSubtle: TokenManager.tokenKey('colorListItemIconSubtle'),
+  colorListItemIcon: TokenManager.tokenKey('colorListItemIcon'),
+  borderRadiusListItem: TokenManager.tokenKey('borderRadiusListItem'),
+  colorListItemBackground: TokenManager.tokenKey('colorListItemBackground'),
+  spacingListItemTextPaddingHorizontal: TokenManager.tokenKey('spacingListItemTextPaddingHorizontal'),
+  colorListItemTextTitle: TokenManager.tokenKey('colorListItemTextTitle'),
+  colorListItemTextSubtitle: TokenManager.tokenKey('colorListItemTextSubtitle'),
+  colorListItemTextPoints: TokenManager.tokenKey('colorListItemTextPoints')
+};
+export default designTokens;

package/es/components/ListItem/index.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import './style/index.less';
+export declare const ListItemTypes: {
+    readonly ListItemIcon: "ListItemIcon";
+    readonly ListItemImage: "ListItemImage";
+    readonly ListItemOther: "ListItemOther";
+};
+export declare const TAPPABLE_AREAS: {
+    readonly ALL: "ALL";
+    readonly EXPECT_IMAGE: "EXPECT_IMAGE";
+};
+export declare const ListItemRightTypes: {
+    readonly Toggle: "Toggle";
+    readonly Link: "Link";
+    readonly Status: "Status";
+    readonly Default: "Default";
+};
+export type ListItemType = typeof ListItemTypes[keyof typeof ListItemTypes];
+export type ListItemRightType = typeof ListItemRightTypes[keyof typeof ListItemRightTypes];
+export type TappableAreaType = typeof TAPPABLE_AREAS[keyof typeof TAPPABLE_AREAS];
+export interface IIconConfig {
+    iconStyle: React.CSSProperties;
+    iconName: string;
+}
+export interface ISubIconValueConfig {
+    value: string;
+    iconName: string;
+}
+export interface IListItemProps {
+    listType: ListItemType;
+    leftIcon?: IIconConfig;
+    leftImageSrc?: string;
+    title: string;
+    subTitle?: string;
+    listItemRightType?: ListItemRightType;
+    showToggle?: boolean;
+    toggleChecked?: boolean;
+    onToggleChange?: (checked: boolean, event: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    showLink?: boolean;
+    LinkName?: string;
+    onLinkClick?: () => void;
+    showStatus?: boolean;
+    statusIconName?: string;
+    statusIconColor?: string;
+    subTitleUp?: boolean;
+    tagName?: string;
+    showTag?: boolean;
+    subIconObj?: ISubIconValueConfig;
+    leftThumbnail?: string;
+    showRightBtn?: boolean;
+    onRightBtnClick?: () => void;
+    rightBtnTxt?: string;
+    showRightIcon?: boolean;
+    rightIconName?: string;
+    onRightIconClick?: () => void;
+    tappableArea?: TappableAreaType;
+    tappableAreaClick?: () => void;
+}
+declare const ListItem: React.FC<IListItemProps>;
+export default ListItem;