@xen-orchestra/web-core 0.31.1 → 0.32.0

package/lib/packages/table/types/index.ts

@@ -0,0 +1,47 @@
+import type { Extensions, TableRenderer, TableCellRenderer, TableRowRenderer, TableSectionRenderer } from '.'
+import type { ComputedRef } from 'vue'
+
+export * from './table-cell'
+export * from './table-row'
+export * from './extensions'
+export * from './table'
+export * from './table-section'
+
+export type ComponentLoader<TProps> = () => Promise<{
+  default: abstract new () => {
+    $props: TProps
+  }
+}>
+
+export type PropsOverride<TComponentProps> = Partial<TComponentProps> & Record<string, any>
+
+export type Renderer<
+  TComponentProps extends Record<string, any>,
+  TExtensions extends Extensions<TComponentProps>,
+  TPropsConfig extends Record<string, any>,
+> =
+  | TableRenderer<TComponentProps, TExtensions, TPropsConfig>
+  | TableSectionRenderer<TComponentProps, TExtensions, TPropsConfig>
+  | TableRowRenderer<TComponentProps, TExtensions, TPropsConfig>
+  | TableCellRenderer<TComponentProps, TExtensions, TPropsConfig>
+
+export type Sources<T = any> = ComputedRef<T[]>
+
+export type TransformProperty<
+  TSource,
+  TUseSource,
+  TPropertyName extends string = 'transform',
+> = TUseSource extends TSource
+  ? { [K in TPropertyName]?: (source: TUseSource, index: number) => Partial<TSource> }
+  : {
+      [K in TPropertyName]: (
+        source: TUseSource,
+        index: number
+      ) => Partial<TSource> & {
+        [K in keyof TSource as K extends keyof TUseSource
+          ? TUseSource[K] extends TSource[K]
+            ? never
+            : K
+          : K]: TSource[K]
+      }
+    }

package/lib/packages/table/types/table-cell.ts

@@ -0,0 +1,18 @@
+import type { Branded } from '@core/types/utility.type'
+import type { PropsOverride, Extensions } from '.'
+import type { VNode } from 'vue'
+
+export type TableCellVNode = Branded<'CellVNode', VNode>
+
+export type TableCellVNodes = TableCellVNode | TableCellVNodes[]
+
+export type TableCellRenderer<
+  TComponentProps extends Record<string, any>,
+  TExtensions extends Extensions<TComponentProps>,
+  TPropsConfig extends Record<string, any>,
+> = (
+  renderConfig: {
+    extensions?: { [K in keyof TExtensions]?: Parameters<TExtensions[K]>[0] }
+    props?: PropsOverride<TComponentProps>
+  } & TPropsConfig
+) => TableCellVNode

package/lib/packages/table/types/table-row.ts

@@ -0,0 +1,20 @@
+import type { Branded } from '@core/types/utility.type'
+import type { PropsOverride, Extensions, TableCellVNodes } from '.'
+import type { VNode } from 'vue'
+
+export type TableRowVNode = Branded<'RowVNode', VNode>
+
+export type TableRowVNodes = TableRowVNode | TableRowVNodes[]
+
+export type TableRowRenderer<
+  TComponentProps extends Record<string, any>,
+  TExtensions extends Extensions<TComponentProps>,
+  TPropsConfig extends Record<string, any>,
+> = (
+  renderConfig: {
+    extensions?: { [K in keyof TExtensions]?: Parameters<TExtensions[K]>[0] }
+    key: string | number
+    props?: PropsOverride<TComponentProps>
+    cells: () => TableCellVNodes
+  } & TPropsConfig
+) => TableRowVNode

package/lib/packages/table/types/table-section.ts

