react-vant-nova 1.0.9 → 1.1.0

package/es/avatar/Avatar.d.ts

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

package/es/avatar/Avatar.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import clsx from 'clsx';
+import { addUnit, createNamespace } from '../utils';
+const [bem] = createNamespace('avatar');
+const presetSizes = ['mini', 'small', 'normal', 'large'];
+const Avatar = props => {
+  const {
+    alt,
+    children,
+    className,
+    fallback,
+    fit = 'cover',
+    shape = 'circle',
+    size = 'normal',
+    src,
+    style,
+    onClick,
+    onError,
+    onLoad
+  } = props;
+  const [failed, setFailed] = useState(false);
+  useEffect(() => {
+    setFailed(false);
+  }, [src]);
+  const avatarStyle = useMemo(() => {
+    const internalStyle = Object.assign({}, style);
+    if (!presetSizes.includes(String(size))) {
+      const sizeValue = addUnit(size);
+      internalStyle.width = sizeValue;
+      internalStyle.height = sizeValue;
+    }
+    return internalStyle;
+  }, [style, size]);
+  const handleLoad = event => {
+    onLoad === null || onLoad === void 0 ? void 0 : onLoad(event);
+  };
+  const handleError = event => {
+    setFailed(true);
+    onError === null || onError === void 0 ? void 0 : onError(event);
+  };
+  const renderContent = () => {
+    if (src && !failed) {
+      return _jsx("img", {
+        className: clsx(bem('img')),
+        src: src,
+        alt: alt || '',
+        style: {
+          objectFit: fit
+        },
+        onLoad: handleLoad,
+        onError: handleError
+      });
+    }
+    return fallback !== null && fallback !== void 0 ? fallback : children;
+  };
+  return _jsx("div", Object.assign({
+    className: clsx(className, bem({
+      [shape]: !!shape,
+      [String(size)]: presetSizes.includes(String(size))
+    })),
+    style: avatarStyle,
+    onClick: onClick
+  }, {
+    children: renderContent()
+  }));
+};
+export default Avatar;

package/es/avatar/PropsType.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { BaseTypeProps } from '../utils';
+export declare type AvatarShape = 'circle' | 'square';
+export declare type AvatarFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+export declare type AvatarSize = 'mini' | 'small' | 'normal' | 'large' | number | string;
+export interface AvatarProps extends BaseTypeProps {
+    /** 图片地址 */
+    src?: string;
+    /** 图片描述 */
+    alt?: string;
+    /**
+     * 头像形状
+     * @default circle
+     */
+    shape?: AvatarShape;
+    /**
+     * 头像大小
+     * @default normal
+     */
+    size?: AvatarSize;
+    /**
+     * 图片填充模式
+     * @default cover
+     */
+    fit?: AvatarFit;
+    /** 图片加载失败时显示的内容 */
+    fallback?: React.ReactNode;
+    /** 点击头像时触发 */
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /** 图片加载成功时触发 */
+    onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    /** 图片加载失败时触发 */
+    onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+}

package/es/avatar/PropsType.js

@@ -0,0 +1 @@
+export {};

package/es/avatar/index.d.ts

@@ -0,0 +1,5 @@
+import './style/index.less';
+import Avatar from './Avatar';
+export default Avatar;
+export { Avatar };
+export type { AvatarProps, AvatarShape, AvatarFit, AvatarSize, } from './PropsType';

package/es/avatar/index.js

@@ -0,0 +1,4 @@
+import "./style/index.css";
+import Avatar from './Avatar';
+export default Avatar;
+export { Avatar };

package/es/avatar/style/index.css

@@ -0,0 +1,52 @@
+:root {
+  --rv-avatar-size-mini: 24px;
+  --rv-avatar-size-small: 32px;
+  --rv-avatar-size-normal: 40px;
+  --rv-avatar-size-large: 56px;
+  --rv-avatar-background-color: var(--rv-gray-3);
+  --rv-avatar-color: var(--rv-gray-7);
+  --rv-avatar-font-size: var(--rv-font-size-md);
+  --rv-avatar-border-radius: var(--rv-border-radius-md);
+}
+.rv-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rv-avatar-size-normal);
+  height: var(--rv-avatar-size-normal);
+  overflow: hidden;
+  color: var(--rv-avatar-color);
+  font-size: var(--rv-avatar-font-size);
+  line-height: 1;
+  white-space: nowrap;
+  text-align: center;
+  vertical-align: middle;
+  background-color: var(--rv-avatar-background-color);
+}
+.rv-avatar--mini {
+  width: var(--rv-avatar-size-mini);
+  height: var(--rv-avatar-size-mini);
+  font-size: var(--rv-font-size-xs);
+}
+.rv-avatar--small {
+  width: var(--rv-avatar-size-small);
+  height: var(--rv-avatar-size-small);
+  font-size: var(--rv-font-size-sm);
+}
+.rv-avatar--large {
+  width: var(--rv-avatar-size-large);
+  height: var(--rv-avatar-size-large);
+  font-size: var(--rv-font-size-lg);
+}
+.rv-avatar--circle {
+  border-radius: var(--rv-border-radius-max);
+}
+.rv-avatar--square {
+  border-radius: var(--rv-avatar-border-radius);
+}
+.rv-avatar__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

