@vmz/ui 0.3.4 → 0.3.6

package/src/components/Table.vmz

@@ -1,133 +1,165 @@
-<template>
-    <div data-vmz-ui="table" :data-sort-key="sortKey" :data-sort-dir="sortDir" class="vmz-ui-table-wrap">
-        <table class="vmz-ui-table">
-            <thead @click="onHeadClick">
-                <tr>
-                    <th v-for="col in columns" :key="col.id" scope="col" :data-vmz-col="col.id">
-                        <button type="button" :data-vmz-sort="col.id" class="vmz-ui-table__sort">
-                            {{ col.title }}
-                        </button>
-                    </th>
-                    <th v-if="hasRowAction" scope="col">
-                        {{ actionTitle }}
-                    </th>
-                </tr>
-            </thead>
-            <tbody @click="onBodyClick">
-                <tr v-for="row in rows" :key="row.id" :data-vmz-row="row.id">
-                    <td v-for="cell in row.cells">
-                        {{ cell }}
-                    </td>
-                    <td v-if="hasRowAction">
-                        <button type="button" :data-vmz-row-action="row.id" :disabled="rowActionDisabled" class="vmz-ui-table__row-action">
-                            {{ actionLabel }}
-                        </button>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-</template>
-<style>
-.vmz-ui-table-wrap {
-    overflow-x: auto;
-    border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
-}
-
-.vmz-ui-table {
-    width: 100%;
-    border-collapse: collapse;
-    font: inherit;
-}
-
-.vmz-ui-table th,
-.vmz-ui-table td {
-    padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
-    text-align: left;
-    border-bottom: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
-    vertical-align: middle;
-}
-
-.vmz-ui-table th {
-    font-weight: 700;
-    color: var(--vmz-action-primary-active);
-    background: transparent;
-}
-
-.vmz-ui-table__sort {
-    font: inherit;
-    font-weight: 700;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: inherit;
-    cursor: pointer;
-    outline: none;
-}
-
-.vmz-ui-table__sort:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-}
-
-.vmz-ui-table__row-action {
-    font: inherit;
-    font-weight: 600;
-    padding: 0.3rem 0.55rem;
-    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-table__row-action:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-}
-
-.vmz-ui-table__row-action:disabled {
-    opacity: 0.55;
-    cursor: not-allowed;
-}
-</style>
-<script client>
-/**
- * VMZ UI — Table (UI5 Console Surface).
- * Column header click → onSort; row action → onRowAction; permission via rowActionDisabled.
- */
-export default class Table {
-    /** @type {{ id: string, title: string }[]} */
-    public columns: {
-        id: string;
-        title: string;
-    }[] = [];
-    /** @type {{ id: string, cells: string[] }[]} */
-    public rows: {
-        id: string;
-        cells: string[];
-    }[] = [];
-    public hasRowAction: boolean = false;
-    public rowActionDisabled: boolean = false;
-    public actionTitle: string = "Action";
-    public actionLabel: string = "Open";
-    public sortKey: string = "";
-    public sortDir: string = "asc";
-    public onRowAction: ((rowId: string) => void) | null = null;
-    public onSort: ((columnId: string) => void) | null = null;
-    onBodyClick(ev) {
-        const t = ev && ev.target;
-        const el = t && typeof t.closest === "function" ? t.closest("[data-vmz-row-action]") : null;
-        if (!el || el.disabled) return;
-        const id = el.getAttribute("data-vmz-row-action");
-        if (id && typeof this.onRowAction === "function") this.onRowAction(id);
-    }
-    onHeadClick(ev) {
-        const t = ev && ev.target;
-        const el = t && typeof t.closest === "function" ? t.closest("[data-vmz-sort]") : null;
-        if (!el) return;
-        const id = el.getAttribute("data-vmz-sort");
-        if (id && typeof this.onSort === "function") this.onSort(id);
-    }
-}
-</script>
+<template>
+    <div data-vmz-ui="table" :data-sort-key="sortKey" :data-sort-dir="sortDir" class="vmz-ui-table-wrap">
+        <table class="vmz-ui-table">
+            <thead @click="onHeadClick">
+                <tr>
+                    <th v-for="col in columns" :key="col.id" scope="col" :data-vmz-col="col.id">
+                        <button type="button" :data-vmz-sort="col.id" class="vmz-ui-table__sort">
+                            {{ col.title }}
+                        </button>
+                    </th>
+                    <th v-if="hasRowAction" scope="col">
+                        {{ actionTitle }}
+                    </th>
+                </tr>
+            </thead>
+            <tbody @click="onBodyClick">
+                <tr v-for="row in rows" :key="row.id" :data-vmz-row="row.id">
+                    <td v-for="cell in row.cells">
+                        {{ cell }}
+                    </td>
+                    <td v-if="hasRowAction">
+                        <button type="button" :data-vmz-row-action="row.id" :disabled="rowActionDisabled" class="vmz-ui-table__row-action">
+                            {{ actionLabel }}
+                        </button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+<style>
+.vmz-ui-table-wrap {
+    overflow-x: auto;
+    border: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
+    border-radius: var(--vmz-radius-lg, 8px);
+    background: var(--vmz-surface-paper);
+}
+
+.vmz-ui-table {
+    width: 100%;
+    border-collapse: collapse;
+    font: inherit;
+    font-size: 0.875rem;
+}
+
+.vmz-ui-table th,
+.vmz-ui-table td {
+    padding: 0.75rem 1rem;
+    text-align: left;
+    border-bottom: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
+    vertical-align: middle;
+}
+
+/* Header is structure, not brand: quiet ink on a tinted band. */
+.vmz-ui-table th {
+    font-weight: 600;
+    font-size: 0.8125rem;
+    letter-spacing: 0.01em;
+    color: var(--vmz-text-steel);
+    background: var(--vmz-surface-mist);
+    white-space: nowrap;
+}
+
+.vmz-ui-table tbody tr {
+    transition: background-color var(--vmz-motion-control-duration, 150ms)
+        var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+.vmz-ui-table tbody tr:hover {
+    background: var(--vmz-surface-mist);
+}
+
+.vmz-ui-table tbody tr:last-child td {
+    border-bottom: 0;
+}
+
+.vmz-ui-table__sort {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    font: inherit;
+    font-weight: 600;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    outline: none;
+    border-radius: var(--vmz-radius-xs, 2px);
+}
+
+.vmz-ui-table__sort:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-table__row-action {
+    font: inherit;
+    font-weight: 500;
+    padding: 0.25rem 0.625rem;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-md, 6px);
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-action-primary-background);
+    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-table__row-action:hover:not(:disabled) {
+    color: var(--vmz-action-primary-hover);
+    border-color: var(--vmz-action-primary-hover);
+}
+
+.vmz-ui-table__row-action:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-table__row-action:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+}
+</style>
+<script client>
+/**
+ * VMZ UI — Table (UI5 Console Surface).
+ * Column header click → onSort; row action → onRowAction; permission via rowActionDisabled.
+ */
+export default class Table {
+    /** @type {{ id: string, title: string }[]} */
+    public columns: {
+        id: string;
+        title: string;
+    }[] = [];
+    /** @type {{ id: string, cells: string[] }[]} */
+    public rows: {
+        id: string;
+        cells: string[];
+    }[] = [];
+    public hasRowAction: boolean = false;
+    public rowActionDisabled: boolean = false;
+    public actionTitle: string = "Action";
+    public actionLabel: string = "Open";
+    public sortKey: string = "";
+    public sortDir: string = "asc";
+    public onRowAction: ((rowId: string) => void) | null = null;
+    public onSort: ((columnId: string) => void) | null = null;
+    onBodyClick(ev) {
+        const t = ev && ev.target;
+        const el = t && typeof t.closest === "function" ? t.closest("[data-vmz-row-action]") : null;
+        if (!el || el.disabled) return;
+        const id = el.getAttribute("data-vmz-row-action");
+        if (id && typeof this.onRowAction === "function") this.onRowAction(id);
+    }
+    onHeadClick(ev) {
+        const t = ev && ev.target;
+        const el = t && typeof t.closest === "function" ? t.closest("[data-vmz-sort]") : null;
+        if (!el) return;
+        const id = el.getAttribute("data-vmz-sort");
+        if (id && typeof this.onSort === "function") this.onSort(id);
+    }
+}
+</script>

