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

Fix: 17764 (#18093)

Browse Source 
* Add property value model type

* make the element a Form Control
This commit is contained in:
Niels Lyngsø
2025-01-23 15:21:00 +01:00
committed by GitHub
parent 776e7313d0
commit 7b00033c42
3 changed files with 22 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/Umbraco.Web.UI.Client/src/packages/media/media/components/input-rich-media/input-rich-media.element.ts
View File

@@ -1,6 +1,6 @@
import { UmbMediaItemRepository } from '../../repository/index.js';
import { UMB_IMAGE_CROPPER_EDITOR_MODAL, UMB_MEDIA_PICKER_MODAL } from '../../modals/index.js';
import type { UmbMediaItemModel, UmbCropModel, UmbMediaPickerPropertyValue } from '../../types.js';
import type { UmbMediaItemModel, UmbCropModel, UmbMediaPickerPropertyValueEntry } from '../../types.js';
import type { UmbUploadableItem } from '../../dropzone/types.js';
import { css, customElement, html, nothing, property, repeat, state } from '@umbraco-cms/backoffice/external/lit';
import { umbConfirmModal, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal';
@@ -27,7 +27,7 @@ type UmbRichMediaCardModel = {
@customElement('umb-input-rich-media')
export class UmbInputRichMediaElement extends UUIFormControlMixin(UmbLitElement, '') {
#sorter = new UmbSorterController<UmbMediaPickerPropertyValue>(this, {
#sorter = new UmbSorterController<UmbMediaPickerPropertyValueEntry>(this, {
getUniqueOfElement: (element) => {
return element.id;
},
@@ -46,7 +46,7 @@ export class UmbInputRichMediaElement extends UUIFormControlMixin(UmbLitElement,
},
});
#sortCards(model: Array<UmbMediaPickerPropertyValue>) {
#sortCards(model: Array<UmbMediaPickerPropertyValueEntry>) {
const idToIndexMap: { [unique: string]: number } = {};
model.forEach((item, index) => {
idToIndexMap[item.key] = index;
@@ -93,15 +93,15 @@ export class UmbInputRichMediaElement extends UUIFormControlMixin(UmbLitElement,
maxMessage = 'This field exceeds the allowed amount of items';
@property({ type: Array })
public set items(value: Array<UmbMediaPickerPropertyValue>) {
public set items(value: Array<UmbMediaPickerPropertyValueEntry>) {
this.#sorter.setModel(value);
this.#items = value;
this.#populateCards();
}
public get items(): Array<UmbMediaPickerPropertyValue> {
public get items(): Array<UmbMediaPickerPropertyValueEntry> {
return this.#items;
}
#items: Array<UmbMediaPickerPropertyValue> = [];
#items: Array<UmbMediaPickerPropertyValueEntry> = [];
@property({ type: Array })
allowedContentTypeIds?: string[] | undefined;
@@ -282,7 +282,7 @@ export class UmbInputRichMediaElement extends UUIFormControlMixin(UmbLitElement,
#addItems(uniques: string[]) {
if (!uniques.length) return;
const additions: Array<UmbMediaPickerPropertyValue> = uniques.map((unique) => ({
const additions: Array<UmbMediaPickerPropertyValueEntry> = uniques.map((unique) => ({
key: UmbId.new(),
mediaKey: unique,
mediaTypeAlias: '',

11
src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/media-picker/property-editor-ui-media-picker.element.ts
View File

@@ -1,5 +1,5 @@
import type { UmbInputRichMediaElement } from '../../components/input-rich-media/input-rich-media.element.js';
import type { UmbCropModel, UmbMediaPickerPropertyValue } from '../types.js';
import type { UmbCropModel, UmbMediaPickerValueModel } from '../types.js';
import { customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-editor';
@@ -11,6 +11,7 @@ import type {
} from '@umbraco-cms/backoffice/property-editor';
import '../../components/input-rich-media/input-rich-media.element.js';
import { UmbFormControlMixin } from '@umbraco-cms/backoffice/validation';
const elementName = 'umb-property-editor-ui-media-picker';
@@ -18,10 +19,10 @@ const elementName = 'umb-property-editor-ui-media-picker';
* @element umb-property-editor-ui-media-picker
*/
@customElement(elementName)
export class UmbPropertyEditorUIMediaPickerElement extends UmbLitElement implements UmbPropertyEditorUiElement {
@property({ attribute: false })
value?: Array<UmbMediaPickerPropertyValue>;
export class UmbPropertyEditorUIMediaPickerElement
extends UmbFormControlMixin<UmbMediaPickerValueModel | undefined, typeof UmbLitElement, undefined>(UmbLitElement)
implements UmbPropertyEditorUiElement
{
public set config(config: UmbPropertyEditorConfigCollection | undefined) {
if (!config) return;

10
src/Umbraco.Web.UI.Client/src/packages/media/media/property-editors/types.ts
View File

@@ -1,4 +1,4 @@
export type UmbMediaPickerPropertyValue = {
export type UmbMediaPickerPropertyValueEntry = {
key: string;
mediaKey: string;
mediaTypeAlias: string;
@@ -6,6 +6,14 @@ export type UmbMediaPickerPropertyValue = {
crops: Array<UmbCropModel>;
};
/**
* @deprecated Use UmbMediaPickerPropertyValueEntry instead — Will be removed in v.17.
* Also notice this is a modal for the entry type, use UmbMediaPickerPropertyValueModel for the type of the value.
*/
export type UmbMediaPickerPropertyValue = UmbMediaPickerPropertyValueEntry;
export type UmbMediaPickerValueModel = Array<UmbMediaPickerPropertyValueEntry>;
export type UmbCropModel = {
label?: string;
alias: string;