xkit-editor 2.0.0-alpha.0

package/src/components/design-renderers/input-array-design.vue

@@ -0,0 +1,283 @@
+<template>
+  <div class="x-input-array__editor" :style="rootStyle">
+    <div class="x-input-array__editor-row">
+      <span v-if="draggable" class="x-input-array__editor-drag">
+        <i class="ri-draggable"></i>
+      </span>
+      <div
+        class="x-input-array__editor-items"
+        :class="{
+          'is-layout-enabled': useLayout,
+          'is-editor-empty-drop-zone': editorItems.length === 0
+        }"
+        :style="editorItemsStyle"
+        :data-editor-drop-path="getEditorPathAttr(getEditorItemsContainerPath())"
+      >
+        <component
+          v-for="item in editorItems"
+          :key="item._id"
+          :is="wrapperComponent || 'div'"
+          v-bind="getEditorItemWrapperProps(item)"
+        >
+          <component :is="renderEditorFormItem(item)" />
+        </component>
+      </div>
+      <div v-if="showRowActions" class="x-input-array__editor-actions">
+        <span v-if="showInlineAddButton && addable !== false" class="x-input-array__editor-action is-add">
+          <i class="ri-add-circle-fill"></i>
+        </span>
+        <span v-if="deletable !== false" class="x-input-array__editor-action">
+          <i class="ri-close-circle-line"></i>
+        </span>
+      </div>
+    </div>
+    <div v-if="showFooterAddButton" class="x-input-array__editor-footer">
+      <button class="x-input-array__editor-add" type="button">新增</button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, h, inject, ref, useSlots } from 'vue'
+import FormItem from '@/components/form/form-item.vue'
+import type { XFormItem } from '@/components/form/type'
+import type { XInputArrayBase } from '@/components/input-array/type'
+import { getFormItemRuntimeId, type IdValue } from '@/utils/id'
+import {
+  getEditorChildContainerPath,
+  getEditorChildItemPath,
+  getEditorPathAttr,
+  resolveEditorContainerMeta,
+  type XEditorContainerMeta
+} from '@/utils/editor-container'
+
+type EditorInputArrayItem = NonNullable<XInputArrayBase['items']>[number] & {
+  _id: IdValue
+}
+
+const props = withDefaults(defineProps<XInputArrayBase & XEditorContainerMeta & {
+  item?: XFormItem
+  formProps?: any
+  rowData?: Record<string, any>
+}>(), {
+  items: () => [],
+  addable: true,
+  deletable: true,
+  useScaffoldValue: true,
+  showInlineAddButton: true
+})
+
+const slots = useSlots()
+const wrapperComponent = inject<any>('wrapperComponent', '')
+const emitCustomEvent = inject<(event: any) => void>('emitCustomEvent', () => { })
+const editorMeta = computed(() => resolveEditorContainerMeta(props, {}))
+const parentEditorId = computed(() => editorMeta.value.__editorId ?? editorMeta.value._id)
+const parentEditorPath = computed(() => editorMeta.value.editorPath)
+const editorRowData = ref({})
+
+const getEditorItemsContainerPath = () => getEditorChildContainerPath(parentEditorPath.value, 'items')
+
+const editorItems = computed<EditorInputArrayItem[]>(() => {
+  return (props.items ?? []).map((item) => ({
+    ...item,
+    _id: getFormItemRuntimeId(item as any)
+  })) as EditorInputArrayItem[]
+})
+
+const showRowActions = computed(() => props.addable !== false || props.deletable !== false)
+const isStyleRecord = (value: XInputArrayBase['style']): value is Record<string, any> => Boolean(value && typeof value === 'object' && !Array.isArray(value))
+const rootStyle = computed(() => {
+  if (!props.useLayout) return props.style
+  if (!props.style) return { width: '100%' }
+  if (isStyleRecord(props.style)) {
+    return {
+      width: '100%',
+      ...props.style
+    }
+  }
+  return props.style
+})
+const layoutDefaultSpan = computed(() => clampSpan(props.layout?.col?.span ?? 24))
+const layoutGap = computed(() => toCssSize(props.layout?.row?.gutter ?? 8))
+const editorItemsStyle = computed(() => (props.useLayout ? { gap: layoutGap.value } : undefined))
+
+const getEditorItemPath = (item: EditorInputArrayItem) => {
+  const index = editorItems.value.findIndex((formItem) => formItem._id === item._id)
+  return getEditorChildItemPath(getEditorItemsContainerPath(), index)
+}
+
+const clampSpan = (value: unknown) => {
+  const numericValue = Number(value)
+  if (!Number.isFinite(numericValue)) return 24
+  return Math.min(24, Math.max(1, Math.round(numericValue)))
+}
+
+const toCssSize = (value: unknown) => {
+  if (typeof value === 'number') return `${value}px`
+  if (typeof value === 'string' && /^\d+(\.\d+)?$/.test(value.trim())) return `${value.trim()}px`
+  return typeof value === 'string' ? value : undefined
+}
+
+const getEditorItemSpan = (item: EditorInputArrayItem) => clampSpan(item.span ?? layoutDefaultSpan.value)
+
+const getEditorItemStyle = (item: EditorInputArrayItem) => {
+  if (!props.useLayout) return undefined
+  return {
+    gridColumn: `span ${getEditorItemSpan(item)}`
+  }
+}
+
+const getEditorItemWrapperProps = (item: EditorInputArrayItem) => {
+  const baseProps = {
+    class: 'x-input-array__editor-item',
+    style: getEditorItemStyle(item),
+    'data-editor-item-path': getEditorPathAttr(getEditorItemPath(item))
+  }
+  if (!wrapperComponent) return baseProps
+  return {
+    ...baseProps,
+    item,
+    rowData: editorRowData.value,
+    static: props.static,
+    emitCustomEvent,
+    editorPath: getEditorItemPath(item),
+    parentEditorId: parentEditorId.value,
+    tag: 'array-item'
+  }
+}
+
+const hasStyleWidth = (style: unknown) => Boolean(style && typeof style === 'object' && !Array.isArray(style) && (style as Record<string, any>).width !== undefined)
+
+const getEditorRenderItem = (item: EditorInputArrayItem) => {
+  if (props.useLayout || hasStyleWidth(item.style)) return item
+  return {
+    ...item,
+    style: {
+      width: '200px',
+      ...((item.style && typeof item.style === 'object' && !Array.isArray(item.style) ? item.style : {}) as Record<string, any>)
+    }
+  }
+}
+
+const renderEditorFormItem = (item: EditorInputArrayItem) => {
+  return h(
+    FormItem,
+    {
+      item: getEditorRenderItem(item) as XFormItem,
+      formProps: props,
+      rowData: editorRowData.value,
+      static: props.static,
+      propPrefix: props.name ? `${props.name}[0]` : undefined,
+      editorPath: getEditorItemPath(item)
+    },
+    {
+      ...slots
+    }
+  )
+}
+</script>
+
+<style lang="scss" scoped>
+.x-input-array__editor {
+  padding: 10px;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 4px;
+  background: var(--el-fill-color-blank);
+}
+
+.x-input-array__editor-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 54px;
+}
+
+.x-input-array__editor-drag {
+  flex: none;
+  color: var(--el-text-color-placeholder);
+  line-height: 1;
+}
+
+.x-input-array__editor-items {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+
+  &.is-layout-enabled {
+    display: grid;
+    grid-template-columns: repeat(24, minmax(0, 1fr));
+    align-items: start;
+  }
+
+  &.is-editor-empty-drop-zone {
+    min-height: 48px;
+    border: 1px dashed var(--el-border-color);
+    border-radius: 4px;
+    justify-content: center;
+
+    &::before {
+      content: '拖拽组件作为数组子项';
+      color: var(--el-text-color-placeholder);
+      font-size: 13px;
+      pointer-events: none;
+    }
+  }
+}
+
+.x-input-array__editor-item {
+  position: relative;
+  flex: 1 1 160px;
+  min-width: 120px;
+  margin-bottom: 0;
+
+  &.editor-item-wrapper {
+    padding: 6px;
+    margin-bottom: 0;
+  }
+
+  :deep(.el-form-item) {
+    margin-bottom: 0;
+  }
+}
+
+.x-input-array__editor-items.is-layout-enabled .x-input-array__editor-item {
+  min-width: 0;
+}
+
+.x-input-array__editor-actions {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.x-input-array__editor-action {
+  width: 20px;
+  height: 20px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--el-text-color-placeholder);
+  line-height: 1;
+
+  &.is-add {
+    color: var(--el-color-primary);
+  }
+}
+
+.x-input-array__editor-footer {
+  margin-top: 12px;
+}
+
+.x-input-array__editor-add {
+  height: 28px;
+  padding: 0 12px;
+  border: 1px solid var(--el-color-primary);
+  border-radius: 4px;
+  color: var(--el-color-primary);
+  background: var(--el-fill-color-blank);
+  font-size: 12px;
+}
+</style>

