@xen-orchestra/web-core 0.55.0 → 0.56.0

package/lib/stores/panel.store.ts

@@ -1,12 +1,63 @@
 import { useUiStore } from '@core/stores/ui.store'
+import { useLocalStorage } from '@vueuse/core'
 import { defineStore } from 'pinia'
-import { computed, ref } from 'vue'
+import { computed, watch } from 'vue'
 
 export const usePanelStore = defineStore('panel', () => {
   const uiStore = useUiStore()
-  const isExpanded = ref(false)
-  const open = () => (isExpanded.value = true)
-  const close = () => (isExpanded.value = false)
+  const isExpanded = useLocalStorage('panel.expanded', true)
+  const isLocked = useLocalStorage('panel.locked', true)
 
-  return { open, close, isExpanded: computed(() => !uiStore.isSmall || isExpanded.value) }
+  const cssHorizontalOffset = computed(() => (isExpanded.value ? 0 : '100%'))
+  /* Panel closes automatically when it has no content (true on small UI or when not locked) */
+  const syncsOpenStateWithSelection = computed(() => uiStore.isSmall || !isLocked.value)
+
+  function expand() {
+    isExpanded.value = true
+  }
+
+  function collapse() {
+    isExpanded.value = false
+  }
+
+  function syncWithSelection(hasSelection: boolean) {
+    if (!syncsOpenStateWithSelection.value) {
+      return
+    }
+    if (!hasSelection && isExpanded.value) {
+      collapse()
+    } else if (hasSelection && !isExpanded.value) {
+      expand()
+    }
+  }
+
+  function toggleLock() {
+    const next = !isLocked.value
+    isLocked.value = next
+    if (next && !uiStore.isSmall && !isExpanded.value) {
+      expand()
+    }
+  }
+
+  watch(
+    () => uiStore.isSmall,
+    isSmall => {
+      /* Expand when coming back from small to large UI, if locked and not expanded */
+      if (!isSmall && isLocked.value && !isExpanded.value) {
+        expand()
+      }
+    },
+    { immediate: true }
+  )
+
+  return {
+    isExpanded,
+    isLocked,
+    syncsOpenStateWithSelection,
+    expand,
+    collapse,
+    toggleLock,
+    syncWithSelection,
+    cssHorizontalOffset,
+  }
 })

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

@@ -4,18 +4,30 @@ import { defineColumn } from '@core/packages/table/define-column'
 import type { ButtonIconConfig } from '@core/tables/column-definitions/button-icon-column.ts'
 import { renderHeadCell } from '@core/tables/helpers/render-head-cell'
 import type { HeaderConfig } from '@core/tables/types.ts'
-import { h, toValue } from 'vue'
+import { type Component, h, toValue } from 'vue'
 
 export type { ActionItem }
 
 export const useActionColumn = defineColumn((config: HeaderConfig & Partial<ButtonIconConfig>) => ({
   renderHead: () => renderHeadCell(config.headerLabel),
-  renderBody: (params: { onClick: () => void; actions?: ActionItem[] }) =>
-    h(VtsActionCell, {
-      buttonIcon: toValue(config.buttonIcon ?? 'fa:eye'),
-      buttonAccent: toValue(config.buttonAccent),
-      buttonSize: toValue(config.buttonSize),
-      actions: params.actions,
-      onClick: params.onClick,
-    }),
+  renderBody: (params: {
+    onClick: () => void
+    actions?: ActionItem[]
+    component?: Component
+    props?: Record<string, unknown>
+  }) => {
+    const { component, props } = params
+
+    return h(
+      VtsActionCell,
+      {
+        buttonIcon: toValue(config.buttonIcon ?? 'fa:eye'),
+        buttonAccent: toValue(config.buttonAccent),
+        buttonSize: toValue(config.buttonSize),
+        actions: params.actions,
+        onClick: params.onClick,
+      },
+      component ? () => h(component, props) : undefined
+    )
+  },
 }))

package/lib/tables/column-sets/vm-columns.ts

@@ -1,14 +1,13 @@
 import { defineColumns } from '@core/packages/table/define-columns.ts'
+import { useActionColumn } from '@core/tables/column-definitions/action-column.ts'
 import { useAddressColumn } from '@core/tables/column-definitions/address-column.ts'
 import { useLinkColumn } from '@core/tables/column-definitions/link-column'
 import { useNumberColumn } from '@core/tables/column-definitions/number-column.ts'
-import { useSelectItemColumn } from '@core/tables/column-definitions/select-item-column'
 import { useTagColumn } from '@core/tables/column-definitions/tag-column.ts'
 import { useI18n } from 'vue-i18n'
 
 export const useVmColumns = defineColumns(() => {
   const { t } = useI18n()
-
   return {
     vm: useLinkColumn({ headerLabel: () => t('vm') }),
     ipAddresses: useAddressColumn({ headerLabel: () => t('ip-addresses') }),
@@ -16,6 +15,6 @@ export const useVmColumns = defineColumns(() => {
     ram: useNumberColumn({ headerLabel: () => t('ram') }),
     diskSpace: useNumberColumn({ headerLabel: () => t('disk-space') }),
     tags: useTagColumn({ headerLabel: () => t('tags') }),
-    selectItem: useSelectItemColumn(),
+    actions: useActionColumn({}),
   }
 })

package/lib/types/state-hero.type.ts

@@ -0,0 +1,19 @@
+export const STATE_HERO_TYPES = [
+  'busy',
+  'no-result',
+  'under-construction',
+  'no-data',
+  'no-selection',
+  'error',
+  'not-found',
+  'offline',
+  'all-good',
+  'all-done',
+  'creating',
+] as const
+
+export type StateHeroType = (typeof STATE_HERO_TYPES)[number]
+
+export type StateHeroFormat = 'page' | 'card' | 'panel' | 'table'
+
+export type StateHeroSize = 'extra-small' | 'small' | 'medium' | 'large'

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

@@ -48,10 +48,16 @@ declare module 'vue-virtual-scroller' {
     after(): unknown
   }
 
+  interface ScrollToOptions {
+    smooth?: boolean
+    align?: 'start' | 'center' | 'end' | 'nearest'
+    offset?: number
+  }
+
   export interface RecycleScrollerInstance {
     getScroll(): { start: number; end: number }
-    scrollToItem(index: number): void
-    scrollToPosition(position: number): void
+    scrollToItem(index: number, options?: ScrollToOptions): void
+    scrollToPosition(position: number, options?: ScrollToOptions): void
   }
 
   export const RecycleScroller: <T>(

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

@@ -11,7 +11,7 @@ export const IK_TREE_ITEM_TOGGLE = Symbol('IK_TREE_ITEM_TOGGLE') as InjectionKey
 
 export const IK_TREE_ITEM_EXPANDED = Symbol('IK_TREE_ITEM_EXPANDED') as InjectionKey<Ref<boolean>>
 
-export const IK_TREE_LIST_DEPTH = Symbol('IK_TREE_LIST_DEPTH') as InjectionKey<number>
+export const IK_TREE_LIST_DEPTH = Symbol('IK_TREE_LIST_DEPTH') as InjectionKey<Ref<number>>
 
 export const IK_MENU_HORIZONTAL = Symbol('IK_MENU_HORIZONTAL') as InjectionKey<ComputedRef<boolean>>
 

package/package.json

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