@wg-npm/survey-response 0.3.14 → 0.3.3791

package/dist/survey-response.esm.js

@@ -177,6 +177,8 @@ var __vue_staticRenderFns__$e = [];
     undefined
   );
 
+  var EmptyQuestion = __vue_component__$e;
+
 var script$d = Vue.extend({
     name: "question-title",
     components: { Icon },
@@ -240,28 +242,30 @@ var __vue_staticRenderFns__$d = [];
     undefined
   );
 
+  var QuestionTitle = __vue_component__$d;
+
 var OptionLayoutMixin = Vue.extend({
     methods: {
         isMobile() {
-            let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
+            const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
             return flag;
         }
     },
     computed: {
         optionLayout() {
-            if (this.isMobile) {
+            const globalLayout = _.lowerCase(_.get(this.options, "layout", undefined));
+            if (this.isMobile || "vertical" == globalLayout) {
                 return "";
             }
-            let globalOptions = _.lowerCase(_.get(this.options, "layout", undefined));
-            let questionOptions = _.lowerCase(_.get(this.question.options, "layout", "horizontal"));
-            let layout = globalOptions || questionOptions;
-            return `question-choice-${layout}`;
+            const questionLayout = _.lowerCase(_.get(this.question.options, "layout", "horizontal"));
+            return `question-choice-${questionLayout}`;
         }
     }
 });
 
 var script$c = Vue.extend({
-    name: 'multi-selection',
+    name: "multi-selection",
+    inject: ["$rootComponent"],
     mixins: [OptionLayoutMixin],
     components: {
         FormItem,
@@ -298,7 +302,8 @@ var script$c = Vue.extend({
             });
             this.answer.score = score;
             if (this.question.options.starEnabled) {
-                this.answer.star = minStarCount >= this.question.options.starMinCount ? 1 : 0;
+                this.answer.star =
+                    minStarCount >= this.question.options.starMinCount ? 1 : 0;
             }
         }
     }
@@ -308,7 +313,12 @@ var script$c = Vue.extend({
 const __vue_script__$c = script$c;
 
 /* template */
-var __vue_render__$c = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('FormItem',{attrs:{"prop":("answers[" + _vm.index + "].answer"),"rules":{ required: _vm.question.options.required, type: 'array', min: 1, message: _vm.t('survey_response.question.question_required') }}},[_c('CheckboxGroup',{on:{"on-change":_vm.selChange},model:{value:(_vm.value.answer),callback:function ($$v) {_vm.$set(_vm.value, "answer", $$v);},expression:"value.answer"}},[_c('Row',{attrs:{"type":"flex","justify":"start","gutter":60}},_vm._l((_vm.question.choices),function(choice){return _c('Col',{key:choice.id,class:_vm.optionLayout,attrs:{"xs":24,"sm":4,"md":4,"lg":4}},[_c('Checkbox',{key:choice.id,attrs:{"label":choice.id,"disabled":_vm.question.options.readonly}},[_c('span',[_vm._v(_vm._s(_vm.i18nText(choice.text)))])])],1)}),1)],1)],1)};
+var __vue_render__$c = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('FormItem',{attrs:{"prop":("answers[" + _vm.index + "].answer"),"rules":{
+    required: _vm.question.options.required,
+    type: 'array',
+    min: 1,
+    message: _vm.t('survey_response.question.question_required')
+  }}},[_c('CheckboxGroup',{on:{"on-change":_vm.selChange},model:{value:(_vm.value.answer),callback:function ($$v) {_vm.$set(_vm.value, "answer", $$v);},expression:"value.answer"}},[_c('Row',{attrs:{"type":"flex","justify":"start","gutter":60}},_vm._l((_vm.question.choices),function(choice){return _c('Col',{key:choice.id,class:_vm.optionLayout,attrs:{"xs":24,"sm":_vm.$rootComponent.layout === 'vertical' ? 24 : 6,"xl":_vm.$rootComponent.layout === 'vertical' ? 24 : 6,"md":_vm.$rootComponent.layout === 'vertical' ? 24 : 6,"lg":_vm.$rootComponent.layout === 'vertical' ? 24 : 6}},[_c('Checkbox',{key:choice.id,attrs:{"label":choice.id,"disabled":_vm.question.options.readonly}},[_c('span',[_vm._v(_vm._s(_vm.i18nText(choice.text)))])])],1)}),1)],1)],1)};
 var __vue_staticRenderFns__$c = [];
 
   /* style */
@@ -340,6 +350,8 @@ var __vue_staticRenderFns__$c = [];
     undefined
   );
 
+  var MultiSelection = __vue_component__$c;
+
 var script$b = Vue.extend({
     name: "short-answer",
     components: {
@@ -412,8 +424,10 @@ var __vue_staticRenderFns__$b = [];
     undefined
   );
 
+  var ShortAnswer = __vue_component__$b;
+
 var script$a = Vue.extend({
-    name: 'single-selection',
+    name: "single-selection",
     components: {
         FormItem,
         RadioGroup,
@@ -423,7 +437,7 @@ var script$a = Vue.extend({
         Icon
     },
     mixins: [OptionLayoutMixin],
-    inject: ["responseStatus"],
+    inject: ["responseStatus", "$rootComponent"],
     props: {
         question: {
             type: Object,
@@ -484,7 +498,10 @@ var script$a = Vue.extend({
 const __vue_script__$a = script$a;
 
 /* template */
-var __vue_render__$a = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('FormItem',{attrs:{"prop":("answers[" + _vm.index + "].answer"),"rules":{ required: _vm.question.options.required, message: _vm.t('survey_response.question.question_required') }}},[_c('RadioGroup',{staticClass:"question-choice",on:{"on-change":_vm.selChange},model:{value:(_vm.value.answer),callback:function ($$v) {_vm.$set(_vm.value, "answer", $$v);},expression:"value.answer"}},[_c('Row',{attrs:{"type":"flex","justify":"start","gutter":60}},_vm._l((_vm.question.choices),function(choice){return _c('Col',{key:choice.id,class:_vm.optionLayout,attrs:{"xs":24,"sm":6,"md":6,"lg":6}},[_c('Radio',{key:choice.id,attrs:{"disabled":_vm.question.options.readonly,"label":choice.id},nativeOn:{"click":function($event){return _vm.toggleAnswer(choice.id)}}},[(_vm.haveStar(choice))?_c('span',[_c('Icon',{attrs:{"type":"md-star","color":"orange","size":16}})],1):_vm._e(),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.i18nText(choice.text)))])])],1)}),1)],1)],1)};
+var __vue_render__$a = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('FormItem',{attrs:{"prop":("answers[" + _vm.index + "].answer"),"rules":{
+    required: _vm.question.options.required,
+    message: _vm.t('survey_response.question.question_required')
+  }}},[_c('RadioGroup',{staticClass:"question-choice",on:{"on-change":_vm.selChange},model:{value:(_vm.value.answer),callback:function ($$v) {_vm.$set(_vm.value, "answer", $$v);},expression:"value.answer"}},[_c('Row',{attrs:{"type":"flex","justify":"start","gutter":60}},_vm._l((_vm.question.choices),function(choice){return _c('Col',{key:choice.id,class:_vm.optionLayout,attrs:{"xs":24,"sm":_vm.$rootComponent.layout === 'vertical' ? 24 : 6,"xl":_vm.$rootComponent.layout === 'vertical' ? 24 : 6,"md":_vm.$rootComponent.layout === 'vertical' ? 24 : 6,"lg":_vm.$rootComponent.layout === 'vertical' ? 24 : 6}},[_c('Radio',{key:choice.id,attrs:{"disabled":_vm.question.options.readonly,"label":choice.id},nativeOn:{"click":function($event){return _vm.toggleAnswer(choice.id)}}},[(_vm.haveStar(choice))?_c('span',[_c('Icon',{attrs:{"type":"md-star","color":"orange","size":16}})],1):_vm._e(),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.i18nText(choice.text)))])])],1)}),1)],1)],1)};
 var __vue_staticRenderFns__$a = [];
 
   /* style */
@@ -516,10 +533,12 @@ var __vue_staticRenderFns__$a = [];
     undefined
   );
 
+  var SingleSelection = __vue_component__$a;
+
 var script$9 = Vue.extend({
-    name: 'matrix',
+    name: "matrix",
     mixins: [OptionLayoutMixin],
-    inject: ["responseStatus"],
+    inject: ["responseStatus", "$rootComponent"],
     components: {
         FormItem,
         RadioGroup,
@@ -546,7 +565,7 @@ var script$9 = Vue.extend({
         _.each(this.value.answer, data => {
             _.set(subAnswers, data.questionId, data);
         });
-        _.set(this.value, 'answer', []);
+        _.set(this.value, "answer", []);
         _.each(this.question.subQuestions, question => {
             let _answer = _.get(subAnswers, question.id);
             _answer = _answer
@@ -555,7 +574,7 @@ var script$9 = Vue.extend({
                     answer: null,
                     question_id: question.id,
                     score: 0,
-                    question_type: 'SINGLE_SELECTION'
+                    question_type: "SINGLE_SELECTION"
                 };
             this.value.answer.push(_answer);
         });
@@ -576,7 +595,9 @@ var script$9 = Vue.extend({
         toggleAnswer(subValue, subIndex) {
             if (this.responseStatus == this.$consts.STATUS_DRAFT) {
                 let subAnswer = this.value.answer[subIndex].answer;
-                this.value.answer[subIndex].answer = _.isEmpty(subAnswer) ? subValue : subAnswer;
+                this.value.answer[subIndex].answer = _.isEmpty(subAnswer)
+                    ? subValue
+                    : subAnswer;
             }
         }
     }
@@ -586,7 +607,10 @@ var script$9 = Vue.extend({
 const __vue_script__$9 = script$9;
 
 /* template */
-var __vue_render__$9 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._l((_vm.question.subQuestions),function(subQuestion,subIndex){return _c('div',{key:subIndex,staticClass:"sub-question"},[_c('span',{staticClass:"number"},[_vm._v(" "+_vm._s(_vm.question.header.number)+"-"+_vm._s(subQuestion.number)+".")]),_vm._v(" "),_c('span',{staticClass:"title"},[_vm._v(" "+_vm._s(_vm.i18nText(subQuestion.text))+" ")]),_vm._v(" "),_c('FormItem',{attrs:{"prop":("answers[" + _vm.index + "].answer[" + subIndex + "].answer"),"rules":{ required: _vm.question.options.required, message: _vm.t('survey_response.question.question_required') }}},[_c('RadioGroup',{on:{"on-change":_vm.selChange},model:{value:(_vm.value.answer[subIndex].answer),callback:function ($$v) {_vm.$set(_vm.value.answer[subIndex], "answer", $$v);},expression:"value.answer[subIndex].answer"}},[_c('Row',{attrs:{"type":"flex","justify":"start","gutter":60}},_vm._l((_vm.question.choices),function(choice){return _c('Col',{key:choice.id,class:_vm.optionLayout,attrs:{"xs":24,"sm":4,"md":4,"lg":4}},[_c('Radio',{key:choice.id,attrs:{"label":choice.id,"disabled":subQuestion.options.readonly},nativeOn:{"click":function($event){return _vm.toggleAnswer(choice.id, subIndex)}}},[_c('span',[_vm._v(_vm._s(_vm.i18nText(choice.text)))])])],1)}),1)],1)],1)],1)}),0)};
+var __vue_render__$9 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._l((_vm.question.subQuestions),function(subQuestion,subIndex){return _c('div',{key:subIndex,staticClass:"sub-question"},[_c('span',{staticClass:"number"},[_vm._v("\n      "+_vm._s(_vm.question.header.number)+"-"+_vm._s(subQuestion.number)+".")]),_vm._v(" "),_c('span',{staticClass:"title"},[_vm._v(" "+_vm._s(_vm.i18nText(subQuestion.text))+" ")]),_vm._v(" "),_c('FormItem',{attrs:{"prop":("answers[" + _vm.index + "].answer[" + subIndex + "].answer"),"rules":{
+        required: _vm.question.options.required,
+        message: _vm.t('survey_response.question.question_required')
+      }}},[_c('RadioGroup',{on:{"on-change":_vm.selChange},model:{value:(_vm.value.answer[subIndex].answer),callback:function ($$v) {_vm.$set(_vm.value.answer[subIndex], "answer", $$v);},expression:"value.answer[subIndex].answer"}},[_c('Row',{attrs:{"type":"flex","justify":"start","gutter":60}},_vm._l((_vm.question.choices),function(choice){return _c('Col',{key:choice.id,class:_vm.optionLayout,attrs:{"xs":24,"sm":_vm.$rootComponent.layout === 'vertical' ? 24 : 6,"xl":_vm.$rootComponent.layout === 'vertical' ? 24 : 6,"md":_vm.$rootComponent.layout === 'vertical' ? 24 : 6,"lg":_vm.$rootComponent.layout === 'vertical' ? 24 : 6}},[_c('Radio',{key:choice.id,attrs:{"label":choice.id,"disabled":subQuestion.options.readonly},nativeOn:{"click":function($event){return _vm.toggleAnswer(choice.id, subIndex)}}},[_c('span',[_vm._v(_vm._s(_vm.i18nText(choice.text)))])])],1)}),1)],1)],1)],1)}),0)};
 var __vue_staticRenderFns__$9 = [];
 
   /* style */
@@ -618,6 +642,8 @@ var __vue_staticRenderFns__$9 = [];
     undefined
   );
 
+  var Matrix = __vue_component__$9;
+
 var script$8 = Vue.extend({});
 
 /* script */
@@ -656,6 +682,8 @@ var __vue_staticRenderFns__$8 = [];
     undefined
   );
 
+  var TextTitle = __vue_component__$8;
+
 var script$7 = Vue.extend({
     name: "fill-blank",
     components: {
@@ -728,6 +756,8 @@ var __vue_staticRenderFns__$7 = [];
     undefined
   );
 
+  var FillBlank = __vue_component__$7;
+
 var defaultLang = {
     survey_response: {
         locale: 'zh-CN',
@@ -863,6 +893,8 @@ var __vue_staticRenderFns__$6 = [];
     undefined
   );
 
+  var Star = __vue_component__$6;
+
 class ExprEvaluationQuestion {
   questions;
   scope;
@@ -1077,6 +1109,8 @@ var __vue_staticRenderFns__$5 = [];
     undefined
   );
 
+  var If = __vue_component__$5;
+
 var script$4 = Vue.extend({
     name: "expr-else",
     mixins: [LocaleMixin],
@@ -1123,6 +1157,8 @@ var __vue_staticRenderFns__$4 = [];
     undefined
   );
 
+  var Else = __vue_component__$4;
+
 var script$3 = Vue.extend({
     name: "expr",
     props: {
@@ -1132,8 +1168,8 @@ var script$3 = Vue.extend({
         }
     },
     components: {
-        IF: __vue_component__$5,
-        ELSE: __vue_component__$4
+        IF: If,
+        ELSE: Else
     }
 });
 
@@ -1173,51 +1209,63 @@ var __vue_staticRenderFns__$3 = [];
     undefined
   );
 
+  var Expr = __vue_component__$3;
+
 var script$2 = Vue.extend({
     name: "Evaluation",
     components: {
-        Row, Col, Card, Icon,
-        STAR: __vue_component__$6,
-        EXPR: __vue_component__$3,
+        Row,
+        Col,
+        Card,
+        Icon,
+        STAR: Star,
+        EXPR: Expr,
     },
     mixins: [LocaleMixin],
+    inject: ["$rootComponent"],
     props: {
         question: {
             type: Object,
-            required: true
+            required: true,
         },
         answer: {
             type: Object,
-            required: true
-        }
+            required: true,
+        },
     },
     methods: {
         iconType(id) {
-            return this.answer.answer == id ? "ios-checkmark-circle" : "ios-checkmark-circle-outline";
+            return this.answer.answer == id
+                ? "ios-checkmark-circle"
+                : "ios-checkmark-circle-outline";
         },
         cardClasses(id) {
-            return this.answer.answer == id ? "evaluation-cards evaluation-cards-current" : "evaluation-cards";
-        }
-    }
+            return this.answer.answer == id
+                ? "evaluation-cards evaluation-cards-current"
+                : "evaluation-cards";
+        },
+    },
 });
 
 /* script */
 const __vue_script__$2 = script$2;
 
 /* template */
-var __vue_render__$2 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.question.evaluationItems.length > 0)?_c('Row',{attrs:{"type":"flex","justify":"start","gutter":24}},_vm._l((_vm.question.evaluationItems),function(item){return _c('Col',{key:item.id,staticClass:"evaluation-item",attrs:{"xs":24,"sm":4,"md":4,"lg":4}},[_c('Card',{class:_vm.cardClasses(item.id),attrs:{"dis-hover":""}},[_c('div',{staticClass:"card-title",attrs:{"slot":"title"},slot:"title"},[_c('Icon',{staticClass:"icon",attrs:{"type":_vm.iconType(item.id),"size":36}})],1),_vm._v(" "),_c('div',{staticClass:"card-content"},[_c('p',{staticClass:"text"},[_vm._v(_vm._s(_vm.i18nText(item.text)))]),_vm._v(" "),_c(_vm.question.options.evaluationType,{tag:"component",attrs:{"item":item}})],1)])],1)}),1):_vm._e()],1)};
+var __vue_render__$2 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.question.evaluationItems.length > 0)?_c('Row',{attrs:{"type":"flex","justify":"start","gutter":24}},_vm._l((_vm.question.evaluationItems),function(item){return _c('Col',{key:item.id,staticClass:"evaluation-item",attrs:{"xs":24,"sm":_vm.$rootComponent.layout === 'vertical' ? 24 : 6,"xl":_vm.$rootComponent.layout === 'vertical' ? 24 : 6,"md":_vm.$rootComponent.layout === 'vertical' ? 24 : 6,"lg":_vm.$rootComponent.layout === 'vertical' ? 24 : 6}},[_c('Card',{class:_vm.cardClasses(item.id),attrs:{"dis-hover":""}},[_c('div',{staticClass:"card-title",attrs:{"slot":"title"},slot:"title"},[_c('Icon',{staticClass:"icon",attrs:{"type":_vm.iconType(item.id),"size":36}})],1),_vm._v(" "),_c('div',{staticClass:"card-content"},[_c('div',{staticClass:"card-text"},[_c('p',{directives:[{name:"ellipsis-tip",rawName:"v-ellipsis-tip"}],staticClass:"text"},[_vm._v(_vm._s(_vm.i18nText(item.text)))])]),_vm._v(" "),_c(_vm.question.options.evaluationType,{tag:"component",attrs:{"item":item}})],1)])],1)}),1):_vm._e()],1)};
 var __vue_staticRenderFns__$2 = [];
 
   /* style */
