refactor(ColumnPickerMixin): get rid of ColumnPickerMixin and refac…

…tor components which use it (#1461)

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

`BaseColumnPickerList` component will no longer emit the `change` event, use `update:modelValue` instead. 
`BaseColumnPickerList` prop for the selected columns was renamed from `value` to `modelValue`.

`ColumnPickerMixin` has been removed.

packages/_vue3-migration-test/.eslintrc.js

@@ -3,5 +3,8 @@ module.exports = {
   parserOptions: {
     tsconfigRootDir: __dirname,
     project: 'tsconfig.eslint.json'
+  },
+  rules: {
+    'max-len': 'off'
   }
 };

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

@@ -0,0 +1,18 @@
+<template>
+  <BaseColumnPickerDropdown v-model="selectedColumns" :columns="columns">
+    <template #toggle="{ item, isOpen }">Selected: {{ item }} {{ isOpen ? '🔼' : '🔽' }}️</template>
+    <template #item="{ item, isSelected, isHighlighted }">
+      <span v-if="isHighlighted">🟢</span>
+      <span v-if="isSelected">✅</span>
+      <span>{{ item }}</span>
+    </template>
+  </BaseColumnPickerDropdown>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import BaseColumnPickerDropdown from '../../../../x-components/src/components/column-picker/base-column-picker-dropdown.vue';
+
+  const columns = ref([2, 4, 6]);
+  const selectedColumns = ref(4);
+</script>

packages/_vue3-migration-test/src/components/column-picker/test-base-column-picker-list.vue

@@ -0,0 +1,27 @@
+<template>
+  <!--
+  <BaseColumnPickerList v-model="selectedColumns" :columns="columns">
+    <template #default="{ column, isSelected }">
+      <span v-if="isSelected">✅</span>
+      <span>{{ column }}</span>
+    </template>
+    <template #divider>
+      <span>-----</span>
+    </template>
+  </BaseColumnPickerList>
+  -->
+  <span>
+    BREAKING Vue3: `template v-for` key should be placed on the `template` tag (rather than on its
+    children)
+  </span>
+</template>
+
+<script setup lang="ts">
+  /*
+  import { ref } from 'vue';
+  import BaseColumnPickerList from '../../../../x-components/src/components/column-picker/base-column-picker-list.vue';
+
+  const columns = ref([2, 4, 6]);
+  const selectedColumns = ref(4);
+  */
+</script>

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

@@ -1,3 +1,5 @@
 export * from './animations';
+export { default as TestBaseColumnPickerDropdown } from './column-picker/test-base-column-picker-dropdown.vue';
+export { default as TestBaseColumnPickerList } from './column-picker/test-base-column-picker-list.vue';
 export { default as TestBaseDropdown } from './test-base-dropdown.vue';
 export { default as TestBaseEventButton } from './test-base-event-button.vue';

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

@@ -1,12 +1,14 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import {
   TestAnimateWidth,
+  TestBaseColumnPickerList,
   TestBaseDropdown,
   TestBaseEventButton,
   TestFade,
   TestSortDropdown,
   TestSortList,
-  TestSortPickerList
+  TestSortPickerList,
+  TestBaseColumnPickerDropdown
 } from './';
 
 const routes = [
@@ -30,6 +32,16 @@ const routes = [
     name: 'BaseEventButton',
     component: TestBaseEventButton
   },
+  {
+    path: '/base-column-picker-dropdown',
+    name: 'BaseColumnPickerDropdown',
+    component: TestBaseColumnPickerDropdown
+  },
+  {
+    path: '/base-column-picker-list',
+    name: 'BaseColumnPickerList',
+    component: TestBaseColumnPickerList
+  },
   {
     path: '/sort-dropdown',
     name: 'SortDropdown',

packages/x-components/jest.config.js

@@ -1,7 +1,7 @@
 module.exports = {
   preset: 'ts-jest',
   transform: {
-    '^.+\\.vue$': require.resolve('./vue-preprocessor'),
+    '^.+\\.vue$': '@vue/vue2-jest',
     '^.+\\.scss$': 'jest-scss-transform'
   },
   testMatch: ['<rootDir>/src/**/*.spec.ts'],