@veltra/desktop 1.0.0

package/src/components/auto-complete/auto-complete.vue

@@ -0,0 +1,205 @@
+<template>
+  <u-dropdown
+    v-if="!readonly"
+    trigger="click"
+    :class="[cls.b, cls.m(size), bem.is('disabled', disabled)]"
+    ref="dropdownRef"
+    v-model:visible="dropdownVisible"
+    :content-class="[cls.e('panel'), cls.em('panel', size)]"
+    :disabled="disabled"
+  >
+    <!-- 触发 -->
+    <template #trigger>
+      <!-- 单选 -->
+      <u-input
+        :size="size"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :clearable="clearable"
+        v-model="model"
+        @keydown="handleInputKeydown"
+      >
+        <template #suffix v-if="slots.suffix">
+          <slot name="suffix" />
+        </template>
+
+        <template #prefix v-if="slots.prefix">
+          <slot name="prefix" />
+        </template>
+      </u-input>
+    </template>
+
+    <!-- 下拉内容 -->
+    <template #content>
+      <u-scroll tag="ul" :class="cls.e('options')" ref="scrollRef">
+        <li
+          v-if="cachedSuggestion"
+          :class="[optionClass, bem.is('active', isCachedActive)]"
+          @click="handleSelectCachedOption(cachedSuggestion)"
+          v-ripple="cls.e('ripple')"
+          :data-key="cachedSuggestion"
+          :key="cachedSuggestion"
+        >
+          <slot v-bind="{ option: cachedSuggestion, index: -1 }">
+            {{ cachedSuggestion }}
+          </slot>
+        </li>
+
+        <li
+          v-for="(option, index) of suggestions"
+          :class="[
+            optionClass,
+            bem.is('selected', option === model),
+            bem.is('active', isActiveOption(index))
+          ]"
+          @click="handleSelect(option)"
+          v-ripple="cls.e('ripple')"
+          :data-key="option"
+          :key="option"
+        >
+          <slot v-bind="{ option, index }">
+            {{ option }}
+          </slot>
+        </li>
+      </u-scroll>
+    </template>
+  </u-dropdown>
+
+  <template v-else>
+    {{ model || FORM_EMPTY_CONTENT }}
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { vRipple } from '@veltra/directives'
+import { bem, scrollIntoContainerView } from '@veltra/utils'
+import { FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { computed, shallowRef, watch } from 'vue'
+
+import type { AutoCompleteEmits, AutoCompleteProps, _AutoCompleteExposed } from '../../types'
+import type { DropdownExposed, ScrollExposed } from '../../types'
+import { UDropdown } from '../dropdown'
+import { UInput } from '../input'
+import { UScroll } from '../scroll'
+import { useKeyboard } from './use-keyboard'
+import { useSuggestions } from './use-suggestions'
+
+defineOptions({ name: 'AutoComplete', inheritAttrs: false })
+
+const props = withDefaults(defineProps<AutoCompleteProps>(), {
+  placeholder: '请输入',
+  clearable: true,
+  disabled: undefined,
+  readonly: undefined
+})
+
+const emit = defineEmits<AutoCompleteEmits>()
+
+const slots = defineSlots<{
+  default?: (props: { option: string; index: number }) => any
+  suffix?: () => any
+  prefix?: () => any
+}>()
+
+// 当前输入框的值
+const model = defineModel<string>()
+
+const cls = bem('auto-complete')
+
+const optionClass = cls.e('option')
+
+const { formProps } = useFormComponent()
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default',
+  disabled: false,
+  readonly: false
+})
+
+const dropdownRef = shallowRef<DropdownExposed>()
+const dropdownVisible = shallowRef(false)
+const scrollRef = shallowRef<ScrollExposed>()
+
+watch(scrollRef, (scroll) => {
+  if (scroll && model.value !== undefined) {
+    const li = scroll.contentRef!.querySelector(`li[data-key="${model.value}"]`) as HTMLElement
+    li && scrollIntoContainerView(li, scroll.containerRef ?? null)
+  }
+})
+
+const { suggestions, appendedSuggestions, cachedSuggestion } = useSuggestions({ props, model })
+
+const keyboardOptions = computed(() => {
+  const currentSuggestions = suggestions.value
+  return cachedSuggestion.value
+    ? [cachedSuggestion.value, ...currentSuggestions]
+    : currentSuggestions
+})
+
+const { point, handleKeydown } = useKeyboard({
+  options: keyboardOptions,
+  dropdownVisible,
+  getDefaultIndex: (options) => {
+    if (!options.length) return -1
+    if (model.value) {
+      const matchIndex = options.indexOf(model.value)
+      if (matchIndex > -1) return matchIndex
+    }
+    return 0
+  },
+  onSelect: (option, index) => {
+    if (cachedSuggestion.value && index === 0) {
+      handleSelectCachedOption(option)
+      return
+    }
+    handleSelect(option)
+  }
+})
+
+const isCachedActive = computed(() => !!cachedSuggestion.value && point.value === 0)
+
+const isActiveOption = (index: number) => {
+  const offset = cachedSuggestion.value ? 1 : 0
+  return point.value === index + offset
+}
+
+const handleInputKeydown = (event: KeyboardEvent) => {
+  if (!dropdownVisible.value && event.key === 'Enter' && cachedSuggestion.value) {
+    event.preventDefault()
+    event.stopPropagation()
+    handleSelectCachedOption(cachedSuggestion.value)
+    return
+  }
+  handleKeydown(event)
+}
+
+watch([point, keyboardOptions], ([currentPoint, options]) => {
+  if (!scrollRef.value || currentPoint < 0) return
+  const currentOption = options[currentPoint]
+  if (!currentOption) return
+  const target = scrollRef.value.contentRef?.querySelector(
+    `li[data-key="${currentOption}"]`
+  ) as HTMLElement | null
+  if (target) {
+    scrollIntoContainerView(target, scrollRef.value.containerRef ?? null)
+  }
+})
+
+/** 选中选项 */
+const handleSelect = (option: string) => {
+  model.value = option
+  dropdownRef.value?.close()
+  saveCache()
+  emit('select', option)
+}
+
+function saveCache() {
+  if (!model.value) return
+  appendedSuggestions.value = [...appendedSuggestions.value, model.value]
+}
+
+const handleSelectCachedOption = (cachedOption: string) => {
+  appendedSuggestions.value = [...appendedSuggestions.value, cachedOption]
+  dropdownRef.value?.close()
+}
+</script>

