Skip to content

Commit a3b684d

Browse files
GaoNeng-wWwGaoNeng-wWw
committed
feat(color-picker,color-select-panel): enable-history and enable-predefine control history and predefine function
1 parent 5b6789a commit a3b684d

File tree

23 files changed

+198
-80
lines changed

23 files changed

+198
-80
lines changed

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

Lines changed: 26 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,8 +32,30 @@ 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'
37+
},
38+
mode: ['pc'],
39+
pcDemo: 'predefine'
40+
},
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+
},
52+
{
53+
name: 'enable-predefine-color',
54+
type: 'boolean',
55+
defaultValue: 'false',
56+
desc: {
57+
'zh-CN': '是否启用预定义颜色',
58+
'en-US': 'enable predefined colors or not'
3759
},
3860
mode: ['pc'],
3961
pcDemo: 'predefine'

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

Lines changed: 26 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,8 +32,30 @@ 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'
37+
},
38+
mode: ['pc'],
39+
pcDemo: 'predefine'
40+
},
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+
},
52+
{
53+
name: 'enable-predefine-color',
54+
type: 'boolean',
55+
defaultValue: 'false',
56+
desc: {
57+
'zh-CN': '是否启用预定义颜色',
58+
'en-US': 'enable predefined colors or not'
3759
},
3860
mode: ['pc'],
3961
pcDemo: 'predefine'

‎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>

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

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,27 @@ import { test, expect } from '@playwright/test'
33
test('测试预定义颜色', async ({ page }) => {
44
page.on('pageerror', (exception) => expect(exception).toBeNull())
55
await page.goto('color-picker#predefine')
6-
await page.locator('.tiny-color-picker').click()
7-
await page.waitForSelector('.tiny-collapse-item')
8-
await expect(
9-
page.locator('.tiny-color-select-panel__predefine .tiny-color-select-panel__predefine__color-block:nth-child(8)')
10-
).toBeHidden()
6+
await page.getByRole('button', { name: 'Toggle predefine 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.locator('.tiny-color-select-panel__predefine > div:nth-child(8)')).toBeVisible()
11+
await page.getByText('取消选择预定义颜色Append predefine').click()
12+
await page.getByText('取消选择预定义颜色Append predefine').click()
13+
await page.getByText('取消选择预定义颜色Append predefine').click()
1114
await page.getByRole('button', { name: '选择' }).click()
12-
// 用户行为预定义颜色测试
1315
await page.getByRole('button', { name: 'Append predefine color' }).click()
16+
await page.locator('.tiny-color-picker__inner').click()
17+
await page.getByRole('button', { name: '预定义颜色' }).click()
18+
await expect(page.locator('.tiny-color-select-panel__predefine > div:nth-child(9)')).toBeVisible()
19+
await page.getByRole('button', { name: '选择' }).click()
20+
await page.getByRole('button', { name: 'Pop predefine color' }).click()
1421
await page.locator('.tiny-color-picker').click()
15-
await page.waitForSelector('.tiny-collapse-item')
16-
await expect(
17-
page.locator('.tiny-color-select-panel__predefine .tiny-color-select-panel__predefine__color-block:nth-child(9)')
18-
).toBeHidden()
22+
await page.getByRole('button', { name: '预定义颜色' }).click()
23+
await expect(page.locator('.tiny-color-select-panel__predefine > div:nth-child(9)')).not.toBeVisible()
24+
await expect(page.locator('.tiny-color-select-panel__predefine > div:nth-child(8)')).toBeVisible()
25+
await page.locator('.tiny-color-select-panel__predefine > div:nth-child(8)').click()
26+
await page.getByRole('button', { name: '选择' }).click()
27+
await page.locator('.tiny-color-picker__inner').click()
28+
await page.getByText('取消选择预定义颜色Append predefine').click()
1929
})

‎examples/sites/demos/pc/app/color-picker/predefine.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" :predefine="predefine" />
3+
<tiny-color-picker v-model="color" :predefine="predefine" :enable-predefine-color="enablePredefineColor" />
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

@@ -18,7 +19,8 @@ export default {
1819
data() {
1920
return {
2021
color: '#66ccff',
21-
predefine: new Array(8).fill(0).map(() => this.randomHex())
22+
predefine: new Array(8).fill(0).map(() => this.randomHex()),
23+
enablePredefineColor: false
2224
}
2325
},
2426
methods: {

‎examples/sites/demos/pc/app/color-picker/webdoc/color-picker.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,9 +61,9 @@ export default {
6161
},
6262
desc: {
6363
'zh-CN':
64-
'当<code>history</code>不为<code>undefined</code>时, 将会启用历史记录功能。当用户点击确认时, 将会自动将颜色插入到<code>history</code>. 用户行为会更改历史记录, 外部可以更改历史记录。',
64+
'当<code>enable-history</code>为<code>true</code>时, 将会启用历史记录功能。当用户点击确认时, 将会自动将颜色插入到<code>history</code>用户行为会更改历史记录, 外部可以更改历史记录。',
6565
'en-US':
66-
'When <code>history</code> is not <code>undefined</code>, the history function will be enabled. When the user clicks confirm, the color will automatically be inserted into the <code>history</code> User behavior can change history, and external users can also change history.'
66+
'When <code>enable-history</code> is <code>true</code>, the history function will be enabled. When the user clicks confirm, the color will automatically be inserted into the <code>history</code> User behavior can change history, and external users can also change history.'
6767
},
6868
codeFiles: ['history.vue']
6969
},
@@ -74,9 +74,10 @@ export default {
7474
'en-US': 'Predefine color'
7575
},
7676
desc: {
77-
'zh-CN': '通过<code>predefine</code>预定义颜色值，用户行为不会更改预定义颜色, 但外部可以更改。',
77+
'zh-CN':
78+
'当<code>enable-predefine-color</code>为<code>时</code>启用预定义颜色功能, 通过设置<code>predefine</code>属性来定义预定义颜色值，用户行为不会更改预定义颜色, 但外部可以更改。',
7879
'en-US':
79-
'By<code>predefine</code>predefined color values, user behavior does not change the predefined colors, but they can be changed externally.'
80+
'When<code>enable-predefine-color</code> is <code>true</code>, the predefine function will be enable. By<code>predefine</code>predefined color values, user behavior does not change the predefined colors, but they can be changed externally.'
8081
},
8182
codeFiles: ['predefine.vue']
8283
},

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@
33
<tiny-button @click="changeVisible">Show Color select panel</tiny-button>
44
<tiny-button @click="addHistoryColor">Append history color</tiny-button>
55
<tiny-button @click="popHistoryColor">Pop history color</tiny-button>
6+
<tiny-button @click="enableHistory = !enableHistory">Toggle History visibility</tiny-button>
67
<div style="position: relative">
78
<tiny-color-select-panel
89
v-model="color"
910
:visible="visible"
1011
@confirm="onConfirm"
1112
@cancel="onCancel"
1213
:history="history"
14+
:enable-history="enableHistory"
1315
/>
1416
</div>
1517
</div>
@@ -23,13 +25,14 @@ const color = ref('#66ccff')
2325
const visible = ref(false)
2426
const changeVisible = () => (visible.value = !visible.value)
2527
const hidden = () => (visible.value = false)
28+
const enableHistory = ref(false)
2629
const onConfirm = (msg) => {
2730
hidden()
2831
}
2932
const onCancel = () => {
3033
hidden()
3134
}
32-
const history = ref(['#66ccff'])
35+
const history = ref([])
3336
const randomHex = () =>
3437
'#' +
3538
Math.floor(Math.random() * 0xffffff)

0 commit comments

Comments
 (0)