react-vant-nova 1.0.0-test

package/lib/skeleton/Skeleton.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function _tslib() {
+  const data = require("tslib");
+  _tslib = 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");
+var _getDefaultProps = require("../utils/get-default-props");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const DEFAULT_ROW_WIDTH = '100%';
+const DEFAULT_LAST_ROW_WIDTH = '60%';
+const [bem] = (0, _utils.createNamespace)('skeleton');
+const Skeleton = _a => {
+  var {
+      children,
+      className,
+      style
+    } = _a,
+    p = (0, _tslib().__rest)(_a, ["children", "className", "style"]);
+  const props = (0, _getDefaultProps.mergeProps)(p, {
+    loading: true,
+    animate: true,
+    round: true,
+    row: 3,
+    avatarShape: 'round',
+    rowWidth: DEFAULT_ROW_WIDTH
+  });
+  const getRowWidth = index => {
+    const {
+      rowWidth
+    } = props;
+    if (rowWidth === DEFAULT_ROW_WIDTH && index === +props.row - 1 && index !== 0) {
+      return DEFAULT_LAST_ROW_WIDTH;
+    }
+    if (Array.isArray(rowWidth)) {
+      return rowWidth[index];
+    }
+    return rowWidth;
+  };
+  const getRowHeight = index => {
+    const {
+      rowHeight
+    } = props;
+    if (Array.isArray(rowHeight)) {
+      return rowHeight[index];
+    }
+    return rowHeight;
+  };
+  const renderAvatar = () => {
+    if (props.avatar) {
+      return (0, _jsxRuntime().jsx)("div", {
+        className: (0, _clsx().default)(bem('avatar', props.avatarShape)),
+        style: (0, _utils.getSizeStyle)(props.avatarSize)
+      });
+    }
+    return null;
+  };
+  const renderTitle = () => {
+    if (props.title) {
+      const width = (0, _utils.addUnit)(props.titleWidth);
+      const height = (0, _utils.addUnit)(getRowHeight(0));
+      return (0, _jsxRuntime().jsx)("div", {
+        className: (0, _clsx().default)(bem('title')),
+        style: {
+          width,
+          height
+        }
+      });
+    }
+    return null;
+  };
+  const renderRows = () => Array(props.row).fill('').map((_, i) => {
+    const width = (0, _utils.addUnit)(getRowWidth(i));
+    const height = (0, _utils.addUnit)(getRowHeight(i));
+    // eslint-disable-next-line react/no-array-index-key
+    return (0, _jsxRuntime().jsx)("div", {
+      className: (0, _clsx().default)(bem('row')),
+      style: {
+        width,
+        height
+      }
+    }, i);
+  });
+  if (!props.loading) return (0, _jsxRuntime().jsx)(_jsxRuntime().Fragment, {
+    children: children
+  });
+  return (0, _jsxRuntime().jsxs)("div", Object.assign({
+    className: (0, _clsx().default)(className, bem({
+      animate: props.animate,
+      round: props.round
+    })),
+    style: style
+  }, {
+    children: [renderAvatar(), (0, _jsxRuntime().jsxs)("div", Object.assign({
+      className: (0, _clsx().default)(bem('content'))
+    }, {
+      children: [renderTitle(), renderRows()]
+    }))]
+  }));
+};
+var _default = exports.default = Skeleton;

package/lib/skeleton/index.d.ts

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

package/lib/skeleton/index.js

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

package/lib/skeleton/style/index.css

@@ -0,0 +1,56 @@
+:root {
+  --rv-skeleton-row-height: 16px;
+  --rv-skeleton-row-background-color: var(--rv-active-color);
+  --rv-skeleton-row-margin-top: var(--rv-padding-sm);
+  --rv-skeleton-title-width: 40%;
+  --rv-skeleton-avatar-size: 32px;
+  --rv-skeleton-avatar-background-color: var(--rv-active-color);
+  --rv-skeleton-animation-duration: 1.2s;
+}
+.rv-skeleton {
+  display: flex;
+  padding: 0 var(--rv-padding-md);
+}
+.rv-skeleton__avatar {
+  flex-shrink: 0;
+  width: var(--rv-skeleton-avatar-size);
+  height: var(--rv-skeleton-avatar-size);
+  margin-right: var(--rv-padding-md);
+  background-color: var(--rv-skeleton-avatar-background-color);
+}
+.rv-skeleton__avatar--round {
+  border-radius: var(--rv-border-radius-max);
+}
+.rv-skeleton__content {
+  width: 100%;
+}
+.rv-skeleton__avatar + .rv-skeleton__content {
+  padding-top: var(--rv-padding-xs);
+}
+.rv-skeleton__row,
+.rv-skeleton__title {
+  height: var(--rv-skeleton-row-height);
+  background-color: var(--rv-skeleton-row-background-color);
+}
+.rv-skeleton__title {
+  width: var(--rv-skeleton-title-width);
+  margin: 0;
+}
+.rv-skeleton__row:not(:first-child) {
+  margin-top: var(--rv-skeleton-row-margin-top);
+}
+.rv-skeleton__title + .rv-skeleton__row {
+  margin-top: 20px;
+}
+.rv-skeleton--animate {
+  animation: rv-skeleton-blink var(--rv-skeleton-animation-duration) ease-in-out infinite;
+}
+.rv-skeleton--round .rv-skeleton__row,
+.rv-skeleton--round .rv-skeleton__title {
+  border-radius: var(--rv-border-radius-max);
+}
+@keyframes rv-skeleton-blink {
+  50% {
+    opacity: 0.6;
+  }
+}

package/lib/sku/PropsType.d.ts

@@ -0,0 +1,189 @@
+import React from 'react';
+import { PopupProps } from '../popup/PropsType';
+import { TeleportType } from '../utils';
+export declare type SkuData = {
+    price: string | number;
+    none_sku: boolean;
+    stock_num: number;
+    hide_stock?: boolean;
+    collection_id?: number;
+    tree: SkuTreeItemData[];
+    list: SkuListItemData[];
+    properties?: SkuPropItemData[];
+};
+export declare type SkuTreeItemData = {
+    k: string | number;
+    v: SkuTreeItemValueData[];
+    k_s: string | number;
+    is_multiple?: boolean;
+};
+export declare type SkuTreeItemValueData = {
+    id: string | number;
+    name: string | number;
+    imgUrl?: string;
+    img_url?: string;
+    previewImgUrl?: string;
+};
+export declare type SkuPropItemData = {
+    k: number | string;
+    v: SkuPropItemValueData[];
+    k_id: string | number;
+    is_multiple?: boolean;
+    is_necessary?: boolean;
+};
+export declare type SkuPropItemValueData = {
+    id: number | string;
+    name: string;
+    price?: string | number;
+};
+export declare type SkuListItemData = {
+    id: number;
+    s1: string;
+    s2: string;
+    s3: string;
+    price: number;
+    stock_num: number;
+};
+export declare type SkuMessageData = {
+    name: string;
+    type: string;
+    required?: string;
+    datetime?: string;
+    multiple?: string;
+    placeholder?: string;
+};
+export declare type SkuGoodsData = {
+    title: string;
+    picture: string;
+};
+export declare type SelectedSkuData = Record<string, string>;
+export declare type SkuValueType = Record<string | number, (string | number)[]>;
+export declare type SkuFieldNames = {
+    text?: string;
+    value?: string;
+    children?: string;
+};
+export declare type SkuActionType = 'add-cart' | 'buy-clicked';
+export declare type SkuStateType = {
+    selectedSku?: Record<string | number, string | number>;
+    selectedProp?: Record<string | number, string | number | unknown>;
+    selectedNum?: number;
+};
+export interface SkuProps {
+    /** 商品sku数据 */
+    sku: any;
+    /** 商品信息	 */
+    goods: Record<string | number, unknown>;
+    /** 商品id */
+    goodsId?: number | string;
+    /** 显示在价格后面的标签	 */
+    priceTag?: React.ReactNode;
+    /** 是否显示限购提示	 */
+    hideQuotaText?: boolean;
+    /** 是否隐藏已选提示 */
+    hideSelectedText?: boolean;
+    /** 是否显示商品剩余库存	 */
+    hideStock?: boolean;
+    /** 库存阈值。低于这个值会把库存数高亮显示	 */
+    stockThreshold?: number;
+    /** 是否显示加入购物车按钮	 */
+    showAddCartBtn?: boolean;
+    /** 购买按钮文字	 */
+    buyText?: string;
+    /** 加入购物车按钮文字	 */
+    addCartText?: string;
+    /** 限购数，0 表示不限购	 */
+    quota?: number;
+    /** 已经购买过的数量	 */
+    quotaUsed?: number;
+    /** 隐藏时重置状态 */
+    resetOnHide?: boolean;
+    /** 是否禁用步进器输入	 */
+    disableStepperInput?: boolean;
+    /** 是否在点击遮罩层后关闭	 */
+    closeOnClickOverlay?: boolean;
+    /** 数量选择组件左侧文案	 */
+    stepperTitle?: React.ReactNode;
+    /** 步进器相关自定义配置	 */
+    customStepperConfig?: any;
+    /** 指定挂载的节点 */
+    getContainer?: TeleportType;
+    /** 默认选中的 sku */
+    initialSku?: SkuStateType;
+    /** 是否展示售罄的 sku，默认展示并置灰	 */
+    showSoldoutSku?: boolean;
+    /** 是否禁用售罄的 sku	 */
+    disableSoldoutSku?: boolean;
+    /** 是否开启底部安全区适配	 */
+    safeAreaInsetBottom?: boolean;
+    /** 起售数量	 */
+    startSaleNum?: number;
+    /** 商品属性 */
+    properties?: SkuPropItemData[];
+    /** 自定义预览icon */
+    previewIcon?: React.ReactNode;
+    /** 是否在点击商品图片时自动预览	 */
+    previewOnClickImage?: boolean;
+    /** 是否展示头部图片	 */
+    showHeaderImage?: boolean;
+    /** 是否开启图片懒加载 */
+    lazyload?: boolean;
+    /**
+     * sku距视窗顶部距离
+     * @default 200
+     */
+    bodyOffsetTop?: number;
+    popupProps?: Omit<PopupProps, 'visible' | 'children'>;
+    /** 商品信息展示区，包含商品图片、名称、价格等信息 */
+    skuHeader?: React.ReactNode;
+    /** 自定义 sku 头部价格展示 */
+    skuHeaderPriceRender?: (price: number) => React.ReactNode;
+    /** 自定义 sku 头部原价展示 */
+    skuHeaderOriginPrice?: React.ReactNode;
+    /** 额外 sku 头部区域 */
+    skuHeaderExtra?: React.ReactNode;
+    /** 自定义 sku 头部图片额外的展示 */
+    skuHeaderImageExtra?: React.ReactNode;
+    /** sku 展示区上方的内容，无默认展示内容，按需使用 */
+    skuBodyTop?: React.ReactNode;
+    /** 自定义商品 sku 展示区 */
+    skuGroup?: React.ReactNode;
+    /** 额外商品 sku 展示区，一般用不到 */
+    skuGroupExtra?: React.ReactNode;
+    /** 自定义商品数量选择区 */
+    skuStepper?: React.ReactNode;
+    /** 操作按钮区顶部内容，无默认展示内容，按需使用 */
+    skuActionsTop?: React.ReactNode;
+    /** 操作按钮区底部内容，无默认展示内容，按需使用 */
+    skuActionsBottom?: React.ReactNode;
+    /** 自定义操作按钮区 */
+    skuActions?: React.ReactNode;
+    /** 自定义库存渲染方法 */
+    stockRender?: (stock: number) => React.ReactNode;
+    /** 自定义sku校验规则 */
+    customSkuValidator?: (actionType: SkuActionType, selectedSku: SkuValueType) => void | boolean | Promise<boolean>;
+    /** 点击添加购物车回调	 */
+    onAddCart?: (value: SkuValueType) => void;
+    /** 点击购买回调	 */
+    onBuyClicked?: (value: SkuValueType) => void;
+    /** 购买数量变化时触发	 */
+    onStepperChange?: (value: number) => void;
+    /** 切换规格类目时触发	 */
+    onSkuSelected?: (value: any) => void;
+    /** 切换商品属性时触发	 */
+    onSkuPropSelected?: (value: any) => void;
+    /** 打开商品图片预览时触发	 */
+    onOpenPreview?: (data: any) => void;
+    /** 关闭商品图片预览时触发	 */
+    onClosePreview?: (data: any) => void;
+}
+export declare type SkuInstance = {
+    /** 重置Sku到初始状态	 */
+    reset: () => void;
+    /** 打开Sku，支持设置默认值 */
+    show: (initialValue?: SkuStateType) => void;
+    /** 更新Sku设置 */
+    update: (initialValue: SkuStateType) => void;
+    /** 获取当前 skuData */
+    getSkuData: () => SkuStateType;
+};

package/lib/sku/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/sku/Sku.d.ts

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