@xen-orchestra/web-core 0.31.1 → 0.33.0

package/lib/components/ui/button/UiButton.vue

@@ -1,4 +1,4 @@
-<!-- v6 -->
+<!-- v7 -->
 <template>
   <button :class="classNames" :disabled="busy || isDisabled || lockIcon" class="ui-button" type="button">
     <VtsIcon :busy :name="leftIcon" class="icon" size="current" />
@@ -14,9 +14,9 @@ import type { IconName } from '@core/icons'
 import { toVariants } from '@core/utils/to-variants.util'
 import { computed } from 'vue'
 
-type ButtonVariant = 'primary' | 'secondary' | 'tertiary'
-type ButtonAccent = 'brand' | 'warning' | 'danger'
-type ButtonSize = 'small' | 'medium'
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary'
+export type ButtonAccent = 'brand' | 'warning' | 'danger'
+export type ButtonSize = 'small' | 'medium'
 
 const { accent, variant, size, disabled, busy, lockIcon } = defineProps<{
   variant: ButtonVariant
@@ -111,17 +111,11 @@ const classNames = computed(() => [
         color: var(--color-brand-txt-item);
       }
 
-      &:is(:disabled, .disabled) {
+      &:is(:disabled, .disabled, .busy) {
         background-color: var(--color-brand-item-disabled);
         border-color: var(--color-brand-item-disabled);
         color: var(--color-neutral-txt-secondary);
       }
-
-      &.busy {
-        background-color: var(--color-brand-item-base);
-        border-color: var(--color-brand-item-base);
-        color: var(--color-brand-txt-item);
-      }
     }
 
     &.variant--secondary {
@@ -145,17 +139,11 @@ const classNames = computed(() => [
         color: var(--color-brand-txt-active);
       }
 
-      &:is(:disabled, .disabled) {
+      &:is(:disabled, .disabled, .busy) {
         background-color: var(--color-neutral-background-disabled);
         border-color: var(--color-neutral-txt-secondary);
         color: var(--color-neutral-txt-secondary);
       }
-
-      &.busy {
-        background-color: var(--color-neutral-background-primary);
-        border-color: var(--color-brand-item-base);
-        color: var(--color-brand-txt-base);
-      }
     }
 
     &.variant--tertiary {
@@ -179,17 +167,11 @@ const classNames = computed(() => [
         color: var(--color-brand-txt-active);
       }
 
-      &:is(:disabled, .disabled) {
+      &:is(:disabled, .disabled, .busy) {
         background-color: transparent;
         border-color: transparent;
         color: var(--color-neutral-txt-secondary);
       }
-
-      &.busy {
-        background-color: var(--color-brand-background-selected);
-        border-color: var(--color-brand-background-selected);
-        color: var(--color-brand-txt-base);
-      }
     }
   }
 
@@ -215,17 +197,11 @@ const classNames = computed(() => [
         color: var(--color-warning-txt-item);
       }
 
-      &:is(:disabled, .disabled) {
+      &:is(:disabled, .disabled, .busy) {
         background-color: var(--color-warning-item-disabled);
         border-color: var(--color-warning-item-disabled);
         color: var(--color-neutral-txt-secondary);
       }
-
-      &.busy {
-        background-color: var(--color-warning-item-base);
-        border-color: var(--color-warning-item-base);
-        color: var(--color-warning-txt-item);
-      }
     }
 
     &.variant--secondary {
@@ -249,17 +225,11 @@ const classNames = computed(() => [
         color: var(--color-warning-txt-active);
       }
 
-      &:is(:disabled, .disabled) {
+      &:is(:disabled, .disabled, .busy) {
         background-color: var(--color-neutral-background-disabled);
         border-color: var(--color-neutral-txt-secondary);
         color: var(--color-neutral-txt-secondary);
       }
-
-      &.busy {
-        background-color: var(--color-neutral-background-primary);
-        border-color: var(--color-warning-txt-base);
-        color: var(--color-warning-txt-base);
-      }
     }
 
     &.variant--tertiary {
@@ -283,17 +253,11 @@ const classNames = computed(() => [
         color: var(--color-warning-txt-active);
       }
 
-      &:is(:disabled, .disabled) {
+      &:is(:disabled, .disabled, .busy) {
         background-color: transparent;
         border-color: transparent;
         color: var(--color-neutral-txt-secondary);
       }
-
-      &.busy {
-        background-color: var(--color-warning-background-selected);
-        border-color: var(--color-warning-background-selected);
-        color: var(--color-warning-txt-base);
-      }
     }
   }
 
@@ -319,17 +283,11 @@ const classNames = computed(() => [
         color: var(--color-danger-txt-item);
       }
 
-      &:is(:disabled, .disabled) {
+      &:is(:disabled, .disabled, .busy) {
         background-color: var(--color-danger-item-disabled);
         border-color: var(--color-danger-item-disabled);
         color: var(--color-neutral-txt-secondary);
       }
-
-      &.busy {
-        background-color: var(--color-danger-item-base);
-        border-color: var(--color-danger-item-base);
-        color: var(--color-danger-txt-item);
-      }
     }
 
     &.variant--secondary {
@@ -353,17 +311,11 @@ const classNames = computed(() => [
         color: var(--color-danger-txt-active);
       }
 
-      &:is(:disabled, .disabled) {
+      &:is(:disabled, .disabled, .busy) {
         background-color: var(--color-neutral-background-disabled);
         border-color: var(--color-neutral-txt-secondary);
         color: var(--color-neutral-txt-secondary);
       }
-
-      &.busy {
-        background-color: var(--color-neutral-background-primary);
-        border-color: var(--color-danger-txt-base);
-        color: var(--color-danger-txt-base);
-      }
     }
 
     &.variant--tertiary {
@@ -387,17 +339,11 @@ const classNames = computed(() => [
         color: var(--color-danger-txt-active);
       }
 
-      &:is(:disabled, .disabled) {
+      &:is(:disabled, .disabled, .busy) {
         background-color: transparent;
         border-color: transparent;
         color: var(--color-neutral-txt-secondary);
       }
-
-      &.busy {
-        background-color: var(--color-danger-background-selected);
-        border-color: var(--color-danger-background-selected);
-        color: var(--color-danger-txt-base);
-      }
     }
   }
 

package/lib/components/ui/modal/UiModal.vue

@@ -0,0 +1,164 @@
+<!-- v2 -->
+<template>
+  <form :class="className" class="ui-modal" @click.self="emit('dismiss')">
+    <div class="modal">
+      <UiButtonIcon
+        v-if="onDismiss"
+        :accent="closeIconAccent"
+        :target-scale="2"
+        class="dismiss-button"
+        icon="fa:xmark"
+        size="small"
+        @click="emit('dismiss')"
+      />
+      <main class="main">
+        <VtsIcon v-if="icon" :name="icon" class="icon" size="current" />
+        <div v-if="slots.title" class="typo-h4">
+          <slot name="title" />
+        </div>
+        <div class="content">
+          <slot name="content" />
+        </div>
+      </main>
+      <VtsButtonGroup v-if="slots.buttons" class="buttons">
+        <slot name="buttons" />
+      </VtsButtonGroup>
+    </div>
+  </form>
+</template>
+
+<script lang="ts" setup>
+import VtsButtonGroup from '@core/components/button-group/VtsButtonGroup.vue'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import type { IconName } from '@core/icons'
+import { useMapper } from '@core/packages/mapper'
+import { toVariants } from '@core/utils/to-variants.util.ts'
+import { computed } from 'vue'
+
+export type ModalAccent = 'info' | 'success' | 'warning' | 'danger'
+
+const { accent } = defineProps<{
+  accent: ModalAccent
+  icon?: IconName
+  onDismiss?: () => void
+}>()
+
+const emit = defineEmits<{
+  dismiss: []
+}>()
+
+const slots = defineSlots<{
+  content(): any
+  buttons?(): any
+  title?(): any
+}>()
+
+const closeIconAccent = useMapper(
+  () => accent,
+  {
+    info: 'brand',
+    success: 'brand',
+    warning: 'warning',
+    danger: 'danger',
+  },
+  'info'
+)
+
+const className = computed(() => toVariants({ accent }))
+</script>
+
+<style lang="postcss" scoped>
+.ui-modal {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .modal {
+    display: flex;
+    flex-direction: column;
+    min-width: min(40rem, calc(100% - 2rem));
+    max-width: min(95vw, 120rem);
+    max-height: min(90vh, 80rem);
+    padding: 3.2rem 2.4rem 2.4rem;
+    gap: 2.4rem;
+    border-radius: 1rem;
+    overflow: auto;
+
+    &:not(:has(.buttons)) {
+      padding-bottom: 3.2rem;
+    }
+
+    .dismiss-button {
+      position: absolute;
+      top: 2.4rem;
+      right: 2.4rem;
+      z-index: 1;
+    }
+
+    &:not(:has(.icon)) .dismiss-button {
+      top: 1rem;
+      right: 1rem;
+    }
+
+    .main {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 2.4rem;
+      text-align: center;
+      overflow: auto;
+
+      .icon {
+        font-size: 4.8rem;
+      }
+
+      .content {
+        width: 100%;
+      }
+    }
+  }
+
+  &.accent--info {
+    .modal {
+      background-color: var(--color-info-background-selected);
+    }
+
+    .main .icon {
+      color: var(--color-info-txt-base);
+    }
+  }
+
+  &.accent--success {
+    .modal {
+      background-color: var(--color-success-background-selected);
+    }
+
+    .main .icon {
+      color: var(--color-success-txt-base);
+    }
+  }
+
+  &.accent--warning {
+    .modal {
+      background-color: var(--color-warning-background-selected);
+    }
+
+    .main .icon {
+      color: var(--color-warning-txt-base);
+    }
+  }
+
+  &.accent--danger {
+    .modal {
+      background-color: var(--color-danger-background-selected);
+    }
+
+    .main .icon {
+      color: var(--color-danger-txt-base);
+    }
+  }
+}
+</style>

package/lib/components/ui/quick-task-item/UiQuickTaskItem.vue

@@ -1,6 +1,6 @@
 <!-- WIP -->
 <template>
-  <li class="ui-quick-task-item">
+  <div class="ui-quick-task-item">
     <div v-if="hasSubTasks" class="toggle" @click="toggleExpand()">
       <UiButtonIcon accent="brand" :icon="isExpanded ? 'fa:angle-down' : 'fa:angle-right'" size="small" />
     </div>
@@ -26,7 +26,7 @@
       </div>
       <VtsQuickTaskList v-if="hasSubTasks && isExpanded" :tasks="subTasks" sublist />
     </div>
-  </li>
+  </div>
 </template>
 
 <script lang="ts" setup>

package/lib/composables/context.composable.ts

@@ -1,5 +1,6 @@
+import { toComputed } from '@core/utils/to-computed.util'
 import type { ComputedRef, InjectionKey, MaybeRefOrGetter } from 'vue'
-import { computed, inject, provide, toValue } from 'vue'
+import { inject, provide, toValue } from 'vue'
 
 export const createContext = <T, Output = ComputedRef<T>>(
   initialValue: MaybeRefOrGetter<T>,
@@ -27,8 +28,5 @@ export const useContext = <Ctx extends Context, T extends ContextValue<Ctx>>(
   const updatedValue = () => toValue(newValue) ?? toValue(currentValue) ?? context.initialValue
   provide(context.id, updatedValue)
 
-  return context.builder(
-    computed(() => toValue(updatedValue)),
-    computed(() => toValue(currentValue))
-  )
+  return context.builder(toComputed(updatedValue), toComputed(currentValue))
 }

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

@@ -1,5 +1,6 @@
+import { toComputed } from '@core/utils/to-computed.util'
 import type { MaybeRefOrGetter } from 'vue'
-import { computed, toValue } from 'vue'
+import { computed } from 'vue'
 import type { RouteLocationAsPathGeneric, RouteLocationAsRelativeGeneric, RouteLocationAsString } from 'vue-router'
 
 export type LinkOptions = {
@@ -11,7 +12,7 @@ export type LinkOptions = {
 }
 
 export function useLinkComponent(defaultComponent: string, options: MaybeRefOrGetter<LinkOptions>) {
-  const config = computed(() => toValue(options))
+  const config = toComputed(options)
 
   const isDisabled = computed(() => config.value.disabled || (!config.value.to && !config.value.href))
 

package/lib/composables/pagination.composable.ts

@@ -1,11 +1,12 @@
 import type { TablePaginationSize } from '@core/components/ui/table-pagination/UiTablePagination.vue'
 import { useRouteQuery } from '@core/composables/route-query.composable'
 import { useUiStore } from '@core/stores/ui.store.ts'
+import { toComputed } from '@core/utils/to-computed.util'
 import { clamp, useLocalStorage } from '@vueuse/core'
-import { computed, type MaybeRefOrGetter, toValue } from 'vue'
+import { computed, type MaybeRefOrGetter } from 'vue'
 
 export function usePagination<T>(id: string, _records: MaybeRefOrGetter<T[]>) {
-  const records = computed(() => toValue(_records))
+  const records = toComputed(_records)
 
   const showBy = useLocalStorage(`${id}.per-page`, 24)
 

package/lib/composables/tree-filter.composable.ts

@@ -5,10 +5,12 @@ import { computed, ref } from 'vue'
 export function useTreeFilter() {
   const filter = ref('')
   const debouncedFilter = refDebounced(filter, 500)
-  const hasFilter = computed(() => debouncedFilter.value.trim().length > 0)
-
+  const hasFilter = computed(() => filter.value.trim().length > 0)
+  const isSearching = computed(() =>
+    filter.value.trim().length === 0 ? false : filter.value !== debouncedFilter.value
+  )
   const predicate = (node: TreeNodeBase) =>
     hasFilter.value ? node.label.toLocaleLowerCase().includes(debouncedFilter.value.toLocaleLowerCase()) : undefined
 
-  return { filter, predicate }
+  return { filter, predicate, isSearching }
 }

package/lib/icons/fa-icons.ts

@@ -1,13 +1,14 @@
 import { defineIconPack } from '@core/packages/icon/define-icon-pack.ts'
 import {
   faBuilding,
+  faCopy,
   faFile,
   faFolderClosed,
   faFolderOpen,
   faSquareCheck,
-  faCopy,
 } from '@fortawesome/free-regular-svg-icons'
 import {
+  faA,
   faAlignLeft,
   faAngleDoubleLeft,
   faAngleDoubleRight,
@@ -24,6 +25,7 @@ import {
   faBars,
   faBarsProgress,
   faBook,
+  faCalendar,
   faCamera,
   faCaretDown,
   faCaretUp,
@@ -36,8 +38,10 @@ import {
   faCircleMinus,
   faCircleNotch,
   faCirclePlay,
+  faCircleUser,
   faCircleXmark,
   faCity,
+  faClock,
   faClose,
   faCode,
   faComments,
@@ -73,6 +77,7 @@ import {
   faLockOpen,
   faMagnifyingGlass,
   faMemory,
+  faMessage,
   faMicrochip,
   faMinus,
   faMoon,
@@ -106,6 +111,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 
 export const faIcons = defineIconPack({
+  a: { icon: faA },
   'align-left': { icon: faAlignLeft },
   'angle-double-left': { icon: faAngleDoubleLeft },
   'angle-double-right': { icon: faAngleDoubleRight },
@@ -124,6 +130,7 @@ export const faIcons = defineIconPack({
   book: { icon: faBook },
   building: { icon: faBuilding },
   camera: { icon: faCamera },
+  calendar: { icon: faCalendar },
   'caret-down': { icon: faCaretDown },
   'caret-up': { icon: faCaretUp },
   check: { icon: faCheck },
@@ -135,13 +142,16 @@ export const faIcons = defineIconPack({
   'circle-minus': { icon: faCircleMinus },
   'circle-notch': { icon: faCircleNotch },
   'circle-play': { icon: faCirclePlay },
+  'circle-user': { icon: faCircleUser },
   'circle-xmark': { icon: faCircleXmark },
   city: { icon: faCity },
   close: { icon: faClose },
+  clock: { icon: faClock },
   code: { icon: faCode },
   comments: { icon: faComments },
   copy: { icon: faCopy },
   database: { icon: faDatabase },
+  date: { icon: faCalendar },
   desktop: { icon: faDesktop },
   display: { icon: faDisplay },
   'down-left-and-up-right-to-center': { icon: faDownLeftAndUpRightToCenter },
@@ -176,6 +186,7 @@ export const faIcons = defineIconPack({
   'lock-open': { icon: faLockOpen },
   'magnifying-glass': { icon: faMagnifyingGlass },
   memory: { icon: faMemory },
+  message: { icon: faMessage },
   microchip: { icon: faMicrochip },
   minus: { icon: faMinus },
   moon: { icon: faMoon },
@@ -199,6 +210,7 @@ export const faIcons = defineIconPack({
   star: { icon: faStar },
   stop: { icon: faStop },
   tags: { icon: faTags },
+  time: { icon: faClock },
   'thumb-tack': { icon: faThumbTack },
   'thumb-tack-slash': { icon: faThumbTackSlash },
   trash: { icon: faTrash },

package/lib/icons/index.ts

@@ -17,3 +17,20 @@ export type ObjectIconName = Extract<IconName, `object:${string}:${string}`>
 export function icon<TName extends IconName>(name: TName): TName {
   return name
 }
+
+export type ObjectStateByType = {
+  [TName in IconName as TName extends `object:${infer TType}:${string}`
+    ? TType
+    : never]: TName extends `object:${string}:${infer TType}` ? TType : never
+}
+
+export type ObjectType = keyof ObjectStateByType
+
+export type ObjectState<TType extends ObjectType> = ObjectStateByType[TType]
+
+export function objectIcon<TType extends ObjectType, TState extends ObjectState<TType>>(
+  type: TType,
+  state: TState
+): IconName {
+  return `object:${type}:${state}` as IconName
+}