@veltra/desktop 1.0.0

package/src/components/slider/slider-thumb.vue

@@ -0,0 +1,73 @@
+<template>
+  <div ref="thumb" :class="cls.e('thumb')" :style></div>
+</template>
+<script lang="ts" setup>
+import { useDrag, useUpdateLock } from '@veltra/compositions'
+import { computed, inject, useTemplateRef, watch } from 'vue'
+
+import { sliderContextKey } from './di'
+
+const props = defineProps<{
+  modelValue: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: number): void
+}>()
+
+const { cls, range, disabled, sliderProps, getOffsetByStep } = inject(sliderContextKey)!
+
+const thumbRef = useTemplateRef('thumb')
+
+const style = computed(() => {
+  if (sliderProps.vertical) {
+    return {
+      transform: `translate(0, ${props.modelValue}px)`
+    }
+  }
+  return {
+    transform: `translate(${props.modelValue}px, 0)`
+  }
+})
+
+const { updateAndLock, update } = useUpdateLock()
+
+function updateModel(offset: number) {
+  offset = getOffsetByStep(offset)
+  emit('update:modelValue', offset)
+  return offset
+}
+
+const dragger = useDrag({
+  target: computed(() => (disabled.value ? null : thumbRef.value)),
+
+  onDrag({ offsetX, offsetY }) {
+    updateAndLock(() => {
+      updateModel(sliderProps.vertical ? offsetY : offsetX)
+    })
+  },
+  rangeX: range,
+  rangeY: range,
+  onDragEnd({ offsetX, offsetY }) {
+    updateAndLock(() => {
+      const offset = updateModel(sliderProps.vertical ? offsetY : offsetX)
+      updateDragger(offset)
+    })
+  }
+})
+
+function updateDragger(offset: number) {
+  if (sliderProps.vertical) {
+    dragger.update({ offsetY: offset })
+  } else {
+    dragger.update({ offsetX: offset })
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (offset) => {
+    update(() => updateDragger(offset))
+  }
+)
+</script>

package/src/components/slider/slider.vue

@@ -0,0 +1,144 @@
+<template>
+  <div v-if="!readonly" :class="className">
+    <div :class="cls.e('track')" ref="sliderRef" @click="handleClickSlider">
+      <div :class="cls.e('bar')" :style="barStyles" />
+
+      <slider-thumb v-model="offset1" @click.stop />
+      <slider-thumb v-if="range" v-model="offset2" @click.stop />
+
+      <div
+        v-for="tick in ticks"
+        :style="{ [vertical ? 'bottom' : 'left']: `${tick}%` }"
+        :class="cls.e('tick')"
+      />
+    </div>
+  </div>
+
+  <div v-else>
+    {{ props.modelValue }}
+  </div>
+</template>
+
+<script lang="ts" setup generic="T extends number | [number, number]">
+import { useFormComponent, useFormFallbackProps, useUpdateLock } from '@veltra/compositions'
+import { bem } from '@veltra/utils'
+import { computed, provide, watch } from 'vue'
+
+import type { SliderProps, SliderEmits } from '../../types'
+import { sliderContextKey } from './di'
+import SliderThumb from './slider-thumb.vue'
+import { useSlider } from './use-slider'
+
+defineOptions({
+  name: 'Slider'
+})
+
+const props = withDefaults(defineProps<SliderProps<T>>(), {
+  min: 0,
+  max: 100,
+  disabled: undefined,
+  readonly: undefined
+})
+
+const emit = defineEmits<SliderEmits<T>>()
+
+const cls = bem('slider')
+
+const { formProps } = useFormComponent()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])
+
+const className = computed(() => {
+  return [
+    cls.b,
+    cls.m(size.value),
+    bem.is('disabled', disabled.value),
+    bem.is('range', props.range),
+    bem.is('horizontal', !props.vertical),
+    bem.is('vertical', props.vertical)
+  ]
+})
+
+const {
+  offset1,
+  offset2,
+  sliderRef,
+  slideRange,
+  sliderSize,
+  sliderOffset2Value,
+  value2SliderOffset,
+  getOffsetByStep
+} = useSlider(props)
+
+const barStyles = computed(() => {
+  const { vertical } = props
+  const offsetProp = vertical ? 'bottom' : 'left'
+  const sizeProp = vertical ? 'height' : 'width'
+
+  if (!props.range) {
+    return {
+      [offsetProp]: 0,
+      [sizeProp]: `${Math.abs(offset1.value)}px`
+    }
+  }
+  return {
+    [offsetProp]: `${Math.min(Math.abs(offset1.value), Math.abs(offset2.value))}px`,
+    [sizeProp]: `${Math.abs(offset1.value - offset2.value)}px`
+  }
+})
+
+const { updateAndLock, update } = useUpdateLock()
+
+watch(
+  [sliderSize, ...['modelValue', 'range', 'max', 'min', 'vertical'].map((k) => () => props[k])],
+  ([size, value, range]) => {
+    update(() => {
+      if (value === undefined || size === 0) return
+
+      if (range) {
+        offset1.value = value2SliderOffset((value as [number, number])[0])
+        offset2.value = value2SliderOffset((value as [number, number])[1])
+      } else {
+        offset1.value = value2SliderOffset(value as number)
+      }
+    })
+  },
+  { immediate: true }
+)
+
+const ticks = computed(() => {
+  const { step, min, max } = props
+  if (!step) return []
+  const tickLength = Math.ceil((max! - min!) / step)
+  const offsetPercent = (step / (max! - min!)) * 100
+
+  return [...Array.from({ length: tickLength }, (_, i) => i * offsetPercent), 100]
+})
+
+watch([offset1, offset2], (v) => {
+  updateAndLock(() => {
+    if (props.range) {
+      emit('update:modelValue', v.map(sliderOffset2Value).sort() as T)
+    } else {
+      emit('update:modelValue', sliderOffset2Value(v[0]) as T)
+    }
+  })
+})
+
+function handleClickSlider(e: MouseEvent) {
+  if (disabled.value || props.range) return
+
+  // 获取点击位置相对于滑块的偏移量
+  const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+
+  offset1.value = getOffsetByStep(e.clientX - rect.left)
+}
+
+provide(sliderContextKey, {
+  sliderProps: props,
+  disabled,
+  range: slideRange,
+  cls,
+  getOffsetByStep
+})
+</script>

