From 0a51bd3a9326e8d37a9becc0c2f45536f364a7f6 Mon Sep 17 00:00:00 2001
From: Shigma <shigma10826@gmail.com>
Date: Mon, 22 Jan 2024 00:02:55 +0800
Subject: [PATCH] feat: support edit as JSON

---
 packages/form/src/icons/code.vue    |  5 ++
 packages/form/src/icons/index.ts    |  2 +
 packages/form/src/locales/en-US.yml |  6 +++
 packages/form/src/locales/zh-CN.yml |  6 +++
 packages/form/src/schema.vue        | 71 +++++++++++++++++++++++++++--
 packages/form/src/styles/index.scss | 15 ++++++
 6 files changed, 101 insertions(+), 4 deletions(-)
 create mode 100644 packages/form/src/icons/code.vue

diff --git a/packages/form/src/icons/code.vue b/packages/form/src/icons/code.vue
new file mode 100644
index 0000000..4ff6e86
--- /dev/null
+++ b/packages/form/src/icons/code.vue
@@ -0,0 +1,5 @@
+<template>
+  <svg class="k-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+    <path fill="currentColor" d="M414.9 31.11L270.9 495.1C266.1 507.8 253.5 514.8 240.9 510.9C228.2 506.1 221.1 493.5 225.1 480.9L369.1 16.89C373 4.226 386.5-2.852 399.1 1.077C411.8 5.006 418.9 18.45 414.9 31.11V31.11zM504.4 118.5L632.4 238.5C637.3 243 640 249.4 640 255.1C640 262.6 637.3 268.1 632.4 273.5L504.4 393.5C494.7 402.6 479.6 402.1 470.5 392.4C461.4 382.7 461.9 367.6 471.6 358.5L580.9 255.1L471.6 153.5C461.9 144.4 461.4 129.3 470.5 119.6C479.6 109.9 494.7 109.4 504.4 118.5V118.5zM168.4 153.5L59.09 255.1L168.4 358.5C178.1 367.6 178.6 382.7 169.5 392.4C160.4 402.1 145.3 402.6 135.6 393.5L7.585 273.5C2.746 268.1 0 262.6 0 255.1C0 249.4 2.746 243 7.585 238.5L135.6 118.5C145.3 109.4 160.4 109.9 169.5 119.6C178.6 129.3 178.1 144.4 168.4 153.5V153.5z"/>
+  </svg>
+</template>
diff --git a/packages/form/src/icons/index.ts b/packages/form/src/icons/index.ts
index b13b03d..55737fb 100644
--- a/packages/form/src/icons/index.ts
+++ b/packages/form/src/icons/index.ts
@@ -3,6 +3,7 @@ import IconArrowDown from './arrow-down.vue'
 import IconArrowUp from './arrow-up.vue'
 import IconBranch from './branch.vue'
 import IconClose from './close.vue'
+import IconCode from './code.vue'
 import IconCollapse from './collapse.vue'
 import IconDelete from './delete.vue'
 import IconEllipsis from './ellipsis.vue'
