qc-trousse-sdg 1.4.5 → 1.4.6

package/rollup.config.js

@@ -18,12 +18,11 @@ import buildSvelteTests from "./plugins/buildSvelteTests";
 
 const
     dev_process = (process.env.npm_lifecycle_event == 'dev'),
-    version_process = (process.env.npm_lifecycle_event == 'version'),
     build_process = (process.env.npm_lifecycle_event == 'build')
 ;
 const verbose = false;
 const  includePaths = [
-        dev_process && 'src/doc/scss',
+        !build_process && 'src/doc/scss',
         'src/sdg/scss',
         "src",
 ].filter(Boolean);
@@ -66,7 +65,7 @@ const scssOptions = {
             cssReplace({
                 data: {
                     'pkg-version': pkg.version,
-                    'dev-env': dev_process ? 'true' : 'false',
+                    'dev-env': !build_process ? 'true' : 'false',
                 }
             })
         ])
@@ -95,7 +94,7 @@ let
         compilerOptions: {
             // enable run-time checks
             customElement: true,
-            dev: dev_process,
+            dev: !build_process,
             cssHash: ({ hash, name, filename, css }) => {
                 // replacement of default `svelte-${hash(css)}`
                 return `qc-hash-${hash(css)}`;

package/src/doc/components/Code.svelte

@@ -14,6 +14,8 @@
   import pretty from "pretty";
   import jsBeautify from "js-beautify";
 
+  const copyButtonTimeout = 2000;
+
   let {
       targetId = '',
       rawCode = '',
@@ -23,11 +25,14 @@
 
   let hlCode = $state();
   let prettyCode = $state();
+  let copied = $state(false);
 
   function copy() {
       navigator.clipboard.writeText(prettyCode);
-      this.classList.add('copied')
-      setTimeout(() => {this.classList.remove('copied')}, 500)
+      copied = true;
+      setTimeout(() => {
+          copied = false;
+      }, copyButtonTimeout);
   }
 
   function updateHLCode(rawCode, targetId) {
@@ -53,10 +58,13 @@
 
 <pre
     ><code class="hljs"
-        ><button class="qc-button qc-compact qc-primary"
+        ><button class={`qc-button qc-compact ${copied? "qc-secondary" : "qc-primary"}`}
                  onclick={copy}>
-            <span class="copy">copier</span>
-            <span class="copied">copié !</span>
+            {#if !copied}
+                <span class="copy">Copier</span>
+            {:else}
+                <span class="copied">Copié&nbsp!</span>
+            {/if}
         </button
         >{@html hlCode}</code
 ></pre>

package/src/doc/components/Exemple.svelte

@@ -59,16 +59,3 @@
         <Code rawCode={exempleCode}></Code>
     {/if}
 </div>
-<style lang="scss">
-    figure {
-      //display: block;
-      max-width: token-value(max-content-width);
-      width: 100%;
-      @include qc-shading(0);
-      margin-bottom: token-value(spacer content-block mb);
-      .exemple {
-        padding: token-value(spacer sm) token-value(spacer sm) 0 token-value(spacer sm);
-        margin-bottom: token-value(spacer sm);
-      }
-    }
-</style>

package/src/doc/scss/components/_code.scss

@@ -10,34 +10,17 @@ pre {
   padding: 0;
   white-space: pre-wrap;
   overflow: auto;
+  position: relative;
 
   code, .qc-code {
     font-family: token-value(font, family, code);
 
     button {
       float: right;
-      //position: absolute;
-      right: token-value(spacer xs);
-      top: token-value(spacer xs);
-      padding: token-value(spacer xs) token-value(spacer sm) ;
-      color : white;
-      background-color: token-value(color blue piv);
-      border: 1px solid;
+      position: absolute;
+      right: token-value(spacer sm);
+      top: token-value(spacer sm);
       white-space: nowrap;
-      transition: none!important;
-      .copy {display: inline;}
-      .copied {display: none;}
-      &.copied {
-        background-color: transparent!important;
-        border-color: transparent!important;;
-        box-shadow: none!important;
-        color: token-value(color blue piv)!important;
-        .copy {display: none;}
-        .copied {
-          display: inline;
-          //animation: fadeout .5s;
-        }
-      }
     }
   }
 }

package/src/doc/scss/components/_exemple.scss

@@ -0,0 +1,21 @@
+@use "qc-sdg-lib" as *;
+
+.exemple-area > figure {
+  display: block;
+  max-width: token-value(max-content-width);
+  width: 100%;
+  margin-bottom: token-value(spacer content-block mb);
+  padding-bottom: 1px;
+  .exemple {
+    padding: token-value(spacer sm) token-value(spacer sm) token-value(spacer sm) token-value(spacer sm);
+    @include qc-shading(0);
+
+    & > *:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  & > figcaption {
+    display: block;
+  }
+}

package/src/doc/scss/qc-doc-sdg.scss

@@ -1,5 +1,6 @@
 @use "qc-sdg-lib" as *;
 @use "components/code" as *;
+@use "components/exemple" as *;
 @use "tables";
 @use "jQueryUI/jquery-ui.autocomplete";
 

package/src/sdg/bases/links/_links.html

@@ -2,33 +2,33 @@
 <qc-doc-exemple caption="Exemple de différents liens hypertexte selon leurs états.">
     <dl>
         <dt>Lien interne</dt>
-        <dd><a href="javascript:;" class="not-visited">Lien interne</a></dd>
+        <dd><a href="#" class="not-visited">Lien interne</a></dd>
         <dd>
-            <qc-external-link><a href="javascript:;" class="not-visited">Lien externe</a></qc-external-link>
+            <qc-external-link><a href="#" class="not-visited">Lien externe</a></qc-external-link>
         </dd>
 
         <dt>Lien au survol (pseudo-classe :hover)</dt>
-        <dd><a href="javascript:;" class="pseudo-hover">Lien interne</a></dd>
+        <dd><a href="#" class="pseudo-hover">Lien interne</a></dd>
         <dd>
-            <qc-external-link><a href="javascript:;" class="pseudo-hover">Lien externe</a>
+            <qc-external-link><a href="#" class="pseudo-hover">Lien externe</a>
             </qc-external-link>
         </dd>
         <dt>Lien au focus (pseudo-classe :focus)</dt>
-        <dd><a href="javascript:;" class="pseudo-focus">Lien interne</a></dd>
+        <dd><a href="#" class="pseudo-focus">Lien interne</a></dd>
         <dd>
-            <qc-external-link><a href="javascript:;" class="pseudo-focus">Lien externe</a>
+            <qc-external-link><a href="#" class="pseudo-focus">Lien externe</a>
             </qc-external-link>
         </dd>
         <dt>Lien au clic (pseudo-classe :active)</dt>
-        <dd><a href="javascript:;" class="pseudo-active">Lien interne</a></dd>
+        <dd><a href="#" class="pseudo-active">Lien interne</a></dd>
         <dd>
-            <qc-external-link><a href="javascript:;" class="pseudo-active">Lien externe</a>
+            <qc-external-link><a href="#" class="pseudo-active">Lien externe</a>
             </qc-external-link>
         </dd>
         <dt>Lien visité (pseudo-classe :visited)</dt>
-        <dd><a href="javascript:;" class="pseudo-visited">Lien interne</a></dd>
+        <dd><a href="#" class="pseudo-visited">Lien interne</a></dd>
         <dd>
-            <qc-external-link><a href="javascript:;" class="pseudo-visited">Lien externe</a>
+            <qc-external-link><a href="#" class="pseudo-visited">Lien externe</a>
             </qc-external-link>
         </dd>
     </dl>

package/src/sdg/components/Alert/_alert.html

@@ -2,7 +2,7 @@
 <h3>Exemples</h3>
 <h4>Alerte jaune</h4>
 <p>
-  <a href="javascript:;"
+  <a href="#"
      id="show-qc-alert"
      hidden
   >
@@ -26,7 +26,7 @@
                 caption="Exemple d’alerte générale">
   <qc-alert type="general"
             maskable="false">
-    <p>Alerte bleue d’importance modérée <a href="javascript:;">avec un lien textuel</a></p>
+    <p>Alerte bleue d’importance modérée <a href="#">avec un lien textuel</a></p>
   </qc-alert>
 </qc-doc-exemple>
 

package/src/sdg/components/ChoiceGroup/_choiceGroup.html

@@ -277,8 +277,6 @@
   </table>
 </div>
 
-<p>Pour les autres attributs, voir la rubrique de <a href="#selection-button-attributes">boutons de sélection</a>.</p>
-
 <h5>Zone d’ajout de contenu HTML</h5>
 
 <p>Ce composant ne comporte qu'une seule zone d'ajout de contenu par défaut.</p>

package/src/sdg/components/FormfieldRow/_formfieldRow.html

@@ -1,6 +1,11 @@
-<h3 id="champs-alignes">Champs alignés horizontalement (classe <code>qc‑textfield‑row</code>)</h3>
+<h3 id="champs-alignes">Champs alignés horizontalement (classe <code>qc‑formfield‑row</code>)</h3>
 
-<p>Les champs regroupés sur une ligne doivent être placés dans un div avec la classe <code>qc-textfield-row</code> pour correctement afficher les messages d’erreur en cas de soumission invalide.</p>
+<p>
+    Les champs regroupés sur une ligne doivent être placés dans un <code>div</code> avec la classe <code>qc-formfield-row</code>.
+    De cette façon, les messages d'erreur ne provoquent pas de décalage.
+    <br/><br/>
+    Voir le code des champs Téléphone et Poste dans l'exemple ci-dessus.
+</p>
 
 <h4>Exemple</h4>
 <qc-doc-exemple caption="Exemple de champs sur une seule ligne">
@@ -101,8 +106,3 @@
         }
     });
 </script>
-
-<h4>Documentation technique</h4>
-<p>Placer les champs à regrouper sur une seule ligne dans un div avec la classe <code>qc-formfield-row</code></p>
-
-

package/src/sdg/components/Notice/_notice.html

@@ -61,13 +61,13 @@
              title="Des erreurs sont présentes dans le formulaire :">
     <ul>
       <li>
-        <a href="javascript:;">Le champ « Nom de famille » est obligatoire ;</a>
+        <a href="#">Le champ « Nom de famille » est obligatoire ;</a>
       </li>
       <li>
-        <a href="javascript:;">Le champ « Prénom » est obligatoire ;</a>
+        <a href="#">Le champ « Prénom » est obligatoire ;</a>
       </li>
       <li>
-        <a href="javascript:;">Le champ « Numéro de dossier » est obligatoire.</a>
+        <a href="#">Le champ « Numéro de dossier » est obligatoire.</a>
       </li>
     </ul>
   </qc-notice>

package/src/sdg/components/PivHeader/Test/pivHeaderBaselineTest.html

@@ -13,7 +13,7 @@
         <ul>
             <li><a href="#fakeEnglish">English</a>
             </li>
-            <li><a href="javascript:;">Nous joindre</a>
+            <li><a href="#">Nous joindre</a>
             </li>
         </ul>
     </nav>
@@ -30,7 +30,7 @@
         <ul slot="links">
             <li><a href="#fakeEnglish">English</a>
             </li>
-            <li><a href="javascript:;">Nous joindre</a>
+            <li><a href="#">Nous joindre</a>
             </li>
         </ul>
 

package/src/sdg/components/PivHeader/Test/pivHeaderEmbeddedTest.svelte

@@ -13,7 +13,8 @@
         <ul>
             <li><a href="#fakeEnglish">English</a>
             </li>
-            <li><a href="javascript:;">Nous joindre</a>
+            <!-- svelte-ignore a11y_invalid_attribute -->
+            <li><a href="#">Nous joindre</a>
             </li>
         </ul>
     </nav>

package/src/sdg/components/PivHeader/_pivHeader.html

@@ -26,7 +26,7 @@
       <ul>
         <li><a href="#fakeEnglish">English</a>
         </li>
-        <li><a href="javascript:;">Nous joindre</a>
+        <li><a href="#">Nous joindre</a>
         </li>
       </ul>
     </nav>
@@ -47,7 +47,7 @@
       <ul slot="links">
         <li><a href="#fakeEnglish">English</a>
         </li>
-        <li><a href="javascript:;">Nous joindre</a>
+        <li><a href="#">Nous joindre</a>
         </li>
       </ul>
 

package/src/sdg/components/PivHeader/_pivHeader.scss

@@ -142,10 +142,6 @@ qc-piv-header,
     --qc-color-link-visited: white;
     --qc-color-link-active: white;
 
-    font-family: token-value(font family header);
-    text-decoration: none;
-    font-weight: token-value(font weight regular);
-
     &:hover {
       text-decoration: underline;
     }
@@ -155,6 +151,12 @@ qc-piv-header,
       outline-offset: -2px;
     }
   }
+
+  a, span {
+    font-family: token-value(font family header);
+    text-decoration: none;
+    font-weight: token-value(font weight regular);
+  }
 }
 
 .go-to-content {

package/src/sdg/components/TextField/TextFieldWC.svelte

@@ -61,18 +61,20 @@
         if (description) {
             input.before(descriptionElement);
         }
-        if (invalid) {
-            if (textFieldRow) {
-                textFieldRow.appendChild(formErrorElement);
-            }
-            else {
-                input.after(formErrorElement);
-            }
-        }
         if (maxlength) {
             input.after(maxlengthElement);
         }
     })
