@citizenplane/pimp 9.1.0 → 9.1.2

package/package.json

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

package/src/components/CpContextualMenu.vue

@@ -1,7 +1,7 @@
 <template>
   <context-menu ref="menu" :model="items" :pt="passThroughConfig">
     <template #item="{ item, props }">
-      <cp-menu-item v-bind="{ ...item, ...props.action }" />
+      <cp-menu-item v-bind="{ ...item, ...props.action }" @on-async-command-complete="hide" />
     </template>
   </context-menu>
 </template>

package/src/components/CpMenuItem.vue

@@ -5,7 +5,7 @@
       class="cpMenuItem__button"
       :class="dynamicClass"
       :disabled="disabled"
-      @click.stop="handleItemClick"
+      @click="handleItemClick"
     >
       <transition name="fade" :duration="100" mode="out-in">
         <span v-if="isLoading" class="cpMenuItem__loaderWrapper">
@@ -28,6 +28,7 @@ import { computed } from 'vue'
 import type { MenuItem } from 'primevue/menuitem'
 
 interface Props {
+  isAsync?: boolean
   isCritical?: boolean
   isDisabled?: boolean
   isLoading?: boolean
@@ -44,9 +45,10 @@ const props = withDefaults(defineProps<Props & Omit<MenuItem, 'class' | 'disable
   isLoading: false,
   isDisabled: false,
   isCritical: false,
+  isAsync: false,
 })
 
-const emit = defineEmits(['onItemClick'])
+const emit = defineEmits(['onItemClick', 'onAsyncCommandComplete'])
 
 const dynamicClass = computed(() => ({
   'cpMenuItem__button--reverseLabel': props.reverseLabel,
@@ -55,12 +57,18 @@ const dynamicClass = computed(() => ({
 
 const disabled = computed(() => props.isLoading || props.isDisabled)
 
-const handleItemClick = (event: Event) => {
-  if (props.command) {
-    props.command({
-      originalEvent: event,
-      item: props,
-    })
+const handleItemClick = async (event: Event) => {
+  if (!props.command) return
+
+  if (props.isAsync) {
+    // Stop the event from bubbling up to prevent menu auto close
+    event.stopPropagation()
+
+    await props.command({ originalEvent: event, item: props })
+
+    emit('onAsyncCommandComplete')
+  } else {
+    props.command({ originalEvent: event, item: props })
   }
 
   emit('onItemClick')

package/src/components/CpTable.vue

@@ -108,7 +108,12 @@
       </div>
     </div>
     <div class="cpTable__overlay" />
-    <cp-contextual-menu v-if="hasRowOptions" ref="contextualMenu" :items="contextualMenuItems" />
+    <cp-contextual-menu
+      v-if="hasRowOptions"
+      ref="contextualMenu"
+      :items="contextualMenuItems"
+      @hide="resetCurrentRowData"
+    />
   </div>
 </template>
 
@@ -152,6 +157,7 @@ interface RowOptions {
   action: (rowData: Record<string, unknown>, $event: MouseEvent) => void
   icon: string
   id: string
+  isAsync?: boolean
   isCritical?: boolean
   isDisabled?: boolean
   isLoading?: boolean
@@ -208,7 +214,9 @@ const defaultRowOption = computed<RowOptions>(() => {
     id: 'more',
     label: 'More',
     icon: 'more-vertical',
-    action: (rowData: Record<string, unknown>, $event: MouseEvent) => showContextualMenu($event),
+    action: (rowData: Record<string, unknown>, $event: MouseEvent) => {
+      handleContextMenu({ rowData, rowIndex: null }, $event)
+    },
   }
 })
 
@@ -367,17 +375,19 @@ const paginationResultsDetails = computed(() => {
 })
 
 const handleContextMenu = (
-  { rowData, rowIndex }: { rowData: Record<string, unknown>; rowIndex: number },
+  { rowData, rowIndex }: { rowData: Record<string, unknown>; rowIndex: number | null },
   event: MouseEvent,
 ) => {
   if (!hasRowOptions.value || isFullWidthRow(rowData)) return
-  currentRowData.value = getRowPayload(rowIndex)
+
+  currentRowData.value = rowIndex !== null ? getRowPayload(rowIndex) : rowData
 
   showContextualMenu(event)
 }
 
 const showContextualMenu = (event: MouseEvent) => contextualMenu.value?.show(event)
 const hideContextualMenu = () => contextualMenu.value?.hide()
+const resetCurrentRowData = () => (currentRowData.value = {})
 
 const getQuickOptionTooltip = (option: RowOptions) => (!option.isDisabled ? option.label : '')
 

package/src/stories/CpContextualMenu.stories.ts

@@ -45,11 +45,16 @@ export const Default: Story = {
           label: 'Download',
           icon: 'download',
           isLoading: isLoading.value,
-          command: () => {
+          isAsync: true,
+          command: async () => {
             isLoading.value = true
-            setTimeout(() => (isLoading.value = false), 2000)
+            await new Promise((resolve) => setTimeout(resolve, 2000))
+            isLoading.value = false
           },
         },
+        {
+          separator: true,
+        },
         {
           label: 'Delete',
           icon: 'trash-2',

package/src/stories/CpTable.stories.ts

@@ -1,3 +1,5 @@
+import { ref, computed } from 'vue'
+
 import type { Meta, StoryObj } from '@storybook/vue3'
 
 import CpTable from '@/components/CpTable.vue'
@@ -184,42 +186,52 @@ export const WithCustomRowOptions: Story = {
   args: {
     ...Default.args,
     enableRowOptions: true,
-    rowOptions: [
-      {
-        id: 'see',
-        label: 'See',
-        icon: 'eye',
-        action: () => console.log('See'),
-      },
-      {
-        id: 'edit',
-        label: 'Edit',
-        icon: 'edit-2',
-        action: (payload) => console.log('Edit', payload),
-      },
-      {
-        id: 'disable',
-        label: 'Disable',
-        icon: 'history',
-        isDisabled: true,
-        action: () => console.log('History'),
-      },
-      {
-        id: 'delete',
-        label: 'Delete',
-        icon: 'trash',
-        isCritical: true,
-        action: () => console.log('Delete'),
-      },
-    ],
   },
   render: (args) => ({
     components: { CpTable },
     setup() {
-      return { args }
+      const isEditLoading = ref(false)
+
+      const rowOptions = computed(() => [
+        {
+          id: 'see',
+          label: 'See',
+          icon: 'eye',
+          action: () => console.log('See'),
+        },
+        {
+          id: 'edit',
+          label: 'Edit',
+          icon: 'edit-2',
+          isAsync: true,
+          isLoading: isEditLoading.value,
+          action: async (payload) => {
+            isEditLoading.value = true
+            console.log('Edit', payload)
+            await new Promise((resolve) => setTimeout(resolve, 2000))
+            isEditLoading.value = false
+          },
+        },
+        {
+          id: 'disable',
+          label: 'Disable',
+          icon: 'history',
+          isDisabled: true,
+          action: () => console.log('History'),
+        },
+        {
+          id: 'delete',
+          label: 'Delete',
+          icon: 'trash',
+          isCritical: true,
+          action: () => console.log('Delete'),
+        },
+      ])
+
+      return { args, isEditLoading, rowOptions }
     },
     template: `
-        <CpTable v-bind="args">
+        <CpTable v-bind="args" :row-options="rowOptions">
           <template #status="{ cell }">
             <span :style="{
               padding: '4px 8px',