xmirror-components 1.0.19 → 1.0.21

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 +73 -34
  2. package/build/dist/index.mjs +1995 -1753
  3. package/build/es/components/GlobalLoading/index.js +26 -16
  4. package/build/es/index.d.ts +2 -0
  5. package/build/es/index.js +2 -2
  6. package/build/lib/components/GlobalLoading/index.js +26 -16
  7. package/build/lib/index.d.ts +45 -0
  8. package/build/lib/index.js +6 -3
  9. package/build/package.json +2 -3
  10. package/build/types/index.d.ts +2 -0
  11. package/package.json +2 -3
package/build/es/components/GlobalLoading/index.js CHANGED
@@ -9,29 +9,39 @@ import { keyframes } from '@emotion/react';
9
9
  var setGlobalLoading = function (_value) {
10
10
  console.warn('GlobalLoading 未被引入，你可以直接使用 App 组件，或直接引用 GlobalLoading 组件到项目中！');
11
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;
12
+ var rotate = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0% { transform: rotate(0deg) translateX(30px) rotate(0deg); }\n 50% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }\n 100% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }\n"], ["\n 0% { transform: rotate(0deg) translateX(30px) rotate(0deg); }\n 50% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }\n 100% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }\n"])));
13
+ var GlobalLoadingWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n z-index: 999999;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.3);\n opacity: 1;\n transition: opacity 500ms;\n &.global-loading-transition-enter {\n opacity: 0;\n }\n &.global-loading-transition-enter-active {\n opacity: 1;\n }\n &.global-loading-transition-exit {\n opacity: 1;\n }\n &.global-loading-transition-exit-active {\n opacity: 0;\n }\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n z-index: 999999;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.3);\n opacity: 1;\n transition: opacity 500ms;\n &.global-loading-transition-enter {\n opacity: 0;\n }\n &.global-loading-transition-enter-active {\n opacity: 1;\n }\n &.global-loading-transition-exit {\n opacity: 1;\n }\n &.global-loading-transition-exit-active {\n opacity: 0;\n }\n"])));
14
+ var LoadingContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n position: relative;\n filter: url('#goo');\n margin: 400px auto;\n transform: rotateZ(-90deg);\n display: flex;\n justify-content: center;\n align-items: center;\n"], ["\n width: 120px;\n height: 120px;\n position: relative;\n filter: url('#goo');\n margin: 400px auto;\n transform: rotateZ(-90deg);\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
15
+ var Dot = styled.div(function (_a) {
16
+ var size = _a.size, delay = _a.delay;
17
+ return ({
18
+ position: 'absolute',
19
+ margin: 'auto',
20
+ borderRadius: '50%',
21
+ backgroundImage: ' linear-gradient(var(--color-primary) 10%, var(--color-primary-hover) 100%)',
22
+ transform: 'rotate(0deg) translateX(30px) rotate(0deg)',
23
+ width: size,
24
+ height: size,
25
+ animation: "".concat(rotate, " 4s ease-in-out infinite"),
26
+ animationDelay: delay || '0s',
27
+ });
18
28
  });
