Merge branch 'main' into EMP-4024-replace-facets-mixin-by-use-facets-…

…composable

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/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-alpha.4](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.4) (2024-05-06)
+
+
+### ⚠ BREAKING CHANGES
+
+* **ColumnPickerMixin:** `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.
+
+### Code Refactoring
+
+* **ColumnPickerMixin:** get rid of `ColumnPickerMixin` and refactor components which use it (#1461) ([c5b84da](https://github.com/empathyco/x/commit/c5b84da32b75a37d028e91b64220016a2cfb3037))
+
+
+
 ## [1.0.0-alpha.3](https://github.com/empathyco/x/compare/[email protected]@1.0.0-alpha.3) (2024-05-03)
 
 **Note:** Version bump only for package vue3-migration-test

packages/_vue3-migration-test/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue3-migration-test",
   "private": "true",
-  "version": "1.0.0-alpha.3",
+  "version": "1.0.0-alpha.4",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",

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,6 +1,8 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import {
   TestAnimateWidth,
+  TestBaseColumnPickerDropdown,
+  TestBaseColumnPickerList,
   TestBaseDropdown,
   TestBaseEventButton,
   TestClearFilters,
@@ -34,6 +36,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: '/facets',
     name: 'Facets',

packages/x-components/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.0-alpha.7](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-05-06)
+
+
+### ⚠ BREAKING CHANGES
+
+* **ColumnPickerMixin:** `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.
+
+### Code Refactoring
+
+* **ColumnPickerMixin:** get rid of `ColumnPickerMixin` and refactor components which use it (#1461) ([c5b84da](https://github.com/empathyco/x/commit/c5b84da32b75a37d028e91b64220016a2cfb3037))
+
+
+
 ## [5.0.0-alpha.6](https://github.com/empathyco/x/compare/@empathyco/[email protected]...@empathyco/[email protected]) (2024-05-03)
 
 **Note:** Version bump only for package @empathyco/x-components

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'],

packages/x-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "5.0.0-alpha.6",
+  "version": "5.0.0-alpha.7",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",