@citizenplane/pimp 8.26.0 → 8.27.0

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

@@ -111,98 +111,109 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, computed } from 'vue'
 
+import CpTableEmptyState from '@/components/lists-and-table/CpTableEmptyState.vue'
+
 import { camelize, decamelize } from '@/helpers/string'
+
+import { PAGINATION_FORMATS, RESERVED_KEYS, VISIBLE_ROWS_MAX } from '@/constants'
 import { randomString } from '@/helpers'
 
-import CpTableEmptyState from '@/components/lists-and-table/CpTableEmptyState.vue'
+const LoaderColor = '#5341F9'
 
-import { CpTableConfig } from '@/constants'
+interface ColumnDefinition {
+  id: string
+  name: string
+  textAlign?: 'left' | 'center' | 'right'
+  width?: number
+}
 
-const LoaderColor = '#5341F9'
+interface PaginationServer {
+  activePage: number
+  total: number
+}
+
+interface Pagination {
+  enabled?: boolean
+  format?: (typeof PAGINATION_FORMATS)[keyof typeof PAGINATION_FORMATS]
+  limit?: number
+  server?: PaginationServer
+}
+
+interface RowOptions {
+  action: (payload: { rowData: Record<string, unknown>; rowIndex: number }, event: Event) => void
+  disabled?: boolean
+  icon: string
+  id: string
+  isCritical?: boolean
+  label: string
+}
+
+interface GroupByData {
+  groupBy: string
+  rows: Record<string, unknown>[]
+}
 
-const props = defineProps({
-  caption: {
-    type: String,
-    default: '',
-    required: false,
-  },
-  columns: {
-    type: Array,
-    default: () => [],
-    required: false,
-  },
-  data: {
-    type: Array,
-    required: true,
-  },
-  pagination: {
-    type: [Boolean, Object],
-    default: false,
-    required: false,
-    validator: (value) => {
-      const isLimitValid = value.limit ? value.limit <= CpTableConfig.VISIBLE_ROWS_MAX : true
-      const isFooterDetailsFormatValid = value.format
-        ? Object.values(CpTableConfig.PAGINATION_FORMATS).includes(value.format)
-        : true
-
-      return isLimitValid && isFooterDetailsFormatValid
-    },
-  },
-  areRowsClickable: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-  emptyCellPlaceholder: {
-    type: String,
-    default: 'n/a',
-    required: false,
-  },
-  noResultPlaceholder: {
-    type: String,
-    default: 'No results found',
-    required: false,
-  },
-  isLoading: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-  enableRowOptions: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-  quickOptionsLimit: {
-    type: Number,
-    default: 3,
-    required: false,
-  },
-  rowOptions: {
-    type: Array,
-    default: () => [],
-    required: false,
-  },
+interface Props {
+  areRowsClickable?: boolean
+  caption?: string
+  columns?: string[] | ColumnDefinition[]
+  data: (Record<string, unknown> | GroupByData)[]
+  emptyCellPlaceholder?: string
+  enableRowOptions?: boolean
+  isLoading?: boolean
+  noResultPlaceholder?: string
+  pagination?: Pagination
+  quickOptionsLimit?: number
+  rowOptions?: RowOptions[]
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  caption: '',
+  columns: () => [],
+  pagination: undefined,
+  areRowsClickable: false,
+  emptyCellPlaceholder: 'n/a',
+  noResultPlaceholder: 'No results found',
+  isLoading: false,
+  enableRowOptions: false,
+  quickOptionsLimit: 3,
+  rowOptions: () => [],
 })
 
-const emit = defineEmits(['onRowClick', 'onRowRightClick', 'onNextClick', 'onPreviousClick'])
+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
+}
+
+const emit = defineEmits<Emits>()
 
 const uniqueId = ref(randomString())
 const pageNumber = ref(0)
-const cpTableContainer = ref(null)
+const cpTableContainer = ref<HTMLElement | null>(null)
 
 const hasQuickOptions = computed(() => !!quickOptions.value.length)
 const hasMoreQuickActionsThanLimit = computed(() => props.rowOptions.length >= props.quickOptionsLimit)
 
