@wg-npm/survey-creator 0.5.0 → 0.5.2

package/dist/survey-creator.esm.js

@@ -76,6 +76,7 @@ var defaultLang = {
                 delete_option_desc: "该选项参与逻辑跳转设置，删除后，相关逻辑跳转关系会自动清除，是否确认要删除？",
                 delete_question_desc: "该题目参与逻辑跳转设置，删除后，相关逻辑跳转关系会自动清除，是否确认要删除？",
             },
+            incomplete_tips: "题目未设置完整",
             optional: "选项",
             sub_questions: "子题",
             score: "分值",
@@ -985,8 +986,22 @@ var script$J = Vue.extend({
             type: Object,
             required: true,
         },
+        surveyCustomQuestions: {
+            type: Array,
+            required: false,
+        },
     },
     computed: {
+        customFilledTitle() {
+            return _$1.find(this.surveyCustomQuestions, (q) => q.id === this.question.id).filledTitle;
+        },
+        formatTitle() {
+            let title = this.translate(this.question.header.text, true);
+            if (!this.isRichText) {
+                return [title];
+            }
+            return title.split(/_{5,}/g);
+        },
         maxScore() {
             return BaseQuestionModel.getMaxScore(this.question);
         },
@@ -1011,24 +1026,77 @@ var script$J = Vue.extend({
         },
     },
     methods: {
-        formatTitle(title) {
-            if (!this.isRichText) {
-                return title;
+        showInput(index) {
+            if (index === this.formatTitle.length - 2 &&
+                this.formatTitle[this.formatTitle.length - 1] === "") {
+                return false;
             }
-            const inputHtml = `<Input style="border: 1px solid #dcdee2;border-radius: 3px;font-size: 12px;margin: 0 16px 8px;padding: 4px;" placeholder="${this.t("survey_creator.question.rich_text.input_placeholder")}" />`;
-            return title.replace(/_{5,}/g, inputHtml);
+            return index < this.formatTitle.length - 1;
         },
     },
 });
 
+const isOldIE = typeof navigator !== 'undefined' &&
+    /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
+function createInjector(context) {
+    return (id, style) => addStyle(id, style);
+}
+let HEAD;
+const styles = {};
+function addStyle(id, css) {
+    const group = isOldIE ? css.media || 'default' : id;
+    const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
+    if (!style.ids.has(id)) {
+        style.ids.add(id);
+        let code = css.source;
+        if (css.map) {
+            // https://developer.chrome.com/devtools/docs/javascript-debugging
+            // this makes source maps inside style tags work properly in Chrome
+            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
+            // http://stackoverflow.com/a/26603875
+            code +=
+                '\n/*# sourceMappingURL=data:application/json;base64,' +
+                    btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
+                    ' */';
+        }
+        if (!style.element) {
+            style.element = document.createElement('style');
+            style.element.type = 'text/css';
+            if (css.media)
+                style.element.setAttribute('media', css.media);
+            if (HEAD === undefined) {
+                HEAD = document.head || document.getElementsByTagName('head')[0];
+            }
+            HEAD.appendChild(style.element);
+        }
+        if ('styleSheet' in style.element) {
+            style.styles.push(code);
+            style.element.styleSheet.cssText = style.styles
+                .filter(Boolean)
+                .join('\n');
+        }
+        else {
+            const index = style.ids.size - 1;
+            const textNode = document.createTextNode(code);
+            const nodes = style.element.childNodes;
+            if (nodes[index])
+                style.element.removeChild(nodes[index]);
+            if (nodes.length)
+                style.element.insertBefore(textNode, nodes[index]);
+            else
+                style.element.appendChild(textNode);
+        }
+    }
+}
+
 /* script */
 const __vue_script__$J = script$J;
 
 /* template */
-var __vue_render__$J = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"question-title"},[_c('label',{staticClass:"star"},[_vm._v(_vm._s(_vm.question.options.required ? "*" : ""))]),_vm._v(" "),(_vm.question.header.number)?_c('span',{staticClass:"number"},[_vm._v(_vm._s(_vm.question.header.number)+".")]):_vm._e(),_vm._v(" "),_c('span',{staticClass:"content",domProps:{"innerHTML":_vm._s(_vm.formatTitle(_vm.translate(_vm.question.header.text, true)))}}),_vm._v(" "),(_vm.haveMaxScore)?_c('span',{staticClass:"options-explain"},[_vm._v("("+_vm._s(_vm.t("survey_creator.question.max_score", _vm.$rootComponent.currentLanguage))+_vm._s(_vm.maxScore)+")\n  ")]):_vm._e(),_vm._v(" "),(_vm.haveScoreRange)?_c('span',{staticClass:"options-explain"},[_vm._v("("+_vm._s(_vm.t(
+var __vue_render__$J = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"question-title"},[_c('label',{staticClass:"star"},[_vm._v(_vm._s(_vm.question.options.required ? "*" : ""))]),_vm._v(" "),(_vm.question.header.number)?_c('span',{staticClass:"number pl-sm"},[_vm._v(_vm._s(_vm.question.header.number)+".")]):_vm._e(),_vm._v(" "),_vm._l((_vm.formatTitle),function(title,index){return _c('div',{key:index,staticClass:"flex pl-sm"},[(title !== '')?_c('span',{staticClass:"content"},[_vm._v(_vm._s(title))]):_vm._e(),_vm._v(" "),_vm._l((_vm.customFilledTitle),function(customTitle){return _c('div',{key:index + customTitle.index},[(title === '' && index === customTitle.index)?_c('Input',{model:{value:(customTitle.title),callback:function ($$v) {_vm.$set(customTitle, "title", (typeof $$v === 'string'? $$v.trim(): $$v));},expression:"customTitle.title"}}):_c('div',[(_vm.showInput(index) && index === customTitle.index)?_c('Input',{staticClass:"pl-sm",model:{value:(customTitle.title),callback:function ($$v) {_vm.$set(customTitle, "title", (typeof $$v === 'string'? $$v.trim(): $$v));},expression:"customTitle.title"}}):_vm._e()],1)],1)})],2)}),_vm._v(" "),(_vm.haveMaxScore)?_c('span',{staticClass:"options-explain pl-sm"},[_vm._v("("+_vm._s(_vm.t("survey_creator.question.max_score", _vm.$rootComponent.currentLanguage))+_vm._s(_vm.maxScore)+")\n  ")]):_vm._e(),_vm._v(" "),(_vm.haveScoreRange)?_c('span',{staticClass:"options-explain pl-sm"},[_vm._v("("+_vm._s(_vm.t(
         "survey_creator.question.scoring.scoreRange",
         _vm.$rootComponent.currentLanguage
-      ))+_vm._s(_vm.scoreRange)+")\n  ")]):_vm._e(),_vm._v(" "),(_vm.haveStar)?_c('span',{staticClass:"options-explain"},[(_vm.isSingleSelection)?_c('span',[_vm._v("\n      ("+_vm._s(_vm.t(
+      ))+_vm._s(_vm.scoreRange)+")\n  ")]):_vm._e(),_vm._v(" "),(_vm.haveStar)?_c('span',{staticClass:"options-explain pl-sm"},[(_vm.isSingleSelection)?_c('span',[_vm._v("\n      ("+_vm._s(_vm.t(
           "survey_creator.question.star_single",
           _vm.$rootComponent.currentLanguage
         ))+"\n      "),_c('span',[_c('Icon',{attrs:{"type":"md-star","color":"orange","size":16}})],1),_vm._v(")\n    ")]):_c('span',[_vm._v("\n      (\n      "+_vm._s(_vm.t(
@@ -1040,19 +1108,21 @@ var __vue_render__$J = function () {var _vm=this;var _h=_vm.$createElement;var _
         ))+"\n      "+_vm._s(_vm.question.options.starMinCount)+"\n      "+_vm._s(_vm.t(
           "survey_creator.question.star_multi_suffix",
           _vm.$rootComponent.currentLanguage
-        ))+"\n      )\n    ")],1)]):_vm._e()])};
+        ))+"\n      )\n    ")],1)]):_vm._e()],2)};
 var __vue_staticRenderFns__$J = [];
 
   /* style */
