@citizenplane/pimp 18.9.33 → 18.9.35

package/package.json

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

package/src/components/CpTableFooter.vue

@@ -73,9 +73,9 @@ 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 hasPreviousPages = computed(() => {
+  return props.isServerSidePagination ? props.serverActivePage > 0 : props.pageNumber > 0
+})
 
 const isNextEnabled = computed(() => hasRemainingPages.value && !props.isLoading)
 const isPreviousEnabled = computed(() => hasPreviousPages.value && !props.isLoading)
@@ -85,9 +85,9 @@ const pagesEndIndex = computed(() => props.rowsPerPageLimit * (1 + props.pageNum
 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 pageFirstResultIndex = computed(() => {
+  return props.isServerSidePagination ? serverPagesStartIndex.value : pagesStartIndex.value + 1
+})
 
 const pageLastResultIndex = computed(() => {
   const endIndex = props.isServerSidePagination ? serverPagesEndIndex.value : pagesEndIndex.value
@@ -97,7 +97,8 @@ const pageLastResultIndex = computed(() => {
 
 <style scoped lang="scss">
 .cpTableFooter {
-  padding: 0 var(--cp-spacing-xl) 0;
+  z-index: auto;
+  padding: var(--cp-spacing-xl) var(--cp-spacing-lg) 0;
 
   &__loader {
     display: inline-flex;
@@ -109,11 +110,11 @@ const pageLastResultIndex = computed(() => {
   }
 
   &__desktop {
-    display: none;
+    display: flex;
   }
 
   &__mobile {
-    display: flex;
+    display: none;
     margin-block: var(--cp-spacing-lg);
 
     .cpTableFooter__loader {
@@ -123,17 +124,16 @@ const pageLastResultIndex = computed(() => {
   }
 }
 
-@media (min-width: 769px) {
+@media (max-width: 768px) {
   .cpTableFooter {
-    z-index: auto;
-    padding: var(--cp-spacing-xl) var(--cp-spacing-lg) 0;
+    padding: 0 var(--cp-spacing-lg) 0;
 
     &__desktop {
-      display: flex;
+      display: none;
     }
 
     &__mobile {
-      display: none;
+      display: flex;
     }
   }
 }

package/src/components/CpTableFooterDesktop.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="cpTableFooterDesktop">
     <div class="cpTableFooterDesktop__details">
-      <p class="cpTableFooterDesktop__results">
+      <div class="cpTableFooterDesktop__results">
         <slot name="footer-details" />
-      </p>
+      </div>
     </div>
     <div class="cpTableFooterDesktop__pagination">
       <cp-button

package/src/components/CpTableFooterMobile.vue

@@ -12,9 +12,9 @@
         <cp-icon size="16" type="arrow-left" />
       </template>
     </cp-button>
-    <p class="cpTableFooterMobile__results">
+    <div class="cpTableFooterMobile__results">
       <slot name="footer-details" />
-    </p>
+    </div>
     <cp-button
       appearance="tertiary"
       color="neutral"