gi-component 0.0.44 → 0.0.45

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "gi-component",
   "type": "module",
-  "version": "0.0.44",
+  "version": "0.0.45",
   "description": "Vue3中基于Element Plus二次封装基础组件库",
   "author": "lin",
   "license": "MIT",

package/packages/components/nav-tabs/index.ts

@@ -0,0 +1,5 @@
+import NavTabs from './src/nav-tabs.vue'
+
+export type NavTabsInstance = InstanceType<typeof NavTabs>
+export * from './src/type'
+export default NavTabs

package/packages/components/nav-tabs/src/nav-tabs.vue

@@ -0,0 +1,164 @@
+<template>
+  <div ref="rootRef" :class="[b('nav-tabs'), { [b('nav-tabs--custom')]: props.custom }]">
+    <div v-if="slots['left-extra']" :class="b('nav-tabs__left')">
+      <slot name="left-extra" />
+    </div>
+    <div ref="scrollRef" :class="b('nav-tabs__scroll')">
+      <div v-for="item in props.data" :key="item.value" :class="[
+        b('nav-tabs-item'),
+        props.custom
+          ? b('nav-tabs-item--custom')
+          : {
+            [b('nav-tabs-item--active')]: model === item.value,
+            [b('nav-tabs-item--disabled')]: item.disabled,
+          },
+      ]" :data-value="item.value" @click="handleItemClick(item)">
+        <slot :item="item" :active="model === item.value" :disabled="!!item.disabled">
+          {{ item.label }}
+        </slot>
+      </div>
+    </div>
+    <div v-if="slots['right-extra']" :class="b('nav-tabs__right')">
+      <slot name="right-extra" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { NavTabItem, NavTabsProps } from './type.ts'
+import { ref, useSlots } from 'vue'
+import { useBemClass, useNavTabs } from '../../../hooks'
+
+const model = defineModel<string | number>()
+
+const props = withDefaults(defineProps<NavTabsProps>(), {
+  data: () => [],
+  wheelSpeed: 1,
+  custom: false
+})
+
+const emits = defineEmits<{
+  (e: 'change', value: string | number): void
+}>()
+
+defineSlots<{
+  'default': (props: {
+    item: NavTabItem
+    active: boolean
+    disabled: boolean
+  }) => void
+  'left-extra': () => void
+  'right-extra': () => void
+}>()
+
+const slots = useSlots()
+const { b } = useBemClass()
+
+const rootRef = ref<HTMLElement | null>(null)
+const scrollRef = ref<HTMLElement | null>(null)
+
+const tabItemClassName = b('nav-tabs-item')
+
+useNavTabs({
+  tabEl: rootRef,
+  tabScrollEl: scrollRef,
+  tabItemClassName,
+  activeValue: model,
+  wheelSpeed: props.wheelSpeed
+})
+
+function handleItemClick(item: NavTabItem) {
+  if (item.disabled) {
+    return
+  }
+  model.value = item.value
+  emits('change', item.value)
+}
+</script>
+
+<style lang="scss" scoped>
+@use '../../../styles/var.scss' as a;
+
+.#{a.$prefix}-nav-tabs {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 40px;
+  box-sizing: border-box;
+
+  &__left {
+    flex-shrink: 0;
+    margin-right: 10px;
+  }
+
+  &__right {
+    flex-shrink: 0;
+    margin-left: 10px;
+  }
+
+  &__scroll {
+    flex: 1;
+    display: flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    height: 100%;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &:not(.#{a.$prefix}-nav-tabs--custom) {
+    .#{a.$prefix}-nav-tabs-item {
+      padding: 0 16px;
+      color: var(--el-text-color-regular);
+      position: relative;
+      font-size: 14px;
+    }
+
+    .#{a.$prefix}-nav-tabs-item--active {
+      color: var(--el-color-primary);
+      font-weight: 500;
+
+      &::after {
+        content: '';
+        position: absolute;
+        left: 16px;
+        right: 16px;
+        bottom: 0;
+        height: 2px;
+        background: var(--el-color-primary);
+      }
+    }
+
+    .#{a.$prefix}-nav-tabs-item--disabled {
+      color: var(--el-text-color-disabled);
+      cursor: not-allowed;
+    }
+  }
+}
+
+.#{a.$prefix}-nav-tabs--custom {
+  .#{a.$prefix}-nav-tabs__scroll {
+    gap: 8px;
+  }
+
+  .#{a.$prefix}-nav-tabs-item {
+    padding: 0;
+    height: auto;
+    line-height: inherit;
+  }
+}
+
+.#{a.$prefix}-nav-tabs-item {
+  flex-shrink: 0;
+  cursor: pointer;
+  user-select: none;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+</style>

