From 9e86d01e830fca6b3b258214fd0fb5396e13edc8 Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Tue, 15 Dec 2020 15:41:08 +0800
Subject: [PATCH] docs(Calendar): use composition api

---
 src/calendar/README.md       | 103 +++++++------
 src/calendar/README.zh-CN.md | 103 +++++++------
 src/calendar/demo/index.vue  | 275 ++++++++++++++++++-----------------
 3 files changed, 266 insertions(+), 215 deletions(-)

diff --git a/src/calendar/README.md b/src/calendar/README.md
index c810afd55..67d1130ab 100644
--- a/src/calendar/README.md
+++ b/src/calendar/README.md
@@ -26,21 +26,24 @@ The `confirm` event will be emitted after the date selection is completed.
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      date: '',
-      show: false,
+  setup() {
+    const date = ref('');
+    const show = ref(false);
+
+    const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
+    const onConfirm = (date) => {
+      show.value = false;
+      date.value = formatDate(date);
+    };
+
+    return {
+      date,
+      show,
+      onConfirm,
     };
-  },
-  methods: {
-    formatDate(date) {
-      return `${date.getMonth() + 1}/${date.getDate()}`;
-    },
-    onConfirm(date) {
-      this.show = false;
-      this.date = this.formatDate(date);
-    },
   },
 };
 ```
@@ -53,18 +56,23 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      text: '',
-      show: false,
+  setup() {
+    const text = ref('');
+    const show = ref(false);
+
+    const onConfirm = (dates) => {
+      show.value = false;
+      text.value = `选择了 ${dates.length} 个日期`;
+    };
+
+    return {
+      text,
+      show,
+      onConfirm,
     };
-  },
-  methods: {
-    onConfirm(date) {
-      this.show = false;
-      this.text = `${date.length} dates selected`;
-    },
   },
 };
 ```
@@ -79,22 +87,25 @@ You can select a date range after setting `type` to`range`. In range mode, the d
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      date: '',
-      show: false,
-    };
-  },
-  methods: {
-    formatDate(date) {
-      return `${date.getMonth() + 1}/${date.getDate()}`;
-    },
-    onConfirm(date) {
+  setup() {
+    const date = ref('');
+    const show = ref(false);
+
+    const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
+    const onConfirm = (date) => {
       const [start, end] = date;
-      this.show = false;
-      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
-    },
+      show.value = false;
+      date.value = `${formatDate(start)} - ${formatDate(end)}`;
+    };
+
+    return {
+      date,
+      show,
+      onConfirm,
+    };
   },
 };
 ```
@@ -124,10 +135,14 @@ Use `min-date` and `max-date` to custom date range.
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const show = ref(false);
+
     return {
-      show: false,
+      show,
       minDate: new Date(2010, 0, 1),
       maxDate: new Date(2010, 0, 31),
     };
@@ -158,8 +173,8 @@ Use `formatter` to custom day text.
 
 ```js
 export default {
-  methods: {
-    formatter(day) {
+  setup() {
+    const formatter = (day) => {
       const month = day.date.getMonth() + 1;
       const date = day.date.getDate();
 
@@ -180,7 +195,11 @@ export default {
       }
 
       return day;
-    },
+    };
+
+    return {
+      formatter,
+    };
   },
 };
 ```
diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md
index 30eeafeab..223b8981d 100644
--- a/src/calendar/README.zh-CN.md
+++ b/src/calendar/README.zh-CN.md
@@ -26,21 +26,24 @@ app.use(Calendar);
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      date: '',
-      show: false,
+  setup() {
+    const date = ref('');
+    const show = ref(false);
+
+    const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
+    const onConfirm = (date) => {
+      show.value = false;
+      date.value = formatDate(date);
+    };
+
+    return {
+      date,
+      show,
+      onConfirm,
     };
-  },
-  methods: {
-    formatDate(date) {
-      return `${date.getMonth() + 1}/${date.getDate()}`;
-    },
-    onConfirm(date) {
-      this.show = false;
-      this.date = this.formatDate(date);
-    },
   },
 };
 ```
@@ -55,18 +58,23 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      text: '',
-      show: false,
+  setup() {
+    const text = ref('');
+    const show = ref(false);
+
+    const onConfirm = (dates) => {
+      show.value = false;
+      text.value = `选择了 ${dates.length} 个日期`;
+    };
+
+    return {
+      text,
+      show,
+      onConfirm,
     };
-  },
-  methods: {
-    onConfirm(date) {
-      this.show = false;
-      this.text = `选择了 ${date.length} 个日期`;
-    },
   },
 };
 ```
@@ -81,22 +89,25 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
-    return {
-      date: '',
-      show: false,
-    };
-  },
-  methods: {
-    formatDate(date) {
-      return `${date.getMonth() + 1}/${date.getDate()}`;
-    },
-    onConfirm(date) {
+  setup() {
+    const date = ref('');
+    const show = ref(false);
+
+    const formatDate = (date) => `${date.getMonth() + 1}/${date.getDate()}`;
+    const onConfirm = (date) => {
       const [start, end] = date;
-      this.show = false;
-      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
-    },
+      show.value = false;
+      date.value = `${formatDate(start)} - ${formatDate(end)}`;
+    };
+
+    return {
+      date,
+      show,
+      onConfirm,
+    };
   },
 };
 ```
