@cnamts/synapse 1.0.4 → 1.0.6

package/src/components/Amelipro/AmeliproTable/__tests__/__snapshots__/AmeliproTable.spec.ts.snap

@@ -0,0 +1,427 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproTable > render correctly 1`] = `
+<div
+  class="amelipro-table"
+  id="amelipro-table-id-container"
+>
+  <div
+    class="
+      align-end
+      amelipro-table__infos
+      d-flex
+      justify-space-between
+      mb-4
+    "
+    id="amelipro-table-id-info-wrapper"
+  >
+    <p
+      class="
+        d-inline-block
+        font-weight-semibold
+        mb-0
+        total-counter
+      "
+      id="amelipro-table-id-total-counter"
+    >
+      <span class="d-sr-only">
+        Nombre de ligne dans le tableau ci-après :
+      </span>
+      4 item(s)
+    </p>
+    <div
+      class="
+        align-center
+        amelipro-table__selects
+        d-inline-flex
+      "
+      id="amelipro-table-id-select-wrapper"
+    >
+      <!-- v-if -->
+      <div
+        class="
+          amelipro-table__pagination-select
+          ml-2
+        "
+        id="amelipro-table-id-pagination-select-container"
+        style="
+          margin-bottom: 0px !important;
+          max-width: 170px;
+          padding-top: 0px !important;
+        "
+      >
+        <div class="
+          amelipro-select__wrapper
+          d-flex
+          flex-column
+          w-100
+        ">
+          <div class="
+            align-start
+            d-inline-flex
+          ">
+            <label
+              class="
+                amelipro-select__label
+                mr-2
+              "
+              for="amelipro-table-id-pagination-select"
+              id="amelipro-table-id-pagination-select-label"
+            >
+              Nb lignes/page :
+              <!-- v-if -->
+            </label>
+          </div>
+          <div
+            class="
+              amelipro-select
+              amelipro-table__pagination-select
+              ml-2
+              pt-0
+              v-input
+              v-input--center-affix
+              v-input--density-compact
+              v-input--dirty
+              v-input--horizontal
+              v-locale--is-ltr
+              v-select
+              v-select--selected
+              v-select--single
+              v-text-field
+              v-theme--light
+            "
+            style="
+              margin-bottom: 0px !important;
+              padding-top: 0px !important;
+            "
+          >
+            <!---->
+            <div class="v-input__control">
+              <div
+                class="
+                  bg-ap-white
+                  v-field
+                  v-field--active
+                  v-field--appended
+                  v-field--center-affix
+                  v-field--dirty
+                  v-field--has-background
+                  v-field--no-label
+                  v-field--variant-outlined
+                  v-locale--is-ltr
+                  v-theme--light
+                "
+                role="combobox"
+              >
+                <div class="v-field__overlay"></div>
+                <div class="v-field__loader">
+                  <div
+                    aria-hidden="true"
+                    aria-valuemax="100"
+                    aria-valuemin="0"
+                    class="
+                      v-locale--is-ltr
+                      v-progress-linear
+                      v-theme--light
+                    "
+                    role="progressbar"
+                    style="
+                      top: 0px;
+                      height: 0px;
+                      --v-progress-linear-height: 2px;
+                    "
+                  >
+                    <!---->
+                    <div
+                      class="v-progress-linear__background"
+                      style="opacity: NaN;"
+                    ></div>
+                    <div
+                      class="v-progress-linear__buffer"
+                      style="
+                        opacity: NaN;
+                        width: 0%;
+                      "
+                    ></div>
+                    <transition-stub
+                      appear="false"
+                      css="true"
+                      name="fade-transition"
+                      persisted="false"
+                    >
+                      <div class="v-progress-linear__indeterminate">
+                        <div class="
+                          long
+                          v-progress-linear__indeterminate
+                        "></div>
+                        <div class="
+                          short
+                          v-progress-linear__indeterminate
+                        "></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
+                      aria-label="Open"
+                      aria-required="false"
+                      id="amelipro-table-id-pagination-select"
+                      inputmode="none"
+                      size="1"
+                      title="Open"
+                      type="text"
+                      value="10"
+                    />
+                  </div>
+                  <!---->
+                </div>
+                <!---->
+                <div class="v-field__append-inner">
+                  <!---->
+                  <i
+                    aria-hidden="true"
+                    class="
+                      mdi
+                      mdi-menu-down
+                      notranslate
+                      v-icon
+                      v-icon--size-default
+                      v-select__menu-icon
+                      v-theme--light
+                    "
+                  ></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>
+        <!-- v-if -->
+      </div>
+    </div>
+  </div>
+  <div
+    class="amelipro-table__wrapper--desktop"
+    id="amelipro-table-id-desktop"
+    style="
+      overflow-x: auto;
+      max-width: 100%;
+      width: 100%;
+    "
+  >
+    <table
+      aria-label="Titre du tableau"
+      class="amelipro-table__table--desktop"
+      id="amelipro-table-id-table"
+    >
+      <thead>
+        <tr id="amelipro-table-id-table-header">
+          <th
+            class="
+              bg-ap-grey-lighten-4
+              font-weight-semibold
+            "
+            id="amelipro-table-id-table-header-cell-0"
+            scope="col"
+            style="
+              min-width: 20%;
+              width: 25%;
+              max-width: 25%;
+              text-align: left;
+            "
+          >
+            <p class="mb-0">
+              Nom
+            </p>
+          </th>
+          <th
+            class="
+              bg-ap-grey-lighten-4
+              font-weight-semibold
+            "
+            id="amelipro-table-id-table-header-cell-1"
+            scope="col"
+            style="
+              min-width: 20%;
+              width: 25%;
+              max-width: 25%;
+              text-align: left;
+            "
+          >
+            <p class="mb-0">
+              Prénom
+            </p>
+          </th>
+          <th
+            class="
+              bg-ap-grey-lighten-4
+              font-weight-semibold
+            "
+            id="amelipro-table-id-table-header-cell-2"
+            scope="col"
+            style="
+              min-width: 20%;
+              width: 25%;
+              max-width: 25%;
+              text-align: left;
+            "
+          >
+            <p class="mb-0">
+              E-mail
+            </p>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr id="amelipro-table-id-table-row-0">
+          <td
+            class=""
+            id="amelipro-table-id-table-row-0-cell-0"
+            style="text-align: left;"
+          >
+            <p class="mb-0">
+              Bernard
+            </p>
+          </td>
+          <td
+            class=""
+            id="amelipro-table-id-table-row-0-cell-1"
+            style="text-align: left;"
+          >
+            <p class="mb-0">
+              Jean
+            </p>
+          </td>
+          <td
+            class=""
+            id="amelipro-table-id-table-row-0-cell-2"
+            style="text-align: left;"
+          >
+            <p class="mb-0">
+              jean.bernard@gmail.com
+            </p>
+          </td>
+        </tr>
+        <tr id="amelipro-table-id-table-row-1">
+          <td
+            class=""
+            id="amelipro-table-id-table-row-1-cell-0"
+            style="text-align: left;"
+          >
+            <p class="mb-0">
+              Pierre
+            </p>
+          </td>
+          <td
+            class=""
+            id="amelipro-table-id-table-row-1-cell-1"
+            style="text-align: left;"
+          >
+            <p class="mb-0">
+              Simon
+            </p>
+          </td>
+          <td
+            class=""
+            id="amelipro-table-id-table-row-1-cell-2"
+            style="text-align: left;"
+          >
+            <p class="mb-0">
+              simon.pierre@gmail.com
+            </p>
+          </td>
+        </tr>
+        <tr id="amelipro-table-id-table-row-2">
+          <td
+            class=""
+            id="amelipro-table-id-table-row-2-cell-0"
+            style="text-align: left;"
+          >
+            <p class="mb-0">
+              Souris
+            </p>
+          </td>
+          <td
+            class=""
+            id="amelipro-table-id-table-row-2-cell-1"
+            style="text-align: left;"
+          >
+            <p class="mb-0">
+              Michel
+            </p>
+          </td>
+          <td
+            class=""
+            id="amelipro-table-id-table-row-2-cell-2"
+            style="text-align: left;"
+          >
+            <p class="mb-0">
+              michel.souris@gmail.com
+            </p>
+          </td>
+        </tr>
+        <tr id="amelipro-table-id-table-row-3">
+          <td
+            class=""
+            id="amelipro-table-id-table-row-3-cell-0"
+            style="text-align: left;"
+          >
+            <p class="mb-0">
+              Jabot
+            </p>
+          </td>
+          <td
+            class=""
+            id="amelipro-table-id-table-row-3-cell-1"
+            style="text-align: left;"
+          >
+            <p class="mb-0">
+              Amandine
+            </p>
+          </td>
+          <td
+            class=""
+            id="amelipro-table-id-table-row-3-cell-2"
+            style="text-align: left;"
+          >
+            <p class="mb-0">
+              amandine.jabot@gmail.com
+            </p>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <!-- v-if -->
+  <!-- v-if -->
+</div>
+`;

package/src/components/Amelipro/AmeliproTable/types.d.ts

@@ -0,0 +1,34 @@
+export interface AmeliproTableCell {
+	columnClasses: string | undefined
+	columnAlign: string
+	value: string | number | undefined
+}
+
+export interface AmeliproTableHeader {
+	name: string
+	title: string
+	align: string
+	headerClasses?: string
+	cellsClasses?: string
+	minWidth: string
+	width: string
+	maxWidth: string
+	descriptionId?: string
+}
+
+export interface AmeliproCurrentPage {
+	activePage: number
+}
+
+export interface AmeliproPaginationSelect {
+	inputValue: number
+}
+
+export interface AmeliproSortSelect {
+	inputValue: string | number
+}
+
+export interface AmeliproTableSortBtnEvent {
+	name: string
+	sort: 'ASC' | 'DESC'
+}

package/src/components/Amelipro/ServiceMenu/ServiceMenu.vue

@@ -40,6 +40,17 @@
 	const modalId = `${props.uniqueId}-service-menu-title`
 	const { mdAndUp } = useDisplay()
 
+	// Computed property to safely handle the attach target
+	const attachTarget = computed(() => {
+		const targetId = `#${props.uniqueId}-service-menu`
+		// Check if the element exists in the DOM
+		if (typeof document !== 'undefined' && document.querySelector(targetId)) {
+			return targetId
+		}
+		// Fallback to body or undefined to let Vuetify handle it
+		return undefined
+	})
+
 	const emit = defineEmits(['update:model-value', 'change'])
 	const emitChangeEvent = (): void => {
 		visible.value = false
@@ -103,7 +114,7 @@
 		>
 			<VMenu
 				v-model="visible"
-				:attach="`#${uniqueId}-service-menu`"
+				:attach="attachTarget"
 				:close-on-content-click="false"
 				eager
 				max-height="520px"