@wg-npm/survey-response 0.3.377-8.develop → 0.3.496-8.release

package/dist/survey-response.esm.js

@@ -254,7 +254,7 @@ var OptionLayoutMixin = Vue.extend({
     computed: {
         optionLayout() {
             const globalLayout = _.lowerCase(_.get(this.options, "layout", undefined));
-            if (this.isMobile || "vertical" == globalLayout) {
+            if (this.isMobile() || "vertical" == globalLayout) {
                 return "";
             }
             const questionLayout = _.lowerCase(_.get(this.question.options, "layout", "horizontal"));
@@ -318,7 +318,7 @@ var __vue_render__$c = 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,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)};
+  }}},[_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},[_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 */
@@ -501,7 +501,7 @@ const __vue_script__$a = script$a;
 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)};
+  }}},[_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},[_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 */
@@ -610,7 +610,7 @@ const __vue_script__$9 = script$9;
 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)};
+      }}},[_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},[_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 */
@@ -1218,20 +1218,21 @@ var script$2 = Vue.extend({
         Col,
         Card,
         Icon,
+        Tooltip,
         STAR: Star,
-        EXPR: Expr,
+        EXPR: Expr
     },
     mixins: [LocaleMixin],
     inject: ["$rootComponent"],
     props: {
         question: {
             type: Object,
-            required: true,
+            required: true
         },
         answer: {
             type: Object,
-            required: true,
-        },
+            required: true
+        }
     },
     methods: {
         iconType(id) {
@@ -1243,29 +1244,27 @@ var script$2 = Vue.extend({
             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":_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_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('Tooltip',{attrs:{"max-width":"200"}},[_c('p',{attrs:{"slot":"content"},slot:"content"},[_vm._v(_vm._s(_vm.i18nText(item.text)))]),_vm._v(" "),_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_staticRenderFns__$2 = [];
 
   /* style */
-  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 });
-
-  };
+  const __vue_inject_styles__$2 = undefined;
   /* scoped */
-  const __vue_scope_id__$2 = "data-v-71844af4";
+  const __vue_scope_id__$2 = undefined;
   /* 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 */
@@ -1280,7 +1279,7 @@ var __vue_staticRenderFns__$2 = [];
     __vue_is_functional_template__$2,
     __vue_module_identifier__$2,
     false,
-    createInjector,
+    undefined,
     undefined,
     undefined
   );

package/package.json

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

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

@@ -21,9 +21,10 @@
             <Icon class="icon" :type="iconType(item.id)" :size="36" />
           </div>
           <div class="card-content">
-            <div class="card-text">
-              <p class="text" v-ellipsis-tip>{{ i18nText(item.text) }}</p>
-            </div>
+            <Tooltip max-width="200">
+              <p slot="content">{{ i18nText(item.text) }}</p>
+              <p class="text">{{ i18nText(item.text) }}</p>
+            </Tooltip>
             <component
               :is="question.options.evaluationType"
               :item="item"
@@ -37,7 +38,7 @@
 
 <script lang="ts">
 import Vue from "vue";
-import { Col, Row, Card, Icon } from "view-design";
+import { Col, Row, Card, Icon, Tooltip } from "view-design";
 import LocaleMixin from "../../../mixins/locale-mixin";
 import { QuestionEvaluationModel } from "@wg-npm/survey-core";
 import Star from "./evaluation/star.vue";
@@ -50,20 +51,21 @@ export default Vue.extend({
     Col,
     Card,
     Icon,
+    Tooltip,
     STAR: Star,
-    EXPR: Expr,
+    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) {
@@ -75,13 +77,7 @@ export default Vue.extend({
       return this.answer.answer == id
         ? "evaluation-cards evaluation-cards-current"
         : "evaluation-cards";
-    },
-  },
+    }
+  }
 });
 </script>
-
-<style lang="less" scoped>
-.card-text {
-  width: 100%;
-}
-</style>

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

@@ -22,11 +22,6 @@
         >
           <Row type="flex" justify="start" :gutter="60">
             <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"
               v-for="choice in question.choices"
               :key="choice.id"
               :class="optionLayout"

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

@@ -11,11 +11,6 @@
     <CheckboxGroup v-model="value.answer" @on-change="selChange">
       <Row type="flex" justify="start" :gutter="60">
         <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"
           v-for="choice in question.choices"
           :key="choice.id"
           :class="optionLayout"

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

@@ -13,11 +13,6 @@
     >
       <Row type="flex" justify="start" :gutter="60">
         <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"
           v-for="choice in question.choices"
           :key="choice.id"
           :class="optionLayout"

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

