naive-ui 2.18.0 → 2.19.1

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

@@ -54,9 +54,14 @@ exports.default = (0, vue_1.defineComponent)({
         });
         const filterablePlaceholderRef = (0, vue_1.computed)(() => {
             return props.selectedOption
-                ? props.renderLabel
-                    ? props.renderLabel(props.selectedOption, true)
-                    : (0, _utils_1.render)(props.selectedOption.label, props.selectedOption, true)
+                ? props.renderTag
+                    ? props.renderTag({
+                        option: props.selectedOption,
+                        handleClose: () => { }
+                    })
+                    : props.renderLabel
+                        ? props.renderLabel(props.selectedOption, true)
+                        : (0, _utils_1.render)(props.selectedOption.label, props.selectedOption, true)
                 : props.placeholder;
         });
         const labelRef = (0, vue_1.computed)(() => {
@@ -329,7 +334,9 @@ exports.default = (0, vue_1.defineComponent)({
                 // form error
                 colorActiveError, boxShadowFocusError, boxShadowActiveError, boxShadowHoverError, borderError, borderFocusError, borderHoverError, borderActiveError, 
                 // clear
-                clearColor, clearColorHover, clearColorPressed, clearSize, [(0, _utils_1.createKey)('height', size)]: height, [(0, _utils_1.createKey)('fontSize', size)]: fontSize } } = themeRef.value;
+                clearColor, clearColorHover, clearColorPressed, clearSize, 
+                // arrow
+                arrowSize, [(0, _utils_1.createKey)('height', size)]: height, [(0, _utils_1.createKey)('fontSize', size)]: fontSize } } = themeRef.value;
                 return {
                     '--bezier': cubicBezierEaseInOut,
                     '--border': border,
@@ -376,7 +383,9 @@ exports.default = (0, vue_1.defineComponent)({
                     '--clear-size': clearSize,
                     '--clear-color': clearColor,
                     '--clear-color-hover': clearColorHover,
-                    '--clear-color-pressed': clearColorPressed
+                    '--clear-color-pressed': clearColorPressed,
+                    // arrow-size
+                    '--arrow-size': arrowSize
                 };
             })
         };
