@xen-orchestra/web-core 0.0.5 → 0.1.1

package/env.d.ts

@@ -1 +1,2 @@
+/// <reference types="novnc__novnc" />
 /// <reference types="vite/client" />

package/lib/components/CardNumbers.vue

@@ -3,12 +3,12 @@
   <div class="card-numbers" :class="size">
     <span class="label typo" :class="labelFontClass">{{ label }}</span>
     <div class="values" :class="size">
-      <span v-if="size === 'small' && max" class="value typo c2-semi-bold">
-        {{ $n(valueAsPercentage, 'percent') }}
+      <span v-if="percentValue" class="value typo c2-semi-bold">
+        {{ percentValue }}
       </span>
 
       <div class="value typo" :class="valueFontClass">
-        {{ value }}<span class="unit typo" :class="unitFontClass">{{ unit }}</span>
+        {{ value ?? '-' }}<span class="unit typo" :class="unitFontClass">{{ unit }}</span>
       </div>
     </div>
   </div>
@@ -16,29 +16,36 @@
 
 <script setup lang="ts" generic="TSize extends 'small' | 'medium'">
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 interface CardNumbersProps {
   label: string
-  value: number
   size: TSize
+  value?: number
   unit?: string
   max?: TSize extends 'small' ? number : never
 }
 
 const props = defineProps<CardNumbersProps>()
 
+const { n } = useI18n()
+
 const labelFontClass = computed(() => (props.size === 'medium' ? 'c3-semi-bold' : 'c2-semi-bold'))
 
 const valueFontClass = computed(() => (props.size === 'medium' ? 'h3-semi-bold' : 'c2-semi-bold'))
 
 const unitFontClass = computed(() => (props.size === 'medium' ? 'p2-medium' : 'c2-semi-bold'))
 
