@digitalc/dxp-ui 0.0.6-0 → 0.0.6-alpha.2

package/es/components/Row/index.js

@@ -0,0 +1,68 @@
+import "antd/es/config-provider/style";
+import _ConfigProvider from "antd/es/config-provider";
+import "antd/es/row/style";
+import _Row from "antd/es/row";
+import "antd/es/col/style";
+import _Col from "antd/es/col";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["gutter", "children"];
+import React from 'react';
+import { isWebViewBelow90 } from "../../utils";
+import { cssClasses } from "../../constants";
+import { jsx as _jsx } from "react/jsx-runtime";
+var Row = function Row(_ref) {
+  var gutter = _ref.gutter,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // 计算实际 gutter 值（仅处理数字和数组类型）
+  var _ref2 = function () {
+      if (!gutter) return [0, 0];
+      if (typeof gutter === 'number') return [gutter, 0];
+      if (Array.isArray(gutter)) return [gutter[0] || 0, gutter[1] || 0];
+      return [0, 0]; // 响应式 gutter 不处理补偿
+    }(),
+    _ref3 = _slicedToArray(_ref2, 2),
+    horizontalGutter = _ref3[0],
+    verticalGutter = _ref3[1];
+
+  // 为每个 Col 添加 padding 补偿
+  var wrappedChildren = React.Children.map(children, function (child) {
+    if (! /*#__PURE__*/React.isValidElement(child)) return child;
+    return /*#__PURE__*/_jsx(_Col, _objectSpread(_objectSpread({}, child.props), {}, {
+      style: _objectSpread({
+        paddingLeft: horizontalGutter / 2,
+        paddingRight: horizontalGutter / 2,
+        paddingBottom: verticalGutter
+      }, child.props.style)
+    }));
+  });
+  var prefix = "".concat(cssClasses.PREFIX);
+  console.log('isWebViewBelow90()', isWebViewBelow90());
+  if (isWebViewBelow90()) {
+    return /*#__PURE__*/_jsx(_ConfigProvider, {
+      wave: {
+        disabled: true
+      },
+      prefixCls: prefix,
+      children: /*#__PURE__*/_jsx(_Row, _objectSpread(_objectSpread({
+        gutter: gutter
+      }, props), {}, {
+        children: wrappedChildren
+      }))
+    });
+  }
+  return /*#__PURE__*/_jsx(_ConfigProvider, {
+    wave: {
+      disabled: true
+    },
+    prefixCls: prefix,
+    children: /*#__PURE__*/_jsx(_Row, _objectSpread(_objectSpread({
+      gutter: gutter
+    }, props), {}, {
+      children: children
+    }))
+  });
+};
+export default Row;

package/es/components/Selector/ESelector.js

