A collection of mixins in vue
Clone or download
Latest commit e94a130 Nov 4, 2016
Permalink
Failed to load latest commit information.
build updated gitignore Sep 23, 2016
src fixes #3 Nov 4, 2016
test added onMouseMove + bugfixes Sep 23, 2016
.gitignore updated gitignore Sep 23, 2016
.npmignore added .npmignore Apr 6, 2016
README.md added transition2 Oct 11, 2016
karma.conf.coffee added onMouseMove + bugfixes Sep 23, 2016
package.json 0.3.6 Nov 4, 2016
webpack.config.coffee maintenance Sep 23, 2016

README.md

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.