persagy-vant 0.0.29 → 0.0.30

package/lib/cell/Cell.tsx

@@ -1,391 +0,0 @@
-import {
-  defineComponent,
-  inject,
-  ref,
-  watch,
-  type PropType,
-  type CSSProperties,
-  type ExtractPropTypes,
-} from 'vue';
-
-// Utils
-import {
-  isDef,
-  extend,
-  truthProp,
-  unknownProp,
-  numericProp,
-  createNamespace,
-  type Numeric,
-} from '../utils';
-
-// Composables
-import { useRoute, routeProps } from '../composables/use-route';
-
-// Components
-import { Icon } from '../icon';
-import { Checkbox } from '../checkbox';
-import { Radio } from '../radio';
-import { Badge } from '../badge';
-import { CONFIG_PROVIDER_KEY } from '../config-provider/ConfigProvider';
-
-const [name, bem] = createNamespace('cell');
-
-export type CellSize = 'normal' | 'large';
-
-export type CellSelectType = 'checkbox' | 'radio';
-
-export type CellArrowDirection = 'up' | 'down' | 'left' | 'right';
-
-export const cellSharedProps = {
-  icon: String,
-  size: String as PropType<CellSize>,
-  title: numericProp,
-  value: numericProp,
-  label: numericProp,
-  avatar: String,
-  rightAvatar: String,
-  tags: Array as unknown as PropType<Numeric[]>,
-  titleIcon: String,
-  rightIcon: String,
-  note: numericProp,
-  badge: numericProp,
-  leftSelect: {
-    type: Boolean as PropType<boolean | undefined>,
-    default: undefined,
-  },
-  rightSelect: {
-    type: Boolean as PropType<boolean | undefined>,
-    default: undefined,
-  },
-  selectType: {
-    type: String as PropType<CellSelectType>,
-    default: 'checkbox',
-  },
-  blueMark: Boolean,
-  center: Boolean,
-  isLink: Boolean,
-  border: truthProp,
-  errorBorder: Boolean,
-  required: Boolean,
-  iconPrefix: String,
-  valueClass: unknownProp,
-  labelClass: unknownProp,
-  titleClass: unknownProp,
-  titleStyle: null as unknown as PropType<string | CSSProperties>,
-  arrowDirection: String as PropType<CellArrowDirection>,
-  clickable: {
-    type: Boolean as PropType<boolean | null>,
-    default: null,
-  },
-};
-
-const cellProps = extend({}, cellSharedProps, routeProps);
-
-export type CellProps = ExtractPropTypes<typeof cellProps>;
-
-export default defineComponent({
-  name,
-
-  props: cellProps,
-
-  emits: ['click', 'update:leftSelect', 'update:rightSelect'],
-
-  setup(props, { slots, emit }) {
-
-    const config = inject(CONFIG_PROVIDER_KEY, null);
-
-    const route = useRoute();
-    const leftSelectState = ref(props.leftSelect ?? false);
-    const rightSelectState = ref(props.rightSelect ?? false);
-
-    watch(
-      () => props.leftSelect,
-      (value) => {
-        if (isDef(value)) {
-          leftSelectState.value = value;
-        }
-      }
-    );
-
-    watch(
-      () => props.rightSelect,
-      (value) => {
-        if (isDef(value)) {
-          rightSelectState.value = value;
-        }
-      }
-    );
-
-    const hasSelect = (position: 'left' | 'right') =>
-      isDef(position === 'left' ? props.leftSelect : props.rightSelect);
-
-    const getSelectState = (position: 'left' | 'right') =>
-      position === 'left' ? leftSelectState.value : rightSelectState.value;
-
-    const updateSelectState = (position: 'left' | 'right', value: boolean) => {
-      if (position === 'left') {
-        leftSelectState.value = value;
-        emit('update:leftSelect', value);
-      } else {
-        rightSelectState.value = value;
-        emit('update:rightSelect', value);
-      }
-    };
-
-    const toggleSelect = () => {
-      const position = hasSelect('left') ? 'left' : hasSelect('right') ? 'right' : undefined;
-
-      if (position) {
-        const value = props.selectType === 'radio' ? true : !getSelectState(position);
-        updateSelectState(position, value);
-        return true;
-      }
-
-      return false;
-    };
-
-    const renderLabel = () => {
-      const showLabel = slots.label || isDef(props.label);
-
-      if (showLabel) {
-        return (
-          <div class={[bem('label'), props.labelClass]}>
-            {slots.label ? slots.label() : props.label}
-          </div>
-        );
-      }
-    };
-
-    const renderTitle = () => {
-      if (slots.title || isDef(props.title)) {
-        return (
-          <div
-          class={[bem('title'), props.titleClass]}
-          style={props.titleStyle}
-        >
-            <div class={bem('title-row')}>
-              {slots.title ? slots.title() : <span>{props.title}</span>}
-              {renderTags()}
-              {renderTitleIcon()}
-            </div>
-            {renderLabel()}
-          </div>
-        );
-      }
-    };
-
-    const renderValue = () => {
-      // slots.default is an alias of slots.value
-      const slot = slots.value || slots.default;
-      const hasValue = slot || isDef(props.value);
-
-      if (hasValue) {
-        const hasTitle = slots.title || isDef(props.title);
-        return (
-          <div class={[bem('value', { alone: !hasTitle }), props.valueClass]}>
-            {slot ? slot() : <span>{props.value}</span>}
-          </div>
-        );
-      }
-    };
-
-    const renderLeftIcon = () => {
-      if (slots.icon) {
-        return slots.icon();
-      }
-
-      if (props.icon) {
-        return (
-          <Icon
-            name={props.icon}
-            class={bem('left-icon')}
-            classPrefix={props.iconPrefix}
-          />
-        );
-      }
-    };
-
-    const renderSelect = (position: 'left' | 'right') => {
-      const slot = slots[`${position}-select`];
-      const selected = getSelectState(position);
-
-      if (slot) {
-        return <div class={bem(`${position}-select`)}>{slot()}</div>;
-      }
-
-      if (hasSelect(position)) {
-        const checkboxSize = props.size ?? config?.cellSize ?? 'normal';
-
-        return (
-          <div
-            class={bem(`${position}-select`)}
-            onClick={(event) => event.stopPropagation()}
-          >
-            {props.selectType === 'radio' ? (
-              <Radio
-                modelValue={selected ? 'selected' : ''}
-                name="selected"
-                size={checkboxSize}
-                labelDisabled
-                onUpdate:modelValue={(value) =>
-                  updateSelectState(position, value === 'selected')
-                }
-              />
-            ) : (
-              <Checkbox
-                modelValue={selected}
-                size={checkboxSize}
-                labelDisabled
-                onUpdate:modelValue={(value) =>
-                  updateSelectState(position, value)
-                }
-              />
-            )}
-          </div>
-        );
-      }
-    };
-
-    const renderAvatar = (position: 'left' | 'right') => {
-      const slot = slots[`${position}-avatar`];
-      const avatar = position === 'left' ? props.avatar : props.rightAvatar;
-
-      if (slot) {
-        return <div class={bem(`${position}-avatar`)}>{slot()}</div>;
-      }
-
-      if (avatar) {
-        return <img class={bem(`${position}-avatar`)} src={avatar} alt="" />;
-      }
-    };
-
-    const renderBlueMark = () => {
-      if (slots['blue-mark']) {
-        return <div class={bem('blue-mark')}>{slots['blue-mark']()}</div>;
-      }
-
-      if (props.blueMark) {
-        return <span class={bem('blue-mark')} />;
-      }
-    };
-
-    const renderTags = () => {
-      if (slots.tags) {
-        return <div class={bem('tags')}>{slots.tags()}</div>;
-      }
-
-      if (props.tags?.length) {
-        return (
-          <div class={bem('tags')}>
-            {props.tags.map((tag, index) => (
-              <span key={`${tag}-${index}`} class={bem('tag')}>
-                {tag}
-              </span>
-            ))}
-          </div>
-        );
-      }
-    };
-
-    const renderTitleIcon = () => {
-      if (slots['title-icon']) {
-        return <div class={bem('title-icon')}>{slots['title-icon']()}</div>;
-      }
-
-      if (props.titleIcon) {
-        return <Icon name={props.titleIcon} class={bem('title-icon')} />;
-      }
-    };
-
-    const renderNote = () => {
-      if (slots.note) {
-        return <div class={bem('note')}>{slots.note()}</div>;
-      }
-
-      if (isDef(props.note)) {
-        return <div class={bem('note')}>{props.note}</div>;
-      }
-    };
-
-    const renderBadge = () => {
-      if (slots.badge) {
-        return <div class={bem('badge')}>{slots.badge()}</div>;
-      }
-
-      if (isDef(props.badge)) {
-        return (
-          <div class={bem('badge')}>
-            <Badge content={props.badge} showZero />
-          </div>
-        );
-      }
-    };
-
-    const renderRightIcon = () => {
-      if (slots['right-icon']) {
-        return slots['right-icon']();
-      }
-
-      if (props.rightIcon) {
-        return <Icon name={props.rightIcon} class={bem('right-icon')} />;
-      }
-
-      if (props.isLink) {
-        const name = props.arrowDirection && props.arrowDirection !== 'right'
-          ? `arrow-${props.arrowDirection}`
-          : 'arrow';
-        return <Icon name={name} class={bem('right-icon')} />;
-      }
-    };
-
-    return () => {
-      const { size, center, border, isLink, required } = props;
-      const clickable = props.clickable ?? (isLink || hasSelect('left') || hasSelect('right'));
-      const hasBadge = !!slots.badge || isDef(props.badge);
-
-      const cellSize = size ?? config?.cellSize ?? 'normal';
-
-      const classes: Record<string, boolean | undefined> = {
-        center: center || hasBadge,
-        required,
-        clickable,
-        borderless: !border,
-      };
-
-      if (cellSize) {
-        classes[cellSize] = !!cellSize;
-      }
-
-      const onClick = (event: MouseEvent) => {
-        emit('click', event);
-
-        if (!toggleSelect()) {
-          route();
-        }
-      };
-
-      return (
-        <div
-          class={[bem(classes), props.errorBorder ? 'van-cell-error-border' : '']}
-          role={clickable ? 'button' : undefined}
-          tabindex={clickable ? 0 : undefined}
-          onClick={onClick}
-        >
-          {renderSelect('left')}
-          {renderAvatar('left')}
-          {renderLeftIcon()}
-          {renderBlueMark()}
-          {renderTitle()}
-          {renderValue()}
-          {renderNote()}
-          {renderAvatar('right')}
-          {renderBadge()}
-          {renderSelect('right')}
-          {renderRightIcon()}
-          {slots.extra?.()}
-        </div>
-      );
-    };
-  },
-});

