@veltra/desktop 1.0.0

package/src/components/form/index.ts

@@ -0,0 +1,6 @@
+export { default as UForm } from './form.vue'
+
+export * from './helper'
+
+export { FormModel } from './form-model'
+export { DynamicFormModel } from './dynamic-form-model'

package/src/components/form/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(form) {
+  @include m.is(readonly) {
+    gap: 6px;
+
+    @include m.bem(form-item, label) {
+      background-color: fn.use-var(bg-color, top); // #fbfcfe;
+    }
+    @include m.bem(form-item, content) {
+      background-color: fn.use-var(bg-color, middle); // #f5f8fb;
+      padding: 0 8px;
+    }
+  }
+
+  @include m.e(data-before) {
+    width: 100%;
+    line-height: 1.3;
+  }
+
+  @include m.e(changed-tag) {
+    color: fn.use-var(color, info);
+    font-size: fn.use-var(font-size, assist, default);
+  }
+}

package/src/components/form/style.ts

@@ -0,0 +1,3 @@
+import '../form-item/style'
+import '../grid/style'
+import './style.scss'

package/src/components/form/use-node-interceptor.ts

@@ -0,0 +1,87 @@
+import { o } from '@cat-kit/core'
+import { createIncrease, extractNormalVNodes } from '@veltra/utils'
+import { onBeforeUnmount, useSlots, type VNode } from 'vue'
+
+import type { FormProps } from '../../types'
+
+interface Options {
+  props: FormProps
+}
+
+export type SlotRenderItem =
+  | {
+      isFormItem: true
+      formItemProps: Record<string, any>
+      node: VNode
+      field: undefined
+      modelValue?: any
+    }
+  | {
+      isFormItem: false
+      formItemProps: Record<string, any>
+      node: VNode
+      field: string
+      modelValue?: any
+    }
+
+const id = createIncrease(1)
+
+/**
+ * 虚拟node拦截
+ * @param options 选项
+ * @returns
+ */
+export function useNodeInterceptor(options: Options): {
+  getSlotsNodes: () => SlotRenderItem[] | null
+} {
+  const { props } = options
+  const slots = useSlots()
+
+  const formId = id()
+
+  function getSlotsNodes() {
+    const { model } = props
+    const nodes = slots.default?.({ model, data: model?.data })
+    if (!nodes?.length) return null
+
+    const flattedNodes = extractNormalVNodes(nodes)
+
+    const results: SlotRenderItem[] = []
+
+    // 渲染表单后得到的应当校验的字段
+    const fields: string[] = []
+
+    let i = 0
+    while (i < flattedNodes.length) {
+      const node = flattedNodes[i]!
+      i++
+
+      const { props, type } = node
+      const item = {
+        isFormItem: (type as any)?.name === 'FormItem',
+        formItemProps: o((props ?? {}) as Record<string, any>).pick([
+          'label',
+          'field',
+          'span',
+          'tips',
+          'readonly'
+        ]),
+        node,
+        field: props?.field,
+        modelValue: props?.['model-value'] ?? props?.modelValue
+      }
+
+      item.field && fields.push(item.field)
+      results.push(item)
+    }
+
+    model.formKeys.set(formId, fields)
+    return results
+  }
+
+  onBeforeUnmount(() => {
+    props.model?.formKeys.delete(formId)
+  })
+
+  return { getSlotsNodes }
+}

package/src/components/form-item/form-item.vue

