@xen-orchestra/web-core 0.0.2 → 0.0.4

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/card/CardSubtitle.vue

@@ -0,0 +1,24 @@
+<!-- v1.0 -->
+<template>
+  <div class="card-subtitle">
+    <span class="typo h7-semi-bold"><slot /></span>
+    <span v-if="$slots.info" class="typo p3-medium"><slot name="info" /></span>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineSlots<{
+  default: () => void
+  info: () => void
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.card-subtitle {
+  color: var(--color-purple-base);
+  border-bottom: 0.1rem solid var(--color-purple-base);
+  display: flex;
+  justify-content: space-between;
+  gap: 0.8rem;
+}
+</style>

package/lib/components/card/CardTitle.vue

@@ -0,0 +1,52 @@
+<!-- v1.0 -->
+<template>
+  <div class="card-title">
+    <div class="main-content">
+      <div class="title typo h6-medium"><slot /></div>
+
+      <div v-if="$slots.info" class="info typo h7-semi-bold"><slot name="info" /></div>
+    </div>
+    <p v-if="$slots.description" class="description typo p3-regular">
+      <slot name="description" />
+    </p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineSlots<{
+  default: () => void
+  info: () => void
+  description: () => void
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.card-title {
+  display: flex;
+  flex-direction: column;
+}
+
+.main-content {
+  display: flex;
+  gap: 1.6rem;
+  align-items: center;
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: 1.6rem;
+}
+
+.info {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  color: var(--color-purple-base);
+}
+
+.description {
+  color: var(--color-grey-300);
+}
+</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')" />
@@ -25,8 +25,8 @@ withDefaults(
 )
 
 const emit = defineEmits<{
-  (event: 'edit'): void
-  (event: 'remove'): void
+  edit: []
+  remove: []
 }>()
 </script>
 
@@ -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

@@ -1,12 +1,12 @@
 <template>
   <div :class="uiStore.isMobile ? 'mobile' : undefined" class="remote-console">
-    <div ref="consoleContainer" class="console"></div>
+    <div ref="consoleContainer" class="console" />
   </div>
 </template>
 
 <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/dropdown/DropdownTitle.vue

@@ -9,8 +9,12 @@
       <slot />
     </div>
     <div v-if="onToggleSelectAll" class="buttons">
-      <span v-if="selected !== 'all'" @click="emit('toggleSelectAll', true)">Select all</span>
-      <span v-if="selected !== 'none'" @click="emit('toggleSelectAll', false)">Deselect all</span>
+      <span v-if="selected !== 'all'" @click="emit('toggleSelectAll', true)">
+        {{ $t('core.select.all') }}
+      </span>
+      <span v-if="selected !== 'none'" @click="emit('toggleSelectAll', false)">
+        {{ $t('core.select.none') }}
+      </span>
     </div>
   </div>
 </template>
@@ -29,7 +33,7 @@ withDefaults(
 )
 
 const emit = defineEmits<{
-  (event: 'toggleSelectAll', value: boolean): void
+  toggleSelectAll: [value: boolean]
 }>()
 </script>
 

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/icon/VmIcon.vue

@@ -7,8 +7,8 @@
 </template>
 
 <script lang="ts" setup>
-import PowerStateIcon from '@core/components/PowerStateIcon.vue'
 import UiIcon from '@core/components/icon/UiIcon.vue'
+import PowerStateIcon from '@core/components/PowerStateIcon.vue'
 import type { POWER_STATE } from '@core/types/power-state.type'
 import { faDisplay } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeLayers } from '@fortawesome/vue-fontawesome'

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/menu/MenuItem.vue

@@ -25,8 +25,8 @@
 
 <script lang="ts" setup>
 import UiIcon from '@core/components/icon/UiIcon.vue'
-import MenuTrigger from '@core/components/menu/MenuTrigger.vue'
 import MenuList from '@core/components/menu/MenuList.vue'
+import MenuTrigger from '@core/components/menu/MenuTrigger.vue'
 import { useContext } from '@core/composables/context.composable'
 import { DisabledContext } from '@core/context'
 import { IK_CLOSE_MENU, IK_MENU_HORIZONTAL } from '@core/utils/injection-keys.util'

package/lib/components/menu/MenuList.vue

@@ -12,9 +12,13 @@
 import { useContext } from '@core/composables/context.composable'
 import { DisabledContext } from '@core/context'
 import { IK_CLOSE_MENU, IK_MENU_HORIZONTAL, IK_MENU_TELEPORTED } from '@core/utils/injection-keys.util'
+import { onClickOutside, unrefElement, whenever } from '@vueuse/core'
 import placementJs, { type Options } from 'placement.js'
 import { computed, inject, nextTick, provide, ref, useSlots } from 'vue'
-import { onClickOutside, unrefElement, whenever } from '@vueuse/core'
+
+defineOptions({
+  inheritAttrs: false,
+})
 
 const props = withDefaults(
   defineProps<{
@@ -26,10 +30,6 @@ const props = withDefaults(
   { disabled: undefined }
 )
 
-defineOptions({
-  inheritAttrs: false,
-})
-
 const slots = useSlots()
 const isOpen = ref(false)
 const menu = ref()

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>