xmirror-components 1.0.18 → 1.0.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/build/dist/index.cjs +74 -21
  2. package/build/dist/index.mjs +3183 -1824
  3. package/build/es/components/GlobalLoading/index.d.ts +0 -1
  4. package/build/es/components/GlobalLoading/index.js +21 -8
  5. package/build/es/components/IconButton/index.js +10 -3
  6. package/build/lib/components/GlobalLoading/index.d.ts +0 -1
  7. package/build/lib/components/GlobalLoading/index.js +24 -8
  8. package/build/lib/components/IconButton/index.js +10 -3
  9. package/build/package.json +4 -2
  10. package/build/types/components/GlobalLoading/index.d.ts +0 -1
  11. package/package.json +4 -2
package/build/es/components/GlobalLoading/index.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import React from 'react';
2
- import './index.less';
3
2
  declare let setGlobalLoading: (_value: boolean) => void;
4
3
  declare function GlobalLoading(): React.JSX.Element;
5
4
  export { setGlobalLoading };
package/build/es/components/GlobalLoading/index.js CHANGED
@@ -1,9 +1,21 @@
1
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
2
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
+ return cooked;
4
+ };
1
5
  import React, { useState, useEffect, useRef } from 'react';
2
6
  import { CSSTransition } from 'react-transition-group';
3
- import './index.less';
7
+ import styled from '@emotion/styled';
8
+ import { keyframes } from '@emotion/react';
4
9
  var setGlobalLoading = function (_value) {
5
10
  console.warn('GlobalLoading 未被引入，你可以直接使用 App 组件，或直接引用 GlobalLoading 组件到项目中！');
6
11
  };
12
+ var GlobalLoadingWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: fixed;\n z-index: 9999;\n inset: 0;\n background: rgba(255,255,255,0.7);\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n position: fixed;\n z-index: 9999;\n inset: 0;\n background: rgba(255,255,255,0.7);\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
13
+ var LoadingContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n filter: url('#goo');\n"], ["\n display: flex;\n gap: 8px;\n filter: url('#goo');\n"])));
14
+ var dotAnimation = keyframes(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.5); }\n"], ["\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.5); }\n"])));
15
+ var Dot = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: #1890ff;\n animation: ", " 1.2s infinite;\n animation-delay: ", "s;\n"], ["\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: #1890ff;\n animation: ", " 1.2s infinite;\n animation-delay: ", "s;\n"])), dotAnimation, function (_a) {
16
+ var delay = _a.delay;
17
+ return delay;
18
+ });
7
19
  function GlobalLoading() {
8
20
  var ref = useRef(null);
9
21
  var _a = useState(false), loading = _a[0], setLoading = _a[1];
@@ -13,13 +25,13 @@ function GlobalLoading() {
13
25
  };
14
26
  }, []);
