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,
   TestFadeAndSlide,
   TestScroll,
@@ -111,6 +112,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,57 @@
+<template>
+  <h2>Simple Filter</h2>
+  <div>
+    <h3>As it is</h3>
+    <SimpleFilter
+      :filter="filter"
+      :cssClasses="innerCssClasses"
+      class="this-is-not-inherited-in-vue3-use-cssClasses-prop-instead"
+      data-custom="this-is-not-inherited-in-vue3"
+    />
+  </div>
+  <div>
+    <h3>Label slot content</h3>
+    <SimpleFilter :filter="filter" :cssClasses="innerCssClasses">
+      <template #label>🚗 {{ filter.label }} ({{ filter.totalResults }})</template>
+    </SimpleFilter>
+  </div>
+  <div>
+    <h3>Default slot content</h3>
+    <SimpleFilter
+      v-slot="{ filter, clickFilter, cssClasses }"
+      :filter="filter"
+      :cssClasses="innerCssClasses"
+    >
+      <label :class="cssClasses" for="filter" class="LABEL-CLASS">
+        <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 { computed, 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
+  });
+
+  const innerCssClasses = computed(() => [
+    'MOT-CUSTOM',
+    { 'MOT-CUSTOM--SELECTED': filter.value.selected }
+  ]);
+</script>
+
+<style>
+  .MOT-CUSTOM--SELECTED {
+    background-color: greenyellow;
+  }
+</style>