@qxs-bns/components 0.0.22 → 0.0.24

package/lib/src/image-upload/src/image-upload.vue.js

@@ -1,239 +1,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var vue = require('vue');
-var iconsVue = require('@element-plus/icons-vue');
-var hooks = require('@qxs-bns/hooks');
-var index = require('../../../node_modules/.pnpm/element-plus@2.9.6_vue@3.5.13_typescript@5.8.2_/node_modules/element-plus/es/components/upload/index.js');
-var index$1 = require('../../../node_modules/.pnpm/element-plus@2.9.6_vue@3.5.13_typescript@5.8.2_/node_modules/element-plus/es/components/image/index.js');
-var index$2 = require('../../../node_modules/.pnpm/element-plus@2.9.6_vue@3.5.13_typescript@5.8.2_/node_modules/element-plus/es/components/icon/index.js');
-var index$3 = require('../../../node_modules/.pnpm/element-plus@2.9.6_vue@3.5.13_typescript@5.8.2_/node_modules/element-plus/es/components/progress/index.js');
-var index$4 = require('../../../node_modules/.pnpm/element-plus@2.9.6_vue@3.5.13_typescript@5.8.2_/node_modules/element-plus/es/components/image-viewer/index.js');
-var index$5 = require('../../../node_modules/.pnpm/element-plus@2.9.6_vue@3.5.13_typescript@5.8.2_/node_modules/element-plus/es/components/message/index.js');
-
-const _hoisted_1 = {
-  key: 1,
-  class: "image"
-};
-const _hoisted_2 = { class: "mask" };
-const _hoisted_3 = { class: "actions" };
-const _hoisted_4 = {
-  key: 0,
-  class: "el-upload__tip-text"
-};
-const _hoisted_5 = { style: { "display": "inline-block" } };
-var _sfc_main = /* @__PURE__ */ vue.defineComponent({
-  ...{
-    name: "QxsImageUpload"
-  },
-  __name: "image-upload",
-  props: {
-    action: { type: String, required: true },
-    headers: { type: null, required: false },
-    data: { type: null, required: false },
-    name: { type: String, required: false, default: "file" },
-    url: { type: String, required: false, default: "" },
-    size: { type: Number, required: false, default: 20 },
-    width: { type: Number, required: false, default: 160 },
-    accept: { type: String, required: false, default: "image/jpeg,image/jpg,image/png,image/gif" },
-    height: { type: Number, required: false, default: 90 },
-    placeholder: { type: String, required: false, default: "\u70B9\u51FB\u4E0A\u4F20\u56FE\u7247" },
-    notip: { type: Boolean, required: false, default: false },
-    tipText: { type: String, required: false },
-    beforeUpload: { type: null, required: false }
-  },
-  emits: ["update:url", "onSuccess"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emits = __emit;
-    const ns = hooks.useNamespace("image-upload");
-    const uploadData = vue.ref({
-      imageViewerVisible: false,
-      progress: {
-        preview: "",
-        percent: 0
-      }
-    });
-    const exts = vue.computed(() => {
-      return props.accept.split(",").map((ext) => ext.split("/").pop());
-    });
-    function preview() {
-      uploadData.value.imageViewerVisible = true;
-    }
-    function previewClose() {
-      uploadData.value.imageViewerVisible = false;
-    }
-    function remove() {
-      emits("update:url", "");
-    }
-    const handleBeforeUpload = (file) => {
-      const fileName = file.name.split(".");
-      const fileExt = fileName.at(-1) ?? "";
-      const isTypeOk = exts.value.includes(fileExt);
-      const isSizeOk = file.size / 1024 / 1024 < props.size;
-      if (!isTypeOk) {
-        index$5.ElMessage.error(`\u4E0A\u4F20\u56FE\u7247\u53EA\u652F\u6301${exts.value.join(" / ")}\u683C\u5F0F\uFF01`);
-      } else if (!isSizeOk) {
-        index$5.ElMessage.error(`\u4E0A\u4F20\u56FE\u7247\u5927\u5C0F\u4E0D\u80FD\u8D85\u8FC7 ${props.size}MB\uFF01`);
-      } else {
-        uploadData.value.progress.preview = URL.createObjectURL(file);
-      }
-      return isTypeOk && isSizeOk && (!props.beforeUpload || props.beforeUpload(file));
-    };
-    const onProgress = (file) => {
-      uploadData.value.progress.percent = ~~file.percent;
-    };
-    const onSuccess = (...res) => {
-      uploadData.value.progress.preview = "";
-      uploadData.value.progress.percent = 0;
-      emits("onSuccess", ...res);
-    };
-    return (_ctx, _cache) => {
-      const _component_el_icon = index$2.ElIcon;
-      const _component_el_image = index$1.ElImage;
-      const _component_el_progress = index$3.ElProgress;
-      const _component_el_upload = index.ElUpload;
-      const _component_el_image_viewer = index$4.ElImageViewer;
-      return vue.openBlock(), vue.createElementBlock(
-        "div",
-        {
-          class: vue.normalizeClass(vue.unref(ns).e("upload-container"))
-        },
-        [
-          vue.createVNode(_component_el_upload, {
-            "show-file-list": false,
-            headers: _ctx.headers,
-            action: _ctx.action,
-            data: _ctx.data,
-            name: _ctx.name,
-            "before-upload": handleBeforeUpload,
-            "on-progress": onProgress,
-            "on-success": onSuccess,
-            drag: "",
-            accept: _ctx.accept,
-            class: vue.normalizeClass(vue.unref(ns).e("image-upload"))
-          }, {
-            default: vue.withCtx(() => [
-              _ctx.url === "" ? (vue.openBlock(), vue.createBlock(_component_el_image, {
-                key: 0,
-                src: _ctx.url === "" ? _ctx.placeholder : _ctx.url,
-                style: vue.normalizeStyle(`width:${_ctx.width}px;height:${_ctx.height}px;`),
-                fit: "fill"
-              }, {
-                error: vue.withCtx(() => [
-                  vue.createElementVNode(
-                    "div",
-                    {
-                      class: "image-slot",
-                      style: vue.normalizeStyle(`width:${_ctx.width}px;height:${_ctx.height}px;`)
-                    },
-                    [
-                      vue.createVNode(_component_el_icon, null, {
-                        default: vue.withCtx(() => [
-                          vue.createVNode(vue.unref(iconsVue.Plus))
-                        ]),
-                        _: 1
-                        /* STABLE */
-                      }),
-                      vue.createElementVNode(
-                        "p",
-                        null,
-                        vue.toDisplayString(_ctx.placeholder),
-                        1
-                        /* TEXT */
-                      )
-                    ],
-                    4
-                    /* STYLE */
-                  )
-                ]),
-                _: 1
-                /* STABLE */
-              }, 8, ["src", "style"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-                vue.createVNode(_component_el_image, {
-                  src: _ctx.url,
-                  style: vue.normalizeStyle(`width:${_ctx.width}px;height:${_ctx.height}px;`),
-                  fit: "fill"
-                }, null, 8, ["src", "style"]),
-                vue.createElementVNode("div", _hoisted_2, [
-                  vue.createElementVNode("div", _hoisted_3, [
-                    vue.createElementVNode("span", {
-                      title: "\u9884\u89C8",
-                      onClick: vue.withModifiers(preview, ["stop"])
-                    }, [
-                      vue.createVNode(_component_el_icon, null, {
-                        default: vue.withCtx(() => [
-                          vue.createVNode(vue.unref(iconsVue.ZoomIn))
-                        ]),
-                        _: 1
-                        /* STABLE */
-                      })
-                    ]),
-                    vue.createElementVNode("span", {
-                      title: "\u79FB\u9664",
-                      onClick: vue.withModifiers(remove, ["stop"])
-                    }, [
-                      vue.createVNode(_component_el_icon, null, {
-                        default: vue.withCtx(() => [
-                          vue.createVNode(vue.unref(iconsVue.Delete))
-                        ]),
-                        _: 1
-                        /* STABLE */
-                      })
-                    ])
-                  ])
-                ])
-              ])),
-              vue.withDirectives(vue.createElementVNode(
-                "div",
-                {
-                  class: "progress",
-                  style: vue.normalizeStyle(`width:${_ctx.width}px;height:${_ctx.height}px;`)
-                },
-                [
-                  vue.createVNode(_component_el_image, {
-                    src: vue.unref(uploadData).progress.preview,
-                    style: vue.normalizeStyle(`width:${_ctx.width}px;height:${_ctx.height}px;`),
-                    fit: "fill"
-                  }, null, 8, ["src", "style"]),
-                  vue.createVNode(_component_el_progress, {
-                    type: "circle",
-                    width: Math.min(_ctx.width, _ctx.height) * 0.8,
-                    percentage: vue.unref(uploadData).progress.percent
-                  }, null, 8, ["width", "percentage"])
-                ],
-                4
-                /* STYLE */
-              ), [
-                [vue.vShow, _ctx.url === "" && vue.unref(uploadData).progress.percent]
-              ])
-            ]),
-            _: 1
-            /* STABLE */
-          }, 8, ["headers", "action", "data", "name", "accept", "class"]),
-          !_ctx.notip ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
-            vue.createElementVNode(
-              "div",
-              _hoisted_5,
-              vue.toDisplayString(_ctx.tipText || `\u4E0A\u4F20\u56FE\u7247\u652F\u6301 ${vue.unref(exts).join(" / ")} \u683C\u5F0F\uFF0C\u4E14\u56FE\u7247\u5927\u5C0F\u4E0D\u8D85\u8FC7 ${_ctx.size}MB\uFF0C\u5EFA\u8BAE\u56FE\u7247\u5C3A\u5BF8\u4E3A ${_ctx.width}*${_ctx.height}`),
-              1
-              /* TEXT */
-            )
-          ])) : vue.createCommentVNode("v-if", true),
-          vue.unref(uploadData).imageViewerVisible ? (vue.openBlock(), vue.createBlock(_component_el_image_viewer, {
-            key: 1,
-            "url-list": [_ctx.url],
-            teleported: "",
-            onClose: previewClose
-          }, null, 8, ["url-list"])) : vue.createCommentVNode("v-if", true)
-        ],
-        2
-        /* CLASS */
-      );
-    };
-  }
-});
-
-exports.default = _sfc_main;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("element-plus/es"),t=require("vue"),r=require("@element-plus/icons-vue"),l=require("@qxs-bns/hooks");const i={key:1,class:"image"},a={class:"mask"},o={class:"actions"},s={key:0,class:"el-upload__tip-text"},n={style:{display:"inline-block"}};var c=t.defineComponent({name:"QxsImageUpload",__name:"image-upload",props:{action:{type:String,required:!0},headers:{type:null,required:!1},data:{type:null,required:!1},name:{type:String,required:!1,default:"file"},url:{type:String,required:!1,default:""},size:{type:Number,required:!1,default:20},width:{type:Number,required:!1,default:160},accept:{type:String,required:!1,default:"image/jpeg,image/jpg,image/png,image/gif"},height:{type:Number,required:!1,default:90},placeholder:{type:String,required:!1,default:"点击上传图片"},notip:{type:Boolean,required:!1,default:!1},tipText:{type:String,required:!1},beforeUpload:{type:null,required:!1}},emits:["update:url","onSuccess"],setup(c,{emit:p}){const d=c,u=p,h=l.useNamespace("image-upload"),m=t.ref({imageViewerVisible:!1,progress:{preview:"",percent:0}}),g=t.computed((()=>d.accept.split(",").map((e=>e.split("/").pop()))));function f(){m.value.imageViewerVisible=!0}function y(){m.value.imageViewerVisible=!1}function w(){u("update:url","")}const v=t=>{const r=t.name.split(".").at(-1)??"",l=g.value.includes(r),i=t.size/1024/1024<d.size;return l?i?m.value.progress.preview=URL.createObjectURL(t):e.ElMessage.error(`上传图片大小不能超过 ${d.size}MB！`):e.ElMessage.error(`上传图片只支持${g.value.join(" / ")}格式！`),l&&i&&(!d.beforeUpload||d.beforeUpload(t))},V=e=>{m.value.progress.percent=~~e.percent},N=(...e)=>{m.value.progress.preview="",m.value.progress.percent=0,u("onSuccess",...e)};return(l,c)=>{const p=e.ElIcon,d=e.ElImage,u=e.ElProgress,x=e.ElUpload,k=e.ElImageViewer;return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(t.unref(h).e("upload-container"))},[t.createVNode(x,{"show-file-list":!1,headers:l.headers,action:l.action,data:l.data,name:l.name,"before-upload":v,"on-progress":V,"on-success":N,drag:"",accept:l.accept,class:t.normalizeClass(t.unref(h).e("image-upload"))},{default:t.withCtx((()=>[""===l.url?(t.openBlock(),t.createBlock(d,{key:0,src:""===l.url?l.placeholder:l.url,style:t.normalizeStyle(`width:${l.width}px;height:${l.height}px;`),fit:"fill"},{error:t.withCtx((()=>[t.createElementVNode("div",{class:"image-slot",style:t.normalizeStyle(`width:${l.width}px;height:${l.height}px;`)},[t.createVNode(p,null,{default:t.withCtx((()=>[t.createVNode(t.unref(r.Plus))])),_:1}),t.createElementVNode("p",null,t.toDisplayString(l.placeholder),1)],4)])),_:1},8,["src","style"])):(t.openBlock(),t.createElementBlock("div",i,[t.createVNode(d,{src:l.url,style:t.normalizeStyle(`width:${l.width}px;height:${l.height}px;`),fit:"fill"},null,8,["src","style"]),t.createElementVNode("div",a,[t.createElementVNode("div",o,[t.createElementVNode("span",{title:"预览",onClick:t.withModifiers(f,["stop"])},[t.createVNode(p,null,{default:t.withCtx((()=>[t.createVNode(t.unref(r.ZoomIn))])),_:1})]),t.createElementVNode("span",{title:"移除",onClick:t.withModifiers(w,["stop"])},[t.createVNode(p,null,{default:t.withCtx((()=>[t.createVNode(t.unref(r.Delete))])),_:1})])])])])),t.withDirectives(t.createElementVNode("div",{class:"progress",style:t.normalizeStyle(`width:${l.width}px;height:${l.height}px;`)},[t.createVNode(d,{src:t.unref(m).progress.preview,style:t.normalizeStyle(`width:${l.width}px;height:${l.height}px;`),fit:"fill"},null,8,["src","style"]),t.createVNode(u,{type:"circle",width:.8*Math.min(l.width,l.height),percentage:t.unref(m).progress.percent},null,8,["width","percentage"])],4),[[t.vShow,""===l.url&&t.unref(m).progress.percent]])])),_:1},8,["headers","action","data","name","accept","class"]),l.notip?t.createCommentVNode("v-if",!0):(t.openBlock(),t.createElementBlock("div",s,[t.createElementVNode("div",n,t.toDisplayString(l.tipText||`上传图片支持 ${t.unref(g).join(" / ")} 格式，且图片大小不超过 ${l.size}MB，建议图片尺寸为 ${l.width}*${l.height}`),1)])),t.unref(m).imageViewerVisible?(t.openBlock(),t.createBlock(k,{key:1,"url-list":[l.url],teleported:"",onClose:y},null,8,["url-list"])):t.createCommentVNode("v-if",!0)],2)}}});exports.default=c;
 //# sourceMappingURL=image-upload.vue.js.map

