@uzum-tech/ui 1.5.1 → 1.5.3

package/es/version.d.ts

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

package/es/version.js

@@ -1 +1 @@
-export default '1.5.1';
+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/_internal/typography/src/styles/text.cssr.js

@@ -76,7 +76,6 @@ exports.default = (0, cssr_1.cB)('text', `
  `), (0, cssr_1.c)('p&', `
  box-sizing: border-box;
  transition: color .3s var(--u-bezier);
- margin: var(--u-margin);
  font-size: var(--u-font-size);
  line-height: var(--u-line-height);
  color: var(--u-text-color);

package/lib/_internal/typography/styles/light.js

@@ -5,7 +5,7 @@ const styles_1 = require("../../../styles");
 const self = (vars) => {
     const { borderRadiusSmall, brandPrimary500, elementsQuaternary, textPrimary, brandQuaternary500, staticRed, staticOrange, staticGreen, elementsTertiary, fontBodyMedium, lineHeightBodyMedium, codeBorder } = vars;
     return {
-        margin: '16px 0 16px 0',
+        margin: '0px',
         aTextColor: brandPrimary500,
         blockquoteTextColor: textPrimary,
         blockquotePrefixColor: elementsQuaternary,

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;

package/lib/avatar/src/Avatar.d.ts

@@ -28,6 +28,8 @@ export declare const avatarProps: {
     readonly imgProps: PropType<ImgHTMLAttributes>;
     readonly disabled: BooleanConstructor;
     readonly loading: BooleanConstructor;
+    readonly iconColor: StringConstructor;
+    readonly iconSize: PropType<string | number>;
     readonly theme: PropType<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
@@ -98,6 +100,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly imgProps: PropType<ImgHTMLAttributes>;
     readonly disabled: BooleanConstructor;
     readonly loading: BooleanConstructor;
+    readonly iconColor: StringConstructor;
+    readonly iconSize: PropType<string | number>;
     readonly theme: PropType<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;
@@ -191,6 +195,8 @@ declare const _default: import("vue").DefineComponent<{
     readonly imgProps: PropType<ImgHTMLAttributes>;
     readonly disabled: BooleanConstructor;
     readonly loading: BooleanConstructor;
+    readonly iconColor: StringConstructor;
+    readonly iconSize: PropType<string | number>;
     readonly theme: PropType<import("../../_mixins").Theme<"Avatar", {
         borderRadius: string;
         fontSize: string;

package/lib/avatar/src/Avatar.js

@@ -24,7 +24,7 @@ exports.avatarProps = Object.assign(Object.assign({}, _mixins_1.useTheme.props),
     }, bordered: {
         type: Boolean,
         default: undefined
-    }, onError: Function, fallbackSrc: String, intersectionObserverOptions: Object, lazy: Boolean, onLoad: Function, renderPlaceholder: Function, renderFallback: Function, imgProps: Object, disabled: Boolean, loading: Boolean });
+    }, onError: Function, fallbackSrc: String, intersectionObserverOptions: Object, lazy: Boolean, onLoad: Function, renderPlaceholder: Function, renderFallback: Function, imgProps: Object, disabled: Boolean, loading: Boolean, iconColor: String, iconSize: [String, Number] });
 exports.default = (0, vue_1.defineComponent)({
     name: 'Avatar',
     props: exports.avatarProps,
@@ -109,6 +109,12 @@ 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,
@@ -116,10 +122,10 @@ exports.default = (0, vue_1.defineComponent)({
                 '--u-border-radius': round ? '50%' : borderRadius,
                 '--u-color': getBackgroundColor(color),
                 '--u-text-color': textColor,
-                '--u-icon-color': iconColor,
+                '--u-icon-color': props.iconColor || iconColor,
                 '--u-bezier': cubicBezierEaseInOut,
                 '--u-merged-size': `var(--u-avatar-size-override, ${height})`,
-                '--u-icon-size': iconSize
+                '--u-icon-size': resolveSize(props.iconSize, iconSize)
             };
         });
         const themeClassHandle = inlineThemeDisabled

package/lib/card-list/src/CardList.js

@@ -69,7 +69,7 @@ exports.default = (0, vue_1.defineComponent)({
         return (0, vue_1.h)(Grid_1.default, Object.assign({ class: [`${mergedClsPrefix}-card-list`, themeClass], style: cssVars, cols,
             xGap,
             yGap }, gridProps), () => items.map((card, idx) => (0, vue_1.h)(GridItem_1.default, { key: idx, span: card.span || 1 }, () => [
-            (0, vue_1.h)(CardListItem_1.default, Object.assign(Object.assign({ title: card.title, subtitle: card.subtitle, items: card.items, direction: card.direction, dropdown: card.dropdown }, cardProps), { renderDivider: showDivider ? renderDivider : () => null }))
+            (0, vue_1.h)(CardListItem_1.default, Object.assign(Object.assign({ title: card.title, subtitle: card.subtitle, items: card.items, direction: card.direction, embedded: card.embedded, dropdown: card.dropdown }, cardProps), { renderDivider: showDivider ? renderDivider : () => null }))
         ])));
     }
 });

package/lib/card-list/src/CardListItem.d.ts

@@ -13,6 +13,10 @@ declare const cardListItemProps: {
         readonly default: "horizontal";
     };
     readonly dropdown: BooleanConstructor;
+    readonly embedded: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
     readonly renderDivider: PropType<({ index, count, direction }: {
         index: number;
         count: number;
@@ -32,6 +36,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "horizontal";
     };
     readonly dropdown: BooleanConstructor;
+    readonly embedded: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
     readonly renderDivider: PropType<({ index, count, direction }: {
         index: number;
         count: number;
@@ -58,6 +66,10 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "horizontal";
     };
     readonly dropdown: BooleanConstructor;
+    readonly embedded: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
     readonly renderDivider: PropType<({ index, count, direction }: {
         index: number;
         count: number;
@@ -66,5 +78,6 @@ declare const _default: import("vue").DefineComponent<{
 }>>, {
     readonly direction: "vertical" | "horizontal";
     readonly dropdown: boolean;
+    readonly embedded: boolean;
 }, {}>;
 export default _default;

package/lib/card-list/src/CardListItem.js

@@ -17,6 +17,10 @@ const cardListItemProps = {
         default: 'horizontal'
     },
     dropdown: Boolean,
+    embedded: {
+        type: Boolean,
+        default: false
+    },
     renderDivider: Function
 };
 exports.default = (0, vue_1.defineComponent)({
@@ -63,7 +67,10 @@ exports.default = (0, vue_1.defineComponent)({
         const isGrouped = !this.dropdown &&
             (this.direction === 'horizontal' || this.direction === 'vertical');
         const isDropdown = this.dropdown;
-        return ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-list-item`, onClick: isDropdown && items.length ? this.toggle : undefined, ref: "selfRef" },
+        return ((0, vue_1.h)("div", { class: [
+                `${mergedClsPrefix}-card-list-item`,
+                this.embedded && `${mergedClsPrefix}-card-list-item--embedded`
+            ], onClick: isDropdown && items.length ? this.toggle : undefined, ref: "selfRef" },
             isDropdown && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-list-item__wrapper` },
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-list-item__wrapper-content` },
                     this.title && ((0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-list-item__title` }, this.title)),
@@ -79,7 +86,7 @@ exports.default = (0, vue_1.defineComponent)({
             isGrouped && items.length > 0 && ((0, vue_1.h)("div", { class: [
                     `${mergedClsPrefix}-card-list-item__items`,
                     this.direction,
-                    this.direction === 'vertical' &&
+                    this.direction === 'horizontal' &&
                         `${mergedClsPrefix}-card-list-item__items--grid`
                 ] }, items.map((item, idx) => [
                 (0, vue_1.h)("div", { class: `${mergedClsPrefix}-card-list-item__item`, key: idx },
@@ -95,10 +102,10 @@ exports.default = (0, vue_1.defineComponent)({
                         : (0, vue_1.h)('div', {
                             class: [
                                 `${mergedClsPrefix}-card-list-item__divider`,
-                                this.direction === 'vertical'
+                                this.direction === 'horizontal'
                                     ? `${mergedClsPrefix}-card-list-item__divider--vertical`
                                     : `${mergedClsPrefix}-card-list-item__divider--horizontal`,
-                                this.direction === 'vertical' &&
+                                this.direction === 'horizontal' &&
                                     `${mergedClsPrefix}-card-list-item__divider--grid`
                             ]
                         }))

package/lib/card-list/src/interface.d.ts

@@ -4,6 +4,7 @@ export interface ListItemOptions {
     subtitle?: Primitive;
     span?: number;
     dropdown?: boolean;
+    embedded?: boolean;
     items?: Array<{
         title?: Primitive;
         content?: Primitive;

package/lib/card-list/src/styles/index.cssr.js

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 const cssr_1 = require("../../../_utils/cssr");
 exports.default = (0, cssr_1.cB)('card-list-item', [(0, cssr_1.c)('&', {
   padding: '16px',
-  backgroundColor: 'var(--u-color-embedded)',
   borderRadius: 'var(--u-border-radius)',
-  boxShadow: 'var(--u-box-shadow)',
   display: 'flex',
   flexDirection: 'column',
   gap: '8px',
   position: 'relative'
-}), (0, cssr_1.cB)('card-list-item__title', {
+}, [(0, cssr_1.cM)('embedded', {
+  backgroundColor: 'var(--u-color-embedded)'
+})]), (0, cssr_1.cB)('card-list-item__title', {
   fontSize: 'var(--u-title-font-size)',
   lineHeight: 'var(--u-title-line-height)',
   fontWeight: 'var(--u-title-font-weight)',
@@ -27,10 +27,10 @@ exports.default = (0, cssr_1.cB)('card-list-item', [(0, cssr_1.c)('&', {
   display: 'flex',
   gap: '0'
 }, [(0, cssr_1.c)('&.horizontal', {
-  flexDirection: 'column'
-}), (0, cssr_1.c)('&.vertical', {
   flexDirection: 'row',
   alignItems: 'stretch'
+}), (0, cssr_1.c)('&.vertical', {
+  flexDirection: 'column'
 })]), (0, cssr_1.cB)('card-list-item__items--grid', {
   display: 'grid',
   gridAutoFlow: 'column',

package/lib/card-list/styles/light.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.self = void 0;
 const common_1 = require("../../_styles/common");
 const self = (vars) => {
-    const { textSecondary, textPrimary, fontWeight, fontWeightBold, fontBodyLarge, fontBodyMedium, lineHeightBodyMedium, borderRadiusLarge, containerSecondary, shadowDepth2, elementsQuinary, elementsSecondary } = vars;
+    const { textSecondary, textPrimary, fontWeight, fontWeightBold, fontBodyLarge, fontBodyMedium, lineHeightBodyMedium, borderRadiusLarge, containerSecondary, shadowDepth2, elementsQuaternary, elementsSecondary } = vars;
     return {
         textColor: textSecondary,
         textLineHeight: lineHeightBodyMedium,
@@ -17,7 +17,7 @@ const self = (vars) => {
         borderRadius: borderRadiusLarge,
         boxShadow: shadowDepth2,
         colorEmbedded: containerSecondary,
-        dividerColor: elementsQuinary,
+        dividerColor: elementsQuaternary,
         dropDownBgColor: elementsSecondary
     };
 };