@veltra/desktop 1.0.0

package/src/components/cascade/cascade-panel-item.vue

@@ -0,0 +1,85 @@
+<template>
+  <u-scroll
+    tag="ul"
+    :class="panelCls.b"
+    ref="scroll-container"
+    :content-class="panelCls.e('content')"
+  >
+    <li
+      v-for="(node, index) of data"
+      :key="node.value ?? index"
+      ref="itemRefs"
+      :class="getItemCls(node)"
+      @click="emit('click', panelIndex, node)"
+    >
+      <u-checkbox
+        v-if="cascadeProps.multiple"
+        :class="panelCls.e('option-checkbox')"
+        :model-value="checkedSet.has(node)"
+        @update:model-value="emit('check', node, $event)"
+      />
+
+      <span :class="panelCls.e('option-label')">
+        {{ node.label }}
+      </span>
+
+      <u-icon :class="panelCls.e('option-expand')" v-if="node.children?.length">
+        <ArrowRight />
+      </u-icon>
+    </li>
+  </u-scroll>
+</template>
+
+<script lang="ts" setup>
+import { ArrowRight } from '@veltra/icons/normal'
+import { bem, scrollIntoContainerView } from '@veltra/utils'
+import { inject, onMounted, shallowRef, useTemplateRef } from 'vue'
+
+import type { CascadeNode } from '../../types'
+import { UCheckbox } from '../checkbox'
+import { UIcon } from '../icon'
+import { UScroll } from '../scroll'
+import { CascadeDIKey } from './di'
+
+defineOptions({
+  name: 'UCascadePanelItem'
+})
+
+const props = defineProps<{
+  data: CascadeNode[]
+  value?: string
+  panelIndex: number
+}>()
+
+const emit = defineEmits<{
+  (e: 'click', panelIndex: number, item: CascadeNode): void
+  (e: 'check', item: CascadeNode, checked: boolean): void
+}>()
+
+const { cls, cascadeProps, checkedSet } = inject(CascadeDIKey)!
+
+const panelCls = cls.create('panel-item')
+
+const optionCls = panelCls.e('option')
+
+function getItemCls(item: CascadeNode) {
+  const selected = props.value === item.value
+  return [
+    optionCls,
+    bem.is('active', selected),
+    bem.is('selected', selected && !cascadeProps.multiple)
+  ]
+}
+
+const itemRefs = shallowRef<HTMLElement[]>([])
+const scrollContainerRef = useTemplateRef('scroll-container')
+
+onMounted(() => {
+  const activeItem = itemRefs.value.find((el) => el.classList.contains(bem.is('active')))
+  if (activeItem) {
+    setTimeout(() => {
+      scrollIntoContainerView(activeItem, scrollContainerRef.value?.containerRef ?? null)
+    })
+  }
+})
+</script>

package/src/components/cascade/cascade.vue

