npm - @wg-npm/survey-response - Versions diffs - 0.5.142 → 0.5.143 - Mend

@wg-npm/survey-response 0.5.142 → 0.5.143

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/survey-response.esm.js +21 -17
package/package.json +5 -5
package/src/components/question/type/scoring.vue +106 -64

package/dist/survey-response.esm.js CHANGED Viewed

@@ -1525,6 +1525,7 @@ var script$3 = Vue.extend({
         Slider,
         FormItem,
         InputNumber,
+        Col,
     },
     props: {
         question: {
@@ -1605,36 +1606,39 @@ var script$3 = Vue.extend({
 const __vue_script__$3 = script$3;
 /* template */
-var __vue_render__$3 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.showQuestionScoreSlider)?_c('Row',[_c('div',{staticStyle:{"margin-right":"134px","margin-bottom":"18px"}},[_c('Slider',{staticStyle:{"float":"left","width":"562px","margin-right":"16px"},attrs:{"min":_vm.question.options.minRange,"max":_vm.question.options.maxRange,"step":_vm.sliderStep,"show-tips":"always","disabled":_vm.question.options.readonly || _vm.question.options.disabled},model:{value:(_vm.value.score),callback:function ($$v) {_vm.$set(_vm.value, "score", $$v);},expression:"value.score"}}),_vm._v(" "),_c('FormItem',{staticStyle:{"display":"flex"},attrs:{"prop":_vm.answerProp,"rules":[
-          {
-            required: _vm.question.options.required && !_vm.question.options.disabled,
-            message: _vm.t('survey_response.question.question_required'),
-          } ]}},[_c('InputNumber',{staticStyle:{"float":"left"},attrs:{"precision":_vm.question.options.decimalPlaces,"min":_vm.question.options.minRange,"max":_vm.question.options.maxRange},model:{value:(_vm.value.score),callback:function ($$v) {_vm.$set(_vm.value, "score", $$v);},expression:"value.score"}})],1),_vm._v(" "),_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.extremeValueLabelSelected),expression:"extremeValueLabelSelected"}]},[_c('span',{staticStyle:{"float":"left","margin-left":"36px"}},[_vm._v("\n          "+_vm._s(_vm.t(
-              ("survey_creator.question.scoring.extreme_value_labels." + (_vm.question.options.extremeValueLabel) + ".minValue")
-            ))+"\n        ")]),_vm._v(" "),_c('span',{staticStyle:{"float":"right","align-items":"flex-end","margin-right":"88px"}},[_vm._v("\n          "+_vm._s(_vm.t(
-              ("survey_creator.question.scoring.extreme_value_labels." + (_vm.question.options.extremeValueLabel) + ".maxValue")
-            ))+"\n        ")])])],1)]):_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('Row',[_c('div',{staticStyle:{"margin-right":"134px","margin-bottom":"18px"}},[_c('Slider',{staticStyle:{"float":"left","width":"562px","margin-right":"16px"},attrs:{"min":_vm.question.options.minRange,"max":_vm.question.options.maxRange,"step":_vm.sliderStep,"show-tips":"always","disabled":subQuestion.options.readonly || _vm.question.options.disabled},model:{value:(_vm.value.answer[subIndex].score),callback:function ($$v) {_vm.$set(_vm.value.answer[subIndex], "score", $$v);},expression:"value.answer[subIndex].score"}}),_vm._v(" "),_c('FormItem',{staticStyle:{"display":"flex"},attrs:{"prop":_vm.subAnswerProp(subIndex),"rules":[
+var __vue_render__$3 = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.showQuestionScoreSlider)?_c('Row',[_c('Col',{attrs:{"xs":24,"sm":_vm.$rootComponent.layout === 'vertical' ? 24 : 12,"xl":_vm.$rootComponent.layout === 'vertical' ? 24 : 12,"md":_vm.$rootComponent.layout === 'vertical' ? 24 : 12,"lg":_vm.$rootComponent.layout === 'vertical' ? 24 : 12}},[_c('div',{staticClass:"slider-container"},[_c('Slider',{staticClass:"slider",attrs:{"min":_vm.question.options.minRange,"max":_vm.question.options.maxRange,"step":_vm.sliderStep,"show-tips":"always","disabled":_vm.question.options.readonly || _vm.question.options.disabled},model:{value:(_vm.value.score),callback:function ($$v) {_vm.$set(_vm.value, "score", $$v);},expression:"value.score"}}),_vm._v(" "),_c('FormItem',{staticStyle:{"display":"flex"},attrs:{"prop":_vm.answerProp,"rules":[
             {
               required:
                 _vm.question.options.required && !_vm.question.options.disabled,
               message: _vm.t('survey_response.question.question_required'),
-            } ]}},[_c('InputNumber',{staticStyle:{"float":"left"},attrs:{"precision":_vm.question.options.decimalPlaces,"min":_vm.question.options.minRange,"max":_vm.question.options.maxRange},model:{value:(_vm.value.answer[subIndex].score),callback:function ($$v) {_vm.$set(_vm.value.answer[subIndex], "score", $$v);},expression:"value.answer[subIndex].score"}})],1),_vm._v(" "),_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.extremeValueLabelSelected),expression:"extremeValueLabelSelected"}]},[_c('span',{staticStyle:{"float":"left","margin-left":"36px"}},[_vm._v("\n            "+_vm._s(_vm.t(
+            } ]}},[_c('InputNumber',{staticStyle:{"float":"left"},attrs:{"precision":_vm.question.options.decimalPlaces,"min":_vm.question.options.minRange,"max":_vm.question.options.maxRange},model:{value:(_vm.value.score),callback:function ($$v) {_vm.$set(_vm.value, "score", $$v);},expression:"value.score"}})],1)],1),_vm._v(" "),_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.extremeValueLabelSelected),expression:"extremeValueLabelSelected"}],staticClass:"text-desc"},[_c('span',[_vm._v("\n          "+_vm._s(_vm.t(
+              ("survey_creator.question.scoring.extreme_value_labels." + (_vm.question.options.extremeValueLabel) + ".minValue")
+            ))+"\n        ")]),_vm._v(" "),_c('span',[_vm._v("\n          "+_vm._s(_vm.t(
+              ("survey_creator.question.scoring.extreme_value_labels." + (_vm.question.options.extremeValueLabel) + ".maxValue")
+            ))+"\n        ")])])])],1):_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('Row',[_c('Col',{attrs:{"xs":24,"sm":_vm.$rootComponent.layout === 'vertical' ? 24 : 12,"xl":_vm.$rootComponent.layout === 'vertical' ? 24 : 12,"md":_vm.$rootComponent.layout === 'vertical' ? 24 : 12,"lg":_vm.$rootComponent.layout === 'vertical' ? 24 : 12}},[_c('div',{staticClass:"slider-container"},[_c('Slider',{staticClass:"slider",attrs:{"min":_vm.question.options.minRange,"max":_vm.question.options.maxRange,"step":_vm.sliderStep,"show-tips":"always","disabled":subQuestion.options.readonly || _vm.question.options.disabled},model:{value:(_vm.value.answer[subIndex].score),callback:function ($$v) {_vm.$set(_vm.value.answer[subIndex], "score", $$v);},expression:"value.answer[subIndex].score"}}),_vm._v(" "),_c('FormItem',{staticStyle:{"display":"flex"},attrs:{"prop":_vm.subAnswerProp(subIndex),"rules":[
+              {
+                required:
+                  _vm.question.options.required && !_vm.question.options.disabled,
+                message: _vm.t('survey_response.question.question_required'),
+              } ]}},[_c('InputNumber',{staticStyle:{"float":"left"},attrs:{"precision":_vm.question.options.decimalPlaces,"min":_vm.question.options.minRange,"max":_vm.question.options.maxRange},model:{value:(_vm.value.answer[subIndex].score),callback:function ($$v) {_vm.$set(_vm.value.answer[subIndex], "score", $$v);},expression:"value.answer[subIndex].score"}})],1)],1),_vm._v(" "),_c('div',{directives:[{name:"show",rawName:"v-show",value:(_vm.extremeValueLabelSelected),expression:"extremeValueLabelSelected"}],staticClass:"text-desc"},[_c('span',[_vm._v("\n            "+_vm._s(_vm.t(
                 ("survey_creator.question.scoring.extreme_value_labels." + (_vm.question.options.extremeValueLabel) + ".minValue")
-              ))+"\n          ")]),_vm._v(" "),_c('span',{staticStyle:{"float":"right","align-items":"flex-end","margin-right":"88px"}},[_vm._v("\n            "+_vm._s(_vm.t(
+              ))+"\n          ")]),_vm._v(" "),_c('span',[_vm._v("\n            "+_vm._s(_vm.t(
                 ("survey_creator.question.scoring.extreme_value_labels." + (_vm.question.options.extremeValueLabel) + ".maxValue")
-              ))+"\n          ")])])],1)])],1)})],2)};
+              ))+"\n          ")])])])],1)],1)})],2)};
 var __vue_staticRenderFns__$3 = [];
   /* style */
