Add defineQuestionComponent function

surveyjs · May 18, 2023 · dcbb539 · dcbb539
1 parent 9b91e47
commit dcbb539
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 86 deletions.
diff --git a/packages/survey-vue-ui/src/Checkbox.vue b/packages/survey-vue-ui/src/Checkbox.vue
@@ -70,29 +70,14 @@
 
 <script lang="ts">
 import { QuestionCheckboxModel } from "survey-core";
-import { defineSurveyComponent } from "./base";
+import { defineQuestionComponent } from "./base";
 
-export default defineSurveyComponent({
+export default defineQuestionComponent({
   // eslint-disable-next-line
   name: "survey-checkbox",
   props: {
     question: QuestionCheckboxModel,
     css: Object,
-  },
-  data: (vm: any) => {
-    return {
-      getModel: () => { return vm.question; }
-    }
-  },
-  mounted() {
-    if (this.question) {
-      this.question.afterRenderQuestionElement(this.$el as HTMLElement);
-    }
-  },
-  unmounted() {
-    if (this.question) {
-      this.question.beforeDestroyQuestionElement(this.$el as HTMLElement);
-    }
   }
 });
 

diff --git a/packages/survey-vue-ui/src/Imagepicker.vue b/packages/survey-vue-ui/src/Imagepicker.vue
@@ -37,22 +37,12 @@ export default defineSurveyComponent({
   data: (vm: any) => {
     return {
       getModel: () => { return vm.question; },
-      getItemClass(item: any) {
-        return vm.question.getItemClass(item);
-      }
-    }
+    };
   },
-  mounted() {
-    if (this.question) {
-      this.question.afterRenderQuestionElement(this.$el as HTMLElement);
-    }
+  methods: {
+    getItemClass(item: any) {
+      return this.question.getItemClass(item);
+    },
   },
-  unmounted() {
-    if (this.question) {
-      this.question.beforeDestroyQuestionElement(this.$el as HTMLElement);
-    }
-  }
 });
-
 </script>
-
diff --git a/packages/survey-vue-ui/src/Radiogroup.vue b/packages/survey-vue-ui/src/Radiogroup.vue
@@ -70,30 +70,15 @@
 
 <script lang="ts">
 import { QuestionRadiogroupModel } from "survey-core";
-import { defineSurveyComponent } from "./base";
+import { defineQuestionComponent } from "./base";
 
-export default defineSurveyComponent({
+export default defineQuestionComponent({
   // eslint-disable-next-line
   name: "survey-radiogroup",
   props: {
     question: QuestionRadiogroupModel,
     css: Object,
   },
-  data: (vm: any) => {
-    return {
-      getModel: () => { return vm.question; },
-    }
-  },
-  mounted() {
-    if (this.question) {
-      this.question.afterRenderQuestionElement(this.$el as HTMLElement);
-    }
-  },
-  unmounted() {
-    if (this.question) {
-      this.question.beforeDestroyQuestionElement(this.$el as HTMLElement);
-    }
-  }
 });
 
 </script>
diff --git a/packages/survey-vue-ui/src/Signaturepad.vue b/packages/survey-vue-ui/src/Signaturepad.vue
@@ -36,32 +36,15 @@
 
 <script lang="ts">
 import { QuestionSignaturePadModel } from "survey-core";
-import { defineSurveyComponent } from "./base";
+import { defineQuestionComponent } from "./base";
 
-export default defineSurveyComponent({
+export default defineQuestionComponent({
   // eslint-disable-next-line
   name: "survey-signaturepad",
   props: {
     question: QuestionSignaturePadModel,
     css: Object,
   },
-  data: (vm: any) => {
-    return {
-      getModel: () => { return vm.question; },
-    }
-  },
-  computed: {
-  },
-  mounted() {
-    if (this.question) {
-      this.question.afterRenderQuestionElement(this.$el as HTMLElement);
-    }
-  },
-  unmounted() {
-    if (this.question) {
-      this.question.beforeDestroyQuestionElement(this.$el as HTMLElement);
-    }
-  }
 });
 
 </script>
diff --git a/packages/survey-vue-ui/src/Text.vue b/packages/survey-vue-ui/src/Text.vue
@@ -11,30 +11,15 @@
 
 <script lang="ts">
 import { QuestionTextModel } from "survey-core";
-import { defineSurveyComponent } from "./base";
+import { defineQuestionComponent } from "./base";
 
-export default defineSurveyComponent({
+export default defineQuestionComponent({
   // eslint-disable-next-line
   name: "survey-text",
   props: {
     question: QuestionTextModel,
     css: Object,
   },
-  data: (vm: any) => {
-    return {
-      getModel: () => { return vm.question; }
-    }
-  },
-  mounted() {
-    if (this.question) {
-      this.question.afterRenderQuestionElement(this.$el as HTMLElement);
-    }
-  },
-  unmounted() {
-    if (this.question) {
-      this.question.beforeDestroyQuestionElement(this.$el as HTMLElement);
-    }
-  }
 });
 
 </script>
diff --git a/packages/survey-vue-ui/src/base.ts b/packages/survey-vue-ui/src/base.ts
@@ -1,4 +1,4 @@
-import { Base } from "survey-core";
+import { Base, Question } from "survey-core";
 import {
   ref,
   defineComponent,
@@ -53,3 +53,38 @@ export function defineSurveyComponent(componentDefinition: ComponentOptions) {
   };
   return defineComponent(componentDefinition);
 }
+
+export function defineQuestionComponent(componentDefinition: ComponentOptions) {
+  componentDefinition.data = (vm: any) => {
+    return {
+      getModel: () => {
+        return vm.question;
+      },
+    };
+  };
+  const mounted = componentDefinition.mounted;
+  componentDefinition.mounted = function () {
+    if (this.question) {
+      this.question.afterRenderQuestionElement(this.$el);
+    }
+    if (mounted) mounted.call(this);
+  };
+  const beforeUnmount = componentDefinition.beforeUnmount;
+  componentDefinition.beforeUnmount = function () {
+    if (this.question) {
+      this.question.beforeDestroyQuestionElement(this.$el);
+    }
+    if (beforeUnmount) beforeUnmount.call(this);
+  };
+  return defineSurveyComponent(componentDefinition);
+}
+
+export function getComponentName(question: Question): string {
+  if (question.customWidget) return "survey-customwidget";
+  if (
+    (question.isDefaultRendering && question.isDefaultRendering()) ||
+    question.isPanel
+  )
+    return "survey-" + question.getTemplate();
+  return question.getComponentName();
+}