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

package/src/components/survey-response.vue

@@ -1,146 +1,179 @@
 <template>
-    <div v-if="!emptyQuestions" class="survey-response-wrapper">
-        <Form ref="responseForm" :model="response" :disabled="readonly">
-            <div :key="index" v-for="(question, index) in survey.questions" class="question">
-                <question-title
-                        :question="question"
-                        :index="index"
-                >
-                </question-title>
-                <question-body
-                        :question="calculateQuestion(question, index)"
-                        :answer="response.answers[index]"
-                        :index="index"
-                        :options="options"
-                        :readonly="readonly"
-                >
-                </question-body>
-            </div>
-        </Form>
-    </div>
-    <empty-question v-else></empty-question>
+  <div v-if="!emptyQuestions" class="survey-response-wrapper">
+    <Form ref="responseForm" :model="response" :disabled="readonly">
+      <div
+        :key="index"
+        v-for="(question, index) in survey.questions"
+        class="question"
+      >
+        <question-title :question="question" :index="index"> </question-title>
+        <question-body
+          :question="calculateQuestion(question, index)"
+          :answer="response.answers[index]"
+          :index="index"
+          :options="options"
+          :readonly="readonly"
+        >
+        </question-body>
+      </div>
+    </Form>
+  </div>
+  <empty-question v-else></empty-question>
 </template>
 <script lang="ts">
-    import Vue from 'vue';
-    import _ from 'lodash';
-    import EmptyQuestion from './empty-question.vue';
-    import QuestionTitle from './question/question-title.vue';
-    import QuestionBody from './question/question-body.vue';
-    import {Form} from "view-design";
-    import {QuestionType} from "@wg-npm/survey-core";
+import Vue from "vue";
+import _ from "lodash";
+import EmptyQuestion from "./empty-question.vue";
+import QuestionTitle from "./question/question-title.vue";
+import QuestionBody from "./question/question-body.vue";
+import { Form } from "view-design";
+import { QuestionType } from "@wg-npm/survey-core";
 