package/es/index.d.ts

@@ -2,6 +2,7 @@ import './styles';
 export { default as hooks } from './hooks';
 export * from './button';
 export * from './badge';
+export * from './avatar';
 export * from './field';
 export * from './flex';
 export * from './space';

package/es/index.js

@@ -2,6 +2,7 @@ import './styles';
 export { default as hooks } from './hooks';
 export * from './button';
 export * from './badge';
+export * from './avatar';
 export * from './field';
 export * from './flex';
 export * from './space';

package/lib/avatar/Avatar.d.ts

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

package/lib/avatar/Avatar.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _jsxRuntime() {
+  const data = require("react/jsx-runtime");
+  _jsxRuntime = function () {
+    return data;
+  };
+  return data;
+}
+function _clsx() {
+  const data = _interopRequireDefault(require("clsx"));
+  _clsx = function () {
+    return data;
+  };
+  return data;
+}
+var _utils = require("../utils");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const [bem] = (0, _utils.createNamespace)('avatar');
+const presetSizes = ['mini', 'small', 'normal', 'large'];
+const Avatar = props => {
+  const {
+    alt,
+    children,
+    className,
+    fallback,
+    fit = 'cover',
+    shape = 'circle',
+    size = 'normal',
+    src,
+    style,
+    onClick,
+    onError,
+    onLoad
+  } = props;
+  const [failed, setFailed] = (0, _react().useState)(false);
+  (0, _react().useEffect)(() => {
+    setFailed(false);
+  }, [src]);
+  const avatarStyle = (0, _react().useMemo)(() => {
+    const internalStyle = Object.assign({}, style);
+    if (!presetSizes.includes(String(size))) {
+      const sizeValue = (0, _utils.addUnit)(size);
+      internalStyle.width = sizeValue;
+      internalStyle.height = sizeValue;
+    }
+    return internalStyle;
+  }, [style, size]);
+  const handleLoad = event => {
+    onLoad === null || onLoad === void 0 ? void 0 : onLoad(event);
+  };
+  const handleError = event => {
+    setFailed(true);
+    onError === null || onError === void 0 ? void 0 : onError(event);
+  };
+  const renderContent = () => {
+    if (src && !failed) {
+      return (0, _jsxRuntime().jsx)("img", {
+        className: (0, _clsx().default)(bem('img')),
+        src: src,
+        alt: alt || '',
+        style: {
+          objectFit: fit
+        },
+        onLoad: handleLoad,
+        onError: handleError
+      });
+    }
+    return fallback !== null && fallback !== void 0 ? fallback : children;
+  };
+  return (0, _jsxRuntime().jsx)("div", Object.assign({
+    className: (0, _clsx().default)(className, bem({
+      [shape]: !!shape,
+      [String(size)]: presetSizes.includes(String(size))
+    })),
+    style: avatarStyle,
+    onClick: onClick
+  }, {
+    children: renderContent()
+  }));
+};
+var _default = exports.default = Avatar;

package/lib/avatar/PropsType.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { BaseTypeProps } from '../utils';
+export declare type AvatarShape = 'circle' | 'square';
+export declare type AvatarFit = 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
+export declare type AvatarSize = 'mini' | 'small' | 'normal' | 'large' | number | string;
+export interface AvatarProps extends BaseTypeProps {
+    /** 图片地址 */
+    src?: string;
+    /** 图片描述 */
+    alt?: string;
+    /**
+     * 头像形状
+     * @default circle
+     */
+    shape?: AvatarShape;
+    /**
+     * 头像大小
+     * @default normal
+     */
+    size?: AvatarSize;
+    /**
+     * 图片填充模式
+     * @default cover
+     */
+    fit?: AvatarFit;
+    /** 图片加载失败时显示的内容 */
+    fallback?: React.ReactNode;
+    /** 点击头像时触发 */
+    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /** 图片加载成功时触发 */
+    onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    /** 图片加载失败时触发 */
+    onError?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+}

package/lib/avatar/PropsType.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/avatar/index.d.ts

