@ouestfrance/sipa-bms-ui 8.9.3 → 8.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.9.3",
+  "version": "8.10.0",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {

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

@@ -62,6 +62,7 @@ const Template = (args) => ({
         </template>
         <template #default>
           <h3>This is content</h3>
+          <p v-html="args.content"/>
           <BmsProblem
               v-if="args.openNotification"
               :problem="args.openNotification"
@@ -80,6 +81,14 @@ Default.args = {
   title: 'Titre',
 };
 
+export const WithScroll = Template.bind({});
+WithScroll.args = {
+  modelValue: true,
+  title: 'Titre',
+  content:
+    'This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>This is a big content for scrolling<br/>',
+};
+
 export const Success = Template.bind({});
 Success.args = {
   modelValue: true,

package/src/components/layout/BmsModal.vue

@@ -267,6 +267,7 @@ onUnmounted(() => {
     align-items: center;
     justify-content: center;
     background: var(--bms-white);
+    z-index: calc(var(--bms-z-index-fixed) + 5);
 
     p {
       margin: 0;
@@ -308,6 +309,7 @@ onUnmounted(() => {
     margin: -1em;
     position: sticky;
     background: var(--bms-white);
+    z-index: var(--bms-z-index-fixed);
   }
 
   &__header {

package/src/components/table/BmsPagination.spec.ts

@@ -1,26 +1,74 @@
-import BmsPagination from '@/components/table/BmsPagination.vue';
-import { field } from '@/plugins/field';
 import { mount, shallowMount } from '@vue/test-utils';
+import { describe, test, expect, vi, beforeEach } from 'vitest';
+import BmsPagination from './BmsPagination.vue';
 
+// Mock field plugin
+const mockField = {
+  install: vi.fn(),
+};
+
+// Mock IntersectionObserver
 const intersectionObserverMock = () => ({
   observe: () => null,
 });
 
+// Mock child components
+vi.mock('@/components/button/BmsIconButton.vue', () => ({
+  default: {
+    name: 'BmsIconButton',
+    template: '<button><slot /></button>',
+    props: ['color', 'disabled'],
+  },
+}));
+
+vi.mock('@/index', () => ({
+  BmsSelect: {
+    name: 'BmsSelect',
+    template:
+      '<select><option v-for="option in options" :key="option.value" :value="option.value">{{ option.label }}</option></select>',
+    props: ['modelValue', 'options'],
+    emits: ['update:modelValue'],
+  },
+}));
+
+vi.mock('lucide-vue-next', () => ({
+  ChevronFirst: { name: 'ChevronFirst', template: '<span>First</span>' },
+  ChevronLast: { name: 'ChevronLast', template: '<span>Last</span>' },
+  ChevronLeft: { name: 'ChevronLeft', template: '<span>Left</span>' },
+  ChevronRight: { name: 'ChevronRight', template: '<span>Right</span>' },
+}));
+
 const shallowFactory = (props: any) => {
   return shallowMount(BmsPagination, {
     global: {
-      plugins: [field],
+      plugins: [mockField],
     },
-    propsData: { ...props },
+    props: { ...props },
   });
 };
 
 const factory = (props: any) => {
   return mount(BmsPagination, {
     global: {
-      plugins: [field],
+      plugins: [mockField],
+      stubs: {
+        BmsSelect: {
+          name: 'BmsSelect',
+          template:
+            '<select v-model="modelValue"><option v-for="option in options" :key="option.value" :value="option.value">{{ option.label }}</option></select>',
+          props: ['modelValue', 'options'],
+          emits: ['update:modelValue'],
+        },
+        BmsIconButton: {
+          name: 'BmsIconButton',
+          template:
+            '<button @click="$emit(\'click\')" :disabled="disabled"><slot /></button>',
+          props: ['color', 'disabled'],
+          emits: ['click'],
+        },
+      },
     },
-    propsData: { ...props },
+    props: { ...props },
   });
 };
 
@@ -31,7 +79,8 @@ describe('BmsPagination', () => {
       .fn()
       .mockImplementation(intersectionObserverMock);
   });
-  it('should display correctly', () => {
+
+  test('should display correctly', () => {
     const wrapper = shallowFactory({
       sizes: [25, 50],
       total: 120,
@@ -40,10 +89,10 @@ describe('BmsPagination', () => {
       pages: Math.ceil(120 / 25),
     });
 
-    expect(wrapper.text()).toContain('Éléments par page : 1 à 25 / 120');
+    expect(wrapper.text()).toContain('1 à 25');
   });
 
-  it('should emit correct navigation events', async () => {
+  test('should emit correct navigation events', async () => {
     const wrapper = factory({
       sizes: [25, 50],
       total: 120,
@@ -52,22 +101,69 @@ describe('BmsPagination', () => {
       pages: Math.ceil(120 / 25),
     });
 
-    const actions = wrapper.find('.bms-pagination__actions').findAll('button');
-    const goToBeginning = actions[0];
-    const goBack = actions[1];
-    const goForward = actions[2];
-    const goToEnding = actions[3];
+    const buttons = wrapper.findAllComponents({ name: 'BmsIconButton' });
+    const goToBeginning = buttons[0];
+    const goBack = buttons[1];
+    const goForward = buttons[2];
+    const goToEnding = buttons[3];
 
     await goToBeginning.trigger('click');
-    expect(wrapper.emitted().go[0]).toEqual([0]);
+    expect(wrapper.emitted('go')?.[0]).toEqual([0]);
 
     await goBack.trigger('click');
-    expect(wrapper.emitted().prev[0]).toEqual([]);
+    expect(wrapper.emitted('prev')?.[0]).toEqual([]);
 
     await goForward.trigger('click');
-    expect(wrapper.emitted().next[0]).toEqual([]);
+    expect(wrapper.emitted('next')?.[0]).toEqual([]);
 
     await goToEnding.trigger('click');
-    expect(wrapper.emitted().go[1]).toEqual([4]);
+    expect(wrapper.emitted('go')?.[1]).toEqual([4]);
+  });
+
+  test('should handle size change', async () => {
+    const wrapper = factory({
+      sizes: [25, 50],
+      total: 120,
+      currentPage: 0,
+      currentSize: 25,
+      pages: Math.ceil(120 / 25),
+    });
+
+    const select = wrapper.findComponent({ name: 'BmsSelect' });
+    await select.vm.$emit('update:modelValue', 50);
+
+    expect(wrapper.emitted('update:currentSize')?.[0]).toEqual([50]);
+  });
+
+  test('should disable navigation buttons correctly', () => {
+    const wrapper = factory({
+      sizes: [25, 50],
+      total: 120,
+      currentPage: 0,
+      currentSize: 25,
+      pages: Math.ceil(120 / 25),
+    });
+
+    const buttons = wrapper.findAllComponents({ name: 'BmsIconButton' });
+
+    // First and previous buttons should be disabled on first page
+    expect(buttons[0].props('disabled')).toBe(true);
+    expect(buttons[1].props('disabled')).toBe(true);
+
+    // Next and last buttons should be enabled
+    expect(buttons[2].props('disabled')).toBe(false);
+    expect(buttons[3].props('disabled')).toBe(false);
+  });
+
+  test('should calculate last item number correctly', () => {
+    const wrapper = shallowFactory({
+      sizes: [25, 50],
+      total: 120,
+      currentPage: 1,
+      currentSize: 25,
+      pages: Math.ceil(120 / 25),
+    });
+
+    expect(wrapper.text()).toContain('26 à 50');
   });
 });

package/src/components/table/BmsServerTable.vue

@@ -112,7 +112,6 @@ const props = withDefaults(defineProps<UiTableProps>(), {
         signal: controller.signal,
       },
     );
-
     const totalItems = response.headers.get('X-Total');
     const data = await response.json();
     return { data, total: totalItems ? parseInt(totalItems) : Infinity };
@@ -211,13 +210,21 @@ watch(
   { deep: true },
 );
 
+// Watch vuejs cannot call directly the debounce function
+const debouncedHandler = _debounce((callBack) => {
+  callBack();
+}, props.debounceTime);
+
 watch(
   [() => filters.value, () => sort.value, size, search],
   () => {
     if (!isMounting.value) {
-      currentPage.value = props.initialPage;
-      emits('update:selectMode', SelectMode.DEFAULT);
-      fetchData();
+      const callBack = () => {
+        currentPage.value = props.initialPage;
+        emits('update:selectMode', SelectMode.DEFAULT);
+        fetchData();
+      };
+      debouncedHandler(callBack);
     }
   },
   { deep: true },
@@ -268,10 +275,6 @@ async function fetchData() {
   }
 }
 
-const debouncedSearch = _debounce((value: string) => {
-  search.value = value;
-}, props.debounceTime);
-
 const onPrevClick = () => {
   goToPage(currentPage.value - 1, total.value);
 };
@@ -375,7 +378,7 @@ const onSelectAll = () => emits('update:selectMode', SelectMode.ALL);
           <BmsSearch
             :modelValue="search"
             class="table-search"
-            @update:modelValue="debouncedSearch"
+            @update:modelValue="search = $event"
           />
         </slot>
       </template>