@@ -0,0 +1,94 @@
+<template>
+  <u-grid-item :span="span" :class="className">
+    <label
+      v-if="props.label || $slots.label"
+      :class="[cls.e('label'), bem.is('required', fieldRequired)]"
+      :style="labelStyles"
+    >
+      <u-tip v-if="tips" :content="tips" :class="cls.e('tips')">
+        <span :class="cls.e('tip-label')">
+          <slot name="label">{{ label }}:</slot>
+        </span>
+      </u-tip>
+      <template v-else>
+        <slot name="label">{{ label }}:</slot>
+      </template>
+    </label>
+
+    <section :class="cls.e('wrapper')">
+      <div :class="cls.e('content')">
+        <slot></slot>
+      </div>
+
+      <!-- 只有表单控件处于非只读状态时，才显示错误提示 -->
+      <section :class="cls.e('error')" v-if="!formProps?.readonly && !formProps?.noTips">
+        <transition name="form-item-tips" mode="out-in">
+          <span :class="cls.e('error-text')" v-if="!!errorTips">
+            {{ errorTips }}
+          </span>
+        </transition>
+      </section>
+    </section>
+  </u-grid-item>
+</template>
+
+<script lang="tsx" setup>
+import { useConfig, useFallbackProps, useFormComponent } from '@veltra/compositions'
+import { bem, withUnit } from '@veltra/utils'
+import { type CSSProperties, computed } from 'vue'
+
+import type { FormItemProps, ComponentSize } from '../../types'
+import { UGridItem } from '../grid'
+import { UTip } from '../tip'
+import { formItemCls as cls } from './helper'
+
+defineOptions({
+  name: 'FormItem'
+})
+
+const props = withDefaults(defineProps<FormItemProps>(), {
+  readonly: undefined
+})
+
+defineSlots<{
+  /** 标签插槽 */
+  label?: () => any
+  default?: () => any
+}>()
+
+/** 表单组件上下文 */
+const { formProps } = useFormComponent()
+
+const { config } = useConfig()
+
+const { size, readonly } = useFallbackProps([formProps ?? {}, props], {
+  size: 'default' as ComponentSize,
+  readonly: false
+})
+
+const className = computed(() => {
+  return [cls.b, cls.m(size.value), bem.is('error', !!errorTips.value)].join(' ')
+})
+
+/** label样式 */
+const labelStyles = computed<CSSProperties>(() => {
+  return {
+    width: withUnit(props.labelWidth ?? formProps?.labelWidth ?? config.form.labelWidth, 'px')
+  }
+})
+
+/** 错误提示 */
+const errorTips = computed<string | undefined>(() => {
+  if (props.field) {
+    return formProps?.model.errors.get(props.field)?.[0]
+  }
+})
+
+/** 字段是否必须 */
+const fieldRequired = computed<boolean>(() => {
+  const { field } = props
+  if (!field || readonly.value) return false
+  const required = formProps?.model?.fields[field]?.required
+  return Boolean(required)
+})
+</script>

package/src/components/form-item/helper.ts

@@ -0,0 +1,19 @@
+import { o } from '@cat-kit/core'
+import { bem, type BEM } from '@veltra/utils'
+import type { FormComponentProps } from '@veltra/utils/types'
+
+/**
+ * 获取表单项的属性
+ * @param props 表单系列组件的属性
+ * @returns
+ */
+export function getFormItemProps(
+  props: FormComponentProps
+): Pick<FormComponentProps, 'label' | 'field' | 'readonly' | 'span' | 'tips'> {
+  return o(props).pick(['label', 'field', 'readonly', 'span', 'tips']) as Pick<
+    FormComponentProps,
+    'label' | 'field' | 'readonly' | 'span' | 'tips'
+  >
+}
+
+export const formItemCls: BEM<'form-item'> = bem('form-item')

package/src/components/form-item/index.ts

@@ -0,0 +1 @@
+export { default as UFormItem } from './form-item.vue'

package/src/components/form-item/style.scss

@@ -0,0 +1,115 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+@use 'sass:map';
+
+$root-name: form-item;
+
+@include m.b($root-name) {
+  @include m.flex(inline-flex, $align: flex-start);
+
+  @include m.size using ($size) {
+    @include m.bem($root-name, label) {
+      min-height: fn.use-var(form-component-height, $size);
+    }
+
+    @include m.bem($root-name, content) {
+      min-height: fn.use-var(form-component-height, $size);
+
+      @include m.bem($root-name, viewer) {
+        min-height: fn.use-var(form-component-height, $size);
+      }
+    }
+
+    @include m.bem($root-name, tips) {
+      font-size: fn.use-var(form-component-font-size, $size);
+    }
+  }
+
+  @include m.e(label) {
+    flex-shrink: 0;
+    padding-right: 8px;
+    color: fn.use-var(text-color, main);
+    text-align: right;
+    line-height: 1.3;
+    font-weight: 300;
+
+    @include m.flex($justify: flex-end);
+
+    @include m.is(required) {
+      &::before {
+        content: '*';
+        color: fn.use-var(color, danger);
+      }
+    }
+  }
+
+  @include m.e(wrapper) {
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  @include m.is(error) {
+    #{fn.bem(input)},
+    #{fn.bem(multi-select),
+    #{fn.bem(multi-tree-select)},
+    #{fn.bem(auto-complete)},
+    #{fn.bem(textarea--more)}} {
+      box-shadow: inset 0 0 1px 1px fn.use-var(color, danger);
+    }
+  }
+
+  @include m.e(content) {
+    flex-grow: 1;
+    word-break: break-all;
+    overflow: hidden;
+    @include m.flex($wrap: wrap);
+
+    @include m.bem($root-name, viewer) {
+      line-height: 1.3;
+      color: fn.use-var(text-color, title);
+      display: inline-flex;
+      align-items: center;
+    }
+  }
+
+  @include m.e(error) {
+    width: 100%;
+    --height: #{fn.use-var(font-size-main, default)};
+    height: calc(var(--height) + 4px);
+    line-height: calc(var(--height) + 2px);
+    overflow: hidden;
+    color: fn.use-var(text-color, main);
+    font-size: fn.use-var(font-size-assist, default);
+    color: fn.use-var(color, danger);
+
+    @include m.ellipsis;
+  }
+
+  @include m.e(error-text) {
+    display: inline-block;
+  }
+
+  @include m.e(tips) {
+    max-width: 250px;
+  }
+
+  @include m.e(tip-label) {
+    cursor: help;
+    border-bottom: 1px dashed fn.use-var(color, info);
+    color: fn.use-var(color, info);
+  }
+}
+
+.#{$root-name}-tips-enter-from,
+.#{$root-name}-tips-leave-to {
+  transform: translateX(-10px);
+  opacity: 0;
+}
+
+.#{$root-name}-tips-enter-active,
+.#{$root-name}-tips-leave-active {
+  transition:
+    transform 0.15s cubic-bezier(0.01, 1.22, 0.43, 1.62),
+    opacity 0.15s ease-out;
+}

