react-vant-nova 1.0.0-test

package/es/tabs/TabsTitle.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, forwardRef } from 'react';
+import clsx from 'clsx';
+import { createNamespace, isObject } from '../utils';
+import Badge from '../badge';
+const [bem] = createNamespace('tab');
+const TabsTitle = forwardRef((props, ref) => {
+  const {
+    type,
+    color,
+    isActive,
+    activeColor,
+    inactiveColor,
+    disabled,
+    className
+  } = props;
+  const customStyle = useMemo(() => {
+    const style = Object.assign({}, props.style);
+    const isCard = type === 'card';
+    // card theme color
+    if (color) {
+      if (isCard) {
+        style.borderColor = color;
+      }
+      if (!disabled) {
+        if (isCard) {
+          if (isActive) {
+            style.backgroundColor = color;
+          } else {
+            style.color = color;
+          }
+        }
+        if ((props.type === 'line' || props.type === 'jumbo') && isActive) {
+          style.color = color;
+        }
+      }
+    }
+    const titleColor = isActive ? activeColor : inactiveColor;
+    if (titleColor) {
+      style.color = titleColor;
+    }
+    return style;
+  }, [type, color, disabled, isActive, activeColor, inactiveColor]);
+  const renderText = () => {
+    const Title = _jsx("span", Object.assign({
+      className: clsx(bem('text', {
+        ellipsis: !props.scrollable && props.type !== 'jumbo'
+      })),
+      style: {
+        backgroundColor: props.type === 'capsule' && isActive && color
+      }
+    }, {
+      children: (() => {
+        if (typeof props.title === 'function') {
+          return props.title(isActive);
+        }
+        return props.title;
+      })()
+    }));
+    const Description = props.type === 'jumbo' && !!props.description ? _jsx("div", Object.assign({
+      className: clsx(bem('description')),
+      style: {
+        backgroundColor: isActive && color
+      }
+    }, {
+      children: (() => {
+        if (typeof props.description === 'function') {
+          return props.description(isActive);
+        }
+        return props.description;
+      })()
+    })) : null;
+    const measureContent = _jsxs(_Fragment, {
+      children: [Title, Description]
+    });
+    if (props.badge) {
+      const badgeProps = isObject(props.badge) ? props.badge : {
+        content: props.badge
+      };
+      return _jsx(Badge, Object.assign({}, badgeProps, {
+        children: measureContent
+      }));
+    }
+    return measureContent;
+  };
+  return _jsx("div", Object.assign({
+    ref: ref,
+    className: clsx([bem({
+      active: props.isActive,
+      disabled: props.disabled
+    }), className]),
+    style: customStyle,
+    "aria-selected": props.isActive,
+    onClick: props.onClick
+  }, {
+    children: renderText()
+  }));
+});
+export default TabsTitle;

package/es/tabs/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import './style/index.less';
+declare const Tabs: import("react").ForwardRefExoticComponent<import("./PropsType").TabsProps & import("react").RefAttributes<import("./PropsType").TabsInstance>> & {
+    TabPane: import("react").ForwardRefExoticComponent<import("./PropsType").TabPaneProps & import("react").RefAttributes<HTMLDivElement>>;
+};
+export default Tabs;
+export { Tabs };
+export type { TabsInstance } from './PropsType';

package/es/tabs/index.js

@@ -0,0 +1,8 @@
+import "./style/index.css";
+import _Tabs from './Tabs';
+import TabPane from './TabPane';
+const Tabs = Object.assign(_Tabs, {
+  TabPane
+});
+export default Tabs;
+export { Tabs };

package/es/tabs/style/index.css

