feat(web-core):feedback

@xen-orchestra/lite/src/stories/web-core/ui/card/ui-card-item.story.vue → @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>

@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>

@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>

@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>