persagy-vant 0.0.29 → 0.0.30

package/lib/cell/README.zh-CN.md

@@ -1,294 +0,0 @@
-# 单元格 Cell
-
-### 介绍
-
-单元格为列表中的单个展示项。
-
-### 引入
-
-通过以下方式来全局注册组件，更多注册方式请参考[组件注册](#/zh-CN/advanced-usage#zu-jian-zhu-ce)。
-
-```js
-import { createApp } from 'vue';
-import { Cell, CellGroup } from 'vant';
-
-const app = createApp();
-app.use(Cell);
-app.use(CellGroup);
-```
-
-## 代码演示
-
-### 基础用法
-
-`Cell` 可以单独使用，也可以与 `CellGroup` 搭配使用，`CellGroup` 可以为 `Cell` 提供上下外边框。
-
-```html
-<van-cell-group>
-  <van-cell title="单元格" value="内容" />
-  <van-cell title="单元格" value="内容" label="描述信息" />
-</van-cell-group>
-```
-
-### 卡片风格
-
-通过 `CellGroup` 的 `inset` 属性，可以将单元格转换为圆角卡片风格（从 3.1.0 版本开始支持）。
-
-```html
-<van-cell-group inset>
-  <van-cell title="单元格" value="内容" />
-  <van-cell title="单元格" value="内容" label="描述信息" />
-</van-cell-group>
-```
-
-### 单元格大小
-
-通过 `size` 属性可以控制单元格的大小。
-
-```html
-<van-cell title="单元格" value="内容" size="large" />
-<van-cell title="单元格" value="内容" size="large" label="描述信息" />
-```
-
-### 展示图标
-
-通过 `icon` 属性在标题左侧展示图标。
-
-```html
-<van-cell title="单元格" icon="location-o" />
-```
-
-### 只设置 value
-
-只设置 `value` 时，内容会靠左对齐。
-
-```html
-<van-cell value="内容" />
-```
-
-### 展示箭头
-
-设置 `is-link` 属性后会在单元格右侧显示箭头，并且可以通过 `arrow-direction` 属性控制箭头方向。
-
-```html
-<van-cell title="单元格" is-link />
-<van-cell title="单元格" is-link value="内容" />
-<van-cell title="单元格" is-link arrow-direction="down" value="内容" />
-```
-
-### 页面导航
-
-示例通过点击事件在新标签页打开 Meri Design 官网，模拟器会停留在当前页，因此顶部返回导航会一直保留；项目内部路由可通过 `to` 属性跳转。
-
-```html
-<van-cell title="URL 跳转" is-link @click="openMeriDesign" />
-<van-cell title="路由跳转" is-link @click="openMeriDesign" />
-
-<script setup>
-const openMeriDesign = () => {
-  window.open('https://www.meridesign.cn/', '_blank', 'noopener,noreferrer');
-};
-</script>
-```
-
-### 分组标题
-
-通过 `CellGroup` 的 `title` 属性可以指定分组标题。
-
-```html
-<van-cell-group title="分组1">
-  <van-cell title="单元格" value="内容" />
-</van-cell-group>
-<van-cell-group title="分组2">
-  <van-cell title="单元格" value="内容" />
-</van-cell-group>
-```
-
-### 扩展元素
-
-通过属性可以快速组合单元格两侧的常用元素；需要更复杂内容时，可使用下方 API 中对应的插槽覆盖。
-
-```html
-<van-cell title="必填" required />
-<van-cell title="前置选择" left-select />
-<van-cell title="后置选择" right-select />
-<van-cell title="头像" avatar="https://example.com/avatar.png" />
-<van-cell title="前图标" icon="smile-o" />
-<van-cell title="前置小蓝标" blue-mark />
-<van-cell title="标签组" :tags="['标签 1', '标签 2']" />
-<van-cell title="跟随图标" title-icon="smile-o" />
-<van-cell title="右图标" right-icon="arrow" />
-<van-cell title="右图标 + 备注" right-icon="arrow" note="备注" />
-<van-cell title="右侧备注文本" note="备注" />
-<van-cell title="右侧头像" right-avatar="https://example.com/avatar.png" />
-<van-cell title="右侧徽标" badge="9" />
-```
-
-### 使用插槽
-
-如以上用法不能满足你的需求，可以使用插槽来自定义内容。
-
-```html
-<van-cell value="内容" is-link>
-  <!-- 使用 title 插槽来自定义标题 -->
-  <template #title>
-    <span class="custom-title">单元格</span>
-    <van-tag type="danger">标签</van-tag>
-  </template>
-</van-cell>
-
-<van-cell title="单元格" icon="shop-o">
-  <!-- 使用 right-icon 插槽来自定义右侧图标 -->
-  <template #right-icon>
-    <van-icon name="search" class="search-icon" />
-  </template>
-</van-cell>
-
-<style>
-  .custom-title {
-    margin-right: 4px;
-    vertical-align: middle;
-  }
-
-  .search-icon {
-    font-size: 16px;
-    line-height: inherit;
-  }
-</style>
-```
-
-### 垂直居中
-
-通过 `center` 属性可以让 `Cell` 的左右内容都垂直居中。
-
-```html
-<van-cell center title="单元格" value="内容" label="描述信息" />
-```
-
-## API
-
-### CellGroup Props
-
-| 参数           | 说明                   | 类型      | 默认值  |
-| -------------- | ---------------------- | --------- | ------- |
-| title          | 分组标题               | _string_  | `-`     |
-| inset `v3.1.0` | 是否展示为圆角卡片风格 | _boolean_ | `false` |
-| border         | 是否显示外边框         | _boolean_ | `true`  |
-
-### Cell Props
-
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| title | 左侧标题 | _number \| string_ | - |
-| value | 右侧内容 | _number \| string_ | - |
-| label | 标题下方的描述信息 | _string_ | - |
-| size | 单元格大小，可选值为 `normal` `large` | _string_ | `normal` |
-| icon | 左侧图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
-| avatar | 左侧头像图片链接 | _string_ | - |
-| left-select | 是否展示前置选择图标 | _boolean_ | `false` |
-| blue-mark | 是否展示前置小蓝标 | _boolean_ | `false` |
-| tags | 标题后方标签组 | _Array&lt;number \| string&gt;_ | - |
-| title-icon | 跟随标题展示的图标名称 | _string_ | - |
-| icon-prefix | 图标类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
-| right-icon | 右侧图标名称，优先级高于 `is-link` | _string_ | - |
-| right-select | 是否展示后置选择图标 | _boolean_ | `false` |
-| note | 右侧备注文本 | _number \| string_ | - |
-| right-avatar | 右侧头像图片链接 | _string_ | - |
-| badge | 右侧徽标内容 | _number \| string_ | - |
-| url | 点击后跳转的链接地址 | _string_ | - |
-| to | 点击后跳转的目标路由对象，等同于 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
-| border | 是否显示内边框 | _boolean_ | `true` |
-| replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` |
-| clickable | 是否开启点击反馈 | _boolean_ | `null` |
-| is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` |
-| required | 是否显示表单必填星号 | _boolean_ | `false` |
-| center | 是否使内容垂直居中 | _boolean_ | `false` |
-| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | _string_ | `right` |
-| title-style | 左侧标题额外样式 | _string \| Array \| object_ | - |
-| title-class | 左侧标题额外类名 | _string \| Array \| object_ | - |
-| value-class | 右侧内容额外类名 | _string \| Array \| object_ | - |
-| label-class | 描述信息额外类名 | _string \| Array \| object_ | - |
-
-### Cell Events
-
-| 事件名 | 说明             | 回调参数            |
-| ------ | ---------------- | ------------------- |
-| click  | 点击单元格时触发 | _event: MouseEvent_ |
-
-### CellGroup Slots
-
-| 名称    | 说明           |
-| ------- | -------------- |
-| default | 默认插槽       |
-| title   | 自定义分组标题 |
-
-### Cell Slots
-
-| 名称           | 说明                         |
-| -------------- | ---------------------------- |
-| title          | 自定义左侧标题               |
-| value `v3.1.1` | 自定义右侧内容               |
-| label          | 自定义标题下方的描述信息     |
-| icon           | 自定义左侧图标               |
-| left-select    | 自定义前置选择元素           |
-| right-select   | 自定义后置选择元素           |
-| left-avatar    | 自定义左侧头像               |
-| right-avatar   | 自定义右侧头像               |
-| blue-mark      | 自定义前置小蓝标             |
-| tags           | 自定义标题后方标签组         |
-| title-icon     | 自定义跟随标题的图标         |
-| note           | 自定义右侧备注文本           |
-| badge          | 自定义右侧徽标               |
-| right-icon     | 自定义右侧图标               |
-| extra          | 自定义单元格最右侧的额外内容 |
-
-### 类型定义
-
-组件导出以下类型定义：
-
-```ts
-import type {
-  CellSize,
-  CellProps,
-  CellGroupProps,
-  CellArrowDirection,
-} from 'vant';
-```
-
-## 主题定制
-
-### 样式变量
-
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
-
-| 名称 | 默认值 | 描述 |
-| --- | --- | --- |
-| --van-cell-font-size | _var(--van-font-size-md)_ | - |
-| --van-cell-line-height | _24px_ | - |
-| --van-cell-vertical-padding | _10px_ | - |
-| --van-cell-horizontal-padding | _var(--van-padding-md)_ | - |
-| --van-cell-text-color | _var(--van-text-color)_ | - |
-| --van-cell-background-color | _var(--van-background-color-light)_ | - |
-| --van-cell-border-color | _var(--van-border-color)_ | - |
-| --van-cell-active-color | _var(--van-active-color)_ | - |
-| --van-cell-required-color | _var(--van-danger-color)_ | - |
-| --van-cell-label-color | _var(--van-text-color-2)_ | - |
-| --van-cell-label-font-size | _var(--van-font-size-sm)_ | - |
-| --van-cell-label-line-height | _var(--van-line-height-sm)_ | - |
-| --van-cell-label-margin-top | _var(--van-padding-base)_ | - |
-| --van-cell-value-color | _var(--van-text-color-2)_ | - |
-| --van-cell-icon-size | _16px_ | - |
-| --van-cell-right-icon-color | _var(--van-gray-6)_ | - |
-| --van-cell-large-vertical-padding | _var(--van-padding-sm)_ | - |
-| --van-cell-large-title-font-size | _var(--van-font-size-lg)_ | - |
-| --van-cell-large-label-font-size | _var(--van-font-size-md)_ | - |
-| --van-cell-large-value-font-size | `16px` | - |
-| --van-cell-blue-mark-width | _2px_ | 前置小蓝标宽度 |
-| --van-cell-group-background-color | _var(--van-background-color-light)_ | - |
-| --van-cell-group-title-color | _var(--van-text-color-2)_ | - |
-| --van-cell-group-title-padding | _var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs)_ | - |
-| --van-cell-group-title-font-size | _var(--van-font-size-md)_ | - |
-| --van-cell-group-title-line-height | _16px_ | - |
-| --van-cell-group-inset-padding | _0 var(--van-padding-md)_ | - |
-| --van-cell-group-inset-border-radius | _var(--van-border-radius-lg)_ | - |
-| --van-cell-group-inset-title-padding | _var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) var(--van-padding-xl)_ | - |