package/src/components/slider/style.scss

@@ -0,0 +1,144 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+@use 'sass:math';
+@use 'sass:map';
+
+// 方便拼接
+$root-name: slider;
+
+$slider-size: (
+  small: 18px,
+  default: 24px,
+  large: 30px
+);
+
+$track-size: (
+  small: 6px,
+  default: 8px,
+  large: 10px
+);
+
+@include m.b($root-name) {
+  @include m.is(range) {
+    cursor: default;
+  }
+
+  @include m.is(disabled) {
+    cursor: not-allowed;
+
+    @include m.bem($root-name, bar) {
+      background-color: fn.use-var(color, disabled, dark-1);
+    }
+
+    @include m.bem($root-name, thumb) {
+      cursor: not-allowed;
+      border-color: fn.use-var(color, disabled, dark-1);
+      &:hover {
+        box-shadow: none;
+      }
+    }
+  }
+
+  @include m.e(track) {
+    background-color: fn.use-var(color, disabled);
+    position: relative;
+    cursor: pointer;
+    height: 100%;
+    width: 100%;
+  }
+
+  @include m.e(tick) {
+    position: absolute;
+    z-index: 0;
+    height: 4px;
+    width: 4px;
+    border-radius: 50%;
+    background-color: fn.use-var(bg-color, top);
+  }
+
+  @include m.e(bar) {
+    position: absolute;
+    border-radius: 12px;
+    background-color: fn.use-var(color, primary);
+  }
+
+  @include m.is(horizontal) {
+    width: 100%;
+
+    @include m.bem($root-name, tick) {
+      transform: translateX(-50%);
+    }
+
+    @include m.bem($root-name, bar) {
+      height: 100%;
+    }
+  }
+
+  @include m.is(vertical) {
+    height: 100%;
+
+    @include m.bem($root-name, tick) {
+      transform: translateY(50%);
+    }
+
+    @include m.bem($root-name, bar) {
+      width: 100%;
+    }
+  }
+
+  @include m.size using($size) {
+    $slider-size: map.get($slider-size, $size);
+    $track-size: map.get($track-size, $size);
+    $padding-y: math.div($slider-size - $track-size, 2);
+    $padding-x: math.div($slider-size, 2);
+
+    border-radius: $track-size;
+
+    @include m.bem($root-name, thumb) {
+      width: $slider-size;
+      height: $slider-size;
+    }
+
+    @include m.is(horizontal) {
+      height: $slider-size;
+      padding: $padding-y $padding-x;
+
+      @include m.bem($root-name, thumb) {
+        top: -(math.div($slider-size - $track-size, 2));
+        left: -(math.div($slider-size, 2));
+      }
+
+      @include m.bem($root-name, tick) {
+        top: math.div($track-size - 4px, 2);
+      }
+    }
+
+    @include m.is(vertical) {
+      width: $slider-size;
+      padding: $padding-x $padding-y;
+
+      @include m.bem($root-name, thumb) {
+        left: -(math.div($slider-size - $track-size, 2));
+        bottom: -(math.div($slider-size, 2));
+      }
+
+      @include m.bem($root-name, tick) {
+        left: math.div($track-size - 4px, 2);
+      }
+    }
+  }
+
+  @include m.e(thumb) {
+    border-radius: 50%;
+    background-color: fn.use-var(bg-color, top);
+    position: absolute;
+    cursor: grab;
+    z-index: 1;
+    border: 4px solid fn.use-var(color, primary);
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+}

package/src/components/slider/style.ts

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

package/src/components/slider/use-slider.ts

@@ -0,0 +1,91 @@
+import { useResizeObserver } from '@veltra/compositions'
+import { ref, type Ref, type ShallowRef, shallowRef } from 'vue'
+
+import type { SliderProps } from '../../types'
+
+interface UseSliderReturn {
+  offset1: Ref<number>
+  offset2: Ref<number>
+  sliderSize: Ref<number>
+  sliderRef: ShallowRef<HTMLElement | undefined>
+  slideRange: [number, number]
+  value2SliderOffset: (value: number) => number
+  sliderOffset2Value: (offset: number) => number
+  getOffsetByStep: (offset: number) => number
+}
+
+export function useSlider(props: SliderProps<number | [number, number]>): UseSliderReturn {
+  const sliderRef = shallowRef<HTMLElement>()
+  const sliderSize = ref(0)
+  const slideRange: [number, number] = [0, 0]
+  const offset1 = ref(0)
+  const offset2 = ref(0)
+
+  useResizeObserver({
+    targets: sliderRef,
+    onResize([entry]) {
+      if (!entry) return
+      const { blockSize, inlineSize } = entry.borderBoxSize[0] ?? {}
+      sliderSize.value = (props.vertical ? blockSize : inlineSize) ?? 0
+      if (props.vertical) {
+        slideRange[0] = -sliderSize.value
+        slideRange[1] = 0
+      } else {
+        slideRange[0] = 0
+        slideRange[1] = sliderSize.value
+      }
+    }
+  })
+
+  /**
+   * 将value转换为slider的offset
+   * @param value
+   * @returns
+   */
+  function value2SliderOffset(value: number): number {
+    const { min, max, vertical } = props
+    const progress = (value - min!) / (max! - min!)
+    const offset = sliderSize.value * progress
+    return vertical ? -offset : offset
+  }
+
+  /**
+   * 将slider的offset转换为value
+   * @param offset
+   * @returns
+   */
+  function sliderOffset2Value(offset: number): number {
+    const { min, max } = props
+    const progress = Math.abs(offset) / sliderSize.value
+
+    return Math.round(progress * (max! - min!) + min!)
+  }
+
+  function getOffsetByStep(offset: number) {
+    const { min, max, step } = props
+
+    if (step) {
+      const slideStep = (sliderSize.value / (max! - min!)) * step
+      offset = Math.round(offset / slideStep) * slideStep
+
+      if (offset > slideRange[1]) {
+        offset = slideRange[1]
+      } else if (offset < slideRange[0]) {
+        offset = slideRange[0]
+      }
+    }
+
+    return offset
+  }
+
+  return {
+    offset1,
+    offset2,
+    sliderSize,
+    sliderRef,
+    slideRange,
+    value2SliderOffset,
+    sliderOffset2Value,
+    getOffsetByStep
+  }
+}

package/src/components/steps/index.ts

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

package/src/components/steps/steps.vue

@@ -0,0 +1,175 @@
+<template>
+  <ol :class="className" ref="steps">
+    <li
+      v-for="(item, index) in items"
+      :class="[
+        cls.e('item'),
+        bem.is('current', index === currentIndex),
+        bem.is('finished', currentIndex === undefined || index < currentIndex)
+      ]"
+      @click="handleStepClick(item, index)"
+    >
+      <div :class="cls.e('node')">
+        <i :class="cls.e('link')" v-if="index !== items.length - 1"></i>
+
+        <span
+          :class="cls.e('icon')"
+          @mouseenter="handleStepMouseenter($event, item, index)"
+          @mouseleave="handleStepMouseleave"
+        >
+          <slot name="icon" :item="item" :index="index">
+            <UIcon v-if="currentIndex === undefined || index < currentIndex">
+              <Check />
+            </UIcon>
+
+            <template v-else>
+              {{ index + 1 }}
+            </template>
+          </slot>
+        </span>
+      </div>
+
+      <div :class="cls.e('content')">
+        <slot name="content" :item="item" :index="index">
+          {{ o(item).get(labelKey) }}
+        </slot>
+      </div>
+    </li>
+
+    <u-tip
+      v-if="slots.tip"
+      ref="tip"
+      :trigger-dom="tipTriggerDom"
+      v-model:visible="tipVisible"
+      @update:visible="handleTipUpdateVisible"
+    >
+      <template #content>
+        <UNodeRender :content="tipContent" />
+      </template>
+    </u-tip>
+  </ol>
+</template>
+
+<script lang="ts" setup>
+import { n, o } from '@cat-kit/core'
+import { useFallbackProps } from '@veltra/compositions'
+import { Check } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { computed, shallowRef, useTemplateRef, watch } from 'vue'
+
+import type { StepsProps, StepsEmits, ComponentSize, StepsSlotScope } from '../../types'
+import { UIcon } from '../icon'
+import { UNodeRender } from '../node-render'
+import { UTip } from '../tip'
+
+defineOptions({
+  name: 'Steps'
+})
+
+const props = withDefaults(defineProps<StepsProps>(), {
+  direction: 'horizontal',
+  finishedStepType: 'success',
+  labelKey: 'label'
+})
+
+const emit = defineEmits<StepsEmits>()
+
+const slots = defineSlots<{
+  icon?: (scope: StepsSlotScope) => any
+  content?: (scope: StepsSlotScope) => any
+  tip?: (scope: StepsSlotScope) => any
+}>()
+
+const cls = bem('steps')
+
+const { size } = useFallbackProps([props], {
+  size: 'default' as ComponentSize
+})
+
+const className = computed(() => {
+  const { direction, currentStepType, finishedStepType } = props
+  const ret: string[] = [
+    cls.b,
+    bem.is(direction),
+    cls.m(size.value),
+    bem.is('align-center', props.alignCenter),
+    cls.em('finished', finishedStepType)
+  ]
+  currentStepType && ret.push(cls.em('current', currentStepType))
+  return ret
+})
+
+const stepsRef = useTemplateRef('steps')
+
+const currentToIndexMap = computed<Record<string, number> | undefined>(() => {
+  const { currentKey, items } = props
+  if (!currentKey) return undefined
+  return items.reduce(
+    (acc, item, index) => {
+      acc[o(item).get(currentKey)] = index
+      return acc
+    },
+    {} as Record<string, number>
+  )
+})
+
+/** 当前索引 */
+const currentIndex = computed<number | undefined>(() => {
+  const { currentKey, current } = props
+  if (current === undefined) return undefined
+
+  if (currentKey) {
+    return currentToIndexMap.value?.[current]
+  }
+
+  if (typeof current !== 'number') return undefined
+  return n(current).range(0, props.items.length - 1)
+})
+
+watch(currentIndex, (index) => {
+  if (index === undefined || props.direction === 'vertical') return
+  const step = stepsRef.value?.children[index]
+  if (step) {
+    step.scrollIntoView({
+      behavior: 'smooth',
+      block: 'center'
+    })
+  }
+})
+
+// 点击步骤项
+function handleStepClick(item: Record<string, any>, index: number) {
+  emit('item-click', item, index)
+  emit('update:current', props.currentKey ? o(item).get(props.currentKey) : index)
+}
+
+// 提示
+const tipVisible = shallowRef(false)
+const tipTriggerDom = shallowRef<HTMLElement>()
+const tipContent = shallowRef()
+
+function handleStepMouseenter(event: MouseEvent, item: Record<string, any>, index: number) {
+  if (!slots.tip) return
+  tipTriggerDom.value = event.target as HTMLElement
+  tipVisible.value = true
+  tipContent.value = slots.tip?.({ item, index })
+}
+
+let timer: number | undefined = undefined
+function closeTip() {
+  timer = setTimeout(() => {
+    tipVisible.value = false
+    tipContent.value = undefined
+    tipTriggerDom.value = undefined
+  }, 250)
+}
+
+function handleTipUpdateVisible(visible: boolean) {
+  visible && clearTimeout(timer)
+}
+
+function handleStepMouseleave() {
+  if (!slots.tip) return
+  closeTip()
+}
+</script>