feat(web-core): create card item component

vatesfr · Nov 27, 2024 · dacbe6a · dacbe6a
1 parent c81eabd
commit dacbe6a
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 22 deletions.
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/ui/card/ui-card-item.story.vue
@@ -1,17 +1,29 @@
 <template>
-  <ComponentStory v-slot="{ properties }" :params="[prop('horizontal').bool().widget()]">
+  <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 '),
+      setting('defaultSlotContent').preset('Uuid').widget(text()),
+      setting('contentSlotContent').preset('71df26a271df26a271df26a271df26a271df26a').widget(text()),
+    ]"
+  >
     <UiCard class="card">
       <UiCardItem v-bind="properties">
-        Uuid
+        {{ settings.defaultSlotContent }}
         <template #content>
-          <div>71df26a2-678a-49c7-8232-8ebcac4987ab</div>
+          <span>
+            {{ settings.contentSlotContent }}
+          </span>
         </template>
         <template #actions>
-          <UiButtonIcon :icon="faCopy" size="small" accent="info" />
+          <VtsIcon accent="warning" :icon="faCircle" :overlay-icon="faStar" />
+          <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
         </template>
       </UiCardItem>
       <UiCardItem v-bind="properties">
-        network Name
+        <span>Network</span>
         <template #content>
           <UiObjectLink route="`/vm/test/console`">
             <template #icon>
@@ -20,38 +32,49 @@
                 <VtsIcon accent="success" :icon="faCircle" :overlay-icon="faCheck" />
               </UiComplexIcon>
             </template>
-            Network Name
+            <span>Network Name</span>
           </UiObjectLink>
         </template>
         <template #actions>
-          <UiButtonIcon :icon="faCopy" size="small" accent="info" />
+          <UiButtonIcon :icon="faCopy" size="medium" accent="info" />
         </template>
       </UiCardItem>
       <UiCardItem v-bind="properties">
-        Status
+        <span>Status</span>
         <template #content>
           <VtsIcon accent="success" :icon="faCircle" :overlay-icon="faCheck" />
-          <div>Connected</div>
+          <span>Connected</span>
         </template>
         <template #actions>
-          <UiButtonIcon :icon="faCopy" size="small" accent="info" />
-          <UiButtonIcon :icon="faEllipsis" size="small" accent="info" />
+          <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>
+        <template #actions />
+      </UiCardItem>
     </UiCard>
   </ComponentStory>
 </template>
 
 <script lang="ts" setup>
 import ComponentStory from '@/components/component-story/ComponentStory.vue'
 import UiCard from '@/components/ui/UiCard.vue'
-import { prop } from '@/libs/story/story-param'
+import { setting, slot } from '@/libs/story/story-param'
+import { text } from '@/libs/story/story-widget'
 import VtsIcon from '@core/components/icon/VtsIcon.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 { faCheck, faCircle, faCopy, faEllipsis, faNetworkWired } from '@fortawesome/free-solid-svg-icons'
+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']
 </script>
 
 <style lang="postcss" scoped>

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
@@ -3,7 +3,7 @@
     <div class="title">
       <slot />
     </div>
-    <div class="content">
+    <div class="content text-ellipsis">
       <slot name="content" />
     </div>
     <div v-if="slots.actions" class="actions">
@@ -13,10 +13,6 @@
 </template>
 
 <script lang="ts" setup>
-defineProps<{
-  icon?: any
-}>()
-
 const slots = defineSlots<{
   default(): any
   content(): any
@@ -29,20 +25,31 @@ const slots = defineSlots<{
   display: flex;
   align-items: center;
   gap: 3rem;
-  width: 100%;
+
+  .title {
+    min-width: 8rem;
+    overflow-wrap: break-word;
+    color: var(--color-neutral-txt-secondary);
+  }
 
   .content {
     display: flex;
     gap: 0.8rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
+    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>