@veltra/desktop 1.0.0

package/src/components/steps/style.scss

@@ -0,0 +1,196 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+@use 'sass:map';
+
+// 方便拼接
+$root-name: steps;
+
+@include m.b($root-name) {
+  padding: 0;
+  margin: 0;
+
+  /** 颜色变量 */
+  @each $type in vars.$color-types {
+    @include m.em(finished, $type) {
+      --finished-color: #{fn.use-var(color, $type)};
+    }
+    @include m.em(current, $type) {
+      --current-color: #{fn.use-var(color, $type)};
+    }
+  }
+
+  /** 步骤项 */
+  @include m.e(item) {
+    font-weight: 600;
+    color: fn.use-var(text-color, placeholder);
+
+    @include m.is(finished) {
+      color: var(--finished-color);
+    }
+    @include m.is(current) {
+      color: var(--current-color);
+    }
+  }
+
+  @include m.e(node) {
+    position: relative;
+  }
+
+  @include m.e(link) {
+    background-color: currentColor;
+    position: absolute;
+    margin: auto;
+    z-index: 0;
+  }
+
+  @keyframes steps-link-flow-horizontal {
+    0% {
+      background-position: 0 0;
+    }
+    100% {
+      background-position: 20px 0;
+    }
+  }
+
+  @keyframes steps-link-flow-vertical {
+    0% {
+      background-position: 0 0;
+    }
+    100% {
+      background-position: 0 20px;
+    }
+  }
+
+  @keyframes steps-icon-breathing {
+    0% {
+      color: fn.use-var(text-color, placeholder);
+      border-color: fn.use-var(text-color, placeholder);
+    }
+    50% {
+      color: currentColor;
+      border-color: currentColor;
+    }
+    100% {
+      color: fn.use-var(text-color, placeholder);
+      border-color: fn.use-var(text-color, placeholder);
+    }
+  }
+
+  @include m.e(icon) {
+    display: flex;
+    cursor: default;
+    border: 2px solid currentColor;
+    border-radius: 50%;
+    align-items: center;
+    justify-content: center;
+    background-color: fn.use-var(bg-color, top);
+    position: relative;
+    z-index: 1;
+    transition: opacity 0.3s ease;
+  }
+
+  @include m.bem($root-name, item) {
+    @include m.is(current) {
+      @include m.bem($root-name, icon) {
+        animation: steps-icon-breathing 2s ease-in-out infinite;
+        will-change: opacity;
+      }
+    }
+  }
+
+  /** 步骤项描述 */
+  @include m.e(content) {
+    padding: 4px 0;
+  }
+
+  @include m.is(horizontal) {
+    display: flex;
+    justify-content: space-between;
+    overflow: hidden;
+
+    @include m.bem($root-name, item) {
+      flex: 1;
+      min-width: 150px;
+
+      @include m.is(current) {
+        @include m.bem($root-name, link) {
+          background-color: transparent;
+          background-image: linear-gradient(
+            to right,
+            currentColor 0%,
+            currentColor 50%,
+            transparent 50%,
+            transparent 100%
+          );
+          background-size: 10px 2px;
+          animation: steps-link-flow-horizontal 1s linear infinite;
+        }
+      }
+    }
+
+    @include m.bem($root-name, link) {
+      width: 100%;
+      height: 2px;
+      left: 0;
+      top: 0;
+      bottom: 0;
+    }
+
+    @include m.is(align-center) {
+      @include m.bem($root-name, (content, node)) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      @include m.bem($root-name, link) {
+        left: 50%;
+      }
+    }
+  }
+
+  @include m.is(vertical) {
+    @include m.bem($root-name, item) {
+      min-height: 60px;
+      @include m.flex($align: stretch, $wrap: nowrap);
+
+      @include m.is(current) {
+        @include m.bem($root-name, link) {
+          background-color: transparent;
+          background-image: linear-gradient(
+            to bottom,
+            currentColor 0%,
+            currentColor 50%,
+            transparent 50%,
+            transparent 100%
+          );
+          background-size: 2px 10px;
+          animation: steps-link-flow-vertical 1s linear infinite;
+        }
+      }
+    }
+
+    @include m.bem($root-name, link) {
+      height: 100%;
+      width: 2px;
+      top: 0;
+      left: 0;
+      right: 0;
+    }
+  }
+
+  @include m.size using ($size) {
+    @include m.is(vertical) {
+      @include m.bem($root-name, item) {
+        gap: fn.use-var(gap, $size);
+      }
+    }
+
+    @include m.bem($root-name, icon) {
+      font-size: fn.use-var(font-size-title, $size);
+      width: fn.use-var(form-component-height, $size);
+      height: fn.use-var(form-component-height, $size);
+    }
+  }
+}

