@citizenplane/pimp 18.1.2 → 18.2.0

package/package.json

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

package/src/components/CpButtonToggle.vue

@@ -71,9 +71,11 @@ const handleClick = (event: MouseEvent) => {
   transition:
     background-color 100ms ease-out,
     box-shadow 100ms ease-out,
-    color 100ms ease-out;
+    color 100ms ease-out,
+    transform 100ms ease;
 
   &:hover:not(:disabled) {
+    transform: translateY(fn.px-to-rem(-1));
     background-color: var(--cp-background-primary-hover);
     color: var(--cp-text-secondary-hover);
     box-shadow:
@@ -81,6 +83,10 @@ const handleClick = (event: MouseEvent) => {
       0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft-hover);
   }
 
+  &:active:not(:disabled) {
+    transform: translateY(fn.px-to-rem(1));
+  }
+
   &:focus-visible {
     box-shadow:
       0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft-hover),

package/src/components/CpTable.vue

@@ -93,26 +93,22 @@
       </table>
       <cp-table-empty-state v-if="hasNoResult" class="cpTable__emptyState" :placeholder="noResultPlaceholder" />
     </div>
-    <div v-if="hasPagination" class="cpTable__footer">
-      <div class="footer__details">
-        <p class="footer__results">
-          <slot v-if="!isLoading" name="footer-details">
-            <template v-if="numberOfResults">
-              <strong>
-                {{ paginationLabel }}
-              </strong>
-              <span class="footer__resultsCount"> on {{ paginationResultsDetails }}</span>
-            </template>
-            <template v-else> No results </template>
-          </slot>
-          <template v-else> Loading <cp-loader class="cpTable__loader--isSmall" :color="LoaderColor" /> </template>
-        </p>
-      </div>
-      <div class="footer__pagination">
-        <button :disabled="!isPreviousEnabled" type="button" @click="handleNavigationClick(false)">Prev.</button>
-        <button :disabled="!isNextEnabled" type="button" @click="handleNavigationClick()">Next</button>
-      </div>
-    </div>
+    <cp-table-footer
+      v-if="hasPagination"
+      :is-loading="isLoading"
+      :is-server-side-pagination="isServerSidePagination"
+      :number-of-results="numberOfResults"
+      :page-number="pageNumber"
+      :pagination="pagination"
+      :rows-per-page-limit="rowsPerPageLimit"
+      :server-active-page="serverActivePage"
+      @on-next-click="handleNavigationClick()"
+      @on-previous-click="handleNavigationClick(false)"
+    >
+      <template v-if="hasFooterDetailsSlot" #footer-details>
+        <slot name="footer-details" />
+      </template>
+    </cp-table-footer>
     <div class="cpTable__overlay" />
     <cp-contextual-menu
       v-if="hasRowOptions"
@@ -124,7 +120,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, useId, watch } from 'vue'
+import { ref, computed, useId, watch, useSlots } from 'vue'
 
 import type { MenuItemCommandEvent } from 'primevue/menuitem'
 
@@ -132,6 +128,7 @@ import { CpTableColumnObject } from '@/constants/CpTableColumn'
 
 import CpContextualMenu from '@/components/CpContextualMenu.vue'
 import CpTableEmptyState from '@/components/CpTableEmptyState.vue'
+import CpTableFooter from '@/components/CpTableFooter.vue'
 
 import { camelize, decamelize } from '@/helpers/string'
 
@@ -151,7 +148,6 @@ interface PaginationServer {
 
 interface Pagination {
   enabled?: boolean
-  format?: 'results' | 'pages'
   limit?: number
   server?: PaginationServer
 }
@@ -202,11 +198,10 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const emit = defineEmits<Emits>()
+const slots = useSlots()
 
 const FULL_WIDTH_SIZE = 1000
 
-const LoaderColor = '#5341F9'
-
 const uniqueId = useId()
 const pageNumber = ref(0)
 const cpTableContainer = ref<HTMLElement | null>(null)
@@ -225,6 +220,7 @@ const quickOptions = computed(() => {
   return props.rowOptions
 })
 
+const hasFooterDetailsSlot = computed(() => !!slots.footerDetails)
 const displayOptionsColumn = computed(() => props.enableRowOptions || props.enableColumnEdition)
 
 const currentRowData = ref<Record<string, unknown>>({})
@@ -395,24 +391,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
-  return 'pages'
-})
-const hasRemainingPages = computed(() => numberOfPages.value > activePage.value)
-const isNextEnabled = computed(() => hasRemainingPages.value && !props.isLoading)
-
-const hasPreviousPages = computed(() => {
-  return isServerSidePagination.value ? serverActivePage.value > 0 : pagesStartIndex.value - rowsPerPageLimit.value >= 0
-})
-
-const isPreviousEnabled = computed(() => hasPreviousPages.value && !props.isLoading)
 const pagesStartIndex = computed(() => pageNumber.value * rowsPerPageLimit.value)
