@ouestfrance/sipa-bms-ui 8.20.0 → 8.21.0

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>

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

@@ -1,6 +1,7 @@
 import BmsModal from '@/components/layout/BmsModal.vue';
+import BmsProblem from '@/components/utils/BmsProblem.vue';
+import { isProblem } from '@/helpers/problem.helper.ts';
 import { StatusType } from '@/models/status-type.model';
-import { BmsProblem, isProblem } from '../../index';
 
 const openNotification = {
   details: 'this is a detail',

package/src/components/layout/BmsSplitWindow.vue

@@ -55,7 +55,6 @@ const collapsedLocal = ref(props.collapsed ?? false);
 watch(
   () => props.collapsed,
   (val) => {
-    console.log('watch:collapsed', val);
     collapsedLocal.value = val ?? false;
   },
 );

package/src/components/table/BmsTableFilters.vue

@@ -53,7 +53,7 @@
           :autocompleteRequest="filter?.autocompleteRequest"
           :options="getFilterOptions(filter) as any"
           @input="
-            (e: InputEvent) =>
+            (e: any) =>
               $emits('filterInput', {
                 filterKey: filter.key,
                 value: (e.target as HTMLInputElement).value,

package/src/documentation/button/primaryButton.mdx

@@ -0,0 +1,142 @@
+import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import {
+  Playground,
+  DoSimple,
+  DoDanger,
+  DoSmall,
+  DoIconStart,
+  DoIconEnd,
+  DoSubmit,
+  DontLongLabel,
+  DoShortLabel,
+  DontMultiplePrimary,
+  DoOnePrimary,
+  DontTooManyIcons,
+  DoOneIcon,
+  DontGenericLabel,
+  DoSpecificLabel,
+  DontPrimaryForCancel,
+  DoPrimaryForSave,
+} from '../../components/button/BmsButton.stories.js';
+
+<Meta title="Documentation/Buttons/Primary" />
+
+# <img src="./BmsIcon.png" /> Primary Button
+
+The primary button should represent the main action on a screen. There should only be one primary button on an interface. If multiple actions are possible, it is essential to create a hierarchy of actions and use a primary and several secondary or tertiary buttons.
+
+## Anatomy
+
+Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow.
+
+![](./button/PrimaryButtonRepresentation.png)
+
+## Component
+
+Use the controls below to interact with the component and see how it behaves with different configurations.
+
+<Canvas of={Playground} />
+
+### Props
+
+<Controls of={Playground} />
+
+## Usage Examples
+
+### ✅ Do: Simple action button
+
+Use a clear, concise label (maximum 3 words) for the primary action.
+
+<Canvas of={DoSimple} />
+
+### ✅ Do: Button with icon at start
+
+Icons can help clarify the action. Place them at the start of the button.
+
+<Canvas of={DoIconStart} />
+
+### ✅ Do: Button with icon at end
+
+Place icons at the end for navigation or forward actions.
+
+<Canvas of={DoIconEnd} />
+
+### ✅ Do: Submit button
+
+Use `submit` prop for form submissions.
+
+<Canvas of={DoSubmit} />
+
+### ✅ Do: Danger mode
+
+Use danger mode for destructive actions that require caution.
+
+<Canvas of={DoDanger} />
+
+### ✅ Do: Small variant
+
+Use the small variant when space is limited.
+
+<Canvas of={DoSmall} />
+
+## Rules
+
+### ⛔ Don't: Long labels
+
+Avoid long labels that exceed 3 words. Keep button text concise and action-oriented.
+
+**❌ Don't:**
+
+<Canvas of={DontLongLabel} />
+
+**✅ Do:**
+
+<Canvas of={DoShortLabel} />
+
+### ⛔ Don't: Multiple primary buttons
+
+Never use multiple primary buttons on the same screen. Use only one primary button per interface.
+
+**❌ Don't:**
+
+<Canvas of={DontMultiplePrimary} />
+
+**✅ Do:**
+
+<Canvas of={DoOnePrimary} />
+
+### ⛔ Don't: Overuse of icons
+
+Don't overload buttons with multiple icons or decorative elements that don't add value.
+
+**❌ Don't:**
+
+<Canvas of={DontTooManyIcons} />
+
+**✅ Do:**
+
+<Canvas of={DoOneIcon} />
+
+### ⛔ Don't: Generic labels
+
+Avoid generic labels like "Click here" or "Submit". Use specific action verbs.
+
+**❌ Don't:**
+
+<Canvas of={DontGenericLabel} />
+
+**✅ Do:**
+
+<Canvas of={DoSpecificLabel} />
+
+### ⛔ Don't: Primary for secondary actions
+
+Don't use primary buttons for secondary or cancel actions. Reserve primary buttons for the main action.
+
+**❌ Don't:**
+
+<Canvas of={DontPrimaryForCancel} />
+
+**✅ Do:**
+
+<Canvas of={DoPrimaryForSave} />

package/src/documentation/{secondaryButton.mdx → button/secondaryButton.mdx}

@@ -1,7 +1,7 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs/blocks';
-import Button from '../components/button/BmsButton.vue';
+import Button from '../../components/button/BmsButton.vue';
 
-<Meta title="Documentation/Buttons/Secondary Button" />
+<Meta title="Documentation/Buttons/Secondary" />
 
 # <img src="./BmsIcon.png" /> Secondary Button
 

package/src/documentation/foundation/contributing.mdx

@@ -0,0 +1,72 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Foundation/Contributing" />
+
+# <img src="./BmsIcon.png" /> Contributing
+
+We welcome contributions from the community! To keep the codebase healthy and consistent, please follow the process outlined below before submitting a Merge Request (MR).
+
+## Contribution – Challenging the Need for Evolution
+
+> **Before adding or modifying a component, question the underlying need.**  
+> In a design system every change propagates across many products, so it’s crucial to ensure that new work truly adds value.
+
+1. **Define the problem** – Who experiences the pain point? What user goal does it affect?
+2. **Consider existing solutions** – Can the issue be solved with a variant, a token adjustment, or a composition of existing components?
+3. **Evaluate impact** – Think about bundle size, visual consistency, accessibility, and maintenance overhead.
+
+Applying this disciplined approach helps the design system stay lean, cohesive, and future‑proof while preventing unnecessary churn.
+
+## 1️ Discuss the Change First
+
+Before you start coding, **open a thread** on Teams describing the problem you want to solve or the feature you’d like to add. Include:
+
+- A clear description of the motivation.
+- Any relevant design sketches or screenshot.
+- Links to related tickets or upstream discussions.
+
+This early conversation helps us:
+
+- Validate that the change aligns with the project roadmap.
+- Identify potential design conflicts early.
+- Agree on an implementation approach.
+
+Only after we give a **“Go‑ahead”** comment should you begin work on the MR.
+
+## 2️ Follow Our Development Standards
+
+Your contribution must meet the project's quality expectations:
+
+(WIP)
+
+If any of these checks fail, the MR will be returned for revision.
+
+## 3️ Submit Your Merge Request
+
+When the feature is complete:
+
+1. (WIP)
+
+## 4️ Review Process
+
+- **Automated checks**: CI will automatically reject the MR if linting, tests, or build steps fail.
+- **Human review**: At least one core maintainer will review the code. They may request changes, ask clarifying questions, or suggest improvements.
+- **Approval**: Once all reviewers approve and CI passes, the MR will be merged.
+
+> **We reserve the right to reject any MR** that does not meet our development standards, conflicts with the project direction, or introduces regressions. Rejections will be accompanied by constructive feedback so you can adjust and resubmit.
+
+## 5️ Post‑Merge Checklist
+
+- Verify that the change appears in the next release notes.
+- Close the associated issue (or move it to _Done_).
+- Celebrate 🎉 – you’ve contributed to the project!
+
+---
+
+### Additional Tips (Optional)
+
+- **Keep PRs small** – aim for a single logical change per MR.
+- **Write clear commit messages** – follow the Conventional Commits format (`feat: add …`, `fix: resolve …`).
+- **Respect the Code of Conduct** – treat all contributors with respect and professionalism.
+
+Thank you for helping make this project better! 🙏

package/src/documentation/foundation/gettingstarted.mdx

@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Foundation/Getting started" />
+
+# <img src="./BmsIcon.png" /> Getting started
+
+All the information are located in the Read Me on [Gitlab](https://gitlab.ouest-france.fr/sipa-ouest-france/platform/platform-library-vuejs-bms)

package/src/documentation/{principles.mdx → foundation/principles.mdx}

@@ -2,7 +2,7 @@ import { Meta } from '@storybook/addon-docs/blocks';
 
 ![](./CoverBmsUI.png)
 
-<Meta title="Documentation/Principles" />
+<Meta title="Foundation/Principles" />
 
 # <img src="./BmsIcon.png" /> Principles
 
@@ -16,13 +16,13 @@ bms UI focuses on the essentials, we concentrate on what is useful for interface
 
 A constraint-based design system is designed to offer a consistent user experience across all products that use it. By limiting possible interpretations, this type of design system provides a clear and consistent logic that facilitates understanding and use of the products. Constraints can be applied to visual elements such as colors, typography, and font sizes, as well as interactive elements such as buttons and menus. By using a constraint-based design system, users can interact with products with confidence, knowing that the design elements will be consistent and predictable.
 
-## 📖 Documentation of the **bms UI** Design System
+## Documentation of the **bms UI** Design System
 
 > **Mission** – Provide a **single Design System** dedicated to the Sipa group’s Back‑Office tools, limiting the use of the Vue framework and offering a constraint‑driven approach to interface design and construction. Goal: reduce costs, ensure visual and functional consistency, and simplify maintenance.
 
 ---
 
-### 1️⃣ Context & Objectives
+### 1️ Context & Objectives
 
 - **Who?**  
   The bms UI Design System is actually maintained by the frontend team of **bms**.
@@ -35,7 +35,7 @@ A constraint-based design system is designed to offer a consistent user experien
 - **Target audience**  
   Front‑end developers, designers, QA engineers, project managers, and anyone involved in creating or maintaining Back‑Office interfaces.
 
-### 2️⃣ Core Principles
+### 2️ Core Principles
 
 #### 2.1 Focused – Essentials First
 
@@ -59,19 +59,19 @@ A constraint-based design system is designed to offer a consistent user experien
 
 These constraints are **declarative** – they’re baked directly into components (e.g., `mode="danger"` to have a red button), preventing stylistic drift.
 
-### 3️⃣ Project Architecture
+### 3️ Project Architecture
 
 - **Single export** – `import BmsButton from '../components/button/BmsButton.vue';`
 - **Integrated Storybook** – Each component has a `*.stories.js` file showcasing the UI and the props & slots for each component.```
 - **Typescript components** - Each component as typed props & events, and the relevant types are exported by the library (e.g. TableHeader, Caption, etc.)
 
-### 4️⃣ Usage Guide
+### 4️ Usage Guide
 
-#### 4.1 Installation
+Installation
 
 Gitlab documentation https://gitlab.ouest-france.fr/sipa-ouest-france/platform/platform-library-vuejs-bms#installation
 
-### 5️⃣ Quick FAQ
+### 5️ Quick FAQ
 
 - **Can I add a custom color?**  
   **Answer:** No – all colors must come from the defined palette. If a legitimate need arises, open a **Jira** ticket.
@@ -82,7 +82,7 @@ Gitlab documentation https://gitlab.ouest-france.fr/sipa-ouest-france/platform/p
 - **Does the design system support dark mode?**  
   **Answer:** No – theming is not available at this time.
 
-### 6️⃣ Contact & Support
+### 6️ Contact & Support
 
 - **Teams**: [#🎨bmsUI](https://teams.microsoft.com/l/channel/19%3Au9dPXr-JjoRoaLat-EyS-QEKit1ZzUwQ7G0VrzvDkTE1%40thread.tacv2/%F0%9F%8E%A8bmsUI?groupId=677fd2f9-de86-4bf9-a00c-71817f033ad3&tenantId=a59e9cc9-4ed4-43c4-9f1e-ca78d44b0072&ngc=true&allowXTenantAccess=)
 - **Issues**: [#Jira] (⚠️ WIP)

package/src/documentation/icons.mdx

@@ -31,3 +31,46 @@ import { ChefHat } from 'lucide-vue-next'
   <h2> <ChefHat /> My recipes </h2>
 </template>
 ```
+
+## Recommendation
+
+## 1️⃣ Keep the Visual Style as Simple as Possible
+
+| Rule                                                                                                                         | Why it matters                                                   | Example                                                      |
+| ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------ |
+| **Pick the simplest icon** – a clean outline without extra adornments.                                                       | Reduces cognitive load and improves legibility on small screens. | “Edit” → `Pencil` instead of `PencilPlus`.                   |
+| **Limit variants** – use a single style (outline, filled, or two‑tone) for a given concept.                                  | Prevents confusion caused by multiple looks for the same action. | “Delete” → always `Trash` (outline).                         |
+| **Maintain consistent sizing** – stick to either 16 px or 24 px depending on context, never arbitrary sizes.                 | Guarantees uniform alignment across components.                  | Action buttons → 24 px; list items → 16 px.                  |
+| **Avoid icon + text combos** unless the text adds essential information (e.g., “Export PDF”).                                | The icon alone should convey the meaning.                        | “Download” → just the `Download` icon.                       |
+| **Ensure sufficient contrast** – use the accent colour or black/white based on background, meeting a ≥ 4.5:1 contrast ratio. | Makes the UI accessible for colour‑blind or low‑vision users.    | Dark background → white icon; light background → black icon. |
+
+## 3️⃣ Recommended Icon‑to‑Action Mapping
+
+| Action                 | Recommended Lucide Icon                       | Variant (outline / fill)             | Suggested Size                | Usage Note                                                    |
+| ---------------------- | --------------------------------------------- | ------------------------------------ | ----------------------------- | ------------------------------------------------------------- |
+| **Edit**               | `Pencil`                                      | Outline                              | 24 px (button) / 16 px (list) | Used to modify an existing item.                              |
+| **Delete**             | `Trash`                                       | Outline                              | 24 px (button) / 16 px (list) | Always paired with a confirmation modal.                      |
+| **Confirm / Save**     | `Check`                                       | Fill (to indicate an “active” state) | 24 px                         | Can replace the word “Save” on primary action bars.           |
+| **Cancel / Close**     | `X` _(alias `Close`)_                         | Outline                              | 24 px                         | Closes dialogs or cancels an operation.                       |
+| **Add / Create**       | `Plus`                                        | Outline                              | 24 px                         | Prefer the plain `Plus` over `PlusCircle` for minimalism.     |
+| **Download**           | `Download`                                    | Outline                              | 24 px                         | Placed next to a file‑download link.                          |
+| **Export**             | `Upload` _(or `Share2` depending on context)_ | Outline                              | 24 px                         | Use `Upload` for exporting data, `Share2` for sharing a link. |
+| **Search**             | `Search`                                      | Outline                              | 24 px                         | Visible even when the input field is empty.                   |
+| **Filter**             | `Filter`                                      | Outline                              | 24 px                         | Appears beside a “Filter” button.                             |
+| **Preview**            | `Eye`                                         | Outline                              | 24 px                         | Lets users preview content without editing.                   |
+| **Expand / Collapse**  | `ChevronDown` / `ChevronUp`                   | Outline                              | 16 px (inside lists)          | Indicates accordion or dropdown state.                        |
+| **Open External Link** | `ExternalLink`                                | Outline                              | 16 px                         | Shows next to a link that opens a new tab/window.             |
+
+> **Tip:** If you ever need an icon that Lucide doesn’t provide, create one that follows the same visual language (2 px stroke, rounded corners, no fill) to stay consistent with the rest of the set.
+
+---
+
+### 📌 Quick Checklist
+
+1. **Choose the simplest outline icon** for the action.
+2. **Standardise size & stroke width** (`16 px` or `24 px`, `strokeWidth={2}`).
+3. **Respect colour contrast** (dark icon on light background, light icon on dark background).
+4. **Import icons centrally** and re‑export them.
+5. **Add visual regression tests** for every icon used in the UI.
+
+Following these guidelines will keep the UI clean, professional, and accessible while leveraging the full power of the Lucide icon library. 🎨🚀

package/src/showroom/pages/forms.vue

@@ -240,6 +240,7 @@
     <BmsSelect
       label="select"
       required
+      @select="console.log('BmsSelect - select', $event)"
       v-model="selected"
       placeholder="This is a placeholder"
       :options="[{ label: 'value1', value: 'value1' }]"
@@ -262,6 +263,8 @@
       required
       placeholder="This is a placeholder"
       v-model="multiSelect"
+      @select="console.log('BmsMultiSelect - select', $event)"
+      @input="console.log('BmsMultiSelect - input', $event)"
       :options="[
         { label: 'toto1', value: 'value1', icon: BellIcon },
         { label: 'titi2', value: 'value2', icon: Magnet },
@@ -291,7 +294,13 @@
       placeholder="This is a placeholder"
       required
       v-model="auto"
-      :options="[{ label: 'value1', value: '1' }]"
+      @select="console.log('BmsAutocomplete - select', $event)"
+      @input="console.log('BmsAutocomplete - input', $event)"
+      :options="[
+        { label: 'value1', value: '1' },
+        { label: 'value2', value: '2' },
+        { label: 'value3', value: '3' },
+      ]"
     />
     <BmsInputNumber label="Chiffre" v-model="nbr" :min="5" :max="15" />