@ouestfrance/sipa-bms-ui 7.14.1

package/src/showroom/pages/index.vue

@@ -0,0 +1,209 @@
+<template>
+  <h1>Platform library VueJS BMS</h1>
+  <h2>H2 title</h2>
+  <h3>H3 title</h3>
+
+  <bms-button>coucou</bms-button>
+
+  <hr />
+
+  <bms-button @click="notifySuccess">Notify Success</bms-button>
+
+  <hr />
+
+  <bms-button @click="notifyError">Notify Error</bms-button>
+
+  <hr />
+
+  <bms-button @click="onConfirm">Confirm Dialog</bms-button>
+
+  <hr />
+
+  <bms-button :to="{ name: 'tabs' }">Navigation vers Tabs w/obj </bms-button>
+
+  <hr />
+
+  <bms-button to="/tabs">Navigation vers Tabs</bms-button>
+
+  <hr />
+
+  <bms-button to="http://google.fr">Navigation vers Extérieur</bms-button>
+
+  <hr />
+
+  <BmsIconButton :mode="StatusType.Danger" tooltipText="Icon tooltip">
+    ICON
+  </BmsIconButton>
+
+  <hr />
+
+  <BmsIconButton>Normal</BmsIconButton>
+
+  <hr />
+
+  <div class="tooltip-flex">
+    <bms-tooltip tooltipText="This is a very large text" direction="top">
+      top Tooltip
+    </bms-tooltip>
+    <bms-tooltip tooltipText="This is a very large text" direction="right">
+      right Tooltip
+    </bms-tooltip>
+    <bms-tooltip tooltipText="This is a very large text" direction="bottom">
+      bottom Tooltip
+    </bms-tooltip>
+    <bms-tooltip tooltipText="This is a very large text" direction="left">
+      left Tooltip
+    </bms-tooltip>
+    <bms-tooltip
+      tooltipText="This is a very large text that overflows because it's too much longer"
+    >
+      Longer tooltip
+    </bms-tooltip>
+  </div>
+
+  <hr />
+
+  <bms-button @click="modal = !modal">Toggle modal</bms-button>
+
+  <bms-modal v-model="modal" :loading="isLoading" loading-text="Chargement...">
+    <p>
+      <bms-tooltip tooltipText="Tooltip">Content !</bms-tooltip>
+    </p>
+    <bms-button @click="isLoading = true">Toggle loading</bms-button>
+  </bms-modal>
+
+  <hr />
+
+  <BmsButton submit>Submit</BmsButton>
+
+  <hr />
+
+  <bms-loader></bms-loader>
+
+  <hr />
+
+  <BmsTag @click="onTagClick">
+    <Activity />
+    message
+  </BmsTag>
+  <BmsTag @click="onTagClick" :dismissable="false">
+    <Activity />
+    message
+  </BmsTag>
+  <BmsTag @click="onTagClick" :active="true">
+    <Activity />
+    message
+  </BmsTag>
+  <BmsTag @click="onTagClick" :active="true" :disabled="true">
+    <Activity />
+    message
+  </BmsTag>
+  <BmsTag @click="onTagClick" :active="false" :disabled="true">
+    <Activity />
+    message
+  </BmsTag>
+
+  <hr />
+
+  <div class="chips">
+    <BmsChip>Content</BmsChip>
+    <BmsChip :color="ChipColor.Blue">Content</BmsChip>
+    <BmsChip :color="ChipColor.Green">Content</BmsChip>
+    <BmsChip :color="ChipColor.Grey">Content</BmsChip>
+    <BmsChip :color="ChipColor.Orange">Content</BmsChip>
+    <BmsChip :color="ChipColor.Red">Content</BmsChip>
+    <BmsChip :color="'tata' as any">Content</BmsChip>
+  </div>
+
+  <hr />
+
+  <p>FeatureA is On : {{ isFeatureEnabled('featureA') }}</p>
+</template>
+
+<script lang="ts" setup>
+import { useNotifications } from '@/plugins/notifications';
+import { useConfirm } from '@/plugins/confirm';
+import { onMounted, Ref, ref } from 'vue';
+import {
+  BmsButton,
+  BmsIconButton,
+  BmsInputText,
+  BmsTag,
+  ChipColor,
+  StatusType,
+  useFeatureFlipper,
+} from '@/index';
+import { Activity } from 'lucide-vue-next';
+import BmsChip from '@/components/form/BmsChip.vue';
+
+const { success, error } = useNotifications();
+const { isFeatureEnabled } = useFeatureFlipper();
+const isLoading = ref(false);
+const modal = ref(false);
+const text = ref('');
+const selected = ref('');
+const { confirm } = useConfirm();
+const files: Ref<File[]> = ref([]);
+const inputText0 = ref(null);
+const dateTime = ref('');
+
+onMounted(async () => {
+  const response = await fetch(
+    'https://upload.wikimedia.org/wikipedia/commons/7/70/Example.png',
+  );
+  const blob = await response.blob();
+  files.value = [
+    new File([blob], 'image.jpeg', {
+      type: blob.type,
+    }),
+  ];
+  if (inputText0.value) {
+    (inputText0.value as typeof BmsInputText).setFocus();
+  }
+});
+
+const onSubmit = (e: any) => {
+  e.preventDefault();
+  success(text.value + ' ' + selected.value);
+};
+
+const notifySuccess = () => {
+  success('This is a success', 'This is a details message');
+};
+
+const notifyError = () => {
+  error(
+    'This is an error This is an error This is an error This is an error This is an error This is an error This is an error',
+    {
+      type: 'https://problems.bms.live/fake-problem/bo/loop-problem',
+      title: '[FAKE] Une boucle de redirection a été detectée',
+      status: 400,
+      loop: '/ -> /another-url -> /',
+    } as any,
+  );
+};
+
+const onConfirm = async () => {
+  if (await confirm('Coucou', 'This is an optional confirm title')) {
+    console.log('it was confirmed');
+  } else {
+    console.log('it was discard');
+  }
+};
+
+const onTagClick = () => {
+  console.log('tag clicked');
+};
+</script>
+
+<style lang="scss" scoped>
+.tooltip-flex {
+  display: flex;
+  gap: 16px;
+}
+
+.chips {
+  display: flex;
+  gap: 8px;
+}
+</style>

