@v1nt1248/3nclient-lib 0.3.28 → 0.3.29

package/src/components/ui3n-tooltip/ui3n-tooltip.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { computed, getCurrentInstance, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+  import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
   import type { Nullable } from '@/types';
   import type { Ui3nTooltipProps, Ui3nTooltipEmits, Ui3nTooltipSlots } from './types';
   import { arrow, autoUpdate, offset, useFloating } from '@floating-ui/vue';
@@ -20,23 +20,17 @@
   defineSlots<Ui3nTooltipSlots>();
 
   const showTooltip = ref(false);
-  const referenceEl = ref<Nullable<HTMLElement>>(null);
+  const referenceContainer = ref<Nullable<HTMLElement>>(null);
   const floatingEl = ref<Nullable<HTMLElement>>(null);
   const floatingArrowEl = ref<Nullable<HTMLElement>>(null);
 
-  const maxContentWidthCssValue = computed(() => `${props.maxContentWidth}px`);
-  const baseOffsetCssValue = computed(() => `${-baseOffset}px`);
-  const arrowSizeCssValue = computed(() => `${baseOffset}px`);
   const mainPlacement = computed(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const [part1, _] = props.placement.split('-');
+    const [part1] = props.placement.split('-');
     return part1;
   });
+
   const offsetOptions = computed(() => {
-    const options = {
-      mainAxis: 0,
-      crossAxis: 0,
-    };
+    const options = { mainAxis: 0, crossAxis: 0 };
     switch (mainPlacement.value) {
       case 'top':
         options.mainAxis = -1 * Number(props.offsetY) + baseOffset;
@@ -58,16 +52,32 @@
     return options;
   });
 
-  const { floatingStyles, isPositioned, middlewareData } = useFloating(referenceEl, floatingEl, {
+  const middlewareComputed = computed(() => [
+    offset(offsetOptions.value),
+    arrow({ element: floatingArrowEl, padding: 8 }),
+  ]);
+
+  const { floatingStyles, isPositioned, middlewareData } = useFloating(referenceContainer, floatingEl, {
     open: showTooltip,
     placement: props.placement,
     strategy: props.positionStrategy,
-    middleware: [offset(offsetOptions.value), arrow({ element: floatingArrowEl, padding: 8 })],
+    middleware: middlewareComputed,
     whileElementsMounted: props.positionStrategy === 'fixed' ? autoUpdate : undefined,
   });
 
+  const tooltipStylesComputed = computed(() => ({
+    ...floatingStyles.value,
+    '--ui3n-tooltip-bg-color': props.color,
+    '--ui3n-tooltip-text-color': props.textColor,
+    '--ui3n-tooltip-max-width': `${props.maxContentWidth}px`,
+    '--ui3n-tooltip-arrow-size': `${baseOffset}px`,
+    '--ui3n-tooltip-base-offset': `${-baseOffset}px`,
+  }));
+
   function onMouseenter() {
-    if (props.disabled) return;
+    if (props.disabled) {
+      return;
+    }
 
     showTooltip.value = true;
     emits('open');
@@ -75,7 +85,9 @@
   }
 
   function onMouseleave() {
-    if (props.disabled && !showTooltip.value) return;
+    if (props.disabled && !showTooltip.value) {
+      return;
+    }
 
     showTooltip.value = false;
     emits('close');
@@ -83,7 +95,9 @@
   }
 
   function onClick() {
-    if (props.disabled && !showTooltip.value) return;
+    if (props.disabled && !showTooltip.value) {
+      return;
+    }
 
     if (showTooltip.value) {
       onMouseleave();
@@ -93,32 +107,28 @@
   }
 
   onMounted(() => {
-    const inst = getCurrentInstance();
-    const el = inst?.vnode?.el;
-    if (!el) {
-      throw new Error('[ui3n-tooltip] A reference element is absent.');
+    if (!referenceContainer.value) {
+      return;
     }
 
-    referenceEl.value = el.nodeName === '#text' ? el.nextElementSibling : el;
-
-    if (!referenceEl.value) return;
-
     if (props.trigger === 'hover') {
-      referenceEl.value!.addEventListener('mouseenter', onMouseenter);
-      referenceEl.value!.addEventListener('mouseleave', onMouseleave);
+      referenceContainer.value.addEventListener('mouseenter', onMouseenter);
+      referenceContainer.value.addEventListener('mouseleave', onMouseleave);
     } else if (props.trigger === 'click') {
-      referenceEl.value!.addEventListener('click', onClick);
+      referenceContainer.value.addEventListener('click', onClick);
     }
   });
 
   onBeforeUnmount(() => {
-    if (!referenceEl.value) return;
+    if (!referenceContainer.value) {
+      return;
+    }
 
     if (props.trigger === 'hover') {
-      referenceEl.value!.removeEventListener('mouseenter', onMouseenter);
-      referenceEl.value!.removeEventListener('mouseleave', onMouseleave);
+      referenceContainer.value.removeEventListener('mouseenter', onMouseenter);
+      referenceContainer.value.removeEventListener('mouseleave', onMouseleave);
     } else if (props.trigger === 'click') {
-      referenceEl.value!.removeEventListener('click', onClick);
+      referenceContainer.value.removeEventListener('click', onClick);
     }
   });
 
@@ -134,13 +144,18 @@
 </script>
 
 <template>
-  <slot />
+  <div
+    ref="referenceContainer"
+    :class="$style.container"
+  >
+    <slot />
+  </div>
 
   <div
     v-if="showTooltip"
     ref="floatingEl"
     :class="$style.floating"
-    :style="floatingStyles"
+    :style="tooltipStylesComputed"
   >
     <slot name="content">
       <div :class="$style.content">
@@ -159,10 +174,13 @@
 </template>
 
 <style lang="scss" module>
-  .floating {
-    --ui3n-tooltip-bg-color: v-bind(color);
-    --ui3n-tooltip-text-color: v-bind(textColor);
+  .container {
+    display: inline-block;
+    width: max-content;
+    max-width: 100%;
+  }
 
+  .floating {
     width: max-content;
     z-index: 5;
   }
@@ -175,41 +193,41 @@
     &-top,
     &-bottom {
       border-style: solid;
-      border-width: 0 v-bind(arrowSizeCssValue) v-bind(arrowSizeCssValue) v-bind(arrowSizeCssValue);
+      border-width: 0 var(--ui3n-tooltip-arrow-size) var(--ui3n-tooltip-arrow-size) var(--ui3n-tooltip-arrow-size);
       border-color: transparent transparent var(--ui3n-tooltip-bg-color) transparent;
     }
 
     &-top {
-      bottom: v-bind(baseOffsetCssValue);
+      bottom: var(--ui3n-tooltip-base-offset);
       transform: rotate(180deg);
     }
 
     &-bottom {
-      top: v-bind(baseOffsetCssValue);
+      top: var(--ui3n-tooltip-base-offset);
       transform: rotate(0deg);
     }
 
     &-left,
     &-right {
       border-style: solid;
-      border-width: v-bind(arrowSizeCssValue) 0 v-bind(arrowSizeCssValue) v-bind(arrowSizeCssValue);
+      border-width: var(--ui3n-tooltip-arrow-size) 0 var(--ui3n-tooltip-arrow-size) var(--ui3n-tooltip-arrow-size);
       border-color: transparent transparent transparent var(--ui3n-tooltip-bg-color);
     }
 
     &-left {
-      right: v-bind(baseOffsetCssValue);
+      right: var(--ui3n-tooltip-base-offset);
       transform: rotate(0deg);
     }
 
     &-right {
-      left: v-bind(baseOffsetCssValue);
+      left: var(--ui3n-tooltip-base-offset);
       transform: rotate(180deg);
     }
   }
 
   .content {
     position: relative;
-    max-width: v-bind(maxContentWidthCssValue);
+    max-width: var(--ui3n-tooltip-max-width);
     padding: 6px var(--spacing-s);
     border-radius: 6px;
     font-size: var(--font-11);

package/src/components/ui3n-virtual-scroll/ui3n-virtual-scroll.vue

@@ -1,47 +1,228 @@
 <script lang="ts" setup generic="T extends { id?: string }">
-  import { computed, ref } from 'vue';
-  import Ui3nScrollbarVertical from '@/components/ui3n-scrollbar-vertical/ui3n-scrollbar-vertical.vue';
+  /* eslint-disable @typescript-eslint/no-explicit-any */
+  import { computed, ref, shallowRef, onMounted, onBeforeUnmount, watch } from 'vue';
+  import Ui3nScrollbarVertical from '../ui3n-scrollbar-vertical/ui3n-scrollbar-vertical.vue';
   import type { Ui3nVirtualScrollProps, Ui3nVirtualScrollSlots } from './types';
 
+  interface MeasuredSize {
+    height: number;
+    top: number;
+  }
+
   const props = withDefaults(defineProps<Ui3nVirtualScrollProps<T>>(), {
     renderAhead: 20,
+    minChildHeight: 16,
   });
   defineSlots<Ui3nVirtualScrollSlots<T>>();
 
   const scrollTop = ref(0);
+  const viewportHeight = ref<number | null>(null);
   const scrollbarComponentRef = ref<InstanceType<typeof Ui3nScrollbarVertical> | null>(null);
 
-  const itemCount = computed(() => props.items.length);
-  const totalHeight = computed(() => itemCount.value * props.minChildHeight);
+  const sizeCache = shallowRef<MeasuredSize[]>([]);
+  const cacheVersion = ref(0);
+
+  let isAdjustingScroll = false;
+  let listResizeObserver: ResizeObserver | null = null;
+  let containerResizeObserver: ResizeObserver | null = null;
+
+  const itemRefs = new Map<string | number, HTMLElement>();
+
+  const totalHeight = computed(() => {
+    cacheVersion.value;
+    if (!sizeCache.value.length) {
+      return 0;
+    }
+
+    const lastItem = sizeCache.value[sizeCache.value.length - 1];
+    return lastItem.top + lastItem.height;
+  });
 
   const wrapElementHeight = computed(() => {
+    if (viewportHeight.value !== null) {
+      return viewportHeight.value;
+    }
+
     const el = scrollbarComponentRef.value?.getContainer();
     return el ? el.clientHeight : 0;
   });
 
   const startNode = computed(() => {
-    const val = Math.floor(scrollTop.value / props.minChildHeight) - props.renderAhead;
-    return Math.max(0, val);
+    cacheVersion.value;
+    const targetTop = scrollTop.value;
+
+    if (!sizeCache.value.length) {
+      return 0;
+    }
+
+    let low = 0;
+    let high = sizeCache.value.length - 1;
+    let foundIndex = -1;
+
+    while (low <= high) {
+      const mid = Math.floor((low + high) / 2);
+      const item = sizeCache.value[mid];
+
+      if (item.top <= targetTop && item.top + item.height > targetTop) {
+        foundIndex = mid;
+        break;
+      } else if (item.top > targetTop) {
+        high = mid - 1;
+      } else {
+        low = mid + 1;
+      }
+    }
+
+    if (foundIndex === -1) {
+      foundIndex = Math.max(0, high);
+    }
+
+    return Math.max(0, foundIndex - props.renderAhead);
   });
 
   const visibleNodeCount = computed(() => {
-    return Math.ceil(wrapElementHeight.value / props.minChildHeight) + 2 * props.renderAhead;
+    const height = wrapElementHeight.value;
+    if (!height) {
+      return props.renderAhead * 2;
+    }
+
+    const estimatedVisible = Math.ceil(height / props.minChildHeight);
+    return estimatedVisible + 2 * props.renderAhead;
+  });
+
+  const offsetY = computed(() => {
+    cacheVersion.value;
+    if (!sizeCache.value.length) {
+      return 0;
+    }
+
+    return sizeCache.value[startNode.value]?.top || 0;
   });
 
-  const offsetY = computed(() => startNode.value * props.minChildHeight);
-  const visibleChildren = computed(() =>
-    props.items.slice(startNode.value, startNode.value + visibleNodeCount.value),
-  );
+  const visibleChildren = computed(() => {
+    const start = startNode.value;
+    const count = visibleNodeCount.value;
+
+    if (start + count >= props.items.length - props.renderAhead) {
+      return props.items.slice(start);
+    }
+
+    return props.items.slice(start, start + count);
+  });
+
+  function onScroll(event: Event) {
+    if (isAdjustingScroll) {
+      return;
+    }
 
-  const onScroll = (event: Event) => {
     scrollTop.value = (event.target as HTMLDivElement).scrollTop;
-  };
+  }
+
+  function setItemRef(el: any, id: string | number) {
+    if (el) {
+      const element = el.$el || el;
+      itemRefs.set(id, element);
+      listResizeObserver?.observe(element);
+    } else {
+      itemRefs.delete(id);
+    }
+  }
+
+  function initCache() {
+    let currentTop = 0;
+    sizeCache.value = props.items.map(() => {
+      const size = { height: props.minChildHeight, top: currentTop };
+      currentTop += props.minChildHeight;
+      return size;
+    });
+    cacheVersion.value++;
+  }
+
+  onMounted(() => {
+    const containerEl = scrollbarComponentRef.value?.getContainer();
+
+    if (containerEl) {
+      viewportHeight.value = containerEl.clientHeight;
+      containerResizeObserver = new ResizeObserver(entries => {
+        for (const entry of entries) {
+          viewportHeight.value = entry.contentRect.height || entry.target.clientHeight;
+        }
+      });
+      containerResizeObserver.observe(containerEl);
+    }
+
+    listResizeObserver = new ResizeObserver(entries => {
+      requestAnimationFrame(() => {
+        let lowestChangedIndex = Infinity;
+        let totalDeltaAboveKey = 0;
+
+        const updatedCache = [...sizeCache.value];
+        const currentScrollTop = scrollTop.value;
+
+        for (const entry of entries) {
+          const sid = entry.target.getAttribute('data-sid');
+          if (!sid) {
+            continue;
+          }
+
+          const index = props.items.findIndex((item, idx) => (item.id ?? idx).toString() === sid);
+          if (index === -1) {
+            continue;
+          }
+
+          const realHeight = entry.contentRect.height || entry.target.getBoundingClientRect().height;
+
+          if (updatedCache[index] && updatedCache[index].height !== realHeight) {
+            const oldHeight = updatedCache[index].height;
+            updatedCache[index] = { ...updatedCache[index], height: realHeight };
+
+            if (updatedCache[index].top < currentScrollTop) {
+              totalDeltaAboveKey += realHeight - oldHeight;
+            }
+
+            if (index < lowestChangedIndex) {
+              lowestChangedIndex = index;
+            }
+          }
+        }
+
+        if (lowestChangedIndex !== Infinity) {
+          let currentTop = updatedCache[lowestChangedIndex].top;
+
+          for (let i = lowestChangedIndex; i < updatedCache.length; i++) {
+            updatedCache[i].top = currentTop;
+            currentTop += updatedCache[i].height;
+          }
+
+          sizeCache.value = updatedCache;
+          cacheVersion.value++;
+
+          if (containerEl && totalDeltaAboveKey !== 0) {
+            isAdjustingScroll = true;
+            containerEl.scrollTop = currentScrollTop + totalDeltaAboveKey;
+            scrollTop.value = containerEl.scrollTop;
+            isAdjustingScroll = false;
+          }
+
+          scrollbarComponentRef.value?.updateMetrics();
+        }
+      });
+    });
+  });
+
+  onBeforeUnmount(() => {
+    listResizeObserver?.disconnect();
+    containerResizeObserver?.disconnect();
+  });
+
+  watch(() => props.items, initCache, { immediate: true });
 </script>
 
 <template>
   <ui3n-scrollbar-vertical
     ref="scrollbarComponentRef"
     :class="$style.ui3nVirtualScroll"
+    :auto-update="false"
     @scroll="onScroll"
   >
     <div
@@ -55,7 +236,8 @@
         <div
           v-for="(item, index) in visibleChildren"
           :key="item.id"
-          :data-sid="item.id ?? index"
+          :ref="el => setItemRef(el, item.id ?? startNode + index)"
+          v-bind="{ 'data-sid': item.id ?? startNode + index }"
           :class="$style.item"
         >
           <slot
@@ -71,8 +253,6 @@
 
 <style lang="scss" module>
   .ui3nVirtualScroll {
-    --ui3n-virtual-scroll-item-min-height: 16px;
-
     background-color: var(--color-bg-block-primary-default);
   }
 
@@ -80,6 +260,9 @@
     position: relative;
     overflow: hidden;
     will-change: transform;
+    box-sizing: border-box;
+    margin: 0 !important;
+    padding: 0 !important;
   }
 
   .content {
@@ -88,6 +271,7 @@
 
   .item {
     position: relative;
-    min-height: var(--ui3n-virtual-scroll-item-min-height);
+    min-height: v-bind('props.minChildHeight + "px"');
+    box-sizing: border-box;
   }
 </style>