Skip to content

Enable linting for dropdown.vue #1462

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ang-zeyu merged 4 commits into from
Jan 30, 2021
Merged

Enable linting for dropdown.vue #1462

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1e3fef3
Enable linting for dropdown.vue
jonahtanjz Jan 28, 2021
3c41aae
Remove instances of showBool
jonahtanjz Jan 28, 2021
492ce58
Change all disabled to use computed value
jonahtanjz Jan 28, 2021
77c0744
Enable stylelint for Dropdown.vue
jonahtanjz Jan 30, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .eslintignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ packages/vue-components/src/utils/NodeList.js
packages/vue-components/src/utils/utils.js

# yuche/vue-strap
packages/vue-components/src/Dropdown.vue
packages/vue-components/src/main.js
packages/vue-components/src/Navbar.vue
packages/vue-components/src/Tab.vue
Expand Down
25 changes: 25 additions & 0 deletions .stylelintignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,28 @@
**/_site/**/*.css
packages/cli/test/functional/**/expected/**/*.css
packages/vue-components/**/*.css

# --- packages/vue-components .vue files ---

packages/vue-components/src/Navbar.vue

@ang-zeyu ang-zeyu Jan 30, 2021

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

meant to shift all of stylelint to another PR, so you wouldn't have to write this huge ignore list here 😅

but am fine with this as well.

@ang-zeyu ang-zeyu Jan 30, 2021

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Enable linting for dropdown.vue

let's update the message body to highlight vue css lint enabling as well

@jonahtanjz jonahtanjz Jan 30, 2021

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @ang-zeyu. Updated the message body.

packages/vue-components/src/Panel.vue
packages/vue-components/src/Pic.vue
packages/vue-components/src/Retriever.vue
packages/vue-components/src/Searchbar.vue
packages/vue-components/src/SearchbarPageItem.vue
packages/vue-components/src/SiteNav.vue
packages/vue-components/src/Submenu.vue
packages/vue-components/src/Tab.vue
packages/vue-components/src/TabGroup.vue
packages/vue-components/src/Tabset.vue
packages/vue-components/src/Thumbnail.vue
packages/vue-components/src/TipBox.vue
packages/vue-components/src/Trigger.vue
packages/vue-components/src/panels/MinimalPanel.vue
packages/vue-components/src/panels/NestedPanel.vue
packages/vue-components/src/panels/PanelSwitch.vue
packages/vue-components/src/questions/QOption.vue
packages/vue-components/src/questions/Question.vue
packages/vue-components/src/questions/Quiz.vue

