feat: enhance group UX

shigma · May 1, 2023 · 5d0a168 · 5d0a168
1 parent 8426e53
commit 5d0a168
Show file tree

Hide file tree

Showing 14 changed files with 109 additions and 70 deletions.
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -20,6 +20,6 @@
   "author": "Shigma <shigma10826@gmail.com>",
   "license": "MIT",
   "dependencies": {
-    "cosmokit": "^1.4.1"
+    "cosmokit": "^1.4.2"
   }
 }
diff --git a/packages/form/package.json b/packages/form/package.json
@@ -1,7 +1,7 @@
 {
   "name": "schemastery-vue",
   "description": "Type driven schema validator",
-  "version": "3.1.0",
+  "version": "4.0.0-alpha.4",
   "main": "src/index.ts",
   "repository": {
     "type": "git",

diff --git a/packages/form/src/base.vue b/packages/form/src/base.vue
@@ -42,6 +42,7 @@ defineProps({
   disabled: {} as PropType<boolean>,
   prefix: {} as PropType<string>,
   initial: {} as PropType<{}>,
+  foldable: Boolean,
 })
 
 defineEmits(['update:modelValue', 'visible-change'])

diff --git a/packages/form/src/extensions/bitset.vue b/packages/form/src/extensions/bitset.vue
@@ -2,6 +2,7 @@
   <schema-base>
     <template #title><slot name="title"></slot></template>
     <template #desc><slot name="desc"></slot></template>
+    <template #menu><slot name="menu"></slot></template>
     <template #prefix><slot name="prefix"></slot></template>
     <template #suffix><slot name="suffix"></slot></template>
     <ul class="bottom">
@@ -28,6 +29,7 @@ defineProps({
   disabled: {} as PropType<boolean>,
   prefix: {} as PropType<string>,
   initial: {} as PropType<{}>,
+  foldable: Boolean,
 })
 
 defineEmits(['update:modelValue'])

diff --git a/packages/form/src/extensions/group.vue b/packages/form/src/extensions/group.vue
@@ -2,78 +2,52 @@
   <schema-base v-bind="$attrs">
     <template #title><slot name="title"></slot></template>
     <template #desc><slot name="desc"></slot></template>
+    <template #menu><slot name="menu"></slot></template>
     <template #prefix><slot name="prefix"></slot></template>
     <template #suffix><slot name="suffix"></slot></template>
     <template #control>
       <el-button type="primary" @click="add()" :disabled="disabled">添加项</el-button>
     </template>
   </schema-base>
+
   <div class="k-schema-group">
-    <template v-for="([key, _], index) in entries" :key="index">
-      <template v-if="isObjectSchema(schema.inner)">
-        <schema-base
-          :class="{ invalid: entries.filter(e => e[0] === key).length > 1 }">
-          <template #title v-if="schema.type === 'array'">
-            <span class="prefix">{{ prefix.slice(0, -1) }}</span>
-            <span>[{{ key }}]</span>
-          </template>
-          <template #title v-else>
-            <span class="prefix">{{ prefix }}</span>
-            <el-input v-model="entries[index][0]"></el-input>
-          </template>
-          <template #desc>
-            <k-markdown :source="schema.inner.meta.description"></k-markdown>
-          </template>
-          <template #menu>
-            <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>
-
-        <div class="k-schema-group">
-          <k-schema
-            v-model="entries[index][1]"
-            :initial="initial?.[key]"
-            :schema="{ ...schema.inner, meta: { ...schema.inner.meta, description: '' } }"
-            :disabled="disabled"
-            :prefix="schema.type === 'array' ? `${prefix.slice(0, -1)}[${key}].` : prefix + key + '.'"
-            #title>
-            <span class="prefix">{{ prefix }}</span>
-            <span>{{ key }}</span>
-          </k-schema>
-        </div>
+    <k-schema
+      v-for="([key, _], index) in entries"
+      :key="index"
+      v-model="entries[index][1]"
+      :invalid="entries.filter(e => e[0] === key).length > 1"
+      :initial="(initial ?? schema.meta.default)[key]"
+      :schema="schema.inner"
+      :disabled="disabled"
+      :prefix="schema.type === 'array' ? `${prefix.slice(0, -1)}[${key}].` : prefix + key + '.'"
+      foldable
+    >
+      <template #menu>
+        <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>
-
-      <k-schema v-else
-        v-model="entries[index][1]"
-        :invalid="entries.filter(e => e[0] === key).length > 1"
-        :initial="initial?.[key]"
-        :schema="schema.inner"
-        :disabled="disabled"
-        :prefix="schema.type === 'array' ? `${prefix.slice(0, -1)}[${key}].` : prefix + key + '.'">
-        <template #menu>
-          <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>
-          <span>[{{ key }}]</span>
-        </template>
-        <template #title v-else>
-          <span class="prefix">{{ prefix }}</span>
-          <el-input v-model="entries[index][0]"></el-input>
+      <template #title>
+        <span class="prefix">{{ prefix.slice(0, -1) }}</span>
+        <template v-if="schema.type === 'array'">[{{ key }}]</template>
+        <template v-else>
+          ['
+          <span class="entry-input">
+            <span class="shadow" v-if="entries[index][0]">{{ entries[index][0] }}</span>
+            <span class="placeholder" v-else>&nbsp;</span>
+            <input v-model="entries[index][0]"/>
+          </span>
+          ']
         </template>
-      </k-schema>
-    </template>
+      </template>
+    </k-schema>
   </div>
 </template>
 
 <script lang="ts" setup>
 
 import { PropType } from 'vue'
-import { isObjectSchema, Schema, useEntries } from '../utils'
+import { Schema, useEntries } from '../utils'
 import SchemaBase from '../base.vue'
 
 defineProps({
@@ -82,6 +56,7 @@ defineProps({
   disabled: {} as PropType<boolean>,
   prefix: {} as PropType<string>,
   initial: {} as PropType<any>,
+  foldable: Boolean,
 })
 
 defineEmits(['update:modelValue'])
@@ -111,4 +86,32 @@ const { entries, up, down, add, del } = useEntries()
   margin-top: 2rem;
 }
 
+.entry-input {
+  position: relative;
+
+  .shadow {
+    visibility: hidden;
+    white-space: pre;
+  }
+
+  .placeholder {
+    min-width: 2rem;
+    display: inline-block;
+  }
+
+  input {
+    position: absolute;
+    left: -.5em;
+    right: -.5em;
+    border: none;
+    padding: 0 .5em;
+    margin: 0;
+    font-size: 1em;
+    font-weight: inherit;
+    font-family: inherit;
+    border-radius: 0;
+    outline: none;
+  }
+}
+
 </style>
diff --git a/packages/form/src/extensions/intersect.vue b/packages/form/src/extensions/intersect.vue
@@ -27,6 +27,7 @@ defineProps({
   prefix: {} as PropType<string>,
   initial: {} as PropType<any>,
   class: {} as PropType<any>,
+  foldable: Boolean,
 })
 
 defineEmits(['update:modelValue'])

diff --git a/packages/form/src/extensions/object.vue b/packages/form/src/extensions/object.vue
@@ -1,7 +1,15 @@
 <template>
-  <h2 class="k-schema-header" v-if="schema.meta.description">
+  <schema-base v-if="foldable">
+    <template #title><slot name="title"></slot></template>
+    <template #desc>
+      <k-markdown :source="schema.meta.description"></k-markdown>
+    </template>
+    <template #menu><slot name="menu"></slot></template>
+  </schema-base>
+  <h2 class="k-schema-header" v-else-if="schema.meta.description">
     {{ schema.meta.description }}
   </h2>
+
   <k-schema
     v-for="(item, key) in schema.dict"
     :key="key"
@@ -21,13 +29,15 @@
 
 import { PropType } from 'vue'
 import { Schema, useConfig } from '../utils'
+import SchemaBase from '../base.vue'
 
 defineProps({
   schema: {} as PropType<Schema>,
   modelValue: {} as PropType<any>,
   disabled: {} as PropType<boolean>,
   prefix: {} as PropType<string>,
   initial: {} as PropType<any>,
+  foldable: Boolean,
   class: {} as PropType<any>,
 })
 

diff --git a/packages/form/src/extensions/radio.vue b/packages/form/src/extensions/radio.vue
@@ -2,6 +2,7 @@
   <schema-base>
     <template #title><slot name="title"></slot></template>
     <template #desc><slot name="desc"></slot></template>
+    <template #menu><slot name="menu"></slot></template>
     <template #prefix><slot name="prefix"></slot></template>
     <template #suffix><slot name="suffix"></slot></template>
     <ul class="bottom">
@@ -28,6 +29,7 @@ defineProps({
   disabled: {} as PropType<boolean>,
   prefix: {} as PropType<string>,
   initial: {} as PropType<{}>,
+  foldable: Boolean,
 })
 
 defineEmits(['update:modelValue'])

diff --git a/packages/form/src/extensions/table.vue b/packages/form/src/extensions/table.vue
@@ -2,6 +2,7 @@
   <schema-base>
     <template #title><slot name="title"></slot></template>
     <template #desc><slot name="desc"></slot></template>
+    <template #menu><slot name="menu"></slot></template>
     <template #prefix><slot name="prefix"></slot></template>
     <template #suffix><slot name="suffix"></slot></template>
     <template #control>
@@ -49,6 +50,7 @@ defineProps({
   disabled: {} as PropType<boolean>,
   prefix: {} as PropType<string>,
   initial: {} as PropType<{}>,
+  foldable: Boolean,
 })
 
 defineEmits(['update:modelValue'])

diff --git a/packages/form/src/extensions/textarea.vue b/packages/form/src/extensions/textarea.vue
@@ -2,6 +2,7 @@
   <schema-base>
     <template #title><slot name="title"></slot></template>
     <template #desc><slot name="desc"></slot></template>
+    <template #menu><slot name="menu"></slot></template>
     <template #prefix><slot name="prefix"></slot></template>
     <template #suffix><slot name="suffix"></slot></template>
     <div class="bottom">
@@ -26,6 +27,9 @@ const props = defineProps({
   schema: {} as PropType<Schema>,
   modelValue: {} as PropType<string>,
   disabled: {} as PropType<boolean>,
+  prefix: {} as PropType<string>,
+  initial: {} as PropType<{}>,
+  foldable: Boolean,
 })
 
 defineEmits(['update:modelValue'])

diff --git a/packages/form/src/extensions/tuple.vue b/packages/form/src/extensions/tuple.vue
@@ -2,6 +2,7 @@
   <schema-base>
     <template #title><slot name="title"></slot></template>
     <template #desc><slot name="desc"></slot></template>
+    <template #menu><slot name="menu"></slot></template>
     <template #prefix><slot name="prefix"></slot></template>
     <template #suffix><slot name="suffix"></slot></template>
     <template #control>
@@ -29,6 +30,7 @@ const props = defineProps({
   disabled: {} as PropType<boolean>,
   prefix: {} as PropType<string>,
   initial: {} as PropType<{}>,
+  foldable: Boolean,
 })
 
 const emit = defineEmits(['update:modelValue'])

diff --git a/packages/form/src/extensions/union.vue b/packages/form/src/extensions/union.vue
@@ -5,7 +5,9 @@
     :initial="initial"
     :disabled="disabled"
     :prefix="prefix"
-    :required="!!schema.meta.required && isNullable(schema.meta.default) && isNullable(modelValue)"
+    :extra="{
+      required: !!schema.meta.required && isNullable(schema.meta.default) && isNullable(modelValue),
+    }"
   >
     <template #title><slot name="title"></slot></template>
     <template #desc>
@@ -41,6 +43,7 @@ const props = defineProps({
   prefix: {} as PropType<string>,
   initial: {} as PropType<any>,
   class: {} as PropType<any>,
+  foldable: Boolean,
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -68,6 +71,7 @@ watch(() => props.schema, (value) => {
 watch(() => [props.modelValue, props.schema] as const, ([value, schema]) => {
   stop?.()
   config.value = value
+  value ??= schema.meta.default
   active.value = null
   for (const item of choices.value) {
     if (!check(item, value)) continue

diff --git a/packages/form/src/schema.vue b/packages/form/src/schema.vue
@@ -5,18 +5,19 @@
     :prefix="prefix"
     :initial="initial"
     :disabled="disabled"
+    :foldable="foldable"
     :modelValue="modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     :class="{
       changed: !deepEqual(initial, modelValue),
-      required: required ?? (schema?.meta.required && isNullable(schema?.meta.default) && isNullable(modelValue)),
+      required: extra?.required ?? (schema?.meta.required && isNullable(schema?.meta.default) && isNullable(modelValue)),
       invalid,
     }"
   >
     <template #title><slot name="title"></slot></template>
     <template #menu>
       <el-dropdown-item @click="$emit('update:modelValue', clone(initial))">撤销更改</el-dropdown-item>
-      <el-dropdown-item @click="$emit('update:modelValue')">恢复默认值</el-dropdown-item>
+      <el-dropdown-item @click="$emit('update:modelValue', null)">恢复默认值</el-dropdown-item>
       <slot name="menu"></slot>
     </template>
     <template #desc>
@@ -50,8 +51,9 @@ const props = defineProps({
   initial: {} as PropType<any>,
   modelValue: {},
   invalid: Boolean,
-  required: Boolean,
+  extra: {} as PropType<any>,
   disabled: Boolean,
+  foldable: Boolean,
   branch: Boolean,
   prefix: { type: String, default: '' },
 })