npm - qc-trousse-sdg - Versions diffs - 1.4.3 → 1.4.5 - Mend

qc-trousse-sdg 1.4.3 → 1.4.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (60) hide show

package/src/doc/_index.html CHANGED Viewed

@@ -18,6 +18,9 @@
           src='js/qc-doc-sdg.js'
           sdg-css-filename="qc-doc-sdg.css">
   </script>
+  <link rel="icon"
+        type="image/x-icon"
+        href="img/favicon.ico">
 </head>
 <body>
 <header>

package/src/sdg/_components.js CHANGED Viewed

@@ -11,7 +11,6 @@ export * from './components/IconButton/IconButtonWC.svelte'
 export * from './components/ChoiceGroup/ChoiceGroupWC.svelte'
 export * from './components/Checkbox/CheckboxWC.svelte'
 export * from './components/TextField/TextFieldWC.svelte'
-export * from './components/Button/ButtonWC.svelte'
 export * from './components/ToggleSwitch/ToggleSwitchWC.svelte'
 export * from './components/ChoiceGroup/ToggleSwitchGroupWC.svelte'
 export * from './components/DropdownList/SelectWC.svelte'

package/src/sdg/bases/form/_form.scss CHANGED Viewed

@@ -15,7 +15,3 @@ label {
 legend {
   padding: 0;
 }
-qc-select select {
-  appearance: none;
-}

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

@@ -57,7 +57,7 @@
                                 size="nm"
                                 icon="xclose"
                                 iconSize="sm"
-                                iconColor="text-primary"
+                                iconColor="blue-piv"
                     />
                 {/if}
             </div>

package/src/sdg/components/Button/_button.scss CHANGED Viewed

@@ -1,6 +1,12 @@
 @use "qc-sdg-lib" as *;
 @use "sass:map";
+%button-disabled {
+  cursor: not-allowed;
+  box-shadow: none;
+  opacity: 1;
+}
 .qc-button {
   font-family: token-value(font family, content);
   font-size: token-value(font size, md);
@@ -66,6 +72,14 @@
       background-color: token-value(color blue, regular_light);
       border-color: token-value(color blue, regular_light);
     }
+    &:disabled,
+    &.qc-disabled {
+      background-color: token-value(color grey, light);
+      border-color: token-value(color grey, light);
+      color: token-value(color white);
+      @extend %button-disabled;
+    }
   }
   &.qc-secondary {
@@ -90,6 +104,13 @@
     &.qc-active {
       background-color: rgba(map.get(map.get(map.get($xl-tokens, color), blue), piv), 0.08);
     }
+    &:disabled,
+    &.qc-disabled {
+      border-color: token-value(color grey, regular);
+      color: token-value(color grey regular);
+      @extend %button-disabled;
+    }
   }
   &.qc-tertiary {
@@ -114,6 +135,12 @@
     &.qc-active {
       background-color: rgba(map.get(map.get(map.get($xl-tokens, color), grey), light), 0.16);
     }
+    &:disabled,
+    &.qc-disabled {
+      color: token-value(color grey regular);
+      @extend %button-disabled;
+    }
   }
   &.qc-danger {
@@ -137,16 +164,14 @@
     &.qc-active {
       background-color: token-value(color red regular_light);
     }
-  }
-  &:disabled,
-  &.qc-disabled {
-    background-color: token-value(color grey, light);
-    border-color: token-value(color grey, light);
-    color: token-value(color white);
-    cursor: not-allowed;
-    box-shadow: none;
-    opacity: 1;
+    &:disabled,
+    &.qc-disabled {
+      background-color: token-value(color grey, light);
+      border-color: token-value(color grey, light);
+      color: token-value(color white);
+      @extend %button-disabled;
+    }
   }
   .qc-icon {
@@ -190,9 +215,7 @@
     &:disabled,
     &.qc-disabled {
       color: token-value(color, grey regular);
-      cursor: not-allowed;
-      box-shadow: none;
-      opacity: 1;
+      @extend %button-disabled;
     }
   }

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

@@ -2,7 +2,7 @@
     import { Utils } from "../utils";
     import FormError from "../FormError/FormError.svelte";
     import {getContext, onMount} from "svelte";