package/src/components/form-item/style.ts

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

package/src/components/gantt-chart/gantt-chart.vue

@@ -0,0 +1,17 @@
+<template>
+  <div :class="cls.b"></div>
+</template>
+
+<script lang="ts" setup>
+import { bem } from '@veltra/utils'
+
+import type { GanttChartProps } from '../../types'
+
+defineOptions({
+  name: 'GanttChart'
+})
+
+defineProps<GanttChartProps>()
+
+const cls = bem('gantt-chart')
+</script>

package/src/components/gantt-chart/index.ts

@@ -0,0 +1 @@
+export { default as UGanttChart } from './gantt-chart.vue'

package/src/components/gantt-chart/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(gantt-chart) {
+}

package/src/components/gantt-chart/style.ts

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

package/src/components/grid/breakpoint.ts

@@ -0,0 +1,49 @@
+import type { BreakpointName, BreakCols, Breakpoint } from '../../types'
+
+export const DEFAULT_COLS = 24
+
+const points: [number, BreakpointName][] = [
+  [578, 'xs'],
+  [960, 'sm'],
+  [1366, 'md'],
+  [1920, 'lg'],
+  [Infinity, 'xl']
+]
+
+/**
+ * 获取容器断点
+ * @param width
+ */
+export function getContainerBreakpoint(width: number): Breakpoint {
+  for (let i = 0; i < points.length; i++) {
+    const point = points[i]!
+    if (width < point[0]) {
+      return { name: point[1], level: i + 1 }
+    }
+  }
+  return { name: 'xl', level: 5 }
+}
+
+/**
+ * 获取断点对应的列数
+ * @param colConf 断点配置
+ * @param breakpoint 断点
+ */
+export function getBreakpointCols(colConf: BreakCols, breakpoint?: Breakpoint): number {
+  if (!breakpoint) return DEFAULT_COLS
+  const { name, level } = breakpoint
+  const cols = colConf[name]
+  if (cols !== undefined) return cols
+
+  if (level === 5) return colConf.default ?? DEFAULT_COLS
+
+  // 尝试寻找高级断点
+  const highLevelPoints = points.slice(level - 1)
+  for (let i = 0; i < highLevelPoints.length; i++) {
+    const pointName = highLevelPoints[i]![1]
+    if (colConf[pointName]) {
+      return colConf[pointName]
+    }
+  }
+  return DEFAULT_COLS
+}

package/src/components/grid/di.ts

@@ -0,0 +1,12 @@
+import type { InjectionKey, ShallowReactive, ShallowRef } from 'vue'
+
+import type { Breakpoint, GridItemProps } from '../../types'
+
+export interface GridContext {
+  /** 当前断点 */
+  currentBreakpoint: ShallowRef<Breakpoint | undefined>
+  /** 栅格项属性 */
+  gridItemsProps: ShallowReactive<Set<GridItemProps>>
+}
+
+export const GridDIKey: InjectionKey<GridContext> = Symbol('GridDIKey')

package/src/components/grid/grid-item.vue

