@mantine-vue/code-highlight 2.3.1 → 3.0.0

package/cjs/index.cjs

@@ -278,6 +278,7 @@ function resolveColorScheme(value) {
 var CodeHighlightBase = (0, vue.defineComponent)({
 	name: "CodeHighlight",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		code: {
 			type: String,
@@ -380,7 +381,7 @@ var CodeHighlightBase = (0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs }) {
+	setup(rawProps, { attrs, slots }) {
 		const props = (0, _mantine_vue_core.useProps)("CodeHighlight", defaultProps, rawProps);
 		const mantine = (0, _mantine_vue_core.useMantineContext)();
 		const getStyles = (0, _mantine_vue_core.useStyles)({
@@ -428,7 +429,7 @@ var CodeHighlightBase = (0, vue.defineComponent)({
 				"data-with-border": props.withBorder || void 0,
 				...codeContent
 			});
-			const renderedControls = typeof props.controls === "function" ? props.controls() : props.controls;
+			const renderedControls = props.controls !== void 0 ? typeof props.controls === "function" ? props.controls() : props.controls : slots.controls?.();
 			const controlsArray = Array.isArray(renderedControls) ? renderedControls : renderedControls ? [renderedControls] : [];
 			const shouldDisplayControls = controlsArray.length > 0 || props.withExpandButton || props.withCopyButton;
 			return (0, vue.h)(_mantine_vue_core.Box, {
@@ -571,6 +572,7 @@ Object.assign(InlineCodeHighlight, {
 var FileIcon = (0, vue.defineComponent)({
 	name: "FileIcon",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		fileName: {
 			type: String,
@@ -591,10 +593,12 @@ var FileIcon = (0, vue.defineComponent)({
 			default: void 0
 		}
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		return () => {
 			if (props.fileIcon) return (0, vue.h)("span", attrs, props.fileIcon);
 			if (props.getFileIcon && props.fileName) return (0, vue.h)("span", attrs, props.getFileIcon(props.fileName));
+			if (slots.fileIcon) return (0, vue.h)("span", attrs, slots.fileIcon());
+			if (slots.getFileIcon && props.fileName) return (0, vue.h)("span", attrs, slots.getFileIcon({ fileName: props.fileName }));
 			return null;
 		};
 	}
@@ -604,6 +608,7 @@ var FileIcon = (0, vue.defineComponent)({
 var CodeHighlightTabs = (0, vue.defineComponent)({
 	name: "CodeHighlightTabs",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		code: {
 			type: Array,
@@ -706,7 +711,7 @@ var CodeHighlightTabs = (0, vue.defineComponent)({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs }) {
+	setup(rawProps, { attrs, slots }) {
 		const props = (0, _mantine_vue_core.useProps)("CodeHighlightTabs", null, rawProps);
 		const getStyles = (0, _mantine_vue_core.useStyles)({
 			name: "CodeHighlightTabs",
@@ -741,6 +746,7 @@ var CodeHighlightTabs = (0, vue.defineComponent)({
 				language: "tsx",
 				fileName: ""
 			};
+			const getFileIcon = props.getFileIcon ?? (slots.getFileIcon ? (fileName) => slots.getFileIcon?.({ fileName }) : void 0);
 			const files = props.code.map((node, index) => (0, vue.h)(_mantine_vue_core.UnstyledButton, {
 				...getStyles("file"),
 				key: node.fileName ?? index,
@@ -749,7 +755,7 @@ var CodeHighlightTabs = (0, vue.defineComponent)({
 				"data-color-scheme": props.codeColorScheme
 			}, () => [(0, vue.h)(FileIcon, {
 				fileIcon: node.icon,
-				getFileIcon: props.getFileIcon,
+				getFileIcon,
 				fileName: node.fileName,
 				key: "file-icon",
 				...getStyles("fileIcon")
@@ -784,7 +790,7 @@ var CodeHighlightTabs = (0, vue.defineComponent)({
 				__staticSelector: "CodeHighlightTabs",
 				classNames: props.classNames,
 				styles: props.styles
-			})]);
+			}, { controls: slots.controls })]);
 		};
 	}
 });