@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/).
1,454 lines • 77.1 kB
JavaScript
import '../mt-data-table.css';
import { nextTick, watch, onUpdated, onMounted, onBeforeUnmount, defineComponent, reactive, computed, ref, onBeforeUpdate, resolveComponent, resolveDirective, openBlock, createBlock, normalizeClass, withCtx, createElementVNode, createCommentVNode, createSlots, createVNode, toDisplayString, createElementBlock, Fragment, renderList, renderSlot, withDirectives, normalizeStyle, withModifiers } from "vue";
import MtCard from "./MtCard.js";
import MtButton from "./MtButton.js";
import MtSelect from "./MtSelect.js";
import { _ as _sfc_main$1 } from "../mt-icon.vue_vue_type_style_index_0_lang-2cc5f73e.mjs";
import MtPagination from "./MtPagination.js";
import MtSearch from "./MtSearch.js";
import { _ as _sfc_main$2 } from "../mt-context-button.vue_vue_type_style_index_0_lang-08ff766e.mjs";
import MtContextMenuItem from "./MtContextMenuItem.js";
import MtDataTableSettings from "./MtDataTableSettings.js";
import mtPopover from "./MtPopover.js";
import mtPopoverItem from "./MtPopoverItem.js";
import { d as draggable, a as droppable, M as MtPopoverItemResult } from "../mt-popover-item-result-c0214b39.mjs";
import MtSkeletonBar from "./MtSkeletonBar.js";
import MtCheckbox from "./MtCheckbox.js";
import MtDataTableTextRenderer from "./MtDataTableTextRenderer.js";
import MtDataTableNumberRenderer from "./MtDataTableNumberRenderer.js";
import MtDataTableBadgeRenderer from "./MtDataTableBadgeRenderer.js";
import MtDataTablePriceRenderer from "./MtDataTablePriceRenderer.js";
import MtSegmentedControl from "./MtSegmentedControl.js";
import { _ as _sfc_main$3 } from "../mt-floating-ui.vue_vue_type_style_index_0_lang-c9aba54c.mjs";
import { v as vTooltip } from "../tooltip.directive-a5042569.mjs";
import MtEmptyState from "./MtEmptyState.js";
import MtDataTableResetFilterButton from "./MtDataTableResetFilterButton.js";
import MtDataTableFilter from "./MtDataTableFilter.js";
import MtInset from "./MtInset.js";
import { useI18n } from "vue-i18n";
import { u as useDebounceFn } from "../index-221bad05.mjs";
import { _ as _export_sfc } from "../_plugin-vue_export-helper-cc2b3d55.mjs";
import "./MtLoader.js";
import "./MtText.js";
import "../useFutureFlags-2be3e179.mjs";
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 "../useIsInsideTooltip-0c3bd290.mjs";
import "./MtFieldCopyable.js";
import "./MtHelpText.js";
import "../id-1e5b8276.mjs";
import "./MtFieldError.js";
import "../mt-switch.vue_vue_type_style_index_0_lang-e05ec27a.mjs";
import "./MtFieldLabel.js";
import "./MtSmoothReflow.js";
import "../_commonjsHelpers-7a77ea84.mjs";
import "../debounce-b18437e2.mjs";
import "../object-e11d5dd3.mjs";
import "./MtSelectBase.js";
import "./MtSelectResultList.js";
import "./MtPopoverDeprecated.js";
import "../provideInjectKeys-47aad241.mjs";
import "./MtSelectResult.js";
import "./MtSelectSelectionList.js";
import "../mt-label.vue_vue_type_style_index_0_lang-13843d32.mjs";
import "./MtColorBadge.js";
import "../mt-highlight-text.vue_vue_type_style_index_0_lang-550f3bfe.mjs";
import "./MtLink.js";
function throttle(func, timeFrame) {
let lastTime = 0;
return function(...args) {
const now = /* @__PURE__ */ new Date();
if (now.getTime() - lastTime >= timeFrame) {
func.apply(this, args);
lastTime = now.getTime();
}
};
}
function useScrollPossibilitiesClasses(refElement, showScrollIndicators) {
const setScrollPossibilitiesClasses = (elementOrEvent) => {
var _a, _b, _c, _d, _e, _f;
const element = (elementOrEvent == null ? void 0 : elementOrEvent.target) ? elementOrEvent.target : elementOrEvent;
if (!element)
return;
const hideShadows = !showScrollIndicators.value;
if (hideShadows) {
(_a = element.parentElement) == null ? void 0 : _a.style.removeProperty("--scrollbar-width");
(_b = element.parentElement) == null ? void 0 : _b.style.removeProperty("--scrollbar-height");
delete element.dataset.scrollTop;
delete element.dataset.scrollBottom;
delete element.dataset.scrollRight;
delete element.dataset.scrollLeft;
return;
}
const pufferPx = 5;
if (element.scrollHeight > element.clientHeight) {
if (element.scrollHeight - element.clientHeight - pufferPx > element.scrollTop) {
element.dataset.scrollBottom = "";
} else {
delete element.dataset.scrollBottom;
}
if (element.scrollTop - pufferPx > 0) {
element.dataset.scrollTop = "";
} else {
delete element.dataset.scrollTop;
}
(_c = element.parentElement) == null ? void 0 : _c.style.setProperty(
"--scrollbar-width",
`${element.offsetWidth - element.clientWidth}px`
);
} else {
(_d = element.parentElement) == null ? void 0 : _d.style.removeProperty("--scrollbar-width");
delete element.dataset.scrollTop;
delete element.dataset.scrollBottom;
}
if (element.scrollWidth > element.clientWidth) {
if (element.scrollWidth - element.clientWidth - pufferPx > element.scrollLeft) {
element.dataset.scrollRight = "";
} else {
delete element.dataset.scrollRight;
}
if (element.scrollLeft - pufferPx > 0) {
element.dataset.scrollLeft = "";
} else {
delete element.dataset.scrollLeft;
}
(_e = element.parentElement) == null ? void 0 : _e.style.setProperty(
"--scrollbar-height",
`${element.offsetHeight - element.clientHeight}px`
);
} else {
delete element.dataset.scrollRight;
delete element.dataset.scrollLeft;
(_f = element.parentElement) == null ? void 0 : _f.style.removeProperty("--scrollbar-height");
}
};
const updateSetScrollPossibiltiesClasses = throttle(function() {
setScrollPossibilitiesClasses(refElement.value);
}, 15);
const refElementResizeObserver = new ResizeObserver(() => {
nextTick().then(updateSetScrollPossibiltiesClasses);
});
watch(
() => showScrollIndicators,
(shouldShowScrollIndicators) => {
var _a, _b, _c, _d, _e, _f, _g, _h;
if (shouldShowScrollIndicators)
return;
(_b = (_a = refElement.value) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.style.removeProperty("--scrollbar-width");
(_d = (_c = refElement.value) == null ? void 0 : _c.parentElement) == null ? void 0 : _d.style.removeProperty("--scrollbar-height");
(_e = refElement.value) == null ? true : delete _e.dataset.scrollTop;
(_f = refElement.value) == null ? true : delete _f.dataset.scrollBottom;
(_g = refElement.value) == null ? true : delete _g.dataset.scrollRight;
(_h = refElement.value) == null ? true : delete _h.dataset.scrollLeft;
},
{
immediate: true
}
);
onUpdated(() => {
nextTick().then(updateSetScrollPossibiltiesClasses);
});
onMounted(() => {
window.addEventListener("resize", updateSetScrollPossibiltiesClasses);
if (!refElement.value) {
return;
}
refElement.value.addEventListener("scroll", updateSetScrollPossibiltiesClasses);
refElementResizeObserver.observe(refElement.value);
nextTick().then(() => {
updateSetScrollPossibiltiesClasses();
});
});
onBeforeUnmount(() => {
window.removeEventListener("resize", updateSetScrollPossibiltiesClasses);
if (!refElement.value) {
return;
}
refElement.value.removeEventListener("scroll", updateSetScrollPossibiltiesClasses);
refElementResizeObserver.unobserve(refElement.value);
});
return {};
}
const getPreviousSibling = function(el, selector) {
if (!el)
return;
let sibling = el.previousElementSibling;
if (!selector)
return sibling;
while (sibling) {
if (sibling.matches(selector))
return sibling;
sibling = sibling.previousElementSibling;
}
};
const setLeftValue = (el) => {
let width = 0;
let sibling = getPreviousSibling(el, "[data-sticky-column]");
while (sibling) {
width += sibling.clientWidth;
sibling = getPreviousSibling(sibling, "[data-sticky-column]");
}
el.style.left = `${width - 0.5}px`;
el.dataset.stickyColumnRight = `${width + el.getBoundingClientRect().width - 0.5}`;
};
let mutationObserver;
const stickyColumn = {
beforeMount(el) {
el.dataset.stickyColumn = "";
},
mounted(el) {
setLeftValue(el);
mutationObserver = new MutationObserver(
throttle(() => {
setLeftValue(el);
}, 60)
);
mutationObserver.observe(el.parentElement, {
childList: true,
subtree: true
});
},
unmounted() {
mutationObserver == null ? void 0 : mutationObserver.disconnect();
}
};
const StickyColumn = stickyColumn;
const _sfc_main = defineComponent({
directives: {
draggable,
droppable,
tooltip: vTooltip,
stickyColumn: StickyColumn
},
components: {
"mt-card": MtCard,
"mt-button": MtButton,
"mt-select": MtSelect,
"mt-icon": _sfc_main$1,
"mt-pagination": MtPagination,
"mt-search": MtSearch,
"mt-checkbox": MtCheckbox,
"mt-context-button": _sfc_main$2,
"mt-data-table-settings": MtDataTableSettings,
"mt-popover": mtPopover,
"mt-popover-item": mtPopoverItem,
"mt-popover-item-result": MtPopoverItemResult,
"mt-skeleton-bar": MtSkeletonBar,
"mt-context-menu-item": MtContextMenuItem,
"mt-floating-ui": _sfc_main$3,
"mt-segmented-control": MtSegmentedControl,
"mt-empty-state": MtEmptyState,
"mt-data-table-text-renderer": MtDataTableTextRenderer,
"mt-data-table-number-renderer": MtDataTableNumberRenderer,
"mt-data-table-badge-renderer": MtDataTableBadgeRenderer,
"mt-data-table-price-renderer": MtDataTablePriceRenderer,
"mt-data-table-reset-filter-button": MtDataTableResetFilterButton,
"mt-data-table-filter": MtDataTableFilter,
"mt-inset": MtInset
},
props: {
/**
* The data source which contains the data for the current
* state of the table.
*/
dataSource: {
type: Array,
required: true
},
/**
* The defintions for the columns which should be displayed in the table.
*/
columns: {
type: Array,
required: true,
validator: (columnsValue) => {
const validValues = columnsValue.map((value) => {
const hasLabel = typeof value.label === "string" && value.label;
const hasProperty = typeof value.property === "string" && value.property;
const hasRenderer = typeof value.renderer === "string" && ["text", "number", "price", "badge"].includes(value.renderer);
const hasPosition = typeof value.position === "number";
const isInvalid = !hasLabel || !hasProperty || !hasRenderer || !hasPosition;
return isInvalid ? false : true;
});
return validValues.every((value) => value);
}
},
/**
* Optional property. When you want to override the current column
* information with the given changes, you can pass them here.
* The changes will be applied to the current column information.
* This is useful for saving and loading the current column configuration
* when the user customizes the table.
*/
columnChanges: {
type: Object,
required: false,
default: () => reactive({})
},
/**
* Define the title of the table.
*/
title: {
type: String,
required: false,
default: ""
},
/**
* Define the subtitle of the table.
*/
subtitle: {
type: String,
required: false,
default: ""
},
/**
* The layout of the data table.
* @values default, full
*/
layout: {
type: String,
required: false,
default: "default"
},
/**
* Activate the reload button at the top right corner of the table.
*/
enableReload: {
type: Boolean,
required: false,
default: false
},
/**
* Define the current page of the table.
*/
currentPage: {
type: Number,
required: true
},
/**
* Define the limit of items per page.
*/
paginationLimit: {
type: Number,
required: true
},
/**
* Define the total amount of items.
*/
paginationTotalItems: {
type: Number,
required: true
},
/**
* Define the available pagination limits.
*/
paginationOptions: {
type: Array,
required: false,
default: () => [5, 10, 25, 50]
},
/**
* Define the current sort by property.
*/
sortBy: {
type: String,
required: false,
default: ""
},
/**
* Define the current sort direction.
*/
sortDirection: {
type: String,
required: false,
default: "ASC"
},
/**
* If active then the search input will be disabled.
*/
disableSearch: {
type: Boolean,
required: false,
default: false
},
/**
* Define the current search value.
*/
searchValue: {
type: String,
required: false,
default: ""
},
/**
* If active then the table will be in loading state.
*/
isLoading: {
type: Boolean,
required: false,
default: false
},
/**
* If active user can select rows and can perform actions on them.
*/
allowRowSelection: {
type: Boolean,
required: false,
default: false
},
disableRowSelect: {
type: Array,
required: false,
default: () => []
},
selectedRows: {
type: Array,
required: false,
default: () => []
},
/**
* If active user can do bulk edit by selecting items
*/
allowBulkEdit: {
type: Boolean,
required: false,
default: false
},
/**
* If active user can do bulk delete by selecting items
*/
allowBulkDelete: {
type: Boolean,
required: false,
default: false
},
/**
* Add more custom bulk edit actions
*/
bulkEditMoreActions: {
type: Array,
required: false,
default: () => []
},
/***
* Enable numbered rows
*/
enableRowNumbering: {
type: Boolean,
required: false,
default: false
},
/**
* Enable or disable the stripe design for the table.
*/
showStripes: {
type: Boolean,
required: false,
default: true
},
/**
* Enable or disable outlines for the table.
*/
showOutlines: {
type: Boolean,
required: false,
default: true
},
/**
* Enable or disable outline framing on hover
*/
enableOutlineFraming: {
type: Boolean,
required: false,
default: false
},
/**
* Disable the possibility to delete items
*/
disableDelete: {
type: Boolean,
required: false,
default: false
},
/**
* Disable the possibility to edit items
*/
disableEdit: {
type: Boolean,
required: false,
default: false
},
/**
* Disable the possibility to settings table
*/
disableSettingsTable: {
type: Boolean,
required: false,
default: false
},
/**
* Caption for accessibility
*/
caption: {
type: String,
required: false,
default: "Data table"
},
/**
* All available filters
*/
filters: {
type: Array,
required: false,
default: () => []
},
/**
* Filters in use by the user
*/
appliedFilters: {
type: Array,
required: false,
default: () => []
},
/**
* Displays how many results are found
*/
numberOfResults: {
type: Number,
required: false,
default: void 0
},
/**
* Additional context buttons to show in the context menu
*/
additionalContextButtons: {
type: Array,
required: false,
default: () => []
}
},
emits: [
"reload",
"pagination-limit-change",
"pagination-current-page-change",
"search-value-change",
"sort-change",
"open-details",
"selection-change",
"multiple-selection-change",
"bulk-edit",
"bulk-delete",
"change-show-outlines",
"change-show-stripes",
"change-outline-framing",
"change-enable-row-numbering",
"item-delete",
"update:appliedFilters",
"context-select"
],
setup(props, { emit }) {
const { t } = useI18n({
messages: {
en: {
itemsPerPage: "Items per page",
filter: {
numberOfResults: "No results found for | One result found for | {n} results found for",
addFilter: "Add filter",
fetchingFilteredResults: "Getting filtered results..."
},
columnSettings: {
sortAscending: "Sort ascending",
sortDescending: "Sort descending",
hideColumn: "Hide column"
},
addColumnIndicator: {
popoverTitle: "Add column content",
tooltipMessage: "Add column"
},
contextButtons: {
edit: "Edit",
delete: "Delete"
},
emptyState: {
headline: "Add your first item",
description: "Currently no items are available yet."
},
bulkEdit: {
itemsSelected: "1 item selected | {n} items selected",
edit: "Edit",
delete: "Delete",
more: "..."
},
reload: {
tooltip: "Reload"
}
},
de: {
itemsPerPage: "Einträge pro Seite",
filter: {
numberOfResults: "Keine Einträge gefunden | Ein Eintrag gefunden | {n} Einträge gefunden",
addFilter: "Filter hinzufügen",
fetchingFilteredResults: "Filterergebnisse werden geladen..."
},
columnSettings: {
sortAscending: "Aufsteigend sortieren",
sortDescending: "Absteigend sortieren",
hideColumn: "Spalte ausblenden"
},
addColumnIndicator: {
popoverTitle: "Spalteninhalt hinzufügen",
tooltipMessage: "Spalte hinzufügen"
},
contextButtons: {
edit: "Bearbeiten",
delete: "Löschen"
},
emptyState: {
headline: "Füge dein erstes Element hinzu",
description: "Aktuell sind noch keine Elemente vorhanden."
},
bulkEdit: {
itemsSelected: "1 Element ausgewählt | {n} Elemente ausgewählt",
edit: "Bearbeiten",
delete: "Löschen",
more: "..."
},
reload: {
tooltip: "Neu laden"
}
}
}
});
const filterChildViews = computed(() => {
return props.filters.map(({ id, label }) => ({ name: id, title: label }));
});
const sortedColumns = computed(() => {
return columnsWithChanges.value.slice().sort((a, b) => a.position - b.position);
});
const currentHoveredColumn = ref(null);
const currentHoveredRow = ref(null);
const setCurrentHoveredCell = (columnProperty, rowId) => {
currentHoveredColumn.value = columnProperty;
currentHoveredRow.value = rowId;
};
const visibleColumns = computed(() => {
return sortedColumns.value.filter((column) => column.visible !== false);
});
const isFirstVisibleColumn = (column) => {
return visibleColumns.value[0].property === column.property;
};
const isPrimaryColumn = (column) => {
return props.columns[0].property === column.property;
};
const addColumnOptionsSearch = ref("");
const onAddColumnSearch = (value) => {
addColumnOptionsSearch.value = value;
};
const addColumnOptions = computed(() => {
return sortedColumns.value.map((column) => {
return {
id: column.property,
label: column.label,
parentGroup: void 0,
position: column.position,
isVisible: column.visible ?? true,
isClickable: column.visible === false ? true : false,
isSortable: false,
isHidable: false,
disabled: column.visible === false ? false : true
};
}).filter((column) => {
return column.label.toLowerCase().includes(addColumnOptionsSearch.value.toLowerCase());
});
});
const onAddColumnOptionClick = (columnProperty, previousColumnProperty) => {
changeColumnPosition(columnProperty, previousColumnProperty, "after");
changeColumnVisibility(columnProperty, true);
};
const resetAllChanges = () => {
Object.keys(props.columnChanges).forEach((key) => {
props.columnChanges[key] = {};
});
};
const addToColumnChanges = (columnProperty, columnChanges) => {
if (!props.columnChanges[columnProperty]) {
props.columnChanges[columnProperty] = {};
}
props.columnChanges[columnProperty] = {
...props.columnChanges[columnProperty],
...columnChanges
};
};
const columnsWithChanges = computed(() => {
return props.columns.map((column) => {
const columnChanges = props.columnChanges[column.property];
if (!columnChanges) {
return column;
}
return {
...column,
...columnChanges
};
});
});
const dataTable = ref(null);
const columnHeaderRefs = ref({});
const columnDataCellRefs = ref({});
const setColumnDataCellRefs = ({
el,
column,
index
}) => {
if (el) {
if (!Array.isArray(columnDataCellRefs.value[column.property])) {
columnDataCellRefs.value[column.property] = [];
}
columnDataCellRefs.value[column.property][index] = el;
}
};
onBeforeUpdate(() => {
columnHeaderRefs.value = {};
columnDataCellRefs.value = {};
});
const startColumnResizing = (column) => {
if (!column) {
return;
}
makeAllColumnsFixedWidth();
const currentColumnHeaderCell = columnHeaderRefs.value[column.property];
const currentColumnDataCells = columnDataCellRefs.value[column.property];
if (!currentColumnHeaderCell || typeof column.allowResize === "boolean" && !column.allowResize) {
return;
}
const columnHeaderBoundingClientRect = currentColumnHeaderCell.getBoundingClientRect();
const startColumnHeaderWidth = columnHeaderBoundingClientRect.width;
if (dataTable.value) {
dataTable.value.classList.add("--no-transition");
dataTable.value.classList.add("--resizing");
}
document.body.style.cursor = "col-resize";
const mouseMoveHandler = (e) => {
e.stopPropagation();
e.preventDefault();
const newWidth = Math.ceil(e.pageX - columnHeaderBoundingClientRect.left);
setColumnHeaderWidthInline(currentColumnHeaderCell, newWidth);
setColumnDataCellsWidthInline(currentColumnDataCells, newWidth);
if (dataTable.value) {
const paddingRight = startColumnHeaderWidth - newWidth;
dataTable.value.style.paddingRight = paddingRight > 0 ? `${paddingRight}px` : "";
}
};
const mouseUpHandler = () => {
document.body.style.cursor = "";
addToColumnChanges(column.property, {
width: parseInt(currentColumnHeaderCell.style.width, 10)
});
if (dataTable.value) {
dataTable.value.classList.remove("--no-transition");
dataTable.value.classList.remove("--resizing");
dataTable.value.style.removeProperty("padding-right");
}
window.removeEventListener("mousemove", mouseMoveHandler);
window.removeEventListener("mouseup", mouseUpHandler);
};
window.addEventListener("mousemove", mouseMoveHandler);
window.addEventListener("mouseup", mouseUpHandler);
};
const makeAllColumnsFixedWidth = () => {
const currentWidths = {};
Object.entries(columnHeaderRefs.value).forEach(([columnProperty, columnHeaderElement]) => {
const currentColumnDefinition = props.columns.find(
(column) => column.property === columnProperty
);
if (currentColumnDefinition && currentColumnDefinition.allowResize === false && typeof currentColumnDefinition.width === "number") {
return;
}
const columnHeaderBoundingClientRect = columnHeaderElement.getBoundingClientRect();
currentWidths[columnProperty] = columnHeaderBoundingClientRect.width;
setColumnHeaderWidthInline(columnHeaderElement, currentWidths[columnProperty]);
});
Object.entries(columnDataCellRefs.value).forEach(([columnProperty, columnDataCells]) => {
if (currentWidths[columnProperty]) {
setColumnDataCellsWidthInline(columnDataCells, currentWidths[columnProperty]);
}
});
};
const setColumnHeaderWidthInline = (columnHeader, width) => {
columnHeader.style.width = `${width}px`;
columnHeader.style.minWidth = `${width}px`;
};
const setColumnDataCellsWidthInline = (columnDataCells, width) => {
columnDataCells.forEach((columnDataCell) => {
columnDataCell.style.width = `${width}px`;
columnDataCell.style.minWidth = `${width}px`;
columnDataCell.style.maxWidth = `${width}px`;
});
};
const renderColumnDefaultStyle = (column) => {
var _a;
const customColumnWidth = (_a = props.columnChanges[column.property]) == null ? void 0 : _a.width;
const defaultColumnWidth = "auto";
const minimumColumnWidth = "100px";
const width = (() => {
if (customColumnWidth && column.allowResize !== false) {
return `${customColumnWidth}px`;
}
return typeof column.width === "number" ? `${column.width}px` : defaultColumnWidth;
})();
const minWidth = (() => {
if (customColumnWidth && column.allowResize !== false) {
return `${customColumnWidth}px`;
}
return typeof column.width === "number" ? `${column.width}px` : minimumColumnWidth;
})();
const maxWidth = (() => {
if (customColumnWidth && column.allowResize !== false) {
return `${customColumnWidth}px`;
}
if (column.cellWrap === "normal") {
return "auto";
}
if (typeof column.width === "number") {
return `${column.width}px`;
}
return minimumColumnWidth;
})();
const whiteSpace = typeof column.cellWrap === "string" ? column.cellWrap : "nowrap";
return {
width,
"min-width": minWidth,
"max-width": maxWidth,
"white-space": whiteSpace
};
};
const renderColumnHeaderStyle = (column) => {
return {
...renderColumnDefaultStyle(column),
"max-width": "fit-content"
};
};
const renderColumnDataCellStyle = (column) => {
return {
...renderColumnDefaultStyle(column)
};
};
const getColumnDataCellClasses = (column) => {
const classes = [];
if (highlightedColumn.value === column.property) {
classes.push("--highlighted");
}
if (currentHoveredColumn.value === column.property) {
classes.push("--hovered");
}
return classes;
};
const getColumnHeaderClasses = (column) => {
const classes = [];
if (highlightedColumn.value === column.property) {
classes.push("--highlighted");
}
if (currentHoveredColumn.value === column.property) {
classes.push("--hovered");
}
return classes;
};
const getColumnDataRowClasses = (rowId) => {
const classes = [];
if (currentHoveredRow.value === rowId) {
classes.push("--hovered");
}
return classes;
};
const isColumnVisible = (column) => {
return column.visible ?? true;
};
const isMouseOver = ref(false);
const forceHighlightedColumn = ref(false);
const highlightedColumn = ref(null);
const setHighlightedColumn = (column) => {
var _a;
if ((_a = dataTable.value) == null ? void 0 : _a.classList.contains("--resizing")) {
return;
}
if (!column) {
if (forceHighlightedColumn.value) {
return;
}
isMouseOver.value = false;
window.setTimeout(() => {
if (!isMouseOver.value) {
highlightedColumn.value = null;
}
}, 100);
return;
}
if (forceHighlightedColumn.value) {
return;
}
isMouseOver.value = true;
highlightedColumn.value = column.property;
};
const emitReload = () => emit("reload");
const emitPaginationLimitChange = (limitValue) => {
emit("pagination-limit-change", limitValue);
};
const emitPaginationCurrentPageChange = (currentPage) => {
emit("pagination-current-page-change", currentPage);
};
const emitSearchValueChange = (searchValue) => {
emit("search-value-change", searchValue);
};
const debouncedEmitSearchValueChange = useDebounceFn((value) => {
emitSearchValueChange(value);
}, 300);
const handleSearchUpdate = (value) => {
debouncedEmitSearchValueChange(value);
};
const paginationOptionsConverted = computed(() => {
return props.paginationOptions.map((paginationNumber) => ({
id: paginationNumber,
label: paginationNumber.toString(),
value: paginationNumber
}));
});
const changeColumnPosition = (columnId, targetColumnId, insertPosition = "before") => {
const column = columnsWithChanges.value.find((column2) => column2.property === columnId);
const targetColumn = columnsWithChanges.value.find(
(column2) => column2.property === targetColumnId
);
if (!column || !targetColumn) {
return;
}
[...columnsWithChanges.value].sort((columnA, columnB) => {
return columnA.position - columnB.position;
}).sort((columnA, columnB) => {
if (columnB.property === column.property) {
if (insertPosition === "after") {
return columnA.position <= targetColumn.position ? -1 : 1;
} else {
return columnA.position < targetColumn.position ? -1 : 1;
}
}
if (columnA.property === column.property) {
if (insertPosition === "after") {
return columnB.position > targetColumn.position ? -1 : 1;
} else {
return columnB.position >= targetColumn.position ? -1 : 1;
}
}
return 0;
}).forEach((column2, index) => {
addToColumnChanges(column2.property, { position: index * 100 });
});
};
const isDragging = ref(false);
const DRAG_GROUP_COLUMN = "drag-group-column";
const dragConfig = {
dragGroup: DRAG_GROUP_COLUMN,
preventEvent: false,
validateDragStart: (dragConfigData, el, event) => {
const allDragZones = document.querySelectorAll(".mt-data-table__table-head-dragzone");
const isChild = [...allDragZones].some((dragZone) => dragZone.contains(event.target));
return isChild;
},
onDragStart: () => {
if (dataTable.value) {
dataTable.value.classList.add("is--dragging-inside");
}
document.body.style.cursor = "grabbing";
isDragging.value = true;
},
onDrop: (dragConfigData, dropConfigData) => {
if (dataTable.value) {
dataTable.value.classList.remove("is--dragging-inside");
}
document.body.style.cursor = "";
isDragging.value = false;
if (dragConfigData && dropConfigData) {
changeColumnPosition(
dragConfigData.property,
dropConfigData.property,
dropConfigData.dropZone
);
}
}
};
const dropConfig = {
dragGroup: DRAG_GROUP_COLUMN
};
const changeColumnVisibility = (columnProperty, visibility) => {
const column = columnsWithChanges.value.find((column2) => column2.property === columnProperty);
if (!column) {
return;
}
addToColumnChanges(columnProperty, {
visible: visibility
});
};
const emitSortChange = (property, direction) => {
emit("sort-change", property, direction);
};
const onColumnSettingsSortChange = (property, direction, chainMethod) => {
emitSortChange(property, direction);
if (chainMethod) {
chainMethod();
}
};
function removeFilter(id) {
const updatedFilters = props.appliedFilters.filter((filter) => filter.id !== id);
emit("update:appliedFilters", updatedFilters);
}
function addOption(filterId, optionId) {
const filter = props.filters.find((filter2) => filter2.id === filterId);
if (!filter)
throw new Error(
`Failed to add filter option: Filter with the id "${filterId}" is not correct`
);
const filterAlreadyInUse = !!props.appliedFilters.find((appliedFilter) => {
return appliedFilter.id === filter.id;
});
if (!filterAlreadyInUse) {
emit("update:appliedFilters", [
...props.appliedFilters,
{
...filter,
type: {
...filter.type,
options: [filter.type.options.find((option) => option.id === optionId)]
}
}
]);
return;
}
emit("update:appliedFilters", [
...props.appliedFilters.map((appliedFilter) => {
if (appliedFilter.id === filter.id) {
return {
...appliedFilter,
type: {
...appliedFilter.type,
options: [
...appliedFilter.type.options,
filter.type.options.find((option) => option.id === optionId)
]
}
};
}
return appliedFilter;
})
]);
}
function removeOption(filterId, optionId) {
const removingLastOptionInFilter = props.appliedFilters.some((appliedFilter) => {
if (appliedFilter.id === filterId) {
if (appliedFilter.type.options.length === 1) {
return true;
}
}
return false;
});
if (removingLastOptionInFilter) {
const newFilters2 = props.appliedFilters.filter(
(appliedFilter) => appliedFilter.id !== filterId
);
emit("update:appliedFilters", newFilters2);
return;
}
const newFilters = props.appliedFilters.map((appliedFilter) => {
if (appliedFilter.id === filterId) {
return {
...appliedFilter,
type: {
...appliedFilter.type,
options: appliedFilter.type.options.filter((option) => option.id !== optionId)
}
};
}
return appliedFilter;
});
emit("update:appliedFilters", newFilters);
}
function isOptionSelected(filterId, optionId) {
const filterInUse = props.appliedFilters.find((appliedFilter) => {
return appliedFilter.id === filterId;
});
if (!filterInUse)
return false;
return !!filterInUse.type.options.find((option) => option.id === optionId);
}
const showData = computed(() => {
return props.dataSource.length > 0 || props.isLoading;
});
const tableWrapper = ref();
useScrollPossibilitiesClasses(tableWrapper, showData);
const MtDataTableClasses = computed(() => {
return {
"mt-data-table__layout-default": props.layout === "default",
"mt-data-table__layout-full": props.layout === "full",
"mt-data-table__first-column-fixed": props.allowRowSelection,
// could be relevant in the feature when you can disable the context button
"mt-data-table__last-column-fixed": true,
"mt-data-table__stripes": props.showStripes,
"mt-data-table__outlines": props.showOutlines,
"mt-data-table__column-outline-framing-active": props.enableOutlineFraming
};
});
const getColumnHeaderInnerWrapperClasses = (column) => {
return [`mt-data-table__table-head-inner-wrapper-${column.renderer}-renderer`];
};
const leftFixedColumnWidth = ref(0);
const calculateLeftFixedColumnWith = () => {
if (dataTable.value) {
const stickyColumns = dataTable.value.querySelectorAll("thead th[data-sticky-column]");
const lastStickyColumn = stickyColumns[stickyColumns.length - 1];
if (!lastStickyColumn) {
return;
}
const lastStickyColumnRight = lastStickyColumn.dataset.stickyColumnRight;
leftFixedColumnWidth.value = Number(lastStickyColumnRight);
}
};
let tableMutationObserver;
const createTableMutationObserver = () => {
if (dataTable.value) {
tableMutationObserver = new MutationObserver(
throttle(() => {
calculateLeftFixedColumnWith();
}, 60)
);
tableMutationObserver.observe(dataTable.value, {
childList: true,
subtree: true,
attributes: true
});
}
};
onMounted(() => {
createTableMutationObserver();
calculateLeftFixedColumnWith();
});
onBeforeUnmount(() => {
if (tableMutationObserver) {
tableMutationObserver.disconnect();
}
});
const tableStylingVariables = computed(() => {
return {
"--fixed-left-column-width": `${leftFixedColumnWidth.value}px`,
"--fixed-right-column-width": "105px"
};
});
const getSelectionValue = (dataId) => {
if (props.allowRowSelection) {
return props.selectedRows.includes(dataId);
}
return false;
};
const onRowSelect = (dataId) => {
if (props.allowRowSelection && !props.disableRowSelect.includes(dataId)) {
const previousValue = getSelectionValue(dataId);
emit("selection-change", {
id: dataId,
value: !previousValue
});
}
};
const somethingSelected = computed(() => {
return props.selectedRows.length > 0;
});
const bulkEditSegmentedControlActions = computed(() => {
const actions = [
{
id: "item-selection-count",
label: t("bulkEdit.itemsSelected", { n: props.selectedRows.length }),
onClick: () => {
emit("multiple-selection-change", {
selections: props.selectedRows,
value: false
});
},
isPressed: true,
checked: true,
hasCheckbox: true
}
];
if (props.allowBulkEdit && !props.disableEdit) {
actions.push({
id: "edit",
label: t("bulkEdit.edit"),
onClick: () => emit("bulk-edit")
});
}
if (props.allowBulkDelete && !props.disableDelete) {
actions.push({
id: "delete",
label: t("bulkEdit.delete"),
onClick: () => emit("bulk-delete"),
isCritical: true
});
}
if (props.bulkEditMoreActions.length > 0) {
actions.push({
id: "more",
label: t("bulkEdit.more"),
popover: {}
});
}
return actions;
});
const handleSelectAll = () => {
emit("multiple-selection-change", {
selections: props.dataSource.filter((r) => !props.disableRowSelect.includes(r.id)).map((r) => r.id),
value: true
});
};
const getPreviousVisibleColumn = (column) => {
const visibleColumns2 = sortedColumns.value.filter((c) => isColumnVisible(c));
const index = visibleColumns2.findIndex((c) => c.property === column.property);
if (index <= 0) {
return null;
}
return visibleColumns2[index - 1];
};
const emptyData = computed(() => {
return Array.from({ length: props.paginationLimit }, () => ({}));
});
const getRealIndex = (index) => {
return (props.currentPage - 1) * props.paginationLimit + index + 1;
};
return {
t,
sortedColumns,
isFirstVisibleColumn,
addColumnOptions,
renderColumnDataCellStyle,
renderColumnHeaderStyle,
tableWrapper,
emitReload,
emitPaginationLimitChange,
emitPaginationCurrentPageChange,
emitSearchValueChange,
paginationOptionsConverted,
startColumnResizing,
columnHeaderRefs,
columnDataCellRefs,
setColumnDataCellRefs,
dataTable,
dragConfig,
dropConfig,
resetAllChanges,
changeColumnPosition,
isColumnVisible,
changeColumnVisibility,
emitSortChange,
onColumnSettingsSortChange,
MtDataTableClasses,
tableStylingVariables,
getSelectionValue,
onRowSelect,
somethingSelected,
bulkEditSegmentedControlActions,
handleSelectAll,
highlightedColumn,
setHighlightedColumn,
getColumnDataCellClasses,
getColumnHeaderClasses,
getPreviousVisibleColumn,
getColumnDataRowClasses,
getColumnHeaderInnerWrapperClasses,
forceHighlightedColumn,
addColumnOptionsSearch,
onAddColumnOptionClick,
onAddColumnSearch,
currentHoveredColumn,
currentHoveredRow,
setCurrentHoveredCell,
isPrimaryColumn,
emptyData,
getRealIndex,
isDragging,
filterChildViews,
removeFilter,
addOption,
removeOption,
isOptionSelected,
handleSearchUpdate
// Use explicit assignment
};
}
});
const mtDataTable_vue_vue_type_style_index_0_lang = "";
const _hoisted_1 = { class: "mt-data-table__toolbar" };
const _hoisted_2 = {
key: 0,
class: "mt-data-table__filter"
};
const _hoisted_3 = { class: "mt-data-table__filter-list" };
const _hoisted_4 = ["aria-label", "onClick"];
const _hoisted_5 = {
key: 0,
class: "mt-data-table__table-selection-bulk-edit"
};
const _hoisted_6 = {
ref: "tableWrapper",
class: "mt-data-table__table-wrapper"
};
const _hoisted_7 = { ref: "dataTable" };
const _hoisted_8 = { class: "mt-data-table__caption" };
const _hoisted_9 = {
key: 0,
class: "mt-data-table__table-row-number-head",
scope: "col"
};
const _hoisted_10 = {
key: 1,
class: "mt-data-table__table-selection-head",
scope: "col"
};
const _hoisted_11 = ["data-header-column-property", "data-testid", "onMouseenter"];
const _hoisted_12 = ["data-testid"];
const _hoisted_13 = ["data-testid"];
const _hoisted_14 = { class: "mt-data-table__table-head-dragzone-indicator" };
const _hoisted_15 = {
key: 0,
class: "mt-data-table__table-head-sorting-icons"
};
const _hoisted_16 = ["data-testid"];
const _hoisted_17 = ["data-testid"];
const _hoisted_18 = ["data-testid", "onClick"];
const _hoisted_19 = ["data-testid", "onMousedown", "onMouseenter"];
const _hoisted_20 = ["data-testid", "onMousedown", "onMouseenter"];
const _hoisted_21 = {
key: 2,
class: "mt-data-table__table-settings-button",
scope: "col"
};
const _hoisted_22 = {
key: 0,
class: "mt-data-table__table-row-number"
};
const _hoisted_23 = {
key: 1,
class: "mt-data-table__table-select-row"
};
const _hoisted_24 = ["data-cell-column-property", "onMouseenter"];
const _hoisted_25 = {
key: 2,
class: "mt-data-table__table-context-button"
};
const _hoisted_26 = ["onClick"];
const _hoisted_27 = {
key: 1,
class: "mt-data-table__empty-state"
};
const _hoisted_28 = { class: "mt-data-table__footer-left" };
const _hoisted_29 = { class: "mt-data-table__pagination-info-text" };
const _hoisted_30 = { class: "mt-data-table__footer-right" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_mt_search = resolveComponent("mt-search");
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 = resolveComponent("mt-popover");
const _component_mt_data_table_filter = resolveComponent("mt-data-table-filter");
const _component_mt_data_table_reset_filter_button = resolveComponent("mt-data-table-reset-filter-button");
const _component_mt_segmented_control = resolveComponent("mt-segmented-control");
const _component_mt_checkbox = resolveComponent("mt-checkbox");
const _component_mt_popover_item_result = resolveComponent("mt-popover-item-result");
const _component_mt_floating_ui = resolveComponent("mt-floating-ui");
const _component_mt_data_table_settings = resolveComponent("mt-data-table-settings");
const _component_mt_skeleton_bar = resolveComponent("mt-skeleton-bar");
const _component_mt_data_table_number_renderer = resolveComponent("mt-data-table-number-renderer");
const _component_mt_data_table_text_renderer = resolveComponent("mt-data-table-text-renderer");
const _component_mt_data_table_badge_renderer = resolveComponent("mt-data-table-badge-renderer");
const _component_mt_data_table_price_renderer = resolveComponent("mt-data-table-price-renderer");
const _component_mt_context_menu_item = resolveComponent("mt-context-menu-item");
const _component_mt_context_button = resolveComponent("mt-context-button");
const _component_mt_empty_state = resolveComponent("mt-empty-state");
const _component_mt_select = resolveComponent("mt-select");
const _component_mt_pagination = resolveComponent("mt-pagination");
const _component_mt_inset = resolveComponent("mt-inset");
const _component_mt_card = resolveComponent("mt-card");
const _directive_stickyColumn = resolveDirective("stickyColumn");
const _directive_droppable = resolveDirective("droppable");
const _directive_tooltip = resolveDirective("tooltip");
const _directive_draggable = resolveDirective("draggable");
return openBlock(), createBlock(_component_mt_card, {
class: normalizeClass(["mt-data-table", _ctx.MtDataTableClasses]),
title: _ctx.title,
subtitle: _ctx.subtitle
}, {
toolbar: withCtx(() => [
createElementVNode("div", _hoisted_1, [
_ctx.disableSearch !== true ? (openBlock(), createBlock(_component_mt_search, {
key: 0,
class: "mt-data-table__search",
size: "small",
"model-value": _ctx.searchValue,
"onUpdate:modelValue": _ctx.handleSearchUpdate
}, null, 8, ["model-value", "onUpdate:modelValue"])) : createCommentVNode("", true),
_ctx.filters.length > 0 ? (openBlock(), createBlock(_component_mt_popover, {
key: 1,
title: "Filters",
"child-views": _ctx.filterChildViews
}, createSlots({
trigger: withCtx(({ toggleFloatingUi }) => [
createVNode(_component_mt_button, {
variant: "secondary",
onClick: toggleFloatingUi
}, {
default: withCtx(() => [
createVNode(_component_mt_icon, {
name: "solid-filter-s",
"aria-hidden": "true"
}),
createElementVNode("span", null, toDisplayString(_ctx.t("filter.addFilter")), 1)
]),
_: 2
}, 1032, ["onClick"])
]),
"popover-items__base": withCtx(({ changeView }) => [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.filters, (filter) => {
return openBlock(), createBlock(_component_mt_popover_item, {
key: filter.id,
label: filter.label,
"show-options": "",
onClickOptions: () => changeView(filter.id)
}, null, 8, ["label", "onClickOptions"]);
}), 128))
]),
_: 2
}, [
renderList(_ctx.filters, (filter) => {
return {
name: `popover-items__${filter.id}`,
fn: withCtx(() => [
(openBlock(true), createElementBlock(Fragment, null, renderList(filter.type.options, (option) => {
return openBlock(), createBlock(_component_mt_popover_item, {
key: option.id,
label: option.label,
"show-checkbox": "",
"checkbox-checked": _ctx.isOptionSelected(filter.id, option.id),
onChangeCheckbox: (isChecked) => isChecked ? _ctx.addOption(filter.id, option.id) : _ctx.removeOption(filter.id, option.id)
}, null, 8, ["label", "checkbox-checked", "onChangeCheckbox"]);
}), 128))
])
};
})
]), 1032, ["child-views"])) : createCommentVNode("", true),
renderSlot(_ctx.$slots, "toolbar")
]),
_ctx.appliedFilters.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2, [
createElementVNode("span", null, toDisplayString(_ctx.isLoading ? _ctx.t("filter.fetchingFilteredResults") : _ctx.t("filter.numberOfResults", { n: _ctx.numberOfResults ?? 0 })), 1),
createElementVNode("div", _hoisted_3, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.appliedFilters, (filter) => {
return openBlock(), createBlock(_component_mt_data_table_filter, {
key: filter.id,
filter: _ctx.filters.find((f) => f.id === filter.id),
"applied-options": filter.type.options,
onAddOption: _cache[0] || (_cache[0] = (filterId, optionId) => _ctx.addOption(filterId, optionId)),
onRemoveOption: _cache[1] || (_cache[1] = (filterId, optionId) => _ctx.removeOption(filterId, optionId)),
onRemoveFilter: ($event) => _ctx.removeFilter(filter.id)
}, null, 8, ["filter", "applied-opti