-  const __vue_inject_styles__$J = undefined;
+  const __vue_inject_styles__$J = function (inject) {
+    if (!inject) return
+    inject("data-v-d10d41aa_0", { source: ".flex[data-v-d10d41aa]{display:flex;align-items:center;white-space:nowrap}.pl-sm[data-v-d10d41aa]{padding-left:4px}", map: undefined, media: undefined });
+
+  };
   /* scoped */
-  const __vue_scope_id__$J = undefined;
+  const __vue_scope_id__$J = "data-v-d10d41aa";
   /* module identifier */
   const __vue_module_identifier__$J = undefined;
   /* functional template */
   const __vue_is_functional_template__$J = false;
-  /* style inject */
-  
   /* style inject SSR */
   
   /* style inject shadow dom */
@@ -1067,7 +1137,7 @@ var __vue_staticRenderFns__$J = [];
     __vue_is_functional_template__$J,
     __vue_module_identifier__$J,
     false,
-    undefined,
+    createInjector,
     undefined,
     undefined
   );
@@ -1102,59 +1172,6 @@ var script$I = Vue.extend({
     },
 });
 
-const isOldIE = typeof navigator !== 'undefined' &&
-    /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
-function createInjector(context) {
-    return (id, style) => addStyle(id, style);
-}
-let HEAD;
-const styles = {};
-function addStyle(id, css) {
-    const group = isOldIE ? css.media || 'default' : id;
-    const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
-    if (!style.ids.has(id)) {
-        style.ids.add(id);
-        let code = css.source;
-        if (css.map) {
-            // https://developer.chrome.com/devtools/docs/javascript-debugging
-            // this makes source maps inside style tags work properly in Chrome
-            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
-            // http://stackoverflow.com/a/26603875
-            code +=
-                '\n/*# sourceMappingURL=data:application/json;base64,' +
-                    btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
-                    ' */';
-        }
-        if (!style.element) {
-            style.element = document.createElement('style');
-            style.element.type = 'text/css';
-            if (css.media)
-                style.element.setAttribute('media', css.media);
-            if (HEAD === undefined) {
-                HEAD = document.head || document.getElementsByTagName('head')[0];
-            }
-            HEAD.appendChild(style.element);
-        }
-        if ('styleSheet' in style.element) {
-            style.styles.push(code);
-            style.element.styleSheet.cssText = style.styles
-                .filter(Boolean)
-                .join('\n');
-        }
-        else {
-            const index = style.ids.size - 1;
-            const textNode = document.createTextNode(code);
-            const nodes = style.element.childNodes;
-            if (nodes[index])
-                style.element.removeChild(nodes[index]);
-            if (nodes.length)
-                style.element.insertBefore(textNode, nodes[index]);
-            else
-                style.element.appendChild(textNode);
-        }
-    }
-}
-
 /* script */
 const __vue_script__$I = script$I;
 