package/lib/src/image-upload/src/image-upload.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-upload.vue.js","sources":["../../../../../../packages/components/src/image-upload/src/image-upload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { UploadFile, UploadFiles, UploadProps } from 'element-plus'\nimport { Delete, Plus, ZoomIn } from '@element-plus/icons-vue'\nimport { useNamespace } from '@qxs-bns/hooks'\n\ndefineOptions({\n  name: 'QxsImageUpload',\n})\nconst props = withDefaults(\n  defineProps<{\n    action: UploadProps['action']\n    headers?: UploadProps['headers']\n    data?: UploadProps['data']\n    name?: UploadProps['name']\n    url?: string\n    size?: number\n    width?: number\n    accept?: string\n    height?: number\n    placeholder?: string\n    notip?: boolean\n    tipText?: string\n    beforeUpload?: UploadProps['beforeUpload']\n  }>(),\n  {\n    name: 'file',\n    url: '',\n    size: 20,\n    width: 160,\n    height: 90,\n    placeholder: '点击上传图片',\n    notip: false,\n    accept: 'image/jpeg,image/jpg,image/png,image/gif',\n  },\n)\nconst emits = defineEmits<{\n  'update:url': [\n    url: string,\n  ]\n  'onSuccess': [\n    res: any,\n    uploadFile: UploadFile,\n    uploadFiles: UploadFiles,\n  ]\n}>()\n\nconst ns = useNamespace('image-upload')\n\nconst uploadData = ref({\n  imageViewerVisible: false,\n  progress: {\n    preview: '',\n    percent: 0,\n  },\n})\n\nconst exts = computed(() => {\n  return props.accept.split(',').map(ext => ext.split('/').pop())\n})\n\n// 预览\nfunction preview() {\n  uploadData.value.imageViewerVisible = true\n}\n// 关闭预览\nfunction previewClose() {\n  uploadData.value.imageViewerVisible = false\n}\n// 移除\nfunction remove() {\n  emits('update:url', '')\n}\nconst handleBeforeUpload: UploadProps['beforeUpload'] = (file) => {\n  const fileName = file.name.split('.')\n  const fileExt = fileName.at(-1) ?? ''\n  const isTypeOk = exts.value.includes(fileExt)\n  const isSizeOk = file.size / 1024 / 1024 < props.size\n\n  if (!isTypeOk) {\n    ElMessage.error(`上传图片只支持${exts.value.join(' / ')}格式！`)\n  }\n\n  else if (!isSizeOk) {\n    ElMessage.error(`上传图片大小不能超过 ${props.size}MB！`)\n  }\n  else {\n    uploadData.value.progress.preview = URL.createObjectURL(file)\n  }\n\n  return isTypeOk && isSizeOk && (!props.beforeUpload || props.beforeUpload(file))\n}\nconst onProgress: UploadProps['onProgress'] = (file) => {\n  uploadData.value.progress.percent = ~~file.percent\n}\nconst onSuccess: UploadProps['onSuccess'] = (...res) => {\n  uploadData.value.progress.preview = ''\n  uploadData.value.progress.percent = 0\n  emits('onSuccess', ...res)\n}\n</script>\n\n<template>\n  <div :class=\"ns.e('upload-container')\">\n    <el-upload\n      :show-file-list=\"false\"\n      :headers=\"headers\"\n      :action=\"action\"\n      :data=\"data\"\n      :name=\"name\"\n      :before-upload=\"handleBeforeUpload\"\n      :on-progress=\"onProgress\"\n      :on-success=\"onSuccess\"\n      drag\n      :accept=\"accept\"\n      :class=\"ns.e('image-upload')\"\n    >\n      <el-image\n        v-if=\"url === ''\"\n        :src=\"url === '' ? placeholder : url\"\n        :style=\"`width:${width}px;height:${height}px;`\"\n        fit=\"fill\"\n      >\n        <template #error>\n          <div class=\"image-slot\" :style=\"`width:${width}px;height:${height}px;`\">\n            <el-icon>\n              <Plus />\n            </el-icon>\n            <p>\n              {{ placeholder }}\n            </p>\n          </div>\n        </template>\n      </el-image>\n      <div v-else class=\"image\">\n        <el-image\n          :src=\"url\"\n          :style=\"`width:${width}px;height:${height}px;`\"\n          fit=\"fill\"\n        />\n        <div class=\"mask\">\n          <div class=\"actions\">\n            <span title=\"预览\" @click.stop=\"preview\">\n              <el-icon><ZoomIn /></el-icon>\n            </span>\n            <span title=\"移除\" @click.stop=\"remove\">\n              <el-icon>\n                <Delete />\n              </el-icon>\n            </span>\n          </div>\n        </div>\n      </div>\n      <div\n        v-show=\"url === '' && uploadData.progress.percent\"\n        class=\"progress\"\n        :style=\"`width:${width}px;height:${height}px;`\"\n      >\n        <el-image\n          :src=\"uploadData.progress.preview\"\n          :style=\"`width:${width}px;height:${height}px;`\"\n          fit=\"fill\"\n        />\n        <el-progress\n          type=\"circle\"\n          :width=\"Math.min(width, height) * 0.8\"\n          :percentage=\"uploadData.progress.percent\"\n        />\n      </div>\n    </el-upload>\n    <div v-if=\"!notip\" class=\"el-upload__tip-text\">\n      <div style=\"display: inline-block;\">\n        {{ tipText || `上传图片支持 ${exts.join(' / ')} 格式，且图片大小不超过 ${size}MB，建议图片尺寸为 ${width}*${height}` }}\n      </div>\n    </div>\n    <el-image-viewer\n      v-if=\"uploadData.imageViewerVisible\"\n      :url-list=\"[url]\"\n      teleported\n      @close=\"previewClose\"\n    />\n  </div>\n</template>\n"],"names":["useNamespace","ref","computed","ElMessage"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,IAAA,MAAM,KAAQ,GAAA,OAAA;AA2Bd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAWd,IAAM,MAAA,EAAA,GAAKA,mBAAa,cAAc,CAAA;AAEtC,IAAA,MAAM,aAAaC,OAAI,CAAA;AAAA,MACrB,kBAAoB,EAAA,KAAA;AAAA,MACpB,QAAU,EAAA;AAAA,QACR,OAAS,EAAA,EAAA;AAAA,QACT,OAAS,EAAA;AAAA;AACX,KACD,CAAA;AAED,IAAM,MAAA,IAAA,GAAOC,aAAS,MAAM;AAC1B,MAAA,OAAO,KAAM,CAAA,MAAA,CAAO,KAAM,CAAA,GAAG,CAAE,CAAA,GAAA,CAAI,CAAO,GAAA,KAAA,GAAA,CAAI,KAAM,CAAA,GAAG,CAAE,CAAA,GAAA,EAAK,CAAA;AAAA,KAC/D,CAAA;AAGD,IAAA,SAAS,OAAU,GAAA;AACjB,MAAA,UAAA,CAAW,MAAM,kBAAqB,GAAA,IAAA;AAAA;AAGxC,IAAA,SAAS,YAAe,GAAA;AACtB,MAAA,UAAA,CAAW,MAAM,kBAAqB,GAAA,KAAA;AAAA;AAGxC,IAAA,SAAS,MAAS,GAAA;AAChB,MAAA,KAAA,CAAM,cAAc,EAAE,CAAA;AAAA;AAExB,IAAM,MAAA,kBAAA,GAAkD,CAAC,IAAS,KAAA;AAChE,MAAA,MAAM,QAAW,GAAA,IAAA,CAAK,IAAK,CAAA,KAAA,CAAM,GAAG,CAAA;AACpC,MAAA,MAAM,OAAU,GAAA,QAAA,CAAS,EAAG,CAAA,EAAE,CAAK,IAAA,EAAA;AACnC,MAAA,MAAM,QAAW,GAAA,IAAA,CAAK,KAAM,CAAA,QAAA,CAAS,OAAO,CAAA;AAC5C,MAAA,MAAM,QAAW,GAAA,IAAA,CAAK,IAAO,GAAA,IAAA,GAAO,OAAO,KAAM,CAAA,IAAA;AAEjD,MAAA,IAAI,CAAC,QAAU,EAAA;AACb,QAAAC,iBAAA,CAAU,MAAM,CAAU,0CAAA,EAAA,IAAA,CAAK,MAAM,IAAK,CAAA,KAAK,CAAC,CAAK,kBAAA,CAAA,CAAA;AAAA,OACvD,MAAA,IAES,CAAC,QAAU,EAAA;AAClB,QAAAA,iBAAA,CAAU,KAAM,CAAA,CAAA,6DAAA,EAAc,KAAM,CAAA,IAAI,CAAK,QAAA,CAAA,CAAA;AAAA,OAE1C,MAAA;AACH,QAAA,UAAA,CAAW,KAAM,CAAA,QAAA,CAAS,OAAU,GAAA,GAAA,CAAI,gBAAgB,IAAI,CAAA;AAAA;AAG9D,MAAA,OAAO,YAAY,QAAa,KAAA,CAAC,MAAM,YAAgB,IAAA,KAAA,CAAM,aAAa,IAAI,CAAA,CAAA;AAAA,KAChF;AACA,IAAM,MAAA,UAAA,GAAwC,CAAC,IAAS,KAAA;AACtD,MAAA,UAAA,CAAW,KAAM,CAAA,QAAA,CAAS,OAAU,GAAA,CAAC,CAAC,IAAK,CAAA,OAAA;AAAA,KAC7C;AACA,IAAM,MAAA,SAAA,GAAsC,IAAI,GAAQ,KAAA;AACtD,MAAW,UAAA,CAAA,KAAA,CAAM,SAAS,OAAU,GAAA,EAAA;AACpC,MAAW,UAAA,CAAA,KAAA,CAAM,SAAS,OAAU,GAAA,CAAA;AACpC,MAAM,KAAA,CAAA,WAAA,EAAa,GAAG,GAAG,CAAA;AAAA,KAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"image-upload.vue.js","sources":["../../../../../../packages/components/src/image-upload/src/image-upload.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { UploadFile, UploadFiles, UploadProps } from 'element-plus'\nimport { Delete, Plus, ZoomIn } from '@element-plus/icons-vue'\nimport { useNamespace } from '@qxs-bns/hooks'\n\ndefineOptions({\n  name: 'QxsImageUpload',\n})\nconst props = withDefaults(\n  defineProps<{\n    action: UploadProps['action']\n    headers?: UploadProps['headers']\n    data?: UploadProps['data']\n    name?: UploadProps['name']\n    url?: string\n    size?: number\n    width?: number\n    accept?: string\n    height?: number\n    placeholder?: string\n    notip?: boolean\n    tipText?: string\n    beforeUpload?: UploadProps['beforeUpload']\n  }>(),\n  {\n    name: 'file',\n    url: '',\n    size: 20,\n    width: 160,\n    height: 90,\n    placeholder: '点击上传图片',\n    notip: false,\n    accept: 'image/jpeg,image/jpg,image/png,image/gif',\n  },\n)\nconst emits = defineEmits<{\n  'update:url': [\n    url: string,\n  ]\n  'onSuccess': [\n    res: any,\n    uploadFile: UploadFile,\n    uploadFiles: UploadFiles,\n  ]\n}>()\n\nconst ns = useNamespace('image-upload')\n\nconst uploadData = ref({\n  imageViewerVisible: false,\n  progress: {\n    preview: '',\n    percent: 0,\n  },\n})\n\nconst exts = computed(() => {\n  return props.accept.split(',').map(ext => ext.split('/').pop())\n})\n\n// 预览\nfunction preview() {\n  uploadData.value.imageViewerVisible = true\n}\n// 关闭预览\nfunction previewClose() {\n  uploadData.value.imageViewerVisible = false\n}\n// 移除\nfunction remove() {\n  emits('update:url', '')\n}\nconst handleBeforeUpload: UploadProps['beforeUpload'] = (file) => {\n  const fileName = file.name.split('.')\n  const fileExt = fileName.at(-1) ?? ''\n  const isTypeOk = exts.value.includes(fileExt)\n  const isSizeOk = file.size / 1024 / 1024 < props.size\n\n  if (!isTypeOk) {\n    ElMessage.error(`上传图片只支持${exts.value.join(' / ')}格式！`)\n  }\n\n  else if (!isSizeOk) {\n    ElMessage.error(`上传图片大小不能超过 ${props.size}MB！`)\n  }\n  else {\n    uploadData.value.progress.preview = URL.createObjectURL(file)\n  }\n\n  return isTypeOk && isSizeOk && (!props.beforeUpload || props.beforeUpload(file))\n}\nconst onProgress: UploadProps['onProgress'] = (file) => {\n  uploadData.value.progress.percent = ~~file.percent\n}\nconst onSuccess: UploadProps['onSuccess'] = (...res) => {\n  uploadData.value.progress.preview = ''\n  uploadData.value.progress.percent = 0\n  emits('onSuccess', ...res)\n}\n</script>\n\n<template>\n  <div :class=\"ns.e('upload-container')\">\n    <el-upload\n      :show-file-list=\"false\"\n      :headers=\"headers\"\n      :action=\"action\"\n      :data=\"data\"\n      :name=\"name\"\n      :before-upload=\"handleBeforeUpload\"\n      :on-progress=\"onProgress\"\n      :on-success=\"onSuccess\"\n      drag\n      :accept=\"accept\"\n      :class=\"ns.e('image-upload')\"\n    >\n      <el-image\n        v-if=\"url === ''\"\n        :src=\"url === '' ? placeholder : url\"\n        :style=\"`width:${width}px;height:${height}px;`\"\n        fit=\"fill\"\n      >\n        <template #error>\n          <div class=\"image-slot\" :style=\"`width:${width}px;height:${height}px;`\">\n            <el-icon>\n              <Plus />\n            </el-icon>\n            <p>\n              {{ placeholder }}\n            </p>\n          </div>\n        </template>\n      </el-image>\n      <div v-else class=\"image\">\n        <el-image\n          :src=\"url\"\n          :style=\"`width:${width}px;height:${height}px;`\"\n          fit=\"fill\"\n        />\n        <div class=\"mask\">\n          <div class=\"actions\">\n            <span title=\"预览\" @click.stop=\"preview\">\n              <el-icon><ZoomIn /></el-icon>\n            </span>\n            <span title=\"移除\" @click.stop=\"remove\">\n              <el-icon>\n                <Delete />\n              </el-icon>\n            </span>\n          </div>\n        </div>\n      </div>\n      <div\n        v-show=\"url === '' && uploadData.progress.percent\"\n        class=\"progress\"\n        :style=\"`width:${width}px;height:${height}px;`\"\n      >\n        <el-image\n          :src=\"uploadData.progress.preview\"\n          :style=\"`width:${width}px;height:${height}px;`\"\n          fit=\"fill\"\n        />\n        <el-progress\n          type=\"circle\"\n          :width=\"Math.min(width, height) * 0.8\"\n          :percentage=\"uploadData.progress.percent\"\n        />\n      </div>\n    </el-upload>\n    <div v-if=\"!notip\" class=\"el-upload__tip-text\">\n      <div style=\"display: inline-block;\">\n        {{ tipText || `上传图片支持 ${exts.join(' / ')} 格式，且图片大小不超过 ${size}MB，建议图片尺寸为 ${width}*${height}` }}\n      </div>\n    </div>\n    <el-image-viewer\n      v-if=\"uploadData.imageViewerVisible\"\n      :url-list=\"[url]\"\n      teleported\n      @close=\"previewClose\"\n    />\n  </div>\n</template>\n"],"names":["props","__props","emits","__emit","ns","useNamespace","uploadData","ref","imageViewerVisible","progress","preview","percent","exts","computed","accept","split","map","ext","pop","value","previewClose","remove","handleBeforeUpload","file","fileExt","name","at","isTypeOk","includes","isSizeOk","size","URL","createObjectURL","ElMessage","error","join","beforeUpload","onProgress","onSuccess","res"],"mappings":"w/BAQA,MAAMA,EAAQC,EA2BRC,EAAQC,EAWRC,EAAKC,eAAa,gBAElBC,EAAaC,EAAAA,IAAI,CACrBC,oBAAoB,EACpBC,SAAU,CACRC,QAAS,GACTC,QAAS,KAIPC,EAAOC,EAAAA,UAAS,IACbb,EAAMc,OAAOC,MAAM,KAAKC,KAAWC,GAAAA,EAAIF,MAAM,KAAKG,UAI3D,SAASR,IACPJ,EAAWa,MAAMX,oBAAqB,CAAA,CAGxC,SAASY,IACPd,EAAWa,MAAMX,oBAAqB,CAAA,CAGxC,SAASa,IACPnB,EAAM,aAAc,GAAE,CAElB,MAAAoB,EAAmDC,IACvD,MACMC,EADWD,EAAKE,KAAKV,MAAM,KACRW,IAAG,IAAO,GAC7BC,EAAWf,EAAKO,MAAMS,SAASJ,GAC/BK,EAAWN,EAAKO,KAAO,KAAO,KAAO9B,EAAM8B,KAajD,OAXKH,EAIKE,EAIRvB,EAAWa,MAAMV,SAASC,QAAUqB,IAAIC,gBAAgBT,GAHxDU,EAAAA,UAAUC,MAAM,cAAclC,EAAM8B,WAJpCG,YAAUC,MAAM,UAAUtB,EAAKO,MAAMgB,KAAK,aAUrCR,GAAYE,KAAc7B,EAAMoC,cAAgBpC,EAAMoC,aAAab,GAAI,EAE1Ec,EAAyCd,IAC7CjB,EAAWa,MAAMV,SAASE,UAAYY,EAAKZ,OAAA,EAEvC2B,EAAsC,IAAIC,KACnCjC,EAAAa,MAAMV,SAASC,QAAU,GACzBJ,EAAAa,MAAMV,SAASE,QAAU,EAC9BT,EAAA,eAAgBqC,EAAG"}

