@andespindola/ui-core 0.2.0 → 0.4.0

package/dist/collection/components/ui-combobox/ui-combobox.js

@@ -0,0 +1,248 @@
+import { h, Host, } from "@stencil/core";
+import { computePosition, autoUpdate, offset, flip, shift, size, } from "@floating-ui/dom";
+export class UiCombobox {
+    constructor() {
+        /** Opções disponíveis para autocomplete. */
+        this.options = [];
+        /** Valor selecionado. */
+        this.value = "";
+        /** Placeholder do campo. */
+        this.placeholder = "";
+        /** Texto digitado no campo. */
+        this.query = "";
+        /** Indica se a lista flutuante está aberta. */
+        this.open = false;
+        /** Índice da opção destacada. */
+        this.activeIndex = -1;
+        this.listId = `ui-combobox-list-${Math.random().toString(36).slice(2, 9)}`;
+        this.onInput = (event) => {
+            this.query = event.target.value;
+            this.activeIndex = -1;
+            this.setOpen(true);
+        };
+        this.onFocus = () => {
+            this.setOpen(true);
+        };
+        this.onKeydown = (event) => {
+            const items = this.filtered;
+            switch (event.key) {
+                case "ArrowDown":
+                    event.preventDefault();
+                    if (!this.open) {
+                        this.setOpen(true);
+                        return;
+                    }
+                    if (items.length === 0)
+                        return;
+                    this.activeIndex = (this.activeIndex + 1) % items.length;
+                    break;
+                case "ArrowUp":
+                    event.preventDefault();
+                    if (items.length === 0)
+                        return;
+                    this.activeIndex =
+                        (this.activeIndex - 1 + items.length) % items.length;
+                    break;
+                case "Enter":
+                    if (this.open && this.activeIndex >= 0 && items[this.activeIndex]) {
+                        event.preventDefault();
+                        this.select(items[this.activeIndex]);
+                    }
+                    break;
+                case "Escape":
+                    if (this.open) {
+                        event.preventDefault();
+                        this.setOpen(false);
+                    }
+                    break;
+            }
+        };
+        this.onDocumentClick = (event) => {
+            if (!this.open)
+                return;
+            if (event.composedPath().includes(this.host))
+                return;
+            this.setOpen(false);
+        };
+    }
+    componentWillLoad() {
+        const selected = this.options.find((option) => option.value === this.value);
+        if (selected)
+            this.query = selected.label;
+    }
+    disconnectedCallback() {
+        this.stop();
+        document.removeEventListener("click", this.onDocumentClick);
+    }
+    get filtered() {
+        const term = this.query.toLowerCase();
+        return this.options.filter((option) => option.label.toLowerCase().includes(term));
+    }
+    setOpen(value) {
+        if (this.open === value)
+            return;
+        this.open = value;
+        if (value) {
+            requestAnimationFrame(() => this.start());
+            document.addEventListener("click", this.onDocumentClick);
+        }
+        else {
+            this.stop();
+            this.activeIndex = -1;
+            document.removeEventListener("click", this.onDocumentClick);
+        }
+    }
+    start() {
+        if (!this.inputEl || !this.listEl)
+            return;
+        this.stop();
+        this.cleanup = autoUpdate(this.inputEl, this.listEl, () => {
+            if (!this.inputEl || !this.listEl)
+                return;
+            computePosition(this.inputEl, this.listEl, {
+                placement: "bottom-start",
+                middleware: [
+                    offset(6),
+                    flip(),
+                    shift({ padding: 8 }),
+                    size({
+                        apply: ({ rects, elements }) => {
+                            Object.assign(elements.floating.style, {
+                                width: `${rects.reference.width}px`,
+                            });
+                        },
+                    }),
+                ],
+            }).then(({ x, y }) => {
+                Object.assign(this.listEl.style, { left: `${x}px`, top: `${y}px` });
+            });
+        });
+    }
+    stop() {
+        this.cleanup?.();
+        this.cleanup = undefined;
+    }
+    select(option) {
+        this.value = option.value;
+        this.query = option.label;
+        this.setOpen(false);
+        this.uiChange.emit(option.value);
+    }
+    render() {
+        const items = this.filtered;
+        return (h(Host, { key: '64d332f96d0cb39e1889eb56dbf448f67e5ed240' }, h("div", { key: '30f829b5eff180aa97a2bbb2f90a4e289768df71', class: "field" }, h("input", { key: 'f6df95047db674d2e49d34fed6057cffc86eab49', class: "input", type: "text", role: "combobox", value: this.query, placeholder: this.placeholder, autocomplete: "off", "aria-expanded": this.open ? "true" : "false", "aria-controls": this.listId, "aria-autocomplete": "list", ref: (el) => (this.inputEl = el), onInput: this.onInput, onFocus: this.onFocus, onKeyDown: this.onKeydown })), h("div", { key: 'de55c7ad59dfa3e35aeac8799366e3ee849d1398', id: this.listId, class: { list: true, "is-open": this.open }, role: "listbox", ref: (el) => (this.listEl = el) }, items.length === 0 ? (h("div", { class: "empty" }, "Nenhum resultado")) : (items.map((option, index) => (h("div", { class: {
+                option: true,
+                active: index === this.activeIndex,
+                selected: option.value === this.value,
+            }, role: "option", "aria-selected": option.value === this.value ? "true" : "false", onMouseEnter: () => (this.activeIndex = index), onMouseDown: (event) => {
+                event.preventDefault();
+                this.select(option);
+            } }, option.label)))))));
+    }
+    static get is() { return "ui-combobox"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-combobox.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-combobox.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "options": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "UiComboboxOption[]",
+                    "resolved": "UiComboboxOption[]",
+                    "references": {
+                        "UiComboboxOption": {
+                            "location": "local",
+                            "path": "/Users/andersonespindola/.ghq/github.com/andersonflima/ui/packages/core/src/components/ui-combobox/ui-combobox.tsx",
+                            "id": "src/components/ui-combobox/ui-combobox.tsx::UiComboboxOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Op\u00E7\u00F5es dispon\u00EDveis para autocomplete."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Valor selecionado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "\"\""
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder do campo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "\"\""
+            }
+        };
+    }
+    static get states() {
+        return {
+            "query": {},
+            "open": {},
+            "activeIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiChange",
+                "name": "uiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido ao selecionar uma op\u00E7\u00E3o."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/ui-command/ui-command.css

@@ -0,0 +1,85 @@
+.command {
+  padding: 0;
+  border: none;
+  background: transparent;
+  max-width: none;
+  max-height: none;
+  color: var(--ui-foreground);
+}
+
+.command::backdrop {
+  background: var(--ui-overlay);
+  backdrop-filter: blur(4px);
+}
+
+.panel {
+  margin: 12vh auto 0;
+  width: min(40rem, 92vw);
+  border: 1px solid var(--ui-border);
+  background: var(--ui-panel-strong);
+  box-shadow: var(--ui-shadow-lg);
+  backdrop-filter: blur(22px) saturate(140%);
+  border-radius: var(--ui-radius-xl);
+  overflow: hidden;
+  font-family: var(--ui-font-sans);
+}
+
+.search {
+  width: 100%;
+  box-sizing: border-box;
+  border: none;
+  border-bottom: 1px solid var(--ui-border);
+  background: transparent;
+  color: var(--ui-foreground);
+  font-family: var(--ui-font-sans);
+  font-size: 1rem;
+  padding: 1rem;
+  outline: none;
+}
+
+.search::placeholder {
+  color: var(--ui-text-faint);
+}
+
+.list {
+  max-height: 50vh;
+  overflow: auto;
+  padding: 0.5rem;
+}
+
+.group {
+  text-transform: uppercase;
+  font-size: 0.7rem;
+  letter-spacing: 0.04em;
+  color: var(--ui-text-faint);
+  padding: 0.5rem 0.75rem 0.25rem;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: var(--ui-radius-sm);
+  cursor: pointer;
+}
+
+.item.active {
+  background: var(--ui-chip);
+}
+
+.label {
+  color: var(--ui-foreground);
+}
+
+.hint {
+  color: var(--ui-text-faint);
+  font-size: 0.8rem;
+}
+
+.empty {
+  text-align: center;
+  color: var(--ui-text-faint);
+  padding: 1.5rem 1rem;
+}

package/dist/collection/components/ui-command/ui-command.js

@@ -0,0 +1,290 @@
+import { h, Host, } from "@stencil/core";
+export class UiCommand {
+    constructor() {
+        /** Controla a abertura da paleta de comandos. */
+        this.open = false;
+        /** Itens disponíveis na paleta. */
+        this.items = [];
+        /** Placeholder do campo de busca. */
+        this.placeholder = "Buscar comando…";
+        /** Abre/fecha com Cmd/Ctrl+K quando habilitado. */
+        this.hotkey = true;
+        /** Texto digitado na busca. */
+        this.query = "";
+        /** Índice do item destacado na lista filtrada. */
+        this.activeIndex = 0;
+        this.onHotkey = (event) => {
+            if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+                event.preventDefault();
+                this.open = !this.open;
+            }
+        };
+        this.onClose = () => {
+            if (this.open)
+                this.open = false;
+            this.query = "";
+            this.activeIndex = 0;
+        };
+        this.onInput = (event) => {
+            this.query = event.target.value;
+            this.activeIndex = 0;
+        };
+        this.onKeydown = (event) => {
+            const items = this.filtered;
+            switch (event.key) {
+                case "ArrowDown":
+                    event.preventDefault();
+                    if (items.length === 0)
+                        return;
+                    this.activeIndex = (this.activeIndex + 1) % items.length;
+                    break;
+                case "ArrowUp":
+                    event.preventDefault();
+                    if (items.length === 0)
+                        return;
+                    this.activeIndex =
+                        (this.activeIndex - 1 + items.length) % items.length;
+                    break;
+                case "Enter":
+                    if (items[this.activeIndex]) {
+                        event.preventDefault();
+                        this.select(items[this.activeIndex]);
+                    }
+                    break;
+            }
+        };
+    }
+    onOpenChange(value) {
+        this.sync(value);
+        if (value) {
+            requestAnimationFrame(() => this.inputEl?.focus());
+        }
+    }
+    componentDidLoad() {
+        this.sync(this.open);
+    }
+    connectedCallback() {
+        if (this.hotkey && typeof document !== "undefined") {
+            document.addEventListener("keydown", this.onHotkey);
+        }
+    }
+    disconnectedCallback() {
+        if (typeof document !== "undefined") {
+            document.removeEventListener("keydown", this.onHotkey);
+        }
+    }
+    sync(value) {
+        if (!this.dialogEl)
+            return;
+        if (value && !this.dialogEl.open)
+            this.dialogEl.showModal();
+        else if (!value && this.dialogEl.open)
+            this.dialogEl.close();
+    }
+    /** Abre a paleta imperativamente. */
+    async show() {
+        this.open = true;
+    }
+    /** Fecha a paleta imperativamente. */
+    async close() {
+        this.open = false;
+    }
+    get filtered() {
+        const term = this.query.toLowerCase();
+        return this.items.filter((item) => item.label.toLowerCase().includes(term));
+    }
+    select(item) {
+        this.uiSelect.emit(item.value);
+        this.open = false;
+        this.query = "";
+        this.activeIndex = 0;
+    }
+    render() {
+        const items = this.filtered;
+        let flatIndex = -1;
+        const seenGroups = new Set();
+        return (h(Host, { key: '2c99a55d42f0fa90a2b2ec4cae3d0952429fe861' }, h("dialog", { key: '514c6b029111f2fbba14ce430f515c3528b6666f', class: "command", ref: (el) => (this.dialogEl = el), onClose: this.onClose, onCancel: this.onClose }, h("div", { key: '430a2fd81e35ff4f2478a45d1398df7a575ce92d', class: "panel" }, h("input", { key: '2eb475315a08d49f5716fd3aac87e1ce9d3d937b', class: "search", type: "text", role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list", autocomplete: "off", value: this.query, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), onInput: this.onInput, onKeyDown: this.onKeydown }), h("div", { key: '031e45085143e13aa360b0f2641a1fc80c4f75ab', class: "list", role: "listbox" }, items.length === 0 ? (h("div", { class: "empty" }, "Nenhum comando")) : (items.map((item) => {
+            flatIndex += 1;
+            const index = flatIndex;
+            const showGroup = item.group !== undefined && !seenGroups.has(item.group);
+            if (item.group !== undefined)
+                seenGroups.add(item.group);
+            return [
+                showGroup ? (h("div", { class: "group" }, item.group)) : null,
+                h("div", { class: { item: true, active: index === this.activeIndex }, role: "option", "aria-selected": index === this.activeIndex ? "true" : "false", onMouseEnter: () => (this.activeIndex = index), onMouseDown: (event) => {
+                        event.preventDefault();
+                        this.select(item);
+                    } }, h("span", { class: "label" }, item.label), item.hint ? (h("span", { class: "hint" }, item.hint)) : null),
+            ];
+        })))))));
+    }
+    static get is() { return "ui-command"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-command.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-command.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controla a abertura da paleta de comandos."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "items": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "UiCommandItem[]",
+                    "resolved": "UiCommandItem[]",
+                    "references": {
+                        "UiCommandItem": {
+                            "location": "local",
+                            "path": "/Users/andersonespindola/.ghq/github.com/andersonflima/ui/packages/core/src/components/ui-command/ui-command.tsx",
+                            "id": "src/components/ui-command/ui-command.tsx::UiCommandItem"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Itens dispon\u00EDveis na paleta."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder do campo de busca."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "\"Buscar comando\u2026\""
+            },
+            "hotkey": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Abre/fecha com Cmd/Ctrl+K quando habilitado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hotkey",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "query": {},
+            "activeIndex": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiSelect",
+                "name": "uiSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido ao selecionar um comando."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Abre a paleta imperativamente.",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Fecha a paleta imperativamente.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }];
+    }
+}

package/dist/collection/components/ui-container/ui-container.js

@@ -12,7 +12,7 @@ export class UiContainer {
             [`size-${this.size}`]: true,
             padded: this.padded,
         };
-        return (h(Host, { key: '4f00ee39f0ae347fafac349ee8e42c991c8013dd' }, h("div", { key: 'a0f8f0c6d418f119c6631d0387f9328af8fbb416', class: classes }, h("slot", { key: '86178f8371c958123fcf8b7e6bfe059aeed9f690' }))));
+        return (h(Host, { key: '474a0aeda3c1caad66af3108381f325dbec41566' }, h("div", { key: 'df5fdea525ac34873923b65408f971957fb53186', class: classes }, h("slot", { key: 'e83ff090d3634368b7425db0d4c94f860934c951' }))));
     }
     static get is() { return "ui-container"; }
     static get encapsulation() { return "shadow"; }