xkit-editor 2.0.0-alpha.0

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

@@ -0,0 +1,291 @@
+<template>
+  <template v-if="usesSpanEditor">
+    <FormItemSpanEditor
+      :model-value="selectedItem.span"
+      :default-span="spanEditorDefaultSpan"
+      :control-width="selectedItem.style?.width"
+      :offset-right="offsetRightValue"
+      :show-advanced="activeType === 'grid'"
+      @update:modelValue="handleSpanChange"
+      @update:controlWidth="handleControlWidthChange"
+      @update:offsetRight="handleOffsetRightChange"
+    />
+  </template>
+  <ObjectSectionEditor
+    v-else
+    :key="activeType"
+    :model-value="activeValue"
+    :title="title || activeTitle"
+    :root-key="rootKey"
+    :value-mode="activeValueMode"
+    :main-key="activeMainKey"
+    :sync-keys="activeSyncKeys"
+    section-mode="plain"
+    :sections="activeSections"
+    v-bind="gridSyncAttrs"
+    @update:modelValue="handleChange"
+    @update:offsetRight="emit('update:offsetRight', $event)"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed, inject, type ComputedRef } from 'vue'
+import ObjectSectionEditor from './object-section-editor.vue'
+import FormItemSpanEditor from './form-item-span-editor.vue'
+import {
+  descriptionsItemLayoutSections,
+  inputArrayItemWidthLayoutSections,
+  inputTableMergedColumnLayoutSections,
+  inputTableNestedColumnLayoutSections,
+  tableItemLayoutSections
+} from '../component-configs/layout-sections'
+import { setFormItemControlWidth } from '../utils/form-item-width'
+
+type LayoutType = 'grid' | 'descriptions' | 'table' | 'input-array-grid' | 'input-array-width'
+type EditorNode = Record<string, any>
+
+const props = defineProps<{
+  modelValue?: any
+  title?: string
+  offsetRight?: number
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: any): void
+  (event: 'update:offsetRight', value: any): void
+}>()
+
+const editorContext = inject<ComputedRef<{ form?: any; selectedItem?: any }> | null>('x-editor-context', null)
+const EDITOR_ID_FIELD = '__editorId'
+
+const selectedItem = computed(() => editorContext?.value?.selectedItem || {})
+const selectedEditorId = computed(() => selectedItem.value?.[EDITOR_ID_FIELD] ?? selectedItem.value?._id)
+
+const findParentByEditorId = (items: EditorNode[] = [], editorId: unknown, parent?: EditorNode): EditorNode | undefined => {
+  if (editorId === undefined || editorId === null) return undefined
+
+  for (const item of items) {
+    const itemId = item?.[EDITOR_ID_FIELD] ?? item?._id
+    if (itemId === editorId) return parent
+
+    for (const key of ['body', 'items']) {
+      if (!Array.isArray(item?.[key])) continue
+      const result = findParentByEditorId(item[key], editorId, item)
+      if (result) return result
+    }
+  }
+}
+
+const parentNode = computed(() => findParentByEditorId(editorContext?.value?.form?.body || [], selectedEditorId.value))
+const inputArrayItemParent = computed(() => (parentNode.value?.type === 'x-input-array' ? parentNode.value : undefined))
+const isInputArrayItem = computed(() => Boolean(inputArrayItemParent.value))
+const isGridInputArrayItem = computed(() => Boolean(inputArrayItemParent.value?.useLayout))
+const inputArrayDefaultSpan = computed(() => {
+  const value = inputArrayItemParent.value?.layout?.col?.span
+  return typeof value === 'number' ? value : 12
+})
+const rootDefaultSpan = computed(() => {
+  const parentLayoutSpan = parentNode.value?.layout?.col?.span
+  if (typeof parentLayoutSpan === 'number') return parentLayoutSpan
+  const formLayoutSpan = editorContext?.value?.form?.layout?.col?.span
+  return typeof formLayoutSpan === 'number' ? formLayoutSpan : 24
+})
+const spanEditorDefaultSpan = computed(() => (activeType.value === 'input-array-grid' ? inputArrayDefaultSpan.value : rootDefaultSpan.value))
+const usesSpanEditor = computed(() => activeType.value === 'grid' || activeType.value === 'input-array-grid')
+const offsetRightValue = computed(() => clampOffsetRight(props.offsetRight ?? selectedItem.value.offsetRight))
+
+const activeType = computed<LayoutType>(() => {
+  if (isInputArrayItem.value) return isGridInputArrayItem.value ? 'input-array-grid' : 'input-array-width'
+  const type = editorContext?.value?.form?.layout?.type
+  if (type === 'descriptions' || type === 'table') return type
+  return 'grid'
+})
+
+const inputTableColumnParent = computed(() => {
+  return parentNode.value?.type === 'x-input-table' ? parentNode.value : undefined
+})
+const isInputTableColumn = computed(() => Boolean(inputTableColumnParent.value))
+const isMergedInputTableColumn = computed(() => inputTableColumnParent.value?.tableComposition === 'merged')
+
+const activeValue = computed(() => {
+  if (activeType.value === 'input-array-width') {
+    return {
+      width: selectedItem.value.style?.width
+    }
+  }
+  if (activeType.value === 'table' && isInputTableColumn.value) {
+    if (isMergedInputTableColumn.value) {
+      return {
+        align: selectedItem.value.align,
+        headerAlign: selectedItem.value.headerAlign,
+        colspan: selectedItem.value.colspan ?? selectedItem.value.layoutCfg?.table?.colspan ?? selectedItem.value.layoutCfg?.table?.valueColspan
+      }
+    }
+    return {
+      align: selectedItem.value.align,
+      headerAlign: selectedItem.value.headerAlign,
+      minWidth: selectedItem.value.minWidth
+    }
+  }
+  if (activeType.value === 'grid') {
+    return props.modelValue
+  }
+  return selectedItem.value.layoutCfg?.[activeType.value] || {}
+})
+
+const activeSections = computed(() => {
+  if (activeType.value === 'input-array-width') return inputArrayItemWidthLayoutSections
+  if (activeType.value === 'table' && isInputTableColumn.value) {
+    return isMergedInputTableColumn.value ? inputTableMergedColumnLayoutSections : inputTableNestedColumnLayoutSections
+  }
+  if (activeType.value === 'descriptions') return descriptionsItemLayoutSections
+  if (activeType.value === 'table') return tableItemLayoutSections
+  return []
+})
+
+const activeTitle = computed(() => {
+  if (activeType.value === 'input-array-grid') return '数组子项栅格'
+  if (activeType.value === 'input-array-width') return '数组子项宽度'
+  if (activeType.value === 'table' && isInputTableColumn.value) return '列布局'
+  if (activeType.value === 'descriptions') return '描述表布局'
+  if (activeType.value === 'table') return '表格布局'
+  return '布局配置'
+})
+
+const rootKey = computed(() => {
+  if (activeType.value === 'input-array-grid') return 'span'
+  if (activeType.value === 'input-array-width') return 'style.width'
+  if (activeType.value === 'grid') return 'layout'
+  return `layoutCfg.${activeType.value}`
+})
+
+const activeValueMode = computed<'flat'>(() => 'flat')
+const activeMainKey = computed(() => undefined)
+const activeSyncKeys = computed(() => undefined)
+const gridSyncAttrs = computed(() => {
+  if (activeType.value === 'input-array-grid' || activeType.value === 'input-array-width') return {}
+  if (activeType.value !== 'grid') return {}
+  return {
+    offsetRight: props.offsetRight
+  }
+})
+
+const cleanRecord = (value: any) => {
+  if (!value || typeof value !== 'object') return undefined
+  const next = Object.entries(value).reduce<Record<string, any>>((result, [key, itemValue]) => {
+    if (itemValue !== undefined && itemValue !== null && itemValue !== '') {
+      result[key] = itemValue
+    }
+    return result
+  }, {})
+  return Object.keys(next).length > 0 ? next : undefined
+}
+
+const handleChange = (value: any) => {
+  if (activeType.value === 'input-array-width') {
+    if (value?.width === undefined || value?.width === null || value?.width === '') {
+      const style = { ...(selectedItem.value.style || {}) }
+      delete style.width
+      const cleanedStyle = cleanRecord(style)
+      selectedItem.value.style = cleanedStyle
+    } else {
+      const nextStyle = {
+        ...(selectedItem.value.style || {}),
+        width: value.width
+      }
+      selectedItem.value.style = nextStyle
+    }
+    delete selectedItem.value.span
+    emit('update:modelValue', selectedItem.value.span)
+    return
+  }
+
+  const item = selectedItem.value
+  if (activeType.value === 'table' && isInputTableColumn.value) {
+    const cleaned = cleanRecord(value) || {}
+    if (cleaned.align === undefined) {
+      delete item.align
+    } else {
+      item.align = cleaned.align
+    }
+    if (cleaned.headerAlign === undefined) {
+      delete item.headerAlign
+    } else {
+      item.headerAlign = cleaned.headerAlign
+    }
+
+    if (isMergedInputTableColumn.value) {
+      if (cleaned.colspan === undefined) {
+        delete item.colspan
+      } else {
+        item.colspan = cleaned.colspan
+      }
+      delete item.minWidth
+    } else {
+      if (cleaned.minWidth === undefined) {
+        delete item.minWidth
+      } else {
+        item.minWidth = cleaned.minWidth
+      }
+      delete item.colspan
+    }
+
+    const tableLayout = { ...(item.layoutCfg?.table || {}) }
+    delete tableLayout.basic
+    delete tableLayout.advanced
+    delete tableLayout.colspan
+    delete tableLayout.labelColspan
+    delete tableLayout.valueColspan
+    delete tableLayout.valueMinWidth
+    delete tableLayout.rowspan
+
+    const layoutCfg = { ...(item.layoutCfg || {}), table: cleanRecord(tableLayout) }
+    if (!layoutCfg.table) delete layoutCfg.table
+    item.layoutCfg = cleanRecord(layoutCfg)
+    emit('update:modelValue', props.modelValue)
+    return
+  }
+
+  const layoutCfg = {
+    ...(item.layoutCfg || {}),
+    [activeType.value]: cleanRecord(value)
+  }
+  if (!layoutCfg[activeType.value]) {
+    delete layoutCfg[activeType.value]
+  }
+  item.layoutCfg = cleanRecord(layoutCfg)
+  emit('update:modelValue', props.modelValue)
+}
+
+const handleSpanChange = (value: number | undefined) => {
+  if (value === undefined || value === null) {
+    delete selectedItem.value.span
+  } else {
+    selectedItem.value.span = value
+  }
+  emit('update:modelValue', selectedItem.value.span)
+}
+
+const handleControlWidthChange = (value: number | string | undefined) => {
+  if (activeType.value !== 'grid') return
+  setFormItemControlWidth(selectedItem.value, value)
+  emit('update:modelValue', selectedItem.value.span)
+}
+
+function clampOffsetRight(value: unknown) {
+  const numericValue = Number(value)
+  if (!Number.isFinite(numericValue)) return 0
+  return Math.min(23, Math.max(0, Math.round(numericValue)))
+}
+
+const handleOffsetRightChange = (value: number | undefined) => {
+  const nextValue = clampOffsetRight(value)
+  if (nextValue === 0) {
+    delete selectedItem.value.offsetRight
+    emit('update:offsetRight', undefined)
+    return
+  }
+  selectedItem.value.offsetRight = nextValue
+  emit('update:offsetRight', nextValue)
+}
+</script>

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

