@veltra/desktop 1.1.18 → 1.1.20
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/components/action/action-group.vue.d.ts +1 -1
- package/dist/components/action/action.vue.d.ts +1 -1
- package/dist/components/cascade/cascade.vue.d.ts +3 -3
- package/dist/components/collapse/collapse.vue.d.ts +1 -1
- package/dist/components/file-viewer/previewers/pdf-viewport-scroll.js +2 -2
- package/dist/components/file-viewer/previewers/pdf-viewport-scroll.js.map +1 -1
- package/dist/components/input/input.vue.d.ts +2 -2
- package/dist/components/multi-select/multi-select.vue.d.ts +1 -1
- package/dist/components/multi-tree-select/multi-tree-select.vue.d.ts +3 -3
- package/dist/components/notification/notification.vue.d.ts +1 -1
- package/dist/components/number-input/number-input.vue.d.ts +2 -2
- package/dist/components/scroll/scroll.js +19 -83
- package/dist/components/scroll/scroll.js.map +1 -1
- package/dist/components/scroll/style2.css +0 -22
- package/dist/components/tabs/tabs-horizontal.vue.d.ts +1 -1
- package/dist/components/tabs/tabs.vue.d.ts +1 -1
- package/dist/components/textarea/textarea.vue.d.ts +3 -3
- package/dist/components/tip/tip.vue.d.ts +1 -1
- package/dist/components/tree-select/tree-select.vue.d.ts +3 -3
- package/dist/types/scroll.d.ts +1 -6
- package/package.json +6 -6
- package/src/components/file-viewer/previewers/pdf-viewport-scroll.vue +1 -1
- package/src/components/scroll/scroll.vue +32 -106
- package/src/components/scroll/style.scss +0 -22
- package/src/types/scroll.ts +1 -7
|
@@ -10,9 +10,9 @@ type __VLS_Slots = {
|
|
|
10
10
|
declare const __VLS_base: _$vue.DefineComponent<ActionGroupProps, _ActionGroupExposed, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<ActionGroupProps> & Readonly<{}>, {
|
|
11
11
|
size: "small" | "default" | "large";
|
|
12
12
|
type: _$_veltra_utils0.ColorType;
|
|
13
|
+
text: boolean;
|
|
13
14
|
circle: boolean;
|
|
14
15
|
max: number;
|
|
15
|
-
text: boolean;
|
|
16
16
|
loading: boolean;
|
|
17
17
|
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
18
18
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
@@ -17,8 +17,8 @@ declare const __VLS_base: _$vue.DefineComponent<ActionProps, {}, {}, {}, {}, _$v
|
|
|
17
17
|
}>, {
|
|
18
18
|
size: _$_veltra_utils0.ComponentSize;
|
|
19
19
|
type: ButtonType;
|
|
20
|
-
circle: boolean;
|
|
21
20
|
text: boolean;
|
|
21
|
+
circle: boolean;
|
|
22
22
|
loading: boolean;
|
|
23
23
|
inDropdown: boolean;
|
|
24
24
|
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
@@ -4,12 +4,12 @@ import * as _$vue from "vue";
|
|
|
4
4
|
//#region src/components/cascade/cascade.vue.d.ts
|
|
5
5
|
declare const __VLS_export: _$vue.DefineComponent<CascadeProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {} & {
|
|
6
6
|
"update:modelValue": (value?: string | string[] | undefined) => any;
|
|
7
|
-
change: (...args: [value?: string | undefined, label?: string | undefined, item?: Record<string, any> | undefined] | [value: string[], label: string[], data: Record<string, any>[]]) => any;
|
|
8
7
|
clear: () => any;
|
|
8
|
+
change: (...args: [value?: string | undefined, label?: string | undefined, item?: Record<string, any> | undefined] | [value: string[], label: string[], data: Record<string, any>[]]) => any;
|
|
9
9
|
}, string, _$vue.PublicProps, Readonly<CascadeProps> & Readonly<{
|
|
10
10
|
"onUpdate:modelValue"?: ((value?: string | string[] | undefined) => any) | undefined;
|
|
11
|
-
onChange?: ((...args: [value?: string | undefined, label?: string | undefined, item?: Record<string, any> | undefined] | [value: string[], label: string[], data: Record<string, any>[]]) => any) | undefined;
|
|
12
11
|
onClear?: (() => any) | undefined;
|
|
12
|
+
onChange?: ((...args: [value?: string | undefined, label?: string | undefined, item?: Record<string, any> | undefined] | [value: string[], label: string[], data: Record<string, any>[]]) => any) | undefined;
|
|
13
13
|
}>, {
|
|
14
14
|
disabled: boolean;
|
|
15
15
|
readonly: boolean;
|
|
@@ -19,9 +19,9 @@ declare const __VLS_export: _$vue.DefineComponent<CascadeProps, {}, {}, {}, {},
|
|
|
19
19
|
data: Record<string, any>[];
|
|
20
20
|
placeholder: string;
|
|
21
21
|
clearable: boolean;
|
|
22
|
-
separator: string;
|
|
23
22
|
filterable: boolean;
|
|
24
23
|
visibilityLimit: number;
|
|
24
|
+
separator: string;
|
|
25
25
|
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
26
26
|
declare const _default: typeof __VLS_export;
|
|
27
27
|
//#endregion
|
|
@@ -13,9 +13,9 @@ declare const __VLS_base: _$vue.DefineComponent<CollapseProps, {}, {}, {}, {}, _
|
|
|
13
13
|
"onUpdate:modelValue"?: ((value: CollapseModelValue) => any) | undefined;
|
|
14
14
|
onChange?: ((value: CollapseModelValue) => any) | undefined;
|
|
15
15
|
}>, {
|
|
16
|
-
bordered: boolean;
|
|
17
16
|
accordion: boolean;
|
|
18
17
|
defaultCollapseAll: boolean;
|
|
18
|
+
bordered: boolean;
|
|
19
19
|
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
20
20
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
21
21
|
declare const _default: typeof __VLS_export;
|
|
@@ -70,10 +70,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
70
70
|
detachPan = void 0;
|
|
71
71
|
});
|
|
72
72
|
return (_ctx, _cache) => {
|
|
73
|
-
return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" EmbedPDF Viewport 自带滚动;u-scroll 仅同步自定义滚动条 "), createVNode(unref(_sfc_main$1),
|
|
73
|
+
return openBlock(), createElementBlock(Fragment, null, [createCommentVNode(" EmbedPDF Viewport 自带滚动;u-scroll 仅同步自定义滚动条 "), createVNode(unref(_sfc_main$1), null, {
|
|
74
74
|
default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
|
|
75
75
|
_: 3
|
|
76
|
-
}
|
|
76
|
+
})], 2112);
|
|
77
77
|
};
|
|
78
78
|
}
|
|
79
79
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pdf-viewport-scroll.js","names":[],"sources":["../../../../src/components/file-viewer/previewers/pdf-viewport-scroll.vue"],"sourcesContent":["<template>\n <!-- EmbedPDF Viewport 自带滚动;u-scroll 仅同步自定义滚动条 -->\n <u-scroll
|
|
1
|
+
{"version":3,"file":"pdf-viewport-scroll.js","names":[],"sources":["../../../../src/components/file-viewer/previewers/pdf-viewport-scroll.vue"],"sourcesContent":["<template>\n <!-- EmbedPDF Viewport 自带滚动;u-scroll 仅同步自定义滚动条 -->\n <u-scroll>\n <slot />\n </u-scroll>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, inject, onBeforeUnmount, type Ref, watch } from 'vue'\n\nimport { UScroll } from '../../scroll'\n\ndefineOptions({ name: 'FileViewerPdfViewportScroll' })\n\n/** EmbedPDF Viewport 向子树注入的滚动容器 ref */\nconst VIEWPORT_ELEMENT_KEY = 'viewport-element'\n\nconst viewportRef = inject<Ref<HTMLDivElement | null>>(VIEWPORT_ELEMENT_KEY)\nconst viewportEl = computed(() => viewportRef?.value ?? null)\n\nlet panState:\n | {\n pointerId: number\n startX: number\n startY: number\n scrollLeft: number\n scrollTop: number\n }\n | undefined\n\nfunction isInteractiveTarget(target: EventTarget | null): boolean {\n if (!(target instanceof HTMLElement)) return false\n return !!target.closest(\n 'button, a, input, textarea, select, video, [contenteditable=\"true\"], .u-scroll__bar-x, .u-scroll__bar-y'\n )\n}\n\nfunction handlePointerDown(e: PointerEvent) {\n if (e.button !== 0 || isInteractiveTarget(e.target)) return\n\n const el = viewportEl.value\n if (!el) return\n\n panState = {\n pointerId: e.pointerId,\n startX: e.clientX,\n startY: e.clientY,\n scrollLeft: el.scrollLeft,\n scrollTop: el.scrollTop\n }\n el.classList.add('is-panning')\n el.setPointerCapture(e.pointerId)\n e.preventDefault()\n}\n\nfunction handlePointerMove(e: PointerEvent) {\n if (!panState || panState.pointerId !== e.pointerId) return\n\n const el = viewportEl.value\n if (!el) return\n\n el.scrollLeft = panState.scrollLeft - (e.clientX - panState.startX)\n el.scrollTop = panState.scrollTop - (e.clientY - panState.startY)\n}\n\nfunction endPan(e: PointerEvent) {\n if (!panState || panState.pointerId !== e.pointerId) return\n\n const el = viewportEl.value\n if (el?.hasPointerCapture(e.pointerId)) {\n el.releasePointerCapture(e.pointerId)\n }\n el?.classList.remove('is-panning')\n panState = undefined\n}\n\nlet detachPan: (() => void) | undefined\n\nwatch(\n viewportEl,\n (el, _, onCleanup) => {\n detachPan?.()\n detachPan = undefined\n if (!el) return\n\n el.addEventListener('pointerdown', handlePointerDown, { capture: true })\n el.addEventListener('pointermove', handlePointerMove, { capture: true })\n el.addEventListener('pointerup', endPan, { capture: true })\n el.addEventListener('pointercancel', endPan, { capture: true })\n\n detachPan = () => {\n el.removeEventListener('pointerdown', handlePointerDown, { capture: true })\n el.removeEventListener('pointermove', handlePointerMove, { capture: true })\n el.removeEventListener('pointerup', endPan, { capture: true })\n el.removeEventListener('pointercancel', endPan, { capture: true })\n el.classList.remove('is-panning')\n panState = undefined\n }\n\n onCleanup(() => {\n detachPan?.()\n detachPan = undefined\n })\n },\n { immediate: true }\n)\n\nonBeforeUnmount(() => {\n detachPan?.()\n detachPan = undefined\n})\n</script>\n"],"mappings":";;;AAeA,MAAM,uBAAuB;;;;;;EAE7B,MAAM,cAAc,OAAmC,qBAAoB;EAC3E,MAAM,aAAa,eAAe,aAAa,SAAS,KAAI;EAE5D,IAAI;EAUJ,SAAS,oBAAoB,QAAqC;GAChE,IAAI,EAAE,kBAAkB,cAAc,OAAO;GAC7C,OAAO,CAAC,CAAC,OAAO,QACd,4GACF;;EAGF,SAAS,kBAAkB,GAAiB;GAC1C,IAAI,EAAE,WAAW,KAAK,oBAAoB,EAAE,OAAM,EAAG;GAErD,MAAM,KAAK,WAAW;GACtB,IAAI,CAAC,IAAI;GAET,WAAW;IACT,WAAW,EAAE;IACb,QAAQ,EAAE;IACV,QAAQ,EAAE;IACV,YAAY,GAAG;IACf,WAAW,GAAG;IAChB;GACA,GAAG,UAAU,IAAI,aAAY;GAC7B,GAAG,kBAAkB,EAAE,UAAS;GAChC,EAAE,gBAAe;;EAGnB,SAAS,kBAAkB,GAAiB;GAC1C,IAAI,CAAC,YAAY,SAAS,cAAc,EAAE,WAAW;GAErD,MAAM,KAAK,WAAW;GACtB,IAAI,CAAC,IAAI;GAET,GAAG,aAAa,SAAS,cAAc,EAAE,UAAU,SAAS;GAC5D,GAAG,YAAY,SAAS,aAAa,EAAE,UAAU,SAAS;;EAG5D,SAAS,OAAO,GAAiB;GAC/B,IAAI,CAAC,YAAY,SAAS,cAAc,EAAE,WAAW;GAErD,MAAM,KAAK,WAAW;GACtB,IAAI,IAAI,kBAAkB,EAAE,UAAS,EACnC,GAAG,sBAAsB,EAAE,UAAS;GAEtC,IAAI,UAAU,OAAO,aAAY;GACjC,WAAW,KAAA;;EAGb,IAAI;EAEJ,MACE,aACC,IAAI,GAAG,cAAc;GACpB,aAAY;GACZ,YAAY,KAAA;GACZ,IAAI,CAAC,IAAI;GAET,GAAG,iBAAiB,eAAe,mBAAmB,EAAE,SAAS,MAAM,CAAA;GACvE,GAAG,iBAAiB,eAAe,mBAAmB,EAAE,SAAS,MAAM,CAAA;GACvE,GAAG,iBAAiB,aAAa,QAAQ,EAAE,SAAS,MAAM,CAAA;GAC1D,GAAG,iBAAiB,iBAAiB,QAAQ,EAAE,SAAS,MAAM,CAAA;GAE9D,kBAAkB;IAChB,GAAG,oBAAoB,eAAe,mBAAmB,EAAE,SAAS,MAAM,CAAA;IAC1E,GAAG,oBAAoB,eAAe,mBAAmB,EAAE,SAAS,MAAM,CAAA;IAC1E,GAAG,oBAAoB,aAAa,QAAQ,EAAE,SAAS,MAAM,CAAA;IAC7D,GAAG,oBAAoB,iBAAiB,QAAQ,EAAE,SAAS,MAAM,CAAA;IACjE,GAAG,UAAU,OAAO,aAAY;IAChC,WAAW,KAAA;;GAGb,gBAAgB;IACd,aAAY;IACZ,YAAY,KAAA;KACb;KAEH,EAAE,WAAW,MACf,CAAA;EAEA,sBAAsB;GACpB,aAAY;GACZ,YAAY,KAAA;IACb;;2DA7GC,mBAAA,8CAAA,EACA,YAEW,MAAA,YAAA,EAAA,MAAA;2BADD,CAAR,WAAQ,KAAA,QAAA,UAAA,CAAA,CAAA"}
|
|
@@ -17,20 +17,20 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, _InputExposed
|
|
|
17
17
|
"update:modelValue": (value: string | undefined) => any;
|
|
18
18
|
} & {
|
|
19
19
|
"update:modelValue": (value: string) => any;
|
|
20
|
+
clear: () => any;
|
|
20
21
|
change: (value: string) => any;
|
|
21
22
|
"suffix:click": (value?: string | undefined) => any;
|
|
22
23
|
"prefix:click": (value?: string | undefined) => any;
|
|
23
24
|
focus: (value?: string | undefined) => any;
|
|
24
|
-
clear: () => any;
|
|
25
25
|
blur: (value?: string | undefined) => any;
|
|
26
26
|
"native:input": (ev: Event) => any;
|
|
27
27
|
}, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
28
28
|
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
29
|
+
onClear?: (() => any) | undefined;
|
|
29
30
|
onChange?: ((value: string) => any) | undefined;
|
|
30
31
|
"onSuffix:click"?: ((value?: string | undefined) => any) | undefined;
|
|
31
32
|
"onPrefix:click"?: ((value?: string | undefined) => any) | undefined;
|
|
32
33
|
onFocus?: ((value?: string | undefined) => any) | undefined;
|
|
33
|
-
onClear?: (() => any) | undefined;
|
|
34
34
|
onBlur?: ((value?: string | undefined) => any) | undefined;
|
|
35
35
|
"onNative:input"?: ((ev: Event) => any) | undefined;
|
|
36
36
|
}>, {
|
|
@@ -32,9 +32,9 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
|
|
|
32
32
|
readonly: boolean;
|
|
33
33
|
labelKey: string;
|
|
34
34
|
valueKey: string;
|
|
35
|
-
minWidth: string;
|
|
36
35
|
placeholder: string;
|
|
37
36
|
clearable: boolean;
|
|
37
|
+
minWidth: string;
|
|
38
38
|
visibilityLimit: number;
|
|
39
39
|
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
40
40
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
@@ -15,22 +15,22 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
|
|
|
15
15
|
"update:modelValue": (value: (string | number)[]) => any;
|
|
16
16
|
} & {
|
|
17
17
|
"update:modelValue": (value: any[]) => any;
|
|
18
|
-
change: (checked: Record<string, any>[]) => any;
|
|
19
18
|
clear: () => any;
|
|
19
|
+
change: (checked: Record<string, any>[]) => any;
|
|
20
20
|
}, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
21
21
|
"onUpdate:modelValue"?: ((value: any[]) => any) | undefined;
|
|
22
|
-
onChange?: ((checked: Record<string, any>[]) => any) | undefined;
|
|
23
22
|
onClear?: (() => any) | undefined;
|
|
23
|
+
onChange?: ((checked: Record<string, any>[]) => any) | undefined;
|
|
24
24
|
}>, {
|
|
25
25
|
disabled: boolean;
|
|
26
26
|
readonly: boolean;
|
|
27
27
|
expandAll: boolean;
|
|
28
28
|
labelKey: string;
|
|
29
29
|
valueKey: string;
|
|
30
|
-
minWidth: string;
|
|
31
30
|
placeholder: string;
|
|
32
31
|
clearable: boolean;
|
|
33
32
|
filterable: boolean;
|
|
33
|
+
minWidth: string;
|
|
34
34
|
visibilityLimit: number;
|
|
35
35
|
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
36
36
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
@@ -4,9 +4,9 @@ import * as _$_veltra_utils0 from "@veltra/utils";
|
|
|
4
4
|
|
|
5
5
|
//#region src/components/notification/notification.vue.d.ts
|
|
6
6
|
declare const __VLS_export: _$vue.DefineComponent<NotificationProps, _$_veltra_utils0.DeconstructValue<_NotificationExposed>, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<NotificationProps> & Readonly<{}>, {
|
|
7
|
-
duration: number;
|
|
8
7
|
closable: boolean;
|
|
9
8
|
position: "top-left" | "top-right" | "bottom-left" | "bottom-right";
|
|
9
|
+
duration: number;
|
|
10
10
|
offset: number;
|
|
11
11
|
buttonText: string;
|
|
12
12
|
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
@@ -15,12 +15,12 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
|
|
|
15
15
|
"update:modelValue": (value: number | undefined) => any;
|
|
16
16
|
} & {
|
|
17
17
|
"update:modelValue": (value?: number | undefined) => any;
|
|
18
|
-
change: (value?: number | undefined) => any;
|
|
19
18
|
clear: () => any;
|
|
19
|
+
change: (value?: number | undefined) => any;
|
|
20
20
|
}, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
21
21
|
"onUpdate:modelValue"?: ((value?: number | undefined) => any) | undefined;
|
|
22
|
-
onChange?: ((value?: number | undefined) => any) | undefined;
|
|
23
22
|
onClear?: (() => any) | undefined;
|
|
23
|
+
onChange?: ((value?: number | undefined) => any) | undefined;
|
|
24
24
|
}>, {
|
|
25
25
|
disabled: boolean;
|
|
26
26
|
readonly: boolean;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ScrollDIKey } from "./di.js";
|
|
2
2
|
import _sfc_main$1 from "./scroll-bar.js";
|
|
3
|
-
import {
|
|
3
|
+
import { computed, createBlock, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, provide, renderSlot, resolveDynamicComponent, shallowRef, unref, withCtx } from "vue";
|
|
4
4
|
import { useResizeObserver } from "@veltra/compositions";
|
|
5
5
|
import { bem, withUnit } from "@veltra/utils";
|
|
6
6
|
import { debounce } from "@cat-kit/core";
|
|
@@ -17,51 +17,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
17
17
|
containerStyle: {},
|
|
18
18
|
contentClass: {},
|
|
19
19
|
containerClass: {},
|
|
20
|
-
dragDebounce: {}
|
|
21
|
-
target: {}
|
|
20
|
+
dragDebounce: {}
|
|
22
21
|
},
|
|
23
22
|
emits: ["scroll", "resize"],
|
|
24
23
|
setup(__props, { expose: __expose, emit: __emit }) {
|
|
25
24
|
const props = __props;
|
|
26
25
|
const emit = __emit;
|
|
27
26
|
const cls = bem("scroll");
|
|
28
|
-
const isExternal = computed(() => props.target !== void 0);
|
|
29
|
-
const externalTarget = computed(() => isExternal.value ? toValue(props.target) : null);
|
|
30
27
|
const className = computed(() => {
|
|
31
|
-
return [
|
|
32
|
-
cls.b,
|
|
33
|
-
bem.is("always", props.always),
|
|
34
|
-
bem.is("external", isExternal.value)
|
|
35
|
-
];
|
|
28
|
+
return [cls.b, bem.is("always", props.always)];
|
|
36
29
|
});
|
|
37
30
|
const style = computed(() => {
|
|
38
|
-
if (isExternal.value) return {};
|
|
39
31
|
return { height: withUnit(props.height, "px") };
|
|
40
32
|
});
|
|
41
33
|
const contentRef = shallowRef();
|
|
42
34
|
const scrollRef = shallowRef();
|
|
43
35
|
const containerRef = shallowRef();
|
|
44
|
-
const overlayRef = shallowRef();
|
|
45
36
|
const barX = shallowRef();
|
|
46
37
|
const barY = shallowRef();
|
|
47
38
|
const trackSize = {
|
|
48
39
|
width: 0,
|
|
49
40
|
height: 0
|
|
50
41
|
};
|
|
51
|
-
function getScrollContainer() {
|
|
52
|
-
if (isExternal.value) return externalTarget.value ?? void 0;
|
|
53
|
-
return containerRef.value;
|
|
54
|
-
}
|
|
55
|
-
function syncTrackSize() {
|
|
56
|
-
const container = getScrollContainer();
|
|
57
|
-
if (!container) return;
|
|
58
|
-
trackSize.width = container.clientWidth;
|
|
59
|
-
trackSize.height = container.clientHeight;
|
|
60
|
-
barX.value?.setTrackSize(trackSize.width);
|
|
61
|
-
barY.value?.setTrackSize(trackSize.height);
|
|
62
|
-
}
|
|
63
42
|
const updateBar = () => {
|
|
64
|
-
const container =
|
|
43
|
+
const container = containerRef.value;
|
|
65
44
|
if (!container) return;
|
|
66
45
|
const { scrollHeight, clientHeight, scrollTop, scrollWidth, clientWidth, scrollLeft } = container;
|
|
67
46
|
emit("scroll", {
|
|
@@ -84,13 +63,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
84
63
|
} else barX.value?.update(0, 0);
|
|
85
64
|
};
|
|
86
65
|
const handleDragX = debounce((offset, size) => {
|
|
87
|
-
const container =
|
|
66
|
+
const container = containerRef.value;
|
|
88
67
|
if (!container) return;
|
|
89
68
|
const { clientWidth, scrollWidth } = container;
|
|
90
69
|
container.scrollLeft = offset / (trackSize.width - size) * (scrollWidth - clientWidth);
|
|
91
70
|
}, props.dragDebounce ?? 0, false);
|
|
92
71
|
const handleDragY = debounce((offset, size) => {
|
|
93
|
-
const container =
|
|
72
|
+
const container = containerRef.value;
|
|
94
73
|
if (!container) return;
|
|
95
74
|
const { clientHeight, scrollHeight } = container;
|
|
96
75
|
container.scrollTop = offset / (trackSize.height - size) * (scrollHeight - clientHeight);
|
|
@@ -99,42 +78,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
99
78
|
updateBar();
|
|
100
79
|
};
|
|
101
80
|
useResizeObserver({
|
|
102
|
-
targets: [
|
|
103
|
-
contentRef,
|
|
104
|
-
scrollRef,
|
|
105
|
-
() => externalTarget.value ?? null
|
|
106
|
-
],
|
|
81
|
+
targets: [contentRef, scrollRef],
|
|
107
82
|
onResize: (entries) => {
|
|
108
|
-
|
|
83
|
+
const trackEl = scrollRef.value;
|
|
84
|
+
if (trackEl) {
|
|
85
|
+
trackSize.width = trackEl.clientWidth;
|
|
86
|
+
trackSize.height = trackEl.clientHeight;
|
|
87
|
+
barX.value?.setTrackSize(trackSize.width);
|
|
88
|
+
barY.value?.setTrackSize(trackSize.height);
|
|
89
|
+
}
|
|
109
90
|
updateBar();
|
|
110
91
|
if (entries.length) emit("resize", entries.map((entry) => entry.target));
|
|
111
92
|
}
|
|
112
93
|
});
|
|
113
|
-
let detachExternalScroll;
|
|
114
|
-
watch(externalTarget, (el, _, onCleanup) => {
|
|
115
|
-
detachExternalScroll?.();
|
|
116
|
-
detachExternalScroll = void 0;
|
|
117
|
-
if (!el || !isExternal.value) return;
|
|
118
|
-
const onScroll = () => updateBar();
|
|
119
|
-
el.addEventListener("scroll", onScroll, { passive: true });
|
|
120
|
-
detachExternalScroll = () => el.removeEventListener("scroll", onScroll);
|
|
121
|
-
syncTrackSize();
|
|
122
|
-
updateBar();
|
|
123
|
-
onCleanup(() => {
|
|
124
|
-
detachExternalScroll?.();
|
|
125
|
-
detachExternalScroll = void 0;
|
|
126
|
-
});
|
|
127
|
-
}, { immediate: true });
|
|
128
|
-
onBeforeUnmount(() => {
|
|
129
|
-
detachExternalScroll?.();
|
|
130
|
-
});
|
|
131
94
|
const scrollToLeft = (left) => {
|
|
132
|
-
const container =
|
|
95
|
+
const container = containerRef.value;
|
|
133
96
|
if (!container) return;
|
|
134
97
|
container.scrollTo({ left });
|
|
135
98
|
};
|
|
136
99
|
const scrollToTop = (top) => {
|
|
137
|
-
const container =
|
|
100
|
+
const container = containerRef.value;
|
|
138
101
|
if (!container) return;
|
|
139
102
|
container.scrollTo({ top });
|
|
140
103
|
};
|
|
@@ -143,18 +106,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
143
106
|
if (position.y !== void 0) scrollToTop(position.y);
|
|
144
107
|
};
|
|
145
108
|
provide(ScrollDIKey, { cls });
|
|
146
|
-
const activeContainerRef = shallowRef();
|
|
147
|
-
watch([
|
|
148
|
-
isExternal,
|
|
149
|
-
externalTarget,
|
|
150
|
-
containerRef
|
|
151
|
-
], () => {
|
|
152
|
-
activeContainerRef.value = getScrollContainer();
|
|
153
|
-
}, { immediate: true });
|
|
154
109
|
__expose({
|
|
155
110
|
el: scrollRef,
|
|
156
111
|
contentRef,
|
|
157
|
-
containerRef
|
|
112
|
+
containerRef,
|
|
158
113
|
scrollTo,
|
|
159
114
|
update: updateBar
|
|
160
115
|
});
|
|
@@ -164,7 +119,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
164
119
|
style: normalizeStyle(style.value),
|
|
165
120
|
ref_key: "scrollRef",
|
|
166
121
|
ref: scrollRef
|
|
167
|
-
}, [
|
|
122
|
+
}, [
|
|
168
123
|
createElementVNode("div", {
|
|
169
124
|
ref_key: "containerRef",
|
|
170
125
|
ref: containerRef,
|
|
@@ -194,26 +149,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
194
149
|
ref_key: "barX",
|
|
195
150
|
ref: barX
|
|
196
151
|
}, null, 8, ["class", "onDrag"])
|
|
197
|
-
],
|
|
198
|
-
key: 0,
|
|
199
|
-
to: externalTarget.value
|
|
200
|
-
}, [createElementVNode("div", {
|
|
201
|
-
ref_key: "overlayRef",
|
|
202
|
-
ref: overlayRef,
|
|
203
|
-
class: normalizeClass(unref(cls).e("overlay"))
|
|
204
|
-
}, [createVNode(_sfc_main$1, {
|
|
205
|
-
type: "y",
|
|
206
|
-
class: normalizeClass(unref(cls).e("bar-y")),
|
|
207
|
-
onDrag: unref(handleDragY),
|
|
208
|
-
ref_key: "barY",
|
|
209
|
-
ref: barY
|
|
210
|
-
}, null, 8, ["class", "onDrag"]), createVNode(_sfc_main$1, {
|
|
211
|
-
type: "x",
|
|
212
|
-
class: normalizeClass(unref(cls).e("bar-x")),
|
|
213
|
-
onDrag: unref(handleDragX),
|
|
214
|
-
ref_key: "barX",
|
|
215
|
-
ref: barX
|
|
216
|
-
}, null, 8, ["class", "onDrag"])], 2)], 8, ["to"])) : createCommentVNode("v-if", true)], 64))], 6);
|
|
152
|
+
], 6);
|
|
217
153
|
};
|
|
218
154
|
}
|
|
219
155
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scroll.js","names":[],"sources":["../../../src/components/scroll/scroll.vue"],"sourcesContent":["<template>\n <div :class=\"className\" :style=\"style\" ref=\"scrollRef\">\n <template v-if=\"!isExternal\">\n <div\n ref=\"containerRef\"\n :class=\"[cls.e('container'), containerClass]\"\n @scroll.passive=\"handleScroll\"\n :style=\"containerStyle\"\n >\n <component\n ref=\"contentRef\"\n :style=\"contentStyle\"\n :class=\"[cls.e('content'), contentClass]\"\n :is=\"tag\"\n >\n <slot />\n </component>\n </div>\n\n <u-scroll-bar type=\"y\" :class=\"cls.e('bar-y')\" @drag=\"handleDragY\" ref=\"barY\" />\n <u-scroll-bar type=\"x\" :class=\"cls.e('bar-x')\" @drag=\"handleDragX\" ref=\"barX\" />\n </template>\n\n <template v-else>\n <slot />\n <Teleport v-if=\"externalTarget\" :to=\"externalTarget\">\n <div ref=\"overlayRef\" :class=\"cls.e('overlay')\">\n <u-scroll-bar type=\"y\" :class=\"cls.e('bar-y')\" @drag=\"handleDragY\" ref=\"barY\" />\n <u-scroll-bar type=\"x\" :class=\"cls.e('bar-x')\" @drag=\"handleDragX\" ref=\"barX\" />\n </div>\n </Teleport>\n </template>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { debounce } from '@cat-kit/core'\nimport { useResizeObserver } from '@veltra/compositions'\nimport { bem, withUnit } from '@veltra/utils'\nimport {\n type CSSProperties,\n computed,\n onBeforeUnmount,\n provide,\n shallowRef,\n toValue,\n watch\n} from 'vue'\n\nimport type { ScrollPosition, _ScrollExposed, ScrollProps, ScrollEmits } from '../../types'\nimport { ScrollDIKey } from './di'\nimport UScrollBar from './scroll-bar.vue'\n\ndefineOptions({\n name: 'Scroll'\n})\n\nconst props = withDefaults(defineProps<ScrollProps>(), {\n tag: 'div'\n})\n\nconst emit = defineEmits<ScrollEmits>()\n\ndefineSlots<{\n /** 默认插槽 */\n default(): any\n /** 内容插槽 */\n content(): any\n}>()\n\nconst cls = bem('scroll')\n\nconst isExternal = computed(() => props.target !== undefined)\n\nconst externalTarget = computed(() => (isExternal.value ? toValue(props.target) : null))\n\nconst className = computed(() => {\n return [cls.b, bem.is('always', props.always), bem.is('external', isExternal.value)]\n})\n\nconst style = computed<CSSProperties>(() => {\n if (isExternal.value) return {}\n return {\n height: withUnit(props.height, 'px')\n }\n})\n\nconst contentRef = shallowRef<HTMLElement>()\nconst scrollRef = shallowRef<HTMLElement>()\nconst containerRef = shallowRef<HTMLElement>()\nconst overlayRef = shallowRef<HTMLElement>()\nconst barX = shallowRef<InstanceType<typeof UScrollBar>>()\nconst barY = shallowRef<InstanceType<typeof UScrollBar>>()\nconst minSize = 20\n\nconst trackSize = {\n width: 0,\n height: 0\n}\n\nfunction getScrollContainer(): HTMLElement | undefined {\n if (isExternal.value) {\n return externalTarget.value ?? undefined\n }\n return containerRef.value\n}\n\nfunction syncTrackSize() {\n const container = getScrollContainer()\n if (!container) return\n\n trackSize.width = container.clientWidth\n trackSize.height = container.clientHeight\n barX.value?.setTrackSize(trackSize.width)\n barY.value?.setTrackSize(trackSize.height)\n}\n\nconst updateBar = () => {\n const container = getScrollContainer()\n if (!container) return\n\n const { scrollHeight, clientHeight, scrollTop, scrollWidth, clientWidth, scrollLeft } = container\n\n emit('scroll', {\n x: scrollLeft,\n y: scrollTop,\n sw: scrollWidth,\n sh: scrollHeight,\n cw: clientWidth,\n ch: clientHeight\n })\n\n if (scrollHeight !== clientHeight) {\n const barYHeight = Math.max((clientHeight / scrollHeight) * trackSize.height, minSize)\n const barYTop = (scrollTop / (scrollHeight - clientHeight)) * (trackSize.height - barYHeight)\n barY.value?.update(barYHeight, barYTop)\n } else {\n barY.value?.update(0, 0)\n }\n\n if (scrollWidth !== clientWidth) {\n const barXWidth = Math.max((clientWidth / scrollWidth) * trackSize.width, minSize)\n const barXLeft = (scrollLeft / (scrollWidth - clientWidth)) * (trackSize.width - barXWidth)\n barX.value?.update(barXWidth, barXLeft)\n } else {\n barX.value?.update(0, 0)\n }\n}\n\nconst handleDragX = debounce(\n (offset: number, size: number) => {\n const container = getScrollContainer()\n if (!container) return\n const { clientWidth, scrollWidth } = container\n container.scrollLeft = (offset / (trackSize.width - size)) * (scrollWidth - clientWidth)\n },\n props.dragDebounce ?? 0,\n false\n)\n\nconst handleDragY = debounce(\n (offset: number, size: number) => {\n const container = getScrollContainer()\n if (!container) return\n const { clientHeight, scrollHeight } = container\n container.scrollTop = (offset / (trackSize.height - size)) * (scrollHeight - clientHeight)\n },\n props.dragDebounce ?? 0,\n false\n)\n\nconst handleScroll = () => {\n updateBar()\n}\n\nuseResizeObserver({\n targets: [contentRef, scrollRef, () => externalTarget.value ?? null],\n onResize: (entries) => {\n syncTrackSize()\n updateBar()\n if (entries.length) {\n emit(\n 'resize',\n entries.map((entry) => entry.target as HTMLElement)\n )\n }\n }\n})\n\nlet detachExternalScroll: (() => void) | undefined\n\nwatch(\n externalTarget,\n (el, _, onCleanup) => {\n detachExternalScroll?.()\n detachExternalScroll = undefined\n if (!el || !isExternal.value) return\n\n const onScroll = () => updateBar()\n el.addEventListener('scroll', onScroll, { passive: true })\n detachExternalScroll = () => el.removeEventListener('scroll', onScroll)\n syncTrackSize()\n updateBar()\n\n onCleanup(() => {\n detachExternalScroll?.()\n detachExternalScroll = undefined\n })\n },\n { immediate: true }\n)\n\nonBeforeUnmount(() => {\n detachExternalScroll?.()\n})\n\nconst scrollToLeft = (left: number) => {\n const container = getScrollContainer()\n if (!container) return\n container.scrollTo({ left })\n}\n\nconst scrollToTop = (top: number) => {\n const container = getScrollContainer()\n if (!container) return\n container.scrollTo({ top })\n}\n\nconst scrollTo = (position: ScrollPosition) => {\n if (position.x !== undefined) scrollToLeft(position.x)\n if (position.y !== undefined) scrollToTop(position.y)\n}\n\nprovide(ScrollDIKey, {\n cls\n})\n\nconst activeContainerRef = shallowRef<HTMLElement>()\n\nwatch(\n [isExternal, externalTarget, containerRef],\n () => {\n activeContainerRef.value = getScrollContainer()\n },\n { immediate: true }\n)\n\nconst exposed: _ScrollExposed = {\n el: scrollRef,\n contentRef,\n containerRef: activeContainerRef,\n scrollTo,\n update: updateBar\n}\n\ndefineExpose(exposed)\n</script>\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"scroll.js","names":[],"sources":["../../../src/components/scroll/scroll.vue"],"sourcesContent":["<template>\n <div :class=\"className\" :style=\"style\" ref=\"scrollRef\">\n <div\n ref=\"containerRef\"\n :class=\"[cls.e('container'), containerClass]\"\n @scroll.passive=\"handleScroll\"\n :style=\"containerStyle\"\n >\n <component\n ref=\"contentRef\"\n :style=\"contentStyle\"\n :class=\"[cls.e('content'), contentClass]\"\n :is=\"tag\"\n >\n <slot />\n </component>\n </div>\n\n <u-scroll-bar type=\"y\" :class=\"cls.e('bar-y')\" @drag=\"handleDragY\" ref=\"barY\" />\n <u-scroll-bar type=\"x\" :class=\"cls.e('bar-x')\" @drag=\"handleDragX\" ref=\"barX\" />\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { debounce } from '@cat-kit/core'\nimport { useResizeObserver } from '@veltra/compositions'\nimport { bem, withUnit } from '@veltra/utils'\nimport { type CSSProperties, computed, provide, shallowRef } from 'vue'\n\nimport type { ScrollPosition, _ScrollExposed, ScrollProps, ScrollEmits } from '../../types'\nimport { ScrollDIKey } from './di'\nimport UScrollBar from './scroll-bar.vue'\n\ndefineOptions({\n name: 'Scroll'\n})\n\nconst props = withDefaults(defineProps<ScrollProps>(), {\n tag: 'div'\n})\n\nconst emit = defineEmits<ScrollEmits>()\n\ndefineSlots<{\n /** 默认插槽 */\n default(): any\n /** 内容插槽 */\n content(): any\n}>()\n\nconst cls = bem('scroll')\n\nconst className = computed(() => {\n return [cls.b, bem.is('always', props.always)]\n})\n\nconst style = computed<CSSProperties>(() => {\n return {\n height: withUnit(props.height, 'px')\n }\n})\n\nconst contentRef = shallowRef<HTMLElement>()\nconst scrollRef = shallowRef<HTMLElement>()\nconst containerRef = shallowRef<HTMLElement>()\nconst barX = shallowRef<InstanceType<typeof UScrollBar>>()\nconst barY = shallowRef<InstanceType<typeof UScrollBar>>()\nconst minSize = 20\n\nconst trackSize = {\n width: 0,\n height: 0\n}\n\nconst updateBar = () => {\n const container = containerRef.value\n if (!container) return\n\n const { scrollHeight, clientHeight, scrollTop, scrollWidth, clientWidth, scrollLeft } = container\n\n emit('scroll', {\n x: scrollLeft,\n y: scrollTop,\n sw: scrollWidth,\n sh: scrollHeight,\n cw: clientWidth,\n ch: clientHeight\n })\n\n if (scrollHeight !== clientHeight) {\n const barYHeight = Math.max((clientHeight / scrollHeight) * trackSize.height, minSize)\n const barYTop = (scrollTop / (scrollHeight - clientHeight)) * (trackSize.height - barYHeight)\n barY.value?.update(barYHeight, barYTop)\n } else {\n barY.value?.update(0, 0)\n }\n\n if (scrollWidth !== clientWidth) {\n const barXWidth = Math.max((clientWidth / scrollWidth) * trackSize.width, minSize)\n const barXLeft = (scrollLeft / (scrollWidth - clientWidth)) * (trackSize.width - barXWidth)\n barX.value?.update(barXWidth, barXLeft)\n } else {\n barX.value?.update(0, 0)\n }\n}\n\nconst handleDragX = debounce(\n (offset: number, size: number) => {\n const container = containerRef.value\n if (!container) return\n const { clientWidth, scrollWidth } = container\n container.scrollLeft = (offset / (trackSize.width - size)) * (scrollWidth - clientWidth)\n },\n props.dragDebounce ?? 0,\n false\n)\n\nconst handleDragY = debounce(\n (offset: number, size: number) => {\n const container = containerRef.value\n if (!container) return\n const { clientHeight, scrollHeight } = container\n container.scrollTop = (offset / (trackSize.height - size)) * (scrollHeight - clientHeight)\n },\n props.dragDebounce ?? 0,\n false\n)\n\nconst handleScroll = () => {\n updateBar()\n}\n\nuseResizeObserver({\n targets: [contentRef, scrollRef],\n onResize: (entries) => {\n const trackEl = scrollRef.value\n if (trackEl) {\n trackSize.width = trackEl.clientWidth\n trackSize.height = trackEl.clientHeight\n barX.value?.setTrackSize(trackSize.width)\n barY.value?.setTrackSize(trackSize.height)\n }\n updateBar()\n if (entries.length) {\n emit(\n 'resize',\n entries.map((entry) => entry.target as HTMLElement)\n )\n }\n }\n})\n\nconst scrollToLeft = (left: number) => {\n const container = containerRef.value\n if (!container) return\n container.scrollTo({ left })\n}\n\nconst scrollToTop = (top: number) => {\n const container = containerRef.value\n if (!container) return\n container.scrollTo({ top })\n}\n\nconst scrollTo = (position: ScrollPosition) => {\n if (position.x !== undefined) scrollToLeft(position.x)\n if (position.y !== undefined) scrollToTop(position.y)\n}\n\nprovide(ScrollDIKey, {\n cls\n})\n\nconst exposed: _ScrollExposed = {\n el: scrollRef,\n contentRef,\n containerRef,\n scrollTo,\n update: updateBar\n}\n\ndefineExpose(exposed)\n</script>\n"],"mappings":"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"}
|
|
@@ -22,28 +22,6 @@
|
|
|
22
22
|
overflow: hidden;
|
|
23
23
|
scroll-behavior: auto;
|
|
24
24
|
}
|
|
25
|
-
.u-scroll.is-external {
|
|
26
|
-
display: contents;
|
|
27
|
-
}
|
|
28
|
-
.u-scroll__overlay {
|
|
29
|
-
position: absolute;
|
|
30
|
-
inset: 0;
|
|
31
|
-
overflow: hidden;
|
|
32
|
-
pointer-events: none;
|
|
33
|
-
z-index: 2;
|
|
34
|
-
}
|
|
35
|
-
.u-scroll__overlay .u-scroll__bar-x {
|
|
36
|
-
pointer-events: auto;
|
|
37
|
-
}
|
|
38
|
-
.u-scroll__overlay .u-scroll__bar-y {
|
|
39
|
-
pointer-events: auto;
|
|
40
|
-
}
|
|
41
|
-
.u-scroll__overlay:hover > .u-scroll__bar-x {
|
|
42
|
-
opacity: 1;
|
|
43
|
-
}
|
|
44
|
-
.u-scroll__overlay:hover > .u-scroll__bar-y {
|
|
45
|
-
opacity: 1;
|
|
46
|
-
}
|
|
47
25
|
.u-scroll__container {
|
|
48
26
|
overflow: auto;
|
|
49
27
|
height: 100%;
|
|
@@ -23,10 +23,10 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
|
|
|
23
23
|
onClose?: ((item: TabItem, index: number) => any) | undefined;
|
|
24
24
|
onClick?: ((item: TabItem, index: number) => any) | undefined;
|
|
25
25
|
}>, {
|
|
26
|
-
block: boolean;
|
|
27
26
|
closable: boolean;
|
|
28
27
|
rounded: boolean;
|
|
29
28
|
position: "top" | "bottom";
|
|
29
|
+
block: boolean;
|
|
30
30
|
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
31
31
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
32
32
|
declare const _default: typeof __VLS_export;
|
|
@@ -18,10 +18,10 @@ declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {},
|
|
|
18
18
|
onClose?: ((item: TabItem, index: number) => any) | undefined;
|
|
19
19
|
onClick?: ((item: TabItem, index: number) => any) | undefined;
|
|
20
20
|
}>, {
|
|
21
|
-
block: boolean;
|
|
22
21
|
closable: boolean;
|
|
23
22
|
rounded: boolean;
|
|
24
23
|
position: "left" | "right" | "top" | "bottom";
|
|
24
|
+
block: boolean;
|
|
25
25
|
keepAlive: boolean;
|
|
26
26
|
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
27
27
|
declare const _default: typeof __VLS_export;
|
|
@@ -11,22 +11,22 @@ declare const __VLS_export: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {},
|
|
|
11
11
|
"update:modelValue": (value: string | undefined) => any;
|
|
12
12
|
} & {
|
|
13
13
|
"update:modelValue": (value: string) => any;
|
|
14
|
+
clear: () => any;
|
|
14
15
|
change: (value: string) => any;
|
|
15
16
|
focus: () => any;
|
|
16
|
-
clear: () => any;
|
|
17
17
|
blur: () => any;
|
|
18
18
|
}, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
19
19
|
"onUpdate:modelValue"?: ((value: string) => any) | undefined;
|
|
20
|
+
onClear?: (() => any) | undefined;
|
|
20
21
|
onChange?: ((value: string) => any) | undefined;
|
|
21
22
|
onFocus?: (() => any) | undefined;
|
|
22
|
-
onClear?: (() => any) | undefined;
|
|
23
23
|
onBlur?: (() => any) | undefined;
|
|
24
24
|
}>, {
|
|
25
25
|
disabled: boolean;
|
|
26
26
|
readonly: boolean;
|
|
27
|
-
resize: boolean;
|
|
28
27
|
placeholder: string;
|
|
29
28
|
clearable: boolean;
|
|
29
|
+
resize: boolean;
|
|
30
30
|
autosize: boolean;
|
|
31
31
|
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
32
32
|
declare const _default: typeof __VLS_export;
|
|
@@ -14,8 +14,8 @@ declare const __VLS_base: _$vue.DefineComponent<TipProps, {}, {}, {}, {}, _$vue.
|
|
|
14
14
|
trigger: "hover" | "click";
|
|
15
15
|
contentTag: string;
|
|
16
16
|
visible: boolean;
|
|
17
|
-
content: string;
|
|
18
17
|
direction: TipDirection;
|
|
18
|
+
content: string;
|
|
19
19
|
alignment: TipAlign;
|
|
20
20
|
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
21
21
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
@@ -15,13 +15,13 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
|
15
15
|
declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {
|
|
16
16
|
"update:modelValue": (value: string | number | undefined) => any;
|
|
17
17
|
} & {
|
|
18
|
-
change: (value?: string | number | undefined, selectedData?: Record<string, any> | undefined) => any;
|
|
19
18
|
clear: () => any;
|
|
19
|
+
change: (value?: string | number | undefined, selectedData?: Record<string, any> | undefined) => any;
|
|
20
20
|
"update:text": (text?: string | undefined) => any;
|
|
21
21
|
}, string, _$vue.PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
22
22
|
"onUpdate:modelValue"?: ((value: string | number | undefined) => any) | undefined;
|
|
23
|
-
onChange?: ((value?: string | number | undefined, selectedData?: Record<string, any> | undefined) => any) | undefined;
|
|
24
23
|
onClear?: (() => any) | undefined;
|
|
24
|
+
onChange?: ((value?: string | number | undefined, selectedData?: Record<string, any> | undefined) => any) | undefined;
|
|
25
25
|
"onUpdate:text"?: ((text?: string | undefined) => any) | undefined;
|
|
26
26
|
}>, {
|
|
27
27
|
disabled: boolean;
|
|
@@ -29,10 +29,10 @@ declare const __VLS_base: _$vue.DefineComponent<__VLS_PublicProps, {}, {}, {}, {
|
|
|
29
29
|
expandAll: boolean;
|
|
30
30
|
labelKey: string;
|
|
31
31
|
valueKey: string;
|
|
32
|
-
minWidth: string;
|
|
33
32
|
placeholder: string;
|
|
34
33
|
clearable: boolean;
|
|
35
34
|
filterable: boolean;
|
|
35
|
+
minWidth: string;
|
|
36
36
|
}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
|
|
37
37
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
38
38
|
declare const _default: typeof __VLS_export;
|
package/dist/types/scroll.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { CSSProperties,
|
|
1
|
+
import { CSSProperties, ShallowRef } from "vue";
|
|
2
2
|
import { DeconstructValue } from "@veltra/utils";
|
|
3
3
|
|
|
4
4
|
//#region src/types/scroll.d.ts
|
|
@@ -41,11 +41,6 @@ interface ScrollProps {
|
|
|
41
41
|
containerClass?: string | string[];
|
|
42
42
|
/** 拖拽防抖时间 */
|
|
43
43
|
dragDebounce?: number;
|
|
44
|
-
/**
|
|
45
|
-
* 外部滚动容器(如 EmbedPDF Viewport)。
|
|
46
|
-
* 提供时仅渲染自定义滚动条并同步该元素的滚动,不创建内部滚动容器。
|
|
47
|
-
*/
|
|
48
|
-
target?: MaybeRefOrGetter<HTMLElement | null | undefined>;
|
|
49
44
|
}
|
|
50
45
|
interface ScrollEmits {
|
|
51
46
|
/** 滚动事件 */
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@veltra/desktop",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.20",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist",
|
|
6
6
|
"src"
|
|
@@ -70,11 +70,11 @@
|
|
|
70
70
|
"peerDependencies": {
|
|
71
71
|
"@cat-kit/core": ">=1.1.0",
|
|
72
72
|
"@cat-kit/excel": ">=1.0.0",
|
|
73
|
-
"@veltra/compositions": "1.1.
|
|
74
|
-
"@veltra/directives": "1.1.
|
|
75
|
-
"@veltra/icons": "1.1.
|
|
76
|
-
"@veltra/styles": "1.1.
|
|
77
|
-
"@veltra/utils": "1.1.
|
|
73
|
+
"@veltra/compositions": "1.1.20",
|
|
74
|
+
"@veltra/directives": "1.1.20",
|
|
75
|
+
"@veltra/icons": "1.1.20",
|
|
76
|
+
"@veltra/styles": "1.1.20",
|
|
77
|
+
"@veltra/utils": "1.1.20",
|
|
78
78
|
"vue": ">=3.5.0"
|
|
79
79
|
}
|
|
80
80
|
}
|
|
@@ -1,35 +1,23 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div :class="className" :style="style" ref="scrollRef">
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
3
|
+
<div
|
|
4
|
+
ref="containerRef"
|
|
5
|
+
:class="[cls.e('container'), containerClass]"
|
|
6
|
+
@scroll.passive="handleScroll"
|
|
7
|
+
:style="containerStyle"
|
|
8
|
+
>
|
|
9
|
+
<component
|
|
10
|
+
ref="contentRef"
|
|
11
|
+
:style="contentStyle"
|
|
12
|
+
:class="[cls.e('content'), contentClass]"
|
|
13
|
+
:is="tag"
|
|
9
14
|
>
|
|
10
|
-
<
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
:class="[cls.e('content'), contentClass]"
|
|
14
|
-
:is="tag"
|
|
15
|
-
>
|
|
16
|
-
<slot />
|
|
17
|
-
</component>
|
|
18
|
-
</div>
|
|
15
|
+
<slot />
|
|
16
|
+
</component>
|
|
17
|
+
</div>
|
|
19
18
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
</template>
|
|
23
|
-
|
|
24
|
-
<template v-else>
|
|
25
|
-
<slot />
|
|
26
|
-
<Teleport v-if="externalTarget" :to="externalTarget">
|
|
27
|
-
<div ref="overlayRef" :class="cls.e('overlay')">
|
|
28
|
-
<u-scroll-bar type="y" :class="cls.e('bar-y')" @drag="handleDragY" ref="barY" />
|
|
29
|
-
<u-scroll-bar type="x" :class="cls.e('bar-x')" @drag="handleDragX" ref="barX" />
|
|
30
|
-
</div>
|
|
31
|
-
</Teleport>
|
|
32
|
-
</template>
|
|
19
|
+
<u-scroll-bar type="y" :class="cls.e('bar-y')" @drag="handleDragY" ref="barY" />
|
|
20
|
+
<u-scroll-bar type="x" :class="cls.e('bar-x')" @drag="handleDragX" ref="barX" />
|
|
33
21
|
</div>
|
|
34
22
|
</template>
|
|
35
23
|
|
|
@@ -37,15 +25,7 @@
|
|
|
37
25
|
import { debounce } from '@cat-kit/core'
|
|
38
26
|
import { useResizeObserver } from '@veltra/compositions'
|
|
39
27
|
import { bem, withUnit } from '@veltra/utils'
|
|
40
|
-
import {
|
|
41
|
-
type CSSProperties,
|
|
42
|
-
computed,
|
|
43
|
-
onBeforeUnmount,
|
|
44
|
-
provide,
|
|
45
|
-
shallowRef,
|
|
46
|
-
toValue,
|
|
47
|
-
watch
|
|
48
|
-
} from 'vue'
|
|
28
|
+
import { type CSSProperties, computed, provide, shallowRef } from 'vue'
|
|
49
29
|
|
|
50
30
|
import type { ScrollPosition, _ScrollExposed, ScrollProps, ScrollEmits } from '../../types'
|
|
51
31
|
import { ScrollDIKey } from './di'
|
|
@@ -70,16 +50,11 @@ defineSlots<{
|
|
|
70
50
|
|
|
71
51
|
const cls = bem('scroll')
|
|
72
52
|
|
|
73
|
-
const isExternal = computed(() => props.target !== undefined)
|
|
74
|
-
|
|
75
|
-
const externalTarget = computed(() => (isExternal.value ? toValue(props.target) : null))
|
|
76
|
-
|
|
77
53
|
const className = computed(() => {
|
|
78
|
-
return [cls.b, bem.is('always', props.always)
|
|
54
|
+
return [cls.b, bem.is('always', props.always)]
|
|
79
55
|
})
|
|
80
56
|
|
|
81
57
|
const style = computed<CSSProperties>(() => {
|
|
82
|
-
if (isExternal.value) return {}
|
|
83
58
|
return {
|
|
84
59
|
height: withUnit(props.height, 'px')
|
|
85
60
|
}
|
|
@@ -88,7 +63,6 @@ const style = computed<CSSProperties>(() => {
|
|
|
88
63
|
const contentRef = shallowRef<HTMLElement>()
|
|
89
64
|
const scrollRef = shallowRef<HTMLElement>()
|
|
90
65
|
const containerRef = shallowRef<HTMLElement>()
|
|
91
|
-
const overlayRef = shallowRef<HTMLElement>()
|
|
92
66
|
const barX = shallowRef<InstanceType<typeof UScrollBar>>()
|
|
93
67
|
const barY = shallowRef<InstanceType<typeof UScrollBar>>()
|
|
94
68
|
const minSize = 20
|
|
@@ -98,25 +72,8 @@ const trackSize = {
|
|
|
98
72
|
height: 0
|
|
99
73
|
}
|
|
100
74
|
|
|
101
|
-
function getScrollContainer(): HTMLElement | undefined {
|
|
102
|
-
if (isExternal.value) {
|
|
103
|
-
return externalTarget.value ?? undefined
|
|
104
|
-
}
|
|
105
|
-
return containerRef.value
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
function syncTrackSize() {
|
|
109
|
-
const container = getScrollContainer()
|
|
110
|
-
if (!container) return
|
|
111
|
-
|
|
112
|
-
trackSize.width = container.clientWidth
|
|
113
|
-
trackSize.height = container.clientHeight
|
|
114
|
-
barX.value?.setTrackSize(trackSize.width)
|
|
115
|
-
barY.value?.setTrackSize(trackSize.height)
|
|
116
|
-
}
|
|
117
|
-
|
|
118
75
|
const updateBar = () => {
|
|
119
|
-
const container =
|
|
76
|
+
const container = containerRef.value
|
|
120
77
|
if (!container) return
|
|
121
78
|
|
|
122
79
|
const { scrollHeight, clientHeight, scrollTop, scrollWidth, clientWidth, scrollLeft } = container
|
|
@@ -149,7 +106,7 @@ const updateBar = () => {
|
|
|
149
106
|
|
|
150
107
|
const handleDragX = debounce(
|
|
151
108
|
(offset: number, size: number) => {
|
|
152
|
-
const container =
|
|
109
|
+
const container = containerRef.value
|
|
153
110
|
if (!container) return
|
|
154
111
|
const { clientWidth, scrollWidth } = container
|
|
155
112
|
container.scrollLeft = (offset / (trackSize.width - size)) * (scrollWidth - clientWidth)
|
|
@@ -160,7 +117,7 @@ const handleDragX = debounce(
|
|
|
160
117
|
|
|
161
118
|
const handleDragY = debounce(
|
|
162
119
|
(offset: number, size: number) => {
|
|
163
|
-
const container =
|
|
120
|
+
const container = containerRef.value
|
|
164
121
|
if (!container) return
|
|
165
122
|
const { clientHeight, scrollHeight } = container
|
|
166
123
|
container.scrollTop = (offset / (trackSize.height - size)) * (scrollHeight - clientHeight)
|
|
@@ -174,9 +131,15 @@ const handleScroll = () => {
|
|
|
174
131
|
}
|
|
175
132
|
|
|
176
133
|
useResizeObserver({
|
|
177
|
-
targets: [contentRef, scrollRef
|
|
134
|
+
targets: [contentRef, scrollRef],
|
|
178
135
|
onResize: (entries) => {
|
|
179
|
-
|
|
136
|
+
const trackEl = scrollRef.value
|
|
137
|
+
if (trackEl) {
|
|
138
|
+
trackSize.width = trackEl.clientWidth
|
|
139
|
+
trackSize.height = trackEl.clientHeight
|
|
140
|
+
barX.value?.setTrackSize(trackSize.width)
|
|
141
|
+
barY.value?.setTrackSize(trackSize.height)
|
|
142
|
+
}
|
|
180
143
|
updateBar()
|
|
181
144
|
if (entries.length) {
|
|
182
145
|
emit(
|
|
@@ -187,41 +150,14 @@ useResizeObserver({
|
|
|
187
150
|
}
|
|
188
151
|
})
|
|
189
152
|
|
|
190
|
-
let detachExternalScroll: (() => void) | undefined
|
|
191
|
-
|
|
192
|
-
watch(
|
|
193
|
-
externalTarget,
|
|
194
|
-
(el, _, onCleanup) => {
|
|
195
|
-
detachExternalScroll?.()
|
|
196
|
-
detachExternalScroll = undefined
|
|
197
|
-
if (!el || !isExternal.value) return
|
|
198
|
-
|
|
199
|
-
const onScroll = () => updateBar()
|
|
200
|
-
el.addEventListener('scroll', onScroll, { passive: true })
|
|
201
|
-
detachExternalScroll = () => el.removeEventListener('scroll', onScroll)
|
|
202
|
-
syncTrackSize()
|
|
203
|
-
updateBar()
|
|
204
|
-
|
|
205
|
-
onCleanup(() => {
|
|
206
|
-
detachExternalScroll?.()
|
|
207
|
-
detachExternalScroll = undefined
|
|
208
|
-
})
|
|
209
|
-
},
|
|
210
|
-
{ immediate: true }
|
|
211
|
-
)
|
|
212
|
-
|
|
213
|
-
onBeforeUnmount(() => {
|
|
214
|
-
detachExternalScroll?.()
|
|
215
|
-
})
|
|
216
|
-
|
|
217
153
|
const scrollToLeft = (left: number) => {
|
|
218
|
-
const container =
|
|
154
|
+
const container = containerRef.value
|
|
219
155
|
if (!container) return
|
|
220
156
|
container.scrollTo({ left })
|
|
221
157
|
}
|
|
222
158
|
|
|
223
159
|
const scrollToTop = (top: number) => {
|
|
224
|
-
const container =
|
|
160
|
+
const container = containerRef.value
|
|
225
161
|
if (!container) return
|
|
226
162
|
container.scrollTo({ top })
|
|
227
163
|
}
|
|
@@ -235,20 +171,10 @@ provide(ScrollDIKey, {
|
|
|
235
171
|
cls
|
|
236
172
|
})
|
|
237
173
|
|
|
238
|
-
const activeContainerRef = shallowRef<HTMLElement>()
|
|
239
|
-
|
|
240
|
-
watch(
|
|
241
|
-
[isExternal, externalTarget, containerRef],
|
|
242
|
-
() => {
|
|
243
|
-
activeContainerRef.value = getScrollContainer()
|
|
244
|
-
},
|
|
245
|
-
{ immediate: true }
|
|
246
|
-
)
|
|
247
|
-
|
|
248
174
|
const exposed: _ScrollExposed = {
|
|
249
175
|
el: scrollRef,
|
|
250
176
|
contentRef,
|
|
251
|
-
containerRef
|
|
177
|
+
containerRef,
|
|
252
178
|
scrollTo,
|
|
253
179
|
update: updateBar
|
|
254
180
|
}
|
|
@@ -12,28 +12,6 @@ $root-name: scroll;
|
|
|
12
12
|
overflow: hidden;
|
|
13
13
|
scroll-behavior: auto;
|
|
14
14
|
|
|
15
|
-
@include m.is(external) {
|
|
16
|
-
display: contents;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
@include m.e(overlay) {
|
|
20
|
-
position: absolute;
|
|
21
|
-
inset: 0;
|
|
22
|
-
overflow: hidden;
|
|
23
|
-
pointer-events: none;
|
|
24
|
-
z-index: 2;
|
|
25
|
-
|
|
26
|
-
@include m.bem($root-name, (bar-x, bar-y)) {
|
|
27
|
-
pointer-events: auto;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
&:hover > {
|
|
31
|
-
@include m.bem($root-name, (bar-x, bar-y)) {
|
|
32
|
-
opacity: 1;
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
|
|
37
15
|
// 滚动容器
|
|
38
16
|
@include m.e(container) {
|
|
39
17
|
overflow: auto;
|
package/src/types/scroll.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { DeconstructValue } from '@veltra/utils'
|
|
2
|
-
import type { CSSProperties,
|
|
2
|
+
import type { CSSProperties, ShallowRef } from 'vue'
|
|
3
3
|
|
|
4
4
|
export type ScrollPosition = {
|
|
5
5
|
/** 横向位置 */
|
|
@@ -53,12 +53,6 @@ export interface ScrollProps {
|
|
|
53
53
|
|
|
54
54
|
/** 拖拽防抖时间 */
|
|
55
55
|
dragDebounce?: number
|
|
56
|
-
|
|
57
|
-
/**
|
|
58
|
-
* 外部滚动容器(如 EmbedPDF Viewport)。
|
|
59
|
-
* 提供时仅渲染自定义滚动条并同步该元素的滚动,不创建内部滚动容器。
|
|
60
|
-
*/
|
|
61
|
-
target?: MaybeRefOrGetter<HTMLElement | null | undefined>
|
|
62
56
|
}
|
|
63
57
|
|
|
64
58
|
export interface ScrollEmits {
|