@citizenplane/pimp 9.11.1 → 9.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "9.11.1",
+  "version": "9.12.0",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",
@@ -58,6 +58,7 @@
     "@storybook/vue3-vite": "^9.1.17",
     "@stylistic/eslint-plugin": "^5.6.1",
     "@types/feather-icons": "^4.29.4",
+    "@types/vue-tel-input": "^2.1.7",
     "@typescript-eslint/eslint-plugin": "^8.50.1",
     "@typescript-eslint/parser": "^8.50.1",
     "@vitejs/plugin-vue": "^6.0.3",

package/src/components/CpDialog.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="cpDialog">
-    <dialog ref="dialogElement" class="cpDialog__dialog" @keydown.esc.stop.prevent="onClose">
+    <dialog ref="dialogElement" class="cpDialog__dialog" @keydown.esc.stop.prevent="handleClose">
       <div class="cpDialog__overlay" />
       <main ref="dialogContainer" class="cpDialog__container" :style="dynamicStyle" @keydown.tab="trapFocus">
         <header v-if="hasHeaderSlot" class="cpDialog__header">
           <slot name="header" />
-          <button type="button" class="cpDialog__close" @click="onClose">
+          <button class="cpDialog__close" type="button" @click="handleClose">
             <cp-icon type="x" />
           </button>
         </header>
@@ -52,7 +52,7 @@ const hasHeaderSlot = computed(() => !!slots.header)
 
 const hasFooterSlot = computed(() => !!slots.footer)
 
-const onClose = () => emit('close')
+const handleClose = () => emit('close')
 const trapFocus = (event: KeyboardEvent) => handleTrapFocus(event, dialogContainer.value)
 
 const openDialog = () => dialogElement.value?.show()
@@ -120,11 +120,6 @@ $dialog-breakpoint: 550px;
     transition: opacity 250ms ease;
   }
 
-  &.dialog-leave-to &__overlay,
-  &.dialog-enter-from &__overlay {
-    opacity: 0;
-  }
-
   &__container {
     position: relative;
     display: flex;
@@ -148,12 +143,6 @@ $dialog-breakpoint: 550px;
     }
   }
 
-  &.dialog-enter-from &__container,
-  &.dialog-leave-to &__container {
-    opacity: 0;
-    transform: scale3d(0.85, 0.85, 1) translate3d(0, fn.px-to-rem(30), 0);
-  }
-
   &__header,
   &__content,
   &__footer {

package/src/components/CpTable.vue

@@ -638,6 +638,7 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
     line-height: fn.px-to-rem(16);
     font-weight: normal;
     color: colors.$neutral-dark-1;
+    background-color: colors.$neutral-light;
 
     &:first-letter {
       text-transform: capitalize;
@@ -657,6 +658,7 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
     &--isOptions {
       right: 0;
       padding: 0;
+      background-color: transparent;
     }
   }
 

package/src/components/CpTransitionDialog.vue

@@ -0,0 +1,20 @@
+<template>
+  <teleport to="body">
+    <transition name="dialog">
+      <slot />
+    </transition>
+  </teleport>
+</template>
+
+<style lang="scss">
+.dialog-leave-to dialog > div,
+.dialog-enter-from dialog > div {
+  opacity: 0;
+}
+
+.dialog-leave-to dialog main,
+.dialog-enter-from dialog main {
+  opacity: 0;
+  transform: scale3d(0.85, 0.85, 1) translate3d(0, fn.px-to-rem(30), 0);
+}
+</style>

package/src/components/index.ts

@@ -19,7 +19,6 @@ import CpContextualMenu from './CpContextualMenu.vue'
 import CpDate from './CpDate.vue'
 import CpDatepicker from './CpDatepicker.vue'
 import CpDialog from './CpDialog.vue'
-import CpDialogWrapper from './CpDialogWrapper.vue'
 import CpHeading from './CpHeading.vue'
 import CpIcon from './CpIcon.vue'
 import CpInput from './CpInput.vue'
@@ -38,6 +37,7 @@ import CpTelInput from './CpTelInput.vue'
 import CpTextarea from './CpTextarea.vue'
 import CpToaster from './CpToaster.vue'
 import CpTooltip from './CpTooltip.vue'
+import CpTransitionDialog from './CpTransitionDialog.vue'
 import IconAirline from './icons/IconAirline.vue'
 import IconCheckList from './icons/IconCheckList.vue'
 import IconCollapse from './icons/IconCollapse.vue'
@@ -56,7 +56,6 @@ const Components = {
   CpHeading,
   CpButton,
   CpButtonGroup,
-  CpDialogWrapper,
   CpDialog,
   CpDate,
   CpContextualMenu,
@@ -91,6 +90,7 @@ const Components = {
   IconCollapse,
   IconExpand,
   IconCheckList,
+  CpTransitionDialog,
   TransitionExpand,
 }
 

package/src/stories/CpDialog.stories.ts

@@ -37,7 +37,7 @@ export const Default: Story = {
     },
     template: `
       <CpButton @click="isOpen = true">Open Dialog</CpButton>
-      <CpDialogWrapper>
+      <CpTransitionDialog>
         <CpDialog v-bind="args" v-if="isOpen" @close="isOpen = false">
           <template #header>
             <h1 style="padding: 16px 24px">Header slot</h1>
@@ -48,7 +48,7 @@ export const Default: Story = {
               This is the footer slot
             </template>
         </CpDialog>
-      </CpDialogWrapper>
+      </CpTransitionDialog>
     `,
   }),
 }

package/src/components/CpDialogWrapper.vue

@@ -1,9 +0,0 @@
-<template>
-  <teleport to="body">
-    <div class="cpDialogWrapper">
-      <transition-group name="dialog">
-        <slot />
-      </transition-group>
-    </div>
-  </teleport>
-</template>