@xen-orchestra/web-core 0.3.0 → 0.5.0

package/lib/components/ui/checkbox/UiCheckbox.vue

@@ -0,0 +1,410 @@
+<!-- v3 -->
+<template>
+  <label class="ui-checkbox" :class="classNames" v-bind="wrapperAttrs">
+    <input
+      v-model="checkboxModel"
+      :class="{ indeterminate: isIndeterminate }"
+      :disabled="isDisabled"
+      type="checkbox"
+      class="input"
+      v-bind="attrs"
+    />
+    <span class="fake-checkbox">
+      <VtsIcon :icon class="icon" accent="info" />
+    </span>
+    <span v-if="slots.default" class="typo p1-regular">
+      <slot />
+    </span>
+  </label>
+  <UiInfo v-if="slots.info" :accent>
+    <slot name="info" />
+  </UiInfo>
+</template>
+
+<script lang="ts" setup>
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import UiInfo from '@core/components/ui/info/UiInfo.vue'
+import { useContext } from '@core/composables/context.composable'
+import { DisabledContext } from '@core/context'
+import { toVariants } from '@core/utils/to-variants.util'
+import { faCheck, faMinus } from '@fortawesome/free-solid-svg-icons'
+import { computed, type LabelHTMLAttributes, useAttrs } from 'vue'
+
+type CheckboxAccent = 'info' | 'success' | 'warning' | 'danger'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    accent: CheckboxAccent
+    disabled?: boolean
+    wrapperAttrs?: LabelHTMLAttributes
+  }>(),
+  { disabled: undefined }
+)
+
+const checkboxModel = defineModel<boolean | undefined>({ default: undefined })
+
+const slots = defineSlots<{
+  default?(): any
+  info?(): any
+}>()
+
+const isDisabled = useContext(DisabledContext, () => props.disabled)
+
+const classNames = computed(() => [
+  toVariants({
+    accent: props.accent,
+    disabled: isDisabled.value,
+  }),
+])
+
+const isIndeterminate = computed(() => checkboxModel.value === undefined)
+
+const icon = computed(() => {
+  if (isIndeterminate.value) {
+    return faMinus
+  }
+
+  return faCheck
+})
+
+const attrs = useAttrs()
+</script>
+
+<style lang="postcss" scoped>
+.ui-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.8rem;
+
+  .fake-checkbox {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 1.6rem;
+    width: 1.6rem;
+    transition:
+      background-color 0.125s ease-in-out,
+      border-color 0.125s ease-in-out;
+    border: 0.2rem solid transparent;
+    border-radius: 0.2rem;
+
+    .icon {
+      font-size: 0.75rem;
+      position: absolute;
+      color: var(--color-info-txt-item);
+      transition: opacity 0.125s ease-in-out;
+    }
+  }
+
+  .input {
+    font-size: inherit;
+    position: absolute;
+    pointer-events: none;
+    opacity: 0;
+
+    &.indeterminate + .fake-checkbox > .icon {
+      opacity: 1;
+      color: var(--color-info-txt-item);
+    }
+
+    & + .fake-checkbox > .icon {
+      opacity: 0;
+    }
+
+    &:checked + .fake-checkbox > .icon {
+      opacity: 1;
+    }
+
+    &:focus-visible + .fake-checkbox {
+      outline: none;
+
+      &::before {
+        content: '';
+        position: absolute;
+        inset: -0.5rem;
+        border-radius: 0.4rem;
+        border-width: 0.2rem;
+        border-style: solid;
+      }
+    }
+  }
+
+  &.accent--info {
+    .input {
+      & + .fake-checkbox {
+        border-color: var(--color-info-item-base);
+      }
+
+      &.indeterminate + .fake-checkbox {
+        background-color: var(--color-info-item-base);
+
+        &:hover {
+          border-color: transparent;
+          background-color: var(--color-info-item-hover);
+        }
+
+        &:active {
+          background-color: var(--color-info-item-active);
+        }
+      }
+
+      &.indeterminate:hover + .fake-checkbox {
+        border-color: transparent;
+        background-color: var(--color-info-item-hover);
+      }
+
+      &:hover + .fake-checkbox {
+        border-color: var(--color-info-item-hover);
+      }
+
+      &:focus-visible + .fake-checkbox::before {
+        border: 0.2rem solid var(--color-info-txt-base);
+      }
+
+      &:active + .fake-checkbox {
+        border-color: var(--color-info-item-active);
+      }
+
+      &:checked + .fake-checkbox {
+        border-color: transparent;
+        background-color: var(--color-info-item-base);
+      }
+
+      &:checked:hover + .fake-checkbox {
+        background-color: var(--color-info-item-hover);
+      }
+
+      &:checked:active + .fake-checkbox {
+        background-color: var(--color-info-item-active);
+      }
+
+      &:disabled {
+        & + .fake-checkbox {
+          cursor: not-allowed;
+          border-color: var(--color-neutral-txt-secondary);
+
+          > .icon {
+            color: var(--color-neutral-txt-secondary);
+          }
+        }
+
+        &:checked + .fake-checkbox,
+        &.indeterminate + .fake-checkbox {
+          border-color: transparent;
+          background-color: var(--color-info-item-disabled);
+        }
+      }
+    }
+  }
+
+  &.accent--success {
+    .input {
+      & + .fake-checkbox {
+        border-color: var(--color-success-item-base);
+      }
+
+      &.indeterminate + .fake-checkbox {
+        background-color: var(--color-success-item-base);
+
+        &:hover {
+          border-color: transparent;
+          background-color: var(--color-success-item-hover);
+        }
+
+        &:active {
+          background-color: var(--color-success-item-active);
+        }
+      }
+
+      &.indeterminate:hover + .fake-checkbox {
+        border-color: transparent;
+        background-color: var(--color-success-item-hover);
+      }
+
+      &:hover + .fake-checkbox {
+        border-color: var(--color-success-item-hover);
+      }
+
+      &:focus-visible + .fake-checkbox::before {
+        border: 0.2rem solid var(--color-success-txt-base);
+      }
+
+      &:active + .fake-checkbox {
+        border-color: var(--color-success-item-active);
+      }
+
+      &:checked + .fake-checkbox {
+        border-color: transparent;
+        background-color: var(--color-success-item-base);
+      }
+
+      &:checked:hover + .fake-checkbox {
+        background-color: var(--color-success-item-hover);
+      }
+
+      &:checked:active + .fake-checkbox {
+        background-color: var(--color-success-item-active);
+      }
+
+      &:disabled {
+        & + .fake-checkbox {
+          cursor: not-allowed;
+          border-color: var(--color-neutral-txt-secondary);
+
+          > .icon {
+            color: var(--color-neutral-txt-secondary);
+          }
+        }
+
+        &:checked + .fake-checkbox,
+        &.indeterminate + .fake-checkbox {
+          border-color: transparent;
+          background-color: var(--color-success-item-disabled);
+        }
+      }
+    }
+  }
+
+  &.accent--warning {
+    .input {
+      & + .fake-checkbox {
+        border-color: var(--color-warning-item-base);
+      }
+
+      &.indeterminate + .fake-checkbox {
+        background-color: var(--color-warning-item-base);
+
+        &:hover {
+          border-color: transparent;
+          background-color: var(--color-warning-item-hover);
+        }
+
+        &:active {
+          background-color: var(--color-warning-item-active);
+        }
+      }
+
+      &.indeterminate:hover + .fake-checkbox {
+        border-color: transparent;
+        background-color: var(--color-warning-item-hover);
+      }
+
+      &:hover + .fake-checkbox {
+        border-color: var(--color-warning-item-hover);
+      }
+
+      &:focus-visible + .fake-checkbox::before {
+        border: 0.2rem solid var(--color-warning-txt-base);
+      }
+
+      &:active + .fake-checkbox {
+        border-color: var(--color-warning-item-active);
+      }
+
+      &:checked + .fake-checkbox {
+        border-color: transparent;
+        background-color: var(--color-warning-item-base);
+      }
+
+      &:checked:hover + .fake-checkbox {
+        background-color: var(--color-warning-item-hover);
+      }
+
+      &:checked:active + .fake-checkbox {
+        background-color: var(--color-warning-item-active);
+      }
+
+      &:disabled {
+        & + .fake-checkbox {
+          cursor: not-allowed;
+          border-color: var(--color-neutral-txt-secondary);
+
+          > .icon {
+            color: var(--color-neutral-txt-secondary);
+          }
+        }
+
+        &:checked + .fake-checkbox,
+        &.indeterminate + .fake-checkbox {
+          border-color: transparent;
+          background-color: var(--color-warning-item-disabled);
+        }
+      }
+    }
+  }
+
+  &.accent--danger {
+    .input {
+      & + .fake-checkbox {
+        border-color: var(--color-danger-item-base);
+
+        > .icon {
+          color: var(--color-danger-txt-item);
+        }
+      }
+
+      &.indeterminate + .fake-checkbox {
+        background-color: var(--color-danger-item-base);
+
+        &:hover {
+          border-color: transparent;
+          background-color: var(--color-danger-item-hover);
+        }
+
+        &:active {
+          background-color: var(--color-danger-item-active);
+        }
+      }
+
+      &.indeterminate:hover + .fake-checkbox {
+        border-color: transparent;
+        background-color: var(--color-danger-item-hover);
+      }
+
+      &:hover + .fake-checkbox {
+        border-color: var(--color-danger-item-hover);
+      }
+
+      &:focus-visible + .fake-checkbox::before {
+        border: 0.2rem solid var(--color-danger-txt-base);
+      }
+
+      &:active + .fake-checkbox {
+        border-color: var(--color-danger-item-active);
+      }
+
+      &:checked + .fake-checkbox {
+        border-color: transparent;
+        background-color: var(--color-danger-item-base);
+      }
+
+      &:checked:hover + .fake-checkbox {
+        background-color: var(--color-danger-item-hover);
+      }
+
+      &:checked:active + .fake-checkbox {
+        background-color: var(--color-danger-item-active);
+      }
+
+      &:disabled {
+        & + .fake-checkbox {
+          cursor: not-allowed;
+          border-color: var(--color-neutral-txt-secondary);
+
+          > .icon {
+            color: var(--color-neutral-txt-secondary);
+          }
+        }
+
+        &:checked + .fake-checkbox,
+        &.indeterminate + .fake-checkbox {
+          border-color: transparent;
+          background-color: var(--color-danger-item-disabled);
+        }
+      }
+    }
+  }
+}
+</style>

