@veltra/desktop 1.0.0

package/src/components/multi-select/multi-select.vue

@@ -0,0 +1,446 @@
+<template>
+  <u-dropdown
+    v-if="!readonly"
+    trigger="click"
+    ref="dropdownRef"
+    :class="[cls.b, cls.m(size), bem.is('disabled', disabled)]"
+    :content-class="[cls.e('panel'), cls.em('panel', size), contentClass]"
+    :content-style="contentStyle"
+    :min-width="minWidth"
+    :width="width"
+    @mouseenter="hovered = true"
+    @mouseleave="hovered = false"
+    :disabled="disabled"
+    @update:visible="handleDropdownVisible"
+  >
+    <!-- 触发 -->
+    <template #trigger>
+      <span :class="cls.e('placeholder')" v-show="!model?.length">
+        {{ placeholder }}
+      </span>
+
+      <div v-if="model?.length" :class="cls.e('tags')">
+        <u-tag
+          v-for="option of tags"
+          :key="option[valueKey]"
+          :closable="!disabled"
+          @close="handleClose(option)"
+        >
+          {{ option[labelKey] }}
+        </u-tag>
+        <u-tag v-if="restTag"> {{ restTag }}+ </u-tag>
+      </div>
+
+      <transition name="zoom-in" mode="out-in">
+        <u-icon
+          v-if="clearable && model?.length && hovered && !disabled"
+          :class="cls.e('clear')"
+          @click.stop="handleClear"
+        >
+          <Close />
+        </u-icon>
+
+        <u-icon :class="cls.e('arrow')" v-else><ArrowDown /></u-icon>
+      </transition>
+    </template>
+
+    <!-- 下拉内容 -->
+    <template #content>
+      <!-- 多选栏 -->
+      <div :class="cls.e('content-header')">
+        <u-checkbox
+          :model-value="allChecked"
+          :indeterminate="indeterminate"
+          @update:model-value="handleCheckAll"
+          :disabled="max !== undefined"
+        >
+          全选
+        </u-checkbox>
+
+        <span> 已选 {{ model?.length }}/{{ max ?? options?.length ?? 0 }} </span>
+      </div>
+
+      <!-- 过滤器 -->
+      <div v-if="filterable" :class="cls.e('content-filter')">
+        <u-input
+          placeholder="输入关键字进行过滤"
+          v-model="queryString"
+          @keydown.enter.prevent="handleCreateByEnter"
+        >
+          <template #suffix>
+            <u-icon><Search /></u-icon>
+          </template>
+        </u-input>
+      </div>
+
+      <!-- 多选列表 -->
+      <u-scroll
+        tag="ul"
+        :class="[cls.e('options')]"
+        ref="scrollRef"
+        v-if="options.length"
+        :content-class="[cls.e('options-wrap'), bem.is('virtual', virtualEnabled)]"
+        :content-style="{ height: virtualEnabled ? withUnit(totalHeight, 'px') : undefined }"
+      >
+        <template v-if="virtualEnabled">
+          <u-multi-select-option
+            v-for="{ option, index, key, label, offset } of virtualOptions"
+            :option="option"
+            :disabled="isDisabled(option)"
+            :key="key"
+            :style="{ transform: `translateY(${offset}px)` }"
+            @check="handleCheck(option, $event)"
+            :checked="checkedSet.has(option)"
+            :data-index="index"
+            :measure-element="measureElement"
+          >
+            <slot v-bind="{ option, index }">
+              {{ label }}
+            </slot>
+          </u-multi-select-option>
+        </template>
+
+        <template v-else>
+          <u-multi-select-option
+            v-for="(option, index) of options"
+            :option="option"
+            :disabled="isDisabled(option)"
+            :key="chainObj(option).get(valueKey)"
+            @check="handleCheck(option, $event)"
+            :checked="checkedSet.has(option)"
+          >
+            <slot v-bind="{ option, index }">
+              {{ chainObj(option).get(labelKey) }}
+            </slot>
+          </u-multi-select-option>
+        </template>
+      </u-scroll>
+
+      <div v-else :class="cls.e('empty')">
+        <UEmpty />
+      </div>
+    </template>
+  </u-dropdown>
+
+  <div v-else-if="model?.length" :class="[cls.m(size), cls.e('readonly-tags')]">
+    <div :class="cls.e('tags')">
+      <u-tag v-for="option of tags" :key="option[valueKey]">
+        {{ option[labelKey] }}
+      </u-tag>
+    </div>
+  </div>
+
+  <template v-else>
+    {{ FORM_EMPTY_CONTENT }}
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { o as chainObj } from '@cat-kit/core'
+import { useFormComponent, useFormFallbackProps, useVirtual } from '@veltra/compositions'
+import { ArrowDown, Close, Search } from '@veltra/icons/normal'
+import { bem, withUnit } from '@veltra/utils'
+import { FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { computed, shallowRef, shallowReactive, watch, provide } from 'vue'
+
+import type {
+  MultiSelectEmits,
+  MultiSelectProps,
+  ScrollExposed,
+  DropdownExposed
+} from '../../types'
+import { UCheckbox } from '../checkbox'
+import { UDropdown } from '../dropdown'
+import { UEmpty } from '../empty'
+import { UIcon } from '../icon'
+import { UInput } from '../input'
+import { UScroll } from '../scroll'
+import { useOptions } from '../select/use-options'
+import { UTag } from '../tag'
+import { MultiSelectDIKey } from './di'
+import UMultiSelectOption from './multi-select-option.vue'
+
+defineOptions({ name: 'MultiSelect' })
+
+const props = withDefaults(defineProps<MultiSelectProps>(), {
+  labelKey: 'label',
+  valueKey: 'value',
+  placeholder: '请选择',
+  clearable: true,
+  visibilityLimit: 3,
+  disabled: undefined,
+  readonly: undefined,
+  minWidth: '220px'
+})
+
+const emit = defineEmits<MultiSelectEmits>()
+
+const cls = bem('multi-select')
+
+const { formProps } = useFormComponent()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default',
+  disabled: false,
+  readonly: false
+})
+
+const scrollRef = shallowRef<ScrollExposed>()
+
+const hovered = shallowRef(false)
+
+const { options: rawOptions, queryString, allOptions: rawAllOptions } = useOptions({ props })
+
+const createdOptions = shallowRef<Record<string, any>[]>([])
+
+const options = computed(() => {
+  const base = rawOptions.value
+  if (!props.creatable || !createdOptions.value.length) return base
+
+  const { valueKey } = props
+  const createdValues = new Set(createdOptions.value.map((o) => chainObj(o).get(valueKey)))
+  const deduped = base.filter((o) => !(o.__isTemp && createdValues.has(chainObj(o).get(valueKey))))
+  const dedupedValues = new Set(deduped.map((o) => chainObj(o).get(valueKey)))
+  const toAdd = createdOptions.value.filter((o) => !dedupedValues.has(chainObj(o).get(valueKey)))
+  return [...toAdd, ...deduped]
+})
+
+const allOptions = computed(() => {
+  if (!props.creatable || !createdOptions.value.length) return rawAllOptions.value
+  return [...createdOptions.value, ...rawAllOptions.value]
+})
+
+const { totalHeight, virtualList, virtualEnabled, measureElement } = useVirtual({
+  virtualThreshold: 80,
+  estimateSize: () => 40,
+  count: computed(() => options.value.length),
+  scrollEl: computed(() => scrollRef.value?.containerRef ?? null)
+})
+
+const virtualOptions = computed(() => {
+  const { valueKey, labelKey } = props
+  const _options = options.value
+  return virtualList.value.map((v) => {
+    const option = _options[v.index]!
+    const val = chainObj(option).get(valueKey)
+    return {
+      option,
+      index: v.index,
+      val,
+      key: v.key,
+      offset: v.start,
+      label: chainObj(option).get(labelKey)
+    }
+  })
+})
+
+const filterable = computed(() => {
+  return props.filterable || props.creatable || typeof props.options === 'function'
+})
+
+const model = defineModel<Array<string | number>>()
+
+const checkedSet = shallowReactive<Set<Record<string, any>>>(new Set())
+const allChecked = computed(() => {
+  return checkedSet.size === options.value.length
+})
+const indeterminate = computed(() => {
+  return checkedSet.size > 0 && !allChecked.value
+})
+
+const optionsMap = computed(() => {
+  const { valueKey } = props
+  return new Map<string | number, Record<string, any>>(
+    allOptions.value.map((option) => [option[valueKey], option])
+  )
+})
+
+const dropdownRef = shallowRef<DropdownExposed>()
+
+let internalChange = false
+
+watch(
+  [model, optionsMap],
+  ([model, optionsMap]) => {
+    if (internalChange) {
+      internalChange = false
+      return
+    }
+    checkedSet.clear()
+    if (optionsMap.size && model?.length) {
+      model.forEach((v) => {
+        const option = optionsMap.get(v)
+        option && checkedSet.add(option)
+      })
+    }
+  },
+  { immediate: true }
+)
+
+const emitChange = () => {
+  emit('change', Array.from(checkedSet))
+}
+
+const tags = computed(() => {
+  let tags: Record<string, any>[] = []
+  let { visibilityLimit } = props
+  if (visibilityLimit < 0) {
+    visibilityLimit = 0
+  }
+
+  // 禁用时，显示全部
+  if (disabled.value || readonly.value) {
+    visibilityLimit = model.value?.length ?? 0
+  }
+
+  model.value?.slice(0, visibilityLimit).forEach((k) => {
+    const option = optionsMap.value.get(k)
+    option && tags.push(option)
+  })
+
+  return tags
+})
+
+const restTag = computed(() => {
+  return (model.value?.length ?? 0) - tags.value.length
+})
+
+const handleDropdownVisible = (visible: boolean) => {
+  if (!visible) {
+    queryString.value = ''
+  }
+}
+
+const handleCheck = (option: Record<string, any>, checked: boolean) => {
+  const { valueKey, labelKey } = props
+  if (checked) {
+    if (option.__isTemp && props.creatable) {
+      const created: Record<string, any> = {
+        [labelKey]: chainObj(option).get(labelKey),
+        [valueKey]: chainObj(option).get(valueKey)
+      }
+      createdOptions.value = [...createdOptions.value, created]
+      checkedSet.add(created)
+      internalChange = true
+      model.value = [...(model.value ?? []), chainObj(created).get(valueKey)]
+      queryString.value = ''
+    } else if (!checkedSet.has(option)) {
+      checkedSet.add(option)
+      internalChange = true
+      model.value = [...(model.value ?? []), chainObj(option).get(valueKey)]
+    }
+  } else {
+    checkedSet.delete(option)
+    const val = chainObj(option).get(valueKey)
+    internalChange = true
+    model.value = (model.value ?? []).filter((v) => v !== val)
+    removeCreatedOption(option)
+  }
+
+  emitChange()
+  dropdownRef.value?.updateDropdown()
+}
+
+/** 全选 */
+const handleCheckAll = (checked: boolean) => {
+  const { valueKey } = props
+  if (checked) {
+    options.value.forEach((option) => {
+      if (!option.__isTemp) checkedSet.add(option)
+    })
+    internalChange = true
+    model.value = Array.from(checkedSet).map((o) => chainObj(o).get(valueKey))
+  } else {
+    checkedSet.clear()
+    internalChange = true
+    model.value = []
+    if (props.creatable) {
+      createdOptions.value = []
+    }
+  }
+
+  emitChange()
+  dropdownRef.value?.updateDropdown()
+}
+
+/** 清除选项 */
+const handleClear = () => {
+  checkedSet.clear()
+  internalChange = true
+  model.value = []
+  if (props.creatable) {
+    createdOptions.value = []
+  }
+  emit('change', [])
+}
+
+const handleClose = (option: Record<string, any>) => {
+  checkedSet.delete(option)
+  const val = chainObj(option).get(props.valueKey)
+  internalChange = true
+  model.value = (model.value ?? []).filter((v) => v !== val)
+  removeCreatedOption(option)
+  emitChange()
+}
+
+const removeCreatedOption = (option: Record<string, any>) => {
+  if (!props.creatable || !createdOptions.value.length) return
+  const { valueKey } = props
+  const val = chainObj(option).get(valueKey)
+  createdOptions.value = createdOptions.value.filter((o) => chainObj(o).get(valueKey) !== val)
+}
+
+const handleCreateByEnter = () => {
+  if (!props.creatable) return
+  const qs = queryString.value?.trim()
+  if (!qs) return
+
+  const { labelKey, valueKey } = props
+
+  const existingCreated = createdOptions.value.find((o) => chainObj(o).get(valueKey) === qs)
+  if (existingCreated) {
+    if (!checkedSet.has(existingCreated)) {
+      checkedSet.add(existingCreated)
+      internalChange = true
+      model.value = [...(model.value ?? []), chainObj(existingCreated).get(valueKey)]
+    }
+    queryString.value = ''
+    emitChange()
+    dropdownRef.value?.updateDropdown()
+    return
+  }
+
+  const exactMatch = rawOptions.value.find((o) => !o.__isTemp && chainObj(o).get(labelKey) === qs)
+  if (exactMatch) {
+    if (!checkedSet.has(exactMatch)) {
+      checkedSet.add(exactMatch)
+      internalChange = true
+      model.value = [...(model.value ?? []), chainObj(exactMatch).get(valueKey)]
+    }
+    queryString.value = ''
+    emitChange()
+    dropdownRef.value?.updateDropdown()
+    return
+  }
+
+  const created: Record<string, any> = { [labelKey]: qs, [valueKey]: qs }
+  createdOptions.value = [...createdOptions.value, created]
+  checkedSet.add(created)
+  internalChange = true
+  model.value = [...(model.value ?? []), qs]
+  queryString.value = ''
+  emitChange()
+  dropdownRef.value?.updateDropdown()
+}
+
+const isDisabled = (option: Record<string, any>) => {
+  const { max } = props
+  return max !== undefined && checkedSet.size >= max && !checkedSet.has(option)
+}
+
+const optionClass = cls.e('option')
+const rippleClass = cls.e('ripple')
+const checkboxClass = cls.e('checkbox')
+
+provide(MultiSelectDIKey, { optionClass, rippleClass, checkboxClass })
+</script>

