@citizenplane/pimp 18.9.20 → 18.9.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.9.20",
+  "version": "18.9.21",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpBottomSheet.vue

@@ -48,7 +48,16 @@ const emit = defineEmits<Emits>()
 const bottomSheetRef = useTemplateRef('bottomSheetRef')
 const isVisibleModel = defineModel<boolean>()
 
+// 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 toggleBottomSheet = () => {
+  if (skipNextToggle) {
+    skipNextToggle = false
+    return
+  }
+
   if (isVisibleModel.value) {
     bottomSheetRef.value?.open()
     return
@@ -62,7 +71,18 @@ watch(isVisibleModel, () => toggleBottomSheet())
 const onBottomSheetOpened = () => emit('open')
 
 const onBottomSheetClosed = () => {
-  if (props.preventClose) return
+  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()
+    return
+  }
+
+  if (isVisibleModel.value) {
+    skipNextToggle = true
+    isVisibleModel.value = false
+  }
 
   emit('close')
 }

package/src/components/CpDynamicDialog.vue

@@ -5,7 +5,7 @@
       v-if="dynamicRenderingCondition"
       v-bind="dynamicComponentProps"
       ref="dynamicComponentRef"
-      @close="emit('close')"
+      @close="onDynamicComponentClosed"
     >
       <!-- Header slot is only for bottom sheet -->
       <template v-if="title" #header>
@@ -38,8 +38,11 @@ import CpBottomSheet from '@/components/CpBottomSheet.vue'
 import CpDialog from '@/components/CpDialog.vue'
 import CpTransitionDialog from '@/components/CpTransitionDialog.vue'
 
+import { Breakpoints } from '@/constants/layout'
+
 
 interface Props {
+  breakpoint?: number
   class?: string
   isClosableOnClickOutside?: boolean
   maxWidth?: number | undefined
@@ -52,7 +55,7 @@ const props = defineProps<Props>()
 
 const emit = defineEmits<{ (e: 'close'): void }>()
 
-const isMobile = useIsBreakpoint()
+const isMobile = useIsBreakpoint(props.breakpoint ?? Breakpoints.MOBILE)
 
 const dynamicComponentRef = useTemplateRef('dynamicComponentRef')
 
@@ -94,6 +97,11 @@ const dynamicComponentProps = computed(() => {
   }
 })
 
+const onDynamicComponentClosed = () => {
+  isVisibleModel.value = false
+  emit('close')
+}
+
 const openBottomSheet = async () => {
   await nextTick()
 

package/src/stories/CpDynamicDialog.stories.ts

@@ -43,6 +43,11 @@ const meta = {
     },
   },
   argTypes: {
+    breakpoint: {
+      control: 'number',
+      description:
+        'Viewport width (px) below which the dialog switches to a bottom sheet. Defaults to Breakpoints.MOBILE (552)',
+    },
     maxWidth: {
       control: 'number',
       description: 'Maximum width of the desktop dialog (px)',