@qsxy/element-plus-react 1.0.0-next.18 → 1.0.0-next.21

package/README.md

@@ -26,43 +26,17 @@ element-plus-react 的 theme-chalk 使用 SCSS 编写，如果你的项目也使
 /_ 改变主题色变量 _/
 
 ```scss
-@use 'sass:math';
-
-@mixin set-color-mix-level($number, $mode: 'light', $--el-color-primary, $mix-color: #ffffff) {
-    --el-color-primary-#{$mode}-#{$number}: #{mix($mix-color, $--el-color-primary, math.percentage(math.div($number, 10)))};
-}
-
-// Theme color variable
-// 主题色变量
-$--el-color-primary: #4f8ffa;
-:root {
-    // Theme color variable
-    // 主题色变量
-    --el-color-primary: #4f8ffa;
-    // Theme background color variable (button class)
-    // 主题背景颜色变量（按钮类）
-    --el-bg-color-primary: #4f8ffa;
-    // Theme border color variable (button class)
-    // 主题边框颜色变量（按钮类）
-    --btn-border-color: #48aff9;
-
-    @each $i in (3, 5, 7, 8, 9) {
-        @include set-color-mix-level($i, 'light', $--el-color-primary, #ffffff);
-    }
-
-    @include set-color-mix-level(2, 'dark', $--el-color-primary, #000000);
-
-    // dark mode 暗黑模式
-    &.is-dark {
-        --el-color-primary: #{mix(#141414, $--el-color-primary, 5)};
-
-        @each $i in (3, 5, 7, 8, 9) {
-            @include set-color-mix-level($i, 'light', $--el-color-primary, #141414);
-        }
-
-        @include set-color-mix-level(2, 'dark', $--el-color-primary, #141414);
-    }
-}
+@use '@qsxy/element-plus-react/theme-chalk/common/var' with(
+        // 字体文件路径必填
+        $fa-font-path: '~/node_modules/@qsxy/element-plus-react/theme-chalk/fonts',
+        // 其他变量可自定义
+        $colors:
+            (
+                'primary': (
+                    'base': green,
+                )
+            )
+    );
 ```
 
 /_ Change icon font path variable, required _/
@@ -70,8 +44,7 @@ $--el-color-primary: #4f8ffa;
 /_ 改变 icon 字体路径变量，必需 _/
 
 ```scss
-$fa-font-path: '~@/assets/fonts';
-@import '@qsxy/element-plus-react/theme-chalk/index.scss';
+@use '@qsxy/element-plus-react/theme-chalk/common/var' with($fa-font-path: '~@/assets/fonts');
 ```
 
 ## Warm Reminder

package/dist/Breadcrumb/BreadcrumbItem.js

@@ -8,7 +8,6 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 import classNames from 'classnames';
 import React, { cloneElement, memo, useCallback, useContext } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { useClassNames } from "../hooks";
 import { isNotEmpty } from "../Util";
 import { BreadcrumbContext } from "./Breadcrumb";
