naive-ui 2.18.1 → 2.19.2

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%)'

package/lib/card/src/Card.d.ts

@@ -10,6 +10,7 @@ export declare const cardBaseProps: {
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly headerStyle: PropType<string | CSSProperties>;
     readonly footerStyle: PropType<string | CSSProperties>;
+    readonly embedded: BooleanConstructor;
     readonly segmented: {
         readonly type: PropType<boolean | Segmented>;
         readonly default: false;
@@ -29,12 +30,13 @@ export declare const cardBaseProps: {
     readonly hoverable: BooleanConstructor;
     readonly onClose: PropType<MaybeArray<() => void>>;
 };
-export declare const cardBasePropKeys: ("size" | "title" | "contentStyle" | "bordered" | "onClose" | "closable" | "hoverable" | "headerStyle" | "footerStyle" | "segmented")[];
+export declare const cardBasePropKeys: ("size" | "title" | "contentStyle" | "bordered" | "onClose" | "closable" | "hoverable" | "headerStyle" | "footerStyle" | "embedded" | "segmented")[];
 declare const cardProps: {
     title: StringConstructor;
     contentStyle: PropType<string | CSSProperties>;
     headerStyle: PropType<string | CSSProperties>;
     footerStyle: PropType<string | CSSProperties>;
+    embedded: BooleanConstructor;
     segmented: {
         readonly type: PropType<boolean | Segmented>;
         readonly default: false;
@@ -59,6 +61,7 @@ declare const cardProps: {
         colorModal: string;
         colorPopover: string;
         colorTarget: string;
+        colorEmbedded: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -89,6 +92,7 @@ declare const cardProps: {
         colorModal: string;
         colorPopover: string;
         colorTarget: string;
+        colorEmbedded: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -119,6 +123,7 @@ declare const cardProps: {
         colorModal: string;
         colorPopover: string;
         colorTarget: string;
+        colorEmbedded: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -150,6 +155,7 @@ declare const _default: import("vue").DefineComponent<{
     contentStyle: PropType<string | CSSProperties>;
     headerStyle: PropType<string | CSSProperties>;
     footerStyle: PropType<string | CSSProperties>;
+    embedded: BooleanConstructor;
     segmented: {
         readonly type: PropType<boolean | Segmented>;
         readonly default: false;
@@ -174,6 +180,7 @@ declare const _default: import("vue").DefineComponent<{
         colorModal: string;
         colorPopover: string;
         colorTarget: string;
+        colorEmbedded: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -204,6 +211,7 @@ declare const _default: import("vue").DefineComponent<{
         colorModal: string;
         colorPopover: string;
         colorTarget: string;
+        colorEmbedded: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -234,6 +242,7 @@ declare const _default: import("vue").DefineComponent<{
         colorModal: string;
         colorPopover: string;
         colorTarget: string;
+        colorEmbedded: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -367,6 +376,7 @@ declare const _default: import("vue").DefineComponent<{
             colorModal: string;
             colorPopover: string;
             colorTarget: string;
+            colorEmbedded: string;
             textColor: string;
             titleTextColor: string;
             borderColor: string;
@@ -426,6 +436,7 @@ declare const _default: import("vue").DefineComponent<{
     contentStyle?: unknown;
     headerStyle?: unknown;
     footerStyle?: unknown;
+    embedded?: unknown;
     segmented?: unknown;
     size?: unknown;
     bordered?: unknown;
@@ -440,6 +451,7 @@ declare const _default: import("vue").DefineComponent<{
     bordered: boolean;
     closable: boolean;
     hoverable: boolean;
+    embedded: boolean;
     segmented: boolean | Segmented;
 } & {
     title?: string | undefined;
@@ -449,6 +461,7 @@ declare const _default: import("vue").DefineComponent<{
         colorModal: string;
         colorPopover: string;
         colorTarget: string;
+        colorEmbedded: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -479,6 +492,7 @@ declare const _default: import("vue").DefineComponent<{
         colorModal: string;
         colorPopover: string;
         colorTarget: string;
+        colorEmbedded: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -509,6 +523,7 @@ declare const _default: import("vue").DefineComponent<{
         colorModal: string;
         colorPopover: string;
         colorTarget: string;
+        colorEmbedded: string;
         textColor: string;
         titleTextColor: string;
         borderColor: string;
@@ -542,6 +557,7 @@ declare const _default: import("vue").DefineComponent<{
     bordered: boolean;
     closable: boolean;
     hoverable: boolean;
+    embedded: boolean;
     segmented: boolean | Segmented;
 }>;
 export default _default;

package/lib/card/src/Card.js

@@ -14,6 +14,7 @@ exports.cardBaseProps = {
     contentStyle: [Object, String],
     headerStyle: [Object, String],
     footerStyle: [Object, String],
+    embedded: Boolean,
     segmented: {
         type: [Boolean, Object],
         default: false
@@ -54,12 +55,12 @@ exports.default = (0, vue_1.defineComponent)({
             handleCloseClick,
             cssVars: (0, vue_1.computed)(() => {
                 const { size } = props;
-                const { self: { color, colorModal, colorTarget, textColor, titleTextColor, titleFontWeight, borderColor, actionColor, borderRadius, closeColor, closeColorHover, closeColorPressed, lineHeight, closeSize, boxShadow, colorPopover, [(0, _utils_1.createKey)('padding', size)]: padding, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('titleFontSize', size)]: titleFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
+                const { self: { color, colorModal, colorTarget, textColor, titleTextColor, titleFontWeight, borderColor, actionColor, borderRadius, closeColor, closeColorHover, closeColorPressed, lineHeight, closeSize, boxShadow, colorPopover, colorEmbedded, [(0, _utils_1.createKey)('padding', size)]: padding, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('titleFontSize', size)]: titleFontSize }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 const { top: paddingTop, left: paddingLeft, bottom: paddingBottom } = (0, seemly_1.getPadding)(padding);
                 return {
                     '--bezier': cubicBezierEaseInOut,
                     '--border-radius': borderRadius,
-                    '--color': color,
+                    '--color': props.embedded ? colorEmbedded : color,
                     '--color-modal': colorModal,
                     '--color-popover': colorPopover,
                     '--color-target': colorTarget,

package/lib/card/styles/dark.js

@@ -5,6 +5,11 @@ const light_1 = require("./light");
 const cardDark = {
     name: 'Card',
     common: common_1.commonDark,
-    self: light_1.self
+    self(vars) {
+        const commonSelf = (0, light_1.self)(vars);
+        const { cardColor } = vars;
+        commonSelf.colorEmbedded = cardColor;
+        return commonSelf;
+    }
 };
 exports.default = cardDark;

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

@@ -6,6 +6,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     colorModal: string;
     colorPopover: string;
     colorTarget: string;
+    colorEmbedded: string;
     textColor: string;
     titleTextColor: string;
     borderColor: string;

package/lib/card/styles/light.js

@@ -4,8 +4,8 @@ exports.self = void 0;
 const common_1 = require("../../_styles/common");
 const _common_1 = require("./_common");
 const self = (vars) => {
-    const { primaryColor, borderRadius, lineHeight, fontSize, cardColor, textColor2, textColor1, dividerColor, actionColor, fontWeightStrong, closeColor, closeColorHover, closeColorPressed, modalColor, boxShadow1, popoverColor } = vars;
-    return Object.assign(Object.assign({}, _common_1.default), { lineHeight, color: cardColor, colorModal: modalColor, colorPopover: popoverColor, colorTarget: primaryColor, textColor: textColor2, titleTextColor: textColor1, borderColor: dividerColor, actionColor: actionColor, titleFontWeight: fontWeightStrong, closeColor: closeColor, closeColorHover: closeColorHover, closeColorPressed: closeColorPressed, fontSizeSmall: fontSize, fontSizeMedium: fontSize, fontSizeLarge: fontSize, fontSizeHuge: fontSize, boxShadow: boxShadow1, borderRadius });
+    const { primaryColor, borderRadius, lineHeight, fontSize, cardColor, textColor2, textColor1, dividerColor, fontWeightStrong, closeColor, closeColorHover, closeColorPressed, modalColor, boxShadow1, popoverColor, actionColor } = vars;
+    return Object.assign(Object.assign({}, _common_1.default), { lineHeight, color: cardColor, colorModal: modalColor, colorPopover: popoverColor, colorTarget: primaryColor, colorEmbedded: actionColor, textColor: textColor2, titleTextColor: textColor1, borderColor: dividerColor, actionColor: actionColor, titleFontWeight: fontWeightStrong, closeColor: closeColor, closeColorHover: closeColorHover, closeColorPressed: closeColorPressed, fontSizeSmall: fontSize, fontSizeMedium: fontSize, fontSizeLarge: fontSize, fontSizeHuge: fontSize, boxShadow: boxShadow1, borderRadius });
 };
 exports.self = self;
 const cardLight = {