@@ -0,0 +1,328 @@
+<template>
+  <div class="form-item-span-editor">
+    <div class="form-item-span-editor__panel">
+      <span class="form-item-span-editor__corner" />
+      <div class="form-item-span-editor__header">
+        <div class="form-item-span-editor__path">span</div>
+        <button v-if="showAdvanced" class="form-item-span-editor__toggle" type="button" @click="advancedVisible = !advancedVisible">
+          {{ advancedVisible ? '折叠' : '展开' }}
+        </button>
+      </div>
+      <div class="form-item-span-editor__row">
+        <span class="form-item-span-editor__label">自定义列数</span>
+        <el-switch :model-value="enabled" @update:modelValue="handleEnabledChange" />
+      </div>
+      <div v-if="enabled" class="form-item-span-editor__body">
+        <button
+          v-for="cell in cells"
+          :key="cell"
+          class="form-item-span-editor__cell"
+          :class="{
+            'is-active': cell <= activeCellCount,
+            'is-selected-marker': cell === selectedMarkerCell,
+          }"
+          type="button"
+          @click="handleCellClick(cell)"
+        >
+          <span v-if="cellMarkers[cell]" class="form-item-span-editor__cell-fraction" aria-hidden="true">
+            <span>{{ cellMarkers[cell].numerator }}</span>
+            <span v-if="cellMarkers[cell].denominator">{{ cellMarkers[cell].denominator }}</span>
+          </span>
+        </button>
+        <el-input-number
+          class="form-item-span-editor__number"
+          :model-value="resolvedSpan"
+          :min="1"
+          :max="24"
+          :step="1"
+          :controls="false"
+          controls-position="right"
+          size="small"
+          @update:modelValue="handleSpanChange"
+        />
+      </div>
+      <div v-if="showAdvanced && advancedVisible" class="form-item-span-editor__advanced">
+        <div class="form-item-span-editor__row">
+          <span class="form-item-span-editor__label">控件宽度占满</span>
+          <el-switch :model-value="controlWidthFull" @update:modelValue="handleControlWidthFullChange" />
+        </div>
+        <div v-if="!controlWidthFull" class="form-item-span-editor__row form-item-span-editor__row--nested">
+          <span class="form-item-span-editor__label">控件宽度</span>
+          <div class="form-item-span-editor__number-with-unit">
+            <el-input-number
+              class="form-item-span-editor__width-number"
+              :model-value="customControlWidth"
+              :min="1"
+              :step="10"
+              controls-position="right"
+              size="small"
+              @update:modelValue="handleControlWidthChange"
+            />
+            <span class="form-item-span-editor__unit">px</span>
+          </div>
+        </div>
+        <div class="form-item-span-editor__row form-item-span-editor__row--nested">
+          <span class="form-item-span-editor__label" title="不占满一行时，如需独占一行，可设置右侧排斥。">右侧排斥</span>
+          <el-input-number
+            class="form-item-span-editor__offset-right-number"
+            :model-value="resolvedOffsetRight"
+            :min="0"
+            :max="23"
+            :step="1"
+            controls-position="right"
+            size="small"
+            @update:modelValue="handleOffsetRightChange"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { ElInputNumber, ElSwitch } from 'element-plus'
+import {
+  DEFAULT_FORM_ITEM_CUSTOM_WIDTH,
+  isFullFormItemControlWidth,
+  normalizeCustomFormItemControlWidth
+} from '../utils/form-item-width'
+
+const props = defineProps<{
+  modelValue?: number
+  defaultSpan?: number
+  controlWidth?: number | string
+  offsetRight?: number
+  showAdvanced?: boolean
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: number | undefined): void
+  (event: 'update:controlWidth', value: number | string | undefined): void
+  (event: 'update:offsetRight', value: number | undefined): void
+}>()
+
+const cells = Array.from({ length: 12 }, (_, index) => index + 1)
+const cellMarkers: Record<number, { numerator: string; denominator?: string }> = {
+  3: { numerator: '1', denominator: '4' },
+  4: { numerator: '1', denominator: '3' },
+  6: { numerator: '1', denominator: '2' },
+  8: { numerator: '2', denominator: '3' },
+  9: { numerator: '3', denominator: '4' },
+  12: { numerator: '1' },
+}
+const advancedVisible = ref(false)
+const enabled = computed(() => props.modelValue !== undefined && props.modelValue !== null)
+const fallbackSpan = computed(() => clampSpan(props.defaultSpan ?? 24))
+const resolvedSpan = computed(() => clampSpan(props.modelValue ?? fallbackSpan.value))
+const controlWidthFull = computed(() => isFullFormItemControlWidth(props.controlWidth))
+const customControlWidth = computed(() => {
+  return controlWidthFull.value ? DEFAULT_FORM_ITEM_CUSTOM_WIDTH : normalizeCustomFormItemControlWidth(props.controlWidth, DEFAULT_FORM_ITEM_CUSTOM_WIDTH)
+})
+const resolvedOffsetRight = computed(() => clampOffsetRight(props.offsetRight))
+const activeCellCount = computed(() => Math.ceil(resolvedSpan.value / 2))
+const selectedMarkerCell = computed(() => {
+  const cell = resolvedSpan.value / 2
+  return Number.isInteger(cell) && cellMarkers[cell] ? cell : null
+})
+
+function clampSpan(value: unknown) {
+  const numericValue = Number(value)
+  if (!Number.isFinite(numericValue)) return 24
+  return Math.min(24, Math.max(1, Math.round(numericValue)))
+}
+
+function clampOffsetRight(value: unknown) {
+  const numericValue = Number(value)
+  if (!Number.isFinite(numericValue)) return 0
+  return Math.min(23, Math.max(0, Math.round(numericValue)))
+}
+
+const handleEnabledChange = (value: boolean | string | number) => {
+  emit('update:modelValue', value ? fallbackSpan.value : undefined)
+}
+
+const handleCellClick = (cell: number) => {
+  emit('update:modelValue', clampSpan(cell * 2))
+}
+
+const handleSpanChange = (value: number | undefined) => {
+  emit('update:modelValue', value === undefined || value === null ? fallbackSpan.value : clampSpan(value))
+}
+
+const handleControlWidthFullChange = (value: boolean | string | number) => {
+  emit('update:controlWidth', value ? undefined : customControlWidth.value)
+}
+
+const handleControlWidthChange = (value: number | undefined) => {
+  emit('update:controlWidth', normalizeCustomFormItemControlWidth(value, DEFAULT_FORM_ITEM_CUSTOM_WIDTH))
+}
+
+const handleOffsetRightChange = (value: number | undefined) => {
+  const nextValue = clampOffsetRight(value)
+  emit('update:offsetRight', nextValue === 0 ? undefined : nextValue)
+}
+</script>
+
+<style scoped lang="scss">
+.form-item-span-editor {
+  width: 100%;
+}
+
+.form-item-span-editor__panel {
+  position: relative;
+  padding: 8px;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 4px;
+  background: var(--el-fill-color-blank);
+}
+
+.form-item-span-editor__corner {
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  width: 8px;
+  height: 8px;
+  border-top: 1px solid var(--el-color-primary);
+  border-left: 1px solid var(--el-color-primary);
+}
+
+.form-item-span-editor__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.form-item-span-editor__path {
+  color: var(--el-text-color-placeholder);
+  font-size: 12px;
+  line-height: 1;
+}
+
+.form-item-span-editor__toggle {
+  height: 18px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--el-color-primary);
+  font-size: 12px;
+  line-height: 18px;
+  cursor: pointer;
+}
+
+.form-item-span-editor__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.form-item-span-editor__row--nested {
+  padding-left: 8px;
+}
+
+.form-item-span-editor__label {
+  color: var(--el-text-color-regular);
+  font-size: 13px;
+}
+
+.form-item-span-editor__body {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr)) 44px;
+  gap: 4px;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.form-item-span-editor__cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 24px;
+  min-width: 0;
+  padding: 0;
+  border: 1px solid var(--el-border-color);
+  border-radius: 2px;
+  background: var(--el-fill-color-light);
+  cursor: pointer;
+
+  &.is-active {
+    border-color: var(--el-color-primary);
+    background: var(--el-color-primary);
+  }
+}
+
+.form-item-span-editor__cell-fraction {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: 10px;
+  color: var(--el-text-color-secondary);
+  font-size: 10px;
+  font-weight: 600;
+  line-height: 1;
+  opacity: 0;
+  transition: opacity var(--el-transition-duration-fast);
+
+  span + span {
+    margin-top: 1px;
+    padding-top: 1px;
+    border-top: 1px solid currentColor;
+  }
+}
+
+.form-item-span-editor__body:hover .form-item-span-editor__cell-fraction,
+.form-item-span-editor__body:focus-within .form-item-span-editor__cell-fraction,
+.form-item-span-editor__cell.is-selected-marker .form-item-span-editor__cell-fraction {
+  opacity: 1;
+}
+
+.form-item-span-editor__cell.is-active .form-item-span-editor__cell-fraction {
+  color: var(--el-color-white);
+}
+
+.form-item-span-editor__number {
+  width: 44px;
+}
+
+.form-item-span-editor__number :deep(.el-input__wrapper) {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.form-item-span-editor__advanced {
+  display: grid;
+  gap: 8px;
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+
+.form-item-span-editor__number-with-unit {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.form-item-span-editor__width-number {
+  width: 86px;
+}
+
+.form-item-span-editor__offset-right-number {
+  width: 70px;
+}
+
+.form-item-span-editor__width-number :deep(.el-input__wrapper),
+.form-item-span-editor__offset-right-number :deep(.el-input__wrapper) {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+
+.form-item-span-editor__unit {
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+</style>