@v1nt1248/3nclient-lib 0.3.25 → 0.3.28

package/dist/variables.css

@@ -949,11 +949,11 @@ div {
 }
 
 ::-webkit-scrollbar-track {
-  background-color: var(--s-default-outline-focused);
+  background-color: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
-  border-radius: 2px;
+  border-radius: 4px;
   height: 50px;
   background-color: var(--default-fill-pressed);
 }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@v1nt1248/3nclient-lib",
   "license": "AGPL-3.0-or-later",
   "author": "v1nt1248",
-  "version": "0.3.25",
+  "version": "0.3.28",
   "description": "Library for 3NWeb clients",
   "type": "module",
   "files": [
@@ -25,25 +25,17 @@
       "types": "./dist/ui3n-utils.d.ts"
     },
     "./style.css": "./dist/style.css",
-    "./variables.css": "./dist/variables.css"
+    "./variables.css": "./dist/variables.css",
+    "./mixins.scss": "./dist/mixins.scss"
   },
   "scripts": {
-    "dev": "LIB_NAME=all vite",
-    "generate:types": "vue-tsc --declaration --emitDeclarationOnly --outdir ./dist",
-    "copy:dts": "cp ./src/types.d.ts ./dist",
-    "copy:css": "cp ./src/assets/styles/variables.css ./dist",
-    "copy:icons:css": "cp ./src/assets/styles/icons.css ./dist",
+    "dev": "vite",
     "clean:dist": "rm -rf dist/",
-    "build:components": "LIB_NAME=lib vite build",
-    "build:plugins": "LIB_NAME=plugins vite build",
-    "build:utils": "LIB_NAME=utils vite build",
-    "build": "pnpm clean:dist && vue-tsc --noEmit && pnpm build:plugins && pnpm build:utils && pnpm build:components && pnpm copy:css",
+    "build": "pnpm clean:dist && vite build",
     "pack": "pnpm build && npm pack && cp *.tgz ./dist && rm *.tgz",
     "preview": "vite preview",
     "stylelint": "stylelint --config .stylelint.config.cjs 'src/**/*.{vue,scss,css}'",
     "stylelint:fix": "stylelint --config .stylelint.config.cjs --fix 'src/**/*.{vue,scss,css}'",
-    "linter": "eslint -c eslint.config.js --ext .js,.vue,.ts, src",
-    "linter:fix": "eslint -c eslint.config.js --fix --ext .js,.vue,.ts, src",
     "lint": "pnpm linter && pnpm stylelint",
     "lint:fix": "pnpm linter:fix && pnpm stylelint:fix",
     "docs:dev": "vitepress dev docs",
@@ -103,6 +95,7 @@
     "vite-plugin-css-injected-by-js": "4.0.1",
     "vite-plugin-dts": "4.5.4",
     "vite-plugin-node-polyfills": "^0.28.0",
+    "vite-plugin-static-copy": "^4.1.1",
     "vite-plugin-vue-devtools": "8.1.2",
     "vitepress": "1.6.4",
     "vue": "3.5.35",

package/src/components/index.ts

@@ -120,6 +120,20 @@ import type {
   Ui3nMobileMenuItemProps,
   Ui3nMobileMenuItemEmits,
 } from './ui3n-mobile-menu-item/types';
+import Ui3nScrollbarVertical from './ui3n-scrollbar-vertical/ui3n-scrollbar-vertical.vue';
+import type {
+  Ui3nScrollbarVerticalProps,
+  Ui3nScrollbarVerticalEmits,
+  Ui3nScrollbarVerticalSlots,
+  Ui3nScrollbarVerticalExpose,
+} from './ui3n-scrollbar-vertical/types';
+import Ui3nScrollbarHorizontal from './ui3n-scrollbar-horizontal/ui3n-scroolbar-horizontal.vue';
+import type {
+  Ui3nScrollbarHorizontalProps,
+  Ui3nScrollbarHorizontalEmits,
+  Ui3nScrollbarHorizontalSlots,
+  Ui3nScrollbarHorizontalExpose,
+} from './ui3n-scrollbar-horizontal/types';
 
 export {
   Ui3nIcon,
@@ -251,4 +265,14 @@ export {
   Ui3nMobileMenuItemBase,
   Ui3nMobileMenuItemProps,
   Ui3nMobileMenuItemEmits,
+  Ui3nScrollbarVertical,
+  Ui3nScrollbarVerticalProps,
+  Ui3nScrollbarVerticalEmits,
+  Ui3nScrollbarVerticalSlots,
+  Ui3nScrollbarVerticalExpose,
+  Ui3nScrollbarHorizontal,
+  Ui3nScrollbarHorizontalProps,
+  Ui3nScrollbarHorizontalEmits,
+  Ui3nScrollbarHorizontalSlots,
+  Ui3nScrollbarHorizontalExpose,
 };

package/src/components/ui3n-list/types.ts

@@ -1,4 +1,4 @@
-import { VNode } from 'vue';
+import type { VNode } from 'vue';
 
 /**
  * List component properties

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

@@ -32,7 +32,7 @@
       <div
         v-for="(item, index) in items"
         :key="item[keyField as keyof T] as PropertyKey"
-        :class="$style.ui3nListItem "
+        :class="$style.ui3nListItem"
       >
         <slot
           name="item"
@@ -40,10 +40,7 @@
           :index="index"
         >
           <div
-            :class="[
-              $style.ui3nListItemContent,
-              disabled && $style.ui3nListItemContentDisabled,
-            ]"
+            :class="[$style.ui3nListItemContent, disabled && $style.ui3nListItemContentDisabled]"
             @click.stop="emits('select', { value: item, index })"
           >
             {{ item }}
@@ -63,16 +60,12 @@
     width: 100%;
     height: 100%;
     background-color: var(--ui3n-list-bg-color);
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: stretch;
   }
 
   .ui3nListTitle {
     position: relative;
     top: 0;
-    z-index: 1;
+    z-index: 2;
   }
 
   .ui3nListTitleSticky {
@@ -81,7 +74,6 @@
 
   .ui3nListContent {
     position: relative;
-    flex-grow: 1;
   }
 
   .ui3nListTitleContent,
@@ -106,6 +98,7 @@
     font-size: 14px;
     font-weight: 400;
     cursor: pointer;
+    width: 100%;
   }
 
   .ui3nListItemContentDisabled {

package/src/components/ui3n-scrollbar-horizontal/types.ts

@@ -0,0 +1,26 @@
+import type { VNode } from 'vue';
+
+export interface Ui3nScrollbarHorizontalProps {
+  thumbMinWidth?: number | string;
+  thumbWidth?: number | string | 'auto';
+  thumbRadius?: number | string;
+  thumbColor?: string;
+  thumbHoverColor?: string;
+  thumbActiveColor?: string;
+  trackHeight?: number | string;
+  trackRadius?: number | string;
+  trackColor?: string;
+}
+
+export interface Ui3nScrollbarHorizontalEmits {
+  (ev: 'scroll', value: Event): void;
+}
+
+export interface Ui3nScrollbarHorizontalSlots {
+  default: () => VNode;
+}
+
+export interface Ui3nScrollbarHorizontalExpose {
+  scrollTo(options: ScrollToOptions): void;
+  getContainer(): HTMLDivElement;
+}

package/src/components/ui3n-scrollbar-horizontal/ui3n-scroolbar-horizontal.vue

@@ -0,0 +1,337 @@
+<script lang="ts" setup>
+  import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+  import type {
+    Ui3nScrollbarHorizontalProps,
+    Ui3nScrollbarHorizontalEmits,
+    Ui3nScrollbarHorizontalSlots,
+    Ui3nScrollbarHorizontalExpose,
+  } from './types';
+
+  const MIN_WIDTH = 32;
+
+  const props = withDefaults(defineProps<Ui3nScrollbarHorizontalProps>(), {
+    thumbMinWidth: MIN_WIDTH,
+    thumbWidth: 'auto',
+    thumbRadius: 4,
+    thumbColor: 'var(--color-bg-control-accent-default)',
+    thumbHoverColor: 'var(--color-bg-control-accent-hover)',
+    thumbActiveColor: 'var(--color-bg-control-accent-focused)',
+    trackHeight: 6,
+    trackRadius: 4,
+    trackColor: 'transparent',
+  });
+
+  const emits = defineEmits<Ui3nScrollbarHorizontalEmits>();
+  defineSlots<Ui3nScrollbarHorizontalSlots>();
+
+  const containerRef = ref<HTMLDivElement | null>(null);
+  const trackRef = ref<HTMLDivElement | null>(null);
+  const thumbRef = ref<HTMLDivElement | null>(null);
+
+  const scrollWidth = ref(0);
+  const clientWidth = ref(0);
+  const scrollLeft = ref(0);
+
+  const isDragging = ref(false);
+  const isHovered = ref(false);
+  const isScrollingNow = ref(false);
+
+  let resizeObserver: ResizeObserver | null = null;
+  let scrollTimeout: number | undefined;
+  let startX = 0;
+  let startScrollLeft = 0;
+
+  const isScrollable = computed(() => scrollWidth.value > clientWidth.value);
+
+  const isBarVisible = computed(() => {
+    if (isDragging.value) {
+      return true;
+    }
+
+    return isScrollable.value && (isHovered.value || isScrollingNow.value);
+  });
+
+  const minWidth = computed(() => {
+    const num = Number(props.thumbMinWidth);
+    return isNaN(num) ? MIN_WIDTH : num;
+  });
+
+  const thumbWidth = computed(() => {
+    if (!scrollWidth.value) {
+      return 0;
+    }
+
+    if (props.thumbWidth !== 'auto') {
+      const fixedNum = Number(props.thumbWidth);
+      return isNaN(fixedNum) ? minWidth.value : fixedNum;
+    }
+
+    const ratio = clientWidth.value / scrollWidth.value;
+    const calculated = clientWidth.value * ratio;
+    return Math.max(minWidth.value, calculated);
+  });
+
+  const thumbLeft = computed(() => {
+    if (!scrollWidth.value || scrollWidth.value === clientWidth.value) {
+      return 0;
+    }
+
+    const maxScrollLeft = scrollWidth.value - clientWidth.value;
+    const maxThumbLeft = clientWidth.value - thumbWidth.value;
+    return (scrollLeft.value / maxScrollLeft) * maxThumbLeft;
+  });
+
+  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 trackHeightCss = computed(() => {
+    const num = Number(props.trackHeight);
+    return isNaN(num) ? String(props.trackHeight) : `${num}px`;
+  });
+  const trackRadiusCss = computed(() => {
+    const num = Number(props.trackRadius);
+    return isNaN(num) ? String(props.trackRadius) : `${num}px`;
+  });
+  const trackColorCss = computed(() => props.trackColor);
+
+  function updateMetrics() {
+    if (!containerRef.value) {
+      return;
+    }
+
+    scrollWidth.value = containerRef.value.scrollWidth;
+    clientWidth.value = containerRef.value.clientWidth;
+    scrollLeft.value = containerRef.value.scrollLeft;
+  }
+
+  function onScroll(event: Event) {
+    if (!isDragging.value) {
+      scrollLeft.value = (event.target as HTMLDivElement).scrollLeft;
+    }
+
+    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 clickX = e.clientX - trackRect.left;
+    const targetThumbLeft = clickX - thumbWidth.value / 2;
+    const maxScrollLeft = scrollWidth.value - clientWidth.value;
+    const maxThumbLeft = clientWidth.value - thumbWidth.value;
+
+    let targetScrollLeft = (targetThumbLeft / maxThumbLeft) * maxScrollLeft;
+    targetScrollLeft = Math.max(0, Math.min(maxScrollLeft, targetScrollLeft));
+
+    containerRef.value.scrollTo({
+      left: targetScrollLeft,
+      behavior: 'smooth',
+    });
+  }
+
+  function onThumbPointerDown(e: PointerEvent) {
+    if (!thumbRef.value || !containerRef.value) {
+      return;
+    }
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    thumbRef.value.setPointerCapture(e.pointerId);
+
+    isDragging.value = true;
+    startX = e.clientX;
+    startScrollLeft = scrollLeft.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 deltaX = e.clientX - startX;
+    const maxScrollLeft = scrollWidth.value - clientWidth.value;
+    const maxThumbLeft = clientWidth.value - thumbWidth.value;
+
+    const scrollDelta = (deltaX / maxThumbLeft) * maxScrollLeft;
+    containerRef.value.scrollLeft = startScrollLeft + scrollDelta;
+    scrollLeft.value = containerRef.value.scrollLeft;
+  }
+
+  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<Ui3nScrollbarHorizontalExpose>({
+    scrollTo: (options: ScrollToOptions) => {
+      containerRef.value?.scrollTo(options);
+    },
+    getContainer: () => containerRef.value!,
+  });
+</script>
+
+<template>
+  <div
+    :class="$style.ui3nScrollbarHorizontal"
+    :style="{
+      '--ui3n-scrollbar-horizontal-thumb-radius': thumbRadiusCss,
+      '--ui3n-scrollbar-horizontal-thumb-color': thumbColorCss,
+      '--ui3n-scrollbar-horizontal-thumb-hover-color': thumbHoverColorCss,
+      '--ui3n-scrollbar-horizontal-thumb-active-color': thumbActiveColorCss,
+      '--ui3n-scrollbar-horizontal-track-height': trackHeightCss,
+      '--ui3n-scrollbar-horizontal-track-radius': trackRadiusCss,
+      '--ui3n-scrollbar-horizontal-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="{
+          width: `${thumbWidth}px`,
+          transform: `translateX(${thumbLeft}px)`,
+        }"
+        @pointerdown="onThumbPointerDown"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" module>
+  .ui3nScrollbarHorizontal {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .scrollbarContainer {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none !important;
+      width: 0 !important;
+      height: 0 !important;
+    }
+  }
+
+  .track {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 2px;
+    height: var(--ui3n-scrollbar-horizontal-track-height);
+    background: var(--ui3n-scrollbar-horizontal-track-color);
+    border-radius: var(--ui3n-scrollbar-horizontal-track-radius);
+    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;
+    top: 0;
+    height: 100%;
+    border-radius: var(--ui3n-scrollbar-horizontal-thumb-radius);
+    background-color: var(--ui3n-scrollbar-horizontal-thumb-color);
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+    touch-action: none;
+
+    &:hover {
+      background-color: var(--ui3n-scrollbar-horizontal-thumb-hover-color);
+    }
+
+    &:active,
+    &.active {
+      background-color: var(--ui3n-scrollbar-horizontal-thumb-active-color);
+    }
+  }
+</style>

package/src/components/ui3n-scrollbar-vertical/types.ts

@@ -0,0 +1,38 @@
+import type { VNode } from 'vue';
+
+/**
+ * ScrollbarVertical component properties
+ */
+export interface Ui3nScrollbarVerticalProps {
+  thumbMinHeight?: number | string;
+  thumbHeight?: number | string | 'auto';
+  thumbRadius?: number | string;
+  thumbColor?: string;
+  thumbHoverColor?: string;
+  thumbActiveColor?: string;
+  trackWidth?: number;
+  trackRadius?: number | string;
+  trackColor?: string;
+}
+
+/**
+ * ScrollbarVertical component emits
+ */
+export interface Ui3nScrollbarVerticalEmits {
+  (ev: 'scroll', value: Event): void;
+}
+
+/**
+ * ScrollbarVertical component slots
+ */
+export interface Ui3nScrollbarVerticalSlots {
+  /**
+   * Default slot
+   */
+  default: () => VNode;
+}
+
+export interface Ui3nScrollbarVerticalExpose {
+  scrollTo(options: ScrollToOptions): void;
+  getContainer(): HTMLDivElement;
+}