@citizenplane/pimp 18.7.0 → 18.8.0

package/src/components/CpSwitch.vue

@@ -32,11 +32,10 @@
 import { computed, useId } from 'vue'
 import { useWebHaptics } from 'web-haptics/vue'
 
-import { Haptics } from '@/constants/Hapitcs'
-
 import CpTooltip from '@/components/CpTooltip.vue'
 
 import { ToggleColors } from '@/constants'
+import { Haptics } from '@/constants/Hapitcs'
 import { capitalizeFirstLetter } from '@/helpers'
 
 interface Props {
@@ -135,6 +134,7 @@ const handleClick = (value: boolean): void => {
 
 .cpSwitch {
   --cp-switch-base-height: var(--cp-dimensions-5);
+
   align-items: center;
 
   &,
@@ -163,15 +163,15 @@ const handleClick = (value: boolean): void => {
   }
 
   &__tooltip {
-    color: var(--cp-foreground-quaternary);
     padding: var(--cp-spacing-sm);
+    color: var(--cp-foreground-quaternary);
   }
 
   &--hasLabel {
     display: grid;
-    grid-template-columns: min-content 1fr;
-    grid-gap: var(--cp-spacing-lg);
     align-items: flex-start;
+    gap: var(--cp-spacing-lg);
+    grid-template-columns: min-content 1fr;
   }
 
   &--isReversed {
@@ -182,6 +182,40 @@ const handleClick = (value: boolean): void => {
     }
   }
 
+  &__knobContainer {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    padding: var(--cp-dimensions-0_5);
+    transition: transform 300ms var(--cp-easing-elastic);
+  }
+
+  &__knob {
+    width: calc(var(--cp-switch-base-height) - var(--cp-dimensions-1));
+    height: calc(var(--cp-switch-base-height) - var(--cp-dimensions-1));
+    border-radius: var(--cp-radius-full);
+    background-color: var(--cp-foreground-white);
+    box-shadow: var(--cp-shadows-3xs);
+  }
+
+  &--isActive .cpSwitch {
+    &__knobContainer {
+      transform: translate3d(50%, 0, 0);
+    }
+  }
+
+  &__switch {
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    width: calc(var(--cp-switch-base-height) * 2);
+    height: var(--cp-switch-base-height);
+    border-radius: var(--cp-radius-full);
+    background-color: var(--cp-background-quaternary);
+    margin-block: var(--cp-spacing-xs);
+    transition: background-color 100ms ease-out;
+  }
+
   &--isDisabled,
   &--isDisabled:hover {
     &,
@@ -190,8 +224,8 @@ const handleClick = (value: boolean): void => {
     }
 
     .cpSwitch__switch {
-      background-color: var(--cp-background-disabled);
       border: var(--cp-dimensions-0_25) solid var(--cp-border-disabled);
+      background-color: var(--cp-background-disabled);
     }
 
     .cpSwitch__label,
@@ -200,10 +234,10 @@ const handleClick = (value: boolean): void => {
     }
 
     .cpSwitch__knob {
-      background-color: var(--cp-foreground-disabled);
-      box-shadow: none;
       width: calc(var(--cp-switch-base-height) * 0.5 - var(--cp-dimensions-0_5));
       height: calc(var(--cp-switch-base-height) * 0.5 - var(--cp-dimensions-0_5));
+      background-color: var(--cp-foreground-disabled);
+      box-shadow: none;
     }
 
     .cpSwitch__knobContainer {
@@ -211,52 +245,17 @@ const handleClick = (value: boolean): void => {
     }
   }
 
-  &--isActive .cpSwitch {
-    &__knobContainer {
-      transform: translate3d(50%, 0, 0);
-    }
-  }
-
   @include cp-switch-style(var(--cp-background-accent-solid), 'Accent');
-
   @include cp-switch-style(var(--cp-background-accent-solid), 'Purple'); // TODO: Should be replace by ACCENT
 
-  &__switch {
-    position: relative;
-    border-radius: var(--cp-radius-full);
-    background-color: var(--cp-background-quaternary);
-    overflow: hidden;
-    transition: background-color 100ms ease-out;
-    display: flex;
-    height: var(--cp-switch-base-height);
-    width: calc(var(--cp-switch-base-height) * 2);
-    margin-block: var(--cp-spacing-xs);
-  }
-
   input {
     position: absolute;
     z-index: 1;
     top: 0;
     left: 0;
-    opacity: 0;
     width: 100%;
     height: 100%;
-  }
-
-  &__knobContainer {
-    width: 100%;
-    padding: var(--cp-dimensions-0_5);
-    display: flex;
-    align-items: center;
-    transition: transform 300ms var(--cp-easing-elastic);
-  }
-
-  &__knob {
-    background-color: var(--cp-foreground-white);
-    border-radius: var(--cp-radius-full);
-    box-shadow: var(--cp-shadows-3xs);
-    width: calc(var(--cp-switch-base-height) - var(--cp-dimensions-1));
-    height: calc(var(--cp-switch-base-height) - var(--cp-dimensions-1));
+    opacity: 0;
   }
 }
 </style>

package/src/components/CpTable.vue

@@ -120,20 +120,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, useId, watch, useSlots } from 'vue'
-
 import type { MenuItemCommandEvent } from 'primevue/menuitem'
-
-import { CpTableColumnObject } from '@/constants/CpTableColumn'
+import { computed, ref, useId, useSlots, watch } from 'vue'
 
 import CpContextualMenu from '@/components/CpContextualMenu.vue'
 import CpTableEmptyState from '@/components/CpTableEmptyState.vue'
 import CpTableFooter from '@/components/CpTableFooter.vue'
 
-import { camelize, decamelize } from '@/helpers/string'
-
 import { RESERVED_KEYS, VISIBLE_ROWS_MAX } from '@/constants'
+import { CpTableColumnObject } from '@/constants/CpTableColumn'
 import { capitalizeFirstLetter } from '@/helpers'
+import { camelize, decamelize } from '@/helpers/string'
 
 interface Emits {
   (evt: 'onRowClick', data: Record<string, unknown>): void
@@ -564,33 +561,24 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
   &__container {
     position: relative;
     display: flex;
-    flex-direction: column;
     flex: 1;
+    flex-direction: column;
 
     &--hasPagination {
       border-bottom: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
     }
   }
 
-  /* Standard Tables */
-  &__container[role='region'][aria-labelledby][tabindex] {
-    overflow: auto;
-  }
-
-  &__container[role='region'][aria-labelledby][tabindex]:focus {
-    border-radius: var(--cp-radius-md-lg);
-    box-shadow: 0 0 0 calc(var(--cp-dimensions-0_5) * 1.5) var(--cp-focus);
-  }
-
-  &__container[role='region'][aria-labelledby][tabindex] &__table {
-    margin: 0;
-    border: none;
+  &__table {
+    width: 100%;
+    border-collapse: collapse;
   }
 
   /* Scrolling Visual Cue */
   &__container[role='region'][aria-labelledby][tabindex] {
     @extend %u-scrolling-visual-cue;
 
+    overflow: auto;
     background:
       linear-gradient(
         to right,
@@ -614,36 +602,50 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
           color-mix(in srgb, #{var(--cp-colors-grey-shadow-color-50)} 0%, transparent)
         )
         0 100%;
-    background-repeat: no-repeat;
+    background-attachment: local, local, scroll, scroll;
     background-color: var(--cp-background-white);
-    background-size:
-      var(--cp-dimensions-10) 100%,
-      var(--cp-dimensions-10) 100%,
-      var(--cp-dimensions-3_5) 100%,
-      var(--cp-dimensions-3_5) 100%;
     background-position:
       0 0,
       100%,
       0 0,
       100%;
-    background-attachment: local, local, scroll, scroll;
+    background-repeat: no-repeat;
+    background-size:
+      var(--cp-dimensions-10) 100%,
+      var(--cp-dimensions-10) 100%,
+      var(--cp-dimensions-3_5) 100%,
+      var(--cp-dimensions-3_5) 100%;
+  }
+
+  &__container[role='region'][aria-labelledby][tabindex]:focus {
+    border-radius: var(--cp-radius-md-lg);
+    box-shadow: 0 0 0 calc(var(--cp-dimensions-0_5) * 1.5) var(--cp-focus);
+  }
+
+  &__container[role='region'][aria-labelledby][tabindex] &__table {
+    border: none;
+    margin: 0;
   }
 
   &__caption {
     position: sticky;
     left: 0;
     margin-bottom: var(--cp-spacing-xl);
-    text-align: left;
     font-size: var(--cp-text-size-lg);
+    text-align: left;
 
-    &:first-letter {
+    &::first-letter {
       text-transform: capitalize;
     }
   }
 
-  &__table {
-    border-collapse: collapse;
-    width: 100%;
+  &__body {
+    vertical-align: middle;
+  }
+
+  &__row--body,
+  &__cell {
+    vertical-align: inherit;
   }
 
   &__row {
@@ -684,30 +686,30 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
 
   &__column {
     position: sticky;
-    top: 0;
     z-index: 3;
+    top: 0;
     padding: var(--cp-spacing-md) var(--cp-spacing-lg);
-    text-align: left;
-    white-space: nowrap;
+    background-color: var(--cp-background-primary);
+    color: var(--cp-text-secondary);
     font-size: var(--cp-text-size-xs);
-    line-height: var(--cp-line-height-xs);
     font-weight: normal;
-    color: var(--cp-text-secondary);
-    background-color: var(--cp-background-primary);
+    line-height: var(--cp-line-height-xs);
+    text-align: left;
+    white-space: nowrap;
 
-    &:first-letter {
+    &::first-letter {
       text-transform: capitalize;
     }
 
     /* Workaround for sticky header border-bottom */
-    &:after {
-      content: '';
+    &::after {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       height: var(--cp-dimensions-0_25);
       background-color: var(--cp-border-soft);
+      content: '';
     }
 
     &--isOptions {
@@ -728,15 +730,6 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
     }
   }
 
-  &__body {
-    vertical-align: middle;
-  }
-
-  &__row--body,
-  &__cell {
-    vertical-align: inherit;
-  }
-
   &__cell {
     &:not(#{&}--isFullWidth):not(#{&}--isOptions) {
       padding: var(--cp-spacing-xl) var(--cp-spacing-lg);
@@ -750,8 +743,8 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
 
     &--isFullWidth > * {
       left: 50%;
-      transform: translateX(-50%);
       display: inline-block;
+      transform: translateX(-50%);
     }
 
     &--isOptions {
@@ -777,8 +770,8 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
       }
 
       &:is(:hover, :focus):not(:disabled) {
-        box-shadow: none;
         background-color: var(--cp-background-primary-hover);
+        box-shadow: none;
         color: var(--cp-foreground-primary);
       }
 
@@ -798,18 +791,18 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
       }
 
       &:focus {
-        outline: none !important;
         box-shadow: 0 0 0 calc(var(--cp-dimensions-0_5) * 1.5) var(--cp-focus);
+        outline: none !important;
       }
     }
 
     @mixin cp-table-only-default-action-visible-style {
       padding: var(--cp-spacing-sm);
+      border-radius: var(--cp-radius-md);
+      background-color: var(--cp-background-primary);
       box-shadow:
         var(--cp-shadows-3xs),
         0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
-      border-radius: var(--cp-radius-md);
-      background-color: var(--cp-background-primary);
     }
 
     // Solo default action mode
@@ -850,17 +843,17 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
     // Actions wrapper on desktop : displayed only if there are quick actions inside
     &__cell--isOptions .cpTable__actions {
       position: absolute;
-      opacity: 0;
       top: 50%;
-      transform: translateY(-50%);
       right: var(--cp-dimensions-3);
       display: inline-flex;
       overflow: hidden;
+      border-radius: var(--cp-radius-md);
+      background-color: var(--cp-background-primary);
       box-shadow:
         var(--cp-shadows-3xs),
         0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
-      border-radius: var(--cp-radius-md);
-      background-color: var(--cp-background-primary);
+      opacity: 0;
+      transform: translateY(-50%);
 
       &:has(.cpTable__action:only-child) {
         right: var(--cp-dimensions-4);
@@ -882,38 +875,22 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
     flex: 1;
   }
 
-  &--isLoading &__overlay {
-    opacity: 0.5;
-    pointer-events: all;
-
-    &::after {
-      animation-play-state: running;
-    }
-  }
 
   &__overlay {
     position: absolute;
+    z-index: 4;
     overflow: hidden;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
     border-radius: var(--cp-radius-md-lg);
     background-color: var(--cp-background-primary);
-    z-index: 4;
-    opacity: 0;
-    transition: 0.15s opacity ease-in-out;
     cursor: wait;
+    inset: 0;
+    opacity: 0;
     pointer-events: none;
+    transition: 0.15s opacity ease-in-out;
 
     &::after {
-      content: '';
       position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      transform: translate3d(-100%, 0, 0);
+      animation: shimmer 2s infinite paused;
       background-image: linear-gradient(
         90deg,
         color-mix(in srgb, #{var(--cp-colors-grey-shadow-color-20)} 0%, transparent) 0,
@@ -921,7 +898,9 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
         color-mix(in srgb, #{var(--cp-colors-grey-shadow-color-20)} 50%, transparent) 60%,
         color-mix(in srgb, #{var(--cp-colors-grey-shadow-color-20)} 0%, transparent)
       );
-      animation: shimmer 2s infinite paused;
+      content: '';
+      inset: 0;
+      transform: translate3d(-100%, 0, 0);
     }
 
     @keyframes shimmer {
@@ -930,5 +909,14 @@ defineExpose({ hideContextualMenu, resetPagination, currentRowData })
       }
     }
   }
+
+  &--isLoading &__overlay {
+    opacity: 0.5;
+    pointer-events: all;
+
+    &::after {
+      animation-play-state: running;
+    }
+  }
 }
 </style>

package/src/components/CpTableColumnEditor.vue

@@ -81,7 +81,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useTemplateRef, useId } from 'vue'
+import { computed, ref, useId, useTemplateRef } from 'vue'
 
 import type { CpTableColumnObject } from '@/constants/CpTableColumn'
 
@@ -149,21 +149,21 @@ const handleDropdownShown = () => {
 
 <style lang="scss">
 .cpTableColumnEditor {
-  text-align: right;
   padding-bottom: var(--cp-spacing-xs);
+  text-align: right;
 
   &__trigger {
     @extend %u-focus-outline;
 
-    color: var(--cp-text-secondary);
     border-radius: var(--cp-radius-md);
+    color: var(--cp-text-secondary);
 
     &--isOpen,
     &:hover,
     &:focus-within {
-      transform: none;
-      outline-offset: 0;
       background-color: var(--cp-background-primary-hover);
+      outline-offset: 0;
+      transform: none;
     }
   }
 
@@ -183,24 +183,24 @@ const handleDropdownShown = () => {
     padding-inline: var(--cp-spacing-lg);
   }
 
+  &__column,
+  &__empty {
+    font-size: var(--cp-text-size-sm);
+  }
+
+  &__column {
+    text-transform: capitalize;
+  }
+
   &__heading,
   &__column:not(:has(.cpTableColumnEditor__checkbox)) {
     padding: var(--cp-spacing-sm) var(--cp-spacing-lg);
   }
 
   &__heading {
+    color: var(--cp-text-secondary);
     font-size: var(--cp-text-size-xs);
     line-height: var(--cp-line-height-md);
-    color: var(--cp-text-secondary);
-  }
-
-  &__column,
-  &__empty {
-    font-size: var(--cp-text-size-sm);
-  }
-
-  &__column {
-    text-transform: capitalize;
   }
 
   &__empty {
@@ -213,8 +213,8 @@ const handleDropdownShown = () => {
   }
 
   &__checkbox {
-    color: var(--cp-text-primary);
     padding: var(--cp-spacing-sm) var(--cp-spacing-md);
+    color: var(--cp-text-primary);
   }
 }
 </style>

package/src/components/CpTableEmptyState.vue

@@ -20,17 +20,17 @@ defineProps<Props>()
 
 <style lang="scss">
 .cpTableEmptyState {
-  padding: 10vh var(--cp-spacing-xl);
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 10vh var(--cp-spacing-xl);
 
   &__icon {
-    margin-bottom: var(--cp-spacing-2xl);
-    border-radius: var(--cp-radius-sm);
     display: inline-block;
-    background-color: var(--cp-background-secondary);
     padding: var(--cp-spacing-xl);
+    border-radius: var(--cp-radius-sm);
+    margin-bottom: var(--cp-spacing-2xl);
+    background-color: var(--cp-background-secondary);
     color: var(--cp-foreground-secondary);
   }
 

package/src/components/CpTableFooter.vue

@@ -98,15 +98,15 @@ const pageLastResultIndex = computed(() => {
 <style scoped lang="scss">
 .cpTableFooter {
   position: sticky;
-  bottom: var(--cp-spacing-md);
   z-index: 3;
+  bottom: var(--cp-spacing-md);
 
   &__loader {
     display: inline-flex;
     align-items: center;
-    gap: var(--cp-spacing-sm);
     color: var(--cp-text-secondary);
     font-size: var(--cp-text-size-sm);
+    gap: var(--cp-spacing-sm);
     line-height: var(--cp-line-height-sm);
   }
 

package/src/components/CpTableFooterDesktop.vue

@@ -57,8 +57,8 @@ const emit = defineEmits<Emits>()
   }
 
   &__results {
-    font-variant-numeric: tabular-nums;
     color: var(--cp-text-secondary);
+    font-variant-numeric: tabular-nums;
   }
 
   &__results strong {
@@ -66,8 +66,8 @@ const emit = defineEmits<Emits>()
   }
 
   &__pagination {
-    justify-content: flex-end;
     display: flex;
+    justify-content: flex-end;
     gap: var(--cp-spacing-md);
   }
 }

package/src/components/CpTableFooterDetails.vue

@@ -35,17 +35,17 @@ const paginationResultsDetails = computed(() => {
 <style lang="scss">
 .cpTableFooterDetails {
   &__paginationLabel {
-    font-weight: 600;
     color: var(--cp-text-primary);
     font-size: var(--cp-text-size-xs);
+    font-weight: 600;
     line-height: var(--cp-line-height-xs);
   }
 
   &__resultsCount,
   &__noResults {
-    font-weight: 500;
     color: var(--cp-text-secondary);
     font-size: var(--cp-text-size-xs);
+    font-weight: 500;
     line-height: var(--cp-line-height-xs);
   }
 }

package/src/components/CpTableFooterMobile.vue

@@ -47,16 +47,16 @@ const emit = defineEmits<Emits>()
 
 <style scoped lang="scss">
 .cpTableFooterMobile {
+  z-index: 3;
   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;
+  box-shadow: var(--cp-shadows-overlay);
+  font-size: var(--cp-text-size-sm);
+  gap: var(--cp-spacing-md);
 
   .cpButton--isDisabled {
     background: var(--cp-background-primary);

package/src/components/CpTabs.vue

@@ -192,8 +192,8 @@ watch(
 @include mx.media-query-min(769px) {
   .cpTabs {
     &__tab--isActive {
-      border-bottom-right-radius: 0;
       border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
     }
   }
 }