@shopware-ag/meteor-component-library/dist/esm/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';
import { defineComponent, ref, computed, resolveComponent, resolveDirective, openBlock, createElementBlock, withDirectives, createVNode } from "vue";
import { _ as _sfc_main$1 } from "../mt-icon.vue_vue_type_style_index_0_lang-2cc5f73e.mjs";
import { v as vTooltip } from "../tooltip.directive-a5042569.mjs";
import { useI18n } from "vue-i18n";
import { _ as _export_sfc } from "../_plugin-vue_export-helper-cc2b3d55.mjs";
import "../id-1e5b8276.mjs";
const MtNotificationMixin = 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 = defineComponent({
  name: "MtFieldCopyable",
  directives: {
    tooltip: vTooltip
  },
  components: {
    "mt-icon": _sfc_main$1
  },
  mixins: [MtNotificationMixin],
  props: {
    copyableText: {
      type: String,
      required: false,
      default: null
    },
    tooltip: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  setup(props) {
    const wasCopied = ref(false);
    const { t } = 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 = 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 = resolveComponent("mt-icon");
  const _directive_tooltip = resolveDirective("tooltip");
  return openBlock(), createElementBlock("button", _hoisted_1, [
    withDirectives(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__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-014f620f"]]);
export {
  MtFieldCopyable as default
};
//# sourceMappingURL=MtFieldCopyable.js.map