@xen-orchestra/web-core 0.2.0 → 0.4.0

package/lib/components/input/VtsLabel.vue

@@ -0,0 +1,76 @@
+<!-- WIP -->
+<template>
+  <div :class="accent" class="vts-label">
+    <VtsIcon accent="current" :icon class="left-icon" />
+    <span :class="{ required }" class="typo c2-semi-bold label"><slot /></span>
+    <!-- @TODO: Replace it by the VtsLink component when available -->
+    <a v-if="href" :href class="link">
+      <span class="typo p3-regular-underline">{{ $t('learn-more') }}</span>
+      <VtsIcon accent="current" :icon="faUpRightFromSquare" class="link-icon" />
+    </a>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
+
+defineProps<{
+  accent: 'brand' | 'warning' | 'danger'
+  icon?: IconDefinition
+  required?: boolean
+  href?: string
+}>()
+</script>
+
+<style lang="postcss" scoped>
+/**
+ACCENT
+--vts-label--color
+*/
+.vts-label {
+  &.brand {
+    --vts-label--color: var(--color-neutral-txt-primary);
+  }
+
+  &.warning {
+    --vts-label--color: var(--color-warning-txt-base);
+  }
+
+  &.danger {
+    --vts-label--color: var(--color-danger-txt-base);
+  }
+}
+
+/* IMPLEMENTATION */
+.vts-label {
+  display: flex;
+  align-items: center;
+
+  .left-icon {
+    margin-right: 0.8rem;
+  }
+
+  .label {
+    color: var(--vts-label--color);
+
+    &.required::after {
+      content: '*';
+      margin-left: 0.4rem;
+      color: var(--color-normal-txt-base);
+    }
+  }
+
+  .link {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    margin-left: auto;
+  }
+
+  .link-icon {
+    font-size: 0.8rem;
+  }
+}
+</style>

package/lib/components/stacked-bar/StackedBarSegment.vue

@@ -1,5 +1,6 @@
 <template>
   <div
+    v-if="percentage > 0"
     v-tooltip="{ selector: '.text-ellipsis' }"
     :class="color"
     :style="{ width: percentage + '%' }"

package/lib/components/ui/actions-title/UiActionsTitle.vue

@@ -0,0 +1,18 @@
+<!-- v2 -->
+<template>
+  <span class="actions-title typo p2-regular">
+    <slot />
+  </span>
+</template>
+
+<script lang="ts" setup>
+defineSlots<{
+  default(): any
+}>()
+</script>
+
+<style scoped lang="postcss">
+.actions-title {
+  color: var(--color-neutral-txt-secondary);
+}
+</style>

package/lib/components/ui/title/UiTitle.vue

@@ -0,0 +1,39 @@
+<!-- v2 -->
+<template>
+  <div class="ui-title">
+    <div class="typo h4-medium label">
+      <slot />
+    </div>
+    <div v-if="slots.actions" class="actions">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const slots = defineSlots<{
+  default(): any
+  actions?(): any
+}>()
+</script>
+
+<style scoped lang="postcss">
+.ui-title {
+  display: flex;
+  align-items: center;
+  gap: 2.4rem;
+  padding-block-end: 0.4rem;
+  border-bottom: 0.1rem solid var(--color-normal-txt-base);
+
+  .label {
+    color: var(--color-normal-txt-base);
+  }
+
+  .actions {
+    margin-inline-start: auto;
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+  }
+}
+</style>

package/lib/locales/de.json

@@ -20,6 +20,7 @@
   "dashboard": "Dashboard",
   "documentation-name": "{name} Dokumentation",
   "hosts": "Hosts",
+  "learn-more": "Mehr erfahren",
   "loading-in-progress": "Ladevorgang läuft…",
   "log-out": "Abmelden",
   "master": "Primärer Host",

package/lib/locales/en.json

@@ -42,6 +42,7 @@
   "dashboard": "Dashboard",
   "documentation-name": "{name} documentation",
   "hosts": "Hosts",
+  "learn-more": "Learn more",
   "loading-in-progress": "Loading in progress…",
   "log-out": "Log out",
   "master": "Primary host",
@@ -49,6 +50,7 @@
   "network": "Network",
   "no-data": "No data",
   "object-not-found": "Object {id} can't be found…",
+  "other": "Other",
   "patches": "Patches",
   "power-on-for-console": "Power on your VM to access its console",
   "running-vm": "Running VM | Running VMs",
@@ -68,5 +70,6 @@
   "tasks.quick-view.in-progress": "In progress",
 
   "total": "Total",
+  "total-cpus": "Total CPUs",
   "vms": "VMs"
 }

package/lib/locales/fa.json

@@ -33,6 +33,7 @@
 
   "dashboard": "داشبورد",
   "documentation-name": "اسناد {name}",
+  "learn-more": "بیشتر بدانید",
   "loading-in-progress": "بارگیری در حال انجام است…",
   "log-out": "خروج",
   "master": "میزبان اصلی",

package/lib/locales/fr.json

@@ -42,6 +42,7 @@
   "dashboard": "Tableau de bord",
   "documentation-name": "Documentation {name}",
   "hosts": "Hôtes",
+  "learn-more": "En savoir plus",
   "loading-in-progress": "Chargement en cours…",
   "log-out": "Se déconnecter",
   "master": "Hôte primaire",
@@ -49,6 +50,7 @@
   "network": "Réseau",
   "no-data": "Aucune donnée",
   "object-not-found": "L'objet {id} est introuvable…",
+  "other": "Autre",
   "patches": "Patches",
   "power-on-for-console": "Allumez votre VM pour accéder à sa console",
   "running-vm": "VM en cours d'exécution | VMs en cours d'exécution",
@@ -68,5 +70,6 @@
   "tasks.quick-view.in-progress": "En cours",
 
   "total": "Total",
+  "total-cpus": "Total CPUs",
   "vms": "VMs"
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "private": false,
   "exports": {
     "./*": {