@xen-orchestra/web-core 0.58.0 → 0.60.0

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

@@ -1,31 +1,36 @@
-<!-- v5 -->
+<!-- v8 -->
 <template>
-  <label :class="classNames" class="ui-checkbox" v-bind="wrapperAttrs">
-    <input
-      v-model="checkboxModel"
-      :class="{ indeterminate: isIndeterminate }"
-      :disabled="isDisabled"
-      class="input"
-      type="checkbox"
-      v-bind="attrs"
-    />
-    <span class="fake-checkbox">
-      <VtsIcon :name="icon" size="medium" class="icon" />
-    </span>
-    <span v-if="slots.default" class="typo-body-regular">
-      <slot />
-    </span>
-  </label>
-  <UiInfo v-if="slots.info" :accent="accent === 'brand' ? 'info' : accent">
-    <slot name="info" />
-  </UiInfo>
+  <div class="ui-checkbox">
+    <label :class="classNames" class="checkbox-label" v-bind="wrapperAttrs">
+      <input
+        v-model="checkboxModel"
+        :class="{ indeterminate: isIndeterminate }"
+        :disabled="isDisabled"
+        class="input"
+        type="checkbox"
+        v-bind="attrs"
+      />
+      <span class="fake-checkbox">
+        <VtsIcon :name="icon" size="medium" class="icon" />
+      </span>
+      <span v-if="slots.default" class="typo-body-regular">
+        <slot />
+      </span>
+    </label>
+    <UiInfo v-if="slots.info" accent="info">
+      <slot name="info" />
+    </UiInfo>
+    <UiInfo v-if="slots.message && accent !== 'brand'" :accent>
+      <slot name="message" />
+    </UiInfo>
+  </div>
 </template>
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiInfo from '@core/components/ui/info/UiInfo.vue'
-import { useDisabled } from '@core/composables/disabled.composable'
-import { toVariants } from '@core/utils/to-variants.util'
+import { useDisabled } from '@core/composables/disabled.composable.ts'
+import { toVariants } from '@core/utils/to-variants.util.ts'
 import { computed, type LabelHTMLAttributes, useAttrs } from 'vue'
 
 type CheckboxAccent = 'brand' | 'warning' | 'danger'
