handle stacked top position

Author: aguingand

resources/js/components/StickyTop.vue

@@ -1,17 +1,12 @@
 <script setup lang="ts">
-    import { useElementBounding, useWindowSize } from "@vueuse/core";
-    import { computed, reactive, ref, watch } from "vue";
+    import { useElementBounding, useEventListener, useWindowSize } from "@vueuse/core";
+    import { computed, reactive, ref, watch, watchEffect } from "vue";
 
-    defineProps<{
-        stuck?: boolean,
-    }>();
+    defineProps<{}>();
 
-    const emit = defineEmits(['update:stuck']);
     const el = ref<HTMLElement>();
-    // const content = computed<HTMLElement>(() => el.value?.querySelector('[data-sticky-content]'));
     const containerRect = reactive(useElementBounding(() => el.value?.parentElement, { updateTiming: 'next-frame' }));
     const selfRect = reactive(useElementBounding(el, { updateTiming: 'next-frame' }));
-    // const contentRect = reactive(useElementBounding(content, { 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;
@@ -21,34 +16,40 @@
             && bottom >= 0
             && top <= parseFloat(style.top);
     });
-    const isOverflowing = ref(false);
     const isOverflowingViewport = ref(false);
     const { height: innerHeight } = useWindowSize();
     watch([containerRect, innerHeight], () => {
         const style = window.getComputedStyle(el.value);
         isOverflowingViewport.value = (parseFloat(style.top) + containerRect.height) > innerHeight.value;
     });
-    watch(stuck, () => {
-        emit('update:stuck', stuck.value);
+
+    // Stacked top
+    const stackedTop = ref(0);
+    const parentStickyTopEl = computed(() => el.value?.closest('[data-sticky-top-container]')?.querySelector('[data-sticky-top]') as HTMLElement);
+    const parentStickyTopRect = reactive(useElementBounding(() => parentStickyTopEl.value, { updateTiming: 'next-frame' }));
+    function updateStackedTop() {
+        const parentStickyStyle = parentStickyTopEl.value ? window.getComputedStyle(parentStickyTopEl.value) : null;
+        stackedTop.value = parentStickyTopEl.value && parentStickyStyle.position === 'sticky'
+            ? parentStickyTopRect.height + parseFloat(parentStickyStyle.top || '0')
+            : topbarSafeRect.height;
+    }
+    watchEffect(() => {
+        updateStackedTop();
+    });
+    useEventListener(window, 'resize', () => {
+        updateStackedTop();
     });
-    // watch([stuck, contentRect], () => {
-    //     if(content.value) {
-    //         const topBarSafeArea = (document.querySelector('[data-topbar-sticky-safe-area]') as HTMLElement);
-    //         topBarSafeArea.style.minWidth = stuck.value ? `${contentRect.width}px` : 'auto';
-    //     }
-    // });
 </script>
 
 <template>
     <div :style="{
-            '--top-bar-height': `${topbarSafeRect.height}px`,
-            // '--sticky-safe-left-offset': stuck ? `${Math.max(topbarSafeRect.left - selfRect.left, 0)}px` : '0px',
-            // '--sticky-safe-right-offset': stuck ? `${Math.max(selfRect.right - topbarSafeRect.right - parseInt(window.getComputedStyle(el).paddingRight), 0)}px` : '0px',
+            '--stacked-top': `${stackedTop}px`
         }"
         :data-stuck="stuck ? true : null"
         :data-overflowing-viewport="isOverflowingViewport ? true : null"
+        data-sticky-top
         ref="el"
     >
-        <slot v-bind="{ stuck, largerThanTopbar: selfRect.height > topbarSafeRect.height, isOverflowing }" />
+        <slot v-bind="{ stuck, largerThanTopbar: selfRect.height > topbarSafeRect.height }" />
     </div>
 </template>

resources/js/components/ui/RootCard.vue

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

resources/js/form/components/Form.vue

@@ -131,7 +131,7 @@
         <component :is="inline ? 'div' : RootCard">
             <component :is="inline ? 'div' : RootCardHeader"
                 :class="[
-                    form.locales?.length ? 'data-[overflowing-viewport]:sticky' : '',
+                    form.locales?.length || form.layout.tabs.length > 1 ? 'data-[overflowing-viewport]:sticky' : '',
                 ]"
             >
                 <div class="flex flex-wrap justify-end items-start gap-x-4 gap-y-4">

resources/js/form/components/FormFieldLayout.vue

@@ -63,7 +63,7 @@
                 :is="stickyLabel ? StickyTop : 'div'"
                 class="group"
                 :class="[{
-                    'top-[calc(var(--top-bar-height)+.625rem)] [[role=dialog]_&]:top-2.5 z-[5] lg:sticky': stickyLabel,
+                    'top-[calc(var(--stacked-top)+.625rem)] [[role=dialog]_&]:top-2.5 z-[5] lg:sticky': stickyLabel,
                     'hidden @md/field-container:block @3xl/root-card:@md/field-container:block': !hasLabelRow,
                 }]"
                 v-slot="{ stuck = false } = {}"

resources/js/form/components/fields/editor/Editor.vue

@@ -161,7 +161,7 @@
             }"
         >
             <template v-if="editor && field.toolbar">
-                <StickyTop class="sticky top-[--top-bar-height] [[role=dialog]_&]:top-0 p-1.5 border-b data-[stuck]:z-10 data-[stuck]:bg-background">
+                <StickyTop class="sticky top-[--stacked-top] [[role=dialog]_&]:top-0 p-1.5 border-b data-[stuck]:z-10 data-[stuck]:bg-background">
                     <div class="flex gap-x-1 gap-y-0 flex-wrap" ref="header">
                         <template v-for="button in props.field.toolbar">
                             <template v-if="button === 'link'">