@veltra/desktop 1.0.0

package/src/components/batch-edit/batch-edit-form.vue

@@ -0,0 +1,85 @@
+<template>
+  <u-card :class="cls.e('form')" v-if="state.visible && !!props.model">
+    <u-card-header>
+      <template v-if="props.readonly">详情</template>
+      <template v-else-if="!!state.parentRow">新增子级</template>
+      <template v-else-if="state.type === 'create'">新增</template>
+      <template v-else-if="state.type === 'update'">编辑</template>
+    </u-card-header>
+
+    <transition name="fade" appear mode="out-in">
+      <u-scroll always :class="cls.e('form-wrap')">
+        <u-form
+          :model="props.model"
+          :readonly="props.readonly"
+          @keyup.enter="handleSave"
+          :label-width="props.labelWidth"
+        >
+          <template #default="{ data, model }">
+            <slot
+              v-bind="{
+                data,
+                model,
+                row: state.row,
+                depth: state.depth,
+                indexes: insertIndexes,
+                index: state.row?.index
+              }"
+            />
+          </template>
+        </u-form>
+      </u-scroll>
+    </transition>
+
+    <u-card-action :class="cls.e('action')">
+      <u-button text type="primary" :loading="state.loading" @click="handleClose"> 关闭 </u-button>
+
+      <u-button
+        v-if="!props.readonly && state.dataUpdated && (creatable || updatable)"
+        :type="state.type === 'create' ? 'success' : 'primary'"
+        :loading="state.loading"
+        @click="handleSave"
+        plain
+      >
+        确认{{ state.type === 'create' ? '新增' : '修改' }}
+      </u-button>
+    </u-card-action>
+  </u-card>
+</template>
+
+<script lang="ts" setup>
+import { computed, inject } from 'vue'
+
+import { UButton } from '../button'
+import { UCard, UCardAction, UCardHeader } from '../card'
+import { UForm } from '../form'
+import { UScroll } from '../scroll'
+import { BatchEditDIKey } from './di'
+
+defineOptions({ name: 'BatchEditForm' })
+
+const {
+  cls,
+  props,
+  state,
+  insertIndexes,
+  handleSave,
+  handleClose,
+  staticFeatures,
+  dynamicFeatures
+} = inject(BatchEditDIKey)!
+
+const creatable = computed(() => {
+  return (
+    state.type === 'create' &&
+    (staticFeatures.value.has('create') || dynamicFeatures.value.create?.(state.row))
+  )
+})
+
+const updatable = computed(() => {
+  return (
+    state.type === 'update' &&
+    (staticFeatures.value.has('update') || dynamicFeatures.value.update?.(state.row))
+  )
+})
+</script>

package/src/components/batch-edit/batch-edit-list.vue

