naive-ui 2.23.2 → 2.24.3

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,45 +496,25 @@ export default defineComponent({
         });
         watch(mergedShowRef, () => {
             if (isValueInvalidRef.value) {
-                doChange(memorizedValueRef.value);
+                doUpdateValue(memorizedValueRef.value);
             }
         });
         provide(timePickerInjectionKey, {
             mergedThemeRef: themeRef,
             mergedClsPrefixRef
         });
-        return {
-            mergedBordered: mergedBorderedRef,
-            mergedClsPrefix: mergedClsPrefixRef,
-            namespace: namespaceRef,
-            uncontrolledValue: uncontrolledValueRef,
-            mergedValue: mergedValueRef,
-            isMounted: useIsMounted(),
-            inputInstRef,
-            panelInstRef,
-            adjustedTo: useAdjustedTo(props),
-            mergedShow: mergedShowRef,
-            localizedNow: localizedNowRef,
-            localizedPlaceholder: localizedPlaceholderRef,
-            localizedNegativeText: localizedNegativeTextRef,
-            localizedPositiveText: localizedPositiveTextRef,
-            hourInFormat: hourInFormatRef,
-            minuteInFormat: minuteInFormatRef,
-            secondInFormat: secondInFormatRef,
-            mergedAttrSize: mergedAttrSizeRef,
-            displayTimeString: displayTimeStringRef,
-            mergedSize: mergedSizeRef,
-            mergedDisabled: mergedDisabledRef,
-            isValueInvalid: isValueInvalidRef,
-            isHourInvalid: isHourInvalidRef,
-            isMinuteInvalid: isMinuteInvalidRef,
-            isSecondInvalid: isSecondInvalidRef,
-            transitionDisabled: transitionDisabledRef,
-            hourValue: hourValueRef,
-            minuteValue: minuteValueRef,
-            secondValue: secondValueRef,
-            amPmValue: amPmValueRef,
-            handleTimeInputFocus,
+        const exposedMethods = {
+            focus: () => {
+                var _a;
+                (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.focus();
+            },
+            blur: () => {
+                var _a;
+                (_a = inputInstRef.value) === null || _a === void 0 ? void 0 : _a.blur();
+            }
+        };
+        return Object.assign(Object.assign({}, exposedMethods), { mergedBordered: mergedBorderedRef, mergedClsPrefix: mergedClsPrefixRef, namespace: namespaceRef, uncontrolledValue: uncontrolledValueRef, mergedValue: mergedValueRef, isMounted: useIsMounted(), inputInstRef,
+            panelInstRef, adjustedTo: useAdjustedTo(props), mergedShow: mergedShowRef, localizedNow: localizedNowRef, localizedPlaceholder: localizedPlaceholderRef, localizedNegativeText: localizedNegativeTextRef, localizedPositiveText: localizedPositiveTextRef, hourInFormat: hourInFormatRef, minuteInFormat: minuteInFormatRef, secondInFormat: secondInFormatRef, mergedAttrSize: mergedAttrSizeRef, displayTimeString: displayTimeStringRef, mergedSize: mergedSizeRef, mergedDisabled: mergedDisabledRef, isValueInvalid: isValueInvalidRef, isHourInvalid: isHourInvalidRef, isMinuteInvalid: isMinuteInvalidRef, isSecondInvalid: isSecondInvalidRef, transitionDisabled: transitionDisabledRef, hourValue: hourValueRef, minuteValue: minuteValueRef, secondValue: secondValueRef, amPmValue: amPmValueRef, handleTimeInputFocus,
             handleTimeInputBlur,
             handleNowClick,
             handleConfirmClick,
@@ -521,17 +531,14 @@ export default defineComponent({
             handleTimeInputClear,
             handleFocusDetectorFocus,
             handleMenuKeyDown,
-            handleTriggerClick,
-            mergedTheme: themeRef,
-            triggerCssVars: computed(() => {
+            handleTriggerClick, mergedTheme: themeRef, triggerCssVars: computed(() => {
                 const { common: { cubicBezierEaseInOut }, self: { iconColor, iconColorDisabled } } = themeRef.value;
                 return {
                     '--n-icon-color': iconColor,
                     '--n-icon-color-disabled': iconColorDisabled,
                     '--n-bezier': cubicBezierEaseInOut
                 };
-            }),
-            cssVars: computed(() => {
+            }), cssVars: computed(() => {
                 const { self: { panelColor, itemTextColor, itemTextColorActive, itemColorHover, panelDividerColor, panelBoxShadow, itemOpacityDisabled, borderRadius, itemFontSize, itemWidth, itemHeight, panelActionPadding, itemBorderRadius }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 return {
                     '--n-bezier': cubicBezierEaseInOut,
@@ -549,11 +556,10 @@ export default defineComponent({
                     '--n-panel-divider-color': panelDividerColor,
                     '--n-item-border-radius': itemBorderRadius
                 };
-            })
-        };
+            }) });
     },
     render() {
-        const { mergedClsPrefix } = this;
+        const { mergedClsPrefix, $slots } = this;
         return (h("div", { class: `${mergedClsPrefix}-time-picker`, style: this.triggerCssVars },
             h(VBinder, null, {
                 default: () => [
@@ -561,7 +567,7 @@ export default defineComponent({
                         default: () => (h(NInput, { ref: "inputInstRef", value: this.displayTimeString, bordered: this.mergedBordered, passivelyActivated: true, attrSize: this.mergedAttrSize, theme: this.mergedTheme.peers.Input, themeOverrides: this.mergedTheme.peerOverrides.Input, stateful: this.stateful, size: this.mergedSize, placeholder: this.localizedPlaceholder, clearable: this.clearable, disabled: this.mergedDisabled, textDecoration: this.isValueInvalid ? 'line-through' : undefined, onFocus: this.handleTimeInputFocus, onBlur: this.handleTimeInputBlur, onActivate: this.handleTimeInputActivate, onDeactivate: this.handleTimeInputDeactivate, onUpdateValue: this.handleTimeInputUpdateValue, onClear: this.handleTimeInputClear, internalDeactivateOnEnter: true, internalForceFocus: this.mergedShow, readonly: this.inputReadonly || this.mergedDisabled, onClick: this.handleTriggerClick }, this.showIcon
                             ? {
                                 [this.clearable ? 'clear' : 'suffix']: () => (h(NBaseIcon, { clsPrefix: mergedClsPrefix, class: `${mergedClsPrefix}-time-picker-icon` }, {
-                                    default: () => h(TimeIcon, null)
+                                    default: () => $slots.icon ? $slots.icon() : h(TimeIcon, null)
                                 }))
                             }
                             : null))

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

@@ -1,4 +1,4 @@
-import { InjectionKey, Ref } from 'vue';
+import { Ref } from 'vue';
 import { ScrollbarInst } from '../../_internal';
 import type { MergedTheme } from '../../_mixins';
 import type { TimePickerTheme } from '../styles';
@@ -12,7 +12,7 @@ export interface TimePickerInjection {
     mergedThemeRef: Ref<MergedTheme<TimePickerTheme>>;
     mergedClsPrefixRef: Ref<string>;
 }
-export declare const timePickerInjectionKey: InjectionKey<TimePickerInjection>;
+export declare const timePickerInjectionKey: import("vue").InjectionKey<TimePickerInjection>;
 export interface PanelRef {
     $el: HTMLElement;
     hourScrollRef?: ScrollbarInst;
@@ -20,9 +20,15 @@ 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;
 export declare type Size = 'small' | 'medium' | 'large';
+export interface TimePickerInst {
+    focus: () => void;
+    blur: () => void;
+}

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

@@ -1 +1,2 @@
-export const timePickerInjectionKey = Symbol('timePicker');
+import { createInjectionKey } from '../../_utils';
+export const timePickerInjectionKey = createInjectionKey('n-time-picker');

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

@@ -1,7 +1,7 @@
-import { PropType, ExtractPropTypes, InjectionKey, Ref } from 'vue';
+import { PropType, ExtractPropTypes, Ref } from 'vue';
 import { MergedTheme } from '../../_mixins';
 import type { TimelineTheme } from '../styles';
-import type { ExtractPublicPropTypes } from '../../_utils';
+import { ExtractPublicPropTypes } from '../../_utils';
 declare const timelineProps: {
     readonly horizontal: BooleanConstructor;
     readonly itemPlacement: {
@@ -91,7 +91,7 @@ export interface TimelineInjection {
     mergedThemeRef: Ref<MergedTheme<TimelineTheme>>;
     mergedClsPrefixRef: Ref<string>;
 }
-export declare const timelineInjectionKey: InjectionKey<TimelineInjection>;
+export declare const timelineInjectionKey: import("vue").InjectionKey<TimelineInjection>;
 export declare type TimelineProps = ExtractPublicPropTypes<typeof timelineProps>;
 declare const _default: import("vue").DefineComponent<{
     readonly horizontal: BooleanConstructor;
@@ -176,20 +176,18 @@ declare const _default: import("vue").DefineComponent<{
         iconSizeMedium: string;
         iconSizeLarge: string;
     }, any>>>;
-}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly horizontal?: unknown;
-    readonly itemPlacement?: unknown;
-    readonly size?: unknown;
-    readonly iconSize?: unknown;
-    readonly theme?: unknown;
-    readonly themeOverrides?: unknown;
-    readonly builtinThemeOverrides?: unknown;
-} & {
-    size: "medium" | "large";
-    horizontal: boolean;
-    itemPlacement: "left" | "right";
-} & {
-    theme?: import("../../_mixins").Theme<"Timeline", {
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    readonly horizontal: BooleanConstructor;
+    readonly itemPlacement: {
+        readonly type: PropType<"left" | "right">;
+        readonly default: "left";
+    };
+    readonly size: {
+        readonly type: PropType<"medium" | "large">;
+        readonly default: "medium";
+    };
+    readonly iconSize: NumberConstructor;
+    readonly theme: PropType<import("../../_mixins").Theme<"Timeline", {
         contentFontSize: string;
         titleFontWeight: string;
         circleBorder: string;
@@ -212,8 +210,8 @@ declare const _default: import("vue").DefineComponent<{
         titleFontSizeLarge: string;
         iconSizeMedium: string;
         iconSizeLarge: string;
-    }, any> | undefined;
-    themeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Timeline", {
+    }, any>>;
+    readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Timeline", {
         contentFontSize: string;
         titleFontWeight: string;
         circleBorder: string;
@@ -236,8 +234,8 @@ declare const _default: import("vue").DefineComponent<{
         titleFontSizeLarge: string;
         iconSizeMedium: string;
         iconSizeLarge: string;
-    }, any>> | undefined;
-    builtinThemeOverrides?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Timeline", {
+    }, any>>>;
+    readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Timeline", {
         contentFontSize: string;
         titleFontWeight: string;
         circleBorder: string;
@@ -260,9 +258,8 @@ declare const _default: import("vue").DefineComponent<{
         titleFontSizeLarge: string;
         iconSizeMedium: string;
         iconSizeLarge: string;
-    }, any>> | undefined;
-    iconSize?: number | undefined;
-}>, {
+    }, any>>>;
+}>>, {
     size: "medium" | "large";
     horizontal: boolean;
     itemPlacement: "left" | "right";

package/es/timeline/src/Timeline.js

@@ -1,5 +1,6 @@
 import { h, defineComponent, provide } from 'vue';
 import { useConfig, useTheme } from '../../_mixins';
+import { createInjectionKey } from '../../_utils';
 import { timelineLight } from '../styles';
 import style from './styles/index.cssr';
 const timelineProps = Object.assign(Object.assign({}, useTheme.props), { horizontal: Boolean, itemPlacement: {
@@ -9,7 +10,7 @@ const timelineProps = Object.assign(Object.assign({}, useTheme.props), { horizon
         type: String,
         default: 'medium'
     }, iconSize: Number });
-export const timelineInjectionKey = Symbol('timeline');
+export const timelineInjectionKey = createInjectionKey('n-timeline');
 export default defineComponent({
     name: 'Timeline',
     props: timelineProps,

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

@@ -36,20 +36,16 @@ declare const _default: import("vue").DefineComponent<{
         '--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;
-    title?: unknown;
-    content?: unknown;
-    color?: unknown;
-    type?: unknown;
-} & {
-    type: "default" | "error" | "info" | "success" | "warning";
-} & {
-    content?: string | undefined;
-    color?: string | undefined;
-    time?: string | number | undefined;
-    title?: string | undefined;
-}>, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    time: PropType<string | number>;
+    title: StringConstructor;
+    content: StringConstructor;
+    color: StringConstructor;
+    type: {
+        type: PropType<"default" | "error" | "info" | "success" | "warning">;
+        default: string;
+    };
+}>>, {
     type: "default" | "error" | "info" | "success" | "warning";
 }>;
 export default _default;

package/es/timeline/src/TimelineItem.js

@@ -1,4 +1,4 @@
-import { defineComponent, computed, inject, h, renderSlot } from 'vue';
+import { defineComponent, computed, inject, h } from 'vue';
 import { createKey, formatLength, throwError } from '../../_utils';
 import { timelineInjectionKey } from './Timeline';
 const timelineItemProps = {
@@ -52,8 +52,8 @@ export default defineComponent({
                 h("div", { class: `${mergedClsPrefix}-timeline-item-timeline__line` }),
                 $slots.icon ? (h("div", { class: `${mergedClsPrefix}-timeline-item-timeline__icon`, style: { color: color } }, $slots.icon())) : (h("div", { class: `${mergedClsPrefix}-timeline-item-timeline__circle`, style: { borderColor: color } }))),
             h("div", { class: `${mergedClsPrefix}-timeline-item-content` },
-                this.title || $slots.header ? (h("div", { class: `${mergedClsPrefix}-timeline-item-content__title` }, renderSlot($slots, 'header', undefined, () => [this.title]))) : null,
-                h("div", { class: `${mergedClsPrefix}-timeline-item-content__content` }, renderSlot($slots, 'default', undefined, () => [this.content])),
-                h("div", { class: `${mergedClsPrefix}-timeline-item-content__meta` }, renderSlot($slots, 'footer', undefined, () => [this.time])))));
+                this.title || $slots.header ? (h("div", { class: `${mergedClsPrefix}-timeline-item-content__title` }, $slots.header ? $slots.header() : this.title)) : null,
+                h("div", { class: `${mergedClsPrefix}-timeline-item-content__content` }, $slots.default ? $slots.default() : this.content),
+                h("div", { class: `${mergedClsPrefix}-timeline-item-content__meta` }, $slots.footer ? $slots.footer() : this.time))));
     }
 });