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

feat(button-group): [button-group] Adapting to the SMB theme (#2070) 

* feat(button-group): [button-group] Adapting to the SMB theme

* feat(button-group): [button-group] Adapting to the SMB theme

* feat(button-group): [button-group] Adapting to the SMB theme
This commit is contained in:
东风使命必达 2024-09-06 20:00:37 -07:00 committed by GitHub
parent 3bd664a88f
commit 505f2b6bd3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 122 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
examples/sites/demos/pc/app/button-group/border-composition-api.vue
View File

@ -1,15 +0,0 @@
<template>
<tiny-button-group :data="groupData" :border="false" v-model="checkedVal"></tiny-button-group>
</template>
<script setup>
import { ref } from 'vue'
import { ButtonGroup as TinyButtonGroup } from '@opentiny/vue'
const checkedVal = ref('Button1')
const groupData = ref([
{ text: 'Button1', value: 'Button1' },
{ text: 'Button2', value: 'Button2' },
{ text: 'Button3', value: 'Button3' }
])
</script>

20
examples/sites/demos/pc/app/button-group/border.spec.ts
View File

@ -1,20 +0,0 @@
import { test, expect } from '@playwright/test'
test('测试按钮组有无边框', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('button-group#border')
const demo = page.locator('#border')
const buttonGroup = demo.locator('.tiny-button-group').first()
const button3 = demo.getByRole('button', { name: 'Button3' })
await expect(buttonGroup).toHaveClass(/tiny-button-group--borderless/)
await button3.click()
await demo.click()
await expect(buttonGroup.locator('li').nth(2)).toHaveClass('active')
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('color', 'rgb(255, 255, 255)')
await expect(buttonGroup.locator('li').nth(0).locator('button')).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
await expect(buttonGroup.locator('li').nth(0).locator('button')).toHaveCSS('border-bottom-color', 'rgba(0, 0, 0, 0)')
})

23
examples/sites/demos/pc/app/button-group/border.vue
View File

@ -1,23 +0,0 @@
<template>
<tiny-button-group :data="groupData" :border="false" v-model="checkedVal"></tiny-button-group>
</template>
<script>
import { ButtonGroup } from '@opentiny/vue'
export default {
components: {
TinyButtonGroup: ButtonGroup
},
data() {
return {
checkedVal: 'Button1',
groupData: [
{ text: 'Button1', value: 'Button1' },
{ text: 'Button2', value: 'Button2' },
{ text: 'Button3', value: 'Button3' }
]
}
}
}
</script>

63
examples/sites/demos/pc/app/button-group/sup-composition-api.vue
View File

