kouxiangtang 0.0.27-beta.2 → 0.0.27-beta.4

package/dist/AttachmentUploader-DYHNZPE9.js

@@ -0,0 +1,209 @@
+import { computed as $, ref as x, resolveComponent as c, openBlock as d, createElementBlock as T, Fragment as I, createVNode as s, unref as f, normalizeClass as L, withModifiers as S, withCtx as r, createBlock as g, createTextVNode as j, createElementVNode as B, renderList as q, toDisplayString as O, createCommentVNode as W } from "vue";
+import { _ as G, b as H, p as J, e as K, f as Q, a as X } from "./index-BNtmZE6O.js";
+import { ElMessage as m, ElLoading as C } from "element-plus";
+const Y = ["src"], Z = { class: "file-type" }, ee = {
+  __name: "AttachmentUploader",
+  props: {
+    pics: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    limit: { type: Number },
+    props: {
+      type: Object,
+      default() {
+        return {
+          listType: "picture-card",
+          //'text' | 'picture' | 'picture-card'
+          limit: 5,
+          //最多上传几个文件
+          accept: "image/*"
+        };
+      }
+    }
+  },
+  emits: ["on-success", "on-remove", "on-change"],
+  setup(E, { emit: N }) {
+    const _ = N, a = E, y = $(() => a.pics.map((e) => {
+      const t = e.url.substring(e.url.lastIndexOf(".") + 1);
+      if (typeof e.name !== void 0)
+        return e.fileType = t, e;
+      if (e.url) {
+        const o = e.url.split("/");
+        return {
+          ...e,
+          name: o[o.length - 1],
+          fileType: t
+        };
+      }
+      return { ...e, name: e.id, fileType: t };
+    })), k = x(""), h = x(!1);
+    x(a);
+    const U = H().fileUploadUrl;
+    `${localStorage.getItem("token")}`;
+    const z = (e) => {
+      const t = new FileReader();
+      return t.readAsDataURL(e), new Promise(function(o, p) {
+        return e.type.startsWith("image/") ? (t.onload = async (u) => {
+          const i = new Image();
+          i.src = u.target.result, i.onload = () => {
+            const l = document.createElement("canvas"), v = l.getContext("2d");
+            l.width = i.width, l.height = i.height, v.drawImage(i, 0, 0, l.width, l.height), l.toBlob(
+              (w) => {
+                const n = new File([w], e.name, {
+                  type: e.type,
+                  lastModified: Date.now()
+                });
+                o(n);
+              },
+              e.type,
+              0.5
+            );
+          };
+        }, !1) : (o(e), !1);
+      });
+    }, V = (e) => {
+      _("on-remove", e);
+    }, A = () => {
+      m({
+        message: `最多只能上传 ${a.props.limit} 个文件！`,
+        type: "warning"
+      });
+    }, D = (e) => {
+      k.value = e.url, h.value = !0;
+    }, F = (e) => {
+      z(e).then((t) => t.size / 1024 / 1024 < 5 ? (M(t), !1) : (m({
+        message: "上传大小不能超过 5MB!",
+        type: "warning"
+      }), !1));
+    };
+    function P(e, t) {
+      if (!e.name) {
+        m({
+          message: "附件名称不能为空！",
+          type: "warning"
+        });
+        return;
+      }
+      _("on-change", e);
+    }
+    function M(e) {
+      return C.service({ text: "上传中，请稍后", background: "rgba(0,0,0,0.3)" }), new Promise((t, o) => {
+        const p = new FormData();
+        p.append("file", e), X.post(U, p, {}).then((u) => (C.service().close(), m({
+          message: "上传成功",
+          type: "success"
+        }), _("on-success", u.data.data), t(u.data), !1)).catch(() => {
+          C.service().close(), m({
+            message: "上传失败",
+            type: "warning"
+          }), o("Upload failed");
+        });
+      });
+    }
+    return (e, t) => {
+      const o = c("el-icon"), p = c("el-button"), u = c("el-upload"), i = c("el-dialog"), l = c("el-input"), v = c("el-form-item"), w = c("el-form");
+      return d(), T(I, null, [
+        s(u, {
+          "file-list": y.value,
+          action: f(U),
+          limit: a.props.limit,
+          accept: a.props.accept,
+          "list-type": a.props.listType,
+          "on-remove": V,
+          "before-upload": F,
+          "on-exceed": A,
+          "on-preview": D,
+          multiple: !0,
+          "http-request": () => !1,
+          "show-file-list": a.props.listType !== "text",
+          class: L([
+            "upload-main",
+            { "disable-upload": y.value.length >= a.props.limit }
+          ]),
+          onClick: t[0] || (t[0] = S(() => {
+          }, ["prevent"]))
+        }, {
+          default: r(() => [
+            a.props.listType !== "text" ? (d(), g(o, {
+              key: 0,
+              disabled: !0
+            }, {
+              default: r(() => [
+                s(f(J))
+              ]),
+              _: 1
+            })) : (d(), g(p, {
+              key: 1,
+              class: "upload-button",
+              type: "primary"
+            }, {
+              default: r(() => [
+                j("上传附件")
+              ]),
+              _: 1
+            }))
+          ]),
+          _: 1
+        }, 8, ["file-list", "action", "limit", "accept", "list-type", "show-file-list", "class"]),
+        s(i, {
+          modelValue: h.value,
+          "onUpdate:modelValue": t[1] || (t[1] = (n) => h.value = n)
+        }, {
+          default: r(() => [
+            B("img", {
+              "w-full": "",
+              src: k.value,
+              alt: "Preview Image"
+            }, null, 8, Y)
+          ]),
+          _: 1
+        }, 8, ["modelValue"]),
+        a.props.listType == "text" ? (d(), g(w, { key: 0 }, {
+          default: r(() => [
+            (d(!0), T(I, null, q(y.value, (n, R) => (d(), g(v, {
+              key: R,
+              class: "file-list"
+            }, {
+              default: r(() => [
+                s(o, {
+                  color: "#73767a",
+                  size: 14
+                }, {
+                  default: r(() => [
+                    s(f(K))
+                  ]),
+                  _: 1
+                }),
+                s(l, {
+                  modelValue: n.name,
+                  "onUpdate:modelValue": (b) => n.name = b,
+                  onChange: (b) => P(n)
+                }, null, 8, ["modelValue", "onUpdate:modelValue", "onChange"]),
+                B("span", Z, "." + O(n.fileType), 1),
+                s(o, {
+                  color: "#73767a",
+                  size: 12,
+                  onClick: (b) => V(n)
+                }, {
+                  default: r(() => [
+                    s(f(Q))
+                  ]),
+                  _: 2
+                }, 1032, ["onClick"])
+              ]),
+              _: 2
+            }, 1024))), 128))
+          ]),
+          _: 1
+        })) : W("", !0)
+      ], 64);
+    };
+  }
+}, ne = /* @__PURE__ */ G(ee, [["__scopeId", "data-v-7fb06abf"]]);
+export {
+  ne as default
+};
+//# sourceMappingURL=AttachmentUploader-DYHNZPE9.js.map

