@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/).
295 lines (294 loc) • 10.7 kB
JavaScript
"use strict";
const vue = require("vue");
const MtButton = require("./MtButton.js");
const mtIcon_vue_vue_type_style_index_0_lang = require("../mt-icon.vue_vue_type_style_index_0_lang-0a28c7b6.js");
const MtPopover = require("./MtPopover.js");
const MtPopoverItem = require("./MtPopoverItem.js");
const MtPopoverItemResult = require("../mt-popover-item-result-77871fb7.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("../useIsInsideTooltip-f4674e27.js");
require("./MtLoader.js");
require("./MtCheckbox.js");
require("../mt-base-field-6a3a56a0.js");
require("./MtInheritanceSwitch.js");
require("./MtTooltip.js");
require("../floating-ui.vue-48d5c774.js");
require("../floating-ui.dom-fe395b67.js");
require("../index-ab705c2a.js");
require("./MtFieldCopyable.js");
require("./MtHelpText.js");
require("../id-8e80f112.js");
require("../useFutureFlags-35232480.js");
require("./MtFieldError.js");
require("./MtText.js");
require("../mt-switch.vue_vue_type_style_index_0_lang-fb6defc7.js");
require("./MtFieldLabel.js");
require("./MtSmoothReflow.js");
require("../_commonjsHelpers-2cbbddc8.js");
require("../mt-floating-ui.vue_vue_type_style_index_0_lang-1a484bca.js");
require("./MtSearch.js");
const _sfc_main = vue.defineComponent({
name: "MtDataTableSettings",
components: {
"mt-button": MtButton,
"mt-icon": mtIcon_vue_vue_type_style_index_0_lang._sfc_main,
"mt-popover": MtPopover,
"mt-popover-item": MtPopoverItem,
"mt-popover-item-result": MtPopoverItemResult.MtPopoverItemResult
},
directives: {
tooltip: tooltip_directive.vTooltip
},
props: {
columns: {
type: Array,
required: true
},
showOutlines: {
type: Boolean,
required: false,
default: false
},
showStripes: {
type: Boolean,
required: false,
default: false
},
enableOutlineFraming: {
type: Boolean,
required: false,
default: false
},
enableRowNumbering: {
type: Boolean,
required: false,
default: false
}
},
emits: [
"reset-all-changes",
"change-column-order",
"change-column-visibility",
"change-show-outlines",
"change-show-stripes",
"change-outline-framing",
"change-enable-row-numbering"
],
setup(props, { emit }) {
const { t } = vueI18n.useI18n({
messages: {
en: {
title: "Settings",
resetAllChanges: "Reset all changes",
columnOrder: {
title: "Columns",
columnGroups: {
labelShown: "Shown in table",
actionLabelShown: "Hide all",
labelHidden: "Hidden in table",
actionLabelHidden: "Show all"
}
},
showNumberedColumn: "Show numbered column",
showStripedRows: "Show striped rows",
showOutlines: "Show outlines",
frameOutlines: "Frame outlines",
frameOutlinesMetaCopy: "Highlight column and row outlines on mouse hover",
tooltip: "View settings",
"aria-toggle-table-settings": "Toggle view settings"
},
de: {
title: "Einstellungen",
resetAllChanges: "Alle Änderungen zurücksetzen",
columnOrder: {
title: "Spalten",
columnGroups: {
labelShown: "In Tabelle sichtbar",
actionLabelShown: "Alle ausblenden",
labelHidden: "In Tabelle ausgeblendet",
actionLabelHidden: "Alle einblenden"
}
},
showNumberedColumn: "Zeige nummerierte Spalte an",
showStripedRows: "Zeige gestreifte Zeilen an",
showOutlines: "Zeige Umrisse an",
frameOutlines: "Hebe Umrisse vor",
frameOutlinesMetaCopy: "Hervorhebung von Spalten- und Zeilenumrissen bei Mausüberlagerung",
tooltip: "Tabelleneinstellungen",
"aria-toggle-table-settings": "Tabelleneinstellungen umschalten"
}
}
});
const tableSettingsChildViews = vue.computed(() => {
return [
{
name: "columnOrder",
title: t("columnOrder.title")
}
];
});
const columnGroups = vue.computed(() => {
return [
{
id: "visible",
label: t("columnOrder.columnGroups.labelShown"),
actionLabel: t("columnOrder.columnGroups.actionLabelShown")
},
{
id: "hidden",
label: t("columnOrder.columnGroups.labelHidden"),
actionLabel: t("columnOrder.columnGroups.actionLabelHidden")
}
];
});
const columnOrderOptions = vue.computed(() => {
return props.columns.map((column) => {
return {
id: column.property,
label: column.label,
parentGroup: column.visible ?? true ? "visible" : "hidden",
position: column.position,
isVisible: column.visible ?? true,
isHidable: isPrimaryColumn(column) ? false : true,
isSortable: isPrimaryColumn(column) ? false : true
};
});
});
const onColumnChangeVisibility = (columnProperty, visibility) => {
emit("change-column-visibility", columnProperty, visibility);
};
const onColumnClickGroupAction = (groupId) => {
props.columns.forEach((column) => {
if (isPrimaryColumn(column)) {
return;
}
onColumnChangeVisibility(column.property, groupId === "visible" ? false : true);
});
};
const onColumnChangeOrder = ({
itemId,
dropZone,
dropId
}) => {
const targetColumn = props.columns.find((column) => column.property === dropId);
if (!itemId) {
return;
}
onColumnChangeVisibility(itemId, (targetColumn == null ? void 0 : targetColumn.visible) ?? true);
emit("change-column-order", { itemId, dropZone, dropId });
};
const resetAllChanges = () => {
emit("reset-all-changes");
};
const isPrimaryColumn = (column) => {
return props.columns[0].property === column.property;
};
return {
tableSettingsChildViews,
resetAllChanges,
columnGroups,
columnOrderOptions,
onColumnChangeVisibility,
onColumnClickGroupAction,
onColumnChangeOrder,
isPrimaryColumn,
t
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_mt_icon = vue.resolveComponent("mt-icon");
const _component_mt_button = vue.resolveComponent("mt-button");
const _component_mt_popover_item = vue.resolveComponent("mt-popover-item");
const _component_mt_popover_item_result = vue.resolveComponent("mt-popover-item-result");
const _component_mt_popover = vue.resolveComponent("mt-popover");
const _directive_tooltip = vue.resolveDirective("tooltip");
return vue.openBlock(), vue.createBlock(_component_mt_popover, {
class: "mt-data-table-settings",
title: _ctx.t("title"),
"child-views": _ctx.tableSettingsChildViews,
width: "large"
}, {
trigger: vue.withCtx(({ toggleFloatingUi }) => [
vue.withDirectives((vue.openBlock(), vue.createBlock(_component_mt_button, {
variant: "secondary",
square: "",
"aria-label": _ctx.t("aria-toggle-table-settings"),
onClick: toggleFloatingUi
}, {
default: vue.withCtx(() => [
vue.createVNode(_component_mt_icon, { name: "solid-cog-s" })
]),
_: 2
}, 1032, ["aria-label", "onClick"])), [
[_directive_tooltip, {
message: _ctx.t("tooltip"),
width: "auto"
}]
])
]),
"popover-items__base": vue.withCtx(({ changeView }) => [
vue.createVNode(_component_mt_popover_item, {
label: _ctx.t("columnOrder.title"),
"border-bottom": "",
"show-options": "",
"on-label-click": () => changeView("columnOrder"),
"options-count": _ctx.columns.length,
onClickOptions: () => changeView("columnOrder")
}, null, 8, ["label", "on-label-click", "options-count", "onClickOptions"]),
vue.createVNode(_component_mt_popover_item, {
label: _ctx.t("showNumberedColumn"),
"show-switch": "",
"switch-value": _ctx.enableRowNumbering,
icon: "solid-hashtag",
onChangeSwitch: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("change-enable-row-numbering", $event))
}, null, 8, ["label", "switch-value"]),
vue.createVNode(_component_mt_popover_item, {
label: _ctx.t("showStripedRows"),
"show-switch": "",
"switch-value": _ctx.showStripes,
icon: "solid-bars",
onChangeSwitch: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("change-show-stripes", $event))
}, null, 8, ["label", "switch-value"]),
vue.createVNode(_component_mt_popover_item, {
label: _ctx.t("showOutlines"),
"show-switch": "",
"switch-value": _ctx.showOutlines,
icon: "solid-table",
onChangeSwitch: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("change-show-outlines", $event))
}, null, 8, ["label", "switch-value"]),
vue.createVNode(_component_mt_popover_item, {
label: _ctx.t("frameOutlines"),
"meta-copy": _ctx.t("frameOutlinesMetaCopy"),
"show-switch": "",
"switch-value": _ctx.enableOutlineFraming,
icon: "solid-highlight",
onChangeSwitch: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("change-outline-framing", $event))
}, null, 8, ["label", "meta-copy", "switch-value"]),
vue.createVNode(_component_mt_popover_item, {
label: _ctx.t("resetAllChanges"),
"border-top": "",
icon: "solid-undo",
"on-label-click": _ctx.resetAllChanges
}, null, 8, ["label", "on-label-click"])
]),
"popover-items__columnOrder": vue.withCtx(() => [
vue.createVNode(_component_mt_popover_item_result, {
groups: _ctx.columnGroups,
options: _ctx.columnOrderOptions,
draggable: "",
"hide-search": "",
hidable: "",
onChangeVisibility: _ctx.onColumnChangeVisibility,
onClickGroupAction: _ctx.onColumnClickGroupAction,
onChangeOrder: _ctx.onColumnChangeOrder
}, null, 8, ["groups", "options", "onChangeVisibility", "onClickGroupAction", "onChangeOrder"])
]),
_: 1
}, 8, ["title", "child-views"]);
}
const MtDataTableSettings = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = MtDataTableSettings;
//# sourceMappingURL=MtDataTableSettings.js.map