persagy-vant 0.0.36 → 0.0.38

package/es/title-bar/index.less

@@ -5,16 +5,20 @@
   --van-title-bar-gap: @title-bar-gap;
   --van-title-bar-title-color: @title-bar-title-color;
   --van-title-bar-description-color: @title-bar-description-color;
+  --van-title-bar-required-color: @title-bar-required-color;
   --van-title-bar-action-divider-before-gap: @title-bar-action-divider-before-gap;
   --van-title-bar-action-divider-after-gap: @title-bar-action-divider-after-gap;
   --van-title-bar-action-divider-color: @title-bar-action-divider-color;
   --van-title-bar-action-divider-height: @title-bar-action-divider-height;
+  --van-title-bar-action-padding: @title-bar-action-padding;
 }
 
 .van-title-bar {
   color: var(--van-title-bar-title-color);
 
   &__header { display: flex; align-items: flex-start; width: 100%; padding: var(--van-title-bar-padding); color: inherit; font: inherit; text-align: left; background: transparent; border: 0; }
+  &--required &__header { position: relative; overflow: visible; }
+  &--required &__header::before { position: absolute; top: 12px; left: var(--van-padding-xs); color: var(--van-title-bar-required-color); font-size: var(--van-font-size-md); line-height: var(--van-line-height-lg); content: '*'; }
   &--expandable &__header { cursor: pointer; &:active { background: var(--van-active-color); } }
   &__icon { flex: none; margin: 3px 4px 0 0; font-size: 16px; }
   &__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
@@ -23,11 +27,12 @@
   &__description { overflow: hidden; color: var(--van-title-bar-description-color); font-size: var(--van-font-size-sm); font-weight: 400; line-height: var(--van-line-height-md); text-overflow: ellipsis; white-space: nowrap; }
   &__action { display: flex; flex: none; align-items: center; margin-left: var(--van-title-bar-action-divider-before-gap); }
   &__action-divider { width: 1px; height: var(--van-title-bar-action-divider-height); margin-right: var(--van-title-bar-action-divider-after-gap); background: var(--van-title-bar-action-divider-color); }
-  &__action .van-button { flex: none; }
+  &__action .van-button { flex: none; height: var(--van-line-height-lg); padding: var(--van-title-bar-action-padding); font-size: var(--van-font-size-md); font-weight: var(--van-font-weight-bold); line-height: var(--van-line-height-lg); }
   &__arrow { flex: none; margin: 4px 0 0 8px; color: var(--van-gray-6); font-size: 14px; transition: transform var(--van-animation-duration-fast); transform: rotate(180deg); }
   &__arrow--expanded { transform: rotate(0); }
   &--mini &__header { padding-top: 12px; padding-bottom: 4px; }
   &--mini &__text strong { font-size: var(--van-font-size-sm); line-height: var(--van-line-height-md); }
   &--mini &__icon { margin-top: 3px; font-size: 14px; }
   &--mini &__arrow { margin-top: 3px; }
+  &--mini &__action .van-button { height: var(--van-line-height-md); font-size: var(--van-font-size-sm); line-height: var(--van-line-height-md); }
 }

package/es/title-bar/var.less

@@ -4,7 +4,9 @@
 @title-bar-gap: 4px;
 @title-bar-title-color: var(--van-gray-8);
 @title-bar-description-color: var(--van-gray-6);
+@title-bar-required-color: var(--van-danger-color);
 @title-bar-action-divider-before-gap: 8px;
 @title-bar-action-divider-after-gap: 2px;
 @title-bar-action-divider-color: var(--van-gray-4);
 @title-bar-action-divider-height: 12px;
+@title-bar-action-padding: 0 8px;

package/es/tree-select/TreeSelect.mjs

