forked from opentiny/tiny-vue
feat(button-group): [button-group] add default empty text (#1155)
* feat(button-group): [button-group] add default empty text * feat(button-group): [button-group] add default empty text
This commit is contained in:
parent
85a8d798b2
commit
c84ab66471
|
@ -10,6 +10,7 @@ test('按钮组基本示例', async ({ page }) => {
|
||||||
const button3 = demo.getByRole('button', { name: 'Button3' })
|
const button3 = demo.getByRole('button', { name: 'Button3' })
|
||||||
|
|
||||||
await button3.click()
|
await button3.click()
|
||||||
|
await demo.getByRole('button', { name: 'Button2' }).hover()
|
||||||
await expect(buttonGroup.locator('li').nth(2)).toHaveClass('active')
|
await expect(buttonGroup.locator('li').nth(2)).toHaveClass('active')
|
||||||
await expect(button3).toHaveCSS('background-color', 'rgb(94, 124, 224)')
|
await expect(button3).toHaveCSS('background-color', 'rgb(94, 124, 224)')
|
||||||
await expect(button3).toHaveCSS('border-bottom-color', 'rgb(94, 124, 224)')
|
await expect(button3).toHaveCSS('border-bottom-color', 'rgb(94, 124, 224)')
|
||||||
|
|
|
@ -0,0 +1,25 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<tiny-button-group :data="groupData" v-model="checkedVal"></tiny-button-group>
|
||||||
|
<tiny-button-group :data="groupData" v-model="checkedVal">
|
||||||
|
<span class="custom-empty">自定义空数据</span>
|
||||||
|
</tiny-button-group>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import { ButtonGroup as TinyButtonGroup } from '@opentiny/vue'
|
||||||
|
|
||||||
|
const checkedVal = ref('')
|
||||||
|
const groupData = ref([])
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.custom-empty {
|
||||||
|
color: #fac20a;
|
||||||
|
}
|
||||||
|
.tiny-button-group + .tiny-button-group {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { test, expect } from '@playwright/test'
|
||||||
|
|
||||||
|
test('空数据插槽', async ({ page }) => {
|
||||||
|
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||||
|
await page.goto('button-group#slot-empty')
|
||||||
|
|
||||||
|
const demo = page.locator('#slot-empty')
|
||||||
|
const emptySlot = demo.locator('.tiny-button-group .tiny-button-group--empty')
|
||||||
|
await expect(emptySlot.first()).toHaveCSS('color', 'rgb(173, 176, 184)')
|
||||||
|
await expect(demo.locator('.tiny-button-group .custom-empty')).toHaveCSS('color', 'rgb(250, 194, 10)')
|
||||||
|
})
|
|
@ -0,0 +1,33 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<tiny-button-group :data="groupData" v-model="checkedVal"></tiny-button-group>
|
||||||
|
<tiny-button-group :data="groupData" v-model="checkedVal">
|
||||||
|
<span class="custom-empty">自定义空数据</span>
|
||||||
|
</tiny-button-group>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ButtonGroup } from '@opentiny/vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
TinyButtonGroup: ButtonGroup
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
checkedVal: '',
|
||||||
|
groupData: []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.custom-empty {
|
||||||
|
color: #fac20a;
|
||||||
|
}
|
||||||
|
.tiny-button-group + .tiny-button-group {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -86,6 +86,15 @@ export default {
|
||||||
},
|
},
|
||||||
'codeFiles': ['slot-default.vue']
|
'codeFiles': ['slot-default.vue']
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
'demoId': 'slot-empty',
|
||||||
|
'name': { 'zh-CN': '空数据插槽', 'en-US': 'Empty slot' },
|
||||||
|
'desc': {
|
||||||
|
'zh-CN': '<p>当数据为空时,默认会显示暂无数据,通过默认插槽自定义内容。</p>',
|
||||||
|
'en-US': '<p>When the data is empty, customize the content via the <code>empty</code> slot.</p>'
|
||||||
|
},
|
||||||
|
'codeFiles': ['slot-empty.vue']
|
||||||
|
},
|
||||||
{
|
{
|
||||||
'demoId': 'button-group-multiple',
|
'demoId': 'button-group-multiple',
|
||||||
'name': { 'zh-CN': '多行按钮组', 'en-US': 'Button Group Multiple' },
|
'name': { 'zh-CN': '多行按钮组', 'en-US': 'Button Group Multiple' },
|
||||||
|
|
|
@ -28,6 +28,10 @@
|
||||||
margin-top: var(--ti-button-group-margin-top);
|
margin-top: var(--ti-button-group-margin-top);
|
||||||
.clearfix();
|
.clearfix();
|
||||||
|
|
||||||
|
&--empty {
|
||||||
|
color: var(--ti-common-color-placeholder);
|
||||||
|
}
|
||||||
|
|
||||||
.@{group-item-prefix-cls} {
|
.@{group-item-prefix-cls} {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
:class="[size ? 'tiny-button-group--' + size : '', border ? '' : 'tiny-button-group--borderless']"
|
:class="[size ? 'tiny-button-group--' + size : '', border ? '' : 'tiny-button-group--borderless']"
|
||||||
>
|
>
|
||||||
<slot>
|
<slot>
|
||||||
|
<template v-if="data.length > 0">
|
||||||
<ul v-if="!(showMore && showMore > 0)" class="tiny-group-item">
|
<ul v-if="!(showMore && showMore > 0)" class="tiny-group-item">
|
||||||
<li v-for="(node, index) in data" :key="index" :class="{ active: state.value === node[valueField] }">
|
<li v-for="(node, index) in data" :key="index" :class="{ active: state.value === node[valueField] }">
|
||||||
<button
|
<button
|
||||||
|
@ -102,6 +103,8 @@
|
||||||
</tiny-button>
|
</tiny-button>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
</template>
|
||||||
|
<span v-else class="tiny-button-group--empty"> 暂无数据 </span>
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
Loading…
Reference in New Issue