@@ -451,7 +460,7 @@ exports.default = (0, vue_1.defineComponent)({
                     themeOverrides: this.mergedTheme.peerOverrides.Popover
                 }
                 : null;
-            const placeholder = !this.selected && !this.pattern && !this.isCompositing ? ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-render-dom` }, this.placeholder)) : null;
+            const placeholder = !this.selected && !this.pattern && !this.isCompositing ? ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay` }, this.placeholder)) : null;
             if (filterable) {
                 const popoverTrigger = ((0, vue_1.h)("div", { ref: "patternInputWrapperRef", class: `${clsPrefix}-base-selection-tags` },
                     tags,
@@ -482,19 +491,30 @@ exports.default = (0, vue_1.defineComponent)({
                     (this.active || !this.selected) &&
                     !this.isCompositing;
                 body = ((0, vue_1.h)("div", { ref: "patternInputWrapperRef", class: `${clsPrefix}-base-selection-label` },
-                    (0, vue_1.h)("input", { ref: "patternInputRef", class: `${clsPrefix}-base-selection-label__input`, value: this.patternInputFocused && this.active ? this.pattern : '', placeholder: "", readonly: disabled, disabled: disabled, tabindex: -1, autofocus: this.autofocus, onFocus: this.handlePatternInputFocus, onBlur: this.handlePatternInputBlur, onInput: this.handlePatternInputInput, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd }),
+                    (0, vue_1.h)("input", { ref: "patternInputRef", class: `${clsPrefix}-base-selection-input`, value: this.patternInputFocused && this.active ? this.pattern : '', placeholder: "", readonly: disabled, disabled: disabled, tabindex: -1, autofocus: this.autofocus, onFocus: this.handlePatternInputFocus, onBlur: this.handlePatternInputBlur, onInput: this.handlePatternInputInput, onCompositionstart: this.handleCompositionStart, onCompositionend: this.handleCompositionEnd }),
                     showPlaceholder ? null : this.patternInputFocused &&
-                        this.active ? null : ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-label__render-label ${clsPrefix}-base-render-dom`, key: "input" }, renderLabel
-                        ? renderLabel(this.selectedOption, true)
-                        : (0, _utils_1.render)(this.label, this.selectedOption, true))),
-                    showPlaceholder ? ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-render-dom`, key: "placeholder" }, this.filterablePlaceholder)) : null,
+                        this.active ? null : ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-label__render-label ${clsPrefix}-base-selection-overlay`, key: "input" }, renderTag
+                        ? renderTag({
+                            option: this.selectedOption,
+                            handleClose: () => { }
+                        })
+                        : renderLabel
+                            ? renderLabel(this.selectedOption, true)
+                            : (0, _utils_1.render)(this.label, this.selectedOption, true))),
+                    showPlaceholder ? ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay`, key: "placeholder" }, this.filterablePlaceholder)) : null,
                     suffix));
             }
             else {
                 body = ((0, vue_1.h)("div", { ref: "singleElRef", class: `${clsPrefix}-base-selection-label`, tabindex: this.disabled ? undefined : 0 },
-                    this.label !== undefined ? ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-label__input`, title: (0, _utils_1.getTitleAttribute)(this.label), key: "input" }, renderLabel
-                        ? renderLabel(this.selectedOption, true)
-                        : (0, _utils_1.render)(this.label, this.selectedOption, true))) : ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-render-dom`, key: "placeholder" }, this.placeholder)),
+                    this.label !== undefined ? ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-input`, title: (0, _utils_1.getTitleAttribute)(this.label), key: "input" },
+                        (0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-input__content` }, renderTag
+                            ? renderTag({
+                                option: this.selectedOption,
+                                handleClose: () => { }
+                            })
+                            : renderLabel
+                                ? renderLabel(this.selectedOption, true)
+                                : (0, _utils_1.render)(this.label, this.selectedOption, true)))) : ((0, vue_1.h)("div", { class: `${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-selection-overlay`, key: "placeholder" }, this.placeholder)),
                     suffix));
             }
         }

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

@@ -26,6 +26,7 @@ const cssr_1 = require("../../../../_utils/cssr"); // vars:
 // --text-color
 // --text-color-disabled
 // --arrow-color
+// --arrow-size
 // --loading-color
 // ...clear vars
 // ...form item vars
@@ -41,13 +42,10 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  vertical-align: bottom;
  border-radius: var(--border-radius);
  min-height: var(--height);
- line-height: var(--height);
+ line-height: 1.5;
  font-size: var(--font-size);
  `, [(0, cssr_1.cB)('base-loading', `
  color: var(--loading-color);
- `), (0, cssr_1.cB)('base-selection-label', `
- height: var(--height);
- line-height: var(--height);
  `), (0, cssr_1.cB)('base-selection-tags', {
   minHeight: 'var(--height)'
 }), (0, cssr_1.cE)('border, state-border', `
@@ -72,13 +70,14 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  transform: translateY(-50%);
  right: 10px;
  `, [(0, cssr_1.cE)('arrow', `
+ font-size: var(--arrow-size);
  color: var(--arrow-color);
  transition: color .3s var(--bezier);
- `)]), (0, cssr_1.cB)('base-render-dom', `
+ `)]), (0, cssr_1.cB)('base-selection-overlay', `
+ display: flex;
+ align-items: center;
  white-space: nowrap;
  overflow: hidden;
- height: var(--height);
- line-height: var(--height);
  pointer-events: none;
  position: absolute;
  top: 0;
@@ -108,7 +107,8 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  box-shadow .3s var(--bezier),
  background-color .3s var(--bezier);
  `), (0, cssr_1.cB)('base-selection-label', `
- display: inline-block;
+ height: var(--height);
+ display: inline-flex;
  width: 100%;
  vertical-align: bottom;
  cursor: pointer;