package/src/components/Tabs.vmz

@@ -1,110 +1,110 @@
-<template>
-    <div data-vmz-ui="tabs" class="vmz-ui-tabs">
-        <div role="tablist" :aria-label="label" :onKeyDown="onListKeyDown" @click="onListClick" class="vmz-ui-tabs__list">
-            <button v-for="item in items" :key="item.id" type="button" role="tab" :id="item.id" :data-vmz-tab="item.id" :aria-selected="selected === item.id ? 'true' : 'false'" :aria-controls="item.controls" :tabindex="selected === item.id ? 0 : -1" class="vmz-ui-tabs__tab">
-                {{ item.title }}
-            </button>
-        </div>
-        <div role="tabpanel" :id="panelId" :data-vmz-tab-panel="selected" :aria-labelledby="selected" tabindex="0" class="vmz-ui-tabs__panel">
-            <slot />
-        </div>
-    </div>
-</template>
-<style>
-.vmz-ui-tabs {
-    display: flex;
-    flex-direction: column;
-    gap: 0.65rem;
-    max-width: 36rem;
-}
-
-.vmz-ui-tabs__list {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.25rem;
-    border-bottom: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
-}
-
-.vmz-ui-tabs__tab {
-    font: inherit;
-    font-size: 0.875rem;
-    font-weight: 400;
-    padding: 0.5rem 0;
-    margin: 0 1rem 0 0;
-    border: 0;
-    border-bottom: 2px solid transparent;
-    border-radius: 0;
-    background: transparent;
-    color: var(--vmz-text-ink);
-    cursor: pointer;
-    outline: none;
-}
-
-.vmz-ui-tabs__tab[aria-selected="true"] {
-    background: transparent;
-    color: var(--vmz-action-primary-background);
-    font-weight: 500;
-    border-bottom-color: var(--vmz-action-primary-background);
-}
-
-.vmz-ui-tabs__tab:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-}
-
-.vmz-ui-tabs__panel {
-    min-height: 2.5rem;
-    outline: none;
-}
-
-.vmz-ui-tabs__panel:focus-visible {
-    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-}
-</style>
-<script client>
-/**
- * VMZ UI — Tabs (UI2).
- * Parent owns `selected` id; keyboard Left/Right/Home/End on the tablist.
- * Panel content is the default slot (page chooses which body to show).
- */
-export default class Tabs {
-    public label: string = "Tabs";
-    public selected: string = "";
-    public panelId: string = "";
-    /** @type {{ id: string, title: string, controls?: string }[]} */
-    public items: {
-        id: string;
-        title: string;
-        controls?: string;
-    }[] = [];
-    public onSelect: ((id: string) => void) | null = null;
-    select(id) {
-        if (typeof this.onSelect === "function") this.onSelect(id);
-    }
-    onListClick(ev) {
-        const t = ev && ev.target;
-        const el = t && typeof t.closest === "function" ? t.closest("[data-vmz-tab]") : null;
-        const id =
-            el && typeof el.getAttribute === "function" ? el.getAttribute("data-vmz-tab") : null;
-        if (id) this.select(id);
-    }
-    onListKeyDown(ev) {
-        if (!ev || !this.items?.length) return;
-        const ids = this.items.map((it) => it.id);
-        const idx = Math.max(0, ids.indexOf(this.selected));
-        let next = idx;
-        if (ev.key === "ArrowRight") next = (idx + 1) % ids.length;
-        else if (ev.key === "ArrowLeft") next = (idx - 1 + ids.length) % ids.length;
-        else if (ev.key === "Home") next = 0;
-        else if (ev.key === "End") next = ids.length - 1;
-        else return;
-        ev.preventDefault();
-        this.select(ids[next]);
-        const root = this.__vmzDomRoot;
-        const btn =
-            root && typeof root.querySelector === "function"
-                ? root.querySelector(`[data-vmz-tab="${ids[next]}"]`)
-                : null;
-        if (btn && typeof btn.focus === "function") btn.focus();
-    }
-}
-</script>
+<template>
+    <div data-vmz-ui="tabs" class="vmz-ui-tabs">
+        <div role="tablist" :aria-label="label" :onKeyDown="onListKeyDown" @click="onListClick" class="vmz-ui-tabs__list">
+            <button v-for="item in items" :key="item.id" type="button" role="tab" :id="item.id" :data-vmz-tab="item.id" :aria-selected="selected === item.id ? 'true' : 'false'" :aria-controls="item.controls" :tabindex="selected === item.id ? 0 : -1" class="vmz-ui-tabs__tab">
+                {{ item.title }}
+            </button>
+        </div>
+        <div role="tabpanel" :id="panelId" :data-vmz-tab-panel="selected" :aria-labelledby="selected" tabindex="0" class="vmz-ui-tabs__panel">
+            <slot />
+        </div>
+    </div>
+</template>
+<style>
+.vmz-ui-tabs {
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+    max-width: 36rem;
+}
+
+.vmz-ui-tabs__list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    border-bottom: 1px solid var(--vmz-line-subtle, var(--vmz-line-default));
+}
+
+.vmz-ui-tabs__tab {
+    font: inherit;
+    font-size: 0.875rem;
+    font-weight: 400;
+    padding: 0.5rem 0;
+    margin: 0 1rem 0 0;
+    border: 0;
+    border-bottom: 2px solid transparent;
+    border-radius: 0;
+    background: transparent;
+    color: var(--vmz-text-ink);
+    cursor: pointer;
+    outline: none;
+}
+
+.vmz-ui-tabs__tab[aria-selected="true"] {
+    background: transparent;
+    color: var(--vmz-action-primary-background);
+    font-weight: 500;
+    border-bottom-color: var(--vmz-action-primary-background);
+}
+
+.vmz-ui-tabs__tab:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-tabs__panel {
+    min-height: 2.5rem;
+    outline: none;
+}
+
+.vmz-ui-tabs__panel:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+</style>
+<script client>
+/**
+ * VMZ UI — Tabs (UI2).
+ * Parent owns `selected` id; keyboard Left/Right/Home/End on the tablist.
+ * Panel content is the default slot (page chooses which body to show).
+ */
+export default class Tabs {
+    public label: string = "Tabs";
+    public selected: string = "";
+    public panelId: string = "";
+    /** @type {{ id: string, title: string, controls?: string }[]} */
+    public items: {
+        id: string;
+        title: string;
+        controls?: string;
+    }[] = [];
+    public onSelect: ((id: string) => void) | null = null;
+    select(id) {
+        if (typeof this.onSelect === "function") this.onSelect(id);
+    }
+    onListClick(ev) {
+        const t = ev && ev.target;
+        const el = t && typeof t.closest === "function" ? t.closest("[data-vmz-tab]") : null;
+        const id =
+            el && typeof el.getAttribute === "function" ? el.getAttribute("data-vmz-tab") : null;
+        if (id) this.select(id);
+    }
+    onListKeyDown(ev) {
+        if (!ev || !this.items?.length) return;
+        const ids = this.items.map((it) => it.id);
+        const idx = Math.max(0, ids.indexOf(this.selected));
+        let next = idx;
+        if (ev.key === "ArrowRight") next = (idx + 1) % ids.length;
+        else if (ev.key === "ArrowLeft") next = (idx - 1 + ids.length) % ids.length;
+        else if (ev.key === "Home") next = 0;
+        else if (ev.key === "End") next = ids.length - 1;
+        else return;
+        ev.preventDefault();
+        this.select(ids[next]);
+        const root = this.__vmzDomRoot;
+        const btn =
+            root && typeof root.querySelector === "function"
+                ? root.querySelector(`[data-vmz-tab="${ids[next]}"]`)
+                : null;
+        if (btn && typeof btn.focus === "function") btn.focus();
+    }
+}
+</script>

