@citizenplane/pimp 8.9.5 → 8.10.0

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

@@ -1,438 +0,0 @@
-<template>
-  <div class="cpTable" :class="mainClasses">
-    <div
-      ref="cpTableContainer"
-      role="region"
-      :aria-labelledby="uniqueId"
-      tabindex="0"
-      class="cpTable__container"
-      :class="containerClasses"
-    >
-      <table class="cpTable__table">
-        <caption v-if="caption" :id="uniqueId" class="cpTable__caption">
-          {{
-            caption
-          }}
-        </caption>
-        <thead class="cpTable__header">
-          <tr class="cpTable__row cpTable__row--header">
-            <th
-              v-for="column in normalizedColumns"
-              :key="column.id"
-              class="cpTable__column"
-              :style="getColumnStyle(column)"
-            >
-              <slot name="column" :column="column">
-                {{ 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="(rowData, rowIndex) in visibleRows"
-            :key="rowIndex"
-            class="cpTable__row cpTable__row--body"
-            :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="rowData">
-              <td
-                v-for="(cellValue, cellKey, cellIndex) in rowData"
-                :key="`${cellKey}_${rowIndex}`"
-                class="cpTable__cell"
-                :class="getCellClasses(cellKey)"
-                :style="getCellStyle(cellKey, cellIndex)"
-                :colspan="getColspan(cellKey)"
-              >
-                <slot :name="cellKey" :cell="cellValue">
-                  <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">
-                <slot name="row-quick-actions" :row="rowData">
-                  <button type="button" @click.stop="handleRowRightClick({ rowData, rowIndex }, $event)">
-                    <cp-icon type="more-vertical" />
-                  </button>
-                </slot>
-              </td>
-            </slot>
-          </tr>
-        </tbody>
-      </table>
-      <cp-table-empty-state v-if="hasNoResult" :placeholder="noResultPlaceholder" class="cpTable__emptyState" />
-    </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 :color="LoaderColor" class="cpTable__loader--isSmall" /> </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>
-    <div class="cpTable__overlay" />
-  </div>
-</template>
-
-<script>
-import { camelize, decamelize } from '@/helpers/string'
-import { randomString } from '@/helpers'
-
-import CpTableEmptyState from '@/components/lists-and-table/CpTable/CpTableEmptyState/index.vue'
-
-const VISIBLE_ROWS_MAX = 100
-const RESERVED_KEYS = {
-  GROUP_BY: 'groupBy',
-  FULL_WIDTH: 'fullWidth',
-  IS_SELECTED: 'isSelected',
-}
-const PAGINATION_FORMATS = {
-  RESULTS: 'results',
-  PAGES: 'pages',
-}
-const LoaderColor = '#5341F9'
-
-export default {
-  components: {
-    CpTableEmptyState,
-  },
-  props: {
-    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 <= VISIBLE_ROWS_MAX : true
-        const isFooterDetailsFormatValid = value.format
-          ? Object.values(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,
-    },
-  },
-  emits: ['on-row-click', 'on-row-right-click', 'on-next-click', 'on-previous-click'],
-  data() {
-    return {
-      uniqueId: randomString(),
-      pageNumber: 0,
-      LoaderColor,
-    }
-  },
-  computed: {
-    containerDOMElement() {
-      return this.$refs.cpTableContainer
-    },
-    mainClasses() {
-      return {
-        'cpTable--isLoading': this.isLoading,
-      }
-    },
-    containerClasses() {
-      return {
-        'cpTable__container--hasPagination': this.hasPagination,
-      }
-    },
-    normalizedColumns() {
-      if (!this.columns) return []
-      const columns = this.columns.length ? [...this.columns] : [...this.columnsFromRows]
-
-      return columns.map((column) => {
-        if (typeof column === 'string') {
-          return {
-            id: camelize(column),
-            name: decamelize(column),
-          }
-        }
-
-        return {
-          id: column.id || camelize(column.name),
-          ...column,
-        }
-      })
-    },
-    numberOfColumns() {
-      return this.normalizedColumns.length
-    },
-    hasGroupBy() {
-      if (!this.data.length) return false
-
-      return this.data.some((item) => RESERVED_KEYS.GROUP_BY in item)
-    },
-    columnsFromRows() {
-      if (!this.data.length) return []
-
-      const firstRow = this.hasGroupBy ? this.data[0].rows[0] : this.data[0]
-      return Object.keys(firstRow)
-    },
-    numberOfResults() {
-      return this.isServerSidePagination ? this.pagination.server.total : this.flattenedRows.length
-    },
-    hasNoResult() {
-      return this.numberOfResults === 0
-    },
-    rowsPerPageLimit() {
-      return this.pagination.limit || VISIBLE_ROWS_MAX
-    },
-    flattenedRows() {
-      if (!this.data) return []
-
-      if (!this.hasGroupBy) return this.data
-
-      // Transform groupBy key into a row and add it in between others
-      return this.data.reduce((flattenedRows, groupByItem) => {
-        const fullWidthRow = { [RESERVED_KEYS.FULL_WIDTH]: groupByItem.groupBy }
-        return [...flattenedRows, fullWidthRow, ...groupByItem.rows]
-      }, [])
-    },
-    rawVisibleRows() {
-      const dataCopy = [...this.flattenedRows]
-
-      if (this.isServerSidePagination) return dataCopy
-      return this.hasPagination ? dataCopy.splice(this.pagesStartIndex, this.rowsPerPageLimit) : dataCopy
-    },
-    visibleRows() {
-      return this.rawVisibleRows.map((rawRow) => {
-        const normalizedRow = this.normalizeRowData({ rowPayload: rawRow })
-        return this.mapCellToColumn({ rowPayload: normalizedRow })
-      })
-    },
-    paginationState() {
-      return typeof this.pagination === 'boolean' ? this.pagination : this.pagination.enabled
-    },
-    hasPagination() {
-      return this.paginationState || this.numberOfResults > VISIBLE_ROWS_MAX
-    },
-    paginationFormat() {
-      return this.pagination?.format || PAGINATION_FORMATS.PAGES
-    },
-    hasRemainingPages() {
-      return this.numberOfPages > this.activePage
-    },
-    isNextEnabled() {
-      return this.hasRemainingPages && !this.isLoading
-    },
-    hasPreviousPages() {
-      return this.isServerSidePagination ? this.serverActivePage > 0 : this.pagesStartIndex - this.rowsPerPageLimit >= 0
-    },
-    isPreviousEnabled() {
-      return this.hasPreviousPages && !this.isLoading
-    },
-    pagesStartIndex() {
-      return this.pageNumber * this.rowsPerPageLimit
-    },
-    pagesEndIndex() {
-      return this.rowsPerPageLimit * (1 + this.pageNumber)
-    },
-    numberOfPages() {
-      return Math.ceil(this.numberOfResults / this.rowsPerPageLimit)
-    },
-    activePage() {
-      return this.isServerSidePagination ? this.serverActivePage + 1 : this.pageNumber + 1
-    },
-    isServerSidePagination() {
-      if (typeof this.pagination === 'boolean') return false
-      return 'server' in this.pagination
-    },
-    serverActivePage() {
-      return this.pagination.server.activePage
-    },
-    serverPagesStartIndex() {
-      return this.serverActivePage * this.rowsPerPageLimit + 1
-    },
-    serverPagesEndIndex() {
-      return this.rowsPerPageLimit * (1 + this.serverActivePage)
-    },
-    pageFirstResultIndex() {
-      return this.isServerSidePagination ? this.serverPagesStartIndex : this.pagesStartIndex + 1
-    },
-    pageLastResultIndex() {
-      const endIndex = this.isServerSidePagination ? this.serverPagesEndIndex : this.pagesEndIndex
-
-      return this.hasRemainingPages ? endIndex : this.numberOfResults
-    },
-    paginationLabel() {
-      if (this.paginationFormat === PAGINATION_FORMATS.PAGES) {
-        const pluralizedCount = this.numberOfPages > 1 ? 'pages' : 'page'
-
-        return `${this.activePage}/${this.numberOfPages} ${pluralizedCount}`
-      }
-
-      return `${this.pageFirstResultIndex} – ${this.pageLastResultIndex}`
-    },
-    paginationResultsDetails() {
-      const formattedNumberOfResults = new Intl.NumberFormat('en-US').format(this.numberOfResults)
-      const pluralizedCount = this.numberOfResults > 1 ? 'results' : 'result'
-      return `${formattedNumberOfResults} ${pluralizedCount}`
-    },
-  },
-  methods: {
-    getRowPayload(rowIndex) {
-      return this.rawVisibleRows[rowIndex]
-    },
-    handleRowClick(rowData, rowIndex) {
-      if (this.isFullWidthRow(rowData)) return
-
-      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()
-
-      if (isNext) {
-        this.hasRemainingPages && this.augmentOffset()
-        this.$emit('on-next-click')
-        return
-      }
-
-      this.hasPreviousPages && this.decreaseOffset()
-      this.$emit('on-previous-click')
-    },
-    normalizeRowData({ columns = this.normalizedColumns, rowPayload }) {
-      if (!Array.isArray(rowPayload)) {
-        return { ...rowPayload }
-      }
-
-      // from ['cell 1', 'cell 2', 'cell 3']
-      // to { column1: 'cell 1', column2: 'cell 2', column3: 'cell 3' }
-      return rowPayload.reduce((row, cell, cellIndex) => {
-        const normalizedCell = {
-          [columns[cellIndex]?.id]: cell,
-        }
-        return { ...row, ...normalizedCell }
-      }, {})
-    },
-    mapCellToColumn({ columns = this.normalizedColumns, rowPayload }) {
-      if (this.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 correspondingValue = rowPayload[correspondingColumn] || this.emptyCellPlaceholder
-        const cellValue = { [correspondingColumn]: correspondingValue }
-
-        return { ...finalRow, ...cellValue }
-      }, {})
-    },
-    augmentOffset() {
-      if (this.isNextEnabled) this.pageNumber++
-    },
-    decreaseOffset() {
-      if (this.isPreviousEnabled) this.pageNumber--
-    },
-    resetScrollPosition() {
-      this.containerDOMElement.scrollTop = 0
-    },
-    getColumnStyle(columnPayload) {
-      const formattedWidth = columnPayload?.width && `${columnPayload.width}px`
-
-      return {
-        width: formattedWidth,
-        textAlign: columnPayload.textAlign,
-      }
-    },
-    getCellStyle(cellKey, columnIndex) {
-      if (cellKey === RESERVED_KEYS.FULL_WIDTH) return null
-
-      return {
-        textAlign: this.normalizedColumns[columnIndex]?.textAlign,
-      }
-    },
-    getRowClasses(rowData, rowIndex) {
-      return {
-        'cpTable__row--isFullWidth': this.isFullWidthRow(rowData),
-        'cpTable__row--isClickable': !this.isFullWidthRow(rowData) && this.areRowsClickable,
-        'cpTable__row--isSelected': this.isRowSelected(rowIndex),
-      }
-    },
-    getCellClasses(cellKey) {
-      return {
-        'cpTable__cell--isFullWidth': cellKey === RESERVED_KEYS.FULL_WIDTH,
-      }
-    },
-    getColspan(cellKey) {
-      const numberOfColumns = this.enableRowOptions ? this.numberOfColumns + 1 : this.numberOfColumns
-
-      return cellKey === RESERVED_KEYS.FULL_WIDTH ? numberOfColumns : null
-    },
-    getTabindex(rowData) {
-      return this.isFullWidthRow(rowData) ? -1 : 0
-    },
-    isFullWidthRow(rowData) {
-      return RESERVED_KEYS.FULL_WIDTH in rowData
-    },
-    isRowSelected(rowIndex) {
-      return this.rawVisibleRows[rowIndex][RESERVED_KEYS.IS_SELECTED]
-    },
-    areRowOptionsEnabled(rowData) {
-      return this.enableRowOptions && !this.isFullWidthRow(rowData)
-    },
-  },
-}
-</script>
-
-<style lang="scss">
-@import 'index';
-</style>

package/src/components/toggles/CpCheckbox/index.scss

@@ -1,136 +0,0 @@
-@use 'sass:math';
-@import '/src/assets/styles/main';
-
-$cp-checkbox-base-width: px-to-rem(16);
-$cp-checkbox-tick-base-width: px-to-rem(12);
-
-@mixin cp-checkbox-style($color, $className) {
-  &--is#{$className} input:checked {
-    background-color: $color;
-    border-color: $color;
-  }
-
-  &--is#{$className}:hover input {
-    background-color: scale-color($color, $lightness: 95%);
-  }
-
-  &--is#{$className}:hover input:checked {
-    background-color: darken($color, 10%);
-  }
-
-  &--is#{$className} input:focus-visible {
-    position: relative;
-    z-index: 1;
-    outline: px-to-rem(2) solid $color;
-    outline-offset: px-to-rem(2);
-  }
-}
-
-.cpCheckbox {
-  position: relative;
-  display: flex;
-  align-items: flex-start;
-  cursor: pointer;
-
-  @include cp-checkbox-style($secondary-color, 'Blue');
-  @include cp-checkbox-style($primary-color, 'Purple');
-
-
-  &:not(&--isEmpty) {
-    gap: $space-md;
-  }
-
-  &__wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: $space-sm;
-    flex-shrink: 0;
-  }
-
-  input {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    border: px-to-rem(1) solid $neutral-dark-4;
-    border-radius: px-to-rem(4);
-    width: $cp-checkbox-base-width;
-    height: $cp-checkbox-base-width;
-    flex-shrink: 0;
-    cursor: pointer;
-    transition:
-      background-color 0.1s ease-out,
-      transform 0.1s linear;
-    background-color: $neutral-light;
-
-    & + i {
-      position: absolute;
-      z-index: 2;
-      width: $cp-checkbox-tick-base-width;
-      height: $cp-checkbox-tick-base-width;
-      color: $neutral-light;
-      opacity: 0;
-      transition: opacity 0.2s linear 0.1s;
-    }
-
-    & + i svg {
-      stroke-width: 3;
-    }
-
-    &:checked + i {
-      visibility: visible;
-      opacity: 1;
-    }
-
-    &:disabled {
-      background-color: $neutral-light-1;
-      cursor: not-allowed;
-
-      & ~ span {
-        color: $neutral-dark-1;
-      }
-    }
-
-    &:checked:disabled {
-      border-color: $neutral-dark-3;
-      background-color: $neutral-dark-3;
-
-      & ~ span {
-        color: $neutral-dark-3;
-      }
-    }
-
-    &:active:not(:disabled) {
-      transform: scale(0.8);
-    }
-  }
-
-  &--isDisabled {
-    cursor: not-allowed;
-  }
-
-  &--isReversed {
-    flex-direction: row-reverse;
-  }
-
-  &__content {
-    flex: 1;
-  }
-
-  &__label, &__helper {
-    display: block;
-    line-height: px-to-rem(24);
-  }
-
-  &__label {
-    font-weight: 500;
-
-    &--isCapitalized::first-letter {
-      text-transform: capitalize;
-    }
-  }
-
-  &__helper {
-    color: $neutral-dark-1;
-  }
-}