@xen-orchestra/web-core 0.9.0 → 0.11.0

package/lib/components/ui/checkbox/UiCheckbox.vue

@@ -1,16 +1,16 @@
 <!-- v3 -->
 <template>
-  <label class="ui-checkbox" :class="classNames" v-bind="wrapperAttrs">
+  <label :class="classNames" class="ui-checkbox" v-bind="wrapperAttrs">
     <input
       v-model="checkboxModel"
       :class="{ indeterminate: isIndeterminate }"
       :disabled="isDisabled"
-      type="checkbox"
       class="input"
+      type="checkbox"
       v-bind="attrs"
     />
     <span class="fake-checkbox">
-      <VtsIcon :icon class="icon" accent="info" />
+      <VtsIcon :icon accent="info" class="icon" />
     </span>
     <span v-if="slots.default" class="typo p1-regular">
       <slot />
@@ -24,8 +24,7 @@
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiInfo from '@core/components/ui/info/UiInfo.vue'
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 import { toVariants } from '@core/utils/to-variants.util'
 import { faCheck, faMinus } from '@fortawesome/free-solid-svg-icons'
 import { computed, type LabelHTMLAttributes, useAttrs } from 'vue'
@@ -34,23 +33,20 @@ type CheckboxAccent = 'info' | 'success' | 'warning' | 'danger'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(
-  defineProps<{
-    accent: CheckboxAccent
-    disabled?: boolean
-    wrapperAttrs?: LabelHTMLAttributes
-  }>(),
-  { disabled: undefined }
-)
+const props = defineProps<{
+  accent: CheckboxAccent
+  disabled?: boolean
+  wrapperAttrs?: LabelHTMLAttributes
+}>()
 
