@xen-orchestra/web-core 0.51.0 → 0.53.0

package/lib/packages/validated-form/use-validated-form.ts

@@ -0,0 +1,180 @@
+import type { InputWrapperMessage } from '@core/components/input-wrapper/VtsInputWrapper.vue'
+import type { CollectionItemProperties, GetItemId } from '@core/packages/collection'
+import { useFormBindings } from '@core/packages/form-bindings'
+import { useFormSelect as _useFormSelect } from '@core/packages/form-select'
+import type {
+  ExtractValue,
+  FormSelectId,
+  GetOptionLabel,
+  GetOptionValue,
+  UseFormSelectReturn,
+} from '@core/packages/form-select/types.ts'
+import { useFormValidation } from '@core/packages/form-validation'
+import type { FormValidationConfig } from '@core/packages/form-validation/types.ts'
+import type { EmptyObject, MaybeArray } from '@core/types/utility.type.ts'
+import { toRef, type MaybeRefOrGetter, type ComputedRef, type Ref } from 'vue'
+
+export type ModelBinding<T> = { modelValue: T; 'onUpdate:modelValue': (value: T) => void }
+
+export type FieldMetadata = {
+  error: InputWrapperMessage | undefined
+  warning: InputWrapperMessage | undefined
+  onBlur: () => void
+}
+
+function toMessage(content: string | undefined, accent: 'danger' | 'warning'): InputWrapperMessage | undefined {
+  return content !== undefined ? { content, accent } : undefined
+}
+
+export type UseFormSelectConfig<TSource, TCustomProperties extends CollectionItemProperties> = {
+  multiple?: MaybeRefOrGetter<boolean>
+  disabled?: MaybeRefOrGetter<boolean>
+  selectedLabel?: (count: number, labels: string[]) => string | undefined
+  placeholder?: MaybeRefOrGetter<string>
+  searchPlaceholder?: MaybeRefOrGetter<string>
+  loading?: MaybeRefOrGetter<boolean>
+  required?: MaybeRefOrGetter<boolean>
+  searchable?: MaybeRefOrGetter<boolean>
+  emptyOption?: MaybeRefOrGetter<{
+    value: unknown
+    properties?: TCustomProperties
+    label: string
+    selectedLabel?: string
+  }>
+  option?: {
+    id?: GetItemId<TSource>
+    value?:
+      | GetOptionValue<TSource, TCustomProperties>
+      | ((source: TSource, properties: TCustomProperties, index: number) => unknown)
+    properties?: (source: TSource) => TCustomProperties
+    label?: GetOptionLabel<TSource, TCustomProperties>
+    selectedLabel?: (source: TSource, properties: TCustomProperties) => string
+    disabled?: (source: TSource, properties: TCustomProperties) => boolean
+    searchableTerm?: (source: TSource, properties: TCustomProperties) => MaybeArray<string>
+  }
+}
+
+export function useValidatedForm<TData extends Record<string, unknown>>(
+  data: TData,
+  config: FormValidationConfig<TData>
+) {
+  const { useField: _useField, useSelect: _useSelect } = useFormBindings(data)
+  const { errors: rawErrors, warnings: rawWarnings, validate, reset, handleBlur } = useFormValidation(data, config)
+
+  const selectRegistry = new Map<FormSelectId, keyof TData>()
+
+  function fieldMetadata(key: keyof TData): () => FieldMetadata {
+    return () => ({
+      error: toMessage(rawErrors.value[key], 'danger'),
+      warning: toMessage(rawWarnings.value[key], 'warning'),
+      onBlur: () => handleBlur(key),
+    })
+  }
+
+  function fieldMetadataWithExtras<E extends Record<string, unknown>>(
+    key: keyof TData,
+    extras: () => E
+  ): () => FieldMetadata & E {
+    return () => ({
+      error: toMessage(rawErrors.value[key], 'danger'),
+      warning: toMessage(rawWarnings.value[key], 'warning'),
+      onBlur: () => handleBlur(key),
+      ...extras(),
+    })
+  }
+
+  function useField<K extends keyof TData>(key: K): ComputedRef<ModelBinding<TData[K]> & FieldMetadata>
+  function useField<K extends keyof TData, E extends Record<string, unknown>>(
+    key: K,
+    extras: () => E
+  ): ComputedRef<ModelBinding<TData[K]> & FieldMetadata & E>
+  function useField<K extends keyof TData, E extends Record<string, unknown> = Record<string, unknown>>(
+    key: K,
+    extras?: () => E
+  ) {
+    if (extras !== undefined) {
+      return _useField(key, fieldMetadataWithExtras(key, extras))
+    }
+
+    return _useField(key, fieldMetadata(key))
+  }
+
+  function useFormSelect<
+    TSource,
+    TCustomProperties extends CollectionItemProperties = EmptyObject,
+    TGetValue extends GetOptionValue<TSource, TCustomProperties> = undefined,
+    TMultiple extends boolean = false,
+    TEmptyValue = never,
+    $TValue = ExtractValue<TSource, TGetValue>,
+  >(
+    key: keyof TData,
+    sources: MaybeRefOrGetter<TSource[]>,
+    formSelectConfig?: UseFormSelectConfig<TSource, TCustomProperties>
+  ): UseFormSelectReturn<TCustomProperties, TSource, $TValue | TEmptyValue, TMultiple> {
+    const model = toRef(data, key) as Ref<unknown>
+
+    const result = (
+      _useFormSelect as unknown as (
+        sources: MaybeRefOrGetter<TSource[]>,
+        config: UseFormSelectConfig<TSource, TCustomProperties> & { model: Ref<unknown> }
+      ) => UseFormSelectReturn<TCustomProperties, TSource, $TValue | TEmptyValue, TMultiple>
+    )(sources, {
+      ...formSelectConfig,
+      model,
+    })
+
+    selectRegistry.set(result.id, key)
+
+    return result
+  }
+
+  function useSelect(id: FormSelectId): ComputedRef<{ id: FormSelectId } & FieldMetadata>
+  function useSelect<E extends Record<string, unknown>>(
+    id: FormSelectId,
+    extras: () => E
+  ): ComputedRef<{ id: FormSelectId } & FieldMetadata & E>
+  function useSelect<E extends Record<string, unknown>>(
+    id: FormSelectId,
+    key: keyof TData,
+    extras?: () => E
+  ): ComputedRef<{ id: FormSelectId } & FieldMetadata & E>
+  function useSelect<E extends Record<string, unknown> = Record<string, unknown>>(
+    id: FormSelectId,
+    keyOrExtras?: keyof TData | (() => E),
+    extras?: () => E
+  ) {
+    if (typeof keyOrExtras === 'string') {
+      const key = keyOrExtras as keyof TData
+      const metadata = extras !== undefined ? fieldMetadataWithExtras(key, extras) : fieldMetadata(key)
+
+      return _useSelect(id, metadata)
+    }
+
+    const extrasFromRegistry = keyOrExtras as (() => E) | undefined
+    const registryKey = selectRegistry.get(id)
+
+    if (registryKey !== undefined) {
+      const metadata =
+        extrasFromRegistry !== undefined
+          ? fieldMetadataWithExtras(registryKey, extrasFromRegistry)
+          : fieldMetadata(registryKey)
+
+      return _useSelect(id, metadata)
+    }
+
+    if (extrasFromRegistry !== undefined) {
+      return _useSelect(id, extrasFromRegistry)
+    }
+
+    return _useSelect(id)
+  }
+
+  return {
+    useField,
+    useFormSelect,
+    useSelect,
+    validate,
+    reset,
+    handleBlur,
+  }
+}

