@cnamts/synapse 1.0.15 → 1.0.17

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

@@ -1,446 +1,95 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`AmeliproTable > render correctly 1`] = `
+exports[`AmeliproTable > Snapshots > renders the component with all properties filled in 1`] = `
 <div
   class="amelipro-table"
-  id="amelipro-table-id-container"
+  id="modified-amelipro-table-id-container"
 >
+  <!-- v-if -->
   <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 lignes 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
-          mb-0
-          ml-2
-          pt-0
-        "
-        id="amelipro-table-id-pagination-select-container"
-        style="
-          margin-bottom: 12px;
-          max-width: 170px;
-        "
-      >
-        <div class="
-          amelipro-select__wrapper
-          d-flex
-          flex-column
-          w-100
-        ">
-          <div class="
-            align-baseline
-            d-inline-flex
-            mb-1
-          ">
-            <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
-            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
-          ">
-            <!---->
-            <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="
-                        bg-ap-blue-darken-1
-                        v-progress-linear__background
-                      "
-                      style="opacity: NaN;"
-                    ></div>
-                    <div
-                      class="
-                        bg-ap-blue-darken-1
-                        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="
-                          bg-ap-blue-darken-1
-                          long
-                          v-progress-linear__indeterminate
-                        "></div>
-                        <div class="
-                          bg-ap-blue-darken-1
-                          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-controls="menu-v-0"
-                      aria-expanded="false"
-                      aria-label="Open"
-                      aria-required="false"
-                      id="amelipro-table-id-pagination-select"
-                      inputmode="none"
-                      role="combobox"
-                      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
-    id="amelipro-table-id-desktop"
+    class="amelipro-table__wrapper--desktop"
+    id="modified-amelipro-table-id-desktop"
     style="overflow-x: auto;"
   >
-    <div
-      class="amelipro-table__wrapper--desktop"
-      style="
-        max-width: 100%;
-        width: 100%;
-      "
-    >
+    <div style="
+      max-width: 80%;
+      width: 90%;
+      min-width: 60%;
+    ">
       <table
-        aria-label="Titre du tableau"
-        class="amelipro-table__table--desktop"
-        id="amelipro-table-id-table"
+        aria-label="Modified Titre du tableau"
+        class="
+          amelipro-table__table--desktop
+          vertical-border
+        "
+        id="modified-amelipro-table-id-table"
       >
         <thead>
-          <tr id="amelipro-table-id-table-header">
+          <tr id="modified-amelipro-table-id-table-header">
             <th
               class="
                 bg-ap-grey-lighten-4
+                custom-header-class
                 font-weight-semibold
               "
-              id="amelipro-table-id-table-header-cell-0"
+              id="modified-amelipro-table-id-table-header-cell-0"
               scope="col"
               style="
-                min-width: 20%;
-                width: 25%;
-                max-width: 25%;
-                text-align: left;
+                min-width: 10%;
+                width: 30%;
+                max-width: 30%;
+                text-align: right;
               "
             >
-              <p class="
-                d-flex
-                mb-0
-              ">
-                Nom
-                <button
+              <p
+                aria-describedby="modified-description-id"
+                class="
+                  d-flex
+                  mb-0
+                "
+              >
+                Modified Nom
+                <amelipro-icon-btn-stub
+                  badge="false"
+                  bordered="false"
+                  btnlabel="modified tri asc"
+                  btntitle="modified tri asc"
                   class="
-                    btn--icon
-                    elevation-0
                     ml-2
-                    rounded-0
                     sort-btn
-                    v-btn
-                    v-btn--density-default
-                    v-btn--elevated
-                    v-btn--icon
-                    v-btn--size-default
-                    v-btn--variant-elevated
-                    v-theme--light
-                  "
-                  id="amelipro-table-id-table-header-cell-0-asc-sort-btn"
-                  plain=""
-                  style="
-                    height: auto;
-                    width: auto;
-                  "
-                  title="tri asc"
-                  type="button"
-                >
-                  <span class="v-btn__overlay"></span>
-                  <span class="v-btn__underlay"></span>
-                  <!---->
-                  <span
-                    class="v-btn__content"
-                    data-no-activator=""
-                  >
-                    <span
-                      class="
-                        amelipro-btn__label
-                        d-sr-only
-                      "
-                      id="amelipro-table-id-table-header-cell-0-asc-sort-btn-btn-label"
-                    >
-                      tri asc
-                    </span>
-                    <span
-                      class="
-                        amelipro-icon
-                        icon-custom
-                      "
-                      id="amelipro-table-id-table-header-cell-0-asc-sort-btn-icon"
-                    >
-                      <span
-                        aria-hidden="true"
-                        class="
-                          amelipro-custom-icon
-                          custom-color
-                        "
-                        focusable="false"
-                        role="img"
-                        style="
-                          color: #1A1B1B;
-                          height: 9px;
-                          width: 9px;
-                        "
-                      >
-                        <span>
-                          <svg
-                            aria-hidden="true"
-                            style="enable-background:new 0 0 42 42;"
-                            version="1.1"
-                            viewBox="0 0 42 42"
-                            x="0px"
-                            xml:space="preserve"
-                            xmlns="http://www.w3.org/2000/svg"
-                            xmlns:xlink="http://www.w3.org/1999/xlink"
-                            y="0px"
-                          >
-                            <polygon
-                              class="shape-color"
-                              points="21,2.8 0,39.2 42,39.2 "
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </span>
-                  </span>
-                  <!---->
-                  <!---->
-                </button>
-                <button
-                  class="
-                    btn--icon
-                    elevation-0
-                    rounded-0
-                    sort-btn
-                    v-btn
-                    v-btn--density-default
-                    v-btn--disabled
-                    v-btn--icon
-                    v-btn--size-default
-                    v-btn--variant-elevated
-                    v-theme--light
-                  "
-                  disabled=""
-                  id="amelipro-table-id-table-header-cell-0-desc-sort-btn"
-                  plain=""
-                  style="
-                    height: auto;
-                    width: auto;
                   "