package/packages/components/nav-tabs/src/type.ts

@@ -0,0 +1,13 @@
+export type NavTabItem = {
+  label: string
+  value: string | number
+  disabled?: boolean
+  [key: string]: unknown
+}
+
+export interface NavTabsProps {
+  data?: NavTabItem[]
+  wheelSpeed?: number
+  /** 自定义项样式：无 padding，不应用 --active / --disabled 修饰类 */
+  custom?: boolean
+}

package/packages/components.d.ts

@@ -1,33 +1,34 @@
-/* eslint-disable */
-// @ts-nocheck
-// Generated by unplugin-vue-components
-// Read more: https://github.com/vuejs/core/pull/3399
-// biome-ignore lint: disable
-export {}
-
-/* prettier-ignore */
-declare module 'vue' {
-  export interface GlobalComponents {
-    GiButton: typeof import('./components/button/src/button.vue')['default']
-    GiCard: typeof import('./components/card/src/card.vue')['default']
-    GiDescriptions: typeof import('./components/descriptions/src/descriptions.vue')['default']
-    GiDialog: typeof import('./components/dialog/src/dialog.vue')['default']
-    GiDialogContent: typeof import('./components/dialog/src/dialog-content.vue')['default']
-    GiDot: typeof import('./components/dot/src/dot.vue')['default']
-    GiDrawer: typeof import('./components/drawer/src/drawer.vue')['default']
-    GiEditTable: typeof import('./components/edit-table/src/edit-table.vue')['default']
-    GiFlex: typeof import('./components/flex/src/flex.vue')['default']
-    GiForm: typeof import('./components/form/src/form.vue')['default']
-    GiGrid: typeof import('./components/grid/src/grid.vue')['default']
-    GiGridItem: typeof import('./components/grid/src/grid-item.vue')['default']
-    GiInputGroup: typeof import('./components/input-group/src/input-group.vue')['default']
-    GiInputSearch: typeof import('./components/input-search/src/input-search.vue')['default']
-    GiPageLayout: typeof import('./components/page-layout/src/page-layout.vue')['default']
-    GiSplitButton: typeof import('./components/page-layout/src/split-button.vue')['default']
-    GiTable: typeof import('./components/table/src/table.vue')['default']
-    GiTableColumn: typeof import('./components/table/src/TableColumn.vue')['default']
-    GiTabs: typeof import('./components/tabs/src/tabs.vue')['default']
-    GiTag: typeof import('./components/tag/src/tag.vue')['default']
-    GiTreeTransfer: typeof import('./components/tree-transfer/src/tree-transfer.vue')['default']
-  }
-}
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    GiButton: typeof import('./components/button/src/button.vue')['default']
+    GiCard: typeof import('./components/card/src/card.vue')['default']
+    GiDescriptions: typeof import('./components/descriptions/src/descriptions.vue')['default']
+    GiDialog: typeof import('./components/dialog/src/dialog.vue')['default']
+    GiDialogContent: typeof import('./components/dialog/src/dialog-content.vue')['default']
+    GiDot: typeof import('./components/dot/src/dot.vue')['default']
+    GiDrawer: typeof import('./components/drawer/src/drawer.vue')['default']
+    GiEditTable: typeof import('./components/edit-table/src/edit-table.vue')['default']
+    GiFlex: typeof import('./components/flex/src/flex.vue')['default']
+    GiForm: typeof import('./components/form/src/form.vue')['default']
+    GiGrid: typeof import('./components/grid/src/grid.vue')['default']
+    GiGridItem: typeof import('./components/grid/src/grid-item.vue')['default']
+    GiInputGroup: typeof import('./components/input-group/src/input-group.vue')['default']
+    GiInputSearch: typeof import('./components/input-search/src/input-search.vue')['default']
+    GiNavTabs: typeof import('./components/nav-tabs/src/nav-tabs.vue')['default']
+    GiPageLayout: typeof import('./components/page-layout/src/page-layout.vue')['default']
+    GiSplitButton: typeof import('./components/page-layout/src/split-button.vue')['default']
+    GiTable: typeof import('./components/table/src/table.vue')['default']
+    GiTableColumn: typeof import('./components/table/src/TableColumn.vue')['default']
+    GiTabs: typeof import('./components/tabs/src/tabs.vue')['default']
+    GiTag: typeof import('./components/tag/src/tag.vue')['default']
+    GiTreeTransfer: typeof import('./components/tree-transfer/src/tree-transfer.vue')['default']
+  }
+}

