@xen-orchestra/web-core 0.31.1 → 0.33.0

package/lib/locales/sv.json

@@ -1,5 +1,8 @@
 {
+  "2nd-last": "2:a från slutet",
+  "3rd-last": "3:e från slutet",
   "about": "Om",
+  "accept-self-signed-certificates": "Acceptera självsignerade certifikat",
   "access-forum": "Gå till forum",
   "access-xoa": "Anslut till XOA",
   "account-organization-more": "Konto, organisation och mer…",
@@ -22,8 +25,11 @@
   "alarm-type.sr_io_throughput_total_per_host": "SR IO genomströmning totalt per host överskrider @:n-percent",
   "alarm-type.unknown": "Okänd larm-typ",
   "alarms": "Larm",
+  "all-done": "Allt klart!",
   "all-good": "Allt är bra!",
+  "all-quiet-launchpad": "Allt tyst på launchpad:en",
   "allow-self-signed-ssl": "Du kan behöva tillåta själv-signerade SSL-certifikat i din webbläsare",
+  "api-error-details": "API fel-detaljer",
   "appearance": "Utseende",
   "ascending": "stigande",
   "auto-generated": "Automatiskt generad",
@@ -32,9 +38,24 @@
   "available-properties-for-advanced-filter": "Tillgängliga egenskaper för avancerade filter:",
   "back-pool-dashboard": "Gå tillbaka till din Pool-översikt",
   "back-site-dashboard": "Gå tillbaka till din översikt",
+  "backed-up-pools": "Säkerhetskopierade Pooler",
+  "backed-up-vms": "Säkerhetskopierade VM:ar",
   "backup": "Säkerhetskopiera",
   "backup-issues": "Säkerhetskopieringsproblem",
+  "backup-jobs": "Säkerhetskopieringsjobb",
+  "backup-network": "Säkerhetskopieringsnätverk",
+  "backup-repositories": "Säkerhetskopieringsförvaring",
   "backup-repository": "Säkerhetskopieringsförvaring (lokalt, NFS, SMB)",
+  "backup-targets": "Säkerhetskopieringsmål",
+  "backup.continuous-replication": "Kontinuerlig replikering",
+  "backup.disaster-recovery": "Katastrofåterställning",
+  "backup.full": "Fullständig säkerhetskopiering",
+  "backup.incremental": "Inkrementell säkerhetskopiering",
+  "backup.metadata": "Säkerhetskopiering av metadata",
+  "backup.mirror": "Speglad säkerhetskopiering",
+  "backup.pool-metadata": "Pool-metadata",
+  "backup.rolling-snapshot": "Rullande ögonblicksbild",
+  "backup.xo-config": "XO-konfig",
   "backups": "Säkerhetskopieringar",
   "backups.jobs": "Jobb",
   "backups.jobs.at-least-one-skipped": "Minst en hoppades över",
@@ -62,19 +83,28 @@
   "bytes.ki": "KiB",
   "bytes.mi": "MiB",
   "cancel": "Avbryt",
+  "cbt-destroy-snapshot-data": "Rensa ögonblicksdata när CBT används",
   "change-state": "Ändra",
   "check-errors": "Kontrollera felen:",
   "check-summing": "TX checksumma",
+  "checkpoint-snapshot": "Kontrollpunkt för ögonblicksbild",
   "click-to-display-alarms": "Klicka för att visa larm:",
   "click-to-return-default-pool": "Klicka här för att återgå till standardpoolen",
   "close": "Stäng",
   "coming-soon": "Kommer snart!",
   "community": "Community",
   "community-name": "{name} community",
+  "compression": "Komprimering",
+  "concurrency": "Samtidighet",
   "configuration": "Konfiguration",
+  "configure-in-xo-5": "Konfigurera i XO 5",
   "confirm-cancel": "Är du säker på att du vill avbryta?",
   "confirm-delete": "Du kommer att radera {0}",
+  "connect": "Anslut",
+  "connect-another-pool": "Anslut annan pool",
+  "connect-pool": "Anslut pool",
   "connected": "Ansluten",
+  "connected-to-ip": "Anslut till {ip}",
   "connecting": "Ansluter",
   "connection": "Anslutning",
   "connection-failed": "Anslutning misslyckades",
@@ -82,7 +112,9 @@
   "console": "Konsol",
   "console-actions": "Konsolverktyg",
   "console-clipboard": "Konsolurklipp",
+  "console-offline": "Konsoll nedstängd",
   "console-unavailable": "Konsolen är inte tillgänglig",
+  "console-unavailable-reason": "Konsollen är inte längre tillgänglig då {type} är avstängd.",
   "control-domain-memory": "Kontrolldomänens minne",
   "copy": "Kopiera",
   "copy-all": "Kopiera allt",
@@ -98,6 +130,7 @@
   "core.group": "Grupp",
   "core.hide": "Göm",
   "core.open": "Öppna",
+  "core.open-in-new-tab": "Öppna i ny tabb",
   "core.pagination.all": "Alla",
   "core.pagination.show-by": "Sortera efter",
   "core.query-search-bar.label": "Sökmotor",
@@ -127,14 +160,20 @@
   "cpu-usage": "CPU-nyttjande",
   "cpu-weight": "CPU-vikt",
   "cpus": "CPU:er",
+  "crash-dump-storage-repository": "Lagringsplats för crashloggar",
   "create": "Skapa",
+  "created-by": "Skapad av",
+  "created-on": "Skapad",
+  "cron-pattern": "Cron-mönster",
   "custom-config": "Skräddarsydd konfiguration",
   "dark-mode.auto": "Automatiskt mörkt läge",
   "dark-mode.disable": "Inaktivera mörkt läge",
   "dark-mode.enable": "Aktivera mörkt läge",
   "dashboard": "Kontrollpanel",
+  "date": "Datum",
   "default-behavior": "Standardbeteende",
   "default-locking-mode": "Standard låsläge",
+  "default-storage-repository": "Standard lagringsplats",
   "delete": "Radera",
   "delete-vms": "Radera 1 VM | Radera {n} VMar",
   "deploy": "Driftsätt",
@@ -164,10 +203,12 @@
   "edit-config": "Ändra konfiguration",
   "enabled": "Aktiverad",
   "end-of-life": "Slutdatum",
+  "engines-off": "Motor avslagen, satellitbana stabil",
   "eol": "EOL",
   "error": "Fel",
   "error-no-data": "Fel, kan inte samla data.",
   "error-occurred": "Ett fel har uppstått",
+  "excluded-vms-tags": "Exkluderade VM-taggar",
   "exit-fullscreen": "Stäng fullskärm",
   "expiration-date": "Utgångsdatum",
   "export": "Exportera",
@@ -177,6 +218,7 @@
   "export-vm": "Exportera VM",
   "export-vms": "Exportera VMar",
   "export-vms-manually-information": "Vissa VM-exporter kunde inte startas automatiskt, troligen på grund av dina webbläsarinställningar. För att exportera dem, klicka på varje VM. (Alternativt, kopiera länken.)",
+  "failure": "Misslyckande",
   "fast-clone": "Snabb-kloning",
   "fetching-fresh-data": "Hämtar nya data",
   "filter.comparison.contains": "Innehåller",
@@ -206,14 +248,20 @@
   "go-back": "Gå tillbaka",
   "gpus": "GPU:er",
   "graphics-display": "Grafik & Skärm",
+  "guest-tools": "Gästverktyg",
   "gzip": "gzip",
   "hardware": "Hårdvara",
   "hardware-specifications": "Hårdvaruspecifikationer",
+  "heartbeat-storage-repository": "Lagringsplats för hjärtslag",
   "here": "Här",
+  "hide-successful-items": "Göm lyckade objekt i misslyckanderapporter",
   "high-availability": "Hög tillgänglighet (HA)",
   "host": "Host",
+  "host-currently-shutdown": "Denna host är i nuläget nedstängd, data kan inte hämtas.",
   "host-description": "Host-beskrivning",
   "host-internal-networks": "Host-interna nätverk",
+  "host-not-running": "Host:en kör inte",
+  "host-off": "Hosten är avstängd",
   "host-status.halted": "Stoppad",
   "host-status.running": "Kör",
   "host-status.unknown": "Okänt",
@@ -229,6 +277,7 @@
   "hyper-threading": "Multitrådning (SMT)",
   "id": "ID",
   "in-last-three-jobs": "I de senaste tre jobben",
+  "in-progress": "Pågående",
   "install-settings": "Installationsinställningar",
   "interfaces": "Gränssnitt | Gränssnitt | Gränssnitten",
   "interrupted": "Avbruten",
@@ -236,9 +285,11 @@
   "ip-address": "IP-adress",
   "ip-addresses": "IP-adresser",
   "ip-mode": "IP-läge",
+  "ip-port-placeholder": "adress[:port]",
   "is-primary-host": "{name} är den primära hosten",
   "iscsi-iqn": "iSCSI IQN",
   "iso-dvd": "ISO/DVD",
+  "job-name": "Jobbnamn",
   "job.vm-copy.bad-power-state": "VMen måste vara stoppad",
   "job.vm-copy.in-progress": "Kopiering pågår…",
   "job.vm-copy.missing-vms": "Ingen VM att kopiera",
@@ -286,6 +337,9 @@
   "keep-me-logged": "Håll mig inloggad",
   "keep-page-open": "Uppdatera inte och stäng inte tabben innan driftsättningen är klar.",
   "language": "Språk",
+  "last": "Senaste",
+  "last-n-runs": "Senaste körning | Senaste {n} körningar",
+  "last-run-number": "Senaste körning #{n}",
   "last-week": "Föregående vecka",
   "learn-more": "Läs mer",
   "license-socket": "Licensiera sockel",
@@ -293,8 +347,8 @@
   "licensing": "Licensiering",
   "load-average": "Genomsnittslast",
   "load-now": "Ladda nu",
-  "loading-hosts": "Ladda hostar…",
   "loading": "Laddning pågår…",
+  "loading-hosts": "Ladda hostar…",
   "locking-mode": "Låsläge",
   "locking-mode-default": "Standard låsläge",
   "log-out": "Logga ut",

package/lib/locales/uk.json

@@ -3,9 +3,9 @@
   "3rd-last": "3-й останній",
   "about": "Про нас",
   "accept-self-signed-certificates": "Приймати самопідписані сертифікати",
-  "access-forum": "Перейти на форум",
+  "access-forum": "Доступ до форуму",
   "access-xoa": "Доступ до XOA",
-  "account-organization-more": "Обліковий запис, організація та багато іншого…",
+  "account-organization-more": "Обліковий запис, організація та інше…",
   "add": "Додати",
   "add-filter": "Додати фільтр",
   "add-or": "+АБО",
@@ -201,11 +201,11 @@
   "expiration-date": "Термін придатності",
   "export": "Експорт",
   "export-n-vms": "Експортовано 1 VM | Експортовано {n} VMs",
-  "export-n-vms-manually": "Експорт однієї ВМ вручну |  Експорт {n} ВМ вручну",
+  "export-n-vms-manually": "Експорт однієї ВМ вручну | Експорт {n} ВМ вручну",
   "export-table-to": "Експорт таблиці в {type}",
   "export-vm": "Експорт VM",
   "export-vms": "Експорт VMs",
-  "export-vms-manually-information": "Експорт деяких ВМ не вдалося запустити автоматично, ймовірно, через ваші налаштування браузера. Для експорту натисніть на кожну ВМ. (Або скопіюйте посилання).",
+  "export-vms-manually-information": "Експорт деяких ВМ не вдалося запустити автоматично, ймовірно, через ваші налаштування браузера. Для експорту натисніть на кожну ВМ. (Або скопіюйте посилання.)",
   "failure": "Критична помилка",
   "fast-clone": "Швидке клонування",
   "fetching-fresh-data": "Отримання свіжих даних",

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()],

