@ganwei-web/gw-base-components-plus 1.0.0

package/widthSetting/dist/index.es.js

@@ -0,0 +1,113 @@
+import { createElementBlock as o, createElementVNode as m, normalizeClass as h, normalizeStyle as l, openBlock as d } from "vue";
+
+import "./style.css";
+const r = (t, e) => {
+  const i = t.__vccOpts || t;
+  for (const [s, n] of e) { i[s] = n; }
+  return i;
+}, a = {
+  props: {
+    leftSide: {
+      type: String,
+      default: ""
+    },
+    rightSide: {
+      type: String,
+      default: ""
+    },
+    side: {
+      type: String,
+      default: "right"
+    },
+    minWidth: {
+      type: Number,
+      default: 220
+    },
+    custom: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  data() {
+    return {
+      startLeft: 0,
+      endLeft: 0,
+      x: 0,
+      y: 0,
+      mask: null,
+      id: null,
+      maskId: null,
+      move: 0,
+      currentWidth: 0,
+      showResize: !1
+    };
+  },
+  created() {
+    this.id = this.generateUUID(), this.maskId = this.generateUUID(), this.mask = document.createElement("div"), this.mask.id = this.maskId, this.mask.style.position = "fixed", this.mask.style.top = "0px", this.mask.style.left = "0px", this.mask.style.width = "100%", this.mask.style.height = "100%", this.mask.style.zIndex = "10000", this.mask.style.cursor = "e-resize";
+  },
+  watch: {
+    currentWidth(t) {
+      t < this.minWidth && (this.currentWidth = this.minWidth);
+    }
+  },
+  mounted() {
+    this.currentWidth = this.getDom(this.leftSide).offsetWidth, this.leftSide && setTimeout(() => {
+      let t = document.getElementById(this.leftSide);
+      t || (t = document.getElementsByClassName(this.leftSide)[0]), t.classList.add("hoverActive");
+    }, 1e3), this.dragControl();
+  },
+  methods: {
+    generateUUID() {
+      let t = (/* @__PURE__ */ new Date()).getTime();
+      return window.performance && typeof window.performance.now == "function" && (t += performance.now()), "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(i) {
+        let s = (t + Math.random() * 16) % 16 | 0;
+        return t = Math.floor(t / 16), (i === "x" ? s : s & 3 | 8).toString(16);
+      });
+    },
+    getDom(t) {
+      let e = document.getElementById(t);
+      return e || (e = document.getElementsByClassName(t)[0]), e;
+    },
+    setLeftWidth(t) {
+      let e = this.getDom(this.leftSide), i = Number(t) + Number(this.currentWidth);
+      e && (i < this.minWidth ? e.style.width = Number(this.minWidth) + "px" : e.style.width = i + "px");
+    },
+    setRightWidth(t) {
+      let e = this.getDom(this.rightSide), i = Number(t) + Number(this.currentWidth);
+      e && (i < this.minWidth ? e.style.width = "calc(100% - " + this.minWidth + "px)" : e.style.width = "calc(100% - " + i + "px)");
+    },
+    setData(t) {
+      document.body.removeChild(document.getElementById(this.maskId)), this.showResize = !1, t = t || window.event;
+      let e = 0;
+      this.currentWidth = this.getDom(this.leftSide).offsetWidth, this.custom && (window.top == window ? t.clientX > this.minWidth ? (document.documentElement.style.setProperty("--maxActiveWidth", this.currentWidth), e = t.clientX) : (document.documentElement.style.setProperty("--maxActiveWidth", this.minWidth), e = this.minWidth) : e = t.clientX, this.$emit("resizeEnd", e - this.x)), this.mask.onmousemove = null, this.mask.onmouseup = null, this.mask.onmouseout = null;
+    },
+    dragControl() {
+      let t = document.getElementById(this.id);
+      t.onmousedown = (e) => {
+        this.x = e.clientX;
+        let i = e.clientX;
+        document.body.appendChild(this.mask), this.showResize = !0, this.mask.onmousemove = (s) => {
+          let n = s.clientX;
+          this.side == "right" ? this.move = n - i : this.move = i - n, s = s || window.event, this.setLeftWidth(this.move), this.setRightWidth(this.move);
+        }, this.mask.onmouseup = (s) => {
+          this.setData(s);
+        }, this.mask.onmouseout = (s) => {
+          this.setData(s);
+        };
+      };
+    }
+  }
+}, u = ["id"];
+function c(t, e, i, s, n, f) {
+  return d(), o("div", {
+    class: h(["resizeTransform", { showResize: n.showResize }]),
+    id: n.id,
+    style: l({ [i.side]: "0px" })
+  }, e[0] || (e[0] = [
+    m("div", { class: "bar" }, null, -1)
+  ]), 14, u);
+}
+const y = /* @__PURE__ */ r(a, [["render", c], ["__scopeId", "data-v-3c8b1ffb"]]);
+export {
+  y as default
+};

package/widthSetting/dist/index.umd.js