@@ -0,0 +1,19 @@
+import type { Branded } from '@core/types/utility.type'
+import type { PropsOverride, Extensions, TableRowVNodes } from '.'
+import type { VNode } from 'vue'
+
+export type TableSectionVNode = Branded<'SectionVNode', VNode>
+
+export type TableSectionVNodes = TableSectionVNode | TableSectionVNodes[]
+
+export type TableSectionRenderer<
+  TComponentProps extends Record<string, any>,
+  TExtensions extends Extensions<TComponentProps>,
+  TPropsConfig extends Record<string, any>,
+> = (
+  renderConfig: {
+    extensions?: { [K in keyof TExtensions]?: Parameters<TExtensions[K]>[0] }
+    rows: () => TableRowVNodes
+    props?: PropsOverride<TComponentProps>
+  } & TPropsConfig
+) => TableSectionVNode

package/lib/packages/table/types/table.ts

@@ -0,0 +1,28 @@
+import type { Branded } from '@core/types/utility.type'
+import type {
+  TableCellVNodes,
+  PropsOverride,
+  TableRowVNodes,
+  TableSectionVNode,
+  TableSectionVNodes,
+  Extensions,
+} from '.'
+import type { VNode } from 'vue'
+
+export type TableVNode = Branded<'TableVNode', VNode>
+
+export type TableRenderer<
+  TComponentProps extends Record<string, any>,
+  TExtensions extends Extensions<TComponentProps>,
+  TPropsConfig extends Record<string, any>,
+> = (
+  renderConfig: {
+    extensions?: { [K in keyof TExtensions]?: Parameters<TExtensions[K]>[0] }
+    props?: PropsOverride<TComponentProps>
+    thead:
+      | (() => TableSectionVNode)
+      | { rows: () => TableRowVNodes; cells?: never }
+      | { rows?: never; cells: () => TableCellVNodes }
+    tbody: (() => TableSectionVNodes) | { rows: () => TableRowVNodes }
+  } & TPropsConfig
+) => TableVNode

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

@@ -1,13 +1,14 @@
 import type { ThresholdConfig, ThresholdResult } from '@core/packages/threshold/type.ts'