package/lib/packages/modal/ModalProvider.vue

@@ -0,0 +1,17 @@
+<template>
+  <slot />
+</template>
+
+<script lang="ts" setup>
+import { IK_MODAL, type RegisteredModal } from '@core/packages/modal/types.ts'
+import { computed, provide } from 'vue'
+
+const { modal } = defineProps<{
+  modal: RegisteredModal
+}>()
+
+provide(
+  IK_MODAL,
+  computed(() => modal)
+)
+</script>

package/lib/packages/modal/README.md

@@ -0,0 +1,253 @@
+# Modal System
+
+### Modals list component
+
+First, create a component which will display the modals.
+
+If needed, you can use the `ModalProvider` component to provide the `modal` to children components.
+
+For example:
+
+```vue
+<template>
+  <div v-if="modalStore.modals.length > 0" class="modals">
+    <ModalProvider v-for="modal of modalStore.modals" :key="modal.id" :modal>
+      <component :is="modal.component" class="modal" v-bind="modal.bindings" />
+    </ModalProvider>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const modalStore = useModalStore()
+</script>
+
+<style lang="postcss" scoped>
+.modals {
+  position: fixed;
+  inset: 0;
+  background-color: var(--color-opacity-primary);
+  z-index: 1010;
+
+  .modal:not(:last-child) {
+    filter: brightness(0.8);
+  }
+}
+</style>
+```
+
+### Modal component
+
+You then need to create a Modal component which will emit `confirm` and `cancel` events, as needed.
+
+```vue
+<template>
+  <div class="modal-container">
+    <div class="modal">
+      <h1>My modal</h1>
+      <button @click="emit('confirm')">Confirm</button>
+      <button @click="emit('cancel')">Cancel</button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const emit = defineEmits<{
+  confirm: []
+  cancel: []
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.modal-container {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.modal {
+  background: white;
+  border-radius: 8px;
+  padding: 2rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+</style>
+```
+
+### Opening a modal (`useModal` composable)
+
+You can create a function to open a modal with `useModal`
+
+```ts
+const openModal = useModal(config)
+```
+
+| Property              | Type                                  | Required |   Default   | Description                                                                                                                                  |
+| --------------------- | ------------------------------------- | :------: | :---------: | -------------------------------------------------------------------------------------------------------------------------------------------- |
+| component             | `Promise<Component>`                  |    ✓     |             | The promise of the modal component to open. (e.g: `component: import('path/to/modal.vue')`                                                   |
+| props                 | `Record<string, MaybeRef<any>>`       |          |    `{}`     | The props to pass to the modal component                                                                                                     |
+| onConfirm             | `(...args: any[]) => TConfirmPayload` |          | `undefined` | An optional callback to call when the modal is confirmed. It will take the args of the `confirm` event of the modal's `defineEmits`, if any. |
+| onCancel              | `(...args: any[]) => TCancelPayload`  |          | `undefined` | An optional callback to call when the modal is cancelled. It will take the args of the `cancel` event of the modal's `defineEmits`, if any.  |
+| keepOpenOnRouteChange | `boolean`                             |          |   `false`   | By default, the modal will close when the use navigates away from the page. If `true`, the modal will stay open until it is closed manually. |
+
+The result of `openModal()` will be `Promise<ModalConfirmResponse<TConfirmPayload> | ModalCancelResponse<TCancelPayload>>`
+
+If `onConfirm` / `onCancel` returns a `Promise`, then the modal will not close until the promise is resolved, and its `busy` state will be set to `true`.
+
+```ts
+const openMyModal = useModal({
+  component: import('path/to/MyModal.vue'),
+  props: {
+    foo: 'Foo',
+    bar: computed(() => someBar),
+  },
+  onConfirm: () => console.log('Confirmed!'),
+  onCancel: () => console.log('Cancelled!'),
+})
+```
+
+```html
+<button @click="openModal()">Open modal</button>
+```
+
+## Modal payload
+
+Modal payloads are fully typed.
+
+```ts
+const openMyModal = useModal({
+  component: import('path/to/MyModal.vue'),
+  onConfirm: () => 'Hello',
+  onCancel: () => 1234,
+})
+
+const result = await openMyModal()
+
+if (result.confirmed) {
+  result.payload // string
+} else {
+  result.payload // number
+}
+```
+
+## Opening a modal with arguments
+
+You can pass a function returning a config instead of a config object.
+
+```ts
+const openMyModal = useModal((name: string) => ({
+  component: import('path/to/MyModal.vue'),
+  props: { name },
+  onConfirm: () => console.log('Confirmed for', name),
+  onCancel: () => console.log('Cancelled for', name),
+})
+```
+
+```html
+<button @click="openMyModal('John')">Open John modal</button>
+<button @click="openMyModal('Jane')">Open Jane modal</button>
+```
+
+## `onConfirm` and `onCancel` event args
+
+If your Modal component defines args for `confirm` and `cancel` events, you'll get them as arguments of the `onConfirm` and `onCancel` callbacks.
+
+```vue
+<!-- MyModal.vue -->
+<template>
+  <div class="modal-container">
+    <div class="modal">
+      <h1>My modal</h1>
+      <button @click="emit('confirm', 1)">Select 1</button>
+      <button @click="emit('confirm', 10)">Select 10</button>
+      <button @click="emit('cancel')">Cancel</button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineEmits<{
+  confirm: [count: number]
+  cancel: []
+}>()
+```
+
+```ts
+const openModal = useModal({
+  component: import('path/to/MyModal.vue'),
+  onConfirm: (count: number) => console.log('Confirmed with count', count),
+})
+</script>
+```
+
+## Opening a modal from elsewhere
+
+`useModal` muse be called at the root of your component.
+
+If you need to open a modal from elsewhere, you can use `useModal()` with no arguments to get a function that you can call later to open the modal.
+
+```ts
+const openModal = useModal()
+
+function myHandler() {
+  return someApiManager.doSomething(myArg, openModal)
+}
+
+// api-manager.ts
+
+function doSomething(arg: string, openModal: OpenModal) {
+  // ... do something
+
+  openModal('some-id', {
+    component: import('path/to/MyModal.vue'),
+    props: { arg },
+    onConfirm: () => console.log('Confirmed!'),
+    onCancel: () => console.log('Cancelled!'),
+  })
+}
+```
+
+## Chaining modals
+
+You can open a modal from another modal.
+
+For example, you can open a confirmation modal ("Are you sure...") from the `onConfirm` of a delete modal, or from the `onCancel` of a form modal which has unsaved changes.
+
+If the second modal is canceled, the first modal will stay open.
+
+```ts
+const openModal = useModal()
+
+const openDeleteModal = useModal({
+  component: import('path/to/DeleteModal.vue'),
+  onConfirm: () =>
+    openModal('confirm-delete', {
+      component: import('path/to/ConfirmModal.vue'),
+      props: { message: 'Are you sure?' },
+      onConfirm: async () => {
+        console.log('Deleting...')
+        await deleteResource()
+      },
+    }),
+})
+```
+
+## Aborting the closing of a modal
+
+If you want to prevent a modal from closing manually, you can return the `ABORT_MODAL` symbol from the `onConfirm` or `onCancel` handlers.
+
+```ts
+const openModal = useModal()
+
+const openDeleteModal = useModal({
+  component: import('path/to/DeleteModal.vue'),
+  onConfirm: async () => {
+    try {
+      await tryingToDeleteResource()
+    } catch (e) {
+      return ABORT_MODAL
+    }
+  },
+})
+```