@xen-orchestra/web-core 0.31.1 → 0.33.0

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))
 

package/lib/packages/table/README.md

@@ -0,0 +1,336 @@
+# Table System
+
+Table system that separates data logic from presentation through reusable renderers.
+
+## Understanding Renderers
+
+A **renderer** is a function that creates a VNode for a specific part of the table (cell, row, or table). When you define a renderer, you specify:
+
+1. **Component**: The Vue component to render (loaded asynchronously)
+2. **Props function** (optional): Default props based on configuration
+3. **Extensions** (optional): Named categories of additional functionality
+
+### Props System
+
+The `props` parameter is a function that receives an optional typed config and returns default props:
+
+```typescript
+const TextBody = defineTableCellRenderer({
+  component: () => import('./TextCell.vue'),
+  props: (config: { text: string }) => ({ data: config.text }),
+  //      ^ This config type will be enforced when using the renderer
+})
+
+// Usage - TypeScript knows you need to provide `text`
+TextBody({ text: 'Hello' })
+```
+
+When you use the renderer, you can:
+
+- Provide the expected config to satisfy the `props` function
+- Add additional props that will be merged
+- Override default props
+
+```typescript
+// The renderer merges:
+// 1. Props from the props function: { text: 'Hello' }
+// 2. Additional/override props: { class: 'custom' }
+TextBody({
+  text: 'Hello', // Used by props function
+  props: {
+    // Additional or override props
+    class: 'custom',
+  },
+})
+```
+
+### Extensions System
+
+Extensions work like the `props` function but are optional and named. Each extension:
+
+- Has a unique name (like `selectable`, `highlightable`)
+- Receives typed configuration
+- Returns the extension arguments (only `props` for now) to merge into the component
+
+```typescript
+const MyRow = defineTableRowRenderer({
+  component: () => import('./Row.vue'),
+  extensions: {
+    selectable: (config: { id: string; selectedId: Ref<string | null> }) => ({
+      props: {
+        selected: config.id === config.selectedId.value,
+      },
+    }),
+    highlightable: (config: { isHighlighted: boolean }) => ({
+      props: {
+        highlighted: config.isHighlighted,
+      },
+    }),
+  },
+})
+
+// Usage - provide config for the extensions you want to use
+MyRow({
+  cells: () => [...],
+  extensions: {
+    selectable: { id: user.id, selectedId },
+    highlightable: { isHighlighted: true },
+  }
+})
+```
+
+Extensions are optional when using the renderer - you only provide the ones you need.
+
+## Defining Renderers
+
+### Cell Renderers
+
+Create header and body cell renderers:
+
+```typescript
+import { defineTableCellRenderer } from '@core/packages/table'
+
+const TextHeader = defineTableCellRenderer({
+  component: () => import('./VtsHeaderCell.vue'),
+  props: (config: { label: string }) => ({
+    label: config.label,
+    icon: icon('fa:align-left'),
+  }),
+})
+
+const TextBody = defineTableCellRenderer({
+  component: () => import('./body-cells/VtsTextCell.vue'),
+  props: (config: { text: string | number }) => ({ text: config.text }),
+})
+
+// Usage
+TextHeader({ label: 'Name' })
+TextBody({ text: user.name })
+```
+
+### Row Renderers
+
+Create row renderer:
+
+```typescript
+import { defineTableRowRenderer } from '@core/packages/table'
+
+const DefaultRow = defineTableRowRenderer({
+  component: () => import('./VtsRow.vue'),
+})
+
+DefaultRow({
+  cells: () => [...]
+})
+```
+
+### Table Renderers
+
+Create table renderer:
+
+```typescript
+import { defineTableRenderer } from '@core/packages/table'
+
+const DefaultTable = defineTableRenderer({
+  component: () => import('./VtsTableNew.vue'),
+})
+
+// Usage
+DefaultTable({
+  thead: MyThead(...),
+  // thead: { rows: () => [...] },  // to use native "thead"
+  // thead: { cells: () => [...] }, // to use native "thead" + "tr",
+  tbody: MyTBody(...),
+  // tbody: { rows: () => [...] }, // to use native "tbody"
+})
+```
+
+## Building Tables
+
+### Column Definition
+
+Use `defineColumns` to create columns configuration.
+
+```typescript
+const columns = defineColumns({
+  name: {
+    header: () => TextHeader({ label: 'Name' }),
+    body: user => TextBody({ text: user.name }),
+  },
+  email: {
+    header: () => TextHeader({ label: 'Email' }),
+    body: user => TextBody({ text: user.email }),
+  },
+  // Conditional column
+  role: isAdmin
+    ? {
+        header: () => TextHeader({ label: 'Role' }),
+        body: user => TextBody({ text: user.role }),
+      }
+    : undefined,
+})
+```
+
+`header` and `body` can also take a config parameter if needed:
+
+```typescript
+const columns = defineColumns({
+  name: {
+    header: (config) => TextHeader(...),
+    body: (user, config) => TextBody(...),
+  },
+})
+```
+
+```typescript
+// API
+columns.getHeaderCells(config?) // Array of header cell VNodes
+columns.getBodyCells(user, config?) // Array of body cell VNodes for a row
+columns.toggleColumn('name') // Toggle column visibility
+columns.toggleColumn('name', true) // Force column visibility
+columns.visibleColumnsCount // ComputedRef<number>, useful for colspan
+```
+
+### Table Definition
+
+Use one of three table definition functions:
+
+#### Define basic single-source table: `defineTable`
+
+```typescript
+const { getHeaderCells, getBodyCells } = defineColumns(...)
+
+const useUserTable = defineTable((sources: ComputedRef<User[]>) =>
+  () => DefaultTable({
+    thead: {
+      cells: () => getHeaderCells()
+    },
+    tbody: {
+      rows: () => sources.value.map(user =>
+        DefaultRow({
+          cells: () => getBodyCells(user)
+        })
+      )
+    },
+  })
+)
+```
+
+```typescript
+// Usage
+const users = ref<User[]>([...])
+
+const table = useUserTable(users, {})
+```
+
+`defineTable` setup function can also define a config parameter as second argument:
+
+```typescript
+const useUserTable = defineTable((sources: ComputedRef<User[]>, config: { needThis: string }) => ...)
+
+const table = useUserTable(users, { needThis: 'value' })
+```
+
+#### Define type-discriminated table: `defineTypedTable`
+
+```typescript
+type Source = { type: 'user'; sources: ComputedRef<User[]> } | { type: 'admin'; sources: ComputedRef<Admin[]> }
+
+const useItemTable = defineTypedTable(({ type, sources }: Source) => {
+  // If type === 'user', sources is ComputedRef<User[]>
+  // If type === 'admin', sources is ComputedRef<Admin[]>
+
+  return () => DefaultTable({...})
+})
+
+// Usage
+useItemTable('admin', admins, {})
+```
+
+#### Define multiple sources table: `defineMultiSourceTable`
+
+```typescript
+type Sources = {
+  users: ComputedRef<User[]>
+  admins: ComputedRef<Admin[]>
+}
+
+const useDashboard = defineMultiSourceTable((sources: Sources) => {
+  // sources.users: ComputedRef<User[]>
+  // sources.admins: ComputedRef<Admin[]>
+
+  return () => DefaultTable({...})
+})
+
+// Usage
+useDashboard({ users, admins }, {})
+```
+
+### Source Transformation
+
+When using a defined table, if passed sources doesn't match expected sources, then a `transform` config will be required to add missing or incorrectly typed properties:
+
+```typescript
+type User = {
+  id: string
+  fullName: string
+}
+
+const useUserTable = defineTable((sources: ComputedRef<User[]>) => {})
+
+// Raw data has different shape
+interface RawUser {
+  uuid: string
+  firstName: string
+  lastName: string
+}
+
+// Transform is required when types don't match
+useUserTable(rawUsers, {
+  transform: user => ({
+    id: user.uuid,
+    fullName: `${user.firstName} ${user.lastName}`,
+  }),
+})
+
+// Transform is optional when types already match
+useUserTable(users, {})
+```
+
+## Rendering the table
+
+```vue
+<template>
+  <MyUsersTable />
+</template>
+
+<script setup lang="ts">
+const MyUsersTable = useUsersTable(users, {})
+</script>
+```
+
+## Props
+
+When a table is rendered, each element's props will be merged together in the following order:
+
+1. Props from the renderer `props` function
+2. Props from extensions `props` functions
+3. Props provided when using the renderer
+
+They will be merged with Vue's default merging strategy (for example, `class` and `style` will be concatenated).
+
+## API Reference
+
+### Renderer Functions
+
+- `defineTableRenderer` - Define table wrapper (`table`)
+- `defineTableSectionRenderer` - Define table sections (`thead` / `tbody`)
+- `defineTableRowRenderer` - Define table rows (`tr`)
+- `defineTableCellRenderer` - Define table cells (`th` / `td`)
+
+### Table Functions
+
+- `defineTable` - Single source table
+- `defineTypedTable` - Type-discriminated table
+- `defineMultiSourceTable` - Multiple sources table
+- `defineColumns` - Column definitions

package/lib/packages/table/apply-extensions.ts

@@ -0,0 +1,26 @@
+import type { Extensions } from '.'
+import { mergeProps } from 'vue'
+
+export function applyExtensions(
+  config: {
+    props?: (config: any) => Record<string, any>
+    extensions?: Extensions<any>
+  },
+  renderConfig: {
+    props?: Record<string, any>
+    extensions?: Record<string, any>
+  }
+): { props: Record<string, any> } {
+  const baseProps = mergeProps(config.props?.(renderConfig) ?? {}, renderConfig.props ?? {})
+
+  if (!renderConfig.extensions) {
+    return { props: baseProps }
+  }
+
+  const props = Object.entries(renderConfig.extensions).reduce(
+    (props, [extName, extData]) => mergeProps(props, config.extensions?.[extName!](extData).props ?? {}),
+    baseProps
+  )
+
+  return { props }
+}