@prolibu-suite/cobalt-core 0.1.2 → 0.3.0

package/dist/collection/components/co-command-search/co-command-search.js

@@ -1,4 +1,7 @@
 import { h } from "@stencil/core";
+import { highlightMatch } from "../../utils/normalizeText";
+import { groupItems } from "./commandSearchGroup";
+import { shouldKeepOpen, isEmptyBackspace, applyClientFilter } from "./commandSearchLogic";
 /**
  * A command palette / search component (⌘K style).
  * Opens as an overlay with a search input and filterable list of items.
@@ -15,13 +18,38 @@ export class CoCommandSearch {
         this.items = [];
         /** Empty state message when no results match */
         this.emptyMessage = 'No results found';
+        /** When true, the host supplies already-filtered, ordered items: disable
+         *  internal client filtering so fetch-as-you-type results pass through. */
+        this.async = false;
+        /** Show a loading indicator in the results area (async fetch in flight). */
+        this.loading = false;
+        /** Facet chips as JSON string: [{label:string, icon?:string}[]] */
+        this.chips = '[]';
+        /** Module tabs (mac-Spotlight style) as JSON: [{value,label,icon}]. Empty = no tabs row. */
+        this.tabs = '[]';
+        /** The active tab's value (the scope model key), or '' = no active tab. */
+        this.activeTab = '';
+        /** Show the "Más ▾" overflow tab. */
+        this.hasMore = false;
+        /** Label for the overflow tab. */
+        this.moreLabel = 'More';
+        /** Favorites / shortcuts grid (mac-Spotlight app grid) as JSON: [{value,label,icon,color}].
+         *  Shown as a grid at the top of the results, only while the query is empty. */
+        this.favorites = '[]';
         this.query = '';
         this.activeIndex = 0;
         this.handleInput = (e) => {
             this.query = e.target.value;
             this.activeIndex = 0;
+            this.coQueryChange.emit(this.query);
         };
         this.handleKeyDown = (e) => {
+            // Backspace with empty query → notify host to pop scope or last facet-chip
+            if (isEmptyBackspace(e.key, this.query)) {
+                e.preventDefault();
+                this.coBackspaceEmpty.emit(this.query);
+                return;
+            }
             const items = this.filteredItems;
             switch (e.key) {
                 case 'ArrowDown':
@@ -42,6 +70,14 @@ export class CoCommandSearch {
                     e.preventDefault();
                     this.close();
                     break;
+                case 'Tab':
+                    e.preventDefault();
+                    if (items.length > 0) {
+                        this.activeIndex = e.shiftKey
+                            ? (this.activeIndex - 1 + items.length) % items.length
+                            : (this.activeIndex + 1) % items.length;
+                    }
+                    break;
             }
         };
         this.handleOverlayClick = () => {
@@ -66,10 +102,55 @@ export class CoCommandSearch {
         return this.items;
     }
     get filteredItems() {
-        if (!this.query)
-            return this.parsedItems;
-        const q = this.query.toLowerCase();
-        return this.parsedItems.filter(item => item.label.toLowerCase().includes(q) || item.value.toLowerCase().includes(q));
+        return applyClientFilter(this.parsedItems, this.query, this.async);
+    }
+    get parsedChips() {
+        try {
+            const arr = typeof this.chips === 'string' ? JSON.parse(this.chips) : this.chips;
+            return Array.isArray(arr) ? arr : [];
+        }
+        catch (_a) {
+            return [];
+        }
+    }
+    get parsedTabs() {
+        try {
+            const a = typeof this.tabs === 'string' ? JSON.parse(this.tabs) : this.tabs;
+            return Array.isArray(a) ? a : [];
+        }
+        catch (_a) {
+            return [];
+        }
+    }
+    get parsedFavorites() {
+        try {
+            const a = typeof this.favorites === 'string' ? JSON.parse(this.favorites) : this.favorites;
+            return Array.isArray(a) ? a : [];
+        }
+        catch (_a) {
+            return [];
+        }
+    }
+    /** Item label with the matched substring wrapped for highlighting. */
+    renderLabel(label) {
+        const seg = this.query ? highlightMatch(label, this.query) : null;
+        if (!seg)
+            return label;
+        return [seg.pre, h("span", { class: "co-command-search__match" }, seg.match), seg.post];
+    }
+    onActiveTabChange(newVal) {
+        if (newVal) {
+            this.query = '';
+            this.activeIndex = 0;
+        }
+        // The active tab may be appended past the visible width (e.g. a model picked
+        // from "Más"). Scroll it into view; scroll-padding-right keeps it clear of the
+        // sticky "Más" chip.
+        requestAnimationFrame(() => {
+            var _a;
+            const active = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.co-command-search__tab[aria-selected="true"]');
+            active === null || active === void 0 ? void 0 : active.scrollIntoView({ inline: 'nearest', block: 'nearest' });
+        });
     }
     onOpenChange(newVal) {
         if (newVal) {
@@ -78,7 +159,12 @@ export class CoCommandSearch {
             requestAnimationFrame(() => { var _a; return (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.focus(); });
         }
     }
+    /** Two-stage commit: keepOpen items emit coScopeChange only; all others emit coSelect + close. */
     selectItem(item) {
+        if (shouldKeepOpen(item)) {
+            this.coScopeChange.emit(item.value);
+            return;
+        }
         this.coSelect.emit(item.value);
         this.close();
     }
@@ -89,13 +175,21 @@ export class CoCommandSearch {
     render() {
         const items = this.filteredItems;
         return [
-            h("div", { key: '549e381da5563fabb3e6c178a626f594e5222cba', class: "co-command-search__trigger", onClick: this.handleTriggerClick }, h("slot", { key: '868215f146f78217eada61b578dfd15d436c95db', name: "trigger" })),
-            h("co-overlay", { key: '1be4cfcf2847a71d7cd0c604f1cae069aa60f1a4', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '9f4de81a78ff1fbc947c375d36bd94d4ca22a75b', class: { 'co-command-search': true, 'co-command-search--open': this.open }, part: "panel", role: "dialog", "aria-modal": "true", "aria-label": "Command palette", onClick: this.handlePanelClick }, h("div", { key: 'b395211a8b62c4a902ff645b82676537ce0046ed', class: "co-command-search__input-row", part: "input-row" }, h("co-icon", { key: '642b29afe6f08e60ae33828db63ccf23b70f9fc5', name: "magnifying-glass", size: 20 }), h("input", { key: '6d4b6b07b0d44d4cfedfad5cd3bc1d638b9fe601', class: "co-command-search__input", type: "text", placeholder: this.placeholder, value: this.query, onInput: this.handleInput, onKeyDown: this.handleKeyDown, ref: el => (this.inputEl = el), part: "input" }), h("span", { key: '048f07c5cf78eee445e2e8f49271a5024ffe83f6', class: "co-command-search__shortcut" }, "ESC")), h("div", { key: 'f0f7b6dccd1168ef8ce858f35d91089b51c65512', class: "co-command-search__results", part: "results" }, items.length > 0
-                ? items.map((item, index) => (h("div", { class: {
-                        'co-command-search__item': true,
-                        'co-command-search__item--active': index === this.activeIndex,
-                    }, part: "item", onClick: () => this.selectItem(item), onMouseEnter: () => { this.activeIndex = index; } }, item.icon && h("co-icon", { name: item.icon, size: 18 }), h("span", { class: "co-command-search__item-label" }, item.label))))
-                : h("div", { class: "co-command-search__empty", part: "empty" }, this.emptyMessage)))),
+            h("div", { key: '7489dba63daa21b04e7fd12ba0923d3f5452a651', class: "co-command-search__trigger", onClick: this.handleTriggerClick }, h("slot", { key: '86bacbf98e5c7b2079d0db46862c60ee4273756d', name: "trigger" })),
+            h("co-overlay", { key: 'e6406e9eb24dfff1f1a8b78267b84fb2e305b9bd', open: this.open, onCoClose: this.handleOverlayClick }, h("div", { key: '9cf1f70ac226d3802f3f1ffaf77d1633d7c24f2a', class: { 'co-command-search': true, 'co-command-search--open': this.open }, part: "panel", role: "dialog", "aria-modal": "true", "aria-label": "Command palette", onClick: this.handlePanelClick }, h("div", { key: 'a2508671dc39fb5e90455f9ee4391e52e7739a29', class: "co-command-search__input-row", part: "input-row" }, h("co-icon", { key: '37051efc28fc3412eb24b53cd4891b98a3b8c2cc', name: "magnifying-glass", size: 20 }), this.parsedChips.map((chip, idx) => (h("span", { class: "co-command-search__facet-chip" }, chip.icon && h("co-icon", { name: chip.icon, size: 12 }), h("span", { class: "co-command-search__facet-chip-label" }, chip.label), h("button", { class: "co-command-search__facet-chip-remove", type: "button", "aria-label": `Remove filter ${chip.label}`, onClick: (e) => {
+                    e.stopPropagation();
+                    this.coChipRemove.emit(idx);
+                } }, h("co-icon", { name: "x", size: 10, weight: "bold" }))))), h("input", { key: '33f8024e71b902b954349b539dc8a6b1ea4e8a64', class: "co-command-search__input", type: "text", placeholder: this.placeholder, value: this.query, onInput: this.handleInput, onKeyDown: this.handleKeyDown, ref: el => (this.inputEl = el), part: "input", role: "combobox", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": "co-cmd-results", "aria-autocomplete": "list", "aria-activedescendant": this.filteredItems[this.activeIndex] ? 'co-cmd-opt-' + this.activeIndex : undefined }), this.loading && (h("co-loader", { key: '46eae7fb379621808f0e7a78e3e15f2cf0742fa6', class: "co-command-search__loading", part: "loading", size: "sm" })), h("span", { key: '1505eaa1ccde46d28475b7ded587732a302dfef6', class: "co-command-search__shortcut" }, "ESC")), (this.parsedTabs.length > 0 || this.hasMore) && (h("div", { key: '4557dc1c0f0f543238deeaf37731594064b7a946', class: "co-command-search__tabs", part: "tabs", role: "tablist" }, this.parsedTabs.map(tab => {
+                const active = tab.value === this.activeTab;
+                return (h("co-chip", { class: "co-command-search__tab", role: "tab", "aria-selected": active ? 'true' : 'false', clickable: true, selected: active, variant: active ? 'filled' : 'outlined', color: active ? 'primary' : 'default', iconLeft: tab.icon, label: tab.label, onCoClick: () => this.coTabSelect.emit(active ? '' : tab.value) }));
+            }), this.hasMore && (h("co-chip", { key: '9253d7fc43c7f320af6af274dce8eca6d8543186', class: "co-command-search__tab co-command-search__tab--more", clickable: true, variant: "outlined", label: this.moreLabel, iconRight: "caret-down", onCoClick: () => this.coMoreTabs.emit() })))), h("div", { key: '5ae57716cf3337623c111d8b5f9fb941536324a6', class: "co-command-search__results", part: "results", role: "listbox", id: "co-cmd-results" }, this.parsedFavorites.length > 0 && !this.query && (h("div", { key: '7e11f7b777c590b0f728240e0fbea1808d0c07a5', class: "co-command-search__fav", part: "favorites" }, h("div", { key: '67e2ba4b3a500522c7d89429359d5bd947096d8d', class: "co-command-search__fav-grid" }, this.parsedFavorites.map(fav => (h("button", { class: "co-command-search__fav-card", type: "button", onClick: () => this.coSelect.emit(fav.value) }, h("span", { class: "co-command-search__fav-icon", style: { background: fav.color || 'var(--co-semantic-surface-muted)' } }, h("co-icon", { name: fav.icon || 'circle', size: 26, weight: "fill" })), h("span", { class: "co-command-search__fav-label" }, fav.label))))))), items.length > 0
+                ? groupItems(items).map(row => row.kind === 'header'
+                    ? h("div", { class: "co-command-search__section", part: "section", role: "presentation" }, row.label)
+                    : (h("div", { class: {
+                            'co-command-search__item': true,
+                            'co-command-search__item--active': row.index === this.activeIndex,
+                        }, part: "item", role: "option", id: 'co-cmd-opt-' + row.index, "aria-selected": row.index === this.activeIndex ? 'true' : 'false', onClick: () => this.selectItem(row.item), onMouseEnter: () => { this.activeIndex = row.index; } }, row.item.icon && h("co-icon", { name: row.item.icon, size: 18 }), h("span", { class: "co-command-search__item-text" }, h("span", { class: "co-command-search__item-label" }, this.renderLabel(row.item.label)), row.item.subtitle && (h("span", { class: "co-command-search__item-subtitle" }, row.item.subtitle))))))
+                : !this.loading && (h("div", { class: "co-command-search__empty", part: "empty" }, this.emptyMessage))))),
         ];
     }
     static get is() { return "co-command-search"; }
@@ -160,9 +254,10 @@ export class CoCommandSearch {
                     "resolved": "CommandItem[] | string",
                     "references": {
                         "CommandItem": {
-                            "location": "local",
-                            "path": "/Users/agox/Documents/Prolibu/prolibu-cobalt/packages/core/src/components/co-command-search/co-command-search.tsx",
-                            "id": "src/components/co-command-search/co-command-search.tsx::CommandItem"
+                            "location": "import",
+                            "path": "./commandSearchGroup",
+                            "id": "src/components/co-command-search/commandSearchGroup.ts::CommandItem",
+                            "referenceLocation": "CommandItem"
                         }
                     }
                 },
@@ -197,6 +292,166 @@ export class CoCommandSearch {
                 "reflect": false,
                 "attribute": "empty-message",
                 "defaultValue": "'No results found'"
+            },
+            "async": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, the host supplies already-filtered, ordered items: disable\ninternal client filtering so fetch-as-you-type results pass through."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "async",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a loading indicator in the results area (async fetch in flight)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "chips": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Facet chips as JSON string: [{label:string, icon?:string}[]]"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "chips",
+                "defaultValue": "'[]'"
+            },
+            "tabs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Module tabs (mac-Spotlight style) as JSON: [{value,label,icon}]. Empty = no tabs row."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tabs",
+                "defaultValue": "'[]'"
+            },
+            "activeTab": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The active tab's value (the scope model key), or '' = no active tab."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "active-tab",
+                "defaultValue": "''"
+            },
+            "hasMore": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the \"M\u00E1s \u25BE\" overflow tab."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "has-more",
+                "defaultValue": "false"
+            },
+            "moreLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the overflow tab."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "more-label",
+                "defaultValue": "'More'"
+            },
+            "favorites": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Favorites / shortcuts grid (mac-Spotlight app grid) as JSON: [{value,label,icon,color}].\nShown as a grid at the top of the results, only while the query is empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "favorites",
+                "defaultValue": "'[]'"
             }
         };
     }
