feat(common)!: migrate from Flatpickr to Vanilla-Calendar (#1193)

* feat(common)!: migrate from Flatpickr to Vanilla-Calendar

* chore: upgrade Slickgrid-Universal to v5

eslint.config.mjs

@@ -39,8 +39,6 @@ export default tseslint.config(
     languageOptions: {
       globals: {
         // ...globals,
-        flatpickr: true,
-        Slick: true,
         Sortable: true,
       },
       parser: tsParser,

packages/aurelia-slickgrid/package.json

@@ -52,13 +52,13 @@
     "@aurelia/i18n": "^2.0.0-beta.15",
     "@aurelia/runtime": "^2.0.0-beta.15",
     "@aurelia/runtime-html": "^2.0.0-beta.15",
-    "@slickgrid-universal/common": "~4.7.0",
-    "@slickgrid-universal/custom-footer-component": "~4.7.0",
-    "@slickgrid-universal/empty-warning-component": "~4.7.0",
-    "@slickgrid-universal/event-pub-sub": "~4.7.0",
-    "@slickgrid-universal/pagination-component": "~4.7.0",
-    "@slickgrid-universal/row-detail-view-plugin": "~4.7.0",
-    "@slickgrid-universal/utils": "~4.7.0",
+    "@slickgrid-universal/common": "~5.0.0-beta.1",
+    "@slickgrid-universal/custom-footer-component": "~5.0.0-beta.1",
+    "@slickgrid-universal/empty-warning-component": "~5.0.0-beta.1",
+    "@slickgrid-universal/event-pub-sub": "~5.0.0-beta.1",
+    "@slickgrid-universal/pagination-component": "~5.0.0-beta.1",
+    "@slickgrid-universal/row-detail-view-plugin": "~5.0.0-beta.1",
+    "@slickgrid-universal/utils": "~5.0.0-beta.1",
     "dequal": "^2.0.3",
     "isomorphic-dompurify": "^2.8.0",
     "moment-mini": "^2.29.4",

packages/demo/package.json

@@ -42,19 +42,18 @@
     "@faker-js/faker": "^8.4.1",
     "@fnando/sparkline": "^0.3.10",
     "@popperjs/core": "^2.11.8",
-    "@slickgrid-universal/common": "^4.7.0",
-    "@slickgrid-universal/composite-editor-component": "^4.7.0",
-    "@slickgrid-universal/custom-tooltip-plugin": "^4.7.0",
-    "@slickgrid-universal/excel-export": "^4.7.0",
-    "@slickgrid-universal/graphql": "^4.7.0",
-    "@slickgrid-universal/odata": "^4.7.0",
-    "@slickgrid-universal/row-detail-view-plugin": "^4.7.0",
-    "@slickgrid-universal/rxjs-observable": "^4.7.0",
-    "@slickgrid-universal/text-export": "^4.7.0",
+    "@slickgrid-universal/common": "~5.0.0-beta.1",
+    "@slickgrid-universal/composite-editor-component": "~5.0.0-beta.1",
+    "@slickgrid-universal/custom-tooltip-plugin": "~5.0.0-beta.1",
+    "@slickgrid-universal/excel-export": "~5.0.0-beta.1",
+    "@slickgrid-universal/graphql": "~5.0.0-beta.1",
+    "@slickgrid-universal/odata": "~5.0.0-beta.1",
+    "@slickgrid-universal/row-detail-view-plugin": "~5.0.0-beta.1",
+    "@slickgrid-universal/rxjs-observable": "~5.0.0-beta.1",
+    "@slickgrid-universal/text-export": "~5.0.0-beta.1",
     "aurelia": "^2.0.0-beta.15",
     "aurelia-slickgrid": "workspace:*",
     "bootstrap": "^5.3.3",
-    "flatpickr": "^4.6.13",
     "i18next": "^23.11.2",
     "isomorphic-dompurify": "^2.8.0",
     "i18next-fetch-backend": "^5.0.2",

packages/demo/src/examples/slickgrid/example23.ts

@@ -49,12 +49,6 @@ export class Example23 {
         <li>For a numeric range defined in an input filter (must be of type text), you can use 2 dots (..) to represent a range</li>
         <li>example: typing "10..90" will filter values between 10 and 90 (but excluding the number 10 and 90)</li>
       </ul>
-      <ul>
-        <li>note that the examples shown below for the operator, are case sensitive</li>
-        <li>by default the range are not inclusive which would be the same as defining the filter options to "operator: 'RangeExclusive'" or "operator: OperatoryType.rangeExclusive"</li>
-        <li>you can also set the inverse (inclusive) by defining the filter options to "operator: 'RangeInclusive'" or "operator: OperatoryType.rangeIncluside"</li>
-      </ul>
-      <li>Date Range with Flatpickr Date Picker, they will also use the locale, choose a start date then drag or click on the end date</li>
     </ul>
   `;
 

packages/demo/src/examples/slickgrid/example3.ts

@@ -12,13 +12,13 @@ import {
   type EditorValidator,
   FieldType,
   Filters,
-  type FlatpickrOption,
   Formatters,
   type GridOption,
   type OnEventArgs,
   OperatorType,
   SlickGlobalEditorLock,
   SortComparers,
+  type VanillaCalendarOption,
 } from 'aurelia-slickgrid';
 import { CustomInputEditor } from './custom-inputEditor';
 import { CustomInputFilter } from './custom-inputFilter';
@@ -253,9 +253,9 @@ export class Example3 {
         saveOutputType: FieldType.dateUtc, // save output date format
         editor: {
           model: Editors.date,
-          // override any of the Flatpickr options through "filterOptions"
+          // override any of the calendar options through "filterOptions"
           // please note that there's no TSlint on this property since it's generic for any filter, so make sure you entered the correct filter option(s)
-          editorOptions: { minDate: 'today' } as FlatpickrOption
+          editorOptions: { range: { min: 'today' } } as VanillaCalendarOption
         },
       }, {
         id: 'cityOfOrigin', name: 'City of Origin', field: 'cityOfOrigin',

packages/demo/src/examples/slickgrid/example30.ts

@@ -13,7 +13,6 @@ import {
   Editors,
   FieldType,
   Filters,
-  type FlatpickrOption,
   formatNumber,
   type Formatter,
   Formatters,
@@ -24,6 +23,7 @@ import {
   SlickGlobalEditorLock,
   type SlickGrid,
   SortComparers,
+  type VanillaCalendarOption,
 } from 'aurelia-slickgrid';
 import './example30.scss'; // provide custom CSS/SASS styling
 
@@ -243,16 +243,17 @@ export class Example30 {
         editor: {
           model: Editors.date,
           editorOptions: {
-            minDate: 'today',
+            range: { min: 'today' },
 
             // if we want to preload the date picker with a different date,
-            // we could toggle the `closeOnSelect: false`, set the date in the picker and re-toggle `closeOnSelect: true`
-            // closeOnSelect: false,
-            // onOpen: (selectedDates: Date[] | Date, dateStr: string, instance: FlatpickrInstance) => {
-            //   instance.setDate('2021-06-04', true);
-            //   instance.set('closeOnSelect', true);
-            // },
-          } as FlatpickrOption,
+            // we could do it by assigning settings.seleted.dates
+            // NOTE: vanilla-calendar doesn't automatically focus the picker to the year/month and you need to do it yourself
+            // selected: {
+            //   dates: ['2021-06-04'],
+            //   month: 6 - 1, // Note: JS Date month (only) is zero index based, so June is 6-1 => 5
+            //   year: 2021
+            // }
+          } as VanillaCalendarOption,
           massUpdate: true,
           validator: (value, args) => {
             const dataContext = args?.item;

packages/demo/src/examples/slickgrid/example32.ts

@@ -18,6 +18,7 @@ import {
   type SlickGrid,
   SortComparers,
   SlickGlobalEditorLock,
+  type VanillaCalendarOption,
 } from 'aurelia-slickgrid';
 import './example32.scss'; // provide custom CSS/SASS styling
 
@@ -204,7 +205,7 @@ export class Example32 {
         exportCustomFormatter: Formatters.dateUs,
         editor: {
           model: Editors.date,
-          editorOptions: { minDate: 'today' },
+          editorOptions: { range: { min: 'today' } } as VanillaCalendarOption,
           validator: (value, args) => {
             const dataContext = args && args.item;
             if (dataContext && (dataContext.completed && !value)) {

packages/demo/src/examples/slickgrid/example33.ts

@@ -14,6 +14,7 @@ import {
   type MenuCommandItemCallbackArgs,
   OperatorType,
   type SlickGrid,
+  type VanillaCalendarOption,
 } from 'aurelia-slickgrid';
 import './example33.scss';
 
@@ -188,7 +189,10 @@ export class Example33 {
       },
       {
         id: 'finish', name: 'Finish', field: 'finish', sortable: true,
-        editor: { model: Editors.date, editorOptions: { minDate: 'today' }, },
+        editor: {
+          model: Editors.date,
+          editorOptions: { range: { min: 'today' } } as VanillaCalendarOption,
+        },
         // formatter: Formatters.dateIso,
         type: FieldType.date, outputType: FieldType.dateIso,
         formatter: Formatters.dateIso,

packages/demo/src/examples/slickgrid/example4.ts

@@ -7,13 +7,13 @@ import {
   type Column,
   FieldType,
   Filters,
-  type FlatpickrOption,
   Formatters,
   type GridOption,
   type GridStateChange,
   type Metrics,
   type MultipleSelectOption,
   OperatorType,
+  type VanillaCalendarOption,
 } from 'aurelia-slickgrid';
 
 function randomBetween(min: number, max: number) {
@@ -164,9 +164,9 @@ export class Example4 {
         filterable: true,
         filter: {
           model: Filters.compoundDate,
-          // override any of the Flatpickr options through "filterOptions"
+          // override any of the calendar options through "filterOptions"
           // please note that there's no TSlint on this property since it's generic for any filter, so make sure you entered the correct filter option(s)
-          filterOptions: { minDate: 'today' } as FlatpickrOption
+          filterOptions: { range: { min: 'today' } } as VanillaCalendarOption
         }
       },
       {

packages/demo/src/main.ts

@@ -51,8 +51,6 @@ Aurelia
     };
   }))
   .register(AureliaSlickGridConfiguration.customize(config => {
-    import('flatpickr/dist/l10n/fr');
-
     // change any of the default global options
     config.options.gridMenu!.iconCssClass = 'fa fa-bars';
   }))

packages/demo/src/my-app.ts

@@ -1,6 +1,5 @@
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'font-awesome/css/font-awesome.css';
-import 'flatpickr/dist/flatpickr.min.css';
 import './styles.scss';
 
 export class MyApp {