@xen-orchestra/web-core 0.3.0 → 0.5.0

package/lib/components/button/ButtonIcon.vue

@@ -1,220 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <button :class="[color, size, { disabled, active }]" :disabled class="button-icon" type="button">
-    <VtsIcon :icon accent="current" />
-    <span v-if="dot" class="dot" />
-  </button>
-</template>
-
-<script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import type { Color } from '@core/types/color.type'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { computed } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    icon: IconDefinition
-    size?: 'small' | 'medium' | 'large'
-    color?: Color
-    disabled?: boolean
-    active?: boolean
-    dot?: boolean
-    targetScale?: number | { x: number; y: number }
-  }>(),
-  { color: 'normal', size: 'medium', targetScale: 1 }
-)
-
-const cssTargetScale = computed(() => {
-  if (typeof props.targetScale === 'number') {
-    return `scale(${props.targetScale})`
-  }
-
-  return `scale(${props.targetScale.x}, ${props.targetScale.y})`
-})
-</script>
-
-<style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.button-icon {
-  &.normal {
-    & {
-      --color: var(--color-normal-txt-base);
-      --background-color: transparent;
-      --dot-color: var(--color-danger-txt-base);
-    }
-
-    &:is(.active, .selected) {
-      --color: var(--color-normal-txt-base);
-      --background-color: var(--color-normal-background-selected);
-    }
-
-    &:is(:hover, .hover, :focus-visible) {
-      --color: var(--color-normal-txt-hover);
-      --background-color: var(--color-normal-background-hover);
-    }
-
-    &:is(:active, .pressed) {
-      --color: var(--color-normal-txt-active);
-      --background-color: var(--color-normal-background-active);
-    }
-
-    &:is(:disabled, .disabled) {
-      --color: var(--color-neutral-txt-secondary);
-      --background-color: transparent;
-    }
-  }
-
-  &.success {
-    & {
-      --color: var(--color-success-txt-base);
-      --background-color: transparent;
-      --dot-color: var(--color-danger-txt-base);
-    }
-
-    &:is(.active, .selected) {
-      --color: var(--color-success-txt-base);
-      --background-color: var(--color-success-background-selected);
-    }
-
-    &:is(:hover, .hover, :focus-visible) {
-      --color: var(--color-success-txt-hover);
-      --background-color: var(--color-success-background-hover);
-    }
-
-    &:is(:active, .pressed) {
-      --color: var(--color-success-txt-active);
-      --background-color: var(--color-success-background-active);
-    }
-
-    &:is(:disabled, .disabled) {
-      --color: var(--color-neutral-txt-secondary);
-      --background-color: transparent;
-    }
-  }
-
-  &.warning {
-    & {
-      --color: var(--color-warning-txt-base);
-      --background-color: transparent;
-      --dot-color: var(--color-danger-txt-base);
-    }
-
-    &:is(.active, .selected) {
-      --color: var(--color-warning-txt-base);
-      --background-color: var(--color-warning-background-selected);
-    }
-
-    &:is(:hover, .hover, :focus-visible) {
-      --color: var(--color-warning-txt-hover);
-      --background-color: var(--color-warning-background-hover);
-    }
-
-    &:is(:active, .pressed) {
-      --color: var(--color-warning-txt-active);
-      --background-color: var(--color-warning-background-active);
-    }
-
-    &:is(:disabled, .disabled) {
-      --color: var(--color-neutral-txt-secondary);
-      --background-color: transparent;
-    }
-  }
-
-  &:is(.danger, .error) {
-    & {
-      --color: var(--color-danger-txt-base);
-      --background-color: transparent;
-      --dot-color: var(--color-warning-txt-base);
-    }
-
-    &:is(.active, .selected) {
-      --color: var(--color-danger-txt-base);
-      --background-color: var(--color-danger-background-selected);
-    }
-
-    &:is(:hover, .hover, :focus-visible) {
-      --color: var(--color-danger-txt-hover);
-      --background-color: var(--color-danger-background-hover);
-    }
-
-    &:is(:active, .pressed) {
-      --color: var(--color-danger-txt-active);
-      --background-color: var(--color-danger-background-active);
-    }
-
-    &:is(:disabled, .disabled) {
-      --color: var(--color-neutral-txt-secondary);
-      --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);
-  }
-}
-
-/*
- * Increase the size of the clickable area,
- * without changing the padding of the ButtonIcon component
- */
-.button-icon::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  transform: v-bind(cssTargetScale);
-}
-</style>

package/lib/components/button/UiButton.vue

