@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/).
255 lines (254 loc) • 9.69 kB
JavaScript
import '../mt-text-editor-toolbar-button-table.css';
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const MtModalRoot = require("./MtModalRoot.js");
const MtModal = require("./MtModal.js");
const MtButton = require("./MtButton.js");
const mtSwitch_vue_vue_type_style_index_0_lang = require("../mt-switch.vue_vue_type_style_index_0_lang-fb6defc7.js");
const MtTextEditorToolbarButton = require("./MtTextEditorToolbarButton.js");
const MtNumberField = require("./MtNumberField.js");
const mtModalClose_vue_vue_type_script_setup_true_lang = require("../mt-modal-close.vue_vue_type_script_setup_true_lang-1e877a45.js");
const vueI18n = require("vue-i18n");
const _pluginVue_exportHelper = require("../_plugin-vue_export-helper-9c783a34.js");
require("../useModalContext-e62d6d51.js");
require("../mt-icon.vue_vue_type_style_index_0_lang-0a28c7b6.js");
require("./MtText.js");
require("../id-8e80f112.js");
require("../focus-trap.esm-8d514d11.js");
require("../useIsInsideTooltip-f4674e27.js");
require("./MtLoader.js");
require("./MtFieldError.js");
require("./MtFieldLabel.js");
require("./MtInheritanceSwitch.js");
require("./MtTooltip.js");
require("../floating-ui.vue-48d5c774.js");
require("../floating-ui.dom-fe395b67.js");
require("../index-ab705c2a.js");
require("./MtHelpText.js");
require("../useFutureFlags-35232480.js");
require("../tooltip.directive-7b51326d.js");
require("./MtTextField.js");
require("../mt-base-field-6a3a56a0.js");
require("./MtFieldCopyable.js");
const _hoisted_1 = { class: "mt-text-editor__table-modal" };
const _hoisted_2 = { class: "mt-text-editor__table-modal-footer" };
const tableButton = {
name: "table",
label: "mt-text-editor-toolbar-button-table.label",
icon: "regular-table-xs",
disabled: (editor, globalDisabled) => {
if (globalDisabled) {
return true;
}
return editor.isActive("table");
},
position: 13e3,
contextualButtons: (editor) => {
if (!editor.isActive("table")) {
return [];
}
return [
{
name: "table-insert-row-before",
label: "Insert row before",
icon: "regular-insert-row-before",
action: (editor2) => editor2.chain().focus().addRowBefore().run()
},
{
name: "table-insert-row-after",
label: "Insert row after",
icon: "regular-insert-row-after",
action: (editor2) => editor2.chain().focus().addRowAfter().run()
},
{
name: "table-delete-row",
label: "Delete row",
icon: "regular-delete-row",
action: (editor2) => editor2.chain().focus().deleteRow().run()
},
{
name: "table-insert-column-before",
label: "Insert column before",
icon: "regular-insert-column-before",
action: (editor2) => editor2.chain().focus().addColumnBefore().run()
},
{
name: "table-insert-column-after",
label: "Insert column after",
icon: "regular-insert-column-after",
action: (editor2) => editor2.chain().focus().addColumnAfter().run()
},
{
name: "table-delete-column",
label: "Delete column",
icon: "regular-delete-column",
action: (editor2) => editor2.chain().focus().deleteColumn().run()
},
{
name: "table-remove-table",
label: "Remove table",
icon: "regular-times-xs",
action: (editor2) => editor2.chain().focus().deleteTable().run()
}
];
}
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
__name: "mt-text-editor-toolbar-button-table",
props: {
editor: {
type: Object,
required: true
},
button: {
type: Object,
required: true
},
disabled: {
type: Boolean,
default: false
}
},
setup(__props) {
const { t } = vueI18n.useI18n({
useScope: "global",
messages: {
en: {
"mt-text-editor-toolbar-button-table": {
label: "Table",
modalTitle: "Insert/Edit Table",
insertTable: "Insert table",
cancel: "Cancel",
columns: "Columns",
rows: "Rows",
showHeader: "Show header",
insertRowBefore: "Insert row before",
insertRowAfter: "Insert row after",
deleteRow: "Delete row",
insertColumnBefore: "Insert column before",
insertColumnAfter: "Insert column after",
deleteColumn: "Delete column",
removeTable: "Remove table"
}
},
de: {
"mt-text-editor-toolbar-button-table": {
label: "Tabelle",
modalTitle: "Tabelle einfügen/bearbeiten",
insertTable: "Tabelle einfügen",
cancel: "Abbrechen",
columns: "Spalten",
rows: "Zeilen",
showHeader: "Kopfzeile anzeigen",
insertRowBefore: "Zeile davor einfügen",
insertRowAfter: "Zeile danach einfügen",
deleteRow: "Zeile löschen",
insertColumnBefore: "Spalte davor einfügen",
insertColumnAfter: "Spalte danach einfügen",
deleteColumn: "Spalte löschen",
removeTable: "Tabelle entfernen"
}
}
}
});
const props = __props;
const showTableModal = vue.ref(false);
const tableColumns = vue.ref(3);
const tableRows = vue.ref(3);
const tableShowHeader = vue.ref(true);
const openTableModal = () => {
if (props.editor.isActive("table")) {
return;
}
tableColumns.value = 3;
tableRows.value = 3;
tableShowHeader.value = true;
showTableModal.value = true;
};
const insertTable = () => {
props.editor.chain().focus().insertTable({
rows: tableRows.value,
cols: tableColumns.value,
withHeaderRow: tableShowHeader.value
}).run();
showTableModal.value = false;
};
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
vue.createVNode(MtTextEditorToolbarButton, {
button: __props.button,
editor: props.editor,
disabled: __props.disabled,
onClick: openTableModal
}, null, 8, ["button", "editor", "disabled"]),
vue.createVNode(MtModalRoot, {
isOpen: showTableModal.value,
onChange: _cache[3] || (_cache[3] = ($event) => showTableModal.value = $event)
}, {
default: vue.withCtx(() => [
vue.createVNode(MtModal, {
title: vue.unref(t)("mt-text-editor-toolbar-button-table.modalTitle"),
width: "s"
}, {
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_1, [
vue.createVNode(MtNumberField, {
label: vue.unref(t)("mt-text-editor-toolbar-button-table.columns"),
modelValue: tableColumns.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => tableColumns.value = $event),
type: "number",
min: 1,
numberType: "int"
}, null, 8, ["label", "modelValue"]),
vue.createVNode(MtNumberField, {
label: vue.unref(t)("mt-text-editor-toolbar-button-table.rows"),
modelValue: tableRows.value,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => tableRows.value = $event),
type: "number",
min: 1,
numberType: "int"
}, null, 8, ["label", "modelValue"]),
vue.createVNode(mtSwitch_vue_vue_type_style_index_0_lang._sfc_main, {
label: vue.unref(t)("mt-text-editor-toolbar-button-table.showHeader"),
modelValue: tableShowHeader.value,
"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => tableShowHeader.value = $event)
}, null, 8, ["label", "modelValue"])
])
]),
footer: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_2, [
vue.createVNode(mtModalClose_vue_vue_type_script_setup_true_lang._sfc_main, {
as: MtButton,
variant: "secondary"
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(vue.unref(t)("mt-text-editor-toolbar-button-table.cancel")), 1)
]),
_: 1
}),
vue.createVNode(MtButton, {
variant: "primary",
onClick: insertTable
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(vue.unref(t)("mt-text-editor-toolbar-button-table.insertTable")), 1)
]),
_: 1
})
])
]),
_: 1
}, 8, ["title"])
]),
_: 1
}, 8, ["isOpen"])
], 64);
};
}
});
const mtTextEditorToolbarButtonTable_vue_vue_type_style_index_0_scoped_33d27363_lang = "";
const mtTextEditorToolbarButtonTable = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["__scopeId", "data-v-33d27363"]]);
exports.default = mtTextEditorToolbarButtonTable;
exports.tableButton = tableButton;
//# sourceMappingURL=MtTextEditorToolbarButtonTable.js.map