-const pagesEndIndex = computed(() => rowsPerPageLimit.value * (1 + pageNumber.value))
-const numberOfPages = computed(() => Math.ceil(numberOfResults.value / rowsPerPageLimit.value))
-const activePage = computed(() => {
-  return isServerSidePagination.value ? serverActivePage.value + 1 : pageNumber.value + 1
-})
 
 const isServerSidePagination = computed(() => {
   if (!props.pagination) return false
@@ -420,31 +399,6 @@ const isServerSidePagination = computed(() => {
 })
 
 const serverActivePage = computed(() => props.pagination?.server?.activePage || 0)
-const serverPagesStartIndex = computed(() => serverActivePage.value * rowsPerPageLimit.value + 1)
-const serverPagesEndIndex = computed(() => rowsPerPageLimit.value * (1 + serverActivePage.value))
-
-const pageFirstResultIndex = computed(() => {
-  return isServerSidePagination.value ? serverPagesStartIndex.value : pagesStartIndex.value + 1
-})
-
-const pageLastResultIndex = computed(() => {
-  const endIndex = isServerSidePagination.value ? serverPagesEndIndex.value : pagesEndIndex.value
-  return hasRemainingPages.value ? endIndex : numberOfResults.value
-})
-
-const paginationLabel = computed(() => {
-  if (paginationFormat.value === 'pages') {
-    const pluralizedCount = numberOfPages.value > 1 ? 'pages' : 'page'
-    return `${activePage.value}/${numberOfPages.value} ${pluralizedCount}`
-  }
-  return `${pageFirstResultIndex.value} – ${pageLastResultIndex.value}`
-})
-
-const paginationResultsDetails = computed(() => {
-  const formattedNumberOfResults = new Intl.NumberFormat('en-US').format(numberOfResults.value)
-  const pluralizedCount = numberOfResults.value > 1 ? 'results' : 'result'
-  return `${formattedNumberOfResults} ${pluralizedCount}`
-})
 
 const handleContextMenu = (
   { rowData, rowIndex }: { rowData: Record<string, unknown>; rowIndex: number },
@@ -480,14 +434,12 @@ const handleNavigationClick = (isNext = true) => {
   resetScrollPosition()
 
   if (isNext) {
-    if (hasRemainingPages.value) {
-      augmentOffset()
-    }
+    augmentOffset()
     emit('onNextClick')
     return
   }
 
-  if (hasPreviousPages.value) decreaseOffset()
+  decreaseOffset()
   emit('onPreviousClick')
 }
 
@@ -532,11 +484,15 @@ const mapCellToColumn = ({
 }
 
 const augmentOffset = () => {
-  if (isNextEnabled.value) pageNumber.value++
+  if (isServerSidePagination.value) return
+
+  const numberOfPages = Math.ceil(numberOfResults.value / rowsPerPageLimit.value)
+  if (pageNumber.value + 1 < numberOfPages) pageNumber.value++
 }
 
 const decreaseOffset = () => {
-  if (isPreviousEnabled.value) pageNumber.value--
+  if (isServerSidePagination.value) return
+  if (pageNumber.value > 0) pageNumber.value--
 }
 
 const resetScrollPosition = () => {
@@ -974,76 +930,5 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
       }
     }
   }
-
-  &__loader {
-    width: var(--cp-dimensions-8);
-    height: var(--cp-dimensions-8);
-
-    &--isSmall {
-      display: inline-block;
-      vertical-align: middle;
-      width: var(--cp-dimensions-6);
-      height: var(--cp-dimensions-6);
-    }
-  }
-
-  &__footer {
-    padding: var(--cp-spacing-xl) var(--cp-spacing-lg) 0;
-    display: flex;
-    align-items: center;
-    font-size: var(--cp-text-size-sm);
-  }
-
-  .footer {
-    &__details,
-    &__pagination {
-      flex: 1;
-    }
-
-    &__results {
-      font-variant-numeric: tabular-nums;
-      color: var(--cp-text-secondary);
-    }
-
-    &__results strong {
-      color: var(--cp-text-primary);
-    }
-
-    &__pagination {
-      text-align: right;
-    }
-
-    &__pagination button {
-      box-shadow: var(--cp-shadows-3xs);
-      border-radius: var(--cp-radius-md-lg);
-      border: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
-      padding: var(--cp-spacing-sm-md) var(--cp-dimensions-2_5);
-      transition: background-color 0.15s;
-      background-color: var(--cp-background-primary);
-
-      &:hover {
-        background-color: var(--cp-background-primary-hover);
-        border: var(--cp-dimensions-0_25) solid var(--cp-border-soft-hover);
-      }
-
-      &:focus {
-        outline: none !important;
-        box-shadow: 0 0 0 calc(var(--cp-dimensions-0_5) * 1.5) var(--cp-focus);
-      }
-
-      &:disabled {
-        box-shadow: none;
-        border-color: var(--cp-border-disabled);
-        background-color: var(--cp-background-disabled);
-        color: var(--cp-foreground-disabled);
-        cursor: not-allowed;
-        user-select: none;
-      }
-
-      &:last-of-type {
-        margin-left: var(--cp-spacing-md);
-      }
-    }
-  }
 }
 </style>

package/src/components/CpTableFooter.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="cpTableFooter">
+    <cp-table-footer-desktop
+      class="cpTableFooter__desktop"
+      :is-next-enabled="isNextEnabled"
+      :is-previous-enabled="isPreviousEnabled"
+      @on-next-click="emit('onNextClick')"
+      @on-previous-click="emit('onPreviousClick')"
+    >
+      <template #footer-details>
+        <slot v-if="!isLoading" name="footer-details">
+          <cp-table-footer-details
+            :number-of-results="numberOfResults"
+            :page-first-result-index="pageFirstResultIndex"
+            :page-last-result-index="pageLastResultIndex"
+          />
+        </slot>
+        <span v-else class="cpTableFooter__loader">
+          Loading
+          <cp-loader color="neutral" size="xs" />
+        </span>
+      </template>
+    </cp-table-footer-desktop>
+
+    <cp-table-footer-mobile
+      class="cpTableFooter__mobile"
+      :is-next-enabled="isNextEnabled"
+      :is-previous-enabled="isPreviousEnabled"
+      @on-next-click="emit('onNextClick')"
+      @on-previous-click="emit('onPreviousClick')"
+    >
+      <template #footer-details>
+        <slot v-if="!isLoading" name="footer-details">
+          <cp-table-footer-details
+            :number-of-results="numberOfResults"
+            :page-first-result-index="pageFirstResultIndex"
+            :page-last-result-index="pageLastResultIndex"
+          />
+        </slot>
+        <span v-else class="cpTableFooter__loader">
+          Loading
+          <cp-loader color="neutral" size="xs" />
+        </span>
+      </template>
+    </cp-table-footer-mobile>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import CpTableFooterDesktop from '@/components/CpTableFooterDesktop.vue'
+import CpTableFooterDetails from '@/components/CpTableFooterDetails.vue'
+import CpTableFooterMobile from '@/components/CpTableFooterMobile.vue'
+
+interface Props {
+  isLoading: boolean
+  isServerSidePagination: boolean
+  numberOfResults: number
+  pageNumber: number
+  rowsPerPageLimit: number
+  serverActivePage: number
+}
+
+interface Emits {
+  (evt: 'onNextClick' | 'onPreviousClick'): void
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<Emits>()
+
+const numberOfPages = computed(() => Math.ceil(props.numberOfResults / props.rowsPerPageLimit))
+const activePage = computed(() => (props.isServerSidePagination ? props.serverActivePage + 1 : props.pageNumber + 1))
+const hasRemainingPages = computed(() => numberOfPages.value > activePage.value)
+const hasPreviousPages = computed(() =>
+  props.isServerSidePagination ? props.serverActivePage > 0 : props.pageNumber > 0,
+)
+
+const isNextEnabled = computed(() => hasRemainingPages.value && !props.isLoading)
+const isPreviousEnabled = computed(() => hasPreviousPages.value && !props.isLoading)
+
+const pagesStartIndex = computed(() => props.pageNumber * props.rowsPerPageLimit)
+const pagesEndIndex = computed(() => props.rowsPerPageLimit * (1 + props.pageNumber))
+const serverPagesStartIndex = computed(() => props.serverActivePage * props.rowsPerPageLimit + 1)
+const serverPagesEndIndex = computed(() => props.rowsPerPageLimit * (1 + props.serverActivePage))
+
+const pageFirstResultIndex = computed(() =>
+  props.isServerSidePagination ? serverPagesStartIndex.value : pagesStartIndex.value + 1,
+)
+
+const pageLastResultIndex = computed(() => {
+  const endIndex = props.isServerSidePagination ? serverPagesEndIndex.value : pagesEndIndex.value
+  return hasRemainingPages.value ? endIndex : props.numberOfResults
+})
+</script>
+
+<style scoped lang="scss">
+.cpTableFooter {
+  position: sticky;
+  bottom: var(--cp-spacing-md);
+  z-index: 3;
+
+  &__loader {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--cp-spacing-sm);
+    color: var(--cp-text-secondary);
+    font-size: var(--cp-text-size-sm);
+    line-height: var(--cp-line-height-sm);
+  }
+
+  &__desktop {
+    display: none;
+  }
+
+  &__mobile {
+    display: flex;
+    margin-top: var(--cp-spacing-md);
+
+    .cpTableFooter__loader {
+      font-size: var(--cp-text-size-xs);
+      line-height: var(--cp-line-height-xs);
+    }
+  }
+}
+
+@media (min-width: 650px) {
+  .cpTableFooter {
+    position: static;
+    z-index: auto;
+    padding: var(--cp-spacing-xl) var(--cp-spacing-lg) 0;
+
+    &__desktop {
+      display: flex;
+    }
+
+    &__mobile {
+      display: none;
+    }
+  }
+}
+</style>

package/src/components/CpTableFooterDesktop.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="cpTableFooterDesktop">
+    <div class="cpTableFooterDesktop__details">
+      <p class="cpTableFooterDesktop__results">
+        <slot name="footer-details" />
+      </p>
+    </div>
+    <div class="cpTableFooterDesktop__pagination">
+      <cp-button
+        appearance="secondary"
+        color="neutral"
+        :disabled="!isPreviousEnabled"
+        is-square
+        size="xs"
+        @click="emit('onPreviousClick')"
+      >
+        Prev.
+      </cp-button>
+      <cp-button
+        appearance="secondary"
+        color="neutral"
+        :disabled="!isNextEnabled"
+        is-square
+        size="xs"
+        @click="emit('onNextClick')"
+      >
+        Next
+      </cp-button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  isNextEnabled: boolean
+  isPreviousEnabled: boolean
+}
+
+interface Emits {
+  (evt: 'onNextClick' | 'onPreviousClick'): void
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<Emits>()
+</script>
+
+<style scoped lang="scss">
+.cpTableFooterDesktop {
+  display: flex;
+  align-items: center;
+  font-size: var(--cp-text-size-sm);
+
+  &__details,
+  &__pagination {
+    flex: 1;
+  }
+
+  &__results {
+    font-variant-numeric: tabular-nums;
+    color: var(--cp-text-secondary);
+  }
+
+  &__results strong {
+    color: var(--cp-text-primary);
+  }
+
+  &__pagination {
+    justify-content: flex-end;
+    display: flex;
+    gap: var(--cp-spacing-md);
+  }
+}
+</style>

package/src/components/CpTableFooterDetails.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="cpTableFooterDetails">
+    <p v-if="numberOfResults" class="cpTableFooterDetails__label">
+      <span class="cpTableFooterDetails__paginationLabel">
+        {{ paginationLabel }}
+      </span>
+      <span class="cpTableFooterDetails__resultsCount"> / {{ paginationResultsDetails }}</span>
+    </p>
+    <p v-else class="cpTableFooterDetails__noResults">No results</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  numberOfResults: number
+  pageFirstResultIndex: number
+  pageLastResultIndex: number
+}
+
+const props = defineProps<Props>()
+
+const paginationLabel = computed(() => {
+  return `${props.pageFirstResultIndex} – ${props.pageLastResultIndex}`
+})
+
+const paginationResultsDetails = computed(() => {
+  const formattedNumberOfResults = new Intl.NumberFormat('en-US').format(props.numberOfResults)
+  const pluralizedCount = props.numberOfResults > 1 ? 'results' : 'result'
+  return `${formattedNumberOfResults} ${pluralizedCount}`
+})
+</script>
+
+<style lang="scss">
+.cpTableFooterDetails {
+  &__paginationLabel {
+    font-weight: 600;
+    color: var(--cp-text-primary);
+    font-size: var(--cp-text-size-xs);
+    line-height: var(--cp-line-height-xs);
+  }
+
+  &__resultsCount,
+  &__noResults {
+    font-weight: 500;
+    color: var(--cp-text-secondary);
+    font-size: var(--cp-text-size-xs);
+    line-height: var(--cp-line-height-xs);
+  }
+}
+
+@media (min-width: 650px) {
+  .cpTableFooterDetails {
+    &__paginationLabel,
+    &__resultsCount,
+    &__noResults {
+      font-size: var(--cp-text-size-sm);
+      line-height: var(--cp-line-height-sm);
+    }
+  }
+}
+</style>

