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

fix(filter-panel): [filter-panel] Optimize the official website documentation and e2e test cases for the components (#1104)

This commit is contained in:
chenxi-20 2023-12-13 09:28:04 +08:00 committed by GitHub
parent ca2a46d949
commit 90f8431e31
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 126 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
examples/sites/demos/pc/app/filter-panel/basic-usage-composition-api.vue
View File

@ -1,6 +1,15 @@
<template>
<div>
<tiny-filter-panel ref="filterPanelRef" label="物品数量" @handle-clear="handleClear" :value="value">
<div class="mb10">
<tiny-switch v-model="disabled"></tiny-switch><span class="ml10">{{ disabled ? '禁用' : '非禁用' }}</span>
</div>
<tiny-filter-panel
ref="filterPanelRef"
label="物品数量"
@handle-clear="handleClear"
:value="value"
:disabled="disabled"
>
<tiny-radio-group v-model="radioVal" size="mini">
<tiny-radio label="大于">大于</tiny-radio>
<tiny-radio label="等于">等于</tiny-radio>
@ -17,11 +26,13 @@ import {
FilterPanel as TinyFilterPanel,
Radio as TinyRadio,
RadioGroup as TinyRadioGroup,
Input as TinyInput
Input as TinyInput,
Switch as TinySwitch
} from '@opentiny/vue'
const inputVal = ref('')
const radioVal = ref('')
const disabled = ref(false)
const value = computed(() => {
return radioVal.value + inputVal.value
})

21
examples/sites/demos/pc/app/filter-panel/basic-usage.spec.ts
View File

@ -7,13 +7,22 @@ test('基本用法', async ({ page }) => {
const panel = page.locator('.tiny-filter-panel')
const button = panel.locator('.tiny-filter-box')
const popPanel = page.getByRole('tooltip', { name: '大于 等于 小于' })
const input = page.getByRole('tooltip', { name: '大于 等于 小于' }).getByRole('textbox')
const inputEl = page.locator('.tiny-filter-panel__popover').locator('.tiny-input__inner')
const disabledBtn = panel.locator('.tiny-filter-box.disabled')
const switchBtn = page.locator('.mb10 > .tiny-switch')
await button.click()
await expect(popPanel).toBeVisible()
await popPanel.isVisible()
await page.getByRole('radio', { name: '等于' }).click()
await expect(button).toHaveText('物品数量等于')
await input.click()
await input.fill('10')
await expect(button).toHaveText('物品数量等于10')
await button.getByText('物品数量等于').isVisible()
await inputEl.click()
await inputEl.fill('10')
await button.getByText('物品数量等于10').isVisible()
// 禁用
await switchBtn.click()
await expect(disabledBtn).toHaveCount(1)
await expect(disabledBtn).toHaveCSS('cursor', 'not-allowed')
await button.click()
await popPanel.isHidden()
})

19
examples/sites/demos/pc/app/filter-panel/basic-usage.vue
View File

@ -1,6 +1,15 @@
<template>
<div>
<tiny-filter-panel ref="filterPanel" label="物品数量" @handle-clear="handleClear" :value="value">
<div class="mb10">
<tiny-switch v-model="disabled"></tiny-switch><span class="ml10">{{ disabled ? '禁用' : '非禁用' }}</span>
</div>
<tiny-filter-panel
ref="filterPanel"
label="物品数量"
@handle-clear="handleClear"
:value="value"
:disabled="disabled"
>
<tiny-radio-group v-model="radioVal" size="mini">
<tiny-radio label="大于">大于</tiny-radio>
<tiny-radio label="等于">等于</tiny-radio>
@ -12,19 +21,21 @@
</template>
<script>
import { FilterPanel, Radio, RadioGroup, Input } from '@opentiny/vue'
import { FilterPanel, Radio, RadioGroup, Input, Switch } from '@opentiny/vue'
export default {
components: {
TinyRadio: Radio,
TinyRadioGroup: RadioGroup,
TinyFilterPanel: FilterPanel,
TinyInput: Input
TinyInput: Input,
TinySwitch: Switch
},
data() {
return {
inputVal: '',
radioVal: ''
radioVal: '',
disabled: false
}
},
computed: {

33
examples/sites/demos/pc/app/filter-panel/clearable-composition-api.vue
View File

@ -1,33 +0,0 @@
<template>
<div>
<tiny-filter-panel ref="filterPanel" label="物品数量" clearable :value="value" @handle-clear="handleClear">
<tiny-radio-group v-model="radioVal" size="mini">
<tiny-radio label="大于">大于</tiny-radio>
<tiny-radio label="等于">等于</tiny-radio>
<tiny-radio label="小于">小于</tiny-radio>
</tiny-radio-group>
<tiny-input type="text" v-model="inputVal" style="margin-top: 20px"></tiny-input>
</tiny-filter-panel>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
import {
FilterPanel as TinyFilterPanel,
Radio as TinyRadio,
RadioGroup as TinyRadioGroup,
Input as TinyInput
} from '@opentiny/vue'
const inputVal = ref('')
const radioVal = ref('')
const value = computed(() => {
return radioVal.value + inputVal.value
})
function handleClear() {
radioVal.value = ''
inputVal.value = ''
}
</script>

18
examples/sites/demos/pc/app/filter-panel/clearable.spec.ts
View File

@ -1,18 +0,0 @@
import { test, expect } from '@playwright/test'
test('点击按钮清空', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://127.0.0.1:7130/pc/filter-panel/clearable')
const panel = page.locator('.tiny-filter-panel')
const button = panel.locator('.tiny-filter-box')
const popPanel = page.getByRole('tooltip', { name: '大于 等于 小于' })
const clear = panel.locator('.filter-icon-close')
await button.click()
await expect(popPanel).toBeVisible()
await page.getByRole('radio', { name: '等于' }).click()
await expect(button).toHaveText('物品数量等于')
await clear.click()
await expect(button).toHaveText('物品数量')
})

42
examples/sites/demos/pc/app/filter-panel/clearable.vue
View File

@ -1,42 +0,0 @@
<template>
<div>
<tiny-filter-panel ref="filterPanel" label="物品数量" clearable :value="value" @handle-clear="handleClear">
<tiny-radio-group v-model="radioVal" size="mini">
<tiny-radio label="大于">大于</tiny-radio>
<tiny-radio label="等于">等于</tiny-radio>
<tiny-radio label="小于">小于</tiny-radio>
</tiny-radio-group>
<tiny-input type="text" v-model="inputVal" style="margin-top: 20px"></tiny-input>
</tiny-filter-panel>
</div>
</template>
<script>
import { FilterPanel, Radio, RadioGroup, Input } from '@opentiny/vue'
export default {
components: {
TinyRadio: Radio,
TinyRadioGroup: RadioGroup,
TinyFilterPanel: FilterPanel,
TinyInput: Input
},
data() {
return {
inputVal: '',
radioVal: ''
}
},
computed: {
value() {
return this.radioVal + this.inputVal
}
},
methods: {
handleClear() {
this.radioVal = ''
this.inputVal = ''
}
}
}
</script>

28
examples/sites/demos/pc/app/filter-panel/disabled-composition-api.vue
View File

@ -1,28 +0,0 @@
<template>
<div>
<tiny-filter-panel ref="filterPanel" label="物品数量" disabled :value="value">
<tiny-radio-group v-model="radioVal" size="mini">
<tiny-radio label="大于">大于</tiny-radio>
<tiny-radio label="等于">等于</tiny-radio>
<tiny-radio label="小于">小于</tiny-radio>
</tiny-radio-group>
<tiny-input type="text" v-model="inputVal" style="margin-top: 20px"></tiny-input>
</tiny-filter-panel>
</div>
</template>
<script setup>
import { ref, computed } from 'vue'
import {
FilterPanel as TinyFilterPanel,
Radio as TinyRadio,
RadioGroup as TinyRadioGroup,
Input as TinyInput
} from '@opentiny/vue'
const inputVal = ref('')
const radioVal = ref('')
const value = computed(() => {
return radioVal.value + inputVal.value
})
</script>

12
examples/sites/demos/pc/app/filter-panel/disabled.spec.ts
View File

@ -1,12 +0,0 @@
import { test, expect } from '@playwright/test'
test('禁用状态', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://127.0.0.1:7130/pc/filter-panel/disabled')
const panel = page.locator('.tiny-filter-panel')
const button = panel.locator('.tiny-filter-box.disabled')
await expect(button).toHaveCount(1)
await expect(button).toHaveCSS('cursor', 'not-allowed')
})

37
examples/sites/demos/pc/app/filter-panel/disabled.vue
View File

@ -1,37 +0,0 @@
<template>
<div>
<tiny-filter-panel ref="filterPanel" label="物品数量" disabled :value="value">
<tiny-radio-group v-model="radioVal" size="mini">
<tiny-radio label="大于">大于</tiny-radio>
<tiny-radio label="等于">等于</tiny-radio>
<tiny-radio label="小于">小于</tiny-radio>
</tiny-radio-group>
<tiny-input type="text" v-model="inputVal" style="margin-top: 20px"></tiny-input>
</tiny-filter-panel>
</div>
</template>
<script>
import { FilterPanel, Radio, RadioGroup, Input } from '@opentiny/vue'
export default {
components: {
TinyRadio: Radio,
TinyRadioGroup: RadioGroup,
TinyFilterPanel: FilterPanel,
TinyInput: Input
},
data() {
return {
inputVal: '',
radioVal: ''
}
},
computed: {
value() {
return this.radioVal + this.inputVal
}
},
methods: {}
}
</script>

14
examples/sites/demos/pc/app/filter-panel/event.spec.ts
View File

@ -8,11 +8,21 @@ test('事件', async ({ page }) => {
const button = panel.locator('.tiny-filter-box')
const popPanel = page.getByRole('tooltip', { name: '大于 等于 小于' })
const modal = page.locator('.tiny-modal')
const clear = panel.locator('.filter-icon-close')
// handle-clear事件
await button.click()
await popPanel.isVisible()
await page.getByRole('radio', { name: '等于' }).click()
await expect(button).toHaveText('物品数量等于')
await clear.click()
await expect(button).toHaveText('物品数量')
await button.click()
// visible-change事件
await button.click()
await expect(popPanel).toBeVisible()
await expect(modal.nth(1)).toHaveText('true visibleChange')
await button.click()
await expect(popPanel).not.toBeVisible()
await popPanel.isHidden()
await expect(modal.nth(2)).toHaveText('false visibleChange')
})

4
examples/sites/demos/pc/app/filter-panel/manual-hide.spec.ts
View File

@ -10,7 +10,7 @@ test('手动隐藏', async ({ page }) => {
const manualButton = page.getByRole('button', { name: '确定' })
await button.click()
await expect(popPanel).toBeVisible()
await popPanel.isVisible()
await manualButton.click()
await expect(popPanel).not.toBeVisible()
await popPanel.isHidden()
})

1
examples/sites/demos/pc/app/filter-panel/popper-class-composition-api.vue
View File

@ -7,6 +7,7 @@
:popper-append-to-body="false"
:value="value"
:clearable="false"
placement="top-start"
>
<tiny-radio-group v-model="radioVal" size="mini">
<tiny-radio label="大于">大于</tiny-radio>

4
examples/sites/demos/pc/app/filter-panel/popper-class.spec.ts
View File

@ -9,7 +9,7 @@ test('弹出框样式', async ({ page }) => {
const popPanel = page.getByRole('tooltip', { name: '大于 等于 小于' })
await button.click()
await expect(popPanel).toBeVisible()
await popPanel.isHidden()
await button.click()
await expect(popPanel).not.toBeVisible()
await popPanel.isHidden()
})

1
examples/sites/demos/pc/app/filter-panel/popper-class.vue
View File

@ -7,6 +7,7 @@
:popper-append-to-body="false"
:value="value"
:clearable="false"
placement="top-start"
>
<tiny-radio-group v-model="radioVal" size="mini">
<tiny-radio label="大于">大于</tiny-radio>

4
examples/sites/demos/pc/app/filter-panel/tip.spec.ts
View File

@ -2,12 +2,12 @@ import { test, expect } from '@playwright/test'
test('tip提示', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://127.0.0.1:7130/pc/filter-panel/tip')
await page.goto('filter-panel#tip')
const panel = page.locator('.tiny-filter-panel')
const help = panel.locator('.tiny-svg.tiny-tooltip')
const tooltip = page.getByRole('tooltip', { name: '请选择物品数量' })
await help.hover()
await expect(tooltip).toBeVisible()
await tooltip.isVisible()
})

