From 3d0e4a18263a9daa0a2b49b1d40fccc219357997 Mon Sep 17 00:00:00 2001 From: "Mr.Hope" Date: Sun, 29 Sep 2024 16:48:23 +0800 Subject: [PATCH] feat(plugin-rtl): provide composables --- plugins/development/plugin-rtl/package.json | 2 + .../src/client/composables/index.ts | 1 + .../src/client/composables/useRtl.ts | 51 +++++++++++++++++++ .../plugin-rtl/src/client/config.ts | 46 ++--------------- .../plugin-rtl/src/client/utils/index.ts | 6 +++ pnpm-lock.yaml | 3 ++ 6 files changed, 66 insertions(+), 43 deletions(-) create mode 100644 plugins/development/plugin-rtl/src/client/composables/index.ts create mode 100644 plugins/development/plugin-rtl/src/client/composables/useRtl.ts create mode 100644 plugins/development/plugin-rtl/src/client/utils/index.ts diff --git a/plugins/development/plugin-rtl/package.json b/plugins/development/plugin-rtl/package.json index 29a987dafb..54d0e8a459 100644 --- a/plugins/development/plugin-rtl/package.json +++ b/plugins/development/plugin-rtl/package.json @@ -26,6 +26,7 @@ "type": "module", "exports": { ".": "./lib/node/index.js", + "./client": "./lib/client/index.js", "./package.json": "./package.json" }, "main": "./lib/node/index.js", @@ -38,6 +39,7 @@ "clean": "rimraf --glob ./lib ./*.tsbuildinfo" }, "dependencies": { + "@vuepress/helper": "workspace:*", "vue": "^3.5.10" }, "peerDependencies": { diff --git a/plugins/development/plugin-rtl/src/client/composables/index.ts b/plugins/development/plugin-rtl/src/client/composables/index.ts new file mode 100644 index 0000000000..10a321cb53 --- /dev/null +++ b/plugins/development/plugin-rtl/src/client/composables/index.ts @@ -0,0 +1 @@ +export * from './useRtl.js' diff --git a/plugins/development/plugin-rtl/src/client/composables/useRtl.ts b/plugins/development/plugin-rtl/src/client/composables/useRtl.ts new file mode 100644 index 0000000000..7230e78e03 --- /dev/null +++ b/plugins/development/plugin-rtl/src/client/composables/useRtl.ts @@ -0,0 +1,51 @@ +import { entries } from '@vuepress/helper' +import { onMounted, watch } from 'vue' +import { useRouteLocale } from 'vuepress/client' +import { getElement } from '../utils/index.js' + +/** + * + * @param rtlLocalePaths rtl locale paths + * @param selectorOptions rtl selector options + */ +export const useRtl = ( + rtlLocalePaths: string[], + selectorOptions?: Record>, +): void => { + const routeLocale = useRouteLocale() + + const toggleRTL = (localePath: string): void => { + if (rtlLocalePaths.includes(localePath)) { + entries( + selectorOptions ?? { + html: { dir: 'rtl' }, + }, + ).forEach(([selector, attrs = {}]) => { + const element = getElement(selector) + + if (element) + entries(attrs).forEach(([attr, value]) => { + if (attr === 'class') element.classList.add(value) + else element.setAttribute(attr, value) + }) + }) + document.documentElement.style.setProperty('direction', 'rtl') + } else { + entries(rtlLocalePaths).forEach(([selector, attrs = {}]) => { + const element = getElement(selector) + + if (element) + entries(attrs).forEach(([attr, value]) => { + if (attr === 'class') element.classList.remove(value) + else element.removeAttribute(attr) + }) + }) + + document.documentElement.style.removeProperty('direction') + } + } + + onMounted(() => { + watch(routeLocale, toggleRTL, { immediate: true }) + }) +} diff --git a/plugins/development/plugin-rtl/src/client/config.ts b/plugins/development/plugin-rtl/src/client/config.ts index d7ef77d316..79741a77ed 100644 --- a/plugins/development/plugin-rtl/src/client/config.ts +++ b/plugins/development/plugin-rtl/src/client/config.ts @@ -1,51 +1,11 @@ -import { onMounted, watch } from 'vue' -import { defineClientConfig, useRouteLocale } from 'vuepress/client' +import { defineClientConfig } from 'vuepress/client' +import { useRtl } from './composables/index.js' declare const __RTL_LOCALES__: string[] declare const __RTL_SELECTOR__: Record> -const { entries } = Object - -const getElement = (selector: string): HTMLElement | null => - selector === 'html' - ? document.documentElement - : selector === 'body' - ? document.body - : document.querySelector(selector) - export default defineClientConfig({ setup() { - const routeLocale = useRouteLocale() - - const toggleRTL = (localePath: string): void => { - if (__RTL_LOCALES__.includes(localePath)) { - entries(__RTL_SELECTOR__).forEach(([selector, attrs = {}]) => { - const element = getElement(selector) - - if (element) - entries(attrs).forEach(([attr, value]) => { - if (attr === 'class') element.classList.add(value) - else element.setAttribute(attr, value) - }) - }) - document.documentElement.style.setProperty('direction', 'rtl') - } else { - entries(__RTL_LOCALES__).forEach(([selector, attrs = {}]) => { - const element = getElement(selector) - - if (element) - entries(attrs).forEach(([attr, value]) => { - if (attr === 'class') element.classList.remove(value) - else element.removeAttribute(attr) - }) - }) - - document.documentElement.style.removeProperty('direction') - } - } - - onMounted(() => { - watch(routeLocale, toggleRTL, { immediate: true }) - }) + useRtl(__RTL_LOCALES__, __RTL_SELECTOR__) }, }) diff --git a/plugins/development/plugin-rtl/src/client/utils/index.ts b/plugins/development/plugin-rtl/src/client/utils/index.ts new file mode 100644 index 0000000000..61fee41286 --- /dev/null +++ b/plugins/development/plugin-rtl/src/client/utils/index.ts @@ -0,0 +1,6 @@ +export const getElement = (selector: string): HTMLElement | null => + selector === 'html' + ? document.documentElement + : selector === 'body' + ? document.body + : document.querySelector(selector) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 501c72d22e..2096b9cde8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -382,6 +382,9 @@ importers: plugins/development/plugin-rtl: dependencies: + '@vuepress/helper': + specifier: workspace:* + version: link:../../../tools/helper vue: specifier: ^3.5.10 version: 3.5.10(typescript@5.6.2)