persagy-vant 0.0.28 → 0.0.29

package/es/video-preview/README.zh-CN.md

@@ -0,0 +1,98 @@
+# 视频预览 VideoPreview
+
+### 介绍
+
+全屏预览视频，内置播放、进度拖动、静音、倍速和全屏控制。点击播放器的空白区域或左上角关闭按钮可退出预览。底层基于开源播放器 [Plyr](https://github.com/sampotts/plyr)（MIT License）封装。
+
+### 函数调用
+
+`VideoPreview` 是一个函数，调用后会直接在页面中展示视频预览界面。
+
+```js
+import { VideoPreview } from 'vant';
+import 'vant/es/video-preview/style';
+
+VideoPreview({
+  src: 'https://example.com/video.mp4',
+});
+```
+
+### 组件调用
+
+```vue
+<script setup>
+import { ref } from 'vue';
+
+const show = ref(false);
+</script>
+
+<template>
+  <van-video-preview
+    v-model:show="show"
+    src="https://example.com/video.mp4"
+    poster="https://example.com/poster.jpg"
+  />
+</template>
+```
+
+## API
+
+### Options
+
+函数调用时支持以下选项：
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| src | 视频地址 | _string_ | - |
+| poster | 视频封面地址 | _string_ | - |
+| autoplay | 是否自动播放 | _boolean_ | `false` |
+| muted | 是否静音 | _boolean_ | `false` |
+| loop | 是否循环播放 | _boolean_ | `false` |
+| controls | 是否展示播放器控制栏 | _boolean_ | `true` |
+| fit | 视频填充方式，可选值为 `contain`、`cover` | _string_ | `contain` |
+| closeable | 是否显示关闭图标 | _boolean_ | `true` |
+| closeIcon | 关闭图标名称 | _string_ | `cross` |
+| closeIconPosition | 关闭图标位置 | _string_ | `top-left` |
+| playbackRates | 可选倍速 | _number[]_ | `[0.5, 1, 1.5, 2]` |
+| teleport | 指定挂载位置 | _string \| Element_ | `body` |
+| onClose | 关闭预览时触发 | _Function_ | - |
+| onPlay | 开始播放时触发 | _Function_ | - |
+| onPause | 暂停时触发 | _Function_ | - |
+| onEnded | 播放结束时触发 | _Function_ | - |
+| onTimeupdate | 播放进度更新时触发 | _Function_ | - |
+| onError | 播放出错时触发 | _Function_ | - |
+
+### Props
+
+组件调用时，除 `onXxx` 选项外，均可作为 Props 使用。
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| update:show | 显示状态变化时触发 | _show: boolean_ |
+| close | 关闭预览时触发 | - |
+| closed | 预览完全关闭时触发 | - |
+| play | 开始播放时触发 | _event: Event_ |
+| pause | 暂停时触发 | _event: Event_ |
+| ended | 播放结束时触发 | _event: Event_ |
+| timeupdate | 播放进度更新时触发 | _event: Event_ |
+| error | 播放出错时触发 | _event: Event_ |
+
+### 方法
+
+通过 ref 可以获取组件实例并调用以下方法：
+
+| 方法名 | 说明 | 参数 |
+| --- | --- | --- |
+| play | 播放视频 | - |
+| pause | 暂停视频 | - |
+| close | 关闭预览 | - |
+| toggleFullscreen | 切换全屏状态 | - |
+
+### CSS 变量
+
+| 名称 | 默认值 |
+| --- | --- |
+| --van-video-preview-background | `rgba(0, 0, 0, 0.9)` |
+| --van-video-preview-close-icon-color | `var(--van-gray-5)` |

package/es/video-preview/VideoPreview.tsx

@@ -0,0 +1,169 @@
+import {
+  defineComponent,
+  nextTick,
+  onBeforeUnmount,
+  ref,
+  watch,
+  type CSSProperties,
+  type ExtractPropTypes,
+  type PropType,
+} from 'vue';
+import Plyr from 'plyr';
+import { Popup, PopupCloseIconPosition } from '../popup';
+import {
+  createNamespace,
+  makeStringProp,
+  pick,
+  truthProp,
+  unknownProp,
+} from '../utils';
+import { useExpose } from '../composables/use-expose';
+
+const [name, bem] = createNamespace('video-preview');
+
+const popupProps = ['show', 'transition', 'overlayStyle', 'closeOnPopstate'] as const;
+
+const videoPreviewProps = {
+  show: Boolean,
+  src: makeStringProp(''),
+  poster: String,
+  autoplay: Boolean,
+  muted: Boolean,
+  loop: Boolean,
+  controls: truthProp,
+  playbackRates: {
+    type: Array as PropType<number[]>,
+    default: () => [0.5, 1, 1.5, 2],
+  },
+  fit: makeStringProp<'contain' | 'cover'>('contain'),
+  className: unknownProp,
+  transition: String,
+  overlayStyle: Object as PropType<CSSProperties>,
+  overlayClass: unknownProp,
+  closeable: truthProp,
+  closeIcon: makeStringProp('cross'),
+  closeIconPosition: makeStringProp<PopupCloseIconPosition>('top-left'),
+  closeOnPopstate: truthProp,
+};
+
+export type VideoPreviewProps = ExtractPropTypes<typeof videoPreviewProps>;
+
+export default defineComponent({
+  name,
+
+  props: videoPreviewProps,
+
+  emits: [
+    'update:show',
+    'close',
+    'closed',
+    'play',
+    'pause',
+    'ended',
+    'timeupdate',
+    'error',
+  ],
+
+  setup(props, { emit }) {
+    const videoRef = ref<HTMLVideoElement>();
+    const mediaEvents = ['play', 'pause', 'ended', 'timeupdate', 'error'] as const;
+    let player: Plyr | undefined;
+
+    const updateShow = (show: boolean) => emit('update:show', show);
+    const close = () => updateShow(false);
+    const emitMediaEvent = (event: Event) =>
+      emit(event.type as (typeof mediaEvents)[number], event);
+
+    const destroyPlayer = () => {
+      const video = videoRef.value;
+      if (video) {
+        mediaEvents.forEach((event) => video.removeEventListener(event, emitMediaEvent));
+      }
+      player?.destroy();
+      player = undefined;
+    };
+
+    const createPlayer = () => {
+      const video = videoRef.value;
+      if (!video || player) return;
+
+      player = new Plyr(video, {
+        controls: props.controls
+          ? [
+              'play',
+              'progress',
+              'current-time',
+              'mute',
+              'volume',
+              'settings',
+              'fullscreen',
+            ]
+          : [],
+        settings: ['speed'],
+        speed: { selected: 1, options: props.playbackRates },
+        autoplay: props.autoplay,
+        muted: props.muted,
+        loop: { active: props.loop },
+      });
+
+      mediaEvents.forEach((event) => video.addEventListener(event, emitMediaEvent));
+    };
+
+    const play = () => player?.play();
+    const pause = () => player?.pause();
+    const toggleFullscreen = () => player?.fullscreen.toggle();
+    useExpose({ play, pause, close, toggleFullscreen });
+
+    watch(
+      () => props.show,
+      async (show) => {
+        if (show) {
+          await nextTick();
+          createPlayer();
+          if (props.autoplay) play();
+        } else {
+          pause();
+          emit('close');
+        }
+      },
+      { immediate: true }
+    );
+
+    watch(
+      () => props.src,
+      async () => {
+        if (!props.show) return;
+        destroyPlayer();
+        await nextTick();
+        createPlayer();
+      }
+    );
+
+    onBeforeUnmount(destroyPlayer);
+
+    return () => (
+      <Popup
+        class={[bem(), props.className]}
+        overlayClass={[bem('overlay'), props.overlayClass]}
+        closeable={props.closeable}
+        closeIcon={props.closeIcon}
+        closeIconPosition={props.closeIconPosition}
+        onClosed={() => emit('closed')}
+        onUpdate:show={updateShow}
+        {...pick(props, popupProps)}
+      >
+        <div class={bem('backdrop')} onClick={close} />
+        <video
+          ref={videoRef}
+          class={bem('video', props.fit)}
+          src={props.src}
+          poster={props.poster}
+          autoplay={props.autoplay}
+          muted={props.muted}
+          loop={props.loop}
+          playsinline
+        />
+      </Popup>
+    );
+  },
+});

package/es/video-preview/function-call.tsx

@@ -0,0 +1,43 @@
+import type { App } from 'vue';
+import { extend, inBrowser, withInstall, type ComponentInstance } from '../utils';
+import { mountComponent, usePopupState } from '../utils/mount-component';
+import VanVideoPreview from './VideoPreview';
+import type { VideoPreviewOptions } from './types';
+
+let instance: ComponentInstance;
+
+const defaultConfig: VideoPreviewOptions = {
+  src: '',
+  autoplay: false,
+  muted: false,
+  loop: false,
+  controls: true,
+  playbackRates: [0.5, 1, 1.5, 2],
+  fit: 'contain',
+  teleport: 'body',
+  closeable: true,
+  closeIcon: 'cross',
+  closeIconPosition: 'top-left',
+  closeOnPopstate: true,
+};
+
+function initInstance() {
+  ({ instance } = mountComponent({
+    setup() {
+      const { state, toggle } = usePopupState();
+      return () => <VanVideoPreview {...state} onUpdate:show={toggle} />;
+    },
+  }));
+}
+
+const VideoPreview = (options: VideoPreviewOptions) => {
+  if (!inBrowser) return;
+  if (!instance) initInstance();
+  instance.open(extend({}, defaultConfig, options));
+  return instance;
+};
+
+VideoPreview.Component = withInstall(VanVideoPreview);
+VideoPreview.install = (app: App) => app.use(VideoPreview.Component);
+
+export { VideoPreview };

package/es/video-preview/index.ts

@@ -0,0 +1,13 @@
+import { VideoPreview } from './function-call';
+import type { VideoPreviewProps } from './VideoPreview';
+
+export default VideoPreview;
+export { VideoPreview };
+export type { VideoPreviewProps };
+export type { VideoPreviewOptions, VideoPreviewInstance } from './types';
+
+declare module 'vue' {
+  export interface GlobalComponents {
+    VanVideoPreview: typeof VideoPreview.Component;
+  }
+}

package/es/video-preview/style/index.js

@@ -0,0 +1,6 @@
+import '../../style/base.css';
+import '../../badge/index.css';
+import '../../icon/index.css';
+import '../../overlay/index.css';
+import '../../popup/index.css';
+import '../index.css';

package/es/video-preview/style/less.js

@@ -0,0 +1,6 @@
+import '../../style/base.less';
+import '../../badge/index.less';
+import '../../icon/index.less';
+import '../../overlay/index.less';
+import '../../popup/index.less';
+import '../index.less';

package/es/video-preview/types.ts

@@ -0,0 +1,41 @@
+import type { ComponentPublicInstance, CSSProperties, TeleportProps } from 'vue';
+import type { PopupCloseIconPosition } from '../popup';
+import type { VideoPreviewProps } from './VideoPreview';
+
+export type VideoPreviewOptions = {
+  src: string;
+  poster?: string;
+  autoplay?: boolean;
+  muted?: boolean;
+  loop?: boolean;
+  controls?: boolean;
+  playbackRates?: number[];
+  fit?: 'contain' | 'cover';
+  teleport?: TeleportProps['to'];
+  className?: unknown;
+  transition?: string;
+  overlayStyle?: CSSProperties;
+  overlayClass?: unknown;
+  closeable?: boolean;
+  closeIcon?: string;
+  closeIconPosition?: PopupCloseIconPosition;
+  closeOnPopstate?: boolean;
+  onClose?(): void;
+  onPlay?(event: Event): void;
+  onPause?(event: Event): void;
+  onEnded?(event: Event): void;
+  onTimeupdate?(event: Event): void;
+  onError?(event: Event): void;
+};
+
+export type VideoPreviewExpose = {
+  play: () => Promise<void> | undefined;
+  pause: () => void;
+  close: () => void;
+  toggleFullscreen: () => void;
+};
+
+export type VideoPreviewInstance = ComponentPublicInstance<
+  VideoPreviewProps,
+  VideoPreviewExpose
+>;

package/es/work-order-card/README.md

@@ -0,0 +1,20 @@
+# WorkOrderCard
+
+Displays a work order title, tags, information, expandable details, and actions.
+
+```vue
+<van-work-order-card v-model:expanded="expanded" title="Inspection work order" :tags="tags" />
+```
+
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model:expanded | Whether detail content is expanded | _boolean_ | `false` |
+| default-expanded | Initial expanded state in uncontrolled mode | _boolean_ | `false` |
+| expandable | Whether the card can be expanded | _boolean_ | `true` |
+| tags | Tag data | _WorkOrderCardTag[]_ | `[]` |
+| show-location | Whether to show the location bar | _boolean_ | `true` |
+| location | Location text | _string_ | - |
+| primary-infos | Information shown before expansion | _WorkOrderCardInfo[]_ | `[]` |
+| expanded-infos | Expanded information | _WorkOrderCardInfo[]_ | `[]` |
+| actions | One or two bottom actions | _WorkOrderCardAction[]_ | `[]` |
+| show-overdue | Whether to show overdue badge | _boolean_ | `true` |

package/es/work-order-card/README.zh-CN.md

@@ -0,0 +1,65 @@
+# 工单卡片 WorkOrderCard
+
+### 介绍
+
+用于展示工单的标题、标签、时间、位置、展开详情和操作。
+
+### 引入
+
+```js
+import { createApp } from 'vue';
+import { WorkOrderCard } from 'vant';
+
+const app = createApp();
+app.use(WorkOrderCard);
+```
+
+### 基础用法
+
+```vue
+<van-work-order-card v-model:expanded="expanded" title="巡检工单" :tags="tags" :primary-infos="infos" :expanded-infos="expandedInfos" />
+```
+
+## API
+
+### 基础 Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| v-model:expanded | 是否展开详情 | _boolean_ | `false` |
+| default-expanded | 非受控模式的初始展开状态 | _boolean_ | `false` |
+| expandable | 是否显示展开箭头并允许切换 | _boolean_ | `true` |
+| title | 工单标题 | _string_ | - |
+| tags | 标签数据 | _WorkOrderCardTag[]_ | `[]` |
+
+### 内容 Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| location | 位置文本 | _string_ | - |
+| show-location | 是否显示位置栏 | _boolean_ | `true` |
+| primary-infos | 收起时展示的信息 | _WorkOrderCardInfo[]_ | `[]` |
+| expanded-infos | 展开信息 | _WorkOrderCardInfo[]_ | `[]` |
+
+### 状态与操作 Props
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| actions | 底部操作 | _WorkOrderCardAction[]_ | `[]` |
+| overdue | 异常角标文本 | _string_ | - |
+| show-overdue | 是否显示异常角标 | _boolean_ | `true` |
+
+### Events
+
+| 事件名 | 说明 | 回调参数 |
+| --- | --- | --- |
+| click-action | 点击底部操作 | _action, index_ |
+
+### Slots
+
+| 名称 | 说明 |
+| --- | --- |
+| title | 自定义标题 |
+| tags | 自定义标签栏 |
+| info | 自定义收起信息 |
+| expanded | 自定义展开信息 |

package/es/work-order-card/WorkOrderCard.tsx

@@ -0,0 +1,84 @@
+import { computed, defineComponent, ref, watch, type CSSProperties, type ExtractPropTypes } from 'vue';
+import { Button } from '../button';
+import { createNamespace, makeArrayProp, makeStringProp, truthProp } from '../utils';
+import { Divider } from '../divider';
+import { Icon } from '../icon';
+import { Tag } from '../tag';
+import type { WorkOrderCardAction, WorkOrderCardInfo, WorkOrderCardTag } from './types';
+
+const [name, bem] = createNamespace('work-order-card');
+
+const props = {
+  title: makeStringProp(''),
+  expanded: { type: Boolean as () => boolean | undefined, default: undefined },
+  defaultExpanded: Boolean,
+  expandable: truthProp,
+  tags: makeArrayProp<WorkOrderCardTag>(),
+  location: String,
+  showLocation: truthProp,
+  primaryInfos: makeArrayProp<WorkOrderCardInfo>(),
+  expandedInfos: makeArrayProp<WorkOrderCardInfo>(),
+  actions: makeArrayProp<WorkOrderCardAction>(),
+  overdue: String,
+  showOverdue: truthProp,
+  clickable: Boolean,
+};
+
+export type WorkOrderCardProps = ExtractPropTypes<typeof props>;
+
+export default defineComponent({
+  name,
+  props,
+  emits: ['click', 'click-action', 'update:expanded'],
+  setup(props, { emit, slots }) {
+    const innerExpanded = ref(props.defaultExpanded);
+    const isExpanded = computed(() => props.expanded ?? innerExpanded.value);
+    watch(() => props.defaultExpanded, (value) => { if (props.expanded === undefined) innerExpanded.value = value; });
+    const toggle = () => {
+      if (!props.expandable) return;
+      const value = !isExpanded.value;
+      if (props.expanded === undefined) innerExpanded.value = value;
+      emit('update:expanded', value);
+    };
+    const renderInfo = (info: WorkOrderCardInfo) => (
+      <div class={bem('info')}>
+        {info.icon && <Icon name={info.icon} size="12" />}
+        <span>{info.text}</span>
+      </div>
+    );
+    const renderAction = (action: WorkOrderCardAction, index: number) => (
+      <Button
+        type="text"
+        disabled={action.disabled}
+        style={{ '--van-button-primary-background-color': action.color || 'var(--van-gray-7)' } as CSSProperties}
+        onClick={(event) => { event.stopPropagation(); emit('click-action', action, index); }}
+      >
+        {action.text}
+      </Button>
+    );
+    const hasExpandedContent = () => Boolean(slots.expanded || props.expandedInfos.length);
+    return () => (
+      <div class={[bem(), bem({ expanded: isExpanded.value, expandable: props.expandable, actions: props.actions.length > 0, expandedContent: hasExpandedContent() })]} onClick={() => props.clickable && emit('click')}>
+        {props.showOverdue && props.overdue && <div class={bem('overdue')}>{props.overdue}</div>}
+        <div class={bem('header')} onClick={toggle}>
+          <div class={bem('title')}>{slots.title ? slots.title() : props.title}</div>
+          {props.expandable && <Icon name="trangle-down" size="16" class={bem('arrow')} />}
+        </div>
+        <div class={bem('tags')}>
+          {slots.tags ? slots.tags() : props.tags.map((tag) => <Tag color={tag.color} textColor={tag.textColor}>{tag.text}</Tag>)}
+        </div>
+        {props.showLocation && props.location && <div class={bem('location')}><Icon name="location-o" size="12" /><span>{props.location}</span></div>}
+        <div class={bem('infos')}>{slots.info ? slots.info() : props.primaryInfos.map(renderInfo)}</div>
+        {hasExpandedContent() && (
+          <div class={bem('expanded-wrapper', { visible: isExpanded.value })} aria-hidden={!isExpanded.value}>
+            <div class={bem('expanded-content')}>
+              <Divider dashed hairline />
+              {slots.expanded ? slots.expanded() : props.expandedInfos.map(renderInfo)}
+            </div>
+          </div>
+        )}
+        {props.actions.length > 0 && <div class={bem('actions')}>{props.actions.map(renderAction)}</div>}
+      </div>
+    );
+  },
+});

package/es/work-order-card/index.ts

@@ -0,0 +1,8 @@
+import { withInstall } from '../utils';
+import _WorkOrderCard from './WorkOrderCard';
+
+export const WorkOrderCard = withInstall(_WorkOrderCard);
+export default WorkOrderCard;
+export type { WorkOrderCardProps } from './WorkOrderCard';
+export type { WorkOrderCardAction, WorkOrderCardInfo, WorkOrderCardTag } from './types';
+declare module 'vue' { export interface GlobalComponents { VanWorkOrderCard: typeof WorkOrderCard; } }

package/es/work-order-card/style/index.js

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

package/es/work-order-card/style/less.js

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

package/es/work-order-card/types.ts

@@ -0,0 +1,20 @@
+import type { Numeric } from '../utils';
+
+export type WorkOrderCardTag = {
+  text: string;
+  color?: string;
+  textColor?: string;
+};
+
+export type WorkOrderCardInfo = {
+  icon?: string;
+  text: string;
+};
+
+export type WorkOrderCardAction = {
+  text: string;
+  color?: string;
+  disabled?: boolean;
+};
+
+export type WorkOrderCardValue = Numeric;

package/es/work-order-filter/README.md

@@ -0,0 +1,86 @@
+# WorkOrderFilter
+
+### Intro
+
+A bottom sheet for filtering work orders by project, status, time range, and work type.
+
+### Install
+
+```js
+import { createApp } from 'vue';
+import { WorkOrderFilter } from 'vant';
+
+const app = createApp();
+app.use(WorkOrderFilter);
+```
+
+## Usage
+
+```html
+<van-field
+  v-model="filterText"
+  label="Work Order Filter"
+  is-link
+  readonly
+  @click="showFilter = true"
+/>
+
+<van-work-order-filter
+  v-model:show="showFilter"
+  v-model="filterValue"
+  @confirm="onConfirm"
+/>
+```
+
+## API
+
+### Props
+
+| Attribute | Description | Type | Default |
+| --- | --- | --- | --- |
+| v-model:show | Whether to show the panel | _boolean_ | `false` |
+| v-model | Filter value | _WorkOrderFilterValue_ | - |
+| title | Panel title | _string_ | `Filter` |
+| projects | Project options | _WorkOrderFilterOption[]_ | Built-in sample data |
+| work-order-types | Work-order status options | _WorkOrderFilterOption[]_ | Built-in options |
+| sort-options | Sort options | _WorkOrderFilterOption[]_ | Built-in options |
+| time-options | Time range options | _WorkOrderFilterOption[]_ | Built-in options |
+| reminder-options | Overdue options | _WorkOrderFilterOption[]_ | Built-in options |
+| relation-options | Related material request options | _WorkOrderFilterOption[]_ | Built-in options |
+| work-types | Work type options | _WorkOrderFilterOption[]_ | Built-in options |
+| reset-text | Reset button text | _string_ | `Reset` |
+| confirm-text | Confirm button text | _string_ | `Confirm` |
+| save-text | Default-filter checkbox text | _string_ | `Save as my default filter` |
+| show-projects | Whether to show the projects section | _boolean_ | `true` |
+| show-sort | Whether to show the sort section | _boolean_ | `true` |
+| show-time-range | Whether to show the time range section | _boolean_ | `true` |
+| show-reminder | Whether to show the overdue section | _boolean_ | `true` |
+| show-relation | Whether to show the related request section | _boolean_ | `true` |
+| show-work-order-types | Whether to show the work-order status section | _boolean_ | `true` |
+| show-work-types | Whether to show the work-type section | _boolean_ | `true` |
+| section-order | Section order. Supports `projects`, `sort`, `time-range`, `reminder`, `relation`, `work-order-types`, `work-types`, and `custom` | _WorkOrderFilterSectionKey[]_ | Built-in order |
+
+### Events
+
+| Event | Description | Arguments |
+| --- | --- | --- |
+| confirm | Emitted when confirming | _value: WorkOrderFilterValue_ |
+| reset | Emitted when resetting | _value: WorkOrderFilterValue_ |
+
+### Slots
+
+| Name | Description |
+| --- | --- |
+| default | Custom filter content; use `custom` in `section-order` to control its position. |
+
+### Types
+
+```ts
+import type { WorkOrderFilterOption, WorkOrderFilterValue } from 'vant';
+
+type WorkOrderFilterOption = {
+  label: string;
+  value: string;
+  disabled?: boolean;
+};
+```