-  const __vue_inject_styles__$3 = undefined;
+  const __vue_inject_styles__$3 = function (inject) {
+    if (!inject) return
+    inject("data-v-7bd4b64c_0", { source: ".slider-container[data-v-7bd4b64c]{margin-top:16px;margin-bottom:16px;width:100%;display:flex}.slider-container[data-v-7bd4b64c] .ivu-form-item{margin-bottom:unset}.slider[data-v-7bd4b64c]{width:100%;margin-left:30px;margin-right:16px}.text-desc[data-v-7bd4b64c]{display:flex;justify-content:space-between;width:100%;padding-left:36px;padding-right:100px}", map: undefined, media: undefined });
+  };
   /* scoped */
-  const __vue_scope_id__$3 = undefined;
+  const __vue_scope_id__$3 = "data-v-7bd4b64c";
   /* module identifier */
   const __vue_module_identifier__$3 = undefined;
   /* functional template */
   const __vue_is_functional_template__$3 = false;
-  /* style inject */
   /* style inject SSR */
   /* style inject shadow dom */
@@ -1649,7 +1653,7 @@ var __vue_staticRenderFns__$3 = [];
     __vue_is_functional_template__$3,
     __vue_module_identifier__$3,
     false,
-    undefined,
+    createInjector,
     undefined,
     undefined
   );

