From d8a035ebde9626dcb7ac60e1089cbd1ca74602d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastian=20Czech?= <czechsebastian@icloud.com>
Date: Wed, 27 Nov 2024 15:11:20 +0100
Subject: [PATCH] feat(web-core):feedback

---
 .../vts-card-row-key-value.story.vue}         | 58 ++++++++++++-------
 .../web-core/tag/vts-tag-list.story.vue       | 19 ++++++
 .../components/card/VtsCardRowKeyValue.vue    | 48 +++++++++++++++
 .../lib/components/tag/VtsTagList.vue         | 26 +++++++++
 .../components/ui/card-item/UiCardItem.vue    | 55 ------------------
 5 files changed, 131 insertions(+), 75 deletions(-)
 rename @xen-orchestra/lite/src/stories/web-core/{ui/card/ui-card-item.story.vue => card/vts-card-row-key-value.story.vue} (67%)
 create mode 100644 @xen-orchestra/lite/src/stories/web-core/tag/vts-tag-list.story.vue
 create mode 100644 @xen-orchestra/web-core/lib/components/card/VtsCardRowKeyValue.vue
 create mode 100644 @xen-orchestra/web-core/lib/components/tag/VtsTagList.vue
 delete mode 100644 @xen-orchestra/web-core/lib/components/ui/card-item/UiCardItem.vue

diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/card/ui-card-item.story.vue b/@xen-orchestra/lite/src/stories/web-core/card/vts-card-row-key-value.story.vue
similarity index 67%
rename from @xen-orchestra/lite/src/stories/web-core/ui/card/ui-card-item.story.vue
rename to @xen-orchestra/lite/src/stories/web-core/card/vts-card-row-key-value.story.vue
index 347e4d3e771..619a1014012 100644
--- a/@xen-orchestra/lite/src/stories/web-core/ui/card/ui-card-item.story.vue
+++ b/@xen-orchestra/lite/src/stories/web-core/card/vts-card-row-key-value.story.vue
@@ -2,29 +2,35 @@
   <ComponentStory
     v-slot="{ properties, settings }"
     :params="[
-      slot().help('Meant to receive the title'),
-      slot('content').help('Meant to receive an info text or tags'),
-      slot('actions').help('Meant to receive icons or other actions buttons '),
+      slot('key').help('Meant to receive a title'),
+      slot('value').help('Meant to receive text, tags or other value'),
+      slot('addons').help('Meant to receive icons or other actions buttons '),
       setting('defaultSlotContent').preset('Uuid').widget(text()),
       setting('contentSlotContent').preset('71df26a271df26a271df26a271df26a271df26a').widget(text()),
     ]"
   >
     <UiCard class="card">
       <UiCardItem v-bind="properties">
-        {{ settings.defaultSlotContent }}
-        <template #content>
+        <template #key>
+          {{ settings.defaultSlotContent }}
+        </template>
+        <template #value>
           <span>
             {{ settings.contentSlotContent }}
           </span>
         </template>
-        <template #actions>
+        <template #addons>
           <VtsIcon accent="warning" :icon="faCircle" :overlay-icon="faStar" />
           <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
         </template>
       </UiCardItem>
+
       <UiCardItem v-bind="properties">
-        <span>Network</span>
-        <template #content>
+        <template #key>
+          <span>Network</span>
+        </template>
+
+        <template #value>
           <UiObjectLink route="`/vm/test/console`">
             <template #icon>
               <UiComplexIcon size="medium">
@@ -35,27 +41,33 @@
             <span>Network Name</span>
           </UiObjectLink>
         </template>
-        <template #actions>
+        <template #addons>
           <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
         </template>
       </UiCardItem>
+
       <UiCardItem v-bind="properties">
-        <span>Status</span>
-        <template #content>
-          <VtsIcon accent="success" :icon="faCircle" :overlay-icon="faCheck" />
-          <span>Connected</span>
+        <template #key>
+          <span>Status</span>
+        </template>
+        <template #value>
+          <div class="content">
+            <VtsIcon accent="success" :icon="faCircle" :overlay-icon="faCheck" />
+            <span>Connected</span>
+          </div>
         </template>
-        <template #actions>
+        <template #addons>
           <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
           <UiButtonIcon :icon="faEllipsis" size="medium" accent="info" />
         </template>
       </UiCardItem>
       <UiCardItem v-bind="properties">
-        <span>Tags</span>
-        <template #content>
-          <UiTag v-for="tag in tags" :key="tag" accent="info" variant="secondary" size="small">{{ tag }}</UiTag>
+        <template #key>
+          <span>Tags</span>
+        </template>
+        <template #value>
+          <VtsTagList accent="info" variant="secondary" :tags />
         </template>
-        <template #actions />
       </UiCardItem>
     </UiCard>
   </ComponentStory>
@@ -66,12 +78,12 @@ import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import UiCard from '@/components/ui/UiCard.vue'
 import { setting, slot } from '@/libs/story/story-param'
 import { text } from '@/libs/story/story-widget'
+import UiCardItem from '@core/components/card/VtsCardRowKeyValue.vue'
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import VtsTagList from '@core/components/tag/VtsTagList.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
-import UiCardItem from '@core/components/ui/card-item/UiCardItem.vue'
 import UiComplexIcon from '@core/components/ui/complex-icon/UiComplexIcon.vue'
 import UiObjectLink from '@core/components/ui/object-link/UiObjectLink.vue'
