feat(web-core): update UiTextArea to V5 (#9855)

@xen-orchestra/lite/src/stories/web-core/ui/input/ui-textarea.story.vue

@@ -11,8 +11,10 @@
       prop('required').bool().widget(),
       slot(),
       slot('info'),
+      slot('message'),
       setting('defaultSlot').widget(text()).preset('Some label'),
       setting('info').widget(text()).preset('Lorem ipsum dolor sit amet, consectetur adipiscing elit.'),
+      setting('message').widget(text()).preset('Lorem ipsum dolor sit amet, consectetur adipiscing elit.'),
     ]"
   >
     <UiTextarea v-bind="properties">
@@ -21,6 +23,7 @@
         <UiCharacterLimit :count="properties.modelValue.length" :max="200" />
       </template>
       <template v-if="settings.info" #info>{{ settings.info }}</template>
+      <template v-if="settings.message" #message>{{ settings.message }}</template>
     </UiTextarea>
   </ComponentStory>
 </template>

@xen-orchestra/web-core/lib/components/ui/text-area/UiTextarea.vue

@@ -1,16 +1,19 @@
-<!-- v2 -->
+<!-- v5 -->
 <template>
-  <div class="ui-textarea" :class="toVariants({ accent: hasMaxCharactersError ? 'danger' : accent })">
+  <div class="ui-textarea" :class="toVariants({ accent: isExceedingMaxCharacters ? 'danger' : accent })">
     <UiLabel v-if="slots.default" :accent="labelAccent" :required :href :for="id">
       <slot />
     </UiLabel>
     <textarea v-bind="attrs" :id ref="textarea" v-model="model" :disabled class="textarea" />
     <UiCharacterLimit v-if="maxCharacters" :count="model.trim().length" :max="maxCharacters" />
+    <UiInfo v-if="slots.info" accent="info">
+      <slot name="info" />
+    </UiInfo>
     <UiInfo v-if="isExceedingMaxCharacters" accent="danger">
       {{ t('field:exceeds-max-characters', { max: maxCharacters }) }}
     </UiInfo>
-    <UiInfo v-if="slots.info" :accent="accent === 'brand' ? 'info' : accent">
-      <slot name="info" />
+    <UiInfo v-if="slots.message && labelAccent !== 'neutral'" :accent="labelAccent">
+      <slot name="message" />
     </UiInfo>
   </div>
 </template>
@@ -46,6 +49,7 @@ const model = defineModel<string>({ required: true })
 const slots = defineSlots<{
   default?(): any
   info?(): any
+  message?(): any
 }>()
 
 const { t } = useI18n()
@@ -58,16 +62,10 @@ const { focused } = useFocus(textAreaElement)
 
 // WIP: To update when using VeeValidate and custom validation rules
 const isExceedingMaxCharacters = computed(() =>
-  maxCharacters !== undefined ? model.value.trim().length > maxCharacters : false
+  maxCharacters !== undefined ? !focused.value && model.value.trim().length > maxCharacters : false
 )
 
-const hasMaxCharactersError = computed(() => !focused.value && isExceedingMaxCharacters.value)
-
 const labelAccent = computed(() => {
-  if (hasMaxCharactersError.value) {
-    return 'danger'
-  }
-
   return accent === 'brand' ? 'neutral' : accent
 })
 </script>
@@ -101,8 +99,8 @@ const labelAccent = computed(() => {
       }
 
       &:focus:not(:active) {
-        border-width: 0.2rem;
         border-color: var(--color-brand-item-base);
+        box-shadow: inset 0 0 0 0.1rem var(--color-brand-item-base);
       }
 
       &:disabled {
@@ -125,8 +123,8 @@ const labelAccent = computed(() => {
       }
 
       &:focus:not(:active) {
-        border-width: 0.2rem;
         border-color: var(--color-warning-item-base);
+        box-shadow: inset 0 0 0 0.1rem var(--color-warning-item-base);
       }
 
       &:disabled {
@@ -149,8 +147,8 @@ const labelAccent = computed(() => {
       }
 
       &:focus:not(:active) {
-        border-width: 0.2rem;
         border-color: var(--color-danger-item-base);
+        box-shadow: inset 0 0 0 0.1rem var(--color-danger-item-base);
       }
 
       &:disabled {

@xen-orchestra/web/src/pages/vm/new.vue

@@ -98,7 +98,7 @@
                 <div class="ssh-key-area">
                   <UiTextarea v-model="vmState.ssh_key" required :accent="isSshKeyError ? 'danger' : 'brand'">
                     {{ t('public-key') }}
-                    <template v-if="isSshKeyError" #info>
+                    <template v-if="isSshKeyError" #message>
                       {{ sshKeyErrorMessage }}
                     </template>
                   </UiTextarea>