@ouestfrance/sipa-bms-ui 8.5.4 → 8.7.0

package/src/showroom/pages/autocomplete.vue

@@ -11,7 +11,6 @@
     :can-add-new-option="true"
     @add-new-option="onAddNewOption"
   />
-
   Valeur: {{ inputValueIcon }}
   <BmsAutocomplete
     label="Autocomplete avec icones"
@@ -26,6 +25,20 @@
     :options="optionsText"
     v-model="inputText"
   />
+
+  <BmsSelect
+    label="Select"
+    @blur="console.log('blur')"
+    v-model="select"
+    :options="optionsLabelValue"
+  />
+
+  <BmsMultiSelect
+    label="Multi-select"
+    v-model="multiSelect"
+    :options="optionsLabelValue"
+  />
+  <br />
 </template>
 
 <script setup lang="ts">
@@ -34,6 +47,14 @@ import { Heart, Cat } from 'lucide-vue-next';
 import { range } from 'lodash';
 import { ref } from 'vue';
 import BmsButton from '@/components/button/BmsButton.vue';
+import BmsSelect from '@/components/form/BmsSelect.vue';
+import BmsMultiSelect from '@/components/form/BmsMultiSelect.vue';
+import FieldDatalist from '@/plugins/field/FieldDatalist.vue';
+import RawAutocomplete from '@/components/form/RawAutocomplete.vue';
+import BmsInputText from '@/components/form/BmsInputText.vue';
+
+const select = ref('');
+const multiSelect = ref([]);
 
 const optionsLabelValue = ref(
   range(0, 30).map((i) =>

package/src/showroom/pages/server-table.vue

@@ -1,4 +1,5 @@
 <template>
+  {{ filters }}
   <bms-server-table
     v-model:selectedItems="selectedItems"
     v-model:selectMode="selectMode"
@@ -13,6 +14,8 @@
     :total="totalItems"
     @saveFilter="onSaveFilter"
     @deleteSavedFilter="onDeleteSavedFilter"
+    @filterInput="onFilterInput"
+    @filterChange="onFilterChange"
   >
     <template #default="{ row }: { row: any }">
       <td>
@@ -40,7 +43,7 @@
 <script lang="ts" setup>
 import { Filter, SavedFilter, SelectMode } from '@/models';
 import axios from 'axios';
-import { Ref, ref } from 'vue';
+import { computed, Ref, ref } from 'vue';
 import { isEmptyStringOrNotDefined } from '@/helpers';
 
 const serverHeaders = [
@@ -49,7 +52,27 @@ const serverHeaders = [
   { label: 'Type', key: 'type' },
 ];
 
-const filters = [
+const typeOptions = ref([
+  'Grass',
+  'Poison',
+  'Fire',
+  'Flying',
+  'Water',
+  'Bug',
+  'Normal',
+  'Electric',
+  'Ground',
+  'Fairy',
+  'Fighting',
+  'Psychic',
+  'Rock',
+  'Steel',
+  'Ice',
+  'Ghost',
+  'Dragon',
+]);
+
+const filters = computed(() => [
   {
     label: 'Name',
     key: 'name',
@@ -65,27 +88,9 @@ const filters = [
     label: 'Type',
     key: 'type',
     type: 'autocomplete',
-    autocompleteOptions: [
-      'Grass',
-      'Poison',
-      'Fire',
-      'Flying',
-      'Water',
-      'Bug',
-      'Normal',
-      'Electric',
-      'Ground',
-      'Fairy',
-      'Fighting',
-      'Psychic',
-      'Rock',
-      'Steel',
-      'Ice',
-      'Ghost',
-      'Dragon',
-    ],
+    autocompleteOptions: typeOptions.value,
   },
-];
+]);
 
 const savedFilters: Ref<SavedFilter[]> = ref<SavedFilter[]>([]);
 const selectedItems = ref<any[]>([]);
@@ -102,6 +107,32 @@ const onDeleteSavedFilter = (savedFilter: SavedFilter) => {
   );
 };
 
+const onFilterInput = ({
+  filterKey,
+  e,
+}: {
+  filterKey: string;
+  e: InputEvent;
+}) => {
+  typeOptions.value = [];
+  console.log(
+    `user filtered key ${filterKey} with val ${(e.target as HTMLInputElement)?.value}`,
+  );
+};
+
+const onFilterChange = ({
+  filterKey,
+  e,
+}: {
+  filterKey: string;
+  e: InputEvent;
+}) => {
+  typeOptions.value = [];
+  console.log(
+    `user filtered key ${filterKey} changed with val ${(e.target as HTMLInputElement)?.value}`,
+  );
+};
+
 const customFetchData = async (
   params: any,
   abortController: AbortController,

package/src/showroom/pages/table.vue

@@ -1,5 +1,7 @@
 <template>
   <BmsBackButton :fallback="{ path: '/' }" />
+  <br />
+  <BmsButton @click="changeChoice">Change choice</BmsButton>
   <bms-table
     :headers="headers"
     :filters="filters"
@@ -13,22 +15,9 @@
     v-model:selectedItems="selectedItems"
     @saveFilter="onSaveFilter"
     @deleteSavedFilter="onDeleteSavedFilter"
+    @filterInput="onFilterInput"
+    @filterChange="onFilterChange"
   >
-    <template #date="{ row }">
-      <bms-tooltip :tooltip-text="row.date.toUTCString()">
-        {{ row.date.toLocaleDateString() }}
-      </bms-tooltip>
-    </template>
-    <template #dateUpdate="{ row }">
-      <bms-tooltip :tooltip-text="row.dateUpdate.toUTCString()">
-        {{ row.dateUpdate.toLocaleDateString() }}
-      </bms-tooltip>
-    </template>
-    <template #dateDelete="{ row }">
-      <bms-tooltip :tooltip-text="row.dateDelete.toUTCString()">
-        {{ row.dateDelete.toLocaleDateString() }}
-      </bms-tooltip>
-    </template>
     <template #choice2="{ row }">
       <BmsTooltip tooltipText="tooltip">
         {{ row.choice2 }}
@@ -65,6 +54,7 @@
 <script lang="ts" setup>
 import { BmsBackButton, BmsButton, useNotifications } from '@/index';
 import {
+  ColumnType,
   Filter,
   InputType,
   SavedFilter,
@@ -86,9 +76,9 @@ const headers = [
   { label: 'Colonne 1', key: 'column1', sortable: true },
   { label: 'actions', key: 'action', action: true },
   { label: 'Colonne 2', key: 'column2' },
-  { label: 'Date', key: 'date' },
-  { label: 'DateUpdate', key: 'dateUpdate' },
-  { label: 'DateDelete', key: 'dateDelete' },
+  { label: 'Date', key: 'date', columnType: ColumnType.Date },
+  { label: 'DateUpdate', key: 'dateUpdate', columnType: ColumnType.Date },
+  { label: 'DateDelete', key: 'dateDelete', columnType: ColumnType.Date },
   { label: 'choice1', key: 'choice1' },
   { label: 'choice2', key: 'choice2' },
   {
@@ -154,7 +144,6 @@ const items = Array(100)
 
 const savedFilters: Ref<SavedFilter[]> = ref<SavedFilter[]>([]);
 const selectedItems: Ref<any[]> = ref([]);
-
 const onSaveFilter = (savedFilter: SavedFilter) => {
   savedFilters.value.push(savedFilter);
 };
@@ -165,7 +154,28 @@ const onDeleteSavedFilter = (savedFilter: SavedFilter) => {
   );
 };
 
-const filters: Filter[] = [
+const onFilterInput = ({
+  filterKey,
+  e,
+  value,
+}: {
+  filterKey: string;
+  e: InputEvent;
+  value: any;
+}) => {
+  console.log(`Input in filter ${filterKey} with val ${value}`);
+};
+const onFilterChange = ({
+  filterKey,
+  value,
+}: {
+  filterKey: string;
+  value: any;
+}) => {
+  console.log(`Change in filter ${filterKey}  with val`, value);
+};
+
+const filters = ref<Filter[]>([
   {
     label: 'inputText Colonne 1',
     key: 'column1',
@@ -213,5 +223,20 @@ const filters: Filter[] = [
     customFilter: (item: any, value: any, target: string) =>
       item[target] > 0.5 === value,
   },
-];
+]);
+const changeChoice = () => {
+  filters.value = filters.value.map((f) =>
+    f.key === 'choice2'
+      ? {
+          ...f,
+          selectOptions: [
+            { label: 'huey', value: 'huey' },
+            { label: 'riri', value: 'riri' },
+            { label: 'fifi', value: 'fifi' },
+            { label: 'loulou', value: 'loulou' },
+          ],
+        }
+      : f,
+  );
+};
 </script>

package/dist/plugins/field/FieldDatalist.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/src/plugins/field/FieldDatalist.spec.ts

@@ -1,35 +0,0 @@
-import FieldDatalist, { type Props } from '@/plugins/field/FieldDatalist.vue';
-import { mount } from '@vue/test-utils';
-import { field } from '@/plugins/field';
-
-const factory = (props?: Props) => {
-  const wrapper = mount(FieldDatalist, {
-    global: {
-      plugins: [field],
-    },
-    props: {
-      isInputFocused: false,
-      options: [
-        { label: 'titi', value: 'i' },
-        { label: 'toto', value: 'o' },
-        { label: 'tutu', value: 'u' },
-      ],
-      modelValue: '',
-      ...props,
-    },
-    attachTo: document.body,
-  });
-
-  return { wrapper };
-};
-
-describe('FieldDatalist', () => {
-  it('should be able to select with keyboard', async () => {
-    const { wrapper } = factory();
-    const titi = wrapper.get('[data-testid="i"]');
-
-    expect(titi.classes()).toStrictEqual([]);
-    await wrapper.trigger('keydown.down');
-    expect(titi.classes()).toStrictEqual(['selected']);
-  });
-});