@ouestfrance/sipa-bms-ui 7.14.1

package/src/components/navigation/BmsMenuNav.vue

@@ -0,0 +1,217 @@
+<template>
+  <nav>
+    <ul>
+      <li v-for="item in currentItems" :key="item.label">
+        <div class="parent-container" v-if="hasSubItems(item)">
+          <template v-if="item.link">
+            <BmsLink
+              :to="item.link"
+              :class="`parent-item ${isItemActive(item as ParentMenuItem) ? 'active' : ''}`"
+            >
+              <span class="parent-label">{{ item.label }}</span>
+              <component
+                v-if="item.icon"
+                :is="item.icon"
+                class="parent-item__custom-icon"
+              />
+            </BmsLink>
+          </template>
+          <template v-else>
+            <div
+              class="parent-item"
+              @click="toggleParentItem(item as ParentMenuItem)"
+            >
+              <span class="parent-label">{{ item.label }}</span>
+              <ChevronDown v-if="!(item as ParentMenuItem).open" />
+              <ChevronUp v-else />
+            </div>
+          </template>
+          <Transition name="open">
+            <ul v-show="(item as ParentMenuItem).open">
+              <li
+                v-for="subItem in (item as ParentMenuItem).items"
+                :key="subItem.label"
+              >
+                <UiMenuItem
+                  :item="subItem as MenuItem"
+                  :active="isItemActive(subItem as MenuItem)"
+                  @click="clickItem(subItem)"
+                />
+              </li>
+            </ul>
+          </Transition>
+        </div>
+        <UiMenuItem
+          v-else
+          :item="item as MenuItem"
+          :active="isItemActive(item as MenuItem)"
+          @click="clickItem(item)"
+        />
+      </li>
+    </ul>
+    <div class="additional">
+      <slot name="additional" :closeMenu="closeMenu"></slot>
+    </div>
+  </nav>
+</template>
+
+<script lang="ts" setup>
+import { MenuItem, ParentMenuItem } from '@/models/menu.model';
+import { Ref, ref, watchEffect } from 'vue';
+import {
+  RouteLocationNamedRaw,
+  RouteLocationNormalizedLoaded,
+  RouteLocationPathRaw,
+  RouteLocationRaw,
+} from 'vue-router';
+import { ChevronDown, ChevronUp, Settings } from 'lucide-vue-next';
+import UiMenuItem from './UiMenuItem.vue';
+import BmsLink from './BmsLink.vue';
+
+interface Props {
+  items: (MenuItem | ParentMenuItem)[];
+  activeLink: RouteLocationNormalizedLoaded;
+}
+
+const props = withDefaults(defineProps<Props>(), {});
+const emits = defineEmits<{
+  (e: 'closeMenu', payload: boolean): void;
+  (e: 'clickItem', payload: ParentMenuItem | MenuItem | null): void;
+}>();
+
+const hasSubItems = (item: MenuItem | ParentMenuItem) => {
+  return item.hasOwnProperty('items');
+};
+
+const currentItems: Ref<(MenuItem | ParentMenuItem)[]> = ref([]);
+
+const isLinkRecognized = (link: RouteLocationRaw): boolean => {
+  if ((link as RouteLocationNamedRaw).name) {
+    return (link as RouteLocationNamedRaw).name === props.activeLink.name;
+  }
+  if ((link as RouteLocationPathRaw).path) {
+    return (link as RouteLocationPathRaw).path === props.activeLink.path;
+  }
+  return link === props.activeLink.name || link === props.activeLink.path;
+};
+
+const isItemActive = (menuItem: MenuItem | ParentMenuItem): boolean => {
+  if (props.activeLink?.meta?.menuItemId) {
+    return props.activeLink.meta.menuItemId === menuItem.id;
+  } else if (menuItem?.link) {
+    return isLinkRecognized(menuItem.link);
+  } else {
+    return false;
+  }
+};
+
+watchEffect(() => {
+  currentItems.value = props.items.map((item) => {
+    if (!hasSubItems(item)) {
+      return item;
+    }
+    const parentItem: ParentMenuItem = item as ParentMenuItem;
+    if (parentItem.open) {
+      return parentItem;
+    }
+    parentItem.open =
+      parentItem.open === undefined ||
+      !!parentItem.items.find(isItemActive) ||
+      !!parentItem.link;
+    return parentItem;
+  });
+});
+
+const closeMenu = () => {
+  emits('closeMenu', false);
+};
+
+const clickItem = (payload: ParentMenuItem | MenuItem) => {
+  emits('closeMenu', false);
+  emits('clickItem', payload);
+};
+
+const toggleParentItem = (item: ParentMenuItem) => {
+  item.open = !item.open;
+};
+</script>
+
+<style lang="scss" scoped>
+nav {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  overflow: auto;
+  padding: 6rem 0 2rem;
+  background-color: var(--bms-white);
+
+  ul {
+    margin: 0;
+    padding: 0;
+
+    li {
+      display: flex;
+      align-items: center;
+      list-style-type: none;
+      cursor: pointer;
+      width: 100%;
+
+      .parent-container {
+        width: 100%;
+
+        .parent-item {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          color: var(--bms-grey-75);
+          padding: 14px 8px;
+
+          :deep(.internal-link) {
+            color: inherit;
+          }
+
+          &__custom-icon {
+            width: 1em;
+            height: 1em;
+          }
+
+          &:hover {
+            color: var(--bms-main-100);
+            text-decoration: none;
+          }
+
+          .parent-label {
+            line-height: 16px;
+            font-size: 14px;
+            text-transform: uppercase;
+          }
+        }
+      }
+    }
+  }
+  .additional {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+  }
+}
+
+.open-enter-active {
+  transition: all 0.7s ease;
+}
+.open-leave-active {
+  transition: all 0.25s linear;
+}
+
+.open-enter-from,
+.open-leave-to {
+  max-height: 0;
+  opacity: 0;
+}
+
+.open-enter-to,
+.open-leave-from {
+  max-height: 500px;
+  opacity: 1;
+}
+</style>

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

