empathyco · victorcg88 · Jul 26, 2024 · Jul 24, 2024 · Jul 24, 2024 · Jul 24, 2024
diff --git a/packages/_vue3-migration-test/src/x-modules/facets/components/test-filters.vue b/packages/_vue3-migration-test/src/x-modules/facets/components/test-filters.vue
@@ -5,8 +5,8 @@
     <SimpleFilter
       :filter="filter"
       :cssClasses="innerCssClasses"
-      class="this-is-not-inherited-in-vue3-use-cssClasses-prop-instead"
-      data-custom="this-is-not-inherited-in-vue3"
+      class="this-is-not-inherited-in-vue3-and-will-throw-a-warning--use-cssClasses-prop-instead"
+      data-custom="this-is-not-inherited-in-vue3-and-will-throw-a-warning"
     />
   </div>
   <div>

@@ -1,6 +1,5 @@
 <template>
-  <!-- eslint-disable-next-line vue/attributes-order -->
-  <transition v-bind="$attrs" v-on="$listeners" name="x-animate-width-">
+  <transition name="x-animate-width-">
     <!-- @slot (Required) Transition content -->
     <slot />
   </transition>
@@ -15,8 +14,7 @@
    * @public
    */
   export default defineComponent({
-    name: 'AnimateWidth',
-    inheritAttrs: false
+    name: 'AnimateWidth'
   });
 </script>
 

@@ -1,8 +1,5 @@
 <template>
-  <!-- eslint-disable vue/attributes-order -->
   <transition
-    v-bind="$attrs"
-    v-on="$listeners"
     @enter="expand"
     @after-enter="cleanUpAnimationStyles"
     @leave="collapse"
