btt-ui 1.0.0

package/es/src/directives/drag.mjs

@@ -0,0 +1,121 @@
+class f {
+  constructor(e, t) {
+    this._result = {}, this._x = 0, this._y = 0, this._scale = 1, this._minScale = 0.5, this._angle = 0, this._maxScale = 4, this._isPointerdown = !1, this._diff = { x: 0, y: 0 }, this._lastPointermove = { x: 0, y: 0 }, this._curImgIndex = 0, this._mask = document.createElement("div"), this._binding = {
+      type: "transform",
+      list: new Array(),
+      el: ""
+    }, this._binding = t != null ? t : { type: "transform", list: new Array(), el: "" }, this._image = e;
+  }
+  resetConfig() {
+    this._x = 0, this._y = 0, this._scale = 1;
+  }
+  build() {
+    this._mask = document.createElement("div"), this._mask.classList.add("k-img-preview-mask");
+    let e = document.createElement("div");
+    e.className = "k-icon-close-btn k-img-close", this._mask.appendChild(e), e.onclick = () => {
+      this.remove();
+    };
+    let t = new Image();
+    t.onload = () => {
+      this._mask.appendChild(t), this.resetConfig(), this._result = this._getImgSize(t.naturalWidth, t.naturalHeight, this._mask.offsetWidth, this._mask.offsetHeight), t.style.width = this._result.width + "px", t.style.height = this._result.height + "px", this._x = (this._mask.offsetWidth - this._result.width) * 0.5, this._y = (this._mask.offsetHeight - this._result.height) * 0.5, this._binding.type == "transform" ? t.style.transform = "translate3d(" + this._x + "px, " + this._y + "px, 0) scale(" + this._scale + ")" : (t.style.transform = `scale(${this._scale})`, t.style.transition = "transform 0.6s ease-out", t.style.marginLeft = this._x + "px", t.style.marginTop = this._y + "px"), this._drag(t), this._wheelZoom(t);
+    };
+    let s = document.createElement("ul");
+    s.className = "action-item-wapper";
+    let n = document.createElement("li");
+    n.className = "action-item rotate-left", n.setAttribute("data-key", "rotateleft"), s.appendChild(n);
+    let r = document.createElement("li");
+    r.className = "action-item rotate-right", r.setAttribute("data-key", "rotateright"), s.appendChild(r);
+    let _ = document.createElement("ul");
+    _.className = "dragger-file-list-wapper", t.src = this._image.src;
+    let a = new Array();
+    const h = () => {
+      a.forEach((i) => {
+        i.className = "";
+      });
+    };
+    Array.isArray(this._binding.list) ? typeof this._binding.list[0] == "string" ? (this._curImgIndex = this._binding.list.findIndex((i) => i == this._image.src), this._binding.list && this._binding.list.forEach((i, d) => {
+      let l = document.createElement("li");
+      l.className = this._curImgIndex == d ? "cur" : "";
+      let o = document.createElement("img");
+      o.setAttribute("src", i), l.append(o), _.appendChild(l), a.push(l), l.onclick = function() {
+        t.style.transform = "scale(0)", t.src = i, h(), l.className = "cur";
+      };
+    })) : (this._curImgIndex = this._binding.list.findIndex((i) => i.url == this._image.src), this._binding.list && this._binding.list.forEach((i, d) => {
+      let l = document.createElement("li");
+      l.className = this._curImgIndex == d ? "cur" : "";
+      let o = document.createElement("img");
+      o.setAttribute("src", i.url), l.append(o), _.appendChild(l), a.push(l), l.onclick = function() {
+        t.style.transform = "scale(0)", t.src = i.url, h(), l.className = "cur";
+      };
+    })) : _.style.display = "none";
+    let m = {
+      rotateleft: () => {
+        this._angle -= 90, this._binding.type == "transform" ? t.style.transform = `translate3d(${this._x}px, ${this._y}px, 0) scale(${this._scale}) rotate(${this._angle}deg)` : t.style.transform = `rotate(${this._angle}deg)`;
+      },
+      rotateright: () => {
+        this._angle += 90, this._binding.type == "transform" ? t.style.transform = `translate3d(${this._x}px, ${this._y}px, 0) scale(${this._scale}) rotate(${this._angle}deg)` : t.style.transform = `rotate(${this._angle}deg)`;
+      }
+    };
+    s.onclick = (i) => {
+      i.target.dataset.key && m[i.target.dataset.key]();
+    }, this._mask.appendChild(s), this._mask.appendChild(_), this._binding.el ? document.querySelector(this._binding.el).appendChild(this._mask) : document.body.appendChild(this._mask);
+  }
+  _getImgSize(e, t, s, n) {
+    const r = e / t, _ = s / n;
+    let a, h;
+    return r >= _ ? e > s ? (a = s, h = s / e * t) : (a = e, h = t) : t > n ? (a = n / t * e, h = n) : (a = e, h = t), { width: a, height: h };
+  }
+  _drag(e) {
+    e.addEventListener("pointerdown", (t) => {
+      this._isPointerdown = !0, e.setPointerCapture(t.pointerId), this._lastPointermove = { x: t.clientX, y: t.clientY };
+    }), e.addEventListener("pointermove", (t) => {
+      if (this._isPointerdown) {
+        const s = { x: t.clientX, y: t.clientY };
+        this._diff.x = s.x - this._lastPointermove.x, this._diff.y = s.y - this._lastPointermove.y, this._lastPointermove = { x: s.x, y: s.y }, this._x += this._diff.x, this._y += this._diff.y, this._binding.type == "transform" ? e.style.transform = `translate3d(${this._x}px, ${this._y}px, 0) scale(${this._scale}) rotate(${this._angle}deg)` : (e.style.marginLeft = this._x + "px", e.style.marginTop = this._y + "px");
+      }
+      t.preventDefault();
+    }), e.addEventListener("pointerup", (t) => {
+      this._isPointerdown && (this._isPointerdown = !1);
+    }), e.addEventListener("pointercancel", (t) => {
+      this._isPointerdown && (this._isPointerdown = !1);
+    });
+  }
+  _wheelZoom(e) {
+    this._mask.addEventListener("wheel", (t) => {
+      let s = 1.1;
+      t.deltaY > 0 && (s = 1 / 1.1);
+      const n = this._scale * s;
+      if (n > this._maxScale ? (s = this._maxScale / this._scale, this._scale = this._maxScale) : n < this._minScale ? (s = this._minScale / this._scale, this._scale = this._minScale) : this._scale = n, t.target.tagName === "IMG")
+        if (this._binding.type == "transform") {
+          const r = {
+            x: (s - 1) * this._result.width * 0.5,
+            y: (s - 1) * this._result.height * 0.5
+          };
+          this._x -= (s - 1) * (t.clientX - this._x) - r.x, this._y -= (s - 1) * (t.clientY - this._y) - r.y;
+        } else
+          this._x -= (s - 1) * (t.clientX - this._x), this._y -= (s - 1) * (t.clientY - this._y);
+      this._binding.type == "transform" ? e.style.transform = `translate3d(${this._x}px, ${this._y}px, 0) scale(${this._scale}) rotate(${this._angle}deg)` : (e.style.marginLeft = this._x + "px", e.style.marginTop = this._y + "px", e.style.width = this._result.width * this._scale + "px", e.style.height = this._result.height * this._scale + "px"), t.preventDefault();
+    });
+  }
+  reset() {
+    this._scale = 0.7, this._mask = document.createElement("div");
+  }
+  remove() {
+    this._mask.innerHTML = "", this._mask.remove(), this.reset();
+  }
+}
+const p = {
+  mounted(c, e) {
+    let t = e.value, s = new f(c, { ...t });
+    c.onclick = () => {
+      s.build();
+    };
+  },
+  unmounted() {
+    console.log("distory");
+  }
+};
+export {
+  f as Dragger,
+  p as dragger
+};

