routie dev init since i didn't adhere to any proper guidance up until now
This commit is contained in:
+12
@@ -0,0 +1,12 @@
|
||||
@layer vuetify-components {
|
||||
.v-virtual-scroll {
|
||||
display: block;
|
||||
flex: 1 1 auto;
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
}
|
||||
.v-virtual-scroll__container {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
+234
@@ -0,0 +1,234 @@
|
||||
|
||||
import type { PropType, Ref } from 'vue';
|
||||
import type { GenericProps } from '../../util/index.js';
|
||||
export interface VVirtualScrollSlot<T> {
|
||||
item: T;
|
||||
index: number;
|
||||
}
|
||||
export declare const makeVVirtualScrollProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
height?: unknown;
|
||||
maxHeight?: unknown;
|
||||
maxWidth?: unknown;
|
||||
minHeight?: unknown;
|
||||
minWidth?: unknown;
|
||||
width?: unknown;
|
||||
itemHeight?: unknown;
|
||||
itemKey?: unknown;
|
||||
items?: unknown;
|
||||
renderless?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
class: unknown extends Defaults["class"] ? PropType<any> : {
|
||||
type: PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | import("vue").StyleValue>;
|
||||
default: unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | NonNullable<import("vue").StyleValue>;
|
||||
};
|
||||
height: unknown extends Defaults["height"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["height"] ? string | number : string | number | Defaults["height"]>;
|
||||
default: unknown extends Defaults["height"] ? string | number : Defaults["height"] | NonNullable<string | number>;
|
||||
};
|
||||
maxHeight: unknown extends Defaults["maxHeight"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["maxHeight"] ? string | number : string | number | Defaults["maxHeight"]>;
|
||||
default: unknown extends Defaults["maxHeight"] ? string | number : Defaults["maxHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
maxWidth: unknown extends Defaults["maxWidth"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["maxWidth"] ? string | number : string | number | Defaults["maxWidth"]>;
|
||||
default: unknown extends Defaults["maxWidth"] ? string | number : Defaults["maxWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
minHeight: unknown extends Defaults["minHeight"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["minHeight"] ? string | number : string | number | Defaults["minHeight"]>;
|
||||
default: unknown extends Defaults["minHeight"] ? string | number : Defaults["minHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
minWidth: unknown extends Defaults["minWidth"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["minWidth"] ? string | number : string | number | Defaults["minWidth"]>;
|
||||
default: unknown extends Defaults["minWidth"] ? string | number : Defaults["minWidth"] | NonNullable<string | number>;
|
||||
};
|
||||
width: unknown extends Defaults["width"] ? (NumberConstructor | StringConstructor)[] : {
|
||||
type: PropType<unknown extends Defaults["width"] ? string | number : string | number | Defaults["width"]>;
|
||||
default: unknown extends Defaults["width"] ? string | number : Defaults["width"] | NonNullable<string | number>;
|
||||
};
|
||||
itemHeight: unknown extends Defaults["itemHeight"] ? {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["itemHeight"] ? string | number : string | number | Defaults["itemHeight"]>;
|
||||
default: unknown extends Defaults["itemHeight"] ? string | number : Defaults["itemHeight"] | NonNullable<string | number>;
|
||||
};
|
||||
itemKey: unknown extends Defaults["itemKey"] ? {
|
||||
type: PropType<import("../../util/index.js").SelectItemKey>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: PropType<import("../../util/index.js").SelectItemKey>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["itemKey"] ? import("../../util/index.js").SelectItemKey : Defaults["itemKey"] | import("../../util/index.js").SelectItemKey>;
|
||||
default: unknown extends Defaults["itemKey"] ? import("../../util/index.js").SelectItemKey : Defaults["itemKey"] | NonNullable<import("../../util/index.js").SelectItemKey>;
|
||||
};
|
||||
items: unknown extends Defaults["items"] ? {
|
||||
type: PropType<readonly unknown[]>;
|
||||
default: () => never[];
|
||||
} : Omit<{
|
||||
type: PropType<readonly unknown[]>;
|
||||
default: () => never[];
|
||||
}, "default" | "type"> & {
|
||||
type: PropType<unknown extends Defaults["items"] ? readonly unknown[] : readonly unknown[] | Defaults["items"]>;
|
||||
default: unknown extends Defaults["items"] ? readonly unknown[] : readonly unknown[] | Defaults["items"];
|
||||
};
|
||||
renderless: unknown extends Defaults["renderless"] ? BooleanConstructor : {
|
||||
type: PropType<unknown extends Defaults["renderless"] ? boolean : boolean | Defaults["renderless"]>;
|
||||
default: unknown extends Defaults["renderless"] ? boolean : boolean | Defaults["renderless"];
|
||||
};
|
||||
};
|
||||
export declare const VVirtualScroll: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
itemHeight: string | number;
|
||||
itemKey: string | boolean | readonly (string | number)[] | ((item: Record<string, any>, fallback?: any) => any) | null;
|
||||
} & {
|
||||
class?: any;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
}, {
|
||||
calculateVisibleItems: () => void;
|
||||
scrollToIndex: (index: number) => void;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "items" | "renderless" | "v-slot:default" | "v-slots">, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
itemHeight: string | number;
|
||||
itemKey: import("../../util/index.js").SelectItemKey;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: (arg: VVirtualScrollSlot<unknown> | (VVirtualScrollSlot<unknown> & {
|
||||
itemRef: Ref<HTMLElement | undefined>;
|
||||
})) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
itemHeight: string | number;
|
||||
itemKey: string | boolean | readonly (string | number)[] | ((item: Record<string, any>, fallback?: any) => any) | null;
|
||||
} & {
|
||||
class?: any;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
}, {
|
||||
calculateVisibleItems: () => void;
|
||||
scrollToIndex: (index: number) => void;
|
||||
}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
itemHeight: string | number;
|
||||
itemKey: import("../../util/index.js").SelectItemKey;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
itemHeight: string | number;
|
||||
itemKey: string | boolean | readonly (string | number)[] | ((item: Record<string, any>, fallback?: any) => any) | null;
|
||||
} & {
|
||||
class?: any;
|
||||
height?: string | number | undefined;
|
||||
maxHeight?: string | number | undefined;
|
||||
maxWidth?: string | number | undefined;
|
||||
minHeight?: string | number | undefined;
|
||||
minWidth?: string | number | undefined;
|
||||
width?: string | number | undefined;
|
||||
}, {
|
||||
calculateVisibleItems: () => void;
|
||||
scrollToIndex: (index: number) => void;
|
||||
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<Record<string, any>, "$children" | "items" | "renderless" | "v-slot:default" | "v-slots">, string, {
|
||||
style: import("vue").StyleValue;
|
||||
itemHeight: string | number;
|
||||
itemKey: import("../../util/index.js").SelectItemKey;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: (arg: VVirtualScrollSlot<unknown> | (VVirtualScrollSlot<unknown> & {
|
||||
itemRef: Ref<HTMLElement | undefined>;
|
||||
})) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new <T, Renderless extends boolean = false>(props: {
|
||||
items?: readonly T[];
|
||||
renderless?: Renderless;
|
||||
}, slots: {
|
||||
default: VVirtualScrollSlot<T> & (Renderless extends true ? {
|
||||
itemRef: Ref<HTMLElement | undefined>;
|
||||
} : {});
|
||||
}) => GenericProps<typeof props, typeof slots>) & import("../../util/index.js").FilterPropsOptions<{
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
itemHeight: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: null;
|
||||
};
|
||||
itemKey: {
|
||||
type: PropType<import("../../util/index.js").SelectItemKey>;
|
||||
default: null;
|
||||
};
|
||||
items: {
|
||||
type: PropType<readonly unknown[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
renderless: BooleanConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: PropType<import("../../composables/component.js").ClassValue>;
|
||||
style: {
|
||||
type: PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
height: (NumberConstructor | StringConstructor)[];
|
||||
maxHeight: (NumberConstructor | StringConstructor)[];
|
||||
maxWidth: (NumberConstructor | StringConstructor)[];
|
||||
minHeight: (NumberConstructor | StringConstructor)[];
|
||||
minWidth: (NumberConstructor | StringConstructor)[];
|
||||
width: (NumberConstructor | StringConstructor)[];
|
||||
itemHeight: {
|
||||
type: (NumberConstructor | StringConstructor)[];
|
||||
default: null;
|
||||
};
|
||||
itemKey: {
|
||||
type: PropType<import("../../util/index.js").SelectItemKey>;
|
||||
default: null;
|
||||
};
|
||||
items: {
|
||||
type: PropType<readonly unknown[]>;
|
||||
default: () => never[];
|
||||
};
|
||||
renderless: BooleanConstructor;
|
||||
}>>;
|
||||
export type VVirtualScroll = InstanceType<typeof VVirtualScroll>;
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
import { createVNode as _createVNode, Fragment as _Fragment, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle } from "vue";
|
||||
// Styles
|
||||
import "./VVirtualScroll.css";
|
||||
|
||||
// Components
|
||||
import { VVirtualScrollItem } from "./VVirtualScrollItem.js"; // Composables
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { makeDimensionProps, useDimension } from "../../composables/dimensions.js";
|
||||
import { useToggleScope } from "../../composables/toggleScope.js";
|
||||
import { makeVirtualProps, useVirtual } from "../../composables/virtual.js"; // Utilities
|
||||
import { onMounted, onScopeDispose, toRef } from 'vue';
|
||||
import { convertToUnit, genericComponent, getCurrentInstance, getScrollParent, IN_BROWSER, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVVirtualScrollProps = propsFactory({
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
renderless: Boolean,
|
||||
...makeVirtualProps(),
|
||||
...makeComponentProps(),
|
||||
...makeDimensionProps()
|
||||
}, 'VVirtualScroll');
|
||||
export const VVirtualScroll = genericComponent()({
|
||||
name: 'VVirtualScroll',
|
||||
props: makeVVirtualScrollProps(),
|
||||
setup(props, {
|
||||
slots
|
||||
}) {
|
||||
const vm = getCurrentInstance('VVirtualScroll');
|
||||
const {
|
||||
dimensionStyles
|
||||
} = useDimension(props);
|
||||
const {
|
||||
calculateVisibleItems,
|
||||
containerRef,
|
||||
markerRef,
|
||||
handleScroll,
|
||||
handleScrollend,
|
||||
handleItemResize,
|
||||
scrollToIndex,
|
||||
paddingTop,
|
||||
paddingBottom,
|
||||
computedItems
|
||||
} = useVirtual(props, toRef(() => props.items));
|
||||
useToggleScope(() => props.renderless, () => {
|
||||
function handleListeners(add = false) {
|
||||
const method = add ? 'addEventListener' : 'removeEventListener';
|
||||
if (!IN_BROWSER) return;
|
||||
if (containerRef.value === document.documentElement) {
|
||||
document[method]('scroll', handleScroll, {
|
||||
passive: true
|
||||
});
|
||||
document[method]('scrollend', handleScrollend);
|
||||
} else {
|
||||
containerRef.value?.[method]('scroll', handleScroll, {
|
||||
passive: true
|
||||
});
|
||||
containerRef.value?.[method]('scrollend', handleScrollend);
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
containerRef.value = getScrollParent(vm.vnode.el, true);
|
||||
handleListeners(true);
|
||||
});
|
||||
onScopeDispose(handleListeners);
|
||||
});
|
||||
useRender(() => {
|
||||
const children = computedItems.value.map(item => _createVNode(VVirtualScrollItem, {
|
||||
"key": item.key,
|
||||
"renderless": props.renderless,
|
||||
"onUpdate:height": height => handleItemResize(item.index, height)
|
||||
}, {
|
||||
default: slotProps => slots.default?.({
|
||||
item: item.raw,
|
||||
index: item.index,
|
||||
...slotProps
|
||||
})
|
||||
}));
|
||||
return props.renderless ? _createElementVNode(_Fragment, null, [_createElementVNode("div", {
|
||||
"ref": markerRef,
|
||||
"class": "v-virtual-scroll__spacer",
|
||||
"style": {
|
||||
paddingTop: convertToUnit(paddingTop.value)
|
||||
}
|
||||
}, null), children, _createElementVNode("div", {
|
||||
"class": "v-virtual-scroll__spacer",
|
||||
"style": {
|
||||
paddingBottom: convertToUnit(paddingBottom.value)
|
||||
}
|
||||
}, null)]) : _createElementVNode("div", {
|
||||
"ref": containerRef,
|
||||
"class": _normalizeClass(['v-virtual-scroll', props.class]),
|
||||
"onScrollPassive": handleScroll,
|
||||
"onScrollend": handleScrollend,
|
||||
"style": _normalizeStyle([dimensionStyles.value, props.style])
|
||||
}, [_createElementVNode("div", {
|
||||
"ref": markerRef,
|
||||
"class": "v-virtual-scroll__container",
|
||||
"style": {
|
||||
paddingTop: convertToUnit(paddingTop.value),
|
||||
paddingBottom: convertToUnit(paddingBottom.value)
|
||||
}
|
||||
}, [children])]);
|
||||
});
|
||||
return {
|
||||
calculateVisibleItems,
|
||||
scrollToIndex
|
||||
};
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VVirtualScroll.js.map
|
||||
Generated
Vendored
+1
File diff suppressed because one or more lines are too long
+12
@@ -0,0 +1,12 @@
|
||||
@use '../../styles/tools'
|
||||
|
||||
@include tools.layer('components')
|
||||
.v-virtual-scroll
|
||||
display: block
|
||||
flex: 1 1 auto
|
||||
max-width: 100%
|
||||
overflow: auto
|
||||
position: relative
|
||||
|
||||
&__container
|
||||
display: block
|
||||
Generated
Vendored
+98
@@ -0,0 +1,98 @@
|
||||
import type { GenericProps, TemplateRef } from '../../util/index.js';
|
||||
export declare const makeVVirtualScrollItemProps: <Defaults extends {
|
||||
class?: unknown;
|
||||
style?: unknown;
|
||||
renderless?: unknown;
|
||||
} = {}>(defaults?: Defaults | undefined) => {
|
||||
class: unknown extends Defaults["class"] ? import("vue").PropType<any> : {
|
||||
type: import("vue").PropType<unknown extends Defaults["class"] ? any : any>;
|
||||
default: unknown extends Defaults["class"] ? any : any;
|
||||
};
|
||||
style: unknown extends Defaults["style"] ? {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
} : Omit<{
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
}, "default" | "type"> & {
|
||||
type: import("vue").PropType<unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | import("vue").StyleValue>;
|
||||
default: unknown extends Defaults["style"] ? import("vue").StyleValue : Defaults["style"] | NonNullable<import("vue").StyleValue>;
|
||||
};
|
||||
renderless: unknown extends Defaults["renderless"] ? BooleanConstructor : {
|
||||
type: import("vue").PropType<unknown extends Defaults["renderless"] ? boolean : boolean | Defaults["renderless"]>;
|
||||
default: unknown extends Defaults["renderless"] ? boolean : boolean | Defaults["renderless"];
|
||||
};
|
||||
};
|
||||
export declare const VVirtualScrollItem: {
|
||||
new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
"onUpdate:height"?: ((height: number) => any) | undefined;
|
||||
}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<{
|
||||
'update:height': (height: number) => true;
|
||||
}, "$children" | "renderless" | "v-slot:default" | "v-slots">, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, {
|
||||
style: import("vue").StyleValue;
|
||||
}, true, {}, import("vue").SlotsType<Partial<{
|
||||
default: (arg: {
|
||||
itemRef: TemplateRef;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
|
||||
P: {};
|
||||
B: {};
|
||||
D: {};
|
||||
C: {};
|
||||
M: {};
|
||||
Defaults: {};
|
||||
}, {
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
"onUpdate:height"?: ((height: number) => any) | undefined;
|
||||
}, {}, {}, {}, {}, {
|
||||
style: import("vue").StyleValue;
|
||||
}>;
|
||||
__isFragment?: never;
|
||||
__isTeleport?: never;
|
||||
__isSuspense?: never;
|
||||
} & import("vue").ComponentOptionsBase<{
|
||||
style: string | false | import("vue").StyleValue[] | import("vue").CSSProperties | null;
|
||||
} & {
|
||||
class?: any;
|
||||
} & {
|
||||
"onUpdate:height"?: ((height: number) => any) | undefined;
|
||||
}, void, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Omit<{
|
||||
'update:height': (height: number) => true;
|
||||
}, "$children" | "renderless" | "v-slot:default" | "v-slots">, string, {
|
||||
style: import("vue").StyleValue;
|
||||
}, {}, string, import("vue").SlotsType<Partial<{
|
||||
default: (arg: {
|
||||
itemRef: TemplateRef;
|
||||
}) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
}>>, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new <Renderless extends boolean = false>(props: {
|
||||
renderless?: Renderless;
|
||||
}, slots: {
|
||||
default: Renderless extends true ? {
|
||||
itemRef: TemplateRef;
|
||||
} : never;
|
||||
}) => GenericProps<typeof props, typeof slots>) & import("../../util/index.js").FilterPropsOptions<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
renderless: BooleanConstructor;
|
||||
}, import("vue").ExtractPropTypes<{
|
||||
class: import("vue").PropType<any>;
|
||||
style: {
|
||||
type: import("vue").PropType<import("vue").StyleValue>;
|
||||
default: null;
|
||||
};
|
||||
renderless: BooleanConstructor;
|
||||
}>>;
|
||||
Generated
Vendored
+39
@@ -0,0 +1,39 @@
|
||||
import { Fragment as _Fragment, createElementVNode as _createElementVNode, mergeProps as _mergeProps } from "vue";
|
||||
// Composables
|
||||
import { makeComponentProps } from "../../composables/component.js";
|
||||
import { useResizeObserver } from "../../composables/resizeObserver.js"; // Utilities
|
||||
import { watch } from 'vue';
|
||||
import { genericComponent, propsFactory, useRender } from "../../util/index.js"; // Types
|
||||
export const makeVVirtualScrollItemProps = propsFactory({
|
||||
renderless: Boolean,
|
||||
...makeComponentProps()
|
||||
}, 'VVirtualScrollItem');
|
||||
export const VVirtualScrollItem = genericComponent()({
|
||||
name: 'VVirtualScrollItem',
|
||||
inheritAttrs: false,
|
||||
props: makeVVirtualScrollItemProps(),
|
||||
emits: {
|
||||
'update:height': height => true
|
||||
},
|
||||
setup(props, {
|
||||
attrs,
|
||||
emit,
|
||||
slots
|
||||
}) {
|
||||
const {
|
||||
resizeRef,
|
||||
contentRect
|
||||
} = useResizeObserver(undefined, 'border');
|
||||
watch(() => contentRect.value?.height, height => {
|
||||
if (height != null) emit('update:height', height);
|
||||
});
|
||||
useRender(() => props.renderless ? _createElementVNode(_Fragment, null, [slots.default?.({
|
||||
itemRef: resizeRef
|
||||
})]) : _createElementVNode("div", _mergeProps({
|
||||
"ref": resizeRef,
|
||||
"class": ['v-virtual-scroll__item', props.class],
|
||||
"style": props.style
|
||||
}, attrs), [slots.default?.()]));
|
||||
}
|
||||
});
|
||||
//# sourceMappingURL=VVirtualScrollItem.js.map
|
||||
Generated
Vendored
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"VVirtualScrollItem.js","names":["makeComponentProps","useResizeObserver","watch","genericComponent","propsFactory","useRender","makeVVirtualScrollItemProps","renderless","Boolean","VVirtualScrollItem","name","inheritAttrs","props","emits","height","setup","attrs","emit","slots","resizeRef","contentRect","undefined","value","_createElementVNode","_Fragment","default","itemRef","_mergeProps","class","style"],"sources":["../../../src/components/VVirtualScroll/VVirtualScrollItem.tsx"],"sourcesContent":["// Composables\nimport { makeComponentProps } from '@/composables/component'\nimport { useResizeObserver } from '@/composables/resizeObserver'\n\n// Utilities\nimport { watch } from 'vue'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { GenericProps, TemplateRef } from '@/util'\n\nexport const makeVVirtualScrollItemProps = propsFactory({\n renderless: Boolean,\n\n ...makeComponentProps(),\n}, 'VVirtualScrollItem')\n\nexport const VVirtualScrollItem = genericComponent<new <Renderless extends boolean = false>(\n props: {\n renderless?: Renderless\n },\n slots: {\n default: Renderless extends true ? {\n itemRef: TemplateRef\n } : never\n }\n) => GenericProps<typeof props, typeof slots>>()({\n name: 'VVirtualScrollItem',\n\n inheritAttrs: false,\n\n props: makeVVirtualScrollItemProps(),\n\n emits: {\n 'update:height': (height: number) => true,\n },\n\n setup (props, { attrs, emit, slots }) {\n const { resizeRef, contentRect } = useResizeObserver(undefined, 'border')\n\n watch(() => contentRect.value?.height, height => {\n if (height != null) emit('update:height', height)\n })\n\n useRender(() => props.renderless ? (\n <>\n { slots.default?.({ itemRef: resizeRef }) }\n </>\n ) : (\n <div\n ref={ resizeRef }\n class={[\n 'v-virtual-scroll__item',\n props.class,\n ]}\n style={ props.style }\n { ...attrs }\n >\n { (slots.default as any)?.() }\n </div>\n ))\n },\n})\n"],"mappings":";AAAA;AAAA,SACSA,kBAAkB;AAAA,SAClBC,iBAAiB,+CAE1B;AACA,SAASC,KAAK,QAAQ,KAAK;AAAA,SAClBC,gBAAgB,EAAEC,YAAY,EAAEC,SAAS,+BAElD;AAGA,OAAO,MAAMC,2BAA2B,GAAGF,YAAY,CAAC;EACtDG,UAAU,EAAEC,OAAO;EAEnB,GAAGR,kBAAkB,CAAC;AACxB,CAAC,EAAE,oBAAoB,CAAC;AAExB,OAAO,MAAMS,kBAAkB,GAAGN,gBAAgB,CASH,CAAC,CAAC;EAC/CO,IAAI,EAAE,oBAAoB;EAE1BC,YAAY,EAAE,KAAK;EAEnBC,KAAK,EAAEN,2BAA2B,CAAC,CAAC;EAEpCO,KAAK,EAAE;IACL,eAAe,EAAGC,MAAc,IAAK;EACvC,CAAC;EAEDC,KAAKA,CAAEH,KAAK,EAAE;IAAEI,KAAK;IAAEC,IAAI;IAAEC;EAAM,CAAC,EAAE;IACpC,MAAM;MAAEC,SAAS;MAAEC;IAAY,CAAC,GAAGnB,iBAAiB,CAACoB,SAAS,EAAE,QAAQ,CAAC;IAEzEnB,KAAK,CAAC,MAAMkB,WAAW,CAACE,KAAK,EAAER,MAAM,EAAEA,MAAM,IAAI;MAC/C,IAAIA,MAAM,IAAI,IAAI,EAAEG,IAAI,CAAC,eAAe,EAAEH,MAAM,CAAC;IACnD,CAAC,CAAC;IAEFT,SAAS,CAAC,MAAMO,KAAK,CAACL,UAAU,GAAAgB,mBAAA,CAAAC,SAAA,SAE1BN,KAAK,CAACO,OAAO,GAAG;MAAEC,OAAO,EAAEP;IAAU,CAAC,CAAC,KAAAI,mBAAA,QAAAI,WAAA;MAAA,OAInCR,SAAS;MAAA,SACR,CACL,wBAAwB,EACxBP,KAAK,CAACgB,KAAK,CACZ;MAAA,SACOhB,KAAK,CAACiB;IAAK,GACdb,KAAK,IAEPE,KAAK,CAACO,OAAO,GAAW,CAAC,EAE/B,CAAC;EACJ;AACF,CAAC,CAAC","ignoreList":[]}
|
||||
+1
@@ -0,0 +1 @@
|
||||
export { VVirtualScroll } from './VVirtualScroll.js';
|
||||
+2
@@ -0,0 +1,2 @@
|
||||
export { VVirtualScroll } from "./VVirtualScroll.js";
|
||||
//# sourceMappingURL=index.js.map
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","names":["VVirtualScroll"],"sources":["../../../src/components/VVirtualScroll/index.ts"],"sourcesContent":["export { VVirtualScroll } from './VVirtualScroll'\n"],"mappings":"SAASA,cAAc","ignoreList":[]}
|
||||
Reference in New Issue
Block a user