From 6d85696d06f41ca24eba440d9061ab579383f206 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@users.noreply.github.com>
Date: Fri, 31 May 2024 08:47:21 +0300
Subject: [PATCH] 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 <tsv2013@noreply.github.com>
---
 .../src/components/header/Header.vue          |  2 +-
 src/vue/components/header/header.vue          |  2 +-
 testCafe/survey/survey.js                     | 48 +++++++++++++++++++
 3 files changed, 50 insertions(+), 2 deletions(-)

diff --git a/packages/survey-vue3-ui/src/components/header/Header.vue b/packages/survey-vue3-ui/src/components/header/Header.vue
index af54ad73fb..64f9c794f6 100644
--- 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
index 6ce7efacb3..dc068274ca 100644
--- 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
index f5ece8182a..5d6e737f79 100644
--- 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();
+  });
 });