@ouestfrance/sipa-bms-ui 7.14.1

package/src/helpers/table.helper.ts

@@ -0,0 +1,88 @@
+import { isEmptyStringOrNotDefined } from '@/helpers/string.helper';
+import { Filter, Sort, TableHeader } from '@/models';
+
+/**
+ * convert BmsTableFilters filters in readable query parameters
+ * use by the team BMS api (bms, contribution, api device)
+ * compatible with APIPaginatedResource in use in bo BMS
+ * @param params
+ */
+export const getFiltersAsQueryParams = (params: {
+  page: number;
+  size: number;
+  search: string;
+  filters?: Filter[];
+  others?: any;
+  sort?: Sort;
+}) => {
+  if (!params) {
+    return {
+      size: 0,
+      page: 0,
+    };
+  }
+  //reset searchParams
+  let searchParams = {
+    size: params.size,
+    page: params.page,
+  } as any;
+  if (params.others) {
+    searchParams = {
+      ...searchParams,
+      ...params.others,
+    };
+  }
+  if (params.search) {
+    searchParams['search'] = params.search;
+  }
+  if (params.filters) {
+    params.filters.forEach((filter: Filter) => {
+      try {
+        if (filter.value !== null && filter.value !== '') {
+          searchParams[filter.key] = filter.value;
+        }
+        if (
+          ['betweenDate', 'betweenDateTime', 'betweenNumber'].includes(
+            filter.type,
+          )
+        ) {
+          if (!isEmptyStringOrNotDefined(filter.valueFrom)) {
+            if (filter.type === 'betweenDate') {
+              searchParams[`${filter.key}From`] = new Date(
+                filter.valueFrom,
+              ).toISOString();
+            } else {
+              searchParams[`${filter.key}From`] = filter.valueFrom;
+            }
+          }
+          if (!isEmptyStringOrNotDefined(filter.valueTo)) {
+            if (filter.type === 'betweenDate') {
+              const dateTo = new Date(filter.valueTo);
+              dateTo.setHours(25, 59, 59, 0); // for local purpose (GMT+2)
+              searchParams[`${filter.key}To`] = dateTo.toISOString();
+            } else {
+              searchParams[`${filter.key}To`] = filter.valueTo;
+            }
+          }
+        }
+      } catch (e: any) {
+        console.error(e);
+      }
+    });
+  }
+  return searchParams;
+};
+
+export const enforceActionsColumnHeader = (
+  headers: TableHeader[],
+): TableHeader[] => {
+  const actionsHeaders = headers
+    .filter((h) => h.action)
+    .map((h) => ({ ...h, width: h.width ?? '75px' }))
+    .map((h) => ({ ...h, align: h.align ?? 'center' }));
+  if (actionsHeaders.length > 1)
+    console.error('Table component cannot have multiple action columns ');
+  return headers
+    .filter((h) => !h?.action)
+    .concat(actionsHeaders.length ? actionsHeaders[0] : []);
+};

package/src/index.ts

