@xen-orchestra/web-core 0.4.0 → 0.6.0

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

@@ -0,0 +1,117 @@
+<!-- v2 -->
+<template>
+  <label class="ui-toggle typo c2-semi-bold">
+    <slot />
+    <span class="toggle-container">
+      <input v-model="checked" :disabled="isDisabled || busy" class="input" type="checkbox" />
+      <span :class="{ checked }" class="toggle-icon">
+        <UiLoader :class="{ visible: busy }" class="spinner" />
+      </span>
+    </span>
+  </label>
+</template>
+
+<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'
+
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean
+    busy?: boolean
+  }>(),
+  { disabled: undefined }
+)
+
+const checked = defineModel<boolean>()
+
+defineSlots<{
+  default(): any
+}>()
+
+const isDisabled = useContext(DisabledContext, () => props.disabled)
+</script>
+
+<style lang="postcss" scoped>
+.ui-toggle {
+  display: inline-flex;
+  gap: 1.6rem;
+  align-items: center;
+
+  .toggle-container {
+    --transition-timing: 0.25s ease-in-out;
+    --border-color: var(--color-neutral-txt-secondary);
+    height: 2rem;
+    width: 4rem;
+    background-color: var(--color-neutral-background-primary);
+    border: 0.1rem solid var(--border-color);
+    border-radius: 1rem;
+    transition:
+      background-color var(--transition-timing),
+      border-color var(--transition-timing);
+
+    &:has(input:disabled) {
+      --border-color: var(--color-neutral-border);
+      background-color: var(--color-neutral-background-disabled);
+      cursor: not-allowed;
+    }
+
+    &:has(input:checked) {
+      background-color: var(--color-success-item-base);
+    }
+
+    &:has(input:checked:disabled) {
+      background-color: var(--color-success-item-disabled);
+    }
+
+    &:has(input:focus-visible) {
+      outline: none;
+
+      &::after {
+        position: absolute;
+        content: '';
+        inset: -0.5rem;
+        border: 0.2rem solid var(--color-normal-txt-base);
+        border-radius: 0.4rem;
+      }
+    }
+  }
+
+  .input {
+    position: absolute;
+    pointer-events: none;
+    opacity: 0;
+  }
+
+  .toggle-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.4rem;
+    width: 2rem;
+    height: 2rem;
+    margin: -0.1rem 0 0 -0.1rem;
+    color: var(--color-info-txt-base);
+    background-color: var(--color-neutral-background-primary);
+    border: 0.1rem solid var(--border-color);
+    border-radius: 1rem;
+    transition:
+      transform var(--transition-timing),
+      border-color var(--transition-timing);
+
+    &.checked {
+      transform: translateX(2rem);
+    }
+  }
+
+  .spinner {
+    opacity: 0;
+    transition: opacity var(--transition-timing);
+
+    &.visible {
+      opacity: 1;
+    }
+  }
+}
+</style>

package/lib/components/{tooltip/TooltipItem.vue → ui/tooltip/UiTooltip.vue}

@@ -1,6 +1,6 @@
-<!-- v1.0 -->
+<!-- v2 -->
 <template>
-  <div v-if="!isDisabled" ref="tooltipElement" class="app-tooltip typo p3-regular">
+  <div v-if="!isDisabled" ref="tooltipElement" class="ui-tooltip typo p3-regular">
     {{ content }}
   </div>
 </template>
@@ -57,7 +57,7 @@ watch(content, () => updatePlacement(), { flush: 'post' })
 </script>
 
 <style lang="postcss" scoped>
