@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/).
71 lines (70 loc) • 2.63 kB
JavaScript
import '../mt-text-editor-toolbar-button.css';
;
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 _hoisted_1 = ["aria-label", "disabled"];
const _hoisted_2 = { key: 1 };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "mt-text-editor-toolbar-button",
props: {
editor: {
type: Object,
required: true
},
button: {
type: Object,
required: true
},
disabled: {
type: Boolean,
default: false
}
},
emits: ["click"],
setup(__props, { emit: __emit }) {
const { t } = vueI18n.useI18n();
const props = __props;
const emit = __emit;
const handleButtonClick = () => {
emit("click");
};
const buttonClass = (button) => {
return {
"mt-text-editor-toolbar-button": true,
"is-active": button.isActive && button.isActive(props.editor)
};
};
const translatedLabel = vue.computed(() => {
return t(props.button.label);
});
return (_ctx, _cache) => {
return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
type: "button",
onClick: _cache[0] || (_cache[0] = ($event) => handleButtonClick()),
class: vue.normalizeClass(buttonClass(__props.button)),
"aria-label": translatedLabel.value,
disabled: __props.button.disabled ? __props.button.disabled(props.editor, __props.disabled) : __props.disabled
}, [
__props.button.icon ? (vue.openBlock(), vue.createBlock(mtIcon_vue_vue_type_style_index_0_lang._sfc_main, {
key: 0,
name: __props.button.icon
}, null, 8, ["name"])) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, vue.toDisplayString(translatedLabel.value), 1))
], 10, _hoisted_1)), [
[vue.unref(tooltip_directive.vTooltip), {
disabled: !translatedLabel.value,
message: translatedLabel.value,
position: "top",
hideDelay: 0
}]
]);
};
}
});
const mtTextEditorToolbarButton_vue_vue_type_style_index_0_scoped_55e6cf87_lang = "";
const mtTextEditorToolbarButton = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-55e6cf87"]]);
module.exports = mtTextEditorToolbarButton;
//# sourceMappingURL=MtTextEditorToolbarButton.js.map