@citizenplane/pimp 9.5.12 → 9.5.13

package/src/components/CpTextarea.vue

@@ -3,21 +3,21 @@
     <base-input-label
       v-if="label"
       v-bind-once="{ for: inputIdentifier }"
+      class="cpTextarea__label"
       :is-invalid="isInvalid"
       :required="required"
-      class="cpTextarea__label"
     >
       {{ capitalizedLabel }}
     </base-input-label>
     <textarea
       v-model="textareaModel"
       v-bind-once="{ id: inputIdentifier }"
+      class="cpTextarea__input"
+      :class="{ 'cpTextarea__input--isInvalid': isInvalid }"
       :disabled="disabled"
       :placeholder="placeholder"
       :required="required"
       :style="`min-height: ${height}px`"
-      :class="{ 'cpTextarea__input--isInvalid': isInvalid }"
-      class="cpTextarea__input"
     />
     <transition-expand>
       <p v-if="displayErrorMessage" class="cpTextarea__error">
@@ -28,12 +28,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, useId } from 'vue'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 import TransitionExpand from '@/components/TransitionExpand.vue'
 
-import { randomString, capitalizeFirstLetter } from '@/helpers'
+import { capitalizeFirstLetter } from '@/helpers'
 
 interface Emits {
   (e: 'update:modelValue', value: string): void
@@ -75,7 +75,7 @@ const textareaModel = defineModel<string>({
   },
 })
 
-const inputIdentifier = ref(props.inputId || randomString())
+const inputIdentifier = ref(props.inputId || useId())
 
 const capitalizedLabel = computed(() => capitalizeFirstLetter(props.label))
 

package/src/components/CpToaster.vue

@@ -11,15 +11,15 @@
       @mouseleave="setHoverState(false)"
     >
       <div class="cpToaster__content">
-        <cp-icon :type="toasterIcon" class="cpToaster__icon" />
+        <cp-icon class="cpToaster__icon" :type="toasterIcon" />
         <div class="cpToaster__body">
-          <cp-heading :heading-level="HeadingLevels.H4" :size="400" class="cpToaster__title">{{ title }}</cp-heading>
+          <cp-heading class="cpToaster__title" :heading-level="HeadingLevels.H4" :size="400">{{ title }}</cp-heading>
           <p v-if="description" class="cpToaster__description">{{ description }}</p>
         </div>
       </div>
-      <button type="button" class="cpToaster__close" @click="closeToaster"><cp-icon type="x" /></button>
+      <button class="cpToaster__close" type="button" @click="closeToaster"><cp-icon type="x" /></button>
       <div v-if="actionLabel" class="cpToaster__footer">
-        <button type="button" class="cpToaster__button" @click="handleActionMethod">
+        <button class="cpToaster__button" type="button" @click="handleActionMethod">
           {{ actionLabel }}
         </button>
       </div>
@@ -29,13 +29,12 @@
 
 <script setup lang="ts">
 import { animate } from 'animejs'
-import { ref, computed, watch, onBeforeMount, onMounted, nextTick, getCurrentInstance } from 'vue'
+import { ref, computed, watch, onBeforeMount, onMounted, nextTick, getCurrentInstance, useId } from 'vue'
 
 import CpHeading from '@/components/CpHeading.vue'
 import CpIcon from '@/components/CpIcon.vue'
 
 import { HeadingLevels, Intent } from '@/constants'
-import { randomString } from '@/helpers'
 
 interface Props {
   actionLabel?: string
@@ -69,7 +68,7 @@ if (!validateType(props.type)) {
   console.warn(`Type de toaster invalide: ${props.type}`)
 }
 
-const toasterId = ref<string>()
+const toasterId = useId()
 const toastersContainer = ref<HTMLElement | null>(null)
 const isOpen = ref<boolean>(false)
 const isHovered = ref<boolean>(false)
@@ -121,10 +120,6 @@ const removeSiblings = (): void => {
   siblings.forEach(removeElement)
 }
 
-const setToasterId = (): void => {
-  toasterId.value = randomString()
-}
-
 const showToaster = (): void => {
   isOpen.value = true
 
@@ -225,7 +220,6 @@ onBeforeMount(() => {
   createContainer()
   setupContainer()
   removeSiblings()
-  setToasterId()
 })
 
 onMounted(() => {

package/src/helpers/index.ts

@@ -1,9 +1,5 @@
 import { DateTime } from 'luxon'
 
-export const randomString = (): string => {
-  return `_${Math.random().toString(36).substr(2, 9)}`
-}
-
 export const formatDates = ({
   dateOne,
   dateTwo,

package/src/libs/CoreDatepicker.vue

@@ -18,17 +18,17 @@
       </div>
       <div class="asd__datepicker-header">
         <button
-          type="button"
-          class="asd__change-month-button asd__change-month-button--previous"
           aria-label="previous month"
+          class="asd__change-month-button asd__change-month-button--previous"
+          type="button"
           @click="previousMonth"
         >
           <cp-icon type="chevron-left" />
         </button>
         <button
-          type="button"
-          class="asd__change-month-button asd__change-month-button--next"
           aria-label="next month"
+          class="asd__change-month-button asd__change-month-button--next"
+          type="button"
           @click="nextMonth"
         >
           <cp-icon type="chevron-right" />
@@ -63,8 +63,8 @@
                 <option
                   v-for="(monthName, idx) in monthNames"
                   :key="`month-${monthIndex}-${monthName}`"
-                  :value="monthName"
                   :disabled="isMonthDisabled(month.year, idx)"
+                  :value="monthName"
                 >
                   {{ monthName }}
                 </option>
@@ -80,8 +80,8 @@
                 <option
                   v-if="years.indexOf(month.year) === -1"
                   :key="`month-${monthIndex}-${month.year}`"
-                  :value="month.year"
                   :disabled="true"
+                  :value="month.year"
                 >
                   {{ month.year }}
                 </option>
@@ -99,17 +99,17 @@
                     :key="dayIndex + '_' + dayNumber"
                     :ref="`date-${dayDate}`"
                     class="asd__day"
-                    :data-date="dayDate"
                     :class="getDayClasses(dayNumber, dayDate)"
+                    :data-date="dayDate"
                     @mouseover="setHoverDate(dayDate)"
                   >
                     <button
                       v-if="dayNumber"
                       class="asd__day-button"
-                      type="button"
-                      tabindex="-1"
                       :date="dayDate"
                       :disabled="isDisabled(dayDate)"
+                      tabindex="-1"
+                      type="button"
                       @click="selectDate(dayDate)"
                     >
                       <span class="asd__day-number">{{ dayNumber }}</span>
@@ -128,11 +128,11 @@
 
 <script lang="ts">
 import { DateTime, Info } from 'luxon'
+import { useId } from 'vue'
 
 import CpIcon from '@/components/CpIcon.vue'
 
 import ResizeSelect from '@/directives/ResizeSelect'
-import { randomString } from '@/helpers'
 
 export default {
   name: 'CoreDatepicker',
@@ -263,7 +263,7 @@ export default {
   ],
   data() {
     return {
-      wrapperId: 'datepicker-wrapper-' + randomString(5),
+      wrapperId: 'datepicker-wrapper-' + useId(),
       dateLabelFormat: 'dddd, MMMM D, YYYY',
       showDatepicker: false,
       showKeyboardShortcutsMenu: false,