feat: enhance styles

shigma · Apr 28, 2023 · a9064e5 · a9064e5
1 parent fec6f6a
commit a9064e5
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 6 deletions.
diff --git a/packages/form/src/base.vue b/packages/form/src/base.vue
@@ -55,11 +55,11 @@ export default {
 .schema-item {
   position: relative;
   padding: 0.5rem 1rem;
-  border-bottom: 1px solid var(--el-border-color);
+  border-bottom: 1px solid var(--el-border-color-light);
   transition: var(--color-transition);
 
   &:first-child, :not(.schema-item):not(.k-schema-group) + & {
-    border-top: 1px solid var(--el-border-color);
+    border-top: 1px solid var(--el-border-color-light);
   }
 
   & + h2 {

diff --git a/packages/form/src/extensions/group.vue b/packages/form/src/extensions/group.vue
@@ -76,7 +76,7 @@
 <script lang="ts" setup>
 
 import { PropType, ref, watch, WatchStopHandle } from 'vue'
-import { getFallback, isObjectSchema, Schema } from './utils'
+import { getFallback, isObjectSchema, Schema } from '../utils'
 import SchemaBase from '../base.vue'
 import SchemaHeader from '../header.vue'
 

diff --git a/packages/form/src/primitive.vue b/packages/form/src/primitive.vue
@@ -11,8 +11,7 @@
   </template>
 
   <template v-else>
-    <k-file-picker v-if="schema.meta.role === 'path'" v-model="value"></k-file-picker>
-    <el-color-picker v-else-if="schema.meta.role === 'color'" v-model="value" show-alpha></el-color-picker>
+    <el-color-picker v-if="schema.meta.role === 'color'" v-model="value" show-alpha></el-color-picker>
     <el-time-picker v-else-if="schema.meta.role === 'time'" v-model="date"></el-time-picker>
     <el-date-picker v-else-if="['date', 'datetime'].includes(schema.meta.role)" :type="schema.meta.role" v-model="date"></el-date-picker>
     <el-input v-else v-model="value" :disabled="disabled" :class="{ nullable }"
@@ -112,8 +111,23 @@ function onClickExternal(value: string) {
   }
 
   .el-switch.nullable {
+    .el-switch__core {
+      background-color: transparent;
+      border: 1px solid var(--el-border-color);
+    }
+
     .el-switch__action {
       left: 11px;
+      width: 16px;
+      border-radius: 0;
+      height: 1px;
+      background-color: var(--el-border-color);
+    }
+
+    &:hover {
+      .el-switch__core {
+        border-color: var(--el-color-primary);
+      }
     }
   }
 }

diff --git a/packages/form/src/schema.vue b/packages/form/src/schema.vue
@@ -293,7 +293,7 @@ export default defineComponent({
 .k-schema-group {
   position: relative;
   padding-left: 1rem;
-  border-bottom: 1px solid var(--el-border-color);
+  border-bottom: 1px solid var(--el-border-color-light);
 
   &:empty {
     border-bottom: none;