@andespindola/ui-core 0.3.0 → 0.4.0

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

@@ -0,0 +1,273 @@
+import { h, Host, } from "@stencil/core";
+export class UiCarousel {
+    constructor() {
+        /** Permite navegação circular (wrap) entre o primeiro e o último slide. */
+        this.loop = false;
+        /** Intervalo de autoplay em ms. 0 desliga o autoplay. */
+        this.autoplay = 0;
+        /** Exibe as setas de navegação. */
+        this.showArrows = true;
+        /** Exibe os indicadores (dots). */
+        this.showDots = true;
+        /** Índice do slide atual. */
+        this.index = 0;
+        /** Quantidade de slides. */
+        this.count = 0;
+        this.syncCount = () => {
+            const slot = this.host.shadowRoot?.querySelector("slot");
+            if (!slot)
+                return;
+            this.count = slot.assignedElements().length;
+            if (this.index > this.count - 1) {
+                this.index = Math.max(0, this.count - 1);
+            }
+        };
+        this.handleMouseEnter = () => {
+            if (this.autoplay > 0)
+                this.stopAutoplay();
+        };
+        this.handleMouseLeave = () => {
+            if (this.autoplay > 0)
+                this.startAutoplay();
+        };
+    }
+    componentDidLoad() {
+        this.syncCount();
+        this.startAutoplay();
+    }
+    disconnectedCallback() {
+        this.stopAutoplay();
+    }
+    startAutoplay() {
+        if (this.autoplay > 0) {
+            this.stopAutoplay();
+            this.timer = setInterval(() => {
+                this.advance();
+            }, this.autoplay);
+        }
+    }
+    stopAutoplay() {
+        if (this.timer) {
+            clearInterval(this.timer);
+            this.timer = undefined;
+        }
+    }
+    advance() {
+        if (this.count < 1)
+            return;
+        this.goTo((this.index + 1) % this.count);
+    }
+    setIndex(i) {
+        if (this.count < 1)
+            return;
+        let target = i;
+        if (this.loop) {
+            target = ((i % this.count) + this.count) % this.count;
+        }
+        else {
+            target = Math.max(0, Math.min(i, this.count - 1));
+        }
+        if (target === this.index)
+            return;
+        this.index = target;
+        this.uiChange.emit(this.index);
+    }
+    /** Avança para o próximo slide. */
+    async next() {
+        this.setIndex(this.index + 1);
+    }
+    /** Volta para o slide anterior. */
+    async prev() {
+        this.setIndex(this.index - 1);
+    }
+    /** Vai para um slide específico pelo índice. */
+    async goTo(i) {
+        this.setIndex(i);
+    }
+    render() {
+        const hasNav = this.count > 1;
+        const atStart = this.index <= 0;
+        const atEnd = this.index >= this.count - 1;
+        return (h(Host, { key: '8674262ced2aef3587cb5b5148628776c3a438df' }, h("div", { key: 'f75c9ec8e3d6aa8635e3001a108795f2b0ac8075', class: "viewport", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'eb654e625366fbeef0b91dd9d86fabe82bada130', class: "track", style: { transform: `translateX(${-this.index * 100}%)` } }, h("slot", { key: '23be2c8067e38b9092bbe6d3ef7b59efb91176c2', onSlotchange: this.syncCount })), this.showArrows && hasNav && (h("button", { key: 'a079b10d78e03a780cccd34a18cb677890c79b8d', type: "button", class: "arrow arrow-prev", "aria-label": "Slide anterior", disabled: !this.loop && atStart, onClick: () => this.prev() }, "\u2039")), this.showArrows && hasNav && (h("button", { key: 'baa6cdc3055631a766afeffc2dadf3d565afaf71', type: "button", class: "arrow arrow-next", "aria-label": "Pr\u00F3ximo slide", disabled: !this.loop && atEnd, onClick: () => this.next() }, "\u203A")), this.showDots && hasNav && (h("div", { key: '3b381517e47193aece7e50c7f134f3e70ea2eda6', class: "dots" }, Array.from({ length: this.count }).map((_, i) => (h("button", { key: i, type: "button", class: { dot: true, active: i === this.index }, "aria-label": `Ir para slide ${i + 1}`, "aria-current": i === this.index ? "true" : "false", onClick: () => this.goTo(i) }))))))));
+    }
+    static get is() { return "ui-carousel"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-carousel.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-carousel.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "loop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Permite navega\u00E7\u00E3o circular (wrap) entre o primeiro e o \u00FAltimo slide."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loop",
+                "defaultValue": "false"
+            },
+            "autoplay": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Intervalo de autoplay em ms. 0 desliga o autoplay."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autoplay",
+                "defaultValue": "0"
+            },
+            "showArrows": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Exibe as setas de navega\u00E7\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-arrows",
+                "defaultValue": "true"
+            },
+            "showDots": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Exibe os indicadores (dots)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-dots",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "index": {},
+            "count": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiChange",
+                "name": "uiChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido quando o slide atual muda, com o \u00EDndice novo."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "next": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Avan\u00E7a para o pr\u00F3ximo slide.",
+                    "tags": []
+                }
+            },
+            "prev": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Volta para o slide anterior.",
+                    "tags": []
+                }
+            },
+            "goTo": {
+                "complexType": {
+                    "signature": "(i: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "i",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Vai para um slide espec\u00EDfico pelo \u00EDndice.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}

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

@@ -19,7 +19,7 @@ export class UiCheckbox {
         };
     }
     render() {
-        return (h(Host, { key: 'ec07dd3898dfb9eeac1a07d41895be145a8f03f0' }, h("button", { key: '7d1e72daf042994ba140703e5f8ce2bb5558932d', class: "checkbox", type: "button", role: "checkbox", "aria-checked": this.checked ? "true" : "false", disabled: this.disabled, onClick: this.toggle, onKeyDown: this.onKeyDown }, h("svg", { key: 'f1a59bc59f90e6bce5b289a4a05da51778788c19', class: "check", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("polyline", { key: '6ea7bc0406e6e8befd6ceea7193423bd433d9a63', points: "20 6 9 17 4 12" })))));
+        return (h(Host, { key: '341aeea485e623d978d0e738481dd5e0865b1ff3' }, h("button", { key: 'a3a5fa4569152d3811d0b575dd3dba099aa7b782', class: "checkbox", type: "button", role: "checkbox", "aria-checked": this.checked ? "true" : "false", disabled: this.disabled, onClick: this.toggle, onKeyDown: this.onKeyDown }, h("svg", { key: '2653b2db08fc200cc9de850bf3b5e7aec7bb96a0', class: "check", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, h("polyline", { key: '009b16f0efcd6f4d59255262e95542e5362832ed', points: "20 6 9 17 4 12" })))));
     }
     static get is() { return "ui-checkbox"; }
     static get encapsulation() { return "shadow"; }

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: 'd9f407cdd15aa38d7e21898f4088d58846e38f22' }, h("div", { key: '7c7596a79dedc3daf94ac5440447c4608e037854', class: classes }, h("slot", { key: '5005378ea1514e2d96fa0cdba219055161ee6688' }))));
+        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"; }