react-vant-nova 1.0.0-test

package/es/search/style/index.css

@@ -0,0 +1,64 @@
+:root {
+  --rv-search-padding: 10px var(--rv-padding-sm);
+  --rv-search-background-color: var(--rv-white);
+  --rv-search-content-background-color: var(--rv-gray-1);
+  --rv-search-input-height: 34px;
+  --rv-search-label-padding: 0 5px;
+  --rv-search-label-color: var(--rv-text-color);
+  --rv-search-label-font-size: var(--rv-font-size-md);
+  --rv-search-left-icon-color: var(--rv-gray-6);
+  --rv-search-action-padding: 0 var(--rv-padding-xs);
+  --rv-search-action-text-color: var(--rv-text-color);
+  --rv-search-action-font-size: var(--rv-font-size-md);
+}
+.rv-search {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  padding: var(--rv-search-padding);
+  background-color: var(--rv-search-background-color);
+}
+.rv-search__content {
+  display: flex;
+  flex: 1;
+  padding-left: var(--rv-padding-sm);
+  background-color: var(--rv-search-content-background-color);
+  border-radius: var(--rv-border-radius-sm);
+}
+.rv-search__content--round {
+  border-radius: var(--rv-border-radius-max);
+}
+.rv-search__label {
+  padding: var(--rv-search-label-padding);
+  color: var(--rv-search-label-color);
+  font-size: var(--rv-search-label-font-size);
+  line-height: var(--rv-search-input-height);
+}
+.rv-search__field {
+  flex: 1;
+  padding: 5px var(--rv-padding-xs) 5px 0;
+  background-color: transparent;
+}
+.rv-search__field .rv-field__left-icon {
+  color: var(--rv-search-left-icon-color);
+}
+.rv-search--show-action {
+  padding-right: 0;
+}
+.rv-search input::-webkit-search-decoration,
+.rv-search input::-webkit-search-cancel-button,
+.rv-search input::-webkit-search-results-button,
+.rv-search input::-webkit-search-results-decoration {
+  display: none;
+}
+.rv-search__action {
+  padding: var(--rv-search-action-padding);
+  color: var(--rv-search-action-text-color);
+  font-size: var(--rv-search-action-font-size);
+  line-height: var(--rv-search-input-height);
+  cursor: pointer;
+  user-select: none;
+}
+.rv-search__action:active {
+  background-color: var(--rv-active-color);
+}

package/es/selector/CheckMark.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CheckMark: React.MemoExoticComponent<() => JSX.Element>;

package/es/selector/CheckMark.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+export const CheckMark = memo(() => {
+  return _jsx("svg", Object.assign({
+    width: '17px',
+    height: '13px',
+    viewBox: '0 0 17 13',
+    version: '1.1',
+    xmlns: 'http://www.w3.org/2000/svg'
+  }, {
+    children: _jsx("g", Object.assign({
+      stroke: 'none',
+      strokeWidth: '1',
+      fill: 'none',
+      fillRule: 'evenodd',
+      strokeLinecap: 'round',
+      strokeLinejoin: 'round'
+    }, {
+      children: _jsx("g", Object.assign({
+        transform: 'translate(-2832.000000, -1103.000000)',
+        stroke: '#FFFFFF',
+        strokeWidth: '3'
+      }, {
+        children: _jsx("g", Object.assign({
+          transform: 'translate(2610.000000, 955.000000)'
+        }, {
+          children: _jsx("g", Object.assign({
+            transform: 'translate(24.000000, 91.000000)'
+          }, {
+            children: _jsx("g", Object.assign({
+              transform: 'translate(179.177408, 36.687816)'
+            }, {
+              children: _jsx("polyline", {
+                points: '34.2767388 22 24.797043 31.4796958 21 27.6826527'
+              })
+            }))
+          }))
+        }))
+      }))
+    }))
+  }));
+});

