✨(page): i18n support

package/component/src/component/datePicker/components/DatePanel.vue

@@ -14,10 +14,10 @@
         >
         <div class="laydate-set-ym">
           <span @click="datePicker.showPanel.value = 'year'"
-            >{{ datePicker.currentYear.value }} 年</span
+            >{{ datePicker.currentYear.value }} {{ t('datePicker.year') }}</span
           >
           <span @click="datePicker.showPanel.value = 'month'"
-            >{{ datePicker.currentMonth.value + 1 }} 月</span
+            >{{ datePicker.currentMonth.value + 1 }} {{ t('datePicker.month') }}</span
           >
         </div>
         <i
@@ -42,7 +42,7 @@
           v-if="datePicker.type === 'datetime'"
           @click="datePicker.showPanel.value = 'time'"
           class="laydate-btns-time"
-          >选择时间</span
+          >{{ t('datePicker.selectTime')}}</span
         >
       </PanelFoot>
     </div>
@@ -60,10 +60,13 @@ import { setDateList } from "../day";
 import PanelFoot from "./PanelFoot.vue";
 import DateContent from "./components/DateContent.vue";
 import dayjs from "dayjs";
+import { useI18n } from "../../../language";
 
 export interface TimePanelProps {
   modelValue: number;
 }
+
+const { t } = useI18n();
 const props = withDefaults(defineProps<TimePanelProps>(), {});
 const emits = defineEmits(["update:modelValue", "ok"]);
 const Day = ref(props.modelValue);

package/component/src/component/datePicker/components/DateRange.vue

@@ -19,7 +19,7 @@
           <div class="laydate-set-ym">
             <lay-dropdown ref="dropdownYearPanelRefLeft">
               <span class="laydate-range-time"
-                >{{ startTime.year || "--" }}年</span
+                >{{ startTime.year || "--" }} {{ t('datePicker.year') }}</span
               >
               <template #content>
                 <YearPanel
@@ -31,7 +31,7 @@
             </lay-dropdown>
             <lay-dropdown ref="dropdownMonthPanelRefLeft">
               <span class="laydate-range-time"
-                >{{ startTime.month + 1 }}月</span
+                >{{ startTime.month + 1 }} {{ t('datePicker.month') }}</span
               >
               <template #content>
                 <MonthPanel
@@ -75,7 +75,7 @@
         <div class="layui-laydate-header">
           <div class="laydate-set-ym">
             <lay-dropdown ref="dropdownYearPanelRefRight">
-              <span class="laydate-range-time">{{ startTime.year }}年</span>
+              <span class="laydate-range-time">{{ startTime.year }} {{ t('datePicker.year') }}</span>
               <template #content>
                 <YearPanel
                   class="time-panel"
@@ -90,7 +90,7 @@
                   startTime.month + 2 > 12
                     ? startTime.month - 10
                     : startTime.month + 2
-                }}月</span
+                }}  {{ t('datePicker.month') }}</span
               >
               <template #content>
                 <MonthPanel
@@ -186,6 +186,7 @@ import TimePanel from "./TimePanel.vue";
 import YearPanel from "./YearPanel.vue";
 import MonthPanel from "./MonthPanel.vue";
 import dayjs from "dayjs";