@@ -1,470 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <button :class="className" :disabled="busy || isDisabled" class="ui-button" type="button">
-    <VtsIcon :busy :icon="leftIcon" accent="current" class="icon" fixed-width />
-    <slot />
-    <VtsIcon :icon="rightIcon" accent="current" class="icon" fixed-width />
-  </button>
-</template>
-
-<script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
-import type { ButtonLevel, ButtonSize } from '@core/types/button.type'
-import type { Color } from '@core/types/color.type'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-import { computed } from 'vue'
-
-const props = withDefaults(
-  defineProps<{
-    level: ButtonLevel
-    color: Color
-    size: ButtonSize
-    busy?: boolean
-    disabled?: boolean
-    leftIcon?: IconDefinition
-    rightIcon?: IconDefinition
-  }>(),
-  {
-    disabled: undefined,
-  }
-)
-
-const isDisabled = useContext(DisabledContext, () => props.disabled)
-
-const fontClasses = {
-  small: 'typo p3-medium',
-  medium: 'typo h6-medium',
-  large: 'typo h3-semi-bold',
-}
-
-const className = computed(() => {
-  return [
-    props.color,
-    props.level,
-    props.size,
-    fontClasses[props.size],
-    {
-      busy: props.busy,
-      disabled: isDisabled.value,
-    },
-  ]
-})
-</script>
-
-<style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.ui-button {
-  &.primary {
-    &.normal {
-      --background-color: var(--color-normal-item-base);
-      --border-color: var(--color-normal-item-base);
-      --color: var(--color-normal-txt-item);
-
-      &:is(:hover, .hover, :focus-visible) {
-        --background-color: var(--color-normal-item-hover);
-        --border-color: var(--color-normal-item-hover);
-        --color: var(--color-normal-txt-item);
-      }
-
-      &:is(:active, .pressed) {
-        --background-color: var(--color-normal-item-active);
-        --border-color: var(--color-normal-item-active);
-        --color: var(--color-normal-txt-item);
-      }
-
-      &:is(:disabled, .disabled) {
-        --background-color: var(--color-normal-item-disabled);
-        --border-color: var(--color-normal-item-disabled);
-        --color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        --background-color: var(--color-normal-item-base);
-        --border-color: var(--color-normal-item-base);
-        --color: var(--color-normal-txt-item);
-      }
-    }
-
-    &.success {
-      --background-color: var(--color-success-item-base);
-      --border-color: var(--color-success-item-base);
-      --color: var(--color-success-txt-item);
-
-      &:is(:hover, .hover, :focus-visible) {
-        --background-color: var(--color-success-item-hover);
-        --border-color: var(--color-success-item-hover);
-        --color: var(--color-success-txt-item);
-      }
-
-      &:is(:active, .pressed) {
-        --background-color: var(--color-success-item-active);
-        --border-color: var(--color-success-item-active);
-        --color: var(--color-success-txt-item);
-      }
-
-      &:is(:disabled, .disabled) {
-        --background-color: var(--color-success-item-disabled);
-        --border-color: var(--color-success-item-disabled);
-        --color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        --background-color: var(--color-success-item-base);
-        --border-color: var(--color-success-item-base);
-        --color: var(--color-success-txt-item);
-      }
-    }
-
-    &.warning {
-      --background-color: var(--color-warning-item-base);
-      --border-color: var(--color-warning-item-base);
-      --color: var(--color-warning-txt-item);
-
-      &:is(:hover, .hover, :focus-visible) {
-        --background-color: var(--color-warning-item-hover);
-        --border-color: var(--color-warning-item-hover);
-        --color: var(--color-warning-txt-item);
-      }
-
-      &:is(:active, .pressed) {
-        --background-color: var(--color-warning-item-active);
-        --border-color: var(--color-warning-item-active);
-        --color: var(--color-warning-txt-item);
-      }
-
-      &:is(:disabled, .disabled) {
-        --background-color: var(--color-warning-item-disabled);
-        --border-color: var(--color-warning-item-disabled);
-        --color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        --background-color: var(--color-warning-item-base);
-        --border-color: var(--color-warning-item-base);
-        --color: var(--color-warning-txt-item);
-      }
-    }
-
-    &.danger {
-      --background-color: var(--color-danger-item-base);
-      --border-color: var(--color-danger-item-base);
-      --color: var(--color-danger-txt-item);
-
-      &:is(:hover, .hover, :focus-visible) {
-        --background-color: var(--color-danger-item-hover);
-        --border-color: var(--color-danger-item-hover);
-        --color: var(--color-danger-txt-item);
-      }
-
-      &:is(:active, .pressed) {
-        --background-color: var(--color-danger-item-active);
-        --border-color: var(--color-danger-item-active);
-        --color: var(--color-danger-txt-item);
-      }
-
-      &:is(:disabled, .disabled) {
-        --background-color: var(--color-danger-item-disabled);
-        --border-color: var(--color-danger-item-disabled);
-        --color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        --background-color: var(--color-danger-item-base);
-        --border-color: var(--color-danger-item-base);
-        --color: var(--color-danger-txt-item);
-      }
-    }
-  }
-
-  &.secondary {
-    &.normal {
-      --background-color: var(--color-neutral-background-primary);
-      --border-color: var(--color-normal-item-base);
-      --color: var(--color-normal-txt-base);
-
-      &:is(:hover, .hover, :focus-visible) {
-        --background-color: var(--color-neutral-background-primary);
-        --border-color: var(--color-normal-item-hover);
-        --color: var(--color-normal-txt-hover);
-      }
-
-      &:is(:active, .pressed) {
-        --background-color: var(--color-neutral-background-primary);
-        --border-color: var(--color-normal-item-active);
-        --color: var(--color-normal-txt-active);
-      }
-
-      &:is(:disabled, .disabled) {
-        --background-color: var(--color-neutral-background-disabled);
-        --border-color: var(--color-neutral-txt-secondary);
-        --color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        --background-color: var(--color-neutral-background-primary);
-        --border-color: var(--color-normal-item-base);
-        --color: var(--color-normal-txt-base);
-      }
-    }
-
-    &.success {
-      --background-color: var(--color-neutral-background-primary);
-      --border-color: var(--color-success-txt-base);
-      --color: var(--color-success-txt-base);
-
-      &:is(:hover, .hover, :focus-visible) {
-        --background-color: var(--color-neutral-background-primary);
-        --border-color: var(--color-success-txt-hover);
-        --color: var(--color-success-txt-hover);
-      }
-
-      &:is(:active, .pressed) {
-        --background-color: var(--color-neutral-background-primary);
-        --border-color: var(--color-success-txt-active);
-        --color: var(--color-success-txt-active);
-      }
-
-      &:is(:disabled, .disabled) {
-        --background-color: var(--color-neutral-background-disabled);
-        --border-color: var(--color-neutral-txt-secondary);
-        --color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        --background-color: var(--color-neutral-background-primary);
-        --border-color: var(--color-success-txt-base);
-        --color: var(--color-success-txt-base);
-      }
-    }
-
-    &.warning {
-      --background-color: var(--color-neutral-background-primary);
-      --border-color: var(--color-warning-txt-base);
-      --color: var(--color-warning-txt-base);
-
-      &:is(:hover, .hover, :focus-visible) {
-        --background-color: var(--color-neutral-background-primary);
-        --border-color: var(--color-warning-txt-hover);
-        --color: var(--color-warning-txt-hover);
-      }
-
-      &:is(:active, .pressed) {
-        --background-color: var(--color-neutral-background-primary);
-        --border-color: var(--color-warning-txt-active);
-        --color: var(--color-warning-txt-active);
-      }
-
-      &:is(:disabled, .disabled) {
-        --background-color: var(--color-neutral-background-disabled);
-        --border-color: var(--color-neutral-txt-secondary);
-        --color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        --background-color: var(--color-neutral-background-primary);
-        --border-color: var(--color-warning-txt-base);
-        --color: var(--color-warning-txt-base);
-      }
-    }
-
-    &.danger {
-      --background-color: var(--color-neutral-background-primary);
-      --border-color: var(--color-danger-txt-base);
-      --color: var(--color-danger-txt-base);
-
-      &:is(:hover, .hover, :focus-visible) {
-        --background-color: var(--color-neutral-background-primary);
-        --border-color: var(--color-danger-txt-hover);
-        --color: var(--color-danger-txt-hover);
-      }
-
-      &:is(:active, .pressed) {
-        --background-color: var(--color-neutral-background-primary);
-        --border-color: var(--color-danger-txt-active);
-        --color: var(--color-danger-txt-active);
-      }
-
-      &:is(:disabled, .disabled) {
-        --background-color: var(--color-neutral-background-disabled);
-        --border-color: var(--color-neutral-txt-secondary);
-        --color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        --background-color: var(--color-neutral-background-primary);
-        --border-color: var(--color-danger-txt-base);
-        --color: var(--color-danger-txt-base);
-      }
-    }
-  }
-
-  &.tertiary {
-    &.normal {
-      --background-color: transparent;
-      --border-color: transparent;
-      --color: var(--color-normal-txt-base);
-
-      &:is(:hover, .hover, :focus-visible) {
-        --background-color: var(--color-normal-background-hover);
-        --border-color: var(--color-normal-background-hover);
-        --color: var(--color-normal-txt-hover);
-      }
-
-      &:is(:active, .pressed) {
-        --background-color: var(--color-normal-background-active);
-        --border-color: var(--color-normal-background-active);
-        --color: var(--color-normal-txt-active);
-      }
-
-      &:is(:disabled, .disabled) {
-        --background-color: transparent;
-        --border-color: transparent;
-        --color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        --background-color: var(--color-normal-background-selected);
-        --border-color: var(--color-normal-background-selected);
-        --color: var(--color-normal-txt-base);
-      }
-    }
-
-    &.success {
-      --background-color: transparent;
-      --border-color: transparent;
-      --color: var(--color-success-txt-base);
-
-      &:is(:hover, .hover, :focus-visible) {
-        --background-color: var(--color-success-background-hover);
-        --border-color: var(--color-success-background-hover);
-        --color: var(--color-success-txt-hover);
-      }
-
-      &:is(:active, .pressed) {
-        --background-color: var(--color-success-background-active);
-        --border-color: var(--color-success-background-active);
-        --color: var(--color-success-txt-active);
-      }
-
-      &:is(:disabled, .disabled) {
-        --background-color: transparent;
-        --border-color: transparent;
-        --color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        --background-color: var(--color-success-background-selected);
-        --border-color: var(--color-success-background-selected);
-        --color: var(--color-success-txt-base);
-      }
-    }
-
-    &.warning {
-      --background-color: transparent;
-      --border-color: transparent;
-      --color: var(--color-warning-txt-base);
-
-      &:is(:hover, .hover, :focus-visible) {
-        --background-color: var(--color-warning-background-hover);
-        --border-color: var(--color-warning-background-hover);
-        --color: var(--color-warning-txt-hover);
-      }
-
-      &:is(:active, .pressed) {
-        --background-color: var(--color-warning-background-active);
-        --border-color: var(--color-warning-background-active);
-        --color: var(--color-warning-txt-active);
-      }
-
-      &:is(:disabled, .disabled) {
-        --background-color: transparent;
-        --border-color: transparent;
-        --color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        --background-color: var(--color-warning-background-selected);
-        --border-color: var(--color-warning-background-selected);
-        --color: var(--color-warning-txt-base);
-      }
-    }
-
-    &.danger {
-      --background-color: transparent;
-      --border-color: transparent;
-      --color: var(--color-danger-txt-base);
-
-      &:is(:hover, .hover, :focus-visible) {
-        --background-color: var(--color-danger-background-hover);
-        --border-color: var(--color-danger-background-hover);
-        --color: var(--color-danger-txt-hover);
-      }
-
-      &:is(:active, .pressed) {
-        --background-color: var(--color-danger-background-active);
-        --border-color: var(--color-danger-background-active);
-        --color: var(--color-danger-txt-active);
-      }
-
-      &:is(:disabled, .disabled) {
-        --background-color: transparent;
-        --border-color: transparent;
-        --color: var(--color-neutral-txt-secondary);
-      }
-
-      &.busy {
-        --background-color: var(--color-danger-background-selected);
-        --border-color: var(--color-danger-background-selected);
-        --color: var(--color-danger-txt-base);
-      }
-    }
-  }
-}
-
-/* SIZE VARIANTS */
-.ui-button {
-  &.small {
-    --padding: 0.4rem 0.8rem;
-    --border-radius: 0.2rem;
-  }
-
-  &.medium {
-    --padding: 0.8rem 1.6rem;
-    --border-radius: 0.4rem;
-  }
-
-  &.large {
-    --padding: 1.6rem 2.4rem;
-    --border-radius: 0.8rem;
-  }
-}
-
-/* IMPLEMENTATION */
-.ui-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  vertical-align: middle;
-  gap: 0.75em;
-  border-width: 0.1rem;
-  outline: none;
-  border-color: var(--border-color);
-  border-radius: var(--border-radius);
-  border-style: solid;
-  color: var(--color);
-  background-color: var(--background-color);
-  padding: var(--padding);
-
-  &.busy,
-  &.disabled {
-    cursor: not-allowed;
-  }
-}
-
-.icon {
-  font-size: 0.8em;
-}
-</style>

package/lib/components/card/CardSubtitle.vue

@@ -1,24 +0,0 @@
-<!-- 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-normal-txt-base);
-  border-bottom: 0.1rem solid var(--color-normal-txt-base);
-  display: flex;
-  justify-content: space-between;
-  gap: 0.8rem;
-}
-</style>