@@ -4983,15 +5000,37 @@ var script$6 = Vue.extend({
             type: Object,
             required: true,
         },
+        surveyCustomQuestions: {
+            type: Array,
+            required: false,
+        },
     },
     data() {
         return {
             enabledSelectQuestion: false,
-            isSelectedQuestion: false
+            isSelectedQuestion: false,
         };
     },
     created() {
-        this.enabledSelectQuestion = _.get(this.$rootComponent, "options.enabledSelectQuestion", false);
+        this.enabledSelectQuestion = _$1.get(this.$rootComponent, "options.enabledSelectQuestion", false);
+        this.enabledQuestionTitleIncompleteTips = _$1.get(this.$rootComponent, "options.enabledQuestionTitleIncompleteTips", false);
+    },
+    computed: {
+        getClassStyle() {
+            return this.questionTitleIncomplete ? "" : "question-incomplete";
+        },
+        questionTitleIncomplete() {
+            if (!this.enabledQuestionTitleIncompleteTips) {
+                return true;
+            }
+            let filledTitle = _$1.find(this.surveyCustomQuestions, (q) => q.id === this.question.id)?.filledTitle;
+            if (_$1.isEmpty(filledTitle)) {
+                return true;
+            }
+            else {
+                return _$1.every(filledTitle, (t) => t.title !== "");
+            }
+        },
     },
     methods: {
         getJumpRules(val) {
@@ -5010,22 +5049,24 @@ var script$6 = Vue.extend({
 const __vue_script__$6 = script$6;
 
 /* template */
-var __vue_render__$6 = 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',{staticClass:"question-row-container"},[(_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('Divider',{staticClass:"question-type-desc",attrs:{"orientation":"left"}},[_vm._v("\n        "+_vm._s(_vm.t(
+var __vue_render__$6 = 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',{staticClass:"question-row-container"},[(_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",class:_vm.getClassStyle},[_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('question-title',{attrs:{"question":_vm.question,"max-score":true}}),_vm._v(" "),_c('div',{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('question-title',{attrs:{"question":_vm.question,"max-score":true,"survey-custom-questions":_vm.surveyCustomQuestions}}),_vm._v(" "),_c('div',{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)])])};
 var __vue_staticRenderFns__$6 = [];
 
   /* style */
-  const __vue_inject_styles__$6 = undefined;
+  const __vue_inject_styles__$6 = function (inject) {
+    if (!inject) return
+    inject("data-v-05fe3060_0", { source: ".question-incomplete[data-v-05fe3060]{border:1px solid #ed4014;border-radius:4px}.question-incomplete .incomplete-tips[data-v-05fe3060]{position:absolute;left:15px;top:16px;padding:2px 4px;background:#f85353;border-radius:4px 0;font-weight:400;font-size:12px;line-height:18px;color:#fff}", map: undefined, media: undefined });
+
+  };
   /* scoped */
-  const __vue_scope_id__$6 = undefined;
+  const __vue_scope_id__$6 = "data-v-05fe3060";
   /* module identifier */
   const __vue_module_identifier__$6 = undefined;
   /* functional template */
   const __vue_is_functional_template__$6 = false;
-  /* style inject */
-  
   /* style inject SSR */
   
   /* style inject shadow dom */
@@ -5040,7 +5081,7 @@ var __vue_staticRenderFns__$6 = [];
     __vue_is_functional_template__$6,
     __vue_module_identifier__$6,
     false,
-    undefined,
+    createInjector,
     undefined,
     undefined
   );
@@ -5059,6 +5100,10 @@ var script$5 = Vue.extend({
             type: Array,
             required: false,
         },
+        surveyCustomQuestions: {
+            type: Array,
+            required: false,
+        },
     },
     data() {
         return {
@@ -5141,7 +5186,8 @@ var script$5 = Vue.extend({
         },
         selectQuestionHandler(selected, question) {
             this.$refs[`question${question.id}`][0].selectQuestion(selected);
-            this.selectedQuestions.push(question);
+            this.selectedQuestions.find((i) => i.id === question.id) ||
+                this.selectedQuestions.push(question);
             if (Array.isArray(question.jumps) && question.jumps.length > 0) {
                 question.jumps.forEach((item) => {
                     const jumpItem = this.sortQuestions.find((i) => item.toQuestionId === i.id);
@@ -5183,7 +5229,7 @@ var script$5 = Vue.extend({
 const __vue_script__$5 = script$5;
 
 /* template */
-var __vue_render__$5 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"survey-internal-previewer-wrapper"},_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},on:{"singleQuestion":_vm.handleSelected,"onSelectQuestion":_vm.onSelectQuestion}})}),1)};
+var __vue_render__$5 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"survey-internal-previewer-wrapper"},_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,"survey-custom-questions":_vm.surveyCustomQuestions},on:{"singleQuestion":_vm.handleSelected,"onSelectQuestion":_vm.onSelectQuestion}})}),1)};
 var __vue_staticRenderFns__$5 = [];
 
   /* style */
