@xen-orchestra/web-core 0.18.0 → 0.20.0

package/lib/components/ui/circle-progress-bar/UiCircleProgressBar.vue

@@ -0,0 +1,212 @@
+<!-- v4 -->
+<template>
+  <div class="ui-circle-progress-bar" :class="className">
+    <svg
+      :width="circleSize"
+      :height="circleSize"
+      :viewBox="`0 0 ${circleSize} ${circleSize}`"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle :r="radius" :cx="circleSize / 2" :cy="circleSize / 2" fill="transparent" class="background" />
+      <circle
+        :r="radius"
+        :cx="circleSize / 2"
+        :cy="circleSize / 2"
+        fill="transparent"
+        class="fill"
+        :class="{ success: isCompleteWithSuccess }"
+      />
+    </svg>
+    <div v-if="size !== 'extra-small'" class="overlay">
+      <VtsIcon v-if="isComplete" class="icon" :icon :accent="iconAccent" />
+      <span v-else>{{ percentValue }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import { toVariants } from '@core/utils/to-variants.util.ts'
+import { faCheck, faExclamation } from '@fortawesome/free-solid-svg-icons'
+import { useClamp, useMax } from '@vueuse/math'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const {
+  accent,
+  size,
+  value: _value,
+  maxValue = 100,
+} = defineProps<{
+  accent: CircleProgressBarAccent
+  size: CircleProgressBarSize
+  value: number
+  maxValue?: number
+}>()
+
+const { n } = useI18n()
+
+type CircleProgressBarAccent = 'info' | 'warning' | 'danger'
+type CircleProgressBarSize = 'extra-small' | 'small' | 'medium' | 'large'
+
+const circleSizeMap = {
+  'extra-small': 16,
+  small: 40,
+  medium: 64,
+  large: 164,
+}
+
+const strokeWidthMap = {
+  'extra-small': 2,
+  small: 4,
+  medium: 6,
+  large: 16,
+}
+
+const fontClassesMap = {
+  'extra-small': undefined,
+  small: 'typo-body-bold-small',
+  medium: 'typo-h5',
+  large: 'typo-h3',
+}
+
+const circleSize = computed(() => circleSizeMap[size])
+const fontClass = computed(() => fontClassesMap[size])
+const strokeWidth = computed(() => strokeWidthMap[size])
+
+const radius = computed(() => (circleSize.value - strokeWidth.value) / 2)
+const circumference = computed(() => 2 * Math.PI * radius.value)
+
+const value = useMax(0, () => _value)
+const valuePercent = useClamp(() => (value.value / maxValue) * 100 || 0, 0, 100)
+
+const isComplete = computed(() => valuePercent.value >= 100)
+const isCompleteWithSuccess = computed(() => isComplete.value && accent === 'info')
+
+const dashOffset = computed(() => {
+  if (valuePercent.value > 100) return
+  return circumference.value * (1 - valuePercent.value / 100)
+})
+
+const percentValue = computed(() => n(valuePercent.value / 100, 'percent'))
+
+const iconAccent = computed(() => (isCompleteWithSuccess.value ? 'success' : accent))
+const icon = computed(() => (accent === 'warning' || accent === 'danger' ? faExclamation : faCheck))
+
+const className = computed(() => [
+  fontClass.value,
+  toVariants({
+    accent,
+    size,
+  }),
+])
+</script>
+
+<style lang="postcss" scoped>
+.ui-circle-progress-bar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  /* ACCENT */
+
+  &.accent--info {
+    color: var(--color-info-item-base);
+
+    .fill {
+      stroke: var(--color-info-item-base);
+    }
+
+    .background {
+      stroke: var(--color-info-background-selected);
+    }
+
+    .success {
+      stroke: var(--color-success-item-base);
+    }
+  }
+
+  &.accent--warning {
+    color: var(--color-warning-item-base);
+
+    .fill {
+      stroke: var(--color-warning-item-base);
+    }
+
+    .background {
+      stroke: var(--color-warning-background-selected);
+    }
+  }
+
+  &.accent--danger {
+    color: var(--color-danger-item-base);
+
+    .fill {
+      stroke: var(--color-danger-item-base);
+    }
+
+    .background {
+      stroke: var(--color-danger-background-selected);
+    }
+  }
+
+  /* SIZE */
+
+  &.size--extra-small {
+    .background,
+    .fill {
+      stroke-width: 2;
+    }
+  }
+
+  &.size--small {
+    .icon {
+      font-size: 1.6rem;
+    }
+
+    .background,
+    .fill {
+      stroke-width: 4;
+    }
+  }
+
+  &.size--medium {
+    .icon {
+      font-size: 3.2rem;
+    }
+
+    .background,
+    .fill {
+      stroke-width: 6;
+    }
+  }
+
+  &.size--large {
+    .icon {
+      font-size: 4.8rem;
+    }
+
+    .background,
+    .fill {
+      stroke-width: 16;
+    }
+  }
+
+  .fill {
+    stroke-linecap: butt;
+    transition: stroke-dashoffset 0.3s ease;
+    transform: rotate(-90deg);
+    transform-origin: center;
+    stroke-dasharray: v-bind(circumference);
+    stroke-dashoffset: v-bind(dashOffset);
+  }
+
+  .overlay {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+}
+</style>

package/lib/components/ui/dropdown/UiDropdownList.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="ui-dropdown-list">
-    <slot />
+    <slot name="before" />
+    <div class="container">
+      <slot />
+    </div>
   </div>
 </template>
 
@@ -8,9 +11,14 @@
 .ui-dropdown-list {
   display: flex;
   flex-direction: column;
-  overflow: auto;
   background: var(--color-neutral-background-primary);
   border: 0.1rem solid var(--color-neutral-border);
   border-radius: 0.4rem;
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+  }
 }
 </style>

