@ouestfrance/sipa-bms-ui 8.4.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.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;
 }

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/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;
+}