Fix issues in creator vue3 (#7398)

* Fix update onShowing is not called for modal popup * Fix questionWrapper css class is not applied * Fix comment error for rating question in creator * Remove vue additional div
surveyjs · Nov 22, 2023 · f4bcf8a · f4bcf8a
1 parent 73cb7fa
commit f4bcf8a
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 57 deletions.
diff --git a/packages/survey-vue3-ui/src/Element.vue b/packages/survey-vue3-ui/src/Element.vue
@@ -1,5 +1,8 @@
 <template>
-  <div :style="getRootStyle(element)">
+  <div
+    :style="getRootStyle(element)"
+    :class="element.cssClasses.questionWrapper"
+  >
     <component
       :is="componentName"
       v-bind="componentData"

diff --git a/packages/survey-vue3-ui/src/Question.vue b/packages/survey-vue3-ui/src/Question.vue
@@ -46,10 +46,7 @@
         <div>
           <survey-string :locString="element.locCommentText" />
         </div>
-        <survey-question-comment
-          :commentClass="css.comment"
-          :question="element"
-        />
+        <survey-question-comment :question="element" />
       </div>
       <survey-errors
         v-if="hasErrorsOnBottom"

diff --git a/packages/survey-vue3-ui/src/QuestionComment.vue b/packages/survey-vue3-ui/src/QuestionComment.vue
@@ -7,7 +7,7 @@
     :id="question.commentId"
     :readonly="question.isInputReadOnly"
     :disabled="question.isInputReadOnly"
-    :class="question.cssClasses.other || commentClass"
+    :class="question.cssClasses.other"
     :value="question.comment"
     :maxlength="question.getOthersMaxLength()"
     :placeholder="question.renderedCommentPlaceholder"
@@ -31,6 +31,5 @@
 import type { Question } from "survey-core";
 defineProps<{
   question: Question;
-  commentClass?: any;
 }>();
 </script>
diff --git a/packages/survey-vue3-ui/src/components/popup/PopupContainer.vue b/packages/survey-vue3-ui/src/components/popup/PopupContainer.vue
@@ -54,8 +54,8 @@
 </template>
 <script lang="ts" setup>
 import { useBase } from "@/base";
-import type { PopupBaseViewModel } from "survey-core";
-import { onUpdated } from "vue";
+import { Model, type PopupBaseViewModel } from "survey-core";
+import { onMounted, onUpdated } from "vue";
 
 const props = defineProps<{ model: PopupBaseViewModel }>();
 let prevIsVisible = false;
@@ -72,4 +72,9 @@ onUpdated(() => {
   }
   prevIsVisible = model.isVisible;
 });
+onMounted(() => {
+  if (props.model.isVisible) {
+    props.model.updateOnShowing();
+  }
+});
 </script>
diff --git a/packages/survey-vue3-ui/src/components/title/TitleContent.vue b/packages/survey-vue3-ui/src/components/title/TitleContent.vue
@@ -1,56 +1,51 @@
 <template>
-  <div class="sv-vue-title-additional-div">
-    <survey-string
-      v-if="element.isTitleRenderedAsString"
-      :locString="element.locTitle"
-    />
-    <span
-      v-if="!element.isTitleRenderedAsString && element.isRequireTextOnStart"
-      :class="element.cssClasses.requiredText"
-      :aria-hidden="true"
-      >{{ element.requiredText }}</span
-    >
-    <span
-      v-if="!element.isTitleRenderedAsString && element.no"
-      style="position: static"
-      :class="element.cssTitleNumber"
-      :aria-hidden="true"
-      >{{ element.no }}</span
-    >
-    <span v-if="!element.isTitleRenderedAsString && element.no">&nbsp;</span>
-    <span
-      v-if="
-        !element.isTitleRenderedAsString && element.isRequireTextBeforeTitle
-      "
-      :class="element.cssClasses.requiredText"
-      :aria-hidden="true"
-      >{{ element.requiredText }}</span
-    >
-    <span
-      v-if="
-        !element.isTitleRenderedAsString && element.isRequireTextBeforeTitle
-      "
-      >&nbsp;</span
-    >
-    <survey-string
-      v-if="!element.isTitleRenderedAsString"
-      :locString="element.locTitle"
-    />
-    <span
-      v-if="!element.isTitleRenderedAsString && element.isRequireTextAfterTitle"
-      >&nbsp;</span
-    >
-    <span
-      v-if="!element.isTitleRenderedAsString && element.isRequireTextAfterTitle"
-      :class="element.cssClasses.requiredText"
-      :aria-hidden="true"
-      >{{ element.requiredText }}</span
-    >
-  </div>
+  <survey-string
+    v-if="element.isTitleRenderedAsString"
+    :locString="element.locTitle"
+  />
+  <span
+    v-if="!element.isTitleRenderedAsString && element.isRequireTextOnStart"
+    :class="element.cssClasses.requiredText"
+    :aria-hidden="true"
+    >{{ element.requiredText }}</span
+  >
+  <span
+    v-if="!element.isTitleRenderedAsString && element.no"
+    style="position: static"
+    :class="element.cssTitleNumber"
+    :aria-hidden="true"
+    >{{ element.no }}</span
+  >
+  <span v-if="!element.isTitleRenderedAsString && element.no">&nbsp;</span>
+  <span
+    v-if="!element.isTitleRenderedAsString && element.isRequireTextBeforeTitle"
+    :class="element.cssClasses.requiredText"
+    :aria-hidden="true"
+    >{{ element.requiredText }}</span
+  >
+  <span
+    v-if="!element.isTitleRenderedAsString && element.isRequireTextBeforeTitle"
+    >&nbsp;</span
+  >
+  <survey-string
+    v-if="!element.isTitleRenderedAsString"
+    :locString="element.locTitle"
+  />
+  <span
+    v-if="!element.isTitleRenderedAsString && element.isRequireTextAfterTitle"
+    >&nbsp;</span
+  >
+  <span
+    v-if="!element.isTitleRenderedAsString && element.isRequireTextAfterTitle"
+    :class="element.cssClasses.requiredText"
+    :aria-hidden="true"
+    >{{ element.requiredText }}</span
+  >
 </template>
 
 <script lang="ts" setup>
 import type { PanelModel, Question } from "survey-core";
+defineOptions({ inheritAttrs: false });
 defineProps<{
   element: Question | PanelModel;
   css: any;