@ -1,24 +1,28 @@
<template>
<div class="demo-button">
<p>原生及插槽</p>
<tiny-button-group :data="groupData" v-model="checkedVal">
<template #button4="{ sup }">
<tiny-icon-plus-circle></tiny-icon-plus-circle>
<span>
{{ sup.text }}
</span>
</template>
</tiny-button-group>
<div class="sup">
<tiny-button-group :data="groupData" v-model="checkedVal">
<template #button4="{ sup }">
<tiny-icon-plus-circle></tiny-icon-plus-circle>
<span>
{{ sup.text }}
</span>
</template>
</tiny-button-group>
</div>
<br /><br />
<p>插槽引用tag角标</p>
<tiny-button-group :data="groupDataTag" v-model="checkedVal">
<template #btn="{ sup }">
<tiny-tag type="warning" size="small" hit>
<component :is="sup.icon" class="tiny-svg-size"></component>
{{ sup.text }}
</tiny-tag>
</template>
</tiny-button-group>
<div class="tag">
<tiny-button-group :data="groupDataTag" v-model="checkedVal">
<template #btn="{ sup }">
<tiny-tag type="warning" size="small" hit>
<component :is="sup.icon" class="tiny-svg-size"></component>
{{ sup.text }}
</tiny-tag>
</template>
</tiny-button-group>
</div>
</div>
</template>
@ -32,7 +36,7 @@ const TinyIconPlusCircle = iconPlusCircle()
const checkedVal = ref('Button1')
const groupData = ref([
{
text: '1年',
text: '文字',
value: 'Button1',
sup: {
class: ['success-bg'],
@ -40,7 +44,7 @@ const groupData = ref([
}
},
{
text: '2年',
text: '图标',
value: 'Button2',
sup: {
class: 'sup-icon',
@ -48,7 +52,7 @@ const groupData = ref([
}
},
{
text: '3年',
text: '文字',
value: 'Button3',
sup: {
class: 'sup-text',
@ -56,7 +60,7 @@ const groupData = ref([
}
},
{
text: '4年',
text: '组合',
value: 'Button4',
sup: {
slot: 'button4',
@ -67,7 +71,7 @@ const groupData = ref([
])
const groupDataTag = ref([
{
text: '1年',
text: '文本',
value: 'Button1',
sup: {
slot: 'btn',
@ -76,7 +80,7 @@ const groupDataTag = ref([
}
},
{
text: '2年',
text: '图标',
value: 'Button2',
sup: {
slot: 'btn',
@ -85,7 +89,7 @@ const groupDataTag = ref([
}
},
{
text: '3年',
text: '图标',
value: 'Button3',
sup: {
slot: 'btn',
@ -94,7 +98,7 @@ const groupDataTag = ref([
}
},
{
text: '4年',
text: '组合',
value: 'Button4',
sup: {
slot: 'btn',
@ -128,9 +132,18 @@ const groupDataTag = ref([
</style>
<style>
.demo-button button {
.demo-button .sup button {
width: 84px;
}
.demo-button .sup li:nth-of-type(4) button {
width: 124px;
}
.demo-button .tag button {
width: 84px;
}
.demo-button .tag li:last-child button {
width: 120px;
}
.demo-button p {
margin-bottom: 8px;
}

63
examples/sites/demos/pc/app/button-group/sup.vue
View File

@ -1,24 +1,28 @@
<template>
<div class="demo-button">
<p>原生及插槽</p>
<tiny-button-group :data="groupData" v-model="checkedVal">
<template #button4="{ sup }">
<icon-plus-circle></icon-plus-circle>
<span>
{{ sup.text }}
</span>
</template>
</tiny-button-group>
<div class="sup">
<tiny-button-group :data="groupData" v-model="checkedVal">
<template #button4="{ sup }">
<icon-plus-circle></icon-plus-circle>
<span>
{{ sup.text }}
</span>
</template>
</tiny-button-group>
</div>
<br /><br />
<p>插槽引用tag角标</p>
<tiny-button-group :data="groupData2" v-model="checkedVal">
<template #btn="{ sup }">
<tiny-tag type="warning" size="small" hit>
<component :is="sup.icon" class="tiny-svg-size"></component>
{{ sup.text }}
</tiny-tag>
</template>
</tiny-button-group>
<div class="tag">
<tiny-button-group :data="groupData2" v-model="checkedVal">
<template #btn="{ sup }">
<tiny-tag type="warning" size="small" hit>
<component :is="sup.icon" class="tiny-svg-size"></component>
{{ sup.text }}
</tiny-tag>
</template>
</tiny-button-group>
</div>
</div>
</template>
@ -39,7 +43,7 @@ export default {
checkedVal: 'Button1',
groupData: [
{
text: '1年',
text: '文字',
value: 'Button1',
sup: {
class: ['success-bg'],
@ -47,7 +51,7 @@ export default {
}
},
{
text: '2年',
text: '图标',
value: 'Button2',
sup: {
class: 'sup-icon',
@ -55,7 +59,7 @@ export default {
}
},
{
text: '3年',
text: '文字',
value: 'Button3',
sup: {
class: 'sup-text',
@ -63,7 +67,7 @@ export default {
}
},
{
text: '4年',
text: '组合',
value: 'Button4',
sup: {
slot: 'button4',
@ -74,7 +78,7 @@ export default {
],
groupData2: [
{
text: '1年',
text: '文本',
value: 'Button1',
sup: {
slot: 'btn',
@ -83,7 +87,7 @@ export default {
}
},
{
text: '2年',
text: '图标',
value: 'Button2',
sup: {
slot: 'btn',
@ -92,7 +96,7 @@ export default {
}
},
{
text: '3年',
text: '图标',
value: 'Button3',
sup: {
slot: 'btn',
@ -101,7 +105,7 @@ export default {
}
},
{
text: '4年',
text: '组合',
value: 'Button4',
sup: {
slot: 'btn',
@ -141,9 +145,18 @@ export default {
.demo-button p {
margin-bottom: 8px;
}
.demo-button button {
.demo-button .sup button {
width: 84px;
}
.demo-button .sup li:nth-of-type(4) button {
width: 124px;
}
.demo-button .tag button {
width: 84px;
}
.demo-button .tag li:last-child button {
width: 120px;
}
.demo-button .tiny-tag {
border-radius: 0px 5px 0 8px;
}

12
examples/sites/demos/pc/app/button-group/webdoc/button-group.js
View File

@ -138,18 +138,6 @@ export default {
},
codeFiles: ['button-group-multiple.vue']
},
{
demoId: 'border',
name: {
'zh-CN': '边框',
'en-US': 'Border'
},
desc: {
'zh-CN': '<p>通过 <code>border</code> 设置有无边框。</p>',
'en-US': '<p>Set whether there is a border through <code>border</code> .</p>'
},
codeFiles: ['border.vue']
},
{
demoId: 'sup',
name: {

9
packages/renderless/src/button-group/index.ts
View File

@ -48,5 +48,12 @@ export const getItemClass =
return { disabled: true }
}
return props.plain ? { plain: props.plain } : {}
return props.plain
? {
plain: props.plain,
medium: props.size === 'medium',
small: props.size === 'small',
mini: props.size === 'mini'
}
: {}
}

3
packages/renderless/types/button-group.type.ts
View File

@ -8,6 +8,9 @@ export type IButtonGroupProps = ExtractPropTypes<typeof buttonGroupProps>
export interface IButtonGroupItemClass {
disabled?: boolean
plain?: boolean
medium?: boolean
small?: boolean
mini?: boolean
}
// 可以通过textField和validField指定建值，因此属性都为可选

19
packages/theme/src/button-group/index.less
View File

@ -319,4 +319,23 @@
background-color: var(--ti-button-group-no-border-disabled-bg-color);
}
}
&&--medium {
ul li button {
height: var(--ti-button-group-medium-size);
line-height: var(--ti-button-group-medium-line-height);
}
}
&&--small {
ul li button {
height: var(--ti-button-group-small-size);
line-height: var(--ti-button-group-small-line-height);
}
}
&&--mini {
ul li button {
height: var(--ti-button-group-mini-size);
line-height: var(--ti-button-group-mini-line-height);
}
}
}

11
packages/theme/src/button-group/smb-theme.js
View File

@ -5,7 +5,8 @@ export const tinyButtonGroupTheme = {
'ti-button-group-left-border-radius': 'var(--ti-common-border-radius-normal)',
'ti-button-group-item-btn-text-color': 'var(--ti-common-color-text-secondary)',
'ti-button-group-item-active-bg-color': 'var(--ti-common-color-prompt)',
'ti-button-group-item-btn-hover-bg-color': 'var(--ti-common-color-bg-normal)',
'ti-button-group-item-btn-hover-bg-color': '#DEECFF',
'ti-button-group-item-btn-disabled-bg-color': '#F0F0F0',
'ti-button-group-item-active-disabled-bg-color': 'var(--ti-common-color-bg-dark-disabled)',
'ti-button-group-btn-padding-horizontal': 'var(--ti-common-space-6x)',
'ti-button-group-mini-padding-horizontal': 'var(--ti-common-space-4x)',
@ -16,5 +17,11 @@ export const tinyButtonGroupTheme = {
'ti-button-group-item-sup-position-top': 'var(--ti-common-space-0)',
'ti-button-group-item-sup-height': 'var(--ti-common-line-height-base)',
'ti-button-group-mini-side-border-radius': 'var(--ti-button-group-mini-border-radius)',
'ti-button-group-sup-icon-line-height': '22px'
'ti-button-group-sup-icon-line-height': '22px',
'ti-button-group-medium-size': '32px',
'ti-button-group-medium-line-height': '30px',
'ti-button-group-small-size': '28px',
'ti-button-group-small-line-height': '26px',
'ti-button-group-mini-size': '24px',
'ti-button-group-mini-line-height': '22px'
}

7
packages/theme/src/button-group/vars.less
View File

@ -117,4 +117,11 @@
--ti-button-group-item-sup-font-size: var(--ti-common-font-size-base, 12px);
// icon角标
--ti-button-group-sup-icon-line-height: 18px;
// 尺寸大小
--ti-button-group-medium-size: 42px;
--ti-button-group-medium-line-height: 40px;
--ti-button-group-small-size: 32px;
--ti-button-group-small-line-height: 30px;
--ti-button-group-mini-size: 24px;
--ti-button-group-mini-line-height: 22px;
}

4
packages/vue/src/button-group/src/pc.vue
View File

@ -20,10 +20,6 @@
<li v-for="(node, index) in data" :key="index" :class="{ active: state.value === node[valueField] }">
<button
:class="getItemClass(node)"
:style="{
height: size === 'medium' ? '42px' : size === 'small' ? '32px' : size === 'mini' ? '24px' : '',
'line-height': size === 'medium' ? '40px' : size === 'small' ? '30px' : size === 'mini' ? '22px' : ''
}"
type="button"
v-auto-tip="Boolean(node.tip) ? { always: true, content: node.tip } : false"
:tabindex="getItemClass(node).disabled ? '-1' : '0'"