@citizenplane/pimp 10.0.2 → 10.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "10.0.2",
+  "version": "10.0.4",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",
@@ -39,15 +39,14 @@
     "maska": "^3.1.1",
     "modern-normalize": "^3.0.1",
     "primevue": "^4.5.4",
-    "vue": "^3.5.26",
+    "vue": "^3.5.27",
     "vue-bind-once": "^0.2.1",
     "vue-tel-input": "^9.5.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.5",
-    "@chromatic-com/storybook": "^4.1.3",
-    "@commitlint/cli": "^20.2.0",
-    "@commitlint/config-conventional": "^20.2.0",
+    "@babel/core": "^7.28.6",
+    "@commitlint/cli": "^20.3.1",
+    "@commitlint/config-conventional": "^20.3.1",
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.39.2",
     "@storybook/addon-onboarding": "^9.1.17",
@@ -55,14 +54,14 @@
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/vue3": "^9.1.17",
     "@storybook/vue3-vite": "^9.1.17",
-    "@stylistic/eslint-plugin": "^5.6.1",
+    "@stylistic/eslint-plugin": "^5.7.1",
     "@types/feather-icons": "^4.29.4",
     "@types/vue-tel-input": "^2.1.7",
-    "@typescript-eslint/eslint-plugin": "^8.50.1",
-    "@typescript-eslint/parser": "^8.50.1",
+    "@typescript-eslint/eslint-plugin": "^8.54.0",
+    "@typescript-eslint/parser": "^8.54.0",
     "@vitejs/plugin-vue": "^6.0.3",
-    "@vitest/browser": "^3.2.4",
-    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/browser": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
     "@vue/babel-preset-app": "^5.0.8",
     "@vue/test-utils": "^2.4.6",
     "@vue/vue3-jest": "^29.2.6",
@@ -71,24 +70,24 @@
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-perfectionist": "^5.1.0",
-    "eslint-plugin-prettier": "^5.5.3",
+    "eslint-plugin-perfectionist": "^5.4.0",
+    "eslint-plugin-prettier": "^5.5.5",
     "eslint-plugin-storybook": "^9.1.17",
-    "eslint-plugin-vue": "^10.6.2",
-    "globals": "^16.5.0",
+    "eslint-plugin-vue": "^10.7.0",
+    "globals": "^17.2.0",
     "husky": "^9.1.7",
     "jest": "~29.7.0",
     "jest-environment-jsdom": "^30.2.0",
     "lint-staged": "^16.2.7",
-    "playwright": "^1.57.0",
-    "prettier": "^3.7.4",
-    "sass": "~1.97.1",
+    "playwright": "^1.58.0",
+    "prettier": "^3.8.1",
+    "sass": "~1.97.3",
     "sass-loader": "^16.0.6",
     "storybook": "^9.1.17",
     "ts-jest": "^29.4.6",
