@geode/opengeodeweb-front 10.34.0-rc.9 → 10.34.0

package/app/composables/project_manager.ts

@@ -2,18 +2,50 @@ import back_schemas from "@geode/opengeodeweb-back/opengeodeweb_back_schemas.jso
 import fileDownload from "js-file-download";
 import viewer_schemas from "@geode/opengeodeweb-viewer/opengeodeweb_viewer_schemas.json";
 
+import { type DataStyleSnapshot, useDataStyleStore } from "@ogw_front/stores/data_style";
+import { type NewDataItem, useDataStore } from "@ogw_front/stores/data";
+import { type TreeviewSnapshot, useTreeviewStore } from "@ogw_front/stores/treeview";
+import type { CameraSnapshot } from "@ogw_internal/stores/hybrid_viewer/camera";
+import type { ModelComponentRecord } from "@ogw_front/stores/data_helpers/mesh.js";
+import type { ModelComponentRelationRecord } from "@ogw_front/stores/data.js";
 import { fetchRaw } from "@ogw_shared/utils/fetch_raw";
 import { importWorkflowFromSnapshot } from "@ogw_front/utils/import_workflow";
 import { useAppStore } from "@ogw_front/stores/app";
 import { useBackStore } from "@ogw_front/stores/back";
-import { useDataStore } from "@ogw_front/stores/data";
-import { useDataStyleStore } from "@ogw_front/stores/data_style";
 import { useFeedbackStore } from "@ogw_front/stores/feedback";
 import { useHybridViewerStore } from "@ogw_front/stores/hybrid_viewer";
-import { useTreeviewStore } from "@ogw_front/stores/treeview";
 import { useViewerStore } from "@ogw_front/stores/viewer";
 
-async function exportProject() {
+interface ProjectDataSnapshot {
+  items: NewDataItem[];
+  modelComponents: ModelComponentRecord[];
+  modelComponentsRelations: ModelComponentRelationRecord[];
+}
+
+interface ProjectSnapshot {
+  treeview?: TreeviewSnapshot;
+  data?: ProjectDataSnapshot;
+  hybridViewer?: CameraSnapshot;
+  dataStyle?: DataStyleSnapshot;
+}
+
+// The backend response is an untyped network payload; this is the one place its shape is asserted.
+function isImportSnapshotResponse(value: unknown): value is { snapshot?: ProjectSnapshot } {
+  return typeof value === "object" && value !== null;
+}
+
+function isFileDownloadData(
+  value: unknown,
+): value is string | ArrayBuffer | ArrayBufferView | Blob {
+  return (
+    typeof value === "string" ||
+    value instanceof ArrayBuffer ||
+    ArrayBuffer.isView(value) ||
+    value instanceof Blob
+  );
+}
+
+async function exportProject(): Promise<{ result: unknown }> {
   console.log("[export triggered]");
   const appStore = useAppStore();
   const backStore = useBackStore();
@@ -29,11 +61,38 @@ async function exportProject() {
     baseURL: backStore.base_url,
   });
 
+  if (!isFileDownloadData(result)) {
+    throw new Error("Unexpected export_project response type");
+  }
   fileDownload(result, defaultName);
   feedbackStore.add_success("Project exported successfully");
   return { result };
 }
 
