From 5a276e48bced63e01be1a7b8ad71cde2f91ed868 Mon Sep 17 00:00:00 2001
From: "Xing.Wu" <329106954@qq.com>
Date: Tue, 8 Jun 2021 13:11:15 +0800
Subject: [PATCH] doc(): DatePicker code for composition (#2162)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 无星 <32910694@qq.com>
---
 website/docs/en-US/date-picker.md | 219 ++++++++++++++++++++++++++++++
 website/docs/es/date-picker.md    | 200 +++++++++++++++++++++++++++
 website/docs/fr-FR/date-picker.md | 200 +++++++++++++++++++++++++++
 website/docs/jp/date-picker.md    | 200 +++++++++++++++++++++++++++
 website/docs/zh-CN/date-picker.md | 217 ++++++++++++++++++++++++++++-
 5 files changed, 1035 insertions(+), 1 deletion(-)

diff --git a/website/docs/en-US/date-picker.md b/website/docs/en-US/date-picker.md
index 9c676411c8..f44de67af8 100644
--- a/website/docs/en-US/date-picker.md
+++ b/website/docs/en-US/date-picker.md
@@ -63,6 +63,51 @@ Basic date picker measured by 'day'.
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+        shortcuts: [
+          {
+            text: 'Today',
+            value: new Date(),
+          },
+          {
+            text: 'Yesterday',
+            value: (() => {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              return date;
+            })(),
+          },
+          {
+            text: 'A week ago',
+            value: (() => {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              return date;
+            })(),
+          },
+        ],
+        value1: '',
+        value2: '',
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -123,6 +168,28 @@ You can choose week, month, year or multiple dates by extending the standard dat
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        value1: '',
+        value2: '',
+        value3: '',
+        value4: '',
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 
 :::
@@ -196,6 +263,55 @@ Picking a date range is supported.
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        shortcuts: [
+          {
+            text: 'Last week',
+            value: (() => {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              return [start, end];
+            })(),
+          },
+          {
+            text: 'Last month',
+            value: (() => {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              return [start, end];
+            })(),
+          },
+          {
+            text: 'Last 3 months',
+            value: (() => {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              return [start, end];
+            })(),
+          },
+        ],
+        value1: '',
+        value2: '',
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 
 :::
@@ -262,6 +378,49 @@ Picking a month range is supported.
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        shortcuts: [
+          {
+            text: 'This month',
+            value: [new Date(), new Date()],
+          },
+          {
+            text: 'This year',
+            value: (() => {
+              const end = new Date();
+              const start = new Date(new Date().getFullYear(), 0);
+              return [start, end];
+            })(),
+          },
+          {
+            text: 'Last 6 months',
+            value: (() => {
+              const end = new Date();
+              const start = new Date();
+              start.setMonth(start.getMonth() - 6);
+              return [start, end];
+            })(),
+          },
+        ],
+        value1: '',
+        value2: '',
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -306,6 +465,25 @@ If type is `daterange`, `default-value` sets the left side calendar.
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const value1 = ref('');
+      const value2 = ref('');
+
+      return {
+        value1,
+        value2,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -356,6 +534,25 @@ Pay attention to capitalization
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const value1 = ref('');
+      const value2 = ref('');
+
+      return {
+        value1,
+        value2,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -391,6 +588,28 @@ When picking a date range, you can assign the time part for start date and end d
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const value = ref('');
+      const defaultTime = ref([
+        new Date(2000, 1, 1, 0, 0, 0),
+        new Date(2000, 2, 1, 23, 59, 59),
+      ]); // '00:00:00', '23:59:59'
+
+      return {
+        value,
+        defaultTime,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/es/date-picker.md b/website/docs/es/date-picker.md
index ef84e19e4b..bcd698355f 100644
--- a/website/docs/es/date-picker.md
+++ b/website/docs/es/date-picker.md
@@ -64,6 +64,51 @@ Date Picker básico por "día".
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+        shortcuts: [
+          {
+            text: 'Today',
+            value: new Date(),
+          },
+          {
+            text: 'Yesterday',
+            value: (() => {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              return date;
+            })(),
+          },
+          {
+            text: 'A week ago',
+            value: (() => {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              return date;
+            })(),
+          },
+        ],
+        value1: '',
+        value2: '',
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 
 :::
@@ -125,6 +170,28 @@ Puede elegir la semana, el mes, el año o varias fechas ampliando el componente
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        value1: '',
+        value2: '',
+        value3: '',
+        value4: '',
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 
 :::
@@ -198,6 +265,55 @@ Se soporta la selección de un rango de fechas.
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        shortcuts: [
+          {
+            text: 'Last week',
+            value: (() => {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              return [start, end];
+            })(),
+          },
+          {
+            text: 'Last month',
+            value: (() => {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              return [start, end];
+            })(),
+          },
+          {
+            text: 'Last 3 months',
+            value: (() => {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              return [start, end];
+            })(),
+          },
+        ],
+        value1: '',
+        value2: '',
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 
 :::
@@ -264,6 +380,49 @@ Se admite la selección de un intervalo de un mes.
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        shortcuts: [
+          {
+            text: 'This month',
+            value: [new Date(), new Date()],
+          },
+          {
+            text: 'This year',
+            value: (() => {
+              const end = new Date();
+              const start = new Date(new Date().getFullYear(), 0);
+              return [start, end];
+            })(),
+          },
+          {
+            text: 'Last 6 months',
+            value: (() => {
+              const end = new Date();
+              const start = new Date();
+              start.setMonth(start.getMonth() - 6);
+              return [start, end];
+            })(),
+          },
+        ],
+        value1: '',
+        value2: '',
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -308,6 +467,25 @@ Si el tipo es `daterange`, `default-value` establece el calendario del lado izqu
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const value1 = ref('');
+      const value2 = ref('');
+
+      return {
+        value1,
+        value2,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -395,6 +573,28 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const value = ref('');
+      const defaultTime = ref([
+        new Date(2000, 1, 1, 0, 0, 0),
+        new Date(2000, 2, 1, 23, 59, 59),
+      ]); // '00:00:00', '23:59:59'
+
+      return {
+        value,
+        defaultTime,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/fr-FR/date-picker.md b/website/docs/fr-FR/date-picker.md
index b4bf70f048..ec8a01d1d3 100644
--- a/website/docs/fr-FR/date-picker.md
+++ b/website/docs/fr-FR/date-picker.md
@@ -62,6 +62,51 @@ L'unité de base du DatePicker est le jour.
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+        shortcuts: [
+          {
+            text: 'Today',
+            value: new Date(),
+          },
+          {
+            text: 'Yesterday',
+            value: (() => {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              return date;
+            })(),
+          },
+          {
+            text: 'A week ago',
+            value: (() => {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              return date;
+            })(),
+          },
+        ],
+        value1: '',
+        value2: '',
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -122,6 +167,28 @@ Vous pouvez sélectionner une semaine, un mois, une année ou plusieurs dates en
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        value1: '',
+        value2: '',
+        value3: '',
+        value4: '',
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 
 :::
@@ -195,6 +262,55 @@ Vous pouvez sélectionner une plage de dates.
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        shortcuts: [
+          {
+            text: 'Last week',
+            value: (() => {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              return [start, end];
+            })(),
+          },
+          {
+            text: 'Last month',
+            value: (() => {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              return [start, end];
+            })(),
+          },
+          {
+            text: 'Last 3 months',
+            value: (() => {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              return [start, end];
+            })(),
+          },
+        ],
+        value1: '',
+        value2: '',
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 
 :::
@@ -261,6 +377,49 @@ Vous pouvez sélectionner une plage de mois.
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        shortcuts: [
+          {
+            text: 'This month',
+            value: [new Date(), new Date()],
+          },
+          {
+            text: 'This year',
+            value: (() => {
+              const end = new Date();
+              const start = new Date(new Date().getFullYear(), 0);
+              return [start, end];
+            })(),
+          },
+          {
+            text: 'Last 6 months',
+            value: (() => {
+              const end = new Date();
+              const start = new Date();
+              start.setMonth(start.getMonth() - 6);
+              return [start, end];
+            })(),
+          },
+        ],
+        value1: '',
+        value2: '',
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -305,6 +464,25 @@ Si le type est `daterange`, `default-value` configure la panneau de gauche.
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const value1 = ref('');
+      const value2 = ref('');
+
+      return {
+        value1,
+        value2,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -392,6 +570,28 @@ Lorsque vous choisissez une plage de dates, vous pouvez assigner l'horaire de d
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const value = ref('');
+      const defaultTime = ref([
+        new Date(2000, 1, 1, 0, 0, 0),
+        new Date(2000, 2, 1, 23, 59, 59),
+      ]); // '00:00:00', '23:59:59'
+
+      return {
+        value,
+        defaultTime,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/jp/date-picker.md b/website/docs/jp/date-picker.md
index af2ba1fd32..9edd038cfc 100644
--- a/website/docs/jp/date-picker.md
+++ b/website/docs/jp/date-picker.md
@@ -61,6 +61,51 @@
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+        shortcuts: [
+          {
+            text: 'Today',
+            value: new Date(),
+          },
+          {
+            text: 'Yesterday',
+            value: (() => {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              return date;
+            })(),
+          },
+          {
+            text: 'A week ago',
+            value: (() => {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              return date;
+            })(),
+          },
+        ],
+        value1: '',
+        value2: '',
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -121,6 +166,28 @@
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        value1: '',
+        value2: '',
+        value3: '',
+        value4: '',
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 
 :::
@@ -193,6 +260,55 @@
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        shortcuts: [
+          {
+            text: 'Last week',
+            value: (() => {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              return [start, end];
+            })(),
+          },
+          {
+            text: 'Last month',
+            value: (() => {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              return [start, end];
+            })(),
+          },
+          {
+            text: 'Last 3 months',
+            value: (() => {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              return [start, end];
+            })(),
+          },
+        ],
+        value1: '',
+        value2: '',
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 
 :::
@@ -258,6 +374,49 @@
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        shortcuts: [
+          {
+            text: 'This month',
+            value: [new Date(), new Date()],
+          },
+          {
+            text: 'This year',
+            value: (() => {
+              const end = new Date();
+              const start = new Date(new Date().getFullYear(), 0);
+              return [start, end];
+            })(),
+          },
+          {
+            text: 'Last 6 months',
+            value: (() => {
+              const end = new Date();
+              const start = new Date();
+              start.setMonth(start.getMonth() - 6);
+              return [start, end];
+            })(),
+          },
+        ],
+        value1: '',
+        value2: '',
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -302,6 +461,25 @@
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const value1 = ref('');
+      const value2 = ref('');
+
+      return {
+        value1,
+        value2,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -388,6 +566,28 @@ Check the list [here](https://day.js.org/docs/en/display/format#list-of-all-avai
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const value = ref('');
+      const defaultTime = ref([
+        new Date(2000, 1, 1, 0, 0, 0),
+        new Date(2000, 2, 1, 23, 59, 59),
+      ]); // '00:00:00', '23:59:59'
+
+      return {
+        value,
+        defaultTime,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
diff --git a/website/docs/zh-CN/date-picker.md b/website/docs/zh-CN/date-picker.md
index cf211a092a..5023396835 100644
--- a/website/docs/zh-CN/date-picker.md
+++ b/website/docs/zh-CN/date-picker.md
@@ -63,6 +63,51 @@
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+        shortcuts: [
+          {
+            text: 'Today',
+            value: new Date(),
+          },
+          {
+            text: 'Yesterday',
+            value: (() => {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24);
+              return date;
+            })(),
+          },
+          {
+            text: 'A week ago',
+            value: (() => {
+              const date = new Date();
+              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
+              return date;
+            })(),
+          },
+        ],
+        value1: '',
+        value2: '',
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -122,6 +167,28 @@
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        value1: '',
+        value2: '',
+        value3: '',
+        value4: '',
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -193,6 +260,55 @@
     }
   };
 </script>
+<!--
+<setup>
+
+import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        shortcuts: [
+          {
+            text: '最近一周',
+            value: (() => {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
+              return [start, end];
+            })(),
+          },
+          {
+            text: '最近一个月',
+            value: (() => {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+              return [start, end];
+            })(),
+          },
+          {
+            text: '最近三个月',
+            value: (() => {
+              const end = new Date();
+              const start = new Date();
+              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
+              return [start, end];
+            })(),
+          },
+        ],
+        value1: '',
+        value2: '',
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -259,6 +375,49 @@
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, reactive, toRefs } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const state = reactive({
+        shortcuts: [
+          {
+            text: '本月',
+            value: [new Date(), new Date()],
+          },
+          {
+            text: '今年至今',
+            value: (() => {
+              const end = new Date();
+              const start = new Date(new Date().getFullYear(), 0);
+              return [start, end];
+            })(),
+          },
+          {
+            text: '最近六个月',
+            value: (() => {
+              const end = new Date();
+              const start = new Date();
+              start.setMonth(start.getMonth() - 6);
+              return [start, end];
+            })(),
+          },
+        ],
+        value1: '',
+        value2: '',
+      });
+
+      return {
+        ...toRefs(state),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -303,6 +462,25 @@
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const value1 = ref('');
+      const value2 = ref('');
+
+      return {
+        value1,
+        value2,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -350,11 +528,26 @@
       return {
         value1: '',
         value2: '',
-        value3: ''
       };
     }
   };
 </script>
+<!--
+<setup>
+
+import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      return {
+        value1: ref(''),
+        value2: ref(''),
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::
 
@@ -390,6 +583,28 @@
     }
   };
 </script>
+<!--
+<setup>
+
+  import { defineComponent, ref } from 'vue';
+
+  export default defineComponent({
+    setup() {
+      const value = ref('');
+      const defaultTime = ref([
+        new Date(2000, 1, 1, 0, 0, 0),
+        new Date(2000, 2, 1, 23, 59, 59),
+      ]); // '00:00:00', '23:59:59'
+
+      return {
+        value,
+        defaultTime,
+      };
+    },
+  });
+
+</setup>
+-->
 ```
 :::