@@ -98,7 +98,7 @@ var ESelector = function ESelector(props) {
       token: {},
       path: ["".concat(prefix, "-warp")]
     }, function () {
-      return "\n      .".concat(prefix, "-warp {\n        gap: ").concat(gap || 16, "px;\n        .itemSelect {\n          .filterOptions {\n            background: ").concat(colorSelectorBackground, ";\n            border: ").concat(borderWidthSelectorStandard || 1, "px solid ").concat(colorSelectorBorderStandard, ";\n            border-radius: ").concat(borderRadiusSelector, "px;\n            padding: ").concat(spacingSelectorPaddingVertical, "px ").concat(spacingSelectorPaddingHorizontal, "px;\n              &.active {\n                border: ").concat(borderWidthSelectorActive || 1, "px solid ").concat(colorSelectorBorderActive, ";\n                border-radius: ").concat(borderRadiusSelector, "px;\n                &.activeBg {\n                  background: ").concat(colorSelectorBackgroundActive, ";\n                }\n              }         \n              &.active.showActiveIcon:after {\n                background: ").concat(colorSelectorBorderActive, ";\n              }    \n              &.disabled {\n                opacity: ").concat(opacitySelectorTextDisabled / 100, ";\n                border-color: ").concat(colorSelectorBorderDisabled, ";\n                color:").concat(colorSelectorTextDisabled, ";\n              }\n          }\n        }\n    ");
+      return "\n      .".concat(prefix, "-warp {\n        > div + div {\n          margin-top: ").concat(gap || 16, "px;\n        }\n        .itemSelect {\n          .filterOptions {\n            background: ").concat(colorSelectorBackground, ";\n            border: ").concat(borderWidthSelectorStandard || 1, "px solid ").concat(colorSelectorBorderStandard, ";\n            border-radius: ").concat(borderRadiusSelector, "px;\n            padding: ").concat(spacingSelectorPaddingVertical, "px ").concat(spacingSelectorPaddingHorizontal, "px;\n              &.active {\n                border: ").concat(borderWidthSelectorActive || 1, "px solid ").concat(colorSelectorBorderActive, ";\n                border-radius: ").concat(borderRadiusSelector, "px;\n                &.activeBg {\n                  background: ").concat(colorSelectorBackgroundActive, ";\n                }\n              }         \n              &.active.showActiveIcon:after {\n                background: ").concat(colorSelectorBorderActive, ";\n              }    \n              &.disabled {\n                opacity: ").concat(opacitySelectorTextDisabled / 100, ";\n                border-color: ").concat(colorSelectorBorderDisabled, ";\n                color:").concat(colorSelectorTextDisabled, ";\n              }\n          }\n        }\n    ");
     });
     return hashId;
   };
