@veltra/desktop 1.0.0

package/src/components/cascade/use-data-map.ts

@@ -0,0 +1,36 @@
+import { Forest, o } from '@cat-kit/core'
+import { shallowRef, triggerRef, watchEffect, type ComputedRef, type ShallowRef } from 'vue'
+
+import type { CascadeNode, CascadeProps } from '../../types'
+
+interface DataMapOptions {
+  props: CascadeProps
+  forest: ComputedRef<Forest<Record<string, unknown>, any>>
+}
+
+/** 数据映射相关逻辑 */
+interface UseDataMapReturned {
+  dataMap: ShallowRef<Map<string, CascadeNode>>
+}
+
+export function useDataMap(options: DataMapOptions): UseDataMapReturned {
+  const { props, forest } = options
+  const dataMap = shallowRef(new Map<string, CascadeNode>())
+
+  watchEffect(() => {
+    const { valueKey } = props
+
+    dataMap.value.clear()
+
+    forest.value.dfs((node) => {
+      const value = o(node.data).get(valueKey!)
+      if (value !== null && value !== undefined) {
+        dataMap.value.set(value, node)
+      }
+    })
+
+    triggerRef(dataMap)
+  })
+
+  return { dataMap }
+}

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

@@ -0,0 +1,172 @@
+import { Forest } from '@cat-kit/core'
+import type { Updater } from '@veltra/compositions'
+import { createIncrease } from '@veltra/utils'
+import {
+  computed,
+  nextTick,
+  shallowRef,
+  triggerRef,
+  watch,
+  type ComputedRef,
+  type Ref,
+  type ShallowRef
+} from 'vue'
+
+import type {
+  CascadeProps,
+  CascadeEmits,
+  CascadeNode,
+  DropdownExposed,
+  PanelItem
+} from '../../types'
+
+interface SelectOptions {
+  props: CascadeProps
+  emit: CascadeEmits
+  updater: Updater
+  forest: Ref<Forest<Record<string, unknown>, any>>
+  dataMap: Ref<Map<string, CascadeNode>>
+  dropdownRef: Ref<DropdownExposed | undefined>
+}
+
+interface UseSelectReturned {
+  displayedValue: ComputedRef<string | undefined>
+  selectItem: (panelIndex: number, item: CascadeNode) => void
+  selectedNodeKeys: ShallowRef<string[]>
+  updateSingleValue: () => void
+  initSingleSelect: () => void
+  panelItemList: ShallowRef<PanelItem[]>
+  getPanelItemList: (data?: CascadeNode[]) => void
+  setPanelItem: (panelIndex: number, panelData?: CascadeNode[]) => void
+  createPanelItem: (nodes: CascadeNode[]) => PanelItem
+}
+
+export function useSelect(options: SelectOptions): UseSelectReturned {
+  const { props, emit, dataMap, updater, dropdownRef, forest } = options
+
+  /** 选中的节点key */
+  const selectedNodeKeys = shallowRef<string[]>([])
+
+  const currentItem = shallowRef<Record<string, any>>()
+
+  /** 面板数据 */
+  const panelItemList = shallowRef<PanelItem[]>([])
+  const uid = createIncrease()
+  function createPanelItem(nodes: CascadeNode[]): PanelItem {
+    return { key: uid(), nodes: nodes.filter((node) => node.visible) }
+  }
+
+  const displayedValue = computed(() => {
+    const { modelValue, separator } = props
+    const valueNodes =
+      modelValue && typeof modelValue === 'string' ? modelValue.split(separator!) : undefined
+    return valueNodes
+      ?.map((v) => {
+        const node = dataMap.value.get(v)
+        return node?.label ?? v
+      })
+      .join(props.separator)
+  })
+
+  function getPanelItemList(data?: CascadeNode[]) {
+    const _panelItemList: Array<PanelItem> = []
+    if (!data?.length) return panelItemList
+    _panelItemList.push(createPanelItem(data))
+
+    selectedNodeKeys.value.slice(0, -1).forEach((key) => {
+      const node = dataMap.value.get(key)
+      node?.children?.length && _panelItemList.push(createPanelItem(node.children))
+    })
+
+    panelItemList.value = _panelItemList
+  }
+
+  function setPanelItem(panelIndex: number, panelData?: CascadeNode[]) {
+    if (panelData?.length) {
+      panelItemList.value[panelIndex + 1] = createPanelItem(panelData)
+      panelItemList.value.splice(panelIndex + 2)
+    } else {
+      panelItemList.value.splice(panelIndex + 1)
+    }
+
+    triggerRef(panelItemList)
+  }
+
+  function updateSingleValue() {
+    const { separator } = props
+
+    const targetValue = selectedNodeKeys.value.length
+      ? selectedNodeKeys.value.join(separator!)
+      : undefined
+
+    const targetLabel = selectedNodeKeys.value
+      .map((key) => {
+        const node = dataMap.value.get(key)
+        return node?.label
+      })
+      .filter(Boolean)
+      .join(separator!)
+
+    emit('update:modelValue', targetValue)
+    emit('change', targetValue, targetLabel, currentItem.value!)
+  }
+
+  /**
+   * 单选选择
+   *
+   * @param panelIndex 面板索引
+   * @param item 选中的节点
+   */
+  function selectItem(panelIndex: number, item: CascadeNode) {
+    // 设置选中的节点
+    currentItem.value = item
+    selectedNodeKeys.value[panelIndex] = item.value
+    selectedNodeKeys.value.splice(panelIndex + 1)
+    triggerRef(selectedNodeKeys)
+
+    // 展开子级面板
+    setPanelItem(panelIndex, item.children)
+
+    nextTick(() => {
+      dropdownRef.value?.updateDropdown()
+    })
+
+    if (!item.children?.length && !props.multiple) {
+      dropdownRef.value?.close()
+    }
+  }
+
+  function initSingleSelect() {
+    const { modelValue, separator } = props
+
+    if (modelValue && typeof modelValue === 'string') {
+      const nodes = modelValue.split(separator!)
+      selectedNodeKeys.value = nodes
+      getPanelItemList(forest.value.roots)
+    } else {
+      selectedNodeKeys.value = []
+      getPanelItemList(forest.value.roots)
+    }
+  }
+
+  watch(
+    [() => props.multiple, () => props.modelValue, forest],
+    ([multiple]) => {
+      if (multiple) return
+      updater.update(() => initSingleSelect())
+    },
+    { immediate: true }
+  )
+
+  return {
+    displayedValue,
+    selectItem,
+    selectedNodeKeys,
+    updateSingleValue,
+    initSingleSelect,
+    panelItemList,
+    getPanelItemList,
+    setPanelItem,
+    createPanelItem
+  }
+}

