MagicDrawer

<template>
  <m-button @click="drawerApi.open">Open Drawer</m-button>
  <magic-drawer id="magic-drawer-demo" :options="{ focusTrap: false }">
    <div class="bg-surface-base absolute inset-0" />
  </magic-drawer>
</template>

<script lang="ts" setup>
import { MButton } from 'mirror-compat'
import { useMagicDrawer } from '@maas/vue-equipment/plugins/MagicDrawer'

const drawerApi = useMagicDrawer('magic-drawer-demo')
</script>

<template>
  <m-button @click="drawerApi.open">Open Drawer</m-button>
  <magic-drawer id="magic-drawer-vertical-demo" :options="{ focusTrap: false }">
    <div class="bg-surface-base absolute inset-0" />
  </magic-drawer>
</template>

<script lang="ts" setup>
import { MButton } from 'mirror-compat'
import { useMagicDrawer } from '@maas/vue-equipment/plugins/MagicDrawer'

const drawerApi = useMagicDrawer('magic-drawer-vertical-demo')
</script>

<template>
  <m-button @click="drawerApi.open">Open Drawer</m-button>
  <magic-drawer
    id="magic-drawer-horizontal-demo"
    :options="{ focusTrap: false, position: 'right' }"
  >
    <div class="bg-surface-base absolute inset-0" />
  </magic-drawer>
</template>

<script lang="ts" setup>
import { MButton } from 'mirror-compat'
import { useMagicDrawer } from '@maas/vue-equipment/plugins/MagicDrawer'

const drawerApi = useMagicDrawer('magic-drawer-horizontal-demo')
</script>

<style>
[data-id='magic-drawer-horizontal-demo'] {
  --magic-drawer-height: 100svh;
  --magic-drawer-width: 20rem;
}
</style>

<template>
  <m-button @click="drawerApi.open">Open Drawer</m-button>
  <magic-drawer
    id="magic-drawer-snap-points-demo"
    :options="{
      focusTrap: false,
      snapPoints: snapPoints,
      initial: { snapPoint: snapPoints[0] },
    }"
  >
    <div class="bg-surface-base absolute inset-0" />
  </magic-drawer>
</template>

<script lang="ts" setup>
import { MButton } from 'mirror-compat'
import { useMagicDrawer } from '@maas/vue-equipment/plugins/MagicDrawer'

import type { MagicDrawerSnapPoint } from '@maas/vue-equipment/plugins/MagicDrawer'

const snapPoints: Array<MagicDrawerSnapPoint> = ['320px', 0.75, 1]
const drawerApi = useMagicDrawer('magic-drawer-snap-points-demo')
</script>

<style>
[data-id='magic-drawer-snap-points-demo'] {
  --magic-drawer-height: 100svh;
}
</style>

<template>
  <m-button @click="drawerApi.open">Open Drawer</m-button>
  <magic-drawer
    id="magic-drawer-mousewheel-demo"
    :options="{ focusTrap: false, enableMousewheel: true }"
  >
    <div class="bg-surface-base absolute inset-0" />
  </magic-drawer>
</template>

<script lang="ts" setup>
import { MButton } from 'mirror-compat'
import { useMagicDrawer } from '@maas/vue-equipment/plugins/MagicDrawer'

const drawerApi = useMagicDrawer('magic-drawer-mousewheel-demo')
</script>

<template>
  <m-button @click="drawerApi.open">Open Drawer</m-button>
  <magic-drawer
    id="magic-drawer-snap-mode-demo"
    :options="{
      focusTrap: false,
      snapPoints: snapPoints,
      snap: { mode: 'step' },
      initial: { snapPoint: snapPoints[0] },
    }"
  >
    <div class="bg-surface-base absolute inset-0" />
  </magic-drawer>
</template>

<script lang="ts" setup>
import { MButton } from 'mirror-compat'
import { useMagicDrawer } from '@maas/vue-equipment/plugins/MagicDrawer'

const snapPoints = [0.25, 0.5, 0.75, 1]
const drawerApi = useMagicDrawer('magic-drawer-snap-mode-demo')
</script>

<style>
[data-id='magic-drawer-snap-mode-demo'] {
  --magic-drawer-height: 100svh;
}
</style>

<template>
  <m-button @click="open">Open Drawer</m-button>
  <magic-drawer
    id="magic-drawer-range-demo"
    :options="{
      focusTrap: false,
      snapPoints: [{ min: 0.25, max: 0.75 }, 1],
      initial: { snapPoint: 0.5 },
    }"
  >
    <div class="bg-surface-base absolute inset-0" />
    <div class="relative flex w-full justify-center self-start">
      <div
        class="bg-surface-high mt-8 rounded-[0.5rem] px-4 py-2 font-mono text-sm"
      >
        <span class="text-surface-muted">activeSnapPoint</span>
        <span class="text-surface ml-3">{{ activeSnapPoint ?? '–' }}</span>
      </div>
    </div>
  </magic-drawer>
</template>

<script lang="ts" setup>
import { MButton } from 'mirror-compat'
import { useMagicDrawer } from '@maas/vue-equipment/plugins/MagicDrawer'

const { open, activeSnapPoint } = useMagicDrawer('magic-drawer-range-demo')
</script>

<style>
[data-id='magic-drawer-range-demo'] {
  --magic-drawer-height: 100svh;
}
</style>

