@xen-orchestra/web-core 0.0.1

package/lib/components/button/UiButton.vue

@@ -0,0 +1,207 @@
+<!-- v1.0 -->
+<template>
+  <button :class="className" :disabled="busy || isDisabled" class="ui-button" type="button">
+    <UiIcon :busy :icon="leftIcon" class="icon" fixed-width />
+    <slot />
+    <UiIcon :icon="rightIcon" class="icon" fixed-width />
+  </button>
+</template>
+
+<script lang="ts" setup>
+import UiIcon from '@core/components/icon/UiIcon.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
+    busy?: boolean
+    disabled?: boolean
+    leftIcon?: IconDefinition
+    rightIcon?: IconDefinition
+    color?: Color
+    size?: ButtonSize
+  }>(),
+  {
+    disabled: undefined,
+    color: 'info',
+    level: 'primary',
+    size: 'small',
+  }
+)
+
+const isDisabled = useContext(DisabledContext, () => props.disabled)
+
+const fontClasses = {
+  'extra-small': 'typo p3-medium',
+  small: 'typo h6-medium',
+  medium: '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 {
+  &.info {
+    --accent-color: var(--color-purple-base);
+
+    &:is(:hover, .hover, :focus-visible) {
+      --accent-color: var(--color-purple-d20);
+    }
+
+    &:is(:active, .pressed) {
+      --accent-color: var(--color-purple-d40);
+    }
+
+    &:is(:disabled, .disabled) {
+      --accent-color: var(--color-grey-400);
+    }
+  }
+
+  &.success {
+    --accent-color: var(--color-green-base);
+
+    &:is(:hover, .hover, :focus-visible) {
+      --accent-color: var(--color-green-d20);
+    }
+
+    &:is(:active, .pressed) {
+      --accent-color: var(--color-green-d40);
+    }
+
+    &:is(:disabled, .disabled) {
+      --accent-color: var(--color-green-l60);
+    }
+  }
+
+  &.warning {
+    --accent-color: var(--color-orange-base);
+
+    &:is(:hover, .hover, :focus-visible) {
+      --accent-color: var(--color-orange-d20);
+    }
+
+    &:is(:active, .pressed) {
+      --accent-color: var(--color-orange-d40);
+    }
+
+    &:is(:disabled, .disabled) {
+      --accent-color: var(--color-orange-l60);
+    }
+  }
+
+  &:is(.danger, .error) {
+    --accent-color: var(--color-red-base);
+
+    &:is(:hover, .hover, :focus-visible) {
+      --accent-color: var(--color-red-d20);
+    }
+
+    &:is(:active, .pressed) {
+      --accent-color: var(--color-red-d40);
+    }
+
+    &:is(:disabled, .disabled) {
+      --accent-color: var(--color-red-l60);
+    }
+  }
+}
+
+/* SIZE VARIANTS */
+.ui-button {
+  &.extra-small {
+    --padding: 0.4rem 0.8rem;
+
+    &.tertiary {
+      --padding: 0;
+    }
+  }
+
+  &.small {
+    --padding: 0.8rem 1.6rem;
+
+    &.tertiary {
+      --padding: 0.2rem 0;
+    }
+  }
+
+  &.medium {
+    --padding: 1.6rem 2.4rem;
+
+    &.tertiary {
+      --padding: 0.4rem 0;
+    }
+  }
+}
+
+/* LEVELS VARIANTS */
+.ui-button {
+  &.primary {
+    --color: var(--color-grey-600);
+    --background-color: var(--accent-color);
+    --border-color: var(--accent-color);
+    --border-style: solid;
+    --border-radius: 0.8rem;
+  }
+
+  &.secondary {
+    --color: var(--accent-color);
+    --background-color: var(--background-color-primary);
+    --border-color: var(--accent-color);
+    --border-style: solid;
+    --border-radius: 0.8rem;
+  }
+
+  &.tertiary {
+    --color: var(--accent-color);
+    --background-color: transparent;
+    --border-color: var(--accent-color);
+    --border-style: none none solid;
+    --border-radius: 0;
+  }
+}
+
+/* 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: var(--border-style);
+  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/chip/ChipIcon.vue

@@ -0,0 +1,29 @@
+<template>
+  <UiIcon :class="{ disabled }" :color :icon class="chip-icon" fixed-width />
+</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'
+
+defineProps<{
+  color: Color
+  icon?: IconDefinition
+  disabled?: boolean
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.chip-icon {
+  color: var(--color-grey-200);
+
+  &.disabled {
+    color: var(--color-grey-600);
+
+    &.info {
+      color: var(--color-grey-400);
+    }
+  }
+}
+</style>

package/lib/components/chip/ChipRemoveIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <ButtonIcon :color :icon="faXmark" class="chip-remove-icon" size="small" />
+</template>
+
+<script lang="ts" setup>
+import ButtonIcon from '@core/components/button/ButtonIcon.vue'
+import type { Color } from '@core/types/color.type'
+import { faXmark } from '@fortawesome/free-solid-svg-icons'
+
+defineProps<{
+  color: Color
+}>()
+</script>

package/lib/components/chip/UiChip.vue

@@ -0,0 +1,138 @@
+<!-- v1.1 -->
+<template>
+  <span :class="[color, { disabled }]" class="ui-chip typo p3-regular" @click="emit('edit')">
+    <ChipIcon :color :disabled :icon />
+    <span class="content">
+      <slot />
+    </span>
+    <ChipRemoveIcon v-if="!disabled" :color @click.stop="emit('remove')" />
+  </span>
+</template>
+
+<script lang="ts" setup>
+import ChipIcon from '@core/components/chip/ChipIcon.vue'
+import ChipRemoveIcon from '@core/components/chip/ChipRemoveIcon.vue'
+import type { Color } from '@core/types/color.type'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+
+withDefaults(
+  defineProps<{
+    icon?: IconDefinition
+    color?: Color
+    disabled?: boolean
+  }>(),
+  { color: 'info' }
+)
+
+const emit = defineEmits<{
+  (event: 'edit'): void
+  (event: 'remove'): void
+}>()
+</script>
+
+<style lang="postcss" scoped>
+/* COLOR VARIANTS */
+.ui-chip {
+  --color: var(--color-grey-100);
+
+  &.disabled {
+    --color: var(--color-grey-600);
+
+    &.info {
+      --color: var(--color-grey-300);
+    }
+  }
+}
+
+/* BACKGROUND COLOR VARIANTS */
+.ui-chip {
+  &.info {
+    --background-color: var(--background-color-purple-10);
+
+    &:is(:hover, .hover, :focus-visible) {
+      --background-color: var(--background-color-purple-20);
+    }
+
+    &:is(:active, .pressed) {
+      --background-color: var(--background-color-purple-30);
+    }
+
+    &.disabled {
+      --background-color: var(--background-color-secondary);
+    }
+  }
+
+  &.success {
+    --background-color: var(--background-color-green-10);
+
+    &:is(:hover, .hover, :focus-visible) {
+      --background-color: var(--background-color-green-20);
+    }
+
+    &:is(:active, .pressed) {
+      --background-color: var(--background-color-green-30);
+    }
+
+    &.disabled {
+      --background-color: var(--color-green-l60);
+    }
+  }
+
+  &.warning {
+    --background-color: var(--background-color-orange-10);
+
+    &:is(:hover, .hover, :focus-visible) {
+      --background-color: var(--background-color-orange-20);
+    }
+
+    &:is(:active, .pressed) {
+      --background-color: var(--background-color-orange-30);
+    }
+
+    &.disabled {
+      --background-color: var(--color-orange-l60);
+    }
+  }
+
+  &:is(.danger, .error) {
+    --background-color: var(--background-color-red-10);
+
+    &:is(:hover, .hover, :focus-visible) {
+      --background-color: var(--background-color-red-20);
+    }
+
+    &:is(:active, .pressed) {
+      --background-color: var(--background-color-red-30);
+    }
+
+    &.disabled {
+      --background-color: var(--color-red-l60);
+    }
+  }
+}
+
+/* IMPLEMENTATION */
+.ui-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.8rem;
+  padding: 0.4rem 0.8rem;
+  border-radius: 10rem;
+  color: var(--color);
+  background-color: var(--background-color);
+  cursor: pointer;
+  min-height: 2.4rem;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  &.disabled {
+    pointer-events: none;
+  }
+
+  .content {
+    line-height: 1.6rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+</style>

package/lib/components/dropdown/DropdownItem.vue

@@ -0,0 +1,192 @@
+<template>
+  <div v-tooltip="{ selector: '.label' }" :class="[color, { disabled, selected }]" class="dropdown-item">
+    <UiIcon v-if="checkbox" :color="color ?? 'info'" :icon="selected ? faSquareCheck : faSquare" />
+    <slot name="icon">
+      <UiIcon :icon />
+    </slot>
+    <div class="label p2 medium">
+      <slot />
+    </div>
+    <div v-if="info" class="info-text p3 italic">{{ info }}</div>
+    <UiIcon v-if="arrow" :color="disabled ? undefined : 'info'" :icon="faAngleRight" class="right-icon" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UiIcon from '@core/components/icon/UiIcon.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import type { Color } from '@core/types/color.type'
+import { IK_DROPDOWN_CHECKBOX } from '@core/utils/injection-keys.util'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { faSquare } from '@fortawesome/free-regular-svg-icons'
+import { faAngleRight, faSquareCheck } from '@fortawesome/free-solid-svg-icons'
+import { computed, inject } from 'vue'
+
+defineProps<{
+  arrow?: boolean
+  color?: Color
+  disabled?: boolean
+  icon?: IconDefinition
+  info?: string
+  selected?: boolean
+}>()
+
+const checkbox = inject(
+  IK_DROPDOWN_CHECKBOX,
+  computed(() => false)
+)
+</script>
+
+<style lang="postcss" scoped>
+/* COLOR VARIANTS */
+.dropdown-item {
+  & {
+    --color: var(--color-grey-100);
+    --background-color: var(--background-color-primary);
+
+    &:is(.active, .selected) {
+      --color: var(--color-grey-100);
+      --background-color: var(--background-color-purple-10);
+    }
+
+    &:is(:hover, .hover, :focus-visible) {
+      --color: var(--color-grey-100);
+      --background-color: var(--background-color-purple-20);
+    }
+
+    &:is(:active, .pressed) {
+      --color: var(--color-grey-100);
+      --background-color: var(--background-color-purple-30);
+    }
+
+    &.disabled {
+      --color: var(--color-grey-400);
+      --background-color: var(--background-color-primary);
+    }
+  }
+
+  &.info {
+    --color: var(--color-purple-base);
+    --background-color: var(--background-color-primary);
+
+    &: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);
+    }
+
+    &.disabled {
+      --color: var(--color-purple-l60);
+      --background-color: var(--background-color-primary);
+    }
+  }
+
+  &.success {
+    --color: var(--color-green-base);
+    --background-color: var(--background-color-primary);
+
+    &: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);
+    }
+
+    &.disabled {
+      --color: var(--color-green-l60);
+      --background-color: var(--background-color-primary);
+    }
+  }
+
+  &.warning {
+    --color: var(--color-orange-base);
+    --background-color: var(--background-color-primary);
+
+    &: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);
+    }
+
+    &.disabled {
+      --color: var(--color-orange-l60);
+      --background-color: var(--background-color-primary);
+    }
+  }
+
+  &:is(.error, .danger) {
+    --color: var(--color-red-base);
+    --background-color: var(--background-color-primary);
+
+    &: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);
+    }
+
+    &.disabled {
+      --color: var(--color-red-l60);
+      --background-color: var(--background-color-primary);
+    }
+  }
+}
+
+/* IMPLEMENTATION */
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  padding: 0.8rem;
+  gap: 0.8rem;
+  height: 3.7rem;
+  color: var(--color);
+  background: var(--background-color);
+  border-radius: 0.4rem;
+  margin: 0 0.4rem;
+}
+
+.label {
+  margin-right: auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.info-text {
+  color: var(--color-grey-300);
+}
+</style>

package/lib/components/dropdown/DropdownList.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="dropdown-list">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { IK_DROPDOWN_CHECKBOX } from '@core/utils/injection-keys.util'
+import { computed, provide } from 'vue'
+
+const props = defineProps<{
+  checkbox?: boolean
+}>()
+
+provide(
+  IK_DROPDOWN_CHECKBOX,
+  computed(() => props.checkbox)
+)
+</script>
+
+<style lang="postcss" scoped>
+.dropdown-list {
+  display: flex;
+  flex-direction: column;
+  padding: 0.4rem 0;
+  gap: 0.2rem;
+  border-radius: 0.4rem;
+  background: var(--background-color-primary);
+  box-shadow: var(--shadow-300);
+}
+</style>

package/lib/components/dropdown/DropdownTitle.vue

@@ -0,0 +1,65 @@
+<!--
+ "Select all" / "Deselect all" spans are temporary, until we have a tertiary button
+ TODO: Replace `span` with `UiButton` when new version (with tertiary) is available
+ -->
+<template>
+  <div class="dropdown-title">
+    <UiIcon :icon />
+    <div class="label c3 semi-bold">
+      <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>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UiIcon from '@core/components/icon/UiIcon.vue'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+
+withDefaults(
+  defineProps<{
+    icon?: IconDefinition
+    selected?: 'all' | 'some' | 'none'
+    onToggleSelectAll?: (value: boolean) => void
+  }>(),
+  { selected: 'none' }
+)
+
+const emit = defineEmits<{
+  (event: 'toggleSelectAll', value: boolean): void
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.dropdown-title {
+  display: flex;
+  align-items: center;
+  padding: 0.4rem 1.6rem;
+  gap: 0.8rem;
+  height: 2.6rem;
+  background: var(--background-color-secondary);
+}
+
+.buttons {
+  display: flex;
+  gap: 0.8rem;
+  margin-left: auto;
+
+  span {
+    cursor: pointer;
+    text-decoration: underline;
+    color: var(--color-purple-base);
+
+    &:hover {
+      color: var(--color-purple-l20);
+    }
+
+    &:active {
+      color: var(--color-purple-l40);
+    }
+  }
+}
+</style>