From 7c14d16b4a9985bf495c352e1ba04135a36f71d4 Mon Sep 17 00:00:00 2001
From: joris K <joris.kosacki@vates.tech>
Date: Thu, 7 Nov 2024 15:23:24 +0100
Subject: [PATCH 1/4] feat(web-core): update UiInput component

---
 .../web-core/ui/input/ui-input.story.vue      |  24 +-
 .../lib/components/ui/input/UiInput.vue       | 215 ++++++++++--------
 .../ui/query-search-bar/UiQuerySearchBar.vue  |   2 +
 3 files changed, 144 insertions(+), 97 deletions(-)

diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/input/ui-input.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/input/ui-input.story.vue
index cd5f1bea0c2..26d8500751a 100644
--- a/@xen-orchestra/lite/src/stories/web-core/ui/input/ui-input.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/input/ui-input.story.vue
@@ -1,19 +1,33 @@
 <template>
   <ComponentStory
-    v-slot="{ properties }"
+    v-slot="{ properties, settings }"
     :params="[
       model().type('string').preset(''),
+      prop('accent').enum('info', 'warning', 'danger').required().preset('info').widget(),
+      prop('type').enum('text', 'number', 'password').required().preset('text').widget(),
       prop('disabled').bool().widget(),
-      iconProp().preset(faMagnifyingGlass).type('IconDefinition'),
+      prop('clearable').bool().widget(),
+      prop('href').str().widget(),
+      iconProp(),
+      iconProp('iconBefore'),
+      prop('placeholder').str().widget(),
+      prop('required').bool().widget(),
+      slot(),
+      slot('info'),
+      setting('defaultSlot').widget(text()).preset('Some label'),
+      setting('info').widget(text()).preset('Lorem ipsum dolor sit amet, consectetur adipiscing elit.'),
     ]"
   >
-    <UiInput placeholder="Enter your search" v-bind="properties" />
+    <UiInput placeholder="Enter your search" v-bind="properties">
+      {{ settings.defaultSlot }}
+      <template v-if="settings.info" #info>{{ settings.info }}</template>
+    </UiInput>
   </ComponentStory>
 </template>
 
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
-import { iconProp, model, prop } from '@/libs/story/story-param'
+import { iconProp, model, prop, setting, slot } from '@/libs/story/story-param'
+import { text } from '@/libs/story/story-widget'
 import UiInput from '@core/components/ui/input/UiInput.vue'
-import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'
 </script>
diff --git a/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue b/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
index 03b1c8cb5d5..46f8327f07c 100644
--- a/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
@@ -1,141 +1,172 @@
-<!-- WIP -->
+<!-- v5 -->
 <template>
-  <div class="ui-input">
-    <VtsIcon :icon accent="current" class="before" />
-    <input :id v-model.trim="modelValue" class="typo p1-regular input" type="search" v-bind="attrs" />
-    <VtsIcon
-      v-if="!attrs.disabled && modelValue"
-      :icon="faXmark"
-      class="after"
-      accent="info"
-      @click="modelValue = ''"
-    />
+  <div class="ui-input" :class="toVariants({ accent })">
+    <UiLabel v-if="slots.default" :accent="labelAccent" :required :icon :href>
+      <slot />
+    </UiLabel>
+    <div>
+      <VtsIcon :icon="iconBefore" accent="current" class="before" />
+      <input v-model.trim="modelValue" class="typo p1-regular input text-truncate" :type :disabled v-bind="attrs" />
+      <VtsIcon
+        v-if="!attrs.disabled && modelValue && clearable"
+        :icon="faXmark"
+        class="after"
+        accent="info"
+        @click="modelValue = ''"
+      />
+    </div>
+    <UiInfo v-if="slots.info" :accent>
+      <slot name="info" />
+    </UiInfo>
   </div>
 </template>
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import { uniqueId } from '@core/utils/unique-id.util'
+import UiInfo from '@core/components/ui/info/UiInfo.vue'
+import UiLabel from '@core/components/ui/label/UiLabel.vue'
+import { toVariants } from '@core/utils/to-variants.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faXmark } from '@fortawesome/free-solid-svg-icons'
 import { computed, useAttrs } from 'vue'
 