package/lib/src/image-upload/src/image-upload.vue2.js

@@ -1,10 +1,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var imageUpload_vue_vue_type_script_setup_true_lang = require('./image-upload.vue.js');
-
-
-
-exports.default = imageUpload_vue_vue_type_script_setup_true_lang.default;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./image-upload.vue.js");exports.default=e.default;
 //# sourceMappingURL=image-upload.vue2.js.map

package/lib/src/image-upload/src/image-upload.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-upload.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"image-upload.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/lib/src/make-installer.js

@@ -1,18 +1,2 @@
-'use strict';
-
-var _package = require('../package.json.js');
-
-function makeInstaller(components) {
-  const install = app => {
-    for (const n in components) {
-      app.use(components[n]);
-    }
-  };
-  return {
-    version: _package.version,
-    install
-  };
-}
-
-exports.makeInstaller = makeInstaller;
+"use strict";var e=require("../package.json.js");exports.makeInstaller=function(r){return{version:e.version,install:e=>{for(const s in r)e.use(r[s])}}};
 //# sourceMappingURL=make-installer.js.map

package/lib/src/make-installer.js.map

@@ -1 +1 @@
-{"version":3,"file":"make-installer.js","sources":["../../../../packages/components/src/make-installer.ts"],"sourcesContent":["import type { Plugin } from 'vue'\nimport { version } from '../package.json'\n\nfunction makeInstaller(components: {\n  [key: number]: Plugin\n}) {\n  const install = (app: any) => {\n    for (const n in components) {\n      app.use(components[n])\n    }\n  }\n\n  return {\n    version,\n    install,\n  }\n}\n\nexport { makeInstaller }\n"],"names":["makeInstaller","components","install","app","n","use","version"],"mappings":";;;;AAGA,SAASA,cAAcC,UAEpB,EAAA;EACK,MAAAC,OAAA,GAAWC,GAAa,IAAA;AAC5B,IAAA,KAAA,MAAWC,KAAKH,UAAY,EAAA;AACtBE,MAAAA,GAAA,CAAAE,GAAA,CAAIJ,UAAW,CAAAG,CAAC,CAAC,CAAA;AACvB;GACF;EAEO,OAAA;aACLE,gBAAA;AACAJ,IAAAA;GACF;AACF;;;;"}
+{"version":3,"file":"make-installer.js","sources":["../../../../packages/components/src/make-installer.ts"],"sourcesContent":["import type { Plugin } from 'vue'\nimport { version } from '../package.json'\n\nfunction makeInstaller(components: {\n  [key: number]: Plugin\n}) {\n  const install = (app: any) => {\n    for (const n in components) {\n      app.use(components[n])\n    }\n  }\n\n  return {\n    version,\n    install,\n  }\n}\n\nexport { makeInstaller }\n"],"names":["components","version","install","app","n","use"],"mappings":"uEAGA,SAAuBA,GASd,MAAA,SACLC,EAAAA,QACAC,QAReC,IACf,IAAA,MAAWC,KAAKJ,EACVG,EAAAE,IAAIL,EAAWI,GACrB,EAOJ"}

