persagy-vant 0.0.28 → 0.0.29

package/es/info-card/InfoCard.tsx

@@ -0,0 +1,127 @@
+import {
+  Transition,
+  computed,
+  defineComponent,
+  type ExtractPropTypes,
+  type PropType,
+} from 'vue';
+import { createNamespace, makeStringProp, truthProp } from '../utils';
+import CollapseToggle from '../collapse-toggle';
+import { Divider } from '../divider';
+import { Label, type LabelMedia, type LabelType } from '../label';
+
+const [name, bem] = createNamespace('info-card');
+
+export type InfoCardField = {
+  label: string;
+  content?: string;
+  type?: LabelType;
+  vertical?: boolean;
+  href?: string;
+  tags?: string[];
+  media?: LabelMedia[];
+  visible?: boolean;
+};
+
+const infoCardProps = {
+  title: makeStringProp(''),
+  showTitle: truthProp,
+  fields: {
+    type: Array as PropType<InfoCardField[]>,
+    default: () => [],
+  },
+  extraFields: {
+    type: Array as PropType<InfoCardField[]>,
+    default: () => [],
+  },
+  modelValue: Boolean,
+  collapsible: Boolean,
+  showCollapse: truthProp,
+  divider: Boolean,
+  expandText: makeStringProp('查看更多'),
+  collapseText: makeStringProp('收起'),
+};
+
+export type InfoCardProps = ExtractPropTypes<typeof infoCardProps>;
+
+export default defineComponent({
+  name,
+
+  props: infoCardProps,
+
+  emits: ['update:modelValue', 'change', 'click', 'click-media'],
+
+  setup(props, { slots, emit }) {
+    const visibleFields = computed(() =>
+      props.fields.filter((field) => field.visible !== false),
+    );
+    const visibleExtraFields = computed(() =>
+      props.extraFields.filter((field) => field.visible !== false),
+    );
+    const hasExtra = computed(
+      () => visibleExtraFields.value.length > 0 || !!slots.extra,
+    );
+    const showCollapse = computed(
+      () => props.collapsible && props.showCollapse,
+    );
+    const showExtra = computed(() => !showCollapse.value || props.modelValue);
+
+    const renderField = (field: InfoCardField, index: number) => (
+      <Label
+        key={`${field.label}-${index}`}
+        label={field.label}
+        content={field.content}
+        type={field.type}
+        vertical={field.vertical}
+        href={field.href}
+        tags={field.tags}
+        media={field.media}
+        onClick={(event) => emit('click', field, index, event)}
+        onClick-media={(item: LabelMedia, mediaIndex: number, event: MouseEvent) =>
+          emit('click-media', item, mediaIndex, field, index, event)
+        }
+      />
+    );
+
+    const renderExtra = () => {
+      if (!hasExtra.value) return;
+
+      const extraSlot = slots.extra?.();
+
+      return (
+        <Transition name="van-info-card-expand">
+          {showExtra.value && (
+            <div class={bem('extra')}>
+              {visibleExtraFields.value.map(renderField)}
+              {extraSlot}
+            </div>
+          )}
+        </Transition>
+      );
+    };
+
+    return () => (
+      <section class={bem()}>
+        {props.showTitle && (slots.title || props.title) && (
+          <div class={bem('title')}>{slots.title?.() || props.title}</div>
+        )}
+        {visibleFields.value.map(renderField)}
+        {slots.default?.()}
+        {hasExtra.value && showCollapse.value && (
+          <CollapseToggle
+            modelValue={props.modelValue}
+            divider
+            expandText={props.expandText}
+            collapseText={props.collapseText}
+            onUpdate:modelValue={(value) => emit('update:modelValue', value)}
+            onChange={(value) => emit('change', value)}
+          />
+        )}
+        {hasExtra.value && !showCollapse.value && props.divider && (
+          <Divider class={bem('divider')} />
+        )}
+        {renderExtra()}
+      </section>
+    );
+  },
+});

package/es/info-card/README.md

