@xen-orchestra/web-core 0.42.0 → 0.44.0

package/lib/components/banner/VtsBanner.vue

@@ -0,0 +1,50 @@
+<template>
+  <div :class="className" class="vts-banner">
+    <slot />
+    <div v-if="slots.addons">
+      <slot name="addons" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { toVariants } from '@core/utils/to-variants.util.ts'
+import { computed } from 'vue'
+
+export type BannerAccent = 'brand' | 'warning' | 'danger'
+
+const { accent } = defineProps<{
+  accent: BannerAccent
+}>()
+
+const slots = defineSlots<{
+  default(): any
+  addons?(): any
+}>()
+
+const className = computed(() => toVariants({ accent }))
+</script>
+
+<style scoped lang="postcss">
+.vts-banner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1.6rem;
+  padding: 0.8rem 1.6rem;
+  border-block-end: 0.1rem solid var(--color-neutral-border);
+
+  /* ACCENT */
+  &.accent--brand {
+    background-color: var(--color-brand-background-selected);
+  }
+
+  &.accent--warning {
+    background-color: var(--color-warning-background-selected);
+  }
+
+  &.accent--danger {
+    background-color: var(--color-danger-background-selected);
+  }
+}
+</style>

package/lib/components/button-group/VtsButtonGroup.vue

