├── docs
    ├── .nojekyll
    ├── assets
    │   └── rg-main.png
    ├── index.html
    ├── README.md
    ├── ru
    │   └── README.md
    ├── ua
    │   └── README.md
    └── fr
    │   └── README.md
├── .eslintrc
├── CONTRIBUTING.md
├── .travis.yml
├── .npmignore
├── PULL_REQUEST_TEMPLATE.md
├── test
    ├── GoodWithoutOrigin.vue
    ├── GoodOrigin.vue
    ├── classNameOrigin.vue
    ├── ClassNameWithoutOrigin.vue
    └── AllRealCases.spec.js
├── .babelrc
├── assets
    └── vue-mods-names.gif
├── .editorconfig
├── .gitignore
├── .github
    └── ISSUE_TEMPLATE
    │   ├── Feature_request.md
    │   └── Bug_report.md
├── karma.conf.js
├── LICENSE
├── dist
    ├── vue-mods-names.js
    └── vue-mods-names.js.map
├── webpack.config.js
├── src
    └── VueModsNames.js
├── package.json
├── README.md
└── CODE_OF_CONDUCT.md


/docs/.nojekyll:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "standard"
3 | }
4 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | # All contibutions are welcome
2 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |     - "node"
4 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | src/
2 | .babelrc
3 | .editorconfig
4 | .eslintrc
5 | 
6 | *.js
7 | 


--------------------------------------------------------------------------------
/PULL_REQUEST_TEMPLATE.md:
--------------------------------------------------------------------------------
1 | - [X] Check the rules
2 | - [ ] All tests are passed
3 | 


--------------------------------------------------------------------------------
/test/GoodWithoutOrigin.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div v-mods-names:good></div>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/test/GoodOrigin.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div v-mods-names:good.no-origin></div>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/docs/assets/rg-main.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RGRU/vue-mods-names/HEAD/docs/assets/rg-main.png


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     ["env", { "modules": false }],
4 |     "stage-3"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/assets/vue-mods-names.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/RGRU/vue-mods-names/HEAD/assets/vue-mods-names.gif


--------------------------------------------------------------------------------
/test/classNameOrigin.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="good" v-mods-names.no-origin></div>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/test/ClassNameWithoutOrigin.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="good" v-mods-names.no-origin></div>
3 | </template>
4 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | dist/
 4 | coverage/
 5 | npm-debug.log
 6 | yarn-error.log
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | *.suo
11 | *.ntvs*
12 | *.njsproj
13 | *.sln
14 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/Feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | 
 5 | ---
 6 | 
 7 | **Is your feature request related to a problem? Please describe.**
 8 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
 9 | 
10 | **Describe the solution you'd like**
11 | A clear and concise description of what you want to happen.
12 | 
13 | **Describe alternatives you've considered**
14 | A clear and concise description of any alternative solutions or features you've considered.
15 | 
16 | **Additional context**
17 | Add any other context or screenshots about the feature request here.
18 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // This is a karma config file. For more details see
 2 | //   http://karma-runner.github.io/0.13/config/configuration-file.html
 3 | // we are also using it with karma-webpack
 4 | //   https://github.com/webpack/karma-webpack
 5 | 
 6 | var webpackConfig = require('./webpack.config.js')
 7 | 
 8 | module.exports = function (config) {
 9 |   config.set({
10 |     browsers: ['ChromeHeadless'],
11 |     frameworks: ['mocha', 'chai'],
12 |     reporters: ['spec', 'coverage'],
13 |     files: [
14 |       {pattern: 'test/*.spec.js', watched: false}
15 |     ],
16 |     preprocessors: {
17 |       './test/AllRealCases.spec.js': ['webpack']
18 |     },
19 |     webpack: webpackConfig,
20 |     webpackMiddleware: {
21 |       noInfo: true
22 |     },
23 |     coverageReporter: {
24 |       dir: './coverage',
25 |       reporters: [
26 |         { type: 'lcov', subdir: '.' },
27 |         { type: 'text-summary' }
28 |       ]
29 |     }
30 |   })
31 | }
32 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/Bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | 
 5 | ---
 6 | 
 7 | **Describe the bug**
 8 | A clear and concise description of what the bug is.
 9 | 
