@qxs-bns/components 0.0.21 → 0.0.23

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

@@ -1,242 +1,2 @@
-import '../../../node_modules/.pnpm/element-plus@2.9.6_vue@3.5.13_typescript@5.8.2_/node_modules/element-plus/theme-chalk/src/base.scss.js';
-import '../../../node_modules/.pnpm/element-plus@2.9.6_vue@3.5.13_typescript@5.8.2_/node_modules/element-plus/theme-chalk/src/image-viewer.scss.js';
-import '../../../node_modules/.pnpm/element-plus@2.9.6_vue@3.5.13_typescript@5.8.2_/node_modules/element-plus/theme-chalk/src/upload.scss.js';
-import '../../../node_modules/.pnpm/element-plus@2.9.6_vue@3.5.13_typescript@5.8.2_/node_modules/element-plus/theme-chalk/src/progress.scss.js';
-import '../../../node_modules/.pnpm/element-plus@2.9.6_vue@3.5.13_typescript@5.8.2_/node_modules/element-plus/theme-chalk/src/image.scss.js';
-import { defineComponent, ref, computed, createElementBlock, openBlock, normalizeClass, unref, createVNode, createCommentVNode, createBlock, withCtx, withDirectives, normalizeStyle, createElementVNode, toDisplayString, withModifiers, vShow } from 'vue';
-import { Plus, ZoomIn, Delete } from '@element-plus/icons-vue';
-import { useNamespace } from '@qxs-bns/hooks';
-import '../../../node_modules/.pnpm/element-plus@2.9.6_vue@3.5.13_typescript@5.8.2_/node_modules/element-plus/theme-chalk/src/badge.scss.js';
-import '../../../node_modules/.pnpm/element-plus@2.9.6_vue@3.5.13_typescript@5.8.2_/node_modules/element-plus/theme-chalk/src/message.scss.js';
-import { ElUpload } from '../../../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';
-import { ElImage } from '../../../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';
-import { ElIcon } from '../../../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';
-import { ElProgress } from '../../../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';
-import { ElImageViewer } from '../../../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';
-import { ElMessage } from '../../../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__ */ 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 = useNamespace("image-upload");
-    const uploadData = ref({
-      imageViewerVisible: false,
-      progress: {
-        preview: "",
-        percent: 0
-      }
-    });
-    const exts = 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) {
-        ElMessage.error(`\u4E0A\u4F20\u56FE\u7247\u53EA\u652F\u6301${exts.value.join(" / ")}\u683C\u5F0F\uFF01`);
-      } else if (!isSizeOk) {
-        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 = ElIcon;
-      const _component_el_image = ElImage;
-      const _component_el_progress = ElProgress;
-      const _component_el_upload = ElUpload;
-      const _component_el_image_viewer = ElImageViewer;
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          class: normalizeClass(unref(ns).e("upload-container"))
-        },
-        [
-          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: normalizeClass(unref(ns).e("image-upload"))
-          }, {
-            default: withCtx(() => [
-              _ctx.url === "" ? (openBlock(), createBlock(_component_el_image, {
-                key: 0,
-                src: _ctx.url === "" ? _ctx.placeholder : _ctx.url,
-                style: normalizeStyle(`width:${_ctx.width}px;height:${_ctx.height}px;`),
-                fit: "fill"
-              }, {
-                error: withCtx(() => [
-                  createElementVNode(
-                    "div",
-                    {
-                      class: "image-slot",
-                      style: normalizeStyle(`width:${_ctx.width}px;height:${_ctx.height}px;`)
-                    },
-                    [
-                      createVNode(_component_el_icon, null, {
-                        default: withCtx(() => [
-                          createVNode(unref(Plus))
-                        ]),
-                        _: 1
-                        /* STABLE */
-                      }),
-                      createElementVNode(
-                        "p",
-                        null,
-                        toDisplayString(_ctx.placeholder),
-                        1
-                        /* TEXT */
-                      )
-                    ],
-                    4
-                    /* STYLE */
-                  )
-                ]),
-                _: 1
-                /* STABLE */
-              }, 8, ["src", "style"])) : (openBlock(), createElementBlock("div", _hoisted_1, [
-                createVNode(_component_el_image, {
-                  src: _ctx.url,
-                  style: normalizeStyle(`width:${_ctx.width}px;height:${_ctx.height}px;`),
-                  fit: "fill"
-                }, null, 8, ["src", "style"]),
-                createElementVNode("div", _hoisted_2, [
-                  createElementVNode("div", _hoisted_3, [
-                    createElementVNode("span", {
-                      title: "\u9884\u89C8",
-                      onClick: withModifiers(preview, ["stop"])
-                    }, [
-                      createVNode(_component_el_icon, null, {
-                        default: withCtx(() => [
-                          createVNode(unref(ZoomIn))
-                        ]),
-                        _: 1
-                        /* STABLE */
-                      })
-                    ]),
-                    createElementVNode("span", {
-                      title: "\u79FB\u9664",
-                      onClick: withModifiers(remove, ["stop"])
-                    }, [
-                      createVNode(_component_el_icon, null, {
-                        default: withCtx(() => [
-                          createVNode(unref(Delete))
-                        ]),
-                        _: 1
-                        /* STABLE */
-                      })
-                    ])
-                  ])
-                ])
-              ])),
-              withDirectives(createElementVNode(
-                "div",
-                {
-                  class: "progress",
-                  style: normalizeStyle(`width:${_ctx.width}px;height:${_ctx.height}px;`)
-                },
-                [
-                  createVNode(_component_el_image, {
-                    src: unref(uploadData).progress.preview,
-                    style: normalizeStyle(`width:${_ctx.width}px;height:${_ctx.height}px;`),
-                    fit: "fill"
-                  }, null, 8, ["src", "style"]),
-                  createVNode(_component_el_progress, {
-                    type: "circle",
-                    width: Math.min(_ctx.width, _ctx.height) * 0.8,
-                    percentage: unref(uploadData).progress.percent
-                  }, null, 8, ["width", "percentage"])
-                ],
-                4
-                /* STYLE */
-              ), [
-                [vShow, _ctx.url === "" && unref(uploadData).progress.percent]
-              ])
-            ]),
-            _: 1
-            /* STABLE */
-          }, 8, ["headers", "action", "data", "name", "accept", "class"]),
-          !_ctx.notip ? (openBlock(), createElementBlock("div", _hoisted_4, [
-            createElementVNode(
-              "div",
-              _hoisted_5,
-              toDisplayString(_ctx.tipText || `\u4E0A\u4F20\u56FE\u7247\u652F\u6301 ${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 */
-            )
-          ])) : createCommentVNode("v-if", true),
-          unref(uploadData).imageViewerVisible ? (openBlock(), createBlock(_component_el_image_viewer, {
-            key: 1,
-            "url-list": [_ctx.url],
-            teleported: "",
-            onClose: previewClose
-          }, null, 8, ["url-list"])) : createCommentVNode("v-if", true)
-        ],
-        2
-        /* CLASS */
-      );
-    };
-  }
-});
-
-export { _sfc_main as default };
+import{ElUpload as e,ElImage as t,ElIcon as i,ElProgress as r,ElImageViewer as l,ElMessage as s}from"element-plus/es";import{defineComponent as a,ref as p,computed as u,createElementBlock as o,openBlock as d,normalizeClass as n,unref as c,createVNode as h,createCommentVNode as g,createBlock as m,withCtx as f,withDirectives as y,normalizeStyle as v,createElementVNode as w,toDisplayString as x,withModifiers as $,vShow as b}from"vue";import{Plus as q,ZoomIn as k,Delete as _}from"@element-plus/icons-vue";import{useNamespace as S}from"@qxs-bns/hooks";const V={key:1,class:"image"},U={class:"mask"},j={class:"actions"},z={key:0,class:"el-upload__tip-text"},B={style:{display:"inline-block"}};var C=a({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(a,{emit:C}){const M=a,N=C,L=S("image-upload"),R=p({imageViewerVisible:!1,progress:{preview:"",percent:0}}),T=u((()=>M.accept.split(",").map((e=>e.split("/").pop()))));function I(){R.value.imageViewerVisible=!0}function O(){R.value.imageViewerVisible=!1}function Q(){N("update:url","")}const A=e=>{const t=e.name.split(".").at(-1)??"",i=T.value.includes(t),r=e.size/1024/1024<M.size;return i?r?R.value.progress.preview=URL.createObjectURL(e):s.error(`上传图片大小不能超过 ${M.size}MB！`):s.error(`上传图片只支持${T.value.join(" / ")}格式！`),i&&r&&(!M.beforeUpload||M.beforeUpload(e))},D=e=>{R.value.progress.percent=~~e.percent},E=(...e)=>{R.value.progress.preview="",R.value.progress.percent=0,N("onSuccess",...e)};return(s,a)=>{const p=i,u=t,S=r,C=e,M=l;return d(),o("div",{class:n(c(L).e("upload-container"))},[h(C,{"show-file-list":!1,headers:s.headers,action:s.action,data:s.data,name:s.name,"before-upload":A,"on-progress":D,"on-success":E,drag:"",accept:s.accept,class:n(c(L).e("image-upload"))},{default:f((()=>[""===s.url?(d(),m(u,{key:0,src:""===s.url?s.placeholder:s.url,style:v(`width:${s.width}px;height:${s.height}px;`),fit:"fill"},{error:f((()=>[w("div",{class:"image-slot",style:v(`width:${s.width}px;height:${s.height}px;`)},[h(p,null,{default:f((()=>[h(c(q))])),_:1}),w("p",null,x(s.placeholder),1)],4)])),_:1},8,["src","style"])):(d(),o("div",V,[h(u,{src:s.url,style:v(`width:${s.width}px;height:${s.height}px;`),fit:"fill"},null,8,["src","style"]),w("div",U,[w("div",j,[w("span",{title:"预览",onClick:$(I,["stop"])},[h(p,null,{default:f((()=>[h(c(k))])),_:1})]),w("span",{title:"移除",onClick:$(Q,["stop"])},[h(p,null,{default:f((()=>[h(c(_))])),_:1})])])])])),y(w("div",{class:"progress",style:v(`width:${s.width}px;height:${s.height}px;`)},[h(u,{src:c(R).progress.preview,style:v(`width:${s.width}px;height:${s.height}px;`),fit:"fill"},null,8,["src","style"]),h(S,{type:"circle",width:.8*Math.min(s.width,s.height),percentage:c(R).progress.percent},null,8,["width","percentage"])],4),[[b,""===s.url&&c(R).progress.percent]])])),_:1},8,["headers","action","data","name","accept","class"]),s.notip?g("v-if",!0):(d(),o("div",z,[w("div",B,x(s.tipText||`上传图片支持 ${c(T).join(" / ")} 格式，且图片大小不超过 ${s.size}MB，建议图片尺寸为 ${s.width}*${s.height}`),1)])),c(R).imageViewerVisible?(d(),m(M,{key:1,"url-list":[s.url],teleported:"",onClose:O},null,8,["url-list"])):g("v-if",!0)],2)}}});export{C as default};
 //# sourceMappingURL=image-upload.vue.js.map

package/es/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":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,IAAA,MAAM,KAAQ,GAAA,OAAA;AA2Bd,IAAA,MAAM,KAAQ,GAAA,MAAA;AAWd,IAAM,MAAA,EAAA,GAAK,aAAa,cAAc,CAAA;AAEtC,IAAA,MAAM,aAAa,GAAI,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,GAAO,SAAS,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,QAAA,SAAA,CAAU,MAAM,CAAU,0CAAA,EAAA,IAAA,CAAK,MAAM,IAAK,CAAA,KAAK,CAAC,CAAK,kBAAA,CAAA,CAAA;AAAA,OACvD,MAAA,IAES,CAAC,QAAU,EAAA;AAClB,QAAA,SAAA,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":"y1CAQA,MAAMA,EAAQC,EA2BRC,EAAQC,EAWRC,EAAKC,EAAa,gBAElBC,EAAaC,EAAI,CACrBC,oBAAoB,EACpBC,SAAU,CACRC,QAAS,GACTC,QAAS,KAIPC,EAAOC,GAAS,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,EAAUC,MAAM,cAAclC,EAAM8B,WAJpCG,EAAUC,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/es/src/image-upload/src/image-upload.vue2.js

@@ -1,6 +1,2 @@
-import _sfc_main from './image-upload.vue.js';
-
-
-
-export { _sfc_main as default };
+import a from"./image-upload.vue.js";export{a as default};
 //# sourceMappingURL=image-upload.vue2.js.map

package/es/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/es/src/make-installer.js

@@ -1,16 +1,2 @@
-import { version } from '../package.json.js';
-
-function makeInstaller(components) {
-  const install = app => {
-    for (const n in components) {
-      app.use(components[n]);
-    }
-  };
-  return {
-    version,
-    install
-  };
-}
-
-export { makeInstaller };
+import{version as n}from"../package.json.js";function o(o){return{version:n,install:n=>{for(const r in o)n.use(o[r])}}}export{o as makeInstaller};
 //# sourceMappingURL=make-installer.js.map

package/es/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;IACLE,OAAA;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":["makeInstaller","components","version","install","app","n","use"],"mappings":"6CAGA,SAASA,EAAcC,GASd,MAAA,CACLC,UACAC,QAReC,IACf,IAAA,MAAWC,KAAKJ,EACVG,EAAAE,IAAIL,EAAWI,GACrB,EAOJ"}

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

@@ -1,7 +1,2 @@
-import { withInstall } from '../withInstall.js';
-import _sfc_main from './src/photo-crop-tool.vue.js';
-
-const QxsPhotoCropTool = withInstall(_sfc_main);
-
-export { QxsPhotoCropTool, QxsPhotoCropTool as default };
+import{withInstall as o}from"../withInstall.js";import t from"./src/photo-crop-tool.vue.js";const r=o(t);export{r as QxsPhotoCropTool,r as default};
 //# sourceMappingURL=index.js.map

package/es/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,YAAYC,SAAS;;;;"}
+{"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":"4FAGA,MAAMA,EAAmBC,EAAYC"}

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

@@ -1,58 +1,2 @@
-import { ref } from 'vue';
-
-function useCanvas(canvasElement) {
-  const context = 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
-  };
-}
-
-export { useCanvas };
+import{ref as e}from"vue";function l(l){const a=e(null);l&&(a.value=l.getContext("2d"));return{clearCanvas:()=>{a.value&&a.value.clearRect(0,0,l.width,l.height)},drawColor:(e,l,t,n,o)=>{a.value&&(a.value.fillStyle=o,a.value.fillRect(e,l,t,n))},drawImage:(e,l,t,n,o)=>{a.value.drawImage(e,l,t,n,o)},cropCanvas:(e,t,n,o)=>new Promise((r=>{if(a.value){const a=document.createElement("canvas");a.width=n,a.height=o;const u=a.getContext("2d");u?(u.drawImage(l,e,t,n,o,0,0,n,o),a.toBlob((e=>{if(e){const l=new File([e],"cropped_image.png",{type:"image/png"});r(l)}else r(null)}),"image/png")):r(null)}else r(null)}))}}export{l as useCanvas};
 //# sourceMappingURL=composables.js.map

package/es/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,IAAI,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":["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":"0BAGO,SAASA,EAAUC,GAClB,MAAAC,EAAgDC,EAAI,MAEtDF,IACMC,EAAAE,MAAQH,EAAcI,WAAW,OAiDpC,MAAA,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"}