@veltra/desktop 1.0.0

package/src/components/select/select.vue

@@ -0,0 +1,315 @@
+<template>
+  <u-dropdown
+    v-if="!readonly"
+    trigger="click"
+    :class="[cls.b, bem.is('disabled', disabled)]"
+    ref="dropdownRef"
+    v-model:visible="dropdownVisible"
+    :content-class="[cls.e('panel'), cls.em('panel', size), contentClass]"
+    :content-style="contentStyle"
+    :disabled="disabled"
+    :min-width="minWidth"
+    :width="width"
+    @keydown="handleKeydown"
+    @update:visible="handleDropdownVisible"
+  >
+    <!-- 触发 -->
+    <template #trigger>
+      <u-input
+        :size="size"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :clearable="clearable"
+        :model-value="selected ? (o(selected).get(labelKey) ?? label) : modelValue"
+        @clear="handleClear"
+        @keydown="handleKeydown"
+        native-readonly
+      >
+        <template #prefix v-if="$slots.prefix">
+          <slot name="prefix" />
+        </template>
+
+        <template #suffix>
+          <u-icon :class="cls.e('arrow')">
+            <ArrowDown />
+          </u-icon>
+        </template>
+      </u-input>
+    </template>
+
+    <!-- 下拉内容 -->
+    <template #content>
+      <!-- 过滤器 -->
+      <div v-if="filterable" :class="cls.e('content-filter')">
+        <u-input placeholder="输入关键字进行搜索" tabindex="0" v-focus v-model="queryString">
+          <template #suffix>
+            <u-icon>
+              <Search />
+            </u-icon>
+          </template>
+        </u-input>
+      </div>
+
+      <!-- 单选列表 -->
+      <u-scroll
+        v-if="options.length"
+        tag="ul"
+        :class="cls.e('options')"
+        ref="scrollRef"
+        :content-class="[
+          cls.e('options-wrap'),
+          bem.is('virtual', virtualEnabled),
+          bem.is('grid', !!grid)
+        ]"
+        :content-style="{
+          height: virtualEnabled ? withUnit(totalHeight, 'px') : undefined,
+          gridTemplateColumns: grid ? `repeat(${grid.cols}, minmax(0px, 1fr))` : undefined,
+          gridGap: grid ? withUnit(grid.gap, 'px') : undefined
+        }"
+      >
+        <template v-if="virtualEnabled">
+          <!-- @vue-ignore -->
+          <li
+            v-for="{ option, index, val, label, key, offset } of virtualOptions"
+            :class="[optionClass, bem.is('selected', index === currentIndex)]"
+            @click="handleSelect(option, index)"
+            :key="key"
+            :style="{ transform: `translateY(${offset}px)` }"
+            :data-index="index"
+            :ref="measureElement"
+          >
+            <slot v-bind="{ option, index }">
+              {{ label }}
+            </slot>
+          </li>
+        </template>
+
+        <template v-else>
+          <li
+            v-for="(option, index) of options"
+            :class="[optionClass, bem.is('selected', index === currentIndex)]"
+            @click="handleSelect(option, index)"
+            :data-index="index"
+            :title="o(option).get(labelKey)"
+            :key="o(option).get(valueKey)"
+          >
+            <slot v-bind="{ option, index }">
+              {{ o(option).get(labelKey) }}
+            </slot>
+          </li>
+        </template>
+      </u-scroll>
+
+      <div v-else :class="cls.e('empty')">
+        <UEmpty />
+      </div>
+    </template>
+  </u-dropdown>
+
+  <template v-else>
+    {{ label || selected?.[labelKey] || FORM_EMPTY_CONTENT }}
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { o } from '@cat-kit/core'
+import { useFormComponent, useFormFallbackProps, useVirtual } from '@veltra/compositions'
+import { vFocus } from '@veltra/directives'
+import { ArrowDown, Search } from '@veltra/icons/normal'
+import { bem, withUnit, scrollIntoContainerView } from '@veltra/utils'
+import { FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { computed, nextTick, shallowRef, watch } from 'vue'
+
+import type {
+  SelectEmits,
+  SelectProps,
+  _SelectExposed,
+  DropdownExposed,
+  ScrollExposed
+} from '../../types'
+import { UDropdown } from '../dropdown'
+import { UEmpty } from '../empty'
+import { UIcon } from '../icon'
+import { UInput } from '../input'
+import { UScroll } from '../scroll'
+import { useKeyboard } from './use-keyboard'
+import { useOptions } from './use-options'
+
+defineOptions({ name: 'Select' })
+
+const props = withDefaults(defineProps<SelectProps>(), {
+  labelKey: 'label',
+  valueKey: 'value',
+  placeholder: '请选择',
+  clearable: true,
+  disabled: undefined,
+  readonly: undefined
+})
+
+const emit = defineEmits<SelectEmits>()
+
+defineSlots<{
+  /** 前缀插槽 */
+  prefix?: () => any
+  /** 默认插槽 */
+  default?: (scope: { option: Record<string, any>; index: number }) => any
+}>()
+
+const cls = bem('select')
+
+const optionClass = cls.e('option')
+
+const { formProps } = useFormComponent()
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default',
+  disabled: false,
+  readonly: false
+})
+
+const currentIndex = shallowRef(-1)
+const label = defineModel('text')
+const selected = shallowRef<Record<string, any>>()
+
+const dropdownRef = shallowRef<DropdownExposed>()
+const scrollRef = shallowRef<ScrollExposed>()
+
+const filterable = computed(() => {
+  return props.filterable || typeof props.options === 'function'
+})
+
+const { queryString, options, temOptionsToCreatedOptions, clearCreatedOptions } = useOptions({
+  props
+})
+
+// TODO: 优化
+let userSelecting = false
+function lock() {
+  userSelecting = true
+}
+
+function unlock() {
+  nextTick(() => {
+    userSelecting = false
+  })
+}
+
+// 回显
+watch(
+  [() => props.modelValue, options],
+  ([modelValue, options]) => {
+    if (userSelecting) return
+
+    if (!options?.length) return
+
+    if (modelValue !== undefined) {
+      const { valueKey } = props
+      currentIndex.value = options.findIndex((option) => o(option).get(valueKey) === modelValue)
+      selected.value = options[currentIndex.value]
+    } else {
+      currentIndex.value = -1
+      selected.value = undefined
+    }
+  },
+  { immediate: true }
+)
+
+const {
+  virtualList,
+  totalHeight,
+  virtualEnabled: _virtualEnabled,
+  scrollTo,
+  measureElement
+} = useVirtual({
+  count: computed(() => options.value.length),
+  virtualThreshold: 80,
+  scrollEl: computed(() => scrollRef.value?.containerRef ?? null),
+  gap: 4,
+  estimateSize: () => 40
+})
+
+const virtualEnabled = computed(() => {
+  return _virtualEnabled.value && !props.grid
+})
+
+const virtualOptions = computed(() => {
+  const _options = options.value
+  const { labelKey, valueKey } = props
+  return virtualList.value.map((item) => {
+    const option = _options[item.index]!
+    return {
+      option,
+      index: item.index,
+      label: o(option).get(labelKey),
+      val: o(option).get(valueKey),
+      key: item.key,
+      offset: item.start
+    }
+  })
+})
+
+watch([scrollRef, virtualEnabled], ([scroll, virtualEnabled]) => {
+  if (!scroll || !props.modelValue) return
+
+  if (virtualEnabled) {
+    const index = options.value.findIndex((option) => option === selected.value)
+    index !== -1 && dropdownVisible.value && nextTick(() => scrollTo(index))
+  } else {
+    const selectedEl = scroll?.contentRef?.getElementsByClassName('is-selected')[0]
+    if (selectedEl) {
+      scrollIntoContainerView(selectedEl as HTMLElement, scroll.containerRef ?? null)
+    }
+  }
+})
+
+const dropdownVisible = shallowRef(false)
+
+watch(dropdownVisible, (v) => {
+  if (!v) {
+    queryString.value = ''
+  }
+})
+
+const handleDropdownVisible = (visible: boolean) => {
+  if (!visible) {
+    queryString.value = ''
+  }
+}
+
+/** 单选 */
+const handleSelect = (option: Record<string, any>, index: number) => {
+  lock()
+  selected.value = option
+
+  emit('update:modelValue', option?.[props.valueKey])
+  label.value = option?.[props.labelKey]
+  emit('change', option)
+  if (option.__isTemp) {
+    temOptionsToCreatedOptions()
+  }
+  currentIndex.value = index
+  dropdownRef.value?.close()
+
+  unlock()
+}
+
+/** 清除选项 */
+const handleClear = () => {
+  lock()
+  selected.value = undefined
+  clearCreatedOptions()
+  emit('update:modelValue', undefined)
+  emit('change', undefined)
+  unlock()
+}
+
+function getCurrentEl() {
+  return scrollRef.value?.contentRef?.querySelector('li.is-selected') as HTMLElement | undefined
+}
+
+const { handleKeydown } = useKeyboard({
+  options,
+  currentIndex,
+  selectOption: handleSelect,
+  getCurrentEl
+})
+</script>