@@ -0,0 +1,291 @@
+<template>
+  <u-dropdown
+    v-if="!readonly"
+    :class="[cls.b, bem.is('disabled', disabled), bem.is('multiple', multiple), cls.m(size)]"
+    :content-class="[cls.e('panel'), cls.em('panel', size)]"
+    trigger="click"
+    ref="dropdownRef"
+    :disabled="disabled"
+    width="auto"
+    @mouseenter="hovered = true"
+    @mouseleave="hovered = false"
+    @update:visible="!$event && (qs = '')"
+  >
+    <template #trigger>
+      <!-- 单选展示 -->
+      <u-input
+        v-if="!multiple"
+        :size="size"
+        :disabled="disabled"
+        :placeholder="placeholder"
+        :clearable="clearable"
+        native-readonly
+        :model-value="displayedValue"
+        @clear="handleClear"
+      >
+        <template #suffix>
+          <u-icon :class="cls.e('arrow')"><ArrowDown /></u-icon>
+        </template>
+      </u-input>
+
+      <!-- 多选展示 -->
+      <template v-if="multiple">
+        <span :class="cls.e('placeholder')" v-show="!modelValue?.length">
+          {{ placeholder }}
+        </span>
+
+        <div v-if="modelValue?.length" :class="cls.e('tags')">
+          <u-tag
+            v-for="tag of tags"
+            :key="tag.value"
+            :closable="!disabled"
+            @close="handleCloseTag(tag)"
+          >
+            {{ tag.label }}
+          </u-tag>
+          <u-tag v-if="restTag"> {{ restTag }}+ </u-tag>
+        </div>
+
+        <transition name="zoom-in" mode="out-in">
+          <u-icon
+            v-if="clearable && modelValue?.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>
+
+    <template #content>
+      <!-- 过滤 -->
+      <div v-if="filterable" :class="cls.e('panel-filter')">
+        <u-input placeholder="输入关键字进行过滤" v-model="qs" :size="size" clearable>
+          <template #suffix>
+            <u-icon><Search /></u-icon>
+          </template>
+        </u-input>
+      </div>
+
+      <div :class="cls.e('content')" v-if="panelItemList.length">
+        <UCascadePanelItem
+          v-for="({ nodes, key }, index) of panelItemList"
+          :data="nodes"
+          :key="key"
+          :panel-index="index"
+          :value="selectedNodeKeys[index]"
+          @click="handleClick"
+          @check="handleCheck"
+        />
+      </div>
+
+      <div :class="cls.e('empty')" v-else>
+        <UEmpty />
+      </div>
+    </template>
+  </u-dropdown>
+
+  <!-- 只读 -->
+  <template v-else>
+    <div :class="[cls.m(size)]" v-if="multiple">
+      <div :class="cls.e('tags')">
+        <u-tag v-for="tag of tags" :key="tag.value">
+          {{ tag.label }}
+        </u-tag>
+      </div>
+    </div>
+    <template v-else>
+      {{ displayedValue || FORM_EMPTY_CONTENT }}
+    </template>
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { Forest, o } from '@cat-kit/core'
+import { useFormComponent, useFormFallbackProps, useUpdateLock } from '@veltra/compositions'
+import { ArrowDown, Close, Search } from '@veltra/icons/normal'
+import { bem } from '@veltra/utils'
+import { FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { computed, provide, shallowRef, triggerRef, watch } from 'vue'
+
+import type { CascadeProps, CascadeEmits, DropdownExposed } from '../../types'
+import { UDropdown } from '../dropdown'
+import { UEmpty } from '../empty'
+import { UIcon } from '../icon'
+import { UInput } from '../input'
+import { UTag } from '../tag'
+import UCascadePanelItem from './cascade-panel-item.vue'
+import { CascadeDIKey } from './di'
+import { CascadeNode } from './node'
+import { useCheck } from './use-check'
+import { useDataMap } from './use-data-map'
+import { useSelect } from './use-select'
+
+defineOptions({
+  name: 'Cascade'
+})
+
+const props = withDefaults(defineProps<CascadeProps>(), {
+  labelKey: 'label',
+  valueKey: 'value',
+  placeholder: '请选择',
+  separator: '/',
+  clearable: true,
+  disabled: undefined,
+  readonly: undefined,
+  childrenKey: 'children',
+  filterable: false,
+  data: () => [],
+  visibilityLimit: 3
+})
+
+const emit = defineEmits<CascadeEmits>()
+
+const cls = bem('cascade')
+
+const { formProps } = useFormComponent()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default',
+  disabled: false,
+  readonly: false
+})
+
+const dropdownRef = shallowRef<DropdownExposed>()
+
+const forest = computed(() => {
+  return new Forest<Record<string, unknown>, any>({
+    data: (props.data ?? []) as Record<string, unknown>[],
+    childrenKey: props.childrenKey,
+    createNode: (data, index, depth, _forest, parent) => {
+      if (!data) {
+        return new CascadeNode({
+          data,
+          index,
+          depth,
+          value: '',
+          label: '',
+          parent
+        })
+      }
+
+      return new CascadeNode({
+        data,
+        index,
+        depth,
+        value: o(data).get(props.valueKey) ?? '',
+        label: o(data).get(props.labelKey) ?? '',
+        parent
+      })
+    }
+  })
+})
+
+const { dataMap } = useDataMap({ props, forest })
+
+// 初始化更新辅助
+const updater = useUpdateLock()
+
+const {
+  displayedValue,
+  selectItem,
+  updateSingleValue,
+  panelItemList,
+  getPanelItemList,
+  createPanelItem,
+  selectedNodeKeys
+} = useSelect({
+  props,
+  emit,
+  dataMap,
+  forest,
+  updater,
+  dropdownRef
+})
+
+const { hovered, tags, restTag, updateMultipleValue, handleCloseTag, checkItem, checkedSet } =
+  useCheck({
+    props,
+    forest,
+    getPanelItemList,
+    emit,
+    dataMap,
+    updater,
+    disabled,
+    readonly
+  })
+
+function handleClick(panelIndex: number, item: CascadeNode) {
+  // 选择
+  selectItem(panelIndex, item)
+
+  // 更新数据
+  !props.multiple &&
+    updater.updateAndLock(() => {
+      if (!props.strict) {
+        updateSingleValue()
+      } else if (!item.children?.length) {
+        updateSingleValue()
+      }
+    })
+}
+
+function handleCheck(item: CascadeNode, checked: boolean) {
+  updater.updateAndLock(() => checkItem(item, checked))
+}
+
+function handleClear() {
+  if (props.multiple) {
+    checkedSet.value.clear()
+    triggerRef(checkedSet)
+    updateMultipleValue()
+  } else {
+    selectedNodeKeys.value = []
+    updateSingleValue()
+  }
+
+  emit('clear')
+}
+
+// 过滤
+const qs = shallowRef<string>('')
+
+watch([qs, forest], ([qs, forest]) => {
+  const { filterable } = props
+  if (!filterable || !qs) {
+    forest.dfs((node) => (node.visible = true))
+    getPanelItemList(forest.roots)
+    return
+  }
+
+  const cache = new Set<CascadeNode>()
+
+  forest.dfs((node) => {
+    if (node.label?.toLowerCase().includes(qs.toLowerCase())) {
+      node.visible = true
+      let parent = node.parent
+      while (parent && !cache.has(parent)) {
+        parent.visible = true
+        cache.add(parent)
+        parent = parent.parent
+      }
+    } else {
+      node.visible = false
+    }
+  })
+
+  panelItemList.value = [createPanelItem(forest.roots)]
+})
+
+provide(CascadeDIKey, {
+  cls,
+  size,
+  disabled,
+  readonly,
+  cascadeProps: props,
+  checkedSet
+})
+</script>

