@ouestfrance/sipa-bms-ui 8.22.2 → 8.23.0

package/src/components/layout/BmsFloatingWindow.vue

@@ -47,6 +47,7 @@
 import { Maximize2, Minimize2, X } from 'lucide-vue-next';
 import BmsIconButton from '../button/BmsIconButton.vue';
 import { ref, computed, onMounted, watch, type CSSProperties } from 'vue';
+import { useDebounceFn } from '@vueuse/core';
 
 export type Placement =
   | 'top-left'
@@ -128,10 +129,21 @@ function initPosition() {
   }
 }
 
+const resizeCallack = useDebounceFn(() => {
+  expandedStyle.value = computeExpandedStyle();
+}, 100);
+
 onMounted(() => {
   if (open.value) {
     initPosition();
   }
+  if (props.expandTarget) {
+    const targetEl = document.querySelector(props.expandTarget);
+    if (targetEl) {
+      const resizeObserver = new ResizeObserver(resizeCallack);
+      resizeObserver.observe(targetEl);
+    }
+  }
 });
 
 watch(open, (newVal) => {
@@ -350,7 +362,6 @@ function onDragEnd() {
 
 @container floating-window (min-width:900px) {
   .floating-window {
-    max-height: 300px;
     max-width: 80%;
   }
 }

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

@@ -1,4 +1,10 @@
 import BmsForm from '@/components/layout/BmsForm.vue';
+import BmsInputText from '@/components/form/BmsInputText.vue';
+import BmsSelect from '@/components/form/BmsSelect.vue';
+import BmsTextArea from '@/components/form/BmsTextArea.vue';
+import BmsInputNumber from '@/components/form/BmsInputNumber.vue';
+import BmsButton from '@/components/button/BmsButton.vue';
+import { ref } from 'vue';
 
 export default {
   title: 'Composants/layout/Form',
@@ -28,3 +34,213 @@ const Template = (args) => ({
 });
 
 export const Default = Template.bind({});
+
+// Simple template for documentation
+const SimpleTemplate = (args) => ({
+  components: {
+    BmsForm,
+    BmsInputText,
+    BmsSelect,
+    BmsTextArea,
+    BmsInputNumber,
+    BmsButton,
+  },
+  setup() {
+    const name = ref(args.name || '');
+    const email = ref(args.email || '');
+    const phone = ref(args.phone || '');
+    const country = ref(args.country || '');
+    const description = ref(args.description || '');
+    const age = ref(args.age || null);
+    return { args, name, email, phone, country, description, age };
+  },
+  template: `
+  <BmsForm>
+    <template #form_1>
+      <h2>Personal Information</h2>
+      <BmsInputText label="Name" v-model="name" placeholder="Enter your name" required />
+      <BmsInputText label="Email" v-model="email" placeholder="Enter your email" required />
+      <BmsInputText label="Phone" v-model="phone" placeholder="Enter your phone number" />
+      <BmsSelect 
+        label="Country" 
+        v-model="country" 
+        placeholder="Select a country"
+        :options="[
+          { label: 'France', value: 'fr' },
+          { label: 'United States', value: 'us' },
+          { label: 'United Kingdom', value: 'uk' },
+          { label: 'Germany', value: 'de' }
+        ]"
+      />
+    </template>
+    <template #form_2>
+      <h2>Additional Details</h2>
+      <BmsTextArea label="Description" v-model="description" placeholder="Enter a description" />
+      <BmsInputNumber label="Age" v-model="age" :min="0" :max="120" />
+    </template>
+    <template #actions>
+      <BmsButton type="secondary">Cancel</BmsButton>
+      <BmsButton type="primary">Submit</BmsButton>
+    </template>
+  </BmsForm>
+  `,
+});
+
+// Playground with default values for documentation
+export const PlaygroundForm = SimpleTemplate.bind({});
+PlaygroundForm.parameters = { chromatic: { disable: true } };
+PlaygroundForm.args = {
+  name: '',
+  email: '',
+  phone: '',
+  country: '',
+  description: '',
+  age: null,
+};
+
+// Do: Form with organized sections
+export const DoWithOrganizedSections = SimpleTemplate.bind({});
+DoWithOrganizedSections.parameters = { chromatic: { disable: true } };
+DoWithOrganizedSections.args = {
+  name: '',
+  email: '',
+  phone: '',
+  country: '',
+  description: '',
+  age: null,
+};
+
+// Do: Form with actions
+export const DoWithActions = SimpleTemplate.bind({});
+DoWithActions.parameters = { chromatic: { disable: true } };
+DoWithActions.args = {
+  name: '',
+  email: '',
+  phone: '',
+  country: '',
+  description: '',
+  age: null,
+};
+
+// Don't: Form without actions
+export const DontNoActions = (args) => ({
+  components: {
+    BmsForm,
+    BmsInputText,
+    BmsSelect,
+    BmsTextArea,
+  },
+  setup() {
+    const name = ref(args.name || '');
+    const email = ref(args.email || '');
+    const country = ref(args.country || '');
+    const description = ref(args.description || '');
+    return { args, name, email, country, description };
+  },
+  template: `
+  <BmsForm>
+    <template #form_1>
+      <h2>Personal Information</h2>
+      <BmsInputText label="Name" v-model="name" required />
+      <BmsInputText label="Email" v-model="email" required />
+      <BmsSelect 
+        label="Country" 
+        v-model="country"
+        :options="[
+          { label: 'France', value: 'fr' },
+          { label: 'United States', value: 'us' }
+        ]"
+      />
+    </template>
+    <template #form_2>
+      <h2>Additional Details</h2>
+      <BmsTextArea label="Description" v-model="description" />
+    </template>
+  </BmsForm>
+  `,
+});
+DontNoActions.parameters = { chromatic: { disable: true } };
+DontNoActions.args = {
+  name: '',
+  email: '',
+  country: '',
+  description: '',
+};
+
+export const DoWithActionsButton = SimpleTemplate.bind({});
+DoWithActionsButton.parameters = { chromatic: { disable: true } };
+DoWithActionsButton.args = {
+  name: '',
+  email: '',
+  phone: '',
+  country: '',
+  description: '',
+  age: null,
+};
+
+// Don't: Form without section titles
+export const DontNoSectionTitles = (args) => ({
+  components: {
+    BmsForm,
+    BmsInputText,
+    BmsSelect,
+    BmsTextArea,
+    BmsInputNumber,
+    BmsButton,
+  },
+  setup() {
+    const name = ref(args.name || '');
+    const email = ref(args.email || '');
+    const phone = ref(args.phone || '');
+    const country = ref(args.country || '');
+    const description = ref(args.description || '');
+    const age = ref(args.age || null);
+    return { args, name, email, phone, country, description, age };
+  },
+  template: `
+  <BmsForm>
+    <template #form_1>
+      <BmsInputText label="Name" v-model="name" placeholder="Enter your name" required />
+      <BmsInputText label="Email" v-model="email" placeholder="Enter your email" required />
+      <BmsInputText label="Phone" v-model="phone" placeholder="Enter your phone number" />
+      <BmsSelect 
+        label="Country" 
+        v-model="country" 
+        placeholder="Select a country"
+        :options="[
+          { label: 'France', value: 'fr' },
+          { label: 'United States', value: 'us' }
+        ]"
+      />
+    </template>
+    <template #form_2>
+      <BmsTextArea label="Description" v-model="description" placeholder="Enter a description" />
+      <BmsInputNumber label="Age" v-model="age" :min="0" :max="120" />
+    </template>
+    <template #actions>
+      <BmsButton type="secondary">Cancel</BmsButton>
+      <BmsButton type="primary">Submit</BmsButton>
+    </template>
+  </BmsForm>
+  `,
+});
+DontNoSectionTitles.parameters = { chromatic: { disable: true } };
+DontNoSectionTitles.args = {
+  name: '',
+  email: '',
+  phone: '',
+  country: '',
+  description: '',
+  age: null,
+};
+
+export const DoWithSectionTitles = SimpleTemplate.bind({});
+DoWithSectionTitles.parameters = { chromatic: { disable: true } };
+DoWithSectionTitles.args = {
+  name: '',
+  email: '',
+  phone: '',
+  country: '',
+  description: '',
+  age: null,
+};

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

@@ -3,7 +3,6 @@ import BmsButton from '@/components/button/BmsButton.vue';
 import { Flower } from 'lucide-vue-next';
 
 export default {
-  components: { BmsHeaderTitle },
   title: 'Composants/layout/HeaderTitle',
   component: BmsHeaderTitle,
 };
@@ -66,3 +65,139 @@ WithAll.args = {
   documentationUrl: '/docs',
   activityUrl: '/docs',
 };
+
+// Simple template for documentation
+const SimpleTemplate = (args) => ({
+  components: { BmsHeaderTitle, BmsButton, Flower },
+  setup() {
+    return { args };
+  },
+  template: `
+  <BmsHeaderTitle v-bind="args">
+    <template v-if="args.logo" #logo>
+      <Flower/>
+    </template>
+    <template v-if="args.afterTitle" #afterTitle>
+      <BmsButton type="tertiary">Secondary action</BmsButton>
+    </template>
+    <template v-if="args.actions" #actions>
+      <span style="display: flex; gap: 8px;">
+        <BmsButton v-if="args.secondaryAction && !args.twoPrimary" type="secondary">{{ args.secondaryLabel || 'Secondary' }}</BmsButton>
+        <BmsButton :type="args.primaryType || 'primary'">{{ args.primaryLabel || 'Primary action' }}</BmsButton>
+        <BmsButton v-if="args.secondaryActionRight" type="secondary">{{ args.secondaryLabel || 'Secondary' }}</BmsButton>
+        <BmsButton v-if="args.twoPrimary && args.secondaryAction" :type="args.primaryType || 'primary'">{{ args.secondaryLabel || 'Delete' }}</BmsButton>
+      </span>
+    </template>
+    <template v-if="args.subtitle" #subtitle>
+      {{ args.subtitle }}
+    </template>
+  </BmsHeaderTitle>
+  `,
+});
+
+// Playground with default values for documentation
+export const PlaygroundHeaderTitle = SimpleTemplate.bind({});
+PlaygroundHeaderTitle.parameters = { chromatic: { disable: true } };
+PlaygroundHeaderTitle.args = {
+  title: 'Page Title',
+};
+
+// Do: Header title with clear title
+export const DoWithClearTitle = SimpleTemplate.bind({});
+DoWithClearTitle.parameters = { chromatic: { disable: true } };
+DoWithClearTitle.args = {
+  title: 'User Settings',
+};
+
+// Do: Header title with label
+export const DoWithLabel = SimpleTemplate.bind({});
+DoWithLabel.parameters = { chromatic: { disable: true } };
+DoWithLabel.args = {
+  title: 'Edit Profile',
+  label: 'User Profile',
+};
+
+// Do: Header title with actions
+export const DoWithActions = SimpleTemplate.bind({});
+DoWithActions.parameters = { chromatic: { disable: true } };
+DoWithActions.args = {
+  title: 'Dashboard',
+  actions: true,
+};
+
+// Do: Header title with secondary action
+export const DoWithSecondaryAction = SimpleTemplate.bind({});
+DoWithSecondaryAction.parameters = { chromatic: { disable: true } };
+DoWithSecondaryAction.args = {
+  title: 'Edit Document',
+  actions: true,
+  secondaryAction: true,
+  secondaryLabel: 'Import',
+  primaryLabel: 'Add',
+};
+
+// Do: Header title with subtitle
+export const DoWithSubtitle = SimpleTemplate.bind({});
+DoWithSubtitle.parameters = { chromatic: { disable: true } };
+DoWithSubtitle.args = {
+  title: 'Project Overview',
+  subtitle: 'Manage your project settings and team members',
+};
+
+// Do: Header title with helper links
+export const DoWithHelperLinks = SimpleTemplate.bind({});
+DoWithHelperLinks.parameters = { chromatic: { disable: true } };
+DoWithHelperLinks.args = {
+  title: 'Configuration',
+  documentationUrl: '/docs/configuration',
+  activityUrl: '/activity',
+};
+
+// Don't: Missing title
+export const DontNoTitle = SimpleTemplate.bind({});
+DontNoTitle.parameters = { chromatic: { disable: true } };
+DontNoTitle.args = {};
+
+export const DoWithTitle = SimpleTemplate.bind({});
+DoWithTitle.parameters = { chromatic: { disable: true } };
+DoWithTitle.args = {
+  title: 'Page Title',
+};
+
+// Don't: Too long title
+export const DontLongTitle = SimpleTemplate.bind({});
+DontLongTitle.parameters = { chromatic: { disable: true } };
+DontLongTitle.args = {
+  title:
+    'This is a very long page title that should not be used because it makes the header difficult to read and breaks the layout',
+};
+
+export const DoShortTitle = SimpleTemplate.bind({});
+DoShortTitle.parameters = { chromatic: { disable: true } };
+DoShortTitle.args = {
+  title: 'Settings',
+};
+
+// Don't: Two primary buttons
+export const DontTwoPrimaryButtons = SimpleTemplate.bind({});
+DontTwoPrimaryButtons.parameters = { chromatic: { disable: true } };
+DontTwoPrimaryButtons.args = {
+  title: 'Edit Document',
+  actions: true,
+  twoPrimary: true,
+  primaryType: 'primary',
+  primaryLabel: 'Add',
+  secondaryAction: true,
+  secondaryLabel: 'Delete',
+};
+
+// Don't: Inverted button order
+export const DontInvertedButtonOrder = SimpleTemplate.bind({});
+DontInvertedButtonOrder.parameters = { chromatic: { disable: true } };
+DontInvertedButtonOrder.args = {
+  title: 'Edit Document',
+  actions: true,
+  secondaryActionRight: true,
+  secondaryLabel: 'Import',
+  primaryLabel: 'Add',
+};

package/src/components/layout/BmsSplitWindow.vue

@@ -255,7 +255,7 @@ function clamp(value: number, minValue: number, maxValue: number) {
 
   &__separator {
     position: relative;
-    z-index: var(--bms-z-index-fixed);
+    z-index: calc(var(--bms-z-index-modal));
 
     &:before {
       content: '';

package/src/components/table/BmsPagination.vue

@@ -4,6 +4,7 @@
       {{ selectLabel }}
       <BmsSelect
         v-model="size"
+        :small="small"
         :options="
           sizes.map((size: number) => ({ label: size.toString(), value: size }))
         "
@@ -70,9 +71,11 @@ interface BmsPaginationProps {
   currentPage: number;
   pages: number;
   selectLabel?: string;
+  small?: boolean;
 }
 const props = withDefaults(defineProps<BmsPaginationProps>(), {
   selectLabel: 'Éléments par page :',
+  small: false,
 });
 
 const emit = defineEmits<{

package/src/components/table/BmsServerTable.stories.js

@@ -73,13 +73,13 @@ Default.args = {
   url: 'https://fakeapi.com/items',
 };
 
-export const withFilters = Template.bind({});
-withFilters.parameters = {
+export const WithFilters = Template.bind({});
+WithFilters.parameters = {
   msw: {
     handlers: [mswRequestHandler()],
   },
 };
-withFilters.args = {
+WithFilters.args = {
   headers: [
     {
       label: 'Column 1',
@@ -129,6 +129,62 @@ withFilters.args = {
   defaultFiltersOpened: true,
 };
 
+export const Small = Template.bind({});
+Small.parameters = {
+  msw: {
+    handlers: [mswRequestHandler()],
+  },
+};
+Small.args = {
+  mode: 'small',
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      align: 'end',
+    },
+  ],
+  filters: [
+    {
+      label: 'Input',
+      key: 'col1',
+      type: 'input',
+      value: 'Val',
+    },
+    {
+      label: 'Select',
+      key: 'col2',
+      type: 'select',
+      selectOptions: [
+        {
+          label: 'option1',
+          value: 'option1',
+        },
+        {
+          label: 'option2',
+          value: 'option2',
+        },
+      ],
+    },
+    {
+      label: 'Boolean',
+      key: 'col3',
+      type: 'boolean',
+    },
+  ],
+  url: 'https://fakeapi.com/items',
+  defaultFiltersOpened: true,
+};
 export const WithSavedFilters = Template.bind({});
 WithSavedFilters.parameters = {
   msw: {

package/src/components/table/BmsServerTable.vue

@@ -17,6 +17,7 @@ import {
   Sort,
   SortValue,
   TableHeader,
+  TableMode,
 } from '@/models';
 import _debounce from 'lodash/debounce';
 import { computed, type Ref, ref, type Slots, watch, watchEffect } from 'vue';
@@ -31,7 +32,7 @@ interface UiTableProps {
   headers: TableHeader[];
   filters?: Filter[];
   url?: string;
-  mode?: 'normal' | 'dense';
+  mode?: TableMode;
   persistent?: boolean;
   pagination?: number[];
   size?: number;
@@ -54,7 +55,7 @@ interface UiTableProps {
 }
 
 const props = withDefaults(defineProps<UiTableProps>(), {
-  mode: 'normal',
+  mode: TableMode.NORMAL,
   persistent: true,
   pagination: () => [25, 50, 100],
   size: 25,
@@ -307,6 +308,8 @@ const onClearSelection = () => {
 };
 
 const onSelectAll = () => emits('update:selectMode', SelectMode.ALL);
+
+const isTableSmall = computed(() => props.mode === TableMode.SMALL);
 </script>
 
 <template>
@@ -341,6 +344,7 @@ const onSelectAll = () => emits('update:selectMode', SelectMode.ALL);
           <BmsTableFilters
             v-model="filters"
             :canSaveFilters="canSaveFilters"
+            :small="mode == 'small'"
             @saveFilter="onSaveFilter"
             @resetFilters="resetFilters"
             @filterInput="(filterEvent) => emits('filterInput', filterEvent)"
@@ -371,6 +375,7 @@ const onSelectAll = () => emits('update:selectMode', SelectMode.ALL);
     <template #search>
       <UiFilterButton
         v-if="filters.length > 0"
+        :small="isTableSmall"
         :activeFiltersNb="numberOfActiveFilters"
         :isFilterVisible="isFilterVisible"
         @toggleFilters="toggleFilters"
@@ -380,6 +385,7 @@ const onSelectAll = () => emits('update:selectMode', SelectMode.ALL);
           <BmsSearch
             :modelValue="search"
             class="table-search"
+            :small="isTableSmall"
             @update:modelValue="search = $event"
           />
         </slot>
@@ -407,6 +413,7 @@ const onSelectAll = () => emits('update:selectMode', SelectMode.ALL);
           :currentPage="props.initialPage === 1 ? currentPage - 1 : currentPage"
           :sizes="paginationsOptions"
           :pages="totalPages"
+          :small="isTableSmall"
           @prev="onPrevClick"
           @next="onNextClick"
           @go="go($event)"