Skip to content

Commit 55c25ab

Browse files
zzcrzzcr
authored
feat(filter-panel): add 'size' prop and corresponding styles for filter box component (#4043)
* feat(filter-panel): add 'size' prop and corresponding styles for filter box component * feat(picker): add 'size' prop to filter box component in mobile and PC views * refactor(filter-box): remove font-size declarations from title and placeholder styles
1 parent 5fb9523 commit 55c25ab

File tree

12 files changed

+217
-6
lines changed

12 files changed

+217
-6
lines changed

‎examples/sites/demos/apis/filter-panel.js‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,15 @@ export default {
1717
pcDemo: 'tip'
1818
},
1919
{
20-
mode: []
20+
name: 'clearable',
21+
type: 'boolean',
22+
defaultValue: 'true',
23+
desc: {
24+
'zh-CN': '是否显示清空按钮',
25+
'en-US': 'Whether to display the clear button'
26+
},
27+
mode: ['pc'],
28+
pcDemo: 'tip'
2129
},
2230
{
2331
name: 'disabled',
@@ -76,6 +84,18 @@ export default {
7684
mode: ['pc'],
7785
pcDemo: 'popper-class'
7886
},
87+
{
88+
name: 'size',
89+
type: "'medium'",
90+
defaultValue: '',
91+
desc: {
92+
'zh-CN': '过滤器面板的尺寸，可选值：medium（中等尺寸），不设置则为默认尺寸',
93+
'en-US': 'Size of the filter panel. Optional value: medium. If not set, the default size is used'
94+
},
95+
stable: '3.29.0',
96+
mode: ['pc'],
97+
pcDemo: 'size'
98+
},
7999
{
80100
name: 'tip',
81101
type: 'string',

‎examples/sites/demos/pc/app/filter-panel/size-composition-api.vue‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<template>
2+
<div>
3+
<div class="mb10">
4+
<span class="label">选择尺寸：</span>
5+
<tiny-radio-group v-model="currentSize">
6+
<tiny-radio label="">默认 (default)</tiny-radio>
7+
<tiny-radio label="medium">中等 (medium)</tiny-radio>
8+
</tiny-radio-group>
9+
</div>
10+
<div class="box">
11+
<tiny-filter-panel
12+
ref="filterPanel"
13+
label="物品数量"
14+
:value="value"
15+
:size="currentSize"
16+
@handle-clear="handleClear"
17+
>
18+
<tiny-radio-group v-model="radioVal" size="mini">
19+
<tiny-radio label="大于">大于</tiny-radio>
20+
<tiny-radio label="等于">等于</tiny-radio>
21+
<tiny-radio label="小于">小于</tiny-radio>
22+
</tiny-radio-group>
23+
<tiny-input type="text" v-model="inputVal" style="margin-top: 20px"></tiny-input>
24+
</tiny-filter-panel>
25+
</div>
26+
</div>
27+
</template>
28+
29+
<script setup>
30+
import { ref, computed } from 'vue'
31+
import { TinyFilterPanel, TinyRadio, TinyRadioGroup, TinyInput } from '@opentiny/vue'
32+
33+
// 表单数据
34+
const inputVal = ref('')
35+
const radioVal = ref('')
36+
const currentSize = ref('') // 默认尺寸
37+
38+
// 计算显示的值
39+
const value = computed(() => {
40+
return radioVal.value + inputVal.value
41+
})
42+
43+
// 清空处理
44+
const handleClear = () => {
45+
radioVal.value = ''
46+
inputVal.value = ''
47+
}
48+
</script>
49+
50+
<style scoped>
51+
.box {
52+
display: flex;
53+
}
54+
.label {
55+
margin-right: 10px;
56+
font-weight: bold;
57+
}
58+
</style>

‎examples/sites/demos/pc/app/filter-panel/size.spec.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { test, expect } from '@playwright/test'
2+
3+
test('测试过滤器面板尺寸', async ({ page }) => {
4+
page.on('pageerror', (exception) => expect(exception).toBeNull())
5+
await page.goto('filter-panel#size')
6+
7+
const demo = page.locator('#size')
8+
const filterBox = demo.locator('.tiny-filter-box')
9+
10+
// 测试默认尺寸（不包含 medium class）
11+
await expect(filterBox).toHaveClass(/tiny-filter-box/)
12+
await expect(filterBox).not.toHaveClass(/tiny-filter-box--medium/)
13+
14+
// 测试 medium 尺寸
15+
await demo.getByText('中等 (medium)').click()
16+
await page.waitForTimeout(200)
17+
await expect(filterBox).toHaveClass(/tiny-filter-box--medium/)
18+
19+
// 切换回默认尺寸
20+
await demo.getByText('默认 (default)').click()
21+
await page.waitForTimeout(200)
22+
await expect(filterBox).not.toHaveClass(/tiny-filter-box--medium/)
23+
})

‎examples/sites/demos/pc/app/filter-panel/size.vue‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<template>
2+
<div>
3+
<div class="mb10">
4+
<span class="label">选择尺寸：</span>
5+
<tiny-radio-group v-model="currentSize">
6+
<tiny-radio label="">默认 (default)</tiny-radio>
7+
<tiny-radio label="medium">中等 (medium)</tiny-radio>
8+
</tiny-radio-group>
9+
</div>
10+
<div class="box">
11+
<tiny-filter-panel
12+
ref="filterPanel"
13+
label="物品数量"
14+
:value="value"
15+
:size="currentSize"
16+
@handle-clear="handleClear"
17+
>
18+
<tiny-radio-group v-model="radioVal" size="mini">
19+
<tiny-radio label="大于">大于</tiny-radio>
20+
<tiny-radio label="等于">等于</tiny-radio>
21+
<tiny-radio label="小于">小于</tiny-radio>
22+
</tiny-radio-group>
23+
<tiny-input type="text" v-model="inputVal" style="margin-top: 20px"></tiny-input>
24+
</tiny-filter-panel>
25+
</div>
26+
</div>
27+
</template>
28+
29+
<script>
30+
import { TinyFilterPanel, TinyRadio, TinyRadioGroup, TinyInput } from '@opentiny/vue'
31+
32+
export default {
33+
components: {
34+
TinyRadio,
35+
TinyRadioGroup,
36+
TinyFilterPanel,
37+
TinyInput
38+
},
39+
data() {
40+
return {
41+
inputVal: '',
42+
radioVal: '',
43+
currentSize: '' // 默认尺寸
44+
}
45+
},
46+
computed: {
47+
value() {
48+
return this.radioVal + this.inputVal
49+
}
50+
},
51+
methods: {
52+
handleClear() {
53+
this.radioVal = ''
54+
this.inputVal = ''
55+
}
56+
}
57+
}
58+
</script>
59+
60+
<style scoped>
61+
.box {
62+
display: flex;
63+
}
64+
.label {
65+
margin-right: 10px;
66+
font-weight: bold;
67+
}
68+
</style>

‎examples/sites/demos/pc/app/filter-panel/webdoc/filter-panel.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,19 @@ export default {
4646
},
4747
codeFiles: ['tip.vue']
4848
},
49+
{
50+
demoId: 'size',
51+
name: {
52+
'zh-CN': '尺寸',
53+
'en-US': 'Size'
54+
},
55+
desc: {
56+
'zh-CN': '通过 <code>size</code> 设置过滤器面板的尺寸。支持 <code>medium</code> 中等尺寸，不设置则为默认尺寸。',
57+
'en-US':
58+
'Set the size of the filter panel through <code>size</code>. Supports <code>medium</code> size. If not set, the default size is used.'
59+
},
60+
codeFiles: ['size.vue']
61+
},
4962
{
5063
demoId: 'manual-hide',
5164
name: {

‎packages/theme-saas/src/filter-box/index.less‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,13 @@
1616
@apply items-center;
1717
@apply text-xs;
1818

19+
&.@{filter-box-prefix-cls}--medium {
20+
@apply h-8;
21+
@apply leading-8;
22+
@apply px-2;
23+
@apply text-sm;
24+
}
25+
1926
&:hover {
2027
@apply bg-color-info-primary-subtler;
2128
}
@@ -39,7 +46,6 @@
3946

4047
.title {
4148
height: inherit;
42-
@apply text-xs;
4349
@apply ~'leading-[inherit]';
4450

4551
label {
@@ -78,7 +84,6 @@
7884
@apply overflow-hidden;
7985
@apply text-ellipsis;
8086
@apply whitespace-nowrap;
81-
@apply text-xs;
8287
@apply ~'leading-[inherit]';
8388
@apply text-color-text-primary;
8489

‎packages/theme/src/filter-box/index.less‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,12 @@
2929
align-items: center;
3030
font-size: var(--tv-FilterBox-btn-font-size);
3131

32+
&.@{filter-box-prefix-cls}--medium {
33+
height: var(--tv-FilterBox-btn-height-medium);
34+
line-height: var(--tv-FilterBox-btn-height-medium);
35+
font-size: var(--tv-FilterBox-btn-font-size-medium);
36+
}
37+
3238
&.disabled {
3339
cursor: not-allowed;
3440

@@ -50,7 +56,6 @@
5056
.title {
5157
height: inherit;
5258
line-height: var(--tv-FilterBox-btn-title-line-height);
53-
font-size: var(--tv-FilterBox-btn-font-size);
5459
margin-right: 0;
5560

5661
label {
@@ -92,7 +97,6 @@
9297
overflow: hidden;
9398
text-overflow: ellipsis;
9499
white-space: nowrap;
95-
font-size: var(--tv-FilterBox-btn-font-size);
96100
color: var(--tv-color-text);
97101

98102
&.placeholder {

‎packages/theme/src/filter-box/vars.less‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,12 @@
3030
--tv-FilterBox-btn-font-size: var(--tv-font-size-sm, 12px);
3131
// 按钮文本行高
3232
--tv-FilterBox-btn-title-line-height: var(--tv-line-height-number, 1.5);
33+
// 按钮medium文本字号
34+
--tv-FilterBox-btn-font-size-medium: var(--tv-font-size-default, 14px);
35+
// 按钮medium文本行高
36+
--tv-FilterBox-btn-title-line-height-medium: var(--tv-line-height-number, 1.5);
37+
// 按钮medium高度
38+
--tv-FilterBox-btn-height-medium: var(--tv-size-height-lg, 40px);
3339

3440
// 按钮帮助图标右边距
3541
--tv-FilterBox-help-btn-margin-right: var(--tv-space-sm, 4px);

‎packages/vue/src/filter-box/src/pc.vue‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<template>
2-
<div :class="['tiny-filter-box', disabled && 'disabled', blank && 'is-blank']" @click="handeClick">
2+
<div
3+
:class="['tiny-filter-box', disabled && 'disabled', blank && 'is-blank', size ? 'tiny-filter-box--' + size : '']"
4+
@click="handeClick"
5+
>
36
<p :class="['title', dropDownVisible && 'active']">
47
<label>{{ label }}</label>
58
<tiny-tooltip v-if="tip" effect="light" :content="tip" placement="top">
@@ -57,6 +60,10 @@ export default defineComponent({
5760
blank: {
5861
type: Boolean,
5962
default: false
63+
},
64+
size: {
65+
type: String,
66+
default: ''
6067
}
6168
},
6269
setup(props, context) {

‎packages/vue/src/filter-panel/src/pc.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
:value="value"
2828
:drop-down-visible="state.visible"
2929
:blank="blank"
30+
:size="size"
3031
></tiny-filter-box>
3132
</div>
3233
</template>
@@ -75,6 +76,10 @@ export default defineComponent({
7576
blank: {
7677
type: Boolean,
7778
default: false
79+
},
80+
size: {
81+
type: String,
82+
default: ''
7883
}
7984
},
8085
setup(props, context) {

0 commit comments

Comments
 (0)