npm - composite-select - Versions diffs - 1.0.3 → 1.0.5 - Mend

composite-select 1.0.3 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/README.md +4 -0
package/composition/list-up-down-navi/ListManager.css +203 -0
package/package.json +1 -1
package/commitlint.config.js +0 -3
package/composition/composite-select/CompositeManager.js +0 -43
package/composition/composite-select/composite-select.js +0 -199
package/composition/composite-select/debounce.js +0 -10
package/composition/composite-select/helpers.js +0 -96
package/composition/composite-select/react.js +0 -189
package/composition/container/ContainerManager.js +0 -76
package/composition/options-section/OptionsSectionManager.js +0 -486
package/composition/options-section/options-section.js +0 -245
package/composition/options-section/react.js +0 -90
package/composition/selected-section/SelectedSectionManager.js +0 -336
package/composition/selected-section/react.js +0 -91
package/composition/selected-section/selected-section.js +0 -207
package/composition/unbind/clickOutside.js +0 -17
package/diff/coreBundle.patch +0 -13
package/diff/recorderApp.patch +0 -13
package/madooei.tar.gz +0 -0
package/release.config.js +0 -3
package/test/lib.d.ts +0 -6
package/test/lib.js +0 -30

package/composition/selected-section/react.js DELETED Viewed

@@ -1,91 +0,0 @@
-// @ts-ignore
-import React from "react";
-import "./selected-section.js";
-export const SelectedSection = React.forwardRef((props, ref) => {
-    const { label, "show-input": showInput, value, disabled, error, loading, selected: selectedSelected, children, onDelete, onClear, onChange, onInputChange, onFocus, ...rest } = props;
-    const internalRef = React.useRef(null);
-    const setRef = React.useCallback((node) => {
-        internalRef.current = node;
-        if (typeof ref === "function") {
-            ref(node);
-        }
-        else if (ref) {
-            ref.current = node;
-        }
-    }, [ref]);
-    React.useLayoutEffect(() => {
-        const el = internalRef.current;
-        if (el && selectedSelected !== undefined) {
-            if (el.getManager && el.getManager()) {
-                el.getManager().setSelected(typeof selectedSelected === "string" ? JSON.parse(selectedSelected) : selectedSelected);
-            }
-            else {
-                el.setAttribute("selected", typeof selectedSelected === "string" ? selectedSelected : JSON.stringify(selectedSelected));
-            }
-        }
-    }, [selectedSelected]);
-    React.useLayoutEffect(() => {
-        const el = internalRef.current;
-        if (el && el.getManager && el.getManager()) {
-            const mgr = el.getManager();
-            const sub = mgr.getSubscriber();
-            if (sub) {
-                const unbinds = [];
-                if (onDelete) {
-                    unbinds.push(sub.bind("onDelete", (id) => onDelete(id)));
-                }
-                if (onClear) {
-                    unbinds.push(sub.bind("onClear", () => onClear()));
-                }
-                if (onChange) {
-                    unbinds.push(sub.bind("onChange", (s) => onChange(s)));
-                }
-                if (onInputChange) {
-                    unbinds.push(sub.bind("onInputChange", (e, previousValue) => onInputChange({
-                        originalEvent: e,
-                        value: e.target.value,
-                        key: e.key || "",
-                        previousValue,
-                    })));
-                }
-                if (onFocus) {
-                    unbinds.push(sub.bind("onFocus", (e) => onFocus({ originalEvent: e })));
-                }
-                return () => {
-                    unbinds.forEach((u) => u());
-                };
-            }
-        }
-    }, [onDelete, onClear, onChange, onInputChange, onFocus]);
-    const wcProps = { ...rest, ref: setRef };
-    if (label !== undefined)
-        wcProps.label = label;
-    if (value !== undefined)
-        wcProps.value = value;
-    if (String(showInput) === "true") {
-        wcProps["show-input"] = "true";
-    }
-    else {
-        delete wcProps["show-input"];
-    }
-    if (String(disabled) === "true") {
-        wcProps.disabled = "true";
-    }
-    else {
-        delete wcProps.disabled;
-    }
-    if (String(error) === "true") {
-        wcProps.error = "true";
-    }
-    else {
-        delete wcProps.error;
-    }
-    if (String(loading) === "true") {
-        wcProps.loading = "true";
-    }
-    else {
-        delete wcProps.loading;
-    }
-    return React.createElement("selected-section", wcProps, children);
-});
-export default SelectedSection;

package/composition/selected-section/selected-section.js DELETED Viewed

