diff --git a/package.json b/package.json index eddca6f1..9e936620 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-strap", - "version": "2.0.2", + "version": "2.0.6", "description": "Bootstrap components built with Vue.js", "main": "dist/vue-strap.js", "typings": "types/index.d.ts", @@ -14,7 +14,7 @@ }, "dependencies": { "bootstrap": "^3.3.7", - "vue": "^2.1.0", + "vue": "^2.6.10", "vue-template-compiler": "^2.1.0", "vue-resource": "^1.0.3" }, diff --git a/src/Input.vue b/src/Input.vue index 92b9ce04..fd8ff242 100644 --- a/src/Input.vue +++ b/src/Input.vue @@ -17,9 +17,10 @@ :rows="rows" :step="step" :title="attr(title)" + :autofocus="autofocus" :type="type=='textarea'?null:type" - v-model="val" - @blur="emit" @focus="emit" @input="emit" + :value="val" @input="emit" + @blur="emit" @focus="emit" @keyup.enter="type!='textarea'&&enterSubmit&&submit()" >
@@ -45,9 +46,10 @@ :rows="rows" :step="step" :title="attr(title)" + :autofocus="autofocus" :type="type=='textarea'?null:type" - v-model="val" - @blur="emit" @focus="emit" @input="emit" + :value="val" @input="emit" + @blur="emit" @focus="emit" @keyup.enter="type!='textarea'&&enterSubmit&&submit()" > × @@ -73,6 +75,7 @@ export default { cols: {type: Number, default: null}, datalist: {type: Array, default: null}, disabled: {type: Boolean, default: false}, + autofocus: {type: Boolean, default: false}, enterSubmit: {type: Boolean, default: false}, error: {type: String, default: null}, help: {type: String, default: null}, @@ -190,7 +193,9 @@ export default { }, this.validationDelay) } }, - focus () { this.input.focus() }, + focus () { + setTimeout(()=>this.$refs.input && this.$refs.input.focus(), 100) + }, submit () { if (this.$parent._formValidator) { return this.$parent.validate() diff --git a/src/Tooltip.vue b/src/Tooltip.vue index 0eeaafb4..16e5c578 100644 --- a/src/Tooltip.vue +++ b/src/Tooltip.vue @@ -2,7 +2,7 @@ -
+
@@ -18,7 +18,7 @@ import PopoverMixin from './utils/popoverMixins.js' export default { mixins: [PopoverMixin], props: { - effect: {type: String, default: 'scale'}, + effect: {type: String, default: 'fadein'}, trigger: {type: String, default: 'hover'} } } @@ -31,11 +31,23 @@ export default { .tooltip.bottom { opacity: .9; } +.tooltip { + animation:fadein-in .4s ease-in; +} +.tooltip-inner { + background-color: #000; + color: #fff; + max-width: 200px; + padding: 15px 18px 14px; + text-align: center; + font-size: 13px; + -webkit-border-radius: 4px; +} .fadein-enter { - animation:fadein-in 0.3s ease-in; + animation:fadein-in 0.4s ease-in; } .fadein-leave-active { - animation:fadein-out 0.3s ease-out; + animation:fadein-out 0.4s ease-out; } @keyframes fadein-in { 0% { diff --git a/src/utils/popoverMixins.js b/src/utils/popoverMixins.js index ed78e4e8..8766b4a4 100644 --- a/src/utils/popoverMixins.js +++ b/src/utils/popoverMixins.js @@ -1,5 +1,10 @@ import $ from './NodeList.js' - +function windowPos(element) { + // const win = typeof window === 'undefined' ? {scrollY:0, scrollX:0} : window; + var top = element.getBoundingClientRect().top //+ (win.scrollY || win.pageYOffset); + var left = element.getBoundingClientRect().left //+ (win.scrollX || win.pageXOffset); + return {top, left} +} export default { props: { content: {type: String}, @@ -28,22 +33,28 @@ export default { this.$nextTick(() => { var popover = this.$refs.popover var trigger = this.$refs.trigger.children[0] + + if (!popover || !trigger) return; + if (popover.style.position!=='fixed') { popover.style.position = 'fixed'; document.body.appendChild(popover) } + + const p = windowPos(trigger) + switch (this.placement) { case 'top' : - this.left = trigger.offsetLeft - popover.offsetWidth / 2 + trigger.offsetWidth / 2 - this.top = trigger.offsetTop - popover.offsetHeight + this.left = p.left - popover.offsetWidth / 2 + trigger.offsetWidth / 2 + this.top = p.top - popover.offsetHeight break case 'left': - this.left = trigger.offsetLeft - popover.offsetWidth - this.top = trigger.offsetTop + trigger.offsetHeight / 2 - popover.offsetHeight / 2 + this.left = p.left - popover.offsetWidth + this.top = p.top + trigger.offsetHeight / 2 - popover.offsetHeight / 2 break case 'right': - this.left = trigger.offsetLeft + trigger.offsetWidth - this.top = trigger.offsetTop + trigger.offsetHeight / 2 - popover.offsetHeight / 2 + this.left = p.left + trigger.offsetWidth + this.top = p.top + trigger.offsetHeight / 2 - popover.offsetHeight / 2 break case 'bottom': - this.left = trigger.offsetLeft - popover.offsetWidth / 2 + trigger.offsetWidth / 2 - this.top = trigger.offsetTop + trigger.offsetHeight + this.left = p.left - popover.offsetWidth / 2 + trigger.offsetWidth / 2 + this.top = p.top + trigger.offsetHeight break default: console.warn('Wrong placement prop') @@ -71,6 +82,9 @@ export default { }) }, beforeDestroy () { + var popover = this.$refs.popover + if (popover) popover.remove(); + if (this._trigger) $(this._trigger).off() } }