@veltra/desktop 1.0.0

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

@@ -0,0 +1,309 @@
+<template>
+  <u-dropdown
+    v-if="!readonly"
+    :class="[cls.b, cls.m(size), bem.is('disabled', disabled)]"
+    trigger="click"
+    :content-class="[cls.e('panel'), cls.em('panel', size), contentClass]"
+    :content-style="contentStyle"
+    :disabled="disabled"
+    @mouseenter="hovered = true"
+    @mouseleave="hovered = false"
+    ref="dropdownRef"
+    :min-width="minWidth"
+    :width="width"
+    @update:visible="handleDropdownVisible"
+  >
+    <template #trigger>
+      <!-- 默认展示 -->
+      <span :class="cls.e('placeholder')" v-show="!tags.length">
+        {{ placeholder }}
+      </span>
+
+      <!-- 选择的数据项 -->
+      <div v-if="tags.length" :class="cls.e('tags')">
+        <u-tag
+          v-for="(tag, index) in visibleTags"
+          :key="tag[valueKey]"
+          :closable="!disabled"
+          @close="handleRemove(index)"
+        >
+          {{ tag[labelKey] }}
+        </u-tag>
+        <u-tag v-if="hiddenCount > 0">+{{ hiddenCount }}</u-tag>
+      </div>
+      <!-- 清空 icon -->
+      <transition name="zoom-in" mode="out-in">
+        <u-icon v-if="showClear" :class="cls.e('clear')" @click.stop="handleClear">
+          <Close />
+        </u-icon>
+
+        <!-- 下拉 icon -->
+        <u-icon :class="cls.e(`arrow`)" v-else-if="!readonly">
+          <ArrowDown />
+        </u-icon>
+      </transition>
+    </template>
+    <template #content>
+      <div :class="[cls.e('content-header'), cls.m(size)]">
+        <!-- 全选 -->
+        <u-checkbox
+          :model-value="allChecked"
+          :indeterminate="indeterminate"
+          @update:model-value="handleCheckAll"
+        >
+          全选
+        </u-checkbox>
+
+        <u-button size="small" text type="primary" @click="handleToggleExpandAll">
+          {{ allExpanded ? '收起全部' : '展开全部' }}
+        </u-button>
+      </div>
+      <!-- 过滤器 -->
+      <div v-if="filterable" :class="[cls.e('content-filter'), cls.m(size)]">
+        <u-input placeholder="输入关键字进行过滤" v-model="qs">
+          <template #suffix>
+            <u-icon><Search /></u-icon>
+          </template>
+        </u-input>
+      </div>
+      <!-- 菜单列表 -->
+      <u-tree
+        v-bind="treeProps"
+        v-model:checked="model"
+        @update:checked="handleCheck"
+        ref="treeRef"
+        :class="cls.e('content-tree')"
+        checkable
+        :data="data"
+        :slots="slots"
+        scroll-to-view
+      ></u-tree>
+    </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 { dfs, o } from '@cat-kit/core'
+import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { ArrowDown, Close, Search } from '@veltra/icons/normal'
+import { bem, FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { computed, nextTick, shallowRef, watch } from 'vue'
+
+import type { MultiTreeSelectProps, MultiTreeSelectEmits, TreeExposed } from '../../types'
+import type { DropdownExposed } from '../../types'
+import { UButton } from '../button'
+import { UCheckbox } from '../checkbox'
+import { UDropdown } from '../dropdown'
+import { UIcon } from '../icon'
+import { UInput } from '../input'
+import { UTag } from '../tag'
+import { UTree } from '../tree'
+import type { TreeSlotsScope } from '../tree/di'
+
+defineOptions({ name: 'MultiTreeSelect' })
+
+const cls = bem('multi-tree-select')
+
+const props = withDefaults(defineProps<MultiTreeSelectProps>(), {
+  labelKey: 'label',
+  valueKey: 'value',
+  placeholder: '请选择',
+  expandAll: false,
+  clearable: true,
+  disabled: undefined,
+  readonly: undefined,
+  filterable: false,
+  visibilityLimit: 3,
+  minWidth: '280px'
+})
+
+const treeProps = computed(() => {
+  return o(props as Record<string, any>).omit([
+    'tips',
+    'field',
+    'placeholder',
+    'disabled',
+    'label',
+    'readonly',
+    'modelValue',
+    'contentClass',
+    'contentStyle',
+    'minWidth',
+    'width'
+  ])
+})
+
+const emit = defineEmits<MultiTreeSelectEmits>()
+
+const slots = defineSlots<{ default?: (props: TreeSlotsScope) => any }>()
+
+/**过滤 */
+const qs = shallowRef('')
+watch(qs, (qs) => {
+  treeRef.value?.filter(qs)
+})
+
+const model = defineModel<(string | number)[]>({ default: () => [] })
+
+const hovered = shallowRef(false)
+
+const tags = shallowRef<Record<string, any>[]>([])
+
+const { formProps } = useFormComponent()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])
+
+const showClear = computed(() => {
+  return props.clearable && model.value?.length && hovered.value && !disabled.value
+})
+
+const treeRef = shallowRef<TreeExposed>()
+
+const dropdownRef = shallowRef<DropdownExposed>()
+
+let changedByEvent = false
+
+function markEvent() {
+  changedByEvent = true
+  nextTick(() => {
+    changedByEvent = false
+  })
+}
+
+/**是否全选 */
+const allChecked = computed(() => {
+  return model.value?.length === treeRef.value?.forest.size
+})
+
+/**部分 */
+const indeterminate = computed(() => {
+  return model.value.length! > 0 && !allChecked.value
+})
+
+/** 全选*/
+const handleCheckAll = (checked: boolean) => {
+  treeRef.value?.checkAll(checked)
+
+  dropdownRef.value?.updateDropdown()
+}
+
+/**选中 */
+const handleCheck = (checked: (string | number)[], checkedData: Record<string, any>[]) => {
+  markEvent()
+  tags.value = checkedData
+  emit('change', checkedData!)
+
+  dropdownRef.value?.updateDropdown()
+}
+
+/**删除 */
+const handleRemove = (index: number) => {
+  markEvent()
+  tags.value = tags.value.filter((_, i) => i !== index)
+  model.value = model.value.filter((_, i) => i !== index)
+  emit('change', tags.value)
+}
+
+/**清空 */
+const handleClear = () => {
+  markEvent()
+  tags.value = []
+  model.value = []
+  emit('clear')
+}
+
+const keyDicts = shallowRef(new Map<string | number, Record<string, any>>())
+
+watch(
+  () => props.data,
+  (data) => {
+    if (!data?.length) {
+      keyDicts.value = new Map()
+    } else {
+      const newDict = new Map()
+      data.forEach((item) => {
+        dfs(
+          item,
+          (v) => {
+            newDict.set(v[props.valueKey], v)
+          },
+          props.childrenKey
+        )
+      })
+      keyDicts.value = newDict
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  [keyDicts, model],
+  ([keyDicts, model]) => {
+    if (changedByEvent) return
+
+    if (!keyDicts.size || !model?.length) {
+      tags.value = []
+      return
+    }
+
+    tags.value = model.filter((v) => keyDicts.has(v)).map((v) => keyDicts.get(v)!)
+  },
+  { immediate: true }
+)
+
+const allExpanded = shallowRef(props.expandAll)
+function handleToggleExpandAll() {
+  allExpanded.value = !allExpanded.value
+  allExpanded.value ? treeRef.value?.expandAll() : treeRef.value?.collapseAll()
+}
+
+watch(treeRef, (treeRef) => {
+  if (!treeRef) {
+    allExpanded.value = props.expandAll
+  }
+})
+
+const limit = () => {
+  let { visibilityLimit } = props
+
+  if (visibilityLimit < 0) {
+    visibilityLimit = 0
+  }
+  if (disabled.value || readonly.value) {
+    visibilityLimit = model.value?.length ?? 0
+  }
+  return visibilityLimit
+}
+
+const visibleTags = computed(() => {
+  if (tags.value.length > limit()) {
+    return tags.value.slice(0, limit())
+  }
+  return tags.value
+})
+
+const hiddenCount = computed(() => {
+  if (tags.value.length > limit()) {
+    return tags.value.length - limit()
+  }
+  return 0
+})
+
+const handleDropdownVisible = (visible: boolean) => {
+  if (!visible) {
+    qs.value = ''
+  }
+}
+</script>

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

@@ -0,0 +1,107 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+// 方便拼接
+$root-name: multi-tree-select;
+
+@include m.b($root-name) {
+  width: 100%;
+  box-shadow: inset 0 0 1px 1px fn.use-var(border, color);
+  transition: box-shadow 0.25s ease;
+  overflow: hidden;
+  cursor: pointer;
+  line-height: 1;
+
+  @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);
+    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.is(disabled) {
+    cursor: not-allowed;
+    background-color: fn.use-var(color, disabled);
+    box-shadow: inset 0 0 1px 1px fn.use-var(border, color);
+
+    @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(placeholder) {
+    flex-shrink: 0;
+    flex-grow: 1;
+    user-select: none;
+    color: fn.use-var(text-color, placeholder);
+  }
+
+  @include m.e(filter) {
+    margin-bottom: 4px;
+  }
+
+  @include m.e(tags) {
+    flex-grow: 1;
+    overflow: hidden;
+    @include m.flex($justify: flex-start, $align: center, $wrap: wrap);
+  }
+
+  @include m.e(readonly-tags) {
+    padding-left: 0;
+    padding-right: 0;
+    overflow: hidden;
+    @include m.bem(tag) {
+      border: 1px dashed fn.use-var(text-color, main);
+    }
+  }
+
+  @include m.e(arrow, clear) {
+    min-width: 20px;
+    color: fn.use-var(text-color, main);
+  }
+
+  @include m.e(content-header) {
+    border-bottom: fn.use-var(border);
+    border-radius: 0;
+    @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) fn.use-var(gap, $size);
+        border-bottom: fn.use-var(border);
+      }
+
+      @include m.bem($root-name, content-tree) {
+        padding: calc(fn.use-var(gap, $size) / 2) fn.use-var(gap, $size);
+      }
+    }
+  }
+
+  @include m.e(content-tree) {
+    max-height: 272px;
+  }
+}

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

