Implement support for 'itemComponent' property in Vue2 (#7385)

* Refactor vue3 * Work for #7188: implement custom item for radiogroup/checkbox questions in Vue2
surveyjs · Nov 20, 2023 · 9315017 · 9315017
1 parent 7360c48
commit 9315017
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 76 deletions.
diff --git a/packages/survey-vue3-ui/src/Checkbox.vue b/packages/survey-vue3-ui/src/Checkbox.vue
@@ -1,9 +1,5 @@
 <template>
-  <SelectBase
-    :question="question"
-    :input-type="'checkbox'"
-    :show-legend="true"
-  ></SelectBase>
+  <SelectBase :question="question" :show-legend="true"></SelectBase>
 </template>
 <script lang="ts" setup>
 import type { QuestionCheckboxModel } from "survey-core";

diff --git a/packages/survey-vue3-ui/src/Radiogroup.vue b/packages/survey-vue3-ui/src/Radiogroup.vue
@@ -1,5 +1,5 @@
 <template>
-  <SelectBase :question="question" :input-type="'radio'"></SelectBase>
+  <SelectBase :question="question"></SelectBase>
 </template>
 
 <script lang="ts" setup>

diff --git a/packages/survey-vue3-ui/src/SelectBase.vue b/packages/survey-vue3-ui/src/SelectBase.vue
@@ -98,36 +98,21 @@ defineOptions({
 });
 const props = defineProps<{
   question: QuestionRadiogroupModel | QuestionCheckboxModel;
-  inputType: "radio" | "checkbox";
   showLegend?: boolean;
 }>();
 const root = ref(null);
 useQuestion(props, root);
 
-const getDefaultItemComponentName = () =>
-  props.inputType == "radio"
-    ? "survey-radiogroup-item"
-    : "survey-checkbox-item";
-
 const getItemValueComponentName = (item: ItemValue) => {
   return (
     props.question.getItemValueWrapperComponentName(item) ||
-    getDefaultItemComponentName()
+    props.question.itemComponent
   );
 };
 
 const getItemValueComponentData = (item: ItemValue) => {
-  const itemComponentProperty =
-    props.question.getPropertyByName("itemComponent");
-  const isDefaultItemComponent = itemComponentProperty.isDefaultValue(
-    props.question.itemComponent
-  );
-  const itemComponent = isDefaultItemComponent
-    ? getDefaultItemComponentName()
-    : props.question.itemComponent;
-
   return {
-    componentName: itemComponent,
+    componentName: props.question.itemComponent,
     componentData: {
       question: props.question,
       item,

diff --git a/src/vue/checkbox.vue b/src/vue/checkbox.vue
@@ -8,34 +8,31 @@
     :aria-describedby="question.a11y_input_ariaDescribedBy"
   >
     <legend class="sv-hidden">{{question.locTitle.renderedHtml}}</legend>
-    <survey-checkbox-item
-        v-for="(item, index) in question.headItems"
+    <component
+        v-for="item in question.headItems"
         v-if="question.hasHeadItems"
         :key="item.value"
-        :class="question.getItemClass(item)"
+        :is="question.itemComponent"
         :question="question"
         :item="item"
-        :index="'' + index"
-      ></survey-checkbox-item>
-    <survey-checkbox-item
+      ></component>
+    <component
       v-if="!question.hasColumns && !question.blockedRow"
-      v-for="(item, index) in question.bodyItems"
+      v-for="(item) in question.bodyItems"
       :key="item.value"
-      :class="question.getItemClass(item)"
+      :is="question.itemComponent"
       :question="question"
       :item="item"
-      :index="index"
-    ></survey-checkbox-item>
+    ></component>
     <div :class="question.cssClasses.rootRow" v-if="question.blockedRow">
-    <survey-checkbox-item
+    <component
       v-if="!question.hasColumns && question.blockedRow"
       v-for="(item, index) in question.dataChoices"
       :key="item.value"
-      :class="question.getItemClass(item)"
+      :is="question.itemComponent"
       :question="question"
       :item="item"
-      :index="index"
-    ></survey-checkbox-item>
+    ></component>
     </div>
     <div 
       v-if="question.hasColumns"
@@ -47,25 +44,23 @@
       :class="question.getColumnClass()"
       role="presentation"
     >
-      <survey-checkbox-item
-        v-for="(item, index) in column"
+      <component
+        v-for="item in column"
         :key="item.value"
-        :class="question.getItemClass(item)"
+        :is="question.itemComponent"
         :question="question"
         :item="item"
-        :index="'' + colIndex + index"
-      ></survey-checkbox-item>
+      ></component>
     </div>
     </div>
-        <survey-checkbox-item
+        <component
         v-for="(item, index) in question.footItems"
         v-if="question.hasFootItems"
         :key="item.value"
-        :class="question.getItemClass(item)"
+        :is="question.itemComponent"
         :question="question"
         :item="item"
-        :index="'' + index"
-      ></survey-checkbox-item>
+      ></component>
       <survey-other-choice
         v-if="
           question.renderedValue && question.isOtherSelected

diff --git a/src/vue/checkboxitem.vue b/src/vue/checkboxitem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div role="presentation">
+  <div role="presentation" :class="question.getItemClass(item)">
     <label :class="question.getLabelClass(item)">
       <input v-if="item == question.selectAllItem" type="checkbox" role="option" :name="question.name+item.value"
         :value="isAllSelected" v-model="isAllSelected" :id="question.getItemId(item)"
@@ -29,7 +29,6 @@ import { BaseVue } from "./base";
 export class CheckboxItem extends BaseVue {
   @Prop() question: any;
   @Prop() item: ItemValue;
-  @Prop() index: any;
   @Prop() hideLabel: boolean;
   protected getModel(): Base {
     return this.item;

diff --git a/src/vue/matrixcell.vue b/src/vue/matrixcell.vue
@@ -38,19 +38,15 @@
       <survey-radiogroup-item
         v-if="cell.isRadio"
         :key="cell.item.value"
-        :class="cell.question.getItemClass(cell.item)"
         :question="cell.question"
         :item="cell.item"
-        :index="getCellIndex()"
         :hideLabel="true"
       ></survey-radiogroup-item>
       <survey-checkbox-item
         v-if="cell.isCheckbox"
         :key="cell.item.value"
-        :class="cell.question.getItemClass(cell.item)"
         :question="cell.question"
         :item="cell.item"
-        :index="getCellIndex()"
         :hideLabel="true"
       ></survey-checkbox-item>
       <survey-other-choice

diff --git a/src/vue/radiogroup.vue b/src/vue/radiogroup.vue
@@ -7,25 +7,23 @@
     :aria-invalid="question.a11y_input_ariaInvalid"
     :aria-describedby="question.a11y_input_ariaDescribedBy"
   >
-    <survey-radiogroup-item
+    <component
       v-if="!question.hasColumns && !question.blockedRow"
-      v-for="(item, index) in question.bodyItems"
+      v-for="(item) in question.bodyItems"
       :key="item.value"
-      :class="getItemClass(item)"
+      :is="question.itemComponent"
       :question="question"
       :item="item"
-      :index="index"
-    ></survey-radiogroup-item>
+    ></component>
     <div :class="question.cssClasses.rootRow" v-if="question.blockedRow">
-    <survey-radiogroup-item
+    <component
       v-if="!question.hasColumns && question.blockedRow"
-      v-for="(item, index) in question.dataChoices"
+      v-for="(item) in question.dataChoices"
       :key="item.value"
-      :class="question.getItemClass(item)"
+      :is="question.itemComponent"
       :question="question"
       :item="item"
-      :index="index"
-    ></survey-radiogroup-item>
+    ></component>
     </div>
     <div 
       v-if="question.hasColumns"
@@ -36,25 +34,23 @@
       :class="question.getColumnClass()"
       role="presentation"
     >
-      <survey-radiogroup-item
-        v-for="(item, index) in column"
+      <component
+        v-for="item in column"
         :key="item.value"
-        :class="getItemClass(item)"
+        :is="question.itemComponent"
         :question="question"
         :item="item"
-        :index="'' + colIndex + index"
-      ></survey-radiogroup-item>
+      ></component>
     </div>
     </div>
-        <survey-radiogroup-item
+        <component
         v-for="(item, index) in question.footItems"
         v-if="question.hasFootItems"
         :key="item.value"
-        :class="question.getItemClass(item)"
+        :is="question.itemComponent"
         :question="question"
         :item="item"
-        :index="'' + index"
-      ></survey-radiogroup-item>
+      ></component>
       <survey-other-choice
         v-if="
           question.renderedValue && question.isOtherSelected
@@ -85,9 +81,6 @@ export class Radiogroup extends QuestionVue<QuestionRadiogroupModel> {
   get choicesCount() {
     return this.question.visibleChoices.length - 1;
   }
-  getItemClass(item: any) {
-    return this.question.getItemClass(item);
-  }
 }
 Vue.component("survey-radiogroup", Radiogroup);
 export default Radiogroup;

diff --git a/src/vue/radiogroupitem.vue b/src/vue/radiogroupitem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div role="presentation">
+  <div role="presentation" :class="question.getItemClass(item)">
     <label @mousedown="question.onMouseDown()" :class="getLabelClass(item)">
       <input
         type="radio"
@@ -40,7 +40,6 @@ import { BaseVue } from "./base";
 export class RadiogroupItem extends BaseVue {
   @Prop() question: any;
   @Prop() item: ItemValue;
-  @Prop() index: any;
   @Prop() hideLabel: boolean;
   protected getModel(): Base {
     return this.item;