-.app-tooltip {
+.ui-tooltip {
   position: relative;
   display: inline-flex;
   padding: 0.4rem 0.8rem;
@@ -66,21 +66,21 @@ watch(content, () => updatePlacement(), { flush: 'post' })
   border-radius: 0.4rem;
   background-color: var(--color-neutral-txt-primary);
   z-index: 999999;
-}
 
-[data-placement^='top'] {
-  margin-bottom: 0.7rem;
-}
+  [data-placement^='top'] {
+    margin-bottom: 0.7rem;
+  }
 
-[data-placement^='right'] {
-  margin-left: 0.7rem;
-}
+  [data-placement^='right'] {
+    margin-left: 0.7rem;
+  }
 
-[data-placement^='bottom'] {
-  margin-top: 0.7rem;
-}
+  [data-placement^='bottom'] {
+    margin-top: 0.7rem;
+  }
 
-[data-placement^='left'] {
-  margin-right: 0.7rem;
+  [data-placement^='left'] {
+    margin-right: 0.7rem;
+  }
 }
 </style>

package/lib/components/ui/top-bottom-table/UiTopBottomTable.vue

@@ -0,0 +1,64 @@
+<!-- v2 -->
+<template>
+  <div class="ui-top-bottom-table">
+    <div class="content">
+      <span class="typo p3-regular label">
+        {{ $t('core.select.n-selected-of', { count: selectedItems, total: totalItems }) }}
+      </span>
+
+      <UiButton
+        :disabled="selectedItems === totalItems"
+        accent="info"
+        size="small"
+        variant="tertiary"
+        @click="emit('toggleSelectAll', true)"
+      >
+        {{ $t('core.select.all') }}
+      </UiButton>
+      <UiButton
+        :disabled="selectedItems === 0"
+        accent="info"
+        size="small"
+        variant="tertiary"
+        @click="emit('toggleSelectAll', false)"
+      >
+        {{ $t('core.select.unselect') }}
+      </UiButton>
+    </div>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import UiButton from '@core/components/ui/button/UiButton.vue'
+
+defineProps<{
+  selectedItems: number
+  totalItems: number
+}>()
+
+const emit = defineEmits<{
+  toggleSelectAll: [value: boolean]
+}>()
+
+defineSlots<{
+  default(): any
+}>()
+</script>
+
+<style scoped lang="postcss">
+.ui-top-bottom-table {
+  display: flex;
+  justify-content: space-between;
+
+  .content {
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+  }
+
+  .label {
+    color: var(--color-neutral-txt-secondary);
+  }
+}
+</style>

package/lib/components/{tree/TreeItemLabel.vue → ui/tree-item-label/UiTreeItemLabel.vue}

@@ -1,23 +1,24 @@
-<!-- v1.1 -->
+<!-- v2 -->
 <template>
   <RouterLink v-slot="{ isExactActive, isActive, href, navigate }" :to="route" custom>
     <div
       :class="isExactActive ? 'exact-active' : active || isActive ? 'active' : undefined"
-      class="tree-item-label"
-      v-bind="$attrs"
+      class="ui-tree-item-label"
+      v-bind="attrs"
     >
       <template v-if="depth > 1">
-        <TreeLine
+        <VtsTreeLine
           v-for="i in depth - 1"
           :key="i"
           :half-height="(!hasToggle && i === depth - 1) || !isExpanded"
           :right="i === depth - 1"
         />
       </template>
-      <ButtonIcon
+      <UiButtonIcon
         v-if="hasToggle"
         v-tooltip="isExpanded ? $t('core.close') : $t('core.open')"
         class="toggle"
+        accent="info"
         :icon="isExpanded ? faAngleDown : faAngleRight"
         size="small"
         :target-scale="{ x: 1.5, y: 2 }"
@@ -26,7 +27,7 @@
       <div v-else class="h-line" />
       <a v-tooltip="{ selector: '.text' }" :href class="link typo p2-medium" @click="navigate">
         <slot name="icon">
-          <VtsIcon :icon accent="current" class="icon" />
+          <UiIcon :icon accent="current" class="icon" />
         </slot>
         <div class="text text-ellipsis">
           <slot />
@@ -38,14 +39,14 @@
 </template>
 
 <script lang="ts" setup>
-import ButtonIcon from '@core/components/button/ButtonIcon.vue'
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import TreeLine from '@core/components/tree/TreeLine.vue'
+import UiIcon from '@core/components/icon/VtsIcon.vue'
+import VtsTreeLine from '@core/components/tree/VtsTreeLine.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
 import { vTooltip } from '@core/directives/tooltip.directive'
 import { IK_TREE_ITEM_EXPANDED, IK_TREE_ITEM_HAS_CHILDREN, IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faAngleDown, faAngleRight } from '@fortawesome/free-solid-svg-icons'
-import { inject, ref } from 'vue'
+import { inject, ref, useAttrs } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 
 defineOptions({
@@ -53,8 +54,8 @@ defineOptions({
 })
 
 defineProps<{
-  icon?: IconDefinition
   route: RouteLocationRaw
+  icon?: IconDefinition
   active?: boolean
 }>()
 
@@ -62,6 +63,14 @@ const emit = defineEmits<{
   toggle: []
 }>()
 
+defineSlots<{
+  default(): any
+  icon?(): any
+  addons?(): any
+}>()
+
+const attrs = useAttrs()
+
 const hasToggle = inject(IK_TREE_ITEM_HAS_CHILDREN, ref(false))
 
 const isExpanded = inject(IK_TREE_ITEM_EXPANDED, ref(true))
@@ -70,65 +79,57 @@ const depth = inject(IK_TREE_LIST_DEPTH, 0)
 </script>
 
 <style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.tree-item-label {
-  --color: var(--color-neutral-txt-primary);
-  --background-color: var(--color-neutral-background-primary);
-
-  &:is(.exact-active, .active) {
-    --color: var(--color-neutral-txt-primary);
-    --background-color: var(--color-normal-background-selected);
-  }
-
-  &:hover {
-    --color: var(--color-neutral-txt-primary);
-    --background-color: var(--color-normal-background-hover);
-  }
-
-  &:active {
-    --color: var(--color-neutral-txt-primary);
-    --background-color: var(--color-normal-background-active);
-  }
-}
-
-/* IMPLEMENTATION */
-.tree-item-label {
+.ui-tree-item-label {
   display: flex;
   align-items: center;
-  color: var(--color);
-  background-color: var(--background-color);
+  color: var(--color-neutral-txt-primary);
+  background-color: var(--color-neutral-background-primary);
   border-radius: 0.8rem;
   gap: 0.4rem;
   padding: 0 0.8rem;
   margin-bottom: 0.2rem;
-}
 
-.link {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  min-width: 0;
-  padding: 0.8rem 0;
-  text-decoration: none;
-  color: inherit;
-  gap: 1.2rem;
+  .link {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    padding: 0.8rem 0;
+    text-decoration: none;
+    color: inherit;
+    gap: 1.2rem;
+
+    &:hover {
+      color: var(--color-neutral-txt-primary);
+    }
+  }
 
-  &:hover {
-    color: var(--color-neutral-txt-primary);
+  .text {
+    padding-inline-end: 0.4rem;
   }
-}
 
-.text {
-  padding-inline-end: 0.4rem;
-}
+  .icon {
+    font-size: 1.6rem;
+  }
 
-.icon {
-  font-size: 1.6rem;
-}
+  .h-line {
+    width: 2rem;
+    border-bottom: 0.1rem solid var(--color-info-txt-base);
+    margin-left: -0.4rem;
+  }
+
+  /* INTERACTION VARIANTS */
 
-.h-line {
-  width: 2rem;
-  border-bottom: 0.1rem solid var(--color-normal-txt-base);
-  margin-left: -0.4rem;
+  &:is(.exact-active, .active) {
+    background-color: var(--color-info-background-selected);
+  }
+
+  &:hover {
+    background-color: var(--color-info-background-hover);
+  }
+
+  &:active {
+    background-color: var(--color-info-background-active);
+  }
 }
 </style>

package/lib/components/ui/user-link/UiUserLink.vue

@@ -0,0 +1,76 @@
+<!-- v3 -->
+<template>
+  <RouterLink v-if="route && !disabled" :to="route" class="ui-user-link is-link typo p3-regular-underline">
+    <UiUserLogo size="extra-small" class="logo" />
+    {{ username }}
+  </RouterLink>
+  <span v-else :class="toVariants({ disabled })" class="ui-user-link typo p3-regular-underline">
+    <UiUserLogo size="extra-small" class="logo" />
+    {{ username }}
+  </span>
+</template>
+
+<script lang="ts" setup>
+import UiUserLogo from '@core/components/ui/user-logo/UiUserLogo.vue'
+import { toVariants } from '@core/utils/to-variants.util'
+import { type RouteLocationRaw } from 'vue-router'
+
+defineProps<{
+  username: string
+  route?: RouteLocationRaw
+  disabled?: boolean
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.ui-user-link {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-info-txt-base);
+  gap: 0.8rem;
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+
+  /* INTERACTION VARIANTS */
+
+  &.is-link {
+    &:hover {
+      color: var(--color-info-txt-hover);
+
+      .logo {
+        border-color: var(--color-info-txt-hover);
+      }
+    }
+
+    &:active {
+      color: var(--color-info-txt-active);
+
+      .logo {
+        border-color: var(--color-info-txt-active);
+      }
+    }
+
+    &:focus-visible {
+      outline: none;
+
+      &::before {
+        content: '';
+        position: absolute;
+        inset: -0.6rem;
+        border: 0.2rem solid var(--color-info-txt-base);
+        border-radius: 0.4rem;
+      }
+    }
+  }
+
+  &.disabled {
+    color: var(--color-neutral-txt-secondary);
+
+    .logo {
+      border-color: var(--color-neutral-txt-secondary);
+    }
+  }
+}
+</style>

package/lib/components/ui/user-logo/UiUserLogo.vue

@@ -0,0 +1,50 @@
+<!-- v2 -->
+<template>
+  <span :class="toVariants({ size })" class="ui-user-logo" />
+</template>
+
+<script lang="ts" setup>
+import { toVariants } from '@core/utils/to-variants.util'
+
+export type UserLogoSize = 'extra-small' | 'small' | 'medium'
+
+defineProps<{
+  size: UserLogoSize
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.ui-user-logo {
+  display: block;
+  background: var(--color-neutral-txt-primary) url('../../../assets/user.png') no-repeat;
+  border-style: solid;
+  border-color: var(--color-info-item-base);
+  border-radius: 20rem;
+
+  /* SIZE VARIANTS */
+
+  &.size--extra-small {
+    width: 1.6rem;
+    height: 1.6rem;
+    border-width: 0.1rem;
+    background-position: -0.85rem -0.55rem;
+    background-size: 2.88rem;
+  }
+
+  &.size--small {
+    width: 2.4rem;
+    height: 2.4rem;
+    border-width: 0.1rem;
+    background-position: -1.3rem -0.8rem;
+    background-size: 4.32rem;
+  }
+
+  &.size--medium {
+    width: 4rem;
+    height: 4rem;
+    border-width: 0.2rem;
+    background-position: -2.2rem -1.4rem;
+    background-size: 7.2rem;
+  }
+}
+</style>

package/lib/composables/route-query.composable.md

@@ -0,0 +1,136 @@
+# useRouteQuery Composable
+
+`useRouteQuery` is a composable that synchronizes a route query parameter with a reactive reference.
+
+It can optionally be configured with a default query value and transformers
+to convert the query string to a custom data type.
+
+## Usage
+
+### Basic Usage
+
+By default, the data type is `string`.
+
+```typescript
+const search = useRouteQuery('search')
+```
+
+In this example, if URL contains `?search=hello`, then `search.value` will be `'hello'`.
+
+If you do `search.value = 'world'`, then the URL will be replaced with `?search=world`.
+
+Resetting `search.value` to `''` will remove the query parameter from the URL.
+
+### Default query value
+
+You can provide a default value for the query parameter if it is not present in the URL.
+
+```typescript
+const search = useRouteQuery('search', { defaultQuery: 'hello' })
+```
+
+In this case, if the URL doesn’t contain the `search` query parameter, then `search.value` will be `'hello'`.
+
+Setting `search.value = 'world'` will update the URL to `?search=world`.
+
+Setting `search.value = ''` will update the URL to `?search=` (because it's not the default value).
+
+Resetting `search.value` to `'hello'` will remove the query parameter from the URL.
+
+### Advanced usage with custom data type (aka. Transformers)
+
+As said before, the default data type is `string`.
+
+That means that if the query is `?count=42`, then `query.value` will be the string `'42'`.
+
+You can use `toData`/`toQuery` transformers to convert the query string to a custom data type and back.
+
+```typescript
+const count = useRouteQuery('count', {
+  toData: query => parseInt(query, 10),
+  toQuery: data => data.toString(),
+  defaultQuery: '0', // If you don't provide a `defaultQuery`, then make sure that `toData` can handle the case of an empty string
+})
+```
+
+Now if the URL contains `?count=42`, then `count.value` will be the number `42`.
+
+Setting `count.value = 0` will remove the query parameter from the URL.
+
+### Working with objects, arrays, Set, Map, and boolean
+
+The `useRouteQuery` composable can handle any data type,
+but has some specific actions for `object`, `array`, `Set` and `Map` and `boolean`.
+
+It will then return an extended `computed` containing some actions to manipulate the data.
+
+#### Array
+
+Provides `add(value)`, `set(index, value)` and `delete(index)` methods.
+
+```typescript
+const array = useRouteQuery('array', {
+  toData: query => (query ? query.split(',') : []),
+  toQuery: data => data.join(','),
+})
+
+array.add('hello') // ?array=hello
+array.add('world') // ?array=hello,world
+array.add('hello') // ?array=hello,world,hello
+array.set(1, 'hi') // ?array=hello,hi,hello
+array.delete(2) // ?array=hello,hi
+```
+
+#### Set
+
+Provides `add(value)`, `delete(value)`, and `toggle(value, state?: boolean)` methods.
+
+```typescript
+const set = useRouteQuery('set', {
+  toData: query => new Set(query ? query.split(',') : []),
+  toQuery: data => Array.from(data).join(','),
+})
+
+set.toggle('hello') // ?set=hello
+set.toggle('hello') // ?
+set.toggle('hello', true) // ?set=hello
+set.toggle('hello', true) // ?set=hello
+set.toggle('hello', false) // ?
+
+set.add('hello') // ?set=hello
+set.add('world') // ?set=hello,world
+set.add('world') // ?set=hello,world
+set.delete('hello') // ?set=world
+```
+
+#### Map or Object
+
+Provides `set(key, value)` and `delete(key)` methods.
+
+```typescript
+const map = useRouteQuery('map', {
+  toData: query => convertQueryToMap(query),
+  toQuery: data => convertMapToQuery(data),
+})
+
+map.set('hello', 'world') // ?map=hello:world
+map.set('hi', 'earth') // ?map=hello:world,hi:earth
+map.delete('hello') // ?map=hi:earth
+```
+
+#### Boolean
+
+Provides `toggle(value?: boolean)` method.
+
+```typescript
+const bool = useRouteQuery('bool', {
+  toData: query => query === '1',
+  toQuery: data => (data ? '1' : '0'),
+})
+
+bool.toggle() // ?bool=1
+bool.toggle() // ?
+bool.toggle(true) // ?bool=1
+bool.toggle(true) // ?bool=1
+bool.toggle(false) // ?
+```