geolocation + improve form tabs

Author: antoine

demo/app/Sharp/TestForm/TestForm.php

@@ -93,10 +93,10 @@ public function buildFormFields(FieldsContainer $formFields): void
                     ->setLabel('Geolocation')
                     ->setApiKey(env('GMAPS_KEY'))
                     ->setGoogleMapsMapId(env('GMAPS_MAP_ID'))
-//                    ->setMapsProvider('osm')
-//                    ->setGeocodingProvider('osm')
-                    ->setMapsProvider('gmaps')
-                    ->setGeocodingProvider('gmaps')
+                    ->setMapsProvider('osm')
+                    ->setGeocodingProvider('osm')
+//                    ->setMapsProvider('gmaps')
+//                    ->setGeocodingProvider('gmaps')
     //                ->setDisplayUnitDecimalDegrees()
                     ->setDisplayUnitDegreesMinutesSeconds()
                     ->setGeocoding()

docs/guide/upgrading/9.0.md

@@ -495,6 +495,26 @@ class PostBlockList extends SharpEntityList
 
 You can of course instead declare a real Filter.
 
+## SharpFormGeolocationField using Google Maps API must now provide a Map ID
+
+Sharp 9.x now uses Advanced Markers which requires a [Map ID](https://developers.google.com/maps/documentation/get-map-id), register it with the following method of the field :
+
+```php
+class PostForm extends SharpForm
+{
+    public function buildFormFields(FieldsContainer $formFields): void
+    {
+        $formFields->addField(
+            SharpFormGeolocationField::make('position')
+                ->setMapsProvider('gmaps')
+                ->setApiKey('...')
+                ->setGoogleMapsMapId('...') // new method
+        );
+    }
+}
+```
+
+
 ## SharpFormAutocompleteFormField was split in two subclasses for local and remote cases
 
 This isn’t a breaking change, since `SharpFormAutocompleteFormField::make($key, $mode)` is still supported, but deprecated. You should migrate to the new `SharpFormAutocompleteLocalField` and `SharpFormAutocompleteRemoteField` classes.

package-lock.json

@@ -89,7 +89,7 @@
     "filesize": "^10.1.0",
     "font-awesome-filetypes": "^2.1.0",
     "fuse.js": "^2.6.2",
-    "leaflet": "^1.4.0",
+    "leaflet": "^1.9.4",
     "lodash": "^4.17.21",
     "lucide-vue-next": "^0.363.0",
     "moment": "^2.19.1",

package.json

@@ -11,7 +11,7 @@
 
 @layer base {
     html {
-        scrollbar-gutter: stable;
+        /*scrollbar-gutter: stable;*/
     }
     [type="search"]::-webkit-search-decoration,
     [type="search"]::-webkit-search-cancel-button {

resources/css/app.css

@@ -51,7 +51,7 @@ provide('menuBoundary', menuBoundary);
 </script>
 
 <template>
-    <ConfigProvider :scroll-body="false">
+    <ConfigProvider>
         <div class="min-h-screen w-full md:grid-cols-[220px_1fr]" :class="[
             'min-[1244px]:grid-cols-[280px_1fr]', // collapse only before 1024px+220px to prevent EL layout shift
             showDesktopLeftNav ? 'md:grid' : 'xl:grid'

resources/js/Layouts/Layout.vue

@@ -7,8 +7,8 @@
 <template>
     <div class="@container">
         <div :class="[noPadding ? 'px-0' : 'max-lg:@[66rem]:px-4 lg:@[67rem]:px-6']">
-            <div class="@container max-w-5xl mx-auto px-0 2xl:max-w-[87rem] @[67rem]:max-w-[87rem]">
-                <Card class="rounded-none border-x-0 *:px-4 lg:*:px-6 @5xl:border-x @5xl:rounded-lg">
+            <div class="@container/root-card max-w-5xl mx-auto px-0 2xl:max-w-[87rem] @[67rem]:max-w-[87rem]">
+                <Card class="rounded-none border-x-0 *:px-4 lg:*:px-6 @5xl/root-card:border-x @5xl/root-card:rounded-lg">
                     <slot />
                 </Card>
             </div>

resources/js/components/ui/RootCard.vue

@@ -9,7 +9,7 @@ const props = defineProps<{ class?: HTMLAttributes['class'] }>()
   <div
     :class="
       cn(
-        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        'flex flex-col-reverse gap-y-2 sm:flex-row sm:justify-end sm:gap-x-2',
         props.class,
       )
     "

resources/js/components/ui/dialog/DialogFooter.vue

@@ -9,7 +9,7 @@ const props = defineProps<{
 
 <template>
   <div
-    :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
+    :class="cn('flex flex-col gap-y-1.5', props.class)"
   >
     <slot />
   </div>

resources/js/components/ui/dialog/DialogHeader.vue

@@ -103,25 +103,27 @@
         <component :is="inline ? 'div' : RootCard">
             <template v-if="!inline">
                 <CardHeader>
-                    <div class="flex items-start">
-                        <CardTitle class="flex-1">
+                    <div class="flex items-start gap-x-4">
+                        <CardTitle class="-mt-0.5 flex-1 truncate text-2xl/7">
                             <slot name="title" />
                         </CardTitle>
                         <template v-if="form.layout.tabbed && form.layout.tabs.length > 1">
                             <div>
-                                <div class="sm:hidden">
+                                <div class="@3xl/root-card:hidden">
                                     <Select v-model="selectedTabSlug">
                                         <SelectTrigger>
                                             <SelectValue />
                                         </SelectTrigger>
-                                        <template v-for="tab in form.layout.tabs">
-                                            <SelectItem :value="slugify(tab.title)">
-                                                {{ tab.title }}
-                                            </SelectItem>
-                                        </template>
+                                        <SelectContent>
+                                            <template v-for="tab in form.layout.tabs">
+                                                <SelectItem :value="slugify(tab.title)">
+                                                    {{ tab.title }}
+                                                </SelectItem>
+                                            </template>
+                                        </SelectContent>
                                     </Select>
                                 </div>
-                                <div class="hidden sm:block">
+                                <div class="hidden @3xl/root-card:block">
                                     <TabsList>
                                         <template v-for="tab in form.layout.tabs">
                                             <TabsTrigger :value="slugify(tab.title)">
@@ -136,8 +138,8 @@
                                     </TabsList>
                                 </div>
                             </div>
+                            <div class="flex-1 hidden @4xl/root-card:block"></div>
                         </template>
-                        <div class="flex-1"></div>
                     </div>
                 </CardHeader>
             </template>