@wg-npm/survey-response 0.5.157 → 0.5.158

package/dist/survey-response.esm.js

@@ -179,26 +179,67 @@ var __vue_staticRenderFns__$h = [];
 
   var EmptyQuestion = __vue_component__$h;
 
+var OptionLayoutMixin = Vue.extend({
+    props: {
+        options: {
+            type: Object,
+        }
+    },
+    methods: {
+        isMobile() {
+            const val = 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 !_.isEmpty(val);
+        },
+    },
+    computed: {
+        optionLayout() {
+            const globalLayout = _.lowerCase(_.get(this.options, "layout", "horizontal"));
+            return `question-choice-${globalLayout}`;
+        },
+    },
+});
+
+var QuestionMixin = Vue.extend({
+    props: {
+        index: Number,
+        surveyIndex: Number,
+        isMoreSurvey: {
+            type: Boolean,
+            required: false,
+            default: false,
+        },
+    },
+    computed: {
+        answerProp() {
+            return this.isMoreSurvey
+                ? `moreSurveyAnswers[${this.surveyIndex}].answers[${this.index}].answer`
+                : `answers[${this.index}].answer`;
+        },
+    },
+    methods: {},
+});
+
 var script$g = Vue.extend({
     name: "question-title",
+    mixins: [OptionLayoutMixin, QuestionMixin],
     components: { Icon },
     inject: ["$rootComponent"],
     props: {
         index: {
             type: Number,
-            default: 0,
+            default: 0
         },
         question: {
             type: Object,
-            required: true,
+            required: true
         },
         language: {
-            type: String,
+            type: String
         },
         customQuestion: {
             type: Object,
-            required: false,
-        },
+            required: false
+        }
     },
     computed: {
         customFilledTitle() {
@@ -209,7 +250,7 @@ var script$g = Vue.extend({
         },
         isSingleSelection() {
             return this.question.type == "SINGLE_SELECTION";
-        },
+        }
     },
     methods: {
         getShowInput(index, formatTitle) {
@@ -217,18 +258,18 @@ var script$g = Vue.extend({
         },
         getTitle(question) {
             return formatTitle(question, this.$rootComponent.currentLanguage);
-        },
-    },
+        }
+    }
 });
 
 /* script */
 const __vue_script__$g = script$g;
 
 /* template */
