@simple-reporting/base 1.0.33 → 1.0.35

package/dev/package.json

@@ -24,7 +24,7 @@
     "postinstall": "srl prepare"
   },
   "dependencies": {
-    "@simple-reporting/base": "^1.0.33",
+    "@simple-reporting/base": "^1.0.35",
     "axios": "^1.12.2",
     "chalk": "^5.6.2",
     "exceljs": "^4.4.0",
@@ -62,6 +62,7 @@
     "typescript": "~5.6.3",
     "vite": "^6.3.6",
     "vite-plugin-vue-devtools": "^7.7.7",
+    "vite-svg-loader": "^5.1.0",
     "vitest": "^3.2.4",
     "vue-tsc": "^2.2.12"
   }

package/dev/src/assets/scss/app.scss

@@ -2,6 +2,11 @@
 @use 'web';
 @use "./components/note/accordion";
 
+html,
+body {
+  overscroll-behavior: none;
+}
+
 .fade-enter-from {
   opacity: 0;
 }

package/dev/src/assets/scss/pdf.scss

@@ -22,7 +22,7 @@ img {
   }
 }
 
-[style*="xlarge"] {
+[style*="--xlarge-url"] {
   background-image: var(--xlarge-url) !important;
 }
 

package/dev/vite.config.ts

@@ -3,10 +3,13 @@ import vue from '@vitejs/plugin-vue'
 import VueDevTools from 'vite-plugin-vue-devtools'
 import viteSrlPlugin from '@simple-reporting/base/plugins/viteSrlPlugin.js'
 import { fileURLToPath, URL } from 'node:url'
+import svgLoader from 'vite-svg-loader'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(), VueDevTools(), viteSrlPlugin()],
+  plugins: [vue(), VueDevTools(), svgLoader({
+    defaultImport: 'url'
+  }), viteSrlPlugin()],
   build: {
     outDir: './.output/app'
   },

package/devTools/SrlDevTools.vue

