@citizenplane/pimp 12.0.2 → 12.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "12.0.2",
+  "version": "12.0.3",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpDialog.vue

@@ -8,7 +8,7 @@
       class="cpDialog__dialog"
       @keydown.esc.stop.prevent="handleClose"
     >
-      <div aria-hidden="true" class="cpDialog__overlay" />
+      <div aria-hidden="true" class="cpDialog__overlay" :class="overlayDynamicClass" @click="handleOverlayClick" />
       <main ref="dialogContainer" class="cpDialog__container" :style="dynamicStyle" @keydown.tab="trapFocus">
         <header class="cpDialog__header">
           <div v-if="hasTitleOrSubtitle" class="cpDialog__headerTexts">
@@ -44,6 +44,7 @@ import { computed, ref, useSlots, onMounted, nextTick, onBeforeUnmount, useId }
 import { getKeyboardFocusableElements, handleTrapFocus } from '@/helpers/dom'
 
 interface Props {
+  isClosableOnClickOutside?: boolean
   maxWidth?: number
   subtitle?: string
   title?: string
@@ -57,6 +58,7 @@ const props = withDefaults(defineProps<Props>(), {
   maxWidth: 600,
   title: '',
   subtitle: '',
+  isClosableOnClickOutside: false,
 })
 
 const emit = defineEmits<Emits>()
@@ -74,6 +76,10 @@ const dialogContainer = ref<HTMLElement | null>(null)
 
 const dynamicStyle = computed(() => ({ maxWidth: `${props.maxWidth}px` }))
 
+const overlayDynamicClass = computed(() => ({
+  'cpDialog__overlay--isClosableOnClickOutside': props.isClosableOnClickOutside,
+}))
+
 const hasTitleSlot = computed(() => !!slots.title)
 const hasTitle = computed(() => !!props.title || hasTitleSlot.value)
 const hasSubtitleSlot = computed(() => !!slots.subtitle)
@@ -96,6 +102,11 @@ const focusOnFirstFocusableElement = () => {
   focusableElements[0].focus()
 }
 
+const handleOverlayClick = () => {
+  if (!props.isClosableOnClickOutside) return
+  handleClose()
+}
+
 onMounted(() => {
   openDialog()
   nextTick(() => focusOnFirstFocusableElement())
@@ -146,11 +157,18 @@ $dialog-breakpoint: 550px;
     inset: 0;
     pointer-events: none;
     transition: opacity 250ms ease;
+
+    &--isClosableOnClickOutside {
+      pointer-events: auto;
+      z-index: 0;
+      cursor: pointer;
+    }
   }
 
   &__container {
     position: relative;
     display: flex;
+    z-index: 2;
     overflow: hidden;
     width: 100%;
     max-height: 100%;

package/src/stories/CpDialog.stories.ts

@@ -131,3 +131,30 @@ export const TitleSubtitleWithSlots: Story = {
     `,
   }),
 }
+
+export const ClosableOnClickOutside: Story = {
+  args: {
+    maxWidth: 600,
+    isClosableOnClickOutside: true,
+  },
+  render: (args) => ({
+    setup() {
+      const isOpen = ref(false)
+      return { args, isOpen }
+    },
+    template: `
+      <CpButton @click="isOpen = true">Open Dialog</CpButton>
+      <CpTransitionDialog>
+        <CpDialog v-bind="args" v-if="isOpen" @close="isOpen = false">
+          <template #title>Header slot</template>
+          <template #subtitle>Subtitle</template>
+          <p>This is the default slot content. You can put any content here.</p>
+          <template #footer>
+            <CpButton @click="isOpen = false">Cancel</CpButton>
+            This is the footer slot
+          </template>
+        </CpDialog>
+      </CpTransitionDialog>
+    `,
+  }),
+}