@citizenplane/pimp 9.14.0 → 9.14.1

package/package.json

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

package/src/components/CpTable.vue

@@ -17,10 +17,10 @@
         <thead class="cpTable__header">
           <tr class="cpTable__row cpTable__row--header">
             <th
-              v-for="column in visibleColumns"
+              v-for="(column, index) in visibleColumns"
               :key="column.id"
               class="cpTable__column"
-              :style="getColumnStyle(column)"
+              :style="getColumnStyle(column, index)"
             >
               <slot :column="column" name="column">
                 {{ column.name }}
@@ -200,6 +200,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>()
 
+const FULL_WIDTH_SIZE = 1000
+
 const LoaderColor = '#5341F9'
 
 const uniqueId = useId()
@@ -262,10 +264,25 @@ const getVisibleColumnsIds = () => {
   return normalizedColumns.value.filter(({ isHidden, isProtected }) => !isHidden || isProtected).map(({ id }) => id)
 }
 
+const fullWidthColumn = computed(() => normalizedColumns.value.find(({ isFull }) => isFull))
+
+const hasAFullWidthColumnVisible = computed(() => {
+  if (!fullWidthColumn.value) return false
+  return columnsModel.value.includes(fullWidthColumn.value.id)
+})
+
+const isLastColumn = (idx: number) => idx === visibleColumns.value.length - 1
+
 const columnsModel = ref<string[]>(getVisibleColumnsIds())
 
 watch(columnsModel, (newColumnsModel) => {
-  const newColumns = normalizedColumns.value.map((col) => ({ ...col, isHidden: !newColumnsModel.includes(col.id) }))
+  const newColumns = normalizedColumns.value.map((col) => {
+    return {
+      ...col,
+      isHidden: !newColumnsModel.includes(col.id),
+    }
+  })
+
   emit('onColumnsChanged', newColumns)
 })
 
@@ -481,12 +498,18 @@ const resetScrollPosition = () => {
   }
 }
 
-const getColumnStyle = (columnPayload: CpTableColumnObject) => {
-  const formattedWidth = columnPayload?.width && `${columnPayload.width}px`
+const getColumnStyle = (column: CpTableColumnObject, idx: number) => {
+  let width: string | undefined
+
+  if (!hasAFullWidthColumnVisible.value && isLastColumn(idx)) {
+    width = `${FULL_WIDTH_SIZE}px`
+  } else if (column.width) {
+    width = `${column.width}px`
+  }
 
   return {
-    width: formattedWidth,
-    textAlign: columnPayload.textAlign,
+    width,
+    textAlign: column.textAlign,
   }
 }
 

package/src/constants/CpTableColumn.ts

@@ -1,5 +1,6 @@
 export interface CpTableColumnObject {
   id: string
+  isFull?: boolean
   isHidden?: boolean
   isProtected?: boolean
   name: string

package/src/stories/CpTable.stories.ts

@@ -14,6 +14,7 @@ const meta = {
     backgrounds: {
       default: 'dark',
     },
+    layout: 'padded',
   },
   decorators: [
     () => ({ template: '<div style="padding: 20px; border-radius: 8px; background-color: #fff;"><story/></div>' }),
@@ -66,26 +67,13 @@ export const Default: Story = {
 }
 
 export const EnableColumnEdition: Story = {
-  args: {
-    ...Default.args,
-    columns: [
-      { id: 'name', name: 'Name' },
-      { id: 'age', name: 'Age' },
-      { id: 'email', name: 'Email' },
-      { id: 'status', name: 'Status' },
-    ],
-    enableColumnEdition: true,
-  },
-}
-
-export const EnableColumnEditionWithDefault: Story = {
   args: {
     ...Default.args,
     columns: [
       { id: 'name', name: 'Name', isProtected: true },
       { id: 'age', name: 'Age', isHidden: true, isProtected: true },
       { id: 'email', name: 'Email', isHidden: false },
-      { id: 'status', name: 'Status' },
+      { id: 'status', name: 'Status', isFull: true },
     ],
     enableColumnEdition: true,
   },