@citizenplane/pimp 9.0.1 → 9.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "9.0.1",
+  "version": "9.1.1",
   "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

@@ -37,7 +37,7 @@
             :class="getRowClasses(rowData, rowIndex)"
             :tabindex="getTabindex(rowData)"
             @click="handleRowClick(rowData, rowIndex)"
-            @click.right="handleRowRightClick({ rowData, rowIndex }, $event)"
+            @contextmenu.prevent="handleContextMenu({ rowData, rowIndex }, $event)"
             @keydown.enter="handleRowClick(rowData, rowIndex)"
           >
             <slot name="row" :row="rowData">
@@ -65,8 +65,8 @@
                         type="button"
                         class="cpTable__action"
                         :class="getQuickOptionClasses(option)"
-                        :disabled="option.disabled"
-                        @click.stop="option.action({ rowData, rowIndex }, $event)"
+                        :disabled="option.isDisabled"
+                        @click.stop="($event) => option.action(rowData, $event)"
                       >
                         <cp-icon :type="option.icon" size="16" />
                       </button>
@@ -74,7 +74,7 @@
                     <button
                       type="button"
                       class="cpTable__defaultAction"
-                      @click.stop="handleRowRightClick({ rowData, rowIndex }, $event)"
+                      @click.stop="handleContextMenu({ rowData, rowIndex }, $event)"
                     >
                       <cp-icon type="more-vertical" size="16" />
                     </button>
@@ -108,12 +108,19 @@
       </div>
     </div>
     <div class="cpTable__overlay" />
+    <cp-contextual-menu
+      v-if="hasRowOptions"
+      ref="contextualMenu"
+      :items="contextualMenuItems"
+      @hide="resetCurrentRowData"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 
+import CpContextualMenu from '@/components/CpContextualMenu.vue'
 import CpTableEmptyState from '@/components/CpTableEmptyState.vue'
 
 import { camelize, decamelize } from '@/helpers/string'
@@ -123,7 +130,6 @@ import { randomString } from '@/helpers'
 
 interface Emits {
   (e: 'onRowClick', data: Record<string, unknown>): void
-  (e: 'onRowRightClick', payload: { data: Record<string, unknown>; event: Event }): void
   (e: 'onNextClick'): void
   (e: 'onPreviousClick'): void
 }
@@ -148,11 +154,13 @@ interface Pagination {
 }
 
 interface RowOptions {
-  action: (payload: { rowData: Record<string, unknown>; rowIndex: number }, event: Event) => void
-  disabled?: boolean
+  action: (rowData: Record<string, unknown>, $event: MouseEvent) => void
   icon: string
   id: string
+  isAsync?: boolean
   isCritical?: boolean
+  isDisabled?: boolean
+  isLoading?: boolean
   label: string
 }
 
@@ -195,25 +203,18 @@ const LoaderColor = '#5341F9'
 const uniqueId = ref(randomString())
 const pageNumber = ref(0)
 const cpTableContainer = ref<HTMLElement | null>(null)
+const contextualMenu = ref<InstanceType<typeof CpContextualMenu>>()
 
 const hasQuickOptions = computed(() => !!quickOptions.value.length)
+const hasRowOptions = computed(() => props.enableRowOptions && props.rowOptions.length)
 const hasMoreQuickActionsThanLimit = computed(() => props.rowOptions.length >= props.quickOptionsLimit)
 
