composite-select 1.0.0

package/js/CenterAndHeightResizer.js

@@ -0,0 +1,263 @@
+/**
+ *   <center-and-height-resizer
+ *      left="50px"
+ *      center="350px"
+ *      height="200px"
+ *      style="padding: 12px;"
+ *      data-test="idfortest"
+ *   >
+ *      <div>Content</div>
+ *   </center-and-height-resizer>
+ *
+ *   const resizer = document.querySelector('center-and-height-resizer');
+ *   resizer.addEventListener('onLeft', e => console.log(e.detail.width));
+ *   resizer.addEventListener('onCenter', e => console.log(e.detail.width));
+ *   resizer.addEventListener('onHeight', e => console.log(e.detail.height));
+ */
+const SKIP_ATTRIBUTES = ["id", "class", "left", "center", "height", "style"];
+class CenterAndHeightResizer extends HTMLElement {
+  leftDiv;
+  rightDiv;
+  centerDiv;
+  resizerLeft;
+  resizerRight;
+  resizerBottom;
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          padding: 0 !important;
+        }
+        .flex {
+          display: flex;
+          width: 100%;
+          align-items: stretch;
+        }
+        .center-column {
+          display: flex;
+          flex-direction: column;
+          min-width: 0;
+        }
+        .center-div {
+          flex-grow: 1;
+          min-width: 0;
+          box-sizing: border-box;
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.1);
+          background: #fff;
+          border-radius: 6px;
+          overflow: auto;
+          min-height: 50px;
+          border: 1px solid #eaeaea;
+        }
+        .side-div {
+          flex-shrink: 0;
+          box-sizing: border-box;
+        }
+        #right-div {
+          flex-grow: 1;
+        }
+        .resizer {
+          flex-shrink: 0;
+          transition: background 0.2s;
+          user-select: none;
+          position: relative;
+        }
+        .resizer.horizontal {
+          width: 8px;
+          cursor: col-resize;
+        }
+        .resizer.vertical {
+          height: 8px;
+          cursor: row-resize;
+          width: 100%;
+        }
+        .resizer:hover,
+        .resizer.active {
+          background: rgba(26, 115, 232, 0.12);
+        }
+        .resizer::after {
+          content: "";
+          position: absolute;
+          background: #ccc;
+          transition: background 0.2s;
+        }
+        .resizer.horizontal::after {
+          left: 50%;
+          top: 0;
+          bottom: 0;
+          width: 14px;
+          transform: translateX(-50%);
+        }
+        .resizer.vertical::after {
+          top: 50%;
+          left: 0;
+          right: 0;
+          height: 14px;
+          transform: translateY(-50%);
+        }
+        .resizer:hover::after,
+        .resizer.active::after {
+          background: #1a73e8;
+        }
+        
+        #resizer-left {
+          margin-right: 5px;
+        }
+        #resizer-right {
+          margin-left: 5px;
+        }
+        #resizer-bottom {
+          margin-top: 5px;
+        }
+      </style>
+      <div class="flex">
+        <div class="side-div" id="left-div"></div>
+        <div class="resizer horizontal" id="resizer-left"></div>
+        <div class="center-column">
+          <div class="center-div" id="center-div">
+            <slot></slot>
+          </div>
+          <div class="resizer vertical" id="resizer-bottom"></div>
+        </div>
+        <div class="resizer horizontal" id="resizer-right"></div>
+        <div class="side-div" id="right-div"></div>
+      </div>
+    `;
+  }
+  static get observedAttributes() {
+    return SKIP_ATTRIBUTES.filter((attr) => !["id", "class"].includes(attr));
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (!this.leftDiv) return;
+    // Not connected yet
+    switch (name) {
+      case "left":
+        this.leftDiv.style.width = newValue;
+        break;
+      case "center":
+        this.centerDiv.style.width = newValue;
+        break;
+      case "height":
+        this.centerDiv.style.height = newValue;
+        break;
+      case "style":
+        this.centerDiv.style.cssText = newValue;
+        this._applyInternalStylesToCenterDiv();
+        break;
+    }
+  }
+  connectedCallback() {
+    this.leftDiv = this.shadowRoot.getElementById("left-div");
+    this.rightDiv = this.shadowRoot.getElementById("right-div");
+    this.centerDiv = this.shadowRoot.getElementById("center-div");
+    this.resizerLeft = this.shadowRoot.getElementById("resizer-left");
+    this.resizerRight = this.shadowRoot.getElementById("resizer-right");
+    this.resizerBottom = this.shadowRoot.getElementById("resizer-bottom");
+    const attrLeft = this.getAttribute("left");
+    const attrCenter = this.getAttribute("center");
+    const attrHeight = this.getAttribute("height");
+    if (attrLeft) {
+      this.leftDiv.style.width = attrLeft;
+    }
+    if (attrCenter) {
+      this.centerDiv.style.width = attrCenter;
+    }
+    if (attrHeight) {
+      this.centerDiv.style.height = attrHeight;
+    }
+    this.setupResizer(this.resizerLeft, this.leftDiv, "left", false);
+    this.setupResizer(this.resizerRight, this.centerDiv, "center", false);
+    this.setupHeightResizer(this.resizerBottom, this.centerDiv);
+    this._initForwarding();
+  }
+  _applyInternalStylesToCenterDiv() {
+    const center = this.getAttribute("center");
+    if (center) this.centerDiv.style.width = center;
+    const height = this.getAttribute("height");
+    if (height) this.centerDiv.style.height = height;
+  }
+  _initForwarding() {
+    const observer = new MutationObserver((mutations) => {
+      let syncNeeded = false;
+      for (const mutation of mutations) {
+        if (mutation.type === "attributes") {
+          if (!SKIP_ATTRIBUTES.includes(mutation.attributeName)) {
+            syncNeeded = true;
+            break;
+          }
+        }
+      }
+      if (syncNeeded) this._syncAttributes();
+    });
+    observer.observe(this, { attributes: true });
+    this._syncAttributes();
+  }
+  _syncAttributes() {
+    for (const attr of Array.from(this.attributes)) {
+      if (SKIP_ATTRIBUTES.includes(attr.name)) continue;
+      this.centerDiv.setAttribute(attr.name, attr.value);
+    }
+    if (this.hasAttribute("style")) {
+      this.centerDiv.style.cssText = this.getAttribute("style") || "";
+      this._applyInternalStylesToCenterDiv();
+    }
+  }
+  getContentRoot() {
+    return this.centerDiv || this.shadowRoot.getElementById("center-div");
+  }
+  setupResizer(handle, target, attrName, invert) {
+    handle.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      handle.classList.add("active");
+      const startX = e.clientX;
+      const startWidth = target.offsetWidth;
+      const onMouseMove = (moveEvent) => {
+        let diff = moveEvent.clientX - startX;
+        if (invert) diff = -diff;
+        let newWidth = startWidth + diff;
+        newWidth = Math.max(0, newWidth);
+        target.style.width = newWidth + "px";
+        this.setAttribute(attrName, newWidth + "px");
+        const eventName = attrName === "left" ? "onLeft" : "onCenter";
+        this.dispatchEvent(new CustomEvent(eventName, { detail: { width: newWidth } }));
+      };
+      const onMouseUp = () => {
+        handle.classList.remove("active");
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+      };
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    });
+  }
+  setupHeightResizer(handle, target) {
+    handle.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      handle.classList.add("active");
+      const startY = e.clientY;
+      const startHeight = target.offsetHeight;
+      const onMouseMove = (moveEvent) => {
+        const diff = moveEvent.clientY - startY;
+        let newHeight = startHeight + diff;
+        newHeight = Math.max(0, newHeight);
+        target.style.height = newHeight + "px";
+        this.setAttribute("height", newHeight + "px");
+        this.dispatchEvent(new CustomEvent("onHeight", { detail: { height: newHeight } }));
+      };
+      const onMouseUp = () => {
+        handle.classList.remove("active");
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+      };
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    });
+  }
+}
+customElements.define("center-and-height-resizer", CenterAndHeightResizer);
+export { CenterAndHeightResizer };

package/js/CenterResizer.js

@@ -0,0 +1,190 @@
+/**
+ *   <center-resizer
+ *      left="50px"
+ *      center="350px"
+ *      style="padding: 12px;"
+ *      data-test="idfortest"
+ *   >
+ *      <div>Content</div>
+ *   </center-resizer>
+ *
+ *   const resizer = document.querySelector('center-resizer');
+ *   resizer.addEventListener('onLeft', e => console.log(e.detail.width));
+ *   resizer.addEventListener('onCenter', e => console.log(e.detail.width));
+ */
+const SKIP_ATTRIBUTES = ["id", "class", "left", "center", "style"];
+class CenterResizer extends HTMLElement {
+  leftDiv;
+  centerDiv;
+  rightDiv;
+  resizerLeft;
+  resizerRight;
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          padding: 0 !important;
+        }
+        .flex {
+          display: flex;
+          width: 100%;
+          align-items: stretch;
+        }
+        .center-div {
+          flex-shrink: 0;
+          min-width: 0;
+          padding-left: 15px;
+          padding-right: 15px;
+          box-sizing: border-box;
+        }
+        .side-div {
+          flex-shrink: 0;
+          box-sizing: border-box;
+        }
+        #right-div {
+          flex-grow: 1;
+        }
+        .resizer {
+          width: 8px;
+          cursor: col-resize;
+          flex-shrink: 0;
+          transition: background 0.2s;
+          user-select: none;
+          margin: 0 -4px;
+          position: relative;
+        }
+        .resizer:hover,
+        .resizer.active {
+          background: rgba(26, 115, 232, 0.2);
+        }
+        .resizer::after {
+          content: "";
+          position: absolute;
+          left: 50%;
+          top: 0;
+          bottom: 0;
+          width: 2px;
+          background: #ccc;
+          transform: translateX(-50%);
+        }
+        .resizer:hover::after,
+        .resizer.active::after {
+          background: #1a73e8;
+        }
+      </style>
+      <div class="flex">
+        <div class="side-div" id="left-div"></div>
+        <div class="resizer" id="resizer-left"></div>
+        <div class="center-div" id="center-div">
+          <slot></slot>
+        </div>
+        <div class="resizer" id="resizer-right"></div>
+        <div class="side-div" id="right-div"></div>
+      </div>
+    `;
+  }
+  static get observedAttributes() {
+    return SKIP_ATTRIBUTES.filter((attr) => !["id", "class"].includes(attr));
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (oldValue === newValue) return;
+    if (!this.centerDiv) return;
+    switch (name) {
+      case "left":
+        this.leftDiv.style.width = newValue;
+        break;
+      case "center":
+        this.centerDiv.style.width = newValue;
+        break;
+      case "style":
+        this.centerDiv.style.cssText = newValue;
+        this._applyInternalStylesToCenterDiv();
+        break;
+    }
+  }
+  connectedCallback() {
+    this.leftDiv = this.shadowRoot.getElementById("left-div");
+    this.centerDiv = this.shadowRoot.getElementById("center-div");
+    this.rightDiv = this.shadowRoot.getElementById("right-div");
+    this.resizerLeft = this.shadowRoot.getElementById("resizer-left");
+    this.resizerRight = this.shadowRoot.getElementById("resizer-right");
+    const attrLeft = this.getAttribute("left");
+    const attrCenter = this.getAttribute("center");
+    if (attrLeft) {
+      this.leftDiv.style.width = attrLeft;
+    }
+    if (attrCenter) {
+      this.centerDiv.style.width = attrCenter;
+    }
+    this.setupResizer(this.resizerLeft, this.leftDiv, "left");
+    this.setupResizer(this.resizerRight, this.centerDiv, "center");
+    this._initForwarding();
+  }
+  _applyInternalStylesToCenterDiv() {
+    const center = this.getAttribute("center");
+    if (center) this.centerDiv.style.width = center;
+  }
+  _initForwarding() {
+    const observer = new MutationObserver((mutations) => {
+      let syncNeeded = false;
+      for (const mutation of mutations) {
+        if (mutation.type === "attributes") {
+          if (!SKIP_ATTRIBUTES.includes(mutation.attributeName)) {
+            syncNeeded = true;
+            break;
+          }
+        }
+      }
+      if (syncNeeded) this._syncAttributes();
+    });
+    observer.observe(this, { attributes: true });
+    this._syncAttributes();
+  }
+  _syncAttributes() {
+    for (const attr of Array.from(this.attributes)) {
+      if (SKIP_ATTRIBUTES.includes(attr.name)) continue;
+      this.centerDiv.setAttribute(attr.name, attr.value);
+    }
+    if (this.hasAttribute("style")) {
+      this.centerDiv.style.cssText = this.getAttribute("style") || "";
+      this._applyInternalStylesToCenterDiv();
+    }
+  }
+  getContentRoot() {
+    return this.centerDiv || this.shadowRoot.getElementById("center-div");
+  }
+  setupResizer(handle, target, attributeName) {
+    handle.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      handle.classList.add("active");
+      const startX = e.clientX;
+      const startWidth = target.offsetWidth;
+      const onMouseMove = (moveEvent) => {
+        let diff = moveEvent.clientX - startX;
+        let newWidth = startWidth + diff;
+        newWidth = Math.max(0, newWidth);
+        target.style.width = newWidth + "px";
+        if (attributeName === "center") {
+          this.setAttribute("center", newWidth + "px");
+          this.dispatchEvent(new CustomEvent("onCenter", { detail: { width: newWidth } }));
+        } else {
+          this.setAttribute("left", newWidth + "px");
+          this.dispatchEvent(new CustomEvent("onLeft", { detail: { width: newWidth } }));
+        }
+      };
+      const onMouseUp = () => {
+        handle.classList.remove("active");
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+      };
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    });
+  }
+}
+customElements.define("center-resizer", CenterResizer);
+export { CenterResizer };