+import { useI18n } from "../../../language";
 export interface DateRangeProps {
   startTime: string;
   endTime: string;
@@ -198,6 +199,8 @@ const emits = defineEmits([
 ]);
 const datePicker: provideType = inject("datePicker") as provideType;
 
+const { t } = useI18n(); 
+
 const prevDateList = ref<any>([]);
 const nextDateList = ref<any>([]);
 const startTime = reactive({

package/component/src/component/datePicker/components/MonthPanel.vue

@@ -4,7 +4,7 @@
       <div class="layui-laydate-header">
         <div class="laydate-set-ym">
           <span @click="datePicker.showPanel.value = 'month'">{{
-            typeof Month !== "string" ? Month + 1 + " 月" : "请选择月份"
+            typeof Month !== "string" ? Month + 1 + t('datePicker.month') : t('datePicker.selectMonth')
           }}</span>
         </div>
       </div>
@@ -26,7 +26,7 @@
         v-if="datePicker.type === 'yearmonth'"
         @click="datePicker.showPanel.value = 'year'"
         class="laydate-btns-time"
-        >选择年份</span
+        >{{ t('datePicker.selectYear') }}</span
       >
     </PanelFoot>
   </div>
@@ -38,6 +38,7 @@ export default {
 </script>
 <script lang="ts" setup>
 import dayjs from "dayjs";
+import { useI18n } from "../../../language";
 import { inject, ref, watch } from "vue";
 import { provideType } from "../interface";
 import PanelFoot from "./PanelFoot.vue";
@@ -52,6 +53,7 @@ const props = withDefaults(defineProps<TimePanelProps>(), {
 const emits = defineEmits(["update:modelValue", "ok"]);
 const datePicker: provideType = inject("datePicker") as provideType;
 const Month = ref(props.modelValue);
+const { t } = useI18n();
 
 const MONTH_NAME = [
   "1月",

package/component/src/component/datePicker/components/MonthRange.vue

@@ -11,7 +11,7 @@
           <div class="laydate-set-ym">
             <lay-dropdown ref="dropdownYearPanelRefLeft">
               <span class="laydate-range-time"
-                >{{ startTime.year || "--" }}年</span
+                >{{ startTime.year || "--" }} {{ t('datePicker.year') }}</span
               >
               <template #content>
                 <YearPanel
@@ -49,7 +49,7 @@
         <div class="layui-laydate-header">
           <div class="laydate-set-ym">
             <lay-dropdown ref="dropdownYearPanelRefRight">
-              <span class="laydate-range-time">{{ startTime.year + 1 }}年</span>
+              <span class="laydate-range-time">{{ startTime.year + 1 }} {{ t('datePicker.year') }}</span>
               <template #content>
                 <YearPanel
                   class="time-panel"
@@ -111,16 +111,23 @@ import { provideType } from "../interface";
 import PanelFoot from "./PanelFoot.vue";
 import YearPanel from "./YearPanel.vue";
 import dayjs from "dayjs";
+import { useI18n } from "../../../language";
+
 export interface DateRangeProps {
   startTime: string;
   endTime: string;
 }
+
 const props = withDefaults(defineProps<DateRangeProps>(), {});
+
 const emits = defineEmits([
   "update:modelValue",
   "update:startTime",
   "update:endTime",
 ]);
+
+const { t } = useI18n();
+
 const datePicker: provideType = inject("datePicker") as provideType;
 
 const startTime = reactive({

package/component/src/component/datePicker/components/PanelFoot.vue

@@ -3,13 +3,13 @@
     <slot></slot>
     <div class="laydate-footer-btns">
       <span lay-type="clear" class="laydate-btns-clear" @click="handelClear"
-        >清空</span
+        >{{ t('datePicker.clear')}}</span
       >
       <span lay-type="now" class="laydate-btns-now" @click="handelNow"
-        >现在</span
+        >{{ t('datePicker.now')}}</span
       >
       <span lay-type="confirm" class="laydate-btns-confirm" @click="handelOk"
-        >确定</span
+        >{{ t('datePicker.confirm')}}</span
       >
     </div>
   </div>
@@ -20,7 +20,11 @@ export default {
 };
 </script>
 <script lang="ts" setup>
-//foot组件只负责 显示，具体逻辑在父组件中实现 不然太乱了
+import { useI18n } from '../../../language';
+
+
+const { t } = useI18n();
+
 const emits = defineEmits(["ok", "clear", "now"]);
 
 const handelOk = () => {

package/component/src/component/datePicker/components/TimePanel.vue

@@ -3,7 +3,7 @@
     <div class="layui-laydate-main laydate-main-list-0 laydate-time-show">
       <div class="layui-laydate-header">
         <div class="laydate-set-ym">
-          <span class="laydate-time-text">选择时间</span>
+          <span class="laydate-time-text">{{t('datePicker.selectTime')}}</span>
         </div>
       </div>
       <div class="layui-laydate-content" style="height: 210px">
@@ -35,7 +35,7 @@
         v-if="datePicker.type === 'datetime' && !datePicker.range"
         @click="datePicker.showPanel.value = 'datetime'"
         class="laydate-btns-time"
-        >选择日期</span
+        >{{t('datePicker.selectDate')}}</span
       >
       <template v-else-if="!isNaN(hms.hh) && !isNaN(hms.mm) && !isNaN(hms.ss)">
         {{
@@ -52,7 +52,8 @@ export default {
 </script>
 <script lang="ts" setup>
 import dayjs from "dayjs";
-import { inject, onMounted, ref, Ref, nextTick, watch, h } from "vue";
+import { useI18n } from "../../../language";
+import { inject, onMounted, ref, nextTick, watch } from "vue";
 import { provideType } from "../interface";
 import PanelFoot from "./PanelFoot.vue";
 export interface hmsType {
@@ -68,6 +69,8 @@ export interface TimePanelProps {
 const props = withDefaults(defineProps<TimePanelProps>(), {});
 const emits = defineEmits(["update:modelValue", "ok"]);
 const datePicker: provideType = inject("datePicker") as provideType;
+const { t } = useI18n();
+
 const els = [
   { count: 24, type: "hh" },
   { count: 60, type: "mm" },

package/component/src/component/datePicker/components/YearPanel.vue

@@ -3,7 +3,7 @@
     <div class="layui-laydate-main laydate-main-list-0 laydate-ym-show">
       <div class="layui-laydate-header">
         <div class="laydate-set-ym">
-          <span class="laydate-time-text">选择年份</span>
+          <span class="laydate-time-text">{{t('datePicker.selectYear')}}</span>
         </div>
       </div>
     </div>
@@ -28,7 +28,7 @@
         v-if="datePicker.type === 'yearmonth'"
         @click="datePicker.showPanel.value = 'month'"
         class="laydate-btns-time"
-        >选择月份</span
+        >{{t('datePicker.selectMonth')}}</span
       >
       <template v-else-if="Year > 0">{{ Year }}</template>
     </PanelFoot>
@@ -41,6 +41,7 @@ export default {
 </script>
 <script lang="ts" setup>
 import dayjs from "dayjs";
+import { useI18n } from "../../../language";
 import { inject, nextTick, onMounted, ref, watch } from "vue";
 import { getYears } from "../day";
 import { provideType } from "../interface";
@@ -58,6 +59,7 @@ const datePicker: provideType = inject("datePicker") as provideType;
 const yearList = ref<number[]>(getYears());
 const unWatch = ref(false);
 const Year = ref(props.modelValue);
+const { t } = useI18n();
 
 // 点击年份
 const handleYearClick = (item: any) => {

package/component/src/component/empty/index.vue

@@ -7,6 +7,8 @@ export default {
 <script setup lang="ts">
 import "./index.less";
 import { useSlots, withDefaults } from "vue";
+import { useI18n } from "../../language";
+import { computed } from "@vue/reactivity";
 
 export interface EmptyProps {
   description?: string;
@@ -14,10 +16,12 @@ export interface EmptyProps {
 }
 
 const props = withDefaults(defineProps<EmptyProps>(), {
-  description: "暂无数据",
 });
 
+const { t } = useI18n();
 const slots = useSlots();
+
+const description = computed(() => props.description ? props.description : t('empty.description'))
 </script>
 
 <template>

package/component/src/component/page/index.vue

@@ -138,7 +138,7 @@ watch(
 <template>
   <div class="layui-laypage layui-laypage-default">
     <span v-if="showCount" class="layui-laypage-count"
-      >共 {{ total }} 条 {{ maxPage }} 页</span
+      >{{ t("page.total") }} {{ total }} {{ t("page.item") }} {{ maxPage }} {{ t("page.page") }}</span
     >
     <a
       href="javascript:;"
@@ -150,7 +150,7 @@ watch(
       @click="prev()"
     >
       <slot v-if="slots.prev" name="prev"></slot>
-      <template v-else>{{ t("page.prev") }}</template>
+      <template v-else>{{ t("page.previous") }}</template>
     </a>
     <template v-if="showPage">
       <template v-for="index of totalPage" :key="index">
@@ -187,7 +187,7 @@ watch(
     <span v-if="showLimit" class="layui-laypage-limits">
       <select v-model="inlimit" @change="changelimit">
         <option v-for="val of limits" :key="val" :value="val">
-          {{ val }} 条/页
+          {{ val }} {{ t("page.item") }}/{{ t("page.page") }}
         </option>
       </select>
     </span>
@@ -200,20 +200,20 @@ watch(
       <i class="layui-icon layui-icon-refresh"></i>
     </a>
     <span v-if="props.showSkip" class="layui-laypage-skip">
-      到第
+      {{ t('page.goTo') }}
       <input
         v-model="currentPageShow"
         @keypress.enter="jumpPage()"
         type="number"
         class="layui-input layui-input-number"
-      />页
+      />{{ t("page.page") }}
       <button
         type="button"
         class="layui-laypage-btn"
         @click="jumpPage()"
         :disabled="currentPageShow > maxPage || currentPageShow == currentPage"
       >
-        确定
+        {{ t('page.confirm') }}
       </button>
     </span>
   </div>

package/component/src/language/locales/en_US.ts

@@ -3,7 +3,34 @@ export default {
     placeholder: "please input",
   },
   page: {
-    prev: "prev",
+    previous: "previous",
     next: "next",
+    goTo: "Go to",
+    confirm: "confirm",
+    page: "page",
+    item: "item",
+    total: "Total"
   },
+  datePicker: {
+    year: "year",
+    month: "month",
+    sunday: "SU",
+    monday: "MO",
+    tuesday: "TU",
+    wednesday: "WE",
+    thursday: "TH",
+    friday: "FR",
+    saturday: "SA",
+    selectDate: "select date",
+    selectTime: "select time",
+    selectYear: "select year",
+    selectMonth: "select month",
+    clear: "clear",
+    confirm: "confirm",
+    cancel: "cancel",
+    now: "now"
+  },
+  empty: {
+    description: "No data"
+  }
 };

package/component/src/language/locales/zh_CN.ts

@@ -3,7 +3,34 @@ export default {
     placeholder: "请输入",
   },
   page: {
-    prev: "上一页",
+    previous: "上一页",
     next: "下一页",
+    goTo: "到第",
+    confirm: "确认",
+    page: "页",
+    item: "条",
+    total: "共"
   },
+  datePicker: {
+    year: "年",
+    month: "月",
+    sunday: "日",
+    monday: "一",
+    tuesday: "二",
+    wednesday: "三",
+    thursday: "四",
+    friday: "五",
+    saturday: "六",
+    selectDate: "选择日期",
+    selectTime: "选择时间",
+    selectYear: "选择年份",
+    selectMonth: "选择月份",
+    clear: "清空",
+    confirm: "确认",
+    cancel: "取消",
+    now: "现在"
+  },
+  empty: {
+    description: "无数据"
+  }
 };

package/document-component/src/document/zh-CN/guide/changelog.md

@@ -35,6 +35,7 @@
           <li>[删除] select 组件 show-empty 属性, 由用户自定义 select-option 代替。</li>
           <li>[删除] select 组件 empty-message 属性, 由用户自定义 select-option 代替。</li>
           <li>[删除] select 组件 placeholder, searchPlaceholder 属性默认值, 由使用者提供。</li>
+          <li>[其他] date-picker, empty, page 组件支持 i18n 国际化。</li>
           <li>[升级] vue-i18n-next 9.2.2 版本。</li>
         </ul> 
       </li>