vue-mixins

by paulpflug

paulpflug / vue-mixins

A collection of mixins in vue

210 Stars 17 Forks Last release: Not found 85 Commits 29 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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
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()}

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)

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)

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: "
", 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 // 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: "
", 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 // 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

js
// adds a method: "processTransition" and a computed value "cTransition"
// usage:
template: "
", 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.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.