@vmz/ui 0.3.7 → 0.3.8

package/src/components/Pagination.vmz

@@ -1,13 +1,35 @@
 <template>
     <nav data-vmz-ui="pagination" :aria-label="label" class="vmz-ui-pagination">
-        <button type="button" :disabled="prevDisabled" @click="onPrevClick" class="vmz-ui-pagination__btn">
-            {{ prevLabel }}
+        <button type="button" :disabled="prevDisabled" :aria-label="prevLabel ? prevLabel : null" @click="onPrevClick" class="vmz-ui-pagination__nav">
+            <Icon name="action.chevron-left" size="sm" decorative />
+            <span v-if="prevLabel" class="vmz-ui-pagination__nav-label">
+                {{ prevLabel }}
+            </span>
         </button>
+        <ul v-if="pageItems.length" class="vmz-ui-pagination__pages">
+            <li v-for="item in pageItems" :key="item.key" class="vmz-ui-pagination__page-item">
+                <span v-if="item.gap" aria-hidden="true" class="vmz-ui-pagination__ellipsis">
+                    <Icon name="action.more" size="sm" decorative />
+                </span>
+                <button v-else type="button" :data-vmz-page="item.page" :aria-current="item.page === currentPage ? 'page' : null" :aria-label="pageAria(item.page)" @click="onPageClick(item.page)" class="vmz-ui-pagination__page">
+                    {{ item.page }}
+                </button>
+            </li>
+        </ul>
         <p data-vmz-fixture="page-status" class="vmz-ui-pagination__status">
             {{ status }}
         </p>
-        <button type="button" :disabled="nextDisabled" @click="onNextClick" class="vmz-ui-pagination__btn">
-            {{ nextLabel }}
+        <span v-if="pageSizeOptions.length" class="vmz-ui-pagination__size">
+            <span v-if="pageSizeLabel" class="vmz-ui-pagination__size-label">
+                {{ pageSizeLabel }}
+            </span>
+            <Select :control-id="pageSizeControlId" :value="pageSize" :options="pageSizeOptions" :on-change="onPageSizeSelect" />
+        </span>
+        <button type="button" :disabled="nextDisabled" :aria-label="nextLabel ? nextLabel : null" @click="onNextClick" class="vmz-ui-pagination__nav">
+            <span v-if="nextLabel" class="vmz-ui-pagination__nav-label">
+                {{ nextLabel }}
+            </span>
+            <Icon name="action.chevron-right" size="sm" decorative />
         </button>
     </nav>
 </template>
@@ -16,49 +38,193 @@
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: 0.625rem 1rem;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    color: var(--vmz-text-ink);
 }
 
-.vmz-ui-pagination__btn {
+.vmz-ui-pagination__nav,
+.vmz-ui-pagination__page {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.25rem;
+    min-width: 2rem;
+    height: 2rem;
+    padding: 0 0.5rem;
+    box-sizing: border-box;
     font: inherit;
-    font-weight: 600;
-    padding: 0.375rem 0.7rem;
+    font-size: 0.875rem;
+    font-weight: 500;
     border: 1px solid var(--vmz-line-default);
     border-radius: var(--vmz-radius-md, 6px);
-    background: transparent;
-    color: var(--vmz-action-primary-active);
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
     cursor: pointer;
     outline: none;
+    transition:
+        color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1)),
+        border-color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1)),
+        background-color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+.vmz-ui-pagination__nav:hover:not(:disabled),
+.vmz-ui-pagination__page:hover:not([aria-current="page"]) {
+    background: var(--vmz-surface-mist);
+    border-color: var(--vmz-line-default);
+    color: var(--vmz-action-primary-background);
 }
 
