@xen-orchestra/web-core 0.0.2 → 0.0.3

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/chip/UiChip.vue

@@ -25,8 +25,8 @@ withDefaults(
 )
 
 const emit = defineEmits<{
-  (event: 'edit'): void
-  (event: 'remove'): void
+  edit: []
+  remove: []
 }>()
 </script>
 

package/lib/components/console/RemoteConsole.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="uiStore.isMobile ? 'mobile' : undefined" class="remote-console">
-    <div ref="consoleContainer" class="console"></div>
+    <div ref="consoleContainer" class="console" />
   </div>
 </template>
 

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/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/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/stacked-bar/StackedBar.vue

@@ -0,0 +1,49 @@
+<!-- v1.0 -->
+<template>
+  <div class="stacked-bar">
+    <StackedBarSegment
+      v-for="(segment, index) in computedSegments"
+      :key="index"
+      :color="segment.color"
+      :percentage="segment.percentage"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import StackedBarSegment from '@core/components/stacked-bar/StackedBarSegment.vue'
+import type { Color } from '@core/types/color.type'
+import { computed } from 'vue'
+
+type Segment = {
+  value: number
+  color: Color
+}
+
+const props = defineProps<{
+  segments: Segment[]
+  maxValue?: number
+}>()
+
+const totalValue = computed(() => props.segments.reduce((acc, bar) => acc + bar.value, 0))
+
+const max = computed(() => Math.max(props.maxValue ?? 0, totalValue.value))
+
+const computedSegments = computed(() => {
+  return props.segments.map(segment => ({
+    ...segment,
+    percentage: (segment.value / max.value) * 100,
+  }))
+})
+</script>
+
+<style lang="postcss" scoped>
+.stacked-bar {
+  width: 100%;
+  display: flex;
+  height: 4rem;
+  border-radius: 0.8rem;
+  overflow: hidden;
+  background-color: var(--background-color-purple-10);
+}
+</style>

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

@@ -0,0 +1,73 @@
+<template>
+  <div
+    v-tooltip="{ selector: '.ellipsis' }"
+    :class="color"
+    :style="{ width: percentage + '%' }"
+    class="stacked-bar-segment typo c4-semi-bold"
+  >
+    <div ref="ellipsisElement" :class="{ hidden }" class="ellipsis">
+      {{ $n(percentage / 100, 'percent') }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { vTooltip } from '@core/directives/tooltip.directive'
+import type { Color } from '@core/types/color.type'
+import { hasEllipsis } from '@core/utils/has-ellipsis.util'
+import { useResizeObserver } from '@vueuse/core'
+import { ref } from 'vue'
+
+defineProps<{
+  color: Color
+  percentage: number
+}>()
+
+const hidden = ref(false)
+const ellipsisElement = ref<HTMLElement | null>(null)
+
+useResizeObserver(ellipsisElement, ([entry]) => {
+  hidden.value = hasEllipsis(entry.target)
+})
+</script>
+
+<style lang="postcss" scoped>
+/* COLOR VARIANT */
+.stacked-bar-segment {
+  &.info {
+    --background-color: var(--color-purple-base);
+  }
+
+  &.success {
+    --background-color: var(--color-green-base);
+  }
+
+  &.warning {
+    --background-color: var(--color-orange-base);
+  }
+
+  &.error {
+    --background-color: var(--color-red-base);
+  }
+}
+
+/* IMPLEMENTATION */
+.stacked-bar-segment {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  white-space: nowrap;
+  color: var(--color-grey-600);
+  background-color: var(--background-color);
+}
+
+.ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.hidden {
+  visibility: hidden;
+}
+</style>

package/lib/components/state-hero/ComingSoonHero.vue

@@ -0,0 +1,9 @@
+<template>
+  <StateHero image="under-construction" class="coming-soon-hero">
+    {{ $t('coming-soon') }}
+  </StateHero>
+</template>
+
+<script lang="ts" setup>
+import StateHero from '@core/components/state-hero/StateHero.vue'
+</script>

package/lib/components/state-hero/LoadingHero.vue

@@ -0,0 +1,9 @@
+<template>
+  <StateHero busy class="loading-hero">
+    {{ $t('loading-in-progress') }}
+  </StateHero>
+</template>
+
+<script lang="ts" setup>
+import StateHero from '@core/components/state-hero/StateHero.vue'
+</script>

package/lib/components/state-hero/ObjectNotFoundHero.vue

@@ -0,0 +1,13 @@
+<template>
+  <StateHero image="no-result" class="object-not-found-hero">
+    {{ $t('object-not-found', { id }) }}
+  </StateHero>
+</template>
+
+<script lang="ts" setup>
+import StateHero from '@core/components/state-hero/StateHero.vue'
+
+defineProps<{
+  id: string
+}>()
+</script>

package/lib/components/state-hero/StateHero.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="state-hero">
+    <UiSpinner v-if="busy" class="spinner" />
+    <img v-else-if="imageSrc" :src="imageSrc" alt="" class="image" />
+    <p v-if="$slots.default" class="typo h2-black text">
+      <slot />
+    </p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UiSpinner from '@core/components/UiSpinner.vue'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  busy?: boolean
+  image?: 'no-result' | 'under-construction' // TODO: 'offline' | 'no-data' |  'not-found' | 'all-good' | 'all-done' | 'error'
+}>()
+
+const imageSrc = computed(() => {
+  try {
+    return new URL(`../../assets/${props.image}.svg`, import.meta.url).href
+  } catch {
+    return undefined
+  }
+})
+</script>
+
+<style lang="postcss" scoped>
+.state-hero {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4.2rem;
+}
+
+.image {
+  width: 90%;
+  max-width: 55rem;
+}
+
+.spinner {
+  color: var(--color-purple-base);
+  font-size: 10rem;
+}
+
+.text {
+  color: var(--color-purple-base);
+  margin-top: 4rem;
+}
+</style>

