@vmz/ui 0.3.4 → 0.3.6

package/src/components/DataTable.vmz

@@ -1,194 +1,194 @@
-<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 2px 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 2px var(--vmz-focus-ring);
-}
-
-.vmz-ui-datatable__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-datatable__row-action:focus-visible {
-    box-shadow: 0 0 0 2px 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">
+                        <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>