@xen-orchestra/web-core 0.4.0 → 0.6.0

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

@@ -1,74 +0,0 @@
-<template>
-  <div :class="type" 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="typoClass" class="typo text">
-      <slot />
-    </p>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import UiSpinner from '@core/components/UiSpinner.vue'
-import { computed } from 'vue'
-
-export type StateHeroType = 'page' | 'card'
-
-const props = defineProps<{
-  type: StateHeroType
-  busy?: boolean
-  image?: 'no-result' | 'under-construction' | 'no-data' // TODO: 'offline' |  'not-found' | 'all-good' | 'all-done' | 'error'
-}>()
-
-const typoClass = computed(() => (props.type === 'page' ? 'h2-black' : 'h4-medium'))
-
-const imageSrc = computed(() => {
-  if (!props.image) {
-    return undefined
-  }
-
-  return new URL(`../../assets/${props.image}.svg`, import.meta.url).href
-})
-</script>
-
-<style lang="postcss" scoped>
-.state-hero {
-  &.page {
-    --image-width: 90%;
-    --image-max-height: none;
-    --spinner-size: 10rem;
-    --gap: 8.2rem;
-  }
-
-  &.card {
-    --image-width: 70%;
-    --image-max-height: 20rem;
-    --spinner-size: 6rem;
-    --gap: 2rem;
-  }
-}
-
-.state-hero {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--gap);
-}
-
-.image {
-  width: var(--image-width);
-  max-width: 55rem;
-  max-height: var(--image-max-height);
-}
-
-.spinner {
-  color: var(--color-normal-txt-base);
-  font-size: var(--spinner-size);
-}
-
-.text {
-  color: var(--color-normal-txt-base);
-}
-</style>

package/lib/components/tree/TreeItemError.vue

@@ -1,13 +0,0 @@
-<!-- v1.1 -->
-<template>
-  <li class="tree-item-error typo h6-semi-bold">
-    <slot />
-  </li>
-</template>
-
-<style lang="postcss" scoped>
-.tree-item-error {
-  padding-left: 3rem;
-  color: var(--color-danger-txt-base);
-}
-</style>

package/lib/components/tree/TreeLoadingItem.vue