@@ -1,207 +0,0 @@
-import { SelectedSectionManager } from "./SelectedSectionManager.js";
-/**
- * Injects CSS into the Shadow DOM.
- * Priority:
- * 1. SelectedSection.cssText (Bundler string injection)
- * 2. <meta name="select-component" content="/path1.css, /path2.css"> (Global HTML declaration in main document)
- * 3. SelectedSection.defaultCssUrls (Global JS property)
- *
- * Example of Global HTML Declaration in the main document <head>:
- * <head>
- *   <meta name="select-component" content="SelectedSectionManager.css">
- * </head>
- */
-export class SelectedSection extends HTMLElement {
-    _manager = null;
-    _options = {};
-    _mountPoint;
-    _stylesInjected = false;
-    // 1. For Bundlers: Assign CSS string directly (e.g. import css from './style.css?raw')
-    static cssText = "";
-    // 2. For Vanilla JS: Default URLs (Vite/Webpack5 will also process import.meta.url)
-    static defaultCssUrls = [];
-    static get observedAttributes() {
-        return ["label", "show-input", "value", "disabled", "error", "loading", "selected"];
-    }
-    constructor() {
-        super();
-        this.attachShadow({ mode: "open" });
-        this.shadowRoot.innerHTML = `<style></style><div></div>`;
-        this._mountPoint = this.shadowRoot.querySelector("div");
-    }
-    connectedCallback() {
-        this._injectStyles();
-        if (this._manager)
-            return;
-        this._options = {
-            label: this.getAttribute("label") || "",
-            showInput: this.hasAttribute("show-input"),
-            value: this.getAttribute("value") || "",
-            disabled: this.hasAttribute("disabled"),
-            error: this.hasAttribute("error"),
-            loading: this.hasAttribute("loading"),
-            selected: this._parseJSON(this.getAttribute("selected")) ?? [],
-        };
-        this._manager = new SelectedSectionManager(this._mountPoint, this._options);
-    }
-    disconnectedCallback() {
-        this._manager?.destroy();
-        this._manager = null;
-    }
-    attributeChangedCallback(name, _oldValue, newValue) {
-        if (!this._manager)
-            return;
-        const isTrue = this.hasAttribute(name);
-        switch (name) {
-            case "label":
-                this._manager.setLabel(newValue);
-                break;
-            case "show-input":
-                this._manager.setShowInput(isTrue);
-                break;
-            case "value":
-                this._manager.setValue(newValue);
-                break;
-            case "disabled":
-                this._manager.setDisabled(isTrue);
-                break;
-            case "error":
-                this._manager.setError(isTrue);
-                break;
-            case "loading":
-                this._manager.setLoading(isTrue);
-                break;
-            case "selected": {
-                const parsed = this._parseJSON(newValue);
-                if (parsed !== undefined) {
-                    this._manager.setSelected(parsed);
-                }
-                break;
-            }
-        }
-    }
-    _injectStyles() {
-        if (this._stylesInjected)
-            return;
-        this._stylesInjected = true;
-        const style = document.createElement("style");
-        // Scenario A: Bundler injected raw CSS string directly
-        if (SelectedSection.cssText) {
-            style.textContent = SelectedSection.cssText;
-        }
-        // Scenario B: Load from URLs (Global Meta Tag > Default Static Property)
-        else {
-            let urls = [];
-            const metaTag = document.querySelector('meta[name="select-component"]');
-            if (metaTag && metaTag.getAttribute("content")) {
-                urls = metaTag
-                    .getAttribute("content")
-                    .split(",")
-                    .map((s) => s.trim());
-            }
-            else {
-                urls = SelectedSection.defaultCssUrls;
-            }
-            urls.forEach((url) => {
-                if (!url)
-                    return;
-                style.textContent += `@import url("${url}");\n`;
-            });
-        }
-        // Remove existing injected CSS if updating dynamically
-        const existingStyle = this.shadowRoot.querySelector("style");
-        if (existingStyle) {
-            existingStyle.remove();
-        }
-        this.shadowRoot.appendChild(style);
-    }
-    // Proxied methods
-    setSelected(list) {
-        this._manager?.setSelected(list);
-    }
-    setValue(value) {
-        this._manager?.setValue(value);
-    }
-    clearSearch(triggerOnChange = true) {
-        this._manager?.clearSearch(triggerOnChange);
-    }
-    setError(state) {
-        this.toggleAttribute("error", state);
-    }
-    setDisabled(state) {
-        this.toggleAttribute("disabled", state);
-    }
-    setLoading(state) {
-        this.toggleAttribute("loading", state);
-    }
-    setLabel(text) {
-        this.setAttribute("label", text);
-    }
-    setShowInput(state) {
-        this.toggleAttribute("show-input", state);
-    }
-    setRenderItem(renderer) {
-        this._manager?.setRenderItem(renderer);
-    }
-    setRenderList(renderer) {
-        this._manager?.setRenderList(renderer);
-    }
-    render() {
-        this._manager?.render();
-    }
-    // Getters and setters for properties
-    get selected() {
-        return this._manager?.getSelected() || [];
-    }
-    set selected(val) {
-        this.setSelected(val);
-    }
-    get value() {
-        return this._manager?.propInputElement?.value || "";
-    }
-    set value(val) {
-        this.setValue(val);
-    }
-    get label() {
-        return this.getAttribute("label") || "";
-    }
-    set label(val) {
-        this.setLabel(val);
-    }
-    get error() {
-        return this.hasAttribute("error");
-    }
-    set error(val) {
-        this.setError(val);
-    }
-    get disabled() {
-        return this.hasAttribute("disabled");
-    }
-    set disabled(val) {
-        this.setDisabled(val);
-    }
-    get loading() {
-        return this.hasAttribute("loading");
-    }
-    set loading(val) {
-        this.setLoading(val);
-    }
-    setFocus() {
-        this._manager?.setFocus();
-    }
-    getManager() {
-        return this._manager;
-    }
-    _parseJSON(val) {
-        if (!val)
-            return undefined;
-        try {
-            return JSON.parse(val);
-        }
-        catch (e) {
-            console.error(`SelectedSection: failed to parse JSON:`, val, e);
-            return undefined;
-        }
-    }
-}
-customElements.define("selected-section", SelectedSection);