@@ -0,0 +1,145 @@
+<template>
+  <u-table
+    v-bind="tableProps"
+    :slots="slots"
+    :class="cls.e('table')"
+    :columns="columns"
+    highlight-current
+    :current-row="state.row"
+    @update:current="handleUpdateCurrentRow"
+    @update:checked="emit('update:checked', $event)"
+    @update:selected="emit('update:selected', $event)"
+    ref="tableRef"
+  >
+    <template #column:__action__="{ row }">
+      <u-action-group @click.stop :loading="row.operating" :max="9">
+        <template v-if="staticFeatures.has('create') || dynamicFeatures.create?.(row)">
+          <u-action
+            @run="handleInsertToPrev(row)"
+            :icon="InsertToPrev"
+            title="插入到上一行"
+            v-bind="props.actionsProps?.create"
+          />
+          <u-action
+            @run="handleInsertToNext(row)"
+            :icon="InsertToNext"
+            title="插入到下一行"
+            v-bind="props.actionsProps?.create"
+          />
+        </template>
+
+        <u-action
+          v-if="
+            props.tree && (staticFeatures.has('createChild') || dynamicFeatures.createChild?.(row))
+          "
+          @run="handleInsertChild(row)"
+          :icon="AddChild"
+          title="添加子项"
+          v-bind="props.actionsProps?.createChild"
+        />
+
+        <u-action
+          v-if="staticFeatures.has('delete') || dynamicFeatures.delete?.(row)"
+          :icon="Delete"
+          type="danger"
+          title="删除"
+          @run="handleDelete(row)"
+          v-bind="props.actionsProps?.delete"
+        />
+      </u-action-group>
+    </template>
+
+    <template #empty v-if="!props.readonly"> {{ null }} </template>
+
+    <template
+      #append
+      v-if="
+        !props.readonly &&
+        (staticFeatures.has('create') || dynamicFeatures.create?.()) &&
+        ((state.type === 'create' && !state.visible) || state.type === 'update')
+      "
+    >
+      <div :class="cls.e('add')">
+        <u-button
+          plain
+          type="primary"
+          @click.stop="handleCreate"
+          :loading="state.loading"
+          text
+          v-bind="props.actionsProps?.create"
+        >
+          <span style="position: sticky; left: 50%; transform: translateX(-50%)"> 新增 </span>
+        </u-button>
+      </div>
+    </template>
+  </u-table>
+</template>
+
+<script setup lang="ts">
+import { o } from '@cat-kit/core'
+import { AddChild, Delete, InsertToNext, InsertToPrev } from '@veltra/icons/normal'
+import { computed, inject, type Slots } from 'vue'
+
+import type { BatchEditFeature, TableRow } from '../../types'
+import { UActionGroup, UAction } from '../action'
+import { UButton } from '../button'
+import { UTable } from '../table'
+import { BatchEditDIKey } from './di'
+
+defineOptions({
+  name: 'BatchEditList'
+})
+
+defineProps<{
+  slots: Slots
+}>()
+
+const {
+  cls,
+  state,
+  tableRef,
+  props,
+  emit,
+  staticFeatures,
+  dynamicFeatures,
+  handleCreate,
+  handleDelete,
+  handleInsertToNext,
+  handleInsertToPrev,
+  handleInsertChild
+} = inject(BatchEditDIKey)!
+
+const tableProps = computed(() => {
+  return o(props as Record<string, any>).omit([
+    'model',
+    'columns',
+    'cols',
+    'readonly',
+    'deleteMethod',
+    'saveMethod',
+    'features'
+  ])
+})
+
+const hasNot = (value: BatchEditFeature[]) => value.every((v) => !staticFeatures.value.has(v))
+
+const columns = computed(() => {
+  if (props.readonly || hasNot(['create', 'delete', 'createChild'])) return props.columns
+
+  return (props.columns ?? []).concat({
+    name: '操作',
+    key: '__action__',
+    align: 'center',
+    width: 180,
+    fixed: 'right',
+    resizable: false
+  })
+})
+
+function handleUpdateCurrentRow(row?: TableRow) {
+  if (staticFeatures.value.has('update') || dynamicFeatures.value.update?.(row)) {
+    state.row = row
+    state.depth = row?.depth
+  }
+}
+</script>

package/src/components/batch-edit/batch-edit-new.vue

