@citizenplane/pimp 18.6.2 → 18.8.0

package/src/components/CpButton.vue

@@ -29,15 +29,13 @@
 </template>
 
 <script setup lang="ts">
+import type { Slots } from 'vue'
 import { computed, useSlots } from 'vue'
 import { useWebHaptics } from 'web-haptics/vue'
 
-import type { Slots } from 'vue'
-
-import { Haptics } from '@/constants/Hapitcs'
-
 import CpLoader from '@/components/CpLoader.vue'
 
+import { Haptics } from '@/constants/Hapitcs'
 import { capitalizeFirstLetter } from '@/helpers'
 
 export interface Props {
@@ -110,8 +108,8 @@ const handleClick = (event: MouseEvent) => {
   &--isPrimary#{&}--is#{$className} {
     &:not(:disabled) {
       background-color: $backgroundColor;
-      color: $color;
       box-shadow: var(--cp-shadows-3xs);
+      color: $color;
 
       &:hover {
         background-color: $hoverBackgroundColor;
@@ -131,10 +129,10 @@ const handleClick = (event: MouseEvent) => {
   &--isSecondary#{&}--is#{$className} {
     &:not(:disabled) {
       background-color: var(--cp-background-primary);
-      color: $color;
       box-shadow:
         var(--cp-shadows-3xs-inset),
         0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
+      color: $color;
 
       &:hover {
         background-color: var(--cp-background-primary-hover);
@@ -175,27 +173,27 @@ const handleClick = (event: MouseEvent) => {
 }
 
 .cpButton {
-  border-radius: var(--cp-radius-full);
   padding: var(--cp-spacing-md) var(--cp-spacing-lg);
+  border-radius: var(--cp-radius-full);
+  cursor: pointer;
+  font-weight: 500;
   line-height: var(--cp-line-height-md);
+  outline-offset: fn.px-to-rem(2);
   text-decoration: none;
-  font-weight: 500;
-  transition-property: box-shadow, background-color, transform, width;
   transition-duration: 150ms;
+  transition-property: box-shadow, background-color, transform, width;
   transition-timing-function: ease;
-  outline-offset: fn.px-to-rem(2);
-  cursor: pointer;
-
-  &,
-  &:visited {
-    color: var(--cp-text-primary);
-  }
 
   &,
   &__body {
     display: inline-flex;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
+  }
+
+  &,
+  &:visited {
+    color: var(--cp-text-primary);
   }
 
   &:hover {
@@ -278,8 +276,8 @@ const handleClick = (event: MouseEvent) => {
   );
 
   &--isDisabled {
-    box-shadow: none;
     background-color: var(--cp-background-disabled);
+    box-shadow: none;
     color: var(--cp-text-disabled);
     user-select: none;
 
@@ -291,10 +289,10 @@ const handleClick = (event: MouseEvent) => {
   }
 
   &__body {
+    position: relative;
     display: flex;
     align-items: center;
     gap: var(--cp-spacing-sm-md);
-    position: relative;
     text-align: center;
     transition: padding-left 250ms var(--cp-easing-elastic);
   }
@@ -329,8 +327,8 @@ const handleClick = (event: MouseEvent) => {
     @include mx.square-sizing(24);
 
     position: absolute;
-    left: 0;
     top: 50%;
+    left: 0;
     transform: translateY(-50%);
   }
 
@@ -368,8 +366,8 @@ const handleClick = (event: MouseEvent) => {
   }
 
   &--2xs {
-    font-size: var(--cp-text-size-xs);
     padding: var(--cp-spacing-sm) var(--cp-spacing-md);
+    font-size: var(--cp-text-size-xs);
     line-height: var(--cp-line-height-xs);
 
     &.cpButton--isIcon {
@@ -378,8 +376,8 @@ const handleClick = (event: MouseEvent) => {
   }
 
   &--xs {
-    font-size: var(--cp-text-size-sm);
     padding: var(--cp-spacing-sm) var(--cp-spacing-md);
+    font-size: var(--cp-text-size-sm);
     line-height: var(--cp-line-height-sm);
 
     &.cpButton--isIcon {
@@ -388,8 +386,8 @@ const handleClick = (event: MouseEvent) => {
   }
 
   &--sm {
-    font-size: var(--cp-text-size-sm);
     padding: var(--cp-spacing-sm-md) var(--cp-spacing-md);
+    font-size: var(--cp-text-size-sm);
     line-height: var(--cp-line-height-sm);
 
     &.cpButton--isIcon {
@@ -398,8 +396,8 @@ const handleClick = (event: MouseEvent) => {
   }
 
   &--md {
-    font-size: var(--cp-text-size-md);
     padding: var(--cp-spacing-md) var(--cp-spacing-lg);
+    font-size: var(--cp-text-size-md);
     line-height: var(--cp-line-height-md);
 
     &.cpButton--isIcon {
@@ -408,8 +406,8 @@ const handleClick = (event: MouseEvent) => {
   }
 
   &--lg {
-    font-size: var(--cp-text-size-md);
     padding: var(--cp-spacing-lg) var(--cp-spacing-xl);
+    font-size: var(--cp-text-size-md);
     line-height: var(--cp-line-height-md);
 
     &.cpButton--isIcon {

package/src/components/CpButtonGroup.vue

@@ -43,13 +43,13 @@ const dynamicClasses = computed(() => `cpButtonGroup--${props.size}`)
     position: relative;
 
     &:not(:first-child, :only-child)::before {
-      content: '';
       position: absolute;
+      top: fn.px-to-rem(-1);
       left: fn.px-to-rem(-1);
       width: fn.px-to-rem(1);
       height: calc(100% + fn.px-to-rem(2));
-      top: fn.px-to-rem(-1);
       background-color: var(--cp-border-soft);
+      content: '';
     }
   }
 }

package/src/components/CpButtonToggle.vue

@@ -60,39 +60,48 @@ const handleClick = (event: MouseEvent) => {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: var(--cp-spacing-md);
   padding: var(--cp-spacing-lg);
   border-radius: var(--cp-radius-md);
+  background-color: var(--cp-background-primary);
   box-shadow:
     var(--cp-shadows-3xs-inset),
     0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft);
-  background-color: var(--cp-background-primary);
   color: var(--cp-text-secondary);
+  gap: var(--cp-spacing-md);
   transition:
     background-color 100ms ease-out,
     box-shadow 100ms ease-out,
     color 100ms ease-out,
     transform 100ms ease;
 
+  &:focus-visible {
+    box-shadow:
+      0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft-hover),
+      var(--cp-shadow-focus-ring-accent);
+  }
+
+  &:disabled {
+    background-color: var(--cp-background-disabled);
+    box-shadow:
+      var(--cp-shadows-3xs-inset),
+      0 0 0 var(--cp-dimensions-0_25) var(--cp-border-disabled);
+    color: var(--cp-text-disabled);
+    cursor: not-allowed;
+  }
+  
   &:hover:not(:disabled) {
-    transform: translateY(fn.px-to-rem(-1));
     background-color: var(--cp-background-primary-hover);
-    color: var(--cp-text-secondary-hover);
     box-shadow:
       var(--cp-shadows-3xs-inset),
       0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft-hover);
+    color: var(--cp-text-secondary-hover);
+    transform: translateY(fn.px-to-rem(-1));
   }
 
   &:active:not(:disabled) {
     transform: translateY(fn.px-to-rem(1));
   }
 
-  &:focus-visible {
-    box-shadow:
-      0 0 0 var(--cp-dimensions-0_25) var(--cp-border-soft-hover),
-      var(--cp-shadow-focus-ring-accent);
-  }
-
   &__leading {
     display: flex;
     align-items: center;
@@ -100,8 +109,8 @@ const handleClick = (event: MouseEvent) => {
 
   &__label {
     font-size: var(--cp-text-size-sm);
-    line-height: var(--cp-line-height-sm);
     font-weight: 500;
+    line-height: var(--cp-line-height-sm);
   }
 
   &__defaultLeading,
@@ -109,28 +118,19 @@ const handleClick = (event: MouseEvent) => {
     pointer-events: none;
   }
 
-  &:disabled {
-    cursor: not-allowed;
-    background-color: var(--cp-background-disabled);
-    color: var(--cp-text-disabled);
-    box-shadow:
-      var(--cp-shadows-3xs-inset),
-      0 0 0 var(--cp-dimensions-0_25) var(--cp-border-disabled);
-  }
-
   &--isSelected:not(:disabled) {
     background-color: var(--cp-background-accent-secondary);
-    color: var(--cp-text-accent-primary);
     box-shadow:
       var(--cp-shadows-3xs-inset),
       0 0 0 var(--cp-dimensions-0_25) var(--cp-border-accent-solid);
+    color: var(--cp-text-accent-primary);
 
     &:hover {
       background-color: var(--cp-background-accent-secondary-hover);
-      color: var(--cp-text-accent-primary-hover);
       box-shadow:
         var(--cp-shadows-3xs-inset),
         0 0 0 var(--cp-dimensions-0_25) var(--cp-border-accent-solid);
+      color: var(--cp-text-accent-primary-hover);
     }
 
     &:focus-visible {

package/src/components/CpCalendar.vue

@@ -83,7 +83,7 @@
 
 <script setup lang="ts">
 import { DateTime, Info, Interval } from 'luxon'
-import { ref, computed, watch, useId } from 'vue'
+import { computed, ref, useId, watch } from 'vue'
 
 import CpButton from '@/components/CpButton.vue'
 import CpIcon from '@/components/CpIcon.vue'
@@ -200,10 +200,12 @@ const removeRecurency = (): void => {
 
 const emitToParent = (): void => {
   let dates = [dateOne.value]
+  
   if (isDaysDisplayed.value) {
     dates = recurenceDates.value.length ? datesToStringArray(recurenceDates.value) : []
   }
-  return emit('dates', dates)
+  
+  emit('dates', dates)
 }
 
 const generateDates = (startDate: string, endDate: string, selectedWeekDaysIndex: number[]): string[] => {
@@ -238,7 +240,7 @@ const selectDate = (key: 'dateOne' | 'dateTwo', value: string): void => {
     recurenceDates.value = generateDates(dateOne.value, dateTwo.value, selectedDays.value)
   }
 
-  return emitToParent()
+  emitToParent()
 }
 
 const datesToStringArray = (dates: string[]): string[] => {
@@ -256,10 +258,12 @@ watch(isInline, (value) => {
 .fade-leave-active {
   transition: opacity 100ms;
 }
+
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
 }
+
 .cpCalendar {
   // Opening transition layout adaptation
   .asd__fade-enter-from {
@@ -286,8 +290,8 @@ watch(isInline, (value) => {
 
   @media (max-width: 767px) and (min-width: 350px) {
     &__datepicker {
-      left: 0;
       right: 0;
+      left: 0;
       transform: initial;
     }
 
@@ -310,18 +314,18 @@ watch(isInline, (value) => {
   }
 
   .footer-container {
-    background: var(--cp-background-white);
     border-top: 1px solid var(--cp-border-soft);
+    background: var(--cp-background-white);
 
     .asd__recurency--action {
-      padding: var(--cp-spacing-xl);
       display: flex;
       align-items: center;
       justify-content: space-between;
+      padding: var(--cp-spacing-xl);
 
       button {
-        font-size: var(--cp-text-size-md);
         color: var(--cp-text-primary);
+        font-size: var(--cp-text-size-md);
       }
     }
 
@@ -329,19 +333,19 @@ watch(isInline, (value) => {
       border: #b5b5b5;
 
       &:not([disabled]) {
+        border: var(--cp-background-accent-solid);
         background-color: var(--cp-background-accent-solid);
         color: var(--cp-text-white) !important;
-        border: var(--cp-background-accent-solid);
       }
     }
 
     .asd__recurency--ul {
-      margin: 0;
-      margin-top: -1px;
       display: flex;
-      -webkit-padding-start: 0;
       height: inherit;
+      margin: 0;
+      margin-top: -1px;
       cursor: pointer;
+      -webkit-padding-start: 0;
 
       @media (min-width: 768px) {
         height: var(--cp-dimensions-16);
@@ -355,14 +359,14 @@ watch(isInline, (value) => {
 
     .asd__recurency--li {
       display: flex;
-      flex-direction: column;
+      height: var(--cp-dimensions-16);
       flex: 1;
-      justify-content: center;
+      flex-direction: column;
       align-items: center;
+      justify-content: center;
       border-top: 1px solid var(--cp-border-soft);
-      font-size: var(--cp-text-size-md);
       color: var(--cp-text-primary);
-      height: var(--cp-dimensions-16);
+      font-size: var(--cp-text-size-md);
       transition: background 200ms linear;
 
       @media (max-width: 768px) {
@@ -375,21 +379,21 @@ watch(isInline, (value) => {
       }
 
       .checkbox--border {
-        height: 100%;
         width: 100%;
+        height: 100%;
         border: 1px solid var(--cp-border-soft);
       }
 
       .feather-check {
-        height: 100%;
         width: 100%;
+        height: 100%;
         color: var(--cp-text-accent-primary);
       }
 
       span {
+        padding-top: calc(var(--cp-dimensions-0_5) * 1.5);
         font-size: var(--cp-text-size-sm);
         line-height: var(--cp-line-height-sm);
-        padding-top: calc(var(--cp-dimensions-0_5) * 1.5);
         user-select: none;
       }
     }
@@ -399,16 +403,16 @@ watch(isInline, (value) => {
     }
 
     .asd__recurency--summary {
-      padding-left: var(--cp-spacing-xl);
       padding-right: var(--cp-spacing-xl);
+      padding-left: var(--cp-spacing-xl);
     }
 
     .asd__recurency--text {
-      background: var(--cp-text-primary);
-      border-radius: var(--cp-radius-md-lg);
       display: flex;
-      justify-content: center;
       align-items: center;
+      justify-content: center;
+      border-radius: var(--cp-radius-md-lg);
+      background: var(--cp-text-primary);
       color: #d8d8ff;
 
       svg {
@@ -416,14 +420,14 @@ watch(isInline, (value) => {
       }
 
       span {
-        white-space: normal;
         padding: var(--cp-dimensions-2_5);
         padding-left: var(--cp-dimensions-0_5);
         font-size: var(--cp-text-size-sm);
+        white-space: normal;
+      }
 
-        strong {
-          color: var(--cp-text-white);
-        }
+      span strong {
+        color: var(--cp-text-white);
       }
     }
   }

package/src/components/CpCheckbox.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, useSlots, useId, watch, nextTick } from 'vue'
+import { computed, nextTick, ref, useId, useSlots, watch } from 'vue'
 
 import { ToggleColors } from '@/constants'
 import { capitalizeFirstLetter } from '@/helpers'
@@ -135,19 +135,19 @@ const onChange = () => {
 @mixin cp-checkbox-style($color, $bgHoverColor, $className) {
   &--is#{$className} input:checked,
   &--is#{$className} input:indeterminate {
-    background-color: $color;
     border-color: $color;
+    background-color: $color;
   }
 
   &--is#{$className}:hover input {
-    background-color: var(--cp-background-primary-hover);
     border-color: var(--cp-border-soft-hover);
+    background-color: var(--cp-background-primary-hover);
   }
 
   &--is#{$className}:hover input:checked,
   &--is#{$className}:hover input:indeterminate {
-    background-color: $bgHoverColor;
     border-color: $bgHoverColor;
+    background-color: $bgHoverColor;
   }
 
   &--is#{$className} input:focus-visible {
@@ -165,9 +165,7 @@ const onChange = () => {
   cursor: pointer;
 
   @include cp-checkbox-style(var(--cp-background-accent-solid), var(--cp-background-accent-solid-hover), 'Accent');
-
   @include cp-checkbox-style(var(--cp-background-blue-solid), var(--cp-background-blue-solid-hover), 'Blue');
-
   @include cp-checkbox-style(
     var(--cp-background-accent-solid),
     var(--cp-background-accent-solid-hover),
@@ -180,27 +178,25 @@ const onChange = () => {
 
   &__wrapper {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     justify-content: center;
     padding: var(--cp-spacing-sm);
-    flex-shrink: 0;
   }
 
   input {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    border: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
-    border-radius: var(--cp-radius-sm);
     width: var(--cp-dimensions-4);
     height: var(--cp-dimensions-4);
     flex-shrink: 0;
-    cursor: pointer;
+    border: var(--cp-dimensions-0_25) solid var(--cp-border-soft);
+    border-radius: var(--cp-radius-sm);
+    appearance: none;
+    background-color: var(--cp-background-primary);
     box-shadow: var(--cp-shadows-3xs);
+    cursor: pointer;
     transition:
       background-color 0.1s ease-out,
       transform 0.1s linear;
-    background-color: var(--cp-background-primary);
 
     & + i {
       position: absolute;
@@ -218,14 +214,14 @@ const onChange = () => {
 
     &:checked + i,
     &:indeterminate + i {
-      visibility: visible;
       opacity: 1;
+      visibility: visible;
     }
 
     &:disabled {
       background-color: var(--cp-background-disabled);
-      cursor: not-allowed;
       box-shadow: none;
+      cursor: not-allowed;
     }
 
     &:checked:disabled,
@@ -243,23 +239,6 @@ const onChange = () => {
     }
   }
 
-  &--isDisabled {
-    cursor: not-allowed;
-  }
-
-  &--isDisabled &__label,
-  &--isDisabled &__helper {
-    color: var(--cp-text-disabled);
-  }
-
-  &--isReversed {
-    flex-direction: row-reverse;
-  }
-
-  &__content {
-    flex: 1;
-  }
-
   &__label,
   &__helper {
     display: block;
@@ -277,5 +256,22 @@ const onChange = () => {
   &__helper {
     color: var(--cp-text-secondary);
   }
+
+  &--isDisabled {
+    cursor: not-allowed;
+  }
+
+  &--isDisabled &__label,
+  &--isDisabled &__helper {
+    color: var(--cp-text-disabled);
+  }
+
+  &--isReversed {
+    flex-direction: row-reverse;
+  }
+
+  &__content {
+    flex: 1;
+  }
 }
 </style>

package/src/components/CpContextualMenu.vue

@@ -13,9 +13,8 @@
 
 <script setup lang="ts">
 import ContextMenu from 'primevue/contextmenu'
-import { ref } from 'vue'
-
 import type { MenuItem } from 'primevue/menuitem'
+import { ref } from 'vue'
 
 import CpMenuItem from '@/components/CpMenuItem.vue'