+async function releaseViewerDatabase(
+  client: ReturnType<typeof useViewerStore>["client"],
+): Promise<void> {
+  if (
+    client !== undefined &&
+    client.getConnection !== undefined &&
+    client.getConnection().getSession !== undefined
+  ) {
+    await client.getConnection().getSession().call("opengeodeweb_viewer.release_database", [{}]);
+  }
+}
+
+async function importProjectToViewer(
+  client: ReturnType<typeof useViewerStore>["client"],
+): Promise<void> {
+  if (
+    client !== undefined &&
+    client.getConnection !== undefined &&
+    client.getConnection().getSession !== undefined
+  ) {
+    await client.getConnection().getSession().call("opengeodeweb_viewer.import_project", [{}]);
+  }
+}
+
 async function importProject(file: File): Promise<void> {
   const backStore = useBackStore();
   const dataStyleStore = useDataStyleStore();
@@ -44,21 +103,18 @@ async function importProject(file: File): Promise<void> {
 
   await viewerStore.ws_connect();
 
-  const { client } = viewerStore;
-  if (client && client.getConnection && client.getConnection().getSession) {
-    await client.getConnection().getSession().call("opengeodeweb_viewer.release_database", [{}]);
-  }
+  await releaseViewerDatabase(viewerStore.client);
   const resetVisualizationSchema = viewer_schemas.opengeodeweb_viewer.viewer.reset_visualization;
   const timeout = undefined;
   await viewerStore.request({ schema: resetVisualizationSchema, timeout });
 
   treeviewStore.clear();
-  dataStore.clear();
+  await dataStore.clear();
   hybridViewerStore.clear();
 
   const importProjectSchema = back_schemas.opengeodeweb_back.import_project;
   const form = new FormData();
-  const originalFileName = file && file.name ? file.name : "project.vease";
+  const originalFileName = file.name.length > 0 ? file.name : "project.vease";
   if (!originalFileName.toLowerCase().endsWith(".vease")) {
     throw new Error("Uploaded file must be a .vease");
   }
@@ -70,23 +126,24 @@ async function importProject(file: File): Promise<void> {
     method: importProjectSchema.methods[0],
     baseURL: backStore.base_url,
   });
-  const snapshot = result && result.snapshot ? result.snapshot : {};
+  const snapshot = (isImportSnapshotResponse(result) ? result.snapshot : undefined) ?? {};
 
   treeviewStore.isImporting = true;
 
-  const { client: client2 } = viewerStore;
-  if (client2 && client2.getConnection && client2.getConnection().getSession) {
-    await client2.getConnection().getSession().call("opengeodeweb_viewer.import_project", [{}]);
-  }
+  await importProjectToViewer(viewerStore.client);
 
-  await treeviewStore.importStores(snapshot.treeview);
-  await dataStore.importStores(snapshot.data);
+  treeviewStore.importStores(snapshot.treeview);
+  if (snapshot.data !== undefined) {
+    await dataStore.importStores(snapshot.data);
+  }
   await hybridViewerStore.initHybridViewer();
 
-  const items = snapshot?.data?.items || [];
+  const items = snapshot.data?.items ?? [];
   await importWorkflowFromSnapshot(items);
   await hybridViewerStore.importStores(snapshot.hybridViewer);
-  await dataStyleStore.importStores(snapshot.dataStyle);
+  if (snapshot.dataStyle !== undefined) {
+    await dataStyleStore.importStores(snapshot.dataStyle);
+  }
   await dataStyleStore.applyAllStylesFromState();
 
   treeviewStore.finalizeImportSelection();

package/app/composables/responsive_middle_truncate.ts

@@ -1,7 +1,4 @@
-// Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
-// oxlint-disable eslint/sort-imports
 import { middleTruncate } from "@ogw_front/utils/string";
-import type { MaybeRefOrGetter } from "vue";
 
 const UUID_END_CHARS = 12;
 const ELLIPSIS_LENGTH = 3;
@@ -9,17 +6,20 @@ const MIN_START_CHARS = 4;
 const DEFAULT_ESTIMATED_CHAR_WIDTH = 8.5;
 
 interface ResponsiveMiddleTruncateOptions {
-  estimatedCharWidth?: number;
-  uuidEndChars?: number;
-  ellipsisLength?: number;
-  minStartChars?: number;
+  readonly estimatedCharWidth?: number;
+  readonly uuidEndChars?: number;
+  readonly ellipsisLength?: number;
+  readonly minStartChars?: number;
 }
 
+// Same shape as Vue's MaybeRefOrGetter<T>, kept as a local alias for readability at call sites.
+type ReadonlyMaybeRefOrGetter<Value> = Value | Ref<Value> | (() => Value);
+
 export function useResponsiveMiddleTruncate(
-  textRef: MaybeRefOrGetter<string | undefined | null>,
-  containerWidthRef: MaybeRefOrGetter<number | undefined>,
+  textRef: ReadonlyMaybeRefOrGetter<string | undefined | null>,
+  containerWidthRef: ReadonlyMaybeRefOrGetter<number | undefined>,
   options: ResponsiveMiddleTruncateOptions = {},
-) {
+): ComputedRef<string> {
   const {
     estimatedCharWidth = DEFAULT_ESTIMATED_CHAR_WIDTH,
     uuidEndChars = UUID_END_CHARS,
@@ -29,11 +29,11 @@ export function useResponsiveMiddleTruncate(
 
   return computed(() => {
     const text = toValue(textRef);
-    if (!text) {
+    if (text === undefined || text === null || text === "") {
       return "";
     }
 
-    const width = toValue(containerWidthRef) || 0;
+    const width = toValue(containerWidthRef) ?? 0;
     const maxChars = Math.floor(width / estimatedCharWidth);
 
     if (maxChars <= 0 || text.length <= maxChars) {
@@ -43,6 +43,6 @@ export function useResponsiveMiddleTruncate(
     const endChars = Math.min(uuidEndChars, Math.floor(maxChars / ellipsisLength));
     const startChars = Math.max(minStartChars, maxChars - endChars - ellipsisLength);
 
-    return middleTruncate(text, maxChars, startChars, endChars);
+    return middleTruncate(text, maxChars, startChars, endChars) ?? "";
   });
 }

package/app/composables/stepper_tree.ts

@@ -1,13 +1,36 @@
-export function useStepperTree(steps: unknown[], initial_state: Record<string, unknown> = {}) {
+interface StepperTreeApi {
+  state: Record<string, unknown>;
+  update_values: (keys_values_object: Record<string, unknown>) => void;
+  increment_step: () => void;
+  decrement_step: () => void;
+  reset_values: () => void;
+}
+
+function isUnknownArray(value: unknown): value is unknown[] {
+  return Array.isArray(value);
+}
+
+function get_current_step_index(state: Record<string, unknown>): number {
+  const value = state.current_step_index;
+  return typeof value === "number" ? value : 0;
+}
+
+function build_initial_state_unref(
+  initial_state: Record<string, unknown>,
+): Record<string, unknown> {
   const initial_state_unref: Record<string, unknown> = {};
   for (const [key, value] of Object.entries(initial_state)) {
-    const unref_val = unref(value);
-    if (Array.isArray(unref_val)) {
-      initial_state_unref[key] = [...unref_val];
-    } else {
-      initial_state_unref[key] = unref_val;
-    }
+    const unref_val: unknown = unref(value);
+    initial_state_unref[key] = isUnknownArray(unref_val) ? [...unref_val] : unref_val;
   }
+  return initial_state_unref;
+}
+
+export function useStepperTree(
+  steps: readonly unknown[],
+  initial_state: Record<string, unknown> = {},
+): StepperTreeApi {
+  const initial_state_unref = build_initial_state_unref(initial_state);
   const state = reactive<Record<string, unknown>>({
     current_step_index: 0,
     navigating_back: false,
@@ -16,7 +39,7 @@ export function useStepperTree(steps: unknown[], initial_state: Record<string, u
   });
 
   watch(
-    () => state.current_step_index as number,
+    () => get_current_step_index(state),
     (newVal, oldVal) => {
       if (newVal < oldVal) {
         state.navigating_back = true;
@@ -31,18 +54,18 @@ export function useStepperTree(steps: unknown[], initial_state: Record<string, u
   }
 
   function increment_step(): void {
-    (state.current_step_index as number) += 1;
+    state.current_step_index = get_current_step_index(state) + 1;
   }
 
   function decrement_step(): void {
-    (state.current_step_index as number) -= 1;
+    state.current_step_index = get_current_step_index(state) - 1;
   }
 
   function reset_values(): void {
     state.current_step_index = 0;
     state.navigating_back = false;
     for (const [key, initial_val] of Object.entries(initial_state_unref)) {
-      state[key] = Array.isArray(initial_val) ? [...initial_val] : initial_val;
+      state[key] = isUnknownArray(initial_val) ? [...initial_val] : initial_val;
     }
   }
 

package/app/composables/tree_filter.ts

@@ -1,20 +1,37 @@
-import type { MaybeRefOrGetter } from "vue";
+import type { Ref } from "vue";
+
+// Same shape as Vue's MaybeRefOrGetter<T>, kept as a local alias for readability at call sites.
+type ReadonlyMaybeRefOrGetter<Value> = Value | Ref<Value> | (() => Value);
 
 // This composable filters/sorts different flavors of "category with children" trees (treeview groups, model component/collection groups, ...); this shape captures just the fields it reads/writes, generically, across all of them.
 interface FilterableItem {
-  id: unknown;
-  title?: string;
-  children?: FilterableItem[];
+  readonly id: unknown;
+  readonly title?: string;
+  readonly children?: readonly FilterableItem[];
 }
 
 interface FilterContext {
-  raw?: FilterableItem;
+  readonly raw?: FilterableItem;
 }
 
 interface TreeFilterOptions {
-  recursiveSort?: boolean;
-  defaultSort?: string;
-  defaultFilters?: Record<string, boolean>;
+  readonly recursiveSort?: boolean;
+  readonly defaultSort?: string;
+  readonly defaultFilters?: Record<string, boolean>;
+}
+
+interface UseTreeFilterReturn {
+  search: Ref<string>;
+  sortType: Ref<string>;
+  filterOptions: Ref<Record<string, boolean>>;
+  processedItems: ComputedRef<FilterableItem[]>;
+  availableFilterOptions: ComputedRef<string[]>;
+  toggleSort: () => void;
+  customFilter: typeof customFilter;
+  applySearchFilter: (
+    newSelection: readonly unknown[],
+    previousSelection?: readonly unknown[],
+  ) => unknown[];
 }
 
 function customFilter(
@@ -22,37 +39,50 @@ function customFilter(
   searchQuery: string | undefined,
   item: FilterContext,
 ): boolean {
-  if (!searchQuery) {
+  if (searchQuery === undefined || searchQuery === "") {
     return true;
   }
-  if (!item || !item.raw) {
+  if (!item.raw) {
     return false;
   }
   const query = searchQuery.toLowerCase();
-  const { title = "", id = value } = item.raw || {};
+  const { title = "", id = value } = item.raw;
   return [title, id].some((field) => String(field).toLowerCase().includes(query));
 }
 
+// Extracted so we never call String() directly on a value typed as `unknown`/`any`.
+// The `id` field can be anything at runtime, so only stringify primitives that have a sane toString.
+// Anything else falls back to "" instead of risking "[object Object]".
+function toSortKey(item: FilterableItem, field: "title" | "id"): string {
+  const raw = item[field] ?? item.id ?? "";
+  if (typeof raw === "string" || typeof raw === "number" || typeof raw === "boolean") {
+    return String(raw);
+  }
+  return "";
+}
+
 function sortAndFormatItems(
-  itemList: FilterableItem[] | undefined | null,
+  itemList: readonly FilterableItem[] | undefined | null,
   sortType: string,
   options: TreeFilterOptions = {},
 ): FilterableItem[] {
-  if (!itemList || !Array.isArray(itemList)) {
+  if (!itemList) {
     return [];
   }
   const field: "title" | "id" = sortType === "name" ? "title" : "id";
   const localeOptions: Intl.CollatorOptions = { numeric: true, sensitivity: "base" };
 
-  const sorted = itemList
+  // Copy into a plain mutable array up front: chaining .filter()/.toSorted() straight off the
+  // Readonly-typed parameter (previously combined with an Array.isArray guard here) has been
+  // Observed to make oxlint's type-aware analysis silently widen the result to `any[]`.
+  const items: FilterableItem[] = [...itemList];
+  const sorted = items
     .filter((item) => item !== null && item !== undefined)
-    .toSorted((itemA, itemB) => {
-      const fieldA = String(itemA[field] || itemA.id || "");
-      const fieldB = String(itemB[field] || itemB.id || "");
-      return fieldA.localeCompare(fieldB, undefined, localeOptions);
-    });
+    .toSorted((itemA, itemB) =>
+      toSortKey(itemA, field).localeCompare(toSortKey(itemB, field), undefined, localeOptions),
+    );
 
-  if (options.recursiveSort) {
+  if (options.recursiveSort === true) {
     return sorted.map((item) => {
       if (item.children && item.children.length > 0) {
         return {
@@ -67,39 +97,31 @@ function sortAndFormatItems(
 }
 
 function useTreeFilter(
-  itemsIn: MaybeRefOrGetter<FilterableItem[]>,
+  itemsIn: ReadonlyMaybeRefOrGetter<readonly FilterableItem[]>,
   options: TreeFilterOptions = {},
-) {
+): UseTreeFilterReturn {
   const rawItems = typeof itemsIn === "function" ? computed(itemsIn) : toRef(itemsIn);
   const search = ref("");
-  const sortType = ref(options.defaultSort || "name");
-  const filterOptions = ref<Record<string, boolean>>(options.defaultFilters || {});
+  const sortType = ref(options.defaultSort ?? "name");
+  const filterOptions = ref<Record<string, boolean>>({ ...options.defaultFilters });
 
-  const availableFilterOptions = computed(() => {
-    if (!rawItems.value) {
-      return [];
-    }
-    return rawItems.value.map((category) => String(category.title || category.id));
-  });
+  const availableFilterOptions = computed(() =>
+    rawItems.value.map((category) => String(category.title ?? category.id)),
+  );
 
   watch(
     availableFilterOptions,
-    (newOptions) => {
+    (newOptions: readonly string[]) => {
       for (const option of newOptions) {
-        if (filterOptions.value[option] === undefined) {
-          filterOptions.value[option] = true;
-        }
+        filterOptions.value[option] ??= true;
       }
     },
     { immediate: true },
   );
 
   const processedItems = computed(() => {
-    if (!rawItems.value) {
-      return [];
-    }
     const filteredByCategory = rawItems.value.filter((category) => {
-      const key = String(category.title || category.id);
+      const key = String(category.title ?? category.id);
       return filterOptions.value[key] !== false;
     });
 
@@ -111,7 +133,7 @@ function useTreeFilter(
 
     const result: FilterableItem[] = [];
     for (const category of sorted) {
-      const children = (category.children || []).filter((child) =>
+      const children = (category.children ?? []).filter((child) =>
         customFilter(child.id, search.value, { raw: child }),
       );
       if (children.length > 0 || customFilter(category.id, search.value, { raw: category })) {
@@ -127,7 +149,7 @@ function useTreeFilter(
 
   const allItems = computed(() => {
     const map = new Map<unknown, FilterableItem>();
-    function traverse(items: FilterableItem[]): void {
+    function traverse(items: readonly FilterableItem[]): void {
       for (const item of items) {
         map.set(item.id, item);
         if (item.children) {
@@ -135,16 +157,16 @@ function useTreeFilter(
         }
       }
     }
-    traverse(rawItems.value || []);
+    traverse(rawItems.value);
     return map;
   });
 
   function applySearchFilter(
-    newSelection: unknown[],
-    previousSelection: unknown[] = [],
+    newSelection: readonly unknown[],
+    previousSelection: readonly unknown[] = [],
   ): unknown[] {
     if (!search.value) {
-      return newSelection;
+      return [...newSelection];
     }
     const allItemsMap = allItems.value;
     function matches(id: unknown): boolean {

package/app/composables/tree_keyboard_nav.ts

@@ -1,6 +1,3 @@
-// Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
-// oxlint-disable eslint/sort-imports
-import type { Ref } from "vue";
 import type { DisplayItem, EmitFn } from "./virtual_tree";
 
 interface VisibleBounds {
@@ -14,6 +11,20 @@ interface ScrollInfo {
   itemHeight: number;
 }
 
+type ReadonlyDisplayItem = Omit<DisplayItem, "raw"> & {
+  readonly raw: Record<string, unknown>;
+};
+
+interface KeyboardEventLike {
+  readonly key: string;
+  preventDefault: () => void;
+}
+
+interface UseTreeKeyboardNavReturn {
+  focusedIndex: Ref<number>;
+  handleKeyDown: (event: KeyboardEventLike) => void;
+}
+
 function getBaseIndex(
   currentIndex: number,
   lastIndex: number,
@@ -38,17 +49,17 @@ function getBaseIndex(
 }
 
 export function useTreeKeyboardNav(
-  displayItems: Ref<DisplayItem[]>,
+  displayItems: Ref<readonly ReadonlyDisplayItem[]>,
   emit: EmitFn,
   scrollToIndex: (index: number) => void,
   toggleOpen: (raw: Record<string, unknown>) => void,
-  handleItemClick: (item: DisplayItem, index: number) => void,
+  handleItemClick: (item: ReadonlyDisplayItem, index: number) => void,
   getScrollInfo: (() => ScrollInfo | undefined) | undefined,
   externalFocusedIndex: Ref<number> | undefined,
-) {
-  const focusedIndex = externalFocusedIndex || ref(-1);
+): UseTreeKeyboardNavReturn {
+  const focusedIndex = externalFocusedIndex ?? ref(-1);
 
-  function findParentIndex(item: DisplayItem, currentIndex: number): number {
+  function findParentIndex(item: ReadonlyDisplayItem, currentIndex: number): number {
     for (let index = currentIndex - 1; index >= 0; index -= 1) {
       const candidate = displayItems.value[index];
       if (candidate && candidate.depth < item.depth) {
@@ -74,7 +85,7 @@ export function useTreeKeyboardNav(
   }
 
   function handleExpandOrNext(
-    item: DisplayItem | undefined,
+    item: ReadonlyDisplayItem | undefined,
     currentIndex: number,
     lastIndex: number,
   ): number {
@@ -85,7 +96,10 @@ export function useTreeKeyboardNav(
     return Math.min(currentIndex + 1, lastIndex);
   }
 
-  function handleCollapseOrParent(item: DisplayItem | undefined, currentIndex: number): number {
+  function handleCollapseOrParent(
+    item: ReadonlyDisplayItem | undefined,
+    currentIndex: number,
+  ): number {
     if (item && !item.isLeaf && item.isOpen) {
       toggleOpen(item.raw);
       return currentIndex;
@@ -129,7 +143,7 @@ export function useTreeKeyboardNav(
     return currentIndex;
   }
 
-  function handleKeyDown(event: KeyboardEvent): void {
+  function handleKeyDown(event: KeyboardEventLike): void {
     if (displayItems.value.length === 0) {
       return;
     }

package/app/composables/tree_scroll.ts

@@ -1,6 +1,3 @@
-// Not auto-fixable (eslint's sort-imports core rule has no autofixer) and this file's import order doesn't match its syntax-kind-then-alphabetical requirement - left as-is rather than manually reordered across the codebase for a purely cosmetic rule.
-// oxlint-disable eslint/sort-imports
-import type { MaybeRefOrGetter, Ref } from "vue";
 import type { DisplayItem, EmitFn, ItemPropsConfig } from "./virtual_tree";
 
 interface TreeScrollProps {
@@ -8,24 +5,57 @@ interface TreeScrollProps {
 }
 
 interface ScrollableElement {
-  $el: { scrollTop: number; clientHeight: number };
+  $el: { scrollTop: number; clientHeight: number } | undefined;
+}
+
+interface ScrollInfo {
+  scrollTop: number;
+  containerHeight: number;
+  itemHeight: number;
+}
+
+type ReadonlyMaybeRefOrGetter<Value> = Value | Ref<Value> | (() => Value);
+
+type ReadonlyDisplayItem = Omit<DisplayItem, "raw"> & {
+  readonly raw: Record<string, unknown>;
+};
+
+interface ScrollEventLike {
+  readonly target: EventTarget | null;
+}
+
+interface UseTreeScrollReturn {
+  internalScrollTop: Ref<number>;
+  virtualScrollRef: Ref<ScrollableElement | undefined>;
+  stickyHeader: ComputedRef<ReadonlyDisplayItem | undefined>;
+  handleScroll: (event: ScrollEventLike) => void;
+  scrollToIndex: (index: number) => void;
+  getScrollInfo: () => ScrollInfo;
+}
+
+function isHtmlElement(value: EventTarget | null): value is HTMLElement {
+  return value instanceof HTMLElement;
 }
 
 export function useTreeScroll(
-  propsIn: MaybeRefOrGetter<TreeScrollProps>,
+  propsIn: ReadonlyMaybeRefOrGetter<TreeScrollProps>,
   emit: EmitFn,
-  displayItems: Ref<DisplayItem[]>,
+  displayItems: Ref<readonly ReadonlyDisplayItem[]>,
   actualItemProps: Ref<ItemPropsConfig>,
-) {
+): UseTreeScrollReturn {
   const SCROLL_STICKY_THRESHOLD = 10;
   const DEFAULT_ITEM_HEIGHT = 28;
 
   const props = toRef(propsIn);
-  const internalScrollTop = ref(props.value.scrollTop || 0);
+  const internalScrollTop = ref(props.value.scrollTop ?? 0);
   const virtualScrollRef = ref<ScrollableElement | undefined>(undefined);
 
-  function handleScroll(event: Event): void {
-    const { scrollTop } = event.target as HTMLElement;
+  function handleScroll(event: ScrollEventLike): void {
+    const { target } = event;
+    if (!isHtmlElement(target)) {
+      return;
+    }
+    const { scrollTop } = target;
     internalScrollTop.value = scrollTop;
     emit("update:scrollTop", scrollTop);
   }
@@ -35,7 +65,7 @@ export function useTreeScroll(
     (newVal = 0) => {
       if (Math.abs(newVal - internalScrollTop.value) > 1) {
         internalScrollTop.value = newVal;
-        if (virtualScrollRef.value && virtualScrollRef.value.$el) {
+        if (virtualScrollRef.value !== undefined && virtualScrollRef.value.$el !== undefined) {
           virtualScrollRef.value.$el.scrollTop = newVal;
         }
       }
@@ -76,12 +106,12 @@ export function useTreeScroll(
   });
 
   function scrollToIndex(index: number): void {
-    if (index === -1 || !virtualScrollRef.value) {
+    if (index === -1 || virtualScrollRef.value === undefined) {
       return;
     }
 
     const container = virtualScrollRef.value.$el;
-    if (!container) {
+    if (container === undefined) {
       return;
     }
 
@@ -100,7 +130,7 @@ export function useTreeScroll(
     }
   }
 
-  function getScrollInfo() {
+  function getScrollInfo(): ScrollInfo {
     const container = virtualScrollRef.value?.$el;
     const containerHeight = container ? container.clientHeight : 0;
     const itemHeight = actualItemProps.value?.height || DEFAULT_ITEM_HEIGHT;