webapps/packages/layers/ux/app/components/XScaffold/Grid/Page.vue

<script setup lang="ts">
const props = defineProps<{
  class?: string
  ux?: any
  fillHero?: boolean
  overlapHeroBackground?: boolean
}>()

const slots = useSlots()

const classes = computed(() => {
  const hero = !!slots.hero
  const heroBackground = hero && !!slots['hero-background']

  return useStyling(
    'scaffoldGridPage',
    {
      slots: {
        // don't try to style the root element, problems with display: contents
        spacer: 'h-[100vh]',
        hero: 'z-50 col-span-ful',
        heroBackgroundWrapper: 'z-25 col-span-full relative w-full h-full',
        heroBackground: 'absolute inset-0 pointer-events-none',
        content: 'row-end-5 col-span-full',
      },
      variants: {
        hero: {
          true: {},
          false: {
            spacer: 'row-span-full',
            content: 'row-start-2',
          },
        },
        heroBackground: {
          true: {},
          false: {},
        },
        overlapHeroBackground: {
          true: {
            heroBackgroundWrapper: 'row-start-1',
          },
          false: { heroBackgroundWrapper: 'row-start-2' },
        },
        fillHero: {
          true: {},
          false: {},
        },
      },
      compoundVariants: [
        {
          hero: true,
          fillHero: false,
          class: {
            spacer: 'row-span-full',
            hero: 'row-2',
            content: 'row-start-3',
          },
        },
        {
          hero: true,
          fillHero: true,
          class: {
            spacer: 'row-start-1 row-end-4',
            hero: 'row-start-2 row-end-4',
            content: 'row-start-4',
          },
        },
        {
          heroBackground: true,
          fillHero: false,
          class: {
            heroBackgroundWrapper: 'row-end-3',
          },
        },
        {
          heroBackground: true,
          fillHero: true,
          class: {
            heroBackgroundWrapper: 'row-end-4',
          },
        },
      ],
    },
    {
      ...props,
      hero: hero,
      heroBackground: heroBackground,
      fillHero: hero && props.fillHero,
      overlapHeroBackground: heroBackground && props.overlapHeroBackground,
    }
  ).value
})
</script>

<template>
  <main class="proxy">
    <div :class="classes.spacer" />

    <section v-if="$slots.hero" :class="classes.hero">
      <slot name="hero" />
    </section>

    <div v-if="$slots.hero && $slots['hero-background']" :class="classes.heroBackgroundWrapper">
      <div :class="classes.heroBackground">
        <slot name="hero-background" />
      </div>
    </div>

    <div :class="classes.content">
      <slot />
    </div>
  </main>
</template>

<style scoped lang="css">
.proxy {
  display: contents;
}

@supports (grid-template-rows: subgrid) {
  .proxy {
    grid-row: 1 / -1;
    grid-column: 1 / -1;

    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
  }
}
</style>