@mantine-vue/code-highlight 2.4.0 → 3.1.0

package/lib/CodeHighlightTabs/CodeHighlightTabs.d.ts

@@ -1,262 +1,43 @@
-import { type PropType, type SlotsType, type VNodeChild } from 'vue';
-import { type CodeHighlightSettings, type CodeHighlightStylesNames } from '../CodeHighlight/CodeHighlight';
-export type CodeHighlightDefaultLanguage = 'tsx' | 'scss' | 'html' | 'bash' | 'json';
-export interface CodeHighlightTabsCode {
-    language?: CodeHighlightDefaultLanguage | (string & {});
-    code: string;
-    fileName?: string;
-    icon?: VNodeChild;
-}
-export type CodeHighlightTabsStylesNames = 'root' | 'files' | 'file' | 'fileIcon' | 'filesScrollarea' | CodeHighlightStylesNames;
-export interface CodeHighlightTabsProps extends CodeHighlightSettings {
-    code: CodeHighlightTabsCode[];
-    getFileIcon?: (fileName: string) => VNodeChild;
-    defaultActiveTab?: number;
-    activeTab?: number;
-    onTabChange?: (tab: number) => void;
-    classNames?: any;
-    styles?: any;
-    vars?: any;
-    unstyled?: boolean;
-    [key: string]: any;
-}
-export interface CodeHighlightTabsFactory {
-    props: CodeHighlightTabsProps;
-    stylesNames: CodeHighlightTabsStylesNames;
-}
-export interface CodeHighlightTabsSlots {
-    getFileIcon?: (input: {
-        fileName: string;
-    }) => VNodeChild;
-    controls?: () => VNodeChild;
-}
-export declare const CodeHighlightTabs: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    code: {
-        type: PropType<CodeHighlightTabsCode[]>;
-        required: true;
-    };
-    getFileIcon: {
-        type: PropType<(fileName: string) => VNodeChild>;
-        default: undefined;
-    };
-    defaultActiveTab: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    activeTab: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    onTabChange: {
-        type: PropType<(tab: number) => void>;
-        default: undefined;
-    };
-    defaultExpanded: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    expanded: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    onExpandedChange: {
-        type: PropType<(expanded: boolean) => void>;
-        default: undefined;
-    };
-    withCopyButton: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    withExpandButton: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    withBorder: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    radius: {
-        type: PropType<string | number>;
-        default: undefined;
-    };
-    maxCollapsedHeight: {
-        type: PropType<string | number>;
-        default: undefined;
-    };
-    copyLabel: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    copiedLabel: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    expandCodeLabel: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    collapseCodeLabel: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    background: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    controls: {
-        type: PropType<CodeHighlightSettings["controls"]>;
-        default: undefined;
-    };
-    codeColorScheme: {
-        type: PropType<CodeHighlightSettings["codeColorScheme"]>;
-        default: undefined;
-    };
-    withLineNumbers: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    classNames: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    styles: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    vars: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    unstyled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    code: {
-        type: PropType<CodeHighlightTabsCode[]>;
-        required: true;
-    };
-    getFileIcon: {
-        type: PropType<(fileName: string) => VNodeChild>;
-        default: undefined;
-    };
-    defaultActiveTab: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    activeTab: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    onTabChange: {
-        type: PropType<(tab: number) => void>;
-        default: undefined;
-    };
-    defaultExpanded: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    expanded: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    onExpandedChange: {
-        type: PropType<(expanded: boolean) => void>;
-        default: undefined;
-    };
-    withCopyButton: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    withExpandButton: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    withBorder: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    radius: {
-        type: PropType<string | number>;
-        default: undefined;
-    };
-    maxCollapsedHeight: {
-        type: PropType<string | number>;
-        default: undefined;
-    };
-    copyLabel: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    copiedLabel: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    expandCodeLabel: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    collapseCodeLabel: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    background: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    controls: {
-        type: PropType<CodeHighlightSettings["controls"]>;
-        default: undefined;
-    };
-    codeColorScheme: {
-        type: PropType<CodeHighlightSettings["codeColorScheme"]>;
-        default: undefined;
-    };
-    withLineNumbers: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    classNames: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    styles: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    vars: {
-        type: (ObjectConstructor | FunctionConstructor)[];
-        default: undefined;
-    };
-    unstyled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    radius: string | number;
-    classNames: Function | Record<string, any>;
-    styles: Function | Record<string, any>;
-    expanded: boolean;
-    background: string;
-    vars: Function | Record<string, any>;
-    unstyled: boolean;
-    withBorder: boolean;
-    defaultExpanded: boolean;
-    onExpandedChange: (expanded: boolean) => void;
-    controls: VNodeChild[] | (() => VNodeChild) | undefined;
-    copiedLabel: string;
-    copyLabel: string;
-    collapseCodeLabel: string;
-    expandCodeLabel: string;
-    maxCollapsedHeight: string | number;
-    withCopyButton: boolean;
-    withExpandButton: boolean;
-    withLineNumbers: boolean;
-    codeColorScheme: "light" | "dark" | (string & {}) | undefined;
-    getFileIcon: (fileName: string) => VNodeChild;
-    defaultActiveTab: number;
-    activeTab: number;
-    onTabChange: (tab: number) => void;
-}, SlotsType<CodeHighlightTabsSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const CodeHighlightTabs: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{
+        "onUpdate:expanded"?: ((expanded: boolean) => any) | undefined;
+        "onExpanded-change"?: ((expanded: boolean) => any) | undefined;
+        "onUpdate:activeTab"?: ((tab: number) => any) | undefined;
+        "onTab-change"?: ((tab: number) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        "update:expanded": (expanded: boolean) => any;
+        "expanded-change": (expanded: boolean) => any;
+        "update:activeTab": (tab: number) => any;
+        "tab-change": (tab: number) => any;
+    }, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{}> & Readonly<{
+        "onUpdate:expanded"?: ((expanded: boolean) => any) | undefined;
+        "onExpanded-change"?: ((expanded: boolean) => any) | undefined;
+        "onUpdate:activeTab"?: ((tab: number) => any) | undefined;
+        "onTab-change"?: ((tab: number) => any) | undefined;
+    }>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<{}> & Readonly<{
+    "onUpdate:expanded"?: ((expanded: boolean) => any) | undefined;
+    "onExpanded-change"?: ((expanded: boolean) => any) | undefined;
+    "onUpdate:activeTab"?: ((tab: number) => any) | undefined;
+    "onTab-change"?: ((tab: number) => any) | undefined;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:expanded": (expanded: boolean) => any;
+    "expanded-change": (expanded: boolean) => any;
+    "update:activeTab": (tab: number) => any;
+    "tab-change": (tab: number) => any;
+}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: import("./CodeHighlightTabs.types").CodeHighlightTabsSlots;
+}) & {
+    classes: Record<string, string>;
+};
+export type * from './CodeHighlightTabs.types';

