@xen-orchestra/web-core 0.18.0 → 0.20.0

package/lib/components/backdrop/VtsBackdrop.vue

@@ -6,6 +6,6 @@
 .vts-backdrop {
   position: fixed;
   inset: 0;
-  z-index: 1000;
+  z-index: 1010;
 }
 </style>

package/lib/components/column/VtsColumn.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="vts-column">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineSlots<{
+  default(): any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.vts-column {
+  flex: 1;
+  flex-basis: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+</style>

package/lib/components/columns/VtsColumns.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="vts-columns" :class="{ mobile: uiStore.isMobile }">
+    <component :is="nodes[index - 1] ?? VtsColumn" v-for="index of columns" :key="index" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import VtsColumn from '@core/components/column/VtsColumn.vue'
+import { useUiStore } from '@core/stores/ui.store.ts'
+import { computed } from 'vue'
+
+const { columns: _columns = 2 } = defineProps<{
+  columns?: number
+}>()
+
+const slots = defineSlots<{
+  default(): any
+}>()
+
+const nodes = computed(() => slots.default())
+
+const columns = computed(() => Math.max(_columns, nodes.value.length))
+
+const uiStore = useUiStore()
+</script>
+
+<style lang="postcss" scoped>
+.vts-columns {
+  display: flex;
+  gap: 0.8rem;
+  padding: 0.8rem;
+  flex-direction: row;
+
+  &.mobile {
+    flex-direction: column;
+  }
+}
+</style>

package/lib/components/copy-button/VtsCopyButton.vue

@@ -0,0 +1,29 @@
+<template>
+  <UiButtonIcon v-tooltip="copied && $t('core.copied')" :icon size="medium" accent="brand" @click="copyToClipboard()" />
+</template>
+
+<script setup lang="ts">
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import { faCheckCircle, faCopy } from '@fortawesome/free-solid-svg-icons'
+import { useClipboard, useTimeoutFn } from '@vueuse/core'
+import { ref } from 'vue'
+
+const { value } = defineProps<{
+  value: string
+}>()
+
+const { copy, copied } = useClipboard()
+
+const icon = ref(faCopy)
+
+const { start: changeIcon } = useTimeoutFn(() => {
+  icon.value = faCopy
+}, 1_500) // 1.5s is time to toltips is visible
+
+function copyToClipboard() {
+  copy(value)
+  icon.value = faCheckCircle
+  changeIcon()
+}
+</script>

package/lib/components/enabled-state/VtsEnabledState.vue

@@ -0,0 +1,23 @@
+<template>
+  <UiInfo :accent="state.accent">
+    {{ state.label }}
+  </UiInfo>
+</template>
+
+<script setup lang="ts">
+import UiInfo, { type InfoAccent } from '@core/components/ui/info/UiInfo.vue'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+type StatesMap = { label: string; accent: InfoAccent }
+
+const { enabled } = defineProps<{
+  enabled: boolean
+}>()
+
+const { t } = useI18n()
+
+const state = computed<StatesMap>(() =>
+  enabled ? { label: t('enabled'), accent: 'success' } : { label: t('disabled'), accent: 'muted' }
+)
+</script>

package/lib/components/icon/VtsIcon.vue

@@ -13,7 +13,7 @@ import UiLoader from '@core/components/ui/loader/UiLoader.vue'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
-export type IconAccent = 'current' | 'brand' | 'info' | 'success' | 'warning' | 'danger'
+export type IconAccent = 'current' | 'brand' | 'info' | 'success' | 'warning' | 'danger' | 'muted'
 
 defineProps<{
   accent: IconAccent
@@ -88,5 +88,13 @@ defineProps<{
       color: var(--color-danger-txt-item);
     }
   }
+
+  &.muted {
+    color: var(--color-neutral-background-disabled);
+
+    .overlay-icon {
+      color: var(--color-neutral-txt-secondary);
+    }
+  }
 }
 </style>

package/lib/components/input-wrapper/VtsInputWrapper.vue

@@ -68,6 +68,7 @@ const labelAccent = useMapper<InfoAccent, LabelAccent>(
     success: 'neutral',
     warning: 'warning',
     danger: 'danger',
+    muted: 'neutral',
   },
   'neutral'
 )

