@xen-orchestra/web-core 0.10.0 → 0.12.0

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

@@ -1,16 +1,16 @@
 <!-- v3 -->
 <template>
-  <label class="ui-checkbox" :class="classNames" v-bind="wrapperAttrs">
+  <label :class="classNames" class="ui-checkbox" v-bind="wrapperAttrs">
     <input
       v-model="checkboxModel"
       :class="{ indeterminate: isIndeterminate }"
       :disabled="isDisabled"
-      type="checkbox"
       class="input"
+      type="checkbox"
       v-bind="attrs"
     />
     <span class="fake-checkbox">
-      <VtsIcon :icon class="icon" accent="info" />
+      <VtsIcon :icon accent="info" class="icon" />
     </span>
     <span v-if="slots.default" class="typo p1-regular">
       <slot />
@@ -24,8 +24,7 @@
 <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 { useDisabled } from '@core/composables/disabled.composable'
 import { toVariants } from '@core/utils/to-variants.util'
 import { faCheck, faMinus } from '@fortawesome/free-solid-svg-icons'
 import { computed, type LabelHTMLAttributes, useAttrs } from 'vue'
@@ -34,23 +33,20 @@ type CheckboxAccent = 'info' | 'success' | 'warning' | 'danger'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(
-  defineProps<{
-    accent: CheckboxAccent
-    disabled?: boolean
-    wrapperAttrs?: LabelHTMLAttributes
-  }>(),
-  { disabled: undefined }
-)
+const props = defineProps<{
+  accent: CheckboxAccent
+  disabled?: boolean
+  wrapperAttrs?: LabelHTMLAttributes
+}>()
 