package/package.json

@@ -0,0 +1,28 @@
+{
+  "type": "module",
+  "version": "1.0.0",
+  "name": "composite-select",
+  "main": "./dist/esm/Module.js",
+  "types": "./dist/types/Module.d.ts",
+  "module": "./dist/esm/Module.js",
+  "exports": {
+    ".": {
+      "types": "./dist/types/Module.d.ts",
+      "import": "./dist/esm/Module.js",
+      "require": "./dist/cjs/Module.cjs"
+    },
+    "./package.json": "./package.json",
+    "./*.css": "./*.css",
+    "./*.json": "./*.json",
+    "./*.png": "./*.png",
+    "./*.jpg": "./*.jpg",
+    "./*.svg": "./*.svg",
+    "./composition/*": "./composition/*",
+    "./*": {
+      "types": "./dist/types/*.d.ts",
+      "import": "./dist/esm/*.js",
+      "require": "./dist/cjs/*.js",
+      "default": "./*"
+    }
+  }
+}

package/release.config.js

@@ -0,0 +1,3 @@
+export default {
+  preset: "conventionalcommits",
+};

package/test/lib.d.ts

@@ -0,0 +1,6 @@
+import { type Page } from "@playwright/test";
+export declare function softNavigate(page: Page, url: string): Promise<void>;
+export declare function querySelector(page: Page, selector: string): Promise<import("playwright-core").Locator>;
+export declare function clickSelector(page: Page, selector: string): Promise<void>;
+export declare function prepare(page: Page, link: string): Promise<void>;
+export declare function compareSelectedItems(page: Page, selector: string, data: string | any[], decodeJson?: boolean): Promise<void>;

package/test/lib.js

@@ -0,0 +1,30 @@
+import { expect } from "@playwright/test";
+export async function softNavigate(page, url) {
+    await page.evaluate((url) => {
+        window.history.pushState({}, "", url);
+        window.dispatchEvent(new PopStateEvent("popstate", { state: {} }));
+    }, url);
+}
+export async function querySelector(page, selector) {
+    const linkLocator = page.locator(selector);
+    await expect(linkLocator).toHaveCount(1);
+    return linkLocator;
+}
+export async function clickSelector(page, selector) {
+    const selectorLocator = await querySelector(page, selector);
+    await selectorLocator.click();
+}
+export async function prepare(page, link) {
+    await page.goto("/vite-project/dist/");
+    const linkLocator = await querySelector(page, link);
+    await expect(linkLocator).toHaveText("CompositeSelect Manager Demo");
+}
+export async function compareSelectedItems(page, selector, data, decodeJson = true) {
+    const selectedItems = await querySelector(page, selector);
+    // then extract innerHTML and parse as JSON
+    let content = await selectedItems.innerHTML();
+    if (decodeJson) {
+        content = JSON.parse(content);
+    }
+    expect(content).toEqual(data);
+}