@vmz/ui 0.3.6 → 0.3.8

package/src/components/Menu.vmz

@@ -1,243 +1,416 @@
-<template>
-    <div data-vmz-ui="menu" :data-vmz-overlay-open="open" class="vmz-ui-menu">
-        <button type="button" data-vmz-menu="trigger" aria-haspopup="menu" :aria-expanded="open ? 'true' : 'false'" :aria-controls="menuId" @click="toggle" :onKeyDown="onTriggerKeyDown" class="vmz-ui-menu__trigger">
-            {{ label }}
-        </button>
-        <div v-if="open" :id="menuId" role="menu" data-vmz-overlay="menu" data-vmz-overlay-owner="menu" data-vmz-focus="enter" tabindex="-1" :onKeyDown="onMenuKeyDown" class="vmz-ui-menu__panel">
-            <button v-for="item in items" :key="item.id" type="button" role="menuitem" :data-vmz-menu-item="item.id" @click="onItemClick" class="vmz-ui-menu__item">
-                {{ item.title }}
-            </button>
-        </div>
-    </div>
-</template>
-<style>
-.vmz-ui-menu {
-    position: relative;
-    display: inline-block;
-}
-
-.vmz-ui-menu__trigger {
-    font: inherit;
-    font-size: 0.875rem;
-    font-weight: 400;
-    min-height: var(--vmz-control-height, 2rem);
-    padding: 0.25rem 0.75rem;
-    border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
-    cursor: pointer;
-    background: var(--vmz-surface-paper, #fff);
-    color: var(--vmz-text-ink);
-    outline: none;
-}
-
-.vmz-ui-menu__trigger:hover {
-    color: var(--vmz-action-primary-background);
-    border-color: var(--vmz-action-primary-background);
-}
-
-.vmz-ui-menu__trigger:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
-}
-
-.vmz-ui-menu__panel {
-    position: absolute;
-    z-index: 30;
-    top: calc(100% + 0.25rem);
-    left: 0;
-    min-width: 10rem;
-    padding: 0.25rem;
-    border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
-    background: var(--vmz-surface-paper, #fff);
-    color: var(--vmz-text-ink);
-    box-shadow: var(--vmz-shadow-popup);
-    outline: none;
-}
-
-.vmz-ui-menu__panel:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
-}
-
-.vmz-ui-menu__item {
-    display: block;
-    width: 100%;
-    text-align: left;
-    font: inherit;
-    padding: 0.375rem 0.625rem;
-    border: 0;
-    border-radius: var(--vmz-radius-md, 6px);
-    background: transparent;
-    color: inherit;
-    cursor: pointer;
-    outline: none;
-}
-
-.vmz-ui-menu__item:hover,
-.vmz-ui-menu__item:focus-visible {
-    background: color-mix(in srgb, var(--vmz-action-primary-background) 18%, transparent);
-}
-
-.vmz-ui-menu__item:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
-}
-</style>
-<script client>
-/**
- * VMZ UI — Menu (UI2).
- * Parent owns `open`; Escape / choose closes via onClose; focus restore to trigger.
- */
-export default class Menu {
-    public label: string = "Menu";
-    public open: boolean = false;
-    public menuId: string = "vmz-menu";
-    /** @type {{ id: string, title: string }[]} */
-    public items: {
-        id: string;
-        title: string;
-    }[] = [];
-    public onOpenChange: ((open: boolean) => void) | null = null;
-    public onSelect: ((id: string) => void) | null = null;
-    _restoreFocus = null;
-    _panel = null;
-    _docKeyHandler = null;
-    _docPointerHandler = null;
-    _observer = null;
-    async onMount() {
-        if (typeof document === "undefined" || typeof MutationObserver === "undefined") return;
-        const root = this.__vmzDomRoot;
-        if (!root || typeof root.querySelector !== "function") return;
-        this._observer = new MutationObserver(() => this._syncFromDom());
-        this._observer.observe(root, {
-            childList: true,
-            subtree: true,
-        });
-        this._syncFromDom();
-    }
-    onDestroy() {
-        if (this._observer) {
-            this._observer.disconnect();
-            this._observer = null;
-        }
-        this._teardownDoc();
-        this._panel = null;
-        this._restoreFocus = null;
-    }
-    toggle() {
-        if (typeof this.onOpenChange === "function") this.onOpenChange(!this.open);
-    }
-    close() {
-        if (typeof this.onOpenChange === "function") this.onOpenChange(false);
-    }
-    choose(id) {
-        if (typeof this.onSelect === "function") this.onSelect(id);
-        this.close();
-    }
-    onItemClick(ev) {
-        const el = ev?.currentTarget;
-        const id =
-            el && typeof el.getAttribute === "function"
-                ? el.getAttribute("data-vmz-menu-item")
-                : null;
-        if (id) this.choose(id);
-    }
-    onTriggerKeyDown(ev) {
-        if (!ev) return;
-        if ((ev.key === "ArrowDown" || ev.key === "Enter" || ev.key === " ") && !this.open) {
-            ev.preventDefault();
-            if (typeof this.onOpenChange === "function") this.onOpenChange(true);
-        }
-    }
-    onMenuKeyDown(ev) {
-        if (!ev || !this._panel) return;
-        if (ev.key === "Escape") {
-            ev.preventDefault();
-            this.close();
-            return;
-        }
-        const nodes = [...this._panel.querySelectorAll('[role="menuitem"]')].filter(
-            (n) => n instanceof HTMLElement && n.offsetParent !== null,
-        );
-        if (!nodes.length) return;
-        const idx = nodes.indexOf(document.activeElement);
-        if (ev.key === "ArrowDown") {
-            ev.preventDefault();
-            nodes[(idx + 1 + nodes.length) % nodes.length].focus();
-        } else if (ev.key === "ArrowUp") {
-            ev.preventDefault();
-            nodes[(idx - 1 + nodes.length) % nodes.length].focus();
-        } else if (ev.key === "Home") {
-            ev.preventDefault();
-            nodes[0].focus();
-        } else if (ev.key === "End") {
-            ev.preventDefault();
-            nodes[nodes.length - 1].focus();
-        }
-    }
-    _syncFromDom() {
-        const root = this.__vmzDomRoot;
-        const panel =
-            root && typeof root.querySelector === "function"
-                ? root.querySelector('[data-vmz-overlay="menu"][data-vmz-focus="enter"]')
-                : null;
-        if (panel && !this._panel) this._enterFocus(panel);
-        else if (!panel && this._panel) this._exitFocus();
-    }
-    _enterFocus(panel) {
-        if (typeof document === "undefined") return;
-        const root = this.__vmzDomRoot;
-        const trigger =
-            root && typeof root.querySelector === "function"
-                ? root.querySelector('[data-vmz-menu="trigger"]')
-                : null;
-        const active = document.activeElement;
-        if (!this._restoreFocus) {
-            if (trigger instanceof HTMLElement) this._restoreFocus = trigger;
-            else if (active instanceof HTMLElement) this._restoreFocus = active;
-        }
-        this._panel = panel instanceof HTMLElement ? panel : null;
-        const first =
-            this._panel && typeof this._panel.querySelector === "function"
-                ? this._panel.querySelector('[role="menuitem"]')
-                : null;
-        if (first && typeof first.focus === "function") first.focus();
-        else if (this._panel && typeof this._panel.focus === "function") this._panel.focus();
-        if (!this._docKeyHandler) {
-            this._docKeyHandler = (ev) => {
-                if (ev.key === "Escape") {
-                    ev.preventDefault();
-                    this.close();
-                }
-            };
-            document.addEventListener("keydown", this._docKeyHandler);
-        }
-        if (!this._docPointerHandler) {
-            this._docPointerHandler = (ev) => {
-                const t = ev.target;
-                if (!(t instanceof Node)) return;
-                if (root && typeof root.contains === "function" && root.contains(t)) return;
-                this.close();
-            };
-            document.addEventListener("pointerdown", this._docPointerHandler, true);
-        }
-    }
-    _exitFocus() {
-        this._teardownDoc();
-        this._panel = null;
-        const restore = this._restoreFocus;
-        this._restoreFocus = null;
-        if (restore && typeof restore.focus === "function" && document.contains(restore)) {
-            restore.focus();
-        }
-    }
-    _teardownDoc() {
-        if (typeof document !== "undefined") {
-            if (this._docKeyHandler) document.removeEventListener("keydown", this._docKeyHandler);
-            if (this._docPointerHandler) {
-                document.removeEventListener("pointerdown", this._docPointerHandler, true);
-            }
-        }
-        this._docKeyHandler = null;
-        this._docPointerHandler = null;
-    }
-}
-</script>
+<template>
+    <div data-vmz-ui="menu" :data-vmz-overlay-open="open" class="vmz-ui-menu">
+        <button type="button" data-vmz-menu="trigger" aria-haspopup="menu" :aria-expanded="open ? 'true' : 'false'" :aria-controls="menuId" @click="toggle" :onKeyDown="onTriggerKeyDown" class="vmz-ui-menu__trigger">
+            <span class="vmz-ui-menu__trigger-label">
+                {{ label }}
+            </span>
+            <Icon name="action.chevron-down" size="sm" decorative />
+        </button>
+        <div v-if="open" :id="menuId" role="menu" data-vmz-overlay="menu" data-vmz-overlay-owner="menu" data-vmz-focus="enter" tabindex="-1" :onKeyDown="onMenuKeyDown" class="vmz-ui-menu__panel">
+            <div v-for="item in items" :key="item.id" :data-kind="item.kind || 'item'" :data-vmz-menu-row="item.id" class="vmz-ui-menu__row">
+                <div v-if="item.kind === 'divider'" role="separator" class="vmz-ui-menu__divider" />
+                <div v-else-if="item.kind === 'group'" role="presentation" class="vmz-ui-menu__group">
+                    {{ item.title }}
+                </div>
+                <div v-else-if="item.children && item.children.length" :data-open="subOpen(item.id) ? 'true' : 'false'" :data-danger="item.danger ? 'true' : 'false'" class="vmz-ui-menu__submenu">
+                    <button type="button" role="menuitem" aria-haspopup="menu" :aria-expanded="subOpen(item.id) ? 'true' : 'false'" :disabled="item.disabled" @click="toggleSub(item.id)" class="vmz-ui-menu__item vmz-ui-menu__item--sub">
+                        <span class="vmz-ui-menu__label">
+                            {{ item.title }}
+                        </span>
+                        <Icon name="action.chevron-right" size="sm" decorative />
+                    </button>
+                    <div v-if="subOpen(item.id)" role="menu" class="vmz-ui-menu__subpanel">
+                        <button v-for="child in item.children" :key="child.id" type="button" role="menuitem" :data-vmz-menu-item="child.id" :data-danger="child.danger ? 'true' : 'false'" :data-active="child.active ? 'true' : 'false'" :disabled="child.disabled" @click="onItemClick" class="vmz-ui-menu__item">
+                            {{ child.title }}
+                        </button>
+                    </div>
+                </div>
+                <button v-else type="button" role="menuitem" :data-vmz-menu-item="item.id" :data-danger="item.danger ? 'true' : 'false'" :data-active="item.active ? 'true' : 'false'" :disabled="item.disabled" @click="onItemClick" class="vmz-ui-menu__item">
+                    {{ item.title }}
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+<style>
+.vmz-ui-menu {
+    position: relative;
+    display: inline-block;
+}
+
+.vmz-ui-menu__trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font: inherit;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    min-height: var(--vmz-control-height, 32px);
+    padding: 0 12px;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-md);
+    cursor: pointer;
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
+    outline: none;
+    transition:
+        color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        border-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-menu__trigger:hover {
+    color: var(--vmz-action-primary-background);
+    border-color: var(--vmz-action-primary-background);
+}
+
+.vmz-ui-menu__trigger:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-menu__trigger-label:empty {
+    display: none;
+}
+
+.vmz-ui-menu[data-vmz-overlay-open="true"] .vmz-ui-menu__trigger {
+    border-color: var(--vmz-action-primary-background);
+}
+
+.vmz-ui-menu[data-vmz-overlay-open="true"] .vmz-ui-menu__trigger .vmz-ui-icon {
+    transform: rotate(180deg);
+}
+
+.vmz-ui-menu__panel {
+    position: absolute;
+    z-index: 30;
+    top: calc(100% + 4px);
+    left: 0;
+    min-width: 176px;
+    max-height: 320px;
+    overflow: auto;
+    box-sizing: border-box;
+    padding: 4px;
+    border: 1px solid var(--vmz-line-subtle);
+    border-radius: var(--vmz-radius-lg);
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
+    box-shadow: var(--vmz-shadow-popup);
+    outline: none;
+    animation: vmz-ui-menu-in var(--vmz-motion-overlay-duration)
+        var(--vmz-motion-overlay-easing);
+}
+
+.vmz-ui-menu__panel:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-menu__row {
+    display: contents;
+}
+
+.vmz-ui-menu__item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    width: 100%;
+    min-height: 32px;
+    box-sizing: border-box;
+    text-align: left;
+    font: inherit;
+    font-size: 14px;
+    line-height: 22px;
+    padding: 0 12px;
+    border: 0;
+    border-radius: var(--vmz-radius-md);
+    background: transparent;
+    color: var(--vmz-text-ink);
+    cursor: pointer;
+    outline: none;
+    transition:
+        color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        background-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-menu__item:hover {
+    background: var(--vmz-surface-mist);
+}
+
+.vmz-ui-menu__item:focus-visible {
+    background: var(--vmz-surface-mist);
+    box-shadow: 0 0 0 2px var(--vmz-focus-ring) inset;
+}
+
+.vmz-ui-menu__item[data-active="true"] {
+    background: color-mix(in srgb, var(--vmz-action-primary-background) 10%, transparent);
+    box-shadow: inset 2px 0 0 var(--vmz-action-primary-background);
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-menu__item[data-active="true"]:hover,
+.vmz-ui-menu__item[data-active="true"]:focus-visible {
+    background: color-mix(in srgb, var(--vmz-action-primary-background) 16%, transparent);
+}
+
+.vmz-ui-menu__item[data-danger="true"] {
+    color: var(--vmz-status-danger-foreground);
+}
+
+.vmz-ui-menu__item[data-danger="true"]:hover,
+.vmz-ui-menu__item[data-danger="true"]:focus-visible {
+    background: color-mix(in srgb, var(--vmz-status-danger-accent) 12%, transparent);
+}
+
+.vmz-ui-menu__item:disabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+    background: transparent;
+    color: var(--vmz-text-tertiary);
+}
+
+.vmz-ui-menu__label {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.vmz-ui-menu__item--sub .vmz-ui-icon {
+    flex: 0 0 auto;
+    color: var(--vmz-text-tertiary);
+}
+
+.vmz-ui-menu__group {
+    padding: 8px 12px 4px;
+    font-size: 12px;
+    font-weight: 600;
+    line-height: 20px;
+    color: var(--vmz-text-tertiary);
+}
+
+.vmz-ui-menu__divider {
+    height: 1px;
+    margin: 4px 8px;
+    background: var(--vmz-line-subtle);
+}
+
+.vmz-ui-menu__submenu {
+    position: relative;
+}
+
+.vmz-ui-menu__submenu[data-open="true"] > .vmz-ui-menu__item--sub {
+    background: var(--vmz-surface-mist);
+}
+
+.vmz-ui-menu__subpanel {
+    display: flex;
+    flex-direction: column;
+    margin: 2px 0 4px;
+    padding: 4px 0 4px 12px;
+    border-left: 1px solid var(--vmz-line-subtle);
+}
+
+@keyframes vmz-ui-menu-in {
+    from {
+        opacity: 0;
+        transform: translateY(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-menu__panel,
+    .vmz-ui-menu__trigger,
+    .vmz-ui-menu__item {
+        animation: none;
+        transition: none;
+    }
+}
+</style>
+<script client>
+/**
+ * VMZ UI — Menu (UI2).
+ * Parent owns `open`; Escape / choose closes via onClose; focus restore to trigger.
+ *
+ * Item model: `{ id, title, kind?: "item"|"group"|"divider", danger?, disabled?,
+ * active?, children?: MenuItem[] }`. Submenus render a nested panel with a
+ * chevron-right affordance.
+ */
+export default class Menu {
+    public label: string = "";
+    public open: boolean = false;
+    public menuId: string = "vmz-menu";
+    /** @type {{ id: string, title: string, kind?: string, danger?: boolean, disabled?: boolean, active?: boolean, children?: { id: string, title: string, danger?: boolean, disabled?: boolean, active?: boolean }[] }[]} */
+    public items: {
+        id: string;
+        title: string;
+        kind?: string;
+        danger?: boolean;
+        disabled?: boolean;
+        active?: boolean;
+        children?: {
+            id: string;
+            title: string;
+            danger?: boolean;
+            disabled?: boolean;
+            active?: boolean;
+        }[];
+    }[] = [];
+    public onOpenChange: ((open: boolean) => void) | null = null;
+    public onSelect: ((id: string) => void) | null = null;
+    _restoreFocus = null;
+    _panel = null;
+    _docKeyHandler = null;
+    _docPointerHandler = null;
+    _observer = null;
+    _subOpen: Record<string, boolean> = {};
+    async onMount() {
+        if (typeof document === "undefined" || typeof MutationObserver === "undefined") return;
+        const root = this.__vmzDomRoot;
+        if (!root || typeof root.querySelector !== "function") return;
+        this._observer = new MutationObserver(() => this._syncFromDom());
+        this._observer.observe(root, {
+            childList: true,
+            subtree: true,
+        });
+        this._syncFromDom();
+    }
+    onDestroy() {
+        if (this._observer) {
+            this._observer.disconnect();
+            this._observer = null;
+        }
+        this._teardownDoc();
+        this._panel = null;
+        this._restoreFocus = null;
+    }
+    subOpen(id) {
+        return !!this._subOpen[id];
+    }
+    toggleSub(id) {
+        this._subOpen = { ...this._subOpen, [id]: !this._subOpen[id] };
+    }
+    toggle() {
+        if (typeof this.onOpenChange === "function") this.onOpenChange(!this.open);
+    }
+    close() {
+        if (typeof this.onOpenChange === "function") this.onOpenChange(false);
+    }
+    choose(id) {
+        if (typeof this.onSelect === "function") this.onSelect(id);
+        this.close();
+    }
+    onItemClick(ev) {
+        const el = ev?.currentTarget;
+        if (el && typeof el.getAttribute === "function" && el.disabled) return;
+        const id =
+            el && typeof el.getAttribute === "function"
+                ? el.getAttribute("data-vmz-menu-item")
+                : null;
+        if (id) this.choose(id);
+    }
+    onTriggerKeyDown(ev) {
+        if (!ev) return;
+        if ((ev.key === "ArrowDown" || ev.key === "Enter" || ev.key === " ") && !this.open) {
+            ev.preventDefault();
+            if (typeof this.onOpenChange === "function") this.onOpenChange(true);
+        }
+    }
+    onMenuKeyDown(ev) {
+        if (!ev || !this._panel) return;
+        if (ev.key === "Escape") {
+            ev.preventDefault();
+            this.close();
+            return;
+        }
+        const nodes = [...this._panel.querySelectorAll('[role="menuitem"]')].filter(
+            (n) => n instanceof HTMLElement && n.offsetParent !== null,
+        );
+        if (!nodes.length) return;
+        const idx = nodes.indexOf(document.activeElement);
+        if (ev.key === "ArrowDown") {
+            ev.preventDefault();
+            nodes[(idx + 1 + nodes.length) % nodes.length].focus();
+        } else if (ev.key === "ArrowUp") {
+            ev.preventDefault();
+            nodes[(idx - 1 + nodes.length) % nodes.length].focus();
+        } else if (ev.key === "Home") {
+            ev.preventDefault();
+            nodes[0].focus();
+        } else if (ev.key === "End") {
+            ev.preventDefault();
+            nodes[nodes.length - 1].focus();
+        }
+    }
+    _syncFromDom() {
+        const root = this.__vmzDomRoot;
+        const panel =
+            root && typeof root.querySelector === "function"
+                ? root.querySelector('[data-vmz-overlay="menu"][data-vmz-focus="enter"]')
+                : null;
+        if (panel && !this._panel) this._enterFocus(panel);
+        else if (!panel && this._panel) this._exitFocus();
+    }
+    _enterFocus(panel) {
+        if (typeof document === "undefined") return;
+        const root = this.__vmzDomRoot;
+        const trigger =
+            root && typeof root.querySelector === "function"
+                ? root.querySelector('[data-vmz-menu="trigger"]')
+                : null;
+        const active = document.activeElement;
+        if (!this._restoreFocus) {
+            if (trigger instanceof HTMLElement) this._restoreFocus = trigger;
+            else if (active instanceof HTMLElement) this._restoreFocus = active;
+        }
+        this._panel = panel instanceof HTMLElement ? panel : null;
+        const first =
+            this._panel && typeof this._panel.querySelector === "function"
+                ? this._panel.querySelector('[role="menuitem"]')
+                : null;
+        if (first && typeof first.focus === "function") first.focus();
+        else if (this._panel && typeof this._panel.focus === "function") this._panel.focus();
+        if (!this._docKeyHandler) {
+            this._docKeyHandler = (ev) => {
+                if (ev.key === "Escape") {
+                    ev.preventDefault();
+                    this.close();
+                }
+            };
+            document.addEventListener("keydown", this._docKeyHandler);
+        }
+        if (!this._docPointerHandler) {
+            this._docPointerHandler = (ev) => {
+                const t = ev.target;
+                if (!(t instanceof Node)) return;
+                if (root && typeof root.contains === "function" && root.contains(t)) return;
+                this.close();
+            };
+            document.addEventListener("pointerdown", this._docPointerHandler, true);
+        }
+    }
+    _exitFocus() {
+        this._teardownDoc();
+        this._panel = null;
+        this._subOpen = {};
+        const restore = this._restoreFocus;
+        this._restoreFocus = null;
+        if (restore && typeof restore.focus === "function" && document.contains(restore)) {
+            restore.focus();
+        }
+    }
+    _teardownDoc() {
+        if (typeof document !== "undefined") {
+            if (this._docKeyHandler) document.removeEventListener("keydown", this._docKeyHandler);
+            if (this._docPointerHandler) {
+                document.removeEventListener("pointerdown", this._docPointerHandler, true);
+            }
+        }
+        this._docKeyHandler = null;
+        this._docPointerHandler = null;
+    }
+}
+</script>