-    export default Vue.extend({
-        name: 'SurveyResponse',
-        components: {
-            QuestionTitle,
-            QuestionBody,
-            EmptyQuestion,
-            Form
-        },
-        provide() {
-            return {
-                responseStar: this.response.status != this.$consts.STATUS_DRAFT ? this.response.star : null,
-                survey: this.survey,
-                responseStatus: this.response.status,
-                $rootComponent: this
+export default Vue.extend({
+  name: "SurveyResponse",
+  components: {
+    QuestionTitle,
+    QuestionBody,
+    EmptyQuestion,
+    Form
+  },
+  provide() {
+    return {
+      responseStar:
+        this.response.status != this.$consts.STATUS_DRAFT
+          ? this.response.star
+          : null,
+      survey: this.survey,
+      responseStatus: this.response.status,
+      $rootComponent: this
+    };
+  },
+  props: {
+    survey: {
+      type: Object,
+      required: true
+    },
+    response: {
+      type: Object,
+      required: true
+    },
+    options: {
+      type: Object
+    },
+    size: {
+      type: String,
+      default: "default"
+    }
+  },
+  data() {
+    return {
+      answers: {}
+    };
+  },
+  created() {
+    this.parseQuestionAnswers();
+  },
+  computed: {
+    emptyQuestions: function() {
+      return _.size(this.survey.questions) == 0;
+    },
+    readonly() {
+      return this.response.status != this.$consts.STATUS_DRAFT;
+    },
+    layout() {
+      const globalLayout = _.lowerCase(
+        _.get(this.options, "layout", undefined)
+      );
+      return globalLayout || "horizontal";
+    }
+  },
+  methods: {
+    calculateQuestion(question, index) {
+      let backgroundAnswers =
+        this.response?.variables?.backgroundResponse?.answers ?? [];
+      this.calculateQuestionReadonlyOption(
+        question,
+        _.isEmpty(backgroundAnswers) ? {} : backgroundAnswers[index]
+      );
+      return question;
+    },
+    calculateQuestionReadonlyOption(question, backgroundAnswer) {
+      if (
+        question.type == QuestionType.TEXT_TITLE ||
+        question.type == QuestionType.SINGLE_SELECTION ||
+        question.type == QuestionType.FILL_BLANK ||
+        question.type == QuestionType.SHORT_ANSWER ||
+        question.type == QuestionType.MULTI_SELECTION
+      ) {
+        _.set(
+          question.options,
+          "readonly",
+          this.haveAnswered(backgroundAnswer)
+        );
+      }
+      if (question.type == QuestionType.MATRIX) {
+        _.forEach(question.subQuestions, (subQuestion, subIndex) => {
+          let backgroundSubAnswer = _.get(
+            backgroundAnswer,
+            `answer[${subIndex}]`,
+            null
+          );
+          _.set(subQuestion, "options", {
+            readonly: this.haveAnswered(backgroundSubAnswer)
+          });
+        });
+      }
+    },
+    haveAnswered(backgroundAnswer) {
+      return !_.isEmpty(backgroundAnswer?.answer ?? null);
+    },
+    parseQuestionAnswers() {
+      _.each(this.response.answers, data => {
+        _.set(this.answers, data.questionId, data);
+      });
+      _.set(this.response, "answers", []);
+      _.each(this.survey.questions, question => {
+        let answer: any = _.get(this.answers, question.id);
+        answer = answer
+          ? answer
+          : {
+              answer: question.type == "MULTI_SELECTION" ? [] : null,
+              question_id: question.id,
+              question_type: question.type,
+              score: null,
+              star: null
             };
-        },
-        props: {
-            survey: {
-                type: Object,
-                required: true
-            },
-            response: {
-                type: Object,
-                required: true
-            },
-            options: {
-                type: Object
-            },
-            size: {
-                type: String,
-                default: 'default'
-            }
-        },
-        data() {
-            return {
-                answers: {}
-            }
-        },
-        created() {
-            this.parseQuestionAnswers();
-        },
-        computed: {
-            emptyQuestions: function () {
-                return _.size(this.survey.questions) == 0;
-            },
-            readonly() {
-                return this.response.status != this.$consts.STATUS_DRAFT;
-            }
-        },
-        methods: {
-            calculateQuestion(question, index) {
-                let backgroundAnswers = this.response?.variables?.backgroundResponse?.answers ?? [];
-                this.calculateQuestionReadonlyOption(question, _.isEmpty(backgroundAnswers) ? {} : backgroundAnswers[index]);
-                return question;
-            },
-            calculateQuestionReadonlyOption(question, backgroundAnswer) {
-                if (question.type == QuestionType.TEXT_TITLE ||
-                    question.type == QuestionType.SINGLE_SELECTION ||
-                    question.type == QuestionType.FILL_BLANK ||
-                    question.type == QuestionType.SHORT_ANSWER ||
-                    question.type == QuestionType.MULTI_SELECTION) {
-                    _.set(question.options, 'readonly', this.haveAnswered(backgroundAnswer));
-                }
-                if (question.type == QuestionType.MATRIX) {
-                    _.forEach(question.subQuestions, (subQuestion, subIndex) => {
-                        let backgroundSubAnswer = _.get(backgroundAnswer, `answer[${subIndex}]`, null)
-                        _.set(subQuestion, "options", {'readonly': this.haveAnswered(backgroundSubAnswer)});
-                    })
-                }
-            },
-            haveAnswered(backgroundAnswer) {
-                return !_.isEmpty(backgroundAnswer?.answer ?? null);
-            },
-            parseQuestionAnswers() {
-                _.each(this.response.answers, data => {
-                    _.set(this.answers, data.questionId, data);
-                });
-                _.set(this.response, 'answers', []);
-                _.each(this.survey.questions, question => {
-                    let answer: any = _.get(this.answers, question.id);
-                    answer = answer
-                        ? answer
-                        : {
-                            answer: question.type == 'MULTI_SELECTION' ? [] : null,
-                            question_id: question.id,
-                            question_type: question.type,
-                            score: null,
-                            star: null
-                        };
-                    this.response.answers.push(answer);
-                });
-            },
-            validate() {
-                let result;
-                this.$refs["responseForm"].validate(valid => {
-                    result = valid;
-                });
-                return result;
-            },
-            getMaxScore(question) {
-                if (question.type === 'single_selection') {
-                    // @ts-ignore
-                    var score = _.maxBy(question.choices, answer_option => answer_option.options.score || 0).options.score;
-                    if (!score) {
-                        return 0;
-                    }
-                    return score;
-                } else {
-                    // @ts-ignore
-                    return _.sumBy(question.choices, answer_option => answer_option.options.score || 0);
-                }
-            }
+        this.response.answers.push(answer);
+      });
+    },
+    validate() {
+      let result;
+      this.$refs["responseForm"].validate(valid => {
+        result = valid;
+      });
+      return result;
+    },
+    getMaxScore(question) {
+      if (question.type === "single_selection") {
+        // @ts-ignore
+        var score = _.maxBy(
+          question.choices,
+          // @ts-ignore
+          answer_option => answer_option.options.score || 0
+        ).options.score;
+        if (!score) {
+          return 0;
         }
-    });
+        return score;
+      } else {
+        // @ts-ignore
+        return _.sumBy(
+          question.choices,
+          // @ts-ignore
+          answer_option => answer_option.options.score || 0
+        );
+      }
+    }
+  }
+});
 </script>

package/src/ellipsis-tooltip.ts

@@ -0,0 +1,160 @@
+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));
+  },
+});

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

@@ -2,20 +2,27 @@ import Vue from "vue";
 import _ from "lodash";
 
 export default Vue.extend({
-    methods: {
-        isMobile() {
-            let flag = navigator.userAgent.match(
-                /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
-            );
-            return flag;
-        }
-    },
-    computed: {
-        optionLayout() {
-            if (this.isMobile) {
-                return ""
-            }
-            return `question-choice-${_.lowerCase(_.get(this.question.options, "layout", "horizontal"))}`;
-        }
+  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}`;
+    }
+  }
 });