react-vant-nova 1.0.8 → 1.1.0

package/es/treeSelect/style/index.css

@@ -0,0 +1,149 @@
+:root {
+  --rv-tree-select-font-size: 14px;
+  --rv-tree-select-nav-width: 80px;
+  --rv-tree-select-nav-background-color: var(--rv-gray-1);
+  --rv-tree-select-content-background-color: #fff;
+  --rv-tree-select-nav-item-padding: 14px 12px;
+  --rv-tree-select-item-height: 48px;
+  --rv-tree-select-item-active-color: #f44336;
+  --rv-tree-select-item-disabled-color: #c8c9cc;
+  --rv-tree-select-item-selected-size: 16px;
+  --rv-tree-select-height: 300px;
+}
+.rv-tree-select {
+  display: flex;
+  font-size: var(--rv-tree-select-font-size);
+  user-select: none;
+}
+.rv-tree-select__nav {
+  flex: none;
+  overflow-y: auto;
+  background-color: var(--rv-tree-select-nav-background-color);
+  -webkit-overflow-scrolling: touch;
+}
+.rv-tree-select__nav-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: var(--rv-tree-select-nav-item-padding);
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.rv-tree-select__nav-item:active {
+  opacity: 0.7;
+}
+.rv-tree-select__nav-item--active {
+  color: var(--rv-tree-select-item-active-color);
+  font-weight: 600;
+  background-color: var(--rv-tree-select-content-background-color);
+}
+.rv-tree-select__nav-item--active::before {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 3px;
+  height: 16px;
+  background-color: var(--rv-tree-select-item-active-color);
+  transform: translateY(-50%);
+  content: '';
+}
+.rv-tree-select__nav-item--disabled {
+  color: var(--rv-tree-select-item-disabled-color);
+  cursor: not-allowed;
+}
+.rv-tree-select__nav-item--disabled:active {
+  opacity: 1;
+}
+.rv-tree-select__nav-icon {
+  margin-right: 4px;
+}
+.rv-tree-select__nav-text {
+  flex: 1;
+  word-break: break-all;
+}
+.rv-tree-select__nav-badge {
+  margin-left: 4px;
+  padding: 0 6px;
+  font-size: 12px;
+  color: #fff;
+  background-color: var(--rv-tree-select-item-active-color);
+  border-radius: 10px;
+}
+.rv-tree-select__content {
+  flex: 1;
+  overflow-y: auto;
+  background-color: var(--rv-tree-select-content-background-color);
+  -webkit-overflow-scrolling: touch;
+}
+.rv-tree-select__items {
+  padding: 12px 16px;
+}
+.rv-tree-select__content-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--rv-tree-select-item-disabled-color);
+}
+.rv-tree-select__item-wrapper {
+  margin-bottom: 12px;
+}
+.rv-tree-select__item-wrapper:last-child {
+  margin-bottom: 0;
+}
+.rv-tree-select__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--rv-tree-select-item-height);
+  padding: 10px 12px;
+  background-color: var(--rv-tree-select-nav-background-color);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.rv-tree-select__item:active {
+  opacity: 0.7;
+}
+.rv-tree-select__item--active {
+  color: var(--rv-tree-select-item-active-color);
+  background-color: rgba(238, 10, 36, 0.08);
+  font-weight: 500;
+}
+.rv-tree-select__item--disabled {
+  color: var(--rv-tree-select-item-disabled-color);
+  cursor: not-allowed;
+}
+.rv-tree-select__item--disabled:active {
+  opacity: 1;
+}
+.rv-tree-select__item-content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+.rv-tree-select__item-icon {
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+}
+.rv-tree-select__item-title {
+  flex: 1;
+}
+.rv-tree-select__item-selected-icon {
+  margin-left: 8px;
+  font-size: var(--rv-tree-select-item-selected-size);
+  color: var(--rv-tree-select-item-active-color);
+}
+.rv-tree-select__item-checkbox {
+  margin-left: 8px;
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+}
+.rv-tree-select__item-children {
+  margin-top: 8px;
+  padding-left: 20px;
+  border-left: 2px solid var(--rv-tree-select-nav-background-color);
+}

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;
@@ -6783,3 +6835,152 @@ ul {
   width: 100%;
   height: 100%;
 }
