fix: fix union issues

shigma · May 1, 2023 · 8426e53 · 8426e53
1 parent 614db37
commit 8426e53
Show file tree

Hide file tree

Showing 9 changed files with 161 additions and 247 deletions.
diff --git a/packages/form/src/base.vue b/packages/form/src/base.vue
@@ -6,6 +6,7 @@
         <h3>
           <slot name="title"></slot>
           <el-dropdown
+            v-if="!disabled"
             placement="bottom"
             @visible-change="$emit('visible-change', $event)">
             <svg class="trigger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">

diff --git a/packages/form/src/extensions/bitset.vue b/packages/form/src/extensions/bitset.vue
@@ -9,7 +9,7 @@
         <el-checkbox
           :disabled="disabled"
           :modelValue="!!(config & value)"
-          @update:modelValue="$emit('update:modelValue', config ^ value)"
+          @update:modelValue="config ^= value"
         >{{ key }}</el-checkbox>
       </li>
     </ul>

diff --git a/packages/form/src/extensions/group.vue b/packages/form/src/extensions/group.vue
@@ -5,7 +5,7 @@
     <template #prefix><slot name="prefix"></slot></template>
     <template #suffix><slot name="suffix"></slot></template>
     <template #control>
-      <el-button type="primary" @click="commandAdd()" :disabled="disabled">添加项</el-button>
+      <el-button type="primary" @click="add()" :disabled="disabled">添加项</el-button>
     </template>
   </schema-base>
   <div class="k-schema-group">
@@ -25,9 +25,9 @@
             <k-markdown :source="schema.inner.meta.description"></k-markdown>
           </template>
           <template #menu>
-            <el-dropdown-item divided :disabled="!index" @click="actions.up(index)">上移</el-dropdown-item>
-            <el-dropdown-item :disabled="index === entries.length - 1" @click="actions.down(index)">下移</el-dropdown-item>
-            <el-dropdown-item @click="actions.delete(index)">删除</el-dropdown-item>
+            <el-dropdown-item divided :disabled="!index" @click="up(index)">上移</el-dropdown-item>
+            <el-dropdown-item :disabled="index === entries.length - 1" @click="down(index)">下移</el-dropdown-item>
+            <el-dropdown-item @click="del(index)">删除</el-dropdown-item>
           </template>
         </schema-base>
 
@@ -53,9 +53,9 @@
         :disabled="disabled"
         :prefix="schema.type === 'array' ? `${prefix.slice(0, -1)}[${key}].` : prefix + key + '.'">
         <template #menu>
-          <el-dropdown-item divided :disabled="!index" @click="actions.up(index)">上移</el-dropdown-item>
-          <el-dropdown-item :disabled="index === entries.length - 1" @click="actions.down(index)">下移</el-dropdown-item>
-          <el-dropdown-item @click="actions.delete(index)">删除</el-dropdown-item>
+          <el-dropdown-item divided :disabled="!index" @click="up(index)">上移</el-dropdown-item>
+          <el-dropdown-item :disabled="index === entries.length - 1" @click="down(index)">下移</el-dropdown-item>
+          <el-dropdown-item @click="del(index)">删除</el-dropdown-item>
         </template>
         <template #title v-if="schema.type === 'array'">
           <span class="prefix">{{ prefix.slice(0, -1) }}</span>
@@ -72,72 +72,21 @@
 
 <script lang="ts" setup>
 
-import { PropType, ref, watch, WatchStopHandle } from 'vue'
-import { getFallback, isObjectSchema, Schema } from '../utils'
+import { PropType } from 'vue'
+import { isObjectSchema, Schema, useEntries } from '../utils'
 import SchemaBase from '../base.vue'
 
