@qxs-bns/components 0.0.16 → 0.0.17

package/es/src/image-upload/src/image-upload.vue2.mjs

@@ -0,0 +1,177 @@
+/* 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.mjs";
+/* empty css                                                         */
+/* empty css                                                           */
+import { ElUpload as Z } from "../../../_virtual/element-plus/es/components/upload/index.mjs";
+import { ElImage as q } from "../../../_virtual/element-plus/es/components/image/index.mjs";
+import { ElIcon as A } from "../../../_virtual/element-plus/es/components/icon/index.mjs";
+import { ElProgress as F } from "../../../_virtual/element-plus/es/components/progress/index.mjs";
+import { ElImageViewer as G } from "../../../_virtual/element-plus/es/components/image-viewer/index.mjs";
+import { ElMessage as V } from "../../../_virtual/element-plus/es/components/message/index.mjs";
+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
+};
+//# sourceMappingURL=image-upload.vue2.mjs.map

package/es/src/image-upload/src/image-upload.vue2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-upload.vue2.mjs","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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/es/src/image-upload/style/index.d.ts

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=index.d.ts.map

package/es/src/image-upload/style/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/image-upload/style/index.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAA;AACzB,OAAO,kDAAkD,CAAA"}

package/es/src/make-installer.d.ts

@@ -0,0 +1,10 @@
+import { Plugin } from 'vue';
+
+declare function makeInstaller(components: {
+    [key: number]: Plugin;
+}): {
+    version: string;
+    install: (app: any) => void;
+};
+export { makeInstaller };
+//# sourceMappingURL=make-installer.d.ts.map

package/es/src/make-installer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"make-installer.d.ts","sourceRoot":"","sources":["../../../../packages/components/src/make-installer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,KAAK,CAAA;AAGjC,iBAAS,aAAa,CAAC,UAAU,EAAE;IACjC,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CACtB;;mBACuB,GAAG;EAU1B;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}

package/es/src/make-installer.mjs

@@ -0,0 +1,14 @@
+import { version as i } from "../package.json.mjs";
+function s(n) {
+  return {
+    version: i,
+    install: (r) => {
+      for (const t in n)
+        r.use(n[t]);
+    }
+  };
+}
+export {
+  s as makeInstaller
+};
+//# sourceMappingURL=make-installer.mjs.map

package/es/src/make-installer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"make-installer.mjs","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;"}

package/es/src/photo-crop-tool/index.d.ts

@@ -0,0 +1,55 @@
+declare const QxsPhotoCropTool: import('../withInstall').SFCWithInstall<import('vue').DefineComponent<globalThis.ExtractPropTypes<{
+    imgFile: {
+        type: PropType<File>;
+        default: () => null;
+    };
+    aspectRatio: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    defaultWidth: {
+        type: NumberConstructor;
+        default: () => number;
+    };
+    defaultHeight: {
+        type: NumberConstructor;
+        default: () => number;
+    };
+    zoomType: {
+        type: StringConstructor;
+        default: () => string;
+    };
+}>, {
+    crop: (img?: HTMLImageElement) => Promise<File | null>;
+    resize: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<{
+    imgFile: {
+        type: PropType<File>;
+        default: () => null;
+    };
+    aspectRatio: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    defaultWidth: {
+        type: NumberConstructor;
+        default: () => number;
+    };
+    defaultHeight: {
+        type: NumberConstructor;
+        default: () => number;
+    };
+    zoomType: {
+        type: StringConstructor;
+        default: () => string;
+    };
+}>> & Readonly<{}>, {
+    imgFile: File;
+    aspectRatio: string;
+    defaultWidth: number;
+    defaultHeight: number;
+    zoomType: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>> & Record<string, any>;
+export { QxsPhotoCropTool, };
+export default QxsPhotoCropTool;
+//# sourceMappingURL=index.d.ts.map

package/es/src/photo-crop-tool/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../packages/components/src/photo-crop-tool/index.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mGAAyB,CAAA;AAE/C,OAAO,EACL,gBAAgB,GACjB,CAAA;AAED,eAAe,gBAAgB,CAAA"}

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

@@ -0,0 +1,8 @@
+import { withInstall as o } from "../withInstall.mjs";
+import t from "./src/photo-crop-tool.vue.mjs";
+const p = o(t);
+export {
+  p as QxsPhotoCropTool,
+  p as default
+};
+//# sourceMappingURL=index.mjs.map

package/es/src/photo-crop-tool/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","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;"}

package/es/src/photo-crop-tool/src/composables.d.ts

@@ -0,0 +1,7 @@
+export declare function useCanvas(canvasElement: HTMLCanvasElement): {
+    clearCanvas: () => void;
+    drawColor: (x: number, y: number, width: number, height: number, color: string) => void;
+    drawImage: (image: HTMLImageElement, x: number, y: number, width: number, height: number) => void;
+    cropCanvas: (x: number, y: number, width: number, height: number) => Promise<File | null>;
+};
+//# sourceMappingURL=composables.d.ts.map

package/es/src/photo-crop-tool/src/composables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composables.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/photo-crop-tool/src/composables.ts"],"names":[],"mappings":"AAGA,wBAAgB,SAAS,CAAC,aAAa,EAAE,iBAAiB;;mBAalC,MAAM,KAAK,MAAM,SAAS,MAAM,UAAU,MAAM,SAAS,MAAM;uBAO3D,gBAAgB,KAAK,MAAM,KAAK,MAAM,SAAS,MAAM,UAAU,MAAM;oBAIxE,MAAM,KAAK,MAAM,SAAS,MAAM,UAAU,MAAM,KAAG,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC;EAmC/F"}

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

@@ -0,0 +1,34 @@
+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);
+    })
+  };
+}
+export {
+  v as useCanvas
+};
+//# sourceMappingURL=composables.mjs.map

