From dfeecbbc47761ecedb79529d8f55c1d255b18018 Mon Sep 17 00:00:00 2001
From: mathieuRA <contact@mathieu-raisin.fr>
Date: Wed, 18 Sep 2024 10:38:41 +0200
Subject: [PATCH] feat(web-core): new InputTextArea component

---
 .../web-core/input/input-text-area.story.vue  | 22 +++++
 .../lib/components/input/InputTextArea.vue    | 93 +++++++++++++++++++
 2 files changed, 115 insertions(+)
 create mode 100644 @xen-orchestra/lite/src/stories/web-core/input/input-text-area.story.vue
 create mode 100644 @xen-orchestra/web-core/lib/components/input/InputTextArea.vue

diff --git a/@xen-orchestra/lite/src/stories/web-core/input/input-text-area.story.vue b/@xen-orchestra/lite/src/stories/web-core/input/input-text-area.story.vue
new file mode 100644
index 00000000000..b01ada8536a
--- /dev/null
+++ b/@xen-orchestra/lite/src/stories/web-core/input/input-text-area.story.vue
@@ -0,0 +1,22 @@
+<template>
+  <ComponentStory
+    v-slot="{ properties, settings }"
+    :params="[
+      prop('status').enum('normal', 'warning', 'danger').required().preset('normal').widget(),
+      prop('required').bool().widget(),
+      prop('href').str().widget(),
+      slot(),
+      setting('defaultSlot').widget(text()).preset('Some label'),
+      iconProp(),
+    ]"
+  >
+    <InputTextArea v-bind="properties">{{ settings.defaultSlot }}</InputTextArea>
+  </ComponentStory>
+</template>
+
+<script lang="ts" setup>
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { iconProp, prop, setting, slot } from '@/libs/story/story-param'
+import { text } from '@/libs/story/story-widget'
+import InputTextArea from '@core/components/input/InputTextArea.vue'
+</script>
diff --git a/@xen-orchestra/web-core/lib/components/input/InputTextArea.vue b/@xen-orchestra/web-core/lib/components/input/InputTextArea.vue
new file mode 100644
index 00000000000..d0a4e92c65d
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/input/InputTextArea.vue
@@ -0,0 +1,93 @@
+<!-- v1 -->
+<template>
+  <div class="vts-input-text-area">
+    <InputLabel v-if="$slots.default" :status :required :icon :href><slot /></InputLabel>
+    <textarea v-model="model" :class="status" class="text-area" v-bind="$attrs" />
+    <!-- TODO info V2 -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+import InputLabel from '@core/components/input/InputLabel.vue'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps<{
+  status: 'normal' | 'warning' | 'danger'
+  icon?: IconDefinition
+  required?: boolean
+  href?: string
+}>()
+
+const model = defineModel<string>({ required: true })
+
+defineSlots<{
+  default(): any
+  label(): any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+/* VARIANTS */
+.text-area {
+  --background-color: var(--color-neutral-background-primary);
+  --border-width: 0.1rem;
+
+  &:focus {
+    --border-width: 0.2rem;
+  }
+
+  &:disabled {
+    --background-color: var(--color-neutral-background-disabled);
+    --border-color: var(--color-neutral-border);
+  }
+
+  &.normal:not(:disabled) {
+    --border-color: var(--color-neutral-border);
+
+    &:is(:hover, :focus-visible) {
+      --border-color: var(--color-normal-item-hover);
+    }
+    &:active {
+      --border-color: var(--color-normal-item-active);
+    }
+  }
+
+  &.warning:not(:disabled) {
+    --border-color: var(--color-warning-item-base);
+
+    &:is(:hover, :focus-visible) {
+      --border-color: var(--color-warning-item-hover);
+    }
+    &:active {
+      --border-color: var(--color-warning-item-active);
+    }
+  }
+
+  &.danger:not(:disabled) {
+    --border-color: var(--color-danger-item-base);
+
+    &:is(:hover, :focus-visible) {
+      --border-color: var(--color-danger-item-hover);
+    }
+    &:active {
+      --border-color: var(--color-danger-item-active);
+    }
+  }
+}
+
+/* IMPLEMENTATION */
+.text-area {
+  border-radius: 0.4rem;
+  height: 8rem;
+  padding: 0.8rem 1.6rem;
+  width: 100%;
+  outline: none;
+
+  border-color: var(--border-color);
+  border-width: var(--border-width);
+}
+</style>