feat(Locale): add Chinese

.storybook/preview.ts

@@ -1,12 +1,18 @@
 import { app } from '@storybook/vue3';
 
 import Qui from '../src/qComponents';
+// custom localization
 import messages from './locales';
+// default localization
+import { localeEn, localeRu } from '../src/qComponents';
 
 app.use(Qui, {
   localization: {
     locale: 'en',
-    messages
+    messages: {
+      en: { ...localeEn, ...messages.en },
+      ru: { ...localeRu, ...messages.ru }
+    }
   }
 });
 

README.md

@@ -98,7 +98,12 @@ In main.js:
 
 ```js
 import { createApp } from 'vue';
-import { createQui, QButton, QProgressIndicatior } from '@qvant/qui-max';
+import {
+  createQui,
+  QButton,
+  QProgressIndicatior,
+  localeRu, // import default messages for different locales
+} from '@qvant/qui-max';
 
 // import required styles
 import '@qvant/qui-max/css/main';
@@ -111,13 +116,16 @@ import '@qvant/qui-max/css/q-progress-indicatior';
 
 const Qui = createQui({
   localization: {
-    // Russian language by default, you can set `en` for English
-    locale: 'en',
+    // English language by default, but we have two more locales out-of-the-box: 'ru' | 'zh'
+    // set 'ru' - for Russian, set 'zh' - for Chinese
+    locale: 'ru',
     messages: {
-      // rewrite default texts, see the source: src/qComponents/constants/locales
-      en: {
+      ru: {
+        // import and merge default messages for different locale
+        ...localeRu,
+        // rewrite default texts, see the source: src/qComponents/constants/locales or set your custom messages
         QDatepicker: {
-          placeholder: 'Pick your birthday!'
+          placeholder: 'Выберите дату рождения'
         }
       }
     },

src/qComponents/QDatePicker/src/helpers.ts

@@ -6,7 +6,7 @@ import {
   isAfter,
   isBefore
 } from 'date-fns';
-import { ru, enGB as en } from 'date-fns/locale';
+import { ru, enGB as en, zhHK as zh } from 'date-fns/locale';
 import { isString } from 'lodash-es';
 
 import type { Nullable } from '#/helpers';
@@ -46,7 +46,7 @@ const checkDisabled = (
   return disabled.some(Boolean);
 };
 
-const locales: Record<string, Locale> = { ru, en };
+const locales: Record<string, Locale> = { ru, en, zh };
 
 const formatToLocalReadableString = (
   value: Date,

src/qComponents/QDatePicker/src/tables/DateTable/DateTable.vue

@@ -56,7 +56,7 @@ import {
   Locale
 } from 'date-fns';
 import { throttle } from 'lodash-es';
-import { ru, enGB as en } from 'date-fns/locale';
+import { ru, enGB as en, zhHK as zh } from 'date-fns/locale';
 
 import { getConfig } from '@/qComponents/config';
 import { notNull } from '@/qComponents/helpers';
@@ -73,7 +73,7 @@ import {
 import type { DateTableInterface, DateTableState } from './types';
 import checkDisabled from './checkDisabled';
 
-const locales: Record<string, Locale> = { ru, en };
+const locales: Record<string, Locale> = { ru, en, zh };
 
 export default defineComponent({
   name: 'QDatePickerDateTable',

src/qComponents/index.ts

@@ -5,7 +5,11 @@ import 'focus-visible';
 
 import { setMessages, setI18n } from './locale';
 import { setConfig } from './config';
-import { en as localeEn, ru as localeRu } from './constants/locales';
+import {
+  en as localeEn,
+  ru as localeRu,
+  zh as localeZh
+} from './constants/locales';
 import QBreadcrumbs from './QBreadcrumbs';
 import QButton from './QButton';
 import QCascader from './QCascader';
@@ -186,7 +190,8 @@ export {
   QTextarea,
   QUpload,
   localeEn,
-  localeRu
+  localeRu,
+  localeZh
 };
 
 export * from './QBreadcrumbs';