@@ -0,0 +1,55 @@
+import BmsShortLinkMenu from '@/components/navigation/BmsShortLinkMenu.vue';
+
+export default {
+  title: 'Composants/navigation/BmsShortLinkMenu',
+  component: BmsShortLinkMenu,
+  argTypes: {},
+};
+
+const Template = (args) => ({
+  components: {
+    BmsShortLinkMenu,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+      <h3>Default</h3>
+      <BmsShortLinkMenu v-bind="args.default"/>
+      <br/><br/>
+      <h3>Outlined</h3>
+      <BmsShortLinkMenu v-bind="args.outline"/>
+      <br/><br/>
+      <h3>Show Help</h3>
+      <BmsShortLinkMenu v-bind="args.showHelp"/>
+      <h4>Show Help Outlined</h4>
+      <br/>
+      <BmsShortLinkMenu v-bind="args.showHelpOutlined"/>
+      <br/><br/>
+      <h3>Show Activity</h3>
+      <BmsShortLinkMenu v-bind="args.showActivity"/>
+      <br/>
+      <h4>Show Activity Outlined</h4>
+      <BmsShortLinkMenu v-bind="args.showActivityOutlined"/>
+      <br/><br/>
+      <h3>Without link</h3>
+      <BmsShortLinkMenu v-bind="{}"/>
+    `,
+});
+
+export const AllMenu = Template.bind({});
+AllMenu.args = {
+  default: { helpLink: '/path', activityLink: '/path' },
+
+  outline: { helpLink: '/path', activityLink: '/path', outline: true },
+
+  showHelp: { helpLink: '/path', activityLink: null },
+  showHelpOutlined: { helpLink: '/path', activityLink: null, outline: true },
+
+  showActivity: { helpLink: null, activityLink: '/path' },
+  showActivityOutlined: {
+    helpLink: null,
+    activityLink: '/path',
+    outline: true,
+  },
+};

package/src/components/navigation/BmsShortLinkMenu.vue

@@ -0,0 +1,59 @@
+<template>
+  <span
+    v-if="!!helpLink || !!activityLink"
+    class="bms-short-link-menu"
+    :class="{ 'bms-short-link-menu__outline': outline }"
+  >
+    <BmsIconButton
+      v-if="!!helpLink"
+      tooltip-text="Voir la documentation"
+      :to="helpLink"
+      target="_blank"
+    >
+      <slot name="documentationIcon">
+        <AnimatedCircleHelpIcon />
+      </slot>
+    </BmsIconButton>
+    <BmsIconButton
+      v-if="!!activityLink"
+      tooltip-text="Voir l'activité"
+      :to="activityLink"
+      target="_self"
+    >
+      <slot name="activityIcon">
+        <AnimatedActivityIcon />
+      </slot>
+    </BmsIconButton>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { RouteLocationRaw } from 'vue-router';
+import BmsIconButton from '@/components/button/BmsIconButton.vue';
+import AnimatedCircleHelpIcon from '@/assets/animated-icons/AnimatedCircleHelpIcon.vue';
+import AnimatedActivityIcon from '@/assets/animated-icons/AnimatedActivityIcon.vue';
+
+withDefaults(
+  defineProps<{
+    outline: boolean;
+    helpLink: string | RouteLocationRaw | null;
+    activityLink: string | RouteLocationRaw | null;
+  }>(),
+  { outline: false, helpLink: null, activityLink: null },
+);
+</script>
+
+<style scoped lang="scss">
+.bms-short-link-menu {
+  display: flex;
+  height: fit-content;
+  width: fit-content;
+  margin-left: 0.5em;
+  align-self: center;
+  border-radius: var(--bms-border-radius);
+
+  &__outline {
+    border: 1px solid var(--bms-grey-25);
+  }
+}
+</style>

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

@@ -0,0 +1,30 @@
+import BmsTabs from '@/components/navigation/BmsTabs.vue';
+
+export default {
+  title: 'Composants/navigation/Tabs',
+  component: BmsTabs,
+  argTypes: {
+    items: {},
+  },
+};
+
+const Template = (args) => ({
+  components: {
+    BmsTabs,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BmsTabs v-bind="args" />
+  `,
+});
+
+export const Primary = Template.bind({});
+Primary.args = {
+  title: 'Title',
+  tabs: [
+    { name: 'Titi', routePath: 'titi' },
+    { name: 'Toto', routePath: 'toto' },
+  ],
+};

package/src/components/navigation/BmsTabs.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="tabs-header">
+    <div class="tabs-title">
+      <h3>{{ title }}</h3>
+    </div>
+    <UiTab
+      v-for="tab in tabs"
+      :key="tab.name"
+      :tab="tab"
+      :current-route="currentRoute"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+import { Tab } from '@/models/tab.model';
+import UiTab from './UiTab.vue';
+
+const { currentRoute } = useRouter();
+
+defineProps<{ title: string; tabs: Tab[] }>();
+</script>
+
+<style lang="scss" scoped>
+.tabs-header {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--bms-grey-25);
+  box-sizing: border-box;
+
+  .tabs-title {
+    margin-right: auto;
+    margin-bottom: 16px;
+
+    h3 {
+      margin: 0;
+    }
+  }
+
+  a {
+    position: relative;
+    top: 1px;
+  }
+}
+</style>

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

