@citizenplane/pimp 18.13.5 → 18.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.13.5",
+  "version": "18.14.0",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",
@@ -46,8 +46,8 @@
     "unplugin-vue-components": ">=0.26.0"
   },
   "dependencies": {
-    "@douxcode/vue-spring-bottom-sheet": "3.2.0",
     "@vueuse/core": "14.3.0",
+    "@vueuse/gesture": "2.0.0",
     "feather-icons": "4.29.2",
     "floating-vue": "5.2.2",
     "luxon": "3.7.2",

package/src/assets/css/easings.css

@@ -1,6 +1,29 @@
 :root {
   --cp-easing-elastic: cubic-bezier(0.34, 1.66, 0.64, 1);
   --cp-easing-elastic-soft: cubic-bezier(0.34, 1.2, 0.64, 1);
+  --cp-easing-elastic-strong: linear(
+    0,
+    0.0802,
+    0.2537,
+    0.4497,
+    0.6291,
+    0.774,
+    0.8805,
+    0.9521,
+    0.9955,
+    1.0183,
+    1.0273,
+    1.0279,
+    1.0242,
+    1.0189,
+    1.0134,
+    1.0087,
+    1.005,
+    1.0024,
+    1.0008,
+    0.9998,
+    1
+  );
   --cp-easing-ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
   --cp-easing-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
 }

package/src/components/CpBottomSheet.vue

@@ -1,31 +1,49 @@
 <template>
-  <vue-bottom-sheet
-    ref="bottomSheetRef"
-    :can-backdrop-close="canBackdropClose"
-    :can-swipe-close="canSwipeClose"
-    :duration="animationDuration"
-    :expand-on-content-drag="expandOnContentDrag"
-    :swipe-close-threshold="swipeCloseThreshold"
-    teleport-defer
-    :snap-points="resolvedSnapPoints"
-    @closed="onBottomSheetClosed"
-    @opened="onBottomSheetOpened"
-  >
-    <template #header>
-      <slot name="header" />
-    </template>
-    <main class="cpBottomSheet__content" tabindex="0">
-      <slot />
-    </main>
-    <template #footer>
-      <slot name="footer" />
-    </template>
-  </vue-bottom-sheet>
+  <teleport :to="teleportTarget">
+    <div
+      v-if="isMounted"
+      aria-hidden="true"
+      class="cpBottomSheet__backdrop"
+      :style="backdropStyle"
+      @click="onBackdropClick"
+    />
+    <div
+      v-if="isMounted"
+      ref="sheetRef"
+      v-bind="$attrs"
+      aria-modal="true"
+      class="cpBottomSheet"
+      role="dialog"
+      :style="sheetStyle"
+      tabindex="-1"
+      @keydown.esc.stop="onSheetEscapeKeydown"
+      @keydown.tab="onSheetTabKeydown"
+    >
+      <header ref="headerRef" v-drag="onHandleDrag" class="cpBottomSheet__header">
+        <slot name="header" />
+      </header>
+      <div ref="scrollRef" v-drag="onContentDrag" class="cpBottomSheet__scroll" @touchmove="onScrollTouchMove">
+        <main ref="contentRef" class="cpBottomSheet__content" :class="contentClass" tabindex="0">
+          <slot />
+        </main>
+      </div>
+      <footer ref="footerRef" v-drag="onHandleDrag" class="cpBottomSheet__footer">
+        <slot name="footer" />
+      </footer>
+    </div>
+  </teleport>
 </template>
 
 <script setup lang="ts">
-import VueBottomSheet from '@douxcode/vue-spring-bottom-sheet'
-import { computed, useTemplateRef, watch } from 'vue'
+import { defaultDocument, defaultWindow, useEventListener } from '@vueuse/core'
+import { dragDirective } from '@vueuse/gesture'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
+
+import { useBottomSheetDrag } from '@/composables/useBottomSheetDrag'
+
+import { handleTrapFocus } from '@/helpers/dom'
+
+type SheetState = 'closed' | 'closing' | 'open' | 'opening'
 
 interface Emits {
   (e: 'close' | 'open'): void
@@ -35,125 +53,298 @@ interface Props {
   animationDuration?: number
   canBackdropClose?: boolean
   canSwipeClose?: boolean
+  contentClass?: string
   expandOnContentDrag?: boolean
   halfAndExpand?: boolean
   preventClose?: boolean
   snapPoints?: Array<number | `${number}%`>
   swipeCloseThreshold?: string
+  teleportTo?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  animationDuration: 300,
+  animationDuration: 600,
+  canBackdropClose: true,
+  canSwipeClose: true,
   expandOnContentDrag: true,
   halfAndExpand: false,
   snapPoints: () => [],
   swipeCloseThreshold: '40%',
+  teleportTo: '#teleports',
 })
 
 const emit = defineEmits<Emits>()
 
-const bottomSheetRef = useTemplateRef('bottomSheetRef')
+defineOptions({ inheritAttrs: false })
+
+const vDrag = dragDirective()
+
+const EXIT_DURATION_RATIO = 1 / 3
+const BACKDROP_FADE_DURATION = 300
+
 const isVisibleModel = defineModel<boolean>()
 
-const resolvedSnapPoints = computed((): Array<number | `${number}%`> | undefined => {
-  if (props.snapPoints?.length) return props.snapPoints
-  return props.halfAndExpand ? ([`${50}%`, `${100}%`] as Array<number | `${number}%`>) : undefined
+const sheetRef = useTemplateRef<HTMLElement>('sheetRef')
+const headerRef = useTemplateRef<HTMLElement>('headerRef')
+const contentRef = useTemplateRef<HTMLElement>('contentRef')
+const footerRef = useTemplateRef<HTMLElement>('footerRef')
+const scrollRef = useTemplateRef<HTMLElement>('scrollRef')
+
+const state = ref<SheetState>('closed')
+const keyboardInset = ref(0)
+
+const isMounted = computed(() => state.value !== 'closed')
+
+const {
+  height,
+  isDragging,
+  measureNaturalHeight,
+  onContentDrag,
+  onHandleDrag,
+  onScrollTouchMove,
+  reset: resetDrag,
+  snapToSmallest,
+  translateY,
+  windowHeight,
+} = useBottomSheetDrag(props, {
+  contentRef,
+  footerRef,
+  headerRef,
+  onDismiss: () => dismissSheet(),
+  scrollRef,
 })
 
-// Set right before syncing a self-close down to the model, so the resulting
-// watch trigger doesn't re-issue a close() the underlying sheet already ran.
-let skipNextToggle = false
+const teleportTarget = computed(() => {
+  if (!defaultDocument) return props.teleportTo
+  return defaultDocument.querySelector(props.teleportTo) ? props.teleportTo : 'body'
+})
 
-const toggleBottomSheet = () => {
-  if (skipNextToggle) {
-    skipNextToggle = false
-    return
+const exitDuration = computed(() => Math.round(props.animationDuration * EXIT_DURATION_RATIO))
+
+const backdropStyle = computed(() => {
+  const fadeIn = `opacity ${BACKDROP_FADE_DURATION}ms ease-out`
+  const fadeOut = `opacity ${exitDuration.value}ms var(--cp-bottomsheet-exit)`
+
+  return {
+    opacity: state.value === 'open' ? 1 : 0,
+    transition: state.value === 'closing' ? fadeOut : fadeIn,
   }
+})
 
-  if (isVisibleModel.value) {
-    bottomSheetRef.value?.open()
-    return
+const sheetStyle = computed(() => {
+  const spring = `${props.animationDuration}ms var(--cp-easing-elastic-strong)`
+  const exit = `${exitDuration.value}ms var(--cp-bottomsheet-exit)`
+  const timing = state.value === 'closing' ? exit : spring
+
+  return {
+    height: height.value === null ? undefined : `${Math.min(height.value + keyboardInset.value, windowHeight.value)}px`,
+    paddingBottom: `${keyboardInset.value}px`,
+    transform: state.value === 'open' ? `translate3d(0, ${translateY.value}px, 0)` : 'translate3d(0, 100%, 0)',
+    transition: isDragging.value ? 'none' : `transform ${timing}, height ${timing}`,
   }
+})
 
-  bottomSheetRef.value?.close()
-}
+let animationTimer: ReturnType<typeof setTimeout> | undefined
 
-watch(isVisibleModel, () => toggleBottomSheet())
+const scheduleAfterAnimation = (duration: number, onDone: () => void) => {
+  clearTimeout(animationTimer)
+  animationTimer = setTimeout(onDone, duration)
+}
 
-const onBottomSheetOpened = () => emit('open')
+const updateKeyboardInset = () => {
+  const viewport = defaultWindow?.visualViewport
 
-const onBottomSheetClosed = () => {
-  if (props.preventClose) {
-    // The underlying sheet already closed itself (e.g. Escape key, which it
-    // never gates behind canBackdropClose/canSwipeClose) despite preventClose:
-    // reopen it so the visual state matches the model we never touched.
-    if (isVisibleModel.value) bottomSheetRef.value?.open()
+  if (!viewport || !isMounted.value) {
+    keyboardInset.value = 0
     return
   }
 
-  if (isVisibleModel.value) {
-    skipNextToggle = true
-    isVisibleModel.value = false
-  }
+  const overlap = (defaultWindow?.innerHeight ?? 0) - viewport.height - viewport.offsetTop
 
-  emit('close')
+  keyboardInset.value = Math.round(Math.max(0, overlap))
 }
 
-defineExpose({
-  open: () => bottomSheetRef.value?.open(),
-  close: () => bottomSheetRef.value?.close(),
-})
-</script>
+let previouslyFocusedElement: HTMLElement | null = null
 
-<style lang="scss">
-.cpBottomSheet {
-  &__content {
-    @extend %u-layout-box-padding;
-  }
+const focusSheet = () => {
+  previouslyFocusedElement = (defaultDocument?.activeElement as HTMLElement | null) ?? null
+  sheetRef.value?.focus({ preventScroll: true })
 }
 
-/* Package style overrides */
-
-/* stylelint-disable */
+const restoreFocus = () => {
+  const element = previouslyFocusedElement
+  previouslyFocusedElement = null
 
-:root {
-  --vsbs-backdrop-bg: var(--cp-background-overlay);
+  if (element?.isConnected) element.focus({ preventScroll: true })
 }
 
-[data-vsbs-container] {
-  z-index: 5 !important;
-}
+const openSheet = async () => {
+  if (state.value === 'opening' || state.value === 'open') return
 
-[data-vsbs-content] {
-  // override default padding for vue-bottom sheet content div
-  padding: 0 !important;
-}
+  clearTimeout(animationTimer)
+  state.value = 'opening'
+
+  await nextTick()
+  if (state.value !== 'opening') return
 
-[data-vsbs-sheet] [data-vsbs-header] {
-  padding: var(--cp-spacing-2xl) var(--cp-spacing-xl) var(--cp-spacing-xl) var(--cp-spacing-xl);
+  measureNaturalHeight()
+  updateKeyboardInset()
+  snapToSmallest()
+  focusSheet()
+
+  state.value = 'open'
+  scheduleAfterAnimation(props.animationDuration, () => emit('open'))
 }
 
-[data-vsbs-sheet] {
-  overflow: hidden;
-  max-height: var(--cp-bottomsheet-max-height, calc(100% - 65px - env(safe-area-inset-top, 0px))) !important;
+const closeSheet = () => {
+  if (state.value === 'closed' || state.value === 'closing') return
+
+  state.value = 'closing'
+  isDragging.value = false
+  restoreFocus()
+
+  scheduleAfterAnimation(exitDuration.value, () => {
+    if (state.value !== 'closing') return
+
+    state.value = 'closed'
+    keyboardInset.value = 0
+    resetDrag()
+    emit('close')
+  })
 }
 
-[data-vsbs-scroll] {
-  -webkit-overflow-scrolling: touch;
-  touch-action: pan-y;
-  overscroll-behavior: unset !important;
+const dismissSheet = () => {
+  if (props.preventClose) return
+
+  isVisibleModel.value = false
+  closeSheet()
 }
 
-[data-vsbs-footer] {
-  padding-bottom: var(--cp-bottomsheet-footer-padding-bottom, calc(16px + env(safe-area-inset-bottom, 0px))) !important;
+const onBackdropClick = () => {
+  if (props.canBackdropClose) dismissSheet()
 }
 
-[data-vsbs-footer]:is(.vsbs-enter-active) {
-  pointer-events: none;
+const onSheetTabKeydown = (event: KeyboardEvent) => handleTrapFocus(event, sheetRef.value)
+
+const onSheetEscapeKeydown = () => {
+  if (state.value === 'open') dismissSheet()
 }
 
-[data-vsbs-footer]:has(div:empty) {
-  display: none;
+useEventListener('resize', updateKeyboardInset)
+useEventListener(() => defaultWindow?.visualViewport, ['resize', 'scroll'], updateKeyboardInset)
+
+watch(isVisibleModel, (isVisible) => (isVisible ? openSheet() : closeSheet()))
+
+onMounted(() => {
+  if (isVisibleModel.value) openSheet()
+})
+
+onBeforeUnmount(() => clearTimeout(animationTimer))
+
+defineExpose({
+  open: () => {
+    isVisibleModel.value = true
+    openSheet()
+  },
+  close: () => {
+    isVisibleModel.value = false
+    closeSheet()
+  },
+})
+</script>
+
+<style lang="scss">
+$sheet-border-radius: var(--cp-radius-xl);
+$sheet-divider-color: rgba(46, 59, 66, 12.5%);
+
+.cpBottomSheet {
+  &,
+  &__backdrop {
+    --cp-bottomsheet-exit: cubic-bezier(0.4, 0, 1, 1);
+  }
+
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  overflow: hidden;
+  width: 100%;
+  max-width: fn.px-to-rem(640);
+  max-height: var(--cp-bottomsheet-max-height, calc(100% - 32px - env(safe-area-inset-top, 0px)));
+  box-sizing: border-box;
+  flex-direction: column;
+  background-color: var(--cp-background-primary);
+  border-top-left-radius: $sheet-border-radius;
+  border-top-right-radius: $sheet-border-radius;
+  box-shadow: 0 fn.px-to-rem(40) 0 var(--cp-background-primary);
+  margin-inline: auto;
+  pointer-events: all;
+  will-change: height, transform;
+
+  &__backdrop {
+    position: fixed;
+    background-color: var(--cp-background-overlay);
+    inset: 0;
+    pointer-events: auto;
+    user-select: none;
+    will-change: opacity;
+  }
+
+  &__header,
+  &__footer {
+    flex-shrink: 0;
+    touch-action: none;
+    user-select: none;
+  }
+
+  &__header {
+    padding: var(--cp-spacing-2xl) var(--cp-spacing-xl) var(--cp-spacing-xl) var(--cp-spacing-xl);
+    border-top-left-radius: $sheet-border-radius;
+    border-top-right-radius: $sheet-border-radius;
+    box-shadow: 0 1px 0 $sheet-divider-color;
+
+    &:empty {
+      box-shadow: none;
+    }
+
+    &::before {
+      position: absolute;
+      top: fn.px-to-rem(8);
+      left: 50%;
+      display: block;
+      width: fn.px-to-rem(36);
+      height: fn.px-to-rem(4);
+      border-radius: var(--cp-radius-xs);
+      background-color: rgba(0, 0, 0, 28%);
+      content: '';
+      transform: translate3d(-50%, 0, 0);
+    }
+  }
+
+  &__scroll {
+    flex-grow: 1;
+    -webkit-overflow-scrolling: touch;
+    overflow-y: auto;
+    touch-action: pan-y;
+  }
+
+  &__content {
+    @extend %u-layout-box-padding;
+
+    user-select: none;
+  }
+
+  &__footer {
+    flex-grow: 0;
+    padding: var(--cp-spacing-xl);
+    padding-bottom: var(--cp-bottomsheet-footer-padding-bottom, calc(16px + env(safe-area-inset-bottom, 0px)));
+    box-shadow: 0 -1px 0 $sheet-divider-color;
+
+    &:empty,
+    &:has(div:empty) {
+      display: none;
+    }
+  }
 }
-/* stylelint-enable */
 </style>

package/src/components/CpSeatMapEmergencyExitDialog.vue

@@ -51,11 +51,11 @@ const isVisible = defineModel<boolean>('isVisible', { default: false })
 </script>
 
 <style lang="scss">
-html:has([data-vsbs-backdrop], .cpSeatMapEmergencyExitDialog) [data-vsbs-backdrop] {
+html:has(.cpSeatMapEmergencyExitDialog) .cpBottomSheet__backdrop {
   z-index: 1;
 }
 
-[data-vsbs-sheet]:has(.cpSeatMapEmergencyExitDialog) {
+.cpBottomSheet:has(.cpSeatMapEmergencyExitDialog) {
   z-index: 2;
 }
 

package/src/components/index.ts

@@ -1,7 +1,6 @@
 import 'vue-tel-input/vue-tel-input.css'
 import 'floating-vue/dist/style.css'
 import 'modern-normalize/modern-normalize.css'
-import '@douxcode/vue-spring-bottom-sheet/dist/style.css'
 
 import '@/assets/main.css'