react-vant-nova 1.0.0-test

package/es/styles/base.css

@@ -0,0 +1,310 @@
+:root {
+  --rv-brand-color: #3f45ff;
+  --rv-black: #000;
+  --rv-white: #fff;
+  --rv-gray-1: #f7f8fa;
+  --rv-gray-2: #f2f3f5;
+  --rv-gray-3: #ebedf0;
+  --rv-gray-4: #dcdee0;
+  --rv-gray-5: #c8c9cc;
+  --rv-gray-6: #969799;
+  --rv-gray-7: #646566;
+  --rv-gray-8: #323232;
+  --rv-red: #f44336;
+  --rv-blue: #3f45ff;
+  --rv-orange: #ff976a;
+  --rv-orange-dark: #ff590d;
+  --rv-orange-light: #fffbe8;
+  --rv-green: #00c853;
+  --rv-gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
+  --rv-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
+  --rv-primary-color: var(--rv-blue);
+  --rv-success-color: var(--rv-green);
+  --rv-danger-color: var(--rv-red);
+  --rv-warning-color: var(--rv-orange);
+  --rv-text-color: var(--rv-gray-8);
+  --rv-text-color-weak: #969799;
+  --rv-active-color: var(--rv-gray-2);
+  --rv-active-opacity: 0.7;
+  --rv-disabled-opacity: 0.5;
+  --rv-background-color: var(--rv-gray-1);
+  --rv-background-color-light: #fafafa;
+  --rv-text-link-color: #576b95;
+  --rv-padding-base: 4px;
+  --rv-padding-xs: 8px;
+  --rv-padding-sm: 12px;
+  --rv-padding-md: 16px;
+  --rv-padding-lg: 24px;
+  --rv-padding-xl: 32px;
+  --rv-font-size-xs: 10px;
+  --rv-font-size-sm: 12px;
+  --rv-font-size-md: 14px;
+  --rv-font-size-lg: 16px;
+  --rv-font-size-xl: 18px;
+  --rv-font-size-xxl: 20px;
+  --rv-font-size-xxxl: 24px;
+  --rv-font-weight-bold: 500;
+  --rv-line-height-xs: 14px;
+  --rv-line-height-sm: 18px;
+  --rv-line-height-md: 20px;
+  --rv-line-height-lg: 22px;
+  --rv-line-height-xl: 24px;
+  --rv-line-height-xxl: 28px;
+  --rv-line-height-xxxl: 32px;
+  --rv-base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+  --rv-price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;
+  --rv-animation-duration-base: 0.3s;
+  --rv-animation-duration-fast: 0.2s;
+  --rv-animation-timing-function-enter: ease-out;
+  --rv-animation-timing-function-leave: ease-in;
+  --rv-border-color: var(--rv-gray-3);
+  --rv-border-width-base: 1px;
+  --rv-border-radius-sm: 2px;
+  --rv-border-radius-md: 4px;
+  --rv-border-radius-lg: 8px;
+  --rv-border-radius-max: 999px;
+}
+html {
+  -webkit-tap-highlight-color: transparent;
+}
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+}
+a {
+  text-decoration: none;
+}
+input,
+button,
+textarea {
+  color: inherit;
+  font: inherit;
+}
+a:focus,
+input:focus,
+button:focus,
+textarea:focus,
+[class*='rv-']:focus {
+  outline: none;
+}
+ol,
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+@keyframes rv-spin {
+  0% {
+    -webkit-transform: rotate(0);
+    transform: rotate(0);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes rv-slide-up-enter {
+  from {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+@keyframes rv-slide-up-leave {
+  to {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+@keyframes rv-slide-down-enter {
+  from {
+    transform: translate3d(0, -100%, 0);
+  }
+}
+@keyframes rv-slide-down-leave {
+  to {
+    transform: translate3d(0, -100%, 0);
+  }
+}
+@keyframes rv-slide-left-enter {
+  from {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+@keyframes rv-slide-left-leave {
+  to {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+@keyframes rv-slide-right-enter {
+  from {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+@keyframes rv-slide-right-leave {
+  to {
+    transform: translate3d(100%, 0, 0);
+  }
+}
+@keyframes rv-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes rv-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes rv-zoom-in {
+  from {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+@keyframes rv-zoom-out {
+  from {
+    transform: scale(1);
+    opacity: 1;
+  }
+  to {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+}
+@keyframes rv-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.rv-fade-enter-active {
+  animation: 0.3s rv-fade-in both ease-out;
+}
+.rv-fade-exit-active {
+  animation: 0.3s rv-fade-out both ease-in;
+}
+.rv-slide-up-enter-active {
+  animation: 0.3s rv-slide-up-enter both ease-out;
+}
+.rv-slide-up-exit-active {
+  animation: 0.3s rv-slide-up-leave both ease-in;
+}
+.rv-slide-down-enter-active {
+  animation: rv-slide-down-enter 0.3s both ease-out;
+}
+.rv-slide-down-exit-active {
+  animation: rv-slide-down-leave 0.3s both ease-in;
+}
+.rv-slide-left-enter-active {
+  animation: rv-slide-left-enter 0.3s both ease-out;
+}
+.rv-slide-left-exit-active {
+  animation: rv-slide-left-leave 0.3s both ease-in;
+}
+.rv-slide-right-enter-active {
+  animation: rv-slide-right-enter 0.3s both ease-out;
+}
+.rv-slide-right-exit-active {
+  animation: rv-slide-right-leave 0.3s both ease-in;
+}
+.rv-zoom-enter-active {
+  animation: 0.3s rv-zoom-in both ease-out;
+}
+.rv-zoom-exit-active {
+  animation: 0.3s rv-zoom-out both ease-in;
+}
+.rv-ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.rv-multi-ellipsis--l2 {
+  display: -webkit-box !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 2;
+  /* autoprefixer: ignore next */
+  -webkit-box-orient: vertical;
+}
+.rv-multi-ellipsis--l3 {
+  display: -webkit-box !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 3;
+  /* autoprefixer: ignore next */
+  -webkit-box-orient: vertical;
+}
+.rv-safe-area-top {
+  padding-top: constant(safe-area-inset-top);
+  padding-top: env(safe-area-inset-top);
+}
+.rv-safe-area-bottom {
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+[class*='rv-hairline']::after {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  top: -50%;
+  right: -50%;
+  bottom: -50%;
+  left: -50%;
+  border: 0 solid var(--rv-gray-3);
+  transform: scale(0.5);
+}
+.rv-hairline,
+.rv-hairline--top,
+.rv-hairline--left,
+.rv-hairline--right,
+.rv-hairline--bottom,
+.rv-hairline--surround,
+.rv-hairline--top-bottom {
+  position: relative;
+}
+.rv-hairline--top::after {
+  border-top-width: 1px;
+}
+.rv-hairline--left::after {
+  border-left-width: 1px;
+}
+.rv-hairline--right::after {
+  border-right-width: 1px;
+}
+.rv-hairline--bottom::after {
+  border-bottom-width: 1px;
+}
+.rv-hairline--top-bottom::after,
+.rv-hairline-unset--top-bottom::after {
+  border-width: 1px 0;
+}
+.rv-hairline--surround::after {
+  border-width: 1px;
+}
+[class*='rv-shadow']:hover,
+[class*='rv-shadow']:active {
+  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 4px -1px, rgba(0, 0, 0, 0.14) 0 4px 5px 0, rgba(0, 0, 0, 0.12) 0 1px 10px 0;
+}
+.rv-shadow--1 {
+  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 1px -1px, rgba(0, 0, 0, 0.14) 0 1px 1px 0, rgba(0, 0, 0, 0.12) 0 1px 3px 0;
+}
+.rv-shadow--2 {
+  box-shadow: rgba(0, 0, 0, 0.2) 0 3px 1px -2px, rgba(0, 0, 0, 0.14) 0 2px 2px 0, rgba(0, 0, 0, 0.12) 0 1px 5px 0;
+}
+.rv-shadow--3 {
+  box-shadow: rgba(0, 0, 0, 0.2) 0 3px 3px -2px, rgba(0, 0, 0, 0.14) 0 3px 4px 0, rgba(0, 0, 0, 0.12) 0 1px 8px 0;
+}
+.rv-icon--spin {
+  animation: rv-spin 1.5s infinite linear;
+}

package/es/styles/css-variables.css

@@ -0,0 +1,66 @@
+:root {
+  --rv-brand-color: #3f45ff;
+  --rv-black: #000;
+  --rv-white: #fff;
+  --rv-gray-1: #f7f8fa;
+  --rv-gray-2: #f2f3f5;
+  --rv-gray-3: #ebedf0;
+  --rv-gray-4: #dcdee0;
+  --rv-gray-5: #c8c9cc;
+  --rv-gray-6: #969799;
+  --rv-gray-7: #646566;
+  --rv-gray-8: #323232;
+  --rv-red: #f44336;
+  --rv-blue: #3f45ff;
+  --rv-orange: #ff976a;
+  --rv-orange-dark: #ff590d;
+  --rv-orange-light: #fffbe8;
+  --rv-green: #00c853;
+  --rv-gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
+  --rv-gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
+  --rv-primary-color: var(--rv-blue);
+  --rv-success-color: var(--rv-green);
+  --rv-danger-color: var(--rv-red);
+  --rv-warning-color: var(--rv-orange);
+  --rv-text-color: var(--rv-gray-8);
+  --rv-text-color-weak: #969799;
+  --rv-active-color: var(--rv-gray-2);
+  --rv-active-opacity: 0.7;
+  --rv-disabled-opacity: 0.5;
+  --rv-background-color: var(--rv-gray-1);
+  --rv-background-color-light: #fafafa;
+  --rv-text-link-color: #576b95;
+  --rv-padding-base: 4px;
+  --rv-padding-xs: 8px;
+  --rv-padding-sm: 12px;
+  --rv-padding-md: 16px;
+  --rv-padding-lg: 24px;
+  --rv-padding-xl: 32px;
+  --rv-font-size-xs: 10px;
+  --rv-font-size-sm: 12px;
+  --rv-font-size-md: 14px;
+  --rv-font-size-lg: 16px;
+  --rv-font-size-xl: 18px;
+  --rv-font-size-xxl: 20px;
+  --rv-font-size-xxxl: 24px;
+  --rv-font-weight-bold: 500;
+  --rv-line-height-xs: 14px;
+  --rv-line-height-sm: 18px;
+  --rv-line-height-md: 20px;
+  --rv-line-height-lg: 22px;
+  --rv-line-height-xl: 24px;
+  --rv-line-height-xxl: 28px;
+  --rv-line-height-xxxl: 32px;
+  --rv-base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+  --rv-price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, sans-serif;
+  --rv-animation-duration-base: 0.3s;
+  --rv-animation-duration-fast: 0.2s;
+  --rv-animation-timing-function-enter: ease-out;
+  --rv-animation-timing-function-leave: ease-in;
+  --rv-border-color: var(--rv-gray-3);
+  --rv-border-width-base: 1px;
+  --rv-border-radius-sm: 2px;
+  --rv-border-radius-md: 4px;
+  --rv-border-radius-lg: 8px;
+  --rv-border-radius-max: 999px;
+}

package/es/styles/index.d.ts

@@ -0,0 +1 @@
+import './base.less';

package/es/styles/index.js

@@ -0,0 +1 @@
+import "./base.css";

package/es/styles/normalize.css

@@ -0,0 +1,29 @@
+html {
+  -webkit-tap-highlight-color: transparent;
+}
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+}
+a {
+  text-decoration: none;
+}
+input,
+button,
+textarea {
+  color: inherit;
+  font: inherit;
+}
+a:focus,
+input:focus,
+button:focus,
+textarea:focus,
+[class*='rv-']:focus {
+  outline: none;
+}
+ol,
+ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}

package/es/submit-bar/PropsType.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { ButtonType } from '../button/PropsType';
+import { BaseTypeProps } from '../utils';
+export interface SubmitBarProps extends BaseTypeProps {
+    /** 在订单栏上方的提示文案	 */
+    tip?: React.ReactNode;
+    /** 自定义订单栏上方内容 */
+    top?: React.ReactNode;
+    /** 金额左侧文案	 */
+    label?: React.ReactNode;
+    /** 金额右侧文案	 */
+    suffixLabel?: string;
+    /** 金额（单位分）	 */
+    price?: number | string;
+    /** 提示文案左侧的图标 */
+    tipIcon?: React.ReactNode;
+    /** 是否显示将按钮显示为加载中状态	 */
+    loading?: boolean;
+    /** 是否禁用按钮	 */
+    disabled?: boolean;
+    /** 金额文案对齐方向 */
+    textAlign?: React.CSSProperties['textAlign'];
+    /** 自定义按钮 */
+    button?: React.ReactNode;
+    /** 按钮文字	 */
+    buttonText?: string;
+    /** 自定义按钮颜色	 */
+    buttonColor?: string;
+    /** 是否开启底部安全区适配	 */
+    safeAreaInsetBottom?: boolean;
+    /** 金额小数点位数	 */
+    decimalLength?: number | string;
+    /** 货币符号	 */
+    currency?: string;
+    /** 按钮类型	 */
+    buttonType?: ButtonType;
+    /** 按钮点击事件回调	 */
+    onSubmit?: () => void;
+    children?: React.ReactNode;
+}

package/es/submit-bar/PropsType.js

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

package/es/submit-bar/SubmitBar.d.ts

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

package/es/submit-bar/SubmitBar.js

@@ -0,0 +1,105 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useContext } from 'react';
+import cls from 'clsx';
+import ConfigProviderContext from '../config-provider/ConfigProviderContext';
+import Button from '../button';
+import { createNamespace } from '../utils';
+import { mergeProps } from '../utils/get-default-props';
+const [bem] = createNamespace('submit-bar');
+const SubmitBar = p => {
+  const props = mergeProps(p, {
+    buttonType: 'danger',
+    decimalLength: 2,
+    currency: '¥',
+    safeAreaInsetBottom: true
+  });
+  const {
+    locale
+  } = useContext(ConfigProviderContext);
+  const renderText = () => {
+    const {
+      price,
+      label,
+      currency,
+      textAlign,
+      suffixLabel,
+      decimalLength
+    } = props;
+    if (typeof +price === 'number') {
+      const pricePair = (+price / 100).toFixed(+decimalLength).split('.');
+      const decimal = decimalLength ? `.${pricePair[1]}` : '';
+      return _jsxs("div", Object.assign({
+        className: cls(bem('text')),
+        style: {
+          textAlign
+        }
+      }, {
+        children: [_jsx("span", {
+          children: label || locale.vanSubmitBar.label
+        }), _jsxs("span", Object.assign({
+          className: cls(bem('price'))
+        }, {
+          children: [currency, _jsx("span", Object.assign({
+            className: cls(bem('price-integer'))
+          }, {
+            children: pricePair[0]
+          })), decimal]
+        })), suffixLabel && _jsx("span", Object.assign({
+          className: cls(bem('suffix-label'))
+        }, {
+          children: suffixLabel
+        }))]
+      }));
+    }
+    return null;
+  };
+  const renderTip = () => {
+    const {
+      tip,
+      tipIcon
+    } = props;
+    if (tip) {
+      return _jsxs("div", Object.assign({
+        className: cls(bem('tip'))
+      }, {
+        children: [tipIcon && React.cloneElement(tipIcon, {
+          className: cls(bem('tip-icon'))
+        }), tip && _jsx("span", Object.assign({
+          className: cls(bem('tip-text'))
+        }, {
+          children: tip
+        }))]
+      }));
+    }
+    return null;
+  };
+  const onClickButton = () => props === null || props === void 0 ? void 0 : props.onSubmit();
+  const renderButton = () => {
+    if (props.button) {
+      return props.button;
+    }
+    return _jsx(Button, {
+      round: true,
+      type: props.buttonType,
+      text: props.buttonText,
+      className: cls(bem('button', props.buttonType)),
+      color: props.buttonColor,
+      loading: props.loading,
+      disabled: props.disabled,
+      onClick: onClickButton
+    });
+  };
+  return _jsxs("div", Object.assign({
+    className: cls(props.className, bem(), {
+      'rv-safe-area-bottom': props.safeAreaInsetBottom
+    }),
+    style: props.style
+  }, {
+    children: [props.top, renderTip(), _jsxs("div", Object.assign({
+      className: cls(bem('bar'))
+    }, {
+      children: [props.children, renderText(), renderButton()]
+    }))]
+  }));
+};
+export default SubmitBar;

package/es/submit-bar/index.d.ts

@@ -0,0 +1,4 @@
+import './style/index.less';
+import SubmitBar from './SubmitBar';
+export { SubmitBar };
+export default SubmitBar;

package/es/submit-bar/index.js

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

package/es/submit-bar/style/index.css

@@ -0,0 +1,84 @@
+:root {
+  --rv-submit-bar-height: 50px;
+  --rv-submit-bar-z-index: 100;
+  --rv-submit-bar-background-color: var(--rv-white);
+  --rv-submit-bar-button-width: 110px;
+  --rv-submit-bar-price-color: var(--rv-danger-color);
+  --rv-submit-bar-price-font-size: var(--rv-font-size-sm);
+  --rv-submit-bar-price-integer-font-size: 20px;
+  --rv-submit-bar-price-font-family: var(--rv-price-integer-font-family);
+  --rv-submit-bar-currency-font-size: var(--rv-font-size-md);
+  --rv-submit-bar-text-color: var(--rv-text-color);
+  --rv-submit-bar-text-font-size: var(--rv-font-size-md);
+  --rv-submit-bar-tip-padding: var(--rv-padding-xs) var(--rv-padding-sm);
+  --rv-submit-bar-tip-font-size: var(--rv-font-size-sm);
+  --rv-submit-bar-tip-line-height: 1.5;
+  --rv-submit-bar-tip-color: #f56723;
+  --rv-submit-bar-tip-background-color: #fff7cc;
+  --rv-submit-bar-tip-icon-size: 12px;
+  --rv-submit-bar-button-height: 40px;
+  --rv-submit-bar-padding: 0 var(--rv-padding-md);
+}
+.rv-submit-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: var(--rv-submit-bar-z-index);
+  width: 100%;
+  background-color: var(--rv-submit-bar-background-color);
+  user-select: none;
+}
+.rv-submit-bar__tip {
+  padding: var(--rv-submit-bar-tip-padding);
+  color: var(--rv-submit-bar-tip-color);
+  font-size: var(--rv-submit-bar-tip-font-size);
+  line-height: var(--rv-submit-bar-tip-line-height);
+  background-color: var(--rv-submit-bar-tip-background-color);
+}
+.rv-submit-bar__tip-icon {
+  margin-right: var(--rv-padding-base);
+  font-size: var(--rv-submit-bar-tip-icon-size);
+  vertical-align: middle;
+}
+.rv-submit-bar__tip-text {
+  vertical-align: middle;
+}
+.rv-submit-bar__bar {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  height: var(--rv-submit-bar-height);
+  padding: var(--rv-submit-bar-padding);
+  font-size: var(--rv-submit-bar-text-font-size);
+}
+.rv-submit-bar__text {
+  flex: 1;
+  padding-right: var(--rv-padding-sm);
+  color: var(--rv-submit-bar-text-color);
+  text-align: right;
+}
+.rv-submit-bar__text span {
+  display: inline-block;
+}
+.rv-submit-bar__suffix-label {
+  margin-left: var(--rv-padding-base);
+  font-weight: var(--rv-font-weight-bold);
+}
+.rv-submit-bar__price {
+  color: var(--rv-submit-bar-price-color);
+  font-weight: var(--rv-font-weight-bold);
+  font-size: var(--rv-submit-bar-price-font-size);
+}
+.rv-submit-bar__price-integer {
+  font-size: var(--rv-submit-bar-price-integer-font-size);
+  font-family: var(--rv-submit-bar-price-font-family);
+}
+.rv-submit-bar__button.rv-button {
+  width: var(--rv-submit-bar-button-width);
+  height: var(--rv-submit-bar-button-height);
+  font-weight: var(--rv-font-weight-bold);
+  border: none;
+}
+.rv-submit-bar__button.rv-submit-bar__button--danger {
+  background: var(--rv-gradient-red);
+}