@editora/ui-core 0.1.9 → 0.1.10

package/dist/panel-group-a376cc5e.mjs

@@ -0,0 +1,326 @@
+import { E as A } from "./ElementBase-909688f3.mjs";
+import { UIPanel as y } from "./panel.esm.js";
+import { UISplitter as b } from "./splitter.esm.js";
+function f(o, e, t) {
+  return Math.min(t, Math.max(e, o));
+}
+function x(o) {
+  return Math.round(o * 1e3) / 1e3;
+}
+function v(o) {
+  if (o.collapsed) {
+    const i = f(o.collapsedSize, 0, 100);
+    return { min: i, max: i };
+  }
+  const e = f(o.min, 0, 100), t = f(Math.max(e, o.max), e, 100);
+  return { min: e, max: t };
+}
+function _(o, e = []) {
+  if (!o.length)
+    return [];
+  const t = o.map((u, c) => {
+    const d = e[c], { min: h, max: p } = v(u);
+    return Number.isFinite(d) ? f(Number(d), h, p) : u.collapsed ? h : NaN;
+  }), i = t.reduce((u, c, d) => (Number.isFinite(c) || u.push(d), u), []), n = t.reduce((u, c) => u + (Number.isFinite(c) ? c : 0), 0), s = Math.max(0, 100 - n), r = i.length ? s / i.length : 0;
+  i.forEach((u) => {
+    const { min: c, max: d } = v(o[u]);
+    t[u] = f(r, c, d);
+  });
+  let a = t.reduce((u, c) => u + c, 0), l = x(100 - a), m = 0;
+  for (; Math.abs(l) > 1e-3 && m < 30; ) {
+    const u = o.reduce((h, p, g) => {
+      const { min: w, max: z } = v(p);
+      return l > 0 && t[g] < z - 1e-3 && h.push(g), l < 0 && t[g] > w + 1e-3 && h.push(g), h;
+    }, []);
+    if (!u.length)
+      break;
+    const c = l / u.length;
+    let d = 0;
+    if (u.forEach((h) => {
+      const { min: p, max: g } = v(o[h]), w = t[h], z = f(w + c, p, g);
+      t[h] = x(z), d += t[h] - w;
+    }), a = t.reduce((h, p) => h + p, 0), l = x(100 - a), Math.abs(d) < 1e-3)
+      break;
+    m += 1;
+  }
+  return t.map((u) => x(u));
+}
+function L(o, e, t, i) {
+  const n = t, s = t + 1;
+  if (n < 0 || s >= o.length)
+    return [...o];
+  const r = [...o], a = r[n], l = r[s], m = v(e[n]), u = v(e[s]), c = Math.max(m.min - a, l - u.max), d = Math.min(m.max - a, l - u.min), h = f(i, c, d);
+  return r[n] = x(a + h), r[s] = x(l - h), r;
+}
+const E = `
+  :host {
+    display: block;
+    min-inline-size: 0;
+    min-block-size: 0;
+    --ui-panel-group-gap: 0px;
+  }
+
+  .group {
+    inline-size: 100%;
+    block-size: 100%;
+    min-inline-size: 0;
+    min-block-size: 0;
+    display: flex;
+    gap: var(--ui-panel-group-gap);
+  }
+
+  :host([orientation="vertical"]) .group {
+    flex-direction: column;
+  }
+
+  slot {
+    display: contents;
+  }
+
+  ::slotted(ui-panel) {
+    min-inline-size: 0;
+    min-block-size: 0;
+    overflow: hidden;
+  }
+`;
+function S(o, e) {
+  const t = Number(o);
+  return Number.isFinite(t) ? Math.min(100, Math.max(0, t)) : e;
+}
+class M extends A {
+  constructor() {
+    super(), this._observer = null, this._panels = [], this._splitters = [], this._layout = [], this._initialLayout = [], this._dragState = null, this._isMutatingChildren = !1, this._onMutation = this._onMutation.bind(this), this._onPointerMove = this._onPointerMove.bind(this), this._onPointerUp = this._onPointerUp.bind(this), this._onPointerDown = this._onPointerDown.bind(this), this._onKeyDown = this._onKeyDown.bind(this);
+  }
+  static get observedAttributes() {
+    return ["orientation", "storage-key", "auto-save"];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("pointerdown", this._onPointerDown), this.addEventListener("keydown", this._onKeyDown), this._observer = new MutationObserver(this._onMutation), this._observer.observe(this, { childList: !0, attributes: !0, subtree: !0 }), queueMicrotask(() => this._syncStructure({ restore: !0 }));
+  }
+  disconnectedCallback() {
+    var e;
+    this.removeEventListener("pointerdown", this._onPointerDown), this.removeEventListener("keydown", this._onKeyDown), (e = this._observer) == null || e.disconnect(), this._observer = null, this._teardownDrag(), super.disconnectedCallback();
+  }
+  getLayout() {
+    return [...this._layout];
+  }
+  setLayout(e) {
+    const t = _(this._constraints(), e);
+    this._applyLayout(t, { persist: !0, emit: !0 });
+  }
+  resetLayout() {
+    const e = this._initialLayout.length ? this._initialLayout : _(this._constraints(), []);
+    this._applyLayout(e, { persist: !0, emit: !0 });
+  }
+  collapsePanel(e) {
+    const t = this._panels.indexOf(e);
+    if (t < 0)
+      return;
+    const i = this._constraints(), n = [...this._layout], s = n[t] - i[t].collapsedSize;
+    n[t] = i[t].collapsedSize, this._distributeRemainder(n, t, s), e.setAttribute("collapsed", ""), this._applyLayout(_(this._constraints(), n), { persist: !0, emit: !0 });
+  }
+  expandPanel(e) {
+    const t = this._panels.indexOf(e);
+    if (t < 0)
+      return;
+    e.removeAttribute("collapsed");
+    const i = this._constraints(), n = this._layout[t] <= i[t].collapsedSize + 1e-3 ? _(i, this._initialLayout)[t] : this._layout[t], s = [...this._layout], r = n - s[t];
+    s[t] = n, this._distributeRemainder(s, t, -r), this._applyLayout(_(this._constraints(), s), { persist: !0, emit: !0 });
+  }
+  attributeChangedCallback(e, t, i) {
+    if (t !== i) {
+      if (e === "orientation") {
+        this._syncOrientation(), this._applyLayout(this._layout.length ? this._layout : _(this._constraints(), []), { persist: !1, emit: !1 });
+        return;
+      }
+      e === "storage-key" || e === "auto-save" || super.attributeChangedCallback(e, t, i);
+    }
+  }
+  _onMutation(e) {
+    if (this._isMutatingChildren)
+      return;
+    e.some((i) => i.type === "childList" ? !0 : i.target instanceof y && (i.attributeName === "size" || i.attributeName === "min-size" || i.attributeName === "max-size" || i.attributeName === "collapsed-size" || i.attributeName === "collapsed")) && this._syncStructure({ restore: !1 });
+  }
+  _orientation() {
+    return this.getAttribute("orientation") === "vertical" ? "vertical" : "horizontal";
+  }
+  _constraints() {
+    return this._panels.map((e) => {
+      const t = e.hasAttribute("collapsed"), i = S(Number(e.getAttribute("collapsed-size") || 0), 0), n = S(Number(e.getAttribute("min-size") || (t ? i : 10)), t ? i : 10), s = S(Number(e.getAttribute("max-size") || 100), 100);
+      return {
+        min: t ? i : Math.min(n, s),
+        max: t ? i : Math.max(n, s),
+        collapsedSize: i,
+        collapsed: t
+      };
+    });
+  }
+  _desiredLayout() {
+    const e = this._loadPersistedLayout();
+    return (e == null ? void 0 : e.length) === this._panels.length ? e : this._panels.map((t) => {
+      const i = t.getAttribute("size");
+      if (i == null || i.trim() === "")
+        return NaN;
+      const n = Number(i);
+      return Number.isFinite(n) ? n : NaN;
+    });
+  }
+  _syncStructure(e) {
+    this._syncGeneratedSplitters(), this._panels = Array.from(this.children).filter((n) => n instanceof y), this._splitters = Array.from(this.children).filter((n) => n instanceof b), this._syncOrientation();
+    const t = this._desiredLayout(), i = _(this._constraints(), t);
+    (!this._initialLayout.length || e.restore) && (this._initialLayout = [...i]), this._applyLayout(i, { persist: !1, emit: !1 });
+  }
+  _syncGeneratedSplitters() {
+    const e = Array.from(this.children).filter((t) => t instanceof y);
+    if (!(e.length <= 1)) {
+      this._isMutatingChildren = !0;
+      try {
+        Array.from(this.children).filter((t) => t instanceof b && t.hasAttribute("data-generated")).forEach((t) => {
+          const i = t.previousElementSibling, n = t.nextElementSibling;
+          (!(i instanceof y) || !(n instanceof y)) && t.remove();
+        });
+        for (let t = 1; t < e.length; t += 1) {
+          const i = e[t];
+          let n = i.previousElementSibling;
+          for (; n && !(n instanceof y || n instanceof b); )
+            n = n.previousElementSibling;
+          if (n instanceof b)
+            continue;
+          const s = document.createElement("ui-splitter");
+          s.setAttribute("data-generated", ""), i.before(s);
+        }
+      } finally {
+        this._isMutatingChildren = !1;
+      }
+    }
+  }
+  _syncOrientation() {
+    const e = this._orientation();
+    this._splitters.forEach((t, i) => {
+      t.setAttribute("orientation", e), t.setAttribute("data-index", String(i));
+    });
+  }
+  _applyLayout(e, t) {
+    this._layout = [...e];
+    const i = this._orientation(), n = this._constraints();
+    this._panels.forEach((s, r) => {
+      const a = this._layout[r] ?? 0, l = n[r];
+      s.style.flex = `${a} 1 0px`, i === "horizontal" ? (s.style.minWidth = `${l.min}%`, s.style.maxWidth = `${l.max}%`, s.style.minHeight = "0", s.style.maxHeight = "") : (s.style.minHeight = `${l.min}%`, s.style.maxHeight = `${l.max}%`, s.style.minWidth = "0", s.style.maxWidth = ""), s.setAttribute("data-panel-size", String(a));
+    }), this._splitters.forEach((s, r) => {
+      const a = this._layout[r] ?? 0;
+      s.setAttribute("aria-valuemin", String(Math.round(n[r].min))), s.setAttribute("aria-valuemax", String(Math.round(n[r].max))), s.setAttribute("aria-valuenow", String(Math.round(a)));
+    }), t.persist && this._persistLayout(), t.emit && this.dispatchEvent(
+      new CustomEvent("layout-change", {
+        detail: { sizes: [...this._layout] },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _availableSize() {
+    const e = this.getBoundingClientRect(), t = this._orientation() === "horizontal" ? e.width : e.height, i = this._splitters.reduce((n, s) => {
+      const r = s.getBoundingClientRect();
+      return n + (this._orientation() === "horizontal" ? r.width : r.height);
+    }, 0);
+    return Math.max(1, t - i);
+  }
+  _persistLayout() {
+    const e = this.getAttribute("storage-key");
+    if (!(!e || !N(this, "auto-save")))
+      try {
+        window.localStorage.setItem(`ui-panel-group:${e}`, JSON.stringify(this._layout));
+      } catch {
+      }
+  }
+  _loadPersistedLayout() {
+    const e = this.getAttribute("storage-key");
+    if (!e)
+      return null;
+    try {
+      const t = window.localStorage.getItem(`ui-panel-group:${e}`);
+      if (!t)
+        return null;
+      const i = JSON.parse(t);
+      return Array.isArray(i) ? i.map((n) => Number(n)).filter(Number.isFinite) : null;
+    } catch {
+      return null;
+    }
+  }
+  _distributeRemainder(e, t, i) {
+    if (Math.abs(i) < 1e-3)
+      return;
+    const n = e.map((r, a) => a).filter((r) => r !== t);
+    if (!n.length)
+      return;
+    const s = i / n.length;
+    n.forEach((r) => {
+      e[r] += s;
+    });
+  }
+  _onPointerDown(e) {
+    const t = e.composedPath().find((n) => n instanceof b);
+    if (!t || t.hasAttribute("disabled"))
+      return;
+    const i = Number(t.getAttribute("data-index"));
+    Number.isFinite(i) && (e.preventDefault(), t.setAttribute("data-dragging", "true"), this._dragState = {
+      splitterIndex: i,
+      pointerId: e.pointerId,
+      origin: this._orientation() === "horizontal" ? e.clientX : e.clientY,
+      startLayout: [...this._layout]
+    }, window.addEventListener("pointermove", this._onPointerMove), window.addEventListener("pointerup", this._onPointerUp), this.dispatchEvent(new CustomEvent("resize-start", { detail: { index: i }, bubbles: !0, composed: !0 })));
+  }
+  _onPointerMove(e) {
+    if (!this._dragState || e.pointerId !== this._dragState.pointerId)
+      return;
+    const n = ((this._orientation() === "horizontal" ? e.clientX : e.clientY) - this._dragState.origin) / this._availableSize() * 100, s = L(this._dragState.startLayout, this._constraints(), this._dragState.splitterIndex, n);
+    this._applyLayout(s, { persist: !1, emit: !0 }), this.dispatchEvent(new CustomEvent("resize", { detail: { index: this._dragState.splitterIndex, sizes: [...this._layout] }, bubbles: !0, composed: !0 }));
+  }
+  _onPointerUp(e) {
+    if (!this._dragState || e.pointerId !== this._dragState.pointerId)
+      return;
+    const t = this._splitters[this._dragState.splitterIndex];
+    t == null || t.removeAttribute("data-dragging"), this._persistLayout(), this.dispatchEvent(new CustomEvent("resize-end", { detail: { index: this._dragState.splitterIndex, sizes: [...this._layout] }, bubbles: !0, composed: !0 })), this._teardownDrag();
+  }
+  _teardownDrag() {
+    window.removeEventListener("pointermove", this._onPointerMove), window.removeEventListener("pointerup", this._onPointerUp), this._splitters.forEach((e) => e.removeAttribute("data-dragging")), this._dragState = null;
+  }
+  _onKeyDown(e) {
+    const t = e.composedPath().find((m) => m instanceof b);
+    if (!t || t.hasAttribute("disabled"))
+      return;
+    const i = Number(t.getAttribute("data-index"));
+    if (!Number.isFinite(i))
+      return;
+    const s = this._orientation() === "horizontal", r = e.shiftKey ? 10 : 2;
+    let a = 0;
+    if ((s && e.key === "ArrowRight" || !s && e.key === "ArrowDown") && (a = r), (s && e.key === "ArrowLeft" || !s && e.key === "ArrowUp") && (a = -r), e.key === "Home" && (a = -100), e.key === "End" && (a = 100), !a)
+      return;
+    e.preventDefault();
+    const l = L(this._layout, this._constraints(), i, a);
+    this._applyLayout(l, { persist: !0, emit: !0 }), this.dispatchEvent(new CustomEvent("resize", { detail: { index: i, sizes: [...this._layout] }, bubbles: !0, composed: !0 }));
+  }
+  shouldRenderOnAttributeChange() {
+    return !1;
+  }
+  render() {
+    this.setContent(`
+      <style>${E}</style>
+      <div class="group" part="group">
+        <slot></slot>
+      </div>
+    `);
+  }
+}
+function N(o, e) {
+  const t = o.getAttribute(e);
+  if (t == null)
+    return !1;
+  const i = String(t).trim().toLowerCase();
+  return i !== "false" && i !== "0";
+}
+typeof customElements < "u" && !customElements.get("ui-panel-group") && customElements.define("ui-panel-group", M);
+export {
+  M as U,
+  _ as n,
+  L as r
+};

package/dist/panel-group.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./panel-group-40254cdd.js");require("./ElementBase-1b301e7f.js");require("./panel.cjs.js");require("./splitter.cjs.js");exports.UIPanelGroup=e.UIPanelGroup;

package/dist/panel-group.esm.js

@@ -0,0 +1,7 @@
+import { U as i } from "./panel-group-a376cc5e.mjs";
+import "./ElementBase-909688f3.mjs";
+import "./panel.esm.js";
+import "./splitter.esm.js";
+export {
+  i as UIPanelGroup
+};

package/dist/panel.cjs.js

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("./ElementBase-1b301e7f.js"),i=`
+  :host {
+    display: block;
+    min-inline-size: 0;
+    min-block-size: 0;
+    box-sizing: border-box;
+    position: relative;
+  }
+
+  .panel {
+    inline-size: 100%;
+    block-size: 100%;
+    min-inline-size: 0;
+    min-block-size: 0;
+    box-sizing: border-box;
+  }
+`;class s extends l.ElementBase{static get observedAttributes(){return["collapsed"]}collapse(){var e,t;this.setAttribute("collapsed",""),(t=(e=this.closest("ui-panel-group"))==null?void 0:e.collapsePanel)==null||t.call(e,this)}expand(){var e,t;this.removeAttribute("collapsed"),(t=(e=this.closest("ui-panel-group"))==null?void 0:e.expandPanel)==null||t.call(e,this)}shouldRenderOnAttributeChange(){return!1}render(){this.setContent(`
+      <style>${i}</style>
+      <div class="panel" part="panel">
+        <slot></slot>
+      </div>
+    `)}}typeof customElements<"u"&&!customElements.get("ui-panel")&&customElements.define("ui-panel",s);exports.UIPanel=s;

package/dist/panel.esm.js

@@ -0,0 +1,46 @@
+import { E as t } from "./ElementBase-909688f3.mjs";
+const i = `
+  :host {
+    display: block;
+    min-inline-size: 0;
+    min-block-size: 0;
+    box-sizing: border-box;
+    position: relative;
+  }
+
+  .panel {
+    inline-size: 100%;
+    block-size: 100%;
+    min-inline-size: 0;
+    min-block-size: 0;
+    box-sizing: border-box;
+  }
+`;
+class l extends t {
+  static get observedAttributes() {
+    return ["collapsed"];
+  }
+  collapse() {
+    var e, s;
+    this.setAttribute("collapsed", ""), (s = (e = this.closest("ui-panel-group")) == null ? void 0 : e.collapsePanel) == null || s.call(e, this);
+  }
+  expand() {
+    var e, s;
+    this.removeAttribute("collapsed"), (s = (e = this.closest("ui-panel-group")) == null ? void 0 : e.expandPanel) == null || s.call(e, this);
+  }
+  shouldRenderOnAttributeChange() {
+    return !1;
+  }
+  render() {
+    this.setContent(`
+      <style>${i}</style>
+      <div class="panel" part="panel">
+        <slot></slot>
+      </div>
+    `);
+  }
+}
+typeof customElements < "u" && !customElements.get("ui-panel") && customElements.define("ui-panel", l);
+export {
+  l as UIPanel
+};