-    "typescript-eslint": "^8.50.1",
-    "vite": "^7.3.0",
-    "vitest": "^3.1.4"
+    "typescript-eslint": "^8.54.0",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18"
   },
   "eslintConfig": {
     "extends": [

package/src/components/CpTable.vue

@@ -17,10 +17,10 @@
         <thead class="cpTable__header">
           <tr class="cpTable__row cpTable__row--header">
             <th
-              v-for="(column, index) in visibleColumns"
+              v-for="column in visibleColumns"
               :key="column.id"
               class="cpTable__column"
-              :style="getColumnStyle(column, index)"
+              :style="getColumnStyle(column)"
             >
               <slot :column="column" name="column">
                 {{ column.name }}
@@ -76,7 +76,6 @@
                     >
                       <cp-icon size="16" :type="option.icon" />
                     </button>
-
                     <button
                       class="cpTable__action cpTable__action--isDefault"
                       type="button"
@@ -266,23 +265,70 @@ const getVisibleColumnsIds = () => {
 
 const fullWidthColumn = computed(() => normalizedColumns.value.find(({ isFull }) => isFull))
 
+const fullWidthColumnIndex = computed(() => {
+  if (!fullWidthColumn.value) return -1
+  return normalizedColumns.value.findIndex((col) => col.id === fullWidthColumn.value!.id)
+})
+
+/**
+ * When the isFull column is hidden:
+ * - If there is at least one visible column before the full column in the normalized order → we keep the last of those columns at 1000px width.
+ * - If there are none (e.g. A, B, C with A full and in the first position, and we hide A) → we apply the 1000px width to the first visible column (here B).
+ */
+
+/**
+ * Last visible column before the full column in the normalized order (to apply FULL_WIDTH_SIZE when full is hidden).
+ */
+const columnBeforeFullWidthId = computed(() => {
+  if (fullWidthColumnIndex.value <= 0) return null
+
+  const maxIndex = fullWidthColumnIndex.value
+
+  const visibleColumnsWithIndex = columnsModel.value
+    .map((id) => ({ id, index: normalizedColumns.value.findIndex((col) => col.id === id) }))
+    .filter(({ index }) => index >= 0 && index < maxIndex)
+
+  const bestColumnBeforeFullWidth = visibleColumnsWithIndex.reduce<{ id: string; index: number } | null>(
+    (acc, curr) => (curr.index > (acc?.index || -1) ? curr : acc),
+    null,
+  )
+
+  return bestColumnBeforeFullWidth?.id || null
+})
+
+/**
+ * First visible column in the normalized order (fallback when the full column is hidden and no visible column precedes it).
+ */
+const firstVisibleColumnId = computed(() => {
+  const visibleWithIndex = columnsModel.value
+    .map((id) => ({ id, index: normalizedColumns.value.findIndex((col) => col.id === id) }))
+    .filter(({ index }) => index >= 0)
+
+  const firstVisibleColumn = visibleWithIndex.reduce<{ id: string; index: number } | null>(
+    (acc, curr) => (curr.index < (acc?.index || Infinity) ? curr : acc),
+    null,
+  )
+  return firstVisibleColumn?.id || null
+})
+
+/**
+ * Column that receives FULL_WIDTH_SIZE when the isFull column is hidden (last visible before full, or first visible if none precedes full).
+ */
+const columnThatGetsFullWidthId = computed(() => columnBeforeFullWidthId.value || firstVisibleColumnId.value)
+
 const hasAFullWidthColumnVisible = computed(() => {
   if (!fullWidthColumn.value) return true
   return columnsModel.value.includes(fullWidthColumn.value.id)
 })
 
-const isLastColumn = (idx: number) => idx === visibleColumns.value.length - 1
+const isColumnThatGetsFullWidth = (column: CpTableColumnObject) => {
+  return !!(columnThatGetsFullWidthId.value && column.id === columnThatGetsFullWidthId.value)
+}
 
 const columnsModel = ref<string[]>(getVisibleColumnsIds())
 
 watch(columnsModel, (newColumnsModel) => {
-  const newColumns = normalizedColumns.value.map((col) => {
-    return {
-      ...col,
-      isHidden: !newColumnsModel.includes(col.id),
-    }
-  })
-
+  const newColumns = normalizedColumns.value.map((col) => ({ ...col, isHidden: !newColumnsModel.includes(col.id) }))
   emit('onColumnsChanged', newColumns)
 })
 
@@ -307,10 +353,9 @@ const numberOfResults = computed(() => {
 })
 
 const hasNoResult = computed(() => numberOfResults.value === 0)
+
 const rowsPerPageLimit = computed(() => {
-  if (typeof props.pagination === 'object' && props.pagination.limit) {
-    return props.pagination.limit
-  }
+  if (typeof props.pagination === 'object' && props.pagination.limit) return props.pagination.limit
   return VISIBLE_ROWS_MAX
 })
 
@@ -347,9 +392,7 @@ const paginationState = computed(() => {
 
 const hasPagination = computed(() => paginationState.value || numberOfResults.value > VISIBLE_ROWS_MAX)
 const paginationFormat = computed(() => {
-  if (typeof props.pagination === 'object' && props.pagination.format) {
-    return props.pagination.format
-  }
+  if (typeof props.pagination === 'object' && props.pagination.format) return props.pagination.format
   return PAGINATION_FORMATS.PAGES
 })
 const hasRemainingPages = computed(() => numberOfPages.value > activePage.value)
@@ -498,10 +541,10 @@ const resetScrollPosition = () => {
   }
 }
 
-const getColumnStyle = (column: CpTableColumnObject, idx: number) => {
+const getColumnStyle = (column: CpTableColumnObject) => {
   let width: string | undefined
 
-  if (!hasAFullWidthColumnVisible.value && isLastColumn(idx)) {
+  if (!hasAFullWidthColumnVisible.value && isColumnThatGetsFullWidth(column)) {
     width = `${FULL_WIDTH_SIZE}px`
   } else if (column.isFull) {
     width = `${FULL_WIDTH_SIZE}px`
@@ -707,6 +750,10 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
 
   &__columnEditor {
     padding-right: calc(sp.$space-md + fn.px-to-rem(2));
+
+    @media (hover: none) and (pointer: coarse) {
+      padding-right: sp.$space-md;
+    }
   }
 
   &__body {
@@ -804,6 +851,10 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
     }
   }
 
+  &__actions {
+    text-align: right;
+  }
+
   // On desktop devices, display options only on row focus or hover
   @media (hover: hover) and (pointer: fine) {
     &__cell--isOptions {
@@ -813,19 +864,26 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
     }
 
     // Actions wrapper on desktop : displayed only if there are quick actions inside
-    &__cell--isOptions .cpTable__actions:has(> :nth-child(2)) {
+    &__cell--isOptions .cpTable__actions {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       right: fn.px-to-rem(12);
       display: inline-flex;
       overflow: hidden;
-      border: 1px solid colors.$border-color;
       border-radius: fn.px-to-rem(8);
       background-color: colors.$neutral-light;
       box-shadow:
         0 1px 4px rgba(colors.$neutral-dark, 0.1),
         0 0 1px rgba(colors.$neutral-dark, 0.15);
+
+      &:has(.cpTable__action:only-child) {
+        right: fn.px-to-rem(15);
+      }
+    }
+
+    &__cell--isOptions .cpTable__actions:has(> :nth-child(2)) {
+      border: 1px solid colors.$border-color;
     }
 
     &__cell--isOptions .cpTable__action {

package/src/components/CpTableColumnEditor.vue

@@ -107,9 +107,11 @@ const triggerDynamicClass = computed(() => {
 
 const protectedColumns = computed(() => {
   const filteredProtectedColumns = props.columns.filter((column) => isColumnProtected(column))
+
   if (filteredProtectedColumns.length) return filteredProtectedColumns
 
   const firstColumn = props.columns[0]
+
   return [firstColumn]
 })
 
@@ -119,8 +121,8 @@ const filteredVisibleColumns = computed(() => {
   return props.columns.filter((column) => {
     const isMatchingSearch = column.name.toLowerCase().includes(searchQuery.value.toLowerCase())
     const isProtected = protectedColumns.value.some(({ id }) => id === column.id)
-
     const conditions = [isMatchingSearch, isColumnSelected(column), !isProtected]
+
     return conditions.every((condition) => condition)
   })
 })
@@ -146,11 +148,13 @@ const handleDropdownShown = () => {
   &__trigger {
     @extend %u-focus-outline;
 
+    color: colors.$neutral-dark-1;
     border-radius: fn.px-to-rem(8);
 
     &--isOpen,
     &:hover,
     &:focus-within {
+      color: colors.$neutral-dark;
       background-color: colors.$neutral-dark-5;
     }
   }

package/src/stories/CpTable.stories.ts

@@ -27,11 +27,11 @@ type Story = StoryObj<typeof meta>
 const sampleColumns = ['name', 'age', 'email', 'status']
 
 const sampleData = [
-  { name: 'John Doe', age: 30, email: 'john@example.com', status: 'Active' },
-  { name: 'Jane Smith', age: 25, email: 'jane@example.com', status: 'Inactive' },
-  { name: 'Bob Johnson', age: 35, email: 'bob@example.com', status: 'Active' },
-  { name: 'Alice Brown', age: 28, email: 'alice@example.com', status: 'Active' },
-  { name: 'Charlie Wilson', age: 42, email: 'charlie@example.com', status: 'Inactive' },
+  { name: 'John Doe', age: 30, email: 'john@example.com', status: 'Active', date: '2026-01-01' },
+  { name: 'Jane Smith', age: 25, email: 'jane@example.com', status: 'Inactive', date: '2026-01-02' },
+  { name: 'Bob Johnson', age: 35, email: 'bob@example.com', status: 'Active', date: '2026-01-03' },
+  { name: 'Alice Brown', age: 28, email: 'alice@example.com', status: 'Active', date: '2026-01-04' },
+  { name: 'Charlie Wilson', age: 42, email: 'charlie@example.com', status: 'Inactive', date: '2026-01-05' },
 ]
 
 export const Default: Story = {
@@ -70,10 +70,11 @@ export const EnableColumnEdition: Story = {
   args: {
     ...Default.args,
     columns: [
-      { id: 'name', name: 'Name', isProtected: true },
-      { id: 'age', name: 'Age', isHidden: true, isProtected: true },
+      { id: 'name', name: 'Name', isProtected: false },
+      { id: 'age', name: 'Age', isHidden: false, isProtected: false, isFull: true },
       { id: 'email', name: 'Email', isHidden: false },
-      { id: 'status', name: 'Status', isFull: true },
+      { id: 'status', name: 'Status', isFull: false },
+      { id: 'date', name: 'Date', isHidden: false, isProtected: true },
     ],
     enableColumnEdition: true,
   },
@@ -222,6 +223,7 @@ export const WithOnlyDefaultAction: Story = {
   args: {
     ...Default.args,
     enableRowOptions: true,
+    enableColumnEdition: true,
     quickOptionsLimit: 0,
   },
   render: (args) => ({