+
{{ props.label }}
{{ props.url }}
-
+
diff --git a/components/layout/Root.vue b/components/layout/Root.vue
index a542db2..240b40e 100644
--- a/components/layout/Root.vue
+++ b/components/layout/Root.vue
@@ -14,9 +14,11 @@ const { panSize } = storeToRefs(sidebar)
-
-
+
+
+
+
diff --git a/pages/index.vue b/pages/index.vue
index 96e2f9e..155ab43 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,5 +3,7 @@
-
+
+ home page
+
diff --git a/ui/icon/Button.vue b/ui/icon/Button.vue
index af6299c..e3cfd44 100644
--- a/ui/icon/Button.vue
+++ b/ui/icon/Button.vue
@@ -12,6 +12,6 @@ defineOptions({
diff --git a/unocss.config.ts b/unocss.config.ts
index cb86c19..5e3f6d0 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -17,6 +17,7 @@ export default defineConfig({
['POST', 'inline-block text-yellow-400'],
['PUT', 'inline-block text-cyan-400'],
['DELETE', 'inline-block text-rose-500'],
+ ['icon-hover', 'hover:bg-black hover:bg-op-4 dark:hover:bg-white dark:hover:bg-op-10 rounded'],
],
presets: [
presetUno(),
From 5215bb1e5c39a65a7e12edb54153dd978f4581f7 Mon Sep 17 00:00:00 2001
From: elonehoo
Date: Fri, 22 Dec 2023 11:51:36 +0800
Subject: [PATCH 08/12] fix: rename header sfc file name
---
components/header/{header.vue => Header.vue} | 0
1 file changed, 0 insertions(+), 0 deletions(-)
rename components/header/{header.vue => Header.vue} (100%)
diff --git a/components/header/header.vue b/components/header/Header.vue
similarity index 100%
rename from components/header/header.vue
rename to components/header/Header.vue
From 5e0f7e49e2e8625332313353678812679f67e1af Mon Sep 17 00:00:00 2001
From: elonehoo
Date: Fri, 22 Dec 2023 11:52:08 +0800
Subject: [PATCH 09/12] fix: rename tag sfc file name
---
components/header/tag/{tag.vue => Tag.vue} | 0
1 file changed, 0 insertions(+), 0 deletions(-)
rename components/header/tag/{tag.vue => Tag.vue} (100%)
diff --git a/components/header/tag/tag.vue b/components/header/tag/Tag.vue
similarity index 100%
rename from components/header/tag/tag.vue
rename to components/header/tag/Tag.vue
From 0d02460c4acad7a8ebec21169baa7fec2a50c15c Mon Sep 17 00:00:00 2001
From: elonehoo
Date: Sun, 24 Dec 2023 18:26:14 +0800
Subject: [PATCH 10/12] feat: add Label component
---
components/header/Header.vue | 12 ++++++++----
components/header/tag/Tag.vue | 6 +++---
ui/Label/Label.vue | 19 +++++++++++++++++++
3 files changed, 30 insertions(+), 7 deletions(-)
create mode 100644 ui/Label/Label.vue
diff --git a/components/header/Header.vue b/components/header/Header.vue
index 1995086..431dc8c 100644
--- a/components/header/Header.vue
+++ b/components/header/Header.vue
@@ -19,11 +19,15 @@ const { show } = storeToRefs(sidebar)
-
+
-
-
-
+
+
+
diff --git a/components/header/tag/Tag.vue b/components/header/tag/Tag.vue
index c65cf05..9e467ac 100644
--- a/components/header/tag/Tag.vue
+++ b/components/header/tag/Tag.vue
@@ -6,9 +6,9 @@ const props = defineProps<{
-
-
{{ props.label }}
-
{{ props.url }}
+
+
+
diff --git a/ui/Label/Label.vue b/ui/Label/Label.vue
new file mode 100644
index 0000000..95b1d97
--- /dev/null
+++ b/ui/Label/Label.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
From 580d6bfbb99fb0ae98d1bda2c450b3e7a4ca3701 Mon Sep 17 00:00:00 2001
From: elonehoo
Date: Mon, 25 Dec 2023 13:09:42 +0800
Subject: [PATCH 11/12] feat: add router composables
---
composables/useRouteHash.ts | 61 +++++
composables/useRouteParams.ts | 103 +++++++++
composables/useRouteQuery.ts | 100 ++++++++
types/router.ts | 32 +++
vitest/composables/useRouteHash.test.ts | 91 ++++++++
vitest/composables/useRouteParams.test.ts | 246 ++++++++++++++++++++
vitest/composables/useRouteQuery.test.ts | 266 ++++++++++++++++++++++
7 files changed, 899 insertions(+)
create mode 100644 composables/useRouteHash.ts
create mode 100644 composables/useRouteParams.ts
create mode 100644 composables/useRouteQuery.ts
create mode 100644 types/router.ts
create mode 100644 vitest/composables/useRouteHash.test.ts
create mode 100644 vitest/composables/useRouteParams.test.ts
create mode 100644 vitest/composables/useRouteQuery.test.ts
diff --git a/composables/useRouteHash.ts b/composables/useRouteHash.ts
new file mode 100644
index 0000000..9712d4e
--- /dev/null
+++ b/composables/useRouteHash.ts
@@ -0,0 +1,61 @@
+import { customRef, nextTick, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { toValue, tryOnScopeDispose } from '@vueuse/shared'
+import type { MaybeRefOrGetter } from '@vueuse/shared'
+import type { ReactiveRouteOptions, RouteHashValueRaw } from '~/types/router'
+
+let _hash: RouteHashValueRaw
+
+export function useRouteHash(
+ defaultValue?: MaybeRefOrGetter,
+ {
+ mode = 'replace',
+ route = useRoute(),
+ router = useRouter(),
+ }: ReactiveRouteOptions = {},
+) {
+ _hash = route.hash
+
+ tryOnScopeDispose(() => {
+ _hash = undefined
+ })
+
+ let _trigger: () => void
+
+ const proxy = customRef((track, trigger) => {
+ _trigger = trigger
+
+ return {
+ get() {
+ track()
+
+ return _hash || toValue(defaultValue)
+ },
+ set(v) {
+ if (v === _hash)
+ return
+
+ _hash = v === null ? undefined : v
+
+ trigger()
+
+ nextTick(() => {
+ const { params, query } = route
+
+ router[toValue(mode)]({ params, query, hash: _hash as string })
+ })
+ },
+ }
+ })
+
+ watch(
+ () => route.hash,
+ () => {
+ _hash = route.hash
+ _trigger()
+ },
+ { flush: 'sync' },
+ )
+
+ return proxy
+}
diff --git a/composables/useRouteParams.ts b/composables/useRouteParams.ts
new file mode 100644
index 0000000..b4d67bd
--- /dev/null
+++ b/composables/useRouteParams.ts
@@ -0,0 +1,103 @@
+import { customRef, nextTick, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { toValue, tryOnScopeDispose } from '@vueuse/shared'
+import type { Ref } from 'vue'
+import type { MaybeRefOrGetter } from '@vueuse/shared'
+import type { LocationAsRelativeRaw, RouteParamValueRaw, Router } from 'vue-router'
+import type { ReactiveRouteOptionsWithTransform } from '~/types/router'
+
+const _queue = new WeakMap>()
+
+export function useRouteParams(
+ name: string
+): Ref
+
+export function useRouteParams<
+ T extends RouteParamValueRaw = RouteParamValueRaw,
+ K = T,
+>(
+ name: string,
+ defaultValue?: MaybeRefOrGetter,
+ options?: ReactiveRouteOptionsWithTransform
+): Ref
+
+export function useRouteParams<
+ T extends RouteParamValueRaw = RouteParamValueRaw,
+ K = T,
+>(
+ name: string,
+ defaultValue?: MaybeRefOrGetter,
+ options: ReactiveRouteOptionsWithTransform = {},
+): Ref {
+ const {
+ mode = 'replace',
+ route = useRoute(),
+ router = useRouter(),
+ transform = value => value as any as K,
+ } = options
+
+ if (!_queue.has(router))
+ _queue.set(router, new Map())
+
+ const _paramsQueue = _queue.get(router)!
+
+ let param = route.params[name] as any
+
+ tryOnScopeDispose(() => {
+ param = undefined
+ })
+
+ let _trigger: () => void
+
+ const proxy = customRef((track, trigger) => {
+ _trigger = trigger
+
+ return {
+ get() {
+ track()
+
+ return transform(param !== undefined ? param : toValue(defaultValue))
+ },
+ set(v) {
+ if (param === v)
+ return
+
+ param = v
+ _paramsQueue.set(name, v)
+
+ trigger()
+
+ nextTick(() => {
+ if (_paramsQueue.size === 0)
+ return
+
+ const newParams = Object.fromEntries(_paramsQueue.entries())
+ _paramsQueue.clear()
+
+ const { params, query, hash } = route
+
+ router[toValue(mode)]({
+ params: {
+ ...params,
+ ...newParams,
+ },
+ query,
+ hash,
+ } as LocationAsRelativeRaw)
+ })
+ },
+ }
+ })
+
+ watch(
+ () => route.params[name],
+ (v) => {
+ param = v
+
+ _trigger()
+ },
+ { flush: 'sync' },
+ )
+
+ return proxy as Ref
+}
diff --git a/composables/useRouteQuery.ts b/composables/useRouteQuery.ts
new file mode 100644
index 0000000..0a7240f
--- /dev/null
+++ b/composables/useRouteQuery.ts
@@ -0,0 +1,100 @@
+import { customRef, nextTick, watch } from 'vue'
+import { toValue, tryOnScopeDispose } from '@vueuse/shared'
+import { useRoute, useRouter } from 'vue-router'
+import type { Router } from 'vue-router'
+import type { Ref } from 'vue'
+import type { MaybeRefOrGetter } from '@vueuse/shared'
+import type { ReactiveRouteOptionsWithTransform, RouteQueryValueRaw } from '~/types/router'
+
+const _queue = new WeakMap>()
+
+export function useRouteQuery(
+ name: string
+): Ref
+
+export function useRouteQuery<
+ T extends RouteQueryValueRaw = RouteQueryValueRaw,
+ K = T,
+>(
+ name: string,
+ defaultValue?: MaybeRefOrGetter,
+ options?: ReactiveRouteOptionsWithTransform
+): Ref
+
+export function useRouteQuery<
+ T extends RouteQueryValueRaw = RouteQueryValueRaw,
+ K = T,
+>(
+ name: string,
+ defaultValue?: MaybeRefOrGetter,
+ options: ReactiveRouteOptionsWithTransform = {},
+): Ref {
+ const {
+ mode = 'replace',
+ route = useRoute(),
+ router = useRouter(),
+ transform = value => value as any as K,
+ } = options
+
+ if (!_queue.has(router))
+ _queue.set(router, new Map())
+
+ const _queriesQueue = _queue.get(router)!
+
+ let query = route.query[name] as any
+
+ tryOnScopeDispose(() => {
+ query = undefined
+ })
+
+ let _trigger: () => void
+
+ const proxy = customRef((track, trigger) => {
+ _trigger = trigger
+
+ return {
+ get() {
+ track()
+
+ return transform(query !== undefined ? query : toValue(defaultValue))
+ },
+ set(v) {
+ if (query === v)
+ return
+
+ query = v
+ _queriesQueue.set(name, v)
+
+ trigger()
+
+ nextTick(() => {
+ if (_queriesQueue.size === 0)
+ return
+
+ const newQueries = Object.fromEntries(_queriesQueue.entries())
+ _queriesQueue.clear()
+
+ const { params, query, hash } = route
+
+ router[toValue(mode)]({
+ params,
+ query: { ...query, ...newQueries },
+ hash,
+ })
+ })
+ },
+ }
+ })
+
+ watch(
+ () => route.query[name],
+ (v) => {
+ query = v
+
+ _trigger()
+ },
+ { flush: 'sync' },
+ )
+
+ return proxy as any as Ref
+}
diff --git a/types/router.ts b/types/router.ts
new file mode 100644
index 0000000..0d84518
--- /dev/null
+++ b/types/router.ts
@@ -0,0 +1,32 @@
+import type { MaybeRef } from '@vueuse/shared'
+import type { RouteParamValueRaw, useRoute, useRouter } from 'vue-router'
+
+export type RouteQueryValueRaw = RouteParamValueRaw | string[]
+
+export type RouteHashValueRaw = string | null | undefined
+
+export interface ReactiveRouteOptions {
+ /**
+ * Mode to update the router query, ref is also acceptable
+ *
+ * @default 'replace'
+ */
+ mode?: MaybeRef<'replace' | 'push'>
+
+ /**
+ * Route instance, use `useRoute()` if not given
+ */
+ route?: ReturnType
+
+ /**
+ * Router instance, use `useRouter()` if not given
+ */
+ router?: ReturnType
+}
+
+export interface ReactiveRouteOptionsWithTransform extends ReactiveRouteOptions {
+ /**
+ * Function to transform data before return
+ */
+ transform?: (val: V) => R
+}
diff --git a/vitest/composables/useRouteHash.test.ts b/vitest/composables/useRouteHash.test.ts
new file mode 100644
index 0000000..040ddef
--- /dev/null
+++ b/vitest/composables/useRouteHash.test.ts
@@ -0,0 +1,91 @@
+import { nextTick, reactive, ref } from 'vue'
+import { describe, expect, it } from 'vitest'
+import { useRouteHash } from '~/composables/useRouteHash'
+
+describe('useRouteHash', () => {
+ const getRoute = (hash?: any) => reactive({
+ query: {},
+ fullPath: '',
+ hash,
+ matched: [],
+ meta: {},
+ name: '',
+ params: {},
+ path: '',
+ redirectedFrom: undefined,
+ })
+
+ it('should export', () => {
+ expect(useRouteHash).toBeDefined()
+ })
+
+ it('should return current value', () => {
+ let route = getRoute('header')
+ const router = { replace: (r: any) => route = r } as any
+
+ const hash = useRouteHash(null, { route, router })
+
+ expect(hash.value).toBe(route.hash)
+ })
+
+ it('should re-evaluate the value immediately', () => {
+ let route = getRoute('header')
+ const router = { replace: (r: any) => route = r } as any
+
+ const hash = useRouteHash(null, { route, router })
+
+ hash.value = 'footer'
+
+ expect(hash.value).toBe('footer')
+ })
+
+ it('should update the route', async () => {
+ let route = getRoute('foo')
+ const router = { replace: (r: any) => route = r } as any
+
+ const hash = useRouteHash(null, { route, router })
+
+ hash.value = 'footer'
+
+ await nextTick()
+
+ expect(hash.value).toBe('footer')
+ expect(route.hash).toBe('footer')
+ })
+
+ it('should return default value', () => {
+ let route = getRoute()
+ const router = { replace: (r: any) => route = r } as any
+
+ const hash = useRouteHash('baz', { route, router })
+
+ expect(hash.value).toBe('baz')
+ expect(route.hash).toBeUndefined()
+ })
+
+ it('should change the value when the route changes', () => {
+ let route = getRoute()
+ const router = { replace: (r: any) => route = r } as any
+
+ const hash = useRouteHash('baz', { route, router })
+
+ route.hash = 'foo'
+
+ expect(hash.value).toBe('foo')
+ })
+
+ it('should allow ref or getter as default value', () => {
+ let route = getRoute()
+ const router = { replace: (r: any) => route = r } as any
+
+ const defaultTarget = ref('foo')
+
+ const target = useRouteHash(defaultTarget, { route, router })
+
+ expect(target.value).toBe('foo')
+
+ target.value = 'bar'
+
+ expect(target.value).toBe('bar')
+ })
+})
diff --git a/vitest/composables/useRouteParams.test.ts b/vitest/composables/useRouteParams.test.ts
new file mode 100644
index 0000000..22407fd
--- /dev/null
+++ b/vitest/composables/useRouteParams.test.ts
@@ -0,0 +1,246 @@
+import { effectScope, nextTick, reactive, ref, watch } from 'vue'
+import { describe, expect, it, vi } from 'vitest'
+import type { Ref } from 'vue'
+import { useRouteParams } from '~/composables/useRouteParams'
+
+describe('useRouteParams', () => {
+ const getRoute = (params: Record = {}) => reactive({
+ params,
+ query: {},
+ fullPath: '',
+ hash: '',
+ matched: [],
+ meta: {},
+ name: '',
+ path: '',
+ redirectedFrom: undefined,
+ })
+
+ it('should export', () => {
+ expect(useRouteParams).toBeDefined()
+ })
+
+ it('should return current value', () => {
+ const router = {} as any
+ const route = getRoute({
+ id: '1',
+ })
+
+ const id = useRouteParams('id', null, { route, router })
+
+ expect(id.value).toBe('1')
+ })
+
+ it('should return transformed value', () => {
+ const route = getRoute()
+ const router = {} as any
+
+ const id = useRouteParams('id', '1', { transform: Number, route, router })
+
+ expect(id.value).toBe(1)
+ })
+
+ it('should re-evaluate the value immediately', () => {
+ let route = getRoute()
+ const router = { replace: (r: any) => route = r } as any
+
+ const slug: Ref = useRouteParams('slug', 'foo', { route, router })
+ const id: Ref = useRouteParams('id', '123', { route, router })
+ const page: Ref = useRouteParams('page', null, { route, router })
+
+ slug.value = 'bar'
+ id.value = '456'
+ page.value = '2'
+
+ expect(slug.value).toBe('bar')
+ expect(id.value).toBe('456')
+ expect(page.value).toBe('2')
+ })
+
+ it('should update the route', async () => {
+ let route = getRoute()
+ const router = { replace: (r: any) => route = r } as any
+
+ const code: Ref = useRouteParams('code', null, { route, router })
+ const page: Ref = useRouteParams('page', null, { route, router })
+ const lang: Ref = useRouteParams('lang', null, { route, router })
+
+ code.value = 'bar'
+ page.value = '1'
+ lang.value = 'en'
+
+ await nextTick()
+
+ expect(code.value).toBe('bar')
+ expect(route.params.code).toBe('bar')
+ expect(page.value).toBe('1')
+ expect(route.params.page).toBe('1')
+ expect(lang.value).toBe('en')
+ expect(route.params.lang).toBe('en')
+ })
+
+ it('should return default value', () => {
+ let route = getRoute()
+ const router = { replace: (r: any) => route = r } as any
+
+ const page: Ref = useRouteParams('page', 10, { route, router })
+ const lang: Ref = useRouteParams('lang', 'pt-BR', { route, router })
+
+ expect(page.value).toBe(10)
+ expect(lang.value).toBe('pt-BR')
+ })
+
+ it('should reset state on scope dispose', async () => {
+ let route = getRoute()
+ const router = { replace: (r: any) => route = r } as any
+ const scopeA = effectScope()
+ const scopeB = effectScope()
+
+ let page: Ref = ref(null)
+ let lang: Ref = ref(null)
+ let code: Ref = ref(null)
+ let slug: Ref = ref(null)
+
+ await scopeA.run(async () => {
+ page = useRouteParams('page', null, { route, router })
+ lang = useRouteParams('lang', null, { route, router })
+
+ page.value = 2
+ lang.value = 'pt-BR'
+
+ await nextTick()
+ })
+
+ expect(page.value).toBe(2)
+ expect(lang.value).toBe('pt-BR')
+ expect(route.params.page).toBe(2)
+ expect(route.params.lang).toBe('pt-BR')
+
+ await scopeB.run(async () => {
+ code = useRouteParams('code', null, { route, router })
+ slug = useRouteParams('slug', null, { route, router })
+
+ code.value = 'xyz'
+ slug.value = 'vueuse'
+
+ await nextTick()
+ })
+
+ expect(code.value).toBe('xyz')
+ expect(slug.value).toBe('vueuse')
+ expect(route.params.code).toBe('xyz')
+ expect(route.params.slug).toBe('vueuse')
+
+ scopeB.stop()
+
+ expect(page.value).toBe(2)
+ expect(lang.value).toBe('pt-BR')
+ expect(code.value).toBeNull()
+ expect(slug.value).toBeNull()
+
+ scopeA.stop()
+
+ expect(page.value).toBeNull()
+ expect(lang.value).toBeNull()
+ })
+
+ it('should not reset params to default if is disposed from other scope', async () => {
+ let route = getRoute()
+
+ const router = { replace: (r: any) => route = r } as any
+
+ const scopeA = effectScope()
+ const scopeB = effectScope()
+
+ route.params.page = 2
+
+ const defaultPage = 'DEFAULT_PAGE'
+ let page1: Ref = ref(null)
+ await scopeA.run(async () => {
+ page1 = useRouteParams('page', defaultPage, { route, router })
+ })
+
+ let page2: Ref = ref(null)
+ await scopeB.run(async () => {
+ page2 = useRouteParams('page', defaultPage, { route, router })
+ })
+
+ expect(page1.value).toBe(2)
+ expect(page2.value).toBe(2)
+
+ scopeA.stop()
+ await nextTick()
+
+ expect(page1.value).toBe(defaultPage)
+ expect(page2.value).toBe(2)
+ })
+
+ it('should change the value when the route changes', () => {
+ let route = getRoute()
+ const router = { replace: (r: any) => route = r } as any
+
+ const lang: Ref = useRouteParams('lang', null, { route, router })
+
+ expect(lang.value).toBeNull()
+
+ route.params = { lang: 'en' }
+
+ expect(lang.value).toBe('en')
+ })
+
+ it('should avoid trigger effects when the value doesn\'t change', async () => {
+ let route = getRoute()
+ const router = { replace: (r: any) => route = r } as any
+ const onUpdate = vi.fn()
+
+ const page = useRouteParams('page', 1, { transform: Number, route, router })
+
+ watch(page, onUpdate)
+
+ page.value = 1
+
+ await nextTick()
+
+ expect(page.value).toBe(1)
+ expect(route.params.page).toBe(1)
+ expect(onUpdate).not.toHaveBeenCalled()
+ })
+
+ it('should keep current query and hash', async () => {
+ let route = getRoute()
+ const router = { replace: (r: any) => route = r } as any
+
+ route.query = { foo: 'bar' }
+ route.hash = '#hash'
+
+ const id: Ref = useRouteParams('id', null, { route, router })
+
+ id.value = '2'
+
+ await nextTick()
+
+ expect(id.value).toBe('2')
+ expect(route.hash).toBe('#hash')
+ expect(route.query).toEqual({ foo: 'bar' })
+ })
+
+ it('should allow ref or getter as default value', () => {
+ let route = getRoute()
+ const router = { replace: (r: any) => route = r } as any
+
+ const defaultPage = ref(1)
+ const defaultLang = () => 'pt-BR'
+
+ const page: Ref = useRouteParams('page', defaultPage, { route, router })
+ const lang: Ref = useRouteParams('lang', defaultLang, { route, router })
+
+ expect(page.value).toBe(1)
+ expect(lang.value).toBe('pt-BR')
+
+ page.value = 2
+ lang.value = 'en-US'
+
+ expect(page.value).toBe(2)
+ expect(lang.value).toBe('en-US')
+ })
+})
diff --git a/vitest/composables/useRouteQuery.test.ts b/vitest/composables/useRouteQuery.test.ts
new file mode 100644
index 0000000..25e0df8
--- /dev/null
+++ b/vitest/composables/useRouteQuery.test.ts
@@ -0,0 +1,266 @@
+import { effectScope, nextTick, reactive, ref, watch } from 'vue'
+import { describe, expect, it, vi } from 'vitest'
+import type { Ref } from 'vue'
+import { useRouteQuery } from '~/composables/useRouteQuery'
+
+describe('useRouteQuery', () => {
+ const getRoute = (query: Record = {}) => reactive({
+ query,
+ fullPath: '',
+ hash: '',
+ matched: [],
+ meta: {},
+ name: '',
+ params: {},
+ path: '',
+ redirectedFrom: undefined,
+ })
+
+ it('should export', () => {
+ expect(useRouteQuery).toBeDefined()
+ })
+
+ it('should return transformed value', () => {
+ const router = {} as any
+ const route = getRoute({
+ search: 'vue3',
+ page: '1',
+ })
+ const transform = Number
+ const toArray = (param: string | string[] | null) => Array.isArray(param) ? param : [param]
+
+ const page = useRouteQuery('page', '1', { transform, route, router })
+ const perPage = useRouteQuery('perPage', '15', { transform, route, router })
+ const tags = useRouteQuery('tags', [], { transform: toArray, route: getRoute({ tags: 'vite' }), router })
+
+ expect(page.value).toBe(1)
+ expect(perPage.value).toBe(15)
+ expect(tags.value).toEqual(['vite'])
+ })
+
+ it('should re-evaluate the value immediately', () => {
+ let route = getRoute({
+ search: 'vue3',
+ })
+ const router = { replace: (r: any) => route = r } as any
+
+ const code: Ref = useRouteQuery('code', 'foo', { route, router })
+ const search: Ref = useRouteQuery('search', null, { route, router })
+
+ expect(code.value).toBe('foo')
+
+ code.value = 'bar'
+
+ expect(code.value).toBe('bar')
+ expect(search.value).toBe('vue3')
+ })
+
+ it('should update the route', async () => {
+ let route = getRoute()
+ const router = { replace: (r: any) => route = r } as any
+
+ const code: Ref = useRouteQuery('code', null, { route, router })
+ const page: Ref = useRouteQuery('page', null, { route, router })
+ const lang: Ref = useRouteQuery('lang', null, { route, router })
+
+ code.value = 'bar'
+ page.value = '1'
+ lang.value = 'en'
+
+ await nextTick()
+
+ expect(code.value).toBe('bar')
+ expect(route.query.code).toBe('bar')
+ expect(page.value).toBe('1')
+ expect(route.query.page).toBe('1')
+ expect(lang.value).toBe('en')
+ expect(route.query.lang).toBe('en')
+ })
+
+ it('should return default value', () => {
+ let route = getRoute()
+ const router = { replace: (r: any) => route = r } as any
+
+ const page: Ref = useRouteQuery('page', 2, { route, router })
+ const lang: Ref = useRouteQuery('lang', 'pt-BR', { route, router })
+
+ expect(page.value).toBe(2)
+ expect(lang.value).toBe('pt-BR')
+ })
+
+ it('should reset state on scope dispose', async () => {
+ let route = getRoute()
+ const router = { replace: (r: any) => route = r } as any
+ const scopeA = effectScope()
+ const scopeB = effectScope()
+
+ let page: Ref = ref(null)
+ let lang: Ref = ref(null)
+ let code: Ref = ref(null)
+ let search: Ref = ref(null)
+
+ await scopeA.run(async () => {
+ page = useRouteQuery('page', null, { route, router })
+ lang = useRouteQuery('lang', null, { route, router })
+
+ page.value = 2
+ lang.value = 'pt-BR'
+
+ await nextTick()
+ })
+
+ expect(page.value).toBe(2)
+ expect(lang.value).toBe('pt-BR')
+ expect(route.query.page).toBe(2)
+ expect(route.query.lang).toBe('pt-BR')
+
+ await scopeB.run(async () => {
+ code = useRouteQuery('code', null, { route, router })
+ search = useRouteQuery('search', null, { route, router })
+
+ code.value = 'xyz'
+ search.value = 'vueuse'
+
+ await nextTick()
+ })
+
+ expect(code.value).toBe('xyz')
+ expect(search.value).toBe('vueuse')
+ expect(route.query.code).toBe('xyz')
+ expect(route.query.search).toBe('vueuse')
+
+ scopeB.stop()
+
+ expect(page.value).toBe(2)
+ expect(lang.value).toBe('pt-BR')
+ expect(code.value).toBeNull()
+ expect(search.value).toBeNull()
+
+ scopeA.stop()
+
+ expect(page.value).toBeNull()
+ expect(lang.value).toBeNull()
+ })
+
+ it('should not reset params to default params is disposed from other scope', async () => {
+ let route = getRoute()
+
+ const router = { replace: (r: any) => route = r } as any
+ const scopeA = effectScope()
+ const scopeB = effectScope()
+
+ route.query.page = 2
+
+ const defaultPage = 'DEFAULT_PAGE'
+ let page1: Ref = ref(null)
+ await scopeA.run(async () => {
+ page1 = useRouteQuery('page', defaultPage, { route, router })
+ })
+
+ let page2: Ref = ref(null)
+ await scopeB.run(async () => {
+ page2 = useRouteQuery('page', defaultPage, { route, router })
+ })
+
+ expect(page1.value).toBe(2)
+ expect(page2.value).toBe(2)
+
+ scopeA.stop()
+ await nextTick()
+
+ expect(page1.value).toBe(defaultPage)
+ expect(page2.value).toBe(2)
+ })
+
+ it('should change the value when the route changes', () => {
+ let route = getRoute()
+ const router = { replace: (r: any) => route = r } as any
+
+ const page: Ref = useRouteQuery('page', null, { route, router })
+
+ expect(page.value).toBeNull()
+
+ route.query = { page: '2' }
+
+ expect(page.value).toBe('2')
+ })
+
+ it('should differentiate null and undefined', () => {
+ let route = getRoute({
+ page: 1,
+ })
+ const router = { replace: (r: any) => route = r } as any
+
+ const lang: Ref = useRouteQuery('lang', undefined, { route, router })
+
+ expect(lang.value).toBeUndefined()
+
+ route.query = { ...route.query, lang: null }
+
+ expect(lang.value).toBeNull()
+
+ const code: Ref = useRouteQuery('code', null, { route, router })
+
+ expect(code.value).toBeNull()
+
+ const page: Ref = useRouteQuery('page', null, { route, router })
+
+ expect(page.value).toBe(1)
+ })
+
+ it('should avoid trigger effects when the value doesn\'t change', async () => {
+ let route = getRoute()
+ const router = { replace: (r: any) => route = r } as any
+ const onUpdate = vi.fn()
+
+ const page = useRouteQuery('page', 1, { transform: Number, route, router })
+
+ watch(page, onUpdate)
+
+ page.value = 1
+
+ await nextTick()
+
+ expect(page.value).toBe(1)
+ expect(route.query.page).toBe(1)
+ expect(onUpdate).not.toHaveBeenCalled()
+ })
+
+ it('should keep current query and hash', async () => {
+ let route = getRoute()
+ const router = { replace: (r: any) => route = r } as any
+
+ route.params = { foo: 'bar' }
+ route.hash = '#hash'
+
+ const id: Ref = useRouteQuery('id', null, { route, router })
+
+ id.value = '2'
+
+ await nextTick()
+
+ expect(id.value).toBe('2')
+ expect(route.hash).toBe('#hash')
+ expect(route.params).toEqual({ foo: 'bar' })
+ })
+
+ it('should allow ref or getter as default value', () => {
+ let route = getRoute()
+ const router = { replace: (r: any) => route = r } as any
+
+ const defaultPage = ref(1)
+ const defaultLang = () => 'pt-BR'
+
+ const page: Ref = useRouteQuery('page', defaultPage, { route, router })
+ const lang: Ref = useRouteQuery('lang', defaultLang, { route, router })
+
+ expect(page.value).toBe(1)
+ expect(lang.value).toBe('pt-BR')
+
+ page.value = 2
+ lang.value = 'en-US'
+
+ expect(page.value).toBe(2)
+ expect(lang.value).toBe('en-US')
+ })
+})
From 5bda24f5dac30b4eaf6b30f9c919209a7823fca7 Mon Sep 17 00:00:00 2001
From: elonehoo
Date: Mon, 25 Dec 2023 14:06:27 +0800
Subject: [PATCH 12/12] fix: update home page show in url query link
---
components/header/Header.vue | 16 ++++++++++++++++
pages/index.vue | 4 ++--
2 files changed, 18 insertions(+), 2 deletions(-)
diff --git a/components/header/Header.vue b/components/header/Header.vue
index 431dc8c..5a57fd2 100644
--- a/components/header/Header.vue
+++ b/components/header/Header.vue
@@ -16,6 +16,22 @@ const tagList = ref<{
const sidebar = useSidebarStore()
const { show } = storeToRefs(sidebar)
+
+const linkQuery = useRouteQuery('link')
+
+function remakeRouteQuery() {
+ if (linkQuery.value === undefined)
+ linkQuery.value = tagList.value[0].url
+}
+
+watch(linkQuery, () => {
+ if (linkQuery.value === undefined)
+ linkQuery.value = tagList.value[0].url
+})
+
+onMounted(() => {
+ remakeRouteQuery()
+})
diff --git a/pages/index.vue b/pages/index.vue
index 155ab43..f79c839 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,9 +1,9 @@
- home page
+ {{ linkQuery }}