Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added slots to allow custom rendering panels #3428

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Added slots to allow custom rendering panels #3428

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6d50d5c
feat(color-picker): Implement a feature to create a custom rendering …
Jan 21, 2025
aa5a248
test(color-picker): Execute npm run test to pass the test cases
Jan 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions packages/web-vue/components/color-picker/README.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ description: Used for select and display colors.
@import ./__demo__/trigger.md
@import ./__demo__/trigger-element.md
@import ./__demo__/only-panel.md
@import ./__demo__/custom-panel.md

## API

Expand All @@ -31,6 +32,8 @@ description: Used for select and display colors.
|show-text|Show color value|`boolean`|`false`|
|show-history|Show history colors|`boolean`|`false`|
|show-preset|Show preset colors|`boolean`|`false`|
|show-palette|show palette|`boolean`|`true`|
|show-controls|show control bar|`boolean`|`true`|
|disabled|disabled|`boolean`|`false`|
|disabled-alpha|Disable transparency channel|`boolean`|`false`|
|hide-trigger|There is no trigger element, only the color panel is displayed|`boolean`|`false`|
Expand All @@ -43,5 +46,14 @@ description: Used for select and display colors.
|---|---|---|
|change|Triggered when the color value changes|value: `string`|
|popup-visible-change|Triggered when the color panel is expanded and collapsed|visible: `boolean`<br>value: `string`|
### `<color-picker>` Slots

|Slot Name|Description|Parameters|
|---|---|---|
|preset-title|Preset Colors Title|-|
|history-title|History Colors Title|-|
|color-section|Color Selection Area|colorSection: `() => JSX.Element`|
|controls|Control Bar Area|controls: `() => JSX.Element`|
|palette|Palette Area|palette: `() => JSX.Element`|


12 changes: 12 additions & 0 deletions packages/web-vue/components/color-picker/README.zh-CN.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ description: 用于选择和展示颜色
@import ./__demo__/trigger.md
@import ./__demo__/trigger-element.md
@import ./__demo__/only-panel.md
@import ./__demo__/custom-panel.md

## API

Expand All @@ -29,6 +30,8 @@ description: 用于选择和展示颜色
|show-text|显示颜色值|`boolean`|`false`|
|show-history|显示历史颜色|`boolean`|`false`|
|show-preset|显示预设颜色|`boolean`|`false`|
|show-palette|显示调色板|`boolean`|`true`|
|show-controls|显示控制条|`boolean`|`true`|
|disabled|禁用|`boolean`|`false`|
|disabled-alpha|禁用透明通道|`boolean`|`false`|
|hide-trigger|没有触发元素，只显示颜色面板|`boolean`|`false`|
Expand All @@ -41,5 +44,14 @@ description: 用于选择和展示颜色
|---|---|---|
|change|颜色值改变时触发|value: `string`|
|popup-visible-change|颜色面板展开和收起时触发|visible: `boolean`<br>value: `string`|
### `<color-picker>` Slots

|插槽名|描述|参数|
|---|:---:|---|
|preset-title|预设颜色标题|-|
|history-title|历史颜色标题|-|
|color-section|颜色选择区域|colorSection: `() => JSX.Element`|
|controls|控制条区域|controls: `() => JSX.Element`|
|palette|调色板区域|palette: `() => JSX.Element`|


1 change: 1 addition & 0 deletions packages/web-vue/components/color-picker/TEMPLATE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ description: Used for select and display colors.
@import ./__demo__/trigger.md
@import ./__demo__/trigger-element.md
@import ./__demo__/only-panel.md
@import ./__demo__/custom-panel.md

## API

Expand Down
82 changes: 82 additions & 0 deletions packages/web-vue/components/color-picker/__demo__/custom-panel.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
```yaml
title:
zh-CN: 自定义面板
en-US: Custom Panel
```

## zh-CN

通过插槽自由控制面板的渲染。

---

## en-US

Control the rendering of the panel freely through slots.

---

