@andespindola/ui-core 0.1.0

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

@@ -0,0 +1,162 @@
+import { h, Host, } from "@stencil/core";
+export class UiDrawer {
+    constructor() {
+        /** Controla a abertura do painel lateral. */
+        this.open = false;
+        /** Borda onde o painel é ancorado. */
+        this.side = "right";
+        this.onClose = () => {
+            if (this.open) {
+                this.open = false;
+                this.uiClose.emit();
+            }
+        };
+        this.onBackdropClick = (event) => {
+            if (event.target === this.dialogEl)
+                this.close();
+        };
+    }
+    onOpenChange(value) {
+        this.sync(value);
+    }
+    componentDidLoad() {
+        this.sync(this.open);
+    }
+    sync(value) {
+        if (!this.dialogEl)
+            return;
+        if (value && !this.dialogEl.open)
+            this.dialogEl.showModal();
+        else if (!value && this.dialogEl.open)
+            this.dialogEl.close();
+    }
+    /** Abre o painel imperativamente. */
+    async show() {
+        this.open = true;
+    }
+    /** Fecha o painel imperativamente. */
+    async close() {
+        this.open = false;
+    }
+    render() {
+        return (h(Host, { key: '96c4f4cec0fdc9a8601448bfc9a16dda37b33507' }, h("dialog", { key: '72ef71e674d116c9d2f47bf4d997fc9d5ca1472d', class: `drawer side-${this.side}`, ref: (el) => (this.dialogEl = el), onClose: this.onClose, onCancel: this.onClose, onClick: this.onBackdropClick }, h("div", { key: '25e537c059dcc33085bd0c0c47aa39448a16176b', class: "content" }, h("slot", { key: '3c0b746055fb6f1ac6a8c0c4713aa9cd47fd1a00' })))));
+    }
+    static get is() { return "ui-drawer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-drawer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-drawer.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 do painel lateral."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "side": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"right\" | \"bottom\"",
+                    "resolved": "\"bottom\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Borda onde o painel \u00E9 ancorado."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "side",
+                "defaultValue": "\"right\""
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiClose",
+                "name": "uiClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido quando o painel \u00E9 fechado (Esc, backdrop ou close())."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Abre o painel imperativamente.",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Fecha o painel imperativamente.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }];
+    }
+}

package/dist/collection/components/ui-dropdown-item/ui-dropdown-item.css

@@ -0,0 +1,36 @@
+:host {
+  display: block;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  padding: 0.5rem 0.625rem;
+  font-family: var(--ui-font-sans);
+  font-size: 0.875rem;
+  text-align: left;
+  color: var(--ui-foreground);
+  background: transparent;
+  border: none;
+  border-radius: var(--ui-radius-sm);
+  cursor: pointer;
+  outline: none;
+  transition: background var(--ui-duration) var(--ui-ease);
+}
+
+.item:hover,
+.item:focus-visible {
+  background: var(--ui-chip);
+}
+
+.item:focus-visible {
+  box-shadow: 0 0 0 2px var(--ui-ring);
+}
+
+.item:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: default;
+}

package/dist/collection/components/ui-dropdown-item/ui-dropdown-item.js