@@ -0,0 +1,9 @@
+import '../dropdown/style'
+import '../tree/style'
+import '../icon/style'
+import '../tag/style'
+import '../checkbox/style'
+import '../input/style'
+import '../button/style'
+import '@veltra/styles/anime/zoom-in.scss'
+import './style.scss'

package/src/components/node-render/index.ts

@@ -0,0 +1 @@
+export { default as UNodeRender } from './node-render'

package/src/components/node-render/node-render.ts

@@ -0,0 +1,39 @@
+import {
+  type DefineComponent,
+  type VNode,
+  type VNodeArrayChildren,
+  defineComponent,
+  isVNode,
+  mergeProps
+} from 'vue'
+
+const NodeRender: DefineComponent<{
+  content: null | undefined | VNodeArrayChildren | VNode | string | number | boolean
+}> = defineComponent({
+  name: 'NodeRender',
+
+  inheritAttrs: false,
+
+  props: ['content'],
+
+  render() {
+    const { content, $slots, $attrs, $props } = this
+
+    if (content === undefined) {
+      return $slots.default?.()
+    }
+
+    if (Array.isArray(content)) {
+      return content
+    }
+
+    if (isVNode(content)) {
+      content.props = $attrs ? mergeProps(content.props ?? {}, $attrs) : $props
+      return content
+    }
+
+    return content
+  }
+})
+
+export default NodeRender