package/lib/components/ui/checkbox-group/UiCheckboxGroup.vue

@@ -0,0 +1,57 @@
+<!-- v1 -->
+<template>
+  <div class="ui-checkbox-group">
+    <slot v-if="slots.label || label !== undefined" name="label">
+      <UiLabel :accent="labelAccent">
+        {{ label }}
+      </UiLabel>
+    </slot>
+    <div class="group" :class="{ vertical }">
+      <slot />
+    </div>
+    <slot v-if="slots.info || info !== undefined" name="info">
+      <UiInfo :accent>
+        {{ info }}
+      </UiInfo>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import UiInfo from '@core/components/ui/info/UiInfo.vue'
+import UiLabel from '@core/components/ui/label/UiLabel.vue'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  accent: 'info' | 'warning' | 'danger'
+  label?: string
+  info?: string
+  vertical?: boolean
+}>()
+
+const slots = defineSlots<{
+  default(): any
+  label?(): any
+  info?(): any
+}>()
+
+const labelAccent = computed(() => (props.accent === 'info' ? 'neutral' : props.accent))
+</script>
+
+<style scoped lang="postcss">
+.ui-checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+
+  .group {
+    display: flex;
+    gap: 6.4rem;
+
+    &.vertical {
+      flex-direction: column;
+      gap: 0.8rem;
+    }
+  }
+}
+</style>

