@wg-npm/survey-creator 1.78.511800 → 1.78.511910

package/dist/survey-creator.esm.js

@@ -21518,6 +21518,7 @@ var script$I = Vue.extend({
         Divider,
         Card,
         Icon,
+        Form,
         QuestionTitle: __vue_component__$4,
         ["SINGLE_SELECTION"]: __vue_component__$8,
         ["MULTI_SELECTION"]: __vue_component__$9,
@@ -21553,23 +21554,16 @@ var script$I = Vue.extend({
             enabledSelectQuestion: false,
             isSelectedQuestion: false,
             currentCustomQuestion: this.customQuestion,
-            collapsible: false,
-            isCheckboxDisabled: false,
         };
     },
     created() {
         this.enabledSelectQuestion = _$1.get(this.$rootComponent, "options.enabledSelectQuestion", false);
         this.enabledQuestionTitleIncompleteTips = _$1.get(this.$rootComponent, "options.enabledQuestionTitleIncompleteTips", false);
-        if (_$1.get(this.$rootComponent, "options.questionReadonly", false)) {
-            this.$set(this.question.options, "readonly", true);
-            this.collapsible = true;
-        }
-        if (_$1.get(this.$rootComponent, "options.disabledInitQuestions", false)) {
-            const initIds = _$1.get(this.$rootComponent, "initQuestionIds", []);
-            this.isCheckboxDisabled = initIds.includes(this.question.id);
-        }
     },
     computed: {
+        isPreviewMode() {
+            return _$1.get(this.$rootComponent, "options.isPreviewMode", false);
+        },
         getClassStyle() {
             return this.questionTitleIncomplete ? "" : "question-incomplete";
         },
@@ -21606,10 +21600,10 @@ var script$I = Vue.extend({
 const __vue_script__$I = script$I;
 
 /* template */
-var __vue_render__$H = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('Card',{staticClass:"question-row",attrs:{"padding":0,"bordered":false,"dis-hover":true}},[_c('div',{class:['question-row-container',{ 'question-row--selected': _vm.isSelectedQuestion }, _vm.getClassStyle]},[(_vm.enabledSelectQuestion)?_c('div',{staticClass:"question-row-container-left"},[_c('Checkbox',{attrs:{"disabled":_vm.isCheckboxDisabled},on:{"on-change":_vm.onSelectQuestion},model:{value:(_vm.isSelectedQuestion),callback:function ($$v) {_vm.isSelectedQuestion=$$v;},expression:"isSelectedQuestion"}})],1):_vm._e(),_vm._v(" "),_c('div',{staticClass:"question-row-container-right"},[_c('span',{directives:[{name:"show",rawName:"v-show",value:(!_vm.questionTitleIncomplete),expression:"!questionTitleIncomplete"}],staticClass:"incomplete-tips"},[_vm._v("\n        "+_vm._s(_vm.t("survey_creator.question.incomplete_tips"))+"\n      ")]),_vm._v(" "),_c('Divider',{staticClass:"question-type-desc",attrs:{"orientation":"left"}},[_vm._v("\n        "+_vm._s(_vm.t(
+var __vue_render__$H = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('Card',{staticClass:"question-row",attrs:{"padding":0,"bordered":false,"dis-hover":true}},[_c('div',{class:['question-row-container',{ 'question-row--selected': _vm.isSelectedQuestion }, _vm.getClassStyle]},[(_vm.enabledSelectQuestion)?_c('div',{staticClass:"question-row-container-left"},[_c('Checkbox',{on:{"on-change":_vm.onSelectQuestion},model:{value:(_vm.isSelectedQuestion),callback:function ($$v) {_vm.isSelectedQuestion=$$v;},expression:"isSelectedQuestion"}})],1):_vm._e(),_vm._v(" "),_c('div',{staticClass:"question-row-container-right"},[_c('span',{directives:[{name:"show",rawName:"v-show",value:(!_vm.questionTitleIncomplete),expression:"!questionTitleIncomplete"}],staticClass:"incomplete-tips"},[_vm._v("\n        "+_vm._s(_vm.t("survey_creator.question.incomplete_tips"))+"\n      ")]),_vm._v(" "),_c('Divider',{staticClass:"question-type-desc",attrs:{"orientation":"left"}},[_vm._v("\n        "+_vm._s(_vm.t(
             ("survey_creator.question.types." + (_vm.question.type)),
             _vm.$rootComponent.currentLanguage
-          ))+"\n      ")]),_vm._v(" "),_c('div',{staticClass:"question-title-header"},[_c('question-title',{staticStyle:{"align-items":"flex-start","flex":"1"},attrs:{"question":_vm.question,"max-score":true,"custom-question":_vm.currentCustomQuestion}}),_vm._v(" "),(_vm.collapsible)?_c('Icon',{class:['collapse-toggle', { 'collapse-toggle--collapsed': !_vm.expanded }],attrs:{"type":"ios-arrow-up"},on:{"click":function($event){$event.stopPropagation();return _vm.toggleExpand.apply(null, arguments)}}}):_vm._e()],1),_vm._v(" "),_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.expanded),expression:"expanded"}],staticClass:"question-row-content"},[_c(_vm.question.type,{tag:"component",staticClass:"question",attrs:{"question":_vm.question,"survey":_vm.survey},on:{"singleQuestion":_vm.getJumpRules}})],1)],1)])])};
+          ))+"\n      ")]),_vm._v(" "),_c('div',{staticClass:"question-title-header"},[_c('question-title',{staticStyle:{"align-items":"flex-start","flex":"1"},attrs:{"question":_vm.question,"max-score":true,"custom-question":_vm.currentCustomQuestion}}),_vm._v(" "),(_vm.isPreviewMode)?_c('Icon',{class:['collapse-toggle', { 'collapse-toggle--collapsed': !_vm.expanded }],attrs:{"type":"ios-arrow-up"},on:{"click":function($event){$event.stopPropagation();return _vm.toggleExpand.apply(null, arguments)}}}):_vm._e()],1),_vm._v(" "),_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.expanded),expression:"expanded"}],staticClass:"question-row-content"},[_c('Form',{attrs:{"disabled":_vm.isPreviewMode}},[_c(_vm.question.type,{tag:"component",staticClass:"question",attrs:{"question":_vm.question,"survey":_vm.survey},on:{"singleQuestion":_vm.getJumpRules}})],1)],1)],1)])])};
 var __vue_staticRenderFns__$H = [];
 
   /* style */
