From 71c970b396dcbbdd9e4866c6f7bef23c1c27c3e5 Mon Sep 17 00:00:00 2001 From: Bakhtovar Gulomov Date: Mon, 26 Jun 2023 04:13:47 +0700 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2?= =?UTF-8?q?=D0=BB=D0=B5=D0=BD=20medium-zoom?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.vitepress/theme/composables/zoom.ts | 32 +++++++++++++++++++++++ docs/.vitepress/theme/index.ts | 10 +++++-- docs/.vitepress/theme/styles/global.css | 8 ++++++ package.json | 3 ++- yarn.lock | 5 ++++ 5 files changed, 55 insertions(+), 3 deletions(-) create mode 100644 docs/.vitepress/theme/composables/zoom.ts diff --git a/docs/.vitepress/theme/composables/zoom.ts b/docs/.vitepress/theme/composables/zoom.ts new file mode 100644 index 00000000..76d0f35a --- /dev/null +++ b/docs/.vitepress/theme/composables/zoom.ts @@ -0,0 +1,32 @@ +import mediumZoom, { type Zoom } from 'medium-zoom' +import { + inject, + nextTick, + onMounted, + watch, + type App, + type InjectionKey +} from 'vue' +import type { Router } from 'vitepress' + +declare module 'medium-zoom' { + interface Zoom { + refresh: (selector?: string) => void + } +} + +export const key: InjectionKey = Symbol('medium-zoom') + +export function useZoom() { + return onMounted(() => inject(key).refresh()) +} + +export function createZoom(app: App, router: Router) { + const zoom = mediumZoom() + zoom.refresh = () => zoom.detach().attach('.vp-doc :not(a) > img') + app.provide(key, zoom) + watch( + () => router.route.path, + () => nextTick(() => zoom.refresh()), + ) +} diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index 962fb7a8..6714602b 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -1,4 +1,5 @@ import type { EnhanceAppContext } from 'vitepress' +import { createZoom, useZoom } from './composables/zoom' import DefaultTheme from 'vitepress/theme-without-fonts' import DocsLayout from './components/DocsLayout.vue' import DocsComponentsList from './components/DocsComponentsList.vue' @@ -8,7 +9,12 @@ export default { extends: DefaultTheme, Layout: DocsLayout, - enhanceApp(ctx: EnhanceAppContext) { - ctx.app.component('DocsComponentsList', DocsComponentsList) + enhanceApp({ app, router }: EnhanceAppContext) { + app.component('DocsComponentsList', DocsComponentsList) + createZoom(app, router) + }, + + setup() { + useZoom() }, } diff --git a/docs/.vitepress/theme/styles/global.css b/docs/.vitepress/theme/styles/global.css index 455ee77d..378fd447 100644 --- a/docs/.vitepress/theme/styles/global.css +++ b/docs/.vitepress/theme/styles/global.css @@ -200,3 +200,11 @@ kbd { border-bottom: 0; } } + +.medium-zoom-overlay { + z-index: calc(var(--vp-z-index-nav) + 10); +} + +.medium-zoom-image { + z-index: calc(var(--vp-z-index-nav) + 20); +} diff --git a/package.json b/package.json index 5dadaa23..64995751 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ } }, "dependencies": { - "@vueuse/core": "^10.1.2" + "@vueuse/core": "^10.1.2", + "medium-zoom": "^1.0.8" } } diff --git a/yarn.lock b/yarn.lock index d5f88cd3..47f866b2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1616,6 +1616,11 @@ mdurl@^1.0.1: resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e" integrity sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g== +medium-zoom@^1.0.8: + version "1.0.8" + resolved "https://registry.yarnpkg.com/medium-zoom/-/medium-zoom-1.0.8.tgz#2bd1fbcf2961fa7b0e318fe284462aa9b8608ed2" + integrity sha512-CjFVuFq/IfrdqesAXfg+hzlDKu6A2n80ZIq0Kl9kWjoHh9j1N9Uvk5X0/MmN0hOfm5F9YBswlClhcwnmtwz7gA== + merge2@^1.3.0, merge2@^1.4.1: version "1.4.1" resolved "https://registry.yarnpkg.com/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae" From a4d442a03cfd099c00e8432cd0c8438f9f5eb76a Mon Sep 17 00:00:00 2001 From: Bakhtovar Gulomov Date: Tue, 27 Jun 2023 18:17:43 +0700 Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2?= =?UTF-8?q?=D0=BB=D0=B5=D0=BD=D1=8B=20=D0=BE=D1=82=D1=81=D1=82=D1=83=D0=BF?= =?UTF-8?q?=D1=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.vitepress/theme/composables/zoom.ts | 2 +- docs/.vitepress/theme/styles/global.css | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/.vitepress/theme/composables/zoom.ts b/docs/.vitepress/theme/composables/zoom.ts index 76d0f35a..ab628e19 100644 --- a/docs/.vitepress/theme/composables/zoom.ts +++ b/docs/.vitepress/theme/composables/zoom.ts @@ -22,7 +22,7 @@ export function useZoom() { } export function createZoom(app: App, router: Router) { - const zoom = mediumZoom() + const zoom = mediumZoom({ margin: 24 }) zoom.refresh = () => zoom.detach().attach('.vp-doc :not(a) > img') app.provide(key, zoom) watch( diff --git a/docs/.vitepress/theme/styles/global.css b/docs/.vitepress/theme/styles/global.css index 378fd447..70e4a464 100644 --- a/docs/.vitepress/theme/styles/global.css +++ b/docs/.vitepress/theme/styles/global.css @@ -202,9 +202,9 @@ kbd { } .medium-zoom-overlay { - z-index: calc(var(--vp-z-index-nav) + 10); + z-index: calc(var(--vp-z-index-nav) - 10); } .medium-zoom-image { - z-index: calc(var(--vp-z-index-nav) + 20); + z-index: calc(var(--vp-z-index-nav) - 10); } From dbc287b35d83a162d1a16534af17b0749184db1a Mon Sep 17 00:00:00 2001 From: Bakhtovar Gulomov Date: Tue, 27 Jun 2023 23:04:48 +0700 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=D0=A6=D0=B2=D0=B5=D1=82=20=D1=84?= =?UTF-8?q?=D0=BE=D0=BD=D0=B0=20=D0=BE=D0=B2=D0=B5=D1=80=D0=BB=D0=B5=D1=8F?= =?UTF-8?q?=20=D0=B2=20=D1=82=D0=B5=D0=BC=D0=BD=D0=BE=D0=B9=20=D0=B2=D0=B5?= =?UTF-8?q?=D1=80=D1=81=D0=B8=D0=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/.vitepress/theme/composables/zoom.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/.vitepress/theme/composables/zoom.ts b/docs/.vitepress/theme/composables/zoom.ts index ab628e19..bdfa00bc 100644 --- a/docs/.vitepress/theme/composables/zoom.ts +++ b/docs/.vitepress/theme/composables/zoom.ts @@ -22,7 +22,7 @@ export function useZoom() { } export function createZoom(app: App, router: Router) { - const zoom = mediumZoom({ margin: 24 }) + const zoom = mediumZoom({ margin: 24, background: 'var(--vp-c-bg)' }) zoom.refresh = () => zoom.detach().attach('.vp-doc :not(a) > img') app.provide(key, zoom) watch(