package/dist/AttachmentUploader-DYHNZPE9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentUploader-DYHNZPE9.js","sources":["../src/framework/field/attachment/AttachmentUploader.vue"],"sourcesContent":["<script setup>\nimport axios from \"axios\";\nimport { getConfig } from \"../../config-loader\";\nimport { ref, computed } from \"vue\";\nimport { ElLoading, ElMessage } from \"element-plus\";\nimport { Plus, Document, Close } from \"@element-plus/icons-vue\";\n\nconst emit = defineEmits([\"on-success\", \"on-remove\", \"on-change\"]);\nconst props = defineProps({\n  pics: {\n    type: Array,\n    default() {\n      return [];\n    },\n  },\n  limit: { type: Number },\n  props: {\n    type: Object,\n    default() {\n      return {\n        listType: \"picture-card\", //'text' | 'picture' | 'picture-card'\n        limit: 5, //最多上传几个文件\n        accept: \"image/*\",\n      };\n    },\n  },\n});\n\nconst files = computed(() => {\n  return props.pics.map((item) => {\n    const fileType = item.url.substring(item.url.lastIndexOf(\".\") + 1);\n    if (typeof item.name !== undefined) {\n      item.fileType = fileType;\n      return item;\n    }\n\n    if (item.url) {\n      const parts = item.url.split(\"/\");\n      const namedItem = {\n        ...item,\n        name: parts[parts.length - 1],\n        fileType: fileType,\n      };\n      return namedItem;\n    }\n\n    return { ...item, name: item.id, fileType: fileType };\n  });\n});\nconst dialogImageUrl = ref(\"\");\nconst dialogVisible = ref(false);\nconst imageUrl = ref(props);\nconst uploadUrl = getConfig().fileUploadUrl;\nconst header = {\n  Authorization: `Bearer ${localStorage.getItem(\"token\")}`,\n};\nconst compressImg = (file) => {\n  const reader = new FileReader();\n  reader.readAsDataURL(file);\n\n  return new Promise(function (resolve, reject) {\n    if (!file.type.startsWith(\"image/\")) {\n      resolve(file);\n      return false;\n    }\n    reader.onload = async (e) => {\n      const img = new Image();\n      img.src = e.target.result;\n      img.onload = () => {\n        const canvas = document.createElement(\"canvas\");\n        const ctx = canvas.getContext(\"2d\");\n        canvas.width = img.width;\n        canvas.height = img.height;\n        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);\n        canvas.toBlob(\n          (blob) => {\n            const newFile = new File([blob], file.name, {\n              type: file.type,\n              lastModified: Date.now(),\n            });\n            resolve(newFile);\n          },\n          file.type,\n          0.5,\n        );\n      };\n    };\n    return false;\n  });\n};\nconst handleRemoveSuccess = (uploadFile) => {\n  emit(\"on-remove\", uploadFile);\n};\nconst handleExceed = () => {\n  ElMessage({\n    message: `最多只能上传 ${props.props.limit} 个文件！`,\n    type: \"warning\",\n  });\n};\nconst handlePictureCardPreview = (uploadFile) => {\n  dialogImageUrl.value = uploadFile.url;\n  dialogVisible.value = true;\n};\nconst handleBeforeUpload = (file) => {\n  compressImg(file).then((newFile) => {\n    if (newFile.size / 1024 / 1024 < 5) {\n      uploadRequest(newFile);\n      return false;\n    } else {\n      ElMessage({\n        message: \"上传大小不能超过 5MB!\",\n        type: \"warning\",\n      });\n      return false;\n    }\n  });\n};\n\nfunction handleFileNameChange(file, index) {\n  if (!file.name) {\n    ElMessage({\n      message: \"附件名称不能为空！\",\n      type: \"warning\",\n    });\n    return;\n  }\n  emit(\"on-change\", file);\n}\n\nfunction uploadRequest(file) {\n  ElLoading.service({ text: \"上传中，请稍后\", background: \"rgba(0,0,0,0.3)\" });\n  return new Promise((resolve, reject) => {\n    const formData = new FormData();\n    formData.append(\"file\", file);\n    axios\n      .post(uploadUrl, formData, {})\n      .then((res) => {\n        ElLoading.service().close();\n        ElMessage({\n          message: \"上传成功\",\n          type: \"success\",\n        });\n        emit(\"on-success\", res.data.data);\n        resolve(res.data);\n        return false;\n      })\n      .catch(() => {\n        ElLoading.service().close();\n        ElMessage({\n          message: \"上传失败\",\n          type: \"warning\",\n        });\n        reject(\"Upload failed\");\n      });\n  });\n}\n</script>\n\n<template>\n  <!--  删除请求头加权限后请添加到组建中  :headers=\"header\"-->\n  <el-upload\n    :file-list=\"files\"\n    :action=\"uploadUrl\"\n    :limit=\"props.props.limit\"\n    :accept=\"props.props.accept\"\n    :list-type=\"props.props.listType\"\n    :on-remove=\"handleRemoveSuccess\"\n    :before-upload=\"handleBeforeUpload\"\n    :on-exceed=\"handleExceed\"\n    :on-preview=\"handlePictureCardPreview\"\n    :multiple=\"true\"\n    :http-request=\"\n      () => {\n        return false;\n      }\n    \"\n    :show-file-list=\"props.props.listType !== 'text'\"\n    :class=\"[\n      'upload-main',\n      { 'disable-upload': files.length >= props.props.limit },\n    ]\"\n    @click.prevent\n  >\n    <template v-if=\"props.props.listType !== 'text'\">\n      <el-icon :disabled=\"true\">\n        <Plus />\n      </el-icon>\n    </template>\n    <template v-else>\n      <el-button class=\"upload-button\" type=\"primary\">上传附件</el-button>\n    </template>\n  </el-upload>\n  <el-dialog v-model=\"dialogVisible\">\n    <img w-full :src=\"dialogImageUrl\" alt=\"Preview Image\" />\n  </el-dialog>\n  <el-form v-if=\"props.props.listType == 'text'\">\n    <el-form-item v-for=\"(file, index) in files\" :key=\"index\" class=\"file-list\">\n      <el-icon color=\"#73767a\" :size=\"14\">\n        <Document />\n      </el-icon>\n      <el-input\n        v-model=\"file.name\"\n        @change=\"handleFileNameChange(file, index)\"\n      />\n      <span class=\"file-type\">.{{ file.fileType }}</span>\n      <el-icon color=\"#73767a\" :size=\"12\" @click=\"handleRemoveSuccess(file)\">\n        <Close />\n      </el-icon>\n    </el-form-item>\n  </el-form>\n</template>\n<style scoped lang=\"scss\">\n:deep(.el-upload-list) {\n  .el-upload-list__item-actions span {\n    margin-left: 20px;\n  }\n}\n\n.disable-upload {\n  :deep(.el-upload--picture-card) {\n    display: none !important;\n  }\n\n  :deep(.el-upload--text) {\n    display: none !important;\n  }\n\n  :deep(.el-upload--picture) {\n    display: none !important;\n  }\n}\n.upload-main {\n  flex-basis: 100%;\n}\n.file-list {\n  display: flex;\n  align-items: center;\n  margin-top: 10px;\n  .file-type {\n    height: 22px;\n    line-height: 22px;\n    margin-right: 5px;\n    background: #eeeeee;\n    border-radius: 4px;\n    font-size: 12px;\n    padding: 0 4px;\n  }\n  :deep(.el-form-item__content) {\n    display: contents;\n  }\n  :deep(.el-input__wrapper) {\n    margin: 0 5px;\n  }\n  :deep(.el-input__inner) {\n    height: 20px;\n    line-height: 20px;\n  }\n}\n</style>\n"],"names":["emit","__emit","props","__props","files","computed","item","fileType","parts","dialogImageUrl","ref","dialogVisible","uploadUrl","getConfig","compressImg","file","reader","resolve","reject","e","img","canvas","ctx","blob","newFile","handleRemoveSuccess","uploadFile","handleExceed","ElMessage","handlePictureCardPreview","handleBeforeUpload","uploadRequest","handleFileNameChange","index","ElLoading","formData","axios","res"],"mappings":"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"}

