fix(slot): rename slots for render functions to kebab case

packages/x-components/src/components/animations/no-animation.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { defineComponent, h, Comment } from 'vue';
+  import { defineComponent } from 'vue';
 
   /**
    * Component to be used as `default` for animation props together with dynamic components
@@ -8,8 +8,7 @@
   export default defineComponent({
     name: 'NoAnimation',
     setup(_, { slots }) {
-      return () =>
-        slots.default?.()[0] ?? h(Comment, 'NoAnimation component - Without default slot');
+      return () => slots.default?.()[0] ?? '';
     }
   });
 </script>

packages/x-components/src/components/modals/base-id-modal-close.vue

@@ -42,11 +42,11 @@
         $x.emit('UserClickedCloseModal', props.modalId, { target: target as HTMLElement });
       }
 
-      /* Hack to render through a render-function, the `closingElement` slot or, in its absence,
+      /* Hack to render through a render-function, the `closing-element` slot or, in its absence,
        the component itself. It is the alternative for the NoElement antipattern. */
       const innerProps = { closeModal };
       return (
-        slots.closingElement ? () => slots.closingElement?.(innerProps)[0] : innerProps
+        slots['closing-element'] ? () => slots['closing-element']?.(innerProps)[0] : innerProps
       ) as typeof innerProps;
     }
   });

packages/x-components/src/components/modals/base-id-modal-open.vue

@@ -41,11 +41,11 @@
         $x.emit('UserClickedOpenModal', props.modalId, { target: target as HTMLElement });
       }
 
-      /* Hack to render through a render-function, the `openingElement` slot or, in its absence,
+      /* Hack to render through a render-function, the `opening-element` slot or, in its absence,
        the component itself. It is the alternative for the NoElement antipattern. */
       const innerProps = { openModal };
       return (
-        slots.openingElement ? () => slots.openingElement?.(innerProps)[0] : innerProps
+        slots['opening-element'] ? () => slots['opening-element']?.(innerProps)[0] : innerProps
       ) as typeof innerProps;
     }
   });

packages/x-components/src/x-modules/extra-params/components/renderless-extra-param.vue

@@ -26,7 +26,7 @@
       const stateParams = useState('extraParams', ['params']).params;
 
       /** It returns the value of the extra param from the store. */
-      const value = computed(() => stateParams.value[props.name]);
+      const extraParam = computed(() => stateParams.value[props.name]);
 
       /**
        * It sets the new value to the store.
@@ -37,7 +37,7 @@
         xBus.emit('UserChangedExtraParams', { [props.name]: newValue });
       }
 
-      return () => slots.default?.({ value: value.value, updateValue })[0] ?? '';
+      return () => slots.default?.({ value: extraParam.value, updateValue })[0] ?? '';
     }
   });
 </script>