package/package.json CHANGED Viewed

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

package/src/components/question/type/scoring.vue CHANGED Viewed

@@ -2,44 +2,53 @@
   <div>
     <!-- question slider -->
     <Row v-if="showQuestionScoreSlider">
-      <div style="margin-right: 134px; margin-bottom: 18px">
-        <Slider
-          style="float: left; width: 562px; margin-right: 16px"
-          v-model="value.score"
-          :min="question.options.minRange"
-          :max="question.options.maxRange"
-          :step="sliderStep"
-          show-tips="always"
-          :disabled="question.options.readonly || question.options.disabled"
-        ></Slider>
-        <FormItem
-          style="display: flex"
-          :prop="answerProp"
-          :rules="[
-            {
-              required: question.options.required && !question.options.disabled,
-              message: t('survey_response.question.question_required'),
-            },
-          ]"
-        >
-          <InputNumber
-            style="float: left"
+      <Col
+        :xs="24"
+        :sm="$rootComponent.layout === 'vertical' ? 24 : 12"
+        :xl="$rootComponent.layout === 'vertical' ? 24 : 12"
+        :md="$rootComponent.layout === 'vertical' ? 24 : 12"
+        :lg="$rootComponent.layout === 'vertical' ? 24 : 12"
+      >
+        <div class="slider-container">
+          <Slider
+            class="slider"
             v-model="value.score"
-            :precision="question.options.decimalPlaces"
             :min="question.options.minRange"
             :max="question.options.maxRange"
+            :step="sliderStep"
+            show-tips="always"
+            :disabled="question.options.readonly || question.options.disabled"
+          ></Slider>
+          <FormItem
+            style="display: flex"
+            :prop="answerProp"
+            :rules="[
+              {
+                required:
+                  question.options.required && !question.options.disabled,
+                message: t('survey_response.question.question_required'),
+              },
+            ]"
           >
-          </InputNumber>
-        </FormItem>
-        <div v-show="extremeValueLabelSelected">
-          <span style="float: left; margin-left: 36px">
+            <InputNumber
+              style="float: left"
+              v-model="value.score"
+              :precision="question.options.decimalPlaces"
+              :min="question.options.minRange"
+              :max="question.options.maxRange"
+            >
+            </InputNumber>
+          </FormItem>
+        </div>
+        <div class="text-desc" v-show="extremeValueLabelSelected">
+          <span>
             {{
               t(
                 `survey_creator.question.scoring.extreme_value_labels.${question.options.extremeValueLabel}.minValue`
               )
             }}
           </span>