-    import {updateInput, onChange} from "./updateInput.svelte";
+    import {updateChoiceInput, onChange} from "./updateChoiceInput.svelte.js";
     const lang = Utils.getPageLanguage(),
         qcCheckoxContext = getContext("qc-checkbox");
@@ -32,7 +32,7 @@
     onMount(() => {
         if (qcCheckoxContext) return;
         labelElement = rootElement?.querySelector('label')
-        input = rootElement?.querySelector('input')
+        input = rootElement?.querySelector('input[type="checkbox"]')
         onChange(input, _invalid => invalid = _invalid)
     })
@@ -42,7 +42,7 @@
         }
     })
-    $effect(_ => updateInput(input, required, invalid, compact, false, false))
+    $effect(_ => updateChoiceInput(input, required, invalid, compact, false, false))
     $effect(() => {
         if (!required) return;

package/src/sdg/components/Checkbox/CheckboxWC.svelte CHANGED Viewed

@@ -12,7 +12,7 @@
     import Checkbox from "./Checkbox.svelte";
     import {onMount, setContext} from "svelte";
     import {Utils} from "../utils";
-    import {onChange} from "./updateInput.svelte";
+    import {onChange} from "./updateChoiceInput.svelte.js";
     setContext('qc-checkbox', true);
@@ -29,8 +29,8 @@
     onMount(() => {
         labelElement = $host()
-            .querySelector('label')
-        input = $host().querySelector('input')
+            .querySelector("label")
+        input = $host().querySelector('input[type="checkbox"]')
         onChange(input, _invalid => invalid = _invalid)
     })

package/src/sdg/components/Checkbox/{updateInput.svelte.js → updateChoiceInput.svelte.js} RENAMED Viewed

@@ -1,7 +1,12 @@
-export function updateInput(input, required, invalid, compact, selectionButton, inline, name) {
+export function updateChoiceInput(input, required, invalid, compact, selectionButton, inline, name) {
     if (!input ) return;
     if (input.role === "switch") return;
+    if (input.type === "hidden") return;
     let label = input.closest('label');
+    if (!label) {
+        console.warn("Pas d'élément label parent pour l'input", input);
+        return;
+    }
     input.classList.add('qc-choicefield')
     label.classList.add('qc-choicefield-label')
     input.classList.toggle('qc-selection-button', selectionButton)

package/src/sdg/components/ChoiceGroup/ChoiceGroup.svelte CHANGED Viewed

@@ -1,7 +1,7 @@
 <script>
     import Fieldset from "../Fieldset/Fieldset.svelte";
     import {onMount} from "svelte";
-    import {updateInput} from "../Checkbox/updateInput.svelte";
+    import {updateChoiceInput} from "../Checkbox/updateChoiceInput.svelte.js";
     let {
         invalid = $bindable(false),
@@ -27,7 +27,7 @@
             .querySelectorAll('input, .qc-choicefield')
             .forEach(
                 input =>
-                    updateInput(
+                    updateChoiceInput(
                         input,
                         required,
                         invalid,

package/src/sdg/components/ChoiceGroup/Test/ChoiceGroupeEmbededTest.svelte CHANGED Viewed

@@ -15,6 +15,7 @@
                  name="tile-1"
 >
     <label>
+        <input type="hidden">
         <input {type}
                value="1"
@@ -27,6 +28,7 @@
     </label>
     <label>
+        <input type="hidden">
         <input {type}
                value="2"
@@ -36,6 +38,7 @@
             </span>
     </label>
     <label>
+        <input type="hidden">
         <input {type}
                value="3"

package/src/sdg/components/ChoiceGroup/Test/checkboxBaselineTest.html CHANGED Viewed

@@ -5,6 +5,7 @@
                  name="tile-1"
 >
     <label>
+        <input type="hidden">
         <input type="checkbox"
                value="1"
@@ -17,6 +18,7 @@
     </label>
     <label>
+        <input type="hidden">
         <input type="checkbox"
                value="2"
@@ -26,6 +28,7 @@
             </span>
     </label>
     <label>
+        <input type="hidden">
         <input type="checkbox"
                value="3"

package/src/sdg/components/DropdownList/DropdownList.svelte CHANGED Viewed

@@ -27,7 +27,6 @@
         rootElement = $bindable(),
         errorElement = $bindable(),
         webComponentMode = false,
-        webComponentParentRow,
     } = $props();
     const
@@ -81,9 +80,9 @@
             const keyword = webComponentMode ? "container" : "root";
             if (availableWidths.includes(width)) {
-                return `qc-dropdown-list-${keyword}-${width}`;
+                return `qc-dropdown-list-${width}`;
             }
-            return `qc-dropdown-list-${keyword}-md`;
+            return `qc-dropdown-list-md`;
         }),
         srItemsCountText = $derived.by(() => {
             const s = displayedItems.length > 1 ? "s" : "";
@@ -273,14 +272,11 @@
 <svelte:body onclick={handleOuterEvent} onkeydown={handleTab}/>
 <div
         class={[
-        "qc-dropdown-list-root",
-        !webComponentMode && widthClass,
-        !(parentRow || webComponentParentRow) && "qc-dropdown-list-margin"
+        !parentRow && !webComponentMode && "qc-select"
     ]} bind:this={rootElement}
 >
     <div class={[
             "qc-dropdown-list-container",
-            webComponentMode && widthClass
         ]}>
         <!-- svelte-ignore a11y_click_events_have_key_events -->
         <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
@@ -301,6 +297,7 @@
         <div
                 class={[
                 `qc-dropdown-list`,
+                widthClass,
                 invalid && "qc-dropdown-list-invalid",
             ]}
                 tabindex="-1"

package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItems.svelte CHANGED Viewed

@@ -20,11 +20,6 @@
         placeholder,
     } = $props()
-    const
-        precentRootFontSize = 62.5,
-        remRatio = 0.16
-    ;
     let itemsComponent = $state();
     let usedHeight = $derived.by(() => {
         const maxItemsHeight = 336;
@@ -68,7 +63,7 @@
     id={id}
     class="qc-dropdown-list-items"
     tabindex="-1"
-    style="--dropdown-items-height: {usedHeight / (remRatio * precentRootFontSize)}rem;"
+    style="--dropdown-items-height: {usedHeight};"
 >
     {#if multiple}
         <DropdownListItemsMultiple

package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsMultiple/_dropdownListItemsMultiple.scss CHANGED Viewed

@@ -5,15 +5,10 @@
   label {
     margin: 0;
-    padding-left: token-value(spacer, xs);
-    padding-right: token-value(spacer, xs);
+    padding: token-value(spacer, xs);
     flex-grow: 1;
-    align-items: center;
   }
-  .qc-choicefield {
-    margin-top: 0 !important;
-    &:focus {
-      outline: none;
-    }
+  .qc-choicefield:focus {
+    outline: none;
   }
 }

package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsSingle/_dropdownListItemsSingle.scss CHANGED Viewed

@@ -1,8 +1,7 @@
 @use "../../../../scss/qc-sdg-lib" as *;
 .qc-dropdown-list-single {
-  padding-left: token-value(spacer, xs);
-  padding-right: token-value(spacer, xs);
+  padding: token-value(spacer, xs);
   margin: 0;
 }

package/src/sdg/components/DropdownList/DropdownListItems/_dropdownListItems.scss CHANGED Viewed

@@ -5,7 +5,7 @@
 $min-height: 40;
 .qc-dropdown-list-items {
-  max-height: var(--dropdown-items-height);
+  max-height: calc(var(--dropdown-items-height) * $rem-ratio * 1rem);
   overflow-y: auto;
   overflow-x: hidden;
@@ -38,15 +38,13 @@ $min-height: 40;
   * {
     overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
   }
 }
 .qc-dropdown-list-multiple, .qc-dropdown-list-single {
   display: flex;
   align-items: center;
-  height: rem($min-height);
+  min-height: rem($min-height);
   &.qc-dropdown-list-active:hover {
     background-color: token-value(color, grey, pale);

package/src/sdg/components/DropdownList/SelectWC.svelte CHANGED Viewed

@@ -18,7 +18,7 @@
 }}"/>
 <script>
-    import {onDestroy, onMount} from "svelte";
+    import {onDestroy, onMount, tick} from "svelte";
     import DropdownList from "./DropdownList.svelte";
     import {Utils} from "../utils";
@@ -34,60 +34,60 @@
         ...rest
     } = $props();
-    const availableWidths = ["xs", "sm", "md", "lg", "xl"];
     let selectElement = $state();
     let items = $state();
     let labelElement = $state();
-    let observer;
+    let observer = new MutationObserver(setupItemsList);
+    let observerOptions = {
+        childList: true,
+        attributes: true,
+        subtree: true,
+        attributeFilter: ["label", "value", "disabled", "selected"]
+    };
     let instance = $state();
     let errorElement = $state();
     let parentRow = $derived($host().closest(".qc-formfield-row"));
-    let widthClass = $derived.by(() => {
-        if (availableWidths.includes(width)) {
-            return `qc-dropdown-list-root-${width}`;
-        }
-        return `qc-dropdown-list-root-md`;
-    });
+    let internalChange = false;
     onMount(() => {
         selectElement = $host().querySelector("select");
         labelElement = $host().querySelector("label");
         if (labelElement) {
             label = labelElement.innerHTML;
         }
         if (selectElement) {
             multiple = selectElement.multiple;
             disabled = selectElement.disabled;
-        }
+            selectElement.addEventListener("change", handleSelectChange);
+            observer.observe(selectElement, observerOptions);
+        }
         setupItemsList();
-        setupObserver();
+        $host().classList.add("qc-select");
     });
     onDestroy(() => {
         observer?.disconnect();
+        selectElement.removeEventListener("change", handleSelectChange);
     });
     $effect(() => {
-        if (
-            selectElement
-            && selectElement.options
-            && selectElement.options.length > 0
-            && value
-            && value.length > 0
-        ) {
-            for (const option of selectElement.options) {
-                if (value.includes(option.value)) {
-                    option.setAttribute('selected', '');
-                    option.selected = true;
-                } else {
-                    option.removeAttribute('selected');
-                    option.selected = false;
-                }
+        if (!selectElement) return;
+        if (!selectElement.options) return;
+        internalChange = true;
+        let newOptionSelected = false;
+        for (const option of selectElement.options) {
+                const selected = value.includes(option.value);
+                if (selected !== option.selected) {
+                    option.toggleAttribute("selected", selected);
+                    option.selected = selected;
+                    newOptionSelected = true;
             }
         }
+        if (newOptionSelected) {
+            selectElement.dispatchEvent(new Event('change'));
+        }
+        tick().then(() => internalChange = false)
     });
     $effect(() => {
@@ -96,13 +96,6 @@
        }
     });
-    $effect(() => {
-       if (widthClass) {
-           $host().classList.add("qc-dropdown-list-root");
-           $host().classList.add(widthClass);
-       }
-    });
     function setupItemsList() {
         const options = selectElement?.querySelectorAll("option");
         if (options && options.length > 0) {
@@ -117,21 +110,10 @@
         }
     }
-    function setupObserver() {
-        if (selectElement) {
-            if (observer) {
-                return;
-            }
-            observer = new MutationObserver(setupItemsList);
-            observer.observe(selectElement, {
-                childList: true,
-                attributes: true,
-                attributeFilter: ["label", "value", "disabled", "selected"]
-            });
-        }
+    function handleSelectChange() {
+        if (internalChange) return;
+        setupItemsList();
     }
 </script>
 <div hidden>
@@ -145,7 +127,6 @@
         {placeholder}
         {width}
         webComponentMode={true}
-        webComponentParentRow={parentRow}
         bind:value
         bind:errorElement
         bind:invalid

package/src/sdg/components/DropdownList/Test/DropdownListSvelteTest.svelte CHANGED Viewed

@@ -6,7 +6,6 @@
     import DropdownList from "../DropdownList.svelte";
     import {Utils} from "../../utils";
     import * as dropdownListTest from "./dropdownListTestUtils";
-    import Button from "../../Button/Button.svelte";
     let singleChoiceOptions = $state(dropdownListTest.genericOptions());
     let singleChoiceWithSearchOptions = $state(dropdownListTest.genericOptions());
@@ -15,8 +14,29 @@
     let restaurants = $state(dropdownListTest.restaurantsArray());
     let regions = $state(dropdownListTest.regionsArray());
+    let restaurantsDropdownList = $state(null);
+    let regionsDropdownList = $state(null);
     singleChoiceOptions[0].checked = true;
     singleChoiceWithSearchOptions[0].checked = true;
+    function validateForm(event) {
+        event.preventDefault();
+        if (restaurantsDropdownList && regionsDropdownList) {
+            let isValid = restaurantsDropdownList.value && restaurantsDropdownList.value.length > 0;
+            restaurantsDropdownList.invalid = !isValid;
+            if (isValid) {
+                const alertParts = [
+                    "Formulaire soumis avec les données suivantes :",
+                    "Type de restaurant: " + restaurantsDropdownList.value.join(", "),
+                    "Régions desservies: " + regionsDropdownList.value.join(", ")
+                ]
+                alert(alertParts.join("\n"));
+            }
+        }
+    }
 </script>
 <DropdownList
@@ -62,8 +82,17 @@
         items={JSON.parse(JSON.stringify(multipleChoiceOptions))}
 />
+<DropdownList
+        id="dropdown-list-multiple-sm"
+        label="Débordement"
+        multiple
+        width="sm"
+        items={dropdownListTest.overflowOptions()}
+/>
 <form id="dropdown-list-embedded-test-form">
     <DropdownList
+            bind:this={restaurantsDropdownList}
             label="Types de restaurants"
             required="true"
             placeholder="Types de restaurants"
@@ -74,6 +103,7 @@
     />
     <DropdownList
+            bind:this={regionsDropdownList}
             label="Régions desservies"
             multiple="true"
             placeholder="Sélectionner une région"
@@ -83,7 +113,12 @@
             width="lg"
     />
-    <Button label="Envoyer" type="submit" compact="true" />
+    <button
+            type="submit" class="qc-button qc-primary qc-compact"
+            onclick={(event) => validateForm(event)}
+    >
+        Envoyer
+    </button>
 </form>
 <link rel='stylesheet' href='{Utils.cssPath}'>

package/src/sdg/components/DropdownList/Test/{dropdownListTest.html → dropdownListBaselineTest.html} RENAMED Viewed

@@ -20,6 +20,15 @@
   </select>
 </qc-select>
+<script>
+    const selectElement = document.getElementById("select-single-choice");
+    console.log("Select element options[0]:", selectElement.options[0]);
+    selectElement.addEventListener("change", (event) => {
+        console.log("Option sélectionnée :", event.target.value);
+    });
+</script>
 <div style="height: 40rem;">
   <qc-select id="qc-select-single-choice-search" enable-search>
     <label for="select-single-choice-search">Choix unique avec recherche</label>
@@ -68,7 +77,7 @@
 <div class="qc-formfield-row">
   <qc-select id="qc-select-invalid" invalid>
-    <label for="select-invalid">État invalide</label>
+    <label for="select-invalid">État initialement invalide dans .qc-formfield-row</label>
     <select multiple id="select-invalid">
       <option value="1">Option 1</option>
       <option value="2">Option 2</option>
@@ -117,6 +126,15 @@
   <select id="select-disabled" disabled>disabled</select>
 </qc-select>
+<qc-select id="qc-select-multiple-choices-sm" width="sm">
+    <label for="select-multiple-choices-sm">Débordement</label>
+    <select id="select-multiple-choices-sm" multiple>
+        <option value="1">Option 1 + texte de remplissage</option>
+        <option value="2">Option 2 + texte de remplissage</option>
+        <option value="3">Option 3 + texte de remplissage</option>
+    </select>
+</qc-select>
 <form id="dropdown-list-form">
   <qc-select
           id="dropdown-list-restaurants"

package/src/sdg/components/DropdownList/Test/dropdownListTestUtils.js CHANGED Viewed

@@ -12,6 +12,20 @@ export function genericOptions() {
     return genericOptions;
 }
+export function overflowOptions() {
+    let overflowOptions = [];
+    for (let i = 1; i <= 3; i++) {
+        overflowOptions.push({
+            value: i,
+            label: `Option ${i} + texte de remplissage`,
+            disabled: false,
+            checked: false,
+        });
+    }
+    return overflowOptions;
+}
 export function restaurantsArray() {
     return [
         {