@@ -0,0 +1,89 @@
+import BmsTenantSwitcher from '@/components/navigation/BmsTenantSwitcher.vue';
+
+export default {
+  title: 'Composants/navigation/TenantSwitcher',
+  component: BmsTenantSwitcher,
+};
+
+const logoFile =
+  'https://cdn.sipaof.fr/sipaui/latest/downloads/cocardes/of.svg';
+
+const Template = () => ({
+  components: {
+    BmsTenantSwitcher,
+  },
+  setup() {
+    const noTenantArgs = {
+      currentTenant: null,
+      tenants: [],
+      selectTenantLabel: 'Label',
+      selectTenantPlaceholder: 'Placeholder',
+    };
+    const singleTenantArgs = {
+      currentTenant: { id: 'id', label: 'Tenant label', logoFile },
+      tenants: [{ id: 'id', label: 'Tenant label' }],
+      selectTenantLabel: 'Label',
+      selectTenantPlaceholder: 'Placeholder',
+    };
+    const noCurrentTenantArgs = {
+      currentTenant: null,
+      tenants: [{ id: 'id1', label: 'Tenant1 label1', initials: 'TL' }],
+      selectTenantLabel: 'Label',
+      selectTenantPlaceholder: 'Placeholder',
+    };
+    const multipleTenantsArgs = {
+      currentTenant: { id: 'id', label: 'Tenant label', logoFile },
+      tenants: [
+        {
+          id: 'id',
+          label: 'Tenant label with a super long name that overflows',
+          logoFile,
+        },
+        { id: 'id1', label: 'Tenant1 label1', initials: 'TL' },
+      ],
+      selectTenantLabel: 'Label',
+      selectTenantPlaceholder: 'Placeholder',
+    };
+    const withFavoriteTenantsArgs = {
+      currentTenant: {
+        id: 'id',
+        label: 'Tenant label',
+      },
+      tenants: [
+        {
+          id: 'id',
+          label: 'Tenant label',
+          isFavorite: true,
+        },
+        { id: 'id1', label: 'Tenant1 label1', logoFile },
+        { id: 'id2', label: 'Tenant2 label2' },
+      ],
+      selectTenantLabel: 'Label',
+      selectTenantPlaceholder: 'Placeholder',
+    };
+    return {
+      noTenantArgs,
+      singleTenantArgs,
+      noCurrentTenantArgs,
+      multipleTenantsArgs,
+      withFavoriteTenantsArgs,
+    };
+  },
+  template: `
+  <div style="display:flex;flex-direction:column;gap:2em">
+    <strong>No tenant :</strong>
+    <BmsTenantSwitcher v-bind="noTenantArgs" />
+    <strong>Single tenant available :</strong>
+    <BmsTenantSwitcher v-bind="singleTenantArgs" />
+    <strong>No current tenant :</strong>
+    <BmsTenantSwitcher v-bind="noCurrentTenantArgs" />
+    <strong>Multiple tenants available :</strong>
+    <BmsTenantSwitcher v-bind="multipleTenantsArgs" />
+    <strong>Favorites tenants available :</strong>
+    <BmsTenantSwitcher v-bind="withFavoriteTenantsArgs" />
+  </div>
+      `,
+});
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/navigation/BmsTenantSwitcher.vue

