@xen-orchestra/web-core 0.4.0 → 0.5.0

package/lib/types/subscribable-store.type.ts

@@ -15,7 +15,7 @@ export type Subscribe<TDefer extends boolean = false> = (options?: {
 
 export type SubscribableStoreConfig<TContext> = {
   context: TContext
-  onSubscribe: () => void
-  onUnsubscribe: () => void
+  onSubscribe?: () => void
+  onUnsubscribe?: () => void
   isEnabled?: MaybeRefOrGetter<boolean>
 }

package/lib/utils/create-subscribable-store-context.util.ts

@@ -60,7 +60,7 @@ export function createSubscribableStoreContext<TContext>(
   }
 
   return {
-    $context: config.context,
+    getContext: () => config.context,
     subscribe,
   }
 }

package/lib/utils/if-else.utils.md

@@ -0,0 +1,23 @@
+# `ifElse`
+
+`ifElse` utility is a wrapper around `watch`.
+
+It allows watching a `boolean` source and execute the first callback if the source is `true`, or the second one if the
+source is `false`.
+
+```ts
+ifElse(mySource, doSomething, doSomethingElse)
+ifElse(mySource, doSomething, doSomethingElse, { immediate: true })
+```
+
+## Example
+
+```ts
+const myValue = ref(5)
+
+ifElse(
+  () => myValue.value > 10,
+  () => console.log('myValue is greater than 10'),
+  () => console.log('myValue is less than or equal to 10')
+)
+```

package/lib/utils/if-else.utils.ts

@@ -6,8 +6,8 @@ export interface IfElseOptions extends Pick<WatchOptions, 'immediate'> {}
 
 export function ifElse(
   source: WatchSource<boolean>,
-  onTrue: MaybeArray<VoidFunction>,
-  onFalse: MaybeArray<VoidFunction>,
+  onTrue: MaybeArray<VoidFunction> | undefined,
+  onFalse: MaybeArray<VoidFunction> | undefined,
   options?: IfElseOptions
 ) {
   const onTrueFunctions = toArray(onTrue)

package/lib/utils/to-variants.util.md

@@ -0,0 +1,62 @@
+# toVariants utility
+
+This utility is used to convert a set of props into a list of CSS variants classes.
+
+- No class will be added for _falsy_ values
+- `<key>` class will be added for `true` values
+- `<key>--<value>` class will be added for other values
+
+## Basic usage
+
+```ts
+const props = defineProps<{
+  label: string
+  color: 'blue' | 'red'
+  size: 'small' | 'large'
+  disabled?: boolean
+}>()
+
+const variants = computed(() =>
+  toVariants({
+    color: props.color,
+    size: props.size,
+    disabled: props.disabled,
+  })
+)
+```
+
+If `color` is `'blue'`, `size` is `'small'`, and `disabled` is `false`,
+then `variants` will be `['color--blue', 'size--small']`.
+
+## Advanced usage
+
+Variants don't have to be based on props, you can define them the way you want.
+
+Thanks to the way Vue works, they can also be mixed with other classes.
+
+```ts
+const props = defineProps<{
+  label: string
+  color: 'blue' | 'red'
+  size: 'small' | 'large'
+}>()
+
+const isDisabled = inject('isParentDisabled', ref(false))
+
+const typoClasses = {
+  small: 'typo p3-regular',
+  large: 'typo p2-medium',
+}
+
+const classes = computed(() => [
+  typoClasses[props.size],
+  { disabled: isDisabled.value },
+  toVariants({
+    color: props.color,
+    size: props.size.slice(0, 1),
+    state: isDisabled.value ? 'off' : 'on',
+  }),
+])
+```
+
+`classes` applied to the component will then look like `typo p3-regular disabled color-blue size-s state-off`

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xen-orchestra/web-core",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": false,
   "exports": {
     "./*": {
@@ -23,19 +23,19 @@
     "placement.js": "^1.0.0-beta.5"
   },
   "peerDependencies": {
-    "pinia": "^2.1.7",
-    "vue": "~3.4.13",
+    "pinia": "^2.2.6",
+    "vue": "~3.5.12",
     "vue-i18n": "^9.9.0",
-    "vue-router": "^4.4.0"
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
     "@types/novnc__novnc": "^1.5.0",
     "@vue/tsconfig": "^0.5.1",
-    "pinia": "^2.1.7",
-    "vue": "~3.4.13",
+    "pinia": "^2.2.6",
+    "vue": "~3.5.12",
     "vue-i18n": "^9.9.0",
-    "vue-router": "^4.4.0"
+    "vue-router": "^4.4.5"
   },
   "homepage": "https://github.com/vatesfr/xen-orchestra/tree/master/@xen-orchestra/web-core",
   "bugs": "https://github.com/vatesfr/xen-orchestra/issues",

package/lib/components/CardNumbers.vue

@@ -1,101 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <div class="card-numbers" :class="size">
-    <span class="label typo" :class="labelFontClass">{{ label }}</span>
-    <div class="values" :class="size">
-      <span v-if="percentValue" class="value typo c2-semi-bold">
-        {{ percentValue }}
-      </span>
-
-      <div class="value typo" :class="valueFontClass">
-        {{ value ?? '-' }}<span class="unit typo" :class="unitFontClass">{{ unit }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts" generic="TSize extends 'small' | 'medium'">
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-interface CardNumbersProps {
-  label: string
-  size: TSize
-  value?: number
-  unit?: string
-  max?: TSize extends 'small' ? number : never
-}
-
-const props = defineProps<CardNumbersProps>()
-
-const { n } = useI18n()
-
-const labelFontClass = computed(() => (props.size === 'medium' ? 'c3-semi-bold' : 'c2-semi-bold'))
-
-const valueFontClass = computed(() => (props.size === 'medium' ? 'h3-semi-bold' : 'c2-semi-bold'))
-
-const unitFontClass = computed(() => (props.size === 'medium' ? 'p2-medium' : 'c2-semi-bold'))
-
-const percentValue = computed(() => {
-  if (props.size !== 'small' || props.max === undefined || props.max === 0) {
-    return undefined
-  }
-
-  if (props.value === undefined) {
-    return n(0, 'percent').replace('0', '-')
-  }
-
-  return n(props.value / props.max, 'percent')
-})
-</script>
-
-<style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.card-numbers {
-  &.small {
-    --label-color: var(--color-neutral-txt-primary);
-  }
-
-  &.medium {
-    --label-color: var(--color-neutral-txt-secondary);
-  }
-}
-
-/* IMPLEMENTATION */
-.card-numbers {
-  display: flex;
-  gap: 0.8rem;
-  width: fit-content;
-
-  &.medium {
-    flex-direction: column;
-    gap: 0.4rem;
-  }
-}
-
-.label {
-  color: var(--label-color);
-}
-
-.values {
-  display: flex;
-  flex-direction: column;
-  gap: 0.8rem;
-  align-items: flex-end;
-
-  &.medium {
-    align-items: flex-start;
-  }
-}
-
-.value {
-  color: var(--color-neutral-txt-primary);
-  display: flex;
-  gap: 0.2rem;
-  align-items: center;
-}
-
-.unit {
-  color: var(--color-neutral-txt-primary);
-}
-</style>

package/lib/components/PowerStateIcon.vue

@@ -1,46 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <VtsIcon :class="className" accent="current" :icon class="power-state-icon" />
-</template>
-
-<script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.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-normal-txt-item);
-  }
-
-  &.state-running {
-    color: var(--color-success-item-base);
-  }
-
-  &.state-paused {
-    color: var(--color-normal-item-active);
-  }
-
-  &.state-halted {
-    color: var(--color-danger-item-base);
-  }
-}
-</style>

package/lib/components/UiTag.vue

@@ -1,101 +0,0 @@
-<!-- v1.2 -->
-<template>
-  <span :class="[color, { light }]" class="ui-tag typo p3-regular">
-    <slot name="icon">
-      <VtsIcon :icon accent="current" fixed-width />
-    </slot>
-    <span class="text-ellipsis"><slot /></span>
-  </span>
-</template>
-
-<script lang="ts" setup>
-import VtsIcon from '@core/components/icon/VtsIcon.vue'
-import type { TagColor } from '@core/types/color.type'
-import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
-
-defineProps<{
-  color: TagColor
-  light?: boolean
-  icon?: IconDefinition
-}>()
-</script>
-
-<style lang="postcss" scoped>
-/* COLOR VARIANTS */
-.ui-tag {
-  &.primary {
-    --background-color: var(--color-normal-item-base);
-    --color: var(--color-normal-txt-item);
-
-    &.light {
-      --background-color: var(--color-normal-background-selected);
-      --color: var(--color-normal-txt-base);
-    }
-  }
-
-  &.secondary {
-    --background-color: var(--color-neutral-txt-primary);
-    --color: var(--color-neutral-background-primary);
-
-    &.light {
-      --background-color: var(--color-neutral-background-secondary);
-      --color: var(--color-neutral-txt-primary);
-    }
-  }
-
-  &.success {
-    --background-color: var(--color-success-item-base);
-    --color: var(--color-success-txt-item);
-
-    &.light {
-      --background-color: var(--color-success-background-selected);
-      --color: var(--color-success-txt-base);
-    }
-  }
-
-  &.warning {
-    --background-color: var(--color-warning-item-base);
-    --color: var(--color-warning-txt-item);
-
-    &.light {
-      --background-color: var(--color-warning-background-selected);
-      --color: var(--color-warning-txt-base);
-    }
-  }
-
-  &.danger {
-    --background-color: var(--color-danger-item-base);
-    --color: var(--color-danger-txt-item);
-
-    &.light {
-      --background-color: var(--color-danger-background-selected);
-      --color: var(--color-danger-txt-base);
-    }
-  }
-
-  &.disabled {
-    --background-color: var(--color-neutral-background-disabled);
-    --color: var(--color-neutral-txt-secondary);
-
-    &.light {
-      --background-color: var(--color-neutral-background-secondary);
-      --color: var(--color-neutral-txt-secondary);
-    }
-  }
-}
-
-/* IMPLEMENTATION */
-.ui-tag {
-  display: 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;
-  min-width: 0;
-}
-</style>

package/lib/components/backup-item/BackupItem.vue

@@ -1,40 +0,0 @@
-<!-- v1.0 -->
-<template>
-  <div class="backup-item">
-    <RouterLink v-if="backup.route !== undefined" :to="backup.route">
-      {{ backup.label }}
-    </RouterLink>
-    <p v-else class="typo p3-medium">
-      {{ backup.label }}
-    </p>
-    <div class="states">
-      <BackupState v-for="(state, index) in backup.states" :key="index" :state />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import BackupState from '@core/components/backup-state/BackupState.vue'
-import type { Backup } from '@core/types/backup.type'
-
-defineProps<{
-  backup: Backup
-}>()
-</script>
-
-<style lang="postcss" scoped>
-.backup-item {
-  padding: 0.8rem 0.4rem;
-  border-top: 0.1rem solid var(--color-neutral-border);
-  display: flex;
-  align-items: center;
-  gap: 0.2rem;
-}
-
-.states {
-  margin-inline-start: auto;
-  display: flex;
-  align-items: center;
-  gap: 0.2rem;
-}
-</style>

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>