package/src/components/CpTableFooterMobile.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="cpTableFooterMobile">
+    <cp-button
+      appearance="tertiary"
+      color="neutral"
+      :disabled="!isPreviousEnabled"
+      is-square
+      size="sm"
+      @click="emit('onPreviousClick')"
+    >
+      <template #leading-icon>
+        <cp-icon size="16" type="arrow-left" />
+      </template>
+    </cp-button>
+    <p class="cpTableFooterMobile__results">
+      <slot name="footer-details" />
+    </p>
+    <cp-button
+      appearance="tertiary"
+      color="neutral"
+      :disabled="!isNextEnabled"
+      is-square
+      size="sm"
+      @click="emit('onNextClick')"
+    >
+      <template #leading-icon>
+        <cp-icon size="16" type="arrow-right" />
+      </template>
+    </cp-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  isNextEnabled: boolean
+  isPreviousEnabled: boolean
+}
+
+interface Emits {
+  (evt: 'onNextClick' | 'onPreviousClick'): void
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<Emits>()
+</script>
+
+<style scoped lang="scss">
+.cpTableFooterMobile {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--cp-spacing-md);
+  font-size: var(--cp-text-size-sm);
+  padding: var(--cp-spacing-xs) var(--cp-spacing-xl);
+  box-shadow: var(--cp-shadows-overlay);
+  border-radius: var(--cp-radius-md);
+  background: var(--cp-background-primary);
+  z-index: 3;
+
+  .cpButton--isDisabled {
+    background: var(--cp-background-primary);
+  }
+}
+</style>

package/src/stories/CpTable.stories.ts

@@ -128,14 +128,38 @@ export const Empty: Story = {
 export const WithPagination: Story = {
   args: {
     ...Default.args,
+    data: [...sampleData, ...sampleData, ...sampleData],
     pagination: {
       enabled: true,
-      limit: 3,
-      format: 'pages',
+      limit: 12,
     },
   },
 }
 
+/**
+ * Override the default footer details through the `#footer-details` slot.
+ */
+export const WithCustomFooterDetails: Story = {
+  args: {
+    ...WithPagination.args,
+  },
+  render: (args: TableStoryArgs) => ({
+    components: { CpTable },
+    setup() {
+      return { args }
+    },
+    template: `
+      <CpTable v-bind="args">
+        <template #footer-details>
+          <span :style="{ color: '#334155' }">
+            Custom footer: showing paginated users list.
+          </span>
+        </template>
+      </CpTable>
+    `,
+  }),
+}
+
 /**
  * Group rows by providing an array of `{ groupBy, rows }` objects. A
  * custom `#groupBy` slot renders the section header.