package/lib/components/layout/VtsLayoutSidebar.vue

@@ -58,7 +58,7 @@ const ui = useUiStore()
   background-color: var(--color-neutral-background-secondary);
   border-right: 0.1rem solid var(--color-neutral-border);
   width: v-bind('sidebar.cssWidth');
-  z-index: 1001;
+  z-index: 1010;
   transition:
     margin-left 0.25s,
     transform 0.25s;

package/lib/components/quick-info-column/VtsQuickInfoColumn.vue

@@ -8,6 +8,6 @@
 .vts-quick-info-column {
   display: flex;
   flex-direction: column;
-  gap: 0.8rem;
+  gap: 1.6rem;
 }
 </style>

package/lib/components/quick-info-row/VtsQuickInfoRow.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="vts-quick-info-row">
-    <span class="typo-body-bold">
+  <div class="vts-quick-info-row" :class="{ mobile: uiStore.isMobile }">
+    <span v-tooltip class="typo-body-regular label text-ellipsis">
       <slot name="label">
         {{ label }}
       </slot>
     </span>
-    <span v-tooltip class="typo-body-regular value text-ellipsis">
+    <span class="typo-body-regular value">
       <slot name="value">
         {{ value }}
       </slot>
@@ -15,6 +15,7 @@
 
 <script lang="ts" setup>
 import { vTooltip } from '@core/directives/tooltip.directive'
