Minor updates on drop event

Author: m2a2x

.gitignore

@@ -21,6 +21,7 @@ log.txt
 .vscode/
 .sass-cache/
 .versions/
+packages/
 node_modules/
 vscode-data.json
 

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Revolist OU
+Copyright (c) 2024 Revolist OU
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@revolist/revogrid",
   "version": "4.0.0",
-  "description": "Virtual reactive data grid component - RevoGrid.",
+  "description": "Virtual reactive data grid spreadsheet component - RevoGrid.",
   "license": "MIT",
   "directories": {
     "doc": "docs"
@@ -18,25 +18,47 @@
   "keywords": [
     "revo-grid",
     "revolist",
+    "csv",
     "datagrid",
-    "storybook",
-    "stenciljs",
-    "reactive",
+    "datalist",
+    "datamanager",
+    "editable",
+    "excel",
+    "excel-grid",
+    "export",
+    "fast-grid",
+    "filtering",
     "grid",
-    "datagrid",
+    "grouping",
+    "infinity-grid",
+    "reactive",
+    "spreadsheet",
+    "stenciljs",
+    "storybook",
+    "treeview",
     "virtualgrid",
     "virtual",
+    "virtuallist",
+    "virtual-scroll",
+
     "vue",
-    "react",
-    "react-grid",
     "vue-grid",
     "vue-datagrid",
-    "fast-grid",
-    "excel-grid",
-    "editable",
-    "excel",
-    "export",
-    "filtering"
+    "vue3",
+    "vue3-datagrid",
+
+    "react",
+    "react-grid",
+    "react-datagrid",
+
+    "svelte",
+    "svelte-grid",
+    "svelte-datagrid",
+
+    "angular",
+    "angular-grid",
+    "angular-datagrid",
+    "angular-tree"
   ],
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -90,7 +112,10 @@
     "typescript": "^5.2.2"
   },
   "dependencies": {
-    "@stencil/core": "^4.16.0",
+    "@stencil/core": "^4.17.1",
     "lodash": "^4.17.21"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

packages/angular

@@ -6,7 +6,7 @@
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeRowRenderEvent, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionSettingsState, DragStartEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, Observable, PositionItem, RowDefinition, RowHeaders, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/interfaces";
-import { BeforeEdit, BeforeRangeSaveDataDetails, BeforeSaveDataDetails, Cell, ChangedRange, EditCell, EditorCtr, Editors, RangeArea, SaveDataDetails, SelectionStoreState, TempRange } from "./types/selection";
+import { AfterEditEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeSaveDataDetails, Cell, ChangedRange, EditCell, EditorCtr, Editors, RangeArea, SaveDataDetails, SelectionStoreState, TempRange } from "./types/selection";
 import { PluginBaseComponent, PluginExternalConstructor } from "./types/plugin";
 import { Theme } from "./types/theme";
 import { AutoSizeColumnConfig } from "./plugins/column.auto-size.plugin";
@@ -24,7 +24,7 @@ import { ResizeProps } from "./services/resizable.directive";
 import { Cell as Cell1, ColumnRegular as ColumnRegular1, DataType as DataType1, DimensionCols as DimensionCols1, DimensionRows as DimensionRows1, DimensionSettingsState as DimensionSettingsState1, Observable as Observable1, SelectionStoreState as SelectionStoreState1 } from "./components";
 import { ElementScroll, ViewportData } from "./types/viewport.interfaces";
 export { AllDimensionType, ApplyFocusEvent, BeforeCellRenderEvent, BeforeRowRenderEvent, ColumnGrouping, ColumnProp, ColumnRegular, ColumnType, DataFormat, DataType, DimensionSettingsState, DragStartEvent, FocusRenderEvent, FocusTemplateFunc, InitialHeaderClick, Observable, PositionItem, RowDefinition, RowHeaders, ViewPortResizeEvent, ViewPortScrollEvent, ViewportState, ViewSettingSizeProp } from "./types/interfaces";
-export { BeforeEdit, BeforeRangeSaveDataDetails, BeforeSaveDataDetails, Cell, ChangedRange, EditCell, EditorCtr, Editors, RangeArea, SaveDataDetails, SelectionStoreState, TempRange } from "./types/selection";
+export { AfterEditEvent, BeforeEdit, BeforeRangeSaveDataDetails, BeforeSaveDataDetails, Cell, ChangedRange, EditCell, EditorCtr, Editors, RangeArea, SaveDataDetails, SelectionStoreState, TempRange } from "./types/selection";
 export { PluginBaseComponent, PluginExternalConstructor } from "./types/plugin";
 export { Theme } from "./types/theme";
 export { AutoSizeColumnConfig } from "./plugins/column.auto-size.plugin";
@@ -73,7 +73,7 @@ export namespace Components {
          */
         "canMoveColumns": boolean;
         /**
-          * Clear current grid focus
+          * Clear current grid focus. Grid has no longer focus on it.
          */
         "clearFocus": () => Promise<void>;
         /**
@@ -729,7 +729,7 @@ declare global {
         "contentsizechanged": MultiDimensionType;
         "beforeedit": BeforeSaveDataDetails;
         "beforerangeedit": BeforeRangeSaveDataDetails;
-        "afteredit": BeforeSaveDataDetails | BeforeRangeSaveDataDetails;
+        "afteredit": AfterEditEvent;
         "beforeautofill": ChangedRange;
         "beforeange": ChangedRange;
         "afterfocus": {
@@ -965,7 +965,7 @@ declare global {
         "rowdragendinit": any;
         "rowdragmoveinit": PositionItem;
         "rowdragmousemove": Cell;
-        "rowdragendinit": {
+        "rowdropinit": {
     from: number;
     to: number;
   };
@@ -1236,7 +1236,7 @@ declare namespace LocalJSX {
         /**
           * Triggered after data applied or range changed.
          */
-        "onAfteredit"?: (event: RevoGridCustomEvent<BeforeSaveDataDetails | BeforeRangeSaveDataDetails>) => void;
+        "onAfteredit"?: (event: RevoGridCustomEvent<AfterEditEvent>) => void;
         /**
           * Triggered after focus render finished. Can be used to access a focus element through `event.target`
          */
@@ -1762,22 +1762,15 @@ declare namespace LocalJSX {
          */
         "dimensionRow"?: Observable<DimensionSettingsState>;
         /**
-          * Row drag ended
+          * Row drag ended started
          */
         "onRowdragendinit"?: (event: RevogrOrderEditorCustomEvent<any>) => void;
         /**
-          * Row dragged, new range ready to be applied
-         */
-        "onRowdragendinit"?: (event: RevogrOrderEditorCustomEvent<{
-    from: number;
-    to: number;
-  }>) => void;
-        /**
-          * Row mouse move
+          * Row mouse move started
          */
         "onRowdragmousemove"?: (event: RevogrOrderEditorCustomEvent<Cell>) => void;
         /**
-          * Row move
+          * Row move started
          */
         "onRowdragmoveinit"?: (event: RevogrOrderEditorCustomEvent<PositionItem>) => void;
         /**
@@ -1788,6 +1781,13 @@ declare namespace LocalJSX {
     text: string;
     pos: PositionItem;
     event: MouseEvent;
+  }>) => void;
+        /**
+          * Row dragged, new range ready to be applied
+         */
+        "onRowdropinit"?: (event: RevogrOrderEditorCustomEvent<{
+    from: number;
+    to: number;
   }>) => void;
         /**
           * Parent element

packages/react

@@ -17,11 +17,11 @@
 
 | Event              | Description                                | Type                                                                               |
 | ------------------ | ------------------------------------------ | ---------------------------------------------------------------------------------- |
-| `rowdragendinit`   | Row drag ended                             | `CustomEvent<any>`                                                                 |
-| `rowdragendinit`   | Row dragged, new range ready to be applied | `CustomEvent<{ from: number; to: number; }>`                                       |
-| `rowdragmousemove` | Row mouse move                             | `CustomEvent<Cell>`                                                                |
-| `rowdragmoveinit`  | Row move                                   | `CustomEvent<PositionItem>`                                                        |
+| `rowdragendinit`   | Row drag ended started                     | `CustomEvent<any>`                                                                 |
+| `rowdragmousemove` | Row mouse move started                     | `CustomEvent<Cell>`                                                                |
+| `rowdragmoveinit`  | Row move started                           | `CustomEvent<PositionItem>`                                                        |
 | `rowdragstartinit` | Row drag started                           | `CustomEvent<{ cell: Cell; text: string; pos: PositionItem; event: MouseEvent; }>` |
+| `rowdropinit`      | Row dragged, new range ready to be applied | `CustomEvent<{ from: number; to: number; }>`                                       |
 
 
 ## Methods

packages/svelte

@@ -44,18 +44,18 @@ export class OrderEditor {
     event: MouseEvent;
   }>;
 
-  /** Row drag ended */
-  @Event({ eventName: 'rowdragendinit', cancelable: true })
+  /** Row drag ended started */
+  @Event({ eventName: 'rowdragendinit' })
   rowDragEnd: EventEmitter;
 
-  /** Row move */
+  /** Row move started */
   @Event({ eventName: 'rowdragmoveinit', cancelable: true }) rowDrag: EventEmitter<PositionItem>;
 
-  /** Row mouse move */
+  /** Row mouse move started */
   @Event({ eventName: 'rowdragmousemove', cancelable: true })rowMouseMove: EventEmitter<Cell>;
 
   /** Row dragged, new range ready to be applied */
-  @Event({ eventName: 'rowdragendinit', cancelable: true }) rowDropped: EventEmitter<{
+  @Event({ eventName: 'rowdropinit', cancelable: true }) rowDropped: EventEmitter<{
     from: number;
     to: number;
   }>;

packages/vue2

@@ -106,7 +106,7 @@ Type: `Promise<CustomEvent<{ trimmed: Record<number, boolean>; trimmedType: stri
 
 ### `clearFocus() => Promise<void>`
 
-Clear current grid focus
+Clear current grid focus. Grid has no longer focus on it.
 
 #### Returns
 

packages/vue3

@@ -82,6 +82,7 @@ import {
   Cell,
   ChangedRange,
   RangeArea,
+  AfterEditEvent,
 } from '../../types/selection';
 import { Theme } from '../../types/theme';
 import {
@@ -296,9 +297,7 @@ export class RevoGridComponent {
   /**
    * Triggered after data applied or range changed.
    */
-  @Event() afteredit: EventEmitter<
-    BeforeSaveDataDetails | BeforeRangeSaveDataDetails
-  >;
+  @Event() afteredit: EventEmitter<AfterEditEvent>;
 
   /**
    * This event is triggered before autofill is applied.
@@ -727,7 +726,7 @@ export class RevoGridComponent {
   }
 
   /**
-   * Clear current grid focus
+   * Clear current grid focus. Grid has no longer focus on it.
    */
   @Method() async clearFocus() {
     const focused = this.viewport?.getFocused();
@@ -888,7 +887,7 @@ export class RevoGridComponent {
     }
   }
 
-  @Listen('rowdragendinit') onRowDropped(
+  @Listen('rowdropinit') onRowDropped(
     e: CustomEvent<{ from: number; to: number }>,
   ) {
     // e.cancelBubble = true;

src/components.d.ts

@@ -1,6 +1,7 @@
 @import './revo-grid.mixin.scss';
 
-revo-grid[theme='default'] {
+revo-grid[theme='default'],
+revo-grid:not([theme]) {
   $header-size: 30px;
   $header-bg: #f8f9fa;
   $header-color: #000;

src/components/order/readme.md

@@ -90,6 +90,9 @@ export type BeforeRangeSaveDataDetails = {
   };
   type: DimensionRows;
 };
+
+export type AfterEditEvent = BeforeRangeSaveDataDetails | BeforeSaveDataDetails;
+
 export interface EditCellStore extends Cell {
   val?: SaveData;
 }

src/components/order/revogr-order-editor.tsx

@@ -10,7 +10,9 @@ const componentCorePackage = '@revolist/revogrid';
 const parent = './packages';
 const entry = 'revogrid.ts';
 const directivesProxyFile = (name: string, filepath = entry) =>
-  `${parent}/${name}/src/${filepath}`;
+  `${parent}/${name}/lib/${filepath}`;
+
+const angularPath = (name: string, filepath = entry) => `${parent}/angular/projects/${name}/src/lib/${filepath}`;
 
 export const config: Config = {
   // https://github.com/ionic-team/stencil/blob/master/src/declarations/stencil-public-compiler.ts
@@ -68,7 +70,9 @@ export const config: Config = {
     // #region Angular
     angularOutputTarget({
       componentCorePackage,
-      directivesProxyFile: directivesProxyFile('angular', `proxies/${entry}`),
+      outputType: 'component',
+      directivesProxyFile: angularPath('angular-datagrid', `components.ts`),
+      directivesArrayFile: angularPath('angular-datagrid', entry),
       valueAccessorConfigs: [],
     }),
     // #endregion