@xen-orchestra/web-core 0.31.0 → 0.32.0

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

@@ -24,6 +24,7 @@ import {
   faBars,
   faBarsProgress,
   faBook,
+  faCalendar,
   faCamera,
   faCaretDown,
   faCaretUp,
@@ -38,6 +39,7 @@ import {
   faCirclePlay,
   faCircleXmark,
   faCity,
+  faClock,
   faClose,
   faCode,
   faComments,
@@ -142,6 +144,7 @@ export const faIcons = defineIconPack({
   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 },
@@ -199,6 +202,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
+}

package/lib/locales/en.json

@@ -30,6 +30,8 @@
   "all-quiet-launchpad": "All quiet on the launchpad",
   "allow-self-signed-ssl": "You may need to allow self-signed SSL certificates in your browser",
   "api-error-details": "API Error details",
+  "api-info-details": "API Info details",
+  "api-warning-details": "API Warning details",
   "appearance": "Appearance",
   "ascending": "ascending",
   "auto-generated": "Automatically generated",
@@ -199,13 +201,15 @@
   "do-you-have-needs": "You have needs and/or expectations? Let us know",
   "documentation": "Documentation",
   "documentation-name": "{name} documentation",
+  "duration": "Duration",
   "edit": "Edit",
   "edit-config": "Edit config",
   "enabled": "Enabled",
+  "end-date": "End date",
   "end-of-life": "End of life",
   "engines-off": "Engines off, orbit stable",
   "eol": "EOL",
-  "error": "Error",
+  "error": "Error | Errors",
   "error-no-data": "Error, can't collect data.",
   "error-occurred": "An error has occurred",
   "excluded-vms-tags": "Excluded VMs tags",
@@ -278,6 +282,7 @@
   "id": "ID",
   "in-last-three-jobs": "In their last three jobs",
   "in-progress": "In progress",
+  "info": "Info | Infos",
   "install-settings": "Install settings",
   "interfaces": "Interface | Interface | Interfaces",
   "interrupted": "Interrupted",
@@ -367,6 +372,7 @@
   "memory": "Memory",
   "memory-usage": "Memory usage",
   "merge-backups-synchronously": "Merge backups synchronously",
+  "message": "Message",
   "migrate": "Migrate",
   "migrate-n-vms": "Migrate 1 VM | Migrate {n} VMs",
   "migration-compression": "Migration compression",
@@ -412,6 +418,7 @@
   "no-alarm-triggered": "No alarm triggered",
   "no-alarms-detected": "No alarms detected",
   "no-backup-available": "No backup available",
+  "no-backup-run-available": "No backup run available",
   "no-config": "No configuration",
   "no-data": "No data",
   "no-data-to-calculate": "No data to calculate",
@@ -523,6 +530,7 @@
   "root-by-default": "\"root\" by default.",
   "run": "Run",
   "running-vm": "Running VM | Running VMs",
+  "runs": "Runs",
   "s3-backup-repository": "S3 backup repository",
   "save": "Save",
   "scan-pifs": "Scan PIFs",
@@ -571,6 +579,7 @@
   "stacked-ram-usage": "Stacked RAM usage",
   "start": "Start",
   "start-console": "Start your {type} to access the console and resume operations!",
+  "start-date": "Start date",
   "start-delay": "Start delay",
   "start-host": "Start the host to resume operations, or check back later once it’s powered on.",
   "start-on-host": "Start on specific host",
@@ -596,6 +605,7 @@
   "system-disks-health": "System disks health",
   "table-actions": "Table actions",
   "tags": "Tags",
+  "task": "Task",
   "task.estimated-end": "Estimated end",
   "task.progress": "Progress",
   "task.started": "Started",
@@ -628,12 +638,14 @@
   "total-storage-repository": "Total storage repository",
   "total-used": "Total used",
   "total-used:": "Total used:",
+  "transfer-size": "Transfer size",
   "unable-to-connect-to": "Unable to connect to {ip}",
   "unable-to-connect-to-the-pool": "Unable to connect to the pool",
   "unknown": "Unknown",
   "unlocked": "Unlocked",
   "unreachable-hosts": "Unreachable hosts",
   "unreachable-hosts-reload-page": "Done, reload the page",
+  "untranslated-text-helper": "By default, untranslated texts will be displayed in english.",
   "up-to-date": "Up-to-date",
   "update": "Update",
   "used": "Used",
@@ -684,6 +696,7 @@
   "vms-status.unknown": "Unknown",
   "vms-status.unknown.tooltip": "For which XO has lost connection to the pool",
   "vms-tags": "VMs tags",
+  "warning": "Warning | Warnings",
   "write": "Write",
   "xo-backups": "XO backups",
   "xo-lite-under-construction": "XOLite is under construction",

package/lib/locales/fr.json

@@ -30,6 +30,8 @@
   "all-quiet-launchpad": "Tout est calme sur la rampe de lancement",
   "allow-self-signed-ssl": "Vous devrez peut-être autoriser les certificats SSL auto-signés depuis votre navigateur",
   "api-error-details": "Details de l'erreur API",
+  "api-info-details": "Details de l'information API",
+  "api-warning-details": "Details de l'avertissement API",
   "appearance": "Apparence",
   "ascending": "ascendant",
   "auto-generated": "Généré automatiquement",
@@ -199,13 +201,15 @@
   "do-you-have-needs": "Vous avez des besoins et/ou des attentes ? Faites le nous savoir",
   "documentation": "Documentation",
   "documentation-name": "Documentation {name}",
+  "duration": "Durée",
   "edit": "Modifier",
   "edit-config": "Modifier config",
   "enabled": "Activé",
+  "end-date": "Date de fin",
   "end-of-life": "Fin de vie",
   "engines-off": "Moteurs arrêtés, orbite stable",
   "eol": "EOL",
-  "error": "Erreur",
+  "error": "Erreur | Erreurs",
   "error-no-data": "Erreur, impossible de collecter les données.",
   "error-occurred": "Une erreur est survenue",
   "excluded-vms-tags": "Tags des VMs exclus",
@@ -278,6 +282,7 @@
   "id": "ID",
   "in-last-three-jobs": "Dans leurs trois derniers jobs",
   "in-progress": "En cours",
+  "info": "Info | Infos",
   "install-settings": "Paramètres d'installation",
   "interfaces": "Interface | Interface | Interfaces",
   "interrupted": "Interrompu",
@@ -367,6 +372,7 @@
   "memory": "Mémoire",
   "memory-usage": "Utilisation de la mémoire",
   "merge-backups-synchronously": "Fusionner les sauvegardes de manière synchrone",
+  "message": "Message",
   "migrate": "Migrer",
   "migrate-n-vms": "Migrer 1 VM | Migrer {n} VMs",
   "migration-compression": "Compression des migrations",
@@ -412,6 +418,7 @@
   "no-alarm-triggered": "Aucune alarme déclenchée",
   "no-alarms-detected": "Aucune alarme détectée",
   "no-backup-available": "Aucune sauvegarde disponible",
+  "no-backup-run-available": "Aucune exécution de sauvegarde disponible",
   "no-config": "Aucune configuration",
   "no-data": "Aucune donnée",
   "no-data-to-calculate": "Aucune donnée à calculer",
@@ -523,6 +530,7 @@
   "root-by-default": "\"root\" par défaut.",
   "run": "Run",
   "running-vm": "VM en cours d'exécution | VMs en cours d'exécution",
+  "runs": "Runs",
   "s3-backup-repository": "Dépot de sauvegarde S3",
   "save": "Enregistrer",
   "scan-pifs": "Scan PIFs",
@@ -571,6 +579,7 @@
   "stacked-ram-usage": "Utilisation RAM empilée",
   "start": "Démarrer",
   "start-console": "Démarrez votre {type} pour accéder à la console et reprendre les opérations !",
+  "start-date": "Date de début",
   "start-delay": "Départ différé",
   "start-host": "Démarrez l’hôte pour reprendre les opérations, ou revenez plus tard une fois qu’il sera allumé.",
   "start-on-host": "Démarrer sur un hôte spécifique",
@@ -596,6 +605,7 @@
   "system-disks-health": "Santé des disques système",
   "table-actions": "Actions du tableau",
   "tags": "Tags",
+  "task": "Tâche",
   "task.estimated-end": "Fin estimée",
   "task.progress": "Progression",
   "task.started": "Démarré",
@@ -628,12 +638,14 @@
   "total-storage-repository": "Total dépot de stockage",
   "total-used": "Total utilisé",
   "total-used:": "Total utilisé :",
+  "transfer-size": "Taille transférée",
   "unable-to-connect-to": "Impossible de se connecter à {ip}",
   "unable-to-connect-to-the-pool": "Impossible de se connecter au Pool",
   "unknown": "Inconnu",
   "unlocked": "Débloqué",
   "unreachable-hosts": "Hôtes inaccessibles",
   "unreachable-hosts-reload-page": "C'est fait. Rafraîchir la page",
+  "untranslated-text-helper": "Par défaut, les textes non traduits seront affichés en anglais.",
   "up-to-date": "À jour",
   "update": "Mettre à jour",
   "used": "Utilisé",
@@ -684,6 +696,7 @@
   "vms-status.unknown": "Inconnu",
   "vms-status.unknown.tooltip": "Dont XO a perdu la connexion avec le pool",
   "vms-tags": "Tags des VMs",
+  "warning": "Avertissement | Avertissements",
   "write": "Écriture",
   "xo-backups": "Sauvegardes XO",
   "xo-lite-under-construction": "XOLite est en construction",

package/lib/packages/collection/use-collection.ts

@@ -1,5 +1,6 @@
 import { guessItemId } from '@core/packages/collection/guess-item-id.ts'
 import type { EmptyObject } from '@core/types/utility.type.ts'
+import { toComputed } from '@core/utils/to-computed.util.ts'
 import type {
   Collection,
   CollectionConfigFlags,
@@ -8,7 +9,7 @@ import type {
   ExtractSourceId,
   GetItemId,
 } from './types.ts'
-import { computed, type MaybeRefOrGetter, toValue } from 'vue'
+import { computed, type MaybeRefOrGetter } from 'vue'
 import { createCollection } from './create-collection.ts'
 import { createItem } from './create-item.ts'
 import { useFlagRegistry } from './use-flag-registry.ts'
@@ -82,7 +83,7 @@ export function useCollection<
 ): Collection<TSource, TFlag, TProperties, $TId> {
   const flagRegistry = useFlagRegistry<TFlag, $TId>(config?.flags)
 
-  const sources = computed(() => toValue(_sources))
+  const sources = toComputed(_sources)
 
   const items = computed(() =>
     sources.value.map(source => {

package/lib/packages/form-select/use-form-option-controller.ts

@@ -1,5 +1,6 @@
+import { toComputed } from '@core/utils/to-computed.util.ts'
 import { unrefElement, useEventListener } from '@vueuse/core'
-import { computed, inject, type MaybeRefOrGetter, ref, toValue, watchEffect } from 'vue'
+import { inject, type MaybeRefOrGetter, ref, watchEffect } from 'vue'
 import { type FormOption, IK_FORM_SELECT_CONTROLLER } from './types.ts'
 
 export function useFormOptionController<TOption extends FormOption>(_option: MaybeRefOrGetter<TOption>) {
@@ -9,7 +10,7 @@ export function useFormOptionController<TOption extends FormOption>(_option: May
     throw new Error('useFormOption needs a FormSelectController to be injected')
   }
 
-  const option = computed(() => toValue(_option))
+  const option = toComputed(_option)
 
   const elementRef = ref<HTMLDivElement>()
 

package/lib/packages/form-select/use-form-select.ts

@@ -7,6 +7,7 @@ import {
 } from '@core/packages/collection'
 import type { EmptyObject, MaybeArray } from '@core/types/utility.type.ts'
 import { toArray } from '@core/utils/to-array.utils.ts'
+import { toComputed } from '@core/utils/to-computed.util.ts'
 import { computed, type ComputedRef, type MaybeRefOrGetter, provide, ref, type Ref, toRaw, toValue, watch } from 'vue'
 import { guessLabel } from './guess-label.ts'
 import { guessValue } from './guess-value.ts'
@@ -259,19 +260,19 @@ export function useFormSelect<
 
   const normalizedSearchTerm = computed(() => normalizeSearchTerm(searchTerm))
 
-  const isMultiple = computed(() => toValue(config?.multiple) ?? false) as ComputedRef<TMultiple>
+  const isMultiple = toComputed(config?.multiple, false) as ComputedRef<TMultiple>
 
-  const isDisabled = computed(() => toValue(config?.disabled) ?? false)
+  const isDisabled = toComputed(config?.disabled, false)
 
-  const isLoading = computed(() => toValue(config?.loading) ?? false)
+  const isLoading = toComputed(config?.loading, false)
 
-  const isRequired = computed(() => toValue(config?.required) ?? false)
+  const isRequired = toComputed(config?.required, false)
 
-  const placeholder = computed(() => toValue(config?.placeholder) ?? '')
+  const placeholder = toComputed(config?.placeholder, '')
 
-  const searchPlaceholder = computed(() => toValue(config?.searchPlaceholder) ?? '')
+  const searchPlaceholder = toComputed(config?.searchPlaceholder, '')
 
-  const isSearchable = computed(() => toValue(config?.searchable) ?? false)
+  const isSearchable = toComputed(config?.searchable, false)
 
   const sources = computed(() =>
     config?.emptyOption !== undefined ? [EMPTY_OPTION, ...toValue(baseSources)] : toValue(baseSources)

package/lib/packages/menu/action.ts

@@ -1,5 +1,6 @@
 import { BaseItem, type Menu, type MenuLike, parseConfigHolder } from '@core/packages/menu'
-import { computed, type MaybeRefOrGetter, reactive, ref, toValue } from 'vue'
+import { toComputed } from '@core/utils/to-computed.util'
+import { computed, type MaybeRefOrGetter, reactive, ref } from 'vue'
 
 export interface MenuActionConfig {
   handler: () => any
@@ -33,7 +34,7 @@ export class MenuAction extends BaseItem {
   }
 
   get busyConfig() {
-    return computed(() => toValue(this.config.busy) ?? false)
+    return toComputed(this.config.busy, false)
   }
 
   get isBusy() {
@@ -45,7 +46,7 @@ export class MenuAction extends BaseItem {
   }
 
   get disabledConfig() {
-    return computed(() => toValue(this.config.disabled) ?? false)
+    return toComputed(this.config.disabled, false)
   }
 
   get isDisabled() {

package/lib/packages/menu/link.ts

@@ -1,5 +1,6 @@
 import { BaseItem, type Menu, type MenuLike, parseConfigHolder } from '@core/packages/menu'
-import { computed, type MaybeRefOrGetter, reactive, toValue } from 'vue'
+import { toComputed } from '@core/utils/to-computed.util'
+import { type MaybeRefOrGetter, reactive } from 'vue'
 
 export interface MenuLinkConfig {
   href: MaybeRefOrGetter<string>
@@ -34,9 +35,9 @@ export class MenuLink extends BaseItem {
       as: 'a',
       onMouseenter: () => this.activate(),
       onClick: () => this.deactivate(),
-      href: computed(() => toValue(this.config.href)),
-      rel: computed(() => toValue(this.config.rel) ?? 'noreferrer noopener'),
-      target: computed(() => toValue(this.config.target) ?? '_blank'),
+      href: toComputed(this.config.href),
+      rel: toComputed(this.config.rel, 'noreferrer noopener'),
+      target: toComputed(this.config.target, '_blank'),
       'data-menu-id': this.menu.context.id,
     })
   }

package/lib/packages/menu/router-link.ts

@@ -1,5 +1,6 @@
 import { BaseItem, type Menu, type MenuLike, parseConfigHolder } from '@core/packages/menu'
-import { computed, markRaw, type MaybeRefOrGetter, reactive, toValue } from 'vue'
+import { toComputed } from '@core/utils/to-computed.util'
+import { markRaw, type MaybeRefOrGetter, reactive } from 'vue'
 import { type RouteLocationRaw, RouterLink } from 'vue-router'
 
 export interface MenuRouterLinkConfig {
@@ -31,7 +32,7 @@ export class MenuRouterLink extends BaseItem {
       as: markRaw(RouterLink),
       onMouseenter: () => this.activate(),
       onClick: () => this.deactivate(),
-      to: computed(() => toValue(this.config.to)),
+      to: toComputed(this.config.to),
       'data-menu-id': this.menu.context.id,
     })
   }

package/lib/packages/menu/toggle-target.ts

@@ -1,7 +1,8 @@
 import type { MenuToggleTrigger } from '@core/packages/menu'
+import { toComputed } from '@core/utils/to-computed.util'
 import { autoUpdate, flip, type Placement, shift, useFloating, type UseFloatingReturn } from '@floating-ui/vue'
 import { unrefElement } from '@vueuse/core'
-import { computed, reactive, ref, type Ref, toValue, type UnwrapRef } from 'vue'
+import { computed, reactive, ref, type Ref, type UnwrapRef } from 'vue'
 
 export interface MenuToggleTargetConfig {
   placement?: Placement
@@ -26,7 +27,7 @@ export class MenuToggleTarget {
     public config: MenuToggleTargetConfig
   ) {
     const { floatingStyles } = useFloating(trigger.element, this.element, {
-      placement: computed(() => toValue(config.placement) ?? 'bottom-start'),
+      placement: toComputed(config.placement, 'bottom-start'),
       open: trigger.isOpen,
       whileElementsMounted: autoUpdate,
       middleware: [shift(), flip()],