hy-dispatch-ui-v3 0.1.6 → 0.2.0

package/es/components/appCutter/appCutter.vue.mjs

@@ -1,10 +1,9 @@
-import { defineComponent, useModel, useTemplateRef, ref, computed, resolveComponent, openBlock, createElementBlock, withDirectives, createVNode, unref, withCtx, createElementVNode, renderSlot, normalizeStyle, createBlock, Fragment, createCommentVNode, toDisplayString, withModifiers, vShow, mergeProps, mergeModels } from 'vue';
+import { defineComponent, useModel, useTemplateRef, ref, computed, openBlock, createElementBlock, withDirectives, createVNode, unref, withCtx, createElementVNode, renderSlot, normalizeStyle, createBlock, Fragment, createCommentVNode, toDisplayString, withModifiers, vShow, mergeProps, mergeModels } from 'vue';
 import { VueCropper } from 'vue-cropper';
 import { ElUpload, ElImage, ElIcon, ElMessage } from 'element-plus';
-import { Delete } from '@element-plus/icons-vue';
+import { User, Delete } from '@element-plus/icons-vue';
+import { blobToDataURL, sizeToTextHandler, fileUpload } from '../../utils/file.mjs';
 import { AppDialog } from '../appDialog/index.mjs';
-import { isFile } from '../../utils/is.mjs';
-import { sizeToTextHandler, blobToDataURL, fileUpload } from '../../utils/file.mjs';
 import { useLocale } from '../../hooks/useLocale.mjs';
 
 import "vue-cropper/dist/index.css";
@@ -16,9 +15,10 @@ const __default__ = defineComponent({
 });
 const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
   props: /* @__PURE__ */ mergeModels({
-    dialogWidth: { type: [String, Number], default: 1e3 },
     defaultImg: { type: String },
+    // 默认展示图片
     uploadText: {
+      // 上传文本
       type: String,
       default: () => {
         const { t } = useLocale();
@@ -26,24 +26,49 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
       }
     },
     showUpload: { type: Boolean, default: true },
+    // 是否显示上传模块
     showText: { type: Boolean, default: true },
+    // 是否显示上传提示文本
     showDelete: { type: Boolean, default: true },
+    // 是否显示删除按钮
     maxSize: { type: Number, default: 1024 * 1024 * 2 },
+    // 限制上传文件大小
     accept: { type: String, default: "image/png,image/jpg,image/jpeg,image/gif" },
+    // 限制上传文件类型
     info: { type: Boolean, default: true },
+    // 裁剪框的大小信息
     outputSize: { type: Number, default: 1 },
+    // 裁剪生成图片的质量
     outputType: { type: String, default: "jpeg" },
+    // 裁剪生成图片的格式
     autoCrop: { type: Boolean, default: true },
+    // 是否默认生成截图框
     autoCropWidth: { type: Number, default: 100 },
+    // 默认生成截图框宽度
     autoCropHeight: { type: Number, default: 100 },
+    // 默认生成截图框高度
     fixedBox: { type: Boolean, default: false },
+    // 固定截图框大小 不允许改变
     fixed: { type: Boolean, default: true },
+    // 是否开启截图框宽高固定比例
     fixedNumber: { type: Array },
+    // 截图框的宽高比例
     full: { type: Boolean, default: true },
+    // 是否输出原图比例的截图
     canMoveBox: { type: Boolean, default: false },
+    // 截图框能否拖动
     original: { type: Boolean, default: false },
+    // 上传图片按照原始比例渲染
     centerBox: { type: Boolean, default: true },
-    infoTrue: { type: Boolean, default: false }
+    // 截图框是否被限制在图片里面
+    infoTrue: { type: Boolean, default: false },
+    // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
+    readonly: { type: Boolean, default: false },
+    // 是否只读
+    directTransmission: { type: Boolean, default: true },
+    // 是否使用直传接口
+    onClose: Function,
+    onCancel: Function
   }, {
     "modelValue": { type: String },
     "modelModifiers": {}
@@ -92,30 +117,24 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
       // 上传图片按照原始比例渲染
       centerBox: props.centerBox,
       // 截图框是否被限制在图片里面
-      infoTrue: props.infoTrue
+      infoTrue: props.infoTrue,
       // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
+      ...customOptions.value
     }));
