@uzum-tech/ui 1.5.2 → 1.5.3

package/es/select/src/Select.js

@@ -223,7 +223,7 @@ export default defineComponent({
         const { mergedDisabledRef, mergedStatusRef } = formItem;
         function doUpdateValue(value, option) {
             const { onChange, 'onUpdate:value': _onUpdateValue, onUpdateValue } = props;
-            const { nTriggerFormChange, nTriggerFormInput } = formItem;
+            const { triggerFormChange, triggerFormInput } = formItem;
             if (onChange)
                 call(onChange, value, option);
             if (onUpdateValue)
@@ -232,15 +232,15 @@ export default defineComponent({
                 call(_onUpdateValue, value, option);
             }
             uncontrolledValueRef.value = value;
-            nTriggerFormChange();
-            nTriggerFormInput();
+            triggerFormChange();
+            triggerFormInput();
         }
         function doBlur(e) {
             const { onBlur } = props;
-            const { nTriggerFormBlur } = formItem;
+            const { triggerFormBlur } = formItem;
             if (onBlur)
                 call(onBlur, e);
-            nTriggerFormBlur();
+            triggerFormBlur();
         }
         function doClear() {
             const { onClear } = props;
@@ -249,10 +249,10 @@ export default defineComponent({
         }
         function doFocus(e) {
             const { onFocus, showOnFocus } = props;
-            const { nTriggerFormFocus } = formItem;
+            const { triggerFormFocus } = formItem;
             if (onFocus)
                 call(onFocus, e);
-            nTriggerFormFocus();
+            triggerFormFocus();
             if (showOnFocus) {
                 openMenu();
             }

package/es/slider/src/Slider.js

@@ -169,14 +169,14 @@ export default defineComponent({
         }
         function doUpdateValue(value) {
             const { 'onUpdate:value': _onUpdateValue, onUpdateValue } = props;
-            const { nTriggerFormInput, nTriggerFormChange } = formItem;
+            const { triggerFormInput, triggerFormChange } = formItem;
             if (onUpdateValue)
                 call(onUpdateValue, value);
             if (_onUpdateValue)
                 call(_onUpdateValue, value);
             uncontrolledValueRef.value = value;
-            nTriggerFormInput();
-            nTriggerFormChange();
+            triggerFormInput();
+            triggerFormChange();
         }
         function dispatchValueUpdate(value) {
             const { range } = props;

package/es/styles.d.ts

@@ -34,6 +34,7 @@ export { gradientTextDark } from './gradient-text/styles';
 export { iconDark } from './icon/styles';
 export { inputDark, inputRtl as unstableInputRtl } from './input/styles';
 export { inputNumberDark, inputNumberRtl as unstableInputNumberRtl } from './input-number/styles';
+export { inputOtpDark, inputOtpRtl as unstableInputOtpRtl } from './input-otp/styles';
 export { layoutDark } from './layout/styles';
 export { listDark, listRtl as unstableListRtl } from './list/styles';
 export { loadingBarDark } from './loading-bar/styles';

package/es/styles.js

@@ -34,6 +34,7 @@ export { gradientTextDark } from './gradient-text/styles';
 export { iconDark } from './icon/styles';
 export { inputDark, inputRtl as unstableInputRtl } from './input/styles';
 export { inputNumberDark, inputNumberRtl as unstableInputNumberRtl } from './input-number/styles';
+export { inputOtpDark, inputOtpRtl as unstableInputOtpRtl } from './input-otp/styles';
 export { layoutDark } from './layout/styles';
 export { listDark, listRtl as unstableListRtl } from './list/styles';
 export { loadingBarDark } from './loading-bar/styles';

package/es/switch/src/Switch.js

@@ -80,7 +80,7 @@ export default defineComponent({
         });
         function doUpdateValue(value) {
             const { 'onUpdate:value': _onUpdateValue, onChange, onUpdateValue } = props;
-            const { nTriggerFormInput, nTriggerFormChange } = formItem;
+            const { triggerFormInput, triggerFormChange } = formItem;
             if (_onUpdateValue)
                 call(_onUpdateValue, value);
             if (onUpdateValue)
@@ -88,16 +88,16 @@ export default defineComponent({
             if (onChange)
                 call(onChange, value);
             uncontrolledValueRef.value = value;
-            nTriggerFormInput();
-            nTriggerFormChange();
+            triggerFormInput();
+            triggerFormChange();
         }
         function doFocus() {
-            const { nTriggerFormFocus } = formItem;
-            nTriggerFormFocus();
+            const { triggerFormFocus } = formItem;
+            triggerFormFocus();
         }
         function doBlur() {
-            const { nTriggerFormBlur } = formItem;
-            nTriggerFormBlur();
+            const { triggerFormBlur } = formItem;
+            triggerFormBlur();
         }
         function handleClick() {
             if (props.loading || mergedDisabledRef.value)

package/es/theme-editor/src/ThemeEditor.d.ts

@@ -17,6 +17,9 @@ declare const _default: import("vue").DefineComponent<{}, {
         scrollbarHeight: string;
         scrollbarBorderRadius: string;
         opacityDisabled: string;
+        brand150: string;
+        brand350: string;
+        brand550: string;
         brandPrimary50: string;
         brandPrimary100: string;
         brandPrimary200: string;

package/es/themes/dark.js

@@ -86,6 +86,7 @@ import { toggleButtonDark } from '../toggle-button/styles';
 import { accountOptionDark } from '../_internal/account-option/styles';
 import { flexDark } from '../flex/styles';
 import { actionCardDark } from '../action-card/styles';
+import { inputOtpDark } from '../styles';
 export const darkTheme = {
     name: 'dark',
     common: commonDark,
@@ -130,6 +131,7 @@ export const darkTheme = {
     IconWrapper: iconWrapperDark,
     Image: imageDark,
     Input: inputDark,
+    InputOtp: inputOtpDark,
     InputNumber: inputNumberDark,
     LegacyTransfer: legacyTransferDark,
     Layout: layoutDark,

package/es/themes/light.js

@@ -88,6 +88,7 @@ import { toggleButtonLight } from '../toggle-button/styles';
 import { accountOptionLight } from '../_internal/account-option/styles';
 import { flexLight } from '../flex/styles';
 import { actionCardLight } from '../action-card/styles';
+import { inputOtpLight } from '../input-otp/styles';
 export const lightTheme = {
     name: 'light',
     common: commonLight,
@@ -132,6 +133,7 @@ export const lightTheme = {
     IconWrapper: iconWrapperLight,
     Image: imageLight,
     Input: inputLight,
+    InputOtp: inputOtpLight,
     InputNumber: inputNumberLight,
     Layout: layoutLight,
     LegacyTransfer: legacyTransferLight,

package/es/time-picker/src/TimePicker.js

@@ -247,7 +247,7 @@ export default defineComponent({
         }
         function doUpdateValue(value) {
             const { onUpdateValue, 'onUpdate:value': _onUpdateValue, onChange } = props;
-            const { nTriggerFormChange, nTriggerFormInput } = formItem;
+            const { triggerFormChange, triggerFormInput } = formItem;
             const formattedValue = createFormattedValue(value);
             if (onUpdateValue) {
                 call(onUpdateValue, value, formattedValue);
@@ -259,22 +259,22 @@ export default defineComponent({
                 call(onChange, value, formattedValue);
             doUpdateFormattedValue(formattedValue, value);
             uncontrolledValueRef.value = value;
-            nTriggerFormChange();
-            nTriggerFormInput();
+            triggerFormChange();
+            triggerFormInput();
         }
         function doFocus(e) {
             const { onFocus } = props;
-            const { nTriggerFormFocus } = formItem;
+            const { triggerFormFocus } = formItem;
             if (onFocus)
                 call(onFocus, e);
-            nTriggerFormFocus();
+            triggerFormFocus();
         }
         function doBlur(e) {
             const { onBlur } = props;
-            const { nTriggerFormBlur } = formItem;
+            const { triggerFormBlur } = formItem;
             if (onBlur)
                 call(onBlur, e);
-            nTriggerFormBlur();
+            triggerFormBlur();
         }
         function doConfirm() {
             const { onConfirm } = props;

package/es/transfer/src/Transfer.js

@@ -63,7 +63,7 @@ export default defineComponent({
         const { uncontrolledValueRef, mergedValueRef, targetValueSetRef, valueSetForCheckAllRef, valueSetForUncheckAllRef, valueSetForClearRef, filteredTgtOptionsRef, filteredSrcOptionsRef, targetOptionsRef, canNotSelectAnythingRef, canBeClearedRef, allCheckedRef, srcPatternRef, tgtPatternRef, mergedSrcFilterableRef, handleSrcFilterUpdateValue, handleTgtFilterUpdateValue } = useTransferData(props);
         function doUpdateValue(value) {
             const { onUpdateValue, 'onUpdate:value': _onUpdateValue, onChange } = props;
-            const { nTriggerFormInput, nTriggerFormChange } = formItem;
+            const { triggerFormInput, triggerFormChange } = formItem;
             if (onUpdateValue)
                 call(onUpdateValue, value);
             if (_onUpdateValue)
@@ -71,8 +71,8 @@ export default defineComponent({
             if (onChange)
                 call(onChange, value);
             uncontrolledValueRef.value = value;
-            nTriggerFormInput();
-            nTriggerFormChange();
+            triggerFormInput();
+            triggerFormChange();
         }
         function handleSourceCheckAll() {
             doUpdateValue([...valueSetForCheckAllRef.value]);

package/es/tree-select/src/TreeSelect.js

@@ -70,7 +70,7 @@ export default defineComponent({
         const menuElRef = ref(null);
         const { mergedClsPrefixRef, namespaceRef, inlineThemeDisabled } = useConfig(props);
         const { localeRef } = useLocale('Select');
-        const { mergedSizeRef, mergedDisabledRef, mergedStatusRef, nTriggerFormBlur, nTriggerFormChange, nTriggerFormFocus, nTriggerFormInput } = useFormItem(props);
+        const { mergedSizeRef, mergedDisabledRef, mergedStatusRef, triggerFormBlur, triggerFormChange, triggerFormFocus, triggerFormInput } = useFormItem(props);
         const uncontrolledValueRef = ref(props.defaultValue);
         const controlledValueRef = toRef(props, 'value');
         const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
@@ -207,8 +207,8 @@ export default defineComponent({
                 call(_onUpdateValue, value, option, meta);
             }
             uncontrolledValueRef.value = value;
-            nTriggerFormInput();
-            nTriggerFormChange();
+            triggerFormInput();
+            triggerFormChange();
         }
         function doUpdateIndeterminateKeys(value, option) {
             const { onUpdateIndeterminateKeys, 'onUpdate:indeterminateKeys': _onUpdateIndeterminateKeys } = props;
@@ -233,14 +233,14 @@ export default defineComponent({
             const { onFocus } = props;
             if (onFocus)
                 onFocus(e);
-            nTriggerFormFocus();
+            triggerFormFocus();
         }
         function doBlur(e) {
             closeMenu();
             const { onBlur } = props;
             if (onBlur)
                 onBlur(e);
-            nTriggerFormBlur();
+            triggerFormBlur();
         }
         function closeMenu() {
             doUpdateShow(false);

package/es/version.d.ts

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

package/es/version.js

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

package/lib/_internal/checkbox/src/use-checkbox.js

@@ -103,7 +103,7 @@ const useCheckbox = (props) => {
         }
         else {
             const { onChange, 'onUpdate:checked': _onUpdateCheck, onUpdateChecked } = props;
-            const { nTriggerFormInput, nTriggerFormChange } = formItem;
+            const { triggerFormInput, triggerFormChange } = formItem;
             const nextChecked = renderedCheckedRef.value
                 ? props.uncheckedValue
                 : props.checkedValue;
@@ -115,8 +115,8 @@ const useCheckbox = (props) => {
             }
             if (onChange)
                 (0, _utils_1.call)(onChange, nextChecked, e); // deprecated
-            nTriggerFormInput();
-            nTriggerFormChange();
+            triggerFormInput();
+            triggerFormChange();
             uncontrolledCheckedRef.value = nextChecked;
         }
     }

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

@@ -88,15 +88,15 @@ function useRadio(props) {
         }
         else {
             const { onUpdateChecked, 'onUpdate:checked': _onUpdateChecked, onChange } = props;
-            const { nTriggerFormInput, nTriggerFormChange } = formItem;
+            const { triggerFormInput, triggerFormChange } = formItem;
             if (onUpdateChecked)
                 (0, _utils_1.call)(onUpdateChecked, true);
             if (_onUpdateChecked)
                 (0, _utils_1.call)(_onUpdateChecked, true);
             if (onChange)
                 onChange(e);
-            nTriggerFormInput();
-            nTriggerFormChange();
+            triggerFormInput();
+            triggerFormChange();
             uncontrolledCheckedRef.value = true;
         }
     }

package/lib/_mixins/use-form-item.d.ts

@@ -28,10 +28,10 @@ export interface UseFormItem<T> {
     mergedSizeRef: ComputedRef<T>;
     mergedDisabledRef: ComputedRef<boolean>;
     mergedStatusRef: ComputedRef<FormValidationStatus | undefined>;
-    nTriggerFormBlur: () => void;
-    nTriggerFormChange: () => void;
-    nTriggerFormFocus: () => void;
-    nTriggerFormInput: () => void;
+    triggerFormBlur: () => void;
+    triggerFormChange: () => void;
+    triggerFormFocus: () => void;
+    triggerFormInput: () => void;
 }
 export default function useFormItem<T extends AllowedSize = FormItemSize>(props: UseFormItemProps<T>, { defaultSize, mergedSize, mergedDisabled }?: UseFormItemOptions<T>): UseFormItem<T>;
 export {};

package/lib/_mixins/use-form-item.js

@@ -49,22 +49,22 @@ function useFormItem(props, { defaultSize = 'medium', mergedSize, mergedDisabled
         mergedSizeRef,
         mergedDisabledRef,
         mergedStatusRef,
-        nTriggerFormBlur() {
+        triggerFormBlur() {
             if (UFormItem) {
                 UFormItem.handleContentBlur();
             }
         },
-        nTriggerFormChange() {
+        triggerFormChange() {
             if (UFormItem) {
                 UFormItem.handleContentChange();
             }
         },
-        nTriggerFormFocus() {
+        triggerFormFocus() {
             if (UFormItem) {
                 UFormItem.handleContentFocus();
             }
         },
-        nTriggerFormInput() {
+        triggerFormInput() {
             if (UFormItem) {
                 UFormItem.handleContentInput();
             }

package/lib/_styles/common/dark.js

@@ -4,6 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const _common_1 = __importDefault(require("./_common"));
-const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.default), { scrollbarColor: 'rgba(255, 255, 255, 0.25)', scrollbarColorHover: 'rgba(255, 255, 255, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brandPrimary50: '#2B204E', brandPrimary100: '#412A89', brandPrimary200: '#6A40ED', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#8967F1', brandPrimary550: '#6607DF', brandPrimary600: '#5D46A6', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#101010', surfaceSecondary: '#1D1D1D', containerPrimary: '#1D1D1D', containerSecondary: '#313135', textPrimary: '#F3F4F6', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#101010', textBrand: '#F3F4F6', elementsPrimary: '#F3F4F6', elementsSecondary: '#101010', elementsTertiary: '#222222', elementsQuaternary: '#424247', elementsQuinary: '#707479', elementsDarkQuinary: '#919396', elementsSenary: '#DFDFDF', elementsOnContainer: '#101010', transparencyPrimary: 'rgba(255, 255, 255, 0.1)', transparencySecondary: 'rgba(255, 255, 255, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.75)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticDeepBlue: '#2F53CD', staticErrorAccent: '#CB0000', shadowDepth2: '0 0 0 1px #424247', shadowDepth: '0px 8px 8px 0px rgba(255, 255, 255, 0.25)' // В дизайне тень вообще отсутствует, пока что пусть побудет визуально как border
+const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.default), { scrollbarColor: 'rgba(255, 255, 255, 0.25)', scrollbarColorHover: 'rgba(255, 255, 255, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brand150: '#FFF3D3', brand350: '#F1F9DF', brand550: '#FFF3F4', brandPrimary50: '#2B204E', brandPrimary100: '#412A89', brandPrimary200: '#6A40ED', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#8967F1', brandPrimary550: '#6607DF', brandPrimary600: '#5D46A6', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#101010', surfaceSecondary: '#1D1D1D', containerPrimary: '#1D1D1D', containerSecondary: '#313135', textPrimary: '#F3F4F6', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#101010', textBrand: '#F3F4F6', elementsPrimary: '#F3F4F6', elementsSecondary: '#101010', elementsTertiary: '#222222', elementsQuaternary: '#424247', elementsQuinary: '#707479', elementsDarkQuinary: '#919396', elementsSenary: '#DFDFDF', elementsOnContainer: '#101010', transparencyPrimary: 'rgba(255, 255, 255, 0.1)', transparencySecondary: 'rgba(255, 255, 255, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.75)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticDeepBlue: '#2F53CD', staticErrorAccent: '#CB0000', shadowDepth2: '0 0 0 1px #424247', shadowDepth: '0px 8px 8px 0px rgba(255, 255, 255, 0.25)' // В дизайне тень вообще отсутствует, пока что пусть побудет визуально как border
  });
 exports.default = derived;

package/lib/_styles/common/light.d.ts

@@ -5,6 +5,9 @@ declare const derived: {
     scrollbarHeight: string;
     scrollbarBorderRadius: string;
     opacityDisabled: string;
+    brand150: string;
+    brand350: string;
+    brand550: string;
     brandPrimary50: string;
     brandPrimary100: string;
     brandPrimary200: string;

package/lib/_styles/common/light.js

@@ -4,5 +4,5 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const _common_1 = __importDefault(require("./_common"));
-const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.default), { scrollbarColor: 'rgba(0, 0, 0, 0.25)', scrollbarColorHover: 'rgba(0, 0, 0, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brandPrimary50: '#F8F2FF', brandPrimary100: '#EAE2FF', brandPrimary200: '#DACCFF', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#7000FF', brandPrimary550: '#6607DF', brandPrimary600: '#5B34C1', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#fff', surfaceSecondary: '#1d1d1d', containerPrimary: '#fff', containerSecondary: '#F3F4F6', textPrimary: '#101010', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#FFFFFF', textBrand: '#7000FF', elementsPrimary: '#101010', elementsSecondary: '#fff', elementsTertiary: '#F3F4F6', elementsQuaternary: '#E7E8EA', elementsQuinary: '#C5C7CA', elementsDarkQuinary: '#919396', elementsSenary: '#4E4D4D', elementsOnContainer: '#fff', transparencyPrimary: 'rgba(0, 0, 0, 0.35)', transparencySecondary: 'rgba(0, 0, 0, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.40)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticDeepBlue: '#2F53CD', staticErrorAccent: '#CB0000', shadowDepth2: '0px 20px 80px 0px rgba(0, 0, 0, 0.07)', shadowDepth: '0px 8px 8px 0px rgba(0, 0, 0, 0.25)' });
+const derived = Object.assign(Object.assign({ name: 'common' }, _common_1.default), { scrollbarColor: 'rgba(0, 0, 0, 0.25)', scrollbarColorHover: 'rgba(0, 0, 0, 0.4)', scrollbarWidth: '5px', scrollbarHeight: '5px', scrollbarBorderRadius: '5px', opacityDisabled: '0.5', brand150: '#FFF3D3', brand350: '#F1F9DF', brand550: '#FFF3F4', brandPrimary50: '#F8F2FF', brandPrimary100: '#EAE2FF', brandPrimary200: '#DACCFF', brandPrimary300: '#BBA2FD', brandPrimary400: '#7748F1', brandPrimary500: '#7000FF', brandPrimary550: '#6607DF', brandPrimary600: '#5B34C1', brandSecondary500: '#FFFF54', brandSecondary300: '#FDF5A6', brandSecondary600: '#F9DE6D', brandTertiary500: '#C4ED70', brandTertiary300: '#DCF0AF', brandTertiary600: '#9DED70', brandQuaternary500: '#90DDFB', brandQuaternary300: '#C5ECFD', brandQuaternary600: '#54B8F9', brandQuinary500: '#EC616A', brandQuinary300: '#F19EDA', brandQuinary600: '#EA3E68', brandQuinary100: '#FAD6D9', surfacePrimary: '#fff', surfaceSecondary: '#1d1d1d', containerPrimary: '#fff', containerSecondary: '#F3F4F6', textPrimary: '#101010', textSecondary: '#808080', textTertiary: '#999999', textQuaternary: '#FFFFFF', textBrand: '#7000FF', elementsPrimary: '#101010', elementsSecondary: '#fff', elementsTertiary: '#F3F4F6', elementsQuaternary: '#E7E8EA', elementsQuinary: '#C5C7CA', elementsDarkQuinary: '#919396', elementsSenary: '#4E4D4D', elementsOnContainer: '#fff', transparencyPrimary: 'rgba(0, 0, 0, 0.35)', transparencySecondary: 'rgba(0, 0, 0, 0.07)', transparencyTertiary: 'rgba(255, 255, 255, 0.16)', transparencyQuinary: 'rgba(255, 255, 255, 0.32)', transparencyModal: 'rgba(0, 0, 0, 0.40)', staticBlack: '#101010', staticDarkGrey: '#2C2C2D', staticWhite: '#FFFFFF', staticRed: '#F24835', staticOrange: '#F48C2C', staticGreen: '#09B849', staticDeepBlue: '#2F53CD', staticErrorAccent: '#CB0000', shadowDepth2: '0px 20px 80px 0px rgba(0, 0, 0, 0.07)', shadowDepth: '0px 8px 8px 0px rgba(0, 0, 0, 0.25)' });
 exports.default = derived;

package/lib/_utils/composable/composables.d.ts

@@ -0,0 +1,11 @@
+import { Ref } from 'vue';
+export declare function useIsMobile(): import("vue").ComputedRef<boolean>;
+export declare function useIsTablet(): import("vue").ComputedRef<boolean>;
+export declare function useIsSmallDesktop(): import("vue").ComputedRef<boolean>;
+export declare const i18n: {
+    (data: Record<string, Record<string, string>>): {
+        locale: Ref<string>;
+        t(key: string): string;
+    };
+    provide(localeRef: Ref): void;
+};

package/lib/_utils/composable/composables.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.i18n = void 0;
+exports.useIsMobile = useIsMobile;
+exports.useIsTablet = useIsTablet;
+exports.useIsSmallDesktop = useIsSmallDesktop;
+const vooks_1 = require("vooks");
+const vue_1 = require("vue");
+function useIsMobile() {
+    const breakpointRef = (0, vooks_1.useBreakpoint)();
+    return (0, vooks_1.useMemo)(() => {
+        return breakpointRef.value === 'xs';
+    });
+}
+function useIsTablet() {
+    const breakpointRef = (0, vooks_1.useBreakpoint)();
+    return (0, vooks_1.useMemo)(() => {
+        return breakpointRef.value === 's';
+    });
+}
+function useIsSmallDesktop() {
+    const breakpointRef = (0, vooks_1.useBreakpoint)();
+    return (0, vooks_1.useMemo)(() => {
+        return breakpointRef.value === 'm';
+    });
+}
+const i18n = function (data) {
+    const localeReactive = (0, vue_1.inject)('i18n', null);
+    if (!localeReactive) {
+        throw new Error('i18n context not provided');
+    }
+    return {
+        locale: (0, vue_1.toRef)(localeReactive, 'locale'),
+        t(key) {
+            const { locale } = localeReactive;
+            return data[locale][key];
+        }
+    };
+};
+exports.i18n = i18n;
+exports.i18n.provide = function (localeRef) {
+    const localeReactive = (0, vue_1.reactive)({ locale: '' });
+    (0, vue_1.watchEffect)(() => {
+        localeReactive.locale = localeRef.value;
+    });
+    (0, vue_1.provide)('i18n', localeReactive);
+};

package/lib/_utils/index.d.ts

@@ -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 type { MaybeArray } from './vue';
-export { warn, warnOnce, throwError, smallerSize, largerSize, getTitleAttribute } from './uzum';
+export { warn, warnOnce, throwError, smallerSize, largerSize, getTitleAttribute, isArrayShallowEqual } from './uzum';
 export type { ExtractPublicPropTypes, ExtractInternalPropTypes, Mutable } from './uzum';
 export { formatLength, color2Class } from './css';
 export { createKey } from './cssr';

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.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.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; } });
@@ -43,6 +43,7 @@ Object.defineProperty(exports, "throwError", { enumerable: true, get: function (
 Object.defineProperty(exports, "smallerSize", { enumerable: true, get: function () { return uzum_1.smallerSize; } });
 Object.defineProperty(exports, "largerSize", { enumerable: true, get: function () { return uzum_1.largerSize; } });
 Object.defineProperty(exports, "getTitleAttribute", { enumerable: true, get: function () { return uzum_1.getTitleAttribute; } });
+Object.defineProperty(exports, "isArrayShallowEqual", { enumerable: true, get: function () { return uzum_1.isArrayShallowEqual; } });
 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; } });

package/lib/_utils/uzum/index.d.ts

@@ -3,3 +3,4 @@ export { smallerSize, largerSize } from './prop';
 export { getTitleAttribute } from './attribute';
 export type { ExtractPublicPropTypes, ExtractInternalPropTypes } from './extract-public-props';
 export type { Mutable } from './mutable';
+export { isArrayShallowEqual } from './value';

package/lib/_utils/uzum/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTitleAttribute = exports.largerSize = exports.smallerSize = exports.throwError = exports.warnOnce = exports.warn = void 0;
+exports.isArrayShallowEqual = exports.getTitleAttribute = exports.largerSize = exports.smallerSize = exports.throwError = exports.warnOnce = exports.warn = void 0;
 var warn_1 = require("./warn");
 Object.defineProperty(exports, "warn", { enumerable: true, get: function () { return warn_1.warn; } });
 Object.defineProperty(exports, "warnOnce", { enumerable: true, get: function () { return warn_1.warnOnce; } });
@@ -10,3 +10,5 @@ Object.defineProperty(exports, "smallerSize", { enumerable: true, get: function
 Object.defineProperty(exports, "largerSize", { enumerable: true, get: function () { return prop_1.largerSize; } });
 var attribute_1 = require("./attribute");
 Object.defineProperty(exports, "getTitleAttribute", { enumerable: true, get: function () { return attribute_1.getTitleAttribute; } });
+var value_1 = require("./value");
+Object.defineProperty(exports, "isArrayShallowEqual", { enumerable: true, get: function () { return value_1.isArrayShallowEqual; } });

package/lib/_utils/uzum/value.d.ts

@@ -0,0 +1 @@
+export declare function isArrayShallowEqual<T extends readonly unknown[]>(left: T | null, right: T | null): boolean;

package/lib/_utils/uzum/value.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isArrayShallowEqual = isArrayShallowEqual;
+function isArrayShallowEqual(left, right) {
+    if (left === right)
+        return true;
+    if (left === null || right === null)
+        return false;
+    if (left.length !== right.length)
+        return false;
+    return left.every((item, index) => item === right[index]);
+}

package/lib/_utils/vue/resolve-slot.d.ts

@@ -3,7 +3,7 @@ import { type Slot, type VNodeArrayChildren, type VNodeChild } from 'vue';
  * We shouldn't use the following functions with slot flags `_: 1, 2, 3`
  */
 export declare function resolveSlot(slot: Slot | undefined, fallback: () => VNodeArrayChildren): VNodeArrayChildren;
-export declare function resolveSlotWithProps<T>(slot: Slot | undefined, props: T, fallback: (props: T) => VNodeArrayChildren): VNodeArrayChildren;
+export declare function resolveSlotWithProps<T>(slot: Slot<T> | undefined, props: T, fallback: (props: T) => VNodeArrayChildren): VNodeArrayChildren;
 /**
  * Resolve slot with wrapper if content exists, no fallback
  */

package/lib/alert/styles/light.js

@@ -7,20 +7,20 @@ exports.alertSelf = exports.self = void 0;
 const common_1 = require("../../_styles/common");
 const _common_1 = __importDefault(require("./_common"));
 const self = (vars) => {
-    const { iconMedium, closeMedium, fontTitleSmall, lineHeightTitleSmall, fontWeightStrong, fontWeightBold, fontBodyLarge, lineHeightBodyLarge, fontWeight, borderRadiusLarge, staticBlack, staticWhite, transparencyTertiary, transparencyQuinary, transparencySecondary, transparencyPrimary, elementsTertiary, textPrimary, staticGreen, brandSecondary600, staticRed, brandPrimary500 } = vars;
-    return Object.assign(Object.assign({}, _common_1.default), { iconSize: iconMedium, closeIconSize: iconMedium, closeSize: closeMedium, titleFontSizeAlert: fontTitleSmall, titleLineHeightAlert: lineHeightTitleSmall, titleFontWeightAlert: fontWeightStrong, descriptionFontSizeAlert: fontBodyLarge, descriptionLineHeightAlert: lineHeightBodyLarge, descriptionFontWeightAlert: fontWeight, titleFontSizeBanner: fontBodyLarge, titleLineHeightBanner: lineHeightBodyLarge, titleFontWeightBanner: fontWeightBold, descriptionFontSizeBanner: fontBodyLarge, descriptionLineHeightBanner: lineHeightBodyLarge, descriptionFontWeightBanner: fontWeight, borderRadius: borderRadiusLarge, 
+    const { iconMedium, closeMedium, fontTitleSmall, lineHeightTitleSmall, fontWeightStrong, fontWeightBold, fontBodyLarge, lineHeightBodyLarge, fontWeight, borderRadius, staticBlack, staticWhite, transparencyTertiary, transparencyQuinary, transparencySecondary, transparencyPrimary, elementsTertiary, textPrimary, brand150, brand350, brand550, brandPrimary50, staticRed } = vars;
+    return Object.assign(Object.assign({}, _common_1.default), { iconSize: iconMedium, closeIconSize: '18px', closeSize: closeMedium, titleFontSizeAlert: fontTitleSmall, titleLineHeightAlert: lineHeightTitleSmall, titleFontWeightAlert: fontWeightStrong, descriptionFontSizeAlert: fontBodyLarge, descriptionLineHeightAlert: lineHeightBodyLarge, descriptionFontWeightAlert: fontWeight, titleFontSizeBanner: fontBodyLarge, titleLineHeightBanner: lineHeightBodyLarge, titleFontWeightBanner: fontWeightBold, descriptionFontSizeBanner: fontBodyLarge, descriptionLineHeightBanner: lineHeightBodyLarge, descriptionFontWeightBanner: fontWeight, borderRadius, 
         // Default
         color: staticBlack, titleTextColor: staticWhite, iconColor: staticWhite, contentTextColor: staticWhite, closeColorHover: transparencyTertiary, closeColorPressed: transparencyQuinary, closeIconColor: staticWhite, closeIconColorHover: staticWhite, closeIconColorPressed: staticWhite, 
         // Info
         colorInfo: elementsTertiary, titleTextColorInfo: textPrimary, iconColorInfo: textPrimary, contentTextColorInfo: textPrimary, closeColorHoverInfo: transparencySecondary, closeColorPressedInfo: transparencyPrimary, closeIconColorInfo: textPrimary, closeIconColorHoverInfo: textPrimary, closeIconColorPressedInfo: textPrimary, 
         // Success
-        colorSuccess: staticGreen, titleTextColorSuccess: staticWhite, iconColorSuccess: staticWhite, contentTextColorSuccess: staticWhite, closeColorHoverSuccess: transparencyTertiary, closeColorPressedSuccess: transparencyQuinary, closeIconColorSuccess: staticWhite, closeIconColorHoverSuccess: staticWhite, closeIconColorPressedSuccess: staticWhite, 
+        colorSuccess: brand350, titleTextColorSuccess: staticBlack, iconColorSuccess: staticBlack, contentTextColorSuccess: staticBlack, closeColorHoverSuccess: transparencyTertiary, closeColorPressedSuccess: transparencyQuinary, closeIconColorSuccess: staticBlack, closeIconColorHoverSuccess: staticBlack, closeIconColorPressedSuccess: staticBlack, 
         // Warning
-        colorWarning: brandSecondary600, titleTextColorWarning: staticBlack, iconColorWarning: staticBlack, contentTextColorWarning: staticBlack, closeColorHoverWarning: transparencyTertiary, closeColorPressedWarning: transparencyQuinary, closeIconColorWarning: staticBlack, closeIconColorHoverWarning: staticBlack, closeIconColorPressedWarning: staticBlack, 
+        colorWarning: brand150, titleTextColorWarning: staticBlack, iconColorWarning: staticBlack, contentTextColorWarning: staticBlack, closeColorHoverWarning: transparencyTertiary, closeColorPressedWarning: transparencyQuinary, closeIconColorWarning: staticBlack, closeIconColorHoverWarning: staticBlack, closeIconColorPressedWarning: staticBlack, 
         // Error
-        colorError: staticRed, titleTextColorError: staticWhite, iconColorError: staticWhite, contentTextColorError: staticWhite, closeColorHoverError: transparencyTertiary, closeColorPressedError: transparencyQuinary, closeIconColorError: staticWhite, closeIconColorHoverError: staticWhite, closeIconColorPressedError: staticWhite, 
+        colorError: brand550, titleTextColorError: staticBlack, iconColorError: staticRed, contentTextColorError: staticBlack, closeColorHoverError: transparencyTertiary, closeColorPressedError: transparencyQuinary, closeIconColorError: staticBlack, closeIconColorHoverError: staticBlack, closeIconColorPressedError: staticBlack, 
         // Primary
-        colorPrimary: brandPrimary500, titleTextColorPrimary: staticWhite, iconColorPrimary: staticWhite, contentTextColorPrimary: staticWhite, closeColorHoverPrimary: transparencyTertiary, closeColorPressedPrimary: transparencyQuinary, closeIconColorPrimary: staticWhite, closeIconColorHoverPrimary: staticWhite, closeIconColorPressedPrimary: staticWhite });
+        colorPrimary: brandPrimary50, titleTextColorPrimary: staticBlack, iconColorPrimary: staticBlack, contentTextColorPrimary: staticBlack, closeColorHoverPrimary: transparencyTertiary, closeColorPressedPrimary: transparencyQuinary, closeIconColorPrimary: staticBlack, closeIconColorHoverPrimary: staticBlack, closeIconColorPressedPrimary: staticBlack });
 };
 exports.self = self;
 exports.alertSelf = exports.self;

package/lib/auto-complete/src/AutoComplete.js

@@ -85,7 +85,7 @@ exports.default = (0, vue_1.defineComponent)({
         const treeMateRef = (0, vue_1.computed)(() => (0, treemate_1.createTreeMate)(selectOptionsRef.value, (0, utils_1.createTmOptions)('value', 'children')));
         function doUpdateValue(value) {
             const { 'onUpdate:value': _onUpdateValue, onUpdateValue, onInput } = props;
-            const { nTriggerFormInput, nTriggerFormChange } = formItem;
+            const { triggerFormInput, triggerFormChange } = formItem;
             if (onUpdateValue)
                 (0, _utils_1.call)(onUpdateValue, value);
             if (_onUpdateValue)
@@ -93,30 +93,30 @@ exports.default = (0, vue_1.defineComponent)({
             if (onInput)
                 (0, _utils_1.call)(onInput, value);
             uncontrolledValueRef.value = value;
-            nTriggerFormInput();
-            nTriggerFormChange();
+            triggerFormInput();
+            triggerFormChange();
         }
         function doSelect(value) {
             const { onSelect } = props;
-            const { nTriggerFormInput, nTriggerFormChange } = formItem;
+            const { triggerFormInput, triggerFormChange } = formItem;
             if (onSelect)
                 (0, _utils_1.call)(onSelect, value);
-            nTriggerFormInput();
-            nTriggerFormChange();
+            triggerFormInput();
+            triggerFormChange();
         }
         function doBlur(e) {
             const { onBlur } = props;
-            const { nTriggerFormBlur } = formItem;
+            const { triggerFormBlur } = formItem;
             if (onBlur)
                 (0, _utils_1.call)(onBlur, e);
-            nTriggerFormBlur();
+            triggerFormBlur();
         }
         function doFocus(e) {
             const { onFocus } = props;
-            const { nTriggerFormFocus } = formItem;
+            const { triggerFormFocus } = formItem;
             if (onFocus)
                 (0, _utils_1.call)(onFocus, e);
-            nTriggerFormFocus();
+            triggerFormFocus();
         }
         function doScroll(e) {
             const { onScroll } = props;