diff --git a/apps/demos/Demos/DataGrid/PopupEditing/Angular/app/app.component.html b/apps/demos/Demos/DataGrid/PopupEditing/Angular/app/app.component.html index 33036bba5fa6..988884aa048d 100644 --- a/apps/demos/Demos/DataGrid/PopupEditing/Angular/app/app.component.html +++ b/apps/demos/Demos/DataGrid/PopupEditing/Angular/app/app.component.html @@ -5,60 +5,60 @@ keyExpr="ID" [showBorders]="true" > - - + - - - - - - - - - - - + + + + + + + + + - - + + - - - - - - + + + + + - - - - - - - - - - - - + + + + + + + + + + + + diff --git a/packages/devextreme-angular/src/ui/data-grid/index.ts b/packages/devextreme-angular/src/ui/data-grid/index.ts index a0f84a9b25be..49ebcb5bd7dd 100644 --- a/packages/devextreme-angular/src/ui/data-grid/index.ts +++ b/packages/devextreme-angular/src/ui/data-grid/index.ts @@ -126,6 +126,8 @@ import { DxiDataGridAsyncRuleModule } from 'devextreme-angular/ui/data-grid/nest import { DxoDataGridAtModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxoDataGridBoundaryOffsetModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxiDataGridButtonModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxiDataGridButtonItemModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridButtonOptionsModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxiDataGridChangeModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxoDataGridColCountByScreenModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxoDataGridCollisionModule } from 'devextreme-angular/ui/data-grid/nested'; @@ -147,11 +149,13 @@ import { DxoDataGridDataGridHeaderFilterModule } from 'devextreme-angular/ui/dat import { DxoDataGridDataGridHeaderFilterSearchModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxoDataGridDataGridHeaderFilterTextsModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxoDataGridDataGridSelectionModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxiDataGridDataGridToolbarItemModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxoDataGridEditingModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxoDataGridEditingTextsModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxoDataGridEditorOptionsModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxiDataGridEditorOptionsButtonModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxiDataGridEmailRuleModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxiDataGridEmptyItemModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxoDataGridExportModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxoDataGridExportTextsModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxiDataGridFieldModule } from 'devextreme-angular/ui/data-grid/nested'; @@ -200,12 +204,17 @@ import { DxoDataGridSearchModule } from 'devextreme-angular/ui/data-grid/nested' import { DxoDataGridSearchPanelModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxoDataGridSelectionModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxoDataGridShowModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxiDataGridSimpleItemModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxiDataGridSortByGroupSummaryInfoModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxoDataGridSortingModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxoDataGridStateStoringModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxiDataGridStringLengthRuleModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxoDataGridSummaryModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxoDataGridSummaryTextsModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxiDataGridTabModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxiDataGridTabbedItemModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxoDataGridTabPanelOptionsModule } from 'devextreme-angular/ui/data-grid/nested'; +import { DxiDataGridTabPanelOptionsItemModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxoDataGridTextsModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxoDataGridToModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxoDataGridToolbarModule } from 'devextreme-angular/ui/data-grid/nested'; @@ -216,13 +225,14 @@ import { DxoDataGridValueFormatModule } from 'devextreme-angular/ui/data-grid/ne import { PROPERTY_TOKEN_validationRules, PROPERTY_TOKEN_buttons, + PROPERTY_TOKEN_items, PROPERTY_TOKEN_changes, PROPERTY_TOKEN_columns, PROPERTY_TOKEN_customOperations, PROPERTY_TOKEN_fields, PROPERTY_TOKEN_groupItems, - PROPERTY_TOKEN_items, PROPERTY_TOKEN_sortByGroupSummaryInfo, + PROPERTY_TOKEN_tabs, PROPERTY_TOKEN_toolbarItems, PROPERTY_TOKEN_totalItems, } from 'devextreme-angular/core/tokens'; @@ -257,6 +267,11 @@ export class DxDataGridComponent extends DxComponent this.setChildren('buttons', value); } + @ContentChildren(PROPERTY_TOKEN_items) + set _itemsContentChildren(value: QueryList) { + this.setChildren('items', value); + } + @ContentChildren(PROPERTY_TOKEN_changes) set _changesContentChildren(value: QueryList) { this.setChildren('changes', value); @@ -282,16 +297,16 @@ export class DxDataGridComponent extends DxComponent this.setChildren('groupItems', value); } - @ContentChildren(PROPERTY_TOKEN_items) - set _itemsContentChildren(value: QueryList) { - this.setChildren('items', value); - } - @ContentChildren(PROPERTY_TOKEN_sortByGroupSummaryInfo) set _sortByGroupSummaryInfoContentChildren(value: QueryList) { this.setChildren('sortByGroupSummaryInfo', value); } + @ContentChildren(PROPERTY_TOKEN_tabs) + set _tabsContentChildren(value: QueryList) { + this.setChildren('tabs', value); + } + @ContentChildren(PROPERTY_TOKEN_toolbarItems) set _toolbarItemsContentChildren(value: QueryList) { this.setChildren('toolbarItems', value); @@ -2422,6 +2437,8 @@ export class DxDataGridComponent extends DxComponent DxoDataGridAtModule, DxoDataGridBoundaryOffsetModule, DxiDataGridButtonModule, + DxiDataGridButtonItemModule, + DxoDataGridButtonOptionsModule, DxiDataGridChangeModule, DxoDataGridColCountByScreenModule, DxoDataGridCollisionModule, @@ -2443,11 +2460,13 @@ export class DxDataGridComponent extends DxComponent DxoDataGridDataGridHeaderFilterSearchModule, DxoDataGridDataGridHeaderFilterTextsModule, DxoDataGridDataGridSelectionModule, + DxiDataGridDataGridToolbarItemModule, DxoDataGridEditingModule, DxoDataGridEditingTextsModule, DxoDataGridEditorOptionsModule, DxiDataGridEditorOptionsButtonModule, DxiDataGridEmailRuleModule, + DxiDataGridEmptyItemModule, DxoDataGridExportModule, DxoDataGridExportTextsModule, DxiDataGridFieldModule, @@ -2496,12 +2515,17 @@ export class DxDataGridComponent extends DxComponent DxoDataGridSearchPanelModule, DxoDataGridSelectionModule, DxoDataGridShowModule, + DxiDataGridSimpleItemModule, DxiDataGridSortByGroupSummaryInfoModule, DxoDataGridSortingModule, DxoDataGridStateStoringModule, DxiDataGridStringLengthRuleModule, DxoDataGridSummaryModule, DxoDataGridSummaryTextsModule, + DxiDataGridTabModule, + DxiDataGridTabbedItemModule, + DxoDataGridTabPanelOptionsModule, + DxiDataGridTabPanelOptionsItemModule, DxoDataGridTextsModule, DxoDataGridToModule, DxoDataGridToolbarModule, @@ -2585,6 +2609,8 @@ export class DxDataGridComponent extends DxComponent DxoDataGridAtModule, DxoDataGridBoundaryOffsetModule, DxiDataGridButtonModule, + DxiDataGridButtonItemModule, + DxoDataGridButtonOptionsModule, DxiDataGridChangeModule, DxoDataGridColCountByScreenModule, DxoDataGridCollisionModule, @@ -2606,11 +2632,13 @@ export class DxDataGridComponent extends DxComponent DxoDataGridDataGridHeaderFilterSearchModule, DxoDataGridDataGridHeaderFilterTextsModule, DxoDataGridDataGridSelectionModule, + DxiDataGridDataGridToolbarItemModule, DxoDataGridEditingModule, DxoDataGridEditingTextsModule, DxoDataGridEditorOptionsModule, DxiDataGridEditorOptionsButtonModule, DxiDataGridEmailRuleModule, + DxiDataGridEmptyItemModule, DxoDataGridExportModule, DxoDataGridExportTextsModule, DxiDataGridFieldModule, @@ -2659,12 +2687,17 @@ export class DxDataGridComponent extends DxComponent DxoDataGridSearchPanelModule, DxoDataGridSelectionModule, DxoDataGridShowModule, + DxiDataGridSimpleItemModule, DxiDataGridSortByGroupSummaryInfoModule, DxoDataGridSortingModule, DxoDataGridStateStoringModule, DxiDataGridStringLengthRuleModule, DxoDataGridSummaryModule, DxoDataGridSummaryTextsModule, + DxiDataGridTabModule, + DxiDataGridTabbedItemModule, + DxoDataGridTabPanelOptionsModule, + DxiDataGridTabPanelOptionsItemModule, DxoDataGridTextsModule, DxoDataGridToModule, DxoDataGridToolbarModule, diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/button-item-dxi.ts b/packages/devextreme-angular/src/ui/data-grid/nested/button-item-dxi.ts new file mode 100644 index 000000000000..d328e54a1bc7 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/button-item-dxi.ts @@ -0,0 +1,145 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { dxButtonOptions } from 'devextreme/ui/button'; +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; +import { FormItemType, FormPredefinedButtonItem } from 'devextreme/ui/form'; + +import { + DxIntegrationModule, + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + +import { PROPERTY_TOKEN_items } from 'devextreme-angular/core/tokens'; + +@Component({ + selector: 'dxi-data-grid-button-item', + standalone: true, + template: '', + styles: [''], + imports: [ DxIntegrationModule ], + providers: [ + NestedOptionHost, + { + provide: PROPERTY_TOKEN_items, + useExisting: DxiDataGridButtonItemComponent, + } + ] +}) +export class DxiDataGridButtonItemComponent extends CollectionNestedOption { + @Input() + get buttonOptions(): dxButtonOptions | undefined { + return this._getOption('buttonOptions'); + } + set buttonOptions(value: dxButtonOptions | undefined) { + this._setOption('buttonOptions', value); + } + + @Input() + get colSpan(): number | undefined { + return this._getOption('colSpan'); + } + set colSpan(value: number | undefined) { + this._setOption('colSpan', value); + } + + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get horizontalAlignment(): HorizontalAlignment { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalAlignment) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get itemType(): FormItemType { + return this._getOption('itemType'); + } + set itemType(value: FormItemType) { + this._setOption('itemType', value); + } + + @Input() + get name(): FormPredefinedButtonItem | string | undefined { + return this._getOption('name'); + } + set name(value: FormPredefinedButtonItem | string | undefined) { + this._setOption('name', value); + } + + @Input() + get verticalAlignment(): VerticalAlignment { + return this._getOption('verticalAlignment'); + } + set verticalAlignment(value: VerticalAlignment) { + this._setOption('verticalAlignment', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get visibleIndex(): number | undefined { + return this._getOption('visibleIndex'); + } + set visibleIndex(value: number | undefined) { + this._setOption('visibleIndex', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + this.itemType = 'button'; + + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + imports: [ + DxiDataGridButtonItemComponent + ], + exports: [ + DxiDataGridButtonItemComponent + ], +}) +export class DxiDataGridButtonItemModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/button-options.ts b/packages/devextreme-angular/src/ui/data-grid/nested/button-options.ts new file mode 100644 index 000000000000..492bffb1b0dc --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/button-options.ts @@ -0,0 +1,282 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { ClickEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent } from 'devextreme/ui/button'; +import { ButtonStyle, ButtonType } from 'devextreme/common'; + +import { + DxIntegrationModule, + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-data-grid-button-options', + standalone: true, + template: '', + styles: [':host { display: block; }'], + imports: [ DxIntegrationModule ], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxoDataGridButtonOptionsComponent extends NestedOption implements AfterViewInit, OnDestroy, OnInit, + IDxTemplateHost { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): Record { + return this._getOption('elementAttr'); + } + set elementAttr(value: Record) { + this._setOption('elementAttr', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get height(): number | string | undefined { + return this._getOption('height'); + } + set height(value: number | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get onClick(): ((e: ClickEvent) => void) { + return this._getOption('onClick'); + } + set onClick(value: ((e: ClickEvent) => void)) { + this._setOption('onClick', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get stylingMode(): ButtonStyle { + return this._getOption('stylingMode'); + } + set stylingMode(value: ButtonStyle) { + this._setOption('stylingMode', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get type(): ButtonType | string { + return this._getOption('type'); + } + set type(value: ButtonType | string) { + this._setOption('type', value); + } + + @Input() + get useSubmitBehavior(): boolean { + return this._getOption('useSubmitBehavior'); + } + set useSubmitBehavior(value: boolean) { + this._setOption('useSubmitBehavior', value); + } + + @Input() + get validationGroup(): string | undefined { + return this._getOption('validationGroup'); + } + set validationGroup(value: string | undefined) { + this._setOption('validationGroup', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | string | undefined { + return this._getOption('width'); + } + set width(value: number | string | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'buttonOptions'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + imports: [ + DxoDataGridButtonOptionsComponent + ], + exports: [ + DxoDataGridButtonOptionsComponent + ], +}) +export class DxoDataGridButtonOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/data-grid-toolbar-item-dxi.ts b/packages/devextreme-angular/src/ui/data-grid/nested/data-grid-toolbar-item-dxi.ts new file mode 100644 index 000000000000..c4ff62c6f224 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/data-grid-toolbar-item-dxi.ts @@ -0,0 +1,197 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; +import { ToolbarItemLocation, ToolbarItemComponent } from 'devextreme/common'; +import { DataGridPredefinedToolbarItem } from 'devextreme/ui/data_grid'; + +import { + DxIntegrationModule, + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + +import { PROPERTY_TOKEN_items } from 'devextreme-angular/core/tokens'; + +@Component({ + selector: 'dxi-data-grid-data-grid-toolbar-item', + standalone: true, + template: '', + styles: [':host { display: block; }'], + imports: [ DxIntegrationModule ], + providers: [ + NestedOptionHost, + DxTemplateHost, + { + provide: PROPERTY_TOKEN_items, + useExisting: DxiDataGridDataGridToolbarItemComponent, + } + ] +}) +export class DxiDataGridDataGridToolbarItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get locateInMenu(): LocateInMenuMode { + return this._getOption('locateInMenu'); + } + set locateInMenu(value: LocateInMenuMode) { + this._setOption('locateInMenu', value); + } + + @Input() + get location(): ToolbarItemLocation { + return this._getOption('location'); + } + set location(value: ToolbarItemLocation) { + this._setOption('location', value); + } + + @Input() + get menuItemTemplate(): any { + return this._getOption('menuItemTemplate'); + } + set menuItemTemplate(value: any) { + this._setOption('menuItemTemplate', value); + } + + @Input() + get name(): DataGridPredefinedToolbarItem | string { + return this._getOption('name'); + } + set name(value: DataGridPredefinedToolbarItem | string) { + this._setOption('name', value); + } + + @Input() + get options(): any { + return this._getOption('options'); + } + set options(value: any) { + this._setOption('options', value); + } + + @Input() + get showText(): ShowTextMode { + return this._getOption('showText'); + } + set showText(value: ShowTextMode) { + this._setOption('showText', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get widget(): ToolbarItemComponent { + return this._getOption('widget'); + } + set widget(value: ToolbarItemComponent) { + this._setOption('widget', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + imports: [ + DxiDataGridDataGridToolbarItemComponent + ], + exports: [ + DxiDataGridDataGridToolbarItemComponent + ], +}) +export class DxiDataGridDataGridToolbarItemModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/empty-item-dxi.ts b/packages/devextreme-angular/src/ui/data-grid/nested/empty-item-dxi.ts new file mode 100644 index 000000000000..a84f8bb31400 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/empty-item-dxi.ts @@ -0,0 +1,119 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { FormItemType } from 'devextreme/ui/form'; + +import { + DxIntegrationModule, + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + +import { PROPERTY_TOKEN_items } from 'devextreme-angular/core/tokens'; + +@Component({ + selector: 'dxi-data-grid-empty-item', + standalone: true, + template: '', + styles: [''], + imports: [ DxIntegrationModule ], + providers: [ + NestedOptionHost, + { + provide: PROPERTY_TOKEN_items, + useExisting: DxiDataGridEmptyItemComponent, + } + ] +}) +export class DxiDataGridEmptyItemComponent extends CollectionNestedOption { + @Input() + get colSpan(): number | undefined { + return this._getOption('colSpan'); + } + set colSpan(value: number | undefined) { + this._setOption('colSpan', value); + } + + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get itemType(): FormItemType { + return this._getOption('itemType'); + } + set itemType(value: FormItemType) { + this._setOption('itemType', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get visibleIndex(): number | undefined { + return this._getOption('visibleIndex'); + } + set visibleIndex(value: number | undefined) { + this._setOption('visibleIndex', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + this.itemType = 'empty'; + + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + imports: [ + DxiDataGridEmptyItemComponent + ], + exports: [ + DxiDataGridEmptyItemComponent + ], +}) +export class DxiDataGridEmptyItemModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/form.ts b/packages/devextreme-angular/src/ui/data-grid/nested/form.ts index 0fc2410855c6..20dab4f19b3d 100644 --- a/packages/devextreme-angular/src/ui/data-grid/nested/form.ts +++ b/packages/devextreme-angular/src/ui/data-grid/nested/form.ts @@ -10,7 +10,9 @@ import { SkipSelf, Input, Output, - EventEmitter + EventEmitter, + ContentChildren, + QueryList } from '@angular/core'; @@ -23,9 +25,13 @@ import { dxFormSimpleItem, dxFormGroupItem, dxFormTabbedItem, dxFormEmptyItem, d import { DxIntegrationModule, NestedOptionHost, + CollectionNestedOption, } from 'devextreme-angular/core'; import { NestedOption } from 'devextreme-angular/core'; +import { + PROPERTY_TOKEN_items, +} from 'devextreme-angular/core/tokens'; @Component({ selector: 'dxo-data-grid-form', @@ -36,6 +42,11 @@ import { NestedOption } from 'devextreme-angular/core'; providers: [NestedOptionHost] }) export class DxoDataGridFormComponent extends NestedOption implements OnDestroy, OnInit { + @ContentChildren(PROPERTY_TOKEN_items) + set _itemsContentChildren(value: QueryList) { + this.setChildren('items', value); + } + @Input() get accessKey(): string | undefined { return this._getOption('accessKey'); diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/index.ts b/packages/devextreme-angular/src/ui/data-grid/nested/index.ts index 0358970c76c8..008ddeb6e97b 100644 --- a/packages/devextreme-angular/src/ui/data-grid/nested/index.ts +++ b/packages/devextreme-angular/src/ui/data-grid/nested/index.ts @@ -5,6 +5,8 @@ export * from './async-rule-dxi'; export * from './at'; export * from './boundary-offset'; export * from './button-dxi'; +export * from './button-item-dxi'; +export * from './button-options'; export * from './change-dxi'; export * from './col-count-by-screen'; export * from './collision'; @@ -26,11 +28,13 @@ export * from './data-grid-header-filter-search'; export * from './data-grid-header-filter-texts'; export * from './data-grid-header-filter'; export * from './data-grid-selection'; +export * from './data-grid-toolbar-item-dxi'; export * from './editing-texts'; export * from './editing'; export * from './editor-options-button-dxi'; export * from './editor-options'; export * from './email-rule-dxi'; +export * from './empty-item-dxi'; export * from './export-texts'; export * from './export'; export * from './field-dxi'; @@ -79,12 +83,17 @@ export * from './search-panel'; export * from './search'; export * from './selection'; export * from './show'; +export * from './simple-item-dxi'; export * from './sort-by-group-summary-info-dxi'; export * from './sorting'; export * from './state-storing'; export * from './string-length-rule-dxi'; export * from './summary-texts'; export * from './summary'; +export * from './tab-dxi'; +export * from './tab-panel-options-item-dxi'; +export * from './tab-panel-options'; +export * from './tabbed-item-dxi'; export * from './texts'; export * from './to'; export * from './toolbar-item-dxi'; diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/data-grid/nested/item-dxi.ts index 700e6e9a7f00..ca9c1123922a 100644 --- a/packages/devextreme-angular/src/ui/data-grid/nested/item-dxi.ts +++ b/packages/devextreme-angular/src/ui/data-grid/nested/item-dxi.ts @@ -10,15 +10,21 @@ import { Inject, AfterViewInit, SkipSelf, - Input + Input, + ContentChildren, + QueryList } from '@angular/core'; import { DOCUMENT } from '@angular/common'; -import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; -import { ToolbarItemLocation, ToolbarItemComponent } from 'devextreme/common'; +import * as CommonTypes from 'devextreme/common'; +import { FormItemComponent, FormItemType, LabelLocation, FormPredefinedButtonItem, dxFormButtonItem, dxFormEmptyItem, dxFormGroupItem, dxFormSimpleItem, dxFormTabbedItem } from 'devextreme/ui/form'; +import { HorizontalAlignment, VerticalAlignment, ToolbarItemLocation, ToolbarItemComponent } from 'devextreme/common'; import { DataGridPredefinedToolbarItem } from 'devextreme/ui/data_grid'; +import { dxTabPanelOptions } from 'devextreme/ui/tab_panel'; +import { dxButtonOptions } from 'devextreme/ui/button'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; import { DxIntegrationModule, @@ -30,7 +36,11 @@ import { } from 'devextreme-angular/core'; import { CollectionNestedOption } from 'devextreme-angular/core'; -import { PROPERTY_TOKEN_items } from 'devextreme-angular/core/tokens'; +import { + PROPERTY_TOKEN_validationRules, + PROPERTY_TOKEN_tabs, + PROPERTY_TOKEN_items, +} from 'devextreme-angular/core/tokens'; @Component({ selector: 'dxi-data-grid-item', @@ -49,12 +59,27 @@ import { PROPERTY_TOKEN_items } from 'devextreme-angular/core/tokens'; }) export class DxiDataGridItemComponent extends CollectionNestedOption implements AfterViewInit, IDxTemplateHost { + @ContentChildren(PROPERTY_TOKEN_validationRules) + set _validationRulesContentChildren(value: QueryList) { + this.setChildren('validationRules', value); + } + + @ContentChildren(PROPERTY_TOKEN_tabs) + set _tabsContentChildren(value: QueryList) { + this.setChildren('tabs', value); + } + + @ContentChildren(PROPERTY_TOKEN_items) + set _itemsContentChildren(value: QueryList) { + this.setChildren('items', value); + } + @Input() - get cssClass(): string | undefined { - return this._getOption('cssClass'); + get badge(): string { + return this._getOption('badge'); } - set cssClass(value: string | undefined) { - this._setOption('cssClass', value); + set badge(value: string) { + this._setOption('badge', value); } @Input() @@ -73,6 +98,246 @@ export class DxiDataGridItemComponent extends CollectionNestedOption implements this._setOption('html', value); } + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get tabTemplate(): any { + return this._getOption('tabTemplate'); + } + set tabTemplate(value: any) { + this._setOption('tabTemplate', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get aiOptions(): { disabled?: boolean, instruction?: string | undefined } { + return this._getOption('aiOptions'); + } + set aiOptions(value: { disabled?: boolean, instruction?: string | undefined }) { + this._setOption('aiOptions', value); + } + + @Input() + get colSpan(): number | undefined { + return this._getOption('colSpan'); + } + set colSpan(value: number | undefined) { + this._setOption('colSpan', value); + } + + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get dataField(): string | undefined { + return this._getOption('dataField'); + } + set dataField(value: string | undefined) { + this._setOption('dataField', value); + } + + @Input() + get editorOptions(): any | undefined { + return this._getOption('editorOptions'); + } + set editorOptions(value: any | undefined) { + this._setOption('editorOptions', value); + } + + @Input() + get editorType(): FormItemComponent { + return this._getOption('editorType'); + } + set editorType(value: FormItemComponent) { + this._setOption('editorType', value); + } + + @Input() + get helpText(): string | undefined { + return this._getOption('helpText'); + } + set helpText(value: string | undefined) { + this._setOption('helpText', value); + } + + @Input() + get isRequired(): boolean | undefined { + return this._getOption('isRequired'); + } + set isRequired(value: boolean | undefined) { + this._setOption('isRequired', value); + } + + @Input() + get itemType(): FormItemType { + return this._getOption('itemType'); + } + set itemType(value: FormItemType) { + this._setOption('itemType', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, location?: LabelLocation, showColon?: boolean, template?: any, text?: string | undefined, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, location?: LabelLocation, showColon?: boolean, template?: any, text?: string | undefined, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get name(): string | undefined | FormPredefinedButtonItem | DataGridPredefinedToolbarItem { + return this._getOption('name'); + } + set name(value: string | undefined | FormPredefinedButtonItem | DataGridPredefinedToolbarItem) { + this._setOption('name', value); + } + + @Input() + get validationRules(): Array { + return this._getOption('validationRules'); + } + set validationRules(value: Array) { + this._setOption('validationRules', value); + } + + @Input() + get visibleIndex(): number | undefined { + return this._getOption('visibleIndex'); + } + set visibleIndex(value: number | undefined) { + this._setOption('visibleIndex', value); + } + + @Input() + get alignItemLabels(): boolean { + return this._getOption('alignItemLabels'); + } + set alignItemLabels(value: boolean) { + this._setOption('alignItemLabels', value); + } + + @Input() + get caption(): string | undefined { + return this._getOption('caption'); + } + set caption(value: string | undefined) { + this._setOption('caption', value); + } + + @Input() + get captionTemplate(): any { + return this._getOption('captionTemplate'); + } + set captionTemplate(value: any) { + this._setOption('captionTemplate', value); + } + + @Input() + get colCount(): number { + return this._getOption('colCount'); + } + set colCount(value: number) { + this._setOption('colCount', value); + } + + @Input() + get colCountByScreen(): { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined } { + return this._getOption('colCountByScreen'); + } + set colCountByScreen(value: { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined }) { + this._setOption('colCountByScreen', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get tabPanelOptions(): dxTabPanelOptions | undefined { + return this._getOption('tabPanelOptions'); + } + set tabPanelOptions(value: dxTabPanelOptions | undefined) { + this._setOption('tabPanelOptions', value); + } + + @Input() + get tabs(): { alignItemLabels?: boolean, badge?: string | undefined, colCount?: number, colCountByScreen?: { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined }, disabled?: boolean, icon?: string | undefined, items?: Array, tabTemplate?: any, template?: any, title?: string | undefined }[] { + return this._getOption('tabs'); + } + set tabs(value: { alignItemLabels?: boolean, badge?: string | undefined, colCount?: number, colCountByScreen?: { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined }, disabled?: boolean, icon?: string | undefined, items?: Array, tabTemplate?: any, template?: any, title?: string | undefined }[]) { + this._setOption('tabs', value); + } + + @Input() + get buttonOptions(): dxButtonOptions | undefined { + return this._getOption('buttonOptions'); + } + set buttonOptions(value: dxButtonOptions | undefined) { + this._setOption('buttonOptions', value); + } + + @Input() + get horizontalAlignment(): HorizontalAlignment { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalAlignment) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get verticalAlignment(): VerticalAlignment { + return this._getOption('verticalAlignment'); + } + set verticalAlignment(value: VerticalAlignment) { + this._setOption('verticalAlignment', value); + } + @Input() get locateInMenu(): LocateInMenuMode { return this._getOption('locateInMenu'); @@ -97,14 +362,6 @@ export class DxiDataGridItemComponent extends CollectionNestedOption implements this._setOption('menuItemTemplate', value); } - @Input() - get name(): DataGridPredefinedToolbarItem | string { - return this._getOption('name'); - } - set name(value: DataGridPredefinedToolbarItem | string) { - this._setOption('name', value); - } - @Input() get options(): any { return this._getOption('options'); @@ -121,30 +378,6 @@ export class DxiDataGridItemComponent extends CollectionNestedOption implements this._setOption('showText', value); } - @Input() - get template(): any { - return this._getOption('template'); - } - set template(value: any) { - this._setOption('template', value); - } - - @Input() - get text(): string { - return this._getOption('text'); - } - set text(value: string) { - this._setOption('text', value); - } - - @Input() - get visible(): boolean { - return this._getOption('visible'); - } - set visible(value: boolean) { - this._setOption('visible', value); - } - @Input() get widget(): ToolbarItemComponent { return this._getOption('widget'); diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/simple-item-dxi.ts b/packages/devextreme-angular/src/ui/data-grid/nested/simple-item-dxi.ts new file mode 100644 index 000000000000..652b051a9f1f --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/simple-item-dxi.ts @@ -0,0 +1,225 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input, + ContentChildren, + QueryList +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import * as CommonTypes from 'devextreme/common'; +import { FormItemComponent, FormItemType, LabelLocation } from 'devextreme/ui/form'; +import { HorizontalAlignment } from 'devextreme/common'; + +import { + DxIntegrationModule, + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + +import { PROPERTY_TOKEN_items } from 'devextreme-angular/core/tokens'; +import { + PROPERTY_TOKEN_validationRules, +} from 'devextreme-angular/core/tokens'; + +@Component({ + selector: 'dxi-data-grid-simple-item', + standalone: true, + template: '', + styles: [':host { display: block; }'], + imports: [ DxIntegrationModule ], + providers: [ + NestedOptionHost, + DxTemplateHost, + { + provide: PROPERTY_TOKEN_items, + useExisting: DxiDataGridSimpleItemComponent, + } + ] +}) +export class DxiDataGridSimpleItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @ContentChildren(PROPERTY_TOKEN_validationRules) + set _validationRulesContentChildren(value: QueryList) { + this.setChildren('validationRules', value); + } + + @Input() + get aiOptions(): { disabled?: boolean, instruction?: string | undefined } { + return this._getOption('aiOptions'); + } + set aiOptions(value: { disabled?: boolean, instruction?: string | undefined }) { + this._setOption('aiOptions', value); + } + + @Input() + get colSpan(): number | undefined { + return this._getOption('colSpan'); + } + set colSpan(value: number | undefined) { + this._setOption('colSpan', value); + } + + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get dataField(): string | undefined { + return this._getOption('dataField'); + } + set dataField(value: string | undefined) { + this._setOption('dataField', value); + } + + @Input() + get editorOptions(): any | undefined { + return this._getOption('editorOptions'); + } + set editorOptions(value: any | undefined) { + this._setOption('editorOptions', value); + } + + @Input() + get editorType(): FormItemComponent { + return this._getOption('editorType'); + } + set editorType(value: FormItemComponent) { + this._setOption('editorType', value); + } + + @Input() + get helpText(): string | undefined { + return this._getOption('helpText'); + } + set helpText(value: string | undefined) { + this._setOption('helpText', value); + } + + @Input() + get isRequired(): boolean | undefined { + return this._getOption('isRequired'); + } + set isRequired(value: boolean | undefined) { + this._setOption('isRequired', value); + } + + @Input() + get itemType(): FormItemType { + return this._getOption('itemType'); + } + set itemType(value: FormItemType) { + this._setOption('itemType', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, location?: LabelLocation, showColon?: boolean, template?: any, text?: string | undefined, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, location?: LabelLocation, showColon?: boolean, template?: any, text?: string | undefined, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get validationRules(): Array { + return this._getOption('validationRules'); + } + set validationRules(value: Array) { + this._setOption('validationRules', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get visibleIndex(): number | undefined { + return this._getOption('visibleIndex'); + } + set visibleIndex(value: number | undefined) { + this._setOption('visibleIndex', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + this.itemType = 'simple'; + + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + imports: [ + DxiDataGridSimpleItemComponent + ], + exports: [ + DxiDataGridSimpleItemComponent + ], +}) +export class DxiDataGridSimpleItemModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/summary-group-item-dxi.ts b/packages/devextreme-angular/src/ui/data-grid/nested/summary-group-item-dxi.ts new file mode 100644 index 000000000000..f7845d16082e --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/summary-group-item-dxi.ts @@ -0,0 +1,150 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { SummaryType } from 'devextreme/common/grids'; +import { Format } from 'devextreme/common/core/localization'; + +import { + DxIntegrationModule, + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + +import { PROPERTY_TOKEN_groupItems } from 'devextreme-angular/core/tokens'; + +@Component({ + selector: 'dxi-data-grid-summary-group-item', + standalone: true, + template: '', + styles: [''], + imports: [ DxIntegrationModule ], + providers: [ + NestedOptionHost, + { + provide: PROPERTY_TOKEN_groupItems, + useExisting: DxiDataGridSummaryGroupItemComponent, + } + ] +}) +export class DxiDataGridSummaryGroupItemComponent extends CollectionNestedOption { + @Input() + get alignByColumn(): boolean { + return this._getOption('alignByColumn'); + } + set alignByColumn(value: boolean) { + this._setOption('alignByColumn', value); + } + + @Input() + get column(): string | undefined { + return this._getOption('column'); + } + set column(value: string | undefined) { + this._setOption('column', value); + } + + @Input() + get customizeText(): ((itemInfo: { value: string | number | Date, valueText: string }) => string) { + return this._getOption('customizeText'); + } + set customizeText(value: ((itemInfo: { value: string | number | Date, valueText: string }) => string)) { + this._setOption('customizeText', value); + } + + @Input() + get displayFormat(): string | undefined { + return this._getOption('displayFormat'); + } + set displayFormat(value: string | undefined) { + this._setOption('displayFormat', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get showInColumn(): string | undefined { + return this._getOption('showInColumn'); + } + set showInColumn(value: string | undefined) { + this._setOption('showInColumn', value); + } + + @Input() + get showInGroupFooter(): boolean { + return this._getOption('showInGroupFooter'); + } + set showInGroupFooter(value: boolean) { + this._setOption('showInGroupFooter', value); + } + + @Input() + get skipEmptyValues(): boolean { + return this._getOption('skipEmptyValues'); + } + set skipEmptyValues(value: boolean) { + this._setOption('skipEmptyValues', value); + } + + @Input() + get summaryType(): string | SummaryType | undefined { + return this._getOption('summaryType'); + } + set summaryType(value: string | SummaryType | undefined) { + this._setOption('summaryType', value); + } + + @Input() + get valueFormat(): Format | undefined { + return this._getOption('valueFormat'); + } + set valueFormat(value: Format | undefined) { + this._setOption('valueFormat', value); + } + + + protected get _optionPath() { + return 'groupItems'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + imports: [ + DxiDataGridSummaryGroupItemComponent + ], + exports: [ + DxiDataGridSummaryGroupItemComponent + ], +}) +export class DxiDataGridSummaryGroupItemModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/tab-dxi.ts b/packages/devextreme-angular/src/ui/data-grid/nested/tab-dxi.ts new file mode 100644 index 000000000000..2b1768a2b942 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/tab-dxi.ts @@ -0,0 +1,181 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input, + ContentChildren, + QueryList +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { dxFormButtonItem, dxFormEmptyItem, dxFormGroupItem, dxFormSimpleItem, dxFormTabbedItem } from 'devextreme/ui/form'; + +import { + DxIntegrationModule, + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + +import { PROPERTY_TOKEN_tabs } from 'devextreme-angular/core/tokens'; +import { + PROPERTY_TOKEN_items, +} from 'devextreme-angular/core/tokens'; + +@Component({ + selector: 'dxi-data-grid-tab', + standalone: true, + template: '', + styles: [':host { display: block; }'], + imports: [ DxIntegrationModule ], + providers: [ + NestedOptionHost, + DxTemplateHost, + { + provide: PROPERTY_TOKEN_tabs, + useExisting: DxiDataGridTabComponent, + } + ] +}) +export class DxiDataGridTabComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @ContentChildren(PROPERTY_TOKEN_items) + set _itemsContentChildren(value: QueryList) { + this.setChildren('items', value); + } + + @Input() + get alignItemLabels(): boolean { + return this._getOption('alignItemLabels'); + } + set alignItemLabels(value: boolean) { + this._setOption('alignItemLabels', value); + } + + @Input() + get badge(): string | undefined { + return this._getOption('badge'); + } + set badge(value: string | undefined) { + this._setOption('badge', value); + } + + @Input() + get colCount(): number { + return this._getOption('colCount'); + } + set colCount(value: number) { + this._setOption('colCount', value); + } + + @Input() + get colCountByScreen(): { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined } { + return this._getOption('colCountByScreen'); + } + set colCountByScreen(value: { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined }) { + this._setOption('colCountByScreen', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get icon(): string | undefined { + return this._getOption('icon'); + } + set icon(value: string | undefined) { + this._setOption('icon', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get tabTemplate(): any { + return this._getOption('tabTemplate'); + } + set tabTemplate(value: any) { + this._setOption('tabTemplate', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get title(): string | undefined { + return this._getOption('title'); + } + set title(value: string | undefined) { + this._setOption('title', value); + } + + + protected get _optionPath() { + return 'tabs'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + imports: [ + DxiDataGridTabComponent + ], + exports: [ + DxiDataGridTabComponent + ], +}) +export class DxiDataGridTabModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/tab-panel-options-item-dxi.ts b/packages/devextreme-angular/src/ui/data-grid/nested/tab-panel-options-item-dxi.ts new file mode 100644 index 000000000000..eab4d8b24269 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/tab-panel-options-item-dxi.ts @@ -0,0 +1,162 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + + +import { + DxIntegrationModule, + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + +import { PROPERTY_TOKEN_items } from 'devextreme-angular/core/tokens'; + +@Component({ + selector: 'dxi-data-grid-tab-panel-options-item', + standalone: true, + template: '', + styles: [':host { display: block; }'], + imports: [ DxIntegrationModule ], + providers: [ + NestedOptionHost, + DxTemplateHost, + { + provide: PROPERTY_TOKEN_items, + useExisting: DxiDataGridTabPanelOptionsItemComponent, + } + ] +}) +export class DxiDataGridTabPanelOptionsItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get badge(): string { + return this._getOption('badge'); + } + set badge(value: string) { + this._setOption('badge', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get tabTemplate(): any { + return this._getOption('tabTemplate'); + } + set tabTemplate(value: any) { + this._setOption('tabTemplate', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + imports: [ + DxiDataGridTabPanelOptionsItemComponent + ], + exports: [ + DxiDataGridTabPanelOptionsItemComponent + ], +}) +export class DxiDataGridTabPanelOptionsItemModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/tab-panel-options.ts b/packages/devextreme-angular/src/ui/data-grid/nested/tab-panel-options.ts new file mode 100644 index 000000000000..9b4083c6dc45 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/tab-panel-options.ts @@ -0,0 +1,471 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + QueryList +} from '@angular/core'; + + + + +import DataSource from 'devextreme/data/data_source'; +import { dxTabPanelItem, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, OptionChangedEvent, SelectionChangedEvent, SelectionChangingEvent, TitleClickEvent, TitleHoldEvent, TitleRenderedEvent } from 'devextreme/ui/tab_panel'; +import { DataSourceOptions } from 'devextreme/data/data_source'; +import { Store } from 'devextreme/data/store'; +import { TabsIconPosition, TabsStyle, Position } from 'devextreme/common'; + +import { + DxIntegrationModule, + NestedOptionHost, + CollectionNestedOption, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + +import { + PROPERTY_TOKEN_items, +} from 'devextreme-angular/core/tokens'; + +@Component({ + selector: 'dxo-data-grid-tab-panel-options', + standalone: true, + template: '', + styles: [''], + imports: [ DxIntegrationModule ], + providers: [NestedOptionHost] +}) +export class DxoDataGridTabPanelOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @ContentChildren(PROPERTY_TOKEN_items) + set _itemsContentChildren(value: QueryList) { + this.setChildren('items', value); + } + + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get animationEnabled(): boolean { + return this._getOption('animationEnabled'); + } + set animationEnabled(value: boolean) { + this._setOption('animationEnabled', value); + } + + @Input() + get dataSource(): Array | DataSource | DataSourceOptions | null | Store | string { + return this._getOption('dataSource'); + } + set dataSource(value: Array | DataSource | DataSourceOptions | null | Store | string) { + this._setOption('dataSource', value); + } + + @Input() + get deferRendering(): boolean { + return this._getOption('deferRendering'); + } + set deferRendering(value: boolean) { + this._setOption('deferRendering', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): Record { + return this._getOption('elementAttr'); + } + set elementAttr(value: Record) { + this._setOption('elementAttr', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get height(): number | string | undefined { + return this._getOption('height'); + } + set height(value: number | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get iconPosition(): TabsIconPosition { + return this._getOption('iconPosition'); + } + set iconPosition(value: TabsIconPosition) { + this._setOption('iconPosition', value); + } + + @Input() + get itemHoldTimeout(): number { + return this._getOption('itemHoldTimeout'); + } + set itemHoldTimeout(value: number) { + this._setOption('itemHoldTimeout', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get itemTemplate(): any { + return this._getOption('itemTemplate'); + } + set itemTemplate(value: any) { + this._setOption('itemTemplate', value); + } + + @Input() + get itemTitleTemplate(): any { + return this._getOption('itemTitleTemplate'); + } + set itemTitleTemplate(value: any) { + this._setOption('itemTitleTemplate', value); + } + + @Input() + get keyExpr(): Function | string { + return this._getOption('keyExpr'); + } + set keyExpr(value: Function | string) { + this._setOption('keyExpr', value); + } + + @Input() + get loop(): boolean { + return this._getOption('loop'); + } + set loop(value: boolean) { + this._setOption('loop', value); + } + + @Input() + get noDataText(): string { + return this._getOption('noDataText'); + } + set noDataText(value: string) { + this._setOption('noDataText', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onItemClick(): ((e: ItemClickEvent) => void) { + return this._getOption('onItemClick'); + } + set onItemClick(value: ((e: ItemClickEvent) => void)) { + this._setOption('onItemClick', value); + } + + @Input() + get onItemContextMenu(): ((e: ItemContextMenuEvent) => void) { + return this._getOption('onItemContextMenu'); + } + set onItemContextMenu(value: ((e: ItemContextMenuEvent) => void)) { + this._setOption('onItemContextMenu', value); + } + + @Input() + get onItemHold(): ((e: ItemHoldEvent) => void) { + return this._getOption('onItemHold'); + } + set onItemHold(value: ((e: ItemHoldEvent) => void)) { + this._setOption('onItemHold', value); + } + + @Input() + get onItemRendered(): ((e: ItemRenderedEvent) => void) { + return this._getOption('onItemRendered'); + } + set onItemRendered(value: ((e: ItemRenderedEvent) => void)) { + this._setOption('onItemRendered', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onSelectionChanged(): ((e: SelectionChangedEvent) => void) { + return this._getOption('onSelectionChanged'); + } + set onSelectionChanged(value: ((e: SelectionChangedEvent) => void)) { + this._setOption('onSelectionChanged', value); + } + + @Input() + get onSelectionChanging(): ((e: SelectionChangingEvent) => void) { + return this._getOption('onSelectionChanging'); + } + set onSelectionChanging(value: ((e: SelectionChangingEvent) => void)) { + this._setOption('onSelectionChanging', value); + } + + @Input() + get onTitleClick(): ((e: TitleClickEvent) => void) { + return this._getOption('onTitleClick'); + } + set onTitleClick(value: ((e: TitleClickEvent) => void)) { + this._setOption('onTitleClick', value); + } + + @Input() + get onTitleHold(): ((e: TitleHoldEvent) => void) { + return this._getOption('onTitleHold'); + } + set onTitleHold(value: ((e: TitleHoldEvent) => void)) { + this._setOption('onTitleHold', value); + } + + @Input() + get onTitleRendered(): ((e: TitleRenderedEvent) => void) { + return this._getOption('onTitleRendered'); + } + set onTitleRendered(value: ((e: TitleRenderedEvent) => void)) { + this._setOption('onTitleRendered', value); + } + + @Input() + get repaintChangesOnly(): boolean { + return this._getOption('repaintChangesOnly'); + } + set repaintChangesOnly(value: boolean) { + this._setOption('repaintChangesOnly', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get scrollByContent(): boolean { + return this._getOption('scrollByContent'); + } + set scrollByContent(value: boolean) { + this._setOption('scrollByContent', value); + } + + @Input() + get scrollingEnabled(): boolean { + return this._getOption('scrollingEnabled'); + } + set scrollingEnabled(value: boolean) { + this._setOption('scrollingEnabled', value); + } + + @Input() + get selectedIndex(): number { + return this._getOption('selectedIndex'); + } + set selectedIndex(value: number) { + this._setOption('selectedIndex', value); + } + + @Input() + get selectedItem(): any { + return this._getOption('selectedItem'); + } + set selectedItem(value: any) { + this._setOption('selectedItem', value); + } + + @Input() + get showNavButtons(): boolean { + return this._getOption('showNavButtons'); + } + set showNavButtons(value: boolean) { + this._setOption('showNavButtons', value); + } + + @Input() + get stylingMode(): TabsStyle { + return this._getOption('stylingMode'); + } + set stylingMode(value: TabsStyle) { + this._setOption('stylingMode', value); + } + + @Input() + get swipeEnabled(): boolean { + return this._getOption('swipeEnabled'); + } + set swipeEnabled(value: boolean) { + this._setOption('swipeEnabled', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get tabsPosition(): Position { + return this._getOption('tabsPosition'); + } + set tabsPosition(value: Position) { + this._setOption('tabsPosition', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | string | undefined { + return this._getOption('width'); + } + set width(value: number | string | undefined) { + this._setOption('width', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() itemsChange: EventEmitter>; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() selectedIndexChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() selectedItemChange: EventEmitter; + protected get _optionPath() { + return 'tabPanelOptions'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + this._createEventEmitters([ + { emit: 'itemsChange' }, + { emit: 'selectedIndexChange' }, + { emit: 'selectedItemChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + imports: [ + DxoDataGridTabPanelOptionsComponent + ], + exports: [ + DxoDataGridTabPanelOptionsComponent + ], +}) +export class DxoDataGridTabPanelOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/data-grid/nested/tabbed-item-dxi.ts b/packages/devextreme-angular/src/ui/data-grid/nested/tabbed-item-dxi.ts new file mode 100644 index 000000000000..110a5a82e058 --- /dev/null +++ b/packages/devextreme-angular/src/ui/data-grid/nested/tabbed-item-dxi.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + QueryList +} from '@angular/core'; + + + + +import { FormItemType, dxFormButtonItem, dxFormEmptyItem, dxFormGroupItem, dxFormSimpleItem, dxFormTabbedItem } from 'devextreme/ui/form'; +import { dxTabPanelOptions } from 'devextreme/ui/tab_panel'; + +import { + DxIntegrationModule, + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + +import { PROPERTY_TOKEN_items } from 'devextreme-angular/core/tokens'; +import { + PROPERTY_TOKEN_tabs, +} from 'devextreme-angular/core/tokens'; + +@Component({ + selector: 'dxi-data-grid-tabbed-item', + standalone: true, + template: '', + styles: [''], + imports: [ DxIntegrationModule ], + providers: [ + NestedOptionHost, + { + provide: PROPERTY_TOKEN_items, + useExisting: DxiDataGridTabbedItemComponent, + } + ] +}) +export class DxiDataGridTabbedItemComponent extends CollectionNestedOption { + @ContentChildren(PROPERTY_TOKEN_tabs) + set _tabsContentChildren(value: QueryList) { + this.setChildren('tabs', value); + } + + @Input() + get colSpan(): number | undefined { + return this._getOption('colSpan'); + } + set colSpan(value: number | undefined) { + this._setOption('colSpan', value); + } + + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get itemType(): FormItemType { + return this._getOption('itemType'); + } + set itemType(value: FormItemType) { + this._setOption('itemType', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get tabPanelOptions(): dxTabPanelOptions | undefined { + return this._getOption('tabPanelOptions'); + } + set tabPanelOptions(value: dxTabPanelOptions | undefined) { + this._setOption('tabPanelOptions', value); + } + + @Input() + get tabs(): { alignItemLabels?: boolean, badge?: string | undefined, colCount?: number, colCountByScreen?: { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined }, disabled?: boolean, icon?: string | undefined, items?: Array, tabTemplate?: any, template?: any, title?: string | undefined }[] { + return this._getOption('tabs'); + } + set tabs(value: { alignItemLabels?: boolean, badge?: string | undefined, colCount?: number, colCountByScreen?: { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined }, disabled?: boolean, icon?: string | undefined, items?: Array, tabTemplate?: any, template?: any, title?: string | undefined }[]) { + this._setOption('tabs', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get visibleIndex(): number | undefined { + return this._getOption('visibleIndex'); + } + set visibleIndex(value: number | undefined) { + this._setOption('visibleIndex', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + this.itemType = 'tabbed'; + + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + imports: [ + DxiDataGridTabbedItemComponent + ], + exports: [ + DxiDataGridTabbedItemComponent + ], +}) +export class DxiDataGridTabbedItemModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/index.ts b/packages/devextreme-angular/src/ui/tree-list/index.ts index 3dc1135d7719..538c25e31eb6 100644 --- a/packages/devextreme-angular/src/ui/tree-list/index.ts +++ b/packages/devextreme-angular/src/ui/tree-list/index.ts @@ -116,6 +116,8 @@ import { DxiTreeListAsyncRuleModule } from 'devextreme-angular/ui/tree-list/nest import { DxoTreeListAtModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxoTreeListBoundaryOffsetModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxiTreeListButtonModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxiTreeListButtonItemModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListButtonOptionsModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxiTreeListChangeModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxoTreeListColCountByScreenModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxoTreeListCollisionModule } from 'devextreme-angular/ui/tree-list/nested'; @@ -138,6 +140,7 @@ import { DxoTreeListEditingTextsModule } from 'devextreme-angular/ui/tree-list/n import { DxoTreeListEditorOptionsModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxiTreeListEditorOptionsButtonModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxiTreeListEmailRuleModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxiTreeListEmptyItemModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxiTreeListFieldModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxoTreeListFieldLookupModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxoTreeListFilterBuilderModule } from 'devextreme-angular/ui/tree-list/nested'; @@ -150,6 +153,7 @@ import { DxoTreeListFormModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxoTreeListFormatModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxoTreeListFormItemModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxoTreeListFromModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxiTreeListGroupItemModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxoTreeListGroupOperationDescriptionsModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxoTreeListHeaderFilterModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxoTreeListHideModule } from 'devextreme-angular/ui/tree-list/nested'; @@ -179,9 +183,14 @@ import { DxoTreeListSearchModule } from 'devextreme-angular/ui/tree-list/nested' import { DxoTreeListSearchPanelModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxoTreeListSelectionModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxoTreeListShowModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxiTreeListSimpleItemModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxoTreeListSortingModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxoTreeListStateStoringModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxiTreeListStringLengthRuleModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxiTreeListTabModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxiTreeListTabbedItemModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxoTreeListTabPanelOptionsModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxiTreeListTabPanelOptionsItemModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxoTreeListTextsModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxoTreeListToModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxoTreeListToolbarModule } from 'devextreme-angular/ui/tree-list/nested'; @@ -190,15 +199,17 @@ import { DxoTreeListTreeListHeaderFilterModule } from 'devextreme-angular/ui/tre import { DxoTreeListTreeListHeaderFilterSearchModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxoTreeListTreeListHeaderFilterTextsModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxoTreeListTreeListSelectionModule } from 'devextreme-angular/ui/tree-list/nested'; +import { DxiTreeListTreeListToolbarItemModule } from 'devextreme-angular/ui/tree-list/nested'; import { DxiTreeListValidationRuleModule } from 'devextreme-angular/ui/tree-list/nested'; import { PROPERTY_TOKEN_validationRules, PROPERTY_TOKEN_buttons, + PROPERTY_TOKEN_items, PROPERTY_TOKEN_changes, PROPERTY_TOKEN_columns, PROPERTY_TOKEN_customOperations, PROPERTY_TOKEN_fields, - PROPERTY_TOKEN_items, + PROPERTY_TOKEN_tabs, PROPERTY_TOKEN_toolbarItems, } from 'devextreme-angular/core/tokens'; @@ -232,6 +243,11 @@ export class DxTreeListComponent extends DxComponent this.setChildren('buttons', value); } + @ContentChildren(PROPERTY_TOKEN_items) + set _itemsContentChildren(value: QueryList) { + this.setChildren('items', value); + } + @ContentChildren(PROPERTY_TOKEN_changes) set _changesContentChildren(value: QueryList) { this.setChildren('changes', value); @@ -252,9 +268,9 @@ export class DxTreeListComponent extends DxComponent this.setChildren('fields', value); } - @ContentChildren(PROPERTY_TOKEN_items) - set _itemsContentChildren(value: QueryList) { - this.setChildren('items', value); + @ContentChildren(PROPERTY_TOKEN_tabs) + set _tabsContentChildren(value: QueryList) { + this.setChildren('tabs', value); } @ContentChildren(PROPERTY_TOKEN_toolbarItems) @@ -2367,6 +2383,8 @@ export class DxTreeListComponent extends DxComponent DxoTreeListAtModule, DxoTreeListBoundaryOffsetModule, DxiTreeListButtonModule, + DxiTreeListButtonItemModule, + DxoTreeListButtonOptionsModule, DxiTreeListChangeModule, DxoTreeListColCountByScreenModule, DxoTreeListCollisionModule, @@ -2389,6 +2407,7 @@ export class DxTreeListComponent extends DxComponent DxoTreeListEditorOptionsModule, DxiTreeListEditorOptionsButtonModule, DxiTreeListEmailRuleModule, + DxiTreeListEmptyItemModule, DxiTreeListFieldModule, DxoTreeListFieldLookupModule, DxoTreeListFilterBuilderModule, @@ -2401,6 +2420,7 @@ export class DxTreeListComponent extends DxComponent DxoTreeListFormatModule, DxoTreeListFormItemModule, DxoTreeListFromModule, + DxiTreeListGroupItemModule, DxoTreeListGroupOperationDescriptionsModule, DxoTreeListHeaderFilterModule, DxoTreeListHideModule, @@ -2430,9 +2450,14 @@ export class DxTreeListComponent extends DxComponent DxoTreeListSearchPanelModule, DxoTreeListSelectionModule, DxoTreeListShowModule, + DxiTreeListSimpleItemModule, DxoTreeListSortingModule, DxoTreeListStateStoringModule, DxiTreeListStringLengthRuleModule, + DxiTreeListTabModule, + DxiTreeListTabbedItemModule, + DxoTreeListTabPanelOptionsModule, + DxiTreeListTabPanelOptionsItemModule, DxoTreeListTextsModule, DxoTreeListToModule, DxoTreeListToolbarModule, @@ -2441,6 +2466,7 @@ export class DxTreeListComponent extends DxComponent DxoTreeListTreeListHeaderFilterSearchModule, DxoTreeListTreeListHeaderFilterTextsModule, DxoTreeListTreeListSelectionModule, + DxiTreeListTreeListToolbarItemModule, DxiTreeListValidationRuleModule, DxIntegrationModule, DxTemplateModule @@ -2509,6 +2535,8 @@ export class DxTreeListComponent extends DxComponent DxoTreeListAtModule, DxoTreeListBoundaryOffsetModule, DxiTreeListButtonModule, + DxiTreeListButtonItemModule, + DxoTreeListButtonOptionsModule, DxiTreeListChangeModule, DxoTreeListColCountByScreenModule, DxoTreeListCollisionModule, @@ -2531,6 +2559,7 @@ export class DxTreeListComponent extends DxComponent DxoTreeListEditorOptionsModule, DxiTreeListEditorOptionsButtonModule, DxiTreeListEmailRuleModule, + DxiTreeListEmptyItemModule, DxiTreeListFieldModule, DxoTreeListFieldLookupModule, DxoTreeListFilterBuilderModule, @@ -2543,6 +2572,7 @@ export class DxTreeListComponent extends DxComponent DxoTreeListFormatModule, DxoTreeListFormItemModule, DxoTreeListFromModule, + DxiTreeListGroupItemModule, DxoTreeListGroupOperationDescriptionsModule, DxoTreeListHeaderFilterModule, DxoTreeListHideModule, @@ -2572,9 +2602,14 @@ export class DxTreeListComponent extends DxComponent DxoTreeListSearchPanelModule, DxoTreeListSelectionModule, DxoTreeListShowModule, + DxiTreeListSimpleItemModule, DxoTreeListSortingModule, DxoTreeListStateStoringModule, DxiTreeListStringLengthRuleModule, + DxiTreeListTabModule, + DxiTreeListTabbedItemModule, + DxoTreeListTabPanelOptionsModule, + DxiTreeListTabPanelOptionsItemModule, DxoTreeListTextsModule, DxoTreeListToModule, DxoTreeListToolbarModule, @@ -2583,6 +2618,7 @@ export class DxTreeListComponent extends DxComponent DxoTreeListTreeListHeaderFilterSearchModule, DxoTreeListTreeListHeaderFilterTextsModule, DxoTreeListTreeListSelectionModule, + DxiTreeListTreeListToolbarItemModule, DxiTreeListValidationRuleModule, DxTemplateModule ] diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/button-item-dxi.ts b/packages/devextreme-angular/src/ui/tree-list/nested/button-item-dxi.ts new file mode 100644 index 000000000000..3ad118de5e11 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/button-item-dxi.ts @@ -0,0 +1,145 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { dxButtonOptions } from 'devextreme/ui/button'; +import { HorizontalAlignment, VerticalAlignment } from 'devextreme/common'; +import { FormItemType, FormPredefinedButtonItem } from 'devextreme/ui/form'; + +import { + DxIntegrationModule, + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + +import { PROPERTY_TOKEN_items } from 'devextreme-angular/core/tokens'; + +@Component({ + selector: 'dxi-tree-list-button-item', + standalone: true, + template: '', + styles: [''], + imports: [ DxIntegrationModule ], + providers: [ + NestedOptionHost, + { + provide: PROPERTY_TOKEN_items, + useExisting: DxiTreeListButtonItemComponent, + } + ] +}) +export class DxiTreeListButtonItemComponent extends CollectionNestedOption { + @Input() + get buttonOptions(): dxButtonOptions | undefined { + return this._getOption('buttonOptions'); + } + set buttonOptions(value: dxButtonOptions | undefined) { + this._setOption('buttonOptions', value); + } + + @Input() + get colSpan(): number | undefined { + return this._getOption('colSpan'); + } + set colSpan(value: number | undefined) { + this._setOption('colSpan', value); + } + + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get horizontalAlignment(): HorizontalAlignment { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalAlignment) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get itemType(): FormItemType { + return this._getOption('itemType'); + } + set itemType(value: FormItemType) { + this._setOption('itemType', value); + } + + @Input() + get name(): FormPredefinedButtonItem | string | undefined { + return this._getOption('name'); + } + set name(value: FormPredefinedButtonItem | string | undefined) { + this._setOption('name', value); + } + + @Input() + get verticalAlignment(): VerticalAlignment { + return this._getOption('verticalAlignment'); + } + set verticalAlignment(value: VerticalAlignment) { + this._setOption('verticalAlignment', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get visibleIndex(): number | undefined { + return this._getOption('visibleIndex'); + } + set visibleIndex(value: number | undefined) { + this._setOption('visibleIndex', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + this.itemType = 'button'; + + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + imports: [ + DxiTreeListButtonItemComponent + ], + exports: [ + DxiTreeListButtonItemComponent + ], +}) +export class DxiTreeListButtonItemModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/button-options.ts b/packages/devextreme-angular/src/ui/tree-list/nested/button-options.ts new file mode 100644 index 000000000000..9b7f7b407d94 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/button-options.ts @@ -0,0 +1,282 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { ClickEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent } from 'devextreme/ui/button'; +import { ButtonStyle, ButtonType } from 'devextreme/common'; + +import { + DxIntegrationModule, + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + + +@Component({ + selector: 'dxo-tree-list-button-options', + standalone: true, + template: '', + styles: [':host { display: block; }'], + imports: [ DxIntegrationModule ], + providers: [NestedOptionHost, DxTemplateHost] +}) +export class DxoTreeListButtonOptionsComponent extends NestedOption implements AfterViewInit, OnDestroy, OnInit, + IDxTemplateHost { + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): Record { + return this._getOption('elementAttr'); + } + set elementAttr(value: Record) { + this._setOption('elementAttr', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get height(): number | string | undefined { + return this._getOption('height'); + } + set height(value: number | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get onClick(): ((e: ClickEvent) => void) { + return this._getOption('onClick'); + } + set onClick(value: ((e: ClickEvent) => void)) { + this._setOption('onClick', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get stylingMode(): ButtonStyle { + return this._getOption('stylingMode'); + } + set stylingMode(value: ButtonStyle) { + this._setOption('stylingMode', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get type(): ButtonType | string { + return this._getOption('type'); + } + set type(value: ButtonType | string) { + this._setOption('type', value); + } + + @Input() + get useSubmitBehavior(): boolean { + return this._getOption('useSubmitBehavior'); + } + set useSubmitBehavior(value: boolean) { + this._setOption('useSubmitBehavior', value); + } + + @Input() + get validationGroup(): string | undefined { + return this._getOption('validationGroup'); + } + set validationGroup(value: string | undefined) { + this._setOption('validationGroup', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | string | undefined { + return this._getOption('width'); + } + set width(value: number | string | undefined) { + this._setOption('width', value); + } + + + protected get _optionPath() { + return 'buttonOptions'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + imports: [ + DxoTreeListButtonOptionsComponent + ], + exports: [ + DxoTreeListButtonOptionsComponent + ], +}) +export class DxoTreeListButtonOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/empty-item-dxi.ts b/packages/devextreme-angular/src/ui/tree-list/nested/empty-item-dxi.ts new file mode 100644 index 000000000000..c4a88b20d881 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/empty-item-dxi.ts @@ -0,0 +1,119 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input +} from '@angular/core'; + + + + +import { FormItemType } from 'devextreme/ui/form'; + +import { + DxIntegrationModule, + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + +import { PROPERTY_TOKEN_items } from 'devextreme-angular/core/tokens'; + +@Component({ + selector: 'dxi-tree-list-empty-item', + standalone: true, + template: '', + styles: [''], + imports: [ DxIntegrationModule ], + providers: [ + NestedOptionHost, + { + provide: PROPERTY_TOKEN_items, + useExisting: DxiTreeListEmptyItemComponent, + } + ] +}) +export class DxiTreeListEmptyItemComponent extends CollectionNestedOption { + @Input() + get colSpan(): number | undefined { + return this._getOption('colSpan'); + } + set colSpan(value: number | undefined) { + this._setOption('colSpan', value); + } + + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get itemType(): FormItemType { + return this._getOption('itemType'); + } + set itemType(value: FormItemType) { + this._setOption('itemType', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get visibleIndex(): number | undefined { + return this._getOption('visibleIndex'); + } + set visibleIndex(value: number | undefined) { + this._setOption('visibleIndex', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + this.itemType = 'empty'; + + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + imports: [ + DxiTreeListEmptyItemComponent + ], + exports: [ + DxiTreeListEmptyItemComponent + ], +}) +export class DxiTreeListEmptyItemModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/form.ts b/packages/devextreme-angular/src/ui/tree-list/nested/form.ts index 5fe11964ac54..959c3ba1fde2 100644 --- a/packages/devextreme-angular/src/ui/tree-list/nested/form.ts +++ b/packages/devextreme-angular/src/ui/tree-list/nested/form.ts @@ -10,7 +10,9 @@ import { SkipSelf, Input, Output, - EventEmitter + EventEmitter, + ContentChildren, + QueryList } from '@angular/core'; @@ -23,9 +25,13 @@ import { dxFormSimpleItem, dxFormGroupItem, dxFormTabbedItem, dxFormEmptyItem, d import { DxIntegrationModule, NestedOptionHost, + CollectionNestedOption, } from 'devextreme-angular/core'; import { NestedOption } from 'devextreme-angular/core'; +import { + PROPERTY_TOKEN_items, +} from 'devextreme-angular/core/tokens'; @Component({ selector: 'dxo-tree-list-form', @@ -36,6 +42,11 @@ import { NestedOption } from 'devextreme-angular/core'; providers: [NestedOptionHost] }) export class DxoTreeListFormComponent extends NestedOption implements OnDestroy, OnInit { + @ContentChildren(PROPERTY_TOKEN_items) + set _itemsContentChildren(value: QueryList) { + this.setChildren('items', value); + } + @Input() get accessKey(): string | undefined { return this._getOption('accessKey'); diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/group-item-dxi.ts b/packages/devextreme-angular/src/ui/tree-list/nested/group-item-dxi.ts new file mode 100644 index 000000000000..ebf088063f5e --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/group-item-dxi.ts @@ -0,0 +1,206 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input, + ContentChildren, + QueryList +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { dxFormButtonItem, dxFormEmptyItem, dxFormGroupItem, dxFormSimpleItem, dxFormTabbedItem, FormItemType } from 'devextreme/ui/form'; + +import { + DxIntegrationModule, + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + +import { + PROPERTY_TOKEN_items, +} from 'devextreme-angular/core/tokens'; + +@Component({ + selector: 'dxi-tree-list-group-item', + standalone: true, + template: '', + styles: [':host { display: block; }'], + imports: [ DxIntegrationModule ], + providers: [ + NestedOptionHost, + DxTemplateHost, + { + provide: PROPERTY_TOKEN_items, + useExisting: DxiTreeListGroupItemComponent, + } + ] +}) +export class DxiTreeListGroupItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @ContentChildren(PROPERTY_TOKEN_items) + set _itemsContentChildren(value: QueryList) { + this.setChildren('items', value); + } + + @Input() + get alignItemLabels(): boolean { + return this._getOption('alignItemLabels'); + } + set alignItemLabels(value: boolean) { + this._setOption('alignItemLabels', value); + } + + @Input() + get caption(): string | undefined { + return this._getOption('caption'); + } + set caption(value: string | undefined) { + this._setOption('caption', value); + } + + @Input() + get captionTemplate(): any { + return this._getOption('captionTemplate'); + } + set captionTemplate(value: any) { + this._setOption('captionTemplate', value); + } + + @Input() + get colCount(): number { + return this._getOption('colCount'); + } + set colCount(value: number) { + this._setOption('colCount', value); + } + + @Input() + get colCountByScreen(): { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined } { + return this._getOption('colCountByScreen'); + } + set colCountByScreen(value: { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined }) { + this._setOption('colCountByScreen', value); + } + + @Input() + get colSpan(): number | undefined { + return this._getOption('colSpan'); + } + set colSpan(value: number | undefined) { + this._setOption('colSpan', value); + } + + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get itemType(): FormItemType { + return this._getOption('itemType'); + } + set itemType(value: FormItemType) { + this._setOption('itemType', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get visibleIndex(): number | undefined { + return this._getOption('visibleIndex'); + } + set visibleIndex(value: number | undefined) { + this._setOption('visibleIndex', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + this.itemType = 'group'; + + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + imports: [ + DxiTreeListGroupItemComponent + ], + exports: [ + DxiTreeListGroupItemComponent + ], +}) +export class DxiTreeListGroupItemModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/index.ts b/packages/devextreme-angular/src/ui/tree-list/nested/index.ts index 1602e75ef8f4..017f7f2588f9 100644 --- a/packages/devextreme-angular/src/ui/tree-list/nested/index.ts +++ b/packages/devextreme-angular/src/ui/tree-list/nested/index.ts @@ -5,6 +5,8 @@ export * from './async-rule-dxi'; export * from './at'; export * from './boundary-offset'; export * from './button-dxi'; +export * from './button-item-dxi'; +export * from './button-options'; export * from './change-dxi'; export * from './col-count-by-screen'; export * from './collision'; @@ -27,6 +29,7 @@ export * from './editing'; export * from './editor-options-button-dxi'; export * from './editor-options'; export * from './email-rule-dxi'; +export * from './empty-item-dxi'; export * from './field-dxi'; export * from './field-lookup'; export * from './filter-builder-popup'; @@ -39,6 +42,7 @@ export * from './form-item'; export * from './form'; export * from './format'; export * from './from'; +export * from './group-item-dxi'; export * from './group-operation-descriptions'; export * from './header-filter'; export * from './hide'; @@ -68,9 +72,14 @@ export * from './search-panel'; export * from './search'; export * from './selection'; export * from './show'; +export * from './simple-item-dxi'; export * from './sorting'; export * from './state-storing'; export * from './string-length-rule-dxi'; +export * from './tab-dxi'; +export * from './tab-panel-options-item-dxi'; +export * from './tab-panel-options'; +export * from './tabbed-item-dxi'; export * from './texts'; export * from './to'; export * from './toolbar-item-dxi'; @@ -79,5 +88,6 @@ export * from './tree-list-header-filter-search'; export * from './tree-list-header-filter-texts'; export * from './tree-list-header-filter'; export * from './tree-list-selection'; +export * from './tree-list-toolbar-item-dxi'; export * from './validation-rule-dxi'; diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/item-dxi.ts b/packages/devextreme-angular/src/ui/tree-list/nested/item-dxi.ts index b55f5bb0c9f9..fe230d84e0ca 100644 --- a/packages/devextreme-angular/src/ui/tree-list/nested/item-dxi.ts +++ b/packages/devextreme-angular/src/ui/tree-list/nested/item-dxi.ts @@ -10,15 +10,21 @@ import { Inject, AfterViewInit, SkipSelf, - Input + Input, + ContentChildren, + QueryList } from '@angular/core'; import { DOCUMENT } from '@angular/common'; -import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; -import { ToolbarItemLocation, ToolbarItemComponent } from 'devextreme/common'; +import * as CommonTypes from 'devextreme/common'; +import { FormItemComponent, FormItemType, LabelLocation, FormPredefinedButtonItem, dxFormButtonItem, dxFormEmptyItem, dxFormGroupItem, dxFormSimpleItem, dxFormTabbedItem } from 'devextreme/ui/form'; +import { HorizontalAlignment, VerticalAlignment, ToolbarItemLocation, ToolbarItemComponent } from 'devextreme/common'; import { TreeListPredefinedToolbarItem } from 'devextreme/ui/tree_list'; +import { dxTabPanelOptions } from 'devextreme/ui/tab_panel'; +import { dxButtonOptions } from 'devextreme/ui/button'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; import { DxIntegrationModule, @@ -30,7 +36,11 @@ import { } from 'devextreme-angular/core'; import { CollectionNestedOption } from 'devextreme-angular/core'; -import { PROPERTY_TOKEN_items } from 'devextreme-angular/core/tokens'; +import { + PROPERTY_TOKEN_validationRules, + PROPERTY_TOKEN_tabs, + PROPERTY_TOKEN_items, +} from 'devextreme-angular/core/tokens'; @Component({ selector: 'dxi-tree-list-item', @@ -49,12 +59,27 @@ import { PROPERTY_TOKEN_items } from 'devextreme-angular/core/tokens'; }) export class DxiTreeListItemComponent extends CollectionNestedOption implements AfterViewInit, IDxTemplateHost { + @ContentChildren(PROPERTY_TOKEN_validationRules) + set _validationRulesContentChildren(value: QueryList) { + this.setChildren('validationRules', value); + } + + @ContentChildren(PROPERTY_TOKEN_tabs) + set _tabsContentChildren(value: QueryList) { + this.setChildren('tabs', value); + } + + @ContentChildren(PROPERTY_TOKEN_items) + set _itemsContentChildren(value: QueryList) { + this.setChildren('items', value); + } + @Input() - get cssClass(): string | undefined { - return this._getOption('cssClass'); + get badge(): string { + return this._getOption('badge'); } - set cssClass(value: string | undefined) { - this._setOption('cssClass', value); + set badge(value: string) { + this._setOption('badge', value); } @Input() @@ -73,6 +98,246 @@ export class DxiTreeListItemComponent extends CollectionNestedOption implements this._setOption('html', value); } + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get tabTemplate(): any { + return this._getOption('tabTemplate'); + } + set tabTemplate(value: any) { + this._setOption('tabTemplate', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get aiOptions(): { disabled?: boolean, instruction?: string | undefined } { + return this._getOption('aiOptions'); + } + set aiOptions(value: { disabled?: boolean, instruction?: string | undefined }) { + this._setOption('aiOptions', value); + } + + @Input() + get colSpan(): number | undefined { + return this._getOption('colSpan'); + } + set colSpan(value: number | undefined) { + this._setOption('colSpan', value); + } + + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get dataField(): string | undefined { + return this._getOption('dataField'); + } + set dataField(value: string | undefined) { + this._setOption('dataField', value); + } + + @Input() + get editorOptions(): any | undefined { + return this._getOption('editorOptions'); + } + set editorOptions(value: any | undefined) { + this._setOption('editorOptions', value); + } + + @Input() + get editorType(): FormItemComponent { + return this._getOption('editorType'); + } + set editorType(value: FormItemComponent) { + this._setOption('editorType', value); + } + + @Input() + get helpText(): string | undefined { + return this._getOption('helpText'); + } + set helpText(value: string | undefined) { + this._setOption('helpText', value); + } + + @Input() + get isRequired(): boolean | undefined { + return this._getOption('isRequired'); + } + set isRequired(value: boolean | undefined) { + this._setOption('isRequired', value); + } + + @Input() + get itemType(): FormItemType { + return this._getOption('itemType'); + } + set itemType(value: FormItemType) { + this._setOption('itemType', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, location?: LabelLocation, showColon?: boolean, template?: any, text?: string | undefined, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, location?: LabelLocation, showColon?: boolean, template?: any, text?: string | undefined, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get name(): string | undefined | FormPredefinedButtonItem | TreeListPredefinedToolbarItem { + return this._getOption('name'); + } + set name(value: string | undefined | FormPredefinedButtonItem | TreeListPredefinedToolbarItem) { + this._setOption('name', value); + } + + @Input() + get validationRules(): Array { + return this._getOption('validationRules'); + } + set validationRules(value: Array) { + this._setOption('validationRules', value); + } + + @Input() + get visibleIndex(): number | undefined { + return this._getOption('visibleIndex'); + } + set visibleIndex(value: number | undefined) { + this._setOption('visibleIndex', value); + } + + @Input() + get alignItemLabels(): boolean { + return this._getOption('alignItemLabels'); + } + set alignItemLabels(value: boolean) { + this._setOption('alignItemLabels', value); + } + + @Input() + get caption(): string | undefined { + return this._getOption('caption'); + } + set caption(value: string | undefined) { + this._setOption('caption', value); + } + + @Input() + get captionTemplate(): any { + return this._getOption('captionTemplate'); + } + set captionTemplate(value: any) { + this._setOption('captionTemplate', value); + } + + @Input() + get colCount(): number { + return this._getOption('colCount'); + } + set colCount(value: number) { + this._setOption('colCount', value); + } + + @Input() + get colCountByScreen(): { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined } { + return this._getOption('colCountByScreen'); + } + set colCountByScreen(value: { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined }) { + this._setOption('colCountByScreen', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get tabPanelOptions(): dxTabPanelOptions | undefined { + return this._getOption('tabPanelOptions'); + } + set tabPanelOptions(value: dxTabPanelOptions | undefined) { + this._setOption('tabPanelOptions', value); + } + + @Input() + get tabs(): { alignItemLabels?: boolean, badge?: string | undefined, colCount?: number, colCountByScreen?: { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined }, disabled?: boolean, icon?: string | undefined, items?: Array, tabTemplate?: any, template?: any, title?: string | undefined }[] { + return this._getOption('tabs'); + } + set tabs(value: { alignItemLabels?: boolean, badge?: string | undefined, colCount?: number, colCountByScreen?: { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined }, disabled?: boolean, icon?: string | undefined, items?: Array, tabTemplate?: any, template?: any, title?: string | undefined }[]) { + this._setOption('tabs', value); + } + + @Input() + get buttonOptions(): dxButtonOptions | undefined { + return this._getOption('buttonOptions'); + } + set buttonOptions(value: dxButtonOptions | undefined) { + this._setOption('buttonOptions', value); + } + + @Input() + get horizontalAlignment(): HorizontalAlignment { + return this._getOption('horizontalAlignment'); + } + set horizontalAlignment(value: HorizontalAlignment) { + this._setOption('horizontalAlignment', value); + } + + @Input() + get verticalAlignment(): VerticalAlignment { + return this._getOption('verticalAlignment'); + } + set verticalAlignment(value: VerticalAlignment) { + this._setOption('verticalAlignment', value); + } + @Input() get locateInMenu(): LocateInMenuMode { return this._getOption('locateInMenu'); @@ -97,14 +362,6 @@ export class DxiTreeListItemComponent extends CollectionNestedOption implements this._setOption('menuItemTemplate', value); } - @Input() - get name(): string | TreeListPredefinedToolbarItem { - return this._getOption('name'); - } - set name(value: string | TreeListPredefinedToolbarItem) { - this._setOption('name', value); - } - @Input() get options(): any { return this._getOption('options'); @@ -121,30 +378,6 @@ export class DxiTreeListItemComponent extends CollectionNestedOption implements this._setOption('showText', value); } - @Input() - get template(): any { - return this._getOption('template'); - } - set template(value: any) { - this._setOption('template', value); - } - - @Input() - get text(): string { - return this._getOption('text'); - } - set text(value: string) { - this._setOption('text', value); - } - - @Input() - get visible(): boolean { - return this._getOption('visible'); - } - set visible(value: boolean) { - this._setOption('visible', value); - } - @Input() get widget(): ToolbarItemComponent { return this._getOption('widget'); diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/simple-item-dxi.ts b/packages/devextreme-angular/src/ui/tree-list/nested/simple-item-dxi.ts new file mode 100644 index 000000000000..04abfa87384f --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/simple-item-dxi.ts @@ -0,0 +1,225 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input, + ContentChildren, + QueryList +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import * as CommonTypes from 'devextreme/common'; +import { FormItemComponent, FormItemType, LabelLocation } from 'devextreme/ui/form'; +import { HorizontalAlignment } from 'devextreme/common'; + +import { + DxIntegrationModule, + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + +import { PROPERTY_TOKEN_items } from 'devextreme-angular/core/tokens'; +import { + PROPERTY_TOKEN_validationRules, +} from 'devextreme-angular/core/tokens'; + +@Component({ + selector: 'dxi-tree-list-simple-item', + standalone: true, + template: '', + styles: [':host { display: block; }'], + imports: [ DxIntegrationModule ], + providers: [ + NestedOptionHost, + DxTemplateHost, + { + provide: PROPERTY_TOKEN_items, + useExisting: DxiTreeListSimpleItemComponent, + } + ] +}) +export class DxiTreeListSimpleItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @ContentChildren(PROPERTY_TOKEN_validationRules) + set _validationRulesContentChildren(value: QueryList) { + this.setChildren('validationRules', value); + } + + @Input() + get aiOptions(): { disabled?: boolean, instruction?: string | undefined } { + return this._getOption('aiOptions'); + } + set aiOptions(value: { disabled?: boolean, instruction?: string | undefined }) { + this._setOption('aiOptions', value); + } + + @Input() + get colSpan(): number | undefined { + return this._getOption('colSpan'); + } + set colSpan(value: number | undefined) { + this._setOption('colSpan', value); + } + + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get dataField(): string | undefined { + return this._getOption('dataField'); + } + set dataField(value: string | undefined) { + this._setOption('dataField', value); + } + + @Input() + get editorOptions(): any | undefined { + return this._getOption('editorOptions'); + } + set editorOptions(value: any | undefined) { + this._setOption('editorOptions', value); + } + + @Input() + get editorType(): FormItemComponent { + return this._getOption('editorType'); + } + set editorType(value: FormItemComponent) { + this._setOption('editorType', value); + } + + @Input() + get helpText(): string | undefined { + return this._getOption('helpText'); + } + set helpText(value: string | undefined) { + this._setOption('helpText', value); + } + + @Input() + get isRequired(): boolean | undefined { + return this._getOption('isRequired'); + } + set isRequired(value: boolean | undefined) { + this._setOption('isRequired', value); + } + + @Input() + get itemType(): FormItemType { + return this._getOption('itemType'); + } + set itemType(value: FormItemType) { + this._setOption('itemType', value); + } + + @Input() + get label(): { alignment?: HorizontalAlignment, location?: LabelLocation, showColon?: boolean, template?: any, text?: string | undefined, visible?: boolean } { + return this._getOption('label'); + } + set label(value: { alignment?: HorizontalAlignment, location?: LabelLocation, showColon?: boolean, template?: any, text?: string | undefined, visible?: boolean }) { + this._setOption('label', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get validationRules(): Array { + return this._getOption('validationRules'); + } + set validationRules(value: Array) { + this._setOption('validationRules', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get visibleIndex(): number | undefined { + return this._getOption('visibleIndex'); + } + set visibleIndex(value: number | undefined) { + this._setOption('visibleIndex', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + this.itemType = 'simple'; + + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + imports: [ + DxiTreeListSimpleItemComponent + ], + exports: [ + DxiTreeListSimpleItemComponent + ], +}) +export class DxiTreeListSimpleItemModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/tab-dxi.ts b/packages/devextreme-angular/src/ui/tree-list/nested/tab-dxi.ts new file mode 100644 index 000000000000..acb5975b78fc --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/tab-dxi.ts @@ -0,0 +1,181 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input, + ContentChildren, + QueryList +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { dxFormButtonItem, dxFormEmptyItem, dxFormGroupItem, dxFormSimpleItem, dxFormTabbedItem } from 'devextreme/ui/form'; + +import { + DxIntegrationModule, + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + +import { PROPERTY_TOKEN_tabs } from 'devextreme-angular/core/tokens'; +import { + PROPERTY_TOKEN_items, +} from 'devextreme-angular/core/tokens'; + +@Component({ + selector: 'dxi-tree-list-tab', + standalone: true, + template: '', + styles: [':host { display: block; }'], + imports: [ DxIntegrationModule ], + providers: [ + NestedOptionHost, + DxTemplateHost, + { + provide: PROPERTY_TOKEN_tabs, + useExisting: DxiTreeListTabComponent, + } + ] +}) +export class DxiTreeListTabComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @ContentChildren(PROPERTY_TOKEN_items) + set _itemsContentChildren(value: QueryList) { + this.setChildren('items', value); + } + + @Input() + get alignItemLabels(): boolean { + return this._getOption('alignItemLabels'); + } + set alignItemLabels(value: boolean) { + this._setOption('alignItemLabels', value); + } + + @Input() + get badge(): string | undefined { + return this._getOption('badge'); + } + set badge(value: string | undefined) { + this._setOption('badge', value); + } + + @Input() + get colCount(): number { + return this._getOption('colCount'); + } + set colCount(value: number) { + this._setOption('colCount', value); + } + + @Input() + get colCountByScreen(): { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined } { + return this._getOption('colCountByScreen'); + } + set colCountByScreen(value: { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined }) { + this._setOption('colCountByScreen', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get icon(): string | undefined { + return this._getOption('icon'); + } + set icon(value: string | undefined) { + this._setOption('icon', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get tabTemplate(): any { + return this._getOption('tabTemplate'); + } + set tabTemplate(value: any) { + this._setOption('tabTemplate', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get title(): string | undefined { + return this._getOption('title'); + } + set title(value: string | undefined) { + this._setOption('title', value); + } + + + protected get _optionPath() { + return 'tabs'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + imports: [ + DxiTreeListTabComponent + ], + exports: [ + DxiTreeListTabComponent + ], +}) +export class DxiTreeListTabModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/tab-panel-options-item-dxi.ts b/packages/devextreme-angular/src/ui/tree-list/nested/tab-panel-options-item-dxi.ts new file mode 100644 index 000000000000..efb0230de5cb --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/tab-panel-options-item-dxi.ts @@ -0,0 +1,162 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + + +import { + DxIntegrationModule, + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + +import { PROPERTY_TOKEN_items } from 'devextreme-angular/core/tokens'; + +@Component({ + selector: 'dxi-tree-list-tab-panel-options-item', + standalone: true, + template: '', + styles: [':host { display: block; }'], + imports: [ DxIntegrationModule ], + providers: [ + NestedOptionHost, + DxTemplateHost, + { + provide: PROPERTY_TOKEN_items, + useExisting: DxiTreeListTabPanelOptionsItemComponent, + } + ] +}) +export class DxiTreeListTabPanelOptionsItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get badge(): string { + return this._getOption('badge'); + } + set badge(value: string) { + this._setOption('badge', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get icon(): string { + return this._getOption('icon'); + } + set icon(value: string) { + this._setOption('icon', value); + } + + @Input() + get tabTemplate(): any { + return this._getOption('tabTemplate'); + } + set tabTemplate(value: any) { + this._setOption('tabTemplate', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get title(): string { + return this._getOption('title'); + } + set title(value: string) { + this._setOption('title', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + imports: [ + DxiTreeListTabPanelOptionsItemComponent + ], + exports: [ + DxiTreeListTabPanelOptionsItemComponent + ], +}) +export class DxiTreeListTabPanelOptionsItemModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/tab-panel-options.ts b/packages/devextreme-angular/src/ui/tree-list/nested/tab-panel-options.ts new file mode 100644 index 000000000000..ef13159e71c4 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/tab-panel-options.ts @@ -0,0 +1,471 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + OnInit, + OnDestroy, + NgModule, + Host, + SkipSelf, + Input, + Output, + EventEmitter, + ContentChildren, + QueryList +} from '@angular/core'; + + + + +import DataSource from 'devextreme/data/data_source'; +import { dxTabPanelItem, ContentReadyEvent, DisposingEvent, InitializedEvent, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, OptionChangedEvent, SelectionChangedEvent, SelectionChangingEvent, TitleClickEvent, TitleHoldEvent, TitleRenderedEvent } from 'devextreme/ui/tab_panel'; +import { DataSourceOptions } from 'devextreme/data/data_source'; +import { Store } from 'devextreme/data/store'; +import { TabsIconPosition, TabsStyle, Position } from 'devextreme/common'; + +import { + DxIntegrationModule, + NestedOptionHost, + CollectionNestedOption, +} from 'devextreme-angular/core'; +import { NestedOption } from 'devextreme-angular/core'; + +import { + PROPERTY_TOKEN_items, +} from 'devextreme-angular/core/tokens'; + +@Component({ + selector: 'dxo-tree-list-tab-panel-options', + standalone: true, + template: '', + styles: [''], + imports: [ DxIntegrationModule ], + providers: [NestedOptionHost] +}) +export class DxoTreeListTabPanelOptionsComponent extends NestedOption implements OnDestroy, OnInit { + @ContentChildren(PROPERTY_TOKEN_items) + set _itemsContentChildren(value: QueryList) { + this.setChildren('items', value); + } + + @Input() + get accessKey(): string | undefined { + return this._getOption('accessKey'); + } + set accessKey(value: string | undefined) { + this._setOption('accessKey', value); + } + + @Input() + get activeStateEnabled(): boolean { + return this._getOption('activeStateEnabled'); + } + set activeStateEnabled(value: boolean) { + this._setOption('activeStateEnabled', value); + } + + @Input() + get animationEnabled(): boolean { + return this._getOption('animationEnabled'); + } + set animationEnabled(value: boolean) { + this._setOption('animationEnabled', value); + } + + @Input() + get dataSource(): Array | DataSource | DataSourceOptions | null | Store | string { + return this._getOption('dataSource'); + } + set dataSource(value: Array | DataSource | DataSourceOptions | null | Store | string) { + this._setOption('dataSource', value); + } + + @Input() + get deferRendering(): boolean { + return this._getOption('deferRendering'); + } + set deferRendering(value: boolean) { + this._setOption('deferRendering', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get elementAttr(): Record { + return this._getOption('elementAttr'); + } + set elementAttr(value: Record) { + this._setOption('elementAttr', value); + } + + @Input() + get focusStateEnabled(): boolean { + return this._getOption('focusStateEnabled'); + } + set focusStateEnabled(value: boolean) { + this._setOption('focusStateEnabled', value); + } + + @Input() + get height(): number | string | undefined { + return this._getOption('height'); + } + set height(value: number | string | undefined) { + this._setOption('height', value); + } + + @Input() + get hint(): string | undefined { + return this._getOption('hint'); + } + set hint(value: string | undefined) { + this._setOption('hint', value); + } + + @Input() + get hoverStateEnabled(): boolean { + return this._getOption('hoverStateEnabled'); + } + set hoverStateEnabled(value: boolean) { + this._setOption('hoverStateEnabled', value); + } + + @Input() + get iconPosition(): TabsIconPosition { + return this._getOption('iconPosition'); + } + set iconPosition(value: TabsIconPosition) { + this._setOption('iconPosition', value); + } + + @Input() + get itemHoldTimeout(): number { + return this._getOption('itemHoldTimeout'); + } + set itemHoldTimeout(value: number) { + this._setOption('itemHoldTimeout', value); + } + + @Input() + get items(): Array { + return this._getOption('items'); + } + set items(value: Array) { + this._setOption('items', value); + } + + @Input() + get itemTemplate(): any { + return this._getOption('itemTemplate'); + } + set itemTemplate(value: any) { + this._setOption('itemTemplate', value); + } + + @Input() + get itemTitleTemplate(): any { + return this._getOption('itemTitleTemplate'); + } + set itemTitleTemplate(value: any) { + this._setOption('itemTitleTemplate', value); + } + + @Input() + get keyExpr(): Function | string { + return this._getOption('keyExpr'); + } + set keyExpr(value: Function | string) { + this._setOption('keyExpr', value); + } + + @Input() + get loop(): boolean { + return this._getOption('loop'); + } + set loop(value: boolean) { + this._setOption('loop', value); + } + + @Input() + get noDataText(): string { + return this._getOption('noDataText'); + } + set noDataText(value: string) { + this._setOption('noDataText', value); + } + + @Input() + get onContentReady(): ((e: ContentReadyEvent) => void) { + return this._getOption('onContentReady'); + } + set onContentReady(value: ((e: ContentReadyEvent) => void)) { + this._setOption('onContentReady', value); + } + + @Input() + get onDisposing(): ((e: DisposingEvent) => void) { + return this._getOption('onDisposing'); + } + set onDisposing(value: ((e: DisposingEvent) => void)) { + this._setOption('onDisposing', value); + } + + @Input() + get onInitialized(): ((e: InitializedEvent) => void) { + return this._getOption('onInitialized'); + } + set onInitialized(value: ((e: InitializedEvent) => void)) { + this._setOption('onInitialized', value); + } + + @Input() + get onItemClick(): ((e: ItemClickEvent) => void) { + return this._getOption('onItemClick'); + } + set onItemClick(value: ((e: ItemClickEvent) => void)) { + this._setOption('onItemClick', value); + } + + @Input() + get onItemContextMenu(): ((e: ItemContextMenuEvent) => void) { + return this._getOption('onItemContextMenu'); + } + set onItemContextMenu(value: ((e: ItemContextMenuEvent) => void)) { + this._setOption('onItemContextMenu', value); + } + + @Input() + get onItemHold(): ((e: ItemHoldEvent) => void) { + return this._getOption('onItemHold'); + } + set onItemHold(value: ((e: ItemHoldEvent) => void)) { + this._setOption('onItemHold', value); + } + + @Input() + get onItemRendered(): ((e: ItemRenderedEvent) => void) { + return this._getOption('onItemRendered'); + } + set onItemRendered(value: ((e: ItemRenderedEvent) => void)) { + this._setOption('onItemRendered', value); + } + + @Input() + get onOptionChanged(): ((e: OptionChangedEvent) => void) { + return this._getOption('onOptionChanged'); + } + set onOptionChanged(value: ((e: OptionChangedEvent) => void)) { + this._setOption('onOptionChanged', value); + } + + @Input() + get onSelectionChanged(): ((e: SelectionChangedEvent) => void) { + return this._getOption('onSelectionChanged'); + } + set onSelectionChanged(value: ((e: SelectionChangedEvent) => void)) { + this._setOption('onSelectionChanged', value); + } + + @Input() + get onSelectionChanging(): ((e: SelectionChangingEvent) => void) { + return this._getOption('onSelectionChanging'); + } + set onSelectionChanging(value: ((e: SelectionChangingEvent) => void)) { + this._setOption('onSelectionChanging', value); + } + + @Input() + get onTitleClick(): ((e: TitleClickEvent) => void) { + return this._getOption('onTitleClick'); + } + set onTitleClick(value: ((e: TitleClickEvent) => void)) { + this._setOption('onTitleClick', value); + } + + @Input() + get onTitleHold(): ((e: TitleHoldEvent) => void) { + return this._getOption('onTitleHold'); + } + set onTitleHold(value: ((e: TitleHoldEvent) => void)) { + this._setOption('onTitleHold', value); + } + + @Input() + get onTitleRendered(): ((e: TitleRenderedEvent) => void) { + return this._getOption('onTitleRendered'); + } + set onTitleRendered(value: ((e: TitleRenderedEvent) => void)) { + this._setOption('onTitleRendered', value); + } + + @Input() + get repaintChangesOnly(): boolean { + return this._getOption('repaintChangesOnly'); + } + set repaintChangesOnly(value: boolean) { + this._setOption('repaintChangesOnly', value); + } + + @Input() + get rtlEnabled(): boolean { + return this._getOption('rtlEnabled'); + } + set rtlEnabled(value: boolean) { + this._setOption('rtlEnabled', value); + } + + @Input() + get scrollByContent(): boolean { + return this._getOption('scrollByContent'); + } + set scrollByContent(value: boolean) { + this._setOption('scrollByContent', value); + } + + @Input() + get scrollingEnabled(): boolean { + return this._getOption('scrollingEnabled'); + } + set scrollingEnabled(value: boolean) { + this._setOption('scrollingEnabled', value); + } + + @Input() + get selectedIndex(): number { + return this._getOption('selectedIndex'); + } + set selectedIndex(value: number) { + this._setOption('selectedIndex', value); + } + + @Input() + get selectedItem(): any { + return this._getOption('selectedItem'); + } + set selectedItem(value: any) { + this._setOption('selectedItem', value); + } + + @Input() + get showNavButtons(): boolean { + return this._getOption('showNavButtons'); + } + set showNavButtons(value: boolean) { + this._setOption('showNavButtons', value); + } + + @Input() + get stylingMode(): TabsStyle { + return this._getOption('stylingMode'); + } + set stylingMode(value: TabsStyle) { + this._setOption('stylingMode', value); + } + + @Input() + get swipeEnabled(): boolean { + return this._getOption('swipeEnabled'); + } + set swipeEnabled(value: boolean) { + this._setOption('swipeEnabled', value); + } + + @Input() + get tabIndex(): number { + return this._getOption('tabIndex'); + } + set tabIndex(value: number) { + this._setOption('tabIndex', value); + } + + @Input() + get tabsPosition(): Position { + return this._getOption('tabsPosition'); + } + set tabsPosition(value: Position) { + this._setOption('tabsPosition', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get width(): number | string | undefined { + return this._getOption('width'); + } + set width(value: number | string | undefined) { + this._setOption('width', value); + } + + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() itemsChange: EventEmitter>; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() selectedIndexChange: EventEmitter; + + /** + + * This member supports the internal infrastructure and is not intended to be used directly from your code. + + */ + @Output() selectedItemChange: EventEmitter; + protected get _optionPath() { + return 'tabPanelOptions'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + this._createEventEmitters([ + { emit: 'itemsChange' }, + { emit: 'selectedIndexChange' }, + { emit: 'selectedItemChange' } + ]); + + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + } + + + ngOnInit() { + this._addRecreatedComponent(); + } + + ngOnDestroy() { + this._addRemovedOption(this._getOptionPath()); + } + + +} + +@NgModule({ + imports: [ + DxoTreeListTabPanelOptionsComponent + ], + exports: [ + DxoTreeListTabPanelOptionsComponent + ], +}) +export class DxoTreeListTabPanelOptionsModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/tabbed-item-dxi.ts b/packages/devextreme-angular/src/ui/tree-list/nested/tabbed-item-dxi.ts new file mode 100644 index 000000000000..ec6b1b0abc38 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/tabbed-item-dxi.ts @@ -0,0 +1,146 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + SkipSelf, + Input, + ContentChildren, + QueryList +} from '@angular/core'; + + + + +import { FormItemType, dxFormButtonItem, dxFormEmptyItem, dxFormGroupItem, dxFormSimpleItem, dxFormTabbedItem } from 'devextreme/ui/form'; +import { dxTabPanelOptions } from 'devextreme/ui/tab_panel'; + +import { + DxIntegrationModule, + NestedOptionHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + +import { PROPERTY_TOKEN_items } from 'devextreme-angular/core/tokens'; +import { + PROPERTY_TOKEN_tabs, +} from 'devextreme-angular/core/tokens'; + +@Component({ + selector: 'dxi-tree-list-tabbed-item', + standalone: true, + template: '', + styles: [''], + imports: [ DxIntegrationModule ], + providers: [ + NestedOptionHost, + { + provide: PROPERTY_TOKEN_items, + useExisting: DxiTreeListTabbedItemComponent, + } + ] +}) +export class DxiTreeListTabbedItemComponent extends CollectionNestedOption { + @ContentChildren(PROPERTY_TOKEN_tabs) + set _tabsContentChildren(value: QueryList) { + this.setChildren('tabs', value); + } + + @Input() + get colSpan(): number | undefined { + return this._getOption('colSpan'); + } + set colSpan(value: number | undefined) { + this._setOption('colSpan', value); + } + + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get itemType(): FormItemType { + return this._getOption('itemType'); + } + set itemType(value: FormItemType) { + this._setOption('itemType', value); + } + + @Input() + get name(): string | undefined { + return this._getOption('name'); + } + set name(value: string | undefined) { + this._setOption('name', value); + } + + @Input() + get tabPanelOptions(): dxTabPanelOptions | undefined { + return this._getOption('tabPanelOptions'); + } + set tabPanelOptions(value: dxTabPanelOptions | undefined) { + this._setOption('tabPanelOptions', value); + } + + @Input() + get tabs(): { alignItemLabels?: boolean, badge?: string | undefined, colCount?: number, colCountByScreen?: { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined }, disabled?: boolean, icon?: string | undefined, items?: Array, tabTemplate?: any, template?: any, title?: string | undefined }[] { + return this._getOption('tabs'); + } + set tabs(value: { alignItemLabels?: boolean, badge?: string | undefined, colCount?: number, colCountByScreen?: { lg?: number | undefined, md?: number | undefined, sm?: number | undefined, xs?: number | undefined }, disabled?: boolean, icon?: string | undefined, items?: Array, tabTemplate?: any, template?: any, title?: string | undefined }[]) { + this._setOption('tabs', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get visibleIndex(): number | undefined { + return this._getOption('visibleIndex'); + } + set visibleIndex(value: number | undefined) { + this._setOption('visibleIndex', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + this.itemType = 'tabbed'; + + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + imports: [ + DxiTreeListTabbedItemComponent + ], + exports: [ + DxiTreeListTabbedItemComponent + ], +}) +export class DxiTreeListTabbedItemModule { } diff --git a/packages/devextreme-angular/src/ui/tree-list/nested/tree-list-toolbar-item-dxi.ts b/packages/devextreme-angular/src/ui/tree-list/nested/tree-list-toolbar-item-dxi.ts new file mode 100644 index 000000000000..41e8d7283d02 --- /dev/null +++ b/packages/devextreme-angular/src/ui/tree-list/nested/tree-list-toolbar-item-dxi.ts @@ -0,0 +1,197 @@ +/* tslint:disable:max-line-length */ + + +import { + Component, + NgModule, + Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, + SkipSelf, + Input +} from '@angular/core'; + +import { DOCUMENT } from '@angular/common'; + + +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; +import { ToolbarItemLocation, ToolbarItemComponent } from 'devextreme/common'; +import { TreeListPredefinedToolbarItem } from 'devextreme/ui/tree_list'; + +import { + DxIntegrationModule, + NestedOptionHost, + extractTemplate, + DxTemplateDirective, + IDxTemplateHost, + DxTemplateHost, +} from 'devextreme-angular/core'; +import { CollectionNestedOption } from 'devextreme-angular/core'; + +import { PROPERTY_TOKEN_items } from 'devextreme-angular/core/tokens'; + +@Component({ + selector: 'dxi-tree-list-tree-list-toolbar-item', + standalone: true, + template: '', + styles: [':host { display: block; }'], + imports: [ DxIntegrationModule ], + providers: [ + NestedOptionHost, + DxTemplateHost, + { + provide: PROPERTY_TOKEN_items, + useExisting: DxiTreeListTreeListToolbarItemComponent, + } + ] +}) +export class DxiTreeListTreeListToolbarItemComponent extends CollectionNestedOption implements AfterViewInit, + IDxTemplateHost { + @Input() + get cssClass(): string | undefined { + return this._getOption('cssClass'); + } + set cssClass(value: string | undefined) { + this._setOption('cssClass', value); + } + + @Input() + get disabled(): boolean { + return this._getOption('disabled'); + } + set disabled(value: boolean) { + this._setOption('disabled', value); + } + + @Input() + get html(): string { + return this._getOption('html'); + } + set html(value: string) { + this._setOption('html', value); + } + + @Input() + get locateInMenu(): LocateInMenuMode { + return this._getOption('locateInMenu'); + } + set locateInMenu(value: LocateInMenuMode) { + this._setOption('locateInMenu', value); + } + + @Input() + get location(): ToolbarItemLocation { + return this._getOption('location'); + } + set location(value: ToolbarItemLocation) { + this._setOption('location', value); + } + + @Input() + get menuItemTemplate(): any { + return this._getOption('menuItemTemplate'); + } + set menuItemTemplate(value: any) { + this._setOption('menuItemTemplate', value); + } + + @Input() + get name(): string | TreeListPredefinedToolbarItem { + return this._getOption('name'); + } + set name(value: string | TreeListPredefinedToolbarItem) { + this._setOption('name', value); + } + + @Input() + get options(): any { + return this._getOption('options'); + } + set options(value: any) { + this._setOption('options', value); + } + + @Input() + get showText(): ShowTextMode { + return this._getOption('showText'); + } + set showText(value: ShowTextMode) { + this._setOption('showText', value); + } + + @Input() + get template(): any { + return this._getOption('template'); + } + set template(value: any) { + this._setOption('template', value); + } + + @Input() + get text(): string { + return this._getOption('text'); + } + set text(value: string) { + this._setOption('text', value); + } + + @Input() + get visible(): boolean { + return this._getOption('visible'); + } + set visible(value: boolean) { + this._setOption('visible', value); + } + + @Input() + get widget(): ToolbarItemComponent { + return this._getOption('widget'); + } + set widget(value: ToolbarItemComponent) { + this._setOption('widget', value); + } + + + protected get _optionPath() { + return 'items'; + } + + + constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, + @Host() optionHost: NestedOptionHost, + private renderer: Renderer2, + @Inject(DOCUMENT) private document: any, + @Host() templateHost: DxTemplateHost, + private element: ElementRef) { + super(); + parentOptionHost.setNestedOption(this); + optionHost.setHost(this, this._fullOptionPath.bind(this)); + templateHost.setHost(this); + } + + setTemplate(template: DxTemplateDirective) { + this.template = template; + } + ngAfterViewInit() { + extractTemplate(this, this.element, this.renderer, this.document); + } + + + + ngOnDestroy() { + this._deleteRemovedOptions(this._fullOptionPath()); + } + +} + +@NgModule({ + imports: [ + DxiTreeListTreeListToolbarItemComponent + ], + exports: [ + DxiTreeListTreeListToolbarItemComponent + ], +}) +export class DxiTreeListTreeListToolbarItemModule { } diff --git a/packages/devextreme-metadata/make-integration-metadata.ts b/packages/devextreme-metadata/make-integration-metadata.ts index e1dc45ad5e25..ca3567599539 100644 --- a/packages/devextreme-metadata/make-integration-metadata.ts +++ b/packages/devextreme-metadata/make-integration-metadata.ts @@ -75,10 +75,6 @@ Imd.makeMetadata({ { omitConfigComponents: ['*'] }, ), - addMetadata(['ui/form:dxFormOptions.items'], { - omitConfigComponents: ['DxDataGrid', 'DxTreeList'], - }), - [ ['common:AsyncRule', 'async'], ['common:CompareRule', 'compare'], @@ -99,6 +95,19 @@ Imd.makeMetadata({ ['ui/form:dxFormTabbedItem', 'tabbed'], ].map(([uid, alias]) => addMetadata(uid, { itemTypeAlias: alias })), + // collision Form.GroupItem vs Summary.GroupItem (missed because of different case) + // addMetadata('ui/data_grid:Summary.groupItems', { + // forcedName: 'summaryGroupItem', + // }), + + // collision Toolbar.Item vs Popup.ToolbarItem + addMetadata('ui/data_grid:Toolbar.items', { + forcedName: 'dataGridToolbarItem', + }), + addMetadata('ui/tree_list:Toolbar.items', { + forcedName: 'treeListToolbarItem', + }), + replaceTypes(/.+/, ['core/element:UserDefinedElement'], ['any']), removeMembers(['core/element:DxElement', 'core/element:UserDefinedElement'], 'any'), diff --git a/packages/devextreme-react/src/data-grid.ts b/packages/devextreme-react/src/data-grid.ts index c6236a7c60c3..865e4acee812 100644 --- a/packages/devextreme-react/src/data-grid.ts +++ b/packages/devextreme-react/src/data-grid.ts @@ -9,25 +9,26 @@ import dxDataGrid, { import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component"; import NestedOption from "./core/nested-option"; -import type { dxDataGridColumn, AdaptiveDetailRowPreparingEvent, AIColumnRequestCreatingEvent, CellClickEvent, CellDblClickEvent, CellPreparedEvent, ContentReadyEvent, ContextMenuPreparingEvent, DataErrorOccurredEvent, DisposingEvent, EditCanceledEvent, EditCancelingEvent, EditingStartEvent, EditorPreparedEvent, EditorPreparingEvent, ExportingEvent, FocusedCellChangingEvent, FocusedRowChangingEvent, InitializedEvent, InitNewRowEvent, KeyDownEvent, RowClickEvent, RowCollapsedEvent, RowCollapsingEvent, RowDblClickEvent, RowExpandedEvent, RowExpandingEvent, RowInsertedEvent, RowInsertingEvent, RowPreparedEvent, RowRemovedEvent, RowRemovingEvent, RowUpdatedEvent, RowUpdatingEvent, RowValidatingEvent, SavedEvent, SavingEvent, ToolbarPreparingEvent, dxDataGridRowObject, DataGridPredefinedColumnButton, ColumnButtonClickEvent, dxDataGridColumnButton, DataGridCommandColumnType, SelectionSensitivity, DataGridExportFormat, DataGridPredefinedToolbarItem, DataGridScrollMode, dxDataGridToolbarItem } from "devextreme/ui/data_grid"; +import type { dxDataGridColumn, AdaptiveDetailRowPreparingEvent, AIColumnRequestCreatingEvent, CellClickEvent, CellDblClickEvent, CellPreparedEvent, ContentReadyEvent, ContextMenuPreparingEvent, DataErrorOccurredEvent, DisposingEvent, EditCanceledEvent, EditCancelingEvent, EditingStartEvent, EditorPreparedEvent, EditorPreparingEvent, ExportingEvent, FocusedCellChangingEvent, FocusedRowChangingEvent, InitializedEvent, InitNewRowEvent, KeyDownEvent, RowClickEvent, RowCollapsedEvent, RowCollapsingEvent, RowDblClickEvent, RowExpandedEvent, RowExpandingEvent, RowInsertedEvent, RowInsertingEvent, RowPreparedEvent, RowRemovedEvent, RowRemovingEvent, RowUpdatedEvent, RowUpdatingEvent, RowValidatingEvent, SavedEvent, SavingEvent, ToolbarPreparingEvent, dxDataGridRowObject, DataGridPredefinedColumnButton, ColumnButtonClickEvent, dxDataGridColumnButton, DataGridCommandColumnType, SelectionSensitivity, DataGridPredefinedToolbarItem, DataGridExportFormat, DataGridScrollMode, dxDataGridToolbarItem } from "devextreme/ui/data_grid"; import type { DataChange, AIColumnMode, DataChangeType, ColumnAIOptions, FilterOperation, FilterType, FixedPosition, ColumnHeaderFilter as GridsColumnHeaderFilter, SelectedFilterOperation, ColumnChooserMode, ColumnChooserSearchConfig, ColumnChooserSelectionConfig, HeaderFilterGroupInterval, ColumnHeaderFilterSearchConfig, HeaderFilterSearchConfig, HeaderFilterTexts, SelectionColumnDisplayMode, GridsEditMode, NewRowPosition, GridsEditRefreshMode, StartEditAction, FilterPanel as GridsFilterPanel, FilterPanelTexts as GridsFilterPanelTexts, ApplyFilterMode, GroupExpandMode, SummaryType, EnterKeyAction, EnterKeyDirection, PagerPageSize, GridBase, DataRenderMode, StateStoreType } from "devextreme/common/grids"; -import type { Mode, ValidationRuleType, HorizontalAlignment, VerticalAlignment, template, TextEditorButtonLocation, DataType, Format as CommonFormat, SortOrder, SearchMode, ComparisonOperator, SingleMultipleOrNone, SelectAllMode, TextBoxPredefinedButton, TextEditorButton, LabelMode, MaskMode, EditorStyle, ValidationMessageMode, Position as CommonPosition, ValidationStatus, PositionAlignment, Direction, ToolbarItemLocation, ToolbarItemComponent, ButtonStyle, ButtonType, DisplayMode, DragDirection, DragHighlight, ScrollbarMode } from "devextreme/common"; -import type { ContentReadyEvent as TextBoxContentReadyEvent, DisposingEvent as TextBoxDisposingEvent, InitializedEvent as TextBoxInitializedEvent, KeyDownEvent as TextBoxKeyDownEvent, dxTextBoxOptions, TextBoxType, ChangeEvent, CopyEvent, CutEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InputEvent, KeyUpEvent, OptionChangedEvent, PasteEvent, ValueChangedEvent } from "devextreme/ui/text_box"; -import type { ContentReadyEvent as FilterBuilderContentReadyEvent, DisposingEvent as FilterBuilderDisposingEvent, EditorPreparedEvent as FilterBuilderEditorPreparedEvent, EditorPreparingEvent as FilterBuilderEditorPreparingEvent, InitializedEvent as FilterBuilderInitializedEvent, dxFilterBuilderField, FieldInfo, OptionChangedEvent as FilterBuilderOptionChangedEvent, ValueChangedEvent as FilterBuilderValueChangedEvent, FilterBuilderOperation, dxFilterBuilderCustomOperation, GroupOperation } from "devextreme/ui/filter_builder"; -import type { ContentReadyEvent as FormContentReadyEvent, DisposingEvent as FormDisposingEvent, InitializedEvent as FormInitializedEvent, dxFormSimpleItem, dxFormOptions, OptionChangedEvent as FormOptionChangedEvent, dxFormGroupItem, dxFormTabbedItem, dxFormEmptyItem, dxFormButtonItem, LabelLocation, FormLabelMode, EditorEnterKeyEvent, FieldDataChangedEvent, SmartPastedEvent, SmartPastingEvent, FormItemComponent, FormItemType } from "devextreme/ui/form"; -import type { ContentReadyEvent as ButtonContentReadyEvent, DisposingEvent as ButtonDisposingEvent, InitializedEvent as ButtonInitializedEvent, dxButtonOptions, OptionChangedEvent as ButtonOptionChangedEvent, ClickEvent } from "devextreme/ui/button"; +import type { Mode, ValidationRuleType, HorizontalAlignment, VerticalAlignment, template, TextEditorButtonLocation, ButtonStyle, ButtonType, DataType, Format as CommonFormat, SortOrder, SearchMode, ComparisonOperator, SingleMultipleOrNone, SelectAllMode, ToolbarItemLocation, ToolbarItemComponent, TextBoxPredefinedButton, TextEditorButton, LabelMode, MaskMode, EditorStyle, ValidationMessageMode, Position as CommonPosition, ValidationStatus, PositionAlignment, Direction, DisplayMode, DragDirection, DragHighlight, ScrollbarMode, TabsIconPosition, TabsStyle } from "devextreme/common"; +import type { ContentReadyEvent as ButtonContentReadyEvent, DisposingEvent as ButtonDisposingEvent, InitializedEvent as ButtonInitializedEvent, dxButtonOptions, ClickEvent, OptionChangedEvent } from "devextreme/ui/button"; +import type { ContentReadyEvent as TextBoxContentReadyEvent, DisposingEvent as TextBoxDisposingEvent, InitializedEvent as TextBoxInitializedEvent, KeyDownEvent as TextBoxKeyDownEvent, dxTextBoxOptions, OptionChangedEvent as TextBoxOptionChangedEvent, TextBoxType, ChangeEvent, CopyEvent, CutEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InputEvent, KeyUpEvent, PasteEvent, ValueChangedEvent } from "devextreme/ui/text_box"; +import type { ContentReadyEvent as FilterBuilderContentReadyEvent, DisposingEvent as FilterBuilderDisposingEvent, EditorPreparedEvent as FilterBuilderEditorPreparedEvent, EditorPreparingEvent as FilterBuilderEditorPreparingEvent, InitializedEvent as FilterBuilderInitializedEvent, OptionChangedEvent as FilterBuilderOptionChangedEvent, dxFilterBuilderField, FieldInfo, ValueChangedEvent as FilterBuilderValueChangedEvent, FilterBuilderOperation, dxFilterBuilderCustomOperation, GroupOperation } from "devextreme/ui/filter_builder"; +import type { ContentReadyEvent as FormContentReadyEvent, DisposingEvent as FormDisposingEvent, InitializedEvent as FormInitializedEvent, FormItemType, FormPredefinedButtonItem, OptionChangedEvent as FormOptionChangedEvent, dxFormSimpleItem, dxFormOptions, dxFormGroupItem, dxFormTabbedItem, dxFormEmptyItem, dxFormButtonItem, LabelLocation, FormLabelMode, EditorEnterKeyEvent, FieldDataChangedEvent, SmartPastedEvent, SmartPastingEvent, FormItemComponent } from "devextreme/ui/form"; +import type { ContentReadyEvent as TabPanelContentReadyEvent, DisposingEvent as TabPanelDisposingEvent, InitializedEvent as TabPanelInitializedEvent, OptionChangedEvent as TabPanelOptionChangedEvent, dxTabPanelOptions, dxTabPanelItem, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, SelectionChangedEvent, SelectionChangingEvent, TitleClickEvent, TitleHoldEvent, TitleRenderedEvent } from "devextreme/ui/tab_panel"; import type { AIIntegration } from "devextreme/common/ai-integration"; import type { AnimationConfig, CollisionResolution, PositionConfig, AnimationState, AnimationType, CollisionResolutionCombination } from "devextreme/common/core/animation"; import type { Format as LocalizationFormat } from "devextreme/common/core/localization"; import type { DataSourceOptions } from "devextreme/data/data_source"; import type { Store } from "devextreme/data/store"; +import type { LocateInMenuMode, ShowTextMode } from "devextreme/ui/toolbar"; +import type { CollectionWidgetItem } from "devextreme/ui/collection/ui.collection_widget.base"; import type { dxPopupOptions, dxPopupToolbarItem, ToolbarLocation } from "devextreme/ui/popup"; import type { event } from "devextreme/events/events.types"; import type { EventInfo } from "devextreme/common/core/events"; import type { Component } from "devextreme/core/component"; import type { LoadingAnimationType } from "devextreme/ui/load_indicator"; -import type { LocateInMenuMode, ShowTextMode } from "devextreme/ui/toolbar"; -import type { CollectionWidgetItem } from "devextreme/ui/collection/ui.collection_widget.base"; import type { LoadPanelIndicatorProperties } from "devextreme/ui/load_panel"; import type dxOverlay from "devextreme/ui/overlay"; @@ -36,6 +37,7 @@ import type dxPopup from "devextreme/ui/popup"; import type dxForm from "devextreme/ui/form"; import type dxSortable from "devextreme/ui/sortable"; import type dxDraggable from "devextreme/ui/draggable"; +import type DataSource from "devextreme/data/data_source"; import type * as CommonTypes from "devextreme/common"; @@ -237,6 +239,7 @@ const AI = Object.assign(_componentAI, // owners: // FormItem +// SimpleItem type IAIOptionsProps = React.PropsWithChildren<{ disabled?: boolean; instruction?: string | undefined; @@ -281,6 +284,7 @@ const Animation = Object.assign // owners: // FormItem // Column +// SimpleItem type IAsyncRuleProps = React.PropsWithChildren<{ ignoreEmptyValue?: boolean; message?: string; @@ -383,6 +387,87 @@ const Button = Object.assign(_comp componentType: "option", }); +// owners: +// Form +type IButtonItemProps = React.PropsWithChildren<{ + buttonOptions?: dxButtonOptions | undefined; + colSpan?: number | undefined; + cssClass?: string | undefined; + horizontalAlignment?: HorizontalAlignment; + itemType?: FormItemType; + name?: FormPredefinedButtonItem | string | undefined; + verticalAlignment?: VerticalAlignment; + visible?: boolean; + visibleIndex?: number | undefined; +}> +const _componentButtonItem = (props: IButtonItemProps) => { + return React.createElement(NestedOption, { + ...props, + elementDescriptor: { + OptionName: "items", + IsCollectionItem: true, + ExpectedChildren: { + buttonOptions: { optionName: "buttonOptions", isCollectionItem: false } + }, + PredefinedProps: { + itemType: "button" + }, + }, + }); +}; + +const ButtonItem = Object.assign(_componentButtonItem, { + componentType: "option", +}); + +// owners: +// ButtonItem +type IButtonOptionsProps = React.PropsWithChildren<{ + accessKey?: string | undefined; + activeStateEnabled?: boolean; + disabled?: boolean; + elementAttr?: Record; + focusStateEnabled?: boolean; + height?: number | string | undefined; + hint?: string | undefined; + hoverStateEnabled?: boolean; + icon?: string; + onClick?: ((e: ClickEvent) => void); + onContentReady?: ((e: ButtonContentReadyEvent) => void); + onDisposing?: ((e: ButtonDisposingEvent) => void); + onInitialized?: ((e: ButtonInitializedEvent) => void); + onOptionChanged?: ((e: OptionChangedEvent) => void); + rtlEnabled?: boolean; + stylingMode?: ButtonStyle; + tabIndex?: number; + template?: ((buttonData: { icon: string, text: string }, contentElement: any) => string | any) | template; + text?: string; + type?: ButtonType | string; + useSubmitBehavior?: boolean; + validationGroup?: string | undefined; + visible?: boolean; + width?: number | string | undefined; + render?: (...params: any) => React.ReactNode; + component?: React.ComponentType; +}> +const _componentButtonOptions = (props: IButtonOptionsProps) => { + return React.createElement(NestedOption, { + ...props, + elementDescriptor: { + OptionName: "buttonOptions", + TemplateProps: [{ + tmplOption: "template", + render: "render", + component: "component" + }], + }, + }); +}; + +const ButtonOptions = Object.assign(_componentButtonOptions, { + componentType: "option", +}); + // owners: // Editing type IChangeProps = React.PropsWithChildren<{ @@ -408,6 +493,8 @@ const Change = Object.assign(_comp // owners: // Form +// undefined +// Tab type IColCountByScreenProps = React.PropsWithChildren<{ lg?: number | undefined; md?: number | undefined; @@ -852,6 +939,7 @@ const ColumnLookup = Object.assign any); comparisonType?: ComparisonOperator; @@ -931,6 +1019,7 @@ const CustomOperation = Object.assign string | any) | template; + name?: DataGridPredefinedToolbarItem | string; + options?: any; + showText?: ShowTextMode; + template?: ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | template; + text?: string; + visible?: boolean; + widget?: ToolbarItemComponent; + menuItemRender?: (...params: any) => React.ReactNode; + menuItemComponent?: React.ComponentType; + render?: (...params: any) => React.ReactNode; + component?: React.ComponentType; +}> +const _componentDataGridToolbarItem = (props: IDataGridToolbarItemProps) => { + return React.createElement(NestedOption, { + ...props, + elementDescriptor: { + OptionName: "items", + IsCollectionItem: true, + TemplateProps: [{ + tmplOption: "menuItemTemplate", + render: "menuItemRender", + component: "menuItemComponent" + }, { + tmplOption: "template", + render: "render", + component: "component" + }], + }, + }); +}; + +const DataGridToolbarItem = Object.assign(_componentDataGridToolbarItem, { + componentType: "option", +}); + // owners: // DataGrid type IEditingProps = React.PropsWithChildren<{ @@ -1177,7 +1310,7 @@ type IEditorOptionsProps = React.PropsWithChildren<{ onInput?: ((e: InputEvent) => void); onKeyDown?: ((e: TextBoxKeyDownEvent) => void); onKeyUp?: ((e: KeyUpEvent) => void); - onOptionChanged?: ((e: OptionChangedEvent) => void); + onOptionChanged?: ((e: TextBoxOptionChangedEvent) => void); onPaste?: ((e: PasteEvent) => void); onValueChanged?: ((e: ValueChangedEvent) => void); placeholder?: string; @@ -1249,6 +1382,7 @@ const EditorOptionsButton = Object.assign componentType: "option", }); +// owners: +// Form +type IEmptyItemProps = React.PropsWithChildren<{ + colSpan?: number | undefined; + cssClass?: string | undefined; + itemType?: FormItemType; + name?: string | undefined; + visible?: boolean; + visibleIndex?: number | undefined; +}> +const _componentEmptyItem = (props: IEmptyItemProps) => { + return React.createElement(NestedOption, { + ...props, + elementDescriptor: { + OptionName: "items", + IsCollectionItem: true, + PredefinedProps: { + itemType: "empty" + }, + }, + }); +}; + +const EmptyItem = Object.assign(_componentEmptyItem, { + componentType: "option", +}); + // owners: // DataGrid type IExportProps = React.PropsWithChildren<{ @@ -1747,7 +1908,13 @@ const _componentForm = (props: IFormProps) => { defaultFormData: "formData" }, ExpectedChildren: { - colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false } + ButtonItem: { optionName: "items", isCollectionItem: true }, + colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false }, + EmptyItem: { optionName: "items", isCollectionItem: true }, + GroupItem: { optionName: "items", isCollectionItem: true }, + item: { optionName: "items", isCollectionItem: true }, + SimpleItem: { optionName: "items", isCollectionItem: true }, + TabbedItem: { optionName: "items", isCollectionItem: true } }, }, }); @@ -2110,25 +2277,88 @@ const IndicatorOptions = Object.assign string | any) | template; + template?: ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | template; + text?: string; + title?: string; + visible?: boolean; + aiOptions?: Record | { + disabled?: boolean; + instruction?: string | undefined; + }; + colSpan?: number | undefined; + cssClass?: string | undefined; + dataField?: string | undefined; + editorOptions?: any | undefined; + editorType?: FormItemComponent; + helpText?: string | undefined; + isRequired?: boolean | undefined; + itemType?: FormItemType; + label?: Record | { + alignment?: HorizontalAlignment; + location?: LabelLocation; + showColon?: boolean; + template?: ((itemData: { component: dxForm, dataField: string, editorOptions: any, editorType: string, name: string, text: string }, itemElement: any) => string | any) | template; + text?: string | undefined; + visible?: boolean; + }; + name?: string | undefined | FormPredefinedButtonItem | DataGridPredefinedToolbarItem; + validationRules?: Array; + visibleIndex?: number | undefined; + alignItemLabels?: boolean; + caption?: string | undefined; + captionTemplate?: ((data: { caption: string, component: dxForm, name: string }, itemElement: any) => string | any) | template; + colCount?: number; + colCountByScreen?: Record | { + lg?: number | undefined; + md?: number | undefined; + sm?: number | undefined; + xs?: number | undefined; + }; + items?: Array; + tabPanelOptions?: dxTabPanelOptions | undefined; + tabs?: Array> | { + alignItemLabels?: boolean; + badge?: string | undefined; + colCount?: number; + colCountByScreen?: Record | { + lg?: number | undefined; + md?: number | undefined; + sm?: number | undefined; + xs?: number | undefined; + }; + disabled?: boolean; + icon?: string | undefined; + items?: Array; + tabTemplate?: ((tabData: any, tabIndex: number, tabElement: any) => any) | template | undefined; + template?: ((tabData: any, tabIndex: number, tabElement: any) => any) | template | undefined; + title?: string | undefined; + }[]; + buttonOptions?: dxButtonOptions | undefined; + horizontalAlignment?: HorizontalAlignment; + verticalAlignment?: VerticalAlignment; locateInMenu?: LocateInMenuMode; location?: ToolbarItemLocation; menuItemTemplate?: (() => string | any) | template; - name?: DataGridPredefinedToolbarItem | string; options?: any; showText?: ShowTextMode; - template?: ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | template; - text?: string; - visible?: boolean; widget?: ToolbarItemComponent; - menuItemRender?: (...params: any) => React.ReactNode; - menuItemComponent?: React.ComponentType; + tabRender?: (...params: any) => React.ReactNode; + tabComponent?: React.ComponentType; render?: (...params: any) => React.ReactNode; component?: React.ComponentType; + captionRender?: (...params: any) => React.ReactNode; + captionComponent?: React.ComponentType; + menuItemRender?: (...params: any) => React.ReactNode; + menuItemComponent?: React.ComponentType; }> const _componentItem = (props: IItemProps) => { return React.createElement(NestedOption, { @@ -2136,14 +2366,40 @@ const _componentItem = (props: IItemProps) => { elementDescriptor: { OptionName: "items", IsCollectionItem: true, + ExpectedChildren: { + aiOptions: { optionName: "aiOptions", isCollectionItem: false }, + AsyncRule: { optionName: "validationRules", isCollectionItem: true }, + buttonOptions: { optionName: "buttonOptions", isCollectionItem: false }, + colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false }, + CompareRule: { optionName: "validationRules", isCollectionItem: true }, + CustomRule: { optionName: "validationRules", isCollectionItem: true }, + EmailRule: { optionName: "validationRules", isCollectionItem: true }, + label: { optionName: "label", isCollectionItem: false }, + NumericRule: { optionName: "validationRules", isCollectionItem: true }, + PatternRule: { optionName: "validationRules", isCollectionItem: true }, + RangeRule: { optionName: "validationRules", isCollectionItem: true }, + RequiredRule: { optionName: "validationRules", isCollectionItem: true }, + StringLengthRule: { optionName: "validationRules", isCollectionItem: true }, + tab: { optionName: "tabs", isCollectionItem: true }, + tabPanelOptions: { optionName: "tabPanelOptions", isCollectionItem: false }, + validationRule: { optionName: "validationRules", isCollectionItem: true } + }, TemplateProps: [{ - tmplOption: "menuItemTemplate", - render: "menuItemRender", - component: "menuItemComponent" + tmplOption: "tabTemplate", + render: "tabRender", + component: "tabComponent" }, { tmplOption: "template", render: "render", component: "component" + }, { + tmplOption: "captionTemplate", + render: "captionRender", + component: "captionComponent" + }, { + tmplOption: "menuItemTemplate", + render: "menuItemRender", + component: "menuItemComponent" }], }, }); @@ -2176,6 +2432,7 @@ const KeyboardNavigation = Object.assign(_componentMy, // owners: // FormItem // Column +// SimpleItem type INumericRuleProps = React.PropsWithChildren<{ ignoreEmptyValue?: boolean; message?: string; @@ -2388,10 +2646,10 @@ type IOptionsProps = React.PropsWithChildren<{ hoverStateEnabled?: boolean; icon?: string; onClick?: ((e: ClickEvent) => void); - onContentReady?: ((e: ButtonContentReadyEvent) => void); - onDisposing?: ((e: ButtonDisposingEvent) => void); - onInitialized?: ((e: ButtonInitializedEvent) => void); - onOptionChanged?: ((e: ButtonOptionChangedEvent) => void); + onContentReady?: ((e: ContentReadyEvent) => void); + onDisposing?: ((e: DisposingEvent) => void); + onInitialized?: ((e: InitializedEvent) => void); + onOptionChanged?: ((e: OptionChangedEvent) => void); rtlEnabled?: boolean; stylingMode?: ButtonStyle; tabIndex?: number; @@ -2479,6 +2737,7 @@ const Paging = Object.assign(_comp // owners: // FormItem // Column +// SimpleItem type IPatternRuleProps = React.PropsWithChildren<{ ignoreEmptyValue?: boolean; message?: string; @@ -2655,6 +2914,7 @@ const Position = Object.assign(_ // owners: // FormItem // Column +// SimpleItem type IRangeRuleProps = React.PropsWithChildren<{ ignoreEmptyValue?: boolean; max?: Date | number | string; @@ -2706,6 +2966,7 @@ const RemoteOperations = Object.assign(_componen componentType: "option", }); +// owners: +// Form +type ISimpleItemProps = React.PropsWithChildren<{ + aiOptions?: Record | { + disabled?: boolean; + instruction?: string | undefined; + }; + colSpan?: number | undefined; + cssClass?: string | undefined; + dataField?: string | undefined; + editorOptions?: any | undefined; + editorType?: FormItemComponent; + helpText?: string | undefined; + isRequired?: boolean | undefined; + itemType?: FormItemType; + label?: Record | { + alignment?: HorizontalAlignment; + location?: LabelLocation; + showColon?: boolean; + template?: ((itemData: { component: dxForm, dataField: string, editorOptions: any, editorType: string, name: string, text: string }, itemElement: any) => string | any) | template; + text?: string | undefined; + visible?: boolean; + }; + name?: string | undefined; + template?: ((data: { component: dxForm, dataField: string, editorOptions: Record, editorType: string, name: string }, itemElement: any) => string | any) | template; + validationRules?: Array; + visible?: boolean; + visibleIndex?: number | undefined; + render?: (...params: any) => React.ReactNode; + component?: React.ComponentType; +}> +const _componentSimpleItem = (props: ISimpleItemProps) => { + return React.createElement(NestedOption, { + ...props, + elementDescriptor: { + OptionName: "items", + IsCollectionItem: true, + ExpectedChildren: { + aiOptions: { optionName: "aiOptions", isCollectionItem: false }, + AsyncRule: { optionName: "validationRules", isCollectionItem: true }, + CompareRule: { optionName: "validationRules", isCollectionItem: true }, + CustomRule: { optionName: "validationRules", isCollectionItem: true }, + EmailRule: { optionName: "validationRules", isCollectionItem: true }, + label: { optionName: "label", isCollectionItem: false }, + NumericRule: { optionName: "validationRules", isCollectionItem: true }, + PatternRule: { optionName: "validationRules", isCollectionItem: true }, + RangeRule: { optionName: "validationRules", isCollectionItem: true }, + RequiredRule: { optionName: "validationRules", isCollectionItem: true }, + StringLengthRule: { optionName: "validationRules", isCollectionItem: true }, + validationRule: { optionName: "validationRules", isCollectionItem: true } + }, + TemplateProps: [{ + tmplOption: "template", + render: "render", + component: "component" + }], + PredefinedProps: { + itemType: "simple" + }, + }, + }); +}; + +const SimpleItem = Object.assign(_componentSimpleItem, { + componentType: "option", +}); + // owners: // DataGrid type ISortByGroupSummaryInfoProps = React.PropsWithChildren<{ @@ -2986,6 +3314,7 @@ const StateStoring = Object.assign | { + lg?: number | undefined; + md?: number | undefined; + sm?: number | undefined; + xs?: number | undefined; + }; + disabled?: boolean; + icon?: string | undefined; + items?: Array; + tabTemplate?: ((tabData: any, tabIndex: number, tabElement: any) => any) | template | undefined; + template?: ((tabData: any, tabIndex: number, tabElement: any) => any) | template | undefined; + title?: string | undefined; + tabRender?: (...params: any) => React.ReactNode; + tabComponent?: React.ComponentType; + render?: (...params: any) => React.ReactNode; + component?: React.ComponentType; +}> +const _componentTab = (props: ITabProps) => { + return React.createElement(NestedOption, { + ...props, + elementDescriptor: { + OptionName: "tabs", + IsCollectionItem: true, + ExpectedChildren: { + colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false } + }, + TemplateProps: [{ + tmplOption: "tabTemplate", + render: "tabRender", + component: "tabComponent" + }, { + tmplOption: "template", + render: "render", + component: "component" + }], + }, + }); +}; + +const Tab = Object.assign(_componentTab, { + componentType: "option", +}); + +// owners: +// Form +type ITabbedItemProps = React.PropsWithChildren<{ + colSpan?: number | undefined; + cssClass?: string | undefined; + itemType?: FormItemType; + name?: string | undefined; + tabPanelOptions?: dxTabPanelOptions | undefined; + tabs?: Array> | { + alignItemLabels?: boolean; + badge?: string | undefined; + colCount?: number; + colCountByScreen?: Record | { + lg?: number | undefined; + md?: number | undefined; + sm?: number | undefined; + xs?: number | undefined; + }; + disabled?: boolean; + icon?: string | undefined; + items?: Array; + tabTemplate?: ((tabData: any, tabIndex: number, tabElement: any) => any) | template | undefined; + template?: ((tabData: any, tabIndex: number, tabElement: any) => any) | template | undefined; + title?: string | undefined; + }[]; + visible?: boolean; + visibleIndex?: number | undefined; +}> +const _componentTabbedItem = (props: ITabbedItemProps) => { + return React.createElement(NestedOption, { + ...props, + elementDescriptor: { + OptionName: "items", + IsCollectionItem: true, + ExpectedChildren: { + tab: { optionName: "tabs", isCollectionItem: true }, + tabPanelOptions: { optionName: "tabPanelOptions", isCollectionItem: false } + }, + PredefinedProps: { + itemType: "tabbed" + }, + }, + }); +}; + +const TabbedItem = Object.assign(_componentTabbedItem, { + componentType: "option", +}); + +// owners: +// TabbedItem +type ITabPanelOptionsProps = React.PropsWithChildren<{ + accessKey?: string | undefined; + activeStateEnabled?: boolean; + animationEnabled?: boolean; + dataSource?: Array | DataSource | DataSourceOptions | null | Store | string; + deferRendering?: boolean; + disabled?: boolean; + elementAttr?: Record; + focusStateEnabled?: boolean; + height?: number | string | undefined; + hint?: string | undefined; + hoverStateEnabled?: boolean; + iconPosition?: TabsIconPosition; + itemHoldTimeout?: number; + items?: Array; + itemTemplate?: ((itemData: any, itemIndex: number, itemElement: any) => string | any) | template; + itemTitleTemplate?: ((itemData: any, itemIndex: number, itemElement: any) => string | any) | template; + keyExpr?: (() => void) | string; + loop?: boolean; + noDataText?: string; + onContentReady?: ((e: TabPanelContentReadyEvent) => void); + onDisposing?: ((e: TabPanelDisposingEvent) => void); + onInitialized?: ((e: TabPanelInitializedEvent) => void); + onItemClick?: ((e: ItemClickEvent) => void); + onItemContextMenu?: ((e: ItemContextMenuEvent) => void); + onItemHold?: ((e: ItemHoldEvent) => void); + onItemRendered?: ((e: ItemRenderedEvent) => void); + onOptionChanged?: ((e: TabPanelOptionChangedEvent) => void); + onSelectionChanged?: ((e: SelectionChangedEvent) => void); + onSelectionChanging?: ((e: SelectionChangingEvent) => void); + onTitleClick?: ((e: TitleClickEvent) => void); + onTitleHold?: ((e: TitleHoldEvent) => void); + onTitleRendered?: ((e: TitleRenderedEvent) => void); + repaintChangesOnly?: boolean; + rtlEnabled?: boolean; + scrollByContent?: boolean; + scrollingEnabled?: boolean; + selectedIndex?: number; + selectedItem?: any; + showNavButtons?: boolean; + stylingMode?: TabsStyle; + swipeEnabled?: boolean; + tabIndex?: number; + tabsPosition?: CommonPosition; + visible?: boolean; + width?: number | string | undefined; + defaultItems?: Array; + onItemsChange?: (value: Array) => void; + defaultSelectedIndex?: number; + onSelectedIndexChange?: (value: number) => void; + defaultSelectedItem?: any; + onSelectedItemChange?: (value: any) => void; + itemRender?: (...params: any) => React.ReactNode; + itemComponent?: React.ComponentType; + itemTitleRender?: (...params: any) => React.ReactNode; + itemTitleComponent?: React.ComponentType; +}> +const _componentTabPanelOptions = (props: ITabPanelOptionsProps) => { + return React.createElement(NestedOption, { + ...props, + elementDescriptor: { + OptionName: "tabPanelOptions", + DefaultsProps: { + defaultItems: "items", + defaultSelectedIndex: "selectedIndex", + defaultSelectedItem: "selectedItem" + }, + ExpectedChildren: { + item: { optionName: "items", isCollectionItem: true }, + tabPanelOptionsItem: { optionName: "items", isCollectionItem: true } + }, + TemplateProps: [{ + tmplOption: "itemTemplate", + render: "itemRender", + component: "itemComponent" + }, { + tmplOption: "itemTitleTemplate", + render: "itemTitleRender", + component: "itemTitleComponent" + }], + }, + }); +}; + +const TabPanelOptions = Object.assign(_componentTabPanelOptions, { + componentType: "option", +}); + +// owners: +// TabPanelOptions +type ITabPanelOptionsItemProps = React.PropsWithChildren<{ + badge?: string; + disabled?: boolean; + html?: string; + icon?: string; + tabTemplate?: (() => string | any) | template; + template?: ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | template; + text?: string; + title?: string; + visible?: boolean; + tabRender?: (...params: any) => React.ReactNode; + tabComponent?: React.ComponentType; + render?: (...params: any) => React.ReactNode; + component?: React.ComponentType; +}> +const _componentTabPanelOptionsItem = (props: ITabPanelOptionsItemProps) => { + return React.createElement(NestedOption, { + ...props, + elementDescriptor: { + OptionName: "items", + IsCollectionItem: true, + TemplateProps: [{ + tmplOption: "tabTemplate", + render: "tabRender", + component: "tabComponent" + }, { + tmplOption: "template", + render: "render", + component: "component" + }], + }, + }); +}; + +const TabPanelOptionsItem = Object.assign(_componentTabPanelOptionsItem, { + componentType: "option", +}); + // owners: // Editing // Export @@ -3199,6 +3756,7 @@ const _componentToolbar = (props: IToolbarProps) => { elementDescriptor: { OptionName: "toolbar", ExpectedChildren: { + dataGridToolbarItem: { optionName: "items", isCollectionItem: true }, item: { optionName: "items", isCollectionItem: true } }, }, @@ -3288,6 +3846,7 @@ const TotalItem = Object.assign // owners: // FormItem // Column +// SimpleItem type IValidationRuleProps = React.PropsWithChildren<{ message?: string; trim?: boolean; @@ -3361,6 +3920,10 @@ export { IBoundaryOffsetProps, Button, IButtonProps, + ButtonItem, + IButtonItemProps, + ButtonOptions, + IButtonOptionsProps, Change, IChangeProps, ColCountByScreen, @@ -3403,6 +3966,8 @@ export { IDataGridHeaderFilterTextsProps, DataGridSelection, IDataGridSelectionProps, + DataGridToolbarItem, + IDataGridToolbarItemProps, Editing, IEditingProps, EditingTexts, @@ -3413,6 +3978,8 @@ export { IEditorOptionsButtonProps, EmailRule, IEmailRuleProps, + EmptyItem, + IEmptyItemProps, Export, IExportProps, ExportTexts, @@ -3509,6 +4076,8 @@ export { ISelectionProps, Show, IShowProps, + SimpleItem, + ISimpleItemProps, SortByGroupSummaryInfo, ISortByGroupSummaryInfoProps, Sorting, @@ -3521,6 +4090,14 @@ export { ISummaryProps, SummaryTexts, ISummaryTextsProps, + Tab, + ITabProps, + TabbedItem, + ITabbedItemProps, + TabPanelOptions, + ITabPanelOptionsProps, + TabPanelOptionsItem, + ITabPanelOptionsItemProps, Texts, ITextsProps, To, diff --git a/packages/devextreme-react/src/tree-list.ts b/packages/devextreme-react/src/tree-list.ts index d5e46bfc933e..fa5ca7d31a5f 100644 --- a/packages/devextreme-react/src/tree-list.ts +++ b/packages/devextreme-react/src/tree-list.ts @@ -11,13 +11,14 @@ import NestedOption from "./core/nested-option"; import type { dxTreeListColumn, AdaptiveDetailRowPreparingEvent, AIColumnRequestCreatingEvent, CellClickEvent, CellDblClickEvent, CellPreparedEvent, ContentReadyEvent, ContextMenuPreparingEvent, DataErrorOccurredEvent, DisposingEvent, EditCanceledEvent, EditCancelingEvent, EditingStartEvent, EditorPreparedEvent, EditorPreparingEvent, FocusedCellChangingEvent, FocusedRowChangingEvent, InitializedEvent, InitNewRowEvent, KeyDownEvent, NodesInitializedEvent, RowClickEvent, RowCollapsedEvent, RowCollapsingEvent, RowDblClickEvent, RowExpandedEvent, RowExpandingEvent, RowInsertedEvent, RowInsertingEvent, RowPreparedEvent, RowRemovedEvent, RowRemovingEvent, RowUpdatedEvent, RowUpdatingEvent, RowValidatingEvent, SavedEvent, SavingEvent, ToolbarPreparingEvent, dxTreeListRowObject, TreeListPredefinedColumnButton, dxTreeListColumnButton, TreeListCommandColumnType, TreeListPredefinedToolbarItem, dxTreeListToolbarItem } from "devextreme/ui/tree_list"; import type { DataChange, AIColumnMode, DataChangeType, ColumnAIOptions, FilterOperation, FilterType, FixedPosition, ColumnHeaderFilter as GridsColumnHeaderFilter, SelectedFilterOperation, ColumnChooserMode, ColumnChooserSearchConfig, ColumnChooserSelectionConfig, HeaderFilterGroupInterval, ColumnHeaderFilterSearchConfig, GridsEditMode, GridsEditRefreshMode, StartEditAction, FilterPanel as GridsFilterPanel, FilterPanelTexts as GridsFilterPanelTexts, ApplyFilterMode, HeaderFilterSearchConfig, HeaderFilterTexts, EnterKeyAction, EnterKeyDirection, PagerPageSize, GridBase, DataRenderMode, StateStoreType } from "devextreme/common/grids"; -import type { ContentReadyEvent as TextBoxContentReadyEvent, DisposingEvent as TextBoxDisposingEvent, InitializedEvent as TextBoxInitializedEvent, KeyDownEvent as TextBoxKeyDownEvent, dxTextBoxOptions, TextBoxType, ChangeEvent, CopyEvent, CutEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InputEvent, KeyUpEvent, OptionChangedEvent, PasteEvent, ValueChangedEvent } from "devextreme/ui/text_box"; -import type { ContentReadyEvent as FilterBuilderContentReadyEvent, DisposingEvent as FilterBuilderDisposingEvent, EditorPreparedEvent as FilterBuilderEditorPreparedEvent, EditorPreparingEvent as FilterBuilderEditorPreparingEvent, InitializedEvent as FilterBuilderInitializedEvent, dxFilterBuilderField, FieldInfo, OptionChangedEvent as FilterBuilderOptionChangedEvent, ValueChangedEvent as FilterBuilderValueChangedEvent, FilterBuilderOperation, dxFilterBuilderCustomOperation, GroupOperation } from "devextreme/ui/filter_builder"; -import type { ContentReadyEvent as FormContentReadyEvent, DisposingEvent as FormDisposingEvent, InitializedEvent as FormInitializedEvent, dxFormSimpleItem, dxFormOptions, OptionChangedEvent as FormOptionChangedEvent, dxFormGroupItem, dxFormTabbedItem, dxFormEmptyItem, dxFormButtonItem, LabelLocation, FormLabelMode, EditorEnterKeyEvent, FieldDataChangedEvent, SmartPastedEvent, SmartPastingEvent, FormItemComponent, FormItemType } from "devextreme/ui/form"; -import type { ContentReadyEvent as ButtonContentReadyEvent, DisposingEvent as ButtonDisposingEvent, InitializedEvent as ButtonInitializedEvent, dxButtonOptions, OptionChangedEvent as ButtonOptionChangedEvent, ClickEvent } from "devextreme/ui/button"; +import type { ContentReadyEvent as ButtonContentReadyEvent, DisposingEvent as ButtonDisposingEvent, InitializedEvent as ButtonInitializedEvent, dxButtonOptions, ClickEvent, OptionChangedEvent } from "devextreme/ui/button"; +import type { ContentReadyEvent as TextBoxContentReadyEvent, DisposingEvent as TextBoxDisposingEvent, InitializedEvent as TextBoxInitializedEvent, KeyDownEvent as TextBoxKeyDownEvent, dxTextBoxOptions, OptionChangedEvent as TextBoxOptionChangedEvent, TextBoxType, ChangeEvent, CopyEvent, CutEvent, EnterKeyEvent, FocusInEvent, FocusOutEvent, InputEvent, KeyUpEvent, PasteEvent, ValueChangedEvent } from "devextreme/ui/text_box"; +import type { ContentReadyEvent as FilterBuilderContentReadyEvent, DisposingEvent as FilterBuilderDisposingEvent, EditorPreparedEvent as FilterBuilderEditorPreparedEvent, EditorPreparingEvent as FilterBuilderEditorPreparingEvent, InitializedEvent as FilterBuilderInitializedEvent, OptionChangedEvent as FilterBuilderOptionChangedEvent, dxFilterBuilderField, FieldInfo, ValueChangedEvent as FilterBuilderValueChangedEvent, FilterBuilderOperation, dxFilterBuilderCustomOperation, GroupOperation } from "devextreme/ui/filter_builder"; +import type { ContentReadyEvent as FormContentReadyEvent, DisposingEvent as FormDisposingEvent, InitializedEvent as FormInitializedEvent, FormItemType, FormPredefinedButtonItem, OptionChangedEvent as FormOptionChangedEvent, dxFormSimpleItem, dxFormOptions, dxFormGroupItem, dxFormTabbedItem, dxFormEmptyItem, dxFormButtonItem, LabelLocation, FormLabelMode, EditorEnterKeyEvent, FieldDataChangedEvent, SmartPastedEvent, SmartPastingEvent, FormItemComponent } from "devextreme/ui/form"; +import type { ContentReadyEvent as TabPanelContentReadyEvent, DisposingEvent as TabPanelDisposingEvent, InitializedEvent as TabPanelInitializedEvent, OptionChangedEvent as TabPanelOptionChangedEvent, dxTabPanelOptions, dxTabPanelItem, ItemClickEvent, ItemContextMenuEvent, ItemHoldEvent, ItemRenderedEvent, SelectionChangedEvent, SelectionChangingEvent, TitleClickEvent, TitleHoldEvent, TitleRenderedEvent } from "devextreme/ui/tab_panel"; import type { AIIntegration } from "devextreme/common/ai-integration"; import type { AnimationConfig, CollisionResolution, PositionConfig, AnimationState, AnimationType, CollisionResolutionCombination } from "devextreme/common/core/animation"; -import type { ValidationRuleType, HorizontalAlignment, VerticalAlignment, template, TextEditorButtonLocation, DataType, Format as CommonFormat, SortOrder, SearchMode, ComparisonOperator, TextBoxPredefinedButton, TextEditorButton, LabelMode, MaskMode, EditorStyle, ValidationMessageMode, Position as CommonPosition, ValidationStatus, PositionAlignment, Mode, Direction, ToolbarItemLocation, ToolbarItemComponent, ButtonStyle, ButtonType, DisplayMode, DragDirection, DragHighlight, ScrollMode, ScrollbarMode, SingleMultipleOrNone } from "devextreme/common"; +import type { ValidationRuleType, HorizontalAlignment, VerticalAlignment, template, TextEditorButtonLocation, ButtonStyle, ButtonType, DataType, Format as CommonFormat, SortOrder, SearchMode, ComparisonOperator, TextBoxPredefinedButton, TextEditorButton, LabelMode, MaskMode, EditorStyle, ValidationMessageMode, Position as CommonPosition, ValidationStatus, PositionAlignment, Mode, Direction, ToolbarItemLocation, ToolbarItemComponent, DisplayMode, DragDirection, DragHighlight, ScrollMode, ScrollbarMode, SingleMultipleOrNone, TabsIconPosition, TabsStyle } from "devextreme/common"; import type { event } from "devextreme/events/events.types"; import type { Format as LocalizationFormat } from "devextreme/common/core/localization"; import type { DataSourceOptions } from "devextreme/data/data_source"; @@ -26,8 +27,8 @@ import type { dxPopupOptions, dxPopupToolbarItem, ToolbarLocation } from "devext import type { EventInfo } from "devextreme/common/core/events"; import type { Component } from "devextreme/core/component"; import type { LoadingAnimationType } from "devextreme/ui/load_indicator"; -import type { LocateInMenuMode, ShowTextMode } from "devextreme/ui/toolbar"; import type { CollectionWidgetItem } from "devextreme/ui/collection/ui.collection_widget.base"; +import type { LocateInMenuMode, ShowTextMode } from "devextreme/ui/toolbar"; import type { LoadPanelIndicatorProperties } from "devextreme/ui/load_panel"; import type dxOverlay from "devextreme/ui/overlay"; @@ -36,6 +37,7 @@ import type dxPopup from "devextreme/ui/popup"; import type dxForm from "devextreme/ui/form"; import type dxSortable from "devextreme/ui/sortable"; import type dxDraggable from "devextreme/ui/draggable"; +import type DataSource from "devextreme/data/data_source"; import type * as CommonTypes from "devextreme/common"; @@ -209,6 +211,7 @@ const AI = Object.assign(_componentAI, // owners: // FormItem +// SimpleItem type IAIOptionsProps = React.PropsWithChildren<{ disabled?: boolean; instruction?: string | undefined; @@ -253,6 +256,7 @@ const Animation = Object.assign // owners: // FormItem // Column +// SimpleItem type IAsyncRuleProps = React.PropsWithChildren<{ ignoreEmptyValue?: boolean; message?: string; @@ -355,6 +359,87 @@ const Button = Object.assign(_comp componentType: "option", }); +// owners: +// Form +type IButtonItemProps = React.PropsWithChildren<{ + buttonOptions?: dxButtonOptions | undefined; + colSpan?: number | undefined; + cssClass?: string | undefined; + horizontalAlignment?: HorizontalAlignment; + itemType?: FormItemType; + name?: FormPredefinedButtonItem | string | undefined; + verticalAlignment?: VerticalAlignment; + visible?: boolean; + visibleIndex?: number | undefined; +}> +const _componentButtonItem = (props: IButtonItemProps) => { + return React.createElement(NestedOption, { + ...props, + elementDescriptor: { + OptionName: "items", + IsCollectionItem: true, + ExpectedChildren: { + buttonOptions: { optionName: "buttonOptions", isCollectionItem: false } + }, + PredefinedProps: { + itemType: "button" + }, + }, + }); +}; + +const ButtonItem = Object.assign(_componentButtonItem, { + componentType: "option", +}); + +// owners: +// ButtonItem +type IButtonOptionsProps = React.PropsWithChildren<{ + accessKey?: string | undefined; + activeStateEnabled?: boolean; + disabled?: boolean; + elementAttr?: Record; + focusStateEnabled?: boolean; + height?: number | string | undefined; + hint?: string | undefined; + hoverStateEnabled?: boolean; + icon?: string; + onClick?: ((e: ClickEvent) => void); + onContentReady?: ((e: ButtonContentReadyEvent) => void); + onDisposing?: ((e: ButtonDisposingEvent) => void); + onInitialized?: ((e: ButtonInitializedEvent) => void); + onOptionChanged?: ((e: OptionChangedEvent) => void); + rtlEnabled?: boolean; + stylingMode?: ButtonStyle; + tabIndex?: number; + template?: ((buttonData: { icon: string, text: string }, contentElement: any) => string | any) | template; + text?: string; + type?: ButtonType | string; + useSubmitBehavior?: boolean; + validationGroup?: string | undefined; + visible?: boolean; + width?: number | string | undefined; + render?: (...params: any) => React.ReactNode; + component?: React.ComponentType; +}> +const _componentButtonOptions = (props: IButtonOptionsProps) => { + return React.createElement(NestedOption, { + ...props, + elementDescriptor: { + OptionName: "buttonOptions", + TemplateProps: [{ + tmplOption: "template", + render: "render", + component: "component" + }], + }, + }); +}; + +const ButtonOptions = Object.assign(_componentButtonOptions, { + componentType: "option", +}); + // owners: // Editing type IChangeProps = React.PropsWithChildren<{ @@ -380,6 +465,8 @@ const Change = Object.assign(_comp // owners: // Form +// GroupItem +// Tab type IColCountByScreenProps = React.PropsWithChildren<{ lg?: number | undefined; md?: number | undefined; @@ -808,6 +895,7 @@ const ColumnLookup = Object.assign any); comparisonType?: ComparisonOperator; @@ -887,6 +975,7 @@ const CustomOperation = Object.assign void); onKeyDown?: ((e: TextBoxKeyDownEvent) => void); onKeyUp?: ((e: KeyUpEvent) => void); - onOptionChanged?: ((e: OptionChangedEvent) => void); + onOptionChanged?: ((e: TextBoxOptionChangedEvent) => void); onPaste?: ((e: PasteEvent) => void); onValueChanged?: ((e: ValueChangedEvent) => void); placeholder?: string; @@ -1111,6 +1200,7 @@ const EditorOptionsButton = Object.assign componentType: "option", }); +// owners: +// Form +type IEmptyItemProps = React.PropsWithChildren<{ + colSpan?: number | undefined; + cssClass?: string | undefined; + itemType?: FormItemType; + name?: string | undefined; + visible?: boolean; + visibleIndex?: number | undefined; +}> +const _componentEmptyItem = (props: IEmptyItemProps) => { + return React.createElement(NestedOption, { + ...props, + elementDescriptor: { + OptionName: "items", + IsCollectionItem: true, + PredefinedProps: { + itemType: "empty" + }, + }, + }); +}; + +const EmptyItem = Object.assign(_componentEmptyItem, { + componentType: "option", +}); + // owners: // FilterBuilder type IFieldProps = React.PropsWithChildren<{ @@ -1560,7 +1677,13 @@ const _componentForm = (props: IFormProps) => { defaultFormData: "formData" }, ExpectedChildren: { - colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false } + ButtonItem: { optionName: "items", isCollectionItem: true }, + colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false }, + EmptyItem: { optionName: "items", isCollectionItem: true }, + GroupItem: { optionName: "items", isCollectionItem: true }, + item: { optionName: "items", isCollectionItem: true }, + SimpleItem: { optionName: "items", isCollectionItem: true }, + TabbedItem: { optionName: "items", isCollectionItem: true } }, }, }); @@ -1683,6 +1806,61 @@ const From = Object.assign(_componen componentType: "option", }); +// owners: +// Form +type IGroupItemProps = React.PropsWithChildren<{ + alignItemLabels?: boolean; + caption?: string | undefined; + captionTemplate?: ((data: { caption: string, component: dxForm, name: string }, itemElement: any) => string | any) | template; + colCount?: number; + colCountByScreen?: Record | { + lg?: number | undefined; + md?: number | undefined; + sm?: number | undefined; + xs?: number | undefined; + }; + colSpan?: number | undefined; + cssClass?: string | undefined; + items?: Array; + itemType?: FormItemType; + name?: string | undefined; + template?: ((data: { component: dxForm, formData: Record }, itemElement: any) => string | any) | template; + visible?: boolean; + visibleIndex?: number | undefined; + captionRender?: (...params: any) => React.ReactNode; + captionComponent?: React.ComponentType; + render?: (...params: any) => React.ReactNode; + component?: React.ComponentType; +}> +const _componentGroupItem = (props: IGroupItemProps) => { + return React.createElement(NestedOption, { + ...props, + elementDescriptor: { + OptionName: "items", + IsCollectionItem: true, + ExpectedChildren: { + colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false } + }, + TemplateProps: [{ + tmplOption: "captionTemplate", + render: "captionRender", + component: "captionComponent" + }, { + tmplOption: "template", + render: "render", + component: "component" + }], + PredefinedProps: { + itemType: "group" + }, + }, + }); +}; + +const GroupItem = Object.assign(_componentGroupItem, { + componentType: "option", +}); + // owners: // FilterBuilder type IGroupOperationDescriptionsProps = React.PropsWithChildren<{ @@ -1813,25 +1991,88 @@ const IndicatorOptions = Object.assign string | any) | template; + template?: ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | template; + text?: string; + title?: string; + visible?: boolean; + aiOptions?: Record | { + disabled?: boolean; + instruction?: string | undefined; + }; + colSpan?: number | undefined; + cssClass?: string | undefined; + dataField?: string | undefined; + editorOptions?: any | undefined; + editorType?: FormItemComponent; + helpText?: string | undefined; + isRequired?: boolean | undefined; + itemType?: FormItemType; + label?: Record | { + alignment?: HorizontalAlignment; + location?: LabelLocation; + showColon?: boolean; + template?: ((itemData: { component: dxForm, dataField: string, editorOptions: any, editorType: string, name: string, text: string }, itemElement: any) => string | any) | template; + text?: string | undefined; + visible?: boolean; + }; + name?: string | undefined | FormPredefinedButtonItem | TreeListPredefinedToolbarItem; + validationRules?: Array; + visibleIndex?: number | undefined; + alignItemLabels?: boolean; + caption?: string | undefined; + captionTemplate?: ((data: { caption: string, component: dxForm, name: string }, itemElement: any) => string | any) | template; + colCount?: number; + colCountByScreen?: Record | { + lg?: number | undefined; + md?: number | undefined; + sm?: number | undefined; + xs?: number | undefined; + }; + items?: Array; + tabPanelOptions?: dxTabPanelOptions | undefined; + tabs?: Array> | { + alignItemLabels?: boolean; + badge?: string | undefined; + colCount?: number; + colCountByScreen?: Record | { + lg?: number | undefined; + md?: number | undefined; + sm?: number | undefined; + xs?: number | undefined; + }; + disabled?: boolean; + icon?: string | undefined; + items?: Array; + tabTemplate?: ((tabData: any, tabIndex: number, tabElement: any) => any) | template | undefined; + template?: ((tabData: any, tabIndex: number, tabElement: any) => any) | template | undefined; + title?: string | undefined; + }[]; + buttonOptions?: dxButtonOptions | undefined; + horizontalAlignment?: HorizontalAlignment; + verticalAlignment?: VerticalAlignment; locateInMenu?: LocateInMenuMode; location?: ToolbarItemLocation; menuItemTemplate?: (() => string | any) | template; - name?: string | TreeListPredefinedToolbarItem; options?: any; showText?: ShowTextMode; - template?: ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | template; - text?: string; - visible?: boolean; widget?: ToolbarItemComponent; - menuItemRender?: (...params: any) => React.ReactNode; - menuItemComponent?: React.ComponentType; + tabRender?: (...params: any) => React.ReactNode; + tabComponent?: React.ComponentType; render?: (...params: any) => React.ReactNode; component?: React.ComponentType; + captionRender?: (...params: any) => React.ReactNode; + captionComponent?: React.ComponentType; + menuItemRender?: (...params: any) => React.ReactNode; + menuItemComponent?: React.ComponentType; }> const _componentItem = (props: IItemProps) => { return React.createElement(NestedOption, { @@ -1839,14 +2080,40 @@ const _componentItem = (props: IItemProps) => { elementDescriptor: { OptionName: "items", IsCollectionItem: true, + ExpectedChildren: { + aiOptions: { optionName: "aiOptions", isCollectionItem: false }, + AsyncRule: { optionName: "validationRules", isCollectionItem: true }, + buttonOptions: { optionName: "buttonOptions", isCollectionItem: false }, + colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false }, + CompareRule: { optionName: "validationRules", isCollectionItem: true }, + CustomRule: { optionName: "validationRules", isCollectionItem: true }, + EmailRule: { optionName: "validationRules", isCollectionItem: true }, + label: { optionName: "label", isCollectionItem: false }, + NumericRule: { optionName: "validationRules", isCollectionItem: true }, + PatternRule: { optionName: "validationRules", isCollectionItem: true }, + RangeRule: { optionName: "validationRules", isCollectionItem: true }, + RequiredRule: { optionName: "validationRules", isCollectionItem: true }, + StringLengthRule: { optionName: "validationRules", isCollectionItem: true }, + tab: { optionName: "tabs", isCollectionItem: true }, + tabPanelOptions: { optionName: "tabPanelOptions", isCollectionItem: false }, + validationRule: { optionName: "validationRules", isCollectionItem: true } + }, TemplateProps: [{ - tmplOption: "menuItemTemplate", - render: "menuItemRender", - component: "menuItemComponent" + tmplOption: "tabTemplate", + render: "tabRender", + component: "tabComponent" }, { tmplOption: "template", render: "render", component: "component" + }, { + tmplOption: "captionTemplate", + render: "captionRender", + component: "captionComponent" + }, { + tmplOption: "menuItemTemplate", + render: "menuItemRender", + component: "menuItemComponent" }], }, }); @@ -1879,6 +2146,7 @@ const KeyboardNavigation = Object.assign(_componentMy, // owners: // FormItem // Column +// SimpleItem type INumericRuleProps = React.PropsWithChildren<{ ignoreEmptyValue?: boolean; message?: string; @@ -2064,10 +2333,10 @@ type IOptionsProps = React.PropsWithChildren<{ hoverStateEnabled?: boolean; icon?: string; onClick?: ((e: ClickEvent) => void); - onContentReady?: ((e: ButtonContentReadyEvent) => void); - onDisposing?: ((e: ButtonDisposingEvent) => void); - onInitialized?: ((e: ButtonInitializedEvent) => void); - onOptionChanged?: ((e: ButtonOptionChangedEvent) => void); + onContentReady?: ((e: ContentReadyEvent) => void); + onDisposing?: ((e: DisposingEvent) => void); + onInitialized?: ((e: InitializedEvent) => void); + onOptionChanged?: ((e: OptionChangedEvent) => void); rtlEnabled?: boolean; stylingMode?: ButtonStyle; tabIndex?: number; @@ -2155,6 +2424,7 @@ const Paging = Object.assign(_comp // owners: // FormItem // Column +// SimpleItem type IPatternRuleProps = React.PropsWithChildren<{ ignoreEmptyValue?: boolean; message?: string; @@ -2331,6 +2601,7 @@ const Position = Object.assign(_ // owners: // FormItem // Column +// SimpleItem type IRangeRuleProps = React.PropsWithChildren<{ ignoreEmptyValue?: boolean; max?: Date | number | string; @@ -2379,6 +2650,7 @@ const RemoteOperations = Object.assign(_componen componentType: "option", }); +// owners: +// Form +type ISimpleItemProps = React.PropsWithChildren<{ + aiOptions?: Record | { + disabled?: boolean; + instruction?: string | undefined; + }; + colSpan?: number | undefined; + cssClass?: string | undefined; + dataField?: string | undefined; + editorOptions?: any | undefined; + editorType?: FormItemComponent; + helpText?: string | undefined; + isRequired?: boolean | undefined; + itemType?: FormItemType; + label?: Record | { + alignment?: HorizontalAlignment; + location?: LabelLocation; + showColon?: boolean; + template?: ((itemData: { component: dxForm, dataField: string, editorOptions: any, editorType: string, name: string, text: string }, itemElement: any) => string | any) | template; + text?: string | undefined; + visible?: boolean; + }; + name?: string | undefined; + template?: ((data: { component: dxForm, dataField: string, editorOptions: Record, editorType: string, name: string }, itemElement: any) => string | any) | template; + validationRules?: Array; + visible?: boolean; + visibleIndex?: number | undefined; + render?: (...params: any) => React.ReactNode; + component?: React.ComponentType; +}> +const _componentSimpleItem = (props: ISimpleItemProps) => { + return React.createElement(NestedOption, { + ...props, + elementDescriptor: { + OptionName: "items", + IsCollectionItem: true, + ExpectedChildren: { + aiOptions: { optionName: "aiOptions", isCollectionItem: false }, + AsyncRule: { optionName: "validationRules", isCollectionItem: true }, + CompareRule: { optionName: "validationRules", isCollectionItem: true }, + CustomRule: { optionName: "validationRules", isCollectionItem: true }, + EmailRule: { optionName: "validationRules", isCollectionItem: true }, + label: { optionName: "label", isCollectionItem: false }, + NumericRule: { optionName: "validationRules", isCollectionItem: true }, + PatternRule: { optionName: "validationRules", isCollectionItem: true }, + RangeRule: { optionName: "validationRules", isCollectionItem: true }, + RequiredRule: { optionName: "validationRules", isCollectionItem: true }, + StringLengthRule: { optionName: "validationRules", isCollectionItem: true }, + validationRule: { optionName: "validationRules", isCollectionItem: true } + }, + TemplateProps: [{ + tmplOption: "template", + render: "render", + component: "component" + }], + PredefinedProps: { + itemType: "simple" + }, + }, + }); +}; + +const SimpleItem = Object.assign(_componentSimpleItem, { + componentType: "option", +}); + // owners: // TreeList type ISortingProps = React.PropsWithChildren<{ @@ -2634,6 +2973,7 @@ const StateStoring = Object.assign | { + lg?: number | undefined; + md?: number | undefined; + sm?: number | undefined; + xs?: number | undefined; + }; + disabled?: boolean; + icon?: string | undefined; + items?: Array; + tabTemplate?: ((tabData: any, tabIndex: number, tabElement: any) => any) | template | undefined; + template?: ((tabData: any, tabIndex: number, tabElement: any) => any) | template | undefined; + title?: string | undefined; + tabRender?: (...params: any) => React.ReactNode; + tabComponent?: React.ComponentType; + render?: (...params: any) => React.ReactNode; + component?: React.ComponentType; +}> +const _componentTab = (props: ITabProps) => { + return React.createElement(NestedOption, { + ...props, + elementDescriptor: { + OptionName: "tabs", + IsCollectionItem: true, + ExpectedChildren: { + colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false } + }, + TemplateProps: [{ + tmplOption: "tabTemplate", + render: "tabRender", + component: "tabComponent" + }, { + tmplOption: "template", + render: "render", + component: "component" + }], + }, + }); +}; + +const Tab = Object.assign(_componentTab, { + componentType: "option", +}); + +// owners: +// Form +type ITabbedItemProps = React.PropsWithChildren<{ + colSpan?: number | undefined; + cssClass?: string | undefined; + itemType?: FormItemType; + name?: string | undefined; + tabPanelOptions?: dxTabPanelOptions | undefined; + tabs?: Array> | { + alignItemLabels?: boolean; + badge?: string | undefined; + colCount?: number; + colCountByScreen?: Record | { + lg?: number | undefined; + md?: number | undefined; + sm?: number | undefined; + xs?: number | undefined; + }; + disabled?: boolean; + icon?: string | undefined; + items?: Array; + tabTemplate?: ((tabData: any, tabIndex: number, tabElement: any) => any) | template | undefined; + template?: ((tabData: any, tabIndex: number, tabElement: any) => any) | template | undefined; + title?: string | undefined; + }[]; + visible?: boolean; + visibleIndex?: number | undefined; +}> +const _componentTabbedItem = (props: ITabbedItemProps) => { + return React.createElement(NestedOption, { + ...props, + elementDescriptor: { + OptionName: "items", + IsCollectionItem: true, + ExpectedChildren: { + tab: { optionName: "tabs", isCollectionItem: true }, + tabPanelOptions: { optionName: "tabPanelOptions", isCollectionItem: false } + }, + PredefinedProps: { + itemType: "tabbed" + }, + }, + }); +}; + +const TabbedItem = Object.assign(_componentTabbedItem, { + componentType: "option", +}); + +// owners: +// TabbedItem +type ITabPanelOptionsProps = React.PropsWithChildren<{ + accessKey?: string | undefined; + activeStateEnabled?: boolean; + animationEnabled?: boolean; + dataSource?: Array | DataSource | DataSourceOptions | null | Store | string; + deferRendering?: boolean; + disabled?: boolean; + elementAttr?: Record; + focusStateEnabled?: boolean; + height?: number | string | undefined; + hint?: string | undefined; + hoverStateEnabled?: boolean; + iconPosition?: TabsIconPosition; + itemHoldTimeout?: number; + items?: Array; + itemTemplate?: ((itemData: any, itemIndex: number, itemElement: any) => string | any) | template; + itemTitleTemplate?: ((itemData: any, itemIndex: number, itemElement: any) => string | any) | template; + keyExpr?: (() => void) | string; + loop?: boolean; + noDataText?: string; + onContentReady?: ((e: TabPanelContentReadyEvent) => void); + onDisposing?: ((e: TabPanelDisposingEvent) => void); + onInitialized?: ((e: TabPanelInitializedEvent) => void); + onItemClick?: ((e: ItemClickEvent) => void); + onItemContextMenu?: ((e: ItemContextMenuEvent) => void); + onItemHold?: ((e: ItemHoldEvent) => void); + onItemRendered?: ((e: ItemRenderedEvent) => void); + onOptionChanged?: ((e: TabPanelOptionChangedEvent) => void); + onSelectionChanged?: ((e: SelectionChangedEvent) => void); + onSelectionChanging?: ((e: SelectionChangingEvent) => void); + onTitleClick?: ((e: TitleClickEvent) => void); + onTitleHold?: ((e: TitleHoldEvent) => void); + onTitleRendered?: ((e: TitleRenderedEvent) => void); + repaintChangesOnly?: boolean; + rtlEnabled?: boolean; + scrollByContent?: boolean; + scrollingEnabled?: boolean; + selectedIndex?: number; + selectedItem?: any; + showNavButtons?: boolean; + stylingMode?: TabsStyle; + swipeEnabled?: boolean; + tabIndex?: number; + tabsPosition?: CommonPosition; + visible?: boolean; + width?: number | string | undefined; + defaultItems?: Array; + onItemsChange?: (value: Array) => void; + defaultSelectedIndex?: number; + onSelectedIndexChange?: (value: number) => void; + defaultSelectedItem?: any; + onSelectedItemChange?: (value: any) => void; + itemRender?: (...params: any) => React.ReactNode; + itemComponent?: React.ComponentType; + itemTitleRender?: (...params: any) => React.ReactNode; + itemTitleComponent?: React.ComponentType; +}> +const _componentTabPanelOptions = (props: ITabPanelOptionsProps) => { + return React.createElement(NestedOption, { + ...props, + elementDescriptor: { + OptionName: "tabPanelOptions", + DefaultsProps: { + defaultItems: "items", + defaultSelectedIndex: "selectedIndex", + defaultSelectedItem: "selectedItem" + }, + ExpectedChildren: { + item: { optionName: "items", isCollectionItem: true }, + tabPanelOptionsItem: { optionName: "items", isCollectionItem: true } + }, + TemplateProps: [{ + tmplOption: "itemTemplate", + render: "itemRender", + component: "itemComponent" + }, { + tmplOption: "itemTitleTemplate", + render: "itemTitleRender", + component: "itemTitleComponent" + }], + }, + }); +}; + +const TabPanelOptions = Object.assign(_componentTabPanelOptions, { + componentType: "option", +}); + +// owners: +// TabPanelOptions +type ITabPanelOptionsItemProps = React.PropsWithChildren<{ + badge?: string; + disabled?: boolean; + html?: string; + icon?: string; + tabTemplate?: (() => string | any) | template; + template?: ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | template; + text?: string; + title?: string; + visible?: boolean; + tabRender?: (...params: any) => React.ReactNode; + tabComponent?: React.ComponentType; + render?: (...params: any) => React.ReactNode; + component?: React.ComponentType; +}> +const _componentTabPanelOptionsItem = (props: ITabPanelOptionsItemProps) => { + return React.createElement(NestedOption, { + ...props, + elementDescriptor: { + OptionName: "items", + IsCollectionItem: true, + TemplateProps: [{ + tmplOption: "tabTemplate", + render: "tabRender", + component: "tabComponent" + }, { + tmplOption: "template", + render: "render", + component: "component" + }], + }, + }); +}; + +const TabPanelOptionsItem = Object.assign(_componentTabPanelOptionsItem, { + componentType: "option", +}); + // owners: // Editing // ColumnFixing @@ -2741,7 +3309,8 @@ const _componentToolbar = (props: IToolbarProps) => { elementDescriptor: { OptionName: "toolbar", ExpectedChildren: { - item: { optionName: "items", isCollectionItem: true } + item: { optionName: "items", isCollectionItem: true }, + treeListToolbarItem: { optionName: "items", isCollectionItem: true } }, }, }); @@ -2888,9 +3457,54 @@ const TreeListSelection = Object.assign string | any) | template; + name?: string | TreeListPredefinedToolbarItem; + options?: any; + showText?: ShowTextMode; + template?: ((itemData: CollectionWidgetItem, itemIndex: number, itemElement: any) => string | any) | template; + text?: string; + visible?: boolean; + widget?: ToolbarItemComponent; + menuItemRender?: (...params: any) => React.ReactNode; + menuItemComponent?: React.ComponentType; + render?: (...params: any) => React.ReactNode; + component?: React.ComponentType; +}> +const _componentTreeListToolbarItem = (props: ITreeListToolbarItemProps) => { + return React.createElement(NestedOption, { + ...props, + elementDescriptor: { + OptionName: "items", + IsCollectionItem: true, + TemplateProps: [{ + tmplOption: "menuItemTemplate", + render: "menuItemRender", + component: "menuItemComponent" + }, { + tmplOption: "template", + render: "render", + component: "component" + }], + }, + }); +}; + +const TreeListToolbarItem = Object.assign(_componentTreeListToolbarItem, { + componentType: "option", +}); + // owners: // FormItem // Column +// SimpleItem type IValidationRuleProps = React.PropsWithChildren<{ message?: string; trim?: boolean; @@ -2940,6 +3554,10 @@ export { IBoundaryOffsetProps, Button, IButtonProps, + ButtonItem, + IButtonItemProps, + ButtonOptions, + IButtonOptionsProps, Change, IChangeProps, ColCountByScreen, @@ -2984,6 +3602,8 @@ export { IEditorOptionsButtonProps, EmailRule, IEmailRuleProps, + EmptyItem, + IEmptyItemProps, Field, IFieldProps, FieldLookup, @@ -3008,6 +3628,8 @@ export { IFormItemProps, From, IFromProps, + GroupItem, + IGroupItemProps, GroupOperationDescriptions, IGroupOperationDescriptionsProps, HeaderFilter, @@ -3066,12 +3688,22 @@ export { ISelectionProps, Show, IShowProps, + SimpleItem, + ISimpleItemProps, Sorting, ISortingProps, StateStoring, IStateStoringProps, StringLengthRule, IStringLengthRuleProps, + Tab, + ITabProps, + TabbedItem, + ITabbedItemProps, + TabPanelOptions, + ITabPanelOptionsProps, + TabPanelOptionsItem, + ITabPanelOptionsItemProps, Texts, ITextsProps, To, @@ -3088,6 +3720,8 @@ export { ITreeListHeaderFilterTextsProps, TreeListSelection, ITreeListSelectionProps, + TreeListToolbarItem, + ITreeListToolbarItemProps, ValidationRule, IValidationRuleProps }; diff --git a/packages/devextreme-vue/src/data-grid.ts b/packages/devextreme-vue/src/data-grid.ts index 45465a450f76..661f7113e53e 100644 --- a/packages/devextreme-vue/src/data-grid.ts +++ b/packages/devextreme-vue/src/data-grid.ts @@ -104,8 +104,8 @@ import { dxDataGridColumnButton, DataGridCommandColumnType, SelectionSensitivity, - DataGridExportFormat, DataGridPredefinedToolbarItem, + DataGridExportFormat, DataGridScrollMode, dxDataGridToolbarItem, } from "devextreme/ui/data_grid"; @@ -115,6 +115,8 @@ import { HorizontalAlignment, VerticalAlignment, TextEditorButtonLocation, + ButtonStyle, + ButtonType, DataType, Format as CommonFormat, SortOrder, @@ -122,6 +124,8 @@ import { ComparisonOperator, SingleMultipleOrNone, SelectAllMode, + ToolbarItemLocation, + ToolbarItemComponent, TextBoxPredefinedButton, TextEditorButton, LabelMode, @@ -132,14 +136,12 @@ import { ValidationStatus, PositionAlignment, Direction, - ToolbarItemLocation, - ToolbarItemComponent, - ButtonStyle, - ButtonType, DisplayMode, DragDirection, DragHighlight, ScrollbarMode, + TabsIconPosition, + TabsStyle, } from "devextreme/common"; import { DataSourceOptions, @@ -206,9 +208,8 @@ import { OptionChangedEvent as ButtonOptionChangedEvent, } from "devextreme/ui/button"; import { - Format, -} from "devextreme/common/core/localization"; -import { + FormItemType, + FormPredefinedButtonItem, dxFormSimpleItem, dxFormOptions, dxFormGroupItem, @@ -226,8 +227,14 @@ import { SmartPastedEvent, SmartPastingEvent, FormItemComponent, - FormItemType, } from "devextreme/ui/form"; +import { + Format, +} from "devextreme/common/core/localization"; +import { + LocateInMenuMode, + ShowTextMode, +} from "devextreme/ui/toolbar"; import { event, } from "devextreme/events/events.types"; @@ -241,9 +248,22 @@ import { LoadingAnimationType, } from "devextreme/ui/load_indicator"; import { - LocateInMenuMode, - ShowTextMode, -} from "devextreme/ui/toolbar"; + dxTabPanelOptions, + dxTabPanelItem, + ContentReadyEvent as TabPanelContentReadyEvent, + DisposingEvent as TabPanelDisposingEvent, + InitializedEvent as TabPanelInitializedEvent, + ItemClickEvent, + ItemContextMenuEvent, + ItemHoldEvent, + ItemRenderedEvent, + OptionChangedEvent as TabPanelOptionChangedEvent, + SelectionChangedEvent as TabPanelSelectionChangedEvent, + SelectionChangingEvent, + TitleClickEvent, + TitleHoldEvent, + TitleRenderedEvent, +} from "devextreme/ui/tab_panel"; import { LoadPanelIndicatorProperties, } from "devextreme/ui/load_panel"; @@ -849,6 +869,109 @@ const DxButton = defineComponent(DxButtonConfig); options: { isCollectionItem: false, optionName: "options" } }; +const DxButtonItemConfig = { + emits: { + "update:isActive": null, + "update:hoveredElement": null, + "update:buttonOptions": null, + "update:colSpan": null, + "update:cssClass": null, + "update:horizontalAlignment": null, + "update:itemType": null, + "update:name": null, + "update:verticalAlignment": null, + "update:visible": null, + "update:visibleIndex": null, + }, + props: { + buttonOptions: Object as PropType>, + colSpan: Number, + cssClass: String, + horizontalAlignment: String as PropType, + itemType: String as PropType, + name: String as PropType, + verticalAlignment: String as PropType, + visible: Boolean, + visibleIndex: Number + } +}; + +prepareConfigurationComponentConfig(DxButtonItemConfig); + +const DxButtonItem = defineComponent(DxButtonItemConfig); + +(DxButtonItem as any).$_optionName = "items"; +(DxButtonItem as any).$_isCollectionItem = true; +(DxButtonItem as any).$_predefinedProps = { + itemType: "button" +}; +(DxButtonItem as any).$_expectedChildren = { + buttonOptions: { isCollectionItem: false, optionName: "buttonOptions" } +}; + +const DxButtonOptionsConfig = { + emits: { + "update:isActive": null, + "update:hoveredElement": null, + "update:accessKey": null, + "update:activeStateEnabled": null, + "update:disabled": null, + "update:elementAttr": null, + "update:focusStateEnabled": null, + "update:height": null, + "update:hint": null, + "update:hoverStateEnabled": null, + "update:icon": null, + "update:onClick": null, + "update:onContentReady": null, + "update:onDisposing": null, + "update:onInitialized": null, + "update:onOptionChanged": null, + "update:rtlEnabled": null, + "update:stylingMode": null, + "update:tabIndex": null, + "update:template": null, + "update:text": null, + "update:type": null, + "update:useSubmitBehavior": null, + "update:validationGroup": null, + "update:visible": null, + "update:width": null, + }, + props: { + accessKey: String, + activeStateEnabled: Boolean, + disabled: Boolean, + elementAttr: Object as PropType>, + focusStateEnabled: Boolean, + height: [Number, String], + hint: String, + hoverStateEnabled: Boolean, + icon: String, + onClick: Function as PropType<((e: ClickEvent) => void)>, + onContentReady: Function as PropType<((e: ButtonContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: ButtonDisposingEvent) => void)>, + onInitialized: Function as PropType<((e: ButtonInitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: ButtonOptionChangedEvent) => void)>, + rtlEnabled: Boolean, + stylingMode: String as PropType, + tabIndex: Number, + template: {}, + text: String, + type: String as PropType, + useSubmitBehavior: Boolean, + validationGroup: String, + visible: Boolean, + width: [Number, String] + } +}; + +prepareConfigurationComponentConfig(DxButtonOptionsConfig); + +const DxButtonOptions = defineComponent(DxButtonOptionsConfig); + +(DxButtonOptions as any).$_optionName = "buttonOptions"; + const DxChangeConfig = { emits: { "update:isActive": null, @@ -1557,6 +1680,48 @@ const DxDataGridSelection = defineComponent(DxDataGridSelectionConfig); (DxDataGridSelection as any).$_optionName = "selection"; +const DxDataGridToolbarItemConfig = { + emits: { + "update:isActive": null, + "update:hoveredElement": null, + "update:cssClass": null, + "update:disabled": null, + "update:html": null, + "update:locateInMenu": null, + "update:location": null, + "update:menuItemTemplate": null, + "update:name": null, + "update:options": null, + "update:showText": null, + "update:template": null, + "update:text": null, + "update:visible": null, + "update:widget": null, + }, + props: { + cssClass: String, + disabled: Boolean, + html: String, + locateInMenu: String as PropType, + location: String as PropType, + menuItemTemplate: {}, + name: String as PropType, + options: {}, + showText: String as PropType, + template: {}, + text: String, + visible: Boolean, + widget: String as PropType + } +}; + +prepareConfigurationComponentConfig(DxDataGridToolbarItemConfig); + +const DxDataGridToolbarItem = defineComponent(DxDataGridToolbarItemConfig); + +(DxDataGridToolbarItem as any).$_optionName = "items"; +(DxDataGridToolbarItem as any).$_isCollectionItem = true; + const DxEditingConfig = { emits: { "update:isActive": null, @@ -1827,6 +1992,37 @@ const DxEmailRule = defineComponent(DxEmailRuleConfig); type: "email" }; +const DxEmptyItemConfig = { + emits: { + "update:isActive": null, + "update:hoveredElement": null, + "update:colSpan": null, + "update:cssClass": null, + "update:itemType": null, + "update:name": null, + "update:visible": null, + "update:visibleIndex": null, + }, + props: { + colSpan: Number, + cssClass: String, + itemType: String as PropType, + name: String, + visible: Boolean, + visibleIndex: Number + } +}; + +prepareConfigurationComponentConfig(DxEmptyItemConfig); + +const DxEmptyItem = defineComponent(DxEmptyItemConfig); + +(DxEmptyItem as any).$_optionName = "items"; +(DxEmptyItem as any).$_isCollectionItem = true; +(DxEmptyItem as any).$_predefinedProps = { + itemType: "empty" +}; + const DxExportConfig = { emits: { "update:isActive": null, @@ -2362,7 +2558,13 @@ const DxForm = defineComponent(DxFormConfig); (DxForm as any).$_optionName = "form"; (DxForm as any).$_expectedChildren = { - colCountByScreen: { isCollectionItem: false, optionName: "colCountByScreen" } + ButtonItem: { isCollectionItem: true, optionName: "items" }, + colCountByScreen: { isCollectionItem: false, optionName: "colCountByScreen" }, + EmptyItem: { isCollectionItem: true, optionName: "items" }, + GroupItem: { isCollectionItem: true, optionName: "items" }, + item: { isCollectionItem: true, optionName: "items" }, + SimpleItem: { isCollectionItem: true, optionName: "items" }, + TabbedItem: { isCollectionItem: true, optionName: "items" } }; const DxFormatConfig = { @@ -2749,33 +2951,85 @@ const DxItemConfig = { emits: { "update:isActive": null, "update:hoveredElement": null, + "update:aiOptions": null, + "update:alignItemLabels": null, + "update:badge": null, + "update:buttonOptions": null, + "update:caption": null, + "update:captionTemplate": null, + "update:colCount": null, + "update:colCountByScreen": null, + "update:colSpan": null, "update:cssClass": null, + "update:dataField": null, "update:disabled": null, + "update:editorOptions": null, + "update:editorType": null, + "update:helpText": null, + "update:horizontalAlignment": null, "update:html": null, + "update:icon": null, + "update:isRequired": null, + "update:items": null, + "update:itemType": null, + "update:label": null, "update:locateInMenu": null, "update:location": null, "update:menuItemTemplate": null, "update:name": null, "update:options": null, "update:showText": null, + "update:tabPanelOptions": null, + "update:tabs": null, + "update:tabTemplate": null, "update:template": null, "update:text": null, + "update:title": null, + "update:validationRules": null, + "update:verticalAlignment": null, "update:visible": null, + "update:visibleIndex": null, "update:widget": null, }, props: { + aiOptions: Object as PropType>, + alignItemLabels: Boolean, + badge: String, + buttonOptions: Object as PropType>, + caption: String, + captionTemplate: {}, + colCount: Number, + colCountByScreen: Object as PropType>, + colSpan: Number, cssClass: String, + dataField: String, disabled: Boolean, + editorOptions: {}, + editorType: String as PropType, + helpText: String, + horizontalAlignment: String as PropType, html: String, + icon: String, + isRequired: Boolean, + items: Array as PropType>, + itemType: String as PropType, + label: Object as PropType>, locateInMenu: String as PropType, location: String as PropType, menuItemTemplate: {}, - name: String as PropType, + name: String as PropType, options: {}, showText: String as PropType, + tabPanelOptions: Object as PropType>, + tabs: Array as PropType>>, + tabTemplate: {}, template: {}, text: String, + title: String, + validationRules: Array as PropType>, + verticalAlignment: String as PropType, visible: Boolean, + visibleIndex: Number, widget: String as PropType } }; @@ -2786,6 +3040,24 @@ const DxItem = defineComponent(DxItemConfig); (DxItem as any).$_optionName = "items"; (DxItem as any).$_isCollectionItem = true; +(DxItem as any).$_expectedChildren = { + aiOptions: { isCollectionItem: false, optionName: "aiOptions" }, + AsyncRule: { isCollectionItem: true, optionName: "validationRules" }, + buttonOptions: { isCollectionItem: false, optionName: "buttonOptions" }, + colCountByScreen: { isCollectionItem: false, optionName: "colCountByScreen" }, + CompareRule: { isCollectionItem: true, optionName: "validationRules" }, + CustomRule: { isCollectionItem: true, optionName: "validationRules" }, + EmailRule: { isCollectionItem: true, optionName: "validationRules" }, + label: { isCollectionItem: false, optionName: "label" }, + NumericRule: { isCollectionItem: true, optionName: "validationRules" }, + PatternRule: { isCollectionItem: true, optionName: "validationRules" }, + RangeRule: { isCollectionItem: true, optionName: "validationRules" }, + RequiredRule: { isCollectionItem: true, optionName: "validationRules" }, + StringLengthRule: { isCollectionItem: true, optionName: "validationRules" }, + tab: { isCollectionItem: true, optionName: "tabs" }, + tabPanelOptions: { isCollectionItem: false, optionName: "tabPanelOptions" }, + validationRule: { isCollectionItem: true, optionName: "validationRules" } +}; const DxKeyboardNavigationConfig = { emits: { @@ -3619,6 +3891,69 @@ const DxShow = defineComponent(DxShowConfig); to: { isCollectionItem: false, optionName: "to" } }; +const DxSimpleItemConfig = { + emits: { + "update:isActive": null, + "update:hoveredElement": null, + "update:aiOptions": null, + "update:colSpan": null, + "update:cssClass": null, + "update:dataField": null, + "update:editorOptions": null, + "update:editorType": null, + "update:helpText": null, + "update:isRequired": null, + "update:itemType": null, + "update:label": null, + "update:name": null, + "update:template": null, + "update:validationRules": null, + "update:visible": null, + "update:visibleIndex": null, + }, + props: { + aiOptions: Object as PropType>, + colSpan: Number, + cssClass: String, + dataField: String, + editorOptions: {}, + editorType: String as PropType, + helpText: String, + isRequired: Boolean, + itemType: String as PropType, + label: Object as PropType>, + name: String, + template: {}, + validationRules: Array as PropType>, + visible: Boolean, + visibleIndex: Number + } +}; + +prepareConfigurationComponentConfig(DxSimpleItemConfig); + +const DxSimpleItem = defineComponent(DxSimpleItemConfig); + +(DxSimpleItem as any).$_optionName = "items"; +(DxSimpleItem as any).$_isCollectionItem = true; +(DxSimpleItem as any).$_predefinedProps = { + itemType: "simple" +}; +(DxSimpleItem as any).$_expectedChildren = { + aiOptions: { isCollectionItem: false, optionName: "aiOptions" }, + AsyncRule: { isCollectionItem: true, optionName: "validationRules" }, + CompareRule: { isCollectionItem: true, optionName: "validationRules" }, + CustomRule: { isCollectionItem: true, optionName: "validationRules" }, + EmailRule: { isCollectionItem: true, optionName: "validationRules" }, + label: { isCollectionItem: false, optionName: "label" }, + NumericRule: { isCollectionItem: true, optionName: "validationRules" }, + PatternRule: { isCollectionItem: true, optionName: "validationRules" }, + RangeRule: { isCollectionItem: true, optionName: "validationRules" }, + RequiredRule: { isCollectionItem: true, optionName: "validationRules" }, + StringLengthRule: { isCollectionItem: true, optionName: "validationRules" }, + validationRule: { isCollectionItem: true, optionName: "validationRules" } +}; + const DxSortByGroupSummaryInfoConfig = { emits: { "update:isActive": null, @@ -3790,6 +4125,227 @@ const DxSummaryTexts = defineComponent(DxSummaryTextsConfig); (DxSummaryTexts as any).$_optionName = "texts"; +const DxTabConfig = { + emits: { + "update:isActive": null, + "update:hoveredElement": null, + "update:alignItemLabels": null, + "update:badge": null, + "update:colCount": null, + "update:colCountByScreen": null, + "update:disabled": null, + "update:icon": null, + "update:items": null, + "update:tabTemplate": null, + "update:template": null, + "update:title": null, + }, + props: { + alignItemLabels: Boolean, + badge: String, + colCount: Number, + colCountByScreen: Object as PropType>, + disabled: Boolean, + icon: String, + items: Array as PropType>, + tabTemplate: {}, + template: {}, + title: String + } +}; + +prepareConfigurationComponentConfig(DxTabConfig); + +const DxTab = defineComponent(DxTabConfig); + +(DxTab as any).$_optionName = "tabs"; +(DxTab as any).$_isCollectionItem = true; +(DxTab as any).$_expectedChildren = { + colCountByScreen: { isCollectionItem: false, optionName: "colCountByScreen" } +}; + +const DxTabbedItemConfig = { + emits: { + "update:isActive": null, + "update:hoveredElement": null, + "update:colSpan": null, + "update:cssClass": null, + "update:itemType": null, + "update:name": null, + "update:tabPanelOptions": null, + "update:tabs": null, + "update:visible": null, + "update:visibleIndex": null, + }, + props: { + colSpan: Number, + cssClass: String, + itemType: String as PropType, + name: String, + tabPanelOptions: Object as PropType>, + tabs: Array as PropType>>, + visible: Boolean, + visibleIndex: Number + } +}; + +prepareConfigurationComponentConfig(DxTabbedItemConfig); + +const DxTabbedItem = defineComponent(DxTabbedItemConfig); + +(DxTabbedItem as any).$_optionName = "items"; +(DxTabbedItem as any).$_isCollectionItem = true; +(DxTabbedItem as any).$_predefinedProps = { + itemType: "tabbed" +}; +(DxTabbedItem as any).$_expectedChildren = { + tab: { isCollectionItem: true, optionName: "tabs" }, + tabPanelOptions: { isCollectionItem: false, optionName: "tabPanelOptions" } +}; + +const DxTabPanelOptionsConfig = { + emits: { + "update:isActive": null, + "update:hoveredElement": null, + "update:accessKey": null, + "update:activeStateEnabled": null, + "update:animationEnabled": null, + "update:dataSource": null, + "update:deferRendering": null, + "update:disabled": null, + "update:elementAttr": null, + "update:focusStateEnabled": null, + "update:height": null, + "update:hint": null, + "update:hoverStateEnabled": null, + "update:iconPosition": null, + "update:itemHoldTimeout": null, + "update:items": null, + "update:itemTemplate": null, + "update:itemTitleTemplate": null, + "update:keyExpr": null, + "update:loop": null, + "update:noDataText": null, + "update:onContentReady": null, + "update:onDisposing": null, + "update:onInitialized": null, + "update:onItemClick": null, + "update:onItemContextMenu": null, + "update:onItemHold": null, + "update:onItemRendered": null, + "update:onOptionChanged": null, + "update:onSelectionChanged": null, + "update:onSelectionChanging": null, + "update:onTitleClick": null, + "update:onTitleHold": null, + "update:onTitleRendered": null, + "update:repaintChangesOnly": null, + "update:rtlEnabled": null, + "update:scrollByContent": null, + "update:scrollingEnabled": null, + "update:selectedIndex": null, + "update:selectedItem": null, + "update:showNavButtons": null, + "update:stylingMode": null, + "update:swipeEnabled": null, + "update:tabIndex": null, + "update:tabsPosition": null, + "update:visible": null, + "update:width": null, + }, + props: { + accessKey: String, + activeStateEnabled: Boolean, + animationEnabled: Boolean, + dataSource: [Array, Object, String] as PropType<(Array) | DataSource | DataSourceOptions | null | Store | string | Record>, + deferRendering: Boolean, + disabled: Boolean, + elementAttr: Object as PropType>, + focusStateEnabled: Boolean, + height: [Number, String], + hint: String, + hoverStateEnabled: Boolean, + iconPosition: String as PropType, + itemHoldTimeout: Number, + items: Array as PropType>, + itemTemplate: {}, + itemTitleTemplate: {}, + keyExpr: [Function, String] as PropType<((() => void)) | string>, + loop: Boolean, + noDataText: String, + onContentReady: Function as PropType<((e: TabPanelContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: TabPanelDisposingEvent) => void)>, + onInitialized: Function as PropType<((e: TabPanelInitializedEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onItemContextMenu: Function as PropType<((e: ItemContextMenuEvent) => void)>, + onItemHold: Function as PropType<((e: ItemHoldEvent) => void)>, + onItemRendered: Function as PropType<((e: ItemRenderedEvent) => void)>, + onOptionChanged: Function as PropType<((e: TabPanelOptionChangedEvent) => void)>, + onSelectionChanged: Function as PropType<((e: TabPanelSelectionChangedEvent) => void)>, + onSelectionChanging: Function as PropType<((e: SelectionChangingEvent) => void)>, + onTitleClick: Function as PropType<((e: TitleClickEvent) => void)>, + onTitleHold: Function as PropType<((e: TitleHoldEvent) => void)>, + onTitleRendered: Function as PropType<((e: TitleRenderedEvent) => void)>, + repaintChangesOnly: Boolean, + rtlEnabled: Boolean, + scrollByContent: Boolean, + scrollingEnabled: Boolean, + selectedIndex: Number, + selectedItem: {}, + showNavButtons: Boolean, + stylingMode: String as PropType, + swipeEnabled: Boolean, + tabIndex: Number, + tabsPosition: String as PropType, + visible: Boolean, + width: [Number, String] + } +}; + +prepareConfigurationComponentConfig(DxTabPanelOptionsConfig); + +const DxTabPanelOptions = defineComponent(DxTabPanelOptionsConfig); + +(DxTabPanelOptions as any).$_optionName = "tabPanelOptions"; +(DxTabPanelOptions as any).$_expectedChildren = { + item: { isCollectionItem: true, optionName: "items" }, + tabPanelOptionsItem: { isCollectionItem: true, optionName: "items" } +}; + +const DxTabPanelOptionsItemConfig = { + emits: { + "update:isActive": null, + "update:hoveredElement": null, + "update:badge": null, + "update:disabled": null, + "update:html": null, + "update:icon": null, + "update:tabTemplate": null, + "update:template": null, + "update:text": null, + "update:title": null, + "update:visible": null, + }, + props: { + badge: String, + disabled: Boolean, + html: String, + icon: String, + tabTemplate: {}, + template: {}, + text: String, + title: String, + visible: Boolean + } +}; + +prepareConfigurationComponentConfig(DxTabPanelOptionsItemConfig); + +const DxTabPanelOptionsItem = defineComponent(DxTabPanelOptionsItemConfig); + +(DxTabPanelOptionsItem as any).$_optionName = "items"; +(DxTabPanelOptionsItem as any).$_isCollectionItem = true; + const DxTextsConfig = { emits: { "update:isActive": null, @@ -3932,6 +4488,7 @@ const DxToolbar = defineComponent(DxToolbarConfig); (DxToolbar as any).$_optionName = "toolbar"; (DxToolbar as any).$_expectedChildren = { + dataGridToolbarItem: { isCollectionItem: true, optionName: "items" }, item: { isCollectionItem: true, optionName: "items" } }; @@ -4094,6 +4651,8 @@ export { DxAt, DxBoundaryOffset, DxButton, + DxButtonItem, + DxButtonOptions, DxChange, DxColCountByScreen, DxCollision, @@ -4115,11 +4674,13 @@ export { DxDataGridHeaderFilterSearch, DxDataGridHeaderFilterTexts, DxDataGridSelection, + DxDataGridToolbarItem, DxEditing, DxEditingTexts, DxEditorOptions, DxEditorOptionsButton, DxEmailRule, + DxEmptyItem, DxExport, DxExportTexts, DxField, @@ -4168,12 +4729,17 @@ export { DxSearchPanel, DxSelection, DxShow, + DxSimpleItem, DxSortByGroupSummaryInfo, DxSorting, DxStateStoring, DxStringLengthRule, DxSummary, DxSummaryTexts, + DxTab, + DxTabbedItem, + DxTabPanelOptions, + DxTabPanelOptionsItem, DxTexts, DxTo, DxToolbar, diff --git a/packages/devextreme-vue/src/tree-list.ts b/packages/devextreme-vue/src/tree-list.ts index 1f7456478143..bc9acb10e64f 100644 --- a/packages/devextreme-vue/src/tree-list.ts +++ b/packages/devextreme-vue/src/tree-list.ts @@ -109,6 +109,8 @@ import { HorizontalAlignment, VerticalAlignment, TextEditorButtonLocation, + ButtonStyle, + ButtonType, DataType, Format as CommonFormat, SortOrder, @@ -126,14 +128,14 @@ import { Direction, ToolbarItemLocation, ToolbarItemComponent, - ButtonStyle, - ButtonType, DisplayMode, DragDirection, DragHighlight, ScrollMode, ScrollbarMode, SingleMultipleOrNone, + TabsIconPosition, + TabsStyle, } from "devextreme/common"; import { DataSourceOptions, @@ -203,9 +205,8 @@ import { OptionChangedEvent as ButtonOptionChangedEvent, } from "devextreme/ui/button"; import { - Format, -} from "devextreme/common/core/localization"; -import { + FormItemType, + FormPredefinedButtonItem, dxFormSimpleItem, dxFormOptions, dxFormGroupItem, @@ -223,8 +224,10 @@ import { SmartPastedEvent, SmartPastingEvent, FormItemComponent, - FormItemType, } from "devextreme/ui/form"; +import { + Format, +} from "devextreme/common/core/localization"; import { EventInfo, } from "devextreme/common/core/events"; @@ -234,6 +237,23 @@ import { import { LoadingAnimationType, } from "devextreme/ui/load_indicator"; +import { + dxTabPanelOptions, + dxTabPanelItem, + ContentReadyEvent as TabPanelContentReadyEvent, + DisposingEvent as TabPanelDisposingEvent, + InitializedEvent as TabPanelInitializedEvent, + ItemClickEvent, + ItemContextMenuEvent, + ItemHoldEvent, + ItemRenderedEvent, + OptionChangedEvent as TabPanelOptionChangedEvent, + SelectionChangedEvent as TabPanelSelectionChangedEvent, + SelectionChangingEvent, + TitleClickEvent, + TitleHoldEvent, + TitleRenderedEvent, +} from "devextreme/ui/tab_panel"; import { LocateInMenuMode, ShowTextMode, @@ -837,6 +857,109 @@ const DxButton = defineComponent(DxButtonConfig); options: { isCollectionItem: false, optionName: "options" } }; +const DxButtonItemConfig = { + emits: { + "update:isActive": null, + "update:hoveredElement": null, + "update:buttonOptions": null, + "update:colSpan": null, + "update:cssClass": null, + "update:horizontalAlignment": null, + "update:itemType": null, + "update:name": null, + "update:verticalAlignment": null, + "update:visible": null, + "update:visibleIndex": null, + }, + props: { + buttonOptions: Object as PropType>, + colSpan: Number, + cssClass: String, + horizontalAlignment: String as PropType, + itemType: String as PropType, + name: String as PropType, + verticalAlignment: String as PropType, + visible: Boolean, + visibleIndex: Number + } +}; + +prepareConfigurationComponentConfig(DxButtonItemConfig); + +const DxButtonItem = defineComponent(DxButtonItemConfig); + +(DxButtonItem as any).$_optionName = "items"; +(DxButtonItem as any).$_isCollectionItem = true; +(DxButtonItem as any).$_predefinedProps = { + itemType: "button" +}; +(DxButtonItem as any).$_expectedChildren = { + buttonOptions: { isCollectionItem: false, optionName: "buttonOptions" } +}; + +const DxButtonOptionsConfig = { + emits: { + "update:isActive": null, + "update:hoveredElement": null, + "update:accessKey": null, + "update:activeStateEnabled": null, + "update:disabled": null, + "update:elementAttr": null, + "update:focusStateEnabled": null, + "update:height": null, + "update:hint": null, + "update:hoverStateEnabled": null, + "update:icon": null, + "update:onClick": null, + "update:onContentReady": null, + "update:onDisposing": null, + "update:onInitialized": null, + "update:onOptionChanged": null, + "update:rtlEnabled": null, + "update:stylingMode": null, + "update:tabIndex": null, + "update:template": null, + "update:text": null, + "update:type": null, + "update:useSubmitBehavior": null, + "update:validationGroup": null, + "update:visible": null, + "update:width": null, + }, + props: { + accessKey: String, + activeStateEnabled: Boolean, + disabled: Boolean, + elementAttr: Object as PropType>, + focusStateEnabled: Boolean, + height: [Number, String], + hint: String, + hoverStateEnabled: Boolean, + icon: String, + onClick: Function as PropType<((e: ClickEvent) => void)>, + onContentReady: Function as PropType<((e: ButtonContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: ButtonDisposingEvent) => void)>, + onInitialized: Function as PropType<((e: ButtonInitializedEvent) => void)>, + onOptionChanged: Function as PropType<((e: ButtonOptionChangedEvent) => void)>, + rtlEnabled: Boolean, + stylingMode: String as PropType, + tabIndex: Number, + template: {}, + text: String, + type: String as PropType, + useSubmitBehavior: Boolean, + validationGroup: String, + visible: Boolean, + width: [Number, String] + } +}; + +prepareConfigurationComponentConfig(DxButtonOptionsConfig); + +const DxButtonOptions = defineComponent(DxButtonOptionsConfig); + +(DxButtonOptions as any).$_optionName = "buttonOptions"; + const DxChangeConfig = { emits: { "update:isActive": null, @@ -1693,6 +1816,37 @@ const DxEmailRule = defineComponent(DxEmailRuleConfig); type: "email" }; +const DxEmptyItemConfig = { + emits: { + "update:isActive": null, + "update:hoveredElement": null, + "update:colSpan": null, + "update:cssClass": null, + "update:itemType": null, + "update:name": null, + "update:visible": null, + "update:visibleIndex": null, + }, + props: { + colSpan: Number, + cssClass: String, + itemType: String as PropType, + name: String, + visible: Boolean, + visibleIndex: Number + } +}; + +prepareConfigurationComponentConfig(DxEmptyItemConfig); + +const DxEmptyItem = defineComponent(DxEmptyItemConfig); + +(DxEmptyItem as any).$_optionName = "items"; +(DxEmptyItem as any).$_isCollectionItem = true; +(DxEmptyItem as any).$_predefinedProps = { + itemType: "empty" +}; + const DxFieldConfig = { emits: { "update:isActive": null, @@ -2180,7 +2334,13 @@ const DxForm = defineComponent(DxFormConfig); (DxForm as any).$_optionName = "form"; (DxForm as any).$_expectedChildren = { - colCountByScreen: { isCollectionItem: false, optionName: "colCountByScreen" } + ButtonItem: { isCollectionItem: true, optionName: "items" }, + colCountByScreen: { isCollectionItem: false, optionName: "colCountByScreen" }, + EmptyItem: { isCollectionItem: true, optionName: "items" }, + GroupItem: { isCollectionItem: true, optionName: "items" }, + item: { isCollectionItem: true, optionName: "items" }, + SimpleItem: { isCollectionItem: true, optionName: "items" }, + TabbedItem: { isCollectionItem: true, optionName: "items" } }; const DxFormatConfig = { @@ -2297,6 +2457,54 @@ const DxFrom = defineComponent(DxFromConfig); position: { isCollectionItem: false, optionName: "position" } }; +const DxGroupItemConfig = { + emits: { + "update:isActive": null, + "update:hoveredElement": null, + "update:alignItemLabels": null, + "update:caption": null, + "update:captionTemplate": null, + "update:colCount": null, + "update:colCountByScreen": null, + "update:colSpan": null, + "update:cssClass": null, + "update:items": null, + "update:itemType": null, + "update:name": null, + "update:template": null, + "update:visible": null, + "update:visibleIndex": null, + }, + props: { + alignItemLabels: Boolean, + caption: String, + captionTemplate: {}, + colCount: Number, + colCountByScreen: Object as PropType>, + colSpan: Number, + cssClass: String, + items: Array as PropType>, + itemType: String as PropType, + name: String, + template: {}, + visible: Boolean, + visibleIndex: Number + } +}; + +prepareConfigurationComponentConfig(DxGroupItemConfig); + +const DxGroupItem = defineComponent(DxGroupItemConfig); + +(DxGroupItem as any).$_optionName = "items"; +(DxGroupItem as any).$_isCollectionItem = true; +(DxGroupItem as any).$_predefinedProps = { + itemType: "group" +}; +(DxGroupItem as any).$_expectedChildren = { + colCountByScreen: { isCollectionItem: false, optionName: "colCountByScreen" } +}; + const DxGroupOperationDescriptionsConfig = { emits: { "update:isActive": null, @@ -2453,33 +2661,85 @@ const DxItemConfig = { emits: { "update:isActive": null, "update:hoveredElement": null, + "update:aiOptions": null, + "update:alignItemLabels": null, + "update:badge": null, + "update:buttonOptions": null, + "update:caption": null, + "update:captionTemplate": null, + "update:colCount": null, + "update:colCountByScreen": null, + "update:colSpan": null, "update:cssClass": null, + "update:dataField": null, "update:disabled": null, + "update:editorOptions": null, + "update:editorType": null, + "update:helpText": null, + "update:horizontalAlignment": null, "update:html": null, + "update:icon": null, + "update:isRequired": null, + "update:items": null, + "update:itemType": null, + "update:label": null, "update:locateInMenu": null, "update:location": null, "update:menuItemTemplate": null, "update:name": null, "update:options": null, "update:showText": null, + "update:tabPanelOptions": null, + "update:tabs": null, + "update:tabTemplate": null, "update:template": null, "update:text": null, + "update:title": null, + "update:validationRules": null, + "update:verticalAlignment": null, "update:visible": null, + "update:visibleIndex": null, "update:widget": null, }, props: { + aiOptions: Object as PropType>, + alignItemLabels: Boolean, + badge: String, + buttonOptions: Object as PropType>, + caption: String, + captionTemplate: {}, + colCount: Number, + colCountByScreen: Object as PropType>, + colSpan: Number, cssClass: String, + dataField: String, disabled: Boolean, + editorOptions: {}, + editorType: String as PropType, + helpText: String, + horizontalAlignment: String as PropType, html: String, + icon: String, + isRequired: Boolean, + items: Array as PropType>, + itemType: String as PropType, + label: Object as PropType>, locateInMenu: String as PropType, location: String as PropType, menuItemTemplate: {}, - name: String as PropType, + name: String as PropType, options: {}, showText: String as PropType, + tabPanelOptions: Object as PropType>, + tabs: Array as PropType>>, + tabTemplate: {}, template: {}, text: String, + title: String, + validationRules: Array as PropType>, + verticalAlignment: String as PropType, visible: Boolean, + visibleIndex: Number, widget: String as PropType } }; @@ -2490,6 +2750,24 @@ const DxItem = defineComponent(DxItemConfig); (DxItem as any).$_optionName = "items"; (DxItem as any).$_isCollectionItem = true; +(DxItem as any).$_expectedChildren = { + aiOptions: { isCollectionItem: false, optionName: "aiOptions" }, + AsyncRule: { isCollectionItem: true, optionName: "validationRules" }, + buttonOptions: { isCollectionItem: false, optionName: "buttonOptions" }, + colCountByScreen: { isCollectionItem: false, optionName: "colCountByScreen" }, + CompareRule: { isCollectionItem: true, optionName: "validationRules" }, + CustomRule: { isCollectionItem: true, optionName: "validationRules" }, + EmailRule: { isCollectionItem: true, optionName: "validationRules" }, + label: { isCollectionItem: false, optionName: "label" }, + NumericRule: { isCollectionItem: true, optionName: "validationRules" }, + PatternRule: { isCollectionItem: true, optionName: "validationRules" }, + RangeRule: { isCollectionItem: true, optionName: "validationRules" }, + RequiredRule: { isCollectionItem: true, optionName: "validationRules" }, + StringLengthRule: { isCollectionItem: true, optionName: "validationRules" }, + tab: { isCollectionItem: true, optionName: "tabs" }, + tabPanelOptions: { isCollectionItem: false, optionName: "tabPanelOptions" }, + validationRule: { isCollectionItem: true, optionName: "validationRules" } +}; const DxKeyboardNavigationConfig = { emits: { @@ -3288,6 +3566,69 @@ const DxShow = defineComponent(DxShowConfig); to: { isCollectionItem: false, optionName: "to" } }; +const DxSimpleItemConfig = { + emits: { + "update:isActive": null, + "update:hoveredElement": null, + "update:aiOptions": null, + "update:colSpan": null, + "update:cssClass": null, + "update:dataField": null, + "update:editorOptions": null, + "update:editorType": null, + "update:helpText": null, + "update:isRequired": null, + "update:itemType": null, + "update:label": null, + "update:name": null, + "update:template": null, + "update:validationRules": null, + "update:visible": null, + "update:visibleIndex": null, + }, + props: { + aiOptions: Object as PropType>, + colSpan: Number, + cssClass: String, + dataField: String, + editorOptions: {}, + editorType: String as PropType, + helpText: String, + isRequired: Boolean, + itemType: String as PropType, + label: Object as PropType>, + name: String, + template: {}, + validationRules: Array as PropType>, + visible: Boolean, + visibleIndex: Number + } +}; + +prepareConfigurationComponentConfig(DxSimpleItemConfig); + +const DxSimpleItem = defineComponent(DxSimpleItemConfig); + +(DxSimpleItem as any).$_optionName = "items"; +(DxSimpleItem as any).$_isCollectionItem = true; +(DxSimpleItem as any).$_predefinedProps = { + itemType: "simple" +}; +(DxSimpleItem as any).$_expectedChildren = { + aiOptions: { isCollectionItem: false, optionName: "aiOptions" }, + AsyncRule: { isCollectionItem: true, optionName: "validationRules" }, + CompareRule: { isCollectionItem: true, optionName: "validationRules" }, + CustomRule: { isCollectionItem: true, optionName: "validationRules" }, + EmailRule: { isCollectionItem: true, optionName: "validationRules" }, + label: { isCollectionItem: false, optionName: "label" }, + NumericRule: { isCollectionItem: true, optionName: "validationRules" }, + PatternRule: { isCollectionItem: true, optionName: "validationRules" }, + RangeRule: { isCollectionItem: true, optionName: "validationRules" }, + RequiredRule: { isCollectionItem: true, optionName: "validationRules" }, + StringLengthRule: { isCollectionItem: true, optionName: "validationRules" }, + validationRule: { isCollectionItem: true, optionName: "validationRules" } +}; + const DxSortingConfig = { emits: { "update:isActive": null, @@ -3371,6 +3712,227 @@ const DxStringLengthRule = defineComponent(DxStringLengthRuleConfig); type: "stringLength" }; +const DxTabConfig = { + emits: { + "update:isActive": null, + "update:hoveredElement": null, + "update:alignItemLabels": null, + "update:badge": null, + "update:colCount": null, + "update:colCountByScreen": null, + "update:disabled": null, + "update:icon": null, + "update:items": null, + "update:tabTemplate": null, + "update:template": null, + "update:title": null, + }, + props: { + alignItemLabels: Boolean, + badge: String, + colCount: Number, + colCountByScreen: Object as PropType>, + disabled: Boolean, + icon: String, + items: Array as PropType>, + tabTemplate: {}, + template: {}, + title: String + } +}; + +prepareConfigurationComponentConfig(DxTabConfig); + +const DxTab = defineComponent(DxTabConfig); + +(DxTab as any).$_optionName = "tabs"; +(DxTab as any).$_isCollectionItem = true; +(DxTab as any).$_expectedChildren = { + colCountByScreen: { isCollectionItem: false, optionName: "colCountByScreen" } +}; + +const DxTabbedItemConfig = { + emits: { + "update:isActive": null, + "update:hoveredElement": null, + "update:colSpan": null, + "update:cssClass": null, + "update:itemType": null, + "update:name": null, + "update:tabPanelOptions": null, + "update:tabs": null, + "update:visible": null, + "update:visibleIndex": null, + }, + props: { + colSpan: Number, + cssClass: String, + itemType: String as PropType, + name: String, + tabPanelOptions: Object as PropType>, + tabs: Array as PropType>>, + visible: Boolean, + visibleIndex: Number + } +}; + +prepareConfigurationComponentConfig(DxTabbedItemConfig); + +const DxTabbedItem = defineComponent(DxTabbedItemConfig); + +(DxTabbedItem as any).$_optionName = "items"; +(DxTabbedItem as any).$_isCollectionItem = true; +(DxTabbedItem as any).$_predefinedProps = { + itemType: "tabbed" +}; +(DxTabbedItem as any).$_expectedChildren = { + tab: { isCollectionItem: true, optionName: "tabs" }, + tabPanelOptions: { isCollectionItem: false, optionName: "tabPanelOptions" } +}; + +const DxTabPanelOptionsConfig = { + emits: { + "update:isActive": null, + "update:hoveredElement": null, + "update:accessKey": null, + "update:activeStateEnabled": null, + "update:animationEnabled": null, + "update:dataSource": null, + "update:deferRendering": null, + "update:disabled": null, + "update:elementAttr": null, + "update:focusStateEnabled": null, + "update:height": null, + "update:hint": null, + "update:hoverStateEnabled": null, + "update:iconPosition": null, + "update:itemHoldTimeout": null, + "update:items": null, + "update:itemTemplate": null, + "update:itemTitleTemplate": null, + "update:keyExpr": null, + "update:loop": null, + "update:noDataText": null, + "update:onContentReady": null, + "update:onDisposing": null, + "update:onInitialized": null, + "update:onItemClick": null, + "update:onItemContextMenu": null, + "update:onItemHold": null, + "update:onItemRendered": null, + "update:onOptionChanged": null, + "update:onSelectionChanged": null, + "update:onSelectionChanging": null, + "update:onTitleClick": null, + "update:onTitleHold": null, + "update:onTitleRendered": null, + "update:repaintChangesOnly": null, + "update:rtlEnabled": null, + "update:scrollByContent": null, + "update:scrollingEnabled": null, + "update:selectedIndex": null, + "update:selectedItem": null, + "update:showNavButtons": null, + "update:stylingMode": null, + "update:swipeEnabled": null, + "update:tabIndex": null, + "update:tabsPosition": null, + "update:visible": null, + "update:width": null, + }, + props: { + accessKey: String, + activeStateEnabled: Boolean, + animationEnabled: Boolean, + dataSource: [Array, Object, String] as PropType<(Array) | DataSource | DataSourceOptions | null | Store | string | Record>, + deferRendering: Boolean, + disabled: Boolean, + elementAttr: Object as PropType>, + focusStateEnabled: Boolean, + height: [Number, String], + hint: String, + hoverStateEnabled: Boolean, + iconPosition: String as PropType, + itemHoldTimeout: Number, + items: Array as PropType>, + itemTemplate: {}, + itemTitleTemplate: {}, + keyExpr: [Function, String] as PropType<((() => void)) | string>, + loop: Boolean, + noDataText: String, + onContentReady: Function as PropType<((e: TabPanelContentReadyEvent) => void)>, + onDisposing: Function as PropType<((e: TabPanelDisposingEvent) => void)>, + onInitialized: Function as PropType<((e: TabPanelInitializedEvent) => void)>, + onItemClick: Function as PropType<((e: ItemClickEvent) => void)>, + onItemContextMenu: Function as PropType<((e: ItemContextMenuEvent) => void)>, + onItemHold: Function as PropType<((e: ItemHoldEvent) => void)>, + onItemRendered: Function as PropType<((e: ItemRenderedEvent) => void)>, + onOptionChanged: Function as PropType<((e: TabPanelOptionChangedEvent) => void)>, + onSelectionChanged: Function as PropType<((e: TabPanelSelectionChangedEvent) => void)>, + onSelectionChanging: Function as PropType<((e: SelectionChangingEvent) => void)>, + onTitleClick: Function as PropType<((e: TitleClickEvent) => void)>, + onTitleHold: Function as PropType<((e: TitleHoldEvent) => void)>, + onTitleRendered: Function as PropType<((e: TitleRenderedEvent) => void)>, + repaintChangesOnly: Boolean, + rtlEnabled: Boolean, + scrollByContent: Boolean, + scrollingEnabled: Boolean, + selectedIndex: Number, + selectedItem: {}, + showNavButtons: Boolean, + stylingMode: String as PropType, + swipeEnabled: Boolean, + tabIndex: Number, + tabsPosition: String as PropType, + visible: Boolean, + width: [Number, String] + } +}; + +prepareConfigurationComponentConfig(DxTabPanelOptionsConfig); + +const DxTabPanelOptions = defineComponent(DxTabPanelOptionsConfig); + +(DxTabPanelOptions as any).$_optionName = "tabPanelOptions"; +(DxTabPanelOptions as any).$_expectedChildren = { + item: { isCollectionItem: true, optionName: "items" }, + tabPanelOptionsItem: { isCollectionItem: true, optionName: "items" } +}; + +const DxTabPanelOptionsItemConfig = { + emits: { + "update:isActive": null, + "update:hoveredElement": null, + "update:badge": null, + "update:disabled": null, + "update:html": null, + "update:icon": null, + "update:tabTemplate": null, + "update:template": null, + "update:text": null, + "update:title": null, + "update:visible": null, + }, + props: { + badge: String, + disabled: Boolean, + html: String, + icon: String, + tabTemplate: {}, + template: {}, + text: String, + title: String, + visible: Boolean + } +}; + +prepareConfigurationComponentConfig(DxTabPanelOptionsItemConfig); + +const DxTabPanelOptionsItem = defineComponent(DxTabPanelOptionsItemConfig); + +(DxTabPanelOptionsItem as any).$_optionName = "items"; +(DxTabPanelOptionsItem as any).$_isCollectionItem = true; + const DxTextsConfig = { emits: { "update:isActive": null, @@ -3481,7 +4043,8 @@ const DxToolbar = defineComponent(DxToolbarConfig); (DxToolbar as any).$_optionName = "toolbar"; (DxToolbar as any).$_expectedChildren = { - item: { isCollectionItem: true, optionName: "items" } + item: { isCollectionItem: true, optionName: "items" }, + treeListToolbarItem: { isCollectionItem: true, optionName: "items" } }; const DxToolbarItemConfig = { @@ -3628,6 +4191,48 @@ const DxTreeListSelection = defineComponent(DxTreeListSelectionConfig); (DxTreeListSelection as any).$_optionName = "selection"; +const DxTreeListToolbarItemConfig = { + emits: { + "update:isActive": null, + "update:hoveredElement": null, + "update:cssClass": null, + "update:disabled": null, + "update:html": null, + "update:locateInMenu": null, + "update:location": null, + "update:menuItemTemplate": null, + "update:name": null, + "update:options": null, + "update:showText": null, + "update:template": null, + "update:text": null, + "update:visible": null, + "update:widget": null, + }, + props: { + cssClass: String, + disabled: Boolean, + html: String, + locateInMenu: String as PropType, + location: String as PropType, + menuItemTemplate: {}, + name: String as PropType, + options: {}, + showText: String as PropType, + template: {}, + text: String, + visible: Boolean, + widget: String as PropType + } +}; + +prepareConfigurationComponentConfig(DxTreeListToolbarItemConfig); + +const DxTreeListToolbarItem = defineComponent(DxTreeListToolbarItemConfig); + +(DxTreeListToolbarItem as any).$_optionName = "items"; +(DxTreeListToolbarItem as any).$_isCollectionItem = true; + const DxValidationRuleConfig = { emits: { "update:isActive": null, @@ -3679,6 +4284,8 @@ export { DxAt, DxBoundaryOffset, DxButton, + DxButtonItem, + DxButtonOptions, DxChange, DxColCountByScreen, DxCollision, @@ -3701,6 +4308,7 @@ export { DxEditorOptions, DxEditorOptionsButton, DxEmailRule, + DxEmptyItem, DxField, DxFieldLookup, DxFilterBuilder, @@ -3713,6 +4321,7 @@ export { DxFormat, DxFormItem, DxFrom, + DxGroupItem, DxGroupOperationDescriptions, DxHeaderFilter, DxHide, @@ -3742,9 +4351,14 @@ export { DxSearchPanel, DxSelection, DxShow, + DxSimpleItem, DxSorting, DxStateStoring, DxStringLengthRule, + DxTab, + DxTabbedItem, + DxTabPanelOptions, + DxTabPanelOptionsItem, DxTexts, DxTo, DxToolbar, @@ -3753,6 +4367,7 @@ export { DxTreeListHeaderFilterSearch, DxTreeListHeaderFilterTexts, DxTreeListSelection, + DxTreeListToolbarItem, DxValidationRule }; import type * as DxTreeListTypes from "devextreme/ui/tree_list_types";