qc-trousse-sdg 1.4.6 → 1.4.8

package/public/index.html

@@ -848,15 +848,16 @@
 </p>
 
 <qc-doc-exemple id="alert-warning"
-                caption="Exemple d’alerte jaune">
+                caption="Exemple d’alerte jaune masquable. Elle reste masquée après rafraîchissement de la page tant que la session courante est active.">
   <qc-alert id="alerte-masquable"
             type="warning"
             maskable="true"
             content="Alerte jaune d’importance élevée"
+            persist-hidden
+            persistence-key="hash-1234"
   >
   </qc-alert>
 </qc-doc-exemple>
-<!--            <qc-code target-id="alert-warning"></qc-code>-->
 
 <h4>Alerte bleue</h4>
 <qc-doc-exemple id="alert-general"
@@ -867,8 +868,6 @@
   </qc-alert>
 </qc-doc-exemple>
 
-<!--            <qc-code target-id="alert-general"></qc-code>-->
-
 <h3>Documentation technique</h3>
 
 <h4>Attributs</h4>
@@ -888,12 +887,6 @@
       <td>"general"</td>
       <td>Type de l’alerte : s'il s'agit d’une alerte bleue ou jaune</td>
     </tr>
-    <tr>
-      <td>maskable</td>
-      <td>"true" ou "false"</td>
-      <td>"true"</td>
-      <td>Afficher le bouton de fermeture de l’alerte</td>
-    </tr>
     <tr>
       <td>content</td>
       <td>Texte</td>
@@ -914,6 +907,25 @@
         qc-container-fluid)
       </td>
     </tr>
+      <tr>
+          <td>maskable</td>
+          <td>"true" ou "false"</td>
+          <td>"true"</td>
+          <td>Afficher le bouton de fermeture de l’alerte</td>
+      </tr>
+      <tr>
+          <td>persist-hidden</td>
+          <td>na</td>
+          <td></td>
+          <td>Masque l'alerte de façon persistente une fois qu'elle est masquée par l'internaute, c‑à‑d. qu'elle reste masquée lorsque l'utilisateur rafraîchit la page, pendant tout le temps de sa session.</td>
+      </tr>
+    <tr>
+      <td>persistence-key</td>
+      <td>Chaîne de caractère</td>
+      <td>Id de l'élément, valeur nulle sinon</td>
+      <td>Clé pour le stockage de session (<code>Window.sessionStorage</code>). Si non défini, l'id de l'élément sera utilisé. Si celui-ci non plus n'est pas défini, la persistence du masquage n'aura pas lieu.</td>
+    </tr>
+
   </table>
 </div>
 
@@ -926,7 +938,7 @@
   document.addEventListener(
           'qc.alert.hide',
           (e) => {
-            console.log('Fermeture de l\'alerte id=\'' + e.target.id + '\'');
+            console.log(`Fermeture de l'alerte id='${e.target.id}'`);
           }
   )
 </script>
@@ -1940,10 +1952,10 @@
 <qc-doc-exemple caption="Exemples 1 - différents champs de texte. Soumettre le formulaire pour voir les messages d'erreur.">
   <form id="formulaire-champs-textes">
     <qc-textfield
-            label="Nom complet"
             size="md"
             required
     >
+      <label>Nom complet</label>
       <input type="text"
              name="code-postal"
              placeholder="ex : Jean Tremblay"
@@ -2179,6 +2191,16 @@
             left-icon
             clear-aria-label="Effacer le texte"
     ></qc-search-input>
+
+    <br>
+
+    <qc-search-input
+            label="Nom de l'article"
+            size="md"
+            placeholder="Rechercher un article"
+            clear-aria-label="Effacer le texte"
+            left-icon
+    ></qc-search-input>
 </qc-doc-exemple>
 
 <h3>Documentation technique</h3>
@@ -2226,10 +2248,16 @@
             <td>Désactive le champ.</td>
         </tr>
         <tr>
-            <td>name</td>
+            <td>label</td>
             <td>Texte</td>
             <td>""</td>
-            <td>Nom du champ utilisé lors de la soumission du formulaire.</td>
+            <td>Texte du libellé du champ. Remplace automatiquement l'aria-label lorsqu'il est défini.</td>
+        </tr>
+        <tr>
+            <td>size</td>
+            <td>"xs", "sm", "md", "lg", "xl"</td>
+            <td>""</td>
+            <td>Largeur du champ</td>
         </tr>
         </tbody>
     </table>