@@ -237,11 +492,104 @@ export class CoCommandSearch {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "coQueryChange",
+                "name": "coQueryChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "coScopeChange",
+                "name": "coScopeChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when an item with keepOpen=true is selected. Detail = item.value (scope model key)."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "coBackspaceEmpty",
+                "name": "coBackspaceEmpty",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when Backspace is pressed with an empty query, or when the scope chip \u2715 is clicked.\nDetail = current query string (always '' at emit time). Host decides: pop scope or remove last facet."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "coChipRemove",
+                "name": "coChipRemove",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user clicks \u2715 on a facet chip.\ndetail = chip index (number)."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "coTabSelect",
+                "name": "coTabSelect",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when a module tab is clicked. detail = tab value; '' when the active tab is re-clicked (deselect)."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "coMoreTabs",
+                "name": "coMoreTabs",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the \"M\u00E1s \u25BE\" overflow tab is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "activeTab",
+                "methodName": "onActiveTabChange"
+            }, {
                 "propName": "open",
                 "methodName": "onOpenChange"
             }];

package/dist/collection/components/co-command-search/commandSearchGroup.js

@@ -0,0 +1,17 @@
+/** Flatten an ordered CommandItem[] into render rows, inserting a header
+ *  whenever the section changes. `index` counts items only (drives activeIndex). */
+export function groupItems(items) {
+    const rows = [];
+    let lastSection;
+    let i = 0;
+    for (const item of items) {
+        const section = item.section;
+        if (section && section !== lastSection) {
+            rows.push({ kind: 'header', label: section });
+        }
+        lastSection = section;
+        rows.push({ kind: 'item', item, index: i });
+        i++;
+    }
+    return rows;
+}