-const defaultRowOptions = computed(() => {
-  if (!props.enableRowOptions || !props.rowOptions.length) return {}
+const defaultRowOptions = computed<RowOptions>(() => {
+  if (!props.enableRowOptions || !props.rowOptions.length) {
+    return {
+      id: 'default',
+      label: 'More',
+      icon: 'more-vertical',
+      action: () => {},
+    }
+  }
   return {
+    id: 'more',
     label: 'More',
     icon: 'more-vertical',
-    action: ({ rowData, rowIndex }, $event) => handleRowRightClick({ rowData, rowIndex }, $event),
+    action: ({ rowData, rowIndex }: { rowData: Record<string, unknown>; rowIndex: number }, $event: Event) =>
+      handleRowRightClick({ rowData, rowIndex }, $event),
   }
 })
 
@@ -222,7 +233,7 @@ const containerDOMElement = computed(() => cpTableContainer.value)
 const mainClasses = computed(() => ({ 'cpTable--isLoading': props.isLoading }))
 const containerClasses = computed(() => ({ 'cpTable__container--hasPagination': hasPagination.value }))
 
-const normalizedColumns = computed(() => {
+const normalizedColumns = computed<ColumnDefinition[]>(() => {
   if (!props.columns) return []
   const columns = props.columns.length ? [...props.columns] : [...columnsFromRows.value]
 
@@ -235,8 +246,8 @@ const normalizedColumns = computed(() => {
     }
 
     return {
-      id: column.id || camelize(column.name),
       ...column,
+      id: column.id || camelize(column.name),
     }
   })
 })
@@ -245,30 +256,39 @@ const numberOfColumns = computed(() => normalizedColumns.value.length)
 
 const hasGroupBy = computed(() => {
   if (!props.data.length) return false
-  return props.data.some((item) => CpTableConfig.RESERVED_KEYS.GROUP_BY in item)
+  return props.data.some((item) => RESERVED_KEYS.GROUP_BY in item)
 })
 
 const columnsFromRows = computed(() => {
   if (!props.data.length) return []
-  const firstRow = hasGroupBy.value ? props.data[0].rows[0] : props.data[0]
-  return Object.keys(firstRow)
+  const firstItem = props.data[0]
+  const firstRow = hasGroupBy.value && 'rows' in firstItem ? (firstItem as GroupByData).rows[0] : firstItem
+  return Object.keys(firstRow as Record<string, unknown>)
 })
 
 const numberOfResults = computed(() => {
-  return isServerSidePagination.value ? props.pagination.server.total : flattenedRows.value.length
+  return isServerSidePagination.value ? props.pagination?.server?.total || 0 : flattenedRows.value.length
 })
 
 const hasNoResult = computed(() => numberOfResults.value === 0)
-const rowsPerPageLimit = computed(() => props.pagination.limit || CpTableConfig.VISIBLE_ROWS_MAX)
+const rowsPerPageLimit = computed(() => {
+  if (typeof props.pagination === 'object' && props.pagination.limit) {
+    return props.pagination.limit
+  }
+  return VISIBLE_ROWS_MAX
+})
 
 const flattenedRows = computed(() => {
   if (!props.data) return []
-  if (!hasGroupBy.value) return props.data
+  if (!hasGroupBy.value) return props.data as Record<string, unknown>[]
 
-  // Transform groupBy key into a row and add it in between others
-  return props.data.reduce((flattenedRows, groupByItem) => {
-    const fullWidthRow = { [CpTableConfig.RESERVED_KEYS.GROUP_BY]: groupByItem.groupBy }
-    return [...flattenedRows, fullWidthRow, ...groupByItem.rows]
+  return props.data.reduce((flattenedRows: Record<string, unknown>[], item) => {
+    if ('groupBy' in item) {
+      const groupByItem = item as GroupByData
+      const fullWidthRow = { [RESERVED_KEYS.GROUP_BY]: groupByItem.groupBy }
+      return [...flattenedRows, fullWidthRow, ...groupByItem.rows]
+    }
+    return [...flattenedRows, item as Record<string, unknown>]
   }, [])
 })
 
@@ -286,11 +306,16 @@ const visibleRows = computed(() =>
 )
 
 const paginationState = computed(() => {
-  return typeof props.pagination === 'boolean' ? props.pagination : props.pagination.enabled
+  return typeof props.pagination === 'boolean' ? props.pagination : props.pagination?.enabled
 })
 
-const hasPagination = computed(() => paginationState.value || numberOfResults.value > CpTableConfig.VISIBLE_ROWS_MAX)
-const paginationFormat = computed(() => props.pagination?.format || CpTableConfig.PAGINATION_FORMATS.PAGES)
+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
+  }
+  return PAGINATION_FORMATS.PAGES
+})
 const hasRemainingPages = computed(() => numberOfPages.value > activePage.value)
 const isNextEnabled = computed(() => hasRemainingPages.value && !props.isLoading)
 
@@ -307,11 +332,11 @@ const activePage = computed(() => {
 })
 
 const isServerSidePagination = computed(() => {
-  if (typeof props.pagination === 'boolean') return false
+  if (!props.pagination) return false
   return 'server' in props.pagination
 })
 
-const serverActivePage = computed(() => props.pagination.server.activePage)
+const serverActivePage = computed(() => props.pagination?.server?.activePage || 0)
 const serverPagesStartIndex = computed(() => serverActivePage.value * rowsPerPageLimit.value + 1)
 const serverPagesEndIndex = computed(() => rowsPerPageLimit.value * (1 + serverActivePage.value))
 
@@ -325,7 +350,7 @@ const pageLastResultIndex = computed(() => {
 })
 
 const paginationLabel = computed(() => {
-  if (paginationFormat.value === CpTableConfig.PAGINATION_FORMATS.PAGES) {
+  if (paginationFormat.value === PAGINATION_FORMATS.PAGES) {
     const pluralizedCount = numberOfPages.value > 1 ? 'pages' : 'page'
     return `${activePage.value}/${numberOfPages.value} ${pluralizedCount}`
   }
@@ -338,22 +363,25 @@ const paginationResultsDetails = computed(() => {
   return `${formattedNumberOfResults} ${pluralizedCount}`
 })
 
-const getQuickOptionTooltip = (option) => (!option.disabled ? option.label : '')
+const getQuickOptionTooltip = (option: RowOptions) => (!option.disabled ? option.label : '')
 
-const getQuickOptionClasses = (option) => {
+const getQuickOptionClasses = (option: RowOptions) => {
   return { 'cpTable__action--isCritical': option.isCritical }
 }
 
-const getRowPayload = (rowIndex) => rawVisibleRows.value[rowIndex]
+const getRowPayload = (rowIndex: number) => rawVisibleRows.value[rowIndex]
 
-const handleRowClick = (rowData, rowIndex) => {
+const handleRowClick = (rowData: Record<string, unknown>, rowIndex: number) => {
   if (isFullWidthRow(rowData)) return
 
   const data = getRowPayload(rowIndex)
   emit('onRowClick', data)
 }
 
-const handleRowRightClick = ({ rowData, rowIndex }, event) => {
+const handleRowRightClick = (
+  { rowData, rowIndex }: { rowData: Record<string, unknown>; rowIndex: number },
+  event: Event,
+) => {
   if (isFullWidthRow(rowData)) return
 
   const data = getRowPayload(rowIndex)
@@ -375,7 +403,13 @@ const handleNavigationClick = (isNext = true) => {
   emit('onPreviousClick')
 }
 
-const normalizeRowData = ({ columns = normalizedColumns.value, rowPayload }) => {
+const normalizeRowData = ({
+  columns = normalizedColumns.value,
+  rowPayload,
+}: {
+  columns?: ColumnDefinition[]
+  rowPayload: Record<string, unknown>
+}) => {
   if (!Array.isArray(rowPayload)) {
     return { ...rowPayload }
   }
@@ -390,12 +424,18 @@ const normalizeRowData = ({ columns = normalizedColumns.value, rowPayload }) =>
   }, {})
 }
 
-const mapCellToColumn = ({ columns = normalizedColumns.value, rowPayload }) => {
+const mapCellToColumn = ({
+  columns = normalizedColumns.value,
+  rowPayload,
+}: {
+  columns?: ColumnDefinition[]
+  rowPayload: Record<string, unknown>
+}) => {
   if (isFullWidthRow(rowPayload)) return rowPayload
   // Bind column id with each row key
   // and replace row missing keys with the emptyCellPlaceholder value
   return columns.reduce((finalRow, currentColumn) => {
-    const correspondingColumn = currentColumn?.id || currentColumn
+    const correspondingColumn = currentColumn.id
     const correspondingValue = rowPayload[correspondingColumn] || props.emptyCellPlaceholder
     const cellValue = { [correspondingColumn]: correspondingValue }
 
@@ -411,9 +451,13 @@ const decreaseOffset = () => {
   if (isPreviousEnabled.value) pageNumber.value--
 }
 
-const resetScrollPosition = () => (containerDOMElement.value.scrollTop = 0)
+const resetScrollPosition = () => {
+  if (containerDOMElement.value) {
+    containerDOMElement.value.scrollTop = 0
+  }
+}
 
-const getColumnStyle = (columnPayload) => {
+const getColumnStyle = (columnPayload: ColumnDefinition) => {
   const formattedWidth = columnPayload?.width && `${columnPayload.width}px`
 
   return {
@@ -422,14 +466,14 @@ const getColumnStyle = (columnPayload) => {
   }
 }
 
-const getCellStyle = (cellKey, columnIndex) => {
+const getCellStyle = (cellKey: RESERVED_KEYS, cellIndex: number) => {
   if (isFullWidthCell(cellKey)) return null
   return {
-    textAlign: normalizedColumns.value[columnIndex]?.textAlign,
+    textAlign: normalizedColumns.value[cellIndex]?.textAlign,
   }
 }
 
-const getRowClasses = (rowData, rowIndex) => {
+const getRowClasses = (rowData: Record<string, unknown>, rowIndex: number) => {
   return {
     'cpTable__row--isFullWidth': isFullWidthRow(rowData),
     'cpTable__row--isClickable': !isFullWidthRow(rowData) && props.areRowsClickable,
@@ -437,24 +481,26 @@ const getRowClasses = (rowData, rowIndex) => {
   }
 }
 
-const getCellClasses = (cellKey) => {
+const getCellClasses = (cellKey: RESERVED_KEYS) => {
   return { 'cpTable__cell--isFullWidth': isFullWidthCell(cellKey) }
 }
 
-const getColspan = (cellKey) => {
+const getColspan = (cellKey: RESERVED_KEYS) => {
   const numberOfColumnsValue = props.enableRowOptions ? numberOfColumns.value + 1 : numberOfColumns.value
-  return isFullWidthCell(cellKey) ? numberOfColumnsValue : null
+  return isFullWidthCell(cellKey) ? numberOfColumnsValue : undefined
 }
 
-const getTabindex = (rowData) => (isFullWidthRow(rowData) ? -1 : 0)
-
-const fullWidthCellKeys = [CpTableConfig.RESERVED_KEYS.FULL_WIDTH, CpTableConfig.RESERVED_KEYS.GROUP_BY]
+const getTabindex = (rowData: Record<string, unknown>) => (isFullWidthRow(rowData) ? -1 : 0)
 
-const isFullWidthCell = (cellKey) => fullWidthCellKeys.includes(cellKey)
-const isFullWidthRow = (rowData) => fullWidthCellKeys.some((key) => rowData[key])
+const fullWidthCellKeys = [RESERVED_KEYS.FULL_WIDTH, RESERVED_KEYS.GROUP_BY]
+const isFullWidthCell = (cellKey: RESERVED_KEYS) => fullWidthCellKeys.includes(cellKey)
+const isFullWidthRow = (rowData: Record<string, unknown>) => fullWidthCellKeys.some((key) => rowData[key])
 
-const isRowSelected = (rowIndex) => rawVisibleRows.value[rowIndex][CpTableConfig.RESERVED_KEYS.IS_SELECTED]
-const areRowOptionsEnabled = (rowData) => props.enableRowOptions && !isFullWidthRow(rowData)
+const isRowSelected = (rowIndex: number) => {
+  const row = rawVisibleRows.value[rowIndex] as Record<string, unknown>
+  return row?.[RESERVED_KEYS.IS_SELECTED] || false
+}
+const areRowOptionsEnabled = (rowData: Record<string, unknown>) => props.enableRowOptions && !isFullWidthRow(rowData)
 
 const resetPagination = () => (pageNumber.value = 0)
 
@@ -679,12 +725,17 @@ defineExpose({ resetPagination })
   @media (hover: hover) and (pointer: fine) {
     &__cell--isOptions {
       opacity: 0;
+      min-width: fn.px-to-rem(50);
       transition: opacity 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.175);
     }
 
     // Actions wrapper on desktop : displayed only if there are quick actions inside
     &__cell--isOptions:has(.cpTable__action) .cpTable__actions {
-      display: flex;
+      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);

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

@@ -10,15 +10,12 @@
   </div>
 </template>
 
-<script>
-export default {
-  props: {
-    placeholder: {
-      type: String,
-      required: true,
-    },
-  },
+<script setup lang="ts">
+interface Props {
+  placeholder: string
 }
+
+defineProps<Props>()
 </script>
 
 <style lang="scss">

package/src/components/selects/CpMultiselect.vue

@@ -67,96 +67,61 @@
   </div>
 </template>
 
-<script setup>
-import { ref, computed, onMounted } from 'vue'
-import AutoComplete from 'primevue/autocomplete'
-
+<script setup lang="ts">
 import { absolutePosition, getOuterWidth } from '@primeuix/utils/dom'
+import AutoComplete from 'primevue/autocomplete'
+import { ref, computed, onMounted } from 'vue'
 
 import BaseInputLabel from '@/components/core/BaseInputLabel.vue'
-import TransitionExpand from '@/components/helpers-utilities/TransitionExpand.vue'
 import BaseSelectClearButton from '@/components/core/BaseSelectClearButton.vue'
+import TransitionExpand from '@/components/helpers-utilities/TransitionExpand.vue'
 
 import { isEmpty } from '@/helpers/object'
 
-const props = defineProps({
-  label: {
-    type: String,
-    required: false,
-    default: '',
-  },
-  required: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  name: {
-    type: String,
-    required: false,
-    default: '',
-  },
-  placeholder: {
-    type: String,
-    required: false,
-    default: '',
-  },
-  isInvalid: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  isClearable: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  isLoading: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  multiple: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  options: {
-    type: Array,
-    required: false,
-    default: () => [],
-  },
-  optionLabel: {
-    type: String,
-    required: false,
-    default: 'name',
-  },
-  trackBy: {
-    type: String,
-    required: false,
-    default: 'id',
-  },
-  emptyMessage: {
-    type: String,
-    required: false,
-    default: 'No results found',
-  },
-  errorMessage: {
-    type: String,
-    required: false,
-    default: '',
-  },
-  modelValue: {
-    type: [Array, Object],
-    required: false,
-  },
+interface Props {
+  disabled?: boolean
+  emptyMessage?: string
+  errorMessage?: string
+  isClearable?: boolean
+  isInvalid?: boolean
+  isLoading?: boolean
+  label?: string
+  modelValue?: Record<string, unknown>[] | Record<string, unknown> | null
+  multiple?: boolean
+  name?: string
+  optionLabel?: string
+  options?: unknown[]
+  placeholder?: string
+  required?: boolean
+  trackBy?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  required: false,
+  name: '',
+  placeholder: '',
+  isInvalid: false,
+  isClearable: false,
+  isLoading: false,
+  disabled: false,
+  multiple: false,
+  options: () => [],
+  optionLabel: 'name',
+  trackBy: 'id',
+  emptyMessage: 'No results found',
+  errorMessage: '',
+  modelValue: null,
 })
 
-const emit = defineEmits(['search', 'select', 'clear'])
+interface Emits {
+  (e: 'search', query: string): void
+  (e: 'select', option: Record<string, unknown>): void
+  (e: 'clear'): void
+  (e: 'update:modelValue', value: Record<string, unknown> | Record<string, unknown>[] | null): void
+}
+
+const emit = defineEmits<Emits>()
 
 const selectModel = computed({
   get() {
@@ -183,7 +148,7 @@ const passThroughConfig = {
   loader: { class: 'cpMultiselect__hidden' },
 }
 
-const multiselect = ref(null)
+const multiselect = ref<InstanceType<typeof AutoComplete> | null>(null)
 
 const isDropdownOpen = computed(() => multiselect.value?.overlayVisible)
 
@@ -203,29 +168,33 @@ const displayClearButton = computed(() => {
   return props.isClearable && !isEmpty(selectModel.value)
 })
 
-const handleSearch = (event) => emit('search', event.query)
+const handleSearch = (event: { query: string }) => emit('search', event.query)
 const handleClear = () => (selectModel.value = null)
 
 const toggleDropdown = () => {
   if (isDropdownOpen.value) {
-    multiselect.value.hide()
+    multiselect.value?.hide()
   } else {
-    multiselect.value.show()
+    multiselect.value?.show()
   }
 }
 
-const handleUpdateModelValue = (value) => {
+const handleUpdateModelValue = (value: Record<string, unknown> | null) => {
   // Autocomplete will set the model value to the query string if not blocked
   if (!value || typeof value === 'string') {
     return
   }
 }
 
-const overrideAlignOverlay = () => (multiselect.value.alignOverlay = alignOverlay)
+const overrideAlignOverlay = () => {
+  if (multiselect.value) {
+    multiselect.value.alignOverlay = alignOverlay
+  }
+}
 
 const alignOverlay = () => {
-  const target = multiselect.value.$el
-  if (!multiselect.value.overlay || !target) return
+  const target = multiselect.value?.$el
+  if (!multiselect.value?.overlay || !target) return
 
   multiselect.value.overlay.style.width = `${getOuterWidth(target)}px`