From 59660ae3ef586b219345790e39795ad69e9723f6 Mon Sep 17 00:00:00 2001
From: tsv2013 <tsv2013@noreply.github.com>
Date: Thu, 26 Oct 2023 17:17:27 +0300
Subject: [PATCH 01/34] Work for
 https://github.com/surveyjs/survey-creator/issues/4780 - Support Vue 3 in
 SurveyJS Creator - implemented element wrapper

---
 packages/survey-vue3-ui/src/Element.vue       |  2 +-
 packages/survey-vue3-ui/src/Panel.vue         | 48 +++++++--------
 packages/survey-vue3-ui/src/Row.vue           | 58 ++++++++++++++-----
 .../survey-vue3-ui/src/TemplateRenderer.vue   | 23 ++++++++
 packages/survey-vue3-ui/src/index.ts          |  4 ++
 5 files changed, 94 insertions(+), 41 deletions(-)
 create mode 100644 packages/survey-vue3-ui/src/TemplateRenderer.vue

diff --git a/packages/survey-vue3-ui/src/Element.vue b/packages/survey-vue3-ui/src/Element.vue
index 2693b6028f..4fcb957e02 100644
--- a/packages/survey-vue3-ui/src/Element.vue
+++ b/packages/survey-vue3-ui/src/Element.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="!element.isPanel ? (element as Question).getRootCss() : null"
+    :class="!element.isPanel ? (element as Question).getRootCss() : css"
     ref="root"
     v-if="row.isNeedRender"
     v-on:focusin="element.focusIn()"
diff --git a/packages/survey-vue3-ui/src/Panel.vue b/packages/survey-vue3-ui/src/Panel.vue
index 238fc04141..a5abb6c2c7 100644
--- a/packages/survey-vue3-ui/src/Panel.vue
+++ b/packages/survey-vue3-ui/src/Panel.vue
@@ -1,34 +1,34 @@
 <template>
   <div
-    v-if="question.isVisible"
-    :class="question.getContainerCss()"
-    :id="question.id"
+    v-if="element.isVisible"
+    :class="element.getContainerCss()"
+    :id="element.id"
     ref="root"
   >
-    <survey-errors :element="question" v-if="question.showErrorsAbovePanel" />
+    <survey-errors :element="element" v-if="element.showErrorsAbovePanel" />
     <survey-element-header
-      v-if="question.hasTitle || question.hasDescription"
-      :element="question"
+      v-if="element.hasTitle || element.hasDescription"
+      :element="element"
       :css="css"
     ></survey-element-header>
-    <survey-errors :element="question" v-if="!question.showErrorsAbovePanel" />
+    <survey-errors :element="element" v-if="!element.showErrorsAbovePanel" />
     <div
-      :id="question.contentId"
-      :style="{ paddingLeft: question.innerPaddingLeft }"
+      :id="element.contentId"
+      :style="{ paddingLeft: element.innerPaddingLeft }"
       v-if="!isCollapsed"
-      :class="question.cssClasses.panel.content"
+      :class="element.cssClasses.panel.content"
     >
       <template v-for="(row, index) in rows">
         <survey-row
           v-if="row.visible"
-          :key="question.id + '_' + index"
+          :key="element.id + '_' + index"
           :row="row"
           :survey="survey"
           :css="css"
         >
         </survey-row>
       </template>
-      <sv-action-bar :model="question.getFooterToolbar()"></sv-action-bar>
+      <sv-action-bar :model="element.getFooterToolbar()"></sv-action-bar>
     </div>
   </div>
 </template>
@@ -39,30 +39,30 @@ import { ref, computed, onMounted, onUnmounted } from "vue";
 import { useBase } from "./base";
 
 const props = defineProps<{
-  question: PanelModel;
+  element: PanelModel;
   isEditMode?: boolean;
   css?: any;
 }>();
 const isCollapsedValue = ref(false);
 const root = ref<HTMLElement>(null as any);
-const rows = computed(() => props.question.rows);
-const survey = computed(() => props.question.survey);
+const rows = computed(() => props.element.rows);
+const survey = computed(() => props.element.survey);
 const isCollapsed = computed(() => isCollapsedValue.value);
 
