@citizenplane/pimp 18.9.21 → 18.9.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.9.21",
+  "version": "18.9.23",
   "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,6 +55,11 @@ 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
@@ -123,7 +135,7 @@ defineExpose({
 
 [data-vsbs-sheet] {
   overflow: hidden;
-  max-height: calc(100% - 65px) !important;
+  max-height: var(--cp-bottomsheet-max-height, calc(100% - 65px - env(safe-area-inset-top, 0px))) !important;
 }
 
 [data-vsbs-scroll] {
@@ -132,6 +144,10 @@ defineExpose({
   overscroll-behavior: unset !important;
 }
 
+[data-vsbs-footer] {
+  padding-bottom: var(--cp-bottomsheet-footer-padding-bottom, calc(16px + env(safe-area-inset-bottom, 0px))) !important;
+}
+
 [data-vsbs-footer]:is(.vsbs-enter-active) {
   pointer-events: none;
 }

package/src/components/CpDynamicDialog.vue

@@ -42,12 +42,17 @@ import { Breakpoints } from '@/constants/layout'
 
 
 interface Props {
+  animationDuration?: number
   breakpoint?: number
   class?: string
+  expandOnContentDrag?: boolean
+  halfAndExpand?: boolean
   isClosableOnClickOutside?: boolean
   maxWidth?: number | undefined
   preventClose?: boolean
+  snapPoints?: Array<number | `${number}%`>
   subtitle?: string
+  swipeCloseThreshold?: string
   title?: string
 }
 
@@ -83,7 +88,12 @@ const dynamicComponentProps = computed(() => {
       contentClass: props.class,
       canBackdropClose: !props.preventClose,
       canSwipeClose: !props.preventClose,
+      expandOnContentDrag: props.expandOnContentDrag,
       preventClose: props.preventClose,
+      halfAndExpand: props.halfAndExpand,
+      snapPoints: props.snapPoints,
+      swipeCloseThreshold: props.swipeCloseThreshold,
+      animationDuration: props.animationDuration,
     }
   }
 

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>