yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MultipleColorPicker: Tab behaviour and new line on enter

Browse Source
This commit is contained in:
Lone Iversen
2024-09-17 13:18:58 +02:00
committed by Jacob Overgaard
parent ce77c42eff
commit fa28ed3d8e
2 changed files with 23 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-input.element.ts
View File

@@ -175,7 +175,7 @@ export class UmbMultipleColorPickerInputElement extends UUIFormControlMixin(UmbL
<div id="sorter-wrapper">
${repeat(
this._items,
(item) => item.value,
(item, index) => index,
(item, index) => html`
<umb-multiple-color-picker-item-input
label=${item.label}
@@ -185,6 +185,7 @@ export class UmbMultipleColorPickerInputElement extends UUIFormControlMixin(UmbL
?disabled=${this.disabled}
?readonly=${this.readonly}
?showLabels=${this.showLabels}
@enter=${this.#onAdd}
@change=${(event: UmbChangeEvent) => this.#onChange(event, index)}
@delete=${(event: UmbDeleteEvent) => this.#deleteItem(event, index)}>
</umb-multiple-color-picker-item-input>

21
src/Umbraco.Web.UI.Client/src/packages/core/components/multiple-color-picker-input/multiple-color-picker-item-input.element.ts
View File

@@ -84,12 +84,25 @@ export class UmbMultipleColorPickerItemInputElement extends UUIFormControlMixin(
this.dispatchEvent(new UmbInputEvent());
}
#onLabelKeydown(event: KeyboardEvent) {
event.stopPropagation();
const target = event.currentTarget as UUIInputElement;
if (event.key === 'Enter' && target.value) {
this.dispatchEvent(new CustomEvent('enter'));
}
}
#onLabelChange(event: UUIInputEvent) {
event.stopPropagation();
this.label = event.target.value as string;
this.dispatchEvent(new UmbChangeEvent());
}
#onValueKeydown(event: KeyboardEvent) {
event.stopPropagation();
if (event.key === 'Enter') this.#onColorClick();
}
#onValueChange(event: UUIInputEvent) {
event.stopPropagation();
this.value = event.target.value as string;
@@ -145,6 +158,7 @@ export class UmbMultipleColorPickerItemInputElement extends UUIFormControlMixin(
placeholder=${this.localize.term('general_value')}
required=${this.required}
required-message="Value is missing"
@keydown=${this.#onValueKeydown}
@input=${this.#onValueInput}
@change=${this.#onValueChange}>
<uui-color-swatch
@@ -162,6 +176,7 @@ export class UmbMultipleColorPickerItemInputElement extends UUIFormControlMixin(
label=${this.localize.term('placeholders_label')}
placeholder=${this.localize.term('placeholders_label')}
value=${ifDefined(this.label)}
@keydown=${this.#onLabelKeydown}
@input="${this.#onLabelInput}"
@change="${this.#onLabelChange}"
?disabled=${this.disabled}
@@ -210,6 +225,12 @@ export class UmbMultipleColorPickerItemInputElement extends UUIFormControlMixin(
padding: var(--uui-size-1);
}
uui-color-swatch:focus-within {
outline: 2px solid var(--uui-color-selected);
outline-offset: 0;
border-radius: var(--uui-border-radius);
}
.color-wrapper {
position: relative;
flex: 1;