package/dist/ImageUploader-Dn2vXTI-.js

@@ -0,0 +1,96 @@
+import { openBlock as t, createBlock as o, unref as e, withCtx as s, renderSlot as I, createElementVNode as b, createVNode as l, withModifiers as v, createCommentVNode as E } from "vue";
+import { ElUpload as x, ElImage as B, ElIcon as n, ElMessage as i, ElLoading as d } from "element-plus";
+import { _ as M, b as C, l as S, p as L, d as N, a as V } from "./index-BNtmZE6O.js";
+const q = { class: "image-slot" }, z = {
+  __name: "ImageUploader",
+  props: {
+    imageUrl: { type: String }
+  },
+  emits: ["on-success"],
+  setup(f, { emit: g }) {
+    const m = g, r = f, p = C().imageUploadUrl;
+    `${localStorage.getItem("token")}`;
+    const _ = (a) => {
+      if (!(a.size / 1024 / 1024 < 5))
+        return i({
+          message: "上传大小不能超过 5MB!",
+          type: "warning"
+        }), !1;
+    }, U = (a) => {
+      m("on-success", a.data.imageUrl);
+    };
+    function h() {
+      m("on-success", "");
+    }
+    function k(a) {
+      return d.service({ text: "上传中，请稍后", background: "rgba(0,0,0,0.3)" }), new Promise((c, w) => {
+        const u = new FormData();
+        u.append("image", a.file), V.post(p, u, {}).then((y) => {
+          d.service().close(), i({
+            message: "上传成功",
+            type: "success"
+          }), c(y.data);
+        }).catch(() => {
+          d.service().close(), i({
+            message: "上传失败",
+            type: "warning"
+          }), w("Upload failed");
+        });
+      });
+    }
+    return (a, c) => (t(), o(e(x), {
+      class: "image-uploader",
+      action: e(p),
+      name: "image",
+      "show-file-list": !1,
+      "on-success": U,
+      "before-upload": _,
+      "http-request": k
+    }, {
+      default: s(() => [
+        I(a.$slots, "default", {}, void 0, !0),
+        r.imageUrl ? (t(), o(e(B), {
+          key: 0,
+          class: "image",
+          src: r.imageUrl,
+          fit: "scale-down"
+        }, {
+          placeholder: s(() => [
+            b("div", q, [
+              l(e(n), { class: "placeholder-icon" }, {
+                default: s(() => [
+                  l(e(S))
+                ]),
+                _: 1
+              })
+            ])
+          ]),
+          _: 1
+        }, 8, ["src"])) : (t(), o(e(n), {
+          key: 1,
+          class: "uploader-icon"
+        }, {
+          default: s(() => [
+            l(e(L))
+          ]),
+          _: 1
+        })),
+        r.imageUrl ? (t(), o(e(n), {
+          key: 2,
+          class: "delete-icon",
+          onClick: v(h, ["stop", "prevent"])
+        }, {
+          default: s(() => [
+            l(e(N))
+          ]),
+          _: 1
+        })) : E("", !0)
+      ]),
+      _: 3
+    }, 8, ["action"]));
+  }
+}, F = /* @__PURE__ */ M(z, [["__scopeId", "data-v-ae965bb4"]]);
+export {
+  F as default
+};
+//# sourceMappingURL=ImageUploader-Dn2vXTI-.js.map