-const checkboxModel = defineModel<boolean | undefined>({ default: undefined })
+const checkboxModel = defineModel<boolean | undefined | string[]>({ default: undefined })
 
 const slots = defineSlots<{
   default?(): any
   info?(): any
 }>()
 
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => props.disabled)
 
 const classNames = computed(() => [
   toVariants({

package/lib/components/ui/dropdown-button/UiDropdownButton.vue

@@ -1,6 +1,6 @@
 <!-- v3 -->
 <template>
-  <button type="button" class="ui-dropdown-item" :class="{ selected }" :disabled="isDisabled">
+  <button :class="{ selected }" :disabled="isDisabled" class="ui-dropdown-item" type="button">
     <VtsIcon :icon accent="current" class="left-icon" fixed-width />
     <span class="typo p1-regular label">
       <slot />
@@ -11,24 +11,20 @@
 
 <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 { useDisabled } from '@core/composables/disabled.composable'
 import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons'
 
-const props = withDefaults(
-  defineProps<{
-    disabled?: boolean
-    selected?: boolean
-    icon?: IconDefinition
-  }>(),
-  { disabled: undefined }
-)
+const { disabled, selected, icon } = defineProps<{
+  disabled?: boolean
+  selected?: boolean
+  icon?: IconDefinition
+}>()
 
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => disabled)
 </script>
 
-<style scoped lang="postcss">
+<style lang="postcss" scoped>
 .ui-dropdown-item {
   display: inline-flex;
   align-items: center;

package/lib/components/ui/input/UiInput.vue

@@ -69,7 +69,9 @@ const labelAccent = computed(() => (accent === 'info' ? 'neutral' : accent))
   position: relative;
   display: flex;
   flex-direction: column;
+  flex: 1;
   gap: 0.4rem;
+  flex: 1;
 
   .input {
     border-radius: 0.4rem;

package/lib/components/ui/radio-button/UiRadioButton.vue

@@ -2,7 +2,7 @@
 <template>
   <label :class="variant" class="ui-radio-button typo p1-regular">
     <span class="radio-container">
-      <input v-model="model" :value :disabled="isDisabled" class="input" type="radio" />
+      <input v-model="model" :disabled="isDisabled" :value class="input" type="radio" />
       <VtsIcon :icon="faCircle" accent="current" class="radio-icon" />
     </span>
     <slot />
@@ -11,31 +11,26 @@
 
 <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 { useDisabled } from '@core/composables/disabled.composable'
 import { toVariants } from '@core/utils/to-variants.util'
 import { faCircle } from '@fortawesome/free-solid-svg-icons'
 import { computed } from 'vue'
 
-const props = withDefaults(
-  defineProps<{
-    accent: 'info' | 'success' | 'warning' | 'danger'
-    value: any
-    disabled?: boolean
-  }>(),
-  {
-    disabled: undefined,
-  }
-)
+const { accent, value, disabled } = defineProps<{
+  accent: 'info' | 'success' | 'warning' | 'danger'
+  value: any
+  disabled?: boolean
+}>()
+
 const model = defineModel<boolean>()
 
 defineSlots<{
   default(): any
 }>()
 
-const variant = computed(() => toVariants({ accent: props.accent }))
+const variant = computed(() => toVariants({ accent }))
 
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => disabled)
 </script>
 
 <style lang="postcss" scoped>
@@ -60,6 +55,7 @@ const isDisabled = useContext(DisabledContext, () => props.disabled)
 
     &:has(input:focus-visible) {
       outline: none;
+
       &::after {
         position: absolute;
         content: '';
@@ -68,6 +64,7 @@ const isDisabled = useContext(DisabledContext, () => props.disabled)
         border-radius: 0.4rem;
       }
     }
+
     &:has(.input:disabled) {
       cursor: not-allowed;
 

package/lib/components/ui/toggle/UiToggle.vue

@@ -13,16 +13,12 @@
 
 <script lang="ts" setup>
 import UiLoader from '@core/components/ui/loader/UiLoader.vue'
-import { useContext } from '@core/composables/context.composable'
-import { DisabledContext } from '@core/context'
+import { useDisabled } from '@core/composables/disabled.composable'
 
-const props = withDefaults(
-  defineProps<{
-    disabled?: boolean
-    busy?: boolean
-  }>(),
-  { disabled: undefined }
-)
+const { busy, disabled } = defineProps<{
+  disabled?: boolean
+  busy?: boolean
+}>()
 
 const checked = defineModel<boolean>()
 
@@ -30,7 +26,7 @@ defineSlots<{
   default(): any
 }>()
 
-const isDisabled = useContext(DisabledContext, () => props.disabled)
+const isDisabled = useDisabled(() => disabled)
 </script>
 
 <style lang="postcss" scoped>

package/lib/composables/chart-theme.composable.ts

@@ -0,0 +1,382 @@
+import { useUiStore } from '@core/stores/ui.store'
+import { storeToRefs } from 'pinia'
+import { computed, provide, ref, watch } from 'vue'
+import { THEME_KEY } from 'vue-echarts'
+
+export const useChartTheme = () => {
+  const { colorMode } = storeToRefs(useUiStore())
+
+  const style = window.getComputedStyle(window.document.documentElement)
+
+  const getColors = () => ({
+    background: style.getPropertyValue('--color-neutral-background-primary'),
+    text: style.getPropertyValue('--color-neutral-txt-secondary'),
+    splitLine: style.getPropertyValue('--color-neutral-border'),
+    primary: style.getPropertyValue('--color-normal-txt-base'),
+    secondary: style.getPropertyValue('--color-warning-txt-base'),
+  })
+
+  const colors = ref(getColors())
+
+  watch(colorMode, () => (colors.value = getColors()), { flush: 'post' })
+
+  provide(
+    THEME_KEY,
+    computed(() => ({
+      color: [colors.value.primary, colors.value.secondary],
+      backgroundColor: colors.value.background,
+      textStyle: {},
+      grid: {
+        top: 40,
+        left: 80,
+        right: 20,
+      },
+      line: {
+        itemStyle: {
+          borderWidth: 2,
+        },
+        lineStyle: {
+          width: 2,
+        },
+        showSymbol: false,
+        symbolSize: 10,
+        symbol: 'circle',
+        smooth: false,
+      },
+      radar: {
+        itemStyle: {
+          borderWidth: 2,
+        },
+        lineStyle: {
+          width: 2,
+        },
+        symbolSize: 10,
+        symbol: 'circle',
+        smooth: false,
+      },
+      bar: {
+        itemStyle: {
+          barBorderWidth: 0,
+          barBorderColor: '#cccccc',
+        },
+      },
+      pie: {
+        itemStyle: {
+          borderWidth: 0,
+          borderColor: '#cccccc',
+        },
+      },
+      scatter: {
+        itemStyle: {
+          borderWidth: 0,
+          borderColor: '#cccccc',
+        },
+      },
+      boxplot: {
+        itemStyle: {
+          borderWidth: 0,
+          borderColor: '#cccccc',
+        },
+      },
+      parallel: {
+        itemStyle: {
+          borderWidth: 0,
+          borderColor: '#cccccc',
+        },
+      },
+      sankey: {
+        itemStyle: {
+          borderWidth: 0,
+          borderColor: '#cccccc',
+        },
+      },
+      funnel: {
+        itemStyle: {
+          borderWidth: 0,
+          borderColor: '#cccccc',
+        },
+      },
+      gauge: {
+        itemStyle: {
+          borderWidth: 0,
+          borderColor: '#cccccc',
+        },
+      },
+      candlestick: {
+        itemStyle: {
+          color: '#eb8146',
+          color0: 'transparent',
+          borderColor: '#d95850',
+          borderColor0: '#58c470',
+          borderWidth: '2',
+        },
+      },
+      graph: {
+        itemStyle: {
+          borderWidth: 0,
+          borderColor: '#cccccc',
+        },
+        lineStyle: {
+          width: 1,
+          color: '#aaaaaa',
+        },
+        symbolSize: '10',
+        symbol: 'emptyArrow',
+        smooth: true,
+        color: ['#893448', '#d95850', '#eb8146', '#ffb248', '#f2d643', '#ebdba4'],
+        label: {
+          color: '#ffffff',
+        },
+      },
+      map: {
+        itemStyle: {
+          areaColor: '#f3f3f3',
+          borderColor: '#999999',
+          borderWidth: 0.5,
+        },
+        label: {
+          color: '#893448',
+        },
+        emphasis: {
+          itemStyle: {
+            areaColor: '#ffb248',
+            borderColor: '#eb8146',
+            borderWidth: 1,
+          },
+          label: {
+            color: '#893448',
+          },
+        },
+      },
+      geo: {
+        itemStyle: {
+          areaColor: '#f3f3f3',
+          borderColor: '#999999',
+          borderWidth: 0.5,
+        },
+        label: {
+          color: '#893448',
+        },
+        emphasis: {
+          itemStyle: {
+            areaColor: '#ffb248',
+            borderColor: '#eb8146',
+            borderWidth: 1,
+          },
+          label: {
+            color: '#893448',
+          },
+        },
+      },
+      categoryAxis: {
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#aaaaaa',
+          },
+        },
+        axisTick: {
+          show: false,
+          lineStyle: {
+            color: '#333',
+          },
+        },
+        axisLabel: {
+          show: true,
+          color: '#999999',
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: [colors.value.splitLine],
+          },
+        },
+        splitArea: {
+          show: false,
+          areaStyle: {
+            color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+          },
+        },
+      },
+      valueAxis: {
+        axisLine: {
+          show: false,
+          // lineStyle: {
+          //   color: "#aaaaaa",
+          // },
+        },
+        axisTick: {
+          show: false,
+          // lineStyle: {
+          //   color: "#333",
+          // },
+        },
+        axisLabel: {
+          show: true,
+          color: colors.value.text,
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: [colors.value.splitLine],
+          },
+        },
+        splitArea: {
+          show: false,
+          areaStyle: {
+            color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+          },
+        },
+      },
+      logAxis: {
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#aaaaaa',
+          },
+        },
+        axisTick: {
+          show: false,
+          lineStyle: {
+            color: '#333',
+          },
+        },
+        axisLabel: {
+          show: true,
+          color: '#999999',
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: [colors.value.splitLine],
+          },
+        },
+        splitArea: {
+          show: false,
+          areaStyle: {
+            color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+          },
+        },
+      },
+      timeAxis: {
+        axisLine: {
+          show: false,
+          // lineStyle: {
+          //   color: "#aaaaaa",
+          // },
+        },
+        axisTick: {
+          show: false,
+          // lineStyle: {
+          //   color: "#333",
+          // },
+        },
+        axisLabel: {
+          show: true,
+          color: colors.value.text,
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: 'dashed',
+            color: [colors.value.splitLine],
+          },
+        },
+        splitArea: {
+          show: false,
+          areaStyle: {
+            color: ['rgba(250,250,250,0.05)', 'rgba(200,200,200,0.02)'],
+          },
+        },
+      },
+      toolbox: {
+        iconStyle: {
+          borderColor: '#999999',
+        },
+        emphasis: {
+          iconStyle: {
+            borderColor: '#666666',
+          },
+        },
+      },
+      legend: {
+        left: 'right',
+        top: 'bottom',
+        textStyle: {
+          color: colors.value.text,
+        },
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          lineStyle: {
+            color: '#8F84FF',
+            width: 1,
+          },
+          crossStyle: {
+            color: '#8F84FF',
+            width: 1,
+          },
+        },
+      },
+      timeline: {
+        lineStyle: {
+          color: '#893448',
+          width: 1,
+        },
+        itemStyle: {
+          color: '#893448',
+          borderWidth: 1,
+        },
+        controlStyle: {
+          color: '#893448',
+          borderColor: '#893448',
+          borderWidth: 0.5,
+        },
+        checkpointStyle: {
+          color: '#eb8146',
+          borderColor: '#ffb248',
+        },
+        label: {
+          color: '#893448',
+        },
+        emphasis: {
+          itemStyle: {
+            color: '#ffb248',
+          },
+          controlStyle: {
+            color: '#893448',
+            borderColor: '#893448',
+            borderWidth: 0.5,
+          },
+          label: {
+            color: '#893448',
+          },
+        },
+      },
+      visualMap: {
+        color: ['#893448', '#d95850', '#eb8146', '#ffb248', '#f2d643', 'rgb(247,238,173)'],
+      },
+      dataZoom: {
+        backgroundColor: 'rgba(255,255,255,0)',
+        dataBackgroundColor: 'rgba(255,178,72,0.5)',
+        fillerColor: 'rgba(255,178,72,0.15)',
+        handleColor: '#ffb248',
+        handleSize: '100%',
+        textStyle: {
+          color: '#333',
+        },
+      },
+      markPoint: {
+        label: {
+          color: '#ffffff',
+        },
+        emphasis: {
+          label: {
+            color: '#ffffff',
+          },
+        },
+      },
+    }))
+  )
+}