@@ -26,7 +23,6 @@
    */
   export default defineComponent({
     name: 'CollapseHeight',
-    inheritAttrs: false,
     props: {
       /**
        * Indicates if the transition must be applied on the initial render of the node.

@@ -1,8 +1,5 @@
 <template>
-  <!-- eslint-disable vue/attributes-order -->
   <transition
-    v-bind="$attrs"
-    v-on="$listeners"
     @enter="expand"
     @after-enter="cleanUpAnimationStyles"
     @leave="collapse"
@@ -26,7 +23,6 @@
    */
   export default defineComponent({
     name: 'CollapseWidth',
-    inheritAttrs: false,
     props: {
       /**
        * Indicates if the transition must be applied on the initial render of the node.

@@ -1,6 +1,5 @@
 <template>
-  <!-- eslint-disable-next-line vue/attributes-order -->
-  <transition v-bind="$attrs" v-on="$listeners" name="x-cross-fade-" :appear="appear">
+  <transition name="x-cross-fade-" :appear="appear">
     <!-- @slot (Required) to add content to the transition -->
     <slot />
   </transition>
@@ -17,7 +16,6 @@
    */
   export default defineComponent({
     name: 'CrossFade',
-    inheritAttrs: false,
     props: {
       /**
        * Indicates if the transition must be applied on the initial render of the node.

@@ -1,13 +1,5 @@
 <template>
-  <!-- eslint-disable vue/attributes-order -->
-  <transition-group
-    v-bind="$attrs"
-    v-on="$listeners"
-    class="x-fade-and-slide"
-    :name="name"
-    :tag="tag"
-    :appear="appear"
-  >
+  <transition-group class="x-fade-and-slide" :name="name" :tag="tag" :appear="appear">
     <!-- @slot (Required) Transition-group content -->
     <slot />
   </transition-group>
@@ -25,7 +17,6 @@
    */
   export default defineComponent({
     name: 'FadeAndSlide',
-    inheritAttrs: false,
     props: {
       /**
        * HTML Element that the transition-group children will be wrapped in.

@@ -1,6 +1,5 @@
 <template>
-  <!-- eslint-disable-next-line vue/attributes-order -->
-  <transition v-bind="$attrs" v-on="$listeners" name="x-fade-" :appear="appear">
+  <transition name="x-fade-" :appear="appear">
     <!-- @slot (Required) to add content to the transition -->
     <slot />
   </transition>
@@ -17,7 +16,6 @@
    */
   export default defineComponent({
     name: 'Fade',
-    inheritAttrs: false,
     props: {
       /** Indicates if the transition must be applied on the initial render of the node. */
       appear: {

@@ -1,12 +1,5 @@
 <template>
-  <!-- eslint-disable vue/attributes-order -->
-  <StaggeringTransitionGroup
-    v-bind="$attrs"
-    v-on="$listeners"
-    class="x-staggered-fade-and-slide"
-    :name="name"
-    :appear="appear"
-  >
+  <StaggeringTransitionGroup class="x-staggered-fade-and-slide" :name="name" :appear="appear">
     <!-- @slot (Required) Transition-group content -->
     <slot />
   </StaggeringTransitionGroup>
@@ -26,7 +19,6 @@
   export default defineComponent({
     name: 'StaggeredFadeAndSlide',
     components: { StaggeringTransitionGroup },
-    inheritAttrs: false,
     props: {
       /**
        * Indicates if the transition must be applied on the initial render of the node.

@@ -1,5 +1,5 @@
 <template>
-  <button ref="rootRef" v-on="$listeners" @click="emitEvents" data-test="event-button">
+  <button ref="rootRef" @click="emitEvents" data-test="event-button">
     <!-- @slot (Required) Button content with a text, an icon or both -->
     <slot />
   </button>

@@ -1,6 +1,5 @@
 <template>
   <BaseEventButton
-    v-on="$listeners"
     :events="events"
     class="x-events-modal-close-button x-button"
     data-test="close-modal"

@@ -1,6 +1,5 @@
 <template>
   <BaseEventButton
-    v-on="$listeners"
     :events="events"
     class="x-events-modal-open-button x-button"
     data-test="open-modal"

@@ -1,6 +1,5 @@
 <template>
   <BaseEventsModalClose
-    v-on="$listeners"
     class="x-close-main-modal"
     data-test="close-main-modal"
     :closingEvent="closingEvent"

@@ -1,6 +1,5 @@
 <template>
   <BaseEventsModalOpen
-    v-on="$listeners"
     class="x-open-main-modal"
     data-test="open-main-modal"
     :openingEvent="openingEvent"

@@ -1,6 +1,5 @@
 <template>
   <BaseEventButton
-    v-on="$listeners"
     :events="events"
     class="x-base-id-toggle-panel-button x-button"
     data-test="base-id-toggle-button"

@@ -1,6 +1,5 @@
 <template>
   <BaseEventButton
-    v-on="$listeners"
     :events="events"
     class="x-result-add-to-cart x-button"
     data-test="result-add-to-cart"

@@ -1,5 +1,5 @@
 <template>
-  <button ref="el" @click="emitEvents" v-on="$listeners" :class="dynamicCSSClasses">
+  <button ref="el" @click="emitEvents" :class="dynamicCSSClasses">
     <!--
       @slot Button content
           @binding {Suggestion} suggestion - Suggestion data

@@ -17,26 +17,6 @@ export type XModuleState = { [Key in keyof RootXStoreState['x']]: null };
  * @internal
  */
 export const RootXStoreModule: Module<XModuleState, any> = {
-  state: () => ({
-    device: null,
-    empathize: null,
-    extraParams: null,
-    facets: null,
-    historyQueries: null,
-    identifierResults: null,
-    nextQueries: null,
-    popularSearches: null,
-    queriesPreview: null,
-    querySuggestions: null,
-    recommendations: null,
-    relatedTags: null,
-    scroll: null,
-    search: null,
-    searchBox: null,
-    semanticQueries: null,
-    tagging: null,
-    url: null,
-    experienceControls: null
-  }),
+  state: () => ({} as XModuleState),
   namespaced: true
 };
@@ -4,7 +4,7 @@
     <ClearFilters />
     <SelectedFiltersList>
       <template #default="{ filter }">
-        <SimpleFilter :filter="filter" class="x-facet-filter-success">
+        <SimpleFilter :filter="filter" :cssClasses="['x-facet-filter-success']">
           <template #label>{{ filter.label ?? filter.id }}</template>
         </SimpleFilter>
       </template>

@@ -57,7 +57,7 @@
         required: true
       }
     },
-    data() {
+    setup() {
       return {
         crossFade: CrossFade
       };

@@ -110,9 +110,7 @@
         { immediate: true }
       );
 
-      return () => {
-        return h();
-      };
+      return () => '';
     }
   });
 </script>

@@ -20,6 +20,7 @@
   export default defineComponent({
     name: 'RenderlessFilter',
     xModule: facetsXModule.name,
+    inheritAttrs: false,
     props: {
       /** The filter data to render. */
       filter: {
@@ -66,7 +67,7 @@
           clickFilter: emitClickEvents,
           cssClasses: innerCssClasses.value,
           isDisabled: isDisabled.value
-        }) ?? h();
+        }) ?? '';
     }
   });
 </script>

@@ -29,7 +29,7 @@
         isVisible.value
           ? slots.default?.({ selectedFilters: selectedFilters.value })[0] ??
             h('span', `${selectedFilters.value.length}`)
-          : h();
+          : '';
     }
   });
 </script>

@@ -1,6 +1,5 @@
 <template>
   <BaseEventButton
-    v-on="$listeners"
     :events="events"
     class="x-query-preview-button x-button"
     data-test="query-preview-button"

@@ -1,5 +1,5 @@
 <template>
-  <component :is="tag" ref="rootRef" v-on="$listeners" :data-scroll="item.id">
+  <component :is="tag" ref="rootRef" :data-scroll="item.id">
     <slot />
   </component>
 </template>

@@ -6,8 +6,6 @@
     @scroll:at-start="emitScrollAtStart"
     @scroll:almost-at-end="emitScrollAlmostAtEnd"
     @scroll:at-end="emitScrollAtEnd"
-    v-on="$listeners"
-    v-bind="$attrs"
     :id="id"
   >
     <slot />

@@ -10,7 +10,6 @@
     @keydown.enter="emitUserPressedEnterKey"
     @keydown.up.down.prevent="emitUserPressedArrowKey"
     @beforeinput="preventSpecialKey"
-    v-on="$listeners"
     :maxlength="maxLength"
     :value="query"
     autocomplete="off"