@@ -0,0 +1,203 @@
+import { App } from 'vue';
+
+import BmsButton from './components/button/BmsButton.vue';
+import BmsIconButton from './components/button/BmsIconButton.vue';
+
+import BmsAlert from './components/feedback/BmsAlert.vue';
+import BmsBadge from './components/feedback/BmsBadge.vue';
+import BmsCaption from './components/feedback/BmsCaption.vue';
+import BmsCircularProgress from './components/feedback/BmsCircularProgress.vue';
+import BmsLoader from './components/feedback/BmsLoader.vue';
+import BmsTooltip from './components/feedback/BmsTooltip.vue';
+
+import BmsAutocomplete from './components/form/BmsAutocomplete.vue';
+import BmsBetweenInput from './components/form/BmsBetweenInput.vue';
+import BmsChip from './components/form/BmsChip.vue';
+import BmsFilePicker from './components/form/BmsFilePicker.vue';
+import BmsInputBooleanCheckbox from './components/form/BmsInputBooleanCheckbox.vue';
+import BmsInputCheckboxGroup from './components/form/BmsInputCheckboxGroup.vue';
+import BmsInputCheckboxCaption from './components/form/BmsInputCheckboxCaption.vue';
+import BmsInputCheckboxCaptionGroup from './components/form/BmsInputCheckboxCaptionGroup.vue';
+import BmsInputCode from './components/form/BmsInputCode.vue';
+import BmsInputDateTime from './components/form/BmsInputDateTime.vue';
+import BmsInputFile from './components/form/BmsInputFile.vue';
+import BmsInputNumber from './components/form/BmsInputNumber.vue';
+import BmsInputRadio from './components/form/BmsInputRadio.vue';
+import BmsInputRadioGroup from './components/form/BmsInputRadioGroup.vue';
+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 BmsSearch from './components/form/BmsSearch.vue';
+import BmsSelect from './components/form/BmsSelect.vue';
+import BmsTag from './components/form/BmsTag.vue';
+import BmsTextArea from './components/form/BmsTextArea.vue';
+
+import BmsContentPageLayout from './components/layout/BmsContentPageLayout.vue';
+import BmsCard from './components/layout/BmsCard.vue';
+import BmsForm from './components/layout/BmsForm.vue';
+import BmsHeader from './components/layout/BmsHeader.vue';
+import BmsHeaderTitle from './components/layout/BmsHeaderTitle.vue';
+import BmsModal from './components/layout/BmsModal.vue';
+import BmsOverlay from './components/layout/BmsOverlay.vue';
+import BmsSection from './components/layout/BmsSection.vue';
+import BmsStep from './components/layout/BmsStep.vue';
+import BmsStepper from './components/layout/BmsStepper.vue';
+
+import BmsBackButton from './components/navigation/BmsBackButton.vue';
+import BmsBreadcrumb from './components/navigation/BmsBreadcrumb.vue';
+import BmsLink from './components/navigation/BmsLink.vue';
+import BmsMenu from './components/navigation/BmsMenu.vue';
+import BmsMenuNav from './components/navigation/BmsMenuNav.vue';
+import BmsShortLinkMenu from './components/navigation/BmsShortLinkMenu.vue';
+import BmsTabs from './components/navigation/BmsTabs.vue';
+import BmsTenantSwitcher from './components/navigation/BmsTenantSwitcher.vue';
+
+import BmsDraggableList from './components/table/DraggableList.vue';
+import BmsEmptyScreen from './components/table/BmsEmptyScreen.vue';
+import BmsPagination from './components/table/BmsPagination.vue';
+import BmsServerTable from './components/table/BmsServerTable.vue';
+import BmsTable from './components/table/BmsTable.vue';
+
+import BmsCocarde from './components/utils/BmsCocarde.vue';
+import BmsProblem from './components/utils/BmsProblem.vue';
+import BmsRelativeTime from './components/utils/BmsRelativeTime.vue';
+
+import './assets/scss/app.scss';
+
+export const createBmsUi = () => ({
+  install: (app: App) => {
+    app.component('BmsButton', BmsButton);
+    app.component('BmsIconButton', BmsIconButton);
+
+    app.component('BmsAlert', BmsAlert);
+    app.component('BmsBadge', BmsBadge);
+    app.component('BmsCaption', BmsCaption);
+    app.component('BmsCircularProgress', BmsCircularProgress);
+    app.component('BmsLoader', BmsLoader);
+    app.component('BmsTooltip', BmsTooltip);
+
+    app.component('BmsAutocomplete', BmsAutocomplete);
+    app.component('BmsBetweenInput', BmsBetweenInput);
+    app.component('BmsChip', BmsChip);
+    app.component('BmsFilePicker', BmsFilePicker);
+    app.component('BmsInputBooleanCheckbox', BmsInputBooleanCheckbox);
+    app.component('BmsInputCheckboxGroup', BmsInputCheckboxGroup);
+    app.component('BmsInputCheckboxCaption', BmsInputCheckboxCaption);
+    app.component('BmsInputCheckboxCaptionGroup', BmsInputCheckboxCaptionGroup);
+    app.component('BmsInputCode', BmsInputCode);
+    app.component('BmsInputDateTime', BmsInputDateTime);
+    app.component('BmsInputFile', BmsInputFile);
+    app.component('BmsInputNumber', BmsInputNumber);
+    app.component('BmsInputRadio', BmsInputRadio);
+    app.component('BmsInputRadioGroup', BmsInputRadioGroup);
+    app.component('BmsInputRadioCaption', BmsInputRadioCaption);
+    app.component('BmsInputRadioCaptionGroup', BmsInputRadioCaptionGroup);
+    app.component('BmsInputText', BmsInputText);
+    app.component('BmsInputToggle', BmsInputToggle);
+    app.component('BmsSearch', BmsSearch);
+    app.component('BmsSelect', BmsSelect);
+    app.component('BmsTag', BmsTag);
+    app.component('BmsTextArea', BmsTextArea);
+
+    app.component('BmsContentPageLayout', BmsContentPageLayout);
+    app.component('BmsCard', BmsCard);
+    app.component('BmsForm', BmsForm);
+    app.component('BmsHeader', BmsHeader);
+    app.component('BmsHeaderTitle', BmsHeaderTitle);
+    app.component('BmsModal', BmsModal);
+    app.component('BmsOverlay', BmsOverlay);
+    app.component('BmsSection', BmsSection);
+    app.component('BmsStep', BmsStep);
+    app.component('BmsStepper', BmsStepper);
+
+    app.component('BmsBackButton', BmsBackButton);
+    app.component('BmsBreadcrumb', BmsBreadcrumb);
+    app.component('BmsLink', BmsLink);
+    app.component('BmsMenu', BmsMenu);
+    app.component('BmsMenuNav', BmsMenuNav);
+    app.component('BmsShortLinkMenu', BmsShortLinkMenu);
+    app.component('BmsTabs', BmsTabs);
+    app.component('BmsTenantSwitcher', BmsTenantSwitcher);
+
+    app.component('BmsDraggableList', BmsDraggableList);
+    app.component('BmsEmptyScreen', BmsEmptyScreen);
+    app.component('BmsPagination', BmsPagination);
+    app.component('BmsServerTable', BmsServerTable);
+    app.component('BmsTable', BmsTable);
+
+    app.component('BmsCocarde', BmsCocarde);
+    app.component('BmsProblem', BmsProblem);
+    app.component('BmsRelativeTime', BmsRelativeTime);
+  },
+});
+
+export * from './composables';
+export * from './helpers';
+export * from './models';
+export * from './plugins/feature-flipper';
+export * from './plugins/field';
+export * from './plugins/keycloak-auth-adapter';
+export * from './plugins/notifications';
+export * from './plugins/confirm';
+export * from './plugins/runtime-env';
+export * from './plugins/router-history';
+export * from './services';
+export {
+  BmsButton,
+  BmsIconButton,
+  BmsAlert,
+  BmsBadge,
+  BmsCaption,
+  BmsCircularProgress,
+  BmsLoader,
+  BmsTooltip,
+  BmsAutocomplete,
+  BmsBetweenInput,
+  BmsChip,
+  BmsFilePicker,
+  BmsInputBooleanCheckbox,
+  BmsInputCheckboxGroup,
+  BmsInputCheckboxCaption,
+  BmsInputCheckboxCaptionGroup,
+  BmsInputCode,
+  BmsInputDateTime,
+  BmsInputFile,
+  BmsInputNumber,
+  BmsInputRadio,
+  BmsInputRadioGroup,
+  BmsInputRadioCaption,
+  BmsInputRadioCaptionGroup,
+  BmsInputText,
+  BmsInputToggle,
+  BmsSearch,
+  BmsSelect,
+  BmsTag,
+  BmsTextArea,
+  BmsContentPageLayout,
+  BmsCard,
+  BmsForm,
+  BmsHeader,
+  BmsHeaderTitle,
+  BmsModal,
+  BmsOverlay,
+  BmsSection,
+  BmsStep,
+  BmsStepper,
+  BmsBackButton,
+  BmsBreadcrumb,
+  BmsLink,
+  BmsMenu,
+  BmsMenuNav,
+  BmsShortLinkMenu,
+  BmsTabs,
+  BmsTenantSwitcher,
+  BmsDraggableList,
+  BmsEmptyScreen,
+  BmsPagination,
+  BmsServerTable,
+  BmsTable,
+  BmsCocarde,
+  BmsProblem,
+  BmsRelativeTime,
+};

