feat: publicize doc implemetation

one/docs/demo/date-picker/default.vue

@@ -0,0 +1,52 @@
+<template>
+<article>
+  <section>
+    <h4>Clearable</h4>
+    <veui-date-picker
+      v-model="date"
+      clearable
+    />
+  </section>
+  <section>
+    <h4>Customizable placeholder</h4>
+    <veui-date-picker
+      v-model="date2"
+      placeholder="Pick a day"
+    />
+  </section>
+</article>
+</template>
+
+<script>
+import { DatePicker } from 'veui'
+
+export default {
+  components: {
+    'veui-date-picker': DatePicker
+  },
+  data () {
+    return {
+      date: new Date(),
+      date2: null
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+section:not(:last-child) {
+  margin-bottom: 20px;
+}
+
+h4 {
+  margin-top: 0;
+}
+</style>
+
+<docs>
+支持 `v-model`，数据类型为原生 `Date` 类型。
+</docs>
+
+<docs locale="en-US">
+Supports `v-model` with value type being the native `Date`.
+</docs>

one/docs/demo/date-picker/range.vue

@@ -0,0 +1,54 @@
+<template>
+<article>
+  <section>
+    <h4>Clearable</h4>
+    <veui-date-picker
+      v-model="range"
+      range
+      clearable
+    />
+  </section>
+  <section>
+    <h4>Customizable placeholder</h4>
+    <veui-date-picker
+      v-model="range"
+      class="custom"
+      range
+      placeholder="Pick a date range..."
+    />
+  </section>
+</article>
+</template>
+
+<script>
+import { DatePicker } from 'veui'
+
+export default {
+  components: {
+    'veui-date-picker': DatePicker
+  },
+  data () {
+    return {
+      range: null
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+section:not(:last-child) {
+  margin-bottom: 20px;
+}
+
+h4 {
+  margin-top: 0;
+}
+</style>
+
+<docs>
+支持 `v-model`，选择日期范围时数据类型为 `[Date, Date]`。
+</docs>
+
+<docs locale="en-US">
+Supports `v-model`, with value type being `[Date, Date]` when selecting a date range.
+</docs>

one/docs/demo/date-picker/shortcuts.vue

@@ -0,0 +1,62 @@
+<template>
+<article>
+  <veui-date-picker
+    v-model="range"
+    :shortcuts="shortcuts"
+    range
+    clearable
+  />
+</article>
+</template>
+
+<script>
+import { DatePicker } from 'veui'
+
+export default {
+  components: {
+    'veui-date-picker': DatePicker
+  },
+  data () {
+    return {
+      range: null,
+      shortcuts: [
+        {
+          label: '上个月',
+          from: {
+            startOf: 'month',
+            month: -1
+          },
+          to: {
+            startOf: 'month',
+            days: -1
+          }
+        },
+        {
+          label: '本月',
+          from: {
+            startOf: 'month'
+          },
+          to: 0
+        },
+        {
+          label: '本周',
+          from: {
+            startOf: 'week',
+            days: 0
+          },
+          to: 0
+        },
+        {
+          label: '最近7天',
+          from: -6,
+          to: 0
+        },
+        {
+          label: '今天',
+          to: 0
+        }
+      ]
+    }
+  }
+}
+</script>