@@ -0,0 +1,168 @@
+<template>
+  <u-table v-bind="tableProps" :columns="columnsWithOperation" :current="currentRow" :class="cls.b">
+    <template #column:__action__="{ row }">
+      <ButtonWrap tag="div" @click.stop>
+        <u-button
+          :icon="View"
+          title="查看"
+          v-if="featureSets.has('view')"
+          @click="handleView(row, $event)"
+        />
+        <u-button
+          :icon="Edit"
+          title="编辑"
+          v-if="featureSets.has('update')"
+          @click="handleEdit(row, $event)"
+        />
+        <u-button
+          :icon="Plus"
+          title="下方新增"
+          v-if="featureSets.has('create')"
+          @click="handleAdd(row, $event)"
+        />
+        <u-button
+          :icon="AddChild"
+          title="新增子项"
+          v-if="featureSets.has('create') && !!tree"
+          @click="handleAdd(row, $event)"
+        />
+        <u-button
+          :icon="Copy"
+          title="复制"
+          v-if="featureSets.has('copy')"
+          @click="handleCopy(row, $event)"
+        />
+        <u-button
+          :icon="Delete"
+          type="danger"
+          title="删除"
+          v-if="featureSets.has('delete')"
+          @click="handleDelete(row)"
+        />
+      </ButtonWrap>
+    </template>
+
+    <template #append>
+      <u-tip
+        :visible="visible && !!model"
+        :trigger-dom="triggerDom"
+        trigger="click"
+        alignment="center"
+        direction="left"
+        :class="cls.e('tip')"
+      >
+        <template #content>
+          <div :class="cls.e('form-title')" v-if="tipType">
+            {{ titleDict[tipType] }}
+          </div>
+          <u-scroll :class="cls.e('form-scroll')" :content-class="cls.e('form-scroll-content')">
+            <u-form :model="model!" :readonly="readonly" :label-width="labelWidth">
+              <template #default="{ data, model }">
+                <slot name="form" v-bind="{ data, model }" />
+              </template>
+            </u-form>
+          </u-scroll>
+
+          <div :class="cls.e('form-action')">
+            <u-button @click="handleClose" type="primary" text> 关闭 </u-button>
+            <u-button type="primary" @click="handleSubmit" v-if="!readonly"> 提交 </u-button>
+          </div>
+        </template>
+      </u-tip>
+    </template>
+  </u-table>
+</template>
+
+<script lang="ts" setup>
+import { o } from '@cat-kit/core'
+import { useComponentProps } from '@veltra/compositions'
+import { AddChild, Copy, Delete, Edit, Plus, View } from '@veltra/icons'
+import { bem } from '@veltra/utils'
+import { computed, watch } from 'vue'
+
+import type { BatchEditEmits, BatchEditProps, ButtonProps, TableColumn } from '../../types'
+import { UButton } from '../button'
+import { type FormModel, UForm } from '../form'
+import { UScroll } from '../scroll'
+import { UTable } from '../table'
+import { UTip } from '../tip'
+import { useEdit } from './use-edit-new'
+import { useTip } from './use-tip'
+
+defineOptions({
+  name: 'BatchEdit'
+})
+
+const props = defineProps<BatchEditProps<FormModel>>()
+const emit = defineEmits<BatchEditEmits>()
+
+const tableProps = computed(() => {
+  return o(props as Record<string, any>).omit([
+    'model',
+    'columns',
+    'cols',
+    'readonly',
+    'deleteMethod',
+    'saveMethod',
+    'features',
+    'current'
+  ])
+})
+
+const featureSets = computed(() => {
+  return new Set(
+    ['create', 'delete', 'update', 'copy', 'view']
+    // props.features ?? ['create', 'delete', 'update', 'copy', 'view']
+  )
+})
+
+const cls = bem('batch-edit')
+
+const columnsWithOperation = computed<TableColumn[]>(() => {
+  return [
+    ...(props.columns ?? []),
+    {
+      name: '操作',
+      key: '__action__',
+      align: 'center',
+      fixed: 'right',
+      width: 196,
+      resizable: false
+    }
+  ]
+})
+
+const ButtonWrap = useComponentProps<ButtonProps>({
+  size: 'small',
+  circle: true,
+  text: true,
+  type: 'primary',
+  style: { fontSize: '16px', marginRight: '6px' },
+  loading: false
+})
+
+const { visible, triggerDom, tipType, open, handleSubmit } = useTip({
+  props
+})
+
+const titleDict = {
+  create: '新增',
+  update: '编辑',
+  copy: '复制',
+  view: '查看'
+}
+
+const { currentRow, handleEdit, handleAdd, handleCopy, handleDelete, handleView } = useEdit({
+  emit,
+  props,
+  open
+})
+
+watch(currentRow, (r) => {
+  visible.value = Boolean(r)
+})
+
+function handleClose() {
+  currentRow.value = undefined
+}
+</script>

package/src/components/batch-edit/batch-edit.vue

