@mantine-vue/code-highlight 3.0.0 → 3.1.0

package/lib/CodeHighlight/CodeHighlight.d.ts

@@ -1,509 +1,59 @@
-import { type PropType, type SlotsType, type VNodeChild } from 'vue';
-import { type CodeHighlightAdapter } from '../CodeHighlightProvider/CodeHighlightProvider';
-import { type CodeHighlightContextValue } from './CodeHighlight.context';
-import { type CodeHighlightControlProps } from './CodeHighlightControl/CodeHighlightControl';
-export type CodeHighlightStylesNames = 'codeHighlight' | 'pre' | 'code' | 'control' | 'controlTooltip' | 'controls' | 'scrollarea' | 'showCodeButton' | 'lineNumbers' | 'codeWrapper';
-export type CodeHighlightCssVariables = {
-    codeHighlight: '--ch-max-height' | '--ch-background' | '--ch-radius';
-};
-export interface CodeHighlightSettings {
-    copyLabel?: string;
-    copiedLabel?: string;
-    defaultExpanded?: boolean;
-    expanded?: boolean;
-    onExpandedChange?: (expanded: boolean) => void;
-    maxCollapsedHeight?: number | string;
-    withCopyButton?: boolean;
-    withExpandButton?: boolean;
-    expandCodeLabel?: string;
-    collapseCodeLabel?: string;
-    background?: string;
-    radius?: string | number;
-    withBorder?: boolean;
-    withLineNumbers?: boolean;
-    controls?: VNodeChild[] | (() => VNodeChild);
-    codeColorScheme?: 'dark' | 'light' | (string & {});
-}
-export interface CodeHighlightProps extends CodeHighlightSettings {
-    __withOffset?: boolean;
-    __staticSelector?: string;
-    __inline?: boolean;
-    code: string;
-    language?: string;
-    classNames?: any;
-    styles?: any;
-    vars?: any;
-    unstyled?: boolean;
-    class?: any;
-    style?: any;
-    [key: string]: any;
-}
-export interface CodeHighlightFactory {
-    props: CodeHighlightProps;
-    stylesNames: CodeHighlightStylesNames;
-    vars: CodeHighlightCssVariables;
-}
-export interface CodeHighlightSlots {
-    controls?: () => VNodeChild;
-}
 export declare const CodeHighlight: {
-    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
-        code: {
-            type: StringConstructor;
-            required: true;
-        };
-        language: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        copyLabel: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        copiedLabel: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        defaultExpanded: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        expanded: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        onExpandedChange: {
-            type: PropType<(expanded: boolean) => void>;
-            default: undefined;
-        };
-        maxCollapsedHeight: {
-            type: PropType<string | number>;
-            default: undefined;
-        };
-        withCopyButton: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        withExpandButton: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        expandCodeLabel: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        collapseCodeLabel: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        background: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        radius: {
-            type: PropType<string | number>;
-            default: undefined;
-        };
-        withBorder: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        withLineNumbers: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        controls: {
-            type: PropType<CodeHighlightSettings["controls"]>;
-            default: undefined;
-        };
-        codeColorScheme: {
-            type: PropType<CodeHighlightSettings["codeColorScheme"]>;
-            default: undefined;
-        };
-        __withOffset: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        __staticSelector: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        __inline: {
-            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<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {
-        radius: string | number;
-        classNames: Function | Record<string, any>;
-        styles: Function | Record<string, any>;
-        expanded: boolean;
-        background: string;
-        vars: Function | Record<string, any>;
-        unstyled: boolean;
-        __staticSelector: string;
-        withBorder: boolean;
-        defaultExpanded: boolean;
-        onExpandedChange: (expanded: boolean) => void;
-        controls: VNodeChild[] | (() => VNodeChild) | undefined;
-        copiedLabel: string;
-        copyLabel: string;
-        collapseCodeLabel: string;
-        expandCodeLabel: string;
-        __withOffset: boolean;
-        __inline: boolean;
-        language: string;
-        maxCollapsedHeight: string | number;
-        withCopyButton: boolean;
-        withExpandButton: boolean;
-        withLineNumbers: boolean;
-        codeColorScheme: "light" | "dark" | (string & {}) | undefined;
-    }, true, {}, SlotsType<CodeHighlightSlots>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{
+        "onUpdate:expanded"?: ((expanded: boolean) => any) | undefined;
+        "onExpanded-change"?: ((expanded: boolean) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        "update:expanded": (expanded: boolean) => any;
+        "expanded-change": (expanded: boolean) => any;
+    }, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
         B: {};
         D: {};
         C: {};
         M: {};
         Defaults: {};
-    }, Readonly<import("vue").ExtractPropTypes<{
-        code: {
-            type: StringConstructor;
-            required: true;
-        };
-        language: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        copyLabel: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        copiedLabel: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        defaultExpanded: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        expanded: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        onExpandedChange: {
-            type: PropType<(expanded: boolean) => void>;
-            default: undefined;
-        };
-        maxCollapsedHeight: {
-            type: PropType<string | number>;
-            default: undefined;
-        };
-        withCopyButton: {
-            type: BooleanConstructor;
-            default: undefined;
-        };
-        withExpandButton: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        expandCodeLabel: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        collapseCodeLabel: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        background: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        radius: {
-            type: PropType<string | number>;
-            default: undefined;
-        };
-        withBorder: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        withLineNumbers: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        controls: {
-            type: PropType<CodeHighlightSettings["controls"]>;
-            default: undefined;
-        };
-        codeColorScheme: {
-            type: PropType<CodeHighlightSettings["codeColorScheme"]>;
-            default: undefined;
-        };
-        __withOffset: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        __staticSelector: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        __inline: {
-            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<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>, {}, {}, {}, {
-        radius: string | number;
-        classNames: Function | Record<string, any>;
-        styles: Function | Record<string, any>;
-        expanded: boolean;
-        background: string;
-        vars: Function | Record<string, any>;
-        unstyled: boolean;
-        __staticSelector: string;
-        withBorder: boolean;
-        defaultExpanded: boolean;
-        onExpandedChange: (expanded: boolean) => void;
-        controls: VNodeChild[] | (() => VNodeChild) | undefined;
-        copiedLabel: string;
-        copyLabel: string;
-        collapseCodeLabel: string;
-        expandCodeLabel: string;
-        __withOffset: boolean;
-        __inline: boolean;
-        language: string;
-        maxCollapsedHeight: string | number;
-        withCopyButton: boolean;
-        withExpandButton: boolean;
-        withLineNumbers: boolean;
-        codeColorScheme: "light" | "dark" | (string & {}) | undefined;
-    }>;
+    }, Readonly<{}> & Readonly<{
+        "onUpdate:expanded"?: ((expanded: boolean) => any) | undefined;
+        "onExpanded-change"?: ((expanded: boolean) => any) | undefined;
+    }>, {}, {}, {}, {}, {}>;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
-} & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
-    code: {
-        type: StringConstructor;
-        required: true;
-    };
-    language: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    copyLabel: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    copiedLabel: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    defaultExpanded: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    expanded: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    onExpandedChange: {
-        type: PropType<(expanded: boolean) => void>;
-        default: undefined;
-    };
-    maxCollapsedHeight: {
-        type: PropType<string | number>;
-        default: undefined;
-    };
-    withCopyButton: {
-        type: BooleanConstructor;
-        default: undefined;
-    };
-    withExpandButton: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    expandCodeLabel: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    collapseCodeLabel: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    background: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    radius: {
-        type: PropType<string | number>;
-        default: undefined;
-    };
-    withBorder: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    withLineNumbers: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    controls: {
-        type: PropType<CodeHighlightSettings["controls"]>;
-        default: undefined;
-    };
-    codeColorScheme: {
-        type: PropType<CodeHighlightSettings["codeColorScheme"]>;
-        default: undefined;
-    };
-    __withOffset: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    __staticSelector: {
-        type: StringConstructor;
-        default: undefined;
-    };
-    __inline: {
-        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<{}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {
-    radius: string | number;
-    classNames: Function | Record<string, any>;
-    styles: Function | Record<string, any>;
-    expanded: boolean;
-    background: string;
-    vars: Function | Record<string, any>;
-    unstyled: boolean;
-    __staticSelector: string;
-    withBorder: boolean;
-    defaultExpanded: boolean;
-    onExpandedChange: (expanded: boolean) => void;
-    controls: VNodeChild[] | (() => VNodeChild) | undefined;
-    copiedLabel: string;
-    copyLabel: string;
-    collapseCodeLabel: string;
-    expandCodeLabel: string;
-    __withOffset: boolean;
-    __inline: boolean;
-    language: string;
-    maxCollapsedHeight: string | number;
-    withCopyButton: boolean;
-    withExpandButton: boolean;
-    withLineNumbers: boolean;
-    codeColorScheme: "light" | "dark" | (string & {}) | undefined;
-}, {}, string, SlotsType<CodeHighlightSlots>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
+} & import("vue").ComponentOptionsBase<Readonly<{}> & Readonly<{
+    "onUpdate:expanded"?: ((expanded: boolean) => any) | undefined;
+    "onExpanded-change"?: ((expanded: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:expanded": (expanded: boolean) => any;
+    "expanded-change": (expanded: boolean) => 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("./CodeHighlight.types").CodeHighlightSlots;
+}) & {
     classes: Record<string, string>;
     varsResolver: (theme: import("@mantine-vue/core").MantineTheme, props: any, ctx: Record<string, any>) => Record<string, Record<string, string | undefined>>;
-    Control: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-        tooltipLabel: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        classNames: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        styles: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        vars: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        component: {
-            type: StringConstructor;
-            default: string;
-        };
-        onClick: {
-            type: PropType<(event: MouseEvent) => void>;
-            default: undefined;
-        };
-    }>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-        [key: string]: any;
-    }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-        tooltipLabel: {
-            type: StringConstructor;
-            default: undefined;
-        };
-        classNames: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        styles: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        vars: {
-            type: (ObjectConstructor | FunctionConstructor)[];
-            default: undefined;
-        };
-        component: {
-            type: StringConstructor;
-            default: string;
-        };
-        onClick: {
-            type: PropType<(event: MouseEvent) => void>;
-            default: undefined;
-        };
-    }>> & Readonly<{}>, {
-        onClick: (event: MouseEvent) => void;
-        classNames: Function | Record<string, any>;
-        styles: Function | Record<string, any>;
-        component: string;
-        vars: Function | Record<string, any>;
-        tooltipLabel: string;
-    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    Control: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{
+            onClick?: ((event: MouseEvent) => any) | undefined;
+        }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+            click: (event: MouseEvent) => any;
+        }, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<{}> & Readonly<{
+            onClick?: ((event: MouseEvent) => any) | undefined;
+        }>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<{}> & Readonly<{
+        onClick?: ((event: MouseEvent) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        click: (event: MouseEvent) => 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("./CodeHighlightControl/CodeHighlightControl.types.js").CodeHighlightControlSlots;
+    });
 };