<template>
  <m-button @click="open">Open Drawer</m-button>
  <magic-drawer
    id="magic-drawer-range-close-demo"
    :options="{
      focusTrap: false,
      snapPoints: [{ min: 0, max: 0.5 }],
      initial: { snapPoint: 0.5 },
    }"
  >
    <div class="bg-surface-base absolute inset-0" />
    <div class="relative flex w-full justify-center self-start">
      <div
        class="bg-surface-high mt-8 rounded-[0.5rem] px-4 py-2 font-mono text-sm"
      >
        <span class="text-surface-muted">activeSnapPoint</span>
        <span class="text-surface ml-3">{{ activeSnapPoint ?? '–' }}</span>
      </div>
    </div>
  </magic-drawer>
</template>

<script lang="ts" setup>
import { MButton } from 'mirror-compat'
import { useMagicDrawer } from '@maas/vue-equipment/plugins/MagicDrawer'

const { open, activeSnapPoint } = useMagicDrawer(
  'magic-drawer-range-close-demo'
)
</script>

<style>
[data-id='magic-drawer-range-close-demo'] {
  --magic-drawer-height: 100svh;
}
</style>

<template>
  <magic-drawer-provider
    id="magic-drawer-composed-demo"
    :options="{ focusTrap: false }"
  >
    <magic-drawer-trigger as-child>
      <m-button>Open Drawer</m-button>
    </magic-drawer-trigger>
    <magic-drawer-teleport>
      <magic-drawer-backdrop />
      <magic-drawer-content>
        <div class="bg-surface-base absolute inset-0" />
      </magic-drawer-content>
    </magic-drawer-teleport>
  </magic-drawer-provider>
</template>

<script lang="ts" setup>
import { MButton } from 'mirror-compat'
import {
  MagicDrawerBackdrop,
  MagicDrawerContent,
  MagicDrawerProvider,
  MagicDrawerTeleport,
  MagicDrawerTrigger,
} from '@maas/vue-equipment/plugins/MagicDrawer'
</script>

<template>
  <div class="flex flex-col items-center gap-4 select-none">
    <m-button @click="drawerApi.open">Open Drawer</m-button>

    <div
      class="bg-surface-low text-surface w-120 max-w-full rounded-[0.25rem] p-4 font-mono text-sm"
    >
      <div class="text-surface-muted mb-3 text-xs tracking-widest uppercase">
        snap points
      </div>
      <div class="mb-4 flex justify-between">
        <div
          v-for="point in snapPoints"
          :key="String(point)"
          class="flex flex-col items-center gap-2"
        >
          <div class="h-2 w-2 rounded-full" :class="dotClass(point)" />
          <span class="text-surface-muted text-xs">{{ point }}</span>
        </div>
      </div>

      <div class="text-surface-muted mb-2 text-xs tracking-widest uppercase">
        willSnapTo events
      </div>
      <div class="flex flex-col gap-1.5">
        <template v-if="log.length">
          <div
            v-for="(entry, i) in log"
            :key="i"
            :class="i === 0 ? 'text-surface' : 'text-surface-muted'"
          >
            {{ entry.snapPoint }}
          </div>
        </template>
        <span v-else class="text-surface-muted">—</span>
      </div>
    </div>

    <magic-drawer
      id="magic-drawer-will-snap-to-demo"
      :options="{
        focusTrap: false,
        snapPoints,
        threshold: { distance: 32 },
        initial: { snapPoint: snapPoints[0] },
      }"
    >
      <div class="bg-surface-base absolute inset-0" />
    </magic-drawer>
  </div>
</template>

<script lang="ts" setup>
import { onBeforeUnmount, ref } from 'vue'
import { MButton } from 'mirror-compat'
import { useMagicDrawer } from '@maas/vue-equipment/plugins/MagicDrawer'
import { useMagicEmitter } from '@maas/vue-equipment/plugins/MagicEmitter'

import type {
  MagicDrawerSnapPoint,
  MagicDrawerWillSnapToPayload,
} from '@maas/vue-equipment/plugins/MagicDrawer'

const id = 'magic-drawer-will-snap-to-demo'
const snapPoints: MagicDrawerSnapPoint[] = [0.25, 0.5, 0.75, 1]

const drawerApi = useMagicDrawer(id)
const emitter = useMagicEmitter()

// The pending snap target during drag — null when not dragging
const willSnapTo = ref<MagicDrawerSnapPoint | null>(null)
// The snap point the drawer has settled on
const settledSnapPoint = ref<MagicDrawerSnapPoint>(snapPoints[0]!)

function dotClass(point: MagicDrawerSnapPoint) {
  if (willSnapTo.value === point) {
    return 'bg-warning-solid'
  }
  if (settledSnapPoint.value === point) {
    return 'bg-success-solid'
  }
  return 'bg-surface-base'
}

const log = ref<MagicDrawerWillSnapToPayload[]>([])

function onWillSnapTo(payload: MagicDrawerWillSnapToPayload) {
  if (payload.id !== id) {
    return
  }
  willSnapTo.value = payload.snapPoint
  log.value.unshift(payload)
  if (log.value.length > 5) {
    log.value.length = 5
  }
}

function isDrawerSnapPoint(v: unknown): v is MagicDrawerSnapPoint {
  return typeof v === 'number' || typeof v === 'string'
}

function onAfterSnap(payload: { id: string; snapPoint: unknown }) {
  if (payload.id !== id) {
    return
  }
  if (isDrawerSnapPoint(payload.snapPoint)) {
    settledSnapPoint.value = payload.snapPoint
  }
  willSnapTo.value = null
}

emitter.on('willSnapTo', onWillSnapTo)
emitter.on('afterSnap', onAfterSnap)

onBeforeUnmount(() => {
  emitter.off('willSnapTo', onWillSnapTo)
  emitter.off('afterSnap', onAfterSnap)
})
</script>

<style>
[data-id='magic-drawer-will-snap-to-demo'] {
  --magic-drawer-height: 100svh;
}
</style>