package/src/showroom/pages/paginated-cards.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import BmsCard from '@/components/layout/BmsCard.vue';
+import BmsContentPageLayout from '@/components/layout/BmsContentPageLayout.vue';
+import BmsPagination from '@/components/table/BmsPagination.vue';
+import { computed, ref } from 'vue';
+import { pokemons } from '@/showroom/db.json';
+
+const size = 5;
+const paginatedPokemons = computed(() =>
+  pokemons.slice(page.value * size, (page.value + 1) * size),
+);
+const page = ref(0);
+</script>
+
+<template>
+  <BmsContentPageLayout>
+    <div class="cards">
+      <BmsCard
+        v-for="pokemon in paginatedPokemons"
+        :key="pokemon.id"
+        class="card"
+      >
+        <h2>{{ pokemon.name }}</h2>
+        {{ pokemon.type }}
+      </BmsCard>
+    </div>
+    <BmsPagination
+      :total="151"
+      :pages="31"
+      :sizes="[5, 10]"
+      :currentPage="page"
+      :currentSize="5"
+      @next="page++"
+      @prev="page--"
+      @go="(i) => (page = i)"
+    />
+  </BmsContentPageLayout>
+</template>
+
+<style lang="scss" scoped>
+.cards {
+  display: flex;
+  gap: 1em;
+  .card {
+    width: 500px;
+  }
+}
+</style>

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