package/src/components/check-tag/check-tag.vue

@@ -0,0 +1,30 @@
+<template>
+  <div :class="classList" @click="handleChange">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { bem } from '@veltra/utils'
+import { computed } from 'vue'
+
+import type { CheckTagEmits, CheckTagProps } from '../../types'
+
+defineOptions({
+  name: 'CheckTag'
+})
+
+const cls = bem('check-tag')
+
+const props = withDefaults(defineProps<CheckTagProps>(), {})
+
+const emits = defineEmits<CheckTagEmits>()
+
+const classList = computed(() => {
+  return [cls.b, bem.is('checked', props.checked)]
+})
+
+const handleChange = () => {
+  emits('update:modelValue', props.checked)
+}
+</script>

package/src/components/check-tag/index.ts

@@ -0,0 +1 @@
+export { default as UCheckTag } from './check-tag.vue'

package/src/components/check-tag/style.scss

@@ -0,0 +1,27 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+@include m.b(check-tag) {
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  vertical-align: middle;
+  height: 24px;
+  padding: 0 9px;
+  color: #333;
+  border: 1px solid fn.use-var(color-primary);
+  border-radius: fn.use-var(radius-default);
+  background: fn.use-var(color-primary-light-9);
+  &:hover {
+    background-color: fn.use-var(color-primary-light-7);
+  }
+
+  @include m.is(checked) {
+    cursor: pointer;
+    color: #fff;
+    border: 1px solid fn.use-var(color-primary-dark-3);
+    background-color: fn.use-var(color-primary-dark-3);
+  }
+}

