调整文档,模态框添加屏蔽头部配置

docs/src/routes/components/carousel.svelte

@@ -1,9 +1,22 @@
+<script context="module">
+  export async function preload() {
+    const res = await this.fetch(`components/carousel.json`);
+    const jsdoc = await res.json();
+
+    return {
+      jsdoc
+    };
+  }
+</script>
 <script>
     import {
         Carousel
     } from 'svelma-pro'
     import DocHeader from '../../components/DocHeader.svelte'
     import Example from '../../components/Example.svelte'
+    import JSDoc from '../../components/JSDoc.svelte'
+
+    export let jsdoc
 
     let options = [
         'http://dev.smartmapx.com/assets/source-img/banner/banner.jpg',
@@ -38,4 +51,6 @@
     <div slot="preview" class="preview">
         <Carousel options={options} />
     </div>
-</Example>
+</Example>
+
+<JSDoc {jsdoc}></JSDoc>

docs/src/routes/components/jsdocs.json

@@ -72,6 +72,89 @@
       "values": "<code>Any animation that ships with Svelte</code>"
     }
   ],
+  "Carousel":[
+    {
+      "description": "图片列表(url路径数组)",
+      "type": [
+        "Array"
+      ],
+      "defaultvalue": [],
+      "name": "options",
+      "values": ""
+    },
+    {
+      "description": "底部指示器",
+      "type": [
+        "Boolean"
+      ],
+      "defaultvalue": true,
+      "name": "pagination",
+      "values": ""
+    },
+    {
+      "description": "左右导航按钮",
+      "type": [
+        "Boolean"
+      ],
+      "defaultvalue": true,
+      "name": "navigation",
+      "values": ""
+    },
+    {
+      "description": "自动播放",
+      "type": [
+        "Boolean"
+      ],
+      "defaultvalue": false,
+      "name": "autoplay",
+      "values": ""
+    },
+    {
+      "description": "自动播放时长",
+      "type": [
+        "Number"
+      ],
+      "defaultvalue": 3000,
+      "name": "delay",
+      "values": ""
+    },
+    {
+      "description": "方向",
+      "type": [
+        "String"
+      ],
+      "defaultvalue": "horizontal",
+      "name": "direction",
+      "values": "horizontal,vertical"
+    },
+    {
+      "description": "循环",
+      "type": [
+        "Boolean"
+      ],
+      "defaultvalue": true,
+      "name": "loop",
+      "values": ""
+    },
+    {
+      "description": "滑动禁止自动播放",
+      "type": [
+        "Boolean"
+      ],
+      "defaultvalue": true,
+      "name": "disableOnInteraction",
+      "values": ""
+    },
+    {
+      "description": "切换特效",
+      "type": [
+        "String"
+      ],
+      "defaultvalue": "slide",
+      "name": "effect",
+      "values": "slide,fade,cube,coverflow,flip"
+    }
+  ],
   "Datepicker": [
     {
       "description": "当前日期",
@@ -1048,6 +1131,14 @@
       "defaultvalue": "true",
       "name": "backdropClose",
       "values": ""
+    },{
+      "description": "是否显示头部",
+      "type": [
+        "Boolean"
+      ],
+      "defaultvalue": "true",
+      "name": "showHeader",
+      "values": ""
     },
     {
       "isEvent": true,

src/components/Modal/Modal.svelte

@@ -10,6 +10,7 @@
   export let animProps = { start: 1.2 }
   export let size = ''
   export let showClose = true //显示左上角关闭按钮
+  export let showHeader = true //是否显示头
   export let backdrop = true // 遮罩
   export let backdropClose = true // 点击遮罩是否关闭
   export const subComponent = null
@@ -53,6 +54,11 @@
     padding: 10px 20px;
     text-align: center;
   }
+  .delete {
+    position: absolute;
+    top: 20px;
+    right: 10px;
+  }
 </style>
 
 <svelte:window on:keydown={keydown} />
@@ -67,12 +73,18 @@
         }} />
     {/if}
     <div class="modal-card" transition:_animation|local={animProps} style="width: {width};height: {height}">
-      <header class="modal-card-head">
+      {#if showHeader}
-        <p class="modal-card-title">{title}</p>
+        <header class="modal-card-head">
-        {#if showClose}
+          <p class="modal-card-title">{title}</p>
+        </header>
+      {/if}
+      {#if showClose}
+        {#if showHeader}
           <button class="delete" aria-label="close" on:click={close} />
+        {:else}
+          <button class="delete" aria-label="close" on:click={close} style="top: 2px;right: 2px;" />
         {/if}
-      </header>
+      {/if}
       <section class="modal-card-body">
         <slot />
       </section>