@shopware-ag/meteor-component-library/dist/common/MtFieldCopyable.js

The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).

import '../mt-field-copyable.css';
"use strict";
const vue = require("vue");
const mtIcon_vue_vue_type_style_index_0_lang = require("../mt-icon.vue_vue_type_style_index_0_lang-0a28c7b6.js");
const tooltip_directive = require("../tooltip.directive-7b51326d.js");
const vueI18n = require("vue-i18n");
const _pluginVue_exportHelper = require("../_plugin-vue_export-helper-9c783a34.js");
require("../id-8e80f112.js");
const MtNotificationMixin = vue.defineComponent({
  methods: {
    createNotification() {
    },
    createNotificationSuccess(config) {
      const notification = {
        variant: "success",
        title: "global.default.success",
        ...config
      };
      this.createNotification(notification);
    },
    createNotificationInfo(config) {
      const notification = {
        variant: "info",
        title: "global.default.info",
        ...config
      };
      this.createNotification(notification);
    },
    createNotificationWarning(config) {
      const notification = {
        variant: "warning",
        title: this.$tc("global.default.warning"),
        ...config
      };
      this.createNotification(notification);
    },
    createNotificationError(config) {
      const notification = {
        variant: "error",
        title: "global.default.error",
        ...config
      };
      this.createNotification(notification);
    },
    createSystemNotificationSuccess(config) {
      const notification = {
        variant: "success",
        system: true,
        ...config
      };
      this.createNotification(notification);
    },
    createSystemNotificationInfo(config) {
      const notification = {
        variant: "info",
        system: true,
        ...config
      };
      this.createNotification(notification);
    },
    createSystemNotificationWarning(config) {
      const notification = {
        variant: "warning",
        system: true,
        ...config
      };
      this.createNotification(notification);
    },
    createSystemNotificationError(config) {
      const notification = {
        variant: "error",
        system: true,
        ...config
      };
      this.createNotification(notification);
    },
    createSystemNotification(config) {
      const notification = { system: true, ...config };
      this.createNotification(notification);
    }
  }
});
function copyToClipboard(stringToCopy) {
  const tempTextArea = document.createElement("textarea");
  tempTextArea.value = stringToCopy;
  document.body.appendChild(tempTextArea);
  tempTextArea.select();
  document.execCommand("copy");
  document.body.removeChild(tempTextArea);
}
const _sfc_main = vue.defineComponent({
  name: "MtFieldCopyable",
  directives: {
    tooltip: tooltip_directive.vTooltip
  },
  components: {
    "mt-icon": mtIcon_vue_vue_type_style_index_0_lang._sfc_main
  },
  mixins: [MtNotificationMixin],
  props: {
    copyableText: {
      type: String,
      required: false,
      default: null
    },
    tooltip: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  setup(props) {
    const wasCopied = vue.ref(false);
    const { t } = vueI18n.useI18n({
      messages: {
        en: {
          tooltip: {
            wasCopied: "Copied to clipboard.",
            canCopy: "Copy to clipboard.",
            notificationCopySuccessMessage: "Text has been copied to clipboard.",
            notificationCopyFailureMessage: "Text could not be copied to clipboard.",
            errorTitle: "Error copying to clipboard"
          }
        },
        de: {
          tooltip: {
            wasCopied: "In Zwischenablage kopiert.",
            canCopy: "In Zwischenablage kopieren.",
            notificationCopySuccessMessage: "Der Text wurde in die Zwischenablage kopiert.",
            notificationCopyFailureMessage: "Der Text konnte nicht in die Zwischenablage kopiert werden.",
            errorTitle: "Fehler beim kopieren in die Zwischenablage"
          }
        }
      }
    });
    const tooltipText = vue.computed(
      () => wasCopied.value ? t("tooltip.wasCopied") : t("tooltip.canCopy")
    );
    function copyToClipboard$1() {
      if (!props.copyableText)
        return;
      copyToClipboard(props.copyableText);
      if (props.tooltip) {
        wasCopied.value = true;
      }
    }
    return {
      copyToClipboard: copyToClipboard$1,
      tooltipText,
      wasCopied
    };
  }
});
const mtFieldCopyable_vue_vue_type_style_index_0_scoped_014f620f_lang = "";
const _hoisted_1 = { type: "button" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_mt_icon = vue.resolveComponent("mt-icon");
  const _directive_tooltip = vue.resolveDirective("tooltip");
  return vue.openBlock(), vue.createElementBlock("button", _hoisted_1, [
    vue.withDirectives(vue.createVNode(_component_mt_icon, {
      class: "mt-field-copyable",
      name: "regular-copy",
      size: "18",
      onClick: _ctx.copyToClipboard,
      onMouseleave: _cache[0] || (_cache[0] = ($event) => _ctx.wasCopied = false)
    }, null, 8, ["onClick"]), [
      [_directive_tooltip, {
        message: _ctx.tooltipText,
        width: 220,
        position: "top",
        showDelay: 300,
        hideDelay: 0
      }]
    ])
  ]);
}
const MtFieldCopyable = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-014f620f"]]);
module.exports = MtFieldCopyable;
//# sourceMappingURL=MtFieldCopyable.js.map