package/src/components/select/style.scss

@@ -0,0 +1,136 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+
+$root-name: select;
+@include m.b($root-name) {
+  --u-menu-hover-bg: rgba(148, 163, 184, 0.12);
+  --u-menu-hover-color: #{fn.use-var(text-color, title)};
+  --u-menu-active-bg: rgba(59, 130, 246, 0.12);
+  --u-menu-active-color: var(--u-color-primary-dark-1);
+
+  @include m.dark() {
+    --u-menu-hover-bg: rgba(148, 163, 184, 0.14);
+    --u-menu-hover-color: #{fn.use-var(text-color, title)};
+    --u-menu-active-bg: rgba(96, 165, 250, 0.2);
+    --u-menu-active-color: #{fn.use-var(text-color, white)};
+  }
+
+  width: 100%;
+
+  @include m.e(content-filter) {
+    border-bottom: 1px solid fn.use-var(border, color);
+    background-color: fn.use-var(bg-color, middle);
+
+    @include m.bem(input) {
+      box-shadow: none;
+    }
+  }
+
+  @include m.e(options) {
+    max-height: 180px;
+  }
+
+  @include m.is(disabled) {
+    @include m.bem($root-name, arrow) {
+      color: fn.use-var(text-color, disabled);
+    }
+  }
+
+  @include m.e(options-wrap) {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+
+    @include m.is(virtual) {
+      position: relative;
+
+      & {
+        @include m.bem($root-name, option) {
+          position: absolute;
+          top: 0;
+          left: 0;
+        }
+      }
+    }
+
+    @include m.is(grid) {
+      display: grid;
+      gap: unset;
+
+      @include m.bem($root-name, option) {
+        height: auto;
+        line-height: auto;
+      }
+    }
+  }
+
+  @include m.e(option) {
+    cursor: pointer;
+    user-select: none;
+    width: 100%;
+    box-sizing: border-box;
+    color: fn.use-var(text-color, main);
+    transition:
+      background-color 0.15s ease,
+      color 0.15s ease;
+
+    @include m.ellipsis;
+
+    &:hover {
+      background-color: var(--u-menu-hover-bg);
+      color: var(--u-menu-hover-color);
+    }
+
+    @include m.is(selected) {
+      position: relative;
+      background-color: var(--u-menu-active-bg);
+      color: var(--u-menu-active-color);
+      font-weight: 600;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 50%;
+        width: 3px;
+        height: 56%;
+        min-height: 10px;
+        border-radius: 9999px;
+        background-color: fn.use-var(color, primary);
+        transform: translateY(-50%);
+        pointer-events: none;
+      }
+    }
+  }
+
+  @include m.e(empty) {
+    color: fn.use-var(text-color, main);
+  }
+
+  @include m.e(panel) {
+    @include m.size using ($size) {
+      @include m.bem($root-name, content-filter) {
+        padding: calc(fn.use-var(gap, $size) / 2) fn.use-var(gap, $size);
+      }
+
+      @include m.bem($root-name, options) {
+        padding: fn.use-var(gap, $size);
+      }
+
+      @include m.bem($root-name, option) {
+        padding: 0 fn.use-var(gap, $size);
+        border-radius: fn.use-var(radius, $size);
+        height: fn.use-var(form-component-height, $size);
+        line-height: fn.use-var(form-component-height, $size);
+      }
+    }
+  }
+
+  @include m.e(empty) {
+    text-align: center;
+    padding: fn.use-var(gap, small) 0;
+  }
+}