package/es/src/directives/index.mjs

@@ -0,0 +1,10 @@
+import { Dragger as e, dragger as m } from "./drag.mjs";
+import { ZoomIn as b, zoomIn as f } from "./zoomIn.mjs";
+import { bubble as t } from "./bubble.mjs";
+export {
+  e as Dragger,
+  b as ZoomIn,
+  t as bubble,
+  m as dragger,
+  f as zoomIn
+};

package/es/src/directives/zoomIn.mjs

@@ -0,0 +1,43 @@
+let h;
+class a {
+  constructor(t, i) {
+    var s;
+    this._wrapper = document.createElement("div"), this._maxWidth = 600, this._point = {
+      x: 0,
+      y: 0
+    }, this._maxWidth = (s = i.size) != null ? s : this._maxWidth, this.init(t);
+  }
+  init(t) {
+    this._wrapper.className = "k-img-zoom-wapper";
+    let i = document.createElement("div");
+    i.style = "width:100%;height:100%;background:#ffffff;", this._wrapper.appendChild(i), this.img = new Image(), this.img.classList.add("k-img-zoom"), this.img.onload = () => {
+      this.img.width = this.img.width > this._maxWidth ? this._maxWidth : this.img.width, i.appendChild(this.img);
+    }, this.img.src = t.src, document.body.appendChild(this._wrapper), this.bindEvent(t);
+  }
+  bindEvent(t) {
+    t.onmousemove = (i) => {
+      this._wrapper.style.left = `${i.pageX + 5}px`, this._wrapper.style.top = `${i.pageY + 5}px`, this._wrapper.classList.add("on");
+    }, t.onmouseleave = (i) => {
+      this._wrapper.classList.remove("on");
+    };
+  }
+  updateSrc(t) {
+    this.img.src = t;
+  }
+  hide() {
+    this._wrapper.classList.remove("on");
+  }
+}
+const m = {
+  mounted(e, t) {
+    let i = t.value;
+    h = new a(e, { ...i });
+  },
+  unmounted() {
+    h._wrapper.remove();
+  }
+};
+export {
+  a as ZoomIn,
+  m as zoomIn
+};