@@ -0,0 +1 @@
+(function(n, o){ typeof exports == "object" && typeof module < "u" ? module.exports = o(require("vue")) : typeof define == "function" && define.amd ? define(["vue"], o) : (n = typeof globalThis < "u" ? globalThis : n || self, n.index = o(n.Vue)) })(this, function(n){ "use strict";const o = "", h = (t, e)=>{ const i = t.__vccOpts || t;for(const[s, d]of e){ i[s] = d; }return i }, l = {props: {leftSide: {type: String, default: ""}, rightSide: {type: String, default: ""}, side: {type: String, default: "right"}, minWidth: {type: Number, default: 220}, custom: {type: Boolean, default: !1}}, data(){ return{startLeft: 0, endLeft: 0, x: 0, y: 0, mask: null, id: null, maskId: null, move: 0, currentWidth: 0, showResize: !1} }, created(){ this.id = this.generateUUID(), this.maskId = this.generateUUID(), this.mask = document.createElement("div"), this.mask.id = this.maskId, this.mask.style.position = "fixed", this.mask.style.top = "0px", this.mask.style.left = "0px", this.mask.style.width = "100%", this.mask.style.height = "100%", this.mask.style.zIndex = "10000", this.mask.style.cursor = "e-resize" }, watch: {currentWidth(t){ t < this.minWidth && (this.currentWidth = this.minWidth) }}, mounted(){ this.currentWidth = this.getDom(this.leftSide).offsetWidth, this.leftSide && setTimeout(()=>{ let t = document.getElementById(this.leftSide);t || (t = document.getElementsByClassName(this.leftSide)[0]), t.classList.add("hoverActive") }, 1e3), this.dragControl() }, methods: {generateUUID(){ let t = new Date().getTime();return window.performance && typeof window.performance.now == "function" && (t += performance.now()), "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(i){ let s = (t + Math.random() * 16) % 16 | 0;return t = Math.floor(t / 16), (i === "x" ? s : s & 3 | 8).toString(16) }) }, getDom(t){ let e = document.getElementById(t);return e || (e = document.getElementsByClassName(t)[0]), e }, setLeftWidth(t){ let e = this.getDom(this.leftSide), i = Number(t) + Number(this.currentWidth);e && (i < this.minWidth ? e.style.width = Number(this.minWidth) + "px" : e.style.width = i + "px") }, setRightWidth(t){ let e = this.getDom(this.rightSide), i = Number(t) + Number(this.currentWidth);e && (i < this.minWidth ? e.style.width = "calc(100% - " + this.minWidth + "px)" : e.style.width = "calc(100% - " + i + "px)") }, setData(t){ document.body.removeChild(document.getElementById(this.maskId)), this.showResize = !1, t = t || window.event;let e = 0;this.currentWidth = this.getDom(this.leftSide).offsetWidth, this.custom && (window.top == window ? t.clientX > this.minWidth ? (document.documentElement.style.setProperty("--maxActiveWidth", this.currentWidth), e = t.clientX) : (document.documentElement.style.setProperty("--maxActiveWidth", this.minWidth), e = this.minWidth) : e = t.clientX, this.$emit("resizeEnd", e - this.x)), this.mask.onmousemove = null, this.mask.onmouseup = null, this.mask.onmouseout = null }, dragControl(){ let t = document.getElementById(this.id);t.onmousedown = e=>{ this.x = e.clientX;let i = e.clientX;document.body.appendChild(this.mask), this.showResize = !0, this.mask.onmousemove = s=>{ let d = s.clientX;this.side == "right" ? this.move = d - i : this.move = i - d, s = s || window.event, this.setLeftWidth(this.move), this.setRightWidth(this.move) }, this.mask.onmouseup = s=>{ this.setData(s) }, this.mask.onmouseout = s=>{ this.setData(s) } } }}}, m = ["id"];function r(t, e, i, s, d, a){ return n.openBlock(), n.createElementBlock("div", {class: n.normalizeClass(["resizeTransform", {showResize: d.showResize}]), id: d.id, style: n.normalizeStyle({[i.side]: "0px"})}, e[0] || (e[0] = [n.createElementVNode("div", {class: "bar"}, null, -1)]), 14, m) }return h(l, [["render", r], ["__scopeId", "data-v-3c8b1ffb"]]) });

package/widthSetting/dist/style.css

@@ -0,0 +1 @@
+.resizeTransform[data-v-3c8b1ffb]{width:8px;height:100%;position:absolute;cursor:e-resize;top:0%;right:0;font-size:30px;color:var(--bor-default);background-color:transparent;transition:all .1s ease-in-out;display:flex;justify-content:flex-end}.resizeTransform .bar[data-v-3c8b1ffb]{width:2px;height:100%}.resizeTransform svg[data-v-3c8b1ffb]{position:absolute;top:300px;left:0;display:none;transform:translate(-50%)}.hoverActive:hover .resizeTransform[data-v-3c8b1ffb]{transition:all 1s ease-in-out}.showResize[data-v-3c8b1ffb]{cursor:e-resize}.showResize svg[data-v-3c8b1ffb]{display:block}