[ONL-8285] Updated vue ecosystem. (#1877)

* [ONL-8285] chore: Updated vue ecosystem.

* [ONL-8285] chore: Updated eslint.

* [ONL-8285] chore: Updated postcss modules.

* [ONL-8285] fix: Rollback vue 3.4 to 3.3.

* [ONL-8285] fix: Downgrade vue even more.

* [ONL-8285] chore: Fixed TS leftovers.

* 2.8.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.7.11",
+  "version": "2.8.0",
   "main": "src/main.ts",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",
@@ -38,81 +38,81 @@
     "git-tag": "git tag v$(npm view . version) && git push origin v$(npm view . version)"
   },
   "dependencies": {
-    "@vueuse/core": "10.2.1",
-    "@vueuse/integrations": "10.2.1",
+    "@vueuse/core": "10.9.0",
+    "@vueuse/integrations": "10.9.0",
     "flatpickr": "4.6.13",
     "floating-vue": "2.0.0-beta.16",
     "focus-trap": "6.9.4",
     "lodash": "4.17.21",
     "svg-country-flags": "1.2.10",
-    "tailwindcss": "3.3.5",
-    "type-fest": "4.10.2",
-    "vue": "3.3.4"
+    "tailwindcss": "3.4.1",
+    "type-fest": "4.11.1",
+    "vue": "3.3.6"
   },
   "devDependencies": {
     "@sinonjs/fake-timers": "11.2.2",
-    "@storybook/addon-a11y": "7.6.10",
-    "@storybook/addon-actions": "7.6.10",
+    "@storybook/addon-a11y": "7.6.17",
+    "@storybook/addon-actions": "7.6.17",
     "@storybook/addon-cssresources": "6.2.9",
-    "@storybook/addon-essentials": "7.6.10",
-    "@storybook/addon-links": "7.6.10",
+    "@storybook/addon-essentials": "7.6.17",
+    "@storybook/addon-links": "7.6.17",
     "@storybook/addon-styling": "1.3.7",
-    "@storybook/addon-viewport": "7.6.10",
-    "@storybook/addons": "7.6.10",
-    "@storybook/source-loader": "7.6.10",
-    "@storybook/theming": "7.6.10",
-    "@storybook/vue3": "7.6.10",
-    "@storybook/vue3-vite": "7.6.10",
+    "@storybook/addon-viewport": "7.6.17",
+    "@storybook/addons": "7.6.17",
+    "@storybook/source-loader": "7.6.17",
+    "@storybook/theming": "7.6.17",
+    "@storybook/vue3": "7.6.17",
+    "@storybook/vue3-vite": "7.6.17",
     "@types/color": "3.0.6",
     "@types/intl": "1.2.2",
-    "@types/node": "20.10.8",
+    "@types/node": "20.11.25",
     "@types/sinonjs__fake-timers": "8.1.5",
-    "@typescript-eslint/eslint-plugin": "6.19.0",
-    "@typescript-eslint/parser": "6.19.0",
-    "@vitejs/plugin-vue": "5.0.3",
+    "@typescript-eslint/eslint-plugin": "7.1.1",
+    "@typescript-eslint/parser": "7.1.1",
+    "@vitejs/plugin-vue": "5.0.4",
     "@vitejs/plugin-vue-jsx": "3.1.0",
-    "@vitest/coverage-v8": "1.1.3",
-    "@vue/eslint-config-airbnb-with-typescript": "7.0.0",
+    "@vitest/coverage-v8": "1.3.1",
+    "@vue/eslint-config-airbnb-with-typescript": "8.0.0",
     "@vue/eslint-config-typescript": "12.0.0",
-    "@vue/test-utils": "2.4.1",
+    "@vue/test-utils": "2.4.4",
     "@vue/tsconfig": "0.5.1",
-    "autoprefixer": "10.4.16",
+    "autoprefixer": "10.4.18",
     "color": "4.2.3",
     "cypress": "10.11.0",
     "cypress-image-snapshot": "4.0.1",
-    "eslint": "8.42.0",
+    "eslint": "8.57.0",
     "eslint-plugin-cypress": "2.15.1",
     "eslint-plugin-filenames": "1.3.2",
-    "eslint-plugin-simple-import-sort": "10.0.0",
-    "eslint-plugin-vitest": "0.3.20",
-    "eslint-plugin-vue": "9.19.2",
-    "eslint-plugin-vuejs-accessibility": "2.2.0",
+    "eslint-plugin-simple-import-sort": "12.0.0",
+    "eslint-plugin-vitest": "0.3.22",
+    "eslint-plugin-vue": "9.22.0",
+    "eslint-plugin-vuejs-accessibility": "2.2.1",
     "intl": "1.2.5",
-    "jsdom": "22.1.0",
-    "lint-staged": "14.0.1",
+    "jsdom": "24.0.0",
+    "lint-staged": "15.2.2",
     "live-server": "1.2.2",
-    "postcss": "8.4.32",
+    "postcss": "8.4.35",
     "postcss-html": "1.5.0",
     "postcss-import": "15.1.0",
     "postcss-mixins": "9.0.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "storybook": "7.6.10",
+    "storybook": "7.6.17",
     "storybook-vue3-router": "5.0.0",
     "stylelint": "15.11.0",
     "stylelint-config-recommended-vue": "1.5.0",
     "stylelint-config-standard": "34.0.0",
     "stylelint-config-standard-scss": "11.0.0",
-    "stylelint-stylistic": "0.4.3",
+    "stylelint-stylistic": "0.4.5",
     "svg-sprite-loader": "6.0.11",
     "svgo": "2.8.0",
     "svgo-loader": "3.0.3",
     "typescript": "5.3.3",
     "v8-to-istanbul": "9.2.0",
-    "vite": "5.0.12",
-    "vitest": "1.1.3",
-    "vue-component-type-helpers": "1.8.27",
-    "vue-router": "4.2.5",
+    "vite": "5.1.5",
+    "vitest": "1.3.1",
+    "vue-component-type-helpers": "2.0.6",
+    "vue-router": "4.3.0",
     "vue-tsc": "1.8.27",
     "wait-on": "6.0.1",
     "webpack": "5.89.0",

src/components/ec-checkbox/ec-checkbox.vue

@@ -6,16 +6,16 @@
     :data-test="$attrs['data-test'] ? `${$attrs['data-test']} ec-checkbox` : 'ec-checkbox'"
   >
     <input
-      v-bind="({
+      v-bind="{
         ...$attrs,
         style: undefined,
         class: 'ec-checkbox__input',
-        id: id,
+        id,
         'aria-describedby': errorId,
-        disabled: disabled,
+        disabled,
         'data-test': 'ec-checkbox__input',
         type: 'checkbox',
-      })"
+      }"
       ref="checkboxInput"
       v-model="inputModel"
       @focus="inputIsFocused = true"