```vue
<template>
<a-space :size="32" direction="vertical">
<a-color-picker
defaultValue="#12D2AC"
showPreset
showHistory
hideTrigger
>
<template #palette="{ palette }">
<div class="custom-header">自定义调色板</div>
<component :is="palette" />
</template>

<template #controls="{ controls }">
<div class="custom-header">自定义控制条</div>
<component :is="controls" />
</template>

<template #color-section="{ colorSection }">
<div class="custom-header">自定义颜色区域</div>
<component :is="colorSection" />
</template>

<template #history-title>
<div class="custom-title">
<icon-history /> 最近使用
</div>
</template>

<template #preset-title>
<div class="custom-title">
<icon-palette /> 预设颜色
</div>
</template>
</a-color-picker>

<a-color-picker
defaultValue="#12D2AC"
showPreset
:showPalette="false"
:showControls="false"
>
<template #preset-title>
</template>
</a-color-picker>
</a-space>
</template>

<style scoped>
.custom-header {
margin-bottom: 8px;
color: var(--color-text-1);
font-weight: 500;
}

.custom-title {
display: flex;
align-items: center;
gap: 4px;
color: var(--color-text-2);
}
</style>
```
136 changes: 136 additions & 0 deletions packages/web-vue/components/color-picker/__test__/__snapshots__/demo.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,142 @@ exports[`<color-picker> demo: render [colors] correctly 1`] = `
<!---->"
`;

