persagy-vant 0.0.36 → 0.0.37

package/lib/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/lib/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/lib/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/lib/uploader/utils.js

@@ -18,10 +18,12 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var stdin_exports = {};
 __export(stdin_exports, {
   bem: () => bem,
+  createVideoThumbnail: () => createVideoThumbnail,
   filterFiles: () => filterFiles,
   isImageFile: () => isImageFile,
   isImageUrl: () => isImageUrl,
   isOversize: () => isOversize,
+  isVideoFile: () => isVideoFile,
   name: () => name,
   readFileContent: () => readFileContent,
   t: () => t
@@ -70,6 +72,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) {
@@ -86,3 +89,74 @@ 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);
+  });
+}

package/lib/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);

package/lib/vant.cjs.js

@@ -2722,6 +2722,8 @@ const cellSharedProps = {
   title: numericProp,
   value: numericProp,
   label: numericProp,
+  description: numericProp,
+  threeLine: Boolean,
   labelSize: numericProp,
   avatar: String,
   rightAvatar: String,
@@ -2821,6 +2823,14 @@ var stdin_default$1O = vue.defineComponent({
         }, [slots.label ? slots.label() : props2.label]);
       }
     };
+    const renderDescription = () => {
+      const showDescription = slots.description || isDef(props2.description);
+      if (showDescription) {
+        return vue.createVNode("div", {
+          "class": bem$1B("description")
+        }, [slots.description ? slots.description() : props2.description]);
+      }
+    };
     const renderTitle = () => {
       if (slots.title || isDef(props2.title)) {
         return vue.createVNode("div", {
@@ -2828,7 +2838,7 @@ var stdin_default$1O = vue.defineComponent({
           "style": props2.titleStyle
         }, [vue.createVNode("div", {
           "class": bem$1B("title-row")
-        }, [slots.title ? slots.title() : vue.createVNode("span", null, [props2.title]), renderTags(), renderTitleIcon()]), renderLabel()]);
+        }, [slots.title ? slots.title() : vue.createVNode("span", null, [props2.title]), renderTags(), renderTitleIcon()]), renderLabel(), props2.threeLine && renderDescription()]);
       }
     };
     const renderValue = () => {
@@ -3016,7 +3026,8 @@ var stdin_default$1O = vue.defineComponent({
         isLink,
         required,
         rightIcon,
-        titleBold
+        titleBold,
+        threeLine
       } = props2;
       const clickable = (_a2 = props2.clickable) != null ? _a2 : isLink || rightIcon === "arrow" || hasSelect("left") || hasSelect("right");
       const hasBadge = !!slots.badge || isDef(props2.badge);
@@ -3026,7 +3037,8 @@ var stdin_default$1O = vue.defineComponent({
         required,
         "title-bold": titleBold,
         clickable,
-        borderless: !border
+        borderless: !border,
+        "three-line": threeLine
       };
       if (cellSize) {
         classes[cellSize] = !!cellSize;
@@ -8004,6 +8016,7 @@ const [name$1a, bem$19] = createNamespace("cell-group");
 const cellGroupProps = {
   title: String,
   inset: Boolean,
+  grayCard: Boolean,
   border: truthProp
 };
 var stdin_default$1j = vue.defineComponent({
@@ -8018,9 +8031,10 @@ var stdin_default$1j = vue.defineComponent({
       var _a;
       return vue.createVNode("div", vue.mergeProps({
         "class": [bem$19({
-          inset: props2.inset
+          inset: props2.inset,
+          "gray-card": props2.grayCard
         }), {
-          [BORDER_TOP_BOTTOM]: props2.border && !props2.inset
+          [BORDER_TOP_BOTTOM]: props2.border && !props2.inset && !props2.grayCard
         }]
       }, attrs), [(_a = slots.default) == null ? void 0 : _a.call(slots)]);
     };
@@ -15576,6 +15590,15 @@ var stdin_default$s = vue.defineComponent({
     const expandedSelected = vue.ref(false);
     const searching = vue.ref(false);
     const keyword = vue.ref("");
+    const currentSpecialtyItems = (specialty) => specialtyType.value === 0 ? specialty.deviceItems : specialty.systemItems;
+    const expandOnlySpecialty = () => {
+      if (props2.specialties.length === 1) {
+        const [specialty] = props2.specialties;
+        expandedSpecialties.value = extend({}, expandedSpecialties.value, {
+          [specialty.id]: true
+        });
+      }
+    };
     const reset = () => {
       view.value = 0;
       specialtyType.value = 0;
@@ -15585,6 +15608,7 @@ var stdin_default$s = vue.defineComponent({
       expandedSpecialties.value = {
         "strong-electricity": true
       };
+      expandOnlySpecialty();
     };
     vue.watch(() => props2.show, (show) => show && reset(), {
       immediate: true
@@ -15652,7 +15676,7 @@ var stdin_default$s = vue.defineComponent({
     const renderSpecialty = (specialty) => {
       var _a;
       const expanded = (_a = expandedSpecialties.value[specialty.id]) != null ? _a : false;
-      const items = specialtyType.value === 0 ? specialty.deviceItems : specialty.systemItems;
+      const items = currentSpecialtyItems(specialty);
       return vue.createVNode("section", {
         "class": bem$n("specialty"),
         "key": specialty.id
@@ -15740,6 +15764,7 @@ var stdin_default$s = vue.defineComponent({
         "selected": specialtyType.value === 0,
         "onClick": () => {
           specialtyType.value = 0;
+          expandOnlySpecialty();
         }
       }, {
         default: () => [vue.createTextVNode("设备")]
@@ -15747,6 +15772,7 @@ var stdin_default$s = vue.defineComponent({
         "selected": specialtyType.value === 1,
         "onClick": () => {
           specialtyType.value = 1;
+          expandOnlySpecialty();
         }
       }, {
         default: () => [vue.createTextVNode("系统")]
@@ -18027,7 +18053,8 @@ const titleBarProps = {
   showAction: Boolean,
   size: makeStringProp("default"),
   expandable: Boolean,
-  modelValue: truthProp
+  modelValue: truthProp,
+  required: Boolean
 };
 var stdin_default$9 = vue.defineComponent({
   name: name$4,
@@ -18064,7 +18091,8 @@ var stdin_default$9 = vue.defineComponent({
       return vue.createVNode("section", {
         "class": bem$4({
           mini: props2.size === "mini",
-          expandable: props2.expandable
+          expandable: props2.expandable,
+          required: props2.required
         })
       }, [vue.createVNode("div", {
         "class": bem$4("header"),
@@ -18086,7 +18114,7 @@ var stdin_default$9 = vue.defineComponent({
         "class": bem$4("action-divider")
       }, null), vue.createVNode(Button, {
         "type": "text",
-        "size": "small",
+        "size": "normal",
         "text": props2.actionText,
         "onClick": onActionClick
       }, null)])]), props2.size !== "mini" && props2.showDescription && props2.description && vue.createVNode("span", {
@@ -18143,6 +18171,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) {
@@ -18159,6 +18188,77 @@ 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);
+  });
+}
 var stdin_default$8 = vue.defineComponent({
   props: {
     name: numericProp,
@@ -18170,7 +18270,7 @@ var stdin_default$8 = vue.defineComponent({
     previewSize: [Number, String, Array],
     beforeDelete: Function
   },
-  emits: ["delete", "preview"],
+  emits: ["delete", "preview", "click"],
   setup(props2, {
     emit,
     slots
@@ -18211,7 +18311,11 @@ var stdin_default$8 = vue.defineComponent({
         done: () => emit("delete")
       });
     };
-    const onPreview = () => emit("preview");
+    const onPreview = () => {
+      emit("preview");
+      emit("click");
+    };
+    const onFilePreview = () => emit("click");
     const renderDeleteIcon = () => {
       if (props2.deletable && props2.item.status !== "uploading") {
         const slot = slots["preview-delete"];
@@ -18249,10 +18353,12 @@ var stdin_default$8 = vue.defineComponent({
         imageFit,
         previewSize
       } = props2;
-      if (isImageFile(item)) {
+      const isImage2 = isImageFile(item);
+      const isVideo = isVideoFile(item);
+      if (isImage2 || isVideo && item.videoThumbnail) {
         return vue.createVNode(Image$1, {
           "fit": imageFit,
-          "src": item.content || item.url,
+          "src": isVideo ? item.videoThumbnail : item.content || item.url,
           "class": bem$3("preview-image"),
           "width": Array.isArray(previewSize) ? previewSize[0] : previewSize,
           "height": Array.isArray(previewSize) ? previewSize[1] : previewSize,
@@ -18264,7 +18370,8 @@ var stdin_default$8 = vue.defineComponent({
       }
       return vue.createVNode("div", {
         "class": bem$3("file"),
-        "style": getSizeStyle(props2.previewSize)
+        "style": getSizeStyle(props2.previewSize),
+        "onClick": onFilePreview
       }, [vue.createVNode(Icon, {
         "class": bem$3("file-icon"),
         "name": "description"
@@ -18277,11 +18384,33 @@ var stdin_default$8 = vue.defineComponent({
     }, [renderPreview(), renderMask(), renderDeleteIcon()]);
   }
 });
+var __async$1 = (__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());
+  });
+};
 const uploaderProps = {
   name: makeNumericProp(""),
   accept: makeStringProp("image/*"),
   capture: String,
   multiple: Boolean,
+  label: String,
+  required: Boolean,
   disabled: Boolean,
   readonly: Boolean,
   lazyLoad: Boolean,
@@ -18351,37 +18480,29 @@ var stdin_default$7 = vue.defineComponent({
         modelValue,
         resultType
       } = props2;
+      const createFileItem = (file) => __async$1(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) => {
@@ -18414,7 +18535,7 @@ var stdin_default$7 = vue.defineComponent({
     let imagePreview;
     const onClosePreview = () => emit("close-preview");
     const previewImage = (item) => {
-      if (props2.previewFullImage) {
+      if (props2.previewFullImage && isImageFile(item)) {
         const imageFiles = props2.modelValue.filter(isImageFile);
         const images = imageFiles.map((item2) => {
           if (item2.file && !item2.url && item2.status !== "failed") {
@@ -18457,6 +18578,15 @@ var stdin_default$7 = vue.defineComponent({
         return props2.modelValue.map(renderPreviewItem);
       }
     };
+    const renderLabel = () => {
+      if (!props2.label)
+        return;
+      return vue.createVNode("div", {
+        "class": bem$3("label")
+      }, [props2.required && vue.createVNode("span", {
+        "class": bem$3("required")
+      }, [vue.createTextVNode("*")]), props2.label]);
+    };
     const onClickUpload = (event) => emit("click-upload", event);
     const renderUpload = () => {
       if (props2.modelValue.length >= props2.maxCount || !props2.showUpload) {
@@ -18505,8 +18635,10 @@ var stdin_default$7 = vue.defineComponent({
     });
     use.useCustomFieldValue(() => props2.modelValue);
     return () => vue.createVNode("div", {
-      "class": bem$3()
-    }, [vue.createVNode("div", {
+      "class": bem$3({
+        required: props2.required && !props2.label
+      })
+    }, [renderLabel(), vue.createVNode("div", {
       "class": bem$3("wrapper", {
         disabled: props2.disabled
       })
@@ -20350,7 +20482,7 @@ const Lazyload = {
     });
   }
 };
-const version = "0.0.36";
+const version = "0.0.37";
 function install(app) {
   const components = [
     ActionBar,