@@ -43,6 +48,7 @@ const checkboxModel = defineModel<boolean | undefined | string[]>({ default: und
 const slots = defineSlots<{
   default?(): any
   info?(): any
+  message?(): any
 }>()
 
 const isDisabled = useDisabled(() => disabled)
@@ -63,234 +69,240 @@ const attrs = useAttrs()
 
 <style lang="postcss" scoped>
 .ui-checkbox {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.8rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
 
-  .fake-checkbox {
+  .checkbox-label {
     display: inline-flex;
     align-items: center;
-    justify-content: center;
-    height: 1.6rem;
-    width: 1.6rem;
-    transition:
-      background-color 0.125s ease-in-out,
-      border-color 0.125s ease-in-out;
-    border: 0.2rem solid transparent;
-    border-radius: 0.2rem;
-    flex-shrink: 0;
-
-    .icon {
-      font-size: 0.75rem;
-      color: var(--color-info-txt-item);
-      transition: opacity 0.125s ease-in-out;
+    gap: 0.4rem;
+
+    .fake-checkbox {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      height: 1.6rem;
+      width: 1.6rem;
+      transition:
+        background-color 0.125s ease-in-out,
+        border-color 0.125s ease-in-out;
+      border: 0.2rem solid transparent;
+      border-radius: 0.2rem;
+      flex-shrink: 0;
+
+      .icon {
+        font-size: 0.75rem;
+        color: var(--color-neutral-background-primary);
+        transition: opacity 0.125s ease-in-out;
+      }
     }
-  }
 
-  .input {
-    font-size: inherit;
-    position: absolute;
-    pointer-events: none;
-    opacity: 0;
+    .input {
+      font-size: inherit;
+      position: absolute;
+      pointer-events: none;
+      opacity: 0;
 
-    &.indeterminate + .fake-checkbox > .icon {
-      opacity: 1;
-      color: var(--color-info-txt-item);
-    }
+      &.indeterminate + .fake-checkbox > .icon {
+        opacity: 1;
+        color: var(--color-neutral-background-primary);
+      }
 
-    & + .fake-checkbox > .icon {
-      opacity: 0;
-    }
+      & + .fake-checkbox > .icon {
+        opacity: 0;
+      }
 
-    &:checked + .fake-checkbox > .icon {
-      opacity: 1;
-    }
+      &:checked + .fake-checkbox > .icon {
+        opacity: 1;
+      }
 
-    &:focus-visible + .fake-checkbox {
-      outline: none;
+      &:focus-visible + .fake-checkbox {
+        outline: none;
 
-      &::before {
-        content: '';
-        position: absolute;
-        inset: -0.5rem;
-        border-radius: 0.4rem;
-        border-width: 0.2rem;
-        border-style: solid;
+        &::before {
+          content: '';
+          position: absolute;
+          inset: -0.5rem;
+          border-radius: 0.4rem;
+          border-width: 0.2rem;
+          border-style: solid;
+        }
       }
     }
-  }
 
-  &.accent--brand {
-    .input:not(:disabled) {
-      & + .fake-checkbox {
-        border-color: var(--color-brand-item-base);
-      }
+    &.accent--brand {
+      .input:not(:disabled) {
+        & + .fake-checkbox {
+          border-color: var(--color-brand-txt-base);
+        }
 
-      &.indeterminate + .fake-checkbox {
-        background-color: var(--color-brand-item-base);
+        &.indeterminate + .fake-checkbox {
+          background-color: var(--color-brand-txt-base);
+
+          &:hover {
+            border-color: transparent;
+            background-color: var(--color-brand-txt-hover);
+          }
 
-        &:hover {
+          &:active {
+            background-color: var(--color-brand-txt-active);
+          }
+        }
+
+        &.indeterminate:hover + .fake-checkbox {
           border-color: transparent;
-          background-color: var(--color-brand-item-hover);
+          background-color: var(--color-brand-txt-hover);
         }
 
-        &:active {
-          background-color: var(--color-brand-item-active);
+        &:hover + .fake-checkbox {
+          border-color: var(--color-brand-txt-hover);
         }
-      }
 
-      &.indeterminate:hover + .fake-checkbox {
-        border-color: transparent;
-        background-color: var(--color-brand-item-hover);
-      }
+        &:focus-visible + .fake-checkbox::before {
+          border: 0.2rem solid var(--color-brand-txt-base);
+        }
 
-      &:hover + .fake-checkbox {
-        border-color: var(--color-brand-item-hover);
-      }
+        &:active + .fake-checkbox {
+          border-color: var(--color-brand-txt-active);
+        }
 
-      &:focus-visible + .fake-checkbox::before {
-        border: 0.2rem solid var(--color-brand-txt-base);
-      }
+        &:checked + .fake-checkbox {
+          border-color: transparent;
+          background-color: var(--color-brand-txt-base);
+        }
 
-      &:active + .fake-checkbox {
-        border-color: var(--color-brand-item-active);
-      }
+        &:checked:hover + .fake-checkbox {
+          background-color: var(--color-brand-txt-hover);
+        }
 
-      &:checked + .fake-checkbox {
-        border-color: transparent;
-        background-color: var(--color-brand-item-base);
+        &:checked:active + .fake-checkbox {
+          background-color: var(--color-brand-txt-active);
+        }
       }
+    }
 
-      &:checked:hover + .fake-checkbox {
-        background-color: var(--color-brand-item-hover);
-      }
+    &.accent--warning {
+      .input:not(:disabled) {
+        & + .fake-checkbox {
+          border-color: var(--color-warning-txt-base);
+        }
 
-      &:checked:active + .fake-checkbox {
-        background-color: var(--color-brand-item-active);
-      }
-    }
-  }
+        &.indeterminate + .fake-checkbox {
+          background-color: var(--color-warning-txt-base);
 
-  &.accent--warning {
-    .input:not(:disabled) {
-      & + .fake-checkbox {
-        border-color: var(--color-warning-item-base);
-      }
+          &:hover {
+            border-color: transparent;
+            background-color: var(--color-warning-txt-hover);
+          }
 
-      &.indeterminate + .fake-checkbox {
-        background-color: var(--color-warning-item-base);
+          &:active {
+            background-color: var(--color-warning-txt-active);
+          }
+        }
 
-        &:hover {
+        &.indeterminate:hover + .fake-checkbox {
           border-color: transparent;
-          background-color: var(--color-warning-item-hover);
+          background-color: var(--color-warning-txt-hover);
         }
 
-        &:active {
-          background-color: var(--color-warning-item-active);
+        &:hover + .fake-checkbox {
+          border-color: var(--color-warning-txt-hover);
         }
-      }
-
-      &.indeterminate:hover + .fake-checkbox {
-        border-color: transparent;
-        background-color: var(--color-warning-item-hover);
-      }
 
-      &:hover + .fake-checkbox {
-        border-color: var(--color-warning-item-hover);
-      }
-
-      &:focus-visible + .fake-checkbox::before {
-        border: 0.2rem solid var(--color-brand-txt-base);
-      }
+        &:focus-visible + .fake-checkbox::before {
+          border: 0.2rem solid var(--color-brand-txt-base);
+        }
 
-      &:active + .fake-checkbox {
-        border-color: var(--color-warning-item-active);
-      }
+        &:active + .fake-checkbox {
+          border-color: var(--color-warning-txt-active);
+        }
 
-      &:checked + .fake-checkbox {
-        border-color: transparent;
-        background-color: var(--color-warning-item-base);
-      }
+        &:checked + .fake-checkbox {
+          border-color: transparent;
+          background-color: var(--color-warning-txt-base);
+        }
 
-      &:checked:hover + .fake-checkbox {
-        background-color: var(--color-warning-item-hover);
-      }
+        &:checked:hover + .fake-checkbox {
+          background-color: var(--color-warning-txt-hover);
+        }
 
-      &:checked:active + .fake-checkbox {
-        background-color: var(--color-warning-item-active);
+        &:checked:active + .fake-checkbox {
+          background-color: var(--color-warning-txt-active);
+        }
       }
     }
-  }
 
-  &.accent--danger {
-    .input:not(:disabled) {
-      & + .fake-checkbox {
-        border-color: var(--color-danger-item-base);
+    &.accent--danger {
+      .input:not(:disabled) {
+        & + .fake-checkbox {
+          border-color: var(--color-danger-txt-base);
 
-        > .icon {
-          color: var(--color-danger-txt-item);
+          > .icon {
+            color: var(--color-danger-txt-item);
+          }
         }
-      }
 
-      &.indeterminate + .fake-checkbox {
-        background-color: var(--color-danger-item-base);
+        &.indeterminate + .fake-checkbox {
+          background-color: var(--color-danger-txt-base);
 
-        &:hover {
-          border-color: transparent;
-          background-color: var(--color-danger-item-hover);
-        }
+          &:hover {
+            border-color: transparent;
+            background-color: var(--color-danger-txt-hover);
+          }
 
-        &:active {
-          background-color: var(--color-danger-item-active);
+          &:active {
+            background-color: var(--color-danger-txt-active);
+          }
         }
-      }
 
-      &.indeterminate:hover + .fake-checkbox {
-        border-color: transparent;
-        background-color: var(--color-danger-item-hover);
-      }
+        &.indeterminate:hover + .fake-checkbox {
+          border-color: transparent;
+          background-color: var(--color-danger-txt-hover);
+        }
 
-      &:hover + .fake-checkbox {
-        border-color: var(--color-danger-item-hover);
-      }
+        &:hover + .fake-checkbox {
+          border-color: var(--color-danger-txt-hover);
+        }
 
-      &:focus-visible + .fake-checkbox::before {
-        border: 0.2rem solid var(--color-brand-txt-base);
-      }
+        &:focus-visible + .fake-checkbox::before {
+          border: 0.2rem solid var(--color-brand-txt-base);
+        }
 
-      &:active + .fake-checkbox {
-        border-color: var(--color-danger-item-active);
-      }
+        &:active + .fake-checkbox {
+          border-color: var(--color-danger-txt-active);
+        }
 
-      &:checked + .fake-checkbox {
-        border-color: transparent;
-        background-color: var(--color-danger-item-base);
-      }
+        &:checked + .fake-checkbox {
+          border-color: transparent;
+          background-color: var(--color-danger-txt-base);
+        }
 
-      &:checked:hover + .fake-checkbox {
-        background-color: var(--color-danger-item-hover);
-      }
+        &:checked:hover + .fake-checkbox {
+          background-color: var(--color-danger-txt-hover);
+        }
 
-      &:checked:active + .fake-checkbox {
-        background-color: var(--color-danger-item-active);
+        &:checked:active + .fake-checkbox {
+          background-color: var(--color-danger-txt-active);
+        }
       }
     }
-  }
 
-  .input:disabled {
-    & + .fake-checkbox {
-      cursor: not-allowed;
-      border-color: var(--color-neutral-txt-secondary);
+    .input:disabled {
+      & + .fake-checkbox {
+        cursor: not-allowed;
+        border-color: var(--color-neutral-txt-secondary);
 
-      > .icon {
-        color: var(--color-neutral-background-disabled);
+        > .icon {
+          color: var(--color-neutral-background-disabled);
+        }
       }
-    }
 
-    &:checked + .fake-checkbox,
-    &.indeterminate + .fake-checkbox {
-      border-color: transparent;
-      background-color: var(--color-neutral-txt-secondary);
+      &:checked + .fake-checkbox,
+      &.indeterminate + .fake-checkbox {
+        border-color: transparent;
+        background-color: var(--color-neutral-txt-secondary);
+      }
     }
   }
 }

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

@@ -12,7 +12,7 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import { toVariants } from '@core/utils/to-variants.util'
+import { toVariants } from '@core/utils/to-variants.util.ts'
 import { computed } from 'vue'
 
 export type ChipAccent = 'info' | 'success' | 'warning' | 'danger'

package/lib/components/ui/counter/UiCounter.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts" setup>
-import { toVariants } from '@core/utils/to-variants.util'
+import { toVariants } from '@core/utils/to-variants.util.ts'
 import { computed } from 'vue'
 
 type CounterAccent = 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'muted'

package/lib/components/ui/drawer/UiDrawer.vue

@@ -1,46 +1,50 @@
 <template>
-  <Transition name="drawer" @after-leave="emit('afterLeave')">
-    <div v-if="isOpen" class="ui-drawer" aria-modal="true" role="dialog" @click.self="isDismissible && emit('dismiss')">
-      <aside class="drawer">
-        <div class="header">
-          <div v-if="slots.title || title !== undefined" class="typo-h4">
-            <slot name="title">
-              {{ title }}
-            </slot>
-          </div>
-          <UiButtonIcon
-            v-if="isDismissible"
-            :target-scale="2"
-            icon="action:close-cancel-clear"
-            accent="brand"
-            size="small"
-            @click="emit('dismiss')"
-          />
+  <form class="ui-drawer" @click.self="emit('dismiss')" @submit.prevent="emit('confirm')">
+    <aside
+      :aria-labelledby="slots.title || title !== undefined ? titleId : undefined"
+      aria-modal="true"
+      class="drawer"
+      role="dialog"
+    >
+      <div class="header">
+        <div v-if="slots.title || title !== undefined" :id="titleId" class="typo-h4">
+          <slot name="title">
+            {{ title }}
+          </slot>
         </div>
-        <div class="content">
-          <slot name="content" />
-        </div>
-        <VtsButtonGroup v-if="slots.buttons" no-stack class="buttons">
-          <slot name="buttons" />
-        </VtsButtonGroup>
-      </aside>
-    </div>
-  </Transition>
+        <UiButtonIcon
+          v-if="onDismiss"
+          :target-scale="2"
+          icon="action:close-cancel-clear"
+          accent="brand"
+          size="small"
+          @click="emit('dismiss')"
+        />
+      </div>
+      <div class="content">
+        <slot name="content" />
+      </div>
+      <VtsButtonGroup v-if="slots.buttons" no-stack class="buttons">
+        <slot name="buttons" />
+      </VtsButtonGroup>
+    </aside>
+  </form>
 </template>
 
 <script lang="ts" setup>
 import VtsButtonGroup from '@core/components/button-group/VtsButtonGroup.vue'
 import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import { useOverlayEscape } from '@core/packages/overlay/use-overlay-escape.ts'
+import { useId } from 'vue'
 
 defineProps<{
-  isOpen: boolean
-  isDismissible?: boolean
   title?: string
+  onDismiss?: () => any
 }>()
 
 const emit = defineEmits<{
+  confirm: []
   dismiss: []
-  afterLeave: []
 }>()
 
 const slots = defineSlots<{
@@ -48,34 +52,13 @@ const slots = defineSlots<{
   title?(): any
   buttons?(): any
 }>()
-</script>
 
-<style lang="postcss" scoped>
-/* Slide-in from right */
-.drawer-enter-active.ui-drawer,
-.drawer-leave-active.ui-drawer {
-  transition: opacity 0.3s ease;
-}
+useOverlayEscape(() => emit('dismiss'))
 
-.drawer-enter-active .drawer,
-.drawer-leave-active .drawer {
-  transition: transform 0.3s ease;
-}
-
-.drawer-enter-from.ui-drawer,
-.drawer-leave-to.ui-drawer {
-  opacity: 0;
-}
-
-.drawer-enter-from .drawer,
-.drawer-leave-to .drawer {
-  transform: translateX(100%);
-
-  &:dir(rtl) {
-    transform: translateX(-100%);
-  }
-}
+const titleId = useId()
+</script>
 
+<style lang="postcss" scoped>
 .ui-drawer {
   position: fixed;
   display: flex;

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

@@ -21,9 +21,9 @@
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
 import UiCheckbox from '@core/components/ui/checkbox/UiCheckbox.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
 import type { IconName } from '@core/icons'
-import { toVariants } from '@core/utils/to-variants.util'
+import { toVariants } from '@core/utils/to-variants.util.ts'
 import { computed } from 'vue'
 
 export type DropdownAccent = 'normal' | 'brand' | 'success' | 'warning' | 'danger'

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

@@ -11,7 +11,7 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import { useDisabled } from '@core/composables/disabled.composable'
+import { useDisabled } from '@core/composables/disabled.composable.ts'
 import type { IconName } from '@core/icons'
 
 const { disabled, selected, icon } = defineProps<{

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

@@ -20,7 +20,7 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
 import type { IconName } from '@core/icons'
 
 defineProps<{

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

@@ -10,7 +10,7 @@
 
 <script lang="ts" setup>
 import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import { vTooltip } from '@core/directives/tooltip.directive'
+import { vTooltip } from '@core/directives/tooltip.directive.ts'
 import type { IconName } from '@core/icons'
 import { useMapper } from '@core/packages/mapper'