package/lib/CodeHighlightTabs/CodeHighlightTabs.types.d.ts

@@ -0,0 +1,47 @@
+import type { VNodeChild } from 'vue';
+import type { CodeHighlightExpandEmits, CodeHighlightSettings, CodeHighlightStylesNames } from '../CodeHighlight/CodeHighlight.types';
+/** Available shiki languages for default Mantine shiki instance. Should be used only with *.mantine.dev projects. */
+export type CodeHighlightDefaultLanguage = 'tsx' | 'scss' | 'html' | 'bash' | 'json';
+export interface CodeHighlightTabsCode {
+    language?: CodeHighlightDefaultLanguage | (string & {});
+    code: string;
+    fileName?: string;
+    icon?: VNodeChild;
+}
+export type CodeHighlightTabsStylesNames = 'root' | 'files' | 'file' | 'fileIcon' | 'filesScrollarea' | CodeHighlightStylesNames;
+export interface CodeHighlightTabsProps extends CodeHighlightSettings {
+    /** Code to highlight with meta data (file name and icon). */
+    code: CodeHighlightTabsCode[];
+    /** Function that returns icon based on file name. */
+    getFileIcon?: (fileName: string) => VNodeChild;
+    /** Default active tab index. */
+    defaultActiveTab?: number;
+    /** Index of controlled active tab state. */
+    activeTab?: number;
+    /** CSS classes applied to component elements. */
+    classNames?: any;
+    /** Inline styles applied to component elements. */
+    styles?: any;
+    /** CSS variables applied to component elements. */
+    vars?: any;
+    /** If set, all Mantine classes are removed from component elements. @default false */
+    unstyled?: boolean;
+    [key: string]: any;
+}
+export interface CodeHighlightTabsFactory {
+    props: CodeHighlightTabsProps;
+    stylesNames: CodeHighlightTabsStylesNames;
+}
+export interface CodeHighlightTabsSlots {
+    getFileIcon?: (input: {
+        fileName: string;
+    }) => VNodeChild;
+    controls?: () => VNodeChild;
+}
+/** Events emitted by `CodeHighlightTabs`. */
+export interface CodeHighlightTabsEmits extends CodeHighlightExpandEmits {
+    /** Emitted when the active tab changes. */
+    'update:activeTab': [tab: number];
+    /** Emitted when the active tab changes. */
+    'tab-change': [tab: number];
+}

