fix(Collapse)

Signed-off-by: Tenny <tenny.shu@foxmail.com>

Author: Tenny

docs/components/collapse.md

@@ -168,12 +168,12 @@
 
 ### 项间距
 
-通过设置 `item-space` 设置项间距
+通过设置 `gap` 设置项间距
 
 <ClientOnly>
   <CodePreview>
   <textarea lang="vue-html">
-  <nt-collapse arrow-placement="right" header-justify="space-between" background item-space="10px">
+  <nt-collapse arrow-placement="right" header-justify="space-between" background gap="10px">
     <nt-collapse-item title="红灯" name="1" >
       <div>红灯 - 停</div>
     </nt-collapse-item>
@@ -195,7 +195,7 @@
 <ClientOnly>
   <CodePreview>
   <textarea lang="vue-html">
-  <nt-collapse arrow-placement="right" header-justify="space-between" background border-radius="5px">
+  <nt-collapse arrow-placement="right" header-justify="space-between" background border-radius="5px" gap="10px">
     <nt-collapse-item title="红灯" name="1" >
       <div>红灯 - 停</div>
     </nt-collapse-item>
@@ -220,7 +220,7 @@
 | `arrow-placement`        | 箭头位置                           | `left` \| `right`               | `left`       |
 | `header-justify`         | 面板头部, 水平对齐方式             | `flex-start` \| `space-between` | `flex-start` |
 | `background`             | 是否带有背景和边框                 | `boolean`                       | `false`      |
-| `item-space`             | 面板之间的间隔                     | `string`                        | -            |
+| `gap`                    | 面板之间的间隔                     | `string`                        | -            |
 | `default-expanded-names` | 默认展开的面板                     | `(string \| number)[]`          | -            |
 | `border-radius`          | 边框圆角                           | `string`                        | -            |
 

src/components/collapse/Collapse.vue

@@ -3,93 +3,95 @@
     class="nt-collapse"
     :class="{
       'nt-collapse--background': props.background,
-      'nt-collapse--space': props.itemSpace != null
+      'nt-collapse--space': props.gap != null,
     }"
     :style="styles"
   >
     <slot></slot>
   </div>
 </template>
 <script setup lang="ts">
-import { computed, provide, ref, watch } from 'vue'
-import { collapseContext } from './constant'
+import { computed, provide, ref, watch } from 'vue';
+import { collapseContext } from './constant';
 
 const props = withDefaults(
   defineProps<{
     /** 是否手风琴模式 */
-    accordion?: boolean
+    accordion?: boolean;
     /** 箭头位置 */
-    arrowPlacement?: 'left' | 'right'
+    arrowPlacement?: 'left' | 'right';
     /** 面板头部, 水平对齐方式 */
-    headerJustify?: 'space-between' | 'flex-start'
+    headerJustify?: 'space-between' | 'flex-start';
     /** 是否带有边框和背景 */
-    background?: boolean
+    background?: boolean;
     /** 面板之间的间隔 */
-    itemSpace?: string
+    gap?: string;
     /** 默认展开的面板 */
-    defaultExpandedNames?: (string | number)[]
+    defaultExpandedNames?: (string | number)[];
     /** 边框圆角 */
-    borderRadius?: string
-    modelValue?: (string | number)[]
+    borderRadius?: string;
+    modelValue?: (string | number)[];
   }>(),
   {
     accordion: false,
     arrowPlacement: 'left',
     headerJustify: undefined,
     background: false,
-    itemSpace: undefined,
+    gap: undefined,
     defaultExpandedNames: () => [],
-    modelValue: () => []
-  }
-)
+    modelValue: () => [],
+  },
+);
 
-const emits = defineEmits(['change'])
+const emits = defineEmits(['change', 'update:modelValue']);
 
 /** 当前展开的面板 */
 
-const values = defineModel<(string | number)[]>({ default: [] })
-const actives = ref<(string | number)[]>(values.value)
+const actives = ref<(string | number)[]>(props.modelValue);
 
 const styles = computed(() => {
-  const styleRes: { [index: string]: string } = {}
-  if (props.itemSpace != null) {
-    styleRes['--nt-collapse-item-space'] = props.itemSpace
+  const styleRes: { [index: string]: string } = {};
+  if (props.gap != null) {
+    styleRes['--nt-collapse-gap'] = props.gap;
   }
   if (props.borderRadius != null) {
-    styleRes['--nt-collapse-border-radius'] = props.borderRadius
+    styleRes['--nt-collapse-border-radius'] = props.borderRadius;
   }
-  return styleRes
-})
+  return styleRes;
+});
 
 /**
  * 更新活动面板
  * @param name 面板名称
  */
 function updateActive(name: string | number) {
-  const index = actives.value.indexOf(name)
+  const index = actives.value.indexOf(name);
   if (index === -1) {
     if (props.accordion) {
-      actives.value = [name]
+      actives.value = [name];
     } else {
-      actives.value.push(name)
+      actives.value.push(name);
     }
   } else {
-    actives.value.splice(index, 1)
+    actives.value.splice(index, 1);
   }
-  values.value = actives.value
-  emits('change', actives.value)
+  emits('update:modelValue', actives.value);
+  emits('change', actives.value);
 }
 
-watch(values, (v) => {
-  if (v != null) {
-    actives.value = v
-  }
-})
+watch(
+  () => props.modelValue,
+  (v) => {
+    if (v != null) {
+      actives.value = v;
+    }
+  },
+);
 
 provide(collapseContext, {
   arrowPlacement: props.arrowPlacement,
   headerJustify: props.headerJustify,
   actives,
-  toggle: updateActive
-})
+  toggle: updateActive,
+});
 </script>

style/collapse/index.css

@@ -3,18 +3,20 @@
   --nt-collapse-border-color: #dedede;
   /* 圆角 */
   --nt-collapse-border-radius: 0px;
+  --nt-collapse-gap: 0px;
+  display: grid;
+  gap: var(--nt-collapse-gap, 0px);
+  grid-template-columns: 1fr;
 }
 
 .nt-collapse-item {
   border-bottom: 1px solid var(--nt-collapse-border-color);
   color: #333;
   font-size: 14px;
-  margin-top: var(--nt-collapse-item-space, 0px);
 }
 .nt-collapse-item:first-child {
   border-top-left-radius: var(--nt-collapse-border-radius, 0px);
   border-top-right-radius: var(--nt-collapse-border-radius, 0px);
-  margin-top: 0;
 }
 .nt-collapse-item:last-child {
   border-bottom-left-radius: var(--nt-collapse-border-radius, 0px);