feat: support collapse for array / dict

shigma · May 5, 2023 · f578f1e · f578f1e
1 parent bc59c70
commit f578f1e
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 99 deletions.
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": "4.0.1",
+  "version": "4.0.2",
   "main": "src/index.ts",
   "repository": {
     "type": "git",

diff --git a/packages/form/src/base.vue b/packages/form/src/base.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="schema-item">
+  <div class="k-schema-item" v-bind="$attrs">
     <div class="actions"></div>
     <div class="header">
       <div class="left">
@@ -22,18 +22,29 @@
         <slot name="desc"></slot>
       </div>
       <div class="right">
-        <slot name="prefix"></slot>
-        <slot name="control"></slot>
-        <slot name="suffix"></slot>
+        <template v-if="!collapsed">
+          <slot name="prefix"></slot>
+          <slot name="control"></slot>
+          <slot name="suffix"></slot>
+        </template>
+        <template v-if="$slots.collapse">
+          <el-button v-if="!collapsed" @click="collapsed = true" :disabled="disabled">折叠</el-button>
+          <el-button v-else @click="collapsed = false" :disabled="disabled">展开以编辑</el-button>
+        </template>
       </div>
     </div>
     <slot></slot>
   </div>
+  <el-collapse-transition v-if="$slots.collapse">
+    <div class="k-schema-group" v-show="!collapsed">
+      <slot name="collapse"></slot>
+    </div>
+  </el-collapse-transition>
 </template>
 
 <script lang="ts" setup>
 
-import { PropType } from 'vue'
+import { PropType, ref } from 'vue'
 import { Schema } from './utils'
 
 defineProps({
@@ -47,11 +58,13 @@ defineProps({
 
 defineEmits(['update:modelValue', 'visible-change'])
 
+const collapsed = ref(false)
+
 </script>
 
 <style lang="scss">
 
-.schema-item {
+.k-schema-item {
   p {
     margin: 0;
     line-height: 1.7;
@@ -74,13 +87,13 @@ defineEmits(['update:modelValue', 'visible-change'])
   }
 }
 
-.schema-item {
+.k-schema-item {
   position: relative;
   padding: 0.5rem 1rem;
   border-bottom: 1px solid var(--el-border-color-light);
   transition: var(--color-transition);
 
-  &:first-child, :not(.schema-item):not(.k-schema-group) + & {
+  &:first-child, :not(.k-schema-item):not(.k-schema-group) + & {
     border-top: 1px solid var(--el-border-color-light);
   }
 
@@ -180,4 +193,30 @@ defineEmits(['update:modelValue', 'visible-change'])
   }
 }
 
+.k-schema-header {
+  font-size: 1.25rem;
+  margin: 1rem 0;
+
+  &:not(:first-child) {
+    margin-top: 2rem;
+  }
+}
+
+.k-schema-group {
+  position: relative;
+  border-bottom: 1px solid var(--el-border-color-light);
+
+  &:empty {
+    border-bottom: none;
+  }
+
+  > :first-child {
+    border-top: none;
+  }
+
+  > :last-child {
+    border-bottom: none;
+  }
+}
+
 </style>
diff --git a/packages/form/src/extensions/group.vue b/packages/form/src/extensions/group.vue
@@ -6,45 +6,44 @@
     <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>
+      <el-button @click="add()" :disabled="disabled">添加项目</el-button>
     </template>
-  </schema-base>
-
-  <div class="k-schema-group">
-    <k-schema
-      v-for="([key, _], index) in entries"
-      :key="index"
-      v-model="entries[index][1]"
-      :initial="(initial ?? schema.meta.default)[key]"
-      :schema="schema.inner"
-      :disabled="disabled"
-      :prefix="schema.type === 'array' ? `${prefix.slice(0, -1)}[${key}].` : prefix + key + '.'"
-      :extra="{
-        foldable: true,
-        changed: key in (initial ?? schema.meta.default) ? undefined : true,
-        invalid: entries.filter(e => e[0] === key).length > 1,
-      }"
-    >
-      <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>
-        <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 #collapse>
+      <k-schema
+        v-for="([key, _], index) in entries"
+        :key="index"
+        v-model="entries[index][1]"
+        :initial="(initial ?? schema.meta.default)[key]"
+        :schema="schema.inner"
+        :disabled="disabled"
+        :prefix="schema.type === 'array' ? `${prefix.slice(0, -1)}[${key}].` : prefix + key + '.'"
+        :extra="{
+          foldable: true,
+          changed: key in (initial ?? schema.meta.default) ? undefined : true,
+          invalid: entries.filter(e => e[0] === key).length > 1,
+        }"
+      >
+        <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>
+          <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>
         </template>
-      </template>
-    </k-schema>
-  </div>
+      </k-schema>
+    </template>
+  </schema-base>
 </template>
 
 <script lang="ts" setup>
@@ -68,26 +67,7 @@ const { entries, up, down, add, del } = useEntries()
 
 </script>
 
-<style lang="scss">
-
-.schema-item h3 {
-  > .el-input {
-    max-width: 12rem;
-
-    input {
-      border: none;
-      padding: 0;
-      font-size: 1rem;
-      font-weight: inherit;
-      font-family: inherit;
-      border-radius: 0;
-    }
-  }
-}
-
-.k-schema-group + h2 {
-  margin-top: 2rem;
-}
+<style lang="scss" scoped>
 
 .entry-input {
   position: relative;

diff --git a/packages/form/src/extensions/table.vue b/packages/form/src/extensions/table.vue
@@ -6,7 +6,7 @@
     <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>
+      <el-button @click="add()" :disabled="disabled">添加项目</el-button>
     </template>
     <table class="bottom schema-table" v-if="entries.length">
       <tr v-for="([key], index) in entries">

diff --git a/packages/form/src/primitive.vue b/packages/form/src/primitive.vue
@@ -85,7 +85,7 @@ function onClickExternal(value: string) {
 
 <style lang="scss">
 
-.schema-item {
+.k-schema-item {
   .el-input {
     .k-icon {
       color: var(--fg3);

diff --git a/packages/form/src/schema.vue b/packages/form/src/schema.vue
@@ -78,34 +78,3 @@ const SchemaComponent = computed(() => {
 })
 
 </script>
-
-<style lang="scss">
-
-.k-schema-header {
-  font-size: 1.25rem;
-
-  .el-button {
-    float: right;
-    transform: translateY(-2px);
-  }
-}
-
-.k-schema-group {
-  position: relative;
-  padding-left: 1rem;
-  border-bottom: 1px solid var(--el-border-color-light);
-
-  &:empty {
-    border-bottom: none;
-  }
-
-  > :first-child {
-    border-top: none;
-  }
-
-  > :last-child {
-    border-bottom: none;
-  }
-}
-
-</style>