@vunk/form 1.1.84 → 1.2.0

package/components/upload/index.cjs

@@ -0,0 +1,508 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var formItem = require('@vunk/form/components/form-item');
+var utilsVue = require('@vunk/core/shared/utils-vue');
+var elementPlus = require('element-plus');
+var vue = require('vue');
+var utilsObject = require('@vunk/core/shared/utils-object');
+var elementPlus$1 = require('@vunk/form/shared/element-plus');
+var index = require('../index2.cjs');
+var utilsFunction = require('@vunk/core/shared/utils-function');
+var utilsFetch = require('@vunk/core/shared/utils-fetch');
+var _pluginVue_exportHelper = require('../_plugin-vue_export-helper.cjs');
+var composables = require('@vunk/form/composables');
+var progress = require('@vunk/form/shared/progress-it');
+
+const props = {
+  ...formItem._VkfFormItemCtx.props,
+  ...elementPlus.uploadProps,
+  tip: {
+    type: String,
+    default: ""
+  },
+  preview: {
+    type: Boolean,
+    default: false
+  },
+  beforeUpload: {
+    type: Function,
+    default: void 0
+  },
+  onDownload: {
+    type: Function,
+    default: void 0
+  }
+};
+const createBindProps = utilsVue.bindPropsFactory(props);
+const emits = {
+  "update:fileList": null,
+  "remove": (e) => e
+};
+const createOnEmits = utilsVue.onEmitsFactory(emits);
+
+var ctx = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  createBindProps: createBindProps,
+  createOnEmits: createOnEmits,
+  emits: emits,
+  props: props
+});
+
+const restFetch = new utilsFetch.RestFetch({
+  baseURL: ""
+});
+var _sfc_main$1 = vue.defineComponent({
+  components: {
+    ElProgress: elementPlus.ElProgress,
+    ElIcon: elementPlus.ElIcon,
+    Check: index.check_default,
+    ZoomIn: index.zoom_in_default,
+    Delete: index.delete_default,
+    Close: index.close_default,
+    CircleCheck: index.circle_check_default,
+    Document: index.document_default,
+    Download: index.download_default
+  },
+  props: {
+    listType: {
+      type: String,
+      default: "text"
+    },
+    file: {
+      type: Object,
+      default: () => ({})
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    onPreview: {
+      type: Function,
+      default: () => utilsFunction.NOOP
+    },
+    onDownload: {
+      type: Function,
+      default: void 0
+    },
+    preview: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: {
+    "remove": (e) => e
+  },
+  setup(props, { emit }) {
+    const nsUpload = elementPlus.useNamespace("upload");
+    const nsIcon = elementPlus.useNamespace("icon");
+    const { t } = elementPlus.useLocale();
+    const handleRemove = (file = props.file) => {
+      emit("remove", file);
+    };
+    const handleDownload = (file = props.file) => {
+      if (props.onDownload) {
+        props.onDownload(file);
+        return;
+      }
+      let url = "";
+      if (file.url) {
+        url = file.url;
+      } else if (file.raw) {
+        url = window.URL.createObjectURL(file.raw);
+      }
+      url && restFetch.download({
+        url,
+        fileName: file.name
+      }, {
+        method: "GET"
+      });
+    };
+    return {
+      handleRemove,
+      t,
+      nsIcon,
+      nsUpload,
+      handleDownload
+    };
+  }
+});
+
+const _hoisted_1$1 = ["src"];
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Document = vue.resolveComponent("Document");
+  const _component_el_icon = vue.resolveComponent("el-icon");
+  const _component_Download = vue.resolveComponent("Download");
+  const _component_el_progress = vue.resolveComponent("el-progress");
+  const _component_circle_check = vue.resolveComponent("circle-check");
+  const _component_Check = vue.resolveComponent("Check");
+  const _component_Close = vue.resolveComponent("Close");
+  const _component_zoom_in = vue.resolveComponent("zoom-in");
+  const _component_Delete = vue.resolveComponent("Delete");
+  return vue.openBlock(), vue.createElementBlock(
+    vue.Fragment,
+    null,
+    [
+      vue.createCommentVNode(" picture "),
+      _ctx.listType === "picture" || _ctx.file.status !== "uploading" && _ctx.listType === "picture-card" ? (vue.openBlock(), vue.createElementBlock(
+        vue.Fragment,
+        { key: 0 },
+        [
+          /\.(svg|png|jpg|jpeg)$/.test(_ctx.file.name) ? (vue.openBlock(), vue.createElementBlock("img", {
+            key: 0,
+            class: vue.normalizeClass(_ctx.nsUpload.be("list", "item-thumbnail")),
+            src: _ctx.file.url,
+            alt: ""
+          }, null, 10, _hoisted_1$1)) : (vue.openBlock(), vue.createBlock(_component_Document, { key: 1 }))
+        ],
+        64
+        /* STABLE_FRAGMENT */
+      )) : vue.createCommentVNode("v-if", true),
+      vue.createCommentVNode(" text "),
+      _ctx.listType !== "picture" && (_ctx.file.status === "uploading" || _ctx.listType !== "picture-card") ? (vue.openBlock(), vue.createElementBlock(
+        "div",
+        {
+          key: 1,
+          class: vue.normalizeClass(_ctx.nsUpload.be("list", "item-info"))
+        },
+        [
+          vue.createElementVNode(
+            "a",
+            {
+              class: vue.normalizeClass(_ctx.nsUpload.be("list", "item-name")),
+              onClick: _cache[1] || (_cache[1] = vue.withModifiers(($event) => _ctx.onPreview(_ctx.file), ["prevent"]))
+            },
+            [
+              vue.createVNode(_component_el_icon, {
+                class: vue.normalizeClass(_ctx.nsIcon.m("document"))
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_Document)
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["class"]),
+              vue.createVNode(_component_el_icon, {
+                class: vue.normalizeClass([
+                  _ctx.nsIcon.m("download"),
+                  _ctx.nsIcon.m("download-primary")
+                ]),
+                onClick: _cache[0] || (_cache[0] = ($event) => _ctx.handleDownload(_ctx.file))
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_Download)
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["class"]),
+              vue.createElementVNode(
+                "span",
+                {
+                  class: vue.normalizeClass(_ctx.nsUpload.be("list", "item-file-name"))
+                },
+                vue.toDisplayString(_ctx.file.name),
+                3
+                /* TEXT, CLASS */
+              )
+            ],
+            2
+            /* CLASS */
+          ),
+          _ctx.file.status === "uploading" ? (vue.openBlock(), vue.createBlock(_component_el_progress, {
+            key: 0,
+            type: _ctx.listType === "picture-card" ? "circle" : "line",
+            "stroke-width": _ctx.listType === "picture-card" ? 6 : 2,
+            percentage: Number(_ctx.file.percentage),
+            style: vue.normalizeStyle(_ctx.listType === "picture-card" ? "" : "margin-top: 0.5rem")
+          }, null, 8, ["type", "stroke-width", "percentage", "style"])) : vue.createCommentVNode("v-if", true)
+        ],
+        2
+        /* CLASS */
+      )) : vue.createCommentVNode("v-if", true),
+      vue.createElementVNode(
+        "label",
+        {
+          class: vue.normalizeClass(_ctx.nsUpload.be("list", "item-status-label"))
+        },
+        [
+          _ctx.listType === "text" ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+            key: 0,
+            class: vue.normalizeClass([
+              _ctx.nsIcon.m("upload-success"),
+              _ctx.nsIcon.m("circle-check")
+            ])
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_circle_check)
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["class"])) : ["picture-card", "picture"].includes(_ctx.listType) ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+            key: 1,
+            class: vue.normalizeClass([_ctx.nsIcon.m("upload-success"), _ctx.nsIcon.m("check")])
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_Check)
+            ]),
+            _: 1
+            /* STABLE */
+          }, 8, ["class"])) : vue.createCommentVNode("v-if", true)
+        ],
+        2
+        /* CLASS */
+      ),
+      !_ctx.disabled ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+        key: 2,
+        class: vue.normalizeClass(_ctx.nsIcon.m("close")),
+        onClick: _cache[2] || (_cache[2] = ($event) => _ctx.handleRemove(_ctx.file))
+      }, {
+        default: vue.withCtx(() => [
+          vue.createVNode(_component_Close)
+        ]),
+        _: 1
+        /* STABLE */
+      }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
+      vue.createCommentVNode(" Due to close btn only appears when li gets focused disappears after li gets blurred, thus keyboard navigation can never reach close btn"),
+      vue.createCommentVNode(" This is a bug which needs to be fixed "),
+      vue.createCommentVNode(" TODO: Fix the incorrect navigation interaction "),
+      vue.createCommentVNode(` <i v-if="!disabled" :class="nsIcon.m('close-tip')">{{
+      t('el.upload.deleteTip')
+  }}</i> `),
+      vue.createCommentVNode(" picture-card "),
+      _ctx.listType === "picture-card" ? (vue.openBlock(), vue.createElementBlock(
+        "span",
+        {
+          key: 3,
+          class: vue.normalizeClass(_ctx.nsUpload.be("list", "item-actions"))
+        },
+        [
+          _ctx.preview ? (vue.openBlock(), vue.createElementBlock(
+            "span",
+            {
+              key: 0,
+              class: vue.normalizeClass(_ctx.nsUpload.be("list", "item-preview")),
+              onClick: _cache[3] || (_cache[3] = ($event) => _ctx.onPreview(_ctx.file))
+            },
+            [
+              vue.createVNode(_component_el_icon, {
+                class: vue.normalizeClass(_ctx.nsIcon.m("zoom-in"))
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_zoom_in)
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["class"])
+            ],
+            2
+            /* CLASS */
+          )) : vue.createCommentVNode("v-if", true),
+          vue.createCommentVNode(" \u4E0B\u8F7D "),
+          vue.createElementVNode(
+            "span",
+            {
+              class: vue.normalizeClass(_ctx.nsUpload.be("list", "item-download")),
+              onClick: _cache[4] || (_cache[4] = ($event) => _ctx.handleDownload(_ctx.file))
+            },
+            [
+              vue.createVNode(_component_el_icon, {
+                class: vue.normalizeClass(_ctx.nsIcon.m("download"))
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_Download)
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["class"])
+            ],
+            2
+            /* CLASS */
+          ),
+          !_ctx.disabled ? (vue.openBlock(), vue.createElementBlock(
+            "span",
+            {
+              key: 1,
+              class: vue.normalizeClass(_ctx.nsUpload.be("list", "item-delete")),
+              onClick: _cache[5] || (_cache[5] = ($event) => _ctx.handleRemove(_ctx.file))
+            },
+            [
+              vue.createVNode(_component_el_icon, {
+                class: vue.normalizeClass(_ctx.nsIcon.m("delete"))
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_Delete)
+                ]),
+                _: 1
+                /* STABLE */
+              }, 8, ["class"])
+            ],
+            2
+            /* CLASS */
+          )) : vue.createCommentVNode("v-if", true)
+        ],
+        2
+        /* CLASS */
+      )) : vue.createCommentVNode("v-if", true)
+    ],
+    64
+    /* STABLE_FRAGMENT */
+  );
+}
+var FileVue = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "/home/runner/work/private-vunk-form/private-vunk-form/packages/components/upload/src/file.vue"]]);
+
+var _sfc_main = vue.defineComponent({
+  name: "VkfUpload",
+  components: {
+    VkfFormItem: formItem.VkfFormItem,
+    ElUpload: elementPlus.ElUpload,
+    FileVue,
+    ElLink: elementPlus.ElLink
+  },
+  props,
+  emits,
+  setup(props2, { emit }) {
+    const formItemBindProps = formItem._VkfFormItemCtx.createBindProps(props2);
+    const coreBindProps = elementPlus$1.createUploadBindProps(props2, ["disabled", "fileList", "beforeUpload", "onSuccess"]);
+    const uploadRef = vue.shallowRef();
+    const handleRemove = (file) => {
+      uploadRef.value?.handleRemove(file);
+      uploadRef.value?.abort(file);
+      emit("update:fileList", props2.fileList);
+    };
+    const readonly = composables.useComputedReadonly(props2);
+    const onSuccess = (response, uploadFile, uploadFiles) => {
+      const raw = uploadFile.raw;
+      raw.progress(true);
+      uploadFile.percentage = 100;
+      uploadFile.status = "success";
+      props2.onSuccess?.(response, uploadFile, uploadFiles);
+    };
+    const beforeUpload = async (rawFile) => {
+      const effect = (e, s) => {
+        const file = props2.fileList.find((item) => item.uid === rawFile.uid);
+        if (file) {
+          file.percentage = Number((e * 100).toFixed(2));
+          if (s === false) {
+            file.status = "uploading";
+          }
+        }
+      };
+      rawFile.progress = progress(effect)(false);
+      if (props2.beforeUpload) {
+        const res = await props2.beforeUpload?.(rawFile);
+        return res;
+      }
+      return true;
+    };
+    return {
+      formItemBindProps,
+      pickObject: utilsObject.pickObject,
+      coreBindProps,
+      uploadRef,
+      handleRemove,
+      readonly,
+      onSuccess,
+      // onProgress,
+      beforeUpload
+    };
+  }
+});
+
+const _hoisted_1 = { class: "el-upload__tip" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElLink = vue.resolveComponent("ElLink");
+  const _component_FileVue = vue.resolveComponent("FileVue");
+  const _component_ElUpload = vue.resolveComponent("ElUpload");
+  const _component_VkfFormItem = vue.resolveComponent("VkfFormItem");
+  return vue.openBlock(), vue.createBlock(
+    _component_VkfFormItem,
+    vue.normalizeProps(vue.guardReactiveProps(_ctx.formItemBindProps)),
+    {
+      default: vue.withCtx(() => [
+        vue.createVNode(_component_ElUpload, vue.mergeProps(_ctx.coreBindProps, {
+          ref: "uploadRef",
+          class: ["vkf-upload", {
+            "is-readonly": _ctx.readonly,
+            "is-empty": _ctx.fileList?.length === 0,
+            "is-limit": _ctx.limit && _ctx.fileList?.length >= _ctx.limit
+          }],
+          "file-list": _ctx.fileList ?? [],
+          "on-success": _ctx.onSuccess,
+          "before-upload": _ctx.beforeUpload,
+          disabled: _ctx.readonly || _ctx.disabled,
+          "onUpdate:fileList": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:fileList", $event))
+        }), vue.createSlots({
+          file: vue.withCtx(({ file }) => [
+            vue.createVNode(_component_FileVue, {
+              file,
+              "list-type": _ctx.listType,
+              disabled: _ctx.readonly || _ctx.disabled,
+              "on-preview": _ctx.onPreview,
+              preview: _ctx.preview,
+              "on-download": _ctx.onDownload,
+              onRemove: _ctx.handleRemove
+            }, null, 8, ["file", "list-type", "disabled", "on-preview", "preview", "on-download", "onRemove"])
+          ]),
+          default: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "default", {}, () => [
+              vue.createVNode(_component_ElLink, { type: "primary" }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(" + \u9009\u62E9\u6587\u4EF6 ")
+                ]),
+                _: 1
+                /* STABLE */
+              })
+            ])
+          ]),
+          _: 2
+          /* DYNAMIC */
+        }, [
+          _ctx.tip ? {
+            name: "tip",
+            fn: vue.withCtx(() => [
+              vue.createElementVNode(
+                "div",
+                _hoisted_1,
+                vue.toDisplayString(_ctx.tip),
+                1
+                /* TEXT */
+              )
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040, ["class", "file-list", "on-success", "before-upload", "disabled"]),
+        vue.createElementVNode(
+          "span",
+          {
+            class: vue.normalizeClass(["vkf-upload-empty-tip", {
+              "is-readonly": _ctx.readonly,
+              "is-empty": _ctx.fileList?.length === 0
+            }])
+          },
+          "\u6682\u65E0",
+          2
+          /* CLASS */
+        )
+      ]),
+      _: 3
+      /* FORWARDED */
+    },
+    16
+    /* FULL_PROPS */
+  );
+}
+var VkfUpload = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/private-vunk-form/private-vunk-form/packages/components/upload/src/index.vue"]]);
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+VkfUpload.install = (app) => {
+  app.component(VkfUpload.name, VkfUpload);
+};
+
+exports.VkfUpload = VkfUpload;
+exports._VkfUploadCtx = ctx;
+exports.__VkfUpload = types;
+exports.default = VkfUpload;