19
29
  function GlobalLoading() {
20
30
  var ref = useRef(null);
21
- var _a = useState(false), loading = _a[0], setLoading = _a[1];
31
+ var _a = useState(true), loading = _a[0], setLoading = _a[1];
22
32
  useEffect(function () {
23
33
  setGlobalLoading = function (value) {
24
34
  setLoading(value);
25
35
  };
26
36
  }, []);
27
37
  return (React.createElement(CSSTransition, { in: loading, nodeRef: ref, timeout: 500, classNames: "global-loading-transition", unmountOnExit: true }, function () {
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 })),
38
+ return (React.createElement(GlobalLoadingWrapper, { ref: ref, className: "global-loading" },
39
+ React.createElement(LoadingContainer, { className: "global-loading-container" },
40
+ React.createElement(Dot, { className: "dot dot-1", size: 15, delay: "0.0s" }),
41
+ React.createElement(Dot, { className: "dot dot-2", size: 13, delay: "0.2s" }),
42
+ React.createElement(Dot, { className: "dot dot-3", size: 11, delay: "0.4s" }),
43
+ React.createElement(Dot, { className: "dot dot-4", size: 9, delay: "0.6s" }),
44
+ React.createElement(Dot, { className: "dot dot-5", size: 7, delay: "0.8s" })),
35
45
  React.createElement("svg", { style: {
36
46
  visibility: 'hidden',
37
47
  position: 'absolute'
@@ -39,10 +49,10 @@ function GlobalLoading() {
39
49
  React.createElement("defs", null,
40
50
  React.createElement("filter", { id: "goo" },
41
51
  React.createElement("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "3", result: "blur" }),
42
- React.createElement("feColorMatrix", { in: "blur", type: "matrix", values: "\n 1 0 0 0 0\n 0 1 0 0 0\n 0 0 1 0 0\n 0 0 0 18 -2" }),
52
+ React.createElement("feColorMatrix", { in: "blur", type: "matrix", values: "\n 1 0 0 0 0\n 0 1 0 0 0\n 0 0 1 0 0\n 0 0 0 18 -6" }),
43
53
  React.createElement("feComposite", { in: "SourceGraphic", in2: "goo", operator: "atop" }))))));
44
54
  }));
45
55
  }
46
56
  export { setGlobalLoading };
47
57
  export default GlobalLoading;
48
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
58
+ var templateObject_1, templateObject_2, templateObject_3;
package/build/es/index.d.ts CHANGED
@@ -2,4 +2,6 @@ export { default as App, message, notification, modal } from './components/AntdA
2
2
  export { default as IconFont } from './components/IconFont';
3
3
  export { default as CheckboxValue } from './components/CheckboxValue';
4
4
  export { default as SwitchValue } from './components/SwitchValue';
5
+ export { default as IconButton } from './components/IconButton';
6
+ export { default as GlobalLoading, setGlobalLoading } from './components/GlobalLoading';
5
7
  export { default as useRequest } from './hooks/useRequest';
package/build/es/index.js CHANGED
@@ -2,6 +2,6 @@ export { default as App, message, notification, modal } from './components/AntdA
2
2
  export { default as IconFont } from './components/IconFont';
3
3
  export { default as CheckboxValue } from './components/CheckboxValue';
4
4
  export { default as SwitchValue } from './components/SwitchValue';
5
- // export { default as IconButton } from './components/IconButton';
6
- // export { default as GlobalLoading, setGlobalLoading } from './components/GlobalLoading';
5
+ export { default as IconButton } from './components/IconButton';
6
+ export { default as GlobalLoading, setGlobalLoading } from './components/GlobalLoading';
7
7
  export { default as useRequest } from './hooks/useRequest';
package/build/lib/components/GlobalLoading/index.js CHANGED
@@ -49,29 +49,39 @@ var setGlobalLoading = function (_value) {
49
49
  console.warn('GlobalLoading 未被引入，你可以直接使用 App 组件，或直接引用 GlobalLoading 组件到项目中！');
50
50
  };
51
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;
52
+ var rotate = (0, react_2.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0% { transform: rotate(0deg) translateX(30px) rotate(0deg); }\n 50% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }\n 100% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }\n"], ["\n 0% { transform: rotate(0deg) translateX(30px) rotate(0deg); }\n 50% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }\n 100% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }\n"])));
53
+ var GlobalLoadingWrapper = styled_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: fixed;\n top: 0;\n left: 0;\n z-index: 999999;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.3);\n opacity: 1;\n transition: opacity 500ms;\n &.global-loading-transition-enter {\n opacity: 0;\n }\n &.global-loading-transition-enter-active {\n opacity: 1;\n }\n &.global-loading-transition-exit {\n opacity: 1;\n }\n &.global-loading-transition-exit-active {\n opacity: 0;\n }\n"], ["\n position: fixed;\n top: 0;\n left: 0;\n z-index: 999999;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.3);\n opacity: 1;\n transition: opacity 500ms;\n &.global-loading-transition-enter {\n opacity: 0;\n }\n &.global-loading-transition-enter-active {\n opacity: 1;\n }\n &.global-loading-transition-exit {\n opacity: 1;\n }\n &.global-loading-transition-exit-active {\n opacity: 0;\n }\n"])));
54
+ var LoadingContainer = styled_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 120px;\n height: 120px;\n position: relative;\n filter: url('#goo');\n margin: 400px auto;\n transform: rotateZ(-90deg);\n display: flex;\n justify-content: center;\n align-items: center;\n"], ["\n width: 120px;\n height: 120px;\n position: relative;\n filter: url('#goo');\n margin: 400px auto;\n transform: rotateZ(-90deg);\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
55
+ var Dot = styled_1.default.div(function (_a) {
56
+ var size = _a.size, delay = _a.delay;
57
+ return ({
58
+ position: 'absolute',
59
+ margin: 'auto',
60
+ borderRadius: '50%',
61
+ backgroundImage: ' linear-gradient(var(--color-primary) 10%, var(--color-primary-hover) 100%)',
62
+ transform: 'rotate(0deg) translateX(30px) rotate(0deg)',
63
+ width: size,
64
+ height: size,
65
+ animation: "".concat(rotate, " 4s ease-in-out infinite"),
66
+ animationDelay: delay || '0s',
67
+ });
58
68
  });
