naive-ui 2.36.0 → 2.37.0

package/lib/_internal/selection/src/Selection.d.ts

@@ -2,6 +2,7 @@ import { type PropType, type InputHTMLAttributes } from 'vue';
 import type { RenderLabel, RenderLabelImpl } from '../../select-menu/src/interface';
 import type { SelectBaseOption } from '../../../select/src/interface';
 import type { FormValidationStatus } from '../../../form/src/interface';
+import { type PopoverProps } from '../../../popover';
 import type { RenderTag } from './interface';
 export interface InternalSelectionInst {
     isComposing: boolean;
@@ -65,6 +66,7 @@ declare const _default: import("vue").DefineComponent<{
     onFocus: PropType<(e: FocusEvent) => void>;
     onDeleteOption: PropType<(option: SelectBaseOption) => void>;
     maxTagCount: PropType<number | "responsive">;
+    ellipsisTagPopoverProps: PropType<PopoverProps>;
     onClear: PropType<(e: MouseEvent) => void>;
     onPatternInput: PropType<(e: InputEvent) => void>;
     onPatternFocus: PropType<(e: FocusEvent) => void>;
@@ -470,6 +472,8 @@ declare const _default: import("vue").DefineComponent<{
         };
     }>;
     mergedClearable: import("vue").ComputedRef<boolean>;
+    mergedClsPrefix: import("vue").Ref<string>;
+    rtlEnabled: import("vue").Ref<import("../../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
     patternInputFocused: import("vue").Ref<boolean>;
     filterablePlaceholder: import("vue").ComputedRef<import("vue").VNodeChild>;
     label: import("vue").ComputedRef<unknown>;
@@ -533,8 +537,14 @@ declare const _default: import("vue").DefineComponent<{
         '--n-color-disabled': string;
         '--n-font-size': string;
         '--n-height': string;
-        '--n-padding-single': string;
-        '--n-padding-multiple': string;
+        '--n-padding-single-top': string;
+        '--n-padding-multiple-top': string;
+        '--n-padding-single-right': string;
+        '--n-padding-multiple-right': string;
+        '--n-padding-single-left': string;
+        '--n-padding-multiple-left': string;
+        '--n-padding-single-bottom': string;
+        '--n-padding-multiple-bottom': string;
         '--n-placeholder-color': string;
         '--n-placeholder-color-disabled': string;
         '--n-text-color': string;
@@ -620,6 +630,7 @@ declare const _default: import("vue").DefineComponent<{
     onFocus: PropType<(e: FocusEvent) => void>;
     onDeleteOption: PropType<(option: SelectBaseOption) => void>;
     maxTagCount: PropType<number | "responsive">;
+    ellipsisTagPopoverProps: PropType<PopoverProps>;
     onClear: PropType<(e: MouseEvent) => void>;
     onPatternInput: PropType<(e: InputEvent) => void>;
     onPatternFocus: PropType<(e: FocusEvent) => void>;
@@ -849,12 +860,12 @@ declare const _default: import("vue").DefineComponent<{
     loading: boolean;
     bordered: boolean | undefined;
     inlineThemeDisabled: boolean;
+    filterable: boolean;
     labelField: string;
     valueField: string;
     showArrow: boolean;
     selectedOption: SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)> | null;
     selectedOptions: SelectBaseOption<string | number, string | ((option: SelectBaseOption<string | number, string | any>, selected: boolean) => import("vue").VNodeChild)>[] | null;
-    filterable: boolean;
     clearable: boolean;
     focused: boolean;
     ignoreComposition: boolean;

package/lib/_internal/selection/src/Selection.js

@@ -13,6 +13,7 @@ const _utils_1 = require("../../../_utils");
 const suffix_1 = __importDefault(require("../../suffix"));
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
+const seemly_1 = require("seemly");
 exports.default = (0, vue_1.defineComponent)({
     name: 'InternalSelection',
     props: Object.assign(Object.assign({}, _mixins_1.useTheme.props), { clsPrefix: {
@@ -39,8 +40,10 @@ exports.default = (0, vue_1.defineComponent)({
         }, loading: Boolean, autofocus: Boolean, showArrow: {
             type: Boolean,
             default: true
-        }, inputProps: Object, focused: Boolean, renderTag: Function, onKeydown: Function, onClick: Function, onBlur: Function, onFocus: Function, onDeleteOption: Function, maxTagCount: [String, Number], onClear: Function, onPatternInput: Function, onPatternFocus: Function, onPatternBlur: Function, renderLabel: Function, status: String, inlineThemeDisabled: Boolean, ignoreComposition: { type: Boolean, default: true }, onResize: Function }),
+        }, inputProps: Object, focused: Boolean, renderTag: Function, onKeydown: Function, onClick: Function, onBlur: Function, onFocus: Function, onDeleteOption: Function, maxTagCount: [String, Number], ellipsisTagPopoverProps: Object, onClear: Function, onPatternInput: Function, onPatternFocus: Function, onPatternBlur: Function, renderLabel: Function, status: String, inlineThemeDisabled: Boolean, ignoreComposition: { type: Boolean, default: true }, onResize: Function }),
     setup(props) {
+        const { mergedClsPrefixRef, mergedRtlRef } = (0, _mixins_1.useConfig)(props);
+        const rtlEnabledRef = (0, _mixins_1.useRtl)('InternalSelection', mergedRtlRef, mergedClsPrefixRef);
         const patternInputMirrorRef = (0, vue_1.ref)(null);
         const patternInputRef = (0, vue_1.ref)(null);
         const selfRef = (0, vue_1.ref)(null);
@@ -339,6 +342,8 @@ exports.default = (0, vue_1.defineComponent)({
             clearColor, clearColorHover, clearColorPressed, clearSize, 
             // arrow
             arrowSize, [(0, _utils_1.createKey)('height', size)]: height, [(0, _utils_1.createKey)('fontSize', size)]: fontSize } } = themeRef.value;
+            const paddingSingleDiscrete = (0, seemly_1.getPadding)(paddingSingle);
+            const paddingMultipleDiscrete = (0, seemly_1.getPadding)(paddingMultiple);
             return {
                 '--n-bezier': cubicBezierEaseInOut,
                 '--n-border': border,
@@ -355,8 +360,14 @@ exports.default = (0, vue_1.defineComponent)({
                 '--n-color-disabled': colorDisabled,
                 '--n-font-size': fontSize,
                 '--n-height': height,
-                '--n-padding-single': paddingSingle,
-                '--n-padding-multiple': paddingMultiple,
+                '--n-padding-single-top': paddingSingleDiscrete.top,
+                '--n-padding-multiple-top': paddingMultipleDiscrete.top,
+                '--n-padding-single-right': paddingSingleDiscrete.right,
+                '--n-padding-multiple-right': paddingMultipleDiscrete.right,
+                '--n-padding-single-left': paddingSingleDiscrete.left,
+                '--n-padding-multiple-left': paddingMultipleDiscrete.left,
+                '--n-padding-single-bottom': paddingSingleDiscrete.bottom,
+                '--n-padding-multiple-bottom': paddingMultipleDiscrete.bottom,
                 '--n-placeholder-color': placeholderColor,
                 '--n-placeholder-color-disabled': placeholderColorDisabled,
                 '--n-text-color': textColor,
@@ -399,6 +410,8 @@ exports.default = (0, vue_1.defineComponent)({
         return {
             mergedTheme: themeRef,
             mergedClearable: mergedClearableRef,
+            mergedClsPrefix: mergedClsPrefixRef,
+            rtlEnabled: rtlEnabledRef,
             patternInputFocused: patternInputFocusedRef,
             filterablePlaceholder: filterablePlaceholderRef,
             label: labelRef,
@@ -446,7 +459,7 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { status, multiple, size, disabled, filterable, maxTagCount, bordered, clsPrefix, onRender, renderTag, renderLabel } = this;
+        const { status, multiple, size, disabled, filterable, maxTagCount, bordered, clsPrefix, ellipsisTagPopoverProps, onRender, renderTag, renderLabel } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         const maxTagCountResponsive = maxTagCount === 'responsive';
         const maxTagCountNumeric = typeof maxTagCount === 'number';
@@ -514,16 +527,7 @@ exports.default = (0, vue_1.defineComponent)({
                     : this.selectedOptions.map(createTag)))
                 : undefined;
             const popoverProps = useMaxTagCount
-                ? {
-                    show: this.showTagsPanel,
-                    trigger: 'hover',
-                    overlap: true,
-                    placement: 'top',
-                    width: 'trigger',
-                    onUpdateShow: this.onPopoverUpdateShow,
-                    theme: this.mergedTheme.peers.Popover,
-                    themeOverrides: this.mergedTheme.peerOverrides.Popover
-                }
+                ? Object.assign({ show: this.showTagsPanel, trigger: 'hover', overlap: true, placement: 'top', width: 'trigger', onUpdateShow: this.onPopoverUpdateShow, theme: this.mergedTheme.peers.Popover, themeOverrides: this.mergedTheme.peerOverrides.Popover }, ellipsisTagPopoverProps)
                 : null;
             const showPlaceholder = this.selected
                 ? false
@@ -582,6 +586,7 @@ exports.default = (0, vue_1.defineComponent)({
         }
         return ((0, vue_1.h)("div", { ref: "selfRef", class: [
                 `${clsPrefix}-base-selection`,
+                this.rtlEnabled && `${clsPrefix}-base-selection--rtl`,
                 this.themeClass,
                 status && `${clsPrefix}-base-selection--${status}-status`,
                 {

package/lib/_internal/selection/src/styles/index.cssr.js

@@ -32,6 +32,8 @@ const cssr_1 = require("../../../../_utils/cssr");
 // ...clear vars
 // ...form item vars
 exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
+ --n-padding-single: var(--n-padding-single-top) var(--n-padding-single-right) var(--n-padding-single-bottom) var(--n-padding-single-left);
+ --n-padding-multiple: var(--n-padding-multiple-top) var(--n-padding-multiple-right) var(--n-padding-multiple-bottom) var(--n-padding-multiple-left);
  position: relative;
  z-index: auto;
  box-shadow: none;

package/lib/_internal/selection/src/styles/rtl.cssr.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("css-render").CNode;
+export default _default;

package/lib/_internal/selection/src/styles/rtl.cssr.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const cssr_1 = require("../../../../_utils/cssr");
+exports.default = (0, cssr_1.cB)('base-selection', [(0, cssr_1.cM)('rtl', `
+ direction: rtl;
+ --n-padding-single: var(--n-padding-single-top) var(--n-padding-single-left) var(--n-padding-single-bottom) var(--n-padding-single-right);
+ --n-padding-multiple: var(--n-padding-multiple-top) var(--n-padding-multiple-left) var(--n-padding-multiple-bottom) var(--n-padding-multiple-right);
+ `, [(0, cssr_1.cB)('base-suffix', `
+ right: unset;
+ left: 10px;
+ `)])]);

package/lib/_internal/selection/styles/index.d.ts

@@ -1,3 +1,4 @@
 export { default as internalSelectionLight } from './light';
 export { default as internalSelectionDark } from './dark';
+export { internalSelectionRtl } from './rtl';
 export type { InternalSelectionTheme, InternalSelectionThemeVars } from './light';

package/lib/_internal/selection/styles/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.internalSelectionDark = exports.internalSelectionLight = void 0;
+exports.internalSelectionRtl = exports.internalSelectionDark = exports.internalSelectionLight = void 0;
 var light_1 = require("./light");
 Object.defineProperty(exports, "internalSelectionLight", { enumerable: true, get: function () { return __importDefault(light_1).default; } });
 var dark_1 = require("./dark");
 Object.defineProperty(exports, "internalSelectionDark", { enumerable: true, get: function () { return __importDefault(dark_1).default; } });
+var rtl_1 = require("./rtl");
+Object.defineProperty(exports, "internalSelectionRtl", { enumerable: true, get: function () { return rtl_1.internalSelectionRtl; } });

package/lib/_internal/selection/styles/rtl.d.ts

@@ -0,0 +1,2 @@
+import type { RtlItem } from '../../../config-provider/src/internal-interface';
+export declare const internalSelectionRtl: RtlItem;

package/lib/_internal/selection/styles/rtl.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.internalSelectionRtl = void 0;
+const rtl_cssr_1 = __importDefault(require("../src/styles/rtl.cssr"));
+exports.internalSelectionRtl = {
+    name: 'InternalSelection',
+    style: rtl_cssr_1.default
+};

package/lib/_utils/css/index.d.ts

@@ -1,2 +1,3 @@
 export { formatLength } from './format-length';
 export { color2Class } from './color-to-class';
+export { rtlInset } from './rtl-inset';

package/lib/_utils/css/index.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.color2Class = exports.formatLength = void 0;
+exports.rtlInset = exports.color2Class = exports.formatLength = void 0;
 var format_length_1 = require("./format-length");
 Object.defineProperty(exports, "formatLength", { enumerable: true, get: function () { return format_length_1.formatLength; } });
 var color_to_class_1 = require("./color-to-class");
 Object.defineProperty(exports, "color2Class", { enumerable: true, get: function () { return color_to_class_1.color2Class; } });
+var rtl_inset_1 = require("./rtl-inset");
+Object.defineProperty(exports, "rtlInset", { enumerable: true, get: function () { return rtl_inset_1.rtlInset; } });

package/lib/_utils/css/rtl-inset.d.ts

@@ -0,0 +1 @@
+export declare function rtlInset(inset: string): string;

package/lib/_utils/css/rtl-inset.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rtlInset = void 0;
+const seemly_1 = require("seemly");
+function rtlInset(inset) {
+    const { left, right, top, bottom } = (0, seemly_1.getPadding)(inset);
+    return `${top} ${right} ${bottom} ${left}`;
+}
+exports.rtlInset = rtlInset;

package/lib/_utils/cssr/index.d.ts

@@ -7,5 +7,5 @@ declare function insideModal(style: CNode): CNode;
 declare function insidePopover(style: CNode): CNode;
 declare function asModal(style: CProperties): CNode;
 declare const cCB: typeof cB;
-export { c, cB, cE, cM, cNotM, cCB, insideModal, insidePopover, asModal, prefix, namespace, find };
-export { createKey } from './create-key';
+declare function createKey<P extends string, S extends string>(prefix: P, suffix: S): S extends 'default' ? P : `${P}${Capitalize<S>}`;
+export { c, cB, cE, cM, cNotM, cCB, insideModal, insidePopover, asModal, prefix, namespace, find, createKey };

package/lib/_utils/cssr/index.js

@@ -42,5 +42,11 @@ const cCB = ((...args) => {
     return c('>', [cB(...args)]);
 });
 exports.cCB = cCB;
-var create_key_1 = require("./create-key");
-Object.defineProperty(exports, "createKey", { enumerable: true, get: function () { return create_key_1.createKey; } });
+function createKey(prefix, suffix) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (prefix +
+        (suffix === 'default'
+            ? ''
+            : suffix.replace(/^[a-z]/, (startChar) => startChar.toUpperCase())));
+}
+exports.createKey = createKey;

package/lib/_utils/dom/download.d.ts

@@ -0,0 +1 @@
+export declare const download: (url: string | null, name: string | undefined) => void;

package/lib/_utils/dom/download.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.download = void 0;
+const download = (url, name) => {
+    if (!url)
+        return;
+    const a = document.createElement('a');
+    a.href = url;
+    if (name !== undefined) {
+        a.download = name;
+    }
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+};
+exports.download = download;

package/lib/_utils/dom/index.d.ts

@@ -1 +1,2 @@
 export { isDocument } from './is-document';
+export { download } from './download';

package/lib/_utils/dom/index.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isDocument = void 0;
+exports.download = exports.isDocument = void 0;
 var is_document_1 = require("./is-document");
 Object.defineProperty(exports, "isDocument", { enumerable: true, get: function () { return is_document_1.isDocument; } });
+var download_1 = require("./download");
+Object.defineProperty(exports, "download", { enumerable: true, get: function () { return download_1.download; } });

package/lib/_utils/index.d.ts

@@ -2,7 +2,7 @@ export { call, keep, omit, flatten, getSlot, getVNodeChildren, keysOf, render, g
 export type { MaybeArray } from './vue';
 export { warn, warnOnce, throwError, smallerSize, largerSize, getTitleAttribute } from './naive';
 export type { ExtractPublicPropTypes, ExtractInternalPropTypes, Mutable } from './naive';
-export { formatLength, color2Class } from './css';
+export { formatLength, color2Class, rtlInset } from './css';
 export { createKey } from './cssr';
 export { isJsdom } from './env/is-jsdom';
 export { isBrowser } from './env/is-browser';

package/lib/_utils/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.markEventEffectPerformed = exports.eventEffectNotPerformed = exports.isBrowser = exports.isJsdom = exports.createKey = exports.color2Class = exports.formatLength = exports.getTitleAttribute = exports.largerSize = exports.smallerSize = exports.throwError = exports.warnOnce = exports.warn = exports.Wrapper = exports.resolveWrappedSlotWithProps = exports.isNodeVShowFalse = exports.mergeEventHandlers = exports.isSlotEmpty = exports.resolveWrappedSlot = exports.resolveSlotWithProps = exports.resolveSlot = exports.createInjectionKey = exports.createRefSetter = exports.createDataKey = exports.getFirstSlotVNode = exports.render = exports.keysOf = exports.getVNodeChildren = exports.getSlot = exports.flatten = exports.omit = exports.keep = exports.call = void 0;
+exports.markEventEffectPerformed = exports.eventEffectNotPerformed = exports.isBrowser = exports.isJsdom = exports.createKey = exports.rtlInset = exports.color2Class = exports.formatLength = exports.getTitleAttribute = exports.largerSize = exports.smallerSize = exports.throwError = exports.warnOnce = exports.warn = exports.Wrapper = exports.resolveWrappedSlotWithProps = exports.isNodeVShowFalse = exports.mergeEventHandlers = exports.isSlotEmpty = exports.resolveWrappedSlot = exports.resolveSlotWithProps = exports.resolveSlot = exports.createInjectionKey = exports.createRefSetter = exports.createDataKey = exports.getFirstSlotVNode = exports.render = exports.keysOf = exports.getVNodeChildren = exports.getSlot = exports.flatten = exports.omit = exports.keep = exports.call = void 0;
 var vue_1 = require("./vue");
 Object.defineProperty(exports, "call", { enumerable: true, get: function () { return vue_1.call; } });
 Object.defineProperty(exports, "keep", { enumerable: true, get: function () { return vue_1.keep; } });
@@ -46,6 +46,7 @@ Object.defineProperty(exports, "getTitleAttribute", { enumerable: true, get: fun
 var css_1 = require("./css");
 Object.defineProperty(exports, "formatLength", { enumerable: true, get: function () { return css_1.formatLength; } });
 Object.defineProperty(exports, "color2Class", { enumerable: true, get: function () { return css_1.color2Class; } });
+Object.defineProperty(exports, "rtlInset", { enumerable: true, get: function () { return css_1.rtlInset; } });
 var cssr_1 = require("./cssr");
 Object.defineProperty(exports, "createKey", { enumerable: true, get: function () { return cssr_1.createKey; } });
 var is_jsdom_1 = require("./env/is-jsdom");

package/lib/_utils/vue/flatten.js

@@ -25,7 +25,9 @@ function flatten(vNodes, filterCommentNode = true, result = []) {
             }
             // rawSlot
         }
-        else if (vNode.type !== vue_1.Comment) {
+        else {
+            if (vNode.type === vue_1.Comment && filterCommentNode)
+                return;
             result.push(vNode);
         }
     });

package/lib/affix/src/Affix.d.ts

@@ -8,8 +8,8 @@ export declare const affixProps: {
     readonly triggerTop: NumberConstructor;
     readonly triggerBottom: NumberConstructor;
     readonly position: {
-        readonly type: PropType<"absolute" | "fix">;
-        readonly default: "fix";
+        readonly type: PropType<"fixed" | "absolute">;
+        readonly default: "fixed";
     };
     readonly offsetTop: {
         readonly type: PropType<number | undefined>;
@@ -36,8 +36,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly triggerTop: NumberConstructor;
     readonly triggerBottom: NumberConstructor;
     readonly position: {
-        readonly type: PropType<"absolute" | "fix">;
-        readonly default: "fix";
+        readonly type: PropType<"fixed" | "absolute">;
+        readonly default: "fixed";
     };
     readonly offsetTop: {
         readonly type: PropType<number | undefined>;
@@ -66,8 +66,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly triggerTop: NumberConstructor;
     readonly triggerBottom: NumberConstructor;
     readonly position: {
-        readonly type: PropType<"absolute" | "fix">;
-        readonly default: "fix";
+        readonly type: PropType<"fixed" | "absolute">;
+        readonly default: "fixed";
     };
     readonly offsetTop: {
         readonly type: PropType<number | undefined>;
@@ -86,7 +86,7 @@ declare const _default: import("vue").DefineComponent<{
     };
 }>>, {
     readonly target: (() => HTMLElement) | undefined;
-    readonly position: "absolute" | "fix";
+    readonly position: "fixed" | "absolute";
     readonly offsetTop: number | undefined;
     readonly offsetBottom: number | undefined;
 }, {}>;

package/lib/affix/src/Affix.js

@@ -18,7 +18,7 @@ exports.affixProps = {
     triggerBottom: Number,
     position: {
         type: String,
-        default: 'fix'
+        default: 'fixed'
     },
     // deprecated
     offsetTop: {

package/lib/anchor/src/AnchorAdapter.d.ts

@@ -28,8 +28,8 @@ export declare const anchorProps: {
     readonly triggerTop: NumberConstructor;
     readonly triggerBottom: NumberConstructor;
     readonly position: {
-        readonly type: import("vue").PropType<"absolute" | "fix">;
-        readonly default: "fix";
+        readonly type: import("vue").PropType<"fixed" | "absolute">;
+        readonly default: "fixed";
     };
     readonly offsetTop: {
         readonly type: import("vue").PropType<number | undefined>;
@@ -114,8 +114,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly triggerTop: NumberConstructor;
     readonly triggerBottom: NumberConstructor;
     readonly position: {
-        readonly type: import("vue").PropType<"absolute" | "fix">;
-        readonly default: "fix";
+        readonly type: import("vue").PropType<"fixed" | "absolute">;
+        readonly default: "fixed";
     };
     readonly offsetTop: {
         readonly type: import("vue").PropType<number | undefined>;
@@ -201,8 +201,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly triggerTop: NumberConstructor;
     readonly triggerBottom: NumberConstructor;
     readonly position: {
-        readonly type: import("vue").PropType<"absolute" | "fix">;
-        readonly default: "fix";
+        readonly type: import("vue").PropType<"fixed" | "absolute">;
+        readonly default: "fixed";
     };
     readonly offsetTop: {
         readonly type: import("vue").PropType<number | undefined>;
@@ -263,7 +263,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly type: "block" | "rail";
     readonly bound: number;
     readonly target: (() => HTMLElement) | undefined;
-    readonly position: "absolute" | "fix";
+    readonly position: "fixed" | "absolute";
     readonly affix: boolean;
     readonly offsetTop: number | undefined;
     readonly offsetBottom: number | undefined;

package/lib/auto-complete/src/AutoComplete.d.ts

@@ -827,6 +827,7 @@ declare const _default: import("vue").DefineComponent<{
         inputElRef: HTMLInputElement | null;
         isCompositing: boolean;
         blur: () => void;
+        clear: () => void;
         focus: () => void;
         select: () => void;
         activate: () => void;

package/lib/avatar/src/Avatar.d.ts

@@ -153,9 +153,9 @@ declare const _default: import("vue").DefineComponent<{
     themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;
     hasLoadError: import("vue").Ref<boolean>;
-    handleError: (e: Event) => void;
     shouldStartLoading: import("vue").Ref<boolean>;
     loaded: import("vue").Ref<boolean>;
+    mergedOnError: (e: Event) => void;
     mergedOnLoad: (e: Event) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     readonly size: PropType<Size>;

package/lib/avatar/src/Avatar.js

@@ -79,18 +79,6 @@ exports.default = (0, vue_1.defineComponent)({
                 return true;
             return props.bordered || false;
         });
-        const handleError = (e) => {
-            var _a;
-            if (!shouldStartLoadingRef.value)
-                return;
-            hasLoadErrorRef.value = true;
-            const { onError, imgProps } = props;
-            (_a = imgProps === null || imgProps === void 0 ? void 0 : imgProps.onError) === null || _a === void 0 ? void 0 : _a.call(imgProps, e);
-            if (onError) {
-                onError(e);
-            }
-        };
-        (0, vue_1.watch)(() => props.src, () => (hasLoadErrorRef.value = false));
         const cssVarsRef = (0, vue_1.computed)(() => {
             const size = mergedSizeRef.value;
             const round = mergedRoundRef.value;
@@ -144,21 +132,24 @@ exports.default = (0, vue_1.defineComponent)({
             : undefined;
         const shouldStartLoadingRef = (0, vue_1.ref)(!props.lazy);
         (0, vue_1.onMounted)(() => {
-            if (is_native_lazy_load_1.isImageSupportNativeLazy) {
-                return;
+            // Use IntersectionObserver if lazy and intersectionObserverOptions is set
+            if (props.lazy && props.intersectionObserverOptions) {
+                let unobserve;
+                const stopWatchHandle = (0, vue_1.watchEffect)(() => {
+                    unobserve === null || unobserve === void 0 ? void 0 : unobserve();
+                    unobserve = undefined;
+                    if (props.lazy) {
+                        unobserve = (0, utils_1.observeIntersection)(selfRef.value, props.intersectionObserverOptions, shouldStartLoadingRef);
+                    }
+                });
+                (0, vue_1.onBeforeUnmount)(() => {
+                    stopWatchHandle();
+                    unobserve === null || unobserve === void 0 ? void 0 : unobserve();
+                });
             }
-            let unobserve;
-            const stopWatchHandle = (0, vue_1.watchEffect)(() => {
-                unobserve === null || unobserve === void 0 ? void 0 : unobserve();
-                unobserve = undefined;
-                if (props.lazy) {
-                    unobserve = (0, utils_1.observeIntersection)(selfRef.value, props.intersectionObserverOptions, shouldStartLoadingRef);
-                }
-            });
-            (0, vue_1.onBeforeUnmount)(() => {
-                stopWatchHandle();
-                unobserve === null || unobserve === void 0 ? void 0 : unobserve();
-            });
+        });
+        (0, vue_1.watch)(() => { var _a; return props.src || ((_a = props.imgProps) === null || _a === void 0 ? void 0 : _a.src); }, () => {
+            hasLoadErrorRef.value = false;
         });
         const loadedRef = (0, vue_1.ref)(!props.lazy);
         return {
@@ -171,21 +162,27 @@ exports.default = (0, vue_1.defineComponent)({
             themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
             onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender,
             hasLoadError: hasLoadErrorRef,
-            handleError,
             shouldStartLoading: shouldStartLoadingRef,
             loaded: loadedRef,
+            mergedOnError: (e) => {
+                if (!shouldStartLoadingRef.value)
+                    return;
+                hasLoadErrorRef.value = true;
+                const { onError, imgProps: { onError: imgPropsOnError } = {} } = props;
+                onError === null || onError === void 0 ? void 0 : onError(e);
+                imgPropsOnError === null || imgPropsOnError === void 0 ? void 0 : imgPropsOnError(e);
+            },
             mergedOnLoad: (e) => {
-                var _a;
-                const { onLoad, imgProps } = props;
+                const { onLoad, imgProps: { onLoad: imgPropsOnLoad } = {} } = props;
                 onLoad === null || onLoad === void 0 ? void 0 : onLoad(e);
-                (_a = imgProps === null || imgProps === void 0 ? void 0 : imgProps.onLoad) === null || _a === void 0 ? void 0 : _a.call(imgProps, e);
+                imgPropsOnLoad === null || imgPropsOnLoad === void 0 ? void 0 : imgPropsOnLoad(e);
                 loadedRef.value = true;
             }
         };
     },
     render() {
         var _a, _b;
-        const { $slots, src, mergedClsPrefix, lazy, onRender, mergedOnLoad, shouldStartLoading, loaded, hasLoadError } = this;
+        const { $slots, src, mergedClsPrefix, lazy, onRender, loaded, hasLoadError, imgProps = {} } = this;
         onRender === null || onRender === void 0 ? void 0 : onRender();
         let img;
         const placeholderNode = !loaded &&
@@ -207,20 +204,20 @@ exports.default = (0, vue_1.defineComponent)({
                         default: () => ((0, vue_1.h)("span", { ref: "textRef", class: `${mergedClsPrefix}-avatar__text` }, children))
                     }));
                 }
-                else if (src) {
-                    const { imgProps } = this;
+                else if (src || imgProps.src) {
+                    const loadSrc = this.src || imgProps.src;
                     return (0, vue_1.h)('img', Object.assign(Object.assign({}, imgProps), { loading: 
                         // If interseciton observer options is set, do not use native lazy
                         is_native_lazy_load_1.isImageSupportNativeLazy &&
                             !this.intersectionObserverOptions &&
                             lazy
                             ? 'lazy'
-                            : 'eager', src: is_native_lazy_load_1.isImageSupportNativeLazy
-                            ? src
-                            : shouldStartLoading || loaded
-                                ? src
-                                : undefined, onLoad: mergedOnLoad, 'data-image-src': src, onError: this.handleError, style: [
-                            imgProps === null || imgProps === void 0 ? void 0 : imgProps.style,
+                            : 'eager', src: lazy && this.intersectionObserverOptions
+                            ? this.shouldStartLoading
+                                ? loadSrc
+                                : undefined
+                            : loadSrc, 'data-image-src': loadSrc, onLoad: this.mergedOnLoad, onError: this.mergedOnError, style: [
+                            imgProps.style || '',
                             { objectFit: this.objectFit },
                             placeholderNode
                                 ? {

package/lib/avatar-group/src/AvatarGroup.d.ts

@@ -15,6 +15,7 @@ export declare const avatarGroupProps: {
         readonly default: () => never[];
     };
     readonly vertical: BooleanConstructor;
+    readonly expandOnHover: BooleanConstructor;
     readonly size: PropType<Size | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"AvatarGroup", {
         gap: string;
@@ -77,6 +78,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     readonly vertical: BooleanConstructor;
+    readonly expandOnHover: BooleanConstructor;
     readonly size: PropType<Size | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"AvatarGroup", {
         gap: string;
@@ -277,6 +279,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: () => never[];
     };
     readonly vertical: BooleanConstructor;
+    readonly expandOnHover: BooleanConstructor;
     readonly size: PropType<Size | undefined>;
     readonly theme: PropType<import("../../_mixins").Theme<"AvatarGroup", {
         gap: string;
@@ -332,5 +335,6 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     readonly options: AvatarGroupOption[];
     readonly vertical: boolean;
+    readonly expandOnHover: boolean;
 }, {}>;
 export default _default;