@silver-formily/element-plus 0.0.1-alpha.0

package/esm/upload/index.mjs

@@ -0,0 +1,185 @@
+import { useField as N, connect as j, mapProps as O } from "@formily/vue";
+import { defineComponent as z, ref as f, useAttrs as T, computed as P, onBeforeUnmount as q, createElementBlock as y, openBlock as s, Fragment as h, createVNode as p, createBlock as k, createCommentVNode as G, unref as n, mergeProps as C, createSlots as H, withCtx as u, renderSlot as m, createElementVNode as S, toDisplayString as R } from "vue";
+import { UploadFilled as J, Plus as K, Upload as M } from "@element-plus/icons-vue";
+import { reaction as Q } from "@formily/reactive";
+import { isFn as c } from "@formily/shared";
+import { ElUpload as W, ElIcon as X, ElButton as Y, ElImageViewer as Z, genFileId as ee } from "element-plus";
+import "@formily/core";
+import "@formily/reactive-vue";
+import { hasSlotContent as te } from "../__builtins__/shared/utils.mjs";
+import { o as oe } from "../vendor/lodash.mjs";
+const re = { class: "el-upload__text" }, ne = { style: { "margin-left": "6px" } }, ie = /* @__PURE__ */ z({
+  name: "FUpload",
+  inheritAttrs: !1,
+  __name: "upload",
+  props: {
+    textContent: {
+      type: String,
+      default: ""
+    },
+    errorAdaptor: {
+      type: Function,
+      default: (i) => i == null ? void 0 : i.message
+    },
+    formatValue: {
+      type: Function,
+      default: (i) => i
+    },
+    fileList: {
+      type: Array,
+      default: () => []
+    },
+    imageViewerProps: {
+      type: Object,
+      default: () => ({ teleported: !0, showProgress: !0 })
+    }
+  },
+  emits: ["change"],
+  setup(i, { emit: U }) {
+    var x;
+    const l = i, $ = U, d = f(), r = T(), V = P(() => oe(r, [
+      "onChange",
+      "onRemove",
+      "onExceed",
+      "onError",
+      "onPreview",
+      "fileList",
+      "onUpdate:fileList"
+    ])), a = N();
+    (x = a.value) == null || x.inject({
+      getElUploadRef: () => d
+    });
+    const F = f(), E = f(0), g = f(!1), I = P(() => l.fileList.map((e) => e.url));
+    function w(e) {
+      var t;
+      const o = l.errorAdaptor(e);
+      (t = a.value) == null || t.setFeedback({
+        type: "error",
+        code: "UploadError",
+        messages: o ? [o] : []
+      });
+    }
+    function L(e, o) {
+      var t;
+      (t = a.value) == null || t.setDataSource([...o]), w();
+    }
+    function A(e, o) {
+      c(r.onRemove) && r.onRemove(e, o), a.value.setDataSource([...o]), w();
+    }
+    function B(e, o) {
+      if (c(r.onExceed) && r.onExceed(e, o), r.limit !== 1)
+        return;
+      d.value.clearFiles();
+      const t = e[0];
+      t.uid = ee(), d.value.handleStart(t), (r.autoUpload ?? !0) && d.value.submit();
+    }
+    function _(e, o, t) {
+      c(r.onError) && r.onError(e, o, t);
+    }
+    function b(e) {
+      var t;
+      if (c(r.onPreview)) {
+        r.onPreview(e);
+        return;
+      }
+      if (!e.url && !((t = r.accept) != null && t.includes("image")))
+        return;
+      const o = l.fileList.findIndex((v) => v.uid === e.uid);
+      E.value = o, g.value = !0;
+    }
+    const D = Q(() => {
+      var e;
+      return ((e = a.value) == null ? void 0 : e.dataSource) ?? [];
+    }, () => {
+      const e = l.formatValue(a.value.dataSource);
+      $("change", e);
+    });
+    return q(() => {
+      D();
+    }), (e, o) => (s(), y(h, null, [
+      p(n(W), C({
+        ref_key: "uploadRef",
+        ref: d
+      }, V.value, {
+        "file-list": e.$props.fileList,
+        onChange: L,
+        onRemove: A,
+        onExceed: B,
+        onError: _,
+        onPreview: b
+      }), H({
+        default: u(() => {
+          var t;
+          return [
+            n(te)((t = e.$slots) == null ? void 0 : t.default) ? m(e.$slots, "default", { key: 0 }) : (s(), y(h, { key: 1 }, [
+              n(r).drag ? (s(), y(h, { key: 0 }, [
+                p(n(X), { style: { "font-size": "60px", margin: "40px 0 16px" } }, {
+                  default: u(() => [
+                    p(n(J), { color: "gray" })
+                  ]),
+                  _: 1
+                }),
+                S("div", re, R(l.textContent), 1)
+              ], 64)) : n(r).listType === "picture-card" ? (s(), k(n(K), {
+                key: 1,
+                style: { width: "28px", height: "28px", color: "gray" }
+              })) : (s(), k(n(Y), { key: 2 }, {
+                default: u(() => [
+                  p(n(M), {
+                    width: "16px",
+                    height: "16px"
+                  }),
+                  S("span", ne, R(l.textContent), 1)
+                ]),
+                _: 1
+              }))
+            ], 64))
+          ];
+        }),
+        _: 2
+      }, [
+        e.$slots.file ? {
+          name: "file",
+          fn: u(({ file: t, index: v }) => [
+            m(e.$slots, "file", {
+              file: t,
+              index: v
+            })
+          ]),
+          key: "0"
+        } : void 0,
+        e.$slots.tip ? {
+          name: "tip",
+          fn: u(() => [
+            m(e.$slots, "tip")
+          ]),
+          key: "1"
+        } : void 0,
+        e.$slots.trigger ? {
+          name: "trigger",
+          fn: u(() => [
+            m(e.$slots, "trigger")
+          ]),
+          key: "2"
+        } : void 0
+      ]), 1040, ["file-list"]),
+      g.value ? (s(), k(n(Z), C({
+        key: 0,
+        ref_key: "imgPreviewRef",
+        ref: F,
+        "url-list": I.value,
+        "initial-index": E.value
+      }, l.imageViewerProps, {
+        onClose: o[0] || (o[0] = (t) => g.value = !1)
+      }), null, 16, ["url-list", "initial-index"])) : G("", !0)
+    ], 64));
+  }
+}), ve = j(
+  ie,
+  O({ readOnly: "readonly", dataSource: "fileList" })
+);
+export {
+  ve as Upload,
+  ve as default
+};
+//# sourceMappingURL=index.mjs.map