package/es/selector/PropsType.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export declare type SelectorValue = string | number;
+export declare type NativeProps<S extends string = never> = {
+    className?: string;
+    style?: React.CSSProperties & Partial<Record<S, string>>;
+    tabIndex?: number;
+} & React.AriaAttributes;
+export interface SelectorOption<V> {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    value: V;
+    disabled?: boolean;
+}
+export declare type SelectorProps<V> = {
+    options: SelectorOption<V>[];
+    columns?: number;
+    multiple?: boolean;
+    disabled?: boolean;
+    defaultValue?: V[];
+    value?: V[];
+    onChange?: (v: V[], extend: {
+        items: SelectorOption<V>[];
+    }) => void;
+    showCheckMark?: boolean;
+} & NativeProps<'--rv-selector-color' | '--rv-selector-checked-color' | '--rv-selector-text-color' | '--rv-selector-checked-text-color' | '--rv-selector-border' | '--rv-selector-checked-border' | '--rv-selector-border-radius' | '--rv-selector-padding' | '--rv-selector-margin'>;

package/es/selector/PropsType.js

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

package/es/selector/Selector.d.ts

@@ -0,0 +1,2 @@
+import { SelectorProps, SelectorValue } from './PropsType';
+export declare const Selector: <V extends SelectorValue>(p: SelectorProps<V>) => JSX.Element;

package/es/selector/Selector.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { usePropsValue } from '../hooks';
+import { CheckMark } from './CheckMark';
+import { createNamespace } from '../utils';
+import { mergeProps } from '../utils/get-default-props';
+// https://mobile.ant.design/zh/components/selector
+const [bem] = createNamespace('selector');
+export const Selector = p => {
+  const props = mergeProps(p, {
+    multiple: false,
+    defaultValue: [],
+    showCheckMark: true
+  });
+  const [value, setValue] = usePropsValue({
+    value: props.value,
+    defaultValue: props.defaultValue,
+    onChange: val => {
+      var _a;
+      const extend = {
+        get items() {
+          return props.options.filter(option => val.includes(option.value));
+        }
+      };
+      (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, val, extend);
+    }
+  });
+  const items = props.options.map(option => {
+    const active = (value || []).includes(option.value);
+    const disabled = option.disabled || props.disabled;
+    const itemCls = clsx(bem('item', {
+      active: active && !props.multiple,
+      'multiple-active': active && props.multiple,
+      disabled
+    }));
+    return _jsxs("div", Object.assign({
+      className: itemCls,
+      onClick: () => {
+        if (disabled) {
+          return;
+        }
+        if (props.multiple) {
+          const val = active ? value.filter(v => v !== option.value) : [...value, option.value];
+          setValue(val);
+        } else {
+          const val = active ? [] : [option.value];
+          setValue(val);
+        }
+      }
+    }, {
+      children: [option.label, option.description && _jsx("div", Object.assign({
+        className: clsx(bem('item-description'))
+      }, {
+        children: option.description
+      })), active && props.showCheckMark && _jsx("div", Object.assign({
+        className: clsx(bem('check-mark-wrapper'))
+      }, {
+        children: _jsx(CheckMark, {})
+      }))]
+    }), option.value);
+  });
+  return _jsx("div", Object.assign({
+    className: clsx(bem(), props.className),
+    style: props.style
+  }, {
+    children: items
+  }));
+};

package/es/selector/index.d.ts

@@ -0,0 +1,4 @@
+import './style/index.less';
+import { Selector } from './Selector';
+export type { SelectorProps, SelectorOption } from './PropsType';
+export { Selector };

package/es/selector/index.js

@@ -0,0 +1,3 @@
+import "./style/index.css";
+import { Selector } from './Selector';
+export { Selector };

package/es/selector/style/index.css