@@ -1,60 +0,0 @@
-<!-- v1.1 -->
-<template>
-  <li class="tree-loading-item">
-    <div class="tree-loading-item-label-placeholder">
-      <div class="link-placeholder">
-        <template v-if="depth > 1">
-          <TreeLine v-for="i in depth - 1" :key="i" :right="i === depth - 1" full-height />
-        </template>
-        <VtsIcon :icon accent="current" />
-        <div class="loader">&nbsp;</div>
-      </div>
-    </div>
-  </li>
-</template>
-
-<script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import TreeLine from '@core/components/tree/TreeLine.vue'
-import { IK_TREE_LIST_DEPTH } from '@core/utils/injection-keys.util'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { inject } from 'vue'
-
-defineProps<{
-  icon: IconDefinition
-}>()
-
-const depth = inject(IK_TREE_LIST_DEPTH, 0)
-</script>
-
-<style lang="postcss" scoped>
-.tree-loading-item-label-placeholder {
-  display: flex;
-  height: 4rem;
-  background-color: var(--color-neutral-background-primary);
-}
-
-.link-placeholder {
-  display: flex;
-  align-items: center;
-  flex: 1;
-  padding: 0 0.8rem;
-  gap: 0.4rem;
-}
-
-.loader {
-  flex: 1;
-  animation: pulse alternate 1s infinite;
-  background-color: var(--color-normal-background-selected);
-}
-
-@keyframes pulse {
-  0% {
-    opacity: 0.5;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}
-</style>

package/lib/components/user/UserLink.vue

@@ -1,72 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <RouterLink v-if="route && !disabled" :to="route" class="user-link is-link typo p3-medium">
-    <UserLogo class="logo" />
-    {{ username }}
-  </RouterLink>
-  <span v-else :class="{ disabled }" class="user-link typo p3-medium">
-    <UserLogo class="logo" />
-    {{ username }}
-  </span>
-</template>
-
-<script lang="ts" setup>
-import UserLogo from '@core/components/user/UserLogo.vue'
-import { type RouteLocationRaw } from 'vue-router'
-
-defineProps<{
-  route?: RouteLocationRaw
-  disabled?: boolean
-  username: string
-}>()
-</script>
-
-<style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.user-link {
-  --color: var(--color-normal-txt-base);
-  --border-color: var(--color-normal-txt-base);
-
-  &.is-link {
-    &:is(:hover, .hover, :focus-visible) {
-      --color: var(--color-normal-txt-hover);
-      --border-color: var(--color-normal-txt-hover);
-    }
-
-    &:is(:active, .pressed) {
-      --color: var(--color-normal-txt-active);
-      --border-color: var(--color-normal-txt-active);
-    }
-  }
-
-  &.disabled {
-    --color: var(--color-neutral-txt-secondary);
-    --border-color: var(--color-neutral-txt-secondary);
-  }
-}
-
-/* IMPLEMENTATION */
-.user-link {
-  display: inline-flex;
-  align-items: center;
-  color: var(--color);
-  gap: 0.8rem;
-  border-top: 1px solid transparent;
-  border-bottom: 1px solid var(--border-color);
-  line-height: 0;
-
-  &.disabled {
-    cursor: not-allowed;
-  }
-
-  &.is-link {
-    text-decoration: none;
-  }
-
-  .logo {
-    /* Override the default color of UserLogo,
-     to apply hover, active and disabled styles */
-    --border-color: inherit;
-  }
-}
-</style>

package/lib/components/user/UserLogo.vue

@@ -1,57 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <span :class="size" class="user-logo" />
-</template>
-
-<script lang="ts" setup>
-import type { UserLogoSize } from '@core/types/size.type'
-
-withDefaults(
-  defineProps<{
-    size?: UserLogoSize
-  }>(),
-  { size: 'extra-small' }
-)
-</script>
-
-<style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.user-logo {
-  --border-color: var(--color-normal-txt-base);
-}
-
-/* SIZE VARIANTS */
-.user-logo {
-  &.extra-small {
-    --size: 1.6rem;
-    --border-size: 0.1rem;
-    --background-position: -0.8rem -0.493rem;
-    --background-size: 2.88rem;
-  }
-
-  &.small {
-    --size: 2.4rem;
-    --border-size: 0.1rem;
-    --background-position: -1.2rem -0.739rem;
-    --background-size: 4.32rem;
-  }
-
-  &.medium {
-    --size: 4rem;
-    --border-size: 0.2rem;
-    --background-position: -2rem -1.232rem;
-    --background-size: 7.2rem;
-  }
-}
-
-/* IMPLEMENTATION */
-.user-logo {
-  display: block;
-  width: var(--size);
-  height: var(--size);
-  background: var(--color-neutral-txt-primary) url('../../assets/user.png') no-repeat var(--background-position) /
-    var(--background-size);
-  border: var(--border-size) solid var(--border-color);
-  border-radius: 20rem;
-}
-</style>

package/lib/types/backup.type.ts

@@ -1,11 +0,0 @@
-import type { RouteLocationRaw } from 'vue-router'
-
-export type BackupState = 'success' | 'failure' | 'partial'
-
-export type BackupStates = BackupState[]
-
-export type Backup = {
-  label: string
-  route?: RouteLocationRaw
-  states: BackupStates
-}

package/lib/types/size.type.ts

@@ -1 +0,0 @@
-export type UserLogoSize = 'extra-small' | 'small' | 'medium'

package/lib/types/task.type.ts

@@ -1,13 +0,0 @@
-export type TaskStatus = 'pending' | 'success' | 'failure'
-
-export type TaskTab = TaskStatus | 'all'
-
-export type Task = {
-  id: string | number
-  name: string
-  status: TaskStatus
-  tag?: string
-  start?: number
-  end?: number
-  subtasks?: Task[]
-}