package/src/main.ts

@@ -0,0 +1,25 @@
+import App from '@showroom/App.vue';
+import { router } from '@showroom/router';
+import 'normalize.css';
+import { createApp } from 'vue';
+
+import './assets/scss/app.scss';
+
+import {
+  createBmsUi,
+  field,
+  notifications,
+  confirmPlugin,
+  routerHistoryPlugin,
+  featureFlipperPlugin,
+} from '.';
+
+createApp(App)
+  .use(createBmsUi())
+  .use(field)
+  .use(notifications)
+  .use(router)
+  .use(confirmPlugin)
+  .use(routerHistoryPlugin)
+  .use(featureFlipperPlugin, { featureA: false })
+  .mount('#app');

package/src/models/breadcrumb.model.ts

@@ -0,0 +1,6 @@
+import { type RouteLocationRaw } from 'vue-router';
+
+export interface Breadcrumb {
+  to?: RouteLocationRaw | string;
+  label: string;
+}

package/src/models/caption.model.ts

@@ -0,0 +1,7 @@
+import { StatusType } from './status-type.model';
+
+export interface Caption {
+  label: string;
+  labelAsHtml?: boolean;
+  mode?: StatusType;
+}

package/src/models/chip.model.ts

@@ -0,0 +1,8 @@
+export enum ChipColor {
+  Blue = 'blue',
+  Green = 'green',
+  Grey = 'grey',
+  Orange = 'orange',
+  Red = 'red',
+  Purple = 'purple',
+}