-.vmz-ui-pagination__btn:focus-visible {
+.vmz-ui-pagination__nav:focus-visible,
+.vmz-ui-pagination__page:focus-visible {
     box-shadow: 0 0 0 3px var(--vmz-focus-ring);
 }
 
-.vmz-ui-pagination__btn:disabled {
+.vmz-ui-pagination__nav:disabled {
     opacity: 0.55;
     cursor: not-allowed;
 }
 
-.vmz-ui-pagination__status {
+.vmz-ui-pagination__pages {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.25rem;
     margin: 0;
-    font-weight: 600;
+    padding: 0;
+    list-style: none;
+}
+
+.vmz-ui-pagination__page {
+    min-width: 2rem;
+    padding: 0;
+    font-variant-numeric: tabular-nums;
+}
+
+.vmz-ui-pagination__page[aria-current="page"] {
+    border-color: var(--vmz-action-primary-background);
+    background: var(--vmz-action-primary-background);
+    color: var(--vmz-action-primary-foreground);
+    cursor: default;
+}
+
+.vmz-ui-pagination__ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    color: var(--vmz-text-tertiary);
+}
+
+.vmz-ui-pagination__status {
+    margin: 0 0 0 auto;
+    font-size: 0.875rem;
+    font-weight: 400;
+    color: var(--vmz-text-steel);
+}
+
+.vmz-ui-pagination__size {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.vmz-ui-pagination__size-label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--vmz-text-steel);
+    white-space: nowrap;
+}
+
+.vmz-ui-pagination__size .vmz-ui-select {
+    max-width: 6rem;
+}
+
+.vmz-ui-pagination__size .vmz-ui-select__control {
+    min-height: 2rem;
+    padding-top: 0;
+    padding-bottom: 0;
 }
 </style>
 <script client>
 /**
- * VMZ UI — Pagination (Console composition skeleton).
- * Parent owns page / pageCount; buttons call onPrev / onNext.
+ * VMZ UI — Pagination.
+ * Parent owns page / pageCount; buttons call onPrev / onNext / onPage.
+ * Optional page-size Select renders when `pageSizeOptions` is non-empty.
  */
 export default class Pagination {
-    public label: string = "Pagination";
-    public prevLabel: string = "Previous";
-    public nextLabel: string = "Next";
-    public status: string = "Page 1 / 1";
+    public label: string = "";
+    public prevLabel: string = "";
+    public nextLabel: string = "";
+    public status: string = "";
     public prevDisabled: boolean = true;
     public nextDisabled: boolean = true;
+    public page: number = 1;
+    public pageCount: number = 0;
+    /** Normalised numeric page mirror read by the template. */
+    public currentPage: number = 1;
+    public pageLabel: string = "";
+    public pageSize: string = "";
+    public pageSizeLabel: string = "";
+    public pageSizeControlId: string = "vmz-pagination-size";
+    /** @type {{ value: string, label: string }[]} */
+    public pageSizeOptions: {
+        value: string;
+        label: string;
+    }[] = [];
+    /** @type {{ key: string, page: number, gap: boolean }[]} */
+    pageItems: {
+        key: string;
+        page: number;
+        gap: boolean;
+    }[] = [];
     public onPrev: (() => void) | null = null;
     public onNext: (() => void) | null = null;
+    public onPage: ((page: number) => void) | null = null;
+    public onPageSizeChange: ((value: string) => void) | null = null;
+    onMount() {
+        this._rebuildPages();
+    }
+    /** Parent-owned prop writes — keep the page window in sync. */
+    __vmzOnParentProp(name: string) {
+        if (name === "page" || name === "pageCount") this._rebuildPages();
+    }
+    _rebuildPages() {
+        const total = Math.max(0, Math.floor(Number(this.pageCount) || 0));
+        const current = Math.min(Math.max(1, Math.floor(Number(this.page) || 1)), Math.max(1, total));
+        this.currentPage = current;
+        if (total <= 0) {
+            this.pageItems = [];
+            return;
+        }
+        const items = [];
+        const pageItem = (p) => ({ key: `p-${p}`, page: p, gap: false });
+        const gapItem = (k) => ({ key: k, page: 0, gap: true });
+        if (total <= 7) {
+            for (let p = 1; p <= total; p += 1) items.push(pageItem(p));
+        } else {
+            items.push(pageItem(1));
+            const start = Math.max(2, current - 1);
+            const end = Math.min(total - 1, current + 1);
+            if (start > 2) items.push(gapItem("gap-start"));
+            for (let p = start; p <= end; p += 1) items.push(pageItem(p));
+            if (end < total - 1) items.push(gapItem("gap-end"));
+            items.push(pageItem(total));
+        }
+        this.pageItems = items;
+    }
+    pageAria(p) {
+        return this.pageLabel ? `${this.pageLabel} ${p}` : String(p);
+    }
+    onPageClick(p) {
+        if (p === this.currentPage) return;
+        if (typeof this.onPage === "function") this.onPage(p);
+    }
+    onPageSizeSelect(payload) {
+        const next = payload && payload.target ? payload.target.value : "";
+        if (typeof this.onPageSizeChange === "function") this.onPageSizeChange(next);
+    }
     onPrevClick() {
         if (this.prevDisabled) return;
         if (typeof this.onPrev === "function") this.onPrev();

package/src/components/Popconfirm.vmz

@@ -0,0 +1,287 @@
+<template>
+    <span data-vmz-ui="popconfirm" :data-tone="tone" class="vmz-ui-popconfirm-root">
+        <span class="vmz-ui-popconfirm__trigger">
+            <slot />
+        </span>
+        <span v-if="open" data-vmz-overlay="popconfirm" data-vmz-overlay-owner="popconfirm" :data-vmz-overlay-stack="stackLevel" class="vmz-ui-popconfirm">
+            <button type="button" data-vmz-overlay-layer="backdrop" :aria-label="cancelLabel || title" @click="cancel" class="vmz-ui-popconfirm__backdrop" />
+            <span role="dialog" aria-modal="false" :aria-labelledby="title ? titleId : null" tabindex="-1" data-vmz-overlay-layer="panel" data-vmz-focus="enter" :onKeyDown="onPanelKeyDown" class="vmz-ui-popconfirm__panel">
+                <span aria-hidden="true" class="vmz-ui-popconfirm__icon">
+                    <Icon :name="toneIcon()" size="md" decorative />
+                </span>
+                <span class="vmz-ui-popconfirm__content">
+                    <span v-if="title" :id="titleId" class="vmz-ui-popconfirm__title">
+                        {{ title }}
+                    </span>
+                    <span v-if="description" class="vmz-ui-popconfirm__description">
+                        {{ description }}
+                    </span>
+                    <span class="vmz-ui-popconfirm__actions">
+                        <Button type="button" variant="secondary" size="small" @click="cancel">
+                            {{ cancelLabel }}
+                        </Button>
+                        <Button type="button" :variant="tone === 'danger' ? 'danger' : 'primary'" size="small" @click="confirm">
+                            {{ confirmLabel }}
+                        </Button>
+                    </span>
+                </span>
+            </span>
+        </span>
+    </span>
+</template>
+<style>
+.vmz-ui-popconfirm-root {
+    display: inline-flex;
+}
+
+.vmz-ui-popconfirm {
+    position: fixed;
+    inset: 0;
+    z-index: 35;
+    pointer-events: none;
+}
+
+.vmz-ui-popconfirm[data-vmz-overlay-stack="1"] {
+    z-index: 50;
+}
+
+.vmz-ui-popconfirm[data-vmz-overlay-stack="2"] {
+    z-index: 60;
+}
+
+.vmz-ui-popconfirm[data-vmz-overlay-stack="3"] {
+    z-index: 70;
+}
+
+.vmz-ui-popconfirm__backdrop {
+    position: absolute;
+    inset: 0;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    cursor: default;
+    background: transparent;
+    pointer-events: auto;
+}
+
+.vmz-ui-popconfirm__panel {
+    position: absolute;
+    z-index: 1;
+    top: 30%;
+    left: 50%;
+    transform: translateX(-50%);
+    box-sizing: border-box;
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    width: min(340px, calc(100vw - 32px));
+    padding: 12px;
+    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;
+    pointer-events: auto;
+    animation: vmz-ui-popconfirm-in var(--vmz-motion-overlay-duration) var(--vmz-motion-overlay-easing);
+}
+
+.vmz-ui-popconfirm__panel:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring), var(--vmz-shadow-popup);
+}
+
+.vmz-ui-popconfirm__icon {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.5rem;
+    color: var(--vmz-status-warning-accent);
+}
+
+.vmz-ui-popconfirm[data-tone="danger"] .vmz-ui-popconfirm__icon {
+    color: var(--vmz-status-danger-accent);
+}
+
+.vmz-ui-popconfirm[data-tone="info"] .vmz-ui-popconfirm__icon {
+    color: var(--vmz-status-info-accent);
+}
+
+.vmz-ui-popconfirm__content {
+    flex: 1 1 auto;
+    display: block;
+    min-width: 0;
+}
+
+.vmz-ui-popconfirm__title {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.5;
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-popconfirm__description {
+    display: block;
+    margin-top: 2px;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    color: var(--vmz-text-steel);
+}
+
+.vmz-ui-popconfirm__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 8px;
+    margin-top: 10px;
+}
+
+@keyframes vmz-ui-popconfirm-in {
+    from {
+        opacity: 0;
+        transform: translateX(-50%) translateY(-6px) scale(0.98);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0) scale(1);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-popconfirm__panel {
+        animation: none;
+    }
+}
+</style>
+<script client>
+/**
+ * VMZ UI — Popconfirm.
+ * Destructive-action confirmation. Same overlay contract as Popover: Escape,
+ * outside dismiss, focus enter/restore, stack-aware z-index.
+ * Parent owns `open`; confirm/cancel are emitted, the caller performs the action.
+ */
+export default class Popconfirm {
+    public open: boolean = false;
+    public title: string = "";
+    public description: string = "";
+    public tone: string = "danger";
+    public confirmLabel: string = "";
+    public cancelLabel: string = "";
+    public titleId: string = "vmz-popconfirm-title";
+    public stackLevel: string = "0";
+    public onConfirm: (() => void) | null = null;
+    public onCancel: (() => void) | null = null;
+    _restoreFocus = null;
+    _panel = null;
+    _docKeyHandler = null;
+    _observer = null;
+    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._teardownDocKey();
+        this._panel = null;
+        this._restoreFocus = null;
+    }
+    confirm() {
+        this.emit("confirm");
+        if (typeof this.onConfirm === "function") this.onConfirm();
+    }
+    cancel() {
+        this.emit("cancel");
+        if (typeof this.onCancel === "function") this.onCancel();
+    }
+    toneIcon() {
+        const tone = String(this.tone || "").toLowerCase();
+        if (tone === "danger" || tone === "info" || tone === "success") return `status.${tone}`;
+        return "status.warning";
+    }
+    _isTopmostStack() {
+        if (typeof document === "undefined") return true;
+        const root = this.__vmzDomRoot;
+        const mine =
+            root && typeof root.querySelector === "function"
+                ? root.querySelector("[data-vmz-overlay][data-vmz-overlay-stack]")
+                : null;
+        const myStack = Number(mine?.getAttribute("data-vmz-overlay-stack") || this.stackLevel || "0");
+        const open = document.querySelectorAll("[data-vmz-overlay][data-vmz-overlay-stack]");
+        let max = -Infinity;
+        for (const el of open) {
+            const n = Number(el.getAttribute("data-vmz-overlay-stack") || "0");
+            if (Number.isFinite(n) && n > max) max = n;
+        }
+        if (!Number.isFinite(max)) return true;
+        return (Number.isFinite(myStack) ? myStack : 0) >= max;
+    }
+    onPanelKeyDown(ev) {
+        if (!ev || ev.key !== "Escape") return;
+        if (!this._isTopmostStack()) return;
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.cancel();
+    }
+    _syncFromDom() {
+        const root = this.__vmzDomRoot;
+        const panel =
+            root && typeof root.querySelector === "function"
+                ? root.querySelector('[data-vmz-overlay="popconfirm"] [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 active = document.activeElement;
+        if (!this._restoreFocus) {
+            const root = this.__vmzDomRoot;
+            const outside =
+                active instanceof HTMLElement &&
+                active !== document.body &&
+                !(root && typeof root.contains === "function" && root.contains(active));
+            if (outside) this._restoreFocus = active;
+        }
+        this._panel = panel instanceof HTMLElement ? panel : null;
+        if (this._panel && typeof this._panel.focus === "function") this._panel.focus();
+        if (!this._docKeyHandler) {
+            this._docKeyHandler = (ev) => {
+                if (ev.key !== "Escape") return;
+                if (ev.defaultPrevented) return;
+                if (!this._isTopmostStack()) return;
+                ev.preventDefault();
+                ev.stopPropagation();
+                this.cancel();
+            };
+            document.addEventListener("keydown", this._docKeyHandler);
+        }
+    }
+    _exitFocus() {
+        this._teardownDocKey();
+        this._panel = null;
+        const restore = this._restoreFocus;
+        this._restoreFocus = null;
+        if (restore && typeof restore.focus === "function" && document.contains(restore)) {
+            restore.focus();
+        }
+    }
+    _teardownDocKey() {
+        if (typeof document !== "undefined" && this._docKeyHandler) {
+            document.removeEventListener("keydown", this._docKeyHandler);
+        }
+        this._docKeyHandler = null;
+    }
+}
+</script>