-export type { CodeHighlightAdapter, CodeHighlightContextValue, CodeHighlightControlProps };
+export type * from './CodeHighlight.types';

package/lib/CodeHighlight/CodeHighlight.types.d.ts

@@ -0,0 +1,80 @@
+import type { VNodeChild } from 'vue';
+import type { CodeHighlightAdapter } from '../CodeHighlightProvider/CodeHighlightProvider';
+import type { CodeHighlightContextValue } from './CodeHighlight.context';
+import type { CodeHighlightControlProps } from './CodeHighlightControl/CodeHighlightControl.types';
+export type CodeHighlightStylesNames = 'codeHighlight' | 'pre' | 'code' | 'control' | 'controlTooltip' | 'controls' | 'scrollarea' | 'showCodeButton' | 'lineNumbers' | 'codeWrapper';
+export type CodeHighlightCssVariables = {
+    codeHighlight: '--ch-max-height' | '--ch-background' | '--ch-radius';
+};
+export interface CodeHighlightSettings {
+    /** Label for copy button in default state. @default 'Copy' */
+    copyLabel?: string;
+    /** Label for copy button in copied state. @default 'Copied' */
+    copiedLabel?: string;
+    /** Uncontrolled expanded default state. */
+    defaultExpanded?: boolean;
+    /** Controlled expanded state. */
+    expanded?: boolean;
+    /** Max height of collapsed state. @default 180px */
+    maxCollapsedHeight?: number | string;
+    /** Determines whether the copy button should be displayed. @default true */
+    withCopyButton?: boolean;
+    /** Determines whether the expand/collapse button should be displayed. @default false */
+    withExpandButton?: boolean;
+    /** Label for expand button. @default 'Expand code' */
+    expandCodeLabel?: string;
+    /** Label for collapse button. @default 'Collapse code' */
+    collapseCodeLabel?: string;
+    /** Controls background color of the code. By default, the value depends on color scheme. */
+    background?: string;
+    /** Key of `theme.radius` or any valid CSS value to set border-radius. @default 0 */
+    radius?: string | number;
+    /** Adds border to the root element. @default false */
+    withBorder?: boolean;
+    /** Determines whether line numbers should be displayed. @default false */
+    withLineNumbers?: boolean;
+    /** Extra controls to display in the controls list. */
+    controls?: VNodeChild[] | (() => VNodeChild);
+    /** Set to use dark or light color scheme. When using shiki adapter, you can use loaded themes here. */
+    codeColorScheme?: 'dark' | 'light' | (string & {});
+}
+export interface CodeHighlightProps extends CodeHighlightSettings {
+    __withOffset?: boolean;
+    __staticSelector?: string;
+    /** If set, the code will be rendered as inline element without `<pre>`. @default false */
+    __inline?: boolean;
+    /** Code to highlight. */
+    code: string;
+    /** Language of the code, used for syntax highlighting. */
+    language?: string;
+    /** 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;
+    class?: any;
+    style?: any;
+    [key: string]: any;
+}
+export interface CodeHighlightFactory {
+    props: CodeHighlightProps;
+    stylesNames: CodeHighlightStylesNames;
+    vars: CodeHighlightCssVariables;
+}
+/** Events emitted when the expanded state changes. */
+export interface CodeHighlightExpandEmits {
+    /** Emitted when the expanded state changes. */
+    'update:expanded': [expanded: boolean];
+    /** Emitted when the expanded state changes. */
+    'expanded-change': [expanded: boolean];
+}
+/** Events emitted by `CodeHighlight`. */
+export type CodeHighlightEmits = CodeHighlightExpandEmits;
+export interface CodeHighlightSlots {
+    /** Custom controls rendered before built-in controls. */
+    controls?: () => VNodeChild;
+}
+export type { CodeHighlightAdapter, CodeHighlightContextValue, CodeHighlightControlProps };

package/lib/CodeHighlight/CodeHighlight.vue.d.ts

@@ -0,0 +1,17 @@
+import type { CodeHighlightSlots } from './CodeHighlight.types';
+declare const varsResolver: (theme: import("@mantine-vue/core").MantineTheme, props: any, ctx: Record<string, any>) => Record<string, Record<string, string | undefined>>;
+export { varsResolver };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:expanded": (expanded: boolean) => any;
+    "expanded-change": (expanded: boolean) => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    "onUpdate:expanded"?: ((expanded: boolean) => any) | undefined;
+    "onExpanded-change"?: ((expanded: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, CodeHighlightSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};