├── README.md ├── directives ├── v-label.md └── vue-permission.md └── router └── use-multiple-files.md /README.md: -------------------------------------------------------------------------------- 1 | # VueJS Brasil Community's Snippets 2 | 3 | Create a `.md` file with the contents of your snippet. 4 | -------------------------------------------------------------------------------- /directives/v-label.md: -------------------------------------------------------------------------------- 1 | 2 | # v-label 3 | 4 | ```javascript 5 | // directives/label.js 6 | 7 | const label = { 8 | update(value) { 9 | let className = this.el.className; 10 | if (value) { 11 | className = `${className} label label-success`; 12 | } else { 13 | className = `${className} label label-danger`; 14 | } 15 | 16 | this.el.className = className; 17 | }, 18 | }; 19 | 20 | // 21 | Vue.directive('label', label); 22 | ``` 23 | 24 | ---------------------- 25 | 26 | ### Demo 27 | 28 | ```html 29 | {{ txt }} 30 | ``` 31 | 32 | ```javascript 33 | new Vue({ 34 | el: '...', // omitted 35 | data: { 36 | status: false, 37 | }; 38 | computed() { 39 | txt() { 40 | return this.status ? 'Active' : 'Inactive'; 41 | }, 42 | }, 43 | }); 44 | ``` 45 | -------------------------------------------------------------------------------- /router/use-multiple-files.md: -------------------------------------------------------------------------------- 1 | # Use multiple files in vue-router 2 | 3 | 4 | ```javascript 5 | // file -> /src/router.js 6 | 7 | import Vue from 'vue' 8 | import VueRouter from 'vue-router' 9 | import Dashboard from '/modules/dashboard/routes.js' 10 | import Users from '/modules/users/routes.js' 11 | import Clients from '/modules/clients/routes.js' 12 | 13 | const Router = new VueRouter() 14 | 15 | const routes = Object.assign({}, Dashboard, Users, Clients) 16 | Router.map(routes) 17 | 18 | // --- alternative --- 19 | const routes = [Dashboard, Users, Clients] 20 | Router.map(Object.assign({}, ...routes) 21 | 22 | export default Router 23 | ``` 24 | 25 | ```javascript 26 | // file -> /src/modules/clients/routes.js 27 | 28 | import Main from './Main.vue' 29 | import Detail from './Detail.vue' 30 | 31 | export default { 32 | '/clients': { 33 | component: Main, 34 | }, 35 | '/clients/:id': { 36 | component: Detail, 37 | }, 38 | } 39 | ``` 40 | ------------ 41 | 42 | Created by [vinicius73](https://github.com/vinicius73) in 2016-08-12 43 | -------------------------------------------------------------------------------- /directives/vue-permission.md: -------------------------------------------------------------------------------- 1 | # Vue Permission Directive 2 | ### FK v-permission 3 | 4 | 5 | Allows you to show or hide the element that contains this directive. 6 | 7 | Usage: 8 | 9 | `This can or cannot show to user...` 10 | 11 | Literal use: 12 | 13 | `This can or cannot show to user...` 14 | 15 | PS: here 'permission' its a string value, not object. 16 | 17 | Code: 18 | 19 | ``` javascript 20 | /* 21 | * Permissions Vue Directive 22 | * 23 | * You need import from your choice/service an permissions Array 24 | * and set in `this.permissions` on bind() method 25 | * Feel it free to modify/update this code =) 26 | */ 27 | import Vue from 'vue' 28 | const { util, FragmentFactory } = Vue 29 | const isArray = Array.isArray 30 | const isProduction = process.env.NODE_ENV !== 'production' 31 | 32 | /* Directive to show a v-cannot element */ 33 | Vue.directive('cannot', function () { 34 | return 35 | }) 36 | 37 | Vue.directive('permission', { 38 | 39 | bind() { 40 | this.permissions = [] /* IMPORT FROM YOUR CHOICE/SERVICE */ 41 | 42 | let el = this.el 43 | if(!el.__vue__) { 44 | //check v-cannot block 45 | var next = el.nextElementSibling 46 | if (next && util.getAttr(next, 'v-cannot') !== null) { 47 | util.remove(next) 48 | this.elseEl = next 49 | } 50 | //check permission block 51 | this.anchor = util.createAnchor('v-permission') 52 | util.replace(el, this.anchor) 53 | } else { 54 | isProduction && util.warn( 55 | 'v-permission="' + this.expression + '" cannot be ' + 56 | 'used on an instance root element.', 57 | this.vm 58 | ) 59 | this.invalid = true 60 | } 61 | }, 62 | 63 | hasPermission(value) { 64 | if(isArray(this.permissions)) { 65 | return this.permissions.indexOf(value) > -1 66 | } else { 67 | util.warn('this.permissions needs to be an Array') 68 | } 69 | }, 70 | 71 | update(value) { 72 | if(this.invalid) return 73 | if(this.hasPermission(value)) { 74 | if(! this.frag) { 75 | this.insert() 76 | this.updateRef(value) 77 | } 78 | } else { 79 | this.updateRef(value) 80 | this.remove() 81 | } 82 | }, 83 | 84 | insert() { 85 | if (this.elseFrag) { 86 | this.elseFrag.remove() 87 | this.elseFrag = null 88 | } 89 | if(! this.factory) { 90 | this.factory = new FragmentFactory(this.vm, this.el) 91 | } 92 | this.frag = this.factory.create(this._host, this._scope, this._frag) 93 | this.frag.before(this.anchor) 94 | }, 95 | 96 | remove() { 97 | if(this.frag){ 98 | this.frag.remove() 99 | this.frag = null 100 | } 101 | if (this.elseEl && !this.elseFrag) { 102 | if (!this.elseFactory) { 103 | this.elseFactory = new FragmentFactory( 104 | this.elseEl._context || this.vm, 105 | this.elseEl 106 | ) 107 | } 108 | this.elseFrag = this.elseFactory.create(this._host, this._scope, this._frag) 109 | this.elseFrag.before(this.anchor) 110 | } 111 | }, 112 | 113 | updateRef(value) { 114 | var ref = this.descriptor.ref 115 | if (!ref) return 116 | var hash = (this.vm || this._scope).$refs 117 | var refs = hash[ref] 118 | var key = this._frag.scope.$key 119 | if (!refs) return 120 | if (value) { 121 | if (Array.isArray(refs)) { 122 | refs.push(util.findVmFromFrag(this._frag)) 123 | } else { 124 | refs[key] = util.findVmFromFrag(this._frag) 125 | } 126 | } else { 127 | if (Array.isArray(refs)) { 128 | refs.$remove(util.findVmFromFrag(this._frag)) 129 | } else { 130 | refs[key] = null 131 | delete refs[key] 132 | } 133 | } 134 | }, 135 | 136 | unbind() { 137 | if (this.frag) { 138 | this.frag.destroy() 139 | } 140 | if (this.elseFrag) { 141 | this.elseFrag.destroy() 142 | } 143 | } 144 | }) 145 | ``` 146 | 147 | Created by [jjsquad](http://github.com/jjsquad) 148 | --------------------------------------------------------------------------------