Drop vue-i18n as dependence (#106)

altai-ui · Jul 1, 2021 · 9646a0c · 9646a0c
1 parent a4b353f
commit 9646a0c
Show file tree

Hide file tree

Showing 31 changed files with 552 additions and 574 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -6,7 +6,7 @@ import messages from './locales';
 app.use(Qui, {
   localization: {
     locale: 'en',
-    customI18nMessages: messages
+    messages
   }
 });
 

diff --git a/README.md b/README.md
@@ -85,7 +85,7 @@ export default {
 Configure setup:
 
 - import styles separately to avoid unused css
-- set customI18nMessages to support any language for components
+- set `localization.messages` to support any language for components
 - change zIndex of appeared components (e.g Dialogs, Notifications, Dropdowns etc.)
 - control setup of components
 
@@ -107,7 +107,7 @@ const Qui = createQui({
   localization: {
     // Russian language by default, you can set `en` for English
     locale: 'en',
-    customI18nMessages: {
+    messages: {
       // rewrite default texts, see the source: src/qComponents/constants/locales
       en: {
         QDatepicker: {
@@ -132,7 +132,7 @@ Please refer to each component's [Stories](https://qvant-lab.github.io/qui-max/)
 
 - Russian ✅
 - English ✅
-- Also you can use any language by setting texts for components via 'customI18nMessages' property in the Qui instance. See the example above.
+- Also you can use any language by setting texts for components via `localization.messages` property in the Qui instance. See the example above.
 
 ## Browser Support
 

diff --git a/package.json b/package.json
@@ -26,8 +26,7 @@
     "colord": "^2.0.1",
     "date-fns": "^2.22.1",
     "focus-visible": "^5.2.0",
-    "lodash-es": "^4.17.21",
-    "vue-i18n": "^9.0.0"
+    "lodash-es": "^4.17.21"
   },
   "peerDependencies": {
     "vue": "^3.1.2"
@@ -36,20 +35,20 @@
     "@babel/core": "^7.14.6",
     "@qvant/prettier-config": "^0.0.1",
     "@qvant/stylelint-config": "^0.0.1",
-    "@storybook/addon-actions": "^6.3.0",
-    "@storybook/addon-essentials": "^6.3.0",
-    "@storybook/addon-links": "^6.3.0",
-    "@storybook/addon-storysource": "^6.3.0",
-    "@storybook/builder-webpack5": "^6.3.0",
-    "@storybook/manager-webpack5": "^6.3.0",
+    "@storybook/addon-actions": "^6.3.1",
+    "@storybook/addon-essentials": "^6.3.1",
+    "@storybook/addon-links": "^6.3.1",
+    "@storybook/addon-storysource": "^6.3.1",
+    "@storybook/builder-webpack5": "^6.3.1",
+    "@storybook/manager-webpack5": "^6.3.1",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/storybook-deployer": "^2.8.10",
-    "@storybook/vue3": "^6.3.0",
+    "@storybook/vue3": "^6.3.1",
     "@types/lodash-es": "^4.17.4",
     "@types/node": "^15.12.5",
     "@types/sass": "^1.16.0",
-    "@typescript-eslint/eslint-plugin": "^4.27.0",
-    "@typescript-eslint/parser": "^4.27.0",
+    "@typescript-eslint/eslint-plugin": "^4.28.1",
+    "@typescript-eslint/parser": "^4.28.1",
     "@vitejs/plugin-vue": "^1.2.4",
     "@vue/compiler-sfc": "^3.1.2",
     "@vue/eslint-config-typescript": "^7.0.0",
@@ -78,7 +77,7 @@
     "vite": "^2.3.8",
     "vite-plugin-dts": "^0.5.1",
     "vue": "^3.1.2",
-    "vue-loader": "^16.2.0"
+    "vue-loader": "^16.3.0"
   },
   "files": ["dist"],
   "main": "./dist/qui-max.umd.js",

diff --git a/src/qComponents/QCascader/src/QCascaderInput/QCascaderInput.vue b/src/qComponents/QCascader/src/QCascaderInput/QCascaderInput.vue
@@ -32,8 +32,8 @@
 <script lang="ts">
 import { defineComponent, inject, computed } from 'vue';
 import { isNumber, isEmpty } from 'lodash-es';
-import { useI18n } from 'vue-i18n';
 
+import { t } from '@/qComponents/locale';
 import QInput from '@/qComponents/QInput';
 import type { Nullable } from '#/helpers';
 
@@ -73,8 +73,6 @@ export default defineComponent({
         !isEmpty(qCascader.modelValue.value)
     );
 
-    const { t } = useI18n();
-
     const placeholder = computed<Nullable<string>>(() => {
       const text = qCascader.placeholder.value ?? t('QCascader.placeholder');
       if (!qCascader.multiple.value) return text;

diff --git a/src/qComponents/QColorPicker/src/QPickerDropdown/QPickerDropdown.vue b/src/qComponents/QColorPicker/src/QPickerDropdown/QPickerDropdown.vue
@@ -61,10 +61,10 @@ import {
   nextTick,
   inject
 } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { colord } from 'colord';
 import type { Colord } from 'colord';
 
+import { t } from '@/qComponents/locale';
 import { validateArray } from '@/qComponents/helpers';
 import { CLEAR_EVENT, CLOSE_EVENT } from '@/qComponents/constants/events';
 import QButton from '@/qComponents/QButton';
@@ -245,8 +245,6 @@ export default defineComponent({
       { immediate: true }
     );
 
-    const { t } = useI18n();
-
     return {
       t,
       dropdown,

diff --git a/src/qComponents/QColorPicker/src/QPickerDropdown/types.ts b/src/qComponents/QColorPicker/src/QPickerDropdown/types.ts
@@ -1,5 +1,4 @@
 import type { Ref, ComputedRef } from 'vue';
-import type { Composer } from 'vue-i18n';
 
 import type { Nullable } from '#/helpers';
 
@@ -16,7 +15,7 @@ export interface QPickerDropdownProps {
 }
 
 export interface QPickerDropdownInstance {
-  t: Composer['t'];
+  t: (key: string) => string;
   dropdown: Ref<Nullable<HTMLElement>>;
   saturation: Ref<number>;
   value: Ref<number>;

diff --git a/src/qComponents/QDatePicker/src/QDatePicker.vue b/src/qComponents/QDatePicker/src/QDatePicker.vue
@@ -114,9 +114,9 @@ import {
   startOfYear,
   parseISO
 } from 'date-fns';
-import { useI18n } from 'vue-i18n';
 
 import { getConfig } from '@/qComponents/config';
+import { t } from '@/qComponents/locale';
 import { notNull, validateArray } from '@/qComponents/helpers';
 import QInput from '@/qComponents/QInput';
 import type { QFormProvider } from '@/qComponents/QForm';
@@ -654,8 +654,6 @@ export default defineComponent({
       }
     );
 
-    const { t } = useI18n();
-
     onBeforeUnmount(() => destroyPopper());
 
     provide<QDatePickerProvider>('qDatePicker', {

diff --git a/src/qComponents/QDatePicker/src/panel/Date/DatePanel.vue b/src/qComponents/QDatePicker/src/panel/Date/DatePanel.vue
@@ -105,8 +105,8 @@ import {
 import type { PropType } from 'vue';
 import { subMonths, addMonths, subYears, addYears } from 'date-fns';
 import { isNil } from 'lodash-es';
-import { useI18n } from 'vue-i18n';
 
+import { t } from '@/qComponents/locale';
 import { getConfig } from '@/qComponents/config';
 import type { Nullable } from '#/helpers';
 
@@ -333,8 +333,6 @@ export default defineComponent({
       ctx.emit('pick', value);
     };
 
-    const { t } = useI18n();
-
     const moveWithinPeriod = (e: KeyboardEvent): void => {
       if (!state?.periodCells?.length || !state.panelInFocus) return;
       const nextNodeIndex = getPeriodNextNodeIndex(

diff --git a/src/qComponents/QDatePicker/src/panel/Date/types.ts b/src/qComponents/QDatePicker/src/panel/Date/types.ts
@@ -1,5 +1,4 @@
 import type { ComputedRef, Ref } from 'vue';
-import type { TranslateResult, Path, Locale } from 'vue-i18n';
 
 import type { Nullable } from '#/helpers';
 
@@ -43,7 +42,7 @@ interface DatePanelInstance {
   handleShortcutClick: (shortcut: Date) => void;
   handlePeriodPick: (month: number, year: number, type: string) => void;
   handleDatePick: (value: DatePanelPropModelValue) => void;
-  t: (key: Path, locale?: Locale) => TranslateResult;
+  t: (key: string) => string;
 }
 
 export {

diff --git a/src/qComponents/QDatePicker/src/types.ts b/src/qComponents/QDatePicker/src/types.ts
@@ -1,6 +1,5 @@
 import type { Instance } from '@popperjs/core';
 import type { ComputedRef, Ref } from 'vue';
-import type { Composer } from 'vue-i18n';
 
 import type { QInputInstance } from '@/qComponents/QInput';
 import type { Nullable, UnwrappedInstance } from '#/helpers';
@@ -90,7 +89,6 @@ interface QDatePickerInstance {
   root: Ref<Nullable<HTMLElement>>;
   panel: Ref<UnwrappedInstance<DatePanelInstance>>;
   reference: Ref<Nullable<UnwrappedInstance<QInputInstance> | HTMLElement>>;
-
   isRanged: ComputedRef<boolean>;
   isPickerDisabled: ComputedRef<boolean>;
   isValueEmpty: ComputedRef<boolean>;
@@ -121,7 +119,7 @@ interface QDatePickerInstance {
   handleRangeClick: () => void;
   handleClose: () => void;
   handleIconClick: (event: MouseEvent) => void;
-  t: Composer['t'];
+  t: (key: string) => string;
 }
 
 export {

diff --git a/src/qComponents/QInput/src/QInput.vue b/src/qComponents/QInput/src/QInput.vue
@@ -59,7 +59,7 @@
 
 <script lang="ts">
 import { inject, computed, ref, reactive, watch, defineComponent } from 'vue';
-import { useI18n } from 'vue-i18n';
+
 import {
   UPDATE_MODEL_VALUE_EVENT,
   CHANGE_EVENT,
@@ -68,6 +68,7 @@ import {
   CLEAR_EVENT,
   INPUT_EVENT
 } from '@/qComponents/constants/events';
+import { t } from '@/qComponents/locale';
 import type { QFormProvider } from '@/qComponents/QForm';
 import type { QFormItemProvider } from '@/qComponents/QFormItem';
 import type { Nullable } from '#/helpers';
@@ -269,8 +270,6 @@ export default defineComponent({
       }
     );
 
-    const { t } = useI18n();
-
     return {
       root,
       state,

diff --git a/src/qComponents/QInput/src/types.ts b/src/qComponents/QInput/src/types.ts
@@ -1,5 +1,4 @@
 import type { Ref, ComputedRef } from 'vue';
-import type { Composer } from 'vue-i18n';
 
 import type { Nullable } from '#/helpers';
 
@@ -44,5 +43,5 @@ export interface QInputInstance {
   handleInput: (event: Event) => void;
   handleChange: (event: Event) => void;
   updateModel: (event: Event) => void;
-  t: Composer['t'];
+  t: (key: string) => string;
 }
diff --git a/src/qComponents/QMessageBox/src/QMessageBoxContainer/index.vue b/src/qComponents/QMessageBox/src/QMessageBoxContainer/index.vue
@@ -139,7 +139,13 @@ export default defineComponent({
     const zIndex = getConfig('nextZIndex');
 
     const preparedContent = computed<QMessageBoxComponent>(() => {
-      if (isExternalComponent(props.content)) return props.content;
+      if (isExternalComponent(props.content)) {
+        return {
+          props: {},
+          listeners: {},
+          ...props.content
+        };
+      }
 
       if (isInternalComponent(props.content)) {
         return {

diff --git a/src/qComponents/QMessageBox/src/index.ts b/src/qComponents/QMessageBox/src/index.ts
@@ -1,7 +1,6 @@
 import { createApp, nextTick } from 'vue';
 import type { App } from 'vue';
 
-import { installI18n } from '@/qComponents/constants/locales';
 import type { Optional, UnwrappedInstance } from '#/helpers';
 
 import { QMessageBoxContainer } from './QMessageBoxContainer';
@@ -49,8 +48,6 @@ export const createMessageBox = (
 
     options?.onBeforeMount?.(app);
 
-    installI18n(app);
-
     const container = app.mount(document.createElement('div'));
     options?.onMounted?.(
       app,

diff --git a/src/qComponents/QNotification/src/index.ts b/src/qComponents/QNotification/src/index.ts
@@ -1,6 +1,5 @@
 import { createApp, ref, nextTick } from 'vue';
 
-import { installI18n } from '@/qComponents/constants/locales';
 import { randId } from '@/qComponents/helpers';
 
 import QNotificationContainer from './QNotificationContainer';
@@ -38,8 +37,6 @@ export const createNotification = (
         onRemove: closeNotify
       });
 
-      installI18n(app);
-
       const component = app.mount(document.createElement('div'));
 
       config?.onMounted?.(component, app);

diff --git a/src/qComponents/QSelect/src/QSelect.vue b/src/qComponents/QSelect/src/QSelect.vue
@@ -113,8 +113,8 @@ import {
   isNumber
 } from 'lodash-es';
 import { createPopper } from '@popperjs/core';
-import { useI18n } from 'vue-i18n';
 
+import { t } from '@/qComponents/locale';
 import { useResizeListener } from '@/qComponents/hooks';
 import type { QInputInstance } from '@/qComponents/QInput';
 import type { QFormProvider } from '@/qComponents/QForm';
@@ -255,8 +255,6 @@ export default defineComponent({
     const qFormItem = inject<Nullable<QFormItemProvider>>('qFormItem', null);
     const qForm = inject<Nullable<QFormProvider>>('qForm', null);
 
-    const { t } = useI18n();
-
     const state = reactive<QSelectState>({
       options: [],
       selected: props.multiple ? [] : null,

diff --git a/src/qComponents/QSelect/src/types.ts b/src/qComponents/QSelect/src/types.ts
@@ -1,6 +1,5 @@
 import type { Ref, ComputedRef } from 'vue';
 import type { Instance as PopperInstance } from '@popperjs/core';
-import type { Composer } from 'vue-i18n';
 
 import type { QOptionModel, QOptionPropValue } from '@/qComponents/QOption';
 import type { QScrollbarInstance } from '@/qComponents/QScrollbar';
@@ -50,7 +49,7 @@ interface QSelectInstance {
   onInputChange: () => void;
   deleteTag: (tag: QOptionModel) => void;
   afterLeave: () => void;
-  t: Composer['t'];
+  t: (key: string) => string;
 }
 
 interface QSelectProvider {

diff --git a/src/qComponents/QTable/src/QTableEmpty/QTableEmpty.vue b/src/qComponents/QTable/src/QTableEmpty/QTableEmpty.vue
@@ -18,8 +18,8 @@
 
 <script lang="ts">
 import { defineComponent, computed } from 'vue';
-import { useI18n } from 'vue-i18n';
 
+import { t } from '@/qComponents/locale';
 import image from '@/assets/empty-table-v2.svg';
 import type { QTableEmptyProps, QTableEmptyInstance } from './types';
 
@@ -35,8 +35,6 @@ export default defineComponent({
   },
 
   setup(props: QTableEmptyProps): QTableEmptyInstance {
-    const { t } = useI18n();
-
     const noDataText = computed<string>(
       () => props.emptyText || t('QTable.noDataText')
     );

diff --git a/src/qComponents/QTable/src/QTableEmpty/types.ts b/src/qComponents/QTable/src/QTableEmpty/types.ts
@@ -1,5 +1,4 @@
 import type { ComputedRef } from 'vue';
-import type { Composer } from 'vue-i18n';
 
 import type { Nullable } from '#/helpers';
 
@@ -8,7 +7,7 @@ export interface QTableEmptyProps {
 }
 
 export interface QTableEmptyInstance {
-  t: Composer['t'];
+  t: (key: string) => string;
   image: string;
   noDataText: ComputedRef<string>;
 }
diff --git a/src/qComponents/QTextarea/src/QTextarea.vue b/src/qComponents/QTextarea/src/QTextarea.vue
@@ -31,8 +31,8 @@ import {
   watch,
   PropType
 } from 'vue';
-import { useI18n } from 'vue-i18n';
 
+import { t } from '@/qComponents/locale';
 import { validateArray } from '@/qComponents/helpers';
 import {
   UPDATE_MODEL_VALUE_EVENT,
@@ -211,8 +211,6 @@ export default defineComponent({
       resizeTextarea();
     });
 
-    const { t } = useI18n();
-
     return {
       t,
       textareaCalcStyle,