xkit-editor 2.0.0-alpha.0

package/src/components/input-table-default-rows-editor.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="input-table-default-rows-editor">
+    <div class="input-table-default-rows-editor__summary">
+      <div class="input-table-default-rows-editor__main">
+        <span class="input-table-default-rows-editor__title">预设数据</span>
+        <span class="input-table-default-rows-editor__count">已配置 {{ rowCount }} 行</span>
+      </div>
+      <div class="input-table-default-rows-editor__actions">
+        <el-button size="small" @click="openDialog">编辑</el-button>
+        <el-button size="small" :disabled="rowCount === 0" @click="clearRows">清空</el-button>
+      </div>
+    </div>
+
+    <el-dialog
+      v-model="dialogVisible"
+      title="编辑预设数据"
+      width="960px"
+      append-to-body
+      destroy-on-close
+      class="input-table-default-rows-editor__dialog"
+    >
+      <x-input-table
+        v-model="draftRows"
+        :id-field="idField"
+        :items="editableColumns"
+        border
+        addable
+        deletable
+        :footer-toolbar="footerToolbar"
+      />
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="commitRows">确定</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref, type ComputedRef } from 'vue'
+import { ElButton, ElDialog } from 'element-plus'
+import { XInputTable } from 'xkit-ui'
+
+type TableColumn = Record<string, any>
+type TableRow = Record<string, any>
+
+const props = defineProps<{
+  modelValue?: TableRow[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: TableRow[] | undefined): void
+}>()
+
+const editorContext = inject<ComputedRef<{ selectedItem?: any }> | null>('x-editor-context', null)
+const selectedItem = computed(() => editorContext?.value?.selectedItem || {})
+const idField = computed(() => selectedItem.value.idField || 'id')
+const sourceColumns = computed<TableColumn[]>(() => {
+  return Array.isArray(selectedItem.value.items) ? selectedItem.value.items.filter((item: TableColumn) => item.type !== 'operation') : []
+})
+const rowCount = computed(() => (Array.isArray(props.modelValue) ? props.modelValue.length : 0))
+const dialogVisible = ref(false)
+const draftRows = ref<TableRow[]>([])
+const footerToolbar: any = {
+  left: [{ type: 'button', action: 'add', label: '新增', attrs: { type: 'primary' } }]
+}
+
+const cloneRows = (value: TableRow[] | undefined) => {
+  return JSON.parse(JSON.stringify(Array.isArray(value) ? value : [])) as TableRow[]
+}
+
+const editableColumns = computed<TableColumn[]>(() => {
+  const columns: TableColumn[] = sourceColumns.value.map((column, index) => {
+    const type = column.type === 'text' ? 'input' : column.type || 'input'
+    return {
+      width: 160,
+      ...column,
+      label: column.label || column.name || `列${index + 1}`,
+      name: column.name || `field${index + 1}`,
+      type
+    }
+  })
+
+  columns.push({
+    label: '操作',
+    type: 'operation',
+    actions: [{ type: 'link', action: 'delete', label: '删除' }]
+  })
+
+  return columns
+})
+
+const openDialog = () => {
+  draftRows.value = cloneRows(props.modelValue)
+  dialogVisible.value = true
+}
+
+const clearRows = () => {
+  emit('update:modelValue', undefined)
+}
+
+const commitRows = () => {
+  emit('update:modelValue', draftRows.value.length ? cloneRows(draftRows.value) : undefined)
+  dialogVisible.value = false
+}
+</script>
+
+<style scoped lang="scss">
+.input-table-default-rows-editor {
+  width: 100%;
+}
+
+.input-table-default-rows-editor__summary {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 4px;
+  background: var(--el-fill-color-blank);
+}
+
+.input-table-default-rows-editor__main {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.input-table-default-rows-editor__title {
+  color: var(--el-text-color-primary);
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.input-table-default-rows-editor__count {
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+
+.input-table-default-rows-editor__actions {
+  flex: none;
+  display: flex;
+  gap: 6px;
+}
+</style>

package/src/components/input-table-operation-editor.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="input-table-operation-editor">
+    <div class="input-table-operation-editor__row">
+      <span class="input-table-operation-editor__label">显示行操作列</span>
+      <el-switch v-model="operationVisible" @change="emitColumns" />
+    </div>
+    <div v-if="operationVisible" class="input-table-operation-editor__row">
+      <span class="input-table-operation-editor__label">操作列宽度</span>
+      <el-input-number
+        v-model="operationWidth"
+        :min="60"
+        :step="10"
+        controls-position="right"
+        size="small"
+        @change="emitColumns"
+      />
+    </div>
+    <div v-if="operationVisible" class="input-table-operation-editor__actions">
+      <label class="input-table-operation-editor__action">
+        <span>新增</span>
+        <el-switch v-model="operationActions.add" @change="emitColumns" />
+      </label>
+      <label class="input-table-operation-editor__action">
+        <span>删除</span>
+        <el-switch v-model="operationActions.delete" @change="emitColumns" />
+      </label>
+      <label class="input-table-operation-editor__action">
+        <span>新增子项</span>
+        <el-switch v-model="operationActions.addChild" @change="emitColumns" />
+      </label>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { ElInputNumber, ElSwitch } from 'element-plus'
+
+type TableColumn = Record<string, any>
+
+const props = defineProps<{
+  modelValue?: TableColumn[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: TableColumn[]): void
+}>()
+
+const operationVisible = ref(true)
+const operationWidth = ref(100)
+const operationActions = ref({
+  add: true,
+  delete: true,
+  addChild: false
+})
+let syncingFromModel = false
+
+const cleanOperationColumn = (column: TableColumn): TableColumn => {
+  const { __editorId: _editorId, id: _id, ...rest } = column
+  return rest
+}
+
+const createActionItem = (action: 'add' | 'delete' | 'add-child') => {
+  const labelMap = {
+    add: '新增',
+    delete: '删除',
+    'add-child': '新增子项'
+  }
+  return { type: 'link', action, label: labelMap[action] }
+}
+
+const normalizeOperationActionState = (actions: unknown) => {
+  const actionList = Array.isArray(actions) ? actions : []
+  return {
+    add: actionList.length === 0 || actionList.some((item) => item?.action === 'add' || item === 'add'),
+    delete: actionList.length === 0 || actionList.some((item) => item?.action === 'delete' || item === 'delete'),
+    addChild: actionList.some((item) => item?.action === 'add-child' || item === 'add-child')
+  }
+}
+
+const createOperationActions = () => {
+  const result: TableColumn[] = []
+  if (operationActions.value.add) result.push(createActionItem('add'))
+  if (operationActions.value.delete) result.push(createActionItem('delete'))
+  if (operationActions.value.addChild) result.push(createActionItem('add-child'))
+  return result
+}
+
+const createOperationColumn = (): TableColumn => ({
+  label: '操作',
+  type: 'operation',
+  width: operationWidth.value,
+  actions: createOperationActions()
+})
+
+const syncFromModelValue = (value: TableColumn[] | undefined) => {
+  const source = Array.isArray(value) ? value : []
+  const operationColumn = source.find((item) => item.type === 'operation')
+  syncingFromModel = true
+  operationVisible.value = source.length === 0 || Boolean(operationColumn)
+  operationWidth.value = Number(operationColumn?.width) || 100
+  operationActions.value = normalizeOperationActionState(operationColumn?.actions)
+  syncingFromModel = false
+}
+
+const normalizeOutputColumns = (value: TableColumn[] | undefined) => {
+  const source = Array.isArray(value) ? value : []
+  return source.map((item) => (item.type === 'operation' ? cleanOperationColumn(item) : item))
+}
+
+const isSameColumns = (left: TableColumn[] | undefined, right: TableColumn[] | undefined) => {
+  return JSON.stringify(normalizeOutputColumns(left)) === JSON.stringify(normalizeOutputColumns(right))
+}
+
+const emitColumns = () => {
+  if (syncingFromModel) return
+  const source = Array.isArray(props.modelValue) ? props.modelValue : []
+  const columns = source.filter((item) => item.type !== 'operation')
+  if (operationVisible.value) {
+    columns.push(createOperationColumn())
+  }
+  if (isSameColumns(props.modelValue, columns)) return
+  emit('update:modelValue', columns)
+}
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    syncFromModelValue(value)
+  },
+  { immediate: true }
+)
+</script>
+
+<style scoped lang="scss">
+.input-table-operation-editor {
+  width: 100%;
+  display: grid;
+  gap: 10px;
+}
+
+.input-table-operation-editor__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.input-table-operation-editor__label {
+  color: var(--el-text-color-regular);
+  font-size: 13px;
+}
+
+.input-table-operation-editor__actions {
+  display: grid;
+  gap: 8px;
+}
+
+.input-table-operation-editor__action {
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  color: var(--el-text-color-regular);
+  font-size: 12px;
+}
+</style>

package/src/components/json-code-editor.vue

@@ -0,0 +1,219 @@
+<template>
+  <div class="json-code-editor" :class="{ 'is-readonly': readonly, 'has-line-numbers': hasLineNumbers }">
+    <template v-if="readonly">
+      <div v-if="hasLineNumbers" class="json-code-editor__gutter" aria-hidden="true">
+        <span v-for="line in highlightedLines" :key="line.number">{{ line.number }}</span>
+      </div>
+      <pre class="json-code-editor__viewer"><code><span
+        v-for="line in highlightedLines"
+        :key="line.number"
+        class="json-code-editor__line"
+      ><span
+        v-for="(token, index) in line.tokens"
+        :key="index"
+        :class="`json-code-editor__token is-${token.kind}`"
+      >{{ token.value }}</span></span></code></pre>
+    </template>
+    <template v-else>
+      <div v-if="hasLineNumbers" class="json-code-editor__gutter" aria-hidden="true">
+        <span v-for="line in editableLineNumbers" :key="line">{{ line }}</span>
+      </div>
+      <textarea
+        class="json-code-editor__textarea"
+        :value="modelValue"
+        spellcheck="false"
+        autocapitalize="off"
+        autocomplete="off"
+        @input="handleInput"
+        @keydown.tab.prevent="handleTab"
+      ></textarea>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+type JsonTokenKind = 'plain' | 'punctuation' | 'key' | 'string' | 'number' | 'boolean' | 'null'
+
+interface JsonToken {
+  kind: JsonTokenKind
+  value: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string
+    readonly?: boolean
+    lineNumbers?: 'on' | 'off'
+  }>(),
+  {
+    modelValue: '',
+    readonly: false,
+    lineNumbers: 'on'
+  }
+)
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const tokenPattern = /("(?:\\.|[^"\\])*")(\s*:)?|-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?|\btrue\b|\bfalse\b|\bnull\b|[{}\[\],:]/g
+
+const getTokenKind = (value: string, separator = ''): JsonTokenKind => {
+  if (value.startsWith('"')) return separator ? 'key' : 'string'
+  if (value === 'true' || value === 'false') return 'boolean'
+  if (value === 'null') return 'null'
+  if (/^-?\d/.test(value)) return 'number'
+  return 'punctuation'
+}
+
+const tokenizeLine = (line: string) => {
+  const tokens: JsonToken[] = []
+  let offset = 0
+
+  for (const match of line.matchAll(tokenPattern)) {
+    const index = match.index ?? 0
+    if (index > offset) tokens.push({ kind: 'plain', value: line.slice(offset, index) })
+
+    const value = match[1] ?? match[0]
+    const separator = match[2] ?? ''
+    tokens.push({ kind: getTokenKind(value, separator), value })
+    if (separator) tokens.push({ kind: 'punctuation', value: separator })
+    offset = index + match[0].length
+  }
+
+  if (offset < line.length) tokens.push({ kind: 'plain', value: line.slice(offset) })
+  return tokens.length ? tokens : [{ kind: 'plain', value: '' }]
+}
+
+const textLines = computed(() => (props.modelValue || '').split('\n'))
+
+const hasLineNumbers = computed(() => props.lineNumbers === 'on')
+
+const highlightedLines = computed(() =>
+  textLines.value.map((line, index) => ({
+    number: index + 1,
+    tokens: tokenizeLine(line)
+  }))
+)
+
+const editableLineNumbers = computed(() => textLines.value.map((_, index) => index + 1))
+
+const handleInput = (event: Event) => {
+  emit('update:modelValue', (event.target as HTMLTextAreaElement).value)
+}
+
+const handleTab = (event: KeyboardEvent) => {
+  const textarea = event.target as HTMLTextAreaElement
+  const start = textarea.selectionStart
+  const end = textarea.selectionEnd
+  const nextValue = `${textarea.value.slice(0, start)}  ${textarea.value.slice(end)}`
+  emit('update:modelValue', nextValue)
+
+  requestAnimationFrame(() => {
+    textarea.selectionStart = start + 2
+    textarea.selectionEnd = start + 2
+  })
+}
+
+const formatDocument = async () => {
+  try {
+    emit('update:modelValue', JSON.stringify(JSON.parse(props.modelValue || '{}'), null, 2))
+  } catch {
+    // The parent validates JSON and owns the error message.
+  }
+}
+
+defineExpose({
+  formatDocument
+})
+</script>
+
+<style scoped lang="scss">
+.json-code-editor {
+  width: 100%;
+  min-height: 520px;
+  height: 100%;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  overflow: hidden;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  background: #fbfcfe;
+  color: #303133;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
+  font-size: 13px;
+  line-height: 1.6;
+}
+
+.json-code-editor.has-line-numbers {
+  grid-template-columns: auto minmax(0, 1fr);
+}
+
+.json-code-editor__gutter {
+  padding: 12px 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0;
+  user-select: none;
+  color: #a8abb2;
+  background: #f5f7fa;
+  border-right: 1px solid #e4e7ed;
+  font-variant-numeric: tabular-nums;
+}
+
+.json-code-editor__textarea,
+.json-code-editor__viewer {
+  min-width: 0;
+  width: 100%;
+  min-height: 100%;
+  margin: 0;
+  padding: 12px 14px;
+  border: 0;
+  outline: none;
+  overflow: auto;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: inherit;
+  tab-size: 2;
+}
+
+.json-code-editor__textarea {
+  resize: none;
+  white-space: pre;
+}
+
+.json-code-editor__viewer {
+  box-sizing: border-box;
+  white-space: pre;
+}
+
+.json-code-editor__line {
+  display: block;
+  min-height: 1.6em;
+}
+
+.json-code-editor__token.is-key {
+  color: #7c3aed;
+}
+
+.json-code-editor__token.is-string {
+  color: #0f766e;
+}
+
+.json-code-editor__token.is-number {
+  color: #b45309;
+}
+
+.json-code-editor__token.is-boolean,
+.json-code-editor__token.is-null {
+  color: #2563eb;
+}
+
+.json-code-editor__token.is-punctuation {
+  color: #64748b;
+}
+</style>