@@ -125,7 +125,7 @@ var ESelector = function ESelector(props) {
           children: [/*#__PURE__*/_jsx(Icon, {
             className: "select-tick",
             type: "icon-Tick",
-            size: 32,
+            size: 14,
             color: "#fff"
           }), hasImg ? /*#__PURE__*/_jsxs("div", {
             className: "imgStyle",

package/es/components/Selector/style/index.less

@@ -44,14 +44,11 @@
     &.active {
       &.showActiveIcon {
         .select-tick {
-          width: 16px;
-          height: 16px;
           display: block;
           position: absolute;
-          right: 8px;
-          bottom: 4px;
-          z-index: 100;
-          transform: scale(0.5, 0.5);
+          right: 2px;
+          bottom: 0;
+          z-index: 2;
         }
 
         &:before {
@@ -61,14 +58,14 @@
         &:after {
           position: absolute;
           content: '';
-          width: 64px;
-          height: 64px;
+          width: 48px;
+          height: 48px;
           overflow: hidden;
           border-radius: 10000px;
-          bottom: -32px;
-          right: -32px;
+          bottom: -24px;
+          right: -24px;
           border-radius: 10000px;
-          z-index: 99;
+          z-index: 1;
         }
       }
     }

package/es/components/SelectorItem/index.js

@@ -59,7 +59,7 @@ var SelectorItem = function SelectorItem(props) {
     children: [/*#__PURE__*/_jsx(Icon, {
       className: "select-tick",
       type: "icon-Tick",
-      size: 32,
+      size: 14,
       color: "#fff"
     }), children]
   });

package/es/components/SelectorItem/style/index.less

@@ -23,14 +23,11 @@
   &.active {
     &.showActiveIcon {
       .select-tick {
-        width: 16px;
-        height: 16px;
         display: block;
         position: absolute;
-        right: 8px;
-        bottom: 4px;
-        z-index: 100;
-        transform: scale(0.5, 0.5);
+        right: 2px;
+        bottom: 0;
+        z-index: 2;
       }
 
       &:before {
@@ -40,14 +37,14 @@
       &:after {
         position: absolute;
         content: '';
-        width: 64px;
-        height: 64px;
+        width: 48px;
+        height: 48px;
         overflow: hidden;
         border-radius: 10000px;
-        bottom: -32px;
-        right: -32px;
+        bottom: -24px;
+        right: -24px;
         border-radius: 10000px;
-        z-index: 99;
+        z-index: 1;
       }
     }
   }

package/es/components/Stepper/index.js

@@ -84,8 +84,9 @@ var Stepper = function Stepper(_ref) {
   var _useMemo = useMemo(function () {
       var _items$current, _items;
       var hasNextStep = items && current !== undefined && current < items.length - 1;
+      var curStep = items && current !== undefined;
       return {
-        title: hasNextStep ? ((_items$current = items[current]) === null || _items$current === void 0 ? void 0 : _items$current.title) || '' : '',
+        title: curStep ? ((_items$current = items[current]) === null || _items$current === void 0 ? void 0 : _items$current.title) || '' : '',
         nextStep: hasNextStep ? ((_items = items[current + 1]) === null || _items === void 0 ? void 0 : _items.title) || '' : ''
       };
     }, [items, current]),

package/es/components/StickyFooter/index.js

@@ -86,8 +86,8 @@ var StickyFooter = function StickyFooter(props) {
           disabled: btnDisabled,
           children: buttonText
         })
-      }), type === 'priceVariant' && !hideAmount && /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(Amount, {
+      }), type === 'priceVariant' && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [hideAmount ? /*#__PURE__*/_jsx("div", {}) : /*#__PURE__*/_jsx(Amount, {
           titleType: titleType,
           priceStrikethrough: priceStrikethrough,
           priceColor: colorPrice || priceColor,
@@ -101,7 +101,7 @@ var StickyFooter = function StickyFooter(props) {
           onDropDownClick: onDropDownClick,
           iconType: iconType,
           children: price
-        }), autoBreakPoint === DESKTOP && !hideBtn && /*#__PURE__*/_jsxs(_Space, {
+        }), !hideBtn && /*#__PURE__*/_jsxs(_Space, {
           size: "middle",
           children: [showCancel, showPrevious, showBackPage, /*#__PURE__*/_jsx(Button, {
             iconPosition: iconPosition,
@@ -112,13 +112,6 @@ var StickyFooter = function StickyFooter(props) {
             onClick: onBtnClick,
             children: buttonText
           })]
-        }), autoBreakPoint === MOBILE && /*#__PURE__*/_jsx(Button, {
-          icon: btnIcon,
-          disabled: btnDisabled,
-          loading: btnLoading,
-          type: "primary",
-          onClick: onBtnClick,
-          children: buttonText
         })]
       })]
     }), children]

package/es/components/Tabs/index.js