package/lib/src/photo-crop-tool/index.js

@@ -1,12 +1,2 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var withInstall = require('../withInstall.js');
-var photoCropTool_vue_vue_type_script_setup_true_lang = require('./src/photo-crop-tool.vue.js');
-
-const QxsPhotoCropTool = withInstall.withInstall(photoCropTool_vue_vue_type_script_setup_true_lang.default);
-
-exports.QxsPhotoCropTool = QxsPhotoCropTool;
-exports.default = QxsPhotoCropTool;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../withInstall.js"),t=require("./src/photo-crop-tool.vue.js");const o=e.withInstall(t.default);exports.QxsPhotoCropTool=o,exports.default=o;
 //# sourceMappingURL=index.js.map

package/lib/src/photo-crop-tool/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/components/src/photo-crop-tool/index.ts"],"sourcesContent":["import { withInstall } from '../withInstall'\nimport component from './src/photo-crop-tool.vue'\n\nconst QxsPhotoCropTool = withInstall(component)\n\nexport {\n  QxsPhotoCropTool,\n}\n\nexport default QxsPhotoCropTool\n"],"names":["QxsPhotoCropTool","withInstall","component"],"mappings":";;;;;;;AAGA,MAAMA,gBAAA,GAAmBC,wBAAYC,yDAAS;;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/src/photo-crop-tool/index.ts"],"sourcesContent":["import { withInstall } from '../withInstall'\nimport component from './src/photo-crop-tool.vue'\n\nconst QxsPhotoCropTool = withInstall(component)\n\nexport {\n  QxsPhotoCropTool,\n}\n\nexport default QxsPhotoCropTool\n"],"names":["QxsPhotoCropTool","withInstall","component","default"],"mappings":"iJAGA,MAAMA,EAAmBC,cAAYC,EAASC"}