package/lib/cell/index.ts

@@ -1,12 +0,0 @@
-import { withInstall } from '../utils';
-import _Cell from './Cell';
-
-export const Cell = withInstall(_Cell);
-export default Cell;
-export type { CellSize, CellProps, CellArrowDirection, CellSelectType } from './Cell';
-
-declare module 'vue' {
-  export interface GlobalComponents {
-    VanCell: typeof Cell;
-  }
-}

package/lib/cell-group/CellGroup.tsx

@@ -1,53 +0,0 @@
-import { defineComponent, type ExtractPropTypes } from 'vue';
-import { truthProp, createNamespace, BORDER_TOP_BOTTOM } from '../utils';
-
-const [name, bem] = createNamespace('cell-group');
-
-const cellGroupProps = {
-  title: String,
-  inset: Boolean,
-  border: truthProp,
-};
-
-export type CellGroupProps = ExtractPropTypes<typeof cellGroupProps>;
-
-export default defineComponent({
-  name,
-
-  inheritAttrs: false,
-
-  props: cellGroupProps,
-
-  setup(props, { slots, attrs }) {
-    const renderGroup = () => (
-      <div
-        class={[
-          bem({ inset: props.inset }),
-          { [BORDER_TOP_BOTTOM]: props.border && !props.inset },
-        ]}
-        {...attrs}
-      >
-        {slots.default?.()}
-      </div>
-    );
-
-    const renderTitle = () => (
-      <div class={bem('title', { inset: props.inset })}>
-        {slots.title ? slots.title() : props.title}
-      </div>
-    );
-
-    return () => {
-      if (props.title || slots.title) {
-        return (
-          <>
-            {renderTitle()}
-            {renderGroup()}
-          </>
-        );
-      }
-
-      return renderGroup();
-    };
-  },
-});