@@ -0,0 +1,69 @@
+:root {
+  --rv-selector-color: var(--rv-gray-2);
+  --rv-selector-checked-color: #efefff;
+  --rv-selector-text-color: var(--rv-text-color);
+  --rv-selector-checked-text-color: var(--rv-primary-color);
+  --rv-selector-border: none;
+  --rv-selector-checkedborder: none;
+  --rv-selector-border-radius: var(--rv-border-radius-sm);
+  --rv-selector-margin: 0 var(--rv-padding-xs) 0 0;
+  --rv-selector-padding: var(--rv-padding-xs) var(--rv-padding-md);
+}
+.rv-selector {
+  overflow: hidden;
+  font-size: var(--rv-font-size-md);
+  line-height: 1.4;
+}
+.rv-selector .rv-space.rv-space {
+  --gap: 12px;
+}
+.rv-selector__item {
+  margin: var(--rv-selector-margin);
+  padding: var(--rv-selector-padding);
+  position: relative;
+  background-color: var(--rv-selector-color);
+  border: var(--rv-selector-border);
+  border-radius: var(--rv-selector-border-radius);
+  color: var(--rv-selector-text-color);
+  opacity: 1;
+  cursor: pointer;
+  display: inline-block;
+  text-align: center;
+  overflow: hidden;
+  vertical-align: top;
+}
+.rv-selector__item:last-child {
+  margin-right: 0;
+}
+.rv-selector__item-description {
+  font-size: var(--rv-font-size-sm);
+  color: var(--rv-text-color-weak);
+}
+.rv-selector__item--active,
+.rv-selector__item--multiple-active {
+  color: var(--rv-selector-checked-text-color);
+  background-color: var(--rv-selector-checked-color);
+  border: var(--rv-selector-checked-border);
+}
+.rv-selector__item .rv-selector__check-mark-wrapper {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 0;
+  height: 0;
+  border-top: solid 8px transparent;
+  border-bottom: solid 8px var(--rv-primary-color);
+  border-left: solid 10px transparent;
+  border-right: solid 10px var(--rv-primary-color);
+}
+.rv-selector__item .rv-selector__check-mark-wrapper > svg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 6px;
+  width: 8px;
+}
+.rv-selector__item--disabled {
+  cursor: not-allowed;
+  opacity: 0.4;
+}

package/es/share-sheet/PropsType.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { SharedPopupProps } from '../popup/PropsType';
+import { BaseTypeProps } from '../utils';
+export declare type ShareSheetOption = {
+    name: string;
+    icon: string | React.ReactNode;
+    className?: string;
+    description?: string;
+};
+export declare type ShareSheetOptions = ShareSheetOption[] | ShareSheetOption[][];
+export interface ShareSheetProps extends BaseTypeProps, SharedPopupProps {
+    visible?: boolean;
+    /** 顶部标题	 */
+    title?: React.ReactNode;
+    /** 取消按钮文字，传入空字符串可以隐藏按钮 */
+    cancelText?: React.ReactNode;
+    /** 标题下方的辅助描述文字	 */
+    description?: React.ReactNode;
+    /** 是否在页面回退时自动关闭	 */
+    closeOnPopstate?: boolean;
+    /** 是否开启底部安全区适配	 */
+    safeAreaInsetBottom?: boolean;
+    /** 分享选项 */
+    options?: ShareSheetOptions;
+    /** 点击取消按钮时触发	 */
+    onCancel?: () => void;
+    /** 点击分享选项时触发	 */
+    onSelect?: (option: ShareSheetOption, index: number) => void;
+}

package/es/share-sheet/PropsType.js

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

package/es/share-sheet/ShareSheet.d.ts

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

