mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-03-01 13:36:55 +08:00
feat(table): light
This commit is contained in:
07akioni
commit
df3c4a5612
@ -79,7 +79,7 @@ const _columns3 = ($this) => {
|
||||
title: 'Name',
|
||||
key: 'name',
|
||||
sortable: true,
|
||||
width: 400
|
||||
width: 300
|
||||
},
|
||||
{
|
||||
title: 'Age',
|
||||
|
||||
@ -2,9 +2,10 @@
|
||||
<span
|
||||
class="ts-funnel-container"
|
||||
:class="{'ts-funnel-container--active':status}"
|
||||
@click.stop="()=>{}"
|
||||
>
|
||||
<n-icon
|
||||
style="vertical-align: middle;color: #63e2b7;"
|
||||
style="vertical-align: middle;"
|
||||
:class="{'ts-funnel-container--active':status}"
|
||||
type="ios-funnel"
|
||||
size="12"
|
||||
@ -48,7 +49,7 @@ export default {
|
||||
line-height: 16px;
|
||||
}
|
||||
.ts-funnel-container i {
|
||||
opacity: 0.3;
|
||||
opacity: 0.4;
|
||||
}
|
||||
.ts-funnel-container--active i{
|
||||
opacity: 1;
|
||||
|
||||
@ -12,35 +12,6 @@
|
||||
<template v-slot:activator>
|
||||
<filterIcon :status="filterStatus" />
|
||||
</template>
|
||||
<!-- <n-popselect-option
|
||||
v-if="loading"
|
||||
disabled
|
||||
label="Loading.."
|
||||
value="loading.."
|
||||
/>
|
||||
<p
|
||||
v-if="error"
|
||||
style="text-align:center;padding:5px;"
|
||||
>
|
||||
Error,refresh
|
||||
<n-icon
|
||||
style="cursor:pointer"
|
||||
type="md-refresh"
|
||||
color="#999"
|
||||
size="18"
|
||||
@click.stop="initItems"
|
||||
/>
|
||||
</p> -->
|
||||
<!-- <n-scrollbar
|
||||
style="max-height:120px;"
|
||||
> -->
|
||||
<!-- <n-popselect-option
|
||||
v-for="item in filterItems"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/> -->
|
||||
<!-- </n-scrollbar> -->
|
||||
</n-popselect>
|
||||
<n-popover
|
||||
v-else
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
opacity: opacitys.downOpacity,
|
||||
transform: 'scale(0.8)'
|
||||
}"
|
||||
@click.native="changeDownSort()"
|
||||
@click.stop="changeDownSort()"
|
||||
/>
|
||||
<n-icon
|
||||
type="md-arrow-dropup"
|
||||
@ -16,7 +16,7 @@
|
||||
opacity: opacitys.upOpacity,
|
||||
transform: 'scale(0.8)'
|
||||
}"
|
||||
@click.native="changeUpSort()"
|
||||
@click.stop="changeUpSort()"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
@ -26,20 +26,20 @@ const computeOpacity = (val) => {
|
||||
let self = {}
|
||||
switch (val) {
|
||||
case 0:
|
||||
self.upOpacity = 0.3
|
||||
self.downOpacity = 0.3
|
||||
self.upOpacity = 0.4
|
||||
self.downOpacity = 0.4
|
||||
break
|
||||
case 1:
|
||||
self.upOpacity = 1
|
||||
self.downOpacity = 0.3
|
||||
self.downOpacity = 0.4
|
||||
break
|
||||
case -1:
|
||||
self.upOpacity = 0.3
|
||||
self.upOpacity = 0.4
|
||||
self.downOpacity = 1
|
||||
break
|
||||
case null:
|
||||
self.upOpacity = 0.3
|
||||
self.downOpacity = 0.3
|
||||
self.upOpacity = 0.4
|
||||
self.downOpacity = 0.4
|
||||
break
|
||||
}
|
||||
return self
|
||||
@ -66,8 +66,8 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
upOpacity: 0.3,
|
||||
downOpacity: 0.3
|
||||
upOpacity: 0.4,
|
||||
downOpacity: 0.4
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -101,6 +101,15 @@ export default {
|
||||
}
|
||||
this.setSort(v)
|
||||
},
|
||||
changeSort () {
|
||||
if (this.value === 0 || this.value === null) {
|
||||
this.setSort(1)
|
||||
} else if (this.value === 1) {
|
||||
this.setSort(-1)
|
||||
} else {
|
||||
this.setSort(0)
|
||||
}
|
||||
},
|
||||
setSort (val) {
|
||||
this.$emit('input', val)
|
||||
this.$emit('onSortTypeChange', {
|
||||
@ -133,7 +142,6 @@ export default {
|
||||
display: block;
|
||||
height: 19px;
|
||||
position: absolute;
|
||||
color: #63e2b7 !important;
|
||||
transition: color 0.2s ease-in-out;
|
||||
font-size: 19px !important;
|
||||
font-weight: 400;
|
||||
|
||||
@ -2,6 +2,10 @@
|
||||
<div
|
||||
ref="tableWrapper"
|
||||
class="n-advance-table__wrapper n-advance-table"
|
||||
:class="{
|
||||
[`n-${synthesizedTheme}-theme`]: synthesizedTheme,
|
||||
'n-advance-table--col-border':colBorder
|
||||
}"
|
||||
>
|
||||
<div class="n-advance-table__operation">
|
||||
<div class="n-advance-table__operation--left">
|
||||
@ -30,8 +34,9 @@
|
||||
<div class="n-advance-table__tbody">
|
||||
<n-table
|
||||
ref="header"
|
||||
style="padding:0;border-bottom-left-radius:0;border-bottom-right-radius:0;background-color: #2b3147;"
|
||||
style="padding:0;border-bottom-left-radius:0;border-bottom-right-radius:0;"
|
||||
:style="colGroup"
|
||||
class="n-advance-table__header"
|
||||
>
|
||||
<colgroup>
|
||||
<col
|
||||
@ -51,6 +56,10 @@
|
||||
ref="theads"
|
||||
:key="column.key"
|
||||
:style="computeAlign(column)"
|
||||
:class="{
|
||||
'n-advance-table__sortable-column': column.sortable
|
||||
}"
|
||||
@click.native="()=>sortByColumn(column)"
|
||||
>
|
||||
<!-- 当前页全选 -->
|
||||
<n-checkbox
|
||||
@ -64,6 +73,7 @@
|
||||
v-if="column.sortable"
|
||||
:ref="'sorter_' + (column.key || i)"
|
||||
v-model="sortIndexs[column.key || i]"
|
||||
class="n-advance-table__header-icon"
|
||||
:column="column"
|
||||
:index="i"
|
||||
@onSortTypeChange="onSortTypeChange"
|
||||
@ -75,6 +85,7 @@
|
||||
<PopFilter
|
||||
v-if="column.onFilter && (column.filterItems || column.asynsFilterItems)"
|
||||
v-model="selectedFilter[column.key]"
|
||||
class="n-advance-table__header-icon"
|
||||
:column="column"
|
||||
:items="column.filterItems || column.asynsFilterItems"
|
||||
@on-filter="onFilter"
|
||||
@ -187,8 +198,9 @@ import row from '../row/index.js'
|
||||
import SortIcon from '../sortIcon'
|
||||
import PopFilter from '../popFilter'
|
||||
import searchInput from '../searchInput'
|
||||
import Loading from '../loading'
|
||||
import { noopFn } from '../../../utils/index'
|
||||
import withapp from '../../../mixins/withapp'
|
||||
import themeable from '../../../mixins/themeable'
|
||||
|
||||
export default {
|
||||
name: 'NAdvanceTable',
|
||||
@ -196,9 +208,13 @@ export default {
|
||||
row,
|
||||
SortIcon,
|
||||
PopFilter,
|
||||
searchInput,
|
||||
Loading
|
||||
searchInput
|
||||
|
||||
},
|
||||
mixins: [
|
||||
withapp,
|
||||
themeable
|
||||
],
|
||||
props: {
|
||||
search: {
|
||||
/**
|
||||
@ -264,6 +280,10 @@ export default {
|
||||
loading: {
|
||||
type: [Boolean],
|
||||
default: false
|
||||
},
|
||||
colBorder: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
@ -411,6 +431,7 @@ export default {
|
||||
this.searchDataNoSort = null
|
||||
this.checkBoxes = []
|
||||
this.currentPageAllSelect = false
|
||||
this.computeScollBar()
|
||||
},
|
||||
currentSearchColumn () {
|
||||
this.searchData = this.computeShowingData()
|
||||
@ -465,7 +486,7 @@ export default {
|
||||
this.wrapper = this.$refs.tableWrapper
|
||||
this.wrapperWidth = this.$refs.tableWrapper.offsetWidth
|
||||
this.tbodyWidth = this.relTable.offsetWidth
|
||||
this.scrollBarWidth = this.wrapperWidth - this.tbodyWidth
|
||||
|
||||
this.headerRealEl = this.$refs.header.$el.querySelector('thead')
|
||||
|
||||
// console.log(this.wrapperWidth, this.tbodyWidth)
|
||||
@ -486,6 +507,11 @@ export default {
|
||||
}
|
||||
})
|
||||
},
|
||||
sortByColumn (column) {
|
||||
if (!column.sortable || column.key === void 0) return
|
||||
const ref = this.$refs['sorter_' + column.key][0]
|
||||
ref.changeSort()
|
||||
},
|
||||
computeAlign (column) {
|
||||
if (column.align) {
|
||||
return {
|
||||
@ -589,6 +615,13 @@ export default {
|
||||
|
||||
event.stopPropagation()
|
||||
},
|
||||
computeScollBar () {
|
||||
this.$nextTick(() => {
|
||||
this.tbodyWidth = this.relTable.offsetWidth
|
||||
this.scrollBarWidth = this.wrapperWidth - this.tbodyWidth
|
||||
console.log('TCL: mounted -> this.scrollBarWidth', this.wrapperWidth, this.tbodyWidth)
|
||||
})
|
||||
},
|
||||
computeCustomWidthStl (column) {
|
||||
if (column.width) {
|
||||
let width = column.width
|
||||
@ -625,6 +658,7 @@ export default {
|
||||
init () {
|
||||
this.$nextTick(() => {
|
||||
this.wrapperWidth = this.$refs.tableWrapper.offsetWidth
|
||||
this.computeScollBar()
|
||||
|
||||
// console.log(this.relTable.offsetWidth)
|
||||
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
<template>
|
||||
<div
|
||||
class="n-checkbox"
|
||||
:class="{'n-checkbox--checked': value, 'n-checkbox--disabled': disabled, 'n-checkbox--indeterminate': indeterminate }"
|
||||
|
||||
:class="{'n-checkbox--checked': value, 'n-checkbox--disabled': disabled, 'n-checkbox--indeterminate': indeterminate,[`n-${synthesizedTheme}-theme`]: synthesizedTheme, }"
|
||||
>
|
||||
<div
|
||||
class="n-checkbox__checkbox"
|
||||
@ -18,8 +19,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import withapp from '../../../mixins/withapp'
|
||||
import themeable from '../../../mixins/themeable'
|
||||
|
||||
export default {
|
||||
name: 'NCheckbox',
|
||||
mixins: [
|
||||
withapp,
|
||||
themeable
|
||||
],
|
||||
props: {
|
||||
label: {
|
||||
type: [Number, Boolean, String],
|
||||
|
||||
@ -1,14 +1,24 @@
|
||||
<template>
|
||||
<div class="n-table">
|
||||
<table>
|
||||
<div
|
||||
class="n-table"
|
||||
:class="{
|
||||
|
||||
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
|
||||
}"
|
||||
>
|
||||
<table cellspacing="0">
|
||||
<slot>default table content</slot>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import withapp from '../../../mixins/withapp'
|
||||
import themeable from '../../../mixins/themeable'
|
||||
|
||||
export default {
|
||||
name: 'NTable'
|
||||
name: 'NTable',
|
||||
mixins: [withapp, themeable]
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,84 +1,201 @@
|
||||
@import "./mixins/mixins.scss";
|
||||
@import "./themes/vars.scss";
|
||||
@include b(advance-table){
|
||||
@include e(wrapper){
|
||||
width: 100%;
|
||||
}
|
||||
@include e(tbody){
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 3px 20px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
@include e(td-text){
|
||||
&-center{
|
||||
text-align: center;
|
||||
}
|
||||
&-left{
|
||||
text-align: left;
|
||||
}
|
||||
&-right{
|
||||
text-align: right;
|
||||
}
|
||||
@include m(ellipsis){
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
&>*{
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
@include themes-mixin {
|
||||
@include b(advance-table--col-border) {
|
||||
table {
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
border-right: $--table-td-border-right;
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
td {
|
||||
border-right: $--table-td-border-right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include e(no-data-tip){
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: table-cell;
|
||||
}
|
||||
@include e(pagination){
|
||||
margin-top: 27px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
@include e(operation){
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
&--right,&--left{
|
||||
display: flex;
|
||||
@include b(advance-table) {
|
||||
@include once {
|
||||
@include e(wrapper) {
|
||||
width: 100%;
|
||||
}
|
||||
@include e(tbody) {
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
}
|
||||
@include e(td-text) {
|
||||
&-center {
|
||||
text-align: center;
|
||||
}
|
||||
&-left {
|
||||
text-align: left;
|
||||
}
|
||||
&-right {
|
||||
text-align: right;
|
||||
}
|
||||
@include m(ellipsis) {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
& > * {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include e(no-data-tip) {
|
||||
padding: 5px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
display: table-cell;
|
||||
}
|
||||
@include e(pagination) {
|
||||
margin-top: 27px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
@include e(operation) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
&--right,
|
||||
&--left {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
@include e(sortable-column) {
|
||||
cursor: pointer;
|
||||
}
|
||||
@include b(table) {
|
||||
table {
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
table-layout: fixed;
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 2.5px;
|
||||
}
|
||||
// &::-webkit-scrollbar-thumb:hover {
|
||||
// background: rgba(255, 255, 255, 0.3);
|
||||
// }
|
||||
&::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar:horizontal {
|
||||
height: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@include b(table) {
|
||||
// background-color: #2b3147;
|
||||
table {
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
table-layout: fixed;
|
||||
// width: auto;
|
||||
@include e(tbody) {
|
||||
box-shadow: 0 3px 20px 6px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
&::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
@include b(table) {
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 2.5px;
|
||||
background: $--table-scrollbar-color;
|
||||
}
|
||||
}
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 2.5px;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
&::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
&::-webkit-scrollbar:horizontal {
|
||||
height: 5px;
|
||||
}
|
||||
table thead tr th:last-of-type {
|
||||
padding-left: 32px;
|
||||
@include e(header) {
|
||||
background-color: $--table-header-background;
|
||||
i {
|
||||
color: $--table-header-icon-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// @include b(advance-table){
|
||||
// @include e(wrapper){
|
||||
// width: 100%;
|
||||
// }
|
||||
// @include e(tbody){
|
||||
// overflow: hidden;
|
||||
// border-radius: 12px;
|
||||
// box-shadow: 0 3px 20px 6px rgba(0, 0, 0, 0.2);
|
||||
// }
|
||||
// @include e(td-text){
|
||||
// &-center{
|
||||
// text-align: center;
|
||||
// }
|
||||
// &-left{
|
||||
// text-align: left;
|
||||
// }
|
||||
// &-right{
|
||||
// text-align: right;
|
||||
// }
|
||||
// @include m(ellipsis){
|
||||
// text-overflow: ellipsis;
|
||||
// overflow: hidden;
|
||||
// white-space: nowrap;
|
||||
// &>*{
|
||||
// text-overflow: ellipsis;
|
||||
// overflow: hidden;
|
||||
// white-space: nowrap;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include e(no-data-tip){
|
||||
// padding: 5px;
|
||||
// text-align: center;
|
||||
// width: 100%;
|
||||
// display: table-cell;
|
||||
// }
|
||||
// @include e(pagination){
|
||||
// margin-top: 27px;
|
||||
// display: flex;
|
||||
// justify-content: flex-end;
|
||||
// }
|
||||
// @include e(operation){
|
||||
// display: flex;
|
||||
// justify-content:space-between;
|
||||
// &--right,&--left{
|
||||
// display: flex;
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
// @include b(table) {
|
||||
// // background-color: #2b3147;
|
||||
// table {
|
||||
// word-wrap: break-word;
|
||||
// word-break: break-all;
|
||||
// table-layout: fixed;
|
||||
// // width: auto;
|
||||
// }
|
||||
// &::-webkit-scrollbar {
|
||||
// width: 5px;
|
||||
// }
|
||||
// &::-webkit-scrollbar-track {
|
||||
// background: transparent;
|
||||
// }
|
||||
// &::-webkit-scrollbar-thumb {
|
||||
// background: rgba(255, 255, 255, 0.2);
|
||||
// border-radius: 2.5px;
|
||||
// }
|
||||
// &::-webkit-scrollbar-thumb:hover {
|
||||
// background: rgba(255, 255, 255, 0.3);
|
||||
// }
|
||||
// &::-webkit-scrollbar-corner {
|
||||
// background: transparent;
|
||||
// }
|
||||
// &::-webkit-scrollbar:horizontal {
|
||||
// height: 5px;
|
||||
// }
|
||||
// table thead tr th:last-of-type {
|
||||
// padding-left: 32px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -1,104 +1,257 @@
|
||||
@import './mixins/mixins.scss';
|
||||
@import './themes/vars.scss';
|
||||
@import "./mixins/mixins.scss";
|
||||
@import "./themes/vars.scss";
|
||||
|
||||
@include b(checkbox-group) {
|
||||
.n-checkbox {
|
||||
margin-right: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
@include b(checkbox) {
|
||||
& {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.n-checkbox__label {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.n-checkbox__checkbox {
|
||||
cursor: pointer;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
box-sizing: border-box;
|
||||
box-shadow: inset 0 0 0 1px $checkbox-border-color;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
transition: box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
|
||||
@include themes-mixin {
|
||||
@include once {
|
||||
@include b(checkbox-group) {
|
||||
.n-checkbox {
|
||||
margin-right: 18px;
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
box-sizing: content-box;
|
||||
content: "";
|
||||
border-bottom: 2px solid #5C647B;
|
||||
width: 8px;
|
||||
left: 3px;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
opacity: 0;
|
||||
transform: scale(.5);
|
||||
transform-origin: center;
|
||||
transition: transform .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
|
||||
}
|
||||
&::after {
|
||||
box-sizing: content-box;
|
||||
content: "";
|
||||
border: 1.5px solid #5C647B;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
height: 8px;
|
||||
left: 5px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
opacity: 0;
|
||||
transform: rotate(45deg) scale(.5);
|
||||
width: 3px;
|
||||
transform-origin: center;
|
||||
transition: transform .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
|
||||
}
|
||||
}
|
||||
&.n-checkbox--checked {
|
||||
.n-checkbox__checkbox {
|
||||
background-color: $checkbox-background--active;
|
||||
box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
|
||||
&::after {
|
||||
opacity: 1;
|
||||
transform: rotate(45deg) scale(1);
|
||||
@include b(checkbox) {
|
||||
& {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.n-checkbox__label {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
// color: #fff;
|
||||
margin-left: 8px;
|
||||
}
|
||||
.n-checkbox__checkbox {
|
||||
cursor: pointer;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
box-sizing: border-box;
|
||||
// box-shadow: inset 0 0 0 1px $checkbox-border-color;
|
||||
background-color: transparent;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
transition: box-shadow 0.3s $default-cubic-bezier,
|
||||
background-color 0.3s $default-cubic-bezier;
|
||||
// &:hover {
|
||||
// box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
|
||||
// }
|
||||
&::before {
|
||||
box-sizing: content-box;
|
||||
content: "";
|
||||
// border-bottom: 2px solid #5c637a;
|
||||
width: 8px;
|
||||
left: 3px;
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
transform-origin: center;
|
||||
transition: transform 0.3s $default-cubic-bezier,
|
||||
opacity 0.3s $default-cubic-bezier,
|
||||
border-color 0.3s $default-cubic-bezier;
|
||||
}
|
||||
&::after {
|
||||
box-sizing: content-box;
|
||||
content: "";
|
||||
// border: 1.5px solid #5C647B;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
height: 8px;
|
||||
left: 5px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
opacity: 0;
|
||||
transform: rotate(45deg) scale(0.5);
|
||||
width: 3px;
|
||||
transform-origin: center;
|
||||
transition: transform 0.3s $default-cubic-bezier,
|
||||
opacity 0.3s $default-cubic-bezier,
|
||||
border-color 0.3s $default-cubic-bezier;
|
||||
}
|
||||
}
|
||||
&.n-checkbox--checked {
|
||||
.n-checkbox__checkbox {
|
||||
// background-color: $checkbox-background--active;
|
||||
// box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
|
||||
&::after {
|
||||
opacity: 1;
|
||||
transform: rotate(45deg) scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.n-checkbox--indeterminate {
|
||||
.n-checkbox__checkbox {
|
||||
// background-color: $checkbox-background--active;
|
||||
// box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
|
||||
&::after {
|
||||
opacity: 0;
|
||||
}
|
||||
&::before {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.n-checkbox--disabled {
|
||||
.n-checkbox__checkbox {
|
||||
cursor: not-allowed;
|
||||
// background-color: rgba(255,255,255,.16);
|
||||
// box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
|
||||
&::after {
|
||||
// border: 1.5px solid rgba(255,255,255,.16);
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
// &::before {
|
||||
// border-bottom: 1.5px solid rgba(255,255,255,.16);
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.n-checkbox--indeterminate {
|
||||
@include b(checkbox) {
|
||||
.n-checkbox__label {
|
||||
color: $--checkbox-font-color;
|
||||
}
|
||||
.n-checkbox__checkbox {
|
||||
background-color: $checkbox-background--active;
|
||||
box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
|
||||
&::after {
|
||||
opacity: 0;
|
||||
box-shadow: inset 0 0 0 1px $--checkbox-border-color;
|
||||
&:hover {
|
||||
box-shadow: inset 0 0 0 1px $--checkbox-border-color--active;
|
||||
}
|
||||
&::before {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
border-bottom: 2px solid $--checkbox-indeterminate-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.n-checkbox--disabled {
|
||||
.n-checkbox__checkbox {
|
||||
cursor: not-allowed;
|
||||
background-color: rgba(255,255,255,.16);
|
||||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
|
||||
&::after {
|
||||
border: 1.5px solid rgba(255,255,255,.16);
|
||||
border: 1.5px solid $--checkbox-indeterminate-color;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
&::before {
|
||||
border-bottom: 1.5px solid rgba(255,255,255,.16);
|
||||
}
|
||||
|
||||
&.n-checkbox--checked,
|
||||
&.n-checkbox--indeterminate {
|
||||
.n-checkbox__checkbox {
|
||||
background-color: $--checkbox-border-color--active;
|
||||
box-shadow: inset 0 0 0 1px $--checkbox-border-color--active;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.n-checkbox--disabled {
|
||||
.n-checkbox__checkbox {
|
||||
background-color: $--checkbox-disabled-bg-color;
|
||||
box-shadow: inset 0 0 0 1px $--checkbox-disabled;
|
||||
&::after {
|
||||
border: 1.5px solid $--checkbox-disabled;
|
||||
border-left: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
&::before {
|
||||
border-bottom: 2px solid $--checkbox-disabled;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// @include b(checkbox-group) {
|
||||
// .n-checkbox {
|
||||
// margin-right: 18px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// @include b(checkbox) {
|
||||
// & {
|
||||
// display: inline-flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
// }
|
||||
// .n-checkbox__label {
|
||||
// user-select: none;
|
||||
// cursor: pointer;
|
||||
// font-size: 13px;
|
||||
// color: #fff;
|
||||
// margin-left: 8px;
|
||||
// }
|
||||
// .n-checkbox__checkbox {
|
||||
// cursor: pointer;
|
||||
// height: 14px;
|
||||
// width: 14px;
|
||||
// box-sizing: border-box;
|
||||
// box-shadow: inset 0 0 0 1px $checkbox-border-color;
|
||||
// background-color: transparent;
|
||||
// border-radius: 4px;
|
||||
// position: relative;
|
||||
// transition: box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
|
||||
// &:hover {
|
||||
// box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
|
||||
// }
|
||||
// &::before {
|
||||
// box-sizing: content-box;
|
||||
// content: "";
|
||||
// border-bottom: 2px solid #5C647B;
|
||||
// width: 8px;
|
||||
// left: 3px;
|
||||
// position: absolute;
|
||||
// top: 6px;
|
||||
// opacity: 0;
|
||||
// transform: scale(.5);
|
||||
// transform-origin: center;
|
||||
// transition: transform .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
|
||||
// }
|
||||
// &::after {
|
||||
// box-sizing: content-box;
|
||||
// content: "";
|
||||
// border: 1.5px solid #5C647B;
|
||||
// border-left: 0;
|
||||
// border-top: 0;
|
||||
// height: 8px;
|
||||
// left: 5px;
|
||||
// position: absolute;
|
||||
// top: 1px;
|
||||
// opacity: 0;
|
||||
// transform: rotate(45deg) scale(.5);
|
||||
// width: 3px;
|
||||
// transform-origin: center;
|
||||
// transition: transform .3s $default-cubic-bezier, opacity .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
|
||||
// }
|
||||
// }
|
||||
// &.n-checkbox--checked {
|
||||
// .n-checkbox__checkbox {
|
||||
// background-color: $checkbox-background--active;
|
||||
// box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
|
||||
// &::after {
|
||||
// opacity: 1;
|
||||
// transform: rotate(45deg) scale(1);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// &.n-checkbox--indeterminate {
|
||||
// .n-checkbox__checkbox {
|
||||
// background-color: $checkbox-background--active;
|
||||
// box-shadow: inset 0 0 0 1px $checkbox-border-color--active;
|
||||
// &::after {
|
||||
// opacity: 0;
|
||||
// }
|
||||
// &::before {
|
||||
// opacity: 1;
|
||||
// transform: scale(1);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// &.n-checkbox--disabled {
|
||||
// .n-checkbox__checkbox {
|
||||
// cursor: not-allowed;
|
||||
// background-color: rgba(255,255,255,.16);
|
||||
// box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
|
||||
// &::after {
|
||||
// border: 1.5px solid rgba(255,255,255,.16);
|
||||
// border-left: 0;
|
||||
// border-top: 0;
|
||||
// }
|
||||
// &::before {
|
||||
// border-bottom: 1.5px solid rgba(255,255,255,.16);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
@ -1,55 +1,140 @@
|
||||
@import "./mixins/mixins.scss";
|
||||
@import "./themes/vars.scss";
|
||||
|
||||
@include b(table) {
|
||||
width: 100%;
|
||||
border-radius: 12px;
|
||||
font-size: $table-font-size;
|
||||
overflow: hidden;
|
||||
box-shadow: $table-box-shadow;
|
||||
padding-bottom: 8px;
|
||||
background-color: $table-body-background-color;
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
thead {
|
||||
background-color: $table-header-background-color;
|
||||
color: $primary-text-color;
|
||||
tr {
|
||||
th {
|
||||
padding: 16px 6px 16px 6px;
|
||||
text-align: left;
|
||||
border: none;
|
||||
@include themes-mixin {
|
||||
@include b(table) {
|
||||
@include once {
|
||||
width: 100%;
|
||||
border-radius: 12px;
|
||||
font-size: $table-font-size;
|
||||
overflow: hidden;
|
||||
padding-bottom: 8px;
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
width: 100%;
|
||||
thead {
|
||||
tr {
|
||||
th {
|
||||
padding: 12px 6px 12px 19px;
|
||||
text-align: left;
|
||||
border: none;
|
||||
font-weight: 400;
|
||||
}
|
||||
th:nth-child(1) {
|
||||
padding-left: 21px;
|
||||
border-radius: 12px 0 0 0;
|
||||
}
|
||||
th:nth-last-child(1) {
|
||||
padding-left: 21px;
|
||||
border-radius: 0 12px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
th:nth-child(1) {
|
||||
padding-left: 32px;
|
||||
border-radius: 12px 0 0 0;
|
||||
}
|
||||
th:nth-last-child(1) {
|
||||
padding-left: 32px;
|
||||
border-radius: 0 12px 0 0;
|
||||
tbody {
|
||||
background-color: $--table-body-background;
|
||||
color: $--table-body-color;
|
||||
tr {
|
||||
td {
|
||||
padding: 16px 6px 12px 19px;
|
||||
text-align: left;
|
||||
border: none;
|
||||
}
|
||||
td:nth-child(1) {
|
||||
padding-left: 21px;
|
||||
}
|
||||
td:nth-last-child(1) {
|
||||
padding-left: 21px;
|
||||
}
|
||||
}
|
||||
tr:hover {
|
||||
background-color: $--table-row-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
background-color: $table-body-background-color;
|
||||
color: $regular-text-color;
|
||||
tr {
|
||||
td {
|
||||
padding: 16px 6px 12px 6px;
|
||||
text-align: left;
|
||||
border: none;
|
||||
}
|
||||
td:nth-child(1) {
|
||||
padding-left: 32px;
|
||||
}
|
||||
td:nth-last-child(1) {
|
||||
padding-left: 32px;
|
||||
background-color: $--table-body-background;
|
||||
box-shadow: $--table-box-shadow;
|
||||
|
||||
table {
|
||||
border-collapse: separate;
|
||||
thead {
|
||||
background-color: $--table-header-background;
|
||||
color: $--table-header-color;
|
||||
tr {
|
||||
th {
|
||||
&:last-of-type {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tr:hover {
|
||||
background-color: #2b3147;
|
||||
tbody {
|
||||
background-color: $--table-body-background;
|
||||
color: $--table-body-color;
|
||||
tr:hover {
|
||||
background-color: $--table-row-hover;
|
||||
}
|
||||
tr {
|
||||
td {
|
||||
&:last-of-type {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// @include b(table) {
|
||||
// width: 100%;
|
||||
// border-radius: 12px;
|
||||
// font-size: $table-font-size;
|
||||
// overflow: hidden;
|
||||
// // box-shadow: $table-box-shadow;
|
||||
// padding-bottom: 8px;
|
||||
// // background-color: $table-body-background-color;
|
||||
// table {
|
||||
// border-collapse: collapse;
|
||||
// width: 100%;
|
||||
// thead {
|
||||
// background-color: $table-header-background-color;
|
||||
// color: $primary-text-color;
|
||||
// tr {
|
||||
// th {
|
||||
// padding: 16px 6px 16px 6px;
|
||||
// text-align: left;
|
||||
// border: none;
|
||||
// }
|
||||
// th:nth-child(1) {
|
||||
// padding-left: 32px;
|
||||
// border-radius: 12px 0 0 0;
|
||||
// }
|
||||
// th:nth-last-child(1) {
|
||||
// padding-left: 32px;
|
||||
// border-radius: 0 12px 0 0;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// tbody {
|
||||
// background-color: $table-body-background-color;
|
||||
// color: $regular-text-color;
|
||||
// tr {
|
||||
// td {
|
||||
// padding: 16px 6px 12px 6px;
|
||||
// text-align: left;
|
||||
// border: none;
|
||||
// }
|
||||
// td:nth-child(1) {
|
||||
// padding-left: 32px;
|
||||
// }
|
||||
// td:nth-last-child(1) {
|
||||
// padding-left: 32px;
|
||||
// }
|
||||
// }
|
||||
// tr:hover {
|
||||
// background-color: #2b3147;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
4
styles/themes/dark/components/AdvanceTable.scss
Normal file
4
styles/themes/dark/components/AdvanceTable.scss
Normal file
@ -0,0 +1,4 @@
|
||||
@mixin setup-dark-advance-table {
|
||||
$--table-header-icon-color: $primary-6 !global;
|
||||
$--table-scrollbar-color: rgba(255, 255, 255, 0.2) !global;
|
||||
}
|
||||
9
styles/themes/dark/components/CheckBox.scss
Normal file
9
styles/themes/dark/components/CheckBox.scss
Normal file
@ -0,0 +1,9 @@
|
||||
@mixin setup-dark-checkbox {
|
||||
$border-color: rgba(255, 255, 255, 0.4);
|
||||
$--checkbox-font-color: $neutral-3 !global;
|
||||
$--checkbox-border-color: $border-color !global;
|
||||
$--checkbox-border-color--active: $primary-6 !global;
|
||||
$--checkbox-indeterminate-color: $neutral-10 !global;
|
||||
$--checkbox-disabled: $border-color !global;
|
||||
$--checkbox-disabled-bg-color: rgba(255, 255, 255, 0.16) !global;
|
||||
}
|
||||
11
styles/themes/dark/components/Table.scss
Normal file
11
styles/themes/dark/components/Table.scss
Normal file
@ -0,0 +1,11 @@
|
||||
@mixin setup-dark-table {
|
||||
$--table-header-background: #2b3147 !global;
|
||||
$--table-body-background: #1f263e !global;
|
||||
$--table-header-color: $neutral-3 !global;
|
||||
$--table-body-color: $neutral-4 !global;
|
||||
$--table-row-hover: $--table-header-background !global;
|
||||
$--table-box-shadow: 0 3px 20px 6px rgba(0, 0, 0, .2) !global;
|
||||
$--table-border: none;
|
||||
//TODO:ui设计深色color
|
||||
$--table-td-border-right: none !global;
|
||||
}
|
||||
@ -7,9 +7,13 @@
|
||||
@import "components/BasePicker.scss";
|
||||
@import "components/BaseCancelMark.scss";
|
||||
@import "components/Tag.scss";
|
||||
@import "components/Table.scss";
|
||||
@import 'components/AdvanceTable.scss';
|
||||
|
||||
@import "components/Popover.scss";
|
||||
@import "components/Tooltip.scss";
|
||||
@import "components/Confirm.scss";
|
||||
@import "components/CheckBox.scss";
|
||||
@import "components/Switch.scss";
|
||||
@import "components/Message.scss";
|
||||
@import "components/LoadingBar.scss";
|
||||
@ -47,9 +51,12 @@
|
||||
@include setup-dark-base-picker;
|
||||
@include setup-dark-base-cancel-mark;
|
||||
@include setup-dark-tag;
|
||||
@include setup-dark-table;
|
||||
@include setup-dark-advance-table;
|
||||
@include setup-dark-popover;
|
||||
@include setup-dark-tooltip;
|
||||
@include setup-dark-confirm;
|
||||
@include setup-dark-checkbox;
|
||||
@include setup-dark-switch;
|
||||
@include setup-dark-message;
|
||||
@include setup-dark-loading-bar;
|
||||
|
||||
4
styles/themes/light/components/AdvanceTable.scss
Normal file
4
styles/themes/light/components/AdvanceTable.scss
Normal file
@ -0,0 +1,4 @@
|
||||
@mixin setup-light-advance-table {
|
||||
$--table-header-icon-color: $primary-6 !global;
|
||||
$--table-scrollbar-color: #ababab !global;
|
||||
}
|
||||
8
styles/themes/light/components/CheckBox.scss
Normal file
8
styles/themes/light/components/CheckBox.scss
Normal file
@ -0,0 +1,8 @@
|
||||
@mixin setup-light-checkbox {
|
||||
$--checkbox-font-color: $neutral-3 !global;
|
||||
$--checkbox-border-color: $neutral-5 !global;
|
||||
$--checkbox-border-color--active: $primary-6 !global;
|
||||
$--checkbox-indeterminate-color: $neutral-10 !global;
|
||||
$--checkbox-disabled: $neutral-5 !global;
|
||||
$--checkbox-disabled-bg-color: $neutral-8 !global;
|
||||
}
|
||||
10
styles/themes/light/components/Table.scss
Normal file
10
styles/themes/light/components/Table.scss
Normal file
@ -0,0 +1,10 @@
|
||||
@mixin setup-light-table {
|
||||
$--table-header-background: #e8e8e8 !global;
|
||||
$--table-body-background: #fff !global;
|
||||
$--table-header-color: #262626 !global;
|
||||
$--table-body-color: #595959 !global;
|
||||
$--table-row-hover: rgba(0,0,0,0.03) !global;
|
||||
$--table-box-shadow: none !global;
|
||||
$--table-border:1px solid rgba(0,0,0,0.15) !global;
|
||||
$--table-td-border-right: 1px solid $alpha-neutral-6 !global;
|
||||
}
|
||||
@ -7,9 +7,13 @@
|
||||
@import "components/BasePicker.scss";
|
||||
@import "components/BaseCancelMark.scss";
|
||||
@import "components/Tag.scss";
|
||||
@import "components/Table.scss";
|
||||
@import "components/AdvanceTable.scss";
|
||||
|
||||
@import "components/Popover.scss";
|
||||
@import "components/Tooltip.scss";
|
||||
@import "components/Confirm.scss";
|
||||
@import "components/CheckBox.scss";
|
||||
@import "components/Switch.scss";
|
||||
@import "components/Message.scss";
|
||||
@import "components/LoadingBar.scss";
|
||||
@ -43,9 +47,12 @@
|
||||
@include setup-light-base-picker;
|
||||
@include setup-light-base-cancel-mark;
|
||||
@include setup-light-tag;
|
||||
@include setup-light-table;
|
||||
@include setup-light-advance-table;
|
||||
@include setup-light-popover;
|
||||
@include setup-light-tooltip;
|
||||
@include setup-light-confirm;
|
||||
@include setup-light-checkbox;
|
||||
@include setup-light-switch;
|
||||
@include setup-light-message;
|
||||
@include setup-light-loading-bar;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user