chore(locale): add use-locale (#2642)

jd-opensource · Nov 14, 2023 · 272ce3d · 272ce3d
1 parent 9edced3
commit 272ce3d
Show file tree

Hide file tree

Showing 55 changed files with 351 additions and 211 deletions.
diff --git a/src/packages/__VUE/address/index.taro.vue b/src/packages/__VUE/address/index.taro.vue
@@ -131,14 +131,17 @@
 </template>
 <script lang="ts">
 import { reactive, ref, toRefs, watch, computed, PropType } from 'vue';
+import { Location, Location2, Check, Close, Left } from '@nutui/icons-vue-taro';
 import { popupProps } from '../popup/props';
 import { RegionData, CustomRegionData, existRegionData } from './type';
 import { createComponent } from '@/packages/utils/create';
 import NutPopup from '../popup/index.taro.vue';
 import NutElevator from '../elevator/index.taro.vue';
-const { create, componentName, translate } = createComponent('address');
-import { Location, Location2, Check, Close, Left } from '@nutui/icons-vue-taro';
 import NutScrollView from '../scroll-view/index.taro.vue';
+import { useLocale } from '@/packages/utils/useLocale';
+
+const cN = 'NutAddress';
+const { create } = createComponent('address');
 
 export default create({
   components: {
@@ -214,13 +217,7 @@ export default create({
   emits: ['update:visible', 'update:modelValue', 'type', 'change', 'selected', 'close', 'closeMask', 'switchModule'],
 
   setup(props, { emit }) {
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
+    const translate = useLocale(cN);
     const tabItemRef = reactive({
       province: ref<null | HTMLElement>(null),
       city: ref<null | HTMLElement>(null),
@@ -476,7 +473,6 @@ export default create({
     );
 
     return {
-      classes,
       showPopup,
       privateType,
       tabIndex,

diff --git a/src/packages/__VUE/address/index.vue b/src/packages/__VUE/address/index.vue
@@ -122,13 +122,16 @@
 </template>
 <script lang="ts">
 import { reactive, ref, toRefs, watch, nextTick, computed, Ref, PropType } from 'vue';
+import { Location, Location2, Check, Close, Left } from '@nutui/icons-vue';
 import { createComponent } from '@/packages/utils/create';
 import { RegionData, CustomRegionData, existRegionData } from './type';
 import { popupProps } from '../popup/props';
 import NutPopup from '../popup/index.vue';
 import NutElevator from '../elevator/index.vue';
-const { create, translate } = createComponent('address');
-import { Location, Location2, Check, Close, Left } from '@nutui/icons-vue';
+import { useLocale } from '@/packages/utils/useLocale';
+
+const { create } = createComponent('address');
+const cN = 'NutAddress';
 
 export default create({
   components: {
@@ -199,6 +202,7 @@ export default create({
   emits: ['update:visible', 'update:modelValue', 'type', 'change', 'selected', 'close', 'closeMask', 'switchModule'],
 
   setup(props: any, { emit }) {
+    const translate = useLocale(cN);
     const regionLine = ref<null | HTMLElement>(null);
     const tabRegion: Ref<any> = ref(null);
     const showPopup = ref(props.visible);

diff --git a/src/packages/__VUE/addresslist/components/ItemContents.taro.vue b/src/packages/__VUE/addresslist/components/ItemContents.taro.vue
@@ -26,9 +26,12 @@
 </template>
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
+import { useLocale } from '@/packages/utils/useLocale';
 const { create } = createComponent('address-list-item');
-const { translate } = createComponent('address-list');
 import { Del, Edit } from '@nutui/icons-vue-taro';
+
+const cN = 'NutAddressList';
+
 export default create({
   components: { Del, Edit },
   props: {
@@ -40,6 +43,7 @@ export default create({
   emits: ['delIcon', 'editIcon', 'clickItem'],
 
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const delClick = (event: Event) => {
       emit('delIcon', event, props.item);
       event.stopPropagation();

diff --git a/src/packages/__VUE/addresslist/components/ItemContents.vue b/src/packages/__VUE/addresslist/components/ItemContents.vue
@@ -26,9 +26,12 @@
 </template>
 <script lang="ts">
 import { createComponent } from '@/packages/utils/create';
+import { useLocale } from '@/packages/utils/useLocale';
 const { create } = createComponent('address-list-item');
-const { translate } = createComponent('address-list');
 import { Del, Edit } from '@nutui/icons-vue';
+
+const cN = 'NutAddressList';
+
 export default create({
   components: { Del, Edit },
   props: {
@@ -40,6 +43,7 @@ export default create({
   emits: ['delIcon', 'editIcon', 'clickItem'],
 
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const delClick = (event: Event) => {
       emit('delIcon', event, props.item);
       event.stopPropagation();

diff --git a/src/packages/__VUE/addresslist/index.taro.vue b/src/packages/__VUE/addresslist/index.taro.vue
@@ -1,5 +1,5 @@
 <template>
-  <view :class="classes">
+  <view class="nut-address-list">
     <general-shell
       v-for="(item, index) of dataArray"
       :key="index"
@@ -36,12 +36,15 @@
   </view>
 </template>
 <script lang="ts">
-import { reactive, onMounted, ref, watch, computed } from 'vue';
+import { reactive, onMounted, ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create, translate } = createComponent('address-list');
+const { create } = createComponent('address-list');
 import GeneralShell from './components/GeneralShell.taro.vue';
 import { floatData } from '@/packages/utils/util';
 import NutButton from '../button/index.taro.vue';
+import { useLocale } from '@/packages/utils/useLocale';
+
+const cN = 'NutAddressList';
 export default create({
   props: {
     data: {
@@ -72,6 +75,7 @@ export default create({
   emits: ['delIcon', 'editIcon', 'clickItem', 'longCopy', 'longSet', 'longDel', 'swipeDel', 'add'],
 
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const dataArray = ref([]) as any;
     const dataInfo = reactive({
       id: 2,
@@ -80,12 +84,6 @@ export default create({
       defaultAddress: false,
       fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
     });
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
     //磨平参数差异
     const trowelData = () => {
       if (Object.keys(props.dataOptions).length > 0) {
@@ -137,7 +135,6 @@ export default create({
       trowelData();
     });
     return {
-      classes,
       clickDelIcon,
       clickEditIcon,
       clickContentItem,

diff --git a/src/packages/__VUE/addresslist/index.vue b/src/packages/__VUE/addresslist/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="classes">
+  <div class="nut-address-list">
     <general-shell
       v-for="(item, index) of dataArray"
       :key="index"
@@ -36,12 +36,15 @@
   </div>
 </template>
 <script lang="ts">
-import { reactive, onMounted, ref, watch, computed } from 'vue';
+import { reactive, onMounted, ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create, translate } = createComponent('address-list');
+const { create } = createComponent('address-list');
 import GeneralShell from './components/GeneralShell.vue';
 import { floatData } from '@/packages/utils/util';
 import NutButton from '../button/index.vue';
+import { useLocale } from '@/packages/utils/useLocale';
+
+const cN = 'NutAddressList';
 export default create({
   props: {
     data: {
@@ -72,6 +75,7 @@ export default create({
   emits: ['delIcon', 'editIcon', 'clickItem', 'longCopy', 'longSet', 'longDel', 'swipeDel', 'add'],
 
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const dataArray = ref([]) as any;
     const dataInfo = reactive({
       id: 2,
@@ -80,12 +84,6 @@ export default create({
       defaultAddress: false,
       fullAddress: '北京市通州区测试测试测试测试测试测试测试测试测试'
     });
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
     //磨平参数差异
     const trowelData = () => {
       if (Object.keys(props.dataOptions).length > 0) {
@@ -137,7 +135,6 @@ export default create({
       trowelData();
     });
     return {
-      classes,
       clickDelIcon,
       clickEditIcon,
       clickContentItem,

diff --git a/src/packages/__VUE/audiooperate/index.vue b/src/packages/__VUE/audiooperate/index.vue
@@ -26,7 +26,10 @@
 import { toRefs, ref, useSlots, reactive, inject } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import NutButton from '../button/index.vue';
-const { create, translate } = createComponent('audio-operate');
+import { useLocale } from '@/packages/utils/useLocale';
+
+const { create } = createComponent('audio-operate');
+const cN = 'NutAudioOperate';
 
 export default create({
   props: {
@@ -42,6 +45,7 @@ export default create({
   emits: ['click'],
 
   setup(props) {
+    const translate = useLocale(cN);
     const audio: any = inject('audioParent');
     const parent: {
       children: [];

diff --git a/src/packages/__VUE/calendaritem/index.taro.vue b/src/packages/__VUE/calendaritem/index.taro.vue
@@ -84,13 +84,16 @@
 <script lang="ts">
 import { reactive, ref, watch, toRefs, computed, onMounted } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { create, translate } = createComponent('calendar-item');
 import Taro from '@tarojs/taro';
 import NutScrollView from '../scroll-view/index.taro.vue';
 import Utils from '@/packages/utils/date';
 import requestAniFrame from '@/packages/utils/raf';
 import { MonthInfo, Day, CalendarTaroState } from './type';
 import { useExpose } from '@/packages/utils/useExpose/index';
+import { useLocale } from '@/packages/utils/useLocale';
+
+const { create } = createComponent('calendar-item');
+const cN = 'NutCalendarItem';
 const TARO_ENV = Taro.getEnv();
 
 type StringArr = string[];
@@ -170,6 +173,7 @@ export default create({
   emits: ['choose', 'update', 'close', 'select'],
 
   setup(props, { emit, slots }) {
+    const translate = useLocale(cN);
     // 新增：自定义周起始日
     const weekdays = (translate('weekdays') as any).map((day: string, index: number) => ({
       day: day,

diff --git a/src/packages/__VUE/calendaritem/index.vue b/src/packages/__VUE/calendaritem/index.vue
@@ -77,11 +77,14 @@
 <script lang="ts">
 import { reactive, ref, watch, toRefs, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { create, translate } = createComponent('calendar-item');
 import Utils from '@/packages/utils/date';
 import requestAniFrame from '@/packages/utils/raf';
 import { MonthInfo, Day, CalendarState } from './type';
 import { useExpose } from '@/packages/utils/useExpose/index';
+import { useLocale } from '@/packages/utils/useLocale';
+
+const { create } = createComponent('calendar-item');
+const cN = 'NutCalendarItem';
 
 type StringArr = string[];
 
@@ -157,6 +160,7 @@ export default create({
   emits: ['choose', 'update', 'close', 'select'],
 
   setup(props, { emit, slots }) {
+    const translate = useLocale(cN);
     // 新增：自定义周起始日
     const weekdays = (translate('weekdays') as any).map((day: string, index: number) => ({
       day: day,

diff --git a/src/packages/__VUE/cascader/cascader-item.taro.vue b/src/packages/__VUE/cascader/cascader-item.taro.vue
@@ -34,13 +34,14 @@
 import { watch, ref, Ref, computed } from 'vue';
 import NutScrollView from '../scroll-view/index.taro.vue';
 import { createComponent } from '@/packages/utils/create';
-const { create, translate } = createComponent('cascader-item');
 import { convertListToOptions } from './helper';
 import { CascaderPane, CascaderOption, CascaderValue, convertConfig, CascaderTabs } from './types';
 import { Loading, Checklist } from '@nutui/icons-vue-taro';
 import NutTabs from '../tabs/index.taro.vue';
 import NutTabPane from '../tabpane/index.vue';
 import Tree from './tree';
+import { useLocale } from '@/packages/utils/useLocale';
+const { create } = createComponent('cascader-item');
 
 export default create({
   components: {
@@ -76,6 +77,7 @@ export default create({
   emits: ['update:modelValue', 'change', 'pathChange'],
 
   setup(props, { emit }) {
+    const translate = useLocale();
     const configs = computed(() => ({
       lazy: props.lazy,
       lazyLoad: props.lazyLoad,

diff --git a/src/packages/__VUE/cascader/cascader-item.vue b/src/packages/__VUE/cascader/cascader-item.vue
@@ -31,13 +31,14 @@
 <script lang="ts">
 import { watch, ref, Ref, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { create, translate } = createComponent('cascader-item');
 import { convertListToOptions } from './helper';
 import { CascaderPane, CascaderOption, CascaderValue, convertConfig, CascaderTabs } from './types';
 import { Loading, Checklist } from '@nutui/icons-vue';
 import NutTabs from '../tabs/index.vue';
 import NutTabPane from '../tabpane/index.vue';
 import Tree from './tree';
+import { useLocale } from '@/packages/utils/useLocale';
+const { create } = createComponent('cascader-item');
 
 export default create({
   components: {
@@ -72,6 +73,7 @@ export default create({
   emits: ['update:modelValue', 'change', 'pathChange'],
 
   setup(props, { emit }) {
+    const translate = useLocale();
     const configs = computed(() => ({
       lazy: props.lazy,
       lazyLoad: props.lazyLoad,

diff --git a/src/packages/__VUE/comment/components/CmtBottom.taro.vue b/src/packages/__VUE/comment/components/CmtBottom.taro.vue
@@ -25,9 +25,12 @@
 </template>
 <script lang="ts">
 import { ref, onMounted, PropType } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { create, translate } = createComponent('comment-bottom');
 import { Fabulous, Comment, MoreX } from '@nutui/icons-vue-taro';
+import { createComponent } from '@/packages/utils/create';
+import { useLocale } from '@/packages/utils/useLocale';
+
+const { create } = createComponent('comment-bottom');
+const cN = 'NutComment';
 
 export default create({
   props: {
@@ -48,6 +51,7 @@ export default create({
   components: { Fabulous, Comment, MoreX },
   emits: ['clickOperate', 'handleClick'],
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const showPopver = ref(false);
 
     const mergeOp = ref([]);

diff --git a/src/packages/__VUE/comment/components/CmtBottom.vue b/src/packages/__VUE/comment/components/CmtBottom.vue
@@ -25,9 +25,12 @@
 </template>
 <script lang="ts">
 import { ref, onMounted, PropType } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-const { create, translate } = createComponent('comment-bottom');
 import { Fabulous, Comment, MoreX } from '@nutui/icons-vue';
+import { createComponent } from '@/packages/utils/create';
+import { useLocale } from '@/packages/utils/useLocale';
+
+const { create } = createComponent('comment-bottom');
+const cN = 'NutComment';
 
 export default create({
   props: {
@@ -48,6 +51,7 @@ export default create({
   components: { Fabulous, Comment, MoreX },
   emits: ['clickOperate', 'handleClick'],
   setup(props, { emit }) {
+    const translate = useLocale(cN);
     const showPopver = ref(false);
 
     const mergeOp = ref([]);