-var __vue_render__$g = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"question-title"},[(_vm.question.type !== 'text_title')?_c('span',{staticClass:"pr-sm"},[(_vm.question.options.required)?_c('label',{staticClass:"require-label"},[_vm._v("*")]):_vm._e(),_vm._v(" "),(_vm.question.header.number)?_c('label',{staticClass:"number"},[_vm._v(_vm._s(_vm.question.header.number)+".")]):_vm._e()]):_vm._e(),_vm._v(" "),_vm._l((_vm.getTitle(_vm.question)),function(title,index){return _c('div',{key:index,staticClass:"flex"},[(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('span',{staticClass:"content"},[_vm._v(_vm._s(customTitle.title))]):_c('div',[(
+var __vue_render__$g = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"question-title",style:({'display':(_vm.isMobile()?'inline-block':'')})},[(_vm.question.type !== 'text_title')?_c('span',{staticClass:"pr-sm",style:({'display':(_vm.isMobile()?'inline-block':'')})},[(_vm.question.options.required)?_c('label',{staticClass:"require-label"},[_vm._v("*")]):_vm._e(),_vm._v(" "),(_vm.question.header.number)?_c('label',{staticClass:"number"},[_vm._v(_vm._s(_vm.question.header.number)+".")]):_vm._e()]):_vm._e(),_vm._v(" "),_vm._l((_vm.getTitle(_vm.question)),function(title,index){return _c('div',{key:index,staticClass:"flex",style:({'display':(_vm.isMobile()?'inline-block':'')})},[(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('span',{staticClass:"content"},[_vm._v(_vm._s(customTitle.title))]):_c('div',[(
             _vm.getShowInput(index, _vm.getTitle(_vm.question)) &&
             index === customTitle.index
-          )?_c('span',{staticClass:"content"},[_vm._v(_vm._s(customTitle.title))]):_vm._e()])])})],2)}),_vm._v(" "),(_vm.haveStar)?_c('span',{staticClass:"options-explain"},[(_vm.isSingleSelection)?_c('span',[_vm._v("\n      ("+_vm._s(_vm.t(
+          )?_c('span',{staticClass:"content"},[_vm._v(_vm._s(customTitle.title))]):_vm._e()])])})],2)}),_vm._v(" "),(_vm.haveStar)?_c('span',{staticClass:"options-explain",style:({'display':(_vm.isMobile()?'block':'')})},[(_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(
@@ -246,11 +287,11 @@ var __vue_staticRenderFns__$g = [];
   /* style */
   const __vue_inject_styles__$g = function (inject) {
     if (!inject) return
-    inject("data-v-32eb22f3_0", { source: ".flex[data-v-32eb22f3]{display:flex;align-items:center;white-space:nowrap}.pr-sm[data-v-32eb22f3]{padding-right:4px}", map: undefined, media: undefined });
+    inject("data-v-67dae2e1_0", { source: ".flex[data-v-67dae2e1]{display:flex;align-items:center;white-space:nowrap}.pr-sm[data-v-67dae2e1]{padding-right:4px}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$g = "data-v-32eb22f3";
+  const __vue_scope_id__$g = "data-v-67dae2e1";
   /* module identifier */
   const __vue_module_identifier__$g = undefined;
   /* functional template */
@@ -276,45 +317,6 @@ var __vue_staticRenderFns__$g = [];
 
   var QuestionTitle = __vue_component__$g;
 
-var OptionLayoutMixin = Vue.extend({
-    methods: {
-        isMobile() {
-            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() {
-            const globalLayout = _.lowerCase(_.get(this.options, "layout", undefined));
-            if (this.isMobile() || "vertical" == globalLayout) {
-                return "";
-            }
-            const questionLayout = _.lowerCase(_.get(this.question.options, "layout", "horizontal"));
-            return `question-choice-${questionLayout}`;
-        },
-    },
-});
-
-var QuestionMixin = Vue.extend({
-    props: {
-        index: Number,
-        surveyIndex: Number,
-        isMoreSurvey: {
-            type: Boolean,
-            required: false,
-            default: false,
-        },
-    },
-    computed: {
-        answerProp() {
-            return this.isMoreSurvey
-                ? `moreSurveyAnswers[${this.surveyIndex}].answers[${this.index}].answer`
-                : `answers[${this.index}].answer`;
-        },
-    },
-    methods: {},
-});
-
 var script$f = Vue.extend({
     name: "multi-selection",
     inject: ["responseStatus", "$rootComponent"],
@@ -325,27 +327,55 @@ var script$f = Vue.extend({
         Checkbox,
         Row,
         Col,
-        Input,
+        Input
     },
     props: {
         question: {
             type: Object,
-            required: true,
+            required: true
         },
         answer: {
             type: Object,
-            required: true,
-        },
+            required: true
+        }
     },
     data() {
         return {
-            value: this.answer,
+            value: this.answer
         };
     },
     watch: {
         answer(n) {
             this.value = n;
+        }
+    },
+    computed: {
+        flexOrBlock() {
+            if (this.isMobile()) {
+                _.each(document.querySelectorAll(".ivu-radio-group-item"), (ele) => {
+                    ele.style.display = "inline-block";
+                });
+                return "inline-block";
+            }
+            else {
+                _.each(document.querySelectorAll(".ivu-row-flex-start"), (ele) => {
+                    ele.style.alignItems = "center";
+                });
+                _.each(document.querySelectorAll(".ivu-radio-group-item"), (ele) => {
+                    ele.style.display = "flex";
+                    ele.style.flexDirection = "row";
+                });
+                return "flex";
+            }
         },
+        flexOrBlockStyle() {
+            if (this.isMobile()) {
+                return "display: inline-block";
+            }
+            else {
+                return "display: flex";
+            }
+        }
     },
     methods: {
         inputAnswerProp(inputIndex) {
@@ -397,8 +427,8 @@ var script$f = Vue.extend({
                 this.answer.star =
                     minStarCount >= this.question.options.starMinCount ? 1 : 0;
             }
-        },
-    },
+        }
+    }
 });
 
 /* script */
@@ -410,7 +440,7 @@ var __vue_render__$f = function () {var _vm=this;var _h=_vm.$createElement;var _
     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,staticStyle:{"display":"flex"}},[_c('Checkbox',{key:choice.id,attrs:{"label":choice.id,"disabled":_vm.question.options.readonly ||
+  }}},[_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":_vm.flexOrBlock,"justify":"start","gutter":60}},_vm._l((_vm.question.choices),function(choice){return _c('Col',{key:choice.id,class:_vm.optionLayout,style:(_vm.flexOrBlockStyle)},[_c('Checkbox',{key:choice.id,attrs:{"label":choice.id,"disabled":_vm.question.options.readonly ||
             choice.readonly ||
             _vm.question.options.disabled}},[_c('span',[_vm._v(_vm._s(_vm.i18nText(choice.text)))])]),_vm._v(" "),_vm._l((_vm.value.inputAnswers),function(inputAnswer,inputIndex){return _c('div',{key:inputIndex},[(
               choice.id === inputAnswer.choiceId &&
@@ -433,11 +463,11 @@ var __vue_staticRenderFns__$f = [];
   /* style */
   const __vue_inject_styles__$f = function (inject) {
     if (!inject) return
-    inject("data-v-3976b9fb_0", { source: ".ivu-row-flex-start[data-v-3976b9fb]{align-items:center}.ivu-checkbox-group-item[data-v-3976b9fb]{display:flex;flex-direction:row}.choice-title[data-v-3976b9fb]{margin-left:8px;margin-right:8px}.choice-score[data-v-3976b9fb]{margin-right:8px}[data-v-3976b9fb] .ivu-checkbox-inner{margin-top:8px}.ivu-checkbox-wrapper[data-v-3976b9fb]{white-space:nowrap}", map: undefined, media: undefined });
+    inject("data-v-778a2db7_0", { source: ".ivu-row[data-v-778a2db7]{display:inline-block}.choice-title[data-v-778a2db7]{margin-left:8px;margin-right:8px}.choice-score[data-v-778a2db7]{margin-right:8px}.ivu-checkbox-wrapper[data-v-778a2db7]{white-space:nowrap}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$f = "data-v-3976b9fb";
+  const __vue_scope_id__$f = "data-v-778a2db7";
   /* module identifier */
   const __vue_module_identifier__$f = undefined;
   /* functional template */
@@ -568,24 +598,24 @@ var script$d = Vue.extend({
         Row,
         Col,
         Icon,
-        Input,
+        Input
     },
     mixins: [OptionLayoutMixin, QuestionMixin],
     inject: ["responseStatus", "$rootComponent"],
     props: {
         question: {
             type: Object,
-            required: true,
+            required: true
         },
         answer: {
             type: Object,
-            required: true,
-        },
+            required: true
+        }
     },
     data() {
         return {
             value: this.answer,
-            choiceClasses: this.buildChoiceClasses(),
+            choiceClasses: this.buildChoiceClasses()
         };
     },
     watch: {
@@ -594,7 +624,17 @@ var script$d = Vue.extend({
         },
         answer(n) {
             this.value = n;
-        },
+        }
+    },
+    computed: {
+        flexOrBlock() {
+            if (this.isMobile()) {
+                return "inline-block";
+            }
+            else {
+                return "flex";
+            }
+        }
     },
     methods: {
         inputAnswerProp(inputIndex) {
@@ -613,7 +653,7 @@ var script$d = Vue.extend({
         buildChoiceClasses() {
             return [
                 `question-choice`,
-                `question-choice-${_.lowerCase(this.question.options.layout || "HORIZONTAL")}`,
+                `question-choice-${_.lowerCase(this.question.options.layout || "HORIZONTAL")}`
             ];
         },
         haveStar(choice) {
@@ -638,10 +678,10 @@ var script$d = Vue.extend({
             }
             this.$emit("singleQuestion", {
                 questionId: this.question.id,
-                choiceId: this.value.answer,
+                choiceId: this.value.answer
             });
-        },
-    },
+        }
+    }
 });
 
 /* script */
@@ -649,33 +689,33 @@ const __vue_script__$d = script$d;
 
 /* template */
 var __vue_render__$d = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('FormItem',{attrs:{"prop":_vm.answerProp,"rules":{
-    required: _vm.question.options.required && !_vm.question.options.disabled,
-    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,staticStyle:{"display":"flex"}},[_c('Radio',{key:choice.id,attrs:{"disabled":_vm.question.options.readonly || _vm.question.options.disabled,"label":choice.id},nativeOn:{"click":function($event){return _vm.toggleAnswer($event, choice.id, _vm.question.options.disabled)}}},[(_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)))])]),_vm._v(" "),_vm._l((_vm.value.inputAnswers),function(inputAnswer,inputIndex){return _c('div',{key:inputIndex},[(
-              choice.id === inputAnswer.choiceId && choice.id === _vm.value.answer
-            )?_c('FormItem',{attrs:{"prop":_vm.inputAnswerProp(inputIndex),"rules":[
-              {
-                required: true,
-                message: _vm.t('survey_response.question.choice_required'),
-              },
-              {
-                type: 'string',
-                min: _vm.question.options.inputMinLength,
-                max: 999,
-                message: _vm.t('survey_response.question.input_text_limit', [
-                  _vm.question.options.inputMinLength ]),
-                trigger: 'blur',
-              } ]}},[(_vm.responseStatus=='ENABLED')?_c('Span',[_vm._v("\n                  "+_vm._s(inputAnswer.inputText))]):_vm._e(),_vm._v(" "),(_vm.responseStatus=='DRAFT')?_c('Input',{model:{value:(inputAnswer.inputText),callback:function ($$v) {_vm.$set(inputAnswer, "inputText", (typeof $$v === 'string'? $$v.trim(): $$v));},expression:"inputAnswer.inputText"}}):_vm._e()],1):_vm._e()],1)})],2)}),1)],1)],1)};
+      required: _vm.question.options.required && !_vm.question.options.disabled,
+      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',{style:({'display':(_vm.isMobile()?'inline-block':'flex')}),attrs:{"type":_vm.flexOrBlock,"justify":"start","gutter":60}},_vm._l((_vm.question.choices),function(choice){return _c('Col',{key:choice.id,class:_vm.optionLayout,style:({'display':(_vm.isMobile()?'inline-block':'flex')})},[_c('Radio',{key:choice.id,style:({'display':(_vm.isMobile()?'inline-block':'flex'),'align-items':(_vm.isMobile()?'':'center')}),attrs:{"disabled":_vm.question.options.readonly || _vm.question.options.disabled,"label":choice.id},nativeOn:{"click":function($event){return _vm.toggleAnswer($event, choice.id, _vm.question.options.disabled)}}},[(_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)))])]),_vm._v(" "),_vm._l((_vm.value.inputAnswers),function(inputAnswer,inputIndex){return _c('div',{key:inputIndex},[(
+                choice.id === inputAnswer.choiceId && choice.id === _vm.value.answer
+              )?_c('FormItem',{attrs:{"prop":_vm.inputAnswerProp(inputIndex),"rules":[
+                {
+                  required: true,
+                  message: _vm.t('survey_response.question.choice_required'),
+                },
+                {
+                  type: 'string',
+                  min: _vm.question.options.inputMinLength,
+                  max: 999,
+                  message: _vm.t('survey_response.question.input_text_limit', [
+                    _vm.question.options.inputMinLength ]),
+                  trigger: 'blur',
+                } ]}},[_c('Span',[_vm._v("\n                                  "+_vm._s(inputAnswer.inputText))])],1):_vm._e()],1)})],2)}),1)],1)],1)};
 var __vue_staticRenderFns__$d = [];
 
   /* style */
   const __vue_inject_styles__$d = function (inject) {
     if (!inject) return
-    inject("data-v-eb1364b8_0", { source: ".ivu-row-flex-start[data-v-eb1364b8]{align-items:center}.ivu-radio-group-item[data-v-eb1364b8]{display:flex;flex-direction:row}.choice-title[data-v-eb1364b8]{margin-left:8px;margin-right:8px}[data-v-eb1364b8] .ivu-radio-inner{margin-top:8px}", map: undefined, media: undefined });
+    inject("data-v-25eb6794_0", { source: ".choice-title[data-v-25eb6794]{margin-left:8px;margin-right:8px}", map: undefined, media: undefined });
 
   };
   /* scoped */
