@veltra/desktop 1.0.0

package/src/components/scroll/scroll-bar.vue

@@ -0,0 +1,102 @@
+<template>
+  <div v-show="!!size" ref="domRef" :style="style" :class="className"></div>
+</template>
+
+<script lang="ts" setup>
+import { useDrag } from '@veltra/compositions'
+import { bem } from '@veltra/utils'
+import { computed, inject, shallowRef } from 'vue'
+
+import { ScrollDIKey } from './di'
+
+defineOptions({
+  name: 'ScrollBar'
+})
+
+const props = defineProps<{
+  type: 'x' | 'y'
+}>()
+
+const emit = defineEmits<{
+  drag: [offset: number, size: number]
+}>()
+
+/** 滚动条高度(type为x时为宽度) */
+const size = shallowRef(0)
+/** 滚动条偏移量 */
+const offset = shallowRef(0)
+/** 滚动条拖拽前偏移量 */
+let currentOffset = 0
+/** 滚动条轨道尺寸 */
+let trackSize = 0
+
+const { cls } = inject(ScrollDIKey)!
+
+const dragging = shallowRef(false)
+
+const className = computed(() => {
+  return [cls.e(`bar-${props.type}`), bem.is('active', dragging.value)]
+})
+
+const style =
+  props.type === 'x'
+    ? computed(() => {
+        return {
+          width: size.value + 'px',
+          transform: `translateX(${offset.value}px)`
+        }
+      })
+    : computed(() => {
+        return {
+          height: size.value + 'px',
+          transform: `translateY(${offset.value}px)`
+        }
+      })
+
+const domRef = shallowRef<HTMLElement>()
+
+/** 获取拖拽偏移量 */
+const getDragOffset =
+  props.type === 'x'
+    ? (x: number, y: number) => currentOffset + x
+    : (x: number, y: number) => currentOffset + y
+
+// 应用拖拽
+useDrag({
+  target: domRef,
+  onDragStart() {
+    dragging.value = true
+    currentOffset = offset.value
+  },
+  onDragEnd() {
+    dragging.value = false
+  },
+  onDrag({ x, y }) {
+    const newOffset = getDragOffset(x, y)
+    const maxOffset = trackSize - size.value
+
+    if (newOffset < 0) {
+      offset.value = 0
+    } else if (newOffset > maxOffset) {
+      offset.value = maxOffset
+    } else {
+      offset.value = newOffset
+    }
+
+    emit('drag', offset.value, size.value)
+  }
+})
+
+defineExpose({
+  /** 更新滚动条状态 */
+  update(_size: number, _offset: number): void {
+    size.value = _size
+    offset.value = _offset
+  },
+
+  /** 设置轨道尺寸 */
+  setTrackSize(size: number): void {
+    trackSize = size
+  }
+})
+</script>

package/src/components/scroll/scroll.vue

