project-booster-vue 8.115.3 → 8.115.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "8.115.3",
+  "version": "8.115.7",
   "private": false,
   "scripts": {
     "test:unit": "vue-cli-service test:unit --forceExit --detectOpenHandles",

package/src/components/question/dimensions-input/PbDimensionsInput.vue

@@ -62,7 +62,7 @@
             </div>
           </m-flex>
         </m-flex>
-        <m-flex class="pb-dimensions-input__buttons-container" direction="column">
+        <m-flex class="pb-dimensions-input__buttons-container" direction="column" align-items="center">
           <m-button
             class="pb-dimensions-input__button"
             :label="computedPayload.viewModel.actionLabel"
@@ -70,6 +70,15 @@
             size="l"
             @click="handleFormSubmit"
           />
+          <m-link
+            v-if="payload.skippable"
+            class="pb-dimensions-input__link"
+            :label="payload.skippable.label"
+            width="full"
+            size="l"
+            @click="skipQuestion"
+            :theme="payload.skippable.theme"
+          />
         </m-flex>
       </m-flex>
     </form>
@@ -266,7 +275,17 @@ export default {
         ],
       });
     });
-
+    const skipQuestion = () => {
+      /**
+       * Emitted when step is completed
+       * @event dynamic event name according to completedEventName prop
+       * @type {Event}
+       */
+      emit(props.completedEventName, {
+        answers: props.payload?.skippable?.defaultAnswer ? [props.payload?.skippable?.defaultAnswer] : [],
+        nextStep: props.payload?.skippable?.nextStep,
+      });
+    };
     onMounted(() => {
       setTimeout(() => {
         pbDimensionsInputLengthInput.value.focus();
@@ -282,6 +301,7 @@ export default {
       computedPayload,
       pbDimensionsInputLengthInput,
       handleFormSubmit,
+      skipQuestion,
     };
   },
 };
@@ -415,5 +435,9 @@ $responsive-breakpoint: 'm';
     position: sticky;
     z-index: 1;
   }
+
+  &__link {
+    margin-top: $mu250;
+  }
 }
 </style>

package/src/components/question/list-select/PbListSelect.vue

@@ -54,10 +54,11 @@
               @click="skipQuestion"
             />
             <m-button
-              v-if="hasSelectedAnswers"
+              v-if="hasSelectedAnswers || payload.multiSelect.alwaysDisplayMultiSelectButton"
               class="pb-list-select__validate-button"
               size="m"
               size-from-l="l"
+              :disabled="!hasSelectedAnswers"
               :label="validateButtonProps.label"
               :left-icon="validateButtonProps.leftIcon"
               :right-icon="validateButtonProps.rightIcon"
@@ -71,7 +72,7 @@
 </template>
 
 <script>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import objectPath from 'object-path';
 import MFlex from '../../mozaic/flex/MFlex';
 import MButton from '../../mozaic/buttons/MButton';
@@ -166,10 +167,22 @@ export default {
       return displayedAnswers;
     });
 
+    const updateSelectedAnswers = () => {
+      selectedAnswers.value = displayedAnswers.value
+        .filter((answer) => !!answer.selected)
+        .map((answer) => ({ key: answer.code, value: true }));
+    };
     const handleSelectionChange = (items) => {
       selectedAnswers.value = Object.entries(items)
         .filter(([key, value]) => !!value)
         .map(([key, value]) => ({ key, value }));
+      Object.entries(items).map(([key, value]) => {
+        displayedAnswers.value.map((answer) => {
+          if (answer.code === key) {
+            answer.selected = value;
+          }
+        });
+      });
     };
 
     const hasSelectedAnswers = computed(() => {
@@ -225,7 +238,7 @@ export default {
       }
 
       let nextStep;
-      if (props.payload?.multilselect) {
+      if (props.payload?.multiSelect) {
         nextStep = props.payload.multiSelect.actions.VALIDATE.nextStep;
       } else if (props.payload?.answers[answersToSubmit[0].value]?.nextStep) {
         nextStep = props.payload.answers[answersToSubmit[0].value].nextStep;
@@ -335,7 +348,9 @@ export default {
       }
       return valueToDecorate;
     };
-
+    onMounted(() => {
+      updateSelectedAnswers();
+    });
     return {
       BACK_ICON,
       INFO_ICON,
@@ -352,6 +367,7 @@ export default {
       skipQuestion,
       submitAnswers,
       decorateBoolean,
+      updateSelectedAnswers,
     };
   },
 };

package/src/components/question/space-input/PbSpaceInput.vue

@@ -56,7 +56,7 @@
           </m-flexy-col>
         </m-flex>
 
-        <m-flex class="pb-space-input__buttons-container" direction="column">
+        <m-flex class="pb-space-input__buttons-container" direction="column" align-items="center">
           <m-button
             class="pb-space-input__button"
             :label="computedPayload.viewModel.actionLabel"
@@ -64,6 +64,15 @@
             size="l"
             @click="handleFormSubmit"
           />
+          <m-link
+            v-if="payload.skippable"
+            class="pb-space-input__link"
+            :label="payload.skippable.label"
+            :theme="payload.skippable.theme"
+            width="full"
+            size="l"
+            @click="skipQuestion"
+          />
         </m-flex>
       </m-flex>
     </form>
@@ -233,6 +242,17 @@ export default {
         ],
       });
     });
+    const skipQuestion = () => {
+      /**
+       * Emitted when step is completed
+       * @event dynamic event name according to completedEventName prop
+       * @type {Event}
+       */
+      emit(props.completedEventName, {
+        answers: props.payload?.skippable?.defaultAnswer ? [props.payload?.skippable?.defaultAnswer] : [],
+        nextStep: props.payload?.skippable?.nextStep,
+      });
+    };
 
     const isShowingFooter = computed(() => {
       return computedPayload.value.viewModel.footer;
@@ -254,6 +274,7 @@ export default {
       handleFormSubmit,
       isShowingFooter,
       decorateBoolean,
+      skipQuestion,
     };
   },
 };
@@ -382,5 +403,9 @@ $responsive-breakpoint: 'm';
     position: sticky;
     z-index: 1;
   }
+
+  &__link {
+    margin-top: $mu250;
+  }
 }
 </style>

package/src/components/restitution/PbRestitutionExit.vue

@@ -73,10 +73,13 @@ export default {
 $responsive-breakpoint: 'l';
 
 .pb-restitution-exit {
-  &__section {
-    margin-bottom: $mu400;
-    margin-top: $mu400;
+  margin: $mu350 0;
+
+  @include set-from-screen('m') {
+    margin: $mu300 0;
+  }
 
+  &__section {
     &-title {
       @include set-font-face('semi-bold');
       @include set-font-scale('07', 'm');