59
69
  function GlobalLoading() {
60
70
  var ref = (0, react_1.useRef)(null);
61
- var _a = (0, react_1.useState)(false), loading = _a[0], setLoading = _a[1];
71
+ var _a = (0, react_1.useState)(true), loading = _a[0], setLoading = _a[1];
62
72
  (0, react_1.useEffect)(function () {
63
73
  exports.setGlobalLoading = setGlobalLoading = function (value) {
64
74
  setLoading(value);
65
75
  };
66
76
  }, []);
67
77
  return (react_1.default.createElement(react_transition_group_1.CSSTransition, { in: loading, nodeRef: ref, timeout: 500, classNames: "global-loading-transition", unmountOnExit: true }, function () {
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 })),
78
+ return (react_1.default.createElement(GlobalLoadingWrapper, { ref: ref, className: "global-loading" },
79
+ react_1.default.createElement(LoadingContainer, { className: "global-loading-container" },
80
+ react_1.default.createElement(Dot, { className: "dot dot-1", size: 15, delay: "0.0s" }),
81
+ react_1.default.createElement(Dot, { className: "dot dot-2", size: 13, delay: "0.2s" }),
82
+ react_1.default.createElement(Dot, { className: "dot dot-3", size: 11, delay: "0.4s" }),
83
+ react_1.default.createElement(Dot, { className: "dot dot-4", size: 9, delay: "0.6s" }),
84
+ react_1.default.createElement(Dot, { className: "dot dot-5", size: 7, delay: "0.8s" })),
75
85
  react_1.default.createElement("svg", { style: {
76
86
  visibility: 'hidden',
77
87
  position: 'absolute'
@@ -79,9 +89,9 @@ function GlobalLoading() {
79
89
  react_1.default.createElement("defs", null,
80
90
  react_1.default.createElement("filter", { id: "goo" },
81
91
  react_1.default.createElement("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "3", result: "blur" }),
82
- react_1.default.createElement("feColorMatrix", { in: "blur", type: "matrix", values: "\n 1 0 0 0 0\n 0 1 0 0 0\n 0 0 1 0 0\n 0 0 0 18 -2" }),
92
+ react_1.default.createElement("feColorMatrix", { in: "blur", type: "matrix", values: "\n 1 0 0 0 0\n 0 1 0 0 0\n 0 0 1 0 0\n 0 0 0 18 -6" }),
83
93
  react_1.default.createElement("feComposite", { in: "SourceGraphic", in2: "goo", operator: "atop" }))))));
84
94
  }));
85
95
  }
86
96
  exports.default = GlobalLoading;
87
- var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
97
+ var templateObject_1, templateObject_2, templateObject_3;
package/build/lib/index.d.ts CHANGED
@@ -51,6 +51,49 @@ declare interface CheckboxValueProps<T = any, F = any> extends Omit<React_2.Comp
51
51
  children?: React_2.ReactNode;
52
52
  }
53
53
 
