# All files / src Question.vue

0% Statements 0/10
0% Branches 0/4
0% Functions 0/4
0% Lines 0/10

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103

     <template>
        <div :class="['question-wrapper', addClass]">
            <div class="body-wrapper">
                <!-- Default slot is question body -->
                <slot></slot>
                <div v-if="hasInputBool" class="textarea-container">
                    <textarea class="form-control question-input" rows="3" placeholder="write your answer here..."></textarea>
                </div>
            </div>
            <panel v-show="hasHintSlot" expandable no-close preload>
                <template slot="header">
                    Hint
                </template>
                <template v-if="isEmptyHint">
                    No hint is available for this question.
                </template>
                <template v-else>
                    <div ref="hintWrapper">
                        <slot name="hint"></slot>
                    </div>
                </template>
            </panel>
            <panel v-show="hasAnswerSlot" expandable no-close preload>
                <template slot="header">
                    Answer
                </template>
                <template v-if="isEmptyAnswer">
                    No answer is provided for this question.
                </template>
                <template v-else>
                    <div ref="answerWrapper">
                        <slot name="answer"></slot>
                    </div>
                </template>
            </panel>
        </div>
    </template>

    <script>
      import {toBoolean} from './utils/utils.js'
      import panel from './Panel.vue'

      export default {
        components: {
          panel,
        },
        props: {
          hasInput: {
            type: Boolean,
            default: false
          },
          addClass: {
            type: String,
            default: ''
          }
        },
        computed: {
          // Vue 2.0 coerce migration
          hasInputBool () {
            return toBoolean(this.hasInput);
          }
          // Vue 2.0 coerce migration end
        },
        data () {
          return {
            hasAnswerSlot: true,
            hasHintSlot: true,
            isEmptyAnswer: false,
            isEmptyHint: false
          }
        },
        mounted() {
          this.$nextTick(function() {
            const emptyDiv = '<div></div>';
            this.hasAnswerSlot = !!this.$slots.answer;
            this.hasHintSlot = !!this.$slots.hint;
            if (this.$refs.answerWrapper) {
              this.isEmptyAnswer = this.$refs.answerWrapper.innerHTML === emptyDiv;
            }
            if (this.$refs.hintWrapper) {
              this.isEmptyHint = this.$refs.hintWrapper.innerHTML === emptyDiv;
            }
          })
        }
      }
    </script>

    <style>
        .body-wrapper {
            padding-bottom: 10px;
        }
        .question-wrapper > .panel-group > .panel-container + .panel-container {
            display: block;
            margin-top: 5px;
        }
        .textarea-container {
            margin: 8px 0;
        }
        .textarea-container > textarea {
            margin: 4px 0;
        }
    </style>