@citizenplane/pimp 18.8.3 → 18.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "18.8.3",
+  "version": "18.9.1",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",
@@ -47,6 +47,7 @@
     "unplugin-vue-components": ">=0.26.0"
   },
   "dependencies": {
+    "@douxcode/vue-spring-bottom-sheet": "^3.2.0",
     "@vueuse/core": "^14.3.0",
     "feather-icons": "^4.29.2",
     "floating-vue": "^5.2.2",

package/src/components/CpBottomSheet.vue

@@ -0,0 +1,123 @@
+<template>
+  <vue-bottom-sheet
+    ref="bottomSheetRef"
+    :can-backdrop-close="canBackdropClose"
+    :can-swipe-close="canSwipeClose"
+    :duration="animationDuration"
+    expand-on-content-drag
+    :swipe-close-threshold="swipeCloseThreshold"
+    teleport-defer
+    @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>
+</template>
+
+<script setup lang="ts">
+import VueBottomSheet from '@douxcode/vue-spring-bottom-sheet'
+import { useTemplateRef, watch } from 'vue'
+
+interface Emits {
+  (e: 'close' | 'open'): void
+}
+
+interface Props {
+  animationDuration?: number
+  canBackdropClose?: boolean
+  canSwipeClose?: boolean
+  preventClose?: boolean
+  swipeCloseThreshold?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  animationDuration: 300,
+  swipeCloseThreshold: '20%',
+})
+
+const emit = defineEmits<Emits>()
+
+const bottomSheetRef = useTemplateRef('bottomSheetRef')
+const isVisibleModel = defineModel<boolean>()
+
+const toggleBottomSheet = () => {
+  if (isVisibleModel.value) {
+    bottomSheetRef.value?.open()
+    return
+  }
+
+  bottomSheetRef.value?.close()
+}
+
+watch(isVisibleModel, () => toggleBottomSheet())
+
+const onBottomSheetOpened = () => emit('open')
+
+const onBottomSheetClosed = () => {
+  if (props.preventClose) return
+
+  emit('close')
+}
+
+defineExpose({
+  open: () => bottomSheetRef.value?.open(),
+  close: () => bottomSheetRef.value?.close(),
+})
+</script>
+
+<style lang="scss">
+.cpBottomSheet {
+  &__content {
+    @extend %u-layout-box-padding;
+  }
+}
+
+/* Package style overrides */
+
+/* stylelint-disable */
+
+:root {
+  --vsbs-backdrop-bg: var(--cp-background-overlay);
+}
+
+[data-vsbs-container] {
+  z-index: 5 !important;
+}
+
+[data-vsbs-content] {
+  // override default padding for vue-bottom sheet content div
+  padding: 0 !important;
+}
+
+[data-vsbs-sheet] [data-vsbs-header] {
+  padding: var(--cp-spacing-2xl) var(--cp-spacing-xl) var(--cp-spacing-xl) var(--cp-spacing-xl);
+}
+
+[data-vsbs-sheet] {
+  overflow: hidden;
+  max-height: calc(100% - 65px) !important;
+}
+
+[data-vsbs-scroll] {
+  -webkit-overflow-scrolling: touch;
+  touch-action: pan-y;
+  overscroll-behavior: unset !important;
+}
+
+[data-vsbs-footer]:is(.vsbs-enter-active) {
+  pointer-events: none;
+}
+
+[data-vsbs-footer]:has(div:empty) {
+  display: none;
+}
+/* stylelint-enable */
+</style>

package/src/components/CpDynamicDialog.vue