-                  title="tri desc"
-                  type="button"
-                >
-                  <span class="v-btn__overlay"></span>
-                  <span class="v-btn__underlay"></span>
-                  <!---->
-                  <span
-                    class="v-btn__content"
-                    data-no-activator=""
-                  >
-                    <span
-                      class="
-                        amelipro-btn__label
-                        d-sr-only
-                      "
-                      id="amelipro-table-id-table-header-cell-0-desc-sort-btn-btn-label"
-                    >
-                      tri desc
-                    </span>
-                    <span
-                      class="
-                        amelipro-icon
-                        icon-custom
-                      "
-                      id="amelipro-table-id-table-header-cell-0-desc-sort-btn-icon"
-                    >
-                      <span
-                        aria-hidden="true"
-                        class="
-                          amelipro-custom-icon
-                          custom-color
-                        "
-                        focusable="false"
-                        role="img"
-                        style="
-                          color: #DDDEDE;
-                          height: 9px;
-                          width: 9px;
-                        "
-                      >
-                        <span>
-                          <svg
-                            aria-hidden="true"
-                            style="enable-background:new 0 0 42 42;"
-                            version="1.1"
-                            viewBox="0 0 42 42"
-                            x="0px"
-                            xml:space="preserve"
-                            xmlns="http://www.w3.org/2000/svg"
-                            xmlns:xlink="http://www.w3.org/1999/xlink"
-                            y="0px"
-                          >
-                            <polygon
-                              class="shape-color"
-                              points="21,39.2 42,2.8 0,2.8 "
-                            />
-                          </svg>
-                        </span>
-                      </span>
-                    </span>
-                  </span>
-                  <!---->
-                  <!---->
-                </button>
+                  disabled="true"
+                  icon="triangleUp"
+                  iconbgcolor="transparent"
+                  iconcolor="ap-grey-lighten-2"
+                  iconhoverbgcolor="transparent"
+                  iconhovercolor="ap-grey-lighten-2"
+                  large="false"
+                  medium="false"
+                  size="9px"
+                  small="false"
+                  uniqueid="modified-amelipro-table-id-table-header-cell-0-asc-sort-btn"
+                  xlarge="false"
+                ></amelipro-icon-btn-stub>
+                <amelipro-icon-btn-stub
+                  badge="false"
+                  bordered="false"
+                  btnlabel="modified tri desc"
+                  btntitle="modified tri desc"
+                  class="sort-btn"
+                  disabled="false"
+                  icon="triangleDown"
+                  iconbgcolor="transparent"
+                  iconcolor="ap-grey-darken-1"
+                  iconhoverbgcolor="transparent"
+                  iconhovercolor="ap-grey-darken-1"
+                  large="false"
+                  medium="false"
+                  size="9px"
+                  small="false"
+                  uniqueid="modified-amelipro-table-id-table-header-cell-0-desc-sort-btn"
+                  xlarge="false"
+                ></amelipro-icon-btn-stub>
               </p>
             </th>
             <th
@@ -448,17 +97,17 @@ exports[`AmeliproTable > render correctly 1`] = `
                 bg-ap-grey-lighten-4
                 font-weight-semibold
               "
-              id="amelipro-table-id-table-header-cell-1"
+              id="modified-amelipro-table-id-table-header-cell-1"
               scope="col"
               style="
-                min-width: 20%;
-                width: 25%;
-                max-width: 25%;
-                text-align: left;
+                min-width: 10%;
+                width: 30%;
+                max-width: 30%;
+                text-align: right;
               "
             >
               <p class="mb-0">
-                Prénom
+                Modified Prénom
                 <!-- v-if -->
                 <!-- v-if -->
               </p>
@@ -468,17 +117,17 @@ exports[`AmeliproTable > render correctly 1`] = `
                 bg-ap-grey-lighten-4
                 font-weight-semibold
               "
