npm - composite-select - Versions diffs - 1.0.0 - Mend

composite-select 1.0.0

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 (105) hide show

package/README.md +5 -0
package/commitlint.config.js +3 -0
package/composition/composite-select/CompositeManager.js +43 -0
package/composition/composite-select/composite-select.js +199 -0
package/composition/composite-select/debounce.js +10 -0
package/composition/composite-select/helpers.js +96 -0
package/composition/composite-select/react.js +189 -0
package/composition/container/ContainerManager.js +76 -0
package/composition/img/ai.png +0 -0
package/composition/img/chatgpt.png +0 -0
package/composition/img/claude.png +0 -0
package/composition/img/gemini.png +0 -0
package/composition/img/gmail.png +0 -0
package/composition/img/google_calendar.png +0 -0
package/composition/img/google_drive.png +0 -0
package/composition/img/google_keep.png +0 -0
package/composition/img/img.json +5 -0
package/composition/img/perplexity.png +0 -0
package/composition/img/t3chat.png +0 -0
package/composition/img/timeanddate.png +0 -0
package/composition/img/tools.png +0 -0
package/composition/img/youtube.png +0 -0
package/composition/options-section/OptionsSectionManager.css +263 -0
package/composition/options-section/OptionsSectionManager.js +486 -0
package/composition/options-section/options-section.js +245 -0
package/composition/options-section/react.js +90 -0
package/composition/selected-section/SelectedSectionManager.css +214 -0
package/composition/selected-section/SelectedSectionManager.js +336 -0
package/composition/selected-section/react.js +91 -0
package/composition/selected-section/selected-section.js +207 -0
package/composition/unbind/clickOutside.js +17 -0
package/diff/coreBundle.patch +13 -0
package/diff/recorderApp.patch +13 -0
package/dist/cjs/Module.cjs +15 -0
package/dist/cjs/composite-select/CompositeManager.js +43 -0
package/dist/cjs/composite-select/composite-select.js +199 -0
package/dist/cjs/composite-select/debounce.js +10 -0
package/dist/cjs/composite-select/helpers.js +96 -0
package/dist/cjs/composite-select/react.js +189 -0
package/dist/cjs/container/ContainerManager.js +76 -0
package/dist/cjs/createSubscriber.cjs +48 -0
package/dist/cjs/options-section/OptionsSectionManager.js +486 -0
package/dist/cjs/options-section/options-section.js +245 -0
package/dist/cjs/options-section/react.js +90 -0
package/dist/cjs/selected-section/SelectedSectionManager.js +336 -0
package/dist/cjs/selected-section/react.js +91 -0
package/dist/cjs/selected-section/selected-section.js +207 -0
package/dist/cjs/types.cjs +1 -0
package/dist/cjs/unbind/clickOutside.js +17 -0
package/dist/esm/Module.js +15 -0
package/dist/esm/composite-select/CompositeManager.js +43 -0
package/dist/esm/composite-select/composite-select.js +199 -0
package/dist/esm/composite-select/debounce.js +10 -0
package/dist/esm/composite-select/helpers.js +96 -0
package/dist/esm/composite-select/react.js +189 -0
package/dist/esm/container/ContainerManager.js +76 -0
package/dist/esm/createSubscriber.js +48 -0
package/dist/esm/options-section/OptionsSectionManager.js +486 -0
package/dist/esm/options-section/options-section.js +245 -0
package/dist/esm/options-section/react.js +90 -0
package/dist/esm/selected-section/SelectedSectionManager.js +336 -0
package/dist/esm/selected-section/react.js +91 -0
package/dist/esm/selected-section/selected-section.js +207 -0
package/dist/esm/types.js +1 -0
package/dist/esm/unbind/clickOutside.js +17 -0
package/dist/types/Module.d.ts +15 -0
package/dist/types/composite-select/CompositeManager.d.ts +21 -0
package/dist/types/composite-select/ContainerManager.html.d.ts +1 -0
package/dist/types/composite-select/composite-select.d.ts +26 -0
package/dist/types/composite-select/composite-select.html.d.ts +1 -0
package/dist/types/composite-select/debounce.d.ts +1 -0
package/dist/types/composite-select/helpers.d.ts +38 -0
package/dist/types/composite-select/namesSource.d.ts +4 -0
package/dist/types/composite-select/react.d.ts +61 -0
package/dist/types/composite-select/urlManager.d.ts +49 -0
package/dist/types/composite-select/urlManagerWc.d.ts +44 -0
package/dist/types/container/ContainerManager.d.ts +33 -0
package/dist/types/createSubscriber.d.ts +26 -0
package/dist/types/options-section/OptionsSectionManager.d.ts +117 -0
package/dist/types/options-section/OptionsSectionManager.html.d.ts +1 -0
package/dist/types/options-section/OptionsSectionManagerWebComponent.attributes.html.d.ts +1 -0
package/dist/types/options-section/OptionsSectionManagerWebComponent.html.d.ts +1 -0
package/dist/types/options-section/OptionsSectionManagerWebComponent.nocssrequest.html.d.ts +1 -0
package/dist/types/options-section/options-section.d.ts +67 -0
package/dist/types/options-section/react.d.ts +27 -0
package/dist/types/options-section/urlManager.d.ts +28 -0
package/dist/types/selected-section/SelectedSectionManager.d.ts +89 -0
package/dist/types/selected-section/SelectedSectionManager.html.d.ts +1 -0
package/dist/types/selected-section/SelectedSectionManager.templates.html.d.ts +1 -0
package/dist/types/selected-section/SelectedSectionManagerWebComponent.attributes.html.d.ts +1 -0
package/dist/types/selected-section/SelectedSectionManagerWebComponent.html.d.ts +1 -0
package/dist/types/selected-section/SelectedSectionManagerWebComponent.nocssrequest.html.d.ts +1 -0
package/dist/types/selected-section/react.d.ts +32 -0
package/dist/types/selected-section/selected-section.d.ts +54 -0
package/dist/types/selected-section/urlManager.d.ts +25 -0
package/dist/types/types.d.ts +9 -0
package/dist/types/unbind/clickOutside.d.ts +1 -0
package/floating-label-pattern.css +502 -0
package/js/CenterAndHeightResizer.js +263 -0
package/js/CenterResizer.js +190 -0
package/madooei.tar.gz +0 -0
package/package.json +28 -0
package/release.config.js +3 -0
package/test/lib.d.ts +6 -0
package/test/lib.js +30 -0

