feat: publicize doc implemetation

one/docs/demo/directives/drag/axis.vue

@@ -0,0 +1,51 @@
+<template>
+<article>
+  <div
+    ref="target1"
+    v-drag:target1.translate.x
+    class="target"
+  >
+    水平方向
+  </div>
+  <div
+    ref="target2"
+    v-drag:target2.translate.y
+    class="target"
+  >
+    垂直方向
+  </div>
+</article>
+</template>
+
+<script>
+import drag from 'veui/directives/drag'
+
+export default {
+  directives: {
+    drag
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+@import "~veui-theme-dls/lib.less";
+
+article {
+  height: 200px;
+}
+
+.target {
+  .size(80px);
+  background: @veui-gray-color-6;
+  display: inline-flex;
+  margin-right: 40px;
+  align-items: center;
+  justify-content: center;
+  vertical-align: top;
+}
+
+.container {
+  .size(100%, 300px);
+  background: @veui-gray-color-8;
+}
+</style>

one/docs/demo/directives/drag/base.vue

@@ -0,0 +1,28 @@
+<template>
+<article>
+  <div
+    ref="target"
+    v-drag:target.translate
+    class="target"
+  />
+</article>
+</template>
+
+<script>
+import drag from 'veui/directives/drag'
+
+export default {
+  directives: {
+    drag
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+@import "~veui-theme-dls/lib.less";
+
+.target {
+  .size(80px);
+  background: @veui-gray-color-6;
+}
+</style>

one/docs/demo/directives/drag/containment.vue

@@ -0,0 +1,38 @@
+<template>
+<article>
+  <div
+    ref="container"
+    class="container"
+  >
+    <div
+      ref="target"
+      v-drag:target.translate="{containment: 'container'}"
+      class="target"
+    />
+  </div>
+</article>
+</template>
+
+<script>
+import drag from 'veui/directives/drag'
+
+export default {
+  directives: {
+    drag
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+@import "~veui-theme-dls/lib.less";
+
+.target {
+  .size(80px);
+  background: @veui-gray-color-6;
+}
+
+.container {
+  .size(100%, 300px);
+  background: @veui-gray-color-8;
+}
+</style>

one/docs/demo/directives/drag/targets.vue

@@ -0,0 +1,48 @@
+<template>
+<article>
+  <div
+    ref="target1"
+    v-drag:target1,target2,target3.translate
+    class="target"
+  >
+    主元素
+  </div>
+  <div
+    ref="target2"
+    class="target"
+  />
+  <div
+    ref="target3"
+    class="target"
+  />
+</article>
+</template>
+
+<script>
+import drag from 'veui/directives/drag'
+
+export default {
+  directives: {
+    drag
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+@import "~veui-theme-dls/lib.less";
+
+.target {
+  .size(80px);
+  background: @veui-gray-color-6;
+  display: inline-flex;
+  margin-right: 40px;
+  align-items: center;
+  justify-content: center;
+  vertical-align: top;
+}
+
+.container {
+  .size(100%, 300px);
+  background: @veui-gray-color-8;
+}
+</style>

one/docs/demo/directives/nudge.vue

@@ -0,0 +1,77 @@
+<template>
+<article>
+  <div class="box value">
+    {{ displayValue }}
+  </div>
+  <div
+    v-nudge.x="{update: handleNudgeUpdate}"
+    class="box"
+    tabindex="-1"
+  >
+    点我，按<strong>左右</strong>方向键
+  </div>
+  <div
+    v-nudge.y="{update: handleNudgeUpdate}"
+    class="box"
+    tabindex="-1"
+  >
+    点我，按<strong>上下</strong>方向键
+  </div>
+</article>
+</template>
+
+<script>
+import nudge from 'veui/directives/nudge'
+
+export default {
+  directives: {
+    nudge
+  },
+  data () {
+    return {
+      value: 0
+    }
+  },
+  computed: {
+    displayValue () {
+      return this.value.toFixed(1).replace('.0', '')
+    }
+  },
+  methods: {
+    handleNudgeUpdate (increase) {
+      this.value += increase
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+@import "~veui-theme-dls/lib.less";
+
+article {
+  display: flex;
+}
+
+.box {
+  .size(200px, 50px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid @veui-gray-color-5;
+  background: #fff;
+  margin-right: 40px;
+  user-select: none;
+  cursor: pointer;
+  outline: none;
+  transition: background-color 0.3s;
+  line-height: 1;
+
+  &:focus {
+    background-color: @veui-gray-color-6;
+  }
+}
+
+.value {
+  font-size: 1.5em;
+}
+</style>

one/docs/demo/directives/outside/click.vue

@@ -0,0 +1,54 @@
+<template>
+<article
+  @mouseenter="inDemo = true"
+  @mouseleave="inDemo = false"
+>
+  <div
+    v-outside="handleOutside"
+    class="box"
+  >
+    目标元素 A
+  </div>
+</article>
+</template>
+
+<script>
+import outside from 'veui/directives/outside'
+import toast from 'veui/managers/toast'
+
+export default {
+  directives: {
+    outside
+  },
+  data () {
+    return {
+      timer: null,
+      inDemo: false
+    }
+  },
+  methods: {
+    handleOutside () {
+      if (this.inDemo) {
+        toast.info('点击了目标元素 A 外部。')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+@import "~veui-theme-dls/lib.less";
+
+.box {
+  .size(500px, 100px);
+  background: @veui-gray-color-8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+article {
+  margin: -30px;
+  padding: 30px;
+}
+</style>

one/docs/demo/directives/outside/hover-with-delay.vue

@@ -0,0 +1,64 @@
+<template>
+<article>
+  <div
+    v-outside:box2,box3.hover.1000="handleOutside"
+    class="box1"
+  >
+    目标元素 C
+  </div>
+  <div
+    ref="box2"
+    class="box2"
+  >
+    目标元素 D
+  </div>
+  <div
+    ref="box3"
+    class="box3"
+  >
+    目标元素 E
+  </div>
+</article>
+</template>
+
+<script>
+import outside from 'veui/directives/outside'
+import toast from 'veui/managers/toast'
+
+export default {
+  directives: {
+    outside
+  },
+  data () {
+    return {
+      consoleVisible: false,
+      timer: null
+    }
+  },
+  methods: {
+    handleOutside () {
+      toast.info('在 1000ms 内未移回目标元素 C、D、E，触发外部事件。')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+@import "~veui-theme-dls/lib.less";
+
+.box1,
+.box2,
+.box3 {
+  .size(200px, 100px);
+  background: @veui-gray-color-8;
+  margin-right: 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+article {
+  margin: -30px;
+  padding: 30px;
+}
+</style>

one/docs/demo/directives/outside/hover.vue

@@ -0,0 +1,49 @@
+<template>
+<article>
+  <div
+    v-outside.hover="handleOutside"
+    class="box"
+  >
+    目标元素 B
+  </div>
+</article>
+</template>
+
+<script>
+import outside from 'veui/directives/outside'
+import toast from 'veui/managers/toast'
+
+export default {
+  directives: {
+    outside
+  },
+  data () {
+    return {
+      consoleVisible: false,
+      timer: null
+    }
+  },
+  methods: {
+    handleOutside () {
+      toast.info('鼠标移到了目标元素B外部。')
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped docs>
+@import "~veui-theme-dls/lib.less";
+
+.box {
+  .size(500px, 100px);
+  background: @veui-gray-color-8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+article {
+  margin: -30px;
+  padding: 30px;
+}
+</style>

one/docs/demo/directives/resize.vue

@@ -0,0 +1,98 @@
+<template>
+<article>
+  <section>
+    <veui-button
+      @click="randomSize"
+    >
+      调整尺寸
+    </veui-button>
+    <div
+      ref="demo"
+      v-resize="updateSize"
+      class="demo"
+      :style="`width: ${size}px`"
+    >
+      v-resize="handler"
+    </div>
+    <p>当前尺寸: {{ caughtSize }}px</p>
+    <div
+      ref="demo1"
+      v-resize.debounce.leading="updateSize1"
+      class="demo"
+      :style="`width: ${size}px`"
+    >
+      v-resize.debounce="handler"
+    </div>
+    <p>当前尺寸: {{ caughtSize1 }}px</p>
+    <div
+      ref="demo2"
+      v-resize.throttle.500="updateSize2"
+      class="demo"
+      :style="`width: ${size}px`"
+    >
+      v-resize.throttle.500="handler"
+    </div>
+    <p>当前尺寸: {{ caughtSize2 }}px</p>
+    <div
+      ref="demo3"
+      v-resize="{mode: 'throttle', handler: updateSize3}"
+      class="demo"
+      :style="`width: ${size}px`"
+    >
+      v-resize="{mode: 'throttle', handler}"
+    </div>
+    <p>当前尺寸: {{ caughtSize3 }}px</p>
+  </section>
+</article>
+</template>
+
+<script>
+import { Button } from 'veui'
+import { resize } from 'veui/directives'
+
+export default {
+  components: {
+    'veui-button': Button
+  },
+  directives: {
+    resize
+  },
+  data () {
+    return {
+      size: 315,
+      caughtSize: 315,
+      caughtSize1: 315,
+      caughtSize2: 315,
+      caughtSize3: 315
+    }
+  },
+  methods: {
+    randomSize () {
+      this.size = Math.ceil(Math.random() * 480) + 315
+    },
+    updateSize () {
+      this.caughtSize = this.$refs.demo.offsetWidth
+    },
+    updateSize1 () {
+      this.caughtSize1 = this.$refs.demo1.offsetWidth
+    },
+    updateSize2 () {
+      this.caughtSize2 = this.$refs.demo2.offsetWidth
+    },
+    updateSize3 () {
+      this.caughtSize3 = this.$refs.demo3.offsetWidth
+    }
+  }
+}
+</script>
+
+<style lang="less" docs scoped>
+.demo {
+  height: 50px;
+  line-height: 50px;
+  margin-top: 10px;
+  padding-left: 10px;
+  background-color: #eee;
+  transition: width 2s;
+}
+</style>