@ouestfrance/sipa-bms-ui 7.14.1

package/src/components/layout/BmsStepper.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="stepper">
+    <div class="stepper-header">
+      <div
+        v-for="(step, index) of steps"
+        :key="index"
+        class="stepper-header--step"
+        :class="{ clickable }"
+      >
+        <div
+          class="stepper-header--indicator"
+          :class="stepIndicator(step, index)"
+          @click="onStepClick(index)"
+        >
+          <Check v-if="step.stepComplete" />
+          <span v-else>{{ index + 1 }}</span>
+        </div>
+        <div @click="onStepClick(index)">{{ step.stepLabel }}</div>
+        <hr v-if="index < steps.length - 1" class="stepper-header--separator" />
+      </div>
+    </div>
+    <div class="stepper-body">
+      <component
+        :is="currentStepObject?.stepNode"
+        v-if="currentStepObject"
+        :key="currentStep"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Check } from 'lucide-vue-next';
+import type { Slots } from 'vue';
+import { computed, ComputedRef, isVNode, useSlots, VNode } from 'vue';
+
+const props = withDefaults(
+  defineProps<{ currentStep: number; clickable: boolean }>(),
+  {
+    currentStep: 0,
+    clickable: false,
+  },
+);
+const slots: Slots = useSlots();
+
+const emit = defineEmits(['stepClick']);
+
+interface Step {
+  stepNode: VNode;
+  stepComplete: boolean;
+  stepLabel: string;
+}
+
+const steps: ComputedRef<Step[]> = computed(() => {
+  if (slots.default) {
+    return slots
+      ?.default()
+      .filter((slot) => {
+        return isVNode(slot) && (slot.type as any).__name === 'BmsStep';
+      })
+      .map((step) => ({
+        stepComplete: step.props
+          ? step.props.stepComplete || step.props['step-complete']
+          : false,
+        stepLabel: step.props
+          ? step.props.stepLabel || step.props['step-label']
+          : '',
+        stepNode: step,
+      }));
+  }
+  return [];
+});
+
+const currentStepObject: ComputedRef<Step | null> = computed(() => {
+  if (steps.value.length > 0) {
+    return steps.value[props.currentStep];
+  }
+  return null;
+});
+
+const stepIndicator = (step: Step, stepIndex: number) => {
+  if (stepIndex === props.currentStep) {
+    return {
+      active: true,
+    };
+  }
+  if (step.stepComplete) {
+    return {
+      complete: true,
+    };
+  }
+  return '';
+};
+
+const onStepClick = (number: number) => {
+  if (props.clickable) emit('stepClick', number);
+};
+</script>
+
+<style lang="scss" scoped>
+.stepper {
+  &-header {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: sticky;
+    z-index: 2;
+    top: 0;
+    padding: 2em 0;
+
+    &::before {
+      content: '';
+      display: block;
+      width: 80%;
+      left: 10%;
+      position: absolute;
+      z-index: -1;
+      bottom: 0;
+      height: 2em;
+      border-radius: 100%;
+      box-shadow: 0 0 16px rgba(black, 0.16);
+      opacity: 0;
+      transition: opacity 0.2s linear;
+    }
+
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: transparent;
+      z-index: -1;
+    }
+
+    &--step {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 0 10px;
+
+      &:first-child {
+        margin: 0 10px 0 0;
+      }
+
+      &:last-child {
+        margin: 0;
+      }
+
+      &.clickable:hover {
+        div {
+          cursor: pointer;
+        }
+      }
+    }
+
+    &--indicator {
+      width: 30px;
+      height: 30px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: var(--bms-main-50);
+      color: var(--bms-font-color);
+      border-radius: 50%;
+      font-weight: bold;
+      margin-right: 10px;
+
+      &.active {
+        border: none;
+        background-color: var(--bms-main-100);
+        color: white;
+      }
+
+      &.complete {
+        border: none;
+        background-color: var(--bms-success-color);
+        color: white;
+        font-size: 20px;
+      }
+    }
+
+    &--separator {
+      width: 30px;
+      margin-left: 10px;
+    }
+  }
+
+  &-body {
+    margin: 10px 10px 0 10px;
+  }
+}
+</style>

