feat!: remove all components' locale prop

wxsms · wxsms · commit 067a9f6133bd · 2021-11-23T11:00:59.000+08:00
diff --git a/src/components/messagebox/MessageBox.vue b/src/components/messagebox/MessageBox.vue
@@ -76,62 +76,34 @@
 
 <script>
 import { TYPES } from '../../constants/messagebox.constants';
-import Local from '../../mixins/locale.mixin';
+import { t } from '../../locale';
 import Modal from '../../components/modal/Modal.vue';
 import Btn from '../../components/button/Btn.vue';
 import { isExist } from '../../utils/object.utils';
 
 export default {
   components: { Modal, Btn },
-  mixins: [Local],
   props: {
     backdrop: { type: null, default: undefined },
     title: { type: String, default: undefined },
     content: { type: String, default: undefined },
-    html: {
-      type: Boolean,
-      default: false,
-    },
+    html: { type: Boolean, default: false },
     okText: { type: String, default: undefined },
-    okType: {
-      type: String,
-      default: 'primary',
-    },
+    okType: { type: String, default: 'primary' },
     cancelText: { type: String, default: undefined },
-    cancelType: {
-      type: String,
-      default: 'default',
-    },
-    type: {
-      type: Number,
-      default: TYPES.ALERT,
-    },
-    size: {
-      type: String,
-      default: 'sm',
-    },
-    cb: {
-      type: Function,
-      required: true,
-    },
+    cancelType: { type: String, default: 'default' },
+    type: { type: Number, default: TYPES.ALERT },
+    size: { type: String, default: 'sm' },
+    cb: { type: Function, required: true },
     validator: {
       type: Function,
       default: () => null,
     },
     customClass: { type: null, default: undefined },
     defaultValue: { type: String, default: undefined },
-    inputType: {
-      type: String,
-      default: 'text',
-    },
-    autoFocus: {
-      type: String,
-      default: 'ok',
-    },
-    reverseButtons: {
-      type: Boolean,
-      default: false,
-    },
+    inputType: { type: String, default: 'text' },
+    autoFocus: { type: String, default: 'ok' },
+    reverseButtons: { type: Boolean, default: false },
   },
   data() {
     return {
@@ -171,6 +143,7 @@ export default {
   //   console.log('unmounted')
   // },
   methods: {
+    t,
     toggle(show, msg) {
       this.$refs.modal.toggle(show, msg);
     },
diff --git a/src/components/modal/Modal.vue b/src/components/modal/Modal.vue
@@ -59,7 +59,7 @@
 </template>
 
 <script>
-import Local from '../../mixins/locale.mixin';
+import { t } from '../../locale';
 import Btn from './../button/Btn.vue';
 import {
   EVENTS,
@@ -79,65 +79,25 @@ const IN = 'in';
 
 export default {
   components: { Btn },
-  mixins: [Local],
   props: {
-    modelValue: {
-      type: Boolean,
-      default: false,
-    },
+    modelValue: { type: Boolean, default: false },
     title: { type: String, default: undefined },
     size: { type: String, default: undefined },
-    backdrop: {
-      type: Boolean,
-      default: true,
-    },
-    footer: {
-      type: Boolean,
-      default: true,
-    },
-    header: {
-      type: Boolean,
-      default: true,
-    },
+    backdrop: { type: Boolean, default: true },
+    footer: { type: Boolean, default: true },
+    header: { type: Boolean, default: true },
     cancelText: { type: String, default: undefined },
-    cancelType: {
-      type: String,
-      default: 'default',
-    },
+    cancelType: { type: String, default: 'default' },
     okText: { type: String, default: undefined },
-    okType: {
-      type: String,
-      default: 'primary',
-    },
-    dismissBtn: {
-      type: Boolean,
-      default: true,
-    },
-    transition: {
-      type: Number,
-      default: 150,
-    },
-    autoFocus: {
-      type: Boolean,
-      default: false,
-    },
-    keyboard: {
-      type: Boolean,
-      default: true,
-    },
+    okType: { type: String, default: 'primary' },
+    dismissBtn: { type: Boolean, default: true },
+    transition: { type: Number, default: 150 },
+    autoFocus: { type: Boolean, default: false },
+    keyboard: { type: Boolean, default: true },
     beforeClose: { type: Function, default: undefined },
-    zOffset: {
-      type: Number,
-      default: 20,
-    },
-    appendToBody: {
-      type: Boolean,
-      default: false,
-    },
-    displayStyle: {
-      type: String,
-      default: 'block',
-    },
+    zOffset: { type: Number, default: 20 },
+    appendToBody: { type: Boolean, default: false },
+    displayStyle: { type: String, default: 'block' },
   },
   emits: ['update:modelValue', 'show', 'hide'],
   data() {
@@ -177,6 +137,7 @@ export default {
     off(window, EVENTS.KEY_UP, this.onKeyPress);
   },
   methods: {
+    t,
     onKeyPress(event) {
       if (this.keyboard && this.modelValue && event.keyCode === 27) {
         const thisModal = this.$refs.backdrop;
diff --git a/src/components/select/MultiSelect.vue b/src/components/select/MultiSelect.vue
@@ -93,70 +93,30 @@
 </template>
 
 <script>
-import Local from '../../mixins/locale.mixin';
+import { t } from '../../locale';
 import Dropdown from '../dropdown/Dropdown.vue';
 import { onlyUnique } from '../../utils/array.utils';
 
 export default {
   components: { Dropdown },
-  mixins: [Local],
   props: {
-    modelValue: {
-      type: Array,
-      required: true,
-    },
-    options: {
-      type: Array,
-      required: true,
-    },
-    labelKey: {
-      type: String,
-      default: 'label',
-    },
-    valueKey: {
-      type: String,
-      default: 'value',
-    },
-    limit: {
-      type: Number,
-      default: 0,
-    },
+    modelValue: { type: Array, required: true },
+    options: { type: Array, required: true },
+    labelKey: { type: String, default: 'label' },
+    valueKey: { type: String, default: 'value' },
+    limit: { type: Number, default: 0 },
     size: { type: String, default: undefined },
     placeholder: { type: String, default: undefined },
-    split: {
-      type: String,
-      default: ', ',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    appendToBody: {
-      type: Boolean,
-      default: false,
-    },
-    block: {
-      type: Boolean,
-      default: false,
-    },
-    collapseSelected: {
-      type: Boolean,
-      default: false,
-    },
-    filterable: {
-      type: Boolean,
-      default: false,
-    },
-    filterAutoFocus: {
-      type: Boolean,
-      default: true,
-    },
+    split: { type: String, default: ', ' },
+    disabled: { type: Boolean, default: false },
+    appendToBody: { type: Boolean, default: false },
+    block: { type: Boolean, default: false },
+    collapseSelected: { type: Boolean, default: false },
+    filterable: { type: Boolean, default: false },
+    filterAutoFocus: { type: Boolean, default: true },
     filterFunction: { type: Function, default: undefined },
     filterPlaceholder: { type: String, default: undefined },
-    selectedIcon: {
-      type: String,
-      default: 'glyphicon glyphicon-ok',
-    },
+    selectedIcon: { type: String, default: 'glyphicon glyphicon-ok' },
     itemSelectedClass: { type: String, default: undefined },
   },
   emits: [
@@ -273,6 +233,7 @@ export default {
     this.els = [this.$el];
   },
   methods: {
+    t,
     goPrevOption() {
       if (!this.showDropdown) {
         return;
diff --git a/src/components/timepicker/TimePicker.vue b/src/components/timepicker/TimePicker.vue
@@ -106,7 +106,7 @@
 </template>
 
 <script>
-import Local from '../../mixins/locale.mixin';
+import { t } from '../../locale';
 import Btn from './../button/Btn.vue';
 import { pad } from '../../utils/string.utils';
 
@@ -117,46 +117,21 @@ const cutUpAmAndPm = 12;
 
 export default {
   components: { Btn },
-  mixins: [Local],
   props: {
-    modelValue: {
-      type: Date,
-      required: true,
-    },
-    showMeridian: {
-      type: Boolean,
-      default: true,
-    },
+    modelValue: { type: Date, required: true },
+    showMeridian: { type: Boolean, default: true },
     min: { type: null, default: undefined },
     max: { type: null, default: undefined },
-    hourStep: {
-      type: Number,
-      default: 1,
-    },
-    minStep: {
-      type: Number,
-      default: 1,
-    },
-    readonly: {
-      type: Boolean,
-      default: false,
-    },
-    controls: {
-      type: Boolean,
-      default: true,
-    },
-    iconControlUp: {
-      type: String,
-      default: 'glyphicon glyphicon-chevron-up',
-    },
+    hourStep: { type: Number, default: 1 },
+    minStep: { type: Number, default: 1 },
+    readonly: { type: Boolean, default: false },
+    controls: { type: Boolean, default: true },
+    iconControlUp: { type: String, default: 'glyphicon glyphicon-chevron-up' },
     iconControlDown: {
       type: String,
       default: 'glyphicon glyphicon-chevron-down',
     },
-    inputWidth: {
-      type: Number,
-      default: 50,
-    },
+    inputWidth: { type: Number, default: 50 },
   },
   emits: ['update:modelValue'],
   data() {
@@ -218,6 +193,7 @@ export default {
     this.updateByValue(this.modelValue);
   },
   methods: {
+    t,
     updateByValue(value) {
       if (isNaN(value.getTime())) {
         this.hours = 0;
diff --git a/src/mixins/locale.mixin.js b/src/mixins/locale.mixin.js
