@uzum-tech/ui 1.8.1 → 1.9.0

package/es/_internal/scrollbar/src/styles/index.cssr.js

@@ -1,5 +1,5 @@
-import { cB, c, cM, cE } from '../../../../_utils/cssr';
 import { fadeInTransition } from '../../../../_styles/transitions/fade-in.cssr';
+import { c, cB, cE, cM } from '../../../../_utils/cssr';
 // vars:
 // --u-scrollbar-bezier
 // --u-scrollbar-color
@@ -7,6 +7,9 @@ import { fadeInTransition } from '../../../../_styles/transitions/fade-in.cssr';
 // --u-scrollbar-width
 // --u-scrollbar-height
 // --u-scrollbar-border-radius
+// --u-scrollbar-rail-inset-horizontal
+// --u-scrollbar-rail-inset-vertical
+// --u-scrollbar-rail-color
 export default cB('scrollbar', `
  overflow: hidden;
  position: relative;
@@ -24,40 +27,54 @@ export default cB('scrollbar', `
  width: 0;
  height: 0;
  display: none;
- `), c('>', [cB('scrollbar-content', `
+ `), c('>', [
+// We can't set overflow hidden since it affects positioning.
+cB('scrollbar-content', `
  box-sizing: border-box;
  min-width: 100%;
  `)])])]), c('>, +', [cB('scrollbar-rail', `
  position: absolute;
  pointer-events: none;
  user-select: none;
+ background: var(--u-scrollbar-rail-color);
  -webkit-user-select: none;
  `, [cM('horizontal', `
- left: 2px;
- right: 2px;
- bottom: 4px;
  height: var(--u-scrollbar-height);
  `, [c('>', [cE('scrollbar', `
  height: var(--u-scrollbar-height);
  border-radius: var(--u-scrollbar-border-radius);
  right: 0;
- `)])]), cM('vertical', `
- right: 4px;
- top: 2px;
- bottom: 2px;
+ `)])]), cM('horizontal--top', `
+ top: var(--u-scrollbar-rail-top-horizontal-top); 
+ right: var(--u-scrollbar-rail-right-horizontal-top); 
+ bottom: var(--u-scrollbar-rail-bottom-horizontal-top); 
+ left: var(--u-scrollbar-rail-left-horizontal-top); 
+ `), cM('horizontal--bottom', `
+ top: var(--u-scrollbar-rail-top-horizontal-bottom); 
+ right: var(--u-scrollbar-rail-right-horizontal-bottom); 
+ bottom: var(--u-scrollbar-rail-bottom-horizontal-bottom); 
+ left: var(--u-scrollbar-rail-left-horizontal-bottom); 
+ `), cM('vertical', `
  width: var(--u-scrollbar-width);
  `, [c('>', [cE('scrollbar', `
  width: var(--u-scrollbar-width);
  border-radius: var(--u-scrollbar-border-radius);
  bottom: 0;
- `)])]), cM('disabled', [c('>', [cE('scrollbar', {
-  pointerEvents: 'none'
-})])]), c('>', [cE('scrollbar', `
+ `)])]), cM('vertical--left', `
+ top: var(--u-scrollbar-rail-top-vertical-left); 
+ right: var(--u-scrollbar-rail-right-vertical-left); 
+ bottom: var(--u-scrollbar-rail-bottom-vertical-left); 
+ left: var(--u-scrollbar-rail-left-vertical-left); 
+ `), cM('vertical--right', `
+ top: var(--u-scrollbar-rail-top-vertical-right); 
+ right: var(--u-scrollbar-rail-right-vertical-right); 
+ bottom: var(--u-scrollbar-rail-bottom-vertical-right); 
+ left: var(--u-scrollbar-rail-left-vertical-right); 
+ `), cM('disabled', [c('>', [cE('scrollbar', 'pointer-events: none;')])]), c('>', [cE('scrollbar', `
+ z-index: 1;
  position: absolute;
  cursor: pointer;
  pointer-events: all;
  background-color: var(--u-scrollbar-color);
  transition: background-color .2s var(--u-scrollbar-bezier);
- `, [fadeInTransition(), c('&:hover', {
-  backgroundColor: 'var(--u-scrollbar-color-hover)'
-})])])])])]);
+ `, [fadeInTransition(), c('&:hover', 'background-color: var(--u-scrollbar-color-hover);')])])])])]);

package/es/_internal/scrollbar/styles/common.d.ts