@@ -5853,6 +5899,10 @@ var script = Vue.extend({
             type: Array,
             required: false,
         },
+        surveyCustomQuestions: {
+            type: Array,
+            required: false,
+        },
     },
     data() {
         return {
@@ -5862,6 +5912,7 @@ var script = Vue.extend({
     },
     created() {
         this.setSurveyLanguage(this.survey);
+        this.prepareSurveyCustomQuestions();
     },
     methods: {
         onBack() {
@@ -5875,6 +5926,43 @@ var script = Vue.extend({
         selectedQuestionIds(questionIds) {
             this.$emit("selected-question-ids", questionIds);
         },
+        formatTitle(question) {
+            let title = this.translate(question.header.text, true);
+            if (!_$1.get(question, "options.richTextEnabled", false)) {
+                return [title];
+            }
+            return title.split(/_{5,}/g);
+        },
+        showInput(index, formatTitle) {
+            if (index === formatTitle.length - 2 &&
+                formatTitle[formatTitle.length - 1] === "") {
+                return false;
+            }
+            return index < formatTitle.length - 1;
+        },
+        prepareSurveyCustomQuestions() {
+            if (_$1.isEmpty(this.surveyCustomQuestions)) {
+                this.surveyCustomQuestions = [];
+                _$1.each(this.survey.questions, (q) => {
+                    let input_titles = [];
+                    _$1.each(this.formatTitle(q), (t, index) => {
+                        if (t === "" || this.showInput(index, this.formatTitle(q))) {
+                            let title = {
+                                title: "",
+                                index: index,
+                            };
+                            input_titles.push(title);
+                        }
+                    });
+                    let customQuestion = {
+                        id: q.id,
+                        surveyId: this.survey.id,
+                        filledTitle: input_titles,
+                    };
+                    this.surveyCustomQuestions.push(customQuestion);
+                });
+            }
+        },
     },
 });
 
@@ -5882,7 +5970,7 @@ var script = Vue.extend({
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.currentSurvey)?_c('div',{staticClass:"survey-preview-wrapper"},[_c('Row',{attrs:{"type":"flex","justify":"space-between","align":"middle"}},[_c('Col',[(_vm.options.back)?_c('Button',{attrs:{"icon":"ios-arrow-back"},on:{"click":_vm.onBack}},[_vm._v("\n        "+_vm._s(_vm.t("survey_creator.common.back"))+"\n      ")]):_vm._e()],1),_vm._v(" "),_c('Col',[_c('toolbar',{attrs:{"survey":_vm.currentSurvey,"create-question":false,"translate":true,"preview":false,"change-language":_vm.options.changeLanguage}})],1)],1),_vm._v(" "),_c('div',{staticClass:"survey-editor-wrapper"},[_c('survey-internal-previewer',{attrs:{"survey":_vm.currentSurvey,"init-question-ids":_vm.initQuestionIds},on:{"selected-question-ids":_vm.selectedQuestionIds}})],1)],1):_vm._e()};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.currentSurvey)?_c('div',{staticClass:"survey-preview-wrapper"},[_c('Row',{attrs:{"type":"flex","justify":"space-between","align":"middle"}},[_c('Col',[(_vm.options.back)?_c('Button',{attrs:{"icon":"ios-arrow-back"},on:{"click":_vm.onBack}},[_vm._v("\n        "+_vm._s(_vm.t("survey_creator.common.back"))+"\n      ")]):_vm._e()],1),_vm._v(" "),_c('Col',[_c('toolbar',{attrs:{"survey":_vm.currentSurvey,"create-question":false,"translate":true,"preview":false,"change-language":_vm.options.changeLanguage}})],1)],1),_vm._v(" "),_c('div',{staticClass:"survey-editor-wrapper"},[_c('survey-internal-previewer',{attrs:{"survey":_vm.currentSurvey,"init-question-ids":_vm.initQuestionIds,"survey-custom-questions":_vm.surveyCustomQuestions},on:{"selected-question-ids":_vm.selectedQuestionIds}})],1)],1):_vm._e()};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wg-npm/survey-creator",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "",
   "license": "MIT",
   "scripts": {
@@ -12,8 +12,8 @@
     "lint-fix": "eslint \"**/*.ts\"  \"**/*.vue\" --fix --no-error-on-unmatched-pattern"
   },
   "peerDependencies": {
-    "@wg-npm/survey-core": "0.5.0",
-    "@wg-npm/survey-service-api": "0.5.0",
+    "@wg-npm/survey-core": "0.5.2",
+    "@wg-npm/survey-service-api": "0.5.2",
     "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": "0.5.0",
-    "@wg-npm/survey-service-api": "0.5.0",
+    "@wg-npm/survey-core": "0.5.2",
+    "@wg-npm/survey-service-api": "0.5.2",
     "acorn": "^7.3.1",
     "axios": "^0.19.2",
     "babelrc-rollup": "^3.0.0",
@@ -79,7 +79,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f23e8c46f4c8377fe82943b3ec66d71c37d4f013",
+  "gitHead": "14683b8a6ce3c490c399141c6b395bbddfb69329",
   "rollup": {
     "external": [
       "vue",

package/src/components/common/question-title.vue

@@ -1,19 +1,37 @@
 <template>
   <div class="question-title">
     <label class="star">{{ question.options.required ? "*" : "" }}</label>
-    <span class="number" v-if="question.header.number"
+    <span class="number pl-sm" v-if="question.header.number"
       >{{ question.header.number }}.</span
     >
-    <span
-      class="content"
-      v-html="formatTitle(translate(question.header.text, true))"
-    />
-    <span class="options-explain" v-if="haveMaxScore"
+
+    <div class="flex pl-sm" v-for="(title, index) in formatTitle" :key="index">
+      <span v-if="title !== ''" class="content">{{ title }}</span>
+      <div
+        v-for="customTitle in customFilledTitle"
+        :key="index + customTitle.index"
+      >
+        <Input
+          v-if="title === '' && index === customTitle.index"
+          v-model.trim="customTitle.title"
+        />
+
+        <div v-else>
+          <Input
+            class="pl-sm"
+            v-if="showInput(index) && index === customTitle.index"
+            v-model.trim="customTitle.title"
+          />
+        </div>
+      </div>
+    </div>
+
+    <span class="options-explain pl-sm" v-if="haveMaxScore"
       >({{
         t(`survey_creator.question.max_score`, $rootComponent.currentLanguage)
       }}{{ maxScore }})
     </span>
-    <span class="options-explain" v-if="haveScoreRange"
+    <span class="options-explain pl-sm" v-if="haveScoreRange"
       >({{
         t(
           `survey_creator.question.scoring.scoreRange`,
@@ -21,7 +39,7 @@
         )
       }}{{ scoreRange }})
     </span>
-    <span class="options-explain" v-if="haveStar">
+    <span class="options-explain pl-sm" v-if="haveStar">
       <span v-if="isSingleSelection">
         ({{
           t(
@@ -76,8 +94,25 @@ export default Vue.extend({
       type: Object as () => BaseQuestionModel,
       required: true,
     },
+    surveyCustomQuestions: {
+      type: Array,
+      required: false,
+    },
   },
   computed: {
+    customFilledTitle() {
+      return _.find(
+        this.surveyCustomQuestions,
+        (q) => q.id === this.question.id
+      ).filledTitle;
+    },
+    formatTitle() {
+      let title = this.translate(this.question.header.text, true);
+      if (!this.isRichText) {
+        return [title];
+      }
+      return title.split(/_{5,}/g);
+    },
     maxScore() {
       return BaseQuestionModel.getMaxScore(this.question);
     },
@@ -107,15 +142,26 @@ export default Vue.extend({
     },
   },
   methods: {
-    formatTitle(title) {
-      if (!this.isRichText) {
-        return title;
+    showInput(index) {
+      if (
+        index === this.formatTitle.length - 2 &&
+        this.formatTitle[this.formatTitle.length - 1] === ""
+      ) {
+        return false;
       }
-      const inputHtml = `<Input style="border: 1px solid #dcdee2;border-radius: 3px;font-size: 12px;margin: 0 16px 8px;padding: 4px;" placeholder="${this.t(
-        "survey_creator.question.rich_text.input_placeholder"
-      )}" />`;
-      return title.replace(/_{5,}/g, inputHtml);
+      return index < this.formatTitle.length - 1;
     },
   },
 });
 </script>
+
+<style lang="less" scoped>
+.flex {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+.pl-sm {
+  padding-left: 4px;
+}
+</style>

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

@@ -4,7 +4,10 @@
       <div class="question-row-container-left" v-if="enabledSelectQuestion">
         <Checkbox v-model="isSelectedQuestion" @on-change="onSelectQuestion" />
       </div>
-      <div class="question-row-container-right">
+      <div class="question-row-container-right" :class="getClassStyle">
+        <span class="incomplete-tips" v-show="!questionTitleIncomplete">
+          {{ t("survey_creator.question.incomplete_tips") }}
+        </span>
         <Divider orientation="left" class="question-type-desc">
           {{
             t(
@@ -13,7 +16,11 @@
             )
           }}
         </Divider>
-        <question-title :question="question" :max-score="true" />
+        <question-title
+          :question="question"
+          :max-score="true"
+          :survey-custom-questions="surveyCustomQuestions"
+        />
         <div class="question-row-content">
           <component
             class="question"
@@ -46,6 +53,7 @@ import TextTitle from "../common/question/text-title.vue";
 import Matrix from "../common/question/matrix.vue";
 import Scoring from "../common/question/scoring.vue";
 import Evaluation from "../common/question/evaluation.vue";
+import _ from "lodash";
 
 export default Vue.extend({
   name: "previewer-question-row",
@@ -76,12 +84,16 @@ export default Vue.extend({
       type: Object as () => SurveyModel,
       required: true,
     },
+    surveyCustomQuestions: {
+      type: Array,
+      required: false,
+    },
   },
   data() {
     return {
       enabledSelectQuestion: false,
-      isSelectedQuestion: false
-    }
+      isSelectedQuestion: false,
+    };
   },
   created() {
     // @ts-ignore
@@ -90,6 +102,31 @@ export default Vue.extend({
       "options.enabledSelectQuestion",
       false
     );
+    // @ts-ignore
+    this.enabledQuestionTitleIncompleteTips = _.get(
+      this.$rootComponent,
+      "options.enabledQuestionTitleIncompleteTips",
+      false
+    );
+  },
+  computed: {
+    getClassStyle() {
+      return this.questionTitleIncomplete ? "" : "question-incomplete";
+    },
+    questionTitleIncomplete() {
+      if (!this.enabledQuestionTitleIncompleteTips) {
+        return true;
+      }
+      let filledTitle = _.find(
+        this.surveyCustomQuestions,
+        (q) => q.id === this.question.id
+      )?.filledTitle;
+      if (_.isEmpty(filledTitle)) {
+        return true;
+      } else {
+        return _.every(filledTitle, (t) => t.title !== "");
+      }
+    },
   },
   methods: {
     getJumpRules(val) {
@@ -104,3 +141,23 @@ export default Vue.extend({
   },
 });
 </script>
+
+<style lang="less" scoped>
+.question-incomplete {
+  border: 1px solid #ed4014;
+  border-radius: 4px;
+  .incomplete-tips {
+    position: absolute;
+    left: 15px;
+    top: 16px;
+    padding: 2px 4px;
+    background: #f85353;
+    border-radius: 4px 0px;
+
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 18px;
+    color: #ffffff;
+  }
+}
+</style>

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

@@ -8,6 +8,7 @@
       :survey="survey"
       @singleQuestion="handleSelected"
       @onSelectQuestion="onSelectQuestion"
+      :survey-custom-questions="surveyCustomQuestions"
     ></previewer-question-row>
   </div>
 </template>
@@ -29,6 +30,10 @@ export default Vue.extend({
       type: Array,
       required: false,
     },
+    surveyCustomQuestions: {
+      type: Array,
+      required: false,
+    },
   },
   data() {
     return {
@@ -129,7 +134,8 @@ export default Vue.extend({
     },
     selectQuestionHandler(selected, question) {
       this.$refs[`question${question.id}`][0].selectQuestion(selected);
-      this.selectedQuestions.push(question);
+      this.selectedQuestions.find((i) => i.id === question.id) ||
+        this.selectedQuestions.push(question);
       if (Array.isArray(question.jumps) && question.jumps.length > 0) {
         question.jumps.forEach((item) => {
           const jumpItem = this.sortQuestions.find(

package/src/components/survey-previewer.vue

@@ -21,6 +21,7 @@
         :survey="currentSurvey"
         :init-question-ids="initQuestionIds"
         @selected-question-ids="selectedQuestionIds"
+        :survey-custom-questions="surveyCustomQuestions"
       ></survey-internal-previewer>
     </div>
   </div>
@@ -57,6 +58,10 @@ export default Vue.extend({
       type: Array,
       required: false,
     },
+    surveyCustomQuestions: {
+      type: Array,
+      required: false,
+    },
   },
   data() {
     return {
@@ -67,6 +72,7 @@ export default Vue.extend({
   },
   created() {
     this.setSurveyLanguage(this.survey);
+    this.prepareSurveyCustomQuestions();
   },
   methods: {
     onBack() {
@@ -80,6 +86,48 @@ export default Vue.extend({
     selectedQuestionIds(questionIds) {
       this.$emit("selected-question-ids", questionIds);
     },
+    formatTitle(question) {
+      let title = this.translate(question.header.text, true);
+      // @ts-ignore
+      if (!_.get(question, "options.richTextEnabled", false)) {
+        return [title];
+      }
+      return title.split(/_{5,}/g);
+    },
+    showInput(index, formatTitle) {
+      if (
+        index === formatTitle.length - 2 &&
+        formatTitle[formatTitle.length - 1] === ""
+      ) {
+        return false;
+      }
+      return index < formatTitle.length - 1;
+    },
+    prepareSurveyCustomQuestions() {
+      if (_.isEmpty(this.surveyCustomQuestions)) {
+        this.surveyCustomQuestions = [];
+        _.each(this.survey.questions, (q) => {
+          let input_titles: any = [];
+          _.each(this.formatTitle(q), (t, index) => {
+            if (t === "" || this.showInput(index, this.formatTitle(q))) {
+              let title = {
+                title: "",
+                index: index,
+              };
+
+              input_titles.push(title);
+            }
+          });
+
+          let customQuestion = {
+            id: q.id,
+            surveyId: this.survey.id,
+            filledTitle: input_titles,
+          };
+          this.surveyCustomQuestions.push(customQuestion);
+        });
+      }
+    },
   },
 });
 </script>

package/src/locale/lang/en-US.ts

@@ -73,6 +73,7 @@ export default {
           "This question is involved in logical jump settings. After deletion, the related" +
           " logical jump relationships will be automatically cleared. Are you sure you want to delete?",
       },
+      incomplete_tips: "The title is not set completely",
       optional: "Optional",
       sub_questions: "Sub Question",
       score: "Score",

package/src/locale/lang/zh-CN.ts

@@ -72,6 +72,7 @@ export default {
         delete_question_desc:
           "该题目参与逻辑跳转设置，删除后，相关逻辑跳转关系会自动清除，是否确认要删除？",
       },
+      incomplete_tips: "题目未设置完整",
       optional: "选项",
       sub_questions: "子题",
       score: "分值",

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

@@ -31,6 +31,7 @@
           }
 
           .question-row-container-right {
+            padding: 0px 16px;
             flex: 1;
 
             .question-type-desc {
@@ -39,7 +40,9 @@
             
             .question-title {
               padding: 16px 0;
-    
+              display: flex;
+              align-items: center;
+
               .star {
                 color: red;
               }