@ouestfrance/sipa-bms-ui 8.3.0 → 8.5.0

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

@@ -0,0 +1,113 @@
+import BmsFixedMenu from '@/components/navigation/BmsFixedMenu.vue';
+import { Activity, ArrowBigDown, Globe, User } from 'lucide-vue-next';
+import { vueRouter } from 'storybook-vue3-router';
+
+export default {
+  title: 'Composants/navigation/FixedMenu',
+  component: BmsFixedMenu,
+  argTypes: {
+    items: {},
+  },
+  decorators: [
+    vueRouter([
+      {
+        name: 'home',
+        path: '/',
+      },
+      {
+        name: 'activity',
+        path: '/activity',
+      },
+      {
+        name: 'users',
+        path: '/users',
+      },
+      {
+        name: 'thirdRoute',
+        path: '/tutu',
+      },
+    ]),
+  ],
+};
+
+const Template = (args) => ({
+  components: {
+    BmsFixedMenu,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BmsFixedMenu v-bind="args">
+      <template v-if="args.additionalSlot" #additional>Additional</template>
+      <template v-if="args.footerSlot" #footer>Footer</template>
+    </BmsFixedMenu>
+  `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  items: [
+    {
+      label: 'Activity',
+      link: '/activity',
+      icon: Activity,
+    },
+    {
+      label: 'Users',
+      link: '/users',
+      icon: User,
+    },
+    {
+      label: 'Parent',
+      items: [
+        {
+          label: 'tata',
+          link: '/tata',
+          icon: Globe,
+        },
+        {
+          label: 'tutu',
+          link: '/tutu',
+        },
+      ],
+    },
+  ],
+  activeLink: '/',
+};
+
+export const WithActiveLink = Template.bind({});
+WithActiveLink.args = {
+  items: [
+    {
+      label: 'Activity',
+      link: '/activity',
+      icon: Activity,
+    },
+    {
+      label: 'Users',
+      link: '/users',
+      icon: User,
+    },
+  ],
+  activeLink: '/activity',
+};
+
+export const WithSlots = Template.bind({});
+WithSlots.args = {
+  items: [
+    {
+      label: 'Activity',
+      link: '/activity',
+      icon: Activity,
+    },
+    {
+      label: 'Users',
+      link: '/users',
+      icon: User,
+    },
+  ],
+  activeLink: '/users',
+  additionalSlot: true,
+  footerSlot: true,
+};

package/src/components/navigation/BmsFixedMenu.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="menu__container">
+    <div class="menu__top">
+      <slot name="top"></slot>
+    </div>
+
+    <BmsMenuNav :items="items" :active-link="activeLink">
+      <template #additional>
+        <slot name="additional"></slot>
+      </template>
+    </BmsMenuNav>
+
+    <div class="menu__copyright">
+      <slot name="footer">
+        <p class="menu__copyright-madein">Made with ♥ by BMS</p>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { RouteLocationNormalizedLoaded } from 'vue-router';
+import { MenuItem, ParentMenuItem } from '@/models';
+import BmsMenuNav from './BmsMenuNav.vue';
+
+interface Props {
+  items: (MenuItem | ParentMenuItem)[];
+  activeLink: RouteLocationNormalizedLoaded;
+}
+defineProps<Props>();
+</script>
+
+<style lang="scss" scoped>
+.menu {
+  &__container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    background: var(--bms-white);
+    border-right: 1px solid var(--bms-grey-10);
+    padding: 0;
+
+    nav {
+      scrollbar-width: none;
+      padding: 0;
+      overflow-x: hidden;
+      max-width: calc(var(--bms-menu-width) + 5px);
+
+      :deep(ul) {
+        li {
+          width: var(--bms-menu-width);
+        }
+      }
+    }
+  }
+
+  &__top {
+    margin: 0.5em;
+  }
+
+  &__copyright {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 80px;
+    overflow-x: hidden;
+  }
+}
+</style>

package/src/components/navigation/BmsMenuNav.vue

@@ -92,7 +92,11 @@ const isLinkRecognized = (link: RouteLocationRaw): boolean => {
   if ((link as RouteLocationPathRaw).path) {
     return (link as RouteLocationPathRaw).path === props.activeLink.path;
   }
-  return link === props.activeLink.name || link === props.activeLink.path;
+  return (
+    link === props.activeLink.name ||
+    link === props.activeLink.path ||
+    link === props.activeLink
+  );
 };
 
 const isItemActive = (menuItem: MenuItem | ParentMenuItem): boolean => {

package/src/components/table/UiBmsTableRow.vue

@@ -28,9 +28,10 @@
         :key="cell.key"
       >
         <div v-if="isChildElement" class="bms-table__row__cell--child-element">
-          <div class="bms-table__row__cell--child-element__icon">
-            <CornerDownRight v-if="index === 0" />
-          </div>
+          <CornerDownRight
+            v-if="index === 0"
+            class="bms-table__row__cell--child-element__icon"
+          />
           <slot
             :name="cell.key"
             :row="item.childElement"
@@ -141,7 +142,6 @@ const getAlignClass = (header: TableHeader) => {
       align-items: flex-end;
       &__icon {
         display: flex;
-        min-width: 1em;
         margin-right: 1em;
       }
     }

package/src/index.ts

@@ -47,6 +47,7 @@ import BmsStepper from './components/layout/BmsStepper.vue';
 
 import BmsBackButton from './components/navigation/BmsBackButton.vue';
 import BmsBreadcrumb from './components/navigation/BmsBreadcrumb.vue';
+import BmsFixedMenu from './components/navigation/BmsFixedMenu.vue';
 import BmsLink from './components/navigation/BmsLink.vue';
 import BmsMenu from './components/navigation/BmsMenu.vue';
 import BmsMenuNav from './components/navigation/BmsMenuNav.vue';
@@ -115,6 +116,7 @@ export const createBmsUi = () => ({
 
     app.component('BmsBackButton', BmsBackButton);
     app.component('BmsBreadcrumb', BmsBreadcrumb);
+    app.component('BmsFixedMenu', BmsFixedMenu);
     app.component('BmsLink', BmsLink);
     app.component('BmsMenu', BmsMenu);
     app.component('BmsMenuNav', BmsMenuNav);
@@ -189,6 +191,7 @@ export {
   BmsStepper,
   BmsBackButton,
   BmsBreadcrumb,
+  BmsFixedMenu,
   BmsLink,
   BmsMenu,
   BmsMenuNav,

package/src/plugins/field/FieldComponent.stories.js

@@ -21,7 +21,7 @@ const Template = (args) => ({
         <template #icon-start v-if="args.iconStart">
           <Flashlight/>
         </template>
-        <p>slot for my input here</p>
+       slot for my input here
         <template #icon-end v-if="args.iconEnd">
           <Album/>
         </template>
@@ -35,6 +35,13 @@ Default.args = {
   captions: ['Helping text'],
 };
 
+export const Small = Template.bind({});
+Small.args = {
+  small: true,
+  label: 'My label',
+  captions: ['Helping text'],
+};
+
 export const WithIcons = Template.bind({});
 WithIcons.args = {
   label: 'My label',

package/src/plugins/field/FieldComponent.vue

@@ -52,20 +52,12 @@ import { BmsTooltip, convertStringToCaption, StatusType } from '@/index';
 import { useElementBounding, useWindowSize } from '@vueuse/core';
 import { Caption } from '@/models/caption.model';
 import BmsCaption from '@/components/feedback/BmsCaption.vue';
+import { FieldComponentProps } from './field-component.model';
 
-interface Props {
-  label?: string;
-  required?: boolean;
-  optional?: boolean;
-  helperText?: string;
-  errors?: string[] | Caption[];
-  captions?: string[] | Caption[];
-  disabled?: boolean;
-}
-
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<FieldComponentProps>(), {
   label: '',
   optional: false,
+  small: false,
 });
 
 const datalist: Ref<HTMLSpanElement | null> = ref<HTMLSpanElement | null>(null);
@@ -74,9 +66,12 @@ const { y } = useElementBounding(datalist);
 const { height: windowHeight } = useWindowSize();
 
 const classes = computed(() => {
-  return `field${props.errors?.length ? ' is-error' : ''}${
-    props.disabled ? ' is-disabled' : ''
-  }`;
+  return {
+    field: true,
+    'is-error': props.errors?.length,
+    'is-disabled': props.disabled,
+    'is-small': props.small,
+  };
 });
 
 const computedErrors: ComputedRef<Caption[]> = computed(() => {
@@ -127,9 +122,19 @@ const getCaptionIdentifier = (caption: string | Caption): string => {
   --field-label-color: var(--bms-font-color);
   background: transparent;
 
+  --field-height: 48px;
+  --field-padding: 1em;
+  --field-margin: 0.5em 0;
+  --field-label-font-weight: bold;
+
   &__errors {
     font-size: 14px;
     color: var(--bms-red-75);
+    margin-bottom: var(--field-margin);
+  }
+
+  &__captions {
+    margin-bottom: var(--field-margin);
   }
 
   &__wrapper {
@@ -146,7 +151,7 @@ const getCaptionIdentifier = (caption: string | Caption): string => {
 
     &__title {
       font-size: 1em;
-      font-weight: bold;
+      font-weight: var(--field-label-font-weight);
       color: var(--field-label-color);
     }
 
@@ -176,6 +181,14 @@ const getCaptionIdentifier = (caption: string | Caption): string => {
     }
   }
 
+  &.is-small {
+    --field-height: 28px;
+    --field-padding: 0.5em;
+    --field-margin: 0;
+    --field-label-font-weight: normal;
+    // color: var(--bms-grey-75);
+  }
+
   &.is-error {
     --field-label-color: var(--bms-danger-color);
   }
@@ -203,6 +216,7 @@ const getCaptionIdentifier = (caption: string | Caption): string => {
   &__input {
     display: flex;
     align-items: center;
+    margin: var(--field-margin);
   }
 }
 </style>

package/src/plugins/field/FieldDatalist.stories.js

@@ -14,6 +14,8 @@ const Template = (args) => ({
   },
   template: `
     <FieldDatalist v-bind="args"/>
+    <br/>
+    <FieldDatalist v-bind="{...args, small:true}"/>
     `,
 });
 

package/src/plugins/field/FieldDatalist.vue

@@ -12,6 +12,7 @@
       :data-testid="option.value"
       :class="{
         selected: index === currentSelectedItemIndex,
+        small,
       }"
       @click.prevent="onClick(option)"
     >
@@ -37,11 +38,13 @@ export interface Props {
   isInputFocused: boolean;
   canAddNewOption?: boolean;
   newOption?: string;
+  small?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   canAddNewOption: false,
   newOption: '',
+  small: false,
 });
 
 const currentSelectedItemIndex = ref<number>(-1);
@@ -113,6 +116,8 @@ ul {
   list-style-type: none;
   padding: 0;
   margin: 0;
+  --field-padding: 0.4em;
+  --field-height: 4rem;
 
   li:first-of-type {
     border-top: 1px solid var(--bms-grey-10);
@@ -131,11 +136,16 @@ ul {
     display: flex;
     align-items: center;
     cursor: pointer;
-    padding: 0.4em;
+    padding: var(--field-padding);
     border: 1px solid var(--bms-grey-10);
     border-top: none;
     background-color: var(--bms-white);
-    min-height: 4rem;
+    min-height: var(--field-height);
+
+    &.small {
+      --field-padding: 0.2em 0.4em;
+      --field-height: 2rem;
+    }
 
     &:hover,
     &.selected {

package/src/plugins/field/field-component.model.ts

@@ -0,0 +1,12 @@
+import { Caption } from '@/models';
+
+export interface FieldComponentProps {
+  label?: string;
+  required?: boolean;
+  optional?: boolean;
+  helperText?: string;
+  errors?: string[] | Caption[];
+  captions?: string[] | Caption[];
+  disabled?: boolean;
+  small?: boolean;
+}

package/src/showroom/pages/autocomplete.vue

@@ -1,5 +1,9 @@
 <template>
   <BmsBackButton :fallback="{ path: '/' }" />
+  <br />
+  <BmsButton @click="inputLabelValue = '1'">Set value to '1'</BmsButton>
+  <br />
+  Valeur: {{ inputLabelValue }}
   <BmsAutocomplete
     label="Autocomplete avec label/value"
     :options="optionsLabelValue"
@@ -8,22 +12,20 @@
     @add-new-option="onAddNewOption"
   />
 
-  Valeur: {{ inputLabelValue }}
-
+  Valeur: {{ inputValueIcon }}
   <BmsAutocomplete
     label="Autocomplete avec icones"
     :options="optionsIcon"
     v-model="inputValueIcon"
     @select="(o) => console.log('select', o.value)"
   />
-  Valeur: {{ inputValueIcon }}
 
+  Valeur: {{ inputText }}
   <BmsAutocomplete
     label="Autocomplete avec tableau de strings"
     :options="optionsText"
     v-model="inputText"
   />
-  Valeur: {{ inputText }}
 </template>
 
 <script setup lang="ts">
@@ -31,6 +33,7 @@ import { BmsAutocomplete, BmsBackButton } from '@/index';
 import { Heart, Cat } from 'lucide-vue-next';
 import { range } from 'lodash';
 import { ref } from 'vue';
+import BmsButton from '@/components/button/BmsButton.vue';
 
 const optionsLabelValue = ref(
   range(0, 30).map((i) =>

package/src/showroom/pages/forms.vue

@@ -320,6 +320,34 @@
     </BmsForm>
     <hr />
 
+    <h2>Small components</h2>
+    <BmsInputText label="Text" small v-model="text" />
+    <BmsInputBooleanCheckbox
+      label="Boolean checkbox"
+      label-value="Yes"
+      name="boolean"
+      small
+      v-model="firstToggle"
+    />
+    <BmsSelect
+      label="Select"
+      small
+      v-model="selected"
+      :options="[
+        { label: 'value1', value: 'value1' },
+        { label: 'value2', value: 'value2' },
+      ]"
+    />
+    <BmsTextArea label="Textarea" small v-model="text2" />
+    <BmsInputToggle
+      name="toggle-name"
+      label="Toggle"
+      label-value="Yes"
+      small
+      v-model="firstToggle"
+    />
+    <hr />
+
     <BmsButton submit>Submit</BmsButton>
   </form>
 </template>