@citizenplane/pimp 8.17.1 → 8.18.0

package/package.json

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

package/src/components/icons/IconGroupBy.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+  >
+    <path
+      d="M7.58963 9.74602H16.6177M7.58963 14.2598H16.6177M6.71393 21H17.4941C19.4878 21 21.104 19.3838 21.104 17.3901V6.60993C21.104 4.61622 19.4878 3 17.4941 3H6.71393C4.72022 3 3.104 4.61622 3.104 6.60993V17.3901C3.104 19.3838 4.72023 21 6.71393 21Z"
+    />
+  </svg>
+</template>

package/src/components/index.js

@@ -60,6 +60,7 @@ import IconAirline from './icons/IconAirline.vue'
 import IconOta from './icons/IconOta.vue'
 import IconSupplier from './icons/IconSupplier.vue'
 import IconThirdParty from './icons/IconThirdParty.vue'
+import IconGroupBy from './icons/IconGroupBy.vue'
 
 // Helpers and Utilities
 import TransitionExpand from './helpers-utilities/TransitionExpand.vue'
@@ -98,6 +99,7 @@ const Components = {
   IconSupplier,
   IconThirdParty,
   IconTooltip,
+  IconGroupBy,
   TransitionExpand,
 }
 

package/src/components/lists-and-table/CpTable.vue

@@ -214,7 +214,7 @@ const flattenedRows = computed(() => {
 
   // Transform groupBy key into a row and add it in between others
   return props.data.reduce((flattenedRows, groupByItem) => {
-    const fullWidthRow = { [CpTableConfig.RESERVED_KEYS.FULL_WIDTH]: groupByItem.groupBy }
+    const fullWidthRow = { [CpTableConfig.RESERVED_KEYS.GROUP_BY]: groupByItem.groupBy }
     return [...flattenedRows, fullWidthRow, ...groupByItem.rows]
   }, [])
 })
@@ -362,7 +362,7 @@ const getColumnStyle = (columnPayload) => {
 }
 
 const getCellStyle = (cellKey, columnIndex) => {
-  if (cellKey === CpTableConfig.RESERVED_KEYS.FULL_WIDTH) return null
+  if (isFullWidthCell(cellKey)) return null
   return {
     textAlign: normalizedColumns.value[columnIndex]?.textAlign,
   }
@@ -377,16 +377,21 @@ const getRowClasses = (rowData, rowIndex) => {
 }
 
 const getCellClasses = (cellKey) => {
-  return { 'cpTable__cell--isFullWidth': cellKey === CpTableConfig.RESERVED_KEYS.FULL_WIDTH }
+  return { 'cpTable__cell--isFullWidth': isFullWidthCell(cellKey) }
 }
 
 const getColspan = (cellKey) => {
   const numberOfColumnsValue = props.enableRowOptions ? numberOfColumns.value + 1 : numberOfColumns.value
-  return cellKey === CpTableConfig.RESERVED_KEYS.FULL_WIDTH ? numberOfColumnsValue : null
+  return isFullWidthCell(cellKey) ? numberOfColumnsValue : null
 }
 
 const getTabindex = (rowData) => (isFullWidthRow(rowData) ? -1 : 0)
-const isFullWidthRow = (rowData) => CpTableConfig.RESERVED_KEYS.FULL_WIDTH in rowData
+
+const fullWidthCellKeys = [CpTableConfig.RESERVED_KEYS.FULL_WIDTH, CpTableConfig.RESERVED_KEYS.GROUP_BY]
+
+const isFullWidthCell = (cellKey) => fullWidthCellKeys.includes(cellKey)
+const isFullWidthRow = (rowData) => fullWidthCellKeys.some((key) => rowData[key])
+
 const isRowSelected = (rowIndex) => rawVisibleRows.value[rowIndex][CpTableConfig.RESERVED_KEYS.IS_SELECTED]
 const areRowOptionsEnabled = (rowData) => props.enableRowOptions && !isFullWidthRow(rowData)
 

package/src/stories/CpTable.stories.ts

@@ -152,6 +152,28 @@ export const WithGroupBy: Story = {
       },
     ],
   },
+  render: (args) => ({
+    components: { CpTable },
+    setup() {
+      return { args }
+    },
+    template: `
+        <CpTable v-bind="args">
+          <template #groupBy="{ cell }">
+            #groupBy slot
+            <span :style="{
+              padding: '4px 8px',
+              borderRadius: '4px',
+              fontSize: '12px',
+              backgroundColor: 'blue',
+              color: 'white'
+            }">
+              {{ cell }}
+            </span>
+          </template>
+        </CpTable>
+    `,
+  }),
 }
 
 export const WithCustomSlots: Story = {