@@ -0,0 +1,139 @@
+<template>
+  <u-layout :class="cls.b" :cols="cols" rows="100%" gap="8px" resizable @keyup.esc="handleClose">
+    <!-- 编辑列表 -->
+    <BatchEditList :slots="slots" />
+
+    <!-- 编辑表单 -->
+    <BatchEditForm v-slot="scoped">
+      <!-- @vue-ignore -->
+      <slot name="form" v-bind="scoped" />
+    </BatchEditForm>
+  </u-layout>
+</template>
+
+<script lang="ts" setup generic="Model extends FormModel">
+import { bem } from '@veltra/utils'
+import { computed, inject, provide, shallowRef, watch } from 'vue'
+
+import type {
+  BatchEditEmits,
+  BatchEditFeature,
+  BatchEditProps,
+  TableColumnSlotsScope,
+  TableExposed,
+  TableRow
+} from '../../types'
+import { DialogDIKey } from '../dialog/di'
+import type { FormModel } from '../form'
+import { ULayout } from '../layout'
+import BatchEditForm from './batch-edit-form.vue'
+import BatchEditList from './batch-edit-list.vue'
+import { BatchEditDIKey } from './di'
+import { useEdit } from './use-edit'
+
+defineOptions({ name: 'BatchEdit' })
+
+const props = withDefaults(defineProps<BatchEditProps<Model>>(), {
+  cols: () => ['1fr', '400px'],
+  mode: 'normal'
+})
+
+const emit = defineEmits<BatchEditEmits>()
+
+const staticFeatures = computed(() => {
+  const { features } = props
+
+  if (Array.isArray(features)) {
+    return new Set(features)
+  }
+
+  const defaultFeatures = new Set<BatchEditFeature>(['create', 'delete', 'update', 'createChild'])
+
+  if (!features) {
+    return defaultFeatures
+  }
+
+  // 排除函数和false的部分
+  Object.entries(features).forEach(([key, value]) => {
+    if (typeof value === 'function' || value === false) {
+      defaultFeatures.delete(key as BatchEditFeature)
+    }
+  })
+  return defaultFeatures
+})
+
+const dynamicFeatures = computed<
+  Record<BatchEditFeature, ((row?: TableRow) => boolean) | undefined>
+>(() => {
+  const { features } = props
+  if (!Array.isArray(features) && typeof features === 'object') {
+    const ret = Object.entries(features)
+      .filter(([_, value]) => {
+        return typeof value === 'function'
+      })
+      .reduce(
+        (acc, [key, value]) => {
+          acc[key] = value
+          return acc
+        },
+        {} as Record<BatchEditFeature, (row?: TableRow) => boolean>
+      )
+    return ret
+  }
+
+  return {} as Record<BatchEditFeature, ((row?: TableRow) => boolean) | undefined>
+})
+
+const slots = defineSlots<
+  {
+    form?: (props: {
+      /** 表单数据 */
+      data: Model['data']
+      /** 表单模型 */
+      model: Model
+      /** 当前编辑的层级 */
+      depth?: number
+      /** 当前编辑的行 */
+      row?: TableRow
+      /** 当前编辑的行索引 */
+      index?: number
+      /** 操作的目标行索引路径 */
+      indexes?: number[]
+    }) => any
+
+    header?: () => any
+  } & Partial<{
+    [key: `column:${string}`]: (props: TableColumnSlotsScope) => any
+  }>
+>()
+
+const cls = bem('batch-edit')
+
+const tableRef = shallowRef<TableExposed>()
+
+const editCtx = useEdit({ props, emit, tableRef })
+
+const { state, handleClose } = editCtx
+
+provide(BatchEditDIKey, {
+  cls,
+  props,
+  emit,
+  tableRef,
+  staticFeatures,
+  dynamicFeatures,
+  ...editCtx
+})
+
+const dialogCtx = inject(DialogDIKey, undefined)
+
+// 如果在dialog上下文中
+dialogCtx &&
+  watch(dialogCtx.visible, (visible) => {
+    !visible && editCtx.handleClose()
+  })
+
+const cols = computed(() => {
+  return !!state.row || state.visible ? props.cols : undefined
+})
+</script>

package/src/components/batch-edit/di.ts

