@citizenplane/pimp 6.1.1 → 6.4.0

package/src/components/lists-and-table/CpTable/{CpTableEmptyState.vue → CpTableEmptyState/index.vue}

@@ -28,17 +28,17 @@ export default {
 
 <style lang="scss">
 .cpTableEmptyState {
-  padding: 10vh $spacing-unit * 2;
+  padding: 10vh $space-lg;
   display: flex;
   align-items: center;
   justify-content: center;
 
   &__icon {
-    margin-bottom: $spacing-unit * 3;
+    margin-bottom: $space-xl;
     border-radius: pxToRem(4);
     display: inline-block;
     background-color: $neutral-light-1;
-    padding: $spacing-unit * 2;
+    padding: $space-lg;
     color: $neutral-dark-1;
 
     svg {
@@ -47,7 +47,7 @@ export default {
   }
 
   &__headline {
-    margin-bottom: $spacing-unit;
+    margin-bottom: $space;
     font-size: pxToEm(20);
   }
 

package/src/components/lists-and-table/CpTable/index.scss

@@ -0,0 +1,308 @@
+@import "src/assets/styles/main";
+
+.cpTable {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  &__container {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+
+    &--hasPagination {
+      border-bottom: pxToRem(1) solid $border-color;
+    }
+  }
+
+  /* Standard Tables */
+  &__container[role='region'][aria-labelledby][tabindex] {
+    overflow: auto;
+  }
+
+  &__container[role='region'][aria-labelledby][tabindex]:focus {
+    border-radius: pxToRem(10);
+    box-shadow: 0 0 0 pxToEm(3) scale-color($blue, $lightness: 70%);
+  }
+
+  &__container[role='region'][aria-labelledby][tabindex] &__table {
+    margin: 0;
+    border: none;
+  }
+
+  /* Scrolling Visual Cue */
+  &__container[role='region'][aria-labelledby][tabindex] {
+    background: linear-gradient(to right, $neutral-light 30%, rgba(255, 255, 255, 0)),
+    linear-gradient(to right, rgba($neutral-light, 0), $neutral-light 70%) 0 100%,
+    radial-gradient(farthest-side at 0% 50%, rgba($neutral-dark, 0.2), rgba($neutral-dark, 0)),
+    radial-gradient(farthest-side at 100% 50%, rgba($neutral-dark, 0.2), rgba($neutral-dark, 0)) 0 100%;
+    background-repeat: no-repeat;
+    background-color: $neutral-light;
+    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
+    background-position: 0 0, 100%, 0 0, 100%;
+    background-attachment: local, local, scroll, scroll;
+  }
+
+  &__caption {
+    position: sticky;
+    left: 0;
+    margin-bottom: $space-lg;
+    text-align: left;
+    font-size: pxToEm(18);
+
+    &:first-letter {
+      text-transform: capitalize;
+    }
+  }
+
+  &__table {
+    border-collapse: collapse;
+    width: 100%;
+  }
+
+  &__row {
+    &--body:not(:last-of-type) {
+      border-bottom: pxToRem(1) solid $border-color;
+    }
+
+    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):hover,
+    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):focus,
+    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):focus-within {
+      background-color: rgba($neutral-dark, 0.05);
+      transition: background-color 0.1s ease-in-out;
+    }
+
+    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):focus,
+    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):focus-within {
+      color: $primary-color;
+    }
+
+    &--isFullWidth td {
+      padding: $space;
+      background-color: rgba($neutral-dark, 0.03);
+    }
+
+    &--isClickable {
+      cursor: pointer;
+    }
+
+    &--isSelected {
+      background-color: rgba($primary-color, 0.1);
+      color: $primary-color;
+    }
+
+    &--body td {
+      font-size: pxToEm(14);
+    }
+  }
+
+  &__column {
+    position: sticky;
+    top: 0;
+    z-index: 3;
+    background-color: $neutral-light;
+    padding: $space $space-md;
+    text-align: left;
+    white-space: nowrap;
+    font-size: pxToEm(12);
+    font-weight: normal;
+    color: $neutral-dark-1;
+
+    &:first-letter {
+      text-transform: capitalize;
+    }
+
+    /* Workaround for sticky header border-bottom */
+    &:after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      height: pxToRem(1);
+      background-color: $border-color;
+    }
+  }
+
+  &__body {
+    vertical-align: middle;
+  }
+
+  &__row--body,
+  &__cell {
+    vertical-align: inherit;
+  }
+
+  &__cell {
+    &:not(#{&}--isFullWidth):not(#{&}--isOptions) {
+      padding: $space-lg $space-md;
+      white-space: nowrap;
+    }
+
+    &--isFullWidth span,
+    &--isOptions {
+      position: sticky;
+    }
+
+    &--isFullWidth span {
+      left: 50%;
+      transform: translateX(-50%);
+      display: inline-block;
+    }
+
+    &--isOptions {
+      right: 0;
+      padding: 0 $space-md;
+    }
+
+    &--isOptions button {
+      border: pxToRem(1) solid $border-color;
+      border-radius: pxToRem(8);
+      background-color: $neutral-light;
+      padding: $space-sm;
+      color: $neutral-dark-1;
+
+      &:hover {
+        background-color: scale-color($neutral-dark, $lightness: 98%);
+        color: $neutral-dark;
+      }
+    }
+
+    &--isOptions svg {
+      width: pxToRem(16);
+      height: pxToRem(16);
+    }
+  }
+
+  // On desktop devices, display options only on row focus or hover
+  @media (hover: hover) and (pointer: fine) {
+    &__cell--isOptions {
+      opacity: 0;
+      transition: opacity 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.175);
+    }
+
+    &__row:focus &__cell--isOptions,
+    &__row:focus-within &__cell--isOptions,
+    &__row:hover &__cell--isOptions {
+      opacity: 1;
+    }
+  }
+
+  &__emptyState {
+    flex: 1;
+  }
+
+  &--isLoading &__overlay {
+    opacity: 0.5;
+    pointer-events: all;
+  }
+
+  &__overlay {
+    position: absolute;
+    overflow: hidden;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    border-radius: pxToRem(10);
+    background-color: $neutral-light;
+    z-index: 4;
+    opacity: 0;
+    transition: 0.15s opacity ease-in-out;
+    cursor: wait;
+    pointer-events: none;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      transform: translateX(-100%);
+      background-image: linear-gradient(
+          90deg,
+          rgba($neutral-dark-3, 0) 0,
+          rgba($neutral-dark-3, 0.2) 20%,
+          rgba($neutral-dark-3, 0.5) 60%,
+          rgba($neutral-dark-3, 0)
+      );
+      animation: shimmer 2s infinite;
+    }
+
+    @keyframes shimmer {
+      100% {
+        transform: translateX(100%);
+      }
+    }
+  }
+
+  &__loader {
+    width: pxToRem(32);
+    height: pxToRem(32);
+
+    &--isSmall {
+      display: inline-block;
+      vertical-align: middle;
+      width: pxToRem(24);
+      height: pxToRem(24);
+    }
+  }
+
+  &__footer {
+    padding: $space-lg $space-md 0;
+    display: flex;
+    align-items: center;
+    font-size: pxToEm(14);
+  }
+
+  .footer {
+    &__details,
+    &__pagination {
+      flex: 1;
+    }
+
+    &__results {
+      font-variant-numeric: tabular-nums;
+      color: $neutral-dark-1;
+    }
+
+    &__results strong {
+      color: $neutral-dark;
+    }
+
+    &__pagination {
+      text-align: right;
+    }
+
+    &__pagination button {
+      box-shadow: 0 pxToRem(1) pxToRem(2) rgba($neutral-dark, 0.08);
+      border-radius: pxToRem(10);
+      border: pxToRem(1) solid $border-color;
+      padding: pxToRem(6) pxToRem(10);
+      transition: background-color 0.15s;
+
+      &:hover {
+        background-color: rgba($neutral-dark, 0.05);
+      }
+
+      &:focus {
+        box-shadow: 0 0 0 pxToEm(3) scale-color($blue, $lightness: 70%);
+      }
+
+      &:disabled {
+        box-shadow: none;
+        border-color: $neutral-light-1;
+        background-color: $neutral-light-1;
+        color: $neutral-dark-2;
+        cursor: not-allowed;
+        user-select: none;
+      }
+
+      &:last-of-type {
+        margin-left: $space;
+      }
+    }
+  }
+}

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