-const props = defineProps({
+defineProps({
   schema: {} as PropType<Schema>,
   modelValue: {} as PropType<any>,
   disabled: {} as PropType<boolean>,
   prefix: {} as PropType<string>,
   initial: {} as PropType<any>,
 })
 
-const emit = defineEmits(['update:modelValue'])
+defineEmits(['update:modelValue'])
 
-const actions = {
-  up(index: number) {
-    if (props.schema.type === 'dict') {
-      entries.value.splice(index - 1, 0, ...entries.value.splice(index, 1))
-    } else {
-      const temp = entries.value[index][1]
-      entries.value[index][1] = entries.value[index - 1][1]
-      entries.value[index - 1][1] = temp
-    }
-  },
-  down(index: number) {
-    if (props.schema.type === 'dict') {
-      entries.value.splice(index + 1, 0, ...entries.value.splice(index, 1))
-    } else {
-      const temp = entries.value[index][1]
-      entries.value[index][1] = entries.value[index + 1][1]
-      entries.value[index + 1][1] = temp
-    }
-  },
-  delete(index: number) {
-    entries.value.splice(index, 1)
-  },
-}
-
-function commandAdd() {
-  entries.value.push(['', getFallback(props.schema.inner)])
-}
-
-const entries = ref<any[]>([])
-
-let stop: WatchStopHandle
-
-watch(() => props.modelValue, (value) => {
-  stop?.()
-  entries.value = Object.entries(value || {})
-  stop = doWatch()
-}, { immediate: true, deep: true })
-
-function doWatch() {
-  return watch(entries, () => {
-    if (props.schema.type === 'dict') {
-      const result: any = {}
-      for (const [key, value] of entries.value) {
-        if (key in result) return
-        result[key] = value
-      }
-      emit('update:modelValue', result)
-    } else {
-      emit('update:modelValue', entries.value.map(([, value]) => value))
-    }
-  }, { deep: true })
-}
+const { entries, up, down, add, del } = useEntries()
 
 </script>
 

diff --git a/packages/form/src/extensions/primitive.vue b/packages/form/src/extensions/primitive.vue
diff --git a/packages/form/src/extensions/table.vue b/packages/form/src/extensions/table.vue
@@ -5,7 +5,7 @@
     <template #prefix><slot name="prefix"></slot></template>
     <template #suffix><slot name="suffix"></slot></template>
     <template #control>
-      <el-button type="primary" @click="addEntry" :disabled="disabled">添加项</el-button>
+      <el-button type="primary" @click="add()" :disabled="disabled">添加项</el-button>
     </template>
     <table class="bottom schema-table" v-if="entries.length">
       <tr v-for="([key], index) in entries">
@@ -27,7 +27,7 @@
           ></el-input>
         </td>
         <td class="close">
-          <div class="inner" :class="{ disabled }" @click.stop="deleteEntry(index)">
+          <div class="inner" :class="{ disabled }" @click.stop="del(index)">
             <icon-close></icon-close>
           </div>
         </td>
@@ -38,31 +38,22 @@
 
 <script lang="ts" setup>
 
-import { PropType, ref, watch, WatchStopHandle } from 'vue'
+import { PropType } from 'vue'
 import { IconClose } from '../icons'
-import { getFallback, Schema, useEntries } from '../utils'
+import { Schema, useEntries } from '../utils'
 import SchemaBase from '../base.vue'
 
-const props = defineProps({
+defineProps({
   schema: {} as PropType<Schema>,
   modelValue: {} as PropType<{}>,
   disabled: {} as PropType<boolean>,
   prefix: {} as PropType<string>,
   initial: {} as PropType<{}>,
 })
 
-const emit = defineEmits(['update:modelValue'])
+defineEmits(['update:modelValue'])
 
-const entries = useEntries()
-
-function addEntry() {
-  entries.value.push(['', getFallback(props.schema.inner, true)])
-}
-
-function deleteEntry(index: number) {
-  if (props.disabled) return
-  entries.value.splice(index, 1)
-}
+const { entries, add, del } = useEntries()
 
 </script>
 

diff --git a/packages/form/src/extensions/tuple.vue b/packages/form/src/extensions/tuple.vue
@@ -10,8 +10,7 @@
         :key="index"
         :schema="item"
         :disabled="disabled"
-        :modelValue="modelValue[index]"
-        @update:modelValue="updateValue(index, $event)"
+        v-model="config[index]"
       ></schema-primitive>
     </template>
   </schema-base>
@@ -20,7 +19,7 @@
 <script lang="ts" setup>
 
 import { PropType } from 'vue'
-import { Schema } from '../utils'
+import { Schema, useConfig } from '../utils'
 import SchemaBase from '../base.vue'
 import SchemaPrimitive from '../primitive.vue'
 
@@ -34,10 +33,6 @@ const props = defineProps({
 
 const emit = defineEmits(['update:modelValue'])
 
-function updateValue(index: number, value: any) {
-  const copy = [...props.modelValue]
-  copy[index] = value
-  emit('update:modelValue', copy)
-}
+const config = useConfig()
 
 </script>
diff --git a/packages/form/src/extensions/union.vue b/packages/form/src/extensions/union.vue
@@ -5,6 +5,7 @@
     :initial="initial"
     :disabled="disabled"
     :prefix="prefix"
+    :required="!!schema.meta.required && isNullable(schema.meta.default) && isNullable(modelValue)"
   >
     <template #title><slot name="title"></slot></template>
     <template #desc>
@@ -30,8 +31,8 @@
 
 <script lang="ts" setup>
 
-import { computed, PropType, ref, watch } from 'vue'
-import { check, deepEqual, getChoices, getFallback, Schema } from '../utils'
+import { computed, PropType, ref, watch, WatchStopHandle } from 'vue'
+import { check, deepEqual, getChoices, getFallback, isNullable, Schema } from '../utils'
 
 const props = defineProps({
   schema: {} as PropType<Schema>,
@@ -48,12 +49,15 @@ const config = ref()
 const choices = ref<Schema[]>()
 const cache = ref<any[]>()
 const active = ref<Schema>()
+let stop: WatchStopHandle
+
+const doWatch = () => watch(config, (value) => {
+  const index = choices.value.indexOf(active.value)
+  if (index >= 0) cache.value[index] = value
+  emit('update:modelValue', deepEqual(value, props.schema.meta.default) ? undefined : value)
+}, { deep: true })
 
 watch(() => props.schema, (value) => {
-  if (!value?.list) {
-    choices.value = []
-    return
-  }
   choices.value = getChoices(props.schema)
   cache.value = choices.value.map((item) => {
     if (item.type === 'const') return item.value
@@ -62,28 +66,21 @@ watch(() => props.schema, (value) => {
 }, { immediate: true })
 
 watch(() => [props.modelValue, props.schema] as const, ([value, schema]) => {
-  config.value = value ?? getFallback(schema)
-  active.value = schema
+  stop?.()
+  config.value = value
+  active.value = null
   for (const item of choices.value) {
-    if (!check(item, config.value)) continue
+    if (!check(item, value)) continue
     active.value = item
     break
   }
+  stop = doWatch()
 }, { immediate: true, deep: true })
 
-watch(config, (value) => {
-  if (!props.schema) return
-  if (deepEqual(value, props.schema.meta.default)) {
-    emit('update:modelValue', undefined)
-  } else {
-    emit('update:modelValue', value)
-  }
-}, { deep: true })
-
 const selectModel = computed({
   get() {
     if (active.value === props.schema) return
-    return active.value.meta.description || active.value.value
+    return active.value?.meta.description || active.value?.value
   },
   set(index) {
     if (active.value === choices.value[index]) return