qc-trousse-sdg 1.4.5 → 1.4.7

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/qc-doc-sdg.js

@@ -16,7 +16,8 @@ const maskableAlert = document.getElementById("alerte-masquable");
 if (displayAlertLink) {
     displayAlertLink.addEventListener(
         'click',
-        () => {
+        (evt) => {
+            evt.preventDefault();
             maskableAlert.setAttribute('hide', 'false');
             displayAlertLink.hidden = true;
         }
@@ -29,6 +30,10 @@ if (displayAlertLink) {
         }
     )
 }
+
+if (maskableAlert && displayAlertLink && !maskableAlert.querySelector('.qc-general-alert')) {
+    displayAlertLink.removeAttribute('hidden');
+}
 // add version
 
 

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,25 @@
+@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;
+  }
+  &:has(qc-select) {
+    overflow-x: visible;
+  }
+}
+

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";
 
@@ -93,24 +94,39 @@ h1,h2,h3,h4,h5,h6 {
 
 a {
 
+  &.pseudo-visited {
+    color: token-value(color,link,visited);
+    & > .qc-ext-link-img {
+      background-color: token-value(color, link, visited);
+    }
+  }
   &.pseudo-hover {
     @include hover-link();
+    & > .qc-ext-link-img {
+      background-color: token-value(color, link, hover);
+    }
   }
   &.pseudo-active {
     @include active-link();
+    & > .qc-ext-link-img {
+      background-color: token-value(color, link, active);
+    }
   }
   &.pseudo-focus {
     @include focus-link();
-  }
-  &.pseudo-visited {
-    color: token-value(color,link,visited)!important;
+    & > .qc-ext-link-img {
+      background-color: token-value(color, link, text);
+    }
   }
   &.not-visited:visited:not(:hover) {
     color: token-value(color,link,text);
+    & > .qc-ext-link-text {
+      color: token-value(color,link,text);
+    }
   }
 }
 
-span.qc-ext-link-img {
+div.qc-ext-link-img {
   a.pseudo-visited  & {
     background: token-value(color link visited)!important;
   }
@@ -123,6 +139,9 @@ span.qc-ext-link-img {
   a.pseudo-active  & {
     background: token-value(color link active)!important;
   }
+  a.not-visited:visited:not(:hover) & {
+    background: token-value(color link text)!important;
+  }
 }
 
 p,h1,h2,h3,h4,h5,h6 {

package/src/sdg/bases/Icon/Icon.svelte

@@ -8,6 +8,7 @@
         height='auto',
         src='',
         rotate = 0,
+        rootElement = $bindable(),
         ...rest
     } = $props();
     let attributes = $derived(width === 'auto' ? { 'data-img-size': size } : {});
@@ -30,5 +31,6 @@
      {...attributes}
      {...rest}
      aria-hidden={label ? undefined : true}
+     bind:this={rootElement}
     >
 </div>

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/bases/links/_links.scss

@@ -4,6 +4,10 @@
 
 a {
   color: token-value(color, link, text);
+  &:has(.qc-ext-link-text) {
+    white-space: nowrap;
+    text-decoration: none;
+  }
   &:visited {
     color: token-value(color, link, visited);
   }
@@ -19,33 +23,35 @@ a {
   .img-wrap {
     white-space: nowrap;
   }
+}
 
+.qc-external-link {
+  .qc-ext-link-text {
+    white-space: normal;
+    text-decoration: underline;
+  }
 }
-span.qc-ext-link-img {
 
+.qc-ext-link-img {
   @extend .icon-external-link;
   $ratio : math.div(11,16) * 1em;
   height: $ratio;
   width: $ratio;
-  display: inline-block;
   background: token-value(color link text);
   mask-size: $ratio;
-  margin-left: 4px;
-  a:visited  & {
+  display: inline-block;
+  mask-repeat: no-repeat;
+
+  a:visited & {
     background: token-value(color link visited);
   }
-  a:focus  & {
+  a:focus & {
     background: token-value(color link hover);
   }
-  a:hover  & {
+  a:hover & {
     background: token-value(color link hover);
   }
-  a:active  & {
+  a:active & {
     background: token-value(color link active);
   }
-
-
-  .img-wrap + & {
-    display: none;
-  }
 }

package/src/sdg/components/Alert/Alert.svelte

@@ -2,14 +2,20 @@
     import {Utils} from "../utils";
     import Icon from "../../bases/Icon/Icon.svelte";
     import IconButton from "../IconButton/IconButton.svelte";
+    import {onMount} from "svelte";
 
     let {
         type = "general",
         maskable = "",
         content = "",
-        hide = "false",
+        hide = $bindable("false"),
         fullWidth = "false",
         slotContent,
+        id,
+        persistenceKey,
+        persistHidden = false,
+        rootElement = $bindable(),
+        hideAlertCallback = () => {},
     } = $props();
 
     const language = Utils.getPageLanguage();
@@ -21,18 +27,31 @@
 
     const label = type === 'general' ? generalLabel : warningLabel;
 
-    let rootElement = $state(null);
-
     let containerClass = "qc-container" + (fullWidth === 'true' ? '-fluid' : '');
 
+    onMount(() => {
+        const key = getPersistenceKey();
+        if (!key) return;
+        hide = sessionStorage.getItem(key) ? "true" : "false";
+    })
+
     function hideAlert() {
         hide = "true";
-        rootElement.dispatchEvent(
-            new CustomEvent('qc.alert.hide', {
-                bubbles: true,
-                composed: true
-            })
-        );
+        persistHiddenState();
+        hideAlertCallback();
+    }
+
+    function getPersistenceKey() {
+        if (!persistHidden) return false;
+        const key = persistenceKey || id;
+        if (! key) return false;
+        return'qc-alert:' + key;
+    }
+
+    function persistHiddenState() {
+        const key = getPersistenceKey();
+        if (!key) return;
+        sessionStorage.setItem(key, Utils.now());
     }
 </script>
 

package/src/sdg/components/Alert/AlertWC.svelte

@@ -6,20 +6,35 @@
      maskable  : {attribute: 'maskable'},
      fullWidth : {attribute: 'full-width'},
      content: {attribute: 'content'},
-     hide: {attribute: 'hide'},
+     hide: {attribute: 'hide', reflect: true},
+     persistHidden: {attribute: 'persist-hidden', type: 'Boolean'},
+     persistenceKey: {attribute: 'persistence-key', type: 'String'},
   }
-}}"/>
+}}"></svelte:options>
 
 <script>
     import Alert from "./Alert.svelte";
     import {Utils} from "../utils";
 
-    const props = $props();
+    let {hide = "false", ...props} = $props();
 
+    let rootElement = $state();
+
+    function hideAlertCallback() {
+        rootElement?.dispatchEvent(
+            new CustomEvent('qc.alert.hide', {
+                bubbles: true,
+                composed: true
+            })
+        );
+    }
 </script>
 
  <Alert
-    {...props}
-    slotContent = {`<slot />`}
+         bind:hide
+         bind:rootElement
+         {hideAlertCallback}
+         {...props}
+         slotContent = {`<slot />`}
  />
 <link rel='stylesheet' href='{Utils.cssPath}'>

package/src/sdg/components/Alert/Test/AlertSvelteTest.svelte

@@ -0,0 +1,25 @@
+<script>
+    import Alert from "../Alert.svelte";
+    import {Utils} from "../../utils";
+
+    let regularAlertContent = $state();
+</script>
+
+<svelte:options customElement={{tag: "qc-alert-svelte-test" }} />
+
+<Alert
+        id="alerte-masquable"
+        type="warning"
+        maskable="true"
+        content="Alerte jaune d’importance élevée"
+        persistHidden="true"
+        persistenceKey="hash-1238"
+/>
+
+<div hidden>
+    <p style="margin: 0;" bind:this={regularAlertContent}>Alerte bleue d’importance modérée <a href="#">avec un lien textuel</a></p>
+</div>
+
+<Alert type="general" slotContent={regularAlertContent?.outerHTML} />
+
+<link rel='stylesheet' href='{Utils.cssPath}'>

package/src/sdg/components/Alert/Test/alertBaselineTest.html

@@ -0,0 +1,13 @@
+<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-alert type="general"
+          maskable="false">
+    <p>Alerte bleue d’importance modérée <a href="#">avec un lien textuel</a></p>
+</qc-alert>

package/src/sdg/components/Alert/Test/alertSvelteTest.html

@@ -0,0 +1 @@
+<qc-alert-svelte-test></qc-alert-svelte-test>

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
   >
@@ -11,27 +11,26 @@
 </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"
                 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>
 
-<!--            <qc-code target-id="alert-general"></qc-code>-->
-
 <h3>Documentation technique</h3>
 
 <h4>Attributs</h4>
@@ -51,12 +50,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>
@@ -77,6 +70,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>
 
@@ -89,7 +101,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>

package/src/sdg/components/Checkbox/Checkbox.svelte

@@ -40,15 +40,16 @@
         if (labelElement) {
             label = labelElement.querySelector('span')?.textContent;
         }
-    })
+    });
 
     $effect(_ => updateChoiceInput(input, required, invalid, compact, false, false))
 
     $effect(() => {
-        if (!required) return;
-        if (!labelElement) return;
-        labelElement.appendChild(requiredSpan);
-    })
+        if (required && label && requiredSpan) {
+            const textSpan = labelElement.querySelector('span');
+            textSpan.appendChild(requiredSpan);
+        }
+    });
 </script>
 
 {#snippet requiredSpanSnippet()}

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>