54
+ export declare function GlobalLoading(): React_2.JSX.Element;
55
+
56
+ export declare const IconButton: React_2.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React_2.RefAttributes<any>>;
57
+
58
+ declare interface IconButtonProps {
59
+ /**
60
+ * 图标
61
+ */
62
+ icon?: React_2.ReactNode | string;
63
+ /**
64
+ * 是否禁用 tooltip
65
+ */
66
+ tooltipDisabled?: boolean;
67
+ /**
68
+ * 点击事件
69
+ */
70
+ onClick?: (e: React_2.MouseEvent<HTMLElement>) => void;
71
+ /**
72
+ * 是否禁用
73
+ */
74
+ disabled?: boolean;
75
+ /**
76
+ * 大小
77
+ */
78
+ size?: 'small' | 'middle' | 'large';
79
+ /**
80
+ * 样式
81
+ */
82
+ style?: React_2.CSSProperties;
83
+ /**
84
+ * 类名
85
+ */
86
+ className?: string;
87
+ /**
88
+ * 是否加载中
89
+ */
90
+ loading?: boolean;
91
+ /**
92
+ * 其他属性
93
+ */
94
+ [key: string]: any;
95
+ }
96
+
54
97
  export declare const IconFont: React_2.ForwardRefExoticComponent<((IconFontCommonProps & React_2.HTMLAttributes<HTMLElement> & {
55
98
  symbol?: false;
56
99
  }) | Omit<IconFontCommonProps & React_2.SVGProps<SVGSVGElement> & {
@@ -86,6 +129,8 @@ declare interface Options<TData, TParams extends unknown[]> extends Options_2<TD
86
129
  errorMessage?: boolean;
87
130
  }
88
131
 
132
+ export declare let setGlobalLoading: (_value: boolean) => void;
133
+
89
134
  /**
90
135
  * Switch 可自定义 value
91
136
  */
package/build/lib/index.js CHANGED
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.useRequest = exports.SwitchValue = exports.CheckboxValue = exports.IconFont = exports.modal = exports.notification = exports.message = exports.App = void 0;
6
+ exports.useRequest = exports.setGlobalLoading = exports.GlobalLoading = exports.IconButton = exports.SwitchValue = exports.CheckboxValue = exports.IconFont = exports.modal = exports.notification = exports.message = exports.App = void 0;
7
7
  var AntdApp_1 = require("./components/AntdApp");
8
8
  Object.defineProperty(exports, "App", { enumerable: true, get: function () { return __importDefault(AntdApp_1).default; } });
9
9
  Object.defineProperty(exports, "message", { enumerable: true, get: function () { return AntdApp_1.message; } });
@@ -15,7 +15,10 @@ var CheckboxValue_1 = require("./components/CheckboxValue");
15
15
  Object.defineProperty(exports, "CheckboxValue", { enumerable: true, get: function () { return __importDefault(CheckboxValue_1).default; } });
16
16
  var SwitchValue_1 = require("./components/SwitchValue");
17
17
  Object.defineProperty(exports, "SwitchValue", { enumerable: true, get: function () { return __importDefault(SwitchValue_1).default; } });
18
- // export { default as IconButton } from './components/IconButton';
19
- // export { default as GlobalLoading, setGlobalLoading } from './components/GlobalLoading';
18
+ var IconButton_1 = require("./components/IconButton");
19
+ Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return __importDefault(IconButton_1).default; } });
20
+ var GlobalLoading_1 = require("./components/GlobalLoading");
21
+ Object.defineProperty(exports, "GlobalLoading", { enumerable: true, get: function () { return __importDefault(GlobalLoading_1).default; } });
22
+ Object.defineProperty(exports, "setGlobalLoading", { enumerable: true, get: function () { return GlobalLoading_1.setGlobalLoading; } });
20
23
  var useRequest_1 = require("./hooks/useRequest");
21
24
  Object.defineProperty(exports, "useRequest", { enumerable: true, get: function () { return __importDefault(useRequest_1).default; } });
package/build/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "xmirror-components",
3
- "version": "1.0.19",
3
+ "version": "1.0.21",
4
4
  "type": "module",
5
5
  "main": "build/lib/index.js",
6
6
  "module": "build/es/index.js",
@@ -19,8 +19,7 @@
19
19
  "lint": "eslint .",
20
20
  "preview": "vite preview",
21
21
  "prepublishOnly": "npm run build",
22
- "publish:npm": "npm publish --access public",
23
- "build:component-css": "node scripts/build-component-css.cjs"
22
+ "publish:npm": "npm publish --access public"
24
23
  },
25
24
  "peerDependencies": {
26
25
  "antd": ">=5.0.0",
package/build/types/index.d.ts CHANGED
@@ -2,4 +2,6 @@ export { default as App, message, notification, modal } from './components/AntdA
2
2
  export { default as IconFont } from './components/IconFont';
3
3
  export { default as CheckboxValue } from './components/CheckboxValue';
4
4
  export { default as SwitchValue } from './components/SwitchValue';
5
+ export { default as IconButton } from './components/IconButton';
6
+ export { default as GlobalLoading, setGlobalLoading } from './components/GlobalLoading';
5
7
  export { default as useRequest } from './hooks/useRequest';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "xmirror-components",
3
- "version": "1.0.19",
3
+ "version": "1.0.21",
4
4
  "type": "module",
5
5
  "main": "build/lib/index.js",
6
6
  "module": "build/es/index.js",
@@ -19,8 +19,7 @@
19
19
  "lint": "eslint .",
20
20
  "preview": "vite preview",
21
21
  "prepublishOnly": "npm run build",
22
- "publish:npm": "npm publish --access public",
23
- "build:component-css": "node scripts/build-component-css.cjs"
22
+ "publish:npm": "npm publish --access public"
24
23
  },
25
24
  "peerDependencies": {
26
25
  "antd": ">=5.0.0",