@ouestfrance/sipa-bms-ui 8.1.4 → 8.3.0

package/src/components/utils/BmsProblem.stories.js

@@ -1,7 +1,7 @@
 import BmsProblem from '@/components/utils/BmsProblem.vue';
 
 export default {
-  title: 'Composants/utils/BmsProblem',
+  title: 'Composants/utils/Problem',
   component: BmsProblem,
 };
 

package/src/documentation/template_internal_component.mdx

@@ -0,0 +1,19 @@
+import {
+  Meta,
+  Title,
+  Primary,
+  Controls,
+  Stories,
+} from '@storybook/addon-docs/blocks';
+
+<Meta isTemplate />
+
+<Title />
+
+Ce composant est un composant **interne** à la librairie qui n'est pas exposé.
+
+<Primary />
+
+<Controls />
+
+<Stories />

package/src/index.ts

@@ -28,6 +28,7 @@ import BmsInputRadioCaption from './components/form/BmsInputRadioCaption.vue';
 import BmsInputRadioCaptionGroup from './components/form/BmsInputRadioCaptionGroup.vue';
 import BmsInputText from './components/form/BmsInputText.vue';
 import BmsInputToggle from '@/components/form/BmsInputToggle.vue';
+import BmsMultiSelect from '@/components/form/BmsMultiSelect.vue';
 import BmsSearch from './components/form/BmsSearch.vue';
 import BmsSelect from './components/form/BmsSelect.vue';
 import BmsTag from './components/form/BmsTag.vue';
@@ -95,6 +96,7 @@ export const createBmsUi = () => ({
     app.component('BmsInputRadioCaptionGroup', BmsInputRadioCaptionGroup);
     app.component('BmsInputText', BmsInputText);
     app.component('BmsInputToggle', BmsInputToggle);
+    app.component('BmsMultiSelect', BmsMultiSelect);
     app.component('BmsSearch', BmsSearch);
     app.component('BmsSelect', BmsSelect);
     app.component('BmsTag', BmsTag);
@@ -170,6 +172,7 @@ export {
   BmsInputRadioCaptionGroup,
   BmsInputText,
   BmsInputToggle,
+  BmsMultiSelect,
   BmsSearch,
   BmsSelect,
   BmsTag,

package/src/models/table.model.ts

@@ -1,3 +1,4 @@
+import { InputType } from './form.model';
 import { Sort, SortFunction } from './sort.model';
 
 export interface TableHeader {
@@ -32,7 +33,7 @@ export type FilterType =
 
 export interface Filter {
   label: string;
-  inputType?: string;
+  inputType?: InputType;
   key: string;
   type: FilterType;
   value?: any;

package/src/showroom/pages/forms.vue

@@ -257,6 +257,26 @@
 
     <hr />
 
+    <BmsMultiSelect
+      label="multi select"
+      required
+      placeholder="This is a placeholder"
+      v-model="multiSelect"
+      :options="[
+        { label: 'toto1', value: 'value1', icon: BellIcon },
+        { label: 'titi2', value: 'value2', icon: Magnet },
+        { label: 'toto3', value: 'value3', icon: Egg },
+        { label: 'toto4', value: 'value4', icon: Egg },
+        { label: 'toto5', value: 'value5', icon: Egg },
+        { label: 'toto6', value: 'value6', icon: Egg },
+        { label: 'toto7', value: 'value7', icon: Egg },
+        { label: 'toto8', value: 'value8', icon: Egg },
+        { label: 'toto9', value: 'value9', icon: Egg },
+      ]"
+    />
+
+    <hr />
+
     <BmsTextArea
       label="textArea"
       required
@@ -330,9 +350,10 @@ import BmsInputDateTime from '@/components/form/BmsInputDateTime.vue';
 import BmsInputCheckboxGroup from '@/components/form/BmsInputCheckboxGroup.vue';
 import BmsInputCheckboxCaption from '@/components/form/BmsInputCheckboxCaption.vue';
 import BmsInputCheckboxCaptionGroup from '@/components/form/BmsInputCheckboxCaptionGroup.vue';
-import { Copy } from 'lucide-vue-next';
+import { Copy, BellIcon, Egg, Magnet } from 'lucide-vue-next';
 import BmsIconButton from '@/components/button/BmsIconButton.vue';
 import { BMS_FORM_VALID_URL_REGEX } from '@/helpers/form.helper';
+import BmsMultiSelect from '@/components/form/BmsMultiSelect.vue';
 
 const { success } = useNotifications();
 const text = ref('');
@@ -340,6 +361,7 @@ const text2 = ref('');
 const captionsText2 = ref();
 const selected = ref('value1');
 const selected2 = ref('');
+const multiSelect = ref([]);
 const files: Ref<File[]> = ref([]);
 const selectedRadio = ref('titi');
 const selectedRadio2 = ref('titi');

package/src/showroom/pages/table.vue

@@ -8,7 +8,6 @@
     :size="5"
     :canSaveFilters="true"
     :savedFilters="savedFilters"
-    :selectable="true"
     help-link="/help-path"
     activity-link="/activity-path"
     v-model:selectedItems="selectedItems"
@@ -43,9 +42,16 @@
         tooltip
       </BmsTooltip>
     </template>
-    <template #action>
-      <BmsIconButton> <Save /> </BmsIconButton>
-      <BmsIconButton :mode="StatusType.Danger"> <Trash /> </BmsIconButton>
+    <template #action="{ isChildElement }">
+      <template v-if="isChildElement">
+        <BmsChip>Hérité</BmsChip>
+      </template>
+      <template v-else>
+        <BmsIconButton @click="success('Sauvegarde')"> <Save /> </BmsIconButton>
+        <BmsIconButton :mode="StatusType.Danger" @click="error('Suppression')">
+          <Trash />
+        </BmsIconButton>
+      </template>
     </template>
   </bms-table>
   <BmsButton @click="goBack">Go Back</BmsButton>
@@ -57,7 +63,7 @@
 </template>
 
 <script lang="ts" setup>
-import { BmsBackButton, BmsButton } from '@/index';
+import { BmsBackButton, BmsButton, useNotifications } from '@/index';
 import {
   Filter,
   InputType,
@@ -71,8 +77,10 @@ import BmsShortLinkMenu from '@/components/navigation/BmsShortLinkMenu.vue';
 import BmsTooltip from '@/components/feedback/BmsTooltip.vue';
 import BmsIconButton from '@/components/button/BmsIconButton.vue';
 import { Delete, Save, Trash } from 'lucide-vue-next';
+import BmsChip from '@/components/form/BmsChip.vue';
 
 const { goBack } = useRouterHistory();
+const { error, success } = useNotifications();
 
 const headers = [
   { label: 'Colonne 1', key: 'column1', sortable: true },
@@ -125,6 +133,23 @@ const items = Array(100)
     },
     isOk: Math.random() < 0.5,
     number: Math.random(),
+    childElement:
+      Math.random() < 0.5
+        ? {
+            column1: 'Element enfant',
+            column2: index,
+            date: randomDate(),
+            dateUpdate: randomDate(),
+            dateDelete: randomDate(),
+            choice1: 'N/A',
+            choice2: 'N/A',
+            deepValue: {
+              deepAttr: index % 2 === 0,
+            },
+            isOk: true,
+            number: 0,
+          }
+        : undefined,
   }));
 
 const savedFilters: Ref<SavedFilter[]> = ref<SavedFilter[]>([]);