@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/).
296 lines (295 loc) • 10.6 kB
JavaScript
import { defineComponent, computed, resolveComponent, resolveDirective, openBlock, createBlock, withCtx, withDirectives, createVNode } from "vue";
import MtButton from "./MtButton.js";
import { _ as _sfc_main$1 } from "../mt-icon.vue_vue_type_style_index_0_lang-2cc5f73e.mjs";
import mtPopover from "./MtPopover.js";
import mtPopoverItem from "./MtPopoverItem.js";
import { M as MtPopoverItemResult } from "../mt-popover-item-result-c0214b39.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 "../useIsInsideTooltip-0c3bd290.mjs";
import "./MtLoader.js";
import "./MtCheckbox.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 "./MtHelpText.js";
import "../id-1e5b8276.mjs";
import "../useFutureFlags-2be3e179.mjs";
import "./MtFieldError.js";
import "./MtText.js";
import "../mt-switch.vue_vue_type_style_index_0_lang-e05ec27a.mjs";
import "./MtFieldLabel.js";
import "./MtSmoothReflow.js";
import "../_commonjsHelpers-7a77ea84.mjs";
import "../mt-floating-ui.vue_vue_type_style_index_0_lang-c9aba54c.mjs";
import "./MtSearch.js";
const _sfc_main = defineComponent({
name: "MtDataTableSettings",
components: {
"mt-button": MtButton,
"mt-icon": _sfc_main$1,
"mt-popover": mtPopover,
"mt-popover-item": mtPopoverItem,
"mt-popover-item-result": MtPopoverItemResult
},
directives: {
tooltip: 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 } = 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 = computed(() => {
return [
{
name: "columnOrder",
title: t("columnOrder.title")
}
];
});
const columnGroups = 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 = 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 = resolveComponent("mt-icon");
const _component_mt_button = resolveComponent("mt-button");
const _component_mt_popover_item = resolveComponent("mt-popover-item");
const _component_mt_popover_item_result = resolveComponent("mt-popover-item-result");
const _component_mt_popover = resolveComponent("mt-popover");
const _directive_tooltip = resolveDirective("tooltip");
return openBlock(), createBlock(_component_mt_popover, {
class: "mt-data-table-settings",
title: _ctx.t("title"),
"child-views": _ctx.tableSettingsChildViews,
width: "large"
}, {
trigger: withCtx(({ toggleFloatingUi }) => [
withDirectives((openBlock(), createBlock(_component_mt_button, {
variant: "secondary",
square: "",
"aria-label": _ctx.t("aria-toggle-table-settings"),
onClick: toggleFloatingUi
}, {
default: withCtx(() => [
createVNode(_component_mt_icon, { name: "solid-cog-s" })
]),
_: 2
}, 1032, ["aria-label", "onClick"])), [
[_directive_tooltip, {
message: _ctx.t("tooltip"),
width: "auto"
}]
])
]),
"popover-items__base": withCtx(({ changeView }) => [
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"]),
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"]),
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"]),
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"]),
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"]),
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": withCtx(() => [
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__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
MtDataTableSettings as default
};
//# sourceMappingURL=MtDataTableSettings.js.map