package/lib/composables/disabled.composable.ts

@@ -0,0 +1,15 @@
+import { IK_DISABLED } from '@core/utils/injection-keys.util'
+import { computed, inject, type MaybeRefOrGetter, provide, toValue } from 'vue'
+
+export function useDisabled(condition?: MaybeRefOrGetter<boolean>) {
+  const previousValue = inject(
+    IK_DISABLED,
+    computed(() => false)
+  )
+
+  const currentValue = computed(() => previousValue.value || toValue(condition ?? false))
+
+  provide(IK_DISABLED, currentValue)
+
+  return currentValue
+}

package/lib/composables/route-query/types.ts

@@ -28,8 +28,9 @@ export type BooleanActions = { toggle: (value?: boolean) => void }
 
 export type Actions = SetActions<any> & MapActions<any, any> & ArrayActions<any> & BooleanActions
 
-export type GuessActions<TData> =
-  TData extends Set<infer TValue>
+export type GuessActions<TData> = TData extends string | number
+  ? EmptyObject
+  : TData extends Set<infer TValue>
     ? SetActions<TValue>
     : TData extends (infer TValue)[]
       ? ArrayActions<TValue>

package/lib/composables/table/multi-select.composable.ts

@@ -0,0 +1,32 @@
+import { computed, ref, unref, type MaybeRef, type Ref } from 'vue'
+
+export default function useMultiSelect<T>(usableIds: MaybeRef<T[]>, selectableIds?: MaybeRef<T[]>) {
+  const $selected = ref(new Set()) as Ref<Set<T>>
+
+  const selected = computed({
+    get() {
+      return unref(usableIds).filter(usableId => $selected.value.has(usableId))
+    },
+    set(ids: T[]) {
+      $selected.value = new Set(ids)
+    },
+  })
+
+  const areAllSelected = computed({
+    get() {
+      return (unref(selectableIds) ?? unref(usableIds)).every(id => $selected.value.has(id))
+    },
+    set(value: boolean) {
+      if (value) {
+        $selected.value = new Set(unref(selectableIds) ?? unref(usableIds))
+      } else {
+        $selected.value = new Set()
+      }
+    },
+  })
+
+  return {
+    selected,
+    areAllSelected,
+  }
+}