diff --git a/dist/vue-bem-cn.es6.js b/dist/vue-bem-cn.es6.js index f01ac6b..8ecc616 100644 --- a/dist/vue-bem-cn.es6.js +++ b/dist/vue-bem-cn.es6.js @@ -39,15 +39,16 @@ var _extends = Object.assign || function (target) { }; var isString = function isString(val) { - return val && typeof val === 'string' && val.length > 0; + return val && typeof val === 'string'; }; var isPObject = function isPObject(val) { - return val && (typeof val === 'undefined' ? 'undefined' : _typeof(val)) === 'object' && val !== null && val.constructor === Object && Object.keys(val).length > 0; + return !!(val && (typeof val === 'undefined' ? 'undefined' : _typeof(val)) === 'object' && val.constructor === Object && Object.keys(val).length); }; var hyphenate = function hyphenate(str) { return str.replace(/\B([A-Z])/g, '-$1').toLowerCase(); }; + // eslint-disable-next-line no-restricted-globals var isNumber = function isNumber(val) { return typeof val === 'number' && isFinite(val); @@ -55,58 +56,39 @@ var isNumber = function isNumber(val) { /** * Create String from BEM entitys - * @param {Object} entitys BEM entitys - * @param {String} entitys.block Block - * @param {String} [entitys.el] Element - * @param {Object} [entitys.mods] Modifiers - * @param {String} [entitys.mixin] Mixin + * @param {Object} entities BEM entitys + * @param {String} entities.block Block + * @param {String} [entities.el] Element + * @param {Object} [entities.mods] Modifiers + * @param {String} [entities.mixin] Mixin * @param {Object} delimiters Delimiters for BEM entitys * @returns {String} */ -function bemNames(entitys, delimiters) { - var resultString = ''; - var names = entitys || { mods: {}, mixin: '' }; - var delims = _extends({ - ns: '', - el: '__', - mod: '--', - modVal: '-' - }, delimiters); - var mixin = isString(names.mixin) ? ' ' + names.mixin : ''; - - if (!names.block) return ''; - resultString = delims.ns ? delims.ns + names.block : names.block; - - if (names.el) resultString += delims.el + names.el; - - if (isPObject(names.mods)) { - resultString += Object.keys(names.mods).reduce(function (prev, name) { - var val = names.mods[name]; +function bemNames(entities, delimiters) { + var resultString = entities.block; + + if (entities.el) resultString += delimiters.el + entities.el; + + if (entities.mods) { + resultString += Object.keys(entities.mods).reduce(function (prev, name) { + var val = entities.mods[name]; /* eslint-disable no-param-reassign */ if (val === true) { - prev += ' ' + resultString + delims.mod + name; + prev += ' ' + resultString + delimiters.mod + name; } else if (isString(val) || isNumber(val)) { - prev += ' ' + resultString + delims.mod + name + delims.modVal + names.mods[name]; + prev += ' ' + resultString + delimiters.mod + name + delimiters.modVal + val; } /* eslint-enable no-param-reassign */ return prev; }, ''); } - return resultString + mixin; -} -function bemCn(block) { - var opt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { delimiters: {} }; - - var options = _extends({ - hyphenate: false - }, opt, { - delimiters: _extends({}, opt.delimiters) - }); - if (!isString(block)) return ''; + return resultString + (entities.mixin ? ' ' + entities.mixin : ''); +} - return function entitys(elem, mods, mix) { +function bemCn(block, options) { + return function entities(elem, mods, mix) { var resultObj = { block: block, el: '', @@ -114,7 +96,15 @@ function bemCn(block) { mixin: '' }; - if (isPObject(mods)) resultObj.mods = mods; + if (!elem && !mods && !mix) { + return block; + } + + if (isPObject(mods)) { + resultObj.mods = mods; + } else if (isString(mods)) { + resultObj.mixin += mods; + } if (isString(elem)) { resultObj.el = elem; @@ -122,45 +112,46 @@ function bemCn(block) { resultObj.mods = elem; } - if (isString(mods)) { - resultObj.mixin = resultObj.mixin.length > 0 ? resultObj.mixin + ' ' + mods : resultObj.mixin + mods; - } if (isString(mix)) { - resultObj.mixin = resultObj.mixin.length > 0 ? resultObj.mixin + ' ' + mix : resultObj.mixin + mix; + resultObj.mixin += resultObj.mixin ? ' ' + mix : mix; } - if (options.hyphenate) { - return hyphenate(bemNames(resultObj, options.delimiters)); - } + var bemClasses = bemNames(resultObj, options.delimiters); - return bemNames(resultObj, options.delimiters); + return options.hyphenate ? hyphenate(bemClasses) : bemClasses; }; } +var DEFAULT_DELIMITERS = { + ns: '', + el: '__', + mod: '--', + modVal: '-' +}; + +var DEFAULT_CONFIG = { + hyphenate: false, + methodName: 'b' +}; + var vuePlugin = { install: function install(Vue) { var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : { delimiters: {} }; - var cfg = _extends({ - hyphenate: false, - methodName: 'b' - }, config, { - delimiters: _extends({ - ns: '', - el: '__', - mod: '--', - modVal: '-' - }, config.delimiters) + var cfg = _extends({}, DEFAULT_CONFIG, config, { + delimiters: _extends({}, DEFAULT_DELIMITERS, config.delimiters) }); Vue.mixin({ created: function created() { var block = this.$options.block || this.$options.name; + var nsBlock = cfg.delimiters.ns + block; var generator = null; - if (typeof block !== 'string') return; + if (!isString(block)) return; + + generator = bemCn(cfg.hyphenate ? hyphenate(nsBlock) : nsBlock, cfg); - generator = bemCn(block, cfg); this[cfg.methodName] = function () { return generator.apply(undefined, arguments); }; diff --git a/dist/vue-bem-cn.es6.js.map b/dist/vue-bem-cn.es6.js.map index 9a7ac86..c8ac67a 100644 --- a/dist/vue-bem-cn.es6.js.map +++ b/dist/vue-bem-cn.es6.js.map @@ -1 +1 @@ -{"version":3,"file":"vue-bem-cn.es6.js","sources":["../src/utils.js","../src/bem-cn/bem-names.js","../src/bem-cn/index.js","../src/vue-plugin.js"],"sourcesContent":["export const isString = val => val && typeof val === 'string' && val.length > 0;\nexport const isPObject = val =>\n val &&\n typeof val === 'object' &&\n val !== null &&\n val.constructor === Object &&\n Object.keys(val).length > 0;\n\nexport const hyphenate = str => str.replace(/\\B([A-Z])/g, '-$1').toLowerCase();\n// eslint-disable-next-line no-restricted-globals\nexport const isNumber = val => typeof val === 'number' && isFinite(val);\n","import { isPObject, isString, isNumber } from '../utils';\n\n/**\n * Create String from BEM entitys\n * @param {Object} entitys BEM entitys\n * @param {String} entitys.block Block\n * @param {String} [entitys.el] Element\n * @param {Object} [entitys.mods] Modifiers\n * @param {String} [entitys.mixin] Mixin\n * @param {Object} delimiters Delimiters for BEM entitys\n * @returns {String}\n */\nexport default function bemNames(entitys, delimiters) {\n let resultString = '';\n const names = entitys || { mods: {}, mixin: '' };\n const delims = {\n ns: '',\n el: '__',\n mod: '--',\n modVal: '-',\n ...delimiters,\n };\n const mixin = isString(names.mixin) ? ' ' + names.mixin : '';\n\n if (!names.block) return '';\n resultString = delims.ns ? delims.ns + names.block : names.block;\n\n if (names.el) resultString += delims.el + names.el;\n\n if (isPObject(names.mods)) {\n resultString += Object.keys(names.mods).reduce((prev, name) => {\n const val = names.mods[name];\n /* eslint-disable no-param-reassign */\n if (val === true) {\n prev += ' ' + resultString + delims.mod + name;\n } else if (isString(val) || isNumber(val)) {\n prev += ' ' + resultString + delims.mod + name + delims.modVal + names.mods[name];\n }\n /* eslint-enable no-param-reassign */\n\n return prev;\n }, '');\n }\n return resultString + mixin;\n}\n","import { isString, isPObject, hyphenate } from '../utils';\nimport bemNames from './bem-names';\n\nexport default function bemCn(block, opt = { delimiters: {} }) {\n const options = {\n hyphenate: false,\n ...opt,\n delimiters: {\n ...opt.delimiters,\n },\n };\n if (!isString(block)) return '';\n\n return function entitys(elem, mods, mix) {\n const resultObj = {\n block,\n el: '',\n mods: {},\n mixin: '',\n };\n\n if (isPObject(mods)) resultObj.mods = mods;\n\n if (isString(elem)) {\n resultObj.el = elem;\n } else if (isPObject(elem)) {\n resultObj.mods = elem;\n }\n\n if (isString(mods)) {\n resultObj.mixin =\n resultObj.mixin.length > 0 ? `${resultObj.mixin} ${mods}` : resultObj.mixin + mods;\n }\n if (isString(mix)) {\n resultObj.mixin =\n resultObj.mixin.length > 0 ? `${resultObj.mixin} ${mix}` : resultObj.mixin + mix;\n }\n\n if (options.hyphenate) {\n return hyphenate(bemNames(resultObj, options.delimiters));\n }\n\n return bemNames(resultObj, options.delimiters);\n };\n}\n","import bemCn from './bem-cn/index';\n\nexport default {\n install(Vue, config = { delimiters: {} }) {\n const cfg = {\n hyphenate: false,\n methodName: 'b',\n ...config,\n delimiters: {\n ns: '',\n el: '__',\n mod: '--',\n modVal: '-',\n ...config.delimiters,\n },\n };\n\n Vue.mixin({\n created() {\n const block = this.$options.block || this.$options.name;\n let generator = null;\n\n if (typeof block !== 'string') return;\n\n generator = bemCn(block, cfg);\n this[cfg.methodName] = (...args) => generator(...args);\n },\n });\n },\n};\n"],"names":["isString","val","length","isPObject","constructor","Object","keys","hyphenate","str","replace","toLowerCase","isNumber","isFinite","bemNames","entitys","delimiters","resultString","names","mods","mixin","delims","block","ns","el","reduce","prev","name","mod","modVal","bemCn","opt","options","elem","mix","resultObj","Vue","config","cfg","$options","generator","methodName"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"vue-bem-cn.es6.js","sources":["../src/utils.js","../src/bem-cn/bem-names.js","../src/bem-cn/index.js","../src/globals.js","../src/vue-plugin.js"],"sourcesContent":["export const isString = val => val && typeof val === 'string';\nexport const isPObject = val =>\n !!(val && typeof val === 'object' && val.constructor === Object && Object.keys(val).length);\n\nexport const hyphenate = str => str.replace(/\\B([A-Z])/g, '-$1').toLowerCase();\n\n// eslint-disable-next-line no-restricted-globals\nexport const isNumber = val => typeof val === 'number' && isFinite(val);\n","import { isString, isNumber } from '../utils';\n\n/**\n * Create String from BEM entitys\n * @param {Object} entities BEM entitys\n * @param {String} entities.block Block\n * @param {String} [entities.el] Element\n * @param {Object} [entities.mods] Modifiers\n * @param {String} [entities.mixin] Mixin\n * @param {Object} delimiters Delimiters for BEM entitys\n * @returns {String}\n */\nexport default function bemNames(entities, delimiters) {\n let resultString = entities.block;\n\n if (entities.el) resultString += delimiters.el + entities.el;\n\n if (entities.mods) {\n resultString += Object.keys(entities.mods).reduce((prev, name) => {\n const val = entities.mods[name];\n /* eslint-disable no-param-reassign */\n if (val === true) {\n prev += ' ' + resultString + delimiters.mod + name;\n } else if (isString(val) || isNumber(val)) {\n prev += ' ' + resultString + delimiters.mod + name + delimiters.modVal + val;\n }\n /* eslint-enable no-param-reassign */\n\n return prev;\n }, '');\n }\n\n return resultString + (entities.mixin ? ` ${entities.mixin}` : '');\n}\n","import { isString, isPObject, hyphenate } from '../utils';\nimport bemNames from './bem-names';\n\nexport default function bemCn(block, options) {\n return function entities(elem, mods, mix) {\n const resultObj = {\n block,\n el: '',\n mods: {},\n mixin: '',\n };\n\n if (!elem && !mods && !mix) {\n return block;\n }\n\n if (isPObject(mods)) {\n resultObj.mods = mods;\n } else if (isString(mods)) {\n resultObj.mixin += mods;\n }\n\n if (isString(elem)) {\n resultObj.el = elem;\n } else if (isPObject(elem)) {\n resultObj.mods = elem;\n }\n\n if (isString(mix)) {\n resultObj.mixin += resultObj.mixin ? ` ${mix}` : mix;\n }\n\n const bemClasses = bemNames(resultObj, options.delimiters);\n\n return options.hyphenate\n ? hyphenate(bemClasses)\n : bemClasses;\n };\n}\n","export const DEFAULT_DELIMITERS = {\n ns: '',\n el: '__',\n mod: '--',\n modVal: '-',\n};\n\nexport const DEFAULT_CONFIG = {\n hyphenate: false,\n methodName: 'b',\n};\n","import bemCn from './bem-cn/index';\nimport { DEFAULT_DELIMITERS, DEFAULT_CONFIG } from './globals';\nimport {hyphenate, isString} from './utils';\n\nexport default {\n install(Vue, config = { delimiters: {} }) {\n const cfg = {\n ...DEFAULT_CONFIG,\n ...config,\n delimiters: {\n ...DEFAULT_DELIMITERS,\n ...config.delimiters,\n },\n };\n\n Vue.mixin({\n created() {\n const block = this.$options.block || this.$options.name;\n const nsBlock = cfg.delimiters.ns + block;\n let generator = null;\n\n if (!isString(block)) return;\n\n generator = bemCn(cfg.hyphenate ? hyphenate(nsBlock) : nsBlock, cfg);\n\n this[cfg.methodName] = (...args) => generator(...args);\n },\n });\n },\n};\n"],"names":["isString","val","isPObject","constructor","Object","keys","length","hyphenate","str","replace","toLowerCase","isNumber","isFinite","bemNames","entities","delimiters","resultString","block","el","mods","reduce","prev","name","mod","modVal","mixin","bemCn","options","elem","mix","resultObj","bemClasses","DEFAULT_DELIMITERS","DEFAULT_CONFIG","Vue","config","cfg","$options","nsBlock","ns","generator","methodName"],"mappings":"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"} \ No newline at end of file diff --git a/dist/vue-bem-cn.umd.min.js b/dist/vue-bem-cn.umd.min.js index b9c78de..d91334b 100644 --- a/dist/vue-bem-cn.umd.min.js +++ b/dist/vue-bem-cn.umd.min.js @@ -1,2 +1,2 @@ -!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):e.vueBemCn=n()}(this,function(){"use strict";var e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n=Object.assign||function(e){for(var n=1;n0},o=function(n){return n&&"object"===(void 0===n?"undefined":e(n))&&null!==n&&n.constructor===Object&&Object.keys(n).length>0},i=function(e){return e.replace(/\B([A-Z])/g,"-$1").toLowerCase()},r=function(e){return"number"==typeof e&&isFinite(e)};function m(e,i){var m="",l=e||{mods:{},mixin:""},s=n({ns:"",el:"__",mod:"--",modVal:"-"},i),u=t(l.mixin)?" "+l.mixin:"";return l.block?(m=s.ns?s.ns+l.block:l.block,l.el&&(m+=s.el+l.el),o(l.mods)&&(m+=Object.keys(l.mods).reduce(function(e,n){var o=l.mods[n];return!0===o?e+=" "+m+s.mod+n:(t(o)||r(o))&&(e+=" "+m+s.mod+n+s.modVal+l.mods[n]),e},"")),m+u):""}return{install:function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{delimiters:{}},l=n({hyphenate:!1,methodName:"b"},r,{delimiters:n({ns:"",el:"__",mod:"--",modVal:"-"},r.delimiters)});e.mixin({created:function(){var e=this.$options.block||this.$options.name,r=null;"string"==typeof e&&(r=function(e){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{delimiters:{}},l=n({hyphenate:!1},r,{delimiters:n({},r.delimiters)});return t(e)?function(n,r,s){var u={block:e,el:"",mods:{},mixin:""};return o(r)&&(u.mods=r),t(n)?u.el=n:o(n)&&(u.mods=n),t(r)&&(u.mixin=u.mixin.length>0?u.mixin+" "+r:u.mixin+r),t(s)&&(u.mixin=u.mixin.length>0?u.mixin+" "+s:u.mixin+s),l.hyphenate?i(m(u,l.delimiters)):m(u,l.delimiters)}:""}(e,l),this[l.methodName]=function(){return r.apply(void 0,arguments)})}})}}}); +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):e.vueBemCn=t()}(this,function(){"use strict";var t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n=Object.assign||function(e){for(var t=1;t val && typeof val === 'string' && val.length > 0;\nexport const isPObject = val =>\n val &&\n typeof val === 'object' &&\n val !== null &&\n val.constructor === Object &&\n Object.keys(val).length > 0;\n\nexport const hyphenate = str => str.replace(/\\B([A-Z])/g, '-$1').toLowerCase();\n// eslint-disable-next-line no-restricted-globals\nexport const isNumber = val => typeof val === 'number' && isFinite(val);\n","import { isPObject, isString, isNumber } from '../utils';\n\n/**\n * Create String from BEM entitys\n * @param {Object} entitys BEM entitys\n * @param {String} entitys.block Block\n * @param {String} [entitys.el] Element\n * @param {Object} [entitys.mods] Modifiers\n * @param {String} [entitys.mixin] Mixin\n * @param {Object} delimiters Delimiters for BEM entitys\n * @returns {String}\n */\nexport default function bemNames(entitys, delimiters) {\n let resultString = '';\n const names = entitys || { mods: {}, mixin: '' };\n const delims = {\n ns: '',\n el: '__',\n mod: '--',\n modVal: '-',\n ...delimiters,\n };\n const mixin = isString(names.mixin) ? ' ' + names.mixin : '';\n\n if (!names.block) return '';\n resultString = delims.ns ? delims.ns + names.block : names.block;\n\n if (names.el) resultString += delims.el + names.el;\n\n if (isPObject(names.mods)) {\n resultString += Object.keys(names.mods).reduce((prev, name) => {\n const val = names.mods[name];\n /* eslint-disable no-param-reassign */\n if (val === true) {\n prev += ' ' + resultString + delims.mod + name;\n } else if (isString(val) || isNumber(val)) {\n prev += ' ' + resultString + delims.mod + name + delims.modVal + names.mods[name];\n }\n /* eslint-enable no-param-reassign */\n\n return prev;\n }, '');\n }\n return resultString + mixin;\n}\n","import bemCn from './bem-cn/index';\n\nexport default {\n install(Vue, config = { delimiters: {} }) {\n const cfg = {\n hyphenate: false,\n methodName: 'b',\n ...config,\n delimiters: {\n ns: '',\n el: '__',\n mod: '--',\n modVal: '-',\n ...config.delimiters,\n },\n };\n\n Vue.mixin({\n created() {\n const block = this.$options.block || this.$options.name;\n let generator = null;\n\n if (typeof block !== 'string') return;\n\n generator = bemCn(block, cfg);\n this[cfg.methodName] = (...args) => generator(...args);\n },\n });\n },\n};\n","import { isString, isPObject, hyphenate } from '../utils';\nimport bemNames from './bem-names';\n\nexport default function bemCn(block, opt = { delimiters: {} }) {\n const options = {\n hyphenate: false,\n ...opt,\n delimiters: {\n ...opt.delimiters,\n },\n };\n if (!isString(block)) return '';\n\n return function entitys(elem, mods, mix) {\n const resultObj = {\n block,\n el: '',\n mods: {},\n mixin: '',\n };\n\n if (isPObject(mods)) resultObj.mods = mods;\n\n if (isString(elem)) {\n resultObj.el = elem;\n } else if (isPObject(elem)) {\n resultObj.mods = elem;\n }\n\n if (isString(mods)) {\n resultObj.mixin =\n resultObj.mixin.length > 0 ? `${resultObj.mixin} ${mods}` : resultObj.mixin + mods;\n }\n if (isString(mix)) {\n resultObj.mixin =\n resultObj.mixin.length > 0 ? `${resultObj.mixin} ${mix}` : resultObj.mixin + mix;\n }\n\n if (options.hyphenate) {\n return hyphenate(bemNames(resultObj, options.delimiters));\n }\n\n return bemNames(resultObj, options.delimiters);\n };\n}\n"],"names":["isString","val","length","isPObject","constructor","Object","keys","hyphenate","str","replace","toLowerCase","isNumber","isFinite","bemNames","entitys","delimiters","resultString","names","mods","mixin","delims","block","ns","el","reduce","prev","name","mod","modVal","Vue","config","cfg","this","$options","generator","opt","options","elem","mix","resultObj","bemCn","methodName"],"mappings":"wiBAAaA,EAAW,mBAAOC,GAAsB,iBAARA,GAAoBA,EAAIC,OAAS,GACjEC,EAAY,mBACvBF,GACe,qBAARA,gBAAAA,KACC,OAARA,GACAA,EAAIG,cAAgBC,QACpBA,OAAOC,KAAKL,GAAKC,OAAS,GAEfK,EAAY,mBAAOC,EAAIC,QAAQ,aAAc,OAAOC,eAEpDC,EAAW,kBAAsB,iBAARV,GAAoBW,SAASX,ICEnE,SAAwBY,EAASC,EAASC,OACpCC,EAAe,GACbC,EAAQH,IAAaI,QAAUC,MAAO,IACtCC,QACA,MACA,SACC,YACG,KACLL,GAECI,EAAQnB,EAASiB,EAAME,OAAS,IAAMF,EAAME,MAAQ,UAErDF,EAAMI,SACID,EAAOE,GAAKF,EAAOE,GAAKL,EAAMI,MAAQJ,EAAMI,MAEvDJ,EAAMM,KAAIP,GAAgBI,EAAOG,GAAKN,EAAMM,IAE5CpB,EAAUc,EAAMC,WACFb,OAAOC,KAAKW,EAAMC,MAAMM,OAAO,SAACC,EAAMC,OAC9CzB,EAAMgB,EAAMC,KAAKQ,UAEX,IAARzB,KACM,IAAMe,EAAeI,EAAOO,IAAMD,GACjC1B,EAASC,IAAQU,EAASV,SAC3B,IAAMe,EAAeI,EAAOO,IAAMD,EAAON,EAAOQ,OAASX,EAAMC,KAAKQ,IAIvED,GACN,KAEET,EAAeG,GAnBG,2BCrBjBU,OAAKC,0DAAWf,eAChBgB,gBACO,aACC,KACTD,oBAEG,MACA,SACC,YACG,KACLA,EAAOf,gBAIVI,8BAEME,EAAQW,KAAKC,SAASZ,OAASW,KAAKC,SAASP,KAC/CQ,EAAY,KAEK,iBAAVb,MCnBJ,SAAeA,OAAOc,0DAAQpB,eACrCqB,gBACO,GACRD,mBAEEA,EAAIpB,qBAGNf,EAASqB,GAEP,SAAiBgB,EAAMnB,EAAMoB,OAC5BC,cAEA,iBAEG,WAGLpC,EAAUe,KAAOqB,EAAUrB,KAAOA,GAElClB,EAASqC,KACDd,GAAKc,EACNlC,EAAUkC,OACTnB,KAAOmB,GAGfrC,EAASkB,OACDC,MACRoB,EAAUpB,MAAMjB,OAAS,EAAOqC,EAAUpB,UAASD,EAASqB,EAAUpB,MAAQD,GAE9ElB,EAASsC,OACDnB,MACRoB,EAAUpB,MAAMjB,OAAS,EAAOqC,EAAUpB,UAASmB,EAAQC,EAAUpB,MAAQmB,GAG7EF,EAAQ7B,UACHA,EAAUM,EAAS0B,EAAWH,EAAQrB,aAGxCF,EAAS0B,EAAWH,EAAQrB,aA/BR,GDaXyB,CAAMnB,EAAOU,QACpBA,EAAIU,YAAc,kBAAaP"} \ No newline at end of file +{"version":3,"file":"vue-bem-cn.umd.min.js","sources":["../src/utils.js","../src/bem-cn/index.js","../src/bem-cn/bem-names.js","../src/globals.js","../src/vue-plugin.js"],"sourcesContent":["export const isString = val => val && typeof val === 'string';\nexport const isPObject = val =>\n !!(val && typeof val === 'object' && val.constructor === Object && Object.keys(val).length);\n\nexport const hyphenate = str => str.replace(/\\B([A-Z])/g, '-$1').toLowerCase();\n\n// eslint-disable-next-line no-restricted-globals\nexport const isNumber = val => typeof val === 'number' && isFinite(val);\n","import { isString, isPObject, hyphenate } from '../utils';\nimport bemNames from './bem-names';\n\nexport default function bemCn(block, options) {\n return function entities(elem, mods, mix) {\n const resultObj = {\n block,\n el: '',\n mods: {},\n mixin: '',\n };\n\n if (!elem && !mods && !mix) {\n return block;\n }\n\n if (isPObject(mods)) {\n resultObj.mods = mods;\n } else if (isString(mods)) {\n resultObj.mixin += mods;\n }\n\n if (isString(elem)) {\n resultObj.el = elem;\n } else if (isPObject(elem)) {\n resultObj.mods = elem;\n }\n\n if (isString(mix)) {\n resultObj.mixin += resultObj.mixin ? ` ${mix}` : mix;\n }\n\n const bemClasses = bemNames(resultObj, options.delimiters);\n\n return options.hyphenate\n ? hyphenate(bemClasses)\n : bemClasses;\n };\n}\n","import { isString, isNumber } from '../utils';\n\n/**\n * Create String from BEM entitys\n * @param {Object} entities BEM entitys\n * @param {String} entities.block Block\n * @param {String} [entities.el] Element\n * @param {Object} [entities.mods] Modifiers\n * @param {String} [entities.mixin] Mixin\n * @param {Object} delimiters Delimiters for BEM entitys\n * @returns {String}\n */\nexport default function bemNames(entities, delimiters) {\n let resultString = entities.block;\n\n if (entities.el) resultString += delimiters.el + entities.el;\n\n if (entities.mods) {\n resultString += Object.keys(entities.mods).reduce((prev, name) => {\n const val = entities.mods[name];\n /* eslint-disable no-param-reassign */\n if (val === true) {\n prev += ' ' + resultString + delimiters.mod + name;\n } else if (isString(val) || isNumber(val)) {\n prev += ' ' + resultString + delimiters.mod + name + delimiters.modVal + val;\n }\n /* eslint-enable no-param-reassign */\n\n return prev;\n }, '');\n }\n\n return resultString + (entities.mixin ? ` ${entities.mixin}` : '');\n}\n","export const DEFAULT_DELIMITERS = {\n ns: '',\n el: '__',\n mod: '--',\n modVal: '-',\n};\n\nexport const DEFAULT_CONFIG = {\n hyphenate: false,\n methodName: 'b',\n};\n","import bemCn from './bem-cn/index';\nimport { DEFAULT_DELIMITERS, DEFAULT_CONFIG } from './globals';\nimport {hyphenate, isString} from './utils';\n\nexport default {\n install(Vue, config = { delimiters: {} }) {\n const cfg = {\n ...DEFAULT_CONFIG,\n ...config,\n delimiters: {\n ...DEFAULT_DELIMITERS,\n ...config.delimiters,\n },\n };\n\n Vue.mixin({\n created() {\n const block = this.$options.block || this.$options.name;\n const nsBlock = cfg.delimiters.ns + block;\n let generator = null;\n\n if (!isString(block)) return;\n\n generator = bemCn(cfg.hyphenate ? hyphenate(nsBlock) : nsBlock, cfg);\n\n this[cfg.methodName] = (...args) => generator(...args);\n },\n });\n },\n};\n"],"names":["isString","val","isPObject","constructor","Object","keys","length","hyphenate","str","replace","toLowerCase","isNumber","isFinite","bemCn","block","options","elem","mods","mix","resultObj","mixin","el","entities","delimiters","resultString","bemClasses","reduce","prev","name","mod","modVal","DEFAULT_DELIMITERS","DEFAULT_CONFIG","Vue","config","cfg","this","$options","nsBlock","ns","generator","methodName"],"mappings":"wiBAAaA,EAAW,mBAAOC,GAAsB,iBAARA,GAChCC,EAAY,qBACpBD,GAAsB,qBAARA,gBAAAA,KAAoBA,EAAIE,cAAgBC,SAAUA,OAAOC,KAAKJ,GAAKK,SAEzEC,EAAY,mBAAOC,EAAIC,QAAQ,aAAc,OAAOC,eAGpDC,EAAW,kBAAsB,iBAARV,GAAoBW,SAASX,aCJ3CY,EAAMC,EAAOC,UAC5B,SAAkBC,EAAMC,EAAMC,OAC7BC,EAAY,YAEZ,QACE,SACC,QAGJH,IAASC,IAASC,SACdJ,EAGLZ,EAAUe,KACFA,KAAOA,EACRjB,EAASiB,OACRG,OAASH,GAGjBjB,EAASgB,KACDK,GAAKL,EACNd,EAAUc,OACTC,KAAOD,GAGfhB,EAASkB,OACDE,OAASD,EAAUC,UAAYF,EAAQA,OCjBtBI,EAAUC,EACrCC,EDmBIC,GCpBuBH,EDoBDH,ECpBWI,EDoBAR,EAAQQ,WCnB7CC,EAAeF,EAASR,MAExBQ,EAASD,KAAIG,GAAgBD,EAAWF,GAAKC,EAASD,IAEtDC,EAASL,UACKb,OAAOC,KAAKiB,EAASL,MAAMS,OAAO,SAACC,EAAMC,OACjD3B,EAAMqB,EAASL,KAAKW,UAEd,IAAR3B,KACM,IAAMuB,EAAeD,EAAWM,IAAMD,GACrC5B,EAASC,IAAQU,EAASV,SAC3B,IAAMuB,EAAeD,EAAWM,IAAMD,EAAOL,EAAWO,OAAS7B,GAIpE0B,GACN,KAGEH,GAAgBF,EAASF,UAAYE,EAASF,MAAU,YDEtDL,EAAQR,UACXA,EAAUkB,GACVA,OEpCKM,EAAqB,IAC5B,MACA,SACC,YACG,KAGGC,EAAiB,YACjB,aACC,WCLC,kBACLC,OAAKC,yDAAS,CAAEX,WAAY,IAC5BY,OACDH,EACAE,mBAEEH,EACAG,EAAOX,gBAIVH,MAAM,wBAEAN,EAAQsB,KAAKC,SAASvB,OAASsB,KAAKC,SAAST,KAC7CU,EAAUH,EAAIZ,WAAWgB,GAAKzB,EAChC0B,EAAY,KAEXxC,EAASc,OAEFD,EAAMsB,EAAI5B,UAAYA,EAAU+B,GAAWA,EAASH,QAE3DA,EAAIM,YAAc,kBAAaD"} \ No newline at end of file diff --git a/src/bem-cn/bem-names.js b/src/bem-cn/bem-names.js index c3ea367..8680a68 100644 --- a/src/bem-cn/bem-names.js +++ b/src/bem-cn/bem-names.js @@ -1,45 +1,34 @@ -import { isPObject, isString, isNumber } from '../utils'; +import { isString, isNumber } from '../utils'; /** * Create String from BEM entitys - * @param {Object} entitys BEM entitys - * @param {String} entitys.block Block - * @param {String} [entitys.el] Element - * @param {Object} [entitys.mods] Modifiers - * @param {String} [entitys.mixin] Mixin + * @param {Object} entities BEM entitys + * @param {String} entities.block Block + * @param {String} [entities.el] Element + * @param {Object} [entities.mods] Modifiers + * @param {String} [entities.mixin] Mixin * @param {Object} delimiters Delimiters for BEM entitys * @returns {String} */ -export default function bemNames(entitys, delimiters) { - let resultString = ''; - const names = entitys || { mods: {}, mixin: '' }; - const delims = { - ns: '', - el: '__', - mod: '--', - modVal: '-', - ...delimiters, - }; - const mixin = isString(names.mixin) ? ' ' + names.mixin : ''; +export default function bemNames(entities, delimiters) { + let resultString = entities.block; - if (!names.block) return ''; - resultString = delims.ns ? delims.ns + names.block : names.block; + if (entities.el) resultString += delimiters.el + entities.el; - if (names.el) resultString += delims.el + names.el; - - if (isPObject(names.mods)) { - resultString += Object.keys(names.mods).reduce((prev, name) => { - const val = names.mods[name]; + if (entities.mods) { + resultString += Object.keys(entities.mods).reduce((prev, name) => { + const val = entities.mods[name]; /* eslint-disable no-param-reassign */ if (val === true) { - prev += ' ' + resultString + delims.mod + name; + prev += ' ' + resultString + delimiters.mod + name; } else if (isString(val) || isNumber(val)) { - prev += ' ' + resultString + delims.mod + name + delims.modVal + names.mods[name]; + prev += ' ' + resultString + delimiters.mod + name + delimiters.modVal + val; } /* eslint-enable no-param-reassign */ return prev; }, ''); } - return resultString + mixin; + + return resultString + (entities.mixin ? ` ${entities.mixin}` : ''); } diff --git a/src/bem-cn/index.js b/src/bem-cn/index.js index 6c9faa9..24a0e0f 100644 --- a/src/bem-cn/index.js +++ b/src/bem-cn/index.js @@ -1,17 +1,8 @@ import { isString, isPObject, hyphenate } from '../utils'; import bemNames from './bem-names'; -export default function bemCn(block, opt = { delimiters: {} }) { - const options = { - hyphenate: false, - ...opt, - delimiters: { - ...opt.delimiters, - }, - }; - if (!isString(block)) return ''; - - return function entitys(elem, mods, mix) { +export default function bemCn(block, options) { + return function entities(elem, mods, mix) { const resultObj = { block, el: '', @@ -19,7 +10,15 @@ export default function bemCn(block, opt = { delimiters: {} }) { mixin: '', }; - if (isPObject(mods)) resultObj.mods = mods; + if (!elem && !mods && !mix) { + return block; + } + + if (isPObject(mods)) { + resultObj.mods = mods; + } else if (isString(mods)) { + resultObj.mixin += mods; + } if (isString(elem)) { resultObj.el = elem; @@ -27,19 +26,14 @@ export default function bemCn(block, opt = { delimiters: {} }) { resultObj.mods = elem; } - if (isString(mods)) { - resultObj.mixin = - resultObj.mixin.length > 0 ? `${resultObj.mixin} ${mods}` : resultObj.mixin + mods; - } if (isString(mix)) { - resultObj.mixin = - resultObj.mixin.length > 0 ? `${resultObj.mixin} ${mix}` : resultObj.mixin + mix; + resultObj.mixin += resultObj.mixin ? ` ${mix}` : mix; } - if (options.hyphenate) { - return hyphenate(bemNames(resultObj, options.delimiters)); - } + const bemClasses = bemNames(resultObj, options.delimiters); - return bemNames(resultObj, options.delimiters); + return options.hyphenate + ? hyphenate(bemClasses) + : bemClasses; }; } diff --git a/src/globals.js b/src/globals.js new file mode 100644 index 0000000..8eed05a --- /dev/null +++ b/src/globals.js @@ -0,0 +1,11 @@ +export const DEFAULT_DELIMITERS = { + ns: '', + el: '__', + mod: '--', + modVal: '-', +}; + +export const DEFAULT_CONFIG = { + hyphenate: false, + methodName: 'b', +}; diff --git a/src/utils.js b/src/utils.js index 40d6b32..fedf978 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,11 +1,8 @@ -export const isString = val => val && typeof val === 'string' && val.length > 0; +export const isString = val => val && typeof val === 'string'; export const isPObject = val => - val && - typeof val === 'object' && - val !== null && - val.constructor === Object && - Object.keys(val).length > 0; + !!(val && typeof val === 'object' && val.constructor === Object && Object.keys(val).length); export const hyphenate = str => str.replace(/\B([A-Z])/g, '-$1').toLowerCase(); + // eslint-disable-next-line no-restricted-globals export const isNumber = val => typeof val === 'number' && isFinite(val); diff --git a/src/vue-plugin.js b/src/vue-plugin.js index 7f1e18f..474611f 100644 --- a/src/vue-plugin.js +++ b/src/vue-plugin.js @@ -1,16 +1,14 @@ import bemCn from './bem-cn/index'; +import { DEFAULT_DELIMITERS, DEFAULT_CONFIG } from './globals'; +import { hyphenate, isString } from './utils'; export default { install(Vue, config = { delimiters: {} }) { const cfg = { - hyphenate: false, - methodName: 'b', + ...DEFAULT_CONFIG, ...config, delimiters: { - ns: '', - el: '__', - mod: '--', - modVal: '-', + ...DEFAULT_DELIMITERS, ...config.delimiters, }, }; @@ -18,11 +16,13 @@ export default { Vue.mixin({ created() { const block = this.$options.block || this.$options.name; + const nsBlock = cfg.delimiters.ns + block; let generator = null; - if (typeof block !== 'string') return; + if (!isString(block)) return; + + generator = bemCn(cfg.hyphenate ? hyphenate(nsBlock) : nsBlock, cfg); - generator = bemCn(block, cfg); this[cfg.methodName] = (...args) => generator(...args); }, }); diff --git a/tests/bem-cn.test.js b/tests/bem-cn.test.js index e2e236a..bdd093f 100644 --- a/tests/bem-cn.test.js +++ b/tests/bem-cn.test.js @@ -1,22 +1,30 @@ import { blocks, elements, block, delimiters, delimitersTest, hyphenate } from './testingEntitys'; +import { DEFAULT_DELIMITERS, DEFAULT_CONFIG } from '../src/globals'; import bemCn from '../src/bem-cn/index'; +const config = { + ...DEFAULT_CONFIG, + delimiters: { + ...DEFAULT_DELIMITERS, + }, +}; + describe('Block', () => { - const b = bemCn(block); + const b = bemCn(block, config); Object.keys(blocks).forEach((item) => { test(item, () => { expect(b(blocks[item].mods, blocks[item].mixin)).toBe(item); }); }); - test('block block--mod, when elem = false', () => { + test('BlockName BlockName--mod, when elem = false', () => { const val = { el: false, mods: { mod: 'val' } }; - expect(b(val.el, val.mods)).toBe('block block--mod-val'); + expect(b(val.el, val.mods)).toBe('BlockName BlockName--mod-val'); }); }); describe('Elements', () => { - const b = bemCn(block); + const b = bemCn(block, config); Object.keys(elements).forEach((item) => { test(item, () => { @@ -26,21 +34,22 @@ describe('Elements', () => { }); describe('Delimiters', () => { - const b = bemCn(block, { delimiters }); + const b = bemCn(delimiters.ns + block, { ...config, delimiters }); Object.keys(delimitersTest).forEach((item) => { test(item, () => { - expect(b(delimitersTest[item].el, delimitersTest[item].mods, delimitersTest[item].mixin)).toBe(item); + expect(b(delimitersTest[item].el, delimitersTest[item].mods, delimitersTest[item].mixin)) + .toBe(item); }); }); }); describe('Hyphenate', () => { - const b = bemCn(block, { hyphenate: true }); + const b = bemCn('block-name', { ...config, hyphenate: true }); Object.keys(hyphenate).forEach((item) => { test(item, () => { - expect(b(hyphenate[item].mods)).toBe(item); + expect(b(hyphenate[item].mods || hyphenate[item].el)).toBe(item); }); }); }); diff --git a/tests/bem-names.test.js b/tests/bem-names.test.js index 542e777..2b4fb7d 100644 --- a/tests/bem-names.test.js +++ b/tests/bem-names.test.js @@ -1,10 +1,11 @@ import { blocks, elements, delimiters, delimitersTest } from './testingEntitys'; import bemNames from '../src/bem-cn/bem-names'; +import { DEFAULT_DELIMITERS } from '../src/globals'; describe('Block', () => { Object.keys(blocks).forEach((item) => { test(item, () => { - expect(bemNames(blocks[item])).toBe(item); + expect(bemNames(blocks[item], DEFAULT_DELIMITERS)).toBe(item); }); }); }); @@ -12,7 +13,7 @@ describe('Block', () => { describe('Element', () => { Object.keys(elements).forEach((item) => { test(item, () => { - expect(bemNames(elements[item])).toBe(item); + expect(bemNames(elements[item], DEFAULT_DELIMITERS)).toBe(item); }); }); }); @@ -20,7 +21,7 @@ describe('Element', () => { describe('Delimiters', () => { Object.keys(delimitersTest).forEach((item) => { test(item, () => { - expect(bemNames(delimitersTest[item], delimiters)).toBe(item); + expect(bemNames(delimitersTest[item], { ...DEFAULT_DELIMITERS, ...delimiters })).toBe(item); }); }); }); diff --git a/tests/testingEntitys.js b/tests/testingEntitys.js index f8dbddb..512c363 100644 --- a/tests/testingEntitys.js +++ b/tests/testingEntitys.js @@ -1,6 +1,6 @@ /* eslint-disable quote-props */ -export const block = 'block'; -export const el = 'elem'; +export const block = 'BlockName'; +export const el = 'elementName'; export const delimiters = { ns: 'ns**', el: '++', @@ -9,30 +9,30 @@ export const delimiters = { }; export const blocks = { - 'block': { block }, - 'block block--mod': { block, mods: { mod: true } }, - 'block block--mod-val': { block, mods: { mod: 'val' } }, - 'block block--mod-123': { block, mods: { mod: 123 } }, - 'block block--mod-val block--modbool': { + [block]: { block }, + [`${block} ${block}--mod`]: { block, mods: { mod: true } }, + [`${block} ${block}--mod-val`]: { block, mods: { mod: 'val' } }, + [`${block} ${block}--mod-123`]: { block, mods: { mod: 123 } }, + [`${block} ${block}--mod-val ${block}--modbool`]: { block, mods: { mod: 'val', modbool: true, 'some-mod': false }, }, - 'block mix': { block, mixin: 'mix' }, - 'block block--mod mix': { block, mods: { mod: true }, mixin: 'mix' }, + [`${block} mix`]: { block, mixin: 'mix' }, + [`${block} ${block}--mod mix`]: { block, mods: { mod: true }, mixin: 'mix' }, }; export const elements = { - 'block__elem': { block, el }, - 'block__elem block__elem--mod': { block, el, mods: { mod: true } }, - 'block__elem block__elem--mod-val': { block, el, mods: { mod: 'val' } }, - 'block__elem block__elem--mod-123': { block, el, mods: { mod: 123 } }, - 'block__elem block__elem--mod-val block__elem--modbool': { + [`${block}__${el}`]: { block, el }, + [`${block}__${el} ${block}__${el}--mod`]: { block, el, mods: { mod: true } }, + [`${block}__${el} ${block}__${el}--mod-val`]: { block, el, mods: { mod: 'val' } }, + [`${block}__${el} ${block}__${el}--mod-123`]: { block, el, mods: { mod: 123 } }, + [`${block}__${el} ${block}__${el}--mod-val ${block}__${el}--modbool`]: { block, el, mods: { mod: 'val', modbool: true, 'some-mod': false }, }, - 'block__elem mix': { block, el, mixin: 'mix' }, - 'block__elem block__elem--mod-val mix': { + [`${block}__${el} mix`]: { block, el, mixin: 'mix' }, + [`${block}__${el} ${block}__${el}--mod-val mix`]: { block, el, mods: { mod: 'val' }, @@ -41,8 +41,8 @@ export const elements = { }; export const delimitersTest = { - 'ns**block++elem ns**block++elem==mod~val ns**block++elem==modbool': { - block, + [`ns**${block}++${el} ns**${block}++${el}==mod~val ns**${block}++${el}==modbool`]: { + block: delimiters.ns + block, el, mods: { mod: 'val', @@ -53,14 +53,7 @@ export const delimitersTest = { }; export const hyphenate = { - 'block block--has-mod': { block, mods: { hasMod: true } }, -}; - -export default { - block, - el, - blocks, - elements, - delimiters, - hyphenate, + 'block-name': { block }, + 'block-name block-name--has-mod': { block, mods: { hasMod: true } }, + 'block-name__element-name': { block, el }, }; diff --git a/tests/vue-plugin.test.js b/tests/vue-plugin.test.js index 178be7c..efec8ac 100644 --- a/tests/vue-plugin.test.js +++ b/tests/vue-plugin.test.js @@ -48,8 +48,8 @@ describe('Check vm.b() method', () => { }); describe('Check custom settings', () => { - const block = 'block'; - const elem = 'elem'; + const block = 'BlockName'; + const elem = 'elementName'; const mods = { hasMod: true, mod: 'val', @@ -74,7 +74,7 @@ describe('Check custom settings', () => { test('Expect corrent string for custom delimiters', () => { const localVue = createLocalVue(); - const expectedString = 'ns-block+elem ns-block+elem==hasMod ns-block+elem==mod__val'; + const expectedString = `ns-${block}+${elem} ns-${block}+${elem}==hasMod ns-${block}+${elem}==mod__val`; const config = { delimiters: { ns: 'ns-', @@ -90,9 +90,35 @@ describe('Check custom settings', () => { expect(vm.b(elem, mods)).toBe(expectedString); }); - test('Expect corrent string for hyphenate option', () => { + test('Expect correct block string for hyphenate option and early exit (no arguments)', () => { const localVue = createLocalVue(); - const expectedString = 'block__elem block__elem--has-mod block__elem--mod-val'; + const expectedString = 'block-name'; + const config = { + hyphenate: true, + }; + + localVue.use(vueBemCn, config); + const { vm } = mount(comp, { localVue }); + + expect(vm.b()).toBe(expectedString); + }); + + test('Expect correct block string for hyphenate option with mods', () => { + const localVue = createLocalVue(); + const expectedString = 'block-name block-name--has-mod block-name--mod-val'; + const config = { + hyphenate: true, + }; + + localVue.use(vueBemCn, config); + const { vm } = mount(comp, { localVue }); + + expect(vm.b(mods)).toBe(expectedString); + }); + + test('Expect correct element string for hyphenate option', () => { + const localVue = createLocalVue(); + const expectedString = 'block-name__element-name block-name__element-name--has-mod block-name__element-name--mod-val'; const config = { hyphenate: true, };