easy-component-ui 3.0.15 → 4.0.2

package/dist/components/ea-splitter.js

@@ -1,233 +1,381 @@
-var $ = Object.defineProperty;
-var W = (e) => {
-  throw TypeError(e);
-};
-var k = (e, s, t) => s in e ? $(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
-var f = (e, s, t) => k(e, typeof s != "symbol" ? s + "" : s, t), L = (e, s, t) => s.has(e) || W("Cannot " + t);
-var n = (e, s, t) => (L(e, s, "read from private field"), t ? t.call(e) : s.get(e)), c = (e, s, t) => s.has(e) ? W("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), b = (e, s, t, i) => (L(e, s, "write to private field"), i ? i.call(e, t) : s.set(e, t), t);
-import { B as N } from "./Base.js";
+import { E as P } from "../core/EaBase.ts.js";
+import { q as R, a as g, C as N, l as $, p as B } from "../core/decorator.js";
+import { E as D } from "../utils/Enum.ts.js";
 import { s as I } from "../css/ea-splitter.style.js";
-import { s as M } from "../css/ea-splitter-panel.style.js";
-import { s as q } from "../css/ea-splitter-bar.style.js";
-const d = (e) => e.endsWith("px") ? parseInt(e.replace("px", "")) : e.endsWith("%") ? Number(e.replace("%", "")) / 100 : parseInt(e);
-var a, m, h, y, v;
-class D extends N {
+import { c as H } from "../utils/bem.ts.js";
+import { s as V } from "../css/ea-splitter-panel.style.js";
+import { s as X } from "../css/ea-splitter-bar.style.js";
+class y extends Event {
+  constructor(i) {
+    super("ea-panel-resize-start", { bubbles: !0, composed: !0 }), this.detail = i;
+  }
+}
+class b extends Event {
+  constructor(i) {
+    super("ea-panel-resize", { bubbles: !0, composed: !0 }), this.detail = i;
+  }
+}
+class E extends Event {
+  constructor(i) {
+    super("ea-panel-resize-end", { bubbles: !0, composed: !0 }), this.detail = i;
+  }
+}
+var Y = Object.defineProperty, q = Object.getOwnPropertyDescriptor, w = (t, i, s, e) => {
+  for (var n = e > 1 ? void 0 : e ? q(i, s) : i, r = t.length - 1, a; r >= 0; r--)
+    (a = t[r]) && (n = (e ? a(i, s, n) : a(n)) || n);
+  return e && n && Y(i, s, n), n;
+};
+const W = "ea-splitter", M = H(W), c = (t) => {
+  if (!t || t.trim() === "") return 0;
+  if (t.endsWith("px")) return parseInt(t.replace("px", ""));
+  if (t.endsWith("%")) return Number(t.replace("%", "")) / 100;
+  const i = parseInt(t);
+  return isNaN(i) ? 0 : i;
+};
+let S = class extends P {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    c(this, a);
-    /** @type {AbortController} */
-    c(this, m);
-    f(this, "state", this.properties({
-      layout: {
-        type: ["horizontal", "vertical"],
-        default: "horizontal",
-        observer: (t) => {
-          n(this, a).style.setProperty(
-            "--ea-splitter-direction",
-            t === "vertical" ? "column" : "row"
-          ), n(this, a).className = this.updateContainerClasslist();
-        }
-      }
-    }));
-    /**
-     * 派发 resizeStart 事件
-     * @param {string} eventName 事件名称
-     */
-    c(this, h, (t) => {
-      this.dispatchEvent(
-        new CustomEvent(t, {
-          detail: {
-            size: [...this.children].filter((i) => i.tagName === "EA-SPLITTER-PANEL").map(
-              (i) => {
-                var o;
-                return (o = i.getBoundingClientRect()) == null ? void 0 : o[this.layout === "vertical" ? "height" : "width"];
-              }
-            )
-          }
-        })
-      );
-    });
-    /**
-     * `layout="horizontal"` 时的 `resize` 事件监听
-     * @param {MouseEvent} e
-     */
-    c(this, y, (t) => {
-      t.preventDefault(), t.stopPropagation();
-      const i = new AbortController(), o = Number(t.target.getAttribute("data-index")), r = this.children[o - 1], l = this.children[o + 1], R = t.clientX, z = r.getBoundingClientRect().width, P = l.getBoundingClientRect().width;
-      n(this, h).call(this, "panel-resize-start");
-      const S = (H) => {
+    super(...arguments), this.layout = "horizontal", this._handleHorizontalResize = (t, i) => {
+      const s = new AbortController(), e = this.children[i - 1], n = this.children[i + 1], r = this.children[i], a = t.clientX, o = e.getBoundingClientRect().width, l = n.getBoundingClientRect().width;
+      this._dispatchResizeEvent(y);
+      const h = (f) => {
         t.preventDefault(), t.stopPropagation();
-        const g = H.clientX - R, C = z + g, w = P - g;
-        let p = 0, u = 0;
-        r.min.endsWith("%") ? (p = n(this, a).clientWidth * d(r.min), u = n(this, a).clientWidth * d(l.min)) : r.min.endsWith("px") && (p = d(r.min), u = d(l.min)), !(C <= p || w <= u) && (r.size = C + "px", l.size = w + "px", n(this, h).call(this, "panel-resize"));
-      }, A = () => {
-        i.abort(), n(this, h).call(this, "panel-resize-end");
+        const m = f.clientX - a, v = o + m, C = l - m;
+        let z = 0, _ = 0;
+        e.min.endsWith("%") ? (z = this._container.clientWidth * c(e.min), _ = this._container.clientWidth * c(n.min)) : e.min.endsWith("px") && (z = c(e.min), _ = c(n.min)), !(v <= z || C <= _) && (e.size = v + "px", n.size = C + "px", this._updateBarA11y(r, e), this._dispatchResizeEvent(b));
+      }, u = () => {
+        s.abort(), this._dispatchResizeEvent(E);
       };
-      window.addEventListener("mousemove", S, {
-        signal: i.signal
-      }), window.addEventListener("mouseup", A, {
-        signal: i.signal
+      window.addEventListener("mousemove", h, {
+        signal: s.signal
+      }), window.addEventListener("mouseup", u, {
+        signal: s.signal
       });
-    });
-    /**
-     * `layout="vertical"` 时的 `resize` 事件监听
-     * @param {MouseEvent} e
-     */
-    c(this, v, (t) => {
-      t.preventDefault(), t.stopPropagation();
-      const i = new AbortController(), o = Number(t.target.getAttribute("data-index")), r = this.children[o - 1], l = this.children[o + 1], R = t.clientY, z = r.getBoundingClientRect().height, P = l.getBoundingClientRect().height;
-      n(this, h).call(this, "resize-start");
-      const S = (H) => {
+    }, this._handleVerticalResize = (t, i) => {
+      const s = new AbortController(), e = this.children[i - 1], n = this.children[i + 1], r = this.children[i], a = t.clientY, o = e.getBoundingClientRect().height, l = n.getBoundingClientRect().height;
+      this._dispatchResizeEvent(y);
+      const h = (f) => {
         t.preventDefault(), t.stopPropagation();
-        const g = H.clientY - R, C = z + g, w = P - g;
-        let p = 0, u = 0;
-        r.min.endsWith("%") ? (p = n(this, a).clientHeight * d(r.min), u = n(this, a).clientHeight * d(l.min)) : r.min.endsWith("px") && (p = d(r.min), u = d(l.min)), !(C <= p || w <= u) && (r.size = C + "px", l.size = w + "px", n(this, h).call(this, "panel-resize"));
-      }, A = () => {
-        i.abort(), n(this, h).call(this, "panel-resize-end");
+        const m = f.clientY - a, v = o + m, C = l - m;
+        let z = 0, _ = 0;
+        e.min.endsWith("%") ? (z = this._container.clientHeight * c(e.min), _ = this._container.clientHeight * c(n.min)) : e.min.endsWith("px") && (z = c(e.min), _ = c(n.min)), !(v <= z || C <= _) && (e.size = v + "px", n.size = C + "px", this._updateBarA11y(r, e), this._dispatchResizeEvent(b));
+      }, u = () => {
+        s.abort(), this._dispatchResizeEvent(E);
       };
-      window.addEventListener("mousemove", S, {
-        signal: i.signal
-      }), window.addEventListener("mouseup", A, {
-        signal: i.signal
+      window.addEventListener("mousemove", h, {
+        signal: s.signal
+      }), window.addEventListener("mouseup", u, {
+        signal: s.signal
       });
-    });
-    this.stylesheet = I, this.$render();
-  }
-  static get observedAttributes() {
-    return ["layout"];
+    }, this._panelIdCounter = 0;
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-          <div class="ea-splitter" part="container">
-            <slot></slot>
-          </div>
-        `, b(this, a, this.shadowRoot.querySelector(".ea-splitter"));
+  /** 更新容器类名 */
+  updateContainerClasslist() {
+    return M({ [this.layout]: !0 });
   }
   /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
+   * 派发 resize 事件
+   * @param EventClass 事件类构造函数
    */
-  updateContainerClasslist() {
-    return this.computedClasslist("ea-splitter", {
-      ["--" + this.layout]: !!(this.layout || this.layout === "")
-    });
+  _dispatchResizeEvent(t) {
+    const i = [...this.children].filter((s) => s.tagName === "EA-SPLITTER-PANEL").map(
+      (s) => {
+        var e;
+        return (e = s.getBoundingClientRect()) == null ? void 0 : e[this.layout === "vertical" ? "height" : "width"];
+      }
+    );
+    this.dispatchEvent(new t({ size: i }));
   }
-  connectedCallback() {
-    super.connectedCallback(), b(this, m, new AbortController()), queueMicrotask(() => {
-      let t = [...this.children];
-      [...this.children].forEach((i, o) => {
-        if (i.tagName === "EA-SPLITTER-PANEL" && (i.layout = this.layout, i.setAttribute("data-panel-index", o), o < t.length - 1)) {
-          const r = document.createElement("ea-splitter-bar");
-          this.insertBefore(r, i.nextSibling);
-        }
-      }), t = [...this.children], t.forEach((i, o) => {
-        i.tagName === "EA-SPLITTER-BAR" && (i.setAttribute("data-index", o), i.layout = this.layout, i.addEventListener(
-          "mousedown",
-          this.layout === "horizontal" ? n(this, y) : n(this, v),
-          { signal: n(this, m).signal }
-        ));
-      });
-    });
+  /**
+   * 更新分隔条的 a11y 属性
+   * @param bar 分隔条元素
+   * @param prePanel 前一个面板元素
+   */
+  _updateBarA11y(t, i) {
+    const s = this.layout === "vertical" ? this._container.clientHeight : this._container.clientWidth, e = i.getBoundingClientRect()[this.layout === "vertical" ? "height" : "width"], n = s > 0 ? Math.round(e / s * 100) : 50;
+    t.valuenow = n;
   }
-  $beforeUnmounted() {
-    var t;
-    (t = n(this, m)) == null || t.abort();
+  /**
+   * 获取面板的最小尺寸（像素）
+   * @param panel 面板元素
+   * @param containerSize 容器尺寸
+   */
+  _getMinSize(t, i) {
+    return t.min ? t.min.endsWith("%") ? i * c(t.min) : c(t.min) : 0;
   }
-}
-a = new WeakMap(), m = new WeakMap(), h = new WeakMap(), y = new WeakMap(), v = new WeakMap();
-window.customElements.get("ea-splitter") || window.customElements.define("ea-splitter", D);
-var E;
-class X extends N {
-  constructor() {
-    super();
-    /** @type {HTMLElement} */
-    c(this, E);
-    f(this, "state", this.properties({
-      size: {
-        type: String,
-        default: "",
-        observer: (t) => {
-          CSS.supports("width", t) && this.style.setProperty("--ea-splitter-panel-size", t);
-        }
-      },
-      min: {
-        type: String,
-        default: "",
-        observer: (t) => {
-          CSS.supports("width", t) && this.style.setProperty("--ea-splitter-panel-min-size", t);
-        }
-      },
-      layout: {
-        type: ["vertical", "horizontal"],
-        default: "horizontal",
-        observer: (t) => {
-        }
-      }
-    }));
-    this.stylesheet = M, this.$render();
+  /**
+   * 对指定 bar 相邻的面板执行步进调整
+   * @param barIndex bar 的索引
+   * @param delta 像素增量（正数增大主面板，负数缩小主面板）
+   */
+  _resizeByStep(t, i) {
+    const s = this.children[t - 1], e = this.children[t + 1], n = this.children[t];
+    if (!s || !e) return;
+    const r = this.layout === "vertical", a = r ? this._container.clientHeight : this._container.clientWidth, o = r ? "height" : "width", l = s.getBoundingClientRect()[o], h = e.getBoundingClientRect()[o], u = l + i, f = h - i, m = this._getMinSize(s, a), v = this._getMinSize(e, a);
+    u <= m || f <= v || (this._dispatchResizeEvent(y), s.size = u + "px", e.size = f + "px", this._updateBarA11y(n, s), this._dispatchResizeEvent(b), this._dispatchResizeEvent(E));
   }
-  static get observedAttributes() {
-    return ["size", "min", "layout"];
+  /**
+   * 将主面板折叠到最小尺寸或恢复到之前的位置
+   * @param barIndex bar 的索引
+   */
+  _toggleCollapse(t) {
+    const i = this.children[t - 1], s = this.children[t + 1], e = this.children[t];
+    if (!i || !s) return;
+    const n = this.layout === "vertical", r = n ? this._container.clientHeight : this._container.clientWidth, a = n ? "height" : "width", o = this._getMinSize(i, r), l = i.getBoundingClientRect()[a];
+    if (l > o)
+      e._prevPreSize = l, e._prevNextSize = s.getBoundingClientRect()[a], this._dispatchResizeEvent(y), i.size = o + "px", s.size = r - o + "px", this._updateBarA11y(e, i), this._dispatchResizeEvent(b), this._dispatchResizeEvent(E);
+    else {
+      const h = e._prevPreSize, u = e._prevNextSize;
+      if (h == null) return;
+      this._dispatchResizeEvent(y), i.size = h + "px", s.size = u + "px", this._updateBarA11y(e, i), this._dispatchResizeEvent(b), this._dispatchResizeEvent(E);
+    }
   }
   /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
+   * 将主面板调整到最小或最大尺寸
+   * @param barIndex bar 的索引
+   * @param toMin 是否调整到最小尺寸
    */
-  updateContainerClasslist() {
-    return this.computedClasslist("ea-splitter-panel", {
-      // ['--' + this.state.type]: this.state.type,
-    });
+  _resizeToExtent(t, i) {
+    const s = this.children[t - 1], e = this.children[t + 1], n = this.children[t];
+    if (!s || !e) return;
+    const a = this.layout === "vertical" ? this._container.clientHeight : this._container.clientWidth, o = this._getMinSize(s, a), l = this._getMinSize(e, a);
+    if (this._dispatchResizeEvent(y), i)
+      s.size = o + "px", e.size = a - o + "px";
+    else {
+      const h = a - l;
+      s.size = h + "px", e.size = l + "px";
+    }
+    this._updateBarA11y(n, s), this._dispatchResizeEvent(b), this._dispatchResizeEvent(E);
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-            <div class="ea-splitter-panel" part="container">
-                <slot></slot>
-            </div>
-        `, b(this, E, this.shadowRoot.querySelector(".ea-splitter-panel"));
+  html() {
+    return `
+      <div class="${this.updateContainerClasslist()}" part="container">
+        <slot></slot>
+      </div>
+    `;
   }
-  connectedCallback() {
-    super.connectedCallback();
+  _handleMouseDown(t) {
+    const s = t.target.closest("ea-splitter-bar");
+    if (!s) return;
+    t.preventDefault(), t.stopPropagation();
+    const e = Number(s.getAttribute("data-index"));
+    isNaN(e) || (this.layout === "horizontal" ? this._handleHorizontalResize(t, e) : this._handleVerticalResize(t, e));
   }
-}
-E = new WeakMap();
-window.customElements.get("ea-splitter-panel") || window.customElements.define("ea-splitter-panel", X);
-var x;
-class Y extends N {
-  constructor() {
-    super();
-    /** @type {HTMLElement} */
-    c(this, x);
-    f(this, "state", this.properties({
-      layout: {
-        type: ["vertical", "horizontal"],
-        default: "",
-        observer: (t) => {
+  _handleKeyDown(t) {
+    const s = t.target.closest("ea-splitter-bar");
+    if (!s) return;
+    const e = Number(s.getAttribute("data-index"));
+    if (isNaN(e)) return;
+    const n = s.step || 10, r = this.layout === "horizontal";
+    switch (t.key) {
+      case "ArrowLeft":
+        r && (t.preventDefault(), this._resizeByStep(e, -n));
+        break;
+      case "ArrowRight":
+        r && (t.preventDefault(), this._resizeByStep(e, n));
+        break;
+      case "ArrowUp":
+        r || (t.preventDefault(), this._resizeByStep(e, -n));
+        break;
+      case "ArrowDown":
+        r || (t.preventDefault(), this._resizeByStep(e, n));
+        break;
+      case "Enter":
+        t.preventDefault(), this._toggleCollapse(e);
+        break;
+      case "Home":
+        t.preventDefault(), this._resizeToExtent(e, !0);
+        break;
+      case "End":
+        t.preventDefault(), this._resizeToExtent(e, !1);
+        break;
+    }
+  }
+  $mount() {
+    queueMicrotask(() => {
+      const t = [...this.children].filter(
+        (i) => i.tagName === "EA-SPLITTER-PANEL"
+      );
+      t.forEach((i, s) => {
+        if (i.setAttribute("layout", this.layout), i.setAttribute("data-panel-index", String(s)), i.id || (i.id = `${W}-panel-${this._panelIdCounter++}`), s < t.length - 1) {
+          const e = document.createElement("ea-splitter-bar");
+          this.insertBefore(e, i.nextSibling);
+          const n = [...this.children].indexOf(e);
+          e.setAttribute("data-index", String(n)), e.setAttribute("layout", this.layout), e.setAttribute("aria-controls", i.id), this._updateBarA11y(e, i);
         }
-      }
-    }));
-    this.stylesheet = q, this.$render();
+      });
+    });
   }
-  static get observedAttributes() {
-    return ["layout"];
+};
+w([
+  R(M.cb())
+], S.prototype, "_container", 2);
+w([
+  g({
+    type: D(["horizontal", "vertical"]),
+    default: "horizontal",
+    observer(t) {
+      this._container.style.setProperty(
+        "--ea-splitter-direction",
+        t === "vertical" ? "column" : "row"
+      ), this._container.className = this.updateContainerClasslist(), [...this.children].forEach((i) => {
+        (i.tagName === "EA-SPLITTER-PANEL" || i.tagName === "EA-SPLITTER-BAR") && i.setAttribute("layout", t);
+      });
+    }
+  })
+], S.prototype, "layout", 2);
+w([
+  $("mousedown")
+], S.prototype, "_handleMouseDown", 1);
+w([
+  $("keydown")
+], S.prototype, "_handleKeyDown", 1);
+S = w([
+  N(W, { styles: [I] })
+], S);
+var G = Object.defineProperty, K = Object.getOwnPropertyDescriptor, A = (t, i, s, e) => {
+  for (var n = e > 1 ? void 0 : e ? K(i, s) : i, r = t.length - 1, a; r >= 0; r--)
+    (a = t[r]) && (n = (e ? a(i, s, n) : a(n)) || n);
+  return e && n && G(i, s, n), n;
+};
+const T = "ea-splitter-panel", O = H(T);
+let x = class extends P {
+  constructor() {
+    super(...arguments), this.size = "", this.min = "", this.layout = "horizontal";
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
+  /** 更新容器类名 */
   updateContainerClasslist() {
-    return this.computedClasslist("ea-splitter-bar", {
-      // ['--' + this.state.type]: this.state.type,
-    });
+    return O();
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-            <div class="ea-splitter-bar" part="container"></div>
-        `, b(this, x, this.shadowRoot.querySelector(".ea-splitter-bar"));
+  /** 渲染模板 */
+  html() {
+    return `
+      <div class="${this.updateContainerClasslist()}" part="container">
+        <slot></slot>
+      </div>
+    `;
   }
-  connectedCallback() {
-    super.connectedCallback();
+};
+A([
+  R(O.cb())
+], x.prototype, "_container", 2);
+A([
+  g({
+    type: String,
+    default: "",
+    observer(t) {
+      CSS.supports("width", t) && this.style.setProperty("--ea-splitter-panel-size", t);
+    }
+  })
+], x.prototype, "size", 2);
+A([
+  g({
+    type: String,
+    default: "",
+    observer(t) {
+      CSS.supports("width", t) && this.style.setProperty("--ea-splitter-panel-min-size", t);
+    }
+  })
+], x.prototype, "min", 2);
+A([
+  g({
+    type: D(["horizontal", "vertical"]),
+    default: "horizontal"
+  })
+], x.prototype, "layout", 2);
+x = A([
+  N(T, { styles: [V] })
+], x);
+var U = Object.defineProperty, F = Object.getOwnPropertyDescriptor, d = (t, i, s, e) => {
+  for (var n = e > 1 ? void 0 : e ? F(i, s) : i, r = t.length - 1, a; r >= 0; r--)
+    (a = t[r]) && (n = (e ? a(i, s, n) : a(n)) || n);
+  return e && n && U(i, s, n), n;
+};
+const L = "ea-splitter-bar", j = H(L);
+let p = class extends P {
+  constructor() {
+    super(...arguments), this.layout = "horizontal", this.label = "", this.step = 10, this.valuenow = 50, this.valuemin = 0, this.valuemax = 100;
   }
-}
-x = new WeakMap();
-window.customElements.get("ea-splitter-bar") || window.customElements.define("ea-splitter-bar", Y);
+  /** 更新容器类名 */
+  updateContainerClasslist() {
+    return j({ [this.layout]: !0 });
+  }
+  /** 渲染模板 */
+  html() {
+    return `
+      <div class="${this.updateContainerClasslist()}" part="container"></div>
+    `;
+  }
+  $mount() {
+    this.setAttribute("role", "separator"), this.tabIndex = 0, this.setAttribute("aria-valuenow", String(this.valuenow)), this.setAttribute("aria-valuemin", String(this.valuemin)), this.setAttribute("aria-valuemax", String(this.valuemax));
+  }
+};
+d([
+  R(j.cb())
+], p.prototype, "_container", 2);
+d([
+  g({
+    type: D(["horizontal", "vertical"]),
+    default: "horizontal",
+    a11y: {
+      ariaAttr: "aria-orientation",
+      map: (t) => t === "horizontal" ? "vertical" : "horizontal"
+    },
+    observer() {
+      this._container.className = this.updateContainerClasslist();
+    }
+  })
+], p.prototype, "layout", 2);
+d([
+  g({
+    type: String,
+    default: "",
+    a11y: {
+      ariaAttr: "aria-label",
+      map: (t) => t || null
+    }
+  })
+], p.prototype, "label", 2);
+d([
+  g({
+    type: Number,
+    default: 10
+  })
+], p.prototype, "step", 2);
+d([
+  B({
+    type: Number,
+    default: 50,
+    observer(t) {
+      this.setAttribute("aria-valuenow", String(t));
+    }
+  })
+], p.prototype, "valuenow", 2);
+d([
+  B({
+    type: Number,
+    default: 0,
+    observer(t) {
+      this.setAttribute("aria-valuemin", String(t));
+    }
+  })
+], p.prototype, "valuemin", 2);
+d([
+  B({
+    type: Number,
+    default: 100,
+    observer(t) {
+      this.setAttribute("aria-valuemax", String(t));
+    }
+  })
+], p.prototype, "valuemax", 2);
+p = d([
+  N(L, { styles: [X] })
+], p);
+export {
+  S as EaSplitter,
+  p as EaSplitterBar,
+  x as EaSplitterPanel,
+  E as EaSplitterPanelResizeEndEvent,
+  b as EaSplitterPanelResizeEvent,
+  y as EaSplitterPanelResizeStartEvent
+};