@xen-orchestra/web-core 0.53.0 → 0.55.0

package/lib/packages/drawer/DrawerProvider.vue

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

package/lib/packages/drawer/README.md

@@ -0,0 +1,189 @@
+# Drawer System
+
+### Drawers list component
+
+Add `VtsDrawerList` once in your app layout. It renders all active drawers from the store.
+
+```vue
+<!-- App.vue -->
+<template>
+  ...
+  <VtsDrawerList />
+</template>
+
+<script lang="ts" setup>
+import VtsDrawerList from '@core/components/drawer/VtsDrawerList.vue'
+</script>
+```
+
+### Opening a drawer (`useDrawer` composable)
+
+```ts
+const openMyDrawer = useDrawer({
+  component: import('path/to/MyDrawer.vue'),
+  props: {
+    foo: 'Foo',
+  },
+  onConfirm: () => console.log('Confirmed!'),
+  onCancel: () => console.log('Cancelled!'),
+})
+```
+
+```html
+<button @click="openMyDrawer()">Open drawer</button>
+```
+
+| Property              | Type                                                              | Required | Default     | Description                                |
+| --------------------- | ----------------------------------------------------------------- | :------: | ----------- | ------------------------------------------ |
+| component             | `Promise<Component>`                                              |    ✓     |             | `import('path/to/drawer.vue')`             |
+| props                 | `Record<string, MaybeRef<any>>`                                   |          | `{}`        | Props passed to the drawer component       |
+| onConfirm             | `(...args: any[]) => TConfirmPayload \| Promise<TConfirmPayload>` |          | `undefined` | Called when the drawer is confirmed        |
+| onCancel              | `(...args: any[]) => TCancelPayload \| Promise<TCancelPayload>`   |          | `undefined` | Called when the drawer is cancelled        |
+| keepOpenOnRouteChange | `boolean`                                                         |          | `false`     | By default the drawer closes on navigation |
+
+`useDrawer()` with no arguments returns the raw `openDrawer(id, config)` function for advanced use cases where you manage the drawer ID yourself.
+
+### Drawer component
+
+A drawer component uses `VtsDrawer` and its sub-components:
+
+```vue
+<!-- MyDrawer.vue -->
+<template>
+  <VtsDrawer :dismissible>
+    <template #title>My Drawer</template>
+    <template #content>
+      <!-- your content here -->
+    </template>
+    <template #buttons>
+      <VtsDrawerCancelButton />
+      <VtsDrawerConfirmButton>Save</VtsDrawerConfirmButton>
+    </template>
+  </VtsDrawer>
+</template>
+
+<script lang="ts" setup>
+import VtsDrawer from '@core/components/drawer/VtsDrawer.vue'
+import VtsDrawerCancelButton from '@core/components/drawer/VtsDrawerCancelButton.vue'
+import VtsDrawerConfirmButton from '@core/components/drawer/VtsDrawerConfirmButton.vue'
+
+defineProps<{
+  dismissible?: boolean
+  // Injected by VtsDrawerList: true when this drawer is the topmost in the stack.
+  // Pass it through to VtsDrawer so only the current drawer reacts to Escape.
+  current?: boolean
+}>()
+</script>
+```
+
+`VtsDrawer` props:
+
+| Prop          | Type      | Default     | Description                                               |
+| ------------- | --------- | ----------- | --------------------------------------------------------- |
+| `dismissible` | `boolean` | `false`     | Allows closing via backdrop click, X button, and Escape   |
+| `isOpen`      | `boolean` | `undefined` | Controls visibility externally (uncontrolled by default)  |
+| `current`     | `boolean` | `undefined` | Pass through from parent props — controls Escape handling |
+
+When `isOpen` is omitted, `VtsDrawer` manages its own visibility internally (uncontrolled mode). In controlled mode (`:is-open` provided), the `dismiss` event is emitted instead of closing automatically.
+
+`VtsDrawerCancelButton` and `VtsDrawerConfirmButton` accept an optional `onClick` prop. When provided, the button emits a `click` event instead of triggering `onCancel`/`onConfirm`:
+
+```vue
+<VtsDrawerCancelButton :on-click="handleCustomCancel" />
+```
+
+### Opening with arguments
+
+```ts
+const openMyDrawer = useDrawer((name: string) => ({
+  component: import('path/to/MyDrawer.vue'),
+  props: { name },
+}))
+
+openMyDrawer('John')
+```
+
+### Payload and response
+
+Payloads are fully typed based on the return type of `onConfirm` and `onCancel`:
+
+```ts
+const openMyDrawer = useDrawer({
+  component: import('path/to/MyDrawer.vue'),
+  onConfirm: () => 'saved',
+  onCancel: () => 'aborted',
+})
+
+const result = await openMyDrawer()
+
+if (result.confirmed) {
+  result.payload // string
+} else {
+  result.payload // string
+}
+```
+
+If `onConfirm` or `onCancel` throws, the promise rejects with the thrown error.
+
+### `onConfirm` and `onCancel` event args
+
+If your drawer component defines args for `confirm` and `cancel` events, you'll get them as arguments of the `onConfirm` and `onCancel` callbacks:
+
+```vue
+<!-- MyDrawer.vue -->
+<script lang="ts" setup>
+defineEmits<{
+  confirm: [value: string]
+  cancel: []
+}>()
+</script>
+```
+
+```ts
+const openMyDrawer = useDrawer({
+  component: import('path/to/MyDrawer.vue'),
+  onConfirm: (value: string) => console.log('Confirmed with', value),
+})
+```
+
+### Busy state
+
+If `onConfirm` or `onCancel` returns a `Promise`, the buttons show a busy indicator while the promise is pending.
+
+**Important asymmetry:**
+
+- `onConfirm` closes the drawer **optimistically** before the async work runs. The drawer is gone before `await` settles.
+- `onCancel` waits for the async work to complete **before** closing the drawer.
+
+```ts
+const openMyDrawer = useDrawer({
+  component: import('path/to/MyDrawer.vue'),
+  onConfirm: async () => {
+    await saveToServer() // drawer is already closed while this runs
+  },
+  onCancel: async () => {
+    await cleanup() // drawer stays open while this runs, then closes
+  },
+})
+```
+
+### Aborting close
+
+Return `ABORT_DRAWER` from `onCancel` to keep the drawer open (e.g. to show a confirmation prompt):
+
+```ts
+const openMyDrawer = useDrawer({
+  component: import('path/to/MyDrawer.vue'),
+  onCancel: async () => {
+    if (!hasUnsavedChanges()) {
+      return
+    }
+    const confirmed = await confirmDiscard()
+    if (!confirmed) {
+      return ABORT_DRAWER // drawer stays open
+    }
+  },
+})
+```
+
+> **Note:** Returning `ABORT_DRAWER` from `onConfirm` does **not** keep the drawer open. The drawer is closed optimistically before `onConfirm` runs. Returning `ABORT_DRAWER` permanently prevents the promise from resolving — avoid it in `onConfirm`.

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

