@silver-formily/element-plus 0.0.1-beta.0 → 1.0.1

package/esm/upload/index.mjs

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