shineout 3.10.0-beta.5 → 3.10.0-beta.6

package/cjs/index.js

@@ -537,5 +537,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // 此文件由脚本自动生成，请勿直接修改。
 // This file was generated automatically by a script. Please do not modify it directly.
 var _default = exports.default = {
-  version: '3.10.0-beta.5'
+  version: '3.10.0-beta.6'
 };

package/dist/shineout.js

@@ -12336,7 +12336,7 @@ var handleStyle = function handleStyle(style) {
 };
 /* harmony default export */ var jss_style_handleStyle = (handleStyle);
 ;// CONCATENATED MODULE: ../shineout-style/src/version.ts
-/* harmony default export */ var version = ('3.10.0-beta.5');
+/* harmony default export */ var version = ('3.10.0-beta.6');
 ;// CONCATENATED MODULE: ../shineout-style/src/jss-style/index.tsx
 
 
@@ -25861,7 +25861,7 @@ var stepsStyle = {
         left: -12
       },
       '& $step:not(:last-child)': {
-        '&$widthDescription': {
+        '&$withDescription': {
           '&:after': {
             borderLeftWidth: 22,
             borderTopWidth: 28,
@@ -25906,7 +25906,7 @@ var stepsStyle = {
         }
       },
       '& $step:last-child': {
-        '&$widthDescription': {
+        '&$withDescription': {
           '&:before': {
             borderLeftWidth: 22,
             borderTopWidth: 28,
@@ -26009,7 +26009,7 @@ var stepsStyle = {
   large: {
     '&$arrow': {
       '& $step:not(:last-child)': {
-        '&$widthDescription': {
+        '&$withDescription': {
           '&:after': {
             top: 0,
             width: 30,
@@ -26057,7 +26057,7 @@ var stepsStyle = {
         }
       },
       '& $step:last-child': {
-        '&$widthDescription': {
+        '&$withDescription': {
           '&:before': {
             borderLeftWidth: 30,
             borderTopWidth: 36,
@@ -26435,88 +26435,74 @@ var stepsStyle = {
       '& $title': {}
     }
   },
-  arrow: {
-    position: 'relative',
-    zIndex: 0,
-    '&$steps': {
-      overflow: 'hidden'
+  arrowIcon: {
+    position: 'absolute',
+    top: 0,
+    right: 0.25,
+    bottom: 0,
+    transform: 'translateX(100%)',
+    zIndex: 1,
+    '@media (min-resolution: 2dppx)': {
+      right: 0
     },
-    '& $step': {
-      marginRight: 4,
-      paddingLeft: src.stepsArrowPaddingX,
-      // before
-      '&:before': {
-        content: '""',
-        position: 'absolute',
-        width: 0,
-        height: 0,
-        top: 0,
-        borderLeftWidth: 16,
-        borderTopWidth: 20,
-        borderBottomWidth: 20,
-        borderLeftColor: '#ffffff'
+    '$withDescription &': {
+      transform: 'translateX(calc(100% - 0.5px))',
+      '@media (min-resolution: 2dppx)': {
+        transform: 'translateX(100%)'
+      }
+    },
+    '& > svg': {
+      display: 'block',
+      height: '100%',
+      color: src.stepsFinishBackgroundColor,
+      '$process &': {
+        color: src.stepsProcessBackgroundColor
       },
-      '&[dir=ltr]:before': {
-        left: 0
+      '$wait &': {
+        color: src.stepsWaitBackgroundColor
       },
-      '&[dir=rtl]:before': {
-        right: 0
+      '&:last-child': {
+        position: 'relative'
       },
-      // after
-      '&:after': {
-        content: '""',
+      '&:first-child': {
         position: 'absolute',
-        width: 0,
-        height: 0,
         top: 0,
-        zIndex: 1,
-        borderLeftWidth: 16,
-        borderTopWidth: 20,
-        borderBottomWidth: 20
-      },
-      '&[dir=ltr]:after': {
-        right: -16
-      },
-      '&[dir=rtl]:after': {
-        left: -16
+        left: 4,
+        color: 'white',
+        '$arrow[dir=rtl] &': {
+          right: 4,
+          left: 'auto'
+        }
       }
     },
+    '$step:last-child &': {
+      display: 'none'
+    },
+    '$arrow[dir=rtl] &': {
+      left: '0.25px',
+      right: 'auto',
+      transform: 'translateX(-100%)',
+      '& > svg': {
+        transform: "rotate(180deg)"
+      }
+    }
+  },
+  arrow: {
+    position: 'relative',
+    '& $step': {
+      marginRight: 4,
+      paddingLeft: src.stepsArrowPaddingX
+    },
     '&$horizontal': {
       '& $horizontalLabel $title:after': {
         display: 'none'
       }
     },
     '& $step:first-child': {
-      padding: 0,
-      '&:before': {
-        display: 'none'
-      },
-      '&$widthDescription': {
-        '&:after': {
-          borderLeftWidth: 26,
-          borderTopWidth: 32,
-          borderBottomWidth: 32
-        },
-        '&[dir=ltr]:after': {
-          right: -26
-        },
-        '&[dir=rtl]:after': {
-          left: -26
-        }
-      }
+      padding: 0
     },
     '& $step:last-child': {
-      paddingRight: 0,
-      '&:after': {
-        display: 'none'
-      },
-      '&$widthDescription': {
-        '&:before': {
-          borderLeftWidth: 26,
-          borderTopWidth: 32,
-          borderBottomWidth: 32
-        }
-      }
+      paddingRight: 0
     },
     '& $description': {
       paddingRight: 0,
@@ -26531,84 +26517,30 @@ var stepsStyle = {
       width: '100%'
     },
     '& $finish': {
-      backgroundColor: src.stepsFinishBackgroundColor,
-      '&:after': {
-        borderLeft: "16px solid ".concat(src.stepsFinishBackgroundColor),
-        borderTop: "20px solid transparent",
-        borderBottom: "20px solid transparent"
-      },
-      '&:before': {
-        // borderLeft: `16px solid #ffffff`,
-        // borderTop: `20px solid transparent`,
-        // borderBottom: `20px solid transparent`,
-      }
+      backgroundColor: src.stepsFinishBackgroundColor
     },
     '& $process': {
       color: src.stepsProcessFontColor,
       backgroundColor: src.stepsProcessBackgroundColor,
       '& $description': {
         color: src.stepsProcessFontColor
-      },
-      '&:after': {
-        borderLeft: "16px solid ".concat(src.stepsProcessBackgroundColor),
-        borderTop: "20px solid transparent",
-        borderBottom: "20px solid transparent"
-      },
-      '&[dir=ltr]:after': {
-        right: -16
-      },
-      '&[dir=rtl]:after': {
-        left: -16
-      },
-      '&:before': {
-        borderLeft: "16px solid #ffffff",
-        borderTop: "20px solid transparent",
-        borderBottom: "20px solid transparent"
       }
     },
     '& $wait': {
       color: src.stepsWaitFontColor,
       // backgroundColor: Token.stepsWaitBackgroundColor,
-      backgroundColor: src.stepsWaitBackgroundColor,
-      '&:after': {
-        borderLeft: "16px solid ".concat(src.stepsWaitBackgroundColor),
-        borderTop: "20px solid transparent",
-        borderBottom: "20px solid transparent"
-      },
-      '&:before': {
-        borderLeft: "16px solid #ffffff",
-        borderTop: "20px solid transparent",
-        borderBottom: "20px solid transparent"
-      }
+      backgroundColor: src.stepsWaitBackgroundColor
     },
-    '& $widthDescription': {
+    '& $withDescription': {
       '& $content,$description': {
         textAlign: 'left'
       },
       '& $title': {
         marginBottom: src.stepsDescriptionTitleMarginX
-      },
-      '&$process,$finish,$wait': {
-        '&:after': {
-          borderLeftWidth: 26,
-          borderTopWidth: 32,
-          borderBottomWidth: 32
-        },
-        '&[dir=ltr]:after': {
-          right: -26
-        },
-        '&[dir=rtl]:after': {
-          left: -26
-        },
-        '&:before': {
-          borderLeftWidth: 26,
-          borderTopWidth: 32,
-          borderBottomWidth: 32
-        }
       }
     }
   },
-  widthDescription: {},
+  withDescription: {},
   default: {
     lineHeight: 0,
     '&$vertical': {
@@ -64287,7 +64219,15 @@ var DotStep = function DotStep(props) {
 
 
 
-
+var Arrow = /*#__PURE__*/(0,jsx_runtime.jsx)("svg", {
+  viewBox: "0 0 40 100",
+  xmlns: "http://www.w3.org/2000/svg",
+  preserveAspectRatio: "none",
+  children: /*#__PURE__*/(0,jsx_runtime.jsx)("path", {
+    d: "M 0 0 L 40 50 L 0 100",
+    fill: "currentColor"
+  })
+});
 var ArrowStep = function ArrowStep(props) {
   var _jssStyle$steps;
   var jssStyle = props.jssStyle,
@@ -64297,7 +64237,6 @@ var ArrowStep = function ArrowStep(props) {
     index = props.index,
     status = props.status;
   var styles = (jssStyle === null || jssStyle === void 0 || (_jssStyle$steps = jssStyle.steps) === null || _jssStyle$steps === void 0 ? void 0 : _jssStyle$steps.call(jssStyle)) || {};
-  var rootClass = classnames_default()(styles.arrow);
   var config = useConfig();
   var renderTitle = function renderTitle() {
     return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
@@ -64318,11 +64257,17 @@ var ArrowStep = function ArrowStep(props) {
       children: [renderTitle(), description && renderDescription()]
     });
   };
-  return /*#__PURE__*/(0,jsx_runtime.jsx)("div", {
-    className: rootClass,
+  var renderArrow = function renderArrow() {
+    return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+      className: styles.arrowIcon,
+      children: [Arrow, Arrow]
+    });
+  };
+  return /*#__PURE__*/(0,jsx_runtime.jsxs)("div", {
+    className: styles.arrow,
     onClick: onChange,
     dir: config.direction,
-    children: renderContent()
+    children: [renderContent(), renderArrow()]
   });
 };
 /* harmony default export */ var step_arrow = (ArrowStep);
@@ -64380,7 +64325,7 @@ var Step = function Step(props) {
   };
   var status = getStatus();
   var labelPlacement = getLabelPlacement();
-  var rootClass = classnames_default()(styles.step, className, styles[status], defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()({}, styles.disabled, isDisabled), styles.finish, current > index), styles.horizontalLabel, labelPlacement === 'horizontal'), styles.verticalLabel, labelPlacement === 'vertical'), styles.widthDescription, !!description));
+  var rootClass = classnames_default()(styles.step, className, styles[status], defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()(defineProperty_default()({}, styles.disabled, isDisabled), styles.finish, current > index), styles.horizontalLabel, labelPlacement === 'horizontal'), styles.verticalLabel, labelPlacement === 'vertical'), styles.withDescription, !!description));
   var handleChange = function handleChange(e) {
     if (isDisabled) return;
     onClick === null || onClick === void 0 || onClick(e, index, id);
@@ -77913,7 +77858,7 @@ var watermark_interface = __webpack_require__(6640);
 
 
 /* harmony default export */ var src_0 = ({
-  version: '3.10.0-beta.5'
+  version: '3.10.0-beta.6'
 });
 }();
 /******/ 	return __webpack_exports__;