package/src/components/auto-complete/index.ts

@@ -0,0 +1 @@
+export { default as UAutoComplete } from './auto-complete.vue'

package/src/components/auto-complete/style.scss

@@ -0,0 +1,109 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+// 方便拼接
+$root-name: auto-complete;
+
+@include m.b($root-name) {
+  width: 100%;
+
+  @include m.e(options) {
+    max-height: 180px;
+  }
+
+  @include m.is(disabled) {
+    background-color: fn.use-var(color, disabled);
+    box-shadow: inset 0 0 1px 1px fn.use-var(border, color);
+    cursor: not-allowed;
+
+    @include m.bem($root-name, arrow) {
+      color: fn.use-var(text-color, disabled);
+    }
+
+    @include m.bem(tag) {
+      border: fn.use-var(border);
+    }
+  }
+
+  @include m.e(option) {
+    cursor: pointer;
+    margin: 2px 0;
+    user-select: none;
+    @include m.ellipsis;
+
+    &:hover {
+      background-color: fn.use-var(color, primary, light-9);
+    }
+
+    @include m.is(active) {
+      background-color: fn.use-var(color, primary, light-9);
+    }
+
+    @include m.is(selected) {
+      background-color: fn.use-var(color, primary, light-3);
+      color: fn.use-var(text-color, white);
+    }
+  }
+
+  @include m.e(ripple) {
+    background-color: fn.use-var(color, primary, light-7);
+    opacity: 0.5;
+  }
+
+  @include m.e(panel) {
+    @include m.size using ($size) {
+      @include m.bem($root-name, options) {
+        padding: calc(fn.use-var(gap, $size) / 2) 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.is(multiple) {
+    line-height: 1;
+    box-shadow: inset 0 0 1px 1px fn.use-var(border, color);
+    transition: box-shadow 0.25s ease;
+    overflow: hidden;
+    @include m.flex($display: inline-flex);
+    &:hover {
+      box-shadow: inset 0 0 1px 1px fn.use-var(color, primary);
+    }
+  }
+
+  @include m.size using ($size) {
+    min-height: fn.use-var(form-component-height, $size);
+    border-radius: fn.use-var(radius, $size);
+
+    @include m.is(multiple) {
+      padding: calc((fn.use-var(form-component-height, $size) - fn.use-var(tag, $size)) / 2)
+        calc(fn.use-var(gap, $size) / 2);
+      padding-left: 0;
+    }
+
+    @include m.bem($root-name, clear) {
+      font-size: fn.use-var(font-size-main, $size);
+      cursor: pointer;
+    }
+
+    @include m.bem($root-name, tags) {
+      gap: calc((fn.use-var(form-component-height, $size) - fn.use-var(tag, $size)) / 2);
+      @include m.bem($root-name, tag) {
+        &:first-of-type {
+          margin-left: calc(fn.use-var(gap, $size) / 2);
+        }
+      }
+    }
+  }
+
+  @include m.e(tags) {
+    flex-grow: 1;
+    @include m.flex($justify: flex-start, $align: center, $wrap: wrap);
+  }
+}

package/src/components/auto-complete/style.ts

@@ -0,0 +1,8 @@
+import '../dropdown/style'
+import '../scroll/style'
+import '../input/style'
+import '../icon/style'
+import '@veltra/directives/ripple/style.js'
+import '../tag/style'
+import '@veltra/styles/anime/zoom-in.scss'
+import './style.scss'

package/src/components/auto-complete/use-keyboard.ts

@@ -0,0 +1,109 @@
+import { type ComputedRef, type Ref, ref, watch } from 'vue'
+
+interface Options {
+  options: ComputedRef<string[]>
+  dropdownVisible: Ref<boolean>
+  onSelect: (option: string, index: number) => void
+  getDefaultIndex?: (options: string[]) => number
+}
+
+interface UseKeyboardReturned {
+  point: Ref<number>
+  handleKeydown: (event: KeyboardEvent) => void
+}
+
+export function useKeyboard(options: Options): UseKeyboardReturned {
+  const { options: selectableOptions, dropdownVisible, onSelect, getDefaultIndex } = options
+  const keys = new Set(['ArrowUp', 'ArrowDown', 'Enter', 'Escape'])
+
+  const point = ref(-1)
+
+  const resolveDefaultPoint = () => {
+    if (!selectableOptions.value.length) return -1
+    if (getDefaultIndex) {
+      const index = getDefaultIndex(selectableOptions.value)
+      if (index >= 0 && index < selectableOptions.value.length) {
+        return index
+      }
+    }
+    return 0
+  }
+
+  watch(
+    [selectableOptions, dropdownVisible],
+    ([value, visible]) => {
+      if (!value.length || !visible) {
+        point.value = -1
+        return
+      }
+      if (point.value === -1 || point.value >= value.length) {
+        point.value = resolveDefaultPoint()
+      }
+    },
+    { immediate: true }
+  )
+
+  function moveToNext() {
+    if (!selectableOptions.value.length) return
+    if (!dropdownVisible.value) {
+      dropdownVisible.value = true
+      point.value = resolveDefaultPoint()
+      return
+    }
+    const nextPoint = point.value + 1
+    point.value = nextPoint < selectableOptions.value.length ? nextPoint : 0
+  }
+
+  function moveToPrev() {
+    if (!selectableOptions.value.length) return
+    if (!dropdownVisible.value) {
+      dropdownVisible.value = true
+      point.value = selectableOptions.value.length - 1
+      return
+    }
+    const prevPoint = point.value - 1
+    point.value = prevPoint > -1 ? prevPoint : selectableOptions.value.length - 1
+  }
+
+  function selectOption() {
+    if (!dropdownVisible.value) {
+      if (selectableOptions.value.length) {
+        dropdownVisible.value = true
+        if (point.value === -1) {
+          point.value = resolveDefaultPoint()
+        }
+      }
+      return
+    }
+    const suggestion = selectableOptions.value[point.value]
+    if (suggestion && point.value > -1) {
+      onSelect(suggestion, point.value)
+    }
+    dropdownVisible.value = false
+  }
+
+  function closeDropdown() {
+    dropdownVisible.value = false
+  }
+
+  const keyHandlerMap = {
+    ArrowUp: moveToPrev,
+    ArrowDown: moveToNext,
+    Enter: selectOption,
+    Escape: closeDropdown
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    const { key } = event
+    if (!keys.has(key)) return
+    event.preventDefault()
+    event.stopPropagation()
+    keyHandlerMap[key]()
+  }
+
+  return {
+    point,
+
+    handleKeydown
+  }
+}

package/src/components/auto-complete/use-suggestions.ts

@@ -0,0 +1,64 @@
+import { debounce } from '@cat-kit/core'
+import { computed, type ComputedRef, type ShallowRef, shallowRef, watch, type ModelRef } from 'vue'
+
+interface Options {
+  model: ModelRef<string | undefined>
+  props: { suggestions?: string[] | ((qs?: string) => Promise<string[]> | string[]) }
+}
+
+interface UseSuggestionsReturned {
+  suggestions: ComputedRef<string[]>
+  cachedSuggestion: ComputedRef<string | undefined>
+  appendedSuggestions: ShallowRef<string[]>
+}
+
+export function useSuggestions(options: Options): UseSuggestionsReturned {
+  const { model, props } = options
+
+  /**
+   * 动态的建议
+   */
+  const dynamicSuggestions = shallowRef<string[]>([])
+  /** 过滤后的建议 */
+  const filteredSuggestions = shallowRef<string[]>([])
+
+  const appendedSuggestions = shallowRef<string[]>([])
+
+  const suggestions = computed(() => {
+    if (!props.suggestions) return appendedSuggestions.value
+
+    if (typeof props.suggestions === 'function') {
+      return dynamicSuggestions.value.concat(appendedSuggestions.value)
+    }
+
+    return filteredSuggestions.value
+  })
+
+  // 缓存的建议
+  const cachedSuggestion = computed(() => {
+    if (!model.value) return undefined
+    return suggestions.value.includes(model.value) ? undefined : model.value
+  })
+
+  watch(
+    [model, () => props.suggestions],
+    debounce(async ([v, propsSuggestions]) => {
+      if (typeof propsSuggestions === 'function') {
+        dynamicSuggestions.value = (await propsSuggestions(v)) ?? []
+      } else {
+        if (!v) {
+          filteredSuggestions.value = [...(propsSuggestions ?? []), ...appendedSuggestions.value]
+          return
+        }
+
+        filteredSuggestions.value = [
+          ...(propsSuggestions?.filter((item) => item.includes(v)) ?? []),
+          ...appendedSuggestions.value.filter((item) => item.includes(v))
+        ]
+      }
+    }, 200),
+    { immediate: true }
+  )
+
+  return { suggestions, cachedSuggestion, appendedSuggestions }
+}

package/src/components/badge/badge.vue

@@ -0,0 +1,68 @@
+<template>
+  <div :class="cls.b">
+    <slot />
+    <sup :class="classList" ref="supRef" v-if="!hidden">{{ badgeValue }}</sup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useFallbackProps } from '@veltra/compositions'
+import { bem, setStyles, zIndex } from '@veltra/utils'
+import { computed, nextTick, onMounted, shallowRef, watch } from 'vue'
+
+import type { BadgeProps, ComponentSize } from '../../types'
+
+defineOptions({
+  name: 'Badge'
+})
+
+const cls = bem('badge')
+
+const props = withDefaults(defineProps<BadgeProps>(), {
+  max: 99
+})
+
+const { size } = useFallbackProps([props], {
+  size: 'default' as ComponentSize
+})
+
+const badgeValue = computed(() => {
+  if (props.dot) return ''
+  return props.value! > props.max ? `${props.max}+` : props.value
+})
+
+const classList = computed(() => {
+  return [
+    cls.e('sup'),
+    props.type && cls.m('color-' + props.type),
+    cls.m(size.value),
+    bem.is('dot', props.dot)
+  ]
+})
+
+const supRef = shallowRef<HTMLElement>()
+
+const setPosition = () => {
+  if (supRef.value) {
+    const { width, height } = supRef.value.getBoundingClientRect()
+    setStyles(supRef.value, {
+      transform: `translate(-${width / 2}px, -${height / 2}px)`,
+      backgroundColor: props.color && props.color,
+      zIndex: zIndex()
+    })
+  }
+}
+
+watch(
+  () => size.value,
+  () => {
+    nextTick(() => {
+      setPosition()
+    })
+  }
+)
+
+onMounted(() => {
+  setPosition()
+})
+</script>

package/src/components/badge/index.ts

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

package/src/components/badge/style.scss

@@ -0,0 +1,50 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+// 方便拼接
+$root-name: badge;
+
+@include m.b($root-name) {
+  width: max-content;
+  position: relative;
+
+  @include m.e('sup') {
+    position: absolute;
+    cursor: default;
+    height: 18px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    background: fn.use-var(color, danger);
+    border-radius: 18px;
+    color: #fff;
+
+    @include m.is(dot) {
+      height: 8px;
+      width: 8px;
+      padding: 0;
+      border-radius: 50%;
+    }
+  }
+
+  @each $type, $_ in vars.$color-types {
+    @include m.m(color-#{$type}) {
+      background-color: fn.use-var(color, $type, 'light-7');
+      color: fn.use-var(color, $type);
+    }
+  }
+
+  @include m.size using ($size) {
+    font-size: fn.use-var('font-size', main, $size);
+    padding: 0 fn.use-var(gap, $size);
+
+    @if ($size ==default) {
+      height: 22px;
+    }
+
+    @if ($size ==large) {
+      height: 26px;
+    }
+  }
+}

package/src/components/badge/style.ts

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