@v1nt1248/3nclient-lib 0.3.24 → 0.3.27

package/src/components/ui3n-scrollbar-vertical/ui3n-scrollbar-vertical.vue

@@ -0,0 +1,330 @@
+<script lang="ts" setup>
+  import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+  import type {
+    Ui3nScrollbarVerticalProps,
+    Ui3nScrollbarVerticalEmits,
+    Ui3nScrollbarVerticalSlots,
+    Ui3nScrollbarVerticalExpose,
+  } from './types';
+
+  const MIN_HEIGHT = 40;
+
+  const props = withDefaults(defineProps<Ui3nScrollbarVerticalProps>(), {
+    thumbMinHeight: MIN_HEIGHT,
+    thumbHeight: 'auto',
+    thumbRadius: 4,
+    thumbColor: 'var(--color-bg-control-accent-default)',
+    thumbHoverColor: 'var(--color-bg-control-accent-hover)',
+    thumbActiveColor: 'var(--color-bg-control-accent-focused)',
+    trackWidth: 6,
+    trackColor: 'transparent',
+  });
+  const emits = defineEmits<Ui3nScrollbarVerticalEmits>();
+  defineSlots<Ui3nScrollbarVerticalSlots>();
+
+  const containerRef = ref<HTMLDivElement | null>(null);
+  const trackRef = ref<HTMLDivElement | null>(null);
+  const thumbRef = ref<HTMLDivElement | null>(null);
+
+  const scrollHeight = ref(0);
+  const clientHeight = ref(0);
+  const scrollTop = ref(0);
+
+  const isDragging = ref(false);
+  const isHovered = ref(false);
+  const isScrollingNow = ref(false);
+
+  let resizeObserver: ResizeObserver | null = null;
+  let scrollTimeout: number | undefined;
+  let startY = 0;
+  let startScrollTop = 0;
+
+  const isScrollable = computed(() => scrollHeight.value > clientHeight.value);
+
+  const isBarVisible = computed(() => {
+    if (isDragging.value) {
+      return true;
+    }
+    return isScrollable.value && (isHovered.value || isScrollingNow.value);
+  });
+
+  const minHeight = computed(() => {
+    const num = Number(props.thumbMinHeight);
+    return isNaN(num) ? MIN_HEIGHT : num;
+  });
+
+  const thumbHeight = computed(() => {
+    if (!scrollHeight.value) {
+      return 0;
+    }
+
+    if (props.thumbHeight !== 'auto') {
+      const fixedNum = Number(props.thumbHeight);
+      return isNaN(fixedNum) ? minHeight.value : fixedNum;
+    }
+
+    const ratio = clientHeight.value / scrollHeight.value;
+    const calculated = clientHeight.value * ratio;
+    return Math.max(minHeight.value, calculated);
+  });
+
+  const thumbTop = computed(() => {
+    if (!scrollHeight.value || scrollHeight.value === clientHeight.value) {
+      return 0;
+    }
+
+    const maxScrollTop = scrollHeight.value - clientHeight.value;
+    const maxThumbTop = clientHeight.value - thumbHeight.value;
+    return (scrollTop.value / maxScrollTop) * maxThumbTop;
+  });
+
+  const thumbRadiusCss = computed(() => {
+    const num = Number(props.thumbRadius);
+    return isNaN(num) ? String(props.thumbRadius) : `${num}px`;
+  });
+  const thumbColorCss = computed(() => props.thumbColor);
+  const thumbHoverColorCss = computed(() => props.thumbHoverColor);
+  const thumbActiveColorCss = computed(() => props.thumbActiveColor);
+  const trackWidthCss = computed(() => {
+    const num = Number(props.trackWidth);
+    return isNaN(num) ? String(props.trackWidth) : `${num}px`;
+  });
+  const trackColorCss = computed(() => props.trackColor);
+
+  function updateMetrics() {
+    if (!containerRef.value) {
+      return;
+    }
+
+    scrollHeight.value = containerRef.value.scrollHeight;
+    clientHeight.value = containerRef.value.clientHeight;
+    scrollTop.value = containerRef.value.scrollTop;
+  }
+
+  function onScroll(event: Event) {
+    if (!isDragging.value) {
+      scrollTop.value = (event.target as HTMLDivElement).scrollTop;
+    }
+
+    isScrollingNow.value = true;
+    window.clearTimeout(scrollTimeout);
+
+    scrollTimeout = window.setTimeout(() => {
+      isScrollingNow.value = false;
+    }, 1500);
+
+    emits('scroll', event);
+  }
+
+  function onTrackClick(e: MouseEvent) {
+    if (e.target !== trackRef.value || !containerRef.value || !trackRef.value) {
+      return;
+    }
+
+    const trackRect = trackRef.value.getBoundingClientRect();
+    const clickY = e.clientY - trackRect.top;
+    const targetThumbTop = clickY - thumbHeight.value / 2;
+    const maxScrollTop = scrollHeight.value - clientHeight.value;
+    const maxThumbTop = clientHeight.value - thumbHeight.value;
+
+    let targetScrollTop = (targetThumbTop / maxThumbTop) * maxScrollTop;
+    targetScrollTop = Math.max(0, Math.min(maxScrollTop, targetScrollTop));
+
+    containerRef.value.scrollTo({
+      top: targetScrollTop,
+      behavior: 'smooth',
+    });
+  }
+
+  function onThumbPointerDown(e: PointerEvent) {
+    if (!thumbRef.value || !containerRef.value) {
+      return;
+    }
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    thumbRef.value.setPointerCapture(e.pointerId);
+
+    isDragging.value = true;
+    startY = e.clientY;
+    startScrollTop = scrollTop.value;
+
+    document.body.style.userSelect = 'none';
+
+    thumbRef.value.addEventListener('pointermove', onThumbPointerMove);
+    thumbRef.value.addEventListener('pointerup', onThumbPointerUp);
+    thumbRef.value.addEventListener('pointercancel', onThumbPointerUp);
+  }
+
+  function onThumbPointerMove(e: PointerEvent) {
+    if (!isDragging.value || !containerRef.value) {
+      return;
+    }
+
+    const deltaY = e.clientY - startY;
+    const maxScrollTop = scrollHeight.value - clientHeight.value;
+    const maxThumbTop = clientHeight.value - thumbHeight.value;
+
+    const scrollDelta = (deltaY / maxThumbTop) * maxScrollTop;
+    containerRef.value.scrollTop = startScrollTop + scrollDelta;
+    scrollTop.value = containerRef.value.scrollTop;
+  }
+
+  function onThumbPointerUp(e: PointerEvent) {
+    if (!isDragging.value) {
+      return;
+    }
+
+    isDragging.value = false;
+    document.body.style.userSelect = '';
+
+    if (thumbRef.value) {
+      try {
+        thumbRef.value.releasePointerCapture(e.pointerId);
+      } catch (err) {}
+
+      thumbRef.value.removeEventListener('pointermove', onThumbPointerMove);
+      thumbRef.value.removeEventListener('pointerup', onThumbPointerUp);
+      thumbRef.value.removeEventListener('pointercancel', onThumbPointerUp);
+    }
+  }
+
+  onMounted(() => {
+    updateMetrics();
+    if (containerRef.value) {
+      resizeObserver = new ResizeObserver(updateMetrics);
+      resizeObserver.observe(containerRef.value);
+
+      if (containerRef.value.firstElementChild) {
+        resizeObserver.observe(containerRef.value.firstElementChild);
+      }
+    }
+  });
+
+  onBeforeUnmount(() => {
+    resizeObserver?.disconnect();
+    window.clearTimeout(scrollTimeout);
+
+    if (thumbRef.value) {
+      thumbRef.value.removeEventListener('pointermove', onThumbPointerMove);
+      thumbRef.value.removeEventListener('pointerup', onThumbPointerUp);
+      thumbRef.value.removeEventListener('pointercancel', onThumbPointerUp);
+    }
+
+    document.body.style.userSelect = '';
+  });
+
+  defineExpose<Ui3nScrollbarVerticalExpose>({
+    scrollTo: (options: ScrollToOptions) => {
+      containerRef.value?.scrollTo(options);
+    },
+
+    getContainer: () => containerRef.value!,
+  });
+</script>
+
+<template>
+  <div
+    :class="$style.ui3nScrollbarVertical"
+    :style="{
+      '--ui3n-scrollbar-thumb-radius': thumbRadiusCss,
+      '--ui3n-scrollbar-thumb-color': thumbColorCss,
+      '--ui3n-scrollbar-thumb-hover-color': thumbHoverColorCss,
+      '--ui3n-scrollbar-thumb-active-color': thumbActiveColorCss,
+      '--ui3n-scrollbar-track-width': trackWidthCss,
+      '--ui3n-scrollbar-track-color': trackColorCss,
+    }"
+    @mouseenter="isHovered = true"
+    @mouseleave="isHovered = false"
+  >
+    <div
+      ref="containerRef"
+      :class="$style.scrollbarContainer"
+      @scroll="onScroll"
+    >
+      <slot />
+    </div>
+
+    <div
+      ref="trackRef"
+      :class="[$style.track, { [$style.trackVisible]: isBarVisible }]"
+      @mousedown="onTrackClick"
+    >
+      <div
+        ref="thumbRef"
+        :class="[$style.thumb, { [$style.active]: isDragging }]"
+        :style="{
+          height: `${thumbHeight}px`,
+          transform: `translateY(${thumbTop}px)`,
+        }"
+        @pointerdown="onThumbPointerDown"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+  .ui3nScrollbarVertical {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .scrollbarContainer {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none !important;
+      width: 0 !important;
+      height: 0 !important;
+    }
+  }
+
+  .track {
+    position: absolute;
+    top: 0;
+    right: 2px;
+    bottom: 0;
+    width: var(--ui3n-scrollbar-track-width);
+    background: var(--ui3n-scrollbar-track-color);
+    z-index: 10;
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      opacity 0.3s ease,
+      visibility 0.3s ease;
+  }
+
+  .trackVisible {
+    visibility: visible;
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .thumb {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    border-radius: var(--ui3n-scrollbar-thumb-radius);
+    background-color: var(--ui3n-scrollbar-thumb-color);
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+    touch-action: none;
+
+    &:hover {
+      background-color: var(--ui3n-scrollbar-thumb-hover-color);
+    }
+
+    &:active,
+    &.active {
+      background-color: var(--ui3n-scrollbar-thumb-active-color);
+    }
+  }
+</style>

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

@@ -1,50 +1,46 @@
 <script lang="ts" setup generic="T extends { id?: string }">
-import { computed, onMounted, ref } from 'vue';
-import type { Ui3nVirtualScrollProps, Ui3nVirtualScrollSlots } from './types';
+  import { computed, ref } from 'vue';
+  import Ui3nScrollbarVertical from '@/components/ui3n-scrollbar-vertical/ui3n-scrollbar-vertical.vue';
+  import type { Ui3nVirtualScrollProps, Ui3nVirtualScrollSlots } from './types';
 
-const props = withDefaults(defineProps<Ui3nVirtualScrollProps<T>>(), {
-  renderAhead: 20,
-});
-defineSlots<Ui3nVirtualScrollSlots<T>>();
+  const props = withDefaults(defineProps<Ui3nVirtualScrollProps<T>>(), {
+    renderAhead: 20,
+  });
+  defineSlots<Ui3nVirtualScrollSlots<T>>();
 
-const scrollTop = ref(0);
-const animationFrame = ref<number | undefined>();
-const wrapElement = ref<HTMLDivElement | null>(null);
-const wrapElementHeight = computed(() => wrapElement.value
-  ? wrapElement.value.clientHeight
-  : 0,
-);
-const itemCount = computed(() => props.items.length);
-const totalHeight = computed(() => itemCount.value * props.minChildHeight);
-const startNode = computed(() => {
-  const val = Math.floor(scrollTop.value / props.minChildHeight) - props.renderAhead;
-  return Math.max(0, val);
-});
-const visibleNodeCount = computed(() => {
-  const val = Math.ceil(wrapElementHeight.value / props.minChildHeight) + 2 * props.renderAhead;
-  return Math.min(itemCount.value - startNode.value, val);
-});
-const offsetY = computed(() => startNode.value * props.minChildHeight);
-const visibleChildren = computed(() => props.items.slice(startNode.value, startNode.value + visibleNodeCount.value));
+  const scrollTop = ref(0);
+  const scrollbarComponentRef = ref<InstanceType<typeof Ui3nScrollbarVertical> | null>(null);
 
-const onScroll = (event: Event) => {
-  if (animationFrame.value) {
-    cancelAnimationFrame(animationFrame.value);
-  }
+  const itemCount = computed(() => props.items.length);
+  const totalHeight = computed(() => itemCount.value * props.minChildHeight);
 
-  animationFrame.value = requestAnimationFrame(() => scrollTop.value = (event.target as HTMLDivElement).scrollTop);
-};
+  const wrapElementHeight = computed(() => {
+    const el = scrollbarComponentRef.value?.getContainer();
+    return el ? el.clientHeight : 0;
+  });
 
-onMounted(() => {
-  if (wrapElement.value) {
-    scrollTop.value = wrapElement.value.scrollTop;
-  }
-});
+  const startNode = computed(() => {
+    const val = Math.floor(scrollTop.value / props.minChildHeight) - props.renderAhead;
+    return Math.max(0, val);
+  });
+
+  const visibleNodeCount = computed(() => {
+    return Math.ceil(wrapElementHeight.value / props.minChildHeight) + 2 * props.renderAhead;
+  });
+
+  const offsetY = computed(() => startNode.value * props.minChildHeight);
+  const visibleChildren = computed(() =>
+    props.items.slice(startNode.value, startNode.value + visibleNodeCount.value),
+  );
+
+  const onScroll = (event: Event) => {
+    scrollTop.value = (event.target as HTMLDivElement).scrollTop;
+  };
 </script>
 
 <template>
-  <div
-    ref="wrapElement"
+  <ui3n-scrollbar-vertical
+    ref="scrollbarComponentRef"
     :class="$style.ui3nVirtualScroll"
     @scroll="onScroll"
   >
@@ -70,30 +66,28 @@ onMounted(() => {
         </div>
       </div>
     </div>
-  </div>
+  </ui3n-scrollbar-vertical>
 </template>
 
 <style lang="scss" module>
-.ui3nVirtualScroll {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow-y: auto;
-  background-color: var(--color-bg-block-primary-default);
-}
+  .ui3nVirtualScroll {
+    --ui3n-virtual-scroll-item-min-height: 16px;
 
-.viewport {
-  position: relative;
-  overflow: hidden;
-  will-change: transform;
-}
+    background-color: var(--color-bg-block-primary-default);
+  }
 
-.content {
-  will-change: transform;
-}
+  .viewport {
+    position: relative;
+    overflow: hidden;
+    will-change: transform;
+  }
 
-.item {
-  position: relative;
-  min-height: 16px;
-}
+  .content {
+    will-change: transform;
+  }
+
+  .item {
+    position: relative;
+    min-height: var(--ui3n-virtual-scroll-item-min-height);
+  }
 </style>

package/dist/components/ui3n-slider/{ui3n-slider.vue.d.ts → ui3n-slider.d.ts}

@@ -5,15 +5,15 @@ declare const _default: import('vue').DefineComponent<UI3nSliderProps, {}, {}, {
     "onUpdate:modelValue"?: ((value: number | [number, number]) => any) | undefined;
 }>, {
     activeColor: string;
+    thumbColor: string;
+    trackColor: string;
     min: string | number;
     max: string | number;
     labelVisible: "always" | "normal" | "never";
     labelTextColor: string;
     labelColor: string;
-    trackColor: string;
     trackHeight: string | number;
     thumbSize: string | number;
-    thumbColor: string;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     sliderEl: HTMLDivElement;
     pointerEl1: HTMLDivElement;