@uzum-tech/ui 1.8.1 → 1.9.0

package/es/virtual-list/src/VirtualList.js

@@ -0,0 +1,103 @@
+import { defineComponent, h, ref } from 'vue';
+import { VVirtualList } from 'vueuc';
+import { UxScrollbar } from '../../_internal';
+export const virtualListProps = {
+    scrollbarProps: Object,
+    items: {
+        type: Array,
+        default: () => []
+    },
+    itemSize: {
+        type: Number,
+        required: true
+    },
+    itemResizable: Boolean,
+    itemsStyle: [String, Object],
+    visibleItemsTag: {
+        type: [String, Object],
+        default: 'div'
+    },
+    visibleItemsProps: Object,
+    ignoreItemResize: Boolean,
+    onScroll: Function,
+    onWheel: Function,
+    onResize: Function,
+    defaultScrollKey: [Number, String],
+    defaultScrollIndex: Number,
+    keyField: {
+        type: String,
+        default: 'key'
+    },
+    paddingTop: {
+        type: [Number, String],
+        default: 0
+    },
+    paddingBottom: {
+        type: [Number, String],
+        default: 0
+    }
+};
+export default defineComponent({
+    name: 'VirtualList',
+    props: virtualListProps,
+    setup(props) {
+        const scrollbarInstRef = ref(null);
+        const virtualListInstRef = ref(null);
+        function syncScrollbar() {
+            const { value: scrollbarInst } = scrollbarInstRef;
+            if (scrollbarInst) {
+                scrollbarInst.sync();
+            }
+        }
+        function handleScroll(e) {
+            var _a;
+            syncScrollbar();
+            (_a = props.onScroll) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }
+        function handleResize(e) {
+            var _a;
+            syncScrollbar();
+            (_a = props.onResize) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }
+        function handleWheel(e) {
+            var _a;
+            (_a = props.onWheel) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }
+        function scrollTo(options, y) {
+            var _a, _b;
+            if (typeof options === 'number') {
+                (_a = virtualListInstRef.value) === null || _a === void 0 ? void 0 : _a.scrollTo(options, y !== null && y !== void 0 ? y : 0);
+            }
+            else {
+                (_b = virtualListInstRef.value) === null || _b === void 0 ? void 0 : _b.scrollTo(options);
+            }
+        }
+        function getScrollContainer() {
+            var _a;
+            return (_a = virtualListInstRef.value) === null || _a === void 0 ? void 0 : _a.listElRef;
+        }
+        function getScrollContent() {
+            var _a;
+            return (_a = virtualListInstRef.value) === null || _a === void 0 ? void 0 : _a.itemsElRef;
+        }
+        return {
+            scrollTo,
+            scrollbarInstRef,
+            virtualListInstRef,
+            getScrollContainer,
+            getScrollContent,
+            handleScroll,
+            handleResize,
+            handleWheel
+        };
+    },
+    render() {
+        return (h(UxScrollbar, Object.assign({}, this.scrollbarProps, { ref: "scrollbarInstRef", container: this.getScrollContainer, content: this.getScrollContent }), {
+            default: () => {
+                return (h(VVirtualList, { ref: "virtualListInstRef", showScrollbar: false, items: this.items, itemSize: this.itemSize, itemResizable: this.itemResizable, itemsStyle: this.itemsStyle, visibleItemsTag: this.visibleItemsTag, visibleItemsProps: this.visibleItemsProps, ignoreItemResize: this.ignoreItemResize, keyField: this.keyField, defaultScrollKey: this.defaultScrollKey, defaultScrollIndex: this.defaultScrollIndex, paddingTop: this.paddingTop, paddingBottom: this.paddingBottom, onScroll: this.handleScroll, onResize: this.handleResize, onWheel: this.handleWheel }, {
+                    default: ({ item, index }) => { var _a, _b; return (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a, { item, index }); }
+                }));
+            }
+        }));
+    }
+});

