xmirror-components 1.0.17 → 1.0.19

package/build/es/components/GlobalLoading/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './index.less';
 declare let setGlobalLoading: (_value: boolean) => void;
 declare function GlobalLoading(): React.JSX.Element;
 export { setGlobalLoading };

package/build/es/components/GlobalLoading/index.js

@@ -1,9 +1,21 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React, { useState, useEffect, useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
-import './index.less';
+import styled from '@emotion/styled';
+import { keyframes } from '@emotion/react';
 var setGlobalLoading = function (_value) {
     console.warn('GlobalLoading 未被引入，你可以直接使用 App 组件，或直接引用 GlobalLoading 组件到项目中！');
 };
+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"])));
+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"])));
+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"])));
+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) {
+    var delay = _a.delay;
+    return delay;
+});
 function GlobalLoading() {
     var ref = useRef(null);
     var _a = useState(false), loading = _a[0], setLoading = _a[1];
@@ -13,13 +25,13 @@ function GlobalLoading() {
         };
     }, []);
     return (React.createElement(CSSTransition, { in: loading, nodeRef: ref, timeout: 500, classNames: "global-loading-transition", unmountOnExit: true }, function () {
-        return (React.createElement("div", { ref: ref, className: "global-loading" },
-            React.createElement("div", { className: "global-loading-container" },
-                React.createElement("div", { className: "dot dot-1" }),
-                React.createElement("div", { className: "dot dot-2" }),
-                React.createElement("div", { className: "dot dot-3" }),
-                React.createElement("div", { className: "dot dot-4" }),
-                React.createElement("div", { className: "dot dot-5" })),
+        return (React.createElement(GlobalLoadingWrapper, { ref: ref },
+            React.createElement(LoadingContainer, null,
+                React.createElement(Dot, { delay: 0 }),
+                React.createElement(Dot, { delay: 0.2 }),
+                React.createElement(Dot, { delay: 0.4 }),
+                React.createElement(Dot, { delay: 0.6 }),
+                React.createElement(Dot, { delay: 0.8 })),
             React.createElement("svg", { style: {
                     visibility: 'hidden',
                     position: 'absolute'
@@ -33,3 +45,4 @@ function GlobalLoading() {
 }
 export { setGlobalLoading };
 export default GlobalLoading;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/build/es/components/IconButton/index.js

@@ -1,3 +1,7 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -23,10 +27,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { Fragment, useRef } from 'react';
 import { Tooltip, Button } from 'antd';
 import { noop, isString } from 'lodash-es';
-import classNames from 'classnames';
+// import classNames from 'classnames'
 import { useHover } from 'ahooks';
 import IconFont from '../IconFont';
-import styles from './index.module.less';
+// import styles from './index.module.less'
+import styled from '@emotion/styled';
+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"])));
 export var Icon = function (props, buttonRef) {
     var ref = useRef(null);
     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) {
             return Icon;
         }
     };
-    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() }));
+    var children = (React.createElement(StyledButton, { onClick: onClick, size: size, disabled: disabled, style: style, ref: buttonRef, loading: loading, className: className, icon: createIcon() }));
     if (!Icon) {
         throw new Error('IconButton 组件必须传入 icon 属性');
     }
@@ -49,3 +55,4 @@ export var Icon = function (props, buttonRef) {
             React.createElement("span", { ref: ref, style: { display: 'inline-block' }, className: "icon-button-box" }, children)))));
 };
 export default React.forwardRef(Icon);
+var templateObject_1;

package/build/es/index.d.ts

@@ -2,5 +2,4 @@ export { default as App, message, notification, modal } from './components/AntdA
 export { default as IconFont } from './components/IconFont';
 export { default as CheckboxValue } from './components/CheckboxValue';
 export { default as SwitchValue } from './components/SwitchValue';
-export { default as IconButton } from './components/IconButton';
 export { default as useRequest } from './hooks/useRequest';

package/build/es/index.js

@@ -2,5 +2,6 @@ export { default as App, message, notification, modal } from './components/AntdA
 export { default as IconFont } from './components/IconFont';
 export { default as CheckboxValue } from './components/CheckboxValue';
 export { default as SwitchValue } from './components/SwitchValue';
-export { default as IconButton } from './components/IconButton';
+// export { default as IconButton } from './components/IconButton'; 
+// export { default as GlobalLoading, setGlobalLoading } from './components/GlobalLoading'; 
 export { default as useRequest } from './hooks/useRequest';

package/build/lib/components/GlobalLoading/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './index.less';
 declare let setGlobalLoading: (_value: boolean) => void;
 declare function GlobalLoading(): React.JSX.Element;
 export { setGlobalLoading };

package/build/lib/components/GlobalLoading/index.js

@@ -1,4 +1,8 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -32,15 +36,26 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setGlobalLoading = void 0;
 var react_1 = __importStar(require("react"));
 var react_transition_group_1 = require("react-transition-group");
-require("./index.less");
+var styled_1 = __importDefault(require("@emotion/styled"));
+var react_2 = require("@emotion/react");
 var setGlobalLoading = function (_value) {
     console.warn('GlobalLoading 未被引入，你可以直接使用 App 组件，或直接引用 GlobalLoading 组件到项目中！');
 };
 exports.setGlobalLoading = setGlobalLoading;
+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"])));
+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"])));
+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"])));
+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) {
+    var delay = _a.delay;
+    return delay;
+});
 function GlobalLoading() {
     var ref = (0, react_1.useRef)(null);
     var _a = (0, react_1.useState)(false), loading = _a[0], setLoading = _a[1];
@@ -50,13 +65,13 @@ function GlobalLoading() {
         };
     }, []);
     return (react_1.default.createElement(react_transition_group_1.CSSTransition, { in: loading, nodeRef: ref, timeout: 500, classNames: "global-loading-transition", unmountOnExit: true }, function () {
-        return (react_1.default.createElement("div", { ref: ref, className: "global-loading" },
-            react_1.default.createElement("div", { className: "global-loading-container" },
-                react_1.default.createElement("div", { className: "dot dot-1" }),
-                react_1.default.createElement("div", { className: "dot dot-2" }),
-                react_1.default.createElement("div", { className: "dot dot-3" }),
-                react_1.default.createElement("div", { className: "dot dot-4" }),
-                react_1.default.createElement("div", { className: "dot dot-5" })),
+        return (react_1.default.createElement(GlobalLoadingWrapper, { ref: ref },
+            react_1.default.createElement(LoadingContainer, null,
+                react_1.default.createElement(Dot, { delay: 0 }),
+                react_1.default.createElement(Dot, { delay: 0.2 }),
+                react_1.default.createElement(Dot, { delay: 0.4 }),
+                react_1.default.createElement(Dot, { delay: 0.6 }),
+                react_1.default.createElement(Dot, { delay: 0.8 })),
             react_1.default.createElement("svg", { style: {
                     visibility: 'hidden',
                     position: 'absolute'
@@ -69,3 +84,4 @@ function GlobalLoading() {
     }));
 }
 exports.default = GlobalLoading;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/build/lib/components/IconButton/index.js

@@ -1,4 +1,8 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -62,10 +66,12 @@ exports.Icon = void 0;
 var react_1 = __importStar(require("react"));
 var antd_1 = require("antd");
 var lodash_es_1 = require("lodash-es");
-var classnames_1 = __importDefault(require("classnames"));
+// import classNames from 'classnames'
 var ahooks_1 = require("ahooks");
 var IconFont_1 = __importDefault(require("../IconFont"));
-var index_module_less_1 = __importDefault(require("./index.module.less"));
+// import styles from './index.module.less'
+var styled_1 = __importDefault(require("@emotion/styled"));
+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"])));
 var Icon = function (props, buttonRef) {
     var ref = (0, react_1.useRef)(null);
     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) {
             return Icon;
         }
     };
-    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() }));
+    var children = (react_1.default.createElement(StyledButton, { onClick: onClick, size: size, disabled: disabled, style: style, ref: buttonRef, loading: loading, className: className, icon: createIcon() }));
     if (!Icon) {
         throw new Error('IconButton 组件必须传入 icon 属性');
     }
@@ -89,3 +95,4 @@ var Icon = function (props, buttonRef) {
 };
 exports.Icon = Icon;
 exports.default = react_1.default.forwardRef(exports.Icon);
+var templateObject_1;

package/build/lib/index.d.ts

@@ -51,47 +51,6 @@ declare interface CheckboxValueProps<T = any, F = any> extends Omit<React_2.Comp
     children?: React_2.ReactNode;
 }
 
-export declare const IconButton: React_2.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React_2.RefAttributes<any>>;
-
-declare interface IconButtonProps {
-    /**
-     * 图标
-     */
-    icon?: React_2.ReactNode | string;
-    /**
-     * 是否禁用 tooltip
-     */
-    tooltipDisabled?: boolean;
-    /**
-     * 点击事件
-     */
-    onClick?: (e: React_2.MouseEvent<HTMLElement>) => void;
-    /**
-     * 是否禁用
-     */
-    disabled?: boolean;
-    /**
-     * 大小
-     */
-    size?: 'small' | 'middle' | 'large';
-    /**
-     * 样式
-     */
-    style?: React_2.CSSProperties;
-    /**
-     * 类名
-     */
-    className?: string;
-    /**
-     * 是否加载中
-     */
-    loading?: boolean;
-    /**
-     * 其他属性
-     */
-    [key: string]: any;
-}
-
 export declare const IconFont: React_2.ForwardRefExoticComponent<((IconFontCommonProps & React_2.HTMLAttributes<HTMLElement> & {
     symbol?: false;
 }) | Omit<IconFontCommonProps & React_2.SVGProps<SVGSVGElement> & {

package/build/lib/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useRequest = exports.IconButton = exports.SwitchValue = exports.CheckboxValue = exports.IconFont = exports.modal = exports.notification = exports.message = exports.App = void 0;
+exports.useRequest = exports.SwitchValue = exports.CheckboxValue = exports.IconFont = exports.modal = exports.notification = exports.message = exports.App = void 0;
 var AntdApp_1 = require("./components/AntdApp");
 Object.defineProperty(exports, "App", { enumerable: true, get: function () { return __importDefault(AntdApp_1).default; } });
 Object.defineProperty(exports, "message", { enumerable: true, get: function () { return AntdApp_1.message; } });
@@ -15,7 +15,7 @@ var CheckboxValue_1 = require("./components/CheckboxValue");
 Object.defineProperty(exports, "CheckboxValue", { enumerable: true, get: function () { return __importDefault(CheckboxValue_1).default; } });
 var SwitchValue_1 = require("./components/SwitchValue");
 Object.defineProperty(exports, "SwitchValue", { enumerable: true, get: function () { return __importDefault(SwitchValue_1).default; } });
-var IconButton_1 = require("./components/IconButton");
-Object.defineProperty(exports, "IconButton", { enumerable: true, get: function () { return __importDefault(IconButton_1).default; } });
+// export { default as IconButton } from './components/IconButton'; 
+// export { default as GlobalLoading, setGlobalLoading } from './components/GlobalLoading'; 
 var useRequest_1 = require("./hooks/useRequest");
 Object.defineProperty(exports, "useRequest", { enumerable: true, get: function () { return __importDefault(useRequest_1).default; } });

package/build/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xmirror-components",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "type": "module",
   "main": "build/lib/index.js",
   "module": "build/es/index.js",
@@ -19,7 +19,8 @@
     "lint": "eslint .",
     "preview": "vite preview",
     "prepublishOnly": "npm run build",
-    "publish:npm": "npm publish --access public"
+    "publish:npm": "npm publish --access public",
+    "build:component-css": "node scripts/build-component-css.cjs"
   },
   "peerDependencies": {
     "antd": ">=5.0.0",
@@ -28,6 +29,8 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.6.1",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "ahooks": "^3.8.5",
     "lodash-es": "^4.17.21",
     "react-intl": "^7.1.11",
@@ -48,10 +51,10 @@
     "less": "^4.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "rollup-plugin-postcss": "^4.0.2",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.24.1",
     "vite": "^6.2.0",
-    "vite-plugin-css-injected-by-js": "^3.5.2",
     "vite-plugin-dts": "^4.5.3"
   },
   "keywords": [

package/build/types/components/GlobalLoading/index.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './index.less';
 declare let setGlobalLoading: (_value: boolean) => void;
 declare function GlobalLoading(): React.JSX.Element;
 export { setGlobalLoading };

package/build/types/index.d.ts

@@ -2,5 +2,4 @@ export { default as App, message, notification, modal } from './components/AntdA
 export { default as IconFont } from './components/IconFont';
 export { default as CheckboxValue } from './components/CheckboxValue';
 export { default as SwitchValue } from './components/SwitchValue';
-export { default as IconButton } from './components/IconButton';
 export { default as useRequest } from './hooks/useRequest';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xmirror-components",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "type": "module",
   "main": "build/lib/index.js",
   "module": "build/es/index.js",
@@ -19,7 +19,8 @@
     "lint": "eslint .",
     "preview": "vite preview",
     "prepublishOnly": "npm run build",
-    "publish:npm": "npm publish --access public"
+    "publish:npm": "npm publish --access public",
+    "build:component-css": "node scripts/build-component-css.cjs"
   },
   "peerDependencies": {
     "antd": ">=5.0.0",
@@ -28,6 +29,8 @@
   },
   "dependencies": {
     "@ant-design/icons": "^5.6.1",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "ahooks": "^3.8.5",
     "lodash-es": "^4.17.21",
     "react-intl": "^7.1.11",
@@ -48,10 +51,10 @@
     "less": "^4.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "rollup-plugin-postcss": "^4.0.2",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.24.1",
     "vite": "^6.2.0",
-    "vite-plugin-css-injected-by-js": "^3.5.2",
     "vite-plugin-dts": "^4.5.3"
   },
   "keywords": [