frat: add lint for scoped-css (#138)

This commit is contained in:
Kerwin Bryant 2022-04-30 23:16:41 +08:00 committed by GitHub
parent 01305b6853
commit 0fc86fcd76
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 82 additions and 49 deletions

View File

@ -3,6 +3,7 @@
"plugin:@typescript-eslint/recommended",
"eslint-config-airbnb-base",
"plugin:vue/vue3-recommended",
"plugin:vue-scoped-css/base",
"plugin:prettier/recommended"
],
"env": {
@ -53,7 +54,8 @@
"vue/require-default-prop": 0,
"vue/multi-word-component-names": 0,
"vue/no-reserved-props": 0,
"vue/no-v-html": 0
"vue/no-v-html": 0,
"vue-scoped-css/enforce-style-type": ["error", { "allows": ["scoped"] }]
}
}
]

View File

@ -49,6 +49,7 @@
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^7.16.0",
"eslint-plugin-vue-scoped-css": "^2.2.0",
"husky": "^7.0.4",
"less": "^4.1.1",
"lint-staged": "^12.1.2",

View File

@ -16,7 +16,7 @@ onMounted(() => {
store.updateConfig({ ...config });
});
</script>
<style lang="less">
<style lang="less" scoped>
@import '@/style/variables.less';
#nprogress .bar {

View File

@ -3,7 +3,7 @@
<router-view />
</div>
</template>
<style lang="less">
<style lang="less" scoped>
.tdesign-wrapper {
height: 100vh;
display: flex;

View File

@ -154,7 +154,7 @@ const navToHelper = () => {
window.open('http://tdesign.tencent.com/starter/docs/get-started');
};
</script>
<style lang="less">
<style lang="less" scoped>
@import '@/style/variables.less';
.@{prefix}-header {
&-layout {
@ -188,7 +188,7 @@ const navToHelper = () => {
flex: 1 1 1;
display: inline-flex;
.t-menu__item {
:deep(.t-menu__item) {
min-width: unset;
padding: 0px 16px;
}
@ -261,7 +261,7 @@ const navToHelper = () => {
}
}
.t-head-menu__inner {
:deep(.t-head-menu__inner) {
border-bottom: 1px solid @border-level-1-color;
}
@ -294,7 +294,7 @@ const navToHelper = () => {
margin-right: 8px;
}
.t-dropdown__item {
:deep(.t-dropdown__item) {
.t-dropdown__item__content {
display: flex;
justify-content: center;
@ -306,12 +306,12 @@ const navToHelper = () => {
}
}
.t-dropdown__item {
:deep(.t-dropdown__item) {
width: 100%;
margin-bottom: 0px;
}
&:last-child {
.t-dropdown__item {
:deep(.t-dropdown__item) {
margin-bottom: 8px;
}
}

View File

@ -192,4 +192,15 @@ const goDetail = () => {
}
}
}
.t-button {
margin: 0 8px;
.t-icon {
font-size: 20px;
&.general {
margin-right: 16px;
}
}
}
</style>

View File

@ -1,7 +1,7 @@
<template>
<div v-if="layout === 'side'" class="header-menu-search">
<t-input
:class="{ 'hover-active': isSearchFocus }"
:class="['header-search', { 'hover-active': isSearchFocus }]"
placeholder="请输入搜索内容"
@blur="changeSearchFocus(false)"
@focus="changeSearchFocus(true)"
@ -52,7 +52,7 @@ const changeSearchFocus = (value: boolean) => {
isSearchFocus.value = value;
};
</script>
<style lang="less">
<style lang="less" scoped>
@import '@/style/variables.less';
.header-menu-search {
@ -71,7 +71,8 @@ const changeSearchFocus = (value: boolean) => {
font-size: 20px !important;
color: @text-color-primary !important;
}
.t-input {
.header-search {
:deep(.t-input) {
border: none;
outline: none;
box-shadow: none;
@ -89,12 +90,31 @@ const changeSearchFocus = (value: boolean) => {
}
}
}
}
}
.header-search {
.t-button {
margin: 0 8px;
transition: opacity @anim-duration-base @anim-time-fn-easing;
.t-icon {
font-size: 20px;
&.general {
margin-right: 16px;
}
}
}
.search-icon-hide {
opacity: 0;
}
.header-menu-search-left {
display: flex;
align-items: center;
.header-search {
width: 200px;
transition: width @anim-duration-base @anim-time-fn-easing;
.t-input {
:deep(.t-input) {
border: 0;
&:focus {
box-shadow: none;
@ -104,15 +124,6 @@ const changeSearchFocus = (value: boolean) => {
width: 0;
opacity: 0;
}
}
.t-button {
transition: opacity @anim-duration-base @anim-time-fn-easing;
}
.search-icon-hide {
opacity: 0;
}
.header-menu-search-left {
display: flex;
align-items: center;
}
}
</style>

View File

@ -201,7 +201,7 @@ watchEffect(() => {
settingStore.updateConfig(formData.value);
});
</script>
<style lang="less">
<style lang="less" scoped>
@import '@/style/variables';
.tdesign-setting {
@ -288,7 +288,7 @@ watchEffect(() => {
.setting-container {
padding-bottom: 100px;
}
.t-radio-group.t-size-m {
:deep(.t-radio-group.t-size-m) {
min-height: 32px;
width: 100%;
height: auto;
@ -302,7 +302,7 @@ watchEffect(() => {
align-items: center;
margin-bottom: 16px;
.t-radio-button {
:deep(.t-radio-button) {
display: inline-flex;
max-height: 78px;
padding: 8px;
@ -313,22 +313,22 @@ watchEffect(() => {
}
}
.t-is-checked {
:deep(.t-is-checked) {
border: 2px solid @brand-color !important;
}
.t-form__controls-content {
:deep(.t-form__controls-content) {
justify-content: end;
}
}
.t-form__controls-content {
:deep(.t-form__controls-content) {
justify-content: end;
}
}
.setting-route-theme {
.t-form__label {
:deep(.t-form__label) {
min-width: 310px !important;
color: @text-color-secondary;
}
@ -336,7 +336,7 @@ watchEffect(() => {
.setting-color-theme {
.setting-layout-drawer {
.t-radio-button {
:deep(.t-radio-button) {
height: 32px;
}

View File

@ -265,7 +265,7 @@ const getContainer = () => {
};
</script>
<style lang="less">
<style lang="less" scoped>
@import '@/style/variables.less';
.list-common-table {
background-color: @bg-color-container;

View File

@ -124,3 +124,7 @@ const onSubmit = async ({ validateResult }) => {
}
};
</script>
<style lang="less" scoped>
@import url('../index.less');
</style>

View File

@ -120,3 +120,7 @@ const switchType = (val) => {
type.value = val;
};
</script>
<style lang="less" scoped>
@import url('../index.less');
</style>

View File

@ -115,7 +115,7 @@
justify-content: space-between;
}
.t-checkbox__label {
:deep(.t-checkbox__label) {
color: @text-color-secondary;
}
@ -132,7 +132,7 @@
display: flex;
align-items: center;
.t-form__controls {
:deep(.t-form__controls) {
width: 100%;
button {

View File

@ -41,6 +41,6 @@ const switchType = (val: string) => {
};
</script>
<style lang="less">
<style lang="less" scoped>
@import url('./index.less');
</style>