package/lib/utils/parse-tag.util.ts

@@ -0,0 +1,22 @@
+export type ParsedTag = {
+  term: string
+  label: string
+}
+
+export function parseTag(value: string): ParsedTag | null {
+  const index = value.indexOf('=')
+
+  if (index === -1) {
+    return null
+  }
+
+  const term = value.slice(0, index).trim()
+
+  const label = value.slice(index + 1).trim()
+
+  if (term === '' || label === '') {
+    return null
+  }
+
+  return { term, label }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.51.0",
+  "version": "0.53.0",
   "private": false,
   "exports": {
     "./*": {
@@ -17,11 +17,14 @@
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/vue-fontawesome": "^3.0.8",
     "@novnc/novnc": "~1.5.0",
+    "@regle/core": "^1.20.2",
+    "@regle/rules": "^1.20.2",
+    "@regle/schemas": "^1.20.2",
     "@types/d3-time-format": "^4.0.3",
-    "@vueuse/core": "^13.0.0",
-    "@vueuse/math": "^13.0.0",
-    "@vueuse/router": "^13.0.0",
-    "@vueuse/shared": "^13.0.0",
+    "@vueuse/core": "^14.0.0",
+    "@vueuse/math": "^14.0.0",
+    "@vueuse/router": "^14.0.0",
+    "@vueuse/shared": "^14.0.0",
     "complex-matcher": "^1.1.1",
     "d3-time-format": "^4.1.0",
     "echarts": "^5.6.0",
@@ -38,16 +41,16 @@
     "pinia": "^3.0.1",
     "vue": "~3.5.13",
     "vue-i18n": "^11.1.2",
-    "vue-router": "^4.5.0"
+    "vue-router": "^5.0.0"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
     "@types/novnc__novnc": "~1.5.0",
-    "@vue/tsconfig": "^0.7.0",
+    "@vue/tsconfig": "^0.9.0",
     "pinia": "^3.0.1",
     "vue": "~3.5.13",
     "vue-i18n": "^11.1.2",
-    "vue-router": "^4.5.0"
+    "vue-router": "^5.0.0"
   },
   "homepage": "https://github.com/vatesfr/xen-orchestra/tree/master/@xen-orchestra/web-core",
   "bugs": "https://github.com/vatesfr/xen-orchestra/issues",

package/tsconfig.json

@@ -1,10 +1,9 @@
 {
   "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "include": ["env.d.ts", "lib/**/*", "lib/**/*.vue"],
-  "exclude": ["lib/**/__tests__/*"],
+  "include": ["env.d.ts", "./lib/**/*", "./lib/**/*.vue"],
+  "exclude": ["./lib/**/__tests__/*"],
   "compilerOptions": {
     "noEmit": true,
-    "baseUrl": ".",
     "paths": {
       "@core/*": ["./lib/*"]
     }

package/lib/components/quick-info-row/VtsQuickInfoRow.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="vts-quick-info-row" :class="{ mobile: uiStore.isSmall }">
-    <span v-tooltip class="typo-body-regular label text-ellipsis">
-      <slot name="label">
-        {{ label }}
-      </slot>
-    </span>
-    <span v-tooltip class="typo-body-regular value text-ellipsis">
-      <slot name="value">
-        {{ value }}
-      </slot>
-    </span>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { vTooltip } from '@core/directives/tooltip.directive'
-import { useUiStore } from '@core/stores/ui.store.ts'
-
-defineProps<{
-  label?: string
-  value?: string
-}>()
-
-defineSlots<{
-  label?(): any
-  value?(): any
-}>()
-
-const uiStore = useUiStore()
-</script>
-
-<style lang="postcss" scoped>
-.vts-quick-info-row {
-  display: flex;
-  gap: 2.4rem;
-
-  &.mobile {
-    flex-direction: column;
-    gap: 0.8rem;
-  }
-
-  .label {
-    flex-shrink: 0;
-    color: var(--color-neutral-txt-secondary);
-  }
-
-  .value {
-    color: var(--color-neutral-txt-primary);
-    display: flex;
-    align-items: center;
-    gap: 0.8rem;
-
-    &:empty::before {
-      content: '-';
-    }
-  }
-}
-</style>

package/lib/components/ui/chip/ChipIcon.vue

@@ -1,21 +0,0 @@
-<template>
-  <VtsIcon :class="{ muted: disabled }" :name="icon" size="medium" class="chip-icon" />
-</template>
-
-<script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import type { IconName } from '@core/icons'
-
-defineProps<{
-  icon?: IconName
-  disabled?: boolean
-}>()
-</script>
-
-<style lang="postcss" scoped>
-.chip-icon {
-  &.muted {
-    color: var(--color-neutral-txt-secondary);
-  }
-}
-</style>

package/lib/components/ui/chip/ChipRemoveIcon.vue

@@ -1,16 +0,0 @@
-<template>
-  <UiButtonIcon :accent="buttonAccent" icon="fa:xmark" size="small" />
-</template>
-
-<script lang="ts" setup>
-import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
-import type { ChipAccent } from '@core/components/ui/chip/UiChip.vue'
-import { computed } from 'vue'
-
-const { accent } = defineProps<{
-  accent: ChipAccent
-}>()
-
-// FIXME: temporary fix for the 'success' accent, since it doesn't exist in the UiButtonIcon component
-const buttonAccent = computed(() => (accent === 'info' || accent === 'success' ? 'brand' : accent))
-</script>