improvements

code16 · Nov 25, 2024 · 9f85f06 · 9f85f06
1 parent a070500
commit 9f85f06
Show file tree

Hide file tree

Showing 11 changed files with 332 additions and 437 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -79,17 +79,17 @@
     "@uppy/vue": "^1.0.2",
     "@uppy/xhr-upload": "^3.4.1",
     "@vue-leaflet/vue-leaflet": "^0.10.1",
-    "@vueuse/components": "^10.9.0",
-    "@vueuse/core": "^10.11.1",
-    "@vueuse/integrations": "^10.10.0",
+    "@vueuse/components": "^11.3.0",
+    "@vueuse/core": "^11.3.0",
+    "@vueuse/integrations": "^11.3.0",
     "apexcharts": "^3.35.4",
     "axios": "^1.5.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cropperjs": "^1.5.12",
     "filesize": "^10.1.0",
     "font-awesome-filetypes": "^2.1.0",
-    "fuse.js": "^2.6.2",
+    "fuse.js": "^2.7.4",
     "leaflet": "^1.9.4",
     "lodash": "^4.17.21",
     "lucide-vue-next": "^0.363.0",

diff --git a/resources/js/Layouts/Layout.vue b/resources/js/Layouts/Layout.vue
@@ -7,7 +7,7 @@
 </script>
 
 <script setup lang="ts">
-    import { provide, useTemplateRef } from "vue";
+    import { onMounted, provide, useTemplateRef } from "vue";
     import { CircleUser, ChevronsUpDown, LogOut, Moon, Sun, ChevronDown } from "lucide-vue-next";
     import Notifications from "@/components/Notifications.vue";
     import { useDialogs } from "@/utils/dialogs";
@@ -53,7 +53,7 @@
         SidebarMenuItem,
         SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger
     } from "@/components/ui/sidebar";
-    import { useStorage } from "@vueuse/core";
+    import { useEventListener, useStorage } from "@vueuse/core";
     import GlobalSearch from "@/components/GlobalSearch.vue";
     import { vScrollIntoView } from "@/directives/scroll-into-view";
 
@@ -72,6 +72,16 @@
     if(currentItemWithChildren) {
         openedMenu.value[currentItemWithChildren.label] = true;
     }
+    const savedScrollTop = useStorage('menu-scroll', 0, sessionStorage);
+    const sidebarContent = useTemplateRef<InstanceType<typeof SidebarContent>>('sidebarContent');
+    useEventListener(() => sidebarContent.value?.$el, 'scroll', (e) => {
+        savedScrollTop.value = (e.target as HTMLElement).scrollTop;
+    });
+    onMounted(() => {
+        if(!history.state?.scrollRegions?.length && savedScrollTop.value) {
+            (sidebarContent.value?.$el as HTMLElement).scrollTop = savedScrollTop.value;
+        }
+    });
 </script>
 
 <template>
@@ -97,7 +107,7 @@
                         </template>
                     </div>
                 </SidebarHeader>
-                <SidebarContent scroll-region>
+                <SidebarContent ref="sidebarContent">
                     <template v-if="globalFilters">
                         <SidebarGroup>
                             <GlobalFilters :global-filters="globalFilters" />
@@ -142,7 +152,6 @@
                                                                     <component
                                                                         :is="childItem.isExternalLink ? 'a' : Link"
                                                                         :href="childItem.url"
-                                                                        preserve-scroll
                                                                         v-scroll-into-view.center="childItem.current"
                                                                     >
                                                                         <template v-if="childItem.icon">
@@ -169,7 +178,6 @@
                                                     <component
                                                         :is="item.isExternalLink ? 'a' : Link"
                                                         :href="item.url"
-                                                        preserve-scroll
                                                         v-scroll-into-view.center="item.current"
                                                     >
                                                         <template v-if="item.icon">

