@citizenplane/pimp 18.6.2 → 18.8.0

package/src/components/CpDate.vue

@@ -55,13 +55,14 @@
 </template>
 
 <script setup lang="ts">
-import { Info, DateTime } from 'luxon'
-import { ref, computed, watch, useId } from 'vue'
+import { DateTime, Info } from 'luxon'
+import { computed, ref, useId, watch } from 'vue'
+
+import type { Sizes } from '@/constants'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 
 import { HUMAN_MAX_AGE } from '@/constants'
-import type { Sizes } from '@/constants'
 import { capitalizeFirstLetter } from '@/helpers'
 
 interface Emits {
@@ -101,7 +102,6 @@ const props = withDefaults(defineProps<Props>(), {
   disabled: false,
   isInvalid: false,
   errorMessage: '',
-  // eslint-disable-next-line vue/no-boolean-default
   displayErrorMessage: true,
   autocompleteBirthday: false,
   locale: () => navigator.language,
@@ -317,24 +317,21 @@ watch(year, handleUpdate)
   // Hide arrows from number input
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
     margin: 0;
+    appearance: none;
   }
 
   input[type='number'] {
     appearance: textfield;
-    -moz-appearance: textfield;
   }
 
   // Remove select style
   select {
+    border: none;
     appearance: none;
     outline: none;
-    border: none;
   }
-}
 
-.cpDate {
   input::placeholder,
   &__month--isEmpty {
     color: var(--cp-text-placeholder);
@@ -342,12 +339,12 @@ watch(year, handleUpdate)
 
   &__inputs {
     display: flex;
+    overflow: hidden;
+    border-radius: var(--cp-radius-md-lg);
+    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-lg);
-    overflow: hidden;
-    background-color: var(--cp-background-primary);
 
     &:hover {
       border-color: var(--cp-border-soft-hover);
@@ -362,51 +359,6 @@ watch(year, handleUpdate)
     line-height: var(--cp-line-height-md);
   }
 
-  &--lg {
-    .cpDate__day,
-    .cpDate__year {
-      padding: var(--cp-spacing-lg) var(--cp-spacing-xl);
-      font-size: var(--cp-text-size-md);
-    }
-
-    .cpDate__month select {
-      padding: var(--cp-spacing-lg) var(--cp-dimensions-8) var(--cp-spacing-lg) var(--cp-spacing-xl);
-      font-size: var(--cp-text-size-md);
-    }
-  }
-
-  &--md {
-    .cpDate__day,
-    .cpDate__year {
-      padding: var(--cp-spacing-md) var(--cp-spacing-xl);
-      font-size: var(--cp-text-size-sm);
-    }
-
-    .cpDate__month select {
-      padding: var(--cp-spacing-md) calc(var(--cp-dimensions-1) * 7) var(--cp-spacing-md) var(--cp-spacing-lg);
-      font-size: var(--cp-text-size-sm);
-    }
-  }
-
-  &--sm {
-    .cpDate__day,
-    .cpDate__year {
-      padding: var(--cp-spacing-sm) var(--cp-spacing-lg);
-      font-size: var(--cp-text-size-sm);
-    }
-
-    .cpDate__month select {
-      padding: var(--cp-spacing-sm) var(--cp-dimensions-8) var(--cp-spacing-sm) var(--cp-spacing-lg);
-      font-size: var(--cp-text-size-sm);
-    }
-  }
-
-  &__divider {
-    flex-shrink: 0;
-    width: var(--cp-dimensions-0_25);
-    background-color: var(--cp-border-soft);
-  }
-
   &__month,
   &__day,
   &__year {
@@ -424,19 +376,17 @@ watch(year, handleUpdate)
       width: var(--cp-dimensions-5);
       height: var(--cp-dimensions-5);
       background-color: var(--cp-text-secondary);
+      content: '';
       mask-image: url('@/assets/images/icons/chevron-down-icon.svg');
-      mask-size: cover;
       mask-repeat: no-repeat;
-      -webkit-mask-image: url('@/assets/images/icons/chevron-down-icon.svg');
-      -webkit-mask-size: cover;
-      -webkit-mask-repeat: no-repeat;
-      transform: translateY(-50%);
-      content: '';
+      mask-size: cover;
       pointer-events: none;
+      transform: translateY(-50%);
     }
 
     select {
       @extend %u-text-ellipsis;
+
       width: 100%;
       color: inherit;
       cursor: pointer;
@@ -454,30 +404,60 @@ watch(year, handleUpdate)
 
   &__day,
   &__year {
-    flex: 0 0 30%;
     width: 100%;
+    flex: 0 0 30%;
   }
 
-  &--isInvalid {
-    .cpDate__inputs,
-    .cpDate__inputs:hover {
-      box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-error-solid);
+
+  &--lg {
+    .cpDate__day,
+    .cpDate__year {
+      padding: var(--cp-spacing-lg) var(--cp-spacing-xl);
+      font-size: var(--cp-text-size-md);
     }
 
-    .cpDate__inputs:focus-within {
-      outline: var(--cp-dimensions-0_5) solid var(--cp-border-error-solid);
-      box-shadow: 0 0 0 var(--cp-dimensions-0_25) color-mix(in srgb, #{var(--cp-border-error-solid)} 40%, transparent);
+    .cpDate__month select {
+      padding: var(--cp-spacing-lg) var(--cp-dimensions-8) var(--cp-spacing-lg) var(--cp-spacing-xl);
+      font-size: var(--cp-text-size-md);
     }
+  }
 
-    .cpDate__divider {
-      background-color: var(--cp-border-error-solid);
+  &--md {
+    .cpDate__day,
+    .cpDate__year {
+      padding: var(--cp-spacing-md) var(--cp-spacing-xl);
+      font-size: var(--cp-text-size-sm);
+    }
+
+    .cpDate__month select {
+      padding: var(--cp-spacing-md) calc(var(--cp-dimensions-1) * 7) var(--cp-spacing-md) var(--cp-spacing-lg);
+      font-size: var(--cp-text-size-sm);
+    }
+  }
+
+  &--sm {
+    .cpDate__day,
+    .cpDate__year {
+      padding: var(--cp-spacing-sm) var(--cp-spacing-lg);
+      font-size: var(--cp-text-size-sm);
+    }
+
+    .cpDate__month select {
+      padding: var(--cp-spacing-sm) var(--cp-dimensions-8) var(--cp-spacing-sm) var(--cp-spacing-lg);
+      font-size: var(--cp-text-size-sm);
     }
   }
 
+  &__divider {
+    width: var(--cp-dimensions-0_25);
+    flex-shrink: 0;
+    background-color: var(--cp-border-soft);
+  }
+
   &--isDisabled {
     .cpDate__inputs {
-      background: var(--cp-background-disabled);
       border-color: var(--cp-border-disabled);
+      background: var(--cp-background-disabled);
     }
 
     .cpDate__inputs *,
@@ -488,20 +468,36 @@ watch(year, handleUpdate)
 
     .cpDate__month select:disabled {
       color: var(--cp-text-disabled) !important;
-      -webkit-text-fill-color: var(--cp-text-disabled) !important;
       opacity: 1;
+      -webkit-text-fill-color: var(--cp-text-disabled) !important;
     }
 
     .cpDate__month::after {
       opacity: 0.4;
     }
   }
+  
+  &--isInvalid {
+    .cpDate__inputs,
+    .cpDate__inputs:hover {
+      box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-border-error-solid);
+    }
+
+    .cpDate__inputs:focus-within {
+      box-shadow: 0 0 0 var(--cp-dimensions-0_25) color-mix(in srgb, #{var(--cp-border-error-solid)} 40%, transparent);
+      outline: var(--cp-dimensions-0_5) solid var(--cp-border-error-solid);
+    }
+
+    .cpDate__divider {
+      background-color: var(--cp-border-error-solid);
+    }
+  }
 
   &__errorMessage {
     margin-top: var(--cp-spacing-md);
+    color: var(--cp-text-error-primary);
     font-size: var(--cp-text-size-sm);
     line-height: var(--cp-line-height-md);
-    color: var(--cp-text-error-primary);
   }
 }
 </style>

package/src/components/CpDatepicker.vue

@@ -35,7 +35,7 @@
 
 <script setup lang="ts">
 import { DateTime } from 'luxon'
-import { ref, computed, watch, useId } from 'vue'
+import { computed, ref, useId, watch } from 'vue'
 
 import CpInput from '@/components/CpInput.vue'
 
@@ -70,7 +70,6 @@ interface Emits {
 const props = withDefaults(defineProps<Props>(), {
   triggerElementId: '',
   mode: 'single',
-  // eslint-disable-next-line vue/no-boolean-default
   closeAfterSelect: true,
   label: '',
   placeholder: 'Select a date',
@@ -182,8 +181,8 @@ watch(
 
   @media (max-width: 767px) and (min-width: 350px) {
     &__datepicker {
-      left: 0;
       right: 0;
+      left: 0;
       transform: initial;
     }
 

package/src/components/CpDialog.vue

@@ -45,7 +45,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useSlots, onMounted, nextTick, onBeforeUnmount, useId } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, useSlots } from 'vue'
 
 import { getKeyboardFocusableElements, handleTrapFocus } from '@/helpers/dom'
 
@@ -135,12 +135,12 @@ $dialog-breakpoint: 550px;
 
 .cpDialog {
   position: fixed;
+  z-index: 3;
   width: 100%;
   max-width: 100%;
   height: 100%;
   max-height: 100%;
   inset: 0;
-  z-index: 3;
   transition-duration: 300ms;
 
   @media screen and (min-width: calc(#{$dialog-breakpoint} + 1px)) {
@@ -170,16 +170,16 @@ $dialog-breakpoint: 550px;
     transition: opacity 250ms ease;
 
     &--isClosableOnClickOutside {
-      pointer-events: auto;
       z-index: 0;
       cursor: pointer;
+      pointer-events: auto;
     }
   }
 
   &__container {
     position: relative;
-    display: flex;
     z-index: 2;
+    display: flex;
     overflow: hidden;
     width: 100%;
     max-height: 100%;
@@ -228,8 +228,8 @@ $dialog-breakpoint: 550px;
 
   &__headerText {
     display: flex;
-    flex-direction: column;
     min-width: 0;
+    flex-direction: column;
   }
 
   &__title > * {
@@ -245,26 +245,26 @@ $dialog-breakpoint: 550px;
 
   &__subtitle,
   &__subtitle > p {
+    color: var(--cp-text-secondary);
     font-size: var(--cp-text-size-sm);
     font-weight: 400;
     line-height: var(--cp-line-height-md);
-    color: var(--cp-text-secondary);
   }
 
   &__close {
     display: flex;
-    margin-left: auto;
     align-items: center;
     justify-content: center;
     padding: var(--cp-spacing-sm);
     border-radius: var(--cp-radius-md);
+    margin-left: auto;
     color: var(--cp-foreground-secondary);
     transition: 200ms ease-in-out;
     transition-property: color, background-color;
 
     &:hover {
-      color: var(--cp-foreground-primary);
       background-color: var(--cp-background-secondary);
+      color: var(--cp-foreground-primary);
     }
 
     &:focus-visible {

package/src/components/CpHeading.vue

@@ -25,15 +25,15 @@ defineOptions({
 
 <style lang="scss">
 .cpHeading {
-  &:first-letter {
+  &::first-letter {
     text-transform: capitalize;
   }
 
   &--100 {
     font-size: var(--cp-text-size-xs);
     font-weight: 400;
-    line-height: var(--cp-line-height-xs);
     letter-spacing: var(--cp-letter-spacing-sm);
+    line-height: var(--cp-line-height-xs);
   }
 
   &--200 {
@@ -63,29 +63,29 @@ defineOptions({
   &--600 {
     font-size: var(--cp-text-size-lg);
     font-weight: 500;
-    line-height: var(--cp-line-height-md);
     letter-spacing: var(--cp-letter-spacing-md);
+    line-height: var(--cp-line-height-md);
   }
 
   &--700 {
     font-size: var(--cp-text-size-xl);
     font-weight: 500;
-    line-height: var(--cp-line-height-md);
     letter-spacing: var(--cp-letter-spacing-md);
+    line-height: var(--cp-line-height-md);
   }
 
   &--800 {
     font-size: var(--cp-text-size-3xl);
     font-weight: 500;
-    line-height: var(--cp-line-height-2xl);
     letter-spacing: var(--cp-letter-spacing-md);
+    line-height: var(--cp-line-height-2xl);
   }
 
   &--900 {
     font-size: var(--cp-text-size-4xl);
     font-weight: 500;
-    line-height: var(--cp-line-height-4xl);
     letter-spacing: var(--cp-letter-spacing-md);
+    line-height: var(--cp-line-height-4xl);
   }
 }
 </style>

package/src/components/CpIcon.vue

@@ -77,7 +77,7 @@ const iconAttrs = computed(() => {
   } else {
     // Default to square icon if type is not found
     // @ts-expect-error cannot use string as index type for feather.icons
-    const featherIcon = feather.icons[type.value] || feather.icons['square']
+    const featherIcon = feather.icons[type.value] || feather.icons.square
     return {
       ...featherIcon.attrs,
       ...attrs,
@@ -99,8 +99,8 @@ const iconAttrs = computed(() => {
   }
 
   &__content {
-    height: inherit;
     width: inherit;
+    height: inherit;
     vertical-align: top;
   }
 }

package/src/components/CpInput.vue

@@ -51,11 +51,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, useAttrs, useSlots, computed, nextTick, onMounted, useId } from 'vue'
+import { computed, nextTick, onMounted, ref, useAttrs, useId, useSlots } from 'vue'
+
+import type { Sizes } from '@/constants'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 
-import type { Sizes } from '@/constants'
 import { capitalizeFirstLetter } from '@/helpers'
 
 interface Emits {
@@ -94,8 +95,7 @@ defineOptions({ inheritAttrs: false })
 const attrs = useAttrs()
 
 // class is a reserved word, we can't remove 'class' property from attrs
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const { ['class']: value, id, ...restAttributes } = attrs
+const { class: _class, id, ...restAttributes } = attrs
 
 const inputIdentifier = ref<string>((id as string | undefined) || useId())
 
@@ -123,7 +123,7 @@ const cpInputContainer = ref<HTMLDivElement | null>(null)
 const isDisabled = computed(() => checkAttribute('disabled'))
 const isRequired = computed(() => checkAttribute('required'))
 
-const isEmail = computed(() => attrs['type'] === 'email')
+const isEmail = computed(() => attrs.type === 'email')
 
 const dynamicClasses = computed(() => {
   return [
@@ -191,17 +191,9 @@ onMounted(async () => {
   display: flex;
   flex-direction: column;
 
-  &:has(.cpInput__help, .cpInput__error) .cpInput__container {
-    margin-bottom: var(--cp-spacing-md);
-  }
-
-  &:has(.v-popper__popper--shown) {
-    z-index: 3;
-  }
-
   &__container {
-    z-index: 1;
     position: relative;
+    z-index: 1;
     display: flex;
 
     * {
@@ -209,17 +201,25 @@ onMounted(async () => {
     }
   }
 
+  &:has(.cpInput__help, .cpInput__error) .cpInput__container {
+    margin-bottom: var(--cp-spacing-md);
+  }
+
+  &:has(.v-popper__popper--shown) {
+    z-index: 3;
+  }
+
   &__inner {
+    width: 100%;
+    padding: var(--cp-spacing-md) var(--cp-spacing-xl);
+    border-radius: var(--cp-radius-md);
+    appearance: none;
     box-shadow:
       var(--cp-shadows-3xs-inset),
       0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
-    appearance: none;
-    border-radius: var(--cp-radius-md);
-    width: 100%;
     color: inherit;
-    padding: var(--cp-spacing-md) var(--cp-spacing-xl);
-    line-height: var(--cp-line-height-md);
     font-size: var(--cp-text-size-sm);
+    line-height: var(--cp-line-height-md);
 
     &:hover {
       box-shadow:
@@ -228,8 +228,8 @@ onMounted(async () => {
     }
 
     &:focus {
-      outline: var(--cp-dimensions-0_5) solid var(--cp-focus);
       background-color: var(--cp-background-primary);
+      outline: var(--cp-dimensions-0_5) solid var(--cp-focus);
     }
 
     &::placeholder {
@@ -237,6 +237,14 @@ onMounted(async () => {
     }
   }
 
+  &--hasNoBorder .cpInput__inner,
+  &--hasNoBorder .cpInput__inner:hover,
+  &--hasNoBorder .cpInput__inner:focus,
+  &--hasNoBorder .cpInput__icon:hover ~ .cpInput__inner {
+    box-shadow: none;
+    outline: transparent;
+  }
+
   &--isInvalid {
     .cpInput__inner,
     .cpInput__inner:hover,
@@ -277,28 +285,19 @@ onMounted(async () => {
     }
   }
 
-  &--hasNoBorder .cpInput__inner,
-  &--hasNoBorder .cpInput__inner:hover,
-  &--hasNoBorder .cpInput__inner:focus,
-  &--hasNoBorder .cpInput__icon:hover ~ .cpInput__inner {
-    outline: transparent;
-    box-shadow: none;
-  }
-
   &__icon {
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    left: var(--cp-dimensions-3_5);
+    display: flex;
+    overflow: hidden;
     width: var(--cp-dimensions-4);
     height: var(--cp-dimensions-4);
-
-    color: var(--cp-foreground-primary);
-    display: flex;
-    align-items: center;
     flex-shrink: 0;
-    left: var(--cp-dimensions-3_5);
-    z-index: 1;
-    position: absolute;
-    top: 50%;
+    align-items: center;
+    color: var(--cp-foreground-primary);
     transform: translateY(-50%);
-    overflow: hidden;
 
     &:hover ~ .cpInput__inner {
       box-shadow: 0 0 0 var(--cp-dimensions-0_25) var(--cp-foreground-accent-primary);
@@ -316,8 +315,8 @@ onMounted(async () => {
     }
 
     &--isAfter {
-      left: auto;
       right: var(--cp-dimensions-3_5);
+      left: auto;
     }
 
     &--isBefore ~ input {
@@ -331,15 +330,15 @@ onMounted(async () => {
 
   &--lg {
     .cpInput__inner {
-      border-radius: var(--cp-radius-lg);
       padding: var(--cp-spacing-lg) var(--cp-spacing-xl);
+      border-radius: var(--cp-radius-lg);
       font-size: var(--cp-text-size-md);
     }
 
     .cpInput__icon {
+      left: var(--cp-spacing-lg);
       width: var(--cp-dimensions-5);
       height: var(--cp-dimensions-5);
-      left: var(--cp-spacing-lg);
     }
 
     .cpInput__icon--isBefore,
@@ -348,8 +347,8 @@ onMounted(async () => {
     }
 
     .cpInput__icon--isAfter {
-      left: auto;
       right: var(--cp-spacing-lg);
+      left: auto;
     }
 
     .cpInput__icon--isAfter ~ input {
@@ -363,8 +362,8 @@ onMounted(async () => {
 
   &--sm {
     .cpInput__inner {
-      border-radius: var(--cp-radius-md);
       padding: var(--cp-spacing-sm) var(--cp-spacing-lg);
+      border-radius: var(--cp-radius-md);
       font-size: var(--cp-text-size-sm);
     }
 
@@ -378,8 +377,8 @@ onMounted(async () => {
     }
 
     .cpInput__icon--isAfter {
-      left: auto;
       right: var(--cp-dimensions-2_5);
+      left: auto;
     }
 
     .cpInput__icon--isBefore ~ input {
@@ -400,23 +399,23 @@ onMounted(async () => {
 
   &--isSearch {
     .cpInput__icon--isAfter {
+      overflow: visible;
       width: auto;
       height: auto;
-      overflow: visible;
     }
 
     .cpInput__clear {
       display: flex;
-      color: var(--cp-foreground-secondary);
-      padding: var(--cp-spacing-sm);
       width: var(--cp-dimensions-6);
       height: var(--cp-dimensions-6);
+      padding: var(--cp-spacing-sm);
       border-radius: var(--cp-radius-full);
       background-color: transparent;
+      color: var(--cp-foreground-secondary);
 
       &:hover {
-        color: var(--cp-foreground-secondary-hover);
         background-color: var(--cp-background-primary-hover);
+        color: var(--cp-foreground-secondary-hover);
       }
 
       &:focus-visible {
@@ -428,7 +427,6 @@ onMounted(async () => {
     .cpInput__clearIcon {
       width: var(--cp-dimensions-4);
       height: var(--cp-dimensions-4);
-
       pointer-events: none;
     }