@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { config } from './config.ts'
+import { settings } from './settings.ts'
+import Content from './components/Content.vue'
+import DialogSettings from './dialog/Settings.vue'
+import DialogViewPort from './dialog/ViewPort.vue'
+import DialogGrid from './dialog/Grid.vue'
+import DialogSpacer from './dialog/Spacer.vue'
+import DialogColors from './dialog/Colors.vue'
+import PanelContent from './panel/Content.vue'
+import BoxContent from './box/Content.vue'
+import { useViewPort, useSrlConfig } from '#composables'
+import {
+  NConfigProvider,
+  NMessageProvider,
+  NDialogProvider,
+  NNotificationProvider,
+  NModal,
+  NCard,
+  NFlex,
+  NDivider,
+  darkTheme,
+  deDE,
+  dateDeDE
+} from 'naive-ui'
+
+const viewPort = useViewPort()
+
+const srlConfig = useSrlConfig()
+
+const dialogContent = ref<SrlDevToolsDialog>(null)
+
+const fontSize = ref(12);
+
+watch(
+  settings.value,
+  (newSettings) => {
+    fontSize.value = config.value.fontSizes[newSettings.size]
+  },
+  { immediate: true }
+)
+
+const fontSizeTypo = computed(() => {
+  return `${fontSize.value}px`
+})
+
+const isDark = computed(() => Boolean(settings.value.darkMode))
+const naiveTheme = computed(() => (isDark.value ? darkTheme : null))
+
+const mainClasses = computed(() => {
+  const c = [];
+  c.push(settings.value.position)
+  return c
+})
+
+const mainStyles = computed(() => {
+  return {
+    fontSize: fontSizeTypo.value
+  }
+})
+
+const gridColumnCount = computed(() => {
+  return  srlConfig.value.grid.columns[viewPort.value.viewPort]
+})
+
+const showDialog = computed(() => dialogContent.value !== null)
+
+const dialogTitle = computed(() => {
+  switch (dialogContent.value) {
+    case 'settings':
+      return 'Settings'
+    case 'viewport':
+      return 'Viewport'
+    case 'grid':
+      return 'Grid'
+    case 'spacer':
+      return 'Spacer'
+    case 'colors':
+      return 'Colors'
+    default:
+      return ''
+  }
+})
+
+const dialogCardStyle = computed(() => {
+  if (dialogContent.value === 'grid') {
+    return { width: 'min(80vw, 1200px)' }
+  }
+  if (dialogContent.value === 'spacer') {
+    return { width: 'min(80vw, 1200px)' }
+  }
+  return { width: 'min(520px, 92vw)' }
+})
+
+function closeDialog() {
+  dialogContent.value = null
+}
+</script>
+
+<template>
+  <NConfigProvider
+    :theme="naiveTheme"
+    :locale="deDE"
+    :date-locale="dateDeDE"
+  >
+    <NMessageProvider>
+      <NDialogProvider>
+        <NNotificationProvider>
+          <div class="dev-tools" :style="mainStyles" :class="mainClasses">
+            <teleport to="body">
+              <div v-if="settings.overlay.grid" class="dev-tools__overlay">
+                <div class="dev-tools__overlay--grid">
+                  <div v-for="i in gridColumnCount" :key="i"></div>
+                </div>
+              </div>
+            </teleport>
+
+            <div class="dev-tools__box">
+              <NCard
+                size="small"
+                :bordered="false"
+                class="dev-tools__box-card"
+                content-style="padding: 6px"
+              >
+                <NFlex justify="end" align="center" :wrap="false" style="gap: 6px">
+                  <PanelContent v-model:dialogContent="dialogContent" />
+                </NFlex>
+
+                <template v-if="settings.active">
+                  <NDivider style="margin: 6px 0" />
+                  <BoxContent v-model:dialogContent="dialogContent" />
+                </template>
+              </NCard>
+            </div>
+
+            <NModal
+              v-model:show="showDialog"
+              :mask-closable="true"
+              :auto-focus="false"
+              :trap-focus="false"
+              :block-scroll="false"
+              @close="closeDialog"
+              @mask-click="closeDialog"
+              @esc="closeDialog"
+            >
+              <NCard
+                class="dev-tools__naive-dialog"
+                :style="dialogCardStyle"
+                :bordered="false"
+                :segmented="{ content: true }"
+                :title="dialogTitle"
+                closable
+                @close="closeDialog"
+              >
+
+                <Content>
+                  <DialogSettings v-if="dialogContent==='settings'" />
+                  <DialogViewPort v-if="dialogContent==='viewport'" />
+                  <DialogGrid v-if="dialogContent==='grid'" />
+                  <DialogSpacer v-if="dialogContent==='spacer'" />
+                  <DialogColors v-if="dialogContent==='colors'" />
+                </Content>
+              </NCard>
+            </NModal>
+          </div>
+        </NNotificationProvider>
+      </NDialogProvider>
+    </NMessageProvider>
+  </NConfigProvider>
+</template>
+
+<style scoped lang="scss">
+@use "srl" as srl;
+
+.dev-tools {
+  font-family: 'Segoe UI', 'Arial', 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  font-weight: normal;
+  letter-spacing: 0.05em;
+
+  /* Positionierung der Box (minimal CSS, Rest kommt aus Naive UI) */
+  &__box {
+    position: fixed;
+    z-index: 3000;
+  }
+
+  &.top-right .dev-tools__box { top: 0; right: 0; }
+  &.top-left .dev-tools__box { top: 0; left: 0; }
+  &.bottom-right .dev-tools__box { bottom: 0; right: 0; }
+  &.bottom-left .dev-tools__box { bottom: 0; left: 0; }
+
+  /* Breitenlimit, damit die Box klein bleibt */
+  &__box-card {
+    width: max-content;
+    max-width: min(92vw, 420px);
+    font-size: 11px;
+    line-height: 1.2;
+  }
+
+  /* Dialog-Inhalte ebenfalls etwas kleiner */
+  :deep(.dev-tools__naive-dialog) {
+    max-height: min(70vh, 720px);
+    overflow: hidden;
+    font-size: 12px;
+    line-height: 1.25;
+  }
+
+  :deep(.dev-tools__naive-dialog .n-card__content) {
+    max-height: min(70vh, 720px);
+    overflow: auto;
+  }
+
+  &__overlay {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 1900;
+    overflow: hidden;
+
+    &--grid {
+      @include srl.grid-container();
+      @include srl.grid-row();
+      height: 100dvh;
+      margin-inline: auto;
+      & > div {
+        background-color: rgba(255, 0, 0, 0.05);
+        height: 100%;
+      }
+    }
+  }
+}
+</style>
+
+