package/dist/collection/components/co-command-search/commandSearchLogic.js

@@ -0,0 +1,27 @@
+import { rankByMatch } from "../../utils/normalizeText.js";
+/**
+ * Pure: should the component keep open and emit coScopeChange
+ * instead of the default coSelect+close?
+ */
+export function shouldKeepOpen(item) {
+    return item.keepOpen === true;
+}
+/**
+ * Pure: should coBackspaceEmpty fire?
+ * True when the user presses Backspace with an empty query.
+ */
+export function isEmptyBackspace(key, query) {
+    return key === 'Backspace' && query === '';
+}
+/**
+ * Pure: client-side item filtering.
+ * Mirrors the filteredItems getter logic from co-command-search.tsx.
+ * When async=true all items pass through (host already filtered them).
+ */
+export function applyClientFilter(items, query, async) {
+    if (async)
+        return items;
+    if (!query)
+        return items;
+    return rankByMatch(items, query, item => [item.label, item.value]);
+}

package/dist/collection/components/co-data-table/co-data-table.css

@@ -9,6 +9,10 @@ co-data-table {
   flex: 1;
   min-height: 0;
   overflow: hidden;
+  /* The inner .co-data-table / .co-data-table__scroll subtree settles 0->full
+   * during the custom-element upgrade + skeleton->data swap. Contain that
+   * layout so the settle does not propagate as a page-level shift. */
+  contain: layout;
 }
 
 /* ─── CONTAINER ───────────────────────────────────────────────────── */