-          <span style="float: right; align-items: flex-end; margin-right: 88px">
+          <span>
             {{
               t(
                 `survey_creator.question.scoring.extreme_value_labels.${question.options.extremeValueLabel}.maxValue`
@@ -47,7 +56,7 @@
             }}
           </span>
         </div>
-      </div>
+      </Col>
     </Row>
     <div
       v-else
@@ -61,49 +70,55 @@
       <span class="title"> {{ i18nText(subQuestion.text) }} </span>
       <!-- sub question slider -->
       <Row>
-        <div style="margin-right: 134px; margin-bottom: 18px">
-          <Slider
-            style="float: left; width: 562px; margin-right: 16px"
-            v-model="value.answer[subIndex].score"
-            :min="question.options.minRange"
-            :max="question.options.maxRange"
-            :step="sliderStep"
-            show-tips="always"
-            :disabled="
-              subQuestion.options.readonly || question.options.disabled
-            "
-          ></Slider>
-          <FormItem
-            style="display: flex"
-            :prop="subAnswerProp(subIndex)"
-            :rules="[
-              {
-                required:
-                  question.options.required && !question.options.disabled,
-                message: t('survey_response.question.question_required'),
-              },
-            ]"
-          >
-            <InputNumber
-              style="float: left"
+        <Col
+          :xs="24"
+          :sm="$rootComponent.layout === 'vertical' ? 24 : 12"
+          :xl="$rootComponent.layout === 'vertical' ? 24 : 12"
+          :md="$rootComponent.layout === 'vertical' ? 24 : 12"
+          :lg="$rootComponent.layout === 'vertical' ? 24 : 12"
+        >
+          <div class="slider-container">
+            <Slider
+              class="slider"
               v-model="value.answer[subIndex].score"
-              :precision="question.options.decimalPlaces"
               :min="question.options.minRange"
               :max="question.options.maxRange"
+              :step="sliderStep"
+              show-tips="always"
+              :disabled="
+                subQuestion.options.readonly || question.options.disabled
+              "
+            ></Slider>
+            <FormItem
+              style="display: flex"
+              :prop="subAnswerProp(subIndex)"
+              :rules="[
+                {
+                  required:
+                    question.options.required && !question.options.disabled,
+                  message: t('survey_response.question.question_required'),
+                },
+              ]"
             >
-            </InputNumber>
-          </FormItem>
-          <div v-show="extremeValueLabelSelected">
-            <span style="float: left; margin-left: 36px">
+              <InputNumber
+                style="float: left"
+                v-model="value.answer[subIndex].score"
+                :precision="question.options.decimalPlaces"
+                :min="question.options.minRange"
+                :max="question.options.maxRange"
+              >
+              </InputNumber>
+            </FormItem>
+          </div>
+          <div class="text-desc" v-show="extremeValueLabelSelected">
+            <span>
               {{
                 t(
                   `survey_creator.question.scoring.extreme_value_labels.${question.options.extremeValueLabel}.minValue`
                 )
               }}
             </span>
-            <span
-              style="float: right; align-items: flex-end; margin-right: 88px"
-            >
+            <span>
               {{
                 t(
                   `survey_creator.question.scoring.extreme_value_labels.${question.options.extremeValueLabel}.maxValue`
@@ -111,7 +126,7 @@
               }}
             </span>
           </div>
-        </div>
+        </Col>
       </Row>
     </div>
   </div>
@@ -120,7 +135,7 @@
 <script lang="ts">
 import Vue from "vue";
 import OptionLayoutMixin from "../../../mixins/option-layout-mixin";
-import { Row, Slider, FormItem, InputNumber } from "view-design";
+import { Row, Slider, FormItem, InputNumber, Col } from "view-design";
 import _ from "lodash";
 export default Vue.extend({
@@ -133,6 +148,7 @@ export default Vue.extend({
     Slider,
     FormItem,
     InputNumber,
+    Col,
   },
   props: {
     question: {
@@ -217,3 +233,29 @@ export default Vue.extend({
   },
 });
 </script>
+<style lang="less" scoped>
+.slider-container {
+  margin-top: 16px;
+  margin-bottom: 16px;
+  width: 100%;
+  display: flex;
+  /deep/.ivu-form-item {
+    margin-bottom: unset;
+  }
+}
+.slider {
+  width: 100%;
+  margin-left: 30px;
+  margin-right: 16px;
+}
+.text-desc {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding-left: 36px;
+  padding-right: 100px;
+}
+</style>