chore: add a bit more SlickGrid tests and add some Prettier ignore

.prettierrc

@@ -1,7 +1,7 @@
 {
   "useTabs": false,
   "tabWidth": 2,
-  "printWidth": 130,
+  "printWidth": 140,
   "singleQuote": true,
   "trailingComma": "es5",
   "overrides": [
@@ -12,4 +12,4 @@
       }
     }
   ]
-}
+}

demos/vue/src/App.vue

@@ -51,13 +51,9 @@ provide('i18next', useTranslation().i18next);
           <a class="nav-link" href="https://ghiscoding.gitbook.io/slickgrid-vue/" target="_blank"> 📘 Documentation </a>
         </li>
         <li v-for="(route, index) in routes" :key="index" class="nav-item">
-          <RouterLink
-            v-if="route.name !== 'root' && route.name !== 'home'"
-            class="nav-link"
-            active-class="active"
-            :to="route.path"
-            >{{ route.name }}</RouterLink
-          >
+          <RouterLink v-if="route.name !== 'root' && route.name !== 'home'" class="nav-link" active-class="active" :to="route.path">{{
+            route.name
+          }}</RouterLink>
         </li>
       </ul>
     </section>

demos/vue/src/Home.vue

@@ -8,15 +8,15 @@
   <h4>Quick intro</h4>
   <p>
     One of the best JavaScript data grid
-    <a href="https://github.com/mleibman/SlickGrid" target="_blank">SlickGrid</a> which was originally developed by &#64;mleibman
-    is now available to Vue. I have tried, and used, a few data grids and SlickGrid beats most of them in terms of functionalities
-    and performance (it can even handle a million rows).
+    <a href="https://github.com/mleibman/SlickGrid" target="_blank">SlickGrid</a> which was originally developed by &#64;mleibman is now
+    available to Vue. I have tried, and used, a few data grids and SlickGrid beats most of them in terms of functionalities and performance
+    (it can even handle a million rows).
   </p>
   <h4>Documentation</h4>
   <p>
     The documentation is powered by GitBook and can be found at this link
-    <a href="https://ghiscoding.gitbook.io/slickgrid-vue" target="_blank">Slickgrid-Vue - Documentation</a>, so be sure to consult
-    it before opening any new issue.
+    <a href="https://ghiscoding.gitbook.io/slickgrid-vue" target="_blank">Slickgrid-Vue - Documentation</a>, so be sure to consult it before
+    opening any new issue.
     <br />
     The
     <a href="https://ghiscoding.gitbook.io/slickgrid-vue/getting-started/quick-start" target="_blank">HOWTO - Quick Start</a>

demos/vue/src/components/CustomPagerComponent.vue

@@ -11,9 +11,7 @@ let _subscriptions: Subscription[] = [];
 const elm = ref<HTMLDivElement>();
 const currentPagination = ref<PaginationMetadata>({} as PaginationMetadata);
 
-const isLeftPaginationDisabled = computed(
-  () => currentPagination.value.pageNumber === 1 || currentPagination.value.totalItems === 0
-);
+const isLeftPaginationDisabled = computed(() => currentPagination.value.pageNumber === 1 || currentPagination.value.totalItems === 0);
 const isRightPaginationDisabled = computed(
   () => currentPagination.value.pageNumber === currentPagination.value.pageCount || currentPagination.value.totalItems === 0
 );
