@qsxy/element-plus-react 1.0.0-next.7 → 1.0.0-next.8

package/dist/Avatar/Avatar.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { AvatarProps } from './typings';
+declare const Avatar: FC<AvatarProps>;
+export default Avatar;

package/dist/Avatar/Avatar.js

@@ -0,0 +1,86 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Avatar/Avatar.tsx
+var Avatar_exports = {};
+__export(Avatar_exports, {
+  default: () => Avatar_default
+});
+module.exports = __toCommonJS(Avatar_exports);
+var import_classnames = __toESM(require("classnames"));
+var import_react = __toESM(require("react"));
+var import_Icon = __toESM(require("../Icon/Icon"));
+var import_base = require("../Util/base");
+var import_hooks = require("../hooks");
+var Avatar = (0, import_react.memo)((props) => {
+  const { icon, size = "default", shape = "circle", src, srcSet, alt, fit = "cover", classPrefix = "avatar", onError } = props;
+  const { b, m, cssVarBlock } = (0, import_hooks.useClassNames)(classPrefix);
+  const [hasLoadError, setHasLoadError] = (0, import_react.useState)(false);
+  const handleError = (e) => {
+    setHasLoadError(true);
+    onError(e);
+  };
+  (0, import_react.useEffect)(() => {
+    if ((0, import_base.isNotEmpty)(src)) {
+      setHasLoadError(false);
+    }
+  }, [src]);
+  const avatarClass = (0, import_react.useMemo)(() => {
+    const classList = [b()];
+    if ((0, import_base.isString)(size)) {
+      classList.push(m(size));
+    }
+    if (icon) {
+      classList.push(m("icon"));
+    }
+    if (shape) {
+      classList.push(m(shape));
+    }
+    return (0, import_classnames.default)(classList);
+  }, [b, icon, m, shape, size]);
+  const sizeStyle = (0, import_react.useMemo)(() => {
+    return (0, import_base.isNumber)(size) ? cssVarBlock({
+      size: (0, import_base.addUnit)(size) || ""
+    }) : void 0;
+  }, [cssVarBlock, size]);
+  const children = (0, import_react.useMemo)(() => icon ? /* @__PURE__ */ import_react.default.createElement(import_Icon.default, { name: icon }) : props.children, [icon, props.children]);
+  return /* @__PURE__ */ import_react.default.createElement("span", { className: avatarClass, style: sizeStyle }, (src || srcSet) && !hasLoadError ? /* @__PURE__ */ import_react.default.createElement(
+    "img",
+    {
+      src,
+      alt,
+      srcSet,
+      style: {
+        objectFit: fit
+      },
+      onError: handleError
+    }
+  ) : children);
+});
+Avatar.displayName = "ElAvatar";
+var Avatar_default = Avatar;

package/dist/Avatar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Avatar } from './Avatar';
+export type { AvatarProps } from './typings';

package/dist/Avatar/index.js

@@ -0,0 +1,39 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Avatar/index.ts
+var Avatar_exports = {};
+__export(Avatar_exports, {
+  Avatar: () => import_Avatar.default
+});
+module.exports = __toCommonJS(Avatar_exports);
+var import_Avatar = __toESM(require("./Avatar"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Avatar
+});

package/dist/Avatar/typings.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { IconName } from '../Icon';
+import { BaseProps, NativeProps } from '../types/common';
+export interface AvatarProps extends BaseProps, NativeProps<'--el-avatar-text-color' | '--el-avatar-bg-color' | '--el-avatar-text-size' | '--el-avatar-icon-size' | '--el-avatar-border-radius' | '--el-avatar-size-large' | '--el-avatar-size-small' | '--el-avatar-size'> {
+    /** 设置 Avatar 的图标类型，具体参考 Icon 组件	 */
+    icon?: IconName;
+    /** Avatar 大小	*/
+    size?: number | 'large' | 'default' | 'small' | '';
+    /** Avatar 形状	 */
+    shape?: 'circle' | 'square';
+    /** Avatar 图片的源地址 */
+    src?: string;
+    /** 图片 Avatar 的原生 srcset 属性 */
+    srcSet?: string;
+    /** 图片 Avatar 的原生 alt 属性 */
+    alt?: string;
+    /** 当展示类型为图片的时候，设置图片如何适应容器 */
+    fit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+    /** 图片加载失败时触发 */
+    onError?: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+}

package/dist/Avatar/typings.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Avatar/typings.ts
+var typings_exports = {};
+module.exports = __toCommonJS(typings_exports);

package/dist/Loading/Loading.js

@@ -33,6 +33,7 @@ __export(Loading_exports, {
 });
 module.exports = __toCommonJS(Loading_exports);
 var import_classnames = __toESM(require("classnames"));
+var import_dom_lib = require("dom-lib");
 var import_react = __toESM(require("react"));
 var import_react_dom = require("react-dom");
 var import_client = require("react-dom/client");
