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

a few fixes

Browse Source
This commit is contained in:
Niels Lyngsø
2024-02-02 12:32:06 +01:00
parent 3a789bebad
commit 4de7497cd0
4 changed files with 31 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-dashboard.ts
View File

@@ -20,6 +20,7 @@ export class ExampleSorterDashboard extends UmbElementMixin(LitElement) {
},
{
name: 'Banana',
children: [],
},
{
name: 'Pear',
@@ -57,8 +58,8 @@ export class ExampleSorterDashboard extends UmbElementMixin(LitElement) {
<uui-box class="uui-text">
<div class="outer-wrapper">
<h5>Notice this example still only support single group of Sorter.</h5>
<example-sorter-group .items=${this.groupOneItems}></example-sorter-group>
<example-sorter-group .items=${this.groupTwoItems}></example-sorter-group>
<example-sorter-group .initialItems=${this.groupOneItems}></example-sorter-group>
<example-sorter-group .initialItems=${this.groupTwoItems}></example-sorter-group>
</div>
</uui-box>
`;

29
src/Umbraco.Web.UI.Client/examples/sorter-with-nested-containers/sorter-group.ts
View File

@@ -13,15 +13,25 @@ export type ModelEntryType = {
@customElement('example-sorter-group')
export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
@property({ type: Array, attribute: false })
public get initialItems(): ModelEntryType[] {
return this.items;
}
public set initialItems(value: ModelEntryType[]) {
// Only want to set the model initially, cause any re-render should not set this again.
if (this._items !== undefined) return;
this.items = value;
}
@property({ type: Array, attribute: false })
public get items(): ModelEntryType[] {
return this._items ?? [];
}
public set items(value: ModelEntryType[]) {
// Only want to set the model initially, cause any re-render should not set this again.
if (this._items !== undefined) return;
const oldValue = this._items;
this._items = value;
this.#sorter.setModel(this._items);
this.requestUpdate('items', oldValue);
}
private _items?: ModelEntryType[];
@@ -43,7 +53,7 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
});
removeItem = (item: ModelEntryType) => {
this.items = this._items!.filter((r) => r.name !== item.name);
this.items = this.items.filter((r) => r.name !== item.name);
};
render() {
@@ -55,9 +65,7 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
(item) =>
html`<example-sorter-item name=${item.name}>
<button slot="action" @click=${() => this.removeItem(item)}>Delete</button>
${item.children && item.children.length > 0
? html`<example-sorter-group .items=${item.children}></example-sorter-group>`
: ''}
${item.children ? html`<example-sorter-group .initialItems=${item.children}></example-sorter-group>` : ''}
</example-sorter-item>`,
)}
</div>
@@ -76,12 +84,15 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
opacity: 0.2;
}
.sorter-container {
min-height: 20px;
}
example-sorter-group {
display: block;
width: 100%;
min-height: 20px;
border: 1px solid var(--uui-color-border);
border-radius: var(--uui-size-border-radius);
border: 1px dashed rgba(122, 122, 122, 0.25);
border-radius: calc(var(--uui-border-radius) * 2);
padding: var(--uui-size-space-1);
}
`,

10
src/Umbraco.Web.UI.Client/examples/sorter-with-two-containers/sorter-group.ts
View File

@@ -44,7 +44,8 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
});
removeItem = (item: ModelEntryType) => {
this.items = this._items!.filter((r) => r.name !== item.name);
this._items = this._items!.filter((r) => r.name !== item.name);
this.#sorter.setModel(this._items);
};
render() {
@@ -74,13 +75,8 @@ export class ExampleSorterGroup extends UmbElementMixin(LitElement) {
opacity: 0.2;
}
example-sorter-group {
display: block;
width: 100%;
.sorter-container {
min-height: 20px;
border: 1px solid var(--uui-color-border);
border-radius: var(--uui-size-border-radius);
padding: var(--uui-size-space-1);
}
`,
];