@@ -0,0 +1,208 @@
+<template>
+  <div :class="className" :style="style" ref="scrollRef">
+    <div
+      ref="containerRef"
+      :class="[cls.e('container'), containerClass]"
+      @scroll.passive="handleScroll"
+      :style="containerStyle"
+    >
+      <component
+        ref="contentRef"
+        :style="contentStyle"
+        :class="[cls.e('content'), contentClass]"
+        :is="tag"
+      >
+        <slot />
+      </component>
+    </div>
+
+    <u-scroll-bar type="y" :class="cls.e('bar-y')" @drag="handleDragY" ref="barY" />
+    <u-scroll-bar type="x" :class="cls.e('bar-x')" @drag="handleDragX" ref="barX" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { debounce } from '@cat-kit/core'
+import { useResizeObserver } from '@veltra/compositions'
+import { bem, withUnit } from '@veltra/utils'
+import { type CSSProperties, computed, provide, shallowRef } from 'vue'
+
+import type { ScrollPosition, _ScrollExposed, ScrollProps, ScrollEmits } from '../../types'
+import { ScrollDIKey } from './di'
+import UScrollBar from './scroll-bar.vue'
+
+defineOptions({
+  name: 'Scroll'
+})
+
+const props = withDefaults(defineProps<ScrollProps>(), {
+  tag: 'div'
+})
+
+const emit = defineEmits<ScrollEmits>()
+
+defineSlots<{
+  /** 默认插槽 */
+  default(): any
+  /** 内容插槽 */
+  content(): any
+}>()
+
+const cls = bem('scroll')
+const className = computed(() => {
+  return [cls.b, bem.is('always', props.always)]
+})
+
+// 样式-------------------------------------------------------------
+const style = computed<CSSProperties>(() => {
+  return {
+    height: withUnit(props.height, 'px')
+  }
+})
+
+// 模板引用------------------------------------------------
+/** 内容引用 */
+const contentRef = shallowRef<HTMLElement>()
+/** 滚动根元素引用 */
+const scrollRef = shallowRef<HTMLElement>()
+/** 容器引用 */
+const containerRef = shallowRef<HTMLElement>()
+const barX = shallowRef<InstanceType<typeof UScrollBar>>()
+const barY = shallowRef<InstanceType<typeof UScrollBar>>()
+const minSize = 20
+
+const trackSize = {
+  width: 0,
+  height: 0
+}
+
+useResizeObserver({
+  targets: [contentRef, scrollRef],
+  onResize: (entries) => {
+    if (entries.length && scrollRef.value) {
+      const { clientHeight, clientWidth } = scrollRef.value
+
+      trackSize.width = clientWidth
+      trackSize.height = clientHeight
+
+      barX.value?.setTrackSize(trackSize.width)
+      barY.value?.setTrackSize(trackSize.height)
+      updateBar()
+
+      emit(
+        'resize',
+        entries.map((entry) => entry.target as HTMLElement)
+      )
+    }
+  }
+})
+
+// 更新滚动条
+const updateBar = () => {
+  if (!containerRef.value) return
+
+  const {
+    scrollHeight,
+    clientHeight,
+    scrollTop,
+
+    scrollWidth,
+    clientWidth,
+    scrollLeft
+  } = containerRef.value
+
+  emit('scroll', {
+    x: scrollLeft,
+    y: scrollTop,
+    sw: scrollWidth,
+    sh: scrollHeight,
+    cw: clientWidth,
+    ch: clientHeight
+  })
+
+  if (scrollHeight !== clientHeight) {
+    const barYHeight = Math.max((clientHeight / scrollHeight) * trackSize.height, minSize)
+
+    const barYTop = (scrollTop / (scrollHeight - clientHeight)) * (trackSize.height - barYHeight)
+
+    barY.value?.update(barYHeight, barYTop)
+  } else {
+    barY.value?.update(0, 0)
+  }
+
+  if (scrollWidth !== clientWidth) {
+    const barXWidth = Math.max((clientWidth / scrollWidth) * trackSize.width, minSize)
+
+    const barXLeft = (scrollLeft / (scrollWidth - clientWidth)) * (trackSize.width - barXWidth)
+
+    barX.value?.update(barXWidth, barXLeft)
+  } else {
+    barX.value?.update(0, 0)
+  }
+}
+
+// 滚动条拖拽
+const handleDragX = debounce(
+  (offset: number, size: number) => {
+    const container = containerRef.value!
+    const { clientWidth, scrollWidth } = container
+
+    container.scrollLeft = (offset / (trackSize.width - size)) * (scrollWidth - clientWidth)
+  },
+  props.dragDebounce ?? 0,
+  false
+)
+
+const handleDragY = debounce(
+  (offset: number, size: number) => {
+    const container = containerRef.value!
+    const { clientHeight, scrollHeight } = container
+    container.scrollTop = (offset / (trackSize.height - size)) * (scrollHeight - clientHeight)
+  },
+  props.dragDebounce ?? 0,
+  false
+)
+
+// 滚动事件
+const handleScroll = (e) => {
+  updateBar()
+}
+
+// 滚动至------------------------------------------------
+const scrollToLeft = (left: number) => {
+  const container = containerRef.value
+  if (!container) return
+
+  container.scrollTo({
+    left
+  })
+}
+
+const scrollToTop = (top: number) => {
+  const container = containerRef.value
+  if (!container) return
+
+  container.scrollTo({
+    top
+  })
+}
+
+const scrollTo = (position: ScrollPosition) => {
+  if (position.x !== undefined) scrollToLeft(position.x)
+  if (position.y !== undefined) scrollToTop(position.y)
+}
+
+provide(ScrollDIKey, {
+  cls
+})
+
+const exposed: _ScrollExposed = {
+  el: scrollRef,
+  contentRef,
+  containerRef,
+  scrollTo,
+  update: updateBar
+}
+
+defineExpose(exposed)
+</script>

