@citizenplane/pimp 9.5.12 → 9.5.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "9.5.12",
+  "version": "9.5.13",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpCalendar.vue

@@ -2,32 +2,32 @@
   <div class="cpCalendar">
     <cp-input
       :id="triggerElementId"
-      type="text"
-      :model-value="humanDateFormat(dateOne, dateTwo)"
-      placeholder="Select a date"
-      :is-invalid="isError"
-      :error-message="errorMessage"
+      class="cpCalendar__input"
       :disabled="isDisabled"
+      :error-message="errorMessage"
+      :is-invalid="isError"
       :label="label"
-      class="cpCalendar__input"
+      :model-value="humanDateFormat(dateOne, dateTwo)"
+      placeholder="Select a date"
+      type="text"
     />
     <core-datepicker
-      :date-one="dateOne"
-      :date-two="dateTwo"
-      :customized-dates="[{ cssClass: 'recurency', dates: datesToStringArray(recurenceDates) }]"
-      :trigger-element-id="triggerElementId"
-      :mode="mode"
+      class="cpCalendar__datepicker"
+      :class="dynamicClasses"
       :close-after-select="closeAfterSelect"
       :close-calendar="triggerCalendar"
+      :customized-dates="[{ cssClass: 'recurency', dates: datesToStringArray(recurenceDates) }]"
+      :date-one="dateOne"
+      :date-two="dateTwo"
       :inline="isInline"
       :locale="locale"
-      class="cpCalendar__datepicker"
-      :class="dynamicClasses"
+      :mode="mode"
+      :trigger-element-id="triggerElementId"
+      @closed="() => (isDisabled = false)"
       @date-one-selected="onDateSelected('dateOne', $event)"
       @date-two-selected="onDateSelected('dateTwo', $event)"
       @is-inline="onIsInline"
       @opened="() => (isDisabled = true)"
-      @closed="() => (isDisabled = false)"
     >
       <div v-if="!isInline" class="footer-container">
         <transition-group name="fade">
@@ -42,7 +42,7 @@
                   @click="toggleDay(value)"
                 >
                   <div class="checkbox">
-                    <transition name="fade" mode="out-in">
+                    <transition mode="out-in" name="fade">
                       <div v-if="!selected" class="checkbox--border" />
                       <cp-icon v-else type="check" />
                     </transition>
@@ -64,16 +64,11 @@
             </div>
           </div>
           <div key="action" class="asd__recurency--action">
-            <cp-button
-              class="asd__button-switch"
-              size="mini"
-              @click.stop="isDaysDisplayed ? removeRecurency() : addRecurency()"
-            >
+            <cp-button class="asd__button-switch" @click.stop="isDaysDisplayed ? removeRecurency() : addRecurency()">
               {{ isDaysDisplayed ? 'Remove recurency' : 'Add recurency' }}
             </cp-button>
             <cp-button
               class="asd__button-done"
-              size="mini"
               :disabled="(isDaysDisplayed && !recurenceDates.length) || !dateOne"
               @click.stop="done"
             >
@@ -88,13 +83,13 @@
 
 <script setup lang="ts">
 import { DateTime, Info, Interval } from 'luxon'
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, useId } from 'vue'
 
 import CpButton from '@/components/CpButton.vue'
 import CpIcon from '@/components/CpIcon.vue'
 import CpInput from '@/components/CpInput.vue'
 
