slickgrid-vue 1.0.2 → 1.1.1

package/README.md

@@ -7,9 +7,6 @@
 [![npm bundle size](https://img.shields.io/bundlephobia/minzip/slickgrid-vue?color=success&label=gzip)](https://bundlephobia.com/result?p=slickgrid-vue)
 [![Actions Status](https://github.com/ghiscoding/slickgrid-universal/actions/workflows/vue-cypress.yml/badge.svg)](https://github.com/ghiscoding/slickgrid-universal/actions/workflows/vue-cypress.yml)
 
-> [!WARNING]
-> Please note that Slickgrid-Vue is still in active development and usage might change depending on feedback provided by external users like you. However, I don't expect much changes since all examples are working as expected. Give it a try and star ⭐ the project if you like it, thanks!
-
 ## Description 
 SlickGrid-Vue is a custom component created specifically for [VueJS](https://vuejs.org/) framework, it is a wrapper on top of Slickgrid-Universal library which contains the core functionalities. Slickgrid-Universal is written with TypeScript in browser native code, it is framework agnostic and is a monorepo that includes all Editors, Filters, Extensions and Services related to SlickGrid usage with also a few optional packages (like GraphQL, OData, Export to Excel, ...).
 
@@ -31,21 +28,23 @@ import { type Column, type GridOption, SlickgridVue } from 'slickgrid-vue';
 const columnDefinitions: Ref<Column[]> = ref([
   { id: 'firstName', name: 'First Name', field: 'firstName', sortable: true },
   { id: 'lastName', name: 'Last Name', field: 'lastName', sortable: true },
-  { id: 'age', name: 'Age', field: 'age', type: 'number', sortable: true }
+  { id: 'age', name: 'Age', field: 'age', type: 'number', sortable: true },
 ]);
 const dataset = ref([
   { id: 1, firstName: 'John', lastName: 'Doe', age: 20 },
-  { id: 2, firstName: 'Jane', lastName: 'Smith', age: 21 }
+  { id: 2, firstName: 'Jane', lastName: 'Smith', age: 21 },
 ]);
 const gridOptions = ref<GridOption>({ /*...*/ }); // optional grid options
 </script>
 
-<slickgrid-vue
+<template>
+  <slickgrid-vue
     grid-id="grid1"
     v-model:columns="columnDefinitions"
     v-model:data="dataset"
     v-model:options="gridOptions"    
-></slickgrid-vue>
+  ></slickgrid-vue>
+</template>
 ```
 
 #### Requirements 
@@ -53,11 +52,12 @@ const gridOptions = ref<GridOption>({ /*...*/ }); // optional grid options
   
 ### Stackblitz
 
-You can also play with the live Stackbliz [Slickgrid-Vite-Demos](https://github.com/ghiscoding/slickgrid-vue-demos). It is also the recommended way to provide a repro when opening a new bug/feature request.
+You can also play with the live Stackbliz [Slickgrid-Vue-Demos](https://github.com/ghiscoding/slickgrid-vue-demos). 
+Stackblitz is also the recommended way to provide a repro when opening a new bug or feature request.
 
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/ghiscoding/slickgrid-vue-demos)
 
-Visit the **[Docs - Quick Start](https://ghiscoding.gitbook.io/slickgrid-vue/getting-started/quick-start)** and/or clone the [Slickgrid-Vue-Demos](https://github.com/ghiscoding/slickgrid-vue-demos) repository for a local demo. Please make sure to read the documentation before opening any new issue and also consider asking installation and/or general questions on [Stack Overflow](https://stackoverflow.com/search?tab=newest&q=slickgrid) unless you think there's a bug with the library.
+Visit the **[Docs - Quick Start](https://ghiscoding.gitbook.io/slickgrid-vue/getting-started/quick-start)** and/or clone the [Slickgrid-Vue-Demos](https://github.com/ghiscoding/slickgrid-vue-demos) repository for a fully working local demo. Please make sure to read the documentation before opening any new issue and also consider asking installation and/or general questions on [Stack Overflow](https://stackoverflow.com/search?tab=newest&q=slickgrid) unless you think there's a bug with the library.
 
 ### Styling Themes
 
@@ -67,14 +67,14 @@ Multiple styling themes are available
 - Material (see [Slickgrid-Universal](https://ghiscoding.github.io/slickgrid-universal/#/example07))
 - Salesforce (see [Slickgrid-Universal](https://ghiscoding.github.io/slickgrid-universal/#/example16))
 
-Also note that all of these themes also have a **Dark Theme** equivalent and even though Bootstrap is often used for live demos, it does work well with any other UI framework like Bulma, Material, Quasar...
+Also note that all of these themes also include a **Dark Theme** equivalent and even though Bootstrap is often used in the live demos, it also works well with any other UI framework like Bulma, Material, Quasar...
 
 ### Live Demo page
-`Slickgrid-Vue` works with all Bootstrap versions, you can see a demo of each one below. It also works well with any other frameworks like Material, Bulma, Quasar... and there are also extra styling themes based on Material & Salesforce which are also available. You can also use different SVG icons, you may want to look at the [Docs - SVG Icons](https://ghiscoding.gitbook.io/slickgrid-vue/styling/svg-icons)
+`Slickgrid-Vue` works with Bootstrap or any other UI frameworks like Material, Bulma, Quasar... and there are also extra styling themes based on Material & Salesforce which are also available. You can also use different SVG icons, you may want to look at the [Docs - SVG Icons](https://ghiscoding.gitbook.io/slickgrid-vue/styling/svg-icons)
 - [Bootstrap 5 demo](https://ghiscoding.github.io/slickgrid-vue-demos) / [examples repo](https://github.com/ghiscoding/slickgrid-vue-demos)
 
 #### Working Demos
-For a complete set of working demos (40+ examples), we strongly suggest you to clone the [Slickgrid-Vue Demos](https://github.com/ghiscoding/slickgrid-vue-demos) repository (instructions are provided in it). The repo comes with multiple examples and are updated frequently (basically every time a new version is out) and it is also used as the GitHub live demo page.
+For a complete set of working demos (45+ examples), we strongly suggest you to clone the [Slickgrid-Vue Demos](https://github.com/ghiscoding/slickgrid-vue-demos) repository (instructions are provided in it). The repo comes with multiple examples and are updated frequently (basically every time a new version is out) and it is also used as the GitHub [live demo]([https://github.com/ghiscoding/slickgrid-vue-demos](https://ghiscoding.github.io/slickgrid-vue-demos/) page.
 
 ## License
 [MIT License](LICENSE)
@@ -83,9 +83,9 @@ For a complete set of working demos (40+ examples), we strongly suggest you to c
 Check out the [Releases](https://github.com/ghiscoding/slickgrid-universal/releases) section for all latest News & Releases.
 
 ### Tested with [Cypress](https://www.cypress.io/) (E2E Tests)
-Slickgrid-Universal has **100%** Unit Test Coverage and all Slickgrid-Vue Examples are tested with [Cypress](https://www.cypress.io/) for E2E testing and they run anytime a new PR is created.
+Slickgrid-Universal has **100%** Unit Test Coverage and all Slickgrid-Vue Examples are tested with [Cypress](https://www.cypress.io/) for E2E testing and they are running on every new PR.
 
 ### Like it? ⭐ it
-You like **Slickgrid-Vue**? Be sure to upvote ⭐, and perhaps support me with caffeine [☕](https://ko-fi.com/ghiscoding) or sponsor me on GitHub and feel free to contribute at any time. Thanks
+You like **Slickgrid-Vue**? Be sure to upvote ⭐ the project, and perhaps support me with caffeine [☕](https://ko-fi.com/ghiscoding) or sponsor me on GitHub. Any contributions are also very welcome. Thanks
 
-<a href='https://ko-fi.com/ghiscoding' target='_blank'><img height='32' style='border:0px;height:32px;' src='https://az743702.vo.msecnd.net/cdn/kofi3.png?v=0' border='0' alt='Buy Me a Coffee at ko-fi.com' />
+<a href='https://ko-fi.com/N4N679OT' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://storage.ko-fi.com/cdn/kofi3.png?v=6' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a>

package/dist/index.d.ts

@@ -28,8 +28,6 @@ import { GroupTotalFormatters } from '@slickgrid-universal/common';
 import { HeaderButtonOnCommandArgs } from '@slickgrid-universal/common';
 import { HeaderGroupingService } from '@slickgrid-universal/common';
 import { HeaderMenuCommandItemCallbackArgs } from '@slickgrid-universal/common';
-import { i18n } from 'i18next';
-import type * as i18next from 'i18next';
 import { MenuCommandItemCallbackArgs } from '@slickgrid-universal/common';
 import { MenuFromCellCallbackArgs } from '@slickgrid-universal/common';
 import { MenuOptionItemCallbackArgs } from '@slickgrid-universal/common';
@@ -87,7 +85,6 @@ import { SingleColumnSort } from '@slickgrid-universal/common';
 import { SlickControlList } from '@slickgrid-universal/common';
 import { SlickDataView } from '@slickgrid-universal/common';
 import { SlickEventData } from '@slickgrid-universal/common';
-import { SlickEventHandler } from '@slickgrid-universal/common';
 import { SlickGrid } from '@slickgrid-universal/common';
 import { SlickPluginList } from '@slickgrid-universal/common';
 import { SlickRange } from '@slickgrid-universal/common';
@@ -150,12 +147,15 @@ declare type __VLS_WithTemplateSlots<T, S> = T & {
 
 export { Aggregators }
 
+declare type Callback = (error: any, t: Function) => void;
+
 export { Column }
 
 declare interface CreatedView {
     id: string | number;
     dataContext: any;
     app: App | null;
+    rendered?: boolean;
     instance: ComponentPublicInstance | null;
 }
 
@@ -180,13 +180,40 @@ export declare interface GridOption<C extends Column = Column> extends GridOptio
     /** External Custom Pagination Component that can be provided by the user */
     customPaginationComponent?: DefineComponent<any, BasePaginationModel, any>;
     /** I18N translation service instance */
-    i18n?: i18next.i18n;
+    i18n?: I18Next;
     /** Row Detail View Plugin options & events (columnId, cssClass, toolTip, width) */
     rowDetailView?: RowDetailView;
 }
 
 export { GroupTotalFormatters }
 
+declare interface I18Next {
+    /**
+     * Is set to the current detected or set language.
+     * If you need the primary used language depending on your configuration (supportedLngs, load) you will prefer using i18next.languages[0].
+     */
+    language: string;
+    /**
+     * Changes the language. The callback will be called as soon translations were loaded or an error occurs while loading.
+     * HINT: For easy testing - setting lng to 'cimode' will set t function to always return the key.
+     */
+    changeLanguage(lng?: string, callback?: Callback): Promise<Function>;
+    /**
+     * Gets fired when changeLanguage got called.
+     */
+    on(event: 'languageChanged', callback: (lng: string) => void): void;
+    /**
+     * Event listener
+     */
+    on(event: string, listener: (...args: any[]) => void): void;
+    /**
+     * Remove event listener
+     * removes all callback when callback not specified
+     */
+    off(event: string, listener?: (...args: any[]) => void): void;
+    t(key: string, options?: any): string;
+}
+
 export declare interface RowDetailView extends RowDetailView_2 {
     /**
      * Optionally pass your Parent Component reference to your Child Component (row detail component).
@@ -663,6 +690,7 @@ export declare class SlickRowDetailView extends SlickRowDetailView_2 {
     private readonly eventPubSubService;
     protected _component?: any;
     protected _preloadComponent?: any;
+    protected _preloadApp?: App<Element>;
     protected _views: CreatedView[];
     protected _subscriptions: EventSubscription[];
     protected _userProcessFn?: (item: any) => Promise<any>;
@@ -670,14 +698,13 @@ export declare class SlickRowDetailView extends SlickRowDetailView_2 {
     constructor(eventPubSubService: EventPubSubService);
     get addonOptions(): RowDetailViewOption;
     protected get datasetIdPropName(): string;
-    get eventHandler(): SlickEventHandler;
-    set eventHandler(eventHandler: SlickEventHandler);
     get gridOptions(): GridOption;
     get rowDetailViewOptions(): RowDetailView | undefined;
     /** Dispose of the RowDetailView Extension */
     dispose(): void;
     /** Dispose of all the opened Row Detail Panels Components */
     disposeAllViewComponents(): void;
+    disposeViewByItem(item: any, removeFromArray?: boolean): void;
     /** Get the instance of the SlickGrid addon (control or plugin). */
     getAddonInstance(): SlickRowDetailView | null;
     init(grid: SlickGrid): void;
@@ -687,16 +714,22 @@ export declare class SlickRowDetailView extends SlickRowDetailView_2 {
      */
     register(rowSelectionPlugin?: SlickRowSelectionModel): this;
     /** Redraw (re-render) all the expanded row detail View Components */
-    redrawAllViewComponents(): Promise<void>;
+    redrawAllViewComponents(forceRedraw?: boolean): void;
     /** Render all the expanded row detail View Components */
-    renderAllViewModels(): Promise<void>;
+    renderAllViewModels(): void;
     /** Redraw the necessary View Component */
-    redrawViewComponent(view: CreatedView): Promise<void>;
+    redrawViewComponent(view: CreatedView): void;
     /** Render (or re-render) the View Component (Row Detail) */
-    renderPreloadView(item: any): Promise<void>;
+    renderPreloadView(item: any): void;
     /** Render (or re-render) the View Component (Row Detail) */
-    renderViewModel(item: any): Promise<void>;
-    protected addViewInfoToViewsRef(item: any, app: App | null, instance: ComponentPublicInstance | null): void;
+    renderViewModel(item: any): void;
+    /** remove any previous mounted views, if found then unmount them and delete them from our references array */
+    protected unmountViewWhenExists(itemId: string | number): void;
+    protected upsertViewRefs(item: any, options: {
+        app: App | null;
+        instance: ComponentPublicInstance | null;
+        rendered: boolean;
+    }): void;
     protected disposeViewComponent(expandedView: CreatedView): CreatedView | void;
     /**
      * Just before the row get expanded or collapsed we will do the following
@@ -716,7 +749,7 @@ export declare class SlickRowDetailView extends SlickRowDetailView_2 {
         expandedRows: (string | number)[];
         rowIdsOutOfViewport: (string | number)[];
         grid: SlickGrid;
-    }): Promise<void>;
+    }): void;
     /**
      * notify the onAsyncResponse with the "args.item" (required property)
      * the plugin will then use item to populate the row detail panel with the "postTemplate"
@@ -737,9 +770,9 @@ export { SortComparers }
  * it must implement Slickgrid-Universal TranslaterService interface to work properly
  */
 export declare class TranslaterI18NextService implements TranslaterService {
-    i18n?: i18n;
+    i18n?: I18Next;
     /** I18Next instance setter */
-    set i18nInstance(i18n: i18n);
+    set i18nInstance(i18n: I18Next);
     /**
      * Method to return the current language used by the App
      * @return {string} current language