+type InputTextAccent = 'info' | 'warning' | 'danger'
+type InputType = 'text' | 'number' | 'password'
+
 defineOptions({
   inheritAttrs: false,
 })
-
-defineProps<{
+const props = defineProps<{
+  type: InputType
+  accent: InputTextAccent
+  disabled?: boolean
+  required?: boolean
+  clearable?: boolean
+  href?: string
   icon?: IconDefinition
+  iconBefore?: IconDefinition
 }>()
 
-const modelValue = defineModel<string>({ required: true })
+const modelValue = defineModel<string | number>({ required: true })
+
+const slots = defineSlots<{
+  default?(): any
+  info?(): any
+}>()
 
 const attrs = useAttrs()
 
-const id = computed(() => uniqueId('input-'))
+const labelAccent = computed(() => (props.accent === 'info' ? 'neutral' : props.accent))
 </script>
 
 <style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.input {
-  & {
-    --border-color: var(--color-neutral-border);
-    --background-color: var(--color-neutral-background-primary);
+/* IMPLEMENTATION */
+.ui-input {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+
+  .input {
+    border-radius: 0.4rem;
+    border-width: 0.1rem;
+    border-style: solid;
+    background-color: var(--color-neutral-background-primary);
+    color: var(--color-neutral-txt-primary);
+    height: 4rem;
+    outline: none;
+    width: 100%;
+    padding-block: 0.8rem;
+    padding-inline: 1.6rem;
+
+    &.text-truncate {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &::placeholder {
+      color: var(--color-neutral-txt-secondary);
+    }
+
+    &:focus {
+      border-width: 0.2rem;
+    }
+
+    &:has(+ .after) {
+      padding-inline-end: 4.8rem;
+    }
   }
 
-  &:is(:hover, :focus-visible) {
-    --border-color: var(--color-info-item-hover);
-    --background-color: var(--color-neutral-background-primary);
-  }
+  /* VARIANT */
 
-  &:focus {
-    --border-color: var(--color-info-item-base);
-    --background-color: var(--color-neutral-background-primary);
-  }
+  &.accent--info {
+    .input {
+      border-color: var(--color-neutral-border);
 
-  &:active {
-    --border-color: var(--color-info-item-active);
-    --background-color: var(--color-neutral-background-primary);
-  }
+      &:hover {
+        border-color: var(--color-info-item-hover);
+      }
 
-  &:disabled {
-    --border-color: var(--color-neutral-border);
-    --background-color: var(--color-neutral-background-disabled);
-  }
-}
+      &:focus {
+        border-color: var(--color-info-item-base);
+      }
 
-/* BORDER VARIANTS */
-.input {
-  --border-width: 0.1rem;
+      &:active {
+        border-color: var(--color-info-item-active);
+      }
 
-  &:is(:hover, :focus-visible) {
-    --border-width: 0.1rem;
+      &:disabled {
+        border-color: var(--color-neutral-border);
+        background-color: var(--color-neutral-background-disabled);
+      }
+    }
   }
 
-  &:focus {
-    --border-width: 0.2rem;
-  }
+  &.accent--warning {
+    .input {
+      border-color: var(--color-warning-item-base);
 
-  &:active {
-    --border-width: 0.1rem;
+      &:disabled {
+        border-color: var(--color-neutral-border);
+        background-color: var(--color-neutral-background-disabled);
+      }
+    }
   }
 
-  &:disabled {
-    --border-width: 0.1rem;
+  &.accent--danger {
+    .input {
+      border-color: var(--color-danger-item-base);
+
+      &:disabled {
+        border-color: var(--color-neutral-border);
+        background-color: var(--color-neutral-background-disabled);
+      }
+    }
   }
-}
 
-/* IMPLEMENTATION */
-.ui-input {
-  position: relative;
+  /* ICON POSITION */
 
   .before + .input {
     padding-inline-start: 4.8rem;
   }
-}
-
-.input {
-  border: var(--border-width) solid var(--border-color);
-  border-radius: 0.8rem;
-  outline: none;
-  width: 100%;
-  height: 4rem;
-  padding: 0.8rem 1.6rem;
-  color: var(--color-neutral-txt-primary);
-  background-color: var(--background-color);
-
-  &:has(+ .after) {
-    padding-inline-end: 4.8rem;
-  }
 
-  &:disabled {
-    cursor: not-allowed;
+  .before,
+  .after {
+    position: absolute;
+    inset-block: 1.2rem;
   }
 
-  &::placeholder {
+  .before {
     color: var(--color-neutral-txt-secondary);
+    inset-inline-start: 1.6rem;
+    pointer-events: none;
+    z-index: 1;
   }
 
-  &[type='search']::-webkit-search-cancel-button {
-    display: none;
+  .after {
+    inset-inline-end: 1.6rem;
+    cursor: pointer;
   }
 }
-
-.before,
-.after {
-  position: absolute;
-  inset-block: 1.2rem;
-}
-
-.before {
-  color: var(--color-neutral-txt-secondary);
-  inset-inline-start: 1.6rem;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.after {
-  inset-inline-end: 1.6rem;
-  cursor: pointer;
-}
 </style>
diff --git a/@xen-orchestra/web-core/lib/components/ui/query-search-bar/UiQuerySearchBar.vue b/@xen-orchestra/web-core/lib/components/ui/query-search-bar/UiQuerySearchBar.vue
index 3dfe9b4bd86..3d44824868a 100644
--- a/@xen-orchestra/web-core/lib/components/ui/query-search-bar/UiQuerySearchBar.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/query-search-bar/UiQuerySearchBar.vue
@@ -7,6 +7,8 @@
     <UiInput
       :id
       v-model="value"
+      type="text"
+      accent="info"
       :aria-label="uiStore.isMobile ? $t('core.query-search-bar.label') : undefined"
       :icon="uiStore.isDesktop ? faMagnifyingGlass : undefined"
       :placeholder="$t('core.query-search-bar.placeholder')"

From 96fd09cd0650176a97d591fa65f5af73e6e4dbda Mon Sep 17 00:00:00 2001
From: Joris-k <joris.kosacki@vates.tech>
Date: Thu, 21 Nov 2024 15:22:52 +0100
Subject: [PATCH 2/4] Feedback

---
 .../stories/web-core/ui/input/ui-input.story.vue   |  2 +-
 .../web-core/lib/components/ui/input/UiInput.vue   | 14 ++++----------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/input/ui-input.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/input/ui-input.story.vue
index 26d8500751a..a135f6c6e8a 100644
--- a/@xen-orchestra/lite/src/stories/web-core/ui/input/ui-input.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/input/ui-input.story.vue
@@ -2,7 +2,7 @@
   <ComponentStory
     v-slot="{ properties, settings }"
     :params="[
-      model().type('string').preset(''),
+      model().type('string | number').preset(''),
       prop('accent').enum('info', 'warning', 'danger').required().preset('info').widget(),
       prop('type').enum('text', 'number', 'password').required().preset('text').widget(),
       prop('disabled').bool().widget(),
diff --git a/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue b/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
index 46f8327f07c..c84486e20dc 100644
--- a/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
@@ -6,7 +6,7 @@
     </UiLabel>
     <div>
       <VtsIcon :icon="iconBefore" accent="current" class="before" />
-      <input v-model.trim="modelValue" class="typo p1-regular input text-truncate" :type :disabled v-bind="attrs" />
+      <input v-model.trim="modelValue" class="typo p1-regular input text-ellipsis" :type :disabled v-bind="attrs" />
       <VtsIcon
         v-if="!attrs.disabled && modelValue && clearable"
         :icon="faXmark"
@@ -31,12 +31,12 @@ import { faXmark } from '@fortawesome/free-solid-svg-icons'
 import { computed, useAttrs } from 'vue'
 
 type InputTextAccent = 'info' | 'warning' | 'danger'
-type InputType = 'text' | 'number' | 'password'
+type InputType = 'text' | 'number' | 'password | search'
 
 defineOptions({
   inheritAttrs: false,
 })
-const props = defineProps<{
+const { accent } = defineProps<{
   type: InputType
   accent: InputTextAccent
   disabled?: boolean
@@ -56,7 +56,7 @@ const slots = defineSlots<{
 
 const attrs = useAttrs()
 
-const labelAccent = computed(() => (props.accent === 'info' ? 'neutral' : props.accent))
+const labelAccent = computed(() => (accent === 'info' ? 'neutral' : accent))
 </script>
 
 <style lang="postcss" scoped>
@@ -79,12 +79,6 @@ const labelAccent = computed(() => (props.accent === 'info' ? 'neutral' : props.
     padding-block: 0.8rem;
     padding-inline: 1.6rem;
 
-    &.text-truncate {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
     &::placeholder {
       color: var(--color-neutral-txt-secondary);
     }

From 07f3834814c7a88713f61fbf2c61a5f7c08659de Mon Sep 17 00:00:00 2001
From: Joris-k <joris.kosacki@vates.tech>
Date: Wed, 11 Dec 2024 17:16:37 +0100
Subject: [PATCH 3/4] review feedback and handle id for label

---
 .../web-core/ui/input/ui-input.story.vue      |  7 +++-
 .../lib/components/ui/input/UiInput.vue       | 39 ++++++++++++-------
 2 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/input/ui-input.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/input/ui-input.story.vue
index a135f6c6e8a..8aa655dc528 100644
--- a/@xen-orchestra/lite/src/stories/web-core/ui/input/ui-input.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/input/ui-input.story.vue
@@ -4,12 +4,15 @@
     :params="[
       model().type('string | number').preset(''),
       prop('accent').enum('info', 'warning', 'danger').required().preset('info').widget(),
-      prop('type').enum('text', 'number', 'password').required().preset('text').widget(),
+      prop('id').str().widget(),
+      prop('type').enum('text', 'number', 'password').preset('text').widget(),
       prop('disabled').bool().widget(),
       prop('clearable').bool().widget(),
       prop('href').str().widget(),
+      prop('label').str().widget(),
+      prop('info').str().widget(),
       iconProp(),
-      iconProp('iconBefore'),
+      iconProp('labelIcon'),
       prop('placeholder').str().widget(),
       prop('required').bool().widget(),
       slot(),
diff --git a/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue b/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
index c84486e20dc..14170eda4ff 100644
--- a/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
@@ -1,12 +1,19 @@
 <!-- v5 -->
 <template>
   <div class="ui-input" :class="toVariants({ accent })">
-    <UiLabel v-if="slots.default" :accent="labelAccent" :required :icon :href>
-      <slot />
+    <UiLabel v-if="slots.default || label" :accent="labelAccent" :required :icon="labelIcon" :href :html-for="inputId">
+      <slot>{{ label }}</slot>
     </UiLabel>
     <div>
-      <VtsIcon :icon="iconBefore" accent="current" class="before" />
-      <input v-model.trim="modelValue" class="typo p1-regular input text-ellipsis" :type :disabled v-bind="attrs" />
+      <VtsIcon :icon accent="current" class="before" />
+      <input
+        :id="inputId"
+        v-model.trim="modelValue"
+        class="typo p1-regular input text-ellipsis"
+        :type
+        :disabled
+        v-bind="attrs"
+      />
       <VtsIcon
         v-if="!attrs.disabled && modelValue && clearable"
         :icon="faXmark"
@@ -15,8 +22,8 @@
         @click="modelValue = ''"
       />
     </div>
-    <UiInfo v-if="slots.info" :accent>
-      <slot name="info" />
+    <UiInfo v-if="slots.info || info" :accent>
+      <slot name="info">{{ info }}</slot>
     </UiInfo>
   </div>
 </template>
@@ -28,23 +35,27 @@ import UiLabel from '@core/components/ui/label/UiLabel.vue'
 import { toVariants } from '@core/utils/to-variants.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faXmark } from '@fortawesome/free-solid-svg-icons'
-import { computed, useAttrs } from 'vue'
+import { computed, useAttrs, useId } from 'vue'
 
-type InputTextAccent = 'info' | 'warning' | 'danger'
+type InputAccent = 'info' | 'warning' | 'danger'
 type InputType = 'text' | 'number' | 'password | search'
 
 defineOptions({
   inheritAttrs: false,
 })
-const { accent } = defineProps<{
-  type: InputType
-  accent: InputTextAccent
+
+const { accent, id } = defineProps<{
+  accent: InputAccent
+  label?: string
+  info?: string
+  id?: string
   disabled?: boolean
-  required?: boolean
   clearable?: boolean
   href?: string
+  required?: boolean
+  labelIcon?: IconDefinition
   icon?: IconDefinition
-  iconBefore?: IconDefinition
+  type?: InputType
 }>()
 
 const modelValue = defineModel<string | number>({ required: true })
@@ -54,6 +65,8 @@ const slots = defineSlots<{
   info?(): any
 }>()
 
+const inputId = computed(() => id || useId())
+
 const attrs = useAttrs()
 
 const labelAccent = computed(() => (accent === 'info' ? 'neutral' : accent))

From 271e1baf10ddfc102b272022554f2c7b82def99b Mon Sep 17 00:00:00 2001
From: Joris-k <joris.kosacki@vates.tech>
Date: Mon, 16 Dec 2024 11:41:06 +0100
Subject: [PATCH 4/4] review feedback

---
 .../lib/components/ui/input/UiInput.vue         | 17 ++++-------------
 .../web/src/components/SidebarSearch.vue        |  1 +
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue b/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
index 14170eda4ff..30e75dba17b 100644
--- a/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
+++ b/@xen-orchestra/web-core/lib/components/ui/input/UiInput.vue
@@ -1,19 +1,12 @@
 <!-- v5 -->
 <template>
   <div class="ui-input" :class="toVariants({ accent })">
-    <UiLabel v-if="slots.default || label" :accent="labelAccent" :required :icon="labelIcon" :href :html-for="inputId">
+    <UiLabel v-if="slots.default || label" :accent="labelAccent" :required :icon="labelIcon" :href :for="id">
       <slot>{{ label }}</slot>
     </UiLabel>
     <div>
       <VtsIcon :icon accent="current" class="before" />
-      <input
-        :id="inputId"
-        v-model.trim="modelValue"
-        class="typo p1-regular input text-ellipsis"
-        :type
-        :disabled
-        v-bind="attrs"
-      />
+      <input :id v-model.trim="modelValue" class="typo p1-regular input text-ellipsis" :type :disabled v-bind="attrs" />
       <VtsIcon
         v-if="!attrs.disabled && modelValue && clearable"
         :icon="faXmark"
@@ -38,13 +31,13 @@ import { faXmark } from '@fortawesome/free-solid-svg-icons'
 import { computed, useAttrs, useId } from 'vue'
 
 type InputAccent = 'info' | 'warning' | 'danger'
-type InputType = 'text' | 'number' | 'password | search'
+type InputType = 'text' | 'number' | 'password' | 'search'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-const { accent, id } = defineProps<{
+const { accent, id = useId() } = defineProps<{
   accent: InputAccent
   label?: string
   info?: string
@@ -65,8 +58,6 @@ const slots = defineSlots<{
   info?(): any
 }>()
 
-const inputId = computed(() => id || useId())
-
 const attrs = useAttrs()
 
 const labelAccent = computed(() => (accent === 'info' ? 'neutral' : accent))
diff --git a/@xen-orchestra/web/src/components/SidebarSearch.vue b/@xen-orchestra/web/src/components/SidebarSearch.vue
index 4881e023ef3..493e819e5e6 100644
--- a/@xen-orchestra/web/src/components/SidebarSearch.vue
+++ b/@xen-orchestra/web/src/components/SidebarSearch.vue
@@ -6,6 +6,7 @@
       :aria-label="$t('sidebar.search-tree-view')"
       :icon="faMagnifyingGlass"
       :placeholder="$t('sidebar.search-tree-view')"
+      accent="info"
     />
   </div>
 </template>