@vmz/ui 0.2.3 → 0.2.5

package/src/components/DataTable.vmz

@@ -1,89 +1,64 @@
 <template>
-  <div
-      class="vmz-ui-datatable-wrap"
-      data-vmz-ui="data-table"
-      :data-sort-key="sortKey"
-      :data-sort-dir="sortDir"
-      :data-selected-count="selectedCount"
-    >
-      <table class="vmz-ui-datatable">
-        <thead @click="onHeadClick">
-          <tr>
-            <th scope="col" class="vmz-ui-datatable__check">
-              <input
-                type="checkbox"
-                class="vmz-ui-datatable__box"
-                data-vmz-select-all="true"
-                :aria-label="selectAllLabel"
-                :checked="allSelected"
-              />
-            </th>
-            <th v-for="col in columns" :key="col.id" scope="col" :data-vmz-col="col.id">
-              <button type="button" class="vmz-ui-datatable__sort" :data-vmz-sort="col.id">
-                {{ 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"
-                class="vmz-ui-datatable__box"
-                :data-vmz-select="row.id"
-                :aria-label="row.selectLabel"
-                :checked="row.selected"
-              />
-            </td>
-            <td v-for="cell in row.cells">{{ cell }}</td>
-            <td v-if="hasRowAction">
-              <button
-                type="button"
-                class="vmz-ui-datatable__row-action"
-                :data-vmz-row-action="row.id"
-                :disabled="rowActionDisabled"
-              >
-                {{ actionLabel }}
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+    <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 {
+.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 {
+.vmz-ui-datatable {
     width: 100%;
     border-collapse: collapse;
     font: inherit;
-  }
+}
 
-  .vmz-ui-datatable th,
-  .vmz-ui-datatable td {
+.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 {
+.vmz-ui-datatable thead th {
     position: sticky;
     top: 0;
     z-index: 1;
@@ -91,28 +66,28 @@
     color: var(--vmz-action-primary-active);
     background: var(--vmz-surface-mist);
     box-shadow: 0 1px 0 var(--vmz-line-default);
-  }
+}
 
-  .vmz-ui-datatable__check {
+.vmz-ui-datatable__check {
     width: 2.25rem;
-  }
+}
 
-  .vmz-ui-datatable__box {
+.vmz-ui-datatable__box {
     width: 1rem;
     height: 1rem;
     accent-color: var(--vmz-action-primary-background);
     outline: none;
-  }
+}
 
-  .vmz-ui-datatable__box:focus-visible {
+.vmz-ui-datatable__box:focus-visible {
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 
-  .vmz-ui-datatable tr[data-selected='true'] {
+.vmz-ui-datatable tr[data-selected="true"] {
     background: color-mix(in srgb, var(--vmz-action-primary-background) 12%, transparent);
-  }
+}
 
-  .vmz-ui-datatable__sort {
+.vmz-ui-datatable__sort {
     font: inherit;
     font-weight: 700;
     padding: 0;
@@ -121,13 +96,13 @@
     color: inherit;
     cursor: pointer;
     outline: none;
-  }
+}
 
-  .vmz-ui-datatable__sort:focus-visible {
+.vmz-ui-datatable__sort:focus-visible {
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 
-  .vmz-ui-datatable__row-action {
+.vmz-ui-datatable__row-action {
     font: inherit;
     font-weight: 600;
     padding: 0.3rem 0.55rem;
@@ -137,84 +112,83 @@
     color: var(--vmz-action-primary-active);
     cursor: pointer;
     outline: none;
-  }
+}
 
-  .vmz-ui-datatable__row-action:focus-visible {
+.vmz-ui-datatable__row-action:focus-visible {
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 
-  .vmz-ui-datatable__row-action:disabled {
+.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.
-*/
+ * 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);
-	}
+    /** @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>