chore(demos): sort some imports and improve typing

ghiscoding · ghiscoding · commit b73e0be0210d · 2026-05-09T15:41:40.000-04:00
diff --git a/demos/aurelia/src/examples/slickgrid/example20.ts b/demos/aurelia/src/examples/slickgrid/example20.ts
@@ -10,8 +10,8 @@ import {
   type GridOption,
   type SlickGrid,
 } from 'aurelia-slickgrid';
-import './example20.scss'; // provide custom CSS/SASS styling
 import { showToast } from './utilities.js';
+import './example20.scss'; // provide custom CSS/SASS styling
 
 export class Example20 {
   aureliaGrid!: AureliaGridInstance;
diff --git a/demos/aurelia/src/examples/slickgrid/example26.ts b/demos/aurelia/src/examples/slickgrid/example26.ts
@@ -18,8 +18,8 @@ import { CustomAureliaViewModelFilter } from './custom-aureliaViewModelFilter.js
 import { CustomTitleFormatter } from './custom-title-formatter.js';
 import { EditorSelect } from './editor-select.js';
 import { FilterSelect } from './filter-select.js';
-import './example26.scss';
 import { showToast } from './utilities.js';
+import './example26.scss';
 
 const NB_ITEMS = 100;
 
diff --git a/demos/aurelia/src/examples/slickgrid/example30.ts b/demos/aurelia/src/examples/slickgrid/example30.ts
@@ -25,9 +25,9 @@ import {
   type SliderOption,
   type VanillaCalendarOption,
 } from 'aurelia-slickgrid';
+import { showToast } from './utilities.js';
 import './example30.scss'; // provide custom CSS/SASS styling
 import COUNTRIES_COLLECTION_URL from './data/countries.json?url';
-import { showToast } from './utilities.js';
 
 const NB_ITEMS = 500;
 
diff --git a/demos/react-fluent/src/examples/slickgrid/Example04-detail-view.tsx b/demos/react-fluent/src/examples/slickgrid/Example04-detail-view.tsx
@@ -1,8 +1,8 @@
+import { Button } from '@fluentui/react-components';
 import { format } from '@formkit/tempo';
 import React, { useState } from 'react';
 import type { RowDetailViewProps } from 'slickgrid-react';
 import './example04-detail-view.scss';
-import { Button } from '@fluentui/react-components';
 
 interface Item {
   assignee: string;
diff --git a/demos/react-fluent/src/examples/slickgrid/Example07.tsx b/demos/react-fluent/src/examples/slickgrid/Example07.tsx
@@ -1,4 +1,5 @@
 import { faker } from '@faker-js/faker';
+import { Button } from '@fluentui/react-components';
 import { sparkline } from '@fnando/sparkline';
 import React, { useEffect, useRef, useState } from 'react';
 import {
@@ -14,9 +15,8 @@ import {
   type GridOption,
   type SlickgridReactInstance,
 } from 'slickgrid-react';
-import './example07.scss';
-import { Button } from '@fluentui/react-components';
 import { baseFluentGridOption } from './base-fluent-grid-options.js';
+import './example07.scss';
 
 const NB_ROWS = 200;
 
diff --git a/demos/react-fluent/src/examples/slickgrid/Example08.tsx b/demos/react-fluent/src/examples/slickgrid/Example08.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@fluentui/react-components';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import React, { useEffect, useRef, useState } from 'react';
 import {
@@ -17,9 +18,8 @@ import {
   type SlickgridReactInstance,
   type SlickGroupTotals,
 } from 'slickgrid-react';
-import './example08.scss';
-import { Button } from '@fluentui/react-components';
 import { baseFluentGridOption } from './base-fluent-grid-options.js';
+import './example08.scss';
 
 interface GroceryItem {
   id: number;
diff --git a/demos/react-fluent/src/examples/slickgrid/Example09.tsx b/demos/react-fluent/src/examples/slickgrid/Example09.tsx
@@ -1,4 +1,6 @@
+import { Button } from '@fluentui/react-components';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
+import { TextExportService } from '@slickgrid-universal/text-export';
 import React, { useEffect, useRef, useState } from 'react';
 import {
   Filters,
@@ -9,12 +11,9 @@ import {
   type GridOption,
   type SlickgridReactInstance,
 } from 'slickgrid-react';
-import './example09.scss'; // provide custom CSS/SASS styling
-
-import { Button } from '@fluentui/react-components';
-import { TextExportService } from '@slickgrid-universal/text-export';
 import { baseFluentGridOption } from './base-fluent-grid-options.js';
 import { showToast } from './utilities.js';
+import './example09.scss'; // provide custom CSS/SASS styling
 
 interface Chapter {
   id: string;
diff --git a/demos/react/src/examples/slickgrid/Example38.tsx b/demos/react/src/examples/slickgrid/Example38.tsx
@@ -13,8 +13,8 @@ import {
   type OnRowCountChangedEventArgs,
   type SlickgridReactInstance,
 } from 'slickgrid-react';
-import Data from './data/customers_100.json';
 import './example38.scss';
+import Data from './data/customers_100.json';
 
 const CARET_HTML_ESCAPED = '%5E';
 const PERCENT_HTML_ESCAPED = '%25';
diff --git a/demos/react/src/examples/slickgrid/Example39.tsx b/demos/react/src/examples/slickgrid/Example39.tsx
@@ -13,8 +13,8 @@ import {
   type OnRowCountChangedEventArgs,
   type SlickgridReactInstance,
 } from 'slickgrid-react';
-import SAMPLE_COLLECTION_DATA_URL from './data/customers_100.json?url';
 import './example39.scss';
+import SAMPLE_COLLECTION_DATA_URL from './data/customers_100.json?url';
 
 interface Status {
   text: string;
diff --git a/demos/react/src/examples/slickgrid/Example40.tsx b/demos/react/src/examples/slickgrid/Example40.tsx
@@ -15,8 +15,8 @@ import {
   type OnRowCountChangedEventArgs,
   type SlickgridReactInstance,
 } from 'slickgrid-react';
-import './example39.scss';
 import { randomNumber } from './utilities.js';
+import './example39.scss';
 
 const FETCH_SIZE = 50;
 
diff --git a/demos/react/src/examples/slickgrid/Example42-Custom-Pager.tsx b/demos/react/src/examples/slickgrid/Example42-Custom-Pager.tsx
@@ -1,5 +1,5 @@
 import type { PaginationMetadata, PaginationService, PubSubService, SlickGrid, Subscription } from '@slickgrid-universal/common';
-import React, { useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { useEffect, useImperativeHandle, useRef, useState } from 'react';
 import './Example42-Custom-Pager.scss';
 
 export interface CustomPagerComponentRef {
diff --git a/demos/react/src/examples/slickgrid/Example46.tsx b/demos/react/src/examples/slickgrid/Example46.tsx
@@ -1,4 +1,5 @@
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
+import { TextExportService } from '@slickgrid-universal/text-export';
 import React, { useEffect, useRef, useState } from 'react';
 import {
   Filters,
@@ -9,9 +10,8 @@ import {
   type GridOption,
   type SlickgridReactInstance,
 } from 'slickgrid-react';
-import './example46.scss'; // provide custom CSS/SASS styling
-import { TextExportService } from '@slickgrid-universal/text-export';
 import { showToast } from './utilities.js';
+import './example46.scss'; // provide custom CSS/SASS styling
 
 interface Chapter {
   id: string;
diff --git a/demos/react/src/examples/slickgrid/Example47-detail-view.tsx b/demos/react/src/examples/slickgrid/Example47-detail-view.tsx
@@ -1,8 +1,8 @@
 import { format } from '@formkit/tempo';
 import React, { useState } from 'react';
 import type { RowDetailViewProps } from 'slickgrid-react';
-import './example47-detail-view.scss';
 import { showToast } from './utilities.js';
+import './example47-detail-view.scss';
 
 interface Item {
   id: number;
diff --git a/demos/vanilla/src/examples/example02.ts b/demos/vanilla/src/examples/example02.ts
@@ -18,9 +18,9 @@ import { PdfExportService } from '@slickgrid-universal/pdf-export';
 import { TextExportService } from '@slickgrid-universal/text-export';
 import { Slicker, type SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
 import { ExampleGridOptions } from './example-grid-options.js';
+import { showToast } from './utilities.js';
 import '../material-styles.scss';
 import './example02.scss';
-import { showToast } from './utilities.js';
 
 const NB_ITEMS = 5000;
 
@@ -402,7 +402,7 @@ export default class Example02 {
     this.sgb?.slickGrid?.invalidate(); // invalidate all rows and re-render
   }
 
-  groupByDurationOrderByCount(aggregateCollapsed) {
+  groupByDurationOrderByCount(aggregateCollapsed: boolean) {
     this.sgb?.slickGrid?.setSortColumns([]);
     this.sgb?.dataView?.setGrouping({
       getter: 'duration',
diff --git a/demos/vanilla/src/examples/example06.ts b/demos/vanilla/src/examples/example06.ts
@@ -16,8 +16,8 @@ import {
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { TextExportService } from '@slickgrid-universal/text-export';
 import { Slicker, type SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
-import './example06.scss';
 import { ExampleGridOptions } from './example-grid-options.js';
+import './example06.scss';
 
 export default class Example06 {
   columns: Column[];
diff --git a/demos/vanilla/src/examples/example35.ts b/demos/vanilla/src/examples/example35.ts
@@ -2,9 +2,9 @@ import { Filters, Formatters, type Column, type GridOption } from '@slickgrid-un
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 import { TextExportService } from '@slickgrid-universal/text-export';
 import { Slicker, type SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
-import './example35.scss';
 import { ExampleGridOptions } from './example-grid-options.js';
 import { showToast } from './utilities.js';
+import './example35.scss';
 
 interface Chapter {
   id: string;
diff --git a/demos/vanilla/src/examples/example36.ts b/demos/vanilla/src/examples/example36.ts
@@ -15,8 +15,8 @@ import {
 import { SlickRowDetailView } from '@slickgrid-universal/row-detail-view-plugin';
 import { Slicker, type SlickVanillaGridBundle } from '@slickgrid-universal/vanilla-bundle';
 import { ExampleGridOptions } from './example-grid-options.js';
-import './example36.scss';
 import { showToast } from './utilities.js';
+import './example36.scss';
 
 const NB_ITEMS = 1200;
 
diff --git a/demos/vue/src/components/Example52.vue b/demos/vue/src/components/Example52.vue
@@ -1,25 +1,24 @@
 <script setup lang="ts">
 import { format as tempoFormat } from '@formkit/tempo';
 import { SqlService, type SqlResult, type SqlServiceApi } from '@slickgrid-universal/sql';
-import { Filters, Formatters, SlickgridVue, type Column, type GridOption } from 'slickgrid-vue';
+import { Filters, Formatters, SlickgridVue, type Column, type GridOption, type Metrics, type SlickgridVueInstance } from 'slickgrid-vue';
 import { onBeforeMount, ref, type Ref } from 'vue';
 
 const defaultPageSize = 20;
 const SQL_TABLE_NAME = 'users';
 const FAKE_SERVER_DELAY = 250;
 
 const gridOptions = ref<GridOption>();
-const columns: Ref<Column<ReportItem>[]> = ref([]);
+const columns: Ref<Column[]> = ref([]);
 const dataset = ref<any[]>([]);
 const metrics = ref<Metrics>({} as Metrics);
 const showSubTitle = ref(true);
 const sqlQuery = ref('');
 const processing = ref(false);
-const status = ref('processing...');
-const statusClass = ref('is-warning');
+const status = ref({ text: 'processing...', class: '' });
 const serverWaitDelay = ref(FAKE_SERVER_DELAY); // server simulation with default of 250ms but 50ms for Cypress tests
-let vueGrid!: SlickgridVueInstance;
 const sqlService = ref(new SqlService());
+let vueGrid!: SlickgridVueInstance;
 
 onBeforeMount(() => {
   defineGrid();
@@ -157,7 +156,7 @@ function defineGrid() {
         metrics.value = result.metrics as Metrics;
         dataset.value = result.data;
         // update pagination totalItems to reflect backend total count
-        if (gridOptions.value.pagination) {
+        if (gridOptions.value?.pagination) {
           gridOptions.value.pagination.totalItems = result.metrics?.totalItemCount ?? 0;
         }
         if (vueGrid) {
@@ -166,7 +165,7 @@ function defineGrid() {
         displaySpinner(false);
         updateSqlQuery();
       },
-    } satisfies SqlServiceApi<{
+    } as SqlServiceApi<{
       id: number;
       name: string;
       gender: string;
diff --git a/demos/vue/src/components/Example53.vue b/demos/vue/src/components/Example53.vue
@@ -1,20 +1,17 @@
 <script setup lang="ts">
 import {
   createDomElement,
-  Filters,
-  Formatters,
   getOffset,
   isDefined,
   SlickgridVue,
   type Column,
   type CurrentFilter,
   type GridOption,
-  type MultipleSelectOption,
   type OperatorType,
+  type SlickGrid,
   type SlickgridVueInstance,
-  type SliderRangeOption,
 } from 'slickgrid-vue';
-import { onBeforeMount, ref, type DefineComponent, type Ref } from 'vue';
+import { onBeforeMount, ref, type Ref } from 'vue';
 import './example53.scss';
 
 const NB_ITEMS = 2000;
