pxd 0.0.55 → 0.0.60
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -4
- package/dist/components/_internal/fragment-container.vue +3 -2
- package/dist/components/active-graph/index.d.vue.ts +2 -3
- package/dist/components/active-graph/index.vue +23 -16
- package/dist/components/active-graph/types.d.ts +4 -3
- package/dist/components/avatar/index.vue +19 -10
- package/dist/components/avatar/types.d.ts +0 -12
- package/dist/components/avatar-group/index.d.vue.ts +2 -2
- package/dist/components/avatar-group/index.vue +4 -3
- package/dist/components/avatar-group/types.d.ts +11 -0
- package/dist/components/badge/index.d.vue.ts +1 -1
- package/dist/components/badge/index.vue +47 -3
- package/dist/components/badge/types.d.ts +24 -1
- package/dist/components/book/index.vue +3 -2
- package/dist/components/browser/index.vue +6 -2
- package/dist/components/button/index.d.vue.ts +1 -1
- package/dist/components/button/index.vue +60 -12
- package/dist/components/carousel/index.d.vue.ts +24 -2
- package/dist/components/carousel/index.vue +341 -28
- package/dist/components/carousel/types.d.ts +2 -2
- package/dist/components/carousel-item/index.d.vue.ts +13 -0
- package/dist/components/carousel-item/index.vue +49 -0
- package/dist/components/checkbox/index.d.vue.ts +1 -5
- package/dist/components/checkbox/index.vue +66 -31
- package/dist/components/checkbox/types.d.ts +2 -14
- package/dist/components/checkbox-group/index.d.vue.ts +2 -7
- package/dist/components/checkbox-group/index.vue +11 -29
- package/dist/components/checkbox-group/types.d.ts +12 -0
- package/dist/components/chip/index.d.vue.ts +1 -1
- package/dist/components/chip/index.vue +31 -2
- package/dist/components/choicebox/index.d.vue.ts +11 -5
- package/dist/components/choicebox/index.vue +36 -54
- package/dist/components/choicebox/types.d.ts +11 -18
- package/dist/components/choicebox-item/index.d.vue.ts +16 -0
- package/dist/components/choicebox-item/index.vue +67 -0
- package/dist/components/choicebox-item/types.d.ts +12 -0
- package/dist/components/collapse/index.d.vue.ts +5 -4
- package/dist/components/collapse/index.vue +47 -30
- package/dist/components/collapse/types.d.ts +2 -5
- package/dist/components/collapse-group/index.d.vue.ts +2 -4
- package/dist/components/collapse-group/index.vue +8 -20
- package/dist/components/collapse-group/types.d.ts +6 -0
- package/dist/components/command-menu/index.vue +6 -7
- package/dist/components/command-menu/types.d.ts +0 -5
- package/dist/components/command-menu-group/index.d.vue.ts +1 -1
- package/dist/components/command-menu-group/index.vue +3 -2
- package/dist/components/command-menu-group/types.d.ts +5 -0
- package/dist/components/config-provider/index.d.vue.ts +2 -2
- package/dist/components/config-provider/index.vue +6 -4
- package/dist/components/countdown/index.vue +3 -2
- package/dist/components/countdown/types.d.ts +2 -2
- package/dist/components/dash-line/index.vue +3 -1
- package/dist/components/description/index.d.vue.ts +1 -1
- package/dist/components/description/index.vue +8 -7
- package/dist/components/description/types.d.ts +1 -1
- package/dist/components/drawer/index.d.vue.ts +3 -2
- package/dist/components/drawer/index.vue +20 -15
- package/dist/components/drawer/types.d.ts +3 -3
- package/dist/components/ellipsis-text/index.d.vue.ts +14 -0
- package/dist/components/ellipsis-text/index.vue +242 -0
- package/dist/components/ellipsis-text/types.d.ts +14 -0
- package/dist/components/empty-state/index.vue +6 -2
- package/dist/components/error/index.d.vue.ts +1 -3
- package/dist/components/error/index.vue +21 -6
- package/dist/components/error/types.d.ts +7 -1
- package/dist/components/fader/index.vue +30 -11
- package/dist/components/fader/types.d.ts +2 -2
- package/dist/components/gauge/index.vue +7 -2
- package/dist/components/grid/index.vue +9 -4
- package/dist/components/grid/types.d.ts +0 -5
- package/dist/components/grid-item/index.d.vue.ts +1 -1
- package/dist/components/grid-item/index.vue +16 -8
- package/dist/components/grid-item/types.d.ts +6 -0
- package/dist/components/hold-button/index.d.vue.ts +2 -2
- package/dist/components/hold-button/index.vue +7 -4
- package/dist/components/index.d.ts +7 -3
- package/dist/components/index.js +7 -3
- package/dist/components/input/index.d.vue.ts +8 -8
- package/dist/components/input/index.vue +54 -21
- package/dist/components/input/types.d.ts +7 -10
- package/dist/components/intersection-observer/index.d.vue.ts +0 -1
- package/dist/components/intersection-observer/index.vue +12 -3
- package/dist/components/kbd/index.vue +1 -1
- package/dist/components/link-button/index.d.vue.ts +1 -1
- package/dist/components/link-button/index.vue +5 -4
- package/dist/components/link-button/types.d.ts +1 -1
- package/dist/components/list/index.d.vue.ts +8 -5
- package/dist/components/list/index.vue +50 -54
- package/dist/components/list/types.d.ts +3 -20
- package/dist/components/list-item/index.d.vue.ts +4 -3
- package/dist/components/list-item/index.vue +44 -18
- package/dist/components/list-item/types.d.ts +15 -0
- package/dist/components/loading-bar/index.vue +33 -2
- package/dist/components/loading-bar/types.d.ts +1 -1
- package/dist/components/loading-dots/index.vue +3 -2
- package/dist/components/menu/index.d.vue.ts +5 -2
- package/dist/components/menu/index.vue +4 -1
- package/dist/components/menu/types.d.ts +5 -0
- package/dist/components/message/index.d.vue.ts +11 -8
- package/dist/components/message/index.vue +4 -12
- package/dist/components/message/types.d.ts +1 -12
- package/dist/components/message-item/index.d.vue.ts +1 -3
- package/dist/components/message-item/index.vue +13 -7
- package/dist/components/message-item/types.d.ts +11 -0
- package/dist/components/modal/index.d.vue.ts +3 -2
- package/dist/components/modal/index.vue +17 -13
- package/dist/components/modal/types.d.ts +3 -3
- package/dist/components/noise-background/index.vue +4 -3
- package/dist/components/note/index.d.vue.ts +1 -2
- package/dist/components/note/index.vue +81 -29
- package/dist/components/note/types.d.ts +10 -2
- package/dist/components/number-input/index.d.vue.ts +5 -4
- package/dist/components/number-input/index.vue +36 -6
- package/dist/components/number-input/types.d.ts +2 -0
- package/dist/components/overlay/index.vue +1 -1
- package/dist/components/overlay/types.d.ts +1 -1
- package/dist/components/pagination/index.vue +5 -3
- package/dist/components/pin-input/index.d.vue.ts +7 -2
- package/dist/components/pin-input/index.vue +60 -23
- package/dist/components/pin-input/types.d.ts +0 -4
- package/dist/components/placeholder/index.vue +2 -1
- package/dist/components/popover/index.d.vue.ts +1 -1
- package/dist/components/popover/index.vue +116 -78
- package/dist/components/popover/types.d.ts +2 -0
- package/dist/components/progress/index.d.vue.ts +1 -1
- package/dist/components/progress/index.vue +15 -2
- package/dist/components/project-banner/index.d.vue.ts +18 -0
- package/dist/components/project-banner/index.vue +59 -0
- package/dist/components/project-banner/types.d.ts +8 -0
- package/dist/components/radio/index.vue +62 -20
- package/dist/components/radio/types.d.ts +1 -14
- package/dist/components/radio-group/index.d.vue.ts +2 -4
- package/dist/components/radio-group/index.vue +11 -16
- package/dist/components/radio-group/types.d.ts +12 -0
- package/dist/components/resizable/types.d.ts +5 -10
- package/dist/components/resizable-handle/index.vue +1 -1
- package/dist/components/resizable-panel/index.d.vue.ts +1 -1
- package/dist/components/resizable-panel/index.vue +7 -2
- package/dist/components/resizable-panel/types.d.ts +4 -0
- package/dist/components/scrollable/index.d.vue.ts +29 -0
- package/dist/components/scrollable/index.vue +98 -83
- package/dist/components/scrollable/types.d.ts +19 -5
- package/dist/components/skeleton/index.vue +24 -1
- package/dist/components/slider/index.d.vue.ts +6 -6
- package/dist/components/slider/index.vue +86 -44
- package/dist/components/slider/types.d.ts +1 -1
- package/dist/components/snippet/index.vue +28 -2
- package/dist/components/spinner/index.vue +4 -2
- package/dist/components/stack/index.d.vue.ts +2 -2
- package/dist/components/stack/index.vue +35 -3
- package/dist/components/stack/types.d.ts +1 -1
- package/dist/components/status-dot/index.vue +5 -1
- package/dist/components/switch/index.d.vue.ts +10 -1
- package/dist/components/switch/index.vue +35 -44
- package/dist/components/switch/types.d.ts +4 -12
- package/dist/components/switch-item/index.d.vue.ts +14 -0
- package/dist/components/switch-item/index.vue +79 -0
- package/dist/components/switch-item/types.d.ts +9 -0
- package/dist/components/teleport/index.d.vue.ts +1 -1
- package/dist/components/teleport/index.vue +1 -1
- package/dist/components/teleport/types.d.ts +1 -1
- package/dist/components/text/index.d.vue.ts +1 -2
- package/dist/components/text/index.vue +36 -22
- package/dist/components/text/types.d.ts +1 -1
- package/dist/components/textarea/index.d.vue.ts +4 -4
- package/dist/components/textarea/index.vue +33 -4
- package/dist/components/textarea/types.d.ts +0 -1
- package/dist/components/time-picker/index.d.vue.ts +1 -2
- package/dist/components/time-picker/index.vue +43 -9
- package/dist/components/time-picker/types.d.ts +1 -2
- package/dist/components/toggle/index.vue +11 -10
- package/dist/components/toggle-button/index.d.vue.ts +22 -0
- package/dist/components/toggle-button/index.vue +110 -0
- package/dist/components/toggle-button/types.d.ts +16 -0
- package/dist/components/{choicebox-group → toggle-button-group}/index.d.vue.ts +5 -5
- package/dist/components/toggle-button-group/index.vue +68 -0
- package/dist/components/toggle-button-group/types.d.ts +22 -0
- package/dist/components/tooltip/index.d.vue.ts +2 -0
- package/dist/components/tooltip/index.vue +9 -3
- package/dist/components/tooltip/types.d.ts +2 -0
- package/dist/components/virtual-list/index.d.vue.ts +25 -4
- package/dist/components/virtual-list/index.vue +66 -10
- package/dist/components/virtual-list/types.d.ts +9 -4
- package/dist/composables/index.d.ts +2 -2
- package/dist/composables/index.js +2 -2
- package/dist/composables/use-browser-observer.d.ts +5 -5
- package/dist/composables/use-browser-observer.js +23 -20
- package/dist/composables/use-copy-click.js +4 -0
- package/dist/composables/use-countdown.d.ts +2 -2
- package/dist/composables/use-focus-trap.d.ts +6 -2
- package/dist/composables/use-focus-trap.js +19 -7
- package/dist/composables/use-forward-ref-expose.d.ts +2 -0
- package/dist/composables/use-forward-ref-expose.js +41 -0
- package/dist/composables/use-message.d.ts +3 -6
- package/dist/composables/use-model-value.d.ts +9 -8
- package/dist/composables/use-popover-responsive.d.ts +2 -2
- package/dist/composables/use-popover-responsive.js +3 -3
- package/dist/composables/use-repeat-action.js +2 -2
- package/dist/composables/use-virtual-list.d.ts +21 -12
- package/dist/composables/use-virtual-list.js +90 -158
- package/dist/composables/use-window-size.d.ts +4 -0
- package/dist/composables/use-window-size.js +27 -0
- package/dist/contexts/avatar.d.ts +5 -2
- package/dist/contexts/carousel.d.ts +4 -4
- package/dist/contexts/carousel.js +1 -1
- package/dist/contexts/checkbox.d.ts +7 -2
- package/dist/contexts/choicebox.d.ts +8 -4
- package/dist/contexts/choicebox.js +1 -4
- package/dist/contexts/collapse.d.ts +5 -6
- package/dist/contexts/collapse.js +1 -1
- package/dist/contexts/config-provider.d.ts +5 -0
- package/dist/{composables/use-config-provider-context.js → contexts/config-provider.js} +8 -5
- package/dist/contexts/radio.d.ts +8 -2
- package/dist/contexts/switch.d.ts +8 -4
- package/dist/contexts/switch.js +1 -2
- package/dist/contexts/toggle-button.d.ts +7 -0
- package/dist/contexts/toggle-button.js +2 -0
- package/dist/styles/source.css +14 -2
- package/dist/styles/styles.css +2 -2
- package/dist/styles/tw.css +14 -2
- package/dist/types/shared/props.d.ts +1 -3
- package/dist/types/shared/utils.d.ts +0 -3
- package/dist/utils/context.d.ts +1 -0
- package/dist/utils/get.d.ts +1 -0
- package/dist/utils/get.js +14 -0
- package/dist/utils/responsive.js +2 -1
- package/dist/utils/throttle.js +9 -7
- package/dist/utils/uid.d.ts +1 -1
- package/dist/utils/uid.js +2 -2
- package/package.json +23 -21
- package/volar.d.ts +7 -3
- package/dist/components/badge/cn.d.ts +0 -90
- package/dist/components/badge/cn.js +0 -44
- package/dist/components/button/cn.d.ts +0 -121
- package/dist/components/button/cn.js +0 -55
- package/dist/components/carousel-group/index.d.vue.ts +0 -35
- package/dist/components/carousel-group/index.vue +0 -368
- package/dist/components/checkbox/cn.d.ts +0 -67
- package/dist/components/checkbox/cn.js +0 -31
- package/dist/components/chip/cn.d.ts +0 -49
- package/dist/components/chip/cn.js +0 -26
- package/dist/components/choicebox-group/index.vue +0 -65
- package/dist/components/error/cn.d.ts +0 -22
- package/dist/components/error/cn.js +0 -15
- package/dist/components/input/cn.d.ts +0 -73
- package/dist/components/input/cn.js +0 -36
- package/dist/components/list-item/cn.d.ts +0 -22
- package/dist/components/list-item/cn.js +0 -15
- package/dist/components/loading-bar/cn.d.ts +0 -70
- package/dist/components/loading-bar/cn.js +0 -32
- package/dist/components/note/cn.d.ts +0 -121
- package/dist/components/note/cn.js +0 -66
- package/dist/components/pin-input/cn.d.ts +0 -46
- package/dist/components/pin-input/cn.js +0 -25
- package/dist/components/progress/cn.d.ts +0 -19
- package/dist/components/progress/cn.js +0 -14
- package/dist/components/radio/cn.d.ts +0 -46
- package/dist/components/radio/cn.js +0 -42
- package/dist/components/skeleton/cn.d.ts +0 -43
- package/dist/components/skeleton/cn.js +0 -24
- package/dist/components/snippet/cn.d.ts +0 -52
- package/dist/components/snippet/cn.js +0 -27
- package/dist/components/stack/cn.d.ts +0 -70
- package/dist/components/stack/cn.js +0 -33
- package/dist/components/switch/cn.d.ts +0 -16
- package/dist/components/switch/cn.js +0 -13
- package/dist/components/switch-group/index.d.vue.ts +0 -23
- package/dist/components/switch-group/index.vue +0 -54
- package/dist/components/text/cn.d.ts +0 -67
- package/dist/components/text/cn.js +0 -34
- package/dist/components/textarea/cn.d.ts +0 -58
- package/dist/components/textarea/cn.js +0 -30
- package/dist/composables/use-config-provider-context.d.ts +0 -3
- package/dist/composables/use-unique-id-context.d.ts +0 -2
- package/dist/composables/use-unique-id-context.js +0 -11
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
export declare function usePopoverResponsive(): {
|
|
2
2
|
isXs: import("vue").Ref<boolean, boolean>;
|
|
3
3
|
attrs: import("vue").ComputedRef<{
|
|
4
|
-
readonly contentClass: "bg-background-100
|
|
4
|
+
readonly contentClass: "bg-background-100 border w-full rounded-tl-xl rounded-tr-xl";
|
|
5
5
|
readonly wrapperClass: "fixed w-screen h-screen items-end pointer-events-none pxd-container-mask";
|
|
6
6
|
readonly transitionType: "fade-slide";
|
|
7
7
|
} | {
|
|
8
|
-
readonly contentClass: "bg-background-100
|
|
8
|
+
readonly contentClass: "bg-background-100 border rounded-xl";
|
|
9
9
|
readonly wrapperClass: "";
|
|
10
10
|
readonly transitionType: "fade-scale";
|
|
11
11
|
}>;
|
|
@@ -3,16 +3,16 @@ import { PRESET_MEDIA_QUERIES, useMediaQuery } from "./use-media-query.js";
|
|
|
3
3
|
export function usePopoverResponsive() {
|
|
4
4
|
const isXs = useMediaQuery(PRESET_MEDIA_QUERIES.IS_XS);
|
|
5
5
|
const attrs = computed(() => {
|
|
6
|
-
const basicContentClass = "bg-background-100
|
|
6
|
+
const basicContentClass = "bg-background-100 border";
|
|
7
7
|
if (isXs.value) {
|
|
8
8
|
return {
|
|
9
|
-
contentClass: `${basicContentClass} w-full rounded-tl-
|
|
9
|
+
contentClass: `${basicContentClass} w-full rounded-tl-xl rounded-tr-xl`,
|
|
10
10
|
wrapperClass: "fixed w-screen h-screen items-end pointer-events-none pxd-container-mask",
|
|
11
11
|
transitionType: "fade-slide"
|
|
12
12
|
};
|
|
13
13
|
}
|
|
14
14
|
return {
|
|
15
|
-
contentClass: `${basicContentClass} rounded-
|
|
15
|
+
contentClass: `${basicContentClass} rounded-xl`,
|
|
16
16
|
wrapperClass: "",
|
|
17
17
|
transitionType: "fade-scale"
|
|
18
18
|
};
|
|
@@ -5,10 +5,10 @@ export function useRepeatAction(actionOrOptions) {
|
|
|
5
5
|
const {
|
|
6
6
|
action,
|
|
7
7
|
disabled,
|
|
8
|
-
finalInterval = 1e3 /
|
|
8
|
+
finalInterval = 1e3 / 16.6,
|
|
9
9
|
// 60fps
|
|
10
10
|
initialInterval = 680,
|
|
11
|
-
accelerationDuration =
|
|
11
|
+
accelerationDuration = 1500
|
|
12
12
|
} = typeof actionOrOptions === "function" ? { action: actionOrOptions } : actionOrOptions;
|
|
13
13
|
let timer = null;
|
|
14
14
|
let startTime = 0;
|
|
@@ -1,16 +1,25 @@
|
|
|
1
|
+
import type { VirtualItem } from '@tanstack/virtual-core';
|
|
1
2
|
import type { ComponentPublicInstance } from 'vue';
|
|
2
|
-
|
|
3
|
+
import { Virtualizer } from '@tanstack/virtual-core';
|
|
4
|
+
import type { MaybeElementRef } from '../types/shared';
|
|
5
|
+
export interface VirtualListItem extends VirtualItem {
|
|
6
|
+
key: string | number;
|
|
7
|
+
}
|
|
8
|
+
export interface VirtualListOptions {
|
|
9
|
+
status?: 'loading' | 'finished' | 'error' | '';
|
|
3
10
|
dataKey?: string;
|
|
4
|
-
listData
|
|
5
|
-
itemSize
|
|
11
|
+
listData?: any[];
|
|
12
|
+
itemSize?: number;
|
|
13
|
+
overScan?: number;
|
|
14
|
+
onBottom?: () => void | Promise<void>;
|
|
15
|
+
bottomThreshold?: number;
|
|
6
16
|
}
|
|
7
|
-
export declare function useVirtualList<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
getStartIndex: (scrollTop: number) => number;
|
|
17
|
+
export declare function useVirtualList<Options extends VirtualListOptions>(containerRef: MaybeElementRef<HTMLElement>, options: Options): {
|
|
18
|
+
virtualItems: import("vue").ComputedRef<VirtualListItem[]>;
|
|
19
|
+
totalSize: import("vue").ComputedRef<number>;
|
|
20
|
+
measureElement: (el: Element | ComponentPublicInstance | null) => void;
|
|
21
|
+
scrollToIndex: any;
|
|
22
|
+
scrollToOffset: any;
|
|
23
|
+
scrollBy: any;
|
|
24
|
+
getVirtualizer: () => Virtualizer<HTMLElement, HTMLElement>;
|
|
16
25
|
};
|
|
@@ -1,176 +1,108 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
}
|
|
25
|
-
return positions.value[positions.value.length - 1]?.bottom || 0;
|
|
26
|
-
});
|
|
27
|
-
const listStyle = computed(() => `transform: translate3d(0, ${offset.value}px, 0)`);
|
|
28
|
-
function setItemRef(el, key) {
|
|
29
|
-
if (el) {
|
|
30
|
-
itemRefs.set(key, el instanceof HTMLElement ? el : el.$el);
|
|
31
|
-
} else {
|
|
32
|
-
itemRefs.delete(key);
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
function clearItemRefs() {
|
|
36
|
-
itemRefs.clear();
|
|
37
|
-
}
|
|
38
|
-
function getStartIndex(scrollTop) {
|
|
39
|
-
if (positions.value.length === 0) {
|
|
40
|
-
return 0;
|
|
41
|
-
}
|
|
42
|
-
let low = 0;
|
|
43
|
-
let high = positions.value.length - 1;
|
|
44
|
-
let result = 0;
|
|
45
|
-
while (low <= high) {
|
|
46
|
-
const mid = low + Math.floor((high - low) / 2);
|
|
47
|
-
const position = positions.value[mid];
|
|
48
|
-
if (!position) {
|
|
49
|
-
break;
|
|
50
|
-
}
|
|
51
|
-
if (position.bottom <= scrollTop) {
|
|
52
|
-
low = mid + 1;
|
|
53
|
-
result = low;
|
|
54
|
-
} else {
|
|
55
|
-
high = mid - 1;
|
|
1
|
+
import {
|
|
2
|
+
elementScroll,
|
|
3
|
+
observeElementOffset,
|
|
4
|
+
observeElementRect,
|
|
5
|
+
Virtualizer
|
|
6
|
+
} from "@tanstack/virtual-core";
|
|
7
|
+
import { computed, onMounted, onUnmounted, shallowRef, watch } from "vue";
|
|
8
|
+
import { toValue } from "../utils/ref.js";
|
|
9
|
+
const DEFAULTS = {
|
|
10
|
+
status: "",
|
|
11
|
+
itemSize: 50,
|
|
12
|
+
overScan: 2
|
|
13
|
+
};
|
|
14
|
+
export function useVirtualList(containerRef, options) {
|
|
15
|
+
let reachBottomFired = false;
|
|
16
|
+
let cleanup;
|
|
17
|
+
const triggerVersion = shallowRef(0);
|
|
18
|
+
function getItemKey(index) {
|
|
19
|
+
if (options.dataKey) {
|
|
20
|
+
const item = options.listData?.[index];
|
|
21
|
+
const key = item?.[options.dataKey];
|
|
22
|
+
if (key !== void 0 && key !== null) {
|
|
23
|
+
return key;
|
|
56
24
|
}
|
|
57
25
|
}
|
|
58
|
-
return
|
|
26
|
+
return index;
|
|
59
27
|
}
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
}
|
|
74
|
-
positions.value = safeListData.value.map((_, index) => ({
|
|
75
|
-
index,
|
|
76
|
-
height: safeItemSize.value,
|
|
77
|
-
top: index * safeItemSize.value,
|
|
78
|
-
bottom: (index + 1) * safeItemSize.value
|
|
79
|
-
}));
|
|
80
|
-
}
|
|
81
|
-
function updatePositions() {
|
|
82
|
-
if (!renderList.value.length || positions.value.length === 0) {
|
|
83
|
-
return;
|
|
84
|
-
}
|
|
85
|
-
let firstChangedIndex = -1;
|
|
86
|
-
const changes = [];
|
|
87
|
-
renderList.value.forEach((_, i) => {
|
|
88
|
-
const index = start.value + i;
|
|
89
|
-
const itemData = props.listData[index];
|
|
90
|
-
const itemEl = itemRefs.get(itemData[props.dataKey]);
|
|
91
|
-
const position = positions.value[index];
|
|
92
|
-
if (!itemEl || !position) {
|
|
28
|
+
const virtualizer = new Virtualizer({
|
|
29
|
+
count: options.listData?.length ?? 0,
|
|
30
|
+
getScrollElement: () => toValue(containerRef) ?? null,
|
|
31
|
+
estimateSize: () => options.itemSize ?? DEFAULTS.itemSize,
|
|
32
|
+
getItemKey,
|
|
33
|
+
overscan: options.overScan ?? DEFAULTS.overScan,
|
|
34
|
+
observeElementRect,
|
|
35
|
+
observeElementOffset,
|
|
36
|
+
scrollToFn: elementScroll,
|
|
37
|
+
onChange: (instance) => {
|
|
38
|
+
triggerVersion.value++;
|
|
39
|
+
const { status = DEFAULTS.status, listData } = options;
|
|
40
|
+
if (status || listData?.length === 0) {
|
|
93
41
|
return;
|
|
94
42
|
}
|
|
95
|
-
const
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
changes.push({ index, newHeight });
|
|
99
|
-
if (firstChangedIndex === -1 || index < firstChangedIndex) {
|
|
100
|
-
firstChangedIndex = index;
|
|
101
|
-
}
|
|
43
|
+
const { onBottom, itemSize = DEFAULTS.itemSize, bottomThreshold } = options;
|
|
44
|
+
if (!onBottom) {
|
|
45
|
+
return;
|
|
102
46
|
}
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
}
|
|
107
|
-
changes.forEach(({ index, newHeight }) => {
|
|
108
|
-
if (positions.value[index]) {
|
|
109
|
-
positions.value[index].height = newHeight;
|
|
47
|
+
const { scrollOffset, scrollRect } = instance;
|
|
48
|
+
if (scrollOffset === null || scrollRect === null) {
|
|
49
|
+
return;
|
|
110
50
|
}
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
if (!
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
if (i === 0) {
|
|
119
|
-
position.top = 0;
|
|
120
|
-
} else {
|
|
121
|
-
const prevPosition = positions.value[i - 1];
|
|
122
|
-
if (prevPosition) {
|
|
123
|
-
position.top = prevPosition.bottom;
|
|
124
|
-
}
|
|
51
|
+
const totalSize2 = instance.getTotalSize();
|
|
52
|
+
const threshold = bottomThreshold ?? itemSize;
|
|
53
|
+
const scrollBottom = scrollOffset + scrollRect.height;
|
|
54
|
+
if (scrollBottom >= totalSize2 - threshold) {
|
|
55
|
+
if (!reachBottomFired) {
|
|
56
|
+
reachBottomFired = true;
|
|
57
|
+
onBottom();
|
|
125
58
|
}
|
|
126
|
-
|
|
59
|
+
} else {
|
|
60
|
+
reachBottomFired = false;
|
|
127
61
|
}
|
|
128
62
|
}
|
|
63
|
+
});
|
|
64
|
+
const virtualItems = computed(() => {
|
|
65
|
+
void triggerVersion.value;
|
|
66
|
+
return virtualizer.getVirtualItems();
|
|
67
|
+
});
|
|
68
|
+
const totalSize = computed(() => {
|
|
69
|
+
void triggerVersion.value;
|
|
70
|
+
return virtualizer.getTotalSize();
|
|
71
|
+
});
|
|
72
|
+
function updateVirtualizer() {
|
|
73
|
+
virtualizer.setOptions({
|
|
74
|
+
...virtualizer.options,
|
|
75
|
+
count: options.listData?.length ?? 0,
|
|
76
|
+
estimateSize: () => options.itemSize ?? DEFAULTS.itemSize,
|
|
77
|
+
getItemKey
|
|
78
|
+
});
|
|
79
|
+
virtualizer._willUpdate();
|
|
80
|
+
triggerVersion.value++;
|
|
129
81
|
}
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
return;
|
|
133
|
-
}
|
|
134
|
-
containerHeight.value = containerRef.value.clientHeight;
|
|
135
|
-
}
|
|
136
|
-
const unwatchList = watch(
|
|
137
|
-
() => props.listData,
|
|
138
|
-
() => {
|
|
139
|
-
clearItemRefs();
|
|
140
|
-
initPositions();
|
|
141
|
-
},
|
|
142
|
-
{ immediate: true }
|
|
143
|
-
);
|
|
144
|
-
const unwatchRenderList = watch(
|
|
145
|
-
() => renderList.value,
|
|
146
|
-
() => {
|
|
147
|
-
updatePositions();
|
|
148
|
-
}
|
|
149
|
-
);
|
|
150
|
-
function stop() {
|
|
151
|
-
containerRef.value?.removeEventListener("scroll", handleScroll);
|
|
152
|
-
unwatchRenderList();
|
|
153
|
-
clearItemRefs();
|
|
154
|
-
unwatchList();
|
|
155
|
-
}
|
|
82
|
+
watch(() => [options.itemSize, options.dataKey], updateVirtualizer);
|
|
83
|
+
watch(() => [options.listData, options.listData?.length], updateVirtualizer);
|
|
156
84
|
onMounted(() => {
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
}
|
|
160
|
-
updateContainerHeight();
|
|
161
|
-
containerRef.value.addEventListener("scroll", handleScroll, { passive: true });
|
|
85
|
+
virtualizer._willUpdate();
|
|
86
|
+
cleanup = virtualizer._didMount();
|
|
162
87
|
});
|
|
163
88
|
onUnmounted(() => {
|
|
164
|
-
|
|
89
|
+
cleanup?.();
|
|
165
90
|
});
|
|
91
|
+
function measureElement(el) {
|
|
92
|
+
if (!el) {
|
|
93
|
+
virtualizer.measureElement(null);
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
const htmlEl = el instanceof HTMLElement ? el : el.$el;
|
|
97
|
+
virtualizer.measureElement(htmlEl);
|
|
98
|
+
}
|
|
166
99
|
return {
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
getStartIndex
|
|
100
|
+
virtualItems,
|
|
101
|
+
totalSize,
|
|
102
|
+
measureElement,
|
|
103
|
+
scrollToIndex: virtualizer.scrollToIndex.bind(virtualizer),
|
|
104
|
+
scrollToOffset: virtualizer.scrollToOffset.bind(virtualizer),
|
|
105
|
+
scrollBy: virtualizer.scrollBy.bind(virtualizer),
|
|
106
|
+
getVirtualizer: () => virtualizer
|
|
175
107
|
};
|
|
176
108
|
}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { onBeforeUnmount, onMounted, shallowRef } from "vue";
|
|
2
|
+
import { cachedOn, cachedOff } from "../utils/event.js";
|
|
3
|
+
import { isServer } from "../utils/is.js";
|
|
4
|
+
export function useWindowSize() {
|
|
5
|
+
const width = shallowRef(0);
|
|
6
|
+
const height = shallowRef(0);
|
|
7
|
+
const updateSize = () => {
|
|
8
|
+
width.value = window.innerWidth;
|
|
9
|
+
height.value = window.innerHeight;
|
|
10
|
+
};
|
|
11
|
+
onMounted(() => {
|
|
12
|
+
if (isServer()) {
|
|
13
|
+
return;
|
|
14
|
+
}
|
|
15
|
+
updateSize();
|
|
16
|
+
cachedOn(window, "resize", updateSize);
|
|
17
|
+
cachedOn(window, "orientationchange", updateSize);
|
|
18
|
+
});
|
|
19
|
+
onBeforeUnmount(() => {
|
|
20
|
+
cachedOff(window, "resize", updateSize);
|
|
21
|
+
cachedOff(window, "orientationchange", updateSize);
|
|
22
|
+
});
|
|
23
|
+
return {
|
|
24
|
+
width,
|
|
25
|
+
height
|
|
26
|
+
};
|
|
27
|
+
}
|
|
@@ -1,2 +1,5 @@
|
|
|
1
|
-
import type { AvatarGroupProps } from '../components/avatar/types';
|
|
2
|
-
export
|
|
1
|
+
import type { AvatarGroupProps } from '../components/avatar-group/types';
|
|
2
|
+
export interface AvatarGroupContext {
|
|
3
|
+
props: AvatarGroupProps;
|
|
4
|
+
}
|
|
5
|
+
export declare const provideAvatarGroupContext: (contextValue: AvatarGroupContext) => AvatarGroupContext, useAvatarGroupContext: (fallback?: AvatarGroupContext | null | undefined) => AvatarGroupContext | null;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import type { Ref } from 'vue';
|
|
2
|
-
import type {
|
|
2
|
+
import type { CarouselProps } from '../components/carousel/types';
|
|
3
3
|
export interface CarouselState {
|
|
4
4
|
uid: string;
|
|
5
5
|
translateItem: (index: number, activeIndex: number) => void;
|
|
6
6
|
}
|
|
7
|
-
export interface
|
|
8
|
-
props:
|
|
7
|
+
export interface CarouselContext {
|
|
8
|
+
props: CarouselProps;
|
|
9
9
|
carousels: Ref<CarouselState[]>;
|
|
10
10
|
registerCarousel: (state: CarouselState) => void;
|
|
11
11
|
unregisterCarousel: (id: string) => void;
|
|
12
12
|
}
|
|
13
|
-
export declare const
|
|
13
|
+
export declare const provideCarouselContext: (contextValue: CarouselContext) => CarouselContext, useCarouselContext: ((fallback?: CarouselContext | undefined) => CarouselContext) & ((fallback: null) => CarouselContext | null);
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createContext } from "../utils/context.js";
|
|
2
|
-
export const [
|
|
2
|
+
export const [provideCarouselContext, useCarouselContext] = createContext("Carousel");
|
|
@@ -1,2 +1,7 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
1
|
+
import type { EmitFn } from 'vue';
|
|
2
|
+
import type { CheckboxGroupProps, CheckboxGroupEmits } from '../components/checkbox-group/types';
|
|
3
|
+
export interface CheckboxGroupContext {
|
|
4
|
+
props: CheckboxGroupProps;
|
|
5
|
+
emits: EmitFn<CheckboxGroupEmits>;
|
|
6
|
+
}
|
|
7
|
+
export declare const provideCheckboxGroupContext: (contextValue: CheckboxGroupContext) => CheckboxGroupContext, useCheckboxGroupContext: (fallback?: CheckboxGroupContext | null | undefined) => CheckboxGroupContext | null;
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type {
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import type { EmitFn } from 'vue';
|
|
2
|
+
import type { ChoiceboxEmits, ChoiceboxProps } from '../components/choicebox/types';
|
|
3
|
+
interface ChoiceboxContext {
|
|
4
|
+
props: ChoiceboxProps;
|
|
5
|
+
emits: EmitFn<ChoiceboxEmits>;
|
|
6
|
+
}
|
|
7
|
+
export declare const provideChoiceboxContext: (contextValue: ChoiceboxContext) => ChoiceboxContext, useChoiceboxContext: ((fallback?: ChoiceboxContext | undefined) => ChoiceboxContext) & ((fallback: null) => ChoiceboxContext | null);
|
|
8
|
+
export {};
|
|
@@ -1,5 +1,2 @@
|
|
|
1
1
|
import { createContext } from "../utils/context.js";
|
|
2
|
-
export const [
|
|
3
|
-
multiple: false
|
|
4
|
-
});
|
|
5
|
-
export const [provideChoiceboxGroupModelValue, useChoiceboxGroupModelValue] = createContext("ChoiceboxGroupModalValue");
|
|
2
|
+
export const [provideChoiceboxContext, useChoiceboxContext] = createContext("ChoiceboxGroup");
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import type { Ref } from 'vue';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
import type { CollapseGroupProps } from '../components/collapse-group/types';
|
|
3
|
+
export interface CollapseGroupContext {
|
|
4
|
+
expandedIds: Ref<Set<string>>;
|
|
5
|
+
props: CollapseGroupProps;
|
|
6
6
|
}
|
|
7
|
-
export declare const provideCollapseGroupContext: (contextValue: CollapseGroupContext) => CollapseGroupContext, useCollapseGroupContext: (
|
|
8
|
-
export {};
|
|
7
|
+
export declare const provideCollapseGroupContext: (contextValue: CollapseGroupContext) => CollapseGroupContext, useCollapseGroupContext: (fallback?: CollapseGroupContext | null | undefined) => CollapseGroupContext | null;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { createContext } from "../utils/context.js";
|
|
2
|
-
export const [provideCollapseGroupContext, useCollapseGroupContext] = createContext("CollapseGroup");
|
|
2
|
+
export const [provideCollapseGroupContext, useCollapseGroupContext] = createContext("CollapseGroup", null);
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import type { ConfigProviderProps } from '../components/config-provider/types';
|
|
2
|
+
export declare const injectionKey = "ConfigProvider";
|
|
3
|
+
export interface ConfigProviderContext extends Required<ConfigProviderProps> {
|
|
4
|
+
}
|
|
5
|
+
export declare const provideConfigProvider: (contextValue: ConfigProviderContext) => ConfigProviderContext, useConfigProvider: ((fallback?: ConfigProviderContext | undefined) => ConfigProviderContext) & ((fallback: null) => ConfigProviderContext | null);
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import enUS from "../locales/en-us.js";
|
|
2
2
|
import { createContext } from "../utils/context.js";
|
|
3
3
|
export const injectionKey = "ConfigProvider";
|
|
4
|
-
export const [provideConfigProvider, useConfigProvider] = createContext(
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
export const [provideConfigProvider, useConfigProvider] = createContext(
|
|
5
|
+
injectionKey,
|
|
6
|
+
{
|
|
7
|
+
size: "md",
|
|
8
|
+
locale: enUS,
|
|
9
|
+
popoverShowTransition: true
|
|
10
|
+
}
|
|
11
|
+
);
|
package/dist/contexts/radio.d.ts
CHANGED
|
@@ -1,2 +1,8 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
1
|
+
import type { EmitFn } from 'vue';
|
|
2
|
+
import type { RadioGroupEmits, RadioGroupProps } from '../components/radio-group/types';
|
|
3
|
+
export interface RadioGroupContext {
|
|
4
|
+
name: string;
|
|
5
|
+
props: RadioGroupProps;
|
|
6
|
+
emits: EmitFn<RadioGroupEmits>;
|
|
7
|
+
}
|
|
8
|
+
export declare const provideRadioGroupContext: (contextValue: RadioGroupContext) => RadioGroupContext, useRadioGroupContext: (fallback?: RadioGroupContext | null | undefined) => RadioGroupContext | null;
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import type {
|
|
3
|
-
export
|
|
4
|
-
|
|
1
|
+
import type { EmitFn } from 'vue';
|
|
2
|
+
import type { SwitchEmits, SwitchProps } from '../components/switch/types';
|
|
3
|
+
export interface SwitchContext {
|
|
4
|
+
name: string;
|
|
5
|
+
props: SwitchProps;
|
|
6
|
+
emits: EmitFn<SwitchEmits>;
|
|
7
|
+
}
|
|
8
|
+
export declare const provideSwitchContext: (contextValue: SwitchContext) => SwitchContext, useSwitchContext: ((fallback?: SwitchContext | undefined) => SwitchContext) & ((fallback: null) => SwitchContext | null);
|
package/dist/contexts/switch.js
CHANGED
|
@@ -1,3 +1,2 @@
|
|
|
1
1
|
import { createContext } from "../utils/context.js";
|
|
2
|
-
export const [
|
|
3
|
-
export const [provideSwitchGroupModelValue, useSwitchGroupModelValue] = createContext("SwitchGroupModalValue");
|
|
2
|
+
export const [provideSwitchContext, useSwitchContext] = createContext("Switch");
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { EmitFn } from 'vue';
|
|
2
|
+
import type { ToggleButtonGroupProps, ToggleButtonGroupEmits } from '../components/toggle-button-group/types';
|
|
3
|
+
export interface ToggleButtonGroupContext {
|
|
4
|
+
props: ToggleButtonGroupProps;
|
|
5
|
+
emits: EmitFn<ToggleButtonGroupEmits>;
|
|
6
|
+
}
|
|
7
|
+
export declare const provideToggleButtonGroupContext: (contextValue: ToggleButtonGroupContext) => ToggleButtonGroupContext, useToggleButtonGroupContext: (fallback?: ToggleButtonGroupContext | null | undefined) => ToggleButtonGroupContext | null;
|
package/dist/styles/source.css
CHANGED
|
@@ -449,7 +449,7 @@
|
|
|
449
449
|
transition-timing-function: var(--default-transition-timing-function);
|
|
450
450
|
}
|
|
451
451
|
|
|
452
|
-
@utility scrollbar-
|
|
452
|
+
@utility scrollbar-none {
|
|
453
453
|
& {
|
|
454
454
|
scrollbar-width: none;
|
|
455
455
|
-ms-overflow-style: none;
|
|
@@ -477,7 +477,7 @@
|
|
|
477
477
|
}
|
|
478
478
|
}
|
|
479
479
|
|
|
480
|
-
@utility
|
|
480
|
+
@utility visually-hidden {
|
|
481
481
|
position: absolute;
|
|
482
482
|
width: 1px;
|
|
483
483
|
height: 1px;
|
|
@@ -486,7 +486,17 @@
|
|
|
486
486
|
overflow: hidden;
|
|
487
487
|
clip: rect(0, 0, 0, 0);
|
|
488
488
|
white-space: nowrap;
|
|
489
|
+
visibility: hidden;
|
|
489
490
|
border-width: 0;
|
|
491
|
+
opacity: 0;
|
|
492
|
+
}
|
|
493
|
+
|
|
494
|
+
@utility content-visibility-auto {
|
|
495
|
+
content-visibility: auto;
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
@utility intrinsic-size-auto {
|
|
499
|
+
contain-intrinsic-size: auto none;
|
|
490
500
|
}
|
|
491
501
|
|
|
492
502
|
@utility font-inherit {
|
|
@@ -592,6 +602,7 @@
|
|
|
592
602
|
transform: scale(var(--scale, 0.95));
|
|
593
603
|
}
|
|
594
604
|
|
|
605
|
+
/*
|
|
595
606
|
.line-clamp {
|
|
596
607
|
display: -webkit-box;
|
|
597
608
|
overflow: hidden;
|
|
@@ -600,6 +611,7 @@
|
|
|
600
611
|
-webkit-line-clamp: var(--line-clamp, 1);
|
|
601
612
|
-webkit-box-orient: vertical;
|
|
602
613
|
}
|
|
614
|
+
*/
|
|
603
615
|
|
|
604
616
|
.scrollbar-stable {
|
|
605
617
|
scrollbar-gutter: stable !important;
|