From 493f1d2b3c37da8822f55d690e0bbadbe0c4f658 Mon Sep 17 00:00:00 2001 From: jonahtanjz Date: Thu, 18 Feb 2021 01:14:48 +0800 Subject: [PATCH 1/5] Enable eslint for vue components --- .eslintignore | 18 - packages/vue-components/src/Navbar.vue | 39 +- packages/vue-components/src/Tab.vue | 84 +-- packages/vue-components/src/TabGroup.vue | 62 ++- packages/vue-components/src/Tabset.vue | 90 +-- .../src/directives/Closeable.js | 14 +- .../vue-components/src/directives/Float.js | 9 +- packages/vue-components/src/utils/NodeList.js | 526 +++++++++--------- packages/vue-components/src/utils/utils.js | 164 +++--- 9 files changed, 529 insertions(+), 477 deletions(-) diff --git a/.eslintignore b/.eslintignore index f7462f15c3..6f12f93862 100644 --- a/.eslintignore +++ b/.eslintignore @@ -5,21 +5,3 @@ packages/core/src/lib/markdown-it/plugins/* !packages/core/src/lib/markdown-it/plugins/markdown-it-icons.js !.eslintrc.js - -# --- packages/vue-components --- - -packages/vue-components/dist -packages/vue-components/src/directives/Closeable.js -packages/vue-components/src/directives/Float.js -packages/vue-components/src/utils/NodeList.js -packages/vue-components/src/utils/utils.js - -# yuche/vue-strap -packages/vue-components/src/main.js -packages/vue-components/src/Navbar.vue -packages/vue-components/src/Tab.vue -packages/vue-components/src/TabGroup.vue -packages/vue-components/src/Tabset.vue -packages/vue-components/src/Typeahead.vue - -# --- packages/vue-components end --- diff --git a/packages/vue-components/src/Navbar.vue b/packages/vue-components/src/Navbar.vue index c2be04f3a0..02b16acf8d 100644 --- a/packages/vue-components/src/Navbar.vue +++ b/packages/vue-components/src/Navbar.vue @@ -27,17 +27,21 @@ -
+
- - + +
diff --git a/packages/vue-components/src/Searchbar.vue b/packages/vue-components/src/Searchbar.vue index 9371eea7e8..26131d53aa 100644 --- a/packages/vue-components/src/Searchbar.vue +++ b/packages/vue-components/src/Searchbar.vue @@ -255,21 +255,21 @@ export default { diff --git a/packages/vue-components/src/SearchbarPageItem.vue b/packages/vue-components/src/SearchbarPageItem.vue index 5c83fb295d..615111ce71 100644 --- a/packages/vue-components/src/SearchbarPageItem.vue +++ b/packages/vue-components/src/SearchbarPageItem.vue @@ -84,35 +84,35 @@ export default { diff --git a/packages/vue-components/src/SiteNav.vue b/packages/vue-components/src/SiteNav.vue index 266772354e..dfe3ecef91 100644 --- a/packages/vue-components/src/SiteNav.vue +++ b/packages/vue-components/src/SiteNav.vue @@ -33,108 +33,108 @@ export default { diff --git a/packages/vue-components/src/Submenu.vue b/packages/vue-components/src/Submenu.vue index f124f5ab97..5cb1104293 100644 --- a/packages/vue-components/src/Submenu.vue +++ b/packages/vue-components/src/Submenu.vue @@ -126,27 +126,27 @@ export default { .submenu-toggle { display: inline-block; width: 100%; - padding: .25rem .75rem .25rem 1.5rem; + padding: 0.25rem 0.75rem 0.25rem 1.5rem; } .dropdown > ul > .dropdown-submenu:last-child > ul, .btn-group > ul > .dropdown-submenu:last-child > ul { - margin-bottom: -.5rem; + margin-bottom: -0.5rem; } @media (min-width: 768px) { - .submenu-toggle:after { + .submenu-toggle::after { display: inline-block; width: 0; height: 0; - vertical-align: .255em; + vertical-align: 0.255em; content: ""; - border-top: .3em solid transparent; + border-top: 0.3em solid transparent; border-right: 0; - border-bottom: .3em solid transparent; - border-left: .3em solid; + border-bottom: 0.3em solid transparent; + border-left: 0.3em solid; float: right; - margin-top: .5em; + margin-top: 0.5em; } } @@ -154,24 +154,24 @@ export default { .dropdown-submenu > ul { padding-bottom: 0; border-radius: 0; - margin: -.05rem; + margin: -0.05rem; position: static; float: none; } - .submenu-toggle:after { + .submenu-toggle::after { display: inline-block; width: 0; height: 0; - margin-left: .255em; - vertical-align: .255em; + margin-left: 0.255em; + vertical-align: 0.255em; content: ""; - border-top: .3em solid; - border-right: .3em solid transparent; + border-top: 0.3em solid; + border-right: 0.3em solid transparent; border-bottom: 0; - border-left: .3em solid transparent; + border-left: 0.3em solid transparent; float: right; - margin-top: .5em; + margin-top: 0.5em; } } diff --git a/packages/vue-components/src/Tab.vue b/packages/vue-components/src/Tab.vue index 842abdf8e3..3dd2b6cd21 100644 --- a/packages/vue-components/src/Tab.vue +++ b/packages/vue-components/src/Tab.vue @@ -86,10 +86,12 @@ export default { .tab-pane > hr { margin: 0; } + .fade-enter-active { - transition: opacity .5s; + transition: opacity 0.5s; } + .fade-leave-active { - transition: opacity 0s; + transition: opacity 0s; } diff --git a/packages/vue-components/src/TabGroup.vue b/packages/vue-components/src/TabGroup.vue index f5660c7c39..a3f99c3dee 100644 --- a/packages/vue-components/src/TabGroup.vue +++ b/packages/vue-components/src/TabGroup.vue @@ -68,7 +68,7 @@ export default { diff --git a/packages/vue-components/src/Tabset.vue b/packages/vue-components/src/Tabset.vue index 6a8a733fac..7f2e3b4439 100644 --- a/packages/vue-components/src/Tabset.vue +++ b/packages/vue-components/src/Tabset.vue @@ -104,7 +104,7 @@ export default { diff --git a/packages/vue-components/src/Thumbnail.vue b/packages/vue-components/src/Thumbnail.vue index 0b246cdc26..ce04e9eef4 100644 --- a/packages/vue-components/src/Thumbnail.vue +++ b/packages/vue-components/src/Thumbnail.vue @@ -119,26 +119,26 @@ export default { diff --git a/packages/vue-components/src/TipBox.vue b/packages/vue-components/src/TipBox.vue index 9902545c6c..202c67b007 100644 --- a/packages/vue-components/src/TipBox.vue +++ b/packages/vue-components/src/TipBox.vue @@ -355,6 +355,11 @@ export default { padding: 0.75rem 0.5rem; } + .contents { + padding: 0 6px; + width: 100%; + } + .box-container.seamless > .header-and-body > div.box-body-wrapper > .contents { padding-left: 12px; } @@ -400,11 +405,6 @@ export default { vertical-align: text-top; } - .contents { - padding: 0 6px; - width: 100%; - } - .contents > :last-child { margin-bottom: 0; } @@ -418,7 +418,7 @@ export default { .alert-border-left { background-color: #f9f8f8; border-left: solid; - border-width: 0px 0px 0px 5px; + border-width: 0 0 0 5px; } .vertical-divider { @@ -432,11 +432,11 @@ export default { } .no-background { - background: none; + background: none; } .no-border { - border: none; + border: none; } diff --git a/packages/vue-components/src/directives/Closeable.js b/packages/vue-components/src/directives/Closeable.js index d57ee7dbb2..7fece10791 100644 --- a/packages/vue-components/src/directives/Closeable.js +++ b/packages/vue-components/src/directives/Closeable.js @@ -1,13 +1,5 @@ module.exports = { bind(el) { - const message = el.getAttribute('alt') || 'Expand Content'; - const $content = jQuery('
'); - const $closeButton = jQuery(``); - const $showLabel = jQuery(``); - function onClose() { el.dataset.isShown = 'false'; $showLabel.show(); @@ -37,15 +29,19 @@ module.exports = { el.dataset.isShown = 'true'; el.style.position = 'relative'; + const message = el.getAttribute('alt') || 'Expand Content'; + const $content = jQuery(`
`); jQuery(el).contents().appendTo($content); jQuery(el).empty(); jQuery(el).append($content); jQuery(el).attr('class', `${el.className} closeable-wrapper`); + const $closeButton = jQuery(''); jQuery(el).append($closeButton); + const $showLabel = jQuery(``); jQuery(el).append($showLabel); $closeButton.click(onClose); $showLabel.click(onShow); jQuery(el).on('mouseover', onMouseOver); jQuery(el).on('mouseout', onMouseOut); - }, -}; + } +}; \ No newline at end of file diff --git a/packages/vue-components/src/directives/Float.js b/packages/vue-components/src/directives/Float.js index 14a01f9a86..d9186f559d 100644 --- a/packages/vue-components/src/directives/Float.js +++ b/packages/vue-components/src/directives/Float.js @@ -1,10 +1,11 @@ module.exports = { - bind() { - // eslint-disable-next-line lodash/prefer-constant - jQuery(this.el).wrap(() => '
'); + bind () { + jQuery(this.el).wrap(function () { + return `
`; + }); }, update(direction) { this.el.style.float = direction; console.log(direction); - }, -}; + } +}; \ No newline at end of file diff --git a/packages/vue-components/src/panels/MinimalPanel.vue b/packages/vue-components/src/panels/MinimalPanel.vue index 767711311f..99ae0b9900 100644 --- a/packages/vue-components/src/panels/MinimalPanel.vue +++ b/packages/vue-components/src/panels/MinimalPanel.vue @@ -140,156 +140,160 @@ export default { diff --git a/packages/vue-components/src/panels/NestedPanel.vue b/packages/vue-components/src/panels/NestedPanel.vue index 76f07d8332..80511aa57d 100644 --- a/packages/vue-components/src/panels/NestedPanel.vue +++ b/packages/vue-components/src/panels/NestedPanel.vue @@ -211,7 +211,7 @@ export default { } .card-title * { - margin: 0px !important; + margin: 0 !important; } .caret-wrapper { @@ -246,7 +246,7 @@ export default { } .card-group > .card-container > .expandable-card { - margin-top: 0!important; + margin-top: 0 !important; } .card-seamless { @@ -271,11 +271,6 @@ export default { padding: 10px 0; } - .card-seamless > .card-collapse > .card-body > .collapse-button { - position: relative; - top: 22px; - } - .card-body > .collapse-button { margin-bottom: 13px; margin-top: 5px; @@ -286,6 +281,11 @@ export default { opacity: 1; } + .card-seamless > .card-collapse > .card-body > .collapse-button { + position: relative; + top: 22px; + } + .close-button { font-size: 10px !important; float: right; @@ -311,7 +311,6 @@ export default { /* Bootstrap extra small(xs) responsive breakpoint */ @media (max-width: 575.98px) { - .caret-wrapper { float: left; display: inline-block; diff --git a/packages/vue-components/src/questions/QOption.vue b/packages/vue-components/src/questions/QOption.vue index ddcf75625c..2f17b8e4d0 100644 --- a/packages/vue-components/src/questions/QOption.vue +++ b/packages/vue-components/src/questions/QOption.vue @@ -149,60 +149,60 @@ export default { diff --git a/packages/vue-components/src/questions/Question.vue b/packages/vue-components/src/questions/Question.vue index 490b035d1c..2bb04d27e7 100644 --- a/packages/vue-components/src/questions/Question.vue +++ b/packages/vue-components/src/questions/Question.vue @@ -303,80 +303,80 @@ export default { diff --git a/packages/vue-components/src/questions/Quiz.vue b/packages/vue-components/src/questions/Quiz.vue index 81eca15a0e..ec726a1d2d 100644 --- a/packages/vue-components/src/questions/Quiz.vue +++ b/packages/vue-components/src/questions/Quiz.vue @@ -162,48 +162,48 @@ export default { diff --git a/packages/vue-components/src/utils/NodeList.js b/packages/vue-components/src/utils/NodeList.js index 3f909939f7..9cfcd88feb 100644 --- a/packages/vue-components/src/utils/NodeList.js +++ b/packages/vue-components/src/utils/NodeList.js @@ -1,389 +1,365 @@ -const ArrayProto = Array.prototype; -const nodeError = new Error('Passed arguments must be of Node'); -let blurEvent; -let blurList = []; -let Events = []; +const ArrayProto = Array.prototype +const nodeError = new Error('Passed arguments must be of Node') +let blurEvent +let blurList = [] +let Events = [] -function isNode(val) { return val instanceof window.Node; } -function isNodeList(val) { return val instanceof window.NodeList || val instanceof NodeList || val instanceof window.HTMLCollection || val instanceof Array; } +function isNode (val) { return val instanceof window.Node } +function isNodeList (val) { return val instanceof window.NodeList || val instanceof NodeList || val instanceof window.HTMLCollection || val instanceof Array } -function splitWords(val) { val = val.trim(); return val.length ? val.replace(/\s+/, ' ').split(' ') : []; } -function joinWords(val) { return val.length ? val.join(' ') : ''; } +function splitWords (val) { val = val.trim(); return val.length ? val.replace(/\s+/, ' ').split(' ') : [] } +function joinWords (val) { return val.length ? val.join(' ') : '' } class NodeList { - constructor(args) { - let nodes = args; + constructor (args) { + var nodes = args if (args[0] === window) { - nodes = [window]; + nodes = [window] } else if (typeof args[0] === 'string') { - nodes = (args[1] || document).querySelectorAll(args[0]); - if (args[1]) { this.owner = args[1]; } + nodes = (args[1] || document).querySelectorAll(args[0]) + if (args[1]) { this.owner = args[1] } } else if (0 in args && !isNode(args[0]) && args[0] && 'length' in args[0]) { - nodes = args[0]; - if (args[1]) { this.owner = args[1]; } + nodes = args[0] + if (args[1]) { this.owner = args[1] } } if (nodes) { - for (const i in nodes) { - this[i] = nodes[i]; + for (let i in nodes) { + this[i] = nodes[i] } - this.length = nodes.length; + this.length = nodes.length } else { - this.length = 0; + this.length = 0 } } - concat(...args) { - const nodes = ArrayProto.slice.call(this); - function flatten(arr) { - ArrayProto.forEach.call(arr, (el) => { + concat (...args) { + let nodes = ArrayProto.slice.call(this) + function flatten (arr) { + ArrayProto.forEach.call(arr, el => { if (isNode(el)) { - if (!~nodes.indexOf(el)) nodes.push(el); + if (!~nodes.indexOf(el)) nodes.push(el) } else if (isNodeList(el)) { - flatten(el); + flatten(el) } - }); + }) } - ArrayProto.forEach.call(args, (arg) => { + ArrayProto.forEach.call(args, arg => { if (isNode(arg)) { - if (!~nodes.indexOf(arg)) nodes.push(arg); + if (!~nodes.indexOf(arg)) nodes.push(arg) } else if (isNodeList(arg)) { - flatten(arg); + flatten(arg) } else { - throw Error('Concat arguments must be of a Node, NodeList, HTMLCollection, or Array of (Node, NodeList, HTMLCollection, Array)'); + throw Error('Concat arguments must be of a Node, NodeList, HTMLCollection, or Array of (Node, NodeList, HTMLCollection, Array)') } - }); - return NodeListJS(nodes, this); + }) + return NodeListJS(nodes, this) } - - delete() { - const notRemoved = flatten(this).filter((el) => { + delete () { + var notRemoved = flatten(this).filter(el => { if (el.remove) { - el.remove(); + el.remove() } else if (el.parentNode) { - el.parentNode.removeChild(el); + el.parentNode.removeChild(el) } - return document.body.contains(el); - }); - if (notRemoved.length) console.warn('NodeList: Some nodes could not be deleted.'); - return notRemoved; + return document.body.contains(el) + }) + if (notRemoved.length) console.warn('NodeList: Some nodes could not be deleted.') + return notRemoved } - - each(...args) { - ArrayProto.forEach.apply(this, args); - return this; + each (...args) { + ArrayProto.forEach.apply(this, args) + return this } - - filter(...args) { - return NodeListJS(ArrayProto.filter.apply(this, args), this); + filter (...args) { + return NodeListJS(ArrayProto.filter.apply(this, args), this) } - - find(element) { - const nodes = []; - flatten(this).forEach((node) => { ArrayProto.push.apply(nodes, node.querySelectorAll(element)); }); - return flatten(nodes, this.owner); + find (element) { + let nodes = [] + flatten(this).forEach(node => { ArrayProto.push.apply(nodes, node.querySelectorAll(element)) }) + return flatten(nodes, this.owner) } - - findChildren(element) { - if (element) return this.find(element).filter(el => this.includes(el.parentElement)); - return flatten(this.map(el => el.children)); + findChildren (element) { + if (element) return this.find(element).filter(el => this.includes(el.parentElement)) + return flatten(this.map(el => el.children)) } - - forEach(...args) { - ArrayProto.forEach.apply(this, args); - return this; + forEach (...args) { + ArrayProto.forEach.apply(this, args) + return this } - - includes(element, index) { - return ~this.indexOf(element, index); + includes (element, index) { + return ~this.indexOf(element, index) } - - map(...args) { - const mapped = ArrayProto.map.apply(this, args); - return mapped.some(el => (isNode(el) || isNodeList(el))) ? flatten(mapped, this) : mapped; + map (...args) { + var mapped = ArrayProto.map.apply(this, args) + return mapped.some(el => (isNode(el) || isNodeList(el))) ? flatten(mapped, this) : mapped } - - parent() { - return flatten(this.map(el => el.parentNode), this); + parent () { + return flatten(this.map(el => el.parentNode), this) } - - pop(amount) { - if (typeof amount !== 'number') { amount = 1; } - const nodes = []; - const pop = ArrayProto.pop.bind(this); - while (amount--) nodes.push(pop()); - return NodeListJS(nodes, this); + pop (amount) { + if (typeof amount !== 'number') { amount = 1 } + let nodes = [] + let pop = ArrayProto.pop.bind(this) + while (amount--) nodes.push(pop()) + return NodeListJS(nodes, this) } - - push(...args) { - ArrayProto.forEach.call(args, (arg) => { - if (!isNode(arg)) throw nodeError; - if (!~this.indexOf(arg)) ArrayProto.push.call(this, arg); - }); - return this; + push (...args) { + ArrayProto.forEach.call(args, arg => { + if (!isNode(arg)) throw nodeError + if (!~this.indexOf(arg)) ArrayProto.push.call(this, arg) + }) + return this } - - shift(amount) { - if (typeof amount !== 'number') { amount = 1; } - const nodes = []; - while (amount--) nodes.push(ArrayProto.shift.call(this)); - return nodes.length == 1 ? nodes[0] : NodeListJS(nodes, this); + shift (amount) { + if (typeof amount !== 'number') { amount = 1 } + let nodes = [] + while (amount--) nodes.push(ArrayProto.shift.call(this)) + return nodes.length == 1 ? nodes[0] : NodeListJS(nodes, this) } - - slice(...args) { - return NodeListJS(ArrayProto.slice.apply(this, args), this); + slice (...args) { + return NodeListJS(ArrayProto.slice.apply(this, args), this) } - - splice(...args) { + splice (...args) { for (let i = 2, l = args.length; i < l; i++) { - if (!isNode(args[i])) throw nodeError; + if (!isNode(args[i])) throw nodeError } - ArrayProto.splice.apply(this, args); - return this; + ArrayProto.splice.apply(this, args) + return this } - - unshift(...args) { - const unshift = ArrayProto.unshift.bind(this); - ArrayProto.forEach.call(args, (arg) => { - if (!isNode(arg)) throw nodeError; - if (!~this.indexOf(arg)) unshift(arg); - }); - return this; + unshift (...args) { + let unshift = ArrayProto.unshift.bind(this) + ArrayProto.forEach.call(args, arg => { + if (!isNode(arg)) throw nodeError + if (!~this.indexOf(arg)) unshift(arg) + }) + return this } - addClass(classes) { - return this.toggleClass(classes, true); + addClass (classes) { + return this.toggleClass(classes, true) } - - removeClass(classes) { - return this.toggleClass(classes, false); + removeClass (classes) { + return this.toggleClass(classes, false) } - - toggleClass(classes, value) { - const method = (value === undefined || value === null) ? 'toggle' : value ? 'add' : 'remove'; + toggleClass (classes, value) { + var method = (value === undefined || value === null) ? 'toggle' : value ? 'add' : 'remove' if (typeof classes === 'string') { - classes = splitWords(classes); + classes = splitWords(classes) } - this.each((el) => { - let list = splitWords(el.className); - classes.forEach((c) => { - const hasClass = ~list.indexOf(c); - if (!hasClass && method !== 'remove') list.push(c); - if (hasClass && method !== 'add') { list = list.filter(el => (el !== c)); } - }); - list = joinWords(list); - if (!list) el.removeAttribute('class'); - else el.className = list; - }); - return this; + this.each(el => { + var list = splitWords(el.className) + classes.forEach(c => { + var hasClass = ~list.indexOf(c) + if (!hasClass && method !== 'remove') list.push(c) + if (hasClass && method !== 'add') { list = list.filter(el => (el !== c)) } + }) + list = joinWords(list) + if (!list) el.removeAttribute('class') + else el.className = list + }) + return this } - get(prop) { - const arr = []; - this.each((el) => { - if (el !== null) { el = el[prop]; } - arr.push(el); - }); - return flatten(arr, this); + get (prop) { + let arr = [] + this.each(el => { + if (el !== null) { el = el[prop] } + arr.push(el) + }) + return flatten(arr, this) } - - set(prop, value) { + set (prop, value) { if (prop.constructor === Object) { - this.each((el) => { + this.each(el => { if (el) { - for (const key in prop) { - if (key in el) { el[key] = prop[key]; } + for (let key in prop) { + if (key in el) { el[key] = prop[key] } } } - }); + }) } else { - this.each((el) => { - if (prop in el) { el[prop] = value; } - }); + this.each(el => { + if (prop in el) { el[prop] = value } + }) } - return this; + return this } - - call(...args) { - const method = ArrayProto.shift.call(args); - const arr = []; - let returnThis = true; - this.each((el) => { + call (...args) { + const method = ArrayProto.shift.call(args) + let arr = [] + let returnThis = true + this.each(el => { if (el && el[method] instanceof Function) { - el = el[method].apply(el, args); - arr.push(el); + el = el[method].apply(el, args) + arr.push(el) if (returnThis && el !== undefined) { - returnThis = false; + returnThis = false } } else { - arr.push(undefined); + arr.push(undefined) } - }); - return returnThis ? this : flatten(arr, this); + }) + return returnThis ? this : flatten(arr, this) } - - item(index) { - return NodeListJS([this[index]], this); + item (index) { + return NodeListJS([this[index]], this) } - - get asArray() { - return ArrayProto.slice.call(this); + get asArray () { + return ArrayProto.slice.call(this) } // event handlers - on(events, selector, callback) { - if (typeof events === 'string') { events = splitWords(events); } - if (!this || !this.length) return this; + on (events, selector, callback) { + if (typeof events === 'string') { events = splitWords(events) } + if (!this || !this.length) return this if (callback === undefined) { - callback = selector; - selector = null; + callback = selector + selector = null } - if (!callback) return this; - const fn = callback; + if (!callback) return this + const fn = callback callback = selector ? function (e) { - const els = NodeListJS(selector, this); - if (!els.length) { return; } - els.some((el) => { - const target = el.contains(e.target); - if (target) fn.call(el, e, el); - return target; - }); + let els = NodeListJS(selector, this) + if (!els.length) { return } + els.some(el => { + let target = el.contains(e.target) + if (target) fn.call(el, e, el) + return target + }) } : function (e) { - fn.apply(this, [e, this]); - }; - this.each((el) => { - events.forEach((event) => { + fn.apply(this, [e, this]) + } + this.each(el => { + events.forEach(event => { if (el === window || isNode(el)) { - el.addEventListener(event, callback, false); + el.addEventListener(event, callback, false) Events.push({ - el, - event, - callback, - }); + el: el, + event: event, + callback: callback + }) } - }); - }); - return this; + }) + }) + return this } - - off(events, callback) { + off (events, callback) { if (events instanceof Function) { - callback = events; - events = null; + callback = events + events = null } - events = events instanceof Array ? events : typeof events === 'string' ? splitWords(events) : null; - this.each((el) => { - Events = Events.filter((e) => { - if (e && e.el === el && (!callback || callback === e.callback) && (!events || ~events.indexOf(e.event))) { - e.el.removeEventListener(e.event, e.callback); - return false; + events = events instanceof Array ? events : typeof events === 'string' ? splitWords(events) : null + this.each(el => { + Events = Events.filter(e => { + if(e && e.el === el && (!callback || callback === e.callback) && (!events || ~events.indexOf(e.event))) { + e.el.removeEventListener(e.event, e.callback) + return false } - return true; - }); - }); - return this; + return true + }) + }) + return this } - - onBlur(callback, enableTriggerByTouchStart = true) { - if (!this || !this.length) return this; - if (!callback) return this; - this.each((el) => { blurList.push({ el, callback }); }); + onBlur (callback, enableTriggerByTouchStart = true) { + if (!this || !this.length) return this + if (!callback) return this + this.each(el => { blurList.push({el, callback}) }) if (!blurEvent) { - blurEvent = (e) => { - blurList.forEach((item) => { - if (!item.el) return; - const target = item.el.contains(e.target) || item.el === e.target; - if (!target) item.callback.call(item.el, e, item.el); - }); - }; - document.addEventListener('click', blurEvent, false); - if (enableTriggerByTouchStart) document.addEventListener('touchstart', blurEvent, false); + blurEvent = e => { + blurList.forEach(item => { + if (!item.el) return + let target = item.el.contains(e.target) || item.el === e.target + if (!target) item.callback.call(item.el, e, item.el) + }) + } + document.addEventListener('click', blurEvent, false) + if (enableTriggerByTouchStart) document.addEventListener('touchstart', blurEvent, false) } - return this; + return this } - - offBlur(callback) { - this.each((el) => { - blurList = blurList.filter((blur) => { + offBlur (callback) { + this.each(el => { + blurList = blurList.filter(blur => { if (blur && blur.el === el && (!callback || blur.callback === callback)) { - return false; + return false } - return el; - }); - }); - return this; + return el + }) + }) + return this } } -const NL = NodeList.prototype; +let NL = NodeList.prototype -function flatten(arr, owner) { - const list = []; - ArrayProto.forEach.call(arr, (el) => { +function flatten (arr, owner) { + let list = [] + ArrayProto.forEach.call(arr, el => { if (isNode(el)) { - if (!~list.indexOf(el)) list.push(el); + if (!~list.indexOf(el)) list.push(el) } else if (isNodeList(el)) { - for (const id in el) list.push(el[id]); + for (let id in el) list.push(el[id]) } else if (el !== null) { - arr.get = NL.get; - arr.set = NL.set; - arr.call = NL.call; - arr.owner = owner; - return arr; + arr.get = NL.get + arr.set = NL.set + arr.call = NL.call + arr.owner = owner + return arr } - }); - return NodeListJS(list, owner); + }) + return NodeListJS(list, owner) } -Object.getOwnPropertyNames(ArrayProto).forEach((key) => { +Object.getOwnPropertyNames(ArrayProto).forEach(key => { if (key !== 'join' && key !== 'copyWithin' && key !== 'fill' && NL[key] === undefined) { - NL[key] = ArrayProto[key]; + NL[key] = ArrayProto[key] } -}); +}) if (window.Symbol && Symbol.iterator) { - NL[Symbol.iterator] = NL.values = ArrayProto[Symbol.iterator]; + NL[Symbol.iterator] = NL.values = ArrayProto[Symbol.iterator] } -const div = document.createElement('div'); -function setterGetter(prop) { - if (NL[prop]) return; +const div = document.createElement('div') +function setterGetter (prop) { + if (NL[prop]) return if (div[prop] instanceof Function) { NL[prop] = (...args) => { - const arr = []; - let returnThis = true; - for (const i in NL) { - let el = NL[i]; + let arr = [] + let returnThis = true + for (let i in NL) { + let el = NL[i] if (el && el[prop] instanceof Function) { - el = el[prop].apply(el, args); - arr.push(el); + el = el[prop].apply(el, args) + arr.push(el) if (returnThis && el !== undefined) { - returnThis = false; + returnThis = false } } else { - arr.push(undefined); + arr.push(undefined) } } - return returnThis ? this : flatten(arr, this); - }; + return returnThis ? this : flatten(arr, this) + } } else { Object.defineProperty(NL, prop, { - get() { - const arr = []; - this.each((el) => { - if (el !== null) { el = el[prop]; } - arr.push(el); - }); - return flatten(arr, this); - }, - set(value) { - this.each((el) => { - if (el && prop in el) { el[prop] = value; } - }); + get () { + let arr = [] + this.each(el => { + if (el !== null) { el = el[prop] } + arr.push(el) + }) + return flatten(arr, this) }, - }); + set (value) { + this.each(el => { + if (el && prop in el) { el[prop] = value } + }) + } + }) } } -for (const prop in div) setterGetter(prop); +for (let prop in div) setterGetter(prop) -function NodeListJS(...args) { return new NodeList(args); } -window.NL = NodeListJS; +function NodeListJS (...args) { return new NodeList(args) } +window.NL = NodeListJS -export default NodeListJS; +export default NodeListJS \ No newline at end of file diff --git a/packages/vue-components/src/utils/utils.js b/packages/vue-components/src/utils/utils.js index bd0ef82c3d..5bdd5e6237 100644 --- a/packages/vue-components/src/utils/utils.js +++ b/packages/vue-components/src/utils/utils.js @@ -5,12 +5,12 @@ export const coerce = { // Attempt to convert a string value to a Number. Otherwise, return 0. number: (val, alt = null) => (typeof val === 'number' ? val : val === undefined || val === null || isNaN(Number(val)) ? alt : Number(val)), // Attempt to convert to string any value, except for null or undefined. - string: val => (val === undefined || val === null ? '' : `${val}`), + string: val => (val === undefined || val === null ? '' : val + ''), // Pattern accept RegExp, function, or string (converted to RegExp). Otherwise return null. - pattern: val => (val instanceof Function || val instanceof RegExp ? val : typeof val === 'string' ? new RegExp(val) : null), -}; + pattern: val => (val instanceof Function || val instanceof RegExp ? val : typeof val === 'string' ? new RegExp(val) : null) +} -export function toBoolean(val) { +export function toBoolean (val) { return (typeof val === 'string') ? ((val === '' || val === 'true') ? true @@ -20,7 +20,7 @@ export function toBoolean(val) { : val; } -export function toNumber(val) { +export function toNumber (val) { return (typeof val === 'number') ? val : ((val === undefined || val === null || isNaN(Number(val))) @@ -28,134 +28,134 @@ export function toNumber(val) { : Number(val)); } -export function getJSON(url) { - const request = new window.XMLHttpRequest(); - const data = {}; +export function getJSON (url) { + var request = new window.XMLHttpRequest() + var data = {} // p (-simulated- promise) var p = { - then(fn1, fn2) { return p.done(fn1).fail(fn2); }, - catch(fn) { return p.fail(fn); }, - always(fn) { return p.done(fn).fail(fn); }, + then (fn1, fn2) { return p.done(fn1).fail(fn2) }, + catch (fn) { return p.fail(fn) }, + always (fn) { return p.done(fn).fail(fn) } }; - ['done', 'fail'].forEach((name) => { - data[name] = []; + ['done', 'fail'].forEach(name => { + data[name] = [] p[name] = (fn) => { - if (fn instanceof Function) data[name].push(fn); - return p; - }; - }); - p.done(JSON.parse); + if (fn instanceof Function) data[name].push(fn) + return p + } + }) + p.done(JSON.parse) request.onreadystatechange = () => { if (request.readyState === 4) { - const e = { status: request.status }; + let e = {status: request.status} if (request.status === 200) { try { - let response = request.responseText; - for (const i in data.done) { - const value = data.done[i](response); - if (value !== undefined) { response = value; } + var response = request.responseText + for (var i in data.done) { + var value = data.done[i](response) + if (value !== undefined) { response = value } } } catch (err) { - data.fail.forEach(fail => fail(err)); + data.fail.forEach(fail => fail(err)) } } else { - data.fail.forEach(fail => fail(e)); + data.fail.forEach(fail => fail(e)) } } - }; - request.open('GET', url); - request.setRequestHeader('Accept', 'application/json'); - request.send(); - return p; + } + request.open('GET', url) + request.setRequestHeader('Accept', 'application/json') + request.send() + return p } -export function getScrollBarWidth() { +export function getScrollBarWidth () { if (document.documentElement.scrollHeight <= document.documentElement.clientHeight) { - return 0; + return 0 } - const inner = document.createElement('p'); - inner.style.width = '100%'; - inner.style.height = '200px'; + let inner = document.createElement('p') + inner.style.width = '100%' + inner.style.height = '200px' - const outer = document.createElement('div'); - outer.style.position = 'absolute'; - outer.style.top = '0px'; - outer.style.left = '0px'; - outer.style.visibility = 'hidden'; - outer.style.width = '200px'; - outer.style.height = '150px'; - outer.style.overflow = 'hidden'; - outer.appendChild(inner); + let outer = document.createElement('div') + outer.style.position = 'absolute' + outer.style.top = '0px' + outer.style.left = '0px' + outer.style.visibility = 'hidden' + outer.style.width = '200px' + outer.style.height = '150px' + outer.style.overflow = 'hidden' + outer.appendChild(inner) - document.body.appendChild(outer); - const w1 = inner.offsetWidth; - outer.style.overflow = 'scroll'; - let w2 = inner.offsetWidth; - if (w1 === w2) w2 = outer.clientWidth; + document.body.appendChild(outer) + let w1 = inner.offsetWidth + outer.style.overflow = 'scroll' + let w2 = inner.offsetWidth + if (w1 === w2) w2 = outer.clientWidth - document.body.removeChild(outer); + document.body.removeChild(outer) - return (w1 - w2); + return (w1 - w2) } // delayer: set a function that execute after a delay // @params (function, delay_prop or value, default_value) -export function delayer(fn, varTimer, ifNaN = 100) { - function toInt(el) { return /^[0-9]+$/.test(el) ? Number(el) || 1 : null; } - let timerId; +export function delayer (fn, varTimer, ifNaN = 100) { + function toInt (el) { return /^[0-9]+$/.test(el) ? Number(el) || 1 : null } + var timerId return function (...args) { - if (timerId) clearTimeout(timerId); + if (timerId) clearTimeout(timerId) timerId = setTimeout(() => { - fn.apply(this, args); - }, toInt(varTimer) || toInt(this[varTimer]) || ifNaN); - }; + fn.apply(this, args) + }, toInt(varTimer) || toInt(this[varTimer]) || ifNaN) + } } export function getFragmentByHash(url) { - const type = url.split('#'); - let hash = ''; - if (type.length > 1) { + var type = url.split('#'); + var hash = ''; + if(type.length > 1) { hash = type[1]; } return hash; } // Fix a vue instance Lifecycle to vue 1/2 (just the basic elements, is not a real parser, so this work only if your code is compatible with both) -export function VueFixer(vue) { - const vue2 = !window.Vue || !window.Vue.partial; - const mixin = { +export function VueFixer (vue) { + var vue2 = !window.Vue || !window.Vue.partial + var mixin = { computed: { - vue2() { return !this.$dispatch; }, - }, - }; + vue2 () { return !this.$dispatch } + } + } if (!vue2) { if (vue.beforeCreate) { - mixin.create = vue.beforeCreate; - delete vue.beforeCreate; + mixin.create = vue.beforeCreate + delete vue.beforeCreate } if (vue.beforeMount) { - vue.beforeCompile = vue.beforeMount; - delete vue.beforeMount; + vue.beforeCompile = vue.beforeMount + delete vue.beforeMount } if (vue.mounted) { - vue.ready = vue.mounted; - delete vue.mounted; + vue.ready = vue.mounted + delete vue.mounted } } else { if (vue.beforeCompile) { - vue.beforeMount = vue.beforeCompile; - delete vue.beforeCompile; + vue.beforeMount = vue.beforeCompile + delete vue.beforeCompile } if (vue.compiled) { - mixin.compiled = vue.compiled; - delete vue.compiled; + mixin.compiled = vue.compiled + delete vue.compiled } if (vue.ready) { - vue.mounted = vue.ready; - delete vue.ready; + vue.mounted = vue.ready + delete vue.ready } } - if (!vue.mixins) { vue.mixins = []; } - vue.mixins.unshift(mixin); - return vue; -} + if (!vue.mixins) { vue.mixins = [] } + vue.mixins.unshift(mixin) + return vue +} \ No newline at end of file From 7fa40ee82ba553d4a17be07ffbe0bbe3032a4822 Mon Sep 17 00:00:00 2001 From: jonahtanjz Date: Thu, 18 Feb 2021 12:18:51 +0800 Subject: [PATCH 3/5] Lint fix --- packages/vue-components/src/directives/Closeable.js | 2 +- packages/vue-components/src/directives/Float.js | 2 +- packages/vue-components/src/utils/NodeList.js | 2 +- packages/vue-components/src/utils/utils.js | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/vue-components/src/directives/Closeable.js b/packages/vue-components/src/directives/Closeable.js index 7fece10791..6df6e4c3da 100644 --- a/packages/vue-components/src/directives/Closeable.js +++ b/packages/vue-components/src/directives/Closeable.js @@ -44,4 +44,4 @@ module.exports = { jQuery(el).on('mouseover', onMouseOver); jQuery(el).on('mouseout', onMouseOut); } -}; \ No newline at end of file +}; diff --git a/packages/vue-components/src/directives/Float.js b/packages/vue-components/src/directives/Float.js index d9186f559d..bcaf812197 100644 --- a/packages/vue-components/src/directives/Float.js +++ b/packages/vue-components/src/directives/Float.js @@ -8,4 +8,4 @@ module.exports = { this.el.style.float = direction; console.log(direction); } -}; \ No newline at end of file +}; diff --git a/packages/vue-components/src/utils/NodeList.js b/packages/vue-components/src/utils/NodeList.js index 9cfcd88feb..3db84c418d 100644 --- a/packages/vue-components/src/utils/NodeList.js +++ b/packages/vue-components/src/utils/NodeList.js @@ -362,4 +362,4 @@ for (let prop in div) setterGetter(prop) function NodeListJS (...args) { return new NodeList(args) } window.NL = NodeListJS -export default NodeListJS \ No newline at end of file +export default NodeListJS diff --git a/packages/vue-components/src/utils/utils.js b/packages/vue-components/src/utils/utils.js index 5bdd5e6237..7cabe3e9be 100644 --- a/packages/vue-components/src/utils/utils.js +++ b/packages/vue-components/src/utils/utils.js @@ -158,4 +158,4 @@ export function VueFixer (vue) { if (!vue.mixins) { vue.mixins = [] } vue.mixins.unshift(mixin) return vue -} \ No newline at end of file +} From 9a1a366dc7577d9d421def1bd4f9360dfcbe45e2 Mon Sep 17 00:00:00 2001 From: jonahtanjz Date: Fri, 19 Feb 2021 14:00:25 +0800 Subject: [PATCH 4/5] Fix incorrect referencing of parent in Tab.vue --- packages/vue-components/src/Tab.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vue-components/src/Tab.vue b/packages/vue-components/src/Tab.vue index 3dd2b6cd21..ff99094f3b 100644 --- a/packages/vue-components/src/Tab.vue +++ b/packages/vue-components/src/Tab.vue @@ -75,8 +75,8 @@ export default { beforeDestroy() { if (this._tabset.active === this.index) { this._tabset.active = 0; } if (this._ingroup) { - const tabIndex = window.parent.tabs.indexOf(this); - window.parent.tabs.splice(tabIndex, 1); + const tabIndex = this.$parent.tabs.indexOf(this); + this.$parent.tabs.splice(tabIndex, 1); } this._tabset.tabs.splice(this.index, 1); }, From 2764164c01409431ae667d0fe1d646ec9d823201 Mon Sep 17 00:00:00 2001 From: jonahtanjz Date: Tue, 23 Feb 2021 11:42:37 +0800 Subject: [PATCH 5/5] Remove console.logs from .vue files --- packages/vue-components/src/Navbar.vue | 4 +--- packages/vue-components/src/Tab.vue | 2 +- packages/vue-components/src/TabGroup.vue | 8 ++++---- 3 files changed, 6 insertions(+), 8 deletions(-) diff --git a/packages/vue-components/src/Navbar.vue b/packages/vue-components/src/Navbar.vue index 367075e08d..b59d207d38 100644 --- a/packages/vue-components/src/Navbar.vue +++ b/packages/vue-components/src/Navbar.vue @@ -136,7 +136,6 @@ export default { } for (let i = 0; i < hParts.length; i += 1) { if (hParts[i] !== uParts[i]) { - console.log(`${hParts[i]} ${uParts[i]}`); return false; } } @@ -199,6 +198,7 @@ export default { // eslint-disable-next-line no-continue continue; } + // Ignores invalid navbar highlight rule if (hlMode === 'sibling-or-child') { if (this.isSibling(url, a.href) || this.isChild(url, a.href)) { li.classList.add('current'); @@ -217,8 +217,6 @@ export default { this.addClassIfDropdown(dropdownLinks, a, li); return; } - } else { - console.log('Ignoring invalid navbar highlight rule'); } } } diff --git a/packages/vue-components/src/Tab.vue b/packages/vue-components/src/Tab.vue index ff99094f3b..ebf1b226c8 100644 --- a/packages/vue-components/src/Tab.vue +++ b/packages/vue-components/src/Tab.vue @@ -57,7 +57,7 @@ export default { } if (!tabset._tabset) { this._tabset = {}; - console.warn('Warning: "tab" depend on "tabset" to work properly.'); + // Warning: "tab" depend on "tabset" to work properly. } else { tabset.tabs.push(this); if (!this._ingroup) { diff --git a/packages/vue-components/src/TabGroup.vue b/packages/vue-components/src/TabGroup.vue index a3f99c3dee..c7f882b689 100644 --- a/packages/vue-components/src/TabGroup.vue +++ b/packages/vue-components/src/TabGroup.vue @@ -42,16 +42,16 @@ export default { created() { this._tabgroup = true; let tabset = (this.$parent && this.$parent._tabset === true) ? this.$parent : {}; - if (this.$parent && this.$parent._tabgroup) { - console.error('Can\'t nest tabgroups.'); - } + + // Tabgroups cannot be nested + while (tabset && !tabset._tabset && tabset.$parent) { tabset = tabset.$parent; } if (!tabset._tabset) { this._tabset = {}; this.show = true; - console.warn('Warning: tabgroup depend on tabset to work properly.'); + // Warning: tabgroup depend on tabset to work properly. } else { this._tabset = tabset; }