Vue 2.0 Hello World

by blowsie

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
 <form
    ref="textareaForm"
    method="get"
    target="textAreaFrame"
    action="https://jsonplaceholder.typicode.com/test" 
    class="component-text-area-fixed"
  >
    <div
      class="mdc-text-field mdc-text-field--textarea je-textarea"
      :class="{'has-error':
        hasError}"
    >
      <textarea
        :id="_uid"
        :name="_uid"
        class="mdc-text-field__input"
        :cols="cols"
        :rows="rows"
        wrap="hard"
        @keyup="getTextAreaValue"
        @paste="getTextAreaValue"
        @cut="getTextAreaValue"
      ></textarea>
      <div class="mdc-notched-outline">
        <div class="mdc-notched-outline__leading" />
        <div class="mdc-notched-outline__notch">
          <label :for="_uid" class="mdc-floating-label">{{ label }}</label>
        </div>
        <div class="mdc-notched-outline__trailing" />
      </div>
    </div>
    <div class="validation-advice" :class="{'validation-advice-without-error': !hasError}">
      {{ lines }} / {{ maxLines }} lines used
    </div>
    <!--    <pre>{{ output }}</pre>-->
    <iframe
      id="textAreaFrame"
      ref="textAreaFrame"
      name="textAreaFrame"
      style="display: none"
      @load="setTextAreaValue"
    />
  </form>

</div>

JavaScript

function getURLParameter(qs, name) {
  const pattern = '[\\?&]' + name + '=([^&#]*)'
  const regex = new RegExp(pattern)
  const res = regex.exec(qs)
  if (res == null) {
    return ''
  } else {
    return res[1]
  }
}


new Vue({
  el: "#app",
  props: {
    value: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: 'Message'
    },
    cols: {
      type: Number,
      default: 40
    },
    rows: {
      type: Number,
      default: 5
    },
    maxLines: {
      type: Number,
      default: 4
    }
  },
  data() {
    return {
      output: '',
      mdc: null
    }
  },
  computed: {
    lines: function() {
      return this.output.split('\n').length
    },
    hasError: function() {
      return this.lines > 4
    }
  },
  mounted() {
    /* eslint-disable no-new */
    // Germany can ignore this line
  //  this.mdc = new MDCTextField(this.$el)
    /* eslint-enable no-new */
    this.getTextAreaValue()
  },
  methods: {
    getTextAreaValue: function() {
      this.$refs.textareaForm.submit()
    },
    setTextAreaValue: function() {
      if (top.location.href !== window.location.href) {
        return
      }
      const fromUrl = this.$refs.textAreaFrame.contentDocument.URL
      if (fromUrl.indexOf('http') < 0) {
        return
      }
      this.output = getURLParameter(unescape(fromUrl), this._uid).replace(/\+/g, ' ')
      // debugger
    }
  }

})