15
27
  return (React.createElement(CSSTransition, { in: loading, nodeRef: ref, timeout: 500, classNames: "global-loading-transition", unmountOnExit: true }, function () {
16
- return (React.createElement("div", { ref: ref, className: "global-loading" },
17
- React.createElement("div", { className: "global-loading-container" },
18
- React.createElement("div", { className: "dot dot-1" }),
19
- React.createElement("div", { className: "dot dot-2" }),
20
- React.createElement("div", { className: "dot dot-3" }),
21
- React.createElement("div", { className: "dot dot-4" }),
22
- React.createElement("div", { className: "dot dot-5" })),
28
+ return (React.createElement(GlobalLoadingWrapper, { ref: ref },
29
+ React.createElement(LoadingContainer, null,
30
+ React.createElement(Dot, { delay: 0 }),
31
+ React.createElement(Dot, { delay: 0.2 }),
32
+ React.createElement(Dot, { delay: 0.4 }),
33
+ React.createElement(Dot, { delay: 0.6 }),
34
+ React.createElement(Dot, { delay: 0.8 })),
23
35
  React.createElement("svg", { style: {
24
36
  visibility: 'hidden',
25
37
  position: 'absolute'
@@ -33,3 +45,4 @@ function GlobalLoading() {
33
45
  }
34
46
  export { setGlobalLoading };
35
47
  export default GlobalLoading;
48
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/build/es/components/IconButton/index.js CHANGED
@@ -1,3 +1,7 @@
1
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
2
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
3
+ return cooked;
4
+ };
1
5
  var __assign = (this && this.__assign) || function () {
2
6
  __assign = Object.assign || function(t) {
3
7
  for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -23,10 +27,12 @@ var __rest = (this && this.__rest) || function (s, e) {
23
27
  import React, { Fragment, useRef } from 'react';
24
28
  import { Tooltip, Button } from 'antd';
25
29
  import { noop, isString } from 'lodash-es';
26
- import classNames from 'classnames';
30
+ // import classNames from 'classnames'
27
31
  import { useHover } from 'ahooks';
28
32
  import IconFont from '../IconFont';
29
- import styles from './index.module.less';
33
+ // import styles from './index.module.less'
34
+ import styled from '@emotion/styled';
35
+ var StyledButton = styled(Button)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: 5px;\n font-size: 16px;\n color: var(--color-primary);\n background-color: transparent;\n border: none;\n box-shadow: initial;\n transition: background-color 0.2s;\n\n &[disabled], &[aria-disabled='true'] {\n color: #9da2a6 !important;\n cursor: not-allowed;\n background-color: transparent;\n }\n\n &:hover, &:active, &:focus {\n background: #F4F0F5;\n }\n\n span {\n font-size: 16px;\n }\n"], ["\n margin-right: 5px;\n font-size: 16px;\n color: var(--color-primary);\n background-color: transparent;\n border: none;\n box-shadow: initial;\n transition: background-color 0.2s;\n\n &[disabled], &[aria-disabled='true'] {\n color: #9da2a6 !important;\n cursor: not-allowed;\n background-color: transparent;\n }\n\n &:hover, &:active, &:focus {\n background: #F4F0F5;\n }\n\n span {\n font-size: 16px;\n }\n"])));
30
36
  export var Icon = function (props, buttonRef) {
31
37
  var ref = useRef(null);
32
38
  var Icon = props.icon, _a = props.tooltipDisabled, tooltipDisabled = _a === void 0 ? false : _a, _b = props.onClick, onClick = _b === void 0 ? noop : _b, disabled = props.disabled, _c = props.size, size = _c === void 0 ? 'middle' : _c, _d = props.style, style = _d === void 0 ? {} : _d, className = props.className, _e = props.loading, loading = _e === void 0 ? false : _e, attrs = __rest(props, ["icon", "tooltipDisabled", "onClick", "disabled", "size", "style", "className", "loading"]);
@@ -39,7 +45,7 @@ export var Icon = function (props, buttonRef) {
39
45
  return Icon;
40
46
  }
41
47
  };
42
- var children = (React.createElement(Button, { onClick: onClick, size: size, disabled: disabled, style: style, ref: buttonRef, loading: loading, className: classNames([className, styles.btn_icon__warp]), icon: createIcon() }));
48
+ var children = (React.createElement(StyledButton, { onClick: onClick, size: size, disabled: disabled, style: style, ref: buttonRef, loading: loading, className: className, icon: createIcon() }));
43
49
  if (!Icon) {
44
50
  throw new Error('IconButton 组件必须传入 icon 属性');
45
51
  }
@@ -49,3 +55,4 @@ export var Icon = function (props, buttonRef) {
49
55
  React.createElement("span", { ref: ref, style: { display: 'inline-block' }, className: "icon-button-box" }, children)))));
50
56
  };
51
57
  export default React.forwardRef(Icon);
58
+ var templateObject_1;
package/build/lib/components/GlobalLoading/index.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import React from 'react';
2
- import './index.less';
3
2
  declare let setGlobalLoading: (_value: boolean) => void;
4
3
  declare function GlobalLoading(): React.JSX.Element;
5
4
  export { setGlobalLoading };
package/build/lib/components/GlobalLoading/index.js CHANGED
@@ -1,4 +1,8 @@
1
1
  "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
2
6
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
7
  if (k2 === undefined) k2 = k;
4
8
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -32,15 +36,26 @@ var __importStar = (this && this.__importStar) || (function () {
32
36
  return result;
33
37
  };
34
38
  })();
39
+ var __importDefault = (this && this.__importDefault) || function (mod) {
40
+ return (mod && mod.__esModule) ? mod : { "default": mod };
41
+ };
35
42
  Object.defineProperty(exports, "__esModule", { value: true });
36
43
  exports.setGlobalLoading = void 0;
37
44
  var react_1 = __importStar(require("react"));
38
45
  var react_transition_group_1 = require("react-transition-group");
39
- require("./index.less");
46
+ var styled_1 = __importDefault(require("@emotion/styled"));
47
+ var react_2 = require("@emotion/react");
40
48
  var setGlobalLoading = function (_value) {
41
49
  console.warn('GlobalLoading 未被引入，你可以直接使用 App 组件，或直接引用 GlobalLoading 组件到项目中！');
42
50
  };
43
51
  exports.setGlobalLoading = setGlobalLoading;
52
+ var GlobalLoadingWrapper = styled_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: fixed;\n z-index: 9999;\n inset: 0;\n background: rgba(255,255,255,0.7);\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n position: fixed;\n z-index: 9999;\n inset: 0;\n background: rgba(255,255,255,0.7);\n display: flex;\n align-items: center;\n justify-content: center;\n"])));
53
+ var LoadingContainer = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n gap: 8px;\n filter: url('#goo');\n"], ["\n display: flex;\n gap: 8px;\n filter: url('#goo');\n"])));
54
+ var dotAnimation = (0, react_2.keyframes)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.5); }\n"], ["\n 0%, 100% { transform: scale(1); }\n 50% { transform: scale(1.5); }\n"])));
55
+ var Dot = styled_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: #1890ff;\n animation: ", " 1.2s infinite;\n animation-delay: ", "s;\n"], ["\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: #1890ff;\n animation: ", " 1.2s infinite;\n animation-delay: ", "s;\n"])), dotAnimation, function (_a) {
56
+ var delay = _a.delay;
57
+ return delay;
58
+ });
44
59
  function GlobalLoading() {
45
60
  var ref = (0, react_1.useRef)(null);
46
61
  var _a = (0, react_1.useState)(false), loading = _a[0], setLoading = _a[1];
@@ -50,13 +65,13 @@ function GlobalLoading() {
50
65
  };
51
66
  }, []);
52
67
  return (react_1.default.createElement(react_transition_group_1.CSSTransition, { in: loading, nodeRef: ref, timeout: 500, classNames: "global-loading-transition", unmountOnExit: true }, function () {
53
- return (react_1.default.createElement("div", { ref: ref, className: "global-loading" },
54
- react_1.default.createElement("div", { className: "global-loading-container" },
55
- react_1.default.createElement("div", { className: "dot dot-1" }),
56
- react_1.default.createElement("div", { className: "dot dot-2" }),
57
- react_1.default.createElement("div", { className: "dot dot-3" }),
58
- react_1.default.createElement("div", { className: "dot dot-4" }),
59
- react_1.default.createElement("div", { className: "dot dot-5" })),
68
+ return (react_1.default.createElement(GlobalLoadingWrapper, { ref: ref },
69
+ react_1.default.createElement(LoadingContainer, null,
70
+ react_1.default.createElement(Dot, { delay: 0 }),
71
+ react_1.default.createElement(Dot, { delay: 0.2 }),
72
+ react_1.default.createElement(Dot, { delay: 0.4 }),
73
+ react_1.default.createElement(Dot, { delay: 0.6 }),
74
+ react_1.default.createElement(Dot, { delay: 0.8 })),
60
75
  react_1.default.createElement("svg", { style: {
61
76
  visibility: 'hidden',
62
77
  position: 'absolute'
@@ -69,3 +84,4 @@ function GlobalLoading() {
69
84
  }));
70
85
  }
71
86
  exports.default = GlobalLoading;
87
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/build/lib/components/IconButton/index.js CHANGED
@@ -1,4 +1,8 @@
1
1
  "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
2
6
  var __assign = (this && this.__assign) || function () {
3
7
  __assign = Object.assign || function(t) {
4
8
  for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -62,10 +66,12 @@ exports.Icon = void 0;
62
66
  var react_1 = __importStar(require("react"));
63
67
  var antd_1 = require("antd");
64
68
  var lodash_es_1 = require("lodash-es");
65
- var classnames_1 = __importDefault(require("classnames"));
69
+ // import classNames from 'classnames'
66
70
  var ahooks_1 = require("ahooks");
67
71
  var IconFont_1 = __importDefault(require("../IconFont"));
68
- var index_module_less_1 = __importDefault(require("./index.module.less"));
72
+ // import styles from './index.module.less'
73
+ var styled_1 = __importDefault(require("@emotion/styled"));
74
+ var StyledButton = (0, styled_1.default)(antd_1.Button)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin-right: 5px;\n font-size: 16px;\n color: var(--color-primary);\n background-color: transparent;\n border: none;\n box-shadow: initial;\n transition: background-color 0.2s;\n\n &[disabled], &[aria-disabled='true'] {\n color: #9da2a6 !important;\n cursor: not-allowed;\n background-color: transparent;\n }\n\n &:hover, &:active, &:focus {\n background: #F4F0F5;\n }\n\n span {\n font-size: 16px;\n }\n"], ["\n margin-right: 5px;\n font-size: 16px;\n color: var(--color-primary);\n background-color: transparent;\n border: none;\n box-shadow: initial;\n transition: background-color 0.2s;\n\n &[disabled], &[aria-disabled='true'] {\n color: #9da2a6 !important;\n cursor: not-allowed;\n background-color: transparent;\n }\n\n &:hover, &:active, &:focus {\n background: #F4F0F5;\n }\n\n span {\n font-size: 16px;\n }\n"])));
69
75
  var Icon = function (props, buttonRef) {
70
76
  var ref = (0, react_1.useRef)(null);
71
77
  var Icon = props.icon, _a = props.tooltipDisabled, tooltipDisabled = _a === void 0 ? false : _a, _b = props.onClick, onClick = _b === void 0 ? lodash_es_1.noop : _b, disabled = props.disabled, _c = props.size, size = _c === void 0 ? 'middle' : _c, _d = props.style, style = _d === void 0 ? {} : _d, className = props.className, _e = props.loading, loading = _e === void 0 ? false : _e, attrs = __rest(props, ["icon", "tooltipDisabled", "onClick", "disabled", "size", "style", "className", "loading"]);
@@ -78,7 +84,7 @@ var Icon = function (props, buttonRef) {
78
84
  return Icon;
79
85
  }
80
86
  };
81
- var children = (react_1.default.createElement(antd_1.Button, { onClick: onClick, size: size, disabled: disabled, style: style, ref: buttonRef, loading: loading, className: (0, classnames_1.default)([className, index_module_less_1.default.btn_icon__warp]), icon: createIcon() }));
87
+ var children = (react_1.default.createElement(StyledButton, { onClick: onClick, size: size, disabled: disabled, style: style, ref: buttonRef, loading: loading, className: className, icon: createIcon() }));
82
88
  if (!Icon) {
83
89
  throw new Error('IconButton 组件必须传入 icon 属性');
84
90
  }
@@ -89,3 +95,4 @@ var Icon = function (props, buttonRef) {
89
95
  };
90
96
  exports.Icon = Icon;
91
97
  exports.default = react_1.default.forwardRef(exports.Icon);
98
+ var templateObject_1;
package/build/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "xmirror-components",
3
- "version": "1.0.18",
3
+ "version": "1.0.20",
4
4
  "type": "module",
5
5
  "main": "build/lib/index.js",
6
6
  "module": "build/es/index.js",
@@ -28,6 +28,8 @@
28
28
  },
29
29
  "dependencies": {
30
30
  "@ant-design/icons": "^5.6.1",
31
+ "@emotion/react": "^11.14.0",
32
+ "@emotion/styled": "^11.14.1",
31
33
  "ahooks": "^3.8.5",
32
34
  "lodash-es": "^4.17.21",
33
35
  "react-intl": "^7.1.11",
@@ -48,10 +50,10 @@
48
50
  "less": "^4.3.0",
49
51
  "react": "^19.0.0",
50
52
  "react-dom": "^19.0.0",
53
+ "rollup-plugin-postcss": "^4.0.2",
51
54
  "typescript": "~5.7.2",
52
55
  "typescript-eslint": "^8.24.1",
53
56
  "vite": "^6.2.0",
54
- "vite-plugin-css-injected-by-js": "^3.5.2",
55
57
  "vite-plugin-dts": "^4.5.3"
56
58
  },
57
59
  "keywords": [
package/build/types/components/GlobalLoading/index.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import React from 'react';
2
- import './index.less';
3
2
  declare let setGlobalLoading: (_value: boolean) => void;
4
3
  declare function GlobalLoading(): React.JSX.Element;
5
4
  export { setGlobalLoading };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "xmirror-components",
3
- "version": "1.0.18",
3
+ "version": "1.0.20",
4
4
  "type": "module",
5
5
  "main": "build/lib/index.js",
6
6
  "module": "build/es/index.js",
@@ -28,6 +28,8 @@
28
28
  },
29
29
  "dependencies": {
30
30
  "@ant-design/icons": "^5.6.1",
31
+ "@emotion/react": "^11.14.0",
32
+ "@emotion/styled": "^11.14.1",
31
33
  "ahooks": "^3.8.5",
32
34
  "lodash-es": "^4.17.21",
33
35
  "react-intl": "^7.1.11",
@@ -48,10 +50,10 @@
48
50
  "less": "^4.3.0",
49
51
  "react": "^19.0.0",
50
52
  "react-dom": "^19.0.0",
53
+ "rollup-plugin-postcss": "^4.0.2",
51
54
  "typescript": "~5.7.2",
52
55
  "typescript-eslint": "^8.24.1",
53
56
  "vite": "^6.2.0",
54
- "vite-plugin-css-injected-by-js": "^3.5.2",
55
57
  "vite-plugin-dts": "^4.5.3"
56
58
  },
57
59
  "keywords": [