@@ -30,7 +30,7 @@ const slots = defineSlots<{
     align-items: center;
     gap: 1.6rem;
 
-    @media (--mobile) {
+    @media (--small) {
       flex-direction: column-reverse;
     }
   }

package/lib/components/columns/VtsColumns.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vts-columns" :class="{ mobile: uiStore.isMobile }">
+  <div class="vts-columns" :class="{ mobile: uiStore.isSmall }">
     <component :is="nodes[index - 1] ?? VtsColumn" v-for="index of columns" :key="index" />
   </div>
 </template>

package/lib/components/console/VtsLayoutConsole.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="uiStore.isMobile ? 'mobile' : undefined" class="vts-layout-console">
+  <div :class="uiStore.isSmall ? 'mobile' : undefined" class="vts-layout-console">
     <slot />
     <UiCard class="card">
       <slot name="actions" />

package/lib/components/console/VtsRemoteConsole.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :class="uiStore.isMobile ? 'mobile' : undefined" class="vts-remote-console">
+  <div :class="uiStore.isSmall ? 'mobile' : undefined" class="vts-remote-console">
     <VtsStateHero v-if="!isReady" format="page" type="busy" size="medium">{{ t('loading') }}</VtsStateHero>
     <div ref="console-container" class="console" />
   </div>

package/lib/components/input-wrapper/VtsInputWrapper.vue

@@ -78,6 +78,7 @@ provide(IK_INPUT_WRAPPER_CONTROLLER, wrapperController)
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
+  min-width: 0;
 
   .label {
     min-height: 2.4rem;

package/lib/components/layout/VtsLayoutSidebar.vue

@@ -1,14 +1,14 @@
 <template>
   <div
     :class="{
-      locked: sidebar.isLocked && !ui.isMobile,
+      locked: sidebar.isLocked && !ui.isSmall,
       expanded: sidebar.isExpanded,
-      mobile: ui.isMobile,
-      'border-right': !ui.isMobile,
+      mobile: ui.isSmall,
+      'border-right': !ui.isSmall,
     }"
     class="vts-layout-sidebar"
   >
-    <div v-if="!ui.isMobile" class="lock">
+    <div v-if="!ui.isSmall" class="lock">
       <UiButtonIcon
         v-tooltip="{
           content: sidebar.isLocked ? t('action:sidebar-unlock') : t('action:sidebar-lock'),
@@ -30,7 +30,7 @@
       <slot name="footer" />
     </div>
     <div
-      v-if="!ui.isMobile"
+      v-if="!ui.isSmall"
       :class="{ active: sidebar.isResizing }"
       class="resize-handle"
       @mousedown="sidebar.startResize"

package/lib/components/menu/MenuList.vue

@@ -90,7 +90,7 @@ const open = (event: MouseEvent) => {
   color: var(--color-neutral-txt-primary);
   border-radius: 0.4rem;
   background-color: var(--color-neutral-background-primary);
-  z-index: 1010;
+  z-index: 1011;
   overflow: auto;
 
   &.horizontal {

package/lib/components/query-builder/VtsQueryBuilder.vue

@@ -0,0 +1,104 @@
+<template>
+  <form class="vts-query-builder" @submit.prevent="handleSubmit()">
+    <label :for="id" class="typo-body-regular-small label">
+      {{ t('query-builder:label') }}
+    </label>
+    <div class="input-container">
+      <UiInput
+        v-model="localFilter"
+        :accent="isUsable ? 'brand' : 'danger'"
+        :aria-label="uiStore.isSmall ? t('query-builder:label') : undefined"
+        :placeholder="t('query-builder:placeholder')"
+        clearable
+        @clear="filter = localFilter"
+      />
+    </div>
+
+    <template v-if="uiStore.isSmallOrMedium">
+      <UiButtonIcon icon="fa:magnifying-glass" size="medium" accent="brand" />
+      <VtsQueryBuilderButton
+        v-model="rootGroup"
+        small
+        :disabled="!isUsable"
+        @confirm="updateFilter()"
+        @cancel="resetFilter"
+      />
+    </template>
+    <template v-else>
+      <UiButton size="medium" accent="brand" variant="secondary" type="submit">
+        {{ t('action:search') }}
+      </UiButton>
+
+      <VtsDivider type="stretch" />
+
+      <VtsQueryBuilderButton
+        v-model="rootGroup"
+        :disabled="!isUsable"
+        @confirm="updateFilter()"
+        @cancel="resetFilter"
+      />
+    </template>
+  </form>
+</template>
+
+<script setup lang="ts">
+import VtsDivider from '@core/components/divider/VtsDivider.vue'
+import VtsQueryBuilderButton from '@core/components/query-builder/VtsQueryBuilderButton.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiInput from '@core/components/ui/input/UiInput.vue'
+import type { QueryBuilderSchema } from '@core/packages/query-builder/types'
+import { useQueryBuilder } from '@core/packages/query-builder/use-query-builder'
+import { useUiStore } from '@core/stores/ui.store'
+import { onMounted, ref, useId, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { schema } = defineProps<{
+  schema: QueryBuilderSchema
+}>()
+
+const filter = defineModel<string>({ required: true })
+
+const localFilter = ref('')
+
+onMounted(() => {
+  localFilter.value = filter.value
+})
+
+const { t } = useI18n()
+
+const uiStore = useUiStore()
+
+const id = useId()
+
+const { rootGroup, isUsable, updateFilter, resetFilter } = useQueryBuilder(filter, () => schema)
+
+function handleSubmit() {
+  filter.value = localFilter.value
+}
+
+watch(filter, newFilter => {
+  localFilter.value = newFilter
+})
+</script>
+
+<style lang="postcss" scoped>
+.vts-query-builder {
+  display: flex;
+  align-items: center;
+  gap: 1.6rem;
+
+  @media (--small-or-medium) {
+    gap: 1rem;
+
+    .label {
+      display: none;
+    }
+  }
+
+  .input-container {
+    flex: 1;
+    min-width: 0;
+  }
+}
+</style>

package/lib/components/query-builder/VtsQueryBuilderButton.vue

@@ -0,0 +1,52 @@
+<template>
+  <UiButtonIcon
+    v-if="small"
+    v-tooltip="tooltip"
+    icon="fa:filter"
+    size="medium"
+    accent="brand"
+    :disabled
+    @click="openModal()"
+  />
+  <UiButton v-else v-tooltip="tooltip" :disabled accent="brand" variant="tertiary" size="medium" @click="openModal()">
+    {{ t('action:use-query-builder') }}
+  </UiButton>
+</template>
+
+<script setup lang="ts">
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import { vTooltip } from '@core/directives/tooltip.directive'
+import { useModal } from '@core/packages/modal/use-modal'
+import type { QueryBuilderGroup } from '@core/packages/query-builder/types'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { disabled } = defineProps<{
+  disabled?: boolean
+  small?: boolean
+}>()
+
+const emit = defineEmits<{
+  confirm: []
+  cancel: []
+}>()
+
+const rootGroup = defineModel<QueryBuilderGroup>({ required: true })
+
+const tooltip = computed(() => (disabled ? 'Current filter is invalid or too complex' : false))
+
+const { t } = useI18n()
+
+const openModal = useModal(() => ({
+  component: import('@core/components/query-builder/VtsQueryBuilderModal.vue'),
+  props: {
+    modelValue: rootGroup,
+    'onUpdate:modelValue': (newRootGroup: QueryBuilderGroup) => {
+      rootGroup.value = newRootGroup
+    },
+  },
+  onConfirm: () => emit('confirm'),
+  onCancel: () => emit('cancel'),
+}))
+</script>

package/lib/components/query-builder/VtsQueryBuilderFilter.vue

@@ -0,0 +1,126 @@
+<template>
+  <div class="vts-query-builder-filter">
+    <VtsSelect :id="propertySelectId" ref="propertySelector" accent="brand" />
+    <VtsSelect :id="operatorSelectId" accent="brand" />
+    <UiInput v-if="valueType === 'input'" v-model="value" class="value" accent="brand" />
+    <VtsSelect v-else-if="valueType === 'select'" :id="valueSelectId" class="value" accent="brand" />
+    <div>
+      <MenuList :placement="uiStore.isSmall ? 'bottom' : 'bottom-end'">
+        <template #trigger="{ open }">
+          <UiButton
+            v-if="uiStore.isSmall"
+            class="actions-button"
+            variant="secondary"
+            icon="fa:ellipsis"
+            size="medium"
+            accent="brand"
+            @click="open"
+          >
+            {{ t('filter-actions') }}
+          </UiButton>
+          <UiButtonIcon v-else icon="fa:ellipsis" size="medium" accent="brand" @click="open" />
+        </template>
+        <MenuItem icon="fa:clone" @click="emit('duplicate')">{{ t('action:duplicate') }}</MenuItem>
+        <MenuItem icon="fa:layer-group" @click="emit('convertToGroup')">{{ t('action:turn-into-group') }}</MenuItem>
+        <MenuItem icon="fa:trash" @click="emit('remove')">{{ t('action:delete-filter') }}</MenuItem>
+      </MenuList>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import MenuItem from '@core/components/menu/MenuItem.vue'
+import MenuList from '@core/components/menu/MenuList.vue'
+import VtsSelect from '@core/components/select/VtsSelect.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiInput from '@core/components/ui/input/UiInput.vue'
+import { useFormSelect } from '@core/packages/form-select'
+import type { PropertySchema, OperatorSchema, ValueSchema } from '@core/packages/query-builder/types'
+import { useUiStore } from '@core/stores/ui.store.ts'
+import { onMounted, useTemplateRef } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { properties, operators, values, valueType } = defineProps<{
+  properties: PropertySchema[]
+  operators: OperatorSchema[]
+  values: ValueSchema[]
+  valueType: 'input' | 'select' | 'none'
+}>()
+
+const emit = defineEmits<{
+  remove: []
+  duplicate: []
+  convertToGroup: []
+}>()
+
+const property = defineModel<string | undefined>('property', { required: true })
+
+const operator = defineModel<string | undefined>('operator', { required: true })
+
+const value = defineModel<string | undefined>('value', { required: true })
+
+const { t } = useI18n()
+
+const uiStore = useUiStore()
+
+const propertySelector = useTemplateRef('propertySelector')
+
+const { id: propertySelectId } = useFormSelect(() => properties, {
+  model: property,
+  option: {
+    id: 'property',
+    value: 'property',
+  },
+})
+
+const { id: operatorSelectId } = useFormSelect(() => operators, {
+  model: operator,
+  option: {
+    id: 'operator',
+    value: 'operator',
+  },
+})
+
+const { id: valueSelectId } = useFormSelect(() => values, {
+  model: value,
+  option: {
+    id: 'value',
+    value: 'value',
+  },
+})
+
+onMounted(() => propertySelector.value?.focus())
+</script>
+
+<style lang="postcss" scoped>
+.vts-query-builder-filter {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  background-color: #00000010;
+  padding: 0.3rem;
+  margin-inline-end: 0.5rem;
+  max-width: 100%;
+  overflow: auto;
+  border-radius: 0.3rem;
+
+  @media (--small) {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .label {
+    white-space: nowrap;
+    margin-inline-end: 1rem;
+  }
+
+  .value {
+    flex: 1;
+  }
+
+  .actions-button {
+    width: 100%;
+  }
+}
+</style>

package/lib/components/query-builder/VtsQueryBuilderGroup.vue

@@ -0,0 +1,157 @@
+<template>
+  <UiCard class="vts-query-builder-group" :class="[{ root, highlighted }, item.operator]">
+    <div class="group">
+      <div class="header">
+        <VtsSelect :id="groupOperatorSelectId" class="group-operator" accent="brand" />
+        <MenuList v-if="!root" placement="bottom-end">
+          <template #trigger="{ open }">
+            <UiButtonIcon size="medium" accent="brand" icon="fa:ellipsis" @click="open" />
+          </template>
+          <MenuItem @click="emit('duplicate')">{{ t('action:duplicate') }}</MenuItem>
+          <MenuItem @click="emit('remove', true)">{{ t('action:move-filters-to-parent-group') }}</MenuItem>
+          <MenuItem @click="emit('remove')">{{ t('action:delete-group') }}</MenuItem>
+        </MenuList>
+      </div>
+      <div class="content">
+        <VtsQueryBuilderRow
+          v-for="(child, index) of item.children"
+          :key="child.id"
+          v-model:node="item.children[index]"
+          v-model:operator="item.operator"
+          :index
+          @convert-to-group="item.convertChildToGroup(index)"
+          @remove="keepChildren => item.removeChild(index, keepChildren)"
+          @duplicate="item.duplicateChild(index)"
+        />
+        <div class="add-child-buttons">
+          <VtsQueryBuilderTreeLine last />
+          <div class="buttons">
+            <UiButton variant="secondary" size="small" accent="brand" icon="fa:ellipsis" @click="item.addChildFilter()">
+              {{ t('action:add-filter') }}
+            </UiButton>
+            <UiButton variant="secondary" size="small" accent="brand" icon="fa:ellipsis" @click="item.addChildGroup()">
+              {{ t('action:add-group') }}
+            </UiButton>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="root && item.children.length > 1" class="group-filters-button">
+      <UiButton variant="secondary" size="small" accent="brand" icon="fa:ellipsis" @click="item.wrapInGroup()">
+        {{ item.operator === 'and' ? t('action:plus-or') : t('action:plus-and') }}
+      </UiButton>
+    </div>
+  </UiCard>
+</template>
+
+<script lang="ts" setup>
+import MenuItem from '@core/components/menu/MenuItem.vue'
+import MenuList from '@core/components/menu/MenuList.vue'
+import VtsQueryBuilderRow from '@core/components/query-builder/VtsQueryBuilderRow.vue'
+import VtsQueryBuilderTreeLine from '@core/components/query-builder/VtsQueryBuilderTreeLine.vue'
+import VtsSelect from '@core/components/select/VtsSelect.vue'
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiCard from '@core/components/ui/card/UiCard.vue'
+import { useFormSelect } from '@core/packages/form-select'
+import type { QueryBuilderGroup } from '@core/packages/query-builder/types'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+defineProps<{
+  root?: boolean
+  highlighted?: boolean
+}>()
+
+const emit = defineEmits<{
+  duplicate: []
+  remove: [keepChildren?: boolean]
+}>()
+
+const item = defineModel<QueryBuilderGroup>({ required: true })
+
+const { t } = useI18n()
+
+const { id: groupOperatorSelectId } = useFormSelect(['and', 'or'], {
+  model: computed({
+    get: () => item.value.operator,
+    set: value => {
+      item.value.operator = value
+    },
+  }),
+  option: {
+    label: (option: string) => (option === 'and' ? t('and') : t('or')),
+  },
+})
+</script>
+
+<style lang="postcss" scoped>
+.vts-query-builder-group {
+  padding: 0;
+  border: none;
+
+  &.root {
+    margin-block-end: 1.4rem;
+  }
+
+  &.and {
+    --main-color: var(--color-brand-item-active);
+    --secondary-color: var(--color-brand-background-selected);
+  }
+
+  &.or {
+    --main-color: var(--color-success-item-active);
+    --secondary-color: var(--color-success-background-selected);
+  }
+
+  .group-operator:deep(.ui-input) {
+    padding-inline: 0.6rem;
+    gap: 0.6rem;
+  }
+
+  .group {
+    position: relative;
+    border: 0.1rem solid var(--main-color);
+    background-color: var(--secondary-color);
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 1rem;
+      padding: 0.3rem;
+      background-color: var(--main-color);
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      padding-block-end: 0.5rem;
+      padding-inline-start: 0.6rem;
+      max-width: 100%;
+    }
+  }
+
+  .add-child-buttons {
+    display: flex;
+
+    & > .buttons {
+      display: flex;
+      align-items: center;
+      gap: 0.8rem;
+      background-color: #00000010;
+      padding: 0.3rem;
+      border-radius: 0.3rem;
+    }
+  }
+
+  .group-filters-button {
+    position: absolute;
+    inset-block-end: -1.4rem;
+    inset-inline-end: 0.5rem;
+  }
+}
+</style>

package/lib/components/query-builder/VtsQueryBuilderModal.vue

@@ -0,0 +1,62 @@
+<template>
+  <VtsModal class="vts-query-builder-modal" accent="info" dismissible>
+    <template v-if="uiStore.isSmall" #title>{{ t('query-builder') }}</template>
+    <template #content>
+      <VtsQueryBuilderGroup v-model="rootGroup" root />
+    </template>
+    <template #buttons>
+      <VtsModalCancelButton />
+      <VtsModalConfirmButton>{{ t('action:save') }}</VtsModalConfirmButton>
+    </template>
+  </VtsModal>
+</template>
+
+<script setup lang="ts">
+import VtsModal from '@core/components/modal/VtsModal.vue'
+import VtsModalCancelButton from '@core/components/modal/VtsModalCancelButton.vue'
+import VtsModalConfirmButton from '@core/components/modal/VtsModalConfirmButton.vue'
+import VtsQueryBuilderGroup from '@core/components/query-builder/VtsQueryBuilderGroup.vue'
+import { type QueryBuilderGroup } from '@core/packages/query-builder/types'
+import { useUiStore } from '@core/stores/ui.store.ts'
+import { useI18n } from 'vue-i18n'
+
+const rootGroup = defineModel<QueryBuilderGroup>({ required: true })
+
+const { t } = useI18n()
+
+const uiStore = useUiStore()
+</script>
+
+<style lang="postcss" scoped>
+.vts-query-builder-modal {
+  @media (--small) {
+    &:deep(.modal) {
+      position: absolute;
+      inset: 0;
+      border-radius: 0;
+      max-width: 100vw;
+      max-height: 100vh;
+
+      & > .buttons .line {
+        flex-direction: row;
+      }
+    }
+  }
+
+  &:deep(.modal) {
+    background-color: var(--color-neutral-background-primary) !important;
+    padding: 0;
+    gap: 0;
+
+    & > .main {
+      margin: 1.6rem;
+    }
+
+    & > .buttons {
+      padding: 1.6rem;
+      border-top: 0.1rem solid var(--color-neutral-border);
+      align-items: flex-end;
+    }
+  }
+}
+</style>