@@ -21681,11 +21675,11 @@ var script$J = Vue.extend({
         questionIds() {
             return this.selectedQuestions.map((question) => question.id);
         },
-        showSelectionCounter() {
+        enabledSelectQuestion() {
             return _$1.get(this.$rootComponent, "options.enabledSelectQuestion", false);
         },
         showCollapseToggle() {
-            return _$1.get(this.$rootComponent, "options.questionReadonly", false);
+            return _$1.get(this.$rootComponent, "options.isPreviewMode", false);
         },
         allExpanded() {
             return this.sortQuestions.every((q) => this.expandedMap[q.id] !== false);
@@ -21696,11 +21690,6 @@ var script$J = Vue.extend({
         someSelected() {
             return this.selectedQuestions.length > 0 && this.selectedQuestions.length < this.sortQuestions.length;
         },
-        disabledQuestionIds() {
-            return _$1.get(this.$rootComponent, "options.disabledInitQuestions", false)
-                ? _$1.get(this.$rootComponent, "initQuestionIds", [])
-                : [];
-        },
     },
     methods: {
         surveyCustomQuestion(questionId) {
@@ -21802,10 +21791,8 @@ var script$J = Vue.extend({
             }
             else {
                 this.sortQuestions
-                    .filter((q) => !this.disabledQuestionIds.includes(q.id))
                     .forEach((q) => this.$refs[`question${q.id}`][0]?.selectQuestion(false));
-                const kept = this.selectedQuestions.filter((q) => this.disabledQuestionIds.includes(q.id));
-                this.selectedQuestions.splice(0, Infinity, ...kept);
+                this.selectedQuestions.splice(0, Infinity);
             }
             this.sortSelectedQuestions();
             this.$emit("selected-question-ids", this.questionIds);
@@ -21837,7 +21824,7 @@ var script$J = Vue.extend({
 const __vue_script__$J = script$J;
 
 /* template */
-var __vue_render__$I = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"survey-internal-previewer-wrapper"},[(_vm.showSelectionCounter || _vm.showCollapseToggle)?_c('div',{staticClass:"question-selection-counter"},[(_vm.showCollapseToggle)?_c('img',{staticClass:"collapse-toggle-all",attrs:{"src":_vm.allExpanded ? _vm.arrowUpSvg : _vm.arrowDownSvg},on:{"click":_vm.toggleAllExpand}}):_vm._e(),_vm._v(" "),(_vm.showSelectionCounter)?_c('Checkbox',{attrs:{"value":_vm.allSelected,"indeterminate":_vm.someSelected},on:{"on-change":_vm.toggleSelectAll}}):_vm._e(),_vm._v(" "),(_vm.showSelectionCounter)?[_vm._v("\n      "+_vm._s(_vm.t("survey_creator.previewer.counter_total", [_vm.sortQuestions.length]))+"\n      "),_c('span',{staticClass:"question-selection-counter__num"},[_vm._v(_vm._s(_vm.selectedQuestions.length))]),_vm._v("\n      "+_vm._s(_vm.t("survey_creator.previewer.counter_suffix"))+"\n    ")]:_vm._e()],2):_vm._e(),_vm._v(" "),_vm._l((_vm.sortQuestions),function(question){return _c('previewer-question-row',{key:question.id,ref:("question" + (question.id)),refInFor:true,attrs:{"question":question,"survey":_vm.survey,"expanded":_vm.expandedMap[question.id],"custom-question":_vm.surveyCustomQuestion(question.id)},on:{"singleQuestion":_vm.handleSelected,"onSelectQuestion":_vm.onSelectQuestion,"toggle-expand":function($event){return _vm.onToggleExpand(question.id)}}})})],2)};
+var __vue_render__$I = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"survey-internal-previewer-wrapper"},[(_vm.enabledSelectQuestion || _vm.showCollapseToggle)?_c('div',{staticClass:"question-selection-counter"},[(_vm.showCollapseToggle)?_c('img',{staticClass:"collapse-toggle-all",attrs:{"src":_vm.allExpanded ? _vm.arrowUpSvg : _vm.arrowDownSvg},on:{"click":_vm.toggleAllExpand}}):_vm._e(),_vm._v(" "),(_vm.enabledSelectQuestion)?_c('Checkbox',{attrs:{"value":_vm.allSelected,"indeterminate":_vm.someSelected},on:{"on-change":_vm.toggleSelectAll}}):_vm._e(),_vm._v(" "),(_vm.enabledSelectQuestion)?[_vm._v("\n      "+_vm._s(_vm.t("survey_creator.previewer.counter_total", [_vm.sortQuestions.length]))+"\n      "),_c('span',{staticClass:"question-selection-counter__num"},[_vm._v(_vm._s(_vm.selectedQuestions.length))]),_vm._v("\n      "+_vm._s(_vm.t("survey_creator.previewer.counter_suffix"))+"\n    ")]:_vm._e()],2):_vm._e(),_vm._v(" "),_vm._l((_vm.sortQuestions),function(question){return _c('previewer-question-row',{key:question.id,ref:("question" + (question.id)),refInFor:true,attrs:{"question":question,"survey":_vm.survey,"expanded":_vm.expandedMap[question.id],"custom-question":_vm.surveyCustomQuestion(question.id)},on:{"singleQuestion":_vm.handleSelected,"onSelectQuestion":_vm.onSelectQuestion,"toggle-expand":function($event){return _vm.onToggleExpand(question.id)}}})})],2)};
 var __vue_staticRenderFns__$I = [];
 
   /* style */
@@ -22465,7 +22452,7 @@ var script$N = Vue.extend({
 const __vue_script__$N = script$N;
 
 /* template */
-var __vue_render__$M = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.showQuestionWhenPageLoad)?_c('div',[_c('question-edit-drawer',{ref:"editDrawer",attrs:{"question":_vm.editingQuestion,"operation-type":_vm.operationType},on:{"on-close":_vm.questionEditDrawClose,"on-open":_vm.questionEditDrawOpen},model:{value:(_vm.questionEditDrawerVisible),callback:function ($$v) {_vm.questionEditDrawerVisible=$$v;},expression:"questionEditDrawerVisible"}})],1):_c('div',{staticClass:"survey-creator-wrapper"},[_c('Card',{attrs:{"bordered":false,"dis-hover":""}},[_c('Row',{attrs:{"align":"middle","justify":"space-between","type":"flex"}},[_c('Col',{attrs:{"span":"20"}},[_c('Icon',{staticClass:"icon-clipboard",attrs:{"custom":"i-icon icon-clipboard","size":"24"}}),_vm._v(" "),_c('span',{staticClass:"title"},[_vm._v("\n        "+_vm._s(_vm._f("translate")(_vm.survey.name.text,true))+"\n      ")])],1),_vm._v(" "),_c('Col',[_c('Button',{attrs:{"icon":"ios-arrow-back"},on:{"click":_vm.onBack}},[_vm._v(_vm._s(_vm.t('survey_creator.common.back')))])],1)],1)],1),_vm._v(" "),(_vm.isPreviewMode)?_c('survey-internal-previewer',{staticStyle:{"height":"calc(100vh - 130px)"},attrs:{"options":this.options,"survey":this.currentSurvey,"operation-type":_vm.operationType}}):_c('Card',{staticStyle:{"height":"calc(100vh - 130px)"},attrs:{"bordered":false,"dis-hover":""}},[_c('Tabs',{attrs:{"type":"card"},model:{value:(_vm.activeTab),callback:function ($$v) {_vm.activeTab=$$v;},expression:"activeTab"}},[_c('TabPane',{attrs:{"label":_vm.t('survey_creator.common.tab.question_setting'),"name":"EDIT"}},[(_vm.activeTab === 'EDIT')?_c('div',[_c('Row',{staticClass:"survey-operate",attrs:{"type":"flex","justify":"space-between","align":"middle","gutter":48}},[_c('Col',[_c('create-question-dropdown',{attrs:{"options":_vm.options}})],1),_vm._v(" "),_c('Col',[_c('edit-options',{staticClass:"edit-option",attrs:{"survey":this.currentSurvey}})],1)],1),_vm._v(" "),_c('div',{staticStyle:{"width":"100%"}},[_vm._t("extra")],2),_vm._v(" "),_c('Scroll',{staticClass:"question-content",attrs:{"height":_vm.height}},[_c('survey-editor',{attrs:{"options":this.options,"survey":this.currentSurvey}})],1)],1):_vm._e()]),_vm._v(" "),_c('TabPane',{attrs:{"label":_vm.t('survey_creator.common.tab.language'),"name":"TRANSLATE"}},[(_vm.activeTab === 'TRANSLATE')?_c('survey-translator',{attrs:{"options":this.options,"survey":this.currentSurvey}}):_vm._e()],1)],1)],1),_vm._v(" "),_c('question-edit-drawer',{ref:"editDrawer",attrs:{"question":_vm.editingQuestion,"operation-type":_vm.operationType},model:{value:(_vm.questionEditDrawerVisible),callback:function ($$v) {_vm.questionEditDrawerVisible=$$v;},expression:"questionEditDrawerVisible"}}),_vm._v(" "),(_vm.questionJumpDrawerVisible)?_c('div',{staticStyle:{"height":"100%"}},[_c('question-jump-setting-drawer',{ref:"jumpDrawer",attrs:{"from-question":_vm.jumpFromQuestion,"to-questions":_vm.jumpToQuestions,"operation-type":_vm.operationType},model:{value:(_vm.questionJumpDrawerVisible),callback:function ($$v) {_vm.questionJumpDrawerVisible=$$v;},expression:"questionJumpDrawerVisible"}})],1):_vm._e(),_vm._v(" "),_c('div',{staticClass:"save-card"},[_c('Button',{attrs:{"loading":_vm.loading,"type":"primary","disabled":_vm.isSaved},on:{"click":_vm.onSave}},[_vm._v(_vm._s(_vm.t("survey_creator.common.save"))+"\n            ")])],1)],1)])};
+var __vue_render__$M = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.showQuestionWhenPageLoad)?_c('div',[_c('question-edit-drawer',{ref:"editDrawer",attrs:{"question":_vm.editingQuestion,"operation-type":_vm.operationType},on:{"on-close":_vm.questionEditDrawClose,"on-open":_vm.questionEditDrawOpen},model:{value:(_vm.questionEditDrawerVisible),callback:function ($$v) {_vm.questionEditDrawerVisible=$$v;},expression:"questionEditDrawerVisible"}})],1):_c('div',{staticClass:"survey-creator-wrapper"},[_c('Card',{attrs:{"bordered":false,"dis-hover":""}},[_c('Row',{attrs:{"align":"middle","justify":"space-between","type":"flex"}},[_c('Col',{attrs:{"span":"20"}},[_c('Icon',{staticClass:"icon-clipboard",attrs:{"custom":"i-icon icon-clipboard","size":"24"}}),_vm._v(" "),_c('span',{staticClass:"title"},[_vm._v("\n        "+_vm._s(_vm._f("translate")(_vm.survey.name.text,true))+"\n      ")])],1),_vm._v(" "),_c('Col',[_c('Button',{attrs:{"icon":"ios-arrow-back"},on:{"click":_vm.onBack}},[_vm._v(_vm._s(_vm.t('survey_creator.common.back')))])],1)],1)],1),_vm._v(" "),(_vm.isPreviewMode)?_c('survey-internal-previewer',{staticStyle:{"height":"calc(100vh - 130px)"},attrs:{"options":this.options,"survey":this.currentSurvey,"operation-type":_vm.operationType}}):_c('Card',{staticStyle:{"height":"calc(100vh - 130px)"},attrs:{"bordered":false,"dis-hover":""}},[_c('Tabs',{attrs:{"type":"card"},model:{value:(_vm.activeTab),callback:function ($$v) {_vm.activeTab=$$v;},expression:"activeTab"}},[_c('TabPane',{attrs:{"label":_vm.t('survey_creator.common.tab.question_setting'),"name":"EDIT"}},[(_vm.activeTab === 'EDIT')?_c('div',[_c('Row',{staticClass:"survey-operate",attrs:{"type":"flex","justify":"space-between","align":"middle","gutter":48}},[_c('Col',{staticStyle:{"display":"flex","align-items":"center"}},[_c('create-question-dropdown',{attrs:{"options":_vm.options}}),_vm._v(" "),_vm._t("add-question-extra")],2),_vm._v(" "),_c('Col',[_c('edit-options',{staticClass:"edit-option",attrs:{"survey":this.currentSurvey}})],1)],1),_vm._v(" "),_c('div',{staticStyle:{"width":"100%"}},[_vm._t("extra")],2),_vm._v(" "),_c('Scroll',{staticClass:"question-content",attrs:{"height":_vm.height}},[_c('survey-editor',{attrs:{"options":this.options,"survey":this.currentSurvey}})],1)],1):_vm._e()]),_vm._v(" "),_c('TabPane',{attrs:{"label":_vm.t('survey_creator.common.tab.language'),"name":"TRANSLATE"}},[(_vm.activeTab === 'TRANSLATE')?_c('survey-translator',{attrs:{"options":this.options,"survey":this.currentSurvey}}):_vm._e()],1)],1)],1),_vm._v(" "),_c('question-edit-drawer',{ref:"editDrawer",attrs:{"question":_vm.editingQuestion,"operation-type":_vm.operationType},model:{value:(_vm.questionEditDrawerVisible),callback:function ($$v) {_vm.questionEditDrawerVisible=$$v;},expression:"questionEditDrawerVisible"}}),_vm._v(" "),(_vm.questionJumpDrawerVisible)?_c('div',{staticStyle:{"height":"100%"}},[_c('question-jump-setting-drawer',{ref:"jumpDrawer",attrs:{"from-question":_vm.jumpFromQuestion,"to-questions":_vm.jumpToQuestions,"operation-type":_vm.operationType},model:{value:(_vm.questionJumpDrawerVisible),callback:function ($$v) {_vm.questionJumpDrawerVisible=$$v;},expression:"questionJumpDrawerVisible"}})],1):_vm._e(),_vm._v(" "),_c('div',{staticClass:"save-card"},[_c('Button',{attrs:{"loading":_vm.loading,"type":"primary","disabled":_vm.isSaved},on:{"click":_vm.onSave}},[_vm._v(_vm._s(_vm.t("survey_creator.common.save"))+"\n            ")])],1)],1)])};
 var __vue_staticRenderFns__$M = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wg-npm/survey-creator",
