@uzum-tech/ui 1.5.3 → 1.5.5

package/es/data-table/src/interface.d.ts

@@ -9,6 +9,7 @@ import type { PaginationProps } from '../../pagination';
 import type { DataTableTheme } from '../styles';
 import type { RowItem, ColItem } from './use-group-header';
 import type { BaseLoadingExposedProps } from '../../_internal';
+import type { EmptyProps } from '../../empty';
 export declare const dataTableProps: {
     readonly onUnstableColumnResize: PropType<(resizedWidth: number, limitedWidth: number, column: TableBaseColumn, getColumnWidth: (key: ColumnKey) => number | undefined) => void>;
     readonly pagination: {
@@ -101,6 +102,7 @@ export declare const dataTableProps: {
         readonly type: PropType<BaseLoadingExposedProps>;
         readonly default: {};
     };
+    readonly emptyProps: PropType<Partial<EmptyProps>>;
     readonly onLoad: PropType<DataTableOnLoad>;
     readonly 'onUpdate:page': PropType<PaginationProps["onUpdate:page"]>;
     readonly onUpdatePage: PropType<PaginationProps["onUpdate:page"]>;
@@ -3083,6 +3085,7 @@ export interface DataTableInjection {
     syncScrollState: (deltaX?: number, deltaY?: number) => void;
     setHeaderScrollLeft: (scrollLeft: number) => void;
     renderCell: Ref<undefined | ((value: any, rowData: object, column: TableBaseColumn) => VNodeChild)>;
+    emptyPropsRef: Ref<Partial<EmptyProps> | undefined>;
     handleEdit: (value: any, row: any, key: string) => void;
 }
 export declare const dataTableInjectionKey: import("vue").InjectionKey<DataTableInjection>;

package/es/data-table/src/interface.js

@@ -50,7 +50,7 @@ export const dataTableProps = Object.assign(Object.assign({}, useTheme.props), {
     }, paginationBehaviorOnFilter: {
         type: String,
         default: 'current'
-    }, scrollbarProps: Object, renderCell: Function, renderExpandIcon: Function, spinProps: { type: Object, default: {} }, onLoad: Function, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 'onUpdate:sorter': [Function, Array], onUpdateSorter: [Function, Array], 'onUpdate:filters': [Function, Array], onUpdateFilters: [Function, Array], 'onUpdate:checkedRowKeys': [Function, Array], onUpdateCheckedRowKeys: [Function, Array], 'onUpdate:expandedRowKeys': [Function, Array], onUpdateExpandedRowKeys: [Function, Array], onScroll: Function, 
+    }, scrollbarProps: Object, renderCell: Function, renderExpandIcon: Function, spinProps: { type: Object, default: {} }, emptyProps: Object, onLoad: Function, 'onUpdate:page': [Function, Array], onUpdatePage: [Function, Array], 'onUpdate:pageSize': [Function, Array], onUpdatePageSize: [Function, Array], 'onUpdate:sorter': [Function, Array], onUpdateSorter: [Function, Array], 'onUpdate:filters': [Function, Array], onUpdateFilters: [Function, Array], 'onUpdate:checkedRowKeys': [Function, Array], onUpdateCheckedRowKeys: [Function, Array], 'onUpdate:expandedRowKeys': [Function, Array], onUpdateExpandedRowKeys: [Function, Array], onScroll: Function, 
     // deprecated
     onPageChange: [Function, Array], onPageSizeChange: [Function, Array], onSorterChange: [Function, Array], onFiltersChange: [Function, Array], onCheckedRowKeysChange: [Function, Array] });
 export const dataTableInjectionKey = createInjectionKey('u-data-table');

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/dynamic-tags/src/DynamicTags.d.ts

