@qxs-bns/components 0.0.19 → 0.0.20

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

@@ -1,256 +1,10 @@
-var A = ($, X, i) => new Promise((L, F) => {
-  var c = (v) => {
-    try {
-      r(i.next(v));
-    } catch (o) {
-      F(o);
-    }
-  }, b = (v) => {
-    try {
-      r(i.throw(v));
-    } catch (o) {
-      F(o);
-    }
-  }, r = (v) => v.done ? L(v.value) : Promise.resolve(v.value).then(c, b);
-  r((i = i.apply($, X)).next());
-});
-import { defineComponent as ie, ref as W, computed as C, watch as ae, onMounted as oe, nextTick as ue, onUnmounted as ne, createElementBlock as D, openBlock as O, normalizeClass as x, unref as s, toDisplayString as se, Fragment as he, createElementVNode as k, normalizeStyle as re } from "vue";
-import { useNamespace as ve } from "../../../packages/hooks/src/use-namespace.js";
-import { useElementSize as G, useDraggable as fe } from "../../../_virtual/@vueuse/core/index.js";
-import { useCanvas as ce } from "./composables.js";
-const de = ["src"], xe = /* @__PURE__ */ ie({
-  name: "QxsPhotoCropTool",
-  __name: "photo-crop-tool",
-  props: {
-    imgFile: {
-      type: Object,
-      default: () => null
-    },
-    aspectRatio: {
-      type: String,
-      default: () => "16 / 9"
-    },
-    defaultWidth: {
-      type: Number,
-      default: () => 320
-    },
-    defaultHeight: {
-      type: Number,
-      default: () => 180
-    },
-    /**
-     * free 自由缩放
-     * fixed 固定比例缩放
-     */
-    zoomType: {
-      type: String,
-      default: () => "fixed"
-    }
-  },
-  setup($, { expose: X }) {
-    const i = $;
-    let L = 0, F = 0, c = 0, b = 0;
-    const r = ve("photo-crop-tool"), v = W(null), o = W(null), B = W(null), S = W(""), f = W(""), Y = W({
-      x: 0,
-      y: 0
-    }), e = W({
-      width: i.defaultWidth,
-      height: i.defaultHeight,
-      x: 0,
-      y: 0
-    }), { width: I, height: N } = G(v), { width: J } = G(B), { x: g, y: m, style: K } = fe(v, {
-      containerElement: o,
-      draggingElement: v,
-      disabled: C(() => !!f.value),
-      exact: !0,
-      initialValue: Y
-    }), j = C(() => i.imgFile ? URL.createObjectURL(i.imgFile) : "");
-    ae(
-      () => i.imgFile,
-      (t) => {
-        t && !t.type.startsWith("image/") ? S.value = "文件类型错误" : S.value = "";
-      }
-    );
-    const Z = C(() => {
-      var t;
-      return (((t = B.value) == null ? void 0 : t.naturalWidth) || 0) / J.value;
-    }), p = C(() => {
-      const t = {
-        left: 0,
-        top: 0
-      };
-      return f.value === "bottom-right" ? (t.left = e.value.x, t.top = e.value.y) : f.value === "top-left" ? (t.left = e.value.x - I.value, t.top = e.value.y - N.value) : f.value === "top-right" ? (t.top = e.value.y - N.value, t.left = e.value.x) : f.value === "bottom-left" && (t.left = e.value.x - I.value, t.top = e.value.y), t;
-    }), ee = C(() => {
-      const { aspectRatio: t } = i, l = {
-        width: `${e.value.width || i.defaultWidth}`,
-        height: `${e.value.height || i.defaultHeight}`,
-        "aspect-ratio": t,
-        top: `${p.value.top}px`,
-        left: `${p.value.left}px`
-      };
-      return i.zoomType === "free" ? delete l["aspect-ratio"] : i.zoomType === "fixed" && delete l.height, r.cssVarBlock(l);
-    });
-    function w(t) {
-      return t * Z.value;
-    }
-    function te() {
-      return A(this, arguments, function* (t = B.value) {
-        var E, M;
-        let l = "transparent";
-        o.value && (l = window.getComputedStyle(
-          o.value
-        ).backgroundColor);
-        const u = document.createElement("canvas");
-        u.width = w(((E = o.value) == null ? void 0 : E.clientWidth) || 0), u.height = w(((M = o.value) == null ? void 0 : M.clientHeight) || 0);
-        const { drawImage: T, cropCanvas: R, drawColor: H } = ce(u);
-        return H(0, 0, u.width, u.height, l), T(
-          t,
-          w(t.offsetLeft),
-          w(t.offsetTop),
-          t.naturalWidth,
-          t.naturalHeight
-        ), yield R(
-          w(g.value),
-          w(m.value),
-          w(I.value),
-          w(N.value)
-        );
-      });
-    }
-    function y(t, l) {
-      var R, H;
-      const u = ((R = o.value) == null ? void 0 : R.clientWidth) || 1 / 0, T = ((H = o.value) == null ? void 0 : H.clientHeight) || 1 / 0;
-      return {
-        width: Math.min(Math.max(t, 0), u),
-        height: Math.min(Math.max(l, 0), T)
-      };
-    }
-    function P(t) {
-      var T, R, H, E, M, _, Q, q;
-      const l = t.clientX - L, u = t.clientY - F;
-      if (f.value === "bottom-right") {
-        if (i.zoomType === "free") {
-          const { width: n, height: a } = y(
-            c + l,
-            b + u
-          );
-          e.value.width = n, e.value.height = a;
-        } else if (i.zoomType === "fixed") {
-          const n = Number.parseFloat(i.aspectRatio.split(" / ")[0]) / Number.parseFloat(i.aspectRatio.split(" / ")[1]);
-          let a = c + l, h = a / n;
-          const { width: z, height: d } = y(a, h);
-          d > (((T = o.value) == null ? void 0 : T.clientHeight) || 1 / 0) && (h = ((R = o.value) == null ? void 0 : R.clientHeight) || 1 / 0, a = h * n), e.value.width = z, e.value.height = d;
-        }
-      } else if (f.value === "top-left") {
-        if (i.zoomType === "free") {
-          const { width: n, height: a } = y(
-            c - l,
-            b - u
-          );
-          e.value.width = n, e.value.height = a;
-        } else if (i.zoomType === "fixed") {
-          const n = Number.parseFloat(i.aspectRatio.split(" / ")[0]) / Number.parseFloat(i.aspectRatio.split(" / ")[1]);
-          let a = c - l, h = a / n;
-          const { width: z, height: d } = y(a, h);
-          d > (((H = o.value) == null ? void 0 : H.clientHeight) || 1 / 0) && (h = ((E = o.value) == null ? void 0 : E.clientHeight) || 1 / 0, a = h * n), e.value.width = z, e.value.height = d;
-        }
-        g.value = p.value.left, m.value = p.value.top;
-      } else if (f.value === "top-right") {
-        if (i.zoomType === "free") {
-          const { width: n, height: a } = y(
-            c + l,
-            b - u
-          );
-          e.value.width = n, e.value.height = a;
-        } else if (i.zoomType === "fixed") {
-          const n = Number.parseFloat(i.aspectRatio.split(" / ")[0]) / Number.parseFloat(i.aspectRatio.split(" / ")[1]);
-          let a = c + l, h = a / n;
-          const { width: z, height: d } = y(a, h);
-          d > (((M = o.value) == null ? void 0 : M.clientHeight) || 1 / 0) && (h = ((_ = o.value) == null ? void 0 : _.clientHeight) || 1 / 0, a = h * n), e.value.width = z, e.value.height = d;
-        }
-        g.value = p.value.left, m.value = p.value.top;
-      } else if (f.value === "bottom-left") {
-        if (i.zoomType === "free") {
-          const { width: n, height: a } = y(
-            c - l,
-            b + u
-          );
-          e.value.width = n, e.value.height = a;
-        } else if (i.zoomType === "fixed") {
-          const n = Number.parseFloat(i.aspectRatio.split(" / ")[0]) / Number.parseFloat(i.aspectRatio.split(" / ")[1]);
-          let a = c - l, h = a / n;
-          const { width: z, height: d } = y(a, h);
-          d > (((Q = o.value) == null ? void 0 : Q.clientHeight) || 1 / 0) && (h = ((q = o.value) == null ? void 0 : q.clientHeight) || 1 / 0, a = h * n), e.value.width = z, e.value.height = d;
-        }
-        g.value = p.value.left, m.value = p.value.top;
-      }
-      t.preventDefault(), t.stopPropagation();
-    }
-    function U(t, l) {
-      f.value = l, L = t.clientX, F = t.clientY, c = e.value.width, b = e.value.height, l === "bottom-right" ? (e.value.x = g.value, e.value.y = m.value) : l === "top-left" ? (e.value.x = g.value + I.value, e.value.y = m.value + N.value) : l === "top-right" ? (e.value.x = g.value, e.value.y = m.value + N.value) : l === "bottom-left" && (e.value.x = g.value + I.value, e.value.y = m.value);
-    }
-    function V() {
-      f.value = "";
-    }
-    function le() {
-      e.value.width = i.defaultWidth, e.value.height = i.defaultHeight, g.value = 0, m.value = 0;
-    }
-    return document.addEventListener("mouseup", V), document.addEventListener("mousemove", P), oe(() => {
-      ue(() => {
-        var t, l;
-        Y.value.x = (((t = o.value) == null ? void 0 : t.offsetWidth) || 0) / 2 - e.value.width / 2, Y.value.y = (((l = o.value) == null ? void 0 : l.offsetHeight) || 0) / 2 - e.value.height / 2;
-      });
-    }), ne(() => {
-      j.value && URL.revokeObjectURL(j.value), document.removeEventListener("mouseup", V), document.removeEventListener("mousemove", P);
-    }), X({
-      crop: te,
-      resize: le
-    }), (t, l) => (O(), D("div", {
-      ref_key: "containerBoxRef",
-      ref: o,
-      class: x([s(r).e("img-box")])
-    }, [
-      s(S) ? (O(), D("div", {
-        key: 0,
-        class: x([s(r).e("error-message")])
-      }, se(s(S)), 3)) : (O(), D(he, { key: 1 }, [
-        k("img", {
-          ref_key: "imgRef",
-          ref: B,
-          class: x([s(r).e("image")]),
-          src: s(j)
-        }, null, 10, de),
-        k("div", {
-          ref_key: "cropBoxRef",
-          ref: v,
-          class: x([s(r).e("crop-tool-box")]),
-          style: re([
-            s(ee),
-            s(f) ? `left: ${s(p).left}px;top: ${s(p).top}px` : s(K)
-          ])
-        }, [
-          k("div", {
-            class: x([s(r).e("top-left")]),
-            onMousedown: l[0] || (l[0] = (u) => U(u, "top-left"))
-          }, null, 34),
-          k("div", {
-            class: x([s(r).e("top-right")]),
-            onMousedown: l[1] || (l[1] = (u) => U(u, "top-right"))
-          }, null, 34),
-          k("div", {
-            class: x([s(r).e("bottom-right")]),
-            onMousedown: l[2] || (l[2] = (u) => U(u, "bottom-right"))
-          }, null, 34),
-          k("div", {
-            class: x([s(r).e("bottom-left")]),
-            onMousedown: l[3] || (l[3] = (u) => U(u, "bottom-left"))
-          }, null, 34)
-        ], 6)
-      ], 64))
-    ], 2));
-  }
-});
-export {
-  xe as default
-};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var photoCropTool_vue_vue_type_script_setup_true_lang = require('./photo-crop-tool.vue.js');
+
+
+
+exports.default = photoCropTool_vue_vue_type_script_setup_true_lang.default;
 //# sourceMappingURL=photo-crop-tool.vue2.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"photo-crop-tool.vue2.js","sources":["../../../../../../packages/components/src/photo-crop-tool/src/photo-crop-tool.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { PropType } from 'vue'\nimport { useNamespace } from '@qxs-bns/hooks'\nimport { useDraggable, useElementSize } from '@vueuse/core'\nimport { useCanvas } from './composables'\n\ndefineOptions({\n  name: 'QxsPhotoCropTool',\n})\n\nconst props = defineProps({\n  imgFile: {\n    type: Object as PropType<File>,\n    default: () => null,\n  },\n  aspectRatio: {\n    type: String,\n    default: () => '16 / 9',\n  },\n  defaultWidth: {\n    type: Number,\n    default: () => 320,\n  },\n  defaultHeight: {\n    type: Number,\n    default: () => 180,\n  },\n  /**\n   * free 自由缩放\n   * fixed 固定比例缩放\n   */\n  zoomType: {\n    type: String,\n    default: () => 'fixed',\n  },\n})\nlet startX = 0\nlet startY = 0\nlet startWidth = 0\nlet startHeight = 0\n\nconst ns = useNamespace('photo-crop-tool')\n\nconst cropBoxRef = ref<HTMLElement | null>(null)\nconst containerBoxRef = ref<HTMLElement | null>(null)\nconst imgRef = ref<HTMLImageElement | null>(null)\nconst errorMessage = ref('')\nconst dargPoint = ref('')\nconst initialValue = ref({\n  x: 0,\n  y: 0,\n})\nconst cropInfo = ref({\n  width: props.defaultWidth,\n  height: props.defaultHeight,\n  x: 0,\n  y: 0,\n})\n\nconst { width, height } = useElementSize(cropBoxRef)\nconst { width: imgWidth } = useElementSize(imgRef)\n\nconst { x, y, style } = useDraggable(cropBoxRef, {\n  containerElement: containerBoxRef,\n  draggingElement: cropBoxRef,\n  disabled: computed(() => !!dargPoint.value),\n  exact: true,\n  initialValue,\n})\n\nconst imageUrl = computed(() => {\n  if (!props.imgFile) {\n    return ''\n  }\n  return URL.createObjectURL(props.imgFile)\n})\n\nwatch(\n  () => props.imgFile,\n  (newFile: File | null) => {\n    if (newFile && !newFile.type.startsWith('image/')) {\n      errorMessage.value = '文件类型错误'\n    }\n    else {\n      errorMessage.value = ''\n    }\n  },\n)\n\nconst ratio = computed(() => {\n  return (imgRef.value?.naturalWidth || 0) / imgWidth.value\n})\n\nconst customStyle = computed(() => {\n  const position = {\n    left: 0,\n    top: 0,\n  }\n  if (dargPoint.value === 'bottom-right') {\n    position.left = cropInfo.value.x\n    position.top = cropInfo.value.y\n  }\n  else if (dargPoint.value === 'top-left') {\n    position.left = cropInfo.value.x - width.value\n    position.top = cropInfo.value.y - height.value\n  }\n  else if (dargPoint.value === 'top-right') {\n    position.top = cropInfo.value.y - height.value\n    position.left = cropInfo.value.x\n  }\n  else if (dargPoint.value === 'bottom-left') {\n    position.left = cropInfo.value.x - width.value\n    position.top = cropInfo.value.y\n  }\n  return position\n})\n\nconst sizeStyle = computed(() => {\n  const { aspectRatio } = props\n\n  const style: {\n    'height'?: string\n    'width': string\n    'aspect-ratio'?: string\n    'top': string\n    'left': string\n  } = {\n    'width': `${cropInfo.value.width || props.defaultWidth}`,\n    'height': `${cropInfo.value.height || props.defaultHeight}`,\n    'aspect-ratio': aspectRatio,\n    'top': `${customStyle.value.top}px`,\n    'left': `${customStyle.value.left}px`,\n  }\n  if (props.zoomType === 'free') {\n    delete style['aspect-ratio']\n  }\n  else if (props.zoomType === 'fixed') {\n    delete style.height\n  }\n  return ns.cssVarBlock(style)\n})\n\nfunction zoom(pixel: number) {\n  return pixel * ratio.value\n}\nasync function crop(img: HTMLImageElement = imgRef.value!) {\n  let backgroundColor = 'transparent'\n  if (containerBoxRef.value) {\n    backgroundColor = window.getComputedStyle(\n      containerBoxRef.value,\n    ).backgroundColor\n  }\n  const canvas = document.createElement('canvas')\n  canvas.width = zoom(containerBoxRef.value?.clientWidth || 0)\n  canvas.height = zoom(containerBoxRef.value?.clientHeight || 0)\n  const { drawImage, cropCanvas, drawColor } = useCanvas(canvas)\n  drawColor(0, 0, canvas.width, canvas.height, backgroundColor)\n  drawImage(\n    img,\n    zoom(img.offsetLeft),\n    zoom(img.offsetTop),\n    img.naturalWidth,\n    img.naturalHeight,\n  )\n  return await cropCanvas(\n    zoom(x.value),\n    zoom(y.value),\n    zoom(width.value),\n    zoom(height.value),\n  )\n}\n\nfunction checkBoundaries(\n  newWidth: number,\n  newHeight: number,\n): { width: number, height: number } {\n  const maxWidth = containerBoxRef.value?.clientWidth || Infinity\n  const maxHeight = containerBoxRef.value?.clientHeight || Infinity\n\n  return {\n    width: Math.min(Math.max(newWidth, 0), maxWidth),\n    height: Math.min(Math.max(newHeight, 0), maxHeight),\n  }\n}\n\nfunction mousemove(e: MouseEvent) {\n  const deltaX = e.clientX - startX\n  const deltaY = e.clientY - startY\n\n  if (dargPoint.value === 'bottom-right') {\n    if (props.zoomType === 'free') {\n      const { width, height } = checkBoundaries(\n        startWidth + deltaX,\n        startHeight + deltaY,\n      )\n      cropInfo.value.width = width\n      cropInfo.value.height = height\n    }\n    else if (props.zoomType === 'fixed') {\n      const aspectRatio\n        = Number.parseFloat(props.aspectRatio.split(' / ')[0])\n        / Number.parseFloat(props.aspectRatio.split(' / ')[1])\n      let newWidth = startWidth + deltaX\n      let newHeight = newWidth / aspectRatio\n      const { width, height } = checkBoundaries(newWidth, newHeight)\n      if (height > (containerBoxRef.value?.clientHeight || Infinity)) {\n        newHeight = containerBoxRef.value?.clientHeight || Infinity\n        newWidth = newHeight * aspectRatio\n      }\n      cropInfo.value.width = width\n      cropInfo.value.height = height\n    }\n  }\n  else if (dargPoint.value === 'top-left') {\n    if (props.zoomType === 'free') {\n      const { width, height } = checkBoundaries(\n        startWidth - deltaX,\n        startHeight - deltaY,\n      )\n      cropInfo.value.width = width\n      cropInfo.value.height = height\n    }\n    else if (props.zoomType === 'fixed') {\n      const aspectRatio\n        = Number.parseFloat(props.aspectRatio.split(' / ')[0])\n        / Number.parseFloat(props.aspectRatio.split(' / ')[1])\n      let newWidth = startWidth - deltaX\n      let newHeight = newWidth / aspectRatio\n      const { width, height } = checkBoundaries(newWidth, newHeight)\n      if (height > (containerBoxRef.value?.clientHeight || Infinity)) {\n        newHeight = containerBoxRef.value?.clientHeight || Infinity\n        newWidth = newHeight * aspectRatio\n      }\n      cropInfo.value.width = width\n      cropInfo.value.height = height\n    }\n    x.value = customStyle.value.left\n    y.value = customStyle.value.top\n  }\n  else if (dargPoint.value === 'top-right') {\n    if (props.zoomType === 'free') {\n      const { width, height } = checkBoundaries(\n        startWidth + deltaX,\n        startHeight - deltaY,\n      )\n      cropInfo.value.width = width\n      cropInfo.value.height = height\n    }\n    else if (props.zoomType === 'fixed') {\n      const aspectRatio\n        = Number.parseFloat(props.aspectRatio.split(' / ')[0])\n        / Number.parseFloat(props.aspectRatio.split(' / ')[1])\n      let newWidth = startWidth + deltaX\n      let newHeight = newWidth / aspectRatio\n      const { width, height } = checkBoundaries(newWidth, newHeight)\n      if (height > (containerBoxRef.value?.clientHeight || Infinity)) {\n        newHeight = containerBoxRef.value?.clientHeight || Infinity\n        newWidth = newHeight * aspectRatio\n      }\n      cropInfo.value.width = width\n      cropInfo.value.height = height\n    }\n    x.value = customStyle.value.left\n    y.value = customStyle.value.top\n  }\n  else if (dargPoint.value === 'bottom-left') {\n    if (props.zoomType === 'free') {\n      const { width, height } = checkBoundaries(\n        startWidth - deltaX,\n        startHeight + deltaY,\n      )\n      cropInfo.value.width = width\n      cropInfo.value.height = height\n    }\n    else if (props.zoomType === 'fixed') {\n      const aspectRatio\n        = Number.parseFloat(props.aspectRatio.split(' / ')[0])\n        / Number.parseFloat(props.aspectRatio.split(' / ')[1])\n      let newWidth = startWidth - deltaX\n      let newHeight = newWidth / aspectRatio\n      const { width, height } = checkBoundaries(newWidth, newHeight)\n      if (height > (containerBoxRef.value?.clientHeight || Infinity)) {\n        newHeight = containerBoxRef.value?.clientHeight || Infinity\n        newWidth = newHeight * aspectRatio\n      }\n      cropInfo.value.width = width\n      cropInfo.value.height = height\n    }\n    x.value = customStyle.value.left\n    y.value = customStyle.value.top\n  }\n  e.preventDefault()\n  e.stopPropagation()\n}\n\nfunction mousedown(e: MouseEvent, point: string) {\n  dargPoint.value = point\n  startX = e.clientX\n  startY = e.clientY\n  startWidth = cropInfo.value.width\n  startHeight = cropInfo.value.height\n\n  if (point === 'bottom-right') {\n    cropInfo.value.x = x.value\n    cropInfo.value.y = y.value\n  }\n  else if (point === 'top-left') {\n    cropInfo.value.x = x.value + width.value\n    cropInfo.value.y = y.value + height.value\n  }\n  else if (point === 'top-right') {\n    cropInfo.value.x = x.value\n    cropInfo.value.y = y.value + height.value\n  }\n  else if (point === 'bottom-left') {\n    cropInfo.value.x = x.value + width.value\n    cropInfo.value.y = y.value\n  }\n}\n\nfunction mouseup() {\n  dargPoint.value = ''\n}\n\nfunction resize() {\n  cropInfo.value.width = props.defaultWidth\n  cropInfo.value.height = props.defaultHeight\n  x.value = 0\n  y.value = 0\n}\n\ndocument.addEventListener('mouseup', mouseup)\ndocument.addEventListener('mousemove', mousemove)\n\nonMounted(() => {\n  nextTick(() => {\n    // 初始化位置\n    initialValue.value.x\n      = (containerBoxRef.value?.offsetWidth || 0) / 2 - cropInfo.value.width / 2\n    initialValue.value.y\n      = (containerBoxRef.value?.offsetHeight || 0) / 2\n      - cropInfo.value.height / 2\n  })\n})\n\nonUnmounted(() => {\n  if (imageUrl.value) {\n    URL.revokeObjectURL(imageUrl.value)\n  }\n  document.removeEventListener('mouseup', mouseup)\n  document.removeEventListener('mousemove', mousemove)\n})\n\ndefineExpose({\n  crop,\n  resize,\n})\n</script>\n\n<template>\n  <div ref=\"containerBoxRef\" :class=\"[ns.e('img-box')]\">\n    <div v-if=\"errorMessage\" :class=\"[ns.e('error-message')]\">\n      {{ errorMessage }}\n    </div>\n    <template v-else>\n      <img\n        ref=\"imgRef\"\n        :class=\"[ns.e('image')]\"\n        :src=\"imageUrl\"\n      >\n      <div\n        ref=\"cropBoxRef\"\n        :class=\"[ns.e('crop-tool-box')]\"\n        :style=\"[\n          sizeStyle,\n          dargPoint\n            ? `left: ${customStyle.left}px;top: ${customStyle.top}px`\n            : style,\n        ]\"\n      >\n        <div\n          :class=\"[ns.e('top-left')]\"\n          @mousedown=\"mousedown($event, 'top-left')\"\n        />\n        <div\n          :class=\"[ns.e('top-right')]\"\n          @mousedown=\"mousedown($event, 'top-right')\"\n        />\n        <div\n          :class=\"[ns.e('bottom-right')]\"\n          @mousedown=\"mousedown($event, 'bottom-right')\"\n        />\n        <div\n          :class=\"[ns.e('bottom-left')]\"\n          @mousedown=\"mousedown($event, 'bottom-left')\"\n        />\n      </div>\n    </template>\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.fixed{position:fixed;}\n.px{padding-left:1rem;padding-right:1rem;}</style>"],"names":["props","__props","startX","startY","startWidth","startHeight","ns","useNamespace","cropBoxRef","ref","containerBoxRef","imgRef","errorMessage","dargPoint","initialValue","cropInfo","width","height","useElementSize","imgWidth","x","y","style","useDraggable","computed","imageUrl","watch","newFile","ratio","_a","customStyle","position","sizeStyle","aspectRatio","zoom","pixel","crop","__async","img","backgroundColor","canvas","_b","drawImage","cropCanvas","drawColor","useCanvas","checkBoundaries","newWidth","newHeight","maxWidth","maxHeight","mousemove","e","deltaX","deltaY","_c","_d","_e","_f","_g","_h","mousedown","point","mouseup","resize","onMounted","nextTick","onUnmounted","__expose"],"mappings":"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"}