-              id="amelipro-table-id-table-header-cell-2"
+              id="modified-amelipro-table-id-table-header-cell-2"
               scope="col"
               style="
-                min-width: 20%;
-                width: 25%;
-                max-width: 25%;
-                text-align: left;
+                min-width: 10%;
+                width: 30%;
+                max-width: 30%;
+                text-align: right;
               "
             >
               <p class="mb-0">
-                E-mail
+                Modified E-mail
                 <!-- v-if -->
                 <!-- v-if -->
               </p>
@@ -486,119 +135,61 @@ exports[`AmeliproTable > render correctly 1`] = `
           </tr>
         </thead>
         <tbody>
-          <tr id="amelipro-table-id-table-row-0">
+          <tr id="modified-amelipro-table-id-table-row-0">
             <td
-              class=""
-              id="amelipro-table-id-table-row-0-cell-0"
-              style="text-align: left;"
+              class="custom-cells-class"
+              id="modified-amelipro-table-id-table-row-0-cell-0"
+              style="text-align: right;"
             >
               <p class="mb-0">
-                Bernard
+                Modified Bernard
               </p>
             </td>
             <td
               class=""
-              id="amelipro-table-id-table-row-0-cell-1"
-              style="text-align: left;"
+              id="modified-amelipro-table-id-table-row-0-cell-1"
+              style="text-align: right;"
             >
               <p class="mb-0">
-                Jean
+                Modified Jean
               </p>
             </td>
             <td
               class=""
-              id="amelipro-table-id-table-row-0-cell-2"
-              style="text-align: left;"
+              id="modified-amelipro-table-id-table-row-0-cell-2"
+              style="text-align: right;"
             >
               <p class="mb-0">
-                jean.bernard@gmail.com
+                modified.jean.bernard@gmail.com
               </p>
             </td>
           </tr>
-          <tr id="amelipro-table-id-table-row-1">
+          <tr id="modified-amelipro-table-id-table-row-1">
             <td
-              class=""
-              id="amelipro-table-id-table-row-1-cell-0"
-              style="text-align: left;"
+              class="custom-cells-class"
+              id="modified-amelipro-table-id-table-row-1-cell-0"
+              style="text-align: right;"
             >
               <p class="mb-0">
-                Pierre
+                Modified Pierre
               </p>
             </td>
             <td
               class=""
-              id="amelipro-table-id-table-row-1-cell-1"
-              style="text-align: left;"
+              id="modified-amelipro-table-id-table-row-1-cell-1"
+              style="text-align: right;"
             >
               <p class="mb-0">
-                Simon
+                Modified Simon
               </p>
             </td>
             <td
               class=""
-              id="amelipro-table-id-table-row-1-cell-2"
-              style="text-align: left;"
+              id="modified-amelipro-table-id-table-row-1-cell-2"
+              style="text-align: right;"
             >
               <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
+                modified.simon.pierre@gmail.com
               </p>
             </td>
           </tr>
@@ -610,3 +201,77 @@ exports[`AmeliproTable > render correctly 1`] = `
   <!-- v-if -->
 </div>
 `;
+
+exports[`AmeliproTable > Snapshots > renders the component with only required properties filled in 1`] = `
+<div
+  class="amelipro-table"
+  id="required-amelipro-table-id-container"
+>
+  <div
+    class="
+      align-end
+      amelipro-table__infos
+      d-flex
+      justify-space-between
+      mb-4
+    "
+    id="required-amelipro-table-id-info-wrapper"
+  >
+    <p
+      class="
+        d-inline-block
+        font-weight-semibold
+        mb-0
+        total-counter
+      "
+      id="required-amelipro-table-id-total-counter"
+    >
+      <span class="d-sr-only">
+        Nombre de lignes dans le tableau ci-après :
+      </span>
+      0 item(s)
+    </p>
+    <div
+      class="
+        align-center
+        amelipro-table__selects
+        d-inline-flex
+      "
+      id="required-amelipro-table-id-select-wrapper"
+    >
+      <!-- v-if -->
+      <amelipro-select-stub
+        classes="ml-2 mb-0 pt-0 amelipro-table__pagination-select"
+        global-max-width="170px"
+        modelvalue="10"
+        uniqueid="required-amelipro-table-id-pagination-select"
+      >
+        <!---->
+      </amelipro-select-stub>
+    </div>
+  </div>
+  <div
+    class="amelipro-table__wrapper--desktop"
+    id="required-amelipro-table-id-desktop"
+    style="overflow-x: auto;"
+  >
+    <div style="
+      max-width: 100%;
+      width: 100%;
+    ">
+      <table
+        aria-label="Required Titre du tableau"
+        class="amelipro-table__table--desktop"
+        id="required-amelipro-table-id-table"
+      >
+        <thead>
+          <tr id="required-amelipro-table-id-table-header"></tr>
+        </thead>
+        <tbody></tbody>
+      </table>
+    </div>
+  </div>
+  <!-- v-if -->
+  <!-- v-if -->
+</div>
+`;