BREAKING CHANGE: DatePicker use script setup & remove locale prop

docs/.vitepress/components/date-picker/custom-date-classes.vue

@@ -3,20 +3,17 @@
     <date-picker v-model="date" :date-class="dateClass" />
   </div>
 </template>
-<script>
-export default {
-  data() {
-    return {
-      date: null,
-    };
-  },
-  methods: {
-    dateClass(date) {
-      return date.getDay() === 0 ? 'btn-sunday' : '';
-    },
-  },
-};
+
+<script setup>
+import { ref } from 'vue';
+
+const date = ref(null);
+
+function dateClass(d) {
+  return d.getDay() === 0 ? 'btn-sunday' : '';
+}
 </script>
+
 <style lang="less">
 .uiv .btn-sunday.btn-default,
 .uiv .btn-sunday.btn-primary {

docs/.vitepress/components/date-picker/dropdown-example.vue

@@ -17,12 +17,8 @@
     </dropdown>
   </form>
 </template>
-<script>
-export default {
-  data() {
-    return {
-      date: null,
-    };
-  },
-};
+<script setup>
+import { ref } from 'vue';
+
+const date = ref(null);
 </script>

docs/.vitepress/components/date-picker/example.vue

@@ -8,12 +8,8 @@
     >
   </section>
 </template>
-<script>
-export default {
-  data() {
-    return {
-      date: null,
-    };
-  },
-};
+<script setup>
+import { ref } from 'vue';
+
+const date = ref(null);
 </script>

docs/.vitepress/components/date-picker/formats.vue

@@ -8,12 +8,8 @@
     >
   </section>
 </template>
-<script>
-export default {
-  data() {
-    return {
-      date: null,
-    };
-  },
-};
+<script setup>
+import { ref } from 'vue';
+
+const date = ref(null);
 </script>

docs/.vitepress/components/date-picker/range-limit.vue

@@ -3,18 +3,14 @@
     <date-picker v-model="date" :limit-from="limitFrom" :limit-to="limitTo" />
   </div>
 </template>
-<script>
-export default {
-  data() {
-    const today = new Date();
-    const nextWeek = new Date();
-    nextWeek.setDate(nextWeek.getDate() + 7);
+<script setup>
+import { ref } from 'vue';
 
-    return {
-      date: null,
-      limitFrom: today,
-      limitTo: nextWeek,
-    };
-  },
-};
+const date = ref(null);
+
+const today = new Date();
+const nextWeek = new Date();
+nextWeek.setDate(nextWeek.getDate() + 7);
+const limitFrom = ref(today);
+const limitTo = ref(nextWeek);
 </script>

docs/.vitepress/components/date-picker/week-numbers.vue

@@ -8,12 +8,8 @@
     >
   </section>
 </template>
-<script>
-export default {
-  data() {
-    return {
-      date: null,
-    };
-  },
-};
+<script setup>
+import { ref } from 'vue';
+
+const date = ref(null);
 </script>

docs/.vitepress/components/date-picker/week-starts.vue

@@ -3,12 +3,8 @@
     <date-picker v-model="date" :week-starts-with="1" />
   </div>
 </template>
-<script>
-export default {
-  data() {
-    return {
-      date: null,
-    };
-  },
-};
+<script setup>
+import { ref } from 'vue';
+
+const date = ref(null);
 </script>

docs/.vitepress/components/date-picker/without-buttons.vue

@@ -3,12 +3,8 @@
     <date-picker v-model="date" :today-btn="false" :clear-btn="false" />
   </div>
 </template>
-<script>
-export default {
-  data() {
-    return {
-      date: null,
-    };
-  },
-};
+<script setup>
+import { ref } from 'vue';
+
+const date = ref(null);
 </script>

docs/components/date-picker.md

@@ -109,4 +109,3 @@ Name                   | Type       | Default                           | Requir
 `year-month-formatter` | Function   |                                   |          | The formatter function of year month label string on top of date view, with 2 params `year` and `month` (0-based), with the formatted string returned.
 `icon-control-left`    | String     | glyphicon glyphicon-chevron-left  |          | The arrow icon shown inside the `previous` button.
 `icon-control-right`   | String     | glyphicon glyphicon-chevron-right |          | The arrow icon shown inside the `next` button.
-`locale`               | Object     |                                   |          | The locale used for translating month and weekday names, clear-btn and today-btn texts.

src/components/datepicker/DatePicker.spec.js

@@ -1,12 +1,5 @@
 import newLocale from '../../locale/lang/zh-CN';
-import {
-  createWrapper,
-  nextTick,
-  sleep,
-  triggerEvent,
-} from '../../__test__/utils';
-import { RouterLinkStub } from '@vue/test-utils';
-import DatePicker from './DatePicker';
+import { createWrapper, nextTick, triggerEvent } from '../../__test__/utils';
 
 describe('DatePicker.vue', () => {
   let wrapper;
@@ -32,8 +25,7 @@ describe('DatePicker.vue', () => {
       }
     );
     await nextTick();
-    expect(wrapper.vm.$refs.datepicker.currentMonth).toEqual(7);
-    expect(wrapper.vm.$refs.datepicker.currentYear).toEqual(1991);
+    expect(wrapper.find('.uiv-datepicker-title').text()).toEqual('1991 August');
   });
 
   it('should be able to render custom year month str', async () => {
@@ -422,45 +414,4 @@ describe('DatePicker.vue', () => {
     const sundayBtn = dateView.findAll('.btn-sunday');
     expect(sundayBtn.length).toEqual(6);
   });
-
-  it('should be able to use locale for custom translations', async () => {
-    const wrapper = createWrapper(
-      `<section>
-    <date-picker :locale="locale" v-model="date"/>
-  </section>`,
-      {
-        date: null,
-        locale: newLocale,
-      }
-    );
-    const locale = newLocale.uiv.datePicker;
-    await nextTick();
-    const picker = wrapper.findAll('[data-role="date-picker"]')[0];
-    expect(picker).toBeDefined();
-    const dateView = picker.findAll('table')[0];
-    const yearMonthBtn = dateView.find(
-      'thead tr:first-child td:nth-child(2) button'
-    );
-    const now = new Date();
-    expect(yearMonthBtn.text()).toContain(locale[`month${now.getMonth() + 1}`]);
-    const weekdays = dateView.findAll('thead tr:last-child td');
-    const weekdayNames = [];
-    for (let i = 0; i < weekdays.length; i++)
-      weekdayNames.push(weekdays[i].text());
-    const { week1, week2, week3, week4, week5, week6, week7 } = locale;
-    expect(weekdayNames).toEqual([
-      week7,
-      week1,
-      week2,
-      week3,
-      week4,
-      week5,
-      week6,
-    ]);
-    const { today, clear } = locale;
-    const todayBtn = picker.find('.text-center .btn-info');
-    expect(todayBtn.text()).toEqual(today);
-    const clearBtn = picker.find('.text-center .btn-default');
-    expect(clearBtn.text()).toEqual(clear);
-  });
 });