@uzum-tech/ui 1.5.3 → 1.5.5

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

@@ -36,7 +36,7 @@ exports.datePickerProps = Object.assign(Object.assign({}, _mixins_1.useTheme.pro
     }, 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], 
@@ -570,7 +570,7 @@ exports.default = (0, vue_1.defineComponent)({
         const dualValidation = (0, validation_utils_1.dualCalendarValidation)(props, pendingValueRef);
         (0, vue_1.provide)(interface_1.datePickerInjectionKey, Object.assign(Object.assign(Object.assign({ mergedClsPrefixRef, mergedThemeRef: themeRef, timePickerSizeRef,
             localeRef,
-            dateLocaleRef, firstDayOfWeekRef: (0, vue_1.toRef)(props, 'firstDayOfWeek'), isDateDisabledRef: (0, vue_1.toRef)(props, 'isDateDisabled'), rangesRef: (0, vue_1.toRef)(props, 'ranges'), timePickerPropsRef: (0, vue_1.toRef)(props, 'timePickerProps'), closeOnSelectRef: (0, vue_1.toRef)(props, 'closeOnSelect'), updateValueOnCloseRef: (0, vue_1.toRef)(props, 'updateValueOnClose') }, uniVaidation), dualValidation), { datePickerSlots: slots }));
+            dateLocaleRef, firstDayOfWeekRef: (0, vue_1.toRef)(props, 'firstDayOfWeek'), isDateDisabledRef: (0, vue_1.toRef)(props, 'isDateDisabled'), maxDateRef: (0, vue_1.toRef)(props, 'maxDate'), rangesRef: (0, vue_1.toRef)(props, 'ranges'), timePickerPropsRef: (0, vue_1.toRef)(props, 'timePickerProps'), closeOnSelectRef: (0, vue_1.toRef)(props, 'closeOnSelect'), updateValueOnCloseRef: (0, vue_1.toRef)(props, 'updateValueOnClose') }, uniVaidation), dualValidation), { datePickerSlots: slots }));
         const exposedMethods = {
             focus: () => {
                 var _a;

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

@@ -16,7 +16,7 @@ exports.useCalendarProps = useCalendarProps;
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 function useCalendar(props, type) {
     const panelCommon = (0, use_panel_common_1.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
      } = (0, vue_1.inject)(interface_1.datePickerInjectionKey);
     const validation = {
@@ -49,7 +49,7 @@ function useCalendar(props, type) {
     });
     const yearArrayRef = (0, vue_1.computed)(() => {
         const { value } = props;
-        return (0, utils_1.yearArray)(Array.isArray(value) ? null : value, nowRef.value);
+        return (0, utils_1.yearArray)(Array.isArray(value) ? null : value, nowRef.value, maxDateRef.value);
     });
     const quarterArrayRef = (0, vue_1.computed)(() => {
         const { value } = props;
@@ -95,6 +95,9 @@ function useCalendar(props, type) {
         return (0, date_fns_1.getTime)((0, date_fns_1.startOfDay)(value));
     }
     function mergedIsDateDisabled(ts) {
+        if (maxDateRef.value && ts > maxDateRef.value) {
+            return true;
+        }
         const { isDateDisabled: { value: isDateDisabled } } = validation;
         if (!isDateDisabled)
             return false;

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

@@ -16,7 +16,7 @@ exports.useDualCalendarProps = useDualCalendarProps;
 // 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
      } = (0, vue_1.inject)(interface_1.datePickerInjectionKey);
     const validation = {
@@ -113,10 +113,10 @@ function useDualCalendar(props, type) {
         return shortcuts || rangesRef.value;
     });
     const startYearArrayRef = (0, vue_1.computed)(() => {
-        return (0, utils_1.yearArray)((0, utils_1.pluckValueFromRange)(props.value, 'start'), nowRef.value);
+        return (0, utils_1.yearArray)((0, utils_1.pluckValueFromRange)(props.value, 'start'), nowRef.value, maxDateRef.value);
     });
     const endYearArrayRef = (0, vue_1.computed)(() => {
-        return (0, utils_1.yearArray)((0, utils_1.pluckValueFromRange)(props.value, 'end'), nowRef.value);
+        return (0, utils_1.yearArray)((0, utils_1.pluckValueFromRange)(props.value, 'end'), nowRef.value, maxDateRef.value);
     });
     const startQuarterArrayRef = (0, vue_1.computed)(() => {
         const startValue = (0, utils_1.pluckValueFromRange)(props.value, 'start');
@@ -213,6 +213,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/lib/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/lib/date-picker/src/utils.js

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

package/lib/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/lib/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/lib/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/lib/tag/src/Tag.js

@@ -15,7 +15,10 @@ const index_cssr_1 = __importDefault(require("./styles/index.cssr"));
 exports.tagProps = Object.assign(Object.assign(Object.assign({}, _mixins_1.useTheme.props), common_props_1.default), { 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,
@@ -78,7 +81,7 @@ exports.default = (0, vue_1.defineComponent)({
         const rtlEnabledRef = (0, use_rtl_1.useRtl)('Tag', mergedRtlRef, mergedClsPrefixRef);
         const cssVarsRef = (0, vue_1.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, [(0, _utils_1.createKey)('padding', size)]: padding, [(0, _utils_1.createKey)('colorBordered', type)]: colorBordered, [(0, _utils_1.createKey)('closeSize', size)]: closeSize, [(0, _utils_1.createKey)('closeIconSize', size)]: closeIconSize, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('height', size)]: height, [(0, _utils_1.createKey)('color', type)]: typedColor, [(0, _utils_1.createKey)('textColor', type)]: typeTextColor, [(0, _utils_1.createKey)('border', type)]: border, [(0, _utils_1.createKey)('closeIconColor', type)]: closeIconColor, [(0, _utils_1.createKey)('closeIconColorHover', type)]: closeIconColorHover, [(0, _utils_1.createKey)('closeIconColorPressed', type)]: closeIconColorPressed, [(0, _utils_1.createKey)('closeColorHover', type)]: closeColorHover, [(0, _utils_1.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, [(0, _utils_1.createKey)('padding', size)]: padding, [(0, _utils_1.createKey)('colorBordered', type)]: colorBordered, [(0, _utils_1.createKey)('closeSize', size)]: closeSize, [(0, _utils_1.createKey)('closeIconSize', size)]: closeIconSize, [(0, _utils_1.createKey)('fontSize', size)]: fontSize, [(0, _utils_1.createKey)('height', size)]: height, [(0, _utils_1.createKey)('color', type)]: typedColor, [(0, _utils_1.createKey)('textColor', type)]: typeTextColor, [(0, _utils_1.createKey)('border', type)]: border, [(0, _utils_1.createKey)('closeIconColor', type)]: closeIconColor, [(0, _utils_1.createKey)('closeIconColorHover', type)]: closeIconColorHover, [(0, _utils_1.createKey)('closeIconColorPressed', type)]: closeIconColorPressed, [(0, _utils_1.createKey)('closeColorHover', type)]: closeColorHover, [(0, _utils_1.createKey)('closeColorPressed', type)]: closeColorPressed } } = themeRef.value;
             return {
                 '--u-font-weight-strong': fontWeightStrong,
                 '--u-font-weight': fontWeight,
@@ -99,6 +102,7 @@ exports.default = (0, vue_1.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,
@@ -150,6 +154,7 @@ exports.default = (0, vue_1.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/lib/tag/src/styles/index.cssr.js

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

package/lib/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/lib/tag/styles/light.js

@@ -15,14 +15,14 @@ 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',
@@ -39,7 +39,8 @@ const self = (vars) => {
         textColorHoverCheckable: textPrimary,
         textColorPressedCheckable: textPrimary,
         textColorChecked: textQuaternary,
-        colorCheckable: elementsSecondary,
+        colorCheckable: elementsQuaternary,
+        colorCheckableOutline: elementsSecondary,
         colorHoverCheckable: elementsQuaternary,
         colorPressedCheckable: elementsQuaternary,
         colorChecked: elementsPrimary,

package/lib/version.d.ts

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

package/lib/version.js

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = '1.5.3';
+exports.default = '1.5.5';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uzum-tech/ui",
-  "version": "1.5.3",
+  "version": "1.5.5",
   "description": "A Vue 3 Component Library. Fairly Complete, Theme Customizable, Uses TypeScript, Fast",
   "main": "lib/index.js",
   "module": "es/index.js",

package/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "@uzum-tech/ui",
-  "version": "1.5.3",
+  "version": "1.5.5",
   "js-types-syntax": "typescript",
   "contributions": {
     "html": {
@@ -977,6 +977,11 @@
                 "since": "1.1.0"
               }
             },
+            {
+              "name": "dot-size",
+              "doc-url": "https://www.naiveui.com/en-US/os-theme/components/badge",
+              "type": "string | number"
+            },
             {
               "name": "offset",
               "doc-url": "https://www.naiveui.com/en-US/os-theme/components/badge",
@@ -3627,6 +3632,13 @@
               "description-sections": {
                 "since": "2.34.0"
               }
+            },
+            {
+              "name": "empty-props",
+              "doc-url": "https://www.naiveui.com/en-US/os-theme/components/data-table",
+              "type": "Partial<EmptyProps>",
+              "description": "Props passed to the Empty component when data is empty.",
+              "default": "undefined"
             }
           ],
           "js": {
@@ -3959,6 +3971,11 @@
               "doc-url": "https://www.naiveui.com/en-US/os-theme/components/date-picker",
               "type": "Function"
             },
+            {
+              "name": "max-date",
+              "doc-url": "https://www.naiveui.com/en-US/os-theme/components/date-picker",
+              "type": "number"
+            },
             {
               "name": "is-time-disabled",
               "doc-url": "https://www.naiveui.com/en-US/os-theme/components/date-picker",
@@ -13680,6 +13697,11 @@
               "description": "Whether the tag is checkable. Note: this nullifies the type property.",
               "default": "false"
             },
+            {
+              "name": "outline",
+              "doc-url": "https://www.naiveui.com/en-US/os-theme/components/tag",
+              "type": "boolean"
+            },
             {
               "name": "strong",
               "doc-url": "https://www.naiveui.com/en-US/os-theme/components/tag",