@uzum-tech/ui 1.5.4 → 1.6.0

package/es/_internal/radio/src/use-radio.d.ts

@@ -25,6 +25,7 @@ export declare const radioBaseProps: {
         readonly default: undefined;
     };
     readonly onChange: PropType<OnChangeImpl>;
+    readonly onClick: PropType<(event: MouseEvent) => void>;
 };
 export declare const radioGroupInjectionKey: import("vue").InjectionKey<RadioGroupInjection>;
 export interface UseRadio {

package/es/_internal/radio/src/use-radio.js

@@ -26,7 +26,8 @@ export const radioBaseProps = {
         type: Boolean,
         default: undefined
     },
-    onChange: [Function, Array]
+    onChange: [Function, Array],
+    onClick: [Function, Array]
 };
 export const radioGroupInjectionKey = createInjectionKey('u-radio-group');
 function useRadio(props) {

package/es/_utils/css/index.d.ts

@@ -1,2 +1,3 @@
 export { formatLength } from './format-length';
 export { color2Class } from './color-to-class';
+export { resolveSize } from './normalize-size';

package/es/_utils/css/index.js

@@ -1,2 +1,3 @@
 export { formatLength } from './format-length';
 export { color2Class } from './color-to-class';
+export { resolveSize } from './normalize-size';

package/es/_utils/css/normalize-size.d.ts

@@ -0,0 +1 @@
+export declare const resolveSize: (value: string | number | undefined, fallback: string) => string;

package/es/_utils/css/normalize-size.js

@@ -0,0 +1,6 @@
+export const resolveSize = (value, fallback) => {
+    if (value === undefined)
+        return fallback;
+    value = String(value);
+    return /^\d+$/.test(value) ? `${value}px` : value;
+};

package/es/_utils/index.d.ts

@@ -2,7 +2,7 @@ export { call, keep, omit, flatten, getSlot, getVNodeChildren, keysOf, render, g
 export type { MaybeArray } from './vue';
 export { warn, warnOnce, throwError, smallerSize, largerSize, getTitleAttribute, isArrayShallowEqual } from './uzum';
 export type { ExtractPublicPropTypes, ExtractInternalPropTypes, Mutable } from './uzum';
-export { formatLength, color2Class } from './css';
+export { formatLength, color2Class, resolveSize } from './css';
 export { createKey } from './cssr';
 export { isJsdom } from './env/is-jsdom';
 export { isBrowser } from './env/is-browser';

package/es/_utils/index.js

@@ -1,6 +1,6 @@
 export { call, keep, omit, flatten, getSlot, getVNodeChildren, keysOf, render, getFirstSlotVNode, createDataKey, createRefSetter, createInjectionKey, resolveSlot, resolveSlotWithProps, resolveWrappedSlot, isSlotEmpty, mergeEventHandlers, isNodeVShowFalse, resolveWrappedSlotWithProps, Wrapper } from './vue';
 export { warn, warnOnce, throwError, smallerSize, largerSize, getTitleAttribute, isArrayShallowEqual } from './uzum';
-export { formatLength, color2Class } from './css';
+export { formatLength, color2Class, resolveSize } from './css';
 export { createKey } from './cssr';
 export { isJsdom } from './env/is-jsdom';
 export { isBrowser } from './env/is-browser';

package/es/avatar/src/Avatar.js

@@ -4,7 +4,7 @@ import { isImageSupportNativeLazy } from '../../_utils/env/is-native-lazy-load';
 import { observeIntersection } from '../../image/src/utils';
 import { tagInjectionKey } from '../../tag/src/Tag';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
-import { createKey, resolveWrappedSlot, resolveSlot } from '../../_utils';
+import { createKey, resolveWrappedSlot, resolveSlot, resolveSize } from '../../_utils';
 import { avatarLight } from '../styles';
 import { avatarGroupInjectionKey } from './context';
 import { USkeleton } from '../../skeleton';
@@ -103,12 +103,6 @@ export default defineComponent({
             const getBackgroundColor = (color) => {
                 return props.disabled || size === 'small' ? 'rgba(0,0,0,0)' : color;
             };
-            const resolveSize = (value, fallback) => {
-                if (value === undefined)
-                    return fallback;
-                value = String(value);
-                return /^\d+$/.test(value) ? `${value}px` : value;
-            };
             return {
                 '--u-font-size': fontSize,
                 '--u-font-weight': fontWeight,

package/es/badge/src/Badge.d.ts

@@ -16,6 +16,7 @@ export declare const badgeProps: {
     readonly processing: BooleanConstructor;
     readonly color: StringConstructor;
     readonly textColor: StringConstructor;
+    readonly dotSize: PropType<string | number>;
     readonly offset: PropType<readonly [number | string, number | string]>;
     readonly theme: PropType<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -32,6 +33,7 @@ export declare const badgeProps: {
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -48,6 +50,7 @@ export declare const badgeProps: {
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -64,6 +67,7 @@ export declare const badgeProps: {
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>>;
 };
 export type BadgeProps = ExtractPublicPropTypes<typeof badgeProps>;
@@ -83,6 +87,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly processing: BooleanConstructor;
     readonly color: StringConstructor;
     readonly textColor: StringConstructor;
+    readonly dotSize: PropType<string | number>;
     readonly offset: PropType<readonly [number | string, number | string]>;
     readonly theme: PropType<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -99,6 +104,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -115,6 +121,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -131,6 +138,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>>;
 }, {
     rtlEnabled: import("vue").Ref<import("../../config-provider/src/internal-interface").RtlItem | undefined> | undefined;
@@ -147,6 +155,7 @@ declare const _default: import("vue").DefineComponent<{
         '--u-ripple-bezier': string;
         '--u-text-color': string;
         '--u-border-color': string;
+        '--u-dot-size': string;
     }> | undefined;
     themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;
@@ -169,6 +178,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly processing: BooleanConstructor;
     readonly color: StringConstructor;
     readonly textColor: StringConstructor;
+    readonly dotSize: PropType<string | number>;
     readonly offset: PropType<readonly [number | string, number | string]>;
     readonly theme: PropType<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -185,6 +195,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>;
     readonly themeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -201,6 +212,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>>;
     readonly builtinThemeOverrides: PropType<import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Badge", {
         color: string;
@@ -217,6 +229,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorError: string;
         textColorWarning: string;
         borderColor: string;
+        dotSize: string;
     }, any>>>;
 }>>, {
     readonly type: "default" | "info" | "success" | "warning" | "error" | "prime";

package/es/badge/src/Badge.js

@@ -1,7 +1,7 @@
 import { h, computed, onMounted, ref, defineComponent, Transition } from 'vue';
 import { useConfig, useTheme, useThemeClass } from '../../_mixins';
 import { UBaseSlotMachine, UBaseWave } from '../../_internal';
-import { color2Class, createKey, getTitleAttribute, isSlotEmpty, resolveSlot } from '../../_utils';
+import { color2Class, createKey, getTitleAttribute, isSlotEmpty, resolveSize, resolveSlot } from '../../_utils';
 import { badgeLight } from '../styles';
 import style from './styles/index.cssr';
 import { useRtl } from '../../_mixins/use-rtl';
@@ -11,7 +11,7 @@ export const badgeProps = Object.assign(Object.assign({}, useTheme.props), { val
     }, show: {
         type: Boolean,
         default: true
-    }, showZero: Boolean, processing: Boolean, color: String, textColor: String, offset: Array });
+    }, showZero: Boolean, processing: Boolean, color: String, textColor: String, dotSize: [String, Number], offset: Array });
 export default defineComponent({
     name: 'Badge',
     props: badgeProps,
@@ -39,7 +39,7 @@ export default defineComponent({
         const rtlEnabledRef = useRtl('Badge', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {
             const { type, color: propColor, textColor: propTextColor } = props;
-            const { common: { cubicBezierEaseInOut, cubicBezierEaseOut }, self: { [createKey('color', type)]: color, [createKey('textColor', type)]: textColor, fontSize, borderColor } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut, cubicBezierEaseOut }, self: { [createKey('color', type)]: color, [createKey('textColor', type)]: textColor, fontSize, borderColor, dotSize } } = themeRef.value;
             return {
                 '--u-font-size': fontSize,
                 '--u-color': propColor || color,
@@ -47,7 +47,8 @@ export default defineComponent({
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-ripple-bezier': cubicBezierEaseOut,
                 '--u-text-color': propTextColor || textColor,
-                '--u-border-color': borderColor
+                '--u-border-color': borderColor,
+                '--u-dot-size': resolveSize(props.dotSize, dotSize)
             };
         });
         const themeClassHandle = inlineThemeDisabled

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

@@ -29,13 +29,14 @@ export default c([c('@keyframes badge-wave-spread', {
   transformOrigin: 'left bottom',
   originalTransform: 'translateX(0)'
 })])]), cM('dot', [cB('badge-sup', `
- height: 8px;
- width: 8px;
+ height: var(--u-dot-size);
+ width: var(--u-dot-size);
+ justify-content: center;
+ overflow: hidden;
  padding: 0;
- min-width: 8px;
  left: 100%;
  bottom: calc(100% - 4px);
- `, [c('::before', 'border-radius: 4px;')])]), cB('badge-sup', `
+ `, [c('::before', 'border-radius: 4px;'), c('img', 'width: 100%')])]), cB('badge-sup', `
  background: var(--u-color);
  transition:
  background-color .3s var(--u-bezier),
@@ -86,8 +87,6 @@ export default c([c('@keyframes badge-wave-spread', {
  border-radius: 100px;
  `), cM('dot', [cB('badge-sup', `
  transform: none;
- width: 12px;
- height: 12px;
  transform: none;
  left: auto;
  right: 0;

package/es/badge/styles/light.d.ts

@@ -15,6 +15,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     textColorError: string;
     textColorWarning: string;
     borderColor: string;
+    dotSize: string;
 };
 export type BadgeThemeVars = ReturnType<typeof self>;
 declare const badgeLight: Theme<'Badge', BadgeThemeVars>;

package/es/badge/styles/light.js

@@ -15,7 +15,8 @@ export const self = (vars) => {
         textColorSuccess: textQuaternary,
         textColorError: textQuaternary,
         textColorWarning: textQuaternary,
-        borderColor: staticWhite
+        borderColor: staticWhite,
+        dotSize: '12px'
     };
 };
 const badgeLight = {

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

@@ -107,6 +107,28 @@ cE('ripple', `
  --u-merged-border: var(--u-border-disabled-checked);
  --u-merged-shadow: transparent;
  --u-merged-icon: var(--u-check-mark-color-disabled-checked);
+ `)]), cM('indeterminate', `
+ --u-merged-color: var(--u-color-checked);
+ --u-merged-border: var(--u-border-checked);
+ --u-merged-shadow: var(--u-box-shadow-hover-checked);
+ --u-merged-icon: var(--u-check-mark-color);
+ `, [c('&:hover', `
+ --u-merged-color: var(--u-color-hover-checked);
+ --u-merged-border: var(--u-border-hover-checked);
+ --u-merged-shadow: var(--u-box-shadow-hover-checked);
+ `), c('&:focus', `
+ --u-merged-color: var(--u-color-focus-checked);
+ --u-merged-border: var(--u-border-focus-checked);
+ --u-merged-shadow: var(--u-box-shadow-focus-checked);
+ `), c('&:active', `
+ --u-merged-color: var(--u-color-active-checked);
+ --u-merged-border: var(--u-border-active-checked);
+ --u-merged-shadow: var(--u-box-shadow-active-checked);
+ `), cM('disabled', `
+ --u-merged-color: var(--u-color-disabled-checked);
+ --u-merged-border: var(--u-border-disabled-checked);
+ --u-merged-shadow: transparent;
+ --u-merged-icon: var(--u-check-mark-color-disabled-checked);
  `)])]), cB('checkbox-box', `
  position: relative;
  flex-shrink: 0;

package/es/data-table/src/TableParts/Body.js

@@ -574,10 +574,13 @@ export default defineComponent({
                                         } }))
                                 ]
                                 : null,
-                            column.type === 'selection' ? (!isSummary ? (column.multiple === false ? (h(RenderSafeRadio, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onUpdateChecked: () => {
+                            column.type === 'selection' ? (!isSummary ? (column.multiple === false ? (h(RenderSafeRadio, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onClick: (event) => {
+                                    event.stopPropagation();
+                                }, onUpdateChecked: () => {
                                     handleRadioUpdateChecked(rowInfo.tmNode);
-                                } })) : (h(RenderSafeCheckbox, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onUpdateChecked: (checked, e) => {
-                                    handleCheckboxUpdateChecked(rowInfo.tmNode, checked, e.shiftKey);
+                                } })) : (h(RenderSafeCheckbox, { key: currentPage, rowKey: rowKey, disabled: rowInfo.tmNode.disabled, onUpdateChecked: (checked, event) => {
+                                    event.stopPropagation();
+                                    handleCheckboxUpdateChecked(rowInfo.tmNode, checked, event.shiftKey);
                                 } }))) : null) : column.type === 'expand' ? (!isSummary ? (!column.expandable ||
                                 ((_e = column.expandable) === null || _e === void 0 ? void 0 : _e.call(column, rowData)) ? (h(ExpandTrigger, { clsPrefix: mergedClsPrefix, expanded: expanded, renderExpandIcon: this.renderExpandIcon, onClick: () => {
                                     handleUpdateExpanded(rowKey, null);

package/es/data-table/src/TableParts/BodyRadio.d.ts

@@ -13,6 +13,9 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<(checked: boolean) => void>;
         required: true;
     };
+    onClick: {
+        type: PropType<(event: MouseEvent) => void>;
+    };
 }, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     rowKey: {
         type: PropType<RowKey>;
@@ -26,5 +29,8 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<(checked: boolean) => void>;
         required: true;
     };
+    onClick: {
+        type: PropType<(event: MouseEvent) => void>;
+    };
 }>>, {}, {}>;
 export default _default;

package/es/data-table/src/TableParts/BodyRadio.js

@@ -16,6 +16,9 @@ export default defineComponent({
         onUpdateChecked: {
             type: Function,
             required: true
+        },
+        onClick: {
+            type: Function
         }
     },
     setup(props) {
@@ -24,7 +27,7 @@ export default defineComponent({
          } = inject(dataTableInjectionKey);
         return () => {
             const { rowKey } = props;
-            return (h(URadio, { name: componentId, disabled: props.disabled, checked: mergedCheckedRowKeySetRef.value.has(rowKey), onUpdateChecked: props.onUpdateChecked, size: sizeRef.value }));
+            return (h(URadio, { name: componentId, disabled: props.disabled, checked: mergedCheckedRowKeySetRef.value.has(rowKey), onUpdateChecked: props.onUpdateChecked, onClick: props.onClick, size: sizeRef.value }));
         };
     }
 });

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

@@ -47,6 +47,7 @@ export declare const datePickerProps: {
     readonly shortcuts: PropType<Shortcuts>;
     readonly defaultShortcuts: BooleanConstructor;
     readonly isDateDisabled: PropType<IsDateDisabled>;
+    readonly maxDate: PropType<number | undefined>;
     readonly isTimeDisabled: PropType<IsTimeDisabled>;
     readonly show: {
         readonly type: PropType<boolean | undefined>;
@@ -2148,6 +2149,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly shortcuts: PropType<Shortcuts>;
     readonly defaultShortcuts: BooleanConstructor;
     readonly isDateDisabled: PropType<IsDateDisabled>;
+    readonly maxDate: PropType<number | undefined>;
     readonly isTimeDisabled: PropType<IsTimeDisabled>;
     readonly show: {
         readonly type: PropType<boolean | undefined>;
@@ -5448,6 +5450,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly shortcuts: PropType<Shortcuts>;
     readonly defaultShortcuts: BooleanConstructor;
     readonly isDateDisabled: PropType<IsDateDisabled>;
+    readonly maxDate: PropType<number | undefined>;
     readonly isTimeDisabled: PropType<IsTimeDisabled>;
     readonly show: {
         readonly type: PropType<boolean | undefined>;

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

@@ -30,7 +30,7 @@ export const datePickerProps = Object.assign(Object.assign({}, useTheme.props),
     }, value: [Number, Array], formattedValue: [String, Array], size: String, type: {
         type: String,
         default: 'date'
-    }, valueFormat: String, separator: String, placeholder: String, startPlaceholder: String, endPlaceholder: String, format: String, dateFormat: String, timeFormat: String, actions: Array, shortcuts: Object, defaultShortcuts: Boolean, isDateDisabled: Function, isTimeDisabled: Function, show: {
+    }, 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, '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], 
@@ -564,7 +564,7 @@ export default defineComponent({
         const dualValidation = dualCalendarValidation(props, pendingValueRef);
         provide(datePickerInjectionKey, Object.assign(Object.assign(Object.assign({ mergedClsPrefixRef, mergedThemeRef: themeRef, timePickerSizeRef,
             localeRef,
-            dateLocaleRef, firstDayOfWeekRef: toRef(props, 'firstDayOfWeek'), isDateDisabledRef: toRef(props, 'isDateDisabled'), rangesRef: toRef(props, 'ranges'), timePickerPropsRef: toRef(props, 'timePickerProps'), closeOnSelectRef: toRef(props, 'closeOnSelect'), updateValueOnCloseRef: toRef(props, 'updateValueOnClose') }, uniVaidation), dualValidation), { datePickerSlots: slots }));
+            dateLocaleRef, firstDayOfWeekRef: toRef(props, 'firstDayOfWeek'), isDateDisabledRef: toRef(props, 'isDateDisabled'), maxDateRef: toRef(props, 'maxDate'), rangesRef: toRef(props, 'ranges'), timePickerPropsRef: toRef(props, 'timePickerProps'), closeOnSelectRef: toRef(props, 'closeOnSelect'), updateValueOnCloseRef: toRef(props, 'updateValueOnClose') }, uniVaidation), dualValidation), { datePickerSlots: slots }));
         const exposedMethods = {
             focus: () => {
                 var _a;

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

@@ -61,6 +61,7 @@ export type DatePickerInjection = {
     localeRef: Ref<ULocale['DatePicker']>;
     dateLocaleRef: Ref<UDateLocale>;
     isDateDisabledRef: Ref<IsDateDisabled | undefined>;
+    maxDateRef: Ref<number | undefined>;
     rangesRef: Ref<Record<string, [number, number]> | undefined>;
     closeOnSelectRef: Ref<boolean>;
     updateValueOnCloseRef: Ref<boolean>;

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

@@ -11,7 +11,7 @@ const useCalendarProps = Object.assign(Object.assign({}, usePanelCommonProps), {
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function useCalendar(props, type) {
     const panelCommon = usePanelCommon(props);
-    const { isValueInvalidRef, isDateDisabledRef, isDateInvalidRef, isTimeInvalidRef, isDateTimeInvalidRef, isHourDisabledRef, isMinuteDisabledRef, isSecondDisabledRef, localeRef, firstDayOfWeekRef, datePickerSlots
+    const { isValueInvalidRef, isDateDisabledRef, maxDateRef, isDateInvalidRef, isTimeInvalidRef, isDateTimeInvalidRef, isHourDisabledRef, isMinuteDisabledRef, isSecondDisabledRef, localeRef, firstDayOfWeekRef, datePickerSlots
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
      } = inject(datePickerInjectionKey);
     const validation = {
@@ -44,7 +44,7 @@ function useCalendar(props, type) {
     });
     const yearArrayRef = computed(() => {
         const { value } = props;
-        return yearArray(Array.isArray(value) ? null : value, nowRef.value);
+        return yearArray(Array.isArray(value) ? null : value, nowRef.value, maxDateRef.value);
     });
     const quarterArrayRef = computed(() => {
         const { value } = props;
@@ -90,6 +90,9 @@ function useCalendar(props, type) {
         return getTime(startOfDay(value));
     }
     function mergedIsDateDisabled(ts) {
+        if (maxDateRef.value && ts > maxDateRef.value) {
+            return true;
+        }
         const { isDateDisabled: { value: isDateDisabled } } = validation;
         if (!isDateDisabled)
             return false;

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

@@ -11,7 +11,7 @@ const useDualCalendarProps = Object.assign(Object.assign({}, usePanelCommonProps
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function useDualCalendar(props, type) {
     var _a, _b;
-    const { isDateDisabledRef, isStartHourDisabledRef, isEndHourDisabledRef, isStartMinuteDisabledRef, isEndMinuteDisabledRef, isStartSecondDisabledRef, isEndSecondDisabledRef, isStartDateInvalidRef, isEndDateInvalidRef, isStartTimeInvalidRef, isEndTimeInvalidRef, isStartValueInvalidRef, isEndValueInvalidRef, isRangeInvalidRef, localeRef, rangesRef, closeOnSelectRef, updateValueOnCloseRef, firstDayOfWeekRef, datePickerSlots
+    const { isDateDisabledRef, maxDateRef, isStartHourDisabledRef, isEndHourDisabledRef, isStartMinuteDisabledRef, isEndMinuteDisabledRef, isStartSecondDisabledRef, isEndSecondDisabledRef, isStartDateInvalidRef, isEndDateInvalidRef, isStartTimeInvalidRef, isEndTimeInvalidRef, isStartValueInvalidRef, isEndValueInvalidRef, isRangeInvalidRef, localeRef, rangesRef, closeOnSelectRef, updateValueOnCloseRef, firstDayOfWeekRef, datePickerSlots
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
      } = inject(datePickerInjectionKey);
     const validation = {
@@ -108,10 +108,10 @@ function useDualCalendar(props, type) {
         return shortcuts || rangesRef.value;
     });
     const startYearArrayRef = computed(() => {
-        return yearArray(pluckValueFromRange(props.value, 'start'), nowRef.value);
+        return yearArray(pluckValueFromRange(props.value, 'start'), nowRef.value, maxDateRef.value);
     });
     const endYearArrayRef = computed(() => {
-        return yearArray(pluckValueFromRange(props.value, 'end'), nowRef.value);
+        return yearArray(pluckValueFromRange(props.value, 'end'), nowRef.value, maxDateRef.value);
     });
     const startQuarterArrayRef = computed(() => {
         const startValue = pluckValueFromRange(props.value, 'start');
@@ -208,6 +208,9 @@ function useDualCalendar(props, type) {
     }
     // The function is used on date panel, not the date-picker value validation
     function mergedIsDateDisabled(ts) {
+        if (maxDateRef.value && ts > maxDateRef.value) {
+            return true;
+        }
         const isDateDisabled = isDateDisabledRef.value;
         if (!isDateDisabled)
             return false;

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

@@ -53,7 +53,7 @@ export type DateCommonItem = DateItem | MonthItem | YearItem | QuarterItem;
 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): YearItem[];
+declare function yearArray(valueTs: number | null, currentTs: number, maxDate?: number): YearItem[];
 declare function strictParse(string: string, pattern: string, backup: Date, option: {
     locale: UDateLocale['locale'];
 }): Date;

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

@@ -153,10 +153,11 @@ function quarterArray(yearAnchorTs, valueTs, currentTs) {
     }
     return calendarQuarters;
 }
-function yearArray(valueTs, currentTs) {
+function yearArray(valueTs, currentTs, maxDate) {
     const calendarYears = [];
     const time1900 = new Date(START_YEAR, 0, 1);
-    let count = END_YEAR - START_YEAR + 1;
+    const endYear = maxDate ? new Date(maxDate).getFullYear() : END_YEAR;
+    let count = endYear - START_YEAR + 1;
     while (count--) {
         calendarYears.push(yearItem(getTime(addYears(time1900, count)), valueTs, currentTs));
     }

package/es/list/src/List.d.ts

@@ -306,8 +306,8 @@ declare const _default: import("vue").DefineComponent<{
     size: import("./interface").Size;
     header: import("./interface").RenderableType;
     loadingSkeleton: boolean;
-    rounded: boolean;
     clickable: boolean;
+    rounded: boolean;
     hoverable: boolean;
     showDivider: boolean;
     descriptionFirst: boolean;

package/es/list/src/ListItem.js

@@ -1,5 +1,5 @@
-import { h, defineComponent, inject, computed, ref } from 'vue';
-import { call, createRefFromPropsAndInjection, throwError } from '../../_utils';
+import { h, defineComponent, inject, computed, ref, watchEffect } from 'vue';
+import { call, createRefFromPropsAndInjection, throwError, warnOnce } from '../../_utils';
 import { listInjectionKey, listItemProps } from './props';
 import { ChevronRightIcon } from '../../_internal/icons';
 import { UBaseIcon, UBaseSkeleton, InternalUText } from '../../_internal';
@@ -10,6 +10,13 @@ export default defineComponent({
     name: 'ListItem',
     props: Object.assign({}, listItemProps),
     setup(props, { slots }) {
+        if (process.env.NODE_ENV !== 'production') {
+            watchEffect(() => {
+                if (slots.avatar !== undefined) {
+                    warnOnce('list-item', '`avatar` is deprecated, please use `prefix` instead.');
+                }
+            });
+        }
         const listInjection = inject(listInjectionKey, null);
         if (!listInjection) {
             throwError('list-item', '`u-list-item` must be placed in `u-list`.');

package/es/pagination/src/Pagination.js

@@ -146,7 +146,13 @@ export default defineComponent({
         });
         const selectSizeRef = computed(() => {
             var _a, _b;
-            return (((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Pagination) === null || _b === void 0 ? void 0 : _b.selectSize) || props.size);
+            const selectSizes = {
+                small: 'small',
+                medium: 'small',
+                large: 'medium'
+            };
+            return (((_b = (_a = mergedComponentPropsRef === null || mergedComponentPropsRef === void 0 ? void 0 : mergedComponentPropsRef.value) === null || _a === void 0 ? void 0 : _a.Pagination) === null || _b === void 0 ? void 0 : _b.selectSize) ||
+                selectSizes[props.size]);
         });
         const startIndexRef = computed(() => {
             return (mergedPageRef.value - 1) * mergedPageSizeRef.value;
@@ -446,7 +452,7 @@ export default defineComponent({
                                             // eslint-disable-next-line no-case-declarations
                                             const fastForwardNode = this.fastForwardActive ? (h(UBaseIcon, { clsPrefix: mergedClsPrefix }, {
                                                 default: () => this.rtlEnabled ? (h(FastBackwardIcon, null)) : (h(FastForwardIcon, null))
-                                            })) : (h(UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(MoreIcon, null) }));
+                                            })) : (h(UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(MoreIcon, { class: "more-icon" }) }));
                                             if (renderLabel) {
                                                 contentNode = renderLabel({
                                                     type: 'fast-forward',
@@ -465,7 +471,7 @@ export default defineComponent({
                                             // eslint-disable-next-line no-case-declarations
                                             const fastBackwardNode = this.fastBackwardActive ? (h(UBaseIcon, { clsPrefix: mergedClsPrefix }, {
                                                 default: () => this.rtlEnabled ? (h(FastForwardIcon, null)) : (h(FastBackwardIcon, null))
-                                            })) : (h(UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(MoreIcon, null) }));
+                                            })) : (h(UBaseIcon, { clsPrefix: mergedClsPrefix }, { default: () => h(MoreIcon, { class: "more-icon" }) }));
                                             if (renderLabel) {
                                                 contentNode = renderLabel({
                                                     type: 'fast-backward',
@@ -509,7 +515,7 @@ export default defineComponent({
                                                 ? 'fast-backward'
                                                 : 'fast-forward'
                                             : pageItem.type;
-                                        return (h(UPopselect, { to: this.to, key: key, disabled: disabled, trigger: "hover", virtualScroll: true, style: { width: '60px' }, theme: mergedTheme.peers.Popselect, themeOverrides: mergedTheme.peerOverrides.Popselect, builtinThemeOverrides: {
+                                        return (h(UPopselect, { to: this.to, key: key, disabled: disabled, trigger: "hover", virtualScroll: true, style: { minWidth: '70px', textAlign: 'center' }, theme: mergedTheme.peers.Popselect, themeOverrides: mergedTheme.peerOverrides.Popselect, builtinThemeOverrides: {
                                                 peers: {
                                                     InternalSelectMenu: {
                                                         height: 'calc(var(--u-option-height) * 4.6)'
@@ -563,7 +569,7 @@ export default defineComponent({
                     case 'size-picker': {
                         return !simple && showSizePicker ? (h("div", { class: `${mergedClsPrefix}-pagination-size-picker` },
                             h(USelect, Object.assign({ consistentMenuWidth: false, placeholder: "", showCheckmark: false, to: this.to }, this.selectProps, { size: selectSize, options: pageSizeOptions, value: mergedPageSize, disabled: disabled, theme: mergedTheme.peers.Select, themeOverrides: mergedTheme.peerOverrides.Select, onUpdateValue: handleSizePickerChange })),
-                            h("span", { class: `${mergedClsPrefix}-label` }, `${sizePickerLabel || ''}`))) : null;
+                            h("span", { class: `${mergedClsPrefix}-label` }, sizePickerLabel || ''))) : null;
                     }
                     case 'quick-jumper':
                         return !simple && showQuickJumper ? (h("div", { class: `${mergedClsPrefix}-pagination-quick-jumper` },

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

@@ -1,4 +1,4 @@
-import { cB, c, cM, cNotM } from '../../../_utils/cssr';
+import { cB, c, cM, cNotM, cE } from '../../../_utils/cssr';
 const hoverStyleProps = `
  background: var(--u-item-color-hover);
  color: var(--u-item-text-color-hover);
@@ -87,9 +87,9 @@ export default cB('pagination', `
  line-height: 20px;
  `), cB('base-selection-label', `
  background-color: var(--u-pagination-size-picker-background);
- `), cB('base-selection__border', `
+ `), cB('base-selection', [cE('border', `
  border-color: var(--u-pagination-size-picker-border);
- `)]), cB('pagination-quick-jumper', `
+ `)])]), cB('pagination-quick-jumper', `
  white-space: nowrap;
  display: flex;
  color: var(--u-jumper-text-color);
@@ -123,14 +123,19 @@ export default cB('pagination', `
  border-color .3s var(--u-bezier),
  background-color .3s var(--u-bezier),
  fill .3s var(--u-bezier);
- `, [cM('button', `
+ `, [c('&:has(.more-icon)', `
+ font-size: 24px;
+ `), cM('button', `
  background: var(--u-button-color);
  color: var(--u-button-icon-color);
  border: var(--u-button-border);
  padding: 0;
  `, [cB('base-icon', `
  font-size: var(--u-button-icon-size);
- `)]), cNotM('disabled', [cM('hover', hoverStyleProps, hoverStyleChildren), c('&:hover', hoverStyleProps, hoverStyleChildren), c('&:active', `
+ `)]), cNotM('disabled', [cNotM('clickable', `
+ width: 45px;
+ padding: 0;
+ `), cM('hover', hoverStyleProps, hoverStyleChildren), c('&:hover', hoverStyleProps, hoverStyleChildren), c('&:active', `
  font-weight: 700;
  background: var(--u-item-color-pressed);
  color: var(--u-item-text-color-pressed);