Refactor: use mixins

surveyjs · May 19, 2023 · f00aeec · f00aeec
1 parent 5339d87
commit f00aeec
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 32 deletions.
diff --git a/packages/survey-vue-ui/src/Checkbox.vue b/packages/survey-vue-ui/src/Checkbox.vue
@@ -70,10 +70,12 @@
 
 <script lang="ts">
 import { QuestionCheckboxModel } from "survey-core";
-import { defineQuestionComponent } from "./base";
+import { QuestionVue } from "./base";
+import { defineComponent } from "vue";
 
-export default defineQuestionComponent({
+export default defineComponent({
   // eslint-disable-next-line
+  mixins: [QuestionVue],
   name: "survey-checkbox",
   props: {
     question: QuestionCheckboxModel,

diff --git a/packages/survey-vue-ui/src/Dropdown.vue b/packages/survey-vue-ui/src/Dropdown.vue
@@ -7,10 +7,12 @@
 
 <script lang="ts">
 import { QuestionDropdownModel } from "survey-core";
-import { defineQuestionComponent } from "./base";
+import { QuestionVue } from "./base";
+import { defineComponent } from "vue";
 
-export default defineQuestionComponent({
+export default defineComponent({
   // eslint-disable-next-line
+  mixins: [QuestionVue],
   name: "survey-dropdown",
   props: {
     question: QuestionDropdownModel,

diff --git a/packages/survey-vue-ui/src/Radiogroup.vue b/packages/survey-vue-ui/src/Radiogroup.vue
@@ -70,10 +70,12 @@
 
 <script lang="ts">
 import { QuestionRadiogroupModel } from "survey-core";
-import { defineQuestionComponent } from "./base";
+import { QuestionVue } from "./base";
+import { defineComponent } from "vue";
 
-export default defineQuestionComponent({
+export default defineComponent({
   // eslint-disable-next-line
+  mixins: [QuestionVue],
   name: "survey-radiogroup",
   props: {
     question: QuestionRadiogroupModel,

diff --git a/packages/survey-vue-ui/src/Signaturepad.vue b/packages/survey-vue-ui/src/Signaturepad.vue
@@ -36,9 +36,11 @@
 
 <script lang="ts">
 import { QuestionSignaturePadModel } from "survey-core";
-import { defineQuestionComponent } from "./base";
+import { QuestionVue } from "./base";
+import { defineComponent } from "vue";
 
-export default defineQuestionComponent({
+export default defineComponent({
+  mixins: [QuestionVue],
   // eslint-disable-next-line
   name: "survey-signaturepad",
   props: {

diff --git a/packages/survey-vue-ui/src/Text.vue b/packages/survey-vue-ui/src/Text.vue
@@ -11,9 +11,11 @@
 
 <script lang="ts">
 import { QuestionTextModel } from "survey-core";
-import { defineQuestionComponent } from "./base";
+import { QuestionVue } from "./base";
+import { defineComponent } from "vue";
 
-export default defineQuestionComponent({
+export default defineComponent({
+  mixins: [QuestionVue],
   // eslint-disable-next-line
   name: "survey-text",
   props: {

diff --git a/packages/survey-vue-ui/src/base.ts b/packages/survey-vue-ui/src/base.ts
@@ -41,42 +41,45 @@ function makeReactive(surveyElement: Base) {
 }
 // by convention, composable function names start with "use"
 
-export function defineSurveyComponent(componentDefinition: ComponentOptions) {
-  const mounted = componentDefinition.mounted;
-  componentDefinition.mounted = function () {
-    if (typeof this.getModel === "function") {
+export const BaseVue: ComponentOptions = {
+  mounted: function () {
+    if (this.getModel == "function") {
       makeReactive(this.getModel());
     }
-    if (mounted) {
-      mounted.call(this);
-    }
-  };
-  return defineComponent(componentDefinition);
-}
-
-export function defineQuestionComponent(componentDefinition: ComponentOptions) {
-  componentDefinition.data = (vm: any) => {
+  },
+};
+export const QuestionVue: ComponentOptions = {
+  mixins: [BaseVue],
+  data(vm: any) {
     return {
       getModel: () => {
         return vm.question;
       },
     };
-  };
-  const mounted = componentDefinition.mounted;
-  componentDefinition.mounted = function () {
+  },
+  mounted() {
     if (this.question) {
       this.question.afterRenderQuestionElement(this.$el);
     }
-    if (mounted) mounted.call(this);
-  };
-  const beforeUnmount = componentDefinition.beforeUnmount;
-  componentDefinition.beforeUnmount = function () {
+  },
+  beforeUnmount() {
     if (this.question) {
       this.question.beforeDestroyQuestionElement(this.$el);
     }
-    if (beforeUnmount) beforeUnmount.call(this);
+  },
+};
+
+export function defineSurveyComponent(componentDefinition: ComponentOptions) {
+  const mounted = componentDefinition.mounted;
+  componentDefinition.mounted = function () {
+    if (typeof this.getModel === "function") {
+      makeReactive(this.getModel());
+    }
+    if (mounted) {
+      mounted.call(this);
+    }
   };
-  return defineSurveyComponent(componentDefinition);
+  return defineComponent(componentDefinition);
 }
 
 export function getComponentName(question: Question): string {