naive-ui 2.22.0 → 2.24.0

package/es/time-picker/src/TimePicker.js

@@ -33,13 +33,13 @@ const timePickerProps = Object.assign(Object.assign({}, useTheme.props), { to: u
     }, actions: Array, defaultValue: {
         type: Number,
         default: null
-    }, placeholder: String, placement: {
+    }, defaultFormattedValue: String, placeholder: String, placement: {
         type: String,
         default: 'bottom-start'
     }, value: Number, format: {
         type: String,
         default: 'HH:mm:ss'
-    }, isHourDisabled: Function, size: String, isMinuteDisabled: Function, isSecondDisabled: Function, inputReadonly: Boolean, clearable: Boolean, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onBlur: [Function, Array], onFocus: [Function, Array], 
+    }, valueFormat: String, formattedValue: String, isHourDisabled: Function, size: String, isMinuteDisabled: Function, isSecondDisabled: Function, inputReadonly: Boolean, clearable: Boolean, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onUpdateFormattedValue: [Function, Array], 'onUpdate:formattedValue': [Function, Array], onBlur: [Function, Array], onFocus: [Function, Array], 
     // private
     stateful: {
         type: Boolean,
@@ -84,14 +84,31 @@ export default defineComponent({
         const keyboardState = useKeyboard();
         const inputInstRef = ref(null);
         const panelInstRef = ref(null);
-        const uncontrolledValueRef = ref(props.defaultValue);
-        const controlledValueRef = toRef(props, 'value');
-        const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
         const dateFnsOptionsRef = computed(() => {
             return {
                 locale: dateLocaleRef.value.locale
             };
         });
+        function getTimestampFromFormattedValue(value) {
+            if (value === null)
+                return null;
+            return strictParse(value, props.valueFormat || props.format, new Date(), dateFnsOptionsRef.value).getTime();
+        }
+        const { defaultValue, defaultFormattedValue } = props;
+        const uncontrolledValueRef = ref(defaultFormattedValue !== undefined
+            ? getTimestampFromFormattedValue(defaultFormattedValue)
+            : defaultValue);
+        const mergedValueRef = computed(() => {
+            const { formattedValue } = props;
+            if (formattedValue !== undefined) {
+                return getTimestampFromFormattedValue(formattedValue);
+            }
+            const { value } = props;
+            if (value !== undefined) {
+                return value;
+            }
+            return uncontrolledValueRef.value;
+        });
         const { value: mergedValue } = mergedValueRef;
         const displayTimeStringRef = ref(mergedValue === null
             ? ''
@@ -192,15 +209,28 @@ export default defineComponent({
                 return null;
             return Number(format(value, 'ss', dateFnsOptionsRef.value));
         });
-        function doChange(value) {
+        function doUpdateFormattedValue(value, timestampValue) {
+            const { onUpdateFormattedValue, 'onUpdate:formattedValue': _onUpdateFormattedValue } = props;
+            if (onUpdateFormattedValue) {
+                call(onUpdateFormattedValue, value, timestampValue);
+            }
+            if (_onUpdateFormattedValue) {
+                call(_onUpdateFormattedValue, value, timestampValue);
+            }
+        }
+        function doUpdateValue(value) {
             const { onUpdateValue, 'onUpdate:value': _onUpdateValue, onChange } = props;
             const { nTriggerFormChange, nTriggerFormInput } = formItem;
-            if (onUpdateValue)
-                call(onUpdateValue, value);
-            if (_onUpdateValue)
-                call(_onUpdateValue, value);
+            const formattedValue = value === null ? null : format(value, props.valueFormat || props.format);
+            if (onUpdateValue) {
+                call(onUpdateValue, value, formattedValue);
+            }
+            if (_onUpdateValue) {
+                call(_onUpdateValue, value, formattedValue);
+            }
             if (onChange)
-                call(onChange, value);
+                call(onChange, value, formattedValue);
+            doUpdateFormattedValue(formattedValue, value);
             uncontrolledValueRef.value = value;
             nTriggerFormChange();
             nTriggerFormInput();
@@ -221,7 +251,7 @@ export default defineComponent({
         }
         function handleTimeInputClear(e) {
             e.stopPropagation();
-            doChange(null);
+            doUpdateValue(null);
             deriveInputValue(null);
         }
         function handleFocusDetectorFocus() {
@@ -264,30 +294,30 @@ export default defineComponent({
             if (typeof hour === 'string')
                 return;
             if (mergedValueRef.value === null) {
-                doChange(getTime(setHours(startOfHour(new Date()), hour)));
+                doUpdateValue(getTime(setHours(startOfHour(new Date()), hour)));
             }
             else {
-                doChange(getTime(setHours(mergedValueRef.value, hour)));
+                doUpdateValue(getTime(setHours(mergedValueRef.value, hour)));
             }
         }
         function handleMinuteClick(minute) {
             if (typeof minute === 'string')
                 return;
             if (mergedValueRef.value === null) {
-                doChange(getTime(setMinutes(startOfMinute(new Date()), minute)));
+                doUpdateValue(getTime(setMinutes(startOfMinute(new Date()), minute)));
             }
             else {
-                doChange(getTime(setMinutes(mergedValueRef.value, minute)));
+                doUpdateValue(getTime(setMinutes(mergedValueRef.value, minute)));
             }
         }
         function handleSecondClick(second) {
             if (typeof second === 'string')
                 return;
             if (mergedValueRef.value === null) {
-                doChange(getTime(setSeconds(startOfSecond(new Date()), second)));
+                doUpdateValue(getTime(setSeconds(startOfSecond(new Date()), second)));
             }
             else {
-                doChange(getTime(setSeconds(mergedValueRef.value, second)));
+                doUpdateValue(getTime(setSeconds(mergedValueRef.value, second)));
             }
         }
         function handleAmPmClick(amPm) {
@@ -296,20 +326,20 @@ export default defineComponent({
                 const now = new Date();
                 const hours = getHours(now);
                 if (amPm === 'pm' && hours < 12) {
-                    doChange(getTime(setHours(now, hours + 12)));
+                    doUpdateValue(getTime(setHours(now, hours + 12)));
                 }
                 else if (amPm === 'am' && hours >= 12) {
-                    doChange(getTime(setHours(now, hours - 12)));
+                    doUpdateValue(getTime(setHours(now, hours - 12)));
                 }
-                doChange(getTime(now));
+                doUpdateValue(getTime(now));
             }
             else {
                 const hours = getHours(mergedValue);
                 if (amPm === 'pm' && hours < 12) {
-                    doChange(getTime(setHours(mergedValue, hours + 12)));
+                    doUpdateValue(getTime(setHours(mergedValue, hours + 12)));
                 }
                 else if (amPm === 'am' && hours >= 12) {
-                    doChange(getTime(setHours(mergedValue, hours - 12)));
+                    doUpdateValue(getTime(setHours(mergedValue, hours - 12)));
                 }
             }
         }
@@ -408,7 +438,7 @@ export default defineComponent({
         }
         function handleTimeInputUpdateValue(v) {
             if (v === '') {
-                doChange(null);
+                doUpdateValue(null);
                 return;
             }
             const time = strictParse(v, props.format, new Date(), dateFnsOptionsRef.value);
@@ -421,15 +451,15 @@ export default defineComponent({
                         minutes: getMinutes(time),
                         seconds: getSeconds(time)
                     });
-                    doChange(getTime(newTime));
+                    doUpdateValue(getTime(newTime));
                 }
                 else {
-                    doChange(getTime(time));
+                    doUpdateValue(getTime(time));
                 }
             }
         }
         function handleCancelClick() {
-            doChange(memorizedValueRef.value);
+            doUpdateValue(memorizedValueRef.value);
             doUpdateShow(false);
         }
         function handleNowClick() {
@@ -443,7 +473,7 @@ export default defineComponent({
                 ? getNowTime[i](now)
                 : findSimilarTime(getNowTime[i](now), i, props[i]));
             const newValue = setSeconds(setMinutes(setHours(mergedValueRef.value ? mergedValueRef.value : getTime(now), mergeHours), mergeMinutes), mergeSeconds);
-            doChange(getTime(newValue));
+            doUpdateValue(getTime(newValue));
         }
         function handleConfirmClick() {
             deriveInputValue();
@@ -466,7 +496,7 @@ export default defineComponent({
         });
         watch(mergedShowRef, () => {
             if (isValueInvalidRef.value) {
-                doChange(memorizedValueRef.value);
+                doUpdateValue(memorizedValueRef.value);
             }
         });
         provide(timePickerInjectionKey, {
@@ -526,28 +556,28 @@ export default defineComponent({
             triggerCssVars: computed(() => {
                 const { common: { cubicBezierEaseInOut }, self: { iconColor, iconColorDisabled } } = themeRef.value;
                 return {
-                    '--icon-color': iconColor,
-                    '--icon-color-disabled': iconColorDisabled,
-                    '--bezier': cubicBezierEaseInOut
+                    '--n-icon-color': iconColor,
+                    '--n-icon-color-disabled': iconColorDisabled,
+                    '--n-bezier': cubicBezierEaseInOut
                 };
             }),
             cssVars: computed(() => {
                 const { self: { panelColor, itemTextColor, itemTextColorActive, itemColorHover, panelDividerColor, panelBoxShadow, itemOpacityDisabled, borderRadius, itemFontSize, itemWidth, itemHeight, panelActionPadding, itemBorderRadius }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--border-radius': borderRadius,
-                    '--item-color-hover': itemColorHover,
-                    '--item-font-size': itemFontSize,
-                    '--item-height': itemHeight,
-                    '--item-opacity-disabled': itemOpacityDisabled,
-                    '--item-text-color': itemTextColor,
-                    '--item-text-color-active': itemTextColorActive,
-                    '--item-width': itemWidth,
-                    '--panel-action-padding': panelActionPadding,
-                    '--panel-box-shadow': panelBoxShadow,
-                    '--panel-color': panelColor,
-                    '--panel-divider-color': panelDividerColor,
-                    '--item-border-radius': itemBorderRadius
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-border-radius': borderRadius,
+                    '--n-item-color-hover': itemColorHover,
+                    '--n-item-font-size': itemFontSize,
+                    '--n-item-height': itemHeight,
+                    '--n-item-opacity-disabled': itemOpacityDisabled,
+                    '--n-item-text-color': itemTextColor,
+                    '--n-item-text-color-active': itemTextColorActive,
+                    '--n-item-width': itemWidth,
+                    '--n-panel-action-padding': panelActionPadding,
+                    '--n-panel-box-shadow': panelBoxShadow,
+                    '--n-panel-color': panelColor,
+                    '--n-panel-divider-color': panelDividerColor,
+                    '--n-item-border-radius': itemBorderRadius
                 };
             })
         };

package/es/time-picker/src/interface.d.ts

@@ -20,8 +20,10 @@ export interface PanelRef {
     secondScrollRef?: ScrollbarInst;
     amPmScrollRef?: ScrollbarInst;
 }
-export declare type OnUpdateValue = <T extends number & (number | null)>(value: T) => void;
-export declare type OnUpdateValueImpl = (value: number | null) => void;
+export declare type OnUpdateValue = ((value: number, formattedValue: string) => void) & ((value: number | null, formattedValue: string | null) => void);
+export declare type OnUpdateValueImpl = (value: number | null, formattedValue: string | null) => void;
+export declare type OnUpdateFormattedValue = ((value: string, timestampValue: number) => void) & ((value: string | null, timestampValue: number | null) => void);
+export declare type OnUpdateFormattedValueImpl = (value: string | null, timestampValue: number | null) => void;
 export declare type IsHourDisabled = (hour: number) => boolean;
 export declare type IsMinuteDisabled = (minute: number, hour: number | null) => boolean;
 export declare type IsSecondDisabled = (second: number, minute: number | null, hour: number | null) => boolean;

package/es/time-picker/src/styles/index.cssr.js

@@ -1,99 +1,99 @@
 import { c, cE, cM, cB, cNotM } from '../../../_utils/cssr';
 import fadeInScaleUpTransition from '../../../_styles/transitions/fade-in-scale-up.cssr'; // vars:
-// --icon-color
-// --icon-color-disabled
-// --bezier
-// --border-radius
-// --item-color-hover
-// --item-font-size
-// --item-height
-// --item-opacity-disabled
-// --item-text-color
-// --item-text-color-active
-// --item-width
-// --panel-action-padding
-// --panel-box-shadow
-// --panel-color
-// --panel-divider-color
-// --item-border-radius
+// --n-icon-color
+// --n-icon-color-disabled
+// --n-bezier
+// --n-border-radius
+// --n-item-color-hover
+// --n-item-font-size
+// --n-item-height
+// --n-item-opacity-disabled
+// --n-item-text-color
+// --n-item-text-color-active
+// --n-item-width
+// --n-panel-action-padding
+// --n-panel-box-shadow
+// --n-panel-color
+// --n-panel-divider-color
+// --n-item-border-radius
 
 export default c([cB('time-picker', `
  z-index: auto;
  position: relative;
  `, [cB('time-picker-icon', `
- color: var(--icon-color);
- transition: color .3s var(--bezier);
+ color: var(--n-icon-color);
+ transition: color .3s var(--n-bezier);
  `), cM('disabled', [cB('time-picker-icon', {
-  color: 'var(--icon-color-disabled)'
+  color: 'var(--n-icon-color-disabled)'
 })])]), cB('time-picker-panel', `
  transition:
- box-shadow .3s var(--bezier),
- background-color .3s var(--bezier);
+ box-shadow .3s var(--n-bezier),
+ background-color .3s var(--n-bezier);
  outline: none;
- font-size: var(--item-font-size);
- border-radius: var(--border-radius);
+ font-size: var(--n-item-font-size);
+ border-radius: var(--n-border-radius);
  margin: 4px 0;
  min-width: 104px;
  overflow: hidden;
- background-color: var(--panel-color);
- box-shadow: var(--panel-box-shadow);
+ background-color: var(--n-panel-color);
+ box-shadow: var(--n-panel-box-shadow);
  `, [fadeInScaleUpTransition(), cB('time-picker-actions', `
- padding: var(--panel-action-padding);
+ padding: var(--n-panel-action-padding);
  align-items: center;
  display: flex;
  justify-content: space-evenly;
  `), cB('time-picker-cols', `
- height: calc(var(--item-height) * 6);
+ height: calc(var(--n-item-height) * 6);
  display: flex;
  position: relative;
- transition: border-color .3s var(--bezier);
- border-bottom: 1px solid var(--panel-divider-color);
+ transition: border-color .3s var(--n-bezier);
+ border-bottom: 1px solid var(--n-panel-divider-color);
  `), cB('time-picker-col', `
  flex-grow: 1;
- min-width: var(--item-width);
- height: calc(var(--item-height) * 6);
+ min-width: var(--n-item-width);
+ height: calc(var(--n-item-height) * 6);
  flex-direction: column;
- transition: box-shadow .3s var(--bezier);
+ transition: box-shadow .3s var(--n-bezier);
  `, [cM('transition-disabled', [cE('item', 'transition: none;', [c('&::before', 'transition: none;')])]), cE('padding', {
-  height: 'calc(var(--item-height) * 5)'
-}), c('&:first-child', 'min-width: calc(var(--item-width) + 4px);', [cE('item', [c('&::before', 'left: 4px;')])]), cE('item', `
+  height: 'calc(var(--n-item-height) * 5)'
+}), c('&:first-child', 'min-width: calc(var(--n-item-width) + 4px);', [cE('item', [c('&::before', 'left: 4px;')])]), cE('item', `
  cursor: pointer;
- height: var(--item-height);
+ height: var(--n-item-height);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 
- color .3s var(--bezier),
- background-color .3s var(--bezier),
- opacity .3s var(--bezier),
- text-decoration-color .3s var(--bezier);
+ color .3s var(--n-bezier),
+ background-color .3s var(--n-bezier),
+ opacity .3s var(--n-bezier),
+ text-decoration-color .3s var(--n-bezier);
  background: #0000;
  text-decoration-color: #0000;
- color: var(--item-text-color);
+ color: var(--n-item-text-color);
  z-index: 0;
  box-sizing: border-box;
  padding-top: 4px;
  position: relative;
  `, [c('&::before', `
  content: "";
- transition: background-color .3s var(--bezier);
+ transition: background-color .3s var(--n-bezier);
  z-index: -1;
  position: absolute;
  left: 0;
  right: 4px;
  top: 4px;
  bottom: 0;
- border-radius: var(--item-border-radius);
+ border-radius: var(--n-item-border-radius);
  `), cNotM('disabled', [c('&:hover::before', {
-  backgroundColor: 'var(--item-color-hover)'
+  backgroundColor: 'var(--n-item-color-hover)'
 })]), cM('active', `
- color: var(--item-text-color-active);
+ color: var(--n-item-text-color-active);
  `, [c('&::before', `
- background-color: var(--item-color-hover);
+ background-color: var(--n-item-color-hover);
  `)]), cM('disabled', `
- opacity: var(--item-opacity-disabled);
+ opacity: var(--n-item-opacity-disabled);
  cursor: not-allowed;
  `)]), cM('invalid', [cE('item', [cM('active', `
  text-decoration: line-through;
- text-decoration-color: var(--item-text-color-active);
+ text-decoration-color: var(--n-item-text-color-active);
  `)])])])])]);

package/es/timeline/src/TimelineItem.d.ts

@@ -23,18 +23,18 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     mergedClsPrefix: import("vue").Ref<string>;
     cssVars: import("vue").ComputedRef<{
-        '--bezier': string;
-        '--circle-border': string;
-        '--icon-color': string;
-        '--content-font-size': string;
-        '--content-text-color': string;
-        '--line-color': string;
-        '--meta-text-color': string;
-        '--title-font-size': string;
-        '--title-font-weight': string;
-        '--title-margin': string | number;
-        '--title-text-color': string;
-        '--icon-size': string;
+        '--n-bezier': string;
+        '--n-circle-border': string;
+        '--n-icon-color': string;
+        '--n-content-font-size': string;
+        '--n-content-text-color': string;
+        '--n-line-color': string;
+        '--n-meta-text-color': string;
+        '--n-title-font-size': string;
+        '--n-title-font-weight': string;
+        '--n-title-margin': string | number;
+        '--n-title-text-color': string;
+        '--n-icon-size': string;
     }>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     time?: unknown;

package/es/timeline/src/TimelineItem.js

@@ -26,18 +26,18 @@ export default defineComponent({
                 const { type } = props;
                 const { self: { titleTextColor, contentTextColor, metaTextColor, lineColor, titleFontWeight, contentFontSize, [createKey('iconSize', size)]: iconSize, [createKey('titleMargin', size)]: titleMargin, [createKey('titleFontSize', size)]: titleFontSize, [createKey('circleBorder', type)]: circleBorder, [createKey('iconColor', type)]: iconColor }, common: { cubicBezierEaseInOut } } = mergedThemeRef.value;
                 return {
-                    '--bezier': cubicBezierEaseInOut,
-                    '--circle-border': circleBorder,
-                    '--icon-color': iconColor,
-                    '--content-font-size': contentFontSize,
-                    '--content-text-color': contentTextColor,
-                    '--line-color': lineColor,
-                    '--meta-text-color': metaTextColor,
-                    '--title-font-size': titleFontSize,
-                    '--title-font-weight': titleFontWeight,
-                    '--title-margin': titleMargin,
-                    '--title-text-color': titleTextColor,
-                    '--icon-size': formatLength(iconSizeProp) || iconSize
+                    '--n-bezier': cubicBezierEaseInOut,
+                    '--n-circle-border': circleBorder,
+                    '--n-icon-color': iconColor,
+                    '--n-content-font-size': contentFontSize,
+                    '--n-content-text-color': contentTextColor,
+                    '--n-line-color': lineColor,
+                    '--n-meta-text-color': metaTextColor,
+                    '--n-title-font-size': titleFontSize,
+                    '--n-title-font-weight': titleFontWeight,
+                    '--n-title-margin': titleMargin,
+                    '--n-title-text-color': titleTextColor,
+                    '--n-icon-size': formatLength(iconSizeProp) || iconSize
                 };
             })
         };

package/es/timeline/src/styles/index.cssr.js

@@ -1,16 +1,16 @@
 import { c, cB, cE, cM } from '../../../_utils/cssr';
 const lineHeight = 1.25; // vars:
-// --bezier
-// --circle-border
-// --content-font-size
-// --content-text-color
-// --line-color
-// --meta-text-color
-// --title-font-size
-// --title-font-weight
-// --title-margin
-// --title-text-color
-// --icon-size
+// --n-bezier
+// --n-circle-border
+// --n-content-font-size
+// --n-content-text-color
+// --n-line-color
+// --n-meta-text-color
+// --n-title-font-size
+// --n-title-font-weight
+// --n-title-margin
+// --n-title-text-color
+// --n-icon-size
 
 export default cB('timeline', `
  position: relative;
@@ -24,27 +24,27 @@ export default cB('timeline', `
  flex-shrink: 0;
  padding-right: 40px;
  `, [cB('timeline-item-content', `
- margin-top: calc(var(--icon-size) + 12px);
+ margin-top: calc(var(--n-icon-size) + 12px);
  `, [cE('meta', `
  margin-top: 6px;
  margin-bottom: unset;
  `)]), cB('timeline-item-timeline', `
  width: 100%;
- height: calc(var(--icon-size) + 12px);
+ height: calc(var(--n-icon-size) + 12px);
  `, [cE('line', `
- left: var(--icon-size);
- top: calc(var(--icon-size) / 2 - 1px);
+ left: var(--n-icon-size);
+ top: calc(var(--n-icon-size) / 2 - 1px);
  right: 0px;
  width: unset;
  height: 2px;
  `)])])]), cM('right-placement', [cB('timeline-item', [cB('timeline-item-content', `
  text-align: right;
- margin-right: calc(var(--icon-size) + 12px);
+ margin-right: calc(var(--n-icon-size) + 12px);
  `), cB('timeline-item-timeline', `
- width: var(--icon-size);
+ width: var(--n-icon-size);
  right: 0;
  `)])]), cM('left-placement', [cB('timeline-item', [cB('timeline-item-content', `
- margin-left: calc(var(--icon-size) + 12px);
+ margin-left: calc(var(--n-icon-size) + 12px);
  `), cB('timeline-item-timeline', `
  left: 0;
  `)])]), cB('timeline-item', `
@@ -54,50 +54,50 @@ export default cB('timeline', `
  `)]), cB('timeline-item-content', [cE('meta', `
  margin-bottom: 0;
  `)])]), cB('timeline-item-content', [cE('title', `
- margin: var(--title-margin);
- font-size: var(--title-font-size);
- transition: color .3s var(--bezier);
- font-weight: var(--title-font-weight);
+ margin: var(--n-title-margin);
+ font-size: var(--n-title-font-size);
+ transition: color .3s var(--n-bezier);
+ font-weight: var(--n-title-font-weight);
  margin-bottom: 6px;
- color: var(--title-text-color);
+ color: var(--n-title-text-color);
  `), cE('content', `
- transition: color .3s var(--bezier);
- font-size: var(--content-font-size);
- color: var(--content-text-color);
+ transition: color .3s var(--n-bezier);
+ font-size: var(--n-content-font-size);
+ color: var(--n-content-text-color);
  `), cE('meta', `
- transition: color .3s var(--bezier);
+ transition: color .3s var(--n-bezier);
  font-size: 12px;
  margin-top: 6px;
  margin-bottom: 20px;
- color: var(--meta-text-color);
+ color: var(--n-meta-text-color);
  `)]), cB('timeline-item-timeline', `
- width: calc(var(--icon-size) + 12px);
+ width: calc(var(--n-icon-size) + 12px);
  position: absolute;
- top: calc(var(--title-font-size) * ${lineHeight} / 2 - var(--icon-size) / 2);
+ top: calc(var(--n-title-font-size) * ${lineHeight} / 2 - var(--n-icon-size) / 2);
  height: 100%;
  `, [cE('circle', `
- border: var(--circle-border);
+ border: var(--n-circle-border);
  transition:
- background-color .3s var(--bezier),
- border-color .3s var(--bezier);
- width: var(--icon-size);
- height: var(--icon-size);
- border-radius: var(--icon-size);
+ background-color .3s var(--n-bezier),
+ border-color .3s var(--n-bezier);
+ width: var(--n-icon-size);
+ height: var(--n-icon-size);
+ border-radius: var(--n-icon-size);
  box-sizing: border-box;
  `), cE('icon', `
- color: var(--icon-color);
- font-size: var(--icon-size);
- height: var(--icon-size);
- width: var(--icon-size);
+ color: var(--n-icon-color);
+ font-size: var(--n-icon-size);
+ height: var(--n-icon-size);
+ width: var(--n-icon-size);
  display: flex;
  align-items: center;
  justify-content: center;
  `), cE('line', `
- transition: background-color .3s var(--bezier);
+ transition: background-color .3s var(--n-bezier);
  position: absolute;
- top: var(--icon-size);
- left: calc(var(--icon-size) / 2 - 1px);
+ top: var(--n-icon-size);
+ left: calc(var(--n-icon-size) / 2 - 1px);
  bottom: 0px;
  width: 2px;
- background-color: var(--line-color);
+ background-color: var(--n-line-color);
  `)])])]);

package/es/tooltip/src/Tooltip.d.ts

@@ -133,6 +133,7 @@ declare const tooltipProps: {
         type: import("vue").PropType<import("../../popover/src/Popover").TriggerEventHandlers[]>;
         default: () => never[];
     };
+    internalTrapFocus: BooleanConstructor;
     onShow: import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
     onHide: import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
     arrow: {
@@ -275,6 +276,7 @@ declare const _default: import("vue").DefineComponent<{
         type: import("vue").PropType<import("../../popover/src/Popover").TriggerEventHandlers[]>;
         default: () => never[];
     };
+    internalTrapFocus: BooleanConstructor;
     onShow: import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
     onHide: import("vue").PropType<import("../../_utils").MaybeArray<(value: boolean) => void> | undefined>;
     arrow: {
@@ -462,6 +464,7 @@ declare const _default: import("vue").DefineComponent<{
     to?: unknown;
     internalSyncTargetWithParent?: unknown;
     internalInheritedEventHandlers?: unknown;
+    internalTrapFocus?: unknown;
     onShow?: unknown;
     onHide?: unknown;
     arrow?: unknown;
@@ -478,6 +481,7 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
+    internalTrapFocus: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];
@@ -580,6 +584,7 @@ declare const _default: import("vue").DefineComponent<{
     showArrow: boolean;
     delay: number;
     displayDirective: "show" | "if";
+    internalTrapFocus: boolean;
     animated: boolean;
     defaultShow: boolean;
     internalExtraClass: string[];