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

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

@@ -19,6 +19,7 @@ const usePanelCommonProps = {
   onClear: Function,
   onConfirm: Function,
   onClose: Function,
+  ssrCurrentTimestamp: Number,
   onTabOut: Function,
   onUpdateValue: {
     type: Function,

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

@@ -50,10 +50,10 @@ export type DateCommonItem = DateItem | MonthItem | YearItem | QuarterItem;
  * Given time to display calendar, given the selected time, given current time,
  * return the date array of display time's month.
  */
-declare function dateArray(monthTs: number, valueTs: number | [number, number] | null, currentTs: number, startDay: 0 | 1 | 2 | 3 | 4 | 5 | 6, strip?: boolean): DateItem[];
-declare function monthArray(yearAnchorTs: number, valueTs: number | null, currentTs: number): MonthItem[];
-declare function quarterArray(yearAnchorTs: number, valueTs: number | null, currentTs: number): QuarterItem[];
-declare function yearArray(valueTs: number | null, currentTs: number, maxDate?: number): YearItem[];
+declare function dateArray(monthTs: number, valueTs: number | [number, number] | null, currentTs: number | null, startDay: 0 | 1 | 2 | 3 | 4 | 5 | 6, strip?: boolean): DateItem[];
+declare function monthArray(yearAnchorTs: number, valueTs: number | null, currentTs: number | null): MonthItem[];
+declare function quarterArray(yearAnchorTs: number, valueTs: number | null, currentTs: number | null): QuarterItem[];
+declare function yearArray(valueTs: number | null, currentTs: number | null, maxDate?: number): YearItem[];
 declare function strictParse(string: string, pattern: string, backup: Date, option: {
     locale: UDateLocale['locale'];
 }): Date;

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

@@ -51,7 +51,7 @@ function dateItem(time, monthTs, valueTs, currentTs) {
       year: getYear(time)
     },
     inCurrentMonth: isSameMonth(time, monthTs),
-    isCurrentDate: matchDate(currentTs, time, 'date'),
+    isCurrentDate: currentTs !== null && matchDate(currentTs, time, 'date'),
     inSpan,
     startOfSpan,
     endOfSpan,
@@ -66,7 +66,7 @@ function monthItem(monthTs, valueTs, currentTs) {
       month: getMonth(monthTs),
       year: getYear(monthTs)
     },
-    isCurrent: isSameMonth(currentTs, monthTs),
+    isCurrent: currentTs !== null && isSameMonth(currentTs, monthTs),
     selected: valueTs !== null && matchDate(valueTs, monthTs, 'month'),
     ts: getTime(monthTs)
   };
@@ -77,7 +77,7 @@ function yearItem(yearTs, valueTs, currentTs) {
     dateObject: {
       year: getYear(yearTs)
     },
-    isCurrent: isSameYear(currentTs, yearTs),
+    isCurrent: currentTs !== null && isSameYear(currentTs, yearTs),
     selected: valueTs !== null && matchDate(valueTs, yearTs, 'year'),
     ts: getTime(yearTs)
   };
@@ -89,7 +89,7 @@ function quarterItem(quarterTs, valueTs, currentTs) {
       quarter: getQuarter(quarterTs),
       year: getYear(quarterTs)
     },
-    isCurrent: isSameQuarter(currentTs, quarterTs),
+    isCurrent: currentTs !== null && isSameQuarter(currentTs, quarterTs),
     selected: valueTs !== null && matchDate(valueTs, quarterTs, 'quarter'),
     ts: getTime(quarterTs)
   };

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

@@ -1765,7 +1765,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         readonly yPlacement: "left" | "right";
         readonly xPlacement: "top" | "bottom";
     }> | null>;
-    now: number;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     value: PropType<Value>;
     displayYear: {

package/es/date-picker-v2/src/panel/CalendarPanel.mjs

@@ -1,4 +1,4 @@
-import { computed, defineComponent, h, inject } from 'vue';
+import { computed, defineComponent, h, inject, onMounted, ref } from 'vue';
 import { UBaseIcon, UScrollbar } from "../../../_internal/index.mjs";
 import { ChevronDownIcon } from "../../../_internal/icons/index.mjs";
 import { useCalendarScroll } from "../composables/useCalendarScroll.mjs";
@@ -59,7 +59,10 @@ export default defineComponent({
         locale: loc
       } : undefined;
     });
-    const now = Date.now();
+    const nowRef = ref(null);
+    onMounted(() => {
+      nowRef.value = Date.now();
+    });
     // Используем composable для скролла
     const {
       monthScrollbarRef,
@@ -120,7 +123,7 @@ export default defineComponent({
           year,
           month,
           label: getMonthLabel(month, dateFnsOptions.value),
-          dates: generateDatesForMonth(year, month, (_a = props.value) !== null && _a !== void 0 ? _a : null, null, now, props.isDateDisabled)
+          dates: generateDatesForMonth(year, month, (_a = props.value) !== null && _a !== void 0 ? _a : null, null, nowRef.value, props.isDateDisabled)
         });
       }
       return months;
