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

composite-select 1.0.3 → 1.0.4

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/options-section/options-section.js DELETED Viewed

@@ -1,245 +0,0 @@
-import { OptionsSectionManager } from "./OptionsSectionManager.js";
-/**
- * Injects CSS into the Shadow DOM.
- * Priority:
- * 1. OptionsSection.cssText (Bundler string injection)
- * 2. <meta name="select-component" content="/path1.css, /path2.css"> (Global HTML declaration in main document)
- * 3. OptionsSection.defaultCssUrls (Global JS property)
- *
- * Example of Global HTML Declaration in the main document <head>:
- * <head>
- *   <meta name="select-component" content="OptionsSectionManager.css" />
- * </head>
- */
-export class OptionsSection extends HTMLElement {
-    /**
-     * Bundlers can inject raw CSS string here to avoid HTTP requests entirely.
-     * e.g., OptionsSection.cssText = import('./OptionsSectionManager.css?raw');
-     */
-    static cssText = "";
-    static defaultCssUrls = [];
-    _manager = null;
-    _options = {};
-    _stylesInjected = false;
-    _mountPoint;
-    static get observedAttributes() {
-        return ["options", "loading", "value", "label", "disabled", "max-height", "show-footer", "show-filter"];
-    }
-    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 = {
-            options: this._parseJSON(this.getAttribute("options")) ?? [],
-            loading: this.hasAttribute("loading"),
-            value: this.getAttribute("value") || "",
-            label: this.getAttribute("label") || "",
-            disabled: this.hasAttribute("disabled"),
-            maxHeight: this.getAttribute("max-height") || "",
-            showFooter: this.hasAttribute("show-footer"),
-            showFilter: this.hasAttribute("show-filter"),
-        };
-        this._manager = new OptionsSectionManager(this._mountPoint, this._options);
-    }
-    disconnectedCallback() {
-        this._manager?.destroy();
-    }
-    attributeChangedCallback(name, _oldValue, newValue) {
-        if (!this._manager)
-            return;
-        const isTrue = this.hasAttribute(name);
-        switch (name) {
-            case "options": {
-                const parsed = this._parseJSON(newValue);
-                if (parsed !== undefined) {
-                    this._manager.setOptions(parsed);
-                }
-                break;
-            }
-            case "loading":
-                this._manager.setLoading(isTrue);
-                break;
-            case "value":
-                this._manager.setValue(newValue);
-                break;
-            case "label":
-                this._manager.setLabel(newValue);
-                break;
-            case "disabled":
-                this._manager.setDisabled(isTrue);
-                break;
-            case "max-height":
-                this._manager.setMaxHeight(newValue);
-                break;
-            case "show-footer":
-                this._manager.setShowFooter(isTrue);
-                break;
-            case "show-filter":
-                this._manager.setShowFilter(isTrue);
-                break;
-        }
-    }
-    _injectStyles() {
-        if (this._stylesInjected)
-            return;
-        this._stylesInjected = true;
-        const style = document.createElement("style");
-        // Scenario A: Bundler injected raw CSS string directly
-        if (OptionsSection.cssText) {
-            style.textContent = OptionsSection.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 = OptionsSection.defaultCssUrls;
-            }
-            urls.forEach((url) => {
-                if (!url)
-                    return;
-                style.textContent += `@import url("${url}");\n`;
-            });
-        }
-        // Remove existing injected CSS if updating dynamically (e.g. css-urls changed)
-        const existingStyle = this.shadowRoot.querySelector("style");
-        if (existingStyle) {
-            existingStyle.remove();
-        }
-        this.shadowRoot.appendChild(style);
-    }
-    // Proxied methods
-    setMaxHeight(maxHeight) {
-        if (maxHeight)
-            this.setAttribute("max-height", maxHeight);
-        else
-            this.removeAttribute("max-height");
-    }
-    setDisabled(disabled) {
-        this.toggleAttribute("disabled", disabled);
-    }
-    setShowFooter(show) {
-        this.toggleAttribute("show-footer", show);
-    }
-    setShowFilter(show) {
-        this.toggleAttribute("show-filter", show);
-    }
-    setOptions(options) {
-        // we don't necessarily want to stringify options back to attribute for performance and avoiding circularity
-        // but we can if we want to stay in sync. SelectedSection doesn't seem to do it for 'list'.
-        // this.setAttribute("options", JSON.stringify(options));
-        this._manager?.setOptions(options);
-    }
-    setLoading(loading) {
-        this.toggleAttribute("loading", loading);
-    }
-    setValue(value) {
-        this.setAttribute("value", value);
-    }
-    setLabel(label) {
-        this.setAttribute("label", label);
-    }
-    setRenderEmpty(renderer) {
-        this._manager?.setRenderEmpty(renderer);
-    }
-    setRenderItem(renderer) {
-        this._manager?.setRenderItem(renderer);
-    }
-    setRenderList(renderer) {
-        this._manager?.setRenderList(renderer);
-    }
-    setFocus() {
-        this._manager?.setFocus();
-    }
-    setBlur() {
-        this._manager?.setBlur();
-    }
-    highlightAndScrollToElementOnTheList(id) {
-        this._manager?.highlightAndScrollToElementOnTheList(id);
-    }
-    render() {
-        this._manager?.render();
-    }
-    // Getters and setters
-    get options() {
-        return this._manager?.propOptions.options || [];
-    }
-    set options(val) {
-        this.setOptions(val);
-    }
-    get loading() {
-        return this.hasAttribute("loading");
-    }
-    set loading(val) {
-        this.setLoading(val);
-    }
-    get value() {
-        return this._manager?.propInputElement?.value ?? this.getAttribute("value") ?? "";
-    }
-    set value(val) {
-        this.setValue(val);
-    }
-    get label() {
-        return this.getAttribute("label") || "";
-    }
-    set label(val) {
-        this.setLabel(val);
-    }
-    get disabled() {
-        return this.hasAttribute("disabled");
-    }
-    set disabled(val) {
-        this.setDisabled(val);
-    }
-    get maxHeight() {
-        return this.getAttribute("max-height") || "";
-    }
-    set maxHeight(val) {
-        this.setMaxHeight(val);
-    }
-    get footer() {
-        return this.hasAttribute("show-footer") ? this.getAttribute("show-footer") !== "false" : true;
-    }
-    set footer(val) {
-        this.setShowFooter(val);
-    }
-    get filter() {
-        return this.hasAttribute("show-filter") ? this.getAttribute("show-filter") !== "false" : true;
-    }
-    set filter(val) {
-        this.setShowFilter(val);
-    }
-    get highlight() {
-        return this._manager?.propHighlightedId ?? null;
-    }
-    set highlight(val) {
-        this.highlightAndScrollToElementOnTheList(val);
-    }
-    getManager() {
-        return this._manager;
-    }
-    _parseJSON(val) {
-        if (!val)
-            return undefined;
-        try {
-            return JSON.parse(val);
-        }
-        catch (e) {
-            console.error(`OptionsSection: failed to parse JSON:`, val, e);
-            return undefined;
-        }
-    }
-}
-customElements.define("options-section", OptionsSection);

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