-  const __vue_scope_id__$d = "data-v-eb1364b8";
+  const __vue_scope_id__$d = "data-v-25eb6794";
   /* module identifier */
   const __vue_module_identifier__$d = undefined;
   /* functional template */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wg-npm/survey-response",
-  "version": "0.5.157",
+  "version": "0.5.158",
   "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.157",
-    "@wg-npm/survey-service-api": "0.5.157",
+    "@wg-npm/survey-core": "0.5.158",
+    "@wg-npm/survey-service-api": "0.5.158",
     "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.5.157",
-    "@wg-npm/survey-service-api": "0.5.157",
+    "@wg-npm/survey-core": "0.5.158",
+    "@wg-npm/survey-service-api": "0.5.158",
     "acorn": "^7.3.1",
     "axios": "^0.19.2",
     "babelrc-rollup": "^3.0.0",

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

@@ -1,13 +1,13 @@
 <template>
-  <div class="question-title">
-    <span v-if="question.type !== 'text_title'" class="pr-sm">
+  <div class="question-title" :style="{'display':(isMobile()?'inline-block':'')}">
+    <span v-if="question.type !== 'text_title'" class="pr-sm" :style="{'display':(isMobile()?'inline-block':'')}">
       <label v-if="question.options.required" class="require-label">*</label>
       <label v-if="question.header.number" class="number"