package/composition/options-section/options-section.js ADDED Viewed

@@ -0,0 +1,245 @@
+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 ADDED Viewed

@@ -0,0 +1,90 @@
+// @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.css ADDED Viewed

@@ -0,0 +1,214 @@
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+.selected-section {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: inherit;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 0 0 1px var(--gcp-css-border, #99999b);
+  transition: box-shadow var(--gcp-css-transition, 150ms cubic-bezier(0.4, 0, 0.2, 1));
+  min-height: 36px;
+  cursor: text;
+  .floating-label {
+    position: absolute;
+    left: 0;
+    margin-left: 7px;
+    top: 9px;
+    font-size: 16px;
+    color: var(--gcp-css-gray-text, #5f6368);
+    pointer-events: none;
+    transition:
+      transform var(--gcp-css-transition, 150ms),
+      font-size var(--gcp-css-transition, 150ms),
+      color var(--gcp-css-transition, 150ms),
+      top var(--gcp-css-transition, 150ms);
+    background: #fff;
+    padding: 0 4px;
+    z-index: 3;
+    line-height: 1;
+  }
+  /* Float condition */
+  &:has(input:focus),
+  &:has(.element),
+  &:has(input:not(:placeholder-shown)) {
+    .floating-label {
+      top: 0;
+      transform: translateY(-50%);
+      font-size: 12px;
+    }
+    &:focus-within .floating-label {
+      color: var(--gcp-css-primary, #1a73e8);
+    }
+    &.error .floating-label {
+      color: var(--gcp-css-error, #d93025);
+    }
+    &.disabled .floating-label {
+      color: var(--gcp-css-gray-text, #5f6368);
+    }
+  }
+  &:focus-within {
+    box-shadow: 0 0 0 2px var(--gcp-css-primary, #1a73e8);
+  }
+  &.error {
+    box-shadow: 0 0 0 2px var(--gcp-css-error, #d93025);
+  }
+  &.disabled {
+    pointer-events: none;
+    opacity: 0.6;
+    color: var(--gcp-css-gray-text, #5f6368);
+    .buttons-container .clear-btn {
+      opacity: 0.7;
+    }
+    .flex-list input,
+    .element {
+      color: #74797e;
+    }
+  }
+  &.hide-delete {
+    .element {
+      padding-right: 8px;
+      [data-remove] {
+        display: none;
+      }
+    }
+  }
+  .flex-list {
+    display: flex;
+    flex-wrap: wrap;
+    flex-grow: 1;
+    row-gap: 0;
+    column-gap: 6px;
+    align-items: center;
+    z-index: 1;
+    min-width: 0;
+    padding: 0;
+    padding-left: 12px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    > * {
+      font-size: 16px;
+      line-height: 1.15;
+      padding-top: 3px;
+      padding-bottom: 3px;
+      box-sizing: border-box;
+      margin-top: 3px;
+      margin-bottom: 3px;
+    }
+    input {
+      border: none;
+      outline: none;
+      background: transparent;
+      field-sizing: content;
+      flex: 1 1 auto;
+      min-width: 50px;
+      max-width: 100%;
+      padding-left: 0;
+      padding-right: 0;
+      font-family: inherit;
+      color: inherit;
+      &::placeholder {
+        color: transparent;
+      }
+    }
+  }
+  .buttons-container {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+    padding-left: 4px;
+    z-index: 2;
+    flex-shrink: 0;
+    .loader {
+      width: 24px;
+      height: 24px;
+      margin-right: 5px;
+      background-image: url("data:image/svg+xml,%3Csvg fill='%231a73e8' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-size: contain;
+      animation: spin 0.75s linear infinite;
+    }
+    button.clear-btn {
+      background: none;
+      border: none;
+      cursor: pointer;
+      font-size: 14px;
+      padding: 9px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--gcp-css-gray-text, #5f6368);
+      line-height: 1;
+      margin-right: 3px;
+      &:hover {
+        color: #333;
+      }
+    }
+  }
+  .element {
+    display: flex;
+    align-items: center;
+    background: rgb(0 0 0 / 12%);
+    border-radius: 2px;
+    padding-left: 6px;
+    padding-right: 5px;
+    color: rgba(0, 0, 0, 0.88);
+    margin-left: -4px;
+    margin-right: 5px;
+    [data-remove] {
+      cursor: pointer;
+      margin-left: 4px;
+      width: 14px;
+      height: 14px;
+      min-width: 14px;
+      min-height: 14px;
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      &::before {
+        content: "✕";
+        font-size: 10px;
+        line-height: 1;
+        color: rgba(0, 0, 0, 0.45);
+      }
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.08);
+        &::before {
+          color: rgba(0, 0, 0, 0.85);
+        }
+      }
+    }
+  }
+}