@citizenplane/pimp 16.2.0 → 16.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "16.2.0",
+  "version": "16.2.2",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpTable.vue

@@ -20,6 +20,7 @@
               v-for="column in visibleColumns"
               :key="column.id"
               class="cpTable__column"
+              :class="getColumnClasses(column.id)"
               :style="getColumnStyle(column)"
             >
               <slot :column="column" name="column">
@@ -49,12 +50,11 @@
           >
             <slot name="row" :row="rowData">
               <td
-                v-for="(cellValue, cellKey, cellIndex) in rowData"
+                v-for="(cellValue, cellKey) in rowData"
                 :key="`${cellKey}_${rowIndex}`"
                 class="cpTable__cell"
                 :class="getCellClasses(cellKey)"
                 :colspan="getColspan(cellKey)"
-                :style="getCellStyle(cellKey, cellIndex)"
               >
                 <slot :cell="cellValue" :name="cellKey">
                   <span v-if="isFullWidthRow(rowData)">{{ cellValue }}</span>
@@ -136,6 +136,7 @@ import CpTableEmptyState from '@/components/CpTableEmptyState.vue'
 import { camelize, decamelize } from '@/helpers/string'
 
 import { PAGINATION_FORMATS, RESERVED_KEYS, VISIBLE_ROWS_MAX } from '@/constants'
+import { capitalizeFirstLetter } from '@/helpers'
 
 interface Emits {
   (evt: 'onRowClick', data: Record<string, unknown>): void
@@ -544,6 +545,8 @@ const resetScrollPosition = () => {
   }
 }
 
+const getColumnClasses = (columnId: string) => `cpTable__column--is${capitalizeFirstLetter(columnId)}`
+
 const getColumnStyle = (column: CpTableColumnObject) => {
   let width: string | undefined
 
@@ -555,17 +558,7 @@ const getColumnStyle = (column: CpTableColumnObject) => {
     width = `${column.width}px`
   }
 
-  return {
-    width,
-    textAlign: column.textAlign,
-  }
-}
-
-const getCellStyle = (cellKey: RESERVED_KEYS, cellIndex: number) => {
-  if (isFullWidthCell(cellKey)) return null
-  return {
-    textAlign: visibleColumns.value[cellIndex]?.textAlign,
-  }
+  return { width }
 }
 
 const getRowClasses = (rowData: Record<string, unknown>, rowIndex: number) => {

package/src/components/CpTableColumnEditor.vue

@@ -2,6 +2,7 @@
   <div class="cpTableColumnEditor">
     <v-dropdown
       v-model:shown="isDropdownVisible"
+      :aria-id="ariaId"
       :delay="0"
       placement="bottom-end"
       popper-class="cpTableColumnEditor__dropdown"
@@ -80,7 +81,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useTemplateRef } from 'vue'
+import { computed, ref, useTemplateRef, useId } from 'vue'
 
 import { CpTableColumnObject } from '@/constants/CpTableColumn'
 
@@ -93,6 +94,8 @@ interface Props {
 
 const props = defineProps<Props>()
 
+const ariaId = useId()
+
 const isDropdownVisible = ref(false)
 const selectedColumnIds = defineModel<string[]>()
 

package/src/constants/CpTableColumn.ts

@@ -4,7 +4,6 @@ export interface CpTableColumnObject {
   isHidden?: boolean
   isProtected?: boolean
   name: string
-  textAlign?: 'left' | 'center' | 'right'
   width?: number
 }