From b5d665e40f0e9b4debd635768a399fc2a2d016af Mon Sep 17 00:00:00 2001 From: Admin User Date: Tue, 30 Apr 2024 04:26:56 +0000 Subject: [PATCH] GITBOOK-12: No subject --- docs/customization/icons.md | 65 ++++++++ .../internationalization-i18n.md | 142 ++++++++++-------- docs/customization/overview.md | 36 ++++- 3 files changed, 178 insertions(+), 65 deletions(-) diff --git a/docs/customization/icons.md b/docs/customization/icons.md index c880eb110..14768c8a1 100644 --- a/docs/customization/icons.md +++ b/docs/customization/icons.md @@ -173,3 +173,68 @@ export default { {% hint style="info" %} In this case regular and filled icon variants will be safelistd and added into the build. {% endhint %} + +*** + +## Deep tuning + +Loding SVG icons provided by [`@vueless/plugin-vite`](https://github.com/vuelessjs/vueless-plugin-vite) which in turn was be inspired by [`vite-svg-loader`](https://github.com/jpkleemans/vite-svg-loader) . + +For loading SVG [`@vueless/plugin-vite`](https://github.com/vuelessjs/vueless-plugin-vite) use [SVGO](https://github.com/svg/svgo) by default. We created and already included optimal config to cover most of the cases, but if you will face with some issues with SVG rendering feel free to change it by passing you own config under the `svgoConfig` key, ([see SVGO plugin docs](https://svgo.dev/docs/preset-default/)). + +{% code title="vite.config.js" %} +```javascript +import { Vueless } from "@vueless/plugin-vite"; + +export default defineConfig({ + plugins: [ + ... + Vueless({ + svgoConfig: { + plugins: [ + { + name: "preset-default", + params: { + overrides: { + removeViewBox: false, + convertColors: { + currentColor: true, + }, + }, + }, + }, + ], + }, + }), + ], + ... +}); +``` +{% endcode %} + +Or you can disable SVGO globally as well. + +{% code title="vite.config.js" %} +```javascript +import { Vueless } from "@vueless/plugin-vite"; + +export default defineConfig({ + plugins: [ + ... + Vueless({ svgo: false }), + ], + ... +}); +``` +{% endcode %} + +SVGO also can be explicitly disabled for one file by adding the `?skipsvgo` suffix. + +```html + + + +``` + diff --git a/docs/customization/internationalization-i18n.md b/docs/customization/internationalization-i18n.md index 8d91f33bd..203036415 100644 --- a/docs/customization/internationalization-i18n.md +++ b/docs/customization/internationalization-i18n.md @@ -1,96 +1,110 @@ # Internationalization (i18n) -When bootstrapping your application, you can specify available locales and the default locale for vueless components. Vueless also supports integration with [vue-i18n](https://vue-i18n.intlify.dev/). +You can specify locale messages and a default locale for Vueless components and integrate it with [vue-i18n](https://vue-i18n.intlify.dev/) as well. +## Vueless i18n +Vueless supports only English locale by default. To set additional locales, you can provide them in `createVueless()` under the `locale` key with the structure below: -### Getting started - -Vueless supports only English locale by default. To set additional custom locales, provide locale key with the following structure: - +{% code title="main.js" %} ```javascript -// main.js - import { createVueless, defaultEnLocale } from "vueless"; const vueless = createVueless({ - locale: { - locale: "en" // default locale - fallback: "en" // fallback locale - massages: { - en: { // customize or overwrite default english locale - ...defaultEnLocale, - componentName: { // USelect for example - messageOne: "...", - messageTwo: "...", - ... - } - } - - ua: { // new custom locale - componentName: { - messageOne: "...", - messageTne: "...", - ... - } - } - } - } + locale: { + locale: "en", // default locale + fallback: "en", // fallback locale + messages: { + en: { // customize or overwrite default english locale + ...defaultEnLocale, + USelect: { // Vueless component name + listIsEmpty: "List is empty.", + noDataToShow: "No data to show.", + clear: "clear", + addMore: "Add more...", + }, + }, + ua: { // new custom locale + USelect: { // Vueless component name + listIsEmpty: "Список порожній.", + noDataToShow: "Дані відсутні.", + clear: "очистити", + addMore: "Додати ще...", + }, + }, + }, + }, }); ``` +{% endcode %} -### Vue-i18n integration +Full list of locale keys available in [Vueless UI docs](https://ui.vueless.com/) in **`Default config`** chapter (at the end of each page). -Use `createVueI18nAdapter` function to integrate vue-i18n library with Vueless components. +## Vue-i18n integration -```javascript -// main.js +Use `createVueI18nAdapter()` to integrate [`vue-i18n`](https://vue-i18n.intlify.dev/) library with Vueless components. +{% code title="main.js" %} +```javascript import { createVueless, defaultEnLocale, createVueI18nAdapter } from "vueless"; import { createI18n } from "vue-i18n"; const i18n = createI18n({ - legacy: false, - locale: "ua", - fallbackLocale: "en", - messages: { - en: { - ...defaultEnLocale, - someYourMessageOne: "Hello wrold!", - someYourMessageTwo: "Brave new world", - }, - ua: { - componentName: { // USelect for example - messageOne: "...", - messageTwo: "...", - ... - }, - someYourMessageOne: "Привіт світ!", - someYourMessageTwo: "Прекрасний новий світ", - } - } + legacy: false, // legacy mode should be disabled + locale: "ua", // default locale + fallback: "en", // fallback locale + messages: { + en: { // customize or overwrite default english locale + ...defaultEnLocale, + USelect: { // Vueless component name + listIsEmpty: "List is empty.", + noDataToShow: "No data to show.", + clear: "clear", + addMore: "Add more...", + }, + // other project messages + projectMessageOne: "Hello wrold!", + projectMessageTwo: "Brave new world.", + }, + ua: { // new custom locale + USelect: { // Vueless component name + listIsEmpty: "Список порожній.", + noDataToShow: "Дані відсутні.", + clear: "очистити", + addMore: "Додати ще...", + }, + // other project messages + projectMessageOne: "Привіт світ!", + projectMessageTwo: "Прекрасний новий світ.", + }, + }, }); -const vuless = createVueless({ - locale: { - adapter: createVueI18nAdapter(i18n), - } +const vueless = createVueless({ + locale: { + adapter: createVueI18nAdapter(i18n), + }, }); ``` +{% endcode %} -### Customizing text content in specific component +## Customising messages in specific component -You can provide custom massages for specific component, providing `i18n` key in component's config. +You can easily set custom massages for specific component by providing `i18n` key in the component's config. -```javascript +```html + + + ``` diff --git a/docs/customization/overview.md b/docs/customization/overview.md index 18666293a..1fe855b38 100644 --- a/docs/customization/overview.md +++ b/docs/customization/overview.md @@ -67,7 +67,41 @@ See [Icons](icons.md) chapter for more details. ## Internationalization (i18n) -work in progress... +You can specify locale messages and a default locale for Vueless components and integrate it with [vue-i18n](https://vue-i18n.intlify.dev/) as well. + +Vueless supports only English locale by default. To set additional locales, you can provide them in `createVueless()` under the `locale` key with the structure below: + +{% code title="main.js" %} +```javascript +import { createVueless, defaultEnLocale } from "vueless"; + +const vueless = createVueless({ + locale: { + locale: "en", // default locale + fallback: "en", // fallback locale + messages: { + en: { // customize or overwrite default english locale + ...defaultEnLocale, + USelect: { // Vueless component name + listIsEmpty: "List is empty.", + noDataToShow: "No data to show.", + clear: "clear", + addMore: "Add more...", + }, + }, + ua: { // new custom locale + USelect: { // Vueless component name + listIsEmpty: "Список порожній.", + noDataToShow: "Дані відсутні.", + clear: "очистити", + addMore: "Додати ще...", + }, + }, + }, + }, +}); +``` +{% endcode %} See [Internationalization (i18n) ](internationalization-i18n.md)chapter for more details.