-const checkboxModel = defineModel<boolean | undefined>({ default: undefined })
+const checkboxModel = defineModel<boolean | undefined | string[]>({ default: undefined })
 
 const slots = defineSlots<{
   default?(): any
   info?(): any
 }>()
 
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => props.disabled)
 
 const classNames = computed(() => [
   toVariants({

package/lib/components/ui/dropdown-button/UiDropdownButton.vue

@@ -1,6 +1,6 @@
 <!-- v3 -->
 <template>
-  <button type="button" class="ui-dropdown-item" :class="{ selected }" :disabled="isDisabled">
+  <button :class="{ selected }" :disabled="isDisabled" class="ui-dropdown-item" type="button">
     <VtsIcon :icon accent="current" class="left-icon" fixed-width />
     <span class="typo p1-regular label">
       <slot />
@@ -11,24 +11,20 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons'
 
-const props = withDefaults(
-  defineProps<{
-    disabled?: boolean
-    selected?: boolean
-    icon?: IconDefinition
-  }>(),
-  { disabled: undefined }
-)
+const { disabled, selected, icon } = defineProps<{
+  disabled?: boolean
+  selected?: boolean
+  icon?: IconDefinition
+}>()
 
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => disabled)
 </script>
 
-<style scoped lang="postcss">
+<style lang="postcss" scoped>
 .ui-dropdown-item {
   display: inline-flex;
   align-items: center;

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

@@ -2,7 +2,7 @@
 <template>
   <div class="ui-info">
     <VtsIcon :accent class="icon" :icon="faCircle" :overlay-icon="icon" />
-    <p class="message">
+    <p v-tooltip="!wrap" class="typo p3-regular" :class="{ 'text-ellipsis': !wrap }">
       <slot />
     </p>
   </div>
@@ -10,6 +10,7 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
 import {
   faCheck,
   faCircle,
@@ -20,24 +21,25 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
-type Props = {
-  accent: 'info' | 'success' | 'warning' | 'danger'
-}
+export type InfoAccent = 'info' | 'success' | 'warning' | 'danger'
 
-const props = defineProps<Props>()
+const { accent } = defineProps<{
+  accent: InfoAccent
+  wrap?: boolean
+}>()
 
 defineSlots<{
   default(): any
 }>()
 
-const iconByAccent: Record<Props['accent'], IconDefinition> = {
+const iconByAccent: Record<InfoAccent, IconDefinition> = {
   info: faInfo,
   success: faCheck,
   warning: faExclamation,
   danger: faXmark,
 }
 
-const icon = computed(() => iconByAccent[props.accent])
+const icon = computed(() => iconByAccent[accent])
 </script>
 
 <style lang="postcss" scoped>
@@ -49,9 +51,5 @@ const icon = computed(() => iconByAccent[props.accent])
   .icon {
     font-size: 1.6rem;
   }
-
-  .message {
-    font-size: 1.2rem;
-  }
 }
 </style>

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

@@ -70,6 +70,7 @@ const labelAccent = computed(() => (accent === 'info' ? 'neutral' : accent))
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
+  flex: 1;
 
   .input {
     border-radius: 0.4rem;

package/lib/components/ui/label/UiLabel.vue

@@ -1,24 +1,23 @@
-<!-- WIP -->
+<!-- v1 -->
 <template>
   <div :class="toVariants({ accent })" class="ui-label">
-    <VtsIcon accent="current" :icon class="left-icon" />
-    <span :class="{ required }" class="typo c2-semi-bold label"><slot /></span>
-    <!-- @TODO: Replace it by the VtsLink component when available -->
-    <a v-if="href" :href class="link">
-      <span class="typo p3-regular-underline">{{ $t('learn-more') }}</span>
-      <VtsIcon accent="current" :icon="faUpRightFromSquare" class="link-icon" />
-    </a>
+    <VtsIcon accent="current" :icon class="icon" />
+    <label :for="htmlFor" :class="{ required }" class="typo c2-semi-bold label">
+      <slot />
+    </label>
+    <UiLink v-if="href" class="learn-more-link" size="small" :href>{{ $t('learn-more') }}</UiLink>
   </div>
 </template>
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import UiLink from '@core/components/ui/link/UiLink.vue'
 import { toVariants } from '@core/utils/to-variants.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { faUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
 
-defineProps<{
+const { for: htmlFor } = defineProps<{
   accent: 'neutral' | 'warning' | 'danger'
+  for?: string
   icon?: IconDefinition
   required?: boolean
   href?: string
@@ -30,7 +29,7 @@ defineProps<{
   display: flex;
   align-items: center;
 
-  .left-icon {
+  .icon {
     margin-right: 0.8rem;
   }
 
@@ -42,17 +41,10 @@ defineProps<{
     }
   }
 
-  .link {
-    display: flex;
-    align-items: center;
-    gap: 0.8rem;
+  .learn-more-link {
     margin-left: auto;
   }
 
-  .link-icon {
-    font-size: 0.8rem;
-  }
-
   /* ACCENT VARIANTS */
 
   &.accent--neutral {

package/lib/components/ui/radio-button/UiRadioButton.vue

@@ -2,7 +2,7 @@
 <template>
   <label :class="variant" class="ui-radio-button typo p1-regular">
     <span class="radio-container">
-      <input v-model="model" :value :disabled="isDisabled" class="input" type="radio" />
+      <input v-model="model" :disabled="isDisabled" :value class="input" type="radio" />
       <VtsIcon :icon="faCircle" accent="current" class="radio-icon" />
     </span>
     <slot />
@@ -11,31 +11,26 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 import { toVariants } from '@core/utils/to-variants.util'
 import { faCircle } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    accent: 'info' | 'success' | 'warning' | 'danger'
-    value: any
-    disabled?: boolean
-  }>(),
-  {
-    disabled: undefined,
-  }
-)
+const { accent, value, disabled } = defineProps<{
+  accent: 'info' | 'success' | 'warning' | 'danger'
+  value: any
+  disabled?: boolean
+}>()
+
 const model = defineModel<boolean>()
 
 defineSlots<{
   default(): any
 }>()
 
-const variant = computed(() => toVariants({ accent: props.accent }))
+const variant = computed(() => toVariants({ accent }))
 
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => disabled)
 </script>
 
 <style lang="postcss" scoped>
@@ -60,6 +55,7 @@ const isDisabled = useContext(DisabledContext, () => props.disabled)
 
     &:has(input:focus-visible) {
       outline: none;
+
       &::after {
         position: absolute;
         content: '';
@@ -68,6 +64,7 @@ const isDisabled = useContext(DisabledContext, () => props.disabled)
         border-radius: 0.4rem;
       }
     }
+
     &:has(.input:disabled) {
       cursor: not-allowed;
 

package/lib/components/ui/table-pagination/PaginationButton.vue

@@ -0,0 +1,33 @@
+<template>
+  <UiButtonIcon :disabled accent="info" class="pagination-button" size="small" :icon />
+</template>
+
+<script setup lang="ts">
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+
+const { disabled, icon } = defineProps<{
+  disabled: boolean
+  icon: IconDefinition
+}>()
+</script>
+
+<style scoped lang="postcss">
+.pagination-button.accent--info {
+  border: 0.1rem solid var(--color-neutral-border);
+  font-size: 1rem;
+
+  &:hover {
+    border-color: var(--color-info-item-hover);
+  }
+
+  &:active {
+    border-color: var(--color-info-item-active);
+  }
+
+  &:disabled {
+    background-color: var(--color-neutral-background-disabled);
+    border-color: transparent;
+  }
+}
+</style>

package/lib/components/ui/table-pagination/UiTablePagination.vue

@@ -0,0 +1,178 @@
+<!-- v2 -->
+<template>
+  <div class="ui-table-pagination">
+    <div class="buttons-container">
+      <PaginationButton :disabled="isFirstPage || disabled" :icon="faAngleDoubleLeft" @click="goToFirstPage()" />
+      <PaginationButton :disabled="isFirstPage || disabled" :icon="faAngleLeft" @click="goToPreviousPage()" />
+      <PaginationButton :disabled="isLastPage || disabled" :icon="faAngleRight" @click="goToNextPage()" />
+      <PaginationButton :disabled="isLastPage || disabled" :icon="faAngleDoubleRight" @click="goToLastPage()" />
+    </div>
+    <span class="typo p3-regular label">
+      {{ $t('core.select.n-object-of', { from: startIndex, to: endIndex, total: totalItems }) }}
+    </span>
+    <span class="typo p3-regular label show">{{ $t('core.show-by') }}</span>
+    <div class="dropdown-wrapper">
+      <select v-model="pageSize" :disabled class="dropdown typo c3-regular" @change="goToFirstPage">
+        <option v-for="option in pageSizeOptions" :key="option" :value="option" class="typo p2-medium">
+          {{ option }}
+        </option>
+      </select>
+      <VtsIcon class="icon" accent="current" :icon="faAngleDown" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import PaginationButton from '@core/components/ui/table-pagination/PaginationButton.vue'
+import {
+  faAngleDoubleLeft,
+  faAngleDoubleRight,
+  faAngleDown,
+  faAngleLeft,
+  faAngleRight,
+} from '@fortawesome/free-solid-svg-icons'
+import { useOffsetPagination } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+
+export type PaginationPayload = {
+  currentPage: number
+  pageSize: number
+  startIndex: number
+  endIndex: number
+}
+
+const { totalItems, disabled = false } = defineProps<{
+  totalItems: number
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  change: [payload: PaginationPayload]
+}>()
+
+const pageSize = ref(50)
+const pageSizeOptions = [10, 50, 100, 150, 200]
+const {
+  currentPage,
+  currentPageSize,
+  pageCount,
+  isFirstPage,
+  isLastPage,
+  prev: goToPreviousPage,
+  next: goToNextPage,
+} = useOffsetPagination({
+  total: () => totalItems,
+  pageSize,
+})
+const startIndex = computed(() => (currentPage.value - 1) * currentPageSize.value + 1)
+const endIndex = computed(() => Math.min(currentPage.value * currentPageSize.value, totalItems))
+
+const goToFirstPage = () => {
+  currentPage.value = 1
+}
+const goToLastPage = () => {
+  currentPage.value = pageCount.value
+}
+
+watch([currentPage, currentPageSize], ([newPage, newPageSize]) => {
+  emit('change', {
+    currentPage: newPage,
+    pageSize: newPageSize,
+    startIndex: startIndex.value,
+    endIndex: endIndex.value,
+  })
+})
+</script>
+
+<style scoped lang="postcss">
+.ui-table-pagination {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+
+  .buttons-container {
+    display: flex;
+    gap: 0.2rem;
+  }
+
+  .label {
+    color: var(--color-neutral-txt-secondary);
+  }
+
+  .show::before {
+    content: '-';
+    margin-right: 0.8rem;
+  }
+
+  .dropdown-wrapper {
+    position: relative;
+
+    .dropdown {
+      cursor: pointer;
+      padding: 0.2rem 0.6rem;
+      height: 2.6rem;
+      width: 4.8rem;
+      appearance: none;
+      border-radius: 0.4rem;
+      color: var(--color-info-txt-base);
+      border: 0.1rem solid var(--color-neutral-border);
+      background-color: var(--color-neutral-background-primary);
+
+      &:hover {
+        border-color: var(--color-info-item-hover);
+        background-color: var(--color-info-background-hover);
+        color: var(--color-info-txt-hover);
+
+        + .icon {
+          color: var(--color-info-txt-hover);
+        }
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+        background-color: var(--color-neutral-background-disabled);
+        color: var(--color-neutral-txt-secondary);
+        border-color: transparent;
+
+        + .icon {
+          color: var(--color-neutral-txt-secondary);
+        }
+      }
+
+      &:active {
+        background-color: var(--color-info-background-active);
+        border-color: var(--color-info-item-active);
+      }
+
+      &:focus-visible {
+        outline: 0.1rem solid var(--color-info-item-base);
+        border: 0.1rem solid var(--color-info-item-base);
+        color: var(--color-info-txt-base);
+        background-color: var(--color-info-background-selected);
+
+        + .icon {
+          color: var(--color-info-txt-base);
+        }
+      }
+
+      option {
+        background-color: var(--color-neutral-background-primary);
+        border: 0.1rem solid var(--color-neutral-border);
+        border-radius: 0.4rem;
+        color: var(--color-neutral-txt-primary);
+      }
+    }
+
+    .icon {
+      position: absolute;
+      top: 50%;
+      right: 0.8rem;
+      transform: translateY(-50%);
+      pointer-events: none;
+      font-size: 1rem;
+      color: var(--color-info-txt-base);
+    }
+  }
+}
+</style>

package/lib/components/ui/toggle/UiToggle.vue

@@ -13,16 +13,12 @@
 
 <script lang="ts" setup>
 import UiLoader from '@core/components/ui/loader/UiLoader.vue'
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 
-const props = withDefaults(
-  defineProps<{
-    disabled?: boolean
-    busy?: boolean
-  }>(),
-  { disabled: undefined }
-)
+const { busy, disabled } = defineProps<{
+  disabled?: boolean
+  busy?: boolean
+}>()
 
 const checked = defineModel<boolean>()
 
@@ -30,7 +26,7 @@ defineSlots<{
   default(): any
 }>()
 
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => disabled)
 </script>
 
 <style lang="postcss" scoped>