feat(lite): use new defineSlots macro from Vue 3.3

@xen-orchestra/lite/src/components/AppHeader.vue

@@ -21,9 +21,14 @@ import AccountButton from "@/components/AccountButton.vue";
 import UiIcon from "@/components/ui/icon/UiIcon.vue";
 import { useNavigationStore } from "@/stores/navigation.store";
 import { useUiStore } from "@/stores/ui.store";
+import type { SlotDefinition } from "@/types";
 import { faBars } from "@fortawesome/free-solid-svg-icons";
 import { storeToRefs } from "pinia";
 
+defineSlots<{
+  default: SlotDefinition;
+}>();
+
 const uiStore = useUiStore();
 const { isMobile } = storeToRefs(uiStore);
 

@xen-orchestra/lite/src/components/CollectionTable.vue

@@ -43,6 +43,7 @@
 </template>
 
 <script lang="ts" setup>
+import type { SlotDefinition } from "@/types";
 import { computed, toRef, watch } from "vue";
 import type { Filters } from "@/types/filter";
 import type { Sorts } from "@/types/sort";
@@ -55,6 +56,11 @@ import useFilteredCollection from "@/composables/filtered-collection.composable"
 import useMultiSelect from "@/composables/multi-select.composable";
 import useSortedCollection from "@/composables/sorted-collection.composable";
 