@@ -132,6 +136,31 @@ co-data-table {
   color: var(--co-semantic-text-default);
 }
 
+/* ─── SORT BUTTON (keyboard-operable header) ────────────────────────────────────────── */
+.co-data-table__sort-button {
+  flex: 1;
+  min-width: 0;                 /* allow the label to ellipsis */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--co-spacing-sm);
+  background: transparent;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  letter-spacing: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.co-data-table__sort-button:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus, var(--co-color-primary-azul));
+  outline-offset: -2px;
+  border-radius: var(--co-border-radius-xxs);
+}
+
 /* ─── CHECKBOX COLUMN ───────────────────────────────────────── */
 .co-data-table__th--checkbox,
 .co-data-table__td--checkbox {
@@ -212,7 +241,14 @@ co-data-table {
 }
 
 .co-data-table__td {
-  padding: var(--co-spacing-md);
+  /* Figma row spec: 48px tall, dense. MUST stay a table-cell (real <table> +
+     table-layout:fixed — `display:flex` on the <td> collapses the grid). The
+     fixed 48px height + vertical-align:middle centers content vertically, so
+     padding is horizontal-only (12px / space-md); the row height supplies the
+     vertical rhythm. Any horizontal flex (space-between) goes on an inner
+     wrapper, never on the cell itself. */
+  height: 48px;
+  padding: 0 var(--co-spacing-md);
   background: inherit;
   border-bottom: 1px solid var(--co-color-opacity-negro-8);
   border-right: 1px solid var(--co-color-opacity-negro-8);