Vue.component('copbox',{
    template : `
      <div class="y2t-output">
        <div class="copied" v-bind:class="{ 'success': isSuccess}" ref="element">Copied!</div>
        <div class="top" v-on:click="copyToClipboard">
          <span class="copylabel">Copy to clipboard</span><span class="byl-icon-copy"></span>
        </div>
        <div ref="textToCopy" class="promptext">
            <slot></slot>
        </div>
        <div class="shader"></div>
      
      </div>
    `,
    data() {
      return {
        isSuccess: false
      }
    },
    methods : {
      copyToClipboard() {
        const textToCopy = this.$refs.textToCopy;
        const range = document.createRange();
        range.selectNode(textToCopy);
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
        document.execCommand('copy');
        window.getSelection().removeAllRanges();
        this.successOk();        
      },
      successOk(){
        this.isSuccess = true;
        this.$refs.element.addEventListener('animationend', () => {
          this.isFaded = false;
        });
      }
    }
})

let vm = new Vue({
  data() {
    return {
      loading: false
    }
  },
  methods: {
    loadingStart(){
      this.loading = true
    }
  }
}).$mount('#root')