package/src/components/check-tag/style.ts

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

package/src/components/checkbox/checkbox-button.vue

@@ -0,0 +1,68 @@
+<template>
+  <div v-if="!readonly" :class="className" @click="handleInput">
+    <slot />
+  </div>
+
+  <u-tag v-else-if="checked !== undefined" :type="checked ? 'success' : 'danger'">
+    {{ checked ? '是' : '否' }}
+  </u-tag>
+
+  <template v-else>
+    {{ FORM_EMPTY_CONTENT }}
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { bem } from '@veltra/utils'
+import { FORM_EMPTY_CONTENT } from '@veltra/utils'
+import { computed } from 'vue'
+
+import type { CheckboxButtonProps, CheckboxButtonEmits } from '../../types'
+import { UTag } from '../tag'
+
+defineOptions({
+  name: 'CheckboxButton'
+})
+
+const props = withDefaults(defineProps<CheckboxButtonProps>(), {
+  disabled: undefined,
+  readonly: undefined,
+  type: 'primary',
+  round: false
+})
+
+const emit = defineEmits<CheckboxButtonEmits>()
+
+const slot = defineSlots<{
+  default(): any
+}>()
+
+const cls = bem('checkbox-button')
+
+const checked = defineModel<boolean>()
+
+const { formProps } = useFormComponent()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default',
+  disabled: false,
+  readonly: false
+})
+
+const className = computed(() => {
+  return [
+    cls.b,
+    cls.m(size.value),
+    bem.is(props.type),
+    bem.is('round', props.round),
+    bem.is('disabled', disabled.value),
+    bem.is('checked', checked.value)
+  ]
+})
+
+const handleInput = () => {
+  checked.value = !checked.value
+  emit('change', !!checked.value)
+}
+</script>

package/src/components/checkbox/checkbox.vue

@@ -0,0 +1,64 @@
+<template>
+  <label :class="className">
+    <span :class="cls.e('wrap')">
+      <transition name="zoom-in" mode="out-in">
+        <svg viewBox="0 0 64 64" v-if="checked" fill="currentColor">
+          <path
+            d="M50.42,16.76L22.34,39.45l-8.1-11.46c-1.12-1.58-3.3-1.96-4.88-0.84c-1.58,1.12-1.95,3.3-0.84,4.88l10.26,14.51  c0.56,0.79,1.42,1.31,2.38,1.45c0.16,0.02,0.32,0.03,0.48,0.03c0.8,0,1.57-0.27,2.2-0.78l30.99-25.03c1.5-1.21,1.74-3.42,0.52-4.92  C54.13,15.78,51.93,15.55,50.42,16.76z"
+          ></path>
+        </svg>
+        <span v-else-if="indeterminate" :class="cls.m('indeterminate')"></span>
+      </transition>
+    </span>
+
+    <input type="checkbox" :checked="checked" :disabled="disabled" hidden @click="handleInput" />
+
+    <span :class="cls.e('label')" v-if="$slots.default"><slot /> </span>
+  </label>
+</template>
+
+<script lang="ts" setup>
+import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { bem } from '@veltra/utils'
+import { computed } from 'vue'
+
+import type { CheckboxProps, CheckboxEmits } from '../../types'
+
+defineOptions({
+  name: 'Checkbox'
+})
+const props = withDefaults(defineProps<CheckboxProps>(), {
+  disabled: undefined,
+  readonly: undefined
+})
+
+const emit = defineEmits<CheckboxEmits>()
+const cls = bem('checkbox')
+
+const checked = defineModel<boolean>()
+
+const { formProps } = useFormComponent()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default',
+  disabled: false,
+  readonly: false
+})
+
+const className = computed(() => {
+  return [
+    cls.b,
+    cls.m(size.value),
+    bem.is('disabled', disabled.value),
+    bem.is('readonly', readonly.value),
+    bem.is('checked', checked.value || props.indeterminate)
+  ]
+})
+
+const handleInput = (e: MouseEvent) => {
+  if (readonly.value) return
+  const target = e.target as HTMLInputElement
+  checked.value = target.checked
+  emit('change', target.checked, e)
+}
+</script>