+defineSlots<{
+  "head-row": SlotDefinition;
+  "body-row": SlotDefinition<{ item: any }>;
+}>();
+
 const props = defineProps<{
   modelValue?: string[];
   availableFilters?: Filters;

@xen-orchestra/lite/src/components/ColumnHeader.vue

@@ -11,8 +11,13 @@
 
 <script lang="ts" setup>
 import UiIcon from "@/components/ui/icon/UiIcon.vue";
+import type { SlotDefinition } from "@/types";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 
+defineSlots<{
+  default: SlotDefinition;
+}>();
+
 defineProps<{
   icon?: IconDefinition;
 }>();

@xen-orchestra/lite/src/components/ObjectNotFoundWrapper.vue

@@ -13,10 +13,15 @@
 >
 import UiSpinner from "@/components/ui/UiSpinner.vue";
 import type { XenApiRecord } from "@/libs/xen-api";
+import type { SlotDefinition } from "@/types";
 import ObjectNotFoundView from "@/views/ObjectNotFoundView.vue";
 import { computed } from "vue";
 import { useRouter } from "vue-router";
 
+defineSlots<{
+  default: SlotDefinition;
+}>();
+
 const props = defineProps<{
   isReady: boolean;
   uuidChecker: (uuid: I) => boolean;

@xen-orchestra/lite/src/components/RouterTab.vue

@@ -11,10 +11,15 @@
 </template>
 
 <script lang="ts" setup>
+import UiTab from "@/components/ui/UiTab.vue";
+import type { SlotDefinition } from "@/types";
 import { IK_TAB_BAR_DISABLED } from "@/types/injection-keys";
 import { computed, inject } from "vue";
 import type { RouteLocationRaw } from "vue-router";
-import UiTab from "@/components/ui/UiTab.vue";
+
+defineSlots<{
+  default: SlotDefinition;
+}>();
 
 defineProps<{
   to: RouteLocationRaw;

@xen-orchestra/lite/src/components/TitleBar.vue

@@ -12,8 +12,14 @@
 
 <script lang="ts" setup>
 import UiIcon from "@/components/ui/icon/UiIcon.vue";
+import type { SlotDefinition } from "@/types";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 
+defineSlots<{
+  default: SlotDefinition;
+  actions: SlotDefinition;
+}>();
+
 defineProps<{
   icon: IconDefinition;
 }>();

@xen-orchestra/lite/src/components/UsageBar.vue

@@ -26,8 +26,13 @@
 import UiProgressBar from "@/components/ui/progress/UiProgressBar.vue";
 import UiProgressLegend from "@/components/ui/progress/UiProgressLegend.vue";
 import UiCardSpinner from "@/components/ui/UiCardSpinner.vue";
+import type { SlotDefinition } from "@/types";
 import { computed } from "vue";
 
+defineSlots<{
+  footer: SlotDefinition<{ totalPercent: number }>;
+}>();
+
 interface Data {
   id: string;
   value: number;

@xen-orchestra/lite/src/components/charts/LinearChart.vue

@@ -7,6 +7,7 @@
 
 <script lang="ts" setup>
 import UiCard from "@/components/ui/UiCard.vue";
+import type { SlotDefinition } from "@/types";
 import type { LinearChartData, ValueFormatter } from "@/types/chart";
 import { IK_CHART_VALUE_FORMATTER } from "@/types/injection-keys";
 import { utcFormat } from "d3-time-format";
@@ -25,6 +26,10 @@ import VueCharts from "vue-echarts";
 
 const Y_AXIS_MAX_VALUE = 200;
 
+defineSlots<{
+  summary: SlotDefinition;
+}>();
+
 const props = defineProps<{
   title?: string;
   subtitle?: string;

@xen-orchestra/lite/src/components/component-story/ComponentStory.vue

@@ -118,12 +118,20 @@ import {
   ModelParam,
   type Param,
 } from "@/libs/story/story-param";
+import type { SlotDefinition } from "@/types";
 import { faSliders } from "@fortawesome/free-solid-svg-icons";
 import "highlight.js/styles/github-dark.css";
 import { uniqueId, upperFirst } from "lodash-es";
 import { computed, reactive, ref, watch, watchEffect } from "vue";
 import { useRoute } from "vue-router";
 
+defineSlots<{
+  default: SlotDefinition<{
+    properties: Record<string, any>;
+    settings: Record<string, any>;
+  }>;
+}>();
+
 const tab = (tab: TAB, params: Param[]) =>
   reactive({
     onClick: () => (selectedTab.value = tab),

@xen-orchestra/lite/src/components/component-story/StoryExampleComponent.vue

@@ -41,8 +41,18 @@
 </template>
 
 <script lang="ts" setup>
+import type { SlotDefinition } from "@/types";
+
 const moonDistance = 384400;
 
+defineSlots<{
+  default: SlotDefinition;
+  "named-slot": SlotDefinition;
+  "named-scoped-slot": SlotDefinition<{
+    moonDistance: number;
+  }>;
+}>();
+
 withDefaults(
   defineProps<{
     imString: string;

@xen-orchestra/lite/src/components/component-story/StoryParamsTable.vue

@@ -4,7 +4,13 @@
   </table>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { SlotDefinition } from "@/types";
+
+defineSlots<{
+  default: SlotDefinition;
+}>();
+</script>
 
 <style lang="postcss" scoped>
 .story-params-table {

@xen-orchestra/lite/src/components/form/FormInput.vue

@@ -52,7 +52,7 @@
 
 <script lang="ts" setup>
 import UiIcon from "@/components/ui/icon/UiIcon.vue";
-import type { Color } from "@/types";
+import type { Color, SlotDefinition } from "@/types";
 import {
   IK_FORM_INPUT_COLOR,
   IK_FORM_LABEL_DISABLED,
@@ -73,6 +73,10 @@ import {
 
 defineOptions({ inheritAttrs: false });
 
+defineSlots<{
+  default: SlotDefinition;
+}>();
+
 const props = withDefaults(
   defineProps<{
     id?: string;

@xen-orchestra/lite/src/components/form/FormInputWrapper.vue

@@ -39,7 +39,6 @@
 import UiIcon from "@/components/ui/icon/UiIcon.vue";
 import type { Color } from "@/types";
 import {
-  IK_FORM_HAS_LABEL,
   IK_FORM_INPUT_COLOR,
   IK_FORM_LABEL_DISABLED,
   IK_INPUT_ID,
@@ -47,9 +46,7 @@ import {
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { uniqueId } from "lodash-es";
-import { computed, provide, useSlots } from "vue";
-
-const slots = useSlots();
+import { computed, provide } from "vue";
 
 const props = defineProps<{
   label?: string;
@@ -79,11 +76,6 @@ const color = computed<Color | undefined>(() => {
 
 provide(IK_FORM_INPUT_COLOR, color);
 
-provide(
-  IK_FORM_HAS_LABEL,
-  computed(() => slots.label !== undefined)
-);
-
 provide(
   IK_FORM_LABEL_DISABLED,
   computed(() => props.disabled ?? false)

@xen-orchestra/lite/src/components/form/FormSelect.vue

@@ -6,9 +6,14 @@
 
 <script lang="ts" setup>
 import FormInput from "@/components/form/FormInput.vue";
+import type { SlotDefinition } from "@/types";
 import { IK_INPUT_TYPE } from "@/types/injection-keys";
 import { provide } from "vue";
 
+defineSlots<{
+  default: SlotDefinition;
+}>();
+
 provide(IK_INPUT_TYPE, "select");
 </script>
 

@xen-orchestra/lite/src/components/infra/InfraAction.vue

@@ -8,8 +8,13 @@
 
 <script lang="ts" setup>
 import UiIcon from "@/components/ui/icon/UiIcon.vue";
+import type { SlotDefinition } from "@/types";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 
+defineSlots<{
+  default: SlotDefinition;
+}>();
+
 defineProps<{
   icon?: IconDefinition;
 }>();

@xen-orchestra/lite/src/components/infra/InfraItemLabel.vue

@@ -24,10 +24,16 @@
 import UiIcon from "@/components/ui/icon/UiIcon.vue";
 import { vTooltip } from "@/directives/tooltip.directive";
 import { hasEllipsis } from "@/libs/utils";
+import type { SlotDefinition } from "@/types";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 import { computed, ref } from "vue";
 import type { RouteLocationRaw } from "vue-router";
 
+defineSlots<{
+  default: SlotDefinition;
+  actions: SlotDefinition;
+}>();
+
 defineProps<{
   icon: IconDefinition;
   route: RouteLocationRaw;

@xen-orchestra/lite/src/components/menu/AppMenu.vue

@@ -1,6 +1,6 @@
 <template>
   <slot :is-open="isOpen" :open="open" name="trigger" />
-  <Teleport to="body" :disabled="!shouldTeleport">
+  <Teleport :disabled="!shouldTeleport" to="body">
     <ul
       v-if="!hasTrigger || isOpen"
       ref="menu"
@@ -14,15 +14,24 @@
 </template>
 
 <script lang="ts" setup>
+import type { SlotDefinition } from "@/types";
 import {
   IK_CLOSE_MENU,
   IK_MENU_DISABLED,
   IK_MENU_HORIZONTAL,
   IK_MENU_TELEPORTED,
 } from "@/types/injection-keys";
+import { onClickOutside, unrefElement, whenever } from "@vueuse/core";
 import placementJs, { type Options } from "placement.js";
 import { computed, inject, nextTick, provide, ref, useSlots } from "vue";
-import { onClickOutside, unrefElement, whenever } from "@vueuse/core";
+
+defineSlots<{
+  default: SlotDefinition;
+  trigger: SlotDefinition<{
+    isOpen: boolean;
+    open: (event: MouseEvent) => void;
+  }>;
+}>();
 
 const props = defineProps<{
   horizontal?: boolean;

@xen-orchestra/lite/src/components/menu/MenuItem.vue

@@ -36,6 +36,7 @@
 import AppMenu from "@/components/menu/AppMenu.vue";
 import MenuTrigger from "@/components/menu/MenuTrigger.vue";
 import UiIcon from "@/components/ui/icon/UiIcon.vue";
+import type { SlotDefinition } from "@/types";
 import {
   IK_CLOSE_MENU,
   IK_MENU_DISABLED,
@@ -45,6 +46,11 @@ import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 import { faAngleDown, faAngleRight } from "@fortawesome/free-solid-svg-icons";
 import { computed, inject, ref } from "vue";
 
+defineSlots<{
+  default: SlotDefinition;
+  submenu?: SlotDefinition;
+}>();
+
 const props = defineProps<{
   icon?: IconDefinition;
   onClick?: () => any;

@xen-orchestra/lite/src/components/menu/MenuTrigger.vue

@@ -6,9 +6,14 @@
 </template>
 
 <script lang="ts" setup>
+import type { SlotDefinition } from "@/types";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 import UiIcon from "@/components/ui/icon/UiIcon.vue";
 
+defineSlots<{
+  default: SlotDefinition;
+}>();
+
 defineProps<{
   active?: boolean;
   busy?: boolean;

@xen-orchestra/lite/src/components/ui/UiActionButton.vue

@@ -7,8 +7,8 @@
       'has-icon': icon !== undefined,
     }"
     :disabled="isBusy || isDisabled"
-    type="button"
     class="ui-action-button"
+    type="button"
   >
     <UiIcon :busy="isBusy" :icon="icon" />
     <slot />
@@ -17,6 +17,7 @@
 
 <script lang="ts" setup>
 import UiIcon from "@/components/ui/icon/UiIcon.vue";
+import type { SlotDefinition } from "@/types";
 import {
   IK_BUTTON_GROUP_BUSY,
   IK_BUTTON_GROUP_DISABLED,
@@ -24,6 +25,10 @@ import {
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 import { computed, inject } from "vue";
 
+defineSlots<{
+  default: SlotDefinition;
+}>();
+
 const props = withDefaults(
   defineProps<{
     busy?: boolean;

@xen-orchestra/lite/src/components/ui/UiBadge.vue

@@ -6,9 +6,14 @@
 </template>
 
 <script lang="ts" setup>
+import type { SlotDefinition } from "@/types";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
 import UiIcon from "@/components/ui/icon/UiIcon.vue";
 
+defineSlots<{
+  default: SlotDefinition;
+}>();
+
 defineProps<{
   icon?: IconDefinition;
 }>();

@xen-orchestra/lite/src/components/ui/UiButton.vue

@@ -14,7 +14,9 @@
 </template>
 
 <script lang="ts" setup>
+import UiIcon from "@/components/ui/icon/UiIcon.vue";
 import UiSpinner from "@/components/ui/UiSpinner.vue";
+import type { Color, SlotDefinition } from "@/types";
 import {
   IK_BUTTON_GROUP_BUSY,
   IK_BUTTON_GROUP_COLOR,
@@ -22,10 +24,12 @@ import {
   IK_BUTTON_GROUP_OUTLINED,
   IK_BUTTON_GROUP_TRANSPARENT,
 } from "@/types/injection-keys";
-import { computed, inject } from "vue";
-import type { Color } from "@/types";
 import type { IconDefinition } from "@fortawesome/fontawesome-common-types";
-import UiIcon from "@/components/ui/icon/UiIcon.vue";
+import { computed, inject } from "vue";
+
+defineSlots<{
+  default: SlotDefinition;
+}>();
 
 const props = withDefaults(
   defineProps<{

@xen-orchestra/lite/src/components/ui/UiButtonGroup.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { Color } from "@/types";
+import type { Color, SlotDefinition } from "@/types";
 import {
   IK_BUTTON_GROUP_BUSY,
   IK_BUTTON_GROUP_COLOR,
@@ -15,6 +15,9 @@ import {
 } from "@/types/injection-keys";
 import { computed, provide } from "vue";
 
+defineSlots<{
+  default: SlotDefinition;
+}>();
 const props = defineProps<{
   busy?: boolean;
   disabled?: boolean;

@xen-orchestra/lite/src/types/index.ts

@@ -1 +1,6 @@
 export type Color = "info" | "error" | "warning" | "success";
+
+export type SlotDefinition<
+  T extends Record<string, unknown> = Record<string, never>,
+  R = any
+> = (props: T) => R;