package/packages/hooks/index.ts

@@ -1 +1,2 @@
 export * from './useBemClass'
+export * from './useNavTabs'

package/packages/hooks/useNavTabs.ts

@@ -0,0 +1,275 @@
+import type { MaybeRefOrGetter } from 'vue'
+import {
+  getCurrentInstance,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  toRef,
+  toValue,
+  watch
+} from 'vue'
+
+export interface UseNavTabsOptions {
+  /** 根容器：选择器（.tab）或 HTMLElement / Ref */
+  tabEl: MaybeRefOrGetter<string | HTMLElement | null>
+  /** 滚动容器：类名 tab__scroll 或 .tab__scroll 或 HTMLElement */
+  tabScrollEl: MaybeRefOrGetter<string | HTMLElement | null>
+  /** tab 项 class，如 tab-item */
+  tabItemClassName: string
+  /** 当前选中值；变化时自动居中（推荐传入） */
+  activeValue?: MaybeRefOrGetter<string | number | undefined>
+  /** 滚轮换算系数，默认 1 */
+  wheelSpeed?: number
+}
+
+export interface UseNavTabsReturn {
+  /** 滚动到当前选中项并居中 */
+  scrollToActive: (behavior?: ScrollBehavior) => void
+  /** 获取解析后的滚动容器 */
+  getScrollEl: () => HTMLElement | null
+}
+
+function normalizeSelector(value: string): string {
+  if (value.startsWith('.') || value.startsWith('#')) {
+    return value
+  }
+  return `.${value}`
+}
+
+function resolveElement(
+  target: string | HTMLElement | null | undefined,
+  root?: HTMLElement | Document | null
+): HTMLElement | null {
+  if (!target) {
+    return null
+  }
+  if (typeof target !== 'string') {
+    return target
+  }
+  const scope = root ?? document
+  return scope.querySelector(normalizeSelector(target))
+}
+
+/** 滚轮平滑插值系数，越大跟手越快 */
+const WHEEL_SCROLL_LERP = 0.4
+const WHEEL_LINE_HEIGHT = 16
+
+function getWheelPixelDelta(event: WheelEvent, scrollEl: HTMLElement): number {
+  let delta = Math.abs(event.deltaX) > Math.abs(event.deltaY)
+    ? event.deltaX
+    : event.deltaY
+
+  if (event.deltaMode === WheelEvent.DOM_DELTA_LINE) {
+    delta *= WHEEL_LINE_HEIGHT
+  } else if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+    delta *= scrollEl.clientWidth
+  }
+
+  return delta
+}
+
+function clampScrollLeft(scrollEl: HTMLElement, left: number): number {
+  const maxScroll = Math.max(0, scrollEl.scrollWidth - scrollEl.clientWidth)
+  return Math.max(0, Math.min(left, maxScroll))
+}
+
+function scrollItemToCenter(
+  scrollEl: HTMLElement,
+  activeEl: HTMLElement,
+  behavior: ScrollBehavior = 'smooth'
+) {
+  const maxScroll = scrollEl.scrollWidth - scrollEl.clientWidth
+  if (maxScroll <= 0) {
+    return
+  }
+
+  // 使用视口坐标计算，兼容 flex gap / margin 等间距，避免 offsetLeft 偏差
+  const scrollRect = scrollEl.getBoundingClientRect()
+  const activeRect = activeEl.getBoundingClientRect()
+  const activeLeftInContent = activeRect.left - scrollRect.left + scrollEl.scrollLeft
+  const target = activeLeftInContent - (scrollEl.clientWidth - activeRect.width) / 2
+
+  scrollEl.scrollTo({
+    left: Math.max(0, Math.min(target, maxScroll)),
+    behavior
+  })
+}
+
+export function useNavTabs(options: UseNavTabsOptions): UseNavTabsReturn {
+  const {
+    tabEl,
+    tabScrollEl,
+    tabItemClassName,
+    activeValue,
+    wheelSpeed = 1
+  } = options
+
+  const activeClassName = `${tabItemClassName}--active`
+  const itemSelector = normalizeSelector(tabItemClassName)
+
+  let rootEl: HTMLElement | null = null
+  let scrollEl: HTMLElement | null = null
+  let resizeObserver: ResizeObserver | null = null
+  let wheelRafId: number | null = null
+  let wheelTargetScrollLeft = 0
+
+  const cancelWheelAnimation = () => {
+    if (wheelRafId !== null) {
+      cancelAnimationFrame(wheelRafId)
+      wheelRafId = null
+    }
+  }
+
+  const runWheelAnimation = () => {
+    if (!scrollEl) {
+      cancelWheelAnimation()
+      return
+    }
+
+    const current = scrollEl.scrollLeft
+    const diff = wheelTargetScrollLeft - current
+
+    if (Math.abs(diff) < 0.5) {
+      scrollEl.scrollLeft = wheelTargetScrollLeft
+      cancelWheelAnimation()
+      return
+    }
+
+    scrollEl.scrollLeft = current + diff * WHEEL_SCROLL_LERP
+    wheelRafId = requestAnimationFrame(runWheelAnimation)
+  }
+
+  const resolveElements = () => {
+    const instanceRoot = getCurrentInstance()?.proxy?.$el as HTMLElement | undefined
+    const fallbackRoot = instanceRoot instanceof HTMLElement ? instanceRoot : document
+
+    rootEl = resolveElement(toValue(tabEl), fallbackRoot)
+    scrollEl = resolveElement(toValue(tabScrollEl), rootEl ?? fallbackRoot)
+
+    return Boolean(rootEl && scrollEl)
+  }
+
+  const findActiveItem = (): HTMLElement | null => {
+    if (!scrollEl) {
+      return null
+    }
+
+    const activeByClass = scrollEl.querySelector(normalizeSelector(activeClassName))
+    if (activeByClass instanceof HTMLElement) {
+      return activeByClass
+    }
+
+    const value = activeValue !== undefined ? toValue(activeValue) : undefined
+    if (value === undefined) {
+      return null
+    }
+
+    const items = scrollEl.querySelectorAll<HTMLElement>(itemSelector)
+    const matched = Array.from(items).find((item) => item.dataset.value === String(value))
+    return matched ?? null
+  }
+
+  const scrollToActive = (behavior: ScrollBehavior = 'smooth') => {
+    if (!scrollEl) {
+      return
+    }
+    cancelWheelAnimation()
+    const activeItem = findActiveItem()
+    if (activeItem) {
+      scrollItemToCenter(scrollEl, activeItem, behavior)
+    }
+  }
+
+  const handleWheel = (event: WheelEvent) => {
+    if (!scrollEl) {
+      return
+    }
+
+    const delta = getWheelPixelDelta(event, scrollEl)
+    if (delta === 0) {
+      return
+    }
+
+    event.preventDefault()
+
+    if (wheelRafId === null) {
+      wheelTargetScrollLeft = scrollEl.scrollLeft
+    }
+
+    wheelTargetScrollLeft = clampScrollLeft(
+      scrollEl,
+      wheelTargetScrollLeft + delta * wheelSpeed
+    )
+
+    if (wheelRafId === null) {
+      wheelRafId = requestAnimationFrame(runWheelAnimation)
+    }
+  }
+
+  const bindWheel = () => {
+    scrollEl?.addEventListener('wheel', handleWheel, { passive: false })
+  }
+
+  const unbindWheel = () => {
+    scrollEl?.removeEventListener('wheel', handleWheel)
+    cancelWheelAnimation()
+  }
+
+  const bindResizeObserver = () => {
+    if (!scrollEl || typeof ResizeObserver === 'undefined') {
+      return
+    }
+
+    resizeObserver = new ResizeObserver(() => {
+      scrollToActive('auto')
+    })
+    resizeObserver.observe(scrollEl)
+  }
+
+  const unbindResizeObserver = () => {
+    resizeObserver?.disconnect()
+    resizeObserver = null
+  }
+
+  const setup = async () => {
+    await nextTick()
+    if (!resolveElements()) {
+      return
+    }
+    bindWheel()
+    bindResizeObserver()
+    scrollToActive('auto')
+  }
+
+  onMounted(() => {
+    setup()
+  })
+
+  watch(
+    () => [toValue(tabEl), toValue(tabScrollEl)] as const,
+    () => {
+      unbindWheel()
+      unbindResizeObserver()
+      setup()
+    }
+  )
+
+  if (activeValue !== undefined) {
+    watch(toRef(activeValue), () => {
+      nextTick(() => scrollToActive())
+    })
+  }
+
+  onUnmounted(() => {
+    unbindWheel()
+    unbindResizeObserver()
+    cancelWheelAnimation()
+    rootEl = null
+    scrollEl = null
+  })
+
+  return {
+    scrollToActive,
+    getScrollEl: () => scrollEl
+  }
+}

