@xen-orchestra/web-core 0.7.0 → 0.9.0

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

@@ -6,6 +6,7 @@
   &.p3-regular-underline,
   &.p4-regular-underline {
     text-decoration: underline;
+    text-underline-offset: 0.2rem;
   }
 
   /* ITALIC */

package/lib/components/layout/VtsLayoutSidebar.vue

@@ -74,7 +74,7 @@ const ui = useUiStore()
 
   .lock {
     text-align: right;
-    padding: 0.8rem;
+    padding: 0.8rem 0.8rem 0;
   }
 
   .content {

package/lib/components/state-hero/VtsErrorNoDataHero.vue

@@ -0,0 +1,11 @@
+<template>
+  <VtsStateHero class="vts-error-hero" image="error" :type>{{ $t('error-no-data') }}</VtsStateHero>
+</template>
+
+<script lang="ts" setup>
+import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+
+defineProps<{
+  type: StateHeroType
+}>()
+</script>

package/lib/components/state-hero/VtsNoSelectionHero.vue

@@ -0,0 +1,13 @@
+<template>
+  <VtsStateHero :type class="vts-no-selection-hero" image="no-selection">
+    {{ $t('select-to-see-details') }}
+  </VtsStateHero>
+</template>
+
+<script lang="ts" setup>
+import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+
+defineProps<{
+  type: StateHeroType
+}>()
+</script>

package/lib/components/state-hero/VtsObjectNotFoundHero.vue

@@ -1,13 +1,14 @@
 <template>
-  <VtsStateHero class="vts-object-not-found-hero" image="no-result" type="page">
+  <VtsStateHero class="vts-object-not-found-hero" image="no-result" :type>
     {{ $t('object-not-found', { id }) }}
   </VtsStateHero>
 </template>
 
 <script lang="ts" setup>
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
+import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
 
 defineProps<{
   id: string
+  type: StateHeroType
 }>()
 </script>

package/lib/components/state-hero/VtsStateHero.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="type" class="vts-state-hero">
+  <div :class="[type, { error }]" class="vts-state-hero">
     <UiLoader v-if="busy" class="loader" />
     <img v-else-if="imageSrc" :src="imageSrc" alt="" class="image" />
     <p v-if="slots.default" :class="typoClass" class="text">
@@ -12,7 +12,7 @@
 import UiLoader from '@core/components/ui/loader/UiLoader.vue'
 import { computed } from 'vue'
 
-export type StateHeroType = 'page' | 'card' | 'panel'
+export type StateHeroType = 'page' | 'card' | 'panel' | 'table'
 
 const props = defineProps<{
   type: StateHeroType
@@ -25,6 +25,7 @@ const slots = defineSlots<{
 }>()
 
 const typoClass = computed(() => (props.type === 'page' ? 'typo h2-black' : 'typo h4-medium'))
+const error = computed(() => !props.busy && props.image === 'error')
 
 const imageSrc = computed(() => {
   if (!props.image) {
@@ -43,6 +44,14 @@ const imageSrc = computed(() => {
   align-items: center;
   justify-content: center;
 
+  &.error {
+    background-color: var(--color-danger-background-selected);
+
+    .text {
+      color: var(--color-danger-txt-base);
+    }
+  }
+
   .loader,
   .text {
     color: var(--color-info-txt-base);
@@ -113,5 +122,24 @@ const imageSrc = computed(() => {
       width: 80%;
     }
   }
+
+  &.table {
+    padding: 4rem;
+    gap: 2.4rem;
+
+    .text {
+      order: 3;
+    }
+
+    .image {
+      order: 2;
+      max-height: 20rem;
+    }
+
+    .loader {
+      order: 1;
+      font-size: 10rem;
+    }
+  }
 }
 </style>

package/lib/components/ui/donut-chart/UiDonutChart.vue

@@ -1,7 +1,7 @@
 <!-- v3 -->
 <template>
   <svg class="ui-donut-chart" viewBox="0 0 100 100">
-    <circle class="segment" cx="50" cy="50" r="40" />
+    <circle class="segment accent--muted" cx="50" cy="50" r="40" />
     <circle
       v-for="(segment, index) in computedSegments"
       :key="index"
@@ -44,8 +44,8 @@ const computedSegments = computed(() => {
   let nextOffset = circumference / 4
 
   return props.segments.map(segment => {
+    const percent = totalValue.value === 0 ? 0 : (segment.value / totalValue.value) * circumference
     const offset = nextOffset
-    const percent = (segment.value / totalValue.value) * circumference
     nextOffset -= percent
 
     return {

package/lib/components/ui/dropdown-button/UiDropdownButton.vue

@@ -0,0 +1,81 @@
+<!-- v3 -->
+<template>
+  <button type="button" class="ui-dropdown-item" :class="{ selected }" :disabled="isDisabled">
+    <VtsIcon :icon accent="current" class="left-icon" fixed-width />
+    <span class="typo p1-regular label">
+      <slot />
+    </span>
+    <VtsIcon :icon="faAngleDown" accent="current" class="right-icon" fixed-width />
+  </button>
+</template>
+
+<script lang="ts" setup>
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import { useContext } from '@core/composables/context.composable'
+import { DisabledContext } from '@core/context'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { faAngleDown } from '@fortawesome/free-solid-svg-icons'
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean
+    selected?: boolean
+    icon?: IconDefinition
+  }>(),
+  { disabled: undefined }
+)
+
+const isDisabled = useContext(DisabledContext, () => props.disabled)
+</script>
+
+<style scoped lang="postcss">
+.ui-dropdown-item {
+  display: inline-flex;
+  align-items: center;
+  padding-block: 0.4rem;
+  padding-inline: 1.6rem;
+  gap: 0.8rem;
+  background: var(--color-neutral-background-primary);
+  border: 0.1rem solid var(--color-info-txt-base);
+  border-radius: 9rem;
+  cursor: pointer;
+  position: relative;
+  color: var(--color-info-txt-base);
+
+  &:hover {
+    border-color: var(--color-info-txt-hover);
+    background-color: var(--color-info-background-hover);
+    color: var(--color-info-txt-hover);
+  }
+
+  &:active {
+    border-color: var(--color-info-txt-active);
+    background-color: var(--color-info-background-active);
+    color: var(--color-info-txt-active);
+  }
+
+  &.selected:not(:disabled) {
+    background-color: var(--color-info-background-selected);
+    outline: 0.1rem solid var(--color-info-txt-base);
+  }
+
+  &:focus-visible {
+    outline: none;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: -0.5rem;
+      border: 0.2rem solid var(--color-info-txt-base);
+      border-radius: 0.4rem;
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    border-color: var(--color-neutral-txt-secondary);
+    background-color: var(--color-neutral-background-disabled);
+    color: var(--color-neutral-txt-secondary);
+  }
+}
+</style>

package/lib/components/ui/input/UiInput.vue

@@ -1,141 +1,170 @@
-<!-- WIP -->
+<!-- v5 -->
 <template>
-  <div class="ui-input">
-    <VtsIcon :icon accent="current" class="before" />
-    <input :id v-model.trim="modelValue" class="typo p1-regular input" type="search" v-bind="attrs" />
-    <VtsIcon
-      v-if="!attrs.disabled && modelValue"
-      :icon="faXmark"
-      class="after"
-      accent="info"
-      @click="modelValue = ''"
-    />
+  <div class="ui-input" :class="toVariants({ accent })">
+    <UiLabel v-if="slots.default || label" :accent="labelAccent" :required :icon="labelIcon" :href :for="id">
+      <slot>{{ label }}</slot>
+    </UiLabel>
+    <div>
+      <VtsIcon :icon accent="current" class="before" />
+      <input :id v-model.trim="modelValue" class="typo p1-regular input text-ellipsis" :type :disabled v-bind="attrs" />
+      <VtsIcon
+        v-if="!attrs.disabled && modelValue && clearable"
+        :icon="faXmark"
+        class="after"
+        accent="info"
+        @click="modelValue = ''"
+      />
+    </div>
+    <UiInfo v-if="slots.info || info" :accent>
+      <slot name="info">{{ info }}</slot>
+    </UiInfo>
   </div>
 </template>
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import { uniqueId } from '@core/utils/unique-id.util'
+import UiInfo from '@core/components/ui/info/UiInfo.vue'
+import UiLabel from '@core/components/ui/label/UiLabel.vue'
+import { toVariants } from '@core/utils/to-variants.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faXmark } from '@fortawesome/free-solid-svg-icons'
-import { computed, useAttrs } from 'vue'
+import { computed, useAttrs, useId } from 'vue'
+
+type InputAccent = 'info' | 'warning' | 'danger'
+type InputType = 'text' | 'number' | 'password' | 'search'
 
 defineOptions({
   inheritAttrs: false,
 })
 
-defineProps<{
+const { accent, id = useId() } = defineProps<{
+  accent: InputAccent
+  label?: string
+  info?: string
+  id?: string
+  disabled?: boolean
+  clearable?: boolean
+  href?: string
+  required?: boolean
+  labelIcon?: IconDefinition
   icon?: IconDefinition
+  type?: InputType
 }>()
 
-const modelValue = defineModel<string>({ required: true })
+const modelValue = defineModel<string | number>({ required: true })
+
+const slots = defineSlots<{
+  default?(): any
+  info?(): any
+}>()
 
 const attrs = useAttrs()
 
-const id = computed(() => uniqueId('input-'))
+const labelAccent = computed(() => (accent === 'info' ? 'neutral' : accent))
 </script>
 
 <style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.input {
-  & {
-    --border-color: var(--color-neutral-border);
-    --background-color: var(--color-neutral-background-primary);
+/* IMPLEMENTATION */
+.ui-input {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+
+  .input {
+    border-radius: 0.4rem;
+    border-width: 0.1rem;
+    border-style: solid;
+    background-color: var(--color-neutral-background-primary);
+    color: var(--color-neutral-txt-primary);
+    height: 4rem;
+    outline: none;
+    width: 100%;
+    padding-block: 0.8rem;
+    padding-inline: 1.6rem;
+
+    &::placeholder {
+      color: var(--color-neutral-txt-secondary);
+    }
+
+    &:focus {
+      border-width: 0.2rem;
+    }
+
+    &:has(+ .after) {
+      padding-inline-end: 4.8rem;
+    }
   }
 
-  &:is(:hover, :focus-visible) {
-    --border-color: var(--color-info-item-hover);
-    --background-color: var(--color-neutral-background-primary);
-  }
+  /* VARIANT */
 
-  &:focus {
-    --border-color: var(--color-info-item-base);
-    --background-color: var(--color-neutral-background-primary);
-  }
+  &.accent--info {
+    .input {
+      border-color: var(--color-neutral-border);
 
-  &:active {
-    --border-color: var(--color-info-item-active);
-    --background-color: var(--color-neutral-background-primary);
-  }
+      &:hover {
+        border-color: var(--color-info-item-hover);
+      }
 
-  &:disabled {
-    --border-color: var(--color-neutral-border);
-    --background-color: var(--color-neutral-background-disabled);
-  }
-}
+      &:focus {
+        border-color: var(--color-info-item-base);
+      }
 
-/* BORDER VARIANTS */
-.input {
-  --border-width: 0.1rem;
+      &:active {
+        border-color: var(--color-info-item-active);
+      }
 
-  &:is(:hover, :focus-visible) {
-    --border-width: 0.1rem;
+      &:disabled {
+        border-color: var(--color-neutral-border);
+        background-color: var(--color-neutral-background-disabled);
+      }
+    }
   }
 
-  &:focus {
-    --border-width: 0.2rem;
-  }
+  &.accent--warning {
+    .input {
+      border-color: var(--color-warning-item-base);
 
-  &:active {
-    --border-width: 0.1rem;
+      &:disabled {
+        border-color: var(--color-neutral-border);
+        background-color: var(--color-neutral-background-disabled);
+      }
+    }
   }
 
-  &:disabled {
-    --border-width: 0.1rem;
+  &.accent--danger {
+    .input {
+      border-color: var(--color-danger-item-base);
+
+      &:disabled {
+        border-color: var(--color-neutral-border);
+        background-color: var(--color-neutral-background-disabled);
+      }
+    }
   }
-}
 
-/* IMPLEMENTATION */
-.ui-input {
-  position: relative;
+  /* ICON POSITION */
 
   .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-neutral-txt-primary);
-  background-color: var(--background-color);
-
-  &:has(+ .after) {
-    padding-inline-end: 4.8rem;
-  }
 
-  &:disabled {
-    cursor: not-allowed;
+  .before,
+  .after {
+    position: absolute;
+    inset-block: 1.2rem;
   }
 
-  &::placeholder {
+  .before {
     color: var(--color-neutral-txt-secondary);
+    inset-inline-start: 1.6rem;
+    pointer-events: none;
+    z-index: 1;
   }
 
-  &[type='search']::-webkit-search-cancel-button {
-    display: none;
+  .after {
+    inset-inline-end: 1.6rem;
+    cursor: pointer;
   }
 }
-
-.before,
-.after {
-  position: absolute;
-  inset-block: 1.2rem;
-}
-
-.before {
-  color: var(--color-neutral-txt-secondary);
-  inset-inline-start: 1.6rem;
-  pointer-events: none;
-  z-index: 1;
-}
-
-.after {
-  inset-inline-end: 1.6rem;
-  cursor: pointer;
-}
 </style>

package/lib/components/ui/link/UiLink.vue

@@ -0,0 +1,75 @@
+<!-- v2 -->
+<template>
+  <component :is="component" :class="classes" class="ui-link" v-bind="attributes">
+    <VtsIcon :icon accent="current" />
+    <slot />
+    <VtsIcon
+      v-if="attributes.target === '_blank'"
+      :icon="faArrowUpRightFromSquare"
+      accent="current"
+      class="external-icon"
+    />
+  </component>
+</template>
+
+<script lang="ts" setup>
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import { type LinkOptions, useLinkComponent } from '@core/composables/link-component.composable'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+
+const props = defineProps<
+  LinkOptions & {
+    size: 'small' | 'medium'
+    icon?: IconDefinition
+  }
+>()
+
+const typoClasses = {
+  small: 'typo p3-regular-underline',
+  medium: 'typo p1-regular-underline',
+}
+
+const { component, attributes, isDisabled } = useLinkComponent('span', () => props)
+
+const classes = computed(() => [typoClasses[props.size], { disabled: isDisabled.value }])
+</script>
+
+<style lang="postcss" scoped>
+.ui-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.8rem;
+  color: var(--color-info-txt-base);
+
+  &:hover {
+    color: var(--color-info-txt-hover);
+  }
+
+  &:active {
+    color: var(--color-info-txt-active);
+  }
+
+  &:focus-visible {
+    outline: none;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: -0.6rem;
+      border: 0.2rem solid var(--color-info-txt-base);
+      border-radius: 0.4rem;
+    }
+  }
+
+  &.disabled {
+    color: var(--color-neutral-txt-secondary);
+    cursor: not-allowed;
+  }
+
+  .external-icon {
+    font-size: 0.75em;
+  }
+}
+</style>

package/lib/components/ui/query-search-bar/UiQuerySearchBar.vue

@@ -7,6 +7,8 @@
     <UiInput
       :id
       v-model="value"
+      type="text"
+      accent="info"
       :aria-label="uiStore.isMobile ? $t('core.query-search-bar.label') : undefined"
       :icon="uiStore.isDesktop ? faMagnifyingGlass : undefined"
       :placeholder="$t('core.query-search-bar.placeholder')"

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

@@ -0,0 +1,14 @@
+<!-- v1 -->
+<template>
+  <div class="ui-tags-list">
+    <slot />
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.ui-tags-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+</style>

package/lib/composables/link-component.composable.ts

@@ -0,0 +1,53 @@
+import type { MaybeRefOrGetter } from 'vue'
+import { computed, toValue } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+export type LinkOptions = {
+  to?: RouteLocationRaw
+  href?: string
+  target?: '_blank' | '_self'
+  disabled?: boolean
+}
+
+export function useLinkComponent(defaultComponent: string, options: MaybeRefOrGetter<LinkOptions>) {
+  const config = computed(() => toValue(options))
+
+  const isDisabled = computed(() => config.value.disabled || (!config.value.to && !config.value.href))
+
+  const component = computed(() => {
+    if (isDisabled.value) {
+      return defaultComponent
+    }
+
+    if (config.value.href) {
+      return 'a'
+    }
+
+    return 'RouterLink'
+  })
+
+  const attributes = computed(() => {
+    if (isDisabled.value) {
+      return {}
+    }
+
+    if (config.value.href) {
+      return {
+        rel: 'noopener noreferrer',
+        target: config.value.target ?? '_blank',
+        href: config.value.href,
+      }
+    }
+
+    return {
+      target: config.value.target,
+      to: config.value.to,
+    }
+  })
+
+  return {
+    isDisabled,
+    component,
+    attributes,
+  }
+}

package/lib/locales/cs.json

@@ -41,6 +41,7 @@
 
   "dashboard": "Přehled",
   "documentation-name": "Dokumentace k {name}",
+  "error-no-data": "Chyba – není možné shromažďovat údaje.",
   "hosts": "Hostitelé",
   "learn-more": "Zjistit více",
   "loading-in-progress": "Probíhá načítání…",

package/lib/locales/de.json

@@ -19,7 +19,9 @@
 
   "dashboard": "Dashboard",
   "documentation-name": "{name} Dokumentation",
+  "error-no-data": "Fehler beim Datenabruf.",
   "fullscreen": "Vollbild",
+  "gateway": "Gateway",
   "hosts": "Hosts",
   "learn-more": "Mehr erfahren",
   "loading-in-progress": "Ladevorgang läuft…",

package/lib/locales/en.json

@@ -45,8 +45,10 @@
   "access-forum": "Access forum",
   "dashboard": "Dashboard",
   "documentation-name": "{name} documentation",
+  "error-no-data": "Error, can't collect data.",
   "exit-fullscreen": "Exit fullscreen",
   "fullscreen": "Fullscreen",
+  "gateway": "Gateway",
   "hosts": "Hosts",
   "learn-more": "Learn more",
   "loading-in-progress": "Loading in progress…",
@@ -66,8 +68,10 @@
   "receive": "Receive",
   "running-vm": "Running VM | Running VMs",
   "see-all": "See all",
+  "select-to-see-details": "Select an element to see details",
   "send": "Send",
   "send-ctrl-alt-del": "Send Ctrl+Alt+Del",
+  "speed": "Speed",
   "stats": "Stats",
   "storage": "Storage",
   "system": "System",