feat: publicize doc implemetation

one/docs/demo/dialog/async.vue

@@ -0,0 +1,121 @@
+<template>
+<article>
+  <veui-button
+    :disabled="submitting"
+    @click="submitOpen = true"
+  >
+    Submit
+  </veui-button>
+  <veui-button
+    :disabled="saving"
+    @click="saveOpen = true"
+  >
+    Save
+  </veui-button>
+  <veui-dialog
+    title="System"
+    :open.sync="submitOpen"
+    :before-close="submit"
+    :closable="false"
+    :escapable="!submitting"
+    :loading="submitting"
+  >
+    Confirm to create the issue?
+  </veui-dialog>
+  <veui-dialog
+    title="System"
+    :open.sync="saveOpen"
+    :closable="false"
+    :escapable="!submitting"
+  >
+    Confirm to save the post?
+    <template #foot>
+      <veui-button
+        ui="primary"
+        :loading="saving"
+        @click="save('ok')"
+      >
+        OK
+      </veui-button>
+      <veui-button
+        :disabled="saving"
+        @click="save"
+      >
+        Cancel
+      </veui-button>
+    </template>
+  </veui-dialog>
+</article>
+</template>
+
+<script>
+import { Dialog, Button } from 'veui'
+import toast from 'veui/managers/toast'
+
+function fakeRequest () {
+  return new Promise(resolve =>
+    setTimeout(() => {
+      resolve(Math.random() < 0.5)
+    }, 2000)
+  )
+}
+
+export default {
+  components: {
+    'veui-dialog': Dialog,
+    'veui-button': Button
+  },
+  data () {
+    return {
+      submitOpen: false,
+      saveOpen: false,
+      submitting: false,
+      saving: false
+    }
+  },
+  methods: {
+    submit (type) {
+      if (type === 'ok') {
+        this.submitting = true
+        return fakeRequest().then(success => {
+          this.submitting = false
+          if (!success) {
+            toast.error('Failed to create the issue. Please retry.')
+            return false
+          }
+          toast.success('Issue created successfully!')
+        })
+      }
+    },
+    save (type) {
+      if (type === 'ok') {
+        this.saving = true
+        return fakeRequest().then(success => {
+          this.saving = false
+          if (!success) {
+            toast.error('Failed to save the post. Please retry.')
+          } else {
+            toast.success('Post saved successfully!')
+            this.saveOpen = false
+          }
+        })
+      }
+      this.saveOpen = false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+article > .veui-button {
+  margin-right: 20px;
+}
+</style>
+
+<docs>
+当你希望统一处理用户可能触发对话框关闭的操作，请使用 `before-close` 属性传入统一的处理函数，此时无论是点击“确定”/“取消”按钮、关闭按钮还是按下 <kbd>esc</kbd> 触发的关闭操作，都会统一进入 `before-close` 的处理流程。如果逻辑相对简单，比如取消时没有额外逻辑，可以直接操作 `open` 属性来关闭对话框。
+</docs>
+
+<docs locale="en-US">
+When you want a unified process to handle all user interactions that might trigger the dialog to be closed, you can leverage the `before-close` function prop. No matter the close behavior is about to be triggered by clicking “OK”/“Cancel” buttons, the close button or pressing <kbd>esc</kbd>, `before-close` will always take over the following process. If the logic is relatively simple, you can manipulate `open` prop directly to close the dialog.
+</docs>

one/docs/demo/dialog/custom.vue

@@ -0,0 +1,73 @@
+<template>
+<article>
+  <veui-button @click="simpleOpen = true">
+    Title & content
+  </veui-button>
+  <veui-dialog
+    :open.sync="simpleOpen"
+    title="Customized Title & Content"
+    @ok="simpleOpen = false"
+    @cancel="simpleOpen = false"
+  >
+    Customized content via <code>&lt;slot&gt;</code>.
+  </veui-dialog>
+
+  <veui-button @click="titleIconOpen = true">
+    Icon in Title
+  </veui-button>
+  <veui-dialog
+    :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-dialog>
+
+  <veui-button @click="footOpen = true">
+    Foot
+  </veui-button>
+  <veui-dialog
+    :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-dialog>
+</article>
+</template>
+
+<script>
+import { Dialog, Button, Icon } from 'veui'
+import 'veui-theme-dls-icons/flag'
+
+export default {
+  components: {
+    'veui-dialog': Dialog,
+    '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/dialog/draggable.vue

@@ -0,0 +1,38 @@
+<template>
+<article>
+  <veui-button @click="draggableOpen = true">
+    Draggable
+  </veui-button>
+  <veui-dialog
+    :open.sync="draggableOpen"
+    title="Draggable Dialog"
+    draggable
+    @ok="draggableOpen = false"
+    @cancel="draggableOpen = false"
+  >
+    This dialog is draggable.
+  </veui-dialog>
+</article>
+</template>
+
+<script>
+import { Dialog, Button } from 'veui'
+
+export default {
+  components: {
+    'veui-dialog': Dialog,
+    'veui-button': Button
+  },
+  data () {
+    return {
+      draggableOpen: false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+.veui-button {
+  margin-right: 20px;
+}
+</style>

one/docs/demo/dialog/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-dialog
+    title="System"
+    :open.sync="modalOpen"
+    @ok="handleModalClose(true)"
+    @cancel="handleModalClose"
+  >
+    Do you want to refresh the page?
+  </veui-dialog>
+  <veui-dialog
+    title="System"
+    :open.sync="nonModalOpen"
+    :modal="false"
+    @ok="handleModalClose(true)"
+    @cancel="handleModalClose"
+  >
+    Do you want to refresh the page?
+  </veui-dialog>
+</article>
+</template>
+
+<script>
+import { Dialog, Button } from 'veui'
+
+export default {
+  components: {
+    'veui-dialog': Dialog,
+    '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/dialog/stack.vue

@@ -0,0 +1,62 @@
+<template>
+<article>
+  <veui-button @click="aOpen = true">
+    Dialog A
+  </veui-button>
+  <veui-dialog
+    :open.sync="aOpen"
+    title="Dialog A"
+    draggable
+    :modal="false"
+    @ok="aOpen = false"
+    @cancel="aOpen = false"
+  >
+    The content of Dialog A.
+  </veui-dialog>
+
+  <veui-button @click="bOpen = true">
+    Dialog B
+  </veui-button>
+  <veui-dialog
+    :open.sync="bOpen"
+    title="Dialog B"
+    draggable
+    :modal="false"
+    @ok="bOpen = false"
+    @cancel="bOpen = false"
+  >
+    The content of Dialog B.
+  </veui-dialog>
+</article>
+</template>
+
+<script>
+import { Dialog, Button } from 'veui'
+
+export default {
+  components: {
+    'veui-dialog': Dialog,
+    'veui-button': Button
+  },
+  data () {
+    return {
+      aOpen: false,
+      bOpen: false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+.veui-button {
+  margin-right: 20px;
+}
+</style>
+
+<docs>
+同时打开上面两个对话框，将一个拖动到使两个对话框稍稍重叠的位置。然后当你点击激活一个对话框，它就将显示于另一个之上了。
+</docs>
+
+<docs locale="en-US">
+Open both dialogs and drag one of them to make them overlap a little bit. Then when you activate one dialog, it will be displayed on top of the other one.
+</docs>