@@ -0,0 +1,201 @@
+:root {
+  --rv-tab-text-color: var(--rv-gray-7);
+  --rv-tab-active-text-color: var(--rv-primary-color);
+  --rv-tab-disabled-text-color: var(--rv-gray-5);
+  --rv-tab-font-size: var(--rv-font-size-md);
+  --rv-tab-line-height: var(--rv-line-height-md);
+  --rv-tabs-default-color: var(--rv-primary-color);
+  --rv-tabs-line-height: 44px;
+  --rv-tabs-card-height: 30px;
+  --rv-tabs-nav-background-color: var(--rv-white);
+  --rv-tabs-bottom-bar-width: 40px;
+  --rv-tabs-bottom-bar-height: 3px;
+  --rv-tabs-bottom-bar-color: var(--rv-primary-color);
+  --rv-tab-capsule-padding: var(--rv-padding-xs) var(--rv-padding-sm);
+  --rv-tabs-jumbo-height: 64px;
+  --rv-tab-jumbo-title-size: var(--rv-font-size-lg);
+  --rv-tab-description-font-size: var(--rv-font-size-sm);
+  --rv-tab-description-color: #969799;
+  --rv-tab-description-background-color: #ebedf0;
+}
+.rv-tab {
+  position: relative;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: 0 var(--rv-padding-base);
+  color: var(--rv-tab-text-color);
+  font-size: var(--rv-tab-font-size);
+  line-height: var(--rv-tab-line-height);
+  cursor: pointer;
+}
+.rv-tab__pane {
+  height: 100%;
+}
+.rv-tab__pane,
+.rv-tab__pane-wrapper {
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: 100%;
+}
+.rv-tab__pane-wrapper--inactive {
+  height: 0;
+  overflow: visible;
+}
+.rv-tab--active {
+  color: var(--rv-tab-active-text-color);
+  font-weight: var(--rv-font-weight-bold);
+}
+.rv-tab--disabled {
+  color: var(--rv-tab-disabled-text-color);
+  cursor: not-allowed;
+}
+.rv-tab__text--ellipsis {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+.rv-tab__description {
+  padding: 2px var(--rv-padding-xs);
+  border-radius: 10px;
+  color: var(--rv-tab-description-color);
+  font-size: var(--rv-tab-description-font-size);
+  line-height: var(--rv-tab-description-font-size);
+  background-color: var(--rv-tab-description-background-color);
+  font-weight: normal;
+}
+.rv-tabs {
+  position: relative;
+}
+.rv-tabs__wrap {
+  overflow: hidden;
+}
+.rv-tabs__wrap--page-top {
+  position: fixed;
+}
+.rv-tabs__wrap--content-bottom {
+  top: auto;
+  bottom: 0;
+}
+.rv-tabs__wrap--scrollable .rv-tab {
+  flex: 1 0 auto;
+  padding: 0 var(--rv-padding-sm);
+}
+.rv-tabs__wrap--scrollable .rv-tabs__nav {
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+.rv-tabs__wrap--scrollable .rv-tabs__nav::-webkit-scrollbar {
+  display: none;
+}
+.rv-tabs__nav {
+  position: relative;
+  display: flex;
+  background-color: var(--rv-tabs-nav-background-color);
+  user-select: none;
+}
+.rv-tabs__nav--line,
+.rv-tabs__nav--capsule,
+.rv-tabs__nav--jumbo {
+  box-sizing: content-box;
+  height: 100%;
+  padding-bottom: 15px;
+  /* 15px padding to hide scrollbar in mobile safari */
+}
+.rv-tabs__nav--line.rv-tabs__nav--complete {
+  padding-right: var(--rv-padding-xs);
+  padding-left: var(--rv-padding-xs);
+}
+.rv-tabs__nav--start .rv-tab {
+  flex: none;
+  padding: 0 var(--rv-padding-sm);
+}
+.rv-tabs__nav--card {
+  box-sizing: border-box;
+  height: var(--rv-tabs-card-height);
+  margin: 0 var(--rv-padding-md);
+  border: var(--rv-border-width-base) solid var(--rv-tabs-default-color);
+  border-radius: var(--rv-border-radius-sm);
+}
+.rv-tabs__nav--card .rv-tab {
+  color: var(--rv-tabs-default-color);
+  border-right: var(--rv-border-width-base) solid var(--rv-tabs-default-color);
+}
+.rv-tabs__nav--card .rv-tab:last-child {
+  border-right: none;
+}
+.rv-tabs__nav--card .rv-tab.rv-tab--active {
+  color: var(--rv-white);
+  background-color: var(--rv-tabs-default-color);
+}
+.rv-tabs__nav--card .rv-tab--disabled {
+  color: var(--rv-tab-disabled-text-color);
+}
+.rv-tabs__nav--capsule .rv-tab {
+  padding: var(--rv-tab-capsule-padding);
+}
+.rv-tabs__nav--capsule .rv-tab__text {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.rv-tabs__nav--capsule .rv-tab.rv-tab--active {
+  color: var(--rv-white);
+}
+.rv-tabs__nav--capsule .rv-tab.rv-tab--active .rv-tab__text {
+  border-radius: 22px;
+  background-color: var(--rv-tabs-bottom-bar-color);
+}
+.rv-tabs__nav--jumbo .rv-tab {
+  flex-direction: column;
+  align-items: center;
+}
+.rv-tabs__nav--jumbo .rv-tab__text {
+  font-size: var(--rv-tab-jumbo-title-size);
+  line-height: 1.6em;
+}
+.rv-tabs__nav--jumbo .rv-tab--active .rv-tab__description {
+  color: var(--rv-white);
+  background-color: var(--rv-tab-active-text-color);
+}
+.rv-tabs__line {
+  position: absolute;
+  bottom: 15px;
+  left: 0;
+  z-index: 1;
+  width: var(--rv-tabs-bottom-bar-width);
+  height: var(--rv-tabs-bottom-bar-height);
+  background-color: var(--rv-tabs-bottom-bar-color);
+  border-radius: var(--rv-tabs-bottom-bar-height);
+}
+.rv-tabs__track {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  will-change: left;
+}
+.rv-tabs__content--animated {
+  overflow: hidden;
+}
+.rv-tabs--line .rv-tabs__wrap,
+.rv-tabs--capsule .rv-tabs__wrap {
+  height: var(--rv-tabs-line-height);
+}
+.rv-tabs--card > .rv-tabs__wrap {
+  height: var(--rv-tabs-card-height);
+}
+.rv-tabs--jumbo .rv-tabs__wrap {
+  height: var(--rv-tabs-jumbo-height);
+}
+.rv-tabs--jumbo .rv-badge__wrapper {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}

package/es/tabs/utils.d.ts

@@ -0,0 +1 @@
+export declare function isReachBottom(offset?: number): boolean;

package/es/tabs/utils.js

@@ -0,0 +1,40 @@
+function getScrollTop() {
+  let scrollTop = 0;
+  let bodyScrollTop = 0;
+  let documentScrollTop = 0;
+  if (document.body) {
+    bodyScrollTop = document.body.scrollTop;
+  }
+  if (document.documentElement) {
+    documentScrollTop = document.documentElement.scrollTop;
+  }
+  scrollTop = bodyScrollTop - documentScrollTop > 0 ? bodyScrollTop : documentScrollTop;
+  return scrollTop;
+}
+// 文档的总高度
+function getScrollHeight() {
+  let scrollHeight = 0;
+  let bodyScrollHeight = 0;
+  let documentScrollHeight = 0;
+  if (document.body) {
+    bodyScrollHeight = document.body.scrollHeight;
+  }
+  if (document.documentElement) {
+    documentScrollHeight = document.documentElement.scrollHeight;
+  }
+  scrollHeight = bodyScrollHeight - documentScrollHeight > 0 ? bodyScrollHeight : documentScrollHeight;
+  return scrollHeight;
+}
+// 浏览器视口的高度
+function getWindowHeight() {
+  let windowHeight = 0;
+  if (document.compatMode === 'CSS1Compat') {
+    windowHeight = document.documentElement.clientHeight;
+  } else {
+    windowHeight = document.body.clientHeight;
+  }
+  return windowHeight;
+}
+export function isReachBottom(offset = 0) {
+  return getScrollTop() + getWindowHeight() + offset >= getScrollHeight();
+}

package/es/tag/PropsType.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { BaseTypeProps } from '../utils';
+export declare type TagSize = '' | 'mini' | 'medium' | 'large';
+export declare type TagType = 'default' | 'primary' | 'success' | 'warning' | 'danger';
+export interface TagProps extends BaseTypeProps {
+    /** 大小, 可选值为 large medium	 */
+    size?: TagSize;
+    /** 是否为标记样式	 */
+    mark?: boolean;
+    /** 标签颜色	 */
+    color?: string;
+    /** 是否为空心样式	 */
+    plain?: boolean;
+    /** 是否为圆角样式	 */
+    round?: boolean;
+    /** 文本颜色，优先级高于 color 属性	 */
+    textColor?: string;
+    /** 是否为可关闭标签	 */
+    closeable?: boolean;
+    /** 类型 */
+    type?: TagType;
+    /** 是否展示标签	 */
+    show?: boolean;
+    onClose?: (e: React.MouseEvent) => void;
+    onClick?: (e: React.MouseEvent) => void;
+}

package/es/tag/PropsType.js

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

package/es/tag/Tag.d.ts

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

package/es/tag/Tag.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef } from 'react';
+import clsx from 'clsx';
+import { CSSTransition } from 'react-transition-group';
+import { Cross } from '@react-vant/icons';
+import { createNamespace } from '../utils';
+import { mergeProps } from '../utils/get-default-props';
+const [bem] = createNamespace('tag');
+const Tag = p => {
+  const props = mergeProps(p, {
+    show: true,
+    type: 'default'
+  });
+  const nodeRef = useRef(null);
+  const onClose = event => {
+    event.stopPropagation();
+    if (props.onClose) {
+      props.onClose(event);
+    }
+  };
+  const getStyle = useMemo(() => {
+    if (props.plain) {
+      return {
+        color: props.textColor || props.color,
+        borderColor: props.color
+      };
+    }
+    return {
+      color: props.textColor,
+      background: props.color
+    };
+  }, [props.textColor, props.color, props.plain]);
+  const renderTag = () => {
+    const {
+      type,
+      mark,
+      plain,
+      round,
+      size,
+      closeable
+    } = props;
+    const classes = {
+      mark,
+      plain,
+      round
+    };
+    if (size) {
+      classes[size] = size;
+    }
+    const CloseIcon = closeable && _jsx(Cross, {
+      className: clsx(bem('close')),
+      onClick: onClose
+    });
+    return _jsxs("span", Object.assign({
+      ref: nodeRef,
+      style: Object.assign(Object.assign({}, getStyle), props.style),
+      className: clsx(props.className, bem([classes, type])),
+      onClick: props.onClick
+    }, {
+      children: [props.children, CloseIcon]
+    }));
+  };
+  return _jsx(CSSTransition, Object.assign({
+    nodeRef: nodeRef,
+    classNames: 'rv-fade',
+    in: props.show,
+    timeout: 300,
+    unmountOnExit: true
+  }, {
+    children: renderTag()
+  }));
+};
+export default Tag;

package/es/tag/index.d.ts

@@ -0,0 +1,5 @@
+import './style/index.less';
+import Tag from './Tag';
+export default Tag;
+export { Tag };
+export type { TagProps } from './PropsType';

package/es/tag/index.js

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

package/es/tag/style/index.css

@@ -0,0 +1,110 @@
+:root {
+  --rv-tag-padding: 0 var(--rv-padding-base);
+  --rv-tag-text-color: var(--rv-white);
+  --rv-tag-font-size: var(--rv-font-size-sm);
+  --rv-tag-border-radius: 2px;
+  --rv-tag-line-height: 16px;
+  --rv-tag-medium-padding: 2px 6px;
+  --rv-tag-large-padding: var(--rv-padding-base) var(--rv-padding-xs);
+  --rv-tag-large-border-radius: var(--rv-border-radius-md);
+  --rv-tag-large-font-size: var(--rv-font-size-md);
+  --rv-tag-round-border-radius: var(--rv-border-radius-max);
+  --rv-tag-danger-color: var(--rv-danger-color);
+  --rv-tag-primary-color: var(--rv-primary-color);
+  --rv-tag-success-color: var(--rv-success-color);
+  --rv-tag-warning-color: var(--rv-warning-color);
+  --rv-tag-default-color: var(--rv-gray-6);
+  --rv-tag-plain-background-color: var(--rv-white);
+}
+.rv-tag {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding: var(--rv-tag-padding);
+  color: var(--rv-tag-text-color);
+  font-size: var(--rv-tag-font-size);
+  line-height: var(--rv-tag-line-height);
+  border-radius: var(--rv-tag-border-radius);
+}
+.rv-tag--default {
+  background-color: var(--rv-tag-default-color);
+}
+.rv-tag--default.rv-tag--plain {
+  color: var(--rv-tag-default-color);
+}
+.rv-tag--danger {
+  background-color: var(--rv-tag-danger-color);
+}
+.rv-tag--danger.rv-tag--plain {
+  color: var(--rv-tag-danger-color);
+}
+.rv-tag--primary {
+  background-color: var(--rv-tag-primary-color);
+}
+.rv-tag--primary.rv-tag--plain {
+  color: var(--rv-tag-primary-color);
+}
+.rv-tag--success {
+  background-color: var(--rv-tag-success-color);
+}
+.rv-tag--success.rv-tag--plain {
+  color: var(--rv-tag-success-color);
+}
+.rv-tag--warning {
+  background-color: var(--rv-tag-warning-color);
+}
+.rv-tag--warning.rv-tag--plain {
+  color: var(--rv-tag-warning-color);
+}
+.rv-tag--plain {
+  background-color: var(--rv-tag-plain-background-color);
+  border-color: currentColor;
+}
+.rv-tag--plain::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  border: 1px solid;
+  border-color: inherit;
+  border-radius: inherit;
+  content: '';
+  pointer-events: none;
+}
+.rv-tag--medium {
+  padding: var(--rv-tag-medium-padding);
+}
+.rv-tag--large {
+  padding: var(--rv-tag-large-padding);
+  font-size: var(--rv-tag-large-font-size);
+  border-radius: var(--rv-tag-large-border-radius);
+}
+.rv-tag--mark {
+  border-radius: 0 var(--rv-tag-round-border-radius) var(--rv-tag-round-border-radius) 0;
+}
+.rv-tag--mark::after {
+  display: block;
+  width: 2px;
+  content: '';
+}
+.rv-tag--round {
+  border-radius: var(--rv-tag-round-border-radius);
+}
+.rv-tag__close {
+  margin-left: 2px;
+  cursor: pointer;
+}
+.rv-tag--hairline {
+  border-width: 0;
+}
+.rv-tag--hairline::after {
+  border-color: inherit;
+  border-radius: var(--rv-tag-round-border-radius);
+}
+.rv-tag--hairline.rv-tag--plain::before {
+  border-width: 0;
+}
+.rv-tag--hairline.rv-tag--round::after {
+  border-radius: var(--rv-tag-round-border-radius);
+}

package/es/text-area/PropsType.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import { InputSharedProps } from '../input/PropsType';
+export declare type AutosizeConfig = {
+    maxHeight?: number;
+    minHeight?: number;
+};
+declare type NativeTextAreaProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>;
+export declare type TextAreaSelfProps = {
+    /** 输入的最大字符数 */
+    maxLength?: number;
+    /** 输入框行数 */
+    rows?: number;
+    /** 是否显示字数统计，需要设置maxlength属性 */
+    showWordLimit?: boolean | (({ currentCount, maxLength, }: {
+        currentCount: number;
+        maxLength: number;
+    }) => React.ReactNode);
+    /**
+     * 是否自适应内容高度，只对 textarea 有效
+     * 可传入对象,如 { maxHeight: 100, minHeight: 50 }，单位为px
+     */
+    autoSize?: boolean | AutosizeConfig;
+};
+export interface TextAreaProps extends Pick<NativeTextAreaProps, 'autoComplete' | 'autoFocus' | 'disabled' | 'readOnly' | 'name' | 'onFocus' | 'onBlur' | 'onCompositionStart' | 'onCompositionEnd' | 'onKeyUp' | 'onKeyDown' | 'onKeyPress' | 'onClick'>, InputSharedProps, TextAreaSelfProps {
+}
+export declare type TextAreaInstance = {
+    focus: () => void;
+    blur: () => void;
+    clear: () => void;
+    nativeElement: HTMLTextAreaElement | null;
+};
+export {};

package/es/text-area/PropsType.js

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

package/es/text-area/TextArea.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TextAreaInstance, TextAreaProps } from './PropsType';
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<TextAreaInstance>>;
+export default TextArea;