@citizenplane/pimp 9.10.0 → 9.11.0

package/package.json

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

package/src/assets/styles/helpers/_mixins.scss

@@ -1,5 +1,6 @@
 @use '../variables/colors' as colors;
 @use '../helpers/functions' as fn;
+@use '../variables/easings' as easings;
 
 // Popover
 @mixin popover-desktop($transitionName) {
@@ -34,6 +35,26 @@
   aspect-ratio: 1 / 1;
 }
 
+// Floating Vue
+@mixin hide-tooltip-arrow() {
+  .v-popper__arrow-container {
+    display: none;
+  }
+}
+
+@mixin v-dropdown-transition() {
+  .v-popper__wrapper {
+    transition:
+      scale 200ms easings.$easing-elastic,
+      opacity 200ms ease;
+  }
+
+  .v-popper__popper--hidden .v-popper__wrapper {
+    opacity: 0;
+    scale: 0.9;
+  }
+}
+
 // Media queries
 @mixin media-query-min($breakpoint) {
   @media (min-width: $breakpoint) {

package/src/components/CpTable.vue

@@ -17,7 +17,7 @@
         <thead class="cpTable__header">
           <tr class="cpTable__row cpTable__row--header">
             <th
-              v-for="column in normalizedColumns"
+              v-for="column in visibleColumns"
               :key="column.id"
               class="cpTable__column"
               :style="getColumnStyle(column)"
@@ -26,7 +26,10 @@
                 {{ column.name }}
               </slot>
             </th>
-            <th v-show="enableRowOptions" class="cpTable__column cpTable__column--isOptions"><span /></th>
+            <th v-show="displayOptionsColumn" class="cpTable__column cpTable__column--isOptions">
+              <cp-table-column-editor v-if="enableColumnEdition" v-model="columnsModel" :columns="normalizedColumns" />
+              <span v-show="enableRowOptions" />
+            </th>
           </tr>
         </thead>
         <tbody class="cpTable__body">
@@ -54,8 +57,8 @@
                   <template v-else>{{ cellValue }}</template>
                 </slot>
               </td>
-              <td v-show="areRowOptionsEnabled(rowData)" class="cpTable__cell cpTable__cell--isOptions">
-                <div class="cpTable__actions">
+              <td v-show="displayOptionsCell(rowData)" class="cpTable__cell cpTable__cell--isOptions">
+                <div v-if="enableRowOptions" class="cpTable__actions">
                   <slot name="row-quick-actions" :row="rowData">
                     <button
                       v-for="option in quickOptions"
@@ -119,6 +122,8 @@
 <script setup lang="ts">
 import { ref, computed, useId } from 'vue'
 
+import { CpTableColumnObject } from '@/constants/CpTableColumn'
+
 import CpContextualMenu from '@/components/CpContextualMenu.vue'
 import CpTableEmptyState from '@/components/CpTableEmptyState.vue'
 
@@ -132,13 +137,6 @@ interface Emits {
   (e: 'onPreviousClick'): void
 }
 
-interface ColumnDefinition {
-  id: string
-  name: string
-  textAlign?: 'left' | 'center' | 'right'
-  width?: number
-}
-
 interface PaginationServer {
   activePage: number
   total: number
@@ -170,9 +168,10 @@ interface GroupByData {
 interface Props {
   areRowsClickable?: boolean
   caption?: string
-  columns?: string[] | ColumnDefinition[]
+  columns?: string[] | CpTableColumnObject[]
   data: (Record<string, unknown> | GroupByData)[]
   emptyCellPlaceholder?: string
+  enableColumnEdition?: boolean
   enableRowOptions?: boolean
   isLoading?: boolean
   noResultPlaceholder?: string
@@ -190,6 +189,7 @@ const props = withDefaults(defineProps<Props>(), {
   noResultPlaceholder: 'No results found',
   isLoading: false,
   enableRowOptions: false,
+  enableColumnEdition: false,
   quickOptionsLimit: 3,
   rowOptions: () => [],
 })
@@ -216,6 +216,8 @@ const quickOptions = computed(() => {
   return props.rowOptions
 })
 
+const displayOptionsColumn = computed(() => props.enableRowOptions || props.enableColumnEdition)
+
 const currentRowData = ref<Record<string, unknown>>({})
 const contextualMenuItems = computed(() => {
   return props.rowOptions.map((option) => ({
@@ -229,7 +231,7 @@ const containerDOMElement = computed(() => cpTableContainer.value)
 const mainClasses = computed(() => ({ 'cpTable--isLoading': props.isLoading }))
 const containerClasses = computed(() => ({ 'cpTable__container--hasPagination': hasPagination.value }))
 
-const normalizedColumns = computed<ColumnDefinition[]>(() => {
+const normalizedColumns = computed<CpTableColumnObject[]>(() => {
   if (!props.columns) return []
   const columns = props.columns.length ? [...props.columns] : [...columnsFromRows.value]
 
@@ -248,7 +250,13 @@ const normalizedColumns = computed<ColumnDefinition[]>(() => {
   })
 })
 
-const numberOfColumns = computed(() => normalizedColumns.value.length)
+const visibleColumns = computed(() => normalizedColumns.value.filter(({ id }) => columnsModel.value.includes(id)))
+
+const getAllColumnIds = () => normalizedColumns.value.map(({ id }) => id)
+
+const columnsModel = ref<string[]>(getAllColumnIds())
+
+const numberOfColumns = computed(() => visibleColumns.value.length)
 
 const hasGroupBy = computed(() => {
   if (!props.data.length) return false
@@ -405,10 +413,10 @@ const handleNavigationClick = (isNext = true) => {
 }
 
 const normalizeRowData = ({
-  columns = normalizedColumns.value,
+  columns = visibleColumns.value,
   rowPayload,
 }: {
-  columns?: ColumnDefinition[]
+  columns?: CpTableColumnObject[]
   rowPayload: Record<string, unknown>
 }) => {
   if (!Array.isArray(rowPayload)) {
@@ -426,10 +434,10 @@ const normalizeRowData = ({
 }
 
 const mapCellToColumn = ({
-  columns = normalizedColumns.value,
+  columns = visibleColumns.value,
   rowPayload,
 }: {
-  columns?: ColumnDefinition[]
+  columns?: CpTableColumnObject[]
   rowPayload: Record<string, unknown>
 }) => {
   if (isFullWidthRow(rowPayload)) return rowPayload
@@ -458,7 +466,7 @@ const resetScrollPosition = () => {
   }
 }
 
-const getColumnStyle = (columnPayload: ColumnDefinition) => {
+const getColumnStyle = (columnPayload: CpTableColumnObject) => {
   const formattedWidth = columnPayload?.width && `${columnPayload.width}px`
 
   return {
@@ -470,7 +478,7 @@ const getColumnStyle = (columnPayload: ColumnDefinition) => {
 const getCellStyle = (cellKey: RESERVED_KEYS, cellIndex: number) => {
   if (isFullWidthCell(cellKey)) return null
   return {
-    textAlign: normalizedColumns.value[cellIndex]?.textAlign,
+    textAlign: visibleColumns.value[cellIndex]?.textAlign,
   }
 }
 
@@ -487,7 +495,7 @@ const getCellClasses = (cellKey: RESERVED_KEYS) => {
 }
 
 const getColspan = (cellKey: RESERVED_KEYS) => {
-  const numberOfColumnsValue = props.enableRowOptions ? numberOfColumns.value + 1 : numberOfColumns.value
+  const numberOfColumnsValue = displayOptionsColumn.value ? numberOfColumns.value + 1 : numberOfColumns.value
   return isFullWidthCell(cellKey) ? numberOfColumnsValue : undefined
 }
 
@@ -501,7 +509,11 @@ 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 displayOptionsCell = (rowData: Record<string, unknown>) => {
+  if (isFullWidthRow(rowData)) return false
+  return props.enableColumnEdition || props.enableRowOptions
+}
 
 const resetPagination = () => (pageNumber.value = 0)
 
@@ -619,11 +631,11 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
     position: sticky;
     top: 0;
     z-index: 3;
-    background-color: colors.$neutral-light;
     padding: sp.$space sp.$space-md;
     text-align: left;
     white-space: nowrap;
     font-size: fn.px-to-em(12);
+    line-height: fn.px-to-rem(16);
     font-weight: normal;
     color: colors.$neutral-dark-1;
 
@@ -641,6 +653,11 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
       height: fn.px-to-rem(1);
       background-color: colors.$border-color;
     }
+
+    &--isOptions {
+      right: 0;
+      padding: 0;
+    }
   }
 
   &__body {

package/src/components/CpTableColumnEditor.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="cpTableColumnEditor">
+    <v-dropdown
+      v-model:shown="isDropdownVisible"
+      :delay="0"
+      placement="bottom-end"
+      popper-class="cpTableColumnEditor__dropdown"
+      @apply-show="handleDropdownShown"
+    >
+      <cp-button
+        appearance="minimal"
+        class="cpTableColumnEditor__trigger"
+        :class="triggerDynamicClass"
+        is-square
+        size="xs"
+      >
+        <template #leading-icon>
+          <cp-icon size="16" type="more-vertical" />
+        </template>
+      </cp-button>
+      <template #popper>
+        <div class="cpTableColumnEditor__inner">
+          <div class="cpTableColumnEditor__header">
+            <cp-input
+              ref="searchInputRef"
+              v-model="searchQuery"
+              class="cpTableColumnEditor__search"
+              is-search
+              placeholder="Search for a column..."
+              size="sm"
+            />
+          </div>
+          <div v-if="hasProtectedColumns" class="cpTableColumnEditor__row">
+            <div class="cpTableColumnEditor__heading">Fixed columns</div>
+            <div v-for="column in protectedColumns" :key="column.id" class="cpTableColumnEditor__column">
+              <span>{{ column.name }}</span>
+            </div>
+          </div>
+          <div class="cpTableColumnEditor__divider" />
+          <div class="cpTableColumnEditor__row">
+            <div class="cpTableColumnEditor__heading">Shown in table</div>
+            <div class="cpTableColumnEditor__column">
+              <template v-if="hasFilteredVisibleColumns">
+                <cp-checkbox
+                  v-for="column in filteredVisibleColumns"
+                  :key="column.id"
+                  v-model="selectedColumnIds"
+                  :checkbox-label="column.name"
+                  :checkbox-value="column.id"
+                  class="cpTableColumnEditor__checkbox"
+                  color="purple"
+                  :value="column.id"
+                />
+              </template>
+              <span v-else class="cpTableColumnEditor__empty">No columns found</span>
+            </div>
+          </div>
+          <template v-if="hasHiddenColumns">
+            <div class="cpTableColumnEditor__divider" />
+            <div class="cpTableColumnEditor__row">
+              <div class="cpTableColumnEditor__heading">Hidden in table</div>
+              <div class="cpTableColumnEditor__column">
+                <cp-checkbox
+                  v-for="column in hiddenColumns"
+                  :key="column.id"
+                  v-model="selectedColumnIds"
+                  :checkbox-label="column.name"
+                  :checkbox-value="column.id"
+                  class="cpTableColumnEditor__checkbox"
+                  color="purple"
+                  :value="column.id"
+                />
+              </div>
+            </div>
+          </template>
+        </div>
+      </template>
+    </v-dropdown>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, useTemplateRef } from 'vue'
+
+import { CpTableColumnObject } from '@/constants/CpTableColumn'
+
+import { focusOnDOMElement } from '@/helpers/dom'
+
+interface Props {
+  columns: CpTableColumnObject[]
+  modelValue: string[]
+}
+
+const props = defineProps<Props>()
+
+const isDropdownVisible = ref(false)
+const selectedColumnIds = defineModel<string[]>()
+
+const searchQuery = ref('')
+const searchInputRef = useTemplateRef('searchInputRef')
+
+const triggerDynamicClass = computed(() => {
+  return {
+    'cpTableColumnEditor__trigger--isOpen': isDropdownVisible.value,
+  }
+})
+
+const protectedColumns = computed(() => {
+  const filteredProtectedColumns = props.columns.filter((column) => isColumnProtected(column))
+  if (filteredProtectedColumns.length) return filteredProtectedColumns
+
+  const firstColumn = props.columns[0]
+  return [firstColumn]
+})
+
+const hasProtectedColumns = computed(() => !!protectedColumns.value.length)
+
+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)
+  })
+})
+
+const hasFilteredVisibleColumns = computed(() => !!filteredVisibleColumns.value.length)
+
+const hiddenColumns = computed(() => props.columns.filter((column) => !isColumnSelected(column)))
+const hasHiddenColumns = computed(() => !!hiddenColumns.value.length)
+
+const isColumnProtected = (column) => column.isProtected || false
+const isColumnSelected = (column) => selectedColumnIds.value?.includes(column.id)
+
+const handleDropdownShown = () => {
+  if (!searchInputRef.value?.$el) return
+  setTimeout(() => focusOnDOMElement(searchInputRef.value?.$el), 50)
+}
+</script>
+
+<style lang="scss">
+.cpTableColumnEditor {
+  text-align: right;
+
+  &__trigger {
+    @extend %u-focus-outline;
+
+    border-radius: fn.px-to-rem(8);
+
+    &--isOpen,
+    &:hover,
+    &:focus-within {
+      background-color: colors.$neutral-dark-5;
+    }
+  }
+
+  &__dropdown {
+    @include mx.hide-tooltip-arrow;
+    @include mx.v-dropdown-transition;
+  }
+
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    gap: sp.$space;
+    padding-block: sp.$space;
+  }
+
+  &__header {
+    padding-inline: sp.$space-md;
+  }
+
+  &__heading,
+  &__column:not(:has(.cpTableColumnEditor__checkbox)) {
+    padding: sp.$space-sm sp.$space-md;
+  }
+
+  &__heading {
+    font-size: fn.px-to-rem(12);
+    line-height: fn.px-to-rem(24);
+    color: colors.$neutral-dark-1;
+  }
+
+  &__column,
+  &__empty {
+    font-size: fn.px-to-rem(14);
+  }
+
+  &__column {
+    text-transform: capitalize;
+  }
+
+  &__empty {
+    text-transform: initial;
+  }
+
+  &__divider {
+    height: fn.px-to-rem(1);
+    background-color: colors.$neutral-dark-5;
+  }
+
+  &__checkbox {
+    color: colors.$neutral-dark;
+    padding: sp.$space-sm sp.$space;
+  }
+}
+</style>

package/src/components/index.ts

@@ -33,6 +33,7 @@ import CpSelect from './CpSelect.vue'
 import CpSelectMenu from './CpSelectMenu.vue'
 import CpSwitch from './CpSwitch.vue'
 import CpTable from './CpTable.vue'
+import CpTableColumnEditor from './CpTableColumnEditor.vue'
 import CpTelInput from './CpTelInput.vue'
 import CpTextarea from './CpTextarea.vue'
 import CpToaster from './CpToaster.vue'
@@ -75,6 +76,7 @@ const Components = {
   CpRadio,
   CpSwitch,
   CpTable,
+  CpTableColumnEditor,
   CpIcon,
   CpTelInput,
   CpTooltip,

package/src/constants/CpTableColumn.ts

@@ -0,0 +1,9 @@
+export interface CpTableColumnObject {
+  id: string
+  isProtected?: boolean
+  name: string
+  textAlign?: 'left' | 'center' | 'right'
+  width?: number
+}
+
+export type CpTableColumn = CpTableColumnObject | string

package/src/helpers/dom.ts

@@ -43,3 +43,18 @@ export const handleTrapFocus = (event: KeyboardEvent, DOMElement?: HTMLElement |
     lastElement?.focus()
   }
 }
+
+export const focusOnDOMElement = (DOMElement: Document | HTMLElement | null, inputTag = 'input'): void => {
+  if (!DOMElement) return
+
+  if (DOMElement instanceof HTMLInputElement) {
+    DOMElement.focus()
+    return
+  }
+
+  const inputElement = DOMElement.querySelector(inputTag) as HTMLInputElement | null
+
+  if (!inputElement) return
+
+  inputElement.focus()
+}

package/src/stories/CpTable.stories.ts

@@ -110,6 +110,19 @@ 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 ClickableRows: Story = {
   args: {
     ...Default.args,