@ouestfrance/sipa-bms-ui 8.30.0 → 8.31.0

package/dist/components/form/BmsCombobox.vue.d.ts

@@ -56,6 +56,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
         option: InputOption;
         isSelected: boolean;
     }): any;
+    'search-hint'?(_: {}): any;
     'new-option'?(_: {
         newOption: string;
     }): any;

package/dist/components/table/BmsTable.vue.d.ts

@@ -1,4 +1,3 @@
-import { defaultSearchFunction } from '../../composables/search.helper';
 import { Filter, SavedFilter, SelectMode, Sort, TableHeader, TableMode } from '../../models';
 interface UiTableProps {
     disableSearch?: boolean;
@@ -17,7 +16,7 @@ interface UiTableProps {
     selectable?: boolean;
     selectableDisabled?: boolean;
     selectMode?: SelectMode.DEFAULT | SelectMode.SINGLE;
-    customSearch?: (item: unknown, searchValue: string, defaultSearch: typeof defaultSearchFunction) => boolean;
+    customSearch?: (item: unknown, searchValue: string) => boolean;
 }
 type __VLS_Props = UiTableProps;
 declare const __VLS_defaults: {

package/dist/composables/index.d.ts

@@ -1,5 +1,6 @@
 export * from './clipboard.composable';
 export * from './pagination.composable';
 export * from './search.composable';
+export { bmsDefaultSearchFilterFunction } from './search.helper';
 export * from './userPref.composable';
 export * from './sort.composable';

package/dist/composables/search.helper.d.ts

@@ -1,5 +1,5 @@
 import { Filter } from '../models';
-export declare const defaultSearchFunction: (item: unknown, searchValue: string) => boolean;
+export declare const bmsDefaultSearchFilterFunction: (item: unknown, searchValue: string) => boolean;
 export declare const isBetweenFilter: (filter: Filter) => boolean;
 export declare const defaultNumberFilterFunction: (itemNumber: number, search: number, isAfterSearch: boolean) => boolean;
 export declare const defaultIsAfterDateFilterFunction: (dateItem: Date, search: Date, isGreaterThan: boolean) => boolean;

package/dist/plugins/field/FieldDatalist.vue.d.ts

@@ -26,6 +26,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<Pr
     option?(_: {
         option: InputOption;
     }): any;
+    'search-hint'?(_: {}): any;
     'new-option'?(_: {
         newOption: string;
     }): any;

package/dist/sipa-bms-ui.css

@@ -578,7 +578,7 @@
   position: relative;
   display: inline-block;
   outline: none;
-}ul[data-v-271f00b1] {
+}ul[data-v-41a0e195] {
   border-style: none;
   border-radius: 0 0 4px 4px;
   text-decoration: none;
@@ -588,18 +588,18 @@
   --field-padding: 0.4em;
   --field-height: 4rem;
 }
-ul li[data-v-271f00b1]:first-of-type {
+ul li[data-v-41a0e195]:first-of-type {
   border-top: 1px solid var(--bms-grey-10);
 }
-ul li[data-v-271f00b1]:first-child {
+ul li[data-v-41a0e195]:first-child {
   border-top-left-radius: var(--bms-border-radius);
   border-top-right-radius: var(--bms-border-radius);
 }
-ul li[data-v-271f00b1]:last-child {
+ul li[data-v-41a0e195]:last-child {
   border-bottom-left-radius: var(--bms-border-radius);
   border-bottom-right-radius: var(--bms-border-radius);
 }
-ul li[data-v-271f00b1] {
+ul li[data-v-41a0e195] {
   display: flex;
   align-items: center;
   cursor: pointer;
@@ -611,11 +611,11 @@ ul li[data-v-271f00b1] {
   word-break: break-word;
   line-break: anywhere;
 }
-ul li.small[data-v-271f00b1] {
+ul li.small[data-v-41a0e195] {
   --field-padding: 0.2em 0.4em;
   --field-height: 2rem;
 }
-ul li[data-v-271f00b1]:hover, ul li.selected[data-v-271f00b1] {
+ul li[data-v-41a0e195]:hover, ul li.selected[data-v-41a0e195] {
   background-color: var(--bms-grey-10);
 }.input-wrapper[data-v-47a0ec36] {
   display: flex;
@@ -1361,12 +1361,12 @@ input[type=radio][data-v-c0c9efa3]:checked::before {
   line-height: 1;
   width: 100%;
   height: 100%;
-}.select-wrapper[data-v-0a7eac6b] {
+}.select-wrapper[data-v-1ad08254] {
   --field-border-color: var(--bms-grey-50);
   --field-border-color-active: var(--bms-main-100);
   --input-background-color: var(--bms-white);
 }
-.select-wrapper .select-input[data-v-0a7eac6b] {
+.select-wrapper .select-input[data-v-1ad08254] {
   width: 100%;
   padding: 0 0 0 var(--field-padding);
   border-radius: var(--bms-border-radius);
@@ -1377,7 +1377,7 @@ input[type=radio][data-v-c0c9efa3]:checked::before {
   align-items: center;
   justify-content: space-between;
 }
-.select-wrapper .select-input input[data-v-0a7eac6b] {
+.select-wrapper .select-input input[data-v-1ad08254] {
   border: none;
   background-color: transparent;
   flex-grow: 1;
@@ -1393,49 +1393,49 @@ input[type=radio][data-v-c0c9efa3]:checked::before {
   width: 100%;
   height: 100%;
 }
-.select-wrapper .select-input__tags[data-v-0a7eac6b] {
+.select-wrapper .select-input__tags[data-v-1ad08254] {
   display: flex;
   gap: 0.5em;
   padding: var(--field-margin);
   flex-wrap: wrap;
 }
-.select-wrapper .select-input__tags[data-v-0a7eac6b]:not(:empty) {
+.select-wrapper .select-input__tags[data-v-1ad08254]:not(:empty) {
   margin-right: 0.5em;
 }
-.select-wrapper .select-input[data-v-0a7eac6b]:hover {
+.select-wrapper .select-input[data-v-1ad08254]:hover {
   --field-border-color: var(--bms-grey-100);
 }
-.select-wrapper .select-input[data-v-0a7eac6b]:has(input:focus) {
+.select-wrapper .select-input[data-v-1ad08254]:has(input:focus) {
   --field-border-color: var(--field-border-color-active);
 }
-.select-wrapper .select-input.is-error[data-v-0a7eac6b] {
+.select-wrapper .select-input.is-error[data-v-1ad08254] {
   --field-border-color: var(--bms-red-100);
   --input-background-color: var(--bms-red-25);
 }
-.select-wrapper .select-input.is-disabled[data-v-0a7eac6b] {
+.select-wrapper .select-input.is-disabled[data-v-1ad08254] {
   --field-border-color: var(--bms-grey-25);
   --input-background-color: var(--bms-grey-25);
   pointer-events: none;
 }
-.select-wrapper .icon-container[data-v-0a7eac6b] {
+.select-wrapper .icon-container[data-v-1ad08254] {
   height: 100%;
   display: flex;
   align-items: center;
 }
-.select-wrapper .icon-container[data-v-0a7eac6b]:hover {
+.select-wrapper .icon-container[data-v-1ad08254]:hover {
   cursor: pointer;
 }
-.select-wrapper .icon-button[data-v-0a7eac6b] {
+.select-wrapper .icon-button[data-v-1ad08254] {
   width: 1em;
   margin: 0 var(--field-padding);
   display: block;
 }
-.combobox-option[data-v-0a7eac6b] {
+.combobox-option[data-v-1ad08254] {
   display: flex;
   align-items: center;
   gap: 0.5em;
 }
-.combobox-option__check[data-v-0a7eac6b] {
+.combobox-option__check[data-v-1ad08254] {
   width: 1em;
   display: flex;
   justify-content: center;
@@ -2737,7 +2737,7 @@ nav .additional[data-v-8b4752b4] {
   padding-right: 32px;
 }.table-search[data-v-c674a0d1] {
   width: 260px;
-}.table-search[data-v-10d05366] {
+}.table-search[data-v-fd6979a1] {
   width: 260px;
 }.cocarde[data-v-d1c7b421] {
   display: flex;

package/dist/sipa-bms-ui.es.js

@@ -40183,17 +40183,25 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
               selected: index === currentSelectedItemIndex.value,
               small: __props.small
             }),
+            onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
+            }, ["prevent"])),
             onClick: withModifiers(($event) => onClick(option), ["stop"])
           }, [
             renderSlot(_ctx.$slots, "option", { option }, () => [
               createTextVNode(toDisplayString(option.label === null ? "N/A" : option.label), 1)
             ], true)
-          ], 10, _hoisted_1$V);
+          ], 42, _hoisted_1$V);
         }), 128)),
-        displayNewOption.value ? (openBlock(), createElementBlock("li", {
+        _ctx.$slots["search-hint"] && displayedOptions.value.length === 0 && !displayNewOption.value ? (openBlock(), createElementBlock("li", {
           key: 0,
+          class: normalizeClass(["datalist-option", { small: __props.small }])
+        }, [
+          renderSlot(_ctx.$slots, "search-hint", {}, void 0, true)
+        ], 2)) : createCommentVNode("", true),
+        displayNewOption.value ? (openBlock(), createElementBlock("li", {
+          key: 1,
           "data-testid": "add-new-option",
-          onClick: _cache[0] || (_cache[0] = withModifiers(($event) => $emits("addNewOption", __props.newOption), ["stop"])),
+          onClick: _cache[1] || (_cache[1] = withModifiers(($event) => $emits("addNewOption", __props.newOption), ["stop"])),
           class: normalizeClass({
             "datalist-option": true,
             selected: currentSelectedItemIndex.value === __props.options.length,
@@ -40209,7 +40217,7 @@ const _sfc_main$1i = /* @__PURE__ */ defineComponent({
   }
 });
 
-const FieldDatalist = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["__scopeId", "data-v-271f00b1"]]);
+const FieldDatalist = /* @__PURE__ */ _export_sfc(_sfc_main$1i, [["__scopeId", "data-v-41a0e195"]]);
 
 const _hoisted_1$U = { class: "field__input-label" };
 const _hoisted_2$B = { class: "field__input-icon field__input-icon--start" };
@@ -88585,17 +88593,11 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
       synchronizeSearchWithValue(modelValue.value);
     });
     watch(
-      () => props.options,
+      () => [props.options, modelValue.value],
       () => {
         synchronizeSearchWithValue(modelValue.value);
       }
     );
-    watch(
-      () => modelValue.value,
-      (newValue) => {
-        if (!props.canAddNewOption) synchronizeSearchWithValue(newValue);
-      }
-    );
     const synchronizeSearchWithValue = (newValue) => {
       if (Array.isArray(newValue)) {
         searching.value = "";
@@ -88644,6 +88646,9 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
       });
       return items;
     });
+    const showSearchHint = computed(
+      () => props.request && props.autocomplete && !searching.value
+    );
     const isOptionSelected = (option) => {
       if (Array.isArray(modelValue.value)) {
         return modelValue.value?.findIndex(
@@ -88680,7 +88685,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     });
     const onToggleDatalist = () => {
       if (!props.disabled) {
-        if (isDatalistOpen.value) {
+        if (isDatalistOpen.value && !props.autocomplete) {
           closeDatalist();
         } else {
           openDatalist();
@@ -88709,8 +88714,13 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
         searching.value = "";
       } else {
         modelValue.value = selectedOption.value;
-        synchronizeSearchWithValue(selectedOption.value);
-        closeDatalist();
+        if (props.autocomplete && props.request) {
+          searching.value = "";
+          openDatalist();
+        } else {
+          synchronizeSearchWithValue(selectedOption.value);
+          closeDatalist();
+        }
       }
     };
     __expose({
@@ -88796,14 +88806,14 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
           ]),
           datalist: withCtx(() => [
             withDirectives(createVNode(FieldDatalist, {
-              options: filteredLocalOptions.value,
+              options: showSearchHint.value ? [] : filteredLocalOptions.value,
               "is-input-focused": isDatalistOpen.value,
               "can-add-new-option": __props.canAddNewOption,
               "new-option": searching.value,
               small: __props.small,
               onAddNewOption: _cache[1] || (_cache[1] = (option) => emits("addNewOption", option)),
               onSelect
-            }, {
+            }, createSlots({
               option: withCtx(({ option }) => [
                 renderSlot(_ctx.$slots, "option", {
                   option,
@@ -88827,8 +88837,18 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
               "new-option": withCtx(({ newOption }) => [
                 renderSlot(_ctx.$slots, "new-option", { newOption }, void 0, true)
               ]),
-              _: 3
-            }, 8, ["options", "is-input-focused", "can-add-new-option", "new-option", "small"]), [
+              _: 2
+            }, [
+              __props.request && __props.autocomplete ? {
+                name: "search-hint",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "search-hint", {}, () => [
+                    _cache[2] || (_cache[2] = createTextVNode("Veuillez saisir un libellé", -1))
+                  ], true)
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["options", "is-input-focused", "can-add-new-option", "new-option", "small"]), [
               [vShow, isDatalistOpen.value]
             ])
           ]),
@@ -88839,7 +88859,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BmsCombobox = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-0a7eac6b"]]);
+const BmsCombobox = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-1ad08254"]]);
 
 const _hoisted_1$F = ["value", "required", "placeholder", "disabled"];
 const _sfc_main$P = /* @__PURE__ */ defineComponent({
@@ -99810,7 +99830,7 @@ function requireCloneDeep () {
 var cloneDeepExports = requireCloneDeep();
 const _cloneDeep = /*@__PURE__*/getDefaultExportFromCjs(cloneDeepExports);
 
-const defaultSearchFunction = (item, searchValue) => JSON.stringify(Object.values(item)).toLowerCase().includes(searchValue.toLowerCase());
+const bmsDefaultSearchFilterFunction = (item, searchValue) => JSON.stringify(Object.values(item)).toLowerCase().includes(searchValue.toLowerCase());
 const isBetweenFilter = (filter) => filter.type === "betweenDate" || filter.type === "betweenNumber" || filter.type === "betweenDateTime";
 const defaultNumberFilterFunction = (itemNumber, search, isAfterSearch) => {
   if (isEmptyStringOrNotDefined(itemNumber) || isEmptyStringOrNotDefined(search)) {
@@ -105456,7 +105476,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       description: search.value ? `Votre recherche n'a retourné aucun résultat.` : `Il semblerait qu'il n'y ait rien ici...`
     }));
     const getFilteredItems = () => {
-      const applySearch = props.customSearch ? (item) => props.customSearch(item, search.value, defaultSearchFunction) : (item) => defaultSearchFunction(item, search.value);
+      const applySearch = props.customSearch ? (item) => props.customSearch(item, search.value) : (item) => bmsDefaultSearchFilterFunction(item, search.value);
       return sortItems(filterItems(props.items).filter(applySearch));
     };
     const isMounting = ref(true);
@@ -105652,7 +105672,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BmsTable = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-10d05366"]]);
+const BmsTable = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-fd6979a1"]]);
 
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "BmsCocarde",
@@ -108561,5 +108581,5 @@ const createBmsUi = () => ({
   }
 });
 
-export { BMS_FORM_VALID_URL_REGEX, BmsAlert, BmsAutocomplete, BmsBackButton, BmsBadge, BmsBetweenInput, BmsBreadcrumb, _sfc_main$1t as BmsButton, BmsCaption, BmsCard, BmsChip, BmsCircularProgress, BmsCocarde, BmsCombobox, BmsContentPageLayout, BmsDraggableList, BmsEmptyScreen, BmsFilePicker, BmsFixedMenu, BmsFloatingWindow, BmsForm, BmsGhost, BmsHeader, BmsHeaderTitle, _sfc_main$1s as BmsIconButton, _sfc_main$19 as BmsInputBooleanCheckbox, BmsInputCheckboxCaption, BmsInputCheckboxCaptionGroup, BmsInputCheckboxGroup, BmsInputCode, _sfc_main$13 as BmsInputDateTime, BmsInputFile, _sfc_main$11 as BmsInputNumber, BmsInputRadio, BmsInputRadioCaption, BmsInputRadioCaptionGroup, BmsInputRadioGroup, _sfc_main$14 as BmsInputText, _sfc_main$O as BmsInputTime, BmsInputToggle, _sfc_main$1w as BmsLink, BmsLoader, BmsMenu, BmsMenuNav, BmsModal, BmsMultiSelect, BmsNotificationsInstance, BmsOverlay, BmsPagination, BmsProblem, _sfc_main$g as BmsRelativeTime, BmsSearch, BmsSection, BmsSelect, BmsServerAutocomplete, BmsServerTable, BmsShortLinkMenu, BmsSplitWindow, BmsStep, BmsStepper, BmsTable, _sfc_main$p as BmsTabs, BmsTag, BmsTenantSwitcher, BmsTextArea, BmsToggleIcon, BmsTooltip, ChipColor, CocardeBorder, ColumnType, ConfirmInstance, InputType, KeycloakAuthAdapterInstance, RuntimeEnv, SelectMode, SortValue, StatusType, TableMode, TooltipDirection, confirmPlugin, convertStringToCaption, createBmsUi, createRuntimeEnv, defaultSortFunction, enforceActionsColumnHeader, featureFlipperPlugin, fetchRuntimeEnv, field, getCurrentHistory, getCurrentLocation, getFiltersAsQueryParams, getHeaderClasses, getImageFromFile, getNumberFromPathQuery, getStringFromPathQuery, getUserPrefFromLocalStorage, getValueByPath, handleValueInSearchParams, isEmptyStringOrNotDefined, isExternalLink, isFileImage, isProblem, keycloakAuthAdapter, keycloakAuthAdapterInit, notifications, readableDate, reflectFiltersToPath, reflectSearchToPath, relativeDate, relativeDateDefaultFormatFunction, routerHistoryPlugin, sanitizeHtml, sanitizeString, saveValuesToPathQuery, searchString, setUserPrefFromLocalStorage, useClipboard, useConfirm, useFeatureFlipper, useKeycloakAuthAdapter, useNotifications, usePagination, useRouterHistory, useRuntimeEnv, useSearch, useSort, useUserPref, writeLocation };
+export { BMS_FORM_VALID_URL_REGEX, BmsAlert, BmsAutocomplete, BmsBackButton, BmsBadge, BmsBetweenInput, BmsBreadcrumb, _sfc_main$1t as BmsButton, BmsCaption, BmsCard, BmsChip, BmsCircularProgress, BmsCocarde, BmsCombobox, BmsContentPageLayout, BmsDraggableList, BmsEmptyScreen, BmsFilePicker, BmsFixedMenu, BmsFloatingWindow, BmsForm, BmsGhost, BmsHeader, BmsHeaderTitle, _sfc_main$1s as BmsIconButton, _sfc_main$19 as BmsInputBooleanCheckbox, BmsInputCheckboxCaption, BmsInputCheckboxCaptionGroup, BmsInputCheckboxGroup, BmsInputCode, _sfc_main$13 as BmsInputDateTime, BmsInputFile, _sfc_main$11 as BmsInputNumber, BmsInputRadio, BmsInputRadioCaption, BmsInputRadioCaptionGroup, BmsInputRadioGroup, _sfc_main$14 as BmsInputText, _sfc_main$O as BmsInputTime, BmsInputToggle, _sfc_main$1w as BmsLink, BmsLoader, BmsMenu, BmsMenuNav, BmsModal, BmsMultiSelect, BmsNotificationsInstance, BmsOverlay, BmsPagination, BmsProblem, _sfc_main$g as BmsRelativeTime, BmsSearch, BmsSection, BmsSelect, BmsServerAutocomplete, BmsServerTable, BmsShortLinkMenu, BmsSplitWindow, BmsStep, BmsStepper, BmsTable, _sfc_main$p as BmsTabs, BmsTag, BmsTenantSwitcher, BmsTextArea, BmsToggleIcon, BmsTooltip, ChipColor, CocardeBorder, ColumnType, ConfirmInstance, InputType, KeycloakAuthAdapterInstance, RuntimeEnv, SelectMode, SortValue, StatusType, TableMode, TooltipDirection, bmsDefaultSearchFilterFunction, confirmPlugin, convertStringToCaption, createBmsUi, createRuntimeEnv, defaultSortFunction, enforceActionsColumnHeader, featureFlipperPlugin, fetchRuntimeEnv, field, getCurrentHistory, getCurrentLocation, getFiltersAsQueryParams, getHeaderClasses, getImageFromFile, getNumberFromPathQuery, getStringFromPathQuery, getUserPrefFromLocalStorage, getValueByPath, handleValueInSearchParams, isEmptyStringOrNotDefined, isExternalLink, isFileImage, isProblem, keycloakAuthAdapter, keycloakAuthAdapterInit, notifications, readableDate, reflectFiltersToPath, reflectSearchToPath, relativeDate, relativeDateDefaultFormatFunction, routerHistoryPlugin, sanitizeHtml, sanitizeString, saveValuesToPathQuery, searchString, setUserPrefFromLocalStorage, useClipboard, useConfirm, useFeatureFlipper, useKeycloakAuthAdapter, useNotifications, usePagination, useRouterHistory, useRuntimeEnv, useSearch, useSort, useUserPref, writeLocation };
 //# sourceMappingURL=sipa-bms-ui.es.js.map