@@ -2425,6 +2453,20 @@
         </select>
     </qc-select>
 
+    <script>
+        const selectElement = document.getElementById("select-single-choice");
+
+        selectElement.addEventListener("change", (event) => {
+            console.log("Option sélectionnée :", event.target.value);
+        });
+        selectElement.addEventListener("qc.select.show", () => {
+            console.log("Options affichées");
+        });
+        selectElement.addEventListener("qc.select.hide", () => {
+            console.log("Options cachées");
+        });
+    </script>
+
     <qc-select id="qc-select-single-choice-search" enable-search>
         <label for="select-single-choice-search">Choix unique avec recherche</label>
         <select id="select-single-choice-search">
@@ -2600,11 +2642,11 @@
 <div class="table-overflow">
     <table class="qc-table qc-striped component-attributes-description">
         <thead>
-        <tr>
-            <th>Nom</th>
-            <th>Type</th>
-            <th>Description</th>
-        </tr>
+            <tr>
+                <th>Nom</th>
+                <th>Type</th>
+                <th>Description</th>
+            </tr>
         </thead>
         <tbody>
             <tr>
@@ -2612,10 +2654,22 @@
                 <td>Tableau de chaîne de caractères</td>
                 <td>Valeur(s) sélectionnée(s) dans la liste déroulante</td>
             </tr>
+            <tr>
+                <td>expanded</td>
+                <td>Booléen</td>
+                <td>Indique que la liste déroulante est ouverte</td>
+            </tr>
         </tbody>
     </table>
 </div>
 
+<h5>Événements JS</h5>
+<ul>
+    <li>Un événement JS <code class="qc-bg-color-grey-pale">change</code> est émis lors du changement de valeur sélectionnée dans la liste déroulante.</li>
+    <li>Un événement JS <code class="qc-bg-color-grey-pale">qc.select.show</code> est émis lorsqu'une liste déroulante est ouverte.</li>
+    <li>Un événement JS <code class="qc-bg-color-grey-pale">qc.select.hide</code> est émis lorsqu'une liste déroulante est fermée.</li>
+</ul>
+
 <h5>Zone d'ajout de contenu HTML</h5>
 <p>Ce composant ne comporte qu'une seule zone d'ajout de contenu.</p>
 
@@ -3072,7 +3126,7 @@
       <td>Le chemin de l’image en thème clair.</td>
       <td>Le chemin vers l’image dist/img/QUEBEC_couleur.svg de la trousse</td>
       <td>Adresse de l’image du pied de page en thème clair (fond transparent, texte et drapeaux en
-        couleur, voir <a href="#piv-footer-ex-2">l’exemple de pied de page PIV personnalisé</a>).
+        couleur, voir <a href="#piv-footer-ex-2">l’exemple de pied de page du PIV personnalisé</a>).
       </td>
     </tr>
     <tr>
@@ -3080,7 +3134,7 @@
       <td>Le chemin de l’image en thème sombre.</td>
       <td>Le chemin vers l’image dist/img/QUEBEC_blanc.svg de la trousse</td>
       <td>Adresse de l’image du pied de page en thème sombre (fond transparent, texte et drapeaux en
-        blanc, voir <a href="#piv-footer-ex-2">l’exemple de pied de page PIV personnalisé</a>).
+        blanc, voir <a href="#piv-footer-ex-2">l’exemple de pied de page du PIV personnalisé</a>).
       </td>
     </tr>
     <tr>
@@ -3131,7 +3185,7 @@
   </table>
 </div>
 
-<qc-notice type="information">Les images du pied de page PIV doivent respecter
+<qc-notice type="information">Les images du pied de page du PIV doivent respecter
   <qc-external-link><a href="https://www.piv.gouv.qc.ca/fileadmin/documents/guide/section1_general.pdf">les
     normes graphiques du système d’identification visuelle.</a>. Nous vous invitons à privilégier le format
     SVG, qui permet de conserver la lisibilité de l’image en cas de zoom.
@@ -3142,7 +3196,7 @@
 
 <p>Ci-dessous, les zones d’ajout de contenu HTML (balise &lt;slot&gt;) délimitées en pointillé.</p>
 <qc-doc-exemple id="qc-piv-footer-slots"
-                caption="Présentation des zones d’ajout de contenu du pied de page PIV">
+                caption="Présentation des zones d’ajout de contenu du pied de page du PIV">
   <qc-piv-footer>
     <div style="border:2px dashed;padding: var(--qc-spacer-xs);">
       Contenu par défaut