@@ -25,6 +26,7 @@ export {
   IconArrowUp,
   IconBranch,
   IconClose,
+  IconCode,
   IconCollapse,
   IconDelete,
   IconEllipsis,
diff --git a/packages/form/src/locales/en-US.yml b/packages/form/src/locales/en-US.yml
index 7b9dca5..772d108 100644
--- a/packages/form/src/locales/en-US.yml
+++ b/packages/form/src/locales/en-US.yml
@@ -3,6 +3,12 @@ initial: Undo
 default: Restore to Default
 collapse: Collapse
 expand: Expand to Edit
+edit:
+  json: Edit JSON
+  invalid: Invalid configuration.
+  save: Save Changes
+  copy: Copy to Clipboard
+  copied: Copied
 badge:
   deprecated: deprecated
   experimental: experimental
diff --git a/packages/form/src/locales/zh-CN.yml b/packages/form/src/locales/zh-CN.yml
index 186df7c..8298035 100644
--- a/packages/form/src/locales/zh-CN.yml
+++ b/packages/form/src/locales/zh-CN.yml
@@ -3,6 +3,12 @@ initial: 撤销更改
 default: 恢复默认值
 collapse: 折叠子项
 expand: 展开以编辑
+edit:
+  json: 编辑 JSON
+  invalid: 无效的配置。
+  save: 保存更改
+  copy: 复制到剪贴板
+  copied: 已复制
 badge:
   deprecated: 已废弃
   experimental: 实验性
diff --git a/packages/form/src/schema.vue b/packages/form/src/schema.vue
index c73aa58..abb1a3b 100644
--- a/packages/form/src/schema.vue
+++ b/packages/form/src/schema.vue
@@ -16,6 +16,12 @@
   >
     <template #title><slot name="title"></slot></template>
     <template #menu>
+      <div
+        class="k-menu-item"
+        @click="showJson = true">
+        <span class="k-menu-icon"><icon-code></icon-code></span>
+        {{ t('edit.json') }}
+      </div>
       <div
         class="k-menu-item"
         :class="{ disabled: disabled || deepEqual(initial, modelValue) }"
@@ -49,15 +55,43 @@
       ></schema-primitive>
     </template>
   </schema-component>
+
+  <el-dialog
+    v-model="showJson"
+    destroy-on-close
+    class="k-schema-edit-dialog"
+    :title="t('edit.json')"
+    @open="input?.focus()"
+  >
+    <el-input
+      ref="input"
+      type="textarea"
+      :class="{ invalid: jsonError }"
+      :autosize="{ minRows: 2, maxRows: 10 }"
+      v-model="jsonInput"
+    ></el-input>
+    <template #footer>
+      <div></div>
+      <div>
+        <el-button @click="copyToClipboard">{{ t('edit.copy') }}</el-button>
+        <el-button
+          type="primary"
+          :disabled="!!jsonError"
+          @click="saveChanges"
+        >{{ t('edit.save') }}</el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <script lang="ts" setup>
 
-import { computed, PropType } from 'vue'
+import { computed, PropType, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { clone, deepEqual, isNullable } from 'cosmokit'
-import extensions, { Schema, useI18nText } from './utils'
-import { IconUndo, IconReset } from './icons'
+import { ElMessage } from 'element-plus'
+import extensions, { getFallback, Schema, useI18nText } from './utils'
+import { IconCode, IconUndo, IconReset } from './icons'
 import SchemaPrimitive from './primitive.vue'
 import SchemaBase from './base.vue'
 import zhCN from './locales/zh-CN.yml'
@@ -73,7 +107,36 @@ const props = defineProps({
   prefix: { type: String, default: '' },
 })
 
-defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue'])
+
+const input = ref()
+const showJson = ref(false)
+const jsonInput = ref('')
+const jsonError = ref('')
+
+watch(() => props.modelValue, (value) => {
+  jsonInput.value = JSON.stringify(value ?? getFallback(props.schema), null, 2)
+}, { immediate: true })
+
+watch(jsonInput, (value: string) => {
+  jsonError.value = ''
+  try {
+    const config = JSON.parse(value)
+    Schema(props.schema)(config)
+  } catch (e) {
+    jsonError.value = t('edit.invalid')
+  }
+})
+
+async function copyToClipboard() {
+  await navigator.clipboard.writeText(jsonInput.value)
+  ElMessage.success(t('edit.copied'))
+}
+
+function saveChanges() {
+  emit('update:modelValue', Schema(props.schema).simplify(JSON.parse(jsonInput.value)))
+  showJson.value = false
+}
 
 const tt = useI18nText()
 
diff --git a/packages/form/src/styles/index.scss b/packages/form/src/styles/index.scss
index 1e98029..9b00c5e 100644
--- a/packages/form/src/styles/index.scss
+++ b/packages/form/src/styles/index.scss
@@ -39,3 +39,18 @@
     border-top: none;
   }
 }
+
+.el-input.invalid .el-input__wrapper {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+}
+
+.el-textarea.invalid .el-textarea__inner {
+  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
+}
+
+.k-schema-edit-dialog {
+  .el-dialog__footer {
+    display: flex;
+    justify-content: space-between;
+  }
+}