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

order direction property editor

Browse Source
This commit is contained in:
Lone Iversen
2023-12-05 15:33:41 +01:00
committed by Jacob Overgaard
parent 57b41c8d32
commit b66069b524
1 changed files with 27 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/Umbraco.Web.UI.Client/src/packages/core/property-editor/uis/order-direction/property-editor-ui-order-direction.element.ts
View File

@@ -1,8 +1,12 @@
import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
import { html, customElement, property, css } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/extension-registry';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/property-editor';
import {
UmbPropertyEditorConfigCollection,
UmbPropertyValueChangeEvent,
} from '@umbraco-cms/backoffice/property-editor';
import { UUIBooleanInputEvent } from '@umbraco-cms/backoffice/external/uui';
/**
* @element umb-property-editor-ui-order-direction
@@ -10,16 +14,33 @@ import { UmbPropertyEditorConfigCollection } from '@umbraco-cms/backoffice/prope
@customElement('umb-property-editor-ui-order-direction')
export class UmbPropertyEditorUIOrderDirectionElement extends UmbLitElement implements UmbPropertyEditorUiElement {
@property()
value = '';
value = 'asc';
@property({ attribute: false })
public config?: UmbPropertyEditorConfigCollection;
render() {
return html`<div>umb-property-editor-ui-order-direction</div>`;
#onChange(e: UUIBooleanInputEvent) {
this.value = e.target.value;
this.dispatchEvent(new UmbPropertyValueChangeEvent());
}
static styles = [UmbTextStyles];
render() {
return html`<uui-radio-group @input=${this.#onChange}>
<uui-radio name="order" label="Ascending [a-z]" ?checked=${this.value === 'asc'} value="asc"></uui-radio>
<uui-radio name="order" label="Descending [z-a]" ?checked=${this.value === 'desc'} value="desc"></uui-radio>
</uui-radio-group>`;
}
static styles = [
UmbTextStyles,
css`
uui-radio-group {
display: flex;
flex-direction: row;
gap: var(--uui-size-6);
}
`,
];
}
export default UmbPropertyEditorUIOrderDirectionElement;