@@ -349,6 +349,7 @@ export declare const dynamicTagsProps: {
             textColorPressedCheckable: string;
             textColorChecked: string;
             colorCheckable: string;
+            colorCheckableOutline: string;
             colorHoverCheckable: string;
             colorPressedCheckable: string;
             colorChecked: string;
@@ -736,6 +737,7 @@ export declare const dynamicTagsProps: {
             textColorPressedCheckable: string;
             textColorChecked: string;
             colorCheckable: string;
+            colorCheckableOutline: string;
             colorHoverCheckable: string;
             colorPressedCheckable: string;
             colorChecked: string;
@@ -1123,6 +1125,7 @@ export declare const dynamicTagsProps: {
             textColorPressedCheckable: string;
             textColorChecked: string;
             colorCheckable: string;
+            colorCheckableOutline: string;
             colorHoverCheckable: string;
             colorPressedCheckable: string;
             colorChecked: string;
@@ -1548,6 +1551,7 @@ declare const _default: import("vue").DefineComponent<{
             textColorPressedCheckable: string;
             textColorChecked: string;
             colorCheckable: string;
+            colorCheckableOutline: string;
             colorHoverCheckable: string;
             colorPressedCheckable: string;
             colorChecked: string;
@@ -1935,6 +1939,7 @@ declare const _default: import("vue").DefineComponent<{
             textColorPressedCheckable: string;
             textColorChecked: string;
             colorCheckable: string;
+            colorCheckableOutline: string;
             colorHoverCheckable: string;
             colorPressedCheckable: string;
             colorChecked: string;
@@ -2322,6 +2327,7 @@ declare const _default: import("vue").DefineComponent<{
             textColorPressedCheckable: string;
             textColorChecked: string;
             colorCheckable: string;
+            colorCheckableOutline: string;
             colorHoverCheckable: string;
             colorPressedCheckable: string;
             colorChecked: string;
@@ -2742,6 +2748,7 @@ declare const _default: import("vue").DefineComponent<{
                 textColorPressedCheckable: string;
                 textColorChecked: string;
                 colorCheckable: string;
+                colorCheckableOutline: string;
                 colorHoverCheckable: string;
                 colorPressedCheckable: string;
                 colorChecked: string;
@@ -3194,6 +3201,7 @@ declare const _default: import("vue").DefineComponent<{
             textColorPressedCheckable: string;
             textColorChecked: string;
             colorCheckable: string;
+            colorCheckableOutline: string;
             colorHoverCheckable: string;
             colorPressedCheckable: string;
             colorChecked: string;
@@ -3581,6 +3589,7 @@ declare const _default: import("vue").DefineComponent<{
             textColorPressedCheckable: string;
             textColorChecked: string;
             colorCheckable: string;
+            colorCheckableOutline: string;
             colorHoverCheckable: string;
             colorPressedCheckable: string;
             colorChecked: string;
@@ -3968,6 +3977,7 @@ declare const _default: import("vue").DefineComponent<{
             textColorPressedCheckable: string;
             textColorChecked: string;
             colorCheckable: string;
+            colorCheckableOutline: string;
             colorHoverCheckable: string;
             colorPressedCheckable: string;
             colorChecked: string;

package/es/dynamic-tags/styles/light.d.ts

@@ -309,6 +309,7 @@ declare const dynamicTagsLight: import("../../_mixins").Theme<"DynamicTags", {
         textColorPressedCheckable: string;
         textColorChecked: string;
         colorCheckable: string;
+        colorCheckableOutline: string;
         colorHoverCheckable: string;
         colorPressedCheckable: string;
         colorChecked: string;

package/es/tag/src/Tag.d.ts

@@ -11,8 +11,13 @@ export declare const tagProps: {
         type: PropType<boolean | undefined>;
         default: undefined;
     };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        default: string;
+    };
     checked: BooleanConstructor;
     checkable: BooleanConstructor;
+    outline: BooleanConstructor;
     strong: BooleanConstructor;
     triggerClickOnClose: BooleanConstructor;
     onClose: PropType<MaybeArray<(e: MouseEvent) => void>>;
@@ -35,10 +40,6 @@ export declare const tagProps: {
         readonly default: "default";
     };
     round: BooleanConstructor;
-    size: {
-        readonly type: PropType<"tiny" | "small" | "medium" | "large">;
-        readonly default: "medium";
-    };
     closable: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
@@ -80,6 +81,7 @@ export declare const tagProps: {
         textColorPressedCheckable: string;
         textColorChecked: string;
         colorCheckable: string;
+        colorCheckableOutline: string;
         colorHoverCheckable: string;
         colorPressedCheckable: string;
         colorChecked: string;
@@ -183,6 +185,7 @@ export declare const tagProps: {
         textColorPressedCheckable: string;
         textColorChecked: string;
         colorCheckable: string;
+        colorCheckableOutline: string;
         colorHoverCheckable: string;
         colorPressedCheckable: string;
         colorChecked: string;
@@ -286,6 +289,7 @@ export declare const tagProps: {
         textColorPressedCheckable: string;
         textColorChecked: string;
         colorCheckable: string;
+        colorCheckableOutline: string;
         colorHoverCheckable: string;
         colorPressedCheckable: string;
         colorChecked: string;
@@ -367,8 +371,13 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<boolean | undefined>;
         default: undefined;
     };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        default: string;
+    };
     checked: BooleanConstructor;
     checkable: BooleanConstructor;
+    outline: BooleanConstructor;
     strong: BooleanConstructor;
     triggerClickOnClose: BooleanConstructor;
     onClose: PropType<MaybeArray<(e: MouseEvent) => void>>;
@@ -391,10 +400,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "default";
     };
     round: BooleanConstructor;
-    size: {
-        readonly type: PropType<"tiny" | "small" | "medium" | "large">;
-        readonly default: "medium";
-    };
     closable: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
@@ -436,6 +441,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorPressedCheckable: string;
         textColorChecked: string;
         colorCheckable: string;
+        colorCheckableOutline: string;
         colorHoverCheckable: string;
         colorPressedCheckable: string;
         colorChecked: string;
@@ -539,6 +545,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorPressedCheckable: string;
         textColorChecked: string;
         colorCheckable: string;
+        colorCheckableOutline: string;
         colorHoverCheckable: string;
         colorPressedCheckable: string;
         colorChecked: string;
@@ -642,6 +649,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorPressedCheckable: string;
         textColorChecked: string;
         colorCheckable: string;
+        colorCheckableOutline: string;
         colorHoverCheckable: string;
         colorPressedCheckable: string;
         colorChecked: string;
@@ -739,6 +747,7 @@ declare const _default: import("vue").DefineComponent<{
         '--u-close-size': string;
         '--u-color': string;
         '--u-color-checkable': string;
+        '--u-color-checkable-outline': string;
         '--u-color-checked': string;
         '--u-color-checked-hover': string;
         '--u-color-checked-pressed': string;
@@ -762,8 +771,13 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<boolean | undefined>;
         default: undefined;
     };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        default: string;
+    };
     checked: BooleanConstructor;
     checkable: BooleanConstructor;
+    outline: BooleanConstructor;
     strong: BooleanConstructor;
     triggerClickOnClose: BooleanConstructor;
     onClose: PropType<MaybeArray<(e: MouseEvent) => void>>;
@@ -786,10 +800,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "default";
     };
     round: BooleanConstructor;
-    size: {
-        readonly type: PropType<"tiny" | "small" | "medium" | "large">;
-        readonly default: "medium";
-    };
     closable: {
         readonly type: PropType<boolean | undefined>;
         readonly default: undefined;
@@ -831,6 +841,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorPressedCheckable: string;
         textColorChecked: string;
         colorCheckable: string;
+        colorCheckableOutline: string;
         colorHoverCheckable: string;
         colorPressedCheckable: string;
         colorChecked: string;
@@ -934,6 +945,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorPressedCheckable: string;
         textColorChecked: string;
         colorCheckable: string;
+        colorCheckableOutline: string;
         colorHoverCheckable: string;
         colorPressedCheckable: string;
         colorChecked: string;
@@ -1037,6 +1049,7 @@ declare const _default: import("vue").DefineComponent<{
         textColorPressedCheckable: string;
         textColorChecked: string;
         colorCheckable: string;
+        colorCheckableOutline: string;
         colorHoverCheckable: string;
         colorPressedCheckable: string;
         colorChecked: string;
@@ -1111,11 +1124,12 @@ declare const _default: import("vue").DefineComponent<{
     type: "default" | "tertiary" | "primary" | "info" | "success" | "warning" | "error";
     disabled: boolean | undefined;
     bordered: boolean | undefined;
-    size: "small" | "tiny" | "medium" | "large";
+    size: "small" | "medium" | "large";
     checked: boolean;
     round: boolean;
     closable: boolean | undefined;
     strong: boolean;
+    outline: boolean;
     checkable: boolean;
     triggerClickOnClose: boolean;
     internalCloseFocusable: boolean;

package/es/tag/src/Tag.js

@@ -9,7 +9,10 @@ import style from './styles/index.cssr';
 export const tagProps = Object.assign(Object.assign(Object.assign({}, useTheme.props), commonProps), { bordered: {
         type: Boolean,
         default: undefined
-    }, checked: Boolean, checkable: Boolean, strong: Boolean, triggerClickOnClose: Boolean, onClose: [Array, Function], onMouseenter: Function, onMouseleave: Function, 'onUpdate:checked': Function, onUpdateChecked: Function, 
+    }, size: {
+        type: String,
+        default: 'large'
+    }, checked: Boolean, checkable: Boolean, outline: Boolean, strong: Boolean, triggerClickOnClose: Boolean, onClose: [Array, Function], onMouseenter: Function, onMouseleave: Function, 'onUpdate:checked': Function, onUpdateChecked: Function, 
     // private
     internalCloseFocusable: {
         type: Boolean,
@@ -72,7 +75,7 @@ export default defineComponent({
         const rtlEnabledRef = useRtl('Tag', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = computed(() => {
             const { type, size, color: { color, textColor } = {} } = props;
-            const { common: { cubicBezierEaseInOut }, self: { closeMargin, closeMarginRtl, borderRadius, opacityDisabled, textColorCheckable, textColorHoverCheckable, textColorPressedCheckable, textColorChecked, colorCheckable, colorHoverCheckable, colorPressedCheckable, colorChecked, colorCheckedHover, colorCheckedPressed, closeBorderRadius, fontWeightStrong, fontWeight, [createKey('padding', size)]: padding, [createKey('colorBordered', type)]: colorBordered, [createKey('closeSize', size)]: closeSize, [createKey('closeIconSize', size)]: closeIconSize, [createKey('fontSize', size)]: fontSize, [createKey('height', size)]: height, [createKey('color', type)]: typedColor, [createKey('textColor', type)]: typeTextColor, [createKey('border', type)]: border, [createKey('closeIconColor', type)]: closeIconColor, [createKey('closeIconColorHover', type)]: closeIconColorHover, [createKey('closeIconColorPressed', type)]: closeIconColorPressed, [createKey('closeColorHover', type)]: closeColorHover, [createKey('closeColorPressed', type)]: closeColorPressed } } = themeRef.value;
+            const { common: { cubicBezierEaseInOut }, self: { closeMargin, closeMarginRtl, borderRadius, opacityDisabled, textColorCheckable, textColorHoverCheckable, textColorPressedCheckable, textColorChecked, colorCheckable, colorCheckableOutline, colorHoverCheckable, colorPressedCheckable, colorChecked, colorCheckedHover, colorCheckedPressed, closeBorderRadius, fontWeightStrong, fontWeight, [createKey('padding', size)]: padding, [createKey('colorBordered', type)]: colorBordered, [createKey('closeSize', size)]: closeSize, [createKey('closeIconSize', size)]: closeIconSize, [createKey('fontSize', size)]: fontSize, [createKey('height', size)]: height, [createKey('color', type)]: typedColor, [createKey('textColor', type)]: typeTextColor, [createKey('border', type)]: border, [createKey('closeIconColor', type)]: closeIconColor, [createKey('closeIconColorHover', type)]: closeIconColorHover, [createKey('closeIconColorPressed', type)]: closeIconColorPressed, [createKey('closeColorHover', type)]: closeColorHover, [createKey('closeColorPressed', type)]: closeColorPressed } } = themeRef.value;
             return {
                 '--u-font-weight-strong': fontWeightStrong,
                 '--u-font-weight': fontWeight,
@@ -93,6 +96,7 @@ export default defineComponent({
                 '--u-close-size': closeSize,
                 '--u-color': color || (mergedBorderedRef.value ? colorBordered : typedColor),
                 '--u-color-checkable': colorCheckable,
+                '--u-color-checkable-outline': colorCheckableOutline,
                 '--u-color-checked': colorChecked,
                 '--u-color-checked-hover': colorCheckedHover,
                 '--u-color-checked-pressed': colorCheckedPressed,
@@ -144,6 +148,7 @@ export default defineComponent({
                     [`${mergedClsPrefix}-tag--strong`]: this.strong,
                     [`${mergedClsPrefix}-tag--disabled`]: this.disabled,
                     [`${mergedClsPrefix}-tag--checkable`]: this.checkable,
+                    [`${mergedClsPrefix}-tag--outline`]: this.checkable && this.outline,
                     [`${mergedClsPrefix}-tag--checked`]: this.checkable && this.checked,
                     [`${mergedClsPrefix}-tag--round`]: round,
                     [`${mergedClsPrefix}-tag--avatar`]: avatarNode,

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

@@ -50,7 +50,9 @@ export default cB('tag', `
  font-weight: var(--u-font-weight);
 `, [cM('strong', `
  font-weight: var(--u-font-weight-strong);
- `), cE('border', `
+ `), cM('closable', [cE('content', `
+ padding-left: 4px;
+ `)]), cE('border', `
  pointer-events: none;
  position: absolute;
  left: 0;
@@ -95,7 +97,11 @@ export default cB('tag', `
  padding: 0px 8px;
  background-color: var(--u-color-checkable);
  transition: border-color .3s var(--u-bezier);
- `, [cNotM('disabled', [c('&:hover', 'background-color: var(--u-color-hover-checkable);', [cNotM('checked', 'color: var(--u-text-color-hover-checkable);')]), c('&:focus', `
+ `, [cE('border', `
+ border: unset;
+ `), cE('content', `
+ padding-left: 0px;
+ `), cNotM('disabled', [c('&:hover', 'background-color: var(--u-color-hover-checkable);', [cNotM('checked', 'color: var(--u-text-color-hover-checkable);')]), c('&:focus', `
  background-color: var(--u-color-pressed-checkable); 
  transition: border-color .3s var(--u-bezier);`, [cNotM('checked', 'color: var(--u-text-color-pressed-checkable);')]), c('&:active', `
  background-color: var(--u-color-pressed-checkable); 
@@ -105,4 +111,8 @@ export default cB('tag', `
  `, [cE('border', `
  border-color: var(--u-color-checked);
  transition: none;
- `), cNotM('disabled', [c('&:hover', 'background-color: var(--u-color-checked-hover);'), c('&:focus', 'background-color: var(--u-color-checked-hover);'), c('&:active', 'background-color: var(--u-color-checked-pressed);')])])])]);
+ `), cNotM('disabled', [c('&:hover', 'background-color: var(--u-color-checked-hover);'), c('&:focus', 'background-color: var(--u-color-checked-hover);'), c('&:active', 'background-color: var(--u-color-checked-pressed);')])])]), cM('outline', `
+ background-color: var(--u-color-checkable-outline);
+ `, [cE('border', `
+ border: var(--u-border);
+ `)])]);

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

@@ -33,6 +33,7 @@ export declare const self: (vars: ThemeCommonVars) => {
     textColorPressedCheckable: string;
     textColorChecked: string;
     colorCheckable: string;
+    colorCheckableOutline: string;
     colorHoverCheckable: string;
     colorPressedCheckable: string;
     colorChecked: string;

package/es/tag/styles/light.js

@@ -12,14 +12,14 @@ export const self = (vars) => {
         closeSizeSmall: '14px',
         closeSizeMedium: '16px',
         closeSizeLarge: '18px',
-        paddingTiny: '2px 6px 2px 10px',
-        paddingSmall: '2px 6px 2px 10px',
-        paddingMedium: '2px 6px 2px 10px',
-        paddingLarge: '2px 6px 2px 10px',
+        paddingTiny: '2px 6px',
+        paddingSmall: '2px 6px',
+        paddingMedium: '2px 6px',
+        paddingLarge: '6px 8px',
         closeMargin: '0 0 0 4px',
         closeMarginRtl: '0 4px 0 0',
         closeBorderRadius: borderRadius,
-        heightTiny: '16px',
+        heightTiny: '20px',
         heightSmall: '20px',
         heightMedium: '24px',
         heightLarge: '32px',
@@ -36,7 +36,8 @@ export const self = (vars) => {
         textColorHoverCheckable: textPrimary,
         textColorPressedCheckable: textPrimary,
         textColorChecked: textQuaternary,
-        colorCheckable: elementsSecondary,
+        colorCheckable: elementsQuaternary,
+        colorCheckableOutline: elementsSecondary,
         colorHoverCheckable: elementsQuaternary,
         colorPressedCheckable: elementsQuaternary,
         colorChecked: elementsPrimary,

package/es/version.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "1.5.3";
+declare const _default: "1.5.5";
 export default _default;

package/es/version.js

@@ -1 +1 @@
-export default '1.5.3';
+export default '1.5.5';

package/lib/_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/lib/_utils/css/index.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.color2Class = exports.formatLength = void 0;
+exports.resolveSize = exports.color2Class = exports.formatLength = void 0;
 var format_length_1 = require("./format-length");
 Object.defineProperty(exports, "formatLength", { enumerable: true, get: function () { return format_length_1.formatLength; } });
 var color_to_class_1 = require("./color-to-class");
 Object.defineProperty(exports, "color2Class", { enumerable: true, get: function () { return color_to_class_1.color2Class; } });
+var normalize_size_1 = require("./normalize-size");
+Object.defineProperty(exports, "resolveSize", { enumerable: true, get: function () { return normalize_size_1.resolveSize; } });

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

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

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveSize = void 0;
+const resolveSize = (value, fallback) => {
+    if (value === undefined)
+        return fallback;
+    value = String(value);
+    return /^\d+$/.test(value) ? `${value}px` : value;
+};
+exports.resolveSize = resolveSize;

package/lib/_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/lib/_utils/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createStylesWithSingleColor = exports.markEventEffectPerformed = exports.eventEffectNotPerformed = exports.isBrowser = exports.isJsdom = exports.createKey = exports.color2Class = exports.formatLength = exports.isArrayShallowEqual = exports.getTitleAttribute = exports.largerSize = exports.smallerSize = exports.throwError = exports.warnOnce = exports.warn = exports.Wrapper = exports.resolveWrappedSlotWithProps = exports.isNodeVShowFalse = exports.mergeEventHandlers = exports.isSlotEmpty = exports.resolveWrappedSlot = exports.resolveSlotWithProps = exports.resolveSlot = exports.createInjectionKey = exports.createRefSetter = exports.createDataKey = exports.getFirstSlotVNode = exports.render = exports.keysOf = exports.getVNodeChildren = exports.getSlot = exports.flatten = exports.omit = exports.keep = exports.call = void 0;
+exports.createStylesWithSingleColor = exports.markEventEffectPerformed = exports.eventEffectNotPerformed = exports.isBrowser = exports.isJsdom = exports.createKey = exports.resolveSize = exports.color2Class = exports.formatLength = exports.isArrayShallowEqual = exports.getTitleAttribute = exports.largerSize = exports.smallerSize = exports.throwError = exports.warnOnce = exports.warn = exports.Wrapper = exports.resolveWrappedSlotWithProps = exports.isNodeVShowFalse = exports.mergeEventHandlers = exports.isSlotEmpty = exports.resolveWrappedSlot = exports.resolveSlotWithProps = exports.resolveSlot = exports.createInjectionKey = exports.createRefSetter = exports.createDataKey = exports.getFirstSlotVNode = exports.render = exports.keysOf = exports.getVNodeChildren = exports.getSlot = exports.flatten = exports.omit = exports.keep = exports.call = void 0;
 var vue_1 = require("./vue");
 Object.defineProperty(exports, "call", { enumerable: true, get: function () { return vue_1.call; } });
 Object.defineProperty(exports, "keep", { enumerable: true, get: function () { return vue_1.keep; } });
@@ -47,6 +47,7 @@ Object.defineProperty(exports, "isArrayShallowEqual", { enumerable: true, get: f
 var css_1 = require("./css");
 Object.defineProperty(exports, "formatLength", { enumerable: true, get: function () { return css_1.formatLength; } });
 Object.defineProperty(exports, "color2Class", { enumerable: true, get: function () { return css_1.color2Class; } });
+Object.defineProperty(exports, "resolveSize", { enumerable: true, get: function () { return css_1.resolveSize; } });
 var cssr_1 = require("./cssr");
 Object.defineProperty(exports, "createKey", { enumerable: true, get: function () { return cssr_1.createKey; } });
 var is_jsdom_1 = require("./env/is-jsdom");

package/lib/avatar/src/Avatar.js

@@ -109,12 +109,6 @@ exports.default = (0, vue_1.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,
@@ -125,7 +119,7 @@ exports.default = (0, vue_1.defineComponent)({
                 '--u-icon-color': props.iconColor || iconColor,
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-merged-size': `var(--u-avatar-size-override, ${height})`,
-                '--u-icon-size': resolveSize(props.iconSize, iconSize)
+                '--u-icon-size': (0, _utils_1.resolveSize)(props.iconSize, iconSize)
             };
         });
         const themeClassHandle = inlineThemeDisabled