package/src/components/scroll/style.scss

@@ -0,0 +1,115 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+$root-name: scroll;
+
+@include m.b($root-name) {
+  position: relative;
+  display: flex;
+  // 弹性布局方向为列方向，以便于父级设置最大高度时能应用滚动
+  flex-direction: column;
+  overflow: hidden;
+  scroll-behavior: auto;
+
+  // 滚动容器
+  @include m.e(container) {
+    overflow: auto;
+    height: 100%;
+    flex-grow: 1;
+
+    // 隐藏滚动条
+    scrollbar-width: none;
+    // 隐藏火狐的滚动条
+    scrollbar-color: transparent transparent;
+    -ms-scrollbar-track-color: transparent;
+    scrollbar-track-color: transparent;
+
+    // 兼容隐藏webkit的滚动条
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
+  }
+
+  @include m.e(content) {
+    // min-height: 100%;
+  }
+
+  // 悬浮
+  &:hover > {
+    @include m.bem($root-name, (bar-x, bar-y)) {
+      opacity: 1;
+    }
+  }
+
+  // 滚动条背景色
+  $bar-color: #999;
+
+  // 滚动条默认尺寸(宽度)
+  $bar-size: 6px;
+  // 滚动条滚动或者悬浮时的尺寸
+  $bar-active-size: $bar-size + 4px;
+
+  // 滚动条
+  @include m.e(bar-x, bar-y) {
+    opacity: 0;
+    cursor: default;
+    position: absolute;
+    border-radius: $bar-size;
+    background-color: rgba($color: $bar-color, $alpha: 0.4);
+    will-change: transform;
+    transition:
+      opacity 0.3s ease-in,
+      background-color 0.3s ease-in,
+      height 0.15s ease-in,
+      width 0.15s ease-in;
+
+    z-index: 1;
+
+    &:hover {
+      background-color: rgba($color: $bar-color, $alpha: 0.6);
+      border-radius: $bar-active-size;
+    }
+
+    @include m.is(active) {
+      opacity: 1;
+      background-color: $bar-color;
+      border-radius: $bar-active-size;
+    }
+  }
+
+  @include m.is(always) {
+    @include m.bem($root-name, (bar-y, bar-x)) {
+      opacity: 1;
+    }
+  }
+
+  @include m.e(bar-y) {
+    width: $bar-size;
+    height: 100%;
+    top: 0;
+    right: 0;
+
+    &:hover {
+      width: $bar-active-size;
+    }
+
+    @include m.is(active) {
+      width: $bar-active-size;
+    }
+  }
+
+  @include m.e(bar-x) {
+    height: $bar-size;
+    bottom: 0;
+    left: 0;
+
+    &:hover {
+      height: $bar-active-size;
+    }
+    @include m.is(active) {
+      height: $bar-active-size;
+    }
+  }
+}

package/src/components/scroll/style.ts

@@ -0,0 +1 @@
+import './style.scss'

package/src/components/select/index.ts

@@ -0,0 +1 @@
+export { default as USelect } from './select.vue'