Add an example panel component

Author: skirtles-code

src/template/base/examples/packages/@projectName@/src/components/MyPanel.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import MyPanelSection from './MyPanelSection.vue'
+
+defineProps<{
+  title?: string
+  footer?: string
+}>()
+</script>
+
+<template>
+  <div class="panel">
+    <slot name="header">
+      <MyPanelSection v-if="title" class="panel-header">{{ title }}</MyPanelSection>
+    </slot>
+    <slot name="body">
+      <MyPanelSection class="panel-body">
+        <slot />
+      </MyPanelSection>
+    </slot>
+    <slot name="footer">
+      <MyPanelSection v-if="footer" class="panel-footer">{{ footer }}</MyPanelSection>
+    </slot>
+  </div>
+</template>
+
+<style scoped>
+.panel {
+  border: 1px solid #34495e;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  overflow: hidden;
+}
+
+.panel > * + * {
+  border-top: 1px solid #34495e;
+}
+
+.panel-header, .panel-footer {
+  background: #34495e;
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
+  color: #fff;
+  letter-spacing: 0.5px;
+  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
+}
+
+.panel-section:first-child {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.panel-section:last-child {
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+.panel-body {
+  flex: auto;
+  overflow: auto;
+}
+</style>

src/template/base/examples/packages/@projectName@/src/components/MyPanelSection.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div class="panel-section">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.panel-section {
+  padding: 10px;
+}
+</style>

src/template/base/examples/packages/@projectName@/src/index.ts

@@ -1 +1,3 @@
 export { default as Example } from './components/Example.vue'
+export { default as MyPanel } from './components/MyPanel.vue'
+export { default as MyPanelSection } from './components/MyPanelSection.vue'

src/template/playground/examples/packages/playground/src/App.vue

@@ -1,7 +1,28 @@
 <script setup lang="ts">
-import { Example as ExampleComponent } from '@scopedPackageName@'
+import { Example as ExampleComponent, MyPanel } from '@scopedPackageName@'
 </script>
 
 <template>
-  <ExampleComponent />
+  <div class="main">
+    <ExampleComponent />
+    <MyPanel title="Panel title" footer="Panel footer">
+      Header and footer
+    </MyPanel>
+    <MyPanel title="Panel title">
+      Just a header
+    </MyPanel>
+    <MyPanel footer="Panel footer">
+      Just a footer
+    </MyPanel>
+    <MyPanel>
+      No header or footer
+    </MyPanel>
+  </div>
 </template>
+
+<style scoped>
+.main > * + * {
+  margin-top: 10px;
+  max-width: 300px;
+}
+</style>

src/template/vitepress/examples/packages/docs/src/introduction.md

@@ -1,7 +1,29 @@
 <script setup>
-import { Example as ExampleComponent } from '@scopedPackageName@'
+import { Example as ExampleComponent, MyPanel } from '@skirtle/test-project'
 </script>
 
+<style scoped>
+.panel {
+  margin: 20px 0;
+}
+</style>
+
 # Introduction
 
 <ExampleComponent />
+
+<MyPanel title="Panel title" footer="Panel footer">
+  Header and footer
+</MyPanel>
+
+<MyPanel title="Panel title">
+  Just a header
+</MyPanel>
+
+<MyPanel footer="Panel footer">
+  Just a footer
+</MyPanel>
+
+<MyPanel>
+  No header or footer
+</MyPanel>