feat(web-core): create VtsInputWrapper component

Author: ByScripts

@xen-orchestra/lite/src/stories/web-core/input-wrapper/vts-input-wrapper.story.md

@@ -0,0 +1,3 @@
+```ts
+type InputWrapperMessage = MaybeArray<string | { content: string; accent?: InfoAccent }>
+```

@xen-orchestra/lite/src/stories/web-core/input-wrapper/vts-input-wrapper.story.vue

@@ -0,0 +1,73 @@
+<template>
+  <ComponentStory
+    v-slot="{ properties }"
+    :params="[
+      prop('label').str().preset('Some label').widget(),
+      prop('learnMoreUrl').str().widget(),
+      iconProp(),
+      prop('message').type('InputWrapperMessage').widget(object()).preset([]).help('See presets'),
+      slot(),
+      slot('label').help('Can be used in place of label prop'),
+    ]"
+    :presets
+  >
+    <VtsInputWrapper v-bind="properties">
+      <UiInput accent="brand" model-value="Foo" />
+    </VtsInputWrapper>
+  </ComponentStory>
+</template>
+
+<script lang="ts" setup>
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { iconProp, prop, slot } from '@/libs/story/story-param.ts'
+import { object } from '@/libs/story/story-widget.ts'
+import VtsInputWrapper from '@core/components/input-wrapper/VtsInputWrapper.vue'
+import UiInput from '@core/components/ui/input/UiInput.vue'
+
+const withInfo = ['Info ']
+
+const withSuccess = [
+  ...withInfo,
+  {
+    content: 'Success',
+    accent: 'success',
+  },
+]
+const withWarning = [
+  ...withSuccess,
+  {
+    content: 'Warning',
+    accent: 'warning',
+  },
+]
+const withDanger = [
+  ...withWarning,
+  {
+    content: 'Danger',
+    accent: 'danger',
+  },
+]
+
+const presets = {
+  'With "info" message': {
+    props: {
+      message: withInfo,
+    },
+  },
+  '\u21B3 and "success" message': {
+    props: {
+      message: withSuccess,
+    },
+  },
+  '\u00A0\u00A0\u21B3 and "warning" message': {
+    props: {
+      message: withWarning,
+    },
+  },
+  '\u00A0\u00A0\u00A0\u00A0\u21B3 and "danger" message': {
+    props: {
+      message: withDanger,
+    },
+  },
+}
+</script>

@xen-orchestra/web-core/lib/components/input-wrapper/VtsInputWrapper.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="vts-input-wrapper">
+    <UiLabel
+      v-if="slots.label || label"
+      :accent="labelAccent"
+      :for="id"
+      :href="learnMoreUrl"
+      :icon
+      :required="wrapperController.required"
+    >
+      <slot name="label">{{ label }}</slot>
+    </UiLabel>
+    <slot />
+    <UiInfo v-for="{ content, accent } of messages" :key="content" :accent="accent">
+      {{ content }}
+    </UiInfo>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UiInfo, { type InfoAccent } from '@core/components/ui/info/UiInfo.vue'
+import UiLabel, { type LabelAccent } from '@core/components/ui/label/UiLabel.vue'
+import { useMapper } from '@core/composables/mapper.composable'
+import { useRanked } from '@core/composables/ranked.composable.ts'
+import type { MaybeArray } from '@core/types/utility.type'
+import { IK_INPUT_WRAPPER_CONTROLLER } from '@core/utils/injection-keys.util'
+import { toArray } from '@core/utils/to-array.utils'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { useArrayMap } from '@vueuse/core'
+import { provide, reactive, useId } from 'vue'
+
+export type InputWrapperMessage = MaybeArray<string | { content: string; accent?: InfoAccent }>
+
+export type InputWrapperController = {
+  id: string
+  labelAccent: LabelAccent
+  required: boolean
+}
+
+const { message: _message } = defineProps<{
+  label?: string
+  learnMoreUrl?: string
+  icon?: IconDefinition
+  message?: InputWrapperMessage
+}>()
+
+const slots = defineSlots<{
+  default(): any
+  label?(): any
+}>()
+
+const id = useId()
+
+const unsortedMessages = useArrayMap(
+  () => toArray(_message),
+  item => ({
+    content: typeof item === 'object' ? item.content : item,
+    accent: typeof item === 'object' ? (item.accent ?? 'info') : 'info',
+  })
+)
+
+const messages = useRanked(unsortedMessages, ({ accent }) => accent, ['danger', 'warning', 'success', 'info'])
+
+const labelAccent = useMapper<InfoAccent, LabelAccent>(
+  () => messages.value[0]?.accent,
+  {
+    info: 'neutral',
+    success: 'neutral',
+    warning: 'warning',
+    danger: 'danger',
+  },
+  'neutral'
+)
+
+const wrapperController = reactive({
+  id,
+  labelAccent,
+  required: false,
+}) satisfies InputWrapperController
+
+provide(IK_INPUT_WRAPPER_CONTROLLER, wrapperController)
+</script>
+
+<style lang="postcss" scoped>
+.vts-input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+</style>

@xen-orchestra/web-core/lib/components/ui/label/UiLabel.vue

@@ -15,8 +15,10 @@ import UiLink from '@core/components/ui/link/UiLink.vue'
 import { toVariants } from '@core/utils/to-variants.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
+export type LabelAccent = 'neutral' | 'warning' | 'danger'
+
 const { for: htmlFor } = defineProps<{
-  accent: 'neutral' | 'warning' | 'danger'
+  accent: LabelAccent
   for?: string
   icon?: IconDefinition
   required?: boolean

@xen-orchestra/web-core/lib/utils/if-else.utils.ts

@@ -2,7 +2,7 @@ import type { MaybeArray, VoidFunction } from '@core/types/utility.type'
 import { toArray } from '@core/utils/to-array.utils'
 import { watch, type WatchOptions, type WatchSource } from 'vue'
 
-export interface IfElseOptions extends Pick<WatchOptions, 'immediate'> {}
+export interface IfElseOptions extends Pick<WatchOptions, 'immediate' | 'flush'> {}
 
 export function ifElse(
   source: WatchSource<boolean>,

@xen-orchestra/web-core/lib/utils/injection-keys.util.ts

@@ -1,3 +1,4 @@
+import type { InputWrapperController } from '@core/components/input-wrapper/VtsInputWrapper.vue'
 import type { ValueFormatter } from '@core/types/chart'
 import type { ComputedRef, InjectionKey, Ref } from 'vue'
 
@@ -18,3 +19,5 @@ export const IK_CLOSE_MENU = Symbol('IK_CLOSE_MENU') as InjectionKey<() => void>
 export const IK_MENU_TELEPORTED = Symbol('IK_MENU_TELEPORTED') as InjectionKey<boolean>
 
 export const IK_DISABLED = Symbol('IK_DISABLED') as InjectionKey<ComputedRef<boolean>>
+
+export const IK_INPUT_WRAPPER_CONTROLLER = Symbol('IK_INPUT_WRAPPER_CONTROLLER') as InjectionKey<InputWrapperController>