@@ -0,0 +1,24 @@
+import type { BEM } from '@veltra/utils'
+import type { ComputedRef, InjectionKey, ShallowRef } from 'vue'
+
+import type {
+  BatchEditEmits,
+  BatchEditFeature,
+  BatchEditProps,
+  TableExposed,
+  TableRow
+} from '../../types'
+import type { FormModel } from '../form'
+import type { EditReturned } from './use-edit'
+export const BatchEditDIKey: InjectionKey<
+  {
+    cls: BEM<'batch-edit', 'u-'>
+    props: BatchEditProps<FormModel>
+    emit: BatchEditEmits
+    tableRef: ShallowRef<TableExposed | undefined>
+    staticFeatures: ComputedRef<Set<BatchEditFeature>>
+    dynamicFeatures: ComputedRef<
+      Record<BatchEditFeature, ((row?: TableRow) => boolean) | undefined>
+    >
+  } & EditReturned
+> = Symbol('BatchEditDIKey')

package/src/components/batch-edit/helper.ts

@@ -0,0 +1,10 @@
+import type { BatchEditColumn } from '../../types'
+
+/**
+ * 定义批量编辑组件的列
+ * @param columns 列
+ * @returns
+ */
+export function defineBatchEditColumns(columns: BatchEditColumn[]): BatchEditColumn[] {
+  return columns
+}

package/src/components/batch-edit/index.ts

@@ -0,0 +1,3 @@
+export { default as UBatchEdit } from './batch-edit.vue'
+
+export * from './helper'

package/src/components/batch-edit/style-new.scss

@@ -0,0 +1,35 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+$root-name: batch-edit;
+
+@include m.b($root-name) {
+  @include m.e(tip) {
+    padding: 0;
+  }
+
+  @include m.e(form-title) {
+    font-size: fn.use-var(font-size, title, default);
+    color: fn.use-var(text-color, title);
+    padding: fn.use-var(gap, small);
+    border-bottom: 1px solid fn.use-var(border-color);
+  }
+
+  @include m.e(form-scroll) {
+    max-height: 500px;
+    width: 900px;
+
+    &-content {
+      padding: fn.use-var(gap, large);
+    }
+  }
+
+  @include m.e(form-action) {
+    display: flex;
+    justify-content: flex-end;
+    gap: fn.use-var(gap, small);
+    padding: fn.use-var(gap, small);
+    border-top: 1px solid fn.use-var(border-color);
+  }
+}

package/src/components/batch-edit/style.scss

@@ -0,0 +1,68 @@
+@use 'pkg:@veltra/styles/mixins' as m;
+@use 'pkg:@veltra/styles/functions' as fn;
+@use 'pkg:@veltra/styles/vars';
+
+@keyframes blink {
+  0% {
+    opacity: 0.3;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+$root-name: batch-edit;
+
+@include m.b($root-name) {
+  // border: fn.use-var(border);
+  overflow: hidden;
+
+  border-radius: fn.use-var(radius, default);
+
+  @include m.e(table, form-wrap) {
+    flex-grow: 1;
+  }
+
+  @include m.e(list, form) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  @include m.e(form) {
+    background-color: fn.use-var(bg-color, top);
+
+    &-wrap {
+      padding: 8px 12px;
+    }
+  }
+
+  @include m.e(tools) {
+    padding: 0 fn.use-var(gap, default);
+  }
+
+  @include m.e(add) {
+    width: 100%;
+    // background-color: fn.use-var(bg-color, top);
+    position: sticky;
+    bottom: 0;
+    padding: 4px;
+
+    & > {
+      @include m.bem(button) {
+        width: 100%;
+        text-align: unset;
+        display: block;
+      }
+    }
+  }
+
+  @include m.e(action) {
+    @include m.flex($justify: space-between);
+  }
+
+  @include m.bem(table, row) {
+    @include m.is(blink) {
+      animation: blink 0.5s ease-in;
+    }
+  }
+}

package/src/components/batch-edit/style.ts

@@ -0,0 +1,13 @@
+import '../layout/style'
+import '../form/style'
+import '../table/style'
+import '../scroll/style'
+import '../card/style'
+import '../checkbox/style'
+import '../tip/style'
+import '../button/style'
+import '../action/style'
+import '@veltra/directives/ripple/style.js'
+import '@veltra/styles/anime/fade.scss'
+import './style.scss'
+// import './style-new.scss'