@@ -26,21 +26,23 @@
                 {{ column.name }}
               </slot>
             </th>
+            <th v-show="enableRowOptions" class="cpTable__column cpTable__column--isOptions"><span /></th>
           </tr>
         </thead>
         <tbody class="cpTable__body">
           <tr
-            v-for="(row, rowIndex) in visibleRows"
+            v-for="(rowData, rowIndex) in visibleRows"
             :key="rowIndex"
             class="cpTable__row cpTable__row--body"
-            :class="getRowClasses(row, rowIndex)"
-            tabindex="0"
-            @click="handleRowClick(row, rowIndex)"
-            @keydown.enter="handleRowClick(row, rowIndex)"
+            :class="getRowClasses(rowData, rowIndex)"
+            :tabindex="getTabindex(rowData)"
+            @click="handleRowClick(rowData, rowIndex)"
+            @click.right="handleRowRightClick({ rowData, rowIndex }, $event)"
+            @keydown.enter="handleRowClick(rowData, rowIndex)"
           >
-            <slot name="row" :row="row">
+            <slot name="row" :row="rowData">
               <td
-                v-for="(cellValue, cellKey, cellIndex) in row"
+                v-for="(cellValue, cellKey, cellIndex) in rowData"
                 :key="`${cellKey}_${rowIndex}`"
                 class="cpTable__cell"
                 :class="getCellClasses(cellKey)"