package/es/src/drag/index.mjs

@@ -0,0 +1,7 @@
+import t from "./src/drag.mjs";
+import { withInstall as o } from "../../assets/ts/utils.mjs";
+const m = o(t);
+export {
+  m as Drag,
+  m as default
+};

package/es/src/drag/src/drag.mjs

@@ -0,0 +1,78 @@
+import { defineComponent as d, ref as r, watch as m, nextTick as y, openBlock as x, createBlock as w, unref as C, withModifiers as s, withCtx as k, createElementVNode as P, normalizeStyle as g, renderSlot as h, createCommentVNode as E } from "vue";
+import { Overlay as B } from "../../overlay/index.mjs";
+import "./style/index.css";
+const L = d({
+  name: "k-drag"
+}), M = d({
+  ...L,
+  props: {
+    width: { default: 800 },
+    showClose: { type: Boolean, default: !0 },
+    modelValue: { type: Boolean, default: !1 },
+    closeDelay: { default: 0 },
+    beforeClose: {},
+    closeOnClickModal: { type: Boolean, default: !0 }
+  },
+  emits: ["close", "closed"],
+  setup(u, { emit: v }) {
+    const a = u, i = v, o = r(), e = r({
+      isPointerdown: !1,
+      rect: {},
+      lastPointermove: { x: 0, y: 0 },
+      diff: { x: 0, y: 0 },
+      x: 0,
+      y: 0
+    }), c = () => {
+      e.value.isPointerdown = !1, e.value.rect = {}, e.value.lastPointermove = { x: 0, y: 0 }, e.value.diff = { x: 0, y: 0 }, e.value.x = 0, e.value.y = 0;
+      const t = () => {
+        setTimeout(() => {
+          i("closed");
+        }, a.closeDelay);
+      };
+      if (a.beforeClose)
+        return a.beforeClose(() => t());
+      i("close"), t();
+    }, f = () => {
+      a.closeOnClickModal && c();
+    };
+    m(() => a.modelValue, (t) => {
+      t && y(p);
+    });
+    const p = () => {
+      o.value.addEventListener("pointerdown", (l) => {
+        e.value.isPointerdown = !0, e.value.lastPointermove = { x: l.clientX, y: l.clientY }, e.value.rect = o.value.getBoundingClientRect();
+      }), o.value.addEventListener("pointermove", (l) => {
+        if (e.value.isPointerdown) {
+          const n = { x: l.clientX, y: l.clientY };
+          e.value.diff.x = n.x - e.value.lastPointermove.x, e.value.diff.y = n.y - e.value.lastPointermove.y, e.value.lastPointermove = { x: n.x, y: n.y }, e.value.x += e.value.diff.x, e.value.y += e.value.diff.y, o.value.style.transform = "translate3d(" + e.value.x + "px, " + e.value.y + "px, 0)", l.preventDefault();
+        }
+      });
+      const t = () => {
+        e.value.isPointerdown && (e.value.isPointerdown = !1);
+      };
+      o.value.addEventListener("pointerup", t), o.value.addEventListener("pointercancel", t), o.value.addEventListener("mouseleave", t), o.value.addEventListener("mouseup", t);
+    };
+    return (t, l) => t.modelValue ? (x(), w(C(B), {
+      key: 0,
+      class: "k-content-center",
+      onClick: s(f, ["stop"])
+    }, {
+      default: k(() => [
+        P("div", {
+          class: "k-drag slide-in-top",
+          ref_key: "dragWrapper",
+          ref: o,
+          style: g({ width: t.width + "px" }),
+          onClick: l[0] || (l[0] = s(() => {
+          }, ["stop"]))
+        }, [
+          h(t.$slots, "default")
+        ], 4)
+      ]),
+      _: 3
+    })) : E("", !0);
+  }
+});
+export {
+  M as default
+};

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