@@ -23,16 +22,14 @@ var BreadcrumbItem = /*#__PURE__*/memo(function (props) {
     is = _useClassNames.is;
   var _useContext = useContext(BreadcrumbContext),
     separator = _useContext.separator;
-  var navigate = useNavigate();
 
   /** 点击链接跳转 */
   var onClickLink = useCallback(function () {
-    if (isNotEmpty(to)) {
-      var _to$path;
-      navigate(typeof to === 'string' ? to : (_to$path = to === null || to === void 0 ? void 0 : to.path) !== null && _to$path !== void 0 ? _to$path : '*');
-    }
+    // if (isNotEmpty(to)) {
+    //     navigate(typeof to === 'string' ? to : to?.path ?? '*');
+    // }
     onClick === null || onClick === void 0 || onClick(to);
-  }, [navigate, onClick, to]);
+  }, [onClick, to]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames(e(_templateObject || (_templateObject = _taggedTemplateLiteral(["item"]))), props.className),
     style: props.style,

package/dist/Switch/Switch.js

@@ -40,6 +40,8 @@ var Switch = /*#__PURE__*/forwardRef(function (props, ref) {
     inactiveValue = _props.inactiveValue,
     activeIcon = _props.activeIcon,
     inactiveIcon = _props.inactiveIcon,
+    activeAction = _props.activeAction,
+    inactiveAction = _props.inactiveAction,
     loading = _props.loading,
     className = _props.className,
     style = _props.style,
@@ -84,10 +86,10 @@ var Switch = /*#__PURE__*/forwardRef(function (props, ref) {
   var borderColor = useMemo(function () {
     return active ? props.borderColor || currentColor : currentColor;
   }, [active, props.borderColor, currentColor]);
-  var handleChange = useCallback(function () {
+  var handleChange = useCallback(function (event) {
     var val = active ? inactiveValue : activeValue;
     setValue(val);
-    onChange === null || onChange === void 0 || onChange(val, !active);
+    onChange === null || onChange === void 0 || onChange(val, !active, event);
   }, [active, activeValue, inactiveValue, onChange, setValue]);
   var switchValue = useCallback(function (event) {
     event.preventDefault();
@@ -95,7 +97,7 @@ var Switch = /*#__PURE__*/forwardRef(function (props, ref) {
       return;
     }
     if (!beforeChange) {
-      handleChange();
+      handleChange(event);
       onClick === null || onClick === void 0 || onClick();
       return;
     }
@@ -109,14 +111,14 @@ var Switch = /*#__PURE__*/forwardRef(function (props, ref) {
     if (shouldChange instanceof Promise) {
       shouldChange.then(function (result) {
         if (result) {
-          handleChange();
+          handleChange(event);
           onClick === null || onClick === void 0 || onClick();
         }
       }).catch(function (event1) {
         warning(false, event1);
       });
     } else if (shouldChange) {
-      handleChange();
+      handleChange(event);
       onClick === null || onClick === void 0 || onClick();
     }
   }, [beforeChange, disabled, handleChange, onClick]);
@@ -143,6 +145,17 @@ var Switch = /*#__PURE__*/forwardRef(function (props, ref) {
     }
     return null;
   }, [active, activeIcon, activeText, e, em, is]);
+  var actions = useMemo(function () {
+    if (active && activeAction) {
+      return typeof activeIcon === 'string' ? /*#__PURE__*/React.createElement(Icon, {
+        name: activeIcon
+      }) : activeAction;
+    } else if (!active && inactiveAction) {
+      return typeof inactiveAction === 'string' ? /*#__PURE__*/React.createElement(Icon, {
+        name: inactiveAction
+      }) : inactiveAction;
+    }
+  }, [active, activeAction, activeIcon, inactiveAction]);
   return /*#__PURE__*/React.createElement("div", _extends({
     className: classNames(b(), m(_defineProperty({}, size, size)), is({
       disabled: disabled,
@@ -176,17 +189,37 @@ var Switch = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, inlinePrompt && /*#__PURE__*/React.createElement("div", {
     className: e(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["inner"])))
-  }, !active ? activeText && /*#__PURE__*/React.createElement("span", {
-    className: "is-text"
-  }, activeText) : typeof activeIcon === 'string' && /*#__PURE__*/React.createElement(Icon, {
-    className: "is-icon",
-    name: activeIcon
-  }), active ? inactiveText && /*#__PURE__*/React.createElement("span", {
-    className: "is-text"
-  }, inactiveText) : typeof inactiveIcon === 'string' && /*#__PURE__*/React.createElement(Icon, {
-    className: "is-icon",
-    name: inactiveIcon
-  })), /*#__PURE__*/React.createElement("div", {
+  }, !active ? function () {
+    if (activeText) {
+      return /*#__PURE__*/React.createElement("span", {
+        className: "is-text"
+      }, activeText);
+    } else if (activeIcon) {
+      if (typeof activeIcon === 'string') {
+        /*#__PURE__*/React.createElement(Icon, {
+          className: "is-icon",
+          name: activeIcon
+        });
+      } else {
+        return activeIcon;
+      }
+    }
+  }() : null, active ? function () {
+    if (inactiveText) {
+      return /*#__PURE__*/React.createElement("span", {
+        className: "is-text"
+      }, inactiveText);
+    } else if (inactiveIcon) {
+      if (typeof inactiveIcon === 'string') {
+        /*#__PURE__*/React.createElement(Icon, {
+          className: "is-icon",
+          name: inactiveIcon
+        });
+      } else {
+        return inactiveIcon;
+      }
+    }
+  }() : null), /*#__PURE__*/React.createElement("div", {
     className: e(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["action"]))),
     style: {
       color: currentColor
@@ -194,6 +227,6 @@ var Switch = /*#__PURE__*/forwardRef(function (props, ref) {
   }, loading ? /*#__PURE__*/React.createElement(Icon, {
     name: "spinner",
     spin: true
-  }) : null)), !inlinePrompt && trueLabel);
+  }) : actions)), !inlinePrompt && trueLabel);
 });
 export default Switch;

package/dist/Switch/typings.d.ts

@@ -17,6 +17,10 @@ export interface SwitchProps<V = ValueType> extends Omit<FormControlBaseProps<V>
     activeIcon?: IconName | React.ReactElement<any>;
     /** switch 的状态为 off 时的文字描述 */
     inactiveIcon?: IconName | React.ReactElement<any>;
+    /** on状态下显示的图标组件 */
+    activeAction?: IconName | React.ReactElement<any>;
+    /** off状态下显示的图标组件 */
+    inactiveAction?: IconName | React.ReactElement<any>;
     /** 当在 on 状态时的背景颜色 */
     activeColor?: string;
     /** off 状态时的背景颜色 */

package/dist/Tooltip/Tooltip.js

@@ -182,7 +182,8 @@ var Tooltip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
     },
     onMouseEnter: enterable && trigger === 'hover' ? handleMouseEnter : noop,
     onMouseLeave: enterable && trigger === 'hover' ? handleMouseLeave : noop,
-    className: classNames(is(effect), props.popperClass, _defineProperty({}, e(_templateObject || (_templateObject = _taggedTemplateLiteral(["popper"]))), classPrefix === 'tooltip')),
+    className: classNames(props.popperClass, _defineProperty({}, e(_templateObject || (_templateObject = _taggedTemplateLiteral(["popper"]))), classPrefix === 'tooltip')),
+    effect: effect,
     unmountOnExit: unmountOnExit
   }, popperProps, transitionProps), /*#__PURE__*/React.createElement(TooltipContext.Provider, {
     value: {