Clipboard plugin

Inspect the full details and code of a selected snippet

(function (UIkit) {
  if (!UIkit) {
    throw new Error('UIkit not found. Make sure UIkit is loaded before this plugin.');
  }

UIkit.component('clipboard', {
    props: {
      text: String,
      toggleIcon: String
    },

data() {
      return {
        text: '',
        toggleIcon: 'fa fa-check'
      };
    },

connected() {
      this.$el.addEventListener('click', this.copyText.bind(this));
    },

disconnected() {
      this.$el.removeEventListener('click', this.copyText);
    },

methods: {
      async copyText() {
        const text = this.text ? this.text.replace(/\\n/g, '\n') : '';
        if (!text) {
          console.warn('No text provided for clipboard copy.');
          return;
        }

if (navigator.clipboard) {
          try {
            await navigator.clipboard.writeText(text);
            this.showSuccess();
          } catch (err) {
            console.error('Failed to copy text: ', err);
          }
        } else {
          const textArea = document.createElement('textarea');
          textArea.value = text;
          textArea.style.top = '0';
          textArea.style.left = '0';
          textArea.style.position = 'fixed';
          document.body.appendChild(textArea);
          textArea.focus();
          textArea.select();
          try {
            if (document.execCommand('copy')) {
              this.showSuccess();
            }
          } catch (err) {
            console.error('Failed to copy text: ', err);
          } finally {
            document.body.removeChild(textArea);
          }
        }
      },

showSuccess() {
        const icon = this.$el.querySelector('i');
        if (icon) {
          const originalIconClass = icon.className;

icon.className = (this.toggleIcon ? this.toggleIcon : 'fa fa-check') + ' uk-text-success';
          setTimeout(() => {
            icon.className = originalIconClass;
          }, 2500);
        } else {
          if (this.$el.tagName === 'INPUT' || this.$el.tagName === 'TEXTAREA') {
            const originalValue = this.$el.value;
            this.$el.value = 'Copied';
            this.$el.classList.add('uk-text-success');
            setTimeout(() => {
              this.$el.value = originalValue;
              this.$el.classList.remove('uk-text-success');
            }, 2500);
          } else {
            const originalText = this.$el.textContent;
            this.$el.textContent = 'Copied';
            this.$el.classList.add('uk-text-success');
            setTimeout(() => {
              this.$el.textContent = originalText;
              this.$el.classList.remove('uk-text-success');
            }, 2500);
          }
        }
      }
    }
  });
})(window.UIkit);

Information

Detailed overview of a selected code snippet

yaneony

101

20.03.2025, 01:31:39

28.03.2025, 11:18:45

uk-border, uk-card, uk-clipboard, uk-container, uk-flex, uk-input, uk-margin, uk-padding, uk-text, uk-tooltip

Comments

Browse user feedback and discussions in detail

Currently in development and will be available soon. Stay tuned for updates!