package/src/components/design-renderers/input-table-design.vue

@@ -0,0 +1,311 @@
+<template>
+  <div class="x-input-table__editor">
+    <div class="x-input-table__editor-scroll">
+      <div
+        class="x-input-table__editor-columns"
+        :class="{ 'is-editor-empty-drop-zone': editorNormalColumns.length === 0 }"
+        :data-editor-drop-path="getEditorPathAttr(getEditorItemsContainerPath())"
+      >
+        <component
+          v-for="item in editorNormalColumns"
+          :key="item._id"
+          :is="wrapperComponent || 'div'"
+          v-bind="getEditorColumnWrapperProps(item)"
+        >
+          <div class="x-input-table__editor-th" :style="getEditorColumnHeaderStyle(item)">{{ getEditorColumnTitle(item) }}</div>
+          <div class="x-input-table__editor-td" :style="getEditorColumnBodyStyle(item)">
+            <component :is="renderEditorFormItem(item)" />
+          </div>
+        </component>
+      </div>
+      <div
+        v-if="editorOperationColumn"
+        class="x-input-table__editor-column x-input-table__editor-column--operation"
+        :style="getEditorColumnStyle(editorOperationColumn)"
+      >
+        <div class="x-input-table__editor-th" :style="getEditorColumnHeaderStyle(editorOperationColumn)">{{ getEditorColumnTitle(editorOperationColumn) }}</div>
+        <div class="x-input-table__editor-td x-input-table__editor-operation-cell" :style="getEditorColumnBodyStyle(editorOperationColumn)">
+          <span
+            v-for="action in editorOperationActions"
+            :key="action"
+            class="x-input-table__editor-operation-action"
+          >
+            {{ getEditorOperationActionLabel(action) }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, h, inject, ref, useSlots } from 'vue'
+import FormItem from '@/components/form/form-item.vue'
+import type { XFormItem } from '@/components/form/type'
+import type { XInputTableBase } from '@/components/input-table/type'
+import { getFormItemRuntimeId, type IdValue } from '@/utils/id'
+import {
+  getEditorChildContainerPath,
+  getEditorChildItemPath,
+  getEditorPathAttr,
+  resolveEditorContainerMeta,
+  type XEditorContainerMeta
+} from '@/utils/editor-container'
+
+type EditorInputTableColumn = NonNullable<XInputTableBase['items']>[number] & {
+  _id: IdValue
+}
+
+const props = withDefaults(defineProps<XInputTableBase & XEditorContainerMeta & {
+  item?: XFormItem
+  formProps?: any
+  rowData?: Record<string, any>
+}>(), {
+  items: () => [],
+  addable: true,
+  deletable: true
+})
+
+const slots = useSlots()
+const wrapperComponent = inject<any>('wrapperComponent', '')
+const emitCustomEvent = inject<(event: any) => void>('emitCustomEvent', () => { })
+const editorMeta = computed(() => resolveEditorContainerMeta(props, {}))
+const parentEditorId = computed(() => editorMeta.value.__editorId ?? editorMeta.value._id)
+const parentEditorPath = computed(() => editorMeta.value.editorPath)
+const getEditorItemsContainerPath = () => getEditorChildContainerPath(parentEditorPath.value, 'items')
+
+const editorColumnsWithId = computed<EditorInputTableColumn[]>(() => {
+  return (props.items ?? []).map((item) => ({
+    ...item,
+    _id: getFormItemRuntimeId(item as any)
+  })) as EditorInputTableColumn[]
+})
+const editorNormalColumns = computed(() => editorColumnsWithId.value.filter((item) => item.type !== 'operation'))
+const editorOperationColumn = computed(() => editorColumnsWithId.value.find((item) => item.type === 'operation'))
+const editorRowData = ref({})
+
+const getEditorColumnTitle = (item: EditorInputTableColumn) => {
+  return (typeof item.label === 'string' && item.label) || item.name || item.type || '列'
+}
+
+const getEditorColumnStyle = (item: EditorInputTableColumn) => {
+  const width = Number(item.width) || 180
+  return {
+    flexBasis: `${width}px`
+  }
+}
+
+const getEditorAlignJustifyContent = (align?: string) => {
+  if (align === 'left') return 'flex-start'
+  if (align === 'right') return 'flex-end'
+  if (align === 'center') return 'center'
+  return undefined
+}
+
+const getEditorColumnHeaderStyle = (item: EditorInputTableColumn) => {
+  const justifyContent = getEditorAlignJustifyContent((item as any).headerAlign || (item as any).align)
+  return justifyContent ? { justifyContent } : undefined
+}
+
+const getEditorColumnBodyStyle = (item: EditorInputTableColumn) => {
+  const justifyContent = getEditorAlignJustifyContent((item as any).align)
+  return justifyContent ? { justifyContent } : undefined
+}
+
+const editorOperationActions = computed(() => {
+  const actions = editorOperationColumn.value?.actions
+  return Array.isArray(actions) ? actions.map((item: any) => (typeof item === 'string' ? item : item?.action)).filter(Boolean) : []
+})
+
+const getEditorOperationActionLabel = (action: string) => {
+  if (action === 'add') return '新增'
+  if (action === 'delete') return '删除'
+  if (action === 'add-child') return '新增子项'
+  return action
+}
+
+const getEditorColumnPath = (item: EditorInputTableColumn) => {
+  const index = editorColumnsWithId.value.findIndex((column) => column._id === item._id)
+  return getEditorChildItemPath(getEditorItemsContainerPath(), index)
+}
+
+const getEditorColumnWrapperProps = (item: EditorInputTableColumn) => {
+  const baseProps = {
+    class: 'x-input-table__editor-column',
+    style: getEditorColumnStyle(item),
+    'data-editor-item-path': getEditorPathAttr(getEditorColumnPath(item))
+  }
+  if (!wrapperComponent) return baseProps
+  return {
+    ...baseProps,
+    item,
+    rowData: editorRowData.value,
+    static: props.static,
+    emitCustomEvent,
+    editorPath: getEditorColumnPath(item),
+    parentEditorId: parentEditorId.value,
+    tag: 'table-column'
+  }
+}
+
+const renderEditorFormItem = (item: EditorInputTableColumn) => {
+  return h(
+    FormItem,
+    {
+      item: item as XFormItem,
+      formProps: props,
+      rowData: editorRowData.value,
+      static: props.static,
+      noLabel: true,
+      editorPath: getEditorColumnPath(item)
+    },
+    {
+      ...slots
+    }
+  )
+}
+</script>
+
+<style lang="scss" scoped>
+.x-input-table__editor {
+  border: 1px solid var(--el-table-border-color, var(--el-border-color-lighter));
+  border-radius: 4px;
+  background: var(--el-fill-color-blank);
+  overflow: hidden;
+}
+
+.x-input-table__editor-scroll {
+  min-height: 92px;
+  display: flex;
+  align-items: stretch;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.x-input-table__editor-columns {
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+
+  &.is-editor-empty-drop-zone {
+    flex: 1 0 240px;
+    min-height: 92px;
+    border: 1px dashed var(--el-border-color);
+    border-radius: 4px;
+    justify-content: center;
+    align-items: center;
+
+    &::before {
+      content: '拖拽普通组件作为表格列';
+      color: var(--el-text-color-placeholder);
+      font-size: 13px;
+      pointer-events: none;
+    }
+  }
+}
+
+.x-input-table__editor-column {
+  position: relative;
+  flex: 0 0 180px;
+  min-width: 0;
+  border: 0;
+  border-right: 1px solid var(--el-table-border-color, var(--el-border-color-lighter));
+  border-radius: 0;
+  background: var(--el-fill-color-blank);
+
+  &.editor-item-wrapper {
+    padding: 0;
+    margin-bottom: 0;
+    border: 0;
+    border-right: 1px solid var(--el-table-border-color, var(--el-border-color-lighter));
+    border-radius: 0;
+    background: var(--el-fill-color-blank);
+  }
+
+  &.editor-item-wrapper.is-active {
+    z-index: 2;
+    outline: none;
+    border-right-color: transparent;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      z-index: 10;
+      border: 2px solid var(--el-color-primary);
+      pointer-events: none;
+    }
+  }
+
+  &:first-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  &:last-child {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.x-input-table__editor-column--operation {
+  border-left: 0;
+  background: var(--el-fill-color-blank);
+}
+
+.x-input-table__editor-th {
+  min-height: 36px;
+  padding: 8px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-bottom: 1px solid var(--el-table-border-color, var(--el-border-color-lighter));
+  color: var(--el-text-color-primary);
+  font-size: 13px;
+  font-weight: 600;
+  background: var(--el-table-header-bg-color, var(--el-fill-color-light));
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.x-input-table__editor-td {
+  min-height: 56px;
+  padding: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.x-input-table__editor-td :deep(.el-form-item) {
+  width: 100%;
+  padding: 0 !important;
+}
+
+.x-input-table__editor-column :deep(.editor-item-content) {
+  height: 100%;
+}
+
+.x-input-table__editor-column.editor-item-wrapper :deep(.editor-item-actions) {
+  top: 0;
+  right: 0;
+  bottom: auto;
+  border-radius: 0 0 0 2px;
+}
+
+.x-input-table__editor-operation-cell {
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.x-input-table__editor-operation-action {
+  color: var(--el-color-primary);
+  font-size: 12px;
+  line-height: 1;
+}
+
+.x-input-table__editor-operation-action + .x-input-table__editor-operation-action {
+  padding-left: 6px;
+  border-left: 1px solid var(--el-border-color);
+}
+</style>