map components subsets

package.json

@@ -33,7 +33,8 @@
         "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
     },
     "dependencies": {
-        "@nuxt/kit": "^3.12.4"
+        "@nuxt/kit": "^3.12.4",
+        "@nuxtjs/leaflet": "^1.2.3"
     },
     "devDependencies": {
         "@nuxt/devtools": "^1.3.9",

playground/nuxt.config.ts

@@ -1,7 +1,7 @@
 export default defineNuxtConfig({
     srcDir: 'src/',
     ssr: false,
-    modules: ['../src/module', '@nuxt/eslint', 'vuetify-nuxt-module'],
+    modules: ['../src/module', '@nuxt/eslint', 'vuetify-nuxt-module','@nuxtjs/leaflet'],
     devtools: { enabled: true },
     compatibilityDate: '2024-08-02',
     imports: {
@@ -24,7 +24,7 @@ export default defineNuxtConfig({
                         dark: false,
                         colors: {
                             // background: '#FFFFFF',
-                            // primary: '#008080',
+                             primary: '#008080',
                             // secondary: '#E34234',
                             // white: '#FFFFFF',
                             floor: '#DCDCDC',

playground/src/components/layout/ComponentDoc.vue

@@ -2,9 +2,9 @@
     <div class="pa-5">
         <v-card>
             <v-toolbar color="primary">
-                <v-app-bar-nav-icon icon="mdi-cube"/>
+                <v-app-bar-nav-icon icon="mdi-cube" />
                 <v-toolbar-title>{{ propc.title }}</v-toolbar-title>
-                <v-spacer/>
+                <v-spacer />
                 <v-btn
                     prepend-icon="mdi-lightbulb-outline"
                     variant="outlined"
@@ -41,59 +41,52 @@
 
             <v-card-item class="bg-surface">
                 <v-card-text>
-                    <slot name="description"/>
+                    <slot name="description" />
                 </v-card-text>
             </v-card-item>
             <v-divider />
             <v-card-item>
                 <v-toolbar>
-                    <v-app-bar-nav-icon
-                        icon="mdi-lightbulb-outline"
-                    />
+                    <v-app-bar-nav-icon icon="mdi-lightbulb-outline" />
                     <v-toolbar-title>Example</v-toolbar-title>
                 </v-toolbar>
                 <v-card-text ref="example">
-                    <slot name="example"/>
+                    <slot name="example" />
                 </v-card-text>
             </v-card-item>
             <v-card-item>
                 <v-toolbar>
-                    <v-app-bar-nav-icon
-                        icon="mdi-tune-variant"
-                    />
+                    <v-app-bar-nav-icon icon="mdi-tune-variant" />
                     <v-toolbar-title>Props</v-toolbar-title>
                 </v-toolbar>
                 <v-card-text ref="props">
-                    <slot name="prop"/>
+                    <slot name="prop" />
                 </v-card-text>
             </v-card-item>
             <v-card-item>
                 <v-toolbar>
-                    <v-app-bar-nav-icon
-                        icon="mdi-dock-left"
-                    />
+                    <v-app-bar-nav-icon icon="mdi-dock-left" />
                     <v-toolbar-title>Slots</v-toolbar-title>
                 </v-toolbar>
                 <v-card-text ref="slots">
-                    <slot name="slot"/>
+                    <slot name="slot" />
                 </v-card-text>
             </v-card-item>
             <v-card-item>
                 <v-toolbar>
-                    <v-app-bar-nav-icon
-                        icon="mdi-flash-outline"
-                    />
+                    <v-app-bar-nav-icon icon="mdi-flash-outline" />
                     <v-toolbar-title>Event</v-toolbar-title>
                 </v-toolbar>
                 <v-card-text ref="events">
-                    <slot name="event"/>
+                    <slot name="event" />
                 </v-card-text>
             </v-card-item>
         </v-card>
     </div>
 </template>
 
 <script setup lang="ts">
+import { ref } from '#imports'
 import { useGoTo } from 'vuetify'
 const examples = ref(undefined)
 const props = ref(undefined)

playground/src/components/layout/SideBar.vue

@@ -1,5 +1,5 @@
 <template>
-    <v-navigation-drawer v-show="false" width="400" color="primary">
+    <v-navigation-drawer  width="400" color="primary">
         <v-list v-model:opened="groups">
             <v-list-group value="started">
                 <template #activator="{ props }">
@@ -62,6 +62,18 @@ const components = [
         title: 'SFooter',
         link: '/components/s-footer',
     },
+    {
+        title: 'SLegend',
+        link: '/components/s-legend',
+    },
+    {
+        title: 'SBaseMap',
+        link: '/components/s-base-map',
+    },
+    {
+        title: 'SMapControl',
+        link: '/components/s-map-control',
+    },
 ]
 </script>
 

tsconfig.json

@@ -5,6 +5,7 @@
     "compilerOptions": {
         "jsx": "preserve",
         "baseUrl": ".",
+        "moduleResolution": "Node",
         "paths": {
             "~/*": ["./*"],
             "@/*": ["./*"],