@ouestfrance/sipa-bms-ui 8.3.0 → 8.5.0

package/src/components/form/BmsInputToggle.vue

@@ -1,5 +1,5 @@
 <template>
-  <field :disabled="disabled">
+  <field :disabled="disabled" :small="small">
     <label class="input-toggle" :class="{ isOn: modelValue, disabled }">
       <span class="input-switch-info">{{ label }}</span>
       <UiBmsSwitch
@@ -16,21 +16,19 @@
 
 <script lang="ts" setup>
 import UiBmsSwitch from '@/components/form/UiBmsSwitch.vue';
+import { FieldComponentProps } from '@/plugins/field/field-component.model';
 
-withDefaults(
-  defineProps<{
-    disabled?: boolean;
-    name: string;
-    modelValue: boolean;
-    label: string;
-  }>(),
-  {
-    disabled: false,
-    modelValue: false,
-  },
-);
+interface Props extends FieldComponentProps {
+  name: string;
+  modelValue: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  disabled: false,
+  modelValue: false,
+});
 
-const $emits = defineEmits<{
+defineEmits<{
   (e: 'update:modelValue', value: any): void;
 }>();
 </script>
@@ -40,7 +38,7 @@ const $emits = defineEmits<{
   --label-color: var(--bms-grey-100);
   --cursor: pointer;
 
-  font-weight: bold;
+  font-weight: var(--field-label-font-weight);
   display: flex;
   align-items: center;
   gap: 0.5em;

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

@@ -1,6 +1,12 @@
 import BmsMultiSelect from '@/components/form/BmsMultiSelect.vue';
+import template from '@/documentation/template_field_dependency.mdx';
 
 export default {
+  parameters: {
+    docs: {
+      page: template,
+    },
+  },
   title: 'Composants/form/MultiSelect',
   component: BmsMultiSelect,
 };
@@ -13,7 +19,10 @@ const Template = (args) => ({
     BmsMultiSelect,
   },
   template: `
-    <BmsMultiSelect v-bind="args"/>
+    <div style="display:flex;gap:1em;">
+      <BmsMultiSelect v-bind="args"/>
+      <BmsMultiSelect v-bind="{...args, small:true}"/>
+    </div>
     `,
 });
 

package/src/components/form/BmsMultiSelect.vue

@@ -1,21 +1,15 @@
 <template>
   <BmsSelect
     v-model:open="open"
+    v-bind="$props"
     :model-value="modelValue"
     @update:model-value="onSelect"
-    :label="label"
-    :errors="errors"
-    :captions="captions"
-    :required="required"
-    :optional="optional"
-    :helperText="helperText"
-    :disabled="disabled"
-    :options="displayedOptions"
   >
     <template #input>
       <div class="tags">
         <BmsTag
           v-for="tag in displayValues"
+          :small="small"
           active
           @dismiss="removeOption(tag.value)"
         >
@@ -47,16 +41,10 @@ import BmsTag from './BmsTag.vue';
 import { Caption, InputOption } from '@/models';
 import _ from 'lodash';
 import { searchString } from '@/helpers';
+import { FieldComponentProps } from '@/plugins/field/field-component.model';
 
-export interface Props {
+export interface Props extends FieldComponentProps {
   options: InputOption[];
-  label?: string;
-  errors?: string[] | Caption[];
-  captions?: string[] | Caption[];
-  required?: boolean;
-  optional?: boolean;
-  disabled?: boolean;
-  helperText?: string;
   placeholder?: string;
 }
 
@@ -110,7 +98,7 @@ const displayValues = computed<InputOption[]>(() =>
 .tags {
   display: flex;
   gap: 0.5em;
-  padding: 10px 0;
+  padding: var(--field-margin);
   flex-wrap: wrap;
   width: 100%;
 

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

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

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

@@ -21,7 +21,10 @@ const Template = (args) => ({
     BmsSelect,
   },
   template: `
-    <BmsSelect v-bind="args"/>
+    <div style="display:flex;gap:1em;">
+      <BmsSelect v-bind="args"/>
+      <BmsSelect v-bind="{...args, small:true}"/>
+    </div>
     `,
 });
 

package/src/components/form/BmsSelect.vue

@@ -1,13 +1,5 @@
 <template>
-  <field
-    :label="label"
-    :errors="errors"
-    :captions="captions"
-    :required="required"
-    :optional="optional"
-    :helperText="helperText"
-    :disabled="disabled"
-  >
+  <field v-bind="$props">
     <span class="select-wrapper" ref="selectWrapper" :class="classes">
       <slot name="input">
         <input
@@ -29,6 +21,7 @@
         v-show="open"
         :options="options"
         :is-input-focused="open"
+        :small="small"
         @select="(option: any) => selectItem(option)"
       >
         <template #option="{ option }: { option: any }">
@@ -44,18 +37,12 @@ import { ChevronDown } from 'lucide-vue-next';
 import { Ref, computed, onMounted, ref, watch } from 'vue';
 import _ from 'lodash';
 import FieldDatalist from '@/plugins/field/FieldDatalist.vue';
-import { Caption } from '@/models/caption.model';
 import { InputOption } from '@/models';
+import { FieldComponentProps } from '@/plugins/field/field-component.model';
 
-export interface Props {
+export interface Props extends FieldComponentProps {
   options: InputOption[];
-  label?: string;
-  errors?: string[] | Caption[];
-  captions?: string[] | Caption[];
-  required?: boolean;
   optional?: boolean;
-  disabled?: boolean;
-  helperText?: string;
   placeholder?: string;
 }
 
@@ -63,6 +50,7 @@ const props = withDefaults(defineProps<Props>(), {
   label: '',
   disabled: false,
   required: false,
+  small: false,
 });
 const modelValue = defineModel<any>('modelValue', { required: true });
 const open = defineModel<boolean>('open', { default: false });
@@ -119,11 +107,10 @@ defineExpose({
   .select-wrapper {
     width: 100%;
     padding: 0 0 0 1em;
-    margin: 0.5em 0;
     border-radius: var(--bms-border-radius);
     border: 1px solid var(--field-border-color);
     background-color: var(--input-background-color);
-    min-height: 48px;
+    min-height: var(--field-height);
 
     display: flex;
     align-items: center;
@@ -141,7 +128,7 @@ defineExpose({
       }
       &-button {
         width: 1em;
-        margin: 0 1em 0 0.5em;
+        margin: 0 var(--field-padding);
         display: block;
       }
     }

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

@@ -31,6 +31,15 @@ const Template = (args) => ({
         <Trash/>
       </template>
     </BmsTag>
+  <br/>
+  <BmsTag v-bind="{...args, small:true}">
+      <template #default>
+        <Activity/> message
+      </template>
+      <template v-if="args.templateIcon" #closeIcon>
+        <Trash/>
+      </template>
+    </BmsTag>
     `,
 });
 

package/src/components/form/BmsTag.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
-    class="tag"
-    :class="{ active: active, disabled: disabled }"
-    @click="emits('click')"
-  >
+  <div class="tag" :class="{ active, disabled, small }" @click="emits('click')">
     <slot></slot>
     <span class="dismiss-button">
       <BmsIconButton @click.stop="emits('dismiss')" v-if="canBeDismissed">
@@ -21,8 +17,10 @@ interface Props {
   active?: boolean;
   disabled?: boolean;
   canBeDismissed?: boolean;
+  small?: boolean;
 }
-const props = withDefaults(defineProps<Props>(), {
+
+withDefaults(defineProps<Props>(), {
   active: false,
   disabled: false,
   canBeDismissed: true,
@@ -63,6 +61,11 @@ const emits = defineEmits(['dismiss', 'click']);
     }
   }
 
+  &.small {
+    padding: 2px 4px;
+    gap: 4px;
+  }
+
   &:focus,
   &:hover {
     --tag-color: var(--bms-main-140);

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

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

package/src/components/form/BmsTextArea.vue

@@ -1,13 +1,5 @@
 <template>
-  <field
-    :label="label"
-    :errors="errors"
-    :captions="captions"
-    :required="required"
-    :optional="optional"
-    :helperText="helperText"
-    :disabled="disabled"
-  >
+  <field v-bind="$props">
     <textarea
       ref="textArea"
       :value="modelValue"
@@ -26,18 +18,11 @@
 
 <script lang="ts" setup>
 import { Ref, computed, ref } from 'vue';
-import { Caption } from '@/models/caption.model';
+import { FieldComponentProps } from '@/plugins/field/field-component.model';
 
-export interface Props {
+export interface Props extends FieldComponentProps {
   modelValue: string;
-  label?: string;
-  required?: boolean;
-  optional?: boolean;
-  disabled?: boolean;
-  helperText?: string;
   placeholder?: string;
-  captions?: string[];
-  errors?: string[] | Caption[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -58,7 +43,11 @@ const onInput = (e: Event) => {
 };
 
 const classes = computed(() => {
-  return { 'is-error': props.errors?.length, 'is-disabled': props.disabled };
+  return {
+    'is-error': props.errors?.length,
+    'is-disabled': props.disabled,
+    'is-small': props.small,
+  };
 });
 
 const setFocus = () => {
@@ -79,8 +68,7 @@ defineExpose({
     align-items: center;
 
     width: 100%;
-    padding: 1em;
-    margin: 0.5em 0;
+    padding: var(--field-padding);
     border-radius: var(--bms-border-radius);
     border: 1px solid var(--field-border-color);
     background-color: var(--textarea-background-color);
@@ -107,6 +95,9 @@ defineExpose({
       --textarea-background-color: var(--bms-grey-25);
       pointer-events: none;
     }
+    &.is-small {
+      min-height: 56px;
+    }
   }
 }
 </style>

package/src/components/form/RawAutocomplete.spec.ts

@@ -27,10 +27,11 @@ const factory = (props?: PropsAndModel) => {
   });
 
   const inputElement = wrapper.get('input');
-  return { wrapper, inputElement };
+  const menu = wrapper.get('[data-testid="autocomplete-menu"]');
+  return { wrapper, inputElement, menu };
 };
 
-describe('BmsAutocomplete', () => {
+describe('RawAutocomplete', () => {
   it('should mount component correctly', async () => {
     const { wrapper } = factory();
 
@@ -40,8 +41,7 @@ describe('BmsAutocomplete', () => {
   });
 
   it('should show options on click', async () => {
-    const { wrapper, inputElement } = factory();
-    const menu = wrapper.get('[data-testid="autocomplete-menu"]');
+    const { wrapper, inputElement, menu } = factory();
 
     expect(menu.isVisible()).toBeFalsy();
     await inputElement.trigger('input');
@@ -58,8 +58,7 @@ describe('BmsAutocomplete', () => {
       modelValue: 'i',
     } as PropsAndModel);
     expect(inputElement.element.value).toStrictEqual('titi');
-    wrapper.setProps({ modelValue: 'u' });
-    await nextTick();
+    await wrapper.setProps({ modelValue: 'u' });
     expect(inputElement.element.value).toStrictEqual('tutu');
   });
 
@@ -68,8 +67,7 @@ describe('BmsAutocomplete', () => {
       modelValue: 'i',
     } as PropsAndModel);
     expect(inputElement.element.value).toStrictEqual('titi');
-    wrapper.setProps({ modelValue: 'not_found' });
-    await nextTick();
+    await wrapper.setProps({ modelValue: 'not_found' });
     expect(inputElement.element.value).toStrictEqual('');
   });
 
@@ -78,11 +76,33 @@ describe('BmsAutocomplete', () => {
       modelValue: 'i',
     } as PropsAndModel);
     expect(inputElement.element.value).toStrictEqual('titi');
-    wrapper.setProps({ modelValue: undefined });
-    await nextTick();
+    await wrapper.setProps({ modelValue: undefined });
     expect(inputElement.element.value).toStrictEqual('titi');
   });
 
+  it('should emit modelValue if clicks on option', async () => {
+    const { wrapper, inputElement, menu } = factory({
+      modelValue: null,
+    } as PropsAndModel);
+    await inputElement.trigger('click');
+    await menu.find('[data-testid="i"]').trigger('click');
+    expect(wrapper.emitted()['select']).toStrictEqual([
+      [{ label: 'titi', value: 'i' }],
+    ]);
+    expect(wrapper.emitted()['update:modelValue']).toStrictEqual([['i']]);
+  });
+
+  it('should reset modelValue if user removes text input', async () => {
+    const { wrapper, inputElement } = factory({
+      modelValue: 'i',
+    } as PropsAndModel);
+    expect(inputElement.element.value).toStrictEqual('titi');
+    inputElement.element.value = '';
+    await inputElement.trigger('input');
+    expect(inputElement.element.value).toStrictEqual('');
+    expect(wrapper.emitted()['update:modelValue']).toStrictEqual([[null]]);
+  });
+
   it('should emit event on option selection', async () => {
     const { wrapper, inputElement } = factory();
     const titi = wrapper.get('[data-testid="i"]');

package/src/components/form/RawAutocomplete.vue

@@ -1,13 +1,5 @@
 <template>
-  <field
-    :label="label"
-    :errors="errors"
-    :captions="captions"
-    :required="required"
-    :optional="optional"
-    :helperText="helperText"
-    :disabled="disabled"
-  >
+  <field v-bind="$props">
     <RawInputText
       ref="autocompleteInput"
       v-model="inputText"
@@ -16,6 +8,7 @@
       :class="classes"
       :placeholder="placeholder"
       :required="required"
+      :small="small"
       @input="onInput"
       v-model:focus="isInputFocused"
     >
@@ -46,6 +39,7 @@
         :can-add-new-option="canAddNewOption"
         :new-option="inputText"
         :options="filteredMenuItems"
+        :small="small"
         @select="selectItem"
         @add-new-option="(option: string) => emits('addNewOption', option)"
       >
@@ -61,23 +55,16 @@
 import { searchString } from '@/helpers/string.helper';
 import FieldDatalist from '@/plugins/field/FieldDatalist.vue';
 import { computed, ref, Ref, watch } from 'vue';
-import { Caption } from '@/models/caption.model';
 import RawInputText from '@/components/form/RawInputText.vue';
 import { InputOption, InputType } from '@/models';
 import { ChevronDown, ChevronUp, X } from 'lucide-vue-next';
+import { FieldComponentProps } from '@/plugins/field/field-component.model';
 
-export interface Props {
+export interface Props extends FieldComponentProps {
   options: InputOption[];
   label?: string;
-  required?: boolean;
-  optional?: boolean;
-  disabled?: boolean;
-  helperText?: string;
   placeholder?: string;
-  captions?: string[] | Caption[];
-  errors?: string[] | Caption[];
   open?: boolean;
-
   canAddNewOption?: boolean;
   newOption?: string;
 }
@@ -150,6 +137,9 @@ watch(
 );
 const onInput = () => {
   isInputFocused.value = true;
+  if (inputText.value === '') {
+    clearInput();
+  }
 };
 
 const setFocus = () => {

package/src/components/form/RawInputText.vue

@@ -28,20 +28,18 @@
 
 <script lang="ts" setup>
 import { computed, onMounted, Ref, ref } from 'vue';
-import { Caption, InputType } from '@/models';
+import { InputType } from '@/models';
+import { FieldComponentProps } from '@/plugins/field/field-component.model';
 
-export interface Props {
+export interface Props extends FieldComponentProps {
   modelValue: string | number;
-  required?: boolean;
   placeholder?: string;
-  disabled?: boolean;
   focus?: boolean;
   type?:
     | InputType.TEXT
     | InputType.NUMBER
     | InputType.DATE
     | InputType.DATETIME;
-  errors?: string[] | Caption[];
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -88,7 +86,11 @@ const onInput = (e: Event) => {
 };
 
 const classes = computed(() => {
-  return { 'is-error': props.errors?.length, 'is-disabled': props.disabled };
+  return {
+    'is-error': props.errors?.length,
+    'is-disabled': props.disabled,
+    'is-small': props.small,
+  };
 });
 </script>
 
@@ -98,12 +100,12 @@ const classes = computed(() => {
   align-items: center;
 
   width: 100%;
-  padding: 1em;
-  margin: 0.5em 0;
   border-radius: var(--bms-border-radius);
   border: 1px solid var(--field-border-color);
   background-color: var(--input-background-color);
-  height: 48px;
+
+  padding: var(--field-padding);
+  height: var(--field-height);
 
   &:hover {
     --field-border-color: var(--bms-grey-100);

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

@@ -30,6 +30,16 @@ const Template = (args) => ({
         </UiBmsInputCheckbox>
         Valeur de mon champ : {{ curentValue }}
       </div>
+
+      <br/>
+      <div>
+      <UiBmsInputCheckbox v-bind="{...args, small:true}" v-model="curentValue">
+          <template v-if="args.labelSlot" #label>
+            <span v-html='args.labelSlot'/>
+          </template>
+        </UiBmsInputCheckbox>
+        Valeur de mon champ : {{ curentValue }}
+      </div>
     `,
 });
 

package/src/components/layout/BmsCard.stories.js

@@ -1,8 +1,17 @@
 import BmsCard from '@/components/layout/BmsCard.vue';
+import { vueRouter } from 'storybook-vue3-router';
 
 export default {
   title: 'Composants/layout/Card',
   component: BmsCard,
+  decorators: [
+    vueRouter([
+      {
+        name: 'firstRoute',
+        path: '/toto',
+      },
+    ]),
+  ],
 };
 
 const Template = (args) => ({
@@ -21,6 +30,11 @@ const Template = (args) => ({
   `,
 });
 
+export const WithLink = Template.bind({});
+WithLink.args = {
+  to: '/toto',
+};
+
 export const Default = Template.bind({});
 Default.args = {};
 

package/src/components/layout/BmsCard.vue

@@ -7,7 +7,12 @@
       :class="{ animated, hasAction: !!$slots.action }"
     >
       <div class="card__body__content">
-        <slot></slot>
+        <BmsLink class="card__body__content__link" v-if="to" :to="to">
+          <slot></slot>
+        </BmsLink>
+        <template v-else>
+          <slot></slot>
+        </template>
       </div>
       <div class="card__body__action" v-if="!!$slots.action">
         <slot name="action"></slot>
@@ -19,11 +24,13 @@
 <script lang="ts" setup>
 import { StatusType } from '@/models';
 import { ref } from 'vue';
+import { RouteLocationRaw } from 'vue-router';
+import BmsLink from '../navigation/BmsLink.vue';
 
 const props = withDefaults(
   defineProps<{
     animated?: boolean;
-
+    to?: RouteLocationRaw;
     type?: StatusType;
   }>(),
   {
@@ -105,6 +112,11 @@ window.addEventListener('mousemove', onMouseMove);
       background-color: var(--summary-card-background-color);
       backdrop-filter: blur(40px);
       color: var(--summary-card-color);
+
+      &__link {
+        color: var(--summary-card-color);
+        text-decoration: none;
+      }
     }
 
     &__action {