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

package/es/header/src/HeaderNavigation.mjs

@@ -78,7 +78,7 @@ export const headerNavigationProps = {
   onUpdateMenuValue: [Function, Array],
   onUpdateActiveMenuKey: Function
 };
-export default defineComponent({
+const HeaderNavigation = defineComponent({
   name: 'HeaderNavigation',
   props: headerNavigationProps,
   setup(props) {
@@ -458,4 +458,5 @@ export default defineComponent({
     })))))) : null;
     return tabsNode;
   }
-});
+});
+export default HeaderNavigation;

package/es/heatmap/src/Heatmap.mjs

@@ -14,6 +14,8 @@ import { completeDataGaps, createDayRect, createLoadingMatrix, createSparseMatri
 function transformHeatmapFirstDayOfWeekToDateFns(firstDayOfWeek) {
   return (firstDayOfWeek + 1) % 7;
 }
+const HEATMAP_LABEL_BASE_DATE = new Date(2024, 0, 1);
+const HEATMAP_LABEL_BASE_YEAR = 2024;
 export const heatmapProps = Object.assign(Object.assign({}, useTheme.props), {
   activeColors: Array,
   colorTheme: String,
@@ -155,7 +157,7 @@ export default defineComponent({
       const {
         locale
       } = dateLocaleRef.value;
-      const baseDate = startOfWeek(new Date(), {
+      const baseDate = startOfWeek(HEATMAP_LABEL_BASE_DATE, {
         weekStartsOn: transformHeatmapFirstDayOfWeekToDateFns(props.firstDayOfWeek)
       });
       return Array.from({
@@ -176,13 +178,12 @@ export default defineComponent({
       const {
         locale
       } = dateLocaleRef.value;
-      const currentYear = new Date().getFullYear();
       // for more consistent month label widths
       const colSpans = [5, 4, 5, 4, 5, 4, 5, 4, 4, 5, 4, 4];
       return Array.from({
         length: 12
       }, (_, i) => {
-        const monthDate = new Date(currentYear, i, 1);
+        const monthDate = new Date(HEATMAP_LABEL_BASE_YEAR, i, 1);
         return {
           name: format(monthDate, monthFormat, {
             locale

package/es/image/src/Image.mjs

@@ -1,4 +1,4 @@
-import { computed, defineComponent, h, inject, onBeforeUnmount, onMounted, provide, ref, toRef, watchEffect } from 'vue';
+import { computed, defineComponent, h, inject, onBeforeUnmount, onMounted, provide, ref, toRef, useId, watchEffect } from 'vue';
 import { useConfig } from "../../_mixins/index.mjs";
 import { resolveSlot } from "../../_utils/index.mjs";
 import { isImageSupportNativeLazy } from "../../_utils/env/is-native-lazy-load.mjs";
@@ -26,7 +26,6 @@ export const imageProps = Object.assign({
   onError: Function,
   onLoad: Function
 }, imagePreviewSharedProps);
-let uuid = 0;
 export default defineComponent({
   name: 'Image',
   props: imageProps,
@@ -44,12 +43,12 @@ export default defineComponent({
       return props.previewSrc || props.src;
     });
     const previewShowRef = ref(false);
-    const imageId = uuid++;
+    const imageId = `r${useId()}`;
     const showPreview = () => {
       if (props.previewDisabled || showErrorRef.value) return;
       if (imageGroupHandle) {
         imageGroupHandle.setThumbnailEl(imageRef.value);
-        imageGroupHandle.toggleShow(`r${imageId}`);
+        imageGroupHandle.toggleShow(imageId);
         return;
       }
       const {

package/es/image/src/ImageGroup.d.ts

@@ -5,7 +5,7 @@ export declare const imageGroupInjectionKey: import("vue").InjectionKey<ImagePre
     groupId: string;
     mergedClsPrefixRef: Ref<string>;
     renderToolbarRef: Ref<ImageRenderToolbar | undefined>;
-    registerImageUrl: (id: number, url: string) => () => void;
+    registerImageUrl: (id: string, url: string) => () => void;
     toggleShow: (imageId: string) => void;
 }>;
 export declare const imageGroupProps: {

package/es/image/src/ImageGroup.mjs

@@ -1,6 +1,5 @@
-import { createId } from 'seemly';
 import { useMergedState } from 'vooks';
-import { computed, defineComponent, h, provide, ref, toRef } from 'vue';
+import { computed, defineComponent, h, provide, ref, toRef, useId } from 'vue';
 import { useConfig } from "../../_mixins/index.mjs";
 import { call, createInjectionKey, throwError } from "../../_utils/index.mjs";
 import UImagePreview from "./ImagePreview.mjs";
@@ -30,7 +29,7 @@ export default defineComponent({
     const {
       mergedClsPrefixRef
     } = useConfig(props);
-    const groupId = `c${createId()}`;
+    const groupId = `c${useId()}`;
     const previewInstRef = ref(null);
     const uncontrolledShowRef = ref(props.defaultShow);
     const controlledShowRef = toRef(props, 'show');
@@ -52,12 +51,12 @@ export default defineComponent({
       if (props.srcList) {
         throwError('image-group', '`u-image` can\'t be placed inside `u-image-group` when image group\'s `src-list` prop is set.');
       }
-      const sid = `r${id}`;
-      if (!registeredImageUrlMap.value.has(`r${sid}`)) {
+      const sid = id;
+      if (!registeredImageUrlMap.value.has(sid)) {
         registeredImageUrlMap.value.set(sid, url);
       }
       return function unregisterPreviewUrl() {
-        if (!registeredImageUrlMap.value.has(sid)) {
+        if (registeredImageUrlMap.value.has(sid)) {
           registeredImageUrlMap.value.delete(sid);
         }
       };

package/es/menu/src/Menu.mjs

@@ -1,7 +1,6 @@
-import { createId } from 'seemly';
 import { createTreeMate } from 'treemate';
 import { useCompitable, useMergedState } from 'vooks';
-import { computed, defineComponent, h, inject, mergeProps, provide, ref, toRef, watchEffect } from 'vue';
+import { computed, defineComponent, h, inject, mergeProps, provide, ref, toRef, useId, watchEffect } from 'vue';
 import { VOverflow, VResizeObserver } from 'vueuc';
 import { useConfig, useTheme, useThemeClass } from "../../_mixins/index.mjs";
 import { call } from "../../_utils/index.mjs";
@@ -375,7 +374,7 @@ export default defineComponent({
       return vars;
     });
     const themeClassHandle = inlineThemeDisabled ? useThemeClass('menu', computed(() => props.inverted ? 'a' : 'b'), cssVarsRef, props) : undefined;
-    const ellipsisNodeId = createId();
+    const ellipsisNodeId = useId();
     const overflowRef = ref(null);
     const counterRef = ref(null);
     let isFirstResize = true;

package/es/message/src/MessageProvider.mjs

@@ -1,5 +1,4 @@
-import { createId } from 'seemly';
-import { defineComponent, Fragment, h, provide, reactive, ref, Teleport } from 'vue';
+import { defineComponent, Fragment, h, provide, reactive, ref, Teleport, useId } from 'vue';
 import { useConfig, useTheme } from "../../_mixins/index.mjs";
 import { omit } from "../../_utils/index.mjs";
 import { messageApiInjectionKey, messageProviderInjectionKey } from "./context.mjs";
@@ -28,6 +27,8 @@ export default defineComponent({
     } = useConfig(props);
     const messageListRef = ref([]);
     const messageRefs = ref({});
+    const providerId = useId();
+    let messageKeyIndex = 0;
     const api = {
       create(content, options) {
         return create(content, Object.assign({
@@ -67,7 +68,7 @@ export default defineComponent({
     });
     provide(messageApiInjectionKey, api);
     function create(content, options) {
-      const key = createId();
+      const key = `${providerId}-${messageKeyIndex++}`;
       const messageReactive = reactive(Object.assign(Object.assign({}, options), {
         content,
         key,

package/es/modal/src/ModalProvider.mjs

@@ -1,6 +1,5 @@
-import { createId } from 'seemly';
 import { useClicked, useClickPosition } from 'vooks';
-import { defineComponent, Fragment, h, provide, reactive, ref } from 'vue';
+import { defineComponent, Fragment, h, provide, reactive, ref, useId } from 'vue';
 import { omit } from "../../_utils/index.mjs";
 import { modalApiInjectionKey, modalProviderInjectionKey, modalReactiveListInjectionKey } from "./context.mjs";
 import { UModalEnvironment } from "./ModalEnvironment.mjs";
@@ -13,8 +12,10 @@ export const UModalProvider = defineComponent({
   setup() {
     const modalListRef = ref([]);
     const modalInstRefs = {};
+    const providerId = useId();
+    let modalKeyIndex = 0;
     function create(options = {}) {
-      const key = createId();
+      const key = `${providerId}-${modalKeyIndex++}`;
       const modalReactive = reactive(Object.assign(Object.assign({}, options), {
         key,
         destroy: () => {

package/es/notification/src/NotificationProvider.mjs

@@ -1,5 +1,4 @@
-import { createId } from 'seemly';
-import { defineComponent, Fragment, h, provide, reactive, ref, Teleport } from 'vue';
+import { defineComponent, Fragment, h, provide, reactive, ref, Teleport, useId } from 'vue';
 import { useConfig, useTheme } from "../../_mixins/index.mjs";
 import { createInjectionKey, omit } from "../../_utils/index.mjs";
 import { notificationLight } from "../styles/index.mjs";
@@ -32,8 +31,10 @@ export default defineComponent({
     const notificationListRef = ref([]);
     const notificationRefs = {};
     const leavingKeySet = new Set();
+    const providerId = useId();
+    let notificationKeyIndex = 0;
     function create(options) {
-      const key = createId();
+      const key = `${providerId}-${notificationKeyIndex++}`;
       const destroy = () => {
         leavingKeySet.add(key);
         // If you push n + 1 message when max is n, notificationRefs[key] maybe not be set

package/es/time/src/Time.d.ts

@@ -13,6 +13,7 @@ export declare const timeProps: {
         readonly type: PropType<number | Date>;
         readonly default: undefined;
     };
+    readonly ssrCurrentTimestamp: NumberConstructor;
     readonly unix: BooleanConstructor;
     readonly format: StringConstructor;
     readonly text: BooleanConstructor;
@@ -32,6 +33,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         readonly type: PropType<number | Date>;
         readonly default: undefined;
     };
+    readonly ssrCurrentTimestamp: NumberConstructor;
     readonly unix: BooleanConstructor;
     readonly format: StringConstructor;
     readonly text: BooleanConstructor;
@@ -51,6 +53,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         readonly type: PropType<number | Date>;
         readonly default: undefined;
     };
+    readonly ssrCurrentTimestamp: NumberConstructor;
     readonly unix: BooleanConstructor;
     readonly format: StringConstructor;
     readonly text: BooleanConstructor;

package/es/time/src/Time.mjs

@@ -15,6 +15,7 @@ export const timeProps = {
     type: [Number, Date],
     default: undefined // the same as `time` prop
   },
+  ssrCurrentTimestamp: Number,
   unix: Boolean,
   format: String,
   text: Boolean,
@@ -24,7 +25,8 @@ export default defineComponent({
   name: 'Time',
   props: timeProps,
   setup(props) {
-    const now = Date.now();
+    var _a;
+    const now = (_a = props.ssrCurrentTimestamp) !== null && _a !== void 0 ? _a : Date.now();
     const {
       localeRef,
       dateLocaleRef

package/es/time-picker/src/Panel.mjs

@@ -1,4 +1,4 @@
-import { computed, defineComponent, h, inject, ref } from 'vue';
+import { computed, defineComponent, h, inject, onMounted, ref } from 'vue';
 import { UBaseFocusDetector, UScrollbar } from "../../_internal/index.mjs";
 import { UButton } from "../../button/index.mjs";
 import { timePickerInjectionKey } from "./interface.mjs";
@@ -89,6 +89,10 @@ export default defineComponent({
       mergedThemeRef,
       mergedClsPrefixRef
     } = inject(timePickerInjectionKey);
+    const mountedRef = ref(false);
+    onMounted(() => {
+      mountedRef.value = true;
+    });
     const hoursRef = computed(() => {
       const {
         isHourDisabled,
@@ -105,7 +109,10 @@ export default defineComponent({
           };
         });
       } else {
-        const mergedAmPmValue = amPmValue !== null && amPmValue !== void 0 ? amPmValue : getAmPm(Date.now());
+        // Keep the initial SSR and hydration render deterministic when there is
+        // no selected value yet. After mount we can safely derive AM/PM from
+        // the current local time.
+        const mergedAmPmValue = amPmValue !== null && amPmValue !== void 0 ? amPmValue : mountedRef.value ? getAmPm(Date.now()) : 'am';
         return getTimeUnits(time.hours, hours, mergedAmPmValue).map(hour => {
           const hourAs12FormattedNumber = Number(hour);
           const hourAs24FormattedNumber = mergedAmPmValue === 'pm' && hourAs12FormattedNumber !== 12 ? hourAs12FormattedNumber + 12 : hourAs12FormattedNumber;

package/es/upload/src/Upload.mjs

@@ -25,9 +25,8 @@ var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, gene
     step((generator = generator.apply(thisArg, _arguments || [])).next());
   });
 };
-import { createId } from 'seemly';
 import { useMergedState } from 'vooks';
-import { computed, defineComponent, Fragment, h, nextTick, provide, ref, Teleport, toRef } from 'vue';
+import { computed, defineComponent, Fragment, h, nextTick, provide, ref, Teleport, toRef, useId } from 'vue';
 import { useConfig, useFormItem, useLocale, useTheme, useThemeClass } from "../../_mixins/index.mjs";
 import { call, createKey, throwError, warn } from "../../_utils/index.mjs";
 import { uploadLight } from "../styles/index.mjs";
@@ -157,6 +156,8 @@ export default defineComponent({
   name: 'Upload',
   props: uploadProps,
   setup(props) {
+    const uploadId = useId();
+    const uploadKeyIndexRef = ref(0);
     const {
       localeRef
     } = useLocale('Upload');
@@ -216,6 +217,11 @@ export default defineComponent({
       uncontrolledFileListRef.value = files;
     }
     const mergedMultipleRef = computed(() => props.multiple || props.directory);
+    function createUploadKey() {
+      const key = `${uploadId}-${uploadKeyIndexRef.value}`;
+      uploadKeyIndexRef.value += 1;
+      return key;
+    }
     function handleFileAddition(fileAndEntries, e) {
       if (!fileAndEntries || fileAndEntries.length === 0) return;
       const {
@@ -239,14 +245,14 @@ export default defineComponent({
       if (max) {
         fileAndEntries = fileAndEntries.slice(0, max - mergedFileListRef.value.length);
       }
-      const batchId = createId();
+      const batchId = createUploadKey();
       void Promise.all(fileAndEntries.map(_a => __awaiter(this, [_a], void 0, function* ({
         file,
         entry
       }) {
         var _b;
         const fileInfo = {
-          id: createId(),
+          id: createUploadKey(),
           batchId,
           name: file.name,
           status: 'pending',

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "2.0.0-beta.1";
+declare const _default: "2.0.0-beta.3";
 export default _default;

package/es/version.mjs

@@ -1 +1 @@
-export default '2.0.0-beta.1';
+export default '2.0.0-beta.3';

package/lib/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/lib/calendar/src/Calendar.js

@@ -16,7 +16,7 @@ const button_group_1 = require("../../button-group");
 const utils_1 = require("../../date-picker/src/utils");
 const styles_1 = require("../styles");
 const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
-exports.calendarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { isDateDisabled: Function, value: Number, defaultValue: {
+exports.calendarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props), { isDateDisabled: Function, ssrCurrentTimestamp: Number, value: Number, defaultValue: {
         type: Number,
         default: null
     }, onPanelChange: Function, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
@@ -24,13 +24,13 @@ exports.default = (0, vue_1.defineComponent)({
     name: 'Calendar',
     props: exports.calendarProps,
     setup(props) {
-        var _a;
+        var _a, _b;
         const { mergedClsPrefixRef, inlineThemeDisabled } = (0, _mixins_1.useConfig)(props);
         const themeRef = (0, _mixins_1.useTheme)('Calendar', '-calendar', index_cssr_1.default, styles_1.calendarLight, props, mergedClsPrefixRef);
         const { localeRef, dateLocaleRef } = (0, _mixins_1.useLocale)('DatePicker');
-        const now = Date.now();
+        const now = (_a = props.ssrCurrentTimestamp) !== null && _a !== void 0 ? _a : Date.now();
         // ts => timestamp
-        const monthTsRef = (0, vue_1.ref)((0, date_fns_1.startOfMonth)((_a = props.defaultValue) !== null && _a !== void 0 ? _a : now).valueOf());
+        const monthTsRef = (0, vue_1.ref)((0, date_fns_1.startOfMonth)((_b = props.defaultValue) !== null && _b !== void 0 ? _b : now).valueOf());
         const uncontrolledValueRef = (0, vue_1.ref)(props.defaultValue || null);
         const mergedValueRef = (0, vooks_1.useMergedState)((0, vue_1.toRef)(props, 'value'), uncontrolledValueRef);
         function doUpdateValue(value, time) {

package/lib/checkbox/src/Checkbox.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.checkboxProps = void 0;
 const evtd_1 = require("evtd");
-const seemly_1 = require("seemly");
 const vue_1 = require("vue");
 const _internal_1 = require("../../_internal");
 const _mixins_1 = require("../../_mixins");
@@ -97,11 +96,12 @@ exports.default = (0, vue_1.defineComponent)({
         const themeClassHandle = inlineThemeDisabled
             ? (0, _mixins_1.useThemeClass)('checkbox', (0, vue_1.computed)(() => checkbox.mergedSize.value[0]), cssVarsRef, props)
             : undefined;
+        const labelId = (0, vue_1.useId)();
         return Object.assign(checkbox, {
             rtlEnabled: rtlEnabledRef,
             mergedClsPrefix: mergedClsPrefixRef,
             mergedTheme: themeRef,
-            labelId: (0, seemly_1.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
@@ -132,7 +132,7 @@ exports.default = (0, vue_1.defineComponent)({
                 mergedDisabled && `${mergedClsPrefix}-checkbox--disabled`,
                 indeterminate && `${mergedClsPrefix}-checkbox--indeterminate`,
                 labelNode && `${mergedClsPrefix}-checkbox--show-label`
-            ], tabindex: mergedDisabled || !focusable ? undefined : 0, role: "checkbox", "aria-checked": indeterminate ? 'mixed' : renderedChecked, "aria-labelledby": labelId, style: cssVars, onKeyup: handleKeyUp, onKeydown: handleKeyDown, onClick: handleClick, onMousedown: () => {
+            ], tabindex: mergedDisabled || !focusable ? undefined : 0, role: "checkbox", "aria-checked": indeterminate ? 'mixed' : renderedChecked, "aria-labelledby": labelNode ? labelId : undefined, style: cssVars, onKeyup: handleKeyUp, onKeydown: handleKeyDown, onClick: handleClick, onMousedown: () => {
                 (0, evtd_1.on)('selectstart', window, (e) => {
                     e.preventDefault();
                 }, {

package/lib/collapse/src/CollapseItem.js

@@ -19,10 +19,10 @@ exports.default = (0, vue_1.defineComponent)({
     props: collapseItem_props_1.collapseItemProps,
     setup(props) {
         const { mergedRtlRef } = (0, _mixins_1.useConfig)(props);
-        const randomName = (0, seemly_1.createId)();
+        const generatedName = (0, vue_1.useId)();
         const mergedNameRef = (0, vooks_1.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 = (0, vue_1.inject)(Collapse_1.collapseInjectionKey);
         if (!UCollapse) {
@@ -58,7 +58,7 @@ exports.default = (0, vue_1.defineComponent)({
         return {
             rtlEnabled: rtlEnabledRef,
             collapseSlots,
-            randomName,
+            randomName: generatedName,
             mergedClsPrefix: mergedClsPrefixRef,
             collapsed: collapsedRef,
             triggerAreas: (0, vue_1.toRef)(collapseProps, 'triggerAreas'),

package/lib/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/lib/config-provider/src/ConfigProvider.js

@@ -36,6 +36,7 @@ exports.configProviderProps = {
         type: String,
         default: 'desktop-first'
     },
+    ssrBreakpointWidth: Number,
     preflightStyleDisabled: Boolean,
     styleMountTarget: Object,
     inlineThemeDisabled: {
@@ -57,6 +58,7 @@ exports.default = (0, vue_1.defineComponent)({
     alias: ['App'],
     props: exports.configProviderProps,
     setup(props) {
+        var _a;
         const UConfigProvider = (0, vue_1.inject)(context_1.configProviderInjectionKey, null);
         const mergedThemeRef = (0, vue_1.computed)(() => {
             const { theme } = props;
@@ -75,15 +77,27 @@ exports.default = (0, vue_1.defineComponent)({
                 || (UConfigProvider === null || UConfigProvider === void 0 ? void 0 : UConfigProvider.mergedBreakpointModeRef.value)
                 || 'desktop-first');
         });
-        const getMergedBreakpointValues = (breakpointMap) => {
-            if (!breakpointMap)
-                return;
-            const breakpointWidths = Object.keys(breakpointMap)
+        const mergedSsrBreakpointWidthRef = (0, vue_1.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 = 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] = (0, lodash_es_1.merge)({}, previousValue, breakpointMap[width]);
                 }
@@ -94,25 +108,19 @@ exports.default = (0, vue_1.defineComponent)({
             }
             return mergedMap;
         };
-        const windowWidthRef = (0, vue_1.ref)(_utils_1.isBrowser ? window.innerWidth : 1920);
+        const windowWidthRef = (0, vue_1.ref)((_a = mergedSsrBreakpointWidthRef.value) !== null && _a !== void 0 ? _a : (_utils_1.isBrowser ? window.innerWidth : undefined));
         const getActiveBreakpointValue = (breakpointMap, mode = 'desktop-first') => {
-            if (!breakpointMap || !_utils_1.isBrowser)
+            if (!breakpointMap)
+                return;
+            const currentWidth = windowWidthRef.value;
+            if (currentWidth === undefined)
                 return;
-            const mergedMap = getMergedBreakpointValues(breakpointMap);
+            const mergedMap = getMergedBreakpointValues(breakpointMap, mode);
             if (!mergedMap)
                 return;
-            const currentWidth = windowWidthRef.value;
-            const breakpointWidths = Object.keys(mergedMap)
-                .map(Number)
-                .sort((leftWidth, rightWidth) => leftWidth - rightWidth);
+            const breakpointWidths = getSortedBreakpointWidths(mergedMap);
             let matchingBreakpoints;
             if (mode === 'mobile-first') {
-                matchingBreakpoints = breakpointWidths.filter(width => width >= currentWidth);
-                if (matchingBreakpoints.length === 0) {
-                    matchingBreakpoints = [breakpointWidths[breakpointWidths.length - 1]];
-                }
-            }
-            else {
                 matchingBreakpoints = breakpointWidths
                     .filter(width => width <= currentWidth)
                     .reverse();
@@ -120,6 +128,12 @@ exports.default = (0, vue_1.defineComponent)({
                     matchingBreakpoints = [breakpointWidths[0]];
                 }
             }
+            else {
+                matchingBreakpoints = breakpointWidths.filter(width => width >= currentWidth);
+                if (matchingBreakpoints.length === 0) {
+                    matchingBreakpoints = [breakpointWidths[breakpointWidths.length - 1]];
+                }
+            }
             const activeBreakpoint = matchingBreakpoints[0];
             return mergedMap[activeBreakpoint];
         };
@@ -269,6 +283,7 @@ exports.default = (0, vue_1.defineComponent)({
         (0, vue_1.provide)(context_1.configProviderInjectionKey, {
             mergedThemeHashRef,
             mergedBreakpointsRef,
+            mergedSsrBreakpointWidthRef,
             mergedRtlRef,
             mergedIconsRef,
             mergedComponentPropsRef,

package/lib/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/lib/data-table/src/DataTable.js

@@ -3,7 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const seemly_1 = require("seemly");
 const vue_1 = require("vue");
 const _internal_1 = require("../../_internal");
 const _mixins_1 = require("../../_mixins");
@@ -27,6 +26,7 @@ exports.default = (0, vue_1.defineComponent)({
     emits: ['edit'],
     props: interface_1.dataTableProps,
     setup(props, { slots, emit }) {
+        const componentId = (0, vue_1.useId)();
         if (process.env.NODE_ENV !== 'production') {
             (0, vue_1.watchEffect)(() => {
                 if (props.onPageChange !== undefined) {
@@ -306,7 +306,7 @@ exports.default = (0, vue_1.defineComponent)({
             indentRef: (0, vue_1.toRef)(props, 'indent'),
             childTriggerColIndexRef,
             bodyWidthRef,
-            componentId: (0, seemly_1.createId)(),
+            componentId,
             hoverKeyRef,
             mergedClsPrefixRef,
             mergedThemeRef: themeRef,

package/lib/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/lib/date-picker/src/DatePicker.js

@@ -40,7 +40,7 @@ exports.datePickerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.pro
     }, valueFormat: String, separator: String, placeholder: String, startPlaceholder: String, endPlaceholder: String, format: String, dateFormat: String, timeFormat: String, actions: Array, shortcuts: Object, defaultShortcuts: Boolean, isDateDisabled: Function, maxDate: Number, isTimeDisabled: Function, show: {
         type: Boolean,
         default: undefined
-    }, panel: Boolean, ranges: Object, firstDayOfWeek: Number, inputReadonly: Boolean, closeOnSelect: Boolean, status: String, timePickerProps: [Object, Array], onClear: Function, onConfirm: Function, defaultCalendarStartTime: Number, defaultCalendarEndTime: Number, bindCalendarMonths: Boolean, triggerPreset: {
+    }, panel: Boolean, ranges: Object, firstDayOfWeek: Number, inputReadonly: Boolean, closeOnSelect: Boolean, status: String, timePickerProps: [Object, Array], onClear: Function, onConfirm: Function, defaultCalendarStartTime: Number, defaultCalendarEndTime: Number, ssrCurrentTimestamp: Number, bindCalendarMonths: Boolean, triggerPreset: {
         type: String,
         default: 'input'
     }, 'onUpdate:show': [Function, Array], onUpdateShow: [Function, Array], 'onUpdate:formattedValue': [Function, Array], onUpdateFormattedValue: [Function, Array], 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], onFocus: [Function, Array], onBlur: [Function, Array], 
@@ -751,6 +751,7 @@ exports.default = (0, vue_1.defineComponent)({
                 : this.shortcuts,
             style: this.cssVars,
             defaultTime: this.defaultTime,
+            ssrCurrentTimestamp: this.ssrCurrentTimestamp,
             themeClass: this.themeClass,
             panel: this.panel,
             onRender: this.onRender