+
+    $effect(() => {
+        if (!formErrorElement) return;
+        if (textFieldRow) {
+            textFieldRow.appendChild(formErrorElement);
+        }
+        else {
+            input.after(formErrorElement);
+        }
+    })
 </script>
 
 <TextField

package/src/sdg/components/TextField/_textField.html

@@ -182,11 +182,6 @@
   </table>
 </div>
 
-<h4>Champs alignés horizontalement (classe <code>qc-textfield-row</code>)</h4>
-
-<p>Les champs regroupés sur une ligne peuvent être placés dans un div avec la classe <code>qc-textfield-row</code>. De cette façon, les messages d'erreur ne provoquent pas de décalage. <br/>
-    Voir le code des champs Téléphone et Poste dans l'exemple ci-dessus.</p>
-
 <h4>Propriété js</h4>
 <div class="table-overflow">
   <table class="qc-table qc-striped component-attributes-description">

package/src/sdg/components/utils.js

@@ -16,15 +16,14 @@ export class Utils {
         `${this.assetsBasePath}/img/`
             .replace('//','/')
     static cssFileName =
-        document
-            .currentScript
-            .getAttribute('sdg-css-filename')
-        || 'qc-sdg.min.css'
+        getCssFileName(document.currentScript.getAttribute('sdg-css-filename'), document.currentScript.src);
     static cssPath =
-        document
-            .currentScript
-            .getAttribute('sdg-css-path')
-        || this.cssRelativePath + this.cssFileName
+        getCssPath(
+            document.currentScript.getAttribute('sdg-css-path'),
+            document.currentScript.src,
+            this.cssRelativePath,
+            this.cssFileName
+        );
     static sharedTexts =
         { openInNewTab :
             { fr: 'Ce lien s’ouvrira dans un nouvel onglet.'
@@ -33,8 +32,8 @@ export class Utils {
         }
 
     /**
-     * Get current page language based on html lang attribute
-     * @returns {string} language code  (fr/en).
+     * Get current page language based on HTML lang attribute
+     * @returns {string} language code (fr/en).
      */
     static getPageLanguage() {
         return document.getElementsByTagName("html")[0].getAttribute("lang") || "fr";
@@ -56,12 +55,12 @@ export class Utils {
     /**
      * extract and clean prefixed attributes
      * example:
-     *  computeFieldsAttributes("radio" , {"radio-class":"my-radio", "radio-data-foo":"foo", "other":"other value"})
+     *  computeFieldsAttributes("radio", {"radio-class": "my-radio", "radio-data-foo": "foo", "other": "other value"})
      *  return {"class":"my-radio", "data-foo":"foo"}
      *
      </div>
      * @param {(string|string[])} prefix - Une chaîne de caractères ou un tableau de chaînes.
-     * @param restProps - ojbect of attributes
+     * @param restProps - object of attributes
      * @returns {*} - object of attributes
      */
     static computeFieldsAttributes(prefix , restProps) {
@@ -125,8 +124,8 @@ export class Utils {
         word = replaceAccents(word, /[ùûü]/gi, 'u');
         word = replaceAccents(word, /[ïî]/gi, 'i');
         word = replaceAccents(word, /[ôö]/gi, 'i');
-        word = replaceAccents(word, /[œ]/gi, 'oe');
-        word = replaceAccents(word, /[æ]/gi, 'ae');
+        word = replaceAccents(word, /œ/gi, 'oe');
+        word = replaceAccents(word, /æ/gi, 'ae');
 
         // Remplace les caractères spéciaux par des espaces.
         word = word.replaceAll(/[-_—–]/gi, ' ');
@@ -136,3 +135,45 @@ export class Utils {
         return word.toLowerCase();
     }
 }
+
+function getCacheBustingParam(cssPath, currentScriptSrc) {
+    const pattern = /\?.*$/;
+
+    const cssCacheBustingParam = cssPath?.match(pattern);
+    if (cssCacheBustingParam && cssCacheBustingParam.length > 0) {
+        return '';
+    }
+
+    const scriptCacheBustingParam = currentScriptSrc?.match(pattern);
+    if (scriptCacheBustingParam && scriptCacheBustingParam.length > 0) {
+        return scriptCacheBustingParam[0];
+    }
+
+    return '';
+}
+
+function getCssFileName(sdgCssFilename, src) {
+    const cssPattern =/^.*\.css/;
+
+    if (!cssPattern.test(sdgCssFilename)) {
+        return 'qc-sdg.min.css' + getCacheBustingParam(
+            'qc-sdg.min.css', src
+        );
+    } else {
+        return sdgCssFilename + getCacheBustingParam(
+            sdgCssFilename, src
+        );
+    }
+}
+
+function getCssPath(sdgCssPath, src, cssRelativePath, cssFileName) {
+    const cssPattern =/^.*\.css/;
+
+    if (!cssPattern.test(sdgCssPath)) {
+        return cssRelativePath + cssFileName;
+    } else {
+        return sdgCssPath + getCacheBustingParam(
+            sdgCssPath, src
+        );
+    }
+}

package/src/sdg/components/CharCount/_charCount.html

@@ -1,7 +0,0 @@
-<h2>Compteur de caractères</h2>
-<div>
-  <qc-doc-exemple>
-    <textarea id="mon-textarea" rows="5" cols="50"></textarea>
-    <qc-char-count target-id="mon-textarea"></qc-char-count>
-  </qc-doc-exemple>
-</div>

package/src/sdg/components/RadioButton/_radioButton.html

@@ -1,24 +0,0 @@
-<h2 id="radio-button">Boutons radio</h2>
-<p>Les boutons radio sont aussi disponibles au format de <a href="#selection-button">boutons de sélection</a>.</p>
-<h3>Exemples</h3>
-
-
-  <qc-radio-group id="exemple-radio-md"
-                  legend="Choisissez une option :"
-                  name="ex-md"
-                  selection-button
-  >
-    <label>
-      <input type="radio"
-             name="ma-radio"
-             value="option1">
-      <span>Option 1</span>
-    </label>
-    <label>
-      <input type="radio"
-             name="ma-radio"
-             value="option2">
-      <span>Option 2</span>
-    </label>
-  </qc-radio-group>
-