-    function openFilePicker(param, name = "img.png") {
-      if (typeof param === "string") {
-        openCutter(param, name);
-        return;
-      }
-      if (isFile(param)) {
-        beforeAvatarUpload(file);
-        return;
-      }
-      uploadRef.value.click();
-    }
-    async function beforeAvatarUpload(file2) {
-      const limit = file2.size < props.maxSize;
+    const customOptions = ref({});
+    let customSubmit = null;
+    let customCancel = null;
+    let customClose = null;
+    async function beforeAvatarUpload(file) {
+      const limit = file.size < props.maxSize;
       if (!limit) {
         ElMessage.error(
           t("cutter.uploadPictureLimit", [sizeToTextHandler(props.maxSize)])
         );
         return false;
       }
-      const result = await blobToDataURL(file2);
-      openCutter(result, file2.name);
+      const result = await blobToDataURL(file);
+      openCutter(result, file.name);
       return false;
     }
     function openCutter(src, name) {
@@ -134,16 +153,22 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
     async function onSubmitHandler() {
       return new Promise((resolve, reject) => {
         cropperRef.value.getCropBlob(async (data) => {
-          var _a, _b;
           data.name = fileInfo.value.name;
-          const res = await fileUpload(data).catch((res2) => {
-            ElMessage.error(res2.msg || res2);
-            reject();
-          });
+          const res = await fileUpload(data, props.directTransmission).catch(
+            (res2) => {
+              ElMessage.error(res2.msg || res2);
+              reject();
+            }
+          );
           if (res.code === 200) {
-            imgSrc.value = await blobToDataURL(data);
-            modelValue.value = ((_a = res.data) == null ? void 0 : _a.key) || ((_b = res.data) == null ? void 0 : _b.url) || res.data;
-            emits("confirm", res);
+            const url = await blobToDataURL(data);
+            const key = res.data?.key || res.data?.url || res.data;
+            imgSrc.value = url;
+            modelValue.value = key;
+            if (customSubmit) {
+              await customSubmit({ url, key });
+            }
+            emits("confirm", { url, key });
             resolve();
           } else {
             ElMessage.error(res.msg || res);
@@ -152,119 +177,167 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
         });
       });
     }
+    async function onCancelHandler() {
+      if (customCancel) {
+        return await customCancel();
+      }
+      if (props.onCancel) {
+        return await props.onCancel();
+      }
+    }
+    async function onCloseHandler() {
+      if (customCancel) {
+        return await customClose();
+      }
+      if (props.onClose) {
+        return await props.onClose();
+      }
+    }
     __expose({
-      open: openFilePicker,
+      open: async (params) => {
+        const {
+          url,
+          fileName = "img.png",
+          options: options2,
+          file,
+          onSubmit,
+          onCancel,
+          onClose
+        } = params || {};
+        if (file) {
+          const result = await blobToDataURL(file);
+          openCutter(result, file.name);
+        } else if (url) {
+          openCutter(url, fileName);
+        } else {
+          uploadRef.value.click();
+        }
+        customOptions.value = options2 || {};
+        customClose = async () => {
+          if (onClose) {
+            await onClose();
+          }
+          customOptions.value = {};
+        };
+        customCancel = async () => {
+          if (onCancel) {
+            await onCancel();
+          }
+          customOptions.value = {};
+        };
+        customSubmit = async (value) => {
+          await onSubmit(value);
+          customOptions.value = {};
+        };
+      },
       clear: onClearHandler
     });
     return (_ctx, _cache) => {
-      const _component_User = resolveComponent("User");
       return openBlock(), createElementBlock("div", { class: "inline-block" }, [
-        withDirectives(createVNode(
-          unref(ElUpload),
-          {
-            accept: ".png,.jpg,.gif,.jpeg",
-            "before-upload": beforeAvatarUpload,
-            action: "",
-            class: "upload_box",
-            "show-file-list": false
-          },
-          {
-            default: withCtx(() => [
-              createElementVNode(
-                "div",
-                {
-                  ref_key: "uploadRef",
-                  ref: uploadRef,
-                  class: "app-cutter-upload-box"
-                },
-                [
-                  renderSlot(_ctx.$slots, "default", { src: imgSrc.value }, () => [
-                    createElementVNode(
-                      "div",
-                      {
-                        class: "app-cutter-upload-card",
+        withDirectives(createVNode(unref(ElUpload), {
+          accept: ".png,.jpg,.gif,.jpeg",
+          "before-upload": beforeAvatarUpload,
+          action: "",
+          class: "upload_box",
+          "show-file-list": false,
+          disabled: __props.readonly
+        }, {
+          default: withCtx(() => [
+            createElementVNode(
+              "div",
+              {
+                ref_key: "uploadRef",
+                ref: uploadRef,
+                class: "app-cutter-upload-box"
+              },
+              [
+                renderSlot(_ctx.$slots, "default", { src: imgSrc.value }, () => [
+                  createElementVNode(
+                    "div",
+                    {
+                      class: "app-cutter-upload-card",
+                      style: normalizeStyle({
+                        width: `${__props.autoCropWidth}px`,
+                        height: `${__props.autoCropHeight}px`
+                      })
+                    },
+                    [
+                      modelValue.value && imageSrc.value ? (openBlock(), createBlock(unref(ElImage), {
+                        key: 0,
+                        src: imageSrc.value,
                         style: normalizeStyle({
                           width: `${__props.autoCropWidth}px`,
                           height: `${__props.autoCropHeight}px`
                         })
-                      },
-                      [
-                        modelValue.value && imageSrc.value ? (openBlock(), createBlock(unref(ElImage), {
-                          key: 0,
-                          src: imageSrc.value,
-                          style: normalizeStyle({
-                            width: `${__props.autoCropWidth}px`,
-                            height: `${__props.autoCropHeight}px`
+                      }, null, 8, ["src", "style"])) : (openBlock(), createElementBlock(
+                        Fragment,
+                        { key: 1 },
+                        [
+                          createCommentVNode(' <AppIcon\n              v-else\n              svg-name="emptyHead"\n              style="width: 70px; height: 70px"\n            /> '),
+                          createVNode(unref(ElIcon), {
+                            color: "rgb(var(--hy-auxiliary))",
+                            size: "64"
+                          }, {
+                            default: withCtx(() => [
+                              createVNode(unref(User))
+                            ]),
+                            _: 1
+                            /* STABLE */
                           })
-                        }, null, 8, ["src", "style"])) : (openBlock(), createElementBlock(
-                          Fragment,
-                          { key: 1 },
-                          [
-                            createCommentVNode(' <AppIcon\n              v-else\n              svg-name="emptyHead"\n              style="width: 70px; height: 70px"\n            /> '),
-                            createVNode(unref(ElIcon), {
-                              color: "rgb(var(--hy-auxiliary))",
-                              size: "64"
-                            }, {
-                              default: withCtx(() => [
-                                createVNode(_component_User)
-                              ]),
-                              _: 1
-                              /* STABLE */
-                            })
-                          ],
-                          2112
-                          /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
-                        ))
-                      ],
-                      4
-                      /* STYLE */
-                    )
-                  ]),
-                  __props.uploadText && __props.showText ? (openBlock(), createElementBlock(
-                    "div",
-                    {
-                      key: 0,
-                      class: "app-cutter-tip"
-                    },
-                    toDisplayString(__props.uploadText),
-                    1
-                    /* TEXT */
-                  )) : createCommentVNode("v-if", true),
-                  __props.showDelete ? withDirectives((openBlock(), createElementBlock("div", {
-                    key: 1,
-                    class: "app-cutter-delete",
-                    onClick: withModifiers(($event) => onClearHandler(), ["stop"])
-                  }, [
-                    createCommentVNode(' <AppIcon svg-name="delete" /> '),
-                    createVNode(unref(ElIcon), { color: "rgb(var(--hy-danger-2))" }, {
-                      default: withCtx(() => [
-                        createVNode(unref(Delete))
-                      ]),
-                      _: 1
-                      /* STABLE */
-                    })
-                  ], 8, ["onClick"])), [
-                    [vShow, modelValue.value]
-                  ]) : createCommentVNode("v-if", true)
-                ],
-                512
-                /* NEED_PATCH */
-              )
-            ]),
-            _: 3
-            /* FORWARDED */
-          },
-          512
-          /* NEED_PATCH */
-        ), [
+                        ],
+                        2112
+                        /* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
+                      ))
+                    ],
+                    4
+                    /* STYLE */
+                  )
+                ]),
+                __props.uploadText && __props.showText ? (openBlock(), createElementBlock(
+                  "div",
+                  {
+                    key: 0,
+                    class: "app-cutter-tip"
+                  },
+                  toDisplayString(__props.uploadText),
+                  1
+                  /* TEXT */
+                )) : createCommentVNode("v-if", true),
+                __props.showDelete ? withDirectives((openBlock(), createElementBlock("div", {
+                  key: 1,
+                  class: "app-cutter-delete",
+                  onClick: withModifiers(($event) => onClearHandler(), ["stop"])
+                }, [
+                  createCommentVNode(' <AppIcon svg-name="delete" /> '),
+                  createVNode(unref(ElIcon), { color: "rgb(var(--hy-danger-2))" }, {
+                    default: withCtx(() => [
+                      createVNode(unref(Delete))
+                    ]),
+                    _: 1
+                    /* STABLE */
+                  })
+                ], 8, ["onClick"])), [
+                  [vShow, modelValue.value]
+                ]) : createCommentVNode("v-if", true)
+              ],
+              512
+              /* NEED_PATCH */
+            )
+          ]),
+          _: 3
+          /* FORWARDED */
+        }, 8, ["disabled"]), [
           [vShow, __props.showUpload]
         ]),
-        createVNode(unref(AppDialog), {
+        createVNode(unref(AppDialog), mergeProps({
           modelValue: visible.value,
           "onUpdate:modelValue": ($event) => visible.value = $event,
-          title: unref(t)("cutter.imageSegmentation"),
+          title: unref(t)("cutter.imageSegmentation")
+        }, _ctx.$attrs, {
+          onClose: onCloseHandler,
+          onCancel: onCancelHandler,
           onSubmit: onSubmitHandler
-        }, {
+        }), {
           default: withCtx(() => [
             createElementVNode("div", { class: "h-[500px]" }, [
               createVNode(unref(VueCropper), mergeProps({
@@ -276,7 +349,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
           ]),
           _: 1
           /* STABLE */
-        }, 8, ["modelValue", "onUpdate:modelValue", "title"])
+        }, 16, ["modelValue", "onUpdate:modelValue", "title"])
       ]);
     };
   }

package/es/components/appDatePicker/appDatePicker.vue.mjs

@@ -61,7 +61,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
         startValue.value = value[0] ? `${value[0]}${isFill ? " 00:00:00" : ""}` : null;
         endValue.value = value[1] ? `${value[1]}${isFill ? " 23:59:59" : ""}` : null;
       } else {
-        dateValue.value = isFill && (value == null ? void 0 : value.length) ? [`${value[0]} 00:00:00`, `${value[1]} 23:59:59`] : value;
+        dateValue.value = isFill && value?.length ? [`${value[0]} 00:00:00`, `${value[1]} 23:59:59`] : value;
       }
       emits("change", dateValue.value);
     }