package/lib/src/photo-crop-tool/src/composables.js

@@ -1,60 +1,2 @@
-'use strict';
-
-var vue = require('vue');
-
-function useCanvas(canvasElement) {
-  const context = vue.ref(null);
-  if (canvasElement) {
-    context.value = canvasElement.getContext("2d");
-  }
-  const clearCanvas = () => {
-    if (context.value) {
-      context.value.clearRect(0, 0, canvasElement.width, canvasElement.height);
-    }
-  };
-  const drawColor = (x, y, width, height, color) => {
-    if (context.value) {
-      context.value.fillStyle = color;
-      context.value.fillRect(x, y, width, height);
-    }
-  };
-  const drawImage = (image, x, y, width, height) => {
-    context.value.drawImage(image, x, y, width, height);
-  };
-  const cropCanvas = (x, y, width, height) => {
-    return new Promise(resolve => {
-      if (context.value) {
-        const croppedCanvas = document.createElement("canvas");
-        croppedCanvas.width = width;
-        croppedCanvas.height = height;
-        const croppedContext = croppedCanvas.getContext("2d");
-        if (croppedContext) {
-          croppedContext.drawImage(canvasElement, x, y, width, height, 0, 0, width, height);
-          croppedCanvas.toBlob(blob => {
-            if (blob) {
-              const file = new File([blob], "cropped_image.png", {
-                type: "image/png"
-              });
-              resolve(file);
-            } else {
-              resolve(null);
-            }
-          }, "image/png");
-        } else {
-          resolve(null);
-        }
-      } else {
-        resolve(null);
-      }
-    });
-  };
-  return {
-    clearCanvas,
-    drawColor,
-    drawImage,
-    cropCanvas
-  };
-}
-
-exports.useCanvas = useCanvas;
+"use strict";var e=require("vue");exports.useCanvas=function(a){const l=e.ref(null);return a&&(l.value=a.getContext("2d")),{clearCanvas:()=>{l.value&&l.value.clearRect(0,0,a.width,a.height)},drawColor:(e,a,t,n,r)=>{l.value&&(l.value.fillStyle=r,l.value.fillRect(e,a,t,n))},drawImage:(e,a,t,n,r)=>{l.value.drawImage(e,a,t,n,r)},cropCanvas:(e,t,n,r)=>new Promise((u=>{if(l.value){const l=document.createElement("canvas");l.width=n,l.height=r;const i=l.getContext("2d");i?(i.drawImage(a,e,t,n,r,0,0,n,r),l.toBlob((e=>{if(e){const a=new File([e],"cropped_image.png",{type:"image/png"});u(a)}else u(null)}),"image/png")):u(null)}else u(null)}))}};
 //# sourceMappingURL=composables.js.map