@@ -0,0 +1,121 @@
+<template>
+  <component :is="dynamicWrapperComponent">
+    <component
+      :is="dynamicComponent"
+      v-if="dynamicRenderingCondition"
+      v-bind="dynamicComponentProps"
+      ref="dynamicComponentRef"
+      @close="emit('close')"
+    >
+      <!-- Header slot is only for bottom sheet -->
+      <template v-if="title" #header>
+        <slot name="title">
+          <cp-heading class="cpDynamicDialog__title" heading-level="h3">{{ title }}</cp-heading>
+        </slot>
+      </template>
+      <template v-if="title" #title>
+        <slot name="title" />
+      </template>
+      <template v-if="subtitle" #subtitle>
+        <slot name="subtitle" />
+      </template>
+      <template #default>
+        <slot />
+      </template>
+      <template #footer>
+        <slot name="footer" />
+      </template>
+    </component>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, nextTick, resolveComponent, useTemplateRef, watch } from 'vue'
+
+import { useIsBreakpoint } from '@/composables/useIsBreakpoint'
+
+interface Props {
+  class?: string
+  isClosableOnClickOutside?: boolean
+  maxWidth?: number | undefined
+  preventClose?: boolean
+  subtitle?: string
+  title?: string
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{ (e: 'close'): void }>()
+
+const isMobile = useIsBreakpoint()
+
+const dynamicComponentRef = useTemplateRef('dynamicComponentRef')
+
+const isVisibleModel = defineModel<boolean>('isVisible', { default: false })
+
+const ClientOnly = resolveComponent('client-only')
+const CpTransitionDialog = resolveComponent('cp-transition-dialog')
+const CpBottomSheet = resolveComponent('cp-bottom-sheet')
+const CpDialog = resolveComponent('cp-dialog')
+
+const dynamicWrapperComponent = computed(() => {
+  if (isMobile.value) return ClientOnly
+  return CpTransitionDialog
+})
+
+const dynamicComponent = computed(() => {
+  if (isMobile.value) return CpBottomSheet
+  return CpDialog
+})
+
+const dynamicRenderingCondition = computed(() => {
+  if (isMobile.value) return true
+  return isVisibleModel.value
+})
+
+const dynamicComponentProps = computed(() => {
+  if (isMobile.value) {
+    return {
+      modelValue: isVisibleModel.value,
+      contentClass: props.class,
+      canBackdropClose: !props.preventClose,
+      canSwipeClose: !props.preventClose,
+      preventClose: props.preventClose,
+    }
+  }
+
+  return {
+    maxWidth: props.maxWidth,
+    class: props.class,
+    preventClose: props.preventClose,
+    isClosableOnClickOutside: props.isClosableOnClickOutside,
+    ...(props.title && { title: props.title }),
+    ...(props.subtitle && { subtitle: props.subtitle }),
+  }
+})
+
+const openBottomSheet = async () => {
+  await nextTick()
+
+  if (!dynamicComponentRef.value) return
+
+  // @ts-expect-error - open does not exist on type {}
+  dynamicComponentRef.value?.open()
+}
+
+watch(isMobile, () => {
+  if (isMobile.value && isVisibleModel.value) {
+    openBottomSheet()
+  }
+})
+</script>
+
+<style lang="scss">
+.cpDynamicDialog {
+  &__title {
+    font-size: var(--cp-text-size-2xl);
+    font-weight: 700;
+    line-height: var(--cp-line-height-2xl);
+  }
+}
+</style>

package/src/components/index.ts

@@ -1,6 +1,7 @@
 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'
 
@@ -19,6 +20,7 @@ import CpAccordionGroup from './CpAccordionGroup.vue'
 import CpAirlineLogo from './CpAirlineLogo.vue'
 import CpAlert from './CpAlert.vue'
 import CpBadge from './CpBadge.vue'
+import CpBottomSheet from './CpBottomSheet.vue'
 import CpButton from './CpButton.vue'
 import CpButtonGroup from './CpButtonGroup.vue'
 import CpButtonToggle from './CpButtonToggle.vue'
@@ -28,6 +30,7 @@ import CpContextualMenu from './CpContextualMenu.vue'
 import CpDate from './CpDate.vue'
 import CpDatepicker from './CpDatepicker.vue'
 import CpDialog from './CpDialog.vue'
+import CpDynamicDialog from './CpDynamicDialog.vue'
 import CpHeading from './CpHeading.vue'
 import CpIcon from './CpIcon.vue'
 import CpInput from './CpInput.vue'
@@ -76,11 +79,13 @@ const Components = {
   CpToast,
   CpButtonToggle,
   CpBadge,
+  CpBottomSheet,
   CpTabs,
   CpHeading,
   CpButton,
   CpButtonGroup,
   CpDialog,
+  CpDynamicDialog,
   CpDate,
   CpContextualMenu,
   CpMenu,
@@ -153,6 +158,7 @@ export {
   CpAirlineLogo,
   CpAlert,
   CpBadge,
+  CpBottomSheet,
   CpButton,
   CpButtonGroup,
   CpButtonToggle,
@@ -163,6 +169,7 @@ export {
   CpDate,
   CpDatepicker,
   CpDialog,
+  CpDynamicDialog,
   CpHeading,
   CpIcon,
   CpInput,

package/src/stories/CpBottomSheet.stories.ts

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+
+import CpBottomSheet from '@/components/CpBottomSheet.vue'
+
+const meta = {
+  title: 'Organisms/CpBottomSheet',
+  component: CpBottomSheet,
+  globals: {
+    viewport: { value: 'mobile1', isRotated: false },
+  },
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    animationDuration: {
+      control: 'number',
+      description: 'Animation duration in milliseconds',
+    },
+    canBackdropClose: {
+      control: 'boolean',
+      description: 'Allow closing by tapping the backdrop',
+    },
+    canSwipeClose: {
+      control: 'boolean',
+      description: 'Enable swipe-to-close gesture',
+    },
+    preventClose: {
+      control: 'boolean',
+      description: 'Prevent the sheet from emitting close when dismissed',
+    },
+    swipeCloseThreshold: {
+      control: 'text',
+      description: 'Translation threshold after which the sheet closes (px or %)',
+    },
+    onClose: { action: 'close' },
+    onOpen: { action: 'open' },
+  },
+} satisfies Meta<typeof CpBottomSheet>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Default bottom sheet featuring header, body and footer slots.
+ * Use the controls to experiment with each prop in isolation.
+ */
+export const Default: Story = {
+  args: {
+    animationDuration: 300,
+    canBackdropClose: true,
+    canSwipeClose: true,
+    swipeCloseThreshold: '20%',
+  },
+  render: (args) => ({
+    setup() {
+      const isVisible = ref(false)
+      return { args, isVisible }
+    },
+    template: `
+      <CpButton @click="isVisible = true">Open Bottom Sheet</CpButton>
+      <CpBottomSheet
+        v-bind="args"
+        v-model="isVisible"
+        @close="isVisible = false"
+      >
+        <template #header><strong>Header slot</strong></template>
+        <p>This is the default slot content. You can put any content here.</p>
+        <template #footer>
+          <CpButton @click="isVisible = false">Close</CpButton>
+        </template>
+      </CpBottomSheet>
+    `,
+  }),
+}
+
+/**
+ * Disable backdrop tap to close — the sheet can only be dismissed
+ * programmatically or via swipe (when enabled).
+ */
+export const NoBackdropClose: Story = {
+  args: {
+    canBackdropClose: false,
+  },
+  render: (args) => ({
+    setup() {
+      const isVisible = ref(false)
+      return { args, isVisible }
+    },
+    template: `
+      <CpButton @click="isVisible = true">Open Bottom Sheet</CpButton>
+      <CpBottomSheet
+        v-bind="args"
+        v-model="isVisible"
+        @close="isVisible = false"
+      >
+        <template #header><strong>No backdrop close</strong></template>
+        <p>Tap the backdrop — the sheet stays open. Use the button below or swipe down to dismiss.</p>
+        <template #footer>
+          <CpButton @click="isVisible = false">Close</CpButton>
+        </template>
+      </CpBottomSheet>
+    `,
+  }),
+}
+
+/**
+ * Disable swipe-to-close — the sheet can only be dismissed
+ * by tapping the backdrop or using a close action.
+ */
+export const NoSwipeClose: Story = {
+  args: {
+    canSwipeClose: false,
+  },
+  render: (args) => ({
+    setup() {
+      const isVisible = ref(false)
+      return { args, isVisible }
+    },
+    template: `
+      <CpButton @click="isVisible = true">Open Bottom Sheet</CpButton>
+      <CpBottomSheet
+        v-bind="args"
+        v-model="isVisible"
+        @close="isVisible = false"
+      >
+        <template #header><strong>No swipe close</strong></template>
+        <p>Swipe down will not dismiss this sheet. Use the backdrop or the button below.</p>
+        <template #footer>
+          <CpButton @click="isVisible = false">Close</CpButton>
+        </template>
+      </CpBottomSheet>
+    `,
+  }),
+}

package/src/stories/CpDynamicDialog.stories.ts

@@ -0,0 +1,132 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { getCurrentInstance, ref } from 'vue'
+
+import CpDynamicDialog from '@/components/CpDynamicDialog.vue'
+
+const ClientOnlyStub = { template: '<slot />' }
+
+const registerClientOnly = () => {
+  const instance = getCurrentInstance()
+  instance?.appContext.app.component('client-only', ClientOnlyStub)
+}
+
+const STORY_TRIGGER_LAYOUT =
+  'display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 60vh; width: 100%;'
+
+const createStoryRender = (content: string) => (args: Record<string, unknown>) => ({
+  components: { CpDynamicDialog },
+  setup() {
+    registerClientOnly()
+    const isVisible = ref(false)
+    return { args, isVisible }
+  },
+  template: `
+    <div style="${STORY_TRIGGER_LAYOUT}">
+      <CpButton @click="isVisible = true">Open Dynamic Dialog</CpButton>
+      <p style="margin-top: 8px; text-align: center;">Resize me</p>
+    </div>
+    <CpDynamicDialog
+      v-bind="args"
+      v-model:is-visible="isVisible"
+      @close="isVisible = false"
+    >
+      ${content}
+      <template #footer>
+        <CpButton @click="isVisible = false">Close</CpButton>
+      </template>
+    </CpDynamicDialog>
+  `,
+})
+
+const meta = {
+  title: 'Organisms/CpDynamicDialog',
+  component: CpDynamicDialog,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Responsive dialog wrapper that renders `CpDialog` inside `CpTransitionDialog` on desktop and `CpBottomSheet` on mobile viewports. Visibility is controlled with `v-model:is-visible`.',
+      },
+    },
+  },
+  argTypes: {
+    maxWidth: {
+      control: 'number',
+      description: 'Maximum width of the desktop dialog (px)',
+    },
+    isClosableOnClickOutside: {
+      control: 'boolean',
+      description: 'Allow closing the desktop dialog by clicking the backdrop',
+    },
+    preventClose: {
+      control: 'boolean',
+      description: 'Prevent dismiss actions from emitting close',
+    },
+    title: {
+      control: 'text',
+      description: 'Title passed as a prop (desktop) or rendered in the bottom sheet header (mobile)',
+    },
+    subtitle: {
+      control: 'text',
+      description: 'Subtitle passed as a prop on desktop',
+    },
+    onClose: { action: 'close' },
+  },
+} satisfies Meta<typeof CpDynamicDialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/**
+ * Desktop viewport — opens a centered dialog with title, subtitle, body and footer slots.
+ */
+export const Default: Story = {
+  args: {
+    maxWidth: 600,
+    title: 'Dialog title',
+    subtitle: 'Dialog subtitle',
+  },
+  render: createStoryRender('<p>This is the default slot content. You can put any content here.</p>'),
+}
+
+/**
+ * Desktop viewport — the same API renders a dialog instead of a bottom sheet.
+ */
+export const Desktop: Story = {
+  args: {
+    maxWidth: 600,
+    title: 'Dialog title',
+    subtitle: 'Dialog subtitle',
+  },
+  globals: {
+    viewport: { value: 'tablet', isRotated: false },
+  },
+  render: createStoryRender('<p>On desktop viewports, the dynamic dialog renders as a centered dialog.</p>'),
+}
+
+/**
+ * Mobile viewport — the same API renders a bottom sheet instead of a dialog.
+ */
+export const Mobile: Story = {
+  args: {
+    title: 'Bottom sheet title',
+  },
+  globals: {
+    viewport: { value: 'mobile1', isRotated: false },
+  },
+  render: createStoryRender('<p>On mobile viewports, the dynamic dialog becomes a bottom sheet.</p>'),
+}
+
+/**
+ * Prevent the dialog or bottom sheet from being closed by the user.
+ */
+export const PreventClose: Story = {
+  args: {
+    maxWidth: 600,
+    title: 'Dialog title',
+    subtitle: 'Dialog subtitle',
+    preventClose: true,
+  },
+  render: createStoryRender('<p>Dismiss actions are blocked — use the button below to close programmatically.</p>'),
+}