package/dist/ImageUploader-Dn2vXTI-.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageUploader-Dn2vXTI-.js","sources":["../src/framework/field/image/ImageUploader.vue"],"sourcesContent":["<script setup>\nimport { ElUpload, ElImage, ElIcon } from \"element-plus\";\nimport axios from \"axios\";\nimport { getConfig } from \"../../config-loader\";\nimport { ElLoading, ElMessage } from \"element-plus\";\nimport { Plus, Delete, Loading } from \"@element-plus/icons-vue\";\n\nconst emit = defineEmits([\"on-success\"]);\nconst props = defineProps({\n  imageUrl: { type: String },\n});\nconst uploadUrl = getConfig().imageUploadUrl;\nconst header = {\n  Authorization: `Bearer ${localStorage.getItem(\"token\")}`,\n};\nconst handleBeforeUpload = (uploadFile) => {\n  const isLt2M = uploadFile.size / 1024 / 1024 < 5;\n  if (!isLt2M) {\n    ElMessage({\n      message: \"上传大小不能超过 5MB!\",\n      type: \"warning\",\n    });\n    return false;\n  }\n};\nconst handleSuccess = (response) => {\n  emit(\"on-success\", response.data.imageUrl);\n};\n\nfunction deleteImageUrl() {\n  emit(\"on-success\", \"\");\n}\n\nfunction uploadRequest(file) {\n  ElLoading.service({ text: \"上传中，请稍后\", background: \"rgba(0,0,0,0.3)\" });\n  return new Promise((resolve, reject) => {\n    const formData = new FormData();\n    formData.append(\"image\", file.file);\n    axios\n      .post(uploadUrl, formData, {})\n      .then((res) => {\n        ElLoading.service().close();\n        ElMessage({\n          message: \"上传成功\",\n          type: \"success\",\n        });\n        resolve(res.data);\n      })\n      .catch(() => {\n        ElLoading.service().close();\n        ElMessage({\n          message: \"上传失败\",\n          type: \"warning\",\n        });\n        reject(\"Upload failed\");\n      });\n  });\n}\n</script>\n\n<template>\n  <!--  删除请求头加权限后请添加到组建中  :headers=\"header\"-->\n  <el-upload\n    class=\"image-uploader\"\n    :action=\"uploadUrl\"\n    name=\"image\"\n    :show-file-list=\"false\"\n    :on-success=\"handleSuccess\"\n    :before-upload=\"handleBeforeUpload\"\n    :http-request=\"uploadRequest\"\n  >\n    <slot />\n    <el-image\n      v-if=\"props.imageUrl\"\n      class=\"image\"\n      :src=\"props.imageUrl\"\n      fit=\"scale-down\"\n    >\n      <template #placeholder>\n        <div class=\"image-slot\">\n          <el-icon class=\"placeholder-icon\">\n            <Loading />\n          </el-icon>\n        </div>\n      </template>\n    </el-image>\n    <el-icon v-else class=\"uploader-icon\">\n      <Plus />\n    </el-icon>\n    <el-icon\n      v-if=\"props.imageUrl\"\n      class=\"delete-icon\"\n      @click.stop.prevent=\"deleteImageUrl\"\n    >\n      <Delete />\n    </el-icon>\n  </el-upload>\n</template>\n\n<style scoped lang=\"scss\">\n.image-uploader {\n  :deep(.el-upload) {\n    border: 1px dashed var(--el-border-color);\n    border-radius: 6px;\n    cursor: pointer;\n    position: relative;\n    overflow: hidden;\n    transition: var(--el-transition-duration-fast);\n\n    &:hover {\n      border-color: var(--el-color-primary);\n    }\n  }\n\n  .image {\n    width: 146px;\n    height: 146px;\n\n    .placeholder-icon {\n      width: 146px;\n      height: 146px;\n      font-size: 30px;\n      color: #a7a7a7;\n    }\n  }\n\n  .uploader-icon {\n    font-size: 28px;\n    color: #8c939d;\n    width: 146px;\n    height: 146px;\n    text-align: center;\n  }\n\n  .delete-icon {\n    font-size: 20px;\n    color: #b7b4b4;\n    position: absolute;\n    top: 10px;\n    right: 10px;\n  }\n}\n</style>\n"],"names":["emit","__emit","props","__props","uploadUrl","getConfig","handleBeforeUpload","uploadFile","ElMessage","handleSuccess","response","deleteImageUrl","uploadRequest","file","ElLoading","resolve","reject","formData","axios","res"],"mappings":";;;;;;;;;;AAOA,UAAMA,IAAOC,GACPC,IAAQC,GAGRC,IAAYC,EAAW,EAAC;AACf,IACY,gBAAa,QAAQ,OAAO;AAEvD,UAAMC,IAAqB,CAACC,MAAe;AAEzC,UAAI,EADWA,EAAW,OAAO,OAAO,OAAO;AAE7C,eAAAC,EAAU;AAAA,UACR,SAAS;AAAA,UACT,MAAM;AAAA,QACZ,CAAK,GACM;AAAA,IAEX,GACMC,IAAgB,CAACC,MAAa;AAClC,MAAAV,EAAK,cAAcU,EAAS,KAAK,QAAQ;AAAA,IAC3C;AAEA,aAASC,IAAiB;AACxB,MAAAX,EAAK,cAAc,EAAE;AAAA,IACvB;AAEA,aAASY,EAAcC,GAAM;AAC3B,aAAAC,EAAU,QAAQ,EAAE,MAAM,WAAW,YAAY,kBAAiB,CAAE,GAC7D,IAAI,QAAQ,CAACC,GAASC,MAAW;AACtC,cAAMC,IAAW,IAAI;AACrB,QAAAA,EAAS,OAAO,SAASJ,EAAK,IAAI,GAClCK,EACG,KAAKd,GAAWa,GAAU,EAAE,EAC5B,KAAK,CAACE,MAAQ;AACb,UAAAL,EAAU,UAAU,SACpBN,EAAU;AAAA,YACR,SAAS;AAAA,YACT,MAAM;AAAA,UAChB,CAAS,GACDO,EAAQI,EAAI,IAAI;AAAA,QACxB,CAAO,EACA,MAAM,MAAM;AACX,UAAAL,EAAU,UAAU,SACpBN,EAAU;AAAA,YACR,SAAS;AAAA,YACT,MAAM;AAAA,UAChB,CAAS,GACDQ,EAAO,eAAe;AAAA,QAC9B,CAAO;AAAA,MACP,CAAG;AAAA,IACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}