package/lib/cell-group/index.ts

@@ -1,12 +0,0 @@
-import { withInstall } from '../utils';
-import _CellGroup from './CellGroup';
-
-export const CellGroup = withInstall(_CellGroup);
-export default CellGroup;
-export type { CellGroupProps } from './CellGroup';
-
-declare module 'vue' {
-  export interface GlobalComponents {
-    VanCellGroup: typeof CellGroup;
-  }
-}

package/lib/checkbox/Checkbox.tsx

@@ -1,98 +0,0 @@
-import { watch, computed, defineComponent, type ExtractPropTypes } from 'vue';
-
-// Utils
-import { createNamespace, extend, pick, truthProp } from '../utils';
-import { CHECKBOX_GROUP_KEY } from '../checkbox-group/CheckboxGroup';
-
-// Composables
-import { useParent, useCustomFieldValue } from '@vant/use';
-import { useExpose } from '../composables/use-expose';
-
-// Components
-import Checker, { checkerProps } from './Checker';
-
-// Types
-import type { CheckboxExpose } from './types';
-
-const [name, bem] = createNamespace('checkbox');
-
-const checkboxProps = extend({}, checkerProps, {
-  bindGroup: truthProp,
-});
-
-export type CheckboxProps = ExtractPropTypes<typeof checkboxProps>;
-
-export default defineComponent({
-  name,
-
-  props: checkboxProps,
-
-  emits: ['change', 'update:modelValue'],
-
-  setup(props, { emit, slots }) {
-    const { parent } = useParent(CHECKBOX_GROUP_KEY);
-
-    const setParentValue = (checked: boolean) => {
-      const { name } = props;
-      const { max, modelValue } = parent!.props;
-      const value = modelValue.slice();
-
-      if (checked) {
-        const overlimit = max && value.length >= max;
-
-        if (!overlimit && !value.includes(name)) {
-          value.push(name);
-
-          if (props.bindGroup) {
-            parent!.updateValue(value);
-          }
-        }
-      } else {
-        const index = value.indexOf(name);
-
-        if (index !== -1) {
-          value.splice(index, 1);
-
-          if (props.bindGroup) {
-            parent!.updateValue(value);
-          }
-        }
-      }
-    };
-
-    const checked = computed(() => {
-      if (parent && props.bindGroup) {
-        return parent.props.modelValue.indexOf(props.name) !== -1;
-      }
-      return !!props.modelValue;
-    });
-
-    const toggle = (newValue = !checked.value) => {
-      if (parent && props.bindGroup) {
-        setParentValue(newValue);
-      } else {
-        emit('update:modelValue', newValue);
-      }
-    };
-
-    watch(
-      () => props.modelValue,
-      (value) => emit('change', value)
-    );
-
-    useExpose<CheckboxExpose>({ toggle, props, checked });
-    useCustomFieldValue(() => props.modelValue);
-
-    return () => (
-      <Checker
-        v-slots={pick(slots, ['default', 'icon'])}
-        bem={bem}
-        role="checkbox"
-        parent={parent}
-        checked={checked.value}
-        onToggle={toggle}
-        {...props}
-      />
-    );
-  },
-});

