naive-ui 2.18.1 → 2.19.2

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

@@ -1,13 +1,6 @@
 declare const _default: {
-    heightTiny: string;
-    heightSmall: string;
-    heightMedium: string;
-    heightLarge: string;
-    fontSizeTiny: string;
-    fontSizeSmall: string;
-    fontSizeMedium: string;
-    fontSizeLarge: string;
     paddingSingle: string;
     clearSize: string;
+    arrowSize: string;
 };
 export default _default;

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

@@ -1,14 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
-    heightTiny: '22px',
-    heightSmall: '28px',
-    heightMedium: '34px',
-    heightLarge: '40px',
-    fontSizeTiny: '12px',
-    fontSizeSmall: '14px',
-    fontSizeMedium: '14px',
-    fontSizeLarge: '15px',
     paddingSingle: '0 26px 0 14px',
-    clearSize: '16px'
+    clearSize: '16px',
+    arrowSize: '16px'
 };

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

@@ -11,8 +11,16 @@ const internalSelectionDark = {
         Popover: styles_1.popoverDark
     },
     self(vars) {
-        const { borderRadius, textColor2, textColorDisabled, inputColor, inputColorDisabled, primaryColor, primaryColorHover, warningColor, warningColorHover, errorColor, errorColorHover, iconColor, iconColorDisabled, clearColor, clearColorHover, clearColorPressed, placeholderColor, placeholderColorDisabled } = vars;
-        return Object.assign(Object.assign({}, _common_1.default), { borderRadius: borderRadius, 
+        const { borderRadius, textColor2, textColorDisabled, inputColor, inputColorDisabled, primaryColor, primaryColorHover, warningColor, warningColorHover, errorColor, errorColorHover, iconColor, iconColorDisabled, clearColor, clearColorHover, clearColorPressed, placeholderColor, placeholderColorDisabled, fontSizeTiny, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightTiny, heightSmall, heightMedium, heightLarge } = vars;
+        return Object.assign(Object.assign({}, _common_1.default), { fontSizeTiny,
+            fontSizeSmall,
+            fontSizeMedium,
+            fontSizeLarge,
+            heightTiny,
+            heightSmall,
+            heightMedium,
+            heightLarge,
+            borderRadius, 
             // default
             textColor: textColor2, textColorDisabled,
             placeholderColor,

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

@@ -1,5 +1,13 @@
 import type { ThemeCommonVars } from '../../../_styles/common';
 declare const self: (vars: ThemeCommonVars) => {
+    fontSizeTiny: string;
+    fontSizeSmall: string;
+    fontSizeMedium: string;
+    fontSizeLarge: string;
+    heightTiny: string;
+    heightSmall: string;
+    heightMedium: string;
+    heightLarge: string;
     borderRadius: string;
     textColor: string;
     textColorDisabled: string;
@@ -40,19 +48,20 @@ declare const self: (vars: ThemeCommonVars) => {
     clearColor: string;
     clearColorHover: string;
     clearColorPressed: string;
-    heightTiny: string;
-    heightSmall: string;
-    heightMedium: string;
-    heightLarge: string;
-    fontSizeTiny: string;
-    fontSizeSmall: string;
-    fontSizeMedium: string;
-    fontSizeLarge: string;
     paddingSingle: string;
     clearSize: string;
+    arrowSize: string;
 };
 export declare type InternalSelectionThemeVars = ReturnType<typeof self>;
 declare const internalSelectionLight: import("../../../_mixins").Theme<"InternalSelection", {
+    fontSizeTiny: string;
+    fontSizeSmall: string;
+    fontSizeMedium: string;
+    fontSizeLarge: string;
+    heightTiny: string;
+    heightSmall: string;
+    heightMedium: string;
+    heightLarge: string;
     borderRadius: string;
     textColor: string;
     textColorDisabled: string;
@@ -93,16 +102,9 @@ declare const internalSelectionLight: import("../../../_mixins").Theme<"Internal
     clearColor: string;
     clearColorHover: string;
     clearColorPressed: string;
-    heightTiny: string;
-    heightSmall: string;
-    heightMedium: string;
-    heightLarge: string;
-    fontSizeTiny: string;
-    fontSizeSmall: string;
-    fontSizeMedium: string;
-    fontSizeLarge: string;
     paddingSingle: string;
     clearSize: string;
+    arrowSize: string;
 }, {
     Popover: import("../../../_mixins").Theme<"Popover", {
         fontSize: string;

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

@@ -6,8 +6,16 @@ const styles_1 = require("../../../popover/styles");
 const _common_1 = require("./_common");
 const _mixins_1 = require("../../../_mixins");
 const self = (vars) => {
-    const { borderRadius, textColor2, textColorDisabled, inputColor, inputColorDisabled, primaryColor, primaryColorHover, warningColor, warningColorHover, errorColor, errorColorHover, borderColor, iconColor, iconColorDisabled, clearColor, clearColorHover, clearColorPressed, placeholderColor, placeholderColorDisabled } = vars;
-    return Object.assign(Object.assign({}, _common_1.default), { borderRadius: borderRadius, 
+    const { borderRadius, textColor2, textColorDisabled, inputColor, inputColorDisabled, primaryColor, primaryColorHover, warningColor, warningColorHover, errorColor, errorColorHover, borderColor, iconColor, iconColorDisabled, clearColor, clearColorHover, clearColorPressed, placeholderColor, placeholderColorDisabled, fontSizeTiny, fontSizeSmall, fontSizeMedium, fontSizeLarge, heightTiny, heightSmall, heightMedium, heightLarge } = vars;
+    return Object.assign(Object.assign({}, _common_1.default), { fontSizeTiny,
+        fontSizeSmall,
+        fontSizeMedium,
+        fontSizeLarge,
+        heightTiny,
+        heightSmall,
+        heightMedium,
+        heightLarge,
+        borderRadius, 
         // default
         textColor: textColor2, textColorDisabled,
         placeholderColor,

package/lib/_mixins/use-rtl.js

@@ -25,7 +25,7 @@ function useRtl(mountId, rtlStateRef, clsPrefixRef) {
             // if it already exists, we only need to watch clsPrefix, although in most
             // of time it's unnecessary... However we can at least listen less
             // handlers, which is great.
-            if ((0, css_render_1.exists)(id))
+            if ((0, css_render_1.exists)(id, ssrAdapter))
                 return;
             const { value: componentRtlState } = componentRtlStateRef;
             if (!componentRtlState)

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/alert/src/Alert.js

@@ -98,20 +98,20 @@ exports.default = (0, vue_1.defineComponent)({
         };
     },
     render() {
-        const { mergedClsPrefix } = this;
         return ((0, vue_1.h)(_internal_1.NFadeInExpandTransition, { onAfterLeave: this.handleAfterLeave }, {
-            default: () => this.visible
-                ? (0, vue_1.h)('div', (0, vue_1.mergeProps)(this.$attrs, {
+            default: () => {
+                const { mergedClsPrefix, $slots } = this;
+                const attrs = {
                     class: [
                         `${mergedClsPrefix}-alert`,
-                        {
-                            [`${mergedClsPrefix}-alert--show-icon`]: this.showIcon
-                        }
+                        this.showIcon && `${mergedClsPrefix}-alert--show-icon`
                     ],
-                    style: this.cssVars
-                }), [
-                    this.closable ? ((0, vue_1.h)(_internal_1.NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-alert__close`, onClick: this.handleCloseClick })) : null,
-                    this.showIcon ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert__icon` }, this.$slots.icon ? ((0, vue_1.renderSlot)(this.$slots, 'icon')) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
+                    style: this.cssVars,
+                    role: 'alert'
+                };
+                return this.visible ? ((0, vue_1.h)("div", Object.assign({}, (0, vue_1.mergeProps)(this.$attrs, attrs)),
+                    this.closable && ((0, vue_1.h)(_internal_1.NBaseClose, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-alert__close`, onClick: this.handleCloseClick })),
+                    this.showIcon && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert__icon`, "aria-hidden": "true" }, $slots.icon ? ($slots.icon()) : ((0, vue_1.h)(_internal_1.NBaseIcon, { clsPrefix: mergedClsPrefix }, {
                         default: () => {
                             switch (this.type) {
                                 case 'success':
@@ -126,14 +126,13 @@ exports.default = (0, vue_1.defineComponent)({
                                     return null;
                             }
                         }
-                    })))) : null,
+                    })))),
                     (0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert-body` },
-                        this.title !== undefined ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert-body__title` }, (0, vue_1.renderSlot)(this.$slots, 'header', undefined, () => [
+                        this.title !== undefined && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert-body__title` }, (0, vue_1.renderSlot)($slots, 'header', undefined, () => [
                             this.title
-                        ]))) : null,
-                        this.$slots.default ? ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert-body__content` }, this.$slots)) : null)
-                ])
-                : null
+                        ]))),
+                        $slots.default && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-alert-body__content` }, $slots))))) : null;
+            }
         }));
     }
 });

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')));
         };
     }