Skip to content

Commit 7480d85

Browse files
wuyiping0628wuyiping0628
committed
Merge branch 'dev' of github.com:opentiny/tiny-vue into wyp/end-timepicker-0906
2 parents 7dc0904 + 8f1012f commit 7480d85

File tree

15 files changed

+135
-63
lines changed

15 files changed

+135
-63
lines changed

‎examples/sites/demos/apis/grid.js

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1092,6 +1092,9 @@ export default {
10921092
{
10931093
name: 'after-refresh-column',
10941094
type: '()=> void',
1095+
meta: {
1096+
stable: '3.18.0'
1097+
},
10951098
defaultValue: '',
10961099
desc: {
10971100
'zh-CN': '在新增或者删除列后，列配置是异步更新的，列配置刷新后触发的回调',
@@ -3436,7 +3439,7 @@ export default {
34363439
pcDemo: 'grid-editor#editor-custom-editor-select'
34373440
},
34383441
{
3439-
name: 'filed',
3442+
name: 'field',
34403443
type: 'string',
34413444
defaultValue: '',
34423445
desc: {
@@ -4036,7 +4039,7 @@ export default {
40364039
code: `
40374040
interface IRow {
40384041
// 表格行数据
4039-
[filed: string]: any
4042+
[field: string]: any
40404043
}
40414044
`
40424045
},
@@ -4170,7 +4173,7 @@ interface IContextMenuConfig {
41704173
type: 'type',
41714174
code: `
41724175
interface IValidRules {
4173-
[filed:string]: {
4176+
[field:string]: {
41744177
type?: string
41754178
required?: boolean
41764179
validator?: () => boolean

‎examples/sites/demos/pc/app/form/error-slot-composition-api.vue

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,21 @@
44
<tiny-form-item label="姓名" prop="name">
55
<tiny-input v-model="createData.name"></tiny-input>
66
</tiny-form-item>
7-
<tiny-form-item label="年龄" prop="age">
8-
<tiny-input v-model="createData.age"></tiny-input>
9-
<template #error>
10-
<span>错误提示内容插槽</span>
11-
</template>
12-
</tiny-form-item>
137
<tiny-form-item label="昵称" prop="nickname" validate-type="text">
148
<tiny-input v-model="createData.nickname"></tiny-input>
159
<template #error="message">
1610
<span class="error-slot">{{ message }}</span>
1711
</template>
1812
</tiny-form-item>
13+
<tiny-form-item label="年龄" prop="age">
14+
<tiny-input v-model="createData.age"></tiny-input>
15+
<template #error>
16+
<div class="custom-error">
17+
<tiny-icon-error></tiny-icon-error>
18+
<span>错误提示内容插槽，提示文本很长很长，提示文本很长很长，提示文本很长很长，提示文本很长很长。</span>
19+
</div>
20+
</template>
21+
</tiny-form-item>
1922
<tiny-form-item>
2023
<tiny-button type="primary" @click="validateField"> 校验 </tiny-button>
2124
</tiny-form-item>
@@ -26,6 +29,9 @@
2629
<script setup>
2730
import { ref } from 'vue'
2831
import { Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput, Button as TinyButton } from '@opentiny/vue'
32+
import { iconError } from '@opentiny/vue-icon'
33+
34+
const TinyIconError = iconError()
2935
3036
const createData = ref({
3137
name: '',
@@ -60,3 +66,17 @@ function validateField() {
6066
color: #ffd0a6;
6167
}
6268
</style>
69+
70+
<style lang="less">
71+
.custom-error {
72+
padding: 4px 0;
73+
display: flex;
74+
.tiny-svg {
75+
fill: var(--ti-tooltip-validate-icon-color);
76+
margin-right: 8px;
77+
font-size: 16px;
78+
flex-shrink: 0;
79+
margin-top: 2px;
80+
}
81+
}
82+
</style>

‎examples/sites/demos/pc/app/form/error-slot.spec.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ test('错误提示插槽', async ({ page }) => {
1010

1111
await validBtn.click()
1212
await expect(getTooltipByText('必填')).toBeVisible()
13-
await expect(getTooltipByText('错误提示内容插槽')).toBeVisible()
13+
await expect(
14+
getTooltipByText('错误提示内容插槽，提示文本很长很长，提示文本很长很长，提示文本很长很长，提示文本很长很长。')
15+
).toBeVisible()
1416
await expect(page.locator('.error-slot')).toBeVisible()
1517
})

‎examples/sites/demos/pc/app/form/error-slot.vue

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,21 @@
44
<tiny-form-item label="姓名" prop="name">
55
<tiny-input v-model="createData.name"></tiny-input>
66
</tiny-form-item>
7-
<tiny-form-item label="年龄" prop="age">
8-
<tiny-input v-model="createData.age"></tiny-input>
9-
<template #error>
10-
<span>错误提示内容插槽</span>
11-
</template>
12-
</tiny-form-item>
137
<tiny-form-item label="昵称" prop="nickname" validate-type="text">
148
<tiny-input v-model="createData.nickname"></tiny-input>
159
<template #error="message">
1610
<span class="error-slot">{{ message }}</span>
1711
</template>
1812
</tiny-form-item>
13+
<tiny-form-item label="年龄" prop="age">
14+
<tiny-input v-model="createData.age"></tiny-input>
15+
<template #error>
16+
<div class="custom-error">
17+
<tiny-icon-error></tiny-icon-error>
18+
<span>错误提示内容插槽，提示文本很长很长，提示文本很长很长，提示文本很长很长，提示文本很长很长。</span>
19+
</div>
20+
</template>
21+
</tiny-form-item>
1922
<tiny-form-item>
2023
<tiny-button type="primary" @click="validateField"> 校验 </tiny-button>
2124
</tiny-form-item>
@@ -25,13 +28,15 @@
2528

2629
<script>
2730
import { Form, FormItem, Input, Button } from '@opentiny/vue'
31+
import { iconError } from '@opentiny/vue-icon'
2832
2933
export default {
3034
components: {
3135
TinyForm: Form,
3236
TinyFormItem: FormItem,
3337
TinyInput: Input,
34-
TinyButton: Button
38+
TinyButton: Button,
39+
TinyIconError: iconError()
3540
},
3641
data() {
3742
return {
@@ -42,7 +47,11 @@ export default {
4247
},
4348
rules: {
4449
name: [
45-
{ required: true, message: '必填', trigger: 'blur' },
50+
{
51+
required: true,
52+
message: '必填',
53+
trigger: 'blur'
54+
},
4655
{ min: 2, max: 11, message: '长度必须不小于2', trigger: ['change', 'blur'] }
4756
],
4857
age: { required: true },
@@ -69,3 +78,17 @@ export default {
6978
color: #ffd0a6;
7079
}
7180
</style>
81+
82+
<style lang="less">
83+
.custom-error {
84+
padding: 4px 0;
85+
display: flex;
86+
.tiny-svg {
87+
fill: var(--ti-tooltip-validate-icon-color);
88+
margin-right: 8px;
89+
font-size: 16px;
90+
flex-shrink: 0;
91+
margin-top: 2px;
92+
}
93+
}
94+
</style>

‎examples/sites/demos/pc/app/form/slot-label.vue

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@
1010
<tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
1111
</tiny-form-item>
1212
<tiny-form-item prop="url">
13-
<template #label> URL </template>
13+
<template #label>
14+
<div class="custom-label">超过两行文字，省略显示</div>
15+
</template>
1416
<tiny-input v-model="createData.url"></tiny-input>
1517
</tiny-form-item>
1618
<tiny-form-item prop="radio">
@@ -80,4 +82,13 @@ export default {
8082
.demo-form {
8183
width: 380px;
8284
}
85+
.custom-label {
86+
display: -webkit-box;
87+
width: 100%;
88+
-webkit-line-clamp: 2;
89+
line-height: 1.2;
90+
overflow: hidden;
91+
-webkit-box-orient: vertical;
92+
white-space: wrap;
93+
}
8394
</style>

‎examples/sites/demos/pc/app/grid/operation-column/dropdown-composition-api.vue

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<tiny-grid ref="gridRef" :data="tableData">
33
<tiny-grid-column type="selection" width="80">
44
<template #dropdown>
5-
<tiny-dropdown class="ml-12" title="" @item-click="itemClick">
5+
<tiny-dropdown title="" @item-click="itemClick">
66
<template #dropdown>
7-
<tiny-dropdown-menu placement="top">
7+
<tiny-dropdown-menu placement="bottom">
88
<tiny-dropdown-item :item-data="{ name: 'selectCurPage' }"> 选择本页数据 </tiny-dropdown-item>
99
<tiny-dropdown-item :item-data="{ name: 'selectAllPage' }"> 选择全部数据 </tiny-dropdown-item>
1010
<tiny-dropdown-item :item-data="{ name: 'clearCurPage' }"> 取消选择 </tiny-dropdown-item>
@@ -86,9 +86,3 @@ function itemClick({ itemData }) {
8686
}
8787
}
8888
</script>
89-
90-
<style scoped>
91-
.ml-12 {
92-
left: 12px;
93-
}
94-
</style>

‎examples/sites/demos/pc/app/grid/operation-column/dropdown.vue

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<tiny-grid ref="grid" :data="tableData">
33
<tiny-grid-column type="selection" width="80">
44
<template #dropdown>
5-
<tiny-dropdown class="ml-12" title="" @item-click="itemClick">
5+
<tiny-dropdown title="" @item-click="itemClick">
66
<template #dropdown>
7-
<tiny-dropdown-menu placement="top">
7+
<tiny-dropdown-menu placement="bottom">
88
<tiny-dropdown-item :item-data="{ name: 'selectCurPage' }"> 选择本页数据 </tiny-dropdown-item>
99
<tiny-dropdown-item :item-data="{ name: 'selectAllPage' }"> 选择全部数据 </tiny-dropdown-item>
1010
<tiny-dropdown-item :item-data="{ name: 'clearCurPage' }"> 取消选择 </tiny-dropdown-item>
@@ -92,9 +92,3 @@ export default {
9292
}
9393
}
9494
</script>
95-
96-
<style scoped>
97-
.ml-12 {
98-
left: 12px;
99-
}
100-
</style>

‎packages/theme/src/dropdown/smb-theme.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ export const tinyDropdownSmbTheme = {
1111
'ti-dropdown-button-icon-size': 'var(--ti-common-font-size-2)',
1212
'ti-dropdown-trigger-svg-margin-top': 'var(--ti-common-space-0)',
1313
'ti-dropdown-trigger-svg-margin-bottom': 'var(--ti-common-space-0)',
14-
'ti-dropdown-trigger-only-svg-width': 'var(--ti-common-size-5x)',
15-
'ti-dropdown-trigger-only-svg-height': 'var(--ti-common-size-5x)',
14+
'ti-dropdown-trigger-only-svg-width': 'var(--ti-common-size-4x)',
15+
'ti-dropdown-trigger-only-svg-height': 'var(--ti-common-size-4x)',
1616
'ti-dropdown-trigger-only-svg-hover-bg-color': 'rgba(0,0,0,0.05)',
1717
'ti-dropdown-trigger-only-svg-hover-radius': 'var(--ti-common-border-radius-2)',
1818
'ti-dropdown-line-height': 'var(--ti-common-line-height-1)',

‎packages/theme/src/dropdown/vars.less

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@
1414
// 下拉菜单触发元素悬浮时的图标颜色
1515
--ti-dropdown-icon-color-hover: var(--ti-common-color-text-link-hover, #344899);
1616
// 下拉菜单触发元素只有图标时的图标宽度
17-
--ti-dropdown-trigger-only-svg-width: var(--ti-common-size-5x);
17+
--ti-dropdown-trigger-only-svg-width: var(--ti-common-size-4x);
1818
// 下拉菜单触发元素只有图标时的图标高度
19-
--ti-dropdown-trigger-only-svg-height: var(--ti-common-size-5x);
19+
--ti-dropdown-trigger-only-svg-height: var(--ti-common-size-4x);
2020
// 下拉菜单触发元素只有图标时的图标悬浮背景色
2121
--ti-dropdown-trigger-only-svg-hover-bg-color: var(--ti-common-color-bg-white-emphasize, #f2f5fc);
2222
// 下拉菜单触发元素只有图标时的图标圆角

‎packages/theme/src/form-item/smb-theme.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
export const tinyFormItemSmbTheme = {
22
'ti-form-item-margin-bottom-default': 'var(--ti-common-space-6x)',
3-
'ti-form-item-margin-bottom-mini': 'var(--ti-common-space-3x)',
4-
'ti-form-item-margin-bottom-small': 'var(--ti-common-space-5x)',
3+
'ti-form-item-margin-bottom-mini': 'var(--ti-common-space-5x)',
4+
'ti-form-item-margin-bottom-small': 'var(--ti-common-space-6x)',
55
'ti-form-item-margin-bottom-medium': 'var(--ti-common-space-6x)',
6-
'ti-form-item-input-mini-height': 'var(--ti-common-space-5x)',
7-
'ti-form-item-input-small-height': 'var(--ti-common-space-6x)',
8-
'ti-form-item-input-medium-height': 'var(--ti-common-space-8x)',
9-
'ti-form-item-mini-line-height': 'var(--ti-common-space-5x)',
10-
'ti-form-item-small-line-height': 'var(--ti-common-space-6x)',
11-
'ti-form-item-medium-line-height': 'var(--ti-common-space-8x)',
6+
'ti-form-item-input-mini-height': 'var(--ti-common-size-6x)',
7+
'ti-form-item-input-small-height': '28px',
8+
'ti-form-item-input-medium-height': 'var(--ti-common-size-10x)',
9+
'ti-form-item-mini-line-height': '24px',
10+
'ti-form-item-small-line-height': '28px',
11+
'ti-form-item-medium-line-height': 'var(--ti-common-size-10x)',
1212
'ti-form-item-label-padding-right': 'var(--ti-common-space-6x)'
1313
}

‎packages/theme/src/form/index.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,7 @@
126126
.tooltip-validate-icon {
127127
fill: var(--ti-tooltip-validate-icon-color);
128128
margin-right: 8px;
129+
font-size: 16px;
129130
}
130131

131132
&[x-placement^='top'] .popper__arrow {

‎packages/theme/src/form/vars.less

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,9 @@
1212

1313
.component-css-vars-form() {
1414
// 表单校验水平内边距
15-
--ti-form-valid-padding-horizontal: calc(var(--ti-common-space-2x, 8px) + 2px);
15+
--ti-form-valid-padding-horizontal: var(--ti-common-space-4x, 16px);
1616
// 表单校验垂直内边距
17-
--ti-form-valid-padding-vertical: calc(var(--ti-common-space-2x, 8px) + 2px);
17+
--ti-form-valid-padding-vertical: var(--ti-common-space-3x, 12px);
1818
// 行内表单输入框右边距(hide)
1919
--ti-form-item-margin-right: calc(var(--ti-common-space-2x, 8px) + 2px);
2020

‎packages/theme/src/grid/header.less

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -93,11 +93,12 @@
9393

9494
.@{grid-prefix-cls}-edit-icon {
9595
font-size: var(--ti-common-font-size-2);
96-
margin-right: 4px;
97-
order: -1;
96+
margin-left: 4px;
97+
flex-shrink: 0;
9898
fill: var(--ti-grid-column-icon-text-color);
9999
+ .@{grid-prefix-cls}-cell-text {
100100
width: auto;
101+
order: -1;
101102
}
102103
}
103104

@@ -192,8 +193,14 @@
192193

193194
& > .selection-dropdown-wrapper {
194195
position: absolute;
195-
right: 0;
196+
left: 50%;
197+
transform: translateX(var(--ti-grid-selection-dropdown-left-offset));
196198
top: 0;
199+
200+
.tiny-svg {
201+
fill: var(--ti-grid-selection-dropdown-icon-color);
202+
vertical-align: middle;
203+
}
197204
}
198205
}
199206
}

‎packages/theme/src/grid/vars.less

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,4 +216,9 @@
216216
--ti-grid-filter-checkbox-font-size: var(--ti-common-font-size-2);
217217
// 表格过滤面板checkbox颜色
218218
--ti-grid-filter-checkbox-color: var(--ti-grid-primary-color);
219+
220+
// selection的dropdown插槽左偏移量(hide)
221+
--ti-grid-selection-dropdown-left-offset: var(--ti-common-size-3x, 12px);
222+
// selection的dropdown插槽图标颜色
223+
--ti-grid-selection-dropdown-icon-color: var(--ti-common-color-icon-normal, #808080);
219224
}

‎packages/theme/src/svgs/edit.svg

Lines changed: 23 additions & 11 deletions
Loading

0 commit comments

Comments
 (0)