@@ -1,90 +0,0 @@
-// @ts-ignore
-import React from "react";
-import "./options-section.js";
-export const OptionsSection = React.forwardRef((props, ref) => {
-    const { options: optionsOptions, loading, value, label, disabled, "max-height": maxHeight, "show-footer": setShowFooter, "show-filter": setShowFilter, children, onItemPick, onInputChange, onCancel, onOk, onHighlightChange, ...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 && optionsOptions !== undefined) {
-            if (el.getManager && el.getManager()) {
-                el.getManager().setOptions(typeof optionsOptions === "string" ? JSON.parse(optionsOptions) : optionsOptions);
-            }
-            else {
-                el.setAttribute("options", typeof optionsOptions === "string" ? optionsOptions : JSON.stringify(optionsOptions));
-            }
-        }
-    }, [optionsOptions]);
-    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 (onItemPick) {
-                    unbinds.push(sub.bind("onItemPick", (...args) => {
-                        return onItemPick?.(...args);
-                    }));
-                }
-                if (onInputChange) {
-                    unbinds.push(sub.bind("onInputChange", onInputChange));
-                }
-                if (onCancel) {
-                    unbinds.push(sub.bind("onCancel", onCancel));
-                }
-                if (onOk) {
-                    unbinds.push(sub.bind("onOk", onOk));
-                }
-                if (onHighlightChange) {
-                    unbinds.push(sub.bind("onHighlightChange", onHighlightChange));
-                }
-                return () => {
-                    unbinds.forEach((u) => u());
-                };
-            }
-        }
-    }, [onItemPick, onInputChange, onCancel, onOk, onHighlightChange]);
-    const wcProps = { ...rest, ref: setRef };
-    if (value !== undefined)
-        wcProps.value = value;
-    if (label !== undefined)
-        wcProps.label = label;
-    if (String(loading) === "true") {
-        wcProps.loading = "true";
-    }
-    else {
-        delete wcProps.loading;
-    }
-    if (String(disabled) === "true") {
-        wcProps.disabled = "true";
-    }
-    else {
-        delete wcProps.disabled;
-    }
-    if (maxHeight !== undefined)
-        wcProps["max-height"] = maxHeight;
-    if (String(setShowFooter) === "true") {
-        wcProps["show-footer"] = "true";
-    }
-    else {
-        delete wcProps["show-footer"];
-    }
-    if (String(setShowFilter) === "true") {
-        wcProps["show-filter"] = "true";
-    }
-    else {
-        delete wcProps["show-filter"];
-    }
-    return React.createElement("options-section", wcProps, children);
-});
-export default OptionsSection;

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