package/composition/unbind/clickOutside.js DELETED Viewed

@@ -1,17 +0,0 @@
-export function clickOutside(targets, callback) {
-    const targetList = Array.isArray(targets) ? targets : [targets];
-    const handler = (e) => {
-        const node = e.target;
-        const isInside = targetList.some((target) => target && target.contains(node));
-        if (!isInside) {
-            callback(e);
-        }
-    };
-    // Use capturing phase so we don't miss events if some child stops propagation
-    document.addEventListener("click", handler, true);
-    document.addEventListener("touchstart", handler, { capture: true, passive: true });
-    return function unbind() {
-        document.removeEventListener("click", handler, true);
-        document.removeEventListener("touchstart", handler, true);
-    };
-}

package/diff/coreBundle.patch DELETED Viewed

@@ -1,13 +0,0 @@
---- node_modules/playwright-core/lib/coreBundle.js	2026-05-23 03:29:43
-+++ diff/coreBundle.js	2026-05-23 04:08:12
-@@ -46685,8 +46685,8 @@
-         const recorderPlaywright = createPlaywright2({ sdkLanguage: "javascript", isInternalPlaywright: true });
-         const { context: appContext, page } = await launchApp(recorderPlaywright.chromium, {
-           sdkLanguage,
--          windowSize: { width: 600, height: 600 },
--          windowPosition: { x: 1020, y: 10 },
-+          windowSize: { width: 1000, height: 1200 },
-+          windowPosition: { x: 1320, y: 5 },
-           persistentContextOptions: {
-             noDefaultViewport: true,
-             headless: !!process.env.PWTEST_CLI_HEADLESS || isUnderTest() && !headed,

package/diff/recorderApp.patch DELETED Viewed

@@ -1,13 +0,0 @@
---- node_modules/playwright-core/lib/server/recorder/recorderApp.js	2026-05-21 17:28:58
-+++ diff/recorderApp.js	2026-05-21 17:34:13
-@@ -186,8 +186,8 @@
-     const recorderPlaywright = require("../playwright").createPlaywright({ sdkLanguage: "javascript", isInternalPlaywright: true });
-     const { context: appContext, page } = await (0, import_launchApp2.launchApp)(recorderPlaywright.chromium, {
-       sdkLanguage,
--      windowSize: { width: 600, height: 600 },
--      windowPosition: { x: 1020, y: 10 },
-+      windowSize: { width: 1000, height: 1200 },
-+      windowPosition: { x: 1320, y: 5 },
-       persistentContextOptions: {
-         noDefaultViewport: true,
-         headless: !!process.env.PWTEST_CLI_HEADLESS || (0, import_debug.isUnderTest)() && !headed,

package/madooei.tar.gz DELETED Viewed

Binary file

package/release.config.js DELETED Viewed

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

package/test/lib.d.ts DELETED Viewed

@@ -1,6 +0,0 @@
-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 DELETED Viewed

@@ -1,30 +0,0 @@
-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);
-}