@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/).
78 lines (77 loc) • 2.83 kB
JavaScript
import '../mt-text-editor-toolbar-button.css';
import { defineComponent, computed, withDirectives, openBlock, createElementBlock, normalizeClass, createBlock, toDisplayString, unref } 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 _hoisted_1 = ["aria-label", "disabled"];
const _hoisted_2 = { key: 1 };
const _sfc_main = /* @__PURE__ */ 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 } = useI18n();
const props = __props;
const emit = __emit;
const handleButtonClick = () => {
emit("click");
};
const buttonClass = (button) => {
var _a;
return {
"mt-text-editor-toolbar-button": true,
"is-active": !!((_a = button == null ? void 0 : button.isActive) == null ? void 0 : _a.call(button, props.editor))
};
};
const translatedLabel = computed(() => {
var _a;
if (!((_a = props.button) == null ? void 0 : _a.label)) {
return "";
}
return t(props.button.label);
});
return (_ctx, _cache) => {
var _a, _b;
return withDirectives((openBlock(), createElementBlock("button", {
type: "button",
onClick: _cache[0] || (_cache[0] = ($event) => handleButtonClick()),
class: normalizeClass(buttonClass(__props.button)),
"aria-label": translatedLabel.value,
disabled: ((_a = __props.button) == null ? void 0 : _a.disabled) ? __props.button.disabled(props.editor, __props.disabled) : __props.disabled
}, [
((_b = __props.button) == null ? void 0 : _b.icon) ? (openBlock(), createBlock(_sfc_main$1, {
key: 0,
name: __props.button.icon
}, null, 8, ["name"])) : (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(translatedLabel.value), 1))
], 10, _hoisted_1)), [
[unref(vTooltip), {
disabled: !translatedLabel.value,
message: translatedLabel.value,
position: "top",
hideDelay: 0
}]
]);
};
}
});
const mtTextEditorToolbarButton_vue_vue_type_style_index_0_scoped_aa77fa3f_lang = "";
const mtTextEditorToolbarButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-aa77fa3f"]]);
export {
mtTextEditorToolbarButton as default
};
//# sourceMappingURL=MtTextEditorToolbarButton.js.map