feat: publicize doc implemetation

one/docs/demo/drawer/custom.vue

@@ -0,0 +1,73 @@
+<template>
+<article>
+  <veui-button @click="simpleOpen = true">
+    Title & content
+  </veui-button>
+  <veui-drawer
+    :open.sync="simpleOpen"
+    title="Customized Title & Content"
+    @ok="simpleOpen = false"
+    @cancel="simpleOpen = false"
+  >
+    Customized content via <code>&lt;slot&gt;</code>.
+  </veui-drawer>
+
+  <veui-button @click="titleIconOpen = true">
+    Icon in Title
+  </veui-button>
+  <veui-drawer
+    :open.sync="titleIconOpen"
+    @ok="titleIconOpen = false"
+    @cancel="titleIconOpen = false"
+  >
+    <template #title>
+      Title with Icon <veui-icon name="flag"/>
+    </template>
+    Customized content via <code>&lt;slot&gt;</code>.
+  </veui-drawer>
+
+  <veui-button @click="footOpen = true">
+    Foot
+  </veui-button>
+  <veui-drawer
+    :open.sync="footOpen"
+    title="Customized Foot"
+  >
+    Customized content via <code>&lt;slot&gt;</code>.
+    <template #foot="{ close }">
+      <veui-button
+        ui="s primary"
+        @click="close('ok')"
+      >
+        Close
+      </veui-button>
+    </template>
+  </veui-drawer>
+</article>
+</template>
+
+<script>
+import { Drawer, Button, Icon } from 'veui'
+import 'veui-theme-dls-icons/flag'
+
+export default {
+  components: {
+    'veui-drawer': Drawer,
+    'veui-button': Button,
+    'veui-icon': Icon
+  },
+  data () {
+    return {
+      simpleOpen: false,
+      titleIconOpen: false,
+      footOpen: false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+.veui-button {
+  margin-right: 20px;
+}
+</style>

one/docs/demo/drawer/modal.vue

@@ -0,0 +1,64 @@
+<template>
+<article>
+  <veui-button @click="modalOpen = true">
+    Modal
+  </veui-button>
+  <veui-button @click="nonModalOpen = true">
+    Non-modal
+  </veui-button>
+  <veui-drawer
+    title="System"
+    :open.sync="modalOpen"
+    @ok="handleModalClose(true)"
+    @cancel="handleModalClose"
+  >
+    Do you want to refresh the page?
+  </veui-drawer>
+  <veui-drawer
+    title="System"
+    :open.sync="nonModalOpen"
+    :modal="false"
+    @ok="handleModalClose(true)"
+    @cancel="handleModalClose"
+  >
+    Do you want to refresh the page?
+  </veui-drawer>
+</article>
+</template>
+
+<script>
+import { Drawer, Button } from 'veui'
+
+export default {
+  components: {
+    'veui-drawer': Drawer,
+    'veui-button': Button
+  },
+  data () {
+    return {
+      modalOpen: false,
+      nonModalOpen: false
+    }
+  },
+  methods: {
+    handleModalClose (ok) {
+      this.modalOpen = false
+      if (ok) {
+        location.reload()
+      }
+    },
+    handleNonModalClose (ok) {
+      this.nonModalOpen = false
+      if (ok) {
+        location.reload()
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+.veui-button {
+  margin-right: 20px;
+}
+</style>

one/docs/demo/drawer/placement.vue

@@ -0,0 +1,103 @@
+<template>
+<article>
+  <section>
+    <veui-checkbox v-model="modal">
+      Modal
+    </veui-checkbox>
+    <veui-checkbox v-model="outsideClosable">
+      outside Closable
+    </veui-checkbox>
+  </section>
+
+  <section>
+    <veui-button @click="topOpen = true">
+      Top
+    </veui-button>
+    <veui-button @click="rightOpen = true">
+      Right
+    </veui-button>
+    <veui-button @click="bottomOpen = true">
+      Bottom
+    </veui-button>
+    <veui-button @click="leftOpen = true">
+      Left
+    </veui-button>
+  </section>
+
+  <veui-drawer
+    :open.sync="topOpen"
+    :outside-closable="outsideClosable"
+    :modal="modal"
+    placement="top"
+  >
+    <p>content area</p>
+    <template #title="{ close }">
+      <a @click="close">
+        关闭
+      </a>
+    </template>
+    <template #foot>
+      <div>Foot</div>
+    </template>
+  </veui-drawer>
+  <veui-drawer
+    :open.sync="rightOpen"
+    :modal="modal"
+    :outside-closable="outsideClosable"
+    placement="right"
+    title="Title"
+  />
+  <veui-drawer
+    title="Title"
+    :modal="modal"
+    :open.sync="bottomOpen"
+    :outside-closable="outsideClosable"
+    placement="bottom"
+  />
+  <veui-drawer
+    title="Title"
+    :modal="modal"
+    :open.sync="leftOpen"
+    :outside-closable="outsideClosable"
+    placement="left"
+  />
+</article>
+</template>
+
+<script>
+import { Checkbox, Drawer, Button } from 'veui'
+
+export default {
+  name: 'drawer-demo',
+  components: {
+    'veui-drawer': Drawer,
+    'veui-checkbox': Checkbox,
+    'veui-button': Button
+  },
+  data () {
+    return {
+      modal: true,
+      outsideClosable: false,
+      topOpen: false,
+      rightOpen: false,
+      bottomOpen: false,
+      leftOpen: false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+section {
+  & + & {
+    margin-top: 20px;
+  }
+}
+
+.veui-button,
+.veui-checkbox {
+  & + & {
+    margin-left: 20px;
+  }
+}
+</style>