@@ -144,8 +147,7 @@ export default defineComponent({
       weekdayNamesRef,
       monthScrollbarRef,
       yearScrollbarRef,
-      calendarScrollbarRef,
-      now
+      calendarScrollbarRef
     };
   },
   render() {

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

@@ -1776,7 +1776,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         readonly yPlacement: "left" | "right";
         readonly xPlacement: "top" | "bottom";
     }> | null>;
-    now: number;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     value: {
         type: PropType<RangeValue>;

package/es/date-picker-v2/src/panel/CalendarRangePanel.mjs

@@ -1,4 +1,4 @@
-import { computed, defineComponent, h, inject } from 'vue';
+import { computed, defineComponent, h, inject, onMounted, ref } from 'vue';
 import { UBaseIcon, UScrollbar } from "../../../_internal/index.mjs";
 import { ChevronDownIcon } from "../../../_internal/icons/index.mjs";
 import { useCalendarScroll } from "../composables/useCalendarScroll.mjs";
@@ -70,7 +70,10 @@ export default defineComponent({
         locale: loc
       } : undefined;
     });
-    const now = Date.now();
+    const nowRef = ref(null);
+    onMounted(() => {
+      nowRef.value = Date.now();
+    });
     // Используем composable для скролла
     const {
       monthScrollbarRef,
@@ -132,7 +135,7 @@ export default defineComponent({
           label: getMonthLabel(month, dateFnsOptions.value),
           dates: generateDatesForMonth(year, month, null,
           // single value не используется для range
-          props.value, now, props.isDateDisabled)
+          props.value, nowRef.value, props.isDateDisabled)
         });
       }
       return months;
