@xen-orchestra/web-core 0.35.1 → 0.37.0

package/lib/tables/types.ts

@@ -0,0 +1,7 @@
+import type { IconName } from '@core/icons/index.ts'
+import type { MaybeRefOrGetter } from 'vue'
+
+export type HeaderConfig = {
+  headerLabel?: MaybeRefOrGetter<string | undefined>
+  headerIcon?: MaybeRefOrGetter<IconName>
+}

package/lib/utils/size.util.ts

@@ -2,16 +2,12 @@ import { parse, raw, Scale, type Info } from 'human-format'
 
 const scale = Scale.create(['', 'KiB', 'MiB', 'GiB', 'TiB'], 1024)
 
-export function formatSizeRaw(bytes: number, decimals: number): Info<Scale<'B' | 'KiB' | 'MiB' | 'GiB' | 'TiB'>>
+export type SizeInfo = Info<Scale<'B' | 'KiB' | 'MiB' | 'GiB' | 'TiB'>>
+
+export function formatSizeRaw(bytes: number, decimals: number): SizeInfo
 export function formatSizeRaw(bytes: undefined, decimals: number): undefined
-export function formatSizeRaw(
-  bytes: undefined | number,
-  decimals: number
-): undefined | Info<Scale<'B' | 'KiB' | 'MiB' | 'GiB' | 'TiB'>>
-export function formatSizeRaw(
-  bytes: number | undefined,
-  decimals: number
-): Info<Scale<'B' | 'KiB' | 'MiB' | 'GiB' | 'TiB'>> | undefined {
+export function formatSizeRaw(bytes: number | undefined, decimals: number): SizeInfo | undefined
+export function formatSizeRaw(bytes: number | undefined, decimals: number): SizeInfo | undefined {
   if (bytes === undefined) {
     return undefined
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.35.1",
+  "version": "0.37.0",
   "private": false,
   "exports": {
     "./*": {

package/lib/components/data-table/VtsDataTable.vue

@@ -1,70 +0,0 @@
-<template>
-  <div class="table-container">
-    <VtsStateHero v-if="!isReady" format="table" busy size="medium" />
-    <VtsStateHero v-else-if="hasError" format="table" type="error" size="small" no-background>
-      {{ t('error-no-data') }}
-    </VtsStateHero>
-    <VtsStateHero v-else-if="noDataMessage" format="table" type="no-data" size="small">
-      {{ noDataMessage ? noDataMessage : t('no-data') }}
-    </VtsStateHero>
-    <VtsTable v-else vertical-border>
-      <thead>
-        <slot name="thead" />
-      </thead>
-      <tbody>
-        <slot name="tbody" />
-      </tbody>
-    </VtsTable>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import VtsStateHero from '@core/components/state-hero/VtsStateHero.vue'
-import VtsTable from '@core/components/table/VtsTable.vue'
-import { useI18n } from 'vue-i18n'
-
-defineProps<{
-  isReady?: boolean
-  hasError?: boolean
-  noDataMessage?: string
-}>()
-
-defineSlots<{
-  thead(): any
-  tbody(): any
-}>()
-
-const { t } = useI18n()
-</script>
-
-<style lang="postcss" scoped>
-.table-container {
-  display: flex;
-  flex-direction: column;
-  gap: 0.8rem;
-  overflow-x: auto;
-
-  :deep(tbody) tr {
-    &:hover {
-      cursor: pointer;
-      background-color: var(--color-brand-background-hover);
-    }
-
-    &:active {
-      background-color: var(--color-brand-background-active);
-    }
-
-    &.selected {
-      background-color: var(--color-brand-background-selected);
-    }
-
-    &:last-child {
-      border-bottom: 0.1rem solid var(--color-neutral-border);
-    }
-  }
-
-  :deep(th) {
-    width: 10rem;
-  }
-}
-</style>

package/lib/components/table/ColumnTitle.vue

@@ -1,152 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <MenuList :disabled placement="bottom-start">
-    <template #trigger="{ open, isOpen }">
-      <th
-        :class="{ interactive, disabled, focus: isOpen }"
-        class="column-header"
-        @click="ev => (interactive ? open(ev) : noop())"
-      >
-        <div class="content">
-          <span class="label">
-            <VtsIcon :name="icon" size="medium" />
-            <slot />
-          </span>
-          <VtsIcon :name="currentInteraction?.icon" size="medium" />
-        </div>
-      </th>
-    </template>
-    <MenuItem
-      v-for="interaction in interactions"
-      :key="interaction.id"
-      v-tooltip="t('coming-soon')"
-      :disabled="interaction.disabled"
-      :on-click="() => updateInteraction(interaction)"
-    >
-      <VtsIcon :name="interaction.icon" size="medium" />
-      {{ interaction.label }}
-      <i v-if="currentInteraction?.id === interaction.id" class="current-interaction typo-body-regular-small">
-        {{ t('core.current').toLowerCase() }}
-      </i>
-    </MenuItem>
-  </MenuList>
-</template>
-
-<script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import MenuItem from '@core/components/menu/MenuItem.vue'
-import MenuList from '@core/components/menu/MenuList.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
-import type { IconName } from '@core/icons'
-import { noop } from '@vueuse/core'
-import { computed, inject } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
-
-type InteractionId = 'sort-asc' | 'sort-desc' | 'group' | 'filter' | 'hide'
-type Interaction = {
-  disabled?: boolean
-  id: InteractionId
-  icon: IconName
-  label: string
-}
-
-const props = withDefaults(
-  defineProps<{
-    id?: string
-    icon?: IconName
-    interactive?: boolean
-    disabled?: boolean
-  }>(),
-  {
-    disabled: false,
-    interactive: true,
-  }
-)
-const { t } = useI18n()
-const router = useRouter()
-
-const interactions = computed<Interaction[]>(() => [
-  { id: 'sort-asc', icon: 'fa:arrow-down', label: t('core.sort.ascending'), disabled: true },
-  { id: 'sort-desc', icon: 'fa:arrow-up', label: t('core.sort.descending'), disabled: true },
-  { id: 'group', icon: 'fa:layer-group', label: t('core.group'), disabled: true },
-  { id: 'filter', icon: 'fa:filter', label: t('core.filter'), disabled: true },
-  { id: 'hide', icon: 'fa:eye-slash', label: t('core.hide'), disabled: true },
-])
-
-const tableName = inject<string>('tableName')
-
-const columnName = `${tableName}__${props.id}`
-
-const currentInteraction = computed(() =>
-  interactions.value.find(interaction => router.currentRoute.value.query[columnName] === interaction.id)
-)
-
-const updateInteraction = (interaction: Interaction) => {
-  router.replace({
-    query: {
-      [columnName]: interaction.id,
-    },
-  })
-}
-</script>
-
-<style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.column-header.interactive {
-  --color: var(--color-brand-txt-base);
-  --background-color: var(--color-neutral-background-primary);
-
-  &.focus {
-    --color: var(--color-brand-txt-base);
-    --background-color: var(--color-brand-background-selected);
-  }
-
-  &:hover {
-    --color: var(--color-brand-txt-hover);
-    --background-color: var(--color-brand-background-hover);
-  }
-
-  &:active {
-    --color: var(--color-brand-txt-active);
-    --background-color: var(--color-brand-background-active);
-  }
-
-  &.disabled {
-    --color: var(--color-neutral-txt-secondary);
-    --background-color: var(--color-neutral-background-disabled);
-  }
-}
-
-/* IMPLEMENTATION */
-.column-header.interactive {
-  cursor: pointer;
-  color: var(--color);
-  background-color: var(--background-color);
-
-  &.disabled {
-    cursor: not-allowed;
-  }
-}
-
-.current-interaction {
-  color: var(--color-neutral-txt-secondary);
-}
-
-.content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-}
-
-.label {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-
-.filter-icon {
-  cursor: pointer;
-}
-</style>

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

@@ -1,26 +0,0 @@
-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 }
-}

package/lib/packages/table/define-renderer/define-table-cell-renderer.ts

@@ -1,27 +0,0 @@
-import { type VNode, defineAsyncComponent, h } from 'vue'
-import {
-  type TableCellRenderer,
-  type TableCellVNode,
-  type Extensions,
-  applyExtensions,
-  type ComponentLoader,
-  type PropsOverride,
-} from '..'
-
-export function defineTableCellRenderer<
-  TComponentProps extends Record<string, any>,
-  TExtensions extends Extensions<TComponentProps>,
-  TPropsConfig extends Record<string, any>,
->(config: {
-  component: ComponentLoader<TComponentProps>
-  props?: (config: TPropsConfig) => PropsOverride<TComponentProps>
-  extensions?: TExtensions
-}): TableCellRenderer<TComponentProps, TExtensions, TPropsConfig> {
-  const component = defineAsyncComponent(config.component)
-
-  return function RenderCell(renderConfig) {
-    const extension = applyExtensions(config, renderConfig)
-
-    return h(component, extension.props) satisfies VNode as TableCellVNode
-  }
-}

package/lib/packages/table/define-renderer/define-table-renderer.ts

@@ -1,47 +0,0 @@
-import { type VNode, defineAsyncComponent, h } from 'vue'
-import {
-  applyExtensions,
-  type ComponentLoader,
-  type PropsOverride,
-  type Extensions,
-  type TableRenderer,
-  type TableVNode,
-} from '..'
-
-export function defineTableRenderer<
-  TComponentProps extends Record<string, any>,
-  TExtensions extends Extensions<TComponentProps>,
-  TPropsConfig extends Record<string, any>,
->(config: {
-  component: ComponentLoader<TComponentProps>
-  props?: (config: TPropsConfig) => PropsOverride<TComponentProps>
-  extensions?: TExtensions
-}): TableRenderer<TComponentProps, TExtensions, TPropsConfig> {
-  const component = defineAsyncComponent(config.component)
-
-  return function RenderTable(renderConfig) {
-    const { thead, tbody } = renderConfig
-
-    const renderThead =
-      typeof thead === 'function'
-        ? thead
-        : 'cells' in thead && thead.cells
-          ? () => h('thead', {}, h('tr', {}, { default: () => thead.cells() }))
-          : 'rows' in thead && thead.rows
-            ? () => h('thead', {}, { default: () => thead.rows() })
-            : () => undefined
-
-    const renderTbody =
-      typeof tbody === 'function'
-        ? tbody
-        : 'rows' in tbody && tbody.rows
-          ? () => h('tbody', {}, { default: () => tbody.rows() })
-          : () => undefined
-
-    const extension = applyExtensions(config, renderConfig)
-
-    return h(component, extension.props, () => {
-      return [renderThead(), renderTbody()]
-    }) satisfies VNode as TableVNode
-  }
-}

package/lib/packages/table/define-renderer/define-table-row-renderer.ts

@@ -1,29 +0,0 @@
-import { type VNode, defineAsyncComponent, h } from 'vue'
-import {
-  applyExtensions,
-  type TableRowRenderer,
-  type TableRowVNode,
-  type Extensions,
-  type ComponentLoader,
-  type PropsOverride,
-} from '..'
-
-export function defineRowRenderer<
-  TComponentProps extends Record<string, any>,
-  TExtensions extends Extensions<TComponentProps>,
-  TPropsConfig extends Record<string, any>,
->(config: {
-  component: ComponentLoader<TComponentProps>
-  props?: (config: TPropsConfig) => PropsOverride<TComponentProps>
-  extensions?: TExtensions
-}): TableRowRenderer<TComponentProps, TExtensions, TPropsConfig> {
-  const component = defineAsyncComponent(config.component)
-
-  return function RenderRow(renderConfig): TableRowVNode {
-    const extension = applyExtensions(config, renderConfig)
-
-    return h(component, extension.props, {
-      default: () => renderConfig.cells(),
-    }) satisfies VNode as TableRowVNode
-  }
-}

package/lib/packages/table/define-renderer/define-table-section-renderer.ts

@@ -1,29 +0,0 @@
-import { type VNode, defineAsyncComponent, h } from 'vue'
-import {
-  applyExtensions,
-  type TableSectionRenderer,
-  type TableSectionVNode,
-  type Extensions,
-  type ComponentLoader,
-  type PropsOverride,
-} from '..'
-
-export function defineSectionRenderer<
-  TComponentProps extends Record<string, any>,
-  TExtensions extends Extensions<TComponentProps>,
-  TPropsConfig extends Record<string, any>,
->(config: {
-  component: ComponentLoader<TComponentProps>
-  props?: (config: TPropsConfig) => PropsOverride<TComponentProps>
-  extensions?: TExtensions
-}): TableSectionRenderer<TComponentProps, TExtensions, TPropsConfig> {
-  const component = defineAsyncComponent(config.component)
-
-  return function RenderSection(renderConfig): TableSectionVNode {
-    const extension = applyExtensions(config, renderConfig)
-
-    return h(component, extension.props, {
-      default: () => renderConfig.rows(),
-    }) satisfies VNode as TableSectionVNode
-  }
-}

package/lib/packages/table/define-table/define-multi-source-table.ts

@@ -1,39 +0,0 @@
-import { type MaybeRefOrGetter } from 'vue'
-import { type Sources, type TransformProperty, transformSources } from '..'
-
-export function defineMultiSourceTable<
-  TSources extends Record<string, Sources>,
-  TConfig extends Record<string, unknown> = Record<string, unknown>,
->(setup: (sources: TSources, config: TConfig) => any) {
-  return function useTable<
-    TUseSources extends {
-      [K in keyof TSources]: any
-    },
-    TTransforms extends {
-      [K in keyof TSources]: TSources[K] extends Sources<infer T>
-        ? TransformProperty<T, TUseSources[K], K & string>[K & string]
-        : never
-    },
-  >(
-    sources: {
-      [K in keyof TUseSources]: MaybeRefOrGetter<TUseSources[K][]>
-    },
-    config: TConfig &
-      (Record<keyof TTransforms, undefined> extends TTransforms
-        ? { transform?: Partial<TTransforms> }
-        : {
-            transform: { [K in keyof TTransforms as undefined extends TTransforms[K] ? K : never]?: TTransforms[K] } & {
-              [K in keyof TTransforms as undefined extends TTransforms[K] ? never : K]: TTransforms[K]
-            }
-          })
-  ) {
-    const transformedSources = Object.fromEntries(
-      Object.entries(sources).map(([key, value]) => [
-        key,
-        transformSources(value, (config.transform as any)?.[key as any]),
-      ])
-    )
-
-    return setup(transformedSources as TSources, config)
-  }
-}

package/lib/packages/table/define-table/define-table.ts

@@ -1,13 +0,0 @@
-import { type MaybeRefOrGetter } from 'vue'
-import { type Sources, type TableVNode, type TransformProperty, transformSources } from '..'
-
-export function defineTable<TSource, TConfig extends Record<string, unknown> = Record<string, unknown>>(
-  setup: (sources: Sources<TSource>, config: TConfig) => () => TableVNode
-) {
-  return function useTable<TUseSource>(
-    sources: MaybeRefOrGetter<TUseSource[]>,
-    config: TConfig & TransformProperty<TSource, TUseSource>
-  ) {
-    return setup(transformSources<TSource>(sources, config?.transform), config)
-  }
-}

package/lib/packages/table/define-table/define-typed-table.ts

@@ -1,18 +0,0 @@
-import { type MaybeRefOrGetter } from 'vue'
-import { type Sources, type TransformProperty, transformSources } from '..'
-
-export function defineTypedTable<
-  TTypedSource extends { type: string; data: Sources },
-  TConfig extends Record<string, unknown> = Record<string, unknown>,
->(setup: (typedSource: TTypedSource, config: TConfig) => any) {
-  return function useTable<
-    TUseSource,
-    const TType extends TTypedSource['type'],
-    TSource extends TTypedSource extends { type: TType; data: Sources<infer TSource> } ? TSource : never,
-  >(type: TType, sources: MaybeRefOrGetter<TUseSource[]>, config: TConfig & TransformProperty<TSource, TUseSource>) {
-    return setup(
-      { type, data: transformSources<TSource>(sources, config.transform) } as unknown as TTypedSource,
-      config
-    )
-  }
-}

package/lib/packages/table/transform-sources.ts

@@ -1,13 +0,0 @@
-import { useArrayMap } from '@vueuse/shared'
-import { type MaybeRefOrGetter, type ComputedRef, computed, toValue } from 'vue'
-
-export function transformSources<TSource>(
-  sources: MaybeRefOrGetter<any[]>,
-  transformer?: (source: any, index: number) => any
-) {
-  return transformer
-    ? (useArrayMap(sources, (source, index) => ({ ...source, ...transformer!(source, index) })) as ComputedRef<
-        TSource[]
-      >)
-    : (computed(() => toValue(sources)) as unknown as ComputedRef<TSource[]>)
-}

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

@@ -1,16 +0,0 @@
-import type { PropsOverride, Renderer } from '.'
-
-export type Extension<
-  TConfig extends Record<string, any> = Record<string, any>,
-  TComponentProps extends Record<string, any> = Record<string, any>,
-> = (config: TConfig) => { props: PropsOverride<TComponentProps> }
-
-export type Extensions<TComponentProps extends Record<string, any>> = Record<string, Extension<any, TComponentProps>>
-
-export type ExtensionConfig<
-  TRenderer extends Renderer<any, any, any>,
-  TExtensionName extends keyof $Extensions,
-  $Extensions extends Record<string, any> = TRenderer extends Renderer<any, infer TExtensions, any>
-    ? { [K in keyof TExtensions]: Parameters<TExtensions[K]>[0] }
-    : never,
-> = $Extensions[TExtensionName]

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

@@ -1,47 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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/types/button.type.ts

@@ -1,3 +0,0 @@
-export type ButtonLevel = 'primary' | 'secondary' | 'tertiary'
-
-export type ButtonSize = 'small' | 'medium' | 'large'