package/src/components/select/style.ts

@@ -0,0 +1,7 @@
+import '../dropdown/style'
+import '../scroll/style'
+import '../input/style'
+import '../icon/style'
+import '../empty/style'
+import '@veltra/directives/ripple/style.js'
+import './style.scss'

package/src/components/select/use-keyboard.ts

@@ -0,0 +1,54 @@
+import { nextTick, type ShallowRef } from 'vue'
+
+interface UseKeyboardConfig {
+  options: ShallowRef<Record<string, any>[]>
+  currentIndex: ShallowRef<number>
+  selectOption: (option: Record<string, any>, index: number) => void
+  getCurrentEl: () => HTMLElement | undefined
+}
+
+interface UseKeyboardReturned {
+  /** 键盘事件处理 */
+  handleKeydown: (e: KeyboardEvent) => void
+}
+
+export function useKeyboard(config: UseKeyboardConfig): UseKeyboardReturned {
+  const { currentIndex, options, selectOption, getCurrentEl } = config
+
+  async function navToCurrent() {
+    await nextTick()
+    getCurrentEl()?.scrollIntoView({ block: 'nearest' })
+  }
+
+  const keyHandler = {
+    ArrowDown: (e: KeyboardEvent) => {
+      if (!options.value) return
+      e.preventDefault()
+      currentIndex.value = Math.min(currentIndex.value + 1, options.value.length - 1)
+      navToCurrent()
+    },
+
+    ArrowUp: (e: KeyboardEvent) => {
+      if (!options.value) return
+      e.preventDefault()
+      currentIndex.value = Math.max(currentIndex.value - 1, 0)
+      navToCurrent()
+    },
+
+    Enter: (e: KeyboardEvent) => {
+      if (!options.value) return
+      e.preventDefault()
+      if (currentIndex.value >= 0 && currentIndex.value < options.value.length) {
+        const selectedOption = options.value[currentIndex.value]!
+        selectOption(selectedOption, currentIndex.value)
+      }
+    }
+  }
+
+  /** 键盘事件处理 */
+  const handleKeydown = (e: KeyboardEvent) => {
+    keyHandler[e.key]?.(e)
+  }
+
+  return { handleKeydown }
+}