package/es/src/photo-crop-tool/src/composables.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"composables.mjs","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;"}

package/es/src/photo-crop-tool/src/photo-crop-tool.vue.d.ts

@@ -0,0 +1,66 @@
+import { PropType } from 'vue';
+
+declare function crop(img?: HTMLImageElement): Promise<File | null>;
+declare function resize(): void;
+declare const _default: import('vue').DefineComponent<globalThis.ExtractPropTypes<{
+    imgFile: {
+        type: PropType<File>;
+        default: () => null;
+    };
+    aspectRatio: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    defaultWidth: {
+        type: NumberConstructor;
+        default: () => number;
+    };
+    defaultHeight: {
+        type: NumberConstructor;
+        default: () => number;
+    };
+    /**
+     * free 自由缩放
+     * fixed 固定比例缩放
+     */
+    zoomType: {
+        type: StringConstructor;
+        default: () => string;
+    };
+}>, {
+    crop: typeof crop;
+    resize: typeof resize;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<globalThis.ExtractPropTypes<{
+    imgFile: {
+        type: PropType<File>;
+        default: () => null;
+    };
+    aspectRatio: {
+        type: StringConstructor;
+        default: () => string;
+    };
+    defaultWidth: {
+        type: NumberConstructor;
+        default: () => number;
+    };
+    defaultHeight: {
+        type: NumberConstructor;
+        default: () => number;
+    };
+    /**
+     * free 自由缩放
+     * fixed 固定比例缩放
+     */
+    zoomType: {
+        type: StringConstructor;
+        default: () => string;
+    };
+}>> & Readonly<{}>, {
+    imgFile: File;
+    aspectRatio: string;
+    defaultWidth: number;
+    defaultHeight: number;
+    zoomType: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+//# sourceMappingURL=photo-crop-tool.vue.d.ts.map

package/es/src/photo-crop-tool/src/photo-crop-tool.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"photo-crop-tool.vue.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/photo-crop-tool/src/photo-crop-tool.vue"],"names":[],"mappings":"AAAA,OAkZO,KAAK,EAAE,QAAQ,EAAE,MAAM,KAAK,CAAA;AAkJnC,iBAAe,IAAI,CAAC,GAAG,GAAE,gBAAgC,wBAyBxD;AA0JD,iBAAS,MAAM,SAKd;;;cAsMmB,QAAQ,CAAC,IAAI,CAAC;;;;;;;;;;;;;;;IAehC;;;OAGG;;;;;;;;;;cAlBe,QAAQ,CAAC,IAAI,CAAC;;;;;;;;;;;;;;;IAehC;;;OAGG;;;;;;;;;;;;AA1BL,wBAgCG"}

package/es/src/photo-crop-tool/src/photo-crop-tool.vue.mjs

@@ -0,0 +1,8 @@
+import o from "./photo-crop-tool.vue2.mjs";
+/* empty css                      */
+import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-e779936c"]]);
+export {
+  c as default
+};
+//# sourceMappingURL=photo-crop-tool.vue.mjs.map

package/es/src/photo-crop-tool/src/photo-crop-tool.vue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"photo-crop-tool.vue.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}