@ouestfrance/sipa-bms-ui 8.1.3 → 8.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ouestfrance/sipa-bms-ui",
-  "version": "8.1.3",
+  "version": "8.2.0",
   "author": "Ouest-France BMS",
   "license": "ISC",
   "scripts": {
@@ -37,18 +37,18 @@
     "@formkit/vue": "1.6.9",
     "@mdx-js/react": "3.1.0",
     "@storybook/addon-actions": "^8.6.14",
-    "@storybook/addon-docs": "9.0.15",
-    "@storybook/addon-links": "9.0.15",
-    "@storybook/vue3-vite": "9.0.15",
+    "@storybook/addon-docs": "9.0.16",
+    "@storybook/addon-links": "9.0.16",
+    "@storybook/vue3-vite": "9.0.16",
     "@types/lodash": "4.17.20",
     "@types/uuid": "10.0.0",
     "@vitejs/plugin-vue": "6.0.0",
     "@vue/test-utils": "2.4.6",
-    "@vueuse/core": "13.4.0",
+    "@vueuse/core": "13.5.0",
     "@vueuse/motion": "^3.0.0",
     "axios": "1.10.0",
     "blob-util": "^2.0.2",
-    "chromatic": "13.0.1",
+    "chromatic": "13.1.2",
     "codemirror": "6.0.2",
     "cors": "^2.8.5",
     "cross-env": "^7.0.3",
@@ -68,12 +68,12 @@
     "sass": "1.89.2",
     "semantic-release": "24.2.6",
     "start-server-and-test": "2.0.12",
-    "storybook": "9.0.15",
-    "storybook-addon-pseudo-states": "9.0.15",
+    "storybook": "9.0.16",
+    "storybook-addon-pseudo-states": "9.0.16",
     "storybook-vue3-router": "^5.0.0",
     "typescript": "5.2.2",
     "uuid": "11.1.0",
-    "vite": "7.0.0",
+    "vite": "7.0.3",
     "vite-plugin-dts": "^4.1.0",
     "vite-plugin-mkcert": "1.17.8",
     "vite-plugin-pages": "0.33.1",
@@ -83,7 +83,7 @@
     "vue-codemirror": "6.1.1",
     "vue-loader": "17.4.2",
     "vue-router": "4.5.1",
-    "vue-tsc": "2.2.12"
+    "vue-tsc": "3.0.1"
   },
   "files": [
     "dist",

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

@@ -0,0 +1,82 @@
+import BmsMultiSelect from '@/components/form/BmsMultiSelect.vue';
+
+export default {
+  title: 'Composants/form/MultiSelect',
+  component: BmsMultiSelect,
+};
+
+const Template = (args) => ({
+  setup() {
+    return { args };
+  },
+  components: {
+    BmsMultiSelect,
+  },
+  template: `
+    <BmsMultiSelect v-bind="args"/>
+    `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'My label',
+  captions: ['Helping text'],
+  modelValue: [],
+  options: [
+    { label: 'optionA', value: 'a' },
+    { label: 'optionB', value: 'b' },
+  ],
+};
+
+export const WithValue = Template.bind({});
+WithValue.args = {
+  label: 'My label',
+  modelValue: [{ label: 'optionA', value: 'a' }],
+  options: [
+    { label: 'optionA', value: 'a' },
+    { label: 'optionB', value: 'b' },
+  ],
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  label: 'My label',
+  modelValue: [{ label: 'optionA', value: 'a' }],
+  options: [
+    { label: 'optionA', value: 'a' },
+    { label: 'optionB', value: 'b' },
+  ],
+  disabled: true,
+};
+
+export const Opened = Template.bind({});
+Opened.args = {
+  label: 'My label',
+  modelValue: [],
+  options: [
+    { label: 'optionA', value: 'a' },
+    { label: 'optionB', value: 'b' },
+  ],
+  open: true,
+};
+
+export const WithErrors = Template.bind({});
+WithErrors.args = {
+  label: 'My label',
+  modelValue: [],
+  options: [
+    { label: 'optionA', value: 'a' },
+    { label: 'optionB', value: 'b' },
+  ],
+  errors: ['error 1', 'error 2'],
+};
+
+export const WithIncorrectValue = Template.bind({});
+WithIncorrectValue.args = {
+  label: 'My label',
+  modelValue: [{ label: 'optionA', value: 'a' }],
+  options: [
+    { label: 'optionB', value: 'b' },
+    { label: 'optionC', value: 'c' },
+  ],
+};

package/src/components/form/BmsMultiSelect.vue

@@ -0,0 +1,140 @@
+<template>
+  <BmsSelect
+    v-model:open="open"
+    :model-value="modelValue"
+    @update:model-value="onSelect"
+    :label="label"
+    :errors="errors"
+    :captions="captions"
+    :required="required"
+    :optional="optional"
+    :helperText="helperText"
+    :disabled="disabled"
+    :options="displayedOptions"
+  >
+    <template #input>
+      <div class="tags">
+        <BmsTag
+          v-for="tag in displayValues"
+          active
+          @dismiss="removeOption(tag.value)"
+        >
+          <component v-if="tag?.icon" :is="tag.icon" />
+          {{ tag.label }}
+        </BmsTag>
+        <input type="text" v-model="searching" class="search" />
+      </div>
+
+      <span class="icon-container">
+        <ChevronDown class="icon-button" v-if="modelValue.length === 0" />
+        <X v-else class="icon-button" @click="reset" />
+      </span>
+    </template>
+    <template #option="{ option }: { option: InputOption }">
+      <BmsTag active :can-be-dismissed="false">
+        <component v-if="option?.icon" :is="option.icon" />
+        {{ option.label }}
+      </BmsTag>
+    </template>
+  </BmsSelect>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { ChevronDown, X } from 'lucide-vue-next';
+import BmsSelect from './BmsSelect.vue';
+import BmsTag from './BmsTag.vue';
+import { Caption, InputOption } from '@/models';
+import _ from 'lodash';
+import { searchString } from '@/helpers';
+
+export interface Props {
+  options: InputOption[];
+  label?: string;
+  errors?: string[] | Caption[];
+  captions?: string[] | Caption[];
+  required?: boolean;
+  optional?: boolean;
+  disabled?: boolean;
+  helperText?: string;
+  placeholder?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  disabled: false,
+  required: false,
+});
+
+const searching = ref('');
+
+const modelValue = defineModel<InputOption[]>('modelValue', {
+  required: true,
+});
+const open = defineModel<boolean>('open', { default: false });
+
+const onSelect = (value: string) => {
+  const option = props.options.find((o) => o.value === value);
+  if (option) {
+    modelValue.value.push(option);
+    searching.value = '';
+  }
+};
+
+const removeOption = (value: string) => {
+  modelValue.value = modelValue.value.filter((o) => o.value !== value);
+};
+
+const reset = () => {
+  modelValue.value = [];
+  searching.value = '';
+};
+
+const displayedOptions = computed(() =>
+  props.options
+
+    .filter((o) => searchString(o.label, searching.value))
+    .filter(
+      (o) => !modelValue.value.find((option) => option.value === o.value),
+    ),
+);
+
+const displayValues = computed<InputOption[]>(() =>
+  modelValue.value.filter((o) =>
+    props.options.find((option) => option.value === o.value),
+  ),
+);
+</script>
+
+<style lang="scss" scoped>
+.tags {
+  display: flex;
+  gap: 0.5em;
+  padding: 10px 0;
+  flex-wrap: wrap;
+  width: 100%;
+
+  .search {
+    outline: none;
+    border: none;
+    background-color: transparent;
+    flex-grow: 1;
+  }
+}
+.icon {
+  &-container {
+    height: 100%;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+  &-button {
+    width: 1em;
+    margin: 0 1em 0 0.5em;
+    display: block;
+  }
+}
+</style>

package/src/components/form/BmsSelect.vue

@@ -9,26 +9,32 @@
     :disabled="disabled"
   >
     <span class="select-wrapper" ref="selectWrapper" :class="classes">
-      <input
-        ref="selectInput"
-        type="text"
-        role="input"
-        :value="displayValue"
-        :placeholder="placeholder"
-        onkeypress="return false;"
-        :required="required"
-      />
-      <span class="icon-down-container">
-        <ChevronDown class="icon-down-button" />
-      </span>
+      <slot name="input">
+        <input
+          ref="selectInput"
+          type="text"
+          role="input"
+          :value="displayValue"
+          :placeholder="placeholder"
+          onkeypress="return false;"
+          :required="required"
+        />
+        <span class="icon-down-container">
+          <ChevronDown class="icon-down-button" />
+        </span>
+      </slot>
     </span>
     <template #datalist>
       <FieldDatalist
-        v-show="isInputFocused"
+        v-show="open"
         :options="options"
-        :is-input-focused="isInputFocused"
+        :is-input-focused="open"
         @select="(option: any) => selectItem(option)"
-      />
+      >
+        <template #option="{ option }: { option: any }">
+          <slot name="option" :option="option"></slot>
+        </template>
+      </FieldDatalist>
     </template>
   </field>
 </template>
@@ -51,18 +57,16 @@ export interface Props {
   disabled?: boolean;
   helperText?: string;
   placeholder?: string;
-  open?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   label: '',
   disabled: false,
   required: false,
-  open: false,
 });
 const modelValue = defineModel<any>('modelValue', { required: true });
+const open = defineModel<boolean>('open', { default: false });
 
-const isInputFocused = ref<boolean>(props.open);
 const selectInput: Ref<HTMLElement | null> = ref(null);
 const selectWrapper: Ref<HTMLElement | null> = ref(null);
 
@@ -73,10 +77,10 @@ const classes = computed(() => {
 onMounted(() => {
   document.body.addEventListener('click', (ev) => {
     if ((ev.target as any).closest('.select-wrapper') === selectWrapper.value) {
-      isInputFocused.value = !isInputFocused.value;
+      open.value = !open.value;
       ev.stopPropagation();
     } else {
-      isInputFocused.value = false;
+      open.value = false;
     }
   });
 });
@@ -91,11 +95,11 @@ const displayValue = computed(() => {
 
 const selectItem = (option: any) => {
   modelValue.value = option.value;
-  isInputFocused.value = false;
+  open.value = false;
 };
 
 const setFocus = () => {
-  isInputFocused.value = true;
+  open.value = true;
   if (selectInput.value) {
     selectInput.value.focus();
   }
@@ -114,15 +118,16 @@ defineExpose({
 
   .select-wrapper {
     width: 100%;
-    padding: 0;
+    padding: 0 0 0 1em;
     margin: 0.5em 0;
     border-radius: var(--bms-border-radius);
     border: 1px solid var(--field-border-color);
     background-color: var(--input-background-color);
-    height: 48px;
+    min-height: 48px;
 
     display: flex;
     align-items: center;
+    justify-content: space-between;
 
     .icon-down {
       &-container {
@@ -167,8 +172,8 @@ defineExpose({
       cursor: pointer;
       outline: none;
       appearance: none;
-      padding: 0 0 0 1em;
       margin: 0;
+      padding: 0;
       font: inherit;
       color: inherit;
       height: 24px;

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

@@ -1,5 +1,7 @@
 import BmsTable from '@/components/table/BmsTable.vue';
 import BmsButton from '@/components/button/BmsButton.vue';
+import BmsIconButton from '@/components/button/BmsIconButton.vue';
+import { Save, Trash } from 'lucide-vue-next';
 
 export default {
   title: 'Composants/table/Table',
@@ -928,3 +930,114 @@ WithCustomActions.args = {
     },
   ],
 };
+
+const TemplateActionColumn = (args) => ({
+  components: {
+    BmsTable,
+    BmsIconButton,
+    Save,
+    Trash,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+      <BmsTable v-bind="args">
+       <template #col3="{isChildElement}"> 
+        <template v-if="isChildElement">
+         disabled
+        </template>
+        <template v-else>
+          <BmsIconButton><Save/></BmsIconButton>
+          <BmsIconButton mode="danger"><Trash/></BmsIconButton>
+        </template>
+       </template>
+      </BmsTable>
+    `,
+});
+
+export const WithActionColumn = TemplateActionColumn.bind({});
+WithActionColumn.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column actions',
+      key: 'col3',
+      action: true,
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value4',
+      col2: 'Value5',
+      col3: 'Value6',
+    },
+  ],
+  selectedItems: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  selectable: true,
+};
+
+export const WithActionColumnAndChildElement = TemplateActionColumn.bind({});
+WithActionColumnAndChildElement.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column actions',
+      key: 'col3',
+      action: true,
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+    {
+      col1: 'Value4',
+      col2: 'Value5',
+      col3: 'Value6',
+      childElement: {
+        col1: 'child1',
+        col2: 'child2',
+        col3: 'child3',
+      },
+    },
+    {
+      col1: 'Value10',
+      col2: 'Value11',
+      col3: 'Value12',
+    },
+  ],
+  selectedItems: [],
+  selectable: true,
+};

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

@@ -561,3 +561,44 @@ AllSelected.args = {
   selectable: true,
   totalSize: 2,
 };
+
+export const WithChildElements = Template.bind({});
+WithChildElements.args = {
+  headers: [
+    {
+      label: 'Column 1',
+      key: 'col1',
+      align: 'start',
+    },
+    {
+      label: 'Column 2',
+      key: 'col2',
+      align: 'center',
+    },
+    {
+      label: 'Column 3',
+      key: 'col3',
+      action: true,
+      // align: 'end',
+    },
+  ],
+  items: [
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+      childElement: {
+        col1: 'Child1',
+        col2: 'Child2',
+        col3: 'Child3',
+      },
+    },
+    {
+      col1: 'Value1',
+      col2: 'Value2',
+      col3: 'Value3',
+    },
+  ],
+  hasFilters: true,
+  totalSize: 2,
+};