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

Add drag and drop to blockgrid area (#19383)

Browse Source 
* Add drag and drop to blockgrid area

* Adds `UmbChangeEvent` trigger

* Removes `updated` method

Puts `sorter.setModel` in the `value` setter,
so that the sorter is set on initial value.

* Imports sort order

Removed `UmbTextStyles`, as not used here

* Changed the cursor type to "move"

---------

Co-authored-by: Lan Nguyen Thuy <lnt@umbraco.dk>
Co-authored-by: Niels Lyngsø <nsl@umbraco.dk>
Co-authored-by: leekelleher <leekelleher@gmail.com>
This commit is contained in:
NguyenThuyLan
2025-07-31 23:17:13 +07:00
committed by GitHub
parent 4483f47668
commit 8d6096636d
2 changed files with 38 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.element.ts
View File

@@ -1,8 +1,10 @@
import { UmbBlockGridAreaConfigEntryContext } from './block-grid-area-config-entry.context.js';
import { css, customElement, html, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { html, css, customElement, property, state } from '@umbraco-cms/backoffice/external/lit';
import type { UmbPropertyEditorUiElement } from '@umbraco-cms/backoffice/property-editor';
import '../block-scale-handler/block-scale-handler.element.js';
/**
* @element umb-block-area-config-entry
*/

39
src/Umbraco.Web.UI.Client/src/packages/block/block-grid/property-editors/block-grid-areas-config/property-editor-ui-block-grid-areas-config.element.ts
View File

@@ -1,17 +1,21 @@
import { UMB_BLOCK_GRID_DEFAULT_LAYOUT_STYLESHEET, type UmbBlockGridTypeAreaType } from '../../index.js';
import { UMB_BLOCK_GRID_AREA_TYPE_WORKSPACE_MODAL } from '../../components/block-grid-area-config-entry/constants.js';
import type { UmbBlockGridAreaConfigEntryElement } from '../../../block-grid/components/block-grid-area-config-entry/block-grid-area-config-entry.element.js';
import { UmbBlockGridAreaTypeEntriesContext } from './block-grid-area-type-entries.context.js';
import { css, customElement, html, property, repeat, state } from '@umbraco-cms/backoffice/external/lit';
import { incrementString } from '@umbraco-cms/backoffice/utils';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { html, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit';
import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
import { UmbSorterController, UmbSorterResolvePlacementAsGrid } from '@umbraco-cms/backoffice/sorter';
import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
import type {
UmbPropertyEditorUiElement,
UmbPropertyEditorConfigCollection,
} from '@umbraco-cms/backoffice/property-editor';
import { UMB_PROPERTY_DATASET_CONTEXT } from '@umbraco-cms/backoffice/property';
import { UmbModalRouteRegistrationController } from '@umbraco-cms/backoffice/router';
import { incrementString } from '@umbraco-cms/backoffice/utils';
import '../../components/block-grid-area-config-entry/block-grid-area-config-entry.element.js';
@customElement('umb-property-editor-ui-block-grid-areas-config')
export class UmbPropertyEditorUIBlockGridAreasConfigElement
extends UmbLitElement
@@ -23,9 +27,28 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement
#defaultAreaGridColumns: number = 12;
#valueOfAreaGridColumns?: number | null;
#sorter = new UmbSorterController<UmbBlockGridTypeAreaType, UmbBlockGridAreaConfigEntryElement>(this, {
itemSelector: 'umb-block-area-config-entry',
containerSelector: '.umb-block-grid__area-container',
resolvePlacement: UmbSorterResolvePlacementAsGrid,
getUniqueOfElement: (element) => {
return element.key;
},
getUniqueOfModel: (modelEntry) => {
return modelEntry.key;
},
onChange: ({ model }) => {
const oldValue = this._value;
this._value = model;
this.requestUpdate('_value', oldValue);
this.dispatchEvent(new UmbChangeEvent());
},
});
@property({ type: Array })
public set value(value: Array<UmbBlockGridTypeAreaType>) {
this._value = value ?? [];
this.#sorter.setModel(this._value);
}
public get value(): Array<UmbBlockGridTypeAreaType> {
return this._value;
@@ -133,6 +156,14 @@ export class UmbPropertyEditorUIBlockGridAreasConfigElement
<uui-button look="placeholder" label=${'Add area'} href=${this._workspacePath + 'create'}></uui-button>`
: '';
}
static override styles = [
css`
.umb-block-grid__area {
cursor: move;
}
`,
];
}
export default UmbPropertyEditorUIBlockGridAreasConfigElement;