-const valueAsPercentage = computed(() => {
-  if (props.max === undefined) {
-    return 0
+const percentValue = computed(() => {
+  if (props.size !== 'small' || props.max === undefined || props.max === 0) {
+    return undefined
+  }
+
+  if (props.value === undefined) {
+    return n(0, 'percent').replace('0', '-')
   }
 
-  return props.value / props.max
+  return n(props.value / props.max, 'percent')
 })
 </script>
 

package/lib/components/backup-item/BackupItem.vue

@@ -0,0 +1,37 @@
+<!-- v1.0 -->
+<template>
+  <div class="backup-item">
+    <RouterLink :to="backup.route">
+      {{ backup.label }}
+    </RouterLink>
+    <div class="states">
+      <BackupState v-for="(state, index) in backup.states" :key="index" :state />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import BackupState from '@core/components/backup-state/BackupState.vue'
+import type { Backup } from '@core/types/backup.type'
+
+defineProps<{
+  backup: Backup
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.backup-item {
+  padding: 0.8rem 0.4rem;
+  border-top: 0.1rem solid var(--color-grey-500);
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+}
+
+.states {
+  margin-inline-start: auto;
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+}
+</style>

package/lib/components/{StatusPill.vue → backup-state/BackupState.vue}

@@ -1,16 +1,18 @@
+<!-- v1.0 -->
 <template>
-  <UiIcon :color :icon class="status-pill" />
+  <UiIcon :color :icon class="backup-state" />
 </template>
 
 <script lang="ts" setup>
 import UiIcon from '@core/components/icon/UiIcon.vue'
+import type { BackupState } from '@core/types/backup.type'
 import type { Color } from '@core/types/color.type'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faCheckCircle, faCircleMinus, faCircleXmark } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
 type Props = {
-  state: 'success' | 'partial' | 'failure'
+  state: BackupState
 }
 
 const props = defineProps<Props>()
@@ -26,7 +28,7 @@ const color = computed(() => states[props.state].color)
 </script>
 
 <style lang="postcss" scoped>
-.status-pill {
+.backup-state {
   font-size: 1rem;
 }
 </style>

package/lib/components/button/ButtonIcon.vue

@@ -10,8 +10,9 @@
 import UiIcon from '@core/components/icon/UiIcon.vue'
 import type { Color } from '@core/types/color.type'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { computed } from 'vue'
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     icon: IconDefinition
     size?: 'small' | 'medium' | 'large'
@@ -19,9 +20,18 @@ withDefaults(
     disabled?: boolean
     active?: boolean
     dot?: boolean
+    targetScale?: number | { x: number; y: number }
   }>(),
-  { color: 'info', size: 'medium' }
+  { color: 'info', size: 'medium', targetScale: 1 }
 )
+
+const cssTargetScale = computed(() => {
+  if (typeof props.targetScale === 'number') {
+    return `scale(${props.targetScale})`
+  }
+
+  return `scale(${props.targetScale.x}, ${props.targetScale.y})`
+})
 </script>
 
 <style lang="postcss" scoped>
@@ -196,4 +206,15 @@ withDefaults(
     right: var(--dot-offset);
   }
 }
+
+/*
+ * Increase the size of the clickable area,
+ * without changing the padding of the ButtonIcon component
+ */
+.button-icon::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  transform: v-bind(cssTargetScale);
+}
 </style>

package/lib/components/console/RemoteConsole.vue

@@ -23,7 +23,7 @@ const consoleContainer = ref<HTMLDivElement | null>(null)
 let vncClient: VncClient | undefined
 let nConnectionAttempts = 0
 
-const handleDisconnectionEvent = () => {
+function handleDisconnectionEvent() {
   clearVncClient()
 
   nConnectionAttempts++
@@ -41,9 +41,11 @@ const handleDisconnectionEvent = () => {
   createVncConnection()
 }
 
-const handleConnectionEvent = () => (nConnectionAttempts = 0)
+function handleConnectionEvent() {
+  nConnectionAttempts = 0
+}
 
-const clearVncClient = () => {
+function clearVncClient() {
   if (vncClient === undefined) {
     return
   }
@@ -55,7 +57,7 @@ const clearVncClient = () => {
   vncClient = undefined
 }
 
-const createVncConnection = async () => {
+async function createVncConnection() {
   if (nConnectionAttempts !== 0) {
     await promiseTimeout(FIBONACCI_MS_ARRAY[nConnectionAttempts - 1])
 

package/lib/components/legend/LegendList.vue

@@ -1,10 +1,14 @@
 <template>
-  <ul class="legend-list">
+  <ul class="legend-list" :class="{ horizontal }">
     <slot />
   </ul>
 </template>
 
 <script lang="ts" setup>
+defineProps<{
+  horizontal?: boolean
+}>()
+
 defineSlots<{
   default(): void
 }>()
@@ -15,5 +19,10 @@ defineSlots<{
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
+
+  &.horizontal {
+    flex-direction: row;
+    gap: 4rem;
+  }
 }
 </style>

package/lib/components/{search-bar/SearchBar.vue → query-search-bar/QuerySearchBar.vue}

@@ -1,21 +1,21 @@
-<!-- v1.1 -->
+<!-- v1.2 -->
 <template>
   <form class="search-bar" @submit.prevent="emit('search', value)">
     <label v-if="uiStore.isDesktop" :for="id" class="typo p2-regular label">
-      {{ $t('core.search-bar.label') }}
+      {{ $t('core.query-search-bar.label') }}
     </label>
     <UiInput
       :id
       v-model="value"
-      :aria-label="uiStore.isMobile ? $t('core.search-bar.label') : undefined"
+      :aria-label="uiStore.isMobile ? $t('core.query-search-bar.label') : undefined"
       :icon="uiStore.isDesktop ? faMagnifyingGlass : undefined"
-      :placeholder="$t('core.search-bar.placeholder')"
+      :placeholder="$t('core.query-search-bar.placeholder')"
     />
     <template v-if="uiStore.isDesktop">
       <UiButton type="submit">{{ $t('core.search') }}</UiButton>
       <Divider type="stretch" />
       <UiButton v-tooltip="$t('coming-soon')" level="secondary" :left-icon="faFilter" disabled>
-        {{ $t('core.search-bar.use-query-builder') }}
+        {{ $t('core.query-search-bar.use-query-builder') }}
       </UiButton>
     </template>
     <template v-else>

package/lib/components/stacked-bar/StackedBar.vue

@@ -2,39 +2,33 @@
 <template>
   <div class="stacked-bar">
     <StackedBarSegment
-      v-for="(segment, index) in computedSegments"
+      v-for="(segment, index) in segments"
       :key="index"
       :color="segment.color"
-      :percentage="segment.percentage"
+      :percentage="max === 0 ? 0 : (segment.value / max) * 100"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
-import StackedBarSegment from '@core/components/stacked-bar/StackedBarSegment.vue'
-import type { Color } from '@core/types/color.type'
+import StackedBarSegment, { type StackedBarSegmentProps } from '@core/components/stacked-bar/StackedBarSegment.vue'
 import { computed } from 'vue'
 
 type Segment = {
   value: number
-  color: Color
+  color: StackedBarSegmentProps['color']
 }
 
-const props = defineProps<{
+export type StackedBarProps = {
   segments: Segment[]
   maxValue?: number
-}>()
+}
 
-const totalValue = computed(() => props.segments.reduce((acc, bar) => acc + bar.value, 0))
+const props = defineProps<StackedBarProps>()
 
-const max = computed(() => Math.max(props.maxValue ?? 0, totalValue.value))
+const totalValue = computed(() => props.segments.reduce((acc, segment) => acc + segment.value, 0))
 
-const computedSegments = computed(() => {
-  return props.segments.map(segment => ({
-    ...segment,
-    percentage: (segment.value / max.value) * 100,
-  }))
-})
+const max = computed(() => Math.max(props.maxValue ?? 0, totalValue.value))
 </script>
 
 <style lang="postcss" scoped>

package/lib/components/stacked-bar/StackedBarSegment.vue

@@ -13,15 +13,18 @@
 
 <script lang="ts" setup>
 import { vTooltip } from '@core/directives/tooltip.directive'
-import type { Color } from '@core/types/color.type'
 import { hasEllipsis } from '@core/utils/has-ellipsis.util'
 import { useResizeObserver } from '@vueuse/core'
 import { ref } from 'vue'
 
-defineProps<{
-  color: Color
+export type StackedBarSegmentColor = 'primary' | 'success' | 'warning' | 'danger'
+
+export type StackedBarSegmentProps = {
+  color: StackedBarSegmentColor
   percentage: number
-}>()
+}
+
+defineProps<StackedBarSegmentProps>()
 
 const hidden = ref(false)
 const ellipsisElement = ref<HTMLElement | null>(null)
@@ -34,7 +37,7 @@ useResizeObserver(ellipsisElement, ([entry]) => {
 <style lang="postcss" scoped>
 /* COLOR VARIANT */
 .stacked-bar-segment {
-  &.info {
+  &.primary {
     --background-color: var(--color-purple-base);
   }
 
@@ -46,7 +49,7 @@ useResizeObserver(ellipsisElement, ([entry]) => {
     --background-color: var(--color-orange-base);
   }
 
-  &.error {
+  &.danger {
     --background-color: var(--color-red-base);
   }
 }

package/lib/components/stacked-bar-with-legend/StackedBarWithLegend.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="stacked-bar-with-legend">
+    <StackedBar :segments :max-value="maxValue" />
+    <LegendList class="list" :horizontal="uiStore.isDesktop">
+      <LegendItem
+        v-for="segment in segments"
+        :key="segment.label"
+        :color="segment.color"
+        :tooltip="segment.tooltip"
+        :unit="segment.unit"
+        :value="segment.value"
+      >
+        {{ segment.label }}
+      </LegendItem>
+    </LegendList>
+  </div>
+</template>
+
+<script setup lang="ts">
+import LegendItem, { type LegendItemProps } from '@core/components/legend/LegendItem.vue'
+import LegendList from '@core/components/legend/LegendList.vue'
+import StackedBar, { type StackedBarProps } from '@core/components/stacked-bar/StackedBar.vue'
+import { useUiStore } from '@core/stores/ui.store'
+
+type Segment = StackedBarProps['segments'][number] & LegendItemProps & { label: string }
+
+export type StackedBarWithLegendProps = {
+  segments: Segment[]
+  maxValue?: StackedBarProps['maxValue']
+}
+
+defineProps<StackedBarWithLegendProps>()
+
+const uiStore = useUiStore()
+</script>
+
+<style scoped lang="postcss">
+.stacked-bar-with-legend {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.list {
+  margin-inline-start: auto;
+}
+</style>

package/lib/components/table/ColumnTitle.vue

@@ -76,12 +76,12 @@ const interactions = computed<Interaction[]>(() => [
 
 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 columnName = `${tableName}__${props.id}`
-
 const updateInteraction = (interaction: Interaction) => {
   router.replace({
     query: {

package/lib/components/tree/TreeItemLabel.vue

@@ -20,6 +20,7 @@
         class="toggle"
         :icon="isExpanded ? faAngleDown : faAngleRight"
         size="small"
+        :target-scale="{ x: 1.5, y: 2 }"
         @click="emit('toggle')"
       />
       <div v-else class="h-line" />
@@ -130,15 +131,4 @@ const depth = inject(IK_TREE_LIST_DEPTH, 0)
   border-bottom: 0.1rem solid var(--color-purple-base);
   margin-left: -0.4rem;
 }
-
-/*
- * Increase the size of the clickable area,
- * without changing the padding of the ButtonIcon component
- */
-.toggle::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  transform: scale(1.5, 2);
-}
 </style>

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

@@ -0,0 +1,9 @@
+import type { WritableComputedRef } from 'vue'
+
+export function handleAdd(source: WritableComputedRef<any>, value: any) {
+  if (Array.isArray(source.value)) {
+    source.value = [...source.value, value]
+  } else if (source.value instanceof Set) {
+    source.value = new Set(source.value).add(value)
+  }
+}

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

@@ -0,0 +1,16 @@
+import type { WritableComputedRef } from 'vue'
+
+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)
+  } else if (source.value instanceof Map) {
+    source.value = new Map(source.value)
+    source.value.delete(value)
+  } else if (typeof source.value === 'object' && source.value !== null) {
+    source.value = { ...source.value }
+    delete source.value[value]
+  }
+}

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

@@ -0,0 +1,17 @@
+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
+  } else if (source.value instanceof Map) {
+    source.value = new Map(source.value)
+    source.value.set(key, value)
+  } else if (typeof source.value === 'object') {
+    if (source.value === null) {
+      return
+    }
+
+    source.value = { ...source.value, [key]: value }
+  }
+}

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

@@ -0,0 +1,18 @@
+import type { WritableComputedRef } from 'vue'
+
+export function handleToggle(source: WritableComputedRef<any>, valueOrState?: any, state?: any) {
+  if (source.value instanceof Set) {
+    const shouldAdd = state ?? !source.value.has(valueOrState)
+    const newSource = new Set(source.value)
+
+    if (shouldAdd) {
+      newSource.add(valueOrState)
+    } else {
+      newSource.delete(valueOrState)
+    }
+
+    source.value = newSource
+  } else if (typeof source.value === 'boolean') {
+    source.value = valueOrState ?? !source.value
+  }
+}

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

@@ -0,0 +1,42 @@
+import type { EmptyObject } from '@core/types/utility.type'
+import type { WritableComputedRef } from 'vue'
+
+export type Options = {
+  defaultQuery?: string
+}
+
+export type Transformers<TData> = {
+  toData: (value: string) => TData
+  toQuery: (value: TData) => string
+}
+
+export type SetActions<TValue> = {
+  add: (value: TValue) => void
+  delete: (value: TValue) => void
+  toggle: (value: TValue, state?: boolean) => void
+}
+
+export type MapActions<TKey, TValue> = { set: (key: TKey, value: TValue) => void; delete: (key: TKey) => void }
+
+export type ArrayActions<TValue> = {
+  add: (value: TValue) => void
+  delete: (index: number) => void
+  set: (index: number, value: TValue) => void
+}
+
+export type BooleanActions = { toggle: (value?: boolean) => void }
+
+export type Actions = SetActions<any> & MapActions<any, any> & ArrayActions<any> & BooleanActions
+
+export type GuessActions<TData> =
+  TData extends Set<infer TValue>
+    ? SetActions<TValue>
+    : TData extends (infer TValue)[]
+      ? ArrayActions<TValue>
+      : TData extends boolean
+        ? BooleanActions
+        : TData extends Map<infer TKey, infer TValue> | Record<infer TKey, infer TValue>
+          ? MapActions<TKey, TValue>
+          : EmptyObject
+
+export type RouteQuery<TData> = WritableComputedRef<TData> & GuessActions<TData>

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

@@ -0,0 +1,42 @@
+import { handleAdd } from '@core/composables/route-query/actions/handle-add'
+import { handleDelete } from '@core/composables/route-query/actions/handle-delete'
+import { handleSet } from '@core/composables/route-query/actions/handle-set'
+import { handleToggle } from '@core/composables/route-query/actions/handle-toggle'
+import type { Actions, Options, RouteQuery, Transformers } from '@core/composables/route-query/types'
+import { extendRef } from '@vueuse/core'
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+export function useRouteQuery<TData extends string>(name: string): RouteQuery<TData>
+export function useRouteQuery<TData extends string>(name: string, options: Options): RouteQuery<TData>
+export function useRouteQuery<TData>(name: string, options: Options & Transformers<TData>): RouteQuery<TData>
+export function useRouteQuery<TData>(name: string, options: Partial<Options & Transformers<TData>> = {}) {
+  const router = useRouter()
+  const route = useRoute()
+
+  const {
+    defaultQuery = '',
+    toData = (query: string) => query as TData,
+    toQuery = (data: TData) => data as string,
+  } = options
+
+  const source = computed<TData>({
+    get() {
+      return toData((route.query[name] as string | undefined) ?? defaultQuery)
+    },
+    set(newData) {
+      const query = toQuery(newData)
+
+      void router.replace({ query: { ...route.query, [name]: query === defaultQuery ? undefined : query } })
+    },
+  })
+
+  const actions: Actions = {
+    add: handleAdd.bind(null, source),
+    delete: handleDelete.bind(null, source),
+    set: handleSet.bind(null, source),
+    toggle: handleToggle.bind(null, source),
+  }
+
+  return extendRef(source, actions) as unknown as RouteQuery<TData>
+}

package/lib/locales/de.json

@@ -26,7 +26,9 @@
   "n-vms": "1 VM | {n} VMs",
   "network": "Netzwerk",
   "object-not-found": "Objekt {id} wurde nicht gefunden…",
+  "patches": "Patches",
   "power-on-for-console": "Konsole ist nach Start der VM verfügbar",
+  "running-vm": "VM eingeschalten | VMs eingeschalten",
   "stats": "Statistiken",
   "storage": "Speicher",
   "support-name": "{name} pro support",

package/lib/locales/en.json

@@ -20,9 +20,9 @@
 
   "core.search": "Search",
 
-  "core.search-bar.label": "Search Engine",
-  "core.search-bar.placeholder": "Write your query…",
-  "core.search-bar.use-query-builder": "Use query builder",
+  "core.query-search-bar.label": "Search Engine",
+  "core.query-search-bar.placeholder": "Write your query…",
+  "core.query-search-bar.use-query-builder": "Use query builder",
 
   "core.select.all": "Select all",
   "core.select.none": "Select none",
@@ -48,7 +48,9 @@
   "n-vms": "1 VM | {n} VMs",
   "network": "Network",
   "object-not-found": "Object {id} can't be found…",
+  "patches": "Patches",
   "power-on-for-console": "Power on your VM to access its console",
+  "running-vm": "Running VM | Running VMs",
   "see-all": "See all",
   "stats": "Stats",
   "storage": "Storage",

package/lib/locales/fa.json

@@ -37,7 +37,9 @@
   "log-out": "خروج",
   "master": "میزبان اصلی",
   "network": "شبکه",
+  "patches": "وصله ها",
   "power-on-for-console": "ماشین مجازی خود را روشن کنید تا به کنسول آن دسترسی داشته باشید",
+  "running-vm": "ماشین های مجازی در حال اجرا | ماشین مجازی در حال اجرا",
   "stats": "آمار",
   "storage": "ذخیره سازی",
   "support-name": "پشتیبانی حرفه ای {name}",

package/lib/locales/fr.json

@@ -20,9 +20,9 @@
 
   "core.search": "Rechercher",
 
-  "core.search-bar.label": "Moteur de recherche",
-  "core.search-bar.placeholder": "Écrivez votre requête…",
-  "core.search-bar.use-query-builder": "Utiliser le constructeur de requête",
+  "core.query-search-bar.label": "Moteur de recherche",
+  "core.query-search-bar.placeholder": "Écrivez votre requête…",
+  "core.query-search-bar.use-query-builder": "Utiliser le constructeur de requête",
 
   "core.select.all": "Tout sélectionner",
   "core.select.none": "Tout désélectionner",
@@ -48,7 +48,9 @@
   "n-vms": "1 VM | {n} VMs",
   "network": "Réseau",
   "object-not-found": "L'objet {id} est introuvable…",
+  "patches": "Patches",
   "power-on-for-console": "Allumez votre VM pour accéder à sa console",
+  "running-vm": "VM en cours d'exécution | VMs en cours d'exécution",
   "see-all": "Voir tout",
   "stats": "Stats",
   "storage": "Stockage",

package/lib/stores/ui.store.ts

@@ -6,7 +6,7 @@ import { useRoute, useRouter } from 'vue-router'
 export const useUiStore = defineStore('ui', () => {
   const currentHostOpaqueRef = ref()
 
-  const { store: colorMode } = useColorMode({ initialValue: 'dark' })
+  const { store: colorMode } = useColorMode({ initialValue: 'auto' })
 
   const { desktop: isDesktop } = useBreakpoints({
     desktop: 1024,

package/lib/types/backup.type.ts

@@ -0,0 +1,11 @@
+import type { RouteLocationRaw } from 'vue-router'
+
+export type BackupState = 'success' | 'failure' | 'partial'
+
+export type BackupStates = BackupState[]
+
+export type Backup = {
+  label: string
+  route: RouteLocationRaw
+  states: BackupStates
+}

package/lib/types/utility.type.ts

@@ -1,3 +1,9 @@
 export type MaybeArray<T> = T | T[]
 
 export type VoidFunction = () => void
+
+declare const __brand: unique symbol
+
+export type Branded<TBrand extends string, TType = string> = TType & { [__brand]: TBrand }
+
+export type EmptyObject = Record<string, never>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.0.5",
+  "version": "0.1.1",
   "private": false,
   "exports": {
     "./*": {
@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
-    "@types/novnc__novnc": "^1.3.5",
+    "@types/novnc__novnc": "^1.5.0",
     "@vue/tsconfig": "^0.5.1",
     "pinia": "^2.1.7",
     "vue": "^3.4.13",

package/lib/types/novnc.d.ts

@@ -1,342 +0,0 @@
-// [WARNING] Temporary file to fix typecheck error
-// Remove if this PR is merged: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/70022
-// Type definitions for @novnc/novnc 1.5
-// Project: https://github.com/novnc/noVNC
-// Definitions by: Jake Jarvis <https://github.com/jakejarvis>
-//                 Maksim Ovcharik <https://github.com/ovcharik>
-// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-
-/* eslint-disable no-use-before-define */
-
-declare module '@novnc/novnc/lib/rfb' {
-  /**
-   * An `object` specifying the credentials to provide to the server when authenticating.
-   */
-  interface NoVncCredentials {
-    /** The user that authenticates */
-    username: string
-    /** Password for the user */
-    password: string
-    /** Target machine or session */
-    target: string
-  }
-
-  /**
-   * An `object` specifying extra details about how the connection should be made.
-   */
-  interface NoVncOptions {
-    /**
-     * A `boolean` indicating if the remote server should be shared or if any other connected
-     * clients should be disconnected. Enabled by default.
-     */
-    shared?: boolean
-    /**
-     * An `object` specifying the credentials to provide to the server when authenticating.
-     */
-    credentials?: NoVncCredentials
-    /**
-     * A `string` specifying the ID to provide to any VNC repeater encountered.
-     */
-    repeaterID?: string
-    /**
-     * An `Array` of `string`s specifying the sub-protocols to use in the WebSocket connection.
-     * Empty by default.
-     */
-    wsProtocols?: string[]
-  }
-
-  interface NoVncEvents {
-    /**
-     * The `connect` event is fired after all the handshaking with the server is completed and the
-     * connection is fully established. After this event the `NoVncClient` object is ready to
-     * receive graphics updates and to send input.
-     */
-    connect: CustomEvent<Record<string, never>>
-
-    /**
-     * The `disconnect` event is fired when the connection has been terminated. The `detail`
-     * property is an `object` that contains the property `clean`. `clean` is a `boolean` indicating
-     * if the termination was clean or not. In the event of an unexpected termination or an error
-     * `clean` will be set to false.
-     */
-    disconnect: CustomEvent<{ clean: boolean }>
-
-    /**
-     * The `credentialsrequired` event is fired when the server requests more credentials than were
-     * specified to {@link NoVncClient}. The `detail` property is an `object` containing the
-     * property `types` which is an `Array` of `string` listing the credentials that are required.
-     */
-    credentialsrequired: CustomEvent<{ types: Array<keyof NoVncCredentials> }>
-
-    /**
-     * The `securityfailure` event is fired when the handshaking process with the server fails
-     * during the security negotiation step. The `detail` property is an `object` containing the
-     * following properties:
-     *
-     * | Property | Type        | Description
-     * | -------- | ----------- | -----------
-     * | `status` | `number`    | The failure status code
-     * | `reason` | `string`    | The **optional** reason for the failure
-     *
-     * The property `status` corresponds to the
-     * [SecurityResult](https://github.com/rfbproto/rfbproto/blob/master/rfbproto.rst#securityresult)
-     * status code in cases of failure. A status of zero will not be sent in this event since that
-     * indicates a successful security handshaking process. The optional property `reason` is
-     * provided by the server and thus the language of the string is not known. However most servers
-     * will probably send English strings. The server can choose to not send a reason and in these
-     * cases the `reason` property will be omitted.
-     */
-    securityfailure: CustomEvent<{ status: number; reason?: string }>
-
-    /**
-     * The `clipboard` event is fired when the server has sent clipboard data. The `detail` property
-     * is an `object` containing the property `text` which is a `string` with the clipboard data.
-     */
-    clipboard: CustomEvent<{ text: string }>
-
-    /**
-     * The `bell` event is fired when the server has requested an audible bell.
-     */
-    bell: CustomEvent<Record<string, never>>
-
-    /**
-     * The `desktopname` event is fired when the name of the remote desktop changes. The `detail`
-     * property is an `object` with the property `name` which is a `string` specifying the new name.
-     */
-    desktopname: CustomEvent<{ name: string }>
-
-    /**
-     * The `capabilities` event is fired whenever an entry is added or removed from `capabilities`.
-     * The `detail` property is an `object` with the property `capabilities` containing the new
-     * value of `capabilities`.
-     */
-    capabilities: CustomEvent<{ capabilities: NoVncClient['capabilities'] }>
-  }
-
-  type NoVncEventType = keyof NoVncEvents
-  type NoVncEvent = NoVncEvents[NoVncEventType]
-
-  class NoVncEventTarget extends EventTarget {
-    protected _listeners: Map<NoVncEventType, (event: Event) => void>
-
-    addEventListener<T extends NoVncEventType>(type: T, listener: (event: NoVncEvents[T]) => void): void
-    addEventListener(type: string, listener: (event: CustomEvent) => void): void
-
-    removeEventListener<T extends NoVncEventType>(type: T, listener: (event: NoVncEvents[T]) => void): void
-    removeEventListener(type: string, listener: (event: CustomEvent) => void): void
-
-    dispatchEvent(event: NoVncEvent | CustomEvent): boolean
-  }
-
-  /**
-   * The `NoVncClient` object represents a single connection to a VNC server. It communicates using
-   * a WebSocket that must provide a standard NoVncClient protocol stream.
-   */
-  export default class NoVncClient extends NoVncEventTarget {
-    readonly _rfbConnectionState: string
-    readonly _target: Element
-    readonly _url: string | null
-
-    /**
-     * Returns a new `NoVncClient` object and initiates a new connection to a specified VNC server.
-     *
-     * @param target - A block {@link HTMLElement} that specifies where the `NoVncClient` object
-     * should attach itself. The existing contents of the `HTMLElement` will be untouched, but new
-     * elements will be added during the lifetime of the `NoVncClient` object.
-     * @param url - A `string`, {@link WebSocket}, or {@link RTCDataChannel} specifying the VNC server to connect
-     * to. This must be a valid WebSocket URL.
-     * @param options - An {@link NoVncOptions} specifying extra details about how the connection
-     * should be made.
-     */
-    constructor(target: Element, url: string | WebSocket | RTCDataChannel, options?: NoVncOptions)
-
-    /**
-     * Is a `boolean` indicating if any events (e.g. key presses or mouse movement) should be
-     * prevented from being sent to the server. Disabled by default.
-     */
-    viewOnly: boolean
-
-    /**
-     * Is a `boolean` indicating if keyboard focus should automatically be moved to the remote
-     * session when a `mousedown` or `touchstart` event is received. Enabled by default.
-     */
-    focusOnClick: boolean
-
-    /**
-     * Is a `boolean` indicating if the remote session should be clipped to its container. When
-     * disabled scrollbars will be shown to handle the resulting overflow. Disabled by default.
-     */
-    clipViewport: boolean
-
-    /**
-     * Is a `boolean` indicating if mouse events should control the relative position of a clipped
-     * remote session. Only relevant if `clipViewport` is enabled. Disabled by default.
-     */
-    dragViewport: boolean
-
-    /**
-     * Is a `boolean` indicating if the remote session should be scaled locally so it fits its
-     * container. When disabled it will be centered if the remote session is smaller than its
-     * container, or handled according to `clipViewport` if it is larger. Disabled by default.
-     */
-    scaleViewport: boolean
-
-    /**
-     * Is a `boolean` indicating if a request to resize the remote session should be sent whenever
-     * the container changes dimensions. Disabled by default.
-     */
-    resizeSession: boolean
-
-    /**
-     * Is a `boolean` indicating whether a dot cursor should be shown instead of a zero-sized or
-     * fully-transparent cursor if the server sets such invisible cursor. Disabled by default.
-     */
-    showDotCursor: boolean
-
-    /**
-     * Is a valid CSS [background](https://developer.mozilla.org/en-US/docs/Web/CSS/background)
-     * style value indicating which background style should be applied to the element containing the
-     * remote session screen. The default value is `rgb(40, 40, 40)` (solid gray color).
-     */
-    background: string
-
-    /**
-     * Is an `int` in range `[0-9]` controlling the desired JPEG quality. Value `0` implies low
-     * quality and `9` implies high quality. Default value is `6`.
-     */
-    qualityLevel: number
-
-    /**
-     * Is an `int` in range `[0-9]` controlling the desired compression level. Value `0` means no
-     * compression. Level 1 uses a minimum of CPU resources and achieves weak compression ratios,
-     * while level 9 offers best compression but is slow in terms of CPU consumption on the server
-     * side. Use high levels with very slow network connections. Default value is `2`.
-     */
-    compressionLevel: number
-
-    /**
-     * Is an `object` indicating which optional extensions are available on the server. Some methods
-     * may only be called if the corresponding capability is set. The following capabilities are
-     * defined:
-     *
-     * | name     | type      | description
-     * | -------- | --------- | -----------
-     * | `power`  | `boolean` | Machine power control is available
-     */
-    readonly capabilities: {
-      /** Machine power control is available */
-      power: boolean
-    }
-
-    /**
-     * Disconnect from the server.
-     */
-    disconnect(): void
-
-    /**
-     * Send credentials to server. Should be called after the
-     * {@link NoVncEventType.credentialsrequired} event has fired.
-     *
-     * @param credentials An {@link NoVncCredentials} specifying the credentials to provide to the
-     * server when authenticating.
-     */
-    sendCredentials(credentials: NoVncCredentials): void
-
-    /**
-     * Send a key event to the server.
-     *
-     * @param keysym A `number` specifying the NoVncClient keysym to send. Can be `0` if a valid
-     * **`code`** is specified.
-     * @param code A `string` specifying the physical key to send. Valid values are those that can
-     * be specified to {@link KeyboardEvent.code}. If the physical key cannot be determined then
-     * `null` shall be specified.
-     * @param down A `boolean` specifying if a press or a release event should be sent. If omitted
-     * then both a press and release event are sent.
-     */
-    sendKey(keysym: number, code: string | null, down?: boolean): void
-
-    /**
-     * Send the key sequence *left Control*, *left Alt*, *Delete*. This is a convenience wrapper
-     * around {@link sendKey}.
-     */
-    sendCtrlAltDel(): void
-
-    /**
-     * Sets the keyboard focus on the remote session. Keyboard events will be sent to the remote
-     * server after this point.
-     *
-     * @param options A {@link FocusOptions} providing options to control how the focus will be
-     * performed. Please see {@link HTMLElement.focus} for available options.
-     */
-    focus(options?: FocusOptions): void
-
-    /**
-     * Remove keyboard focus on the remote session. Keyboard events will no longer be sent to the
-     * remote server after this point.
-     */
-    blur(): void
-
-    /**
-     * Request to shut down the remote machine. The capability `power` must be set for this method
-     * to have any effect.
-     */
-    machineShutdown(): void
-
-    /**
-     * Request a clean reboot of the remote machine. The capability `power` must be set for this
-     * method to have any effect.
-     */
-    machineReboot(): void
-
-    /**
-     * Request a forced reset of the remote machine. The capability `power` must be set for this
-     * method to have any effect.
-     */
-    machineReset(): void
-
-    /**
-     * Send clipboard data to the remote server.
-     *
-     * @param text A `string` specifying the clipboard data to send.
-     */
-    clipboardPasteFrom(text: string): void
-  }
-}
-
-declare module '@novnc/novnc/core/util/browser' {
-  let isTouchDevice: boolean
-  let dragThreshold: number
-
-  const supportsCursorURIs: boolean
-  const hasScrollbarGutter: boolean
-
-  function isMac(): boolean
-
-  function isWindows(): boolean
-
-  function isIOS(): boolean
-
-  function isSafari(): boolean
-
-  function isFirefox(): boolean
-}
-
-declare module '@novnc/novnc/core/input/util' {
-  interface KeyboardEventBase {
-    char?: string
-    charCode?: number
-    code: string
-    key: string
-    keyCode?: number
-    location?: number
-    type?: string
-  }
-
-  function getKeycode(event: KeyboardEventBase): string
-
-  function getKey(event: KeyboardEventBase): string
-
-  function getKeysym(event: KeyboardEventBase): number
-}
-
-/* eslint-enable no-use-before-define */