package/src/components/layout/UiPopoverMenu.vue

@@ -0,0 +1,167 @@
+<template>
+  <Teleport to="body">
+    <div ref="menuElement" :style="getInlineStyles" :class="classNames">
+      <slot></slot>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import {
+  onBeforeUnmount,
+  onMounted,
+  type Ref,
+  ref,
+  watch,
+  computed,
+  type ComputedRef,
+} from 'vue';
+
+interface ElementXY {
+  x: number;
+  y: number;
+}
+
+const props = withDefaults(
+  defineProps<{
+    visible: boolean;
+    to: HTMLElement | null;
+    matchWidth?: boolean;
+    x?: string;
+    y?: string;
+  }>(),
+  {
+    visible: false,
+    matchWidth: false,
+    x: 'left',
+    y: 'bottom',
+  },
+);
+
+const elementX: Ref<number> = ref(0);
+const elementY: Ref<number> = ref(0);
+const menuWidth: Ref<number> = ref(200);
+const xPosition: Ref<string> = ref('left');
+const yPosition: Ref<string> = ref('bottom');
+
+const classNames: ComputedRef<string> = computed(() => {
+  return `ui-menu ${xPosition.value} ${yPosition.value}${
+    props.visible && props.to ? ' is-visible' : ''
+  }${props.matchWidth ? ' is-matchwidth' : ''}`;
+});
+
+const getInlineStyles: ComputedRef<string> = computed(() => {
+  return `--ui-menu-x-position: ${elementX.value}px; --ui-menu-y-position: ${
+    elementY.value
+  }px${props.matchWidth ? `;--ui-menu-width: ${menuWidth.value}px` : ''}`;
+});
+watch(
+  () => props.visible,
+  () => {
+    if (props.to) {
+      bindBounding(props.to);
+    }
+  },
+);
+watch(
+  () => props.to,
+  () => {
+    if (props.to) {
+      bindBounding(props.to);
+    }
+  },
+);
+
+onMounted(() => {
+  if (props.to) {
+    bindBounding(props.to);
+  }
+
+  window.addEventListener('resize', listener);
+  window.addEventListener('scroll', listener, true);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', listener);
+  window.removeEventListener('scroll', listener, true);
+});
+
+const bindBounding = (element: HTMLElement): void => {
+  if (!element || !(element instanceof Element)) {
+    return;
+  }
+  xPosition.value = props.x;
+  yPosition.value = props.y;
+
+  const boundingRect: DOMRect = element.getBoundingClientRect();
+  const bounding = getBounding(boundingRect);
+
+  setBounding(bounding);
+};
+
+const setBounding = ({ x, y }: ElementXY): void => {
+  elementX.value = x;
+  elementY.value = y;
+};
+const getBounding = (boundingRect: DOMRect): ElementXY => {
+  const x: number =
+    xPosition.value === 'left'
+      ? boundingRect.x
+      : boundingRect.x + (boundingRect.right - boundingRect.left);
+  const y: number =
+    yPosition.value === 'bottom'
+      ? boundingRect.y + (boundingRect.bottom - boundingRect.top)
+      : window.innerHeight - boundingRect.y;
+
+  menuWidth.value = boundingRect.right - boundingRect.left;
+
+  return { x, y };
+};
+const listener = () => {
+  if (props.to) {
+    bindBounding(props.to);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.ui-menu {
+  --ui-menu-width: auto;
+
+  min-width: 100px;
+  max-height: 400px;
+  width: var(--ui-menu-width, auto);
+  width: 400px;
+  position: fixed;
+  z-index: 10;
+  display: block;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.1s linear;
+
+  &.is-matchwidth {
+    max-width: 100%;
+  }
+
+  &.is-visible {
+    pointer-events: all;
+    opacity: 1;
+  }
+
+  &.left {
+    left: var(--ui-menu-x-position, 0);
+  }
+
+  &.bottom {
+    top: var(--ui-menu-y-position, 0);
+  }
+
+  &.top {
+    bottom: var(--ui-menu-y-position, 0);
+  }
+
+  &.right {
+    right: calc(100% - var(--ui-menu-x-position, 0));
+  }
+}
+</style>

package/src/components/navigation/BmsBackButton.stories.js

@@ -0,0 +1,27 @@
+import BmsBackButton from '@/components/navigation/BmsBackButton.vue';
+
+export default {
+  title: 'Composants/navigation/BackButton',
+  component: BmsBackButton,
+  argTypes: {},
+};
+
+const Template = (args) => ({
+  components: {
+    BmsBackButton,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BmsBackButton v-bind="args" />
+    <br>
+    <br>
+    <BmsBackButton v-bind="args">
+      Revenir en arrière
+    </BmsBackButton>
+  `,
+});
+
+export const Primary = Template.bind({});
+Primary.args = {};

package/src/components/navigation/BmsBackButton.vue

@@ -0,0 +1,38 @@
+<template>
+  <a @click.prevent="clickBackButton"><ArrowLeft /><slot>Retour</slot></a>
+</template>
+
+<script setup lang="ts">
+import { ArrowLeft } from 'lucide-vue-next';
+import { RouteLocationRaw } from 'vue-router';
+import { useRouterHistory } from '@/plugins/router-history/router-history.composable';
+
+const { goBack } = useRouterHistory();
+
+const props = defineProps<{
+  fallback?: RouteLocationRaw;
+}>();
+
+const clickBackButton = async () => {
+  await goBack(props.fallback);
+};
+</script>
+
+<style lang="scss" scoped>
+a {
+  cursor: pointer;
+  display: inline-flex;
+  gap: 0.5em;
+  align-items: center;
+
+  &:not(:hover) {
+    text-decoration: underline;
+  }
+
+  svg {
+    font-size: inherit;
+    width: 1em;
+    height: 1em;
+  }
+}
+</style>

package/src/components/navigation/BmsBreadcrumb.stories.js

@@ -0,0 +1,80 @@
+import BmsBreadcrumb from './BmsBreadcrumb.vue';
+import { vueRouter } from 'storybook-vue3-router';
+import { Heart } from 'lucide-vue-next';
+
+export default {
+  title: 'composants/navigation/Breadcrumb',
+  component: BmsBreadcrumb,
+  decorators: [
+    vueRouter([
+      {
+        name: 'home',
+        path: '/',
+      },
+      {
+        name: 'firstRoute',
+        path: '/toto',
+      },
+      {
+        name: 'secondRoute',
+        path: '/titi',
+      },
+      {
+        name: 'thirdRoute',
+        path: '/tutu',
+      },
+    ]),
+  ],
+};
+
+const Template = (args) => ({
+  components: {
+    BmsBreadcrumb,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BmsBreadcrumb v-bind="args" />
+  `,
+});
+
+export const Empty = Template.bind({});
+Empty.args = {
+  breadcrumbs: [],
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  breadcrumbs: [
+    {
+      to: { name: 'firstRoute' },
+      label: 'First route',
+    },
+    {
+      to: { name: 'secondRoute' },
+      label: 'Second route',
+    },
+    {
+      label: 'Third and final route',
+    },
+  ],
+};
+
+export const WithCustomSeparator = Template.bind({});
+WithCustomSeparator.args = {
+  separator: '❤️',
+  breadcrumbs: [
+    {
+      to: { name: 'firstRoute' },
+      label: 'First route',
+    },
+    {
+      to: { name: 'secondRoute' },
+      label: 'Second route',
+    },
+    {
+      label: 'Third and final route',
+    },
+  ],
+};

package/src/components/navigation/BmsBreadcrumb.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="breadcrumb">
+    <RouterLink :to="homeLocation">
+      <AnimatedHomeIcon />
+    </RouterLink>
+
+    <template v-for="breadcrumb in breadcrumbs" :key="breadcrumb.label">
+      <span> {{ separator }} </span>
+
+      <RouterLink v-if="breadcrumb.to" :to="breadcrumb.to">
+        {{ breadcrumb.label }}
+      </RouterLink>
+
+      <span class="breadcrumb__here" v-else>
+        {{ breadcrumb.label }}
+      </span>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { type Breadcrumb } from '../../models/breadcrumb.model';
+import type { RouteLocationRaw } from 'vue-router';
+import AnimatedHomeIcon from '@/assets/animated-icons/AnimatedHomeIcon.vue';
+
+withDefaults(
+  defineProps<{
+    homeLocation?: RouteLocationRaw | string;
+    breadcrumbs: Breadcrumb[];
+    separator?: string;
+  }>(),
+  { homeLocation: '/', separator: '>' },
+);
+</script>
+
+<style scoped lang="scss">
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  &__here {
+    font-weight: bold;
+  }
+}
+</style>

package/src/components/navigation/BmsLink.spec.ts

@@ -0,0 +1,45 @@
+import BmsLink from '@/components/navigation/BmsLink.vue';
+import { mount, RouterLinkStub } from '@vue/test-utils';
+import { expect } from 'vitest';
+
+describe('BmsLink', () => {
+  it('renders an external link when "to" is an external URL', () => {
+    const wrapper = mount(BmsLink, {
+      global: {
+        stubs: {
+          UiButton: true,
+          'router-link': RouterLinkStub,
+          teleport: true,
+        },
+      },
+      props: {
+        to: { name: 'route' },
+        classes: 'test',
+      },
+    } as any);
+    wrapper.find('a.internal-link').exists();
+  });
+
+  it('renders a router-link for internal links', () => {
+    const wrapper = mount(BmsLink, {
+      props: {
+        to: 'https://example.com',
+        classes: 'test',
+      },
+    } as any);
+    wrapper.find('a.external-link').exists();
+    expect(wrapper.find('a.external-link').attributes('target')).toBe('_self');
+  });
+
+  it('renders a router-link with particular target for link', () => {
+    const wrapper = mount(BmsLink, {
+      props: {
+        to: 'https://example.com',
+        classes: 'test',
+        target: '_blank',
+      },
+    } as any);
+    wrapper.find('a.external-link').exists();
+    expect(wrapper.find('a.external-link').attributes('target')).toBe('_blank');
+  });
+});

package/src/components/navigation/BmsLink.vue

@@ -0,0 +1,59 @@
+<template>
+  <template v-if="isExternalLink(to)">
+    <a
+      :href="to as string"
+      :class="computedClasses"
+      :target="target"
+      v-bind="$attrs"
+    >
+      <slot />
+    </a>
+  </template>
+  <template v-else>
+    <router-link custom v-slot="{ href, navigate }" :to="to">
+      <a
+        :href="href"
+        @click="navigate"
+        :class="computedClasses"
+        :target="target"
+        v-bind="$attrs"
+      >
+        <slot />
+      </a>
+    </router-link>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { RouteLocationRaw } from 'vue-router';
+import { isExternalLink } from '@/helpers';
+import { computed } from 'vue';
+
+interface ClassesRepresentation {
+  [key: string]: boolean;
+}
+
+interface Props {
+  to: RouteLocationRaw | string;
+  target?: string;
+  classes?: string | ClassesRepresentation;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  classes: '',
+  target: '_self',
+});
+
+const computedClasses = computed(() => {
+  const bmsLinkType = isExternalLink(props.to)
+    ? 'external-link'
+    : 'internal-link';
+  if (typeof props.classes === 'string') {
+    return `${props.classes} ${bmsLinkType}`;
+  } else {
+    const classes = { ...props.classes };
+    classes[bmsLinkType] = true;
+    return classes;
+  }
+});
+</script>