-  const __vue_inject_styles__$2 = undefined;
+  const __vue_inject_styles__$2 = function (inject) {
+    if (!inject) return
+    inject("data-v-71844af4_0", { source: ".card-text[data-v-71844af4]{width:100%}", map: undefined, media: undefined });
+
+  };
   /* scoped */
-  const __vue_scope_id__$2 = undefined;
+  const __vue_scope_id__$2 = "data-v-71844af4";
   /* module identifier */
   const __vue_module_identifier__$2 = undefined;
   /* functional template */
   const __vue_is_functional_template__$2 = false;
-  /* style inject */
-  
   /* style inject SSR */
   
   /* style inject shadow dom */
@@ -1232,20 +1280,22 @@ var __vue_staticRenderFns__$2 = [];
     __vue_is_functional_template__$2,
     __vue_module_identifier__$2,
     false,
-    undefined,
+    createInjector,
     undefined,
     undefined
   );
 
+  var Evaluation = __vue_component__$2;
+
 var script$1 = Vue.extend({
     components: {
-        MULTI_SELECTION: __vue_component__$c,
-        SHORT_ANSWER: __vue_component__$b,
-        FILL_BLANK: __vue_component__$7,
-        TEXT_TITLE: __vue_component__$8,
-        SINGLE_SELECTION: __vue_component__$a,
-        MATRIX: __vue_component__$9,
-        EVALUATION: __vue_component__$2
+        MULTI_SELECTION: MultiSelection,
+        SHORT_ANSWER: ShortAnswer,
+        FILL_BLANK: FillBlank,
+        TEXT_TITLE: TextTitle,
+        SINGLE_SELECTION: SingleSelection,
+        MATRIX: Matrix,
+        EVALUATION: Evaluation
     },
     name: "question-body",
     props: {
@@ -1303,17 +1353,21 @@ var __vue_staticRenderFns__$1 = [];
     undefined
   );
 
+  var QuestionBody = __vue_component__$1;
+
 var script = Vue.extend({
-    name: 'SurveyResponse',
+    name: "SurveyResponse",
     components: {
-        QuestionTitle: __vue_component__$d,
-        QuestionBody: __vue_component__$1,
-        EmptyQuestion: __vue_component__$e,
+        QuestionTitle,
+        QuestionBody,
+        EmptyQuestion,
         Form
     },
     provide() {
         return {
-            responseStar: this.response.status != this.$consts.STATUS_DRAFT ? this.response.star : null,
+            responseStar: this.response.status != this.$consts.STATUS_DRAFT
+                ? this.response.star
+                : null,
             survey: this.survey,
             responseStatus: this.response.status,
             $rootComponent: this
@@ -1333,7 +1387,7 @@ var script = Vue.extend({
         },
         size: {
             type: String,
-            default: 'default'
+            default: "default"
         }
     },
     data() {
@@ -1350,6 +1404,10 @@ var script = Vue.extend({
         },
         readonly() {
             return this.response.status != this.$consts.STATUS_DRAFT;
+        },
+        layout() {
+            const globalLayout = _.lowerCase(_.get(this.options, "layout", undefined));
+            return globalLayout || "horizontal";
         }
     },
     methods: {
@@ -1364,12 +1422,14 @@ var script = Vue.extend({
                 question.type == "FILL_BLANK" ||
                 question.type == "SHORT_ANSWER" ||
                 question.type == "MULTI_SELECTION") {
-                _.set(question.options, 'readonly', this.haveAnswered(backgroundAnswer));
+                _.set(question.options, "readonly", this.haveAnswered(backgroundAnswer));
             }
             if (question.type == "MATRIX") {
                 _.forEach(question.subQuestions, (subQuestion, subIndex) => {
                     let backgroundSubAnswer = _.get(backgroundAnswer, `answer[${subIndex}]`, null);
-                    _.set(subQuestion, "options", { 'readonly': this.haveAnswered(backgroundSubAnswer) });
+                    _.set(subQuestion, "options", {
+                        readonly: this.haveAnswered(backgroundSubAnswer)
+                    });
                 });
             }
         },
@@ -1380,13 +1440,13 @@ var script = Vue.extend({
             _.each(this.response.answers, data => {
                 _.set(this.answers, data.questionId, data);
             });
-            _.set(this.response, 'answers', []);
+            _.set(this.response, "answers", []);
             _.each(this.survey.questions, question => {
                 let answer = _.get(this.answers, question.id);
                 answer = answer
                     ? answer
                     : {
-                        answer: question.type == 'MULTI_SELECTION' ? [] : null,
+                        answer: question.type == "MULTI_SELECTION" ? [] : null,
                         question_id: question.id,
                         question_type: question.type,
                         score: null,
@@ -1403,7 +1463,7 @@ var script = Vue.extend({
             return result;
         },
         getMaxScore(question) {
-            if (question.type === 'single_selection') {
+            if (question.type === "single_selection") {
                 var score = _.maxBy(question.choices, answer_option => answer_option.options.score || 0).options.score;
                 if (!score) {
                     return 0;
@@ -1453,6 +1513,8 @@ var __vue_staticRenderFns__ = [];
     undefined
   );
 
+  var SurveyResponse = __vue_component__;
+
 class Constants {
     constructor() {
         this.STATUS_ENABLED = "ENABLED";
@@ -1470,9 +1532,8 @@ class SurveyResponsePlugin {
         locale.use(options.locale);
         locale.i18n(options.i18n);
         Vue.mixin(LocaleMixin);
-        vue.component("survey-response", __vue_component__);
+        vue.component("survey-response", SurveyResponse);
     }
 }
 
-export default SurveyResponsePlugin;
-export { __vue_component__ as SurveyResponse, SurveyResponseOptions, locale };
+export { SurveyResponse, SurveyResponseOptions, SurveyResponsePlugin as default, locale };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wg-npm/survey-response",
-  "version": "0.3.14",
+  "version": "0.3.3791",
   "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.3.14",
-    "@wg-npm/survey-service-api": "0.3.14",
+    "@wg-npm/survey-core": "0.3.3791",
+    "@wg-npm/survey-service-api": "0.3.3791",
     "axios": "^0.19.2",
     "deepmerge": "^4.2.2",
     "lodash": "^4.17.15",
@@ -34,8 +34,8 @@
     "@typescript-eslint/parser": "^3.6.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/eslint-config-typescript": "^5.0.2",
-    "@wg-npm/survey-core": "0.3.14",
-    "@wg-npm/survey-service-api": "0.3.14",
+    "@wg-npm/survey-core": "0.3.3791",
+    "@wg-npm/survey-service-api": "0.3.3791",
     "acorn": "^7.3.1",
     "axios": "^0.19.2",
     "babelrc-rollup": "^3.0.0",

package/src/components/question/type/evaluation.vue

@@ -1,15 +1,33 @@
 <template>
   <div>
-    <Row type="flex" justify="start" :gutter="24" v-if="question.evaluationItems.length > 0">
-      <Col :xs="24" :sm="4" :md="4" :lg="4" class="evaluation-item" v-for="item in question.evaluationItems"
-           :key="item.id">
+    <Row
+      type="flex"
+      justify="start"
+      :gutter="24"
+      v-if="question.evaluationItems.length > 0"
+    >
+      <Col
+        :xs="24"
+        :sm="$rootComponent.layout === 'vertical' ? 24 : 6"
+        :xl="$rootComponent.layout === 'vertical' ? 24 : 6"
+        :md="$rootComponent.layout === 'vertical' ? 24 : 6"
+        :lg="$rootComponent.layout === 'vertical' ? 24 : 6"
+        class="evaluation-item"
+        v-for="item in question.evaluationItems"
+        :key="item.id"
+      >
         <Card :class="cardClasses(item.id)" dis-hover>
           <div slot="title" class="card-title">
-            <Icon class="icon" :type="iconType(item.id)" :size="36"/>
+            <Icon class="icon" :type="iconType(item.id)" :size="36" />
           </div>
           <div class="card-content">
-            <p class="text">{{ i18nText(item.text) }}</p>
-            <component :is="question.options.evaluationType" :item="item"></component>
+            <div class="card-text">
+              <p class="text" v-ellipsis-tip>{{ i18nText(item.text) }}</p>
+            </div>
+            <component
+              :is="question.options.evaluationType"
+              :item="item"
+            ></component>
           </div>
         </Card>
       </Col>
@@ -19,37 +37,51 @@
 
 <script lang="ts">
 import Vue from "vue";
-import {Col, Row, Card, Icon} from "view-design";
+import { Col, Row, Card, Icon } from "view-design";
 import LocaleMixin from "../../../mixins/locale-mixin";
-import {QuestionEvaluationModel} from "@wg-npm/survey-core";
+import { QuestionEvaluationModel } from "@wg-npm/survey-core";
 import Star from "./evaluation/star.vue";
 import Expr from "./evaluation/expr.vue";
 
 export default Vue.extend({
   name: "Evaluation",
   components: {
-    Row, Col, Card, Icon,
+    Row,
+    Col,
+    Card,
+    Icon,
     STAR: Star,
     EXPR: Expr,
   },
   mixins: [LocaleMixin],
+  inject: ["$rootComponent"],
   props: {
     question: {
       type: Object as () => QuestionEvaluationModel,
-      required: true
+      required: true,
     },
     answer: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
   },
   methods: {
     iconType(id) {
-      return this.answer.answer == id ? "ios-checkmark-circle" : "ios-checkmark-circle-outline"
+      return this.answer.answer == id
+        ? "ios-checkmark-circle"
+        : "ios-checkmark-circle-outline";
     },
     cardClasses(id) {
-      return this.answer.answer == id ? "evaluation-cards evaluation-cards-current" : "evaluation-cards"
-    }
-  }
+      return this.answer.answer == id
+        ? "evaluation-cards evaluation-cards-current"
+        : "evaluation-cards";
+    },
+  },
 });
 </script>
+
+<style lang="less" scoped>
+.card-text {
+  width: 100%;
+}
+</style>