-  "version": "1.78.511800",
+  "version": "1.78.511910",
   "description": "",
   "license": "MIT",
   "scripts": {
@@ -12,8 +12,8 @@
     "lint-fix": "eslint \"**/*.ts\"  \"**/*.vue\" --fix --no-error-on-unmatched-pattern"
   },
   "peerDependencies": {
-    "@wg-npm/survey-core": "1.78.511800",
-    "@wg-npm/survey-service-api": "1.78.511800",
+    "@wg-npm/survey-core": "1.78.511910",
+    "@wg-npm/survey-service-api": "1.78.511910",
     "axios": "^0.19.2",
     "camelcase": "^6.0.0",
     "deepmerge": "^4.2.2",
@@ -38,8 +38,8 @@
     "@typescript-eslint/eslint-plugin": "^3.6.0",
     "@typescript-eslint/parser": "^3.6.0",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "@wg-npm/survey-core": "1.78.511800",
-    "@wg-npm/survey-service-api": "1.78.511800",
+    "@wg-npm/survey-core": "1.78.511910",
+    "@wg-npm/survey-service-api": "1.78.511910",
     "acorn": "^7.3.1",
     "axios": "^0.19.2",
     "babelrc-rollup": "^3.0.0",
@@ -79,7 +79,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f335e99c793cb1eaf97b5ce76f02b47071e2eb41",
+  "gitHead": "70ddc2d357bb86218aa42d4f0b4aa3e1780959c5",
   "rollup": {
     "external": [
       "vue",

package/src/components/previewer/previewer-question-row.vue

@@ -2,7 +2,7 @@
   <Card class="question-row" :padding="0" :bordered="false" :dis-hover="true">
     <div :class="['question-row-container',{ 'question-row--selected': isSelectedQuestion }, getClassStyle]">
       <div class="question-row-container-left" v-if="enabledSelectQuestion">
-        <Checkbox v-model="isSelectedQuestion" :disabled="isCheckboxDisabled" @on-change="onSelectQuestion" />
+        <Checkbox v-model="isSelectedQuestion" @on-change="onSelectQuestion" />
       </div>
       <div class="question-row-container-right">
         <span class="incomplete-tips" v-show="!questionTitleIncomplete">
@@ -23,20 +23,22 @@
             :custom-question="currentCustomQuestion"
           />
           <Icon
-            v-if="collapsible"
+            v-if="isPreviewMode"
             type="ios-arrow-up"
             :class="['collapse-toggle', { 'collapse-toggle--collapsed': !expanded }]"
             @click.stop="toggleExpand"
           />
         </div>
         <div class="question-row-content" v-show="expanded">
-          <component
-            class="question"
-            :is="question.type"
-            :question="question"
-            :survey="survey"
-            @singleQuestion="getJumpRules"
-          />
+          <Form :disabled="isPreviewMode">
+            <component
+              class="question"
+              :is="question.type"
+              :question="question"
+              :survey="survey"
+              @singleQuestion="getJumpRules"
+            />
+          </Form>
         </div>
       </div>
     </div>
@@ -45,7 +47,7 @@
 
 <script lang="ts">
 import Vue from "vue";
-import { Card, Col, Divider, Row, Checkbox, Icon } from "view-design";
+import { Card, Col, Divider, Row, Checkbox, Icon, Form } from "view-design";
 import LocaleMixin from "../../mixins/locale-mixin";
 import {
   BaseQuestionModel,
@@ -72,6 +74,7 @@ export default Vue.extend({
     Divider,
     Card,
     Icon,
+    Form,
     QuestionTitle,
     [QuestionType.SINGLE_SELECTION]: SingleSelection,
     [QuestionType.MULTI_SELECTION]: MultiSelection,
@@ -107,36 +110,19 @@ export default Vue.extend({
       enabledSelectQuestion: false,
       isSelectedQuestion: false,
       currentCustomQuestion: this.customQuestion,
-      collapsible: false,
-      isCheckboxDisabled: false,
     };
   },
   created() {
     // @ts-ignore
-    this.enabledSelectQuestion = _.get(
-      this.$rootComponent,
-      "options.enabledSelectQuestion",
-      false
-    );
-      // @ts-ignore
-    this.enabledQuestionTitleIncompleteTips = _.get(
-      this.$rootComponent,
-      "options.enabledQuestionTitleIncompleteTips",
-      false
-    );
-    // @ts-ignore
-    if (_.get(this.$rootComponent, "options.questionReadonly", false)) {
-      this.$set(this.question.options, "readonly", true);
-      this.collapsible = true;
-    }
+    this.enabledSelectQuestion = _.get(this.$rootComponent, "options.enabledSelectQuestion", false);
     // @ts-ignore
-    if (_.get(this.$rootComponent, "options.disabledInitQuestions", false)) {
-      // @ts-ignore
-      const initIds: string[] = _.get(this.$rootComponent, "initQuestionIds", []);
-      this.isCheckboxDisabled = initIds.includes(this.question.id as string);
-    }
+    this.enabledQuestionTitleIncompleteTips = _.get(this.$rootComponent, "options.enabledQuestionTitleIncompleteTips", false);
   },
   computed: {
+    isPreviewMode() {
+      // @ts-ignore
+      return _.get(this.$rootComponent, "options.isPreviewMode", false);
+    },
     getClassStyle() {
       return this.questionTitleIncomplete ? "" : "question-incomplete";
     },

package/src/components/previewer/survey-internal-previewer.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="survey-internal-previewer-wrapper">
-    <div v-if="showSelectionCounter || showCollapseToggle" class="question-selection-counter">
+    <div v-if="enabledSelectQuestion || showCollapseToggle" class="question-selection-counter">
       <img
         v-if="showCollapseToggle"
         :src="allExpanded ? arrowUpSvg : arrowDownSvg"
@@ -8,12 +8,12 @@
         @click="toggleAllExpand"
       />
       <Checkbox
-        v-if="showSelectionCounter"
+        v-if="enabledSelectQuestion"
         :value="allSelected"
         :indeterminate="someSelected"
         @on-change="toggleSelectAll"
       />
-      <template v-if="showSelectionCounter">
+      <template v-if="enabledSelectQuestion">
         {{ t("survey_creator.previewer.counter_total", [sortQuestions.length]) }}
         <span class="question-selection-counter__num">{{ selectedQuestions.length }}</span>
         {{ t("survey_creator.previewer.counter_suffix") }}
@@ -83,11 +83,11 @@ export default Vue.extend({
     questionIds() {
       return this.selectedQuestions.map((question) => question.id);
     },
-    showSelectionCounter() {
+    enabledSelectQuestion() {
       return _.get(this.$rootComponent, "options.enabledSelectQuestion", false);
     },
     showCollapseToggle() {
-      return _.get(this.$rootComponent, "options.questionReadonly", false);
+      return _.get(this.$rootComponent, "options.isPreviewMode", false);
     },
     allExpanded() {
       return this.sortQuestions.every((q) => this.expandedMap[q.id] !== false);
@@ -98,11 +98,6 @@ export default Vue.extend({
     someSelected() {
       return this.selectedQuestions.length > 0 && this.selectedQuestions.length < this.sortQuestions.length;
     },
-    disabledQuestionIds(): string[] {
-      return _.get(this.$rootComponent, "options.disabledInitQuestions", false)
-        ? _.get(this.$rootComponent, "initQuestionIds", [])
-        : [];
-    },
   },
   methods: {
     surveyCustomQuestion(questionId) {
@@ -230,10 +225,8 @@ export default Vue.extend({
           .forEach((q) => this.selectQuestionHandler(true, q));
       } else {
         this.sortQuestions
-          .filter((q) => !this.disabledQuestionIds.includes(q.id))
           .forEach((q) => (this.$refs[`question${q.id}`] as any[])[0]?.selectQuestion(false));
-        const kept = (this.selectedQuestions as any[]).filter((q) => this.disabledQuestionIds.includes(q.id));
-        (this.selectedQuestions as any[]).splice(0, Infinity, ...kept);
+        (this.selectedQuestions as any[]).splice(0, Infinity);
       }
       this.sortSelectedQuestions();
       this.$emit("selected-question-ids", this.questionIds);

package/src/components/survey-creator.vue

@@ -38,8 +38,9 @@
                     <TabPane :label="t('survey_creator.common.tab.question_setting')" name="EDIT">
                         <div v-if="activeTab === 'EDIT'">
                             <Row type="flex" justify="space-between" class="survey-operate" align="middle" :gutter="48">
-                                <Col>
+                                <Col style="display: flex; align-items: center;">
                                     <create-question-dropdown :options="options"/>
+                                    <slot name="add-question-extra"></slot>
                                 </Col>
                                 <Col>
                                     <edit-options class="edit-option" :survey="this.currentSurvey"></edit-options>

package/src/styles/components/survey-preview.less

@@ -14,7 +14,7 @@
       .question-selection-counter {
         display: flex;
         align-items: center;
-        padding: 0 36px 8px;
+        padding: 0 20px 8px;
         color: var(---T3-, #70748C);
         font-feature-settings: 'liga' off, 'clig' off;
         font-family: "PingFang SC";
@@ -44,7 +44,7 @@
       }
 
       .question-row {
-        padding: 8px 20px;
+        padding: 8px 0;
 
         .question-row-container {
           display: flex;

package/types/survey-previewer.d.ts

@@ -5,8 +5,7 @@ export interface SurveyPreviewerOptions {
   back: Boolean;
   changeLanguage: Boolean;
   enabledSelectQuestion?: Boolean;
-  questionReadonly?: Boolean;
-  disabledInitQuestions?: Boolean;
+  isPreviewMode?: Boolean;
 }
 
 export declare class SurveyPreviewer extends Vue {