package/lib/_internal/scrollbar/src/Scrollbar.d.ts

@@ -1,4 +1,4 @@
-import type { PropType, CSSProperties, HTMLAttributes } from 'vue';
+import type { CSSProperties, HTMLAttributes, PropType } from 'vue';
 import type { ExtractInternalPropTypes, ExtractPublicPropTypes } from '../../../_utils';
 export interface ScrollTo {
     (x: number, y: number): void;
@@ -48,10 +48,6 @@ export interface ScrollbarInst extends ScrollbarInstMethods {
     containerScrollTop: number;
 }
 declare const scrollbarProps: {
-    readonly size: {
-        readonly type: NumberConstructor;
-        readonly default: 5;
-    };
     readonly duration: {
         readonly type: NumberConstructor;
         readonly default: 0;
@@ -71,7 +67,7 @@ declare const scrollbarProps: {
     readonly content: PropType<() => HTMLElement | null | undefined>;
     readonly containerClass: StringConstructor;
     readonly containerStyle: PropType<string | CSSProperties>;
-    readonly contentClass: StringConstructor;
+    readonly contentClass: PropType<string | Array<string | undefined>>;
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly horizontalRailStyle: PropType<string | CSSProperties>;
     readonly verticalRailStyle: PropType<string | CSSProperties>;
@@ -80,26 +76,54 @@ declare const scrollbarProps: {
     readonly onResize: PropType<(e: ResizeObserverEntry) => void>;
     readonly internalOnUpdateScrollLeft: PropType<(scrollLeft: number) => void>;
     readonly internalHoistYRail: BooleanConstructor;
+    readonly yPlacement: {
+        readonly type: PropType<"left" | "right">;
+        readonly default: "right";
+    };
+    readonly xPlacement: {
+        readonly type: PropType<"top" | "bottom">;
+        readonly default: "bottom";
+    };
     readonly theme: PropType<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>>;
     readonly themeOverrides: PropType<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>>>;
     readonly builtinThemeOverrides: PropType<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>>>;
 };
 export type ScrollbarProps = ExtractPublicPropTypes<typeof scrollbarProps>;
 export type ScrollbarInternalProps = ExtractInternalPropTypes<typeof scrollbarProps>;
 declare const Scrollbar: import("vue").DefineComponent<{
-    readonly size: {
-        readonly type: NumberConstructor;
-        readonly default: 5;
-    };
     readonly duration: {
         readonly type: NumberConstructor;
         readonly default: 0;
@@ -119,7 +143,7 @@ declare const Scrollbar: import("vue").DefineComponent<{
     readonly content: PropType<() => HTMLElement | null | undefined>;
     readonly containerClass: StringConstructor;
     readonly containerStyle: PropType<string | CSSProperties>;
-    readonly contentClass: StringConstructor;
+    readonly contentClass: PropType<string | Array<string | undefined>>;
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly horizontalRailStyle: PropType<string | CSSProperties>;
     readonly verticalRailStyle: PropType<string | CSSProperties>;
@@ -128,17 +152,49 @@ declare const Scrollbar: import("vue").DefineComponent<{
     readonly onResize: PropType<(e: ResizeObserverEntry) => void>;
     readonly internalOnUpdateScrollLeft: PropType<(scrollLeft: number) => void>;
     readonly internalHoistYRail: BooleanConstructor;
+    readonly yPlacement: {
+        readonly type: PropType<"left" | "right">;
+        readonly default: "right";
+    };
+    readonly xPlacement: {
+        readonly type: PropType<"top" | "bottom">;
+        readonly default: "bottom";
+    };
     readonly theme: PropType<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>>;
     readonly themeOverrides: PropType<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>>>;
     readonly builtinThemeOverrides: PropType<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>>>;
 }, {
     mergedClsPrefix: import("vue").Ref<string>;
@@ -170,6 +226,23 @@ declare const Scrollbar: import("vue").DefineComponent<{
         '--u-scrollbar-border-radius': string;
         '--u-scrollbar-width': string;
         '--u-scrollbar-height': string;
+        '--u-scrollbar-rail-top-horizontal-top': string;
+        '--u-scrollbar-rail-right-horizontal-top': string;
+        '--u-scrollbar-rail-bottom-horizontal-top': string;
+        '--u-scrollbar-rail-left-horizontal-top': string;
+        '--u-scrollbar-rail-top-horizontal-bottom': string;
+        '--u-scrollbar-rail-right-horizontal-bottom': string;
+        '--u-scrollbar-rail-bottom-horizontal-bottom': string;
+        '--u-scrollbar-rail-left-horizontal-bottom': string;
+        '--u-scrollbar-rail-top-vertical-right': string;
+        '--u-scrollbar-rail-right-vertical-right': string;
+        '--u-scrollbar-rail-bottom-vertical-right': string;
+        '--u-scrollbar-rail-left-vertical-right': string;
+        '--u-scrollbar-rail-top-vertical-left': string;
+        '--u-scrollbar-rail-right-vertical-left': string;
+        '--u-scrollbar-rail-bottom-vertical-left': string;
+        '--u-scrollbar-rail-left-vertical-left': string;
+        '--u-scrollbar-rail-color': string;
     }> | undefined;
     themeClass: import("vue").Ref<string> | undefined;
     onRender: (() => void) | undefined;
@@ -180,10 +253,6 @@ declare const Scrollbar: import("vue").DefineComponent<{
     handleMouseEnterWrapper: () => void;
     handleMouseLeaveWrapper: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    readonly size: {
-        readonly type: NumberConstructor;
-        readonly default: 5;
-    };
     readonly duration: {
         readonly type: NumberConstructor;
         readonly default: 0;
@@ -203,7 +272,7 @@ declare const Scrollbar: import("vue").DefineComponent<{
     readonly content: PropType<() => HTMLElement | null | undefined>;
     readonly containerClass: StringConstructor;
     readonly containerStyle: PropType<string | CSSProperties>;
-    readonly contentClass: StringConstructor;
+    readonly contentClass: PropType<string | Array<string | undefined>>;
     readonly contentStyle: PropType<string | CSSProperties>;
     readonly horizontalRailStyle: PropType<string | CSSProperties>;
     readonly verticalRailStyle: PropType<string | CSSProperties>;
@@ -212,20 +281,51 @@ declare const Scrollbar: import("vue").DefineComponent<{
     readonly onResize: PropType<(e: ResizeObserverEntry) => void>;
     readonly internalOnUpdateScrollLeft: PropType<(scrollLeft: number) => void>;
     readonly internalHoistYRail: BooleanConstructor;
+    readonly yPlacement: {
+        readonly type: PropType<"left" | "right">;
+        readonly default: "right";
+    };
+    readonly xPlacement: {
+        readonly type: PropType<"top" | "bottom">;
+        readonly default: "bottom";
+    };
     readonly theme: PropType<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>>;
     readonly themeOverrides: PropType<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>>>;
     readonly builtinThemeOverrides: PropType<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>>>;
 }>>, {
-    readonly size: number;
     readonly duration: number;
     readonly scrollable: boolean;
     readonly xScrollable: boolean;
@@ -233,6 +333,8 @@ declare const Scrollbar: import("vue").DefineComponent<{
     readonly useUnifiedContainer: boolean;
     readonly triggerDisplayManually: boolean;
     readonly internalHoistYRail: boolean;
+    readonly yPlacement: "left" | "right";
+    readonly xPlacement: "top" | "bottom";
 }, {}>;
 type NativeScrollbarProps = Omit<HTMLAttributes, keyof ScrollbarInternalProps>;
 type MergedProps = Partial<ScrollbarInternalProps & NativeScrollbarProps>;