Work for #6758: implement multipletext errors in Vue

surveyjs · Aug 30, 2023 · 501d68c · 501d68c
1 parent 30e8c18
commit 501d68c
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 52 deletions.
diff --git a/packages/survey-vue3-ui/src/Multipletext.vue b/packages/survey-vue3-ui/src/Multipletext.vue
@@ -1,15 +1,23 @@
 <template>
   <table :class="question.cssClasses.root" ref="root">
     <tbody>
-      <tr
-        v-for="(row, rowindex) in question.getRows()"
-        :key="question.inputId + 'rowkey' + rowindex"
-        :class="question.cssClasses.row"
+      <template
+        v-for="(row, rowIndex) in question.getRows()"
+        :key="question.inputId + 'rowkey' + rowIndex"
       >
-          <td v-for="item in row" :key="'item' + item.editor.id" :class="question.cssClasses.cell">
-            <survey-multipletext-item :question="question" :item="item"></survey-multipletext-item>
+        <tr :class="question.cssClasses.row" v-if="row.isVisible">
+          <td
+            v-for="cell in row.cells"
+            :key="'item' + cell.item.editor.id"
+            :class="cell.className"
+          >
+            <survey-multipletext-item
+              :question="question"
+              :cell="cell"
+            ></survey-multipletext-item>
           </td>
-      </tr>
+        </tr>
+      </template>
     </tbody>
   </table>
 </template>

diff --git a/packages/survey-vue3-ui/src/MultipletextItem.vue b/packages/survey-vue3-ui/src/MultipletextItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <label :class="question.getItemLabelCss(item)">
+  <label v-if="!cell.isErrorsCell" :class="question.getItemLabelCss(item)">
     <span :class="question.getItemTitleCss()">
       <span
         v-if="
@@ -10,8 +10,10 @@
         >{{ item.editor.requiredText }}</span
       >
       <survey-string :locString="item.locTitle" />
+      <span v-if="item.editor.isRequireTextAfterTitle">&nbsp;</span>
       <span
         v-if="item.editor.isRequireTextAfterTitle"
+        aria-hidden="true"
         :class="question.cssClasses.requiredText"
         >{{ item.editor.requiredText }}</span
       >
@@ -21,36 +23,28 @@
       :class="question.getItemCss()"
       v-on:focusin="item.focusIn()"
     >
-      <survey-errors
-        v-if="item.editor.showErrorOnTop"
-        :element="item.editor"
-        :location="'top'"
-      />
       <component :is="getComponentName(item.editor)" :question="item.editor" />
-      <survey-errors
-        v-if="item.editor.showErrorOnBottom"
-        :element="item.editor"
-        :location="'bottom'"
-      />
     </div>
   </label>
+  <survey-errors v-else :element="item.editor" />
 </template>
 
 <script lang="ts" setup>
 import type {
   Question,
-  MultipleTextItemModel,
   QuestionMultipleTextModel,
+  MultipleTextCell,
 } from "survey-core";
 import { getComponentName as getComponent, useBase } from "./base";
+import { computed } from "vue";
 
 const props = defineProps<{
   question: QuestionMultipleTextModel;
-  item: MultipleTextItemModel;
+  cell: MultipleTextCell;
 }>();
 const getComponentName = (question: Question) => {
   return getComponent(question);
 };
-
-useBase(() => props.item.editor);
+useBase(() => props.cell.item.editor);
+const item = computed(() => props.cell.item);
 </script>
diff --git a/src/vue/multipletext.vue b/src/vue/multipletext.vue
@@ -1,18 +1,22 @@
 <template>
-
   <table :class="question.cssClasses.root">
     <tbody>
-      <tr
-        v-for="(row, rowindex) in question.getRows()"
-        :key="question.inputId + 'rowkey' + rowindex"
-        :class="question.cssClasses.row"
+      <template
+        v-for="(row, rowIndex) in question.getRows()"
       >
-        <template v-for="item in row">
-          <td :key="'item' + item.editor.id" :class="question.cssClasses.cell">
-            <survey-multipletext-item :question="question" :item="item"></survey-multipletext-item>
+        <tr :class="question.cssClasses.row" v-if="row.isVisible" :key="question.inputId + 'rowkey' + rowIndex">
+          <td
+            v-for="cell in row.cells"
+            :key="'item' + cell.item.editor.id"
+            :class="cell.className"
+          >
+            <survey-multipletext-item
+              :question="question"
+              :cell="cell"
+            ></survey-multipletext-item>
           </td>
-        </template>
-      </tr>
+        </tr>
+      </template>
     </tbody>
   </table>
 </template>

diff --git a/src/vue/multipletextitem.vue b/src/vue/multipletextitem.vue
@@ -1,5 +1,5 @@
 <template>
-  <label :class="question.getItemLabelCss(item)">
+   <label v-if="!cell.isErrorsCell" :class="question.getItemLabelCss(item)">
     <span :class="question.getItemTitleCss()">
       <span
         v-if="
@@ -10,38 +10,31 @@
         >{{ item.editor.requiredText }}</span
       >
       <survey-string :locString="item.locTitle" />
+      <span v-if="item.editor.isRequireTextAfterTitle">&nbsp;</span>
       <span
         v-if="item.editor.isRequireTextAfterTitle"
+        aria-hidden="true"
         :class="question.cssClasses.requiredText"
         >{{ item.editor.requiredText }}</span
       >
     </span>
-    <div :key="item.editor.id" :class="question.getItemCss()" v-on:focusin="item.focusIn()">
-      <survey-errors
-        v-if="item.editor.showErrorOnTop"
-        :element="item.editor"
-        :location="'top'"
-      />
-      <component
-        :is="getComponentName(item.editor)"
-        :question="item.editor"
-      />
-      <survey-errors
-        v-if="item.editor.showErrorOnBottom"
-        :element="item.editor"
-        :location="'bottom'"
-      />
+    <div
+      :key="item.editor.id"
+      :class="question.getItemCss()"
+      v-on:focusin="item.focusIn()"
+    >
+      <component :is="getComponentName(item.editor)" :question="item.editor" />
     </div>
   </label>
+  <survey-errors v-else :element="item.editor" />
 </template>
 
 <script lang="ts">
 
 import Vue from "vue";
 import { Component, Prop } from "vue-property-decorator";
 import { default as QuestionVue } from "./question";
-import { MultipleTextItemModel, Question } from "survey-core";
-import { QuestionMultipleTextModel } from "survey-core";
+import { QuestionMultipleTextModel, Question, MultipleTextCell } from "survey-core";
 import BaseVue from "./base";
 import { getComponentName } from "./question";
 
@@ -50,10 +43,13 @@ export class MultipleTextItem extends BaseVue {
   @Prop()
   question: QuestionMultipleTextModel;
   @Prop()
-  item: MultipleTextItemModel
+  cell: MultipleTextCell;
 
   getModel() {
-    return this.item.editor;
+    return this.cell.item.editor;
+  }
+  public get item() {
+    return this.cell.item;
   }
   getComponentName(question: Question) {
     return getComponentName(question);