@@ -0,0 +1,7 @@
+export declare const commonVars: {
+    railInsetHorizontalBottom: string;
+    railInsetHorizontalTop: string;
+    railInsetVerticalRight: string;
+    railInsetVerticalLeft: string;
+    railColor: string;
+};

package/es/_internal/scrollbar/styles/common.js

@@ -0,0 +1,7 @@
+export const commonVars = {
+    railInsetHorizontalBottom: 'auto 2px 4px 2px',
+    railInsetHorizontalTop: '4px 2px auto 2px',
+    railInsetVerticalRight: '2px 4px 2px auto',
+    railInsetVerticalLeft: '2px auto 2px 4px',
+    railColor: 'transparent'
+};

package/es/_internal/scrollbar/styles/light.d.ts

@@ -1,8 +1,16 @@
 import type { ThemeCommonVars } from '../../../_styles/common';
 import type { Theme } from '../../../_mixins';
 export declare const self: (vars: ThemeCommonVars) => {
+    height: string;
+    width: string;
+    borderRadius: string;
     color: string;
     colorHover: string;
+    railInsetHorizontalBottom: string;
+    railInsetHorizontalTop: string;
+    railInsetVerticalRight: string;
+    railInsetVerticalLeft: string;
+    railColor: string;
 };
 export type ScrollbarThemeVars = ReturnType<typeof self>;
 declare const scrollbarLight: Theme<'Scrollbar', ScrollbarThemeVars>;

package/es/_internal/scrollbar/styles/light.js

@@ -1,10 +1,8 @@
 import { commonLight } from '../../../_styles/common';
