feat: Migrate renderless and simple filter components to composition API

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

@@ -10,6 +10,7 @@ import {
   TestCrossFade,
   TestElementsList,
   TestFacets,
+  TestFilters,
   TestFade,
   TestScroll,
   TestSortDropdown,
@@ -100,6 +101,11 @@ const routes = [
     name: 'Facets',
     component: TestFacets
   },
+  {
+    path: '/filters',
+    name: 'Filters',
+    component: TestFilters
+  },
   {
     path: '/scroll',
     name: 'Scroll',

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

@@ -1 +1,2 @@
 export { default as TestFacets } from './test-facets.vue';
+export { default as TestFilters } from './test-filters.vue';

packages/_vue3-migration-test/src/x-modules/facets/components/test-filters.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <h2>Simple Filter</h2>
+    <SimpleFilter v-slot="{ clickFilter, cssClasses }" :filter="filter">
+      <label :class="cssClasses" for="filter">
+        <input @change="clickFilter" id="filter" :checked="filter.selected" type="checkbox" />
+        {{ filter.label }}
+      </label>
+    </SimpleFilter>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { SimpleFilter as SimpleFilterModel } from '@empathyco/x-types';
+  import { ref, Ref } from 'vue';
+  import SimpleFilter from '../../../../../x-components/src/x-modules/facets/components/filters/simple-filter.vue';
+
+  const filter: Ref<SimpleFilterModel> = ref({
+    modelName: 'SimpleFilter',
+    label: 'My Filter',
+    totalResults: 10,
+    facetId: 'facet1',
+    id: 'filter1',
+    selected: false
+  });
+</script>