@qxs-bns/components 0.0.15 → 0.0.16

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

@@ -1,177 +1,10 @@
-/* empty css                                                       */
-/* empty css                                                               */
-/* empty css                                                         */
-/* empty css                                                           */
-/* empty css                                                        */
-import { defineComponent as I, ref as M, computed as D, createElementBlock as h, openBlock as p, normalizeClass as w, unref as i, createVNode as o, createCommentVNode as v, createBlock as y, withCtx as n, withDirectives as O, normalizeStyle as d, createElementVNode as s, toDisplayString as $, withModifiers as k, vShow as P } from "vue";
-import { Plus as T, ZoomIn as L, Delete as R } from "@element-plus/icons-vue";
-import { useNamespace as Q } from "../../../packages/hooks/src/use-namespace.js";
-/* empty css                                                        */
-/* empty css                                                          */
-import { ElUpload as Z } from "../../../_virtual/element-plus/es/components/upload/index.js";
-import { ElImage as q } from "../../../_virtual/element-plus/es/components/image/index.js";
-import { ElIcon as A } from "../../../_virtual/element-plus/es/components/icon/index.js";
-import { ElProgress as F } from "../../../_virtual/element-plus/es/components/progress/index.js";
-import { ElImageViewer as G } from "../../../_virtual/element-plus/es/components/image-viewer/index.js";
-import { ElMessage as V } from "../../../_virtual/element-plus/es/components/message/index.js";
-const H = {
-  key: 1,
-  class: "image"
-}, J = { class: "mask" }, K = { class: "actions" }, W = {
-  key: 0,
-  class: "el-upload__tip-text"
-}, X = { style: { display: "inline-block" } }, he = /* @__PURE__ */ I({
-  name: "QxsImageUpload",
-  __name: "image-upload",
-  props: {
-    action: {},
-    headers: {},
-    data: {},
-    name: { default: "file" },
-    url: { default: "" },
-    size: { default: 20 },
-    width: { default: 160 },
-    accept: { default: "image/jpeg,image/jpg,image/png,image/gif" },
-    height: { default: 90 },
-    placeholder: { default: "点击上传图片" },
-    notip: { type: Boolean, default: !1 },
-    tipText: {},
-    beforeUpload: {}
-  },
-  emits: ["update:url", "onSuccess"],
-  setup(b, { emit: E }) {
-    const r = b, g = E, f = Q("image-upload"), t = M({
-      imageViewerVisible: !1,
-      progress: {
-        preview: "",
-        percent: 0
-      }
-    }), u = D(() => r.accept.split(",").map((e) => e.split("/").pop()));
-    function _() {
-      t.value.imageViewerVisible = !0;
-    }
-    function z() {
-      t.value.imageViewerVisible = !1;
-    }
-    function C() {
-      g("update:url", "");
-    }
-    const U = (e) => {
-      var m;
-      const a = (m = e.name.split(".").at(-1)) != null ? m : "", l = u.value.includes(a), c = e.size / 1024 / 1024 < r.size;
-      return l ? c ? t.value.progress.preview = URL.createObjectURL(e) : V.error(`上传图片大小不能超过 ${r.size}MB！`) : V.error(`上传图片只支持${u.value.join(" / ")}格式！`), l && c && (!r.beforeUpload || r.beforeUpload(e));
-    }, B = (e) => {
-      t.value.progress.percent = ~~e.percent;
-    }, S = (...e) => {
-      t.value.progress.preview = "", t.value.progress.percent = 0, g("onSuccess", ...e);
-    };
-    return (e, N) => {
-      const a = A, l = q, c = F, m = Z, j = G;
-      return p(), h("div", {
-        class: w(i(f).e("upload-container"))
-      }, [
-        o(m, {
-          "show-file-list": !1,
-          headers: e.headers,
-          action: e.action,
-          data: e.data,
-          name: e.name,
-          "before-upload": U,
-          "on-progress": B,
-          "on-success": S,
-          drag: "",
-          accept: e.accept,
-          class: w(i(f).e("image-upload"))
-        }, {
-          default: n(() => [
-            e.url === "" ? (p(), y(l, {
-              key: 0,
-              src: e.url === "" ? e.placeholder : e.url,
-              style: d(`width:${e.width}px;height:${e.height}px;`),
-              fit: "fill"
-            }, {
-              error: n(() => [
-                s("div", {
-                  class: "image-slot",
-                  style: d(`width:${e.width}px;height:${e.height}px;`)
-                }, [
-                  o(a, null, {
-                    default: n(() => [
-                      o(i(T))
-                    ]),
-                    _: 1
-                  }),
-                  s("p", null, $(e.placeholder), 1)
-                ], 4)
-              ]),
-              _: 1
-            }, 8, ["src", "style"])) : (p(), h("div", H, [
-              o(l, {
-                src: e.url,
-                style: d(`width:${e.width}px;height:${e.height}px;`),
-                fit: "fill"
-              }, null, 8, ["src", "style"]),
-              s("div", J, [
-                s("div", K, [
-                  s("span", {
-                    title: "预览",
-                    onClick: k(_, ["stop"])
-                  }, [
-                    o(a, null, {
-                      default: n(() => [
-                        o(i(L))
-                      ]),
-                      _: 1
-                    })
-                  ]),
-                  s("span", {
-                    title: "移除",
-                    onClick: k(C, ["stop"])
-                  }, [
-                    o(a, null, {
-                      default: n(() => [
-                        o(i(R))
-                      ]),
-                      _: 1
-                    })
-                  ])
-                ])
-              ])
-            ])),
-            O(s("div", {
-              class: "progress",
-              style: d(`width:${e.width}px;height:${e.height}px;`)
-            }, [
-              o(l, {
-                src: i(t).progress.preview,
-                style: d(`width:${e.width}px;height:${e.height}px;`),
-                fit: "fill"
-              }, null, 8, ["src", "style"]),
-              o(c, {
-                type: "circle",
-                width: Math.min(e.width, e.height) * 0.8,
-                percentage: i(t).progress.percent
-              }, null, 8, ["width", "percentage"])
-            ], 4), [
-              [P, e.url === "" && i(t).progress.percent]
-            ])
-          ]),
-          _: 1
-        }, 8, ["headers", "action", "data", "name", "accept", "class"]),
-        e.notip ? v("", !0) : (p(), h("div", W, [
-          s("div", X, $(e.tipText || `上传图片支持 ${i(u).join(" / ")} 格式，且图片大小不超过 ${e.size}MB，建议图片尺寸为 ${e.width}*${e.height}`), 1)
-        ])),
-        i(t).imageViewerVisible ? (p(), y(j, {
-          key: 1,
-          "url-list": [e.url],
-          teleported: "",
-          onClose: z
-        }, null, 8, ["url-list"])) : v("", !0)
-      ], 2);
-    };
-  }
-});
-export {
-  he as default
-};
+'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;
 //# 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":["../../../../../../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\n<style scoped>/* layer: preflights */\n*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}\n/* layer: default */\n.inline-block{display:inline-block;}\n.px{padding-left:1rem;padding-right:1rem;}</style>"],"names":["props","__props","emits","__emit","ns","useNamespace","uploadData","ref","exts","computed","ext","preview","previewClose","remove","handleBeforeUpload","file","fileExt","_a","isTypeOk","isSizeOk","ElMessage","onProgress","onSuccess","res"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,UAAMA,IAAQC,GA2BRC,IAAQC,GAWRC,IAAKC,EAAa,cAAc,GAEhCC,IAAaC,EAAI;AAAA,MACrB,oBAAoB;AAAA,MACpB,UAAU;AAAA,QACR,SAAS;AAAA,QACT,SAAS;AAAA,MAAA;AAAA,IACX,CACD,GAEKC,IAAOC,EAAS,MACbT,EAAM,OAAO,MAAM,GAAG,EAAE,IAAI,CAAOU,MAAAA,EAAI,MAAM,GAAG,EAAE,IAAA,CAAK,CAC/D;AAGD,aAASC,IAAU;AACjB,MAAAL,EAAW,MAAM,qBAAqB;AAAA,IAAA;AAGxC,aAASM,IAAe;AACtB,MAAAN,EAAW,MAAM,qBAAqB;AAAA,IAAA;AAGxC,aAASO,IAAS;AAChB,MAAAX,EAAM,cAAc,EAAE;AAAA,IAAA;AAElB,UAAAY,IAAkD,CAACC,MAAS;;AAEhE,YAAMC,KAAUC,IADCF,EAAK,KAAK,MAAM,GAAG,EACX,GAAG,EAAE,MAAd,OAAAE,IAAmB,IAC7BC,IAAWV,EAAK,MAAM,SAASQ,CAAO,GACtCG,IAAWJ,EAAK,OAAO,OAAO,OAAOf,EAAM;AAEjD,aAAKkB,IAIKC,IAIRb,EAAW,MAAM,SAAS,UAAU,IAAI,gBAAgBS,CAAI,IAH5DK,EAAU,MAAM,cAAcpB,EAAM,IAAI,KAAK,IAJ7CoB,EAAU,MAAM,UAAUZ,EAAK,MAAM,KAAK,KAAK,CAAC,KAAK,GAUhDU,KAAYC,MAAa,CAACnB,EAAM,gBAAgBA,EAAM,aAAae,CAAI;AAAA,IAChF,GACMM,IAAwC,CAACN,MAAS;AACtD,MAAAT,EAAW,MAAM,SAAS,UAAU,CAAC,CAACS,EAAK;AAAA,IAC7C,GACMO,IAAsC,IAAIC,MAAQ;AAC3C,MAAAjB,EAAA,MAAM,SAAS,UAAU,IACzBA,EAAA,MAAM,SAAS,UAAU,GAC9BJ,EAAA,aAAa,GAAGqB,CAAG;AAAA,IAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"image-upload.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/lib/src/make-installer.js

