@shopware-ag/meteor-component-library
Version:
The meteor component library is a Vue component library developed by Shopware. It is based on the [Meteor Design System](https://shopware.design/).
176 lines (175 loc) • 6.87 kB
JavaScript
import '../mt-text-editor-toolbar-button-link.css';
import { defineComponent, ref, openBlock, createElementBlock, Fragment, createVNode, withCtx, unref, createElementVNode, createTextVNode, toDisplayString } from "vue";
import MtModalRoot from "./MtModalRoot.js";
import MtModal from "./MtModal.js";
import MtButton from "./MtButton.js";
import mtTextField from "./MtTextField.js";
import { _ as _sfc_main$1 } from "../mt-switch.vue_vue_type_style_index_0_lang-e05ec27a.mjs";
import mtTextEditorToolbarButton from "./MtTextEditorToolbarButton.js";
import { _ as _sfc_main$2 } from "../mt-modal-close.vue_vue_type_script_setup_true_lang-15d65d8b.mjs";
import { useI18n } from "vue-i18n";
import { _ as _export_sfc } from "../_plugin-vue_export-helper-cc2b3d55.mjs";
import "../useModalContext-3b7570bc.mjs";
import "../mt-icon.vue_vue_type_style_index_0_lang-2cc5f73e.mjs";
import "./MtText.js";
import "../id-1e5b8276.mjs";
import "../focus-trap.esm-3b050c4a.mjs";
import "../useIsInsideTooltip-0c3bd290.mjs";
import "./MtLoader.js";
import "../mt-base-field-7a978dcf.mjs";
import "./MtInheritanceSwitch.js";
import "./MtTooltip.js";
import "../floating-ui.vue-fe27ebef.mjs";
import "../floating-ui.dom-f450fda4.mjs";
import "../index-221bad05.mjs";
import "./MtFieldCopyable.js";
import "../tooltip.directive-a5042569.mjs";
import "./MtHelpText.js";
import "../useFutureFlags-2be3e179.mjs";
import "./MtFieldError.js";
import "./MtFieldLabel.js";
const _hoisted_1 = { class: "mt-text-editor__link-modal" };
const _hoisted_2 = { class: "mt-text-editor__link-modal-footer" };
const linkButton = {
name: "link",
label: "mt-text-editor-toolbar-button-link.label",
icon: "regular-link-xs",
position: 12e3
};
const _sfc_main = /* @__PURE__ */ defineComponent({
__name: "mt-text-editor-toolbar-button-link",
props: {
editor: {
type: Object,
required: true
},
button: {
type: Object,
required: true
},
disabled: {
type: Boolean,
default: false
}
},
setup(__props) {
const { t } = useI18n({
useScope: "global",
messages: {
en: {
"mt-text-editor-toolbar-button-link": {
modalTitle: "Insert/Edit Link",
cancel: "Cancel",
applyLink: "Apply link",
openInNewTab: "Open in new tab",
linkUrl: "Link URL",
label: "Link"
}
},
de: {
"mt-text-editor-toolbar-button-link": {
modalTitle: "Link einfügen/bearbeiten",
cancel: "Abbrechen",
applyLink: "Link anwenden",
openInNewTab: "In neuem Tab öffnen",
linkUrl: "Link URL",
label: "Link"
}
}
}
});
const props = __props;
const showLinkModal = ref(false);
const linkHref = ref("");
const linkTarget = ref("");
const openLinkModal = () => {
linkHref.value = props.editor.getAttributes("link").href ?? "";
linkTarget.value = props.editor.getAttributes("link").target ?? "";
showLinkModal.value = true;
};
return (_ctx, _cache) => {
return openBlock(), createElementBlock(Fragment, null, [
createVNode(mtTextEditorToolbarButton, {
button: __props.button,
editor: props.editor,
disabled: __props.disabled,
onClick: openLinkModal
}, null, 8, ["button", "editor", "disabled"]),
createVNode(MtModalRoot, {
"is-open": showLinkModal.value,
onChange: _cache[3] || (_cache[3] = ($event) => showLinkModal.value = $event)
}, {
default: withCtx(() => [
createVNode(MtModal, {
width: "s",
title: unref(t)("mt-text-editor-toolbar-button-link.modalTitle")
}, {
default: withCtx(() => [
createElementVNode("div", _hoisted_1, [
createVNode(mtTextField, {
modelValue: linkHref.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => linkHref.value = $event),
label: unref(t)("mt-text-editor-toolbar-button-link.linkUrl"),
placeholder: "https://example.com",
required: ""
}, null, 8, ["modelValue", "label"]),
createVNode(_sfc_main$1, {
label: unref(t)("mt-text-editor-toolbar-button-link.openInNewTab"),
checked: linkTarget.value === "_blank",
"aria-label": unref(t)("mt-text-editor-toolbar-button-link.openInNewTab"),
onChange: _cache[1] || (_cache[1] = (checked) => {
linkTarget.value = checked ? "_blank" : "";
})
}, null, 8, ["label", "checked", "aria-label"])
])
]),
footer: withCtx(() => [
createElementVNode("div", _hoisted_2, [
createVNode(_sfc_main$2, {
as: MtButton,
variant: "secondary"
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref(t)("mt-text-editor-toolbar-button-link.cancel")), 1)
]),
_: 1
}),
createVNode(MtButton, {
variant: "primary",
onClick: _cache[2] || (_cache[2] = () => {
const linkAttributes = {
href: linkHref.value
};
if (linkTarget.value && linkTarget.value.trim() !== "") {
linkAttributes.target = linkTarget.value;
if (linkTarget.value === "_blank") {
linkAttributes.rel = "noopener noreferrer nofollow";
}
}
__props.editor.chain().focus().extendMarkRange("link").setLink(linkAttributes).run();
showLinkModal.value = false;
})
}, {
default: withCtx(() => [
createTextVNode(toDisplayString(unref(t)("mt-text-editor-toolbar-button-link.applyLink")), 1)
]),
_: 1
})
])
]),
_: 1
}, 8, ["title"])
]),
_: 1
}, 8, ["is-open"])
], 64);
};
}
});
const mtTextEditorToolbarButtonLink_vue_vue_type_style_index_0_scoped_1f1d1955_lang = "";
const mtTextEditorToolbarButtonLink = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1f1d1955"]]);
export {
mtTextEditorToolbarButtonLink as default,
linkButton
};
//# sourceMappingURL=MtTextEditorToolbarButtonLink.js.map