package/devTools/assets/Svg/Check.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 504 540"><!--!Font Awesome Pro v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path d="M483.4 93.1C455.3 65 409.7 65 381.6 93.1l-201.1 201.1-57.1-57.1C95.3 209 49.7 209 21.6 237.1s-28.1 73.7 0 101.8l108 108c28.1 28.1 73.7 28.1 101.8 0l252-252c28.1-28.1 28.1-73.7 0-101.8zM407 118.5c14.1-14.1 36.9-14.1 50.9 0s14.1 36.9 0 50.9l-252 252c-14.1 14.1-36.9 14.1-50.9 0L47 313.5C33 299.4 33 276.6 47 262.5s36.9-14.1 50.9 0l69.8 69.8c7 7 18.4 7 25.5 0L407 118.5z"/></svg>
+</template>

package/devTools/assets/Svg/Close.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--!Font Awesome Pro v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path opacity=".4" d=""/><path d="M379.3 91.3c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0L192 233.4 27.3 68.7c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L169.4 256 4.7 420.7c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0L192 278.6 356.7 443.3c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L214.6 256 379.3 91.3z"/></svg>
+</template>

package/devTools/assets/Svg/Eye.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  open?: boolean
+}>(), {
+  open: false
+})
+</script>
+
+<template>
+  <svg v-if="props.open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Pro v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path d="M288 64c-140.8 0-229.3 128-256 192 26.7 64 115.2 192 256 192 140.8 0 229.3-128 256-192-26.7-64-115.2-192-256-192zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1 3.3 7.9 3.3 16.7 0 24.6-14.9 35.7-46.2 87.7-93 131.1-47.1 43.7-111.8 80.6-192.6 80.6S142.5 443.2 95.4 399.4c-46.8-43.5-78.1-95.4-93-131.1-3.3-7.9-3.3-16.7 0-24.6 14.9-35.7 46.2-87.7 93-131.1zM288 352c53 0 96-43 96-96 0-43.3-28.7-79.9-68.1-91.9 2.7 8.8 4.1 18.2 4.1 27.9 0 53-43 96-96 96-9.7 0-19.1-1.4-27.9-4.1 11.9 39.4 48.6 68.1 91.9 68.1zM160.2 263.8c-.2-2.6-.2-5.2-.2-7.8 0-12.2 1.7-23.9 4.9-35 .3-.9 .5-1.8 .8-2.7 12.4-40.4 44.3-72.2 84.7-84.7 11.9-3.7 24.6-5.6 37.7-5.6 2.5 0 5 .1 7.4 .2l.4 0c67.1 4 120.2 59.7 120.2 127.8 0 70.7-57.3 128-128 128-68.1 0-123.8-53.2-127.8-120.2zm32.1-16.1c9.3 5.3 20.1 8.4 31.6 8.4 35.3 0 64-28.7 64-64 0-11.5-3-22.3-8.4-31.6-46.4 4-83.3 40.9-87.3 87.3z"/></svg>
+  <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Pro v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path d="M27.3-27.2c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6l544 544c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L466.4 411.9c4.9-4.1 9.6-8.2 14.1-12.5 46.8-43.5 78.1-95.4 93-131.1 3.3-7.9 3.3-16.7 0-24.6-14.9-35.7-46.2-87.7-93-131.1-47.1-43.7-111.8-80.6-192.6-80.6-60 0-111.1 20.3-152.8 48.7L27.3-27.2zm131 131c36.4-23.7 79.7-39.8 129.7-39.8 140.8 0 229.3 128 256 192-13.3 32-42.1 80-85.2 120-4.9 4.5-9.9 8.9-15.1 13.2l-54.6-54.6c16.9-21.7 26.9-48.9 26.9-78.5 0-70.7-57.3-128-128-128-29.6 0-56.9 10-78.5 26.9l-51.2-51.2zM366.2 311.7L232.3 177.8c15.7-11.2 34.9-17.8 55.7-17.8 53 0 96 43 96 96 0 20.8-6.6 40-17.8 55.7zM74.8 133.3c-35.5 38.5-59.7 80.2-72.3 110.4-3.3 7.9-3.3 16.7 0 24.6 14.9 35.7 46.2 87.7 93 131.1 47.1 43.7 111.8 80.6 192.6 80.6 40.6 0 77.1-9.3 109.4-24.1L373 431.5c-25.8 10.3-54.1 16.5-85 16.5-140.8 0-229.3-128-256-192 11.2-26.8 33.2-64.9 65.4-100.1L74.8 133.3z"/></svg>
+</template>
+
+<style scoped lang="scss">
+
+</style>

package/devTools/assets/Svg/Info.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Pro v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path d="M256 32a224 224 0 1 1 0 448 224 224 0 1 1 0-448zm0 480a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM208 352l-16 0 0 32 128 0 0-32-48 0 0-128-80 0 0 32 48 0 0 96-32 0zm72-168l0-48-48 0 0 48 48 0z"/></svg>
+</template>