-import { computed, type ComputedRef, type MaybeRefOrGetter, toValue } from 'vue'
+import { toComputed } from '@core/utils/to-computed.util'
+import { computed, type ComputedRef, type MaybeRefOrGetter } from 'vue'
 
 export function useThreshold<TPayload>(
   rawCurrentValue: MaybeRefOrGetter<number>,
   rawConfig: MaybeRefOrGetter<ThresholdConfig<TPayload>>
 ): ComputedRef<ThresholdResult<TPayload>> {
-  const currentValue = computed(() => toValue(rawCurrentValue))
+  const currentValue = toComputed(rawCurrentValue)
 
-  const config = computed(() => toValue(rawConfig))
+  const config = toComputed(rawConfig)
 
   return computed(
     () =>

package/lib/types/vue-virtual-scroller.d.ts

@@ -0,0 +1,101 @@
+declare module 'vue-virtual-scroller' {
+  import { type ObjectEmitsOptions, type PublicProps, type SetupContext, type SlotsType, type VNode } from 'vue'
+
+  interface RecycleScrollerProps<T> {
+    items: readonly T[]
+    direction?: 'vertical' | 'horizontal'
+    itemSize?: number | null
+    gridItems?: number
+    itemSecondarySize?: number
+    minItemSize?: number
+    sizeField?: string
+    typeField?: string
+    keyField?: keyof T
+    pageMode?: boolean
+    prerender?: number
+    buffer?: number
+    emitUpdate?: boolean
+    updateInterval?: number
+    listClass?: string
+    itemClass?: string
+    listTag?: string
+    itemTag?: string
+  }
+
+  interface DynamicScrollerProps<T> extends RecycleScrollerProps<T> {
+    minItemSize: number
+  }
+
+  interface RecycleScrollerEmitOptions extends ObjectEmitsOptions {
+    resize: () => void
+    visible: () => void
+    hidden: () => void
+    update: (startIndex: number, endIndex: number, visibleStartIndex: number, visibleEndIndex: number) => void
+    'scroll-start': () => void
+    'scroll-end': () => void
+  }
+
+  interface RecycleScrollerSlotProps<T> {
+    item: T
+    index: number
+    active: boolean
+  }
+
+  interface RecycleScrollerSlots<T> {
+    default(slotProps: RecycleScrollerSlotProps<T>): unknown
+    before(): unknown
+    empty(): unknown
+    after(): unknown
+  }
+
+  export interface RecycleScrollerInstance {
+    getScroll(): { start: number; end: number }
+    scrollToItem(index: number): void
+    scrollToPosition(position: number): void
+  }
+
+  export const RecycleScroller: <T>(
+    props: RecycleScrollerProps<T> & PublicProps,
+    ctx?: SetupContext<RecycleScrollerEmitOptions, SlotsType<RecycleScrollerSlots<T>>>,
+    expose?: (exposed: RecycleScrollerInstance) => void
+  ) => VNode & {
+    __ctx?: {
+      props: RecycleScrollerProps<T> & PublicProps
+      expose(exposed: RecycleScrollerInstance): void
+      slots: RecycleScrollerSlots<T>
+    }
+  }
+
+  export const DynamicScroller: <T>(
+    props: DynamicScrollerProps<T> & PublicProps,
+    ctx?: SetupContext<RecycleScrollerEmitOptions, SlotsType<RecycleScrollerSlots<T>>>,
+    expose?: (exposed: RecycleScrollerInstance) => void
+  ) => VNode & {
+    __ctx?: {
+      props: DynamicScrollerProps<T> & PublicProps
+      expose(exposed: RecycleScrollerInstance): void
+      slots: RecycleScrollerSlots<T>
+    }
+  }
+
+  interface DynamicScrollerItemProps<T> {
+    item: T
+    active: boolean
+    sizeDependencies?: unknown[]
+    watchData?: boolean
+    tag?: string
+    emitResize?: boolean
+    onResize?: () => void
+  }
+
+  interface DynamicScrollerItemEmitOptions extends ObjectEmitsOptions {
+    resize: () => void
+  }
+
+  export const DynamicScrollerItem: <T>(
+    props: DynamicScrollerItemProps<T> & PublicProps,
+    ctx?: SetupContext<DynamicScrollerItemEmitOptions>
+  ) => VNode
+
+  export function IdState(options?: { idProp?: (value: any) => unknown }): ComponentOptionsMixin
+}

package/lib/utils/injection-keys.util.ts

@@ -1,4 +1,5 @@
 import type { InputWrapperController } from '@core/components/input-wrapper/VtsInputWrapper.vue'
+import type { ModalAccent } from '@core/components/ui/modal/UiModal.vue'
 import type { ValueFormatter } from '@core/types/chart'
 import type { ComputedRef, InjectionKey, Ref } from 'vue'
 
@@ -21,3 +22,5 @@ export const IK_MENU_TELEPORTED = Symbol('IK_MENU_TELEPORTED') as InjectionKey<b
 export const IK_DISABLED = Symbol('IK_DISABLED') as InjectionKey<ComputedRef<boolean>>
 
 export const IK_INPUT_WRAPPER_CONTROLLER = Symbol('IK_INPUT_WRAPPER_CONTROLLER') as InjectionKey<InputWrapperController>
+
+export const IK_MODAL_ACCENT = Symbol('IK_MODAL_ACCENT') as InjectionKey<ComputedRef<ModalAccent>>

package/lib/utils/progress.util.ts

@@ -8,6 +8,7 @@ import type { ThresholdConfig } from '@core/packages/threshold/type.ts'
 import { formatSize } from '@core/utils/size.util.ts'
 import { computed, type ComputedRef, type MaybeRefOrGetter, type Reactive, toValue } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { toComputed } from './to-computed.util'
 
 export function defaultProgressThresholds(tooltip?: string): ThresholdConfig<ProgressBarThresholdPayload> {
   return {
@@ -42,7 +43,7 @@ export function useProgressToLegend(
 ) {
   const { n } = useI18n()
 
-  const type = computed(() => toValue(rawType))
+  const type = toComputed(rawType)
 
   function toLegend(label: string, progress: Progress | Reactive<Progress>): ProgressBarLegend | undefined {
     switch (type.value) {

package/lib/utils/to-computed.util.ts

@@ -0,0 +1,15 @@
+import { computed, toValue, type ComputedRef, type MaybeRefOrGetter } from 'vue'
+
+export function toComputed<TValue>(value: MaybeRefOrGetter<TValue>): ComputedRef<TValue>
+
+export function toComputed<TValue>(
+  value: MaybeRefOrGetter<TValue | undefined>,
+  defaultValue: MaybeRefOrGetter<TValue>
+): ComputedRef<TValue>
+
+export function toComputed<TValue>(
+  value: MaybeRefOrGetter<TValue>,
+  defaultValue?: MaybeRefOrGetter<TValue>
+): ComputedRef<TValue | undefined> {
+  return computed(() => toValue(value) ?? toValue(defaultValue))
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.31.1",
+  "version": "0.32.0",
   "private": false,
   "exports": {
     "./*": {
@@ -29,7 +29,8 @@
     "ndjson-readablestream": "^1.3.0",
     "placement.js": "^1.0.0-beta.5",
     "simple-icons": "^14.14.0",
-    "vue-echarts": "^6.6.8"
+    "vue-echarts": "^6.6.8",
+    "vue-virtual-scroller": "^2.0.0-beta.8"
   },
   "peerDependencies": {
     "pinia": "^3.0.1",

package/lib/components/backup-state/VtsBackupState.vue

@@ -1,37 +0,0 @@
-<template>
-  <UiInfo :accent="state.accent" class="vts-backup-state">
-    {{ state.text }}
-  </UiInfo>
-</template>
-
-<script lang="ts" setup>
-import UiInfo, { type InfoAccent } from '@core/components/ui/info/UiInfo.vue'
-import { useMapper } from '@core/packages/mapper'
-import { useI18n } from 'vue-i18n'
-
-const { state: _state } = defineProps<{
-  state: BackupState
-}>()
-
-const { t } = useI18n()
-
-type BackupState = 'success' | 'failure' | 'skipped' | 'interrupted' | 'pending'
-
-const state = useMapper<BackupState, { text: string; accent: InfoAccent }>(
-  () => _state,
-  {
-    success: { text: t('success'), accent: 'success' },
-    failure: { text: t('failure'), accent: 'danger' },
-    skipped: { text: t('skipped'), accent: 'warning' },
-    interrupted: { text: t('interrupted'), accent: 'danger' },
-    pending: { text: t('pending'), accent: 'info' },
-  },
-  'failure'
-)
-</script>
-
-<style lang="postcss" scoped>
-.vts-backup-state {
-  font-size: 1rem;
-}
-</style>

package/lib/components/connection-status/VtsConnectionStatus.vue

@@ -1,36 +0,0 @@
-<template>
-  <UiInfo :accent="currentStatus.accent">
-    {{ currentStatus.text }}
-  </UiInfo>
-</template>
-
-<script setup lang="ts">
-import UiInfo, { type InfoAccent } from '@core/components/ui/info/UiInfo.vue'
-import { computed, type ComputedRef } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-export type ConnectionStatus =
-  | 'connected'
-  | 'disconnected'
-  | 'partially-connected'
-  | 'disconnected-from-physical-device'
-  | 'physically-disconnected'
-type ConnectionStatusesMap = Record<ConnectionStatus, { text: string; accent: InfoAccent }>
-
-const { status } = defineProps<{
-  status: ConnectionStatus
-}>()
-
-const { t } = useI18n()
-
-const statuses: ComputedRef<ConnectionStatusesMap> = computed(() => ({
-  connected: { text: t('connected'), accent: 'success' },
-  disconnected: { text: t('disconnected'), accent: 'danger' },
-  'partially-connected': { text: t('partially-connected'), accent: 'warning' },
-  'disconnected-from-physical-device': { text: t('disconnected-from-physical-device'), accent: 'warning' },
-  // This status is used in host pif side panel
-  'physically-disconnected': { text: t('disconnected-from-physical-device'), accent: 'danger' },
-}))
-
-const currentStatus = computed(() => statuses.value[status])
-</script>