@ouestfrance/sipa-bms-ui 8.19.0 → 8.21.0

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

@@ -2,6 +2,7 @@ import BmsAutocomplete from '@/components/form/BmsAutocomplete.vue';
 import { Cat, Heart, Wheat } from 'lucide-vue-next';
 
 import template from '@/documentation/template_field_dependency.mdx';
+import { DEFAULT_FIELD_INPUT } from '../../../.storybook/constants';
 
 export default {
   parameters: {
@@ -9,7 +10,8 @@ export default {
       page: template,
     },
   },
-  title: 'Composants/form/AutocompleteTextIcon',
+  tags: ['with_useable_code'],
+  title: 'Composants/form/Autocomplete',
   component: BmsAutocomplete,
   argTypes: {},
 };
@@ -31,6 +33,7 @@ const Template = (args) => ({
 
 export const Default = Template.bind({});
 Default.args = {
+  ...DEFAULT_FIELD_INPUT,
   label: 'My autocomplete field',
   options: [
     { label: 'titi', value: 'i' },
@@ -42,6 +45,7 @@ Default.args = {
 
 export const Disabled = Template.bind({});
 Disabled.args = {
+  ...DEFAULT_FIELD_INPUT,
   label: 'My autocomplete field',
   options: [
     { label: 'titi', value: 'i' },
@@ -54,6 +58,7 @@ Disabled.args = {
 
 export const Loading = Template.bind({});
 Loading.args = {
+  ...DEFAULT_FIELD_INPUT,
   label: 'My autocomplete field',
   loading: true,
   options: [
@@ -66,6 +71,7 @@ Loading.args = {
 
 export const WithStringArray = Template.bind({});
 WithStringArray.args = {
+  ...DEFAULT_FIELD_INPUT,
   label: 'My autocomplete field',
   options: ['titi', 'toto', 'tutu'],
   modelValue: '',
@@ -74,6 +80,7 @@ WithStringArray.args = {
 
 export const WithValue = Template.bind({});
 WithValue.args = {
+  ...DEFAULT_FIELD_INPUT,
   label: 'My autocomplete field',
   options: [
     { label: 'titi', value: 'i' },
@@ -86,6 +93,7 @@ WithValue.args = {
 export const Opened = Template.bind({});
 Opened.parameters = { pseudo: { focus: 'input' } };
 Opened.args = {
+  ...DEFAULT_FIELD_INPUT,
   label: 'My autocomplete field',
   options: [
     { label: 'titi', value: 'i' },
@@ -97,6 +105,7 @@ Opened.args = {
 };
 export const IconsWithValue = Template.bind({});
 IconsWithValue.args = {
+  ...DEFAULT_FIELD_INPUT,
   label: 'My autocomplete field',
   options: [
     { label: 'titi', value: 'i', icon: Heart },
@@ -109,6 +118,7 @@ IconsWithValue.args = {
 export const IconsOpened = Template.bind({});
 IconsOpened.parameters = { pseudo: { focus: 'input' } };
 IconsOpened.args = {
+  ...DEFAULT_FIELD_INPUT,
   label: 'My autocomplete field',
   options: [
     { label: 'titi', value: 'i', icon: Heart },

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

@@ -1,6 +1,6 @@
 import { BookOpen, CloudLightning } from 'lucide-vue-next';
 import BmsBetweenInput from './BmsBetweenInput.vue';
-import { StatusType, InputType } from '../../models';
+import { InputType, StatusType } from '../../models';
 
 import template from '@/documentation/template_field_dependency.mdx';
 
@@ -11,6 +11,7 @@ export default {
     },
   },
   title: 'Composants/form/BetweenInput',
+  tags: ['with_useable_code'],
   component: BmsBetweenInput,
 };
 
@@ -32,8 +33,20 @@ const Template = (args) => ({
   `,
 });
 
+const DEFAULT_BEETWEEN_INPUT = {
+  inputType: InputType.NUMBER,
+  label: 'My label',
+  required: false,
+  optional: false,
+  disabled: false,
+  helperText: 'help me !',
+  captions: [],
+  errors: [],
+};
+
 export const Default = Template.bind({});
 Default.args = {
+  ...DEFAULT_BEETWEEN_INPUT,
   label: 'My label',
   placeholderFrom: 'Placeholder From',
   placeholderTo: 'Placeholder To',
@@ -42,6 +55,7 @@ Default.args = {
 
 export const WithDate = Template.bind({});
 WithDate.args = {
+  ...DEFAULT_BEETWEEN_INPUT,
   inputType: InputType.DATETIME,
   label: 'My label',
   placeholderFrom: 'Placeholder From',
@@ -51,6 +65,7 @@ WithDate.args = {
 
 export const WithBadPresetValueDate = Template.bind({});
 WithBadPresetValueDate.args = {
+  ...DEFAULT_BEETWEEN_INPUT,
   inputType: InputType.DATETIME,
   label: 'My label',
   placeholderFrom: 'Placeholder From',
@@ -62,6 +77,7 @@ WithBadPresetValueDate.args = {
 
 export const WithErrors = Template.bind({});
 WithErrors.args = {
+  ...DEFAULT_BEETWEEN_INPUT,
   label: 'My label',
   placeholderFrom: 'Placeholder From',
   placeholderTo: 'Placeholder To',

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

@@ -9,6 +9,7 @@ export default {
     },
   },
   title: 'Composants/form/FilePicker',
+  tags: ['with_useable_code'],
   component: BmsFilePicker,
   argTypes: {
     limit: {
@@ -31,10 +32,16 @@ const Template = (args) => ({
 });
 
 export const Empty = Template.bind({});
-Empty.args = {};
+Empty.args = {
+  modelValue: [],
+  limit: 5,
+  dragOverMessage: 'Déposer vos fichiers ici',
+  dragOffMessage: 'Glissez votre fichier ici ou cliquez pour parcourir',
+};
 
 export const WithFiles = Template.bind({});
 WithFiles.args = {
+  limit: 5,
   modelValue: [
     {
       name: 'Name of a file',

package/src/components/form/BmsFilePicker.vue

@@ -7,9 +7,16 @@ const files: Ref<File[] | undefined> = ref();
 const isDragOver = ref(false);
 
 const props = withDefaults(
-  defineProps<{ modelValue?: File[]; limit: number }>(),
+  defineProps<{
+    dragOverMessage?: string;
+    dragOffMessage?: string;
+    modelValue?: File[];
+    limit: number;
+  }>(),
   {
     limit: 10,
+    dragOverMessage: 'Déposer votre image ici',
+    dragOffMessage: 'Glissez votre image ici ou cliquez pour parcourir',
   },
 );
 
@@ -101,10 +108,8 @@ function onDeleteFile(file: File) {
       @dragover.prevent
     >
       <label class="file-upload__label">
-        <template v-if="isDragOver">Déposer votre image ici</template>
-        <template v-else
-          >Glissez votre image ici ou cliquez pour parcourir</template
-        >
+        <template v-if="isDragOver">{{ dragOverMessage }}</template>
+        <template v-else>{{ dragOffMessage }}</template>
         <input
           data-testid="file-upload-input-file"
           type="file"

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

@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import { StatusType } from '@/models';
 
 import template from '@/documentation/template_field_dependency.mdx';
+import { DEFAULT_FIELD_INPUT } from '../../../.storybook/constants';
 
 export default {
   parameters: {
@@ -10,6 +11,7 @@ export default {
       page: template,
     },
   },
+  tags: ['with_useable_code'],
   title: 'Composants/form/InputBooleanCheckbox',
   component: BmsInputBooleanCheckbox,
 };
@@ -42,12 +44,14 @@ const Template = (args) => ({
 
 export const Default = Template.bind({});
 Default.args = {
+  ...DEFAULT_FIELD_INPUT,
   labelValue: 'check me !',
   name: 'myCheckboxName',
 };
 
 export const WithNotBooleanModelValue = Template.bind({});
 WithNotBooleanModelValue.args = {
+  ...DEFAULT_FIELD_INPUT,
   modelValue: 'COCHEEEEEEEE',
   labelValue: 'check me !',
   name: 'myCheckboxName',
@@ -55,6 +59,7 @@ WithNotBooleanModelValue.args = {
 
 export const DefaultWithCheckedValue = Template.bind({});
 DefaultWithCheckedValue.args = {
+  ...DEFAULT_FIELD_INPUT,
   modelValue: true,
   labelValue: 'check me !',
   name: 'myCheckboxName',
@@ -62,6 +67,7 @@ DefaultWithCheckedValue.args = {
 
 export const WithLabel = Template.bind({});
 WithLabel.args = {
+  ...DEFAULT_FIELD_INPUT,
   label: 'My label',
   labelValue: 'check me !',
   modelValue: false,
@@ -70,6 +76,7 @@ WithLabel.args = {
 
 export const WithLabelAsSlot = Template.bind({});
 WithLabelAsSlot.args = {
+  ...DEFAULT_FIELD_INPUT,
   name: 'myCheckboxName',
   labelValue: 'check me !',
   modelValue: false,
@@ -78,6 +85,7 @@ WithLabelAsSlot.args = {
 
 export const Disabled = Template.bind({});
 Disabled.args = {
+  ...DEFAULT_FIELD_INPUT,
   name: 'myCheckboxName',
   labelValue: 'check me !',
   label: 'My label',
@@ -87,6 +95,7 @@ Disabled.args = {
 
 export const Error = Template.bind({});
 Error.args = {
+  ...DEFAULT_FIELD_INPUT,
   name: 'myCheckboxName',
   labelValue: 'check me !',
   label: 'My label',

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

@@ -9,6 +9,7 @@ export default {
       page: template,
     },
   },
+  tags: ['with_useable_code'],
   title: 'Composants/form/InputCheckboxCaption',
   component: BmsInputCheckboxCaption,
 };
@@ -38,8 +39,18 @@ const Template = (args) => ({
     `,
 });
 
+const DEFAULT_CHECKBOXCAPTION_INPUT = {
+  label: 'Mon texte',
+  options: [],
+  required: false,
+  disabled: false,
+  captions: [],
+  errors: [],
+};
+
 export const Default = Template.bind({});
 Default.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
   modelValue: null,
   label: 'MyLabel',
   name: 'myInput',
@@ -47,6 +58,7 @@ Default.args = {
 
 export const WithLabelAsSlot = Template.bind({});
 WithLabelAsSlot.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
   modelValue: null,
   labelSlot: 'This is a slotted value',
   name: 'myInput',
@@ -54,6 +66,7 @@ WithLabelAsSlot.args = {
 
 export const WithCaptions = Template.bind({});
 WithCaptions.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
   label: 'My label',
   modelValue: null,
   captions: ['Caption form my label 1', 'Caption form my label 2'],
@@ -62,6 +75,7 @@ WithCaptions.args = {
 
 export const WithCaptionMode = Template.bind({});
 WithCaptionMode.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
   label: 'My label',
   modelValue: null,
   captions: [
@@ -75,6 +89,7 @@ WithCaptionMode.args = {
 
 export const Disabled = Template.bind({});
 Disabled.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
   label: 'My label',
   modelValue: null,
   disabled: true,
@@ -84,6 +99,7 @@ Disabled.args = {
 
 export const Error = Template.bind({});
 Error.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
   label: 'My label',
   modelValue: null,
   errors: ['Error 1', 'Error 2'],

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

@@ -11,6 +11,7 @@ export default {
       page: template,
     },
   },
+  tags: ['with_useable_code'],
   title: 'Composants/form/InputCheckboxCaptionGroup',
   component: BmsInputCheckboxCaptionGroup,
 };
@@ -30,8 +31,21 @@ const Template = (args) => ({
     `,
 });
 
+const DEFAULT_CHECKBOXCAPTION_INPUT = {
+  options: [],
+  required: false,
+  optional: false,
+  disabled: false,
+  helperText: 'help me !',
+  captions: [],
+  errors: [],
+  align: 'right',
+};
+
 export const DefaultRow = Template.bind({});
 DefaultRow.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
+  label: 'This is a field label',
   options: [
     { value: 'tata', label: 'Tata', captions: ['Caption for tata'] },
     { value: 'titi', label: 'Titi', captions: ['Caption for titi'] },
@@ -43,11 +57,11 @@ DefaultRow.args = {
     { label: 'Caption for group', mode: StatusType.Success },
   ],
   modelValue: [],
-  label: 'This is a field label',
 };
 
 export const DefaultColumn = Template.bind({});
 DefaultColumn.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
   options: [
     { value: 'tata', captions: ['Caption for tata'] },
     { value: 'titi', captions: ['Caption for titi'] },
@@ -61,6 +75,7 @@ DefaultColumn.args = {
 
 export const WithCaptionMode = Template.bind({});
 WithCaptionMode.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
   options: [
     {
       value: 'tata',
@@ -89,6 +104,7 @@ WithCaptionMode.args = {
 
 export const DefaultSelected = Template.bind({});
 DefaultSelected.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
   options: [
     { value: 'tata', captions: ['Caption for tata'] },
     { value: 'titi', captions: ['Caption for titi'] },
@@ -101,6 +117,7 @@ DefaultSelected.args = {
 
 export const FullHelp = Template.bind({});
 FullHelp.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
   options: [
     { value: 'tata', captions: ['Caption for tata'] },
     { value: 'titi', captions: ['Caption for titi'] },
@@ -115,6 +132,7 @@ FullHelp.args = {
 
 export const Disabled = Template.bind({});
 Disabled.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
   options: [
     { value: 'tata', captions: ['Caption for tata'] },
     { value: 'titi', captions: ['Caption for titi'] },
@@ -128,6 +146,7 @@ Disabled.args = {
 
 export const Required = Template.bind({});
 Required.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
   options: [
     { value: 'tata', captions: ['Caption for tata'] },
     { value: 'titi', captions: ['Caption for titi'] },
@@ -141,6 +160,7 @@ Required.args = {
 
 export const Errors = Template.bind({});
 Errors.args = {
+  ...DEFAULT_CHECKBOXCAPTION_INPUT,
   options: [
     { value: 'tata', captions: ['Caption for tata'] },
     { value: 'titi', captions: ['Caption for titi'] },

package/src/components/form/BmsInputText.vue

@@ -53,6 +53,7 @@ const props = withDefaults(defineProps<Props>(), {
   label: '',
   required: false,
   disabled: false,
+  small: false,
 });
 
 const input: Ref<HTMLElement | null> = ref(null);

package/src/components/form/BmsMultiSelect.vue

@@ -5,7 +5,7 @@
     :model-value="modelValue"
     :open="isDatalistOpen"
     @select="onSelect"
-    @click="setFocus"
+    @click="onSelectClick"
   >
     <template #input>
       <div class="tags">
@@ -24,11 +24,8 @@
           v-model="searching"
           class="search"
           :disabled="disabled"
-          @focus="openDatalist"
-          @click="openDatalist"
+          @input="onInput"
           @keyup.down="openDatalist"
-          @input="openDatalist"
-          @keyup.backspace="onBackspace"
         />
       </div>
 
@@ -37,16 +34,8 @@
           <X class="icon icon-clear" @click.stop="clearInput" />
         </template>
         <template v-else>
-          <ChevronUp
-            v-if="isDatalistOpen"
-            class="icon icon-toggle-button"
-            @click="closeDatalist"
-          />
-          <ChevronDown
-            v-else
-            class="icon icon-toggle-button"
-            @click="openDatalist"
-          />
+          <ChevronUp v-if="isDatalistOpen" class="icon icon-toggle-button" />
+          <ChevronDown v-else class="icon icon-toggle-button" />
         </template>
       </span>
     </template>
@@ -67,7 +56,7 @@ import { InputOption } from '@/models';
 import { searchString } from '@/helpers';
 import { FieldComponentProps } from '@/plugins/field/field-component.model';
 import RawSelect from './RawSelect.vue';
-import { onClickOutside } from '@vueuse/core';
+import { onClickOutside, onKeyDown, onKeyUp } from '@vueuse/core';
 
 export interface Props extends FieldComponentProps {
   options: InputOption[] | string[];
@@ -80,9 +69,16 @@ const props = withDefaults(defineProps<Props>(), {
   required: false,
 });
 
-const inputElement: Ref<HTMLElement | null> = ref(null);
+const emits = defineEmits<{
+  select: [option: InputOption | string];
+  input: [e: InputEvent];
+}>();
+
+const modelValue = defineModel<string[] | null>('modelValue', { default: [] });
 
+const inputElement: Ref<HTMLElement | null> = ref(null);
 const isDatalistOpen = ref(false);
+const searching = ref('');
 
 const closeDatalist = () => (isDatalistOpen.value = false);
 const openDatalist = () => {
@@ -91,13 +87,9 @@ const openDatalist = () => {
   }
 };
 
-const searching = ref('');
-
-const modelValue = defineModel<string[] | null>('modelValue', { default: [] });
-
-onClickOutside(inputElement, closeDatalist, {
-  ignore: ['.datalist-option', '.icon-toggle-button'],
-});
+const onBlur = () => {
+  closeDatalist();
+};
 
 const onBackspace = () => {
   if (
@@ -107,6 +99,21 @@ const onBackspace = () => {
   )
     modelValue.value.splice(-1);
 };
+onClickOutside(inputElement, closeDatalist, {
+  ignore: ['.datalist-option', '.icon-toggle-button'],
+});
+onKeyUp('Escape', closeDatalist);
+onKeyUp('Tab', closeDatalist);
+
+onKeyDown('Backspace', onBackspace);
+
+const onSelectClick = () => {
+  isDatalistOpen.value = !isDatalistOpen.value;
+};
+const onInput = (e: InputEvent) => {
+  emits('input', e);
+  openDatalist();
+};
 
 const setFocus = () => {
   if (inputElement.value) {
@@ -122,8 +129,8 @@ const onSelect = (option: InputOption | string) => {
   }
 
   searching.value = '';
+  emits('select', option);
   setFocus();
-  closeDatalist();
 };
 
 const removeOption = (value: string) => {

package/src/components/form/BmsSelect.vue

@@ -3,7 +3,7 @@
     v-bind="$props"
     :open="isDatalistOpen"
     @select="onSelect"
-    @click="setFocus"
+    @click="onSelectClick"
   >
     <template #input>
       <input
@@ -15,17 +15,11 @@
         :placeholder="placeholder"
         :required="required"
         :disabled="disabled"
-        @focus="openDatalist"
-        @click="openDatalist"
         @keyup.down="openDatalist"
       />
       <span class="icon-toggle-container">
-        <ChevronUp
-          v-if="isDatalistOpen"
-          class="icon-toggle-button"
-          @click="closeDatalist"
-        />
-        <ChevronDown v-else class="icon-toggle-button" @click="openDatalist" />
+        <ChevronUp v-if="isDatalistOpen" class="icon-toggle-button" />
+        <ChevronDown v-else class="icon-toggle-button" />
       </span>
     </template>
   </RawSelect>
@@ -33,12 +27,12 @@
 
 <script lang="ts" setup>
 import { ChevronDown, ChevronUp } from 'lucide-vue-next';
-import { computed, Ref, ref } from 'vue';
+import { computed, Ref, ref, watch } from 'vue';
 import _ from 'lodash';
 import { InputOption } from '@/models';
 import { FieldComponentProps } from '@/plugins/field/field-component.model';
 import RawSelect from './RawSelect.vue';
-import { onClickOutside } from '@vueuse/core';
+import { onClickOutside, onKeyUp } from '@vueuse/core';
 
 export interface Props extends FieldComponentProps {
   options: InputOption[];
@@ -55,10 +49,13 @@ const props = withDefaults(defineProps<Props>(), {
   open: false,
 });
 
+const emits = defineEmits<{
+  select: [value: any];
+}>();
+
 const modelValue = defineModel<any>('modelValue', { required: true });
 
 const inputElement: Ref<HTMLElement | null> = ref(null);
-
 const isDatalistOpen = ref(props.open);
 
 const closeDatalist = () => {
@@ -71,13 +68,11 @@ const openDatalist = () => {
   }
 };
 
-const emits = defineEmits<{
-  select: [value: any];
-}>();
-
 onClickOutside(inputElement, closeDatalist, {
   ignore: ['.datalist-option', '.icon-toggle-button'],
 });
+onKeyUp('Escape', closeDatalist);
+onKeyUp('Tab', closeDatalist);
 
 const displayValue = computed(() => {
   const option = props.options.find((o) =>
@@ -100,6 +95,13 @@ const onSelect = (option: any) => {
   closeDatalist();
 };
 
+const onSelectClick = () => {
+  isDatalistOpen.value = !isDatalistOpen.value;
+  if (isDatalistOpen) {
+    setFocus();
+  }
+};
+
 defineExpose({
   setFocus,
 });

package/src/components/form/RawAutocomplete.vue

@@ -10,7 +10,8 @@
       :required="required"
       :small="small"
       @input="onInput"
-      @focus="onFocus"
+      @click="onClick"
+      @keyup.down="openDatalist"
     >
       <template #icon-start>
         <slot name="icon-start"></slot>
@@ -58,7 +59,7 @@ 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';
-import { MaybeElementRef, onClickOutside } from '@vueuse/core';
+import { MaybeElementRef, onClickOutside, onKeyUp } from '@vueuse/core';
 
 export interface Props extends FieldComponentProps {
   options: InputOption[];
@@ -82,6 +83,10 @@ const rawInput: Ref<HTMLElement | null> = ref(null);
 const emits = defineEmits<{
   addNewOption: [newOption: string];
   select: [option: InputOption];
+  blur: [];
+  focus: [];
+  click: [];
+  input: [e: InputEvent];
 }>();
 
 const getValidOptionByLabel = (label: string) =>
@@ -102,6 +107,13 @@ onClickOutside(rawInput as MaybeElementRef, closeDatalist, {
   ignore: ['.datalist-option', '.icon-toggle-button', '.icon-clear'],
 });
 
+const onBlur = () => {
+  emits('blur');
+  closeDatalist();
+};
+onKeyUp('Escape', onBlur);
+onKeyUp('Tab', onBlur);
+
 const classes = computed(() => {
   return { 'is-error': props.errors?.length, 'is-disabled': props.disabled };
 });
@@ -148,8 +160,8 @@ watch(
   },
 );
 
-const onFocus = () => {
-  openDatalist();
+const onClick = () => {
+  isDatalistOpen.value = !isDatalistOpen.value;
 };
 
 const onInput = () => {

package/src/components/form/RawInputText.vue

@@ -21,6 +21,7 @@
       @blur="$emits('blur')"
       @input="onInput"
       @focus="$emits('focus')"
+      @click="$emits('click')"
     />
     <span class="field__input-icon field__input-icon--end">
       <slot name="icon-end"></slot>