exports[`<color-picker> demo: render [custom-panel] correctly 1`] = `
"<div class=\\"arco-space arco-space-vertical\\">
<!---->
<div class=\\"arco-space-item\\" style=\\"margin-bottom: 32px;\\">
<div class=\\"arco-color-picker-panel\\">
<div class=\\"custom-header\\">自定义调色板</div>
<div class=\\"arco-color-picker-palette\\" style=\\"background-color: rgb(0, 255, 205);\\">
<div class=\\"arco-color-picker-handler\\" style=\\"top: 17.647058823529417%; left: 91.42857142857143%;\\"></div>
</div>
<div class=\\"custom-header\\">自定义控制条</div>
<div class=\\"arco-color-picker-panel-control\\">
<div class=\\"arco-color-picker-control-wrapper\\">
<div>
<div class=\\"arco-color-picker-control-bar arco-color-picker-control-bar-hue\\">
<div class=\\"arco-color-picker-handler\\" style=\\"left: 46.70138888888889%; color: rgb(18, 210, 172);\\"></div>
</div>
<div class=\\"arco-color-picker-control-bar-bg\\">
<div class=\\"arco-color-picker-control-bar arco-color-picker-control-bar-alpha\\">
<div class=\\"arco-color-picker-handler\\" style=\\"left: 100%; color: rgb(18, 210, 172);\\"></div>
</div>
</div>
</div>
<div class=\\"arco-color-picker-preview\\" style=\\"background-color: rgb(18, 210, 172);\\"></div>
</div>
<div class=\\"arco-color-picker-input-wrapper\\"><span class=\\"arco-select-view-single arco-select arco-color-picker-select arco-select-view arco-select-view-size-mini\\" title=\\"Hex\\"><!----><input class=\\"arco-select-view-input arco-select-view-input-hidden\\" readonly=\\"\\"><span class=\\"arco-select-view-value\\">Hex</span><span class=\\"arco-select-view-suffix\\"><!----><span class=\\"arco-select-view-icon\\"><svg viewBox=\\"0 0 48 48\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"currentColor\\" class=\\"arco-icon arco-icon-down arco-select-view-arrow-icon\\" stroke-width=\\"4\\" stroke-linecap=\\"butt\\" stroke-linejoin=\\"miter\\"><path d=\\"M39.6 17.443 24.043 33 8.487 17.443\\"></path></svg></span>
<!----></span></span>
<!---->
<div class=\\"arco-color-picker-group-wrapper\\">
<div class=\\"arco-input-group arco-color-picker-input-group\\"><span class=\\"arco-input-wrapper arco-color-picker-input-hex\\"><span class=\\"arco-input-prefix\\">#</span><input class=\\"arco-input arco-input-size-mini\\" type=\\"text\\">
<!---->
<!----></span><span class=\\"arco-input-wrapper arco-input-number arco-input-number-mode-embed arco-input-number-size-mini arco-color-picker-input-alpha\\"><!----><input class=\\"arco-input arco-input-size-mini\\" type=\\"text\\" role=\\"spinbutton\\" aria-valuemax=\\"100\\" aria-valuemin=\\"0\\" aria-valuenow=\\"100\\"><!----><span class=\\"arco-input-suffix\\"><!----><div class=\\"arco-input-number-suffix\\">%</div><div class=\\"arco-input-number-step\\"><button class=\\"arco-input-number-step-button arco-input-number-step-button-disabled\\" type=\\"button\\" tabindex=\\"-1\\" disabled=\\"\\"><svg viewBox=\\"0 0 48 48\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"currentColor\\" class=\\"arco-icon arco-icon-up\\" stroke-width=\\"4\\" stroke-linecap=\\"butt\\" stroke-linejoin=\\"miter\\"><path d=\\"M39.6 30.557 24.043 15 8.487 30.557\\"></path></svg></button><button class=\\"arco-input-number-step-button\\" type=\\"button\\" tabindex=\\"-1\\"><svg viewBox=\\"0 0 48 48\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"currentColor\\" class=\\"arco-icon arco-icon-down\\" stroke-width=\\"4\\" stroke-linecap=\\"butt\\" stroke-linejoin=\\"miter\\"><path d=\\"M39.6 17.443 24.043 33 8.487 17.443\\"></path></svg></button></div><!----></span></span>
</div>
</div>
</div>
</div>
<div class=\\"custom-header\\">自定义颜色区域</div>
<div class=\\"arco-color-picker-panel-colors\\">
<div class=\\"arco-color-picker-colors-section\\">
<div class=\\"custom-title\\"><svg viewBox=\\"0 0 48 48\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"currentColor\\" class=\\"arco-icon arco-icon-history\\" stroke-width=\\"4\\" stroke-linecap=\\"butt\\" stroke-linejoin=\\"miter\\">
<path d=\\"M6 24c0-9.941 8.059-18 18-18s18 8.059 18 18-8.059 18-18 18c-6.26 0-11.775-3.197-15-8.047M6 24l-.5-.757h1L6 24Zm26 2h-9v-9\\"></path>
</svg> 最近使用 </div>
<div class=\\"arco-color-picker-colors-wrapper\\"><span class=\\"arco-color-picker-colors-empty\\">暂无</span></div>
</div>
<div class=\\"arco-color-picker-colors-section\\">
<div class=\\"custom-title\\"><svg viewBox=\\"0 0 48 48\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" stroke=\\"currentColor\\" class=\\"arco-icon arco-icon-palette\\" stroke-width=\\"4\\" stroke-linecap=\\"butt\\" stroke-linejoin=\\"miter\\">
<path d=\\"M31.813 12.02C29.73 10.459 27.013 10 24 10c-9.78 0-17.708 6.987-17.708 15.042 0 8.054 8.97 14.583 18.75 14.583 5.277 0 2.485-5.318 5.73-8.333 2.767-2.574 10.937-1.563 10.937-6.25 0-2.792-.521-5.209-2.605-7.617\\"></path>
<path d=\\"M25.042 25.563 42.23 8.375\\"></path>
<circle cx=\\"22.5\\" cy=\\"17.5\\" r=\\"2.5\\" fill=\\"currentColor\\" stroke=\\"none\\"></circle>
<circle cx=\\"15.5\\" cy=\\"20.5\\" r=\\"2.5\\" fill=\\"currentColor\\" stroke=\\"none\\"></circle>
<circle cx=\\"14.5\\" cy=\\"28.5\\" r=\\"2.5\\" fill=\\"currentColor\\" stroke=\\"none\\"></circle>
</svg> 预设颜色 </div>
<div class=\\"arco-color-picker-colors-wrapper\\">
<div class=\\"arco-color-picker-colors-list\\">
<div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(0, 180, 42);\\">
<div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(0, 180, 42);\\"></div>
</div>
<div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(60, 126, 255);\\">
<div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(60, 126, 255);\\"></div>
</div>
<div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(255, 125, 0);\\">
<div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(255, 125, 0);\\"></div>
</div>
<div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(247, 105, 101);\\">
<div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(247, 105, 101);\\"></div>
</div>
<div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(247, 186, 30);\\">
<div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(247, 186, 30);\\"></div>
</div>
<div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(245, 49, 157);\\">
<div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(245, 49, 157);\\"></div>
</div>
<div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(217, 26, 217);\\">
<div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(217, 26, 217);\\"></div>
</div>
<div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(159, 219, 29);\\">
<div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(159, 219, 29);\\"></div>
</div>
<div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(250, 220, 25);\\">
<div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(250, 220, 25);\\"></div>
</div>
<div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(114, 46, 209);\\">
<div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(114, 46, 209);\\"></div>
</div>
<div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(52, 145, 250);\\">
<div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(52, 145, 250);\\"></div>
</div>
<div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(123, 225, 136);\\">
<div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(123, 225, 136);\\"></div>
</div>
<div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(147, 190, 255);\\">
<div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(147, 190, 255);\\"></div>
</div>
<div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(255, 207, 139);\\">
<div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(255, 207, 139);\\"></div>
</div>
<div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(251, 176, 167);\\">
<div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(251, 176, 167);\\"></div>
</div>
<div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(252, 233, 150);\\">
<div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(252, 233, 150);\\"></div>
</div>
<div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(251, 157, 199);\\">
<div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(251, 157, 199);\\"></div>
</div>
<div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(240, 142, 230);\\">
<div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(240, 142, 230);\\"></div>
</div>
<div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(220, 241, 144);\\">
<div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(220, 241, 144);\\"></div>
</div>
<div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(253, 250, 148);\\">
<div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(253, 250, 148);\\"></div>
</div>
<div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(195, 150, 237);\\">
<div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(195, 150, 237);\\"></div>
</div>
<div class=\\"arco-color-picker-color-block\\" style=\\"background-color: rgb(159, 212, 253);\\">
<div class=\\"arco-color-picker-block\\" style=\\"background-color: rgb(159, 212, 253);\\"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!---->
<div class=\\"arco-space-item\\">
<div class=\\"arco-color-picker arco-color-picker-size-medium\\">
<div class=\\"arco-color-picker-preview\\" style=\\"background-color: rgb(18, 210, 172);\\"></div>
<!----><input class=\\"arco-color-picker-input\\">
</div>
<!---->
</div>
</div>"
`;