@@ -0,0 +1,71 @@
+import { h, Host, } from "@stencil/core";
+export class UiDropdownItem {
+    constructor() {
+        /** Desabilita o item, impedindo seleção. */
+        this.disabled = false;
+        this.onClick = () => {
+            if (this.disabled)
+                return;
+            this.uiSelect.emit();
+            this.host.dispatchEvent(new CustomEvent("uiDropdownClose", { bubbles: true, composed: true }));
+        };
+    }
+    render() {
+        return (h(Host, { key: '9e88bb2a1ccec0a6c5f088cdd40a7881cba6e3ac' }, h("button", { key: '371c531f920cbd1a5374b8c6812d9b67c97e44f4', type: "button", class: "item", role: "menuitem", disabled: this.disabled, onClick: this.onClick }, h("slot", { key: 'fe16aad1402e098180719edd9110c83ee550224c' }))));
+    }
+    static get is() { return "ui-dropdown-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-dropdown-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-dropdown-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Desabilita o item, impedindo sele\u00E7\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiSelect",
+                "name": "uiSelect",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido quando o item \u00E9 selecionado."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+}

package/dist/collection/components/ui-dropdown-menu/ui-dropdown-menu.css

@@ -0,0 +1,39 @@
+:host {
+  display: inline-block;
+}
+
+.trigger {
+  display: inline-flex;
+}
+
+.menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-width: 10rem;
+  max-width: calc(100vw - 1rem);
+  padding: 0.375rem;
+  font-family: var(--ui-font-sans);
+  color: var(--ui-foreground);
+  border: 1px solid var(--ui-border);
+  background: var(--ui-panel-strong);
+  box-shadow: var(--ui-shadow-lg);
+  backdrop-filter: blur(22px);
+  border-radius: var(--ui-radius);
+  visibility: hidden;
+  opacity: 0;
+  transform: scale(0.96);
+  transition:
+    opacity var(--ui-duration) var(--ui-ease),
+    transform var(--ui-duration) var(--ui-ease);
+}
+
+.menu.is-open {
+  visibility: visible;
+  opacity: 1;
+  transform: scale(1);
+}

package/dist/collection/components/ui-dropdown-menu/ui-dropdown-menu.js

@@ -0,0 +1,216 @@
+import { h, Host, } from "@stencil/core";
+import { computePosition, autoUpdate, offset, flip, shift, } from "@floating-ui/dom";
+export class UiDropdownMenu {
+    constructor() {
+        /** Controla a abertura do menu. */
+        this.open = false;
+        /** Posição preferida do menu relativo ao gatilho. */
+        this.placement = "bottom";
+        this.onTriggerClick = (event) => {
+            event.stopPropagation();
+            this.setOpen(!this.open);
+        };
+        this.onDocumentClick = (event) => {
+            if (!this.open)
+                return;
+            if (event.composedPath().includes(this.host))
+                return;
+            this.setOpen(false);
+        };
+        this.onKeydown = (event) => {
+            if (event.key === "Escape" && this.open)
+                this.setOpen(false);
+        };
+    }
+    onOpenChange(value) {
+        if (value) {
+            requestAnimationFrame(() => this.start());
+            document.addEventListener("click", this.onDocumentClick);
+            document.addEventListener("keydown", this.onKeydown);
+        }
+        else {
+            this.stop();
+            document.removeEventListener("click", this.onDocumentClick);
+            document.removeEventListener("keydown", this.onKeydown);
+        }
+    }
+    disconnectedCallback() {
+        this.stop();
+        document.removeEventListener("click", this.onDocumentClick);
+        document.removeEventListener("keydown", this.onKeydown);
+    }
+    /** Abre o menu imperativamente. */
+    async show() {
+        this.setOpen(true);
+    }
+    /** Fecha o menu imperativamente. */
+    async close() {
+        this.setOpen(false);
+    }
+    onItemClose() {
+        this.setOpen(false);
+    }
+    setOpen(value) {
+        if (this.open === value)
+            return;
+        this.open = value;
+        this.uiOpenChange.emit(value);
+    }
+    start() {
+        if (!this.triggerEl || !this.floatingEl)
+            return;
+        this.stop();
+        this.cleanup = autoUpdate(this.triggerEl, this.floatingEl, () => {
+            if (!this.triggerEl || !this.floatingEl)
+                return;
+            computePosition(this.triggerEl, this.floatingEl, {
+                placement: this.placement,
+                middleware: [offset(8), flip(), shift({ padding: 8 })],
+            }).then(({ x, y }) => {
+                Object.assign(this.floatingEl.style, { left: `${x}px`, top: `${y}px` });
+            });
+        });
+    }
+    stop() {
+        this.cleanup?.();
+        this.cleanup = undefined;
+    }
+    render() {
+        return (h(Host, { key: '83694eb278f8a9c711ae30677254a4168dbd825f' }, h("span", { key: 'dabab12417ed473e22097578c07842f36a05e397', class: "trigger", ref: (el) => (this.triggerEl = el), onClick: this.onTriggerClick }, h("slot", { key: '6e3b0f1c2c83a48c0c70a2416c6e0ac34b05c68e', name: "trigger" })), h("div", { key: '2b6059c9bfa98c6f5bc9656d86ffeaf1009a887b', class: { menu: true, "is-open": this.open }, role: "menu", ref: (el) => (this.floatingEl = el) }, h("slot", { key: 'af01e24903f705ef30174ba37735d774b8e5aa99' }))));
+    }
+    static get is() { return "ui-dropdown-menu"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-dropdown-menu.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-dropdown-menu.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 do menu."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Placement",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "Placement": {
+                            "location": "import",
+                            "path": "@floating-ui/dom",
+                            "id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement",
+                            "referenceLocation": "Placement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Posi\u00E7\u00E3o preferida do menu relativo ao gatilho."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "\"bottom\""
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "uiOpenChange",
+                "name": "uiOpenChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitido quando o estado de abertura muda."
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "show": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Abre o menu imperativamente.",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Fecha o menu imperativamente.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "uiDropdownClose",
+                "method": "onItemClose",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}

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

@@ -0,0 +1,34 @@
+:host {
+  display: block;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.label {
+  font-family: var(--ui-font-sans);
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--ui-foreground);
+}
+
+.required {
+  color: var(--ui-danger);
+}
+
+.error {
+  margin: 0;
+  font-family: var(--ui-font-sans);
+  font-size: 0.75rem;
+  color: var(--ui-danger);
+}
+
+.description {
+  margin: 0;
+  font-family: var(--ui-font-sans);
+  font-size: 0.75rem;
+  color: var(--ui-text-muted);
+}

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

@@ -0,0 +1,122 @@
+import { h, Host } from "@stencil/core";
+export class UiField {
+    constructor() {
+        /** Marca o campo como obrigatório (asterisco). */
+        this.required = false;
+    }
+    render() {
+        return (h(Host, { key: '1f944085a10d6c795ce06a7a91021fee46780347' }, h("div", { key: 'a2f2fde238292d543c65bf6e1ed0dfd0dce424f9', class: "field" }, this.label && (h("label", { key: '4f450b5e43f1ea8dda3b3134022a010391a2f404', class: "label", htmlFor: this.fieldId }, this.label, this.required && (h("span", { key: '1853d16b19752584b646a294dcbe2b8359ec12b4', class: "required", "aria-hidden": "true" }, " *")))), h("slot", { key: '75adc24c2264e3e954618737769232535caa13e4' }), this.error ? (h("p", { class: "error", role: "alert" }, this.error)) : (this.description && h("p", { class: "description" }, this.description)))));
+    }
+    static get is() { return "ui-field"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["ui-field.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["ui-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto do r\u00F3tulo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Texto auxiliar exibido abaixo do controle."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "error": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Mensagem de erro; quando presente substitui a descri\u00E7\u00E3o."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Marca o campo como obrigat\u00F3rio (asterisco)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required",
+                "defaultValue": "false"
+            },
+            "fieldId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Id do controle associado ao r\u00F3tulo."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "field-id"
+            }
+        };
+    }
+}