@@ -0,0 +1,119 @@
+import { useDrawerStore } from '@core/packages/drawer/drawer.store.ts'
+import {
+  ABORT_DRAWER,
+  DrawerCancelResponse,
+  type DrawerConfig,
+  DrawerConfirmResponse,
+  type DrawerHandlerArgs,
+  type DrawerResponse,
+} from '@core/packages/drawer/types.ts'
+import { computed, defineAsyncComponent, reactive, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+
+export function createDrawerOpener() {
+  const drawerStore = useDrawerStore()
+
+  const route = useRoute()
+
+  const ids = new Set<symbol | string>()
+  const cancelers = new Map<string | symbol, () => void>()
+
+  function closeById(id: string | symbol) {
+    drawerStore.removeDrawer(id)
+    ids.delete(id)
+    cancelers.delete(id)
+  }
+
+  if (route !== undefined) {
+    watch(
+      () => route.path,
+      () => {
+        ids.forEach(id => {
+          if (!drawerStore.getDrawer(id)?.keepOpenOnRouteChange) {
+            cancelers.get(id)?.()
+            closeById(id)
+          }
+        })
+      }
+    )
+  }
+
+  return function openDrawer<
+    TProps,
+    TConfirmArgs extends DrawerHandlerArgs<TProps, 'onConfirm'>,
+    TCancelArgs extends DrawerHandlerArgs<TProps, 'onCancel'>,
+    TConfirmPayload = undefined,
+    TCancelPayload = undefined,
+  >(id: string | symbol, config: DrawerConfig<TProps, TConfirmArgs, TCancelArgs, TConfirmPayload, TCancelPayload>) {
+    const close = () => closeById(id)
+
+    const promise = new Promise<DrawerResponse<TConfirmPayload, TCancelPayload>>((resolve, reject) => {
+      const isBusy = ref(false)
+
+      cancelers.set(id, () => resolve(new DrawerCancelResponse(undefined as TCancelPayload)))
+
+      drawerStore.addDrawer({
+        id,
+        component: defineAsyncComponent({
+          loader: () => config.component,
+          onError(_error, _retry, fail) {
+            fail()
+          },
+        }),
+        isBusy: computed(() => isBusy.value),
+        props: reactive(config.props ?? {}),
+        keepOpenOnRouteChange: config.keepOpenOnRouteChange ?? false,
+        onConfirm: async (...args: TConfirmArgs) => {
+          try {
+            isBusy.value = true
+
+            close()
+
+            const result = config.onConfirm ? await config.onConfirm(...args) : (undefined as TConfirmPayload)
+
+            if (result === ABORT_DRAWER || result instanceof DrawerCancelResponse) {
+              return
+            }
+
+            if (result instanceof DrawerConfirmResponse) {
+              resolve(result)
+            } else {
+              resolve(new DrawerConfirmResponse(result))
+            }
+          } catch (error) {
+            reject(error)
+          } 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_DRAWER || result instanceof DrawerCancelResponse) {
+              return
+            }
+
+            if (result instanceof DrawerConfirmResponse) {
+              resolve(new DrawerCancelResponse(result.payload))
+            } else {
+              resolve(new DrawerCancelResponse(result))
+            }
+
+            close()
+          } catch (error) {
+            reject(error)
+          } finally {
+            isBusy.value = false
+          }
+        },
+      })
+
+      ids.add(id)
+    })
+
+    return Object.assign(promise, { close })
+  }
+}

