nothing

resources/js/Components/AppContainer.vue

@@ -0,0 +1,13 @@
+<script setup>
+
+</script>
+
+<template>
+    <div class="max-w-6xl mx-auto mt-6 mb-4 w-full">
+        <slot />
+    </div>
+</template>
+
+<style scoped>
+
+</style>

resources/js/Components/AppPanel.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { NFormItem, NCard, NScrollbar } from 'naive-ui'
+import {computed, ref, watch} from "vue";
+const props = defineProps({
+    header: {
+        type: String,
+        default: ''
+    },
+    feedback: {
+        type: String,
+        default: ''
+    },
+    minH: {
+        type: [String, Number],
+        default: null
+    },
+    maxH: {
+        type: [String, Number],
+        default: null
+    },
+})
+
+const hasHeader = computed(() => props.header.trim().length > 0)
+const hasFeedback = computed(() => props.feedback.trim().length > 0)
+const hasMinH = computed(() => props.minH.trim().length > 0 || Number.isInteger(props.minH))
+const hasMaxH = computed(() => props.maxH.trim().length > 0 || Number.isInteger(props.maxH))
+
+const styles = ref([])
+
+watch(() => [props.minH, props.maxH], ([minH, maxH]) => {
+    const sizeStyles = []
+
+    if (minH === null) return
+    if (minH.trim().length > 0) {
+        sizeStyles.push(`min-height: ${minH};`)
+    } else if (Number.isInteger(minH)) {
+        sizeStyles.push(`min-height: ${minH}px;`)
+    }
+
+    if (maxH === null) return
+    if (maxH.trim().length > 0) {
+        sizeStyles.push(`max-height: ${maxH};`)
+    } else if (Number.isInteger(maxH)) {
+        sizeStyles.push(`max-height: ${maxH}px;`)
+    }
+
+    styles.value = styles.value.concat(sizeStyles)
+}, {
+    immediate: true
+})
+</script>
+
+<template>
+    <NFormItem :show-label="hasHeader" :label="header" :show-feedback="hasFeedback" :feedback="feedback">
+        <NCard>
+            <NScrollbar :style="styles">
+                <slot />
+            </NScrollbar>
+        </NCard>
+    </NFormItem>
+</template>
+
+<style scoped>
+
+</style>