package/src/components/checkbox/index.ts

@@ -0,0 +1,3 @@
+export { default as UCheckbox } from './checkbox.vue'
+
+export { default as UCheckboxButton } from './checkbox-button.vue'

package/src/components/checkbox/style.scss

@@ -0,0 +1,108 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+$root-name: checkbox;
+@include m.b($root-name) {
+  @include m.dark() {
+    --u-checkbox-border: #595959;
+  }
+
+  user-select: none;
+  vertical-align: middle;
+  cursor: pointer;
+  @include m.flex(inline-flex);
+
+  @include m.is(checked) {
+    @include m.bem($root-name, wrap) {
+      background-color: fn.use-var(color, primary);
+      border-color: fn.use-var(color, primary);
+    }
+
+    @include m.is(disabled) {
+      @include m.bem($root-name, wrap) {
+        background-color: fn.use-var(text-color, disabled);
+        border-color: fn.use-var(border, color);
+      }
+    }
+  }
+
+  @include m.is(disabled) {
+    cursor: not-allowed;
+
+    @include m.bem($root-name, wrap) {
+      background-color: fn.use-var(color, disabled);
+    }
+  }
+
+  @include m.is(readonly) {
+    cursor: default;
+  }
+
+  @include m.size using ($size) {
+    height: fn.use-var(form-component-height, $size);
+
+    @include m.bem($root-name, wrap) {
+      height: calc(fn.use-var(form-component-height, $size) / 2);
+      width: calc(fn.use-var(form-component-height, $size) / 2);
+    }
+
+    @include m.bem($root-name, label) {
+      margin-left: fn.use-var(gap, $size);
+    }
+  }
+
+  @include m.e(wrap) {
+    border: fn.use-var(border, width) fn.use-var(border, style)
+      #{fn.component-var(checkbox, border, #ccc)};
+    border-radius: fn.use-var(radius, default);
+    color: #fff;
+    transition: background-color 0.15s ease;
+    @include m.flex(inline-flex, center);
+  }
+
+  @include m.e(label) {
+    line-height: 1em;
+  }
+
+  @include m.m(indeterminate) {
+    background-color: #fff;
+    width: 10px;
+    height: 2px;
+    vertical-align: middle;
+  }
+}
+
+$button-name: checkbox-button;
+@include m.b($button-name) {
+  border: fn.use-var(border);
+  vertical-align: middle;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  padding: 0 0.8em;
+
+  @include m.size using ($size) {
+    height: fn.use-var(form-component-height, $size);
+    border-radius: fn.use-var(radius, $size);
+
+    @include m.is(round) {
+      border-radius: calc(fn.use-var(form-component-height, $size) / 2);
+    }
+  }
+
+  @each $type in vars.$color-types {
+    @include m.is($type) {
+      &:hover {
+        background-color: fn.use-var(color, $type, light-9);
+      }
+
+      @include m.is(checked) {
+        background-color: fn.use-var(color, $type, light-9);
+        color: fn.use-var(color, $type);
+        border-color: fn.use-var(color, $type);
+      }
+    }
+  }
+}

package/src/components/checkbox/style.ts

@@ -0,0 +1,3 @@
+import '@veltra/styles/anime/zoom-in.scss'
+import '../tag/style'
+import './style.scss'