package/src/components/cascade/di.ts

@@ -0,0 +1,14 @@
+import type { BEM } from '@veltra/utils'
+import type { ComputedRef, InjectionKey, ShallowRef } from 'vue'
+
+import type { CascadeProps, ComponentSize } from '../../types'
+
+export const CascadeDIKey: InjectionKey<{
+  /** 样式*/
+  cls: BEM<'cascade'>
+  size: ComputedRef<ComponentSize>
+  disabled: ComputedRef<boolean>
+  readonly: ComputedRef<boolean>
+  cascadeProps: CascadeProps
+  checkedSet: ShallowRef<Set<Record<string, any>>>
+}> = Symbol('CascadeDIKey')

package/src/components/cascade/index.ts

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

package/src/components/cascade/node.ts

@@ -0,0 +1,25 @@
+import { TreeNode } from '@cat-kit/core'
+import { shallowReactive } from 'vue'
+
+export class CascadeNode<T extends Record<string, any>> extends TreeNode<T, CascadeNode<T>> {
+  visible = true
+
+  value: string
+  label: string
+
+  constructor(options: {
+    data: Record<string, any>
+    index: number
+    depth: number
+    value: string
+    label: string
+    parent?: CascadeNode<T>
+  }) {
+    const { data, index, depth, parent, value, label } = options
+    super(data as T, index, depth, parent)
+    this.value = value
+    this.label = label
+
+    return shallowReactive(this)
+  }
+}