package/packages/index.ts

@@ -13,6 +13,7 @@ import GridItem from './components/grid/src/grid-item.vue'
 import Grid from './components/grid/src/grid.vue'
 import InputGroup from './components/input-group'
 import InputSearch from './components/input-search'
+import NavTabs from './components/nav-tabs'
 import PageLayout from './components/page-layout'
 import Table from './components/table'
 import Tabs from './components/tabs'
@@ -28,6 +29,7 @@ export * from './components/dialog'
 export * from './components/drawer'
 export * from './components/edit-table'
 export * from './components/form'
+export * from './components/nav-tabs'
 export * from './components/table'
 export * from './components/tabs'
 export * from './components/tag'
@@ -43,6 +45,7 @@ const components = {
   Tabs,
   InputGroup,
   InputSearch,
+  NavTabs,
   Flex,
   Grid,
   GridItem,
@@ -64,6 +67,7 @@ export const GiDot: typeof Dot = Dot
 export const GiTabs: typeof Tabs = Tabs
 export const GiInputGroup: typeof InputGroup = InputGroup
 export const GiInputSearch: typeof InputSearch = InputSearch
+export const GiNavTabs: typeof NavTabs = NavTabs
 export const GiFlex: typeof Flex = Flex
 export const GiGrid: typeof Grid = Grid
 export const GiGridItem: typeof GridItem = GridItem