package/src/models/cocarde.model.ts

@@ -0,0 +1,4 @@
+export enum CocardeBorder {
+  Square = 'square',
+  Round = 'round',
+}

package/src/models/form.model.ts

@@ -0,0 +1,30 @@
+import { Caption } from '@/models/caption.model';
+
+export interface BmsInputRadioGroupOption {
+  value: any;
+  label?: string;
+}
+
+export interface BmsInputCheckboxGroupOption {
+  value: any;
+  label?: string;
+}
+
+export interface BmsInputRadioCaptionGroupOption {
+  value: any;
+  label?: string;
+  captions: string[] | Caption[];
+}
+
+export interface BmsInputCheckboxCaptionGroupOption {
+  value: any;
+  label?: string;
+  captions: string[] | Caption[];
+}
+
+export enum InputType {
+  TEXT = 'text',
+  NUMBER = 'number',
+  DATE = 'date',
+  DATETIME = 'datetime-local',
+}

package/src/models/index.ts

@@ -0,0 +1,14 @@
+export * from './breadcrumb.model';
+export * from './caption.model';
+export * from './cocarde.model';
+export * from './chip.model';
+export * from './form.model';
+export * from './menu.model';
+export * from './modal.model';
+export * from './problem.model';
+export * from './sort.model';
+export * from './status-type.model';
+export * from './tab.model';
+export * from './table.model';
+export * from './tenant.model';
+export * from './tooltip.model';

package/src/models/menu.model.ts

@@ -0,0 +1,20 @@
+import { Component } from 'vue';
+import { RouteLocationRaw } from 'vue-router';
+import { StatusType } from '@/models/status-type.model';
+
+interface CommonMenuItem {
+  label: string;
+  icon?: Component;
+  status?: StatusType;
+  id: string;
+  link?: string | RouteLocationRaw;
+}
+
+export interface MenuItem extends CommonMenuItem {
+  link: string | RouteLocationRaw;
+}
+
+export interface ParentMenuItem extends CommonMenuItem {
+  items: MenuItem[];
+  open?: boolean;
+}

package/src/models/modal.model.ts

@@ -0,0 +1,9 @@
+import { StatusType } from './status-type.model';
+
+export interface ModalActionButton {
+  label: string;
+  role: 'cancel' | 'submit';
+  action?: () => Promise<boolean>;
+  mode?: StatusType.Danger | StatusType.Default;
+  disabled?: boolean;
+}

package/src/models/problem.model.ts

@@ -0,0 +1,10 @@
+export interface Problem {
+  type: string;
+  title: string;
+  status: number;
+  detail: string;
+  correlationId?: string;
+  diagrams?: string[];
+  possibleCause?: string;
+  violations?: { [key: string]: { detail: string }[] };
+}

package/src/models/sort.model.ts

@@ -0,0 +1,13 @@
+export interface Sort {
+  key: null | string;
+  value: SortValue;
+  overridenSortFunction?: SortFunction;
+}
+
+export type SortFunction = (a: any, b: any, value: SortValue) => -1 | 0 | 1;
+
+export enum SortValue {
+  default = 'default',
+  asc = 'asc',
+  desc = 'desc',
+}

package/src/models/status-type.model.ts

@@ -0,0 +1,7 @@
+export enum StatusType {
+  Danger = 'danger',
+  Warning = 'warning',
+  Default = 'default',
+  Information = 'information',
+  Success = 'success',
+}

package/src/models/tab.model.ts

@@ -0,0 +1,7 @@
+export interface Tab {
+  routePath?: string;
+  routeName?: string;
+  name: string;
+  disabled?: boolean;
+  error?: boolean;
+}

package/src/models/table.model.ts