package/src/components/cascade/style.scss

@@ -0,0 +1,142 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+// 方便拼接
+$root-name: cascade;
+$menu-name: $root-name + '-panel-item';
+
+@include m.b($root-name) {
+  width: 100%;
+
+  @include m.is(multiple) {
+    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);
+
+    &:hover {
+      // 悬浮时边框颜色为 var(--u-color-primary);
+      box-shadow: inset 0 0 1px 1px fn.use-var(color, primary);
+    }
+  }
+
+  @include m.size using ($size) {
+    @include m.is(multiple) {
+      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);
+    }
+  }
+
+  @include m.e(content) {
+    display: flex;
+  }
+
+  // @include m.e(ripple) {
+  //   background-color: fn.use-var(color, primary, light-7);
+  //   opacity: 0.5;
+  // }
+
+  @include m.e(empty) {
+    text-align: center;
+    padding: 6px 0;
+  }
+
+  @include m.e(panel) {
+    min-width: 160px;
+  }
+
+  @include m.e(panel-filter) {
+    padding: 4px;
+    display: flex;
+
+    @include m.bem(input) {
+      flex-grow: 1;
+      width: 160px;
+    }
+  }
+
+  @include m.e(tags) {
+    flex-grow: 1;
+    @include m.flex($justify: flex-start, $align: center, $wrap: wrap);
+  }
+
+  @include m.e(placeholder) {
+    flex-shrink: 0;
+    flex-grow: 1;
+    user-select: none;
+    color: fn.use-var(text-color, placeholder);
+  }
+
+  @include m.is(disabled) {
+    @include m.bem($root-name, arrow) {
+      color: fn.use-var(text-color, disabled);
+    }
+  }
+}
+
+@include m.b($menu-name) {
+  padding: 4px 0;
+  height: 200px;
+  min-width: 160px;
+  max-width: 200px;
+  flex-grow: 1;
+
+  &:not(:last-child) {
+    border-right: fn.use-var(border);
+  }
+
+  @include m.e(option) {
+    padding: 4px 6px;
+    cursor: pointer;
+    user-select: none;
+    gap: 4px;
+    @include m.flex($justify: space-between);
+
+    &:hover {
+      background-color: fn.use-var(bg-color, hover);
+    }
+
+    &:not(:last-child) {
+      margin-bottom: 0.2rem;
+    }
+
+    @include m.is(active) {
+      background-color: fn.use-var(color, primary, light-9);
+      border-radius: fn.use-var(radius, default);
+    }
+
+    @include m.is(selected) {
+      color: fn.use-var(color, primary);
+      font-weight: bold;
+    }
+  }
+
+  @include m.e(content) {
+    padding: 0 fn.use-var(gap, default);
+  }
+
+  @include m.e(option-label) {
+    flex-grow: 1;
+  }
+
+  @include m.e(option-checkbox) {
+    height: auto;
+  }
+
+  @include m.e(option-expand, option-checkbox) {
+    flex-shrink: 0;
+  }
+}

package/src/components/cascade/style.ts

@@ -0,0 +1,8 @@
+import '../input/style'
+import '../dropdown/style'
+import '../icon/style'
+import '../scroll/style'
+import '../tag/style'
+import '../checkbox/style'
+import '../empty/style'
+import './style.scss'

package/src/components/cascade/use-check.ts

