@vmz/ui 0.3.6 → 0.3.8

package/src/components/Content.vmz

@@ -7,7 +7,21 @@
 .vmz-ui-content {
     flex: 1;
     min-width: 0;
-    padding: 1.5rem;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: var(--vmz-layout-max-width, 75rem);
+    margin: 0 auto;
+    padding: var(--vmz-space-6, 2rem) var(--vmz-layout-gutter, 1rem);
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-space-6, 2rem);
+    color: var(--vmz-text-ink);
+}
+@media (max-width: 720px) {
+    .vmz-ui-content {
+        padding: var(--vmz-space-5, 1.5rem) var(--vmz-space-4, 1rem);
+        gap: var(--vmz-space-5, 1.5rem);
+    }
 }
 </style>
 <script client>

package/src/components/DataTable.vmz

@@ -1,194 +1,294 @@
-<template>
-    <div data-vmz-ui="data-table" :data-sort-key="sortKey" :data-sort-dir="sortDir" :data-selected-count="selectedCount" class="vmz-ui-datatable-wrap">
-        <table class="vmz-ui-datatable">
-            <thead @click="onHeadClick">
-                <tr>
-                    <th scope="col" class="vmz-ui-datatable__check">
-                        <input type="checkbox" data-vmz-select-all="true" :aria-label="selectAllLabel" :checked="allSelected" class="vmz-ui-datatable__box" />
-                    </th>
-                    <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-datatable__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" :data-selected="row.selectedAttr">
-                    <td class="vmz-ui-datatable__check">
-                        <input type="checkbox" :data-vmz-select="row.id" :aria-label="row.selectLabel" :checked="row.selected" class="vmz-ui-datatable__box" />
-                    </td>
-                    <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-datatable__row-action">
-                            {{ actionLabel }}
-                        </button>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-</template>
-<style>
-.vmz-ui-datatable-wrap {
-    max-height: 16rem;
-    overflow: auto;
-    border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
-    background: var(--vmz-surface-paper);
-    color: var(--vmz-text-ink);
-}
-
-.vmz-ui-datatable {
-    width: 100%;
-    border-collapse: collapse;
-    font: inherit;
-}
-
-.vmz-ui-datatable th,
-.vmz-ui-datatable td {
-    padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
-    text-align: left;
-    border-bottom: 1px solid var(--vmz-line-default);
-    vertical-align: middle;
-}
-
-.vmz-ui-datatable thead th {
-    position: sticky;
-    top: 0;
-    z-index: 1;
-    font-weight: 700;
-    color: var(--vmz-action-primary-active);
-    background: var(--vmz-surface-mist);
-    box-shadow: 0 1px 0 var(--vmz-line-default);
-}
-
-.vmz-ui-datatable__check {
-    width: 2.25rem;
-}
-
-.vmz-ui-datatable__box {
-    width: 1rem;
-    height: 1rem;
-    accent-color: var(--vmz-action-primary-background);
-    outline: none;
-}
-
-.vmz-ui-datatable__box:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
-}
-
-.vmz-ui-datatable tr[data-selected="true"] {
-    background: color-mix(in srgb, var(--vmz-action-primary-background) 12%, transparent);
-}
-
-.vmz-ui-datatable__sort {
-    font: inherit;
-    font-weight: 700;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: inherit;
-    cursor: pointer;
-    outline: none;
-}
-
-.vmz-ui-datatable__sort:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
-}
-
-.vmz-ui-datatable__row-action {
-    font: inherit;
-    font-weight: 600;
-    padding: 0.25rem 0.5rem;
-    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-datatable__row-action:focus-visible {
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
-}
-
-.vmz-ui-datatable__row-action:disabled {
-    opacity: 0.55;
-    cursor: not-allowed;
-}
-</style>
-<script client>
-/**
- * VMZ UI — DataTable (ordinary Console table).
- * Parent owns rows + selection + sort. Sticky header.
- * Large-grid features live outside this package.
- */
-export default class DataTable {
-    /** @type {{ id: string, title: string }[]} */
-    public columns: {
-        id: string;
-        title: string;
-    }[] = [];
-    /**
-     * @type {{
-     *   id: string,
-     *   cells: string[],
-     *   selected: boolean,
-     *   selectedAttr: string,
-     *   selectLabel: string
-     * }[]}
-     */
-    public rows: {
-        id: string;
-        cells: string[];
-        selected: boolean;
-        selectedAttr: string;
-        selectLabel: 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 selectedCount: string = "0";
-    public allSelected: boolean = false;
-    public selectAllLabel: string = "Select all rows";
-    public onRowAction: ((rowId: string) => void) | null = null;
-    public onSort: ((columnId: string) => void) | null = null;
-    public onToggleRow: ((rowId: string) => void) | null = null;
-    public onToggleAll: (() => void) | null = null;
-    onBodyClick(ev) {
-        const t = ev && ev.target;
-        if (!t || typeof t.closest !== "function") return;
-        const select = t.closest("[data-vmz-select]");
-        if (select) {
-            const id = select.getAttribute("data-vmz-select");
-            if (id && typeof this.onToggleRow === "function") this.onToggleRow(id);
-            return;
-        }
-        const action = t.closest("[data-vmz-row-action]");
-        if (!action || action.disabled) return;
-        const id = action.getAttribute("data-vmz-row-action");
-        if (id && typeof this.onRowAction === "function") this.onRowAction(id);
-    }
-    onHeadClick(ev) {
-        const t = ev && ev.target;
-        if (!t || typeof t.closest !== "function") return;
-        if (t.closest("[data-vmz-select-all]")) {
-            if (typeof this.onToggleAll === "function") this.onToggleAll();
-            return;
-        }
-        const sort = t.closest("[data-vmz-sort]");
-        if (!sort) return;
-        const id = sort.getAttribute("data-vmz-sort");
-        if (id && typeof this.onSort === "function") this.onSort(id);
-    }
-}
-</script>
+<template>
+    <div data-vmz-ui="data-table" :data-sort-key="sortKey" :data-sort-dir="sortDir" :data-selected-count="selectedCount" class="vmz-ui-datatable-wrap">
+        <table class="vmz-ui-datatable">
+            <thead @click="onHeadClick">
+                <tr>
+                    <th scope="col" class="vmz-ui-datatable__check">
+                        <input type="checkbox" data-vmz-select-all="true" :aria-label="selectAllLabel" :checked="allSelected" class="vmz-ui-datatable__box" />
+                    </th>
+                    <th v-for="col in columns" :key="col.id" scope="col" :data-vmz-col="col.id" :data-align="columnAlign(col)" :aria-sort="sortAria(col.id)">
+                        <button type="button" :data-vmz-sort="col.id" :data-active="col.id === sortKey ? 'true' : 'false'" class="vmz-ui-datatable__sort">
+                            <span class="vmz-ui-datatable__title">
+                                {{ col.title }}
+                            </span>
+                            <span class="vmz-ui-datatable__sort-icon">
+                                <Icon v-if="col.id === sortKey && sortDir === 'asc'" name="action.sort-asc" size="sm" decorative />
+                                <Icon v-else-if="col.id === sortKey && sortDir === 'desc'" name="action.sort-desc" size="sm" decorative />
+                                <Icon v-else name="action.sort" size="sm" decorative />
+                            </span>
+                        </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" :data-selected="row.selectedAttr">
+                    <td class="vmz-ui-datatable__check">
+                        <input type="checkbox" :data-vmz-select="row.id" :aria-label="row.selectLabel" :checked="row.selected" class="vmz-ui-datatable__box" />
+                    </td>
+                    <td v-for="(cell, index) in row.cells" :key="index" :data-align="cellAlign(index, cell)">
+                        {{ cell }}
+                    </td>
+                    <td v-if="hasRowAction">
+                        <button type="button" :data-vmz-row-action="row.id" :disabled="rowActionDisabled" class="vmz-ui-datatable__row-action">
+                            {{ actionLabel }}
+                        </button>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
+<style>
+.vmz-ui-datatable-wrap {
+    max-height: 16rem;
+    margin-bottom: 1rem;
+    overflow: auto;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-lg, 8px);
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-datatable {
+    width: 100%;
+    border-collapse: collapse;
+    font: inherit;
+    font-size: 0.875rem;
+}
+
+.vmz-ui-datatable th,
+.vmz-ui-datatable td {
+    height: 3rem;
+    padding: 0 1rem;
+    text-align: left;
+    vertical-align: middle;
+    border: 0;
+    border-bottom: 1px solid var(--vmz-line-subtle);
+    white-space: nowrap;
+}
+
+.vmz-ui-datatable thead th {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    height: 2.75rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--vmz-text-tertiary);
+    background: var(--vmz-surface-mist);
+    border-bottom: 0;
+    box-shadow: inset 0 -1px 0 var(--vmz-line-subtle);
+}
+
+.vmz-ui-datatable td[data-align="right"],
+.vmz-ui-datatable th[data-align="right"] {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+}
+
+.vmz-ui-datatable td[data-align="center"],
+.vmz-ui-datatable th[data-align="center"] {
+    text-align: center;
+}
+
+.vmz-ui-datatable 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-datatable tbody tr:hover {
+    background: var(--vmz-surface-fill);
+}
+
+.vmz-ui-datatable tbody tr:last-child td {
+    border-bottom: 0;
+}
+
+.vmz-ui-datatable th.vmz-ui-datatable__check,
+.vmz-ui-datatable td.vmz-ui-datatable__check {
+    width: 3rem;
+    padding-right: 0;
+}
+
+.vmz-ui-datatable__box {
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+    accent-color: var(--vmz-action-primary-background);
+    outline: none;
+    cursor: pointer;
+}
+
+.vmz-ui-datatable__box:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-datatable tr[data-selected="true"] {
+    background: var(--vmz-action-primary-soft);
+}
+
+.vmz-ui-datatable__sort {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 0.25rem;
+    width: 100%;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: 0.75rem;
+    font-weight: 600;
+    cursor: pointer;
+    outline: none;
+    border-radius: var(--vmz-radius-xs, 2px);
+}
+
+.vmz-ui-datatable th[data-align="right"] .vmz-ui-datatable__sort {
+    justify-content: flex-end;
+}
+
+.vmz-ui-datatable th[data-align="center"] .vmz-ui-datatable__sort {
+    justify-content: center;
+}
+
+.vmz-ui-datatable__sort:hover {
+    color: var(--vmz-action-primary-background);
+}
+
+.vmz-ui-datatable__sort:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-datatable__sort-icon {
+    display: inline-flex;
+    align-items: center;
+    color: var(--vmz-text-tertiary);
+    font-size: 0.875rem;
+}
+
+.vmz-ui-datatable__sort:hover .vmz-ui-datatable__sort-icon,
+.vmz-ui-datatable__sort[data-active="true"] .vmz-ui-datatable__sort-icon {
+    color: var(--vmz-action-primary-background);
+}
+
+.vmz-ui-datatable__row-action {
+    height: 2rem;
+    padding: 0 0.5rem;
+    font: inherit;
+    font-size: 0.875rem;
+    font-weight: 500;
+    border: 0;
+    border-radius: var(--vmz-radius-md, 6px);
+    background: transparent;
+    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)),
+        background-color var(--vmz-motion-control-duration, 150ms) var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+.vmz-ui-datatable__row-action:hover:not(:disabled) {
+    background: var(--vmz-action-primary-soft);
+    color: var(--vmz-action-primary-hover);
+}
+
+.vmz-ui-datatable__row-action:focus-visible {
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-datatable__row-action:disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+    color: var(--vmz-text-tertiary);
+}
+</style>
+<script client>
+/**
+ * VMZ UI — DataTable (ordinary Console table).
+ * Parent owns rows + selection + sort. Sticky header.
+ * Large-grid features live outside this package.
+ */
+export default class DataTable {
+    /** @type {{ id: string, title: string, align?: string }[]} */
+    public columns: {
+        id: string;
+        title: string;
+        align?: string;
+    }[] = [];
+    /**
+     * @type {{
+     *   id: string,
+     *   cells: string[],
+     *   selected: boolean,
+     *   selectedAttr: string,
+     *   selectLabel: string
+     * }[]}
+     */
+    public rows: {
+        id: string;
+        cells: string[];
+        selected: boolean;
+        selectedAttr: string;
+        selectLabel: string;
+    }[] = [];
+    public hasRowAction: boolean = false;
+    public rowActionDisabled: boolean = false;
+    public actionTitle: string = "";
+    public actionLabel: string = "";
+    public sortKey: string = "";
+    public sortDir: string = "asc";
+    public selectedCount: string = "0";
+    public allSelected: boolean = false;
+    public selectAllLabel: string = "";
+    public onRowAction: ((rowId: string) => void) | null = null;
+    public onSort: ((columnId: string) => void) | null = null;
+    public onToggleRow: ((rowId: string) => void) | null = null;
+    public onToggleAll: (() => void) | null = null;
+    columnAlign(col) {
+        return col && col.align ? col.align : "left";
+    }
+    cellAlign(index, cell) {
+        const col = (this.columns || [])[index];
+        if (col && col.align) return col.align;
+        const text = String(cell == null ? "" : cell).trim();
+        if (!text) return "left";
+        return /^[-+]?[\d.,%]+$/.test(text) ? "right" : "left";
+    }
+    sortAria(id) {
+        if (id !== this.sortKey) return null;
+        return this.sortDir === "desc" ? "descending" : "ascending";
+    }
+    onBodyClick(ev) {
+        const t = ev && ev.target;
+        if (!t || typeof t.closest !== "function") return;
+        const select = t.closest("[data-vmz-select]");
+        if (select) {
+            const id = select.getAttribute("data-vmz-select");
+            if (id && typeof this.onToggleRow === "function") this.onToggleRow(id);
+            return;
+        }
+        const action = t.closest("[data-vmz-row-action]");
+        if (!action || action.disabled) return;
+        const id = action.getAttribute("data-vmz-row-action");
+        if (id && typeof this.onRowAction === "function") this.onRowAction(id);
+    }
+    onHeadClick(ev) {
+        const t = ev && ev.target;
+        if (!t || typeof t.closest !== "function") return;
+        if (t.closest("[data-vmz-select-all]")) {
+            if (typeof this.onToggleAll === "function") this.onToggleAll();
+            return;
+        }
+        const sort = t.closest("[data-vmz-sort]");
+        if (!sort) return;
+        const id = sort.getAttribute("data-vmz-sort");
+        if (id && typeof this.onSort === "function") this.onSort(id);
+    }
+}
+</script>