package/lib/CodeHighlightTabs/CodeHighlightTabs.vue.d.ts

@@ -0,0 +1,21 @@
+import type { CodeHighlightTabsSlots } from './CodeHighlightTabs.types';
+type __VLS_Slots = CodeHighlightTabsSlots;
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:expanded": (expanded: boolean) => any;
+    "expanded-change": (expanded: boolean) => any;
+    "update:activeTab": (tab: number) => any;
+    "tab-change": (tab: number) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    "onUpdate:expanded"?: ((expanded: boolean) => any) | undefined;
+    "onExpanded-change"?: ((expanded: boolean) => any) | undefined;
+    "onUpdate:activeTab"?: ((tab: number) => any) | undefined;
+    "onTab-change"?: ((tab: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/CodeHighlightTabs/FileIcon.d.ts

@@ -1,40 +1 @@
-import { type PropType, type SlotsType, type VNodeChild } from 'vue';
-export interface FileIconSlots {
-    fileIcon?: () => VNodeChild;
-    getFileIcon?: (input: {
-        fileName: string;
-    }) => VNodeChild;
-}
-export declare const FileIcon: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    fileName: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    getFileIcon: {
-        type: PropType<(fileName: string) => VNodeChild>;
-        default: undefined;
-    };
-    fileIcon: {
-        type: PropType<VNodeChild>;
-        default: undefined;
-    };
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    fileName: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    getFileIcon: {
-        type: PropType<(fileName: string) => VNodeChild>;
-        default: undefined;
-    };
-    fileIcon: {
-        type: PropType<VNodeChild>;
-        default: undefined;
-    };
-}>> & Readonly<{}>, {
-    fileName: string;
-    getFileIcon: (fileName: string) => VNodeChild;
-    fileIcon: VNodeChild;
-}, SlotsType<FileIconSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export { default as FileIcon } from './FileIcon.vue';

package/lib/CodeHighlightTabs/FileIcon.vue.d.ts

@@ -0,0 +1,21 @@
+import type { VNodeChild } from 'vue';
+type __VLS_Props = {
+    fileName?: string;
+    getFileIcon?: (fileName: string) => VNodeChild;
+    fileIcon?: VNodeChild;
+};
+type __VLS_Slots = {
+    fileIcon?: () => VNodeChild;
+    getFileIcon?: (input: {
+        fileName: string;
+    }) => VNodeChild;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/index.d.mts

@@ -8,8 +8,8 @@ export { createHighlightJsAdapter } from './CodeHighlightProvider/adapters/highl
 export { createShikiAdapter, stripShikiCodeBlocks, } from './CodeHighlightProvider/adapters/shiki-adapter';
 export { plainTextAdapter } from './CodeHighlightProvider/adapters/plain-text-adapter';
 export type { CodeHighlightAdapter, Highlighter, HighlighterInput, } from './CodeHighlightProvider/CodeHighlightProvider';
-export type { CodeHighlightCssVariables, CodeHighlightFactory, CodeHighlightProps, CodeHighlightSettings, CodeHighlightSlots, CodeHighlightStylesNames, } from './CodeHighlight/CodeHighlight';
+export type { CodeHighlightCssVariables, CodeHighlightEmits, CodeHighlightExpandEmits, CodeHighlightFactory, CodeHighlightProps, CodeHighlightSettings, CodeHighlightSlots, CodeHighlightStylesNames, } from './CodeHighlight/CodeHighlight';
 export type { CodeHighlightContextValue } from './CodeHighlight/CodeHighlight.context';
-export type { CodeHighlightControlProps } from './CodeHighlight/CodeHighlightControl/CodeHighlightControl';
+export type { CodeHighlightControlEmits, CodeHighlightControlProps, } from './CodeHighlight/CodeHighlightControl/CodeHighlightControl';
 export type { InlineCodeHighlightCssVariables, InlineCodeHighlightFactory, InlineCodeHighlightProps, InlineCodeHighlightStylesNames, } from './CodeHighlight/InlineCodeHighlight';
-export type { CodeHighlightDefaultLanguage, CodeHighlightTabsCode, CodeHighlightTabsFactory, CodeHighlightTabsProps, CodeHighlightTabsSlots, CodeHighlightTabsStylesNames, } from './CodeHighlightTabs/CodeHighlightTabs';
+export type { CodeHighlightDefaultLanguage, CodeHighlightTabsCode, CodeHighlightTabsEmits, CodeHighlightTabsFactory, CodeHighlightTabsProps, CodeHighlightTabsSlots, CodeHighlightTabsStylesNames, } from './CodeHighlightTabs/CodeHighlightTabs';

package/lib/index.d.ts

@@ -8,8 +8,8 @@ export { createHighlightJsAdapter } from './CodeHighlightProvider/adapters/highl
 export { createShikiAdapter, stripShikiCodeBlocks, } from './CodeHighlightProvider/adapters/shiki-adapter';
 export { plainTextAdapter } from './CodeHighlightProvider/adapters/plain-text-adapter';
 export type { CodeHighlightAdapter, Highlighter, HighlighterInput, } from './CodeHighlightProvider/CodeHighlightProvider';
-export type { CodeHighlightCssVariables, CodeHighlightFactory, CodeHighlightProps, CodeHighlightSettings, CodeHighlightSlots, CodeHighlightStylesNames, } from './CodeHighlight/CodeHighlight';
+export type { CodeHighlightCssVariables, CodeHighlightEmits, CodeHighlightExpandEmits, CodeHighlightFactory, CodeHighlightProps, CodeHighlightSettings, CodeHighlightSlots, CodeHighlightStylesNames, } from './CodeHighlight/CodeHighlight';
 export type { CodeHighlightContextValue } from './CodeHighlight/CodeHighlight.context';
-export type { CodeHighlightControlProps } from './CodeHighlight/CodeHighlightControl/CodeHighlightControl';
+export type { CodeHighlightControlEmits, CodeHighlightControlProps, } from './CodeHighlight/CodeHighlightControl/CodeHighlightControl';
 export type { InlineCodeHighlightCssVariables, InlineCodeHighlightFactory, InlineCodeHighlightProps, InlineCodeHighlightStylesNames, } from './CodeHighlight/InlineCodeHighlight';
-export type { CodeHighlightDefaultLanguage, CodeHighlightTabsCode, CodeHighlightTabsFactory, CodeHighlightTabsProps, CodeHighlightTabsSlots, CodeHighlightTabsStylesNames, } from './CodeHighlightTabs/CodeHighlightTabs';
+export type { CodeHighlightDefaultLanguage, CodeHighlightTabsCode, CodeHighlightTabsEmits, CodeHighlightTabsFactory, CodeHighlightTabsProps, CodeHighlightTabsSlots, CodeHighlightTabsStylesNames, } from './CodeHighlightTabs/CodeHighlightTabs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine-vue/code-highlight",
-  "version": "2.4.0",
+  "version": "3.1.0",
   "description": "Vue code highlight components equivalent to @mantine/code-highlight",
   "license": "MIT",
   "files": [
@@ -39,8 +39,8 @@
     "vue": "^3.5.0"
   },
   "peerDependencies": {
-    "@mantine-vue/core": "2.4.0",
-    "@mantine-vue/hooks": "2.4.0",
+    "@mantine-vue/core": "3.1.0",
+    "@mantine-vue/hooks": "3.1.0",
     "vue": "^3.5.0"
   }
 }