@@ -129,19 +127,13 @@ defineExpose({
         </nav>
         <div class="page-number">
           <span class="text-page">Page</span>
-          <span class="page-number" aria-label="Page Number" data-test="page-number-label">{{
-            currentPagination?.pageNumber
-          }}</span>
+          <span class="page-number" aria-label="Page Number" data-test="page-number-label">{{ currentPagination?.pageNumber }}</span>
           of
           <span class="page-count" data-test="page-count">{{ currentPagination?.pageCount }}</span>
         </div>
         <nav aria-label="Page navigation">
           <ul class="custom-pagination-ul">
-            <li
-              class="li page-item seek-next"
-              :class="{ disabled: isRightPaginationDisabled }"
-              @click="onNextPageClicked($event)"
-            >
+            <li class="li page-item seek-next" :class="{ disabled: isRightPaginationDisabled }" @click="onNextPageClicked($event)">
               <a
                 class="pagination-link icon-seek-next mdi mdi-chevron-down mdi-22px mdi-rotate-270"
                 aria-label="Next Page"

demos/vue/src/components/Example01.vue

@@ -128,10 +128,7 @@ function toggleDarkModeGrid1() {
     Example 1: Basic Grids
     <span class="float-end font18">
       see&nbsp;
-      <a
-        target="_blank"
-        href="https://github.com/ghiscoding/slickgrid-universal/blob/master/demos/vue/src/components/Example01.vue"
-      >
+      <a target="_blank" href="https://github.com/ghiscoding/slickgrid-universal/blob/master/demos/vue/src/components/Example01.vue">
         <span class="mdi mdi-link-variant"></span> code
       </a>
     </span>

demos/vue/src/components/Example02.vue

@@ -251,12 +251,7 @@ function vueGridReady(grid: SlickgridVueInstance) {
         <span class="mdi mdi-link-variant"></span> code
       </a>
     </span>
-    <button
-      class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
-      type="button"
-      data-test="toggle-subtitle"
-      @click="toggleSubTitle()"
-    >
+    <button class="ms-2 btn btn-outline-secondary btn-sm btn-icon" type="button" data-test="toggle-subtitle" @click="toggleSubTitle()">
       <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
     </button>
   </h2>
@@ -273,9 +268,9 @@ function vueGridReady(grid: SlickgridVueInstance) {
         <li>The "Completed" column uses a the "onCellClick" event and a formatter to simulate a toggle action</li>
       </ul>
       <li>
-        Support Excel Copy Buffer (SlickGrid Copy Manager Plugin), you can use it by simply enabling "enableExcelCopyBuffer" flag.
-        Note that it will only evaluate Formatter when the "exportWithFormatter" flag is enabled (through "ExcelExportOptions" or
-        "TextExportOptions" or the column definition)
+        Support Excel Copy Buffer (SlickGrid Copy Manager Plugin), you can use it by simply enabling "enableExcelCopyBuffer" flag. Note that
+        it will only evaluate Formatter when the "exportWithFormatter" flag is enabled (through "ExcelExportOptions" or "TextExportOptions"
+        or the column definition)
       </li>
       <li>This example also has auto-resize enabled, and we also demo how you can pause the resizer if you wish to</li>
     </ul>

demos/vue/src/components/Example03.vue

@@ -637,12 +637,7 @@ function vueGridReady(grid: SlickgridVueInstance) {
 <template>
   <h2>
     Example 3: Editors / Delete
-    <button
-      class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
-      type="button"
-      data-test="toggle-subtitle"
-      @click="toggleSubTitle()"
-    >
+    <button class="ms-2 btn btn-outline-secondary btn-sm btn-icon" type="button" data-test="toggle-subtitle" @click="toggleSubTitle()">
       <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
     </button>
     <span class="float-end">
@@ -668,13 +663,13 @@ function vueGridReady(grid: SlickgridVueInstance) {
       </ul>
       <li>Inline Editors requires "enableCellNavigation: true" (not sure why though)</li>
       <li>
-        Support Excel Copy Buffer (SlickGrid Copy Manager Plugin), you can use it by simply enabling "enableExcelCopyBuffer" flag.
-        Note that it will only evaluate Formatter when the "exportWithFormatter" flag is enabled (through "ExcelExportOptions" or
-        "TextExportOptions" or the column definition)
+        Support Excel Copy Buffer (SlickGrid Copy Manager Plugin), you can use it by simply enabling "enableExcelCopyBuffer" flag. Note that
+        it will only evaluate Formatter when the "exportWithFormatter" flag is enabled (through "ExcelExportOptions" or "TextExportOptions"
+        or the column definition)
       </li>
       <li>
-        Support of "collectionAsync" is possible, click on "Clear Filters/Sorting" then add/delete item(s) and look at
-        "Prerequisites" Select Filter
+        Support of "collectionAsync" is possible, click on "Clear Filters/Sorting" then add/delete item(s) and look at "Prerequisites"
+        Select Filter
       </li>
     </ul>
   </div>
@@ -715,11 +710,7 @@ function vueGridReady(grid: SlickgridVueInstance) {
       </span>
       <div class="row" style="margin-top: 5px">
         <div class="col-sm-12">
-          <button
-            class="btn btn-outline-secondary btn-sm btn-icon"
-            data-test="clear-filters"
-            @click="vueGrid.filterService.clearFilters()"
-          >
+          <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="clear-filters" @click="vueGrid.filterService.clearFilters()">
             Clear Filters
           </button>
           <button
@@ -737,18 +728,12 @@ function vueGridReady(grid: SlickgridVueInstance) {
           >
             Add item
           </button>
-          <button class="btn btn-outline-danger btn-sm mx-1" data-test="delete-item-btn" @click="deleteItem()">
-            Delete item
-          </button>
+          <button class="btn btn-outline-danger btn-sm mx-1" data-test="delete-item-btn" @click="deleteItem()">Delete item</button>
         </div>
       </div>
       <div class="row" style="margin-top: 5px">
         <div class="col-sm-12">
-          <button
-            class="btn btn-outline-secondary btn-sm btn-icon"
-            data-test="add-title-column"
-            @click="dynamicallyAddTitleHeader()"
-          >
+          <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="add-title-column" @click="dynamicallyAddTitleHeader()">
             <i class="mdi mdi-shape-square-plus me-1"></i>
             Dynamically Duplicate Title Column
           </button>

demos/vue/src/components/Example04.vue

@@ -355,12 +355,7 @@ function vueGridReady(grid: SlickgridVueInstance) {
 <template>
   <h2>
     Example 4: Client Side Sort/Filter
-    <button
-      class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
-      type="button"
-      data-test="toggle-subtitle"
-      @click="toggleSubTitle()"
-    >
+    <button class="ms-2 btn btn-outline-secondary btn-sm btn-icon" type="button" data-test="toggle-subtitle" @click="toggleSubTitle()">
       <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
     </button>
     <span class="float-end">
@@ -387,22 +382,19 @@ function vueGridReady(grid: SlickgridVueInstance) {
       <ul>
         <li>Example: &gt;100 ... &gt;=2001-01-01 ... &gt;02/28/17</li>
         <li>
-          <b>Note:</b> For filters to work properly (default is string), make sure to provide a FieldType (type is against the
-          dataset, not the Formatter)
+          <b>Note:</b> For filters to work properly (default is string), make sure to provide a FieldType (type is against the dataset, not
+          the Formatter)
         </li>
       </ul>
       <li>Date Filters</li>
       <ul>
         <li>
-          FieldType of dateUtc/date (from dataset) can use an extra option of "filterSearchType" to let user filter more easily.
-          For example, in the "UTC Date" field below, you can type "&gt;02/28/2017", also when dealing with UTC you have to take
-          the time difference in consideration.
+          FieldType of dateUtc/date (from dataset) can use an extra option of "filterSearchType" to let user filter more easily. For
+          example, in the "UTC Date" field below, you can type "&gt;02/28/2017", also when dealing with UTC you have to take the time
+          difference in consideration.
         </li>
       </ul>
-      <li>
-        On String filters, (*) can be used as startsWith (Hello* => matches "Hello Word") ... endsWith (*Doe => matches: "John
-        Doe")
-      </li>
+      <li>On String filters, (*) can be used as startsWith (Hello* => matches "Hello Word") ... endsWith (*Doe => matches: "John Doe")</li>
       <li>
         Custom Filter are now possible, "Description" column below, is a customized InputFilter with different placeholder. See
         <a href="https://ghiscoding.gitbook.io/slickgrid-vue/column-functionalities/filters/custom-filter" target="_blank"
@@ -426,18 +418,10 @@ function vueGridReady(grid: SlickgridVueInstance) {
     </button>
   </div>
 
-  <button
-    class="btn btn-outline-secondary btn-sm btn-icon"
-    data-test="clear-filters"
-    @click="vueGrid.filterService.clearFilters()"
-  >
+  <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="clear-filters" @click="vueGrid.filterService.clearFilters()">
     Clear Filters
   </button>
-  <button
-    class="btn btn-outline-secondary btn-sm btn-icon mx-1"
-    data-test="clear-sorting"
-    @click="vueGrid.sortService.clearSorting()"
-  >
+  <button class="btn btn-outline-secondary btn-sm btn-icon mx-1" data-test="clear-sorting" @click="vueGrid.sortService.clearSorting()">
     Clear Sorting
   </button>
   <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="set-dynamic-filter" @click="setFiltersDynamically()">

demos/vue/src/components/Example05.vue

@@ -160,9 +160,7 @@ function displaySpinner(isProcessing: boolean, isError?: boolean) {
   if (isError) {
     status.value = { text: 'ERROR!!!', class: 'alert alert-danger' };
   } else {
-    status.value = isProcessing
-      ? { text: 'loading', class: 'alert alert-warning' }
-      : { text: 'finished', class: 'alert alert-success' };
+    status.value = isProcessing ? { text: 'loading', class: 'alert alert-warning' } : { text: 'finished', class: 'alert alert-success' };
   }
 }
 
@@ -517,26 +515,17 @@ function vueGridReady(grid: SlickgridVueInstance) {
         <span class="mdi mdi-link-variant"></span> code
       </a>
     </span>
-    <button
-      class="ms-2 btn btn-outline-secondary btn-sm btn-icon"
-      type="button"
-      data-test="toggle-subtitle"
-      @click="toggleSubTitle()"
-    >
+    <button class="ms-2 btn btn-outline-secondary btn-sm btn-icon" type="button" data-test="toggle-subtitle" @click="toggleSubTitle()">
       <span class="mdi mdi-information-outline" title="Toggle example sub-title details"></span>
     </button>
   </h2>
 
   <div class="subtitle">
     Use it when you need to support Pagination with a OData endpoint (for simple JSON, use a regular grid)<br />
-    Take a look at the (<a href="https://ghiscoding.gitbook.io/slickgrid-vue/backend-services/odata" target="_blank"
-      >Wiki documentation</a
-    >)
+    Take a look at the (<a href="https://ghiscoding.gitbook.io/slickgrid-vue/backend-services/odata" target="_blank">Wiki documentation</a>)
     <br />
     <ul class="small">
-      <li>
-        Only "Name" field is sortable for the demo (because we use JSON files), however "multiColumnSort: true" is also supported
-      </li>
+      <li>Only "Name" field is sortable for the demo (because we use JSON files), however "multiColumnSort: true" is also supported</li>
       <li>This example also demos the Grid State feature, open the console log to see the changes</li>
       <li>
         String column also support operator (&gt;, &gt;=, &lt;, &lt;=, &lt;&gt;, !=, =, ==, *)
@@ -549,15 +538,12 @@ function vueGridReady(grid: SlickgridVueInstance) {
       <li>OData Service could be replaced by other Service type in the future (GraphQL or whichever you provide)</li>
       <li>
         You can also preload a grid with certain "presets" like Filters / Sorters / Pagination
-        <a href="https://ghiscoding.gitbook.io/slickgrid-vue/grid-functionalities/grid-state-preset" target="_blank"
-          >Wiki - Grid Preset</a
-        >
+        <a href="https://ghiscoding.gitbook.io/slickgrid-vue/grid-functionalities/grid-state-preset" target="_blank">Wiki - Grid Preset</a>
       </li>
       <li>
-        <span class="text-danger">NOTE:</span> For demo purposes, the last column (filter & sort) will always throw an error and
-        its only purpose is to demo what would happen when you encounter a backend server error (the UI should rollback to
-        previous state before you did the action). Also changing Page Size to 50,000 will also throw which again is for demo
-        purposes.
+        <span class="text-danger">NOTE:</span> For demo purposes, the last column (filter & sort) will always throw an error and its only
+        purpose is to demo what would happen when you encounter a backend server error (the UI should rollback to previous state before you
+        did the action). Also changing Page Size to 50,000 will also throw which again is for demo purposes.
       </li>
     </ul>
   </div>
@@ -591,11 +577,7 @@ function vueGridReady(grid: SlickgridVueInstance) {
       <button class="btn btn-outline-secondary btn-sm btn-icon" data-test="set-dynamic-filter" @click="setFiltersDynamically()">
         Set Filters Dynamically
       </button>
-      <button
-        class="btn btn-outline-secondary btn-sm btn-icon mx-1"
-        data-test="set-dynamic-sorting"
-        @click="setSortingDynamically()"
-      >
+      <button class="btn btn-outline-secondary btn-sm btn-icon mx-1" data-test="set-dynamic-sorting" @click="setSortingDynamically()">
         Set Sorting Dynamically
       </button>
       <br />
@@ -625,33 +607,15 @@ function vueGridReady(grid: SlickgridVueInstance) {
         </label>
       </span>
       <label class="checkbox-inline control-label" htmlFor="enableCount" style="margin-left: 20px">
-        <input
-          id="enableCount"
-          type="checkbox"
-          data-test="enable-count"
-          :checked="isCountEnabled"
-          @click="changeCountEnableFlag()"
-        />
+        <input id="enableCount" type="checkbox" data-test="enable-count" :checked="isCountEnabled" @click="changeCountEnableFlag()" />
         <span style="font-weight: bold"> Enable Count</span> (add to OData query)
       </label>
       <label class="checkbox-inline control-label" htmlFor="enableSelect" style="margin-left: 20px">
-        <input
-          id="enableSelect"
-          type="checkbox"
-          data-test="enable-select"
-          :checked="isSelectEnabled"
-          @click="changeEnableSelectFlag()"
-        />
+        <input id="enableSelect" type="checkbox" data-test="enable-select" :checked="isSelectEnabled" @click="changeEnableSelectFlag()" />
         <span style="font-weight: bold"> Enable Select</span> (add to OData query)
       </label>
       <label class="checkbox-inline control-label" htmlFor="enableExpand" style="margin-left: 20px">
-        <input
-          id="enableExpand"
-          type="checkbox"
-          data-test="enable-expand"
-          :checked="isExpandEnabled"
-          @click="changeEnableExpandFlag()"
-        />
+        <input id="enableExpand" type="checkbox" data-test="enable-expand" :checked="isExpandEnabled" @click="changeEnableExpandFlag()" />
         <span style="font-weight: bold"> Enable Expand</span> (add to OData query)
       </label>
     </div>