+import { commonVars } from './common';
 export const self = (vars) => {
-    const { scrollbarColor, scrollbarColorHover } = vars;
-    return {
-        color: scrollbarColor,
-        colorHover: scrollbarColorHover
-    };
+    const { scrollbarColor, scrollbarColorHover, scrollbarHeight, scrollbarWidth, scrollbarBorderRadius } = vars;
+    return Object.assign(Object.assign({}, commonVars), { height: scrollbarHeight, width: scrollbarWidth, borderRadius: scrollbarBorderRadius, color: scrollbarColor, colorHover: scrollbarColorHover });
 };
 const scrollbarLight = {
     name: 'Scrollbar',

package/es/_internal/select-menu/src/SelectMenu.d.ts

@@ -101,8 +101,16 @@ declare const _default: import("vue").DefineComponent<{
         loadingColor: string;
     }, {
         Scrollbar: import("../../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
         Empty: import("../../../_mixins").Theme<"Empty", {
             iconSizeSmall: string;
@@ -158,8 +166,16 @@ declare const _default: import("vue").DefineComponent<{
         loadingColor: string;
     }, {
         Scrollbar: import("../../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
         Empty: import("../../../_mixins").Theme<"Empty", {
             iconSizeSmall: string;
@@ -215,8 +231,16 @@ declare const _default: import("vue").DefineComponent<{
         loadingColor: string;
     }, {
         Scrollbar: import("../../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
         Empty: import("../../../_mixins").Theme<"Empty", {
             iconSizeSmall: string;
@@ -280,8 +304,16 @@ declare const _default: import("vue").DefineComponent<{
         };
         peers: {
             Scrollbar: import("../../../_mixins").Theme<"Scrollbar", {
+                height: string;
+                width: string;
+                borderRadius: string;
                 color: string;
                 colorHover: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
+                railColor: string;
             }, any>;
             Empty: import("../../../_mixins").Theme<"Empty", {
                 iconSizeSmall: string;
@@ -319,7 +351,7 @@ declare const _default: import("vue").DefineComponent<{
     virtualListRef: import("vue").Ref<{
         listElRef: HTMLElement;
         itemsElRef: HTMLElement | null;
-        scrollTo: import("vueuc/lib/virtual-list/src/VirtualList").ScrollTo;
+        scrollTo: import("vueuc").VVirtualListScrollTo;
     } | null>;
     scrollbarRef: import("vue").Ref<{
         $el: HTMLElement;
@@ -475,8 +507,16 @@ declare const _default: import("vue").DefineComponent<{
         loadingColor: string;
     }, {
         Scrollbar: import("../../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
         Empty: import("../../../_mixins").Theme<"Empty", {
             iconSizeSmall: string;
@@ -532,8 +572,16 @@ declare const _default: import("vue").DefineComponent<{
         loadingColor: string;
     }, {
         Scrollbar: import("../../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
         Empty: import("../../../_mixins").Theme<"Empty", {
             iconSizeSmall: string;
@@ -589,8 +637,16 @@ declare const _default: import("vue").DefineComponent<{
         loadingColor: string;
     }, {
         Scrollbar: import("../../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
         Empty: import("../../../_mixins").Theme<"Empty", {
             iconSizeSmall: string;

package/es/_internal/select-menu/styles/light.d.ts

@@ -67,8 +67,16 @@ declare const internalSelectMenuLight: import("../../../_mixins").Theme<"Interna
     loadingColor: string;
 }, {
     Scrollbar: import("../../../_mixins").Theme<"Scrollbar", {
+        height: string;
+        width: string;
+        borderRadius: string;
         color: string;
         colorHover: string;
+        railInsetHorizontalBottom: string;
+        railInsetHorizontalTop: string;
+        railInsetVerticalRight: string;
+        railInsetVerticalLeft: string;
+        railColor: string;
     }, any>;
     Empty: import("../../../_mixins").Theme<"Empty", {
         iconSizeSmall: string;

package/es/_internal/selection/src/Selection.d.ts

@@ -608,7 +608,9 @@ declare const _default: import("vue").DefineComponent<{
     singleElRef: import("vue").Ref<HTMLElement | null>;
     patternInputWrapperRef: import("vue").Ref<HTMLElement | null>;
     overflowRef: import("vue").Ref<{
-        sync: () => void;
+        sync: (options: {
+            showAllItemsBeforeCalculate: boolean;
+        }) => void;
     } | null>;
     inputTagElRef: import("vue").Ref<HTMLElement | null>;
     handleMouseDown: (e: MouseEvent) => void;

package/es/_internal/selection/src/Selection.js

@@ -108,7 +108,9 @@ export default defineComponent({
                 if (patternInputEl) {
                     patternInputEl.style.width = `${patternInputMirrorEl.offsetWidth}px`;
                     if (props.maxTagCount !== 'responsive') {
-                        (_a = overflowRef.value) === null || _a === void 0 ? void 0 : _a.sync();
+                        (_a = overflowRef.value) === null || _a === void 0 ? void 0 : _a.sync({
+                            showAllItemsBeforeCalculate: false
+                        });
                     }
                 }
             }

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

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

package/es/_utils/css/index.js

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

package/es/_utils/css/rtl-inset.d.ts

@@ -0,0 +1 @@
+export declare function rtlInset(inset: string): string;

package/es/_utils/css/rtl-inset.js

@@ -0,0 +1,5 @@
+import { getPadding } from 'seemly';
+export function rtlInset(inset) {
+    const { left, right, top, bottom } = getPadding(inset);
+    return `${top} ${left} ${bottom} ${right}`;
+}

package/es/_utils/index.d.ts

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

package/es/_utils/index.js

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

package/es/auto-complete/src/AutoComplete.d.ts

@@ -100,8 +100,16 @@ export declare const autoCompleteProps: {
             loadingColor: string;
         }, {
             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                height: string;
+                width: string;
+                borderRadius: string;
                 color: string;
                 colorHover: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
+                railColor: string;
             }, any>;
             Empty: import("../../_mixins").Theme<"Empty", {
                 iconSizeSmall: string;
@@ -225,8 +233,16 @@ export declare const autoCompleteProps: {
             loadingColor: string;
         }, {
             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                height: string;
+                width: string;
+                borderRadius: string;
                 color: string;
                 colorHover: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
+                railColor: string;
             }, any>;
             Empty: import("../../_mixins").Theme<"Empty", {
                 iconSizeSmall: string;
@@ -350,8 +366,16 @@ export declare const autoCompleteProps: {
             loadingColor: string;
         }, {
             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                height: string;
+                width: string;
+                borderRadius: string;
                 color: string;
                 colorHover: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
+                railColor: string;
             }, any>;
             Empty: import("../../_mixins").Theme<"Empty", {
                 iconSizeSmall: string;
@@ -533,8 +557,16 @@ declare const _default: import("vue").DefineComponent<{
             loadingColor: string;
         }, {
             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                height: string;
+                width: string;
+                borderRadius: string;
                 color: string;
                 colorHover: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
+                railColor: string;
             }, any>;
             Empty: import("../../_mixins").Theme<"Empty", {
                 iconSizeSmall: string;
@@ -658,8 +690,16 @@ declare const _default: import("vue").DefineComponent<{
             loadingColor: string;
         }, {
             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                height: string;
+                width: string;
+                borderRadius: string;
                 color: string;
                 colorHover: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
+                railColor: string;
             }, any>;
             Empty: import("../../_mixins").Theme<"Empty", {
                 iconSizeSmall: string;
@@ -783,8 +823,16 @@ declare const _default: import("vue").DefineComponent<{
             loadingColor: string;
         }, {
             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                height: string;
+                width: string;
+                borderRadius: string;
                 color: string;
                 colorHover: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
+                railColor: string;
             }, any>;
             Empty: import("../../_mixins").Theme<"Empty", {
                 iconSizeSmall: string;
@@ -952,8 +1000,16 @@ declare const _default: import("vue").DefineComponent<{
                 loadingColor: string;
             }, {
                 Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                    height: string;
+                    width: string;
+                    borderRadius: string;
                     color: string;
                     colorHover: string;
+                    railInsetHorizontalBottom: string;
+                    railInsetHorizontalTop: string;
+                    railInsetVerticalRight: string;
+                    railInsetVerticalLeft: string;
+                    railColor: string;
                 }, any>;
                 Empty: import("../../_mixins").Theme<"Empty", {
                     iconSizeSmall: string;
@@ -1044,8 +1100,16 @@ declare const _default: import("vue").DefineComponent<{
             InternalSelectMenu?: {
                 peers?: {
                     Scrollbar?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Scrollbar", {
+                        height: string;
+                        width: string;
+                        borderRadius: string;
                         color: string;
                         colorHover: string;
+                        railInsetHorizontalBottom: string;
+                        railInsetHorizontalTop: string;
+                        railInsetVerticalRight: string;
+                        railInsetVerticalLeft: string;
+                        railColor: string;
                     }, any>> | undefined;
                     Empty?: import("../../_mixins/use-theme").ExtractThemeOverrides<import("../../_mixins").Theme<"Empty", {
                         iconSizeSmall: string;
@@ -1177,8 +1241,16 @@ declare const _default: import("vue").DefineComponent<{
             loadingColor: string;
         }, {
             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                height: string;
+                width: string;
+                borderRadius: string;
                 color: string;
                 colorHover: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
+                railColor: string;
             }, any>;
             Empty: import("../../_mixins").Theme<"Empty", {
                 iconSizeSmall: string;
@@ -1302,8 +1374,16 @@ declare const _default: import("vue").DefineComponent<{
             loadingColor: string;
         }, {
             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                height: string;
+                width: string;
+                borderRadius: string;
                 color: string;
                 colorHover: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
+                railColor: string;
             }, any>;
             Empty: import("../../_mixins").Theme<"Empty", {
                 iconSizeSmall: string;
@@ -1427,8 +1507,16 @@ declare const _default: import("vue").DefineComponent<{
             loadingColor: string;
         }, {
             Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+                height: string;
+                width: string;
+                borderRadius: string;
                 color: string;
                 colorHover: string;
+                railInsetHorizontalBottom: string;
+                railInsetHorizontalTop: string;
+                railInsetVerticalRight: string;
+                railInsetVerticalLeft: string;
+                railColor: string;
             }, any>;
             Empty: import("../../_mixins").Theme<"Empty", {
                 iconSizeSmall: string;

package/es/auto-complete/styles/light.d.ts

@@ -39,8 +39,16 @@ declare const autoCompleteLight: import("../../_mixins").Theme<"AutoComplete", {
         loadingColor: string;
     }, {
         Scrollbar: import("../../_mixins").Theme<"Scrollbar", {
+            height: string;
+            width: string;
+            borderRadius: string;
             color: string;
             colorHover: string;
+            railInsetHorizontalBottom: string;
+            railInsetHorizontalTop: string;
+            railInsetVerticalRight: string;
+            railInsetVerticalLeft: string;
+            railColor: string;
         }, any>;
         Empty: import("../../_mixins").Theme<"Empty", {
             iconSizeSmall: string;

package/es/back-top/src/BackTop.d.ts

@@ -250,8 +250,8 @@ declare const _default: import("vue").DefineComponent<{
     }, any>>>;
 }>>, {
     readonly right: string | number;
-    readonly to: string | HTMLElement;
     readonly bottom: string | number;
+    readonly to: string | HTMLElement;
     readonly show: boolean | undefined;
     readonly 'onUpdate:show': Function;
     readonly visibilityHeight: number;