@@ -16,7 +16,7 @@ export default Vue.extend({
         _.get(this.options, "layout", undefined)
       );
 
-      if (this.isMobile || "vertical" == globalLayout) {
+      if (this.isMobile() || "vertical" == globalLayout) {
         return "";
       }
       const questionLayout = _.lowerCase(

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

@@ -96,10 +96,20 @@
           .card-content {
             text-align: center;
 
+            .ivu-tooltip {
+              display: unset;
+            }
+            .ivu-tooltip-rel{
+              display: unset;
+            }
+
             p.text {
               font-weight: 500;
               font-size: 18px;
               padding: 10px;
+              white-space: nowrap;/*把文本强制显示在一行*/
+              overflow: hidden;/*隐藏超出部分的文字*/
+              text-overflow: ellipsis;/*超出显示省略号*/
             }
 
             .desc {

package/src/ellipsis-tooltip.ts

@@ -1,160 +0,0 @@
-import Vue from "vue";
-
-const GLOBAL_TOOLTIP_ID = "ellipsis-directive-tooltip-" + Math.random();
-const singleTipBox = function (maxWidth) {
-  let tipBox = document.getElementById(GLOBAL_TOOLTIP_ID);
-  if (!tipBox) {
-    tipBox = document.createElement("div");
-    tipBox.id = GLOBAL_TOOLTIP_ID;
-    tipBox.style.display = "none";
-    tipBox.style.position = "fixed";
-    tipBox.style.maxWidth = maxWidth + "px";
-    tipBox.style.padding = "8px 12px";
-    tipBox.style.backgroundColor = "rgba(70,76,91,.9)";
-    tipBox.style.borderRadius = "4px";
-    tipBox.style.boxShadow = "0 1px 6px rgba(0,0,0,.2)";
-    tipBox.style.color = "#fff";
-    tipBox.style.zIndex = "1200";
-    tipBox.style.wordWrap = "break-word";
-    tipBox.style.wordBreak = "break-all";
-    document.body.appendChild(tipBox);
-
-    tipBox.addEventListener("mouseover", (event) => {
-      // @ts-ignore
-      tipBox.style.display = "block";
-    });
-    tipBox.addEventListener("mouseout", (event) => {
-      // @ts-ignore
-      tipBox.style.display = "none";
-    });
-  }
-  return tipBox;
-};
-
-const createArrow = function () {
-  const arrow = document.createElement("div");
-  arrow.style.position = "absolute";
-  arrow.style.width = "0";
-  arrow.style.height = "0";
-  arrow.style.borderColor = "transparent";
-  arrow.style.borderStyle = "solid";
-  return arrow;
-};
-
-const setArrowStyle = function (event: MouseEvent, arrowEle, tipBox) {
-  if (event.clientY > tipBox.offsetTop) {
-    arrowEle.style.bottom = "-5px";
-    arrowEle.style.top = "auto";
-    arrowEle.style.borderWidth = "5px 5px 0";
-    arrowEle.style.borderTopColor = "rgba(70,76,91,.9)";
-  } else {
-    arrowEle.style.top = "-5px";
-    arrowEle.style.bottom = "auto";
-    arrowEle.style.borderWidth = "0 5px 5px";
-    arrowEle.style.borderBottomColor = "rgba(70,76,91,.9)";
-  }
-
-  if (event.clientX > tipBox.offsetLeft + 10) {
-    tipBox.style.display = "flex";
-    tipBox.style.justifyContent = "flex-end";
-  } else {
-    tipBox.style.display = "flex";
-    tipBox.style.justifyContent = "flex-start";
-  }
-};
-
-const calcTextWidth = function (el) {
-  el.style.whiteSpace = "nowrap";
-  el.style.display = "inline-block";
-  const textWidth = el.offsetWidth;
-  el.style.display = "none";
-  return textWidth;
-};
-
-const calcParentWidth = function (el) {
-  el.style.display = "block";
-  return el.parentElement.offsetWidth;
-};
-
-const calcTipTop = function (el, tipBox) {
-  let tipTop = el.getBoundingClientRect().top + el.offsetHeight;
-  const tipBottom = tipTop + tipBox.offsetHeight;
-  if (window.innerHeight - tipBottom < 1) {
-    tipTop = tipTop - tipBox.offsetHeight - el.offsetHeight;
-  }
-  return tipTop + "px";
-};
-
-const calcTopLeft = function (event, tipBox) {
-  let tipLeft = event.clientX - 10;
-  const tipRight = tipLeft + tipBox.offsetWidth;
-  if (window.innerWidth - tipRight < 1) {
-    tipLeft = tipLeft - tipBox.offsetWidth;
-  }
-  return tipLeft + "px";
-};
-
-const ellipsis = function (el, defaultLine) {
-  const line = defaultLine || 1;
-  el.style.display = "-webkit-box";
-  el.style.webkitLineClamp = line;
-  el.style.webkitBoxOrient = "vertical";
-  el.style.textOverflow = "ellipsis";
-  el.style.overflow = "hidden";
-};
-
-const show = function (tipBox) {
-  tipBox.style.display = "block";
-};
-
-const hidden = function (tipBox) {
-  tipBox.style.display = "none";
-};
-
-const contentText = function (tipBox, content) {
-  tipBox.innerText = content;
-};
-
-const ellipsisTip = function (el: HTMLElement, binding) {
-  const line = (binding.value && binding.value.defaultLine) || 1;
-  const textWidth = calcTextWidth(el);
-  const parentWidth = calcParentWidth(el);
-  el.style.whiteSpace = "normal";
-  if (textWidth > parentWidth * line) {
-    ellipsis(el, line);
-    const tipBox = singleTipBox(500);
-    const arrowEle = createArrow();
-
-    el.addEventListener("mousemove", (event) => {
-      contentText(
-        tipBox,
-        (binding.value && binding.value.content) || el.innerText
-      );
-      tipBox.appendChild(arrowEle);
-      show(tipBox);
-      el.style.cursor = "pointer";
-      tipBox.style.top = calcTipTop(el, tipBox);
-      tipBox.style.left = calcTopLeft(event, tipBox);
-      setArrowStyle(event, arrowEle, tipBox);
-    });
-
-    el.addEventListener("mouseout", (event) => {
-      hidden(tipBox);
-    });
-  }
-};
-
-Vue.directive("ellipsis-tip", {
-  bind: function (el, binding, vnode) {
-    window.addEventListener("resize", () => ellipsisTip(el, binding));
-  },
-  inserted: function (el, binding, vnode) {
-    ellipsisTip(el, binding);
-  },
-  componentUpdated(el, binding) {
-    ellipsisTip(el, binding);
-  },
-  unbind(el, binding) {
-    window.removeEventListener("resize", () => ellipsisTip(el, binding));
-  },
-});