@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
75 lines (74 loc) • 4.31 kB
JavaScript
"use client";
require("../../../_virtual/_rolldown/runtime.cjs");
const require_keys = require("../../../core/utils/keys/keys.cjs");
const require_filter_props = require("../../../core/utils/filter-props/filter-props.cjs");
const require_get_sorted_breakpoints = require("../../../core/utils/get-sorted-breakpoints/get-sorted-breakpoints.cjs");
const require_get_base_value = require("../../../core/utils/get-base-value/get-base-value.cjs");
const require_MantineThemeProvider = require("../../../core/MantineProvider/MantineThemeProvider/MantineThemeProvider.cjs");
const require_InlineStyles = require("../../../core/InlineStyles/InlineStyles.cjs");
const require_Grid_context = require("../Grid.context.cjs");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/Grid/GridCol/GridColVariables.tsx
const getColumnFlexBasis = (colSpan, columns) => {
if (colSpan === "content") return "auto";
if (colSpan === "auto") return "0rem";
if (!colSpan) return;
if (colSpan === columns) return "100%";
return `calc(${100 * colSpan / columns}% - ${(columns - colSpan) / columns} * var(--grid-column-gap))`;
};
const getColumnMaxWidth = (colSpan, columns, grow) => {
if (grow || colSpan === "auto") return "100%";
if (colSpan === "content") return "unset";
return getColumnFlexBasis(colSpan, columns);
};
const getColumnFlexGrow = (colSpan, grow) => {
if (!colSpan) return;
return colSpan === "auto" || grow ? "1" : "auto";
};
const getColumnOffset = (offset, columns) => {
if (offset === 0) return "0";
if (!offset) return;
return `calc(${100 * offset / columns}% + ${offset / columns} * var(--grid-column-gap))`;
};
function GridColVariables({ span, order, offset, align, selector }) {
const theme = require_MantineThemeProvider.useMantineTheme();
const ctx = require_Grid_context.useGridContext();
const _breakpoints = ctx.breakpoints || theme.breakpoints;
const baseValue = require_get_base_value.getBaseValue(span);
const baseSpan = baseValue === void 0 ? 12 : baseValue;
const baseStyles = require_filter_props.filterProps({
"--col-order": require_get_base_value.getBaseValue(order)?.toString(),
"--col-flex-grow": getColumnFlexGrow(baseSpan, ctx.grow),
"--col-flex-basis": getColumnFlexBasis(baseSpan, ctx.columns),
"--col-width": baseSpan === "content" ? "auto" : void 0,
"--col-max-width": getColumnMaxWidth(baseSpan, ctx.columns, ctx.grow),
"--col-offset": getColumnOffset(require_get_base_value.getBaseValue(offset), ctx.columns),
"--col-align-self": require_get_base_value.getBaseValue(align)
});
const queries = require_keys.keys(_breakpoints).reduce((acc, breakpoint) => {
if (!acc[breakpoint]) acc[breakpoint] = {};
if (typeof order === "object" && order[breakpoint] !== void 0) acc[breakpoint]["--col-order"] = order[breakpoint]?.toString();
if (typeof span === "object" && span[breakpoint] !== void 0) {
acc[breakpoint]["--col-flex-grow"] = getColumnFlexGrow(span[breakpoint], ctx.grow);
acc[breakpoint]["--col-flex-basis"] = getColumnFlexBasis(span[breakpoint], ctx.columns);
acc[breakpoint]["--col-width"] = span[breakpoint] === "content" ? "auto" : void 0;
acc[breakpoint]["--col-max-width"] = getColumnMaxWidth(span[breakpoint], ctx.columns, ctx.grow);
}
if (typeof offset === "object" && offset[breakpoint] !== void 0) acc[breakpoint]["--col-offset"] = getColumnOffset(offset[breakpoint], ctx.columns);
if (typeof align === "object" && align[breakpoint] !== void 0) acc[breakpoint]["--col-align-self"] = align[breakpoint];
return acc;
}, {});
const values = require_get_sorted_breakpoints.getSortedBreakpoints(require_keys.keys(queries), _breakpoints).filter((breakpoint) => require_keys.keys(queries[breakpoint.value]).length > 0).map((breakpoint) => ({
query: ctx.type === "container" ? `mantine-grid (min-width: ${_breakpoints[breakpoint.value]})` : `(min-width: ${_breakpoints[breakpoint.value]})`,
styles: queries[breakpoint.value]
}));
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InlineStyles.InlineStyles, {
styles: baseStyles,
media: ctx.type === "container" ? void 0 : values,
container: ctx.type === "container" ? values : void 0,
selector
});
}
//#endregion
exports.GridColVariables = GridColVariables;
//# sourceMappingURL=GridColVariables.cjs.map