@ouestfrance/sipa-bms-ui 7.14.1

package/src/components/feedback/UiTooltip.spec.ts

@@ -0,0 +1,62 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, it, vi } from 'vitest';
+import { nextTick } from 'vue';
+import UiTooltip from './UiTooltip.vue';
+
+let spy = vi.fn();
+vi.mock('@/components/feedback/tooltip.helper', () => ({
+  useTooltipHelper: vi.fn(() => ({
+    getTooltipTranslatePosition: spy.mockImplementation(() => {
+      return { translateX: 0, translateY: 0 };
+    }),
+  })),
+}));
+
+let props = {
+  visible: false,
+  tooltipText: 'this is a longer tooltip',
+  direction: 'bottom',
+  getAnchorElementValues: () => ({
+    top: 50,
+    left: 50,
+    width: 100,
+    height: 100,
+  }),
+} as any;
+const factory = () =>
+  mount(UiTooltip, {
+    props: props,
+  });
+
+describe('UiTooltip', () => {
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+  it('should not calculate position of tooltip if tooltip not visible', async () => {
+    factory();
+    await nextTick();
+    expect(spy).not.toHaveBeenCalled();
+  });
+  it('should calculate position of tooltip', async () => {
+    const wrapper = factory();
+    await nextTick();
+    wrapper.setProps({ ...props, visible: true });
+    await nextTick();
+    await nextTick();
+    expect(spy).toHaveBeenCalled();
+  });
+  it('should calculate position of tooltip only once', async () => {
+    const wrapper = factory();
+    await nextTick();
+    wrapper.setProps({ ...props, visible: true });
+    await nextTick();
+    await nextTick();
+    wrapper.setProps({ ...props, visible: false });
+    await nextTick();
+    await nextTick();
+    wrapper.setProps({ ...props, visible: true });
+    await nextTick();
+    await nextTick();
+    expect(spy).toHaveBeenCalledOnce();
+  });
+});

package/src/components/feedback/UiTooltip.stories.js