@@ -22,7 +22,7 @@ var Tabs = function Tabs(props) {
     type = _props$type === void 0 ? 'default' : _props$type,
     defaultActiveKey = props.defaultActiveKey,
     _props$prefixCls = props.prefixCls,
-    prefixCls = _props$prefixCls === void 0 ? "".concat(BASE_CLASS_PREFIX, "-tabs") : _props$prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? "".concat(BASE_CLASS_PREFIX) : _props$prefixCls,
     _props$className = props.className,
     className = _props$className === void 0 ? '' : _props$className,
     _props$isEqualTabs = props.isEqualTabs,
@@ -47,13 +47,14 @@ var Tabs = function Tabs(props) {
   var iconColor = inverse ? otherDesignToken.colorTabsIconInactiveInverse : otherDesignToken.colorTabsIconInactive; // 选中的subTitle颜色
   var iconActiveColor = inverse ? otherDesignToken.colorTabsIconActiveInverse : otherDesignToken.colorTabsIconActive; // 选中的subTitle颜色
 
+  var per = "".concat(BASE_CLASS_PREFIX, "-tabs");
   var useCustomButtonStyle = function useCustomButtonStyle() {
     var hashId = useStyleRegister({
       theme: theme,
       token: {},
       path: ["".concat(prefixCls)]
     }, function () {
-      return "\n      .".concat(prefixCls, "-card.").concat(prefixCls, "-fill>.").concat(prefixCls, "-nav .").concat(prefixCls, "-tab {\n        border-radius: 32px;\n        height:40px;\n      }\n      .").concat(prefixCls, "-card.").concat(prefixCls, "-fill .").concat(prefixCls, "-nav-list {\n        background: ").concat(designFillTokens.colorFillAlter, ";\n        border-radius: 32px;\n      }\n      .").concat(prefixCls, "-tab-active .").concat(prefixCls, "-item-title {\n        font-family:").concat(fontFamilySecondaryBold, "-Bold;\n      }\n      .").concat(prefixCls, "-fill .").concat(prefixCls, "-tab-active .").concat(prefixCls, "-item-title {\n        font-family:").concat(fontFamilySecondaryBold, "-Bold;\n        font-size: ").concat(fontSizeMobileContentC14, ";\n      }\n    ");
+      return "\n      .".concat(per, "-card.").concat(prefixCls, "-fill>.").concat(per, "-nav .").concat(per, "-tab {\n        border-radius: 32px;\n        height:40px;\n      }\n      .").concat(per, "-card.").concat(prefixCls, "-fill .").concat(per, "-nav-list {\n        background: ").concat(designFillTokens.colorFillAlter, ";\n        border-radius: 32px;\n      }\n      .").concat(per, "-tab-active .").concat(prefixCls, "-item-title {\n        font-family:").concat(fontFamilySecondaryBold, "-Bold;\n      }\n      .").concat(prefixCls, "-fill .").concat(per, "-tab-active .").concat(prefixCls, "-item-title {\n        font-family:").concat(fontFamilySecondaryBold, "-Bold;\n        font-size: ").concat(fontSizeMobileContentC14, ";\n      }\n    ");
     });
     return hashId;
   };

package/es/components/Tabs/style/index.less

@@ -2,7 +2,7 @@
 
 @components: tabs;
 
-.@{prefix}-@{components}-equal-tabs {
+.@{prefix}-equal-tabs {
   .@{prefix}-tabs-nav-list {
     display: grid !important;
     grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
@@ -21,21 +21,21 @@
   }
 }
 
-.@{prefix}-@{components}-item {
+.@{prefix}-item {
   display: flex;
   align-items: center;
   flex-direction: column;
   box-sizing: border-box;
 }
 
-.@{prefix}-@{components}-tab-btn {
+.@{prefix}-tab-btn {
   text-align: center;
 
-  .@{prefix}-@{components}-tab-icon {
+  .@{prefix}-tab-icon {
     margin: 0 !important;
   }
 }
 
-.@{prefix}-@{components}-fill>.@{prefix}-@{components}-nav .@{prefix}-@{components}-tab-focus {
+.@{prefix}-fill>.@{prefix}-nav .@{prefix}-tab-focus {
   outline: none;
 }

package/es/components/index.d.ts

@@ -63,4 +63,7 @@ export { AlignTypes } from './ListItem';
 export { default as Selector } from './Selector';
 export { default as Checkbox } from './Checkbox';
 export { default as Radio } from './Radio';
+export { default as AppStyleWrapper } from './AppStyleWrapper';
+export { default as Row } from './Row';
+export { default as Col } from './Col';
 export { default as GlobalTokenProvider } from './GlobalTokenProvider';

package/es/components/index.js

@@ -38,4 +38,7 @@ export { AlignTypes } from "./ListItem";
 export { default as Selector } from "./Selector";
 export { default as Checkbox } from "./Checkbox";
 export { default as Radio } from "./Radio";
+export { default as AppStyleWrapper } from "./AppStyleWrapper";
+export { default as Row } from "./Row";
+export { default as Col } from "./Col";
 export { default as GlobalTokenProvider } from "./GlobalTokenProvider";

package/es/index.d.ts

@@ -1,5 +1,5 @@
 import './style/themes/index.css';
 export * from './components';
 export { default as tokenManager } from './utils/tokenManager';
-export { useBreakPoint, useIsMobile, checkIsMobile } from './utils/deviceType';
+export { useBreakPoint, useIsMobile, checkIsMobile, isWebViewBelow90 } from './utils/deviceType';
 export * from './utils/themeContext';

package/es/index.js

@@ -5,7 +5,7 @@ export * from "./components";
 
 // 导出工具函数
 export { default as tokenManager } from "./utils/tokenManager";
-export { useBreakPoint, useIsMobile, checkIsMobile } from "./utils/deviceType";
+export { useBreakPoint, useIsMobile, checkIsMobile, isWebViewBelow90 } from "./utils/deviceType";
 
 // 这个是多主题的配置目前没用；选择了直接由消费者注入 token 的方式改变样式更灵活
 export * from "./utils/themeContext";

package/es/utils/deviceType.d.ts

@@ -12,3 +12,18 @@ export declare const checkIsMobile: () => boolean;
  */
 export declare const useIsMobile: () => boolean;
 export declare const useBreakPoint: () => "desktop" | "mobile" | null;
+/**
+ * 获取 WebView 的版本号
+ * @returns {number|null} 返回 WebView 的版本号（整数），如果无法解析则返回 null
+ */
+export declare const getWebViewVersion: () => number | null;
+/**
+ * 检测是否支持某个特性（例如 CSS 属性或 JavaScript API）
+ * @returns {boolean} 如果支持返回 true，否则返回 false
+ */
+export declare const isGapSupported: () => boolean;
+/**
+ * 检测 WebView 版本是否低于 90
+ * @returns {boolean} 如果版本低于 90 或无法检测到版本，则返回 true；否则返回 false
+ */
+export declare const isWebViewBelow90: () => boolean;

package/es/utils/deviceType.js

@@ -62,4 +62,50 @@ export var useBreakPoint = function useBreakPoint() {
     setBreakpoint(autoBreakPoint);
   }, []);
   return breakpoint;
+};
+
+/**
+ * 获取 WebView 的版本号
+ * @returns {number|null} 返回 WebView 的版本号（整数），如果无法解析则返回 null
+ */
+export var getWebViewVersion = function getWebViewVersion() {
+  try {
+    var _navigator;
+    var userAgent = ((_navigator = navigator) === null || _navigator === void 0 ? void 0 : _navigator.userAgent) || ''; // 确保 navigator 和 userAgent 存在
+
+    // 匹配 Chrome/XX 或 WebView/XX（Android WebView 格式）
+    var versionMatch = userAgent.match(/(Chrome|WebView)\/(\d+)/);
+
+    // 如果匹配成功，返回版本号；否则返回 null
+    return versionMatch ? parseInt(versionMatch[2], 10) : null;
+  } catch (error) {
+    console.error('Error while parsing WebView version:', error);
+    return null; // 捕获异常并返回 null
+  }
+};
+/**
+ * 检测是否支持某个特性（例如 CSS 属性或 JavaScript API）
+ * @returns {boolean} 如果支持返回 true，否则返回 false
+ */
+export var isGapSupported = function isGapSupported() {
+  // 示例：检测是否支持 CSS 的 gap 属性
+  var testElement = document.createElement('div');
+  testElement.style.gap = '1px'; // 尝试设置 gap 属性
+
+  // 如果浏览器支持 gap 属性，则 style.gap 不会为空
+  return testElement.style.gap !== '';
+};
+
+/**
+ * 检测 WebView 版本是否低于 90
+ * @returns {boolean} 如果版本低于 90 或无法检测到版本，则返回 true；否则返回 false
+ */
+export var isWebViewBelow90 = function isWebViewBelow90() {
+  var version = getWebViewVersion();
+  // 如果版本号有效且小于 90，返回 true
+  if (version !== null) {
+    return version < 90;
+  }
+  // 如果无法获取版本号，降级到特性检测
+  return !isGapSupported();
 };