document-input

This commit is contained in:
Lone Iversen
2023-06-19 14:15:06 +02:00
parent 021f31a209
commit 03cf722b90
7 changed files with 32 additions and 32 deletions

View File

@@ -12,8 +12,8 @@ import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import type { DocumentTreeItemResponseModel, EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
import type { UmbObserverController } from '@umbraco-cms/backoffice/observable-api';
@customElement('umb-input-document-picker')
export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElement) {
@customElement('umb-document-input')
export class UmbDocumentInputElement extends FormControlMixin(UmbLitElement) {
/**
* This is a minimum amount of selected items in this input.
* @type {number}
@@ -174,10 +174,10 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen
];
}
export default UmbInputDocumentPickerElement;
export default UmbDocumentInputElement;
declare global {
interface HTMLElementTagNameMap {
'umb-input-document-picker': UmbInputDocumentPickerElement;
'umb-document-input': UmbDocumentInputElement;
}
}

View File

@@ -0,0 +1,15 @@
import { Meta, StoryObj } from '@storybook/web-components';
import './document-input.element.js';
import type { UmbDocumentInputElement } from './document-input.element.js';
const meta: Meta<UmbDocumentInputElement> = {
title: 'Components/Inputs/Document Picker',
component: 'umb-input-document-picker',
};
export default meta;
type Story = StoryObj<UmbDocumentInputElement>;
export const Overview: Story = {
args: {},
};

View File

@@ -1,15 +1,15 @@
import { expect, fixture, html } from '@open-wc/testing';
import { UmbInputDocumentPickerElement } from './input-document-picker.element.js';
import { UmbDocumentInputElement } from './document-input.element.js';
import { defaultA11yConfig } from '@umbraco-cms/internal/test-utils';
describe('UmbInputDocumentPickerElement', () => {
let element: UmbInputDocumentPickerElement;
let element: UmbDocumentInputElement;
beforeEach(async () => {
element = await fixture(html` <umb-input-document-picker></umb-input-document-picker> `);
element = await fixture(html` <umb-document-input></umb-document-input> `);
});
it('is defined with its own instance', () => {
expect(element).to.be.instanceOf(UmbInputDocumentPickerElement);
expect(element).to.be.instanceOf(UmbDocumentInputElement);
});
it('passes the a11y audit', async () => {

View File

@@ -1 +1 @@
export * from './input-document-picker/input-document-picker.element.js';
export * from './document-input/document-input.element.js';

View File

@@ -1,15 +0,0 @@
import { Meta, StoryObj } from '@storybook/web-components';
import './input-document-picker.element.js';
import type { UmbInputDocumentPickerElement } from './input-document-picker.element.js';
const meta: Meta<UmbInputDocumentPickerElement> = {
title: 'Components/Inputs/Document Picker',
component: 'umb-input-document-picker',
};
export default meta;
type Story = StoryObj<UmbInputDocumentPickerElement>;
export const Overview: Story = {
args: {},
};

View File

@@ -1,4 +1,4 @@
import type { UmbInputDocumentPickerElement } from '../../components/input-document-picker/input-document-picker.element.js';
import type { UmbDocumentInputElement } from '../../components/document-input/document-input.element.js';
import { html, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbPropertyEditorExtensionElement } from '@umbraco-cms/backoffice/extension-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
@@ -33,19 +33,19 @@ export class UmbPropertyEditorUIContentPickerElement
private _limitMax?: number;
private _onChange(event: CustomEvent) {
this.value = (event.target as UmbInputDocumentPickerElement).selectedIds;
this.value = (event.target as UmbDocumentInputElement).selectedIds;
this.dispatchEvent(new CustomEvent('property-value-change'));
}
// TODO: Implement mandatory?
render() {
return html`
<umb-input-document-picker
<umb-document-input
@change=${this._onChange}
.selectedIds=${this._value}
.min=${this._limitMin}
.max=${this._limitMax}
>Add</umb-input-document-picker
>Add</umb-document-input
>
`;
}

View File

@@ -1,4 +1,4 @@
import type { UmbInputDocumentPickerElement } from '../../../documents/documents/components/input-document-picker/input-document-picker.element.js';
import type { UmbDocumentInputElement } from '../../../documents/documents/components/document-input/document-input.element.js';
import type { UmbInputMediaPickerElement } from '../../../media/media/components/input-media-picker/input-media-picker.element.js';
import type { UmbInputLanguagePickerElement } from '../../../settings/languages/components/input-language-picker/input-language-picker.element.js';
import {
@@ -184,12 +184,12 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
#renderContentSection() {
return html`
<div slot="editor">
<umb-input-document-picker
<umb-document-input
.value=${this._package.contentNodeId ?? ''}
max="1"
@change="${(e: CustomEvent) =>
(this._package.contentNodeId = (e.target as UmbInputDocumentPickerElement).selectedIds[0])}">
</umb-input-document-picker>
(this._package.contentNodeId = (e.target as UmbDocumentInputElement).selectedIds[0])}">
</umb-document-input>
<uui-checkbox
label="Include child nodes"
.checked="${this._package.contentLoadChildNodes ?? false}"