package/lib/components/ui/chip/ChipIcon.vue

@@ -0,0 +1,21 @@
+<template>
+  <VtsIcon :class="{ muted: disabled }" accent="current" :icon class="chip-icon" fixed-width />
+</template>
+
+<script lang="ts" setup>
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+
+defineProps<{
+  icon?: IconDefinition
+  disabled?: boolean
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.chip-icon {
+  &.muted {
+    color: var(--color-neutral-txt-secondary);
+  }
+}
+</style>

package/lib/components/ui/chip/ChipRemoveIcon.vue

@@ -0,0 +1,13 @@
+<template>
+  <VtsButtonIcon :accent :icon="faXmark" size="small" />
+</template>
+
+<script lang="ts" setup>
+import VtsButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import type { ChipAccent } from '@core/components/ui/chip/UiChip.vue'
+import { faXmark } from '@fortawesome/free-solid-svg-icons'
+
+defineProps<{
+  accent: ChipAccent
+}>()
+</script>

package/lib/components/ui/chip/UiChip.vue

@@ -0,0 +1,135 @@
+<!-- v4 -->
+<template>
+  <span :class="classNames" class="ui-chip typo p3-regular" @click="emit('edit')">
+    <ChipIcon :disabled :icon />
+    <span class="content text-ellipsis">
+      <slot />
+    </span>
+    <ChipRemoveIcon v-if="!disabled" :accent @click.stop="emit('remove')" />
+  </span>
+</template>
+
+<script lang="ts" setup>
+import ChipIcon from '@core/components/ui/chip/ChipIcon.vue'
+import ChipRemoveIcon from '@core/components/ui/chip/ChipRemoveIcon.vue'
+import { toVariants } from '@core/utils/to-variants.util'
+import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
+import { computed } from 'vue'
+
+export type ChipAccent = 'info' | 'success' | 'warning' | 'danger'
+
+const props = defineProps<{
+  accent: ChipAccent
+  icon?: IconDefinition
+  disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+  edit: []
+  remove: []
+}>()
+
+defineSlots<{
+  default(): any
+}>()
+
+const classNames = computed(() => {
+  return [
+    toVariants({
+      accent: props.accent,
+      muted: props.disabled,
+    }),
+  ]
+})
+</script>
+
+<style lang="postcss" scoped>
+.ui-chip {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  padding: 0.4rem 0.8rem;
+  border-radius: 10rem;
+  color: var(--color-neutral-txt-primary);
+  cursor: pointer;
+  min-height: 2.4rem;
+  vertical-align: middle;
+  white-space: nowrap;
+  min-width: 0;
+
+  &.muted {
+    color: var(--color-neutral-txt-secondary);
+    pointer-events: none;
+  }
+
+  .content {
+    line-height: 1.6rem;
+  }
+
+  /* COLOR VARIANTS */
+
+  &.accent--info {
+    background-color: var(--color-info-background-selected);
+
+    &:is(:hover, :focus-visible) {
+      background-color: var(--color-info-background-hover);
+    }
+
+    &:active {
+      background-color: var(--color-info-background-active);
+    }
+
+    &.muted {
+      background-color: var(--color-info-item-disabled);
+    }
+  }
+
+  &.accent--success {
+    background-color: var(--color-success-background-selected);
+
+    &:is(:hover, :focus-visible) {
+      background-color: var(--color-success-background-hover);
+    }
+
+    &:active {
+      background-color: var(--color-success-background-active);
+    }
+
+    &.muted {
+      background-color: var(--color-success-item-disabled);
+    }
+  }
+
+  &.accent--warning {
+    background-color: var(--color-warning-background-selected);
+
+    &:is(:hover, :focus-visible) {
+      background-color: var(--color-warning-background-hover);
+    }
+
+    &:active {
+      background-color: var(--color-warning-background-active);
+    }
+
+    &.muted {
+      background-color: var(--color-warning-item-disabled);
+    }
+  }
+
+  &.accent--danger {
+    background-color: var(--color-danger-background-selected);
+
+    &:is(:hover, :focus-visible) {
+      background-color: var(--color-danger-background-hover);
+    }
+
+    &:active {
+      background-color: var(--color-danger-background-active);
+    }
+
+    &.muted {
+      background-color: var(--color-danger-item-disabled);
+    }
+  }
+}
+</style>

package/lib/components/{icon/ComplexIcon.vue → ui/complex-icon/UiComplexIcon.vue}

@@ -1,41 +1,21 @@
-<!-- v1.1 -->
+<!-- v2 -->
 <template>
-  <FontAwesomeLayers :class="size" class="complex-icon">
+  <FontAwesomeLayers :class="toVariants({ size })" class="ui-complex-icon">
     <slot />
   </FontAwesomeLayers>
 </template>
 
 <script lang="ts" setup>
+import { toVariants } from '@core/utils/to-variants.util'
 import { FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
 
-withDefaults(
-  defineProps<{
-    size?: 'small' | 'medium' | 'large'
-  }>(),
-  { size: 'medium' }
-)
+defineProps<{
+  size: 'small' | 'medium' | 'large'
+}>()
 </script>
 
 <style lang="postcss" scoped>
-/* SIZE VARIANTS */
-.complex-icon {
-  &.small {
-    --font-size: 1.2rem;
-  }
-
-  &.medium {
-    --font-size: 1.6rem;
-  }
-
-  &.large {
-    --font-size: 2rem;
-  }
-}
-
-/* IMPLEMENTATION */
-.complex-icon {
-  font-size: var(--font-size);
-
+.ui-complex-icon {
   :nth-child(2) {
     font-size: 0.5em;
     transform: translate(100%, 80%);
@@ -47,5 +27,19 @@ withDefaults(
       paint-order: stroke;
     }
   }
+
+  /*SIZE VARIANTS*/
+
+  &.size--small {
+    font-size: 1.2rem;
+  }
+
+  &.size--medium {
+    font-size: 1.6rem;
+  }
+
+  &.size--large {
+    font-size: 2rem;
+  }
 }
 </style>