@citizenplane/pimp 9.0.1 → 9.1.0

package/package.json

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

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,14 @@
       </div>
     </div>
     <div class="cpTable__overlay" />
+    <cp-contextual-menu v-if="hasRowOptions" ref="contextualMenu" :items="contextualMenuItems" />
   </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 +125,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 +149,12 @@ 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
   isCritical?: boolean
+  isDisabled?: boolean
+  isLoading?: boolean
   label: string
 }
 
@@ -195,25 +197,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 +217,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 +366,20 @@ 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 getQuickOptionTooltip = (option: RowOptions) => (!option.isDisabled ? option.label : '')
 
 const getQuickOptionClasses = (option: RowOptions) => {
   return { 'cpTable__action--isCritical': option.isCritical }
@@ -378,16 +394,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 +510,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/CpTable.stories.ts

@@ -108,17 +108,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 +115,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,
+    },
   },
 }
 
@@ -194,26 +187,26 @@ export const WithCustomRowOptions: Story = {
     rowOptions: [
       {
         id: 'see',
-        label: 'see',
+        label: 'See',
         icon: 'eye',
         action: () => console.log('See'),
       },
       {
         id: 'edit',
-        label: 'edit',
+        label: 'Edit',
         icon: 'edit-2',
-        action: () => console.log('Edit'),
+        action: (payload) => console.log('Edit', payload),
       },
       {
         id: 'disable',
-        label: 'disable',
+        label: 'Disable',
         icon: 'history',
-        disabled: true,
+        isDisabled: true,
         action: () => console.log('History'),
       },
       {
         id: 'delete',
-        label: 'delete',
+        label: 'Delete',
         icon: 'trash',
         isCritical: true,
         action: () => console.log('Delete'),