package/src/components/Tag.vmz

@@ -1,40 +1,43 @@
-<template>
-    <span data-vmz-ui="tag" :data-status="status || undefined" :data-vmz-tag-status="status || undefined" class="vmz-ui-tag">
-        <slot />
-    </span>
-</template>
-<style>
-.vmz-ui-tag {
-    display: inline-flex;
-    align-items: center;
-    min-height: 1.5rem;
-    padding: 0 0.45rem;
-    border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-sm, 2px);
-    background: var(--vmz-surface-mist);
-    color: var(--vmz-text-steel);
-    font-size: 0.75rem;
-    line-height: 1;
-}
-.vmz-ui-tag[data-status="success"] {
-    color: var(--vmz-status-success-foreground);
-    background: color-mix(in srgb, var(--vmz-status-success-accent) 12%, var(--vmz-surface-paper));
-    border-color: color-mix(in srgb, var(--vmz-status-success-accent) 45%, var(--vmz-line-default));
-}
-.vmz-ui-tag[data-status="warning"] {
-    color: var(--vmz-status-warning-foreground);
-    background: color-mix(in srgb, var(--vmz-status-warning-accent) 12%, var(--vmz-surface-paper));
-    border-color: color-mix(in srgb, var(--vmz-status-warning-accent) 45%, var(--vmz-line-default));
-}
-.vmz-ui-tag[data-status="error"] {
-    color: var(--vmz-status-danger-foreground);
-    background: color-mix(in srgb, var(--vmz-status-danger-accent) 12%, var(--vmz-surface-paper));
-    border-color: color-mix(in srgb, var(--vmz-status-danger-accent) 45%, var(--vmz-line-default));
-}
-</style>
-<script client>
-export default class Tag {
-    static __vmzHostBox = "contents";
-    public status: string = "";
-}
-</script>
+<template>
+    <span data-vmz-ui="tag" :data-status="status || undefined" :data-vmz-tag-status="status || undefined" class="vmz-ui-tag">
+        <slot />
+    </span>
+</template>
+<style>
+.vmz-ui-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    min-height: 1.5rem;
+    padding: 0 0.5rem;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-sm, 4px);
+    background: var(--vmz-surface-mist);
+    color: var(--vmz-text-steel);
+    font-size: 0.75rem;
+    font-weight: 500;
+    line-height: 1;
+    white-space: nowrap;
+}
+.vmz-ui-tag[data-status="success"] {
+    color: var(--vmz-status-success-foreground);
+    background: color-mix(in srgb, var(--vmz-status-success-accent) 12%, var(--vmz-surface-paper));
+    border-color: color-mix(in srgb, var(--vmz-status-success-accent) 45%, var(--vmz-line-default));
+}
+.vmz-ui-tag[data-status="warning"] {
+    color: var(--vmz-status-warning-foreground);
+    background: color-mix(in srgb, var(--vmz-status-warning-accent) 12%, var(--vmz-surface-paper));
+    border-color: color-mix(in srgb, var(--vmz-status-warning-accent) 45%, var(--vmz-line-default));
+}
+.vmz-ui-tag[data-status="error"] {
+    color: var(--vmz-status-danger-foreground);
+    background: color-mix(in srgb, var(--vmz-status-danger-accent) 12%, var(--vmz-surface-paper));
+    border-color: color-mix(in srgb, var(--vmz-status-danger-accent) 45%, var(--vmz-line-default));
+}
+</style>
+<script client>
+export default class Tag {
+    static __vmzHostBox = "contents";
+    public status: string = "";
+}
+</script>