package/src/components/steps/style.ts

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

package/src/components/switch/index.ts

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

package/src/components/switch/style.scss

@@ -0,0 +1,94 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+$root-name: switch;
+@include m.b($root-name) {
+  --u-switch-height-small: 18px;
+  --u-switch-height-default: 20px;
+  --u-switch-height-large: 24px;
+
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  gap: fn.use-var(gap, default);
+
+  // 状态样式
+  @include m.is(disabled) {
+    cursor: not-allowed;
+
+    @include m.bem($root-name, button) {
+      background-color: fn.use-var(bg-color, bottom);
+    }
+
+    @include m.bem($root-name, thumb) {
+      background-color: fn.use-var(bg-color, middle);
+    }
+
+    @include m.is(checked) {
+      @include m.bem($root-name, button) {
+        background-color: fn.use-var(color, primary, light-5);
+      }
+    }
+  }
+
+  @include m.is(readonly) {
+    cursor: default;
+  }
+
+  // 尺寸样式
+  @include m.size using ($size) {
+    @include m.bem($root-name, button) {
+      height: var(--u-switch-height-#{$size});
+      width: calc(var(--u-switch-height-#{$size}) * 2 - 4px);
+    }
+
+    @include m.bem($root-name, thumb) {
+      width: calc(var(--u-switch-height-#{$size}) - 4px);
+      height: calc(var(--u-switch-height-#{$size}) - 4px);
+    }
+  }
+
+  @include m.e(native) {
+    opacity: 0;
+    visibility: hidden;
+  }
+
+  @include m.e(button) {
+    border-radius: 100px;
+    background-color: fn.use-var(bg-color, bottom);
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    padding: 2px;
+    flex-shrink: 0;
+  }
+
+  @include m.e(thumb) {
+    display: block;
+    background-color: fn.use-var(bg-color, top);
+    border-radius: 50%;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    pointer-events: none;
+  }
+
+  @include m.e(text) {
+    font-weight: 500;
+
+    @include m.is(selected) {
+      color: fn.use-var(color-primary);
+      font-weight: 800;
+    }
+  }
+
+  @include m.is(checked) {
+    @include m.bem($root-name, button) {
+      background-color: fn.use-var(color-primary);
+    }
+
+    @include m.bem($root-name, thumb) {
+      transform: translateX(100%);
+    }
+  }
+}

package/src/components/switch/style.ts

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

package/src/components/switch/switch.vue

@@ -0,0 +1,68 @@
+<template>
+  <label :class="switchClass" @click.stop>
+    <input
+      type="checkbox"
+      :class="cls.e('native')"
+      hidden
+      :checked="model"
+      :disabled="disabled"
+      @input="handleInput"
+    />
+    <span :class="[cls.e('text'), bem.is('selected', !model)]" v-if="inactiveText">
+      {{ inactiveText }}
+    </span>
+
+    <div :class="cls.e('button')">
+      <span :class="cls.e('thumb')"></span>
+    </div>
+
+    <span v-if="activeText" :class="[cls.e('text'), bem.is('selected', model)]">
+      {{ activeText }}
+    </span>
+  </label>
+</template>
+
+<script lang="ts" setup>
+import { useFormComponent, useFormFallbackProps } from '@veltra/compositions'
+import { bem } from '@veltra/utils'
+import { computed } from 'vue'
+
+import type { SwitchEmits, SwitchProps, _SwitchExposed } from '../../types'
+
+defineOptions({
+  name: 'Switch'
+})
+
+const props = withDefaults(defineProps<SwitchProps>(), {
+  disabled: undefined,
+  readonly: undefined
+})
+
+const emit = defineEmits<SwitchEmits>()
+
+const model = defineModel<boolean>()
+
+const cls = bem('switch')
+
+const { formProps } = useFormComponent()
+
+const { size, disabled, readonly } = useFormFallbackProps([formProps ?? {}, props])
+
+const switchClass = computed(() => {
+  return [
+    cls.b,
+    cls.m(size.value),
+    bem.is('disabled', disabled.value),
+    bem.is('readonly', readonly.value),
+    bem.is('checked', model.value)
+  ]
+})
+
+const handleInput = (e: Event) => {
+  if (disabled.value || readonly.value) return
+
+  const newValue = (e.target as HTMLInputElement).checked
+  model.value = newValue
+  emit('change', newValue)
+}
+</script>

package/src/components/table/di.ts

@@ -0,0 +1,62 @@
+import type { VirtualReturned } from '@veltra/compositions'
+import type { BEM } from '@veltra/utils'
+import type { InjectionKey, ShallowRef, Slots } from 'vue'
+
+import type {
+  TableProps,
+  TableColumnSlotsScope,
+  TableColumnRenderContext,
+  TableRow,
+  RenderReturn,
+  TableColumn,
+  TableRowSlotsScope
+} from '../../types'
+import type { ColumnNode } from './node/col'
+import type { ColumnConfig } from './use-columns'
+
+export const TableDIKey: InjectionKey<
+  {
+    /** 表格属性 */
+    tableProps: TableProps
+    /** 表格插槽 */
+    tableSlots: Slots
+    /** 类 */
+    cls: BEM<'table'>
+    /** 行 */
+    rows: ShallowRef<TableRow[]>
+    /** 选中行 */
+    checkedRows: ShallowRef<Set<TableRow>>
+    /** 结构化列 */
+    columnConfig: ColumnConfig
+    /** 事件处理方法 */
+    handleRowClick: (row: TableRow, ev: MouseEvent) => void
+    /** 单元格点击 */
+    handleCellClick: (row: TableRow, column: TableColumn, ev: MouseEvent) => void
+    /** 表格列插槽node */
+    getColumnSlotsNode: (ctx: TableColumnSlotsScope | TableColumnRenderContext) => RenderReturn
+    /** 展开行插槽node */
+    getExpandRowSlotsNode: (ctx: TableRowSlotsScope) => RenderReturn
+    /** 表头插槽node */
+    getHeaderSlotsNode: (ctx: { column: ColumnNode }) => RenderReturn
+
+    /** 展开/隐藏子节点 */
+    toggleTreeRowExpand: (row: TableRow) => void
+
+    /** 获取单元格的类 */
+    getCellClass: (column: ColumnNode) => string
+
+    /** 获取表头单元格的类 */
+    getHeaderCellClass: (column: ColumnNode) => string
+
+    /** 获取单元格上下文 */
+    getCellCtx: (
+      row: TableRow,
+      column: ColumnNode
+    ) => TableColumnSlotsScope | TableColumnRenderContext
+  } & VirtualReturned
+> = Symbol('TableDIKey')
+
+export const TableResizeKey: InjectionKey<{
+  handleResizeMousedown: (e: MouseEvent, resizeColumn: ColumnNode) => void
+  headerRef: ShallowRef<HTMLElement | undefined>
+}> = Symbol('TableResizeKey')

package/src/components/table/index.ts

@@ -0,0 +1,3 @@
+export { default as UTable } from './table.vue'
+
+export { defineTableColumns } from './use-columns'

package/src/components/table/node/col.ts

@@ -0,0 +1,102 @@
+import { TreeNode } from '@cat-kit/core'
+import { reactive, shallowReactive } from 'vue'
+
+import type { TableColumn, TableColumnAlign } from '../../../types'
+
+export class ColumnNode extends TreeNode<TableColumn, ColumnNode> {
+  declare children?: ColumnNode[] | undefined
+  declare parent?: ColumnNode
+  /** 叶子节点数量 */
+  leafs?: number
+
+  nextNode: ColumnNode | null = null
+
+  /** 列key */
+  get key(): string {
+    return this.data.key
+  }
+  set key(val) {
+    this.data.key = val
+  }
+  /** 列名 */
+  get name(): string {
+    return this.data.name
+  }
+  set name(val) {
+    this.data.name = val
+  }
+
+  /**
+   * 列对齐方式
+   * @default 'left'
+   */
+  get align(): TableColumnAlign {
+    return this.data.align ?? 'left'
+  }
+  set align(val) {
+    this.data.align = val
+  }
+
+  get headerAlign(): TableColumnAlign {
+    return this.data.headerAlign ?? this.align
+  }
+  set headerAlign(val) {
+    this.data.headerAlign = val
+  }
+
+  /** 宽度 */
+  get width(): number | undefined {
+    const { width } = this.data
+    if (!width || (this.minWidth && width && width < this.minWidth)) {
+      return this.minWidth
+    }
+    return width
+  }
+  set width(val) {
+    if (this.minWidth && val && val < this.minWidth) {
+      val = this.minWidth
+    }
+    this.data.width = val
+  }
+  /** 最小宽度 */
+  get minWidth(): number | undefined {
+    const minWidth = this.data.minWidth
+    if (!minWidth && this.isLeaf) {
+      return 100
+    }
+    return minWidth
+  }
+  set minWidth(val) {
+    this.data.minWidth = val
+  }
+
+  /** 列固定方向 */
+  get fixed(): 'left' | 'right' | undefined {
+    if (this.depth > 0) return
+    return this.data.fixed
+  }
+  set fixed(val) {
+    this.data.fixed = val
+  }
+
+  /** 是否是左侧的最后一个固定列 */
+  get isLastFixed(): boolean {
+    return this.data.isLastFixed ?? false
+  }
+
+  /** 是否是右侧的第一个固定列 */
+  get isFirstFixed(): boolean {
+    return this.data.isFirstFixed ?? false
+  }
+
+  /** 是否是可调整宽度的列 */
+  get resizable(): boolean {
+    return this.data.resizable ?? true
+  }
+
+  style: Record<string, number> = reactive({})
+
+  constructor(val: TableColumn, index: number, depth: number, parent?: ColumnNode) {
+    super(val ? shallowReactive(val) : val, index, depth, parent)
+  }
+}

package/src/components/table/node/row.ts

@@ -0,0 +1,75 @@
+import { TreeNode } from '@cat-kit/core'
+import { isReactive, shallowReactive } from 'vue'
+
+/**
+ * TODO: 优化参数，对大数据量来说，对象字面量参数会使内存占用过高
+ */
+export class TableRowNode<Data extends Record<string, any> = Record<string, any>> extends TreeNode<
+  Data,
+  TableRowNode<Data>
+> {
+  /** 索引路径 */
+  get indexes(): number[] {
+    if (!this.parent) return [this.index]
+    return this.parent.indexes.concat(this.index)
+  }
+
+  isExpandRow = false
+
+  /** 是否操作中 */
+  operating = false
+
+  /** 是否展开 */
+  expanded = false
+
+  /** 是否为当前的点击行 */
+  isCurrent = false
+
+  /** 是否选中 */
+  checked = false
+
+  uid: number | string
+
+  override children?: TableRowNode<Data>[] = undefined
+
+  /**
+   *
+   * @param data 一个普通对象或者一个响应式对象
+   * @param index 索引值
+   * @param depth 深度（根为 0）
+   * @param parent 父行节点
+   * @param uid 行唯一标识
+   * @returns
+   */
+  constructor(options: {
+    data: Data
+    index: number
+    depth: number
+    parent?: TableRowNode<Data>
+    uid: number | string
+  }) {
+    const { data, index, depth, parent, uid } = options
+
+    if (!data) {
+      super(data as Data, index, depth, parent)
+    } else {
+      super(isReactive(data) ? data : shallowReactive(data), index, depth, parent)
+    }
+    this.uid = uid
+    return shallowReactive(this)
+  }
+
+  copy() {
+    const row = new TableRowNode({
+      data: this.data,
+      index: this.index,
+      depth: this.depth,
+      parent: this.parent ?? undefined,
+      uid: `expand_${this.uid}`
+    })
+
+    row.isExpandRow = true
+
+    return row
+  }
+}