package/src/components/checkbox-group/checkbox-group.vue

@@ -0,0 +1,95 @@
+<template>
+  <div :class="[cls.b, cls.m(size), bem.is('block', block)]" v-if="!readonly">
+    <u-checkbox
+      v-for="item of items"
+      :key="item[valueKey]"
+      :model-value="getCheckStatus(item)"
+      @update:model-value="handleUpdate($event, item)"
+      :disabled="disabled"
+      :size="size"
+    >
+      {{ item[labelKey] }}
+    </u-checkbox>
+  </div>
+
+  <div v-else-if="model?.length" :class="[cls.m(size), cls.e('readonly-tags')]">
+    <div :class="cls.e('tags')">
+      <u-tag v-for="tag of model" :key="tag">
+        {{ getLabel(tag) }}
+      </u-tag>
+    </div>
+  </div>
+
+  <template v-else>
+    {{ FORM_EMPTY_CONTENT }}
+  </template>
+</template>
+
+<script lang="ts" setup>
+import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { bem } from '@veltra/utils'
+import { FORM_EMPTY_CONTENT } from '@veltra/utils'
+
+import type { CheckboxGroupProps, CheckboxGroupEmits } from '../../types'
+import { UCheckbox } from '../checkbox'
+import { UTag } from '../tag'
+
+defineOptions({
+  name: 'CheckboxGroup'
+})
+
+const props = withDefaults(defineProps<CheckboxGroupProps>(), {
+  labelKey: 'label',
+  valueKey: 'value',
+  disabled: undefined,
+  readonly: undefined
+})
+
+defineEmits<CheckboxGroupEmits>()
+
+const model = defineModel<any[]>()
+
+const cls = bem('checkbox-group')
+
+const { formProps } = useFormComponent()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props], {
+  size: 'default',
+  disabled: false,
+  readonly: false
+})
+
+/**
+ * 获取checkbox的选中状态
+ * @param item - 模型对象
+ * @returns 模型值是否存在于model.value中
+ */
+const getCheckStatus = (item: Record<string, string | number>): boolean => {
+  const { valueKey } = props
+  const value = item[valueKey]
+  if (!value || !model.value) return false
+  return model.value.includes(value)
+}
+
+/**
+ * 处理更新操作
+ * @param  checked - 指示是否选中
+ * @param item - 更新的项
+ */
+const handleUpdate = (checked: boolean, item: Record<string, string | number>) => {
+  const { valueKey } = props
+  const value = item[valueKey]
+  if (!value) return
+  if (checked) {
+    model.value = [...(model.value ?? []), value]
+  } else {
+    model.value = model.value?.filter((v) => v !== value)
+  }
+}
+
+const getLabel = (value: string | number) => {
+  const { items, valueKey, labelKey } = props
+  const item = items.find((item) => item[valueKey] === value)
+  return item?.[labelKey]
+}
+</script>

package/src/components/checkbox-group/index.ts

@@ -0,0 +1 @@
+export { default as UCheckboxGroup } from './checkbox-group.vue'

package/src/components/checkbox-group/style.scss

@@ -0,0 +1,41 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+$root-name: checkbox-group;
+@include m.b($root-name) {
+  line-height: 1;
+  vertical-align: middle;
+  @include m.flex($display: inline-flex, $wrap: wrap);
+
+  @include m.size using ($size) {
+    gap: calc(fn.use-var(gap, $size) * 2);
+
+    @include m.bem($root-name, tags) {
+      gap: calc((fn.use-var(form-component-height, $size) - fn.use-var(tag, $size)) / 2);
+    }
+  }
+
+  @include m.is(block) {
+    display: inline-block;
+
+    @include m.bem(checkbox) {
+      margin: 0;
+      display: flex;
+    }
+  }
+
+  @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);
+    }
+  }
+}

package/src/components/checkbox-group/style.ts

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