2
examples/sites/demos/pc/app/filter-panel/webdoc/filter-panel.cn.md
View File

@ -4,4 +4,4 @@ title: FilterPanel 过滤器面板
# FilterPanel 过滤器面板
<div>FilterPanel 过滤器面板 。</div>
<div>用于列表数据过滤、图标卡片过滤等。</div>

6
examples/sites/demos/pc/app/filter-panel/webdoc/filter-panel.en.md
View File

@ -1,7 +1,7 @@
---
title: FilterPanel FilterPanel
title: FilterPanel
---
# FilterPanel FilterPanel
# FilterPanel
<div>FilterPanel Filterpanel.</div>
<div>Used for filtering list data, icon card filtering, etc.</div>

106
examples/sites/demos/pc/app/filter-panel/webdoc/filter-panel.js
View File

@ -6,38 +6,30 @@ export default {
'demoId': 'basic-usage',
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
'desc': {
'zh-CN': '<p>过滤器面板用于列表数据过滤、图标卡片过滤，自定义过滤面板内容</p>\n',
'en-US':
'<p>The filter panel is used to filter list data, filter icon cards, and customize the filter panel content</p>\n'
'zh-CN':
'通过 <code>label</code> 设置标题，<code>value</code> 设置标题右侧内容，<code>disabled</code> 设置是否禁用；通过默认插槽自定义过滤面板内容。',
'en-US': `Set the title through<code>label</code>,<code>value</code>set the content to the right of the title, and<code>disabled</code>set whether to disable it;
Customize filter panel content through default slots.`
},
'codeFiles': ['basic-usage.vue']
},
{
'demoId': 'disabled',
'name': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
'desc': {
'zh-CN': '<p>通过 <code>disabled</code> 设置禁用</p>\n',
'en-US': '<p>Disabling by <code>disabled</code> </p>\n'
},
'codeFiles': ['disabled.vue']
},
{
'demoId': 'clearable',
'name': { 'zh-CN': '显示清空按钮', 'en-US': 'Show Clear Button' },
'demoId': 'popper-class',
'name': { 'zh-CN': '自定义下拉面板', 'en-US': 'Custom dropdown box' },
'desc': {
'zh-CN':
'<p>给组件加上 <code>clearable</code> 属性可以显示清空按钮，配合 <code>handle-clear</code> 事件一起使用清空内容区域的值</p>\n',
'en-US':
'<p>The <code>clearable</code> attribute is added to the component to display the clear button. This attribute is used together with the <code>handle-clear</code> event to clear the value of the content area.</p>\n'
'通过 <code>placement</code> 控制下拉面板的位置， <code>popper-class</code> 设置类名，自定义下拉面板的样式；<code>popper-append-to-body</code> 设置弹下拉面板是否插入至 body 元素。在下拉面板的定位出现问题时，可将其设置为 false。',
'en-US': `Control the position of the drop-down panel through<code>placement</code>. Set the class name and customize the style of the dropdown box through<code>popper-class</code>. <code>popper-append-to-body</code>Set whether the pop-up
menu is inserted into the body element. When there is an issue with the positioning of the dropdown box, it can be set to false.`
},
'codeFiles': ['clearable.vue']
'codeFiles': ['popper-class.vue']
},
{
'demoId': 'tip',
'name': { 'zh-CN': 'tip 提示', 'en-US': 'Tip' },
'name': { 'zh-CN': '提示', 'en-US': 'Tip' },
'desc': {
'zh-CN': '<p>标题右侧添加提示信息</p>\n',
'en-US': '<p>Add a message to the right of the title.</p>\n'
'zh-CN': `通过 <code>:clearable='false'</code> 隐藏清空按钮；配合 <code>tip</code> 添加标题右侧提示信息。`,
'en-US': `Hide the clear button through<code>:clearable='false'</code>; Collaborate with<code>tip</code>to add prompt information on the right side of the title.`
},
'codeFiles': ['tip.vue']
},
@ -45,9 +37,8 @@ export default {
'demoId': 'manual-hide',
'name': { 'zh-CN': '手动隐藏', 'en-US': 'Manually hide' },
'desc': {
'zh-CN': '<p>通过给元素添加 ref，然后主动调用组件的 hide 方法可以手动隐藏下拉框</p>',
'en-US':
'<p>You can manually hide the drop-down list box by adding ref to the element and invoking the hide method of the component.</p>'
'zh-CN': '手动调用 <code>hide</code> 实例方法完成收起下拉面板功能。',
'en-US': 'Manually call the<code>hide</code>instance method to complete the collapse dropdown function.'
},
'codeFiles': ['manual-hide.vue']
},
@ -55,22 +46,12 @@ export default {
'demoId': 'event',
'name': { 'zh-CN': '事件', 'en-US': 'Event' },
'desc': {
'zh-CN': '<p> <code>visible-change</code> 事件在下拉面板显示/隐藏时触发</p>',
'zh-CN':
'<code>handle-clear</code> 监听清空按钮点击事件，执行删除操作； <code>visible-change</code> 监听下拉面板的显隐事件。',
'en-US':
'<p> <code>visible-change</code> event is triggered when the drop-down panel is displayed or hidden</p>'
'<code>handle-clear</code>Listen to the clear button click event and execute the delete operation<code>visible-change</code>listens to the explicit and implicit events of the drop-down panel.'
},
'codeFiles': ['event.vue']
},
{
'demoId': 'popper-class',
'name': { 'zh-CN': '弹出框样式', 'en-US': 'Pop-up dialog box style' },
'desc': {
'zh-CN':
'<p>通过 <code>popper-class</code> 属性可自定义下拉弹框的样式。popper-append-to-body 指定是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false</p>',
'en-US':
'<p>You can use the <code>popper-class</code> attribute to customize the style of the drop-down list box. popper-append-to-body Specifies whether to insert a pop-up box into the body element. If a fault occurs in locating the fault in the dialog box that is displayed, you can set this attribute to false</p>'
},
'codeFiles': ['popper-class.vue']
}
],
apis: [
@ -83,11 +64,11 @@ export default {
'type': 'boolean',
'defaultValue': 'true',
'desc': {
'zh-CN': '显示清空按钮，配合`handle-clear`事件一起使用清空内容区域的值，默认为true。',
'zh-CN': '控制清空按钮的显隐，默认显示；可配合 handle-clear 事件来完成清空内容区域的值',
'en-US':
'Displays the Clear button, which is used together with the `handle-clear` event to clear the value of the content area. The default value is true.'
'Control the display of the clear button, default display; Can be used in conjunction with the handle clear event to clear the value of the content area'
},
'demoId': 'clearable'
'demoId': 'tip'
},
{
'name': 'disabled',
@ -97,7 +78,7 @@ export default {
'zh-CN': '是否禁用',
'en-US': 'Whether to disable'
},
'demoId': 'disabled'
'demoId': 'basic-usage'
},
{
'name': 'label',
@ -107,25 +88,27 @@ export default {
'zh-CN': '标题',
'en-US': 'The title'
},
'demoId': 'popper-class'
'demoId': 'basic-usage'
},
{
'name': 'placement',
'type': 'string',
'defaultValue': 'bottom-start',
'type': 'IPopperPlacement',
'typeAnchorName': 'popover#IPopperPlacement',
'defaultValue': `'bottom-start'`,
'desc': {
'zh-CN': '弹出框位置，默认值为bottom-start',
'en-US': 'Position of the pop-up dialog box. The default value is bottom-start.'
'zh-CN': '下拉面板位置，可选值请参考popover组件的同属性',
'en-US':
'Drop down panel position, optional values please refer to the same properties of the popover component'
},
'demoId': ''
'demoId': 'popper-class'
},
{
'name': 'popper-append-to-body',
'type': 'boolean',
'defaultValue': 'true',
'desc': {
'zh-CN': '下拉框是否添加到body中',
'en-US': 'Indicates whether to add the drop-down list box to the body.'
'zh-CN': '下拉面板是否添加到body元素中',
'en-US': 'Indicates whether to add the drop-down panel to the body element'
},
'demoId': 'popper-class'
},
@ -134,8 +117,8 @@ export default {
'type': 'string',
'defaultValue': '',
'desc': {
'zh-CN': '下拉框的class',
'en-US': 'Class in the drop-down list box'
'zh-CN': '下拉面板的class',
'en-US': 'Class in the drop-down panel'
},
'demoId': 'popper-class'
},
@ -166,21 +149,32 @@ export default {
'type': '() => void',
'defaultValue': '',
'desc': {
'zh-CN': '清除按钮点击事件。',
'en-US': 'Clear button click event.'
'zh-CN': '清除按钮点击事件',
'en-US': 'Clear button click event'
},
'demoId': 'event'
},
{
'name': 'visible-change',
'type': '() => void',
'type': '(visible: boolean) => void',
'defaultValue': '',
'desc': {
'zh-CN': '下拉框显示隐藏事件。',
'en-US': 'The drop-down list box displays hidden events.'
'zh-CN': '下拉面板显示隐藏事件',
'en-US': 'The drop-down panel displays hidden events'
},
'demoId': 'event'
}
],
'methods': [
{
'name': 'hide',
'type': '() => void',
'desc': {
'zh-CN': '隐藏下拉面板的方法',
'en-US': 'How to hide the drop-down panel'
},
'demoId': 'manual-hide'
}
]
}
]

10
examples/sites/demos/pc/app/popover/webdoc/popover.js
View File

@ -194,7 +194,8 @@ export default {
{
'name': 'placement',
'type': `'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'`,
'type': 'IPopperPlacement',
'typeAnchorName': 'IPopperPlacement',
'defaultValue': '"bottom"',
'desc': {
'zh-CN': '弹出层出现的位置',
@ -393,6 +394,13 @@ interface IPopperOption {
removeOnDestroy: boolean // 弹出层消失后，是否移除弹出层的DOM元素，布尔false
}
`
},
{
name: 'IPopperPlacement',
type: 'type',
code: `
type IPopperPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'
`
}
]
}

1
packages/theme/src/color-picker/index.less
View File

@ -14,7 +14,6 @@
box-sizing: content-box;
padding: var(--ti-color-picker-padding-vertical) var(--ti-color-picker-padding-horizontal);
cursor: pointer;
.component-css-vars-color-picker();
&__inner {
display: flex;