@@ -0,0 +1,71 @@
+import UiTooltip from './UiTooltip.vue';
+
+export default {
+  title: 'Composants/feedback/UiTooltip',
+  component: UiTooltip,
+};
+
+const Template = (args) => ({
+  components: {
+    UiTooltip,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <div
+      style="border: 1px solid var(--bms-grey-100);position: absolute; top: 50px; left: 50px; width: 100px; height: 100px;">
+      anchor
+    </div>
+    <UiTooltip v-bind="args">{{ args.tooltipText }}</UiTooltip>
+  `,
+});
+
+export const Bottom = Template.bind({});
+Bottom.args = {
+  tooltipText: 'this is a longer tooltip',
+  direction: 'bottom',
+  getAnchorElementValues: () => ({
+    top: 50,
+    left: 50,
+    width: 100,
+    height: 100,
+  }),
+  visible: true,
+};
+
+export const Right = Template.bind({});
+Right.args = {
+  tooltipText: 'this is a longer tooltip',
+  direction: 'right',
+  getAnchorElementValues: () => ({
+    top: 50,
+    left: 50,
+    width: 100,
+    height: 100,
+  }),
+};
+
+export const Left = Template.bind({});
+Left.args = {
+  tooltipText: 'this is a longer tooltip',
+  direction: 'left',
+  getAnchorElementValues: () => ({
+    top: 50,
+    left: 50,
+    width: 100,
+    height: 100,
+  }),
+};
+
+export const Top = Template.bind({});
+Top.args = {
+  tooltipText: 'this is a longer tooltip',
+  direction: 'top',
+  getAnchorElementValues: () => ({
+    top: 50,
+    left: 50,
+    width: 100,
+    height: 100,
+  }),
+};

package/src/components/feedback/UiTooltip.vue

@@ -0,0 +1,219 @@
+<template>
+  <Transition name="tooltip-fade">
+    <div v-show="visible" ref="tooltipElement" :class="classes" :style="style">
+      <slot></slot>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { TooltipDirection } from '@/models';
+import { computed, nextTick, onMounted, Ref, ref, watch } from 'vue';
+import { useTooltipHelper } from './tooltip.helper';
+
+import {
+  MaybeComputedElementRef,
+  useElementBounding,
+  useWindowSize,
+} from '@vueuse/core';
+
+const tooltipElement = ref(null);
+const tooltipElementBounding = useElementBounding(
+  tooltipElement as MaybeComputedElementRef,
+);
+const calculatedTooltipTransform: Ref<string> = ref<string>('none');
+const windowSize = useWindowSize();
+const { getTooltipTranslatePosition } = useTooltipHelper();
+
+const props = withDefaults(
+  defineProps<{
+    visible?: boolean;
+    direction?: TooltipDirection;
+    // Callback parce que le calcul de position a besoin d'être fait
+    // au moment ou l'on affiche le tooltip. Les computed & composables
+    // ne déclenchent pas le re-calcul au bon moment du render.
+    getAnchorElementValues: () =>
+      | undefined
+      | {
+          top: number;
+          left: number;
+          width: number;
+          height: number;
+          right: number;
+          bottom: number;
+        };
+  }>(),
+  {
+    visible: true,
+    direction: TooltipDirection.Bottom,
+  },
+);
+const anchorElement = ref<
+  | undefined
+  | {
+      top: number;
+      left: number;
+      width: number;
+      height: number;
+      right: number;
+      bottom: number;
+    }
+>(undefined);
+
+const classes = computed(
+  () => `bms-tooltip__text bms-tooltip__text--${props.direction}`,
+);
+
+const setTooltipPosition = async () => {
+  if (
+    props.visible &&
+    JSON.stringify(anchorElement.value) !==
+      JSON.stringify(props.getAnchorElementValues())
+  ) {
+    anchorElement.value = props.getAnchorElementValues();
+
+    // reset position
+    calculatedTooltipTransform.value = 'none';
+
+    if (!anchorElement.value) return;
+
+    // we wait for the tooltip to be mounted and have a width & height to base our calculation from
+    await nextTick();
+
+    const { translateX, translateY } = getTooltipTranslatePosition(
+      props.direction,
+      {
+        width: windowSize.width.value,
+        height: windowSize.height.value,
+      },
+      anchorElement.value,
+      {
+        width: tooltipElementBounding.width.value,
+        height: tooltipElementBounding.height.value,
+        left: tooltipElementBounding.left.value,
+        right: tooltipElementBounding.right.value,
+        top: tooltipElementBounding.top.value,
+        bottom: tooltipElementBounding.bottom.value,
+      },
+    );
+    calculatedTooltipTransform.value = `translate(${Math.floor(translateX)}px,${Math.floor(translateY)}px)`;
+  }
+};
+
+watch(() => props.visible, setTooltipPosition);
+onMounted(setTooltipPosition);
+
+const style = computed(() => {
+  const anchorElement = props.getAnchorElementValues();
+  if (!anchorElement) return;
+
+  return {
+    top: `${anchorElement.top}px`,
+    left: `${anchorElement.left}px`,
+    '--bms-tooltip-transform': calculatedTooltipTransform.value,
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+.bms-tooltip__text {
+  --bms-tooltip-background-color: white;
+  --bms-tooltip-color: inherit;
+  --bms-tooltip-margin: 4px;
+
+  background-color: var(--bms-tooltip-background-color);
+  width: max-content;
+  text-align: center;
+  padding: 4px 8px;
+  border-radius: var(--bms-border-radius);
+  max-width: var(--bms-tooltip-max-width, 30rem);
+  max-height: 30rem;
+  position: absolute;
+  overflow: hidden;
+  z-index: 20;
+  filter: drop-shadow(0 0 0.8rem var(--bms-shadow-color));
+  color: var(--bms-font-color);
+  transform: var(--bms-tooltip-transform);
+
+  &::before {
+    content: '';
+    position: absolute;
+    right: var(--bms-tooltip-indicator-position-right);
+    left: var(--bms-tooltip-indicator-position-left);
+    top: var(--bms-tooltip-indicator-position-top);
+    bottom: var(--bms-tooltip-indicator-position-bottom);
+    transform: var(--bms-tooltip-indicator-transform);
+    border-width: 3px;
+    border-style: solid;
+    border-color: var(--bms-tooltip-indicator-border);
+  }
+
+  &--top,
+  &--bottom {
+    --bms-tooltip-indicator-position-left: 50%;
+    --bms-tooltip-indicator-position-right: initial;
+  }
+
+  &--bottom {
+    --bms-tooltip-indicator-position-top: initial;
+    --bms-tooltip-indicator-position-bottom: 100%;
+    --bms-tooltip-indicator-border: transparent transparent
+      var(--bms-tooltip-background-color) transparent;
+  }
+
+  &--top {
+    --bms-tooltip-indicator-position-top: 100%;
+    --bms-tooltip-indicator-position-bottom: initial;
+    --bms-tooltip-indicator-border: var(--bms-tooltip-background-color)
+      transparent transparent transparent;
+  }
+
+  &--left,
+  &--right {
+    --bms-tooltip-indicator-position-top: 50%;
+    --bms-tooltip-indicator-position-bottom: initial;
+  }
+
+  &--left {
+    --bms-tooltip-indicator-position-right: initial;
+    --bms-tooltip-indicator-position-left: 100%;
+    --bms-tooltip-indicator-border: transparent transparent transparent
+      var(--bms-tooltip-background-color);
+  }
+
+  &--right {
+    --bms-tooltip-indicator-position-right: 100%;
+    --bms-tooltip-indicator-position-left: initial;
+    --bms-tooltip-indicator-border: transparent
+      var(--bms-tooltip-background-color) transparent transparent;
+  }
+}
+
+.tooltip-fade-enter {
+  &-active {
+    transition: opacity 0.2s ease;
+  }
+
+  &-from {
+    opacity: 0;
+  }
+
+  &-to {
+    opacity: 1;
+  }
+}
+
+.tooltip-fade-leave {
+  &-active {
+    transition: opacity 0.3s ease;
+  }
+
+  &-from {
+    opacity: 1;
+  }
+
+  &-to {
+    opacity: 0;
+  }
+}
+</style>

package/src/components/feedback/tooltip.helper.spec.ts

@@ -0,0 +1,92 @@
+import { TooltipDirection } from '@/models';
+import { useTooltipHelper } from './tooltip.helper';
+
+const { _getTranslatePosition, _shiftTranslatePosition } = useTooltipHelper();
+
+describe('tooltip.helper', () => {
+  describe('_getTranslatePosition', () => {
+    test.each([
+      [
+        TooltipDirection.Top,
+        { width: 40, height: 20 }, // anchor element
+        { width: 200, height: 100 }, // tooltip element
+        { x: -80, y: -100 }, // resulted
+      ],
+      [
+        TooltipDirection.Bottom,
+        { width: 40, height: 20 },
+        { width: 200, height: 100 },
+        { x: -80, y: 20 },
+      ],
+      [
+        TooltipDirection.Right,
+        { width: 40, height: 20 },
+        { width: 200, height: 100 },
+        { x: 40, y: -40 },
+      ],
+      [
+        TooltipDirection.Left,
+        { width: 40, height: 20 },
+        { width: 200, height: 100 },
+        { x: -200, y: -40 },
+      ],
+    ])(
+      'calculate position on %s',
+      (
+        direction: TooltipDirection,
+        anchorElement: { width: number; height: number },
+        tooltipElement: { width: number; height: number },
+        transformResult: { x: number; y: number },
+      ) => {
+        expect(
+          _getTranslatePosition(direction, anchorElement, tooltipElement, 0),
+        ).toStrictEqual(transformResult);
+      },
+    );
+  });
+
+  describe('_shiftTranslatePosition', () => {
+    test.each([
+      [
+        'should shift to the right if overflows on left',
+        TooltipDirection.Top,
+        { left: 0, top: 0, right: 100, bottom: 50 },
+        { width: 500, height: 500 },
+        { x: -20, y: -20 },
+        { shiftedX: -0, shiftedY: -20 },
+      ],
+      [
+        'should shift to the bottom if overflows on top',
+        TooltipDirection.Left,
+        { left: 0, top: -50, right: 100, bottom: 0 },
+        { width: 500, height: 500 },
+        { x: -20, y: -20 },
+        { shiftedX: -20, shiftedY: -50 },
+      ],
+    ])(
+      '%s',
+      (
+        _comment: string,
+        direction: TooltipDirection,
+        tooltipElement: {
+          left: number;
+          top: number;
+          right: number;
+          bottom: number;
+        },
+        window: { width: number; height: number },
+        translatePosition: { x: number; y: number },
+        transformResult: { shiftedX: number; shiftedY: number },
+      ) => {
+        expect(
+          _shiftTranslatePosition(
+            direction,
+            tooltipElement,
+            window,
+            translatePosition,
+          ),
+        ).toStrictEqual(transformResult);
+      },
+    );
+  });
+});

package/src/components/feedback/tooltip.helper.ts

@@ -0,0 +1,121 @@
+import { TooltipDirection } from '@/models';
+
+export const useTooltipHelper = () => {
+  const _shiftTranslatePosition = (
+    direction: TooltipDirection,
+    tooltipElement: {
+      right: number;
+      left: number;
+      top: number;
+      bottom: number;
+    },
+    window: { width: number; height: number },
+    translatePosition: { x: number; y: number },
+  ) => {
+    let shiftedX = translatePosition.x;
+    let shiftedY = translatePosition.y;
+
+    if (
+      direction === TooltipDirection.Bottom ||
+      direction === TooltipDirection.Top
+    ) {
+      // overflow left
+      if (tooltipElement.left + translatePosition.x < 0)
+        shiftedX = -tooltipElement.left;
+
+      // overflow right
+      if (tooltipElement.right + translatePosition.x > window.width)
+        shiftedX = window.width - tooltipElement.right;
+    }
+
+    if (
+      direction === TooltipDirection.Left ||
+      direction === TooltipDirection.Right
+    ) {
+      // overflow top
+      if (tooltipElement.top + translatePosition.y < 0)
+        shiftedY = tooltipElement.top;
+
+      // overflow bottom
+      if (tooltipElement.bottom + translatePosition.y > window.height)
+        shiftedY = window.height - tooltipElement.bottom;
+    }
+
+    return { shiftedX, shiftedY };
+  };
+
+  const _getTranslatePosition = (
+    direction: TooltipDirection,
+
+    anchorElement: { width: number; height: number },
+    tooltipElement: {
+      width: number;
+      height: number;
+    },
+    margin = 5,
+  ) => {
+    switch (direction) {
+      case TooltipDirection.Top:
+        return {
+          x: (anchorElement.width - tooltipElement.width) / 2,
+          y: -tooltipElement.height - margin,
+        };
+
+      case TooltipDirection.Bottom:
+        return {
+          x: (anchorElement.width - tooltipElement.width) / 2,
+          y: anchorElement.height + margin,
+        };
+
+      case TooltipDirection.Left:
+        return {
+          x: -tooltipElement.width - margin,
+          y: (anchorElement.height - tooltipElement.height) / 2,
+        };
+
+      case TooltipDirection.Right:
+        return {
+          x: anchorElement.width + margin,
+          y: (anchorElement.height - tooltipElement.height) / 2,
+        };
+    }
+  };
+
+  const getTooltipTranslatePosition = (
+    direction: TooltipDirection,
+    window: { width: number; height: number },
+    anchorElement: { width: number; height: number },
+    tooltipElement: {
+      width: number;
+      height: number;
+      right: number;
+      left: number;
+      top: number;
+      bottom: number;
+    },
+  ) => {
+    const { x, y } = _getTranslatePosition(
+      direction,
+      anchorElement,
+      tooltipElement,
+    );
+
+    let { shiftedX, shiftedY } = _shiftTranslatePosition(
+      direction,
+      tooltipElement,
+      window,
+      { x, y },
+    );
+
+    return {
+      translateX: shiftedX,
+      translateY: shiftedY,
+    };
+  };
+
+  return {
+    getTooltipTranslatePosition,
+    _getTranslatePosition,
+    _shiftTranslatePosition,
+  };
+};

package/src/components/form/BmsAutocomplete.stories.js

@@ -0,0 +1,90 @@
+import BmsAutocomplete from '@/components/form/BmsAutocomplete.vue';
+import { Cat, Heart, Wheat } from 'lucide-vue-next';
+
+import template from '@/documentation/template_field_dependency.mdx';
+
+export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
+  title: 'Composants/form/AutocompleteTextIcon',
+  component: BmsAutocomplete,
+  argTypes: {},
+};
+
+const Template = (args) => ({
+  components: {
+    BmsAutocomplete,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BmsAutocomplete v-bind="args" />
+    `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  options: [
+    { label: 'titi', value: 'i' },
+    { label: 'toto', value: 'o' },
+    { label: 'tutu', value: 'u' },
+  ],
+  modelValue: '',
+};
+export const WithStringArray = Template.bind({});
+WithStringArray.args = {
+  options: ['titi', 'toto', 'tutu'],
+  modelValue: '',
+  open: true,
+};
+
+export const WithValue = Template.bind({});
+WithValue.args = {
+  options: [
+    { label: 'titi', value: 'i' },
+    { label: 'toto', value: 'o' },
+    { label: 'tutu', value: 'u' },
+  ],
+  modelValue: 'i',
+};
+
+export const Opened = Template.bind({});
+Opened.parameters = { pseudo: { focus: 'input' } };
+Opened.args = {
+  options: [
+    { label: 'titi', value: 'i' },
+    { label: 'toto', value: 'o' },
+    { label: 'tutu', value: 'u' },
+  ],
+  modelValue: '',
+  open: true,
+};
+export const IconsWithValue = Template.bind({});
+IconsWithValue.args = {
+  options: [
+    { label: 'titi', value: 'i', icon: Heart },
+    { label: 'toto', value: 'o', icon: Cat },
+    { label: 'tutu', value: 'u', icon: Wheat },
+  ],
+  modelValue: 'i',
+};
+
+export const IconsOpened = Template.bind({});
+IconsOpened.parameters = { pseudo: { focus: 'input' } };
+IconsOpened.args = {
+  options: [
+    { label: 'titi', value: 'i', icon: Heart },
+    { label: 'toto', value: 'o', icon: Cat },
+    {
+      label: 'tutu',
+      value: 'u',
+      icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bug"><path d="m8 2 1.88 1.88"/><path d="M14.12 3.88 16 2"/><path d="M9 7.13v-1a3.003 3.003 0 1 1 6 0v1"/><path d="M12 20c-3.3 0-6-2.7-6-6v-3a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v3c0 3.3-2.7 6-6 6"/><path d="M12 20v-9"/><path d="M6.53 9C4.6 8.8 3 7.1 3 5"/><path d="M6 13H2"/><path d="M3 21c0-2.1 1.7-3.9 3.8-4"/><path d="M20.97 5c0 2.1-1.6 3.8-3.5 4"/><path d="M22 13h-4"/><path d="M17.2 17c2.1.1 3.8 1.9 3.8 4"/></svg>`,
+    },
+  ],
+  modelValue: '',
+  open: true,
+};