@@ -0,0 +1,128 @@
+import { dfs, type Forest } from '@cat-kit/core'
+import type { Updater } from '@veltra/compositions'
+import {
+  computed,
+  shallowRef,
+  triggerRef,
+  watch,
+  type ComputedRef,
+  type Ref,
+  type ShallowRef
+} from 'vue'
+
+import type { CascadeProps, CascadeEmits, CascadeNode } from '../../types'
+
+interface CheckOptions {
+  props: CascadeProps
+  emit: CascadeEmits
+  dataMap: ShallowRef<Map<string, CascadeNode>>
+  disabled: Ref<boolean>
+  readonly: Ref<boolean>
+  forest: Ref<Forest<Record<string, unknown>, any>>
+  updater: Updater
+  getPanelItemList: (data?: CascadeNode[]) => void
+}
+
+interface UseCheckReturned {
+  hovered: ShallowRef<boolean>
+  tags: ComputedRef<CascadeNode[]>
+  checkedSet: ShallowRef<Set<CascadeNode>>
+  restTag: ComputedRef<number>
+  handleCloseTag: (tag: CascadeNode) => void
+  updateMultipleValue: () => void
+  checkItem: (item: CascadeNode, checked: boolean) => void
+}
+
+export function useCheck(options: CheckOptions): UseCheckReturned {
+  const { props, emit, dataMap, disabled, readonly, forest, updater, getPanelItemList } = options
+
+  const hovered = shallowRef(false)
+
+  const checkedSet = shallowRef(new Set<CascadeNode>())
+
+  const tags = computed(() => {
+    const { modelValue, multiple } = props
+    let tags: CascadeNode[] = []
+
+    if (!multiple || !Array.isArray(modelValue)) return tags
+
+    let { visibilityLimit } = props
+    if (visibilityLimit! < 0) {
+      visibilityLimit = 0
+    }
+
+    // 禁用时，显示全部
+    if (disabled.value || readonly.value) {
+      visibilityLimit = props.modelValue?.length ?? 0
+    }
+
+    modelValue.slice(0, visibilityLimit).forEach((k) => {
+      const option = dataMap.value.get(k)
+      option && tags.push(option)
+    })
+
+    return tags
+  })
+
+  function updateMultipleValue() {
+    const checkedArr = Array.from(checkedSet.value)
+    const targetValues = checkedArr.map((item) => item.value)
+    const targetLabels = checkedArr.map((item) => item.label)
+    emit('update:modelValue', targetValues)
+    emit('change', targetValues, targetLabels, checkedArr)
+  }
+
+  const restTag = computed(() => {
+    const { visibilityLimit, modelValue } = props
+
+    return Math.max((modelValue?.length ?? 0) - visibilityLimit!, 0)
+  })
+
+  function handleCloseTag(tag: CascadeNode) {
+    checkedSet.value.delete(tag)
+    updateMultipleValue()
+  }
+
+  function checkItem(item: CascadeNode, checked: boolean) {
+    const childrenKey = props.childrenKey ?? 'children'
+    if (checked) {
+      dfs(
+        item as unknown as Record<string, unknown>,
+        (node) => {
+          checkedSet.value.add(node as unknown as CascadeNode)
+        },
+        childrenKey
+      )
+    } else {
+      dfs(
+        item as unknown as Record<string, unknown>,
+        (node) => {
+          checkedSet.value.delete(node as unknown as CascadeNode)
+        },
+        childrenKey
+      )
+    }
+
+    triggerRef(checkedSet)
+
+    updateMultipleValue()
+  }
+
+  function initMultipleCheck() {
+    const { modelValue } = props
+    getPanelItemList()
+    if (Array.isArray(modelValue)) {
+      checkedSet.value = new Set(modelValue.map((v) => dataMap.value.get(v)!))
+    }
+  }
+
+  watch(
+    [() => props.multiple, () => props.modelValue, forest],
+    ([multiple]) => {
+      multiple && updater.update(() => initMultipleCheck())
+    },
+    { immediate: false }
+  )
+
+  return { hovered, tags, checkedSet, restTag, handleCloseTag, updateMultipleValue, checkItem }
+}