@@ -122,22 +122,24 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  background-color .3s var(--bezier);
  border-radius: inherit;
  background-color: var(--color);
- `, [(0, cssr_1.cE)('input', `
+ align-items: center;
+ `, [(0, cssr_1.cB)('base-selection-input', `
  line-height: inherit;
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
- text-overflow: ellipsis;
- overflow: hidden;
  border:none;
  width: 100%;
- white-space: nowrap;
  padding: var(--padding-single);
  background-color: #0000;
  color: var(--text-color);
  transition: color .3s var(--bezier);
  caret-color: var(--caret-color);
- `), (0, cssr_1.cE)('render-label', `
+ `, [(0, cssr_1.cE)('content', `
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap; 
+ `)]), (0, cssr_1.cE)('render-label', `
  color: var(--text-color);
  `)]), (0, cssr_1.cNotM)('disabled', [(0, cssr_1.c)('&:hover', [(0, cssr_1.cE)('state-border', `
  box-shadow: var(--box-shadow-hover);
@@ -159,7 +161,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.cB)('base-selection', `
  `), (0, cssr_1.cB)('base-selection-label', `
  cursor: not-allowed;
  background-color: var(--color-disabled);
- `, [(0, cssr_1.cE)('input', `
+ `, [(0, cssr_1.cB)('base-selection-input', `
  cursor: not-allowed;
  color: var(--text-color-disabled);
  `), (0, cssr_1.cE)('render-label', `

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

@@ -9,5 +9,6 @@ declare const _default: {
     fontSizeLarge: string;
     paddingSingle: string;
     clearSize: string;
+    arrowSize: string;
 };
 export default _default;

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

@@ -10,5 +10,6 @@ exports.default = {
     fontSizeMedium: '14px',
     fontSizeLarge: '15px',
     paddingSingle: '0 26px 0 14px',
-    clearSize: '16px'
+    clearSize: '16px',
+    arrowSize: '16px'
 };

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

@@ -50,6 +50,7 @@ declare const self: (vars: ThemeCommonVars) => {
     fontSizeLarge: string;
     paddingSingle: string;
     clearSize: string;
+    arrowSize: string;
 };
 export declare type InternalSelectionThemeVars = ReturnType<typeof self>;
 declare const internalSelectionLight: import("../../../_mixins").Theme<"InternalSelection", {
@@ -103,6 +104,7 @@ declare const internalSelectionLight: import("../../../_mixins").Theme<"Internal
     fontSizeLarge: string;
     paddingSingle: string;
     clearSize: string;
+    arrowSize: string;
 }, {
     Popover: import("../../../_mixins").Theme<"Popover", {
         fontSize: string;

package/lib/_styles/common/light.js

@@ -89,7 +89,7 @@ const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.defaul
     // close
     closeColor: neutral(Number(base.alphaClose)), closeColorHover: neutral(Number(base.alphaClose) * 1.25), closeColorPressed: neutral(Number(base.alphaClose) * 0.8), closeColorDisabled: neutral(base.alpha4), 
     // clear
-    clearColor: neutral(base.alpha4), clearColorHover: (0, seemly_1.scaleColor)(neutral(base.alpha4), { lightness: 0.75 }), clearColorPressed: (0, seemly_1.scaleColor)(neutral(base.alpha4), { lightness: 0.9 }), scrollbarColor: overlay(base.alphaScrollbar), scrollbarColorHover: overlay(base.alphaScrollbarHover), scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', progressRailColor: neutral(base.alphaProgressRail), railColor: 'rgb(219, 219, 223)', popoverColor: base.neutralPopover, tableColor: base.neutralCard, cardColor: base.neutralCard, modalColor: base.neutralModal, bodyColor: base.neutralBody, tagColor: 'rgb(250, 250, 252)', avatarColor: neutral(base.alphaAvatar), invertedColor: 'rgb(0, 20, 40)', inputColor: neutral(base.alphaInput), codeColor: 'rgb(244, 244, 248)', tabColor: 'rgb(250, 250, 252)', actionColor: 'rgb(250, 250, 252)', tableHeaderColor: 'rgb(250, 250, 252)', hoverColor: 'rgb(243, 243, 245)', 
+    clearColor: neutral(base.alpha4), clearColorHover: (0, seemly_1.scaleColor)(neutral(base.alpha4), { lightness: 0.75 }), clearColorPressed: (0, seemly_1.scaleColor)(neutral(base.alpha4), { lightness: 0.9 }), scrollbarColor: overlay(base.alphaScrollbar), scrollbarColorHover: overlay(base.alphaScrollbarHover), scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', progressRailColor: neutral(base.alphaProgressRail), railColor: 'rgb(219, 219, 223)', popoverColor: base.neutralPopover, tableColor: base.neutralCard, cardColor: base.neutralCard, modalColor: base.neutralModal, bodyColor: base.neutralBody, tagColor: 'rgb(250, 250, 252)', avatarColor: neutral(base.alphaAvatar), invertedColor: 'rgb(0, 20, 40)', inputColor: neutral(base.alphaInput), codeColor: 'rgb(244, 244, 248)', tabColor: 'rgb(247, 247, 250)', actionColor: 'rgb(250, 250, 252)', tableHeaderColor: 'rgb(250, 250, 252)', hoverColor: 'rgb(243, 243, 245)', 
     // use color with alpha since it can be nested with header filter & sorter effect
     tableColorHover: 'rgba(0, 0, 100, 0.02)', pressedColor: 'rgb(237, 237, 239)', opacityDisabled: base.alphaDisabled, inputColorDisabled: 'rgb(250, 250, 252)', boxShadow1: '0 1px 2px -2px rgba(0, 0, 0, .08), 0 3px 6px 0 rgba(0, 0, 0, .06), 0 5px 12px 4px rgba(0, 0, 0, .04)', boxShadow2: '0 3px 6px -4px rgba(0, 0, 0, .12), 0 6px 16px 0 rgba(0, 0, 0, .08), 0 9px 28px 8px rgba(0, 0, 0, .05)', boxShadow3: '0 6px 16px -9px rgba(0, 0, 0, .08), 0 9px 28px 0 rgba(0, 0, 0, .05), 0 12px 48px 16px rgba(0, 0, 0, .03)' });
 exports.default = derived;

package/lib/_utils/naive/mutable.d.ts

@@ -1,3 +1,3 @@
-export declare type Mutable<T> = {
+export declare type Mutable<T> = T extends Record<string, unknown> ? {
     -readonly [P in keyof T]: T[P] extends ReadonlyArray<infer U> ? Array<Mutable<U>> : Mutable<T[P]>;
-};
+} : T;

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

@@ -3,6 +3,10 @@ export interface AnchorInst {
     scrollTo: (href: string) => void;
 }
 declare const anchorProps: {
+    readonly type: {
+        readonly type: import("vue").PropType<"block" | "rail">;
+        readonly default: "rail";
+    };
     readonly showRail: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -41,10 +45,7 @@ declare const anchorProps: {
         readonly validator: () => boolean;
         readonly default: undefined;
     };
-    readonly affix: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
+    readonly affix: BooleanConstructor;
     readonly theme: import("vue").PropType<import("../../_mixins").Theme<"Anchor", {
         borderRadius: string;
         railColor: string;
@@ -87,6 +88,10 @@ declare const anchorProps: {
 };
 export declare type AnchorProps = ExtractPublicPropTypes<typeof anchorProps>;
 declare const _default: import("vue").DefineComponent<{
+    readonly type: {
+        readonly type: import("vue").PropType<"block" | "rail">;
+        readonly default: "rail";
+    };
     readonly showRail: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -125,10 +130,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly validator: () => boolean;
         readonly default: undefined;
     };
-    readonly affix: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
+    readonly affix: BooleanConstructor;
     readonly theme: import("vue").PropType<import("../../_mixins").Theme<"Anchor", {
         borderRadius: string;
         railColor: string;
@@ -172,6 +174,7 @@ declare const _default: import("vue").DefineComponent<{
     scrollTo(href: string): void;
     renderAnchor: () => JSX.Element;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    readonly type?: unknown;
     readonly showRail?: unknown;
     readonly showBackground?: unknown;
     readonly bound?: unknown;
@@ -191,6 +194,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly themeOverrides?: unknown;
     readonly builtinThemeOverrides?: unknown;
 } & {
+    type: "block" | "rail";
     bound: number;
     position: "absolute" | "fix";
     affix: boolean;
@@ -247,6 +251,7 @@ declare const _default: import("vue").DefineComponent<{
     offsetBottom?: number | undefined;
     offsetTarget?: string | import("./utils").OffsetTarget | (() => HTMLElement) | undefined;
 }>, {
+    type: "block" | "rail";
     bound: number;
     position: "absolute" | "fix";
     target: (() => HTMLElement) | undefined;

package/lib/anchor/src/AnchorAdapter.js

@@ -8,10 +8,7 @@ const _utils_1 = require("../../_utils");
 const styles_1 = require("../styles");
 const index_cssr_1 = require("./styles/index.cssr");
 const BaseAnchor_1 = require("./BaseAnchor");
-const anchorProps = Object.assign(Object.assign(Object.assign(Object.assign({}, _mixins_1.useTheme.props), { affix: {
-        type: Boolean,
-        default: false
-    } }), Affix_1.affixProps), BaseAnchor_1.baseAnchorProps);
+const anchorProps = Object.assign(Object.assign(Object.assign(Object.assign({}, _mixins_1.useTheme.props), { affix: Boolean }), Affix_1.affixProps), BaseAnchor_1.baseAnchorProps);
 exports.default = (0, vue_1.defineComponent)({
     name: 'Anchor',
     props: anchorProps,
@@ -20,8 +17,9 @@ exports.default = (0, vue_1.defineComponent)({
         const themeRef = (0, _mixins_1.useTheme)('Anchor', 'Anchor', index_cssr_1.default, styles_1.anchorLight, props, mergedClsPrefixRef);
         const anchorRef = (0, vue_1.ref)(null);
         const cssVarsRef = (0, vue_1.computed)(() => {
-            const { self: { railColor, linkColor, railColorActive, linkTextColor, linkTextColorHover, linkTextColorPressed, linkTextColorActive, linkFontSize, railWidth, linkPadding }, common: { cubicBezierEaseInOut } } = themeRef.value;
+            const { self: { railColor, linkColor, railColorActive, linkTextColor, linkTextColorHover, linkTextColorPressed, linkTextColorActive, linkFontSize, railWidth, linkPadding, borderRadius }, common: { cubicBezierEaseInOut } } = themeRef.value;
             return {
+                '--link-border-radius': borderRadius,
                 '--link-color': linkColor,
                 '--link-font-size': linkFontSize,
                 '--link-text-color': linkTextColor,

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

@@ -4,6 +4,10 @@ export interface BaseAnchorInst {
     setActiveHref: (href: string) => void;
 }
 export declare const baseAnchorProps: {
+    readonly type: {
+        readonly type: PropType<"block" | "rail">;
+        readonly default: "rail";
+    };
     readonly showRail: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -19,12 +23,16 @@ export declare const baseAnchorProps: {
     readonly ignoreGap: BooleanConstructor;
     readonly offsetTarget: PropType<string | OffsetTarget | (() => HTMLElement)>;
 };
-export declare const baseAnchorPropKeys: ("bound" | "showRail" | "showBackground" | "ignoreGap" | "offsetTarget")[];
+export declare const baseAnchorPropKeys: ("type" | "bound" | "showRail" | "showBackground" | "ignoreGap" | "offsetTarget")[];
 declare const _default: import("vue").DefineComponent<{
     mergedClsPrefix: {
         type: StringConstructor;
         required: true;
     };
+    type: {
+        readonly type: PropType<"block" | "rail">;
+        readonly default: "rail";
+    };
     showRail: {
         readonly type: BooleanConstructor;
         readonly default: true;
@@ -45,14 +53,18 @@ declare const _default: import("vue").DefineComponent<{
     slotRef: import("vue").Ref<HTMLElement | null>;
     setActiveHref: (href: string, transition?: boolean) => void;
     activeHref: import("vue").Ref<string | null>;
+    isBlockType: import("vue").ComputedRef<boolean>;
+    mergedShowRail: import("vue").ComputedRef<boolean>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     mergedClsPrefix?: unknown;
+    type?: unknown;
     showRail?: unknown;
     showBackground?: unknown;
     bound?: unknown;
     ignoreGap?: unknown;
     offsetTarget?: unknown;
 } & {
+    type: "block" | "rail";
     bound: number;
     mergedClsPrefix: string;
     showRail: boolean;
@@ -61,6 +73,7 @@ declare const _default: import("vue").DefineComponent<{
 } & {
     offsetTarget?: string | OffsetTarget | (() => HTMLElement) | undefined;
 }>, {
+    type: "block" | "rail";
     bound: number;
     showRail: boolean;
     showBackground: boolean;

package/lib/anchor/src/BaseAnchor.js

@@ -9,6 +9,10 @@ const Link_1 = require("./Link");
 const lodash_1 = require("lodash");
 const utils_1 = require("./utils");
 exports.baseAnchorProps = {
+    type: {
+        type: String,
+        default: 'rail'
+    },
     showRail: {
         type: Boolean,
         default: true
@@ -38,6 +42,12 @@ exports.default = (0, vue_1.defineComponent)({
         const slotRef = (0, vue_1.ref)(null);
         const barRef = (0, vue_1.ref)(null);
         const selfRef = (0, vue_1.ref)(null);
+        const isBlockTypeRef = (0, vue_1.computed)(() => {
+            return props.type === 'block';
+        });
+        const mergedShowRailRef = (0, vue_1.computed)(() => {
+            return !isBlockTypeRef.value && props.showRail;
+        });
         function disableTransitionOneTick() {
             const { value: barEl } = barRef;
             const { value: slotEl } = slotRef;
@@ -210,7 +220,7 @@ exports.default = (0, vue_1.defineComponent)({
         (0, vue_1.watch)(activeHrefRef, (value) => {
             if (value === null) {
                 const { value: slotEl } = slotRef;
-                if (slotEl) {
+                if (slotEl && !isBlockTypeRef.value) {
                     slotEl.style.maxWidth = '0';
                 }
             }
@@ -220,18 +230,21 @@ exports.default = (0, vue_1.defineComponent)({
             barRef,
             slotRef,
             setActiveHref,
-            activeHref: activeHrefRef
+            activeHref: activeHrefRef,
+            isBlockType: isBlockTypeRef,
+            mergedShowRail: mergedShowRailRef
         };
     },
     render() {
         var _a;
-        const { mergedClsPrefix, $slots } = this;
+        const { mergedClsPrefix, mergedShowRail, isBlockType, $slots } = this;
         return ((0, vue_1.h)("div", { class: [
                 `${mergedClsPrefix}-anchor`,
-                this.showRail && `${mergedClsPrefix}-anchor--show-rail`
+                isBlockType && `${mergedClsPrefix}-anchor--block`,
+                mergedShowRail && `${mergedClsPrefix}-anchor--show-rail`
             ], ref: "selfRef" },
-            this.showRail && this.showBackground ? ((0, vue_1.h)("div", { ref: "slotRef", class: `${mergedClsPrefix}-anchor-link-background` })) : null,
-            this.showRail ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-anchor-rail` },
+            mergedShowRail && this.showBackground ? ((0, vue_1.h)("div", { ref: "slotRef", class: `${mergedClsPrefix}-anchor-link-background` })) : null,
+            mergedShowRail ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-anchor-rail` },
                 (0, vue_1.h)("div", { ref: "barRef", class: [
                         `${mergedClsPrefix}-anchor-rail__bar`,
                         this.activeHref !== null &&

package/lib/anchor/src/Link.js

@@ -35,11 +35,11 @@ exports.default = (0, vue_1.defineComponent)({
         }
         return () => {
             const { value: mergedClsPrefix } = NAnchor.mergedClsPrefix;
-            return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-anchor-link` },
-                (0, vue_1.h)("a", { ref: titleRef, class: [
-                        `${mergedClsPrefix}-anchor-link__title`,
-                        activeRef.value && `${mergedClsPrefix}-anchor-link__title--active`
-                    ], href: props.href, title: (0, _utils_1.getTitleAttribute)(props.title), onClick: handleClick }, props.title),
+            return ((0, vue_1.h)("div", { class: [
+                    `${mergedClsPrefix}-anchor-link`,
+                    activeRef.value && `${mergedClsPrefix}-anchor-link--active`
+                ] },
+                (0, vue_1.h)("a", { ref: titleRef, class: [`${mergedClsPrefix}-anchor-link__title`], href: props.href, title: (0, _utils_1.getTitleAttribute)(props.title), onClick: handleClick }, props.title),
                 (0, vue_1.renderSlot)(slots, 'default')));
         };
     }

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

@@ -16,18 +16,31 @@ const cssr_1 = require("../../../_utils/cssr"); // vars:
 // --rail-color-active
 // --rail-width
 // --link-padding
+// --link-border-radius
 
 
 exports.default = (0, cssr_1.cB)('anchor', `
- padding-left: var(--rail-width);
  position: relative;
-`, [(0, cssr_1.cB)('anchor-link-background', `
- position: absolute;
- left: calc(var(--rail-width) / 2);
- width: 100%;
+`, [(0, cssr_1.cNotM)('block', `
+ padding-left: var(--rail-width);
+ `, [(0, cssr_1.cB)('anchor-link', [(0, cssr_1.c)('+, >', [(0, cssr_1.cB)('anchor-link', `
+ margin-top: .5em;
+ `)])]), (0, cssr_1.cB)('anchor-link-background', `
  max-width: 0;
  border-top-right-radius: 10.5px;
  border-bottom-right-radius: 10.5px;
+ `), (0, cssr_1.cNotM)('show-rail', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('anchor-link', 'padding-left: 0;')])])]), (0, cssr_1.cM)('block', [(0, cssr_1.cB)('anchor-link', `
+ margin-bottom: 4px;
+ padding: 2px 8px;
+ transition: background-color .3s var(--bezier);
+ background-color: transparent;
+ border-radius: var(--link-border-radius);
+ `, [(0, cssr_1.cM)('active', `
+ background-color: var(--link-color);
+ `)])]), (0, cssr_1.cB)('anchor-link-background', `
+ position: absolute;
+ left: calc(var(--rail-width) / 2);
+ width: 100%;
  background-color: var(--link-color);
  transition:
  top .15s var(--bezier),
@@ -54,8 +67,6 @@ exports.default = (0, cssr_1.cB)('anchor', `
  background-color .3s var(--bezier);
  `, [(0, cssr_1.cM)('active', {
   backgroundColor: 'var(--rail-color-active)'
-})])]), (0, cssr_1.cNotM)('show-rail', [(0, cssr_1.c)('>', [(0, cssr_1.cB)('anchor-link', {
-  paddingLeft: 0
 })])]), (0, cssr_1.cB)('anchor-link', `
  padding: var(--link-padding);
  position: relative;
@@ -64,8 +75,12 @@ exports.default = (0, cssr_1.cB)('anchor', `
  min-height: 1.5em;
  display: flex;
  flex-direction: column;
- `, [(0, cssr_1.c)('+, >', [(0, cssr_1.cB)('anchor-link', `
- margin-top: .5em;
+ `, [(0, cssr_1.cM)('active', [(0, cssr_1.cE)('title', `
+ color: var(--link-text-color-active);
+ `)]), (0, cssr_1.c)('&:hover, &:focus', [(0, cssr_1.cE)('title', `
+ color: var(--link-text-color-hover);
+ `)]), (0, cssr_1.c)('&:active', [(0, cssr_1.cE)('title', `
+ color: var(--link-text-color-pressed);
  `)]), (0, cssr_1.cE)('title', `
  outline: none;
  max-width: 100%;
@@ -78,10 +93,4 @@ exports.default = (0, cssr_1.cB)('anchor', `
  padding-right: 16px;
  transition: color .3s var(--bezier);
  color: var(--link-text-color);
- `, [(0, cssr_1.c)('&:hover, &:focus', {
-  color: 'var(--link-text-color-hover)'
-}), (0, cssr_1.c)('&:active', {
-  color: 'var(--link-text-color-pressed)'
-}), (0, cssr_1.cM)('active', {
-  color: 'var(--link-text-color-active)'
-})])])]);
+ `)])]);

package/lib/auto-complete/index.d.ts

@@ -1,2 +1,3 @@
 export { default as NAutoComplete } from './src/AutoComplete';
 export type { AutoCompleteProps } from './src/AutoComplete';
+export type { AutoCompleteOption, AutoCompleteGroupOption } from './src/interface';

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

@@ -72,6 +72,7 @@ declare const autoCompleteProps: {
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -187,6 +188,7 @@ declare const autoCompleteProps: {
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -302,6 +304,7 @@ declare const autoCompleteProps: {
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -464,6 +467,7 @@ declare const _default: import("vue").DefineComponent<{
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -579,6 +583,7 @@ declare const _default: import("vue").DefineComponent<{
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -694,6 +699,7 @@ declare const _default: import("vue").DefineComponent<{
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -935,6 +941,7 @@ declare const _default: import("vue").DefineComponent<{
                 optionOpacityDisabled: string;
                 optionCheckColor: string;
                 optionColorPending: string;
+                optionColorActive: string;
                 actionTextColor: string;
                 loadingColor: string;
                 height: string;
@@ -1125,6 +1132,7 @@ declare const _default: import("vue").DefineComponent<{
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -1240,6 +1248,7 @@ declare const _default: import("vue").DefineComponent<{
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;
@@ -1355,6 +1364,7 @@ declare const _default: import("vue").DefineComponent<{
             optionOpacityDisabled: string;
             optionCheckColor: string;
             optionColorPending: string;
+            optionColorActive: string;
             actionTextColor: string;
             loadingColor: string;
             height: string;

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

@@ -1,7 +1,7 @@
 import { SelectGroupOption, SelectBaseOption } from '../../select/src/interface';
 export declare type AutoCompleteOption = SelectBaseOption<string, string>;
 export interface AutoCompleteGroupOption extends Omit<SelectGroupOption, 'children'> {
-    children: string[];
+    children: AutoCompleteOptions;
 }
 export declare type AutoCompleteOptions = Array<AutoCompleteOption | AutoCompleteGroupOption | string>;
 export declare type OnUpdateValue = (value: string & (string | null)) => void;

package/lib/auto-complete/styles/light.d.ts

@@ -25,6 +25,7 @@ declare const autoCompleteLight: import("../../_mixins").Theme<"AutoComplete", {
         optionOpacityDisabled: string;
         optionCheckColor: string;
         optionColorPending: string;
+        optionColorActive: string;
         actionTextColor: string;
         loadingColor: string;
         height: string;

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

@@ -63,6 +63,7 @@ exports.default = (0, cssr_1.c)([(0, cssr_1.c)('@keyframes badge-wave-spread', {
  left: 100%;
  bottom: calc(100% - 9px);
  font-variant-numeric: tabular-nums;
+ z-index: 1;
  `, [(0, fade_in_scale_up_cssr_1.default)({
   transformOrigin: 'left bottom',
   originalTransform: 'translateX(-50%)'