From 3e065d113be271f88cb5d06d4abadf62f0e632c0 Mon Sep 17 00:00:00 2001 From: Joel Mandell Date: Tue, 12 Mar 2024 16:32:44 +0100 Subject: [PATCH 01/13] feat(VDataTable): Emit events when sorting/filtering --- .../vuetify/src/components/VDataTable/VDataTable.tsx | 2 ++ .../src/components/VDataTable/composables/sort.ts | 9 +++++++-- packages/vuetify/src/composables/filter.ts | 5 ++++- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx index 9a6d241e0c4..5235216bf9a 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx @@ -121,6 +121,8 @@ export const VDataTable = genericComponent( 'update:groupBy': (value: any) => true, 'update:expanded': (value: any) => true, 'update:currentItems': (value: any) => true, + 'update:sortedItems': (value: any) => true, + 'update:filteredItems': (value: any) => true, }, setup (props, { attrs, slots }) { diff --git a/packages/vuetify/src/components/VDataTable/composables/sort.ts b/packages/vuetify/src/components/VDataTable/composables/sort.ts index f82d96bc659..03d595370af 100644 --- a/packages/vuetify/src/components/VDataTable/composables/sort.ts +++ b/packages/vuetify/src/components/VDataTable/composables/sort.ts @@ -3,8 +3,8 @@ import { useLocale } from '@/composables' import { useProxiedModel } from '@/composables/proxiedModel' // Utilities -import { computed, inject, provide, toRef } from 'vue' -import { getObjectValueByPath, isEmpty, propsFactory } from '@/util' +import { computed, inject, provide, toRef, watch } from 'vue' +import { getCurrentInstance, getObjectValueByPath, isEmpty, propsFactory } from '@/util' // Types import type { InjectionKey, PropType, Ref } from 'vue' @@ -101,6 +101,7 @@ export function useSortedItems > ( sortFunctions?: Ref | undefined>, sortRawFunctions?: Ref | undefined>, ) { + const vm = getCurrentInstance('userSortedItems') const locale = useLocale() const sortedItems = computed(() => { if (!sortBy.value.length) return items.value @@ -111,6 +112,10 @@ export function useSortedItems > ( }, sortRawFunctions?.value) }) + watch(sortedItems, val => { + vm.emit('update:sortedItems', val) + }) + return { sortedItems } } diff --git a/packages/vuetify/src/composables/filter.ts b/packages/vuetify/src/composables/filter.ts index 9ba2d6213ea..8996172fe96 100644 --- a/packages/vuetify/src/composables/filter.ts +++ b/packages/vuetify/src/composables/filter.ts @@ -3,7 +3,7 @@ // Utilities import { computed, ref, unref, watchEffect } from 'vue' -import { getPropertyFromItem, propsFactory, wrapInArray } from '@/util' +import { getCurrentInstance, getPropertyFromItem, propsFactory, wrapInArray } from '@/util' // Types import type { PropType, Ref } from 'vue' @@ -139,6 +139,7 @@ export function useFilter ( customKeyFilter?: MaybeRef } ) { + const vm = getCurrentInstance('useFilter'); const filteredItems: Ref = ref([]) const filteredMatches: Ref>> = ref(new Map()) const transformedItems = computed(() => ( @@ -180,6 +181,8 @@ export function useFilter ( }) filteredItems.value = _filteredItems filteredMatches.value = _filteredMatches + + vm.emit("update:filteredItems", filteredItems.value) }) function getMatches (item: T) { From b7ce0e055a601021f9d9034d9e172ee548679091 Mon Sep 17 00:00:00 2001 From: Joel Mandell Date: Tue, 12 Mar 2024 16:32:44 +0100 Subject: [PATCH 02/13] feat(VDataTable): Emit events when sorting/filtering --- .../vuetify/src/components/VDataTable/VDataTable.tsx | 2 ++ .../src/components/VDataTable/composables/sort.ts | 9 +++++++-- packages/vuetify/src/composables/filter.ts | 5 ++++- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx index 9a6d241e0c4..5235216bf9a 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx @@ -121,6 +121,8 @@ export const VDataTable = genericComponent( 'update:groupBy': (value: any) => true, 'update:expanded': (value: any) => true, 'update:currentItems': (value: any) => true, + 'update:sortedItems': (value: any) => true, + 'update:filteredItems': (value: any) => true, }, setup (props, { attrs, slots }) { diff --git a/packages/vuetify/src/components/VDataTable/composables/sort.ts b/packages/vuetify/src/components/VDataTable/composables/sort.ts index f82d96bc659..03d595370af 100644 --- a/packages/vuetify/src/components/VDataTable/composables/sort.ts +++ b/packages/vuetify/src/components/VDataTable/composables/sort.ts @@ -3,8 +3,8 @@ import { useLocale } from '@/composables' import { useProxiedModel } from '@/composables/proxiedModel' // Utilities -import { computed, inject, provide, toRef } from 'vue' -import { getObjectValueByPath, isEmpty, propsFactory } from '@/util' +import { computed, inject, provide, toRef, watch } from 'vue' +import { getCurrentInstance, getObjectValueByPath, isEmpty, propsFactory } from '@/util' // Types import type { InjectionKey, PropType, Ref } from 'vue' @@ -101,6 +101,7 @@ export function useSortedItems > ( sortFunctions?: Ref | undefined>, sortRawFunctions?: Ref | undefined>, ) { + const vm = getCurrentInstance('userSortedItems') const locale = useLocale() const sortedItems = computed(() => { if (!sortBy.value.length) return items.value @@ -111,6 +112,10 @@ export function useSortedItems > ( }, sortRawFunctions?.value) }) + watch(sortedItems, val => { + vm.emit('update:sortedItems', val) + }) + return { sortedItems } } diff --git a/packages/vuetify/src/composables/filter.ts b/packages/vuetify/src/composables/filter.ts index 9ba2d6213ea..8996172fe96 100644 --- a/packages/vuetify/src/composables/filter.ts +++ b/packages/vuetify/src/composables/filter.ts @@ -3,7 +3,7 @@ // Utilities import { computed, ref, unref, watchEffect } from 'vue' -import { getPropertyFromItem, propsFactory, wrapInArray } from '@/util' +import { getCurrentInstance, getPropertyFromItem, propsFactory, wrapInArray } from '@/util' // Types import type { PropType, Ref } from 'vue' @@ -139,6 +139,7 @@ export function useFilter ( customKeyFilter?: MaybeRef } ) { + const vm = getCurrentInstance('useFilter'); const filteredItems: Ref = ref([]) const filteredMatches: Ref>> = ref(new Map()) const transformedItems = computed(() => ( @@ -180,6 +181,8 @@ export function useFilter ( }) filteredItems.value = _filteredItems filteredMatches.value = _filteredMatches + + vm.emit("update:filteredItems", filteredItems.value) }) function getMatches (item: T) { From 39fbf84c943a29dc5f2791b454a36edef2548124 Mon Sep 17 00:00:00 2001 From: Joel Mandell Date: Tue, 2 Apr 2024 20:30:14 +0200 Subject: [PATCH 03/13] fix linting issues --- packages/vuetify/src/composables/filter.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vuetify/src/composables/filter.ts b/packages/vuetify/src/composables/filter.ts index 8996172fe96..05af17f0b2c 100644 --- a/packages/vuetify/src/composables/filter.ts +++ b/packages/vuetify/src/composables/filter.ts @@ -139,7 +139,7 @@ export function useFilter ( customKeyFilter?: MaybeRef } ) { - const vm = getCurrentInstance('useFilter'); + const vm = getCurrentInstance('useFilter') const filteredItems: Ref = ref([]) const filteredMatches: Ref>> = ref(new Map()) const transformedItems = computed(() => ( @@ -182,7 +182,7 @@ export function useFilter ( filteredItems.value = _filteredItems filteredMatches.value = _filteredMatches - vm.emit("update:filteredItems", filteredItems.value) + vm.emit('update:filteredItems', filteredItems.value) }) function getMatches (item: T) { From 97b8feb9e600a71b1479dcaa4050e5abe04cd7bf Mon Sep 17 00:00:00 2001 From: Joel Mandell Date: Tue, 2 Apr 2024 21:23:26 +0200 Subject: [PATCH 04/13] (fix: VDataTable): failing tests for useFilter composable. --- .../src/composables/__tests__/filter.spec.ts | 16 +++++++++++----- packages/vuetify/src/util/withSetup.ts | 18 ++++++++++++++++++ 2 files changed, 29 insertions(+), 5 deletions(-) create mode 100644 packages/vuetify/src/util/withSetup.ts diff --git a/packages/vuetify/src/composables/__tests__/filter.spec.ts b/packages/vuetify/src/composables/__tests__/filter.spec.ts index 4a458bb4480..c475a3e6b47 100644 --- a/packages/vuetify/src/composables/__tests__/filter.spec.ts +++ b/packages/vuetify/src/composables/__tests__/filter.spec.ts @@ -4,9 +4,13 @@ import { transformItem, transformItems } from '../list-items' // Utilities import { describe, expect, it } from '@jest/globals' -import { nextTick, ref } from 'vue' +import { createApp, nextTick, ref } from 'vue' +import { withSetup } from '../../util/withSetup' import { deepEqual } from '@/util' +// Types +import type { App } from 'vue' + const itemProps = { itemTitle: 'title', itemValue: 'value', @@ -132,9 +136,8 @@ describe('filter', () => { ['14', 1], ['foo', 0], ])('should return an array of filtered items from value %s', (text: any, expected: number) => { - const { filteredItems } = useFilter({}, ref(transformItems(itemProps, items)), ref(text)) - - expect(filteredItems.value).toHaveLength(expected) + const [result] = withSetup(() => useFilter({}, ref(transformItems(itemProps, items)), ref(text))) + expect((result as any)?.filteredItems?.value).toHaveLength(expected) }) it('should accept a custom filter function', async () => { @@ -150,7 +153,10 @@ describe('filter', () => { { title: 'fizz' }, { title: 'buzz' }, ])) - const { filteredItems } = useFilter(props, items, query) + + const [result] = withSetup(() => useFilter(props, items, query)) + + const filteredItems = (result as any)?.filteredItems expect(filteredItems.value.map(item => item.raw.title)).toEqual(['fizz', 'buzz']) diff --git a/packages/vuetify/src/util/withSetup.ts b/packages/vuetify/src/util/withSetup.ts new file mode 100644 index 00000000000..20f21fbbe60 --- /dev/null +++ b/packages/vuetify/src/util/withSetup.ts @@ -0,0 +1,18 @@ +/* From vuejs.org docs: https://vuejs.org/guide/scaling-up/testing.html#testing-composables */ +// Utilities +import { createApp } from 'vue' + +export function withSetup (composable: any) { + let result + const app = createApp({ + setup () { + result = composable() + // suppress missing template warning + return () => { } + }, + }) + app.mount(document.createElement('div')) + // return the result and the app instance + // for testing provide/unmount + return [result, app] +} From eb9e25689888ba2c71753902064759010e4ff1a6 Mon Sep 17 00:00:00 2001 From: Joel Mandell Date: Tue, 2 Apr 2024 21:43:08 +0200 Subject: [PATCH 05/13] fix(VDataTable): unit test for filter composable. * Added api-doc --- packages/api-generator/src/locale/en/VDataTable.json | 4 +++- .../vuetify/src/composables/__tests__/filter.spec.ts | 11 ++++------- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/api-generator/src/locale/en/VDataTable.json b/packages/api-generator/src/locale/en/VDataTable.json index 22501b3e7c3..74b8d819a02 100644 --- a/packages/api-generator/src/locale/en/VDataTable.json +++ b/packages/api-generator/src/locale/en/VDataTable.json @@ -73,6 +73,7 @@ "pagination": "Emits when something changed to the `pagination` which can be provided via the `pagination` prop.", "toggleSelectAll": "Emits when the `select-all` checkbox in table header is clicked. This checkbox is enabled by the **show-select** prop.", "update:expanded": "Emits when the **expanded** property of the **options** prop is updated.", + "update:filteredItems": "Emits i.e. when **searching** and return the filtered items.", "update:groupBy": "Emits when the **group-by** property of the **options** property is updated.", "update:groupDesc": "Emits when the **group-desc** property of the **options** prop is updated.", "update:itemsPerPage": "Emits when the **items-per-page** property of the **options** prop is updated.", @@ -82,6 +83,7 @@ "update:options": "Emits when one of the **options** properties is updated.", "update:page": "Emits when the **page** property of the **options** prop is updated.", "update:sortBy": "Emits when the **sortBy** property of the **options** prop is updated.", - "update:sortDesc": "Emits when the **sort-desc** property of the **options** prop is updated." + "update:sortDesc": "Emits when the **sort-desc** property of the **options** prop is updated.", + "update:sortedItems": "Emits when **sorting** and return items according to its current sorting." } } diff --git a/packages/vuetify/src/composables/__tests__/filter.spec.ts b/packages/vuetify/src/composables/__tests__/filter.spec.ts index c475a3e6b47..b71d6f82e85 100644 --- a/packages/vuetify/src/composables/__tests__/filter.spec.ts +++ b/packages/vuetify/src/composables/__tests__/filter.spec.ts @@ -4,13 +4,10 @@ import { transformItem, transformItems } from '../list-items' // Utilities import { describe, expect, it } from '@jest/globals' -import { createApp, nextTick, ref } from 'vue' +import { nextTick, ref } from 'vue' import { withSetup } from '../../util/withSetup' import { deepEqual } from '@/util' -// Types -import type { App } from 'vue' - const itemProps = { itemTitle: 'title', itemValue: 'value', @@ -158,17 +155,17 @@ describe('filter', () => { const filteredItems = (result as any)?.filteredItems - expect(filteredItems.value.map(item => item.raw.title)).toEqual(['fizz', 'buzz']) + expect(filteredItems.value.map((item: any) => item.raw.title)).toEqual(['fizz', 'buzz']) query.value = 'foo' await nextTick() - expect(filteredItems.value.map(item => item.raw.title)).toEqual(['foo']) + expect(filteredItems.value.map((item: any) => item.raw.title)).toEqual(['foo']) items.value.push(transformItem(itemProps, { title: 'foobar' })) await nextTick() - expect(filteredItems.value.map(item => item.raw.title)).toEqual(['foo', 'foobar']) + expect(filteredItems.value.map((item: any) => item.raw.title)).toEqual(['foo', 'foobar']) }) }) }) From 6e8a690cb1a7b2a364ce844ca7f34289d93e5d60 Mon Sep 17 00:00:00 2001 From: Joel Mandell Date: Tue, 12 Mar 2024 16:32:44 +0100 Subject: [PATCH 06/13] feat(VDataTable): Emit events when sorting/filtering --- .../vuetify/src/components/VDataTable/VDataTable.tsx | 2 ++ .../src/components/VDataTable/composables/sort.ts | 9 +++++++-- packages/vuetify/src/composables/filter.ts | 5 ++++- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/VDataTable.tsx b/packages/vuetify/src/components/VDataTable/VDataTable.tsx index b2b4fd0d4f6..7b26260bb34 100644 --- a/packages/vuetify/src/components/VDataTable/VDataTable.tsx +++ b/packages/vuetify/src/components/VDataTable/VDataTable.tsx @@ -121,6 +121,8 @@ export const VDataTable = genericComponent( 'update:groupBy': (value: any) => true, 'update:expanded': (value: any) => true, 'update:currentItems': (value: any) => true, + 'update:sortedItems': (value: any) => true, + 'update:filteredItems': (value: any) => true, }, setup (props, { attrs, slots }) { diff --git a/packages/vuetify/src/components/VDataTable/composables/sort.ts b/packages/vuetify/src/components/VDataTable/composables/sort.ts index 7c1b80e225c..1b960fdc426 100644 --- a/packages/vuetify/src/components/VDataTable/composables/sort.ts +++ b/packages/vuetify/src/components/VDataTable/composables/sort.ts @@ -3,8 +3,8 @@ import { useLocale } from '@/composables' import { useProxiedModel } from '@/composables/proxiedModel' // Utilities -import { computed, inject, provide, toRef } from 'vue' -import { isEmpty, propsFactory } from '@/util' +import { computed, inject, provide, toRef, watch } from 'vue' +import { getCurrentInstance, getObjectValueByPath, isEmpty, propsFactory } from '@/util' // Types import type { InjectionKey, PropType, Ref } from 'vue' @@ -105,6 +105,7 @@ export function useSortedItems ( sortRawFunctions?: Ref | undefined> }, ) { + const vm = getCurrentInstance('userSortedItems') const locale = useLocale() const sortedItems = computed(() => { if (!sortBy.value.length) return items.value @@ -119,6 +120,10 @@ export function useSortedItems ( }) }) + watch(sortedItems, val => { + vm.emit('update:sortedItems', val) + }) + return { sortedItems } } diff --git a/packages/vuetify/src/composables/filter.ts b/packages/vuetify/src/composables/filter.ts index 9ba2d6213ea..8996172fe96 100644 --- a/packages/vuetify/src/composables/filter.ts +++ b/packages/vuetify/src/composables/filter.ts @@ -3,7 +3,7 @@ // Utilities import { computed, ref, unref, watchEffect } from 'vue' -import { getPropertyFromItem, propsFactory, wrapInArray } from '@/util' +import { getCurrentInstance, getPropertyFromItem, propsFactory, wrapInArray } from '@/util' // Types import type { PropType, Ref } from 'vue' @@ -139,6 +139,7 @@ export function useFilter ( customKeyFilter?: MaybeRef } ) { + const vm = getCurrentInstance('useFilter'); const filteredItems: Ref = ref([]) const filteredMatches: Ref>> = ref(new Map()) const transformedItems = computed(() => ( @@ -180,6 +181,8 @@ export function useFilter ( }) filteredItems.value = _filteredItems filteredMatches.value = _filteredMatches + + vm.emit("update:filteredItems", filteredItems.value) }) function getMatches (item: T) { From 474bb36d7f815fa19b2c17669a68869443a19d5b Mon Sep 17 00:00:00 2001 From: Joel Mandell Date: Tue, 12 Mar 2024 16:32:44 +0100 Subject: [PATCH 07/13] feat(VDataTable): Emit events when sorting/filtering --- .../vuetify/src/components/VDataTable/composables/sort.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/vuetify/src/components/VDataTable/composables/sort.ts b/packages/vuetify/src/components/VDataTable/composables/sort.ts index 1b960fdc426..195329b0374 100644 --- a/packages/vuetify/src/components/VDataTable/composables/sort.ts +++ b/packages/vuetify/src/components/VDataTable/composables/sort.ts @@ -124,6 +124,10 @@ export function useSortedItems ( vm.emit('update:sortedItems', val) }) + watch(sortedItems, val => { + vm.emit('update:sortedItems', val) + }) + return { sortedItems } } From 4d425418d1dd04ab4f3f2f4c2cceaa6735c6f1e1 Mon Sep 17 00:00:00 2001 From: Joel Mandell Date: Tue, 2 Apr 2024 20:30:14 +0200 Subject: [PATCH 08/13] fix linting issues --- packages/vuetify/src/composables/filter.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vuetify/src/composables/filter.ts b/packages/vuetify/src/composables/filter.ts index 8996172fe96..05af17f0b2c 100644 --- a/packages/vuetify/src/composables/filter.ts +++ b/packages/vuetify/src/composables/filter.ts @@ -139,7 +139,7 @@ export function useFilter ( customKeyFilter?: MaybeRef } ) { - const vm = getCurrentInstance('useFilter'); + const vm = getCurrentInstance('useFilter') const filteredItems: Ref = ref([]) const filteredMatches: Ref>> = ref(new Map()) const transformedItems = computed(() => ( @@ -182,7 +182,7 @@ export function useFilter ( filteredItems.value = _filteredItems filteredMatches.value = _filteredMatches - vm.emit("update:filteredItems", filteredItems.value) + vm.emit('update:filteredItems', filteredItems.value) }) function getMatches (item: T) { From a26a5ce13eeb43848248b266ba648fd236561ebf Mon Sep 17 00:00:00 2001 From: Joel Mandell Date: Tue, 2 Apr 2024 21:23:26 +0200 Subject: [PATCH 09/13] (fix: VDataTable): failing tests for useFilter composable. --- .../src/composables/__tests__/filter.spec.ts | 16 +++++++++++----- packages/vuetify/src/util/withSetup.ts | 18 ++++++++++++++++++ 2 files changed, 29 insertions(+), 5 deletions(-) create mode 100644 packages/vuetify/src/util/withSetup.ts diff --git a/packages/vuetify/src/composables/__tests__/filter.spec.ts b/packages/vuetify/src/composables/__tests__/filter.spec.ts index 4a458bb4480..c475a3e6b47 100644 --- a/packages/vuetify/src/composables/__tests__/filter.spec.ts +++ b/packages/vuetify/src/composables/__tests__/filter.spec.ts @@ -4,9 +4,13 @@ import { transformItem, transformItems } from '../list-items' // Utilities import { describe, expect, it } from '@jest/globals' -import { nextTick, ref } from 'vue' +import { createApp, nextTick, ref } from 'vue' +import { withSetup } from '../../util/withSetup' import { deepEqual } from '@/util' +// Types +import type { App } from 'vue' + const itemProps = { itemTitle: 'title', itemValue: 'value', @@ -132,9 +136,8 @@ describe('filter', () => { ['14', 1], ['foo', 0], ])('should return an array of filtered items from value %s', (text: any, expected: number) => { - const { filteredItems } = useFilter({}, ref(transformItems(itemProps, items)), ref(text)) - - expect(filteredItems.value).toHaveLength(expected) + const [result] = withSetup(() => useFilter({}, ref(transformItems(itemProps, items)), ref(text))) + expect((result as any)?.filteredItems?.value).toHaveLength(expected) }) it('should accept a custom filter function', async () => { @@ -150,7 +153,10 @@ describe('filter', () => { { title: 'fizz' }, { title: 'buzz' }, ])) - const { filteredItems } = useFilter(props, items, query) + + const [result] = withSetup(() => useFilter(props, items, query)) + + const filteredItems = (result as any)?.filteredItems expect(filteredItems.value.map(item => item.raw.title)).toEqual(['fizz', 'buzz']) diff --git a/packages/vuetify/src/util/withSetup.ts b/packages/vuetify/src/util/withSetup.ts new file mode 100644 index 00000000000..20f21fbbe60 --- /dev/null +++ b/packages/vuetify/src/util/withSetup.ts @@ -0,0 +1,18 @@ +/* From vuejs.org docs: https://vuejs.org/guide/scaling-up/testing.html#testing-composables */ +// Utilities +import { createApp } from 'vue' + +export function withSetup (composable: any) { + let result + const app = createApp({ + setup () { + result = composable() + // suppress missing template warning + return () => { } + }, + }) + app.mount(document.createElement('div')) + // return the result and the app instance + // for testing provide/unmount + return [result, app] +} From b2f5b56a8bbd8f6074dc849a75aac8fd6817b570 Mon Sep 17 00:00:00 2001 From: Joel Mandell Date: Tue, 2 Apr 2024 21:43:08 +0200 Subject: [PATCH 10/13] fix(VDataTable): unit test for filter composable. * Added api-doc --- packages/api-generator/src/locale/en/VDataTable.json | 4 +++- .../vuetify/src/composables/__tests__/filter.spec.ts | 11 ++++------- 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/packages/api-generator/src/locale/en/VDataTable.json b/packages/api-generator/src/locale/en/VDataTable.json index 96c8ef0c5db..a1c8e515de3 100644 --- a/packages/api-generator/src/locale/en/VDataTable.json +++ b/packages/api-generator/src/locale/en/VDataTable.json @@ -72,6 +72,7 @@ "pagination": "Emits when something changed to the `pagination` which can be provided via the `pagination` prop.", "toggleSelectAll": "Emits when the `select-all` checkbox in table header is clicked. This checkbox is enabled by the **show-select** prop.", "update:expanded": "Emits when the **expanded** property of the **options** prop is updated.", + "update:filteredItems": "Emits i.e. when **searching** and return the filtered items.", "update:groupBy": "Emits when the **group-by** property of the **options** property is updated.", "update:groupDesc": "Emits when the **group-desc** property of the **options** prop is updated.", "update:itemsPerPage": "Emits when the **items-per-page** property of the **options** prop is updated.", @@ -81,6 +82,7 @@ "update:options": "Emits when one of the **options** properties is updated.", "update:page": "Emits when the **page** property of the **options** prop is updated.", "update:sortBy": "Emits when the **sortBy** property of the **options** prop is updated.", - "update:sortDesc": "Emits when the **sort-desc** property of the **options** prop is updated." + "update:sortDesc": "Emits when the **sort-desc** property of the **options** prop is updated.", + "update:sortedItems": "Emits when **sorting** and return items according to its current sorting." } } diff --git a/packages/vuetify/src/composables/__tests__/filter.spec.ts b/packages/vuetify/src/composables/__tests__/filter.spec.ts index c475a3e6b47..b71d6f82e85 100644 --- a/packages/vuetify/src/composables/__tests__/filter.spec.ts +++ b/packages/vuetify/src/composables/__tests__/filter.spec.ts @@ -4,13 +4,10 @@ import { transformItem, transformItems } from '../list-items' // Utilities import { describe, expect, it } from '@jest/globals' -import { createApp, nextTick, ref } from 'vue' +import { nextTick, ref } from 'vue' import { withSetup } from '../../util/withSetup' import { deepEqual } from '@/util' -// Types -import type { App } from 'vue' - const itemProps = { itemTitle: 'title', itemValue: 'value', @@ -158,17 +155,17 @@ describe('filter', () => { const filteredItems = (result as any)?.filteredItems - expect(filteredItems.value.map(item => item.raw.title)).toEqual(['fizz', 'buzz']) + expect(filteredItems.value.map((item: any) => item.raw.title)).toEqual(['fizz', 'buzz']) query.value = 'foo' await nextTick() - expect(filteredItems.value.map(item => item.raw.title)).toEqual(['foo']) + expect(filteredItems.value.map((item: any) => item.raw.title)).toEqual(['foo']) items.value.push(transformItem(itemProps, { title: 'foobar' })) await nextTick() - expect(filteredItems.value.map(item => item.raw.title)).toEqual(['foo', 'foobar']) + expect(filteredItems.value.map((item: any) => item.raw.title)).toEqual(['foo', 'foobar']) }) }) }) From 5bf16a5b159877becbf76312323cce4cb516f76f Mon Sep 17 00:00:00 2001 From: Joel Mandell Date: Tue, 30 Apr 2024 22:12:16 +0200 Subject: [PATCH 11/13] remove duplicated watchers. --- .../vuetify/src/components/VDataTable/composables/sort.ts | 7 ------- 1 file changed, 7 deletions(-) diff --git a/packages/vuetify/src/components/VDataTable/composables/sort.ts b/packages/vuetify/src/components/VDataTable/composables/sort.ts index 154327c65a5..34d22f4eeb7 100644 --- a/packages/vuetify/src/components/VDataTable/composables/sort.ts +++ b/packages/vuetify/src/components/VDataTable/composables/sort.ts @@ -124,13 +124,6 @@ export function useSortedItems ( vm.emit('update:sortedItems', val) }) - watch(sortedItems, val => { - vm.emit('update:sortedItems', val) - }) - - watch(sortedItems, val => { - vm.emit('update:sortedItems', val) - }) return { sortedItems } } From 5d172306a7098534630dcbcd22e9b97c71d273ef Mon Sep 17 00:00:00 2001 From: Joel Mandell Date: Tue, 30 Apr 2024 22:16:43 +0200 Subject: [PATCH 12/13] remove unused import. --- packages/vuetify/src/components/VDataTable/composables/sort.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vuetify/src/components/VDataTable/composables/sort.ts b/packages/vuetify/src/components/VDataTable/composables/sort.ts index 34d22f4eeb7..e8806ca1125 100644 --- a/packages/vuetify/src/components/VDataTable/composables/sort.ts +++ b/packages/vuetify/src/components/VDataTable/composables/sort.ts @@ -4,7 +4,7 @@ import { useProxiedModel } from '@/composables/proxiedModel' // Utilities import { computed, inject, provide, toRef, watch } from 'vue' -import { getCurrentInstance, getObjectValueByPath, isEmpty, propsFactory } from '@/util' +import { getCurrentInstance, isEmpty, propsFactory } from '@/util' // Types import type { InjectionKey, PropType, Ref } from 'vue' From 0df5ab20e64528f41dedfb8d0c824e54ca8b13b1 Mon Sep 17 00:00:00 2001 From: Joel Mandell Date: Tue, 30 Apr 2024 22:24:22 +0200 Subject: [PATCH 13/13] fix error lint --- packages/vuetify/src/components/VDataTable/composables/sort.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/vuetify/src/components/VDataTable/composables/sort.ts b/packages/vuetify/src/components/VDataTable/composables/sort.ts index e8806ca1125..48ada696820 100644 --- a/packages/vuetify/src/components/VDataTable/composables/sort.ts +++ b/packages/vuetify/src/components/VDataTable/composables/sort.ts @@ -124,7 +124,6 @@ export function useSortedItems ( vm.emit('update:sortedItems', val) }) - return { sortedItems } }