@@ -1,14 +1,18 @@
-import { version as i } from "../package.json.js";
-function s(n) {
-  return {
-    version: i,
-    install: (r) => {
-      for (const t in n)
-        r.use(n[t]);
+'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
+  };
 }
-export {
-  s as makeInstaller
-};
+
+exports.makeInstaller = makeInstaller;
 //# 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","version","app","n"],"mappings":";AAGA,SAASA,EAAcC,GAEpB;AAOM,SAAA;AAAA,IACL,SAAAC;AAAA,IACA,SARc,CAACC,MAAa;AAC5B,iBAAWC,KAAKH;AACV,QAAAE,EAAA,IAAIF,EAAWG,CAAC,CAAC;AAAA,IAEzB;AAAA,EAKA;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","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;;;;"}

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

@@ -1,8 +1,12 @@
-import { withInstall as o } from "../withInstall.js";
-import t from "./src/photo-crop-tool.vue.js";
-const p = o(t);
-export {
-  p as QxsPhotoCropTool,
-  p as default
-};
+'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;
 //# 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":";;AAGM,MAAAA,IAAmBC,EAAYC,CAAS;"}
+{"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;;;;;"}

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

@@ -1,34 +1,58 @@
-import { ref as s } from "vue";
-function v(l) {
-  const e = s(null);
-  return l && (e.value = l.getContext("2d")), {
-    clearCanvas: () => {
-      e.value && e.value.clearRect(0, 0, l.width, l.height);
-    },
-    drawColor: (o, r, t, n, a) => {
-      e.value && (e.value.fillStyle = a, e.value.fillRect(o, r, t, n));
-    },
-    drawImage: (o, r, t, n, a) => {
-      e.value.drawImage(o, r, t, n, a);
-    },
-    cropCanvas: (o, r, t, n) => new Promise((a) => {
-      if (e.value) {
-        const c = document.createElement("canvas");
-        c.width = t, c.height = n;
-        const u = c.getContext("2d");
-        u ? (u.drawImage(l, o, r, t, n, 0, 0, t, n), c.toBlob((i) => {
-          if (i) {
-            const p = new File([i], "cropped_image.png", { type: "image/png" });
-            a(p);
-          } else
-            a(null);
-        }, "image/png")) : a(null);
-      } else
-        a(null);
-    })
+'use strict';
+
+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 {
-  v as useCanvas
-};
+
+exports.useCanvas = useCanvas;
 //# 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","x","y","width","height","color","image","resolve","croppedCanvas","croppedContext","blob","file"],"mappings":";AAGO,SAASA,EAAUC,GAAkC;AACpD,QAAAC,IAAgDC,EAAI,IAAI;AAE9D,SAAIF,MACMC,EAAA,QAAQD,EAAc,WAAW,IAAI,IAiDxC;AAAA,IACL,aA/CkB,MAAM;AACxB,MAAIC,EAAQ,SACVA,EAAQ,MAAM,UAAU,GAAG,GAAGD,EAAc,OAAOA,EAAc,MAAM;AAAA,IAE3E;AAAA,IA4CE,WA1CgB,CAACG,GAAWC,GAAWC,GAAeC,GAAgBC,MAAkB;AACxF,MAAIN,EAAQ,UACVA,EAAQ,MAAM,YAAYM,GAC1BN,EAAQ,MAAM,SAASE,GAAGC,GAAGC,GAAOC,CAAM;AAAA,IAE9C;AAAA,IAsCE,WApCgB,CAACE,GAAyBL,GAAWC,GAAWC,GAAeC,MAAmB;AAClG,MAAAL,EAAQ,MAAO,UAAUO,GAAOL,GAAGC,GAAGC,GAAOC,CAAM;AAAA,IACrD;AAAA,IAmCE,YAjCiB,CAACH,GAAWC,GAAWC,GAAeC,MAChD,IAAI,QAAQ,CAACG,MAAY;AAC9B,UAAIR,EAAQ,OAAO;AACX,cAAAS,IAAgB,SAAS,cAAc,QAAQ;AACrD,QAAAA,EAAc,QAAQL,GACtBK,EAAc,SAASJ;AACjB,cAAAK,IAAiBD,EAAc,WAAW,IAAI;AACpD,QAAIC,KACaA,EAAA,UAAUX,GAAeG,GAAGC,GAAGC,GAAOC,GAAQ,GAAG,GAAGD,GAAOC,CAAM,GAClEI,EAAA,OAAO,CAACE,MAAS;AAC7B,cAAIA,GAAM;AACF,kBAAAC,IAAO,IAAI,KAAK,CAACD,CAAI,GAAG,qBAAqB,EAAE,MAAM,aAAa;AACxE,YAAAH,EAAQI,CAAI;AAAA,UAAA;AAGZ,YAAAJ,EAAQ,IAAI;AAAA,WAEb,WAAW,KAGdA,EAAQ,IAAI;AAAA,MACd;AAGA,QAAAA,EAAQ,IAAI;AAAA,IACd,CACD;AAAA,EAQH;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":";;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;;;;"}