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

Merge pull request #1328 from umbraco/chore/color-swatches-editor-amends

Browse Source 
Chore: Color Swatches Editor tidy-up/refactoring
This commit is contained in:
Jacob Overgaard
2024-03-01 09:13:43 +01:00
committed by GitHub
parent 21a620cb3a 2e9883e3ca
commit 6084419ee4
2 changed files with 15 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,32 +1,21 @@
import type { UmbMultipleColorPickerItemInputElement } from './multiple-color-picker-item-input.element.js';
import type { UmbSwatchDetails } from '@umbraco-cms/backoffice/models';
import {
css,
customElement,
html,
ifDefined,
nothing,
repeat,
customElement,
property,
state,
ifDefined,
} from '@umbraco-cms/backoffice/external/lit';
import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
import { type UmbInputEvent, UmbChangeEvent, type UmbDeleteEvent } from '@umbraco-cms/backoffice/event';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { type UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffice/sorter';
import { UmbSorterController } from '@umbraco-cms/backoffice/sorter';
import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
const SORTER_CONFIG: UmbSorterConfig<UmbSwatchDetails, UmbMultipleColorPickerItemInputElement> = {
getUniqueOfElement: (element) => {
return element.value.toString();
},
getUniqueOfModel: (modelEntry) => {
return modelEntry.value;
},
identifier: 'Umb.SorterIdentifier.ColorEditor',
itemSelector: 'umb-multiple-color-picker-item-input',
containerSelector: '#sorter-wrapper',
};
import type { UmbInputEvent, UmbDeleteEvent } from '@umbraco-cms/backoffice/event';
import type { UmbSwatchDetails } from '@umbraco-cms/backoffice/models';
/**
* @element umb-multiple-color-picker-input
@@ -34,7 +23,15 @@ const SORTER_CONFIG: UmbSorterConfig<UmbSwatchDetails, UmbMultipleColorPickerIte
@customElement('umb-multiple-color-picker-input')
export class UmbMultipleColorPickerInputElement extends FormControlMixin(UmbLitElement) {
#sorter = new UmbSorterController(this, {
...SORTER_CONFIG,
getUniqueOfElement: (element: UmbMultipleColorPickerItemInputElement) => {
return element.value.toString();
},
getUniqueOfModel: (modelEntry: UmbSwatchDetails) => {
return modelEntry.value;
},
identifier: 'Umb.SorterIdentifier.ColorEditor',
itemSelector: 'umb-multiple-color-picker-item-input',
containerSelector: '#sorter-wrapper',
onChange: ({ model }) => {
const oldValue = this._items;
this._items = model;
@@ -194,7 +191,6 @@ export class UmbMultipleColorPickerInputElement extends FormControlMixin(UmbLitE
?showLabels=${this.showLabels}
value=${item.value}
label=${ifDefined(item.label)}
name="item-${index}"
@change=${(event: UmbChangeEvent) => this.#onChange(event, index)}
@delete="${(event: UmbDeleteEvent) => this.#deleteItem(event, index)}"
?disabled=${this.disabled}

4
src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/color-swatches-editor/property-editor-ui-color-swatches-editor.element.ts
View File

@@ -21,10 +21,6 @@ export class UmbPropertyEditorUIColorSwatchesEditorElement extends UmbLitElement
@property({ attribute: false })
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
this._showLabels = config?.getValueByAlias('useLabel') ?? this.#defaultShowLabels;
const items = config?.getValueByAlias('items') as typeof this.value;
if (items) {
this.value = items;
}
}
#onChange(event: CustomEvent) {