package/src/components/node-render/style.scss

@@ -0,0 +1,6 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+@include m.b(node-render) {
+}

package/src/components/node-render/style.ts

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

package/src/components/notification/index.ts

@@ -0,0 +1,145 @@
+export { default as UNotification } from './notification.vue'
+import { zIndex } from '@veltra/utils'
+import { createVNode, render, type VNode, reactive } from 'vue'
+
+import type { NotificationProps } from '../../types'
+import UNotification from './notification.vue'
+
+type NotificationItem = { vm: VNode }
+
+const notificationQueue = reactive({
+  'bottom-right': [] as NotificationItem[],
+  'bottom-left': [] as NotificationItem[],
+  'top-right': [] as NotificationItem[],
+  'top-left': [] as NotificationItem[]
+})
+
+const length = (key: string) => {
+  return notificationQueue[key].length
+}
+
+let count = 1
+
+const close = (id: string, position: string, userClose?: (vm: VNode) => void) => {
+  const index = notificationQueue[position].findIndex(({ vm }) => {
+    return id === vm.component!.props.id
+  })
+  if (index > -1) {
+    const { vm } = notificationQueue[position][index]!
+    userClose?.(vm)
+    let offset = Number(notificationQueue[position][index]!.vm.component!.props.offset)
+    notificationQueue[position].splice(index, 1)
+    let temp = 0
+    for (let i = length(position); i > 0; i--) {
+      if (i < index + 1) {
+        temp = Number(notificationQueue[position][i - 1]!.vm.component!.props.offset)
+        notificationQueue[position][i - 1]!.vm.component!.props.offset = offset
+        offset = temp
+      }
+    }
+  }
+  if (!notificationQueue[position].length) {
+    const wrapper = document.getElementById(`notification-${position}-id`)!
+    wrapper.style.removeProperty('height')
+    wrapper.style.removeProperty('overflow')
+  }
+}
+
+const createWrapper = (options: NotificationProps) => {
+  const position = options.position || 'bottom-right'
+  if (document.getElementById(`notification-${position}-id`)) {
+    return document.getElementById(`notification-${position}-id`)
+  } else {
+    const offset = options.offset || 20
+    const wrapper = document.createElement('div')
+    wrapper.id = `notification-${position}-id`
+    Object.assign(
+      wrapper.style,
+      { position: 'fixed', textAlign: 'center' },
+      {
+        'top-right': { top: `${offset}px`, right: `${offset}px` },
+        'top-left': { top: `${offset}px`, left: `${offset}px` },
+        'bottom-left': { bottom: `${offset}px`, left: `${offset}px` },
+        'bottom-right': { bottom: `${offset}px`, right: `${offset}px` }
+      }[position]
+    )
+    wrapper.addEventListener('mouseenter', (e: MouseEvent) => {
+      if (length(position)) {
+        let innerCount = 0
+        let innerOffset = 0
+        let width = 0
+        let height = 0
+        for (let i = length(position); i > 0; i--) {
+          notificationQueue[position][i - 1]!.vm.component!.exposed!.clearTimer()
+          if (i === length(position)) {
+            width = notificationQueue[position][i - 1]!.vm.el?.offsetWidth + 8
+          }
+          notificationQueue[position][i - 1]!.vm.component!.props.offset = innerOffset
+          innerOffset += notificationQueue[position][i - 1]!.vm.el?.offsetHeight / 2 + 5
+          if (innerCount < 3) height += notificationQueue[position][i - 1]!.vm.el?.offsetHeight + 10
+          innerCount++
+        }
+
+        Object.assign((e.target as HTMLElement).style, {
+          width: `${width}px`,
+          height: `${height}px`,
+          overflow: 'hidden',
+          transition: 'height 0.4s'
+        })
+      }
+    })
+    wrapper.addEventListener('mouseleave', (e: MouseEvent) => {
+      if (length(position)) {
+        let innerOffset = 0
+        let innerCount = 0
+        let height = 0
+        for (let i = length(position); i > 0; i--) {
+          notificationQueue[position][i - 1]!.vm.component!.exposed!.startTimer()
+          if (i === length(position))
+            height = notificationQueue[position][i - 1]!.vm.el?.offsetHeight + 80
+          notificationQueue[position][i - 1]!.vm.component!.props.offset = innerOffset
+          if (innerCount < 2) innerOffset += 10
+          innerCount++
+        }
+        ;(e.target as HTMLElement).style.transition = 'height 0.45s'
+        ;(e.target as HTMLElement).style.height = `${height}px`
+      } else {
+        ;(e.target as HTMLElement).style.removeProperty('height')
+        ;(e.target as HTMLElement).style.removeProperty('overflow')
+      }
+    })
+    document.body.appendChild(wrapper)
+    return wrapper
+  }
+}
+
+export const Notification = (options: NotificationProps): void => {
+  const position = options.position || 'bottom-right'
+  const container = document.createElement('div')
+  const id = `notification_${count++}`
+
+  if (length(position)) {
+    let innerOffset = 0
+    let innerCount = 0
+    for (let i = length(position); i > 0; i--) {
+      if (innerCount < 2) innerOffset += 10
+      notificationQueue[position][i - 1]!.vm.component!.props.offset = innerOffset
+      innerCount++
+    }
+  }
+
+  const vm = createVNode(UNotification, {
+    ...options,
+    offset: 0,
+    id,
+    zIndex: zIndex(),
+    onClose: () => {
+      close(id, position, options.onClose)
+    }
+  })
+  vm.props!.onDestroy = () => render(null, container)
+  render(vm, container)
+  notificationQueue[position].push({ vm })
+  const wrapper = createWrapper(options)
+  wrapper?.appendChild(container.firstElementChild!)
+}