fix(Table): respect sort prop updates from parent component (#1208)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Ivan Topolnjak
2024-01-09 13:03:02 +01:00
committed by GitHub
parent 8508e84958
commit c6841d06a4

View File

@@ -67,10 +67,11 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { ref, computed, defineComponent, toRaw, toRef } from 'vue' import { computed, defineComponent, toRaw, toRef } from 'vue'
import type { PropType } from 'vue' import type { PropType } from 'vue'
import { upperFirst } from 'scule' import { upperFirst } from 'scule'
import { defu } from 'defu' import { defu } from 'defu'
import { useVModel } from '@vueuse/core'
import UButton from '../elements/Button.vue' import UButton from '../elements/Button.vue'
import UIcon from '../elements/Icon.vue' import UIcon from '../elements/Icon.vue'
import UCheckbox from '../forms/Checkbox.vue' import UCheckbox from '../forms/Checkbox.vue'
@@ -170,7 +171,7 @@ export default defineComponent({
const columns = computed(() => props.columns ?? Object.keys(props.rows[0] ?? {}).map((key) => ({ key, label: upperFirst(key), sortable: false, class: undefined, sort: defaultSort }))) const columns = computed(() => props.columns ?? Object.keys(props.rows[0] ?? {}).map((key) => ({ key, label: upperFirst(key), sortable: false, class: undefined, sort: defaultSort })))
const sort = ref(defu({}, props.sort, { column: null, direction: 'asc' })) const sort = useVModel(props, 'sort', emit, { passive: true, defaultValue: defu({}, props.sort, { column: null, direction: 'asc' }) })
const savedSort = { column: sort.value.column, direction: null } const savedSort = { column: sort.value.column, direction: null }
@@ -235,13 +236,11 @@ export default defineComponent({
if (sort.value.direction === direction) { if (sort.value.direction === direction) {
sort.value = defu({}, savedSort, { column: null, direction: 'asc' }) sort.value = defu({}, savedSort, { column: null, direction: 'asc' })
} else { } else {
sort.value.direction = sort.value.direction === 'asc' ? 'desc' : 'asc' sort.value = { column: sort.value.column, direction: sort.value.direction === 'asc' ? 'desc' : 'asc' }
} }
} else { } else {
sort.value = { column: column.key, direction: column.direction || 'asc' } sort.value = { column: column.key, direction: column.direction || 'asc' }
} }
emit('update:sort', sort.value)
} }
function onSelect (row) { function onSelect (row) {