@@ -1,336 +0,0 @@
-import createSubscriber from "../createSubscriber.js";
-export class SelectedSectionManager {
-    propParentElement;
-    propContainer;
-    propFlexList;
-    propButtonsContainer;
-    propOptions;
-    propInputElement = null;
-    propClearButton;
-    propLoaderElement = null;
-    propLabelElement = null;
-    _skipNextFocusEvent = false;
-    _subscriber = createSubscriber();
-    constructor(parentElement, options = {}) {
-        this.propParentElement = parentElement;
-        const { selected = [], showInput = true, value = "", renderItem = (item, def) => def(item), renderList = (selected, def) => def(selected), onDelete = (id) => { }, onClear = () => { }, onInputChange = (e, previousValue) => { }, onChange = (selected) => { }, onComponentChange = (s, reason) => { }, disabled = false, error = false, loading = false, renderEmpty = (def) => def(), label = "", showDelete = true, ...rest } = options;
-        this.propOptions = {
-            selected,
-            showInput,
-            value,
-            renderItem,
-            renderList,
-            onDelete,
-            onClear,
-            onInputChange,
-            onChange,
-            onComponentChange,
-            disabled,
-            error,
-            loading,
-            renderEmpty,
-            label,
-            showDelete,
-            ...rest,
-        };
-        this.render();
-        Promise.resolve().then(() => {
-            this._bindEvents();
-        });
-    }
-    getSubscriber() {
-        return this._subscriber;
-    }
-    _bindEvents() {
-        this.propParentElement.addEventListener("click", (e) => {
-            const target = e.target;
-            // Handle Clear Button
-            const clearBtn = target.closest(".clear-btn");
-            if (clearBtn && this.propParentElement.contains(clearBtn)) {
-                e.preventDefault();
-                this.clearSearch();
-                return;
-            }
-            // Handle Delete Item
-            const delBtn = target.closest("[data-remove]");
-            if (delBtn && this.propParentElement.contains(delBtn)) {
-                e.preventDefault();
-                const id = delBtn.getAttribute("data-remove");
-                if (this.propOptions.onDelete) {
-                    this.propOptions.onDelete.call(this, id);
-                }
-                this._subscriber.trigger("onDelete", id);
-                return;
-            }
-        });
-        this.propParentElement.addEventListener("input", (e) => {
-            const target = e.target;
-            if (target === this.propInputElement) {
-                const previousValue = this.propOptions.value;
-                this.propOptions.value = this.propInputElement.value;
-                if (this.propOptions.onInputChange) {
-                    this.propOptions.onInputChange.call(this, e, previousValue);
-                }
-                this._subscriber.trigger("onInputChange", e, previousValue);
-            }
-        });
-        this.propParentElement.addEventListener("focusin", (e) => {
-            const target = e.target;
-            if (target === this.propInputElement) {
-                if (this._skipNextFocusEvent) {
-                    this._skipNextFocusEvent = false;
-                    return;
-                }
-                if (this.propOptions.onFocus) {
-                    this.propOptions.onFocus.call(this, e);
-                }
-                this._subscriber.trigger("onFocus", e);
-            }
-        });
-        this.propParentElement.addEventListener("keydown", (e) => {
-            const target = e.target;
-            if (target === this.propInputElement) {
-                const isBackspaceOnEmpty = e.key === "Backspace" && this.propInputElement.value === "";
-                const isEnter = e.key === "Enter";
-                if (isEnter || isBackspaceOnEmpty) {
-                    const previousValue = this.propOptions.value;
-                    if (this.propOptions.onInputChange) {
-                        this.propOptions.onInputChange.call(this, e, previousValue);
-                    }
-                    this._subscriber.trigger("onInputChange", e, previousValue);
-                }
-            }
-        });
-    }
-    _triggerOnComponentChange(reason) {
-        if (this.propOptions.onComponentChange) {
-            this.propOptions.onComponentChange.call(this, this.propOptions, reason);
-        }
-        this._subscriber.trigger("onComponentChange", this.propOptions, reason);
-    }
-    _updateDeleteDisplay() {
-        if (this.propContainer) {
-            this.propContainer.classList.toggle("hide-delete", this.propOptions.showDelete === false);
-        }
-    }
-    _defaultRenderList(selected) {
-        return selected.map((item) => this.propOptions.renderItem(item, this._defaultRenderItem.bind(this)));
-    }
-    _defaultRenderItem(item) {
-        const el = document.createElement("div");
-        el.className = "element";
-        el.dataset.id = String(item.id);
-        const label = document.createElement("label");
-        label.textContent = item.label;
-        const del = document.createElement("div");
-        del.dataset.remove = String(item.id);
-        el.appendChild(label);
-        el.appendChild(del);
-        return el;
-    }
-    setSelected(list, triggerOnChange = true) {
-        this.propOptions.selected = list.map((s) => {
-            s.selected = true;
-            return s;
-        });
-        this.render();
-        if (triggerOnChange) {
-            if (this.propOptions.onChange) {
-                this.propOptions.onChange.call(this, this.getSelected());
-            }
-            this._subscriber.trigger("onChange", this.getSelected());
-        }
-        this._triggerOnComponentChange("setSelected");
-    }
-    setShowInput(show) {
-        this.propOptions.showInput = show = String(show) === "true" || show === true;
-        this.propInputElement.style.display = show ? "" : "none";
-        this.propInputElement.disabled = Boolean(this.propOptions.disabled);
-        this._triggerOnComponentChange("setShowInput");
-    }
-    setValue(value, triggerOnChange = true) {
-        const previousValue = this.propOptions.value;
-        this.propOptions.value = value;
-        this.propInputElement.value = value;
-        if (triggerOnChange) {
-            const e = new Event("input");
-            Object.defineProperty(e, "target", { writable: false, value: this.propInputElement });
-            if (this.propOptions.onInputChange) {
-                this.propOptions.onInputChange.call(this, e, previousValue);
-            }
-            this._subscriber.trigger("onInputChange", e, previousValue);
-        }
-        this._triggerOnComponentChange("setValue");
-    }
-    setFocus(triggerOnFocus = true) {
-        if (!triggerOnFocus) {
-            this._skipNextFocusEvent = true;
-        }
-        this.propInputElement.focus();
-    }
-    clearSearch(triggerOnClear = true, triggerOnChange = true) {
-        this.setValue("", triggerOnChange);
-        if (triggerOnClear) {
-            if (this.propOptions.onClear) {
-                this.propOptions.onClear.call(this);
-            }
-            this._subscriber.trigger("onClear");
-        }
-        this._triggerOnComponentChange("onClear");
-    }
-    setLabel(label) {
-        this.propOptions.label = label;
-        if (label) {
-            if (!this.propLabelElement) {
-                this.propLabelElement = document.createElement("label");
-                this.propLabelElement.className = "floating-label";
-            }
-            if (this.propLabelElement.parentNode !== this.propContainer) {
-                this.propContainer.insertBefore(this.propLabelElement, this.propContainer.firstChild);
-            }
-            this.propLabelElement.textContent = label;
-        }
-        else {
-            if (this.propLabelElement && this.propLabelElement.parentNode === this.propContainer) {
-                this.propContainer.removeChild(this.propLabelElement);
-            }
-        }
-        this._triggerOnComponentChange("setLabel");
-    }
-    setError(isError) {
-        this.propOptions.error = Boolean(isError);
-        this.propContainer.classList.toggle("error", isError);
-        this._triggerOnComponentChange("setError");
-    }
-    setDisabled(disabled) {
-        this.propOptions.disabled = Boolean(disabled);
-        this.propInputElement.disabled = disabled;
-        this.propClearButton.disabled = disabled;
-        this.propContainer.classList.toggle("disabled", disabled);
-        this._triggerOnComponentChange("setDisabled");
-    }
-    /**
-     * show/hide delete icon
-     * @param show
-     */
-    setShowDelete(show) {
-        this.propOptions.showDelete = Boolean(show);
-        this._updateDeleteDisplay();
-        this._triggerOnComponentChange("setShowDelete");
-    }
-    setLoading(loading) {
-        this.propOptions.loading = Boolean(loading);
-        if (loading) {
-            if (!this.propLoaderElement) {
-                this.propLoaderElement = document.createElement("div");
-                this.propLoaderElement.className = "loader";
-            }
-            if (this.propClearButton.parentNode) {
-                this.propButtonsContainer.replaceChild(this.propLoaderElement, this.propClearButton);
-            }
-        }
-        else {
-            if (this.propLoaderElement && this.propLoaderElement.parentNode) {
-                this.propButtonsContainer.replaceChild(this.propClearButton, this.propLoaderElement);
-            }
-        }
-        this._triggerOnComponentChange("setLoading");
-    }
-    render() {
-        if (!this.propContainer) {
-            this.propContainer = document.createElement("div");
-            this.propContainer.className = "selected-section";
-            this.propFlexList = document.createElement("div");
-            this.propFlexList.className = "flex-list";
-            this.propButtonsContainer = document.createElement("div");
-            this.propButtonsContainer.className = "buttons-container";
-            this.propClearButton = document.createElement("button");
-            this.propClearButton.className = "clear-btn";
-            this.propClearButton.textContent = "✕";
-            this.propButtonsContainer.appendChild(this.propClearButton);
-            this.propContainer.appendChild(this.propFlexList);
-            this.propContainer.appendChild(this.propButtonsContainer);
-            this.propParentElement.appendChild(this.propContainer);
-            const input = document.createElement("input");
-            input.type = "text";
-            input.value = this.propOptions.value || "";
-            input.placeholder = " ";
-            input.size = 1;
-            this.propInputElement = input;
-            this.propFlexList.appendChild(this.propInputElement);
-        }
-        this.setLabel(this.propOptions.label || "");
-        this.setShowDelete(this.propOptions.showDelete !== false);
-        this.setError(Boolean(this.propOptions.error));
-        this.setDisabled(Boolean(this.propOptions.disabled));
-        this.setLoading(Boolean(this.propOptions.loading));
-        this.setShowInput(Boolean(this.propOptions.showInput));
-        const elements = this.propOptions.renderList(this.getSelected(), this._defaultRenderList.bind(this));
-        if (!Array.isArray(elements)) {
-            throw new Error("renderList must return an array of HTMLElements");
-        }
-        // clear the list (except touching input)
-        const children = Array.from(this.propFlexList.childNodes);
-        for (const child of children) {
-            if (child instanceof HTMLElement && child.tagName === "INPUT") {
-                continue;
-            }
-            this.propFlexList.removeChild(child);
-        }
-        // rendering elements in order before input
-        for (const el of elements) {
-            if (!(el instanceof HTMLElement)) {
-                throw new Error("each element returned from renderList must be an HTMLElement");
-            }
-            if (this.propInputElement && this.propInputElement.parentNode === this.propFlexList) {
-                this.propFlexList.insertBefore(el, this.propInputElement);
-            }
-            else {
-                this.propFlexList.appendChild(el);
-            }
-        }
-    }
-    setRenderItem(renderItem) {
-        this.propOptions.renderItem = renderItem || ((item, def) => def(item));
-        this.render();
-        this._triggerOnComponentChange("setRenderItem");
-    }
-    setRenderList(renderList) {
-        this.propOptions.renderList = renderList || ((selected, def) => def(selected));
-        this.render();
-        this._triggerOnComponentChange("setRenderList");
-    }
-    setRenderEmpty(renderEmpty) {
-        this.propOptions.renderEmpty = renderEmpty || ((def) => def());
-        this.render();
-        this._triggerOnComponentChange("setRenderEmpty");
-    }
-    // getters
-    getSelected() {
-        return this.propOptions.selected || [];
-    }
-    getShowInput() {
-        return this.propOptions.showInput;
-    }
-    getValue() {
-        return this.propOptions.value;
-    }
-    getLabel() {
-        return this.propOptions.label;
-    }
-    getDisabled() {
-        return this.propOptions.disabled;
-    }
-    getError() {
-        return this.propOptions.error;
-    }
-    getLoading() {
-        return this.propOptions.loading;
-    }
-    getShowDelete() {
-        return this.propOptions.showDelete;
-    }
-    destroy() {
-        this._subscriber.destroy();
-    }
-}