10 | **To Reproduce**
11 | Steps to reproduce the behavior:
12 | 1. Go to '...'
13 | 2. Click on '....'
14 | 3. Scroll down to '....'
15 | 4. See error
16 | 
17 | **Expected behavior**
18 | A clear and concise description of what you expected to happen.
19 | 
20 | **Screenshots**
21 | If applicable, add screenshots to help explain your problem.
22 | 
23 | **Desktop (please complete the following information):**
24 |  - OS: [e.g. iOS]
25 |  - Browser [e.g. chrome, safari]
26 |  - Version [e.g. 22]
27 | 
28 | **Smartphone (please complete the following information):**
29 |  - Device: [e.g. iPhone6]
30 |  - OS: [e.g. iOS8.1]
31 |  - Browser [e.g. stock browser, safari]
32 |  - Version [e.g. 22]
33 | 
34 | **Additional context**
35 | Add any other context about the problem here.
36 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 RG.RU
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/dist/vue-mods-names.js:
--------------------------------------------------------------------------------
1 | !function(s,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("vue-mods-names",[],t):"object"==typeof exports?exports["vue-mods-names"]=t():s["vue-mods-names"]=t()}(this,function(){return function(s){function t(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return s[n].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var e={};return t.m=s,t.c=e,t.d=function(s,e,n){t.o(s,e)||Object.defineProperty(s,e,{configurable:!1,enumerable:!0,get:n})},t.n=function(s){var e=s&&s.__esModule?function(){return s.default}:function(){return s};return t.d(e,"a",e),e},t.o=function(s,t){return Object.prototype.hasOwnProperty.call(s,t)},t.p="/dist/",t(t.s=0)}([function(s,t,e){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={install:function(s){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"_";s.directive("mods-names",{inserted:function(s,t,e){var n=e.context,r=e.elm;n.$baseClass=t.arg||r.className,n.$addOriginClass=t.modifiers["no-origin"],r.setAttribute("class",r.classList+" "+n.$modsNames)},update:function(s,t,e,n){var r=e.data,i=e.elm,o=e.context;r.class!==n.data.class&&(r.class?i.classList=o.$modsNames+" "+r.class:i.classList=o.$modsNames)}}),s.mixin({data:function(){return{$baseClass:null,$addOriginClass:!0}},props:{mods:{type:[String,Array]}},computed:{$modsNames:function(){var s=this,e=function(e){return s.$baseClass+t+e};if(Array.isArray(this.mods)){var n=!!this.mods&&this.mods.map(function(s){return e(s)}),r=n.slice(0);return this.$addOriginClass||r.unshift(this.$baseClass),r.join(" ")}return this.mods?this.$addOriginClass?e(this.mods):this.$baseClass+" "+e(this.mods):this.$baseClass}}})}}}])});
2 | //# sourceMappingURL=vue-mods-names.js.map


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | var path = require('path')
 2 | var webpack = require('webpack')
 3 | 
 4 | module.exports = {
 5 |   entry: './src/VueModsNames.js',
 6 |   output: {
 7 |     path: path.resolve(__dirname, './dist'),
 8 |     publicPath: '/dist/',
 9 |     filename: 'vue-mods-names.js',
10 |     libraryTarget: 'umd',
11 |     library: 'vue-mods-names',
12 |     umdNamedDefine: true
13 |   },
14 |   module: {
15 |     rules: [
16 |       {
17 |         test: /\.js$/,
18 |         enforce: 'pre',
19 |         // exclude: 'test',
20 |         use: [
21 |           'eslint-loader'
22 |         ]
23 |       },
24 |       {
25 |         test: /\.vue$/,
26 |         loader: 'vue-loader',
27 |         options: {
28 |           loaders: {
29 |           }
30 |           // other vue-loader options go here
31 |         }
32 |       },
33 |       {
34 |         test: /\.js$/,
35 |         loader: 'babel-loader',
36 |         exclude: /node_modules/
37 |       }
38 |     ]
39 |   },
40 |   devServer: {
41 |     historyApiFallback: true,
42 |     noInfo: true,
43 |     overlay: true
44 |   },
45 |   performance: {
46 |     hints: false
47 |   },
48 |   devtool: '#eval-source-map'
49 | }
50 | 
51 | if (process.env.NODE_ENV === 'production') {
52 |   module.exports.devtool = '#source-map'
53 |   // http://vue-loader.vuejs.org/en/workflow/production.html
54 |   module.exports.plugins = (module.exports.plugins || []).concat([
55 |     new webpack.DefinePlugin({
56 |       'process.env': {
57 |         NODE_ENV: '"production"'
58 |       }
59 |     }),
60 |     new webpack.optimize.UglifyJsPlugin({
61 |       sourceMap: true,
62 |       compress: {
63 |         warnings: false
64 |       }
65 |     }),
66 |     new webpack.LoaderOptionsPlugin({
67 |       minimize: true
68 |     })
69 |   ])
70 | }
71 | 


--------------------------------------------------------------------------------
/src/VueModsNames.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   install (Vue, prefix = '_') {
 3 |     Vue.directive('mods-names', {
 4 |       inserted (el, binding, { context, elm }) {
 5 |         context.$baseClass = binding.arg || elm.className
 6 |         context.$addOriginClass = binding.modifiers['no-origin']
 7 |         elm.setAttribute('class', elm.classList + ' ' + context.$modsNames)
 8 |       },
 9 |       update (el, binding, { data, elm, context }, oldVnode) {
10 |         if (data.class !== oldVnode.data.class) {
11 |           if (data.class) {
12 |             elm.classList = context.$modsNames + ' ' + data.class
13 |           } else {
14 |             elm.classList = context.$modsNames
15 |           }
16 |         }
17 |       }
18 |     })
19 |     Vue.mixin({
20 |       data () {
21 |         return { $baseClass: null, $addOriginClass: true }
22 |       },
23 |       props: {
24 |         mods: {
25 |           type: [ String, Array ]
26 |         }
27 |       },
28 |       computed: {
29 |         $modsNames () {
30 |           let generateAdditionClass = mods => this.$baseClass + prefix + mods
31 | 
32 |           if (Array.isArray(this.mods)) {
33 |             let classArr = !!this.mods && this.mods.map(i => generateAdditionClass(i))
34 |             // Don't touch original array of classes
35 |             let classArrWithOrigin = classArr.slice(0)
36 |             // If comopnent should render with base class, then add base class to begin of array
37 |             if (!this.$addOriginClass) classArrWithOrigin.unshift(this.$baseClass)
38 |             return classArrWithOrigin.join(' ')
39 |           }
40 | 
41 |           if (!this.mods) return this.$baseClass
42 | 
43 |           return !this.$addOriginClass
44 |             ? this.$baseClass + ' ' + generateAdditionClass(this.mods) : generateAdditionClass(this.mods)
45 |         }
46 |       }
47 |     })
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-mods-names",
 3 |   "description": "Simple adding mods to all components class names in your vue app",
 4 |   "version": "0.0.12",
 5 |   "author": "RGRU team | KamilOcean <dev@rg.ru> (https://github.com/RGRU/)",
 6 |   "license": "MIT",
 7 |   "main": "dist/vue-mods-names.js",
 8 |   "keywords": [
 9 |     "mods",
10 |     "classNames",
11 |     "Vue",
12 |     "Vue-components",
13 |     "BEM"
14 |   ],
15 |   "repository": {
16 |     "type": "git",
17 |     "url": "git+https://github.com/RGRU/vue-mods-names"
18 |   },
19 |   "scripts": {
20 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
21 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
22 |     "test": "cross-env BABEL_ENV=test karma start karma.conf.js --single-run"
23 |   },
24 |   "dependencies": {},
25 |   "browserslist": [
26 |     "> 1%",
27 |     "last 2 versions",
28 |     "not ie <= 8"
29 |   ],
30 |   "devDependencies": {
31 |     "babel-core": "^6.26.0",
32 |     "babel-loader": "^7.1.2",
33 |     "babel-preset-env": "^1.6.0",
34 |     "babel-preset-stage-3": "^6.24.1",
35 |     "chai": "^4.1.2",
36 |     "cross-env": "^5.0.5",
37 |     "css-loader": "^0.28.7",
38 |     "eslint": "^4.11.0",
39 |     "eslint-loader": "^1.9.0",
40 |     "eslint-plugin-standard": "^3.0.1",
41 |     "friendly-errors-webpack-plugin": "^1.6.1",
42 |     "karma": "^1.7.1",
43 |     "karma-chai": "^0.1.0",
44 |     "karma-chrome-launcher": "^2.2.0",
45 |     "karma-coverage": "^1.1.1",
46 |     "karma-jasmine": "^1.1.0",
47 |     "karma-mocha": "^1.3.0",
48 |     "karma-spec-reporter": "0.0.31",
49 |     "karma-webpack": "^2.0.6",
50 |     "mocha": "^4.0.1",
51 |     "source-map": "^0.6.1",
52 |     "standard": "^10.0.3",
53 |     "vue": "^2.5.8",
54 |     "vue-loader": "^13.5.0",
55 |     "vue-template-compiler": "^2.5.8",
56 |     "webpack": "^3.6.0",
57 |     "webpack-dev-server": "^2.9.1"
58 |   }
59 | }
60 | 


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <title>vue-mods-names - Simple adding mods to all components class names in your vue app</title>
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 7 |   <meta name="description" content="Simple adding mods to all components class names in your vue app">
 8 |   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 9 |   <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">
10 |   <!-- Import theme -->
11 | <link rel="stylesheet" href="//unpkg.com/vuep/dist/vuep.css">
12 | 
13 | <!-- depend vue -->
14 | <script src="//unpkg.com/vue"></script>
15 | <script src="//unpkg.com/vuep"></script>
16 | <script src="https://npmcdn.com/vue-router@2.4.0/dist/vue-router.js"></script>
17 | <script src="//unpkg.com/docsify-edit-on-github@1.0.1/index.js"></script>
18 | </head>
19 | <body>
20 |   <nav>
21 |     <a href="#/">EN</a>
22 |     <a href="#/ru/">RU</a>
23 |     <a href="#/ua/">UA</a>
24 |     <a href="#/fr/">FR</a>
25 |   </nav>
26 |   <div id="app">Loading...</div>
27 |   <script>
28 |     window.$docsify = {
29 |       name: 'vue-mods-names',
30 |       repo: 'https://github.com/RGRU/vue-mods-names',
31 |       ga: 'UA-54500419-4',
32 |       plugins: [
33 |         EditOnGithubPlugin.create('https://github.com/RGRU/vue-mods-names/blob/master/docs/')
34 |       ]
35 |     }
36 |   </script>
37 |   <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
38 |   <script src="//unpkg.com/docsify/lib/plugins/ga.min.js"></script>
39 |   <style>
40 |     .sidebar {
41 |       padding-top: 10px;
42 |     }
43 |     .sidebar:before {
44 |       content: '';
45 |       width: 220px;
46 |       height: 76px;
47 |       margin-top: 20px;
48 |       margin-right: auto;
49 |       margin-left: auto;
50 |       margin-bottom: 30px;
51 |       display: block;
52 |       background: url("/vue-mods-names/assets/rg-main.png") no-repeat center center;
53 |       background-size: contain;
54 |     }
55 |   </style>
56 | </body>
57 | </html>
58 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vue-mods-names
 2 | > Simple adding class names mods to all components in your vue app
 3 | 
 4 | ![example](./assets/vue-mods-names.gif)
 5 | 
 6 | [![npm version](https://badge.fury.io/js/vue-mods-names.svg)](https://badge.fury.io/js/vue-mods-names)
 7 | [![Build Status](https://travis-ci.org/RGRU/vue-mods-names.svg?branch=master)](https://travis-ci.org/RGRU/vue-mods-names)
 8 | [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 9 | 
10 | Docs with examples and playgrounds:<br>
11 | [English](https://rgru.github.io/vue-mods-names/#/)<br>
12 | [Русский](https://rgru.github.io/vue-mods-names/#/ru/)<br>
13 | [Українська](https://rgru.github.io/vue-mods-names/#/ua/)<br>
14 | [français](https://rgru.github.io/vue-mods-names/#/fr/)<br>
15 | 
16 | ## Install
17 | 
18 | So typically
19 | 
20 | ```js
21 | npm i vue-mods-names -D
22 | ```
23 | 
24 | ## Usage
25 | ```js
26 | import VueModsNames from 'vue-mods-names'
27 | 
28 | Vue.use(VueModsNames)
29 | ```
30 | If you want to change prefix (by default is equal: `_`), then just pass it in plugin options, like this:
31 | ```js
32 | import VueModsNames from 'vue-mods-names'
33 | 
34 | Vue.use(VueModsNames, { prefix: '-' })
35 | ```
36 | After that any component in your app is ready to use mods. It will work if you declare name of base class in directive `v-mods-names:`
37 | 
38 | Declare behavior by adding special directive `v-mods-names` in your template. `good` - is name of base class, that will join with other mods.
39 | 
40 | `Good.vue`
41 | ```html
42 | <!-- Template of 'Good' component, that will be include in other places -->
43 | <div v-mods-names:good>It's cool</div>
44 | ```
45 | 
46 | Now we may use component with different mods:
47 | 
48 | `main page`
49 | ```html
50 | <Good mods="main" />
51 | ```
52 | 
53 | In the issue you have component on main page, that has classes after render:
54 | 
55 | ```html
56 | <div class="good good_main">It's cool</div>
57 | ```
58 | 
59 | > All style modifications of component typically describe in component file itself (one file component).
60 | 
61 | ```css
62 | .good {}
63 | 
64 | .good_main {}
65 | 
66 | .good_big {}
67 | ```
68 | 
69 | You can pass Array of mods:
70 | 
71 | ```html
72 | <Good :mods="['main', 'big']" />
73 | ```
74 | 
75 | After render we get this:
76 | 
77 | ```html
78 | <div class="good good_main good_big">It's cool</div>
79 | ```
80 | 
81 | [KamilOcean](https://twitter.com/kamil_ocean)
82 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Covenant Code of Conduct
 2 | 
 3 | ## Our Pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
 6 | 
 7 | ## Our Standards
 8 | 
 9 | Examples of behavior that contributes to creating a positive environment include:
10 | 
11 | * Using welcoming and inclusive language
12 | * Being respectful of differing viewpoints and experiences
13 | * Gracefully accepting constructive criticism
14 | * Focusing on what is best for the community
15 | * Showing empathy towards other community members
16 | 
17 | Examples of unacceptable behavior by participants include:
18 | 
19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances
20 | * Trolling, insulting/derogatory comments, and personal or political attacks
21 | * Public or private harassment
22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission
23 | * Other conduct which could reasonably be considered inappropriate in a professional setting
24 | 
25 | ## Our Responsibilities
26 | 
27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
28 | 
29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
30 | 
31 | ## Scope
32 | 
33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
34 | 
35 | ## Enforcement
36 | 
37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at dev@rg.ru. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
38 | 
39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
40 | 
41 | ## Attribution
42 | 
43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
44 | 
45 | [homepage]: http://contributor-covenant.org
46 | [version]: http://contributor-covenant.org/version/1/4/
47 | 


--------------------------------------------------------------------------------
/test/AllRealCases.spec.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueModsNames from '../src/VueModsNames'
 3 | 
 4 | import GoodOrigin from './GoodOrigin.vue'
 5 | import GoodWithoutOrigin from './GoodWithoutOrigin.vue'
 6 | import classNameOrigin from './classNameOrigin.vue'
 7 | // import ClassNameWithoutOrigin from './ClassNameWithoutOrigin.vue'
 8 | 
 9 | let baseClass = 'good'
10 | 
11 | Vue.use(VueModsNames)
12 | 
13 | let createVM = (ctx, props) => {
14 |   let Constructor = Vue.extend(ctx)
15 |   return new Constructor({ propsData: { mods: props } }).$mount()
16 | }
17 | 
18 | describe('Main test', () => {
19 |   it('Has one mod + no-origin + baseClass(arg)', () => {
20 |     let vm = createVM(GoodOrigin, 'first-mod')
21 |     expect(vm.$el.classList.contains(baseClass + '_first-mod')).to.be.true
22 |     expect(vm.$el.classList.contains(baseClass)).not.to.be.true
23 |   })
24 | 
25 |   it('Has array of mod + no-origin + baseClass(arg)', () => {
26 |     let vm = createVM(GoodOrigin, ['first-mod', 'second-mod'])
27 |     expect(vm.$el.classList.contains(baseClass + '_first-mod')).to.be.true
28 |     expect(vm.$el.classList.contains(baseClass + '_second-mod')).to.be.true
29 |     expect(vm.$el.classList.contains(baseClass)).not.to.be.true
30 |   })
31 | 
32 |   it('Has one mod + no-origin - baseClass(arg)', () => {
33 |     let vm = createVM(classNameOrigin, 'first-mod')
34 |     expect(vm.$el.classList.contains(baseClass + '_first-mod')).to.be.true
35 |     expect(vm.$el.classList.contains(baseClass)).to.be.true
36 |   })
37 | 
38 |   it('Has array of mod + no-origin - baseClass(arg)', () => {
39 |     let vm = createVM(classNameOrigin, ['first-mod', 'second-mod', 'third'])
40 |     expect(vm.$el.classList.contains(baseClass + '_first-mod')).to.be.true
41 |     expect(vm.$el.classList.contains(baseClass + '_second-mod')).to.be.true
42 |     expect(vm.$el.classList.contains(baseClass + '_third')).to.be.true
43 |     expect(vm.$el.classList.contains(baseClass)).to.be.true
44 |   })
45 | 
46 |   it('Has no mod + no-origin + baseClass(arg)', () => {
47 |     let vm = createVM(GoodOrigin)
48 |     expect(vm.$el.classList.contains(baseClass + '_first-mod')).not.to.be.true
49 |     expect(vm.$el.classList.contains(baseClass)).to.be.true
50 |   })
51 | 
52 |   it('Has no mod + no-origin - baseClass(arg)', () => {
53 |     let vm = createVM(classNameOrigin)
54 |     expect(vm.$el.classList.contains(baseClass + '_first-mod')).not.to.be.true
55 |     expect(vm.$el.classList.contains(baseClass)).to.be.true
56 |   })
57 | 
58 |   it('Has one mod - no-origin + baseClass(arg)', () => {
59 |     let vm = createVM(GoodWithoutOrigin, 'first-mod')
60 |     expect(vm.$el.classList.contains(baseClass + '_first-mod')).to.be.true
61 |     expect(vm.$el.classList.contains(baseClass)).to.be.true
62 |   })
63 | 
64 |   it('Has array of mod - no-origin + baseClass(arg)', () => {
65 |     let vm = createVM(GoodWithoutOrigin, ['first-mod', 'second-mod'])
66 |     expect(vm.$el.classList.contains(baseClass + '_first-mod')).to.be.true
67 |     expect(vm.$el.classList.contains(baseClass + '_second-mod')).to.be.true
68 |     expect(vm.$el.classList.contains(baseClass)).to.be.true
69 |   })
70 | 
71 |   it('Has one mod - no-origin - baseClass(arg)', () => {
72 |     let vm = createVM(GoodWithoutOrigin, 'first-mod')
73 |     expect(vm.$el.classList.contains(baseClass + '_first-mod')).to.be.true
74 |     expect(vm.$el.classList.contains(baseClass)).to.be.true
75 |   })
76 | 
77 |   it('Has array of mod - no-origin - baseClass(arg)', () => {
78 |     let vm = createVM(GoodWithoutOrigin, ['first-mod', 'second-mod'])
79 |     expect(vm.$el.classList.contains(baseClass + '_first-mod')).to.be.true
80 |     expect(vm.$el.classList.contains(baseClass + '_second-mod')).to.be.true
81 |     expect(vm.$el.classList.contains(baseClass)).to.be.true
82 |   })
83 | 
84 |   it('Has no mods - no-origin - baseClass(arg)', () => {
85 |     let vm = createVM(GoodWithoutOrigin)
86 |     expect(vm.$el.classList.contains(baseClass)).to.be.true
87 |   })
88 | })
89 | 


--------------------------------------------------------------------------------
/dist/vue-mods-names.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///webpack/universalModuleDefinition","webpack:///vue-mods-names.js","webpack:///webpack/bootstrap 1e456c48dcd66a9af5a9","webpack:///./src/VueModsNames.js"],"names":["root","factory","exports","module","define","amd","this","modules","__webpack_require__","moduleId","installedModules","i","l","call","m","c","d","name","getter","o","Object","defineProperty","configurable","enumerable","get","n","__esModule","object","property","prototype","hasOwnProperty","p","s","__webpack_exports__","value","install","Vue","prefix","arguments","length","undefined","directive","inserted","el","binding","_ref","context","elm","$baseClass","arg","className","$addOriginClass","modifiers","setAttribute","classList","$modsNames","update","_ref2","oldVnode","data","class","mixin","props","mods","type","String","Array","computed","_this","generateAdditionClass","isArray","classArr","map","classArrWithOrigin","slice","unshift","join"],"mappings":"CAAA,SAAAA,EAAAC,GACA,gBAAAC,UAAA,gBAAAC,QACAA,OAAAD,QAAAD,IACA,kBAAAG,gBAAAC,IACAD,OAAA,oBAAAH,GACA,gBAAAC,SACAA,QAAA,kBAAAD,IAEAD,EAAA,kBAAAC,KACCK,KAAA,WACD,MCAgB,UAAUC,GCN1B,QAAAC,GAAAC,GAGA,GAAAC,EAAAD,GACA,MAAAC,GAAAD,GAAAP,OAGA,IAAAC,GAAAO,EAAAD,IACAE,EAAAF,EACAG,GAAA,EACAV,WAUA,OANAK,GAAAE,GAAAI,KAAAV,EAAAD,QAAAC,IAAAD,QAAAM,GAGAL,EAAAS,GAAA,EAGAT,EAAAD,QAvBA,GAAAQ,KA4DA,OAhCAF,GAAAM,EAAAP,EAGAC,EAAAO,EAAAL,EAGAF,EAAAQ,EAAA,SAAAd,EAAAe,EAAAC,GACAV,EAAAW,EAAAjB,EAAAe,IACAG,OAAAC,eAAAnB,EAAAe,GACAK,cAAA,EACAC,YAAA,EACAC,IAAAN,KAMAV,EAAAiB,EAAA,SAAAtB,GACA,GAAAe,GAAAf,KAAAuB,WACA,WAA2B,MAAAvB,GAAA,SAC3B,WAAiC,MAAAA,GAEjC,OADAK,GAAAQ,EAAAE,EAAA,IAAAA,GACAA,GAIAV,EAAAW,EAAA,SAAAQ,EAAAC,GAAsD,MAAAR,QAAAS,UAAAC,eAAAjB,KAAAc,EAAAC,IAGtDpB,EAAAuB,EAAA,SAGAvB,IAAAwB,EAAA,KDgBM,SAAU7B,EAAQ8B,EAAqBzB,GAE7C,YACAY,QAAOC,eAAeY,EAAqB,cAAgBC,OAAO,IEhFlED,EAAA,SACEE,QADa,SACJC,GAAmB,GAAdC,GAAcC,UAAAC,OAAA,OAAAC,KAAAF,UAAA,GAAAA,UAAA,GAAL,GACrBF,GAAIK,UAAU,cACZC,SAD0B,SAChBC,EAAIC,EADYC,GACe,GAAhBC,GAAgBD,EAAhBC,QAASC,EAAOF,EAAPE,GAChCD,GAAQE,WAAaJ,EAAQK,KAAOF,EAAIG,UACxCJ,EAAQK,gBAAkBP,EAAQQ,UAAU,aAC5CL,EAAIM,aAAa,QAASN,EAAIO,UAAY,IAAMR,EAAQS,aAE1DC,OAN0B,SAMlBb,EAAIC,EANca,EAMmBC,GAAU,GAAhCC,GAAgCF,EAAhCE,KAAMZ,EAA0BU,EAA1BV,IAAKD,EAAqBW,EAArBX,OAC5Ba,GAAKC,QAAUF,EAASC,KAAKC,QAC3BD,EAAKC,MACPb,EAAIO,UAAYR,EAAQS,WAAa,IAAMI,EAAKC,MAEhDb,EAAIO,UAAYR,EAAQS,eAKhCnB,EAAIyB,OACFF,KADQ,WAEN,OAASX,WAAY,KAAMG,iBAAiB,IAE9CW,OACEC,MACEC,MAAQC,OAAQC,SAGpBC,UACEZ,WADQ,WACM,GAAAa,GAAA9D,KACR+D,EAAwB,SAAAN,GAAA,MAAQK,GAAKpB,WAAaX,EAAS0B,EAE/D,IAAIG,MAAMI,QAAQhE,KAAKyD,MAAO,CAC5B,GAAIQ,KAAajE,KAAKyD,MAAQzD,KAAKyD,KAAKS,IAAI,SAAA7D,GAAA,MAAK0D,GAAsB1D,KAEnE8D,EAAqBF,EAASG,MAAM,EAGxC,OADKpE,MAAK6C,iBAAiBsB,EAAmBE,QAAQrE,KAAK0C,YACpDyB,EAAmBG,KAAK,KAGjC,MAAKtE,MAAKyD,KAEFzD,KAAK6C,gBACkDkB,EAAsB/D,KAAKyD,MAAtFzD,KAAK0C,WAAa,IAAMqB,EAAsB/D,KAAKyD,MAHhCzD,KAAK0C","file":"vue-mods-names.js","sourcesContent":["(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"vue-mods-names\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"vue-mods-names\"] = factory();\n\telse\n\t\troot[\"vue-mods-names\"] = factory();\n})(this, function() {\nreturn \n\n\n// WEBPACK FOOTER //\n// webpack/universalModuleDefinition","(function webpackUniversalModuleDefinition(root, factory) {\n\tif(typeof exports === 'object' && typeof module === 'object')\n\t\tmodule.exports = factory();\n\telse if(typeof define === 'function' && define.amd)\n\t\tdefine(\"vue-mods-names\", [], factory);\n\telse if(typeof exports === 'object')\n\t\texports[\"vue-mods-names\"] = factory();\n\telse\n\t\troot[\"vue-mods-names\"] = factory();\n})(this, function() {\nreturn /******/ (function(modules) { // webpackBootstrap\n/******/ \t// The module cache\n/******/ \tvar installedModules = {};\n/******/\n/******/ \t// The require function\n/******/ \tfunction __webpack_require__(moduleId) {\n/******/\n/******/ \t\t// Check if module is in cache\n/******/ \t\tif(installedModules[moduleId]) {\n/******/ \t\t\treturn installedModules[moduleId].exports;\n/******/ \t\t}\n/******/ \t\t// Create a new module (and put it into the cache)\n/******/ \t\tvar module = installedModules[moduleId] = {\n/******/ \t\t\ti: moduleId,\n/******/ \t\t\tl: false,\n/******/ \t\t\texports: {}\n/******/ \t\t};\n/******/\n/******/ \t\t// Execute the module function\n/******/ \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n/******/\n/******/ \t\t// Flag the module as loaded\n/******/ \t\tmodule.l = true;\n/******/\n/******/ \t\t// Return the exports of the module\n/******/ \t\treturn module.exports;\n/******/ \t}\n/******/\n/******/\n/******/ \t// expose the modules object (__webpack_modules__)\n/******/ \t__webpack_require__.m = modules;\n/******/\n/******/ \t// expose the module cache\n/******/ \t__webpack_require__.c = installedModules;\n/******/\n/******/ \t// define getter function for harmony exports\n/******/ \t__webpack_require__.d = function(exports, name, getter) {\n/******/ \t\tif(!__webpack_require__.o(exports, name)) {\n/******/ \t\t\tObject.defineProperty(exports, name, {\n/******/ \t\t\t\tconfigurable: false,\n/******/ \t\t\t\tenumerable: true,\n/******/ \t\t\t\tget: getter\n/******/ \t\t\t});\n/******/ \t\t}\n/******/ \t};\n/******/\n/******/ \t// getDefaultExport function for compatibility with non-harmony modules\n/******/ \t__webpack_require__.n = function(module) {\n/******/ \t\tvar getter = module && module.__esModule ?\n/******/ \t\t\tfunction getDefault() { return module['default']; } :\n/******/ \t\t\tfunction getModuleExports() { return module; };\n/******/ \t\t__webpack_require__.d(getter, 'a', getter);\n/******/ \t\treturn getter;\n/******/ \t};\n/******/\n/******/ \t// Object.prototype.hasOwnProperty.call\n/******/ \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n/******/\n/******/ \t// __webpack_public_path__\n/******/ \t__webpack_require__.p = \"/dist/\";\n/******/\n/******/ \t// Load entry module and return exports\n/******/ \treturn __webpack_require__(__webpack_require__.s = 0);\n/******/ })\n/************************************************************************/\n/******/ ([\n/* 0 */\n/***/ (function(module, __webpack_exports__, __webpack_require__) {\n\n\"use strict\";\nObject.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony default export */ __webpack_exports__[\"default\"] = ({\n  install: function install(Vue) {\n    var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '_';\n\n    Vue.directive('mods-names', {\n      inserted: function inserted(el, binding, _ref) {\n        var context = _ref.context,\n            elm = _ref.elm;\n\n        context.$baseClass = binding.arg || elm.className;\n        context.$addOriginClass = binding.modifiers['no-origin'];\n        elm.setAttribute('class', elm.classList + ' ' + context.$modsNames);\n      },\n      update: function update(el, binding, _ref2, oldVnode) {\n        var data = _ref2.data,\n            elm = _ref2.elm,\n            context = _ref2.context;\n\n        if (data.class !== oldVnode.data.class) {\n          if (data.class) {\n            elm.classList = context.$modsNames + ' ' + data.class;\n          } else {\n            elm.classList = context.$modsNames;\n          }\n        }\n      }\n    });\n    Vue.mixin({\n      data: function data() {\n        return { $baseClass: null, $addOriginClass: true };\n      },\n\n      props: {\n        mods: {\n          type: [String, Array]\n        }\n      },\n      computed: {\n        $modsNames: function $modsNames() {\n          var _this = this;\n\n          var generateAdditionClass = function generateAdditionClass(mods) {\n            return _this.$baseClass + prefix + mods;\n          };\n\n          if (Array.isArray(this.mods)) {\n            var classArr = !!this.mods && this.mods.map(function (i) {\n              return generateAdditionClass(i);\n            });\n            // Don't touch original array of classes\n            var classArrWithOrigin = classArr.slice(0);\n            // If comopnent should render with base class, then add base class to begin of array\n            if (!this.$addOriginClass) classArrWithOrigin.unshift(this.$baseClass);\n            return classArrWithOrigin.join(' ');\n          }\n\n          if (!this.mods) return this.$baseClass;\n\n          return !this.$addOriginClass ? this.$baseClass + ' ' + generateAdditionClass(this.mods) : generateAdditionClass(this.mods);\n        }\n      }\n    });\n  }\n});\n\n/***/ })\n/******/ ]);\n});\n\n\n// WEBPACK FOOTER //\n// vue-mods-names.js"," \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, {\n \t\t\t\tconfigurable: false,\n \t\t\t\tenumerable: true,\n \t\t\t\tget: getter\n \t\t\t});\n \t\t}\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/dist/\";\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n\n\n\n// WEBPACK FOOTER //\n// webpack/bootstrap 1e456c48dcd66a9af5a9","export default {\r\n  install (Vue, prefix = '_') {\r\n    Vue.directive('mods-names', {\r\n      inserted (el, binding, { context, elm }) {\r\n        context.$baseClass = binding.arg || elm.className\r\n        context.$addOriginClass = binding.modifiers['no-origin']\r\n        elm.setAttribute('class', elm.classList + ' ' + context.$modsNames)\r\n      },\r\n      update (el, binding, { data, elm, context }, oldVnode) {\r\n        if (data.class !== oldVnode.data.class) {\r\n          if (data.class) {\r\n            elm.classList = context.$modsNames + ' ' + data.class\r\n          } else {\r\n            elm.classList = context.$modsNames\r\n          }\r\n        }\r\n      }\r\n    })\r\n    Vue.mixin({\r\n      data () {\r\n        return { $baseClass: null, $addOriginClass: true }\r\n      },\r\n      props: {\r\n        mods: {\r\n          type: [ String, Array ]\r\n        }\r\n      },\r\n      computed: {\r\n        $modsNames () {\r\n          let generateAdditionClass = mods => this.$baseClass + prefix + mods\r\n\r\n          if (Array.isArray(this.mods)) {\r\n            let classArr = !!this.mods && this.mods.map(i => generateAdditionClass(i))\r\n            // Don't touch original array of classes\r\n            let classArrWithOrigin = classArr.slice(0)\r\n            // If comopnent should render with base class, then add base class to begin of array\r\n            if (!this.$addOriginClass) classArrWithOrigin.unshift(this.$baseClass)\r\n            return classArrWithOrigin.join(' ')\r\n          }\r\n\r\n          if (!this.mods) return this.$baseClass\r\n\r\n          return !this.$addOriginClass\r\n            ? this.$baseClass + ' ' + generateAdditionClass(this.mods) : generateAdditionClass(this.mods)\r\n        }\r\n      }\r\n    })\r\n  }\r\n}\r\n\n\n\n// WEBPACK FOOTER //\n// ./src/VueModsNames.js"],"sourceRoot":""}


--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
  1 | ## Intro
  2 | 
  3 | ### About CSS methodology
  4 | 
  5 | Always we have to create similar components, but that has a different views or small modifications by using in other different places. For reach this goal, developers often use common methodologies for manage CSS class names.
  6 | For example BEM. By this methodology each block (component in our case) has custom modifications, that add by same CSS class name with addition modify (`mod`). See example below:
  7 | 
  8 | <vuep template="#simpledemo"></vuep>
  9 | <script v-pre type="text/x-template" id="simpledemo">
 10 | <template>
 11 |   <div class="good">
 12 |     <header class="good__header">Header</header>
 13 |     <div class="good__strip"></div>
 14 |     <div class="good__body">Good component</div>
 15 |     <div class="good__button">+</div>
 16 |   </div>
 17 | </template>
 18 | 
 19 | <style>
 20 | .good {
 21 |   position: relative;
 22 |   width: 100%;
 23 |   min-height: 200px;
 24 |   background-color: #e0e0e0;
 25 |   border-radius: 15px;
 26 | }
 27 | 
 28 | .good__header {
 29 |   width: 100%;
 30 |   height: 40px;
 31 |   background-color: #bf360c;
 32 |   border-radius: 15px 15px 0 0;
 33 |   color: #fff;
 34 |   font-weight: bold;
 35 |   text-align: center;
 36 |   line-height: 40px;
 37 | }
 38 | 
 39 | .good__strip {
 40 |   width: 100%;
 41 |   height: 5px;
 42 |   background-color: #870000;
 43 | }
 44 | 
 45 | .good__body {
 46 |   padding: 30px;
 47 |   font-weight: bold;
 48 |   font-size: 30px;
 49 |   text-align: center;
 50 | }
 51 | 
 52 | .good__button {
 53 |   position: absolute;
 54 |   bottom: -25px;
 55 |   left: calc(50% - 25px);
 56 |   width: 50px;
 57 |   height: 50px;
 58 |   border-radius: 50%;
 59 |   background-color: #795548;
 60 |   color: #fff;
 61 |   font-weight: bold;
 62 |   font-size: 40px;
 63 |   text-align: center;
 64 |   line-height: 50px;
 65 | }
 66 | 
 67 | .good__button:hover {
 68 |   cursor: pointer;
 69 |   background-color: #4b2c20;
 70 | }
 71 | </style>
 72 | </script>
 73 | 
 74 | We wanna use this component in other place with other colors and without plus button. Following methodology rules we have to add mod to root block class name. This allows to us change view of particular block with mods, but don't break other same blocks without mods. In real case it's look like this example:
 75 | 
 76 | > Add class with mod cyan - `good_cyan`. Often you may see version, when developers use `-` instead `__` for blocks. And `--` instead `__` for elements. `vue-mods-names` allow pass any symbols for custom prefix for using in your components. It's not so necessary. Note that, good practice is name mods by them usage on particular page or functional that component implement in this place, but not colors. In our case we use mod `cyan` only for more visibility.
 77 | 
 78 | <vuep template="#simpledemo2"></vuep>
 79 | <script v-pre type="text/x-template" id="simpledemo2">
 80 | <template>
 81 |   <div class="good good_cyan">
 82 |     <header class="good__header">Header</header>
 83 |     <div class="good__strip"></div>
 84 |     <div class="good__body">Good component</div>
 85 |     <div class="good__button">+</div>
 86 |   </div>
 87 | </template>
 88 | 
 89 | <style>
 90 | .good {
 91 |   position: relative;
 92 |   width: 100%;
 93 |   min-height: 200px;
 94 |   background-color: #e0e0e0;
 95 |   border-radius: 15px;
 96 | }
 97 | 
 98 | .good_cyan .good__header {
 99 |   background-color: #00bcd4;
100 |   color: #000;
101 | }
102 | 
103 | .good_cyan .good__strip {
104 |   background-color: #008ba3;
105 |   color: #000;
106 | }
107 | 
108 | .good_cyan .good__button {
109 |   display: none;
110 | }
111 | 
112 | .good__header {
113 |   width: 100%;
114 |   height: 40px;
115 |   background-color: #bf360c;
116 |   border-radius: 15px 15px 0 0;
117 |   color: #fff;
118 |   font-weight: bold;
119 |   text-align: center;
120 |   line-height: 40px;
121 | }
122 | 
123 | .good__strip {
124 |   width: 100%;
125 |   height: 5px;
126 |   background-color: #870000;
127 | }
128 | 
129 | .good__body {
130 |   padding: 30px;
131 |   font-weight: bold;
132 |   font-size: 30px;
133 |   text-align: center;
134 | }
135 | 
136 | .good__button {
137 |   position: absolute;
138 |   bottom: -25px;
139 |   left: calc(50% - 25px);
140 |   width: 50px;
141 |   height: 50px;
142 |   border-radius: 50%;
143 |   background-color: #795548;
144 |   color: #fff;
145 |   font-weight: bold;
146 |   font-size: 40px;
147 |   text-align: center;
148 |   line-height: 50px;
149 | }
150 | 
151 | .good__button:hover {
152 |   cursor: pointer;
153 |   background-color: #4b2c20;
154 | }
155 | </style>
156 | </script>
157 | 
158 | We use same component, but add one CSS class with mod and now we just need to add custom styles for our component (block) with mod.
159 | 
160 | ``` css
161 | .good_cyan .good__header {
162 |   background-color: #00bcd4;
163 |   color: #000;
164 | }
165 | 
166 | .good_cyan .good__strip {
167 |   background-color: #008ba3;
168 |   color: #000;
169 | }
170 | 
171 | .good_cyan .good__button {
172 |   display: none;
173 | }
174 | ```
175 | 
176 | It's look little bit better when you use a preprocessor for CSS:
177 | 
178 | ``` css
179 | .good_cyan .good__header,
180 | .good_cyan .good__strip
181 |   background-color: #00bcd4
182 |   color: #000
183 | 
184 | .good_cyan .good__button
185 |   display: none
186 | ```
187 | 
188 | Now you may imagine how it will be good, when you can manage view of particular components by these mods. You just write styles in other mod and use them where you need, You may use many of mods in one time. For example, you may add `.good_with-border` and `.good_red` in same component. Also mention, that name of mod choosing by usage component. For example, `.good_main-page` and `.good_article-page` is more better for naming mods, because you can look where this component use at first look and you may not figure out where it use in your templates.
189 | 
190 | ### Components in Vue
191 | 
192 | This method of manage CSS classes is good for using by component oriented framework and it's even really easy to use. To use component with other mods, you have to define receiving mods via props. In our case it will be look something like this:
193 | 
194 | `MyComponent.vue <script>`
195 | ```js
196 |   export default {
197 |     props: {
198 |       type: String
199 |     }
200 |   }
201 | ```
202 | 
203 | `MyComponent.vue <template>`
204 | ```html
205 | <template>
206 |   <div class="good" :class="mods && 'good_' + mods">
207 |     <header class="good__header">Header</header>
208 |     <div class="good__strip"></div>
209 |     <div class="good__body">Good component</div>
210 |     <div class="good__button">+</div>
211 |   </div>
212 | </template>
213 | ```
214 | Now component can receive `mods (String)`, that will be join with base class name of component itself and add it in `class` attribute. After that, you may use your component in other places by pass different props `mods`. And styles for block with particular mod describe in component styles. For example:
215 | 
216 | ```js
217 | // Use component by cyan color
218 | <MyComponent mods="cyan" />
219 | 
220 | // Use component by view, that made for contacts page
221 | <MyComponent mods="contacts" />
222 | ```
223 | 
224 | In component styles we just add CSS for class with mod, i.e. `.my-component-name_contacts`. It's easy and **IF** you don't use cascades, then your mods will be works as expected and it will not break other elements and root block.
225 | 
226 | > Author means __cascade__ like this: `div > .my-component-name > div:first-child` (it's just for example). Cascade has more priority than just class name and all your styles will works as unexpected. Also using `id` and `!important` can brake your make-up. In ideal world we assume, that you always following by methodology rules. In real cases many developers used to use same method for manage classes and it's very nice and predictable for other developers.
227 | 
228 | But now, our component is no flexible enough. To give it ability to receive few mods i.e. `Array` for `mods` props, we have to write computed property in our component and handle cases when `mods` is Array and when it's String.
229 | Actually, it's easy:
230 | 
231 | `Pseudo code`
232 | ```js
233 | // If it is Array just add mod for each
234 | if (mods is Array) {
235 |   return mods.map(item => 'good' + '_' + item)
236 | } else {
237 |   return `good_${mods}`
238 | }
239 | ```
240 | But we also need to check exist base class and ability to pass custom symbol of prefix (many developers use `-`, by default plugin use: `_`). And the most reasonable feature, that if you always develop app by same method, then you may want to hide this implementation and don't think about it more. Any component in your app may receive `mods` like String or Array. You should use `vue-mods-names` to achieve it. It's hide all functional of adding mods for components from your eyes.
241 | 
242 | > Take this opportunity to say, that plugin really simple and lightweight. It's have no many code, just little bit more, then example above. Therefore `Contributions welcome`. We publish it to GitHub because it's really helps to us (RG - Russian Newspaper) in our projects on Vue and we hope this can helps to you. We didn't make some genius.
243 | 
244 | ### Helpful of vue-mods-names
245 | 
246 | **Benifits:**
247 | 1. Every component in your app has ability to receive `mods` via props. (You don't need to add this behavior to many separate components)
248 | 2. Your code will be cleaner. All works with mods hide in plugin.
249 | 3. You may pass `mods` like `String` or `Array` to any component.
250 | 4. Setting up usage of base class (root class name). See `"Advanced usage"`
251 | 
252 | ## Install
253 | 
254 | So typically
255 | 
256 | ```js
257 | npm i vue-mods-names -D
258 | ```
259 | 
260 | ## Usage
261 | ```js
262 | import VueModsNames from 'vue-mods-names'
263 | 
264 | Vue.use(VueModsNames)
265 | ```
266 | If you want to change prefix (by default is equal: `_`), then just pass it in plugin options, like this:
267 | ```js
268 | import VueModsNames from 'vue-mods-names'
269 | 
270 | Vue.use(VueModsNames, { prefix: '-' })
271 | ```
272 | After that any component in your app is ready to use mods. It will work if you declare name of base class in directive `v-mods-names:`
273 | 
274 | Declare behavior by adding special directive `v-mods-names` in your template. `good` - is name of base class, that will join with other mods.
275 | 
276 | `Good.vue`
277 | ```html
278 | <!-- Template of 'Good' component, that will be include in other places -->
279 | <div v-mods-names:good>It's cool</div>
280 | ```
281 | 
282 | Now we may use component with different mods:
283 | 
284 | `main page`
285 | ```html
286 | <Good mods="main" />
287 | ```
288 | 
289 | In the issue you have component on main page, that has classes after render:
290 | 
291 | ```html
292 | <div class="good good_main">It's cool</div>
293 | ```
294 | 
295 | > All style modifications of component typically describe in component file itself (one file component).
296 | 
297 | ```css
298 | .good {}
299 | 
300 | .good_main {}
301 | 
302 | .good_big {}
303 | ```
304 | 
305 | You can pass Array of mods:
306 | 
307 | ```html
308 | <Good :mods="['main', 'big']" />
309 | ```
310 | 
311 | After render we get this:
312 | 
313 | ```html
314 | <div class="good good_main good_big">It's cool</div>
315 | ```
316 | 
317 | ## Advanced usage
318 | 
319 | ### no-origin
320 | 
321 | If you need to use only class names with mods (without base class), then you may use mod - 'no-origin' of directive `v-mods-names`. It's add after name of your base class:
322 | 
323 | `Awesome.vue`
324 | ```html
325 | <!-- Шаблон компонента Awesome -->
326 | <div v-mods-names:awesome.no-origin>Awesome</div>
327 | ```
328 | 
329 | Now if we use component in this way:
330 | ```html
331 | <Awesome :mods="['main', 'big']" />
332 | ```
333 | 
334 | It's render to this:
335 | 
336 | ```html
337 | <div class="awesome_main awesome_big">Awesome</div>
338 | ```
339 | 
340 | > It works similar for one mod (type: String) and for Array of mods.
341 | 
342 | Also you may use plugin like this:
343 | 
344 | ```html
345 | <Awesome class="awesome" mods="big" />
346 | ```
347 | 
348 | Component renders with base class, that you write by your hands and generated class name with mod.
349 | 
350 | ```html
351 | <div class="awesome awesome_big"></div>
352 | ```
353 | 
354 | > But it's senselessly and more easy to write in template directive with base class like in example above: `v-mods-names:awesome`
355 | 
356 | [KamilOcean](https://twitter.com/kamil_ocean)
357 | 


--------------------------------------------------------------------------------
/docs/ru/README.md:
--------------------------------------------------------------------------------
  1 | ## Введение
  2 | 
  3 | ### Коротко о методологиях CSS
  4 | 
  5 | При разработке проектов нам часто приходится создавать компоненты, которые похожи друг на друга, но при использовании в разных местах имеют разный внешний вид или небольшие модфикации. Для этого разработчики часто используют распространённые методологии вёрстки, например БЭМ, согласно которой каждый блок (в нашем случае компонент) имеет свои модификации, которые добавляются новым классом с таким же именем и добавочным названием модификатора. Более наглядно это продемонстрировано на примере ниже.
  6 | 
  7 | <vuep template="#simpledemo"></vuep>
  8 | <script v-pre type="text/x-template" id="simpledemo">
  9 | <template>
 10 |   <div class="good">
 11 |     <header class="good__header">Header</header>
 12 |     <div class="good__strip"></div>
 13 |     <div class="good__body">Хороший компонент</div>
 14 |     <div class="good__button">+</div>
 15 |   </div>
 16 | </template>
 17 | 
 18 | <style>
 19 | .good {
 20 |   position: relative;
 21 |   width: 100%;
 22 |   min-height: 200px;
 23 |   background-color: #e0e0e0;
 24 |   border-radius: 15px;
 25 | }
 26 | 
 27 | .good__header {
 28 |   width: 100%;
 29 |   height: 40px;
 30 |   background-color: #bf360c;
 31 |   border-radius: 15px 15px 0 0;
 32 |   color: #fff;
 33 |   font-weight: bold;
 34 |   text-align: center;
 35 |   line-height: 40px;
 36 | }
 37 | 
 38 | .good__strip {
 39 |   width: 100%;
 40 |   height: 5px;
 41 |   background-color: #870000;
 42 | }
 43 | 
 44 | .good__body {
 45 |   padding: 30px;
 46 |   font-weight: bold;
 47 |   font-size: 30px;
 48 |   text-align: center;
 49 | }
 50 | 
 51 | .good__button {
 52 |   position: absolute;
 53 |   bottom: -25px;
 54 |   left: calc(50% - 25px);
 55 |   width: 50px;
 56 |   height: 50px;
 57 |   border-radius: 50%;
 58 |   background-color: #795548;
 59 |   color: #fff;
 60 |   font-weight: bold;
 61 |   font-size: 40px;
 62 |   text-align: center;
 63 |   line-height: 50px;
 64 | }
 65 | 
 66 | .good__button:hover {
 67 |   cursor: pointer;
 68 |   background-color: #4b2c20;
 69 | }
 70 | </style>
 71 | </script>
 72 | 
 73 | Нам нужно использовать этот компонент в другом месте в другой цветовой схеме и без кнопки с плюсиком. Согласно методологии нам нужно добавить модификатор к этому классу главного блока, чтобы не сломать оформление самого блока, а менять только стили его модификации. На практике это выглядит так:
 74 | 
 75 | > Добавляем класс с модфикатором cyan - `good_cyan`. Часто вы можете встретить вариант, когда используют `-` вместо `_`, а для обозначения элемента блока `--`, а не `__`. Но это уже нюансы. `vue-mods-names` позволяет использовать любые символы в качестве префикса. Принимает их как опции плагина при его установке. Также прошу обратить ваше внимание, что хорошей практикой является наименование модификаторов в соответствии с их принадлежностью к определенной странице на которой он используется или функционалу, но не цветовому оформлению. В данном случае использовался модификатор `cyan` для большей наглядности.
 76 | 
 77 | <vuep template="#simpledemo2"></vuep>
 78 | <script v-pre type="text/x-template" id="simpledemo2">
 79 | <template>
 80 |   <div class="good good_cyan">
 81 |     <header class="good__header">Header</header>
 82 |     <div class="good__strip"></div>
 83 |     <div class="good__body">Хороший компонент</div>
 84 |     <div class="good__button">+</div>
 85 |   </div>
 86 | </template>
 87 | 
 88 | <style>
 89 | .good {
 90 |   position: relative;
 91 |   width: 100%;
 92 |   min-height: 200px;
 93 |   background-color: #e0e0e0;
 94 |   border-radius: 15px;
 95 | }
 96 | 
 97 | .good_cyan .good__header {
 98 |   background-color: #00bcd4;
 99 |   color: #000;
100 | }
101 | 
102 | .good_cyan .good__strip {
103 |   background-color: #008ba3;
104 |   color: #000;
105 | }
106 | 
107 | .good_cyan .good__button {
108 |   display: none;
109 | }
110 | 
111 | .good__header {
112 |   width: 100%;
113 |   height: 40px;
114 |   background-color: #bf360c;
115 |   border-radius: 15px 15px 0 0;
116 |   color: #fff;
117 |   font-weight: bold;
118 |   text-align: center;
119 |   line-height: 40px;
120 | }
121 | 
122 | .good__strip {
123 |   width: 100%;
124 |   height: 5px;
125 |   background-color: #870000;
126 | }
127 | 
128 | .good__body {
129 |   padding: 30px;
130 |   font-weight: bold;
131 |   font-size: 30px;
132 |   text-align: center;
133 | }
134 | 
135 | .good__button {
136 |   position: absolute;
137 |   bottom: -25px;
138 |   left: calc(50% - 25px);
139 |   width: 50px;
140 |   height: 50px;
141 |   border-radius: 50%;
142 |   background-color: #795548;
143 |   color: #fff;
144 |   font-weight: bold;
145 |   font-size: 40px;
146 |   text-align: center;
147 |   line-height: 50px;
148 | }
149 | 
150 | .good__button:hover {
151 |   cursor: pointer;
152 |   background-color: #4b2c20;
153 | }
154 | </style>
155 | </script>
156 | 
157 | Мы использовали тот же компонент, но указали один класс с модификатором и в стилях компонента просто добавили стили для данной модификации этого блока:
158 | 
159 | ``` css
160 | .good_cyan .good__header {
161 |   background-color: #00bcd4;
162 |   color: #000;
163 | }
164 | 
165 | .good_cyan .good__strip {
166 |   background-color: #008ba3;
167 |   color: #000;
168 | }
169 | 
170 | .good_cyan .good__button {
171 |   display: none;
172 | }
173 | ```
174 | 
175 | При использовании препроцессоров это будет выглядить еще красивее и компактнее:
176 | 
177 | ``` css
178 | .good_cyan .good__header,
179 | .good_cyan .good__strip
180 |   background-color: #00bcd4
181 |   color: #000
182 | 
183 | .good_cyan .good__button
184 |   display: none
185 | ```
186 | 
187 | Теперь представьте как хорошо контролировать оформление определённого блока с помощью таких модификаторов. Вы просто описываете нужные вам стили в другом модификаторе и применяете их где нужно, можно применять разное количество модификаторов. Например, в один и тот же блок добавить `.good_with-border` и `.good_red`. Так же хочу ещё раз напомнить, что в основном блоки называют не в соответствии с их цветовым оформлением, а в соответствии с их принадлежностью (контекстом использования), например, `.good_main-page` и `.good_article-page`. И из названия сразу становится понятно, что этот блок с такими стилями используется на главной странице, но такой же блок с модифицированными стилями используется на странице статей. Большинство разработчиков используют такой подход и не жалеют об этом. Одно из важных приемуществ при данном подходе - это возможность оградить себя от ненужных изменений в основном блоке, менять только его модификации.
188 | 
189 | ### Компоненты во Vue
190 | 
191 | При компонентном подходе такая методика разработки оказывается очень кстати и более того становится очень лёгкой для использования. Чтобы использовать компонент с другими модификаторами, вы конечно должны позволить компоненту принимать эти модификаторы через входные свойства (props). В нашем примере, это будет выглядить примерно так:
192 | 
193 | `MyComponent.vue <script>`
194 | ```js
195 |   export default {
196 |     props: {
197 |       type: String
198 |     }
199 |   }
200 | ```
201 | 
202 | `MyComponent.vue <template>`
203 | ```html
204 | <template>
205 |   <div class="good" :class="mods && 'good_' + mods">
206 |     <header class="good__header">Header</header>
207 |     <div class="good__strip"></div>
208 |     <div class="good__body">Good component</div>
209 |     <div class="good__button">+</div>
210 |   </div>
211 | </template>
212 | ```
213 | 
214 | Теперь компонент может принимать строковый модификатор `mods`, который он будет складывать с основным классом компонента и вставлять его в аттрибут class. И теперь вы можете спокойно использовать ваш компонент в разных местах, прокидывая ему разные `mods` свойства. А стили для них описываются уже в самом компоненте. Для примера:
215 | 
216 | ```js
217 | // Используем компонент с голубой цветовой схемой
218 | <MyComponent mods="cyan" />
219 | 
220 | // Используем компонент с цветовой схемой, которая предназначена для страницы "контакты"
221 | <MyComponent mods="contacts" />
222 | ```
223 | 
224 | В самих стилях компонента мы просто добавим оформление для блока с модификатором, то есть `.my-component-name_contacts`. Это легко и **ЕСЛИ** вы не используете в своей вёрстке каскадов, то ваши модификаторы будут работать как ожидается, не поломают другие элементы и основной блок.
225 | 
226 | > Под каскадами автор понимает такой кейс: `div > .my-component-name > div:first-child` (это просто для примера, особенно часто можно встретить когда такая конструкция находится даже не в стилях самого блока). Всё будет работать не как вы ожидаете, потому что в данном случае затрагивается вопрос приоритета применения стилей и каскад в этом случае выигрывает. Так же самый большой приоритет имеет `id` и `!important`. И если вы в каких то местах указали это, то не удивляйтесь. При вашем подходе, вас уже ничего не спасёт. В утопичном мире где всё хорошо, подразумевается что вы всегда следуете методологии. (Хочу заметить, что это не сказка и многие лиюди действительно делают всё хорошо и потом очень приятно поддерживать проект, который полностью написан в соответствие с таким подходом).
227 | 
228 | Но наш компонент написанный на данный момент не совсем гибкий. Чтобы дать ему возможность принимать несколько модификаторов т.е. в качестве параметра `mods` массив модификаторов, а не просто строку, то нам уже нужно будет вытаскивать строку добавления модификаторов в компоненте в `computed properties` и обрабатывать там случай если это массив и если это строка. На самом деле, это делается очень легко:
229 | 
230 | `Псевдокод`
231 | ```js
232 | // Если это массив
233 | if (mods is Array) {
234 |   return mods.map(item => 'good' + '_' + item)
235 | } else {
236 |   return `good_${mods}`
237 | }
238 | ```
239 | 
240 | Однако нам же потребуется еще проверка на существование базового класса и возможность передавать разный префикс (многие используют для обозначения модификаторов `-`, а не `_`). К тому же самое главное, что если весь ваш проект использует такой подход, то было бы не плохо чтобы вы не думали больше об этом и чтобы у вас всегда была возможность передавать модфикаторы любым блокам компонентам в вашем проекте. Как раз для этого вам отлично зайдёт плагин `vue-mods-names`, который очень упрощает ваш код и выносит весь этот функционал добавления модификаторов от ваших глаз.
241 | 
242 | > Пользуясь случаем, хочу сказать, что плагин действительно невероятно легкий и простой, ничего сложного в коде нету. Немного больше, чем в примере выше и всё. Поэтому (`Contributions welcome`) участие в проекте приветствуется. Мы вынесли его в открытый доступ не потому что мы сделали что-то гениальное, а потому что нам в "РГ - Российская Газета" он действительно помогает в повседневной работе и надеемся зайдет вам. Опять же, если вы разрабатываете согласно методологиям.
243 | 
244 | ### Чем полезен vue-mods-names
245 | 
246 | **Преимущества**
247 | 1. Используя плагин, каждый компонент вашего приложения получает возможность принимать модификаторы через props: mods. (Вам больше не нужно добавлять это поведение в отдельные компоненты)
248 | 2. Ваш код становится меньше. Вся работа с модификаторами скрыта в плагине.
249 | 3. В любой компонент можно передавать один модификатор строкой или любое количество модификаторов в массиве.
250 | 4. Настройка использования базового класса (смотрите раздел `"продвинутое использование"`)
251 | 
252 | ## Установка
253 | 
254 | Всё как обычно
255 | 
256 | ```js
257 | npm i vue-mods-names -D
258 | ```
259 | 
260 | 
261 | ## Использование
262 | 
263 | ```js
264 | import VueModsNames from 'vue-mods-names'
265 | 
266 | Vue.use(VueModsNames)
267 | ```
268 | 
269 | Если вы хотите поменять префикс (по умолчанию: `_`), то просто передайте его в опции плагина:
270 | 
271 | ```js
272 | import VueModsNames from 'vue-mods-names'
273 | 
274 | Vue.use(VueModsNames, { prefix: '-' })
275 | ```
276 | 
277 | После этого любой компонент в вашем приложении готов использовать модификаторы, если вы укажете имя базового класса в качестве аргумента директивы. Примеры ниже.
278 | 
279 | Декларируем поведение добавляя специальную директиву `v-mods-names` в шаблоне. `good` - это название базового класса, к которому будут присоединяться модификаторы.
280 | 
281 | `Good.vue`
282 | ```html
283 | <!-- Шаблон компонента 'Good', который будет подключаться в разных местах: -->
284 | <div v-mods-names:good>Круто</div>
285 | ```
286 | 
287 | Теперь мы можем использовать компонент с разными модификаторами:
288 | 
289 | `Главная страница`
290 | ```html
291 | <Good mods="main" />
292 | ```
293 | 
294 | В итоге вы получите на главной странице компонент, у которого на выходе будут такие классы:
295 | 
296 | ```html
297 | <div class="good good_main">Круто</div>
298 | ```
299 | 
300 | > Все модификации компонента указываются в стилях самого компонента. Например:
301 | 
302 | ```css
303 | .good {}
304 | 
305 | .good_main {}
306 | 
307 | .good_big {}
308 | ```
309 | 
310 | Вы можете передавать массив модификаторов:
311 | 
312 | ```html
313 | <Good :mods="['main', 'big']" />
314 | ```
315 | 
316 | На выходе получим это:
317 | 
318 | ```html
319 | <div class="good good_main good_big">Круто</div>
320 | ```
321 | 
322 | ## Продвинутое использование
323 | 
324 | ### no-origin
325 | 
326 | Если вам вдруг понадобилось использовать только названия классов с модификаторами, без базового класса, то вам на помощь придёт модификатор для директивы `v-mods-names`, который добавляется после названия вашего базового класса:
327 | 
328 | `Awesome.vue`
329 | ```html
330 | <!-- Шаблон компонента Awesome -->
331 | <div v-mods-names:awesome.no-origin>Шикарно</div>
332 | ```
333 | 
334 | Теперь при использовании вашего компонента таким образом:
335 | 
336 | ```html
337 | <Awesome :mods="['main', 'big']" />
338 | ```
339 | 
340 | Вы получите это:
341 | 
342 | 
343 | ```html
344 | <div class="awesome_main awesome_big"></div>
345 | ```
346 | 
347 | > Работает одинаково как для одного модификатора в виде строки, так и для массива модификаторов
348 | 
349 | Никто не мешает вам использовать это таким способом:
350 | 
351 | ```html
352 | <Awesome class="awesome" mods="big" />
353 | ```
354 | 
355 | На выходе вы также получите ваш базовый класс указаный собственноручно в шаблоне компонента и сгенерированный класс с модификатором
356 | 
357 | ```html
358 | <div class="awesome awesome_big"></div>
359 | ```
360 | 
361 | > Однако в этом мало смысла и гораздо проще написать в шаблоне директиву с базовым классом как в примере выше: `v-mods-names:awesome`
362 | 
363 | [KamilOcean](https://twitter.com/kamil_ocean)
364 | 


--------------------------------------------------------------------------------
/docs/ua/README.md:
--------------------------------------------------------------------------------
  1 | ## Вступ
  2 | 
  3 | ### Коротко о методологіях CSS
  4 | 
  5 | При розробці проектів нам часто доводиться створювати компоненти, які схожі один на одного, але при використанні в різних місцях мають різний зовнішній вигляд або невеликі модифікації. Для цього розробники часто використовують поширені методології верстки, наприклад БЕМ, згідно з якою кожен блок (в нашому випадку компонент) має свої модифікації, які додаються новим класом з таким же ім'ям і додатковою назвою модифікатора. Більш наочно це продемонстровано на прикладі нижче.
  6 | 
  7 | <vuep template="#simpledemo"></vuep>
  8 | <script v-pre type="text/x-template" id="simpledemo">
  9 | <template>
 10 |   <div class="good">
 11 |     <header class="good__header">Header</header>
 12 |     <div class="good__strip"></div>
 13 |     <div class="good__body">Гарний компонент</div>
 14 |     <div class="good__button">+</div>
 15 |   </div>
 16 | </template>
 17 | 
 18 | <style>
 19 | .good {
 20 |   position: relative;
 21 |   width: 100%;
 22 |   min-height: 200px;
 23 |   background-color: #e0e0e0;
 24 |   border-radius: 15px;
 25 | }
 26 | 
 27 | .good__header {
 28 |   width: 100%;
 29 |   height: 40px;
 30 |   background-color: #bf360c;
 31 |   border-radius: 15px 15px 0 0;
 32 |   color: #fff;
 33 |   font-weight: bold;
 34 |   text-align: center;
 35 |   line-height: 40px;
 36 | }
 37 | 
 38 | .good__strip {
 39 |   width: 100%;
 40 |   height: 5px;
 41 |   background-color: #870000;
 42 | }
 43 | 
 44 | .good__body {
 45 |   padding: 30px;
 46 |   font-weight: bold;
 47 |   font-size: 30px;
 48 |   text-align: center;
 49 | }
 50 | 
 51 | .good__button {
 52 |   position: absolute;
 53 |   bottom: -25px;
 54 |   left: calc(50% - 25px);
 55 |   width: 50px;
 56 |   height: 50px;
 57 |   border-radius: 50%;
 58 |   background-color: #795548;
 59 |   color: #fff;
 60 |   font-weight: bold;
 61 |   font-size: 40px;
 62 |   text-align: center;
 63 |   line-height: 50px;
 64 | }
 65 | 
 66 | .good__button:hover {
 67 |   cursor: pointer;
 68 |   background-color: #4b2c20;
 69 | }
 70 | </style>
 71 | </script>
 72 | 
 73 | Нам потрібно використовувати цей компонент в іншому місці в іншій кольоровій схемі і без кнопки з плюсом. Згідно з методологією нам потрібно додати модифікатор до цього класу головного блоку, щоб не зламати оформлення самого блоку, а міняти тільки стилі його модифікації. На практиці це виглядає так:
 74 | 
 75 | > Додаємо клас з модфікатором cyan - `good_cyan`. Часто ви можете зустріти варіант, коли використовують `-` замість ` _`, а для позначення елемента блоку `--`, а не `__`. Але це вже нюанси. Так само прошу звернути вашу увагу, що гарним вибором найменування модифікаторів відповідно до їх належності до певної сторінки на якій він використовується або функціоналу, але не кольорового оформлення. У даному випадку використовувався модифікатор `cyan` для більшої наглядності.
 76 | 
 77 | <vuep template="#simpledemo2"></vuep>
 78 | <script v-pre type="text/x-template" id="simpledemo2">
 79 | <template>
 80 |   <div class="good good_cyan">
 81 |     <header class="good__header">Header</header>
 82 |     <div class="good__strip"></div>
 83 |     <div class="good__body">Гарний компонент</div>
 84 |     <div class="good__button">+</div>
 85 |   </div>
 86 | </template>
 87 | 
 88 | <style>
 89 | .good {
 90 |   position: relative;
 91 |   width: 100%;
 92 |   min-height: 200px;
 93 |   background-color: #e0e0e0;
 94 |   border-radius: 15px;
 95 | }
 96 | 
 97 | .good_cyan .good__header {
 98 |   background-color: #00bcd4;
 99 |   color: #000;
100 | }
101 | 
102 | .good_cyan .good__strip {
103 |   background-color: #008ba3;
104 |   color: #000;
105 | }
106 | 
107 | .good_cyan .good__button {
108 |   display: none;
109 | }
110 | 
111 | .good__header {
112 |   width: 100%;
113 |   height: 40px;
114 |   background-color: #bf360c;
115 |   border-radius: 15px 15px 0 0;
116 |   color: #fff;
117 |   font-weight: bold;
118 |   text-align: center;
119 |   line-height: 40px;
120 | }
121 | 
122 | .good__strip {
123 |   width: 100%;
124 |   height: 5px;
125 |   background-color: #870000;
126 | }
127 | 
128 | .good__body {
129 |   padding: 30px;
130 |   font-weight: bold;
131 |   font-size: 30px;
132 |   text-align: center;
133 | }
134 | 
135 | .good__button {
136 |   position: absolute;
137 |   bottom: -25px;
138 |   left: calc(50% - 25px);
139 |   width: 50px;
140 |   height: 50px;
141 |   border-radius: 50%;
142 |   background-color: #795548;
143 |   color: #fff;
144 |   font-weight: bold;
145 |   font-size: 40px;
146 |   text-align: center;
147 |   line-height: 50px;
148 | }
149 | 
150 | .good__button:hover {
151 |   cursor: pointer;
152 |   background-color: #4b2c20;
153 | }
154 | </style>
155 | </script>
156 | 
157 | Ми використовували той же компонент, але вказали один клас з модифікатором і в стилях компонента просто додали стилі для даної модифікації цього блоку:
158 | 
159 | ``` css
160 | .good_cyan .good__header {
161 |   background-color: #00bcd4;
162 |   color: #000;
163 | }
164 | 
165 | .good_cyan .good__strip {
166 |   background-color: #008ba3;
167 |   color: #000;
168 | }
169 | 
170 | .good_cyan .good__button {
171 |   display: none;
172 | }
173 | ```
174 | 
175 | При використанні препроцесорів це буде виглядати ще гарніше і компактніше:
176 | 
177 | ``` css
178 | .good_cyan .good__header,
179 | .good_cyan .good__strip
180 |   background-color: #00bcd4
181 |   color: #000
182 | 
183 | .good_cyan .good__button
184 |   display: none
185 | ```
186 | 
187 | Тепер уявіть як добре контролювати оформлення певного блоку за допомогою таких модифікаторів. Ви просто описуєте потрібні вам стилі в іншому модификаторі і застосовуєте їх де потрібно, можна застосовувати різну кількість модифікаторів. Наприклад, в один і той же блок додати `.good_with-border` і `.good_red`. Так само хочу ще раз нагадати, що в основному блоки називають не відповідно до їх кольорового оформлення, а відповідно до їх належності (контекстом використання), наприклад, `.good_main-page` і `.good_article-page`. І з назви відразу стає зрозуміло, що цей блок з такими стилями використовується на головній сторінці, але такий же блок з модифікованими стилями використовується на сторінці статей. Більшість розробників використовують такий підхід і не шкодують про це. Одна з важливих переваг при даному підході - це можливість застерегти себе від непотрібних змін в основному блоці, міняти тільки його модифікації.
188 | 
189 | ### Компоненти у вашому фреймворці
190 | 
191 | При компонентному підході така методика розробки виявляється дуже до речі і більш того стає дуже легкою для використання. Щоб використовувати компонент з іншими модифікаторами, ви звичайно повинні дозволити компоненту приймати ці модифікатори через вхідні властивості (props). У нашому прикладі, це буде виглядати приблизно так:
192 | 
193 | `MyComponent.vue <script>`
194 | ```js
195 |   export default {
196 |     props: {
197 |       type: String
198 |     }
199 |   }
200 | ```
201 | 
202 | `MyComponent.vue <template>`
203 | ```html
204 | <template>
205 |   <div class="good" :class="mods && 'good_' + mods">
206 |     <header class="good__header">Header</header>
207 |     <div class="good__strip"></div>
208 |     <div class="good__body">Good component</div>
209 |     <div class="good__button">+</div>
210 |   </div>
211 | </template>
212 | ```
213 | 
214 | Тепер компонент може приймати строковий модифікатор `mods`, який він буде складати з основним класом компонента і вставляти його в атрибут class. І тепер ви можете спокійно використовувати ваш компонент в різних місцях, передаючи йому різні `mods` властивості. А стилі для них описуються вже в самому компоненті. Наприклад:
215 | 
216 | ```js
217 | // Використовуємо компонент з блакитною схемою кольорів
218 | <MyComponent mods="cyan" />
219 | 
220 | // Використовуємо компонент зі схемою кольорів, яка призначена для сторінки "контакти"
221 | <MyComponent mods="contacts" />
222 | ```
223 | 
224 | У самих стилях компонента ми просто додамо оформлення для блоку з модифікатором, тобто `.my-component-name_contacts`. Це легко і **ЯКЩО** ви не використовуєте у своїй верстці каскадів, то ваші модифікатори працюватимуть як очікується, не поламають інші елементи і основний блок.
225 | 
226 | > Під каскадами автор розуміє такий кейс: `div > .my-component-name > div:first-child` (це просто для прикладу, особливо часто можна зустріти коли така конструкція знаходиться навіть не в стилях самого блоку). Все буде працювати не як ви очікуєте, тому що в даному випадку порушується питання пріоритету застосування стилів і каскад в цьому випадку виграє. Так само найбільший пріоритет має `id` і `!important`. І якщо ви в якихось місцях вказали це, то не дивуйтеся. При вашому підході, вас уже нічого не врятує. В утопічному світі де все добре, мається на увазі що ви завжди дотримуєтесь методології. (Хочу зауважити, що це не казка і багато людей дійсно роблять все добре і потім дуже приємно підтримувати проект, який повністю написаний відповідно за таким підходом).
227 | 
228 | Але наш компонент написаний на даний момент не зовсім гнучкий. Щоб дати йому можливість приймати кілька модифікаторів тобто в якості параметра `mods` масив модифікаторів, а не просто рядок, то нам вже потрібно буде витягувати рядок додавання модифікаторів в компоненті в `computed properties` і обробляти там випадок якщо це масив і якщо це рядок. Насправді, це робиться дуже легко:
229 | 
230 | `Псевдокод`
231 | ```js
232 | // Якщо це масив
233 | if (mods is Array) {
234 |   return mods.map(item => 'good' + '_' + item)
235 | } else {
236 |   return `good_${mods}`
237 | }
238 | ```
239 | 
240 | Однак нам же потрібно ще перевірка на існування базового класу і можливість передавати різний префікс (багато хто використовує для позначення модифікаторів `-`, а не `_`). До того ж найголовніше, що якщо весь ваш проект використовує такий підхід, то було б не погано щоб ви не думали більше про це і щоб у вас завжди була можливість передавати модфікатори будь-яких блоків компонентів у вашому проекті. Якраз для цього вам відмінно зарадить плагін `vue-mods-names`, який дуже спрощує ваш код і виносить весь цей функціонал додавання модифікаторів від ваших очей.
241 | 
242 | > Користуючись нагодою, хочу сказати, що плагін дійсно неймовірно легкий і простий, нічого складного в коді немає. Трохи більше, ніж у прикладі вище і все. Тому (`Contributions welcome`) участь в проекті вітається. Ми винесли його у відкритий доступ не тому що ми зробили щось геніальне, а тому що нам в "РГ - Російська Газета" він дійсно допомагає в повсякденній роботі і сподіваємося буде корисним вам. Знову ж, якщо ви розробляєте згідно методологій.
243 | 
244 | ## Чим корисний vue-mods-names
245 | 
246 | ** Переваги **
247 | 1. Використовуючи плагін, кожен компонент вашої програми отримує можливість приймати модифікатори через props: mods. (Вам більше не потрібно додавати цю поведінку в окремі компоненти)
248 | 2. Ваш код стає менше. Вся робота з модифікаторами прихована в плагіні.
249 | 3. У будь-який компонент можна передавати один модифікатор рядком або будь-яку кількість модифікаторів в масиві.
250 | 4. Налаштування використання базового класу (дивіться розділ `" просунуте використання "`)
251 | 
252 | ## Установка
253 | 
254 | Все як звичайно
255 | 
256 | ```js
257 | npm i vue-mods-names -D
258 | ```
259 | 
260 | 
261 | ## Використання
262 | 
263 | ```js
264 | import VueModsNames from 'vue-mods-names'
265 | 
266 | Vue.use(VueModsNames)
267 | ```
268 | 
269 | Якщо ви хочете поміняти префікс (за стандартом: `_`), то просто передайте його в опції плагіна:
270 | 
271 | ```js
272 | import VueModsNames from 'vue-mods-names'
273 | 
274 | Vue.use(VueModsNames, { prefix: '-' })
275 | ```
276 | 
277 | Після цього будь-який компонент в вашому додатку готовий використовувати модифікатори, якщо ви вкажете ім'я базового класу в якості аргументу директиви. Приклади нижче.
278 | 
279 | Декларуємо поведінку додаючи спеціальну директиву `v-mods-names` в шаблоні. `Good` - це назва базового класу, до якого будуть приєднуватися модифікатори.
280 | 
281 | `Good.vue`
282 | ```html
283 | <!-- Шаблон компонента 'Good', який буде підключатися в різних місцях: -->
284 | <div v-mods-names:good>Круто</div>
285 | ```
286 | Тепер ми можемо використовувати компонент з різними модифікаторами:
287 | 
288 | `Головна сторінка`
289 | ```html
290 | <Good mods="main" />
291 | ```
292 | 
293 | У підсумку ви отримаєте на головній сторінці компонент, у якого на виході будуть такі класи:
294 | 
295 | ```html
296 | <div class="good good_main">Круто</div>
297 | ```
298 | 
299 | > Усі модифікації компонента вказуються в стилях самого компонента. Наприклад:
300 | 
301 | ```css
302 | .good {}
303 | 
304 | .good_main {}
305 | 
306 | .good_big {}
307 | ```
308 | 
309 | Ви можете передавати масив модифікаторів:
310 | 
311 | ```html
312 | <Good :mods="['main', 'big']" />
313 | ```
314 | 
315 | На виході отримаємо це:
316 | 
317 | ```html
318 | <div class="good good_main good_big">Круто</div>
319 | ```
320 | 
321 | ## Просунуте використання
322 | 
323 | ### no-origin
324 | 
325 | Якщо вам раптом знадобилося використовувати тільки назви класів з модифікаторами, без базового класу, то вам на допомогу прийде модифікатор для директиви `v-mods-names`, який додається після назви вашого базового класу:
326 | 
327 | `Awesome.vue`
328 | ```html
329 | <!-- Шаблон компонента Awesome -->
330 | <div v-mods-names:awesome.no-origin>Шикарно</div>
331 | ```
332 | 
333 | Тепер при використанні вашого компонента таким чином:
334 | 
335 | ```html
336 | <Awesome :mods="['main', 'big']" />
337 | ```
338 | 
339 | Ви отримаєте це:
340 | 
341 | ```html
342 | <div class="awesome_main awesome_big"></div>
343 | ```
344 | 
345 | > Працює однаково як для одного модифікатора у вигляді рядка, так і для масиву модифікаторів
346 | 
347 | Ніхто не заважає вам використовувати це таким способом:
348 | 
349 | ```html
350 | <Awesome class="awesome" mods="big" />
351 | ```
352 | 
353 | На виході ви також отримаєте ваш базовий клас вказаний власноруч в шаблоні компонента і згенерований клас з модифікатором:
354 | 
355 | ```html
356 | <div class="awesome awesome_big"></div>
357 | ```
358 | 
359 | > Проте в цьому мало сенсу і набагато простіше написати в шаблоні директиву з базовим класом як в прикладі вище: `v-mods-names:awesome`
360 | 
361 | ### Мені потрібно додати інші класи
362 | 
363 | Це дуже поширений кейс, коли вам потрібно додати якийсь клас після певних дій від користувача. Наприклад, ми обробляємо форму і в разі отримання помилки від сервера нам потрібно додати клас з модифікатором `error` до нашого компоненту.
364 | 
365 | ```html
366 | <div v-mods-names:input :class="classArr"></div>
367 | ```
368 | 
369 | ```js
370 | computed: {
371 |   classArr () {
372 |     // Якщо отримана помилка
373 |     if (this.warrningValidation) {
374 |       let newClasses = this.modsNames.slice()
375 |       newClasses += ' input_warrning'
376 |       return newClasses
377 |     }
378 |     return this.modsNames
379 |   }
380 | }
381 | ```
382 | 
383 | [KamilOcean](https://twitter.com/kamil_ocean)
384 | 


--------------------------------------------------------------------------------
/docs/fr/README.md:
--------------------------------------------------------------------------------
  1 | ## Introduction
  2 | 
  3 | ### Brièvement des méthodologies CSS
  4 | 
  5 | Lors de la mise au point de projets, nous devons souvent créer des composants, qui sont tous pareils, mais lorsqu'ils sont utilisés dans des endroits différents, ils ont des aspects différents ou de petites modifications. À cette fin, les développeurs utilisent souvent des méthodes de mise en page populaires, par exemple BEM, selon laquelle chaque bloc (dans notre cas, с’est un composant) a ses propres modifications, qui sont ajoutées par une nouvelle classe avec le même nom et le nom de modificateur  complémentaire. C’est illustré plus clairement par l'exemple ci-dessous.
  6 | 
  7 | <vuep template="#simpledemo"></vuep>
  8 | <script v-pre type="text/x-template" id="simpledemo">
  9 | <template>
 10 |   <div class="good">
 11 |     <header class="good__header">Header</header>
 12 |     <div class="good__strip"></div>
 13 |     <div class="good__body">Bon composant</div>
 14 |     <div class="good__button">+</div>
 15 |   </div>
 16 | </template>
 17 | 
 18 | <style>
 19 | .good {
 20 |   position: relative;
 21 |   width: 100%;
 22 |   min-height: 200px;
 23 |   background-color: #e0e0e0;
 24 |   border-radius: 15px;
 25 | }
 26 | 
 27 | .good__header {
 28 |   width: 100%;
 29 |   height: 40px;
 30 |   background-color: #bf360c;
 31 |   border-radius: 15px 15px 0 0;
 32 |   color: #fff;
 33 |   font-weight: bold;
 34 |   text-align: center;
 35 |   line-height: 40px;
 36 | }
 37 | 
 38 | .good__strip {
 39 |   width: 100%;
 40 |   height: 5px;
 41 |   background-color: #870000;
 42 | }
 43 | 
 44 | .good__body {
 45 |   padding: 30px;
 46 |   font-weight: bold;
 47 |   font-size: 30px;
 48 |   text-align: center;
 49 | }
 50 | 
 51 | .good__button {
 52 |   position: absolute;
 53 |   bottom: -25px;
 54 |   left: calc(50% - 25px);
 55 |   width: 50px;
 56 |   height: 50px;
 57 |   border-radius: 50%;
 58 |   background-color: #795548;
 59 |   color: #fff;
 60 |   font-weight: bold;
 61 |   font-size: 40px;
 62 |   text-align: center;
 63 |   line-height: 50px;
 64 | }
 65 | 
 66 | .good__button:hover {
 67 |   cursor: pointer;
 68 |   background-color: #4b2c20;
 69 | }
 70 | </style>
 71 | </script>
 72 | 
 73 | Nous devons utiliser ce composant ailleurs dans un jeu de couleurs différentes et sans un bouton avec plus. Selon la méthodologie, il faut ajouter un modificateur à cette classe du bloc principal afin de ne pas casser la conception du bloc lui-même, mais seulement changer les styles de sa modification. Voilà à quoi ça ressemble:
 74 | 
 75 | > Nous ajoutons une classe avec le modificateur cyan - `good_cyan`.
 76 | Souvent, vous pouvez rencontrer une variante quand ils utilisent `-` au lieu de `_`, et pour indiquer l'élément du bloc `--` plutôt que `__`. Mais ce sont des nuances. `vue-mods-names` vous permet d'utiliser n'importe quel caractère comme préfixe. Il les accepte comme les options de plug-in lors de l'installation. Aussi, je vous prie de noter que le nom des modificateurs en fonction de leur appartenance à une certaine page sur laquelle ils sont utilisés ou fonctionnels, mais pas de la couleur, est une bonne pratique.
 77 | Dans ce cas, le modificateur `cyan` a été utilisé pour plus de clarté.
 78 | 
 79 | <vuep template="#simpledemo2"></vuep>
 80 | <script v-pre type="text/x-template" id="simpledemo2">
 81 | <template>
 82 |   <div class="good good_cyan">
 83 |     <header class="good__header">Header</header>
 84 |     <div class="good__strip"></div>
 85 |     <div class="good__body">Bon composant</div>
 86 |     <div class="good__button">+</div>
 87 |   </div>
 88 | </template>
 89 | 
 90 | <style>
 91 | .good {
 92 |   position: relative;
 93 |   width: 100%;
 94 |   min-height: 200px;
 95 |   background-color: #e0e0e0;
 96 |   border-radius: 15px;
 97 | }
 98 | 
 99 | .good_cyan .good__header {
100 |   background-color: #00bcd4;
101 |   color: #000;
102 | }
103 | 
104 | .good_cyan .good__strip {
105 |   background-color: #008ba3;
106 |   color: #000;
107 | }
108 | 
109 | .good_cyan .good__button {
110 |   display: none;
111 | }
112 | 
113 | .good__header {
114 |   width: 100%;
115 |   height: 40px;
116 |   background-color: #bf360c;
117 |   border-radius: 15px 15px 0 0;
118 |   color: #fff;
119 |   font-weight: bold;
120 |   text-align: center;
121 |   line-height: 40px;
122 | }
123 | 
124 | .good__strip {
125 |   width: 100%;
126 |   height: 5px;
127 |   background-color: #870000;
128 | }
129 | 
130 | .good__body {
131 |   padding: 30px;
132 |   font-weight: bold;
133 |   font-size: 30px;
134 |   text-align: center;
135 | }
136 | 
137 | .good__button {
138 |   position: absolute;
139 |   bottom: -25px;
140 |   left: calc(50% - 25px);
141 |   width: 50px;
142 |   height: 50px;
143 |   border-radius: 50%;
144 |   background-color: #795548;
145 |   color: #fff;
146 |   font-weight: bold;
147 |   font-size: 40px;
148 |   text-align: center;
149 |   line-height: 50px;
150 | }
151 | 
152 | .good__button:hover {
153 |   cursor: pointer;
154 |   background-color: #4b2c20;
155 | }
156 | </style>
157 | </script>
158 | 
159 | Nous avons utilisé le même composant, mais nous avons indiqué une classe avec un modificateur et dans les styles de composant, nous avons simplement ajouté les styles pour cette modification de ce bloc:
160 | 
161 | ``` css
162 | .good_cyan .good__header {
163 |   background-color: #00bcd4;
164 |   color: #000;
165 | }
166 | 
167 | .good_cyan .good__strip {
168 |   background-color: #008ba3;
169 |   color: #000;
170 | }
171 | 
172 | .good_cyan .good__button {
173 |   display: none;
174 | }
175 | ```
176 | 
177 | Lors de l'utilisation de préprocesseurs, cela sera encore plus beau et compact:
178 | 
179 | ``` css
180 | .good_cyan .good__header,
181 | .good_cyan .good__strip
182 |   background-color: #00bcd4
183 |   color: #000
184 | 
185 | .good_cyan .good__button
186 |   display: none
187 | ```
188 | 
189 | Maintenant, imaginez à quel point il est bon de contrôler la conception d'un bloc particulier à l'aide de ces modificateurs.
190 | Vous décrivez simplement les styles dont vous avez besoin dans un autre modificateur et vous les appliquez si nécessaire, vous pouvez appliquer un nombre différent de modificateurs.
191 | Par exemple, dans le même bloc, ajoutez `.good_with-border` et `.good_red`.
192 | Aussi, je tiens à vous rappeler que les blocs sont essentiellement appelés non pas en fonction de leur conception de couleur, mais en fonction de leur appartenance (contexte d'utilisation), par exemple, `.good_main-page` et `.good_article-page`.
193 | Et à partir du nom, il devient immédiatement clair que ce bloc avec de tels styles est utilisé sur la page principale, mais le même bloc avec les styles modifiés est utilisé sur la page des articles.
194 | La plupart des développeurs utilisent cette approche et ne le regrettent pas.
195 | L'un des avantages importants de cette approche est la possibilité de se protéger des changements inutiles dans l'unité principale, de ne modifier que ses modifications.
196 | 
197 | 
198 | ### Composants dans Vue
199 | 
200 | Avec l'approche par composants, cette méthode de développement est très utile et elle devient très facile à utiliser.
201 | Pour utiliser un composant avec d'autres modificateurs, vous devez autoriser le composant à adopter ces modificateurs par les propriétés d'entrée (props).
202 | Voilà à quoi ressemble:
203 | 
204 | `MyComponent.vue <script>`
205 | ```js
206 |   export default {
207 |     props: {
208 |       type: String
209 |     }
210 |   }
211 | ```
212 | 
213 | `MyComponent.vue <template>`
214 | ```html
215 | <template>
216 |   <div class="good" :class="mods && 'good_' + mods">
217 |     <header class="good__header">Header</header>
218 |     <div class="good__strip"></div>
219 |     <div class="good__body">Good component</div>
220 |     <div class="good__button">+</div>
221 |   </div>
222 | </template>
223 | ```
224 | 
225 | Maintenant, le composant peut accepter le modificateur de chaîne mods, qu'il va ajouter à la classe de composant principal et l'insérer dans l'attribut de classe.
226 | Maintenant, vous pouvez utiliser votre composant dans les endroits différents, en s’arrogeant les propriétés de mods  diverses.
227 | Les styles pour eux sont déjà décrits dans le composant lui-même.
228 | Par exemple:
229 | 
230 | ```js
231 | // Utiliser un composant avec un modéle de couleur bleu
232 | <MyComponent mods="cyan" />
233 | 
234 | // Utilise le composant avec le modéle de couleurs, qui est destiné à la page "contacts"
235 | <MyComponent mods="contacts" />
236 | ```
237 | 
238 | Dans les styles de composants, nous ajoutons simplement la décoration du bloc avec le modificateur, c'est-à-dire `.my-component-name_contacts`.
239 | C'est facile. **SI** vous n'utilisez pas de cascades dans votre mise en page, alors vos modificateurs fonctionneront comme prévu, ne cassez pas les autres éléments et l'unité principale.
240 | 
241 | > Sous les cascades, l'auteur comprend ce cas:  `div > .my-component-name > div:first-child` (par exemple, vous pouvez souvent le voir quand un tel design n'est même pas dans les styles du bloc lui-même).
242 | Tout ne fonctionnera pas comme prévu, car il aborde le problème de la priorité d'appliquer des styles et les cascades est gagnée dans ce cas.
243 | La même priorité a `id` et `!important`.
244 | Et si vous l'avez indiqué à certains endroits, ne soyez pas surprise. Avec votre approche, rien ne vous sauvera. Dans un monde utopique où tout est bon, il est implicite que vous suivez toujours la méthodologie.
245 | (Je tiens à noter que beaucoup de gens font vraiment tout bien et qu'il est alors très agréable de soutenir un projet entièrement écrit en accord avec cette approche.)
246 | 
247 | Mais notre composant écrit pour le moment n'est pas flexible. Pour lui donner la possibilité d'accepter plusieurs modificateurs, c'est à dire comme paramètre `mods` est une matrice de modificateurs, et pas seulement une chaîne, nous devons déjà retirer la ligne d'ajout de modificateurs dans le composant aux `computed properties` et gérer le cas s'il s'agit d'une matrice et s'il s'agit d'une chaîne. En fait, cela se fait très facilement:
248 | 
249 | `Pseudocode`
250 | ```js
251 | // Si c'est une matrice (array)
252 | if (mods is Array) {
253 |   return mods.map(item => 'good' + '_' + item)
254 | } else {
255 |   return `good_${mods}`
256 | }
257 | ```
258 | 
259 | Cependant, nous devons également tester l'existence d'une classe de base et la possibilité de passer un préfixe différent (beaucoup utilisent pour désigner les modificateurs `-` plutôt que `_`).En outre, si votre projet utilise cette approche qu’il avait la possibilité de passer des modificateurs à des blocs de composants de votre projet. Juste pour cela, vous serez bien avec le plugin `vue-mods-names`, ce qui simplifie grandement votre code et supprime toute cette fonctionnalité d'ajout de modificateurs de vos yeux.
260 | 
261 | > Je veux dire que le plugin est vraiment incroyablement léger et simple, il n'y a rien de compliqué dans le code.Un peu plus que dans l'exemple ci-dessus.
262 | Par conséquent (`Contributions welcome`), la participation au projet est la bienvenue.
263 | Nous l'avons pris pour ouvrir l'accès non pas parce que nous avons fait quelque chose d'ingénieux, mais parce que pour nous dans le "RG - Rossiyskaya Gazeta" cela aide dans le travail quotidien et nous espérons que vous appréciez. Encore une fois, si vous développez selon les méthodologies.
264 | 
265 | ### Que des vue-mods-names utiles
266 | 
267 | **Avantages**
268 | 1. En utilisant le plugin, chaque composant de votre application obtient la possibilité d'accepter les modificateurs dans props: mods. (Vous n'avez plus besoin d'ajouter ce comportement à des composants individuels).
269 | 2. Votre code devient plus petit. Tout le travail avec des modificateurs est caché dans le plugin.
270 | 3. Dans n'importe quel composant, vous pouvez passer une chaîne de modification ou n'importe quel nombre de modificateurs dans la matrice.
271 | 4. Configuration de l'utilisation de la classe de base (voir la section `"utilisation avancée"`)
272 | 
273 | ## Installation
274 | 
275 | Tout est comme d'habitude
276 | 
277 | ```js
278 | npm i vue-mods-names -D
279 | ```
280 | 
281 | 
282 | ## Utilisation
283 | 
284 | ```js
285 | import VueModsNames from 'vue-mods-names'
286 | 
287 | Vue.use(VueModsNames)
288 | ```
289 | 
290 | Si vous voulez changer le préfixe (par défaut: `_`), passez le simplement à l'option de plugin:
291 | 
292 | ```js
293 | import VueModsNames from 'vue-mods-names'
294 | 
295 | Vue.use(VueModsNames, { prefix: '-' })
296 | ```
297 | 
298 | Après cela, tout composant de votre application est prêt à utiliser des modificateurs si vous spécifiez le nom de la classe de base en tant qu'argument de la directive. Les exemples sont ci-dessous.
299 | 
300 | Nous déclarons le comportement en ajoutant une directive spéciale `v-mods-names` dans le template. `good` est le nom de la classe de base à laquelle les modificateurs seront attachés.
301 | 
302 | `Good.vue`
303 | ```html
304 | <!-- Modèle du composant 'Bon', qui sera connecté dans les endroits différents: -->
305 | <div v-mods-names:good>bien</div>
306 | ```
307 | 
308 | Maintenant, nous pouvons utiliser un composant avec les modificateurs différents:
309 | 
310 | `Page d'accueil`
311 | ```html
312 | <Good mods="main" />
313 | ```
314 | 
315 | Par conséquent, vous obtenez un composant sur la page principale qui aura les classes de sortie suivantes:
316 | 
317 | ```html
318 | <div class="good good_main">bien</div>
319 | ```
320 | 
321 | > Toutes les modifications du composant sont spécifiées dans les styles du composant lui-même. Par exemple:
322 | 
323 | ```css
324 | .good {}
325 | 
326 | .good_main {}
327 | 
328 | .good_big {}
329 | ```
330 | 
331 | Maintenant, lorsque vous utilisez votre composant de cette façon:
332 | 
333 | ```html
334 | <Good :mods="['main', 'big']" />
335 | ```
336 | 
337 | À la sortie, nous obtenons ceci:
338 | 
339 | ```html
340 | <div class="good good_main good_big">bien</div>
341 | ```
342 | 
343 | ## Utilisation avancée
344 | 
345 | ### no-origin
346 | 
347 | Si vous deviez soudainement utiliser uniquement les noms de classes avec des modificateurs, sans une classe de base, alors le modificateur de la directive `v-mods-names` viendra à votre aide, qui est ajouté après le nom de votre classe de base:
348 | 
349 | `Awesome.vue`
350 | ```html
351 | <!-- Modèle de composant Awesome -->
352 | <div v-mods-names:awesome.no-origin>Шикарно</div>
353 | ```
354 | 
355 | Maintenant, lorsque vous utilisez votre composant de cette façon:
356 | 
357 | ```html
358 | <Awesome :mods="['main', 'big']" />
359 | ```
360 | 
361 | Vous recevrez ceci:
362 | 
363 | 
364 | ```html
365 | <div class="awesome_main awesome_big"></div>
366 | ```
367 | 
368 | > Fonctionne de la même manière pour un modificateur sous la forme d'une chaîne, et pour une matrice de modificateurs
369 | 
370 | Personne ne vous empêche de l'utiliser de cette manière:
371 | 
372 | ```html
373 | <Awesome class="awesome" mods="big" />
374 | ```
375 | 
376 | À la fin , vous obtiendrez également votre classe de base spécifiée dans le modèle de composant lui-même et la classe générée avec le modificateur
377 | 
378 | ```html
379 | <div class="awesome awesome_big"></div>
380 | ```
381 | 
382 | > Cependant, cela n'a pas beaucoup de sens et il est beaucoup plus facile d'écrire une directive avec la classe de base dans le template comme dans l'exemple ci-dessus: `v-mods-names: awesome`
383 | 
384 | [KamilOcean](https://twitter.com/kamil_ocean)
385 | 


--------------------------------------------------------------------------------