package/lib/components/table/ColumnTitle.vue

@@ -0,0 +1,150 @@
+<!-- v1.0 -->
+<template>
+  <MenuList :disabled placement="bottom-start" shadow>
+    <template #trigger="{ open, isOpen }">
+      <th
+        :class="{ interactive, disabled, focus: isOpen }"
+        class="column-header"
+        @click="ev => (interactive ? open(ev) : noop())"
+      >
+        <div class="content">
+          <span class="label">
+            <UiIcon :icon />
+            <slot />
+          </span>
+          <UiIcon :icon="currentInteraction?.icon" />
+        </div>
+      </th>
+    </template>
+    <MenuItem
+      v-for="interaction in interactions"
+      :key="interaction.id"
+      v-tooltip="$t('coming-soon')"
+      :disabled="interaction.disabled"
+      :on-click="() => updateInteraction(interaction)"
+    >
+      <UiIcon :icon="interaction.icon" />{{ interaction.label }}
+      <i v-if="currentInteraction?.id === interaction.id" class="current-interaction typo p3-regular-italic">
+        {{ $t('core.current').toLowerCase() }}
+      </i>
+    </MenuItem>
+  </MenuList>
+</template>
+
+<script lang="ts" setup>
+import UiIcon from '@core/components/icon/UiIcon.vue'
+import MenuItem from '@core/components/menu/MenuItem.vue'
+import MenuList from '@core/components/menu/MenuList.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { faArrowDown, faArrowUp, faEyeSlash, faFilter, faLayerGroup } from '@fortawesome/free-solid-svg-icons'
+import { noop } from '@vueuse/core'
+import { computed, inject } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+
+type InteractionId = 'sort-asc' | 'sort-desc' | 'group' | 'filter' | 'hide'
+type Interaction = {
+  disabled?: boolean
+  id: InteractionId
+  icon: IconDefinition
+  label: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    id?: string
+    icon?: IconDefinition
+    interactive?: boolean
+    disabled?: boolean
+  }>(),
+  {
+    disabled: false,
+    interactive: true,
+  }
+)
+const { t } = useI18n()
+const router = useRouter()
+
+const interactions = computed<Interaction[]>(() => [
+  { id: 'sort-asc', icon: faArrowDown, label: t('core.sort.ascending'), disabled: true },
+  { id: 'sort-desc', icon: faArrowUp, label: t('core.sort.descending'), disabled: true },
+  { id: 'group', icon: faLayerGroup, label: t('core.group'), disabled: true },
+  { id: 'filter', icon: faFilter, label: t('core.filter'), disabled: true },
+  { id: 'hide', icon: faEyeSlash, label: t('core.hide'), disabled: true },
+])
+
+const tableName = inject<string>('tableName')
+
+const currentInteraction = computed(() =>
+  interactions.value.find(interaction => router.currentRoute.value.query[columnName] === interaction.id)
+)
+
+const columnName = `${tableName}__${props.id}`
+
+const updateInteraction = (interaction: Interaction) => {
+  router.replace({
+    query: {
+      [columnName]: interaction.id,
+    },
+  })
+}
+</script>
+
+<style lang="postcss" scoped>
+/* COLOR VARIANTS */
+.column-header.interactive {
+  --color: var(--color-purple-base);
+  --background-color: var(--background-color-primary);
+
+  &.focus {
+    --color: var(--color-purple-base);
+    --background-color: var(--background-color-purple-10);
+  }
+
+  &:hover {
+    --color: var(--color-purple-d20);
+    --background-color: var(--background-color-purple-20);
+  }
+
+  &:active {
+    --color: var(--color-purple-d40);
+    --background-color: var(--background-color-purple-30);
+  }
+
+  &.disabled {
+    --color: var(--color-grey-400);
+    --background-color: var(--background-color-secondary);
+  }
+}
+/* IMPLEMENTATION */
+.column-header.interactive {
+  cursor: pointer;
+  color: var(--color);
+  background-color: var(--background-color);
+  &.disabled {
+    cursor: not-allowed;
+  }
+}
+
+.current-interaction {
+  color: var(--color-grey-300);
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.label {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.filter-icon {
+  cursor: pointer;
+}
+</style>

package/lib/components/table/UiTable.vue

@@ -0,0 +1,58 @@
+<template>
+  <table :class="{ 'vertical-border': verticalBorder }" class="ui-table typo p2-regular">
+    <slot />
+  </table>
+</template>
+
+<script lang="ts" setup>
+import { provide } from 'vue'
+
+const props = defineProps<{
+  name?: string
+  verticalBorder?: boolean
+}>()
+
+provide('tableName', props.name)
+</script>
+
+<style lang="postcss" scoped>
+.ui-table {
+  width: 100%;
+  border-spacing: 0;
+  background-color: var(--background-color-primary);
+  line-height: 2.4rem;
+  color: var(--color-grey-200);
+
+  :deep(th),
+  :deep(td) {
+    padding: 1rem;
+    border-top: 0.1rem solid var(--color-grey-500);
+    text-align: left;
+  }
+
+  :deep(th) {
+    font-weight: 700;
+  }
+
+  :deep(thead) {
+    th,
+    td {
+      color: var(--color-purple-base);
+      font-size: 1.4rem;
+      font-weight: 400;
+      text-transform: uppercase;
+    }
+  }
+
+  &.vertical-border {
+    :deep(th),
+    :deep(td) {
+      border-right: 0.1rem solid var(--color-grey-500);
+
+      &:last-child {
+        border-right: none;
+      }
+    }
+  }
+}
+</style>

package/lib/components/tooltip/TooltipList.vue

@@ -11,5 +11,3 @@ import { storeToRefs } from 'pinia'
 const tooltipStore = useTooltipStore()
 const { tooltips } = storeToRefs(tooltipStore)
 </script>
-
-<style scoped></style>

package/lib/components/tree/TreeItemLabel.vue

@@ -51,6 +51,10 @@ import { faAngleDown, faAngleRight } from '@fortawesome/free-solid-svg-icons'
 import { inject, ref } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 
+defineOptions({
+  inheritAttrs: false,
+})
+
 defineProps<{
   icon?: IconDefinition
   route: RouteLocationRaw

package/lib/composables/tree/types.ts

@@ -1,9 +1,9 @@
-import { useTree } from '@core/composables/tree.composable'
 import type { Branch } from '@core/composables/tree/branch'
 import type { BranchDefinition } from '@core/composables/tree/branch-definition'
 import type { Leaf } from '@core/composables/tree/leaf'
 import type { LeafDefinition } from '@core/composables/tree/leaf-definition'
 import type { TreeNodeBase } from '@core/composables/tree/tree-node-base'
+import { useTree } from '@core/composables/tree.composable'
 
 export type TreeNodeId = string | number
 

package/lib/i18n.ts

@@ -1,5 +1,5 @@
-import { createI18n } from 'vue-i18n'
 import messages from '@intlify/unplugin-vue-i18n/messages'
+import { createI18n } from 'vue-i18n'
 
 interface Locales {
   [key: string]: {
@@ -27,6 +27,15 @@ export default createI18n({
   locale: localStorage.getItem('lang') ?? 'en',
   fallbackLocale: 'en',
   messages,
+  missing: (locale, key, vm) => {
+    if (!import.meta.env.DEV) {
+      return key
+    }
+
+    console.warn(`i18n key not found: ${key}`, `Used in ${vm?.type.__name ?? 'unknown component'}`)
+
+    return `🌎❗⟨${key}⟩`
+  },
   datetimeFormats: {
     en: {
       date_short: {
@@ -155,4 +164,27 @@ export default createI18n({
       },
     },
   },
+  numberFormats: {
+    en: {
+      percent: {
+        style: 'percent',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2,
+      },
+    },
+    fr: {
+      percent: {
+        style: 'percent',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2,
+      },
+    },
+    de: {
+      percent: {
+        style: 'percent',
+        minimumFractionDigits: 0,
+        maximumFractionDigits: 2,
+      },
+    },
+  },
 })