Merge pull request #360 from sronveaux/new-slot-syntax

Changed deprecated slot syntax
wegue-oss · Feb 22, 2024 · d4b4033 · d4b4033
2 parents 1729e18 + 3d82608
commit d4b4033
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 32 deletions.
diff --git a/app-starter/WguAppTemplate.vue b/app-starter/WguAppTemplate.vue
@@ -5,11 +5,21 @@
 
     <wgu-app-header>
       <!-- forward the slots of AppHeader -->
-      <slot name="wgu-tb-start" slot="wgu-tb-start" />
-      <slot name="wgu-tb-after-title" slot="wgu-tb-after-title" />
-      <slot name="wgu-tb-before-auto-buttons" slot="wgu-tb-before-auto-buttons" />
-      <slot name="wgu-tb-after-auto-buttons" slot="wgu-tb-after-auto-buttons" />
-      <slot name="wgu-tb-end" slot="wgu-tb-end" />
+      <template v-slot:wgu-tb-start>
+        <slot name="wgu-tb-start" />
+      </template>
+      <template v-slot:wgu-tb-after-title>
+        <slot name="wgu-tb-after-title" />
+      </template>
+      <template v-slot:wgu-tb-before-auto-buttons>
+        <slot name="wgu-tb-before-auto-buttons" />
+      </template>
+      <template v-slot:wgu-tb-after-auto-buttons>
+        <slot name="wgu-tb-after-auto-buttons" />
+      </template>
+      <template v-slot:wgu-tb-end>
+        <slot name="wgu-tb-end" />
+      </template>
     </wgu-app-header>
 
     <slot name="wgu-after-header" />
@@ -29,8 +39,7 @@
         <wgu-map />
         <!-- layer loading indicator -->
         <wgu-maploading-status />
-        <slot name="wgu-after-map">
-        </slot>
+        <slot name="wgu-after-map" />
         <!-- Portal to overlay the map content from an application module -->
         <portal-target name="map-overlay" />
         <wgu-app-logo />

diff --git a/docs/reusable-components.md b/docs/reusable-components.md
@@ -78,8 +78,9 @@ The following example implements a customized tooltip to render an attribute of
   <wgu-map-overlay
     overlayId="my-custom-tooltip"
     :visible=false
+    v-slot="{feature}"
   >
-    <v-sheet slot-scope="{feature}"  v-if="feature"> 
+    <v-sheet v-if="feature">
       {{ feature.get('name') }}
     </v-sheet>
   </wgu-map-overlay>

diff --git a/docs/workshop.md b/docs/workshop.md
@@ -565,29 +565,30 @@ As you probably notice, there is currently no way to deactivate the drawing beha
 <template>
   <wgu-app-tpl>
 
-    <v-card
-      class="myCard"
-      slot="wgu-before-content"
-    >
-      <v-card-title>
-        Point Tool
-      </v-card-title>
-
-      <v-card-text>
-        This tool can add points to the map.
-      </v-card-text>
-
-      <v-card-actions>
-        <v-btn-toggle v-model="buttonValue">
-          <v-btn>
-            <v-icon dark>
-              mdi-star
-            </v-icon>
-          </v-btn>
-        </v-btn-toggle>
-      </v-card-actions>
-
-    </v-card>
+    <template v-slot:wgu-before-content>
+      <v-card
+        class="myCard"
+      >
+        <v-card-title>
+          Point Tool
+        </v-card-title>
+
+        <v-card-text>
+          This tool can add points to the map.
+        </v-card-text>
+
+        <v-card-actions>
+          <v-btn-toggle v-model="buttonValue">
+            <v-btn>
+              <v-icon dark>
+                mdi-star
+              </v-icon>
+            </v-btn>
+          </v-btn-toggle>
+        </v-card-actions>
+
+      </v-card>
+    </template>
   </wgu-app-tpl>
 </template>
 

diff --git a/src/components/ol/HoverTooltip.vue b/src/components/ol/HoverTooltip.vue
@@ -10,8 +10,9 @@
     :autoPanDuration="250"
     positioning="top-center"
     :offset="[0, 20]"
+    v-slot="{feature, hoverAttribute}"
   >
-    <v-sheet slot-scope="{feature, hoverAttribute}" v-if="feature"
+    <v-sheet v-if="feature"
     class="pa-2 text-center" max-width=200 >
       {{ feature.get(hoverAttribute) }}
     </v-sheet>