package/devTools/assets/Svg/Settings.vue

@@ -0,0 +1,5 @@
+<script setup lang="ts"></script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 512"><!--!Font Awesome Pro v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path d="M16 32l96 0 0 96-96 0 0-96zm0 176l96 0 0 96-96 0 0-96zm96 176l0 96-96 0 0-96 96 0z"/></svg>
+</template>

package/devTools/assets/Svg/Uncheck.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 504 560"><!--!Font Awesome Pro v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc.--><path d="M252.4 122.3c21.1-20.5 39.4-37.5 55.5-51.1 20.7-17.5 39.5-30.9 57.7-38.4 19.3-8 38.5-9.7 57.9-3 17.8 6.2 32.9 18.7 46.7 32.4s26.2 28.8 32.4 46.7c6.7 19.3 5 38.6-3 57.8-7.6 18.2-20.9 37-38.4 57.7-13.6 16.1-30.7 34.4-51.1 55.5 20.5 21.1 37.5 39.4 51.1 55.6 17.5 20.7 30.9 39.5 38.4 57.7 8 19.3 9.7 38.5 3 57.8-6.2 17.8-18.7 32.9-32.4 46.7s-28.8 26.2-46.7 32.4c-19.3 6.7-38.6 5-57.9-3-18.2-7.6-37-20.9-57.7-38.4-16.1-13.6-34.4-30.7-55.5-51.1-21.1 20.5-39.4 37.5-55.6 51.1-20.7 17.5-39.5 30.9-57.7 38.4-19.3 8-38.5 9.7-57.8 3-17.8-6.2-32.9-18.7-46.7-32.4S8.4 468.9 2.2 451.1c-6.7-19.3-5-38.6 3-57.8 7.6-18.2 20.9-37 38.4-57.7 13.6-16.1 30.7-34.4 51.1-55.6-20.5-21.1-37.5-39.4-51.1-55.5-17.5-20.7-30.9-39.5-38.4-57.7-8-19.3-9.7-38.5-3-57.8 6.2-17.8 18.7-32.9 32.4-46.7S63.5 36 81.3 29.8c19.3-6.7 38.6-5 57.8 3 18.2 7.6 37 20.9 57.7 38.4 16.1 13.6 34.4 30.7 55.6 51.1zM99.7 82.7c-5.6 2-13.4 7.1-25.5 19.2S57 121.7 55.1 127.3c-1.4 4.1-1.9 9 1.8 17.9 4.2 10.1 13.1 23.6 29.5 43.1 16.2 19.2 38.3 42.5 67.5 72 10.7 10.9 10.7 28.4 0 39.3-29.1 29.6-51.2 52.8-67.5 72-16.4 19.5-25.3 33-29.5 43.1-3.7 8.9-3.2 13.8-1.8 17.9 2 5.6 7.1 13.4 19.2 25.5s19.9 17.2 25.5 19.2c4.1 1.4 9 1.9 17.9-1.8 10.1-4.2 23.6-13.1 43.1-29.5 19.2-16.2 42.5-38.3 72-67.5 10.9-10.7 28.4-10.7 39.3 0 29.6 29.1 52.8 51.2 72 67.5 19.5 16.4 33 25.3 43.1 29.5 8.9 3.7 13.8 3.2 17.9 1.8 5.6-2 13.4-7.1 25.5-19.2s17.2-19.9 19.2-25.5c1.4-4.1 1.9-9-1.8-17.9-4.2-10.1-13.1-23.6-29.5-43.1-16.2-19.2-38.3-42.5-67.5-72-10.7-10.9-10.7-28.4 0-39.3 29.1-29.6 51.2-52.8 67.5-72 16.4-19.5 25.3-33 29.5-43.1 3.7-8.9 3.2-13.8 1.8-17.9-2-5.6-7.1-13.4-19.2-25.5s-19.9-17.2-25.5-19.2c-4.1-1.4-9-1.9-17.9 1.8-10.1 4.2-23.6 13.1-43.1 29.5-19.2 16.2-42.5 38.3-72 67.5-10.9 10.7-28.4 10.7-39.3 0-29.6-29.1-52.8-51.2-72-67.5-19.5-16.4-33-25.3-43.1-29.5-8.9-3.7-13.8-3.2-17.9-1.8z"/></svg>
+</template>

