Merge pull request #1111 from dnum-mi/refactor/slots-types-and-conditions

Refactor/slots types and conditions

Author: ArnaudTA

src/components/DsfrFieldset/DsfrFieldset.vue

@@ -12,16 +12,16 @@ withDefaults(defineProps<DsfrFieldsetProps>(), {
 })
 
 defineSlots<{
-  default: () => any
-  legend: () => any
-  hint: () => any
+  default?: () => any
+  legend?: () => any
+  hint?: () => any
 }>()
 </script>
 
 <template>
   <fieldset class="fr-fieldset">
     <legend
-      v-if="legend || $slots.legend?.()"
+      v-if="legend || $slots.legend"
       :id="legendId"
       class="fr-fieldset__legend"
       :class="legendClass"
@@ -31,7 +31,7 @@ defineSlots<{
       <slot name="legend" />
     </legend>
     <div
-      v-if="hint || $slots.hint?.()"
+      v-if="hint || $slots.hint"
       class="fr-fieldset__element"
     >
       <span

src/components/DsfrMultiselect/DsfrMultiselect.types.ts

@@ -26,11 +26,11 @@ export type DsfrMultiSelectProps<T> = {
 }
 
 export type DsfrMultiSelectSlots<T> = {
-  label: () => VNode
-  'required-tip': () => VNode
-  hint: () => VNode
-  'button-label': () => VNode
-  legend: () => VNode
-  'checkbox-label': (props: { option: T }) => VNode
-  'no-results': () => VNode
+  label?: () => VNode
+  'required-tip'?: () => VNode
+  hint?: () => VNode
+  'button-label'?: () => VNode
+  legend?: () => VNode
+  'checkbox-label'?: (props: { option: T }) => VNode
+  'no-results'?: () => VNode
 }

src/components/DsfrMultiselect/DsfrMultiselect.vue

@@ -321,7 +321,7 @@ const finalLabelClass = computed(() => [
       </slot>
 
       <span
-        v-if="props.hint || $slots.hint?.()"
+        v-if="props.hint || $slots.hint"
         class="fr-hint-text"
       >
         <slot name="hint">{{ props.hint }}</slot>

src/index.ts

@@ -11,7 +11,6 @@ export default {
   install: (app: App, { components }: VueDsfrPluginOptions = {}) => {
     Object.entries(vueDsfrComponents).forEach(([componentName, component]) => {
       if (components === undefined || components === 'all' || components.map(({ name }) => name).includes(componentName)) {
-        // @ts-expect-error TS2345
         app.component(componentName, component)
       }
     })