@xen-orchestra/web-core 0.17.0 → 0.19.0

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/components/ui/radio-button/UiRadioButton.vue

@@ -22,7 +22,7 @@ const { accent, value, disabled } = defineProps<{
   disabled?: boolean
 }>()
 
-const model = defineModel<boolean>()
+const model = defineModel<string>()
 
 defineSlots<{
   default(): any

package/lib/components/ui/toaster/UiToaster.vue

@@ -11,7 +11,7 @@
           <slot name="description" />
         </div>
       </div>
-      <UiButtonIcon class="close-icon" :icon="faXmark" accent="brand" size="medium" />
+      <UiButtonIcon class="close-icon" :icon="faXmark" accent="brand" size="medium" @click="emit('close')" />
     </div>
     <div v-if="slots.actions" class="actions">
       <slot name="actions" />
@@ -24,7 +24,7 @@ import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { toVariants } from '@core/utils/to-variants.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { faXmark, faCheck, faCircle, faInfo, faExclamation } from '@fortawesome/free-solid-svg-icons'
+import { faCheck, faCircle, faExclamation, faInfo, faXmark } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
 type ToasterAccent = 'info' | 'success' | 'warning' | 'danger'
@@ -33,6 +33,10 @@ const props = defineProps<{
   accent: ToasterAccent
 }>()
 
+const emit = defineEmits<{
+  close: []
+}>()
+
 const slots = defineSlots<{
   default(): any
   description?(): any

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)
 
@@ -12,8 +12,8 @@ export const useChartTheme = () => {
     background: style.getPropertyValue('--color-neutral-background-primary'),
     text: style.getPropertyValue('--color-neutral-txt-secondary'),
     splitLine: style.getPropertyValue('--color-neutral-border'),
-    primary: style.getPropertyValue('--color-normal-txt-base'),
-    secondary: style.getPropertyValue('--color-warning-txt-base'),
+    primary: style.getPropertyValue('--color-brand-item-base'),
+    secondary: style.getPropertyValue('--color-warning-item-base'),
   })
 
   const colors = ref(getColors())

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

@@ -0,0 +1,18 @@
+# useRelativeTime composable
+
+## Usage
+
+```ts
+const relativeTime = useRelativeTime(fromDate, toDate)
+
+console.log(relativeTime.value) // 3 days 27 minutes 10 seconds ago
+```
+
+# Reactivity
+
+Both arguments can be `Ref`
+
+```ts
+const now = useNow()
+const relativeTime = useRelativeTime(fromDate, now) // Value will be updated each time `now` changes
+```

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

@@ -0,0 +1,66 @@
+import type { MaybeRef } from '@vueuse/core'
+import { computed, unref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+export default function useRelativeTime(fromDate: MaybeRef<Date>, toDate: MaybeRef<Date>) {
+  const { t } = useI18n()
+  const fromTime = computed(() => unref(fromDate).getTime())
+  const toTime = computed(() => unref(toDate).getTime())
+  const isPast = computed(() => toTime.value > fromTime.value)
+  const diff = computed(() => Math.abs(toTime.value - fromTime.value))
+
+  return computed(() => {
+    if (diff.value < 10000) {
+      return t('relative-time.now')
+    }
+
+    const years = Math.floor(diff.value / 31556952000)
+    let timeLeft = diff.value % 31556952000
+
+    const months = Math.floor(timeLeft / 2629746000)
+    timeLeft = timeLeft % 2629746000
+
+    const days = Math.floor(timeLeft / 86400000)
+    timeLeft = timeLeft % 86400000
+
+    const hours = Math.floor(timeLeft / 3600000)
+    timeLeft = timeLeft % 3600000
+
+    const minutes = Math.floor(timeLeft / 60000)
+    timeLeft = timeLeft % 60000
+    const seconds = Math.floor(timeLeft / 1000)
+
+    const parts = []
+
+    if (years > 0) {
+      parts.push(t('relative-time.year', { n: years }))
+    }
+
+    if (months > 0) {
+      const n = days >= 15 ? months + 1 : months
+      parts.push(t('relative-time.month', { n }))
+    }
+
+    if (years === 0 && months === 0) {
+      if (days > 0) {
+        parts.push(t('relative-time.day', { n: days }))
+      }
+
+      if (days <= 1 && hours > 0) {
+        parts.push(t('relative-time.hour', { n: hours }))
+      }
+
+      if (days === 0 && minutes > 0) {
+        parts.push(t('relative-time.minute', { n: minutes }))
+      }
+
+      if (days === 0 && seconds > 0) {
+        parts.push(t('relative-time.second', { n: seconds }))
+      }
+    }
+
+    return t(isPast.value ? 'relative-time.past' : 'relative-time.future', {
+      str: parts.join(' '),
+    })
+  })
+}

package/lib/i18n.ts

@@ -37,6 +37,22 @@ export const locales: Locales = {
     code: 'sv',
     name: 'Svenska',
   },
+  it: {
+    code: 'it',
+    name: 'Italiano',
+  },
+  ru: {
+    code: 'ru',
+    name: 'Русский',
+  },
+  uk: {
+    code: 'uk',
+    name: 'Українська',
+  },
+  nl: {
+    code: 'nl',
+    name: 'Nederlands',
+  },
 }
 
 export default createI18n({