@xen-orchestra/web-core 0.0.1

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

@@ -0,0 +1,57 @@
+.typo {
+  /* BLACK (900) */
+
+  &.h1-black,
+  &.h2-black,
+  &.h3-black,
+  &.h4-black,
+  &.h5-black,
+  &.h6-black,
+  &.h7-black {
+    font-weight: 900;
+  }
+
+  /* SEMI-BOLD (600) */
+
+  &.h3-semi-bold,
+  &.h4-semi-bold,
+  &.h5-semi-bold,
+  &.h6-semi-bold,
+  &.h7-semi-bold,
+  &.p4-semi-bold,
+  &.c1-semi-bold,
+  &.c2-semi-bold,
+  &.c3-semi-bold,
+  &.c4-semi-bold,
+  &.c5-semi-bold {
+    font-weight: 600;
+  }
+
+  /* MEDIUM (500) */
+
+  &.h3-medium,
+  &.h4-medium,
+  &.h5-medium,
+  &.h6-medium,
+  &.h7-medium,
+  &.p1-medium,
+  &.p2-medium,
+  &.p3-medium,
+  &.p4-medium {
+    font-weight: 500;
+  }
+
+  /* REGULAR (400) */
+
+  &.p1-regular,
+  &.p2-regular,
+  &.p3-regular,
+  &.p4-regular,
+  &.c1-regular,
+  &.c2-regular,
+  &.c3-regular,
+  &.c4-regular,
+  &.c5-regular {
+    font-weight: 400;
+  }
+}

package/lib/components/PowerStateIcon.vue

@@ -0,0 +1,46 @@
+<!-- v1.0 -->
+<template>
+  <UiIcon :class="className" :icon="icon" class="power-state-icon" />
+</template>
+
+<script lang="ts" setup>
+import UiIcon from '@core/components/icon/UiIcon.vue'
+import type { POWER_STATE } from '@core/types/power-state.type'
+import { faMoon, faPause, faPlay, faStop } from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  state: POWER_STATE
+}>()
+
+const icons = {
+  running: faPlay,
+  paused: faPause,
+  suspended: faMoon,
+  halted: faStop,
+}
+
+const icon = computed(() => icons[props.state])
+
+const className = computed(() => `state-${props.state}`)
+</script>
+
+<style lang="postcss" scoped>
+.power-state-icon {
+  &.state-suspended {
+    color: var(--color-purple-d60);
+  }
+
+  &.state-running {
+    color: var(--color-green-base);
+  }
+
+  &.state-paused {
+    color: var(--color-purple-l40);
+  }
+
+  &.state-halted {
+    color: var(--color-red-base);
+  }
+}
+</style>

package/lib/components/StatusPill.vue

@@ -0,0 +1,32 @@
+<template>
+  <UiIcon :color :icon class="status-pill" />
+</template>
+
+<script lang="ts" setup>
+import UiIcon from '@core/components/icon/UiIcon.vue'
+import { computed } from 'vue'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { faCheckCircle, faCircleMinus, faCircleXmark } from '@fortawesome/free-solid-svg-icons'
+import type { Color } from '@core/types/color.type'
+
+type Props = {
+  state: 'success' | 'partial' | 'failure'
+}
+
+const props = defineProps<Props>()
+
+const states: Record<Props['state'], { icon: IconDefinition; color: Color }> = {
+  success: { icon: faCheckCircle, color: 'success' },
+  partial: { icon: faCircleMinus, color: 'warning' },
+  failure: { icon: faCircleXmark, color: 'error' },
+}
+
+const icon = computed(() => states[props.state].icon)
+const color = computed(() => states[props.state].color)
+</script>
+
+<style lang="postcss" scoped>
+.status-pill {
+  font-size: 1rem;
+}
+</style>

package/lib/components/UiCounter.vue

@@ -0,0 +1,89 @@
+<!-- v1.0 -->
+<template>
+  <span :class="classNames" class="ui-counter typo">
+    <span class="inner">{{ value }}</span>
+  </span>
+</template>
+
+<script lang="ts" setup>
+import type { CounterColor } from '@core/types/color.type'
+import type { CounterSize } from '@core/types/size.type'
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    value: number | string
+    color?: CounterColor
+    size?: CounterSize
+  }>(),
+  { size: 'small' }
+)
+
+const fontClasses = {
+  small: 'p4-semi-bold',
+  medium: 'p1-medium',
+}
+
+const classNames = computed(() => {
+  return [props.color, props.size, fontClasses[props.size]]
+})
+</script>
+
+<style lang="postcss" scoped>
+/* COLOR VARIANTS */
+.ui-counter {
+  --background-color: var(--color-grey-300);
+
+  &.info {
+    --background-color: var(--color-purple-base);
+  }
+
+  &.success {
+    --background-color: var(--color-green-base);
+  }
+
+  &.warning {
+    --background-color: var(--color-orange-base);
+  }
+
+  &:is(.error, .danger) {
+    --background-color: var(--color-red-base);
+  }
+
+  &.black {
+    --background-color: var(--color-grey-100);
+  }
+}
+
+/* SIZE VARIANTS */
+.ui-counter {
+  &.small {
+    --height: 1.5rem;
+    --padding: 0 0.4rem;
+  }
+
+  &.medium {
+    --height: 2.4rem;
+    --padding: 0 0.6rem;
+  }
+}
+
+/* IMPLEMENTATION */
+.ui-counter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  text-transform: lowercase;
+  color: var(--color-grey-600);
+  height: var(--height);
+  min-width: var(--height);
+  padding: var(--padding);
+  background-color: var(--background-color);
+  border-radius: calc(var(--height) / 2);
+
+  .inner {
+    line-height: 0;
+  }
+}
+</style>

