pablohpsilva

import { flattenObj } from '#JS/flatten'

const dynamicClasses = (obj) => {
  if (obj && obj instanceof Object) {
    const flatten = flattenObj(obj)
    return Object.keys(flatten)
      .filter(el => flatten[el])
      .join(' ')
  }
  return ''

pablohpsilva

const flattenObj = (obj) => {
  if (!obj) {
    return {}
  }
  return Object.keys(obj).reduce((acc, curr) => {
    const objValue = obj[curr]
    const ret = (objValue && objValue instanceof Object)
      ? flattenObj(objValue)
      : { [curr]: objValue }
    return Object.assign(acc, ret)

pablohpsilva

<div
  className={{
    'toolbar': true,
    'toolbar-fixed': fixed
  }}>
  { children }
</div>

pablohpsilva

<template>
  <div
    class="{
      toolbar: true,
      toolbar-fixed: fixed,
    }">
  </div>
</template>

pablohpsilva

<template lang="html">
  <div class="md-autocomplete"
    @focus="onFocus"
    @blur="onBlur">
    <md-menu md-menu-trigger
      ref="menu">
      <span md-menu-trigger></span>
      <input class="md-input"
        ref="input"
        type="text"

pablohpsilva

<template>
  <input v-model="someVariable" />
  
  <!-- Is the same as: -->
  
  <input :value="someVariable" @input="onInputUpdateSomeVariable" />
  
</template>

pablohpsilva

import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import eslint from 'rollup-plugin-eslint';
import html from 'rollup-plugin-html';
import livereload from 'rollup-plugin-livereload';
import nodeResolve from 'rollup-plugin-node-resolve';
import path from 'path';
import serve from 'rollup-plugin-serve';
import stylus from 'rollup-plugin-stylus-css-modules';
import uglify from 'rollup-plugin-uglify';

pablohpsilva

<template lang="html">
  <div @click="clicked()">oi</div>
</template>

<script type="text/babel">
  import ProductItem from '../../shared-components/Item';

  export default {
    extends: { // The Magic is happening right here
      props: {

pablohpsilva

<template lang="html">
  <div class="ProductItem__wrapper"
    v-if="product">
    <div class="ProductItem__img"
      @click.stop="openProductPage()">
      <img :src="product.image" alt="">
    </div>
    <div class="ProductItem__infowrapper">
      <div :class="{
        'ProductItem__infocontainer': !openDetails,

pablohpsilva

Vue.filter('formatResult', function(value, functionArray){
    if (functionArray) {
        let rList = value,
            aux = [];
        for (let i = 0, total = functionArray.length; i < total; i++) {
            aux = [rList].concat((functionArray[i]).args);
            rList = (functionArray[i]).func.apply(null, aux);
        }
        return rList;
    }