naive-ui 2.38.2 → 2.40.0

package/lib/mention/src/Mention.js

@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.mentionProps = void 0;
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
 const vue_1 = require("vue");
 const treemate_1 = require("treemate");
 const vueuc_1 = require("vueuc");
@@ -39,7 +38,7 @@ exports.mentionProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props)
         type: String,
         validator: (separator) => {
             if (separator.length !== 1) {
-                (0, _utils_1.warn)('mention', "`separator`'s length must be 1.");
+                (0, _utils_1.warn)('mention', '`separator`\'s length must be 1.');
                 return false;
             }
             return true;
@@ -73,6 +72,7 @@ exports.default = (0, vue_1.defineComponent)({
         const inputInstRef = (0, vue_1.ref)(null);
         const cursorRef = (0, vue_1.ref)(null);
         const followerRef = (0, vue_1.ref)(null);
+        const wrapperElRef = (0, vue_1.ref)(null);
         const partialPatternRef = (0, vue_1.ref)('');
         let cachedPrefix = null;
         // cached pattern end is for partial pattern
@@ -82,7 +82,7 @@ exports.default = (0, vue_1.defineComponent)({
         let cachedPartialPatternEnd = null;
         const filteredOptionsRef = (0, vue_1.computed)(() => {
             const { value: pattern } = partialPatternRef;
-            return props.options.filter((option) => props.filter(pattern, option));
+            return props.options.filter(option => props.filter(pattern, option));
         });
         const treeMateRef = (0, vue_1.computed)(() => {
             return (0, treemate_1.createTreeMate)(filteredOptionsRef.value, {
@@ -179,9 +179,11 @@ exports.default = (0, vue_1.defineComponent)({
                 return;
             const inputEl = getInputEl();
             const cursorPos = (0, utils_1.getRelativePosition)(inputEl);
-            cursorPos.left += inputEl.parentElement.offsetLeft;
-            cursorAnchor.style.left = `${cursorPos.left}px`;
-            cursorAnchor.style.top = `${cursorPos.top + cursorPos.height}px`;
+            const inputRect = inputEl.getBoundingClientRect();
+            const wrapperRect = wrapperElRef.value.getBoundingClientRect();
+            cursorAnchor.style.left = `${cursorPos.left + inputRect.left - wrapperRect.left}px`;
+            cursorAnchor.style.top = `${cursorPos.top + inputRect.top - wrapperRect.top}px`;
+            cursorAnchor.style.height = `${cursorPos.height}px`;
         }
         function syncPosition() {
             var _a;
@@ -212,9 +214,9 @@ exports.default = (0, vue_1.defineComponent)({
                     return;
                 syncAfterCursorMove();
             }
-            else if (e.key === 'ArrowUp' ||
-                e.key === 'ArrowDown' ||
-                e.key === 'Enter') {
+            else if (e.key === 'ArrowUp'
+                || e.key === 'ArrowDown'
+                || e.key === 'Enter') {
                 if ((_b = inputInstRef.value) === null || _b === void 0 ? void 0 : _b.isCompositing)
                     return;
                 const { value: selectMenuInst } = selectMenuInstRef;
@@ -268,9 +270,9 @@ exports.default = (0, vue_1.defineComponent)({
         }
         function handleSelect(tmNode) {
             var _a;
-            if (cachedPrefix === null ||
-                cachedPartialPatternStart === null ||
-                cachedPartialPatternEnd === null) {
+            if (cachedPrefix === null
+                || cachedPartialPatternStart === null
+                || cachedPartialPatternEnd === null) {
                 if (process.env.NODE_ENV !== 'production') {
                     (0, _utils_1.warn)('mention', 'Cache works unexpectly, this is probably a bug. Please create an issue.');
                 }
@@ -283,13 +285,13 @@ exports.default = (0, vue_1.defineComponent)({
             const nextEndPart = inputValue.slice(cachedPartialPatternEnd);
             const alreadySeparated = nextEndPart.startsWith(separator);
             const nextMiddlePart = `${value}${alreadySeparated ? '' : separator}`;
-            doUpdateValue(inputValue.slice(0, cachedPartialPatternStart) +
-                nextMiddlePart +
-                nextEndPart);
+            doUpdateValue(inputValue.slice(0, cachedPartialPatternStart)
+                + nextMiddlePart
+                + nextEndPart);
             (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, tmNode.rawNode, cachedPrefix);
-            const nextSelectionEnd = cachedPartialPatternStart +
-                nextMiddlePart.length +
-                (alreadySeparated ? 1 : 0);
+            const nextSelectionEnd = cachedPartialPatternStart
+                + nextMiddlePart.length
+                + (alreadySeparated ? 1 : 0);
             void (0, vue_1.nextTick)().then(() => {
                 // input value is updated
                 inputEl.selectionStart = nextSelectionEnd;
@@ -314,6 +316,7 @@ exports.default = (0, vue_1.defineComponent)({
             inputInstRef,
             cursorRef,
             followerRef,
+            wrapperElRef,
             showMenu: showMenuRef,
             adjustedTo: (0, _utils_1.useAdjustedTo)(props),
             isMounted: (0, vooks_1.useIsMounted)(),
@@ -333,7 +336,7 @@ exports.default = (0, vue_1.defineComponent)({
     },
     render() {
         const { mergedTheme, mergedClsPrefix, $slots } = this;
-        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-mention` },
+        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-mention`, ref: "wrapperElRef" },
             (0, vue_1.h)(input_1.NInput, { status: this.mergedStatus, themeOverrides: mergedTheme.peerOverrides.Input, theme: mergedTheme.peers.Input, size: this.mergedSize, autosize: this.autosize, type: this.type, ref: "inputInstRef", placeholder: this.placeholder, onMousedown: this.handleInputMouseDown, onUpdateValue: this.handleInputUpdateValue, onKeydown: this.handleInputKeyDown, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, bordered: this.mergedBordered, disabled: this.disabled, value: this.mergedValue }),
             (0, vue_1.h)(vueuc_1.VBinder, null, {
                 default: () => [
@@ -341,12 +344,10 @@ exports.default = (0, vue_1.defineComponent)({
                         default: () => {
                             const style = {
                                 position: 'absolute',
-                                width: 0,
-                                height: 0
+                                width: 0
                             };
                             if (process.env.NODE_ENV !== 'production' && this.internalDebug) {
                                 style.width = '1px';
-                                style.height = '1px';
                                 style.background = 'red';
                             }
                             return (0, vue_1.h)("div", { style: style, ref: "cursorRef" });

package/lib/mention/src/utils.js

@@ -6,7 +6,9 @@
  * Here I modified it to make it works when input is scrolled.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setElementPositionBasedOnCaret = exports.getRelativePosition = exports.getAbsolutePosition = void 0;
+exports.getAbsolutePosition = getAbsolutePosition;
+exports.getRelativePosition = getRelativePosition;
+exports.setElementPositionBasedOnCaret = setElementPositionBasedOnCaret;
 const _utils_1 = require("../../_utils");
 /**
  * Returns the Absolute (relative to the inner window size) position of the caret in the given element.
@@ -21,7 +23,6 @@ function getAbsolutePosition(element) {
         height: caretRelPost.height
     };
 }
-exports.getAbsolutePosition = getAbsolutePosition;
 /**
  * Returns the relative position of the caret in the given element.
  * @param element Input (has to be type='text') or Text Area.
@@ -105,12 +106,12 @@ function getRelativePosition(element, options = {
         if (isInput && prop === 'lineHeight') {
             // Special case for <input>s because text is rendered centered and line height may be != height
             if (computed.boxSizing === 'border-box') {
-                const height = parseInt(computed.height);
-                const outerHeight = parseInt(computed.paddingTop) +
-                    parseInt(computed.paddingBottom) +
-                    parseInt(computed.borderTopWidth) +
-                    parseInt(computed.borderBottomWidth);
-                const targetHeight = outerHeight + parseInt(computed.lineHeight);
+                const height = Number.parseInt(computed.height);
+                const outerHeight = Number.parseInt(computed.paddingTop)
+                    + Number.parseInt(computed.paddingBottom)
+                    + Number.parseInt(computed.borderTopWidth)
+                    + Number.parseInt(computed.borderBottomWidth);
+                const targetHeight = outerHeight + Number.parseInt(computed.lineHeight);
                 if (height > targetHeight) {
                     style.lineHeight = `${height - outerHeight}px`;
                 }
@@ -131,7 +132,7 @@ function getRelativePosition(element, options = {
     });
     if (isFirefox) {
         // Firefox lies about the overflow property for textareas: https://bugzilla.mozilla.org/show_bug.cgi?id=984275
-        if (element.scrollHeight > parseInt(computed.height)) {
+        if (element.scrollHeight > Number.parseInt(computed.height)) {
             style.overflowY = 'scroll';
         }
     }
@@ -142,7 +143,7 @@ function getRelativePosition(element, options = {
     // The second special handling for input type="text" vs textarea:
     // spaces need to be replaced with non-breaking spaces - http://stackoverflow.com/a/13402035/1269037
     if (isInput && div.textContent) {
-        div.textContent = div.textContent.replace(/\s/g, '\u00a0');
+        div.textContent = div.textContent.replace(/\s/g, '\u00A0');
     }
     const span = document.createElement('span');
     // Wrapping must be replicated *exactly*, including when a long word gets
@@ -156,12 +157,12 @@ function getRelativePosition(element, options = {
     span.style.top = `${-element.scrollTop}px`;
     div.appendChild(span);
     const relativePosition = {
-        top: span.offsetTop + parseInt(computed.borderTopWidth),
-        left: span.offsetLeft + parseInt(computed.borderLeftWidth),
+        top: span.offsetTop + Number.parseInt(computed.borderTopWidth),
+        left: span.offsetLeft + Number.parseInt(computed.borderLeftWidth),
         absolute: false,
         // We don't use line-height since it may be too large for position. Eg. 34px
         // for input
-        height: parseInt(computed.fontSize) * 1.5
+        height: Number.parseInt(computed.fontSize) * 1.5
     };
     if (debug) {
         span.style.backgroundColor = '#aaa';
@@ -169,13 +170,12 @@ function getRelativePosition(element, options = {
     else {
         document.body.removeChild(div);
     }
-    if (relativePosition.left >= element.clientWidth &&
-        options.checkWidthOverflow) {
+    if (relativePosition.left >= element.clientWidth
+        && options.checkWidthOverflow) {
         relativePosition.left = element.clientWidth;
     }
     return relativePosition;
 }
-exports.getRelativePosition = getRelativePosition;
 /**
  * sets the top and left css style of the element based on the absolute position of the caretElements caret,
  * @param offset offsets the position.
@@ -185,15 +185,15 @@ exports.getRelativePosition = getRelativePosition;
 function setElementPositionBasedOnCaret(element, caretElement, offset = { top: 0, left: 0 }, margin = 2, detectBoundary = true, returnOnly = false) {
     const pos = getAbsolutePosition(caretElement);
     if (detectBoundary) {
-        pos.left =
-            pos.left + (element.clientWidth + margin) + offset.left >
-                window.scrollX + window.innerWidth
-                ? (pos.left =
-                    window.scrollX + window.innerWidth - (element.clientWidth + margin))
+        pos.left
+            = pos.left + (element.clientWidth + margin) + offset.left
+                > window.scrollX + window.innerWidth
+                ? (pos.left
+                    = window.scrollX + window.innerWidth - (element.clientWidth + margin))
                 : (pos.left += offset.left);
-        pos.top =
-            pos.top + (element.clientWidth + margin) + offset.top >
-                window.scrollY + window.innerHeight
+        pos.top
+            = pos.top + (element.clientWidth + margin) + offset.top
+                > window.scrollY + window.innerHeight
                 ? (pos.top -= element.clientWidth + margin)
                 : (pos.top += offset.top);
     }
@@ -207,4 +207,3 @@ function setElementPositionBasedOnCaret(element, caretElement, offset = { top: 0
     }
     return pos;
 }
-exports.setElementPositionBasedOnCaret = setElementPositionBasedOnCaret;

package/lib/mention/styles/light.d.ts

@@ -1,15 +1,17 @@
 import type { ThemeCommonVars } from '../../_styles/common';
-declare const self: (vars: ThemeCommonVars) => {
+declare function self(vars: ThemeCommonVars): {
     menuBoxShadow: string;
 };
 declare const mentionLight: import("../../_mixins").Theme<"Mention", {
     menuBoxShadow: string;
 }, {
     InternalSelectMenu: import("../../_mixins").Theme<"InternalSelectMenu", {
+        optionFontSizeTiny: string;
         optionFontSizeSmall: string;
         optionFontSizeMedium: string;
         optionFontSizeLarge: string;
         optionFontSizeHuge: string;
+        optionHeightTiny: string;
         optionHeightSmall: string;
         optionHeightMedium: string;
         optionHeightLarge: string;
@@ -30,10 +32,12 @@ declare const mentionLight: import("../../_mixins").Theme<"Mention", {
         actionTextColor: string;
         loadingColor: string;
         height: string;
+        paddingTiny: string;
         paddingSmall: string;
         paddingMedium: string;
         paddingLarge: string;
         paddingHuge: string;
+        optionPaddingTiny: string;
         optionPaddingSmall: string;
         optionPaddingMedium: string;
         optionPaddingLarge: string;
@@ -46,11 +50,14 @@ declare const mentionLight: import("../../_mixins").Theme<"Mention", {
             borderRadius: string;
             color: string;
             colorHover: string;
-            railInsetHorizontal: string;
-            railInsetVertical: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
             railColor: string;
         }, any>;
         Empty: import("../../_mixins").Theme<"Empty", {
+            fontSizeTiny: string;
             fontSizeSmall: string;
             fontSizeMedium: string;
             fontSizeLarge: string;
@@ -58,6 +65,7 @@ declare const mentionLight: import("../../_mixins").Theme<"Mention", {
             textColor: string;
             iconColor: string;
             extraTextColor: string;
+            iconSizeTiny: string;
             iconSizeSmall: string;
             iconSizeMedium: string;
             iconSizeLarge: string;

package/lib/mention/styles/light.js

@@ -4,12 +4,12 @@ const common_1 = require("../../_styles/common");
 const _mixins_1 = require("../../_mixins");
 const styles_1 = require("../../_internal/select-menu/styles");
 const styles_2 = require("../../input/styles");
-const self = (vars) => {
+function self(vars) {
     const { boxShadow2 } = vars;
     return {
         menuBoxShadow: boxShadow2
     };
-};
+}
 const mentionLight = (0, _mixins_1.createTheme)({
     name: 'Mention',
     common: common_1.commonLight,

package/lib/menu/src/Menu.d.ts

@@ -1,9 +1,9 @@
-import { type PropType, type ExtractPropTypes, type VNodeChild } from 'vue';
+import { type ExtractPropTypes, type PropType, type VNodeChild } from 'vue';
 import { type Key } from 'treemate';
 import { type FollowerPlacement } from 'vueuc';
 import type { DropdownProps } from '../../dropdown';
 import type { MaybeArray } from '../../_utils';
-import type { MenuOption, MenuGroupOption, MenuIgnoredOption, MenuMixedOption, OnUpdateValue, OnUpdateKeys, MenuNodeProps } from './interface';
+import type { MenuGroupOption, MenuIgnoredOption, MenuMixedOption, MenuNodeProps, MenuOption, OnUpdateKeys, OnUpdateValue } from './interface';
 export declare const menuProps: {
     readonly options: {
         readonly type: PropType<MenuMixedOption[]>;
@@ -55,11 +55,11 @@ export declare const menuProps: {
         readonly default: null;
     };
     readonly mode: {
-        readonly type: PropType<"horizontal" | "vertical">;
+        readonly type: PropType<"vertical" | "horizontal">;
         readonly default: "vertical";
     };
     readonly watchProps: {
-        readonly type: PropType<("defaultValue" | "defaultExpandedKeys")[]>;
+        readonly type: PropType<Array<"defaultExpandedKeys" | "defaultValue">>;
         readonly default: undefined;
     };
     readonly disabled: BooleanConstructor;
@@ -84,7 +84,7 @@ export declare const menuProps: {
         readonly default: "bottom";
     };
     readonly responsive: BooleanConstructor;
-    readonly items: PropType<(MenuOption | MenuGroupOption)[]>;
+    readonly items: PropType<Array<MenuOption | MenuGroupOption>>;
     readonly onOpenNamesChange: PropType<MaybeArray<OnUpdateKeys>>;
     readonly onSelect: PropType<MaybeArray<OnUpdateValue>>;
     readonly onExpandedNamesChange: PropType<MaybeArray<OnUpdateKeys>>;
@@ -666,11 +666,11 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: null;
     };
     readonly mode: {
-        readonly type: PropType<"horizontal" | "vertical">;
+        readonly type: PropType<"vertical" | "horizontal">;
         readonly default: "vertical";
     };
     readonly watchProps: {
-        readonly type: PropType<("defaultValue" | "defaultExpandedKeys")[]>;
+        readonly type: PropType<Array<"defaultExpandedKeys" | "defaultValue">>;
         readonly default: undefined;
     };
     readonly disabled: BooleanConstructor;
@@ -695,7 +695,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "bottom";
     };
     readonly responsive: BooleanConstructor;
-    readonly items: PropType<(MenuOption | MenuGroupOption)[]>;
+    readonly items: PropType<Array<MenuOption | MenuGroupOption>>;
     readonly onOpenNamesChange: PropType<MaybeArray<OnUpdateKeys>>;
     readonly onSelect: PropType<MaybeArray<OnUpdateValue>>;
     readonly onExpandedNamesChange: PropType<MaybeArray<OnUpdateKeys>>;
@@ -1233,111 +1233,7 @@ declare const _default: import("vue").DefineComponent<{
     activePath: import("vue").ComputedRef<Key[]>;
     tmNodes: import("vue").ComputedRef<import("treemate").TreeNode<MenuOption, MenuGroupOption, MenuIgnoredOption>[]>;
     mergedTheme: import("vue").ComputedRef<{
-        common: {
-            baseColor: string;
-            primaryColor: string;
-            primaryColorHover: string;
-            primaryColorPressed: string;
-            primaryColorSuppl: string;
-            infoColor: string;
-            infoColorHover: string;
-            infoColorPressed: string;
-            infoColorSuppl: string;
-            successColor: string;
-            successColorHover: string;
-            successColorPressed: string;
-            successColorSuppl: string;
-            warningColor: string;
-            warningColorHover: string;
-            warningColorPressed: string;
-            warningColorSuppl: string;
-            errorColor: string;
-            errorColorHover: string;
-            errorColorPressed: string;
-            errorColorSuppl: string;
-            textColorBase: string;
-            textColor1: string;
-            textColor2: string;
-            textColor3: string;
-            textColorDisabled: string;
-            placeholderColor: string;
-            placeholderColorDisabled: string;
-            iconColor: string;
-            iconColorHover: string;
-            iconColorPressed: string;
-            iconColorDisabled: string;
-            opacity1: string;
-            opacity2: string;
-            opacity3: string;
-            opacity4: string;
-            opacity5: string;
-            dividerColor: string;
-            borderColor: string;
-            closeIconColor: string;
-            closeIconColorHover: string;
-            closeIconColorPressed: string;
-            closeColorHover: string;
-            closeColorPressed: string;
-            clearColor: string;
-            clearColorHover: string;
-            clearColorPressed: string;
-            scrollbarColor: string;
-            scrollbarColorHover: string;
-            scrollbarWidth: string;
-            scrollbarHeight: string;
-            scrollbarBorderRadius: string;
-            progressRailColor: string;
-            railColor: string;
-            popoverColor: string;
-            tableColor: string;
-            cardColor: string;
-            modalColor: string;
-            bodyColor: string;
-            tagColor: string;
-            avatarColor: string;
-            invertedColor: string;
-            inputColor: string;
-            codeColor: string;
-            tabColor: string;
-            actionColor: string;
-            tableHeaderColor: string;
-            hoverColor: string;
-            tableColorHover: string;
-            tableColorStriped: string;
-            pressedColor: string;
-            opacityDisabled: string;
-            inputColorDisabled: string;
-            buttonColor2: string;
-            buttonColor2Hover: string;
-            buttonColor2Pressed: string;
-            boxShadow1: string;
-            boxShadow2: string;
-            boxShadow3: string;
-            fontFamily: string;
-            fontFamilyMono: string;
-            fontWeight: string;
-            fontWeightStrong: string;
-            cubicBezierEaseInOut: string;
-            cubicBezierEaseOut: string;
-            cubicBezierEaseIn: string;
-            borderRadius: string;
-            borderRadiusSmall: string;
-            fontSize: string;
-            fontSizeMini: string;
-            fontSizeTiny: string;
-            fontSizeSmall: string;
-            fontSizeMedium: string;
-            fontSizeLarge: string;
-            fontSizeHuge: string;
-            lineHeight: string;
-            heightMini: string;
-            heightTiny: string;
-            heightSmall: string;
-            heightMedium: string;
-            heightLarge: string;
-            heightHuge: string;
-            name: "common";
-        };
+        common: import("../..").ThemeCommonVars;
         self: {
             itemColorHoverInverted: string;
             itemColorActiveInverted: string;
@@ -1568,7 +1464,7 @@ declare const _default: import("vue").DefineComponent<{
     renderCounter: () => VNodeChild;
     getCounter: () => HTMLElement | null;
     onRender: (() => void) | undefined;
-    showOption: (key?: import("./interface").Key | undefined) => void;
+    showOption: (key?: import("./interface").Key) => void;
     deriveResponsiveState: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ExtractPropTypes<{
     readonly options: {
@@ -1621,11 +1517,11 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: null;
     };
     readonly mode: {
-        readonly type: PropType<"horizontal" | "vertical">;
+        readonly type: PropType<"vertical" | "horizontal">;
         readonly default: "vertical";
     };
     readonly watchProps: {
-        readonly type: PropType<("defaultValue" | "defaultExpandedKeys")[]>;
+        readonly type: PropType<Array<"defaultExpandedKeys" | "defaultValue">>;
         readonly default: undefined;
     };
     readonly disabled: BooleanConstructor;
@@ -1650,7 +1546,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "bottom";
     };
     readonly responsive: BooleanConstructor;
-    readonly items: PropType<(MenuOption | MenuGroupOption)[]>;
+    readonly items: PropType<Array<MenuOption | MenuGroupOption>>;
     readonly onOpenNamesChange: PropType<MaybeArray<OnUpdateKeys>>;
     readonly onSelect: PropType<MaybeArray<OnUpdateValue>>;
     readonly onExpandedNamesChange: PropType<MaybeArray<OnUpdateKeys>>;