Skip to content

Commit eb2ce65

Browse files
wuyiping0628wuyiping0628
authored
feat(color-picker): refactoring the ColorPicker component style (#3595)
* feat(color-picker): refactoring the ColorPicker component style * feat(color-picker): refactoring the ColorPicker component style * feat(color-picker): refactoring the ColorPicker component style * feat(color-picker): refactoring the ColorPicker component style * feat(color-picker): color-picker component add e2e * feat(color-select-panel): color-select-panel component add e2e
1 parent 043e6b7 commit eb2ce65

File tree

30 files changed

+668
-184
lines changed

30 files changed

+668
-184
lines changed

‎examples/sites/demos/pc/app/color-picker/alpha-composition-api.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<tiny-color-picker @confirm="onConfirm" @cancel="onCancel" alpha />
2+
<tiny-color-picker @confirm="onConfirm" v-model="color" @cancel="onCancel" alpha />
33
</template>
44

55
<script setup>

‎examples/sites/demos/pc/app/color-picker/alpha.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ test('测试 Alpha', async ({ page }) => {
88
await page.getByRole('button', { name: '取消' }).click()
99
await page.getByText('用户选择了取消').click()
1010
await page.locator('.tiny-color-picker__inner').click()
11-
await page.getByRole('button', { name: '选择' }).click()
11+
await page.getByRole('button', { name: '确定' }).click()
1212
// default is hex
13-
await page.getByText('#804040FF').click()
13+
await page.getByText('#66CCFFFF').click()
1414
})

‎examples/sites/demos/pc/app/color-picker/alpha.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<tiny-color-picker @confirm="onConfirm" @cancel="onCacnel" alpha />
2+
<tiny-color-picker @confirm="onConfirm" v-model="color" @cancel="onCacnel" alpha />
33
</template>
44

55
<script>

‎examples/sites/demos/pc/app/color-picker/base.spec.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ test('基本用法', async ({ page }) => {
55
await page.goto('color-picker#basic-usage')
66
await page.locator('.tiny-color-picker__inner').click()
77
await page.locator('.black').click()
8-
await page.getByRole('button', { name: '选择' }).click()
8+
await page.getByRole('button', { name: '确定' }).click()
99
await page.locator('.tiny-color-picker__inner').click()
1010
await page.locator('.tiny-color-select-panel__inner__color-select').click()
11-
await page.getByRole('button', { name: '选择' }).click()
11+
await page.getByRole('button', { name: '确定' }).click()
1212
})

‎examples/sites/demos/pc/app/color-picker/default-visible.spec.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@ test('默认显示色盘', async ({ page }) => {
44
page.on('pageerror', (exception) => expect(exception).toBeNull())
55
await page.goto('color-picker#default-visible')
66
await page.locator('.tiny-color-select-panel__inner__hue-select').click()
7-
await page.getByRole('button', { name: '选择' }).click()
7+
await page.getByRole('button', { name: '确定' }).click()
88
})

‎examples/sites/demos/pc/app/color-picker/event-composition-api.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<tiny-color-picker @confirm="onConfirm" @cancel="onCancel" />
2+
<tiny-color-picker v-model="color" @confirm="onConfirm" @cancel="onCancel" />
33
</template>
44

55
<script setup>
@@ -15,7 +15,7 @@ const onConfirm = (hex) => {
1515
TinyNotify({
1616
type: 'success',
1717
position: 'top-right',
18-
title: '用户点击了选择',
18+
title: '用户点击了确定',
1919
message: hex
2020
})
2121
}

‎examples/sites/demos/pc/app/color-picker/event.spec.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
33
test('事件触发', async ({ page }) => {
44
page.on('pageerror', (exception) => expect(exception).toBeNull())
55
await page.goto('color-picker#event')
6-
await page.locator('#event').getByRole('img').click()
7-
await page.getByRole('button', { name: '选择' }).click()
8-
await page.locator('#event').getByRole('img').first().click()
9-
await page.getByRole('button', { name: '取消' }).click()
6+
await page.locator('.tiny-color-picker__inner').click()
7+
await page.locator('.black').click()
8+
await page.getByRole('button', { name: '确定' }).click()
9+
await page.getByText('用户点击了确定').click()
1010
})

‎examples/sites/demos/pc/app/color-picker/event.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<tiny-color-picker @confirm="onConfirm" @cancel="onCacnel" />
2+
<tiny-color-picker v-model="color" @confirm="onConfirm" @cancel="onCacnel" />
33
</template>
44

55
<script>

‎examples/sites/demos/pc/app/color-picker/format.spec.ts

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,28 +12,28 @@ test('hex 时应该为#xxx', async ({ page }) => {
1212
page.on('pageerror', (exception) => expect(exception).toBeNull())
1313
await page.goto('color-picker#format')
1414
await page.locator('.tiny-color-picker__inner').click()
15-
await page.getByRole('textbox', { name: '请选择' }).click()
15+
await page.locator('.tiny-input__suffix-inner svg').click()
1616
await page.getByRole('list').getByText('hex').click()
17-
await page.getByRole('button', { name: '选择' }).click()
17+
await page.getByRole('button', { name: '确定' }).click()
1818
await expect(page.getByLabel('示例', { exact: true }).getByRole('paragraph')).toContainText('颜色值：#66CCFF')
1919
})
2020

2121
test('hsl 时应该为 hsl(xxx,xxx,xxx)', async ({ page }) => {
2222
page.on('pageerror', (exception) => expect(exception).toBeNull())
2323
await page.goto('color-picker#format')
2424
await page.locator('.tiny-color-picker__inner').click()
25-
await page.getByRole('textbox', { name: '请选择' }).click()
25+
await page.locator('.tiny-input__suffix-inner svg').click()
2626
await page.getByRole('list').getByText('hsl').click()
27-
await page.getByRole('button', { name: '选择' }).click()
27+
await page.getByRole('button', { name: '确定' }).click()
2828
await expect(page.getByLabel('示例', { exact: true }).getByRole('paragraph')).toContainText('颜色值：hsl')
2929
})
3030

3131
test('hsv 时候应该为 hsv(xx,xx,xx)', async ({ page }) => {
3232
page.on('pageerror', (exception) => expect(exception).toBeNull())
3333
await page.goto('color-picker#format')
3434
await page.locator('.tiny-color-picker__inner').click()
35-
await page.getByRole('textbox', { name: '请选择' }).click()
35+
await page.locator('.tiny-input__suffix-inner svg').click()
3636
await page.getByRole('list').getByText('hsv').click()
37-
await page.getByRole('button', { name: '选择' }).click()
37+
await page.getByRole('button', { name: '确定' }).click()
3838
await expect(page.getByLabel('示例', { exact: true }).getByRole('paragraph')).toContainText('颜色值：hsv')
3939
})

‎examples/sites/demos/pc/app/color-picker/history.spec.ts

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,5 @@ test('测试历史记录', async ({ page }) => {
55
await page.goto('color-picker#history')
66
await page.getByRole('button', { name: 'Toggle History visibility' }).click()
77
await page.locator('.tiny-color-picker__inner').click()
8-
await expect(page.getByRole('button', { name: '历史记录' })).toBeVisible()
9-
await page.getByRole('button', { name: '历史记录' }).click()
10-
await expect(page.getByText('暂无', { exact: true })).toBeVisible()
11-
await page.getByRole('button', { name: '选择' }).click()
12-
await page.getByRole('button', { name: 'Append history color' }).click()
13-
await page.locator('.tiny-color-picker__inner').click()
14-
await page.getByRole('button', { name: '历史记录' }).click()
8+
await page.getByRole('button', { name: '确定' }).click()
159
})

0 commit comments

Comments
 (0)