@cnamts/synapse 0.0.10-alpha → 0.0.11-alpha

package/src/components/PaginatedTable/tests/__snapshots__/PaginatedTable.spec.ts.snap

@@ -0,0 +1,249 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`PaginatedTable > render correctly in server mode 1`] = `
+"<div id="paginated-table">
+  <div class="v-table v-table--has-top v-table--has-bottom v-theme--light v-table--density-default v-data-table" itemslength="0">
+    <!---->
+    <div class="v-table__wrapper">
+      <table>
+        <!---->
+        <thead>
+          <!---->
+        </thead>
+        <!---->
+        <tbody>
+          <!---->
+          <tr class="v-data-table-rows-no-data">
+            <td colspan="0">No data available</td>
+          </tr>
+          <!---->
+        </tbody>
+        <!---->
+        <!---->
+      </table>
+    </div>
+    <hr class="v-divider v-theme--light" aria-orientation="horizontal" role="separator">
+    <div class="v-data-table-footer">
+      <!---->
+      <div class="v-data-table-footer__items-per-page"><span>Items per page:</span>
+        <div class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-select v-select--single v-select--selected">
+          <!---->
+          <div class="v-input__control">
+            <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-outlined v-theme--light v-locale--is-ltr" role="combobox">
+              <div class="v-field__overlay"></div>
+              <div class="v-field__loader">
+                <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+                  <!---->
+                  <div class="v-progress-linear__background" style="opacity: NaN;"></div>
+                  <div class="v-progress-linear__buffer" style="opacity: NaN; width: 0%;"></div>
+                  <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+                    <div class="v-progress-linear__indeterminate">
+                      <div class="v-progress-linear__indeterminate long"></div>
+                      <div class="v-progress-linear__indeterminate short"></div>
+                    </div>
+                  </transition-stub>
+                  <!---->
+                </div>
+              </div>
+              <!---->
+              <div class="v-field__field" data-no-activator="">
+                <!---->
+                <!---->
+                <!---->
+                <div class="v-field__input" data-no-activator="">
+                  <!---->
+                  <!---->
+                  <div class="v-select__selection"><span class="v-select__selection-text">10<!----></span></div><input size="1" type="text" id="input-0" aria-describedby="input-0-messages" inputmode="none" aria-label="Open" title="Open" value="10">
+                </div>
+                <!---->
+              </div>
+              <!---->
+              <div class="v-field__append-inner">
+                <!----><i class="mdi-menu-down mdi v-icon notranslate v-theme--light v-icon--size-default v-select__menu-icon" aria-hidden="true"></i>
+                <!---->
+              </div>
+              <div class="v-field__outline">
+                <div class="v-field__outline__start"></div>
+                <!---->
+                <div class="v-field__outline__end"></div>
+                <!---->
+              </div>
+            </div>
+          </div>
+          <!---->
+          <!---->
+        </div>
+      </div>
+      <div class="v-data-table-footer__info">
+        <div>0-0 of 0</div>
+      </div>
+      <div class="v-data-table-footer__pagination">
+        <nav class="v-pagination v-theme--light" role="navigation" aria-label="Pagination Navigation" data-test="v-pagination-root">
+          <ul class="v-pagination__list">
+            <li class="v-pagination__first" data-test="v-pagination-first"><button type="button" class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain" disabled="" aria-label="First page" aria-disabled="true"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+                <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-page-first mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+                <!---->
+                <!---->
+              </button></li>
+            <li class="v-pagination__prev" data-test="v-pagination-prev"><button type="button" class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain" disabled="" aria-label="Previous page" aria-disabled="true"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+                <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-chevron-left mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+                <!---->
+                <!---->
+              </button></li>
+            <li class="v-pagination__next" data-test="v-pagination-next"><button type="button" class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain" disabled="" aria-label="Next page" aria-disabled="true"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+                <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-chevron-right mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+                <!---->
+                <!---->
+              </button></li>
+            <li class="v-pagination__last" data-test="v-pagination-last"><button type="button" class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain" disabled="" aria-label="Last page" aria-disabled="true"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+                <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-page-last mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+                <!---->
+                <!---->
+              </button></li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`PaginatedTable > renders correctly in local mode 1`] = `
+"<div id="paginated-table" items="[object Object],[object Object],[object Object]" headers="[object Object],[object Object],[object Object]">
+  <div class="v-table v-table--has-top v-table--has-bottom v-theme--light v-table--density-default v-data-table" itemslength="0">
+    <!---->
+    <div class="v-table__wrapper">
+      <table>
+        <!---->
+        <thead>
+          <tr>
+            <th class="v-data-table__td v-data-table-column--align-start v-data-table__th--sortable v-data-table__th" colspan="1" rowspan="1">
+              <div class="v-data-table-header__content"><span>ID</span><i class="mdi-arrow-up mdi v-icon notranslate v-theme--light v-icon--size-default v-data-table-header__sort-icon" aria-hidden="true"></i>
+                <!---->
+              </div>
+            </th>
+            <th class="v-data-table__td v-data-table-column--align-start v-data-table__th--sortable v-data-table__th" colspan="1" rowspan="1">
+              <div class="v-data-table-header__content"><span>Name</span><i class="mdi-arrow-up mdi v-icon notranslate v-theme--light v-icon--size-default v-data-table-header__sort-icon" aria-hidden="true"></i>
+                <!---->
+              </div>
+            </th>
+            <th class="v-data-table__td v-data-table-column--align-start v-data-table__th--sortable v-data-table__th" colspan="1" rowspan="1">
+              <div class="v-data-table-header__content"><span>Age</span><i class="mdi-arrow-up mdi v-icon notranslate v-theme--light v-icon--size-default v-data-table-header__sort-icon" aria-hidden="true"></i>
+                <!---->
+              </div>
+            </th>
+          </tr>
+          <!---->
+        </thead>
+        <!---->
+        <tbody>
+          <!---->
+          <tr class="v-data-table__tr">
+            <td class="v-data-table__td v-data-table-column--align-start">1</td>
+            <td class="v-data-table__td v-data-table-column--align-start">John Doe</td>
+            <td class="v-data-table__td v-data-table-column--align-start">25</td>
+          </tr>
+          <!---->
+          <tr class="v-data-table__tr">
+            <td class="v-data-table__td v-data-table-column--align-start">2</td>
+            <td class="v-data-table__td v-data-table-column--align-start">Jane Doe</td>
+            <td class="v-data-table__td v-data-table-column--align-start">30</td>
+          </tr>
+          <!---->
+          <tr class="v-data-table__tr">
+            <td class="v-data-table__td v-data-table-column--align-start">3</td>
+            <td class="v-data-table__td v-data-table-column--align-start">John Smith</td>
+            <td class="v-data-table__td v-data-table-column--align-start">35</td>
+          </tr>
+          <!---->
+          <!---->
+        </tbody>
+        <!---->
+        <!---->
+      </table>
+    </div>
+    <hr class="v-divider v-theme--light" aria-orientation="horizontal" role="separator">
+    <div class="v-data-table-footer">
+      <!---->
+      <div class="v-data-table-footer__items-per-page"><span>Items per page:</span>
+        <div class="v-input v-input--horizontal v-input--center-affix v-input--density-compact v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-select v-select--single v-select--selected">
+          <!---->
+          <div class="v-input__control">
+            <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-outlined v-theme--light v-locale--is-ltr" role="combobox">
+              <div class="v-field__overlay"></div>
+              <div class="v-field__loader">
+                <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
+                  <!---->
+                  <div class="v-progress-linear__background" style="opacity: NaN;"></div>
+                  <div class="v-progress-linear__buffer" style="opacity: NaN; width: 0%;"></div>
+                  <transition-stub name="fade-transition" appear="false" persisted="false" css="true">
+                    <div class="v-progress-linear__indeterminate">
+                      <div class="v-progress-linear__indeterminate long"></div>
+                      <div class="v-progress-linear__indeterminate short"></div>
+                    </div>
+                  </transition-stub>
+                  <!---->
+                </div>
+              </div>
+              <!---->
+              <div class="v-field__field" data-no-activator="">
+                <!---->
+                <!---->
+                <!---->
+                <div class="v-field__input" data-no-activator="">
+                  <!---->
+                  <!---->
+                  <div class="v-select__selection"><span class="v-select__selection-text">10<!----></span></div><input size="1" type="text" id="input-0" aria-describedby="input-0-messages" inputmode="none" aria-label="Open" title="Open" value="10">
+                </div>
+                <!---->
+              </div>
+              <!---->
+              <div class="v-field__append-inner">
+                <!----><i class="mdi-menu-down mdi v-icon notranslate v-theme--light v-icon--size-default v-select__menu-icon" aria-hidden="true"></i>
+                <!---->
+              </div>
+              <div class="v-field__outline">
+                <div class="v-field__outline__start"></div>
+                <!---->
+                <div class="v-field__outline__end"></div>
+                <!---->
+              </div>
+            </div>
+          </div>
+          <!---->
+          <!---->
+        </div>
+      </div>
+      <div class="v-data-table-footer__info">
+        <div>1-3 of 3</div>
+      </div>
+      <div class="v-data-table-footer__pagination">
+        <nav class="v-pagination v-theme--light" role="navigation" aria-label="Pagination Navigation" data-test="v-pagination-root">
+          <ul class="v-pagination__list">
+            <li class="v-pagination__first" data-test="v-pagination-first"><button type="button" class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain" disabled="" aria-label="First page" aria-disabled="true"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+                <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-page-first mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+                <!---->
+                <!---->
+              </button></li>
+            <li class="v-pagination__prev" data-test="v-pagination-prev"><button type="button" class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain" disabled="" aria-label="Previous page" aria-disabled="true"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+                <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-chevron-left mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+                <!---->
+                <!---->
+              </button></li>
+            <li class="v-pagination__next" data-test="v-pagination-next"><button type="button" class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain" disabled="" aria-label="Next page" aria-disabled="true"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+                <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-chevron-right mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+                <!---->
+                <!---->
+              </button></li>
+            <li class="v-pagination__last" data-test="v-pagination-last"><button type="button" class="v-btn v-btn--disabled v-btn--icon v-theme--light v-btn--density-comfortable v-btn--rounded v-btn--size-default v-btn--variant-plain" disabled="" aria-label="Last page" aria-disabled="true"><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+                <!----><span class="v-btn__content" data-no-activator=""><i class="mdi-page-last mdi v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true"></i></span>
+                <!---->
+                <!---->
+              </button></li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </div>
+</div>"
+`;

package/src/components/PaginatedTable/types.ts

@@ -0,0 +1,30 @@
+export type SortOption = {
+	key: string
+	order: 'desc' | 'asc'
+}
+
+export type GroupOption = {
+	key: string
+	order: 'desc' | 'asc'
+}
+
+export interface DataOptions {
+	page: number
+	itemsPerPage: number
+	sortBy: SortOption[]
+	groupBy?: GroupOption[]
+	multiSort?: boolean
+	mustSort?: boolean
+}
+
+export interface PaginatedTableProps {
+	items: unknown[]
+	headers: DataTableHeaders
+	options: DataOptions
+}
+
+export type DataTableHeaders = {
+	title?: string
+	value?: string
+	key?: string
+}

package/src/components/PeriodField/Accessibilite.mdx

@@ -0,0 +1,14 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as AccessStories from './Accessibilite.stories.ts';
+
+<Meta of={AccessStories} />
+
+Accessibilité
+=============
+<Story of={AccessStories.Legende} />
+<br />
+
+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+<Story of={AccessStories.AccessibilitePanel} />
+<br />

package/src/components/PeriodField/Accessibilite.stories.ts

@@ -0,0 +1,216 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated } from './AccessibiliteItems'
+import { mdiCheckboxMarkedCircle, mdiLink, mdiEye } from '@mdi/js'
+
+const checkIcon = mdiCheckboxMarkedCircle
+const iconEye = mdiEye
+const linkICon = mdiLink
+
+export default {
+	title: 'Composants/Formulaires/PeriodField/Accessibilité',
+}
+
+export const AccessibilitePanel: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon },
+
+			setup() {
+				const icon = checkIcon
+
+				return { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated, icon, linkICon, iconEye }
+			},
+			template: `
+				<div class="accessibiliteItems" style="display:flex; max-width: none !important;">
+				<v-col cols="6">
+					<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
+						<h5>{{ AccessibiliteItemsIndeterminate.length }} critères à prendre en charge par le projet</h5>
+						<div style="display: flex; align-items: center;">
+							<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
+								   rounded>Tanaguru
+							</v-btn>
+						</div>
+					</div>
+
+					<v-expansion-panels value="opened" multiple>
+						<v-expansion-panel v-for="(item, index) in AccessibiliteItemsIndeterminate" :key="index" style="background-color: rgba(42, 96, 158, 0.1); margin-bottom: 10px;">
+							<v-expansion-panel-title>
+								<VIcon :icon="iconEye" style="margin-right: 5px; color:#5778b7;"/>
+								{{ item.title }}
+							</v-expansion-panel-title>
+							<v-expansion-panel-text>
+								<v-expansion-panels>
+								
+								<v-expansion-panel v-for="(i, index) in item.items2" :key="i"  style="margin-bottom: 10px;">
+										<v-expansion-panel-title
+											style="font-weight: bold; font-size: 13px; line-height: 16px;">
+											{{ i.subtitle}}
+										</v-expansion-panel-title>
+										<v-expansion-panel-text>
+											<div>
+												<p style="font-size: 13px;line-height: 16px;">
+													{{ i.precision }}
+												</p>
+												<div v-for="(value, index) in i.solution"
+													 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+													<p style="font-weight: bold;">Méthodologie du test : <a
+														href="{{i.link}}" target="blank">
+														<VIcon :icon="linkICon"/>
+													</a></p>
+													<p>{{ value.info1 }}</p>
+													<p>{{ value.info2 }}</p>
+													<p>{{ value.info3 }}</p>
+												</div>
+												<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+											</div>
+										</v-expansion-panel-text>
+									</v-expansion-panel>
+									<v-expansion-panel>
+										<v-expansion-panel-title
+											style="font-weight: bold; font-size: 13px; line-height: 16px;">
+											{{ item.subtitle }}
+										</v-expansion-panel-title>
+										<v-expansion-panel-text>
+											<div v-for="(value, i) in item.items" :key="i">
+												<p style="font-size: 13px;line-height: 16px;">
+													{{ value.precision }}
+												</p>
+												<div v-for="element in value.solution"
+													 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+													<p style="font-weight: bold;">Méthodologie du test : <a
+														href="value.link" target="blank">
+														<VIcon :icon="linkICon"/>
+													</a></p>
+													<p>{{ element.info1 }}</p>
+													<p>{{ element.info2 }}</p>
+													<p>{{ element.info3 }}</p>
+												</div>
+												<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+											</div>
+										</v-expansion-panel-text>
+									</v-expansion-panel>
+								</v-expansion-panels>
+							</v-expansion-panel-text>
+						</v-expansion-panel>
+					</v-expansion-panels>
+				</v-col>
+				<v-col cols="6">
+					<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
+						<h5>{{ AccessibiliteItemsValidated.length }} critères pris en charge par l'équipe Design System</h5>
+						<div style="display: flex; align-items: center;">
+							<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
+								   rounded>Tanaguru
+							</v-btn>
+						</div>
+					</div>
+					<v-expansion-panels value="opened" multiple>
+						<v-expansion-panel
+							v-for="(item, index) in AccessibiliteItemsValidated"
+							:key="index" style="background-color: rgba(53,135,0,0.1); margin-bottom: 10px;">
+							<v-expansion-panel-title>
+								<VIcon color="green" :icon="icon" style="margin-right: 5px;"/>
+								{{ item.title }}
+							</v-expansion-panel-title>
+							<v-expansion-panel-text>
+								<v-expansion-panels>
+								
+								<v-expansion-panel v-for="(i, index) in item.items2" :key="i"  style="margin-bottom: 10px;">
+										<v-expansion-panel-title
+											style="font-weight: bold; font-size: 13px; line-height: 16px;">
+											{{ i.subtitle}}
+										</v-expansion-panel-title>
+										<v-expansion-panel-text>
+											<div>
+												<p style="font-size: 13px;line-height: 16px;">
+													{{ i.precision }}
+												</p>
+												<div v-for="(value, index) in i.solution"
+													 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+													<p style="font-weight: bold;">Méthodologie du test : <a
+														href="{{i.link}}" target="blank">
+														<VIcon :icon="linkICon"/>
+													</a></p>
+													<p>{{ value.info1 }}</p>
+													<p>{{ value.info2 }}</p>
+													<p>{{ value.info3 }}</p>
+												</div>
+												<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+											</div>
+										</v-expansion-panel-text>
+									</v-expansion-panel>
+									
+									<v-expansion-panel>
+										<v-expansion-panel-title
+											style="font-weight: bold; font-size: 13px; line-height: 16px;">
+											{{ item.subtitle }}
+										</v-expansion-panel-title>
+										<v-expansion-panel-text>
+											<div v-for="(value, i) in item.items" :key="i">
+												<p style="font-size: 13px;line-height: 16px;">
+													{{ value.precision }}
+												</p>
+												<div v-for="element in value.solution"
+													 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+													<p style="font-weight: bold;">Méthodologie du test : <a
+														href="value.link" target="blank">
+														<VIcon :icon="linkICon"/>
+													</a></p>
+													<p>{{ element.info1 }}</p>
+													<p>{{ element.info2 }}</p>
+													<p>{{ element.info3 }}</p>
+												</div>
+												<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+											</div>
+										</v-expansion-panel-text>
+									</v-expansion-panel>
+								</v-expansion-panels>
+							</v-expansion-panel-text>
+						</v-expansion-panel>
+					</v-expansion-panels>
+				</v-col>
+			</div>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const Legende: StoryObj = {
+	args: {
+		icon: checkIcon,
+	},
+	render: (args) => {
+		return {
+			components: { VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+			  <p style="color: grey;font-size: 11px; margin-bottom: 12px;">Date de conception: 20/11/2024</p>
+			  <div>
+				<p>Le tableau ci-dessous liste nos recommandations suivant les <a target="blank" style="color:#0C41BD;" href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#contenu">catégories du RGAA</a>.</p>
+				<p style="margin-bottom: 12px;font-weight:bold;">Pour rappel le composant seul ne garantie pas
+				  l'accessibilité du site.</p>
+				<div style="font-size: 14px">
+				  <p>Nous avons deux façons de relever les problèmes d'accessibilité des composants :</p>
+				  <div>
+					<v-btn variant="tonal" color="grey" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+					  Audit
+					</v-btn>
+					Problèmes relevés par le projet
+				  </div>
+				  <div>
+					<v-btn variant="tonal" color="red" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+					  Tanaguru
+					</v-btn>
+					Problèmes relevés par Tanaguru
+				  </div>
+				</div>
+			  </div>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}