@citizenplane/pimp 18.9.20 → 18.9.22

package/package.json

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

package/src/components/CpBottomSheet.vue

@@ -4,9 +4,10 @@
     :can-backdrop-close="canBackdropClose"
     :can-swipe-close="canSwipeClose"
     :duration="animationDuration"
-    expand-on-content-drag
+    :expand-on-content-drag="expandOnContentDrag"
     :swipe-close-threshold="swipeCloseThreshold"
     teleport-defer
+    :snap-points="resolvedSnapPoints"
     @closed="onBottomSheetClosed"
     @opened="onBottomSheetOpened"
   >
@@ -24,7 +25,7 @@
 
 <script setup lang="ts">
 import VueBottomSheet from '@douxcode/vue-spring-bottom-sheet'
-import { useTemplateRef, watch } from 'vue'
+import { computed, useTemplateRef, watch } from 'vue'
 
 interface Emits {
   (e: 'close' | 'open'): void
@@ -34,13 +35,19 @@ interface Props {
   animationDuration?: number
   canBackdropClose?: boolean
   canSwipeClose?: boolean
+  expandOnContentDrag?: boolean
+  halfAndExpand?: boolean
   preventClose?: boolean
+  snapPoints?: Array<number | `${number}%`>
   swipeCloseThreshold?: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   animationDuration: 300,
-  swipeCloseThreshold: '20%',
+  expandOnContentDrag: true,
+  halfAndExpand: false,
+  snapPoints: () => [],
+  swipeCloseThreshold: '40%',
 })
 
 const emit = defineEmits<Emits>()
@@ -48,7 +55,21 @@ const emit = defineEmits<Emits>()
 const bottomSheetRef = useTemplateRef('bottomSheetRef')
 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
+})
+
+// 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 +83,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,9 +38,14 @@ 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
+  expandOnContentDrag?: boolean
+  halfAndExpand?: boolean
   isClosableOnClickOutside?: boolean
   maxWidth?: number | undefined
   preventClose?: boolean
@@ -52,7 +57,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')
 
@@ -80,7 +85,9 @@ const dynamicComponentProps = computed(() => {
       contentClass: props.class,
       canBackdropClose: !props.preventClose,
       canSwipeClose: !props.preventClose,
+      expandOnContentDrag: props.expandOnContentDrag,
       preventClose: props.preventClose,
+      halfAndExpand: props.halfAndExpand,
     }
   }
 
@@ -94,6 +101,11 @@ const dynamicComponentProps = computed(() => {
   }
 })
 
+const onDynamicComponentClosed = () => {
+  isVisibleModel.value = false
+  emit('close')
+}
+
 const openBottomSheet = async () => {
   await nextTick()
 

package/src/stories/CpBottomSheet.stories.ts

@@ -66,6 +66,30 @@ export const Default: Story = {
       >
         <template #header><strong>Header slot</strong></template>
         <p>This is the default slot content. You can put any content here.</p>
+        <p>This is the default slot content. You can put any content here.</p>
+        <p>This is the default slot content. You can put any content here.</p>
+        <p>This is the default slot content. You can put any content here.</p>
+        <p>This is the default slot content. You can put any content here.</p>
+        <p>This is the default slot content. You can put any content here.</p>
+        <p>This is the default slot content. You can put any content here.</p>
+        <p>This is the default slot content. You can put any content here.</p>
+        <p>This is the default slot content. You can put any content here.</p>
+        <p>This is the default slot content. You can put any content here.</p>
+        <p>This is the default slot content. You can put any content here.</p>
+        <p>This is the default slot content. You can put any content here.</p>
+        <p>This is the default slot content. You can put any content here.</p>
+        <p>This is the default slot content. You can put any content here.</p>
+        <p>This is the default slot content. You can put any content here.</p>
+        <p>This is the default slot content. You can put any content here.</p>
+        <p>This is the default slot content. You can put any content here.</p>
+        <p>This is the default slot content. You can put any content here.</p>
+        <p>This is the default slot content. You can put any content here.</p>
+        <p>This is the default slot content. You can put any content here.</p>
+        <p>This is the default slot content. You can put any content here.</p>
+        <p>This is the default slot content. You can put any content here.</p>
+        <p>This is the default slot content. You can put any content here.</p>
+        <p>This is the default slot content. You can put any content here.</p>
+        <p>This is the default slot content. You can put any content here.</p>
         <template #footer>
           <CpButton @click="isVisible = false">Close</CpButton>
         </template>

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)',