tianyiiiii
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(theme):　[tree,tooltip,transfer, cascader] update unsolved smb components (#2124) 

* fix(theme): remove after's class

* fix(tooltip): refactor tooltip's arrow style by  rotate a div

* fix(theme): update cascader style

* fix(theme): update tooltip/transfer style

* fix(theme): update unresolved smb style

* fix(tree): fix e2e error
This commit is contained in:
申君健 2024-09-14 14:28:17 +08:00 committed by GitHub
parent ea39960d59
commit 71b1eaed08
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 56 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/sites/demos/pc/app/tree/icons-composition-api.vue
View File

@ -23,8 +23,8 @@ import { Tree as TinyTree } from '@opentiny/vue'
import { iconPutAway, iconExpand, iconRightO, iconEditorTable, iconFile } from '@opentiny/vue-icon'
const icon = iconRightO()
const shrinkIcon = iconPutAway()
const expandIcon = iconExpand()
const shrinkIcon = iconExpand()
const expandIcon = iconPutAway()
const tinyIconEditorTable = iconEditorTable()
const tinyIconFile = iconFile()

10
examples/sites/demos/pc/app/tree/icons.spec.ts
View File

@ -9,17 +9,13 @@ test('测试自定义图标', async ({ page }) => {
const tree2 = preview.locator('.tiny-tree').nth(1)
const icon1 = tree1.locator('svg path').nth(0)
const icon2 = tree2.locator('svg path').nth(0)
const icon2 = tree2.locator('svg').nth(0)
// 测试tree1
await expect(tree1.getByText('数据 2')).toHaveCount(1)
await expect(icon1).toHaveAttribute('d', 'm6 2 13 10L6 22V2zm2 4v12l8-6.1L8 6z')
await expect(icon2).toHaveClass(/tiny-tree-node__expand-icon/)
// 测试tree2
await expect(tree2.getByText('数据 2')).toHaveCount(1)
await expect(icon2).toHaveAttribute(
'd',
'M13 11h4c.6 0 1 .4 1 1s-.4 1-1 1h-4v4c0 .6-.4 1-1 1s-1-.4-1-1v-4H7c-.6 0-1-.4-1-1s.4-1 1-1h4V7c0-.6.4-1 1-1s1 .4 1 1v4zM3 1h18c.9 0 2 1.1 2 2v18c0 .9-1 2-2 2H3c-.9 0-2-1.1-2-2V3c0-.9 1.1-2 2-2zm0 2v18h18V3H3z'
)
await expect(icon2).toHaveCSS('fill', 'rgb(255, 0, 0)')
await expect(icon2).toHaveClass(/tiny-tree-node__expand-icon/)
})

4
examples/sites/demos/pc/app/tree/icons.vue
View File

@ -28,8 +28,8 @@ export default {
data() {
return {
icon: iconRightO(),
shrinkIcon: iconPutAway(),
expandIcon: iconExpand(),
shrinkIcon: iconExpand(),
expandIcon: iconPutAway(),
tinyIconEditorTable: iconEditorTable(),
tinyIconFile: iconFile(),
data: [

2
examples/sites/demos/pc/app/tree/props.spec.ts
View File

@ -8,5 +8,5 @@ test('测试自定义映射列', async ({ page }) => {
await expect(tree.getByText('数据 1-1-1')).toHaveCount(1)
// 测试disabled
await expect(tree.getByText('数据 2-2')).toHaveCSS('color', 'rgb(173, 176, 184)')
await expect(tree.getByText('数据 2-2')).toHaveCSS('color', 'rgb(194, 194, 194)')
})

6
packages/theme/src/cascader-menu/vars.less
View File

@ -18,13 +18,9 @@
// 下拉菜单为空时的文本色
--ti-cascader-menu-empty-text-color: var(--ti-common-color-text-weaken, #8a8e99);
// 下拉菜单列表垂直方向的内边距
--ti-cascader-menu-list-padding-vertical: var(--ti-common-space-0, 0px);
--ti-cascader-menu-list-padding-vertical: var(--ti-common-space-2x);
// 下拉菜单列表水平方向的内边距
--ti-cascader-menu-list-padding-horizontal: var(--ti-common-space-0, 0px);
// 下拉菜单列表垂直方向的外边距
--ti-cascader-menu-list-padding-vertical: var(--ti-common-space-0, 0px);
// 下拉菜单列表水平方向的外边距
--ti-cascader-menu-list-padding-horizontal: var(--ti-common-space-0, 0px);
// 下拉菜单的宽度
--ti-cascader-menu-width: 159px;
}

2
packages/theme/src/cascader/index.less
View File

@ -104,7 +104,7 @@
margin-bottom: var(--ti-cascader-dropdown-margin-bottom);
font-size: var(--ti-cascader-font-size);
background: var(--ti-cascader-dropdown-bg-color);
border: 1px solid #e4e7ed;
border: none;
border-radius: var(--ti-cascader-border-radius);
box-shadow: var(--ti-cascader-dropdown-box-shadow);
&.is-auto-size {

2
packages/theme/src/cascader/vars.less
View File

@ -62,7 +62,7 @@
// 搜索框的占位符的文本色（没有生效）
--ti-cascader-search-input-placeholder-text-color: var(--ti-common-color-placeholder, #adb0b8);
// 下拉框的阴影
--ti-cascader-dropdown-box-shadow: var(--ti-common-box-shadow);
--ti-cascader-dropdown-box-shadow: var(--ti-common-shadow-3-left);
// 多选模式输入框宽度
--ti-cascader-width: '100%';
// 下拉框的左侧外边距

70
packages/theme/src/mixins/tooltip.less
View File

@ -14,73 +14,7 @@
background: @bgcolor;
color: @color;
&[x-placement^='top'] .popper__arrow {
border-top-color: @border-color;
&::after {
border-top-color: @border-color;
}
}
&[x-placement^='bottom'] .popper__arrow {
border-bottom-color: @border-color;
&::after {
border-bottom-color: @border-color;
}
}
&[x-placement^='left'] .popper__arrow {
border-left-color: @border-color;
&::after {
border-left-color: @border-color;
}
}
&[x-placement^='right'] .popper__arrow {
border-right-color: @border-color;
&::after {
border-right-color: @border-color;
}
}
}
.tooltip-light (@color, @bgcolor, @border-color) {
background: @bgcolor;
color: @color;
border: 1px solid @border-color;
&[x-placement^='top'] .popper__arrow {
border-top-color: @border-color;
&::after {
border-top-color: @bgcolor;
}
}
&[x-placement^='bottom'] .popper__arrow {
border-bottom-color: @border-color;
&::after {
border-bottom-color: @bgcolor;
}
}
&[x-placement^='left'] .popper__arrow {
border-left-color: @border-color;
&::after {
border-left-color: @bgcolor;
}
}
&[x-placement^='right'] .popper__arrow {
border-right-color: @border-color;
&::after {
border-right-color: @bgcolor;
}
& .popper__arrow {
background-color: @bgcolor;
}
}

72
packages/theme/src/tooltip/index.less
View File

@ -43,42 +43,22 @@
word-wrap: break-word;
box-shadow: var(--ti-tooltip-box-shadow);
.popper__arrow,
.popper__arrow::after {
.popper__arrow {
position: absolute;
display: block;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
/* 控制箭头尺寸
6px: var(--ti-tooltip-popper-border-width);
-6px: var(--ti-tooltip-popper-neg-border-width);
*/
.popper__arrow {
border-width: var(--ti-tooltip-popper-border-width);
}
.popper__arrow::after {
content: ' ';
border-width: var(--ti-tooltip-popper-border-width);
// 原来是用border来模拟三角形的，现在是通过div模拟，所以将border-width赋值给div的width.
width: var(--ti-tooltip-popper-border-width);
height: var(--ti-tooltip-popper-border-height);
background-color: var(--ti-tooltip-popper-border-color);
transform: rotateZ(45deg);
border-radius: 2px;
}
&[x-placement^='top'] {
margin-bottom: 12px;
.popper__arrow {
bottom: var(--ti-tooltip-popper-neg-border-width);
border-top-color: var(--ti-tooltip-popper-border-color);
border-bottom-width: 0;
&::after {
bottom: 1px;
margin-left: var(--ti-tooltip-popper-neg-border-width);
border-top-color: var(--ti-tooltip-popper-border-color);
border-bottom-width: 0;
}
bottom: -7px;
}
}
@ -86,16 +66,7 @@
margin-top: 12px;
.popper__arrow {
top: var(--ti-tooltip-popper-neg-border-width);
border-top-width: 0;
border-bottom-color: var(--ti-tooltip-popper-border-color);
&::after {
top: 1px;
margin-left: var(--ti-tooltip-popper-neg-border-width);
border-top-width: 0;
border-bottom-color: var(--ti-tooltip-popper-border-color);
}
top: -7px;
}
}
@ -103,16 +74,7 @@
margin-left: 12px;
.popper__arrow {
left: var(--ti-tooltip-popper-neg-border-width);
border-right-color: var(--ti-tooltip-popper-border-color);
border-left-width: 0;
&::after {
bottom: var(--ti-tooltip-popper-neg-border-width);
left: 1px;
border-right-color: var(--ti-tooltip-popper-border-color);
border-left-width: 0;
}
left: -3px;
}
}
@ -120,17 +82,7 @@
margin-right: 12px;
.popper__arrow {
right: var(--ti-tooltip-popper-neg-border-width);
border-right-width: 0;
border-left-color: var(--ti-tooltip-popper-border-color);
&::after {
right: 1px;
bottom: var(--ti-tooltip-popper-neg-border-width);
margin-left: var(--ti-tooltip-popper-neg-border-width);
border-right-width: 0;
border-left-color: var(--ti-tooltip-popper-border-color);
}
right: -3px;
}
}
&.is-normal {
@ -184,7 +136,7 @@
}
&.is-light {
.tooltip-light(
.tooltip-type(
var(--ti-tooltip-popper-light-text-color),
var(--ti-tooltip-popper-light-bg-color),
var(--ti-tooltip-popper-light-border-color)

21
packages/theme/src/tooltip/vars.less
View File

@ -11,10 +11,14 @@
*/
.component-css-vars-tooltip() {
// 弹框箭头的尺寸,(hide)
--ti-tooltip-popper-border-width: 8px;
// 弹框箭头的负尺寸,用于偏移(hide)
--ti-tooltip-popper-neg-border-width: calc(var(--ti-tooltip-popper-border-width) * -1);
// 弹框箭头的宽度,(hide)
--ti-tooltip-popper-border-width: 12px;
// 弹框箭头的高度,(hide)
--ti-tooltip-popper-border-height: 20px;
// 弹框箭头的圆角(hide)
--ti-tooltip-popper-border-radius: 2px;
// 弹框三角默认边框色
--ti-tooltip-popper-border-color: #191919;
// 弹框字体行高(hide)
--ti-tooltip-popper-font-line-height: var(--ti-common-line-height-number);
// 弹框字体(hide)
@ -32,8 +36,7 @@
--ti-tooltip-popper-border-radius: 8px;
// 悬浮弹出框字号
--ti-tooltip-popper-font-size: var(--ti-common-font-size-base, 12px);
// 弹框三角默认边框色
--ti-tooltip-popper-border-color: #191919;
// 正常背景色 (hide)
--ti-tooltip-popper-normal-bg-color: var(--ti-common-color-bg-dark-deep, #464c59);
// 文字提示正常文本色(hide)
@ -42,11 +45,11 @@
--ti-tooltip-popper-normal-border-color: var(--ti-common-color-bg-dark-deep, #464c59);
// info类型弹框背景色
--ti-tooltip-popper-info-bg-color: #1476FF;
--ti-tooltip-popper-info-bg-color: #1476ff;
// info类型弹框文本色
--ti-tooltip-popper-info-text-color: var(--ti-common-color-light, #fff);
// info类型弹框三角边框色
--ti-tooltip-popper-info-border-color: #1476FF;
--ti-tooltip-popper-info-border-color: #1476ff;
// error类型弹框背景色
--ti-tooltip-popper-error-bg-color: var(--ti-common-color-danger-normal, #c7000b);
@ -82,7 +85,7 @@
--ti-tooltip-popper-light-border-color: #fff;
// 弹框阴影
--ti-tooltip-box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.08);
--ti-tooltip-box-shadow: 0px 5px 9px 0px rgba(51, 56, 84, 0.25);
// 弹框垂直内边距
--ti-tooltip-padding-vertical: 12px;
// 弹框水平内边距

10
packages/theme/src/transfer/index.less
View File

@ -277,6 +277,16 @@
display: inline-block;
box-sizing: border-box;
border-radius: var(--ti-transfer-panel-filter-border-radius);
border-bottom-color: #f0f0f0 !important;
padding-left: 24px;
padding-right: 0;
}
.@{input-prefix-cls}__prefix {
left: 0;
}
.@{input-prefix-cls}__suffix {
right: 4px;
}
}

6
packages/theme/src/transfer/vars.less
View File

@ -106,7 +106,7 @@
// 面板头部背景色
--ti-transfer-header-bg-color: #fff;
// 面板头部边框色
--ti-transfer-header-border-color: rgba(0,0,0,0.08);
--ti-transfer-header-border-color: rgba(0, 0, 0, 0.08);
// 面板头部文本色
--ti-transfer-header-text-color: var(--ti-common-color-info-normal, #252b3a);
// 面板头部span文本色
@ -162,9 +162,9 @@
// 面板多选框左侧内边距
--ti-transfer-panel-item-checkbox-padding-left: calc(var(--ti-common-space-5x, 20px) + 2px);
// 面板搜索框左侧内边距
--ti-transfer-panel-filter-padding-left: var(--ti-common-space-2x, 8px);
--ti-transfer-panel-filter-padding-left: var(--ti-common-space-4x, 8px);
// 面板搜索框右侧内边距
--ti-transfer-panel-filter-padding-right: var(--ti-common-space-2x, 8px);
--ti-transfer-panel-filter-padding-right: var(--ti-common-space-4x, 8px);
// 面板搜索框顶部内边距
--ti-transfer-panel-filter-padding-top: var(--ti-common-space-2x, 8px);
// 面板搜索框底部内边距

2
packages/theme/src/tree/index.less
View File

@ -93,7 +93,7 @@
.@{tree-node-prefix-cls}.is-current:not(.show-checkbox) > .@{tree-node-prefix-cls}__content {
.@{tree-node-prefix-cls}__content-box,
.@{tree-node-prefix-cls}__content-right {
background-color: var(--ti-tree-node-content-current-bg-color);
background-color: var(--ti-tree-node-highlight-bg-color);
}
}
}

4
packages/theme/src/tree/vars.less
View File

@ -69,7 +69,7 @@
// 节点左内边距
--ti-tree-node-padding-left: var(--ti-common-space-4x);
// 节点高亮背景色
--ti-tree-node-highlight-bg-color: var(--ti-common-color-light);
--ti-tree-node-highlight-bg-color: var(--ti-base-text-color-2);
// 节点内容高度
--ti-tree-node-content-height: var(--ti-common-space-8x);
// 节点内容边框弧度
@ -103,7 +103,7 @@
// small尺寸节点高度
--ti-tree-small-node-content-height: calc(var(--ti-common-space-base, 4px) * 7);
// small尺寸节点高度
--ti-tree-small-node-font-size: var(--ti-common-line-height-base, 12px);
--ti-tree-small-node-font-size: 12px;
// 平铺模式节点高度
--ti-tree-plain-node-height: calc(var(--ti-common-space-base, 4px) * 7);

6
packages/vue/src/cascader/src/pc.vue
View File

@ -199,7 +199,7 @@ import Scrollbar from '@opentiny/vue-scrollbar'
import CascaderPanel from '@opentiny/vue-cascader-panel'
import FilterBox from '@opentiny/vue-filter-box'
import Tooltip from '@opentiny/vue-tooltip'
import { iconClose, iconChevronDown, iconChevronUp, iconYes } from '@opentiny/vue-icon'
import { iconClose, IconTriangleDown, IconUpWard, iconYes } from '@opentiny/vue-icon'
import '@opentiny/vue-theme/cascader/index.less'
export default defineComponent({
@ -259,8 +259,8 @@ export default defineComponent({
TinyFilterBox: FilterBox,
TinyCascaderPanel: CascaderPanel,
IconClose: iconClose(),
IconChevronDown: iconChevronDown(),
IconChevronUp: iconChevronUp(),
IconChevronDown: IconTriangleDown(),
IconChevronUp: IconUpWard(),
IconYes: iconYes(),
TinyTooltip: Tooltip
},