@@ -0,0 +1,135 @@
+<template>
+  <div ref="tenantSwitchButton" class="tenant-switcher-button">
+    <div class="tenant-label" v-if="currentTenant && tenants.length === 1">
+      <UiTenantImage :tenant="currentTenant" />
+      <span>
+        {{ currentTenant.label }}
+      </span>
+    </div>
+    <BmsButton
+      type="tertiary"
+      @click="showTenantSwitcher = !showTenantSwitcher"
+      v-else-if="tenants.length > 0"
+    >
+      <template #start>
+        <UiTenantImage v-if="currentTenant" :tenant="currentTenant" />
+      </template>
+      <template #default>{{ tenantSwitcherLabel }}</template>
+      <template #end>
+        <ChevronDown />
+      </template>
+    </BmsButton>
+    <UiTenantSwitcher
+      :visible="showTenantSwitcher"
+      :to="tenantSwitchButton"
+      :tenants="tenants"
+      :selectTenantPlaceholder="selectTenantPlaceholder"
+      @removeFavoriteTenant="onRemoveFromFavoriteTenants"
+      @changeTenant="onChangeTenant"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { BmsButton, Tenant } from '@/index';
+import { ChevronDown } from 'lucide-vue-next';
+import UiTenantSwitcher from './UiTenantSwitcher.vue';
+import {
+  ComputedRef,
+  Ref,
+  computed,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from 'vue';
+import UiTenantImage from './UiTenantImage.vue';
+
+const props = withDefaults(
+  defineProps<{
+    currentTenant: Tenant | null;
+    tenants: Tenant[];
+    selectTenantLabel: string;
+    selectTenantPlaceholder: string;
+  }>(),
+  {
+    currentTenant: null,
+    tenants: () => [],
+    selectTenantLabel: '',
+    selectTenantPlaceholder: '',
+  },
+);
+
+const emits = defineEmits<{
+  removeFavoriteTenant: [tenant: Tenant];
+  changeTenant: [tenant: Tenant];
+}>();
+
+const tenantSwitchButton: Ref<HTMLElement | null> = ref(null);
+const showTenantSwitcher: Ref<boolean> = ref<boolean>(false);
+
+const tenantSwitcherLabel: ComputedRef<string> = computed(() => {
+  return props.currentTenant
+    ? props.currentTenant.label
+    : props.selectTenantLabel;
+});
+
+onMounted(() => {
+  document.body.addEventListener('click', tenantSwitcherCloser);
+  document.body.addEventListener('keydown', tenantSwitcherCloser);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener('click', tenantSwitcherCloser);
+  window.removeEventListener('keydown', tenantSwitcherCloser);
+});
+
+const tenantSwitcherCloser = (event: any) => {
+  if (showTenantSwitcher.value && event) {
+    if (
+      (!event.target.closest('.ui-menu') &&
+        !event.target.closest('.tenant-switcher-button')) ||
+      (event.type === 'keydown' && event.key === 'Escape')
+    ) {
+      showTenantSwitcher.value = false;
+    }
+  }
+};
+
+const onChangeTenant = (tenant: Tenant) => {
+  showTenantSwitcher.value = false;
+  emits('changeTenant', tenant);
+};
+
+const onRemoveFromFavoriteTenants = (tenant: Tenant) => {
+  emits('removeFavoriteTenant', tenant);
+};
+
+watch(
+  () => props.tenants.length,
+  () => {
+    if (props.tenants.length === 1) {
+      onChangeTenant(props.tenants[0]);
+    }
+  },
+  { immediate: true },
+);
+</script>
+
+<style lang="scss" scoped>
+.tenant-label {
+  padding: 8px;
+  width: fit-content;
+  display: flex;
+  align-items: center;
+
+  span {
+    margin: 0 0.5em;
+  }
+}
+
+.site-logo {
+  width: 1em;
+  height: 1em;
+}
+</style>

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

@@ -0,0 +1,73 @@
+import UiMenuItem from '@/components/navigation/UiMenuItem.vue';
+import { Activity } from 'lucide-vue-next';
+import { vueRouter } from 'storybook-vue3-router';
+
+export default {
+  title: 'Composants/navigation/MenuItem',
+  component: UiMenuItem,
+  decorators: [
+    vueRouter([
+      {
+        name: 'route',
+        path: '/ma-route',
+      },
+    ]),
+  ],
+  argTypes: {},
+};
+
+const Template = (args) => ({
+  components: {
+    UiMenuItem,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+      <UiMenuItem v-bind="args"/>
+    `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  item: {
+    label: 'Item label',
+    link: { name: 'route' },
+  },
+};
+
+export const ExternalLink = Template.bind({});
+ExternalLink.args = {
+  item: {
+    label: 'Item label',
+    link: 'http://google.fr',
+  },
+};
+
+export const TargetLink = Template.bind({});
+TargetLink.args = {
+  item: {
+    label: 'Item label',
+    link: 'http://google.fr',
+  },
+  target: '_blank',
+};
+
+export const WithIcon = Template.bind({});
+WithIcon.args = {
+  item: {
+    label: 'Item label',
+    link: { name: 'route' },
+    icon: Activity,
+  },
+};
+
+export const Active = Template.bind({});
+Active.args = {
+  item: {
+    label: 'Item label',
+    link: { name: 'route' },
+    icon: Activity,
+  },
+  active: true,
+};