@@ -0,0 +1,58 @@
+import { Sort, SortFunction } from './sort.model';
+
+export interface TableHeader {
+  label: string;
+  key: string;
+  align?: 'start' | 'center' | 'end';
+  class?: string;
+  width?: string;
+  sortable?: boolean;
+  sortFunction?: SortFunction;
+  action?: boolean;
+}
+
+export interface ServerTableRequestParams {
+  size: number;
+  offset: number;
+  page: number;
+  search: string;
+  filters?: Filter[];
+  sort?: Sort;
+}
+
+export type FilterType =
+  | 'select'
+  | 'input'
+  | 'inputDate'
+  | 'boolean'
+  | 'autocomplete'
+  | 'betweenNumber'
+  | 'betweenDate'
+  | 'betweenDateTime';
+
+export interface Filter {
+  label: string;
+  inputType?: string;
+  key: string;
+  type: FilterType;
+  value?: any;
+  valueFrom?: any;
+  valueTo?: any;
+  selectOptions?: { label: string; value: any }[];
+  autocompleteOptions?: string[] | { label: string; value: string }[];
+  customFilter?: Function;
+}
+
+export interface SavedFilter {
+  id: string;
+  name: string;
+  icon?: string;
+  unDeletable?: boolean;
+  route: string;
+  filters: { target: string; value: any }[];
+}
+
+export enum SelectMode {
+  ALL = 'all',
+  DEFAULT = 'default',
+}

package/src/models/tenant.model.ts

@@ -0,0 +1,7 @@
+export interface Tenant {
+  information: string;
+  label: string;
+  id: string;
+  logoFile?: string;
+  isFavorite?: boolean;
+}

package/src/models/tooltip.model.ts

@@ -0,0 +1,6 @@
+export enum TooltipDirection {
+  Left = 'left',
+  Right = 'right',
+  Top = 'top',
+  Bottom = 'bottom',
+}

package/src/pages/Form.stories.js

@@ -0,0 +1,83 @@
+import BmsContentPageLayout from '../components/layout/BmsContentPageLayout.vue';
+import BmsTable from '../components/table/BmsTable.vue';
+import BmsBreadcrumb from '../components/navigation/BmsBreadcrumb.vue';
+import BmsButton from '../components/button/BmsButton.vue';
+import BmsAutocomplete from '../components/form/BmsAutocomplete.vue';
+import BmsInputText from '../components/form/BmsInputText.vue';
+import BmsForm from '../components/layout/BmsForm.vue';
+import BmsHeaderTitle from '../components/layout/BmsHeaderTitle.vue';
+
+export default {
+  components: {
+    BmsHeaderTitle,
+    BmsForm,
+    BmsInputText,
+    BmsAutocomplete,
+    BmsButton,
+    BmsBreadcrumb,
+    BmsTable,
+  },
+  title: 'Pages/Form',
+  component: BmsContentPageLayout,
+  argTypes: {},
+};
+
+const Template = (args) => ({
+  components: {
+    BmsContentPageLayout,
+    BmsHeaderTitle,
+    BmsBreadcrumb,
+    BmsForm,
+    BmsAutocomplete,
+    BmsInputText,
+    BmsButton,
+  },
+  setup() {
+    return { args };
+  },
+  template: `
+      <BmsContentPageLayout>
+        <template #header>
+          <BmsHeaderTitle title="Le Titre de la page"/>          
+        </template>
+        <template #breadcrumb>
+          <BmsBreadcrumb :breadcrumbs="args.breadcrumb"/>
+        </template>
+        <template #default>
+
+          <BmsForm>
+
+            <template #form>
+              Here the form slot for input
+              <br/>
+              <BmsInputText v-model="args.inputValue"
+                            label="Mon premier champ de formulaire"
+                            helper-text="help me here !"
+                            placeholder="ici votre placeholder"
+              />
+              <BmsAutocomplete v-model="args.selectValue"
+                               label="Mon second champ de formulaire"
+                               placeholder="ici votre placeholder"
+                               helper-text="help me here !"
+                               :options="['option1','option2']"/>
+            </template>
+            <template #actions>
+              <BmsButton :type="'secondary'" >
+                Annuler
+              </BmsButton>
+              <BmsButton :type="'primary'">
+                Modifier
+              </BmsButton>
+            </template>
+          </BmsForm>
+        </template>
+      </BmsContentPageLayout>
+    `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+  inputValue: null,
+  selectValue: null,
+  breadcrumb: [{ label: 'list', to: '/exposed' }, { label: 'form' }],
+};