@@ -0,0 +1,60 @@
+<template>
+  <component :is="tag" :style="style" :class="cls.b" v-if="span !== 0">
+    <slot />
+  </component>
+</template>
+
+<script lang="ts" setup>
+import { bem } from '@veltra/utils'
+import { computed, inject, type CSSProperties, watch } from 'vue'
+
+import type { GridItemProps } from '../../types'
+import { GridDIKey } from './di'
+
+defineOptions({
+  name: 'GridItem'
+})
+
+const props = withDefaults(defineProps<GridItemProps>(), {
+  tag: 'div'
+})
+
+const cls = bem('grid-item')
+
+const { currentBreakpoint, gridItemsProps } = inject(GridDIKey) ?? {}
+
+if (!currentBreakpoint) {
+  console.error('GridItem组件仅能在Grid组件中使用')
+}
+
+const span = computed<number | 'full'>(() => {
+  let { span } = props
+  if (span === undefined) return 1
+  if (span === 'full') return 'full'
+
+  if (typeof span === 'number') return span
+
+  const breakpoint = currentBreakpoint?.value
+
+  if (!breakpoint) return span.default
+  return span[breakpoint.name] ?? span.default
+})
+
+const style = computed<CSSProperties>(() => {
+  return {
+    gridColumn: span.value === 'full' ? '1 / -1' : `span ${span.value}`
+  }
+})
+
+watch(
+  () => props.span,
+  (span) => {
+    if (typeof span === 'object') {
+      gridItemsProps?.add(props)
+    } else {
+      gridItemsProps?.delete(props)
+    }
+  },
+  { immediate: true }
+)
+</script>

package/src/components/grid/grid.vue

@@ -0,0 +1,88 @@
+<template>
+  <component :is="tag" :class="cls.b" ref="grid">
+    <slot />
+  </component>
+</template>
+
+<script lang="ts" setup>
+import { bem, removeStyles, setStyles, withUnit } from '@veltra/utils'
+import { type CSSProperties, provide, watch, useTemplateRef, computed } from 'vue'
+
+import type { GridProps, GridEmits, _GridExposed } from '../../types'
+import { getBreakpointCols } from './breakpoint'
+import { GridDIKey } from './di'
+import { useResponsive } from './use-responsive'
+
+defineOptions({
+  name: 'Grid'
+})
+
+const props = withDefaults(defineProps<GridProps>(), {
+  tag: 'div'
+})
+
+const emit = defineEmits<GridEmits>()
+
+const cls = bem('grid')
+
+const gridRef = useTemplateRef<HTMLElement>('grid')
+
+const { currentBreakpoint, gridItemsProps } = useResponsive({
+  props,
+  emit,
+  gridRef
+})
+
+const styles = computed(() => {
+  const { gap, cols } = props
+  const result: CSSProperties = {}
+
+  // 间距
+  if (typeof gap === 'number') {
+    if (gap > 0) {
+      result.rowGap = result.columnGap = gap + 'px'
+    }
+  } else if (typeof gap === 'string') {
+    const [rowGap, columnGap] = gap.split(' ')
+    result.columnGap = withUnit(columnGap || rowGap, 'px')
+    result.rowGap = withUnit(rowGap, 'px')
+  }
+
+  const breakpoint = currentBreakpoint.value
+
+  switch (typeof cols) {
+    case 'number':
+      result.gridTemplateColumns = `repeat(${cols}, minmax(0px, 1fr))`
+      break
+    case 'function':
+      if (breakpoint) {
+        result.gridTemplateColumns = `repeat(${cols(breakpoint)}, minmax(0px, 1fr))`
+      }
+      break
+    case 'object':
+      if (breakpoint) {
+        const amount = getBreakpointCols(cols, breakpoint)
+        result.gridTemplateColumns = `repeat(${amount}, minmax(0px, 1fr))`
+      }
+  }
+
+  return result
+})
+
+watch([styles, gridRef], ([styles, dom]) => {
+  if (!dom) return
+
+  // 重置并移除样式
+  removeStyles(dom, ['gridTemplateColumns', 'columnGap', 'rowGap'])
+  setStyles(dom, styles)
+})
+
+provide(GridDIKey, {
+  currentBreakpoint,
+  gridItemsProps
+})
+
+defineExpose<_GridExposed>({
+  el: gridRef
+})
+</script>

package/src/components/grid/index.ts

@@ -0,0 +1,2 @@
+export { default as UGrid } from './grid.vue'
+export { default as UGridItem } from './grid-item.vue'

package/src/components/grid/style.scss

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

package/src/components/grid/style.ts

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