@@ -0,0 +1,160 @@
+<template>
+  <bms-server-table
+    v-model:selectedItems="selectedItems"
+    v-model:selectMode="selectMode"
+    mode="dense"
+    :headers="serverHeaders"
+    :request="customFetchData"
+    :filters="filters"
+    :initial-page="1"
+    :canSaveFilters="true"
+    :savedFilters="savedFilters"
+    :selectable="true"
+    :total="totalItems"
+    @saveFilter="onSaveFilter"
+    @deleteSavedFilter="onDeleteSavedFilter"
+  >
+    <template #default="{ row }: { row: any }">
+      <td>
+        {{ row.id }}
+      </td>
+      <td>
+        {{ row.name }}
+      </td>
+      <td>
+        {{ row.type.join(', ') }}
+      </td>
+    </template>
+  </bms-server-table>
+  <div>type de selection {{ selectMode }}</div>
+  <div>Nb Selected items: {{ selectedItems.length }}</div>
+  <div>
+    Selected items:
+    {{
+      selectMode === SelectMode.ALL &&
+      selectedItems?.map((i: any) => '#' + i.id + ' : ' + i.name).join(', ')
+    }}
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Filter, SavedFilter, SelectMode } from '@/models';
+import axios from 'axios';
+import { Ref, ref } from 'vue';
+import { isEmptyStringOrNotDefined } from '@/helpers';
+
+const serverHeaders = [
+  { label: 'Numéro', key: 'id' },
+  { label: 'Name', key: 'name' },
+  { label: 'Type', key: 'type' },
+];
+
+const filters = [
+  {
+    label: 'Name',
+    key: 'name',
+    type: 'input',
+  },
+  {
+    label: 'Number',
+    key: 'idBetween',
+    type: 'betweenNumber',
+    inputType: 'number',
+  },
+  {
+    label: 'Type',
+    key: 'type',
+    type: 'autocomplete',
+    autocompleteOptions: [
+      'Grass',
+      'Poison',
+      'Fire',
+      'Flying',
+      'Water',
+      'Bug',
+      'Normal',
+      'Electric',
+      'Ground',
+      'Fairy',
+      'Fighting',
+      'Psychic',
+      'Rock',
+      'Steel',
+      'Ice',
+      'Ghost',
+      'Dragon',
+    ],
+  },
+];
+
+const savedFilters: Ref<SavedFilter[]> = ref<SavedFilter[]>([]);
+const selectedItems = ref<any[]>([]);
+const selectMode = ref<SelectMode>(SelectMode.DEFAULT);
+const totalItems = ref(151);
+
+const onSaveFilter = (savedFilter: SavedFilter) => {
+  savedFilters.value.push(savedFilter);
+};
+
+const onDeleteSavedFilter = (savedFilter: SavedFilter) => {
+  savedFilters.value = savedFilters.value.filter(
+    (filter) => filter.id !== savedFilter.id,
+  );
+};
+
+const customFetchData = async (
+  params: any,
+  abortController: AbortController,
+) => {
+  const queryParams: any = {
+    size: params.size,
+    page: params.page,
+  };
+
+  if (params.filters) {
+    params.filters.forEach((filter: Filter) => {
+      if (filter.value !== null && filter.value !== '') {
+        queryParams[filter.key] = filter.value;
+      }
+      if (!isEmptyStringOrNotDefined(filter.valueFrom)) {
+        queryParams[filter.key] = filter.valueFrom;
+      }
+      if (!isEmptyStringOrNotDefined(filter.valueTo)) {
+        queryParams[filter.key] =
+          queryParams[filter.key] + '|' + filter.valueTo;
+      }
+    });
+  }
+
+  if (params.search) {
+    queryParams['name'] = params.search;
+  }
+  const { data } = await axios.get('http://localhost:3000/pokemons', {
+    signal: abortController.signal,
+    params: queryParams,
+  });
+
+  return {
+    total: 151,
+    data,
+  };
+};
+
+const customQueryBuilder = (
+  size: number,
+  _: number,
+  page: number,
+  search: string,
+) => {
+  const params: any = {
+    size: '' + size,
+    page: '' + (page + 1),
+  };
+
+  if (search) {
+    params['beer_name'] = search;
+  }
+
+  return params;
+};
+</script>

