@xen-orchestra/web-core 0.1.0 → 0.2.0

package/lib/components/user/UserLogo.vue

@@ -17,7 +17,7 @@ withDefaults(
 <style lang="postcss" scoped>
 /* COLOR VARIANTS */
 .user-logo {
-  --border-color: var(--color-purple-base);
+  --border-color: var(--color-normal-txt-base);
 }
 
 /* SIZE VARIANTS */
@@ -49,7 +49,7 @@ withDefaults(
   display: block;
   width: var(--size);
   height: var(--size);
-  background: var(--color-grey-100) url('../../assets/user.png') no-repeat var(--background-position) /
+  background: var(--color-neutral-txt-primary) url('../../assets/user.png') no-repeat var(--background-position) /
     var(--background-size);
   border: var(--border-size) solid var(--border-color);
   border-radius: 20rem;

package/lib/composables/hide-route-query.composable.ts

@@ -0,0 +1,10 @@
+import { useRouteQuery } from '@core/composables/route-query.composable'
+
+export function useHideRouteQuery(id: string) {
+  return useRouteQuery(id, {
+    toData: query => new Set(query ? query.split(',') : undefined),
+    toQuery: data => Array.from(data).join(','),
+  })
+}
+
+export type HideRouteQuery = ReturnType<typeof useHideRouteQuery>

package/lib/composables/route-query/actions/handle-delete.ts

@@ -4,13 +4,16 @@ export function handleDelete(source: WritableComputedRef<any>, value: any) {
   if (Array.isArray(source.value)) {
     source.value = [...source.value].splice(value, 1)
   } else if (source.value instanceof Set) {
-    source.value = new Set(source.value)
-    source.value.delete(value)
+    const newSet = new Set(source.value)
+    newSet.delete(value)
+    source.value = newSet
   } else if (source.value instanceof Map) {
-    source.value = new Map(source.value)
-    source.value.delete(value)
+    const newMap = new Map(source.value)
+    newMap.delete(value)
+    source.value = newMap
   } else if (typeof source.value === 'object' && source.value !== null) {
-    source.value = { ...source.value }
-    delete source.value[value]
+    const newObject = { ...source.value }
+    delete newObject[value]
+    source.value = newObject
   }
 }

package/lib/composables/route-query/actions/handle-set.ts

@@ -2,11 +2,13 @@ import type { WritableComputedRef } from 'vue'
 
 export function handleSet(source: WritableComputedRef<any>, key: any, value: any) {
   if (Array.isArray(source.value)) {
-    source.value = [...source.value]
-    source.value[key] = value
+    const newArray = source.value.slice()
+    newArray[key] = value
+    source.value = newArray
   } else if (source.value instanceof Map) {
-    source.value = new Map(source.value)
-    source.value.set(key, value)
+    const newMap = new Map(source.value)
+    newMap.set(key, value)
+    source.value = newMap
   } else if (typeof source.value === 'object') {
     if (source.value === null) {
       return

package/lib/composables/route-query/types.ts

@@ -39,4 +39,13 @@ export type GuessActions<TData> =
           ? MapActions<TKey, TValue>
           : EmptyObject
 
-export type RouteQuery<TData> = WritableComputedRef<TData> & GuessActions<TData>
+export type RouteQuery<TData> = WritableComputedRef<
+  TData extends Set<infer V>
+    ? ReadonlySet<V>
+    : TData extends Map<infer K, infer V>
+      ? ReadonlyMap<K, V>
+      : TData extends object
+        ? Readonly<TData>
+        : TData
+> &
+  GuessActions<TData>

package/lib/composables/sort-route-query.composable.ts

@@ -0,0 +1,18 @@
+import { useRouteQuery } from '@core/composables/route-query.composable'
+
+export function useSortRouteQuery(id: string) {
+  return useRouteQuery(id, {
+    toData: query => {
+      if (!query) {
+        return undefined
+      }
+
+      const [id, direction] = query.split(',') as [string, 'asc' | 'desc']
+
+      return { id, direction }
+    },
+    toQuery: data => (data ? [data.id, data.direction].join(',') : ''),
+  })
+}
+
+export type SortRouteQuery = ReturnType<typeof useSortRouteQuery>

package/lib/composables/table/create-base-definition.ts

@@ -0,0 +1,20 @@
+import type { BaseDefinition, ColumnOptions } from '@core/composables/table/type'
+
+export function createBaseDefinition<TId extends string, TRecord>(
+  columnId: TId,
+  optionsOrGetter: any,
+  options: ColumnOptions<any, any, any>
+): BaseDefinition<TId, TRecord, any> {
+  const getter =
+    typeof optionsOrGetter === 'function'
+      ? optionsOrGetter
+      : typeof optionsOrGetter === 'string'
+        ? (item: TRecord) => item[optionsOrGetter as keyof TRecord]
+        : (item: TRecord) => item[columnId as unknown as keyof TRecord]
+
+  return {
+    id: columnId,
+    label: options.label,
+    getter,
+  }
+}

package/lib/composables/table/create-define-column.ts

@@ -0,0 +1,26 @@
+import type { HideRouteQuery } from '@core/composables/hide-route-query.composable'
+import type { SortRouteQuery } from '@core/composables/sort-route-query.composable'
+import { createBaseDefinition } from '@core/composables/table/create-base-definition'
+import { createSortingDefinition } from '@core/composables/table/create-sorting-definition'
+import { createVisibilityDefinition } from '@core/composables/table/create-visibility-definition'
+import type { ColumnDefinition, ColumnOptions, DefineColumn } from '@core/composables/table/type'
+import { reactive } from 'vue'
+
+export function createDefineColumn<TRecord>(
+  hideRouteQuery: HideRouteQuery,
+  sortRouteQuery: SortRouteQuery
+): DefineColumn<TRecord> {
+  return function defineColumn<TId extends string>(
+    columnId: TId,
+    optionsOrGetter: any,
+    optionsOrNone?: any
+  ): ColumnDefinition<TId, TRecord, any, any, any> {
+    const options = (optionsOrNone ?? optionsOrGetter) as ColumnOptions<any, any, any>
+
+    return reactive({
+      ...createBaseDefinition(columnId, optionsOrGetter, options),
+      ...createVisibilityDefinition(columnId, hideRouteQuery, options.isHideable),
+      ...createSortingDefinition(columnId, sortRouteQuery, options.compareFn),
+    })
+  }
+}

package/lib/composables/table/create-sorting-definition.ts

@@ -0,0 +1,48 @@
+import type { SortRouteQuery } from '@core/composables/sort-route-query.composable'
+import type { CompareFn, SortingDefinition } from '@core/composables/table/type'
+import { computed } from 'vue'
+
+export function createSortingDefinition<TCompareReturn extends number | unknown>(
+  columnId: string,
+  sortRouteQuery: SortRouteQuery,
+  compareFn: CompareFn<any, TCompareReturn> | undefined
+): SortingDefinition<any, TCompareReturn> {
+  if (compareFn === undefined) {
+    return {
+      isSortable: false,
+    } as SortingDefinition<any, TCompareReturn>
+  }
+
+  const isSorted = computed(() => sortRouteQuery.value?.id === columnId)
+
+  const isSortedAsc = computed(() => isSorted.value && sortRouteQuery.value?.direction === 'asc')
+
+  const isSortedDesc = computed(() => isSorted.value && sortRouteQuery.value?.direction === 'desc')
+
+  function sort(direction: 'asc' | 'desc' | false, toggleOffIfSameDirection = false) {
+    const shouldToggleOff =
+      direction === false ||
+      (toggleOffIfSameDirection && isSorted.value && sortRouteQuery.value?.direction === direction)
+
+    sortRouteQuery.value = shouldToggleOff ? undefined : { id: columnId, direction }
+  }
+
+  function sortAsc(toggleOffIfSameDirection = false) {
+    sort('asc', toggleOffIfSameDirection)
+  }
+
+  function sortDesc(toggleOffIfSameDirection = false) {
+    sort('desc', toggleOffIfSameDirection)
+  }
+
+  return {
+    isSortable: true,
+    isSorted,
+    isSortedAsc,
+    isSortedDesc,
+    sort,
+    sortAsc,
+    sortDesc,
+    compareFn,
+  } as SortingDefinition<any, TCompareReturn>
+}

package/lib/composables/table/create-visibility-definition.ts

@@ -0,0 +1,44 @@
+import type { HideRouteQuery } from '@core/composables/hide-route-query.composable'
+import type { VisibilityDefinition } from '@core/composables/table/type'
+import { computed } from 'vue'
+
+export function createVisibilityDefinition<THideable extends boolean | undefined>(
+  columnId: string,
+  hideRouteQuery: HideRouteQuery,
+  isHideable: THideable
+): VisibilityDefinition<THideable> {
+  if (isHideable === false) {
+    return {
+      isHideable: false,
+      isVisible: true,
+    } as VisibilityDefinition<THideable>
+  }
+
+  const isVisible = computed(() => !hideRouteQuery.value.has(columnId))
+
+  function show() {
+    hideRouteQuery.delete(columnId)
+  }
+
+  function hide() {
+    hideRouteQuery.add(columnId)
+  }
+
+  function toggle(value?: boolean) {
+    const shouldBeVisible = value ?? !isVisible.value
+
+    if (shouldBeVisible) {
+      show()
+    } else {
+      hide()
+    }
+  }
+
+  return {
+    isHideable: true,
+    isVisible,
+    show,
+    hide,
+    toggle,
+  } as VisibilityDefinition<THideable>
+}

package/lib/composables/table/type.ts

@@ -0,0 +1,112 @@
+import type { StringKeyOf } from '@core/types/utility.type'
+import type { ComputedRef, UnwrapRef } from 'vue'
+
+export type CompareFn<TValue, TCompareReturn> = (a: TValue, b: TValue) => TCompareReturn
+
+type Getter<TRecord, TValue> = (item: TRecord) => TValue
+
+export type ColumnOptions<TValue, THideable extends boolean | unknown, TCompareReturn extends number | unknown> = {
+  label: string
+  isHideable?: THideable
+  compareFn?: CompareFn<TValue, TCompareReturn>
+}
+
+export type BaseDefinition<TId, TRecord, TValue> = {
+  id: TId
+  label: string
+  getter: Getter<TRecord, TValue>
+}
+
+export type VisibilityDefinition<THideable extends boolean | unknown> = THideable extends false
+  ? {
+      isHideable: false
+      isVisible: true
+    }
+  : {
+      isHideable: true
+      isVisible: ComputedRef<boolean>
+      show(): void
+      hide(): void
+      toggle(value?: boolean): void
+    }
+
+export type SortingDefinition<TValue, TCompareReturn extends number | unknown> = TCompareReturn extends number
+  ? {
+      isSortable: true
+      isSorted: ComputedRef<boolean>
+      isSortedAsc: ComputedRef<boolean>
+      isSortedDesc: ComputedRef<boolean>
+      sort(direction: 'asc' | 'desc' | false, toggleOffIfSameDirection?: boolean): void
+      sortAsc(toggleOffIfSameDirection?: boolean): void
+      sortDesc(toggleOffIfSameDirection?: boolean): void
+      compareFn: (a: TValue, b: TValue) => TCompareReturn
+    }
+  : {
+      isSortable: false
+    }
+
+export type ColumnDefinition<
+  TId,
+  TRecord,
+  TValue,
+  THideable extends boolean | unknown,
+  TCompareReturn extends number | unknown,
+> = UnwrapRef<
+  BaseDefinition<TId, TRecord, TValue> & VisibilityDefinition<THideable> & SortingDefinition<TValue, TCompareReturn>
+>
+
+export type DefineColumn<TRecord> = {
+  <
+    const TId extends StringKeyOf<TRecord>,
+    TCompareReturn extends number | unknown,
+    THideable extends boolean | unknown,
+  >(
+    columnId: TId,
+    options: ColumnOptions<TRecord[TId], THideable, TCompareReturn>
+  ): ColumnDefinition<TId, TRecord, TRecord[TId], THideable, TCompareReturn>
+
+  <
+    const TId extends string,
+    TProperty extends keyof TRecord,
+    TCompareReturn extends number | unknown,
+    THideable extends boolean | unknown,
+  >(
+    columnId: TId,
+    property: TProperty,
+    options: ColumnOptions<TRecord[TProperty], THideable, TCompareReturn>
+  ): ColumnDefinition<TId, TRecord, TRecord[TProperty], THideable, TCompareReturn>
+
+  <const TId extends string, TOutput, TCompareReturn extends number | unknown, THideable extends boolean | unknown>(
+    columnId: TId,
+    getter: Getter<TRecord, TOutput>,
+    options: ColumnOptions<TOutput, THideable, TCompareReturn>
+  ): ColumnDefinition<TId, TRecord, TOutput, THideable, TCompareReturn>
+}
+
+export type TableOptions<TRecord, TRowId, TDefinition extends ColumnDefinition<any, any, any, any, any>> = {
+  rowId: (item: TRecord) => TRowId
+  columns: (define: DefineColumn<TRecord>) => TDefinition[]
+}
+
+export type RowColumn<TColumnDefinition extends ColumnDefinition<any, any, any, any, any>> =
+  TColumnDefinition extends ColumnDefinition<infer TColumnId, any, infer TColumnValue, any, any>
+    ? {
+        id: TColumnId
+        value: TColumnValue
+      }
+    : never
+
+export type Row<TRowId, TDefinitions extends ColumnDefinition<any, any, any, any, any>[]> = {
+  id: TRowId
+  value: TDefinitions extends ColumnDefinition<any, infer TRecord, any, any, any> ? TRecord : never
+  visibleColumns: { [TIndex in keyof TDefinitions]: RowColumn<TDefinitions[TIndex]> }
+}
+
+export type Table<TRowId, TDefinitions extends ColumnDefinition<any, any, any, any, any>[]> = {
+  columns: ComputedRef<TDefinitions>
+  visibleColumns: ComputedRef<TDefinitions[number][]>
+  columnsById: ComputedRef<{
+    [TColumn in TDefinitions[number] as TColumn['id']]: TColumn
+  }>
+  rows: ComputedRef<Row<TRowId, TDefinitions>[]>
+}

package/lib/composables/table.composable.ts

@@ -0,0 +1,76 @@
+import { useHideRouteQuery } from '@core/composables/hide-route-query.composable'
+import { useSortRouteQuery } from '@core/composables/sort-route-query.composable'
+import { createDefineColumn } from '@core/composables/table/create-define-column'
+import type { ColumnDefinition, Table, TableOptions } from '@core/composables/table/type'
+import type { MaybeRefOrGetter } from 'vue'
+import { computed, reactive, toValue } from 'vue'
+
+export function useTable<TRecord, TRowId, const TDefinitions extends ColumnDefinition<any, TRecord, any, any, any>>(
+  id: string,
+  records: MaybeRefOrGetter<TRecord[]>,
+  options: TableOptions<TRecord, TRowId, TDefinitions>
+): Table<TRowId, TDefinitions[]> {
+  const hideRouteQuery = useHideRouteQuery(`table.${id}.hide`)
+
+  const sortRouteQuery = useSortRouteQuery(`table.${id}.sort`)
+
+  const defineColumn = createDefineColumn<TRecord>(hideRouteQuery, sortRouteQuery)
+
+  const columns = options.columns(defineColumn)
+
+  const columnsById = Object.fromEntries(columns.map(column => [column.id, column])) as Record<
+    string,
+    ColumnDefinition<any, TRecord, any, any, any>
+  >
+
+  const visibleColumns = computed(() => columns.filter(column => column.isVisible))
+
+  const rows = computed(() =>
+    toValue(records).map(record => {
+      const rowId = options.rowId(record)
+
+      const visibleRowColumns = computed(() =>
+        visibleColumns.value.map(column => ({
+          id: column.id,
+          value: column.getter(record),
+        }))
+      )
+
+      return reactive({
+        id: rowId,
+        value: record,
+        visibleColumns: visibleRowColumns,
+      })
+    })
+  )
+
+  const sortedRows = computed(() => {
+    const sort = sortRouteQuery.value
+
+    if (sort === undefined) {
+      return rows.value
+    }
+
+    const sortColumn = columnsById[sort.id]
+
+    if (sortColumn === undefined || !sortColumn.isSortable) {
+      return rows.value
+    }
+
+    const compareFn = sortColumn.compareFn
+
+    return rows.value.slice().sort((row1, row2) => {
+      const value1 = sortColumn.getter(row1.value as TRecord)
+      const value2 = sortColumn.getter(row2.value as TRecord)
+
+      return sort.direction === 'asc' ? compareFn(value1, value2) : compareFn(value2, value1)
+    })
+  })
+
+  return {
+    columns: computed(() => columns),
+    columnsById: computed(() => columnsById),
+    visibleColumns,
+    rows: sortedRows,
+  } as Table<TRowId, TDefinitions[]>
+}

package/lib/layouts/CoreLayout.vue

@@ -61,8 +61,8 @@ const sidebarStore = useSidebarStore()
   display: flex;
   align-items: center;
   height: 5.6rem;
-  background-color: var(--background-color-secondary);
-  border-bottom: 0.1rem solid var(--color-grey-500);
+  background-color: var(--color-neutral-background-secondary);
+  border-bottom: 0.1rem solid var(--color-neutral-border);
   flex-shrink: 0;
   gap: 1.6rem;
   padding: 0 1.6rem;
@@ -77,6 +77,6 @@ const sidebarStore = useSidebarStore()
   overflow: auto;
   display: flex;
   flex-direction: column;
-  background-color: var(--background-color-secondary);
+  background-color: var(--color-neutral-background-secondary);
 }
 </style>

package/lib/locales/en.json

@@ -47,6 +47,7 @@
   "master": "Primary host",
   "n-vms": "1 VM | {n} VMs",
   "network": "Network",
+  "no-data": "No data",
   "object-not-found": "Object {id} can't be found…",
   "patches": "Patches",
   "power-on-for-console": "Power on your VM to access its console",

package/lib/locales/fr.json

@@ -47,6 +47,7 @@
   "master": "Hôte primaire",
   "n-vms": "1 VM | {n} VMs",
   "network": "Réseau",
+  "no-data": "Aucune donnée",
   "object-not-found": "L'objet {id} est introuvable…",
   "patches": "Patches",
   "power-on-for-console": "Allumez votre VM pour accéder à sa console",

package/lib/types/backup.type.ts

@@ -6,6 +6,6 @@ export type BackupStates = BackupState[]
 
 export type Backup = {
   label: string
-  route: RouteLocationRaw
+  route?: RouteLocationRaw
   states: BackupStates
 }

package/lib/types/button.type.ts

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

package/lib/types/color.type.ts

@@ -1,5 +1,3 @@
-export type Color = 'info' | 'error' | 'danger' | 'warning' | 'success'
+export type Color = 'normal' | 'success' | 'warning' | 'danger'
 
-export type CounterColor = Color | 'black'
-
-export type TagColor = Color | 'grey'
+export type TagColor = 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'disabled'

package/lib/types/size.type.ts

@@ -1,3 +1 @@
-export type CounterSize = 'small' | 'medium'
-
 export type UserLogoSize = 'extra-small' | 'small' | 'medium'

package/lib/types/utility.type.ts

@@ -7,3 +7,5 @@ declare const __brand: unique symbol
 export type Branded<TBrand extends string, TType = string> = TType & { [__brand]: TBrand }
 
 export type EmptyObject = Record<string, never>
+
+export type StringKeyOf<T> = Extract<keyof T, string>

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

@@ -0,0 +1,9 @@
+export function toVariants(variants: object): string[] {
+  return Object.entries(variants).flatMap(([key, value]) => {
+    if (!value) {
+      return []
+    }
+
+    return value === true ? key : `${key}--${value}`
+  })
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": false,
   "exports": {
     "./*": {
@@ -24,7 +24,7 @@
   },
   "peerDependencies": {
     "pinia": "^2.1.7",
-    "vue": "^3.4.13",
+    "vue": "~3.4.13",
     "vue-i18n": "^9.9.0",
     "vue-router": "^4.4.0"
   },
@@ -33,7 +33,7 @@
     "@types/novnc__novnc": "^1.5.0",
     "@vue/tsconfig": "^0.5.1",
     "pinia": "^2.1.7",
-    "vue": "^3.4.13",
+    "vue": "~3.4.13",
     "vue-i18n": "^9.9.0",
     "vue-router": "^4.4.0"
   },

package/lib/components/UiCounter.vue

@@ -1,89 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <span :class="classNames" class="ui-counter typo">
-    <span class="inner">{{ value }}</span>
-  </span>
-</template>
-
-<script lang="ts" setup>
-import type { CounterColor } from '@core/types/color.type'
-import type { CounterSize } from '@core/types/size.type'
-import { computed } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    value: number | string
-    color?: CounterColor
-    size?: CounterSize
-  }>(),
-  { size: 'small' }
-)
-
-const fontClasses = {
-  small: 'p4-semi-bold',
-  medium: 'p1-medium',
-}
-
-const classNames = computed(() => {
-  return [props.color, props.size, fontClasses[props.size]]
-})
-</script>
-
-<style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.ui-counter {
-  --background-color: var(--color-grey-300);
-
-  &.info {
-    --background-color: var(--color-purple-base);
-  }
-
-  &.success {
-    --background-color: var(--color-green-base);
-  }
-
-  &.warning {
-    --background-color: var(--color-orange-base);
-  }
-
-  &:is(.error, .danger) {
-    --background-color: var(--color-red-base);
-  }
-
-  &.black {
-    --background-color: var(--color-grey-100);
-  }
-}
-
-/* SIZE VARIANTS */
-.ui-counter {
-  &.small {
-    --height: 1.5rem;
-    --padding: 0 0.4rem;
-  }
-
-  &.medium {
-    --height: 2.4rem;
-    --padding: 0 0.6rem;
-  }
-}
-
-/* IMPLEMENTATION */
-.ui-counter {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  text-transform: lowercase;
-  color: var(--color-grey-600);
-  height: var(--height);
-  min-width: var(--height);
-  padding: var(--padding);
-  background-color: var(--background-color);
-  border-radius: calc(var(--height) / 2);
-
-  .inner {
-    line-height: 0;
-  }
-}
-</style>