@@ -0,0 +1,25 @@
+.k-content-center {
+  text-align: center;
+}
+.k-content-center::after {
+  display: inline-block;
+  width: 0;
+  height: 100%;
+  vertical-align: middle;
+  content: "";
+}
+
+.k-drag {
+  width: 1000px;
+  height: 600px;
+  display: inline-block;
+  background-color: blue;
+  vertical-align: middle;
+  text-align: left;
+  position: relative;
+}
+.k-drag .k-drag__header {
+  height: 50px;
+  background-color: red;
+  cursor: move;
+}

package/es/src/echarts/index.mjs

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

package/es/src/echarts/src/index.mjs

@@ -0,0 +1,113 @@
+import { defineComponent as u, ref as p, onMounted as d, openBlock as m, createBlock as y, unref as r, withCtx as x, createElementVNode as a, normalizeClass as b, renderSlot as h, createTextVNode as k, createVNode as N, createCommentVNode as S } from "vue";
+import { Drag as C } from "../../drag/index.mjs";
+import * as g from "echarts";
+import { createNamespace as B } from "../../../assets/ts/utils.mjs";
+import { Icon as _ } from "../../icon/index.mjs";
+import "./style/index.css";
+import i from "./ts/factory.mjs";
+const V = { class: "k-echart-header" }, j = u({
+  name: "k-echarts"
+}), w = u({
+  ...j,
+  props: {
+    modelValue: {
+      type: Boolean,
+      default: !0
+    },
+    data: {
+      type: Array,
+      default: [150, 230, 224, 218, 135, 147, 260]
+    },
+    xAxis: {
+      type: Object,
+      default: () => {
+      }
+    },
+    yAxis: {
+      type: Object,
+      default: () => {
+      }
+    },
+    tooltip: {
+      type: Object,
+      default: () => {
+      }
+    },
+    type: {
+      type: String,
+      default: "line"
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    fontSize: {
+      type: Number,
+      default: 14
+    },
+    maxMinFontSize: {
+      type: Number,
+      default: 26
+    },
+    backgroundColor: {
+      type: String,
+      default: "#0E2B67"
+    },
+    lineColors: {
+      type: Array,
+      default: ["#49fcf0"]
+    },
+    grid: {
+      type: Object,
+      default: () => {
+      }
+    },
+    xName: {
+      type: String,
+      default: "\u65B9\u4F4D\u89C6\u5411\u89D2(\xB0)"
+    },
+    yName: {
+      type: String,
+      default: "RCS(dBm\xB2)"
+    },
+    xSize: {
+      type: Number,
+      default: 6
+    }
+  },
+  emits: ["close"],
+  setup(o, { emit: c }) {
+    const { n: s } = B("echart-wrapper"), l = p(), e = o, f = c;
+    return d(() => {
+      let t = g.init(l.value);
+      e.type == "line" || e.type == "bar" ? i.line(t, e) : e.type == "polar" && i.polar(t, e);
+    }), (t, n) => o.modelValue ? (m(), y(r(C), { key: 0 }, {
+      default: x(() => [
+        a("div", {
+          class: b([r(s)()])
+        }, [
+          a("div", V, [
+            h(t.$slots, "default", {}, () => [
+              k("\u8FD9\u662F\u6807\u9898")
+            ]),
+            N(r(_), {
+              name: "close",
+              size: "16",
+              class: "k-icon-close",
+              onClick: n[0] || (n[0] = (v) => f("close"))
+            })
+          ]),
+          a("div", {
+            class: "k-echart-content",
+            ref_key: "echartsRef",
+            ref: l
+          }, null, 512)
+        ], 2)
+      ]),
+      _: 3
+    })) : S("", !0);
+  }
+});
+export {
+  w as default
+};

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

@@ -0,0 +1,30 @@
+.k-echart-wrapper {
+  width: 100%;
+  height: 100%;
+  background: red;
+  display: flex;
+  flex-direction: column;
+  pointer-events: none;
+}
+.k-echart-wrapper .k-echart-header {
+  width: 100%;
+  height: 40px;
+  background: var(--k-color-primary);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--k-color-white);
+}
+.k-echart-wrapper .k-echart-header .k-icon-close {
+  position: absolute;
+  right: 10px;
+  cursor: pointer;
+  pointer-events: all;
+}
+.k-echart-wrapper .k-echart-content {
+  flex: 1;
+  width: 100%;
+  background-color: yellow;
+  pointer-events: all;
+}