-useBase(() => props.question);
+useBase(() => props.element);
 
 onMounted(() => {
-  if (props.question.survey) {
-    props.question.survey.afterRenderPanel(props.question, root.value);
+  if (props.element.survey) {
+    props.element.survey.afterRenderPanel(props.element, root.value);
   }
-  isCollapsedValue.value = props.question.isCollapsed;
-  const question = props.question;
-  question.stateChangedCallback = () => {
-    isCollapsedValue.value = props.question.isCollapsed;
+  isCollapsedValue.value = props.element.isCollapsed;
+  const element = props.element;
+  element.stateChangedCallback = () => {
+    isCollapsedValue.value = props.element.isCollapsed;
   };
 });
 onUnmounted(() => {
-  const question = props.question;
-  question.stateChangedCallback = null as any;
+  const element = props.element;
+  element.stateChangedCallback = null as any;
 });
 </script>
diff --git a/packages/survey-vue3-ui/src/Row.vue b/packages/survey-vue3-ui/src/Row.vue
index c185362435..90ec4fe8df 100644
--- a/packages/survey-vue3-ui/src/Row.vue
+++ b/packages/survey-vue3-ui/src/Row.vue
@@ -1,23 +1,11 @@
 <template>
   <div :class="row.getRowCss()" ref="root">
     <div v-for="element in elements" :style="element.rootStyle">
-      <survey-element
-        v-if="!element.isPanel"
+      <component
         :key="element.id"
-        :element="element"
-        :survey="survey"
-        :css="css"
-        :row="row"
-        :style="element.getRootStyle()"
-      >
-      </survey-element>
-      <survey-panel
-        v-if="element.isPanel"
-        :key="element.id"
-        :question="element"
-        :css="css"
-      >
-      </survey-panel>
+        :is="getComponentName(element as any)"
+        v-bind="getComponentData(element as Question)"
+      />
     </div>
   </div>
 </template>
@@ -43,6 +31,44 @@ const elements = computed(
 );
 const root = ref<HTMLElement>();
 
+const getElementComponentName = (element: SurveyElement) => {
+  return element.isPanel ? "survey-panel": "survey-element";
+}
+const getComponentName = (element: SurveyElement) => {
+  const survey = element.survey as SurveyModel;
+  if(!!survey) {
+    const name = survey.getElementWrapperComponentName(element as any);
+    if(!!name) {
+      return name;
+    }
+  }
+  return getElementComponentName(element);
+}
+const getRootStyle = (element: SurveyElement) => {
+  if(!!element.cssClasses) {
+    return element.rootStyle;
+  } else {
+    return {};
+  }
+}
+const getComponentData = (element: SurveyElement) => {
+  const survey = element.survey as SurveyModel;
+  let data: any;
+  if(!!survey) {
+    data = survey.getElementWrapperComponentData(element as any);
+  }
+  return {
+    componentName: getElementComponentName(element),
+    componentData: {
+      element: element,
+      survey: survey,
+      row: props.row,
+      css: element.isPanel ? props.css : element.getRootStyle(),
+      data: data
+    }
+  };
+}
+
 useBase(() => props.row);
 
 onMounted(() => {
diff --git a/packages/survey-vue3-ui/src/TemplateRenderer.vue b/packages/survey-vue3-ui/src/TemplateRenderer.vue
new file mode 100644
index 0000000000..0768e7dbb6
--- /dev/null
+++ b/packages/survey-vue3-ui/src/TemplateRenderer.vue
@@ -0,0 +1,23 @@
+<template>
+  <component
+    :is="getComponentName()"
+    v-bind="getComponentData()"
+  />
+</template>
+
+<script lang="ts" setup>
+import { useBase } from "./base";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+
+const props = defineProps<{
+  componentName: string;
+  componentData: any;
+}>();
+
+const getComponentName = () => {
+  return props.componentName;
+};
+const getComponentData = () => {
+  return props.componentData;
+};
+</script>
diff --git a/packages/survey-vue3-ui/src/index.ts b/packages/survey-vue3-ui/src/index.ts
index 0b311a9533..16fb5d2bee 100644
--- a/packages/survey-vue3-ui/src/index.ts
+++ b/packages/survey-vue3-ui/src/index.ts
@@ -106,6 +106,8 @@ import Header from "./components/header/Header.vue";
 import HeaderCell from "./components/header/HeaderCell.vue";
 import HeaderMobile from "./components/header/HeaderMobile.vue";
 
+import TemplateRenderer from "./TemplateRenderer.vue";
+
 import {
   SurveyModel,
   doKey2ClickBlur,
@@ -244,6 +246,8 @@ function registerComponents(app: App) {
   app.component("sv-header-cell", HeaderCell);
   app.component("sv-header-mobile", HeaderMobile);
 
+  app.component("sv-template-renderer", TemplateRenderer);
+
   app.directive("key2click", {
     // When the bound element is inserted into the DOM...
     mounted: function (el: HTMLElement, binding: any) {

From 88090730b41fb46cef72be1003b7bb2c1ff1b293 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Thu, 26 Oct 2023 19:34:29 +0400
Subject: [PATCH 02/34] Small refactor

---
 packages/survey-vue3-ui/src/Panel.vue         |  5 ++
 packages/survey-vue3-ui/src/PanelDynamic.vue  |  2 +-
 .../src/{Element.vue => Question.vue}         | 70 +++++++++----------
 packages/survey-vue3-ui/src/Row.vue           | 37 +++++-----
 .../survey-vue3-ui/src/TemplateRenderer.vue   |  8 +--
 packages/survey-vue3-ui/src/index.ts          |  4 +-
 6 files changed, 64 insertions(+), 62 deletions(-)
 rename packages/survey-vue3-ui/src/{Element.vue => Question.vue} (54%)

diff --git a/packages/survey-vue3-ui/src/Panel.vue b/packages/survey-vue3-ui/src/Panel.vue
index a5abb6c2c7..a51ed832c6 100644
--- a/packages/survey-vue3-ui/src/Panel.vue
+++ b/packages/survey-vue3-ui/src/Panel.vue
@@ -33,6 +33,11 @@
   </div>
 </template>
 
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
 <script lang="ts" setup>
 import type { PanelModel } from "survey-core";
 import { ref, computed, onMounted, onUnmounted } from "vue";
diff --git a/packages/survey-vue3-ui/src/PanelDynamic.vue b/packages/survey-vue3-ui/src/PanelDynamic.vue
index c17fa06bd3..0a4ce6e525 100644
--- a/packages/survey-vue3-ui/src/PanelDynamic.vue
+++ b/packages/survey-vue3-ui/src/PanelDynamic.vue
@@ -29,7 +29,7 @@
     />
     <template v-for="(panel, index) in renderedPanels" :key="panel.id">
       <div :class="question.getPanelWrapperCss()">
-        <survey-panel :question="panel" :css="css" />
+        <survey-panel :element="panel" :css="css" />
         <sv-paneldynamic-remove-btn
           v-if="
             question.panelRemoveButtonLocation === 'right' &&
diff --git a/packages/survey-vue3-ui/src/Element.vue b/packages/survey-vue3-ui/src/Question.vue
similarity index 54%
rename from packages/survey-vue3-ui/src/Element.vue
rename to packages/survey-vue3-ui/src/Question.vue
index 4fcb957e02..dd3afde92b 100644
--- a/packages/survey-vue3-ui/src/Element.vue
+++ b/packages/survey-vue3-ui/src/Question.vue
@@ -1,34 +1,35 @@
 <template>
   <div
-    :class="!element.isPanel ? (element as Question).getRootCss() : css"
+    :class="element.getRootCss()"
+    :style="getRootStyle()"
     ref="root"
     v-if="row.isNeedRender"
     v-on:focusin="element.focusIn()"
     :id="element.id"
-    :role="(element as Question).ariaRole"
-    :aria-required="(element as Question).ariaRequired"
-    :aria-invalid="(element as Question).ariaInvalid"
-    :aria-labelledby="(element as Question).ariaLabelledBy"
+    :role="element.ariaRole"
+    :aria-required="element.ariaRequired"
+    :aria-invalid="element.ariaInvalid"
+    :aria-labelledby="element.ariaLabelledBy"
     :aria-expanded="
-      (element as Question).ariaExpanded === null
+      element.ariaExpanded === null
         ? undefined
-        : (element as Question).ariaExpanded === 'true'
+        : element.ariaExpanded === 'true'
     "
     :data-name="element.name"
   >
     <survey-errors
-      v-if="!element.isPanel && (element as Question).showErrorsAboveQuestion"
+      v-if="element.showErrorsAboveQuestion"
       :element="element"
       :location="'top'"
     />
     <survey-element-header
-      v-if="!element.isPanel && (element as Question).hasTitleOnLeftTop"
+      v-if="element.hasTitleOnLeftTop"
       :element="element"
       :css="css"
     />
     <div
-      :class="getContentClass((element as Question)) || undefined"
-      v-show="element.isPanel || !element.isCollapsed"
+      :class="getContentClass(element) || undefined"
+      v-show="!element.isCollapsed"
       role="presentation"
     >
       <survey-errors
@@ -37,16 +38,13 @@
         :location="'top'"
       />
       <component
-        :is="getComponentName((element as Question))"
-        v-if="element.isPanel || !element.isCollapsed"
+        :is="getComponentName(element)"
+        v-if="!element.isCollapsed"
         :question="element"
       />
-      <div
-        v-if="(element as any).hasComment"
-        :class="(element as Question).getCommentAreaCss()"
-      >
+      <div v-if="element.hasComment" :class="element.getCommentAreaCss()">
         <div>
-          <survey-string :locString="(element as Question).locCommentText" />
+          <survey-string :locString="element.locCommentText" />
         </div>
         <survey-question-comment
           :commentClass="css.comment"
@@ -59,19 +57,19 @@
         :location="'bottom'"
       />
       <div
-        v-if="!element.isPanel && (element as Question).hasDescriptionUnderInput"
+        v-if="element.hasDescriptionUnderInput"
         :class="element.cssClasses.descriptionUnderInput"
       >
         <survey-string :locString="element.locDescription" />
       </div>
     </div>
     <survey-element-header
-      v-if="!element.isPanel && (element as Question).hasTitleOnBottom"
+      v-if="element.hasTitleOnBottom"
       :element="element"
       :css="css"
     />
     <survey-errors
-      v-if="!element.isPanel && (element as Question).showErrorsBelowQuestion"
+      v-if="element.showErrorsBelowQuestion"
       :element="element"
       :location="'bottom'"
     />
@@ -85,35 +83,34 @@
   ></component>
 </template>
 
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
+
 <script lang="ts" setup>
-import type {
-  SurveyModel,
-  Question,
-  QuestionRowModel,
-  PanelModel,
-} from "survey-core";
+import type { SurveyModel, Question, QuestionRowModel } from "survey-core";
 import { useBase } from "./base";
-import { computed, onMounted, onUnmounted, ref, watch } from "vue";
+import { computed, onUnmounted, ref, watch } from "vue";
 
 const props = defineProps<{
   survey: SurveyModel;
-  element: Question | PanelModel;
+  element: Question;
   row: QuestionRowModel;
   css?: any;
 }>();
 const root = ref<HTMLElement>(null as any);
 const hasErrorsOnTop = computed(() => {
-  return !props.element.isPanel && (props.element as Question).showErrorOnTop;
+  return props.element.showErrorOnTop;
 });
 const hasErrorsOnBottom = computed(() => {
-  return (
-    !props.element.isPanel && (props.element as Question).showErrorOnBottom
-  );
+  return props.element.showErrorOnBottom;
 });
 
 const getComponentName = (element: Question) => {
   if (element.customWidget) return "survey-customwidget";
-  if (element.getType() === "panel" || element.isDefaultRendering()) {
+  if (element.isDefaultRendering()) {
     return "survey-" + element.getTemplate();
   }
   return element.getComponentName();
@@ -121,12 +118,13 @@ const getComponentName = (element: Question) => {
 const getContentClass = (element: Question) => {
   return element.cssContent;
 };
+const getRootStyle: () => any = () => props.element.getRootStyle();
 
 useBase(() => props.element);
 
 const afterRender = () => {
-  if (!props.element.isPanel && root.value) {
-    (props.element as Question).afterRender(root.value as HTMLElement);
+  if (root.value) {
+    props.element.afterRender(root.value as HTMLElement);
   }
 };
 const stopWatch = watch(
diff --git a/packages/survey-vue3-ui/src/Row.vue b/packages/survey-vue3-ui/src/Row.vue
index 90ec4fe8df..9a12719a95 100644
--- a/packages/survey-vue3-ui/src/Row.vue
+++ b/packages/survey-vue3-ui/src/Row.vue
@@ -1,10 +1,13 @@
 <template>
   <div :class="row.getRowCss()" ref="root">
-    <div v-for="element in elements" :style="element.rootStyle">
+    <div
+      v-for="element in elements"
+      :style="getRootStyle(element)"
+      :key="element.id"
+    >
       <component
-        :key="element.id"
-        :is="getComponentName(element as any)"
-        v-bind="getComponentData(element as Question)"
+        :is="getComponentName(element)"
+        v-bind="getComponentData(element)"
       />
     </div>
   </div>
@@ -32,29 +35,31 @@ const elements = computed(
 const root = ref<HTMLElement>();
 
 const getElementComponentName = (element: SurveyElement) => {
-  return element.isPanel ? "survey-panel": "survey-element";
-}
+  return element.isPanel ? "survey-panel" : "survey-question";
+};
 const getComponentName = (element: SurveyElement) => {
   const survey = element.survey as SurveyModel;
-  if(!!survey) {
+  if (survey) {
     const name = survey.getElementWrapperComponentName(element as any);
-    if(!!name) {
+    if (name) {
       return name;
     }
   }
   return getElementComponentName(element);
-}
-const getRootStyle = (element: SurveyElement) => {
-  if(!!element.cssClasses) {
+};
+const getRootStyle: (element: SurveyElement) => any = (
+  element: SurveyElement
+) => {
+  if (element.cssClasses) {
     return element.rootStyle;
   } else {
     return {};
   }
-}
+};
 const getComponentData = (element: SurveyElement) => {
   const survey = element.survey as SurveyModel;
   let data: any;
-  if(!!survey) {
+  if (survey) {
     data = survey.getElementWrapperComponentData(element as any);
   }
   return {
@@ -64,10 +69,10 @@ const getComponentData = (element: SurveyElement) => {
       survey: survey,
       row: props.row,
       css: element.isPanel ? props.css : element.getRootStyle(),
-      data: data
-    }
+      data: data,
+    },
   };
-}
+};
 
 useBase(() => props.row);
 
diff --git a/packages/survey-vue3-ui/src/TemplateRenderer.vue b/packages/survey-vue3-ui/src/TemplateRenderer.vue
index 0768e7dbb6..70226070b0 100644
--- a/packages/survey-vue3-ui/src/TemplateRenderer.vue
+++ b/packages/survey-vue3-ui/src/TemplateRenderer.vue
@@ -1,14 +1,8 @@
 <template>
-  <component
-    :is="getComponentName()"
-    v-bind="getComponentData()"
-  />
+  <component :is="getComponentName()" v-bind="getComponentData()" />
 </template>
 
 <script lang="ts" setup>
-import { useBase } from "./base";
-import { computed, onMounted, onUnmounted, ref, watch } from "vue";
-
 const props = defineProps<{
   componentName: string;
   componentData: any;
diff --git a/packages/survey-vue3-ui/src/index.ts b/packages/survey-vue3-ui/src/index.ts
index 16fb5d2bee..352a79670f 100644
--- a/packages/survey-vue3-ui/src/index.ts
+++ b/packages/survey-vue3-ui/src/index.ts
@@ -1,7 +1,7 @@
 import Page from "./Page.vue";
 import HeaderBasic from "./Header.vue";
 import Row from "./Row.vue";
-import Element from "./Element.vue";
+import Question from "./Question.vue";
 import Panel from "./Panel.vue";
 import ElementHeader from "./ElementHeader.vue";
 import String from "./String.vue";
@@ -133,7 +133,7 @@ function registerComponents(app: App) {
   app.component("survey-header", HeaderBasic);
   app.component("survey-page", Page);
   app.component("survey-row", Row);
-  app.component("survey-element", Element);
+  app.component("survey-question", Question);
   app.component("survey-panel", Panel);
   app.component("survey-element-header", ElementHeader);
   app.component("survey-string", String);

From 3ed18823dd72af4bfb835f0745d440e86fe3a498 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Thu, 26 Oct 2023 19:44:26 +0400
Subject: [PATCH 03/34] Fix warnings in Toolbox

---
 .../src/components/action-bar/ActionBarItem.vue             | 6 +++++-
 .../src/components/action-bar/ActionBarItemDropdown.vue     | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/survey-vue3-ui/src/components/action-bar/ActionBarItem.vue b/packages/survey-vue3-ui/src/components/action-bar/ActionBarItem.vue
index bf0cc69ea8..efe49bbef0 100644
--- a/packages/survey-vue3-ui/src/components/action-bar/ActionBarItem.vue
+++ b/packages/survey-vue3-ui/src/components/action-bar/ActionBarItem.vue
@@ -32,7 +32,11 @@
     }}</span>
   </button>
 </template>
-
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
 <script lang="ts" setup>
 import { useBase } from "@/base";
 import type { Action } from "survey-core";
diff --git a/packages/survey-vue3-ui/src/components/action-bar/ActionBarItemDropdown.vue b/packages/survey-vue3-ui/src/components/action-bar/ActionBarItemDropdown.vue
index c5cb92e9ff..02f4ee0fa8 100644
--- a/packages/survey-vue3-ui/src/components/action-bar/ActionBarItemDropdown.vue
+++ b/packages/survey-vue3-ui/src/components/action-bar/ActionBarItemDropdown.vue
@@ -31,7 +31,11 @@
   </button>
   <sv-popup :model="item.popupModel" :getTarget="getTarget"></sv-popup>
 </template>
-
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
 <script lang="ts" setup>
 import { useBase } from "@/base";
 import {

From 6a0ac4693261edc80ba8f26999a6d83d6410df42 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Thu, 26 Oct 2023 20:23:03 +0400
Subject: [PATCH 04/34] Fix composite question

---
 packages/survey-vue3-ui/src/Composite.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/survey-vue3-ui/src/Composite.vue b/packages/survey-vue3-ui/src/Composite.vue
index db366f930d..cdf7edab75 100644
--- a/packages/survey-vue3-ui/src/Composite.vue
+++ b/packages/survey-vue3-ui/src/Composite.vue
@@ -1,5 +1,5 @@
 <template>
-  <survey-panel ref="root" :question="contentPanel" :css="css" />
+  <survey-panel ref="root" :element="contentPanel" :css="css" />
 </template>
 
 <script lang="ts" setup>

From 6aed6176a5e61bc67d8ad70c1da4f8cb8513e4b3 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Thu, 26 Oct 2023 21:33:07 +0400
Subject: [PATCH 05/34] Fix question adorner model is created multiple times

---
 packages/survey-vue3-ui/src/Element.vue | 56 +++++++++++++++++++++++++
 packages/survey-vue3-ui/src/Row.vue     | 53 +++--------------------
 packages/survey-vue3-ui/src/index.ts    |  4 ++
 3 files changed, 65 insertions(+), 48 deletions(-)
 create mode 100644 packages/survey-vue3-ui/src/Element.vue

diff --git a/packages/survey-vue3-ui/src/Element.vue b/packages/survey-vue3-ui/src/Element.vue
new file mode 100644
index 0000000000..e5ecdf360c
--- /dev/null
+++ b/packages/survey-vue3-ui/src/Element.vue
@@ -0,0 +1,56 @@
+<template>
+  <div :style="getRootStyle(element)">
+    <component :is="componentName" v-bind="componentData" />
+  </div>
+</template>
+<script lang="ts" setup>
+import type { QuestionRowModel, SurveyElement, SurveyModel } from "survey-core";
+import { computed } from "vue";
+
+const props = defineProps<{
+  element: SurveyElement;
+  row: QuestionRowModel;
+  css: any;
+}>();
+
+const getElementComponentName = (element: SurveyElement) => {
+  return element.isPanel ? "survey-panel" : "survey-question";
+};
+const componentName = computed(() => {
+  const survey = props.element.survey as SurveyModel;
+  if (survey) {
+    const name = survey.getElementWrapperComponentName(props.element as any);
+    if (name) {
+      return name;
+    }
+  }
+  return getElementComponentName(props.element);
+});
+const getRootStyle: (element: SurveyElement) => any = (
+  element: SurveyElement
+) => {
+  if (element.cssClasses) {
+    return element.rootStyle;
+  } else {
+    return {};
+  }
+};
+const componentData = computed(() => {
+  const element = props.element;
+  const survey = element.survey as SurveyModel;
+  let data: any;
+  if (survey) {
+    data = survey.getElementWrapperComponentData(element as any);
+  }
+  return {
+    componentName: getElementComponentName(element),
+    componentData: {
+      element: element,
+      survey: survey,
+      row: props.row,
+      css: props.css,
+      data: data,
+    },
+  };
+});
+</script>
diff --git a/packages/survey-vue3-ui/src/Row.vue b/packages/survey-vue3-ui/src/Row.vue
index 9a12719a95..607a252ff1 100644
--- a/packages/survey-vue3-ui/src/Row.vue
+++ b/packages/survey-vue3-ui/src/Row.vue
@@ -1,15 +1,12 @@
 <template>
   <div :class="row.getRowCss()" ref="root">
-    <div
+    <survey-element
+      :row="row"
+      :css="css"
+      :element="element"
       v-for="element in elements"
-      :style="getRootStyle(element)"
       :key="element.id"
-    >
-      <component
-        :is="getComponentName(element)"
-        v-bind="getComponentData(element)"
-      />
-    </div>
+    ></survey-element>
   </div>
 </template>
 
@@ -34,46 +31,6 @@ const elements = computed(
 );
 const root = ref<HTMLElement>();
 
-const getElementComponentName = (element: SurveyElement) => {
-  return element.isPanel ? "survey-panel" : "survey-question";
-};
-const getComponentName = (element: SurveyElement) => {
-  const survey = element.survey as SurveyModel;
-  if (survey) {
-    const name = survey.getElementWrapperComponentName(element as any);
-    if (name) {
-      return name;
-    }
-  }
-  return getElementComponentName(element);
-};
-const getRootStyle: (element: SurveyElement) => any = (
-  element: SurveyElement
-) => {
-  if (element.cssClasses) {
-    return element.rootStyle;
-  } else {
-    return {};
-  }
-};
-const getComponentData = (element: SurveyElement) => {
-  const survey = element.survey as SurveyModel;
-  let data: any;
-  if (survey) {
-    data = survey.getElementWrapperComponentData(element as any);
-  }
-  return {
-    componentName: getElementComponentName(element),
-    componentData: {
-      element: element,
-      survey: survey,
-      row: props.row,
-      css: element.isPanel ? props.css : element.getRootStyle(),
-      data: data,
-    },
-  };
-};
-
 useBase(() => props.row);
 
 onMounted(() => {
diff --git a/packages/survey-vue3-ui/src/index.ts b/packages/survey-vue3-ui/src/index.ts
index 352a79670f..f9f47ae272 100644
--- a/packages/survey-vue3-ui/src/index.ts
+++ b/packages/survey-vue3-ui/src/index.ts
@@ -106,6 +106,8 @@ import Header from "./components/header/Header.vue";
 import HeaderCell from "./components/header/HeaderCell.vue";
 import HeaderMobile from "./components/header/HeaderMobile.vue";
 
+import Element from "./Element.vue";
+
 import TemplateRenderer from "./TemplateRenderer.vue";
 
 import {
@@ -248,6 +250,8 @@ function registerComponents(app: App) {
 
   app.component("sv-template-renderer", TemplateRenderer);
 
+  app.component("survey-element", Element);
+
   app.directive("key2click", {
     // When the bound element is inserted into the DOM...
     mounted: function (el: HTMLElement, binding: any) {

From 516a8e0ea4ab8a384b68e45388be5b10317ece5d Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Thu, 26 Oct 2023 21:56:19 +0400
Subject: [PATCH 06/34] Fix matrix detail panel

---
 packages/survey-vue3-ui/src/Element.vue    | 2 +-
 packages/survey-vue3-ui/src/MatrixCell.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/survey-vue3-ui/src/Element.vue b/packages/survey-vue3-ui/src/Element.vue
index e5ecdf360c..3ecc0d38f8 100644
--- a/packages/survey-vue3-ui/src/Element.vue
+++ b/packages/survey-vue3-ui/src/Element.vue
@@ -10,7 +10,7 @@ import { computed } from "vue";
 const props = defineProps<{
   element: SurveyElement;
   row: QuestionRowModel;
-  css: any;
+  css?: any;
 }>();
 
 const getElementComponentName = (element: SurveyElement) => {
diff --git a/packages/survey-vue3-ui/src/MatrixCell.vue b/packages/survey-vue3-ui/src/MatrixCell.vue
index 318acc0396..e783f72e0a 100644
--- a/packages/survey-vue3-ui/src/MatrixCell.vue
+++ b/packages/survey-vue3-ui/src/MatrixCell.vue
@@ -21,7 +21,7 @@
     <component
       v-if="cell.hasPanel"
       :is="getComponentName(cell.panel)"
-      :question="cell.panel"
+      :element="cell.panel"
       :css="question.cssClasses"
     ></component>
     <div

From f2e52e218dd64ad141b0b8f545db7d997a7accb4 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Fri, 27 Oct 2023 12:06:22 +0400
Subject: [PATCH 07/34] Fix action bar warning

---
 .../src/components/action-bar/ActionBar.vue               | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/survey-vue3-ui/src/components/action-bar/ActionBar.vue b/packages/survey-vue3-ui/src/components/action-bar/ActionBar.vue
index bdac38afe8..53f6400378 100644
--- a/packages/survey-vue3-ui/src/components/action-bar/ActionBar.vue
+++ b/packages/survey-vue3-ui/src/components/action-bar/ActionBar.vue
@@ -10,7 +10,7 @@
     "
   >
     <sv-action
-      v-for="item in model.renderedActions"
+      v-for="item in renderedActions"
       v-bind:key="item.id"
       :item="item"
     ></sv-action>
@@ -20,7 +20,7 @@
 <script lang="ts" setup>
 import type { ActionContainer } from "survey-core";
 import { useBase } from "@/base";
-import { onMounted, onUnmounted, ref } from "vue";
+import { computed, onMounted, onUnmounted, ref } from "vue";
 
 const props = defineProps<{
   model: ActionContainer;
@@ -31,6 +31,10 @@ const root = ref<HTMLDivElement>(null as any as HTMLDivElement);
 
 useBase(() => props.model);
 
+const renderedActions = computed(() => {
+  return props.model.renderedActions;
+});
+
 onMounted(() => {
   if (!props.model.hasActions) return;
   props.model.initResponsivityManager(root.value);

From 65b56c24088bddb46d7e0c88f6058f272c4176f5 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Tue, 31 Oct 2023 13:33:21 +0400
Subject: [PATCH 08/34] Implement content wrapper + fix potential warnings

---
 .../survey-vue3-ui/src/BooleanCheckbox.vue    |  2 +-
 packages/survey-vue3-ui/src/BooleanRadio.vue  |  1 +
 packages/survey-vue3-ui/src/BooleanSwitch.vue |  1 +
 packages/survey-vue3-ui/src/Checkbox.vue      |  3 +-
 packages/survey-vue3-ui/src/Comment.vue       |  1 +
 packages/survey-vue3-ui/src/Composite.vue     |  1 +
 packages/survey-vue3-ui/src/Custom.vue        |  2 +-
 packages/survey-vue3-ui/src/Dropdown.vue      |  1 +
 .../survey-vue3-ui/src/DropdownSelect.vue     |  1 +
 packages/survey-vue3-ui/src/Expression.vue    |  1 +
 packages/survey-vue3-ui/src/File.vue          |  1 +
 packages/survey-vue3-ui/src/Html.vue          |  1 +
 packages/survey-vue3-ui/src/Image.vue         |  1 +
 packages/survey-vue3-ui/src/Imagepicker.vue   |  3 +-
 packages/survey-vue3-ui/src/Matrix.vue        |  5 ++-
 .../survey-vue3-ui/src/MatrixDropdown.vue     |  1 +
 packages/survey-vue3-ui/src/MatrixDynamic.vue |  1 +
 packages/survey-vue3-ui/src/Multipletext.vue  |  1 +
 packages/survey-vue3-ui/src/PanelDynamic.vue  |  1 +
 packages/survey-vue3-ui/src/Question.vue      | 39 ++++++++++++++-----
 packages/survey-vue3-ui/src/Radiogroup.vue    |  3 ++
 packages/survey-vue3-ui/src/Ranking.vue       |  3 ++
 packages/survey-vue3-ui/src/Rating.vue        |  5 ++-
 .../survey-vue3-ui/src/RatingDropdown.vue     |  1 +
 packages/survey-vue3-ui/src/Signaturepad.vue  |  3 ++
 packages/survey-vue3-ui/src/Tagbox.vue        |  3 ++
 packages/survey-vue3-ui/src/Text.vue          |  3 ++
 27 files changed, 74 insertions(+), 15 deletions(-)

diff --git a/packages/survey-vue3-ui/src/BooleanCheckbox.vue b/packages/survey-vue3-ui/src/BooleanCheckbox.vue
index 7c9d71699d..4c7f184a18 100644
--- a/packages/survey-vue3-ui/src/BooleanCheckbox.vue
+++ b/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);
diff --git a/packages/survey-vue3-ui/src/BooleanRadio.vue b/packages/survey-vue3-ui/src/BooleanRadio.vue
index 1dfc75261a..5a68b25287 100644
--- a/packages/survey-vue3-ui/src/BooleanRadio.vue
+++ b/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);
diff --git a/packages/survey-vue3-ui/src/BooleanSwitch.vue b/packages/survey-vue3-ui/src/BooleanSwitch.vue
index d04b6325c4..22bfeb9e1a 100644
--- a/packages/survey-vue3-ui/src/BooleanSwitch.vue
+++ b/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);
diff --git a/packages/survey-vue3-ui/src/Checkbox.vue b/packages/survey-vue3-ui/src/Checkbox.vue
index 73a43e612f..3aa0066ea7 100644
--- a/packages/survey-vue3-ui/src/Checkbox.vue
+++ b/packages/survey-vue3-ui/src/Checkbox.vue
@@ -9,7 +9,7 @@
     :aria-invalid="question.a11y_input_ariaInvalid"
     :aria-describedby="question.a11y_input_ariaDescribedBy"
   >
-    <legend class="sv-hidden">{{question.locTitle.renderedHtml}}</legend>
+    <legend class="sv-hidden">{{ question.locTitle.renderedHtml }}</legend>
     <template v-if="question.hasHeadItems">
       <survey-checkbox-item
         v-for="(item, index) in question.headItems"
@@ -83,6 +83,7 @@
 import type { QuestionCheckboxModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps<{ question: QuestionCheckboxModel }>();
 const root = ref(null);
 useQuestion(props, root);
diff --git a/packages/survey-vue3-ui/src/Comment.vue b/packages/survey-vue3-ui/src/Comment.vue
index f0c4d3ac79..376beeb1d1 100644
--- a/packages/survey-vue3-ui/src/Comment.vue
+++ b/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;
diff --git a/packages/survey-vue3-ui/src/Composite.vue b/packages/survey-vue3-ui/src/Composite.vue
index cdf7edab75..944c6e624f 100644
--- a/packages/survey-vue3-ui/src/Composite.vue
+++ b/packages/survey-vue3-ui/src/Composite.vue
@@ -6,6 +6,7 @@
 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);
diff --git a/packages/survey-vue3-ui/src/Custom.vue b/packages/survey-vue3-ui/src/Custom.vue
index 9ef90df879..13e56bfbb6 100644
--- a/packages/survey-vue3-ui/src/Custom.vue
+++ b/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);
diff --git a/packages/survey-vue3-ui/src/Dropdown.vue b/packages/survey-vue3-ui/src/Dropdown.vue
index 3a5ca2f6ec..cf77ad8cd4 100644
--- a/packages/survey-vue3-ui/src/Dropdown.vue
+++ b/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);
diff --git a/packages/survey-vue3-ui/src/DropdownSelect.vue b/packages/survey-vue3-ui/src/DropdownSelect.vue
index c437d9b63d..5385457e8c 100644
--- a/packages/survey-vue3-ui/src/DropdownSelect.vue
+++ b/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);
diff --git a/packages/survey-vue3-ui/src/Expression.vue b/packages/survey-vue3-ui/src/Expression.vue
index d127f3339f..3169d3cde7 100644
--- a/packages/survey-vue3-ui/src/Expression.vue
+++ b/packages/survey-vue3-ui/src/Expression.vue
@@ -8,6 +8,7 @@
 import type { QuestionExpressionModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps<{ question: QuestionExpressionModel }>();
 const root = ref(null);
 useQuestion(props, root);
diff --git a/packages/survey-vue3-ui/src/File.vue b/packages/survey-vue3-ui/src/File.vue
index 5ecdd77ba4..130a740035 100644
--- a/packages/survey-vue3-ui/src/File.vue
+++ b/packages/survey-vue3-ui/src/File.vue
@@ -93,6 +93,7 @@
 import type { QuestionFileModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps<{ question: QuestionFileModel }>();
 const root = ref(null);
 useQuestion(props, root);
diff --git a/packages/survey-vue3-ui/src/Html.vue b/packages/survey-vue3-ui/src/Html.vue
index e3594707f2..b425dccfc4 100644
--- a/packages/survey-vue3-ui/src/Html.vue
+++ b/packages/survey-vue3-ui/src/Html.vue
@@ -6,6 +6,7 @@
 import type { QuestionHtmlModel } from "survey-core";
 import { ref } from "vue";
 import { useLocString, useQuestion } from "./base";
+defineOptions({ inheritAttrs: false });
 const props = defineProps<{ question: QuestionHtmlModel }>();
 const root = ref(null);
 useQuestion(props, root);
diff --git a/packages/survey-vue3-ui/src/Image.vue b/packages/survey-vue3-ui/src/Image.vue
index 89a0932bda..951b8caeca 100644
--- a/packages/survey-vue3-ui/src/Image.vue
+++ b/packages/survey-vue3-ui/src/Image.vue
@@ -75,6 +75,7 @@
 import type { QuestionImageModel } from "survey-core";
 import { useLocString, useQuestion } from "./base";
 import { ref } from "vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps<{ question: QuestionImageModel }>();
 const root = ref(null);
 useQuestion(props, root);
diff --git a/packages/survey-vue3-ui/src/Imagepicker.vue b/packages/survey-vue3-ui/src/Imagepicker.vue
index 578d34075d..1b9d8cbe52 100644
--- a/packages/survey-vue3-ui/src/Imagepicker.vue
+++ b/packages/survey-vue3-ui/src/Imagepicker.vue
@@ -1,6 +1,6 @@
 <template>
   <fieldset :class="question.getSelectBaseRootCss()" ref="root">
-    <legend class="sv-hidden">{{question.locTitle.renderedHtml}}</legend>
+    <legend class="sv-hidden">{{ question.locTitle.renderedHtml }}</legend>
     <template v-if="!question.hasColumns">
       <survey-imagepicker-item
         v-for="item in question.visibleChoices"
@@ -31,6 +31,7 @@
 import type { QuestionImagePickerModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps<{ question: QuestionImagePickerModel }>();
 const root = ref(null);
 useQuestion(props, root);
diff --git a/packages/survey-vue3-ui/src/Matrix.vue b/packages/survey-vue3-ui/src/Matrix.vue
index 8d2f669b49..be50bd0d46 100644
--- a/packages/survey-vue3-ui/src/Matrix.vue
+++ b/packages/survey-vue3-ui/src/Matrix.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="question.cssClasses.tableWrapper" ref="root">
     <fieldset>
-      <legend class="sv-hidden">{{question.locTitle.renderedHtml}}</legend>
+      <legend class="sv-hidden">{{ question.locTitle.renderedHtml }}</legend>
       <table :class="question.getTableCss()">
         <thead v-if="question.showHeader">
           <tr>
@@ -100,6 +100,9 @@
 import type { QuestionMatrixModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref, shallowRef } from "vue";
+defineOptions({
+  inheritAttrs: false,
+});
 const props = defineProps<{ question: QuestionMatrixModel }>();
 const root = ref(null);
 const visibleRows = shallowRef();
diff --git a/packages/survey-vue3-ui/src/MatrixDropdown.vue b/packages/survey-vue3-ui/src/MatrixDropdown.vue
index 505af9980a..2498c0c35f 100644
--- a/packages/survey-vue3-ui/src/MatrixDropdown.vue
+++ b/packages/survey-vue3-ui/src/MatrixDropdown.vue
@@ -6,6 +6,7 @@
 import type { QuestionMatrixDropdownModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps<{ question: QuestionMatrixDropdownModel }>();
 const root = ref(null);
 useQuestion(props, root);
diff --git a/packages/survey-vue3-ui/src/MatrixDynamic.vue b/packages/survey-vue3-ui/src/MatrixDynamic.vue
index b4f8ccf7d3..11ff5e9275 100644
--- a/packages/survey-vue3-ui/src/MatrixDynamic.vue
+++ b/packages/survey-vue3-ui/src/MatrixDynamic.vue
@@ -54,6 +54,7 @@
 import type { QuestionMatrixDynamicModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps<{ question: QuestionMatrixDynamicModel }>();
 const root = ref(null);
 useQuestion(props, root);
diff --git a/packages/survey-vue3-ui/src/Multipletext.vue b/packages/survey-vue3-ui/src/Multipletext.vue
index 24bed8396a..38f02a4159 100644
--- a/packages/survey-vue3-ui/src/Multipletext.vue
+++ b/packages/survey-vue3-ui/src/Multipletext.vue
@@ -26,6 +26,7 @@
 import type { QuestionMultipleTextModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps<{ question: QuestionMultipleTextModel }>();
 const root = ref(null);
 useQuestion(props, root);
diff --git a/packages/survey-vue3-ui/src/PanelDynamic.vue b/packages/survey-vue3-ui/src/PanelDynamic.vue
index 0a4ce6e525..fe8dae0fb9 100644
--- a/packages/survey-vue3-ui/src/PanelDynamic.vue
+++ b/packages/survey-vue3-ui/src/PanelDynamic.vue
@@ -66,6 +66,7 @@
 import type { QuestionPanelDynamicModel } from "survey-core";
 import { useQuestion } from "./base";
 import { computed, getCurrentInstance, ref } from "vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps<{ question: QuestionPanelDynamicModel; css?: any }>();
 const root = ref(null);
 const instance = getCurrentInstance();
diff --git a/packages/survey-vue3-ui/src/Question.vue b/packages/survey-vue3-ui/src/Question.vue
index dd3afde92b..3e6406481c 100644
--- a/packages/survey-vue3-ui/src/Question.vue
+++ b/packages/survey-vue3-ui/src/Question.vue
@@ -37,10 +37,11 @@
         :element="element"
         :location="'top'"
       />
+
       <component
-        :is="getComponentName(element)"
+        :is="contentComponentName"
         v-if="!element.isCollapsed"
-        :question="element"
+        v-bind="contentComponentData"
       />
       <div v-if="element.hasComment" :class="element.getCommentAreaCss()">
         <div>
@@ -108,13 +109,6 @@ const hasErrorsOnBottom = computed(() => {
   return props.element.showErrorOnBottom;
 });
 
-const getComponentName = (element: Question) => {
-  if (element.customWidget) return "survey-customwidget";
-  if (element.isDefaultRendering()) {
-    return "survey-" + element.getTemplate();
-  }
-  return element.getComponentName();
-};
 const getContentClass = (element: Question) => {
   return element.cssContent;
 };
@@ -133,6 +127,33 @@ const stopWatch = watch(
     afterRender();
   }
 );
+const componentName = computed(() => {
+  if (props.element.customWidget) return "survey-customwidget";
+  if (props.element.isDefaultRendering()) {
+    return "survey-" + props.element.getTemplate();
+  }
+  return props.element.getComponentName();
+});
+const contentComponentName = computed(() => {
+  return (
+    (
+      props.element.survey as SurveyModel
+    ).getQuestionContentWrapperComponentName(props.element) ||
+    componentName.value
+  );
+});
+const contentComponentData = computed(() => {
+  return {
+    componentName: componentName.value,
+    componentData: {
+      question: props.element,
+      data: (
+        props.element.survey as SurveyModel
+      ).getElementWrapperComponentData(props.element),
+    },
+  };
+});
+
 onUnmounted(() => {
   stopWatch();
 });
diff --git a/packages/survey-vue3-ui/src/Radiogroup.vue b/packages/survey-vue3-ui/src/Radiogroup.vue
index 261021f5e4..433aac283a 100644
--- a/packages/survey-vue3-ui/src/Radiogroup.vue
+++ b/packages/survey-vue3-ui/src/Radiogroup.vue
@@ -81,6 +81,9 @@
 import type { QuestionRadiogroupModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
+defineOptions({
+  inheritAttrs: false,
+});
 const props = defineProps<{ question: QuestionRadiogroupModel }>();
 const root = ref(null);
 useQuestion<QuestionRadiogroupModel>(props, root);
diff --git a/packages/survey-vue3-ui/src/Ranking.vue b/packages/survey-vue3-ui/src/Ranking.vue
index e2b5bcd2cb..74daf4cdda 100644
--- a/packages/survey-vue3-ui/src/Ranking.vue
+++ b/packages/survey-vue3-ui/src/Ranking.vue
@@ -75,6 +75,9 @@
 import type { QuestionRankingModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
+defineOptions({
+  inheritAttrs: false,
+});
 const props = defineProps<{ question: QuestionRankingModel }>();
 const root = ref(null);
 useQuestion<QuestionRankingModel>(props, root);
diff --git a/packages/survey-vue3-ui/src/Rating.vue b/packages/survey-vue3-ui/src/Rating.vue
index a2f366e655..fca4b07dbb 100644
--- a/packages/survey-vue3-ui/src/Rating.vue
+++ b/packages/survey-vue3-ui/src/Rating.vue
@@ -8,7 +8,7 @@
       <component
         v-for="(item, index) in question.renderedRateItems"
         :key="getInputId(index)"
-          :is="question.itemComponent"
+        :is="question.itemComponent"
         :item="item"
         :index="index"
         :question="question"
@@ -23,6 +23,9 @@
 import type { QuestionRatingModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
+defineOptions({
+  inheritAttrs: false,
+});
 const props = defineProps<{ question: QuestionRatingModel }>();
 const root = ref(null);
 useQuestion<QuestionRatingModel>(props, root);
diff --git a/packages/survey-vue3-ui/src/RatingDropdown.vue b/packages/survey-vue3-ui/src/RatingDropdown.vue
index a8453a4719..f2fc2b9b47 100644
--- a/packages/survey-vue3-ui/src/RatingDropdown.vue
+++ b/packages/survey-vue3-ui/src/RatingDropdown.vue
@@ -7,6 +7,7 @@
 <script lang="ts" setup>
 import { ref } from "vue";
 import { useQuestion } from "./base";
+defineOptions({ inheritAttrs: false });
 const props = defineProps<{ question: QuestionRatingModel }>();
 const root = ref(null);
 useQuestion(props, root);
diff --git a/packages/survey-vue3-ui/src/Signaturepad.vue b/packages/survey-vue3-ui/src/Signaturepad.vue
index a368071203..c79947db88 100644
--- a/packages/survey-vue3-ui/src/Signaturepad.vue
+++ b/packages/survey-vue3-ui/src/Signaturepad.vue
@@ -52,6 +52,9 @@
 import type { QuestionSignaturePadModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
+defineOptions({
+  inheritAttrs: false,
+});
 const props = defineProps<{
   question: QuestionSignaturePadModel;
 }>();
diff --git a/packages/survey-vue3-ui/src/Tagbox.vue b/packages/survey-vue3-ui/src/Tagbox.vue
index 51b4614217..45976cc6c1 100644
--- a/packages/survey-vue3-ui/src/Tagbox.vue
+++ b/packages/survey-vue3-ui/src/Tagbox.vue
@@ -9,6 +9,9 @@
 import type { QuestionTagboxModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
+defineOptions({
+  inheritAttrs: false,
+});
 const props = defineProps<{
   question: QuestionTagboxModel;
 }>();
diff --git a/packages/survey-vue3-ui/src/Text.vue b/packages/survey-vue3-ui/src/Text.vue
index 6ecd45392b..289d0c94a1 100644
--- a/packages/survey-vue3-ui/src/Text.vue
+++ b/packages/survey-vue3-ui/src/Text.vue
@@ -17,5 +17,8 @@ import { useQuestion } from "./base";
 import { ref } from "vue";
 const props = defineProps<{ question: QuestionTextModel }>();
 const root = ref(null);
+defineOptions({
+  inheritAttrs: false,
+});
 useQuestion<QuestionTextModel>(props, root);
 </script>

From 0f92253b1db43dd8f1456e8f7632b50a482a01e4 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Tue, 31 Oct 2023 17:33:44 +0400
Subject: [PATCH 09/34] Implement buttongroup question

---
 .../src/buttongroup/ButtonGroup.vue           | 19 ++++++
 .../src/buttongroup/ButtonGroupItem.vue       | 61 +++++++++++++++++++
 packages/survey-vue3-ui/src/index.ts          |  5 ++
 .../tests/defaultV2/buttongroup.ts            |  2 +-
 4 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 packages/survey-vue3-ui/src/buttongroup/ButtonGroup.vue
 create mode 100644 packages/survey-vue3-ui/src/buttongroup/ButtonGroupItem.vue

diff --git a/packages/survey-vue3-ui/src/buttongroup/ButtonGroup.vue b/packages/survey-vue3-ui/src/buttongroup/ButtonGroup.vue
new file mode 100644
index 0000000000..f0b80fef9d
--- /dev/null
+++ b/packages/survey-vue3-ui/src/buttongroup/ButtonGroup.vue
@@ -0,0 +1,19 @@
+<template>
+  <div role="group" :class="question.cssClasses.root" ref="root">
+    <sv-button-group-item
+      v-for="(item, index) in question.visibleChoices"
+      :question="question"
+      :key="index"
+      :item="item"
+      :index="index"
+    ></sv-button-group-item>
+  </div>
+</template>
+<script lang="ts" setup>
+import type { QuestionButtonGroupModel } from "survey-core";
+import { useQuestion } from "..";
+import { ref } from "vue";
+const props = defineProps<{ question: QuestionButtonGroupModel }>();
+const root = ref<HTMLDivElement>();
+useQuestion(props, root);
+</script>
diff --git a/packages/survey-vue3-ui/src/buttongroup/ButtonGroupItem.vue b/packages/survey-vue3-ui/src/buttongroup/ButtonGroupItem.vue
new file mode 100644
index 0000000000..9d2f4bfde5
--- /dev/null
+++ b/packages/survey-vue3-ui/src/buttongroup/ButtonGroupItem.vue
@@ -0,0 +1,61 @@
+<template>
+  <label
+    role="radio"
+    :class="model.css.label"
+    :title="model.caption.renderedHtml"
+  >
+    <input
+      type="radio"
+      :name="model.name"
+      :id="model.id"
+      :aria-required="model.isRequired"
+      :aria-label="model.caption.renderedHtml"
+      role="radio"
+      :aria-invalid="model.hasErrors"
+      :aria-describedby="model.describedBy"
+      :disabled="model.readOnly"
+      :class="model.css.control"
+      v-model="renderedValue"
+      :value="model.value"
+    />
+    <div :class="model.css.decorator">
+      <sv-svg-icon
+        v-if="model.iconName"
+        :iconName="model.iconName"
+        :size="model.iconSize"
+        :class="model.css.icon"
+      ></sv-svg-icon>
+      <span
+        :class="model.css.caption"
+        v-if="model.showCaption"
+        :title="model.caption.renderedHtml"
+      >
+        <survey-string :locString="model.caption"></survey-string>
+      </span>
+    </div>
+  </label>
+</template>
+<script lang="ts" setup>
+import {
+  ButtonGroupItemModel,
+  QuestionButtonGroupModel,
+  type ItemValue,
+} from "survey-core";
+import { computed } from "vue";
+
+const props = defineProps<{
+  item: ItemValue;
+  question: QuestionButtonGroupModel;
+  index: number;
+}>();
+const model = computed(
+  () => new ButtonGroupItemModel(props.question, props.item, props.index)
+);
+const renderedValue = computed({
+  get: () => props.question.renderedValue,
+  set: (val) => {
+    const question = props.question;
+    question.renderedValue = val;
+  },
+});
+</script>
diff --git a/packages/survey-vue3-ui/src/index.ts b/packages/survey-vue3-ui/src/index.ts
index f9f47ae272..4a6ab50ec3 100644
--- a/packages/survey-vue3-ui/src/index.ts
+++ b/packages/survey-vue3-ui/src/index.ts
@@ -122,6 +122,8 @@ import FileCleanButton from "./FileCleanButton.vue";
 import FileVideo from "./FileVideo.vue";
 import FileChooseButton from "./components/file/FileChooseButton.vue";
 import FilePreview from "./components/file/FilePreview.vue";
+import ButtonGroup from "./buttongroup/ButtonGroup.vue";
+import ButtonGroupItem from "./buttongroup/ButtonGroupItem.vue";
 export { useBase, useLocString, useQuestion } from "./base";
 
 SurveyModel.platform = "vue3";
@@ -252,6 +254,9 @@ function registerComponents(app: App) {
 
   app.component("survey-element", Element);
 
+  app.component("survey-buttongroup", ButtonGroup);
+  app.component("sv-button-group-item", ButtonGroupItem);
+
   app.directive("key2click", {
     // When the bound element is inserted into the DOM...
     mounted: function (el: HTMLElement, binding: any) {
diff --git a/visualRegressionTests/tests/defaultV2/buttongroup.ts b/visualRegressionTests/tests/defaultV2/buttongroup.ts
index 04ba6bc80c..9e98a92d6e 100644
--- a/visualRegressionTests/tests/defaultV2/buttongroup.ts
+++ b/visualRegressionTests/tests/defaultV2/buttongroup.ts
@@ -46,7 +46,7 @@ frameworks.forEach(framework => {
     await wrapVisualTest(t, async (t, comparer) => {
       await t.resizeWindow(1920, 1080);
       await registerButtongroup(framework);
-      if (framework === "vue" || framework === "angular" || framework === "vue3") {
+      if (framework === "vue" || framework === "angular") {
         return;
       }
       await initSurvey(framework, {

From 04e148e3d108dcd5b394c2abf2ccae2f7e2b9ede Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Fri, 3 Nov 2023 16:58:15 +0400
Subject: [PATCH 10/34] Implement matrix cell wrapper

---
 packages/survey-vue3-ui/src/MatrixCell.vue    | 80 ++++++++++++-------
 packages/survey-vue3-ui/src/MatrixTable.vue   | 19 +++--
 .../survey-vue3-ui/src/TemplateRenderer.vue   | 16 ++--
 packages/survey-vue3-ui/src/base.ts           |  2 +-
 packages/survey-vue3-ui/vitest.config.js      | 34 ++++----
 5 files changed, 88 insertions(+), 63 deletions(-)

diff --git a/packages/survey-vue3-ui/src/MatrixCell.vue b/packages/survey-vue3-ui/src/MatrixCell.vue
index e783f72e0a..f0305c5b29 100644
--- a/packages/survey-vue3-ui/src/MatrixCell.vue
+++ b/packages/survey-vue3-ui/src/MatrixCell.vue
@@ -28,47 +28,67 @@
       v-if="cell.hasQuestion"
       :class="question.cssClasses.cellQuestionWrapper"
     >
-      <component
-        v-if="!cell.isChoice && cell.question.isDefaultRendering()"
-        v-show="isVisible"
-        :is="getComponentName(cell.question)"
-        :question="cell.question"
-      />
+      <template v-if="!cell.isChoice && cell.question.isDefaultRendering()">
+        <component
+          :is="question.getCellWrapperComponentName(cell.cell)"
+          :componentData="question.getCellWrapperComponentData(cell.cell)"
+        >
+          <component
+            v-show="isVisible"
+            :is="getComponentName(cell.question)"
+            :question="cell.question"
+          />
+        </component>
+      </template>
       <component
         v-if="!cell.isChoice && !cell.question.isDefaultRendering()"
         v-show="isVisible"
         :is="cell.question.getComponentName()"
         :question="cell.question"
       />
-      <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>
+      <template v-if="cell.isItemChoice">
+        <component
+          :is="question.getCellWrapperComponentName(cell.cell)"
+          :componentData="question.getCellWrapperComponentData(cell.cell)"
+        >
+          <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>
+        </component>
+      </template>
       <survey-other-choice
         v-if="cell.isOtherChoice"
         :question="cell.question"
       />
     </div>
-    <survey-string v-if="cell.hasTitle" :locString="cell.locTitle" />
-    <span
-      v-if="!!cell.requiredText"
-      :class="question.cssClasses.cellRequiredText"
-      >{{ cell.requiredText }}</span
-    >
+    <template v-if="cell.hasTitle">
+      <component
+        :is="question.getCellWrapperComponentName(cell)"
+        :componentData="question.getCellWrapperComponentData(cell)"
+      >
+        <survey-string v-if="cell.hasTitle" :locString="cell.locTitle" />
+        <span
+          v-if="!!cell.requiredText"
+          :class="question.cssClasses.cellRequiredText"
+          >{{ cell.requiredText }}</span
+        >
+      </component>
+    </template>
   </td>
 </template>
 
diff --git a/packages/survey-vue3-ui/src/MatrixTable.vue b/packages/survey-vue3-ui/src/MatrixTable.vue
index bbed2054b5..502892a62a 100644
--- a/packages/survey-vue3-ui/src/MatrixTable.vue
+++ b/packages/survey-vue3-ui/src/MatrixTable.vue
@@ -9,16 +9,21 @@
           <template v-for="cell in table.headerRow.cells">
             <th
               v-if="cell.hasTitle"
-              :class="cell.className"
               :key="'header_' + cell.id"
+              :class="cell.className"
               :style="{ minWidth: cell.minWidth, width: cell.width }"
             >
-              <survey-string :locString="cell.locTitle" />
-              <survey-matrixheaderrequired
-                v-if="!!cell.column"
-                :column="cell.column"
-                :question="question"
-              ></survey-matrixheaderrequired>
+              <component
+                :is="question.getColumnHeaderWrapperComponentName(cell as any)"
+                :componentData="question.getColumnHeaderWrapperComponentData(cell as any)"
+              >
+                <survey-string :locString="cell.locTitle" />
+                <survey-matrixheaderrequired
+                  v-if="!!cell.column"
+                  :column="cell.column"
+                  :question="question"
+                ></survey-matrixheaderrequired>
+              </component>
             </th>
             <td
               v-if="!cell.hasTitle"
diff --git a/packages/survey-vue3-ui/src/TemplateRenderer.vue b/packages/survey-vue3-ui/src/TemplateRenderer.vue
index 70226070b0..286e54921a 100644
--- a/packages/survey-vue3-ui/src/TemplateRenderer.vue
+++ b/packages/survey-vue3-ui/src/TemplateRenderer.vue
@@ -1,17 +1,15 @@
 <template>
-  <component :is="getComponentName()" v-bind="getComponentData()" />
+  <slot v-if="hasContentComponent && !componentName"></slot>
+  <component v-else :is="componentName" v-bind="componentData" />
 </template>
 
 <script lang="ts" setup>
-const props = defineProps<{
-  componentName: string;
+import { computed, useSlots } from "vue";
+defineProps<{
+  componentName?: string;
   componentData: any;
 }>();
 
-const getComponentName = () => {
-  return props.componentName;
-};
-const getComponentData = () => {
-  return props.componentData;
-};
+const slots = useSlots();
+const hasContentComponent = computed(() => !!slots.default);
 </script>
diff --git a/packages/survey-vue3-ui/src/base.ts b/packages/survey-vue3-ui/src/base.ts
index abaebc8911..8a782d21b2 100644
--- a/packages/survey-vue3-ui/src/base.ts
+++ b/packages/survey-vue3-ui/src/base.ts
@@ -76,7 +76,7 @@ export function useBase<T extends Base>(
   const stopWatch = watch(
     getModel,
     (value, oldValue) => {
-      if (onModelChanged) onModelChanged(value);
+      if (value && onModelChanged) onModelChanged(value);
       if (oldValue) {
         unMakeReactive(oldValue, isModelSubsribed);
         if (clean) clean(oldValue);
diff --git a/packages/survey-vue3-ui/vitest.config.js b/packages/survey-vue3-ui/vitest.config.js
index ba52521270..c5e6a49118 100644
--- a/packages/survey-vue3-ui/vitest.config.js
+++ b/packages/survey-vue3-ui/vitest.config.js
@@ -1,21 +1,23 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
 import { fileURLToPath, URL } from "node:url";
 
 // https://vitejs.dev/config/
 export default defineConfig({
- plugins: [vue()],
- test:{
-	setupFiles: ['./vitest.setup.ts'],
-	environment: 'jsdom',
-	deps: {
-	 inline: ['vitest-canvas-mock'],
-	},
- },
- resolve: {
-	alias: {
+  plugins: [vue()],
+  test: {
+    setupFiles: ["./vitest.setup.ts"],
+    environment: "jsdom",
+    deps: {
+      inline: ["vitest-canvas-mock"],
+    },
+  },
+  resolve: {
+    alias: {
       "@": fileURLToPath(new URL("./src", import.meta.url)),
-      "survey-core": fileURLToPath(new URL('../../build/survey-core', import.meta.url)),
-	},
-},
-})
+      "survey-core": fileURLToPath(
+        new URL("../../build/survey-core", import.meta.url)
+      ),
+    },
+  },
+});

From 2ad9192d78d861b91d095e29afb5d80b496dec09 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Fri, 3 Nov 2023 17:43:23 +0400
Subject: [PATCH 11/34] Fix panel doesnt render skeleton component

---
 packages/survey-vue3-ui/src/Element.vue  | 12 +++++++++++-
 packages/survey-vue3-ui/src/Question.vue | 11 +----------
 2 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/survey-vue3-ui/src/Element.vue b/packages/survey-vue3-ui/src/Element.vue
index 3ecc0d38f8..7f288c2c24 100644
--- a/packages/survey-vue3-ui/src/Element.vue
+++ b/packages/survey-vue3-ui/src/Element.vue
@@ -1,6 +1,16 @@
 <template>
   <div :style="getRootStyle(element)">
-    <component :is="componentName" v-bind="componentData" />
+    <component
+      :is="componentName"
+      v-bind="componentData"
+      v-if="row.isNeedRender"
+    />
+    <component
+      v-else-if="!!element.skeletonComponentName"
+      :is="element.skeletonComponentName"
+      :element="element"
+      :css="css"
+    ></component>
   </div>
 </template>
 <script lang="ts" setup>
diff --git a/packages/survey-vue3-ui/src/Question.vue b/packages/survey-vue3-ui/src/Question.vue
index 3e6406481c..d979063123 100644
--- a/packages/survey-vue3-ui/src/Question.vue
+++ b/packages/survey-vue3-ui/src/Question.vue
@@ -3,7 +3,6 @@
     :class="element.getRootCss()"
     :style="getRootStyle()"
     ref="root"
-    v-if="row.isNeedRender"
     v-on:focusin="element.focusIn()"
     :id="element.id"
     :role="element.ariaRole"
@@ -75,13 +74,6 @@
       :location="'bottom'"
     />
   </div>
-
-  <component
-    v-else-if="!!element.skeletonComponentName"
-    :is="element.skeletonComponentName"
-    :element="element"
-    :css="css"
-  ></component>
 </template>
 
 <script lang="ts">
@@ -91,14 +83,13 @@ export default {
 </script>
 
 <script lang="ts" setup>
-import type { SurveyModel, Question, QuestionRowModel } from "survey-core";
+import type { SurveyModel, Question } from "survey-core";
 import { useBase } from "./base";
 import { computed, onUnmounted, ref, watch } from "vue";
 
 const props = defineProps<{
   survey: SurveyModel;
   element: Question;
-  row: QuestionRowModel;
   css?: any;
 }>();
 const root = ref<HTMLElement>(null as any);

From a97390ab660f1cc36f85c7bf793b550eec79becc Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Mon, 6 Nov 2023 14:03:41 +0400
Subject: [PATCH 12/34] Refactor action bar item

---
 .../survey-vue3-ui/src/components/action-bar/ActionBarItem.vue | 3 ++-
 .../src/components/action-bar/ActionBarItemDropdown.vue        | 3 ++-
 src/vue/components/action-bar/action-bar-item-dropdown.vue     | 3 ++-
 src/vue/components/action-bar/action-bar-item.vue              | 3 ++-
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/survey-vue3-ui/src/components/action-bar/ActionBarItem.vue b/packages/survey-vue3-ui/src/components/action-bar/ActionBarItem.vue
index efe49bbef0..d1f17ec6f0 100644
--- a/packages/survey-vue3-ui/src/components/action-bar/ActionBarItem.vue
+++ b/packages/survey-vue3-ui/src/components/action-bar/ActionBarItem.vue
@@ -12,12 +12,13 @@
         evt.stopPropagation();
       }
     "
-    v-bind:disabled="item.enabled !== undefined && !item.enabled"
+    v-bind:disabled="item.disabled"
     v-bind:title="item.tooltip || item.title"
     v-bind:aria-checked="item.ariaChecked"
     v-bind:aria-expanded="item.ariaExpanded"
     v-bind:role="item.ariaRole"
     v-bind:tabindex="item.disableTabStop ? -1 : 0"
+    v-key2click
   >
     <sv-svg-icon
       v-if="item.iconName"
diff --git a/packages/survey-vue3-ui/src/components/action-bar/ActionBarItemDropdown.vue b/packages/survey-vue3-ui/src/components/action-bar/ActionBarItemDropdown.vue
index 02f4ee0fa8..35cf748c49 100644
--- a/packages/survey-vue3-ui/src/components/action-bar/ActionBarItemDropdown.vue
+++ b/packages/survey-vue3-ui/src/components/action-bar/ActionBarItemDropdown.vue
@@ -12,10 +12,11 @@
         evt.stopPropagation();
       }
     "
-    v-bind:disabled="item.enabled !== undefined && item.enabled"
+    v-bind:disabled="item.disabled"
     v-bind:title="item.tooltip || item.title"
     v-bind:role="item.ariaRole"
     v-bind:tabindex="item.disableTabStop ? -1 : 0"
+    v-key2click
   >
     <sv-svg-icon
       v-if="item.iconName"
diff --git a/src/vue/components/action-bar/action-bar-item-dropdown.vue b/src/vue/components/action-bar/action-bar-item-dropdown.vue
index fc46d17759..76f07aecfc 100644
--- a/src/vue/components/action-bar/action-bar-item-dropdown.vue
+++ b/src/vue/components/action-bar/action-bar-item-dropdown.vue
@@ -13,10 +13,11 @@
           evt.stopPropagation();
         }
       "
-      v-bind:disabled="item.enabled !== undefined && item.enabled"
+      v-bind:disabled="item.disabled"
       v-bind:title="item.tooltip || item.title"
       v-bind:role="item.ariaRole"
       v-bind:tabindex="item.disableTabStop ? -1 : 0"
+      v-key2click
     >
       <sv-svg-icon
         v-if="item.iconName"
diff --git a/src/vue/components/action-bar/action-bar-item.vue b/src/vue/components/action-bar/action-bar-item.vue
index 7a483839d0..a945fbca6c 100644
--- a/src/vue/components/action-bar/action-bar-item.vue
+++ b/src/vue/components/action-bar/action-bar-item.vue
@@ -12,12 +12,13 @@
         evt.stopPropagation();
       }
     "
-    v-bind:disabled="item.enabled !== undefined && !item.enabled"
+    v-bind:disabled="item.disabled"
     v-bind:title="item.tooltip || item.title"
     v-bind:aria-checked="item.ariaChecked"
     v-bind:aria-expanded="item.ariaExpanded"
     v-bind:role="item.ariaRole"
     v-bind:tabindex="item.disableTabStop ? -1 : 0"
+    v-key2click
   >
     <sv-svg-icon
       v-if="item.iconName"

From 3dd94bd70d38eadbdb1fbe38c87418bd23098fe7 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Wed, 8 Nov 2023 12:43:52 +0400
Subject: [PATCH 13/34] Implement wrapper for logo component

---
 packages/survey-vue3-ui/src/Header.vue        | 35 +++++--------------
 packages/survey-vue3-ui/src/Logo.vue          | 25 +++++++++++++
 packages/survey-vue3-ui/src/Survey.vue        |  5 ++-
 .../src/components/header/Header.vue          | 29 +++++++++------
 packages/survey-vue3-ui/src/index.ts          |  3 ++
 5 files changed, 59 insertions(+), 38 deletions(-)
 create mode 100644 packages/survey-vue3-ui/src/Logo.vue

diff --git a/packages/survey-vue3-ui/src/Header.vue b/packages/survey-vue3-ui/src/Header.vue
index e267b80a42..379f417166 100644
--- a/packages/survey-vue3-ui/src/Header.vue
+++ b/packages/survey-vue3-ui/src/Header.vue
@@ -1,18 +1,10 @@
 <template>
   <div v-if="survey.renderedHasHeader" :class="survey.css.header" ref="root">
     <div v-if="survey.isLogoBefore" :class="survey.logoClassNames">
-      <img
-        :class="survey.css.logoImage"
-        :src="logoUrl"
-        :width="survey.renderedLogoWidth"
-        :height="survey.renderedLogoHeight"
-        :alt="survey.locTitle.renderedHtml"
-        :style="{
-          objectFit: survey.logoFit as any,
-          width: survey.renderedStyleLogoWidth,
-          height: survey.renderedStyleLogoHeight,
-        }"
-      />
+      <component
+        :is="survey.getElementWrapperComponentName(survey, 'logo-image')"
+        :data="survey.getElementWrapperComponentData(survey, 'logo-image')"
+      ></component>
     </div>
 
     <div
@@ -27,18 +19,10 @@
     </div>
 
     <div v-if="survey.isLogoAfter" :class="survey.logoClassNames">
-      <img
-        :class="survey.css.logoImage"
-        :src="logoUrl"
-        :width="survey.renderedLogoWidth"
-        :height="survey.renderedLogoHeight"
-        :alt="survey.locTitle.renderedHtml"
-        :style="{
-          objectFit: survey.logoFit as any,
-          width: survey.renderedStyleLogoWidth,
-          height: survey.renderedStyleLogoHeight,
-        }"
-      />
+      <component
+        :is="survey.getElementWrapperComponentName(survey, 'logo-image')"
+        :data="survey.getElementWrapperComponentData(survey, 'logo-image')"
+      ></component>
     </div>
 
     <div :class="survey.css.headerClose"></div>
@@ -48,15 +32,12 @@
 <script lang="ts" setup>
 import type { SurveyModel } from "survey-core";
 import { onMounted, ref } from "vue";
-import { useLocString } from "./base";
 
 const props = defineProps<{
   survey: SurveyModel;
 }>();
 const root = ref<HTMLElement>();
 
-const logoUrl = useLocString(() => props.survey.locLogo);
-
 onMounted(() => {
   var el = root.value;
   if (el && props.survey) props.survey.afterRenderHeader(el as any);
diff --git a/packages/survey-vue3-ui/src/Logo.vue b/packages/survey-vue3-ui/src/Logo.vue
new file mode 100644
index 0000000000..9b17cdb439
--- /dev/null
+++ b/packages/survey-vue3-ui/src/Logo.vue
@@ -0,0 +1,25 @@
+<template>
+  <img
+    :class="survey.css.logoImage"
+    :src="logoUrl"
+    :width="survey.renderedLogoWidth"
+    :height="survey.renderedLogoHeight"
+    :alt="survey.locTitle.renderedHtml"
+    :style="{
+          objectFit: survey.logoFit as any,
+          width: survey.renderedStyleLogoWidth,
+          height: survey.renderedStyleLogoHeight,
+        }"
+  />
+</template>
+<script lang="ts" setup>
+import type { SurveyModel } from "survey-core";
+import { useLocString } from "./base";
+import { computed } from "vue";
+defineOptions({
+  inheritAttrs: false,
+});
+const props = defineProps<{ data: SurveyModel }>();
+const survey = computed(() => props.data);
+const logoUrl = useLocString(() => survey.value.locLogo);
+</script>
diff --git a/packages/survey-vue3-ui/src/Survey.vue b/packages/survey-vue3-ui/src/Survey.vue
index ce69723b59..5084149aee 100644
--- a/packages/survey-vue3-ui/src/Survey.vue
+++ b/packages/survey-vue3-ui/src/Survey.vue
@@ -14,7 +14,10 @@
       <form onsubmit="return false;">
         <div v-if="!vueSurvey.hasLogo" class="sv_custom_header"></div>
         <div :class="css.container">
-          <survey-header v-if="vueSurvey.headerView === 'basic'" :survey="vueSurvey" />
+          <survey-header
+            v-if="vueSurvey.headerView === 'basic'"
+            :survey="vueSurvey"
+          />
           <component
             :is="'sv-components-container'"
             :survey="vueSurvey"
diff --git a/packages/survey-vue3-ui/src/components/header/Header.vue b/packages/survey-vue3-ui/src/components/header/Header.vue
index acc860fcae..a9c6c12c84 100644
--- a/packages/survey-vue3-ui/src/components/header/Header.vue
+++ b/packages/survey-vue3-ui/src/components/header/Header.vue
@@ -1,11 +1,20 @@
 <template>
-  <div :class="model.headerClasses" :style="{ 'height': model.renderedHeight }">
-    <div v-if="!!model.backgroundImage" :class="model.backgroundImageClasses" :style="model.backgroundImageStyle"></div>
-    <div v-if="!survey.isMobile" :class="model.contentClasses" :style="{ maxWidth: model.maxWidth }">
-    <sv-header-cell
-      v-for="cell in model.cells"
-      :model="cell"
-    ></sv-header-cell>
+  <div :class="model.headerClasses" :style="{ height: model.renderedHeight }">
+    <div
+      v-if="!!model.backgroundImage"
+      :class="model.backgroundImageClasses"
+      :style="model.backgroundImageStyle"
+    ></div>
+    <div
+      v-if="!survey.isMobile"
+      :class="model.contentClasses"
+      :style="{ maxWidth: model.maxWidth }"
+    >
+      <sv-header-cell
+        v-for="(cell, index) in model.cells"
+        :model="cell"
+        :key="index"
+      ></sv-header-cell>
     </div>
     <div v-if="survey.isMobile">
       <sv-header-mobile :model="model"></sv-header-mobile>
@@ -14,9 +23,8 @@
 </template>
 
 <script lang="ts" setup>
-import { Base, SurveyModel, Cover, CoverCell } from "survey-core";
+import type { SurveyModel, Cover } from "survey-core";
 import { useBase } from "@/base";
-import { onMounted, onUnmounted, ref } from "vue";
 
 const props = defineProps<{
   model: Cover;
@@ -24,7 +32,8 @@ const props = defineProps<{
 }>();
 
 useBase(() => {
-  props.model.survey = props.survey
+  const model = props.survey;
+  model.survey = props.survey;
   return props.model;
 });
 </script>
diff --git a/packages/survey-vue3-ui/src/index.ts b/packages/survey-vue3-ui/src/index.ts
index 4a6ab50ec3..506b9a0f01 100644
--- a/packages/survey-vue3-ui/src/index.ts
+++ b/packages/survey-vue3-ui/src/index.ts
@@ -124,6 +124,7 @@ import FileChooseButton from "./components/file/FileChooseButton.vue";
 import FilePreview from "./components/file/FilePreview.vue";
 import ButtonGroup from "./buttongroup/ButtonGroup.vue";
 import ButtonGroupItem from "./buttongroup/ButtonGroupItem.vue";
+import Logo from "./Logo.vue";
 export { useBase, useLocString, useQuestion } from "./base";
 
 SurveyModel.platform = "vue3";
@@ -135,6 +136,7 @@ function registerComponents(app: App) {
   app.component("popup-survey", PopupSurvey);
 
   app.component("survey-header", HeaderBasic);
+  app.component("sv-logo-image", Logo);
   app.component("survey-page", Page);
   app.component("survey-row", Row);
   app.component("survey-question", Question);
@@ -247,6 +249,7 @@ function registerComponents(app: App) {
   app.component("sv-loading-indicator", LoadingIndicator);
 
   app.component("sv-header", Header);
+  app.component("sv ");
   app.component("sv-header-cell", HeaderCell);
   app.component("sv-header-mobile", HeaderMobile);
 

From 36c2a144922ca7a486b17cbc3f88fc5788588f4b Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Wed, 8 Nov 2023 15:25:40 +0400
Subject: [PATCH 14/34] small refactor

---
 packages/survey-vue3-ui/src/base.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/survey-vue3-ui/src/base.ts b/packages/survey-vue3-ui/src/base.ts
index 8a782d21b2..913cc357b8 100644
--- a/packages/survey-vue3-ui/src/base.ts
+++ b/packages/survey-vue3-ui/src/base.ts
@@ -91,7 +91,7 @@ export function useBase<T extends Base>(
   onBeforeUnmount(() => {
     const model = getModel();
     if (model) {
-      if (clean) clean(getModel());
+      if (clean) clean(model);
       unMakeReactive(model, isModelSubsribed);
       stopWatch();
     }

From e4379aae72d12b38b6df4e583770159f40da92a6 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Wed, 8 Nov 2023 16:05:41 +0400
Subject: [PATCH 15/34] Implement wrapper for panel inside paneldynamic

---
 packages/survey-vue3-ui/src/PanelDynamic.vue | 36 ++++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/packages/survey-vue3-ui/src/PanelDynamic.vue b/packages/survey-vue3-ui/src/PanelDynamic.vue
index fe8dae0fb9..e0fa7afd52 100644
--- a/packages/survey-vue3-ui/src/PanelDynamic.vue
+++ b/packages/survey-vue3-ui/src/PanelDynamic.vue
@@ -29,7 +29,10 @@
     />
     <template v-for="(panel, index) in renderedPanels" :key="panel.id">
       <div :class="question.getPanelWrapperCss()">
-        <survey-panel :element="panel" :css="css" />
+        <component
+          :is="getPanelComponentName(panel)"
+          v-bind="getPanelComponentData(panel)"
+        ></component>
         <sv-paneldynamic-remove-btn
           v-if="
             question.panelRemoveButtonLocation === 'right' &&
@@ -63,7 +66,11 @@
 </template>
 
 <script lang="ts" setup>
-import type { QuestionPanelDynamicModel } from "survey-core";
+import type {
+  PanelModel,
+  QuestionPanelDynamicModel,
+  SurveyModel,
+} from "survey-core";
 import { useQuestion } from "./base";
 import { computed, getCurrentInstance, ref } from "vue";
 defineOptions({ inheritAttrs: false });
@@ -104,4 +111,29 @@ const renderedPanels = computed(() => {
 const getShowLegacyNavigation = () => {
   return props.question["showLegacyNavigation"];
 };
+
+const getPanelComponentName = (panel: PanelModel): string => {
+  const survey = props.question.getSurvey() as SurveyModel;
+  if (survey) {
+    const name = survey.getElementWrapperComponentName(panel);
+    if (name) {
+      return name;
+    }
+  }
+  return "panel";
+};
+const getPanelComponentData = (panel: PanelModel): any => {
+  const survey = props.question.getSurvey() as SurveyModel;
+  let data: any;
+  if (survey) {
+    data = survey.getElementWrapperComponentData(panel);
+  }
+  return {
+    componentName: "survey-panel",
+    componentData: {
+      element: panel,
+      data: data,
+    },
+  };
+};
 </script>

From 5ac04aefedc791d9a9361aec946174cfcc07cd66 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Wed, 8 Nov 2023 16:05:54 +0400
Subject: [PATCH 16/34] Implement wrapper for row component

---
 packages/survey-vue3-ui/src/Page.vue  | 17 +++++++++--------
 packages/survey-vue3-ui/src/Panel.vue | 23 +++++++++++++----------
 2 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/packages/survey-vue3-ui/src/Page.vue b/packages/survey-vue3-ui/src/Page.vue
index 7d79fde7f1..0446b2eae9 100644
--- a/packages/survey-vue3-ui/src/Page.vue
+++ b/packages/survey-vue3-ui/src/Page.vue
@@ -4,15 +4,16 @@
     <div v-if="showDescription" :class="page.cssClasses.page.description">
       <survey-string :locString="page.locDescription" />
     </div>
-    <template v-for="(row, index) in rows">
-      <survey-row
-        v-if="row.visible"
-        :key="page.id + '_' + index"
-        :row="row"
-        :survey="survey"
-        :css="css"
+    <template v-for="(row, index) in rows" :key="page.id + '_' + index">
+      <component
+        :is="(page.getSurvey() as SurveyModel).getRowWrapperComponentName(row)"
+        v-bind="{
+            componentData: (page.getSurvey() as SurveyModel).getRowWrapperComponentData(row),
+          }"
       >
-      </survey-row>
+        <survey-row v-if="row.visible" :row="row" :survey="survey" :css="css">
+        </survey-row>
+      </component>
     </template>
   </div>
 </template>
diff --git a/packages/survey-vue3-ui/src/Panel.vue b/packages/survey-vue3-ui/src/Panel.vue
index a51ed832c6..32b1d0aaff 100644
--- a/packages/survey-vue3-ui/src/Panel.vue
+++ b/packages/survey-vue3-ui/src/Panel.vue
@@ -18,15 +18,16 @@
       v-if="!isCollapsed"
       :class="element.cssClasses.panel.content"
     >
-      <template v-for="(row, index) in rows">
-        <survey-row
-          v-if="row.visible"
-          :key="element.id + '_' + index"
-          :row="row"
-          :survey="survey"
-          :css="css"
+      <template v-for="(row, index) in rows" :key="element.id + '_' + index">
+        <component
+          :is="(element.getSurvey() as SurveyModel).getRowWrapperComponentName(row)"
+          v-bind="{
+            componentData: (element.getSurvey() as SurveyModel).getRowWrapperComponentData(row),
+          }"
         >
-        </survey-row>
+          <survey-row v-if="row.visible" :row="row" :survey="survey" :css="css">
+          </survey-row>
+        </component>
       </template>
       <sv-action-bar :model="element.getFooterToolbar()"></sv-action-bar>
     </div>
@@ -39,10 +40,12 @@ export default {
 };
 </script>
 <script lang="ts" setup>
-import type { PanelModel } from "survey-core";
+import type { PanelModel, SurveyModel } from "survey-core";
 import { ref, computed, onMounted, onUnmounted } from "vue";
 import { useBase } from "./base";
-
+defineOptions({
+  inheritAttrs: false,
+});
 const props = defineProps<{
   element: PanelModel;
   isEditMode?: boolean;

From fca93c58153d9aef22fda3bffa36965fc54958c4 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Wed, 8 Nov 2023 17:14:45 +0400
Subject: [PATCH 17/34] Fix matrix cell warnings

---
 packages/survey-vue3-ui/src/MatrixCell.vue | 71 +++++++++++-----------
 1 file changed, 34 insertions(+), 37 deletions(-)

diff --git a/packages/survey-vue3-ui/src/MatrixCell.vue b/packages/survey-vue3-ui/src/MatrixCell.vue
index f0305c5b29..e3dafedeb0 100644
--- a/packages/survey-vue3-ui/src/MatrixCell.vue
+++ b/packages/survey-vue3-ui/src/MatrixCell.vue
@@ -27,50 +27,47 @@
     <div
       v-if="cell.hasQuestion"
       :class="question.cssClasses.cellQuestionWrapper"
+      v-show="isVisible"
     >
-      <template v-if="!cell.isChoice && cell.question.isDefaultRendering()">
+      <component
+        v-if="!cell.isChoice && cell.question.isDefaultRendering()"
+        :is="question.getCellWrapperComponentName(cell.cell)"
+        :componentData="question.getCellWrapperComponentData(cell.cell)"
+      >
         <component
-          :is="question.getCellWrapperComponentName(cell.cell)"
-          :componentData="question.getCellWrapperComponentData(cell.cell)"
-        >
-          <component
-            v-show="isVisible"
-            :is="getComponentName(cell.question)"
-            :question="cell.question"
-          />
-        </component>
-      </template>
+          :is="getComponentName(cell.question)"
+          :question="cell.question"
+        />
+      </component>
       <component
         v-if="!cell.isChoice && !cell.question.isDefaultRendering()"
-        v-show="isVisible"
         :is="cell.question.getComponentName()"
         :question="cell.question"
       />
-      <template v-if="cell.isItemChoice">
-        <component
-          :is="question.getCellWrapperComponentName(cell.cell)"
-          :componentData="question.getCellWrapperComponentData(cell.cell)"
-        >
-          <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>
-        </component>
-      </template>
+      <component
+        v-if="cell.isItemChoice"
+        :is="question.getCellWrapperComponentName(cell.cell)"
+        :componentData="question.getCellWrapperComponentData(cell.cell)"
+      >
+        <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>
+      </component>
       <survey-other-choice
         v-if="cell.isOtherChoice"
         :question="cell.question"

From 9f81ae83d44b6b43c58876f7d484ada41d1c9305 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Thu, 9 Nov 2023 16:44:12 +0400
Subject: [PATCH 18/34] Add watch command

---
 packages/survey-vue3-ui/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/survey-vue3-ui/package.json b/packages/survey-vue3-ui/package.json
index 2a9eedc8b9..bc2ddf10a4 100644
--- a/packages/survey-vue3-ui/package.json
+++ b/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",

From 86283faf2c028227f3f17d3bbb031d88a1e92678 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Thu, 9 Nov 2023 20:27:59 +0400
Subject: [PATCH 19/34] Fix panel tries to load all elements if collapsed
 before mount

---
 packages/survey-vue3-ui/src/Panel.vue | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/packages/survey-vue3-ui/src/Panel.vue b/packages/survey-vue3-ui/src/Panel.vue
index 32b1d0aaff..0a2d96126a 100644
--- a/packages/survey-vue3-ui/src/Panel.vue
+++ b/packages/survey-vue3-ui/src/Panel.vue
@@ -15,7 +15,7 @@
     <div
       :id="element.contentId"
       :style="{ paddingLeft: element.innerPaddingLeft }"
-      v-if="!isCollapsed"
+      v-if="!element.isCollapsed"
       :class="element.cssClasses.panel.content"
     >
       <template v-for="(row, index) in rows" :key="element.id + '_' + index">
@@ -41,7 +41,7 @@ export default {
 </script>
 <script lang="ts" setup>
 import type { PanelModel, SurveyModel } from "survey-core";
-import { ref, computed, onMounted, onUnmounted } from "vue";
+import { ref, computed, onMounted } from "vue";
 import { useBase } from "./base";
 defineOptions({
   inheritAttrs: false,
@@ -51,11 +51,9 @@ const props = defineProps<{
   isEditMode?: boolean;
   css?: any;
 }>();
-const isCollapsedValue = ref(false);
 const root = ref<HTMLElement>(null as any);
 const rows = computed(() => props.element.rows);
 const survey = computed(() => props.element.survey);
-const isCollapsed = computed(() => isCollapsedValue.value);
 
 useBase(() => props.element);
 
@@ -63,14 +61,5 @@ onMounted(() => {
   if (props.element.survey) {
     props.element.survey.afterRenderPanel(props.element, root.value);
   }
-  isCollapsedValue.value = props.element.isCollapsed;
-  const element = props.element;
-  element.stateChangedCallback = () => {
-    isCollapsedValue.value = props.element.isCollapsed;
-  };
-});
-onUnmounted(() => {
-  const element = props.element;
-  element.stateChangedCallback = null as any;
 });
 </script>

From 01acb16459b99c4c5cd9ace0ef8bfe1cc98829ba Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Fri, 10 Nov 2023 15:37:10 +0400
Subject: [PATCH 20/34] Fix action bar's handle click is not working

---
 .../src/components/action-bar/ActionBar.vue          | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/survey-vue3-ui/src/components/action-bar/ActionBar.vue b/packages/survey-vue3-ui/src/components/action-bar/ActionBar.vue
index 53f6400378..809984e096 100644
--- a/packages/survey-vue3-ui/src/components/action-bar/ActionBar.vue
+++ b/packages/survey-vue3-ui/src/components/action-bar/ActionBar.vue
@@ -3,11 +3,7 @@
     v-if="model.hasActions"
     ref="root"
     :class="model.getRootCss()"
-    v-on:click="
-      (event) => {
-        event.stopPropagation();
-      }
-    "
+    @click="onClick"
   >
     <sv-action
       v-for="item in renderedActions"
@@ -29,6 +25,12 @@ const props = defineProps<{
 }>();
 const root = ref<HTMLDivElement>(null as any as HTMLDivElement);
 
+const onClick = (event: MouseEvent) => {
+  if (props.handleClick ?? true) {
+    event.stopPropagation();
+  }
+};
+
 useBase(() => props.model);
 
 const renderedActions = computed(() => {

From 2dbb030bfa757002e30d980e3da79dfcd94554d7 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Fri, 10 Nov 2023 17:13:48 +0400
Subject: [PATCH 21/34] Implement wrapper for detail panel

---
 packages/survey-vue3-ui/src/MatrixCell.vue | 48 +++++++++++++++++++---
 1 file changed, 43 insertions(+), 5 deletions(-)

diff --git a/packages/survey-vue3-ui/src/MatrixCell.vue b/packages/survey-vue3-ui/src/MatrixCell.vue
index e3dafedeb0..b67cc29c2f 100644
--- a/packages/survey-vue3-ui/src/MatrixCell.vue
+++ b/packages/survey-vue3-ui/src/MatrixCell.vue
@@ -20,9 +20,8 @@
     ></sv-action-bar>
     <component
       v-if="cell.hasPanel"
-      :is="getComponentName(cell.panel)"
-      :element="cell.panel"
-      :css="question.cssClasses"
+      :is="panelComponentName"
+      v-bind="panelComponentData"
     ></component>
     <div
       v-if="cell.hasQuestion"
@@ -90,9 +89,13 @@
 </template>
 
 <script lang="ts" setup>
-import type { Question, QuestionMatrixDropdownRenderedCell } from "survey-core";
+import type {
+  Question,
+  QuestionMatrixDropdownRenderedCell,
+  SurveyModel,
+} from "survey-core";
 import { getComponentName as getComponent } from "./base";
-import { ref, onMounted, type StyleValue } from "vue";
+import { ref, onMounted, type StyleValue, computed } from "vue";
 
 const props = defineProps<{
   question: Question;
@@ -135,4 +138,39 @@ onMounted(() => {
     cQ.afterRenderCore(el);
   }
 });
+const panelComponentName = computed(() => {
+  const cell = props.cell;
+  if (cell.hasPanel) {
+    const panel = cell.panel;
+    const survey = panel.survey as SurveyModel;
+    if (survey) {
+      const name = survey.getElementWrapperComponentName(panel);
+      if (name) {
+        return name;
+      }
+    }
+    return "survey-panel";
+  }
+  return undefined;
+});
+const panelComponentData = computed(() => {
+  const cell = props.cell;
+  if (cell.hasPanel) {
+    const panel = props.cell.panel;
+    const survey = panel.survey as SurveyModel;
+    let data: any;
+    if (survey) {
+      data = survey.getElementWrapperComponentData(panel);
+    }
+    return {
+      componentName: "survey-panel",
+      componentData: {
+        element: panel,
+        data: data,
+        css: props.question.cssClasses,
+      },
+    };
+  }
+  return undefined;
+});
 </script>

From 43bbf4ead638d698804d39b7bb21614c34f2e6e3 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Fri, 10 Nov 2023 18:30:11 +0400
Subject: [PATCH 22/34] Fix d&d for matrix rows

---
 packages/survey-vue3-ui/src/MatrixTable.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/survey-vue3-ui/src/MatrixTable.vue b/packages/survey-vue3-ui/src/MatrixTable.vue
index 502892a62a..8ae22637c8 100644
--- a/packages/survey-vue3-ui/src/MatrixTable.vue
+++ b/packages/survey-vue3-ui/src/MatrixTable.vue
@@ -41,6 +41,7 @@
         >
           <tr
             :data-sv-drop-target-matrix-row="row.row && row.row.id"
+            @pointerdown="question.onPointerDown($event, row.row)"
             :class="row.className"
             v-if="row.visible"
           >

From 9a0cf8f806bc86c60cd21209d853a48647aecbe0 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Fri, 10 Nov 2023 18:52:46 +0400
Subject: [PATCH 23/34] Fix panel's focusin doesnt work

---
 packages/survey-vue3-ui/src/Panel.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/survey-vue3-ui/src/Panel.vue b/packages/survey-vue3-ui/src/Panel.vue
index 0a2d96126a..9b35bddc39 100644
--- a/packages/survey-vue3-ui/src/Panel.vue
+++ b/packages/survey-vue3-ui/src/Panel.vue
@@ -3,6 +3,7 @@
     v-if="element.isVisible"
     :class="element.getContainerCss()"
     :id="element.id"
+    @focusin="element.focusIn()"
     ref="root"
   >
     <survey-errors :element="element" v-if="element.showErrorsAbovePanel" />

From 8e2092eddc16ca15039b9d8a3b920c2533848b4b Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Fri, 10 Nov 2023 19:10:55 +0400
Subject: [PATCH 24/34] Fix d&d is not working from list

---
 packages/survey-vue3-ui/src/components/list/ListItem.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/survey-vue3-ui/src/components/list/ListItem.vue b/packages/survey-vue3-ui/src/components/list/ListItem.vue
index c75cf52d7c..58e06b55e8 100644
--- a/packages/survey-vue3-ui/src/components/list/ListItem.vue
+++ b/packages/survey-vue3-ui/src/components/list/ListItem.vue
@@ -6,6 +6,7 @@
     v-show="model.isItemVisible(item)"
     :key="item.id"
     :id="elementId"
+    @pointerdown="model.onPointerDown($event, item)"
     v-bind:class="model.getItemClass(item)"
     v-on:click="click"
     v-key2click

From e7e7b5bc56695b081e9112e506df7d41c9168b15 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Fri, 10 Nov 2023 20:19:04 +0400
Subject: [PATCH 25/34] Fix disableTabStop is not working

---
 .../src/components/action-bar/ActionBarItem.vue               | 3 +--
 .../src/components/action-bar/ActionBarItemDropdown.vue       | 2 +-
 packages/survey-vue3-ui/src/index.ts                          | 4 ++++
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/survey-vue3-ui/src/components/action-bar/ActionBarItem.vue b/packages/survey-vue3-ui/src/components/action-bar/ActionBarItem.vue
index d401348461..d510ef00ab 100644
--- a/packages/survey-vue3-ui/src/components/action-bar/ActionBarItem.vue
+++ b/packages/survey-vue3-ui/src/components/action-bar/ActionBarItem.vue
@@ -17,8 +17,7 @@
     v-bind:aria-checked="item.ariaChecked"
     v-bind:aria-expanded="item.ariaExpanded"
     v-bind:role="item.ariaRole"
-    v-bind:tabindex="item.disableTabStop ? -1 : 0"
-    v-key2click
+    v-key2click="{ processEsc: false, disableTabStop: item.disableTabStop }"
   >
     <sv-svg-icon
       v-if="item.iconName"
diff --git a/packages/survey-vue3-ui/src/components/action-bar/ActionBarItemDropdown.vue b/packages/survey-vue3-ui/src/components/action-bar/ActionBarItemDropdown.vue
index 35cf748c49..22efe9024e 100644
--- a/packages/survey-vue3-ui/src/components/action-bar/ActionBarItemDropdown.vue
+++ b/packages/survey-vue3-ui/src/components/action-bar/ActionBarItemDropdown.vue
@@ -16,7 +16,7 @@
     v-bind:title="item.tooltip || item.title"
     v-bind:role="item.ariaRole"
     v-bind:tabindex="item.disableTabStop ? -1 : 0"
-    v-key2click
+    v-key2click="{ processEsc: false, disableTabStop: item.disableTabStop }"
   >
     <sv-svg-icon
       v-if="item.iconName"
diff --git a/packages/survey-vue3-ui/src/index.ts b/packages/survey-vue3-ui/src/index.ts
index 506b9a0f01..8d96b9aa8a 100644
--- a/packages/survey-vue3-ui/src/index.ts
+++ b/packages/survey-vue3-ui/src/index.ts
@@ -266,6 +266,10 @@ function registerComponents(app: App) {
       const options: IAttachKey2clickOptions = { ...binding.value } || {
         processEsc: true,
       };
+      if (options.disableTabStop) {
+        el.tabIndex = -1;
+        return;
+      }
       if (!options.disableTabStop) el.tabIndex = 0;
       el.addEventListener("keyup", (evt: any) => {
         evt.preventDefault();

From a9dfb9fcc3c37f01aa04e185734e494676ae4675 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Mon, 13 Nov 2023 19:38:35 +0400
Subject: [PATCH 26/34] Implement wrappers for
 ranking/radiogroup/checkbox/imagepicker items values

---
 packages/survey-vue3-ui/src/Checkbox.vue      |  91 +-----------
 packages/survey-vue3-ui/src/CheckboxItem.vue  |  29 ++--
 packages/survey-vue3-ui/src/Imagepicker.vue   |  37 +++--
 .../survey-vue3-ui/src/ImagepickerItem.vue    |   2 +-
 packages/survey-vue3-ui/src/MatrixCell.vue    |   4 -
 packages/survey-vue3-ui/src/Radiogroup.vue    |  86 +----------
 .../survey-vue3-ui/src/RadiogroupItem.vue     |  21 ++-
 packages/survey-vue3-ui/src/Ranking.vue       |  82 ++++++-----
 packages/survey-vue3-ui/src/RankingItem.vue   |  34 +++--
 packages/survey-vue3-ui/src/SelectBase.vue    | 138 ++++++++++++++++++
 10 files changed, 277 insertions(+), 247 deletions(-)
 create mode 100644 packages/survey-vue3-ui/src/SelectBase.vue

diff --git a/packages/survey-vue3-ui/src/Checkbox.vue b/packages/survey-vue3-ui/src/Checkbox.vue
index 3aa0066ea7..b47d5b97c6 100644
--- a/packages/survey-vue3-ui/src/Checkbox.vue
+++ b/packages/survey-vue3-ui/src/Checkbox.vue
@@ -1,90 +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";
+import SelectBase from "./SelectBase.vue";
 defineOptions({ inheritAttrs: false });
-const props = defineProps<{ question: QuestionCheckboxModel }>();
-const root = ref(null);
-useQuestion(props, root);
+defineProps<{ question: QuestionCheckboxModel }>();
 </script>
diff --git a/packages/survey-vue3-ui/src/CheckboxItem.vue b/packages/survey-vue3-ui/src/CheckboxItem.vue
index 59977f42db..8486515708 100644
--- a/packages/survey-vue3-ui/src/CheckboxItem.vue
+++ b/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>
diff --git a/packages/survey-vue3-ui/src/Imagepicker.vue b/packages/survey-vue3-ui/src/Imagepicker.vue
index 1b9d8cbe52..a5b2ef9795 100644
--- a/packages/survey-vue3-ui/src/Imagepicker.vue
+++ b/packages/survey-vue3-ui/src/Imagepicker.vue
@@ -2,12 +2,12 @@
   <fieldset :class="question.getSelectBaseRootCss()" ref="root">
     <legend class="sv-hidden">{{ question.locTitle.renderedHtml }}</legend>
     <template v-if="!question.hasColumns">
-      <survey-imagepicker-item
+      <component
         v-for="item in question.visibleChoices"
         :key="item.value"
-        :question="question"
-        :item="item"
-      ></survey-imagepicker-item>
+        :is="getItemValueComponentName(item)"
+        v-bind="getItemValueComponentData(item)"
+      ></component>
     </template>
     <template v-if="question.hasColumns">
       <div
@@ -16,23 +16,42 @@
         :key="colIndex"
         role="presentation"
       >
-        <survey-imagepicker-item
+        <component
           v-for="item in column"
           :key="item.value"
-          :question="question"
-          :item="item"
-        ></survey-imagepicker-item>
+          :is="getItemValueComponentName(item)"
+          v-bind="getItemValueComponentData(item)"
+        ></component>
       </div>
     </template>
   </fieldset>
 </template>
 
 <script lang="ts" setup>
-import type { QuestionImagePickerModel } from "survey-core";
+import type { ItemValue, QuestionImagePickerModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps<{ question: QuestionImagePickerModel }>();
 const root = ref(null);
 useQuestion(props, root);
+const defaultComponentName = "survey-imagepicker-item";
+const getItemValueComponentName = (item: ItemValue) => {
+  return (
+    props.question.getItemValueWrapperComponentName(item) ||
+    defaultComponentName
+  );
+};
+
+const getItemValueComponentData = (item: ItemValue) => {
+  const itemComponent = defaultComponentName;
+  return {
+    componentName: itemComponent,
+    componentData: {
+      question: props.question,
+      item,
+      data: props.question.getItemValueWrapperComponentData(item),
+    },
+  };
+};
 </script>
diff --git a/packages/survey-vue3-ui/src/ImagepickerItem.vue b/packages/survey-vue3-ui/src/ImagepickerItem.vue
index a7f01a6c49..8bdf36a63c 100644
--- a/packages/survey-vue3-ui/src/ImagepickerItem.vue
+++ b/packages/survey-vue3-ui/src/ImagepickerItem.vue
@@ -114,7 +114,7 @@
 <script lang="ts" setup>
 import type { ImageItemValue, QuestionImagePickerModel } from "survey-core";
 import { useBase, useLocString } from "./base";
-
+defineOptions({ inheritAttrs: false });
 const props = defineProps<{
   question: QuestionImagePickerModel;
   item: ImageItemValue;
diff --git a/packages/survey-vue3-ui/src/MatrixCell.vue b/packages/survey-vue3-ui/src/MatrixCell.vue
index b67cc29c2f..9afab70022 100644
--- a/packages/survey-vue3-ui/src/MatrixCell.vue
+++ b/packages/survey-vue3-ui/src/MatrixCell.vue
@@ -51,19 +51,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>
       </component>
diff --git a/packages/survey-vue3-ui/src/Radiogroup.vue b/packages/survey-vue3-ui/src/Radiogroup.vue
index 433aac283a..a047a34c3b 100644
--- a/packages/survey-vue3-ui/src/Radiogroup.vue
+++ b/packages/survey-vue3-ui/src/Radiogroup.vue
@@ -1,90 +1,12 @@
 <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"
-  >
-    <survey-radiogroup-item
-      v-if="!question.hasColumns && !question.blockedRow"
-      v-for="(item, index) in question.bodyItems"
-      :key="item.value"
-      :class="question.getItemClass(item)"
-      :question="question"
-      :item="item"
-      :index="index"
-    ></survey-radiogroup-item>
-    <div :class="question.cssClasses.rootRow" v-if="question.blockedRow">
-      <survey-radiogroup-item
-        v-if="!question.hasColumns && question.blockedRow"
-        v-for="(item, index) in question.dataChoices"
-        :key="item.value"
-        :class="question.getItemClass(item)"
-        :question="question"
-        :item="item"
-        :index="index"
-      ></survey-radiogroup-item>
-    </div>
-    <div
-      v-if="question.hasColumns"
-      :class="question.cssClasses.rootMultiColumn"
-    >
-      <div
-        v-if="question.hasColumns"
-        v-for="(column, colIndex) in question.columns"
-        :class="question.getColumnClass()"
-        role="presentation"
-      >
-        <survey-radiogroup-item
-          v-for="(item, index) in column"
-          :key="item.value"
-          :class="question.getItemClass(item)"
-          :question="question"
-          :item="item"
-          :index="'' + colIndex + index"
-        ></survey-radiogroup-item>
-      </div>
-    </div>
-    <survey-radiogroup-item
-      v-for="(item, index) in question.footItems"
-      v-if="question.hasFootItems"
-      :key="item.value"
-      :class="question.getItemClass(item)"
-      :question="question"
-      :item="item"
-      :index="'' + index"
-    ></survey-radiogroup-item>
-    <survey-other-choice
-      v-if="question.renderedValue && question.isOtherSelected"
-      :question="question"
-    />
-    <div v-if="question.showClearButtonInContent">
-      <input
-        type="button"
-        :class="question.cssClasses.clearButton"
-        v-on:click="
-          () => {
-            question.clearValue();
-          }
-        "
-        :value="question.clearButtonCaption"
-      />
-    </div>
-  </fieldset>
+  <SelectBase :question="question" :input-type="'radio'"></SelectBase>
 </template>
 
 <script lang="ts" setup>
-import type { QuestionRadiogroupModel } from "survey-core";
-import { useQuestion } from "./base";
-import { ref } from "vue";
+import type { QuestionCheckboxModel } from "survey-core";
+import SelectBase from "./SelectBase.vue";
 defineOptions({
   inheritAttrs: false,
 });
-const props = defineProps<{ question: QuestionRadiogroupModel }>();
-const root = ref(null);
-useQuestion<QuestionRadiogroupModel>(props, root);
+defineProps<{ question: QuestionCheckboxModel }>();
 </script>
diff --git a/packages/survey-vue3-ui/src/RadiogroupItem.vue b/packages/survey-vue3-ui/src/RadiogroupItem.vue
index 2f4e2dd96d..5a8efae3da 100644
--- a/packages/survey-vue3-ui/src/RadiogroupItem.vue
+++ b/packages/survey-vue3-ui/src/RadiogroupItem.vue
@@ -1,16 +1,13 @@
 <template>
-  <div role="presentation">
-    <label
-      @mousedown="question.onMouseDown()"
-      :class="getLabelClass(item)"
-    >
+  <div role="presentation" :class="question.getItemClass(item)">
+    <label @mousedown="question.onMouseDown()" :class="getLabelClass(item)">
       <input
         type="radio"
         :name="question.questionName"
         :value="item.value"
         :id="question.getItemId(item)"
         :aria-describedby="question.ariaDescribedBy"
-        v-model="question.renderedValue"
+        v-model="renderedValue"
         :disabled="!question.getItemEnabled(item)"
         :class="question.cssClasses.itemControl"
       /><span
@@ -33,11 +30,13 @@
 <script lang="ts" setup>
 import type { ItemValue, QuestionRadiogroupModel } from "survey-core";
 import { useBase } from "./base";
+import { computed } from "vue";
+
+defineOptions({ inheritAttrs: false });
 
 const props = defineProps<{
   question: QuestionRadiogroupModel;
   item: ItemValue;
-  index: string | number;
   hideLabel?: boolean;
 }>();
 const getLabelClass = (item: any) => {
@@ -47,5 +46,13 @@ const getControlLabelClass = (item: any) => {
   return props.question.getControlLabelClass(item);
 };
 
+const renderedValue = computed({
+  get: () => props.question.renderedValue,
+  set: (val) => {
+    const question = props.question;
+    question.renderedValue = val;
+  },
+});
+
 useBase(() => props.item);
 </script>
diff --git a/packages/survey-vue3-ui/src/Ranking.vue b/packages/survey-vue3-ui/src/Ranking.vue
index 74daf4cdda..9d52481db4 100644
--- a/packages/survey-vue3-ui/src/Ranking.vue
+++ b/packages/survey-vue3-ui/src/Ranking.vue
@@ -1,35 +1,25 @@
 <template>
   <div :class="question.rootClass" ref="root">
-    <survey-ranking-item
-      v-if="!question.selectToRankEnabled"
-      v-for="(item, index) in question.rankingChoices"
-      :key="item.value + '-' + index + '-item'"
-      :class="question.getItemClass(item)"
-      :text="item.locText"
-      :index="index"
-      :indexText="getNumberByIndex(index)"
-      :cssClasses="question.cssClasses"
-      :question="question"
-      :item="item"
-    ></survey-ranking-item>
+    <template v-if="!question.selectToRankEnabled">
+      <component
+        v-for="(item, index) in question.rankingChoices"
+        :key="item.value + '-' + index + '-item'"
+        :is="getItemValueComponentName(item)"
+        v-bind="getItemValueComponentData(item, index)"
+      ></component>
+    </template>
 
     <div
       v-if="question.selectToRankEnabled"
       :class="question.getContainerClasses('from')"
       data-ranking="from-container"
     >
-      <survey-ranking-item
+      <component
         v-for="(item, index) in question.unRankingChoices"
         :key="item.value + '-' + index + '-item'"
-        :class="question.getItemClass(item)"
-        :text="item.locText"
-        :index="index"
-        :indexText="getNumberByIndex(index)"
-        :cssClasses="question.cssClasses"
-        :question="question"
-        :item="item"
-        :unrankedItem="true"
-      ></survey-ranking-item>
+        :is="getItemValueComponentName(item)"
+        v-bind="getItemValueComponentData(item, index, true)"
+      ></component>
 
       <div
         v-if="question.unRankingChoices.length === 0"
@@ -49,17 +39,12 @@
       :class="question.getContainerClasses('to')"
       data-ranking="to-container"
     >
-      <survey-ranking-item
+      <component
         v-for="(item, index) in question.rankingChoices"
         :key="item.value + '-' + index + '-item'"
-        :class="question.getItemClass(item)"
-        :text="item.locText"
-        :index="index"
-        :indexText="getNumberByIndex(index)"
-        :cssClasses="question.cssClasses"
-        :question="question"
-        :item="item"
-      ></survey-ranking-item>
+        :is="getItemValueComponentName(item)"
+        v-bind="getItemValueComponentData(item, index)"
+      ></component>
 
       <div
         v-if="question.rankingChoices.length === 0"
@@ -72,7 +57,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { QuestionRankingModel } from "survey-core";
+import type { ItemValue, QuestionRankingModel } from "survey-core";
 import { useQuestion } from "./base";
 import { ref } from "vue";
 defineOptions({
@@ -81,7 +66,36 @@ defineOptions({
 const props = defineProps<{ question: QuestionRankingModel }>();
 const root = ref(null);
 useQuestion<QuestionRankingModel>(props, root);
-const getNumberByIndex = (index: any) => {
-  return props.question.getNumberByIndex(index);
+const getItemValueComponentName = (item: ItemValue) => {
+  return (
+    props.question.getItemValueWrapperComponentName(item) ||
+    "survey-ranking-item"
+  );
+};
+
+const getItemValueComponentData = (
+  item: ItemValue,
+  index?: number,
+  unrankedItem?: boolean
+) => {
+  const itemComponentProperty =
+    props.question.getPropertyByName("itemComponent");
+  const isDefaultItemComponent = itemComponentProperty.isDefaultValue(
+    props.question.itemComponent
+  );
+  const itemComponent = isDefaultItemComponent
+    ? "survey-ranking-item"
+    : props.question.itemComponent;
+
+  return {
+    componentName: itemComponent,
+    componentData: {
+      question: props.question,
+      item,
+      index: index,
+      unrankedItem: unrankedItem,
+      data: props.question.getItemValueWrapperComponentData(item),
+    },
+  };
 };
 </script>
diff --git a/packages/survey-vue3-ui/src/RankingItem.vue b/packages/survey-vue3-ui/src/RankingItem.vue
index 26a6a01e3e..979f247150 100644
--- a/packages/survey-vue3-ui/src/RankingItem.vue
+++ b/packages/survey-vue3-ui/src/RankingItem.vue
@@ -20,9 +20,9 @@
     "
   >
     <div tabindex="-1" style="outline: none">
-      <div :class="cssClasses.itemGhostNode"></div>
-      <div :class="cssClasses.itemContent">
-        <div :class="cssClasses.itemIconContainer">
+      <div :class="question.cssClasses.itemGhostNode"></div>
+      <div :class="question.cssClasses.itemContent">
+        <div :class="question.cssClasses.itemIconContainer">
           <svg :class="question.getIconHoverCss()">
             <use :xlink:href="question.dragDropSvgIcon"></use>
           </svg>
@@ -31,14 +31,19 @@
           </svg>
         </div>
 
-          <div v-if = "!unrankedItem && indexText" :class="question.getItemIndexClasses(item)">{{ indexText }}</div>
-          <div v-else :class="question.getItemIndexClasses(item)">
-            <svg>
-                <use :xlink:href="question.dashSvgIcon"></use>
-            </svg>
+        <div
+          v-if="!unrankedItem && indexText"
+          :class="question.getItemIndexClasses(item)"
+        >
+          {{ indexText }}
         </div>
-        <div :class="cssClasses.controlLabel">
-          <survey-string :locString="text" />
+        <div v-else :class="question.getItemIndexClasses(item)">
+          <svg>
+            <use :xlink:href="question.dashSvgIcon"></use>
+          </svg>
+        </div>
+        <div :class="question.cssClasses.controlLabel">
+          <survey-string :locString="item.locText" />
         </div>
       </div>
     </div>
@@ -52,17 +57,14 @@ import type {
   QuestionRankingModel,
 } from "survey-core";
 import { useBase } from "./base";
-
+import { computed } from "vue";
+defineOptions({ inheritAttrs: false });
 const props = defineProps<{
   index: number;
-  indexText: string;
-  text: LocalizableString;
-  handleKeydown?: Function;
-  cssClasses: any;
   question: QuestionRankingModel;
   item: ItemValue;
   unrankedItem?: boolean;
 }>();
-
+const indexText = computed(() => props.question.getNumberByIndex(props.index));
 useBase(() => props.item);
 </script>
diff --git a/packages/survey-vue3-ui/src/SelectBase.vue b/packages/survey-vue3-ui/src/SelectBase.vue
new file mode 100644
index 0000000000..6da0af93e3
--- /dev/null
+++ b/packages/survey-vue3-ui/src/SelectBase.vue
@@ -0,0 +1,138 @@
+<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 v-if="showLegend" class="sv-hidden">
+      {{ question.locTitle.renderedHtml }}
+    </legend>
+    <template v-if="question.hasHeadItems">
+      <component
+        v-for="item in question.headItems"
+        :key="item.value"
+        :is="getItemValueComponentName(item)"
+        v-bind="getItemValueComponentData(item)"
+      ></component>
+    </template>
+    <template v-if="!question.hasColumns && !question.blockedRow">
+      <component
+        v-for="item in question.bodyItems"
+        :key="item.value"
+        :is="getItemValueComponentName(item)"
+        v-bind="getItemValueComponentData(item)"
+      ></component>
+    </template>
+    <div :class="question.cssClasses.rootRow" v-if="question.blockedRow">
+      <template v-if="!question.hasColumns && question.blockedRow">
+        <component
+          v-for="item in question.dataChoices"
+          :key="item.value"
+          :is="getItemValueComponentName(item)"
+          v-bind="getItemValueComponentData(item)"
+        ></component>
+      </template>
+    </div>
+    <div
+      v-if="question.hasColumns"
+      :class="question.cssClasses.rootMultiColumn"
+    >
+      <template v-if="question.hasColumns">
+        <div
+          v-for="(column, index) in question.columns"
+          :key="index"
+          :class="question.getColumnClass()"
+          role="presentation"
+        >
+          <component
+            v-for="item in column"
+            :key="item.value"
+            :is="getItemValueComponentName(item)"
+            v-bind="getItemValueComponentData(item)"
+          ></component>
+        </div>
+      </template>
+    </div>
+    <template v-if="question.hasFootItems">
+      <component
+        v-for="item in question.footItems"
+        :key="item.value"
+        :is="getItemValueComponentName(item)"
+        v-bind="getItemValueComponentData(item)"
+      ></component>
+    </template>
+    <survey-other-choice
+      v-if="question.renderedValue && question.isOtherSelected"
+      :question="question"
+    />
+    <div v-if="question.showClearButtonInContent">
+      <input
+        type="button"
+        :class="question.cssClasses.clearButton"
+        v-on:click="
+          () => {
+            question.clearValue();
+          }
+        "
+        :value="question.clearButtonCaption"
+      />
+    </div>
+  </fieldset>
+</template>
+
+<script lang="ts" setup>
+import type {
+  ItemValue,
+  QuestionCheckboxModel,
+  QuestionRadiogroupModel,
+} from "survey-core";
+import { useQuestion } from "./base";
+import { ref } from "vue";
+defineOptions({
+  inheritAttrs: false,
+});
+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()
+  );
+};
+
+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,
+    componentData: {
+      question: props.question,
+      item,
+      data: props.question.getItemValueWrapperComponentData(item),
+    },
+  };
+};
+</script>

From 26d168f99eef99ba81e936c57f26cb47746fb449 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Wed, 15 Nov 2023 15:49:28 +0400
Subject: [PATCH 27/34] Fix vue3 responsivity doesnt work when reseting item
 min/max dimensions

---
 src/utils/responsivity-manager.ts | 28 +++++++++++++++++++++-------
 tests/responsivityTests.ts        | 11 +++++++++--
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/utils/responsivity-manager.ts b/src/utils/responsivity-manager.ts
index 200c121709..cc57a4e130 100644
--- a/src/utils/responsivity-manager.ts
+++ b/src/utils/responsivity-manager.ts
@@ -92,15 +92,29 @@ export class ResponsivityManager {
     if (this.isContainerVisible && !this.model.isResponsivenessDisabled) {
       if (!this.isInitialized) {
         this.model.setActionsMode("large");
-        this.calcItemsSizes();
-        this.isInitialized = true;
+        const recalcItemSizes = () => {
+          this.calcItemsSizes();
+          this.isInitialized = true;
+        };
+        if(queueMicrotask) {
+          queueMicrotask(recalcItemSizes);
+        } else {
+          recalcItemSizes();
+        }
       }
-      let dotsItemSize = this.dotsItemSize;
-      if (!this.dotsItemSize) {
-        const dotsItemElement: HTMLDivElement = this.container?.querySelector(".sv-dots");
-        dotsItemSize = dotsItemElement && this.calcItemSize(dotsItemElement) || this.dotsSizeConst;
+      const processResponsiveness = () => {
+        let dotsItemSize = this.dotsItemSize;
+        if (!this.dotsItemSize) {
+          const dotsItemElement: HTMLDivElement = this.container?.querySelector(".sv-dots");
+          dotsItemSize = dotsItemElement && this.calcItemSize(dotsItemElement) || this.dotsSizeConst;
+        }
+        this.model.fit(this.getAvailableSpace(), dotsItemSize);
+      };
+      if(queueMicrotask) {
+        queueMicrotask(processResponsiveness);
+      } else {
+        processResponsiveness();
       }
-      this.model.fit(this.getAvailableSpace(), dotsItemSize);
     }
   }
 
diff --git a/tests/responsivityTests.ts b/tests/responsivityTests.ts
index c30f2520f2..21d224da31 100644
--- a/tests/responsivityTests.ts
+++ b/tests/responsivityTests.ts
@@ -319,10 +319,10 @@ QUnit.test("ResponsivityManager process test", function (assert) {
       action.maxDimension = 100;
     });
   };
-
+  const oldQueueMicrotask = window.queueMicrotask;
+  window.queueMicrotask = undefined as any;
   assert.equal(manager["isInitialized"], false, "before start");
   manager["process"]();
-
   const newAction = new Action({ id: "first" });
   assert.equal(newAction.minDimension, undefined);
   assert.equal(newAction.maxDimension, undefined);
@@ -335,6 +335,7 @@ QUnit.test("ResponsivityManager process test", function (assert) {
   assert.equal(manager["isInitialized"], true, "after process");
   assert.equal(newAction.minDimension, 20);
   assert.equal(newAction.maxDimension, 100);
+  window.queueMicrotask = oldQueueMicrotask;
 });
 
 QUnit.test("ResponsivityManager minDimension calc test", function (assert) {
@@ -392,6 +393,8 @@ QUnit.test("ResponsivityManager - vertical",
 
 QUnit.test("ResponsivityManager - vertical process", function (assert) {
   const itemSmallWidth = 48;
+  const oldQueueMicrotask = window.queueMicrotask;
+  window.queueMicrotask = undefined as any;
   const container: SimpleContainer = new SimpleContainer({
     offsetHeight: 100,
     querySelector: (query: string) => {
@@ -419,9 +422,12 @@ QUnit.test("ResponsivityManager - vertical process", function (assert) {
   };
   manager["process"]();
   assert.equal(model.hiddenItemsListModel.actions.length, 7);
+  window.queueMicrotask = oldQueueMicrotask;
 });
 
 QUnit.test("isResponsivenessDisabled", function (assert) {
+  const oldQueueMicrotask = window.queueMicrotask;
+  window.queueMicrotask = undefined as any;
   const itemSmallWidth = 48;
   const container: SimpleContainer = new SimpleContainer({});
   const model: AdaptiveActionContainer = new AdaptiveActionContainer();
@@ -467,6 +473,7 @@ QUnit.test("isResponsivenessDisabled", function (assert) {
   assert.equal(item1.mode, "large", "dimension 300");
   assert.equal(item2.mode, "large", "dimension 300");
   assert.equal(item3.mode, "large", "dimension 300");
+  window.queueMicrotask = oldQueueMicrotask;
 });
 
 QUnit.test("check disableHide property", function (assert) {

From 525a9086ca224b787960b82ac95f11826428dfe8 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Wed, 15 Nov 2023 16:37:42 +0400
Subject: [PATCH 28/34] Implement wrappers for matrix single choice

---
 packages/survey-vue3-ui/src/Matrix.vue | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/survey-vue3-ui/src/Matrix.vue b/packages/survey-vue3-ui/src/Matrix.vue
index be50bd0d46..ee8d644e11 100644
--- a/packages/survey-vue3-ui/src/Matrix.vue
+++ b/packages/survey-vue3-ui/src/Matrix.vue
@@ -15,7 +15,14 @@
                 width: question.columnMinWidth,
               }"
             >
-              <survey-string :locString="column.locText" />
+              <component
+                :is="question.getColumnHeaderWrapperComponentName(column)"
+                :componentData="
+                  question.getColumnHeaderWrapperComponentData(column)
+                "
+              >
+                <survey-string :locString="column.locText" />
+              </component>
             </th>
           </tr>
         </thead>
@@ -33,7 +40,12 @@
                 width: question.rowTitleWidth,
               }"
             >
-              <survey-string :locString="row.locText" />
+              <component
+                :is="question.getRowHeaderWrapperComponentName(row)"
+                :componentData="question.getRowHeaderWrapperComponentData(row)"
+              >
+                <survey-string :locString="row.locText" />
+              </component>
             </td>
             <template v-if="question.hasCellText">
               <td

From 1f01416d2a7043bcd6d5cdd5941efe790ca460b4 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Wed, 15 Nov 2023 19:18:47 +0400
Subject: [PATCH 29/34] Fix lazy rendering breaks when row changed

---
 packages/survey-vue3-ui/src/Row.vue | 21 +++++++++++++--------
 packages/survey-vue3-ui/src/base.ts |  4 ++--
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/packages/survey-vue3-ui/src/Row.vue b/packages/survey-vue3-ui/src/Row.vue
index 607a252ff1..ba7403fdf1 100644
--- a/packages/survey-vue3-ui/src/Row.vue
+++ b/packages/survey-vue3-ui/src/Row.vue
@@ -18,7 +18,7 @@ import type {
   SurveyElement,
   SurveyModel,
 } from "survey-core";
-import { computed, onMounted, onUnmounted, ref } from "vue";
+import { computed, onBeforeUnmount, onMounted, onUnmounted, ref } from "vue";
 import { useBase } from "./base";
 
 const props = defineProps<{
@@ -31,7 +31,18 @@ const elements = computed(
 );
 const root = ref<HTMLElement>();
 
-useBase(() => props.row);
+useBase(
+  () => props.row,
+  (newValue, oldValue) => {
+    if (oldValue) {
+      newValue.isNeedRender = oldValue.isNeedRender;
+    }
+  },
+  (value) => {
+    value.stopLazyRendering();
+    value.isNeedRender = !value.isLazyRendering();
+  }
+);
 
 onMounted(() => {
   if (props.row) {
@@ -43,10 +54,4 @@ onMounted(() => {
     }
   }
 });
-onUnmounted(() => {
-  const row = props.row;
-  if (row) {
-    row.isNeedRender = !props.row.isLazyRendering();
-  }
-});
 </script>
diff --git a/packages/survey-vue3-ui/src/base.ts b/packages/survey-vue3-ui/src/base.ts
index 913cc357b8..49d9615fe6 100644
--- a/packages/survey-vue3-ui/src/base.ts
+++ b/packages/survey-vue3-ui/src/base.ts
@@ -69,14 +69,14 @@ function unMakeReactive(surveyElement: Base, isModelSubsribed: boolean) {
 // by convention, composable function names start with "use"
 export function useBase<T extends Base>(
   getModel: () => T,
-  onModelChanged?: (newValue: T) => void,
+  onModelChanged?: (newValue: T, oldValue?: T) => void,
   clean?: (model: T) => void
 ) {
   let isModelSubsribed = false;
   const stopWatch = watch(
     getModel,
     (value, oldValue) => {
-      if (value && onModelChanged) onModelChanged(value);
+      if (value && onModelChanged) onModelChanged(value, oldValue);
       if (oldValue) {
         unMakeReactive(oldValue, isModelSubsribed);
         if (clean) clean(oldValue);

From d445fbe47812a77a409bf6c68fdb0217178d776d Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Wed, 15 Nov 2023 20:03:02 +0400
Subject: [PATCH 30/34] Fix warnings

---
 packages/survey-vue3-ui/src/base.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/survey-vue3-ui/src/base.ts b/packages/survey-vue3-ui/src/base.ts
index 49d9615fe6..2f6e755e80 100644
--- a/packages/survey-vue3-ui/src/base.ts
+++ b/packages/survey-vue3-ui/src/base.ts
@@ -91,8 +91,8 @@ export function useBase<T extends Base>(
   onBeforeUnmount(() => {
     const model = getModel();
     if (model) {
-      if (clean) clean(model);
       unMakeReactive(model, isModelSubsribed);
+      if (clean) clean(model);
       stopWatch();
     }
   });

From 3a7e7c31e1cfcfe26f7414e5814f879851832758 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Wed, 15 Nov 2023 20:30:06 +0400
Subject: [PATCH 31/34] Fix vue f test

---
 src/vue/components/action-bar/action-bar-item-dropdown.vue | 2 +-
 src/vue/components/action-bar/action-bar-item.vue          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/vue/components/action-bar/action-bar-item-dropdown.vue b/src/vue/components/action-bar/action-bar-item-dropdown.vue
index 76f07aecfc..d732ff25e8 100644
--- a/src/vue/components/action-bar/action-bar-item-dropdown.vue
+++ b/src/vue/components/action-bar/action-bar-item-dropdown.vue
@@ -17,7 +17,7 @@
       v-bind:title="item.tooltip || item.title"
       v-bind:role="item.ariaRole"
       v-bind:tabindex="item.disableTabStop ? -1 : 0"
-      v-key2click
+      v-key2click="{ processEsc: false, disableTabStop: item.disableTabStop }"
     >
       <sv-svg-icon
         v-if="item.iconName"
diff --git a/src/vue/components/action-bar/action-bar-item.vue b/src/vue/components/action-bar/action-bar-item.vue
index a945fbca6c..9c5587fe29 100644
--- a/src/vue/components/action-bar/action-bar-item.vue
+++ b/src/vue/components/action-bar/action-bar-item.vue
@@ -18,7 +18,7 @@
     v-bind:aria-expanded="item.ariaExpanded"
     v-bind:role="item.ariaRole"
     v-bind:tabindex="item.disableTabStop ? -1 : 0"
-    v-key2click
+    v-key2click="{ processEsc: false, disableTabStop: item.disableTabStop }"
   >
     <sv-svg-icon
       v-if="item.iconName"

From 93f4d55c20c989d021859ef533da2fdfe761648c Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Wed, 15 Nov 2023 21:30:31 +0400
Subject: [PATCH 32/34] Fix handleClick is false by default (need true)

---
 .../src/components/action-bar/ActionBar.vue     | 17 +++++++++++------
 .../action-bar/ActionBarItemDropdown.vue        |  1 -
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/survey-vue3-ui/src/components/action-bar/ActionBar.vue b/packages/survey-vue3-ui/src/components/action-bar/ActionBar.vue
index 809984e096..e63bdab531 100644
--- a/packages/survey-vue3-ui/src/components/action-bar/ActionBar.vue
+++ b/packages/survey-vue3-ui/src/components/action-bar/ActionBar.vue
@@ -18,15 +18,20 @@ import type { ActionContainer } from "survey-core";
 import { useBase } from "@/base";
 import { computed, onMounted, onUnmounted, ref } from "vue";
 
-const props = defineProps<{
-  model: ActionContainer;
-  container?: string;
-  handleClick?: boolean;
-}>();
+const props = withDefaults(
+  defineProps<{
+    model: ActionContainer;
+    container?: string;
+    handleClick?: boolean;
+  }>(),
+  {
+    handleClick: true,
+  }
+);
 const root = ref<HTMLDivElement>(null as any as HTMLDivElement);
 
 const onClick = (event: MouseEvent) => {
-  if (props.handleClick ?? true) {
+  if (props.handleClick) {
     event.stopPropagation();
   }
 };
diff --git a/packages/survey-vue3-ui/src/components/action-bar/ActionBarItemDropdown.vue b/packages/survey-vue3-ui/src/components/action-bar/ActionBarItemDropdown.vue
index 22efe9024e..778fdcf709 100644
--- a/packages/survey-vue3-ui/src/components/action-bar/ActionBarItemDropdown.vue
+++ b/packages/survey-vue3-ui/src/components/action-bar/ActionBarItemDropdown.vue
@@ -15,7 +15,6 @@
     v-bind:disabled="item.disabled"
     v-bind:title="item.tooltip || item.title"
     v-bind:role="item.ariaRole"
-    v-bind:tabindex="item.disableTabStop ? -1 : 0"
     v-key2click="{ processEsc: false, disableTabStop: item.disableTabStop }"
   >
     <sv-svg-icon

From e8be20945423a1777419ad71c2a161cf1656dc25 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Thu, 16 Nov 2023 13:28:39 +0400
Subject: [PATCH 33/34] Fix advanced header component

---
 .../src/components/header/Header.vue          |  2 +-
 .../src/components/header/HeaderCell.vue      | 43 +++++++++++--------
 packages/survey-vue3-ui/src/index.ts          |  1 -
 3 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/packages/survey-vue3-ui/src/components/header/Header.vue b/packages/survey-vue3-ui/src/components/header/Header.vue
index a9c6c12c84..af54ad73fb 100644
--- a/packages/survey-vue3-ui/src/components/header/Header.vue
+++ b/packages/survey-vue3-ui/src/components/header/Header.vue
@@ -32,7 +32,7 @@ const props = defineProps<{
 }>();
 
 useBase(() => {
-  const model = props.survey;
+  const model = props.model;
   model.survey = props.survey;
   return props.model;
 });
diff --git a/packages/survey-vue3-ui/src/components/header/HeaderCell.vue b/packages/survey-vue3-ui/src/components/header/HeaderCell.vue
index 7140660b65..ed6fab2abb 100644
--- a/packages/survey-vue3-ui/src/components/header/HeaderCell.vue
+++ b/packages/survey-vue3-ui/src/components/header/HeaderCell.vue
@@ -2,22 +2,33 @@
   <div :class="model.css" :style="model.style">
     <div class="sv-header__cell-content" :style="model.contentStyle">
       <div v-if="model.showLogo" class="sv-header__logo">
-      <div :class="model.survey.logoClassNames">
-        <img
-          :class="model.survey.css.logoImage"
-          :src="model.survey.locLogo.renderedHtml"
-          :width="model.survey.renderedLogoWidth"
-          :height="model.survey.renderedLogoHeight"
-          :alt="model.survey.locTitle.renderedHtml"
-          :style="{ 'objectFit': model.survey.logoFit as any, 'width': model.survey.renderedStyleLogoWidth, 'height': model.survey.renderedStyleLogoHeight }"
-        />
+        <div :class="model.survey.logoClassNames">
+          <img
+            :class="model.survey.css.logoImage"
+            :src="model.survey.locLogo.renderedHtml"
+            :width="model.survey.renderedLogoWidth"
+            :height="model.survey.renderedLogoHeight"
+            :alt="model.survey.locTitle.renderedHtml"
+            :style="{ 'objectFit': model.survey.logoFit as any, 'width': model.survey.renderedStyleLogoWidth, 'height': model.survey.renderedStyleLogoHeight }"
+          />
+        </div>
       </div>
-      </div>
-      <div v-if="model.showTitle" class="sv-header__title" :style="{ 'maxWidth': model.textAreaWidth }">
+      <div
+        v-if="model.showTitle"
+        class="sv-header__title"
+        :style="{ maxWidth: model.textAreaWidth }"
+      >
         <survey-element-title :element="model.survey" :css="model.survey.css" />
       </div>
-      <div v-if="model.showDescription" class="sv-header__description" :style="{ 'maxWidth': model.textAreaWidth }">
-        <h5 v-if="model.survey.renderedHasDescription" :class="model.survey.css.description">
+      <div
+        v-if="model.showDescription"
+        class="sv-header__description"
+        :style="{ maxWidth: model.textAreaWidth }"
+      >
+        <h5
+          v-if="model.survey.renderedHasDescription"
+          :class="model.survey.css.description"
+        >
           <survey-string :locString="model.survey.locDescription" />
         </h5>
       </div>
@@ -26,10 +37,8 @@
 </template>
 
 <script lang="ts" setup>
-import { Base, SurveyModel, Cover, CoverCell } from "survey-core";
-import { onMounted, onUnmounted, ref } from "vue";
-
-const props = defineProps<{
+import type { CoverCell } from "survey-core";
+defineProps<{
   model: CoverCell;
 }>();
 </script>
diff --git a/packages/survey-vue3-ui/src/index.ts b/packages/survey-vue3-ui/src/index.ts
index 8d96b9aa8a..c3f1dc85e0 100644
--- a/packages/survey-vue3-ui/src/index.ts
+++ b/packages/survey-vue3-ui/src/index.ts
@@ -249,7 +249,6 @@ function registerComponents(app: App) {
   app.component("sv-loading-indicator", LoadingIndicator);
 
   app.component("sv-header", Header);
-  app.component("sv ");
   app.component("sv-header-cell", HeaderCell);
   app.component("sv-header-mobile", HeaderMobile);
 

From 3cd6b41a280731bdb38dc7d73dba1748c7a2e311 Mon Sep 17 00:00:00 2001
From: Dmitry Kuzin <dk981234@gmail.com>
Date: Thu, 16 Nov 2023 15:28:17 +0400
Subject: [PATCH 34/34] Fix recursive updates in multipletext

---
 packages/survey-vue3-ui/src/Multipletext.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/survey-vue3-ui/src/Multipletext.vue b/packages/survey-vue3-ui/src/Multipletext.vue
index 38f02a4159..c648b9ddf2 100644
--- a/packages/survey-vue3-ui/src/Multipletext.vue
+++ b/packages/survey-vue3-ui/src/Multipletext.vue
@@ -2,7 +2,7 @@
   <table :class="question.getQuestionRootCss()" ref="root">
     <tbody>
       <template
-        v-for="(row, rowIndex) in question.getRows()"
+        v-for="(row, rowIndex) in rows"
         :key="question.inputId + 'rowkey' + rowIndex"
       >
         <tr :class="question.cssClasses.row" v-if="row.isVisible">
@@ -25,9 +25,10 @@
 <script lang="ts" setup>
 import type { QuestionMultipleTextModel } from "survey-core";
 import { useQuestion } from "./base";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps<{ question: QuestionMultipleTextModel }>();
 const root = ref(null);
+const rows = computed(() => props.question.getRows());
 useQuestion(props, root);
 </script>