@@ -0,0 +1,83 @@
+# InfoCard
+
+Displays a titled group of detail fields. It accepts backend field data directly, supports custom slots, and provides collapsible or divided extra content.
+
+## Import
+
+```js
+import { InfoCard } from 'vant';
+```
+
+## Usage
+
+```html
+<van-info-card
+  v-model="expanded"
+  collapsible
+  title="Description"
+  :fields="[
+    { label: 'Location:', content: detail.location },
+    { label: 'Phone:', content: detail.phone, type: 'link' },
+    { label: 'Categories:', tags: detail.tags, type: 'tag' },
+    { label: 'Media', media: detail.media, type: 'media' },
+  ]"
+  :extra-fields="extraFields"
+/>
+```
+
+Every `fields` and `extra-fields` item is rendered by [Label](#/en-US/label) and supports its display variants. Set `divider` to permanently show extra fields with a divider instead of a collapse trigger.
+
+## API
+
+### Props
+
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| title | Card title | _string_ | `''` |
+| show-title | Whether to show the title | _boolean_ | `true` |
+| fields | Primary fields | _InfoCardField[]_ | `[]` |
+| extra-fields | Extra fields | _InfoCardField[]_ | `[]` |
+| v-model | Whether extra fields are expanded. Only valid when `collapsible` is set. | _boolean_ | `false` |
+| collapsible | Whether to show the expand/collapse trigger | _boolean_ | `false` |
+| show-collapse | Whether to show the expand/collapse trigger. Extra fields are always visible when false. | _boolean_ | `true` |
+| divider | Whether to show a divider between primary and extra fields | _boolean_ | `false` |
+| expand-text | Collapsed trigger text | _string_ | `View more` |
+| collapse-text | Expanded trigger text | _string_ | `Collapse` |
+
+### Events
+
+| Event | Description | Arguments |
+| --- | --- | --- |
+| change | Emitted when expanded state changes | _expanded: boolean_ |
+| click | Emitted when a link field is clicked | _field: InfoCardField, index: number, event: MouseEvent_ |
+| click-media | Emitted when an image or video is clicked | _item, mediaIndex, field, fieldIndex, event_ |
+
+### Slots
+
+| Name | Description |
+| --- | --- |
+| title | Custom title content |
+| default | Custom content after primary fields |
+| extra | Custom content in the extra fields area |
+
+### Types
+
+```ts
+import type { InfoCardField, InfoCardProps } from 'vant';
+```
+
+An `InfoCardField` supports `label`, `content`, `type`, `vertical`, `href`, `tags`, `media`, and `visible`. Set `visible` to `false` to hide a field returned by the backend. Bind backend values to the title, expand/collapse text, and fields; use `show-title`, `divider`, and `show-collapse` to control the corresponding sections.
+
+## Theming
+
+### CSS Variables
+
+| Name | Default Value |
+| --- | --- |
+| --van-info-card-padding | _12px var(--van-padding-md)_ |
+| --van-info-card-radius | _var(--van-border-radius-lg)_ |
+| --van-info-card-gap | _4px_ |
+| --van-info-card-title-color | _var(--van-gray-8)_ |
+| --van-info-card-title-font-size | _var(--van-font-size-md)_ |
+| --van-info-card-title-line-height | _var(--van-line-height-lg)_ |
+| --van-info-card-divider-margin | _10px 0_ |

package/es/info-card/README.zh-CN.md

@@ -0,0 +1,113 @@
+# 信息卡片 InfoCard
+
+用于在详情页承载一组字段信息。可直接传入后端返回的字段数组，也可通过插槽插入自定义内容；支持展开收起和固定分割线两种更多信息布局。
+
+## 引入
+
+```js
+import { InfoCard } from 'vant';
+```
+
+## 代码演示
+
+### 后端字段数据
+
+`fields` 和 `extra-fields` 会渲染为 [字段展示 Label](#/zh-CN/label)，每项可使用 Label 的默认、加粗、链接、标签、图片视频和换行变量。
+
+```html
+<van-info-card
+  title="事项描述"
+  :fields="[
+    { label: '报事位置：', content: detail.location },
+    { label: '联系电话：', content: detail.phone, type: 'link' },
+    { label: '分类标签：', tags: detail.tags, type: 'tag' },
+    { label: '图片/视频', media: detail.media, type: 'media' },
+  ]"
+/>
+```
+
+### 展开收起
+
+```html
+<van-info-card
+  v-model="expanded"
+  collapsible
+  title="事项描述"
+  :fields="fields"
+  :extra-fields="extraFields"
+/>
+```
+
+### 固定分割线
+
+设置 `divider` 后，更多字段会通过分割线与主字段分隔，并始终展示。
+
+```html
+<van-info-card divider title="事项描述" :fields="fields" :extra-fields="extraFields" />
+```
+
+### 自定义内容
+
+```html
+<van-info-card title="事项描述" :fields="fields">
+  <div>自定义卡片内容</div>
+  <template #extra>
+    <van-label label="备注：" content="由插槽补充的字段" />
+  </template>
+</van-info-card>
+```
+
+## API
+
+### Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| title | 卡片标题 | _string_ | `''` |
+| show-title | 是否展示标题 | _boolean_ | `true` |
+| fields | 主字段数组 | _InfoCardField[]_ | `[]` |
+| extra-fields | 更多字段数组 | _InfoCardField[]_ | `[]` |
+| v-model | 是否展开更多字段，仅 `collapsible` 时生效 | _boolean_ | `false` |
+| collapsible | 是否显示展开/收起 | _boolean_ | `false` |
+| show-collapse | 是否展示展开/收起；设为 `false` 时更多字段始终展示 | _boolean_ | `true` |
+| divider | 是否在主字段和更多字段之间显示分割线 | _boolean_ | `false` |
+| expand-text | 收起状态的文案 | _string_ | `查看更多` |
+| collapse-text | 展开状态的文案 | _string_ | `收起` |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| change | 展开状态切换时触发 | _expanded: boolean_ |
+| click | 点击链接字段时触发 | _field: InfoCardField, index: number, event: MouseEvent_ |
+| click-media | 点击图片或视频时触发 | _item, mediaIndex, field, fieldIndex, event_ |
+
+### Slots
+
+| 名称 | 说明 |
+| --- | --- |
+| title | 自定义标题内容 |
+| default | 主字段之后的自定义卡片内容 |
+| extra | 更多字段区域的自定义内容 |
+
+### 类型定义
+
+```ts
+import type { InfoCardField, InfoCardProps } from 'vant';
+```
+
+`InfoCardField` 支持 `label`、`content`、`type`、`vertical`、`href`、`tags`、`media` 与 `visible`。其中 `visible: false` 时该字段不展示，便于直接处理接口返回的可见性条件。标题、展开/收起文案和字段值均可直接绑定后端数据；通过 `show-title`、`divider`、`show-collapse` 控制标题、分割线和展开收起的显示。
+
+## 主题定制
+
+### 样式变量
+
+| 名称 | 默认值 |
+| --- | --- |
+| --van-info-card-padding | _12px var(--van-padding-md)_ |
+| --van-info-card-radius | _var(--van-border-radius-lg)_ |
+| --van-info-card-gap | _4px_ |
+| --van-info-card-title-color | _var(--van-gray-8)_ |
+| --van-info-card-title-font-size | _var(--van-font-size-md)_ |
+| --van-info-card-title-line-height | _var(--van-line-height-lg)_ |
+| --van-info-card-divider-margin | _10px 0_ |

package/es/info-card/index.less

@@ -0,0 +1,60 @@
+@import './var.less';
+
+:root {
+  --van-info-card-padding: @info-card-padding;
+  --van-info-card-radius: @info-card-radius;
+  --van-info-card-gap: @info-card-gap;
+  --van-info-card-title-color: @info-card-title-color;
+  --van-info-card-title-font-size: @info-card-title-font-size;
+  --van-info-card-title-line-height: @info-card-title-line-height;
+  --van-info-card-divider-margin: @info-card-divider-margin;
+}
+
+.van-info-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--van-info-card-gap);
+  padding: var(--van-info-card-padding);
+  overflow: hidden;
+  background: var(--van-white);
+  border-radius: var(--van-info-card-radius);
+
+  &__title {
+    color: var(--van-info-card-title-color);
+    font-size: var(--van-info-card-title-font-size);
+    font-weight: var(--van-font-weight-bold);
+    line-height: var(--van-info-card-title-line-height);
+    overflow-wrap: anywhere;
+  }
+
+  &__extra {
+    display: flex;
+    flex-direction: column;
+    gap: var(--van-info-card-gap);
+  }
+
+  &__divider.van-divider {
+    width: 100%;
+    margin: var(--van-info-card-divider-margin);
+  }
+}
+
+.van-info-card-expand-enter-active,
+.van-info-card-expand-leave-active {
+  overflow: hidden;
+  transition: max-height var(--van-animation-duration-fast)
+      var(--van-animation-timing-function-enter),
+    opacity var(--van-animation-duration-fast) ease;
+}
+
+.van-info-card-expand-enter-from,
+.van-info-card-expand-leave-to {
+  max-height: 0;
+  opacity: 0;
+}
+
+.van-info-card-expand-enter-to,
+.van-info-card-expand-leave-from {
+  max-height: 480px;
+  opacity: 1;
+}

