@xen-orchestra/web-core 0.0.3 → 0.0.5

package/env.d.ts

@@ -1,2 +1 @@
-/// <reference types="novnc__novnc" />
 /// <reference types="vite/client" />

package/lib/assets/css/_typography.pcss

@@ -4,3 +4,4 @@
 @import 'typography/_line-height.pcss';
 @import 'typography/_letter-spacing.pcss';
 @import 'typography/_legacy.pcss';
+@import 'typography/_utils.pcss';

package/lib/assets/css/typography/_utils.pcss

@@ -0,0 +1,6 @@
+.text-ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-width: 0;
+}

package/lib/components/LegendTitle.vue

@@ -2,18 +2,24 @@
 <template>
   <div class="legend-title typo c3-semi-bold">
     <slot />
-    <UiIcon v-tooltip="iconTooltip ?? false" :icon color="info" class="tooltip-icon" />
+    <UiIcon v-tooltip="iconTooltip ?? false" :icon color="info" />
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import UiIcon from '@core/components/icon/UiIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 
-defineProps<{
+export type LegendTitleProps = {
   iconTooltip?: string
   icon?: IconDefinition
+}
+
+defineProps<LegendTitleProps>()
+
+defineSlots<{
+  default(): void
 }>()
 </script>
 
@@ -24,8 +30,4 @@ defineProps<{
   gap: 0.8rem;
   align-items: center;
 }
-
-.tooltip-icon {
-  font-size: 1.2rem;
-}
 </style>

package/lib/components/UiTag.vue

@@ -4,7 +4,7 @@
     <slot name="icon">
       <UiIcon :icon fixed-width />
     </slot>
-    <span class="content"><slot /></span>
+    <span class="text-ellipsis"><slot /></span>
   </span>
 </template>
 
@@ -78,7 +78,7 @@ withDefaults(
 
 /* IMPLEMENTATION */
 .ui-tag {
-  display: inline-flex;
+  display: flex;
   justify-content: center;
   align-items: center;
   gap: 0.8rem;
@@ -88,10 +88,6 @@ withDefaults(
   padding: 0.2rem 0.8rem;
   border-radius: 0.4rem;
   vertical-align: middle;
-
-  .content {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+  min-width: 0;
 }
 </style>

package/lib/components/backdrop/Backdrop.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="vts-backdrop" />
+</template>
+
+<style lang="postcss" scoped>
+.vts-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+}
+</style>

package/lib/components/cell-object/CellObject.vue

@@ -0,0 +1,54 @@
+<!-- v1.0 -->
+<template>
+  <td class="cell-object">
+    <div class="data">
+      <slot />
+      <template v-if="id !== undefined">
+        <span v-tooltip class="id typo p4-regular-italic text-ellipsis">
+          {{ id }}
+        </span>
+        <UiButton
+          v-if="isSupported && copiableId"
+          :left-icon="faCopy"
+          level="secondary"
+          size="extra-small"
+          :color="copied ? 'success' : 'info'"
+          @click="copy(id)"
+        >
+          {{ copied ? $t('core.copied') : $t('core.copy-id') }}
+        </UiButton>
+      </template>
+    </div>
+  </td>
+</template>
+
+<script lang="ts" setup>
+import UiButton from '@core/components/button/UiButton.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import { faCopy } from '@fortawesome/free-solid-svg-icons'
+import { useClipboard } from '@vueuse/core'
+
+defineProps<{
+  id?: string
+  copiableId?: boolean
+}>()
+
+const { isSupported, copy, copied } = useClipboard()
+</script>
+
+<style lang="postcss" scoped>
+.cell-object {
+  padding: 0.8rem;
+  border: 0.1rem solid var(--color-grey-500);
+}
+
+.data {
+  display: flex;
+  gap: 1.6rem;
+  align-items: center;
+}
+
+.id {
+  color: var(--color-grey-300);
+}
+</style>

package/lib/components/cell-text/CellText.vue

@@ -0,0 +1,40 @@
+<!-- v1.0 -->
+<template>
+  <td class="cell-text">
+    <div class="data typo p2-regular">
+      <span v-tooltip class="text-ellipsis">
+        <slot />
+      </span>
+      <span v-if="slots.secondary" class="info typo p4-regular">
+        <slot name="secondary" />
+      </span>
+    </div>
+  </td>
+</template>
+
+<script lang="ts" setup>
+import { vTooltip } from '@core/directives/tooltip.directive'
+
+const slots = defineSlots<{
+  default: () => any
+  secondary?: () => any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.cell-text {
+  padding: 0.8rem;
+  border: 0.1rem solid var(--color-grey-500);
+  color: var(--color-grey-000);
+}
+
+.data {
+  display: flex;
+  gap: 1.6rem;
+  align-items: center;
+}
+
+.info {
+  color: var(--color-grey-300);
+}
+</style>

package/lib/components/chip/UiChip.vue

@@ -2,7 +2,7 @@
 <template>
   <span :class="[color, { disabled }]" class="ui-chip typo p3-regular" @click="emit('edit')">
     <ChipIcon :color :disabled :icon />
-    <span class="content">
+    <span class="content text-ellipsis">
       <slot />
     </span>
     <ChipRemoveIcon v-if="!disabled" :color @click.stop="emit('remove')" />
@@ -113,7 +113,7 @@ const emit = defineEmits<{
 
 /* IMPLEMENTATION */
 .ui-chip {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: 0.8rem;
   padding: 0.4rem 0.8rem;
@@ -124,6 +124,7 @@ const emit = defineEmits<{
   min-height: 2.4rem;
   vertical-align: middle;
   white-space: nowrap;
+  min-width: 0;
 
   &.disabled {
     pointer-events: none;
@@ -131,8 +132,6 @@ const emit = defineEmits<{
 
   .content {
     line-height: 1.6rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 }
 </style>

package/lib/components/console/RemoteConsole.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import { useUiStore } from '@core/stores/ui.store'
-import VncClient from '@novnc/novnc/core/rfb'
+import VncClient from '@novnc/novnc/lib/rfb'
 import { promiseTimeout } from '@vueuse/shared'
 import { fibonacci } from 'iterable-backoff'
 import { onBeforeUnmount, ref, watchEffect } from 'vue'

package/lib/components/divider/Divider.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="vts-divider" :class="type" />
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  type: 'stretch' | 'tab'
+}>()
+</script>
+
+<style scoped lang="postcss">
+.vts-divider {
+  border-left: 0.1rem solid var(--color-grey-500);
+  border-bottom: 0.1rem solid var(--color-grey-500);
+
+  &.tab {
+    height: 2.4rem;
+    align-self: center;
+  }
+
+  &.stretch {
+    align-self: stretch;
+  }
+}
+</style>

package/lib/components/{DonutChart.vue → donut-chart/DonutChart.vue}

@@ -17,51 +17,47 @@
   </svg>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 import UiIcon from '@core/components/icon/UiIcon.vue'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { computed } from 'vue'
 
-type Segment = {
+export type DonutSegmentColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'disabled'
+
+export type DonutSegment = {
   value: number
-  color: 'success' | 'warning' | 'error' | 'unknown'
+  color: DonutSegmentColor
 }
 
-type ComputedSegment = {
-  color: 'success' | 'warning' | 'error' | 'unknown'
-  percent: number
-  offset: number
+export type DonutChartProps = {
+  segments: DonutSegment[]
+  icon?: IconDefinition
 }
 
-const props = defineProps<{
-  segments: Segment[]
-  maxValue?: number
-  icon?: IconDefinition
-}>()
+const props = defineProps<DonutChartProps>()
 
 const circumference = Math.PI * 80
 
-const totalValue = computed(() => {
-  const sumOfValues = props.segments.reduce((acc, segment) => acc + segment.value, 0)
-  return Math.max(props.maxValue ?? 0, sumOfValues)
-})
+const totalValue = computed(() => props.segments.reduce((total, segment) => total + segment.value, 0))
 
-const computedSegments = computed<ComputedSegment[]>(() => {
+const computedSegments = computed(() => {
   let nextOffset = circumference / 4
+
   return props.segments.map(segment => {
+    const offset = nextOffset
     const percent = (segment.value / totalValue.value) * circumference
-    const currentSegment = {
+    nextOffset -= percent
+
+    return {
       color: segment.color,
       percent,
-      offset: nextOffset,
+      offset,
     }
-    nextOffset -= percent
-    return currentSegment
   })
 })
 </script>
 
-<style scoped lang="postcss">
+<style lang="postcss" scoped>
 .donut-chart {
   width: 100px;
   height: 100px;
@@ -73,6 +69,14 @@ const computedSegments = computed<ComputedSegment[]>(() => {
   fill: transparent;
   --stroke-color: var(--color-grey-100);
 
+  &.primary {
+    --stroke-color: var(--color-purple-base);
+  }
+
+  &.secondary {
+    --stroke-color: var(--color-grey-100);
+  }
+
   &.success {
     --stroke-color: var(--color-green-base);
   }
@@ -81,11 +85,11 @@ const computedSegments = computed<ComputedSegment[]>(() => {
     --stroke-color: var(--color-orange-base);
   }
 
-  &.error {
+  &.danger {
     --stroke-color: var(--color-red-base);
   }
 
-  &.unknown {
+  &.disabled {
     --stroke-color: var(--color-grey-400);
   }
 }

package/lib/components/donut-chart-with-legend/DonutChartWithLegend.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="donut-chart-with-legend">
+    <DonutChart :icon :segments />
+    <LegendGroup :items="segments" :title />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import DonutChart, { type DonutChartProps } from '@core/components/donut-chart/DonutChart.vue'
+import LegendGroup, { type LegendGroupProps } from '@core/components/legend/LegendGroup.vue'
+
+export type DonutChartWithLegendProps = {
+  segments: (DonutChartProps['segments'][number] & LegendGroupProps['items'][number])[]
+  title?: LegendGroupProps['title']
+  icon?: DonutChartProps['icon']
+}
+
+defineProps<DonutChartWithLegendProps>()
+</script>
+
+<style lang="postcss" scoped>
+.donut-chart-with-legend {
+  display: flex;
+  align-items: center;
+  gap: 3.2rem;
+}
+</style>

package/lib/components/dropdown/DropdownItem.vue

@@ -4,7 +4,7 @@
     <slot name="icon">
       <UiIcon :icon />
     </slot>
-    <div class="label p2 medium">
+    <div class="label p2 medium text-ellipsis">
       <slot />
     </div>
     <div v-if="info" class="info-text p3 italic">{{ info }}</div>
@@ -181,9 +181,6 @@ const checkbox = inject(
 
 .label {
   margin-right: auto;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .info-text {

package/lib/components/head-bar/HeadBar.vue

@@ -0,0 +1,78 @@
+<!-- v1.0 -->
+<template>
+  <div class="head-bar">
+    <div class="label-wrapper">
+      <span v-if="slots.icon || icon" class="icon">
+        <slot name="icon">
+          <UiIcon :icon />
+        </slot>
+      </span>
+      <h4 v-tooltip class="typo h4-medium label text-ellipsis">
+        <slot />
+      </h4>
+    </div>
+    <div v-if="slots.status" class="status typo c3-regular">
+      <slot name="status" />
+    </div>
+    <div v-if="slots.actions" class="actions">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UiIcon from '@core/components/icon/UiIcon.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+
+defineProps<{
+  icon?: IconDefinition
+}>()
+
+const slots = defineSlots<{
+  default: () => any
+  icon?: () => any
+  status?: () => any
+  actions?: () => any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.head-bar {
+  padding: 0.8rem 1.6rem;
+  display: flex;
+  gap: 4.8rem;
+  align-items: center;
+  border-bottom: 0.1rem solid var(--color-grey-500);
+  background-color: var(--background-color-primary);
+}
+
+.label-wrapper {
+  display: flex;
+  gap: 1.6rem;
+  align-items: center;
+  min-width: 0;
+}
+
+.label {
+  color: var(--color-grey-100);
+}
+
+.icon {
+  font-size: 2.4rem;
+}
+
+.status {
+  color: var(--color-grey-200);
+  display: flex;
+  align-items: center;
+  gap: 1.6rem;
+}
+
+.actions {
+  margin-inline-start: auto;
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+</style>

package/lib/components/input/UiInput.vue

@@ -0,0 +1,133 @@
+<!-- WIP -->
+<template>
+  <div class="ui-input">
+    <UiIcon :icon class="before" />
+    <input :id v-model.trim="modelValue" class="typo p1-regular input" type="search" v-bind="$attrs" />
+    <UiIcon v-if="!$attrs.disabled && modelValue" :icon="faXmark" class="after" color="info" @click="modelValue = ''" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UiIcon from '@core/components/icon/UiIcon.vue'
+import { uniqueId } from '@core/utils/unique-id.util'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { faXmark } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps<{
+  icon?: IconDefinition
+}>()
+
+const modelValue = defineModel<string>({ required: true })
+
+const id = computed(() => uniqueId('input-'))
+</script>
+
+<style lang="postcss" scoped>
+/* COLOR VARIANTS */
+.input {
+  & {
+    --border-color: var(--color-grey-500);
+    --background-color: var(--background-color-primary);
+  }
+
+  &:is(:hover, :focus-visible) {
+    --border-color: var(--color-purple-d20);
+    --background-color: var(--background-color-primary);
+  }
+
+  &:focus {
+    --border-color: var(--color-purple-base);
+    --background-color: var(--background-color-primary);
+  }
+
+  &:active {
+    --border-color: var(--color-purple-d40);
+    --background-color: var(--background-color-primary);
+  }
+
+  &:disabled {
+    --border-color: var(--color-grey-500);
+    --background-color: var(--background-color-secondary);
+  }
+}
+
+/* BORDER VARIANTS */
+.input {
+  --border-width: 0.1rem;
+
+  &:is(:hover, :focus-visible) {
+    --border-width: 0.1rem;
+  }
+
+  &:focus {
+    --border-width: 0.2rem;
+  }
+
+  &:active {
+    --border-width: 0.1rem;
+  }
+
+  &:disabled {
+    --border-width: 0.1rem;
+  }
+}
+
+/* IMPLEMENTATION */
+.ui-input {
+  position: relative;
+
+  .before + .input {
+    padding-inline-start: 4.8rem;
+  }
+}
+
+.input {
+  border: var(--border-width) solid var(--border-color);
+  border-radius: 0.8rem;
+  outline: none;
+  width: 100%;
+  height: 4rem;
+  padding: 0.8rem 1.6rem;
+  color: var(--color-grey-000);
+  background-color: var(--background-color);
+
+  &:has(+ .after) {
+    padding-inline-end: 4.8rem;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &::placeholder {
+    color: var(--color-grey-300);
+  }
+
+  &[type='search']::-webkit-search-cancel-button {
+    display: none;
+  }
+}
+
+.before,
+.after {
+  position: absolute;
+  inset-block: 1.2rem;
+}
+
+.before {
+  color: var(--color-grey-400);
+  inset-inline-start: 1.6rem;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.after {
+  inset-inline-end: 1.6rem;
+  cursor: pointer;
+}
+</style>

package/lib/components/legend/LegendGroup.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="legend-group">
+    <LegendTitle v-if="title" :icon="title.icon" :icon-tooltip="title.iconTooltip">
+      {{ title.label }}
+    </LegendTitle>
+    <LegendList class="list">
+      <LegendItem
+        v-for="item in items"
+        :key="item.label"
+        :color="item.color"
+        :tooltip="item.tooltip"
+        :unit="item.unit"
+        :value="item.value"
+      >
+        {{ item.label }}
+      </LegendItem>
+    </LegendList>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import LegendItem, { type LegendItemProps } from '@core/components/legend/LegendItem.vue'
+import LegendList from '@core/components/legend/LegendList.vue'
+import LegendTitle, { type LegendTitleProps } from '@core/components/LegendTitle.vue'
+
+export type LegendGroupProps = {
+  items: (LegendItemProps & { label: string })[]
+  title?: LegendTitleProps & { label: string }
+}
+
+defineProps<LegendGroupProps>()
+</script>
+
+<style lang="postcss" scoped>
+.legend-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+
+.list {
+  padding-left: 1.6rem;
+}
+</style>