Bug/8332-vue3-extra-header (#8336)

* Fixed #8332 - [Vue3] A Form contains a duplicate header when applying a custom theme * Fixed lint --------- Co-authored-by: tsv2013 <[email protected]>
surveyjs · May 31, 2024 · 6d85696 · 6d85696
1 parent d7934ca
commit 6d85696
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 2 deletions.
diff --git a/packages/survey-vue3-ui/src/components/header/Header.vue b/packages/survey-vue3-ui/src/components/header/Header.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="model.headerClasses" :style="{ height: model.renderedHeight }">
+  <div v-if="survey.headerView === 'advanced'" :class="model.headerClasses" :style="{ height: model.renderedHeight }">
     <div
       v-if="!!model.backgroundImage"
       :class="model.backgroundImageClasses"

diff --git a/src/vue/components/header/header.vue b/src/vue/components/header/header.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="model.headerClasses" :style="{ 'height': model.renderedHeight }">
+  <div v-if="survey.headerView === 'advanced'" :class="model.headerClasses" :style="{ 'height': model.renderedHeight }">
     <div v-if="!!model.backgroundImage" :class="model.backgroundImageClasses" :style="model.backgroundImageStyle"></div>
     <div v-if="!survey.isMobile" :class="model.contentClasses" :style="{ maxWidth: model.maxWidth }">
     <sv-header-cell

diff --git a/testCafe/survey/survey.js b/testCafe/survey/survey.js
@@ -159,4 +159,52 @@ frameworks.forEach((framework) => {
     await t.click("#sv-nav-preview input");
     await t.click("#sv-nav-complete input");
   });
+  test("Do not show advanced header if not set headerView === 'advanced'", async (t) => {
+    await initSurvey(framework, {
+      "title": "NPS Survey Question",
+      "logo": "https://api.surveyjs.io/private/Surveys/files?name=bdf16c7e-fa1e-4e31-9d82-a6df1982c224",
+      "logoWidth": "200px",
+      "logoHeight": "80px",
+      "logoFit": "cover",
+      "logoPosition": "right",
+      "elements": [
+        {
+          "type": "rating",
+          "name": "nps-score",
+          "title": "On a scale from 0 to 10, how likely are you to recommend us to a friend or colleague?",
+          "rateMin": 0,
+          "rateMax": 10,
+          "minRateDescription": "Very unlikely",
+          "maxRateDescription": "Very likely"
+        },
+      ],
+    });
+    await applyTheme({
+      backgroundImage:
+        "https://api.surveyjs.io/private/Surveys/files?name=4ffde38f-2bb3-4f57-aa0d-d5c7003e8ab1",
+      backgroundImageFit: "cover",
+      backgroundImageAttachment: "scroll",
+      header: {
+        height: 256,
+        inheritWidthFrom: "container",
+        textAreaWidth: 512,
+        overlapEnabled: false,
+        backgroundImageOpacity: 1,
+        backgroundImageFit: "cover",
+        logoPositionX: "right",
+        logoPositionY: "top",
+        titlePositionX: "left",
+        titlePositionY: "bottom",
+        descriptionPositionX: "left",
+        descriptionPositionY: "bottom",
+      },
+      themeName: "molisana",
+      isPanelless: false,
+      colorPalette: "light",
+      cssVariables: {
+      },
+    });
+    await t.expect(Selector(".sd-title").visible).ok();
+    await t.expect(Selector(".sv-header").visible).notOk();
+  });
 });