@@ -48,10 +50,13 @@
                 :colspan="getColspan(cellKey)"
               >
                 <slot :name="cellKey" :cell="cellValue">
-                  <span v-if="isFullWidthRow(row)">{{ cellValue }}</span>
+                  <span v-if="isFullWidthRow(rowData)">{{ cellValue }}</span>
                   <template v-else>{{ cellValue }}</template>
                 </slot>
               </td>
+              <td v-show="areRowOptionsEnabled(rowData)" class="cpTable__cell cpTable__cell--isOptions">
+                <button @click.stop="handleRowRightClick({ rowData, rowIndex }, $event)"><more-vertical-icon /></button>
+              </td>
             </slot>
           </tr>
         </tbody>
@@ -83,6 +88,7 @@
 </template>
 
 <script>
+import { MoreVerticalIcon } from 'vue-feather-icons'
 import { camelize, decamelize } from '@/helpers/string'
 import { randomString } from '@/helpers'
 
@@ -102,6 +108,7 @@ const LoaderColor = '#5341F9'
 
 export default {
   components: {
+    MoreVerticalIcon,
     CpTableEmptyState,
   },
   props: {
@@ -152,6 +159,11 @@ export default {
       default: false,
       required: false,
     },
+    enableRowOptions: {
+      type: Boolean,
+      default: false,
+      required: false,
+    },
   },
   data() {
     return {
@@ -307,11 +319,21 @@ export default {
     },
   },
   methods: {
+    getRowPayload(rowIndex) {
+      return this.rawVisibleRows[rowIndex]
+    },
     handleRowClick(rowData, rowIndex) {
       if (this.isFullWidthRow(rowData)) return
-      const data = this.rawVisibleRows[rowIndex]
+
+      const data = this.getRowPayload(rowIndex)
       this.$emit('on-row-click', data)
     },
+    handleRowRightClick({ rowData, rowIndex }, event) {
+      if (this.isFullWidthRow(rowData)) return
+
+      const data = this.getRowPayload(rowIndex)
+      this.$emit('on-row-right-click', { data, event })
+    },
     handleNavigationClick(isNext = true) {
       this.resetScrollPosition()
 
@@ -385,7 +407,12 @@ export default {
       }
     },
     getColspan(cellKey) {
-      return cellKey === RESERVED_KEYS.FULL_WIDTH && this.numberOfColumns
+      const numberOfColumns = this.enableRowOptions ? this.numberOfColumns + 1 : this.numberOfColumns
+
+      return cellKey === RESERVED_KEYS.FULL_WIDTH && numberOfColumns
+    },
+    getTabindex(rowData) {
+      return this.isFullWidthRow(rowData) ? -1 : 0
     },
     isFullWidthRow(rowData) {
       return RESERVED_KEYS.FULL_WIDTH in rowData
@@ -393,268 +420,13 @@ export default {
     isRowSelected(rowIndex) {
       return this.rawVisibleRows[rowIndex][RESERVED_KEYS.IS_SELECTED]
     },
+    areRowOptionsEnabled(rowData) {
+      return this.enableRowOptions && !this.isFullWidthRow(rowData)
+    },
   },
 }
 </script>
 
 <style lang="scss">
-.cpTable {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-
-  &__container {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-
-    &--hasPagination {
-      border-bottom: pxToRem(1) solid $border-color;
-    }
-  }
-
-  /* Standard Tables */
-  &__container[role='region'][aria-labelledby][tabindex] {
-    overflow: auto;
-  }
-
-  &__container[role='region'][aria-labelledby][tabindex]:focus {
-    border-radius: pxToRem(10);
-    box-shadow: 0 0 0 pxToEm(3) scale-color($blue, $lightness: 70%);
-  }
-
-  &__container[role='region'][aria-labelledby][tabindex] &__table {
-    margin: 0;
-    border: none;
-  }
-
-  /* Scrolling Visual Cue */
-  &__container[role='region'][aria-labelledby][tabindex] {
-    background: linear-gradient(to right, $neutral-light 30%, rgba(255, 255, 255, 0)),
-      linear-gradient(to right, rgba($neutral-light, 0), $neutral-light 70%) 0 100%,
-      radial-gradient(farthest-side at 0% 50%, rgba($neutral-dark, 0.2), rgba($neutral-dark, 0)),
-      radial-gradient(farthest-side at 100% 50%, rgba($neutral-dark, 0.2), rgba($neutral-dark, 0)) 0 100%;
-    background-repeat: no-repeat;
-    background-color: $neutral-light;
-    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
-    background-position: 0 0, 100%, 0 0, 100%;
-    background-attachment: local, local, scroll, scroll;
-  }
-
-  &__caption {
-    position: sticky;
-    left: 0;
-    margin-bottom: $spacing-unit * 2;
-    text-align: left;
-    font-size: pxToEm(18);
-
-    &:first-letter {
-      text-transform: capitalize;
-    }
-  }
-
-  &__table {
-    border-collapse: collapse;
-    width: 100%;
-  }
-
-  &__row {
-    &--body:not(:last-of-type) {
-      border-bottom: pxToRem(1) solid $border-color;
-    }
-
-    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):hover,
-    &--body:not(#{&}--isFullWidth):not(#{&}--isSelected):focus {
-      background-color: rgba($neutral-dark, 0.03);
-      transition: background-color 0.1s ease-in-out;
-    }
-
-    &--isFullWidth td {
-      padding: $spacing-unit;
-      background-color: rgba($neutral-dark, 0.03);
-    }
-
-    &--isClickable {
-      cursor: pointer;
-    }
-
-    &--isSelected {
-      background-color: rgba($primary-color, 0.1);
-      color: $primary-color;
-    }
-
-    &--body td {
-      font-size: pxToEm(14);
-    }
-  }
-
-  &__column {
-    position: sticky;
-    top: 0;
-    z-index: 3;
-    background-color: $neutral-light;
-    padding: $spacing-unit $spacing-unit * 1.5;
-    text-align: left;
-    white-space: nowrap;
-    font-size: pxToEm(12);
-    font-weight: normal;
-    color: $neutral-dark-1;
-
-    &:first-letter {
-      text-transform: capitalize;
-    }
-
-    /* Workaround for sticky header border-bottom */
-    &:after {
-      content: '';
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      height: pxToRem(1);
-      background-color: $border-color;
-    }
-  }
-
-  &__body {
-    vertical-align: middle;
-  }
-
-  &__row--body,
-  &__cell {
-    vertical-align: inherit;
-  }
-
-  &__cell {
-    &:not(#{&}--isFullWidth) {
-      padding: $spacing-unit * 2 $spacing-unit * 1.5;
-      white-space: nowrap;
-    }
-
-    &--isFullWidth span {
-      position: sticky;
-      left: 50%;
-      transform: translateX(-50%);
-      display: inline-block;
-    }
-  }
-
-  &__emptyState {
-    flex: 1;
-  }
-
-  &--isLoading &__overlay {
-    opacity: 0.5;
-    pointer-events: all;
-  }
-
-  &__overlay {
-    position: absolute;
-    overflow: hidden;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    border-radius: pxToRem(10);
-    background-color: $neutral-light;
-    z-index: 4;
-    opacity: 0;
-    transition: 0.15s opacity ease-in-out;
-    cursor: wait;
-    pointer-events: none;
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      transform: translateX(-100%);
-      background-image: linear-gradient(
-        90deg,
-        rgba($neutral-dark-3, 0) 0,
-        rgba($neutral-dark-3, 0.2) 20%,
-        rgba($neutral-dark-3, 0.5) 60%,
-        rgba($neutral-dark-3, 0)
-      );
-      animation: shimmer 2s infinite;
-    }
-
-    @keyframes shimmer {
-      100% {
-        transform: translateX(100%);
-      }
-    }
-  }
-
-  &__loader {
-    width: pxToRem(32);
-    height: pxToRem(32);
-
-    &--isSmall {
-      display: inline-block;
-      vertical-align: middle;
-      width: pxToRem(24);
-      height: pxToRem(24);
-    }
-  }
-
-  &__footer {
-    padding: $spacing-unit * 2 $spacing-unit * 1.5 0;
-    display: flex;
-    align-items: center;
-    font-size: pxToEm(14);
-  }
-
-  .footer {
-    &__details,
-    &__pagination {
-      flex: 1;
-    }
-
-    &__results {
-      font-variant-numeric: tabular-nums;
-      color: $neutral-dark-1;
-    }
-
-    &__results strong {
-      color: $neutral-dark;
-    }
-
-    &__pagination {
-      text-align: right;
-    }
-
-    &__pagination button {
-      box-shadow: 0 pxToRem(1) pxToRem(2) rgba($neutral-dark, 0.08);
-      border-radius: pxToRem(10);
-      border: pxToRem(1) solid $border-color;
-      padding: pxToRem(6) pxToRem(10);
-      transition: background-color 0.15s;
-
-      &:hover {
-        background-color: rgba($neutral-dark, 0.05);
-      }
-
-      &:focus {
-        box-shadow: 0 0 0 pxToEm(3) scale-color($blue, $lightness: 70%);
-      }
-
-      &:disabled {
-        box-shadow: none;
-        border-color: $neutral-light-1;
-        background-color: $neutral-light-1;
-        color: $neutral-dark-2;
-        cursor: not-allowed;
-        user-select: none;
-      }
-
-      &:last-of-type {
-        margin-left: $spacing-unit;
-      }
-    }
-  }
-}
+@import 'index';
 </style>