@xen-orchestra/web-core 0.0.3 → 0.0.4

package/lib/assets/css/_typography.pcss

@@ -4,3 +4,4 @@
 @import 'typography/_line-height.pcss';
 @import 'typography/_letter-spacing.pcss';
 @import 'typography/_legacy.pcss';
+@import 'typography/_utils.pcss';

package/lib/assets/css/typography/_utils.pcss

@@ -0,0 +1,6 @@
+.text-ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  min-width: 0;
+}

package/lib/components/UiTag.vue

@@ -4,7 +4,7 @@
     <slot name="icon">
       <UiIcon :icon fixed-width />
     </slot>
-    <span class="content"><slot /></span>
+    <span class="text-ellipsis"><slot /></span>
   </span>
 </template>
 
@@ -78,7 +78,7 @@ withDefaults(
 
 /* IMPLEMENTATION */
 .ui-tag {
-  display: inline-flex;
+  display: flex;
   justify-content: center;
   align-items: center;
   gap: 0.8rem;
@@ -88,10 +88,6 @@ withDefaults(
   padding: 0.2rem 0.8rem;
   border-radius: 0.4rem;
   vertical-align: middle;
-
-  .content {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+  min-width: 0;
 }
 </style>

package/lib/components/backdrop/Backdrop.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="vts-backdrop" />
+</template>
+
+<style lang="postcss" scoped>
+.vts-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+}
+</style>

package/lib/components/cell-object/CellObject.vue

@@ -0,0 +1,54 @@
+<!-- v1.0 -->
+<template>
+  <td class="cell-object">
+    <div class="data">
+      <slot />
+      <template v-if="id !== undefined">
+        <span v-tooltip class="id typo p4-regular-italic text-ellipsis">
+          {{ id }}
+        </span>
+        <UiButton
+          v-if="isSupported && copiableId"
+          :left-icon="faCopy"
+          level="secondary"
+          size="extra-small"
+          :color="copied ? 'success' : 'info'"
+          @click="copy(id)"
+        >
+          {{ copied ? $t('core.copied') : $t('core.copy-id') }}
+        </UiButton>
+      </template>
+    </div>
+  </td>
+</template>
+
+<script lang="ts" setup>
+import UiButton from '@core/components/button/UiButton.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import { faCopy } from '@fortawesome/free-solid-svg-icons'
+import { useClipboard } from '@vueuse/core'
+
+defineProps<{
+  id?: string
+  copiableId?: boolean
+}>()
+
+const { isSupported, copy, copied } = useClipboard()
+</script>
+
+<style lang="postcss" scoped>
+.cell-object {
+  padding: 0.8rem;
+  border: 0.1rem solid var(--color-grey-500);
+}
+
+.data {
+  display: flex;
+  gap: 1.6rem;
+  align-items: center;
+}
+
+.id {
+  color: var(--color-grey-300);
+}
+</style>

package/lib/components/cell-text/CellText.vue

@@ -0,0 +1,40 @@
+<!-- v1.0 -->
+<template>
+  <td class="cell-text">
+    <div class="data typo p2-regular">
+      <span v-tooltip class="text-ellipsis">
+        <slot />
+      </span>
+      <span v-if="slots.secondary" class="info typo p4-regular">
+        <slot name="secondary" />
+      </span>
+    </div>
+  </td>
+</template>
+
+<script lang="ts" setup>
+import { vTooltip } from '@core/directives/tooltip.directive'
+
+const slots = defineSlots<{
+  default: () => any
+  secondary?: () => any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.cell-text {
+  padding: 0.8rem;
+  border: 0.1rem solid var(--color-grey-500);
+  color: var(--color-grey-000);
+}
+
+.data {
+  display: flex;
+  gap: 1.6rem;
+  align-items: center;
+}
+
+.info {
+  color: var(--color-grey-300);
+}
+</style>

package/lib/components/chip/UiChip.vue

@@ -2,7 +2,7 @@
 <template>
   <span :class="[color, { disabled }]" class="ui-chip typo p3-regular" @click="emit('edit')">
     <ChipIcon :color :disabled :icon />
-    <span class="content">
+    <span class="content text-ellipsis">
       <slot />
     </span>
     <ChipRemoveIcon v-if="!disabled" :color @click.stop="emit('remove')" />
@@ -113,7 +113,7 @@ const emit = defineEmits<{
 
 /* IMPLEMENTATION */
 .ui-chip {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   gap: 0.8rem;
   padding: 0.4rem 0.8rem;
@@ -124,6 +124,7 @@ const emit = defineEmits<{
   min-height: 2.4rem;
   vertical-align: middle;
   white-space: nowrap;
+  min-width: 0;
 
   &.disabled {
     pointer-events: none;
@@ -131,8 +132,6 @@ const emit = defineEmits<{
 
   .content {
     line-height: 1.6rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
   }
 }
 </style>

package/lib/components/console/RemoteConsole.vue

@@ -6,7 +6,7 @@
 
 <script lang="ts" setup>
 import { useUiStore } from '@core/stores/ui.store'
-import VncClient from '@novnc/novnc/core/rfb'
+import VncClient from '@novnc/novnc/lib/rfb'
 import { promiseTimeout } from '@vueuse/shared'
 import { fibonacci } from 'iterable-backoff'
 import { onBeforeUnmount, ref, watchEffect } from 'vue'

package/lib/components/divider/Divider.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="vts-divider" :class="type" />
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  type: 'stretch' | 'tab'
+}>()
+</script>
+
+<style scoped lang="postcss">
+.vts-divider {
+  border-left: 0.1rem solid var(--color-grey-500);
+  border-bottom: 0.1rem solid var(--color-grey-500);
+
+  &.tab {
+    height: 2.4rem;
+    align-self: center;
+  }
+
+  &.stretch {
+    align-self: stretch;
+  }
+}
+</style>

package/lib/components/dropdown/DropdownItem.vue

@@ -4,7 +4,7 @@
     <slot name="icon">
       <UiIcon :icon />
     </slot>
-    <div class="label p2 medium">
+    <div class="label p2 medium text-ellipsis">
       <slot />
     </div>
     <div v-if="info" class="info-text p3 italic">{{ info }}</div>
@@ -181,9 +181,6 @@ const checkbox = inject(
 
 .label {
   margin-right: auto;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .info-text {

package/lib/components/head-bar/HeadBar.vue

@@ -0,0 +1,78 @@
+<!-- v1.0 -->
+<template>
+  <div class="head-bar">
+    <div class="label-wrapper">
+      <span v-if="slots.icon || icon" class="icon">
+        <slot name="icon">
+          <UiIcon :icon />
+        </slot>
+      </span>
+      <h4 v-tooltip class="typo h4-medium label text-ellipsis">
+        <slot />
+      </h4>
+    </div>
+    <div v-if="slots.status" class="status typo c3-regular">
+      <slot name="status" />
+    </div>
+    <div v-if="slots.actions" class="actions">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UiIcon from '@core/components/icon/UiIcon.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+
+defineProps<{
+  icon?: IconDefinition
+}>()
+
+const slots = defineSlots<{
+  default: () => any
+  icon?: () => any
+  status?: () => any
+  actions?: () => any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.head-bar {
+  padding: 0.8rem 1.6rem;
+  display: flex;
+  gap: 4.8rem;
+  align-items: center;
+  border-bottom: 0.1rem solid var(--color-grey-500);
+  background-color: var(--background-color-primary);
+}
+
+.label-wrapper {
+  display: flex;
+  gap: 1.6rem;
+  align-items: center;
+  min-width: 0;
+}
+
+.label {
+  color: var(--color-grey-100);
+}
+
+.icon {
+  font-size: 2.4rem;
+}
+
+.status {
+  color: var(--color-grey-200);
+  display: flex;
+  align-items: center;
+  gap: 1.6rem;
+}
+
+.actions {
+  margin-inline-start: auto;
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+</style>

package/lib/components/input/UiInput.vue

@@ -0,0 +1,133 @@
+<!-- WIP -->
+<template>
+  <div class="ui-input">
+    <UiIcon :icon class="before" />
+    <input :id v-model.trim="modelValue" class="typo p1-regular input" type="search" v-bind="$attrs" />
+    <UiIcon v-if="!$attrs.disabled && modelValue" :icon="faXmark" class="after" color="info" @click="modelValue = ''" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UiIcon from '@core/components/icon/UiIcon.vue'
+import { uniqueId } from '@core/utils/unique-id.util'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { faXmark } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+defineProps<{
+  icon?: IconDefinition
+}>()
+
+const modelValue = defineModel<string>({ required: true })
+
+const id = computed(() => uniqueId('input-'))
+</script>
+
+<style lang="postcss" scoped>
+/* COLOR VARIANTS */
+.input {
+  & {
+    --border-color: var(--color-grey-500);
+    --background-color: var(--background-color-primary);
+  }
+
+  &:is(:hover, :focus-visible) {
+    --border-color: var(--color-purple-d20);
+    --background-color: var(--background-color-primary);
+  }
+
+  &:focus {
+    --border-color: var(--color-purple-base);
+    --background-color: var(--background-color-primary);
+  }
+
+  &:active {
+    --border-color: var(--color-purple-d40);
+    --background-color: var(--background-color-primary);
+  }
+
+  &:disabled {
+    --border-color: var(--color-grey-500);
+    --background-color: var(--background-color-secondary);
+  }
+}
+
+/* BORDER VARIANTS */
+.input {
+  --border-width: 0.1rem;
+
+  &:is(:hover, :focus-visible) {
+    --border-width: 0.1rem;
+  }
+
+  &:focus {
+    --border-width: 0.2rem;
+  }
+
+  &:active {
+    --border-width: 0.1rem;
+  }
+
+  &:disabled {
+    --border-width: 0.1rem;
+  }
+}
+
+/* IMPLEMENTATION */
+.ui-input {
+  position: relative;
+
+  .before + .input {
+    padding-inline-start: 4.8rem;
+  }
+}
+
+.input {
+  border: var(--border-width) solid var(--border-color);
+  border-radius: 0.8rem;
+  outline: none;
+  width: 100%;
+  height: 4rem;
+  padding: 0.8rem 1.6rem;
+  color: var(--color-grey-000);
+  background-color: var(--background-color);
+
+  &:has(+ .after) {
+    padding-inline-end: 4.8rem;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &::placeholder {
+    color: var(--color-grey-300);
+  }
+
+  &[type='search']::-webkit-search-cancel-button {
+    display: none;
+  }
+}
+
+.before,
+.after {
+  position: absolute;
+  inset-block: 1.2rem;
+}
+
+.before {
+  color: var(--color-grey-400);
+  inset-inline-start: 1.6rem;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.after {
+  inset-inline-end: 1.6rem;
+  cursor: pointer;
+}
+</style>

package/lib/components/object-link/ObjectLink.vue

@@ -0,0 +1,87 @@
+<!-- v1.0 -->
+<template>
+  <RouterLink v-if="route && !disabled" :to="route" class="object-link is-link typo p3-medium">
+    <span class="icon">
+      <slot name="icon">
+        <UiIcon :icon />
+      </slot>
+    </span>
+    <span v-tooltip class="content text-ellipsis">
+      <slot />
+    </span>
+  </RouterLink>
+  <span v-else :class="{ disabled }" class="object-link typo p3-medium">
+    <span class="icon">
+      <slot name="icon">
+        <UiIcon :icon />
+      </slot>
+    </span>
+    <slot />
+  </span>
+</template>
+
+<script lang="ts" setup>
+import UiIcon from '@core/components/icon/UiIcon.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { type RouteLocationRaw } from 'vue-router'
+
+defineProps<{
+  route?: RouteLocationRaw
+  disabled?: boolean
+  icon?: IconDefinition
+}>()
+
+defineSlots<{
+  default: () => any
+  icon: () => any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+/* COLOR VARIANTS */
+.object-link {
+  --color: var(--color-purple-base);
+  --border-color: var(--color-purple-base);
+
+  &.is-link {
+    &:is(:hover, .hover, :focus-visible) {
+      --color: var(--color-purple-d20);
+      --border-color: var(--color-purple-d20);
+    }
+
+    &:is(:active, .pressed) {
+      --color: var(--color-purple-d40);
+      --border-color: var(--color-purple-d40);
+    }
+  }
+
+  &.disabled {
+    --color: var(--color-grey-400);
+    --border-color: var(--color-grey-400);
+  }
+}
+
+/* IMPLEMENTATION */
+.object-link {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  color: var(--color);
+  gap: 1rem;
+  border-top: 0.1rem solid transparent;
+  border-bottom: 0.1rem solid var(--border-color);
+  line-height: 1;
+  padding-block: 0.5rem;
+  text-decoration: none;
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+}
+
+.icon {
+  color: var(--color-grey-100);
+  font-size: 0.8rem;
+}
+</style>

package/lib/components/search-bar/SearchBar.vue

@@ -0,0 +1,60 @@
+<!-- v1.1 -->
+<template>
+  <form class="search-bar" @submit.prevent="emit('search', value)">
+    <label v-if="uiStore.isDesktop" :for="id" class="typo p2-regular label">
+      {{ $t('core.search-bar.label') }}
+    </label>
+    <UiInput
+      :id
+      v-model="value"
+      :aria-label="uiStore.isMobile ? $t('core.search-bar.label') : undefined"
+      :icon="uiStore.isDesktop ? faMagnifyingGlass : undefined"
+      :placeholder="$t('core.search-bar.placeholder')"
+    />
+    <template v-if="uiStore.isDesktop">
+      <UiButton type="submit">{{ $t('core.search') }}</UiButton>
+      <Divider type="stretch" />
+      <UiButton v-tooltip="$t('coming-soon')" level="secondary" :left-icon="faFilter" disabled>
+        {{ $t('core.search-bar.use-query-builder') }}
+      </UiButton>
+    </template>
+    <template v-else>
+      <ButtonIcon type="submit" :icon="faMagnifyingGlass" />
+      <ButtonIcon disabled :icon="faFilter" />
+    </template>
+  </form>
+</template>
+
+<script lang="ts" setup>
+import ButtonIcon from '@core/components/button/ButtonIcon.vue'
+import UiButton from '@core/components/button/UiButton.vue'
+import Divider from '@core/components/divider/Divider.vue'
+import UiInput from '@core/components/input/UiInput.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import { useUiStore } from '@core/stores/ui.store'
+import { uniqueId } from '@core/utils/unique-id.util'
+import { faFilter, faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'
+import { ref } from 'vue'
+
+const emit = defineEmits<{
+  search: [value: string]
+}>()
+
+const id = uniqueId('search-input-')
+
+const uiStore = useUiStore()
+
+const value = ref<string>('')
+</script>
+
+<style lang="postcss" scoped>
+.search-bar {
+  display: flex;
+  gap: 1.6rem;
+  align-items: center;
+}
+
+.label {
+  color: var(--color-grey-200);
+}
+</style>

package/lib/components/stacked-bar/StackedBarSegment.vue

@@ -1,11 +1,11 @@
 <template>
   <div
-    v-tooltip="{ selector: '.ellipsis' }"
+    v-tooltip="{ selector: '.text-ellipsis' }"
     :class="color"
     :style="{ width: percentage + '%' }"
     class="stacked-bar-segment typo c4-semi-bold"
   >
-    <div ref="ellipsisElement" :class="{ hidden }" class="ellipsis">
+    <div ref="ellipsisElement" :class="{ hidden }" class="text-ellipsis">
       {{ $n(percentage / 100, 'percent') }}
     </div>
   </div>
@@ -61,12 +61,6 @@ useResizeObserver(ellipsisElement, ([entry]) => {
   background-color: var(--background-color);
 }
 
-.ellipsis {
-  overflow: hidden;
-  white-space: nowrap;
-  min-width: 0;
-}
-
 .hidden {
   visibility: hidden;
 }

package/lib/components/tab/TabList.vue

@@ -28,5 +28,6 @@ useContext(DisabledContext, () => props.disabled)
   background-color: var(--background-color-primary);
   max-width: 100%;
   overflow: auto;
+  flex-shrink: 0;
 }
 </style>

package/lib/components/table/UiTable.vue

@@ -22,6 +22,8 @@ provide('tableName', props.name)
   background-color: var(--background-color-primary);
   line-height: 2.4rem;
   color: var(--color-grey-200);
+  border-collapse: collapse;
+  table-layout: fixed;
 
   :deep(th),
   :deep(td) {
@@ -49,6 +51,10 @@ provide('tableName', props.name)
     :deep(td) {
       border-right: 0.1rem solid var(--color-grey-500);
 
+      &:first-child {
+        border-left: none;
+      }
+
       &:last-child {
         border-right: none;
       }