@@ -42,17 +43,26 @@ var import_Util = require("../Util");
 var import_hooks = require("../hooks");
 var Main = (props) => {
   const { visible, text, fullscreen = true, spinner, background } = props;
-  const { b, is } = (0, import_hooks.useClassNames)("loading");
+  const { b, is, bm } = (0, import_hooks.useClassNames)("loading");
   const nodeRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    var _a;
+    if ((_a = nodeRef.current) == null ? void 0 : _a.parentNode) {
+      (0, import_dom_lib.addClass)(nodeRef.current.parentNode, bm("parent", "relative"));
+    }
+  }, []);
   return /* @__PURE__ */ import_react.default.createElement(import_Transition.Transition, { nodeRef, name: "loading-fade", visible }, /* @__PURE__ */ import_react.default.createElement("div", { ref: nodeRef, className: (0, import_classnames.default)(b`mask`, is({ fullscreen }), props.className), style: { ...props.style, background, zIndex: import_Util.PopupManager.nextZIndex() } }, /* @__PURE__ */ import_react.default.createElement("div", { className: b`spinner` }, spinner ? /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: spinner, spin: true }) : /* @__PURE__ */ import_react.default.createElement("svg", { className: "circular", viewBox: "25 25 50 50" }, /* @__PURE__ */ import_react.default.createElement("circle", { className: "path", cx: "50", cy: "50", r: "20", fill: "none" })), text && /* @__PURE__ */ import_react.default.createElement("p", { className: b`text` }, text))));
 };
 var service = (props = {}) => {
   const { target = { current: document.body } } = props;
-  const root = (0, import_client.createRoot)(document.body);
+  const renderDom = document.createDocumentFragment();
+  const root = (0, import_client.createRoot)(renderDom);
   root.render((0, import_react_dom.createPortal)(/* @__PURE__ */ import_react.default.createElement(Main, { ...props, visible: true }), target.current));
   return {
     close: () => {
-      root.unmount();
+      setTimeout(() => {
+        root.unmount();
+      }, 200);
     }
   };
 };
@@ -64,5 +74,5 @@ var Loading = (props) => {
   return /* @__PURE__ */ import_react.default.createElement(Main, { ...props, visible });
 };
 Loading.service = service;
-Loading.displayName = "Loading";
+Loading.displayName = "ElLoading";
 var Loading_default = Loading;

package/dist/hooks/useClassNames.d.ts

@@ -103,5 +103,6 @@ declare function useClassNames(str: string, classPrefix?: string): {
      * is('block', { block: true }) => 'is-block'
      */
     is: (...classes: ClassValue[]) => string;
+    cssVarBlock: (object: Record<string, string>) => Record<string, string>;
 };
 export default useClassNames;

package/dist/hooks/useClassNames.js

@@ -126,6 +126,15 @@ function useClassNames(str, classPrefix = import_prefix.namespace) {
     const mergeClasses = classes.length ? (0, import_classnames.default)(...classes).split(" ").filter((cls) => cls).map((item) => `is-${item}`) : [];
     return mergeClasses.join(" ");
   }, []);
+  const cssVarBlock = (object) => {
+    const styles = {};
+    for (const key in object) {
+      if (object[key]) {
+        styles[`--${componentName}-${key}`] = object[key];
+      }
+    }
+    return styles;
+  };
   return {
     /**
      * 如果组件前缀是'button':
@@ -204,7 +213,8 @@ function useClassNames(str, classPrefix = import_prefix.namespace) {
      *
      * is('block', { block: true }) => 'is-block'
      */
-    is
+    is,
+    cssVarBlock
   };
 }
 var useClassNames_default = useClassNames;

package/dist/index.css

@@ -8898,6 +8898,55 @@
 }
 
 /* Data 数据展示 */
+.el-avatar {
+  --el-avatar-text-color: var(--el-color-white);
+  --el-avatar-bg-color: var(--el-text-color-disabled);
+  --el-avatar-text-size: 14px;
+  --el-avatar-icon-size: 18px;
+  --el-avatar-border-radius: var(--el-border-radius-base);
+  --el-avatar-size-large: 56px;
+  --el-avatar-size-small: 24px;
+  --el-avatar-size: 40px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  text-align: center;
+  overflow: hidden;
+  outline: none;
+  color: var(--el-avatar-text-color);
+  background: var(--el-avatar-bg-color);
+  width: var(--el-avatar-size);
+  height: var(--el-avatar-size);
+  font-size: var(--el-avatar-text-size);
+}
+
+.el-avatar > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.el-avatar--circle {
+  border-radius: 50%;
+}
+
+.el-avatar--square {
+  border-radius: var(--el-avatar-border-radius);
+}
+
+.el-avatar--icon {
+  font-size: var(--el-avatar-icon-size);
+}
+
+.el-avatar--small {
+  --el-avatar-size: 24px;
+}
+
+.el-avatar--large {
+  --el-avatar-size: 56px;
+}
+
 .el-badge {
   --el-badge-bg-color: var(--el-color-error);
   --el-badge-radius: 10px;
@@ -12316,10 +12365,11 @@
   animation: 0.3s linear rShakeHead;
 }
 