package/devTools/box/Content.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import BoxPanel from '../components/BoxPanel.vue'
+import { useViewPort } from '#composables'
+import { settings } from '../settings.ts'
+
+import { NButton, NIcon, NText } from 'naive-ui'
+import { InformationCircleOutline, Eye, EyeOff } from '@vicons/ionicons5'
+
+const viewPort = useViewPort()
+
+const dialogContent = defineModel('dialogContent', {
+  type: String as () => SrlDevToolsDialog,
+  default: null
+})
+
+function dialogToggle(target: SrlDevToolsDialog) {
+  dialogContent.value = dialogContent.value === target ? null : target
+}
+
+</script>
+
+<template>
+    <BoxPanel label="Grid">
+
+      <NButton
+        quaternary
+        circle
+        size="tiny"
+        @click="dialogToggle('grid')"
+      >
+        <template #icon>
+          <NIcon :component="InformationCircleOutline" />
+        </template>
+      </NButton>
+
+      <NButton
+        quaternary
+        circle
+        size="tiny"
+        @click="settings.overlay.grid=!settings.overlay.grid"
+        :type="settings.overlay.grid?'success':'error'"
+      >
+        <template #icon>
+          <NIcon :component="settings.active?Eye:EyeOff" />
+        </template>
+      </NButton>
+
+    </BoxPanel>
+    <BoxPanel label="Spacer">
+
+      <NButton
+        quaternary
+        circle
+        size="tiny"
+        @click="dialogToggle('spacer')"
+      >
+        <template #icon>
+          <NIcon :component="InformationCircleOutline" />
+        </template>
+      </NButton>
+
+    </BoxPanel>
+    <BoxPanel label="Colors">
+
+      <NButton
+        quaternary
+        circle
+        size="tiny"
+        @click="dialogToggle('colors')"
+      >
+        <template #icon>
+          <NIcon :component="InformationCircleOutline" />
+        </template>
+      </NButton>
+
+    </BoxPanel>
+    <BoxPanel label="ViewPort">
+
+      <NButton
+        quaternary
+        circle
+        size="tiny"
+        @click="dialogToggle('viewport')"
+      >
+        <template #icon>
+          <NIcon :component="InformationCircleOutline" />
+        </template>
+      </NButton>
+
+    </BoxPanel>
+    <NText tag="div" v-text="viewPort.viewPort" :title="`currentViewPort:\n${viewPort.viewPort}`"/>
+    <NText tag="div" v-text="`w: ${viewPort.innerWidth}px`" :title="`window.innerWidth\n${viewPort.innerWidth}px`"/>
+</template>

package/devTools/components/BoxPanel.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { NH2, NText } from "naive-ui"
+const props = defineProps({
+  label: String
+})
+</script>
+
+<template>
+  <div class="srl-dev-tools__box-panel">
+    <NText v-text="props.label"/>
+    <div>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.srl-dev-tools__box-panel {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+</style>

package/devTools/components/Content.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+
+<style scoped lang="scss">
+div {
+  display: flex;
+  flex-direction: column;
+  row-gap: 20px;
+}
+</style>

package/devTools/config.ts

@@ -0,0 +1,34 @@
+import { computed, ref } from 'vue'
+
+export const config = ref<{
+  settingsNamespace: string
+  positions: Array<'top-right' | 'top-left'| 'bottom-right' | 'bottom-left'>
+  fontSizes: Record<string, number>
+  defaultSettings: SrlDevToolsSettings
+}>({
+  settingsNamespace: 'srl-dev-tools-settings',
+  positions: ['top-right', 'top-left', 'bottom-right', 'bottom-left'],
+  fontSizes: {
+    S: 12,
+    M: 14,
+    L: 16,
+    XL: 18,
+  },
+  defaultSettings: {
+    active: true,
+    size: 'S',
+    position: 'top-right',
+    opacity: 1,
+    darkMode: false,
+    overlay: {
+      grid: false,
+    },
+  },
+})
+
+export const sizeOptions = computed(() => Object.keys(config.value.fontSizes))
+
+export default {
+  config,
+  sizeOptions,
+}

package/devTools/dialog/Colors.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useSrlConfig } from '#composables'
+import { NTable, NFlex } from 'naive-ui'
+
+const srlConfig = useSrlConfig()
+const colorView = computed(() => {
+  return srlConfig.value.colors.colors
+})
+</script>
+
+<template>
+  <NTable striped>
+    <tbody>
+      <tr v-for="(item, i) in colorView" :key="i">
+        <td v-text="item.name"/>
+        <td>
+          <NFlex>
+            <div :style="{
+              width: '30px',
+              height: '30px',
+              backgroundColor: item.color,
+              border: '1px solid #00000020',
+              borderRadius: '4px',
+            }"/>
+            {{ item.color }}
+          </NFlex>
+        </td>
+        <td v-text="item.description ?? ''"/>
+      </tr>
+    </tbody>
+  </NTable>
+</template>