package/lib/cell/README.md

@@ -1,289 +0,0 @@
-# Cell
-
-### Intro
-
-The cell is a single display item in the list.
-
-### Install
-
-Register component globally via `app.use`, refer to [Component Registration](#/en-US/advanced-usage#zu-jian-zhu-ce) for more registration ways.
-
-```js
-import { createApp } from 'vue';
-import { Cell, CellGroup } from 'vant';
-
-const app = createApp();
-app.use(Cell);
-app.use(CellGroup);
-```
-
-## Usage
-
-### Basic Usage
-
-```html
-<van-cell-group>
-  <van-cell title="Cell title" value="Content" />
-  <van-cell title="Cell title" value="Content" label="Description" />
-</van-cell-group>
-```
-
-### Inset Grouped
-
-```html
-<van-cell-group inset>
-  <van-cell title="Cell title" value="Content" />
-  <van-cell title="Cell title" value="Content" label="Description" />
-</van-cell-group>
-```
-
-### Size
-
-```html
-<van-cell-group>
-  <van-cell title="Cell title" value="Content" size="large" />
-  <van-cell
-    title="Cell title"
-    value="Content"
-    size="large"
-    label="Description"
-  />
-</van-cell-group>
-```
-
-### Left Icon
-
-```html
-<van-cell-group>
-  <van-cell title="Cell title" icon="location-o" />
-</van-cell-group>
-```
-
-### Extended Elements
-
-Use props to quickly compose common elements on either side of a cell. Use the matching slots in the API below for more complex content.
-
-```html
-<van-cell title="Required" required />
-<van-cell title="Left Select" left-select />
-<van-cell title="Right Select" right-select />
-<van-cell title="Avatar" avatar="https://example.com/avatar.png" />
-<van-cell title="Left Icon" icon="smile-o" />
-<van-cell title="Blue Mark" blue-mark />
-<van-cell title="Tags" :tags="['Tag 1', 'Tag 2']" />
-<van-cell title="Following Icon" title-icon="smile-o" />
-<van-cell title="Right Icon" right-icon="arrow" />
-<van-cell title="Right Icon + Note" right-icon="arrow" note="Note" />
-<van-cell title="Right Note" note="Note" />
-<van-cell title="Right Avatar" right-avatar="https://example.com/avatar.png" />
-<van-cell title="Right Badge" badge="9" />
-```
-
-### Value only
-
-```html
-<van-cell-group>
-  <van-cell value="Content" />
-</van-cell-group>
-```
-
-### Link
-
-```html
-<van-cell-group>
-  <van-cell title="Cell title" is-link />
-  <van-cell title="Cell title" is-link value="Content" />
-  <van-cell title="Cell title" is-link arrow-direction="down" value="Content" />
-</van-cell-group>
-```
-
-### Router
-
-```html
-<van-cell-group>
-<van-cell title="URL" is-link @click="openMeriDesign" />
-<van-cell title="Vue Router" is-link @click="openMeriDesign" />
-
-<script setup>
-const openMeriDesign = () => {
-  window.open('https://www.meridesign.cn/', '_blank', 'noopener,noreferrer');
-};
-</script>
-</van-cell-group>
-```
-
-### Group Title
-
-```html
-<van-cell-group title="Group 1">
-  <van-cell title="Cell title" value="Content" />
-</van-cell-group>
-<van-cell-group title="Group 2">
-  <van-cell title="Cell title" value="Content" />
-</van-cell-group>
-```
-
-### Use Slots
-
-```html
-<van-cell value="Content" is-link>
-  <!-- Use the title slot to customize the title -->
-  <template #title>
-    <span class="custom-title">Title</span>
-    <van-tag type="danger">Tag</van-tag>
-  </template>
-</van-cell>
-
-<van-cell title="Title" icon="shop-o">
-  <!-- Use the right-icon slot to customize the 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>
-```
-
-### Vertical Center
-
-```html
-<van-cell center title="Cell title" value="Content" label="Description" />
-```
-
-## API
-
-### CellGroup Props
-
-| Attribute      | Description                  | Type      | Default |
-| -------------- | ---------------------------- | --------- | ------- |
-| title          | Group title                  | _string_  | -       |
-| inset `v3.1.0` | Whether to be inset grouped  | _boolean_ | `false` |
-| border         | Whether to show outer border | _boolean_ | `true`  |
-
-### Cell Props
-
-| Attribute | Description | Type | Default |
-| --- | --- | --- | --- |
-| title | Title | _number \| string_ | - |
-| value | Right text | _number \| string_ | - |
-| label | Description below the title | _string_ | - |
-| size | Size, can be set to `normal` or `large` | _string_ | `normal` |
-| icon | Left Icon | _string_ | - |
-| avatar | Left avatar image URL | _string_ | - |
-| left-select | Whether to show the left selection icon | _boolean_ | `false` |
-| blue-mark | Whether to show the leading blue mark | _boolean_ | `false` |
-| tags | Tags following the title | _Array&lt;number \| string&gt;_ | - |
-| title-icon | Icon following the title | _string_ | - |
-| icon-prefix | Icon className prefix | _string_ | `van-icon` |
-| right-icon | Right icon name, higher priority than `is-link` | _string_ | - |
-| right-select | Whether to show the right selection icon | _boolean_ | `false` |
-| note | Right note text | _number \| string_ | - |
-| right-avatar | Right avatar image URL | _string_ | - |
-| badge | Right badge content | _number \| string_ | - |
-| border | Whether to show inner border | _boolean_ | `true` |
-| center | Whether to center content vertically | _boolean_ | `false` |
-| url | Link URL | _string_ | - |
-| to | Target route of the link, same as to of vue-router | _string \| object_ | - |
-| replace | If true, the navigation will not leave a history record | _boolean_ | `false` |
-| clickable | Whether to show click feedback when clicked | _boolean_ | `null` |
-| is-link | Whether to show link icon | _boolean_ | `false` |
-| required | Whether to show required mark | _boolean_ | `false` |
-| arrow-direction | Can be set to `left` `up` `down` | _string_ | `right` |
-| title-style | Title style | _string \| Array \| object_ | - |
-| title-class | Title className | _string \| Array \| object_ | - |
-| value-class | Value className | _string \| Array \| object_ | - |
-| label-class | Label className | _string \| Array \| object_ | - |
-
-### Cell Events
-
-| Event | Description                  | Arguments           |
-| ----- | ---------------------------- | ------------------- |
-| click | Emitted when cell is clicked | _event: MouseEvent_ |
-
-### CellGroup Slots
-
-| Name    | Description  |
-| ------- | ------------ |
-| default | Default slot |
-| title   | Custom title |
-
-### Cell Slots
-
-| Name           | Description                       |
-| -------------- | --------------------------------- |
-| title          | Custom title                      |
-| value `v3.1.1` | Custom value                      |
-| label          | Custom label                      |
-| icon           | Custom left icon                  |
-| left-select    | Custom left selection element     |
-| right-select   | Custom right selection element    |
-| left-avatar    | Custom left avatar                |
-| right-avatar   | Custom right avatar               |
-| blue-mark      | Custom leading blue mark          |
-| tags           | Custom tags following the title   |
-| title-icon     | Custom icon following the title   |
-| note           | Custom right note                 |
-| badge          | Custom right badge                |
-| right-icon     | Custom right icon                 |
-| extra          | Custom extra content on the right |
-
-### Types
-
-The component exports the following type definitions:
-
-```ts
-import type {
-  CellSize,
-  CellProps,
-  CellGroupProps,
-  CellArrowDirection,
-} from 'vant';
-```
-
-## Theming
-
-### CSS Variables
-
-The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
-
-| Name | Default Value | Description |
-| --- | --- | --- |
-| --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_ | Leading blue mark width |
-| --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)_ | - |