add d-container component, move app.vue to app folder

Author: NisuSan

.playground/app/components.d.ts

@@ -13,7 +13,9 @@ declare module 'vue' {
     IFa6SolidTrash: typeof import('~icons/fa6-solid/trash')['default']
     NButton: typeof import('naive-ui')['NButton']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
+    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDatePicker: typeof import('naive-ui')['NDatePicker']
+    NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NEmpty: typeof import('naive-ui')['NEmpty']
     NInput: typeof import('naive-ui')['NInput']
     NSelect: typeof import('naive-ui')['NSelect']

.playground/app/pages/index.vue

@@ -56,6 +56,16 @@
           </div>
         </div>
       </n-tab-pane>
+      <n-tab-pane name="grid" tab="Grid">
+        <d-container :max-columns="5">
+          <input class="bg-white" type="text">
+          <input class="bg-white" type="text">
+          <input class="bg-white" type="text">
+          <input class="bg-white" type="text">
+          <input class="bg-white" type="text">
+          <input class="bg-white" type="text">
+        </d-container>
+      </n-tab-pane>
     </n-tabs>
     <div class="toggle-theme cursor-pointer p-2 border border-main-brand rounded inline-block absolute -top-1 right-2" @click="toggleTheme()">
       <IFa6SolidSun v-if="themeName === 'dark'" width="1.1rem" height="1.1rem" class="toggle-theme-sun"/>

app.vue renamed to app/app.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="grid mx-auto w-full" :style="[gridStyle, { columnGap: props.gapX, rowGap: props.gapY, gap: props.gap, }]">
+    <slot/>
+  </div>
+</template>
+
+<script setup lang="ts">
+  type Props = {
+    minColumns?: number,
+    maxColumns?: number,
+    gap?: string,
+    gapX?: string,
+    gapY?: string
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    minColumns: 2,
+    maxColumns: 4,
+    gap: '1rem'
+  })
+
+  const { width } = useWindowSize()
+  const childCount = (useSlots()?.default?.({}) || []).length
+
+  const gridStyle = computed(() => {
+    let c = Math.min(props.maxColumns, Math.max(props.minColumns, childCount))
+
+    if (width.value < 640) c = 1
+    else if (width.value < 768) c = Math.min(c, 2)
+
+    return `grid-template-columns: repeat(${c}, minmax(0, 1fr))`
+  })
+</script>

app/components/DContainer.vue

@@ -31,6 +31,8 @@ const props = withDefaults(
 
 const isLoaded = ref(false)
 const { themeUI } = useTheme({ naiveUIStyles: props.theme })
+console.log(themeUI.value);
+
 
 onMounted(() => {
   isLoaded.value = true

app/components/NaiveUIWrapper.vue

@@ -20,7 +20,13 @@ export default defineNuxtConfig({
   },
   css: ['./app/assets/tailwind.css'],
   devtools: { enabled: true },
-  modules: ['nuxtjs-naive-ui', 'unplugin-icons/nuxt', '@nuxtjs/google-fonts', 'nuxt-file-storage'],
+  modules: [
+    'nuxtjs-naive-ui',
+    'unplugin-icons/nuxt',
+    '@nuxtjs/google-fonts',
+    'nuxt-file-storage',
+    '@vueuse/nuxt'
+  ],
   vite: {
     optimizeDeps: {
       include:

nuxt.config.ts

@@ -37,6 +37,7 @@
     "@nuxtjs/google-fonts": "^3.2.0",
     "@tailwindcss/vite": "4.0.0-beta.8",
     "@vueuse/core": "^12.3.0",
+    "@vueuse/nuxt": "^12.4.0",
     "ansis": "^3.6.0",
     "boxen": "^8.0.1",
     "cyrillic-to-translit-js": "^3.2.1",