refactor(sort-mixin): get rid of SortMixin and refactor components wh…

…ich use it (#1448)

BREAKING CHANGE: 
base-dropdown component will no longer emit the `change` event, use `update:modelValue` instead. 
base-dropdown prop for the selected item was renamed from `value` to `modelValue`.

packages/_vue3-migration-test/package.json

@@ -9,7 +9,11 @@
     "build": "vue-tsc && vite build"
   },
   "dependencies": {
+    "@empathyco/x-bus": "^1.0.3-alpha.1",
+    "@empathyco/x-types": "^10.1.0-alpha.2",
+    "@empathyco/x-utils": "^1.0.3-alpha.1",
     "@vue/compat": "^3.4.22",
+    "@vueuse/core": "~10.7.1",
     "vue": "^3.4.22",
     "vue-router": "^4.3.0"
   },

packages/_vue3-migration-test/src/components/index.ts

@@ -1 +1,2 @@
 export * from './animations';
+export { default as TestBaseDropdown } from './test-base-dropdown.vue';

packages/_vue3-migration-test/src/components/test-base-dropdown.vue

@@ -0,0 +1,22 @@
+<template>
+  <BaseDropdown v-model="value" :items="items">
+    <template #toggle="{ item, isOpen }">{{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>
+    <template #item="{ item, isSelected, isHighlighted }">
+      <span v-if="isHighlighted">🟢</span>
+      <span v-if="isSelected">✅</span>
+      <span>{{ item }}</span>
+    </template>
+  </BaseDropdown>
+</template>
+
+<script setup lang="ts">
+  import { Identifiable } from '@empathyco/x-types';
+  import { ref } from 'vue';
+  import BaseDropdown from '../../../x-components/src/components/base-dropdown.vue';
+
+  type BaseDropdownItem = string | number | Identifiable;
+
+  const items: Array<BaseDropdownItem> = ['a', 2, { id: '3' }];
+
+  const value = ref<BaseDropdownItem>(items[0]);
+</script>

packages/_vue3-migration-test/src/main.ts

@@ -6,7 +6,9 @@ import router from './router';
 const VUE_COMPAT_MODE = Number(import.meta.env.VITE_VUE_COMPAT_MODE);
 if (VUE_COMPAT_MODE === 2) {
   configureCompat({
-    INSTANCE_LISTENERS: 'suppress-warning'
+    INSTANCE_LISTENERS: 'suppress-warning',
+    RENDER_FUNCTION: false,
+    COMPONENT_V_MODEL: false
   });
 }
 

packages/_vue3-migration-test/src/router.ts

@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import { TestAnimateWidth, TestFade } from './';
+import { TestAnimateWidth, TestBaseDropdown, TestFade } from './';
 
 const routes = [
   {
@@ -11,6 +11,11 @@ const routes = [
     path: '/fade',
     name: 'Fade',
     component: TestFade
+  },
+  {
+    path: '/base-dropdown',
+    name: 'BaseDropdown',
+    component: TestBaseDropdown
   }
 ];
 

packages/_vue3-migration-test/vite.config.ts

@@ -27,6 +27,7 @@ export default defineConfig(({ mode }) => {
     ],
     resolve: {
       alias: {
+        '@vueuse/core': resolve(__dirname, 'node_modules/@vueuse/core'),
         vue: resolve(__dirname, 'node_modules/@vue/compat')
       }
     },

packages/x-components/.eslintrc.js

@@ -8,7 +8,8 @@ module.exports = {
   rules: {
     'no-dupe-class-members': 'off',
     '@typescript-eslint/no-unused-vars-experimental': 'off',
-    'vue/require-default-prop': 'off'
+    'vue/require-default-prop': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off'
   },
   overrides: [
     {
@@ -29,6 +30,12 @@ module.exports = {
       rules: {
         'max-len': 'off'
       }
+    },
+    {
+      files: ['*.spec.ts'],
+      rules: {
+        'max-len': 'off'
+      }
     }
   ]
 };

packages/x-components/jest.setup.ts

@@ -5,3 +5,6 @@ window.ResizeObserver = jest.fn().mockImplementation(() => ({
   unobserve: jest.fn(),
   disconnect: jest.fn()
 }));
+
+// Disable console warnings to reduce noise overwriting entirely modules in the store
+console.warn = () => {};