package/lib/checkbox/Checker.tsx

@@ -1,175 +0,0 @@
-import { ref, computed, defineComponent, type PropType } from 'vue';
-import {
-  extend,
-  addUnit,
-  truthProp,
-  numericProp,
-  unknownProp,
-  makeStringProp,
-  makeRequiredProp,
-  type Numeric,
-} from '../utils';
-import { Icon } from '../icon';
-
-export type CheckerShape = 'square' | 'round';
-export type CheckerSize = 'normal' | 'large';
-export type CheckerDirection = 'horizontal' | 'vertical';
-export type CheckerLabelPosition = 'left' | 'right';
-export type CheckerParent = {
-  props: {
-    disabled?: boolean;
-    iconSize?: Numeric;
-    labelFontSize?: Numeric;
-    size?: CheckerSize;
-    direction?: CheckerDirection;
-    checkedColor?: string;
-  };
-};
-
-export const checkerProps = {
-  name: unknownProp,
-  size: String as PropType<CheckerSize>,
-  shape: makeStringProp<CheckerShape>('round'),
-  disabled: Boolean,
-  iconSize: numericProp,
-  labelFontSize: numericProp,
-  modelValue: unknownProp,
-  checkedColor: String,
-  labelPosition: String as PropType<CheckerLabelPosition>,
-  labelDisabled: Boolean,
-  allowUncheck: Boolean,
-};
-
-export default defineComponent({
-  props: extend({}, checkerProps, {
-    bem: makeRequiredProp(Function),
-    role: String,
-    checkedIcon: String,
-    uncheckedIcon: String,
-    parent: Object as PropType<CheckerParent | null>,
-    checked: Boolean,
-    bindGroup: truthProp,
-  }),
-
-  emits: ['click', 'toggle'],
-
-  setup(props, { emit, slots }) {
-    const iconRef = ref<HTMLElement>();
-
-    const getParentProp = <T extends keyof CheckerParent['props']>(name: T) => {
-      if (props.parent && props.bindGroup) {
-        return props.parent.props[name];
-      }
-    };
-
-    const disabled = computed(
-      () => getParentProp('disabled') || props.disabled
-    );
-
-    const direction = computed(() => getParentProp('direction'));
-
-    const size = computed(
-      () => props.size || getParentProp('size') || 'large'
-    );
-
-    const labelStyle = computed(() => {
-      const labelFontSize =
-        props.labelFontSize ?? getParentProp('labelFontSize');
-
-      return { fontSize: addUnit(labelFontSize) };
-    });
-
-    const iconStyle = computed(() => {
-      const checkedColor = props.checkedColor || getParentProp('checkedColor');
-
-      if (checkedColor && props.checked && !disabled.value) {
-        if (props.shape === 'round') {
-          return { color: checkedColor };
-        }
-
-        return {
-          borderColor: checkedColor,
-          backgroundColor: checkedColor,
-        };
-      }
-    });
-
-    const onClick = (event: MouseEvent) => {
-      const { target } = event;
-      const icon = iconRef.value;
-      const iconClicked = icon === target || icon?.contains(target as Node);
-
-      if (!disabled.value && (iconClicked || !props.labelDisabled)) {
-        emit('toggle');
-      }
-      emit('click', event);
-    };
-
-    const renderIcon = () => {
-      const { bem, shape, checked } = props;
-      const iconSize = props.iconSize || getParentProp('iconSize');
-      const iconName =
-        shape === 'round'
-          ? checked
-            ? props.checkedIcon || 'checked'
-            : props.uncheckedIcon || 'circle'
-          : 'success';
-
-      return (
-        <div
-          ref={iconRef}
-          class={bem('icon', [shape, { disabled: disabled.value, checked }])}
-          style={{ fontSize: addUnit(iconSize) }}
-        >
-          {slots.icon ? (
-            slots.icon({ checked, disabled: disabled.value })
-          ) : (
-            <Icon name={iconName} style={iconStyle.value} />
-          )}
-        </div>
-      );
-    };
-
-    const renderLabel = () => {
-      if (slots.default) {
-        return (
-          <span
-            class={props.bem('label', [
-              props.labelPosition,
-              { disabled: disabled.value },
-            ])}
-            style={labelStyle.value}
-          >
-            {slots.default()}
-          </span>
-        );
-      }
-    };
-
-    return () => {
-      const nodes: (JSX.Element | undefined)[] =
-        props.labelPosition === 'left'
-          ? [renderLabel(), renderIcon()]
-          : [renderIcon(), renderLabel()];
-
-      return (
-        <div
-          role={props.role}
-          class={props.bem([
-            {
-              disabled: disabled.value,
-              'label-disabled': props.labelDisabled,
-            },
-            direction.value,
-            size.value,
-          ])}
-          tabindex={disabled.value ? undefined : 0}
-          aria-checked={props.checked}
-          onClick={onClick}
-        >
-          {nodes}
-        </div>
-      );
-    };
-  },
-});