@vmz/ui 0.3.6 → 0.3.8

package/src/components/Message.vmz

@@ -0,0 +1,167 @@
+<template>
+    <span data-vmz-ui="message" :data-tone="tone" :role="roleAttr()" class="vmz-ui-message">
+        <span aria-hidden="true" class="vmz-ui-message__icon">
+            <Icon :name="toneIcon()" size="md" decorative />
+        </span>
+        <span class="vmz-ui-message__content">
+            <span class="vmz-ui-message__title">
+                {{ title }}
+            </span>
+            <span v-if="description" class="vmz-ui-message__description">
+                {{ description }}
+            </span>
+        </span>
+        <button v-if="closable" type="button" :aria-label="closeLabel || title" @click="dismiss" class="vmz-ui-message__close">
+            <Icon name="action.close" size="sm" decorative />
+        </button>
+    </span>
+</template>
+<style>
+.vmz-ui-message {
+    position: fixed;
+    top: 1.25rem;
+    left: 50%;
+    z-index: 45;
+    transform: translateX(-50%);
+    box-sizing: border-box;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--vmz-space-2, 0.5rem);
+    width: max-content;
+    max-width: min(420px, calc(100vw - 2rem));
+    padding: 0.6rem 0.85rem;
+    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);
+    animation: vmz-ui-message-in var(--vmz-motion-overlay-duration) var(--vmz-motion-overlay-easing);
+}
+
+.vmz-ui-message__icon {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.5rem;
+    color: var(--vmz-status-info-accent);
+}
+
+.vmz-ui-message[data-tone="success"] .vmz-ui-message__icon {
+    color: var(--vmz-status-success-accent);
+}
+
+.vmz-ui-message[data-tone="warning"] .vmz-ui-message__icon {
+    color: var(--vmz-status-warning-accent);
+}
+
+.vmz-ui-message[data-tone="danger"] .vmz-ui-message__icon {
+    color: var(--vmz-status-danger-accent);
+}
+
+.vmz-ui-message__content {
+    flex: 1 1 auto;
+    display: block;
+    min-width: 0;
+    padding-top: 0.1rem;
+}
+
+.vmz-ui-message__title {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.4;
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-message__description {
+    display: block;
+    margin-top: 1px;
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    color: var(--vmz-text-steel);
+}
+
+.vmz-ui-message__close {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--vmz-radius-sm);
+    background: transparent;
+    color: var(--vmz-text-tertiary);
+    cursor: pointer;
+    outline: none;
+    transition: color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-message__close:hover {
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-message__close:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+@keyframes vmz-ui-message-in {
+    from {
+        opacity: 0;
+        transform: translateX(-50%) translateY(-8px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-message {
+        animation: none;
+    }
+}
+</style>
+<script client>
+/**
+ * VMZ UI — Message.
+ * Transient confirmation toast for completed operations (render with `v-if`).
+ * Parent owns visibility. `duration > 0` auto-dismisses and emits `close`;
+ * the caller decides what side effects follow.
+ */
+export default class Message {
+    public title: string = "";
+    public description: string = "";
+    public tone: string = "success";
+    public closable: boolean = false;
+    public closeLabel: string = "";
+    public duration: number = 3200;
+    public onClose: (() => void) | null = null;
+    _timer = null;
+    onMount() {
+        const ms = Number(this.duration);
+        if (!Number.isFinite(ms) || ms <= 0) return;
+        this._timer = setTimeout(() => this.dismiss(), ms);
+    }
+    onDestroy() {
+        if (this._timer) clearTimeout(this._timer);
+        this._timer = null;
+    }
+    roleAttr() {
+        return String(this.tone).toLowerCase() === "danger" ? "alert" : "status";
+    }
+    toneIcon() {
+        const tone = String(this.tone || "").toLowerCase();
+        if (tone === "success" || tone === "warning" || tone === "danger") return `status.${tone}`;
+        return "status.info";
+    }
+    dismiss() {
+        if (this._timer) clearTimeout(this._timer);
+        this._timer = null;
+        this.emit("close");
+        if (typeof this.onClose === "function") this.onClose();
+    }
+}
+</script>

package/src/components/Notification.vmz

@@ -1,80 +1,175 @@
 <template>
     <div data-vmz-ui="notification" :data-tone="tone" :role="roleName" class="vmz-ui-notification">
-        <p v-if="title" class="vmz-ui-notification__title">
-            {{ title }}
-        </p>
-        <p v-if="description" class="vmz-ui-notification__description">
-            {{ description }}
-        </p>
-        <div class="vmz-ui-notification__actions">
-            <slot />
+        <span aria-hidden="true" class="vmz-ui-notification__icon">
+            <Icon :name="toneIcon()" size="md" decorative />
+        </span>
+        <div class="vmz-ui-notification__content">
+            <p v-if="title" class="vmz-ui-notification__title">
+                {{ title }}
+            </p>
+            <p v-if="description" class="vmz-ui-notification__description">
+                {{ description }}
+            </p>
+            <div class="vmz-ui-notification__actions">
+                <slot />
+            </div>
         </div>
+        <button v-if="closable" type="button" :aria-label="closeLabel" @click="dismiss" class="vmz-ui-notification__close">
+            <Icon name="action.close" size="md" decorative />
+        </button>
     </div>
 </template>
 <style>
 .vmz-ui-notification {
     display: flex;
-    flex-direction: column;
-    gap: var(--vmz-density-control-gap);
-    padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
-    border: 1px solid var(--vmz-status-info-accent);
-    border-radius: var(--vmz-radius-md, 6px);
-    background: color-mix(in srgb, var(--vmz-status-info-accent) 10%, transparent);
-    color: var(--vmz-status-info-foreground);
+    align-items: flex-start;
+    gap: var(--vmz-space-2, 0.5rem);
+    padding: var(--vmz-space-4, 1rem);
+    border: 1px solid var(--vmz-line-default, var(--vmz-line-strong));
+    border-radius: var(--vmz-radius-lg, 8px);
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
+    box-shadow: var(--vmz-shadow-popup, none);
+    animation: vmz-ui-notification-in var(--vmz-motion-overlay-duration, 160ms)
+        var(--vmz-motion-overlay-easing, cubic-bezier(0.2, 0, 0, 1));
 }
 
-.vmz-ui-notification[data-tone="info"] {
-    border-color: var(--vmz-status-info-accent);
-    background: color-mix(in srgb, var(--vmz-status-info-accent) 10%, transparent);
-    color: var(--vmz-status-info-foreground);
+.vmz-ui-notification[data-tone="info"] .vmz-ui-notification__icon {
+    color: var(--vmz-status-info-accent);
 }
 
-.vmz-ui-notification[data-tone="success"] {
-    border-color: var(--vmz-status-success-accent);
-    background: color-mix(in srgb, var(--vmz-status-success-accent) 10%, transparent);
-    color: var(--vmz-status-success-foreground);
+.vmz-ui-notification[data-tone="success"] .vmz-ui-notification__icon {
+    color: var(--vmz-status-success-accent);
 }
 
-.vmz-ui-notification[data-tone="warning"] {
-    border-color: var(--vmz-status-warning-accent);
-    background: color-mix(in srgb, var(--vmz-status-warning-accent) 10%, transparent);
-    color: var(--vmz-status-warning-foreground);
+.vmz-ui-notification[data-tone="warning"] .vmz-ui-notification__icon {
+    color: var(--vmz-status-warning-accent);
 }
 
-.vmz-ui-notification[data-tone="danger"] {
-    border-color: var(--vmz-status-danger-accent);
-    background: color-mix(in srgb, var(--vmz-status-danger-accent) 10%, transparent);
-    color: var(--vmz-status-danger-foreground);
+.vmz-ui-notification[data-tone="danger"] .vmz-ui-notification__icon {
+    color: var(--vmz-status-danger-accent);
 }
 
-:where([data-density="compact"]) .vmz-ui-notification {
-    gap: var(--vmz-density-compact-gap);
-    padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
+.vmz-ui-notification__icon {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.5rem;
+}
+
+.vmz-ui-notification__content {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-space-1, 0.25rem);
+    min-width: 0;
 }
 
 .vmz-ui-notification__title {
     margin: 0;
-    font-weight: 700;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    line-height: 1.4;
+    color: var(--vmz-text-ink);
 }
 
 .vmz-ui-notification__description {
     margin: 0;
-    opacity: 0.9;
+    font-size: 0.875rem;
+    line-height: 1.55;
+    color: var(--vmz-text-steel);
+}
+
+.vmz-ui-notification__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--vmz-space-2, 0.5rem);
+    margin-top: var(--vmz-space-1, 0.25rem);
 }
 
 .vmz-ui-notification__actions:empty {
     display: none;
 }
+
+.vmz-ui-notification__close {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--vmz-radius-sm, 4px);
+    background: transparent;
+    color: var(--vmz-text-tertiary);
+    cursor: pointer;
+    outline: none;
+    transition:
+        color var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, cubic-bezier(0.2, 0, 0, 1)),
+        background-color var(--vmz-motion-control-duration, 120ms) var(--vmz-motion-control-easing, cubic-bezier(0.2, 0, 0, 1));
+}
+
+.vmz-ui-notification__close:hover {
+    color: var(--vmz-text-ink);
+    background: var(--vmz-surface-mist);
+}
+
+.vmz-ui-notification__close:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+@keyframes vmz-ui-notification-in {
+    from {
+        opacity: 0;
+        transform: translateY(-0.5rem);
+    }
+    to {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .vmz-ui-notification {
+        animation: none;
+    }
+}
+
+:where([data-density="compact"]) .vmz-ui-notification {
+    gap: var(--vmz-space-2, 0.5rem);
+    padding: var(--vmz-space-3, 0.75rem);
+}
+
+:where([data-density="dense"]) .vmz-ui-notification {
+    gap: var(--vmz-space-1, 0.25rem);
+    padding: var(--vmz-space-3, 0.75rem);
+}
 </style>
 <script client>
 /**
  * VMZ UI — Notification (UI4 Commercial Surface).
- * Ephemeral feedback surface; tones share status.* tokens with Alert.
+ * Ephemeral feedback surface: paper + popup shadow + tone accent icon; 160ms enter.
  */
 export default class Notification {
     public title: string = "";
     public description: string = "";
     public tone: string = "info";
     public roleName: string = "status";
+    public closable: boolean = false;
+    public closeLabel: string = "";
+    public onClose: (() => void) | null = null;
+
+    toneIcon() {
+        const tone = String(this.tone || "").toLowerCase();
+        if (tone === "success" || tone === "warning" || tone === "danger") return `status.${tone}`;
+        return "status.info";
+    }
+
+    dismiss() {
+        this.emit("close");
+        if (typeof this.onClose === "function") this.onClose();
+    }
 }
 </script>

package/src/components/Pagination.vmz

@@ -1,69 +1,237 @@
-<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">
-            Previous
-        </button>
-        <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">
-            Next
-        </button>
-    </nav>
-</template>
-<style>
-.vmz-ui-pagination {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    gap: 0.625rem 1rem;
-}
-
-.vmz-ui-pagination__btn {
-    font: inherit;
-    font-weight: 600;
-    padding: 0.375rem 0.7rem;
-    border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
-    background: transparent;
-    color: var(--vmz-action-primary-active);
-    cursor: pointer;
-    outline: none;
-}
-
-.vmz-ui-pagination__btn:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
-}
-
-.vmz-ui-pagination__btn:disabled {
-    opacity: 0.55;
-    cursor: not-allowed;
-}
-
-.vmz-ui-pagination__status {
-    margin: 0;
-    font-weight: 600;
-}
-</style>
-<script client>
-/**
- * VMZ UI — Pagination (Console composition skeleton).
- * Parent owns page / pageCount; buttons call onPrev / onNext.
- */
-export default class Pagination {
-    public label: string = "Pagination";
-    public status: string = "Page 1 / 1";
-    public prevDisabled: boolean = true;
-    public nextDisabled: boolean = true;
-    public onPrev: (() => void) | null = null;
-    public onNext: (() => void) | null = null;
-    onPrevClick() {
-        if (this.prevDisabled) return;
-        if (typeof this.onPrev === "function") this.onPrev();
-    }
-    onNextClick() {
-        if (this.nextDisabled) return;
-        if (typeof this.onNext === "function") this.onNext();
-    }
-}
-</script>
+<template>
+    <nav data-vmz-ui="pagination" :aria-label="label" class="vmz-ui-pagination">
+        <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>
+        <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>
+<style>
+.vmz-ui-pagination {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    color: var(--vmz-text-ink);
+}
+
+.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-size: 0.875rem;
+    font-weight: 500;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-md, 6px);
+    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__nav:focus-visible,
+.vmz-ui-pagination__page:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-pagination__nav:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+}
+
+.vmz-ui-pagination__pages {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.25rem;
+    margin: 0;
+    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.
+ * 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 = "";
+    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();
+    }
+    onNextClick() {
+        if (this.nextDisabled) return;
+        if (typeof this.onNext === "function") this.onNext();
+    }
+}
+</script>