-        >{{ question.header.number }}.</label
+      >{{ question.header.number }}.</label
       >
     </span>
 
-    <div class="flex" v-for="(title, index) in getTitle(question)" :key="index">
+    <div class="flex" v-for="(title, index) in getTitle(question)" :key="index" :style="{'display':(isMobile()?'inline-block':'')}">
       <span v-if="title !== ''" class="content">{{ title }}</span>
       <div
         v-for="customTitle in customFilledTitle"
@@ -16,7 +16,7 @@
         <span
           class="content"
           v-if="title === '' && index === customTitle.index"
-          >{{ customTitle.title }}</span
+        >{{ customTitle.title }}</span
         >
 
         <div v-else>
@@ -26,13 +26,13 @@
               getShowInput(index, getTitle(question)) &&
               index === customTitle.index
             "
-            >{{ customTitle.title }}</span
+          >{{ customTitle.title }}</span
           >
         </div>
       </div>
     </div>
 
-    <span class="options-explain" v-if="haveStar">
+    <span class="options-explain" v-if="haveStar" :style="{'display':(isMobile()?'block':'')}">
       <span v-if="isSingleSelection">
         ({{
           t(
@@ -70,65 +70,69 @@
   </div>
 </template>
 <script lang="ts">
-import Vue from "vue";
-import { Icon } from "view-design";
-import {
-  BaseQuestionModel,
-  formatTitle,
-  QuestionType,
-  showInput,
-} from "@wg-npm/survey-core";
+  import Vue from "vue";
+  import OptionLayoutMixin from "../../mixins/option-layout-mixin";
+  import { Icon } from "view-design";
+  import {
+    BaseQuestionModel,
+    formatTitle,
+    QuestionType,
+    showInput
+  } from "@wg-npm/survey-core";
+  import QuestionMixin from "../../mixins/question-mixin";
 
-export default Vue.extend({
-  name: "question-title",
-  components: { Icon },
-  inject: ["$rootComponent"],
-  props: {
-    index: {
-      type: Number,
-      default: 0,
-    },
-    question: {
-      type: Object,
-      required: true,
-    },
-    language: {
-      type: String,
-    },
-    customQuestion: {
-      type: Object,
-      required: false,
+  export default Vue.extend({
+    name: "question-title",
+    mixins: [OptionLayoutMixin, QuestionMixin],
+    components: { Icon },
+    inject: ["$rootComponent"],
+    props: {
+      index: {
+        type: Number,
+        default: 0
+      },
+      question: {
+        type: Object,
+        required: true
+      },
+      language: {
+        type: String
+      },
+      customQuestion: {
+        type: Object,
+        required: false
+      }
     },
-  },
-  computed: {
-    customFilledTitle() {
-      return this.customQuestion?.filledTitle;
+    computed: {
+      customFilledTitle() {
+        return this.customQuestion?.filledTitle;
+      },
+      haveStar() {
+        return this.question?.options?.starEnabled ?? false;
+      },
+      isSingleSelection() {
+        return this.question.type == QuestionType.SINGLE_SELECTION;
+      }
     },
-    haveStar() {
-      return this.question?.options?.starEnabled ?? false;
-    },
-    isSingleSelection() {
-      return this.question.type == QuestionType.SINGLE_SELECTION;
-    },
-  },
-  methods: {
-    getShowInput(index, formatTitle) {
-      return showInput(index, formatTitle);
-    },
-    getTitle(question) {
-      return formatTitle(question, this.$rootComponent.currentLanguage);
-    },
-  },
-});
+    methods: {
+      getShowInput(index, formatTitle) {
+        return showInput(index, formatTitle);
+      },
+      getTitle(question) {
+        return formatTitle(question, this.$rootComponent.currentLanguage);
+      }
+    }
+  });
 </script>
 
 <style lang="less" scoped>
-.flex {
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-}
-.pr-sm {
-  padding-right: 4px;
-}
+  .flex {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+  }
+
+  .pr-sm {
+    padding-right: 4px;
+  }
 </style>

package/src/components/question/type/multi-selection.vue

@@ -9,12 +9,12 @@
     }"
   >
     <CheckboxGroup v-model="value.answer" @on-change="selChange">
-      <Row type="flex" justify="start" :gutter="60">
+      <Row :type="flexOrBlock" justify="start" :gutter="60">
         <Col
           v-for="choice in question.choices"
           :key="choice.id"
           :class="optionLayout"
-          style="display: flex"
+          :style="flexOrBlockStyle"
         >
           <Checkbox
             :label="choice.id"
@@ -55,10 +55,10 @@
               ]"
             >
                 <Span v-if="responseStatus=='ENABLED'">
-                    {{inputAnswer.inputText}}</Span>
-                <Input v-if="responseStatus=='DRAFT'"
-                       v-model.trim="inputAnswer.inputText"
-                />
+                    {{ inputAnswer.inputText }}</Span>
+              <Input v-if="responseStatus=='DRAFT'"
+                     v-model.trim="inputAnswer.inputText"
+              />
 
             </FormItem>
           </div>
@@ -68,138 +68,155 @@
   </FormItem>
 </template>
 <script lang="ts">
-import Vue from "vue";
-import _ from "lodash";
-import OptionLayoutMixin from "../../../mixins/option-layout-mixin";
-import QuestionMixin from "../../../mixins/question-mixin";
-import {
-  FormItem,
-  CheckboxGroup,
-  Checkbox,
-  Row,
-  Col,
-  Input,
-} from "view-design";
-
-export default Vue.extend({
-  name: "multi-selection",
-  inject: ["responseStatus","$rootComponent"],
-  mixins: [OptionLayoutMixin, QuestionMixin],
-  components: {
+  import Vue from "vue";
+  import _ from "lodash";
+  import OptionLayoutMixin from "../../../mixins/option-layout-mixin";
+  import QuestionMixin from "../../../mixins/question-mixin";
+  import {
     FormItem,
     CheckboxGroup,
     Checkbox,
     Row,
     Col,
-    Input,
-  },
-  props: {
-    question: {
-      type: Object,
-      required: true,
+    Input
+  } from "view-design";
+
+  export default Vue.extend({
+    name: "multi-selection",
+    inject: ["responseStatus", "$rootComponent"],
+    mixins: [OptionLayoutMixin, QuestionMixin],
+    components: {
+      FormItem,
+      CheckboxGroup,
+      Checkbox,
+      Row,
+      Col,
+      Input
     },
-    answer: {
-      type: Object,
-      required: true,
+    props: {
+      question: {
+        type: Object,
+        required: true
+      },
+      answer: {
+        type: Object,
+        required: true
+      }
     },
-  },
-  data() {
-    return {
-      value: this.answer,
-    };
-  },
-  watch: {
-    answer(n) {
-      this.value = n;
+    data() {
+      return {
+        value: this.answer
+      };
     },
-  },
-  methods: {
-    inputAnswerProp(inputIndex) {
-      return this.isMoreSurvey
-        ? `moreSurveyAnswers[${this.surveyIndex}].answers[${this.index}].inputAnswers[${inputIndex}].inputText`
-        : `answers[${this.index}].inputAnswers[${inputIndex}].inputText`;
+    watch: {
+      answer(n) {
+        this.value = n;
+      }
     },
-    setCheckboxStatus() {
-      let exclusiveChoiceId = "";
-      const notExclusiveChoices = new Array();
-      // @ts-ignore
-      _.each(this.question.choices, (choice) => {
-        if (choice.options.exclusiveEnabled) {
-          exclusiveChoiceId = choice.id;
+    computed: {
+      flexOrBlock() {
+        if (this.isMobile()) {
+          _.each(document.querySelectorAll(".ivu-radio-group-item") as NodeListOf<HTMLElement>, (ele) => {
+            ele.style.display = "inline-block";
+          });
+          return "inline-block";
+        } else {
+          _.each(document.querySelectorAll(".ivu-row-flex-start") as NodeListOf<HTMLElement>, (ele) => {
+            ele.style.alignItems = "center";
+          });
+          _.each(document.querySelectorAll(".ivu-radio-group-item") as NodeListOf<HTMLElement>, (ele) => {
+            ele.style.display = "flex";
+            ele.style.flexDirection = "row";
+          });
+          return "flex";
+        }
+      },
+      flexOrBlockStyle() {
+        if (this.isMobile()) {
+          return "display: inline-block";
         } else {
-          notExclusiveChoices.push(choice);
+          return "display: flex";
         }
-      });
+      }
+    },
+    methods: {
+      inputAnswerProp(inputIndex) {
+        return this.isMoreSurvey
+          ? `moreSurveyAnswers[${this.surveyIndex}].answers[${this.index}].inputAnswers[${inputIndex}].inputText`
+          : `answers[${this.index}].inputAnswers[${inputIndex}].inputText`;
+      },
+      setCheckboxStatus() {
+        let exclusiveChoiceId = "";
+        const notExclusiveChoices = new Array();
+        // @ts-ignore
+        _.each(this.question.choices, (choice) => {
+          if (choice.options.exclusiveEnabled) {
+            exclusiveChoiceId = choice.id;
+          } else {
+            notExclusiveChoices.push(choice);
+          }
+        });
 
-      // @ts-ignore
-      _.each(notExclusiveChoices, (choice) => {
         // @ts-ignore
-        choice.readonly = _.includes(this.value.answer, exclusiveChoiceId);
-      });
-    },
-    selChange(val) {
-      let score = 0;
-      let minStarCount = 0;
-      // @ts-ignore
-      _.each(this.question.choices, (choice) => {
+        _.each(notExclusiveChoices, (choice) => {
+          // @ts-ignore
+          choice.readonly = _.includes(this.value.answer, exclusiveChoiceId);
+        });
+      },
+      selChange(val) {
+        let score = 0;
+        let minStarCount = 0;
         // @ts-ignore
-        _.each(val, (id) => {
-          if (choice.id == id) {
-            if (choice.options.exclusiveEnabled) {
-              this.value.answer = [id];
-              score = parseInt(choice?.options?.score ?? 0);
-              minStarCount = 1;
-            } else {
-              score += parseInt(choice?.options?.score ?? 0);
-              minStarCount++;
+        _.each(this.question.choices, (choice) => {
+          // @ts-ignore
+          _.each(val, (id) => {
+            if (choice.id == id) {
+              if (choice.options.exclusiveEnabled) {
+                this.value.answer = [id];
+                score = parseInt(choice?.options?.score ?? 0);
+                minStarCount = 1;
+              } else {
+                score += parseInt(choice?.options?.score ?? 0);
+                minStarCount++;
+              }
             }
+          });
+        });
+
+        //处理输入题
+        _.forEach(this.value.inputAnswers, (input) => {
+          if (!_.includes(val, input.choiceId)) {
+            input.inputText = null;
           }
         });
-      });
+        this.setCheckboxStatus();
 
-      //处理输入题
-      _.forEach(this.value.inputAnswers, (input) => {
-        if (!_.includes(val, input.choiceId)) {
-          input.inputText = null;
+        // @ts-ignore
+        this.answer.score = score;
+        if (this.question.options.starEnabled) {
+          this.answer.star =
+            minStarCount >= this.question.options.starMinCount ? 1 : 0;
         }
-      });
-      this.setCheckboxStatus();
-
-      // @ts-ignore
-      this.answer.score = score;
-      if (this.question.options.starEnabled) {
-        this.answer.star =
-          minStarCount >= this.question.options.starMinCount ? 1 : 0;
       }
-    },
-  },
-});
+    }
+  });
 </script>
 
 <style lang="less" scoped>
-.ivu-row-flex-start {
-  align-items: center;
-}
-.ivu-checkbox-group-item {
-  display: flex;
-  flex-direction: row;
-}
-
-.choice-title {
-  margin-left: 8px;
-  margin-right: 8px;
-}
-
+  .ivu-row {
+    display: "inline-block";
+  }
 
-.choice-score {
-  margin-right: 8px;
-}
+  .choice-title {
+    margin-left: 8px;
+    margin-right: 8px;
+  }
 
-/deep/ .ivu-checkbox-inner {
-  margin-top: 8px;
-}
+  .choice-score {
+    margin-right: 8px;
+  }
 
-.ivu-checkbox-wrapper{
-  white-space: nowrap;
-}
+  .ivu-checkbox-wrapper {
+    white-space: nowrap;
+  }
 </style>

package/src/components/question/type/single-selection.vue

@@ -11,18 +11,18 @@
       @on-change="selChange"
       class="question-choice"
     >
-      <Row type="flex" justify="start" :gutter="60">
+      <Row :type="flexOrBlock" justify="start" :gutter="60" :style="{'display':(isMobile()?'inline-block':'flex')}">
         <Col
           v-for="choice in question.choices"
           :key="choice.id"
           :class="optionLayout"
-          style="display: flex"
+          :style="{'display':(isMobile()?'inline-block':'flex')}"
         >
-          <Radio
-            :disabled="question.options.readonly || question.options.disabled"
-            :label="choice.id"
-            :key="choice.id"
-            @click.native="
+          <Radio :style="{'display':(isMobile()?'inline-block':'flex'),'align-items':(isMobile()?'':'center')}"
+                 :disabled="question.options.readonly || question.options.disabled"
+                 :label="choice.id"
+                 :key="choice.id"
+                 @click.native="
               toggleAnswer($event, choice.id, question.options.disabled)
             "
           >
@@ -56,11 +56,13 @@
                 },
               ]"
             >
-                <Span v-if="responseStatus=='ENABLED'">
-                    {{inputAnswer.inputText}}</Span>
-                <Input v-if="responseStatus=='DRAFT'"
-                        v-model.trim="inputAnswer.inputText"
-                />
+              <Span>
+                                  {{ inputAnswer.inputText }}</Span>
+                <!--                <Span v-if="responseStatus=='ENABLED'">-->
+<!--                    {{ inputAnswer.inputText }}</Span>-->
+<!--              <Input v-if="responseStatus=='DRAFT'"-->
+<!--                     v-model.trim="inputAnswer.inputText"-->
+<!--              />-->
             </FormItem>
           </div>
         </Col>
@@ -70,128 +72,126 @@
 </template>
 
 <script lang="ts">
-import Vue from "vue";
-import OptionLayoutMixin from "../../../mixins/option-layout-mixin";
-import {
-  Col,
-  FormItem,
-  Icon,
-  Radio,
-  RadioGroup,
-  Row,
-  Input,
-} from "view-design";
-import _ from "lodash";
-import { SurveyLayout } from "@wg-npm/survey-core";
-import QuestionMixin from "../../../mixins/question-mixin";
-
-export default Vue.extend({
-  name: "single-selection",
-  components: {
+  import Vue from "vue";
+  import OptionLayoutMixin from "../../../mixins/option-layout-mixin";
+  import {
+    Col,
     FormItem,
-    RadioGroup,
+    Icon,
     Radio,
+    RadioGroup,
     Row,
-    Col,
-    Icon,
-    Input,
-  },
-  mixins: [OptionLayoutMixin, QuestionMixin],
-  inject: ["responseStatus", "$rootComponent"],
-  props: {
-    question: {
-      type: Object,
-      required: true,
-    },
-    answer: {
-      type: Object,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      value: this.answer,
-      // @ts-ignore
-      choiceClasses: this.buildChoiceClasses(),
-    };
-  },
-  watch: {
-    "question.options.layout"() {
-      this.choiceClasses = this.buildChoiceClasses();
-    },
-    answer(n) {
-      this.value = n;
-    },
-  },
-  methods: {
-    inputAnswerProp(inputIndex) {
-      return this.isMoreSurvey
-        ? `moreSurveyAnswers[${this.surveyIndex}].answers[${this.index}].inputAnswers[${inputIndex}].inputText`
-        : `answers[${this.index}].inputAnswers[${inputIndex}].inputText`;
-    },
-    selChange(id) {
-      // @ts-ignore
-      _.each(this.question.choices, (choice) => {
-        if (choice.id == id) {
-          // @ts-ignore
-          this.answer.score = parseInt(choice?.options?.score ?? 0);
-          this.answer.star = parseInt(choice?.options?.starCount ?? 0);
-        }
-      });
+    Input
+  } from "view-design";
+  import _ from "lodash";
+  import { SurveyLayout } from "@wg-npm/survey-core";
+  import QuestionMixin from "../../../mixins/question-mixin";
+
+  export default Vue.extend({
+    name: "single-selection",
+    components: {
+      FormItem,
+      RadioGroup,
+      Radio,
+      Row,
+      Col,
+      Icon,
+      Input
     },
-    buildChoiceClasses() {
-      return [
-        `question-choice`,
-        `question-choice-${_.lowerCase(
-          this.question.options.layout || SurveyLayout.HORIZONTAL
-        )}`,
-      ];
+    mixins: [OptionLayoutMixin, QuestionMixin],
+    inject: ["responseStatus", "$rootComponent"],
+    props: {
+      question: {
+        type: Object,
+        required: true
+      },
+      answer: {
+        type: Object,
+        required: true
+      }
     },
-    haveStar(choice) {
-      return choice.options?.star ?? false;
+    data() {
+      return {
+        value: this.answer,
+        // @ts-ignore
+        choiceClasses: this.buildChoiceClasses()
+      };
     },
-    toggleAnswer(e, value, disabled) {
-      if (
-        this.question.options.readonly ||
-        disabled ||
-        e.target.tagName !== "INPUT"
-      ) {
-        return;
+    watch: {
+      "question.options.layout"() {
+        this.choiceClasses = this.buildChoiceClasses();
+      },
+      answer(n) {
+        this.value = n;
       }
-      if (this.responseStatus == this.$consts.STATUS_DRAFT) {
-        if (this.value.answer && this.value.answer === value) {
-          this.value.answer = null;
-          _.forEach(this.value.inputAnswers, (input) => {
-            input.inputText = null;
-          });
+    },
+    computed: {
+      flexOrBlock() {
+        if (this.isMobile()) {
+          return "inline-block";
         } else {
-          this.value.answer = value;
+          return "flex";
         }
       }
-      this.$emit("singleQuestion", {
-        questionId: this.question.id,
-        choiceId: this.value.answer,
-      });
     },
-  },
-});
+    methods: {
+      inputAnswerProp(inputIndex) {
+        return this.isMoreSurvey
+          ? `moreSurveyAnswers[${this.surveyIndex}].answers[${this.index}].inputAnswers[${inputIndex}].inputText`
+          : `answers[${this.index}].inputAnswers[${inputIndex}].inputText`;
+      },
+      selChange(id) {
+        // @ts-ignore
+        _.each(this.question.choices, (choice) => {
+          if (choice.id == id) {
+            // @ts-ignore
+            this.answer.score = parseInt(choice?.options?.score ?? 0);
+            this.answer.star = parseInt(choice?.options?.starCount ?? 0);
+          }
+        });
+      },
+      buildChoiceClasses() {
+        return [
+          `question-choice`,
+          `question-choice-${_.lowerCase(
+            this.question.options.layout || SurveyLayout.HORIZONTAL
+          )}`
+        ];
+      },
+      haveStar(choice) {
+        return choice.options?.star ?? false;
+      },
+      toggleAnswer(e, value, disabled) {
+        if (
+          this.question.options.readonly ||
+          disabled ||
+          e.target.tagName !== "INPUT"
+        ) {
+          return;
+        }
+        if (this.responseStatus == this.$consts.STATUS_DRAFT) {
+          if (this.value.answer && this.value.answer === value) {
+            this.value.answer = null;
+            _.forEach(this.value.inputAnswers, (input) => {
+              input.inputText = null;
+            });
+          } else {
+            this.value.answer = value;
+          }
+        }
+        this.$emit("singleQuestion", {
+          questionId: this.question.id,
+          choiceId: this.value.answer
+        });
+      }
+    }
+  });
 </script>
 
 <style lang="less" scoped>
-.ivu-row-flex-start {
-  align-items: center;
-}
-.ivu-radio-group-item {
-  display: flex;
-  flex-direction: row;
-}
-
-.choice-title {
-  margin-left: 8px;
-  margin-right: 8px;
-}
+  .choice-title {
+    margin-left: 8px;
+    margin-right: 8px;
+  }
 
-/deep/ .ivu-radio-inner{
-  margin-top: 8px;
-}
 </style>

package/src/mixins/option-layout-mixin.ts

@@ -2,29 +2,33 @@ import Vue from "vue";
 import _ from "lodash";
 
 export default Vue.extend({
+  props: {
+    options: {
+      type: Object,
+    }
+  },
   methods: {
     isMobile() {
-      const flag = navigator.userAgent.match(
+      const val = 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;
+      return !_.isEmpty(val);
     },
   },
   computed: {
     optionLayout() {
       const globalLayout = _.lowerCase(
         // @ts-ignore
-        _.get(this.options, "layout", undefined)
-      );
-
-      if (this.isMobile() || "vertical" == globalLayout) {
-        return "";
-      }
-      const questionLayout = _.lowerCase(
-        // @ts-ignore
-        _.get(this.question.options, "layout", "horizontal")
+        _.get(this.options, "layout", "horizontal")
       );
-      return `question-choice-${questionLayout}`;
+      // if (this.isMobile() || "vertical" == globalLayout) {
+      //   return "";
+      // }
+      // const questionLayout = _.lowerCase(
+      //   // @ts-ignore
+      //   _.get(this.question.options, "layout", "horizontal")
+      // );
+      return `question-choice-${globalLayout}`;
     },
   },
 });