@xen-orchestra/web-core 0.31.1 → 0.32.0

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
+    }
+  },
+})
+```

package/lib/packages/modal/create-modal-opener.ts

@@ -0,0 +1,103 @@
+import { useModalStore } from '@core/packages/modal/modal.store.ts'
+import {
+  ABORT_MODAL,
+  ModalCancelResponse,
+  type ModalConfig,
+  ModalConfirmResponse,
+  type ModalHandlerArgs,
+  type ModalResponse,
+} from '@core/packages/modal/types.ts'
+import { computed, defineAsyncComponent, reactive, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+export function createModalOpener() {
+  const modalStore = useModalStore()
+
+  const route = useRoute()
+
+  const ids = new Set<symbol | string>()
+
+  function closeById(id: string | symbol) {
+    modalStore.removeModal(id)
+    ids.delete(id)
+  }
+
+  watch(
+    () => route.path,
+    () => {
+      ids.forEach(id => {
+        if (!modalStore.getModal(id)?.keepOpenOnRouteChange) {
+          closeById(id)
+        }
+      })
+    }
+  )
+
+  return function openModal<
+    TProps,
+    TConfirmArgs extends ModalHandlerArgs<TProps, 'onConfirm'>,
+    TCancelArgs extends ModalHandlerArgs<TProps, 'onCancel'>,
+    TConfirmPayload = undefined,
+    TCancelPayload = undefined,
+  >(id: string | symbol, config: ModalConfig<TProps, TConfirmArgs, TCancelArgs, TConfirmPayload, TCancelPayload>) {
+    const close = () => closeById(id)
+
+    const promise = new Promise<ModalResponse<TConfirmPayload, TCancelPayload>>(resolve => {
+      const isBusy = ref(false)
+
+      modalStore.addModal({
+        id,
+        component: defineAsyncComponent(() => config.component),
+        isBusy: computed(() => isBusy.value),
+        props: reactive(config.props ?? {}),
+        keepOpenOnRouteChange: config.keepOpenOnRouteChange ?? false,
+        onConfirm: async (...args: TConfirmArgs) => {
+          try {
+            isBusy.value = true
+
+            const result = config.onConfirm ? await config.onConfirm(...args) : (undefined as TConfirmPayload)
+
+            if (result === ABORT_MODAL || result instanceof ModalCancelResponse) {
+              return
+            }
+
+            if (result instanceof ModalConfirmResponse) {
+              resolve(result)
+            } else {
+              resolve(new ModalConfirmResponse(result))
+            }
+
+            close()
+          } finally {
+            isBusy.value = false
+          }
+        },
+        onCancel: async (...args: TCancelArgs) => {
+          try {
+            isBusy.value = true
+
+            const result = config.onCancel ? await config.onCancel(...args) : (undefined as TCancelPayload)
+
+            if (result === ABORT_MODAL || result instanceof ModalCancelResponse) {
+              return
+            }
+
+            if (result instanceof ModalConfirmResponse) {
+              resolve(new ModalCancelResponse(result.payload))
+            } else {
+              resolve(new ModalCancelResponse(result))
+            }
+
+            close()
+          } finally {
+            isBusy.value = false
+          }
+        },
+      })
+    })
+
+    return Object.assign(promise, {
+      close,
+    })
+  }
+}

package/lib/packages/modal/modal.store.ts

@@ -0,0 +1,22 @@
+import type { RegisteredModal } from '@core/packages/modal/types.ts'
+import { defineStore } from 'pinia'
+import { computed, shallowReactive } from 'vue'
+
+export const useModalStore = defineStore('new-modal', () => {
+  const modals = shallowReactive(new Map<symbol | string, RegisteredModal>())
+
+  const addModal = (modal: RegisteredModal) => {
+    modals.set(modal.id, modal)
+  }
+
+  const removeModal = (id: symbol | string) => {
+    modals.delete(id)
+  }
+
+  return {
+    modals: computed(() => Array.from(modals.values())),
+    getModal: (id: symbol | string) => modals.get(id),
+    addModal,
+    removeModal,
+  }
+})

package/lib/packages/modal/types.ts

@@ -0,0 +1,92 @@
+import type { MaybeRef } from '@vueuse/core'
+import type { Component, ComputedRef, InjectionKey } from 'vue'
+
+export type ModalPropsOption<TProps> = {
+  [K in keyof TProps]: MaybeRef<TProps[K]>
+}
+
+export type MaybePromise<T> = T | Promise<T>
+
+export type AreAllPropsOptional<TProps> = Record<string, never> extends TProps ? true : false
+
+export type RegisteredModal = {
+  id: symbol | string
+  component: Component
+  keepOpenOnRouteChange: boolean
+  props: object
+  isBusy: ComputedRef<boolean>
+  onConfirm: (...args: any[]) => void | Promise<void>
+  onCancel: (...args: any[]) => void | Promise<void>
+}
+
+export type ModalHandlerArgs<TProps, THandler extends 'onConfirm' | 'onCancel'> = TProps extends {
+  [K in THandler]?: (...args: infer TArgs) => any
+}
+  ? TArgs
+  : never
+
+export abstract class AbstractModalResponse<TPayload> {
+  constructor(public readonly payload: TPayload) {}
+
+  abstract get confirmed(): boolean
+  abstract get canceled(): boolean
+}
+
+export class ModalConfirmResponse<TPayload> extends AbstractModalResponse<TPayload> {
+  public readonly confirmed = true
+  public readonly canceled = false
+}
+
+export class ModalCancelResponse<TPayload> extends AbstractModalResponse<TPayload> {
+  public readonly confirmed = false
+  public readonly canceled = true
+}
+
+export type ModalResponse<TConfirmPayload, TCancelPayload> =
+  | ModalConfirmResponse<TConfirmPayload>
+  | ModalCancelResponse<TCancelPayload>
+
+export const ABORT_MODAL = Symbol('abort modal')
+
+export type OpenModalReturn<TConfirmPayload, TCancelPayload> = Promise<
+  ModalResponse<TConfirmPayload, TCancelPayload>
+> & {
+  close: () => void
+}
+
+export const IK_MODAL = Symbol('modal') as InjectionKey<ComputedRef<RegisteredModal>>
+
+export type ModalPropsConfigEntry<TProps> =
+  AreAllPropsOptional<TProps> extends true ? { props?: ModalPropsOption<TProps> } : { props: ModalPropsOption<TProps> }
+
+export type ModalConfig<
+  TProps,
+  TConfirmArgs extends any[],
+  TCancelArgs extends any[],
+  TConfirmPayload,
+  TCancelPayload,
+> = {
+  component: Promise<{
+    default: abstract new () => {
+      $props: TProps
+    }
+  }>
+  onConfirm?: (...args: TConfirmArgs) => MaybePromise<ModalResponse<TConfirmPayload, any> | TConfirmPayload>
+  onCancel?: (...args: TCancelArgs) => MaybePromise<ModalResponse<TCancelPayload, any> | TCancelPayload>
+  keepOpenOnRouteChange?: boolean
+} & ModalPropsConfigEntry<TProps>
+
+export type UseModalReturn<TArgs extends any[] = any[], TConfirmPayload = any, TCancelPayload = any> = (
+  ...args: TArgs
+) => OpenModalReturn<TConfirmPayload, TCancelPayload>
+
+export type OpenModal = <
+  TProps,
+  TConfirmArgs extends ModalHandlerArgs<TProps, 'onConfirm'>,
+  TCancelArgs extends ModalHandlerArgs<TProps, 'onCancel'>,
+  TConfirmPayload = undefined,
+  TCancelPayload = undefined,
+>(
+  id: string,
+  config: ModalConfig<TProps, TConfirmArgs, TCancelArgs, TConfirmPayload, TCancelPayload>
+) => OpenModalReturn<TConfirmPayload, TCancelPayload>

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

@@ -0,0 +1,53 @@
+import { createModalOpener } from '@core/packages/modal/create-modal-opener.ts'
+import { type ModalConfig, type ModalHandlerArgs, type UseModalReturn } from '@core/packages/modal/types.ts'
+
+export function useModal(): ReturnType<typeof createModalOpener>
+
+export function useModal<
+  TProps,
+  TConfirmArgs extends ModalHandlerArgs<TProps, 'onConfirm'>,
+  TCancelArgs extends ModalHandlerArgs<TProps, 'onCancel'>,
+  TConfirmPayload = undefined,
+  TCancelPayload = undefined,
+>(
+  config: ModalConfig<TProps, TConfirmArgs, TCancelArgs, TConfirmPayload, TCancelPayload>
+): UseModalReturn<[], TConfirmPayload, TCancelPayload>
+
+export function useModal<
+  TConfigBuilderArgs extends any[],
+  TProps,
+  TConfirmArgs extends ModalHandlerArgs<TProps, 'onConfirm'>,
+  TCancelArgs extends ModalHandlerArgs<TProps, 'onCancel'>,
+  TConfirmPayload = undefined,
+  TCancelPayload = undefined,
+>(
+  configBuilder: (
+    ...args: TConfigBuilderArgs
+  ) => ModalConfig<TProps, TConfirmArgs, TCancelArgs, TConfirmPayload, TCancelPayload>
+): UseModalReturn<TConfigBuilderArgs, TConfirmPayload, TCancelPayload>
+
+export function useModal<
+  TConfigBuilderArgs extends any[],
+  TProps,
+  TConfirmArgs extends ModalHandlerArgs<TProps, 'onConfirm'>,
+  TCancelArgs extends ModalHandlerArgs<TProps, 'onCancel'>,
+  TConfig extends ModalConfig<TProps, TConfirmArgs, TCancelArgs, TConfirmPayload, TCancelPayload>,
+  TConfirmPayload = undefined,
+  TCancelPayload = undefined,
+>(
+  configOrBuilder?: TConfig | ((...args: TConfigBuilderArgs) => TConfig)
+): UseModalReturn<TConfigBuilderArgs, TConfirmPayload, TCancelPayload> | ReturnType<typeof createModalOpener> {
+  const openModal = createModalOpener()
+
+  if (configOrBuilder === undefined) {
+    return openModal
+  }
+
+  const id = Symbol('modal')
+
+  return (...args: TConfigBuilderArgs) => {
+    const config = typeof configOrBuilder === 'function' ? configOrBuilder(...args) : configOrBuilder
+
+    return openModal(id, config)
+  }
+}

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

@@ -1,10 +1,11 @@
+import { toComputed } from '@core/utils/to-computed.util.ts'
 import type { Progress } from './types.ts'
-import { computed, type MaybeRefOrGetter, toValue } from 'vue'
+import { computed, type MaybeRefOrGetter } from 'vue'
 
 export function useProgress(rawCurrent: MaybeRefOrGetter<number>, rawTotal: MaybeRefOrGetter<number>): Progress {
-  const current = computed(() => toValue(rawCurrent))
+  const current = toComputed(rawCurrent)
 
-  const total = computed(() => toValue(rawTotal))
+  const total = toComputed(rawTotal)
 
   const percentage = computed(() => (total.value === 0 ? 0 : (current.value / total.value) * 100))