package/esm/upload/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../src/upload/upload.vue","../../src/upload/index.ts"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Field } from '@formily/core'\nimport type { ImageViewerInstance, ImageViewerProps, UploadFile, UploadInstance, UploadProps, UploadRawFile } from 'element-plus'\nimport type { PropType } from 'vue'\nimport {\n  Plus as PlusIcon,\n  UploadFilled as UploadFilledIcon,\n  Upload as UploadIcon,\n} from '@element-plus/icons-vue'\nimport { reaction } from '@formily/reactive'\nimport { isFn } from '@formily/shared'\nimport { useField } from '@formily/vue'\nimport { ElButton, ElIcon, ElImageViewer, ElUpload, genFileId } from 'element-plus'\nimport { omit } from 'lodash-es'\nimport { computed, onBeforeUnmount, ref, useAttrs } from 'vue'\nimport { hasSlotContent } from '../__builtins__'\n\ndefineOptions({\n  name: 'FUpload',\n  inheritAttrs: false,\n})\n\nconst props = defineProps({\n  textContent: {\n    type: String,\n    default: '',\n  },\n  errorAdaptor: {\n    type: Function as PropType<(error?: Error) => string>,\n    default: (error?: Error) => error?.message,\n  },\n  formatValue: {\n    type: Function as PropType<(fileList?: UploadFile[]) => any>,\n    default: item => item,\n  },\n  fileList: {\n    type: Array as PropType<UploadFile[]>,\n    default: () => [],\n  },\n  imageViewerProps: {\n    type: Object as PropType<ImageViewerProps>,\n    default: () => ({ teleported: true, showProgress: true }),\n  },\n})\n\nconst emit = defineEmits(['change'])\n\nconst uploadRef = ref<UploadInstance>()\nconst attrs = useAttrs() as UploadProps\nconst innerAttrs = computed(() => {\n  return omit(attrs, [\n    'onChange',\n    'onRemove',\n    'onExceed',\n    'onError',\n    'onPreview',\n    'fileList',\n    'onUpdate:fileList',\n  ])\n})\nconst fieldRef = useField<Field>()\nfieldRef.value?.inject({\n  getElUploadRef: () => {\n    return uploadRef\n  },\n})\n\nconst imgPreviewRef = ref<ImageViewerInstance>()\nconst activeImageIndex = ref(0)\nconst isShowImgViewer = ref(false)\nconst imgPreviewList = computed(() => {\n  return props.fileList.map(item => item.url)\n})\n\nfunction setFeedBack(error?: Error) {\n  const message = props.errorAdaptor(error)\n  fieldRef.value?.setFeedback({\n    type: 'error',\n    code: 'UploadError',\n    messages: message ? [message] : [],\n  })\n}\n\nfunction handleChange(file: UploadFile, fileList: UploadFile[]) {\n  fieldRef.value?.setDataSource([...fileList])\n  setFeedBack()\n}\n\nfunction handleRemove(file: UploadFile, fileList: UploadFile[]) {\n  if (isFn(attrs.onRemove)) {\n    attrs.onRemove(file, fileList)\n  }\n  fieldRef.value.setDataSource([...fileList])\n  setFeedBack()\n}\n\nfunction handleExceed(files: File[], uploadFIles) {\n  if (isFn(attrs.onExceed)) {\n    attrs.onExceed(files, uploadFIles)\n  }\n  if (attrs.limit !== 1)\n    return\n  uploadRef.value!.clearFiles()\n  const file = files[0] as UploadRawFile\n  file.uid = genFileId()\n  uploadRef.value!.handleStart(file)\n  if (attrs.autoUpload ?? true) {\n    uploadRef.value!.submit()\n  }\n}\n\nfunction handleError(error: Error, file: UploadFile, fileList: UploadFile[]) {\n  if (isFn(attrs.onError)) {\n    (attrs.onError)(error, file, fileList)\n  }\n}\n\nfunction onPreviewClick(uploadFile: UploadFile) {\n  if (isFn(attrs.onPreview)) {\n    (attrs.onPreview)(uploadFile)\n    return\n  }\n  if (!uploadFile.url && !attrs.accept?.includes('image'))\n    return\n  const clickIndex = props.fileList.findIndex((element: UploadFile) => element.uid === uploadFile.uid)\n  activeImageIndex.value = clickIndex\n  isShowImgViewer.value = true\n}\n\nconst dispose = reaction(() => {\n  return fieldRef.value?.dataSource ?? []\n}, () => {\n  const emitValue = props.formatValue(fieldRef.value.dataSource as UploadFile[])\n  emit('change', emitValue)\n})\nonBeforeUnmount(() => {\n  dispose()\n})\n</script>\n\n<template>\n  <ElUpload\n    ref=\"uploadRef\"\n    v-bind=\"innerAttrs\"\n    :file-list=\"$props.fileList\"\n    @change=\"handleChange\"\n    @remove=\"handleRemove\"\n    @exceed=\"handleExceed\"\n    @error=\"handleError\"\n    @preview=\"onPreviewClick\"\n  >\n    <slot v-if=\"hasSlotContent($slots?.default)\" />\n    <template v-else>\n      <template v-if=\"attrs.drag\">\n        <ElIcon style=\"font-size: 60px; margin: 40px 0 16px;\">\n          <UploadFilledIcon color=\"gray\" />\n        </ElIcon>\n        <div class=\"el-upload__text\">\n          {{ props.textContent }}\n        </div>\n      </template>\n      <template v-else-if=\"attrs.listType === 'picture-card'\">\n        <PlusIcon style=\"width: 28px; height: 28px; color: gray\" />\n      </template>\n      <template v-else>\n        <ElButton>\n          <UploadIcon width=\"16px\" height=\"16px\" />\n          <span style=\"margin-left: 6px\">\n            {{ props.textContent }}\n          </span>\n        </ElButton>\n      </template>\n    </template>\n    <template v-if=\"$slots.file\" #file=\"{ file, index }\">\n      <slot name=\"file\" :file=\"file\" :index=\"index\" />\n    </template>\n    <template v-if=\"$slots.tip\" #tip>\n      <slot name=\"tip\" />\n    </template>\n    <template v-if=\"$slots.trigger\" #trigger>\n      <slot name=\"trigger\" />\n    </template>\n  </ElUpload>\n  <ElImageViewer\n    v-if=\"isShowImgViewer\"\n    ref=\"imgPreviewRef\"\n    :url-list=\"imgPreviewList\"\n    :initial-index=\"activeImageIndex\"\n    v-bind=\"props.imageViewerProps\"\n    @close=\"isShowImgViewer = false\"\n  />\n</template>\n","import { connect, mapProps } from '@formily/vue'\r\nimport FUpload from './upload.vue'\r\n\r\nexport const Upload = connect(\r\n  FUpload,\r\n  mapProps({ readOnly: 'readonly', dataSource: 'fileList' }),\r\n)\r\n\r\nexport default Upload\r\n"],"names":["props","__props","emit","__emit","uploadRef","ref","attrs","useAttrs","innerAttrs","computed","omit","fieldRef","useField","_a","imgPreviewRef","activeImageIndex","isShowImgViewer","imgPreviewList","item","setFeedBack","error","message","handleChange","file","fileList","handleRemove","isFn","handleExceed","files","uploadFIles","genFileId","handleError","onPreviewClick","uploadFile","clickIndex","element","dispose","reaction","emitValue","onBeforeUnmount","_createVNode","_unref","_mergeProps","$props","hasSlotContent","$slots","_renderSlot","_ctx","_createElementBlock","_Fragment","ElIcon","UploadFilledIcon","_createElementVNode","_hoisted_1","_toDisplayString","_createBlock","PlusIcon","ElButton","UploadIcon","_hoisted_2","index","_openBlock","Upload","connect","FUpload","mapProps"],"mappings":"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"}