+{"version":3,"file":"photo-crop-tool.vue2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/lib/src/subject-action/index.js

@@ -1,8 +1,12 @@
-import { withInstall as t } from "../withInstall.js";
-import o from "./src/subject-action.vue.js";
-const r = t(o);
-export {
-  r as QxsSubjectAction,
-  r as default
-};
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var withInstall = require('../withInstall.js');
+var subjectAction_vue_vue_type_script_setup_true_lang = require('./src/subject-action.vue.js');
+
+const QxsSubjectAction = withInstall.withInstall(subjectAction_vue_vue_type_script_setup_true_lang.default);
+
+exports.QxsSubjectAction = QxsSubjectAction;
+exports.default = QxsSubjectAction;
 //# sourceMappingURL=index.js.map

package/lib/src/subject-action/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../packages/components/src/subject-action/index.ts"],"sourcesContent":["import { withInstall } from '../withInstall'\nimport component from './src/subject-action.vue'\n\nconst QxsSubjectAction = withInstall(component)\n  \nexport {\n  QxsSubjectAction\n}\n  \nexport default QxsSubjectAction"],"names":["QxsSubjectAction","withInstall","component"],"mappings":";;AAGM,MAAAA,IAAmBC,EAAYC,CAAS;"}
+{"version":3,"file":"index.js","sources":["../../../../../packages/components/src/subject-action/index.ts"],"sourcesContent":["import { withInstall } from '../withInstall'\nimport component from './src/subject-action.vue'\n\nconst QxsSubjectAction = withInstall(component)\n  \nexport {\n  QxsSubjectAction\n}\n  \nexport default QxsSubjectAction"],"names":["QxsSubjectAction","withInstall","component"],"mappings":";;;;;;;AAGA,MAAMA,gBAAA,GAAmBC,wBAAYC,yDAAS;;;;;"}