@uzum-tech/ui 2.0.0-beta.1 → 2.0.0-beta.3

package/es/calendar/src/Calendar.d.ts

@@ -3,6 +3,7 @@ import type { ExtractPublicPropTypes, MaybeArray } from '../../_utils';
 import type { DateItem, OnPanelChange, OnUpdateValue } from './interface';
 export declare const calendarProps: {
     readonly isDateDisabled: PropType<(date: number) => boolean | undefined>;
+    readonly ssrCurrentTimestamp: NumberConstructor;
     readonly value: NumberConstructor;
     readonly defaultValue: {
         readonly type: PropType<number | null>;
@@ -741,6 +742,7 @@ export declare const calendarProps: {
 export type CalendarProps = ExtractPublicPropTypes<typeof calendarProps>;
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     readonly isDateDisabled: PropType<(date: number) => boolean | undefined>;
+    readonly ssrCurrentTimestamp: NumberConstructor;
     readonly value: NumberConstructor;
     readonly defaultValue: {
         readonly type: PropType<number | null>;
@@ -1827,6 +1829,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onRender: (() => void) | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     readonly isDateDisabled: PropType<(date: number) => boolean | undefined>;
+    readonly ssrCurrentTimestamp: NumberConstructor;
     readonly value: NumberConstructor;
     readonly defaultValue: {
         readonly type: PropType<number | null>;

package/es/calendar/src/Calendar.mjs

@@ -12,6 +12,7 @@ import { calendarLight } from "../styles/index.mjs";
 import style from "./styles/index.cssr.mjs";
 export const calendarProps = Object.assign(Object.assign({}, useTheme.props), {
   isDateDisabled: Function,
+  ssrCurrentTimestamp: Number,
   value: Number,
   defaultValue: {
     type: Number,
@@ -25,7 +26,7 @@ export default defineComponent({
   name: 'Calendar',
   props: calendarProps,
   setup(props) {
-    var _a;
+    var _a, _b;
     const {
       mergedClsPrefixRef,
       inlineThemeDisabled
@@ -35,9 +36,9 @@ export default defineComponent({
       localeRef,
       dateLocaleRef
     } = useLocale('DatePicker');
-    const now = Date.now();
+    const now = (_a = props.ssrCurrentTimestamp) !== null && _a !== void 0 ? _a : Date.now();
     // ts => timestamp
-    const monthTsRef = ref(startOfMonth((_a = props.defaultValue) !== null && _a !== void 0 ? _a : now).valueOf());
+    const monthTsRef = ref(startOfMonth((_b = props.defaultValue) !== null && _b !== void 0 ? _b : now).valueOf());
     const uncontrolledValueRef = ref(props.defaultValue || null);
     const mergedValueRef = useMergedState(toRef(props, 'value'), uncontrolledValueRef);
     function doUpdateValue(value, time) {

package/es/checkbox/src/Checkbox.mjs

@@ -1,6 +1,5 @@
 import { on } from 'evtd';
-import { createId } from 'seemly';
-import { computed, defineComponent, h, watchEffect } from 'vue';
+import { computed, defineComponent, h, useId, watchEffect } from 'vue';
 import { checkboxBaseProps, UIconSwitchTransition, useCheckbox } from "../../_internal/index.mjs";
 import { useConfig, useTheme, useThemeClass } from "../../_mixins/index.mjs";
 import { useRtl } from "../../_mixins/use-rtl.mjs";
@@ -150,11 +149,12 @@ export default defineComponent({
       };
     });
     const themeClassHandle = inlineThemeDisabled ? useThemeClass('checkbox', computed(() => checkbox.mergedSize.value[0]), cssVarsRef, props) : undefined;
+    const labelId = useId();
     return Object.assign(checkbox, {
       rtlEnabled: rtlEnabledRef,
       mergedClsPrefix: mergedClsPrefixRef,
       mergedTheme: themeRef,
-      labelId: createId(),
+      labelId,
       cssVars: inlineThemeDisabled ? undefined : cssVarsRef,
       themeClass: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.themeClass,
       onRender: themeClassHandle === null || themeClassHandle === void 0 ? void 0 : themeClassHandle.onRender
@@ -206,7 +206,7 @@ export default defineComponent({
       tabindex: mergedDisabled || !focusable ? undefined : 0,
       role: "checkbox",
       "aria-checked": indeterminate ? 'mixed' : renderedChecked,
-      "aria-labelledby": labelId,
+      "aria-labelledby": labelNode ? labelId : undefined,
       style: cssVars,
       onKeyup: handleKeyUp,
       onKeydown: handleKeyDown,

package/es/collapse/src/CollapseItem.mjs

@@ -1,6 +1,6 @@
-import { createId, happensIn } from 'seemly';
+import { happensIn } from 'seemly';
 import { useMemo } from 'vooks';
-import { computed, defineComponent, h, inject, toRef } from 'vue';
+import { computed, defineComponent, h, inject, toRef, useId } from 'vue';
 import { UBaseIcon } from "../../_internal/index.mjs";
 import { ChevronLeftIcon as ArrowLeftIcon, ChevronRightIcon as ArrowRightIcon } from "../../_internal/icons/index.mjs";
 import { useConfig } from "../../_mixins/index.mjs";
@@ -16,10 +16,10 @@ export default defineComponent({
     const {
       mergedRtlRef
     } = useConfig(props);
-    const randomName = createId();
+    const generatedName = useId();
     const mergedNameRef = useMemo(() => {
       var _a;
-      return (_a = props.name) !== null && _a !== void 0 ? _a : randomName;
+      return (_a = props.name) !== null && _a !== void 0 ? _a : generatedName;
     });
     const UCollapse = inject(collapseInjectionKey);
     if (!UCollapse) {
@@ -65,7 +65,7 @@ export default defineComponent({
     return {
       rtlEnabled: rtlEnabledRef,
       collapseSlots,
-      randomName,
+      randomName: generatedName,
       mergedClsPrefix: mergedClsPrefixRef,
       collapsed: collapsedRef,
       triggerAreas: toRef(collapseProps, 'triggerAreas'),

package/es/config-provider/src/ConfigProvider.d.ts

@@ -35,6 +35,7 @@ export declare const configProviderProps: {
         readonly type: PropType<BreakpointMode>;
         readonly default: "desktop-first";
     };
+    readonly ssrBreakpointWidth: NumberConstructor;
     readonly preflightStyleDisabled: BooleanConstructor;
     readonly styleMountTarget: PropType<ParentNode | null>;
     readonly inlineThemeDisabled: {
@@ -79,6 +80,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         readonly type: PropType<BreakpointMode>;
         readonly default: "desktop-first";
     };
+    readonly ssrBreakpointWidth: NumberConstructor;
     readonly preflightStyleDisabled: BooleanConstructor;
     readonly styleMountTarget: PropType<ParentNode | null>;
     readonly inlineThemeDisabled: {
@@ -127,6 +129,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
         readonly type: PropType<BreakpointMode>;
         readonly default: "desktop-first";
     };
+    readonly ssrBreakpointWidth: NumberConstructor;
     readonly preflightStyleDisabled: BooleanConstructor;
     readonly styleMountTarget: PropType<ParentNode | null>;
     readonly inlineThemeDisabled: {

package/es/config-provider/src/ConfigProvider.mjs

@@ -36,6 +36,7 @@ export const configProviderProps = {
     type: String,
     default: 'desktop-first'
   },
+  ssrBreakpointWidth: Number,
   preflightStyleDisabled: Boolean,
   styleMountTarget: Object,
   inlineThemeDisabled: {
@@ -57,6 +58,7 @@ export default defineComponent({
   alias: ['App'],
   props: configProviderProps,
   setup(props) {
+    var _a;
     const UConfigProvider = inject(configProviderInjectionKey, null);
     const mergedThemeRef = computed(() => {
       const {
@@ -72,12 +74,22 @@ export default defineComponent({
       } = props;
       return breakpointMode || (UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedBreakpointModeRef.value) || 'desktop-first';
     });
-    const getMergedBreakpointValues = breakpointMap => {
+    const mergedSsrBreakpointWidthRef = computed(() => {
+      const {
+        ssrBreakpointWidth
+      } = props;
+      return ssrBreakpointWidth !== undefined ? ssrBreakpointWidth : UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedSsrBreakpointWidthRef.value;
+    });
+    const getSortedBreakpointWidths = breakpointMap => {
+      return Object.keys(breakpointMap).map(Number).sort((leftWidth, rightWidth) => leftWidth - rightWidth);
+    };
+    const getMergedBreakpointValues = (breakpointMap, mode = 'desktop-first') => {
       if (!breakpointMap) return;
-      const breakpointWidths = Object.keys(breakpointMap).map(Number).sort((leftWidth, rightWidth) => leftWidth - rightWidth);
+      const breakpointWidths = getSortedBreakpointWidths(breakpointMap);
+      const orderedWidths = mode === 'mobile-first' ? breakpointWidths : [...breakpointWidths].reverse();
       const mergedMap = {};
       let previousValue;
-      for (const width of breakpointWidths) {
+      for (const width of orderedWidths) {
         if (previousValue !== undefined) {
           mergedMap[width] = merge({}, previousValue, breakpointMap[width]);
         } else {
@@ -87,23 +99,24 @@ export default defineComponent({
       }
       return mergedMap;
     };
-    const windowWidthRef = ref(isBrowser ? window.innerWidth : 1920);
+    const windowWidthRef = ref((_a = mergedSsrBreakpointWidthRef.value) !== null && _a !== void 0 ? _a : isBrowser ? window.innerWidth : undefined);
     const getActiveBreakpointValue = (breakpointMap, mode = 'desktop-first') => {
-      if (!breakpointMap || !isBrowser) return;
-      const mergedMap = getMergedBreakpointValues(breakpointMap);
-      if (!mergedMap) return;
+      if (!breakpointMap) return;
       const currentWidth = windowWidthRef.value;
-      const breakpointWidths = Object.keys(mergedMap).map(Number).sort((leftWidth, rightWidth) => leftWidth - rightWidth);
+      if (currentWidth === undefined) return;
+      const mergedMap = getMergedBreakpointValues(breakpointMap, mode);
+      if (!mergedMap) return;
+      const breakpointWidths = getSortedBreakpointWidths(mergedMap);
       let matchingBreakpoints;
       if (mode === 'mobile-first') {
-        matchingBreakpoints = breakpointWidths.filter(width => width >= currentWidth);
+        matchingBreakpoints = breakpointWidths.filter(width => width <= currentWidth).reverse();
         if (matchingBreakpoints.length === 0) {
-          matchingBreakpoints = [breakpointWidths[breakpointWidths.length - 1]];
+          matchingBreakpoints = [breakpointWidths[0]];
         }
       } else {
-        matchingBreakpoints = breakpointWidths.filter(width => width <= currentWidth).reverse();
+        matchingBreakpoints = breakpointWidths.filter(width => width >= currentWidth);
         if (matchingBreakpoints.length === 0) {
-          matchingBreakpoints = [breakpointWidths[0]];
+          matchingBreakpoints = [breakpointWidths[breakpointWidths.length - 1]];
         }
       }
       const activeBreakpoint = matchingBreakpoints[0];
@@ -265,6 +278,7 @@ export default defineComponent({
     provide(configProviderInjectionKey, {
       mergedThemeHashRef,
       mergedBreakpointsRef,
+      mergedSsrBreakpointWidthRef,
       mergedRtlRef,
       mergedIconsRef,
       mergedComponentPropsRef,

package/es/config-provider/src/internal-interface.d.ts

@@ -449,6 +449,7 @@ export type BreakpointThemeOverrides = Record<number, GlobalThemeOverrides> | un
 export type BreakpointMode = 'mobile-first' | 'desktop-first';
 export interface ConfigProviderInjection {
     mergedBreakpointsRef: Ref<Breakpoints | undefined>;
+    mergedSsrBreakpointWidthRef: Ref<number | undefined>;
     mergedClsPrefixRef: Ref<string>;
     mergedBorderedRef: Ref<boolean | undefined>;
     mergedNamespaceRef: Ref<string | undefined>;

package/es/data-table/src/DataTable.mjs

@@ -1,5 +1,4 @@
-import { createId } from 'seemly';
-import { computed, defineComponent, h, onMounted, provide, ref, toRef, Transition, watch, watchEffect } from 'vue';
+import { computed, defineComponent, h, onMounted, provide, ref, toRef, Transition, useId, watch, watchEffect } from 'vue';
 import { UBaseLoading } from "../../_internal/index.mjs";
 import { useConfig, useLocale, useTheme, useThemeClass } from "../../_mixins/index.mjs";
 import { createKey, download, resolveSlot, warnOnce } from "../../_utils/index.mjs";
@@ -25,6 +24,7 @@ export default defineComponent({
     slots,
     emit
   }) {
+    const componentId = useId();
     if (process.env.NODE_ENV !== 'production') {
       watchEffect(() => {
         if (props.onPageChange !== undefined) {
@@ -379,7 +379,7 @@ export default defineComponent({
       indentRef: toRef(props, 'indent'),
       childTriggerColIndexRef,
       bodyWidthRef,
-      componentId: createId(),
+      componentId,
       hoverKeyRef,
       mergedClsPrefixRef,
       mergedThemeRef: themeRef,

package/es/date-picker/src/DatePicker.d.ts

@@ -66,6 +66,7 @@ export declare const datePickerProps: {
     readonly onConfirm: PropType<OnConfirm>;
     readonly defaultCalendarStartTime: NumberConstructor;
     readonly defaultCalendarEndTime: NumberConstructor;
+    readonly ssrCurrentTimestamp: NumberConstructor;
     readonly bindCalendarMonths: BooleanConstructor;
     readonly triggerPreset: {
         readonly type: PropType<TriggerPreset>;
@@ -2655,6 +2656,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     readonly onConfirm: PropType<OnConfirm>;
     readonly defaultCalendarStartTime: NumberConstructor;
     readonly defaultCalendarEndTime: NumberConstructor;
+    readonly ssrCurrentTimestamp: NumberConstructor;
     readonly bindCalendarMonths: BooleanConstructor;
     readonly triggerPreset: {
         readonly type: PropType<TriggerPreset>;
@@ -6717,6 +6719,7 @@ declare const _default: import("vue").DefineComponent<ExtractPropTypes<{
     readonly onConfirm: PropType<OnConfirm>;
     readonly defaultCalendarStartTime: NumberConstructor;
     readonly defaultCalendarEndTime: NumberConstructor;
+    readonly ssrCurrentTimestamp: NumberConstructor;
     readonly bindCalendarMonths: BooleanConstructor;
     readonly triggerPreset: {
         readonly type: PropType<TriggerPreset>;

package/es/date-picker/src/DatePicker.mjs

@@ -75,6 +75,7 @@ export const datePickerProps = Object.assign(Object.assign({}, useTheme.props),
   onConfirm: Function,
   defaultCalendarStartTime: Number,
   defaultCalendarEndTime: Number,
+  ssrCurrentTimestamp: Number,
   bindCalendarMonths: Boolean,
   triggerPreset: {
     type: String,
@@ -958,6 +959,7 @@ export default defineComponent({
       shortcuts: this.defaultShortcuts ? this.getDefaultShortcuts() : this.shortcuts,
       style: this.cssVars,
       defaultTime: this.defaultTime,
+      ssrCurrentTimestamp: this.ssrCurrentTimestamp,
       themeClass: this.themeClass,
       panel: this.panel,
       onRender: this.onRender

package/es/date-picker/src/panel/date.d.ts

@@ -27,6 +27,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly onClear: FunctionConstructor;
     readonly onConfirm: import("vue").PropType<(value: import("../interface").Value | null) => void>;
     readonly onClose: import("vue").PropType<import("../interface").OnClose>;
+    readonly ssrCurrentTimestamp: NumberConstructor;
     readonly onTabOut: FunctionConstructor;
     readonly onUpdateValue: {
         readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;
@@ -2527,6 +2528,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly onClear: FunctionConstructor;
     readonly onConfirm: import("vue").PropType<(value: import("../interface").Value | null) => void>;
     readonly onClose: import("vue").PropType<import("../interface").OnClose>;
+    readonly ssrCurrentTimestamp: NumberConstructor;
     readonly onTabOut: FunctionConstructor;
     readonly onUpdateValue: {
         readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;

package/es/date-picker/src/panel/daterange.d.ts

@@ -24,6 +24,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly onClear: FunctionConstructor;
     readonly onConfirm: import("vue").PropType<(value: import("../interface").Value | null) => void>;
     readonly onClose: import("vue").PropType<import("../interface").OnClose>;
+    readonly ssrCurrentTimestamp: NumberConstructor;
     readonly onTabOut: FunctionConstructor;
     readonly onUpdateValue: {
         readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;
@@ -2566,6 +2567,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly onClear: FunctionConstructor;
     readonly onConfirm: import("vue").PropType<(value: import("../interface").Value | null) => void>;
     readonly onClose: import("vue").PropType<import("../interface").OnClose>;
+    readonly ssrCurrentTimestamp: NumberConstructor;
     readonly onTabOut: FunctionConstructor;
     readonly onUpdateValue: {
         readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;

package/es/date-picker/src/panel/datetime.d.ts

@@ -25,6 +25,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly onClear: FunctionConstructor;
     readonly onConfirm: import("vue").PropType<(value: import("../interface").Value | null) => void>;
     readonly onClose: import("vue").PropType<import("../interface").OnClose>;
+    readonly ssrCurrentTimestamp: NumberConstructor;
     readonly onTabOut: FunctionConstructor;
     readonly onUpdateValue: {
         readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;
@@ -2520,6 +2521,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly onClear: FunctionConstructor;
     readonly onConfirm: import("vue").PropType<(value: import("../interface").Value | null) => void>;
     readonly onClose: import("vue").PropType<import("../interface").OnClose>;
+    readonly ssrCurrentTimestamp: NumberConstructor;
     readonly onTabOut: FunctionConstructor;
     readonly onUpdateValue: {
         readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;

package/es/date-picker/src/panel/datetimerange.d.ts

@@ -22,6 +22,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly onClear: FunctionConstructor;
     readonly onConfirm: import("vue").PropType<(value: import("../interface").Value | null) => void>;
     readonly onClose: import("vue").PropType<import("../interface").OnClose>;
+    readonly ssrCurrentTimestamp: NumberConstructor;
     readonly onTabOut: FunctionConstructor;
     readonly onUpdateValue: {
         readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;
@@ -2557,6 +2558,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     readonly onClear: FunctionConstructor;
     readonly onConfirm: import("vue").PropType<(value: import("../interface").Value | null) => void>;
     readonly onClose: import("vue").PropType<import("../interface").OnClose>;
+    readonly ssrCurrentTimestamp: NumberConstructor;
     readonly onTabOut: FunctionConstructor;
     readonly onUpdateValue: {
         readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;

package/es/date-picker/src/panel/panelMonth.d.ts

@@ -46,6 +46,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         onClear: FunctionConstructor;
         onConfirm: PropType<(value: import("../interface").Value | null) => void>;
         onClose: PropType<import("../interface").OnClose>;
+        ssrCurrentTimestamp: NumberConstructor;
         onTabOut: FunctionConstructor;
         onUpdateValue: {
             readonly type: PropType<OnPanelUpdateValue>;
@@ -2556,6 +2557,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         onClear: FunctionConstructor;
         onConfirm: PropType<(value: import("../interface").Value | null) => void>;
         onClose: PropType<import("../interface").OnClose>;
+        ssrCurrentTimestamp: NumberConstructor;
         onTabOut: FunctionConstructor;
         onUpdateValue: {
             readonly type: PropType<OnPanelUpdateValue>;
@@ -5059,6 +5061,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         onClear: FunctionConstructor;
         onConfirm: PropType<(value: import("../interface").Value | null) => void>;
         onClose: PropType<import("../interface").OnClose>;
+        ssrCurrentTimestamp: NumberConstructor;
         onTabOut: FunctionConstructor;
         onUpdateValue: {
             readonly type: PropType<OnPanelUpdateValue>;
@@ -7569,6 +7572,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         onClear: FunctionConstructor;
         onConfirm: PropType<(value: import("../interface").Value | null) => void>;
         onClose: PropType<import("../interface").OnClose>;
+        ssrCurrentTimestamp: NumberConstructor;
         onTabOut: FunctionConstructor;
         onUpdateValue: {
             readonly type: PropType<OnPanelUpdateValue>;

package/es/date-picker/src/panel/panelMonthContent.d.ts

@@ -28,6 +28,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onClear: FunctionConstructor;
     onConfirm: import("vue").PropType<(value: import("../interface").Value | null) => void>;
     onClose: import("vue").PropType<import("../interface").OnClose>;
+    ssrCurrentTimestamp: NumberConstructor;
     onTabOut: FunctionConstructor;
     onUpdateValue: {
         readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;
@@ -2525,6 +2526,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onClear: FunctionConstructor;
     onConfirm: import("vue").PropType<(value: import("../interface").Value | null) => void>;
     onClose: import("vue").PropType<import("../interface").OnClose>;
+    ssrCurrentTimestamp: NumberConstructor;
     onTabOut: FunctionConstructor;
     onUpdateValue: {
         readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;

package/es/date-picker/src/panel/panelYear.d.ts

@@ -46,6 +46,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         onClear: FunctionConstructor;
         onConfirm: PropType<(value: import("../interface").Value | null) => void>;
         onClose: PropType<import("../interface").OnClose>;
+        ssrCurrentTimestamp: NumberConstructor;
         onTabOut: FunctionConstructor;
         onUpdateValue: {
             readonly type: PropType<OnPanelUpdateValue>;
@@ -2556,6 +2557,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         onClear: FunctionConstructor;
         onConfirm: PropType<(value: import("../interface").Value | null) => void>;
         onClose: PropType<import("../interface").OnClose>;
+        ssrCurrentTimestamp: NumberConstructor;
         onTabOut: FunctionConstructor;
         onUpdateValue: {
             readonly type: PropType<OnPanelUpdateValue>;
@@ -5059,6 +5061,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         onClear: FunctionConstructor;
         onConfirm: PropType<(value: import("../interface").Value | null) => void>;
         onClose: PropType<import("../interface").OnClose>;
+        ssrCurrentTimestamp: NumberConstructor;
         onTabOut: FunctionConstructor;
         onUpdateValue: {
             readonly type: PropType<OnPanelUpdateValue>;
@@ -7569,6 +7572,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         onClear: FunctionConstructor;
         onConfirm: PropType<(value: import("../interface").Value | null) => void>;
         onClose: PropType<import("../interface").OnClose>;
+        ssrCurrentTimestamp: NumberConstructor;
         onTabOut: FunctionConstructor;
         onUpdateValue: {
             readonly type: PropType<OnPanelUpdateValue>;

package/es/date-picker/src/panel/panelYearContent.d.ts

@@ -28,6 +28,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onClear: FunctionConstructor;
     onConfirm: import("vue").PropType<(value: import("../interface").Value | null) => void>;
     onClose: import("vue").PropType<import("../interface").OnClose>;
+    ssrCurrentTimestamp: NumberConstructor;
     onTabOut: FunctionConstructor;
     onUpdateValue: {
         readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;
@@ -2525,6 +2526,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     onClear: FunctionConstructor;
     onConfirm: import("vue").PropType<(value: import("../interface").Value | null) => void>;
     onClose: import("vue").PropType<import("../interface").OnClose>;
+    ssrCurrentTimestamp: NumberConstructor;
     onTabOut: FunctionConstructor;
     onUpdateValue: {
         readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;

package/es/date-picker/src/panel/use-calendar.d.ts

@@ -24,6 +24,7 @@ declare const useCalendarProps: {
     readonly onClear: FunctionConstructor;
     readonly onConfirm: PropType<(value: import("../interface").Value | null) => void>;
     readonly onClose: PropType<import("../interface").OnClose>;
+    readonly ssrCurrentTimestamp: NumberConstructor;
     readonly onTabOut: FunctionConstructor;
     readonly onUpdateValue: {
         readonly type: PropType<import("../interface").OnPanelUpdateValue>;

package/es/date-picker/src/panel/use-calendar.mjs

@@ -1,5 +1,5 @@
 import { addMonths, addYears, format, getDate, getMonth, getTime, getYear, isSameMonth, isValid, set, setMonth, setQuarter, setYear, startOfDay, startOfMonth, startOfQuarter, startOfSecond, startOfYear } from 'date-fns'; //
-import { computed, inject, ref, watch } from 'vue';
+import { computed, inject, onMounted, ref, watch } from 'vue';
 import { MONTH_ITEM_GAP, MONTH_ITEM_HEIGHT, START_YEAR } from "../config.mjs";
 import { datePickerInjectionKey } from "../interface.mjs";
 import { dateArray, extractSingleDefaultTime, getDefaultTime, monthArray, quarterArray, strictParse, yearArray } from "../utils.mjs";
@@ -11,6 +11,7 @@ const useCalendarProps = Object.assign(Object.assign({}, usePanelCommonProps), {
   }
 });
 function useCalendar(props, type) {
+  var _a, _b;
   const panelCommon = usePanelCommon(props);
   const {
     isValueInvalidRef,
@@ -37,11 +38,15 @@ function useCalendar(props, type) {
     isSecondDisabled: isSecondDisabledRef
   };
   const mergedDateFormatRef = computed(() => props.dateFormat || localeRef.value.dateFormat);
+  const initialCurrentTimestamp = (_a = props.ssrCurrentTimestamp) !== null && _a !== void 0 ? _a : Date.now();
   const dateInputValueRef = ref(props.value === null || Array.isArray(props.value) ? '' : format(props.value, mergedDateFormatRef.value));
-  const calendarValueRef = ref(props.value === null || Array.isArray(props.value) ? Date.now() : props.value);
+  const calendarValueRef = ref(props.value === null || Array.isArray(props.value) ? initialCurrentTimestamp : props.value);
   const yearVlRef = ref(null);
   const yearScrollbarRef = ref(null);
-  const nowRef = ref(Date.now());
+  const nowRef = ref((_b = props.ssrCurrentTimestamp) !== null && _b !== void 0 ? _b : null);
+  onMounted(() => {
+    nowRef.value = Date.now();
+  });
   const dateArrayRef = computed(() => {
     var _a;
     return dateArray(calendarValueRef.value, props.value, nowRef.value, (_a = firstDayOfWeekRef.value) !== null && _a !== void 0 ? _a : localeRef.value.firstDayOfWeek);
@@ -170,7 +175,7 @@ function useCalendar(props, type) {
     if (props.value !== null && !Array.isArray(props.value)) {
       newValue = props.value;
     } else {
-      newValue = Date.now();
+      newValue = calendarValueRef.value;
     }
     if (type === 'datetime' && props.defaultTime !== null && !Array.isArray(props.defaultTime)) {
       let time;
@@ -210,7 +215,7 @@ function useCalendar(props, type) {
     if (props.value !== null && !Array.isArray(props.value)) {
       newValue = props.value;
     } else {
-      newValue = Date.now();
+      newValue = calendarValueRef.value;
     }
     newValue = getTime(dateItem.type === 'month' ? setMonth(newValue, dateItem.dateObject.month) : setYear(newValue, dateItem.dateObject.year));
     updatePanelValue(newValue);

package/es/date-picker/src/panel/use-dual-calendar.d.ts

@@ -27,6 +27,7 @@ declare const useDualCalendarProps: {
     readonly onClear: FunctionConstructor;
     readonly onConfirm: import("vue").PropType<(value: import("../interface").Value | null) => void>;
     readonly onClose: import("vue").PropType<import("../interface").OnClose>;
+    readonly ssrCurrentTimestamp: NumberConstructor;
     readonly onTabOut: FunctionConstructor;
     readonly onUpdateValue: {
         readonly type: import("vue").PropType<import("../interface").OnPanelUpdateValue>;

package/es/date-picker/src/panel/use-dual-calendar.mjs

@@ -1,5 +1,5 @@
 import { addMonths, format, getDate, getMonth, getTime, getYear, isValid, set, startOfDay, startOfMonth, startOfQuarter, startOfSecond } from 'date-fns'; //
-import { computed, inject, ref, watch } from 'vue';
+import { computed, inject, onMounted, ref, watch } from 'vue';
 import { MONTH_ITEM_HEIGHT, START_YEAR } from "../config.mjs";
 import { datePickerInjectionKey } from "../interface.mjs";
 import { dateArray, extractRangeDefaultTime, getDefaultTime, monthArray, pluckValueFromRange, quarterArray, strictParse, yearArray } from "../utils.mjs";
@@ -14,7 +14,7 @@ const useDualCalendarProps = Object.assign(Object.assign({}, usePanelCommonProps
   }
 });
 function useDualCalendar(props, type) {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const {
     isDateDisabledRef,
     maxDateRef,
@@ -66,11 +66,15 @@ function useDualCalendar(props, type) {
   const {
     value
   } = props;
-  const defaultCalendarStartTime = (_a = props.defaultCalendarStartTime) !== null && _a !== void 0 ? _a : Array.isArray(value) && typeof value[0] === 'number' ? value[0] : Date.now();
+  const initialCurrentTimestamp = (_a = props.ssrCurrentTimestamp) !== null && _a !== void 0 ? _a : Date.now();
+  const defaultCalendarStartTime = (_b = props.defaultCalendarStartTime) !== null && _b !== void 0 ? _b : Array.isArray(value) && typeof value[0] === 'number' ? value[0] : initialCurrentTimestamp;
   const startCalendarDateTimeRef = ref(defaultCalendarStartTime);
-  const endCalendarDateTimeRef = ref((_b = props.defaultCalendarEndTime) !== null && _b !== void 0 ? _b : Array.isArray(value) && typeof value[1] === 'number' ? value[1] : getTime(addMonths(defaultCalendarStartTime, 1)));
+  const endCalendarDateTimeRef = ref((_c = props.defaultCalendarEndTime) !== null && _c !== void 0 ? _c : Array.isArray(value) && typeof value[1] === 'number' ? value[1] : getTime(addMonths(defaultCalendarStartTime, 1)));
   adjustCalendarTimes(true);
-  const nowRef = ref(Date.now());
+  const nowRef = ref((_d = props.ssrCurrentTimestamp) !== null && _d !== void 0 ? _d : null);
+  onMounted(() => {
+    nowRef.value = Date.now();
+  });
   const isSelectingRef = ref(false);
   const memorizedStartDateTimeRef = ref(0);
   const mergedDateFormatRef = computed(() => props.dateFormat || localeRef.value.dateFormat);
@@ -136,19 +140,19 @@ function useDualCalendar(props, type) {
   });
   const startQuarterArrayRef = computed(() => {
     const startValue = pluckValueFromRange(props.value, 'start');
-    return quarterArray(startValue !== null && startValue !== void 0 ? startValue : Date.now(), startValue, nowRef.value);
+    return quarterArray(startValue !== null && startValue !== void 0 ? startValue : startCalendarDateTimeRef.value, startValue, nowRef.value);
   });
   const endQuarterArrayRef = computed(() => {
     const endValue = pluckValueFromRange(props.value, 'end');
-    return quarterArray(endValue !== null && endValue !== void 0 ? endValue : Date.now(), endValue, nowRef.value);
+    return quarterArray(endValue !== null && endValue !== void 0 ? endValue : endCalendarDateTimeRef.value, endValue, nowRef.value);
   });
   const startMonthArrayRef = computed(() => {
     const startValue = pluckValueFromRange(props.value, 'start');
-    return monthArray(startValue !== null && startValue !== void 0 ? startValue : Date.now(), startValue, nowRef.value);
+    return monthArray(startValue !== null && startValue !== void 0 ? startValue : startCalendarDateTimeRef.value, startValue, nowRef.value);
   });
   const endMonthArrayRef = computed(() => {
     const endValue = pluckValueFromRange(props.value, 'end');
-    return monthArray(endValue !== null && endValue !== void 0 ? endValue : Date.now(), endValue, nowRef.value);
+    return monthArray(endValue !== null && endValue !== void 0 ? endValue : endCalendarDateTimeRef.value, endValue, nowRef.value);
   });
   watch(computed(() => props.value), value => {
     if (value !== null && Array.isArray(value)) {
@@ -502,7 +506,7 @@ function useDualCalendar(props, type) {
     const mergedValue = value === undefined ? props.value : value;
     if (value === undefined || type === 'start') {
       if (startMonthScrollbarRef.value) {
-        const monthIndex = !Array.isArray(mergedValue) ? getMonth(Date.now()) : getMonth(mergedValue[0]);
+        const monthIndex = !Array.isArray(mergedValue) ? getMonth(startCalendarDateTimeRef.value) : getMonth(mergedValue[0]);
         startMonthScrollbarRef.value.scrollTo({
           debounce: false,
           index: monthIndex,
@@ -510,7 +514,7 @@ function useDualCalendar(props, type) {
         });
       }
       if (startYearVlRef.value) {
-        const yearIndex = (!Array.isArray(mergedValue) ? getYear(Date.now()) : getYear(mergedValue[0])) - START_YEAR;
+        const yearIndex = (!Array.isArray(mergedValue) ? getYear(startCalendarDateTimeRef.value) : getYear(mergedValue[0])) - START_YEAR;
         startYearVlRef.value.scrollTo({
           index: yearIndex,
           debounce: false
@@ -519,7 +523,7 @@ function useDualCalendar(props, type) {
     }
     if (value === undefined || type === 'end') {
       if (endMonthScrollbarRef.value) {
-        const monthIndex = !Array.isArray(mergedValue) ? getMonth(Date.now()) : getMonth(mergedValue[1]);
+        const monthIndex = !Array.isArray(mergedValue) ? getMonth(endCalendarDateTimeRef.value) : getMonth(mergedValue[1]);
         endMonthScrollbarRef.value.scrollTo({
           debounce: false,
           index: monthIndex,
@@ -527,7 +531,7 @@ function useDualCalendar(props, type) {
         });
       }
       if (endYearVlRef.value) {
-        const yearIndex = (!Array.isArray(mergedValue) ? getYear(Date.now()) : getYear(mergedValue[1])) - START_YEAR;
+        const yearIndex = (!Array.isArray(mergedValue) ? getYear(endCalendarDateTimeRef.value) : getYear(mergedValue[1])) - START_YEAR;
         endYearVlRef.value.scrollTo({
           index: yearIndex,
           debounce: false

package/es/date-picker/src/panel/use-panel-common.d.ts

@@ -18,6 +18,7 @@ declare const usePanelCommonProps: {
     readonly onClear: FunctionConstructor;
     readonly onConfirm: PropType<(value: Value | null) => void>;
     readonly onClose: PropType<OnClose>;
+    readonly ssrCurrentTimestamp: NumberConstructor;
     readonly onTabOut: FunctionConstructor;
     readonly onUpdateValue: {
         readonly type: PropType<OnPanelUpdateValue>;