package/src/showroom/pages/stepper.vue

@@ -0,0 +1,37 @@
+<template>
+  <bms-stepper :currentStep="currentStep" @stepClick="onStepClick">
+    <bms-step
+      stepLabel="Label"
+      :stepComplete="true"
+      previousLabel=""
+      @next="currentStep = 1"
+    >
+      <div>coucou</div>
+    </bms-step>
+    <bms-step
+      stepLabel="Label 2"
+      :stepComplete="false"
+      @previous="currentStep = 0"
+      @next="currentStep = 2"
+    >
+      <div>toto</div>
+    </bms-step>
+    <bms-step
+      stepLabel="Label 3"
+      :stepComplete="false"
+      nextLabel=""
+      @previous="currentStep = 1"
+    >
+      <div>titi</div>
+    </bms-step>
+  </bms-stepper>
+</template>
+
+<script setup lang="ts">
+import { Ref, ref } from 'vue';
+
+const currentStep: Ref<number> = ref(0);
+const onStepClick = (step: number) => {
+  currentStep.value = step;
+};
+</script>

package/src/showroom/pages/table.vue

@@ -0,0 +1,192 @@
+<template>
+  <BmsBackButton :fallback="{ path: '/' }" />
+  <bms-table
+    :headers="headers"
+    :filters="filters"
+    :items="items"
+    mode="dense"
+    :size="5"
+    :canSaveFilters="true"
+    :savedFilters="savedFilters"
+    :selectable="true"
+    help-link="/help-path"
+    activity-link="/activity-path"
+    v-model:selectedItems="selectedItems"
+    @saveFilter="onSaveFilter"
+    @deleteSavedFilter="onDeleteSavedFilter"
+  >
+    <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 }}
+      </BmsTooltip>
+    </template>
+    <template #deepValue="{ row }">
+      {{ row.deepValue.deepAttr }}
+    </template>
+    <template #tooltip>
+      <BmsTooltip tooltip-text="Looooooooooooooooooooooooong tooltip">
+        tooltip
+      </BmsTooltip>
+    </template>
+    <template #action>
+      <BmsIconButton> <Save /> </BmsIconButton>
+      <BmsIconButton :mode="StatusType.Danger"> <Trash /> </BmsIconButton>
+    </template>
+  </bms-table>
+  <BmsButton @click="goBack">Go Back</BmsButton>
+  <div>selectedItems Size = {{ selectedItems.length }}</div>
+  <div>
+    selectedItems :
+    {{ selectedItems }}
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { BmsBackButton, BmsButton } from '@/index';
+import {
+  Filter,
+  InputType,
+  SavedFilter,
+  SortValue,
+  StatusType,
+} from '@/models';
+import { Ref, ref } from 'vue';
+import { useRouterHistory } from '@/plugins/router-history/router-history.composable';
+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';
+
+const { goBack } = useRouterHistory();
+
+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: 'choice1', key: 'choice1' },
+  { label: 'choice2', key: 'choice2' },
+  {
+    label: 'DeepValue',
+    key: 'deepValue',
+    sortable: true,
+    sortFunction: (a: any, b: any, sort: SortValue) => {
+      if (a.deepValue.deepAttr < b.deepValue.deepAttr) {
+        return sort === SortValue.asc ? -1 : 1;
+      }
+      if (a.deepValue.deepAttr > b.deepValue.deepAttr) {
+        return sort === SortValue.asc ? 1 : -1;
+      }
+      return 0;
+    },
+  },
+  { label: 'isOk', key: 'isOk', sortable: true },
+  { label: 'number', key: 'number' },
+  { label: 'tooltip', key: 'tooltip' },
+];
+
+const randomDate = () =>
+  new Date(
+    new Date('2023-01-01').getTime() +
+      Math.random() *
+        (new Date('2026-01-01').getTime() - new Date('2023-01-01').getTime()),
+  );
+
+const items = Array(100)
+  .fill(0)
+  .map((_, index) => ({
+    column1: "Nom de l'item " + index,
+    column2: 'little-slug-' + index,
+    date: randomDate(),
+    dateUpdate: randomDate(),
+    dateDelete: randomDate(),
+    choice1: Math.random() < 0.5 ? Math.random() * 3 : 'toto',
+    choice2:
+      Math.random() < 0.5 ? (Math.random() < 0.5 ? 'huey' : 'dewey') : 'louie',
+    deepValue: {
+      deepAttr: index % 2 === 0,
+    },
+    isOk: Math.random() < 0.5,
+    number: Math.random(),
+  }));
+
+const savedFilters: Ref<SavedFilter[]> = ref<SavedFilter[]>([]);
+const selectedItems: Ref<any[]> = ref([]);
+
+const onSaveFilter = (savedFilter: SavedFilter) => {
+  savedFilters.value.push(savedFilter);
+};
+
+const onDeleteSavedFilter = (savedFilter: SavedFilter) => {
+  savedFilters.value = savedFilters.value.filter(
+    (filter) => filter.id !== savedFilter.id,
+  );
+};
+
+const filters: Filter[] = [
+  {
+    label: 'inputText Colonne 1',
+    key: 'column1',
+    type: 'input',
+  },
+  {
+    label: 'autocomplete choice',
+    key: 'choice1',
+    type: 'autocomplete',
+    autocompleteOptions: ['titi', 'toto'],
+  },
+  {
+    label: 'choice',
+    key: 'choice2',
+    type: 'select',
+    selectOptions: [
+      { label: 'huey', value: 'huey' },
+      { label: 'dewey', value: 'dewey' },
+      { label: 'louie', value: 'louie' },
+    ],
+  },
+  {
+    label: 'Date update greater than',
+    key: 'dateUpdate',
+    type: 'inputDate',
+    inputType: InputType.DATE,
+  },
+  {
+    label: 'Datetime delete greater than',
+    key: 'dateDelete',
+    type: 'inputDate',
+    inputType: InputType.DATETIME,
+  },
+  {
+    label: 'Date',
+    key: 'date',
+    type: 'betweenDate',
+    inputType: InputType.DATE,
+  },
+  { label: 'isOk', key: 'isOk', type: 'boolean' },
+  {
+    label: 'custom bool > 0.5',
+    key: 'number',
+    type: 'boolean',
+    customFilter: (item: any, value: any, target: string) =>
+      item[target] > 0.5 === value,
+  },
+];
+</script>

package/src/showroom/pages/tabs/[tabName].vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <bms-tabs
+      title="Title"
+      :tabs="[
+        { name: 'Titi', routePath: '/tabs/titi' },
+        { name: 'Toto', routePath: '/tabs/toto' },
+        { name: 'Tutu', routePath: '/tabs/tutu' },
+      ]"
+    >
+    </bms-tabs>
+    <template v-if="currentTab === 'titi'">
+      <div>titi</div>
+    </template>
+    <template v-if="currentTab === 'toto'">
+      <div>toto</div>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRouter } from 'vue-router';
+
+const { currentRoute } = useRouter();
+
+const currentTab = computed(() => currentRoute.value.params.tabName);
+</script>

package/src/showroom/router.ts

@@ -0,0 +1,15 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import generatedRoutes from '~pages';
+
+export const customRoutes = [
+  {
+    name: 'tabs',
+    path: '/tabs',
+    redirect: { path: '/tabs/titi' },
+  },
+];
+
+export const router = createRouter({
+  history: createWebHistory(),
+  routes: [...generatedRoutes, ...customRoutes],
+});