-const defaultRowOptions = computed<RowOptions>(() => {
-  if (!props.enableRowOptions || !props.rowOptions.length) {
-    return {
-      id: 'default',
-      label: 'More',
-      icon: 'more-vertical',
-      action: () => {},
-    }
-  }
+const defaultRowOption = computed<RowOptions>(() => {
   return {
     id: 'more',
     label: 'More',
     icon: 'more-vertical',
-    action: ({ rowData, rowIndex }: { rowData: Record<string, unknown>; rowIndex: number }, $event: Event) =>
-      handleRowRightClick({ rowData, rowIndex }, $event),
+    action: (rowData: Record<string, unknown>, $event: MouseEvent) => showContextualMenu($event),
   }
 })
 
@@ -222,10 +223,18 @@ const quickOptions = computed(() => {
 
   if (hasMoreQuickActionsThanLimit.value) {
     const slicedOptions = props.rowOptions.slice(0, props.quickOptionsLimit)
-    return [...slicedOptions, defaultRowOptions.value]
+    return [...slicedOptions, defaultRowOption.value]
   }
 
-  return [...props.rowOptions, defaultRowOptions.value]
+  return [...props.rowOptions, defaultRowOption.value]
+})
+
+const currentRowData = ref<Record<string, unknown>>({})
+const contextualMenuItems = computed(() => {
+  return props.rowOptions.map((option) => ({
+    ...option,
+    command: ({ originalEvent }: { originalEvent: MouseEvent }) => option.action(currentRowData.value, originalEvent),
+  }))
 })
 
 const containerDOMElement = computed(() => cpTableContainer.value)
@@ -363,7 +372,21 @@ const paginationResultsDetails = computed(() => {
   return `${formattedNumberOfResults} ${pluralizedCount}`
 })
 
-const getQuickOptionTooltip = (option: RowOptions) => (!option.disabled ? option.label : '')
+const handleContextMenu = (
+  { rowData, rowIndex }: { rowData: Record<string, unknown>; rowIndex: number },
+  event: MouseEvent,
+) => {
+  if (!hasRowOptions.value || isFullWidthRow(rowData)) return
+  currentRowData.value = getRowPayload(rowIndex)
+
+  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 : '')
 
 const getQuickOptionClasses = (option: RowOptions) => {
   return { 'cpTable__action--isCritical': option.isCritical }
@@ -378,16 +401,6 @@ const handleRowClick = (rowData: Record<string, unknown>, rowIndex: number) => {
   emit('onRowClick', data)
 }
 
-const handleRowRightClick = (
-  { rowData, rowIndex }: { rowData: Record<string, unknown>; rowIndex: number },
-  event: Event,
-) => {
-  if (isFullWidthRow(rowData)) return
-
-  const data = getRowPayload(rowIndex)
-  emit('onRowRightClick', { data, event })
-}
-
 const handleNavigationClick = (isNext = true) => {
   resetScrollPosition()
 
@@ -504,7 +517,7 @@ const areRowOptionsEnabled = (rowData: Record<string, unknown>) => props.enableR
 
 const resetPagination = () => (pageNumber.value = 0)
 
-defineExpose({ resetPagination })
+defineExpose({ hideContextualMenu, resetPagination })
 </script>
 
 <style lang="scss">

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'
@@ -108,17 +110,6 @@ export const Default: Story = {
   }),
 }
 
-export const WithPagination: Story = {
-  args: {
-    ...Default.args,
-    pagination: {
-      enabled: true,
-      limit: 3,
-      format: PAGINATION_FORMATS.PAGES,
-    },
-  },
-}
-
 export const ClickableRows: Story = {
   args: {
     ...Default.args,
@@ -126,24 +117,28 @@ export const ClickableRows: Story = {
   },
 }
 
-export const WithRowOptions: Story = {
+export const Loading: Story = {
   args: {
     ...Default.args,
-    enableRowOptions: true,
+    isLoading: true,
   },
 }
 
-export const Loading: Story = {
+export const Empty: Story = {
   args: {
     ...Default.args,
-    isLoading: true,
+    data: [],
   },
 }
 
-export const Empty: Story = {
+export const WithPagination: Story = {
   args: {
     ...Default.args,
-    data: [],
+    pagination: {
+      enabled: true,
+      limit: 3,
+      format: PAGINATION_FORMATS.PAGES,
+    },
   },
 }
 
@@ -191,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: () => console.log('Edit'),
-      },
-      {
-        id: 'disable',
-        label: 'disable',
-        icon: 'history',
-        disabled: 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',