naive-ui 2.30.7 → 2.32.0

package/lib/cascader/src/utils.js

@@ -1,47 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getPathLabel = exports.createSelectOptions = exports.traverseWithCallback = exports.getRawNodePath = void 0;
+exports.getPathLabel = exports.createSelectOptions = exports.getRawNodePath = void 0;
 function getRawNodePath(tmNodes) {
     if (!tmNodes)
         return null;
     return tmNodes.map((tmNode) => tmNode.rawNode);
 }
 exports.getRawNodePath = getRawNodePath;
-function traverseWithCallback(options, beforeCallback, afterCallback) {
-    if (Array.isArray(options)) {
-        for (const option of options) {
-            if (beforeCallback)
-                beforeCallback(option);
-            if (option.children) {
-                traverseWithCallback(option.children, beforeCallback, afterCallback);
-            }
-            if (afterCallback)
-                afterCallback(option);
-        }
-    }
-}
-exports.traverseWithCallback = traverseWithCallback;
 function createSelectOptions(tmNodes, checkStrategyIsChild, labelField, separator) {
     const selectOptions = [];
     const path = [];
-    traverseWithCallback(tmNodes, (tmNode) => {
-        if (tmNode.isLeaf || !checkStrategyIsChild) {
+    function traverse(_tmNodes) {
+        for (const tmNode of _tmNodes) {
             if (tmNode.disabled)
-                return;
+                continue;
             const { rawNode } = tmNode;
             path.push(rawNode);
-            selectOptions.push({
-                label: path
-                    .map((rawNodeInPath) => rawNodeInPath[labelField])
-                    .join(separator),
-                value: tmNode.key,
-                rawNode: tmNode.rawNode,
-                path: Array.from(path)
-            });
+            if (tmNode.isLeaf || !checkStrategyIsChild) {
+                selectOptions.push({
+                    label: getPathLabel(tmNode, separator, labelField),
+                    value: tmNode.key,
+                    rawNode: tmNode.rawNode,
+                    path: Array.from(path)
+                });
+            }
+            if (!tmNode.isLeaf && tmNode.children) {
+                traverse(tmNode.children);
+            }
+            path.pop();
         }
-    }, () => {
-        path.pop();
-    });
+    }
+    traverse(tmNodes);
     return selectOptions;
 }
 exports.createSelectOptions = createSelectOptions;

package/lib/checkbox/index.d.ts

@@ -1,5 +1,5 @@
-export { default as NCheckbox } from './src/Checkbox';
-export { default as NCheckboxGroup } from './src/CheckboxGroup';
+export { default as NCheckbox, checkboxProps } from './src/Checkbox';
+export { default as NCheckboxGroup, checkboxGroupProps } from './src/CheckboxGroup';
 export type { CheckboxProps } from './src/Checkbox';
 export type { CheckboxGroupProps } from './src/CheckboxGroup';
 export type { CheckboxInst } from './src/interface';

package/lib/checkbox/index.js

@@ -3,8 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NCheckboxGroup = exports.NCheckbox = void 0;
+exports.checkboxGroupProps = exports.NCheckboxGroup = exports.checkboxProps = exports.NCheckbox = void 0;
 var Checkbox_1 = require("./src/Checkbox");
 Object.defineProperty(exports, "NCheckbox", { enumerable: true, get: function () { return __importDefault(Checkbox_1).default; } });
+Object.defineProperty(exports, "checkboxProps", { enumerable: true, get: function () { return Checkbox_1.checkboxProps; } });
 var CheckboxGroup_1 = require("./src/CheckboxGroup");
 Object.defineProperty(exports, "NCheckboxGroup", { enumerable: true, get: function () { return __importDefault(CheckboxGroup_1).default; } });
+Object.defineProperty(exports, "checkboxGroupProps", { enumerable: true, get: function () { return CheckboxGroup_1.checkboxGroupProps; } });

package/lib/checkbox/src/Checkbox.d.ts

@@ -1,7 +1,7 @@
 import { PropType } from 'vue';
 import { MaybeArray, ExtractPublicPropTypes } from '../../_utils';
 import type { OnUpdateChecked, CheckboxInst } from './interface';
-declare const checkboxProps: {
+export declare const checkboxProps: {
     size: PropType<"small" | "medium" | "large">;
     checked: {
         type: PropType<string | number | boolean | undefined>;

package/lib/checkbox/src/Checkbox.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkboxProps = void 0;
 const vue_1 = require("vue");
 const vooks_1 = require("vooks");
 const seemly_1 = require("seemly");
@@ -15,8 +16,8 @@ const CheckMark_1 = __importDefault(require("./CheckMark"));
 const LineMark_1 = __importDefault(require("./LineMark"));
 const CheckboxGroup_1 = require("./CheckboxGroup");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-const use_rtl_1 = __importDefault(require("../../_mixins/use-rtl"));
-const checkboxProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { size: String, checked: {
+const use_rtl_1 = require("../../_mixins/use-rtl");
+exports.checkboxProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { size: String, checked: {
         type: [Boolean, String, Number],
         default: undefined
     }, defaultChecked: {
@@ -41,7 +42,7 @@ const checkboxProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     onChange: [Function, Array] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Checkbox',
-    props: checkboxProps,
+    props: exports.checkboxProps,
     setup(props) {
         if (process.env.NODE_ENV !== 'production') {
             (0, vue_1.watchEffect)(() => {
@@ -167,7 +168,7 @@ exports.default = (0, vue_1.defineComponent)({
                 (_a = selfRef.value) === null || _a === void 0 ? void 0 : _a.blur();
             }
         };
-        const rtlEnabledRef = (0, use_rtl_1.default)('Checkbox', mergedRtlRef, mergedClsPrefixRef);
+        const rtlEnabledRef = (0, use_rtl_1.useRtl)('Checkbox', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
             const { value: mergedSize } = mergedSizeRef;
             const { common: { cubicBezierEaseInOut }, self: { borderRadius, color, colorChecked, colorDisabled, colorTableHeader, colorTableHeaderModal, colorTableHeaderPopover, checkMarkColor, checkMarkColorDisabled, border, borderFocus, borderDisabled, borderChecked, boxShadowFocus, textColor, textColorDisabled, checkMarkColorDisabledChecked, colorDisabledChecked, borderDisabledChecked, labelPadding, labelLineHeight, [(0, _utils_1.createKey)('fontSize', mergedSize)]: fontSize, [(0, _utils_1.createKey)('size', mergedSize)]: size } } = themeRef.value;

package/lib/checkbox/src/CheckboxGroup.d.ts

@@ -11,7 +11,7 @@ export interface CheckboxGroupInjection {
     toggleCheckbox: (checked: boolean, checkboxValue: string | number) => void;
 }
 export declare const checkboxGroupInjectionKey: import("vue").InjectionKey<CheckboxGroupInjection>;
-declare const checkboxGroupProps: {
+export declare const checkboxGroupProps: {
     readonly min: NumberConstructor;
     readonly max: NumberConstructor;
     readonly size: PropType<"small" | "medium" | "large">;
@@ -24,13 +24,15 @@ declare const checkboxGroupProps: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
     };
-    readonly 'onUpdate:value': PropType<MaybeArray<(value: Array<string | number>) => void>>;
-    readonly onUpdateValue: PropType<MaybeArray<(value: Array<string | number>) => void>>;
-    readonly onChange: {
-        readonly type: PropType<MaybeArray<(value: Array<string | number>) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly 'onUpdate:value': PropType<MaybeArray<(value: Array<string | number>, meta: {
+        actionType: 'check' | 'uncheck';
+        value: string | number;
+    }) => void>>;
+    readonly onUpdateValue: PropType<MaybeArray<(value: Array<string | number>, meta: {
+        actionType: 'check' | 'uncheck';
+        value: string | number;
+    }) => void>>;
+    readonly onChange: PropType<MaybeArray<(value: Array<string | number>) => void> | undefined>;
 };
 export declare type CheckboxGroupProps = ExtractPublicPropTypes<typeof checkboxGroupProps>;
 declare const _default: import("vue").DefineComponent<{
@@ -46,13 +48,15 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
     };
-    readonly 'onUpdate:value': PropType<MaybeArray<(value: (string | number)[]) => void>>;
-    readonly onUpdateValue: PropType<MaybeArray<(value: (string | number)[]) => void>>;
-    readonly onChange: {
-        readonly type: PropType<MaybeArray<(value: (string | number)[]) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly 'onUpdate:value': PropType<MaybeArray<(value: (string | number)[], meta: {
+        actionType: "check" | "uncheck";
+        value: string | number;
+    }) => void>>;
+    readonly onUpdateValue: PropType<MaybeArray<(value: (string | number)[], meta: {
+        actionType: "check" | "uncheck";
+        value: string | number;
+    }) => void>>;
+    readonly onChange: PropType<MaybeArray<(value: (string | number)[]) => void> | undefined>;
 }, {
     mergedClsPrefix: ComputedRef<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
@@ -68,16 +72,17 @@ declare const _default: import("vue").DefineComponent<{
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
     };
-    readonly 'onUpdate:value': PropType<MaybeArray<(value: (string | number)[]) => void>>;
-    readonly onUpdateValue: PropType<MaybeArray<(value: (string | number)[]) => void>>;
-    readonly onChange: {
-        readonly type: PropType<MaybeArray<(value: (string | number)[]) => void> | undefined>;
-        readonly validator: () => boolean;
-        readonly default: undefined;
-    };
+    readonly 'onUpdate:value': PropType<MaybeArray<(value: (string | number)[], meta: {
+        actionType: "check" | "uncheck";
+        value: string | number;
+    }) => void>>;
+    readonly onUpdateValue: PropType<MaybeArray<(value: (string | number)[], meta: {
+        actionType: "check" | "uncheck";
+        value: string | number;
+    }) => void>>;
+    readonly onChange: PropType<MaybeArray<(value: (string | number)[]) => void> | undefined>;
 }>>, {
     readonly disabled: boolean | undefined;
-    readonly onChange: MaybeArray<(value: (string | number)[]) => void> | undefined;
     readonly defaultValue: (string | number)[] | null;
 }>;
 export default _default;

package/lib/checkbox/src/CheckboxGroup.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.checkboxGroupInjectionKey = void 0;
+exports.checkboxGroupProps = exports.checkboxGroupInjectionKey = void 0;
 const vue_1 = require("vue");
 const vooks_1 = require("vooks");
 const _mixins_1 = require("../../_mixins");
 const _utils_1 = require("../../_utils");
 exports.checkboxGroupInjectionKey = (0, _utils_1.createInjectionKey)('n-checkbox-group');
-const checkboxGroupProps = {
+exports.checkboxGroupProps = {
     min: Number,
     max: Number,
     size: String,
@@ -22,21 +22,19 @@ const checkboxGroupProps = {
     'onUpdate:value': [Function, Array],
     onUpdateValue: [Function, Array],
     // deprecated
-    onChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                (0, _utils_1.warn)('checkbox-group', '`on-change` is deprecated, please use `on-update:value` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    }
+    onChange: [Function, Array]
 };
 exports.default = (0, vue_1.defineComponent)({
     name: 'CheckboxGroup',
-    props: checkboxGroupProps,
+    props: exports.checkboxGroupProps,
     setup(props) {
+        if (process.env.NODE_ENV !== 'production') {
+            (0, vue_1.watchEffect)(() => {
+                if (props.onChange !== undefined) {
+                    (0, _utils_1.warnOnce)('checkbox-group', '`on-change` is deprecated, please use `on-update:value` instead.');
+                }
+            });
+        }
         const { mergedClsPrefixRef } = (0, _mixins_1.useConfig)(props);
         const formItem = (0, _mixins_1.useFormItem)(props);
         const { mergedSizeRef, mergedDisabledRef } = formItem;
@@ -62,10 +60,18 @@ exports.default = (0, vue_1.defineComponent)({
                 if (checked) {
                     if (!~index) {
                         groupValue.push(checkboxValue);
-                        if (onUpdateValue)
-                            (0, _utils_1.call)(onUpdateValue, groupValue);
-                        if (_onUpdateValue)
-                            (0, _utils_1.call)(_onUpdateValue, groupValue);
+                        if (onUpdateValue) {
+                            (0, _utils_1.call)(onUpdateValue, groupValue, {
+                                actionType: 'check',
+                                value: checkboxValue
+                            });
+                        }
+                        if (_onUpdateValue) {
+                            (0, _utils_1.call)(_onUpdateValue, groupValue, {
+                                actionType: 'check',
+                                value: checkboxValue
+                            });
+                        }
                         nTriggerFormInput();
                         nTriggerFormChange();
                         uncontrolledValueRef.value = groupValue;
@@ -77,10 +83,18 @@ exports.default = (0, vue_1.defineComponent)({
                 else {
                     if (~index) {
                         groupValue.splice(index, 1);
-                        if (onUpdateValue)
-                            (0, _utils_1.call)(onUpdateValue, groupValue);
-                        if (_onUpdateValue)
-                            (0, _utils_1.call)(_onUpdateValue, groupValue);
+                        if (onUpdateValue) {
+                            (0, _utils_1.call)(onUpdateValue, groupValue, {
+                                actionType: 'uncheck',
+                                value: checkboxValue
+                            });
+                        }
+                        if (_onUpdateValue) {
+                            (0, _utils_1.call)(_onUpdateValue, groupValue, {
+                                actionType: 'uncheck',
+                                value: checkboxValue
+                            });
+                        }
                         if (onChange)
                             (0, _utils_1.call)(onChange, groupValue); // deprecated
                         uncontrolledValueRef.value = groupValue;
@@ -91,10 +105,18 @@ exports.default = (0, vue_1.defineComponent)({
             }
             else {
                 if (checked) {
-                    if (onUpdateValue)
-                        (0, _utils_1.call)(onUpdateValue, [checkboxValue]);
-                    if (_onUpdateValue)
-                        (0, _utils_1.call)(_onUpdateValue, [checkboxValue]);
+                    if (onUpdateValue) {
+                        (0, _utils_1.call)(onUpdateValue, [checkboxValue], {
+                            actionType: 'check',
+                            value: checkboxValue
+                        });
+                    }
+                    if (_onUpdateValue) {
+                        (0, _utils_1.call)(_onUpdateValue, [checkboxValue], {
+                            actionType: 'check',
+                            value: checkboxValue
+                        });
+                    }
                     if (onChange)
                         (0, _utils_1.call)(onChange, [checkboxValue]); // deprecated
                     uncontrolledValueRef.value = [checkboxValue];
@@ -102,10 +124,18 @@ exports.default = (0, vue_1.defineComponent)({
                     nTriggerFormChange();
                 }
                 else {
-                    if (onUpdateValue)
-                        (0, _utils_1.call)(onUpdateValue, []);
-                    if (_onUpdateValue)
-                        (0, _utils_1.call)(_onUpdateValue, []);
+                    if (onUpdateValue) {
+                        (0, _utils_1.call)(onUpdateValue, [], {
+                            actionType: 'uncheck',
+                            value: checkboxValue
+                        });
+                    }
+                    if (_onUpdateValue) {
+                        (0, _utils_1.call)(_onUpdateValue, [], {
+                            actionType: 'uncheck',
+                            value: checkboxValue
+                        });
+                    }
                     if (onChange)
                         (0, _utils_1.call)(onChange, []); // deprecated
                     uncontrolledValueRef.value = [];

package/lib/checkbox/src/styles/index.cssr.js

@@ -92,6 +92,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('checkbox', `
  flex-shrink: 0;
  flex-grow: 0;
  user-select: none;
+ -webkit-user-select: none;
  `), (0, cssr_1.cB)('checkbox-box', `
  position: absolute;
  left: 0;
@@ -142,6 +143,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('checkbox', `
  color: var(--n-text-color);
  transition: color .3s var(--n-bezier);
  user-select: none;
+ -webkit-user-select: none;
  padding: var(--n-label-padding);
  `, [(0, cssr_1.c)('&:empty', {
   display: 'none'

package/lib/code/index.d.ts

@@ -1,2 +1,2 @@
-export { default as NCode } from './src/Code';
+export { default as NCode, codeProps } from './src/Code';
 export type { CodeProps } from './src/Code';

package/lib/code/index.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NCode = void 0;
+exports.codeProps = exports.NCode = void 0;
 var Code_1 = require("./src/Code");
 Object.defineProperty(exports, "NCode", { enumerable: true, get: function () { return __importDefault(Code_1).default; } });
+Object.defineProperty(exports, "codeProps", { enumerable: true, get: function () { return Code_1.codeProps; } });

package/lib/code/src/Code.d.ts

@@ -1,7 +1,7 @@
 import { PropType } from 'vue';
 import { Hljs } from '../../_mixins';
 import type { ExtractPublicPropTypes } from '../../_utils';
-declare const codeProps: {
+export declare const codeProps: {
     language: StringConstructor;
     code: {
         type: StringConstructor;
@@ -15,6 +15,7 @@ declare const codeProps: {
     uri: BooleanConstructor;
     inline: BooleanConstructor;
     wordWrap: BooleanConstructor;
+    showLineNumbers: BooleanConstructor;
     internalFontSize: NumberConstructor;
     internalNoHighlight: BooleanConstructor;
     theme: PropType<import("../../_mixins").Theme<"Code", {
@@ -30,6 +31,7 @@ declare const codeProps: {
         'hue-5-2': string;
         'hue-6': string;
         'hue-6-2': string;
+        lineNumberTextColor: string;
     }, any>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Code", {
         textColor: string;
@@ -44,6 +46,7 @@ declare const codeProps: {
         'hue-5-2': string;
         'hue-6': string;
         'hue-6-2': string;
+        lineNumberTextColor: string;
     }, any>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Code", {
         textColor: string;
@@ -58,6 +61,7 @@ declare const codeProps: {
         'hue-5-2': string;
         'hue-6': string;
         'hue-6-2': string;
+        lineNumberTextColor: string;
     }, any>>>;
 };
 export declare type CodeProps = ExtractPublicPropTypes<typeof codeProps>;
@@ -75,6 +79,7 @@ declare const _default: import("vue").DefineComponent<{
     uri: BooleanConstructor;
     inline: BooleanConstructor;
     wordWrap: BooleanConstructor;
+    showLineNumbers: BooleanConstructor;
     internalFontSize: NumberConstructor;
     internalNoHighlight: BooleanConstructor;
     theme: PropType<import("../../_mixins").Theme<"Code", {
@@ -90,6 +95,7 @@ declare const _default: import("vue").DefineComponent<{
         'hue-5-2': string;
         'hue-6': string;
         'hue-6-2': string;
+        lineNumberTextColor: string;
     }, any>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Code", {
         textColor: string;
@@ -104,6 +110,7 @@ declare const _default: import("vue").DefineComponent<{
         'hue-5-2': string;
         'hue-6': string;
         'hue-6-2': string;
+        lineNumberTextColor: string;
     }, any>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Code", {
         textColor: string;
@@ -118,10 +125,13 @@ declare const _default: import("vue").DefineComponent<{
         'hue-5-2': string;
         'hue-6': string;
         'hue-6-2': string;
+        lineNumberTextColor: string;
     }, any>>>;
 }, {
     mergedClsPrefix: import("vue").ComputedRef<string>;
     codeRef: import("vue").Ref<HTMLElement | null>;
+    mergedShowLineNumbers: import("vue").ComputedRef<boolean>;
+    lineNumbers: import("vue").ComputedRef<string>;
     cssVars: import("vue").ComputedRef<{
         '--n-font-size': string;
         '--n-font-family': string;
@@ -137,6 +147,7 @@ declare const _default: import("vue").DefineComponent<{
         '--n-hue-5-2': string;
         '--n-hue-6': string;
         '--n-hue-6-2': string;
+        '--n-line-number-text-color': string;
     }> | undefined;
     themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;
@@ -154,6 +165,7 @@ declare const _default: import("vue").DefineComponent<{
     uri: BooleanConstructor;
     inline: BooleanConstructor;
     wordWrap: BooleanConstructor;
+    showLineNumbers: BooleanConstructor;
     internalFontSize: NumberConstructor;
     internalNoHighlight: BooleanConstructor;
     theme: PropType<import("../../_mixins").Theme<"Code", {
@@ -169,6 +181,7 @@ declare const _default: import("vue").DefineComponent<{
         'hue-5-2': string;
         'hue-6': string;
         'hue-6-2': string;
+        lineNumberTextColor: string;
     }, any>>;
     themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Code", {
         textColor: string;
@@ -183,6 +196,7 @@ declare const _default: import("vue").DefineComponent<{
         'hue-5-2': string;
         'hue-6': string;
         'hue-6-2': string;
+        lineNumberTextColor: string;
     }, any>>>;
     builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Code", {
         textColor: string;
@@ -197,6 +211,7 @@ declare const _default: import("vue").DefineComponent<{
         'hue-5-2': string;
         'hue-6': string;
         'hue-6-2': string;
+        lineNumberTextColor: string;
     }, any>>>;
 }>>, {
     trim: boolean;
@@ -204,6 +219,7 @@ declare const _default: import("vue").DefineComponent<{
     wordWrap: boolean;
     code: string;
     uri: boolean;
+    showLineNumbers: boolean;
     internalNoHighlight: boolean;
 }>;
 export default _default;

package/lib/code/src/Code.js

@@ -3,22 +3,23 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.codeProps = void 0;
 const vue_1 = require("vue");
 const _mixins_1 = require("../../_mixins");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-const codeProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { language: String, code: {
+exports.codeProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { language: String, code: {
         type: String,
         default: ''
     }, trim: {
         type: Boolean,
         default: true
-    }, hljs: Object, uri: Boolean, inline: Boolean, wordWrap: Boolean, 
+    }, hljs: Object, uri: Boolean, inline: Boolean, wordWrap: Boolean, showLineNumbers: Boolean, 
     // In n-log, we only need to mount code's style for highlight
     internalFontSize: Number, internalNoHighlight: Boolean });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Code',
-    props: codeProps,
+    props: exports.codeProps,
     setup(props, { slots }) {
         const { internalNoHighlight } = props;
         const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)();
@@ -36,6 +37,11 @@ exports.default = (0, vue_1.defineComponent)({
                 language
             }).value;
         };
+        const mergedShowLineNumbersRef = (0, vue_1.computed)(() => {
+            if (props.inline || props.wordWrap)
+                return false;
+            return props.showLineNumbers;
+        });
         const setCode = () => {
             if (slots.default)
                 return;
@@ -49,7 +55,18 @@ exports.default = (0, vue_1.defineComponent)({
             if (language) {
                 const html = createCodeHtml(language, code, props.trim);
                 if (html !== null) {
-                    codeEl.innerHTML = props.inline ? html : `<pre>${html}</pre>`;
+                    if (props.inline) {
+                        codeEl.innerHTML = html;
+                    }
+                    else {
+                        const prevPreEl = codeEl.querySelector('.__code__');
+                        if (prevPreEl)
+                            codeEl.removeChild(prevPreEl);
+                        const preEl = document.createElement('pre');
+                        preEl.className = '__code__';
+                        preEl.innerHTML = html;
+                        codeEl.appendChild(preEl);
+                    }
                     return;
                 }
             }
@@ -57,15 +74,16 @@ exports.default = (0, vue_1.defineComponent)({
                 codeEl.textContent = code;
                 return;
             }
-            const maybePreEl = codeEl.children[0];
-            if (maybePreEl && maybePreEl.tagName === 'PRE') {
+            const maybePreEl = codeEl.querySelector('.__code__');
+            if (maybePreEl) {
                 maybePreEl.textContent = code;
             }
             else {
-                const warp = document.createElement('pre');
-                warp.textContent = code;
+                const wrap = document.createElement('pre');
+                wrap.className = '__code__';
+                wrap.textContent = code;
                 codeEl.innerHTML = '';
-                codeEl.appendChild(warp);
+                codeEl.appendChild(wrap);
             }
         };
         (0, vue_1.onMounted)(setCode);
@@ -75,7 +93,7 @@ exports.default = (0, vue_1.defineComponent)({
             (0, vue_1.watch)(hljsRef, setCode);
         const themeRef = (0, _mixins_1.useTheme)('Code', '-code', index_cssr_1.default, styles_1.codeLight, props, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.computed)(() => {
-            const { common: { cubicBezierEaseInOut, fontFamilyMono }, self: { textColor, fontSize, fontWeightStrong, 
+            const { common: { cubicBezierEaseInOut, fontFamilyMono }, self: { textColor, fontSize, fontWeightStrong, lineNumberTextColor, 
             // extracted from hljs atom-one-light.scss
             'mono-3': $1, 'hue-1': $2, 'hue-2': $3, 'hue-3': $4, 'hue-4': $5, 'hue-5': $6, 'hue-5-2': $7, 'hue-6': $8, 'hue-6-2': $9 } } = themeRef.value;
             const { internalFontSize } = props;
@@ -93,7 +111,8 @@ exports.default = (0, vue_1.defineComponent)({
                 '--n-hue-5': $6,
                 '--n-hue-5-2': $7,
                 '--n-hue-6': $8,
-                '--n-hue-6-2': $9
+                '--n-hue-6-2': $9,
+                '--n-line-number-text-color': lineNumberTextColor
             };
         });
         const themeClassHandle = inlineThemeDisabled
@@ -104,18 +123,41 @@ exports.default = (0, vue_1.defineComponent)({
         return {
             mergedClsPrefix: mergedClsPrefixRef,
             codeRef,
+            mergedShowLineNumbers: mergedShowLineNumbersRef,
+            lineNumbers: (0, vue_1.computed)(() => {
+                let number = 1;
+                const numbers = [];
+                let lastIsLineWrap = false;
+                for (const char of props.code) {
+                    if (char === '\n') {
+                        lastIsLineWrap = true;
+                        numbers.push(number++);
+                    }
+                    else {
+                        lastIsLineWrap = false;
+                    }
+                }
+                if (!lastIsLineWrap) {
+                    numbers.push(number++);
+                }
+                return numbers.join('\n');
+            }),
             cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
             themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
             onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
         };
     },
     render() {
-        const { mergedClsPrefix, wordWrap, onRender } = this;
+        var _a, _b;
+        const { mergedClsPrefix, wordWrap, mergedShowLineNumbers, onRender } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         return ((0, vue_1.h)("code", { class: [
                 `${mergedClsPrefix}-code`,
                 this.themeClass,
-                wordWrap && `${mergedClsPrefix}-code--word-wrap`
-            ], style: this.cssVars, ref: "codeRef" }, this.$slots));
+                wordWrap && `${mergedClsPrefix}-code--word-wrap`,
+                mergedShowLineNumbers && `${mergedClsPrefix}-code--show-line-numbers`
+            ], style: this.cssVars, ref: "codeRef" },
+            mergedShowLineNumbers ? ((0, vue_1.h)("pre", { class: `${mergedClsPrefix}-code__line-numbers` }, this.lineNumbers)) : null, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 :
+            _b.call(_a)));
     }
 });