From 1b98a386bf53771f2d0c6742bce1172f3a4f7a43 Mon Sep 17 00:00:00 2001 From: Razvan Stoenescu Date: Tue, 27 Dec 2022 10:21:12 +0200 Subject: [PATCH] feat(ui): Ability to disable Quasar automatically adding "dir" and "lang" HTML attributes to the html tag #15010 --- .../pages/options/quasar-language-packs.md | 26 +++++++++++++++++ ui/dev/postcss.config.js | 4 +-- ui/src/lang.js | 28 +++++++++++-------- 3 files changed, 45 insertions(+), 13 deletions(-) diff --git a/docs/src/pages/options/quasar-language-packs.md b/docs/src/pages/options/quasar-language-packs.md index 50e55b93832..f7ae20e7a3c 100644 --- a/docs/src/pages/options/quasar-language-packs.md +++ b/docs/src/pages/options/quasar-language-packs.md @@ -276,3 +276,29 @@ setup () { $q.lang.getLocale() // returns a string } ``` + +## Disabling HTML attributes + +By default, Quasar will add `dir` and `lang` HTML attributes to the `` tag for you. The `dir` attribute is especially important to the way CSS is preprocesses with Sass when [RTL is enabled](/options/rtl-support). + +If, for whatever reason you want this behavior disabled, then you can: + +```js +// Quasar CLI > quasar.config.js +framework: { + config: { + lang: { + noHtmlAttrs: true // add this + } + } +} + +// Vite plugin / Vue plugin / UMD +app.use(Quasar, { + config: { + lang: { + noHtmlAttrs: true // add this + } + } +}) +``` diff --git a/ui/dev/postcss.config.js b/ui/dev/postcss.config.js index ff72abebae2..a91ebcd52f7 100644 --- a/ui/dev/postcss.config.js +++ b/ui/dev/postcss.config.js @@ -3,13 +3,13 @@ module.exports = { plugins: [ // to edit target browsers: use "browserslist" field in package.json - require('autoprefixer'), + require('autoprefixer') // https://github.com/elchininet/postcss-rtlcss // If you want to support RTL css, then // 1. yarn/npm install postcss-rtlcss // 2. optionally set quasar.config.js > framework > lang to an RTL language // 3. uncomment the following line: - require('postcss-rtlcss') + // require('postcss-rtlcss') ] } diff --git a/ui/src/lang.js b/ui/src/lang.js index cf8f6d5516b..5ceb62f5072 100644 --- a/ui/src/lang.js +++ b/ui/src/lang.js @@ -40,25 +40,30 @@ const Plugin = defineReactivePlugin({ return } - const dir = lang.rtl === true ? 'rtl' : 'ltr' - const attrs = `lang=${ lang.isoName } dir=${ dir }` - lang.set = ssrContext.$q.lang.set - ssrContext._meta.htmlAttrs = ssrContext.__qPrevLang !== void 0 - ? ssrContext._meta.htmlAttrs.replace(ssrContext.__qPrevLang, attrs) - : attrs + if (ssrContext.$q.config?.lang?.noHtmlAttrs !== true) { + const dir = lang.rtl === true ? 'rtl' : 'ltr' + const attrs = `lang=${ lang.isoName } dir=${ dir }` + + ssrContext._meta.htmlAttrs = ssrContext.__qPrevLang !== void 0 + ? ssrContext._meta.htmlAttrs.replace(ssrContext.__qPrevLang, attrs) + : attrs + + ssrContext.__qPrevLang = attrs + } - ssrContext.__qPrevLang = attrs ssrContext.$q.lang = lang } else { - const el = document.documentElement - el.setAttribute('dir', lang.rtl === true ? 'rtl' : 'ltr') - el.setAttribute('lang', lang.isoName) - lang.set = Plugin.set + if (Plugin.__langConfig?.noHtmlAttrs !== true) { + const el = document.documentElement + el.setAttribute('dir', lang.rtl === true ? 'rtl' : 'ltr') + el.setAttribute('lang', lang.isoName) + } + Object.assign(Plugin.__langPack, lang) Plugin.props = lang @@ -87,6 +92,7 @@ const Plugin = defineReactivePlugin({ } else { $q.lang = Plugin.__langPack + Plugin.__langConfig = $q.config?.lang if (this.__installed === true) { lang !== void 0 && this.set(lang)