From e5e88bdd05cceb81e1677d2ef63bbe7d63b555d3 Mon Sep 17 00:00:00 2001 From: xuliangzhan Date: Wed, 17 Apr 2024 12:55:42 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E8=A1=A8=E6=A0=BC=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E5=8F=8A=E7=B1=BB=E5=9E=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- packages/table/src/cell.ts | 6 ++- styles/base/checked.scss | 75 ----------------------------------- styles/checkbox.scss | 3 +- styles/export.scss | 4 +- styles/filter.scss | 4 +- styles/helpers/mixin.scss | 81 +++++++++++++++++++++++++++++++++++++- styles/radio.scss | 3 +- styles/table.scss | 10 +---- styles/toolbar.scss | 4 +- types/loading.d.ts | 4 +- 11 files changed, 97 insertions(+), 99 deletions(-) delete mode 100644 styles/base/checked.scss diff --git a/package.json b/package.json index 4269cfb9e..8db7981d8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vxe-table", - "version": "4.6.0-beta.5", + "version": "4.6.0-beta.7", "description": "一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...", "scripts": { "update": "npm install --legacy-peer-deps", diff --git a/packages/table/src/cell.ts b/packages/table/src/cell.ts index 971f046a8..780c09dfa 100644 --- a/packages/table/src/cell.ts +++ b/packages/table/src/cell.ts @@ -509,7 +509,8 @@ export const Cell = { class: ['vxe-cell--checkbox', { 'is--checked': isChecked, 'is--disabled': isDisabled, - 'is--indeterminate': indeterminate + 'is--indeterminate': indeterminate, + 'is--hidden': !isVisible }], ...ons }, checkVNs) @@ -577,7 +578,8 @@ export const Cell = { class: ['vxe-cell--checkbox', { 'is--checked': isChecked, 'is--disabled': isDisabled, - 'is--indeterminate': indeterminateField && !isChecked ? row[indeterminateField] : isIndeterminate + 'is--indeterminate': indeterminateField && !isChecked ? row[indeterminateField] : isIndeterminate, + 'is--hidden': !isVisible }], ...ons }, checkVNs) diff --git a/styles/base/checked.scss b/styles/base/checked.scss deleted file mode 100644 index 63a316958..000000000 --- a/styles/base/checked.scss +++ /dev/null @@ -1,75 +0,0 @@ -%XECheckboxIcon { - .vxe-checkbox--icon { - font-size: 1.34em; - } - .vxe-checkbox--icon { - color: var(--vxe-input-border-color); - vertical-align: middle; - font-weight: 700; - user-select: none; - } - &.is--checked, - &.is--indeterminate { - color: var(--vxe-primary-color); - .vxe-checkbox--icon { - color: var(--vxe-primary-color); - } - } - &:not(.is--disabled) { - cursor: pointer; - &:hover { - .vxe-checkbox--icon { - color: var(--vxe-primary-color); - } - } - } - &.is--disabled { - color: var(--vxe-font-disabled-color); - cursor: not-allowed; - .vxe-checkbox--icon { - color: var(--vxe-input-disabled-color); - } - } - .vxe-checkbox--label { - padding-left: 0.5em; - vertical-align: middle; - } -} - -%XERadioIcon { - cursor: pointer; - .vxe-radio--icon { - font-size: 1.4em; - } - .vxe-radio--icon { - color: var(--vxe-input-border-color); - vertical-align: middle; - font-weight: 700; - user-select: none; - } - &.is--checked { - color: var(--vxe-primary-color); - .vxe-radio--icon { - color: var(--vxe-primary-color); - } - } - &:not(.is--disabled) { - cursor: pointer; - &:hover { - .vxe-radio--icon { - color: var(--vxe-primary-color); - } - } - } - &.is--disabled { - color: var(--vxe-font-disabled-color); - cursor: not-allowed; - .vxe-radio--icon { - color: var(--vxe-input-disabled-color); - } - } - .vxe-radio--label { - padding-left: 0.5em; - vertical-align: middle; - } -} diff --git a/styles/checkbox.scss b/styles/checkbox.scss index 3c002c2c6..a31e44757 100644 --- a/styles/checkbox.scss +++ b/styles/checkbox.scss @@ -1,7 +1,6 @@ /**Variable**/ @import './helpers/mixin.scss'; @import './base/common.scss'; -@import './base/checked.scss'; /*checkbox-group*/ .vxe-checkbox-group { @@ -12,7 +11,7 @@ /*checkbox*/ .vxe-checkbox { - @extend %XECheckboxIcon; + @include createCheckboxIcon(); display: inline-block; vertical-align: middle; white-space: nowrap; diff --git a/styles/export.scss b/styles/export.scss index 6b79a6c7a..52cb7b0ef 100644 --- a/styles/export.scss +++ b/styles/export.scss @@ -1,5 +1,5 @@ /**Variable**/ -@import './base/checked.scss'; +@import './helpers/mixin.scss'; .vxe-export--panel-column > ul { list-style-type: none; @@ -121,5 +121,5 @@ } .vxe-export--panel-column-option { - @extend %XECheckboxIcon; + @include createCheckboxIcon(); } diff --git a/styles/filter.scss b/styles/filter.scss index 5a7d4753b..e8b40443e 100644 --- a/styles/filter.scss +++ b/styles/filter.scss @@ -1,5 +1,5 @@ /**Variable**/ -@import './base/checked.scss'; +@import './helpers/mixin.scss'; /*筛选*/ .vxe-cell--filter { @@ -109,5 +109,5 @@ } .vxe-table--filter-option { - @extend %XECheckboxIcon; + @include createCheckboxIcon(); } diff --git a/styles/helpers/mixin.scss b/styles/helpers/mixin.scss index 017c59a07..bfaa64721 100644 --- a/styles/helpers/mixin.scss +++ b/styles/helpers/mixin.scss @@ -1,3 +1,82 @@ @mixin animatTransition ($property, $duration: .1s, $func: ease-in-out) { transition: $property $duration $func; -} \ No newline at end of file +} + +@mixin createCheckboxIcon { + .vxe-checkbox--icon { + font-size: 1.34em; + } + .vxe-checkbox--icon { + color: var(--vxe-input-border-color); + vertical-align: middle; + font-weight: 700; + user-select: none; + } + &.is--checked, + &.is--indeterminate { + color: var(--vxe-primary-color); + .vxe-checkbox--icon { + color: var(--vxe-primary-color); + } + } + &:not(.is--disabled) { + cursor: pointer; + &:hover { + .vxe-checkbox--icon { + color: var(--vxe-primary-color); + } + } + } + &.is--hidden { + cursor: default; + } + &.is--disabled { + color: var(--vxe-font-disabled-color); + cursor: not-allowed; + .vxe-checkbox--icon { + color: var(--vxe-input-disabled-color); + } + } + .vxe-checkbox--label { + padding-left: 0.5em; + vertical-align: middle; + } +} + +@mixin createRadioIcon { + cursor: pointer; + .vxe-radio--icon { + font-size: 1.4em; + } + .vxe-radio--icon { + color: var(--vxe-input-border-color); + vertical-align: middle; + font-weight: 700; + user-select: none; + } + &.is--checked { + color: var(--vxe-primary-color); + .vxe-radio--icon { + color: var(--vxe-primary-color); + } + } + &:not(.is--disabled) { + cursor: pointer; + &:hover { + .vxe-radio--icon { + color: var(--vxe-primary-color); + } + } + } + &.is--disabled { + color: var(--vxe-font-disabled-color); + cursor: not-allowed; + .vxe-radio--icon { + color: var(--vxe-input-disabled-color); + } + } + .vxe-radio--label { + padding-left: 0.5em; + vertical-align: middle; + } +} diff --git a/styles/radio.scss b/styles/radio.scss index f4b13187e..b1dddb37e 100644 --- a/styles/radio.scss +++ b/styles/radio.scss @@ -1,7 +1,6 @@ /**Variable**/ @import './helpers/mixin.scss'; @import './base/common.scss'; -@import './base/checked.scss'; /*radio-group*/ .vxe-radio-group { @@ -16,7 +15,7 @@ /*radio*/ .vxe-radio { - @extend %XERadioIcon; + @include createRadioIcon(); display: inline-block; vertical-align: middle; white-space: nowrap; diff --git a/styles/table.scss b/styles/table.scss index 10e921028..d709ebadc 100644 --- a/styles/table.scss +++ b/styles/table.scss @@ -1,6 +1,5 @@ /**Variable**/ @import './helpers/mixin.scss'; -@import './base/checked.scss'; @import './base/common.scss'; @import './loading.scss'; @@ -659,11 +658,6 @@ } } } - .vxe-body--column { - &.col--checkbox { - user-select: none; - } - } /*边框*/ .vxe-table--footer-wrapper { @@ -835,10 +829,10 @@ // 单选框和复选框 .vxe-cell--radio { - @extend %XERadioIcon; + @include createRadioIcon(); } .vxe-cell--checkbox { - @extend %XECheckboxIcon; + @include createCheckboxIcon(); } .fixed--hidden { diff --git a/styles/toolbar.scss b/styles/toolbar.scss index 4e8f72037..db1439f63 100644 --- a/styles/toolbar.scss +++ b/styles/toolbar.scss @@ -1,5 +1,5 @@ /**Variable**/ -@import './base/checked.scss'; +@import './helpers/mixin.scss'; /*toolbar*/ .vxe-toolbar { @@ -170,7 +170,7 @@ } .vxe-custom--checkbox-option { - @extend %XECheckboxIcon; + @include createCheckboxIcon(); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/types/loading.d.ts b/types/loading.d.ts index 7b539f8bd..12920bdcb 100644 --- a/types/loading.d.ts +++ b/types/loading.d.ts @@ -1,10 +1,10 @@ import { VXEComponent } from './component' /** - * 表格扩展 - 键盘导航 + * 组件 - 加载中 */ export const VxeLoading: VXEComponent<{[key: string]: any }> /** - * 表格扩展 - 键盘导航 + * 组件 - 加载中 */ export const Loading: VXEComponent<{ [key: string]: any }>