-import UiTag from '@core/components/ui/tag/UiTag.vue'
 import { faCheck, faCircle, faCopy, faEllipsis, faNetworkWired, faStar } from '@fortawesome/free-solid-svg-icons'
 
 const tags = ['tag1', 'tag2', 'tag3']
@@ -83,5 +95,11 @@ const tags = ['tag1', 'tag2', 'tag3']
   display: flex;
   flex-direction: column;
   gap: 0.8rem;
+
+  .content {
+    display: flex;
+    gap: 0.4rem;
+    flex-wrap: wrap;
+  }
 }
 </style>
diff --git a/@xen-orchestra/lite/src/stories/web-core/tag/vts-tag-list.story.vue b/@xen-orchestra/lite/src/stories/web-core/tag/vts-tag-list.story.vue
new file mode 100644
index 00000000000..ea5578264e3
--- /dev/null
+++ b/@xen-orchestra/lite/src/stories/web-core/tag/vts-tag-list.story.vue
@@ -0,0 +1,19 @@
+<template>
+  <ComponentStory
+    v-slot="{ properties }"
+    :params="[
+      prop('accent').enum('info', 'success', 'warning', 'danger').required().preset('info').widget(),
+      prop('variant').enum('primary', 'secondary').required().preset('primary').widget(),
+    ]"
+  >
+    <VtsTagList v-bind="properties" :tags="tags" />
+  </ComponentStory>
+</template>
+
+<script lang="ts" setup>
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { prop } from '@/libs/story/story-param'
+import VtsTagList from '@core/components/tag/VtsTagList.vue'
+
+const tags = ['tag1', 'tag2', 'tag3']
+</script>
diff --git a/@xen-orchestra/web-core/lib/components/card/VtsCardRowKeyValue.vue b/@xen-orchestra/web-core/lib/components/card/VtsCardRowKeyValue.vue
new file mode 100644
index 00000000000..53840bad75f
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/card/VtsCardRowKeyValue.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="vts-card-row-key-value typo p3-regular">
+    <div class="key">
+      <slot name="key" />
+    </div>
+    <div v-tooltip class="content text-ellipsis">
+      <slot name="value" />
+    </div>
+    <div v-if="slots.addons" class="addons">
+      <slot name="addons" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { vTooltip } from '@core/directives/tooltip.directive'
+
+const slots = defineSlots<{
+  key(): any
+  value(): any
+  addons?(): any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.vts-card-row-key-value {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+
+  .key {
+    min-width: 12rem;
+    overflow-wrap: break-word;
+    color: var(--color-neutral-txt-secondary);
+  }
+
+  .content {
+    color: var(--color-neutral-txt-primary);
+  }
+
+  .addons {
+    display: flex;
+    gap: 0.8rem;
+    margin-left: auto;
+    font-size: 1.6rem;
+  }
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/tag/VtsTagList.vue b/@xen-orchestra/web-core/lib/components/tag/VtsTagList.vue
new file mode 100644
index 00000000000..d96e79f7e42
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/tag/VtsTagList.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="vts-tag-list">
+    <UiTag v-for="tag in tags" :key="tag" :accent :variant size="small">{{ tag }}</UiTag>
+  </div>
+</template>
+
+<script setup lang="ts">
+import UiTag from '@core/components/ui/tag/UiTag.vue'
+
+type TagAccent = 'info' | 'neutral' | 'success' | 'warning' | 'danger' | 'muted'
+type TagVariant = 'primary' | 'secondary'
+
+defineProps<{
+  tags: string[]
+  accent: TagAccent
+  variant: TagVariant
+}>()
+</script>
+
+<style scoped lang="postcss">
+.vts-tag-list {
+  display: flex;
+  gap: 0.4rem;
+  flex-wrap: wrap;
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/ui/card-item/UiCardItem.vue b/@xen-orchestra/web-core/lib/components/ui/card-item/UiCardItem.vue
deleted file mode 100644
index 2fdd7435340..00000000000
--- a/@xen-orchestra/web-core/lib/components/ui/card-item/UiCardItem.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <div class="ui-card-item typo p3-regular">
-    <div class="title">
-      <slot />
-    </div>
-    <div class="content text-ellipsis">
-      <slot name="content" />
-    </div>
-    <div v-if="slots.actions" class="actions">
-      <slot name="actions" />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-const slots = defineSlots<{
-  default(): any
-  content(): any
-  actions?(): any
-}>()
-</script>
-
-<style lang="postcss" scoped>
-.ui-card-item {
-  display: flex;
-  align-items: center;
-  gap: 3rem;
-
-  .title {
-    min-width: 8rem;
-    overflow-wrap: break-word;
-    color: var(--color-neutral-txt-secondary);
-  }
-
-  .content {
-    display: flex;
-    gap: 0.8rem;
-    color: var(--color-neutral-txt-primary);
-
-    :last-child {
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      min-width: 0;
-    }
-  }
-
-  .actions {
-    display: flex;
-    gap: 0.8rem;
-    margin-left: auto;
-    font-size: 1.6rem;
-  }
-}
-</style>