@citizenplane/pimp 18.6.2 → 18.8.0

package/src/components/CpSelectableButton.vue

@@ -79,38 +79,21 @@ const dynamicClasses = computed(() => {
 <style lang="scss">
 .cpSelectableButton {
   display: inline-flex;
-  border-radius: var(--cp-selectable-border-radius);
   padding: var(--cp-selectable-border-padding);
+  border-radius: var(--cp-selectable-border-radius);
+  background-color: var(--cp-selectable-background-color);
+  box-shadow:
+    var(--cp-selectable-box-shadow),
+    0 0 0 var(--cp-dimensions-0_25) var(--cp-selectable-border-color);
+  color: var(--cp-selectable-text-color);
   font-size: var(--cp-selectable-font-size);
-  line-height: var(--cp-selectable-line-height);
   font-weight: 500;
+  line-height: var(--cp-selectable-line-height);
   transition:
     background-color 0.1s ease-out,
     box-shadow 0.1s ease-out,
     color 0.1s ease-out,
     transform 0.15s ease-out;
-  box-shadow:
-    var(--cp-selectable-box-shadow),
-    0 0 0 var(--cp-dimensions-0_25) var(--cp-selectable-border-color);
-  background-color: var(--cp-selectable-background-color);
-  color: var(--cp-selectable-text-color);
-
-  &:hover:not(.cpSelectableButton--isDisabled) {
-    box-shadow:
-      var(--cp-selectable-box-shadow),
-      0 0 0 var(--cp-dimensions-0_25) var(--cp-selectable-border-color-hover);
-    background-color: var(--cp-selectable-background-color-hover);
-    color: var(--cp-selectable-text-color-hover);
-    transform: translateY(var(--cp-dimensions-minus-0_25));
-
-    & > .cpSelectableButton__body {
-      background-color: var(--cp-selectable-body-background-color-hover);
-    }
-  }
-
-  &:active:not(.cpSelectableButton--isDisabled) {
-    transform: translateY(var(--cp-dimensions-0_25));
-  }
 
   &:focus-visible {
     outline: var(--cp-dimensions-0_5) solid var(--cp-background-accent-solid);
@@ -119,25 +102,56 @@ const dynamicClasses = computed(() => {
 
   &__body {
     display: inline-flex;
+    width: 100%;
     align-items: center;
     justify-content: center;
     padding: var(--cp-selectable-body-padding);
-    gap: var(--cp-selectable-body-gap);
-    background-color: var(--cp-selectable-body-background-color);
     border-radius: var(--cp-selectable-body-border-radius);
+    background-color: var(--cp-selectable-body-background-color);
+    gap: var(--cp-selectable-body-gap);
     transition:
       background-color 0.1s ease-out,
       box-shadow 0.1s ease-out,
       color 0.1s ease-out;
-    width: 100%;
+  }
+
+  &--isDisabled {
+    background-color: var(--cp-background-disabled);
+    box-shadow: var(--cp-shadows-3xs);
+    color: var(--cp-text-disabled);
+    cursor: not-allowed;
+    transform: none;
+
+    & > .cpSelectableButton__body {
+      background-color: var(--cp-background-disabled);
+      color: var(--cp-text-disabled);
+      cursor: not-allowed;
+    }
+  }
+
+  &:hover:not(.cpSelectableButton--isDisabled) {
+    background-color: var(--cp-selectable-background-color-hover);
+    box-shadow:
+      var(--cp-selectable-box-shadow),
+      0 0 0 var(--cp-dimensions-0_25) var(--cp-selectable-border-color-hover);
+    color: var(--cp-selectable-text-color-hover);
+    transform: translateY(var(--cp-dimensions-minus-0_25));
+
+    & > .cpSelectableButton__body {
+      background-color: var(--cp-selectable-body-background-color-hover);
+    }
+  }
+
+  &:active:not(.cpSelectableButton--isDisabled) {
+    transform: translateY(var(--cp-dimensions-0_25));
   }
 
   &__icon i,
   &__icon svg {
     width: var(--cp-selectable-icon-size);
     height: var(--cp-selectable-icon-size);
-    aspect-ratio: 1 / 1;
     flex-shrink: 0;
+    aspect-ratio: 1 / 1;
   }
 
   --cp-selectable-border-padding: var(--cp-spacing-sm);
@@ -148,7 +162,6 @@ const dynamicClasses = computed(() => {
   --cp-selectable-body-gap: var(--cp-spacing-sm-md);
   --cp-selectable-body-border-radius: var(--cp-radius-sm);
   --cp-selectable-icon-size: var(--cp-dimensions-5);
-
   --cp-selectable-border-color: transparent;
   --cp-selectable-border-color-hover: transparent;
   --cp-selectable-text-color: var(--cp-foreground-white);
@@ -342,21 +355,21 @@ const dynamicClasses = computed(() => {
     --cp-selectable-text-color: var(--cp-foreground-white);
     --cp-selectable-text-color-hover: var(--cp-foreground-white);
     --cp-selectable-background-color: transparent;
-    --cp-selectable-background-color-hover: color-mix(in srgb, var(--cp-background-white) 10%, transparent);
+    --cp-selectable-background-color-hover: color-mix(in sRGB, var(--cp-background-white) 10%, transparent);
     --cp-selectable-body-background-color: transparent;
     --cp-selectable-body-background-color-hover: transparent;
     --cp-selectable-box-shadow: var(--cp-shadows-3xs-inset);
   }
 
   &--isInverse:is(&--isSelected) {
-    --cp-selectable-border-color: color-mix(in srgb, var(--cp-background-white) 20%, transparent);
-    --cp-selectable-border-color-hover: color-mix(in srgb, var(--cp-background-white) 20%, transparent);
+    --cp-selectable-border-color: color-mix(in sRGB, var(--cp-background-white) 20%, transparent);
+    --cp-selectable-border-color-hover: color-mix(in sRGB, var(--cp-background-white) 20%, transparent);
     --cp-selectable-text-color: var(--cp-foreground-white);
     --cp-selectable-text-color-hover: var(--cp-foreground-white);
     --cp-selectable-background-color: transparent;
     --cp-selectable-background-color-hover: transparent;
-    --cp-selectable-body-background-color: color-mix(in srgb, var(--cp-background-white) 20%, transparent);
-    --cp-selectable-body-background-color-hover: color-mix(in srgb, var(--cp-background-white) 30%, transparent);
+    --cp-selectable-body-background-color: color-mix(in sRGB, var(--cp-background-white) 20%, transparent);
+    --cp-selectable-body-background-color-hover: color-mix(in sRGB, var(--cp-background-white) 30%, transparent);
   }
 
   &--isInverse:is(&--isExpanded) {
@@ -366,8 +379,8 @@ const dynamicClasses = computed(() => {
     --cp-selectable-text-color-hover: var(--cp-foreground-white);
     --cp-selectable-background-color: transparent;
     --cp-selectable-background-color-hover: transparent;
-    --cp-selectable-body-background-color: color-mix(in srgb, var(--cp-background-white) 20%, transparent);
-    --cp-selectable-body-background-color-hover: color-mix(in srgb, var(--cp-background-white) 30%, transparent);
+    --cp-selectable-body-background-color: color-mix(in sRGB, var(--cp-background-white) 20%, transparent);
+    --cp-selectable-body-background-color-hover: color-mix(in sRGB, var(--cp-background-white) 30%, transparent);
   }
 
   &__icon {
@@ -377,23 +390,9 @@ const dynamicClasses = computed(() => {
 
   &__label {
     display: flex;
-    align-items: center;
     flex-shrink: 0;
+    align-items: center;
     padding: var(--cp-spacing-none) var(--cp-spacing-xs);
   }
-
-  &--isDisabled {
-    background-color: var(--cp-background-disabled);
-    color: var(--cp-text-disabled);
-    cursor: not-allowed;
-    box-shadow: var(--cp-shadows-3xs);
-    transform: none;
-
-    & > .cpSelectableButton__body {
-      background-color: var(--cp-background-disabled);
-      color: var(--cp-text-disabled);
-      cursor: not-allowed;
-    }
-  }
 }
 </style>

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>