@@ -156,8 +159,7 @@ export default defineComponent({
       weekdayNamesRef,
       monthScrollbarRef,
       yearScrollbarRef,
-      calendarScrollbarRef,
-      now
+      calendarScrollbarRef
     };
   },
   render() {

package/es/date-picker-v2/src/utils.d.ts

@@ -3,7 +3,7 @@ import type { DateItem, MonthItem, YearItem } from './interface';
 export interface DateFnsOptions {
     locale: Locale;
 }
-export declare function generateDatesForMonth(year: number, month: number, value: number | null, rangeValue: [number, number] | null, now: number, isDateDisabled?: (ts: number) => boolean): DateItem[];
+export declare function generateDatesForMonth(year: number, month: number, value: number | null, rangeValue: [number, number] | null, now: number | null, isDateDisabled?: (ts: number) => boolean): DateItem[];
 export declare function getMonthLabel(month: number, options?: DateFnsOptions): string;
 export declare function getWeekdayNames(options?: DateFnsOptions, dayFormat?: string): string[];
 export declare function generateMonthsForYear(year: number, options?: DateFnsOptions, monthFormat?: string): MonthItem[];

package/es/date-picker-v2/src/utils.mjs

@@ -43,7 +43,7 @@ export function generateDatesForMonth(year, month, value, rangeValue, now, isDat
       month: dayMonth,
       date: dayDate,
       ts,
-      isCurrentDate: isSameDay(day, now),
+      isCurrentDate: now !== null && isSameDay(day, now),
       isCurrentMonth: isSameMonth(day, date),
       selected,
       inRange,

package/es/dialog/src/DialogProvider.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 { dialogApiInjectionKey, dialogProviderInjectionKey, dialogReactiveListInjectionKey } from "./context.mjs";
 import { UDialogEnvironment } from "./DialogEnvironment.mjs";
@@ -14,8 +13,10 @@ export const UDialogProvider = defineComponent({
   setup() {
     const dialogListRef = ref([]);
     const dialogInstRefs = {};
+    const providerId = useId();
+    let dialogKeyIndex = 0;
     function create(options = {}) {
-      const key = createId();
+      const key = `${providerId}-${dialogKeyIndex++}`;
       const dialogReactive = reactive(Object.assign(Object.assign({}, options), {
         key,
         destroy: () => {

package/es/dynamic-input/src/DynamicInput.mjs

@@ -1,6 +1,5 @@
-import { createId } from 'seemly';
 import { useMergedState } from 'vooks';
-import { computed, defineComponent, h, inject, isProxy, provide, ref, toRaw, toRef, watchEffect } from 'vue';
+import { computed, defineComponent, h, inject, isProxy, provide, ref, toRaw, toRef, useId, watchEffect } from 'vue';
 import { UBaseIcon } from "../../_internal/index.mjs";
 import { AddIcon, ArrowDownIcon, ArrowUpIcon, RemoveIcon } from "../../_internal/icons/index.mjs";
 import { useConfig, useLocale, useTheme, useThemeClass } from "../../_mixins/index.mjs";
@@ -14,7 +13,6 @@ import UDynamicInputInputPreset from "./InputPreset.mjs";
 import { dynamicInputInjectionKey } from "./interface.mjs";
 import UDynamicInputPairPreset from "./PairPreset.mjs";
 import style from "./styles/index.cssr.mjs";
-const globalDataKeyMap = new WeakMap();
 export const dynamicInputProps = Object.assign(Object.assign({}, useTheme.props), {
   max: Number,
   min: {
@@ -84,6 +82,9 @@ export default defineComponent({
     const uncontrolledValueRef = ref(props.defaultValue);
     const controlledValueRef = toRef(props, 'value');
     const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
+    const componentId = useId();
+    const localDataKeyMap = new WeakMap();
+    let localDataKeyIndex = 0;
     const themeRef = useTheme('DynamicInput', '-dynamic-input', style, dynamicInputLight, props, mergedClsPrefixRef);
     const insertionDisabledRef = computed(() => {
       const {
@@ -123,9 +124,10 @@ export default defineComponent({
       if (value === undefined || value === null) return index;
       if (typeof value !== 'object') return index;
       const rawValue = isProxy(value) ? toRaw(value) : value;
-      let key = globalDataKeyMap.get(rawValue);
+      let key = localDataKeyMap.get(rawValue);
       if (key === undefined) {
-        globalDataKeyMap.set(rawValue, key = createId());
+        key = `${componentId}-${localDataKeyIndex++}`;
+        localDataKeyMap.set(rawValue, key);
       }
       return key;
     }
@@ -141,9 +143,9 @@ export default defineComponent({
         const rawOriginal = isProxy(originalItem) ? toRaw(originalItem) : originalItem;
         const rawNew = isProxy(value) ? toRaw(value) : value;
         // inherit key is value position is not change
-        const originalKey = globalDataKeyMap.get(rawOriginal);
+        const originalKey = localDataKeyMap.get(rawOriginal);
         if (originalKey !== undefined) {
-          globalDataKeyMap.set(rawNew, originalKey);
+          localDataKeyMap.set(rawNew, originalKey);
         }
       }
       doUpdateValue(newValue);

package/es/form/src/FormItem.mjs

@@ -27,8 +27,7 @@ var __awaiter = this && this.__awaiter || function (thisArg, _arguments, P, gene
 };
 import Schema from 'async-validator';
 import { get } from 'lodash-es';
-import { createId } from 'seemly';
-import { computed, defineComponent, h, inject, onMounted, provide, ref, toRef, Transition, watch } from 'vue';
+import { computed, defineComponent, h, inject, onMounted, provide, ref, toRef, Transition, useId, watch } from 'vue';
 import { useConfig, useTheme, useThemeClass } from "../../_mixins/index.mjs";
 import { formItemInjectionKey } from "../../_mixins/use-form-item.mjs";
 import { createKey, keysOf, resolveWrappedSlot, useInjectionInstanceCollection, warn } from "../../_utils/index.mjs";
@@ -129,7 +128,9 @@ export default defineComponent({
       mergedRequireMarkPlacement: mergedRequireMarkPlacementRef
     } = formItemMiscRefs;
     const renderExplainsRef = ref([]);
-    const feedbackIdRef = ref(createId());
+    const feedbackBaseId = useId();
+    const feedbackIdIndexRef = ref(0);
+    const feedbackIdRef = ref(`${feedbackBaseId}-${feedbackIdIndexRef.value}`);
     const labelElementRef = ref(null);
     const mergedDisabledRef = UForm ? toRef(UForm.props, 'disabled') : ref(false);
     const themeRef = useTheme('Form', '-form-item', style, formLight, props, mergedClsPrefixRef);
@@ -153,7 +154,8 @@ export default defineComponent({
       validationErroredRef.value = false;
       validationWarnedRef.value = false;
       if (props.feedback) {
-        feedbackIdRef.value = createId();
+        feedbackIdIndexRef.value += 1;
+        feedbackIdRef.value = `${feedbackBaseId}-${feedbackIdIndexRef.value}`;
       }
     }
     function handleContentBlur() {

package/es/grid/src/Grid.mjs

@@ -46,6 +46,7 @@ export default defineComponent({
     } = useConfig(props);
     const numRegex = /^\d+$/;
     const widthRef = ref(undefined);
+    const mountedRef = ref(false);
     const breakpointsRef = useBreakpoints((mergedBreakpointsRef === null || mergedBreakpointsRef === void 0 ? void 0 : mergedBreakpointsRef.value) || defaultBreakpoints);
     const isResponsiveRef = useMemo(() => {
       if (props.itemResponsive) return true;
@@ -56,7 +57,11 @@ export default defineComponent({
     });
     const responsiveQueryRef = computed(() => {
       if (!isResponsiveRef.value) return undefined;
-      return props.responsive === 'self' ? widthRef.value : breakpointsRef.value;
+      if (props.responsive === 'self') return widthRef.value;
+      // `screen` responsiveness depends on client-only media queries. Keep the
+      // first SSR and hydration render deterministic, then resolve breakpoints
+      // after mount.
+      return mountedRef.value ? breakpointsRef.value : undefined;
     });
     const responsiveColsRef = useMemo(() => {
       var _a;
@@ -81,6 +86,7 @@ export default defineComponent({
     const isSsrRef = ref(false);
     const contentElRef = ref();
     onMounted(() => {
+      mountedRef.value = true;
       const {
         value: contentEl
       } = contentElRef;