package/lib/src/photo-crop-tool/src/composables.js.map

@@ -1 +1 @@
-{"version":3,"file":"composables.js","sources":["../../../../../../packages/components/src/photo-crop-tool/src/composables.ts"],"sourcesContent":["// useCanvas.ts\nimport type { Ref } from 'vue'\n\nexport function useCanvas(canvasElement: HTMLCanvasElement) {\n  const context: Ref<CanvasRenderingContext2D | null> = ref(null)\n\n  if (canvasElement) {\n    context.value = canvasElement.getContext('2d')\n  }\n\n  const clearCanvas = () => {\n    if (context.value) {\n      context.value.clearRect(0, 0, canvasElement.width, canvasElement.height)\n    }\n  }\n\n  const drawColor = (x: number, y: number, width: number, height: number, color: string) => {\n    if (context.value) {\n      context.value.fillStyle = color\n      context.value.fillRect(x, y, width, height)\n    }\n  }\n\n  const drawImage = (image: HTMLImageElement, x: number, y: number, width: number, height: number) => {\n    context.value!.drawImage(image, x, y, width, height)\n  }\n\n  const cropCanvas = (x: number, y: number, width: number, height: number): Promise<File | null> => {\n    return new Promise((resolve) => {\n      if (context.value) {\n        const croppedCanvas = document.createElement('canvas')\n        croppedCanvas.width = width\n        croppedCanvas.height = height\n        const croppedContext = croppedCanvas.getContext('2d')\n        if (croppedContext) {\n          croppedContext.drawImage(canvasElement, x, y, width, height, 0, 0, width, height)\n          croppedCanvas.toBlob((blob) => {\n            if (blob) {\n              const file = new File([blob], 'cropped_image.png', { type: 'image/png' })\n              resolve(file)\n            }\n            else {\n              resolve(null)\n            }\n          }, 'image/png')\n        }\n        else {\n          resolve(null)\n        }\n      }\n      else {\n        resolve(null)\n      }\n    })\n  }\n\n  return {\n    clearCanvas,\n    drawColor,\n    drawImage,\n    cropCanvas,\n  }\n}\n"],"names":["useCanvas","canvasElement","context","ref","value","getContext","clearCanvas","clearRect","width","height","drawColor","x","y","color","fillStyle","fillRect","drawImage","image","cropCanvas","Promise","resolve","croppedCanvas","document","createElement","croppedContext","toBlob","blob","file","File","type"],"mappings":";;;;AAGO,SAASA,UAAUC,aAAkC,EAAA;AACpD,EAAA,MAAAC,OAAA,GAAgDC,QAAI,IAAI,CAAA;AAE9D,EAAA,IAAIF,aAAe,EAAA;IACTC,OAAA,CAAAE,KAAA,GAAQH,aAAc,CAAAI,UAAA,CAAW,IAAI,CAAA;AAC/C;EAEA,MAAMC,cAAcA,MAAM;IACxB,IAAIJ,QAAQE,KAAO,EAAA;AACjBF,MAAAA,OAAA,CAAQE,MAAMG,SAAU,CAAA,CAAA,EAAG,GAAGN,aAAc,CAAAO,KAAA,EAAOP,cAAcQ,MAAM,CAAA;AACzE;GACF;AAEA,EAAA,MAAMC,YAAYA,CAACC,CAAA,EAAWC,CAAW,EAAAJ,KAAA,EAAeC,QAAgBI,KAAkB,KAAA;IACxF,IAAIX,QAAQE,KAAO,EAAA;AACjBF,MAAAA,OAAA,CAAQE,MAAMU,SAAY,GAAAD,KAAA;AAC1BX,MAAAA,OAAA,CAAQE,KAAM,CAAAW,QAAA,CAASJ,CAAG,EAAAC,CAAA,EAAGJ,OAAOC,MAAM,CAAA;AAC5C;GACF;AAEA,EAAA,MAAMO,YAAYA,CAACC,KAAA,EAAyBN,CAAW,EAAAC,CAAA,EAAWJ,OAAeC,MAAmB,KAAA;AAClGP,IAAAA,OAAA,CAAQE,MAAOY,SAAU,CAAAC,KAAA,EAAON,CAAG,EAAAC,CAAA,EAAGJ,OAAOC,MAAM,CAAA;GACrD;EAEA,MAAMS,UAAa,GAAAA,CAACP,CAAW,EAAAC,CAAA,EAAWJ,OAAeC,MAAyC,KAAA;AACzF,IAAA,OAAA,IAAIU,OAAQ,CAACC,OAAY,IAAA;MAC9B,IAAIlB,QAAQE,KAAO,EAAA;AACX,QAAA,MAAAiB,aAAA,GAAgBC,QAAS,CAAAC,aAAA,CAAc,QAAQ,CAAA;QACrDF,aAAA,CAAcb,KAAQ,GAAAA,KAAA;QACtBa,aAAA,CAAcZ,MAAS,GAAAA,MAAA;AACjB,QAAA,MAAAe,cAAA,GAAiBH,aAAc,CAAAhB,UAAA,CAAW,IAAI,CAAA;AACpD,QAAA,IAAImB,cAAgB,EAAA;UACHA,cAAA,CAAAR,SAAA,CAAUf,eAAeU,CAAG,EAAAC,CAAA,EAAGJ,OAAOC,MAAQ,EAAA,CAAA,EAAG,CAAG,EAAAD,KAAA,EAAOC,MAAM,CAAA;AAClEY,UAAAA,aAAA,CAAAI,MAAA,CAAQC,IAAS,IAAA;AAC7B,YAAA,IAAIA,IAAM,EAAA;cACF,MAAAC,IAAA,GAAO,IAAIC,IAAA,CAAK,CAACF,IAAI,GAAG,mBAAqB,EAAA;AAAEG,gBAAAA,IAAM,EAAA;AAAY,eAAC,CAAA;cACxET,OAAA,CAAQO,IAAI,CAAA;AACd,aACK,MAAA;cACHP,OAAA,CAAQ,IAAI,CAAA;AACd;aACC,WAAW,CAAA;AAChB,SACK,MAAA;UACHA,OAAA,CAAQ,IAAI,CAAA;AACd;AACF,OACK,MAAA;QACHA,OAAA,CAAQ,IAAI,CAAA;AACd;AACF,KAAC,CAAA;GACH;EAEO,OAAA;IACLd,WAAA;IACAI,SAAA;IACAM,SAAA;AACAE,IAAAA;GACF;AACF;;;;"}
+{"version":3,"file":"composables.js","sources":["../../../../../../packages/components/src/photo-crop-tool/src/composables.ts"],"sourcesContent":["// useCanvas.ts\nimport type { Ref } from 'vue'\n\nexport function useCanvas(canvasElement: HTMLCanvasElement) {\n  const context: Ref<CanvasRenderingContext2D | null> = ref(null)\n\n  if (canvasElement) {\n    context.value = canvasElement.getContext('2d')\n  }\n\n  const clearCanvas = () => {\n    if (context.value) {\n      context.value.clearRect(0, 0, canvasElement.width, canvasElement.height)\n    }\n  }\n\n  const drawColor = (x: number, y: number, width: number, height: number, color: string) => {\n    if (context.value) {\n      context.value.fillStyle = color\n      context.value.fillRect(x, y, width, height)\n    }\n  }\n\n  const drawImage = (image: HTMLImageElement, x: number, y: number, width: number, height: number) => {\n    context.value!.drawImage(image, x, y, width, height)\n  }\n\n  const cropCanvas = (x: number, y: number, width: number, height: number): Promise<File | null> => {\n    return new Promise((resolve) => {\n      if (context.value) {\n        const croppedCanvas = document.createElement('canvas')\n        croppedCanvas.width = width\n        croppedCanvas.height = height\n        const croppedContext = croppedCanvas.getContext('2d')\n        if (croppedContext) {\n          croppedContext.drawImage(canvasElement, x, y, width, height, 0, 0, width, height)\n          croppedCanvas.toBlob((blob) => {\n            if (blob) {\n              const file = new File([blob], 'cropped_image.png', { type: 'image/png' })\n              resolve(file)\n            }\n            else {\n              resolve(null)\n            }\n          }, 'image/png')\n        }\n        else {\n          resolve(null)\n        }\n      }\n      else {\n        resolve(null)\n      }\n    })\n  }\n\n  return {\n    clearCanvas,\n    drawColor,\n    drawImage,\n    cropCanvas,\n  }\n}\n"],"names":["canvasElement","context","ref","value","getContext","clearCanvas","clearRect","width","height","drawColor","x","y","color","fillStyle","fillRect","drawImage","image","cropCanvas","Promise","resolve","croppedCanvas","document","createElement","croppedContext","toBlob","blob","file","File","type"],"mappings":"oDAGO,SAAmBA,GAClB,MAAAC,EAAgDC,MAAI,MAoDnD,OAlDHF,IACMC,EAAAE,MAAQH,EAAcI,WAAW,OAiDpC,CACLC,YA/CkBA,KACdJ,EAAQE,OACVF,EAAQE,MAAMG,UAAU,EAAG,EAAGN,EAAcO,MAAOP,EAAcQ,OACnE,EA6CAC,UA1CgBA,CAACC,EAAWC,EAAWJ,EAAeC,EAAgBI,KAClEX,EAAQE,QACVF,EAAQE,MAAMU,UAAYD,EAC1BX,EAAQE,MAAMW,SAASJ,EAAGC,EAAGJ,EAAOC,GACtC,EAuCAO,UApCgBA,CAACC,EAAyBN,EAAWC,EAAWJ,EAAeC,KAC/EP,EAAQE,MAAOY,UAAUC,EAAON,EAAGC,EAAGJ,EAAOC,EAAM,EAoCnDS,WAjCiBA,CAACP,EAAWC,EAAWJ,EAAeC,IAChD,IAAIU,SAASC,IAClB,GAAIlB,EAAQE,MAAO,CACX,MAAAiB,EAAgBC,SAASC,cAAc,UAC7CF,EAAcb,MAAQA,EACtBa,EAAcZ,OAASA,EACjB,MAAAe,EAAiBH,EAAchB,WAAW,MAC5CmB,GACaA,EAAAR,UAAUf,EAAeU,EAAGC,EAAGJ,EAAOC,EAAQ,EAAG,EAAGD,EAAOC,GAC5DY,EAAAI,QAAQC,IACpB,GAAIA,EAAM,CACF,MAAAC,EAAO,IAAIC,KAAK,CAACF,GAAO,oBAAqB,CAAEG,KAAM,cAC3DT,EAAQO,EACV,MAEEP,EAAQ,KACV,GACC,cAGHA,EAAQ,KAEZ,MAEEA,EAAQ,KACV,IAUN"}