fix(kt-table-legacy): fix row selection reactivity not working

3YOURMIND · Aug 30, 2024 · 1cd1685 · 1cd1685
1 parent ec4d57b
commit 1cd1685
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 54 deletions.
diff --git a/packages/documentation/pages/usage/components/table-legacy.vue b/packages/documentation/pages/usage/components/table-legacy.vue
@@ -163,9 +163,13 @@ _Note:_ The use of v-model is _REMOVED_. Instead, bind the Array of selected to
 > Note the difference between the Array model passed to the v-model (now, removed) and that passed to the selected property.
 > The former is an `Array` of selected indices, and the latter is an `Array` of _row_ `Object`s
 
-<div>
+<div class="container">
 	<KtTableLegacy :rows="rows" :columns="columnsDefault" isSelectable :selected="selected" @selectionChange="selected = $event" />
-	<pre>Selected Rows: {{JSON.stringify(selected,undefined, 2)}} </pre>
+	<div class="container__buttons-row">
+		<KtButton :disabled="selected.length === rows.length" type="primary" label="Select All Rows" @click="setSelectedRows(rows)"/>
+		<KtButton :disabled="selected.length === 0" type="primary" label="Clear Row Selection" @click="setSelectedRows([])"/>
+	</div>
+	<pre>Selected Rows: {{JSON.stringify(selected, undefined, 2)}} </pre>
 </div>
 
 > Note that the use of a `JSON.stringify()` in a `<pre></pre>` tag is for readability purposes
@@ -1113,6 +1117,29 @@ import ComponentInfo from '~/components/ComponentInfo.vue'
 
 const ADDRESS_DOT_LINE = 'address.line'
 
+const rows = [
+	{
+		date: '2016-05-03',
+		name: 'Tom',
+		address: { number: 119, line: 'No. 119, Grove St, Los Angeles' },
+	},
+	{
+		date: '2016-05-02',
+		name: 'Jackson',
+		address: { number: 89, line: 'No. 89, Grove St, Los Angeles' },
+	},
+	{
+		date: '2016-05-04',
+		name: 'Fen',
+		address: { number: 182, line: 'No. 182, Grove St, Los Angeles' },
+	},
+	{
+		date: '2016-05-01',
+		name: 'Fexiang',
+		address: { number: 189, line: 'No. 189, Grove St, Los Angeles' },
+	},
+]
+
 export default {
 	name: 'DocumentationPageUsageComponentsTable',
 	components: {
@@ -1133,13 +1160,7 @@ export default {
 			component: KtTableLegacy,
 			Kotti,
 			select: [0, 1],
-			selected: [
-				{
-					date: '2016-05-04',
-					name: 'Tom',
-					address: { number: 119, line: 'No. 118, Grove St, Los Angeles' },
-				},
-			],
+			selected: [rows[0]],
 			selectedRows: [],
 			columnsDefault: [
 				{ prop: 'name', label: 'Name' },
@@ -1192,28 +1213,7 @@ export default {
 				},
 			],
 			emptyRows: [],
-			rows: [
-				{
-					date: '2016-05-03',
-					name: 'Tom',
-					address: { number: 119, line: 'No. 119, Grove St, Los Angeles' },
-				},
-				{
-					date: '2016-05-02',
-					name: 'Jackson',
-					address: { number: 89, line: 'No. 89, Grove St, Los Angeles' },
-				},
-				{
-					date: '2016-05-04',
-					name: 'Fen',
-					address: { number: 182, line: 'No. 182, Grove St, Los Angeles' },
-				},
-				{
-					date: '2016-05-01',
-					name: 'Fexiang',
-					address: { number: 189, line: 'No. 189, Grove St, Los Angeles' },
-				},
-			],
+			rows: [...rows],
 			disableName: 'F',
 			fromIndex: 0,
 			dragSteps: 0,
@@ -1231,6 +1231,9 @@ export default {
 		disableRow({ row }) {
 			return row.name.includes(this.disableName)
 		},
+		setSelectedRows(rows) {
+			this.selected = [...rows]
+		},
 		showAlertOnClickOrEnter(row, rowIndex) {
 			// eslint-disable-next-line no-alert
 			window.alert(`${JSON.stringify(row)} is at index: ${String(rowIndex)}!`)
@@ -1318,3 +1321,18 @@ export default {
 	},
 }
 </script>
+
+<style lang="scss" scoped>
+.container {
+	display: flex;
+	flex-direction: column;
+	gap: var(--unit-2);
+
+	&__buttons-row {
+		display: flex;
+		gap: var(--unit-2);
+		align-items: center;
+		justify-content: flex-end;
+	}
+}
+</style>
diff --git a/packages/kotti-ui/source/kotti-table-legacy/components/TableHeader.vue b/packages/kotti-ui/source/kotti-table-legacy/components/TableHeader.vue
@@ -7,7 +7,10 @@
 					<label class="form-checkbox">
 						<input :checked="isAllSelected" type="checkbox" />
 						<i
-							class="form-icon"
+							:class="{
+								'form-icon': true,
+								'form-icon--is-checked': isAllSelected,
+							}"
 							:style="isAllRowsDisabled ? { cursor: 'not-allowed' } : {}"
 						/>
 					</label>

diff --git a/packages/kotti-ui/source/kotti-table-legacy/components/TableRow.ts b/packages/kotti-ui/source/kotti-table-legacy/components/TableRow.ts
@@ -106,13 +106,9 @@ export const TableRow = defineComponent({
 
 			tableState.$emit('activateRow', row, index)
 		}
-		const handleSelect = ($event: InputEvent, row: unknown) => {
+		const handleSelect = ($event: MouseEvent, row: unknown) => {
 			$event.stopPropagation()
-			tableStore.commit(
-				'selectRow',
-				row,
-				($event.target as HTMLInputElement).checked,
-			)
+			tableStore.commit('selectRow', row, !isSelectedRow.value)
 		}
 
 		return () =>
@@ -189,13 +185,18 @@ export const TableRow = defineComponent({
 													type: 'checkbox',
 												},
 												on: {
-													change: ($event: InputEvent) => {
+													click: ($event: MouseEvent) => {
 														handleSelect($event, props.row)
 													},
 												},
 											}),
 											h('i', {
-												class: 'form-icon',
+												class: [
+													'form-icon',
+													isSelectedRow.value
+														? 'form-icon--is-checked'
+														: undefined,
+												],
 												style: isDisabled.value
 													? { cursor: 'not-allowed' }
 													: undefined,

diff --git a/packages/kotti-ui/source/kotti-table-legacy/style/form-checkbox.scss b/packages/kotti-ui/source/kotti-table-legacy/style/form-checkbox.scss
@@ -25,21 +25,8 @@ table.kt-table ::v-deep .form-checkbox {
 		background: var(--ui-background);
 		border: $border-width solid var(--ui-02);
 		border-radius: var(--border-radius);
-	}
-
-	input {
-		position: absolute;
-		width: 1px;
-		height: 1px;
-		margin: -1px;
-		overflow: hidden;
-		clip: rect(0, 0, 0, 0);
-
-		&:focus + .form-icon {
-			border-color: var(--interactive-01);
-		}
 
-		&:checked + .form-icon {
+		&--is-checked {
 			background: var(--interactive-01);
 			border-color: var(--interactive-01);
 
@@ -59,6 +46,19 @@ table.kt-table ::v-deep .form-checkbox {
 				transform: rotate(45deg);
 			}
 		}
+	}
+
+	input {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+
+		&:focus + .form-icon {
+			border-color: var(--interactive-01);
+		}
 
 		&:indeterminate + .form-icon {
 			background: var(--interactive-01);