CardView: Fix "onSaved" and "onSaving" options (T1314094) (#31791)

Author: dmirgaev

packages/devextreme-angular/src/ui/card-view/index.ts

@@ -24,7 +24,7 @@ import {
 export { ExplicitTypes } from 'devextreme/ui/card_view';
 
 import DataSource from 'devextreme/data/data_source';
-import { CardCover, CardHeader, ColumnProperties, dxCardViewEditing, HeaderPanel, CardClickEvent, CardDblClickEvent, CardHoverChangedEvent, CardInsertedEvent, CardInsertingEvent, CardPreparedEvent, CardRemovedEvent, CardRemovingEvent, CardSavedEvent, CardSavingEvent, CardUpdatedEvent, CardUpdatingEvent, ContextMenuPreparingEvent, EditCanceledEvent, EditCancelingEvent, EditingStartEvent, FieldCaptionClickEvent, FieldCaptionDblClickEvent, FieldCaptionPreparedEvent, FieldValueClickEvent, FieldValueDblClickEvent, FieldValuePreparedEvent, FocusedCardChanged, InitNewCardEvent, SelectionChangedEvent, Paging, RemoteOperations, SelectionConfiguration, dxCardViewToolbar } from 'devextreme/ui/card_view';
+import { CardCover, CardHeader, ColumnProperties, dxCardViewEditing, HeaderPanel, CardClickEvent, CardDblClickEvent, CardHoverChangedEvent, CardInsertedEvent, CardInsertingEvent, CardPreparedEvent, CardRemovedEvent, CardRemovingEvent, CardUpdatedEvent, CardUpdatingEvent, ContextMenuPreparingEvent, EditCanceledEvent, EditCancelingEvent, EditingStartEvent, FieldCaptionClickEvent, FieldCaptionDblClickEvent, FieldCaptionPreparedEvent, FieldValueClickEvent, FieldValueDblClickEvent, FieldValuePreparedEvent, FocusedCardChanged, InitNewCardEvent, SavedEvent, SavingEvent, SelectionChangedEvent, Paging, RemoteOperations, SelectionConfiguration, dxCardViewToolbar } from 'devextreme/ui/card_view';
 import { Mode, ScrollbarMode } from 'devextreme/common';
 import { ColumnChooser, FilterPanel, HeaderFilter, Pager, SearchPanel, Sorting } from 'devextreme/common/grids';
 import { DataSourceOptions } from 'devextreme/data/data_source';
@@ -727,22 +727,6 @@ export class DxCardViewComponent<TCardData = any, TKey = any> extends DxComponen
      * [descr:undefined]
     
     
-     */
-    @Output() onCardSaved: EventEmitter<CardSavedEvent>;
-
-    /**
-    
-     * [descr:undefined]
-    
-    
-     */
-    @Output() onCardSaving: EventEmitter<CardSavingEvent>;
-
-    /**
-    
-     * [descr:undefined]
-    
-    
      */
     @Output() onCardUpdated: EventEmitter<CardUpdatedEvent>;
 
@@ -895,6 +879,22 @@ export class DxCardViewComponent<TCardData = any, TKey = any> extends DxComponen
      * [descr:undefined]
     
     
+     */
+    @Output() onSaved: EventEmitter<SavedEvent>;
+
+    /**
+    
+     * [descr:undefined]
+    
+    
+     */
+    @Output() onSaving: EventEmitter<SavingEvent>;
+
+    /**
+    
+     * [descr:undefined]
+    
+    
      */
     @Output() onSelectionChanged: EventEmitter<SelectionChangedEvent>;
 
@@ -1248,8 +1248,6 @@ export class DxCardViewComponent<TCardData = any, TKey = any> extends DxComponen
             { subscribe: 'cardPrepared', emit: 'onCardPrepared' },
             { subscribe: 'cardRemoved', emit: 'onCardRemoved' },
             { subscribe: 'cardRemoving', emit: 'onCardRemoving' },
-            { subscribe: 'cardSaved', emit: 'onCardSaved' },
-            { subscribe: 'cardSaving', emit: 'onCardSaving' },
             { subscribe: 'cardUpdated', emit: 'onCardUpdated' },
             { subscribe: 'cardUpdating', emit: 'onCardUpdating' },
             { subscribe: 'contentReady', emit: 'onContentReady' },
@@ -1269,6 +1267,8 @@ export class DxCardViewComponent<TCardData = any, TKey = any> extends DxComponen
             { subscribe: 'initialized', emit: 'onInitialized' },
             { subscribe: 'initNewCard', emit: 'onInitNewCard' },
             { subscribe: 'optionChanged', emit: 'onOptionChanged' },
+            { subscribe: 'saved', emit: 'onSaved' },
+            { subscribe: 'saving', emit: 'onSaving' },
             { subscribe: 'selectionChanged', emit: 'onSelectionChanged' },
             { emit: 'accessKeyChange' },
             { emit: 'activeStateEnabledChange' },

packages/devextreme-react/src/card-view.ts

@@ -9,7 +9,7 @@ import dxCardView, {
 import { Component as BaseComponent, IHtmlOptions, ComponentRef, NestedComponentMeta } from "./core/component";
 import NestedOption from "./core/nested-option";
 
-import type { CardClickEvent, CardDblClickEvent, CardInsertedEvent, CardInsertingEvent, CardPreparedEvent, CardRemovedEvent, CardRemovingEvent, CardSavedEvent, CardSavingEvent, CardUpdatedEvent, CardUpdatingEvent, ContextMenuPreparingEvent, EditCanceledEvent, EditCancelingEvent, EditingStartEvent, FieldCaptionClickEvent, FieldCaptionDblClickEvent, FieldCaptionPreparedEvent, FieldValueClickEvent, FieldValueDblClickEvent, FieldValuePreparedEvent, InitNewCardEvent, CardTemplateData, CardHeaderItem as CardViewCardHeaderItem, CardHeaderPredefinedItem, FieldTemplateData, ColumnTemplateData, EditingTexts as CardViewEditingTexts, PredefinedToolbarItem, dxCardViewToolbarItem } from "devextreme/ui/card_view";
+import type { CardClickEvent, CardDblClickEvent, CardInsertedEvent, CardInsertingEvent, CardPreparedEvent, CardRemovedEvent, CardRemovingEvent, CardUpdatedEvent, CardUpdatingEvent, ContextMenuPreparingEvent, EditCanceledEvent, EditCancelingEvent, EditingStartEvent, FieldCaptionClickEvent, FieldCaptionDblClickEvent, FieldCaptionPreparedEvent, FieldValueClickEvent, FieldValueDblClickEvent, FieldValuePreparedEvent, InitNewCardEvent, SavedEvent, SavingEvent, CardTemplateData, CardHeaderItem as CardViewCardHeaderItem, CardHeaderPredefinedItem, FieldTemplateData, ColumnTemplateData, EditingTexts as CardViewEditingTexts, PredefinedToolbarItem, dxCardViewToolbarItem } from "devextreme/ui/card_view";
 import type { AnimationConfig, CollisionResolution, PositionConfig, AnimationState, AnimationType, CollisionResolutionCombination } from "devextreme/common/core/animation";
 import type { ValidationRuleType, HorizontalAlignment, VerticalAlignment, ButtonStyle, template, ButtonType, ToolbarItemLocation, ToolbarItemComponent, SearchMode, SingleMultipleOrNone, SelectAllMode, DataType, Format as CommonFormat, SortOrder, ComparisonOperator, DragHighlight, Mode, Direction, PositionAlignment, DisplayMode, ScrollbarMode, TabsIconPosition, TabsStyle, Position as CommonPosition } from "devextreme/common";
 import type { dxButtonOptions, ClickEvent, ContentReadyEvent, DisposingEvent, InitializedEvent, OptionChangedEvent } from "devextreme/ui/button";
@@ -44,8 +44,6 @@ type ICardViewOptionsNarrowedEvents<TCardData = any, TKey = any> = {
   onCardPrepared?: ((e: CardPreparedEvent) => void);
   onCardRemoved?: ((e: CardRemovedEvent<TCardData, TKey>) => void);
   onCardRemoving?: ((e: CardRemovingEvent<TCardData, TKey>) => void);
-  onCardSaved?: ((e: CardSavedEvent) => void);
-  onCardSaving?: ((e: CardSavingEvent) => void);
   onCardUpdated?: ((e: CardUpdatedEvent<TCardData, TKey>) => void);
   onCardUpdating?: ((e: CardUpdatingEvent<TCardData, TKey>) => void);
   onContextMenuPreparing?: ((e: ContextMenuPreparingEvent<TCardData>) => void);
@@ -59,6 +57,8 @@ type ICardViewOptionsNarrowedEvents<TCardData = any, TKey = any> = {
   onFieldValueDblClick?: ((e: FieldValueDblClickEvent) => void);
   onFieldValuePrepared?: ((e: FieldValuePreparedEvent) => void);
   onInitNewCard?: ((e: InitNewCardEvent<TCardData>) => void);
+  onSaved?: ((e: SavedEvent) => void);
+  onSaving?: ((e: SavingEvent) => void);
 }
 
 type ICardViewOptions<TCardData = any, TKey = any> = React.PropsWithChildren<ReplaceFieldTypes<Properties<TCardData, TKey>, ICardViewOptionsNarrowedEvents<TCardData, TKey>> & IHtmlOptions & {
@@ -95,7 +95,7 @@ const CardView = memo(
       ), []);
 
       const subscribableOptions = useMemo(() => (["filterValue","selectedCardKeys","filterBuilder.value","filterPanel.filterEnabled","editing.form.formData","loadPanel.position","loadPanel.visible","paging.pageIndex","paging.pageSize","searchPanel.text"]), []);
-      const independentEvents = useMemo(() => (["onCardClick","onCardDblClick","onCardInserted","onCardInserting","onCardPrepared","onCardRemoved","onCardRemoving","onCardSaved","onCardSaving","onCardUpdated","onCardUpdating","onContentReady","onContextMenuPreparing","onDataErrorOccurred","onDisposing","onEditCanceled","onEditCanceling","onEditingStart","onFieldCaptionClick","onFieldCaptionDblClick","onFieldCaptionPrepared","onFieldValueClick","onFieldValueDblClick","onFieldValuePrepared","onInitialized","onInitNewCard"]), []);
+      const independentEvents = useMemo(() => (["onCardClick","onCardDblClick","onCardInserted","onCardInserting","onCardPrepared","onCardRemoved","onCardRemoving","onCardUpdated","onCardUpdating","onContentReady","onContextMenuPreparing","onDataErrorOccurred","onDisposing","onEditCanceled","onEditCanceling","onEditingStart","onFieldCaptionClick","onFieldCaptionDblClick","onFieldCaptionPrepared","onFieldValueClick","onFieldValueDblClick","onFieldValuePrepared","onInitialized","onInitNewCard","onSaved","onSaving"]), []);
 
       const defaults = useMemo(() => ({
         defaultFilterValue: "filterValue",

packages/devextreme-vue/src/card-view.ts

@@ -19,8 +19,6 @@ import {
  CardPreparedEvent,
  CardRemovedEvent,
  CardRemovingEvent,
- CardSavedEvent,
- CardSavingEvent,
  CardUpdatedEvent,
  CardUpdatingEvent,
  ContextMenuPreparingEvent,
@@ -35,6 +33,8 @@ import {
  FieldValuePreparedEvent,
  FocusedCardChanged,
  InitNewCardEvent,
+ SavedEvent,
+ SavingEvent,
  SelectionChangedEvent,
  Paging,
  RemoteOperations,
@@ -250,8 +250,6 @@ type AccessibleOptions = Pick<Properties,
   "onCardPrepared" |
   "onCardRemoved" |
   "onCardRemoving" |
-  "onCardSaved" |
-  "onCardSaving" |
   "onCardUpdated" |
   "onCardUpdating" |
   "onContentReady" |
@@ -271,6 +269,8 @@ type AccessibleOptions = Pick<Properties,
   "onInitialized" |
   "onInitNewCard" |
   "onOptionChanged" |
+  "onSaved" |
+  "onSaving" |
   "onSelectionChanged" |
   "pager" |
   "paging" |
@@ -335,8 +335,6 @@ const componentConfig = {
     onCardPrepared: Function as PropType<((e: CardPreparedEvent) => void)>,
     onCardRemoved: Function as PropType<((e: CardRemovedEvent) => void)>,
     onCardRemoving: Function as PropType<((e: CardRemovingEvent) => void)>,
-    onCardSaved: Function as PropType<((e: CardSavedEvent) => void)>,
-    onCardSaving: Function as PropType<((e: CardSavingEvent) => void)>,
     onCardUpdated: Function as PropType<((e: CardUpdatedEvent) => void)>,
     onCardUpdating: Function as PropType<((e: CardUpdatingEvent) => void)>,
     onContentReady: Function as PropType<((e: EventInfo<any>) => void)>,
@@ -356,6 +354,8 @@ const componentConfig = {
     onInitialized: Function as PropType<((e: { component: Component<any>, element: any }) => void)>,
     onInitNewCard: Function as PropType<((e: InitNewCardEvent) => void)>,
     onOptionChanged: Function as PropType<((e: { component: DOMComponent, element: any, fullName: string, model: any, name: string, previousValue: any, value: any }) => void)>,
+    onSaved: Function as PropType<((e: SavedEvent) => void)>,
+    onSaving: Function as PropType<((e: SavingEvent) => void)>,
     onSelectionChanged: Function as PropType<((e: SelectionChangedEvent) => void)>,
     pager: Object as PropType<Pager | Record<string, any> | PagerBase>,
     paging: Object as PropType<Paging | Record<string, any>>,
@@ -416,8 +416,6 @@ const componentConfig = {
     "update:onCardPrepared": null,
     "update:onCardRemoved": null,
     "update:onCardRemoving": null,
-    "update:onCardSaved": null,
-    "update:onCardSaving": null,
     "update:onCardUpdated": null,
     "update:onCardUpdating": null,
     "update:onContentReady": null,
@@ -437,6 +435,8 @@ const componentConfig = {
     "update:onInitialized": null,
     "update:onInitNewCard": null,
     "update:onOptionChanged": null,
+    "update:onSaved": null,
+    "update:onSaving": null,
     "update:onSelectionChanged": null,
     "update:pager": null,
     "update:paging": null,

packages/devextreme/js/ui/card_view.d.ts

@@ -1126,34 +1126,34 @@ export type CardUpdatingEvent<TCardData = unknown, TKey = unknown> = EventInfo<d
 };
 
 /**
- * @docid _ui_card_view_CardSavedEvent
+ * @docid _ui_card_view_SavedEvent
  * @public
  * @type object
  * @inherits EventInfo
  */
-export type CardSavedEvent = EventInfo<dxCardView> & {
+export type SavedEvent = EventInfo<dxCardView> & {
     /**
-     * @docid _ui_card_view_CardSavedEvent.changes
+     * @docid _ui_card_view_SavedEvent.changes
      * @public
      */
     changes: DataChange[];
 };
 
 /**
- * @docid _ui_card_view_CardSavingEvent
+ * @docid _ui_card_view_SavingEvent
  * @public
  * @type object
  * @inherits EventInfo,Cancelable
  */
-export type CardSavingEvent = EventInfo<dxCardView> & Cancelable & {
+export type SavingEvent = EventInfo<dxCardView> & Cancelable & {
     /**
-     * @docid _ui_card_view_CardSavingEvent.promise
+     * @docid _ui_card_view_SavingEvent.promise
      * @type Promise<void>
      * @public
      */
     promise?: PromiseLike<void>;
     /**
-     * @docid _ui_card_view_CardSavingEvent.changes
+     * @docid _ui_card_view_SavingEvent.changes
      * @public
      */
     changes: DataChange[];
@@ -1689,17 +1689,17 @@ export interface dxCardViewOptions<TCardData = unknown, TKey = unknown> extends
     /**
      * @docid
      * @public
-     * @type_function_param1 e:{ui/card_view:CardSavedEvent}
+     * @type_function_param1 e:{ui/card_view:SavedEvent}
      * @action
      */
-    onCardSaved?: (e: CardSavedEvent) => void;
+    onSaved?: (e: SavedEvent) => void;
     /**
      * @docid
      * @public
-     * @type_function_param1 e:{ui/card_view:CardSavingEvent}
+     * @type_function_param1 e:{ui/card_view:SavingEvent}
      * @action
      */
-    onCardSaving?: (e: CardSavingEvent) => void;
+    onSaving?: (e: SavingEvent) => void;
 
     // #endregion
 

packages/devextreme/js/ui/card_view_types.d.ts

@@ -38,8 +38,8 @@ export {
   CardRemovingEvent,
   CardUpdatedEvent,
   CardUpdatingEvent,
-  CardSavedEvent,
-  CardSavingEvent,
+  SavedEvent,
+  SavingEvent,
   SelectionConfiguration,
   SelectionChangedEvent,
   ContextMenuTarget,

packages/devextreme/ts/dx.all.d.ts

@@ -10399,31 +10399,6 @@ declare module DevExpress.ui {
          */
         key: TKey;
       };
-    /**
-     * [descr:_ui_card_view_CardSavedEvent]
-     */
-    export type CardSavedEvent =
-      DevExpress.common.core.events.EventInfo<dxCardView> & {
-        /**
-         * [descr:_ui_card_view_CardSavedEvent.changes]
-         */
-        changes: DevExpress.common.grids.DataChange[];
-      };
-    /**
-     * [descr:_ui_card_view_CardSavingEvent]
-     */
-    export type CardSavingEvent =
-      DevExpress.common.core.events.EventInfo<dxCardView> &
-        DevExpress.common.core.events.Cancelable & {
-          /**
-           * [descr:_ui_card_view_CardSavingEvent.promise]
-           */
-          promise?: PromiseLike<void>;
-          /**
-           * [descr:_ui_card_view_CardSavingEvent.changes]
-           */
-          changes: DevExpress.common.grids.DataChange[];
-        };
     /**
      * [descr:CardTemplateData]
      */
@@ -10678,6 +10653,31 @@ declare module DevExpress.ui {
       TCardData = unknown,
       TKey = unknown
     > = dxCardViewOptions<TCardData, TKey>;
+    /**
+     * [descr:_ui_card_view_SavedEvent]
+     */
+    export type SavedEvent =
+      DevExpress.common.core.events.EventInfo<dxCardView> & {
+        /**
+         * [descr:_ui_card_view_SavedEvent.changes]
+         */
+        changes: DevExpress.common.grids.DataChange[];
+      };
+    /**
+     * [descr:_ui_card_view_SavingEvent]
+     */
+    export type SavingEvent =
+      DevExpress.common.core.events.EventInfo<dxCardView> &
+        DevExpress.common.core.events.Cancelable & {
+          /**
+           * [descr:_ui_card_view_SavingEvent.promise]
+           */
+          promise?: PromiseLike<void>;
+          /**
+           * [descr:_ui_card_view_SavingEvent.changes]
+           */
+          changes: DevExpress.common.grids.DataChange[];
+        };
     /**
      * [descr:_ui_card_view_SelectionChangedEvent]
      */
@@ -11082,13 +11082,13 @@ declare module DevExpress.ui {
      */
     onCardUpdating?: (e: DevExpress.ui.dxCardView.CardUpdatingEvent) => void;
     /**
-     * [descr:dxCardViewOptions.onCardSaved]
+     * [descr:dxCardViewOptions.onSaved]
      */
-    onCardSaved?: (e: DevExpress.ui.dxCardView.CardSavedEvent) => void;
+    onSaved?: (e: DevExpress.ui.dxCardView.SavedEvent) => void;
     /**
-     * [descr:dxCardViewOptions.onCardSaving]
+     * [descr:dxCardViewOptions.onSaving]
      */
-    onCardSaving?: (e: DevExpress.ui.dxCardView.CardSavingEvent) => void;
+    onSaving?: (e: DevExpress.ui.dxCardView.SavingEvent) => void;
 
     /**
      * [descr:dxCardViewOptions.selectedCardKeys]