vue-mixins

A collection of mixins in vue. Heavily used in vue-comps.

Policy

all sorts of mixins can be submitted. There will be no removes because of deprecation. If the API of a mixin changes the name has to change, for example onResize -> onResize2

Install

npm install --save-dev vue-mixins

or include bundle.js

Usage

## whithin your module
components:
  mixins:[
    require("vue-mixins/onClick")
  ]
# if you have used the bundle.js
components:
  mixins:[
    window.vueMixins.onClick
  ]

List of mixins

Name | src| description ---: | ---| ------- getViewportSize | src | adds a method getViewportSize which returns an object containing the width and height of the viewport getDocumentHeight | src | adds a method getDocumentHeight which returns the height of the document onceDocument | src | adds a eventListener to the document which removes itself after first successful call| |onClick | src | adds a method click which will call the function onClick if set onClickStack | src | adds two methods: click and addToClickStack onClickStore | src | adds two methods: click and onClick (see below) onDocument | src | like onceDocument but doesn't removes itself onResize | src | deprecated onWindowResize | src | fires on resize of window (throttled and bundled) onElementResize | src | fires on resize of window or element, but only if the dimensions of the element changed onWindowScroll | src | fires on scroll on window (throttled and bundled) setCss | src | set Css of another element dynamicCss | src | dynamically manipulate css stylesheet getVue | src | deprecated, use vue instead vue | src | adds a computed property Vue with the current instance of Vue isOpened | src | adds everything for opened state management (two-way) isOpened2 | src | same as isOpened but for vue 2.0 (one-way) parentListener | src | hooks a function upon parent click parentListener2 | src | same as parentListener but for vue 2.0 fragToString | src | converts a documentFragment to String class | src | used to create a properly merged vue class object/array from a given prop and another vue class object/array style | src | used to create a properly merged vue style object/array from a given prop and another vue style object/array transition | src | used to manage user provided transition in a reusable component transition2 | src | same as transition but for vue 2.0 onMouseMove | src | fires on move of the mouse (throttled and bundled)

Detailed usage

getViewportSize

// adds a method:
// getViewportSize()
//
// usage:
vs = this.getViewportSize()
vs.width
vs.height

getDocumentHeight

// adds a method:
// getDocumentHeight()
//
// usage:
height = this.getDocumentHeight()

onceDocument

// adds a method:
// onceDocument(event, cb, useCapture)
//
// usage:
dispose = this.onceDocument('click',function(e){
  doSomething()
  // return true will remove the listener
  // return false will not remove the listener
  },false)
dispose() // will remove the listener

onClick

// adds a method:
// click(event) which will call this.onClick(e) if available
//
// usage:
this.onClick = function(e) {doSomething()}

<!-- in template -->
<div @click="click"></div>

onClickStack

// adds two methods:
// - click(event) will call the last function in this.onClickStack if available
// - addToClickStack(fn) will add a function to this.onClickStack and return a function to dispose it
//
// usage:
var dispose = null
var cb = function(e) {
  doSomething()
  dispose() // to remove from stack
}
dispose = this.addToClickStack(cb)

<!-- in template -->
<div @click="click"></div>

onClickStore

// adds two methods:
// - click(event) will call all functions in this.onClickStore
// - onClick(fn) will add a function to this.onClickStore and return a function to dispose it
//
// usage:
var dispose = null
var cb = function(e) {
  doSomething()
  dispose() // to remove from store
}
dispose = this.onClickStore(cb)

<!-- in template -->
<div @click="click"></div>

onDocument

like onceDocument, but doesn't remove itself on first successful invokation.

onWindowResize

// adds a method: onWindowResize(cb) which will return a function to dispose it
//
// usage:
dispose = this.onWindowResize(function(){/*doSomethingOnWindowResize*/})
// remove your cb
dispose()
// all events will be automatically disposed on `beforeDestroy`

onElementResize

// adds a method: onElementResize(el, cb) which will return a function to dispose it
//
// usage:
dispose = this.onElementResize(el, function(){/*doSomethingOnElementResize*/})
// remove your cb
dispose()
// all events will be automatically disposed on `beforeDestroy`

onWindowScroll

// adds a method: onWindowScroll(cb) which will return a function to dispose it
//
// usage:
dispose = this.onWindowScroll(function(){/*doSomethingOnWindowScroll*/})
// remove your cb
dispose()
// all events will be automatically disposed on `beforeDestroy`

