From 00429dcd57f3373d596a9776cc90b50a4467a564 Mon Sep 17 00:00:00 2001 From: MNZhu Date: Thu, 23 Feb 2023 10:55:10 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(table):=20=E6=96=B0=E5=A2=9E=E7=A7=BB?= =?UTF-8?q?=E5=8A=A8=E7=AB=AFtable=E7=BB=84=E4=BB=B6=E5=92=8Cdemo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: MNZhu --- src/base/basic-var.less | 2 + src/table/index.js | 26 ++++++++ src/table/index.less | 141 ++++++++++++++++++++++++++++++++++++++++ src/table/vars.less | 26 ++++++++ 4 files changed, 195 insertions(+) create mode 100644 src/table/index.js create mode 100644 src/table/index.less create mode 100644 src/table/vars.less diff --git a/src/base/basic-var.less b/src/base/basic-var.less index 95bd91f..8194bc8 100644 --- a/src/base/basic-var.less +++ b/src/base/basic-var.less @@ -90,4 +90,6 @@ /* 蒙层色*/ --ti-mobile-common-bg-color-white: var(--ti-mobile-base-color-bg-3); /* 背景_白*/ + --ti-mobile-common-bg-color-main: var(--ti-mobile-base-color-brand-1); /* 背景_蓝*/ + --ti-mobile-common-bg-color-light: var(--ti-mobile-base-color-bg-2); /* 背景_浅灰*/ } diff --git a/src/table/index.js b/src/table/index.js new file mode 100644 index 0000000..4d1109d --- /dev/null +++ b/src/table/index.js @@ -0,0 +1,26 @@ +/** + * Copyright (c) 2022 - present TinyVue Authors. + * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd. + * + * Use of this source code is governed by an MIT-style license. + * + * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL, + * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR + * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. + * + */ + +export default { + "tiny-mobile-table-text-color": "#191919", + "tiny-mobile-table-head-text-color": "#999999", + "tiny-mobile-table-bg-color": "#fafafa", + "tiny-mobile-table-odd-bg-color": "#ffffff", + "tiny-mobile-table-disabled-text-color": "#dbdbdb", + "tiny-mobile-table-disabled-bg-color": "#f1f1f1", + "tiny-mobile-table-nodata-text-color": "#909399", + "tiny-mobile-table-td-height": "44px", + "tiny-mobile-table-td-font-size": "12px", + "tiny-mobile-table-thead-bg-color": "#fafafa", + "tiny-mobile-table-icon-font-size": "16px", + "tiny-mobile-table-check-icon-color": "#4a79fe", +}; diff --git a/src/table/index.less b/src/table/index.less new file mode 100644 index 0000000..16f3503 --- /dev/null +++ b/src/table/index.less @@ -0,0 +1,141 @@ +/** +* Copyright (c) 2022 - present TinyVue Authors. +* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd. +* +* Use of this source code is governed by an MIT-style license. +* +* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL, +* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR +* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. +* +*/ + +@import '../custom.less'; +@import './vars.less'; + +@table-prefix-cls: ~'@{css-prefix}mobile-table'; +@table-header-prefix-cls: ~'@{css-prefix}mobile-table-header'; +@table-cell-prefix-cls: ~'@{css-prefix}mobile-table-cell'; +@svg-prefix-cls: ~'@{css-prefix}mobile-svg'; + +.@{table-prefix-cls} { + .component-css-vars-table(); + + &.simple { + overflow: auto; + + table { + table-layout: fixed; + + tr { + display: table-row; + vertical-align: inherit; + border-color: inherit; + } + + tbody { + + tr { + color: var(--ti-mobile-table-text-color); + font-weight: 400; + + td { + background: var(--ti-mobile-table-bg-color); + } + + &:nth-child(odd), td { + background: var(--ti-mobile-table-odd-bg-color); + } + + &.is-disabled { + background: var(--ti-mobile-table-disabled-bg-color); + color: var(--ti-mobile-table-disabled-text-color); + } + } + + .noData { + width: 100%; + height: 100%; + text-align: center; + color: var(--ti-mobile-table-nodata-text-color); + display: flex; + justify-content: center; + align-items: center; + } + } + + th { + padding-left: 20px; + height: var(--ti-mobile-table-td-height); + border-left: none; + } + + td { + padding-left: 20px; + height: var(--ti-mobile-table-td-height); + font-size: var(--ti-mobile-table-td-font-size); + + .overflow { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + + thead { + text-align: left; + color: var(--ti-mobile-table-head-text-color); + + th { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + text-align: left; + font-size: var(--ti-mobile-table-td-font-size); + color: var(--ti-mobile-table-head-text-color); + font-weight: 500; + line-height: 1.7em; + background: var(--ti-mobile-table-thead-bg-color); + + .overflow { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + } + } + + .fixed { + position: sticky; + z-index: 1; + } + } + + .@{table-cell-prefix-cls} { + display: flex; + align-items: center; + height: 100%; + position: relative; + + .@{svg-prefix-cls} { + font-size: var(--ti-mobile-common-font-size-2); + font-size: var(--ti-mobile-table-icon-font-size); + fill: var(--ti-mobile-table-border-color); + + &.is-check { + fill: var(--ti-mobile-table-check-icon-color); + } + } + + .shadow { + position: absolute; + right: 0; + top: 0; + height: 100%; + width: 8px; + opacity: 0.05; + background: linear-gradient(270deg, rgba(0,0,0,0), #000); + } + } + } +} diff --git a/src/table/vars.less b/src/table/vars.less new file mode 100644 index 0000000..19c7e92 --- /dev/null +++ b/src/table/vars.less @@ -0,0 +1,26 @@ +/** +* Copyright (c) 2022 - present TinyVue Authors. +* Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd. +* +* Use of this source code is governed by an MIT-style license. +* +* THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL, +* BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR +* A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS. +* +*/ + +.component-css-vars-table() { + --ti-mobile-table-text-color: var(--ti-mobile-common-color-text-primary, #191919); + --ti-mobile-table-head-text-color: var(--ti-mobile-common-color-text-weaken-dark, #999999); + --ti-mobile-table-bg-color: #fafafa; + --ti-mobile-table-odd-bg-color: var(--ti-mobile-common-bg-color-white, #ffffff); + --ti-mobile-table-disabled-text-color: var(--ti-mobile-common-color-text-weaken-disabled, #dbdbdb); + --ti-mobile-table-disabled-bg-color: #f1f1f1; + --ti-mobile-table-nodata-text-color: #909399; + --ti-mobile-table-td-height: 44px; + --ti-mobile-table-td-font-size: 12px; + --ti-mobile-table-thead-bg-color: var(--ti-mobile-common-bg-color-light, #fafafa); + --ti-mobile-table-icon-font-size: 16px; + --ti-mobile-table-check-icon-color: var(--ti-mobile-common-bg-color-main, #4a79fe); +} From a126ee7d8bc4aac01d5007c048c16dc5ea56440d Mon Sep 17 00:00:00 2001 From: MNZhu Date: Thu, 23 Feb 2023 11:12:50 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix(table):=20=E6=95=B4=E6=94=B9=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: MNZhu --- src/table/index.less | 1 - src/table/vars.less | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/table/index.less b/src/table/index.less index 16f3503..669e7dc 100644 --- a/src/table/index.less +++ b/src/table/index.less @@ -118,7 +118,6 @@ position: relative; .@{svg-prefix-cls} { - font-size: var(--ti-mobile-common-font-size-2); font-size: var(--ti-mobile-table-icon-font-size); fill: var(--ti-mobile-table-border-color); diff --git a/src/table/vars.less b/src/table/vars.less index 19c7e92..b80e8c6 100644 --- a/src/table/vars.less +++ b/src/table/vars.less @@ -14,7 +14,7 @@ --ti-mobile-table-text-color: var(--ti-mobile-common-color-text-primary, #191919); --ti-mobile-table-head-text-color: var(--ti-mobile-common-color-text-weaken-dark, #999999); --ti-mobile-table-bg-color: #fafafa; - --ti-mobile-table-odd-bg-color: var(--ti-mobile-common-bg-color-white, #ffffff); + --ti-mobile-table-odd-bg-color: #fff; --ti-mobile-table-disabled-text-color: var(--ti-mobile-common-color-text-weaken-disabled, #dbdbdb); --ti-mobile-table-disabled-bg-color: #f1f1f1; --ti-mobile-table-nodata-text-color: #909399;