@vmz/ui 0.3.7 → 0.3.8

package/src/components/DataTable.vmz

@@ -6,9 +6,16 @@
                     <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 }}
+                    <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">
@@ -21,7 +28,7 @@
                     <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">
+                    <td v-for="(cell, index) in row.cells" :key="index" :data-align="cellAlign(index, cell)">
                         {{ cell }}
                     </td>
                     <td v-if="hasRowAction">
@@ -37,9 +44,10 @@
 <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-md, 6px);
+    border-radius: var(--vmz-radius-lg, 8px);
     background: var(--vmz-surface-paper);
     color: var(--vmz-text-ink);
 }
@@ -48,35 +56,70 @@
     width: 100%;
     border-collapse: collapse;
     font: inherit;
+    font-size: 0.875rem;
 }
 
 .vmz-ui-datatable th,
 .vmz-ui-datatable td {
-    padding: var(--vmz-density-compact-padding-y) var(--vmz-density-compact-padding-x);
+    height: 3rem;
+    padding: 0 1rem;
     text-align: left;
-    border-bottom: 1px solid var(--vmz-line-default);
     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;
-    font-weight: 700;
-    color: var(--vmz-action-primary-active);
+    height: 2.75rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--vmz-text-tertiary);
     background: var(--vmz-surface-mist);
-    box-shadow: 0 1px 0 var(--vmz-line-default);
+    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__check {
-    width: 2.25rem;
+.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 {
@@ -84,34 +127,75 @@
 }
 
 .vmz-ui-datatable tr[data-selected="true"] {
-    background: color-mix(in srgb, var(--vmz-action-primary-background) 12%, transparent);
+    background: var(--vmz-action-primary-soft);
 }
 
 .vmz-ui-datatable__sort {
-    font: inherit;
-    font-weight: 700;
+    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-weight: 600;
-    padding: 0.25rem 0.5rem;
-    border: 1px solid var(--vmz-line-default);
+    font-size: 0.875rem;
+    font-weight: 500;
+    border: 0;
     border-radius: var(--vmz-radius-md, 6px);
     background: transparent;
-    color: var(--vmz-action-primary-active);
+    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 {
@@ -121,6 +205,7 @@
 .vmz-ui-datatable__row-action:disabled {
     opacity: 0.55;
     cursor: not-allowed;
+    color: var(--vmz-text-tertiary);
 }
 </style>
 <script client>
@@ -130,10 +215,11 @@
  * Large-grid features live outside this package.
  */
 export default class DataTable {
-    /** @type {{ id: string, title: string }[]} */
+    /** @type {{ id: string, title: string, align?: string }[]} */
     public columns: {
         id: string;
         title: string;
+        align?: string;
     }[] = [];
     /**
      * @type {{
@@ -153,17 +239,31 @@ export default class DataTable {
     }[] = [];
     public hasRowAction: boolean = false;
     public rowActionDisabled: boolean = false;
-    public actionTitle: string = "Action";
-    public actionLabel: string = "Open";
+    public actionTitle: string = "";
+    public actionLabel: string = "";
     public sortKey: string = "";
     public sortDir: string = "asc";
     public selectedCount: string = "0";
     public allSelected: boolean = false;
-    public selectAllLabel: string = "Select all rows";
+    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;