# --- packages/vue-components end ---
2 changes: 1 addition & 1 deletion .stylelintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
module.exports = {
"extends": "stylelint-config-standard",
"rules": {
"indentation": 4,
"indentation": [ 4, { baseIndentLevel: 1 } ],
// MarkBind generates some blank CSS files when initialising a site,
// which violates the no-empty-source rule
"no-empty-source": null
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
"private": true,
"scripts": {
"build:web": "cd packages/core-web && npm run build",
"csslint": "stylelint **/*.css",
"csslintfix": "stylelint **/*.css --fix",
"csslint": "stylelint **/*.css **/*.vue",
"csslintfix": "stylelint **/*.css **/*.vue --fix",
"lint": "eslint . --ext .js,.vue && npm run csslint",
"lintfix": "eslint . --ext .js,.vue --fix && npm run csslintfix",
"setup": "npm ci && lerna clean --yes && lerna bootstrap --hoist",
Expand Down
178 changes: 95 additions & 83 deletions packages/vue-components/src/Dropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,24 @@
<template>
<li v-if="isLi" ref="dropdown" :class="classes">
<li
v-if="isLi"
ref="dropdown"
:class="[{ 'disabled': disabledBool },
isLi ? 'dropdown' : 'btn-group', addClass]"
>
<slot name="button">
<a class="dropdown-toggle" role="button" :class="{disabled: disabled}" @keyup.esc="hideDropdownMenu()">
<a
class="dropdown-toggle"
role="button"
:class="{'disabled': disabledBool}"
@keyup.esc="hideDropdownMenu()"
>
<slot name="_header">
<slot name="header"></slot>
</slot>
</a>
</slot>
<slot name="dropdown-menu" :class="menuClasses">
<ul class="dropdown-menu" :class="menuClasses">
<slot name="dropdown-menu" :class="[{ 'show': show }, { 'dropdown-menu-right': menuAlignRight }]">
<ul class="dropdown-menu" :class="[{ 'show': show }, { 'dropdown-menu-right': menuAlignRight }]">
<slot></slot>
</ul>
</slot>
Expand All @@ -18,99 +28,101 @@
<slot :name="name"></slot>
</template>
</submenu>
<div v-else ref="dropdown" :class="classes">
<div
v-else
ref="dropdown"
:class="[{ 'disabled': disabledBool },
isLi ? 'dropdown' : 'btn-group', addClass]"
>
<slot name="before"></slot>
<slot name="button">
<button type="button" class="btn dropdown-toggle" :class="[btnType, btnWithBefore]" @keyup.esc="hideDropdownMenu()" :disabled="disabled">
<button
type="button"
class="btn dropdown-toggle"
:class="[btnType, btnWithBefore]"
:disabled="disabledBool"
@keyup.esc="hideDropdownMenu()"
>
<slot name="_header">
<slot name="header"></slot>
</slot>
</button>
</slot>
<slot name="dropdown-menu" :class="menuClasses">
<ul class="dropdown-menu" :class="menuClasses">
<slot name="dropdown-menu" :class="[{ 'show': show }, { 'dropdown-menu-right': menuAlignRight }]">
<ul class="dropdown-menu" :class="[{ 'show': show }, { 'dropdown-menu-right': menuAlignRight }]">
<slot></slot>
</ul>
</slot>
</div>
</template>

<script>
import {toBoolean} from './utils/utils.js'
import $ from './utils/NodeList.js'
import { toBoolean } from './utils/utils';
import $ from './utils/NodeList';

export default {
props: {
show: {
type: Boolean,
default: false
},
'class': null,
disabled: {
type: Boolean,
default: false
default: false,
},
type: {
type: String,
default: 'light'
default: 'light',
},
menuAlignRight: {
type: Boolean,
default: false
default: false,
},
addClass: {
type: String,
default: ''
}
default: '',
},
},
provide: { hasParentDropdown: true },
inject: ['hasParentDropdown'],
data() {
return {
show: false,
};
},
computed: {
btnType () {
btnType() {
return `btn-${this.type}`;
},
classes () {
return [{disabled: this.disabledBool}, this.class, this.isLi ? 'dropdown' : 'btn-group', this.addClass]
},
menuClasses() {
return [{show: this.showBool}, {'dropdown-menu-right': this.menuAlignRight}];
},
disabledBool() {
return toBoolean(this.disabled);
},
isLi () { return this.$parent._navbar || this.$parent.menu || this.$parent._tabset },
isSubmenu() { return this.hasParentDropdown },
menu () {
return !this.$parent || this.$parent.navbar
isLi() { return this.$parent._navbar || this.$parent.menu || this.$parent._tabset; },
isSubmenu() { return this.hasParentDropdown; },
menu() {
return !this.$parent || this.$parent.navbar;
},
showBool() {
return toBoolean(this.show);
submenu() {
return this.$parent && (this.$parent.menu || this.$parent.submenu);
},
submenu () {
return this.$parent && (this.$parent.menu || this.$parent.submenu)
slots() {
return this.$slots.default;
},
slots () {
return this.$slots.default
},
btnWithBefore () {
btnWithBefore() {
if (this.$slots.before) {
return 'btn-with-before';
}
return '';
},
},
methods: {
blur () {
this.unblur()
blur() {
this.unblur();
this._hide = setTimeout(() => {
this._hide = null
this._hide = null;
this.hideDropdownMenu();
}, 100)
}, 100);
},
unblur () {
unblur() {
if (this._hide) {
clearTimeout(this._hide)
this._hide = null
clearTimeout(this._hide);
this._hide = null;
}
},
hideDropdownMenu() {
Expand All @@ -120,58 +132,58 @@ export default {
showDropdownMenu() {
this.show = true;
$(this.$refs.dropdown).findChildren('ul').each(ul => ul.classList.toggle('show', true));
}
},
},
mounted () {
const $el = $(this.$refs.dropdown)
mounted() {
const $el = $(this.$refs.dropdown);
if (this.show) {
this.showDropdownMenu();
}
$el.onBlur((e) => { this.hideDropdownMenu() }, false)
$el.findChildren('a,button.dropdown-toggle').on('click', e => {
e.preventDefault()
$el.onBlur(() => { this.hideDropdownMenu(); }, false);
$el.findChildren('a,button.dropdown-toggle').on('click', (e) => {
e.preventDefault();
if (this.disabledBool) { return false; }
if (this.showBool) {
if (this.show) {
this.hideDropdownMenu();
} else {
this.showDropdownMenu();
}
return false;
})
$el.findChildren('ul').on('click', 'li>a', e => {
if (e.target.classList.contains('submenu-toggle')) { return }
});
$el.findChildren('ul').on('click', 'li>a', (e) => {
if (e.target.classList.contains('submenu-toggle')) { return; }
this.hideDropdownMenu();
})
});
},
beforeDestroy() {
const $el = $(this.$refs.dropdown);
$el.offBlur();
$el.findChildren('a,button').off();
$el.findChildren('ul').off();
},
beforeDestroy () {
const $el = $(this.$refs.dropdown)
$el.offBlur()
$el.findChildren('a,button').off()
$el.findChildren('ul').off()
}
}
};
</script>

<style scoped>
.secret {
position: absolute;
clip: rect(0 0 0 0);
overflow: hidden;
margin: -1px;
height: 1px;
width: 1px;
padding: 0;
border: 0;
}
.secret {

@ang-zeyu ang-zeyu Jan 29, 2021

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good!

just one nit: let's enable and fix stylelint separately (for all .vue files that are es-linted)

@jonahtanjz jonahtanjz Jan 29, 2021

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure 👍
Should I do it in this PR or open a separate one?

@ang-zeyu ang-zeyu Jan 29, 2021

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

let's do it separately, iirc none of the .vue files are validated in our ci tests - might be quite a few changes

@jonahtanjz jonahtanjz Jan 30, 2021

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alright. I've enabled stylelint for all .vue files but added all of them to .stylelintignore except for dropdown.vue for now. Will do it separately for all the other files in the next PR :)

position: absolute;
clip: rect(0 0 0 0);
overflow: hidden;
margin: -1px;
height: 1px;
width: 1px;
padding: 0;
border: 0;
}

.btn-with-before {
padding-left: 0.2rem;
padding-right: 0.4rem;
}
.btn-with-before {
padding-left: 0.2rem;
padding-right: 0.4rem;
}

.dropdown-toggle {
cursor: pointer;
color: inherit;
text-decoration: none;
}
.dropdown-toggle {
cursor: pointer;
color: inherit;
text-decoration: none;
}
</style>