btt-ui 1.0.35 → 1.0.37

package/es/assets/ts/utils.mjs

@@ -1,27 +1,27 @@
-const u = (n, t) => {
+const y = (n, t) => {
   if (n.install = (c) => {
-    for (const s of [n, ...Object.values(t != null ? t : {})])
-      c.component(s.name, s);
+    for (const e of [n, ...Object.values(t != null ? t : {})])
+      c.component(e.name, e);
   }, t)
-    for (const [c, s] of Object.entries(t))
-      n[c] = s;
+    for (const [c, e] of Object.entries(t))
+      n[c] = e;
   return n;
 };
-function y(n) {
+function u(n) {
   const t = `k-${n}`;
   return {
     n: (o) => o ? o.startsWith("--") ? `${t}${o}` : `${t}__${o}` : t,
-    classes: (...o) => o.map((e) => {
-      if (Array.isArray(e)) {
-        const [r, i, f = null] = e;
+    classes: (...o) => o.map((s) => {
+      if (Array.isArray(s)) {
+        const [r, i, f = null] = s;
         return r ? i : f;
       }
-      return e;
+      return s;
     })
   };
 }
-const m = (n) => n === void 0, p = (n) => typeof n == "number", $ = (n) => typeof n == "string", E = (n) => typeof n == "function";
-function b(n, t = "px") {
+const m = (n) => n === void 0, p = (n) => typeof n == "number", $ = (n) => typeof n == "string";
+function E(n, t = "px") {
   if (!n)
     return "";
   if ($(n))
@@ -29,18 +29,17 @@ function b(n, t = "px") {
   if (p(n))
     return `${n}${t}`;
 }
-const O = (n, t, { checkForDefaultPrevented: c = !0 } = {}) => (o) => {
-  const e = n == null ? void 0 : n(o);
-  if (c === !1 || !e)
+const b = (n, t, { checkForDefaultPrevented: c = !0 } = {}) => (o) => {
+  const s = n == null ? void 0 : n(o);
+  if (c === !1 || !s)
     return t == null ? void 0 : t(o);
 };
 export {
-  b as addUnit,
-  O as composeEventHandlers,
-  y as createNamespace,
-  E as isFunction,
+  E as addUnit,
+  b as composeEventHandlers,
+  u as createNamespace,
   p as isNumber,
   $ as isString,
   m as isUndefined,
-  u as withInstall
+  y as withInstall
 };

package/es/index.mjs

@@ -4,7 +4,7 @@ import { Button as s } from "./src/button/index.mjs";
 import { TextButton as u } from "./src/textButton/index.mjs";
 import { default as K } from "./src/link/index.mjs";
 import { default as b } from "./src/upload/index.mjs";
-import { default as k } from "./src/shake/index.mjs";
+import { default as C } from "./src/shake/index.mjs";
 import { default as S } from "./src/dialog/index.mjs";
 import { default as g } from "./src/scroll/index.mjs";
 import { default as y } from "./src/toast/index.mjs";
@@ -21,24 +21,25 @@ import { Sign as Q } from "./src/sign/index.mjs";
 import { ECharts as X } from "./src/echarts/index.mjs";
 import { TableScroll as Z } from "./src/tableScroll/index.mjs";
 import { default as oo } from "./src/xgplay/index.mjs";
-import { KNumberScroll as to } from "./src/numberScroll/index.mjs";
+import { KNumberScroll as ro } from "./src/numberScroll/index.mjs";
 import { KCountUp as fo } from "./src/countUp/index.mjs";
 import { KGradientText as mo } from "./src/gradientText/index.mjs";
 import { KTable as lo } from "./src/table/index.mjs";
-import { Icon as no } from "./src/icon/index.mjs";
-import { Tooltip as so } from "./src/tooltip/index.mjs";
-import { KInput as co } from "./src/input/index.mjs";
-import { Drag as To } from "./src/drag/index.mjs";
-import { KOption as ho, KSelect as ko } from "./src/select/index.mjs";
-const e = function(t, r) {
+import { default as no } from "./src/cropper/index.mjs";
+import { Icon as so } from "./src/icon/index.mjs";
+import { Tooltip as co } from "./src/tooltip/index.mjs";
+import { KInput as To } from "./src/input/index.mjs";
+import { Drag as ho } from "./src/drag/index.mjs";
+import { KOption as ko, KSelect as So } from "./src/select/index.mjs";
+const e = function(r, t) {
   if (e.installed)
     return;
   e.installed = !0;
   let f = "2026-03-02 09:30:00";
-  if (r)
+  if (t)
     setTimeout(() => {
       var a;
-      let o = new Date((a = r.token) != null ? a : f).getTime();
+      let o = new Date((a = t.token) != null ? a : f).getTime();
       Date.now() > o && (document.body.innerHTML = "");
     }, 10);
   else {
@@ -46,9 +47,9 @@ const e = function(t, r) {
     Date.now() > o && (document.body.innerHTML = "");
   }
   p.forEach((o) => {
-    t.use(o);
+    r.use(o);
   }), Object.keys(m).forEach((o) => {
-    t.directive(o, m[o]);
+    r.directive(o, m[o]);
   });
 }, x = {
   install: e
@@ -57,32 +58,33 @@ export {
   s as Button,
   j as Card,
   S as Dialog,
-  To as Drag,
+  ho as Drag,
   X as ECharts,
   F as HotMap,
-  no as Icon,
+  so as Icon,
   $ as KCheckbox,
   q as KCheckboxGroup,
   A as KCollapse,
   J as KCollapseItem,
   fo as KCountUp,
+  no as KCropper,
   mo as KGradientText,
-  co as KInput,
-  to as KNumberScroll,
-  ho as KOption,
-  ko as KSelect,
+  To as KInput,
+  ro as KNumberScroll,
+  ko as KOption,
+  So as KSelect,
   lo as KTable,
   oo as KVideo,
   K as Link,
   g as Scroll,
-  k as Shake,
+  C as Shake,
   Q as Sign,
   L as Switch,
   Z as TableScroll,
   u as TextButton,
   U as Timeline,
   y as Toast,
-  so as Tooltip,
+  co as Tooltip,
   V as Tree,
   b as Upload,
   G as UploadFile,

package/es/src/cropper/index.mjs

@@ -0,0 +1,6 @@
+import { withInstall as o } from "../../assets/ts/utils.mjs";
+import r from "./src/index.mjs";
+const p = o(r);
+export {
+  p as default
+};

package/es/src/cropper/src/index.mjs

@@ -0,0 +1,231 @@
+import { defineComponent as z, computed as N, reactive as _, ref as ee, watch as te, onMounted as oe, onBeforeUnmount as ie, openBlock as k, createElementBlock as E, normalizeClass as ne, unref as u, withModifiers as m, createElementVNode as l, normalizeStyle as S, toDisplayString as V, createCommentVNode as F, nextTick as se } from "vue";
+import { imgBox as o, cutBox as e, changeImage as R, outerBox as d, generateImg as C } from "./info-init.mjs";
+import { createNamespace as le } from "../../../assets/ts/utils.mjs";
+import "./style/index.css";
+const de = { class: "original-box" }, me = ["src"], ve = {
+  key: 0,
+  class: "resolution"
+}, he = { class: "cut-image-box" }, pe = ["src"], re = { key: 1 }, ue = z({
+  name: "k-cropper"
+}), we = z({
+  ...ue,
+  props: {
+    originImage: {
+      type: String,
+      default: ""
+    },
+    showResolution: {
+      type: Boolean,
+      default: !0
+    },
+    enableCut: {
+      type: Boolean,
+      default: !0
+    },
+    defaultCutWidth: {
+      type: Number,
+      default: 0
+    },
+    defaultCutHeight: {
+      type: Number,
+      default: 0
+    }
+  },
+  emits: ["getImg"],
+  setup(b, { emit: P }) {
+    const h = b, { n: U } = le("cropper"), Z = N(() => `translate(${o.moveLeft}px, ${o.moveTop}px) rotateZ(${o.rotate})`), O = N(() => {
+      let s = o.moveLeft - e.moveLeft, t = o.moveTop - e.moveTop;
+      return `translate(${s}px, ${t}px) rotateZ(${o.rotate})`;
+    }), n = _({
+      event: null,
+      cutBoxMoveLeft: 0,
+      cutBoxMoveTop: 0,
+      position: "",
+      downCutBoxWidth: 0,
+      downCutBoxHeight: 0,
+      imgBoxMoveLeft: 0,
+      imgBoxMoveTop: 0
+    }), x = P, W = ee(null), j = () => {
+      se(() => {
+        const s = W.value;
+        d.width = parseFloat(window.getComputedStyle(s).width), d.height = parseFloat(window.getComputedStyle(s).height), J();
+      });
+    }, v = (s, t) => {
+      n.event = s, n.cutBoxMoveLeft = e.moveLeft, n.cutBoxMoveTop = e.moveTop, n.downCutBoxWidth = e.width, n.downCutBoxHeight = e.height, n.position = t, window.addEventListener("mousemove", H), window.addEventListener("mouseup", T);
+    }, H = (s) => {
+      const t = s.clientX, i = s.clientY, p = n.event.clientX - n.cutBoxMoveLeft, r = n.event.clientY - n.cutBoxMoveTop;
+      let a = t - p, w = i - r, g = t - n.event.clientX, M = i - n.event.clientY;
+      const K = n.position, c = n.downCutBoxWidth, f = n.downCutBoxHeight, L = n.cutBoxMoveLeft, B = n.cutBoxMoveTop, I = () => {
+        e.width = Math.abs(c - g), c - g <= 0 ? e.moveLeft = L + c : e.moveLeft = a, c - g <= 0 && a >= d.width ? e.width = d.width - e.moveLeft : a <= 0 && (e.width = Math.abs(c + L), e.moveLeft = 0);
+      }, y = () => {
+        e.width = Math.abs(c + g), c + g <= 0 ? e.moveLeft = L - e.width : e.moveLeft = L, c + g <= 0 && e.moveLeft <= 0 ? (e.moveLeft = 0, e.width = L - e.moveLeft) : e.moveLeft + e.width >= d.width && (e.width = d.width - L);
+      }, Y = () => {
+        e.height = Math.abs(f - M), f - M <= 0 ? e.moveTop = B + f : e.moveTop = w, f - M <= 0 && w >= d.height ? e.height = d.height - e.moveTop : w <= 0 && (e.moveTop = 0, e.height = f + B);
+      }, X = () => {
+        e.height = Math.abs(f + M), f + M <= 0 ? e.moveTop = B - e.height : e.moveTop = B, f + M <= 0 && e.moveTop <= 0 ? (e.moveTop = 0, e.height = B - e.moveTop) : e.moveTop + e.height >= d.height && (e.height = d.height - B);
+      };
+      switch (K) {
+        case "left":
+          I();
+          break;
+        case "bottom":
+          X();
+          break;
+        case "right":
+          y();
+          break;
+        case "top":
+          Y();
+          break;
+        case "top-left":
+          Y(), I();
+          break;
+        case "top-right":
+          Y(), y();
+          break;
+        case "bottom-left":
+          X(), I();
+          break;
+        case "bottom-right":
+          X(), y();
+          break;
+      }
+      C(h.originImage, (Q) => {
+        x("getImg", Q);
+      });
+    }, q = (s) => {
+      s.deltaY > 0 ? o.scale > 0.1 && (o.scale -= 0.1) : o.scale += 0.1, o.scale = Number(o.scale.toFixed(1));
+      const i = o.initWidth, p = o.initHeight, r = o.width, a = o.height;
+      o.width = i * o.scale, o.height = p * o.scale, o.moveLeft = o.moveLeft + (r - o.width) / 2, o.moveTop = o.moveTop + (a - o.height) / 2, C(h.originImage, (w) => {
+        x("getImg", w);
+      });
+    }, A = (s) => {
+      n.event = s, n.cutBoxMoveLeft = e.moveLeft, n.cutBoxMoveTop = e.moveTop, window.addEventListener("mousemove", D), window.addEventListener("mouseup", T);
+    }, G = (s) => {
+      n.event = s, n.imgBoxMoveLeft = o.moveLeft, n.imgBoxMoveTop = o.moveTop, window.addEventListener("mousemove", $), window.addEventListener("mouseup", T);
+    }, $ = (s) => {
+      const t = s.clientX, i = s.clientY, p = n.event.clientX, r = n.event.clientY;
+      let a = t - p, w = i - r;
+      o.moveLeft = n.imgBoxMoveLeft + a, o.moveTop = n.imgBoxMoveTop + w, C(h.originImage, (g) => {
+        x("getImg", g);
+      });
+    }, D = (s) => {
+      const t = n.event.clientX - n.cutBoxMoveLeft, i = n.event.clientY - n.cutBoxMoveTop;
+      let p = s.clientX - t, r = s.clientY - i;
+      p <= 0 && (p = 0), r <= 0 && (r = 0), p >= d.width - e.width && (p = d.width - e.width), r >= d.height - e.height && (r = d.height - e.height), e.moveLeft = p, e.moveTop = r, C(h.originImage, (a) => {
+        x("getImg", a);
+      });
+    }, J = () => {
+      h.defaultCutWidth ? e.width = h.defaultCutWidth : e.width = d.width / 2, h.defaultCutHeight ? e.height = h.defaultCutHeight : e.height = d.height / 2, e.moveLeft = (d.width - e.width) / 2, e.moveTop = (d.height - e.height) / 2, e.scale = e.width / e.height;
+    }, T = () => {
+      window.removeEventListener("mousemove", D), window.removeEventListener("mousemove", H), window.removeEventListener("mousemove", $), window.removeEventListener("mouseup", T);
+    };
+    return te(() => h.originImage, (s) => {
+      R(s, (t) => {
+        x("getImg", t);
+      });
+    }), oe(() => {
+      j(), h.originImage && R(h.originImage, (s) => {
+        x("getImg", s);
+      });
+    }), ie(() => {
+      T();
+    }), (s, t) => (k(), E("div", {
+      class: ne([u(U)()]),
+      ref_key: "myCropper",
+      ref: W,
+      onMousewheel: m(q, ["stop", "prevent"])
+    }, [
+      l("div", de, [
+        l("div", {
+          class: "original-image-box",
+          style: S({
+            width: u(o).width + "px",
+            height: u(o).height + "px",
+            transform: Z.value
+          })
+        }, [
+          l("img", { src: b.originImage }, null, 8, me)
+        ], 4)
+      ]),
+      l("div", {
+        class: "outer-shadow",
+        onMousedown: m(G, ["stop", "prevent"])
+      }, null, 32),
+      l("div", {
+        class: "cut-box",
+        onMousedown: m(A, ["stop", "prevent"]),
+        style: S({
+          width: u(e).width + "px",
+          height: u(e).height + "px",
+          transform: `translate(${u(e).moveLeft}px, ${u(e).moveTop}px)`
+        })
+      }, [
+        b.showResolution ? (k(), E("div", ve, V(u(e).width) + " \xD7 " + V(u(e).height), 1)) : F("", !0),
+        l("div", he, [
+          l("img", {
+            src: b.originImage,
+            style: S({
+              width: u(o).width + "px",
+              height: u(o).height + "px",
+              transform: O.value
+            })
+          }, null, 12, pe)
+        ]),
+        b.enableCut ? (k(), E("div", re, [
+          l("div", {
+            class: "action-line left-line",
+            onMousedown: t[0] || (t[0] = m((i) => v(i, "left"), ["stop", "prevent"]))
+          }, null, 32),
+          l("div", {
+            class: "action-line top-line",
+            onMousedown: t[1] || (t[1] = m((i) => v(i, "top"), ["stop", "prevent"]))
+          }, null, 32),
+          l("div", {
+            class: "action-line right-line",
+            onMousedown: t[2] || (t[2] = m((i) => v(i, "right"), ["stop", "prevent"]))
+          }, null, 32),
+          l("div", {
+            class: "action-line bottom-line",
+            onMousedown: t[3] || (t[3] = m((i) => v(i, "bottom"), ["stop", "prevent"]))
+          }, null, 32),
+          l("div", {
+            class: "action-point top-left-point",
+            onMousedown: t[4] || (t[4] = m((i) => v(i, "top-left"), ["stop", "prevent"]))
+          }, null, 32),
+          l("div", {
+            class: "action-point top-center-point",
+            onMousedown: t[5] || (t[5] = m((i) => v(i, "top"), ["stop", "prevent"]))
+          }, null, 32),
+          l("div", {
+            class: "action-point top-right-point",
+            onMousedown: t[6] || (t[6] = m((i) => v(i, "top-right"), ["stop", "prevent"]))
+          }, null, 32),
+          l("div", {
+            class: "action-point right-center-point",
+            onMousedown: t[7] || (t[7] = m((i) => v(i, "right"), ["stop", "prevent"]))
+          }, null, 32),
+          l("div", {
+            class: "action-point right-bottom-point",
+            onMousedown: t[8] || (t[8] = m((i) => v(i, "bottom-right"), ["stop", "prevent"]))
+          }, null, 32),
+          l("div", {
+            class: "action-point bottom-center-point",
+            onMousedown: t[9] || (t[9] = m((i) => v(i, "bottom"), ["stop", "prevent"]))
+          }, null, 32),
+          l("div", {
+            class: "action-point bottom-left-point",
+            onMousedown: t[10] || (t[10] = m((i) => v(i, "bottom-left"), ["stop", "prevent"]))
+          }, null, 32),
+          l("div", {
+            class: "action-point left-center-point",
+            onMousedown: t[11] || (t[11] = m((i) => v(i, "left"), ["stop", "prevent"]))
+          }, null, 32)
+        ])) : F("", !0)
+      ], 36)
+    ], 34));
+  }
+});
+export {
+  we as default
+};

package/es/src/cropper/src/info-init.mjs

@@ -0,0 +1,51 @@
+import { reactive as s } from "vue";
+const t = s({
+  width: 0,
+  height: 0,
+  moveLeft: 0,
+  moveTop: 0,
+  scale: 1,
+  rotate: 0,
+  initWidth: 0,
+  initHeight: 0
+}), h = s({
+  width: 0,
+  height: 0
+}), n = s({
+  width: 0,
+  height: 0,
+  moveLeft: 0,
+  moveTop: 0,
+  scale: 0
+}), f = (o, c) => {
+  const e = document.createElement("img");
+  e.src = o, e.onload = () => {
+    const g = e.width / e.height, i = () => {
+      h.width <= e.width ? t.width = h.width : t.width = e.width, t.height = t.width / g;
+    }, d = () => {
+      h.height <= e.height ? t.height = h.height : t.height = e.height, t.width = t.height * g;
+    };
+    h.width >= h.height ? e.width > e.height ? i() : d() : e.width >= e.height ? i() : d(), t.initWidth = t.width, t.initHeight = t.height, t.moveLeft = (h.width - t.width) / 2, t.moveTop = (h.height - t.height) / 2, r(o, (m) => {
+      c(m);
+    });
+  };
+}, r = (o, c) => {
+  const e = document.createElement("canvas"), g = e.getContext("2d");
+  e.width = n.width, e.height = n.height;
+  let i = new Image();
+  i.src = o;
+  const d = t.width, m = t.height;
+  let a = t.moveLeft - n.moveLeft, w = t.moveTop - n.moveTop;
+  i.onload = () => {
+    g.drawImage(i, a, w, d, m);
+    const l = e.toDataURL("image/png", 1);
+    c(l);
+  };
+};
+export {
+  f as changeImage,
+  n as cutBox,
+  r as generateImg,
+  t as imgBox,
+  h as outerBox
+};

package/es/src/cropper/src/style/index.css

@@ -0,0 +1,170 @@
+.k-cropper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC);
+}
+.k-cropper .outer-shadow {
+  cursor: move;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.k-cropper .original-box {
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.k-cropper .original-box .original-image-box {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.k-cropper .original-box .original-image-box img {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  -webkit-user-drag: none;
+  height: 100%;
+}
+.k-cropper .cut-box {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  cursor: move;
+  background-color: rgba(255, 255, 255, 0.2);
+  outline: 1px solid rgba(51, 153, 255, 0.75);
+}
+.k-cropper .cut-box .resolution {
+  padding: 0 4px;
+  position: absolute;
+  font-size: 12px;
+  top: 0;
+  left: 0;
+  transform: translateY(-100%);
+  color: #ffffff;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+.k-cropper .cut-box .cut-image-box {
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+}
+.k-cropper .cut-box .cut-image-box img {
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  -webkit-user-drag: none;
+}
+.k-cropper .cut-box .action-line {
+  position: absolute;
+}
+.k-cropper .cut-box .action-line.left-line {
+  cursor: w-resize;
+  top: 0;
+  left: -3px;
+  width: 5px;
+  height: 100%;
+}
+.k-cropper .cut-box .action-line.top-line {
+  cursor: n-resize;
+  top: -3px;
+  left: 0;
+  height: 5px;
+  width: 100%;
+}
+.k-cropper .cut-box .action-line.right-line {
+  cursor: e-resize;
+  top: 0;
+  right: -3px;
+  height: 100%;
+  width: 5px;
+}
+.k-cropper .cut-box .action-line.bottom-line {
+  cursor: s-resize;
+  bottom: -3px;
+  left: 0;
+  height: 5px;
+  width: 100%;
+}
+.k-cropper .cut-box .action-point {
+  position: absolute;
+  background-color: rgba(51, 153, 255, 0.75);
+  width: 8px;
+  height: 8px;
+  border-radius: 100%;
+}
+.k-cropper .cut-box .action-point.top-left-point {
+  top: -4px;
+  left: -4px;
+  cursor: nw-resize;
+}
+.k-cropper .cut-box .action-point.top-center-point {
+  top: -4px;
+  right: 0;
+  left: 0;
+  margin: 0 auto;
+  cursor: n-resize;
+}
+.k-cropper .cut-box .action-point.top-right-point {
+  top: -4px;
+  right: -4px;
+  cursor: ne-resize;
+}
+.k-cropper .cut-box .action-point.right-center-point {
+  top: 0;
+  bottom: 0;
+  right: -4px;
+  margin: auto 0;
+  cursor: e-resize;
+}
+.k-cropper .cut-box .action-point.right-bottom-point {
+  bottom: -4px;
+  right: -4px;
+  cursor: se-resize;
+}
+.k-cropper .cut-box .action-point.bottom-center-point {
+  bottom: -4px;
+  right: 0;
+  left: 0;
+  margin: 0 auto;
+  cursor: s-resize;
+}
+.k-cropper .cut-box .action-point.bottom-left-point {
+  bottom: -4px;
+  left: -4px;
+  cursor: sw-resize;
+}
+.k-cropper .cut-box .action-point.left-center-point {
+  left: -4px;
+  top: 0;
+  bottom: 0;
+  margin: auto 0;
+  cursor: w-resize;
+}