package/src/components/multi-select/style.scss

@@ -0,0 +1,148 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+// 方便拼接
+$root-name: multi-select;
+
+@include m.b($root-name) {
+  width: 100%;
+  line-height: 1;
+  box-shadow: inset 0 0 1px 1px fn.use-var(border, color);
+  transition: box-shadow 0.25s ease;
+  overflow: hidden;
+  cursor: pointer;
+  @include m.flex($display: inline-flex);
+
+  @include m.size using ($size) {
+    min-height: fn.use-var(form-component-height, $size);
+    border-radius: fn.use-var(radius, $size);
+    padding: calc((fn.use-var(form-component-height, $size) - fn.use-var(tag, $size)) / 2)
+      calc(fn.use-var(gap, $size) / 2);
+
+    @include m.bem($root-name, clear) {
+      font-size: fn.use-var(font-size-main, $size);
+    }
+
+    @include m.bem($root-name, tags) {
+      gap: calc((fn.use-var(form-component-height, $size) - fn.use-var(tag, $size)) / 2);
+    }
+  }
+
+  &:hover {
+    // 悬浮时边框颜色为 var(--u-color-primary);
+    box-shadow: inset 0 0 1px 1px fn.use-var(color, primary);
+  }
+
+  @include m.e(ripple) {
+    background-color: fn.use-var(color, primary, light-7);
+    opacity: 0.5;
+  }
+
+  @include m.e(options) {
+    max-height: 180px;
+  }
+
+  @include m.e(options-wrap) {
+    @include m.is(virtual) {
+      position: relative;
+
+      @include m.bem($root-name, option) {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+      }
+    }
+  }
+
+  @include m.e(placeholder) {
+    flex-shrink: 0;
+    flex-grow: 1;
+    user-select: none;
+    color: fn.use-var(text-color, placeholder);
+  }
+
+  @include m.e(clear) {
+    cursor: pointer;
+  }
+
+  @include m.e(arrow, clear) {
+    min-width: 20px;
+    color: fn.use-var(text-color, main);
+  }
+
+  @include m.e(tags) {
+    flex-grow: 1;
+    @include m.flex($justify: flex-start, $align: center, $wrap: wrap);
+  }
+
+  @include m.e(readonly-tags) {
+    padding-left: 0;
+    padding-right: 0;
+
+    @include m.bem(tag) {
+      border: 1px dashed fn.use-var(text-color, main);
+    }
+  }
+
+  @include m.e(option) {
+    cursor: pointer;
+    user-select: none;
+    @include m.flex($align: center);
+
+    &:hover {
+      background-color: fn.use-var(bg-color, hover);
+    }
+  }
+
+  @include m.e(content-header) {
+    @include m.flex($justify: space-between);
+  }
+
+  @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, content-header) {
+        padding: calc(fn.use-var(gap, $size) / 2) calc(fn.use-var(gap, $size) * 2);
+        border-bottom: fn.use-var(border);
+      }
+
+      @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.bem($root-name, checkbox) {
+        margin-right: fn.use-var(gap, $size);
+      }
+    }
+  }
+
+  @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(empty) {
+    text-align: center;
+    padding: fn.use-var(gap, default) 0;
+  }
+}

package/src/components/multi-select/style.ts

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

package/src/components/multi-tree-select/index.ts

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