@xen-orchestra/web-core 0.39.1 → 0.41.0

package/lib/assets/css/_fonts.pcss

@@ -4,3 +4,10 @@
 @import '@fontsource/poppins/700.css';
 @import '@fontsource/poppins/900.css';
 @import '@fontsource/poppins/400-italic.css';
+
+@font-face {
+  font-family: 'Poppins Vates';
+  font-style: normal;
+  font-display: swap;
+  src: url(../fonts/poppins-vates.ttf) format('truetype');
+}

package/lib/components/card/VtsCardRowKeyValue.vue

@@ -1,10 +1,24 @@
 <template>
-  <div class="vts-card-row-key-value typo-body-regular-small">
+  <div
+    class="vts-card-row-key-value typo-body-regular-small"
+    :class="{ truncate: shouldTruncate, 'align-top': alignTop }"
+  >
     <div class="key">
       <slot name="key" />
     </div>
-    <div v-tooltip class="value text-ellipsis">
-      <slot name="value" />
+    <div class="value-container">
+      <div ref="truncatableValueElement" class="value" :class="{ truncated: shouldTruncate && !isExpanded }">
+        <slot name="value" />
+      </div>
+      <UiButtonIcon
+        v-if="shouldTruncate"
+        v-tooltip="isExpanded ? t('action:show-less') : t('action:show-more')"
+        :icon="isExpanded ? 'fa:chevron-up' : 'fa:chevron-down'"
+        class="show-more"
+        size="small"
+        accent="brand"
+        @click="toggleExpanded()"
+      />
     </div>
     <div v-if="slots.addons" class="addons">
       <slot name="addons" />
@@ -13,29 +27,121 @@
 </template>
 
 <script lang="ts" setup>
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
+import { calculateLineCount } from '@core/utils/line-height.util.ts'
+import { useStyleTag } from '@vueuse/core'
+import { useToggle } from '@vueuse/shared'
+import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { truncate } = defineProps<{
+  truncate?: number | boolean
+  alignTop?: boolean
+}>()
 
 const slots = defineSlots<{
   key(): any
   value(): any
   addons?(): any
 }>()
