rename media-type input with input first

This commit is contained in:
Niels Lyngsø
2024-01-11 13:22:30 +01:00
parent f5a6ac0914
commit 7a22735b79
6 changed files with 15 additions and 16 deletions

View File

@@ -1,5 +1,5 @@
import { UmbDocumentTypeInputElement } from '@umbraco-cms/backoffice/document-type';
import { UmbMediaTypeInputElement } from '@umbraco-cms/backoffice/media-type';
import { UmbInputMediaTypeElement } from '@umbraco-cms/backoffice/media-type';
import { UmbMemberTypeInputElement } from '@umbraco-cms/backoffice/member-type';
import type { UmbTreePickerSource } from '@umbraco-cms/backoffice/components';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
@@ -62,7 +62,7 @@ export class UmbPropertyEditorUITreePickerSourceTypePickerElement extends UmbLit
this.value = (<UmbDocumentTypeInputElement>event.target).selectedIds;
break;
case 'media':
this.value = (<UmbMediaTypeInputElement>event.target).selectedIds;
this.value = (<UmbInputMediaTypeElement>event.target).selectedIds;
break;
case 'member':
this.value = (<UmbMemberTypeInputElement>event.target).selectedIds;
@@ -98,9 +98,9 @@ export class UmbPropertyEditorUITreePickerSourceTypePickerElement extends UmbLit
}
#renderTypeMedia() {
return html`<umb-media-type-input
return html`<umb-input-media-type
@change=${this.#onChange}
.selectedIds=${this.value || []}></umb-media-type-input>`;
.selectedIds=${this.value || []}></umb-input-media-type>`;
}
#renderTypeMember() {

View File

@@ -14,6 +14,5 @@ type Story = StoryObj<UmbTreeElement>;
export const Overview: Story = {
args: {
alias: 'Umb.Tree.Document',
selectable: true,
},
};

View File

@@ -1,3 +1,3 @@
import './media-type-input/media-type-input.element.js';
import './input-media-type/input-media-type.element.js';
export * from './media-type-input/media-type-input.element.js';
export * from './input-media-type/input-media-type.element.js';

View File

@@ -1,12 +1,12 @@
import { UmbMediaTypePickerContext } from './media-type-input.context.js';
import { UmbMediaTypePickerContext } from './input-media-type.context.js';
import { css, html, customElement, property, state, ifDefined } from '@umbraco-cms/backoffice/external/lit';
import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import type { MediaTypeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
import { splitStringToArray } from '@umbraco-cms/backoffice/utils';
@customElement('umb-media-type-input')
export class UmbMediaTypeInputElement extends FormControlMixin(UmbLitElement) {
@customElement('umb-input-media-type')
export class UmbInputMediaTypeElement extends FormControlMixin(UmbLitElement) {
/**
* This is a minimum amount of selected items in this input.
* @type {number}
@@ -138,10 +138,10 @@ export class UmbMediaTypeInputElement extends FormControlMixin(UmbLitElement) {
];
}
export default UmbMediaTypeInputElement;
export default UmbInputMediaTypeElement;
declare global {
interface HTMLElementTagNameMap {
'umb-media-type-input': UmbMediaTypeInputElement;
'umb-input-media-type': UmbInputMediaTypeElement;
}
}

View File

@@ -1,5 +1,5 @@
import { UmbMediaTypeWorkspaceContext } from '../../media-type-workspace.context.js';
import type { UmbMediaTypeInputElement } from '../../../components/media-type-input/media-type-input.element.js';
import type { UmbInputMediaTypeElement } from '../../../components/input-media-type/input-media-type.element.js';
import { css, html, customElement, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import type { UUIToggleElement } from '@umbraco-cms/backoffice/external/uui';
@@ -59,16 +59,16 @@ export class UmbMediaTypeWorkspaceViewStructureElement extends UmbLitElement imp
</div>
<div slot="editor">
<!-- TODO: maybe we want to somehow display the hierarchy, but not necessary in the same way as old backoffice? -->
<umb-media-type-input
<umb-input-media-type
.selectedIds=${this._allowedContentTypeIDs ?? []}
@change="${(e: CustomEvent) => {
const sortedContentTypesList = (e.target as UmbMediaTypeInputElement).selectedIds.map((id, index) => ({
const sortedContentTypesList = (e.target as UmbInputMediaTypeElement).selectedIds.map((id, index) => ({
id: id,
sortOrder: index,
}));
this.#workspaceContext?.updateProperty('allowedContentTypes', sortedContentTypesList);
}}">
</umb-media-type-input>
</umb-input-media-type>
</div>
</umb-property-layout>
</uui-box>