-import { randomString, formatDates } from '@/helpers'
+import { formatDates } from '@/helpers'
 import CoreDatepicker from '@/libs/CoreDatepicker.vue'
 
 interface DayOption {
@@ -118,7 +113,7 @@ interface Emits {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  triggerElementId: () => `calendar-trigger-${randomString()}`,
+  triggerElementId: () => `calendar-trigger-${useId()}`,
   closeAfterSelect: false,
   label: '',
   isError: false,

package/src/components/CpCheckbox.vue

@@ -1,14 +1,14 @@
 <template>
-  <label :class="computedClasses" class="cpCheckbox" :for="checkboxUniqueId">
+  <label class="cpCheckbox" :class="computedClasses" :for="checkboxUniqueId">
     <div class="cpCheckbox__wrapper">
       <input
         :id="checkboxUniqueId"
         v-model="isChecked"
-        :value="checkboxValue"
+        :autofocus="autofocus"
         :disabled="isDisabled"
-        type="checkbox"
         :name="groupName"
-        :autofocus="autofocus"
+        type="checkbox"
+        :value="checkboxValue"
         @change="onChange(checkboxValue)"
       />
       <cp-icon type="check" />
@@ -27,10 +27,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, useSlots } from 'vue'
+import { computed, ref, useSlots, useId } from 'vue'
 
 import { ToggleColors } from '@/constants'
-import { capitalizeFirstLetter, randomString } from '@/helpers'
+import { capitalizeFirstLetter } from '@/helpers'
 
 interface Props {
   autofocus?: boolean
@@ -62,7 +62,7 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits(['update:modelValue'])
 
 const checkedProxy = ref(false)
-const checkboxUniqueId = ref('')
+const checkboxUniqueId = useId()
 
 const isChecked = computed({
   get() {
@@ -98,8 +98,6 @@ const labelComputedClasses = computed(() => {
   return { 'cpCheckbox__label--isCapitalized': props.capitalizeLabel }
 })
 
-onMounted(() => (checkboxUniqueId.value = randomString()))
-
 const onChange = (value: string | number) => {
   if (Array.isArray(props.modelValue)) {
     const currentValues = [...props.modelValue]

package/src/components/CpDate.vue

@@ -7,23 +7,23 @@
       <input
         v-model="day"
         v-maska
-        data-maska="##"
-        :placeholder="dayInputPlaceholder"
+        :autocomplete="autocompleteFields.day"
         class="cpDate__day"
+        data-maska="##"
+        :disabled="disabled"
         inputmode="numeric"
         maxlength="2"
+        :placeholder="dayInputPlaceholder"
         :required="required"
-        :disabled="disabled"
-        :autocomplete="autocompleteFields.day"
       />
       <div class="cpDate__divider" />
       <div class="cpDate__month" :class="selectDynamicClass">
         <select
           :id="cpDateId"
           v-model="month"
-          :required="required"
-          :disabled="disabled"
           :autocomplete="autocompleteFields.month"
+          :disabled="disabled"
+          :required="required"
         >
           <option value>{{ monthInputPlaceholder }}</option>
           <option v-for="(monthItem, index) in months" :key="index" :value="monthItem.value">
@@ -35,14 +35,14 @@
       <input
         v-model="year"
         v-maska
-        data-maska="####"
-        :placeholder="yearInputPlaceholder"
+        :autocomplete="autocompleteFields.year"
         class="cpDate__year"
+        data-maska="####"
+        :disabled="disabled"
         inputmode="numeric"
         maxlength="4"
-        :disabled="disabled"
+        :placeholder="yearInputPlaceholder"
         :required="required"
-        :autocomplete="autocompleteFields.year"
       />
     </div>
     <transition-expand>
@@ -53,12 +53,12 @@
 
 <script setup lang="ts">
 import { Info, DateTime } from 'luxon'
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, useId } from 'vue'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 
 import { HUMAN_MAX_AGE } from '@/constants'
-import { randomString, capitalizeFirstLetter } from '@/helpers'
+import { capitalizeFirstLetter } from '@/helpers'
 
 interface Emits {
   (e: 'update:modelValue', value: string): void
@@ -116,7 +116,7 @@ const year = ref(initDateToken('year'))
 
 const capitalizedLabel = computed(() => capitalizeFirstLetter(props.label))
 
-const cpDateId = computed(() => randomString())
+const cpDateId = useId()
 
 const minYear = computed(() => isoMinDate.value.year)
 

package/src/components/CpDatepicker.vue

@@ -3,43 +3,43 @@
     <cp-input
       v-show="!isInline"
       :id="datePickerReferenceId"
-      :model-value="inputComputedValue"
-      type="text"
-      :placeholder="placeholder"
-      :is-invalid="isError"
-      :error-message="errorMessage"
+      class="cpDatepicker__input"
       :disabled="isDisabled"
+      :error-message="errorMessage"
+      :is-invalid="isError"
       :label="label"
-      class="cpDatepicker__input"
+      :model-value="inputComputedValue"
+      :placeholder="placeholder"
+      type="text"
     />
     <core-datepicker
+      class="cpDatepicker__datepicker"
+      :class="{ 'cpDatepicker__datepicker--isInline': isInline }"
+      :close-after-select="closeAfterSelect"
       :date-one="dateOne"
       :date-two="dateTwo"
-      :trigger-element-id="datePickerReferenceId"
-      :close-after-select="closeAfterSelect"
-      :mode="mode"
       :inline="isInline"
-      :months-to-show="numberOfMonths"
-      :min-date="computedMinDate"
-      :max-date="maxDate"
       :locale="locale"
-      class="cpDatepicker__datepicker"
-      :class="{ 'cpDatepicker__datepicker--isInline': isInline }"
+      :max-date="maxDate"
+      :min-date="computedMinDate"
+      :mode="mode"
+      :months-to-show="numberOfMonths"
+      :trigger-element-id="datePickerReferenceId"
+      @closed="() => (isDisabled = false)"
       @date-one-selected="onDateOneSelected"
       @date-two-selected="onDateTwoSelected"
       @opened="() => (isDisabled = true)"
-      @closed="() => (isDisabled = false)"
     />
   </div>
 </template>
 
 <script setup lang="ts">
 import { DateTime } from 'luxon'
-import { ref, computed, watch } from 'vue'
+import { ref, computed, watch, useId } from 'vue'
 
 import CpInput from '@/components/CpInput.vue'
 
-import { randomString, formatDates } from '@/helpers'
+import { formatDates } from '@/helpers'
 import CoreDatepicker from '@/libs/CoreDatepicker.vue'
 
 type DatepickerMode = 'range' | 'single'
@@ -93,7 +93,7 @@ const humanFormat = 'EEE DD'
 const dateOne = ref(props.initDateOne || '')
 const dateTwo = ref(props.mode === 'range' ? props.initDateTwo : '')
 const isDisabled = ref(false)
-const datePickerReferenceId = ref(props.triggerElementId || randomString())
+const datePickerReferenceId = ref(props.triggerElementId || useId())
 
 const inputComputedValue = computed(() => {
   if (props.inputValue) return props.inputValue

package/src/components/CpInput.vue

@@ -1,18 +1,18 @@
 <template>
-  <div class="cpInput" :class="dynamicClasses" :aria-disabled="isDisabled" @click="focusOnInput">
+  <div :aria-disabled="isDisabled" class="cpInput" :class="dynamicClasses" @click="focusOnInput">
     <base-input-label
       v-if="label"
       v-bind-once="{ for: inputIdentifier }"
       :is-invalid="isInputInvalid"
-      :tooltip="tooltip"
       :required="isRequired"
+      :tooltip="tooltip"
     >
       {{ capitalizedLabel }}
     </base-input-label>
     <div
       ref="cpInputContainer"
-      :class="{ 'cpInput__container--hasBeforeIcon': hasBeforeIcon }"
       class="cpInput__container"
+      :class="{ 'cpInput__container--hasBeforeIcon': hasBeforeIcon }"
     >
       <div v-if="hasBeforeIcon" class="cpInput__icon cpInput__icon--isBefore">
         <cp-icon v-if="isSearch" type="search" />
@@ -22,18 +22,18 @@
         v-model="inputModel"
         v-bind-once="{ id: inputIdentifier }"
         v-maska
-        :data-maska="mask"
         v-bind="restAttributes"
-        :disabled="isDisabled"
-        :aria-invalid="isInputInvalid"
         :aria-describedby="inputDescribedByAttribute"
+        :aria-invalid="isInputInvalid"
         class="cpInput__inner"
+        :data-maska="mask"
+        :disabled="isDisabled"
       />
       <div v-if="hasAfterIcon" class="cpInput__icon cpInput__icon--isAfter">
         <slot v-if="displayAfterIcon" name="trailing-icon" />
         <transition name="fade">
-          <button v-if="isClearButtonVisible" type="button" class="cpInput__clear" @click="clearInputValue">
-            <cp-icon type="x" class="cpInput__clearIcon" />
+          <button v-if="isClearButtonVisible" class="cpInput__clear" type="button" @click="clearInputValue">
+            <cp-icon class="cpInput__clearIcon" type="x" />
           </button>
         </transition>
       </div>
@@ -55,7 +55,7 @@ import { ref, useAttrs, useSlots, computed, nextTick, onMounted, useId } from 'v
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 
 import { Sizes } from '@/constants'
-import { randomString, capitalizeFirstLetter } from '@/helpers'
+import { capitalizeFirstLetter } from '@/helpers'
 
 interface Emits {
   (e: 'update:modelValue', value: string | number | boolean): void
@@ -99,7 +99,7 @@ const attrs = useAttrs()
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const { ['class']: value, id, ...restAttributes } = attrs
 
-const inputIdentifier = ref(id || randomString())
+const inputIdentifier = ref(id || useId())
 
 const helpMessageId = useId()
 const errorMessageId = useId()

package/src/components/CpRadio.vue

@@ -3,18 +3,18 @@
     <label
       v-for="({ label, value, description, additionalData, disabled }, index) in options"
       :key="getRadioId(index)"
-      :class="computedClasses({ value, disabled })"
       class="cpRadio"
+      :class="computedClasses({ value, disabled })"
       :for="getRadioId(index)"
     >
       <input
         :id="getRadioId(index)"
+        :autofocus="autofocus"
         :checked="isActive(value)"
-        :value="value"
         :disabled="disabled"
-        type="radio"
-        :autofocus="autofocus"
         :name="groupName"
+        type="radio"
+        :value="value"
         @input="onChange(value)"
       />
       <span class="cpRadio__content">
@@ -29,10 +29,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { useId } from 'vue'
 
 import { ToggleColors } from '@/constants'
-import { capitalizeFirstLetter, randomString } from '@/helpers'
+import { capitalizeFirstLetter } from '@/helpers'
 
 interface RadioOption {
   additionalData?: string
@@ -62,11 +62,11 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>()
 
-const radioUniqueId = ref(randomString())
+const radioUniqueId = useId()
 
 const onChange = (value: string): void => emit('update:modelValue', value)
 
-const getRadioId = (index: number): string => `${radioUniqueId.value}${index}`
+const getRadioId = (index: number): string => `${radioUniqueId}${index}`
 
 const isActive = (value: string): boolean => value === props.modelValue
 

package/src/components/CpSelect.vue

@@ -2,23 +2,23 @@
   <div class="cpSelect" :class="dynamicClasses">
     <base-input-label
       v-if="label"
+      class="cpSelect__label"
       :for="selectReferenceId"
-      :tooltip="tooltip"
       :is-invalid="isInvalid"
       :required="required"
-      class="cpSelect__label"
+      :tooltip="tooltip"
     >
       {{ capitalizedLabel }}
     </base-input-label>
     <div class="cpSelect__container">
       <select
         :id="selectReferenceId"
-        :value="modelValue"
-        :disabled="disabled"
-        :required="required"
         :autocomplete="autocomplete"
-        :name="name"
         class="cpSelect__inner"
+        :disabled="disabled"
+        :name="name"
+        :required="required"
+        :value="modelValue"
         @input="handleChange"
       >
         <option :disabled="hideDefaultValue" value="">{{ defaultValue }}</option>
@@ -37,13 +37,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, useId } from 'vue'
+import { computed, useId } from 'vue'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 import TransitionExpand from '@/components/TransitionExpand.vue'
 
 import { Sizes } from '@/constants'
-import { randomString, capitalizeFirstLetter } from '@/helpers'
+import { capitalizeFirstLetter } from '@/helpers'
 
 interface Emits {
   (e: 'update:modelValue', value: string): void
@@ -89,7 +89,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>()
 
-const selectReferenceId = ref('')
+const selectReferenceId = useId()
 
 const helpMessageId = useId()
 const errorMessageId = useId()
@@ -115,10 +115,6 @@ const handleChange = (e: Event): void => {
   const target = e.target as HTMLSelectElement
   emit('update:modelValue', target.value)
 }
-
-onMounted(() => {
-  selectReferenceId.value = randomString()
-})
 </script>
 
 <style lang="scss">

package/src/components/CpSwitch.vue

@@ -3,12 +3,12 @@
     <span class="cpSwitch__switch">
       <input
         :id="switchUniqueId"
-        :disabled="disabled"
+        :autofocus="autofocus"
         :checked="modelValue"
-        :value="modelValue"
-        type="checkbox"
+        :disabled="disabled"
         :name="groupName"
-        :autofocus="autofocus"
+        type="checkbox"
+        :value="modelValue"
         @change="handleClick(modelValue)"
       />
       <span class="cpSwitch__knobContainer">
@@ -20,7 +20,7 @@
         <span v-if="label" class="cpSwitch__label">{{ label }}</span>
         <span v-if="isRequired" class="u-asterisk">*</span>
         <cp-tooltip v-if="tooltip" :content="tooltip">
-          <cp-icon type="tooltip" size="16" class="cpSwitch__tooltip" />
+          <cp-icon class="cpSwitch__tooltip" size="16" type="tooltip" />
         </cp-tooltip>
       </div>
       <span v-if="helper" class="cpSwitch__helper">{{ helper }}</span>
@@ -29,12 +29,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { computed, useId } from 'vue'
 
 import CpTooltip from '@/components/CpTooltip.vue'
 
 import { ToggleColors } from '@/constants'
-import { capitalizeFirstLetter, randomString } from '@/helpers'
+import { capitalizeFirstLetter } from '@/helpers'
 
 interface Props {
   autofocus?: boolean
@@ -68,9 +68,7 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>()
 
-const switchUniqueId = ref('')
-
-switchUniqueId.value = randomString()
+const switchUniqueId = useId()
 
 const capitalizedColor = computed(() => {
   return capitalizeFirstLetter(props.color)

package/src/components/CpTable.vue

@@ -2,11 +2,11 @@
   <div class="cpTable" :class="mainClasses">
     <div
       ref="cpTableContainer"
-      role="region"
       :aria-labelledby="uniqueId"
-      tabindex="0"
       class="cpTable__container"
       :class="containerClasses"
+      role="region"
+      tabindex="0"
     >
       <table class="cpTable__table">
         <caption v-if="caption" :id="uniqueId" class="cpTable__caption">
@@ -22,7 +22,7 @@
               class="cpTable__column"
               :style="getColumnStyle(column)"
             >
-              <slot name="column" :column="column">
+              <slot :column="column" name="column">
                 {{ column.name }}
               </slot>
             </th>
@@ -46,10 +46,10 @@
                 :key="`${cellKey}_${rowIndex}`"
                 class="cpTable__cell"
                 :class="getCellClasses(cellKey)"
-                :style="getCellStyle(cellKey, cellIndex)"
                 :colspan="getColspan(cellKey)"
+                :style="getCellStyle(cellKey, cellIndex)"
               >
-                <slot :name="cellKey" :cell="cellValue">
+                <slot :cell="cellValue" :name="cellKey">
                   <span v-if="isFullWidthRow(rowData)">{{ cellValue }}</span>
                   <template v-else>{{ cellValue }}</template>
                 </slot>
@@ -61,21 +61,21 @@
                       v-for="option in quickOptions"
                       :key="option.id"
                       v-tooltip="getQuickOptionTooltip(option)"
-                      type="button"
                       class="cpTable__action"
                       :class="getQuickOptionClasses(option)"
                       :disabled="option.isDisabled"
+                      type="button"
                       @click.stop="($event) => option.action(getRowPayload(rowIndex), $event)"
                     >
-                      <cp-icon :type="option.icon" size="16" />
+                      <cp-icon size="16" :type="option.icon" />
                     </button>
 
                     <button
-                      type="button"
                       class="cpTable__action cpTable__action--isDefault"
+                      type="button"
                       @click.stop="handleContextMenu({ rowData, rowIndex }, $event)"
                     >
-                      <cp-icon type="more-vertical" size="16" />
+                      <cp-icon size="16" type="more-vertical" />
                     </button>
                   </slot>
                 </div>
@@ -84,7 +84,7 @@
           </tr>
         </tbody>
       </table>
-      <cp-table-empty-state v-if="hasNoResult" :placeholder="noResultPlaceholder" class="cpTable__emptyState" />
+      <cp-table-empty-state v-if="hasNoResult" class="cpTable__emptyState" :placeholder="noResultPlaceholder" />
     </div>
     <div v-if="hasPagination" class="cpTable__footer">
       <div class="footer__details">
@@ -98,7 +98,7 @@
             </template>
             <template v-else> No results </template>
           </slot>
-          <template v-else> Loading <cp-loader :color="LoaderColor" class="cpTable__loader--isSmall" /> </template>
+          <template v-else> Loading <cp-loader class="cpTable__loader--isSmall" :color="LoaderColor" /> </template>
         </p>
       </div>
       <div class="footer__pagination">
@@ -117,7 +117,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, useId } from 'vue'
 
 import CpContextualMenu from '@/components/CpContextualMenu.vue'
 import CpTableEmptyState from '@/components/CpTableEmptyState.vue'
@@ -125,7 +125,6 @@ import CpTableEmptyState from '@/components/CpTableEmptyState.vue'
 import { camelize, decamelize } from '@/helpers/string'
 
 import { PAGINATION_FORMATS, RESERVED_KEYS, VISIBLE_ROWS_MAX } from '@/constants'
-import { randomString } from '@/helpers'
 
 interface Emits {
   (e: 'onRowClick', data: Record<string, unknown>): void
@@ -199,7 +198,7 @@ const emit = defineEmits<Emits>()
 
 const LoaderColor = '#5341F9'
 
-const uniqueId = ref(randomString())
+const uniqueId = useId()
 const pageNumber = ref(0)
 const cpTableContainer = ref<HTMLElement | null>(null)
 const contextualMenu = ref<InstanceType<typeof CpContextualMenu>>()