persagy-vant 0.0.29 → 0.0.30

package/lib/count-down/README.zh-CN.md

@@ -1,235 +0,0 @@
-# 倒计时 CountDown
-
-### 介绍
-
-用于实时展示倒计时数值，支持毫秒精度。
-
-### 引入
-
-通过以下方式来全局注册组件，更多注册方式请参考[组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce)。
-
-```js
-import { createApp } from 'vue';
-import { CountDown } from 'vant';
-
-const app = createApp();
-app.use(CountDown);
-```
-
-## 代码演示
-
-### 基础用法
-
-`time` 属性表示倒计时总时长，单位为毫秒。
-
-```html
-<van-count-down :time="time" />
-```
-
-```js
-import { ref } from 'vue';
-
-export default {
-  setup() {
-    const time = ref(30 * 60 * 60 * 1000);
-    return { time };
-  },
-};
-```
-
-### 自定义格式
-
-通过 `format` 属性设置倒计时文本的内容。
-
-```html
-<van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" />
-```
-
-### 毫秒级渲染
-
-倒计时默认每秒渲染一次，设置 `millisecond` 属性可以开启毫秒级渲染。
-
-```html
-<van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
-```
-
-### 自定义样式
-
-通过插槽自定义倒计时的样式，`timeData` 对象格式见下方表格。
-
-```html
-<van-count-down :time="time">
-  <template #default="timeData">
-    <span class="block">{{ timeData.hours }}</span>
-    <span class="colon">:</span>
-    <span class="block">{{ timeData.minutes }}</span>
-    <span class="colon">:</span>
-    <span class="block">{{ timeData.seconds }}</span>
-  </template>
-</van-count-down>
-
-<style>
-  .colon {
-    display: inline-block;
-    margin: 0 4px;
-    color: #ee0a24;
-  }
-  .block {
-    display: inline-block;
-    width: 22px;
-    color: #fff;
-    font-size: 12px;
-    text-align: center;
-    background-color: #ee0a24;
-  }
-</style>
-```
-
-### 手动控制
-
-通过 ref 获取到组件实例后，可以调用 `start`、`pause`、`reset` 方法。
-
-```html
-<van-count-down
-  ref="countDown"
-  millisecond
-  :time="3000"
-  :auto-start="false"
-  format="ss:SSS"
-  @finish="onFinish"
-/>
-<van-grid clickable>
-  <van-grid-item text="开始" icon="play-circle-o" @click="start" />
-  <van-grid-item text="暂停" icon="pause-circle-o" @click="pause" />
-  <van-grid-item text="重置" icon="replay" @click="reset" />
-</van-grid>
-```
-
-```js
-import { Toast } from 'vant';
-
-export default {
-  setup() {
-    const countDown = ref(null);
-
-    const start = () => {
-      countDown.value.start();
-    };
-    const pause = () => {
-      countDown.value.pause();
-    };
-    const reset = () => {
-      countDown.value.reset();
-    };
-    const onFinish = () => Toast('倒计时结束');
-
-    return {
-      start,
-      pause,
-      reset,
-      onFinish,
-      countDown,
-    };
-  },
-};
-```
-
-## API
-
-### Props
-
-| 参数        | 说明                 | 类型               | 默认值     |
-| ----------- | -------------------- | ------------------ | ---------- |
-| time        | 倒计时时长，单位毫秒 | _number \| string_ | `0`        |
-| format      | 时间格式             | _string_           | `HH:mm:ss` |
-| auto-start  | 是否自动开始倒计时   | _boolean_          | `true`     |
-| millisecond | 是否开启毫秒级渲染   | _boolean_          | `false`    |
-
-### format 格式
-
-| 格式 | 说明         |
-| ---- | ------------ |
-| DD   | 天数         |
-| HH   | 小时         |
-| mm   | 分钟         |
-| ss   | 秒数         |
-| S    | 毫秒（1 位） |
-| SS   | 毫秒（2 位） |
-| SSS  | 毫秒（3 位） |
-
-### Events
-
-| 事件名 | 说明             | 回调参数                   |
-| ------ | ---------------- | -------------------------- |
-| finish | 倒计时结束时触发 | -                          |
-| change | 倒计时变化时触发 | _currentTime: CurrentTime_ |
-
-### Slots
-
-| 名称    | 说明       | 参数                       |
-| ------- | ---------- | -------------------------- |
-| default | 自定义内容 | _currentTime: CurrentTime_ |
-
-### CurrentTime 格式
-
-| 名称         | 说明                   | 类型     |
-| ------------ | ---------------------- | -------- |
-| total        | 剩余总时间（单位毫秒） | _number_ |
-| days         | 剩余天数               | _number_ |
-| hours        | 剩余小时               | _number_ |
-| minutes      | 剩余分钟               | _number_ |
-| seconds      | 剩余秒数               | _number_ |
-| milliseconds | 剩余毫秒               | _number_ |
-
-### 方法
-
-通过 ref 可以获取到 CountDown 实例并调用实例方法，详见[组件实例方法](#/zh-CN/advanced-usage#zu-jian-shi-li-fang-fa)。
-
-| 方法名 | 说明 | 参数 | 返回值 |
-| --- | --- | --- | --- |
-| start | 开始倒计时 | - | - |
-| pause | 暂停倒计时 | - | - |
-| reset | 重设倒计时，若 `auto-start` 为 `true`，重设后会自动开始倒计时 | - | - |
-
-### 类型定义
-
-组件导出以下类型定义：
-
-```ts
-import type {
-  CountDownProps,
-  CountDownInstance,
-  CountDownCurrentTime,
-} from 'vant';
-```
-
-`CountDownInstance` 是组件实例的类型，用法如下：
-
-```ts
-import { ref } from 'vue';
-import type { CountDownInstance } from 'vant';
-
-const countDownRef = ref<CountDownInstance>();
-
-countDownRef.value?.start();
-```
-
-## 主题定制
-
-### 样式变量
-
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
-
-| 名称                         | 默认值                      | 描述 |
-| ---------------------------- | --------------------------- | ---- |
-| --van-count-down-text-color  | _var(--van-text-color)_     | -    |
-| --van-count-down-font-size   | _var(--van-font-size-md)_   | -    |
-| --van-count-down-line-height | _var(--van-line-height-md)_ | -    |
-
-## 常见问题
-
-### 在 iOS 系统上倒计时不生效？
-
-如果你遇到了在 iOS 上倒计时不生效的问题，请确认在创建 Date 对象时没有使用`new Date('2020-01-01')`这样的写法，iOS 不支持以中划线分隔的日期格式，正确写法是`new Date('2020/01/01')`。
-
-对此问题的详细解释：[stackoverflow](https://stackoverflow.com/questions/13363673/javascript-date-is-invalid-on-ios)。

package/lib/count-down/index.ts

@@ -1,13 +0,0 @@
-import { withInstall } from '../utils';
-import _CountDown from './CountDown';
-
-export const CountDown = withInstall(_CountDown);
-export default CountDown;
-export type { CountDownProps } from './CountDown';
-export type { CountDownInstance, CountDownCurrentTime } from './types';
-
-declare module 'vue' {
-  export interface GlobalComponents {
-    VanCountDown: typeof CountDown;
-  }
-}

package/lib/count-down/types.ts

@@ -1,16 +0,0 @@
-import type { ComponentPublicInstance } from 'vue';
-import type { CurrentTime } from '@vant/use';
-import type { CountDownProps } from './CountDown';
-
-type CountDownExpose = {
-  start: () => void;
-  pause: () => void;
-  reset: () => void;
-};
-
-export type CountDownInstance = ComponentPublicInstance<
-  CountDownProps,
-  CountDownExpose
->;
-
-export type CountDownCurrentTime = CurrentTime;

package/lib/count-down/utils.ts

@@ -1,45 +0,0 @@
-import { padZero } from '../utils';
-import { CurrentTime } from '@vant/use';
-
-export function parseFormat(format: string, currentTime: CurrentTime): string {
-  const { days } = currentTime;
-  let { hours, minutes, seconds, milliseconds } = currentTime;
-
-  if (format.includes('DD')) {
-    format = format.replace('DD', padZero(days));
-  } else {
-    hours += days * 24;
-  }
-
-  if (format.includes('HH')) {
-    format = format.replace('HH', padZero(hours));
-  } else {
-    minutes += hours * 60;
-  }
-
-  if (format.includes('mm')) {
-    format = format.replace('mm', padZero(minutes));
-  } else {
-    seconds += minutes * 60;
-  }
-
-  if (format.includes('ss')) {
-    format = format.replace('ss', padZero(seconds));
-  } else {
-    milliseconds += seconds * 1000;
-  }
-
-  if (format.includes('S')) {
-    const ms = padZero(milliseconds, 3);
-
-    if (format.includes('SSS')) {
-      format = format.replace('SSS', ms);
-    } else if (format.includes('SS')) {
-      format = format.replace('SS', ms.slice(0, 2));
-    } else {
-      format = format.replace('S', ms.charAt(0));
-    }
-  }
-
-  return format;
-}

package/lib/coupon/Coupon.tsx

@@ -1,95 +0,0 @@
-import { computed, defineComponent, type PropType } from 'vue';
-import {
-  makeStringProp,
-  createNamespace,
-  makeRequiredProp,
-  type Numeric,
-} from '../utils';
-import { getDate, formatAmount, formatDiscount } from './utils';
-import { Checkbox } from '../checkbox';
-
-export type CouponInfo = {
-  id: Numeric;
-  name: string;
-  endAt: number;
-  value: number;
-  startAt: number;
-  reason?: string;
-  discount?: number;
-  unitDesc?: string;
-  condition?: string;
-  valueDesc?: string;
-  description: string;
-  denominations?: number;
-  originCondition?: number;
-};
-
-const [name, bem, t] = createNamespace('coupon');
-
-export default defineComponent({
-  name,
-
-  props: {
-    chosen: Boolean,
-    coupon: makeRequiredProp<PropType<CouponInfo>>(Object),
-    disabled: Boolean,
-    currency: makeStringProp('¥'),
-  },
-
-  setup(props) {
-    const validPeriod = computed(() => {
-      const { startAt, endAt } = props.coupon;
-      return `${getDate(startAt)} - ${getDate(endAt)}`;
-    });
-
-    const faceAmount = computed(() => {
-      const { coupon, currency } = props;
-
-      if (coupon.valueDesc) {
-        return [coupon.valueDesc, <span>{coupon.unitDesc || ''}</span>];
-      }
-
-      if (coupon.denominations) {
-        const denominations = formatAmount(coupon.denominations);
-        return [<span>{currency}</span>, ` ${denominations}`];
-      }
-
-      if (coupon.discount) {
-        return t('discount', formatDiscount(coupon.discount));
-      }
-
-      return '';
-    });
-
-    const conditionMessage = computed(() => {
-      const condition = formatAmount(props.coupon.originCondition || 0);
-      return condition === '0' ? t('unlimited') : t('condition', condition);
-    });
-
-    return () => {
-      const { chosen, coupon, disabled } = props;
-      const description = (disabled && coupon.reason) || coupon.description;
-
-      return (
-        <div class={bem({ disabled })}>
-          <div class={bem('content')}>
-            <div class={bem('head')}>
-              <h2 class={bem('amount')}>{faceAmount.value}</h2>
-              <p class={bem('condition')}>
-                {coupon.condition || conditionMessage.value}
-              </p>
-            </div>
-            <div class={bem('body')}>
-              <p class={bem('name')}>{coupon.name}</p>
-              <p class={bem('valid')}>{validPeriod.value}</p>
-              {!disabled && (
-                <Checkbox class={bem('corner')} modelValue={chosen} />
-              )}
-            </div>
-          </div>
-          {description && <p class={bem('description')}>{description}</p>}
-        </div>
-      );
-    };
-  },
-});

package/lib/coupon/index.ts

@@ -1,12 +0,0 @@
-import { withInstall } from '../utils';
-import _Coupon from './Coupon';
-
-export const Coupon = withInstall(_Coupon);
-export default Coupon;
-export type { CouponInfo } from './Coupon';
-
-declare module 'vue' {
-  export interface GlobalComponents {
-    VanCoupon: typeof Coupon;
-  }
-}

package/lib/coupon/utils.ts

@@ -1,14 +0,0 @@
-import { padZero } from '../utils';
-
-export function getDate(timeStamp: number) {
-  const date = new Date(timeStamp * 1000);
-  return `${date.getFullYear()}.${padZero(date.getMonth() + 1)}.${padZero(
-    date.getDate()
-  )}`;
-}
-
-export const formatDiscount = (discount: number) =>
-  (discount / 10).toFixed(discount % 10 === 0 ? 0 : 1);
-
-export const formatAmount = (amount: number) =>
-  (amount / 100).toFixed(amount % 100 === 0 ? 0 : amount % 10 === 0 ? 1 : 2);

package/lib/coupon-cell/CouponCell.tsx

@@ -1,70 +0,0 @@
-import { defineComponent, type ExtractPropTypes } from 'vue';
-
-// Utils
-import {
-  isDef,
-  truthProp,
-  makeArrayProp,
-  makeStringProp,
-  makeNumericProp,
-  createNamespace,
-} from '../utils';
-
-// Components
-import { Cell } from '../cell';
-
-// Types
-import type { CouponInfo } from '../coupon';
-
-const [name, bem, t] = createNamespace('coupon-cell');
-
-const couponCellProps = {
-  title: String,
-  border: truthProp,
-  editable: truthProp,
-  coupons: makeArrayProp<CouponInfo>(),
-  currency: makeStringProp('¥'),
-  chosenCoupon: makeNumericProp(-1),
-};
-
-export type CouponCellProps = ExtractPropTypes<typeof couponCellProps>;
-
-function formatValue({ coupons, chosenCoupon, currency }: CouponCellProps) {
-  const coupon = coupons[+chosenCoupon];
-
-  if (coupon) {
-    let value = 0;
-
-    if (isDef(coupon.value)) {
-      ({ value } = coupon);
-    } else if (isDef(coupon.denominations)) {
-      value = coupon.denominations;
-    }
-
-    return `-${currency} ${(value / 100).toFixed(2)}`;
-  }
-
-  return coupons.length === 0 ? t('noCoupon') : t('count', coupons.length);
-}
-
-export default defineComponent({
-  name,
-
-  props: couponCellProps,
-
-  setup(props) {
-    return () => {
-      const selected = props.coupons[+props.chosenCoupon];
-      return (
-        <Cell
-          class={bem()}
-          value={formatValue(props)}
-          title={props.title || t('title')}
-          border={props.border}
-          isLink={props.editable}
-          valueClass={bem('value', { selected })}
-        />
-      );
-    };
-  },
-});

package/lib/coupon-cell/index.ts

@@ -1,12 +0,0 @@
-import { withInstall } from '../utils';
-import _CouponCell from './CouponCell';
-
-export const CouponCell = withInstall(_CouponCell);
-export default CouponCell;
-export type { CouponCellProps } from './CouponCell';
-
-declare module 'vue' {
-  export interface GlobalComponents {
-    VanCouponCell: typeof CouponCell;
-  }
-}