@wg-npm/survey-response 0.3.4166 → 0.3.4371

package/dist/survey-response.esm.js

@@ -1235,6 +1235,7 @@ var script$2 = Vue.extend({
         Col,
         Card,
         Icon,
+        Tooltip,
         STAR: Star,
         EXPR: Expr,
     },
@@ -1268,21 +1269,19 @@ var script$2 = Vue.extend({
 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 */
@@ -1297,7 +1296,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.4166",
+  "version": "0.3.4371",
   "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.4166",
-    "@wg-npm/survey-service-api": "0.3.4166",
+    "@wg-npm/survey-core": "0.3.4371",
+    "@wg-npm/survey-service-api": "0.3.4371",
     "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.4166",
-    "@wg-npm/survey-service-api": "0.3.4166",
+    "@wg-npm/survey-core": "0.3.4371",
+    "@wg-npm/survey-service-api": "0.3.4371",
     "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,6 +51,7 @@ export default Vue.extend({
     Col,
     Card,
     Icon,
+    Tooltip,
     STAR: Star,
     EXPR: Expr,
   },
@@ -79,9 +81,3 @@ export default Vue.extend({
   },
 });
 </script>
-
-<style lang="less" scoped>
-.card-text {
-  width: 100%;
-}
-</style>

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));
-  },
-});