diff --git a/packages/devextreme-angular/src/core/tokens/index.ts b/packages/devextreme-angular/src/core/tokens/index.ts index 4ff697af84c4..f2691132b6b8 100644 --- a/packages/devextreme-angular/src/core/tokens/index.ts +++ b/packages/devextreme-angular/src/core/tokens/index.ts @@ -21,6 +21,7 @@ export const PROPERTY_TOKEN_attachments = new InjectionToken('property-t export const PROPERTY_TOKEN_typingUsers = new InjectionToken('property-token-typingUsers'); export const PROPERTY_TOKEN_ranges = new InjectionToken('property-token-ranges'); export const PROPERTY_TOKEN_sortByGroupSummaryInfo = new InjectionToken('property-token-sortByGroupSummaryInfo'); +export const PROPERTY_TOKEN_groupItems = new InjectionToken('property-token-groupItems'); export const PROPERTY_TOKEN_totalItems = new InjectionToken('property-token-totalItems'); export const PROPERTY_TOKEN_commands = new InjectionToken('property-token-commands'); export const PROPERTY_TOKEN_connectionPoints = new InjectionToken('property-token-connectionPoints'); @@ -41,4 +42,3 @@ export const PROPERTY_TOKEN_views = new InjectionToken('property-token-v export const PROPERTY_TOKEN_layers = new InjectionToken('property-token-layers'); export const PROPERTY_TOKEN_legends = new InjectionToken('property-token-legends'); export const PROPERTY_TOKEN_center = new InjectionToken('property-token-center'); -export const PROPERTY_TOKEN_groupItems = new InjectionToken('property-token-groupItems'); diff --git a/packages/devextreme-angular/src/ui/data-grid/index.ts b/packages/devextreme-angular/src/ui/data-grid/index.ts index 62ff47bee7a2..acfca191e6b8 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,18 @@ 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 { DxiDataGridSummaryGroupItemModule } 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'; @@ -213,24 +223,19 @@ import { DxiDataGridToolbarItemModule } from 'devextreme-angular/ui/data-grid/ne import { DxiDataGridTotalItemModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxiDataGridValidationRuleModule } from 'devextreme-angular/ui/data-grid/nested'; import { DxoDataGridValueFormatModule } from 'devextreme-angular/ui/data-grid/nested'; -import { DxiDataGridButtonItemModule } from 'devextreme-angular/ui/data-grid/nested'; -import { DxiDataGridEmptyItemModule } from 'devextreme-angular/ui/data-grid/nested'; -import { DxiDataGridSimpleItemModule } from 'devextreme-angular/ui/data-grid/nested'; -import { DxiDataGridTabbedItemModule } from 'devextreme-angular/ui/data-grid/nested'; -import { DxiDataGridTabModule } from 'devextreme-angular/ui/data-grid/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_groupItems, - PROPERTY_TOKEN_items, PROPERTY_TOKEN_sortByGroupSummaryInfo, + PROPERTY_TOKEN_groupItems, + PROPERTY_TOKEN_tabs, PROPERTY_TOKEN_toolbarItems, PROPERTY_TOKEN_totalItems, - PROPERTY_TOKEN_tabs, } from 'devextreme-angular/core/tokens'; @@ -263,6 +268,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); @@ -283,19 +293,19 @@ export class DxDataGridComponent extends DxComponent this.setChildren('fields', value); } + @ContentChildren(PROPERTY_TOKEN_sortByGroupSummaryInfo) + set _sortByGroupSummaryInfoContentChildren(value: QueryList) { + this.setChildren('sortByGroupSummaryInfo', value); + } + @ContentChildren(PROPERTY_TOKEN_groupItems) set _groupItemsContentChildren(value: QueryList) { 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) @@ -308,11 +318,6 @@ export class DxDataGridComponent extends DxComponent this.setChildren('totalItems', value); } - @ContentChildren(PROPERTY_TOKEN_tabs) - set _tabsContentChildren(value: QueryList) { - this.setChildren('tabs', value); - } - instance: DxDataGrid = null; /** @@ -2433,6 +2438,8 @@ export class DxDataGridComponent extends DxComponent DxoDataGridAtModule, DxoDataGridBoundaryOffsetModule, DxiDataGridButtonModule, + DxiDataGridButtonItemModule, + DxoDataGridButtonOptionsModule, DxiDataGridChangeModule, DxoDataGridColCountByScreenModule, DxoDataGridCollisionModule, @@ -2454,11 +2461,13 @@ export class DxDataGridComponent extends DxComponent DxoDataGridDataGridHeaderFilterSearchModule, DxoDataGridDataGridHeaderFilterTextsModule, DxoDataGridDataGridSelectionModule, + DxiDataGridDataGridToolbarItemModule, DxoDataGridEditingModule, DxoDataGridEditingTextsModule, DxoDataGridEditorOptionsModule, DxiDataGridEditorOptionsButtonModule, DxiDataGridEmailRuleModule, + DxiDataGridEmptyItemModule, DxoDataGridExportModule, DxoDataGridExportTextsModule, DxiDataGridFieldModule, @@ -2507,12 +2516,18 @@ export class DxDataGridComponent extends DxComponent DxoDataGridSearchPanelModule, DxoDataGridSelectionModule, DxoDataGridShowModule, + DxiDataGridSimpleItemModule, DxiDataGridSortByGroupSummaryInfoModule, DxoDataGridSortingModule, DxoDataGridStateStoringModule, DxiDataGridStringLengthRuleModule, DxoDataGridSummaryModule, + DxiDataGridSummaryGroupItemModule, DxoDataGridSummaryTextsModule, + DxiDataGridTabModule, + DxiDataGridTabbedItemModule, + DxoDataGridTabPanelOptionsModule, + DxiDataGridTabPanelOptionsItemModule, DxoDataGridTextsModule, DxoDataGridToModule, DxoDataGridToolbarModule, @@ -2520,11 +2535,6 @@ export class DxDataGridComponent extends DxComponent DxiDataGridTotalItemModule, DxiDataGridValidationRuleModule, DxoDataGridValueFormatModule, - DxiDataGridButtonItemModule, - DxiDataGridEmptyItemModule, - DxiDataGridSimpleItemModule, - DxiDataGridTabbedItemModule, - DxiDataGridTabModule, DxIntegrationModule, DxTemplateModule ], @@ -2601,6 +2611,8 @@ export class DxDataGridComponent extends DxComponent DxoDataGridAtModule, DxoDataGridBoundaryOffsetModule, DxiDataGridButtonModule, + DxiDataGridButtonItemModule, + DxoDataGridButtonOptionsModule, DxiDataGridChangeModule, DxoDataGridColCountByScreenModule, DxoDataGridCollisionModule, @@ -2622,11 +2634,13 @@ export class DxDataGridComponent extends DxComponent DxoDataGridDataGridHeaderFilterSearchModule, DxoDataGridDataGridHeaderFilterTextsModule, DxoDataGridDataGridSelectionModule, + DxiDataGridDataGridToolbarItemModule, DxoDataGridEditingModule, DxoDataGridEditingTextsModule, DxoDataGridEditorOptionsModule, DxiDataGridEditorOptionsButtonModule, DxiDataGridEmailRuleModule, + DxiDataGridEmptyItemModule, DxoDataGridExportModule, DxoDataGridExportTextsModule, DxiDataGridFieldModule, @@ -2675,12 +2689,18 @@ export class DxDataGridComponent extends DxComponent DxoDataGridSearchPanelModule, DxoDataGridSelectionModule, DxoDataGridShowModule, + DxiDataGridSimpleItemModule, DxiDataGridSortByGroupSummaryInfoModule, DxoDataGridSortingModule, DxoDataGridStateStoringModule, DxiDataGridStringLengthRuleModule, DxoDataGridSummaryModule, + DxiDataGridSummaryGroupItemModule, DxoDataGridSummaryTextsModule, + DxiDataGridTabModule, + DxiDataGridTabbedItemModule, + DxoDataGridTabPanelOptionsModule, + DxiDataGridTabPanelOptionsItemModule, DxoDataGridTextsModule, DxoDataGridToModule, DxoDataGridToolbarModule, @@ -2688,11 +2708,6 @@ export class DxDataGridComponent extends DxComponent DxiDataGridTotalItemModule, DxiDataGridValidationRuleModule, DxoDataGridValueFormatModule, - DxiDataGridButtonItemModule, - DxiDataGridEmptyItemModule, - DxiDataGridSimpleItemModule, - DxiDataGridTabbedItemModule, - DxiDataGridTabModule, DxTemplateModule ] }) 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/index.ts b/packages/devextreme-angular/src/ui/data-grid/nested/index.ts index 2f821f3b14f4..b26909cb2948 100644 --- a/packages/devextreme-angular/src/ui/data-grid/nested/index.ts +++ b/packages/devextreme-angular/src/ui/data-grid/nested/index.ts @@ -6,6 +6,7 @@ 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 +28,7 @@ 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'; @@ -86,9 +88,12 @@ export * from './sort-by-group-summary-info-dxi'; export * from './sorting'; export * from './state-storing'; export * from './string-length-rule-dxi'; +export * from './summary-group-item-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'; 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 e3ac21926b33..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 @@ -19,12 +19,12 @@ import { DOCUMENT } from '@angular/common'; import * as CommonTypes from 'devextreme/common'; -import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; -import { ToolbarItemLocation, ToolbarItemComponent, HorizontalAlignment, VerticalAlignment } 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 { FormItemComponent, FormItemType, LabelLocation, dxFormButtonItem, dxFormEmptyItem, dxFormGroupItem, dxFormSimpleItem, dxFormTabbedItem } from 'devextreme/ui/form'; import { dxTabPanelOptions } from 'devextreme/ui/tab_panel'; import { dxButtonOptions } from 'devextreme/ui/button'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; import { DxIntegrationModule, @@ -75,11 +75,11 @@ export class DxiDataGridItemComponent extends CollectionNestedOption implements } @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() @@ -99,51 +99,19 @@ export class DxiDataGridItemComponent extends CollectionNestedOption implements } @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'); + get icon(): string { + return this._getOption('icon'); } - set options(value: any) { - this._setOption('options', value); + set icon(value: string) { + this._setOption('icon', value); } @Input() - get showText(): ShowTextMode { - return this._getOption('showText'); + get tabTemplate(): any { + return this._getOption('tabTemplate'); } - set showText(value: ShowTextMode) { - this._setOption('showText', value); + set tabTemplate(value: any) { + this._setOption('tabTemplate', value); } @Input() @@ -162,46 +130,6 @@ export class DxiDataGridItemComponent extends CollectionNestedOption implements 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); - } - - @Input() - get badge(): string { - return this._getOption('badge'); - } - set badge(value: string) { - this._setOption('badge', 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 title(): string { return this._getOption('title'); @@ -210,6 +138,14 @@ export class DxiDataGridItemComponent extends CollectionNestedOption implements 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'); @@ -226,6 +162,14 @@ export class DxiDataGridItemComponent extends CollectionNestedOption implements 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'); @@ -282,6 +226,14 @@ export class DxiDataGridItemComponent extends CollectionNestedOption implements 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'); @@ -386,6 +338,54 @@ export class DxiDataGridItemComponent extends CollectionNestedOption implements this._setOption('verticalAlignment', 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 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 widget(): ToolbarItemComponent { + return this._getOption('widget'); + } + set widget(value: ToolbarItemComponent) { + this._setOption('widget', value); + } + protected get _optionPath() { return 'items'; 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 index 436973d99cbd..2b1768a2b942 100644 --- a/packages/devextreme-angular/src/ui/data-grid/nested/tab-dxi.ts +++ b/packages/devextreme-angular/src/ui/data-grid/nested/tab-dxi.ts @@ -5,11 +5,17 @@ import { Component, NgModule, Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, SkipSelf, - Input + Input, + ContentChildren, + QueryList } from '@angular/core'; - +import { DOCUMENT } from '@angular/common'; import { dxFormButtonItem, dxFormEmptyItem, dxFormGroupItem, dxFormSimpleItem, dxFormTabbedItem } from 'devextreme/ui/form'; @@ -17,26 +23,40 @@ import { dxFormButtonItem, dxFormEmptyItem, dxFormGroupItem, dxFormSimpleItem, d 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: [''], + template: '', + styles: [':host { display: block; }'], imports: [ DxIntegrationModule ], providers: [ NestedOptionHost, + DxTemplateHost, { provide: PROPERTY_TOKEN_tabs, useExisting: DxiDataGridTabComponent, } ] }) -export class DxiDataGridTabComponent extends CollectionNestedOption { +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'); @@ -124,10 +144,22 @@ export class DxiDataGridTabComponent extends CollectionNestedOption { constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, - @Host() optionHost: 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); } 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/tree-list/index.ts b/packages/devextreme-angular/src/ui/tree-list/index.ts index 36d9fb3205c5..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,23 +199,18 @@ 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 { DxiTreeListButtonItemModule } from 'devextreme-angular/ui/tree-list/nested'; -import { DxiTreeListEmptyItemModule } from 'devextreme-angular/ui/tree-list/nested'; -import { DxiTreeListGroupItemModule } from 'devextreme-angular/ui/tree-list/nested'; -import { DxiTreeListSimpleItemModule } from 'devextreme-angular/ui/tree-list/nested'; -import { DxiTreeListTabbedItemModule } from 'devextreme-angular/ui/tree-list/nested'; -import { DxiTreeListTabModule } 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_toolbarItems, PROPERTY_TOKEN_tabs, + PROPERTY_TOKEN_toolbarItems, } from 'devextreme-angular/core/tokens'; @@ -239,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); @@ -259,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) @@ -269,11 +278,6 @@ export class DxTreeListComponent extends DxComponent this.setChildren('toolbarItems', value); } - @ContentChildren(PROPERTY_TOKEN_tabs) - set _tabsContentChildren(value: QueryList) { - this.setChildren('tabs', value); - } - instance: DxTreeList = null; /** @@ -2379,6 +2383,8 @@ export class DxTreeListComponent extends DxComponent DxoTreeListAtModule, DxoTreeListBoundaryOffsetModule, DxiTreeListButtonModule, + DxiTreeListButtonItemModule, + DxoTreeListButtonOptionsModule, DxiTreeListChangeModule, DxoTreeListColCountByScreenModule, DxoTreeListCollisionModule, @@ -2401,6 +2407,7 @@ export class DxTreeListComponent extends DxComponent DxoTreeListEditorOptionsModule, DxiTreeListEditorOptionsButtonModule, DxiTreeListEmailRuleModule, + DxiTreeListEmptyItemModule, DxiTreeListFieldModule, DxoTreeListFieldLookupModule, DxoTreeListFilterBuilderModule, @@ -2413,6 +2420,7 @@ export class DxTreeListComponent extends DxComponent DxoTreeListFormatModule, DxoTreeListFormItemModule, DxoTreeListFromModule, + DxiTreeListGroupItemModule, DxoTreeListGroupOperationDescriptionsModule, DxoTreeListHeaderFilterModule, DxoTreeListHideModule, @@ -2442,9 +2450,14 @@ export class DxTreeListComponent extends DxComponent DxoTreeListSearchPanelModule, DxoTreeListSelectionModule, DxoTreeListShowModule, + DxiTreeListSimpleItemModule, DxoTreeListSortingModule, DxoTreeListStateStoringModule, DxiTreeListStringLengthRuleModule, + DxiTreeListTabModule, + DxiTreeListTabbedItemModule, + DxoTreeListTabPanelOptionsModule, + DxiTreeListTabPanelOptionsItemModule, DxoTreeListTextsModule, DxoTreeListToModule, DxoTreeListToolbarModule, @@ -2453,13 +2466,8 @@ export class DxTreeListComponent extends DxComponent DxoTreeListTreeListHeaderFilterSearchModule, DxoTreeListTreeListHeaderFilterTextsModule, DxoTreeListTreeListSelectionModule, + DxiTreeListTreeListToolbarItemModule, DxiTreeListValidationRuleModule, - DxiTreeListButtonItemModule, - DxiTreeListEmptyItemModule, - DxiTreeListGroupItemModule, - DxiTreeListSimpleItemModule, - DxiTreeListTabbedItemModule, - DxiTreeListTabModule, DxIntegrationModule, DxTemplateModule ], @@ -2527,6 +2535,8 @@ export class DxTreeListComponent extends DxComponent DxoTreeListAtModule, DxoTreeListBoundaryOffsetModule, DxiTreeListButtonModule, + DxiTreeListButtonItemModule, + DxoTreeListButtonOptionsModule, DxiTreeListChangeModule, DxoTreeListColCountByScreenModule, DxoTreeListCollisionModule, @@ -2549,6 +2559,7 @@ export class DxTreeListComponent extends DxComponent DxoTreeListEditorOptionsModule, DxiTreeListEditorOptionsButtonModule, DxiTreeListEmailRuleModule, + DxiTreeListEmptyItemModule, DxiTreeListFieldModule, DxoTreeListFieldLookupModule, DxoTreeListFilterBuilderModule, @@ -2561,6 +2572,7 @@ export class DxTreeListComponent extends DxComponent DxoTreeListFormatModule, DxoTreeListFormItemModule, DxoTreeListFromModule, + DxiTreeListGroupItemModule, DxoTreeListGroupOperationDescriptionsModule, DxoTreeListHeaderFilterModule, DxoTreeListHideModule, @@ -2590,9 +2602,14 @@ export class DxTreeListComponent extends DxComponent DxoTreeListSearchPanelModule, DxoTreeListSelectionModule, DxoTreeListShowModule, + DxiTreeListSimpleItemModule, DxoTreeListSortingModule, DxoTreeListStateStoringModule, DxiTreeListStringLengthRuleModule, + DxiTreeListTabModule, + DxiTreeListTabbedItemModule, + DxoTreeListTabPanelOptionsModule, + DxiTreeListTabPanelOptionsItemModule, DxoTreeListTextsModule, DxoTreeListToModule, DxoTreeListToolbarModule, @@ -2601,13 +2618,8 @@ export class DxTreeListComponent extends DxComponent DxoTreeListTreeListHeaderFilterSearchModule, DxoTreeListTreeListHeaderFilterTextsModule, DxoTreeListTreeListSelectionModule, + DxiTreeListTreeListToolbarItemModule, DxiTreeListValidationRuleModule, - DxiTreeListButtonItemModule, - DxiTreeListEmptyItemModule, - DxiTreeListGroupItemModule, - DxiTreeListSimpleItemModule, - DxiTreeListTabbedItemModule, - DxiTreeListTabModule, DxTemplateModule ] }) 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/index.ts b/packages/devextreme-angular/src/ui/tree-list/nested/index.ts index c4e41e3c96db..017f7f2588f9 100644 --- a/packages/devextreme-angular/src/ui/tree-list/nested/index.ts +++ b/packages/devextreme-angular/src/ui/tree-list/nested/index.ts @@ -6,6 +6,7 @@ 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'; @@ -76,6 +77,8 @@ 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'; @@ -85,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 5e4aef28a35f..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 @@ -19,12 +19,12 @@ import { DOCUMENT } from '@angular/common'; import * as CommonTypes from 'devextreme/common'; -import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; -import { ToolbarItemLocation, ToolbarItemComponent, HorizontalAlignment, VerticalAlignment } 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 { FormItemComponent, FormItemType, LabelLocation, dxFormButtonItem, dxFormEmptyItem, dxFormGroupItem, dxFormSimpleItem, dxFormTabbedItem } from 'devextreme/ui/form'; import { dxTabPanelOptions } from 'devextreme/ui/tab_panel'; import { dxButtonOptions } from 'devextreme/ui/button'; +import { LocateInMenuMode, ShowTextMode } from 'devextreme/ui/toolbar'; import { DxIntegrationModule, @@ -75,11 +75,11 @@ export class DxiTreeListItemComponent extends CollectionNestedOption implements } @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() @@ -99,51 +99,19 @@ export class DxiTreeListItemComponent extends CollectionNestedOption implements } @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'); + get icon(): string { + return this._getOption('icon'); } - set options(value: any) { - this._setOption('options', value); + set icon(value: string) { + this._setOption('icon', value); } @Input() - get showText(): ShowTextMode { - return this._getOption('showText'); + get tabTemplate(): any { + return this._getOption('tabTemplate'); } - set showText(value: ShowTextMode) { - this._setOption('showText', value); + set tabTemplate(value: any) { + this._setOption('tabTemplate', value); } @Input() @@ -162,46 +130,6 @@ export class DxiTreeListItemComponent extends CollectionNestedOption implements 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); - } - - @Input() - get badge(): string { - return this._getOption('badge'); - } - set badge(value: string) { - this._setOption('badge', 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 title(): string { return this._getOption('title'); @@ -210,6 +138,14 @@ export class DxiTreeListItemComponent extends CollectionNestedOption implements 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'); @@ -226,6 +162,14 @@ export class DxiTreeListItemComponent extends CollectionNestedOption implements 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'); @@ -282,6 +226,14 @@ export class DxiTreeListItemComponent extends CollectionNestedOption implements 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'); @@ -386,6 +338,54 @@ export class DxiTreeListItemComponent extends CollectionNestedOption implements this._setOption('verticalAlignment', 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 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 widget(): ToolbarItemComponent { + return this._getOption('widget'); + } + set widget(value: ToolbarItemComponent) { + this._setOption('widget', value); + } + protected get _optionPath() { return 'items'; 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 index d22cc4d59379..acb5975b78fc 100644 --- a/packages/devextreme-angular/src/ui/tree-list/nested/tab-dxi.ts +++ b/packages/devextreme-angular/src/ui/tree-list/nested/tab-dxi.ts @@ -5,11 +5,17 @@ import { Component, NgModule, Host, + ElementRef, + Renderer2, + Inject, + AfterViewInit, SkipSelf, - Input + Input, + ContentChildren, + QueryList } from '@angular/core'; - +import { DOCUMENT } from '@angular/common'; import { dxFormButtonItem, dxFormEmptyItem, dxFormGroupItem, dxFormSimpleItem, dxFormTabbedItem } from 'devextreme/ui/form'; @@ -17,26 +23,40 @@ import { dxFormButtonItem, dxFormEmptyItem, dxFormGroupItem, dxFormSimpleItem, d 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: [''], + template: '', + styles: [':host { display: block; }'], imports: [ DxIntegrationModule ], providers: [ NestedOptionHost, + DxTemplateHost, { provide: PROPERTY_TOKEN_tabs, useExisting: DxiTreeListTabComponent, } ] }) -export class DxiTreeListTabComponent extends CollectionNestedOption { +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'); @@ -124,10 +144,22 @@ export class DxiTreeListTabComponent extends CollectionNestedOption { constructor(@SkipSelf() @Host() parentOptionHost: NestedOptionHost, - @Host() optionHost: 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); } 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/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..88a0a0840cc8 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 dffb2a8ec387..6f2b0c4bb4f6 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 { 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 { 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, EnterKeyAction, EnterKeyDirection, PagerPageSize, GridBase, DataRenderMode, StateStoreType, SummaryType } from "devextreme/common/grids"; +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 +// GroupItem +// 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 } }, }, }); @@ -1925,27 +2092,51 @@ const GroupingTexts = Object.assign string); - displayFormat?: string | 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; + }; + colSpan?: number | undefined; + cssClass?: string | undefined; + items?: Array; + itemType?: FormItemType; name?: string | undefined; - showInColumn?: string | undefined; - showInGroupFooter?: boolean; - skipEmptyValues?: boolean; - summaryType?: string | SummaryType | undefined; - valueFormat?: LocalizationFormat | 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: "groupItems", + OptionName: "items", IsCollectionItem: true, ExpectedChildren: { - valueFormat: { optionName: "valueFormat", isCollectionItem: false } + colCountByScreen: { optionName: "colCountByScreen", isCollectionItem: false } + }, + TemplateProps: [{ + tmplOption: "captionTemplate", + render: "captionRender", + component: "captionComponent" + }, { + tmplOption: "template", + render: "render", + component: "component" + }], + PredefinedProps: { + itemType: "group" }, }, }); @@ -2110,25 +2301,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 +2390,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 +2456,7 @@ const KeyboardNavigation = Object.assign(_componentMy, // owners: // FormItem // Column +// SimpleItem type INumericRuleProps = React.PropsWithChildren<{ ignoreEmptyValue?: boolean; message?: string; @@ -2388,10 +2670,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 +2761,7 @@ const Paging = Object.assign(_comp // owners: // FormItem // Column +// SimpleItem type IPatternRuleProps = React.PropsWithChildren<{ ignoreEmptyValue?: boolean; message?: string; @@ -2655,6 +2938,7 @@ const Position = Object.assign(_ // owners: // FormItem // Column +// SimpleItem type IRangeRuleProps = React.PropsWithChildren<{ ignoreEmptyValue?: boolean; max?: Date | number | string; @@ -2706,6 +2990,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 +3338,7 @@ const StateStoring = Object.assign { elementDescriptor: { OptionName: "summary", ExpectedChildren: { - groupItem: { optionName: "groupItems", isCollectionItem: true }, + summaryGroupItem: { optionName: "groupItems", isCollectionItem: true }, summaryTexts: { optionName: "texts", isCollectionItem: false }, texts: { optionName: "texts", isCollectionItem: false }, totalItem: { optionName: "totalItems", isCollectionItem: true } @@ -3072,6 +3425,37 @@ const Summary = Object.assign(_co componentType: "option", }); +// owners: +// Summary +type ISummaryGroupItemProps = React.PropsWithChildren<{ + alignByColumn?: boolean; + column?: string | undefined; + customizeText?: ((itemInfo: { value: string | number | Date, valueText: string }) => string); + displayFormat?: string | undefined; + name?: string | undefined; + showInColumn?: string | undefined; + showInGroupFooter?: boolean; + skipEmptyValues?: boolean; + summaryType?: string | SummaryType | undefined; + valueFormat?: LocalizationFormat | undefined; +}> +const _componentSummaryGroupItem = (props: ISummaryGroupItemProps) => { + return React.createElement(NestedOption, { + ...props, + elementDescriptor: { + OptionName: "groupItems", + IsCollectionItem: true, + ExpectedChildren: { + valueFormat: { optionName: "valueFormat", isCollectionItem: false } + }, + }, + }); +}; + +const SummaryGroupItem = Object.assign(_componentSummaryGroupItem, { + componentType: "option", +}); + // owners: // Summary type ISummaryTextsProps = React.PropsWithChildren<{ @@ -3098,6 +3482,234 @@ const SummaryTexts = 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 +3811,7 @@ const _componentToolbar = (props: IToolbarProps) => { elementDescriptor: { OptionName: "toolbar", ExpectedChildren: { + dataGridToolbarItem: { optionName: "items", isCollectionItem: true }, item: { optionName: "items", isCollectionItem: true } }, }, @@ -3288,6 +3901,7 @@ const TotalItem = Object.assign // owners: // FormItem // Column +// SimpleItem type IValidationRuleProps = React.PropsWithChildren<{ message?: string; trim?: boolean; @@ -3319,7 +3933,7 @@ const ValidationRule = 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 544afb7ae229..ffb3f1d23d07 100644 --- a/packages/devextreme-vue/src/data-grid.ts +++ b/packages/devextreme-vue/src/data-grid.ts @@ -45,13 +45,13 @@ import { FilterPanelTexts, ApplyFilterMode, GroupExpandMode, - SummaryType, EnterKeyAction, EnterKeyDirection, PagerPageSize, GridBase, DataRenderMode, StateStoreType, + SummaryType, } from "devextreme/common/grids"; import { dxDataGridColumn, @@ -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 = { @@ -2537,28 +2739,34 @@ const DxGroupItemConfig = { emits: { "update:isActive": null, "update:hoveredElement": null, - "update:alignByColumn": null, - "update:column": null, - "update:customizeText": null, - "update:displayFormat": 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:showInColumn": null, - "update:showInGroupFooter": null, - "update:skipEmptyValues": null, - "update:summaryType": null, - "update:valueFormat": null, + "update:template": null, + "update:visible": null, + "update:visibleIndex": null, }, props: { - alignByColumn: Boolean, - column: String, - customizeText: Function as PropType<((itemInfo: { value: string | number | Date, valueText: string }) => string)>, - displayFormat: String, + 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, - showInColumn: String, - showInGroupFooter: Boolean, - skipEmptyValues: Boolean, - summaryType: String as PropType, - valueFormat: [Object, String, Function] as PropType string)) | Record | string> + template: {}, + visible: Boolean, + visibleIndex: Number } }; @@ -2566,10 +2774,13 @@ prepareConfigurationComponentConfig(DxGroupItemConfig); const DxGroupItem = defineComponent(DxGroupItemConfig); -(DxGroupItem as any).$_optionName = "groupItems"; +(DxGroupItem as any).$_optionName = "items"; (DxGroupItem as any).$_isCollectionItem = true; +(DxGroupItem as any).$_predefinedProps = { + itemType: "group" +}; (DxGroupItem as any).$_expectedChildren = { - valueFormat: { isCollectionItem: false, optionName: "valueFormat" } + colCountByScreen: { isCollectionItem: false, optionName: "colCountByScreen" } }; const DxGroupOperationDescriptionsConfig = { @@ -2749,33 +2960,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 +3049,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 +3900,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, @@ -3751,12 +4095,51 @@ const DxSummary = defineComponent(DxSummaryConfig); (DxSummary as any).$_optionName = "summary"; (DxSummary as any).$_expectedChildren = { - groupItem: { isCollectionItem: true, optionName: "groupItems" }, + summaryGroupItem: { isCollectionItem: true, optionName: "groupItems" }, summaryTexts: { isCollectionItem: false, optionName: "texts" }, texts: { isCollectionItem: false, optionName: "texts" }, totalItem: { isCollectionItem: true, optionName: "totalItems" } }; +const DxSummaryGroupItemConfig = { + emits: { + "update:isActive": null, + "update:hoveredElement": null, + "update:alignByColumn": null, + "update:column": null, + "update:customizeText": null, + "update:displayFormat": null, + "update:name": null, + "update:showInColumn": null, + "update:showInGroupFooter": null, + "update:skipEmptyValues": null, + "update:summaryType": null, + "update:valueFormat": null, + }, + props: { + alignByColumn: Boolean, + column: String, + customizeText: Function as PropType<((itemInfo: { value: string | number | Date, valueText: string }) => string)>, + displayFormat: String, + name: String, + showInColumn: String, + showInGroupFooter: Boolean, + skipEmptyValues: Boolean, + summaryType: String as PropType, + valueFormat: [Object, String, Function] as PropType string)) | Record | string> + } +}; + +prepareConfigurationComponentConfig(DxSummaryGroupItemConfig); + +const DxSummaryGroupItem = defineComponent(DxSummaryGroupItemConfig); + +(DxSummaryGroupItem as any).$_optionName = "groupItems"; +(DxSummaryGroupItem as any).$_isCollectionItem = true; +(DxSummaryGroupItem as any).$_expectedChildren = { + valueFormat: { isCollectionItem: false, optionName: "valueFormat" } +}; + const DxSummaryTextsConfig = { emits: { "update:isActive": null, @@ -3790,6 +4173,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 +4536,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 +4699,8 @@ export { DxAt, DxBoundaryOffset, DxButton, + DxButtonItem, + DxButtonOptions, DxChange, DxColCountByScreen, DxCollision, @@ -4115,11 +4722,13 @@ export { DxDataGridHeaderFilterSearch, DxDataGridHeaderFilterTexts, DxDataGridSelection, + DxDataGridToolbarItem, DxEditing, DxEditingTexts, DxEditorOptions, DxEditorOptionsButton, DxEmailRule, + DxEmptyItem, DxExport, DxExportTexts, DxField, @@ -4168,12 +4777,18 @@ export { DxSearchPanel, DxSelection, DxShow, + DxSimpleItem, DxSortByGroupSummaryInfo, DxSorting, DxStateStoring, DxStringLengthRule, DxSummary, + DxSummaryGroupItem, 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 b00325909386..49ce5e06cd03 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";