src/components/ec-dropdown-search/ec-dropdown-search-keyboard-navigation.spec.ts

@@ -645,7 +645,7 @@ describe('EcDropdownSearch - Keyboard navigation', () => {
 type EcDropdownSearchExposed = ComponentExposed<typeof EcDropdownSearch>;
 
 function mountDropdownSearch<TValue = string, TDropdownSearchItem extends DropdownSearchItem<TValue> = DropdownSearchItem<TValue>>(props?: DropdownSearchProps<TValue, TDropdownSearchItem>, mountOpts?: ComponentMountingOptions<EcDropdownSearchExposed>) {
-  return mount<ComponentExposed<EcDropdownSearchExposed>>(EcDropdownSearch, {
+  return mount(EcDropdownSearch, {
     props,
     ...mountOpts,
   });

src/components/ec-dropdown-search/ec-dropdown-search.spec.ts

@@ -13,7 +13,7 @@ type EcDropdownSearchExposed = ComponentExposed<typeof EcDropdownSearch>;
 
 describe('EcDropdownSearch', () => {
   function mountDropdownSearch<TValue = string, TDropdownSearchItem extends DropdownSearchItem<TValue> = DropdownSearchItem<TValue>>(props?: DropdownSearchProps<TValue, TDropdownSearchItem>, mountOpts?: ComponentMountingOptions<EcDropdownSearchExposed>) {
-    return mount<EcDropdownSearchExposed>(EcDropdownSearch, {
+    return mount(EcDropdownSearch, {
       props,
       ...mountOpts,
     });

src/components/ec-dropdown-search/ec-dropdown-search.vue

@@ -17,13 +17,13 @@
     <ec-popover
       v-bind="{
         shown: isOpen,
-        disabled: disabled,
+        disabled,
         placement: PopoverPlacement.BOTTOM_START,
         autoSize: true,
         shift: false,
         distance: 8,
         popperClass: 'ec-dropdown-search__popover',
-        level: level,
+        level,
         ...popoverOptions,
       }"
       ref="popoverRef"

src/components/ec-dropdown/ec-dropdown.spec.ts

@@ -10,7 +10,7 @@ type EcDropdownExposed = ComponentExposed<typeof EcDropdown>;
 
 describe('EcDropdown', () => {
   function mountDropdown(props?: DropdownProps, mountOpts?: ComponentMountingOptions<EcDropdownExposed>) {
-    return mount<EcDropdownExposed>(EcDropdown, {
+    return mount(EcDropdown, {
       props,
       ...mountOpts,
     });

src/components/ec-modal/__snapshots__/ec-modal.spec.ts.snap

@@ -1,53 +1,47 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`EcModal > should disable the negative button when the "isDisabled" given prop is true 1`] = `
-DOMWrapper {
-  "isDisabled": [Function],
-  "wrapperElement": <button
-    class="ec-modal__negative-btn ec-btn ec-btn--md ec-btn--rounded ec-btn--secondary ec-btn--outline"
-    data-test="ec-modal__negative-btn ec-btn"
-    disabled=""
-    type="button"
+<button
+  class="ec-modal__negative-btn ec-btn ec-btn--md ec-btn--rounded ec-btn--secondary ec-btn--outline"
+  data-test="ec-modal__negative-btn ec-btn"
+  disabled=""
+  type="button"
+>
+  <!--v-if-->
+  <span
+    class="ec-btn__text"
+    data-test="ec-btn__text"
   >
-    <!--v-if-->
-    <span
-      class="ec-btn__text"
-      data-test="ec-btn__text"
-    >
-      
-      
-      negative Button
-      
-      
-    </span>
-    <!--v-if-->
-  </button>,
-}
+    
+    
+    negative Button
+    
+    
+  </span>
+  <!--v-if-->
+</button>
 `;
 
 exports[`EcModal > should disable the positive button when the "isDisabled" given prop is true 1`] = `
-DOMWrapper {
-  "isDisabled": [Function],
-  "wrapperElement": <button
-    class="ec-modal__positive-btn--right ec-modal__positive-btn ec-btn ec-btn--md ec-btn--rounded ec-btn--primary"
-    data-test="ec-modal__positive-btn ec-btn"
-    disabled=""
-    type="button"
+<button
+  class="ec-modal__positive-btn--right ec-modal__positive-btn ec-btn ec-btn--md ec-btn--rounded ec-btn--primary"
+  data-test="ec-modal__positive-btn ec-btn"
+  disabled=""
+  type="button"
+>
+  <!--v-if-->
+  <span
+    class="ec-btn__text"
+    data-test="ec-btn__text"
   >
-    <!--v-if-->
-    <span
-      class="ec-btn__text"
-      data-test="ec-btn__text"
-    >
-      
-      
-      Positive Button
-      
-      
-    </span>
-    <!--v-if-->
-  </button>,
-}
+    
+    
+    Positive Button
+    
+    
+  </span>
+  <!--v-if-->
+</button>
 `;
 
 exports[`EcModal > should have the ec-modal--lg class 1`] = `
@@ -531,51 +525,45 @@ exports[`EcModal > should render positive button with the loading status if slot
 `;
 
 exports[`EcModal > should render with an enabled negative button by default 1`] = `
-DOMWrapper {
-  "isDisabled": [Function],
-  "wrapperElement": <button
-    class="ec-modal__negative-btn ec-btn ec-btn--md ec-btn--rounded ec-btn--secondary ec-btn--outline"
-    data-test="ec-modal__negative-btn ec-btn"
-    type="button"
+<button
+  class="ec-modal__negative-btn ec-btn ec-btn--md ec-btn--rounded ec-btn--secondary ec-btn--outline"
+  data-test="ec-modal__negative-btn ec-btn"
+  type="button"
+>
+  <!--v-if-->
+  <span
+    class="ec-btn__text"
+    data-test="ec-btn__text"
   >
-    <!--v-if-->
-    <span
-      class="ec-btn__text"
-      data-test="ec-btn__text"
-    >
-      
-      
-      Negative Button
-      
-      
-    </span>
-    <!--v-if-->
-  </button>,
-}
+    
+    
+    Negative Button
+    
+    
+  </span>
+  <!--v-if-->
+</button>
 `;
 
 exports[`EcModal > should render with an enabled positive button by default 1`] = `
-DOMWrapper {
-  "isDisabled": [Function],
-  "wrapperElement": <button
-    class="ec-modal__positive-btn--right ec-modal__positive-btn ec-btn ec-btn--md ec-btn--rounded ec-btn--primary"
-    data-test="ec-modal__positive-btn ec-btn"
-    type="button"
+<button
+  class="ec-modal__positive-btn--right ec-modal__positive-btn ec-btn ec-btn--md ec-btn--rounded ec-btn--primary"
+  data-test="ec-modal__positive-btn ec-btn"
+  type="button"
+>
+  <!--v-if-->
+  <span
+    class="ec-btn__text"
+    data-test="ec-btn__text"
   >
-    <!--v-if-->
-    <span
-      class="ec-btn__text"
-      data-test="ec-btn__text"
-    >
-      
-      
-      Positive Button
-      
-      
-    </span>
-    <!--v-if-->
-  </button>,
-}
+    
+    
+    Positive Button
+    
+    
+  </span>
+  <!--v-if-->
+</button>
 `;
 
 exports[`EcModal > should render with custom attributes 1`] = `