@citizenplane/pimp 9.5.11 → 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/components/icons/IconWindowExpand.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg
+    fill="none"
+    height="16"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="1.5"
+    viewBox="0 0 16 16"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2.0011 4.86629V4.60307C2.0011 3.62495 2.79402 2.83203 3.77214 2.83203H12.2301C13.2082 2.83203 14.0011 3.62495 14.0011 4.60307V11.3966C14.0011 12.3748 13.2082 13.1677 12.2301 13.1677H10.4052M9.58093 5.32658H11.5191V7.26479M9.45274 7.40582L11.532 5.32658M3.51706 13.1677H5.81639C6.65478 13.1677 7.33442 12.488 7.33442 11.6496V9.35031C7.33442 8.51192 6.65478 7.83228 5.81639 7.83228H3.51706C2.67867 7.83228 1.99902 8.51192 1.99902 9.35031V11.6496C1.99902 12.488 2.67867 13.1677 3.51706 13.1677Z"
+    />
+  </svg>
+</template>

package/src/constants/CpCustomIcons.ts

@@ -78,6 +78,7 @@ import IconTicket from '@/components/icons/IconTicket.vue'
 import IconTimer from '@/components/icons/IconTimer.vue'
 import IconTooltip from '@/components/icons/IconTooltip.vue'
 import IconTrafficControl from '@/components/icons/IconTrafficControl.vue'
+import IconWindowExpand from '@/components/icons/IconWindowExpand.vue'
 
 export const CustomCpIcons = {
   'accompanied-minor-each': IconAccompaniedMinorEach,
@@ -160,4 +161,5 @@ export const CustomCpIcons = {
   timer: IconTimer,
   tooltip: IconTooltip,
   'traffic-control': IconTrafficControl,
+  'window-expand': IconWindowExpand,
 }

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,