package/src/components/select/use-options.ts

@@ -0,0 +1,119 @@
+import { debounce, o as chainObj } from '@cat-kit/core'
+import { computed, shallowRef, watch, type ShallowRef, type ComputedRef } from 'vue'
+
+import type { SelectProps } from '../../types'
+
+interface Options {
+  props: SelectProps
+}
+
+interface UseOptionsReturned {
+  /** 查询字符串 */
+  queryString: ShallowRef<string>
+  /** 选项 */
+  options: ComputedRef<Record<string, any>[]>
+  /** 所有选项 */
+  allOptions: ComputedRef<Record<string, any>[]>
+  /** 将临时选项转换为创建的选项 */
+  temOptionsToCreatedOptions: () => void
+  /** 清空用户创建的选项 */
+  clearCreatedOptions: () => void
+}
+
+// 允许创建的实现
+// 1. 在过滤时将选项加入待选列表中
+// 2. 如果选择了改临时选项，则取消该选项的临时标记
+// 3. 如果第二次重新选择
+
+export function useOptions(o: Options): UseOptionsReturned {
+  const { props } = o
+
+  /** 筛选 */
+  const queryString = shallowRef('')
+
+  const remoteOptions = shallowRef<Record<string, any>[]>([])
+  const filteredOptions = shallowRef<Record<string, any>[]>([])
+  // 临时选项
+  const tempOptions = shallowRef<({ __isTemp: true } & Record<string, any>)[]>([])
+  // 创建的选项
+  const createdOptions = shallowRef<({ __isTemp: false } & Record<string, any>)[]>([])
+
+  function temOptionsToCreatedOptions() {
+    createdOptions.value = tempOptions.value.map((item) => {
+      return { ...item, __isTemp: false }
+    })
+  }
+
+  function clearCreatedOptions() {
+    createdOptions.value = []
+  }
+
+  const setTempOption = (qs: string, options?: Record<string, any>[]) => {
+    if (!qs?.trim() || !props.creatable) {
+      tempOptions.value = []
+      return
+    }
+    const exactMatch = options
+      ? options.some((option) => {
+          return chainObj(option).get(props.labelKey!) === qs
+        })
+      : false
+
+    if (!exactMatch) {
+      tempOptions.value = [{ [props.labelKey!]: qs, [props.valueKey!]: qs, __isTemp: true }]
+    }
+  }
+
+  const allOptions = computed(() => {
+    const { options } = props
+    if (typeof options === 'function') return remoteOptions.value
+    return options ?? []
+  })
+
+  /** 展示的选项 */
+  const options = computed(() => {
+    const { options } = props
+
+    if (typeof options === 'function') return remoteOptions.value
+
+    const prependOptions = tempOptions.value?.length ? tempOptions.value : createdOptions.value
+
+    if (!options) {
+      return prependOptions
+    }
+
+    return [...prependOptions, ...filteredOptions.value]
+  })
+
+  // TODO: 如有性能问题可以考虑优化
+  watch(
+    [queryString, () => props.options],
+    debounce(async ([qs, propsOptions]) => {
+      if (typeof propsOptions === 'function') {
+        const options = await propsOptions(qs)
+        remoteOptions.value = options
+        setTempOption(qs, options)
+      } else {
+        // 当选项不是函数时，可以创建选项
+        const { labelKey } = props
+
+        if (!qs) {
+          filteredOptions.value = propsOptions ?? []
+          setTempOption(qs, filteredOptions.value)
+          return
+        }
+
+        const _filteredOptions =
+          propsOptions?.filter((item) => {
+            return chainObj(item).get(labelKey!)?.includes(qs) ?? false
+          }) ?? []
+
+        setTempOption(qs, _filteredOptions)
+        filteredOptions.value = _filteredOptions
+      }
+    }, 200),
+    { immediate: true }
+  )
+
+  return { queryString, options, allOptions, temOptionsToCreatedOptions, clearCreatedOptions }
+}

package/src/components/slider/di.ts

@@ -0,0 +1,14 @@
+import type { BEM } from '@veltra/utils'
+import type { ComputedRef, InjectionKey } from 'vue'
+
+import type { SliderProps } from '../../types'
+
+export interface SliderContext {
+  cls: BEM<'slider'>
+  range: [number, number]
+  sliderProps: SliderProps<[number, number] | number>
+  disabled: ComputedRef<boolean>
+  getOffsetByStep: (offset: number) => number
+}
+
+export const sliderContextKey: InjectionKey<SliderContext> = Symbol('sliderContextKey')

package/src/components/slider/index.ts

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