package/devTools/dialog/Grid.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useSrlConfig } from '#composables'
+
+import { NTable, NGrid, NGridItem, NH2 } from 'naive-ui'
+
+const srlConfig = useSrlConfig()
+
+type GridView = {
+  name: string,
+  columns: number,
+  section: {
+    from: number,
+    to?: number
+  },
+  gap: {
+    column: string | number,
+    row: string | number
+  },
+  padding?: string | number,
+  maxWidth?: string | number
+}
+
+const gridView = computed<GridView[]>(() => {
+  const list = []
+  const breakpoints = Object.keys(srlConfig.value.grid.breakpoints)
+  breakpoints.forEach((breakpoint, index) => {
+    const item: GridView = {
+      name: breakpoint,
+      columns: srlConfig.value.grid.columns[breakpoint],
+      section: {
+        from: srlConfig.value.grid.breakpoints[breakpoint],
+      },
+      gap: {
+        column: 0,
+        row: 0,
+      }
+    }
+
+    if (breakpoints[(index + 1)]) {
+      item.section.to = srlConfig.value.grid.breakpoints[breakpoints[(index + 1)]] - 1
+    }
+
+    if (srlConfig.value.grid.containers[breakpoint]['padding']) {
+      item.padding = srlConfig.value.grid.containers[breakpoint]['padding']
+    }
+
+    if (srlConfig.value.grid.containers[breakpoint]['max-width']) {
+      item.maxWidth = srlConfig.value.grid.containers[breakpoint]['max-width']
+    }
+
+
+    if (srlConfig.value.grid.gutter[breakpoint]['gap']) {
+      item.gap.column = srlConfig.value.grid.gutter[breakpoint]['gap']
+      item.gap.row = srlConfig.value.grid.gutter[breakpoint]['gap']
+    } else {
+      if (srlConfig.value.grid.gutter[breakpoint]['column-gap']) {
+        item.gap.column = srlConfig.value.grid.gutter[breakpoint]['column-gap']
+      }
+      item.gap.row = srlConfig.value.grid.gutter[breakpoint]['row-gap']??item.gap.column
+    }
+
+    list.push(item)
+  })
+  return list
+})
+
+</script>
+
+<template>
+  <NGrid cols="1 s:2 m:3 l:4" responsive="screen" x-gap="20" y-gap="20">
+
+    <NGridItem v-for="item in gridView" :key="item.name">
+      <NH2 v-text="item.name"/>
+      <NTable striped>
+        <tbody>
+          <tr>
+            <td>columns</td>
+            <td v-text="item.columns"/>
+          </tr>
+          <tr v-if="item.name !== 'print'">
+            <td>from</td>
+            <td v-text="item.section.from + 'px / ' + (item.section.from / 16) + 'rem'"/>
+          </tr>
+          <tr v-if="item.name !== 'print' && item.section.to">
+            <td>to</td>
+            <td v-text="item.section.to + 'px / ' + (item.section.to / 16) + 'rem'"/>
+          </tr>
+          <tr v-if="item.padding">
+            <td>padding</td>
+            <td v-text="typeof item.padding === 'number' ? item.padding + 'px / ' + (item.padding / 16) + 'rem' : item.padding"/>
+          </tr>
+          <tr v-if="item.maxWidth">
+            <td>max-width</td>
+            <td v-text="typeof item.maxWidth === 'number' ? item.maxWidth + 'px / ' + (item.maxWidth/ 16) + 'rem' : item.maxWidth"/>
+          </tr>
+          <tr>
+            <td>column-gap</td>
+            <td v-text="typeof item.gap.column === 'number' ? item.gap.column + 'px / ' + (item.gap.column / 16) + 'rem' : item.gap.column"></td>
+          </tr>
+          <tr>
+            <td>row-gap</td>
+            <td v-text="typeof item.gap.row === 'number' ? item.gap.row + 'px / ' + (item.gap.row / 16) + 'rem' : item.gap.row"></td>
+          </tr>
+        </tbody>
+      </NTable>
+
+    </NGridItem>
+
+  </NGrid>
+</template>