package/es/info-card/index.ts

@@ -0,0 +1,13 @@
+import { withInstall } from '../utils';
+import _InfoCard from './InfoCard';
+
+export const InfoCard = withInstall(_InfoCard);
+export default InfoCard;
+
+export type { InfoCardField, InfoCardProps } from './InfoCard';
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    VanInfoCard: typeof InfoCard;
+  }
+}

package/es/info-card/style/index.js

@@ -0,0 +1,8 @@
+import '../../style/base.css';
+import '../../badge/index.css';
+import '../../icon/index.css';
+import '../../image/index.css';
+import '../../tag/index.css';
+import '../../label/index.css';
+import '../../divider/index.css';
+import '../index.css';

package/es/info-card/style/less.js

@@ -0,0 +1,8 @@
+import '../../style/base.less';
+import '../../badge/index.less';
+import '../../icon/index.less';
+import '../../image/index.less';
+import '../../tag/index.less';
+import '../../label/index.less';
+import '../../divider/index.less';
+import '../index.less';

package/es/info-card/var.less

@@ -0,0 +1,7 @@
+@info-card-padding: 12px var(--van-padding-md);
+@info-card-radius: var(--van-border-radius-lg);
+@info-card-gap: 4px;
+@info-card-title-color: var(--van-gray-8);
+@info-card-title-font-size: var(--van-font-size-md);
+@info-card-title-line-height: var(--van-line-height-lg);
+@info-card-divider-margin: 10px 0;

