project-booster-vue 9.25.0 → 9.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "project-booster-vue",
-  "version": "9.25.0",
+  "version": "9.26.0",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/question/space-input/PbSpaceInput.stories.mdx

@@ -247,3 +247,51 @@ export const customFooter = {
     {TemplateSandbox.bind({})}
   </Story>
 </Canvas>
+
+## With modal support
+
+export const withModal = {
+  viewModel: {
+    validation: {
+      maxValue: 10001,
+      maxErrorMessage: 'La surface doit être comprise entre 100m² et 10 000m²',
+      minValue: 99,
+      minErrorMessage: 'La surface doit être comprise entre 100m² et 10 000m²',
+    },
+    backLabel: 'Question précédente',
+    label: 'Quelle est votre surface ?',
+    placeholder: 'Votre surface',
+    actionLabel: 'Continuer',
+    image: null,
+  },
+  helpArea: [
+    {
+      type: 'text',
+      label: 'Besoin d’aide pour calculer la surface ?',
+    },
+    {
+      type: 'link',
+      label: 'Voir le guide pour calculer sa surface',
+      action: {
+        type: 'MODAL',
+        dialogViewModel: {
+          headerTitle: 'Pour calculer la surface chauffée c’est facile.',
+          htmlContent:
+            '<p>Pour calculer la surface chauffée c’est facile.</p><p> Il suffit de déduire de <strong>la surface habitable</strong> de votre habitation, <strong>les surfaces des pièces non chauffées</strong> par la pompe à chaleur. </p><p> Les pièces non chauffées peuvent être des pièces annexes (buanderie, véranda, …) ou de pièces chauffées par un autre mode de chauffage (radiateurs électriques par exemple). </p><p> <strong>Attention :</strong> le garage et le grenier ne sont pas pris en compte dans la surface habitable de base, il ne faut donc pas les déduire </p>',
+        },
+      },
+    },
+  ],
+};
+
+<Source language="json" code={JSON.stringify(withModal, null, '  ')} />
+
+<Canvas>
+  <Story
+    name="Showcase - Feature with modal"
+    parameters={{ controls: { disable: true } }}
+    args={{ payload: withModal }}
+  >
+    {TemplateSandbox.bind({})}
+  </Story>
+</Canvas>

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

@@ -12,6 +12,7 @@
         @click.once="$emit('go-back')"
       />
     </m-flex>
+
     <form
       class="pb-space-input__form-container"
       ref="pbSpaceInputFormContainerObserver"
@@ -57,6 +58,30 @@
           </m-flexy-col>
         </m-flex>
 
+        <m-flex
+          class="pb-space-input__help"
+          v-if="computedPayload.helpArea"
+          direction="column"
+          align-items="center"
+          justify-content="center"
+        >
+          <div v-for="helpItem in computedPayload.helpArea" :key="helpItem.type">
+            <div v-if="helpItem.type === 'text'">
+              <p class="pb-space-input__help__text">{{ helpItem.label }}</p>
+            </div>
+            <div v-if="helpItem.type === 'link'">
+              <m-link
+                class="pb-space-input__help__link"
+                :label="helpItem.label"
+                width="full"
+                size="l"
+                theme="primary"
+                @click="handleShowModal(helpItem.action.dialogViewModel)"
+              />
+            </div>
+          </div>
+        </m-flex>
+
         <m-flex class="pb-space-input__buttons-container" direction="column" align-items="center">
           <m-button
             class="pb-space-input__button"
@@ -77,6 +102,30 @@
         </m-flex>
       </m-flex>
     </form>
+
+    <m-dialog
+      class="pb-space-input__dialog"
+      :show-dialog="showModal"
+      width="680px"
+      height="520px"
+      maxHeight="100vh"
+      @update:show-dialog="handleShowModal"
+      v-if="computedPayload.helpArea"
+    >
+      <template v-slot:header>
+        <div class="pb-space-input__dialog__title">
+          <h2>{{ contentModal.headerTitle }}</h2>
+        </div>
+      </template>
+      <template v-slot:body>
+        <div class="pb-space-input__dialog__body" v-html="contentModal.htmlContent"></div>
+      </template>
+      <template v-slot:footer>
+        <m-flex class="pb-space-input__dialog__footer" align-items="center" justify-content="center">
+          <m-button label="Fermer" theme="bordered-neutral" @click.prevent="handleShowModal"></m-button>
+        </m-flex>
+      </template>
+    </m-dialog>
   </m-flex>
 </template>
 
@@ -93,6 +142,7 @@ import MLink from '../../mozaic/link/MLink.vue';
 import MTextInput from '../../mozaic/text-input/MTextInput.vue';
 import MFlexyCol from '../../mozaic/grid/MFlexyCol.vue';
 import MIcon from '../../mozaic/icon/MIcon.vue';
+import MDialog from '../../mozaic/dialog/MDialog.vue';
 import DEFAULT_PAYLOAD from './default-payload.json';
 import { SpaceInputPayload } from '@/components/question/space-input/SpaceInput';
 import { ScenarioStepAnswer } from '@/types/pb/Scenario';
@@ -145,6 +195,7 @@ export default defineComponent({
     MFlexyCol,
     MTextInput,
     MIcon,
+    MDialog,
   },
 
   props: {
@@ -194,9 +245,19 @@ export default defineComponent({
       return merge(tempPayload, props.payload);
     });
     const pbSpaceInputTextInput = ref<HTMLElement>();
+    const showModal = ref(false);
+    const contentModal = ref({});
 
     const space = computeDefaultValue(props.runtimeOptions, props.answers!, computedPayload);
 
+    const handleShowModal = ({ headerTitle, htmlContent }: { headerTitle: string; htmlContent: string }) => {
+      showModal.value = !showModal.value;
+
+      if (headerTitle && htmlContent) {
+        contentModal.value = { headerTitle, htmlContent };
+      }
+    };
+
     const validationSchema = initValidation(componentId, computedPayload);
 
     const { handleSubmit } = useForm({ validationSchema: validationSchema.value });
@@ -250,6 +311,9 @@ export default defineComponent({
       handleFormSubmit,
       isShowingFooter,
       skipQuestion,
+      showModal,
+      handleShowModal,
+      contentModal,
     };
   },
 });
@@ -382,5 +446,29 @@ $responsive-breakpoint: 'm';
   &__link {
     margin-top: $mu250;
   }
+
+  &__dialog {
+    &__title {
+      padding: $mu250 $mu250 0 $mu250;
+    }
+
+    &__body {
+      padding: 0 $mu250;
+      @include set-font-scale('05', 'l');
+    }
+
+    &__footer {
+      padding: $mu100 $mu250 $mu250 $mu250;
+    }
+  }
+
+  &__help {
+    margin-bottom: $mu250;
+
+    &__link,
+    &__text {
+      margin: 0;
+    }
+  }
 }
 </style>