package/lib/packages/drawer/drawer.store.ts

@@ -0,0 +1,22 @@
+import type { RegisteredDrawer } from '@core/packages/drawer/types.ts'
+import { defineStore } from 'pinia'
+import { computed, shallowReactive } from 'vue'
+
+export const useDrawerStore = defineStore('drawer', () => {
+  const drawers = shallowReactive(new Map<symbol | string, RegisteredDrawer>())
+
+  const addDrawer = (drawer: RegisteredDrawer) => {
+    drawers.set(drawer.id, drawer)
+  }
+
+  const removeDrawer = (id: symbol | string) => {
+    drawers.delete(id)
+  }
+
+  return {
+    drawers: computed(() => Array.from(drawers.values())),
+    getDrawer: (id: symbol | string) => drawers.get(id),
+    addDrawer,
+    removeDrawer,
+  }
+})

package/lib/packages/drawer/types.ts

@@ -0,0 +1,93 @@
+import type { Component, ComputedRef, InjectionKey, MaybeRef } from 'vue'
+
+export type DrawerPropsOption<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 RegisteredDrawer = {
+  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 DrawerHandlerArgs<TProps, THandler extends 'onConfirm' | 'onCancel'> = TProps extends {
+  [K in THandler]?: (...args: infer TArgs) => any
+}
+  ? TArgs
+  : never
+
+export abstract class AbstractDrawerResponse<TPayload> {
+  constructor(public readonly payload: TPayload) {}
+
+  abstract get confirmed(): boolean
+  abstract get canceled(): boolean
+}
+
+export class DrawerConfirmResponse<TPayload> extends AbstractDrawerResponse<TPayload> {
+  public readonly confirmed = true
+  public readonly canceled = false
+}
+
+export class DrawerCancelResponse<TPayload> extends AbstractDrawerResponse<TPayload> {
+  public readonly confirmed = false
+  public readonly canceled = true
+}
+
+export type DrawerResponse<TConfirmPayload, TCancelPayload> =
+  | DrawerConfirmResponse<TConfirmPayload>
+  | DrawerCancelResponse<TCancelPayload>
+
+export const ABORT_DRAWER = Symbol('abort drawer')
+
+export type OpenDrawerReturn<TConfirmPayload, TCancelPayload> = Promise<
+  DrawerResponse<TConfirmPayload, TCancelPayload>
+> & {
+  close: () => void
+}
+
+export const IK_DRAWER = Symbol('drawer') as InjectionKey<ComputedRef<RegisteredDrawer>>
+
+export type DrawerPropsConfigEntry<TProps> =
+  AreAllPropsOptional<TProps> extends true
+    ? { props?: DrawerPropsOption<TProps> }
+    : { props: DrawerPropsOption<TProps> }
+
+export type DrawerConfig<
+  TProps,
+  TConfirmArgs extends any[],
+  TCancelArgs extends any[],
+  TConfirmPayload,
+  TCancelPayload,
+> = {
+  component: Promise<{
+    default: abstract new () => {
+      $props: TProps
+    }
+  }>
+  onConfirm?: (...args: TConfirmArgs) => MaybePromise<DrawerResponse<TConfirmPayload, any> | TConfirmPayload>
+  onCancel?: (...args: TCancelArgs) => MaybePromise<DrawerResponse<TCancelPayload, any> | TCancelPayload>
+  keepOpenOnRouteChange?: boolean
+} & DrawerPropsConfigEntry<TProps>
+
+export type UseDrawerReturn<TArgs extends any[] = any[], TConfirmPayload = any, TCancelPayload = any> = (
+  ...args: TArgs
+) => OpenDrawerReturn<TConfirmPayload, TCancelPayload>
+
+export type OpenDrawer = <
+  TProps,
+  TConfirmArgs extends DrawerHandlerArgs<TProps, 'onConfirm'>,
+  TCancelArgs extends DrawerHandlerArgs<TProps, 'onCancel'>,
+  TConfirmPayload = undefined,
+  TCancelPayload = undefined,
+>(
+  id: string,
+  config: DrawerConfig<TProps, TConfirmArgs, TCancelArgs, TConfirmPayload, TCancelPayload>
+) => OpenDrawerReturn<TConfirmPayload, TCancelPayload>

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

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

package/lib/packages/form-validation/custom-rules/ipv4-or-cidr.rule.ts

@@ -0,0 +1,17 @@
+import { createRule, type Maybe } from '@regle/core'
+import { isFilled } from '@regle/rules'
+
+const IPV4_OCTET = '(25[0-5]|2[0-4]\\d|1\\d{2}|[1-9]?\\d)'
+const IPV4_CIDR_PREFIX = '(3[0-2]|[12]?\\d)'
+const IP_OR_CIDR_REGEX = new RegExp(`^${IPV4_OCTET}(\\.${IPV4_OCTET}){3}(/${IPV4_CIDR_PREFIX})?$`)
+
+export const ipv4OrCidr = createRule({
+  validator(value: Maybe<string>) {
+    if (!isFilled(value)) {
+      return true
+    }
+
+    return IP_OR_CIDR_REGEX.test(value.trim())
+  },
+  message: 'Invalid IP address',
+})

package/lib/packages/form-validation/index.ts

@@ -1,4 +1,5 @@
 export * from './custom-rules/out-of-range.rule.ts'
+export * from './custom-rules/ipv4-or-cidr.rule.ts'
 export * from './merge-validation-configs.ts'
 export * from './types.ts'
 export * from './use-form-validation.ts'

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

@@ -22,16 +22,18 @@ export function createModalOpener() {
     ids.delete(id)
   }
 
-  watch(
-    () => route.path,
-    () => {
-      ids.forEach(id => {
-        if (!modalStore.getModal(id)?.keepOpenOnRouteChange) {
-          closeById(id)
-        }
-      })
-    }
-  )
+  if (route !== undefined) {
+    watch(
+      () => route.path,
+      () => {
+        ids.forEach(id => {
+          if (!modalStore.getModal(id)?.keepOpenOnRouteChange) {
+            closeById(id)
+          }
+        })
+      }
+    )
+  }
 
   return function openModal<
     TProps,

package/lib/tables/column-definitions/action-column.ts

@@ -9,7 +9,7 @@ import { h, toValue } from 'vue'
 export type { ActionItem }
 
 export const useActionColumn = defineColumn((config: HeaderConfig & Partial<ButtonIconConfig>) => ({
-  renderHead: () => renderHeadCell(config.headerIcon, config.headerLabel),
+  renderHead: () => renderHeadCell(config.headerLabel),
   renderBody: (params: { onClick: () => void; actions?: ActionItem[] }) =>
     h(VtsActionCell, {
       buttonIcon: toValue(config.buttonIcon ?? 'fa:eye'),

package/lib/tables/column-definitions/address-column.ts

@@ -1,4 +1,4 @@
 import { useCollapsedListColumn } from '@core/tables/column-definitions/collapsed-list-column.ts'
 import type { HeaderConfig } from '@core/tables/types.ts'
 
-export const useAddressColumn = (config?: HeaderConfig) => useCollapsedListColumn({ headerIcon: 'fa:at', ...config })
+export const useAddressColumn = (config?: HeaderConfig) => useCollapsedListColumn(config)

package/lib/tables/column-definitions/button-column.ts

@@ -17,7 +17,7 @@ type ButtonConfig = {
 }
 
 export const useButtonColumn = defineColumn((config?: HeaderConfig & ButtonConfig) => ({
-  renderHead: () => renderHeadCell(config?.headerIcon, config?.headerLabel),
+  renderHead: () => renderHeadCell(config?.headerLabel),
   renderBody: (label: string, onClick: () => void, props?: Partial<ButtonProps>) =>
     renderBodyCell(() =>
       h(

package/lib/tables/column-definitions/button-icon-column.ts

@@ -16,7 +16,7 @@ export type ButtonIconConfig = {
 }
 
 export const useButtonIconColumn = defineColumn((config: HeaderConfig & ButtonIconConfig) => ({
-  renderHead: () => renderHeadCell(config.headerIcon, config.headerLabel),
+  renderHead: () => renderHeadCell(config.headerLabel),
   renderBody: (onClick: () => void) =>
     h(UiTableCell, { align: 'center', style: 'width: 6rem' }, () =>
       h(UiButtonIcon, {

package/lib/tables/column-definitions/collapsed-list-column.ts

@@ -7,6 +7,6 @@ import { toArray } from '@core/utils/to-array.utils.ts'
 import { h } from 'vue'
 
 export const useCollapsedListColumn = defineColumn((config?: HeaderConfig) => ({
-  renderHead: () => renderHeadCell(config?.headerIcon ?? 'fa:square-caret-down', config?.headerLabel),
+  renderHead: () => renderHeadCell(config?.headerLabel),
   renderBody: (items: MaybeArray<string>) => h(VtsCollapsedListCell, { items: toArray(items) }),
 }))

package/lib/tables/column-definitions/date-column.ts

@@ -13,7 +13,7 @@ export const useDateColumn = defineColumn((config?: HeaderConfig & DateConfig) =
   const { d } = useI18n()
 
   return {
-    renderHead: () => renderHeadCell(config?.headerIcon ?? 'fa:calendar', config?.headerLabel),
+    renderHead: () => renderHeadCell(config?.headerLabel),
     renderBody: (date?: DateLike, options?: { relative?: boolean }) => {
       return renderBodyCell(() => {
         if (date === undefined) {

package/lib/tables/column-definitions/double-link-column.ts

@@ -5,7 +5,7 @@ import type { HeaderConfig } from '@core/tables/types.ts'
 import { h } from 'vue'
 
 export const useDoubleLinkColumn = defineColumn((config?: HeaderConfig) => ({
-  renderHead: () => renderHeadCell(config?.headerIcon ?? 'fa:a', config?.headerLabel),
+  renderHead: () => renderHeadCell(config?.headerLabel),
   renderBody: (link: { label: string } & VtsDoubleLinkCellProps) => {
     const { label, ...doubleLinkCellProps } = link
 

package/lib/tables/column-definitions/info-column.ts

@@ -7,6 +7,6 @@ import type { HeaderConfig } from '@core/tables/types.ts'
 import { h } from 'vue'
 
 export const useInfoColumn = defineColumn((config?: HeaderConfig) => ({
-  renderHead: () => renderHeadCell(config?.headerIcon ?? 'fa:square-caret-down', config?.headerLabel),
+  renderHead: () => renderHeadCell(config?.headerLabel),
   renderBody: (label: string, accent: InfoAccent) => renderBodyCell(() => h(UiInfo, { accent }, () => label)),
 }))

package/lib/tables/column-definitions/input-column.ts

@@ -11,11 +11,7 @@ type InputConfig = {
 }
 
 export const useInputColumn = defineColumn((config?: HeaderConfig & InputConfig) => ({
-  renderHead: () =>
-    renderHeadCell(
-      config?.headerIcon ?? (config?.type === 'number' ? 'fa:hashtag' : 'fa:align-left'),
-      config?.headerLabel
-    ),
+  renderHead: () => renderHeadCell(config?.headerLabel),
   renderBody: (model: Ref<string | number | undefined>, inputProps?: { disabled?: boolean }) =>
     renderBodyCell(() =>
       h(UiInput, {

package/lib/tables/column-definitions/link-column.ts

@@ -5,7 +5,7 @@ import type { HeaderConfig } from '@core/tables/types.ts'
 import { h } from 'vue'
 
 export const useLinkColumn = defineColumn((config?: HeaderConfig) => ({
-  renderHead: () => renderHeadCell(config?.headerIcon ?? 'fa:a', config?.headerLabel),
+  renderHead: () => renderHeadCell(config?.headerLabel),
   renderBody: (link: { label: string } & VtsLinkCellProps) => {
     const { label, ...linkCellProps } = link
 

package/lib/tables/column-definitions/link-or-text-column.ts

@@ -6,7 +6,7 @@ import type { HeaderConfig } from '@core/tables/types.ts'
 import { h } from 'vue'
 
 export const useLinkOrTextColumn = defineColumn((config?: HeaderConfig) => ({
-  renderHead: () => renderHeadCell(config?.headerIcon, config?.headerLabel),
+  renderHead: () => renderHeadCell(config?.headerLabel),
   renderBody: (link: { label: string; suffix?: string } & VtsLinkCellProps) => {
     const { label, suffix, ...linkCellProps } = link
 

package/lib/tables/column-definitions/literal-column.ts

@@ -4,6 +4,6 @@ import { renderHeadCell } from '@core/tables/helpers/render-head-cell'
 import type { HeaderConfig } from '@core/tables/types.ts'
 
 export const useLiteralColumn = defineColumn((config?: HeaderConfig) => ({
-  renderHead: () => renderHeadCell(config?.headerIcon ?? 'fa:square-caret-down', config?.headerLabel),
+  renderHead: () => renderHeadCell(config?.headerLabel),
   renderBody: (value: any) => renderBodyCell(() => value),
 }))