package/es/label/Label.tsx

@@ -0,0 +1,125 @@
+import {
+  computed,
+  defineComponent,
+  type ExtractPropTypes,
+  type PropType,
+} from 'vue';
+import { createNamespace, makeStringProp } from '../utils';
+import { Image } from '../image';
+import { Icon } from '../icon';
+import { Tag } from '../tag';
+
+const [name, bem] = createNamespace('label');
+
+export type LabelType = 'default' | 'bold' | 'link' | 'tag' | 'media';
+export type LabelMediaType = 'image' | 'video';
+
+export type LabelMedia = {
+  url: string;
+  type?: LabelMediaType;
+  poster?: string;
+  alt?: string;
+};
+
+const labelProps = {
+  label: makeStringProp(''),
+  content: makeStringProp(''),
+  type: makeStringProp<LabelType>('default'),
+  vertical: Boolean,
+  href: String,
+  location: String,
+  tags: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  media: {
+    type: Array as PropType<LabelMedia[]>,
+    default: () => [],
+  },
+};
+
+export type LabelProps = ExtractPropTypes<typeof labelProps>;
+
+export default defineComponent({
+  name,
+
+  props: labelProps,
+
+  emits: ['click', 'click-media'],
+
+  setup(props, { slots, emit }) {
+    const vertical = computed(
+      () => props.vertical || props.type === 'media' || !!props.location,
+    );
+
+    const renderText = () => {
+      const content = slots.default?.() || props.content;
+
+      if (props.type === 'link') {
+        return props.href ? (
+          <a class={bem('link')} href={props.href} onClick={(event) => emit('click', event)}>
+            {content}
+          </a>
+        ) : (
+          <button class={bem('link')} type="button" onClick={(event) => emit('click', event)}>
+            {content}
+          </button>
+        );
+      }
+
+      return <span class={bem('text')}>{content}</span>;
+    };
+
+    const renderTags = () => (
+      <div class={bem('tags')}>
+        {props.tags.map((tag) => (
+          <Tag key={tag} type="gray">{tag}</Tag>
+        ))}
+      </div>
+    );
+
+    const renderMedia = () => (
+      <div class={bem('media')}>
+        {props.media.map((item, index) => (
+          <button
+            key={`${item.url}-${index}`}
+            class={bem('media-item')}
+            type="button"
+            onClick={(event) => emit('click-media', item, index, event)}
+          >
+            <Image
+              src={item.type === 'video' ? item.poster || item.url : item.url}
+              alt={item.alt}
+              width="64"
+              height="64"
+              radius="4"
+              fit="cover"
+            />
+            {item.type === 'video' && <Icon name="play-circle-o" class={bem('play')} />}
+          </button>
+        ))}
+      </div>
+    );
+
+    const renderContent = () => {
+      if (props.type === 'tag') return renderTags();
+      if (props.type === 'media') return renderMedia();
+      return renderText();
+    };
+
+    return () => (
+      <div class={bem([props.type, { vertical: vertical.value, location: !!props.location }])}>
+        <span class={bem('label')}>{props.label}</span>
+        <div class={bem('value')}>
+          {renderContent()}
+          {props.location && (
+            <div class={bem('location')}>
+              <Icon name="location-o" />
+              <span>{props.location}</span>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  },
+});

package/es/label/README.md

@@ -0,0 +1,124 @@
+# Label
+
+Displays a field name and its value in a detail view. It supports default text, bold text, links, tags, images/videos, and vertical layouts.
+
+## Import
+
+```js
+import { Label } from 'vant';
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<van-label label="Location:" content="Building C/F9/Air room" />
+```
+
+### Bold Text and Links
+
+```html
+<van-label type="bold" label="Location:" content="Building C/F9/Air room" />
+<van-label type="link" label="Phone:" content="15888688688" @click="onPhoneClick" />
+```
+
+### Tags
+
+```html
+<van-label type="tag" label="Category:" :tags="['VIP', 'Important']" />
+```
+
+### Images and Videos
+
+Images and videos are always displayed on a new line. Set a video's `type` to `video`, then handle `click-media` to open `video-preview` when needed.
+
+```html
+<van-label
+  type="media"
+  label="Site media"
+  :media="[
+    { url: imageUrl },
+    { url: videoUrl, poster: posterUrl, type: 'video' },
+  ]"
+  @click-media="onMediaClick"
+/>
+```
+
+### Vertical Layout
+
+Set `vertical` to place text, bold text, links, and tags on a new line. Images and videos are always vertical.
+
+```html
+<van-label vertical label="Deadline:" content="2025.04.28 14:00:00" />
+```
+
+### Location Display
+
+Set `location` to show a location icon and address below the field value. It always uses a vertical layout, while `type` can still control the value style.
+
+```html
+<van-label
+  type="bold"
+  label="Related space"
+  content="B3-Air compressor room-01"
+  location="ABC Building basement / B1"
+/>
+```
+
+## API
+
+### Props
+
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| label | Field name | _string_ | `''` |
+| content | Text value. Can be replaced by the default slot. | _string_ | `''` |
+| type | Display type. Can be `default`, `bold`, `link`, `tag`, or `media`. | _string_ | `default` |
+| vertical | Whether to display on a new line. Media is always vertical. | _boolean_ | `false` |
+| href | Link URL. Only valid when `type` is `link`. | _string_ | - |
+| location | Location text. It always uses a vertical layout. | _string_ | - |
+| tags | Tag list. Only valid when `type` is `tag`. | _string[]_ | `[]` |
+| media | Image and video list. Only valid when `type` is `media`. | _LabelMedia[]_ | `[]` |
+
+### Events
+
+| Event | Description | Arguments |
+| --- | --- | --- |
+| click | Emitted when a link is clicked. | _event: MouseEvent_ |
+| click-media | Emitted when an image or video is clicked. | _item: LabelMedia, index: number, event: MouseEvent_ |
+
+### Slots
+
+| Name | Description |
+| --- | --- |
+| default | Custom text content. Only valid for `default`, `bold`, and `link`. |
+
+### Types
+
+```ts
+import type { LabelMedia, LabelMediaType, LabelProps, LabelType } from 'vant';
+```
+
+## Theming
+
+### CSS Variables
+
+| Name | Default Value |
+| --- | --- |
+| --van-label-font-size | _var(--van-font-size-md)_ |
+| --van-label-line-height | _var(--van-line-height-lg)_ |
+| --van-label-label-color | _var(--van-gray-7)_ |
+| --van-label-value-color | _var(--van-black)_ |
+| --van-label-bold-color | _var(--van-gray-8)_ |
+| --van-label-link-color | _var(--van-primary-color)_ |
+| --van-label-gap | _2px_ |
+| --van-label-tags-gap | _4px_ |
+| --van-label-media-gap | _6px_ |
+| --van-label-media-size | _64px_ |
+| --van-label-media-radius | _4px_ |
+| --van-label-location-color | _var(--van-gray-7)_ |
+| --van-label-location-font-size | _var(--van-font-size-sm)_ |
+| --van-label-location-line-height | _var(--van-line-height-md)_ |
+| --van-label-location-icon-size | _12px_ |
+| --van-label-location-gap | _2px_ |