diff --git a/resources/js/components/StickyBottom.vue b/resources/js/components/StickyBottom.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+    import { computed, ref, useTemplateRef } from "vue";
+    import { useIntersectionObserver, useResizeObserver } from "@vueuse/core";
+
+    defineProps<{
+        sentinelClass: string,
+    }>()
+
+    const el = useTemplateRef('el');
+    const sentinel = useTemplateRef('sentinel');
+    const sentinelIntersecting = ref(false);
+    const isSticky = ref(false);
+    const stuck = computed(() => !sentinelIntersecting.value && isSticky.value);
+    useIntersectionObserver(sentinel, (entries) => {
+        sentinelIntersecting.value = entries[0].isIntersecting;
+    });
+    useResizeObserver(document.documentElement, () => {
+        isSticky.value = el.value && getComputedStyle(el.value).position === 'sticky';
+    });
+</script>
+
+<template>
+    <div v-bind="$attrs" :data-stuck="stuck ? true : null" ref="el">
+        <slot v-bind="{ stuck }" />
+    </div>
+    <div ref="sentinel" class="absolute inset-x-0" :class="sentinelClass"></div>
+</template>
diff --git a/resources/js/components/StickyTop.vue b/resources/js/components/StickyTop.vue
@@ -8,8 +8,8 @@
 
     const emit = defineEmits(['update:stuck']);
     const el = ref<HTMLElement>();
-    const selfRect = reactive(useElementBounding(el));
-    const topbarSafeRect = reactive(useElementBounding(() => document.querySelector('[data-topbar-sticky-safe-area]') as HTMLElement));
+    const selfRect = reactive(useElementBounding(el, { updateTiming: 'next-frame' }));
+    const topbarSafeRect = reactive(useElementBounding(() => document.querySelector('[data-topbar-sticky-safe-area]') as HTMLElement, { updateTiming: 'next-frame' }));
     const stuck = computed(() => {
         const style = el.value ? window.getComputedStyle(el.value) : null;
         const { bottom, top } = selfRect;

diff --git a/resources/js/components/ui/sidebar/index.ts b/resources/js/components/ui/sidebar/index.ts
@@ -27,7 +27,7 @@ export { default as SidebarTrigger } from './SidebarTrigger.vue'
 export { useSidebar } from './utils'
 
 export const sidebarMenuButtonVariants = cva(
-  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:line-clamp-2 [&>svg]:size-4 [&>svg]:shrink-0',
   {
     variants: {
       variant: {
@@ -36,7 +36,7 @@ export const sidebarMenuButtonVariants = cva(
           'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
       },
       size: {
-        default: 'h-8 text-sm',
+        default: 'text-sm py-1.5', // h-8
         sm: 'h-7 text-xs',
         lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0',
       },

diff --git a/resources/js/entity-list/components/EntityList.vue b/resources/js/entity-list/components/EntityList.vue
@@ -388,7 +388,7 @@
             </div>
 
             <RootCard :class="reordering ? 'relative z-[11]' : ''">
-                <CardHeader class="pb-4">
+                <CardHeader>
                     <div class="flex sm:flex-wrap gap-y-6 gap-x-2">
                         <div class="flex items-baseline">
                             <slot name="card-header" />
@@ -405,7 +405,7 @@
                         </div>
                     </div>
                     <template v-if="entityList && (showSearchField && entityList.config.searchable || entityList.visibleFilters?.length)">
-                        <div class="mt-4 flex sm:flex-wrap gap-2">
+                        <div class="mt-4 flex sm:flex-wrap gap-2" :class="!collapsed && entityList.data?.length ? '-mb-2' : ''">
                             <template v-if="showSearchField && entityList.config.searchable">
                                 <div class="self-center pointer-events-auto hidden sm:block" v-show="!reordering && !selecting && !collapsed">
                                     <EntityListSearch
@@ -696,7 +696,9 @@
                             </ScrollArea>
                         </template>
                         <template v-else>
-                            {{ __('sharp::entity_list.empty_text') }}
+                            <div class="text-muted-foreground">
+                                {{ __('sharp::entity_list.empty_text') }}
+                            </div>
                         </template>
                     </CardContent>
                     <template v-if="entityList.meta?.prev_page_url || entityList.meta?.next_page_url">