fix

components/index.js

@@ -9,3 +9,5 @@ export { default as Radio } from './radio'
 export { default as Grid } from './grid'
 
 export { default as Rate } from './rate'
+
+export { default as ToolTip } from './tooltip'

components/pagination/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less'
+import './index.less'

components/pagination/style/index.less

@@ -0,0 +1,333 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+@import "../../input/style/mixin";
+
+@pagination-prefix-cls: ~"@{ant-prefix}-pagination";
+
+.@{pagination-prefix-cls} {
+  font-size: @font-size-base;
+
+  &:after {
+    content: " ";
+    display: block;
+    height: 0;
+    clear: both;
+    overflow: hidden;
+    visibility: hidden;
+  }
+
+  &-total-text {
+    display: inline-block;
+    vertical-align: middle;
+    height: 28px;
+    line-height: 28px;
+    margin-right: 8px;
+  }
+
+  &-item {
+    cursor: pointer;
+    border-radius: @border-radius-base;
+    user-select: none;
+    min-width: 28px;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    list-style: none;
+    display: inline-block;
+    vertical-align: middle;
+    border: @border-width-base @border-style-base @border-color-base;
+    background-color: @component-background;
+    margin-right: 8px;
+    font-family: Arial;
+    outline: 0;
+
+    a {
+      text-decoration: none;
+      color: @text-color;
+      transition: none;
+      margin: 0 6px;
+    }
+
+    &:focus,
+    &:hover {
+      transition: all .3s;
+      border-color: @primary-color;
+      a {
+        color: @primary-color;
+      }
+    }
+
+    &-active {
+      background-color: @primary-color;
+      border-color: @primary-color;
+
+      &:focus,
+      &:hover {
+        background-color: @primary-5;
+        border-color: @primary-5;
+      }
+
+      a,
+      &:focus a,
+      &:hover a {
+        color: #fff;
+      }
+    }
+  }
+
+  &-jump-prev,
+  &-jump-next {
+    outline: 0;
+
+    &:after {
+      content: "•••";
+      display: block;
+      letter-spacing: 2px;
+      color: @disabled-color;
+      text-align: center;
+    }
+
+    &:focus,
+    &:hover {
+      &:after {
+        color: @primary-color;
+        .iconfont-size-under-12px(8px);
+        letter-spacing: -1px;
+        font-family: "anticon";
+      }
+    }
+  }
+
+  &-jump-prev {
+    &:focus,
+    &:hover {
+      &:after {
+        content: "\e620\e620";
+      }
+    }
+  }
+
+  &-jump-next {
+    &:focus,
+    &:hover {
+      &:after {
+        content: "\e61f\e61f";
+      }
+    }
+  }
+
+  &-prev,
+  &-jump-prev,
+  &-jump-next {
+    margin-right: 8px;
+  }
+  &-prev,
+  &-next,
+  &-jump-prev,
+  &-jump-next {
+    font-family: Arial;
+    cursor: pointer;
+    color: @text-color;
+    border-radius: @border-radius-base;
+    list-style: none;
+    min-width: 28px;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    transition: all .3s;
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  &-prev,
+  &-next {
+    outline: 0;
+
+    a {
+      color: @text-color;
+      user-select: none;
+    }
+
+    &:hover a {
+      color: @primary-color;
+    }
+
+    .@{pagination-prefix-cls}-item-link {
+      border: @border-width-base @border-style-base @border-color-base;
+      background-color: @component-background;
+      border-radius: @border-radius-base;
+      outline: none;
+      display: block;
+      transition: all .3s;
+
+      &:after {
+        .iconfont-size-under-12px(8px);
+        display: block;
+        height: 26px;
+        line-height: 26px;
+        font-family: "anticon";
+        text-align: center;
+        font-weight: 500;
+      }
+    }
+
+    &:focus .@{pagination-prefix-cls}-item-link,
+    &:hover .@{pagination-prefix-cls}-item-link {
+      border-color: @primary-color;
+      color: @primary-color;
+    }
+  }
+
+  &-prev {
+    .@{pagination-prefix-cls}-item-link:after {
+      content: "\e620";
+      display: block;
+    }
+  }
+
+  &-next {
+    .@{pagination-prefix-cls}-item-link:after {
+      content: "\e61f";
+      display: block;
+    }
+  }
+
+  &-disabled {
+    &,
+    &:hover,
+    &:focus {
+      cursor: not-allowed;
+      a,
+      .@{pagination-prefix-cls}-item-link {
+        border-color: @border-color-base;
+        color: @disabled-color;
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  &-slash {
+    margin: 0 10px 0 5px;
+  }
+
+  &-options {
+    display: inline-block;
+    vertical-align: middle;
+    margin-left: 16px;
+
+    &-size-changer {
+      display: inline-block;
+      margin-right: 8px;
+    }
+
+    &-quick-jumper {
+      display: inline-block;
+      height: @input-height-base;
+      line-height: @input-height-base;
+
+      input {
+        .input;
+        margin: 0 8px;
+        width: 50px;
+      }
+    }
+  }
+
+  &-simple &-prev,
+  &-simple &-next {
+    height: 24px;
+    line-height: 24px;
+    vertical-align: top;
+    .@{pagination-prefix-cls}-item-link {
+      border: 0;
+      height: 24px;
+      &:after {
+        line-height: 24px;
+      }
+    }
+  }
+
+  &-simple &-simple-pager {
+    display: inline-block;
+    margin-right: 8px;
+    height: 24px;
+
+    input {
+      margin-right: 8px;
+      box-sizing: border-box;
+      background-color: @component-background;
+      border-radius: @border-radius-base;
+      border: @border-width-base @border-style-base @border-color-base;
+      outline: none;
+      padding: 0 6px;
+      height: 100%;
+      text-align: center;
+      transition: border-color .3s;
+
+      &:hover {
+        border-color: @primary-color;
+      }
+    }
+  }
+}
+
+.@{pagination-prefix-cls} {
+  &.mini &-total-text,
+  &.mini &-simple-pager {
+    height: 20px;
+    line-height: 20px;
+  }
+
+  &.mini &-item {
+    border: 0;
+    margin: 0;
+    min-width: 20px;
+    height: 20px;
+    line-height: 20px;
+  }
+
+  &.mini &-prev,
+  &.mini &-next {
+    margin: 0;
+    min-width: 20px;
+    height: 20px;
+    line-height: 20px;
+  }
+
+  &.mini &-prev &-item-link,
+  &.mini &-next &-item-link {
+    border: 0;
+    &:after {
+      height: 20px;
+      line-height: 20px;
+    }
+  }
+
+  &.mini &-jump-prev,
+  &.mini &-jump-next {
+    height: 20px;
+    line-height: 20px;
+  }
+
+  &.mini &-options {
+    margin-left: 8px;
+    &-quick-jumper {
+      height: 20px;
+      line-height: 20px;
+
+      input {
+        .input-sm;
+        width: 44px;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 1024px) {
+  .@{pagination-prefix-cls}-item {
+    &-after-jump-prev,
+    &-before-jump-next {
+      display: none;
+    }
+  }
+}

components/tooltip/index.js

@@ -0,0 +1,3 @@
+import ToolTip from './tooltip.vue'
+export default ToolTip
+

components/tooltip/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less'
+import './index.less'

components/tooltip/style/index.less

@@ -0,0 +1,207 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+
+@tooltip-prefix-cls: ~"@{ant-prefix}-tooltip";
+
+// Base class
+.@{tooltip-prefix-cls} {
+  position: absolute;
+  z-index: @zindex-tooltip;
+  display: block;
+  visibility: visible;
+  font-size: @font-size-base;
+  line-height: @line-height-base;
+
+  &-hidden {
+    display: none;
+  }
+
+  &-placement-top,
+  &-placement-topLeft,
+  &-placement-topRight {
+    padding-bottom: @tooltip-distance;
+  }
+  &-placement-right,
+  &-placement-rightTop,
+  &-placement-rightBottom {
+    padding-left: @tooltip-distance;
+  }
+  &-placement-bottom,
+  &-placement-bottomLeft,
+  &-placement-bottomRight {
+    padding-top: @tooltip-distance;
+  }
+  &-placement-left,
+  &-placement-leftTop,
+  &-placement-leftBottom {
+    padding-right: @tooltip-distance;
+  }
+}
+
+// Wrapper for the tooltip content
+.@{tooltip-prefix-cls}-inner {
+  max-width: @tooltip-max-width;
+  padding: 8px 10px;
+  color: @tooltip-color;
+  text-align: left;
+  text-decoration: none;
+  background-color: @tooltip-bg;
+  border-radius: @border-radius-base;
+  box-shadow: @box-shadow-base;
+  min-height: 34px;
+}
+
+// Arrows
+.@{tooltip-prefix-cls}-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+
+.@{tooltip-prefix-cls} {
+  &-placement-top &-arrow,
+  &-placement-topLeft &-arrow,
+  &-placement-topRight &-arrow {
+    bottom: @tooltip-distance - @tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-top-color: @tooltip-arrow-color;
+  }
+
+  &-placement-top &-arrow {
+    left: 50%;
+    margin-left: -@tooltip-arrow-width;
+  }
+
+  &-placement-topLeft &-arrow {
+    left: 16px;
+  }
+
+  &-placement-topRight &-arrow {
+    right: 16px;
+  }
+
+  &-placement-right &-arrow,
+  &-placement-rightTop &-arrow,
+  &-placement-rightBottom &-arrow {
+    left: @tooltip-distance - @tooltip-arrow-width;
+    border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
+    border-right-color: @tooltip-arrow-color;
+  }
+
+  &-placement-right &-arrow {
+    top: 50%;
+    margin-top: -@tooltip-arrow-width;
+  }
+
+  &-placement-rightTop &-arrow {
+    top: 8px;
+  }
+
+  &-placement-rightBottom &-arrow {
+    bottom: 8px;
+  }
+
+  &-placement-left &-arrow,
+  &-placement-leftTop &-arrow,
+  &-placement-leftBottom &-arrow {
+    right: @tooltip-distance - @tooltip-arrow-width;
+    border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-left-color: @tooltip-arrow-color;
+  }
+
+  &-placement-left &-arrow {
+    top: 50%;
+    margin-top: -@tooltip-arrow-width;
+  }
+
+  &-placement-leftTop &-arrow {
+    top: 8px;
+  }
+
+  &-placement-leftBottom &-arrow {
+    bottom: 8px;
+  }
+
+  &-placement-bottom &-arrow,
+  &-placement-bottomLeft &-arrow,
+  &-placement-bottomRight &-arrow {
+    top: @tooltip-distance - @tooltip-arrow-width;
+    border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
+    border-bottom-color: @tooltip-arrow-color;
+  }
+
+  &-placement-bottom &-arrow {
+    left: 50%;
+    margin-left: -@tooltip-arrow-width;
+  }
+
+  &-placement-bottomLeft &-arrow {
+    left: 16px;
+  }
+
+  &-placement-bottomRight &-arrow {
+    right: 16px;
+  }
+}
+
+
+/**
+modified part ,remove these if needed
+ */
+
+.vc-fade-enter-active, .vc-fade-leave-active {
+  transition: all 3s;
+}
+.vc-fade-enter, .vc-fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
+  opacity: 0;
+}
+
+.box {
+  background: red;
+  width: 100px;
+  height: 100px;
+}
+.fade-enter {
+  opacity: 0;
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
+  animation-play-state: paused;
+}
+
+.fade-leave {
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
+  animation-play-state: paused;
+}
+
+.fade-enter.fade-enter-active {
+  animation-name: rcDialogFadeIn;
+  animation-play-state: running;
+}
+
+.fade-leave.fade-leave-active {
+  animation-name: rcDialogFadeOut;
+  animation-play-state: running;
+}
+
+@keyframes rcDialogFadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes rcDialogFadeOut {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

components/tooltip/tooltip.vue

@@ -0,0 +1,179 @@
+<script>
+import Vue from 'vue'
+import AntTransition from '../../utils/ant-transition.vue'
+
+Vue.component('ant-transition', AntTransition)
+
+export default {
+  name: 'ToolTip',
+  props: {
+    title: [String, Vue.Component],
+    prefixCls: {
+      default: 'ant-tooltip',
+    },
+    placement: {
+      default: 'top',
+      validator: val => ['top', 'left', 'right', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom'].includes(val)
+    },
+    transitionName: {
+      default: 'zoom-big-fast',
+    },
+    mouseEnterDelay: {
+      default: 0.1,
+    },
+    mouseLeaveDelay: {
+      default: 0.1,
+    },
+    arrowPointAtCenter: {
+      default: false,
+    },
+    autoAdjustOverflow: {
+      default: true,
+    },
+  },
+  data () {
+    return {
+      vnode: null,
+      visible: false,
+      left: 0,
+      top: 0,
+    }
+  },
+  computed: {
+    classes () {
+      const { prefixCls } = this
+      return {
+        [`${prefixCls}`]: true,
+      }
+    },
+  },
+  created() {
+    const div = document.createElement('div')
+    document.body.appendChild(div)
+    const that = this
+    const vnode = new Vue({
+      data() {
+        return {
+          left: 0,
+          top: 0,
+        }
+      },
+      render(h) {
+        return (
+          <ant-transition name="fade">
+            <div
+              v-show={that.visible}
+              class={`ant-tooltip ant-tooltip-placement-${that.placement} ${that.visible ? '' : 'ant-tooltip-hidden'}`}
+              style={{ left: this.left + 'px', top: this.top + 'px' }}
+            >
+              <div class="ant-tooltip-content">
+                <div class="ant-tooltip-arrow"/>
+                <div class="ant-tooltip-inner">
+                  <span>{that.title}</span>
+                </div>
+              </div>
+            </div>
+          </ant-transition>
+        )
+      }
+    }).$mount(div)
+    this.$nextTick(() => {
+      this.vnode = vnode
+    })
+  },
+  methods: {
+    onPopupAlign: (placement, domNode, target, align) => {
+      if (!placement) {
+        return;
+      }
+      // 根据当前坐标设置动画点
+      const rect = domNode.getBoundingClientRect()
+      const transformOrigin = {
+        top: '50%',
+        left: '50%',
+      };
+      if (placement.indexOf('top') >= 0 || placement.indexOf('Bottom') >= 0) {
+        transformOrigin.top = `${rect.height - align.offset[1]}px`;
+      } else if (placement.indexOf('Top') >= 0 || placement.indexOf('bottom') >= 0) {
+        transformOrigin.top = `${-align.offset[1]}px`;
+      }
+      if (placement.indexOf('left') >= 0 || placement.indexOf('Right') >= 0) {
+        transformOrigin.left = `${rect.width - align.offset[0]}px`;
+      } else if (placement.indexOf('right') >= 0 || placement.indexOf('Left') >= 0) {
+        transformOrigin.left = `${-align.offset[0]}px`;
+      }
+      target.style.transformOrigin = `${transformOrigin.left} ${transformOrigin.top}`;
+    },
+    addEventHandle(old, fn) {
+      if (!old) {
+        return fn
+      } else if (Array.isArray(old)) {
+        return old.indexOf(fn) > -1 ? old : old.concat(fn)
+      } else {
+        return old === fn ? old : [old, fn]
+      }
+    },
+    computeOffset(popup, text, placement) {
+      let { width, height, top, left } = text
+      //  you cant change the properties of DOMRect
+      top += window.scrollY
+      left += window.scrollX
+      const ret = { left, top }
+
+      if (/top/.test(placement)) ret.top -= popup.height
+      if (/bottom/.test(placement)) ret.top += height
+      if (/left/.test(placement)) ret.left -= popup.width
+      if (/right/.test(placement)) ret.left += width
+
+      if (/Left/.test(placement)) {
+      } else if(/Right/.test(placement)) {
+        ret.left += (width - popup.width)
+      } else if(/(top)|(bottom)/.test(placement)) {
+        ret.left += (width - popup.width) / 2
+      }
+      if (/Top/.test(placement)) {
+      } else if(/Bottom/.test(placement)) {
+        ret.top += (height - popup.height)
+      } else if(/(left)|(right)/.test(placement)) {
+        ret.top += (height - popup.height) / 2
+      }
+      return ret
+    },
+    showNode() {
+      this.visible = true
+      this.$nextTick(() => {
+        const popup = this.vnode.$el.getBoundingClientRect()
+        const content = this.$el.getBoundingClientRect()
+        const { left, top } = this.computeOffset(popup, content, this.placement)
+        this.vnode.left = left
+        this.vnode.top = top
+      })
+      this.onPopupAlign(this.placement, this.$el, this.vnode.$el, { offset: [0,0] })
+    },
+    hideNode() {
+      this.visible = false
+    }
+  },
+  render(h) {
+    let node = this.vnode
+    const inner = this.$slots.default[0]
+    inner.data = inner.data || {}
+    inner.data.on = inner.data.on || {}
+    inner.data.on.mouseenter = this.addEventHandle(inner.data.on.mouseenter, this.showNode)
+    inner.data.on.mouseleave = this.addEventHandle(inner.data.on.mouseleave, this.hideNode)
+//    console.info(inner)
+    return this.$slots.default[0]
+  },
+  mounted() {
+    this.$nextTick(() => {
+    })
+  },
+  beforeDestory() {
+    console.info('没有成功清除实例，看vue panel')
+    this.vnode.$destroy();
+  },
+  components: {
+    'ant-transition': AntTransition
+  }
+}
+</script>

examples/index.js

@@ -1,6 +1,5 @@
 import './index.less'
 import Vue from 'vue'
-import VueMarkdown from 'vue-markdown'
 import VueRouter from 'vue-router'
 import routes from './routes'
 Vue.use(VueRouter)
@@ -9,7 +8,6 @@ const router = new VueRouter({
   mode: 'history',
   routes,
 })
-Vue.component('vue-markdown', VueMarkdown)
 new Vue({
   el: '#app',
   router,

examples/rate.vue

@@ -27,7 +27,7 @@
     <span v-if="hoverValueAH">{{hoverValueAH}}stars</span>
     </br>
     自定义
-    <Rate :value="initValue" :character="character"></Rate>
+    <Rate :value="initValue" :allowHalf="allowHalf" :character="character"></Rate>
   </div>
 </template>
 <script>

examples/tooltip.vue

@@ -0,0 +1,29 @@
+<template>
+  <tool-tip
+    placement="top"
+    title="nihaoaaaaaaaaaaaaaaaaaaaaa">
+    <h1 @click="boom" style="display: inline-block">This is just a test, put your cursor here</h1>
+  </tool-tip>
+</template>
+
+<script>
+  import { ToolTip } from '../components'
+	export default {
+		name: '',
+		data() {
+			return {}
+		},
+    methods: {
+		  boom() {
+		    console.info(23333)
+      }
+    },
+    components: {
+		  ToolTip
+    }
+	}
+</script>
+
+<style scoped>
+
+</style>

utils/ant-transition.vue

@@ -0,0 +1,32 @@
+<template>
+  <transition
+    :name="name"
+    :enter-to-class="enterTo"
+    :enter-active-class="enterActive"
+    :leave-to-class="leaveTo"
+  >
+    <slot></slot>
+  </transition>
+</template>
+
+<script>
+	export default {
+		name: 'ant-transition',
+    props: {
+		  name: {
+		    required: true,
+      }
+    },
+    computed: {
+      enterTo() {
+        return this.name + '-enter'
+      },
+      enterActive() {
+        return `${this.name}-enter ${this.name}-enter-active`
+      },
+      leaveTo() {
+        return this.name + '-leave'
+      }
+    }
+	}
+</script>