nuance-ui 0.2.27 → 0.2.29
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/dist/module.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.root{--dialog-y-offset:5dvh;--dialog-x-offset:50%;transform:translateX(-50%)}.root[data-centered]{--dialog-x-offset:50%;--dialog-y-offset:50%;transform:translate(-50%,-50%)}.root[data-full-screen]{--dialog-y-offset:0;--dialog-x-offset:0;--dialog-radius:0;height:100%;width:100%}
|
|
1
|
+
.root{--dialog-y-offset:5dvh;--dialog-x-offset:50%;transform:translateX(-50%)}.root[data-centered]{--dialog-x-offset:50%;--dialog-y-offset:50%;transform:translate(-50%,-50%)}.root[data-full-screen]{--dialog-y-offset:0;--dialog-x-offset:0;--dialog-radius:0;height:100%;transform:none;width:100%}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import type { CSSProperties, HTMLAttributes } from 'vue';
|
|
2
|
+
import type { Classes } from '../types/index.js';
|
|
3
|
+
import type { BoxProps } from './box.vue.js';
|
|
4
|
+
export interface ScrollAreaProps extends BoxProps {
|
|
5
|
+
/**
|
|
6
|
+
* Allows content to drive the container width via `min-width: min-content` on the inner wrapper.
|
|
7
|
+
* Use when wrapping intrinsically-wide content (tables, code blocks) that must trigger horizontal
|
|
8
|
+
* overflow instead of shrinking to fit the viewport.
|
|
9
|
+
*/
|
|
10
|
+
autoSize?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Scrollbar size, any valid CSS value for width/height, numbers are converted to rem
|
|
13
|
+
* @default '.75rem'
|
|
14
|
+
*/
|
|
15
|
+
scrollbarSize?: number | string;
|
|
16
|
+
/**
|
|
17
|
+
* Defines scrollbars behavior. Native scrollbars are used, so `'always'` behaves like `'auto'`
|
|
18
|
+
* (scrollbar appears only when content overflows — browser limitation).
|
|
19
|
+
* - `'hover'` – scrollbars visible on hover (default)
|
|
20
|
+
* - `'scroll'` – scrollbars visible during scrolling, hidden after `scrollHideDelay`
|
|
21
|
+
* - `'auto'` – scrollbars visible only when content overflows
|
|
22
|
+
* - `'never'` – scrollbars always hidden, content remains scrollable via mouse/touch
|
|
23
|
+
* @default 'hover'
|
|
24
|
+
* */
|
|
25
|
+
type?: 'auto' | 'scroll' | 'hover' | 'never';
|
|
26
|
+
/**
|
|
27
|
+
* Scroll hide delay in ms, applicable only when `type='scroll'`
|
|
28
|
+
* @default 1000
|
|
29
|
+
*/
|
|
30
|
+
scrollHideDelay?: number;
|
|
31
|
+
/**
|
|
32
|
+
* Axis at which scrollbars must be rendered
|
|
33
|
+
* - `'x'` - horizontal scrollbar only
|
|
34
|
+
* - `'y'` - vertical scrollbar only
|
|
35
|
+
* - `'xy'` - both scrollbars
|
|
36
|
+
* - `false` - no scrollbars rendered, no overflow
|
|
37
|
+
* @default 'y'
|
|
38
|
+
*/
|
|
39
|
+
scrollbars?: 'x' | 'y' | 'xy' | false;
|
|
40
|
+
/**
|
|
41
|
+
* Determines whether scrollbars should be offset with padding on given axis
|
|
42
|
+
* - `true` - reserves space for both scrollbars (always)
|
|
43
|
+
* - `'x'` - reserves space for horizontal scrollbar (always)
|
|
44
|
+
* - `'y'` - reserves space for vertical scrollbar (always)
|
|
45
|
+
* - `'present'` - reserves space only when scrollbars are visible via `scrollbar-gutter: stable`
|
|
46
|
+
* @default false
|
|
47
|
+
*/
|
|
48
|
+
offsetScrollbars?: boolean | 'x' | 'y' | 'present';
|
|
49
|
+
/** Defines `overscroll-behavior` of the viewport. Composed per-axis according to `scrollbars` */
|
|
50
|
+
overscrollBehavior?: CSSProperties['overscrollBehavior'];
|
|
51
|
+
/** Initial scroll position applied on mount before first paint to avoid flicker */
|
|
52
|
+
startScrollPosition?: {
|
|
53
|
+
x?: number;
|
|
54
|
+
y?: number;
|
|
55
|
+
};
|
|
56
|
+
/** Props forwarded to the viewport element */
|
|
57
|
+
viewportProps?: HTMLAttributes;
|
|
58
|
+
classes?: Classes<'root' | 'viewport' | 'content'>;
|
|
59
|
+
}
|
|
60
|
+
export interface ScrollAreaEmits {
|
|
61
|
+
/** Fired once when the viewport reaches the bottom edge (0.8px tolerance) */
|
|
62
|
+
bottom: [];
|
|
63
|
+
/** Fired once when the viewport reaches the top edge */
|
|
64
|
+
top: [];
|
|
65
|
+
/** Fired once when the viewport reaches the left edge */
|
|
66
|
+
left: [];
|
|
67
|
+
/** Fired once when the viewport reaches the right edge (0.8px tolerance) */
|
|
68
|
+
right: [];
|
|
69
|
+
/** Current viewport scroll position, fired on every scroll */
|
|
70
|
+
scrollPosition: [{
|
|
71
|
+
x: number;
|
|
72
|
+
y: number;
|
|
73
|
+
}];
|
|
74
|
+
/** Fired when overflow state of either axis changes */
|
|
75
|
+
overflow: [{
|
|
76
|
+
x: boolean;
|
|
77
|
+
y: boolean;
|
|
78
|
+
}];
|
|
79
|
+
}
|
|
80
|
+
declare var __VLS_9: {};
|
|
81
|
+
type __VLS_Slots = {} & {
|
|
82
|
+
default?: (props: typeof __VLS_9) => any;
|
|
83
|
+
};
|
|
84
|
+
declare const __VLS_base: import("vue").DefineComponent<ScrollAreaProps, {
|
|
85
|
+
readonly $el: HTMLElement;
|
|
86
|
+
/** Scrollable viewport element, use for programmatic scrolling */
|
|
87
|
+
readonly viewport: HTMLElement | null;
|
|
88
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
89
|
+
left: () => any;
|
|
90
|
+
right: () => any;
|
|
91
|
+
bottom: () => any;
|
|
92
|
+
top: () => any;
|
|
93
|
+
overflow: (args_0: {
|
|
94
|
+
x: boolean;
|
|
95
|
+
y: boolean;
|
|
96
|
+
}) => any;
|
|
97
|
+
scrollPosition: (args_0: {
|
|
98
|
+
x: number;
|
|
99
|
+
y: number;
|
|
100
|
+
}) => any;
|
|
101
|
+
}, string, import("vue").PublicProps, Readonly<ScrollAreaProps> & Readonly<{
|
|
102
|
+
onLeft?: (() => any) | undefined;
|
|
103
|
+
onRight?: (() => any) | undefined;
|
|
104
|
+
onBottom?: (() => any) | undefined;
|
|
105
|
+
onTop?: (() => any) | undefined;
|
|
106
|
+
onOverflow?: ((args_0: {
|
|
107
|
+
x: boolean;
|
|
108
|
+
y: boolean;
|
|
109
|
+
}) => any) | undefined;
|
|
110
|
+
onScrollPosition?: ((args_0: {
|
|
111
|
+
x: number;
|
|
112
|
+
y: number;
|
|
113
|
+
}) => any) | undefined;
|
|
114
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
115
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
116
|
+
declare const _default: typeof __VLS_export;
|
|
117
|
+
export default _default;
|
|
118
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
119
|
+
new (): {
|
|
120
|
+
$slots: S;
|
|
121
|
+
};
|
|
122
|
+
};
|
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { useResizeObserver } from "@vueuse/core";
|
|
3
|
+
import { getSize, useVarsResolver } from "#imports";
|
|
4
|
+
import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef } from "vue";
|
|
5
|
+
import Box from "./box.vue";
|
|
6
|
+
const {
|
|
7
|
+
is,
|
|
8
|
+
mod,
|
|
9
|
+
classes,
|
|
10
|
+
scrollbars = "y",
|
|
11
|
+
type = "hover",
|
|
12
|
+
scrollbarSize,
|
|
13
|
+
offsetScrollbars = false,
|
|
14
|
+
overscrollBehavior,
|
|
15
|
+
scrollHideDelay = 1e3,
|
|
16
|
+
startScrollPosition,
|
|
17
|
+
viewportProps,
|
|
18
|
+
autoSize
|
|
19
|
+
} = defineProps({
|
|
20
|
+
autoSize: { type: Boolean, required: false },
|
|
21
|
+
scrollbarSize: { type: [Number, String], required: false },
|
|
22
|
+
type: { type: String, required: false },
|
|
23
|
+
scrollHideDelay: { type: Number, required: false },
|
|
24
|
+
scrollbars: { type: [String, Boolean], required: false },
|
|
25
|
+
offsetScrollbars: { type: [Boolean, String], required: false },
|
|
26
|
+
overscrollBehavior: { type: void 0, required: false },
|
|
27
|
+
startScrollPosition: { type: Object, required: false },
|
|
28
|
+
viewportProps: { type: Object, required: false },
|
|
29
|
+
classes: { type: Object, required: false },
|
|
30
|
+
is: { type: null, required: false },
|
|
31
|
+
mod: { type: [Object, Array, null], required: false }
|
|
32
|
+
});
|
|
33
|
+
const emits = defineEmits(["bottom", "top", "left", "right", "scrollPosition", "overflow"]);
|
|
34
|
+
const rootRef = useTemplateRef("rootRef");
|
|
35
|
+
const viewportRef = useTemplateRef("viewportRef");
|
|
36
|
+
const contentRef = useTemplateRef("contentRef");
|
|
37
|
+
const TOLERANCE = 0.8;
|
|
38
|
+
const atEdge = {
|
|
39
|
+
top: false,
|
|
40
|
+
bottom: false,
|
|
41
|
+
left: false,
|
|
42
|
+
right: false
|
|
43
|
+
};
|
|
44
|
+
const overflowState = { x: false, y: false };
|
|
45
|
+
function emitEdge(name) {
|
|
46
|
+
switch (name) {
|
|
47
|
+
case "top":
|
|
48
|
+
return emits("top");
|
|
49
|
+
case "bottom":
|
|
50
|
+
return emits("bottom");
|
|
51
|
+
case "left":
|
|
52
|
+
return emits("left");
|
|
53
|
+
case "right":
|
|
54
|
+
return emits("right");
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
function checkEdge(name, reached) {
|
|
58
|
+
if (reached && !atEdge[name]) {
|
|
59
|
+
atEdge[name] = true;
|
|
60
|
+
emitEdge(name);
|
|
61
|
+
} else if (!reached && atEdge[name]) {
|
|
62
|
+
atEdge[name] = false;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
function recomputeEdges() {
|
|
66
|
+
const el = viewportRef.value;
|
|
67
|
+
if (!el)
|
|
68
|
+
return;
|
|
69
|
+
const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } = el;
|
|
70
|
+
const overflowY = scrollHeight > clientHeight;
|
|
71
|
+
const overflowX = scrollWidth > clientWidth;
|
|
72
|
+
if (overflowX !== overflowState.x || overflowY !== overflowState.y) {
|
|
73
|
+
overflowState.x = overflowX;
|
|
74
|
+
overflowState.y = overflowY;
|
|
75
|
+
emits("overflow", { x: overflowX, y: overflowY });
|
|
76
|
+
}
|
|
77
|
+
checkEdge("top", overflowY && scrollTop === 0);
|
|
78
|
+
checkEdge("bottom", overflowY && scrollTop - (scrollHeight - clientHeight) >= -TOLERANCE);
|
|
79
|
+
checkEdge("left", overflowX && scrollLeft === 0);
|
|
80
|
+
checkEdge("right", overflowX && scrollLeft - (scrollWidth - clientWidth) >= -TOLERANCE);
|
|
81
|
+
}
|
|
82
|
+
const scrolling = ref(false);
|
|
83
|
+
let hideTimer = null;
|
|
84
|
+
function showScrollbar() {
|
|
85
|
+
const el = viewportRef.value;
|
|
86
|
+
if (!el || type !== "scroll")
|
|
87
|
+
return;
|
|
88
|
+
if (!scrolling.value)
|
|
89
|
+
scrolling.value = true;
|
|
90
|
+
if (hideTimer)
|
|
91
|
+
clearTimeout(hideTimer);
|
|
92
|
+
hideTimer = setTimeout(() => scrolling.value = false, scrollHideDelay);
|
|
93
|
+
}
|
|
94
|
+
onBeforeUnmount(() => {
|
|
95
|
+
if (hideTimer)
|
|
96
|
+
clearTimeout(hideTimer);
|
|
97
|
+
});
|
|
98
|
+
function onScroll(event) {
|
|
99
|
+
const el = event.currentTarget;
|
|
100
|
+
showScrollbar();
|
|
101
|
+
emits("scrollPosition", { x: el.scrollLeft, y: el.scrollTop });
|
|
102
|
+
recomputeEdges();
|
|
103
|
+
}
|
|
104
|
+
function onWheel(event) {
|
|
105
|
+
const el = viewportRef.value;
|
|
106
|
+
if (!el || !event.shiftKey)
|
|
107
|
+
return;
|
|
108
|
+
if (scrollbars !== "x" && scrollbars !== "xy")
|
|
109
|
+
return;
|
|
110
|
+
const atTop = el.scrollTop < 1;
|
|
111
|
+
const atBottom = el.scrollTop >= el.scrollHeight - el.clientHeight - 1;
|
|
112
|
+
const canScrollX = el.scrollWidth > el.clientWidth;
|
|
113
|
+
if (canScrollX && (atTop || atBottom))
|
|
114
|
+
event.stopPropagation();
|
|
115
|
+
}
|
|
116
|
+
useResizeObserver([viewportRef, contentRef], recomputeEdges);
|
|
117
|
+
onMounted(() => {
|
|
118
|
+
const el = viewportRef.value;
|
|
119
|
+
if (el && startScrollPosition) {
|
|
120
|
+
el.scrollTo({
|
|
121
|
+
left: startScrollPosition.x ?? 0,
|
|
122
|
+
top: startScrollPosition.y ?? 0
|
|
123
|
+
});
|
|
124
|
+
}
|
|
125
|
+
recomputeEdges();
|
|
126
|
+
});
|
|
127
|
+
const composedOverscroll = computed(() => {
|
|
128
|
+
if (!overscrollBehavior)
|
|
129
|
+
return void 0;
|
|
130
|
+
if (scrollbars === "x")
|
|
131
|
+
return `${overscrollBehavior} auto`;
|
|
132
|
+
if (scrollbars === "y")
|
|
133
|
+
return `auto ${overscrollBehavior}`;
|
|
134
|
+
return overscrollBehavior;
|
|
135
|
+
});
|
|
136
|
+
const style = useVarsResolver(() => ({
|
|
137
|
+
root: {
|
|
138
|
+
"--area-bar-size": getSize(scrollbarSize),
|
|
139
|
+
"--area-overscroll": composedOverscroll.value
|
|
140
|
+
}
|
|
141
|
+
}));
|
|
142
|
+
defineExpose({
|
|
143
|
+
get $el() {
|
|
144
|
+
return rootRef.value?.$el;
|
|
145
|
+
},
|
|
146
|
+
/** Scrollable viewport element, use for programmatic scrolling */
|
|
147
|
+
get viewport() {
|
|
148
|
+
return viewportRef.value;
|
|
149
|
+
}
|
|
150
|
+
});
|
|
151
|
+
</script>
|
|
152
|
+
|
|
153
|
+
<template>
|
|
154
|
+
<Box
|
|
155
|
+
:is
|
|
156
|
+
ref='rootRef'
|
|
157
|
+
:style='style.root'
|
|
158
|
+
:mod='[{
|
|
159
|
+
type,
|
|
160
|
+
scrolling,
|
|
161
|
+
scrollbars,
|
|
162
|
+
"offset-x": offsetScrollbars === true || offsetScrollbars === "x",
|
|
163
|
+
"offset-y": offsetScrollbars === true || offsetScrollbars === "y",
|
|
164
|
+
"offset-present": offsetScrollbars === "present",
|
|
165
|
+
"auto-size": autoSize
|
|
166
|
+
}, mod]'
|
|
167
|
+
:class='[$style.root, classes?.root]'
|
|
168
|
+
>
|
|
169
|
+
<div
|
|
170
|
+
v-bind='viewportProps'
|
|
171
|
+
ref='viewportRef'
|
|
172
|
+
:class='[$style.viewport, classes?.viewport, viewportProps?.class]'
|
|
173
|
+
@scroll='onScroll'
|
|
174
|
+
@wheel='onWheel'
|
|
175
|
+
>
|
|
176
|
+
<div ref='contentRef' :class='[$style.content, classes?.content]'>
|
|
177
|
+
<slot />
|
|
178
|
+
</div>
|
|
179
|
+
</div>
|
|
180
|
+
</Box>
|
|
181
|
+
</template>
|
|
182
|
+
|
|
183
|
+
<style module>
|
|
184
|
+
.root{--area-bar-size:12px;overflow:hidden}.root:where([data-autosize]) .content{min-width:-moz-min-content;min-width:min-content}.content{display:table;min-width:100%}.viewport{height:100%;overflow:hidden;overscroll-behavior:var(--area-overscroll);width:100%}:where([data-scrollbars=x]) .viewport{overflow-x:auto;overflow-y:hidden}:where([data-scrollbars=y]) .viewport{overflow-x:hidden;overflow-y:auto}:where([data-scrollbars=xy]) .viewport{overflow:auto}:where([data-type=hover]) .viewport{scrollbar-color:transparent transparent;scrollbar-width:thin}:where([data-type=hover]) .viewport::-webkit-scrollbar-thumb{background:transparent}:where([data-type=hover]) .viewport:focus-within,:where([data-type=hover]):hover .viewport{scrollbar-color:var(--color-default-border) transparent}:where([data-type=hover]) .viewport:focus-within::-webkit-scrollbar-thumb,:where([data-type=hover]):hover .viewport::-webkit-scrollbar-thumb{background:var(--color-default-border)}:where([data-type=scroll]) .viewport{scrollbar-color:transparent transparent;scrollbar-width:thin}:where([data-type=scroll]) .viewport::-webkit-scrollbar-thumb{background:transparent}:where([data-type=scroll]) .viewport[data-scrolling]{scrollbar-color:var(--color-default-border) transparent}:where([data-type=scroll]) .viewport[data-scrolling]::-webkit-scrollbar-thumb{background:var(--color-default-border)}:where([data-type=auto]) .viewport{scrollbar-color:var(--color-default-border) transparent;scrollbar-width:thin}:where([data-type=auto]) .viewport::-webkit-scrollbar-thumb{background:var(--color-default-border)}:where([data-type=always]) .viewport{scrollbar-color:var(--color-default-border) transparent;scrollbar-width:thin}:where([data-type=always]) .viewport::-webkit-scrollbar-thumb{background:var(--color-default-border)}:where([data-type=never]) .viewport{scrollbar-width:none}:where([data-type=never]) .viewport::-webkit-scrollbar{display:none}:where([data-offset-x]) .viewport{padding-bottom:var(--area-bar-size)}:where([data-offset-y]) .viewport{padding-right:var(--area-bar-size)}:where([data-offset-present]) .viewport{scrollbar-gutter:stable}
|
|
185
|
+
</style>
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import type { CSSProperties, HTMLAttributes } from 'vue';
|
|
2
|
+
import type { Classes } from '../types/index.js';
|
|
3
|
+
import type { BoxProps } from './box.vue.js';
|
|
4
|
+
export interface ScrollAreaProps extends BoxProps {
|
|
5
|
+
/**
|
|
6
|
+
* Allows content to drive the container width via `min-width: min-content` on the inner wrapper.
|
|
7
|
+
* Use when wrapping intrinsically-wide content (tables, code blocks) that must trigger horizontal
|
|
8
|
+
* overflow instead of shrinking to fit the viewport.
|
|
9
|
+
*/
|
|
10
|
+
autoSize?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Scrollbar size, any valid CSS value for width/height, numbers are converted to rem
|
|
13
|
+
* @default '.75rem'
|
|
14
|
+
*/
|
|
15
|
+
scrollbarSize?: number | string;
|
|
16
|
+
/**
|
|
17
|
+
* Defines scrollbars behavior. Native scrollbars are used, so `'always'` behaves like `'auto'`
|
|
18
|
+
* (scrollbar appears only when content overflows — browser limitation).
|
|
19
|
+
* - `'hover'` – scrollbars visible on hover (default)
|
|
20
|
+
* - `'scroll'` – scrollbars visible during scrolling, hidden after `scrollHideDelay`
|
|
21
|
+
* - `'auto'` – scrollbars visible only when content overflows
|
|
22
|
+
* - `'never'` – scrollbars always hidden, content remains scrollable via mouse/touch
|
|
23
|
+
* @default 'hover'
|
|
24
|
+
* */
|
|
25
|
+
type?: 'auto' | 'scroll' | 'hover' | 'never';
|
|
26
|
+
/**
|
|
27
|
+
* Scroll hide delay in ms, applicable only when `type='scroll'`
|
|
28
|
+
* @default 1000
|
|
29
|
+
*/
|
|
30
|
+
scrollHideDelay?: number;
|
|
31
|
+
/**
|
|
32
|
+
* Axis at which scrollbars must be rendered
|
|
33
|
+
* - `'x'` - horizontal scrollbar only
|
|
34
|
+
* - `'y'` - vertical scrollbar only
|
|
35
|
+
* - `'xy'` - both scrollbars
|
|
36
|
+
* - `false` - no scrollbars rendered, no overflow
|
|
37
|
+
* @default 'y'
|
|
38
|
+
*/
|
|
39
|
+
scrollbars?: 'x' | 'y' | 'xy' | false;
|
|
40
|
+
/**
|
|
41
|
+
* Determines whether scrollbars should be offset with padding on given axis
|
|
42
|
+
* - `true` - reserves space for both scrollbars (always)
|
|
43
|
+
* - `'x'` - reserves space for horizontal scrollbar (always)
|
|
44
|
+
* - `'y'` - reserves space for vertical scrollbar (always)
|
|
45
|
+
* - `'present'` - reserves space only when scrollbars are visible via `scrollbar-gutter: stable`
|
|
46
|
+
* @default false
|
|
47
|
+
*/
|
|
48
|
+
offsetScrollbars?: boolean | 'x' | 'y' | 'present';
|
|
49
|
+
/** Defines `overscroll-behavior` of the viewport. Composed per-axis according to `scrollbars` */
|
|
50
|
+
overscrollBehavior?: CSSProperties['overscrollBehavior'];
|
|
51
|
+
/** Initial scroll position applied on mount before first paint to avoid flicker */
|
|
52
|
+
startScrollPosition?: {
|
|
53
|
+
x?: number;
|
|
54
|
+
y?: number;
|
|
55
|
+
};
|
|
56
|
+
/** Props forwarded to the viewport element */
|
|
57
|
+
viewportProps?: HTMLAttributes;
|
|
58
|
+
classes?: Classes<'root' | 'viewport' | 'content'>;
|
|
59
|
+
}
|
|
60
|
+
export interface ScrollAreaEmits {
|
|
61
|
+
/** Fired once when the viewport reaches the bottom edge (0.8px tolerance) */
|
|
62
|
+
bottom: [];
|
|
63
|
+
/** Fired once when the viewport reaches the top edge */
|
|
64
|
+
top: [];
|
|
65
|
+
/** Fired once when the viewport reaches the left edge */
|
|
66
|
+
left: [];
|
|
67
|
+
/** Fired once when the viewport reaches the right edge (0.8px tolerance) */
|
|
68
|
+
right: [];
|
|
69
|
+
/** Current viewport scroll position, fired on every scroll */
|
|
70
|
+
scrollPosition: [{
|
|
71
|
+
x: number;
|
|
72
|
+
y: number;
|
|
73
|
+
}];
|
|
74
|
+
/** Fired when overflow state of either axis changes */
|
|
75
|
+
overflow: [{
|
|
76
|
+
x: boolean;
|
|
77
|
+
y: boolean;
|
|
78
|
+
}];
|
|
79
|
+
}
|
|
80
|
+
declare var __VLS_9: {};
|
|
81
|
+
type __VLS_Slots = {} & {
|
|
82
|
+
default?: (props: typeof __VLS_9) => any;
|
|
83
|
+
};
|
|
84
|
+
declare const __VLS_base: import("vue").DefineComponent<ScrollAreaProps, {
|
|
85
|
+
readonly $el: HTMLElement;
|
|
86
|
+
/** Scrollable viewport element, use for programmatic scrolling */
|
|
87
|
+
readonly viewport: HTMLElement | null;
|
|
88
|
+
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
89
|
+
left: () => any;
|
|
90
|
+
right: () => any;
|
|
91
|
+
bottom: () => any;
|
|
92
|
+
top: () => any;
|
|
93
|
+
overflow: (args_0: {
|
|
94
|
+
x: boolean;
|
|
95
|
+
y: boolean;
|
|
96
|
+
}) => any;
|
|
97
|
+
scrollPosition: (args_0: {
|
|
98
|
+
x: number;
|
|
99
|
+
y: number;
|
|
100
|
+
}) => any;
|
|
101
|
+
}, string, import("vue").PublicProps, Readonly<ScrollAreaProps> & Readonly<{
|
|
102
|
+
onLeft?: (() => any) | undefined;
|
|
103
|
+
onRight?: (() => any) | undefined;
|
|
104
|
+
onBottom?: (() => any) | undefined;
|
|
105
|
+
onTop?: (() => any) | undefined;
|
|
106
|
+
onOverflow?: ((args_0: {
|
|
107
|
+
x: boolean;
|
|
108
|
+
y: boolean;
|
|
109
|
+
}) => any) | undefined;
|
|
110
|
+
onScrollPosition?: ((args_0: {
|
|
111
|
+
x: number;
|
|
112
|
+
y: number;
|
|
113
|
+
}) => any) | undefined;
|
|
114
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
115
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
116
|
+
declare const _default: typeof __VLS_export;
|
|
117
|
+
export default _default;
|
|
118
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
119
|
+
new (): {
|
|
120
|
+
$slots: S;
|
|
121
|
+
};
|
|
122
|
+
};
|