package/lib/components/ui/head-bar/UiHeadBar.vue

@@ -1,4 +1,4 @@
-<!-- v3 -->
+<!-- v4 -->
 <template>
   <div class="ui-head-bar">
     <div class="label-wrapper">
@@ -41,7 +41,7 @@ const slots = defineSlots<{
 .ui-head-bar {
   padding: 0.8rem 1.6rem;
   display: flex;
-  gap: 4.8rem;
+  gap: 1.6rem;
   align-items: center;
   border-bottom: 0.1rem solid var(--color-neutral-border);
   background-color: var(--color-neutral-background-primary);

package/lib/components/ui/info/UiInfo.vue

@@ -1,8 +1,8 @@
-<!-- v2 -->
+<!-- v4 -->
 <template>
   <div class="ui-info">
     <VtsIcon :accent class="icon" :icon="faCircle" :overlay-icon="icon" />
-    <p v-tooltip="!wrap" class="typo-form-info" :class="{ 'text-ellipsis': !wrap }">
+    <p v-tooltip="!wrap" class="typo-body-regular-small" :class="{ 'text-ellipsis': !wrap }">
       <slot />
     </p>
   </div>
@@ -16,12 +16,13 @@ import {
   faCircle,
   faExclamation,
   faInfo,
+  faMinus,
   faXmark,
   type IconDefinition,
 } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
-export type InfoAccent = 'info' | 'success' | 'warning' | 'danger'
+export type InfoAccent = 'info' | 'success' | 'warning' | 'danger' | 'muted'
 
 const { accent } = defineProps<{
   accent: InfoAccent
@@ -37,6 +38,7 @@ const iconByAccent: Record<InfoAccent, IconDefinition> = {
   success: faCheck,
   warning: faExclamation,
   danger: faXmark,
+  muted: faMinus,
 }
 
 const icon = computed(() => iconByAccent[accent])

package/lib/components/ui/input/UiInput.vue

@@ -1,41 +1,41 @@
 <!-- v5 -->
 <template>
-  <div class="ui-input" :class="toVariants({ accent })">
-    <UiLabel v-if="slots.default || label" :accent="labelAccent" :required :icon="labelIcon" :href :for="id">
-      <slot>{{ label }}</slot>
-    </UiLabel>
-    <div>
-      <VtsIcon :icon accent="current" class="before" />
-      <input
-        :id
-        v-model.trim="modelValue"
-        class="typo-body-regular input text-ellipsis"
-        :type
-        :disabled
-        v-bind="attrs"
-      />
-      <VtsIcon
-        v-if="!attrs.disabled && modelValue && clearable"
-        :icon="faXmark"
-        class="after"
-        accent="brand"
-        @click="modelValue = ''"
-      />
-    </div>
-    <UiInfo v-if="slots.info || info" :accent="accent === 'brand' ? 'info' : accent">
-      <slot name="info">{{ info }}</slot>
-    </UiInfo>
+  <div :class="toVariants({ accent, disabled })" class="ui-input" @click.self="focus()">
+    <VtsIcon :icon accent="current" class="left-icon" />
+    <input
+      :id="wrapperController?.id ?? id"
+      ref="inputRef"
+      v-model.trim="modelValue"
+      :disabled
+      :required
+      :type
+      class="typo-body-regular input text-ellipsis"
+      v-bind="attrs"
+    />
+    <UiButtonIcon
+      v-if="!disabled && modelValue && clearable"
+      :icon="faXmark"
+      :target-scale="1.6"
+      accent="brand"
+      size="small"
+      @click="clear()"
+    />
+    <slot v-if="slots['right-icon'] || rightIcon" name="right-icon">
+      <VtsIcon :icon="rightIcon" accent="current" class="right-icon" />
+    </slot>
   </div>
 </template>
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import UiInfo from '@core/components/ui/info/UiInfo.vue'
-import UiLabel from '@core/components/ui/label/UiLabel.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import type { LabelAccent } from '@core/components/ui/label/UiLabel.vue'
+import { useMapper } from '@core/composables/mapper.composable.ts'
+import { IK_INPUT_WRAPPER_CONTROLLER } from '@core/utils/injection-keys.util'
 import { toVariants } from '@core/utils/to-variants.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faXmark } from '@fortawesome/free-solid-svg-icons'
-import { computed, useAttrs, useId } from 'vue'
+import { inject, ref, useAttrs, watchEffect } from 'vue'
 
 type InputAccent = 'brand' | 'warning' | 'danger'
 type InputType = 'text' | 'number' | 'password' | 'search'
@@ -44,135 +44,152 @@ defineOptions({
   inheritAttrs: false,
 })
 
-const { accent, id = useId() } = defineProps<{
+const {
+  accent: _accent,
+  required,
+  disabled,
+  id,
+} = defineProps<{
   accent: InputAccent
-  label?: string
-  info?: string
   id?: string
-  disabled?: boolean
-  clearable?: boolean
-  href?: string
   required?: boolean
-  labelIcon?: IconDefinition
-  icon?: IconDefinition
+  disabled?: boolean
   type?: InputType
+  icon?: IconDefinition
+  rightIcon?: IconDefinition
+  clearable?: boolean
 }>()
 
 const modelValue = defineModel<string | number>({ required: true })
 
 const slots = defineSlots<{
-  default?(): any
-  info?(): any
+  'right-icon'?(): any
 }>()
 
 const attrs = useAttrs()
 
-const labelAccent = computed(() => (accent === 'brand' ? 'neutral' : accent))
+const inputRef = ref<HTMLInputElement>()
+
+const wrapperController = inject(IK_INPUT_WRAPPER_CONTROLLER, undefined)
+
+const accent = useMapper<LabelAccent, InputAccent>(
+  () => wrapperController?.labelAccent,
+  {
+    neutral: _accent,
+    warning: 'warning',
+    danger: 'danger',
+  },
+  () => _accent
+)
+
+if (wrapperController) {
+  watchEffect(() => {
+    wrapperController.required = required
+  })
+}
+
+function focus() {
+  inputRef.value?.focus()
+}
+
+function clear() {
+  modelValue.value = ''
+  focus()
+}
+
+defineExpose({ focus })
 </script>
 
 <style lang="postcss" scoped>
-/* IMPLEMENTATION */
 .ui-input {
-  position: relative;
   display: flex;
-  flex-direction: column;
-  gap: 0.4rem;
-  flex: 1;
+  align-items: center;
+  gap: 1.6rem;
+  border-radius: 0.4rem;
+  border-width: 0.1rem;
+  border-style: solid;
+  background-color: var(--color-neutral-background-primary);
+  color: var(--color-neutral-txt-primary);
+  height: 4rem;
+  width: 100%;
+  padding-inline: 1.6rem;
+
+  .left-icon,
+  .right-icon {
+    pointer-events: none;
+    color: var(--color-neutral-txt-secondary);
+  }
+
+  &:not(.disabled) .right-icon {
+    color: var(--color-brand-item-base);
+  }
 
   .input {
-    border-radius: 0.4rem;
-    border-width: 0.1rem;
-    border-style: solid;
-    background-color: var(--color-neutral-background-primary);
-    color: var(--color-neutral-txt-primary);
-    height: 4rem;
+    background-color: transparent;
+    border: none;
     outline: none;
-    width: 100%;
-    padding-block: 0.8rem;
-    padding-inline: 1.6rem;
+    flex: 1;
 
     &::placeholder {
       color: var(--color-neutral-txt-secondary);
     }
-
-    &:focus {
-      border-width: 0.2rem;
-    }
-
-    &:has(+ .after) {
-      padding-inline-end: 4.8rem;
-    }
   }
 
   /* VARIANT */
 
   &.accent--brand {
-    .input {
-      border-color: var(--color-neutral-border);
+    border-color: var(--color-neutral-border);
 
-      &:hover {
-        border-color: var(--color-brand-item-hover);
-      }
+    &:focus-within {
+      border-color: var(--color-brand-item-base);
+    }
 
-      &:focus {
-        border-color: var(--color-brand-item-base);
-      }
+    &:hover {
+      border-color: var(--color-brand-item-hover);
+    }
 
-      &:active {
-        border-color: var(--color-brand-item-active);
-      }
+    &:has(input:active) {
+      border-color: var(--color-brand-item-active);
+    }
 
-      &:disabled {
-        border-color: var(--color-neutral-border);
-        background-color: var(--color-neutral-background-disabled);
-      }
+    &:has(input:disabled) {
+      border-color: var(--color-neutral-border);
+      background-color: var(--color-neutral-background-disabled);
     }
   }
 
   &.accent--warning {
-    .input {
-      border-color: var(--color-warning-item-base);
+    border-color: var(--color-warning-item-base);
 
-      &:disabled {
-        border-color: var(--color-neutral-border);
-        background-color: var(--color-neutral-background-disabled);
-      }
+    &:hover {
+      border-color: var(--color-warning-item-hover);
     }
-  }
 
-  &.accent--danger {
-    .input {
-      border-color: var(--color-danger-item-base);
+    &:has(input:active) {
+      border-color: var(--color-warning-item-active);
+    }
 
-      &:disabled {
-        border-color: var(--color-neutral-border);
-        background-color: var(--color-neutral-background-disabled);
-      }
+    &:has(input:disabled) {
+      border-color: var(--color-neutral-border);
+      background-color: var(--color-neutral-background-disabled);
     }
   }
 
-  /* ICON POSITION */
-
-  .before + .input {
-    padding-inline-start: 4.8rem;
-  }
+  &.accent--danger {
+    border-color: var(--color-danger-item-base);
 
-  .before,
-  .after {
-    position: absolute;
-    inset-block: 1.2rem;
-  }
+    &:hover {
+      border-color: var(--color-danger-item-hover);
+    }
 
-  .before {
-    color: var(--color-neutral-txt-secondary);
-    inset-inline-start: 1.6rem;
-    pointer-events: none;
-    z-index: 1;
-  }
+    &:has(input:active) {
+      border-color: var(--color-danger-item-active);
+    }
 
-  .after {
-    inset-inline-end: 1.6rem;
-    cursor: pointer;
+    &:has(input:disabled) {
+      border-color: var(--color-neutral-border);
+      background-color: var(--color-neutral-background-disabled);
+    }
   }
 }
 </style>

package/lib/composables/chart-theme.composable.ts

@@ -1,10 +1,10 @@
 import { useUiStore } from '@core/stores/ui.store'
-import { storeToRefs } from 'pinia'
+import { storeToRefs, type Pinia } from 'pinia'
 import { computed, provide, ref, watch } from 'vue'
 import { THEME_KEY } from 'vue-echarts'
 
-export const useChartTheme = () => {
-  const { colorMode } = storeToRefs(useUiStore())
+export const useChartTheme = (pinia?: Pinia) => {
+  const { colorMode } = storeToRefs(useUiStore(pinia))
 
   const style = window.getComputedStyle(window.document.documentElement)
 

package/lib/composables/relative-time.composable.ts

@@ -54,7 +54,7 @@ export default function useRelativeTime(fromDate: MaybeRef<Date>, toDate: MaybeR
         parts.push(t('relative-time.minute', { n: minutes }))
       }
 
-      if (days === 0 && seconds > 0) {
+      if (minutes === 0 && seconds > 0) {
         parts.push(t('relative-time.second', { n: seconds }))
       }
     }

package/lib/i18n.ts

@@ -49,6 +49,10 @@ export const locales: Locales = {
     code: 'uk',
     name: 'Українська',
   },
+  nl: {
+    code: 'nl',
+    name: 'Nederlands',
+  },
 }
 
 export default createI18n({