@@ -41,6 +41,10 @@ var stdin_default = defineComponent({
     const expandedKeys = computed(() => props.expandedKeys);
     const isExpanded = (id) => expandedKeys.value.includes(id);
     const isSelected = (id) => selectedKeys.value.includes(id);
+    const getNodeStyle = (level) => ({
+      paddingLeft: `calc(var(--van-padding-md) + ${level * 16}px)`,
+      "--van-tree-select-divider-left": `calc(var(--van-padding-md) + ${level * 16}px)`
+    });
     const getDescendantIds = (item) => {
       var _a;
       return ((_a = item.children) == null ? void 0 : _a.flatMap((child) => [child.id, ...getDescendantIds(child)])) || [];
@@ -103,7 +107,10 @@ var stdin_default = defineComponent({
       if (!hasChildren && slots.leaf) {
         return _createVNode("div", {
           "key": item.id,
-          "class": bem("node")
+          "class": [bem("node"), bem("leaf", {
+            divider: props.showDivider
+          })],
+          "style": getNodeStyle(level)
         }, [slots.leaf({
           item,
           level
@@ -120,9 +127,7 @@ var stdin_default = defineComponent({
         }),
         "title": item.text,
         "border": props.showDivider,
-        "style": {
-          paddingLeft: `calc(var(--van-padding-md) + ${level * 16}px)`
-        },
+        "style": getNodeStyle(level),
         "rightSelect": selectable && selectionState !== "indeterminate" ? selectionState === "checked" : void 0,
         "selectType": props.multiple ? "checkbox" : "radio",
         "onUpdate:rightSelect": (value) => updateSelected(item, value)

package/es/tree-select/index.css

@@ -1 +1 @@
-:root{--van-tree-select-indent: var(--van-padding-md);--van-tree-select-arrow-size: 16px;--van-tree-select-animation-duration: .24s}.van-tree-select{overflow:hidden;color:var(--van-cell-text-color);background:var(--van-white)}.van-tree-select__node{overflow:hidden}.van-tree-select__cell{min-height:44px;padding:10px var(--van-padding-md)}.van-tree-select__cell .van-cell__title-row{align-items:center}.van-tree-select__cell .van-cell__title{font-size:var(--van-font-size-md);line-height:22px}.van-tree-select__node:not(:last-child)>.van-tree-select__cell:not(.van-cell--borderless):after{display:block}.van-tree-select__arrow{flex:none;margin-right:var(--van-padding-base);color:var(--van-gray-5);font-size:var(--van-tree-select-arrow-size);transition:transform var(--van-tree-select-animation-duration) ease}.van-tree-select__arrow--expanded{transform:rotate(0)}.van-tree-select__arrow:not(.van-tree-select__arrow--expanded){transform:rotate(-90deg)}.van-tree-select__expand-control{display:inline-flex;align-items:center;padding:0;color:inherit;font:inherit;line-height:inherit;text-align:left;background:transparent;border:0}.van-tree-select__expand-control:not(:disabled){cursor:pointer}.van-tree-select__expand-control:disabled{color:var(--van-text-color-3);cursor:not-allowed}.van-tree-select__children{overflow:hidden}.van-tree-select__indeterminate{position:relative;display:block;width:14px;height:14px;padding:0;background:var(--van-primary-color);border:0;border-radius:50%}.van-tree-select__indeterminate:after{position:absolute;top:calc(50% - 1px);right:25%;left:25%;height:2px;content:"";background:var(--van-white);border-radius:1px}.van-tree-select-expand-enter-active,.van-tree-select-expand-leave-active{overflow:hidden;transition:max-height var(--van-tree-select-animation-duration) ease,opacity var(--van-tree-select-animation-duration) ease}.van-tree-select-expand-enter-from,.van-tree-select-expand-leave-to{max-height:0;opacity:0}.van-tree-select-expand-enter-to,.van-tree-select-expand-leave-from{max-height:1000px;opacity:1}
+:root{--van-tree-select-indent: var(--van-padding-md);--van-tree-select-arrow-size: 16px;--van-tree-select-animation-duration: .24s;--van-tree-select-divider-left: var(--van-padding-md)}.van-tree-select{overflow:hidden;color:var(--van-cell-text-color);background:var(--van-white)}.van-tree-select__node{overflow:hidden}.van-tree-select__leaf{position:relative;box-sizing:border-box}.van-tree-select__leaf--divider:not(:last-child):after{position:absolute;right:var(--van-padding-md);bottom:0;left:var(--van-tree-select-divider-left);height:1px;background:var(--van-border-color);content:"";transform:scaleY(.5)}.van-tree-select__cell{min-height:44px;padding:10px var(--van-padding-md)}.van-tree-select__cell .van-cell__title-row{align-items:center}.van-tree-select__cell .van-cell__title{font-size:var(--van-font-size-md);line-height:22px}.van-tree-select__node:not(:last-child)>.van-tree-select__cell:not(.van-cell--borderless):after{display:block;left:var(--van-tree-select-divider-left)}.van-tree-select__cell--branch:not(.van-cell--borderless):after{display:block;left:var(--van-tree-select-divider-left)}.van-tree-select__arrow{flex:none;margin-right:var(--van-padding-base);color:var(--van-gray-5);font-size:var(--van-tree-select-arrow-size);transition:transform var(--van-tree-select-animation-duration) ease}.van-tree-select__arrow--expanded{transform:rotate(0)}.van-tree-select__arrow:not(.van-tree-select__arrow--expanded){transform:rotate(-90deg)}.van-tree-select__expand-control{display:inline-flex;align-items:center;padding:0;color:inherit;font:inherit;line-height:inherit;text-align:left;background:transparent;border:0}.van-tree-select__expand-control:not(:disabled){cursor:pointer}.van-tree-select__expand-control:disabled{color:var(--van-text-color-3);cursor:not-allowed}.van-tree-select__children{overflow:hidden}.van-tree-select__indeterminate{position:relative;display:block;width:14px;height:14px;padding:0;background:var(--van-primary-color);border:0;border-radius:50%}.van-tree-select__indeterminate:after{position:absolute;top:calc(50% - 1px);right:25%;left:25%;height:2px;content:"";background:var(--van-white);border-radius:1px}.van-tree-select-expand-enter-active,.van-tree-select-expand-leave-active{overflow:hidden;transition:max-height var(--van-tree-select-animation-duration) ease,opacity var(--van-tree-select-animation-duration) ease}.van-tree-select-expand-enter-from,.van-tree-select-expand-leave-to{max-height:0;opacity:0}.van-tree-select-expand-enter-to,.van-tree-select-expand-leave-from{max-height:1000px;opacity:1}

package/es/tree-select/index.less

@@ -4,6 +4,7 @@
   --van-tree-select-indent: @tree-select-indent;
   --van-tree-select-arrow-size: @tree-select-arrow-size;
   --van-tree-select-animation-duration: @tree-select-animation-duration;
+  --van-tree-select-divider-left: var(--van-padding-md);
 }
 
 .van-tree-select {
@@ -13,6 +14,26 @@
 
   &__node { overflow: hidden; }
 
+  // Slot content keeps the same left hierarchy as regular tree nodes. Embedded
+  // components retain their own right padding to avoid doubling the edge gap.
+  &__leaf {
+    position: relative;
+    box-sizing: border-box;
+
+    // Leaf-slot items are wrapped by separate tree nodes, so restore the
+    // divider between adjacent leaves just as we do for regular Cell nodes.
+    &--divider:not(:last-child)::after {
+      position: absolute;
+      right: var(--van-padding-md);
+      bottom: 0;
+      left: var(--van-tree-select-divider-left);
+      height: 1px;
+      background: var(--van-border-color);
+      content: '';
+      transform: scaleY(.5);
+    }
+  }
+
   &__cell {
     min-height: 44px;
     padding: 10px var(--van-padding-md);
@@ -22,9 +43,16 @@
   }
 
   // Each Cell is wrapped by a tree node, so Cell's :last-child rule would
-  // otherwise hide every divider. Restore it between sibling tree nodes.
+  // otherwise hide every divider. Branches retain a divider even when they
+  // are the only sibling, separating the parent from its indented children.
   &__node:not(:last-child) > &__cell:not(.van-cell--borderless)::after {
     display: block;
+    left: var(--van-tree-select-divider-left);
+  }
+
+  &__cell--branch:not(.van-cell--borderless)::after {
+    display: block;
+    left: var(--van-tree-select-divider-left);
   }
 
   &__arrow {

package/es/uploader/Uploader.d.ts

@@ -14,6 +14,8 @@ declare const uploaderProps: {
     };
     capture: StringConstructor;
     multiple: BooleanConstructor;
+    label: StringConstructor;
+    required: BooleanConstructor;
     disabled: BooleanConstructor;
     readonly: BooleanConstructor;
     lazyLoad: BooleanConstructor;
@@ -76,6 +78,8 @@ declare const _default: import("vue").DefineComponent<{
     };
     capture: StringConstructor;
     multiple: BooleanConstructor;
+    label: StringConstructor;
+    required: BooleanConstructor;
     disabled: BooleanConstructor;
     readonly: BooleanConstructor;
     lazyLoad: BooleanConstructor;
@@ -136,6 +140,8 @@ declare const _default: import("vue").DefineComponent<{
     };
     capture: StringConstructor;
     multiple: BooleanConstructor;
+    label: StringConstructor;
+    required: BooleanConstructor;
     disabled: BooleanConstructor;
     readonly: BooleanConstructor;
     lazyLoad: BooleanConstructor;
@@ -193,6 +199,7 @@ declare const _default: import("vue").DefineComponent<{
     "onClose-preview"?: ((...args: any[]) => any) | undefined;
     "onClick-preview"?: ((...args: any[]) => any) | undefined;
 }, {
+    required: boolean;
     name: string | number;
     accept: string;
     disabled: boolean;

package/es/uploader/Uploader.mjs

@@ -1,6 +1,26 @@
-import { ref, reactive, defineComponent, onBeforeUnmount, mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import { ref, reactive, defineComponent, onBeforeUnmount, mergeProps as _mergeProps, createVNode as _createVNode, createTextVNode as _createTextVNode } from "vue";
 import { pick, extend, toArray, isPromise, truthProp, getSizeStyle, makeArrayProp, makeStringProp, makeNumericProp } from "../utils/index.mjs";
-import { bem, name, isOversize, filterFiles, isImageFile, readFileContent } from "./utils.mjs";
+import { bem, name, isOversize, filterFiles, isImageFile, isVideoFile, readFileContent, createVideoThumbnail } from "./utils.mjs";
 import { useCustomFieldValue } from "@vant/use";
 import { useExpose } from "../composables/use-expose.mjs";
 import { Icon } from "../icon/index.mjs";
@@ -11,6 +31,8 @@ const uploaderProps = {
   accept: makeStringProp("image/*"),
   capture: String,
   multiple: Boolean,
+  label: String,
+  required: Boolean,
   disabled: Boolean,
   readonly: Boolean,
   lazyLoad: Boolean,
@@ -80,37 +102,29 @@ var stdin_default = defineComponent({
         modelValue,
         resultType
       } = props;
+      const createFileItem = (file) => __async(this, null, function* () {
+        const content = yield readFileContent(file, resultType);
+        const result = {
+          file,
+          status: "",
+          message: ""
+        };
+        if (content) {
+          result.content = content;
+        }
+        if (isVideoFile(result)) {
+          result.videoThumbnail = yield createVideoThumbnail(file);
+        }
+        return result;
+      });
       if (Array.isArray(files)) {
         const remainCount = +maxCount - modelValue.length;
         if (files.length > remainCount) {
           files = files.slice(0, remainCount);
         }
-        Promise.all(files.map((file) => readFileContent(file, resultType))).then((contents) => {
-          const fileList = files.map((file, index) => {
-            const result = {
-              file,
-              status: "",
-              message: ""
-            };
-            if (contents[index]) {
-              result.content = contents[index];
-            }
-            return result;
-          });
-          onAfterRead(fileList);
-        });
+        Promise.all(files.map(createFileItem)).then(onAfterRead);
       } else {
-        readFileContent(files, resultType).then((content) => {
-          const result = {
-            file: files,
-            status: "",
-            message: ""
-          };
-          if (content) {
-            result.content = content;
-          }
-          onAfterRead(result);
-        });
+        createFileItem(files).then(onAfterRead);
       }
     };
     const onChange = (event) => {
@@ -143,7 +157,7 @@ var stdin_default = defineComponent({
     let imagePreview;
     const onClosePreview = () => emit("close-preview");
     const previewImage = (item) => {
-      if (props.previewFullImage) {
+      if (props.previewFullImage && isImageFile(item)) {
         const imageFiles = props.modelValue.filter(isImageFile);
         const images = imageFiles.map((item2) => {
           if (item2.file && !item2.url && item2.status !== "failed") {
@@ -186,6 +200,15 @@ var stdin_default = defineComponent({
         return props.modelValue.map(renderPreviewItem);
       }
     };
+    const renderLabel = () => {
+      if (!props.label)
+        return;
+      return _createVNode("div", {
+        "class": bem("label")
+      }, [props.required && _createVNode("span", {
+        "class": bem("required")
+      }, [_createTextVNode("*")]), props.label]);
+    };
     const onClickUpload = (event) => emit("click-upload", event);
     const renderUpload = () => {
       if (props.modelValue.length >= props.maxCount || !props.showUpload) {
@@ -234,8 +257,10 @@ var stdin_default = defineComponent({
     });
     useCustomFieldValue(() => props.modelValue);
     return () => _createVNode("div", {
-      "class": bem()
-    }, [_createVNode("div", {
+      "class": bem({
+        required: props.required && !props.label
+      })
+    }, [renderLabel(), _createVNode("div", {
       "class": bem("wrapper", {
         disabled: props.disabled
       })

package/es/uploader/UploaderPreviewItem.d.ts

@@ -14,7 +14,7 @@ declare const _default: import("vue").DefineComponent<{
     deletable: BooleanConstructor;
     previewSize: PropType<Numeric | [Numeric, Numeric]>;
     beforeDelete: PropType<Interceptor>;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("delete" | "preview")[], "delete" | "preview", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "delete" | "preview")[], "click" | "delete" | "preview", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     name: (NumberConstructor | StringConstructor)[];
     item: {
         type: PropType<UploaderFileListItem>;
@@ -27,6 +27,7 @@ declare const _default: import("vue").DefineComponent<{
     previewSize: PropType<Numeric | [Numeric, Numeric]>;
     beforeDelete: PropType<Interceptor>;
 }>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
     onDelete?: ((...args: any[]) => any) | undefined;
     onPreview?: ((...args: any[]) => any) | undefined;
 }, {

package/es/uploader/UploaderPreviewItem.mjs

@@ -1,5 +1,5 @@
 import { defineComponent, createVNode as _createVNode } from "vue";
-import { t, bem, isImageFile } from "./utils.mjs";
+import { t, bem, isImageFile, isVideoFile } from "./utils.mjs";
 import { isDef, extend, numericProp, getSizeStyle, callInterceptor, makeRequiredProp } from "../utils/index.mjs";
 import { Icon } from "../icon/index.mjs";
 import { Image } from "../image/index.mjs";
@@ -15,7 +15,7 @@ var stdin_default = defineComponent({
     previewSize: [Number, String, Array],
     beforeDelete: Function
   },
-  emits: ["delete", "preview"],
+  emits: ["delete", "preview", "click"],
   setup(props, {
     emit,
     slots
@@ -56,7 +56,11 @@ var stdin_default = defineComponent({
         done: () => emit("delete")
       });
     };
-    const onPreview = () => emit("preview");
+    const onPreview = () => {
+      emit("preview");
+      emit("click");
+    };
+    const onFilePreview = () => emit("click");
     const renderDeleteIcon = () => {
       if (props.deletable && props.item.status !== "uploading") {
         const slot = slots["preview-delete"];
@@ -94,10 +98,12 @@ var stdin_default = defineComponent({
         imageFit,
         previewSize
       } = props;
-      if (isImageFile(item)) {
+      const isImage = isImageFile(item);
+      const isVideo = isVideoFile(item);
+      if (isImage || isVideo && item.videoThumbnail) {
         return _createVNode(Image, {
           "fit": imageFit,
-          "src": item.content || item.url,
+          "src": isVideo ? item.videoThumbnail : item.content || item.url,
           "class": bem("preview-image"),
           "width": Array.isArray(previewSize) ? previewSize[0] : previewSize,
           "height": Array.isArray(previewSize) ? previewSize[1] : previewSize,
@@ -109,7 +115,8 @@ var stdin_default = defineComponent({
       }
       return _createVNode("div", {
         "class": bem("file"),
-        "style": getSizeStyle(props.previewSize)
+        "style": getSizeStyle(props.previewSize),
+        "onClick": onFilePreview
       }, [_createVNode(Icon, {
         "class": bem("file-icon"),
         "name": "description"

package/es/uploader/index.css

@@ -1 +1 @@
-:root{--van-uploader-size: 72px;--van-uploader-border-radius: 8px;--van-uploader-border: 1px solid var(--van-grey-50);--van-uploader-icon-size: 24px;--van-uploader-icon-color: var(--van-gray-4);--van-uploader-text-color: var(--van-text-color-2);--van-uploader-text-font-size: var(--van-font-size-sm);--van-uploader-upload-background-color: var(--van-gray-1);--van-uploader-upload-active-color: var(--van-active-color);--van-uploader-delete-color: var(--van-white);--van-uploader-delete-icon-size: 14px;--van-uploader-delete-background-color: rgba(0, 0, 0, .7);--van-uploader-file-background-color: var(--van-background-color);--van-uploader-file-icon-size: 20px;--van-uploader-file-icon-color: var(--van-gray-7);--van-uploader-file-name-padding: 0 var(--van-padding-base);--van-uploader-file-name-margin-top: var(--van-padding-xs);--van-uploader-file-name-font-size: var(--van-font-size-sm);--van-uploader-file-name-text-color: var(--van-gray-7);--van-uploader-mask-text-color: var(--van-white);--van-uploader-mask-background-color: rgba(50, 50, 51, .88);--van-uploader-mask-icon-size: 22px;--van-uploader-mask-message-font-size: var(--van-font-size-sm);--van-uploader-mask-message-line-height: var(--van-line-height-xs);--van-uploader-loading-icon-size: 22px;--van-uploader-loading-icon-color: var(--van-white);--van-uploader-disabled-opacity: var(--van-disabled-opacity)}.van-uploader{position:relative;display:inline-block}.van-uploader__wrapper{display:flex;flex-wrap:wrap;gap:var(--van-padding-xs)}.van-uploader__wrapper--disabled{opacity:var(--van-uploader-disabled-opacity)}.van-uploader__input{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;cursor:pointer;opacity:0}.van-uploader__input-wrapper{position:relative}.van-uploader__input:disabled{cursor:not-allowed}.van-uploader__upload{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;width:var(--van-uploader-size);height:var(--van-uploader-size);background:var(--van-uploader-upload-background-color);border-radius:var(--van-uploader-border-radius);border:var(--van-uploader-border)}.van-uploader__upload:active{background-color:var(--van-uploader-upload-active-color)}.van-uploader__upload--readonly:active{background-color:var(--van-uploader-upload-background-color)}.van-uploader__upload-icon{color:var(--van-uploader-icon-color);font-size:var(--van-uploader-icon-size)}.van-uploader__upload-text{margin-top:var(--van-padding-xs);color:var(--van-uploader-text-color);font-size:var(--van-uploader-text-font-size)}.van-uploader__preview{position:relative;cursor:pointer;border-radius:var(--van-uploader-border-radius);overflow:hidden}.van-uploader__preview-image{display:block;width:var(--van-uploader-size);height:var(--van-uploader-size);border-radius:var(--van-uploader-border-radius);border:var(--van-uploader-border);overflow:hidden;box-sizing:border-box}.van-uploader__preview-delete{position:absolute;top:0;right:0}.van-uploader__preview-delete--shadow{width:var(--van-uploader-delete-icon-size);height:var(--van-uploader-delete-icon-size);background:var(--van-uploader-delete-background-color);border-radius:0 0 0 12px}.van-uploader__preview-delete-icon{position:absolute;top:0;right:0;color:var(--van-uploader-delete-color);font-size:var(--van-uploader-delete-icon-size);transform:scale(.7) translate(10%,-10%)}.van-uploader__preview-cover{position:absolute;top:0;right:0;bottom:0;left:0}.van-uploader__mask{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--van-uploader-mask-text-color);background:var(--van-uploader-mask-background-color);border-radius:var(--van-uploader-border-radius);border:var(--van-uploader-border)}.van-uploader__mask-icon{font-size:var(--van-uploader-mask-icon-size)}.van-uploader__mask-message{margin-top:6px;padding:0 var(--van-padding-base);font-size:var(--van-uploader-mask-message-font-size);line-height:var(--van-uploader-mask-message-line-height)}.van-uploader__loading{width:var(--van-uploader-loading-icon-size);height:var(--van-uploader-loading-icon-size);color:var(--van-uploader-loading-icon-color)}.van-uploader__file{display:flex;flex-direction:column;align-items:center;justify-content:center;width:var(--van-uploader-size);height:var(--van-uploader-size);background:var(--van-uploader-file-background-color)}.van-uploader__file-icon{color:var(--van-uploader-file-icon-color);font-size:var(--van-uploader-file-icon-size)}.van-uploader__file-name{box-sizing:border-box;width:100%;margin-top:var(--van-uploader-file-name-margin-top);padding:var(--van-uploader-file-name-padding);color:var(--van-uploader-file-name-text-color);font-size:var(--van-uploader-file-name-font-size);text-align:center}
+:root{--van-uploader-size: 72px;--van-uploader-border-radius: 8px;--van-uploader-border: 1px solid var(--van-grey-50);--van-uploader-icon-size: 24px;--van-uploader-icon-color: var(--van-gray-4);--van-uploader-text-color: var(--van-text-color-2);--van-uploader-text-font-size: var(--van-font-size-sm);--van-uploader-upload-background-color: var(--van-gray-1);--van-uploader-upload-active-color: var(--van-active-color);--van-uploader-delete-color: var(--van-white);--van-uploader-delete-icon-size: 14px;--van-uploader-delete-background-color: rgba(0, 0, 0, .7);--van-uploader-file-background-color: var(--van-background-color);--van-uploader-file-icon-size: 20px;--van-uploader-file-icon-color: var(--van-gray-7);--van-uploader-file-name-padding: 0 var(--van-padding-base);--van-uploader-file-name-margin-top: var(--van-padding-xs);--van-uploader-file-name-font-size: var(--van-font-size-sm);--van-uploader-file-name-text-color: var(--van-gray-7);--van-uploader-mask-text-color: var(--van-white);--van-uploader-mask-background-color: rgba(50, 50, 51, .88);--van-uploader-mask-icon-size: 22px;--van-uploader-mask-message-font-size: var(--van-font-size-sm);--van-uploader-mask-message-line-height: var(--van-line-height-xs);--van-uploader-loading-icon-size: 22px;--van-uploader-loading-icon-color: var(--van-white);--van-uploader-disabled-opacity: var(--van-disabled-opacity);--van-uploader-required-color: var(--van-danger-color);--van-uploader-label-color: var(--van-text-color);--van-uploader-label-font-size: var(--van-font-size-md);--van-uploader-label-line-height: var(--van-line-height-md);--van-uploader-label-margin-bottom: var(--van-padding-sm)}.van-uploader{position:relative;display:inline-block}.van-uploader--required:before{position:absolute;top:0;left:calc(-1 * var(--van-padding-sm));color:var(--van-uploader-required-color);font-size:var(--van-font-size-md);line-height:var(--van-line-height-md);content:"*"}.van-uploader__label{position:relative;margin-bottom:var(--van-uploader-label-margin-bottom);color:var(--van-uploader-label-color);font-size:var(--van-uploader-label-font-size);line-height:var(--van-uploader-label-line-height)}.van-uploader__required{position:absolute;top:0;left:calc(-1 * (var(--van-padding-md) - var(--van-padding-xs)));color:var(--van-uploader-required-color)}.van-uploader__wrapper{display:flex;flex-wrap:wrap;gap:var(--van-padding-xs)}.van-uploader__wrapper--disabled{opacity:var(--van-uploader-disabled-opacity)}.van-uploader__input{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;cursor:pointer;opacity:0}.van-uploader__input-wrapper{position:relative}.van-uploader__input:disabled{cursor:not-allowed}.van-uploader__upload{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;width:var(--van-uploader-size);height:var(--van-uploader-size);background:var(--van-uploader-upload-background-color);border-radius:var(--van-uploader-border-radius);border:var(--van-uploader-border)}.van-uploader__upload:active{background-color:var(--van-uploader-upload-active-color)}.van-uploader__upload--readonly:active{background-color:var(--van-uploader-upload-background-color)}.van-uploader__upload-icon{color:var(--van-uploader-icon-color);font-size:var(--van-uploader-icon-size)}.van-uploader__upload-text{margin-top:var(--van-padding-xs);color:var(--van-uploader-text-color);font-size:var(--van-uploader-text-font-size)}.van-uploader__preview{position:relative;cursor:pointer;border-radius:var(--van-uploader-border-radius);overflow:hidden}.van-uploader__preview-image{display:block;width:var(--van-uploader-size);height:var(--van-uploader-size);border-radius:var(--van-uploader-border-radius);border:var(--van-uploader-border);overflow:hidden;box-sizing:border-box}.van-uploader__preview-delete{position:absolute;top:0;right:0}.van-uploader__preview-delete--shadow{width:var(--van-uploader-delete-icon-size);height:var(--van-uploader-delete-icon-size);background:var(--van-uploader-delete-background-color);border-radius:0 0 0 12px}.van-uploader__preview-delete-icon{position:absolute;top:0;right:0;color:var(--van-uploader-delete-color);font-size:var(--van-uploader-delete-icon-size);transform:scale(.7) translate(10%,-10%)}.van-uploader__preview-cover{position:absolute;top:0;right:0;bottom:0;left:0}.van-uploader__mask{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--van-uploader-mask-text-color);background:var(--van-uploader-mask-background-color);border-radius:var(--van-uploader-border-radius);border:var(--van-uploader-border)}.van-uploader__mask-icon{font-size:var(--van-uploader-mask-icon-size)}.van-uploader__mask-message{margin-top:6px;padding:0 var(--van-padding-base);font-size:var(--van-uploader-mask-message-font-size);line-height:var(--van-uploader-mask-message-line-height)}.van-uploader__loading{width:var(--van-uploader-loading-icon-size);height:var(--van-uploader-loading-icon-size);color:var(--van-uploader-loading-icon-color)}.van-uploader__file{display:flex;flex-direction:column;align-items:center;justify-content:center;width:var(--van-uploader-size);height:var(--van-uploader-size);background:var(--van-uploader-file-background-color)}.van-uploader__file-icon{color:var(--van-uploader-file-icon-color);font-size:var(--van-uploader-file-icon-size)}.van-uploader__file-name{box-sizing:border-box;width:100%;margin-top:var(--van-uploader-file-name-margin-top);padding:var(--van-uploader-file-name-padding);color:var(--van-uploader-file-name-text-color);font-size:var(--van-uploader-file-name-font-size);text-align:center}

package/es/uploader/index.d.ts

@@ -10,6 +10,8 @@ export declare const Uploader: import("../utils").WithInstall<import("vue").Defi
     };
     capture: StringConstructor;
     multiple: BooleanConstructor;
+    label: StringConstructor;
+    required: BooleanConstructor;
     disabled: BooleanConstructor;
     readonly: BooleanConstructor;
     lazyLoad: BooleanConstructor;
@@ -70,6 +72,8 @@ export declare const Uploader: import("../utils").WithInstall<import("vue").Defi
     };
     capture: StringConstructor;
     multiple: BooleanConstructor;
+    label: StringConstructor;
+    required: BooleanConstructor;
     disabled: BooleanConstructor;
     readonly: BooleanConstructor;
     lazyLoad: BooleanConstructor;
@@ -127,6 +131,7 @@ export declare const Uploader: import("../utils").WithInstall<import("vue").Defi
     "onClose-preview"?: ((...args: any[]) => any) | undefined;
     "onClick-preview"?: ((...args: any[]) => any) | undefined;
 }, {
+    required: boolean;
     name: string | number;
     accept: string;
     disabled: boolean;

package/es/uploader/index.less

@@ -28,12 +28,42 @@
   --van-uploader-loading-icon-size: @uploader-loading-icon-size;
   --van-uploader-loading-icon-color: @uploader-loading-icon-color;
   --van-uploader-disabled-opacity: @uploader-disabled-opacity;
+  --van-uploader-required-color: @uploader-required-color;
+  --van-uploader-label-color: @uploader-label-color;
+  --van-uploader-label-font-size: @uploader-label-font-size;
+  --van-uploader-label-line-height: @uploader-label-line-height;
+  --van-uploader-label-margin-bottom: @uploader-label-margin-bottom;
 }
 
 .van-uploader {
   position: relative;
   display: inline-block;
 
+  &--required::before {
+    position: absolute;
+    top: 0;
+    left: calc(-1 * var(--van-padding-sm));
+    color: var(--van-uploader-required-color);
+    font-size: var(--van-font-size-md);
+    line-height: var(--van-line-height-md);
+    content: '*';
+  }
+
+  &__label {
+    position: relative;
+    margin-bottom: var(--van-uploader-label-margin-bottom);
+    color: var(--van-uploader-label-color);
+    font-size: var(--van-uploader-label-font-size);
+    line-height: var(--van-uploader-label-line-height);
+  }
+
+  &__required {
+    position: absolute;
+    top: 0;
+    left: calc(-1 * (var(--van-padding-md) - var(--van-padding-xs)));
+    color: var(--van-uploader-required-color);
+  }
+
   &__wrapper {
     display: flex;
     flex-wrap: wrap;

package/es/uploader/types.d.ts

@@ -8,6 +8,7 @@ export declare type UploaderFileListItem = {
     file?: File;
     content?: string;
     isImage?: boolean;
+    videoThumbnail?: string;
     status?: '' | 'uploading' | 'done' | 'failed';
     message?: string;
     imageFit?: ImageFit;

package/es/uploader/utils.d.ts

@@ -9,3 +9,5 @@ export declare function filterFiles(items: UploaderFileListItem[], maxSize: Uplo
 };
 export declare const isImageUrl: (url: string) => boolean;
 export declare function isImageFile(item: UploaderFileListItem): boolean;
+export declare function isVideoFile(item: UploaderFileListItem): boolean;
+export declare function createVideoThumbnail(file: File): Promise<string | undefined>;

package/es/uploader/utils.mjs

@@ -41,6 +41,7 @@ function filterFiles(items, maxSize) {
   return { valid, invalid };
 }
 const IMAGE_REGEXP = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg)/i;
+const VIDEO_REGEXP = /\.(mp4|webm|ogg|mov)(?:$|\?)/i;
 const isImageUrl = (url) => IMAGE_REGEXP.test(url);
 function isImageFile(item) {
   if (item.isImage) {
@@ -57,12 +58,85 @@ function isImageFile(item) {
   }
   return false;
 }
+function isVideoFile(item) {
+  var _a;
+  if ((_a = item.file) == null ? void 0 : _a.type) {
+    return item.file.type.indexOf("video/") === 0;
+  }
+  if (item.url) {
+    return VIDEO_REGEXP.test(item.url);
+  }
+  return typeof item.content === "string" && item.content.indexOf("data:video") === 0;
+}
+function createVideoThumbnail(file) {
+  if (typeof document === "undefined" || typeof URL === "undefined" || typeof URL.createObjectURL !== "function") {
+    return Promise.resolve(void 0);
+  }
+  return new Promise((resolve) => {
+    const video = document.createElement("video");
+    const objectUrl = URL.createObjectURL(file);
+    let settled = false;
+    let timeout;
+    const cleanup = () => {
+      if (timeout !== void 0) {
+        window.clearTimeout(timeout);
+      }
+      URL.revokeObjectURL(objectUrl);
+      video.removeAttribute("src");
+      try {
+        video.load();
+      } catch (e) {
+      }
+    };
+    const done = (thumbnail) => {
+      if (settled)
+        return;
+      settled = true;
+      cleanup();
+      resolve(thumbnail);
+    };
+    const captureFrame = () => {
+      if (!video.videoWidth || !video.videoHeight) {
+        done();
+        return;
+      }
+      const canvas = document.createElement("canvas");
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      const context = canvas.getContext("2d");
+      if (!context) {
+        done();
+        return;
+      }
+      context.drawImage(video, 0, 0, canvas.width, canvas.height);
+      done(canvas.toDataURL("image/jpeg", 0.8));
+    };
+    video.muted = true;
+    video.playsInline = true;
+    video.preload = "auto";
+    video.onloadedmetadata = () => {
+      const duration = Number.isFinite(video.duration) ? video.duration : 0.1;
+      const frameTime = Math.min(0.1, Math.max(duration - 0.01, 0));
+      if (frameTime) {
+        video.currentTime = frameTime;
+      } else {
+        captureFrame();
+      }
+    };
+    video.onseeked = captureFrame;
+    video.onerror = () => done();
+    video.src = objectUrl;
+    timeout = window.setTimeout(() => done(), 3e3);
+  });
+}
 export {
   bem,
+  createVideoThumbnail,
   filterFiles,
   isImageFile,
   isImageUrl,
   isOversize,
+  isVideoFile,
   name,
   readFileContent,
   t

package/es/uploader/var.less

@@ -27,3 +27,8 @@
 @uploader-loading-icon-size: 22px;
 @uploader-loading-icon-color: var(--van-white);
 @uploader-disabled-opacity: var(--van-disabled-opacity);
+@uploader-required-color: var(--van-danger-color);
+@uploader-label-color: var(--van-text-color);
+@uploader-label-font-size: var(--van-font-size-md);
+@uploader-label-line-height: var(--van-line-height-md);
+@uploader-label-margin-bottom: var(--van-padding-sm);