use find filter

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "axp-ui",
 	"descriiption": "My helper ui lib",
-	"version": "1.8.7",
+	"version": "1.9.0",
 	"homepage": "https://antoxahub.ru/antoxa/axp-ui",
 	"repository": {
 		"type": "git",

src/components/Pagination.vue

@@ -23,8 +23,6 @@ import { Pagination } from 'axp-ts'
 
 // Props.
 const props = withDefaults(defineProps<TUiPaginationProps>(), {
-	// @ts-ignore
-	modelValue: new Pagination().toObject(),
 	length: 3
 })
 
@@ -32,7 +30,7 @@ const props = withDefaults(defineProps<TUiPaginationProps>(), {
 const emit = defineEmits<TUiPaginationEmits>()
 
 // Data.
-const page = computed(() => props.modelValue.page || 1)
+const page = computed(() => props.modelValue?.page || 1)
 const pages = computed(() => {
 	let pages: TUiPaginationPage[] = []
 
@@ -53,7 +51,7 @@ const pages = computed(() => {
 	// Next pages.
 	for (let i = 1; i <= length; i++) {
 		const value = page.value + i
-		if (value > (props.modelValue.pages || 0)) break
+		if (value > (props.modelValue?.pages || 0)) break
 		pages.push({ value })
 	}
 	// for(page in props.modelValue)
@@ -70,13 +68,13 @@ const updateHandler = (page: number) => {
 const isShowFirst = computed(() => page.value - props.length > 0)
 const isShowLast = computed(
 	() =>
-		props.modelValue.pages &&
+		props.modelValue?.pages &&
 		page.value + props.length < props.modelValue.pages
 )
 </script>
 
 <template>
-	<div v-if="props.modelValue.pages" class="ui-pagination">
+	<div v-if="props.modelValue" class="ui-pagination">
 		<div class="pages">
 			<div v-if="isShowFirst" class="pages-first">
 				<UiBtn

src/hooks/find-filter.ts

@@ -1,3 +1,91 @@
-export const useFindFilter = async () => {
+import type { TQuery, TFindFilter } from 'axp-ts'
-	return {}
+
+import { ref, watch, toRaw } from 'vue'
+import { Pagination, FindFilter } from 'axp-ts'
+
+export type TUseFindFilterParams<T extends TQuery> = {
+	query: T
+	saveName?: string
+}
+
+const setQuery = <T extends TQuery>(name: string, query: T) => {
+	try {
+		localStorage.setItem('query_' + name, JSON.stringify(query))
+	} catch (e) {}
+}
+
+const getQuery = <T extends TQuery>(name: string): T | undefined => {
+	try {
+		const saveQueryStr = localStorage.getItem('query_' + name)
+		if (saveQueryStr) return JSON.parse(saveQueryStr)
+	} catch (e) {}
+}
+
+export const useFindFilter = <T extends TQuery>(
+	params: TUseFindFilterParams<T>
+) => {
+	// Check save query.
+	if (params.saveName) {
+		const saveQuery = getQuery<T>(params.saveName)
+		if (saveQuery) {
+			params.query = saveQuery
+		} else {
+			setQuery(params.saveName, params.query)
+		}
+	}
+
+	// Init data.
+	const filter = ref(new FindFilter<T>(params.query).toObject())
+	const pagination = ref(new Pagination(params.query).toObject())
+
+	// Hooks.
+	let refreshHooks: (() => void | Promise<void>)[] = []
+	const refresh = (fn: () => void | Promise<void>) => refreshHooks.push(fn)
+	const runRefreshHooks = async () => {
+		// Save query.
+		if (params.saveName) {
+			const query = FindFilter.getQuery(filter.value as TFindFilter<T>)
+			setQuery(params.saveName, query)
+		}
+		// Run.
+		for (const fn of refreshHooks) {
+			await fn()
+		}
+	}
+
+	// Watch filter obj.
+	watch(
+		() => filter.value.obj,
+		async _ => {
+			pagination.value.page = 1
+			if (filter.value.pagination?.page === 1) {
+				await runRefreshHooks()
+			}
+		},
+		{ deep: true }
+	)
+
+	// Watch pagination.
+	watch(
+		pagination,
+		async val => {
+			if (filter.value.pagination) {
+				const { page, limit } = toRaw(val)
+				if (limit !== filter.value.pagination.limit) {
+					filter.value.pagination = { page: 1, limit }
+					await runRefreshHooks()
+				} else {
+					if (page !== filter.value.pagination.page) {
+						filter.value.pagination.page = page
+						await runRefreshHooks()
+					}
+				}
+			}
+
+		},
+		{ deep: true }
+	)
+
+	// Result.
+	return { filter, pagination, refresh }
 }

src/stories/Pagination.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { UiPagination, useFindFilter } from '..'
+
+// Init data.
+const { pagination } = useFindFilter({
+	query: { page: 2, q: 'test' }
+})
+pagination.value.total = 100
+pagination.value.pages = 10
+
+
+// Meta.
+const meta = {
+	title: 'Example/Pagination',
+	component: UiPagination,
+	tags: ['autodocs']
+} satisfies Meta<typeof UiPagination>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+	args: {
+		modelValue: pagination.value
+	},
+	render: _ => ({
+		components: { UiPagination },
+		setup() {
+			return { pagination }
+		},
+		template: `<UiPagination v-model="pagination" />`
+	})
+}