@citizenplane/pimp 18.6.2 → 18.8.0

package/src/libs/CoreDatepicker.vue

@@ -37,7 +37,7 @@
           v-for="(month, index) in showMonths"
           :key="month"
           class="asd__days-legend"
-          :style="[monthWidthStyles, { left: width * index + 'px' }]"
+          :style="[monthWidthStyles, { left: `${width * index}px` }]"
         >
           <div v-for="(day, dayIndex) in daysShort" :key="dayIndex" class="asd__day-title">{{ day }}</div>
         </div>
@@ -96,7 +96,7 @@
                 <tr v-for="(week, index) in month.weeks" :key="index" class="asd__week">
                   <td
                     v-for="({ dayDate, dayNumber }, dayIndex) in week"
-                    :key="dayIndex + '_' + dayNumber"
+                    :key="`${dayIndex}_${dayNumber}`"
                     :ref="`date-${dayDate}`"
                     class="asd__day"
                     :class="getDayClasses(dayNumber, dayDate)"
@@ -247,7 +247,6 @@ export default {
     },
     isTest: {
       type: Boolean,
-      // eslint-disable-next-line vue/no-boolean-default
       default: () => process.env.NODE_ENV === 'test',
     },
   },
@@ -264,7 +263,7 @@ export default {
   ],
   data() {
     return {
-      wrapperId: 'datepicker-wrapper-' + useId(),
+      wrapperId: `datepicker-wrapper-${useId()}`,
       dateLabelFormat: 'dddd, MMMM D, YYYY',
       showDatepicker: false,
       showKeyboardShortcutsMenu: false,
@@ -321,18 +320,18 @@ export default {
     },
     wrapperStyles() {
       return {
-        width: this.width * this.showMonths + 'px',
+        width: `${this.width * this.showMonths}px`,
         zIndex: this.inline ? '' : '100',
       }
     },
     innerStyles() {
       return {
-        'margin-left': this.showFullscreen ? '-' + this.viewportWidth : `-${this.width}px`,
+        'margin-left': this.showFullscreen ? `-${this.viewportWidth}` : `-${this.width}px`,
       }
     },
     monthWidthStyles() {
       return {
-        width: this.showFullscreen ? this.viewportWidth : this.width + 'px',
+        width: this.showFullscreen ? this.viewportWidth : `${this.width}px`,
       }
     },
     mobileHeaderFallback() {
@@ -370,7 +369,7 @@ export default {
       return dtDateTwo < dtDateOne
     },
     visibleMonths() {
-      const firstMonthArray = this.months.filter((m, index) => index > 0)
+      const firstMonthArray = this.months.filter((_m, index) => index > 0)
       const numberOfMonthsArray = []
       for (let i = 0; i < this.showMonths; i++) {
         numberOfMonthsArray.push(i)
@@ -444,11 +443,9 @@ export default {
       this.openDatepicker()
     }
 
-    // eslint-disable-next-line vue/no-undef-properties
     this.triggerElement.addEventListener('click', this._handleWindowClickEvent)
   },
   unmounted() {
-    // eslint-disable-next-line vue/no-undef-properties
     window.removeEventListener('resize', this._handleWindowResizeEvent)
 
     window.removeEventListener('click', this._handleWindowClickEvent)
@@ -457,7 +454,7 @@ export default {
   },
   methods: {
     handleDatepickerSizing() {
-      this.viewportWidth = window.innerWidth + 'px'
+      this.viewportWidth = `${window.innerWidth}px`
 
       this._handleWindowResizeEvent = this.debounce(() => {
         if (this.inline) this.openDatepicker()
@@ -509,19 +506,17 @@ export default {
       let timeout
 
       return function () {
-        // Unexpected aliasing of 'this' to local variable  @typescript-eslint/no-this-alias
-        // eslint-disable-next-line
-        const context = this
+        // biome-ignore lint: use the rest of argument [...arguments]
         const args = arguments
 
-        const later = function () {
+        const later = () => {
           timeout = null
-          if (!immediate) func.apply(context, args)
+          if (!immediate) func.apply(this, args)
         }
         const callNow = immediate && !timeout
         clearTimeout(timeout)
         timeout = setTimeout(later, wait)
-        if (callNow) func.apply(context, args)
+        if (callNow) func.apply(this, args)
       }
     },
     copyObject(obj) {
@@ -669,11 +664,11 @@ export default {
       for (let d = 0; d < daysInMonth; d++) {
         const isLastDayInMonth = d >= daysInMonth - 1
         const dayNumber = d + 1
-        const dayNumberFull = dayNumber < 10 ? '0' + dayNumber : dayNumber
+        const dayNumberFull = dayNumber < 10 ? `0${dayNumber}` : dayNumber
         week.push({
           dayNumber,
           dayNumberFull,
-          dayDate: year + '-' + month + '-' + dayNumberFull,
+          dayDate: `${year}-${month}-${dayNumberFull}`,
         })
 
         if (week.length === 7) {
@@ -742,7 +737,7 @@ export default {
       const dateElement = this.$refs[`date-${date}`]
       // handle .focus() on ie11 by adding a short timeout
       if (dateElement && dateElement.length) {
-        setTimeout(function () {
+        setTimeout(() => {
           dateElement[0].focus()
         }, 10)
       }
@@ -910,14 +905,14 @@ export default {
         this.openDatepicker()
       }
     },
-    updateMonth(offset, year, event) {
+    updateMonth(_offset, year, event) {
       const newMonth = event.target.value
       const monthIdx = this.monthNames.indexOf(newMonth)
       const startingDate = DateTime.fromISO(this.startingDate)
       this.startingDate = startingDate.set({ month: monthIdx, year }).toISODate()
       this.generateMonths()
     },
-    updateYear(offset, monthIdx, event) {
+    updateYear(_offset, monthIdx, event) {
       const newYear = event.target.value
       const startingDate = DateTime.fromISO(this.startingDate)
       this.startingDate = startingDate.set({ month: monthIdx, year: newYear }).toISODate()
@@ -928,9 +923,7 @@ export default {
       this.setStartDates()
       this.triggerElement.classList.add('datepicker-open')
       this.showDatepicker = true
-      // eslint-disable-next-line vue/no-undef-properties
       this.initialDate1 = this.dateOne
-      // eslint-disable-next-line vue/no-undef-properties
       this.initialDate2 = this.dateTwo
       this.$emit('opened')
       this.$nextTick(() => {
@@ -968,7 +961,7 @@ export default {
       }
 
       const viewportWidth = document.documentElement.clientWidth || window.innerWidth
-      this.viewportWidth = viewportWidth + 'px'
+      this.viewportWidth = `${viewportWidth}px`
 
       this.isMobile = viewportWidth < 768
 
@@ -999,20 +992,18 @@ export default {
 
 <style lang="scss">
 $tablet: 768px;
-
 $background-grey-color: #f7f7f7;
-
 $transition-time: 0.3s;
 
 @include mx.popover-desktop('asd__fade');
 
 @mixin degrade {
-  content: '';
-  width: 65px;
-  height: 35px;
-  background: linear-gradient(90deg, #f7f7f7 50%, rgba(241, 241, 241, 0) 95%);
   position: absolute;
   z-index: -1;
+  width: 65px;
+  height: 35px;
+  background: linear-gradient(90deg, #f7f7f7 50%, rgba(241, 241, 241, 0%) 95%);
+  content: '';
 }
 
 // datepicker
@@ -1029,11 +1020,11 @@ $transition-time: 0.3s;
 
 .asd {
   &__wrapper {
+    overflow: hidden;
     border-radius: 10px;
-    white-space: nowrap;
-    text-align: center;
     background-color: var(--cp-background-white);
-    overflow: hidden;
+    text-align: center;
+    white-space: nowrap;
 
     &:not(&--isInline) {
       box-shadow:
@@ -1045,42 +1036,36 @@ $transition-time: 0.3s;
       position: relative !important;
     }
 
-    &:before {
+    &::before {
       // Line between the two months
       @media (min-width: $tablet) {
         position: absolute;
-        content: '';
-        left: 0;
-        right: 0;
-        top: 20px;
-        bottom: 0;
-        margin: auto;
+        z-index: -1;
         width: 1px;
+        margin: auto;
         background: var(--cp-border-soft);
-        z-index: -1;
+        content: '';
+        inset: 20px 0 0;
       }
     }
 
     &--showOneMonth {
-      &:before {
+      &::before {
         content: none;
       }
     }
 
     &--full-screen {
       position: fixed;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      border: none;
       z-index: 100;
+      border: none;
+      inset: 0;
     }
   }
 
   &__inner-wrapper {
-    transition: all $transition-time ease;
     position: relative;
+    transition: all $transition-time ease;
   }
 
   &__datepicker-header {
@@ -1088,12 +1073,12 @@ $transition-time: 0.3s;
   }
 
   &__change-month-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
     position: absolute;
     z-index: 10;
     top: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     border-radius: var(--cp-radius-full);
 
     &:focus-visible {
@@ -1138,8 +1123,8 @@ $transition-time: 0.3s;
     user-select: none;
 
     @media (min-width: $tablet) {
-      padding: 0 24px;
       top: 60px;
+      padding: 0 24px;
     }
 
     @media (max-width: ($tablet - 1px)) {
@@ -1151,33 +1136,33 @@ $transition-time: 0.3s;
   &__day-title {
     display: inline-block;
     width: math.div(1, 7) * 100%;
-    text-align: center;
+    margin-left: -1px;
     color: var(--cp-text-secondary);
     font-size: 14px;
     line-height: 18px;
-    margin-left: -1px;
+    text-align: center;
   }
 
   &__month-table {
-    border-spacing: 0 6px;
     width: 100%;
     max-width: 100%;
+    border-spacing: 0 6px;
   }
 
   &__wrapper:not(&__wrapper--isInline) &__month {
-    padding-left: 16px;
     padding-right: 16px;
+    padding-left: 16px;
 
     @media (min-width: $tablet) {
-      padding-left: 24px;
       padding-right: 24px;
+      padding-left: 24px;
     }
   }
 
   &__month {
-    transition: all $transition-time ease;
     display: inline-block;
     padding: 16px 16px 8px;
+    transition: all $transition-time ease;
 
     @media (min-width: $tablet) {
       padding: 24px 24px 12px;
@@ -1190,11 +1175,11 @@ $transition-time: 0.3s;
   }
 
   &__month-name {
-    font-size: 16px;
-    text-align: center;
     margin: 0 0 36px;
-    line-height: 20px;
     color: var(--cp-text-primary);
+    font-size: 16px;
+    line-height: 20px;
+    text-align: center;
 
     @media (max-width: $tablet) {
       margin-top: 2px;
@@ -1208,48 +1193,50 @@ $transition-time: 0.3s;
   &__selected {
     &-date-one {
       background: $background-grey-color;
-      border-top-left-radius: 50%;
       border-bottom-left-radius: 50%;
+      border-top-left-radius: 50%;
     }
 
     &-date-one.asd__day--end-month {
-      &:before {
+      &::before {
         @include degrade;
-        border-top-left-radius: 50%;
+
         border-bottom-left-radius: 50%;
+        border-top-left-radius: 50%;
       }
     }
 
     &-date-one.asd__day--end-week:not(.asd__day--selected) {
-      border-top-right-radius: 10px;
       border-bottom-right-radius: 10px;
+      border-top-right-radius: 10px;
     }
 
     &-date-two {
       background: $background-grey-color;
-      border-top-right-radius: 50%;
       border-bottom-right-radius: 50%;
+      border-top-right-radius: 50%;
     }
 
     &-date-two.asd__day--start-month {
-      &:before {
+      &::before {
         @include degrade;
-        transform: rotate(180deg);
+
         right: 20px;
         width: 20px;
+        transform: rotate(180deg);
       }
     }
 
     &-date-two.asd__day--start-week {
-      border-top-left-radius: 5px;
       border-bottom-left-radius: 5px;
+      border-top-left-radius: 5px;
     }
   }
 
   &__day {
-    outline: none;
-    padding: 0;
     position: relative;
+    padding: 0;
+    outline: none;
 
     &--in-range,
     &--hovered {
@@ -1258,67 +1245,65 @@ $transition-time: 0.3s;
 
     &--hovered {
       .asd__day--end-week {
-        border-top-right-radius: 5px;
         border-bottom-right-radius: 5px;
+        border-top-right-radius: 5px;
       }
 
       .asd__day--start-week {
-        border-top-left-radius: 5px;
         border-bottom-left-radius: 5px;
+        border-top-left-radius: 5px;
       }
     }
 
     &--in-range.asd__day--end-week {
-      border-top-right-radius: 5px;
       border-bottom-right-radius: 5px;
+      border-top-right-radius: 5px;
     }
 
     &--in-range.asd__day--start-week {
-      border-top-left-radius: 5px;
       border-bottom-left-radius: 5px;
+      border-top-left-radius: 5px;
     }
 
     &--hovered.asd__day--start-month,
-    &--in-range.asd__day--start-month:not(.asd__selected-date-one):not(.asd__selected-date-two) {
-      &:before {
+    &--in-range.asd__day--start-month:not(.asd__selected-date-one, .asd__selected-date-two) {
+      &::before {
         @include degrade;
+
+        right: 20px;
         width: 30px;
         transform: rotate(180deg);
-        right: 20px;
       }
     }
 
     &--hovered.asd__day--end-month,
-    &--in-range.asd__day--end-month:not(.asd__selected-date-one):not(.asd__selected-date-two) {
-      &:before {
+    &--in-range.asd__day--end-month:not(.asd__selected-date-one, .asd__selected-date-two) {
+      &::before {
         @include degrade;
       }
     }
 
     &--enabled {
-      &:not(.asd__day--disabled):not(.asd__day--selected):not(.asd__selected-date-one):not(.asd__selected-date-two):not(
-          .asd__day--in-range
-        ):hover {
+      &:not(.asd__day--disabled, .asd__day--selected, .asd__selected-date-one, .asd__selected-date-two, .asd__day--in-range):hover {
         button {
           z-index: 2;
-          background: var(--cp-background-white);
           border: 2px solid #f7f7f7;
           border-radius: 50%;
+          background: var(--cp-background-white);
         }
       }
 
       &.asd__day--date-two-not-selected:hover {
         background: $background-grey-color;
-        border-top-right-radius: 50%;
         border-bottom-right-radius: 50%;
+        border-top-right-radius: 50%;
 
-        &.asd__day--start-month {
-          &:before {
-            @include degrade;
-            width: 30px;
-            transform: rotate(180deg);
-            right: 20px;
-          }
+        &.asd__day--start-month::before {
+          @include degrade;
+
+          right: 20px;
+          width: 30px;
+          transform: rotate(180deg);
         }
       }
     }
@@ -1333,29 +1318,25 @@ $transition-time: 0.3s;
         background: var(--cp-background-accent-solid);
       }
 
-      &.asd__selected-date-one {
-        &:before {
-          @include degrade;
-          border-top-left-radius: 50%;
-          border-bottom-left-radius: 50%;
-        }
+      button span {
+        color: var(--cp-text-white) !important;
       }
 
-      &.asd__selected-date-two {
-        &:before {
-          @include degrade;
-          border-top-right-radius: 50%;
-          border-bottom-right-radius: 50%;
-          width: 30px;
-          transform: rotate(180deg);
-          right: 20px;
-        }
+      &.asd__selected-date-one::before {
+        @include degrade;
+
+        border-bottom-left-radius: 50%;
+        border-top-left-radius: 50%;
       }
 
-      button {
-        span {
-          color: var(--cp-text-white) !important;
-        }
+      &.asd__selected-date-two::before {
+        @include degrade;
+
+        right: 20px;
+        width: 30px;
+        border-bottom-right-radius: 50%;
+        border-top-right-radius: 50%;
+        transform: rotate(180deg);
       }
     }
 
@@ -1374,32 +1355,32 @@ $transition-time: 0.3s;
     }
 
     &--recurency {
-      &:not(.asd__selected-date-one):not(.asd__selected-date-two) {
+      &:not(.asd__selected-date-one, .asd__selected-date-two) {
         background: $background-grey-color;
       }
 
       button {
-        background: var(--cp-background-accent-solid) !important;
-        border-radius: 50%;
         border: 2px solid $background-grey-color;
+        border-radius: 50%;
+        background: var(--cp-background-accent-solid) !important;
+      }
 
-        .asd__day-number {
-          color: var(--cp-text-white);
-        }
+      button .asd__day-number {
+        color: var(--cp-text-white);
       }
     }
 
     &--selected-recurrent {
       button {
         z-index: 2;
-        background: var(--cp-background-white);
         border: 2px solid $background-grey-color;
         border-radius: 50%;
+        background: var(--cp-background-white);
+      }
 
-        &:before {
-          top: 7px;
-          left: 5px;
-        }
+      button::before {
+        top: 7px;
+        left: 5px;
       }
 
       span {
@@ -1409,32 +1390,32 @@ $transition-time: 0.3s;
   }
 
   &__day-button {
-    outline: none;
     position: relative;
-    background: transparent;
     width: 35px;
     height: 35px;
     border: none;
-    user-select: none;
+    background: transparent;
     font-size: 14px;
+    outline: none;
+    user-select: none;
 
     .asd__day-number {
-      z-index: 3;
       position: relative;
+      z-index: 3;
       color: var(--cp-text-primary);
     }
   }
 
   &__mobile-header {
-    border-bottom: var(--cp-border-soft);
     position: relative;
-    padding: 15px 15px 15px 15px !important;
-    text-align: center;
     height: 50px;
+    padding: 15px !important;
+    border-bottom: var(--cp-border-soft);
+    text-align: center;
 
     h3 {
-      font-size: 20px;
       margin: 0;
+      font-size: 20px;
     }
   }
 
@@ -1447,19 +1428,19 @@ $transition-time: 0.3s;
   }
 
   &__mobile-close {
-    border: none;
     position: absolute;
+    z-index: 100;
     top: 7px;
     right: 5px;
     padding: 5px;
-    z-index: 100;
+    border: none;
     cursor: pointer;
 
     &__icon {
       position: relative;
+      padding: 0;
       font-size: 1.6em;
       font-weight: bold;
-      padding: 0;
     }
   }
 }

package/src/stories/Colors.stories.ts

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
-import { docLabelStyle } from '@/stories/documentationStyles'
 import type { Token } from '@/stories/tokenUtils'
+
+import { docLabelStyle } from '@/stories/documentationStyles'
 import { copyableClass, copyableCopiedClass, readTokens, useCopier } from '@/stories/tokenUtils'
 
 const meta: Meta = {

package/src/stories/CpAccordion.stories.ts

@@ -1,9 +1,9 @@
-import { computed } from 'vue'
-
 import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
 import type { MenuItem } from 'primevue/menuitem'
+import { computed } from 'vue'
 
 import type { CpAccordionBaseProps } from '@/components/CpAccordion.vue'
+
 import CpAccordion from '@/components/CpAccordion.vue'
 import CpButton from '@/components/CpButton.vue'
 

package/src/stories/CpAccordionGroup.stories.ts

@@ -1,7 +1,6 @@
-import { computed } from 'vue'
-
 import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
 import type { MenuItem } from 'primevue/menuitem'
+import { computed } from 'vue'
 
 import CpAccordion from '@/components/CpAccordion.vue'
 import CpAccordionGroup from '@/components/CpAccordionGroup.vue'

package/src/stories/CpButtonToggle.stories.ts

@@ -1,6 +1,5 @@
-import { ref } from 'vue'
-
 import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
 
 import CpButtonToggle from '@/components/CpButtonToggle.vue'
 import CpSwitch from '@/components/CpSwitch.vue'

package/src/stories/CpCheckbox.stories.ts

@@ -1,6 +1,5 @@
-import { ref, computed } from 'vue'
-
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { computed, ref } from 'vue'
 
 import CpCheckbox from '@/components/CpCheckbox.vue'
 

package/src/stories/CpContextualMenu.stories.ts

@@ -1,6 +1,5 @@
-import { computed, ref } from 'vue'
-
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { computed, ref } from 'vue'
 
 import CpButton from '@/components/CpButton.vue'
 import CpContextualMenu from '@/components/CpContextualMenu.vue'