-.el-loading-parent .el-loading-parent--relative {
+.el-loading-parent--relative {
   position: relative !important;
 }
-.el-loading-parent .el-loading-parent--hidden {
+
+.el-loading-parent--hidden {
   overflow: hidden !important;
 }
 

package/dist/index.d.ts

@@ -49,6 +49,8 @@ export { Form as ElForm, useForm } from './Form';
 export type { FormInstance, FormItemProps, FormProps, FormRules, InternalFormInstance, InternalNamePath, NamePath, Rule, RuleType, ValidateErrorEntity, ValidateMessages, ValidateOptions, } from './Form';
 export { Upload as ElUpload } from './Upload';
 export type { UploadFile, UploadFiles, UploadProps, UploadRawFile, UploadRef, UploadStatus, UploadUserFile } from './Upload';
+export { Avatar as ElAvatar } from './Avatar';
+export type { AvatarProps } from './Avatar';
 export { Badge as ElBadge } from './Badge';
 export type { BadgeProps } from './Badge';
 export { Card as ElCard } from './Card';

package/dist/index.js

@@ -23,6 +23,7 @@ __export(src_exports, {
   Calendar: () => import_Calendar.Calendar,
   CalendarContext: () => import_Calendar.CalendarContext,
   ConfigProvider: () => import_ConfigProvider.ConfigProvider,
+  ElAvatar: () => import_Avatar.Avatar,
   ElBadge: () => import_Badge.Badge,
   ElBreadcrumb: () => import_Breadcrumb.Breadcrumb,
   ElBreadcrumbItem: () => import_Breadcrumb.BreadcrumbItem,
@@ -123,6 +124,7 @@ var import_Switch = require("./Switch");
 var import_Transfer = require("./Transfer");
 var import_Form = require("./Form");
 var import_Upload = require("./Upload");
+var import_Avatar = require("./Avatar");
 var import_Badge = require("./Badge");
 var import_Card = require("./Card");
 var import_Carousel = require("./Carousel");
@@ -158,6 +160,7 @@ var import_ConfigProvider = require("./ConfigProvider");
   Calendar,
   CalendarContext,
   ConfigProvider,
+  ElAvatar,
   ElBadge,
   ElBreadcrumb,
   ElBreadcrumbItem,

package/dist/theme-chalk/avatar/index.scss

@@ -0,0 +1,50 @@
+@use '../common/var';
+
+.#{$namespace}-avatar {
+    --#{$namespace}-avatar-text-color: var(--#{$namespace}-color-white);
+    --#{$namespace}-avatar-bg-color: var(--#{$namespace}-text-color-disabled);
+    --#{$namespace}-avatar-text-size: 14px;
+    --#{$namespace}-avatar-icon-size: 18px;
+    --#{$namespace}-avatar-border-radius: var(--#{$namespace}-border-radius-base);
+    --#{$namespace}-avatar-size-large: 56px;
+    --#{$namespace}-avatar-size-small: 24px;
+    --#{$namespace}-avatar-size: 40px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    text-align: center;
+    overflow: hidden;
+    outline: none;
+    color: var(--#{$namespace}-avatar-text-color);
+    background: var(--#{$namespace}-avatar-bg-color);
+    width: var(--#{$namespace}-avatar-size);
+    height: var(--#{$namespace}-avatar-size);
+    font-size: var(--#{$namespace}-avatar-text-size);
+}
+
+.#{$namespace}-avatar > img {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.#{$namespace}-avatar--circle {
+    border-radius: 50%;
+}
+
+.#{$namespace}-avatar--square {
+    border-radius: var(--#{$namespace}-avatar-border-radius);
+}
+
+.#{$namespace}-avatar--icon {
+    font-size: var(--#{$namespace}-avatar-icon-size);
+}
+
+.#{$namespace}-avatar--small {
+    --#{$namespace}-avatar-size: 24px;
+}
+
+.#{$namespace}-avatar--large {
+    --#{$namespace}-avatar-size: 56px;
+}

package/dist/theme-chalk/index.scss

@@ -31,6 +31,7 @@
 @import './upload';
 
 /* Data 数据展示 */
+@import './avatar/';
 @import './badge';
 @import './card';
 @import './collapse';

package/dist/theme-chalk/loading/index.scss

@@ -1,13 +1,11 @@
 @use '../common/var';
 
-.#{$namespace}-loading-parent {
-    .#{$namespace}-loading-parent--relative {
-        position: relative !important;
-    }
+.#{$namespace}-loading-parent--relative {
+    position: relative !important;
+}
 
-    .#{$namespace}-loading-parent--hidden {
-        overflow: hidden !important;
-    }
+.#{$namespace}-loading-parent--hidden {
+    overflow: hidden !important;
 }
 
 .#{$namespace}-loading-mask {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qsxy/element-plus-react",
-  "version": "1.0.0-next.7",
+  "version": "1.0.0-next.8",
   "description": "element-plus-react",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",