+:root {
+  --rv-tree-select-font-size: 14px;
+  --rv-tree-select-nav-width: 80px;
+  --rv-tree-select-nav-background-color: var(--rv-gray-1);
+  --rv-tree-select-content-background-color: #fff;
+  --rv-tree-select-nav-item-padding: 14px 12px;
+  --rv-tree-select-item-height: 48px;
+  --rv-tree-select-item-active-color: #f44336;
+  --rv-tree-select-item-disabled-color: #c8c9cc;
+  --rv-tree-select-item-selected-size: 16px;
+  --rv-tree-select-height: 300px;
+}
+.rv-tree-select {
+  display: flex;
+  font-size: var(--rv-tree-select-font-size);
+  user-select: none;
+}
+.rv-tree-select__nav {
+  flex: none;
+  overflow-y: auto;
+  background-color: var(--rv-tree-select-nav-background-color);
+  -webkit-overflow-scrolling: touch;
+}
+.rv-tree-select__nav-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: var(--rv-tree-select-nav-item-padding);
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.rv-tree-select__nav-item:active {
+  opacity: 0.7;
+}
+.rv-tree-select__nav-item--active {
+  color: var(--rv-tree-select-item-active-color);
+  font-weight: 600;
+  background-color: var(--rv-tree-select-content-background-color);
+}
+.rv-tree-select__nav-item--active::before {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 3px;
+  height: 16px;
+  background-color: var(--rv-tree-select-item-active-color);
+  transform: translateY(-50%);
+  content: '';
+}
+.rv-tree-select__nav-item--disabled {
+  color: var(--rv-tree-select-item-disabled-color);
+  cursor: not-allowed;
+}
+.rv-tree-select__nav-item--disabled:active {
+  opacity: 1;
+}
+.rv-tree-select__nav-icon {
+  margin-right: 4px;
+}
+.rv-tree-select__nav-text {
+  flex: 1;
+  word-break: break-all;
+}
+.rv-tree-select__nav-badge {
+  margin-left: 4px;
+  padding: 0 6px;
+  font-size: 12px;
+  color: #fff;
+  background-color: var(--rv-tree-select-item-active-color);
+  border-radius: 10px;
+}
+.rv-tree-select__content {
+  flex: 1;
+  overflow-y: auto;
+  background-color: var(--rv-tree-select-content-background-color);
+  -webkit-overflow-scrolling: touch;
+}
+.rv-tree-select__items {
+  padding: 12px 16px;
+}
+.rv-tree-select__content-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: var(--rv-tree-select-item-disabled-color);
+}
+.rv-tree-select__item-wrapper {
+  margin-bottom: 12px;
+}
+.rv-tree-select__item-wrapper:last-child {
+  margin-bottom: 0;
+}
+.rv-tree-select__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: var(--rv-tree-select-item-height);
+  padding: 10px 12px;
+  background-color: var(--rv-tree-select-nav-background-color);
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.rv-tree-select__item:active {
+  opacity: 0.7;
+}
+.rv-tree-select__item--active {
+  color: var(--rv-tree-select-item-active-color);
+  background-color: rgba(238, 10, 36, 0.08);
+  font-weight: 500;
+}
+.rv-tree-select__item--disabled {
+  color: var(--rv-tree-select-item-disabled-color);
+  cursor: not-allowed;
+}
+.rv-tree-select__item--disabled:active {
+  opacity: 1;
+}
+.rv-tree-select__item-content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+.rv-tree-select__item-icon {
+  margin-right: 8px;
+  display: flex;
+  align-items: center;
+}
+.rv-tree-select__item-title {
+  flex: 1;
+}
+.rv-tree-select__item-selected-icon {
+  margin-left: 8px;
+  font-size: var(--rv-tree-select-item-selected-size);
+  color: var(--rv-tree-select-item-active-color);
+}
+.rv-tree-select__item-checkbox {
+  margin-left: 8px;
+  width: 18px;
+  height: 18px;
+  cursor: pointer;
+}
+.rv-tree-select__item-children {
+  margin-top: 8px;
+  padding-left: 20px;
+  border-left: 2px solid var(--rv-tree-select-nav-background-color);
+}

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';
@@ -72,3 +73,4 @@ export * from './floating-ball';
 export * from './water-mark';
 export * from './floating-panel';
 export * from './table';
+export * from './treeSelect';

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;
@@ -878,4 +890,16 @@ Object.keys(_table).forEach(function (key) {
     }
   });
 });
+var _treeSelect = require("./treeSelect");
+Object.keys(_treeSelect).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _treeSelect[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _treeSelect[key];
+    }
+  });
+});
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }