@mantine-vue/code-highlight 2.3.1 → 2.4.0

package/esm/index.mjs

@@ -277,6 +277,7 @@ function resolveColorScheme(value) {
 var CodeHighlightBase = defineComponent({
 	name: "CodeHighlight",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		code: {
 			type: String,
@@ -379,7 +380,7 @@ var CodeHighlightBase = defineComponent({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs }) {
+	setup(rawProps, { attrs, slots }) {
 		const props = useProps("CodeHighlight", defaultProps, rawProps);
 		const mantine = useMantineContext();
 		const getStyles = useStyles({
@@ -427,7 +428,7 @@ var CodeHighlightBase = 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 h(Box, {
@@ -570,6 +571,7 @@ Object.assign(InlineCodeHighlight, {
 var FileIcon = defineComponent({
 	name: "FileIcon",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		fileName: {
 			type: String,
@@ -590,10 +592,12 @@ var FileIcon = defineComponent({
 			default: void 0
 		}
 	},
-	setup(props, { attrs }) {
+	setup(props, { attrs, slots }) {
 		return () => {
 			if (props.fileIcon) return h("span", attrs, props.fileIcon);
 			if (props.getFileIcon && props.fileName) return h("span", attrs, props.getFileIcon(props.fileName));
+			if (slots.fileIcon) return h("span", attrs, slots.fileIcon());
+			if (slots.getFileIcon && props.fileName) return h("span", attrs, slots.getFileIcon({ fileName: props.fileName }));
 			return null;
 		};
 	}
@@ -603,6 +607,7 @@ var FileIcon = defineComponent({
 var CodeHighlightTabs = defineComponent({
 	name: "CodeHighlightTabs",
 	inheritAttrs: false,
+	slots: Object,
 	props: {
 		code: {
 			type: Array,
@@ -705,7 +710,7 @@ var CodeHighlightTabs = defineComponent({
 			default: false
 		}
 	},
-	setup(rawProps, { attrs }) {
+	setup(rawProps, { attrs, slots }) {
 		const props = useProps("CodeHighlightTabs", null, rawProps);
 		const getStyles = useStyles({
 			name: "CodeHighlightTabs",
@@ -740,6 +745,7 @@ var CodeHighlightTabs = defineComponent({
 				language: "tsx",
 				fileName: ""
 			};
+			const getFileIcon = props.getFileIcon ?? (slots.getFileIcon ? (fileName) => slots.getFileIcon?.({ fileName }) : void 0);
 			const files = props.code.map((node, index) => h(UnstyledButton, {
 				...getStyles("file"),
 				key: node.fileName ?? index,
@@ -748,7 +754,7 @@ var CodeHighlightTabs = defineComponent({
 				"data-color-scheme": props.codeColorScheme
 			}, () => [h(FileIcon, {
 				fileIcon: node.icon,
-				getFileIcon: props.getFileIcon,
+				getFileIcon,
 				fileName: node.fileName,
 				key: "file-icon",
 				...getStyles("fileIcon")
@@ -783,7 +789,7 @@ var CodeHighlightTabs = defineComponent({
 				__staticSelector: "CodeHighlightTabs",
 				classNames: props.classNames,
 				styles: props.styles
-			})]);
+			}, { controls: slots.controls })]);
 		};
 	}
 });