+import { useUiStore } from '@core/stores/ui.store.ts'
 
 defineProps<{
   label?: string
@@ -25,16 +26,34 @@ defineSlots<{
   label?(): any
   value?(): any
 }>()
+
+const uiStore = useUiStore()
 </script>
 
 <style lang="postcss" scoped>
 .vts-quick-info-row {
   display: flex;
-  align-items: center;
-  gap: 1rem;
+  gap: 2.4rem;
+
+  &.mobile {
+    flex-direction: column;
+    gap: 0.8rem;
+  }
+
+  .label {
+    flex-shrink: 0;
+    color: var(--color-neutral-txt-secondary);
+  }
+
+  .value {
+    color: var(--color-neutral-txt-primary);
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
 
-  .value:empty::before {
-    content: '-';
+    &:empty::before {
+      content: '-';
+    }
   }
 }
 </style>

package/lib/components/relative-time/VtsRelativeTime.vue

@@ -0,0 +1,18 @@
+<template>
+  <span :title="date.toLocaleString()">{{ relativeTime }}</span>
+</template>
+
+<script lang="ts" setup>
+import useRelativeTime from '@core/composables/relative-time.composable'
+import { parseDateTime } from '@core/utils/time.util'
+import { useNow } from '@vueuse/core'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  date: Date | number | string
+}>()
+
+const date = computed(() => new Date(parseDateTime(props.date)))
+const now = useNow({ interval: 1000 })
+const relativeTime = useRelativeTime(date, now)
+</script>

package/lib/components/select/VtsOption.vue

@@ -0,0 +1,24 @@
+<template>
+  <UiDropdown
+    ref="elementRef"
+    :checkbox="option.properties.multiple"
+    :disabled="option.properties.disabled"
+    :hover="option.flags.active"
+    :selected="option.flags.selected"
+    accent="normal"
+  >
+    <slot>{{ option.properties.label }}</slot>
+  </UiDropdown>
+</template>
+
+<script generic="TOption extends FormOption" lang="ts" setup>
+import UiDropdown from '@core/components/ui/dropdown/UiDropdown.vue'
+import type { FormOption } from '@core/packages/form-select/types.ts'
+import { useFormOptionController } from '@core/packages/form-select/use-form-option-controller.ts'
+
+const { option } = defineProps<{
+  option: TOption
+}>()
+
+const { elementRef } = useFormOptionController(() => option)
+</script>

package/lib/components/select/VtsSelect.vue

@@ -0,0 +1,96 @@
+<template>
+  <div :class="className" class="vts-select">
+    <VtsBackdrop v-if="isOpen" />
+
+    <UiInput
+      ref="triggerRef"
+      :accent
+      :model-value="selectedLabel"
+      :placeholder
+      :required
+      :right-icon="faAngleDown"
+      readonly
+    />
+
+    <UiDropdownList v-if="isOpen" ref="dropdownRef" :style="floatingStyles" class="dropdown-list">
+      <template v-if="searchTerm !== undefined" #before>
+        <div class="search-container">
+          <UiInput
+            ref="searchRef"
+            v-model="searchTerm"
+            :placeholder="searchPlaceholder"
+            :right-icon="faMagnifyingGlass"
+            accent="brand"
+          />
+        </div>
+      </template>
+      <UiDropdown v-if="loading || options.length === 0" accent="normal" disabled>
+        {{ loading ? t('loading-in-progress') : t('no-results') }}
+      </UiDropdown>
+      <template v-for="option of options" :key="option.id">
+        <slot :option>
+          <VtsOption :option />
+        </slot>
+      </template>
+    </UiDropdownList>
+  </div>
+</template>
+
+<script generic="TOption extends FormOption" lang="ts" setup>
+import VtsBackdrop from '@core/components/backdrop/VtsBackdrop.vue'
+import VtsOption from '@core/components/select/VtsOption.vue'
+import UiDropdown from '@core/components/ui/dropdown/UiDropdown.vue'
+import UiDropdownList from '@core/components/ui/dropdown/UiDropdownList.vue'
+import UiInput from '@core/components/ui/input/UiInput.vue'
+import type { FormOption } from '@core/packages/form-select/types.ts'
+import { useFormSelectController } from '@core/packages/form-select/use-form-select-controller.ts'
+import { toVariants } from '@core/utils/to-variants.util.ts'
+import { faAngleDown, faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { accent, options, selectedLabel } = defineProps<{
+  accent: 'brand' | 'warning' | 'danger'
+  options: TOption[]
+  selectedLabel: string
+  required?: boolean
+  placeholder?: string
+  searchPlaceholder?: string
+  loading?: boolean
+}>()
+
+const searchTerm = defineModel<string>('search')
+
+defineSlots<{
+  default(props: { option: TOption }): any
+}>()
+
+const { t } = useI18n()
+
+const { triggerRef, dropdownRef, searchRef, isOpen, floatingStyles } = useFormSelectController({
+  options: () => options,
+  searchTerm,
+})
+
+const className = computed(() => toVariants({ accent }))
+</script>
+
+<style lang="postcss" scoped>
+.vts-select {
+  .ui-input:deep(input) {
+    cursor: default;
+  }
+
+  .dropdown-list {
+    min-width: 40rem;
+    max-height: 36.2rem; /* 8 Dropdown items */
+    overflow: auto;
+    z-index: 1020;
+
+    .search-container {
+      background-color: var(--color-neutral-background-primary);
+      padding: 0.4rem;
+    }
+  }
+}
+</style>

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

@@ -1,13 +1,54 @@
 <template>
-  <VtsStateHero :type busy>
-    {{ $t('loading-in-progress') }}
-  </VtsStateHero>
+  <div class="vts-loading-hero">
+    <VtsStateHero :type busy>
+      {{ $t('loading-in-progress') }}
+    </VtsStateHero>
+    <div v-if="slots.title || slots.text" class="content">
+      <div v-if="slots.title" class="title" :class="className">
+        <slot name="title" />
+      </div>
+      <div v-if="slots.text" class="text typo-body-bold">
+        <slot name="text" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import VtsStateHero, { type StateHeroType } from '@core/components/state-hero/VtsStateHero.vue'
+import { computed } from 'vue'
 
-defineProps<{
+const { type } = defineProps<{
   type: StateHeroType
 }>()
+
+const slots = defineSlots<{
+  title?(): any
+  text?(): any
+}>()
+
+const className = computed(() => (type === 'page' ? 'typo-h1' : 'typo-h2'))
 </script>
+
+<style lang="postcss" scoped>
+.vts-loading-hero {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 2.4rem;
+    text-align: center;
+
+    .title {
+      color: var(--color-neutral-txt-primary);
+    }
+
+    .text {
+      color: var(--color-neutral-txt-secondary);
+    }
+  }
+}
+</style>

package/lib/components/tree/VtsTreeItem.vue

@@ -1,11 +1,13 @@
 <template>
-  <li class="vts-tree-item">
+  <li class="vts-tree-item" @click="handleClick()">
     <slot />
     <slot v-if="expanded" name="sublist" />
   </li>
 </template>
 
 <script lang="ts" setup>
+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'
 
@@ -18,6 +20,8 @@ defineSlots<{
   sublist?(): any
 }>()
 
+const sidebar = useSidebarStore()
+const uiStore = useUiStore()
 const hasChildren = ref(false)
 
 const updateHasChildren = () => {
@@ -25,6 +29,12 @@ const updateHasChildren = () => {
   hasChildren.value = sublist !== undefined
 }
 
+const handleClick = () => {
+  if (uiStore.isMobile) {
+    sidebar.toggleExpand(false)
+  }
+}
+
 onBeforeMount(() => updateHasChildren())
 onBeforeUpdate(() => updateHasChildren())
 

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

@@ -0,0 +1,105 @@
+<!-- v3 -->
+<template>
+  <div :class="toVariants({ accent })" class="ui-alert">
+    <div class="content">
+      <VtsIcon class="information-icon" :accent :icon="faCircle" :overlay-icon="icon" />
+      <div class="alert typo-body-regular-small">
+        <div>
+          <slot />
+        </div>
+        <div v-if="slots.description">
+          <slot name="description" />
+        </div>
+      </div>
+      <UiButtonIcon
+        v-if="close"
+        class="close-button"
+        :icon="faXmark"
+        accent="brand"
+        size="medium"
+        @click="emit('close')"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import { toVariants } from '@core/utils/to-variants.util'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { faCheck, faCircle, faExclamation, faInfo, faXmark } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+
+type AlertAccent = 'info' | 'success' | 'warning' | 'danger'
+
+const { accent } = defineProps<{
+  accent: AlertAccent
+  close?: boolean
+}>()
+
+const emit = defineEmits<{
+  close: []
+}>()
+
+const slots = defineSlots<{
+  default(): any
+  description?(): any
+}>()
+
+const iconByAccent: Record<AlertAccent, IconDefinition> = {
+  info: faInfo,
+  success: faCheck,
+  warning: faExclamation,
+  danger: faXmark,
+}
+
+const icon = computed(() => iconByAccent[accent])
+</script>
+
+<style scoped lang="postcss">
+.ui-alert {
+  padding: 1.6rem;
+  border: 0.1rem solid;
+  border-radius: 0.4rem;
+
+  .content {
+    display: flex;
+    align-items: flex-start;
+    gap: 1.6rem;
+
+    .information-icon {
+      font-size: 2.7rem;
+    }
+
+    .alert {
+      align-self: center;
+    }
+
+    .close-button {
+      margin-inline-start: auto;
+      flex-shrink: 0;
+    }
+  }
+
+  &.accent--info {
+    background-color: var(--color-info-background-selected);
+    border-color: var(--color-info-item-base);
+  }
+
+  &.accent--success {
+    background-color: var(--color-success-background-selected);
+    border-color: var(--color-success-item-base);
+  }
+
+  &.accent--warning {
+    background-color: var(--color-warning-background-selected);
+    border-color: var(--color-warning-item-base);
+  }
+
+  &.accent--danger {
+    background-color: var(--color-danger-background-selected);
+    border-color: var(--color-danger-item-base);
+  }
+}
+</style>