Work for surveyjs/survey-creator#4780 - Support Vue 3 in SurveyJS Cre…

…ator - implemented element wrapper (#7238)

* Work for surveyjs/survey-creator#4780 - Support Vue 3 in SurveyJS Creator - implemented element wrapper

* Small refactor

* Fix warnings in Toolbox

* Fix composite question

* Fix question adorner model is created multiple times

* Fix matrix detail panel

* Fix action bar warning

* Implement content wrapper + fix potential warnings

* Implement buttongroup question

* Implement matrix cell wrapper

* Fix panel doesnt render skeleton component

* Refactor action bar item

* Implement wrapper for logo component

* small refactor

* Implement wrapper for panel inside paneldynamic

* Implement wrapper for row component

* Fix matrix cell warnings

* Add watch command

* Fix panel tries to load all elements if collapsed before mount

* Fix action bar's handle click is not working

* Implement wrapper for detail panel

* Fix d&d for matrix rows

* Fix panel's focusin doesnt work

* Fix d&d is not working from list

* Fix disableTabStop is not working

* Implement wrappers for ranking/radiogroup/checkbox/imagepicker items values

* Fix vue3 responsivity doesnt work when reseting item min/max dimensions

* Implement wrappers for matrix single choice

* Fix lazy rendering breaks when row changed

* Fix warnings

* Fix vue f test

* Fix handleClick is false by default (need true)

* Fix advanced header component

* Fix recursive updates in multipletext

---------

Co-authored-by: tsv2013 <tsv2013@noreply.github.com>
Co-authored-by: Dmitry Kuzin <dk981234@gmail.com>

packages/survey-vue3-ui/package.json

@@ -5,6 +5,7 @@
     "dev": "vite",
     "preview": "vite preview",
     "build-only": "vite build",
+    "watch": "vite build --watch",
     "build": "vite build && npm run build:types",
     "build:types": "vue-tsc --project tsconfig.types.json --emitDeclarationOnly",
     "type-check": "vue-tsc --project tsconfig.types.json --noEmit",

packages/survey-vue3-ui/src/BooleanCheckbox.vue

@@ -51,12 +51,12 @@
     </div>
   </div>
 </template>
-
 <script lang="ts" setup>
 import { RendererFactory } from "survey-core";
 import type { IBooleanProps } from "./boolean";
 import { ref } from "vue";
 import { useQuestion } from "./base";
+defineOptions({ inheritAttrs: false });
 const props = defineProps<IBooleanProps & { css?: any }>();
 const root = ref(null);
 useQuestion(props, root);

packages/survey-vue3-ui/src/BooleanRadio.vue

@@ -22,6 +22,7 @@ import { RendererFactory } from "survey-core";
 import { ref } from "vue";
 import { useQuestion } from "./base";
 import type { IBooleanProps } from "./boolean";
+defineOptions({ inheritAttrs: false });
 const root = ref(null);
 const props = defineProps<IBooleanProps>();
 useQuestion(props, root);

packages/survey-vue3-ui/src/BooleanSwitch.vue

@@ -58,6 +58,7 @@
 import { useQuestion } from "./base";
 import { ref } from "vue";
 import type { IBooleanProps } from "./boolean";
+defineOptions({ inheritAttrs: false });
 const props = defineProps<IBooleanProps>();
 const root = ref(null);
 useQuestion(props, root);

packages/survey-vue3-ui/src/Checkbox.vue

@@ -1,89 +1,13 @@
 <template>
-  <fieldset
-    :class="question.getSelectBaseRootCss()"
-    ref="root"
-    :role="question.a11y_input_ariaRole"
-    :aria-required="question.a11y_input_ariaRequired"
-    :aria-label="question.a11y_input_ariaLabel"
-    :aria-labelledby="question.a11y_input_ariaLabelledBy"
-    :aria-invalid="question.a11y_input_ariaInvalid"
-    :aria-describedby="question.a11y_input_ariaDescribedBy"
-  >
-    <legend class="sv-hidden">{{question.locTitle.renderedHtml}}</legend>
-    <template v-if="question.hasHeadItems">
-      <survey-checkbox-item
-        v-for="(item, index) in question.headItems"
-        :key="item.value"
-        :class="question.getItemClass(item)"
-        :question="question"
-        :item="item"
-        :index="'' + index"
-      ></survey-checkbox-item>
-    </template>
-    <template v-if="!question.hasColumns && !question.blockedRow">
-      <survey-checkbox-item
-        v-for="(item, index) in question.bodyItems"
-        :key="item.value"
-        :class="question.getItemClass(item)"
-        :question="question"
-        :item="item"
-        :index="index"
-      ></survey-checkbox-item>
-    </template>
-    <div :class="question.cssClasses.rootRow" v-if="question.blockedRow">
-      <template v-if="!question.hasColumns && question.blockedRow">
-        <survey-checkbox-item
-          v-for="(item, index) in question.dataChoices"
-          :key="item.value"
-          :class="question.getItemClass(item)"
-          :question="question"
-          :item="item"
-          :index="index"
-        ></survey-checkbox-item>
-      </template>
-    </div>
-    <div
-      v-if="question.hasColumns"
-      :class="question.cssClasses.rootMultiColumn"
-    >
-      <div
-        v-for="(column, colIndex) in question.columns"
-        :key="colIndex"
-        :class="question.getColumnClass()"
-        role="presentation"
-      >
-        <survey-checkbox-item
-          v-for="(item, index) in column"
-          :key="item.value"
-          :class="question.getItemClass(item)"
-          :question="question"
-          :item="item"
-          :index="'' + colIndex + index"
-        ></survey-checkbox-item>
-      </div>
-    </div>
-    <template v-if="question.hasFootItems">
-      <survey-checkbox-item
-        v-for="(item, index) in question.footItems"
-        :key="item.value"
-        :class="question.getItemClass(item)"
-        :question="question"
-        :item="item"
-        :index="'' + index"
-      ></survey-checkbox-item>
-    </template>
-    <survey-other-choice
-      v-if="question.renderedValue && question.isOtherSelected"
-      :question="question"
-    />
-  </fieldset>
+  <SelectBase
+    :question="question"
+    :input-type="'checkbox'"
+    :show-legend="true"
+  ></SelectBase>
 </template>
-
 <script lang="ts" setup>
 import type { QuestionCheckboxModel } from "survey-core";
-import { useQuestion } from "./base";
-import { ref } from "vue";
-const props = defineProps<{ question: QuestionCheckboxModel }>();
-const root = ref(null);
-useQuestion(props, root);
+import SelectBase from "./SelectBase.vue";
+defineOptions({ inheritAttrs: false });
+defineProps<{ question: QuestionCheckboxModel }>();
 </script>

packages/survey-vue3-ui/src/CheckboxItem.vue

@@ -1,13 +1,11 @@
 <template>
-  <div role="presentation">
-    <label
-      :class="question.getLabelClass(item)"
-    >
+  <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"
+        role="option"
+        :name="question.name + item.value"
         :value="isAllSelected"
         v-model="isAllSelected"
         :id="question.getItemId(item)"
@@ -16,10 +14,10 @@
       /><input
         v-if="item != question.selectAllItem"
         type="checkbox"
-        role="option" 
-        :name="question.name+item.value"
+        role="option"
+        :name="question.name + item.value"
         :value="item.value"
-        v-model="question.renderedValue"
+        v-model="renderedValue"
         :id="question.getItemId(item)"
         :disabled="!question.getItemEnabled(item)"
         :class="question.cssClasses.itemControl"
@@ -45,10 +43,11 @@ import type { ItemValue, QuestionCheckboxModel } from "survey-core";
 import { useBase } from "./base";
 import { computed } from "vue";
 
+defineOptions({ inheritAttrs: false });
+
 const props = defineProps<{
   question: QuestionCheckboxModel;
   item: ItemValue;
-  index: string | number;
   hideLabel?: boolean;
 }>();
 const isAllSelected = computed({
@@ -61,5 +60,15 @@ const isAllSelected = computed({
   },
 });
 
+useBase(() => props.item);
+
+const renderedValue = computed({
+  get: () => props.question.renderedValue,
+  set: (val) => {
+    const question = props.question;
+    question.renderedValue = val;
+  },
+});
+
 useBase(() => props.item);
 </script>

packages/survey-vue3-ui/src/Comment.vue

@@ -73,6 +73,7 @@
 import type { QuestionCommentModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps<{
   question: QuestionCommentModel;
   css?: object;

packages/survey-vue3-ui/src/Composite.vue

@@ -1,11 +1,12 @@
 <template>
-  <survey-panel ref="root" :question="contentPanel" :css="css" />
+  <survey-panel ref="root" :element="contentPanel" :css="css" />
 </template>
 
 <script lang="ts" setup>
 import { computed, ref } from "vue";
 import type { QuestionCompositeModel } from "survey-core";
 import { useQuestion } from "./base";
+defineOptions({ inheritAttrs: false });
 const props = defineProps<{ question: QuestionCompositeModel; css?: object }>();
 const root = ref(null);
 useQuestion(props, root);

packages/survey-vue3-ui/src/Custom.vue

@@ -11,7 +11,7 @@
 import { computed, ref } from "vue";
 import type { QuestionCustomModel, Question } from "survey-core";
 import { getComponentName as getComponent, useQuestion } from "./base";
-
+defineOptions({ inheritAttrs: false });
 const props = defineProps<{ question: QuestionCustomModel; css?: any }>();
 
 const root = ref(null);

packages/survey-vue3-ui/src/Dropdown.vue

@@ -9,6 +9,7 @@
 import type { QuestionDropdownModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps<{ question: QuestionDropdownModel }>();
 const root = ref(null);
 useQuestion(props, root);

packages/survey-vue3-ui/src/DropdownSelect.vue

@@ -51,6 +51,7 @@
 import { computed, ref } from "vue";
 import { useQuestion } from "./base";
 import type { QuestionDropdownModel } from "survey-core";
+defineOptions({ inheritAttrs: false });
 const props = defineProps<{ question: QuestionDropdownModel }>();
 const root = ref(null);
 useQuestion(props, root);