<template>
  <div class="block">
    <h1>概述</h1>
    <p>显示文件列表，并支持删除其中的某个文件或者清空文件</p>
  </div>
  
  <div class="block">
    <h1>代码示例</h1>
    <RunCase label="基本用法" file="./file-list/Basic.vue">
      <template #component>
        <Basic />
      </template>
      <template #description>
        <p>显示基本的文件列表</p>
      </template>
    </RunCase>

    <RunCase label="分组显示" file="./file-list/Group.vue">
      <template #component>
        <Group />
      </template>
      <template #description>
        <p>如果传入的fileList有group字段，将会自动按group分组显示</p>
      </template>
    </RunCase>
  </div>

  <div class="block">
    <h1>API</h1>
    <h2>props</h2>
    <PropsTable type="file-list"/>
    <h2>events</h2>
    <EventsTable type="file-list"/>
  </div>
  
</template>

<script setup>
import Basic from '../components/file-list/Basic.vue'
import Group from '../components/file-list/Group.vue';

</script>