feat: publicize doc implemetation

one/docs/demo/calendar/default.vue

@@ -0,0 +1,39 @@
+<template>
+<article>
+  <veui-calendar v-model="date"/>
+  <p>Selected: {{ readableDate }}</p>
+</article>
+</template>
+
+<script>
+import { Calendar } from 'veui'
+
+export default {
+  components: {
+    'veui-calendar': Calendar
+  },
+  data () {
+    return {
+      date: new Date()
+    }
+  },
+  computed: {
+    readableDate () {
+      return this.date.toLocaleDateString(this.$i18n.locale, {
+        weekday: 'long',
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+      })
+    }
+  }
+}
+</script>
+
+<docs>
+支持 `v-model`，数据类型为原生 `Date` 类型。
+</docs>
+
+<docs locale="en-US">
+Supports `v-model` with value type being the native `Date`.
+</docs>

one/docs/demo/calendar/multiple-ranges.vue

@@ -0,0 +1,49 @@
+<template>
+<article>
+  <veui-calendar
+    v-model="ranges"
+    range
+    multiple
+    :panel="2"
+  />
+  <section>Selected: {{ readableRanges }}</section>
+</article>
+</template>
+
+<script>
+import { Calendar } from 'veui'
+
+export default {
+  components: {
+    'veui-calendar': Calendar
+  },
+  data () {
+    return {
+      ranges: null
+    }
+  },
+  computed: {
+    readableRanges () {
+      if (!this.ranges || this.ranges.length === 0) {
+        return 'Nothing.'
+      }
+      return this.ranges
+        .map(range => this.toReadable(range).join(' to '))
+        .join(', ')
+    }
+  },
+  methods: {
+    toReadable (dates) {
+      return dates.map(date => date.toLocaleDateString(this.$i18n.locale))
+    }
+  }
+}
+</script>
+
+<docs>
+支持 `v-model`，选择多日期范围时数据类型为 `Array<[Date, Date]>`。
+</docs>
+
+<docs locale="en-US">
+Supports `v-model`, with value type being `Array<[Date, Date]>` when selecting multiple date ranges.
+</docs>

one/docs/demo/calendar/range-multiple.vue

@@ -0,0 +1,79 @@
+<template>
+<article>
+  <section class="col">
+    <h4>Multiple dates</h4>
+    <veui-calendar
+      v-model="dates"
+      multiple
+    />
+    <section>Selected: {{ readableDates }}</section>
+  </section>
+  <section class="col">
+    <h4>Date ranges</h4>
+    <veui-calendar
+      v-model="range"
+      range
+    />
+    <section>Selected: {{ readableRange }}</section>
+  </section>
+</article>
+</template>
+
+<script>
+import { Calendar } from 'veui'
+
+export default {
+  components: {
+    'veui-calendar': Calendar
+  },
+  data () {
+    return {
+      dates: null,
+      range: null
+    }
+  },
+  computed: {
+    readableDates () {
+      if (!this.dates || !this.dates.length) {
+        return 'Nothing.'
+      }
+      return this.toReadable(this.dates).join(', ')
+    },
+    readableRange () {
+      if (!this.range) {
+        return 'Nothing.'
+      }
+      return this.toReadable(this.range).join(' to ')
+    }
+  },
+  methods: {
+    toReadable (dates) {
+      return dates.map(date => date.toLocaleDateString(this.$i18n.locale))
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+article {
+  overflow: hidden;
+}
+
+.col {
+  float: left;
+  width: 340px;
+  margin-right: 20px;
+}
+
+h4 {
+  margin-top: 0;
+}
+</style>
+
+<docs>
+支持 `v-model`，选择多个单日时数据类型为 `Array<Date>`，选择日期范围时数据类型为 `[Date, Date]`。
+</docs>
+
+<docs locale="en-US">
+Supports `v-model`, with value type being `Array<Date>` when selecting multiple dates, being `[Date, Date]` when selecting a date range.
+</docs>