Vue.component('copybox',{
    template : `
      <div class="y2t-output">
        <button v-on:click="copyToClipboard">Copy</button>
        <p>{{ txt }}</p>
      </div>
    `,
    props : {
      txt : String
    },
    methods : {
      copyToClipboard() {
        navigator.clipboard.writeText(this.txt).then(() => {
          console.log('Text copied to clipboard');
        }, (err) => {
          console.error('Failed to copy text: ', err);
        });
      },
    }
})

Vue.component('copbox',{
    template : `
      <div class="y2t-output">
        
        <button v-on:click="copyToClipboard">Copy</button>
        
        <div ref="textToCopy">
            <slot></slot>
        </div>
      
      </div>
    `,
    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();        
      },
    }
})

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