package/es/share-sheet/ShareSheet.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import cls from 'clsx';
+import { createNamespace, pick } from '../utils';
+import Popup from '../popup';
+import ConfigProviderContext from '../config-provider/ConfigProviderContext';
+import { mergeProps } from '../utils/get-default-props';
+const PRESET_ICONS = ['qq', 'link', 'weibo', 'wechat', 'poster', 'qrcode', 'weapp-qrcode', 'wechat-moments'];
+function getIconURL(icon) {
+  if (PRESET_ICONS.includes(icon)) {
+    return `https://img.yzcdn.cn/vant/share-sheet-${icon}.png`;
+  }
+  return icon;
+}
+const [bem] = createNamespace('share-sheet');
+const ShareSheet = p => {
+  const props = mergeProps(p, {
+    options: [],
+    closeOnPopstate: true,
+    safeAreaInsetBottom: true,
+    closeOnClickOverlay: true,
+    duration: 300
+  });
+  const {
+    locale
+  } = useContext(ConfigProviderContext);
+  const onCancel = () => {
+    var _a;
+    (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
+  };
+  const onSelect = (option, index) => {
+    var _a;
+    (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, option, index);
+  };
+  const renderHeader = () => {
+    const {
+      title,
+      description
+    } = props;
+    if (title || description) {
+      return _jsxs("div", Object.assign({
+        className: cls(bem('header'))
+      }, {
+        children: [title && _jsx("div", Object.assign({
+          className: cls(bem('title'))
+        }, {
+          children: title
+        })), description && _jsx("div", Object.assign({
+          className: cls(bem('description'))
+        }, {
+          children: description
+        }))]
+      }));
+    }
+    return null;
+  };
+  const renderOption = (option, index) => {
+    const {
+      name,
+      icon,
+      className,
+      description
+    } = option;
+    return _jsxs("div", Object.assign({
+      role: 'button',
+      tabIndex: 0,
+      className: cls([bem('option'), className]),
+      onClick: () => onSelect(option, index)
+    }, {
+      children: [typeof icon === 'string' ? _jsx("img", {
+        alt: 'share sheet icon',
+        src: getIconURL(icon),
+        className: cls(bem('icon'))
+      }) : icon, name && _jsx("span", Object.assign({
+        className: cls(bem('name'))
+      }, {
+        children: name
+      })), description && _jsx("span", Object.assign({
+        className: cls(bem('option-description'))
+      }, {
+        children: description
+      }))]
+    }), index);
+  };
+  const renderOptions = (options, border, key) => _jsx("div", Object.assign({
+    className: cls(bem('options', {
+      border
+    }))
+  }, {
+    children: options.map(renderOption)
+  }), key);
+  const renderRows = () => {
+    const {
+      options
+    } = props;
+    if (Array.isArray(options[0])) {
+      return options.map((item, index) => renderOptions(item, index !== 0, index));
+    }
+    return renderOptions(options);
+  };
+  const renderCancelButton = () => {
+    const {
+      cancelText = locale.cancel
+    } = props;
+    if (cancelText) {
+      return _jsx("button", Object.assign({
+        type: 'button',
+        className: cls(bem('cancel')),
+        onClick: onCancel
+      }, {
+        children: cancelText
+      }));
+    }
+    return null;
+  };
+  return _jsxs(Popup, Object.assign({
+    round: true,
+    className: cls(bem()),
+    position: 'bottom',
+    onClose: onCancel
+  }, pick(props, ['closeOnPopstate', 'safeAreaInsetBottom', 'visible', 'overlay', 'duration', 'lockScroll', 'overlayStyle', 'overlayClass', 'closeOnClickOverlay']), {
+    children: [renderHeader(), renderRows(), renderCancelButton()]
+  }));
+};
+export default ShareSheet;

package/es/share-sheet/index.d.ts

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

package/es/share-sheet/index.js

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

package/es/share-sheet/style/index.css

@@ -0,0 +1,103 @@
+:root {
+  --rv-share-sheet-header-padding: var(--rv-padding-sm) var(--rv-padding-md) var(--rv-padding-base);
+  --rv-share-sheet-title-color: var(--rv-text-color);
+  --rv-share-sheet-title-font-size: var(--rv-font-size-md);
+  --rv-share-sheet-title-line-height: var(--rv-line-height-md);
+  --rv-share-sheet-description-color: var(--rv-gray-6);
+  --rv-share-sheet-description-font-size: var(--rv-font-size-sm);
+  --rv-share-sheet-description-line-height: 16px;
+  --rv-share-sheet-icon-size: 48px;
+  --rv-share-sheet-option-name-color: var(--rv-gray-7);
+  --rv-share-sheet-option-name-font-size: var(--rv-font-size-sm);
+  --rv-share-sheet-option-description-color: var(--rv-gray-5);
+  --rv-share-sheet-option-description-font-size: var(--rv-font-size-sm);
+  --rv-share-sheet-cancel-button-font-size: var(--rv-font-size-lg);
+  --rv-share-sheet-cancel-button-height: 48px;
+  --rv-share-sheet-cancel-button-background: var(--rv-white);
+}
+.rv-share-sheet__header {
+  padding: var(--rv-share-sheet-header-padding);
+  text-align: center;
+}
+.rv-share-sheet__title {
+  margin-top: var(--rv-padding-xs);
+  color: var(--rv-share-sheet-title-color);
+  font-weight: normal;
+  font-size: var(--rv-share-sheet-title-font-size);
+  line-height: var(--rv-share-sheet-title-line-height);
+}
+.rv-share-sheet__description {
+  display: block;
+  margin-top: var(--rv-padding-xs);
+  color: var(--rv-share-sheet-description-color);
+  font-size: var(--rv-share-sheet-description-font-size);
+  line-height: var(--rv-share-sheet-description-line-height);
+}
+.rv-share-sheet__options {
+  position: relative;
+  display: flex;
+  padding: var(--rv-padding-md) 0 var(--rv-padding-md) var(--rv-padding-xs);
+  overflow-x: auto;
+  overflow-y: visible;
+  -webkit-overflow-scrolling: touch;
+}
+.rv-share-sheet__options--border::before {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  top: 0;
+  right: 0;
+  left: var(--rv-padding-md);
+  border-top: 1px solid var(--rv-border-color);
+  transform: scaleY(0.5);
+}
+.rv-share-sheet__options::-webkit-scrollbar {
+  height: 0;
+}
+.rv-share-sheet__option {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+}
+.rv-share-sheet__option:active {
+  opacity: var(--rv-active-opacity);
+}
+.rv-share-sheet__icon {
+  width: var(--rv-share-sheet-icon-size);
+  height: var(--rv-share-sheet-icon-size);
+  margin: 0 var(--rv-padding-md);
+}
+.rv-share-sheet__name {
+  margin-top: var(--rv-padding-xs);
+  padding: 0 var(--rv-padding-base);
+  color: var(--rv-share-sheet-option-name-color);
+  font-size: var(--rv-share-sheet-option-name-font-size);
+}
+.rv-share-sheet__option-description {
+  padding: 0 var(--rv-padding-base);
+  color: var(--rv-share-sheet-option-description-color);
+  font-size: var(--rv-share-sheet-option-description-font-size);
+}
+.rv-share-sheet__cancel {
+  display: block;
+  width: 100%;
+  padding: 0;
+  font-size: var(--rv-share-sheet-cancel-button-font-size);
+  line-height: var(--rv-share-sheet-cancel-button-height);
+  text-align: center;
+  background: var(--rv-share-sheet-cancel-button-background);
+  border: none;
+  cursor: pointer;
+}
+.rv-share-sheet__cancel::before {
+  display: block;
+  height: var(--rv-padding-xs);
+  background-color: var(--rv-background-color);
+  content: ' ';
+}
+.rv-share-sheet__cancel:active {
+  background-color: var(--rv-active-color);
+}

package/es/sidebar/PropsType.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import { BaseTypeProps } from '../utils';
+export declare type SidebarProvide = {
+    /** @private */
+    parent?: {
+        getActive: () => number;
+        setActive: (value: number) => void;
+    };
+    /** @private */
+    index?: number;
+};
+export interface SidebarProps extends BaseTypeProps {
+    /** 当前导航项的索引	 */
+    value?: number;
+    /** 默认索引 */
+    defaultValue?: number;
+    /** 左侧容器类名 */
+    sideClassName?: string;
+    /** 左侧容器样式 */
+    sideStyle?: React.CSSProperties;
+    /** 切换导航项时触发	 */
+    onChange?: (value: number) => void;
+    children?: React.ReactElement | React.ReactElement[];
+}
+export interface SidebarItemProps {
+    /** 是否显示右上角小红点	 */
+    dot?: boolean;
+    /** 内容 */
+    title?: React.ReactNode;
+    /** 图标右上角徽标的内容	 */
+    badge?: number | string;
+    /** 是否禁用该项	 */
+    disabled?: boolean;
+    /** 内容区域类名 */
+    contentClassName?: string;
+    /** 内容区域样式 */
+    contentStyle?: React.CSSProperties;
+    /** 点击时触发	 */
+    onClick?: (value: number) => void;
+    children?: React.ReactNode;
+}

package/es/sidebar/PropsType.js

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

package/es/sidebar/Sidebar.d.ts

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