Merge remote-tracking branch 'origin/xo6/sidepanel-component' into xo…

…6/sidepanel-component

@xen-orchestra/lite/src/stories/web-core/ui/side-panel/ui-side-panel.story.vue

@@ -0,0 +1,79 @@
+<template>
+  <ComponentStory
+    v-slot="{ properties, settings }"
+    :params="[
+      prop('busy').bool().widget(),
+      prop('isError').bool().widget(),
+      prop('isEmpty').bool().widget(),
+      setting('action1').widget(text()).preset('Edit'),
+      setting('action2').widget(text()).preset('Delete'),
+      slot(),
+      slot('header').help('Meant to receive UiButton'),
+      slot('content').help('Meant to display cards or other component'),
+    ]"
+    :presets="{
+      Normal: {
+        props: {
+          busy: false,
+          isError: false,
+          isEmpty: false,
+        },
+      },
+      Empty: {
+        props: {
+          busy: false,
+          isError: false,
+          isEmpty: true,
+        },
+      },
+      Error: {
+        props: {
+          busy: false,
+          isError: true,
+        },
+      },
+      Busy: {
+        props: {
+          busy: true,
+          isError: false,
+        },
+      },
+    }"
+  >
+    <UiSidePanel v-bind="properties">
+      <template v-if="!properties.isEmpty" #header>
+        <UiButton variant="tertiary" size="medium" accent="info" :left-icon="faEdit"> {{ settings.action1 }}</UiButton>
+        <UiButton variant="tertiary" size="medium" accent="danger" :left-icon="faTrash">
+          {{ settings.action2 }}
+        </UiButton>
+      </template>
+      <template v-if="!properties.isEmpty" #content>
+        <UiCard>
+          <div>Content 1</div>
+          <div>Content 1</div>
+          <div>Content 1</div>
+        </UiCard>
+        <UiCard>
+          <div>Content 2</div>
+          <div>Content 2</div>
+          <div>Content 2</div>
+        </UiCard>
+        <UiCard>
+          <div>Content 3</div>
+          <div>Content 3</div>
+          <div>Content 3</div>
+        </UiCard>
+      </template>
+    </UiSidePanel>
+  </ComponentStory>
+</template>
+
+<script setup lang="ts">
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { prop, setting, slot } from '@/libs/story/story-param'
+import { text } from '@/libs/story/story-widget'
+import UiButton from '@core/components/ui/button/UiButton.vue'
+import UiCard from '@core/components/ui/card/UiCard.vue'
+import UiSidePanel from '@core/components/ui/side-panel/UiSidePanel.vue'
+import { faEdit, faTrash } from '@fortawesome/free-solid-svg-icons'
+</script>

@xen-orchestra/web-core/lib/components/ui/side-panel/UiSidePanel.vue

@@ -0,0 +1,61 @@
+<!-- v1 -->
+<template>
+  <div class="ui-side-panel" :class="{ error: isError }">
+    <div v-if="slots.header && !props.busy && !isError && !isEmpty" class="header">
+      <slot name="header" />
+    </div>
+    <div v-if="slots.content && !props.busy && !isError" class="content">
+      <slot name="content" />
+    </div>
+    <div v-if="!props.busy && isError" class="error">
+      <div v-if="!props.busy && !slots.content" class="empty" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = defineProps<{
+  busy?: boolean
+  isError?: boolean
+}>()
+
+const slots = defineSlots<{
+  default(): any
+  header?(): any
+  content?(): any
+}>()
+
+const isEmpty = computed(() => slots.content?.().length === 0)
+</script>
+
+<style scoped lang="postcss">
+.ui-side-panel {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border: 0.1rem solid var(--color-neutral-border);
+  background-color: var(--color-neutral-background-secondary);
+
+  .header {
+    border-bottom: 0.1rem solid var(--color-neutral-border);
+    background-color: var(--color-neutral-background-primary);
+    display: flex;
+    justify-content: flex-end;
+    padding: 4px 16px;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    padding: 0.8rem;
+    gap: 0.8rem;
+  }
+
+  &.error {
+    padding-top: 15rem;
+    background-color: var(--color-danger-background-selected);
+  }
+}
+</style>