'deploy'

.gitignore

@@ -15,6 +15,7 @@ yarn-error.log*
 package-lock.json
 
 # Editor directories and files
+.bitmap
 .idea
 .vscode
 *.suo

.npmignore

@@ -13,6 +13,7 @@ dist/demo.html
 # Editor directories and files
 .idea
 .vscode
+.bitmap
 *.suo
 *.ntvs*
 *.njsproj

bit.json

@@ -0,0 +1,11 @@
+{
+    "env": {
+        "compiler": "bit.envs/bundlers/vue@0.0.3"
+    },
+    "dependencies": {
+      "stylus": "^0.54.5",
+      "stylus-loader": "^3.0.2"
+    },
+    "componentsDefaultDirectory": "components/{namespace}/{name}",
+    "packageManager": "npm"
+}

dist/components/components.styl

@@ -7,6 +7,7 @@
 @import './vsTabs/main'
 @import './vsSlider/main'
 @import './vsInputNumber/main'
+// @import './vsTooltip/main'
 
 
 // in progress

dist/components/index.js

@@ -3,13 +3,14 @@ import vsSelect from './vsSelect'
 import vsSwitch from './vsSwitch'
 import vsCheckbox from './vsCheckBox'
 import vsRadio from './vsRadio'
-
-// component not soport SSR
-
 import vsInput from './vsInput'
 import vsTabs from './vsTabs'
 import vsSlider from './vsSlider'
 import vsInputNumber from './vsInputNumber'
+import vsTooltip from './vsTooltip'
+
+// component not soport SSR
+
 import vsUpload from './vsUpload'
 import vsPopup from './vsPopup'
 import vsAlert from './vsAlert'
@@ -65,6 +66,7 @@ export {
   vsDropDown,
   vsDivider,
   vsCollapse,
+  vsTooltip,
   // New Component export
 
 

dist/components/vsSelect/vsSelectItem.vue

@@ -1,6 +1,6 @@
 <template lang="html">
-  <li 
-    v-show="visible" 
+  <li
+    v-show="visible"
     class="vs-component">
     <button
       ref="item"
@@ -14,13 +14,13 @@
       class="vs-select-item-btn"
       type="button"
       name="button"
-      v-on="listeners" 
+      v-on="listeners"
       @keydown.backspace.prevent="backspace"
-      @keydown.down.prevent="navigateOptions('next')" 
-      @keydown.up.prevent="navigateOptions('prev')" 
+      @keydown.down.prevent="navigateOptions('next')"
+      @keydown.up.prevent="navigateOptions('prev')"
       @keydown.enter.prevent="clickOption()">
-      <i 
-        v-if="$parent.vsMultiple" 
+      <i
+        v-if="$parent.vsMultiple"
         class="material-icons icon-item">
         check_circle
       </i>
@@ -77,8 +77,14 @@ export default {
           }
         },
         click: (event) => this.clickOption(event),
-        mouseover: (event) => this.hoverx = true,
-        mouseout: (event) => this.hoverx = false
+        mouseover: (event) => {
+          this.$emit('mouseover',event)
+          this.changeHover(true)
+        },
+        mouseout: (event) => {
+          this.$emit('mouseover',event)
+          this.changeHover(false)
+        }
       }
     },
     styles(){
@@ -100,15 +106,10 @@ export default {
           this.getText = this.vsText
           return
         }
-        function MaysPrimera(string){
-          return string.charAt(0).toUpperCase() + string.slice(1);
-        }
-
         let valuex = valueInputx[valueInputx.length-1]
         var re = new RegExp(valuex,"i");
         if(this.vsText.toUpperCase().indexOf(valuex.toUpperCase()) == 0){
-          console.log('primera letra');
-          valuex = MaysPrimera(valuex)
+          valuex = this.MaysPrimera(valuex)
         }
         let text = this.vsText.replace(re,`<span class="searchx">${valuex}</span>`)
         this.getText = text
@@ -125,8 +126,13 @@ export default {
     this.putValue()
   },
   methods:{
+    changeHover(booleanx){
+      this.hoverx = booleanx
+    },
+    MaysPrimera(string){
+      return string.charAt(0).toUpperCase() + string.slice(1);
+    },
     backspace(){
-      console.dir(this.$parent.$refs.inputselect);
       if(this.$parent.vsAutocomplete){
         let valueInput = this.$parent.$refs.inputselect.value
         this.$parent.$refs.inputselect.value = valueInput.substr(0,valueInput.length-1)
@@ -180,7 +186,7 @@ export default {
         this.$parent.valuex = this.vsText
       }
     },
-    clickOption(event){
+    clickOption(){
       let text = this.vsText
       if(!this.$parent.vsMultiple){
         this.$parent.active = false

dist/components/vsTooltip/index.js

@@ -0,0 +1,5 @@
+import vsComponent from './vsTooltip'
+
+export default Vue => {
+  Vue.component(vsComponent.name, vsComponent)
+}

dist/components/vsTooltip/main.styl

@@ -0,0 +1,6 @@
+.vs-tooltip
+  position absolute
+  left 0px;
+  top: 0px;
+  z-index 2000
+  background: rgb(0,0,0)

dist/components/vsTooltip/vsTooltip.vue

@@ -0,0 +1,38 @@
+<template>
+  <div ref="convstooltip" @mouseover="mouseoverx" class="con-vs-tooltip">
+    <div
+      ref="vstooltip"
+      :style="style"
+      class="vs-tooltip">
+      hola mundo {{this.cords.left}}
+    </div>
+    <slot></slot>
+  </div>
+</template>
+<script>
+import utils from '../../utils'
+export default {
+  name:'VsTooltip',
+  data:()=>({
+    cords:{}
+  }),
+  computed:{
+    style(){
+      return {
+        left:this.cords.left,
+        top:this.cords.top
+      }
+    }
+  },
+  mounted(){
+    utils.insertBody(this.$refs.vstooltip)
+  },
+  methods:{
+    mouseoverx(){
+      let cords = utils.changePosition(this.$refs.convstooltip,this.$refs.vstooltip,true)
+      this.cords = cords
+      console.log(cords)
+    }
+  }
+}
+</script>