Add BaseEventButton & SortList & SortPickerList to vue3-migration-test

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

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

packages/_vue3-migration-test/src/components/test-base-event-button.vue

@@ -0,0 +1,7 @@
+<template>
+  <BaseEventButton :events="{ myEvent: 'myEventPayload' }">myEventButton</BaseEventButton>
+</template>
+
+<script setup lang="ts">
+  import BaseEventButton from '../../../x-components/src/components/base-event-button.vue';
+</script>

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

@@ -1,5 +1,13 @@
 import { createRouter, createWebHistory } from 'vue-router';
-import { TestAnimateWidth, TestBaseDropdown, TestFade, TestSortDropdown } from './';
+import {
+  TestAnimateWidth,
+  TestBaseDropdown,
+  TestBaseEventButton,
+  TestFade,
+  TestSortDropdown,
+  TestSortList,
+  TestSortPickerList
+} from './';
 
 const routes = [
   {
@@ -17,10 +25,25 @@ const routes = [
     name: 'BaseDropdown',
     component: TestBaseDropdown
   },
+  {
+    path: '/base-event-button',
+    name: 'BaseEventButton',
+    component: TestBaseEventButton
+  },
   {
     path: '/sort-dropdown',
     name: 'SortDropdown',
     component: TestSortDropdown
+  },
+  {
+    path: '/sort-list',
+    name: 'SortList',
+    component: TestSortList
+  },
+  {
+    path: '/sort-picker-list',
+    name: 'SortPickerList',
+    component: TestSortPickerList
   }
 ];
 

packages/_vue3-migration-test/src/x-modules/search/components/index.ts

@@ -1 +1,3 @@
 export { default as TestSortDropdown } from './test-sort-dropdown.vue';
+export { default as TestSortList } from './test-sort-list.vue';
+export { default as TestSortPickerList } from './test-sort-picker-list.vue';

packages/_vue3-migration-test/src/x-modules/search/components/test-sort-list.vue

@@ -0,0 +1,15 @@
+<template>
+  <SortList :items="sortValues">
+    <template #default="{ item, isHighlighted, isSelected }">
+      <span v-if="isSelected">✅</span>
+      <span v-if="isHighlighted">🟢</span>
+      {{ item }}
+    </template>
+  </SortList>
+</template>
+
+<script setup lang="ts">
+  import SortList from '../../../../../x-components/src/x-modules/search/components/sort-list.vue';
+
+  const sortValues = ['Relevance', 'Price asc', 'Price desc'];
+</script>

packages/_vue3-migration-test/src/x-modules/search/components/test-sort-picker-list.vue

@@ -0,0 +1,16 @@
+<template>
+  <SortPickerList :items="sortValues">
+    <template #default="{ item, isHighlighted, isSelected }">
+      <span v-if="isSelected">✅</span>
+      <span v-if="isHighlighted">🟢</span>
+      {{ item }}
+    </template>
+  </SortPickerList>
+</template>
+
+<script setup lang="ts">
+  // eslint-disable-next-line max-len
+  import SortPickerList from '../../../../../x-components/src/x-modules/search/components/sort-picker-list.vue';
+
+  const sortValues = ['Relevance', 'Price asc', 'Price desc'];
+</script>

packages/x-components/src/components/base-event-button.vue

@@ -1,13 +1,13 @@
 <template>
-  <button v-on="$listeners" @click="emitEvents" data-test="event-button">
+  <button ref="rootRef" v-on="$listeners" @click="emitEvents" data-test="event-button">
     <!-- @slot (Required) Button content with a text, an icon or both -->
     <slot />
   </button>
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
+  import { defineComponent, PropType, ref } from 'vue';
+  import { use$x } from '../composables/use-$x';
   import { XEvent, XEventsTypes } from '../wiring';
 
   /**
@@ -19,23 +19,38 @@
    *
    * @public
    */
-  @Component
-  export default class BaseEventButton extends Vue {
-    /**
-     * (Required) A object where the keys are the {@link XEvent} and the values
-     * are the payload of each event.
-     *
-     * @public
-     */
-    @Prop({ required: true })
-    protected events!: Partial<XEventsTypes>;
+  export default defineComponent({
+    name: 'BaseEventButton',
+    props: {
+      /**
+       * An object where the keys are the {@link XEvent} and the values are the payload of each
+       * event.
+       */
+      events: {
+        type: Object as PropType<Partial<XEventsTypes>>,
+        required: true
+      }
+    },
+    setup: function (props) {
+      const $x = use$x();
 
-    protected emitEvents(): void {
-      Object.entries(this.events).forEach(([event, payload]) => {
-        this.$x.emit(event as XEvent, payload, { target: this.$el as HTMLElement });
-      });
+      const rootRef = ref<HTMLElement>();
+
+      /**
+       * Emits events when the button is clicked.
+       */
+      function emitEvents(): void {
+        Object.entries(props.events).forEach(([event, payload]) => {
+          $x.emit(event as XEvent, payload, { target: rootRef.value });
+        });
+      }
+
+      return {
+        rootRef,
+        emitEvents
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">

packages/x-components/src/x-modules/search/components/sort-picker-list.vue

@@ -12,7 +12,7 @@
       :class="[cssClasses, buttonClass]"
       data-test="sort-picker-button"
       :events="event"
-      :aria-pressed="item === selectedSort"
+      :aria-pressed="item === selectedSort || null"
       role="listitem"
     >
       <slot v-bind="{ item, isSelected: item === selectedSort }">