Merge pull request #1644 from ghiscoding/feat/switch-vanilla-calendar…

…-pro

feat: migrate back to Vanilla-Calendar-Pro

docs/column-functionalities/editors/date-editor-(vanilla-calendar).md

@@ -5,9 +5,7 @@
 - See the [Editors - Wiki](../Editors.md) for more general info about Editors (validators, event handlers, ...)
 
 ### Information
-The Date Editor is provided through an external library named [Vanilla-Calendar-Picker](https://github.com/ghiscoding/vanilla-calendar-picker) (a fork of [Vanilla-Calendar-Pro](https://vanilla-calendar.pro)) and all options from that library can be added to your `editorOptions` (see below), so in order to add things like minimum date, disabling dates, ... just review all the [Vanilla-Calendar-Pro](https://vanilla-calendar.pro/docs/reference/additionally/settings) and then add them into `editorOptions`. We use [Tempo](https://tempo.formkit.com/) to parse and format Dates to the chosen format (when `type`, `outputType` and/or `saveType` are provided in your column definition)
-
-We use an external lib named [Vanilla-Calendar](https://vanilla-calendar.pro/), however please note that since there were some features missing, I forked the project as [vanilla-calendar-picker](https://github.com/ghiscoding/vanilla-calendar-picker) with the hope that all features will eventually be merged to the original repo (if and what that happens, it will be entirely transparent to the user). 
+The Date Editor is provided through an external library named [Vanilla-Calendar-Pro](https://github.com/ghiscoding/vanilla-calendar-pro) and all options from that library can be added to your `editorOptions` (see below), so in order to add things like minimum date, disabling dates, ... just review all the [Vanilla-Calendar-Pro](https://vanilla-calendar.pro/docs/reference/additionally/settings) and then add them into `editorOptions`. We use [Tempo](https://tempo.formkit.com/) to parse and format Dates to the chosen format (when `type`, `outputType` and/or `saveType` are provided in your column definition)
 
 > **Note** Also just so you know, `editorOptions` is used by all other editors as well to expose external library like Autocompleter, Multiple-Select, etc...
 
@@ -76,7 +74,7 @@ initializeGrid() {
 ```
 
 ### Date Format
-Your column definitions may include a `type` to tell Formatters how to formate your date, this `type` is also used by the Editor when saving. 
+Your column definitions may include a `type` to tell Formatters how to formate your date, this `type` is also used by the Editor when saving.
 
 ##### What if I want to use a different format when saving?
 There are 3 types you can provide to inform the Editor on how to save:
@@ -87,6 +85,6 @@ There are 3 types you can provide to inform the Editor on how to save:
 
 The `type` and `outputType` are often used when you want to save something different compare to what you show to the user (for example, show a date in the US Format but save it as ISO or UTC).
 
-The difference between `outputType` and `saveOutputType` when you wish to display a certain format in the date editor input (while editing), but wish to save in a different format. You will rarely need the `saveOutputType` and for most use cases, the use of both `type` and `outputType` should be enough. 
+The difference between `outputType` and `saveOutputType` when you wish to display a certain format in the date editor input (while editing), but wish to save in a different format. You will rarely need the `saveOutputType` and for most use cases, the use of both `type` and `outputType` should be enough.
 
 > **Note** the type detection when saving is the inverse of the list above, whichever comes first from 3 to 1.

docs/migrations/migration-to-5.x.md

@@ -1,7 +1,7 @@
 ## Version 5 - Better UI and Dark Mode with Pure CSS SVG icons ✨
 This new release brings a lot of changes oriented towards better UI/UX, our SVG icons are now pure CSS and can be colorized like any other text via the native CSS `color` property (which helps a lot to improve the Dark Mode Theme).
 
-Another noticeable UI change is the migration from [Flatpickr](https://flatpickr.js.org/) to [Vanilla-Calendar-Picker](https://github.com/ghiscoding/vanilla-calendar-picker) (which is a fork of [Vanilla-Calendar-Pro](https://vanilla-calendar.pro/) and we'll hopefully drop the fork in the near future if possible), there are multiple reasons to migrate our date picker to another library as shown below. Another change that is mostly internal but is also indirectly connected to the date picker is the migration from MomentJS to [Tempo](https://tempo.formkit.com/) which is modern and is packaged as ESM which is great for Tree Shaking.
+Another noticeable UI change is the migration from [Flatpickr](https://flatpickr.js.org/) to [Vanilla-Calendar-Pro](https://vanilla-calendar.pro/), there are multiple reasons to migrate our date picker to another library as shown below. Another change that is mostly internal but is also indirectly connected to the date picker is the migration from MomentJS to [Tempo](https://tempo.formkit.com/) which is modern and is packaged as ESM which is great for Tree Shaking.
 
 ##### Flatpickr cons:
   - barely supported (lots of opened PR but nothing merged for the past 2 years)
@@ -206,8 +206,6 @@ prepareGrid() {
 }
 ```
 
-> **Note** the `'today'` shortcut currently only exist in `Vanilla-Calendar-Picker` fork (a PR has also been opened on the original lib), however the rest of the settings should be the same, visit `Vanilla-Calendar-Pro` [settings](https://vanilla-calendar.pro/docs/reference/additionally/settings) website for all other options. The hope is to hopefully drop the fork whenever the original project receives all missing features.
-
 > **Note** to keep docs available for older as well as newer versions, I renamed the old one doc as [Date-Picker (flatpickr)](https://ghiscoding.gitbook.io/slickgrid-universal/column-functionalities/editors/date-editor-flatpickr) and created a new one named [Date-Picker (vanilla-calendar)](https://ghiscoding.gitbook.io/slickgrid-universal/column-functionalities/editors/date-editor-vanilla-calendar).
 
 ### `internalColumnEditor` is completely removed

packages/common/package.json

@@ -78,7 +78,7 @@
     "multiple-select-vanilla": "^3.3.1",
     "sortablejs": "^1.15.2",
     "un-flatten-tree": "^2.0.12",
-    "vanilla-calendar-picker": "^2.11.9"
+    "vanilla-calendar-pro": "^2.9.10"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.20",

packages/common/src/commonEditorFilter/commonEditorFilterUtils.ts

@@ -1,7 +1,8 @@
 import { format } from '@formkit/tempo';
 import type { AutocompleteItem } from 'autocompleter';
 import { dequal } from 'dequal/lite';
-import type { IOptions, ISelected, VanillaCalendar } from 'vanilla-calendar-picker';
+import type VanillaCalendar from 'vanilla-calendar-pro';
+import type { IOptions, ISelected, FormatDateString } from 'vanilla-calendar-pro/types';
 
 import type { AutocompleterOption, Column, ColumnEditor, ColumnFilter } from '../interfaces/index';
 import { FieldType } from '../enums';
@@ -64,7 +65,7 @@ export function setPickerDates(
     }
 
     const newSettingSelected: ISelected = selectedSettings ?? {
-      dates: [pickerDates.map(p => format(p, isoFormat)).join(':')],
+      dates: [pickerDates.map(p => format(p, isoFormat)).join(':') as FormatDateString],
       month: pickerDates[0]?.getMonth(),
       year: pickerDates[0]?.getFullYear(),
       time: inputFormat === 'ISO8601' || (inputFormat || '').toLowerCase().includes('h') ? format(pickerDates[0], 'HH:mm') : undefined,

packages/common/src/editors/__tests__/dateEditor.spec.ts

@@ -1,5 +1,6 @@
 import { format } from '@formkit/tempo';
-import { type VanillaCalendar } from 'vanilla-calendar-picker';
+import type VanillaCalendar from 'vanilla-calendar-pro';
+import type { ISelected } from 'vanilla-calendar-pro/types';
 
 import { Editors } from '../index';
 import { DateEditor } from '../dateEditor';
@@ -240,7 +241,7 @@ describe('DateEditor', () => {
       expect(editor.pickerOptions.settings?.selected).toEqual({ dates: ['2001-02-04'], month: 2 });
 
       editor.changeEditorOption('range', { edgesOnly: true });
-      editor.changeEditorOption('selected', { dates: ['2020-03-10', 'today'] });
+      editor.changeEditorOption('selected', { dates: ['2020-03-10', 'today'] } as ISelected);
 
       expect(editor.pickerOptions.settings?.range).toEqual({ disablePast: true, edgesOnly: true });
       expect(editor.pickerOptions.settings?.selected).toEqual({ dates: ['2020-03-10', 'today'], month: 2 });

packages/common/src/editors/dateEditor.ts

@@ -1,7 +1,8 @@
+import { parse } from '@formkit/tempo';
 import { BindingEventService } from '@slickgrid-universal/binding';
 import { createDomElement, emptyElement, extend, setDeepValue } from '@slickgrid-universal/utils';
-import { parse } from '@formkit/tempo';
-import { VanillaCalendar, type IOptions } from 'vanilla-calendar-picker';
+import VanillaCalendar from 'vanilla-calendar-pro';
+import type { FormatDateString, IOptions } from 'vanilla-calendar-pro/types';
 
 import { Constants } from './../constants';
 import { FieldType } from '../enums/index';
@@ -23,7 +24,7 @@ import { setPickerDates } from '../commonEditorFilter';
 import { formatDateByFieldType, mapTempoDateFormatWithFieldType } from '../services/dateUtils';
 
 /*
- * An example of a date picker editor using Vanilla-Calendar-Picker
+ * An example of a date picker editor using Vanilla-Calendar-Pro
  */
 export class DateEditor implements Editor {
   protected _bindEventService: BindingEventService;
@@ -382,7 +383,7 @@ export class DateEditor implements Editor {
     const inputValue = value ?? this._originalDate ?? '';
     if (this.calendarInstance) {
       this._originalDate = inputValue;
-      this.calendarInstance.settings.selected.dates = [inputValue];
+      this.calendarInstance.settings.selected.dates = [inputValue as FormatDateString];
       if (!inputValue) {
         this.calendarInstance.settings.selected.dates = [];
         this._inputElm.value = '';

packages/common/src/editors/editors.index.ts

@@ -19,7 +19,7 @@ export const Editors: Record<string, EditorConstructor> = {
   /** Checkbox Editor (uses native checkbox DOM element) */
   checkbox: CheckboxEditor,
 
-  /** Date Picker Editor (which uses 3rd party lib "vanilla-calendar-picker") */
+  /** Date Picker Editor (which uses 3rd party lib "vanilla-calendar-pro") */
   date: DateEditor,
 
   /** Dual Input Editor, default input type is text but it could be (integer/float/number/password/text) */

packages/common/src/filters/__tests__/compoundDateFilter.spec.ts

@@ -1,6 +1,6 @@
 import 'jest-extended';
 import { format } from '@formkit/tempo';
-import type { VanillaCalendar } from 'vanilla-calendar-picker';
+import type VanillaCalendar from 'vanilla-calendar-pro';
 
 import { Filters } from '../filters.index';
 import { FieldType, OperatorType } from '../../enums/index';

packages/common/src/filters/__tests__/dateRangeFilter.spec.ts

@@ -1,5 +1,5 @@
 import 'jest-extended';
-import type { VanillaCalendar } from 'vanilla-calendar-picker';
+import type VanillaCalendar from 'vanilla-calendar-pro';
 
 import { FieldType } from '../../enums/index';
 import type { Column, FilterArguments, GridOption } from '../../interfaces/index';

packages/common/src/filters/dateFilter.ts

@@ -1,7 +1,8 @@
+import { format, parse } from '@formkit/tempo';
 import { BindingEventService } from '@slickgrid-universal/binding';
 import { createDomElement, emptyElement, extend, isDefined, } from '@slickgrid-universal/utils';
-import { format, parse } from '@formkit/tempo';
-import { VanillaCalendar, type IOptions } from 'vanilla-calendar-picker';
+import VanillaCalendar from 'vanilla-calendar-pro';
+import type { IOptions } from 'vanilla-calendar-pro/types';
 
 import {
   FieldType,

packages/common/src/interfaces/vanillaCalendarOption.interface.ts

@@ -1,6 +1,13 @@
-import type { IPartialSettings } from 'vanilla-calendar-picker';
+import type { IRange, ISelected, ISelection, ISettings, IVisibility } from 'vanilla-calendar-pro/types';
 
-export interface VanillaCalendarOption extends Partial<IPartialSettings> {
+export type IPartialSettings = Partial<Pick<ISettings, 'iso8601' | 'lang'> & {
+  range: Partial<IRange>;
+  selection: Partial<ISelection>;
+  selected: Partial<ISelected>;
+  visibility: Partial<IVisibility>;
+}>;
+
+export interface VanillaCalendarOption extends IPartialSettings {
   //-- extra options used by SlickGrid
 
   /** defaults to false, do we want to hide the clear date button? */

packages/common/src/styles/_variables.scss

@@ -1,5 +1,5 @@
 // import external lib CSS files (without the .css extension)
-@import 'vanilla-calendar-picker/build/vanilla-calendar.min';
+@import 'vanilla-calendar-pro/build/vanilla-calendar.min';
 
 // SASS utils to generate SVGs
 @import './svg-utilities';

test/cypress/e2e/example10.cy.ts

@@ -404,8 +404,10 @@ describe('Example 10 - GraphQL Grid', () => {
   });
 
   it('should open Date picker and expect date range between 01-Jan to 15-Feb', () => {
-    cy.get('.search-filter.filter-finish.filled')
-      .click();
+    cy.get('.search-filter.filter-finish.filled input')
+      .click({ force: true });
+
+    cy.get('.vanilla-calendar:visible');
 
     cy.get('.vanilla-calendar-column:nth(0) .vanilla-calendar-month')
       .should('have.text', 'January');

test/cypress/e2e/example11.cy.ts

@@ -562,8 +562,10 @@ describe('Example 11 - Batch Editing', () => {
         .invoke('val')
         .then(text => expect(text).to.eq(`${currentYear + 1}-01-01`));
 
-      cy.get('.search-filter.filter-finish.filled')
-        .click();
+      cy.get('.search-filter.filter-finish.filled input')
+        .click({ force: true });
+
+      cy.get('.vanilla-calendar:visible');
 
       cy.get('.vanilla-calendar-day__btn_selected')
         .should('have.length', 1);