Skip to content

Commit

Permalink
fix(kt-table-legacy): fix row selection reactivity not working
Browse files Browse the repository at this point in the history
  • Loading branch information
santiagoballadares committed Sep 2, 2024
1 parent ec4d57b commit 0c59f19
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 54 deletions.
80 changes: 49 additions & 31 deletions packages/documentation/pages/usage/components/table-legacy.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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: {
Expand All @@ -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' },
Expand Down Expand Up @@ -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,
Expand All @@ -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)}!`)
Expand Down Expand Up @@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 () =>
Expand Down Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -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);
Expand Down

0 comments on commit 0c59f19

Please sign in to comment.