@vunk/form 0.0.1-alpha.3 → 0.0.1-alpha.30

package/components/upload/index.js

@@ -0,0 +1,496 @@
+import { _VkfFormItemCtx, VkfFormItem } from '@vunk/form/components/form-item';
+import { bindPropsFactory, onEmitsFactory } from '@vunk/core/shared/utils-vue';
+import { uploadProps, ElProgress, ElIcon, useNamespace, useLocale, ElUpload, ElLink } from 'element-plus';
+import { openBlock, createElementBlock, createElementVNode, defineComponent, resolveComponent, Fragment, createCommentVNode, normalizeClass, createBlock, withModifiers, createVNode, withCtx, toDisplayString, normalizeStyle, shallowRef, normalizeProps, guardReactiveProps, mergeProps, createSlots, renderSlot, createTextVNode } from 'vue';
+import { pickObject } from '@vunk/core/shared/utils-object';
+import { createUploadBindProps } from '@vunk/form/shared/element-plus';
+import { NOOP } from '@vunk/core/shared/utils-function';
+import { RestFetch } from '@vunk/core/shared/utils-fetch';
+import { useComputedReadonly } from '@vunk/form/composables';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const props = __spreadProps(__spreadValues(__spreadValues({}, _VkfFormItemCtx.props), uploadProps), {
+  tip: {
+    type: String,
+    default: ""
+  },
+  preview: {
+    type: String,
+    default: ""
+  }
+});
+const createBindProps = bindPropsFactory(props);
+const emits = {
+  "update:fileList": null,
+  "remove": (e) => e
+};
+const createOnEmits = onEmitsFactory(emits);
+
+var ctx = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  props: props,
+  createBindProps: createBindProps,
+  emits: emits,
+  createOnEmits: createOnEmits
+});
+
+/*! Element Plus Icons Vue v2.0.9 */
+
+// unplugin-vue:/plugin-vue/export-helper
+var export_helper_default = (sfc, props) => {
+  let target = sfc.__vccOpts || sfc;
+  for (let [key, val] of props)
+    target[key] = val;
+  return target;
+};
+var _sfc_main43 = {
+  name: "Check"
+}, _hoisted_143 = {
+  viewBox: "0 0 1024 1024",
+  xmlns: "http://www.w3.org/2000/svg"
+}, _hoisted_243 = /* @__PURE__ */ createElementVNode("path", {
+  fill: "currentColor",
+  d: "M406.656 706.944 195.84 496.256a32 32 0 1 0-45.248 45.248l256 256 512-512a32 32 0 0 0-45.248-45.248L406.592 706.944z"
+}, null, -1), _hoisted_342 = [
+  _hoisted_243
+];
+function _sfc_render43(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_143, _hoisted_342);
+}
+var check_default = /* @__PURE__ */ export_helper_default(_sfc_main43, [["render", _sfc_render43], ["__file", "check.vue"]]);
+var _sfc_main49 = {
+  name: "CircleCheck"
+}, _hoisted_149 = {
+  viewBox: "0 0 1024 1024",
+  xmlns: "http://www.w3.org/2000/svg"
+}, _hoisted_249 = /* @__PURE__ */ createElementVNode("path", {
+  fill: "currentColor",
+  d: "M512 896a384 384 0 1 0 0-768 384 384 0 0 0 0 768zm0 64a448 448 0 1 1 0-896 448 448 0 0 1 0 896z"
+}, null, -1), _hoisted_348 = /* @__PURE__ */ createElementVNode("path", {
+  fill: "currentColor",
+  d: "M745.344 361.344a32 32 0 0 1 45.312 45.312l-288 288a32 32 0 0 1-45.312 0l-160-160a32 32 0 1 1 45.312-45.312L480 626.752l265.344-265.408z"
+}, null, -1), _hoisted_415 = [
+  _hoisted_249,
+  _hoisted_348
+];
+function _sfc_render49(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_149, _hoisted_415);
+}
+var circle_check_default = /* @__PURE__ */ export_helper_default(_sfc_main49, [["render", _sfc_render49], ["__file", "circle-check.vue"]]);
+var _sfc_main56 = {
+  name: "Close"
+}, _hoisted_156 = {
+  viewBox: "0 0 1024 1024",
+  xmlns: "http://www.w3.org/2000/svg"
+}, _hoisted_256 = /* @__PURE__ */ createElementVNode("path", {
+  fill: "currentColor",
+  d: "M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"
+}, null, -1), _hoisted_355 = [
+  _hoisted_256
+];
+function _sfc_render56(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_156, _hoisted_355);
+}
+var close_default = /* @__PURE__ */ export_helper_default(_sfc_main56, [["render", _sfc_render56], ["__file", "close.vue"]]);
+var _sfc_main80 = {
+  name: "Delete"
+}, _hoisted_180 = {
+  viewBox: "0 0 1024 1024",
+  xmlns: "http://www.w3.org/2000/svg"
+}, _hoisted_280 = /* @__PURE__ */ createElementVNode("path", {
+  fill: "currentColor",
+  d: "M160 256H96a32 32 0 0 1 0-64h256V95.936a32 32 0 0 1 32-32h256a32 32 0 0 1 32 32V192h256a32 32 0 1 1 0 64h-64v672a32 32 0 0 1-32 32H192a32 32 0 0 1-32-32V256zm448-64v-64H416v64h192zM224 896h576V256H224v640zm192-128a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32zm192 0a32 32 0 0 1-32-32V416a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32z"
+}, null, -1), _hoisted_379 = [
+  _hoisted_280
+];
+function _sfc_render80(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_180, _hoisted_379);
+}
+var delete_default = /* @__PURE__ */ export_helper_default(_sfc_main80, [["render", _sfc_render80], ["__file", "delete.vue"]]);
+var _sfc_main90 = {
+  name: "Document"
+}, _hoisted_190 = {
+  viewBox: "0 0 1024 1024",
+  xmlns: "http://www.w3.org/2000/svg"
+}, _hoisted_290 = /* @__PURE__ */ createElementVNode("path", {
+  fill: "currentColor",
+  d: "M832 384H576V128H192v768h640V384zm-26.496-64L640 154.496V320h165.504zM160 64h480l256 256v608a32 32 0 0 1-32 32H160a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32zm160 448h384v64H320v-64zm0-192h160v64H320v-64zm0 384h384v64H320v-64z"
+}, null, -1), _hoisted_389 = [
+  _hoisted_290
+];
+function _sfc_render90(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_190, _hoisted_389);
+}
+var document_default = /* @__PURE__ */ export_helper_default(_sfc_main90, [["render", _sfc_render90], ["__file", "document.vue"]]);
+var _sfc_main91 = {
+  name: "Download"
+}, _hoisted_191 = {
+  viewBox: "0 0 1024 1024",
+  xmlns: "http://www.w3.org/2000/svg"
+}, _hoisted_291 = /* @__PURE__ */ createElementVNode("path", {
+  fill: "currentColor",
+  d: "M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64zm384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64v450.304z"
+}, null, -1), _hoisted_390 = [
+  _hoisted_291
+];
+function _sfc_render91(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_191, _hoisted_390);
+}
+var download_default = /* @__PURE__ */ export_helper_default(_sfc_main91, [["render", _sfc_render91], ["__file", "download.vue"]]);
+var _sfc_main292 = {
+  name: "ZoomIn"
+}, _hoisted_1292 = {
+  viewBox: "0 0 1024 1024",
+  xmlns: "http://www.w3.org/2000/svg"
+}, _hoisted_2292 = /* @__PURE__ */ createElementVNode("path", {
+  fill: "currentColor",
+  d: "m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704zm-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64h96z"
+}, null, -1), _hoisted_3291 = [
+  _hoisted_2292
+];
+function _sfc_render292(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("svg", _hoisted_1292, _hoisted_3291);
+}
+var zoom_in_default = /* @__PURE__ */ export_helper_default(_sfc_main292, [["render", _sfc_render292], ["__file", "zoom-in.vue"]]);
+
+const restFetch = new RestFetch({
+  baseURL: ""
+});
+var script$1 = defineComponent({
+  components: {
+    ElProgress,
+    ElIcon,
+    Check: check_default,
+    ZoomIn: zoom_in_default,
+    Delete: delete_default,
+    Close: close_default,
+    CircleCheck: circle_check_default,
+    Document: document_default,
+    Download: download_default
+  },
+  props: {
+    listType: {
+      type: String,
+      default: "text"
+    },
+    file: {
+      type: Object,
+      default: () => ({})
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    onPreview: {
+      type: Function,
+      default: () => NOOP
+    },
+    preview: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: {
+    "remove": (e) => e
+  },
+  setup(props, { emit }) {
+    const nsUpload = useNamespace("upload");
+    const nsIcon = useNamespace("icon");
+    const { t } = useLocale();
+    const handleRemove = (file = props.file) => {
+      emit("remove", file);
+    };
+    const handleDownload = (file = props.file) => {
+      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 render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_Document = resolveComponent("Document");
+  const _component_el_icon = resolveComponent("el-icon");
+  const _component_Download = resolveComponent("Download");
+  const _component_el_progress = resolveComponent("el-progress");
+  const _component_circle_check = resolveComponent("circle-check");
+  const _component_Check = resolveComponent("Check");
+  const _component_Close = resolveComponent("Close");
+  const _component_zoom_in = resolveComponent("zoom-in");
+  const _component_Delete = resolveComponent("Delete");
+  return openBlock(), createElementBlock(Fragment, null, [
+    createCommentVNode(" picture "),
+    _ctx.listType === "picture" || _ctx.file.status !== "uploading" && _ctx.listType === "picture-card" ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+      /\.(svg|png|jpg|jpeg)$/.test(_ctx.file.name) ? (openBlock(), createElementBlock("img", {
+        key: 0,
+        class: normalizeClass(_ctx.nsUpload.be("list", "item-thumbnail")),
+        src: _ctx.file.url,
+        alt: ""
+      }, null, 10, _hoisted_1$1)) : (openBlock(), createBlock(_component_Document, { key: 1 }))
+    ], 64)) : createCommentVNode("v-if", true),
+    createCommentVNode(" text "),
+    _ctx.listType !== "picture" && (_ctx.file.status === "uploading" || _ctx.listType !== "picture-card") ? (openBlock(), createElementBlock("div", {
+      key: 1,
+      class: normalizeClass(_ctx.nsUpload.be("list", "item-info"))
+    }, [
+      createElementVNode("a", {
+        class: normalizeClass(_ctx.nsUpload.be("list", "item-name")),
+        onClick: _cache[1] || (_cache[1] = withModifiers(($event) => _ctx.onPreview(_ctx.file), ["prevent"]))
+      }, [
+        createVNode(_component_el_icon, {
+          class: normalizeClass(_ctx.nsIcon.m("document"))
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_Document)
+          ]),
+          _: 1
+        }, 8, ["class"]),
+        createVNode(_component_el_icon, {
+          class: normalizeClass([
+            _ctx.nsIcon.m("download"),
+            _ctx.nsIcon.m("download-primary")
+          ]),
+          onClick: _cache[0] || (_cache[0] = ($event) => _ctx.handleDownload(_ctx.file))
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_Download)
+          ]),
+          _: 1
+        }, 8, ["class"]),
+        createElementVNode("span", {
+          class: normalizeClass(_ctx.nsUpload.be("list", "item-file-name"))
+        }, toDisplayString(_ctx.file.name), 3)
+      ], 2),
+      _ctx.file.status === "uploading" ? (openBlock(), 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: normalizeStyle(_ctx.listType === "picture-card" ? "" : "margin-top: 0.5rem")
+      }, null, 8, ["type", "stroke-width", "percentage", "style"])) : createCommentVNode("v-if", true)
+    ], 2)) : createCommentVNode("v-if", true),
+    createElementVNode("label", {
+      class: normalizeClass(_ctx.nsUpload.be("list", "item-status-label"))
+    }, [
+      _ctx.listType === "text" ? (openBlock(), createBlock(_component_el_icon, {
+        key: 0,
+        class: normalizeClass([
+          _ctx.nsIcon.m("upload-success"),
+          _ctx.nsIcon.m("circle-check")
+        ])
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_circle_check)
+        ]),
+        _: 1
+      }, 8, ["class"])) : ["picture-card", "picture"].includes(_ctx.listType) ? (openBlock(), createBlock(_component_el_icon, {
+        key: 1,
+        class: normalizeClass([_ctx.nsIcon.m("upload-success"), _ctx.nsIcon.m("check")])
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_Check)
+        ]),
+        _: 1
+      }, 8, ["class"])) : createCommentVNode("v-if", true)
+    ], 2),
+    !_ctx.disabled ? (openBlock(), createBlock(_component_el_icon, {
+      key: 2,
+      class: normalizeClass(_ctx.nsIcon.m("close")),
+      onClick: _ctx.handleRemove
+    }, {
+      default: withCtx(() => [
+        createVNode(_component_Close)
+      ]),
+      _: 1
+    }, 8, ["class", "onClick"])) : createCommentVNode("v-if", true),
+    createCommentVNode(" Due to close btn only appears when li gets focused disappears after li gets blurred, thus keyboard navigation can never reach close btn"),
+    createCommentVNode(" This is a bug which needs to be fixed "),
+    createCommentVNode(" TODO: Fix the incorrect navigation interaction "),
+    createCommentVNode(` <i v-if="!disabled" :class="nsIcon.m('close-tip')">{{\r
+      t('el.upload.deleteTip')\r
+  }}</i> `),
+    createCommentVNode(" picture-card "),
+    _ctx.listType === "picture-card" ? (openBlock(), createElementBlock("span", {
+      key: 3,
+      class: normalizeClass(_ctx.nsUpload.be("list", "item-actions"))
+    }, [
+      _ctx.preview ? (openBlock(), createElementBlock("span", {
+        key: 0,
+        class: normalizeClass(_ctx.nsUpload.be("list", "item-preview")),
+        onClick: _cache[2] || (_cache[2] = ($event) => _ctx.onPreview(_ctx.file))
+      }, [
+        createVNode(_component_el_icon, {
+          class: normalizeClass(_ctx.nsIcon.m("zoom-in"))
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_zoom_in)
+          ]),
+          _: 1
+        }, 8, ["class"])
+      ], 2)) : createCommentVNode("v-if", true),
+      createCommentVNode(" \u4E0B\u8F7D "),
+      createElementVNode("span", {
+        class: normalizeClass(_ctx.nsUpload.be("list", "item-download")),
+        onClick: _cache[3] || (_cache[3] = ($event) => _ctx.handleDownload(_ctx.file))
+      }, [
+        createVNode(_component_el_icon, {
+          class: normalizeClass(_ctx.nsIcon.m("download"))
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_Download)
+          ]),
+          _: 1
+        }, 8, ["class"])
+      ], 2),
+      !_ctx.disabled ? (openBlock(), createElementBlock("span", {
+        key: 1,
+        class: normalizeClass(_ctx.nsUpload.be("list", "item-delete")),
+        onClick: _cache[4] || (_cache[4] = ($event) => _ctx.handleRemove(_ctx.file))
+      }, [
+        createVNode(_component_el_icon, {
+          class: normalizeClass(_ctx.nsIcon.m("delete"))
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_Delete)
+          ]),
+          _: 1
+        }, 8, ["class"])
+      ], 2)) : createCommentVNode("v-if", true)
+    ], 2)) : createCommentVNode("v-if", true)
+  ], 64);
+}
+
+script$1.render = render$1;
+script$1.__file = "upload/src/file.vue";
+
+var script = defineComponent({
+  name: "VkfUpload",
+  components: {
+    VkfFormItem,
+    ElUpload,
+    FileVue: script$1,
+    ElLink
+  },
+  emits,
+  props,
+  setup(props2) {
+    const formItemBindProps = _VkfFormItemCtx.createBindProps(props2);
+    const coreBindProps = createUploadBindProps(props2, ["disabled", "fileList"]);
+    const uploadRef = shallowRef();
+    const handleRemove = (file) => {
+      var _a;
+      (_a = uploadRef.value) == null ? void 0 : _a.handleRemove(file);
+    };
+    const readonly = useComputedReadonly(props2);
+    return {
+      formItemBindProps,
+      pickObject,
+      coreBindProps,
+      uploadRef,
+      handleRemove,
+      readonly
+    };
+  }
+});
+
+const _hoisted_1 = /* @__PURE__ */ createTextVNode("+ \u9009\u62E9\u6587\u4EF6");
+const _hoisted_2 = { class: "el-upload__tip" };
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElLink = resolveComponent("ElLink");
+  const _component_FileVue = resolveComponent("FileVue");
+  const _component_ElUpload = resolveComponent("ElUpload");
+  const _component_VkfFormItem = resolveComponent("VkfFormItem");
+  return openBlock(), createBlock(_component_VkfFormItem, normalizeProps(guardReactiveProps(_ctx.formItemBindProps)), {
+    default: withCtx(() => {
+      var _a;
+      return [
+        createVNode(_component_ElUpload, mergeProps({
+          class: ["vkf-upload", {
+            "is-readonly": _ctx.readonly
+          }]
+        }, _ctx.coreBindProps, {
+          fileList: (_a = _ctx.fileList) != null ? _a : [],
+          "onUpdate:fileList": _cache[0] || (_cache[0] = ($event) => _ctx.$emit("update:fileList", $event)),
+          ref: "uploadRef",
+          disabled: _ctx.readonly || _ctx.disabled
+        }), createSlots({
+          file: withCtx(({ file }) => [
+            createVNode(_component_FileVue, {
+              file,
+              listType: _ctx.listType,
+              disabled: _ctx.readonly || _ctx.disabled,
+              onPreview: _ctx.onPreview,
+              onRemove: _ctx.handleRemove
+            }, null, 8, ["file", "listType", "disabled", "onPreview", "onRemove"])
+          ]),
+          default: withCtx(() => [
+            createVNode(_component_ElLink, { type: "primary" }, {
+              default: withCtx(() => [
+                _hoisted_1
+              ]),
+              _: 1
+            }),
+            renderSlot(_ctx.$slots, "default")
+          ]),
+          _: 2
+        }, [
+          _ctx.tip ? {
+            name: "tip",
+            fn: withCtx(() => [
+              createElementVNode("div", _hoisted_2, toDisplayString(_ctx.tip), 1)
+            ])
+          } : void 0
+        ]), 1040, ["class", "fileList", "disabled"])
+      ];
+    }),
+    _: 3
+  }, 16);
+}
+
+script.render = render;
+script.__file = "upload/src/index.vue";
+
+var types = /*#__PURE__*/Object.freeze({
+  __proto__: null
+});
+
+script.install = (app) => {
+  app.component(script.name, script);
+};
+
+export { script as VkfUpload, ctx as _VkfUploadCtx, types as __VkfUpload, script as default };