+
+const DEFAULT_MAX_LINES = 5
+
+const { t } = useI18n()
+
+const truncatableValueElementRef = useTemplateRef('truncatableValueElement')
+const lineCount = ref(0)
+
+const isTruncationEnabled = computed(() => truncate !== undefined && truncate !== false)
+
+const lineLimit = computed(() => {
+  if (typeof truncate === 'number') {
+    return truncate
+  }
+
+  return DEFAULT_MAX_LINES
+})
+
+const shouldTruncate = computed(() => isTruncationEnabled.value && lineCount.value > lineLimit.value)
+
+const [isExpanded, toggleExpanded] = useToggle(false)
+
+const calculateLines = async () => {
+  await nextTick()
+
+  if (!truncatableValueElementRef.value) {
+    return
+  }
+
+  lineCount.value = calculateLineCount(truncatableValueElementRef.value)
+}
+
+const style = computed(() => {
+  if (!(shouldTruncate.value || isExpanded.value)) {
+    return ''
+  }
+
+  return `.vts-card-row-key-value.truncate .value.truncated { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: ${lineLimit.value}; line-clamp: ${lineLimit.value}; overflow: hidden; text-overflow: ellipsis; }`
+})
+
+useStyleTag(style)
+
+onMounted(() => calculateLines())
+
+watch(
+  () => slots.value?.(),
+  () => calculateLines()
+)
 </script>
 
 <style lang="postcss" scoped>
 .vts-card-row-key-value {
   display: flex;
   align-items: center;
-  gap: 1.6rem;
+  column-gap: 1.6rem;
+
+  &.truncate {
+    display: grid;
+    row-gap: 0.4rem;
+    grid-template-columns: 1fr auto;
+
+    .key {
+      grid-column: 1 / -1;
+      grid-row: 1;
+    }
+
+    .addons {
+      grid-column: 2;
+      grid-row: 1;
+    }
+
+    .value-container {
+      grid-column: 1 / -1;
+    }
+  }
+
+  &.align-top:not(.truncate) {
+    align-items: flex-start;
+  }
 
   .key {
     overflow-wrap: break-word;
     color: var(--color-neutral-txt-secondary);
   }
 
-  .value {
-    max-width: 25rem;
-    color: var(--color-neutral-txt-primary);
+  .value-container {
+    display: flex;
+    align-items: end;
+    gap: 0.8rem;
+
+    .value {
+      color: var(--color-neutral-txt-primary);
+    }
+
+    .show-more {
+      flex-shrink: 0;
+    }
   }
 
   .value:empty::before {

package/lib/components/code-snippet/VtsCodeSnippet.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="vts-code-snippet">
+    <slot>
+      {{ content }}
+    </slot>
+    <div v-if="copy || slots.addons" class="addons">
+      <slot name="addons">
+        <VtsCopyButton v-if="copy && content" :value="String(content)" />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
+
+defineProps<{
+  content?: string | number
+  copy?: boolean
+}>()
+
+const slots = defineSlots<{
+  default?(): any
+  addons?(): any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.vts-code-snippet {
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 1.4rem;
+  color: var(--color-neutral-txt-primary);
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+
+  .addons {
+    margin-inline-start: auto;
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+  }
+}
+</style>

package/lib/components/label-value-list/VtsLabelValueList.vue

@@ -0,0 +1,46 @@
+<template>
+  <template v-for="(value, label) in fields" :key="label">
+    <VtsCardRowKeyValue v-if="isPrimitiveOrBooleanString(value)">
+      <template #key>
+        <span class="label">{{ label }}</span>
+      </template>
+      <template #value>
+        <template v-if="isBooleanLike(value)">
+          <VtsEnabledState :enabled="toBoolean(value)" />
+        </template>
+        <template v-else>
+          {{ value }}
+        </template>
+      </template>
+      <template v-if="!isBooleanLike(value)" #addons>
+        <VtsCopyButton :value="String(value)" />
+      </template>
+    </VtsCardRowKeyValue>
+    <VtsLabelValueList v-else :fields="value" />
+  </template>
+</template>
+
+<script lang="ts" setup>
+import VtsCardRowKeyValue from '@core/components/card/VtsCardRowKeyValue.vue'
+import VtsCopyButton from '@core/components/copy-button/VtsCopyButton.vue'
+import VtsEnabledState from '@core/components/enabled-state/VtsEnabledState.vue'
+
+defineProps<{
+  fields: Record<string, unknown> | unknown
+}>()
+
+const isBooleanString = (value: unknown): value is string => value === 'true' || value === 'false'
+
+const isBooleanLike = (value: unknown): boolean => typeof value === 'boolean' || isBooleanString(value)
+
+const toBoolean = (value: unknown): boolean => value === true || value === 'true'
+
+const isPrimitiveOrBooleanString = (value: unknown): boolean =>
+  ['number', 'string'].includes(typeof value) || isBooleanString(value)
+</script>
+
+<style lang="postcss" scoped>
+.label {
+  text-transform: capitalize;
+}
+</style>

package/lib/components/layout/VtsLayoutSidebar.vue

@@ -1,6 +1,11 @@
 <template>
   <div
-    :class="{ locked: sidebar.isLocked && !ui.isMobile, expanded: sidebar.isExpanded, mobile: ui.isMobile }"
+    :class="{
+      locked: sidebar.isLocked && !ui.isMobile,
+      expanded: sidebar.isExpanded,
+      mobile: ui.isMobile,
+      'border-right': !ui.isMobile,
+    }"
     class="vts-layout-sidebar"
   >
     <div v-if="!ui.isMobile" class="lock">
@@ -58,13 +63,16 @@ const ui = useUiStore()
   flex-direction: column;
   height: 100%;
   background-color: var(--color-neutral-background-secondary);
-  border-right: 0.1rem solid var(--color-neutral-border);
   width: v-bind('sidebar.cssWidth');
   z-index: 1010;
   transition:
     margin-left 0.25s,
     transform 0.25s;
 
+  &.border-right {
+    border-right: 0.1rem solid var(--color-neutral-border);
+  }
+
   &.locked {
     margin-left: v-bind('sidebar.cssOffset');
   }

package/lib/components/menu/MenuList.vue

@@ -1,7 +1,7 @@
 <!-- v1.0 -->
 <template>
   <slot :is-open="isOpen" :open="open" name="trigger" />
-  <Teleport :disabled="!shouldTeleport" to="body">
+  <Teleport :disabled="!hasTrigger" to="body">
     <ul
       v-if="!hasTrigger || isOpen"
       ref="menu"
@@ -50,9 +50,7 @@ let clearClickOutsideEvent: (() => void) | undefined
 
 const hasTrigger = useSlots().trigger !== undefined
 
-const shouldTeleport = hasTrigger && !inject(IK_MENU_TELEPORTED, false)
-
-if (shouldTeleport) {
+if (hasTrigger) {
   provide(IK_MENU_TELEPORTED, true)
 }
 

package/lib/components/modal/VtsActionModal.vue

@@ -0,0 +1,72 @@
+<template>
+  <VtsModal :accent icon="status:info-picto">
+    <template #title>
+      <span>{{ modalTexts.title }}</span>
+    </template>
+    <template #content>
+      <span>{{ modalTexts.message }}</span>
+    </template>
+    <template #buttons>
+      <VtsModalCancelButton>{{ t('action:go-back') }}</VtsModalCancelButton>
+      <VtsModalConfirmButton>
+        {{ modalTexts.action }}
+      </VtsModalConfirmButton>
+    </template>
+  </VtsModal>
+</template>
+
+<script lang="ts" setup>
+import VtsModal from '@core/components/modal/VtsModal.vue'
+import VtsModalCancelButton from '@core/components/modal/VtsModalCancelButton.vue'
+import VtsModalConfirmButton from '@core/components/modal/VtsModalConfirmButton.vue'
+import type { ModalAccent } from '@core/components/ui/modal/UiModal.vue'
+import { useMapper } from '@core/packages/mapper/use-mapper.ts'
+import { useI18n } from 'vue-i18n'
+
+type ObjectType = 'vm'
+type XoVmActions = 'reboot' | 'shutdown' | 'force-reboot' | 'force-shutdown'
+type ActionTexts = {
+  title: string
+  message: string
+  action: string
+}
+
+const { action, object } = defineProps<{
+  action: XoVmActions
+  accent: ModalAccent
+  object: ObjectType
+}>()
+
+const { t } = useI18n()
+
+const textMappingsByObject: Record<ObjectType, Record<XoVmActions, ActionTexts>> = {
+  vm: {
+    'force-reboot': {
+      title: t('modal:confirm-vm-force-reboot'),
+      message: t('modal:vm-force-reboot-message'),
+      action: t('modal:action:vm-force-reboot'),
+    },
+    'force-shutdown': {
+      title: t('modal:confirm-vm-force-shutdown'),
+      message: t('modal:vm-force-shutdown-message'),
+      action: t('modal:action:vm-force-shutdown'),
+    },
+    reboot: {
+      title: t('modal:confirm-vm-reboot'),
+      message: t('modal:vm-reboot-message'),
+      action: t('modal:action:vm-reboot'),
+    },
+    shutdown: {
+      title: t('modal:confirm-vm-shutdown'),
+      message: t('modal:vm-shutdown-message'),
+      action: t('modal:action:vm-shutdown'),
+    },
+  },
+}
+
+const modalTexts = useMapper(
+  () => action,
+  () => textMappingsByObject[object],
+  () => 'shutdown'
+)
+</script>

package/lib/components/modal/VtsModalList.vue

@@ -25,7 +25,7 @@ const modalStore = useModalStore()
   position: fixed;
   inset: 0;
   background-color: var(--color-opacity-primary);
-  z-index: 1010;
+  z-index: 1011;
 
   .modal-component:not(:last-child) {
     filter: brightness(0.8);

package/lib/components/object-icon/VtsObjectIcon.vue

@@ -4,14 +4,14 @@
 
 <script generic="TType extends ObjectType, TState extends ObjectState<TType>" lang="ts" setup>
 import VtsIcon, { type IconSize } from '@core/components/icon/VtsIcon.vue'
-import type { ObjectIconName, ObjectState, ObjectType } from '@core/icons'
+import { icon, objectIcon, type ObjectState, type ObjectType } from '@core/icons'
 import { computed } from 'vue'
 
 const { type, state } = defineProps<{
   type: TType
-  state: TState
+  state?: TState
   size: IconSize
 }>()
 
-const iconName = computed(() => `object:${type}:${state}` as ObjectIconName)
+const iconName = computed(() => (state ? objectIcon(type, state) : icon(`object:${type}`)))
 </script>

package/lib/components/tree/VtsTreeItem.vue

@@ -1,17 +1,19 @@
 <template>
-  <div class="vts-tree-item" @click="handleClick()">
+  <div class="vts-tree-item" :data-node-id="nodeId" @click="handleClick()">
     <slot />
     <slot v-if="expanded" name="sublist" />
   </div>
 </template>
 
 <script lang="ts" setup>
+import type { TreeNodeId } from '@core/packages/tree/types.ts'
 import { useSidebarStore } from '@core/stores/sidebar.store'
 import { useUiStore } from '@core/stores/ui.store'
 import { IK_TREE_ITEM_EXPANDED, IK_TREE_ITEM_HAS_CHILDREN } from '@core/utils/injection-keys.util'
 import { onBeforeMount, onBeforeUpdate, provide, ref, toRef, useSlots } from 'vue'
 
 const props = defineProps<{
+  nodeId?: TreeNodeId
   expanded?: boolean
 }>()
 

package/lib/components/ui/alert/UiAlert.vue

@@ -49,10 +49,10 @@ const slots = defineSlots<{
 const icon = useMapper<AlertAccent, IconName>(
   () => accent,
   {
-    info: 'legacy:status:info',
-    success: 'legacy:status:success',
-    warning: 'legacy:status:warning',
-    danger: 'legacy:status:danger',
+    info: 'status:info-circle',
+    success: 'status:success-circle',
+    warning: 'status:warning-circle',
+    danger: 'status:danger-circle',
   },
   'info'
 )

package/lib/components/ui/collapsible-list/UiCollapsibleList.vue

@@ -42,7 +42,7 @@ const hasMoreItems = computed(() => remainingItems.value > 0)
 const isExpanded = ref(false)
 
 const style = computed(
-  () => `.ui-collapsible-list:not(.expanded) > .container *:nth-child(n+${visibleItems + 1}) { display: none }`
+  () => `.ui-collapsible-list:not(.expanded) > .container > *:nth-child(n+${visibleItems + 1}) { display: none }`
 )
 
 useStyleTag(style)

package/lib/components/ui/info/UiInfo.vue

@@ -28,11 +28,11 @@ defineSlots<{
 const icon = useMapper<InfoAccent, IconName>(
   () => accent,
   {
-    info: 'legacy:status:info',
-    success: 'legacy:status:success',
-    warning: 'legacy:status:warning',
-    danger: 'legacy:status:danger',
-    muted: 'legacy:status:muted',
+    info: 'status:info-circle',
+    success: 'status:success-circle',
+    warning: 'status:warning-circle',
+    danger: 'status:danger-circle',
+    muted: 'status:disabled',
   },
   'muted'
 )

package/lib/components/ui/logo-text/UiLogoText.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="ui-logo-text">{{ text }}</div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  text: string
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.ui-logo-text {
+  font-family: 'Poppins Vates', sans-serif;
+  font-size: 2.4rem;
+  color: var(--color-neutral-txt-primary);
+  text-transform: uppercase;
+}
+</style>

package/lib/components/ui/subtitle/UiSubtitle.vue

@@ -0,0 +1,18 @@
+<!-- v1 -->
+<template>
+  <div class="ui-subtitle typo-h6">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+defineSlots<{
+  default(): any
+}>()
+</script>
+
+<style scoped lang="postcss">
+.ui-subtitle {
+  color: var(--color-neutral-txt-primary);
+}
+</style>

package/lib/components/ui/tag/UiTag.vue

@@ -5,7 +5,7 @@
     <slot name="icon">
       <VtsIcon :name="icon" size="medium" />
     </slot>
-    <span v-tooltip class="text-ellipsis">
+    <span>
       <slot />
     </span>
   </span>
@@ -13,7 +13,6 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import { vTooltip } from '@core/directives/tooltip.directive.ts'
 import type { IconName } from '@core/icons'
 import { toVariants } from '@core/utils/to-variants.util'
 
@@ -38,11 +37,11 @@ defineSlots<{
   justify-content: center;
   align-items: center;
   gap: 0.8rem;
-  white-space: nowrap;
+  white-space: normal;
+  word-break: break-word;
   padding: 0.2rem 0.8rem;
   border-radius: 0.4rem;
   vertical-align: middle;
-  min-width: 0;
 
   /* COLOR VARIANTS */
 

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

@@ -1,11 +1,11 @@
-<!-- v2 -->
+<!-- v5 -->
 <template>
   <div class="ui-title">
     <div class="typo-h4 label">
       <slot />
     </div>
-    <div v-if="slots.actions" class="actions">
-      <slot name="actions" />
+    <div v-if="slots.action" class="action">
+      <slot name="action" />
     </div>
   </div>
 </template>
@@ -13,7 +13,7 @@
 <script setup lang="ts">
 const slots = defineSlots<{
   default(): any
-  actions?(): any
+  action?(): any
 }>()
 </script>
 
@@ -29,7 +29,7 @@ const slots = defineSlots<{
     color: var(--color-brand-txt-base);
   }
 
-  .actions {
+  .action {
     margin-inline-start: auto;
     display: flex;
     align-items: center;

package/lib/components/ui/toaster/UiToaster.vue

@@ -45,10 +45,10 @@ const slots = defineSlots<{
 const icon = useMapper<ToasterAccent, IconName>(
   () => accent,
   {
-    info: 'legacy:status:info',
-    success: 'legacy:status:success',
-    warning: 'legacy:status:warning',
-    danger: 'legacy:status:danger',
+    info: 'status:info-circle',
+    success: 'status:success-circle',
+    warning: 'status:warning-circle',
+    danger: 'status:danger-circle',
   },
   'info'
 )

package/lib/i18n.ts

@@ -73,6 +73,14 @@ export const locales: Locales = {
     code: 'ja',
     name: '日本語',
   },
+  fi: {
+    code: 'fi',
+    name: 'Suomi',
+  },
+  pl: {
+    code: 'pl',
+    name: 'Polski',
+  },
 }
 
 export default createI18n({