@@ -126,10 +137,14 @@ export default {
 ```
 
 ```js
+import { ref } from 'vue';
+
 export default {
-  data() {
+  setup() {
+    const show = ref(false);
+
     return {
-      show: false,
+      show,
       minDate: new Date(2010, 0, 1),
       maxDate: new Date(2010, 0, 31),
     };
@@ -160,8 +175,8 @@ export default {
 
 ```js
 export default {
-  methods: {
-    formatter(day) {
+  setup() {
+    const formatter = (day) => {
       const month = day.date.getMonth() + 1;
       const date = day.date.getDate();
 
@@ -182,7 +197,11 @@ export default {
       }
 
       return day;
-    },
+    };
+
+    return {
+      formatter,
+    };
   },
 };
 ```
diff --git a/src/calendar/demo/index.vue b/src/calendar/demo/index.vue
index 39df70210..67c910176 100644
--- a/src/calendar/demo/index.vue
+++ b/src/calendar/demo/index.vue
@@ -119,60 +119,64 @@
 </template>
 
 <script>
-export default {
-  i18n: {
-    'zh-CN': {
-      in: '入店',
-      out: '离店',
-      today: '今天',
-      laborDay: '劳动节',
-      youthDay: '青年节',
-      calendar: '日历',
-      maxRange: '日期区间最大范围',
-      selectCount: (count) => `选择了 ${count} 个日期`,
-      selectSingle: '选择单个日期',
-      selectMultiple: '选择多个日期',
-      selectRange: '选择日期区间',
-      quickSelect: '快捷选择',
-      confirmText: '完成',
-      customColor: '自定义颜色',
-      customRange: '自定义日期范围',
-      customConfirm: '自定义按钮文字',
-      customDayText: '自定义日期文案',
-      customPosition: '自定义弹出位置',
-      customCalendar: '自定义日历',
-      confirmDisabledText: '请选择结束时间',
-      firstDayOfWeek: '自定义周起始日',
-      tiledDisplay: '平铺展示',
-    },
-    'en-US': {
-      in: 'In',
-      out: 'Out',
-      today: 'Today',
-      laborDay: 'Labor day',
-      youthDay: 'Youth Day',
-      calendar: 'Calendar',
-      maxRange: 'Max Range',
-      selectCount: (count) => `${count} dates selected`,
-      selectSingle: 'Select Single Date',
-      selectMultiple: 'Select Multiple Date',
-      selectRange: 'Select Date Range',
-      quickSelect: 'Quick Select',
-      confirmText: 'OK',
-      customColor: 'Custom Color',
-      customRange: 'Custom Date Range',
-      customConfirm: 'Custom Confirm Text',
-      customDayText: 'Custom Day Text',
-      customPosition: 'Custom Position',
-      customCalendar: 'Custom Calendar',
-      firstDayOfWeek: 'Custom First Day Of Week',
-      confirmDisabledText: 'Select End Time',
-      tiledDisplay: 'Tiled display',
-    },
-  },
+import { reactive, toRefs } from 'vue';
+import { useTranslate } from '@demo/use-translate';
 
-  data() {
-    return {
+const i18n = {
+  'zh-CN': {
+    in: '入店',
+    out: '离店',
+    today: '今天',
+    laborDay: '劳动节',
+    youthDay: '青年节',
+    calendar: '日历',
+    maxRange: '日期区间最大范围',
+    selectCount: (count) => `选择了 ${count} 个日期`,
+    selectSingle: '选择单个日期',
+    selectMultiple: '选择多个日期',
+    selectRange: '选择日期区间',
+    quickSelect: '快捷选择',
+    confirmText: '完成',
+    customColor: '自定义颜色',
+    customRange: '自定义日期范围',
+    customConfirm: '自定义按钮文字',
+    customDayText: '自定义日期文案',
+    customPosition: '自定义弹出位置',
+    customCalendar: '自定义日历',
+    confirmDisabledText: '请选择结束时间',
+    firstDayOfWeek: '自定义周起始日',
+    tiledDisplay: '平铺展示',
+  },
+  'en-US': {
+    in: 'In',
+    out: 'Out',
+    today: 'Today',
+    laborDay: 'Labor day',
+    youthDay: 'Youth Day',
+    calendar: 'Calendar',
+    maxRange: 'Max Range',
+    selectCount: (count) => `${count} dates selected`,
+    selectSingle: 'Select Single Date',
+    selectMultiple: 'Select Multiple Date',
+    selectRange: 'Select Date Range',
+    quickSelect: 'Quick Select',
+    confirmText: 'OK',
+    customColor: 'Custom Color',
+    customRange: 'Custom Date Range',
+    customConfirm: 'Custom Confirm Text',
+    customDayText: 'Custom Day Text',
+    customPosition: 'Custom Position',
+    customCalendar: 'Custom Calendar',
+    firstDayOfWeek: 'Custom First Day Of Week',
+    confirmDisabledText: 'Select End Time',
+    tiledDisplay: 'Tiled display',
+  },
+};
+
+export default {
+  setup() {
+    const t = useTranslate(i18n);
+    const state = reactive({
       date: {
         maxRange: [],
         selectSingle: null,
@@ -201,116 +205,125 @@ export default {
       confirmText: undefined,
       confirmDisabledText: undefined,
       firstDayOfWeek: 0,
+    });
+
+    const resetSettings = () => {
+      state.round = true;
+      state.color = undefined;
+      state.minDate = undefined;
+      state.maxDate = undefined;
+      state.maxRange = undefined;
+      state.position = undefined;
+      state.formatter = undefined;
+      state.showConfirm = true;
+      state.confirmText = undefined;
+      state.confirmDisabledText = undefined;
+      state.firstDayOfWeek = 0;
     };
-  },
 
-  methods: {
-    resetSettings() {
-      this.round = true;
-      this.color = undefined;
-      this.minDate = undefined;
-      this.maxDate = undefined;
-      this.maxRange = undefined;
-      this.position = undefined;
-      this.formatter = undefined;
-      this.showConfirm = true;
-      this.confirmText = undefined;
-      this.confirmDisabledText = undefined;
-      this.firstDayOfWeek = 0;
-    },
-
-    show(type, id) {
-      this.resetSettings();
-      this.id = id;
-      this.type = type;
-      this.showCalendar = true;
-
-      switch (id) {
-        case 'quickSelect1':
-        case 'quickSelect2':
-          this.showConfirm = false;
-          break;
-        case 'customColor':
-          this.color = '#1989fa';
-          break;
-        case 'customConfirm':
-          this.confirmText = this.t('confirmText');
-          this.confirmDisabledText = this.t('confirmDisabledText');
-          break;
-        case 'customRange':
-          this.minDate = new Date(2010, 0, 1);
-          this.maxDate = new Date(2010, 0, 31);
-          break;
-        case 'customDayText':
-          this.minDate = new Date(2010, 4, 1);
-          this.maxDate = new Date(2010, 4, 31);
-          this.formatter = this.dayFormatter;
-          break;
-        case 'customPosition':
-          this.round = false;
-          this.position = 'right';
-          break;
-        case 'maxRange':
-          this.maxRange = 3;
-          break;
-        case 'firstDayOfWeek':
-          this.firstDayOfWeek = 1;
-          break;
-      }
-    },
-
-    dayFormatter(day) {
+    const dayFormatter = (day) => {
       const month = day.date.getMonth() + 1;
       const date = day.date.getDate();
 
       if (month === 5) {
         if (date === 1) {
-          day.topInfo = this.t('laborDay');
+          day.topInfo = t('laborDay');
         } else if (date === 4) {
-          day.topInfo = this.t('youthDay');
+          day.topInfo = t('youthDay');
         } else if (date === 11) {
-          day.text = this.t('today');
+          day.text = t('today');
         }
       }
 
       if (day.type === 'start') {
-        day.bottomInfo = this.t('in');
+        day.bottomInfo = t('in');
       } else if (day.type === 'end') {
-        day.bottomInfo = this.t('out');
+        day.bottomInfo = t('out');
       }
 
       return day;
-    },
+    };
 
-    formatDate(date) {
+    const show = (type, id) => {
+      resetSettings();
+      state.id = id;
+      state.type = type;
+      state.showCalendar = true;
+
+      switch (id) {
+        case 'quickSelect1':
+        case 'quickSelect2':
+          state.showConfirm = false;
+          break;
+        case 'customColor':
+          state.color = '#1989fa';
+          break;
+        case 'customConfirm':
+          state.confirmText = t('confirmText');
+          state.confirmDisabledText = t('confirmDisabledText');
+          break;
+        case 'customRange':
+          state.minDate = new Date(2010, 0, 1);
+          state.maxDate = new Date(2010, 0, 31);
+          break;
+        case 'customDayText':
+          state.minDate = new Date(2010, 4, 1);
+          state.maxDate = new Date(2010, 4, 31);
+          state.formatter = dayFormatter;
+          break;
+        case 'customPosition':
+          state.round = false;
+          state.position = 'right';
+          break;
+        case 'maxRange':
+          state.maxRange = 3;
+          break;
+        case 'firstDayOfWeek':
+          state.firstDayOfWeek = 1;
+          break;
+      }
+    };
+
+    const formatDate = (date) => {
       if (date) {
         return `${date.getMonth() + 1}/${date.getDate()}`;
       }
-    },
+    };
 
-    formatFullDate(date) {
+    const formatFullDate = (date) => {
       if (date) {
-        return `${date.getFullYear()}/${this.formatDate(date)}`;
+        return `${date.getFullYear()}/${formatDate(date)}`;
       }
-    },
+    };
 
-    formatMultiple(dates) {
+    const formatMultiple = (dates) => {
       if (dates.length) {
-        return this.t('selectCount', dates.length);
+        return t('selectCount', dates.length);
       }
-    },
+    };
 
-    formatRange(dateRange) {
+    const formatRange = (dateRange) => {
       if (dateRange.length) {
         const [start, end] = dateRange;
-        return `${this.formatDate(start)} - ${this.formatDate(end)}`;
+        return `${formatDate(start)} - ${formatDate(end)}`;
       }
-    },
+    };
 
-    onConfirm(date) {
-      this.showCalendar = false;
-      this.date[this.id] = date;
-    },
+    const onConfirm = (date) => {
+      state.showCalendar = false;
+      state.date[state.id] = date;
+    };
+
+    return {
+      ...toRefs(state),
+      t,
+      show,
+      onConfirm,
+      formatDate,
+      formatRange,
+      formatFullDate,
+      formatMultiple,
+    };
   },
 };
 </script>