package/lib/components/UiSpinner.vue

@@ -0,0 +1,48 @@
+<!-- Adapted from https://www.benmvp.com/blog/how-to-create-circle-svg-gradient-loading-spinner/ -->
+
+<!-- v1.0 -->
+<template>
+  <svg class="ui-spinner" fill="none" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <linearGradient :id="secondHalfId">
+        <stop offset="0%" stop-color="currentColor" stop-opacity="0" />
+        <stop offset="100%" stop-color="currentColor" stop-opacity="0.5" />
+      </linearGradient>
+      <linearGradient :id="firstHalfId">
+        <stop offset="0%" stop-color="currentColor" stop-opacity="1" />
+        <stop offset="100%" stop-color="currentColor" stop-opacity="0.5" />
+      </linearGradient>
+    </defs>
+
+    <g stroke-width="40">
+      <path :stroke="`url(#${secondHalfId})`" d="M 30 200 A 170 170 180 0 1 370 200" />
+      <path :stroke="`url(#${firstHalfId})`" d="M 370 200 A 170 170 0 0 1 30 200" />
+      <path d="M 30 200 A 170 170 180 0 1 30 200" stroke="currentColor" stroke-linecap="round" />
+    </g>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import { uniqueId } from '@core/utils/unique-id.util'
+
+const firstHalfId = uniqueId('spinner-first-half-')
+const secondHalfId = uniqueId('spinner-second-half-')
+</script>
+
+<style lang="postcss" scoped>
+.ui-spinner {
+  width: 1.2em;
+  height: 1.2em;
+  animation: rotate 1s linear infinite;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

package/lib/components/UiTag.vue

@@ -0,0 +1,97 @@
+<!-- v1.2 -->
+<template>
+  <span :class="[color, { light }]" class="ui-tag typo p3-regular">
+    <slot name="icon">
+      <UiIcon :icon fixed-width />
+    </slot>
+    <span class="content"><slot /></span>
+  </span>
+</template>
+
+<script lang="ts" setup>
+import UiIcon from '@core/components/icon/UiIcon.vue'
+import type { TagColor } from '@core/types/color.type'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+
+withDefaults(
+  defineProps<{
+    color?: TagColor
+    light?: boolean
+    icon?: IconDefinition
+  }>(),
+  { color: 'grey' }
+)
+</script>
+
+<style lang="postcss" scoped>
+/* COLOR VARIANTS */
+.ui-tag {
+  --color: var(--color-grey-600);
+
+  &.light {
+    --color: var(--color-grey-100);
+  }
+}
+
+/* BACKGROUND COLOR VARIANTS */
+.ui-tag {
+  &.grey {
+    --background-color: var(--color-grey-300);
+
+    &.light {
+      --background-color: var(--background-color-secondary);
+    }
+  }
+
+  &.info {
+    --background-color: var(--color-purple-l20);
+
+    &.light {
+      --background-color: var(--background-color-purple-10);
+    }
+  }
+
+  &.success {
+    --background-color: var(--color-green-l20);
+
+    &.light {
+      --background-color: var(--background-color-green-10);
+    }
+  }
+
+  &.warning {
+    --background-color: var(--color-orange-l20);
+
+    &.light {
+      --background-color: var(--background-color-orange-10);
+    }
+  }
+
+  &:is(.error, .danger) {
+    --background-color: var(--color-red-l20);
+
+    &.light {
+      --background-color: var(--background-color-red-10);
+    }
+  }
+}
+
+/* IMPLEMENTATION */
+.ui-tag {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.8rem;
+  white-space: nowrap;
+  color: var(--color);
+  background-color: var(--background-color);
+  padding: 0.2rem 0.8rem;
+  border-radius: 0.4rem;
+  vertical-align: middle;
+
+  .content {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+</style>

package/lib/components/button/ButtonGroup.vue

@@ -0,0 +1,33 @@
+<!-- v1.0 -->
+<template>
+  <div class="button-group">
+    <div class="line"><slot /></div>
+    <div v-if="slots.tertiary" class="line">
+      <slot name="tertiary" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const slots = defineSlots<{
+  default: () => void
+  tertiary?: () => void
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.button-group {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.6rem;
+
+  .line {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 2.4rem;
+  }
+}
+</style>

package/lib/components/button/ButtonIcon.vue

@@ -0,0 +1,199 @@
+<!-- v1.0 -->
+<template>
+  <button :class="[color, size, { disabled, active }]" :disabled class="button-icon" type="button">
+    <UiIcon :icon class="icon" />
+    <span v-if="dot" class="dot" />
+  </button>
+</template>
+
+<script lang="ts" setup>
+import UiIcon from '@core/components/icon/UiIcon.vue'
+import type { Color } from '@core/types/color.type'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+
+withDefaults(
+  defineProps<{
+    icon: IconDefinition
+    size?: 'small' | 'medium' | 'large'
+    color?: Color
+    disabled?: boolean
+    active?: boolean
+    dot?: boolean
+  }>(),
+  { color: 'info', size: 'medium' }
+)
+</script>
+
+<style lang="postcss" scoped>
+/* COLOR VARIANTS */
+.button-icon {
+  &.info {
+    & {
+      --color: var(--color-purple-base);
+      --background-color: transparent;
+      --dot-color: var(--color-red-base);
+    }
+
+    &:is(.active, .selected) {
+      --color: var(--color-purple-base);
+      --background-color: var(--background-color-purple-10);
+    }
+
+    &:is(:hover, .hover, :focus-visible) {
+      --color: var(--color-purple-d20);
+      --background-color: var(--background-color-purple-20);
+    }
+
+    &:is(:active, .pressed) {
+      --color: var(--color-purple-d40);
+      --background-color: var(--background-color-purple-30);
+    }
+
+    &:is(:disabled, .disabled) {
+      --color: var(--color-grey-400);
+      --background-color: transparent;
+    }
+  }
+
+  &.success {
+    & {
+      --color: var(--color-green-base);
+      --background-color: transparent;
+      --dot-color: var(--color-red-base);
+    }
+
+    &:is(.active, .selected) {
+      --color: var(--color-green-base);
+      --background-color: var(--background-color-green-10);
+    }
+
+    &:is(:hover, .hover, :focus-visible) {
+      --color: var(--color-green-d20);
+      --background-color: var(--background-color-green-20);
+    }
+
+    &:is(:active, .pressed) {
+      --color: var(--color-green-d40);
+      --background-color: var(--background-color-green-30);
+    }
+
+    &:is(:disabled, .disabled) {
+      --color: var(--color-green-l60);
+      --background-color: transparent;
+    }
+  }
+
+  &.warning {
+    & {
+      --color: var(--color-orange-base);
+      --background-color: transparent;
+      --dot-color: var(--color-red-base);
+    }
+
+    &:is(.active, .selected) {
+      --color: var(--color-orange-base);
+      --background-color: var(--background-color-orange-10);
+    }
+
+    &:is(:hover, .hover, :focus-visible) {
+      --color: var(--color-orange-d20);
+      --background-color: var(--background-color-orange-20);
+    }
+
+    &:is(:active, .pressed) {
+      --color: var(--color-orange-d40);
+      --background-color: var(--background-color-orange-30);
+    }
+
+    &:is(:disabled, .disabled) {
+      --color: var(--color-orange-l60);
+      --background-color: transparent;
+    }
+  }
+
+  &:is(.danger, .error) {
+    & {
+      --color: var(--color-red-base);
+      --background-color: transparent;
+      --dot-color: var(--color-orange-base);
+    }
+
+    &:is(.active, .selected) {
+      --color: var(--color-red-base);
+      --background-color: var(--background-color-red-10);
+    }
+
+    &:is(:hover, .hover, :focus-visible) {
+      --color: var(--color-red-d20);
+      --background-color: var(--background-color-red-20);
+    }
+
+    &:is(:active, .pressed) {
+      --color: var(--color-red-d40);
+      --background-color: var(--background-color-red-30);
+    }
+
+    &:is(:disabled, .disabled) {
+      --color: var(--color-red-l60);
+      --background-color: transparent;
+    }
+  }
+}
+
+/* SIZE VARIANTS */
+.button-icon {
+  &.small {
+    --size: 1.6rem;
+    --font-size: 1.2rem;
+    --dot-size: 0.4rem;
+    --dot-offset: 0.2rem;
+  }
+
+  &.medium {
+    --size: 2.4rem;
+    --font-size: 1.6rem;
+    --dot-size: 0.5rem;
+    --dot-offset: 0.4rem;
+  }
+
+  &.large {
+    --size: 4rem;
+    --font-size: 2.4rem;
+    --dot-size: 0.8rem;
+    --dot-offset: 0.8rem;
+  }
+}
+
+/* IMPLEMENTATION */
+.button-icon {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  padding: 0;
+  border-radius: 0.2rem;
+  width: var(--size);
+  height: var(--size);
+  font-size: var(--font-size);
+  color: var(--color);
+  background-color: var(--background-color);
+  position: relative;
+  cursor: pointer;
+  outline: none;
+
+  &:is(:disabled, .disabled) {
+    cursor: not-allowed;
+  }
+
+  .dot {
+    position: absolute;
+    display: block;
+    width: var(--dot-size);
+    height: var(--dot-size);
+    border-radius: 50%;
+    background-color: var(--dot-color);
+    top: var(--dot-offset);
+    right: var(--dot-offset);
+  }
+}
+</style>