@@ -0,0 +1,5 @@
+import './style/index.less';
+import Avatar from './Avatar';
+export default Avatar;
+export { Avatar };
+export type { AvatarProps, AvatarShape, AvatarFit, AvatarSize, } from './PropsType';

package/lib/avatar/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Avatar", {
+  enumerable: true,
+  get: function () {
+    return _Avatar.default;
+  }
+});
+exports.default = void 0;
+require("./style/index.css");
+var _Avatar = _interopRequireDefault(require("./Avatar"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _Avatar.default;

package/lib/avatar/style/index.css

@@ -0,0 +1,52 @@
+:root {
+  --rv-avatar-size-mini: 24px;
+  --rv-avatar-size-small: 32px;
+  --rv-avatar-size-normal: 40px;
+  --rv-avatar-size-large: 56px;
+  --rv-avatar-background-color: var(--rv-gray-3);
+  --rv-avatar-color: var(--rv-gray-7);
+  --rv-avatar-font-size: var(--rv-font-size-md);
+  --rv-avatar-border-radius: var(--rv-border-radius-md);
+}
+.rv-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rv-avatar-size-normal);
+  height: var(--rv-avatar-size-normal);
+  overflow: hidden;
+  color: var(--rv-avatar-color);
+  font-size: var(--rv-avatar-font-size);
+  line-height: 1;
+  white-space: nowrap;
+  text-align: center;
+  vertical-align: middle;
+  background-color: var(--rv-avatar-background-color);
+}
+.rv-avatar--mini {
+  width: var(--rv-avatar-size-mini);
+  height: var(--rv-avatar-size-mini);
+  font-size: var(--rv-font-size-xs);
+}
+.rv-avatar--small {
+  width: var(--rv-avatar-size-small);
+  height: var(--rv-avatar-size-small);
+  font-size: var(--rv-font-size-sm);
+}
+.rv-avatar--large {
+  width: var(--rv-avatar-size-large);
+  height: var(--rv-avatar-size-large);
+  font-size: var(--rv-font-size-lg);
+}
+.rv-avatar--circle {
+  border-radius: var(--rv-border-radius-max);
+}
+.rv-avatar--square {
+  border-radius: var(--rv-avatar-border-radius);
+}
+.rv-avatar__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}

package/lib/index.css

@@ -794,6 +794,58 @@ ul {
   position: relative;
   display: inline-block;
 }
+:root {
+  --rv-avatar-size-mini: 24px;
+  --rv-avatar-size-small: 32px;
+  --rv-avatar-size-normal: 40px;
+  --rv-avatar-size-large: 56px;
+  --rv-avatar-background-color: var(--rv-gray-3);
+  --rv-avatar-color: var(--rv-gray-7);
+  --rv-avatar-font-size: var(--rv-font-size-md);
+  --rv-avatar-border-radius: var(--rv-border-radius-md);
+}
+.rv-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--rv-avatar-size-normal);
+  height: var(--rv-avatar-size-normal);
+  overflow: hidden;
+  color: var(--rv-avatar-color);
+  font-size: var(--rv-avatar-font-size);
+  line-height: 1;
+  white-space: nowrap;
+  text-align: center;
+  vertical-align: middle;
+  background-color: var(--rv-avatar-background-color);
+}
+.rv-avatar--mini {
+  width: var(--rv-avatar-size-mini);
+  height: var(--rv-avatar-size-mini);
+  font-size: var(--rv-font-size-xs);
+}
+.rv-avatar--small {
+  width: var(--rv-avatar-size-small);
+  height: var(--rv-avatar-size-small);
+  font-size: var(--rv-font-size-sm);
+}
+.rv-avatar--large {
+  width: var(--rv-avatar-size-large);
+  height: var(--rv-avatar-size-large);
+  font-size: var(--rv-font-size-lg);
+}
+.rv-avatar--circle {
+  border-radius: var(--rv-border-radius-max);
+}
+.rv-avatar--square {
+  border-radius: var(--rv-avatar-border-radius);
+}
+.rv-avatar__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
 :root {
   --rv-field-input-error-text-color: var(--rv-danger-color);
   --rv-field-label-width: 6.2em;

package/lib/index.d.ts

@@ -2,6 +2,7 @@ import './styles';
 export { default as hooks } from './hooks';
 export * from './button';
 export * from './badge';
+export * from './avatar';
 export * from './field';
 export * from './flex';
 export * from './space';

package/lib/index.js

@@ -38,6 +38,18 @@ Object.keys(_badge).forEach(function (key) {
     }
   });
 });
+var _avatar = require("./avatar");
+Object.keys(_avatar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _avatar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _avatar[key];
+    }
+  });
+});
 var _field = require("./field");
 Object.keys(_field).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;