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

feat(badge): [badge] Adapting to the SMB theme (#2107) 

* feat(badge): [badge] Adapting to the SMB theme

* feat(badge): [badge] Adapting to the SMB theme
This commit is contained in:
东风使命必达 2024-09-12 19:31:34 -07:00 committed by GitHub
parent 852c07d58c
commit 202292c3fb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 67 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/sites/demos/pc/app/badge/basic-usage.spec.ts
View File

@ -10,6 +10,6 @@ test('测试基本用法', async ({ page }) => {
await expect(textWrapper).toContainText('我的待办')
await expect(badge).toContainText('2')
await expect(badge).toHaveCSS('background-color', 'rgb(246, 111, 106)')
await expect(badge).toHaveCSS('background-color', 'rgb(242, 48, 48)')
await expect(badge).toHaveCSS('color', 'rgb(255, 255, 255)')
})

30
examples/sites/demos/pc/app/badge/offset-composition-api.vue
View File

@ -2,14 +2,40 @@
<div>
<p>使用字符串：</p>
<br />
<tiny-badge :value="2" :offset="['0', '-20%']">我的待办</tiny-badge>
<tiny-badge :value="2" :offset="['0', '-50%']">我的待办</tiny-badge>
<br /><br />
<p>使用数字：</p>
<br />
<tiny-badge :value="2" :offset="[0, -6]">我的待办</tiny-badge>
<tiny-badge :value="2" :offset="[0, -8]">我的待办</tiny-badge>
<br /><br />
<p>区域使用：</p>
<br />
<div class="demo-box">
<tiny-badge :value="9" :max="9" :offset="['-50%', '-212%']"><div class="demo-badge-offset"></div></tiny-badge>
<tiny-badge :value="99" :max="99" :offset="['-50%', '-212%']"><div class="demo-badge-offset"></div></tiny-badge>
<tiny-badge :value="100" :max="99" :offset="['-50%', '-212%']"><div class="demo-badge-offset"></div></tiny-badge>
<tiny-badge :value="1000" :max="999" :offset="['-50%', '-212%']"
><div class="demo-badge-offset"></div
></tiny-badge>
</div>
</div>
</template>
<script setup>
import { Badge as TinyBadge } from '@opentiny/vue'
</script>
<style scoped>
.demo-badge-offset {
display: inline-block;
width: 60px;
height: 40px;
background-color: gainsboro;
}
.demo-box {
width: 400px;
height: 60px;
display: flex;
justify-content: space-around;
}
</style>

7
examples/sites/demos/pc/app/badge/offset.spec.ts
View File

@ -5,8 +5,9 @@ test('标记的位置', async ({ page }) => {
await page.goto('badge#offset')
const demo = page.locator('#offset')
const badge = demo.locator('.tiny-badge')
const badge = demo.locator('div').filter({ hasText: /^2$/ }).first()
const badge2 = demo.locator('div').filter({ hasText: /^2$/ }).nth(1)
await expect(badge.first()).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, -4)')
await expect(badge.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, -6)')
await expect(badge).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, -8)')
await expect(badge2).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, -8)')
})

30
examples/sites/demos/pc/app/badge/offset.vue
View File

@ -2,11 +2,22 @@
<div>
<p>使用字符串：</p>
<br />
<tiny-badge :value="2" :offset="['0', '-20%']">我的待办</tiny-badge>
<tiny-badge :value="2" :offset="['0', '-50%']">我的待办</tiny-badge>
<br /><br />
<p>使用数字：</p>
<br />
<tiny-badge :value="2" :offset="[0, -6]">我的待办</tiny-badge>
<tiny-badge :value="2" :offset="[0, -8]">我的待办</tiny-badge>
<br /><br />
<p>区域使用：</p>
<br />
<div class="demo-box">
<tiny-badge :value="9" :max="9" :offset="['-50%', '-212%']"><div class="demo-badge-offset"></div></tiny-badge>
<tiny-badge :value="99" :max="99" :offset="['-50%', '-212%']"><div class="demo-badge-offset"></div></tiny-badge>
<tiny-badge :value="100" :max="99" :offset="['-50%', '-212%']"><div class="demo-badge-offset"></div></tiny-badge>
<tiny-badge :value="1000" :max="999" :offset="['-50%', '-212%']"
><div class="demo-badge-offset"></div
></tiny-badge>
</div>
</div>
</template>
@ -19,3 +30,18 @@ export default {
}
}
</script>
<style scoped>
.demo-badge-offset {
display: inline-block;
width: 60px;
height: 40px;
background-color: gainsboro;
}
.demo-box {
width: 400px;
height: 60px;
display: flex;
justify-content: space-around;
}
</style>

8
examples/sites/demos/pc/app/badge/type.spec.ts
View File

@ -15,11 +15,11 @@ test('主題样式', async ({ page }) => {
await expect(dangerBadge).toHaveClass(/tiny-badge--danger/)
await expect(dangerBadge).toHaveCSS('background-color', 'rgb(246, 111, 106)')
await expect(primaryBadge).toHaveClass(/tiny-badge--primary/)
await expect(primaryBadge).toHaveCSS('background-color', 'rgb(94, 124, 224)')
await expect(primaryBadge).toHaveCSS('background-color', 'rgb(25, 25, 25)')
await expect(successBadge).toHaveClass(/tiny-badge--success/)
await expect(successBadge).toHaveCSS('background-color', 'rgb(80, 212, 171)')
await expect(successBadge).toHaveCSS('background-color', 'rgb(92, 179, 0)')
await expect(warningBadge).toHaveClass(/tiny-badge--warning/)
await expect(warningBadge).toHaveCSS('background-color', 'rgb(250, 152, 65)')
await expect(warningBadge).toHaveCSS('background-color', 'rgb(255, 136, 0)')
await expect(infoBadge).toHaveClass(/tiny-badge--info/)
await expect(infoBadge).toHaveCSS('background-color', 'rgb(37, 43, 58)')
await expect(infoBadge).toHaveCSS('background-color', 'rgb(25, 25, 25)')
})

2
packages/theme/src/badge/vars.less
View File

@ -13,7 +13,7 @@
.component-css-vars-badge() {
--ti-badge-size: var(--ti-common-font-size-2);
--ti-badge-font-size: var(--ti-common-font-size-0);
--ti-badge-line-height: calc(var(--ti-common-font-size-2) - 2px);
--ti-badge-line-height: calc(var(--ti-common-line-height-base) - 4px);
--ti-badge-font-weight: var(--ti-common-font-weight-normal);
--ti-badge-border-radius: var(--ti-common-border-radius-4);
--ti-badge-text-color: var(--ti-base-color-bg-7);

2
packages/vue/src/badge/src/index.ts
View File

@ -47,7 +47,7 @@ export const badgeProps = {
badgeClass: String,
offset: {
type: Array,
default: () => ['0', '-50%']
default: () => [0, 0]
},
data: [String, Number]
}