setCss

// adds a method:
// setCss(element,cssProperty, cssValue)
//
// usage:
this.setCss(document.body,"overflow","hidden")

// remove overflow from style attribute
this.setCss(document.body,"overflow")
// or
this.setCss(document.body,"overflow", "")

dynamicCss

// used to create a stylesheet and set rules in it.
// adds a method:
// setCssRules(newRules)
//
// usage:
this.setCssRules({body: {overflow: "hidden"}})
// to remove a rule:
this.setCssRules({body: {overflow: null}})
// nesting:
this.setCssRules({body: {"& div": {width: "10px"},overflow:"hidden"}})
// is short for: (& will be replaced by the parent selector)
// deeper nesting is allowed
this.setCssRules({body: {overflow:"hidden"},"body div": {width: "10px"}})

vue

// adds a computed property:
// Vue
//
// usage:
Vue = this.Vue

isOpened

// adds a boolean prop "isOpened" which will call "this.toggle()" on change
// the state is saved on "opened"
//
// adds two methods:
// setOpened(), setClosed() which will set "this.isOpened" without triggering
// the toggle
//  and emit a event "toggled(opened)"
//
// usage:
methods:
  toggle: function(){
    if (this.opened) {
      this.close()
    } else {
      this.open()
    }
  }
  open: function() {
    this.setOpened()
  }
  close: function() {
    this.setClosed()
  }  

parentListener

// adds two props: "ignoreParent" and "parent", which
// defaults to "this.$el.parentElement"
//
// usage:
methods:
  onParentClick: function() {
    // will be called when "ignoreParent" is false on click on parent
  }

fragToString

// adds a method: "fragToString"
// usage:
str = this.fragToString(someFrag)
// str contains outerHTML of someFrag

class

// adds a computed property: "computedClass"
// which merges a "mergeClass" data object/array and a "class" prop.
// usage:
template: "<div :class=computedClass></div>",
props: {
  class: {
    default: function() {
      return ["someClass"]
    }
  }
},
data: function() {
  return {
    mergeClass: ["anotherClass"]
  }
}
// computedClass will be ["anotherClass","someClass"] when no prop is given
// if the component is used like this <comp :class="['yetAnotherClass']"></comp>
// computedClass will be ["anotherClass","yetAnotherClass"]
// works also with object notation and a mixture of both

style

// adds a computed property: "computedStyle"
// which merges a "mergeStyle" data object and a "style" prop.
// usage:
template: "<div :style=computedStyle></div>",
props: {
  style: {
    default: function() {
      return {color:"red"}
    }
  }
},
data: function() {
  return {
    mergeStyle: {color:"blue"}
  }
}
// computedStyle will be [{color:"blue"},{color:"red"}] when no prop is given
// if the component is used like this <comp :style="{color:white}"></comp>
// computedStyle will be [{color:"blue"},{color:"white"}]
// works also with array notation and a mixture of both

transition

used to manage user provided transition in a reusable component

// adds a method: "processTransition" and a computed value "cTransition"
// usage:
template: "<div :transition=cTransition></div>",
props: {
  transition: {
    type: String,
    default: "someDefaultTransition"
 }
},
ready: function() {
  this.$on("before-enter",function(){
    // will be called after element is inserted in dom but before transition starts
    // regardless of a optional provided transition
  })
}

processTransition(name,parent = this.$parent) resolves name to the actual transition on parent vm or global Vue. Adds before-enter, after-enter, before-leave, after-leave, enterCancelled and leaveCancelled emit hooks on the instance and inserts the modified transition into this.$options.transitions[name]
cTransition lazily calls processTransition on the first transition and every time transition changes.

You can disable transition by setting this.disableTransition = true.

onMouseMove

// adds a method: onMouseMove(cb) which will return a function to dispose it
//
// usage:
dispose = this.onMouseMove(function(){/*doSomethingOnMouseMove*/})
// remove your cb
dispose()
// all events will be automatically disposed on `beforeDestroy`

Develop

Clone rep

npm install

Available scripts:

npm run build # compiles coffee-script in src/
npm run test # runs a single-run karma in chrome and firefox
npm run watch # runs karma in chrome (uses src/*.coffee files direclty, no need for build)

# to run only single tests:
karma start --browsers Chrome --auto-watch --reporters spec --files ['test/onClick.coffee']

License

Copyright (c) 2015 Paul Pflugradt Licensed under the MIT license.