Improvement - VueUiDashboard - Add 'top' and 'bottom' slots

Author: graphieros

README.md

@@ -496,7 +496,7 @@ From the dataset you pass into the props, this component will produce the most a
 | `VueUiAccordion`  | ❌                        | `VueUiAccordionConfig`  | ❌                                               | `#arrow`, `#title`, `#content`                          |
 | `VueUiAnnotator`  | `VueUiAnnotatorDataset`   | `VueUiAnnotatorConfig`  | `@toggleOpenState`, `@saveAnnotations`           | ❌                                                      |
 | `VueUiCursor`     | ❌                        | `VueUiCursorConfig`     | ❌                                               | ❌                                                      |
-| `VueUiDashboard`  | `VueUiDashboardElement[]` | `VueUiDashboardConfig`  | `@change`                                        | `#content`                                              |
+| `VueUiDashboard`  | `VueUiDashboardElement[]` | `VueUiDashboardConfig`  | `@change`                                        | `#content`, `#top`, `#bottom`                           |
 | `VueUiDigits`     | `number`                  | `VueUiDigitsConfig`     | ❌                                               | ❌                                                      |
 | `VueUiKpi`        | `number`                  | `VueUiKpiConfig`        | ❌                                               | `#title`, `#value`, `#comment-before`, `#comment-after` |
 | `VueUiMiniLoader` | ❌                        | `VueUiMiniLoaderConfig` | ❌                                               | ❌                                                      |

documentation/installation.md

@@ -214,7 +214,7 @@ From the dataset you pass into the props, this component will produce the most a
 | `VueUiAccordion`  | ❌                        | `VueUiAccordionConfig`  | ❌                                               | `#arrow`, `#title`, `#content`                          |
 | `VueUiAnnotator`  | `VueUiAnnotatorDataset`   | `VueUiAnnotatorConfig`  | `@toggleOpenState`, `@saveAnnotations`           | ❌                                                      |
 | `VueUiCursor`     | ❌                        | `VueUiCursorConfig`     | ❌                                               | ❌                                                      |
-| `VueUiDashboard`  | `VueUiDashboardElement[]` | `VueUiDashboardConfig`  | `@change`                                        | `#content`                                              |
+| `VueUiDashboard`  | `VueUiDashboardElement[]` | `VueUiDashboardConfig`  | `@change`                                        | `#content`, `#top`, `#bottom`                           |
 | `VueUiDigits`     | `number`                  | `VueUiDigitsConfig`     | ❌                                               | ❌                                                      |
 | `VueUiKpi`        | `number`                  | `VueUiKpiConfig`        | ❌                                               | `#title`, `#value`, `#comment-before`, `#comment-after` |
 | `VueUiMiniLoader` | ❌                        | `VueUiMiniLoaderConfig` | ❌                                               | ❌                                                      |

package.json

@@ -110,4 +110,4 @@
     "vitest": "^3.1.1",
     "vue": "^3.5.14"
   }
-}
+}

src/TestingArena.vue

@@ -5507,8 +5507,15 @@ function testGetData() {
             @change="testchange"
             :config="dashboardConfig"
           >
+            <template #top="{ item }">
+              TOP CONTENT
+            </template>
+            <template #bottom="{ item }">
+              BOTTOM CONTENT
+            </template>
             <template v-slot:content="{ item }">
               <div style="padding: 12px">
+                LOREM IPSUM
                 <component :is="item.component" v-bind="item.props"></component>
               </div>
             </template>

src/components/vue-ui-dashboard.vue

@@ -444,6 +444,8 @@ defineExpose({
                             @touchend="onTouchEnd"
                         ></div>
                     </template>
+
+                    <slot name="top" :item="item" :index="index"/>
 
                     <component
                         :is="item.resolvedComponent"
@@ -453,6 +455,8 @@ defineExpose({
                     <template v-else>
                         <slot name="content" :item="item" :index="index" :left="item.left" :top="item.top" :height="item.height" :width="item.width"></slot>
                     </template>
+
+                    <slot name="bottom" :item="item" :index="index"/>
                 </div>
             </div>
         </div>