Skip to content

Commit 40eae67

Browse files
GaoNeng-wWwGaoNeng-wWw
authored
feat(color-picker, color-select-panel): [color-picker,color-select-panel] format (#2536)
* refactor: remove color utils * fix(color-picker): onCancel will not reset color * fix(color-picker): drop .black click * fix(color-select-panel): dynamic history and predefine color stack * feat(color-picker, color-select-panel): format props * docs(color-picker, color-select-panel): composition api * fix(color-select-panel): undefined length if predefine color is empty * docs(color-picker): format composition docs * refactor(color-picker): use rgba background * test(color-picker, color-select-panel): format e2e test * feat(color-select-panel): color format select * docs: format docs * feat(color-picker,color-select-panel): `enable-history` and `enable-predefine` control history and predefine function * docs: stable 3.19.0
1 parent d3fcc60 commit 40eae67

36 files changed

+1104
-206
lines changed

‎examples/sites/demos/apis/color-picker.js‎

Lines changed: 47 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ export default {
2121
type: 'string[] | undefined',
2222
defaultValue: 'undefined',
2323
desc: {
24-
'zh-CN': '启用历史记录',
25-
'en-US': 'enable history or not'
24+
'zh-CN': '历史记录默认值',
25+
'en-US': 'Default values for historical records'
2626
},
2727
mode: ['pc'],
2828
pcDemo: 'history'
@@ -32,12 +32,40 @@ export default {
3232
type: 'string[] | undefined',
3333
defaultValue: 'undefined',
3434
desc: {
35-
'zh-CN': '启用预定义颜色',
36-
'en-US': 'enable predefine or not'
35+
'zh-CN': '预定义颜色色值',
36+
'en-US': 'predefine color values'
3737
},
3838
mode: ['pc'],
3939
pcDemo: 'predefine'
4040
},
41+
{
42+
name: 'enable-history',
43+
type: 'boolean',
44+
defaultValue: 'false',
45+
desc: {
46+
'zh-CN': '是否启用预定义颜色',
47+
'en-US': 'enable history or not'
48+
},
49+
mode: ['pc'],
50+
pcDemo: 'history',
51+
meta: {
52+
stable: '3.19.0'
53+
}
54+
},
55+
{
56+
name: 'enable-predefine-color',
57+
type: 'boolean',
58+
defaultValue: 'false',
59+
desc: {
60+
'zh-CN': '是否启用预定义颜色',
61+
'en-US': 'enable predefined colors or not'
62+
},
63+
mode: ['pc'],
64+
pcDemo: 'predefine',
65+
meta: {
66+
stable: '3.19.0'
67+
}
68+
},
4169
{
4270
name: 'size',
4371
type: 'string',
@@ -60,6 +88,21 @@ export default {
6088
},
6189
mode: ['pc'],
6290
pcDemo: 'default-visible'
91+
},
92+
{
93+
name: 'format',
94+
type: "('hex'|'rgb'|'hsl'|'hsv')[]",
95+
defaultValue: '[]',
96+
desc: {
97+
'zh-CN': '点击确认后, confirm的事件将会返回对应的format数值. 如果为空数组则表示禁用颜色格式下拉选择',
98+
'en-US':
99+
'After clicking confirm, the confirm event will return the corresponding format value If it is an empty array, it means that the color format dropdown selection is disabled'
100+
},
101+
mode: ['pc'],
102+
pcDemo: 'format',
103+
meta: {
104+
stable: '3.19.0'
105+
}
63106
}
64107
],
65108
events: [

‎examples/sites/demos/apis/color-select-panel.js‎

Lines changed: 47 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@ export default {
2121
type: 'string[] | undefined',
2222
defaultValue: 'undefined',
2323
desc: {
24-
'zh-CN': '时候启用历史记录',
25-
'en-US': 'enable history or not'
24+
'zh-CN': '历史记录默认值',
25+
'en-US': 'Default values for historical records'
2626
},
2727
mode: ['pc'],
2828
pcDemo: 'history'
@@ -32,12 +32,40 @@ export default {
3232
type: 'string[] | undefined',
3333
defaultValue: 'undefined',
3434
desc: {
35-
'zh-CN': '时候启用历史记录',
36-
'en-US': 'enable predefine or not'
35+
'zh-CN': '预定义颜色色值',
36+
'en-US': 'predefine color values'
3737
},
3838
mode: ['pc'],
3939
pcDemo: 'predefine'
4040
},
41+
{
42+
name: 'enable-history',
43+
type: 'boolean',
44+
defaultValue: 'false',
45+
desc: {
46+
'zh-CN': '是否启用预定义颜色',
47+
'en-US': 'enable history or not'
48+
},
49+
mode: ['pc'],
50+
pcDemo: 'history',
51+
meta: {
52+
stable: '3.19.0'
53+
}
54+
},
55+
{
56+
name: 'enable-predefine-color',
57+
type: 'boolean',
58+
defaultValue: 'false',
59+
desc: {
60+
'zh-CN': '是否启用预定义颜色',
61+
'en-US': 'enable predefined colors or not'
62+
},
63+
mode: ['pc'],
64+
pcDemo: 'predefine',
65+
meta: {
66+
stable: '3.19.0'
67+
}
68+
},
4169
{
4270
name: 'visible',
4371
type: 'boolean',
@@ -47,6 +75,21 @@ export default {
4775
'en-US': 'Is color select panel displayed by default'
4876
},
4977
mode: ['pc']
78+
},
79+
{
80+
name: 'format',
81+
type: "('hex'|'rgb'|'hsl'|'hsv')[]",
82+
defaultValue: '[]',
83+
desc: {
84+
'zh-CN': '点击确认后, confirm的事件将会返回对应的format数值. 如果为空数组则表示禁用颜色格式下拉选择',
85+
'en-US':
86+
'After clicking confirm, the confirm event will return the corresponding format value If it is an empty array, it means that the color format dropdown selection is disabled'
87+
},
88+
mode: ['pc'],
89+
pcDemo: 'format',
90+
meta: {
91+
stable: '3.19.0'
92+
}
5093
}
5194
],
5295
events: [

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

Lines changed: 1 addition & 1 deletion
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.locator('.black').click()
1211
await page.getByRole('button', { name: '选择' }).click()
12+
// default is hex
1313
await page.getByText('#804040FF').click()
1414
})

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<template>
2+
<div>
3+
<div style="position: relative">
4+
<p>颜色值: {{ color }}</p>
5+
<tiny-color-picker v-model="color" :visible="visible" @confirm="onConfirm" @cancel="onCancel" :format="options" />
6+
</div>
7+
</div>
8+
</template>
9+
10+
<script setup lang="ts">
11+
import { TinyColorPicker } from '@opentiny/vue'
12+
import { ref } from 'vue'
13+
14+
const color = ref('rgb(102,204,255)')
15+
const visible = ref(false)
16+
const options = ref(['rgb', 'hex', 'hsv', 'hsl'])
17+
18+
const hidden = () => {
19+
visible.value = false
20+
}
21+
const onConfirm = () => {
22+
hidden()
23+
}
24+
const onCancel = () => {
25+
hidden()
26+
}
27+
</script>

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { test, expect } from '@playwright/test'
2+
3+
test('rgb时应该为rgb(xx,xx,xx)', async ({ page }) => {
4+
page.on('pageerror', (exception) => expect(exception).toBeNull())
5+
await page.goto('color-picker#format')
6+
await expect(page.getByLabel('示例', { exact: true }).getByRole('paragraph')).toContainText(
7+
'颜色值: rgb(102,204,255)'
8+
)
9+
})
10+
11+
test('hex时应该为#xxx', async ({ page }) => {
12+
page.on('pageerror', (exception) => expect(exception).toBeNull())
13+
await page.goto('color-picker#format')
14+
await page.locator('.tiny-color-picker__inner').click()
15+
await page.getByRole('textbox', { name: '请选择' }).click()
16+
await page.getByRole('list').getByText('hex').click()
17+
await page.getByRole('button', { name: '选择' }).click()
18+
await expect(page.getByLabel('示例', { exact: true }).getByRole('paragraph')).toContainText('颜色值: #66CCFF')
19+
})
20+
21+
test('hsl时应该为hsl(xxx,xxx,xxx)', async ({ page }) => {
22+
page.on('pageerror', (exception) => expect(exception).toBeNull())
23+
await page.goto('color-picker#format')
24+
await page.locator('.tiny-color-picker__inner').click()
25+
await page.getByRole('textbox', { name: '请选择' }).click()
26+
await page.getByRole('list').getByText('hsl').click()
27+
await page.getByRole('button', { name: '选择' }).click()
28+
await expect(page.getByLabel('示例', { exact: true }).getByRole('paragraph')).toContainText('颜色值: hsl')
29+
})
30+
31+
test('hsv时候应该为hsv(xx,xx,xx)', async ({ page }) => {
32+
page.on('pageerror', (exception) => expect(exception).toBeNull())
33+
await page.goto('color-picker#format')
34+
await page.locator('.tiny-color-picker__inner').click()
35+
await page.getByRole('textbox', { name: '请选择' }).click()
36+
await page.getByRole('list').getByText('hsv').click()
37+
await page.getByRole('button', { name: '选择' }).click()
38+
await expect(page.getByLabel('示例', { exact: true }).getByRole('paragraph')).toContainText('颜色值: hsv')
39+
})

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<template>
2+
<div>
3+
<div style="position: relative">
4+
<p>颜色值: {{ color }}</p>
5+
<tiny-color-picker
6+
v-model="color"
7+
:visible="visible"
8+
@confirm="onConfirm"
9+
@cancel="onCancel"
10+
:predefine="predefine"
11+
:format="options"
12+
/>
13+
</div>
14+
</div>
15+
</template>
16+
17+
<script>
18+
import { TinyColorPicker } from '@opentiny/vue'
19+
20+
export default {
21+
components: {
22+
TinyColorPicker
23+
},
24+
data() {
25+
return {
26+
color: 'rgb(102,204,255)',
27+
visible: false,
28+
predefine: new Array(8).fill(0).map(() => this.randomHex()),
29+
options: ['rgb', 'hex', 'hsl', 'hsv']
30+
}
31+
},
32+
methods: {
33+
changeVisible() {
34+
this.visible = !this.visible
35+
},
36+
hidden() {
37+
this.visible = false
38+
},
39+
onConfirm() {
40+
this.hidden()
41+
},
42+
onCancel() {
43+
this.hidden()
44+
},
45+
randomHex() {
46+
return (
47+
'#' +
48+
Math.floor(Math.random() * 0xffffff)
49+
.toString(16)
50+
.padEnd(6, '0')
51+
)
52+
},
53+
addPredefineColor() {
54+
this.predefine.push(this.randomHex())
55+
},
56+
popPredefineColor() {
57+
this.predefine.pop()
58+
}
59+
}
60+
}
61+
</script>

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<template>
22
<div>
3-
<tiny-color-picker v-model="color" :history="history" />
3+
<tiny-color-picker v-model="color" :history="history" :enable-history="enableHistory" />
44
<br />
55
<tiny-button @click="addHistoryColor">Append history color</tiny-button>
66
<tiny-button @click="popHistoryColor">Pop history color</tiny-button>
7+
<tiny-button @click="enableHistory = !enableHistory">Toggle History visibility</tiny-button>
78
</div>
89
</template>
910

@@ -12,7 +13,7 @@ import { ref } from 'vue'
1213
import { TinyColorPicker, TinyButton } from '@opentiny/vue'
1314
1415
const color = ref('#66ccff')
15-
const history = ref(['#66ccff'])
16+
const history = ref([])
1617
const randomHex = () =>
1718
'#' +
1819
Math.floor(Math.random() * 0xffffff)
@@ -24,4 +25,5 @@ const addHistoryColor = () => {
2425
const popHistoryColor = () => {
2526
history.value.pop()
2627
}
28+
const enableHistory = ref(false)
2729
</script>

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

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,27 +3,13 @@ import { test, expect } from '@playwright/test'
33
test('测试历史记录', async ({ page }) => {
44
page.on('pageerror', (exception) => expect(exception).toBeNull())
55
await page.goto('color-picker#history')
6-
await page.locator('.tiny-color-picker').click()
7-
await page.waitForSelector('.tiny-collapse-item')
8-
await expect(page.locator('.tiny-color-select-panel__history')).toHaveCount(1)
6+
await page.getByRole('button', { name: 'Toggle History visibility' }).click()
7+
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()
911
await page.getByRole('button', { name: '选择' }).click()
10-
// 用户行为更改历史记录测试
1112
await page.getByRole('button', { name: 'Append history color' }).click()
12-
await page.locator('.tiny-color-picker').click()
13-
await page.waitForSelector('.tiny-collapse-item')
14-
await expect(
15-
page.locator('.tiny-color-select-panel__history .tiny-color-select-panel__history__color-block:nth-child(2)')
16-
).toBeHidden()
17-
// 点击色块中心，并点击选择，历史记录增加1的测试
18-
const black = page.locator('.black')
19-
const center = await black.boundingBox()
20-
const x = center?.x ?? 0 + (center?.width ?? 0) / 2
21-
const y = center?.y ?? 0 + (center?.height ?? 0) / 2
22-
await black.click(x, y)
23-
await page.getByRole('button', { name: '选择' }).click()
24-
await page.locator('.tiny-color-picker').click()
25-
await page.waitForSelector('.tiny-collapse-item')
26-
await expect(
27-
page.locator('.tiny-color-select-panel__history .tiny-color-select-panel__history__color-block:nth-child(3)')
28-
).toBeHidden()
13+
await page.locator('.tiny-color-picker__inner').click()
14+
await page.getByRole('button', { name: '历史记录' }).click()
2915
})

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<template>
22
<div>
3-
<tiny-color-picker v-model="color" :history="history" />
3+
<tiny-color-picker v-model="color" :history="history" :enable-history="enableHistory" />
44
<br />
55
<tiny-button @click="addHistoryColor">Append history color</tiny-button>
66
<tiny-button @click="popHistoryColor">Pop history color</tiny-button>
7+
<tiny-button @click="enableHistory = !enableHistory">Toggle History visibility</tiny-button>
78
</div>
89
</template>
910

@@ -18,7 +19,8 @@ export default {
1819
data() {
1920
return {
2021
color: '#66ccff',
21-
history: []
22+
history: [],
23+
enableHistory: false
2224
}
2325
},
2426
methods: {

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<template>
22
<div>
3-
<tiny-color-picker v-model="color" :predefine="predefine" />
3+
<tiny-color-picker v-model="color" :enable-predefine-color="enablePredefineColor" :predefine="predefine" />
44
<br />
55
<tiny-button @click="addPredefineColor">Append predefine color</tiny-button>
66
<tiny-button @click="popPredefineColor">Pop predefine color</tiny-button>
7+
<tiny-button @click="enablePredefineColor = !enablePredefineColor">Toggle predefine visibility</tiny-button>
78
</div>
89
</template>
910

@@ -24,4 +25,5 @@ const addPredefineColor = () => {
2425
const popPredefineColor = () => {
2526
predefine.value.pop()
2627
}
28+
const enablePredefineColor = ref(false)
2729
</script>

0 commit comments

Comments
 (0)