exports[`<color-picker> demo: render [disabled] correctly 1`] = `
"<div class=\\"arco-space arco-space-horizontal arco-space-align-center\\">
<!---->
Expand Down
47 changes: 47 additions & 0 deletions packages/web-vue/components/color-picker/color-picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,22 @@ export default defineComponent({
type: Boolean,
default: false,
},
/**
* @zh 显示调色板
* @en show palette
*/
showPalette: {
type: Boolean,
default: true,
},
/**
* @zh 显示控制条
* @en show control bar
*/
showControls: {
type: Boolean,
default: true,
},
/**
* @zh 禁用
* @en disabled
Expand Down Expand Up @@ -130,6 +146,34 @@ export default defineComponent({
*/
'popup-visible-change': (visible: boolean, value: string) => true,
},
/**
* @zh 调色板区域
* @en Palette Area
* @slot palette
* @binding {() => JSX.Element} palette
*/
/**
* @zh 控制条区域
* @en Control Bar Area
* @slot controls
* @binding {() => JSX.Element} controls
*/
/**
* @zh 颜色选择区域
* @en Color Selection Area
* @slot color-section
* @binding {() => JSX.Element} colorSection
*/
/**
* @zh 历史颜色标题
* @en History Colors Title
* @slot history-title
*/
/**
* @zh 预设颜色标题
* @en Preset Colors Title
* @slot preset-title
*/
setup(props, { emit, slots }) {
const prefixCls = getPrefixCls('color-picker');
const mergeValue = computed(() => {
Expand Down Expand Up @@ -243,6 +287,9 @@ export default defineComponent({
disabled={props.disabled}
disabledAlpha={props.disabledAlpha}
format={props.format}
showPalette={props.showPalette}
showControls={props.showControls}
v-slots={slots}
onHsvChange={onHsvChange}
onAlphaChange={onAlphaChange}
/>
Expand Down
Loading