@citizenplane/pimp 9.5.12 → 9.6.0

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,

package/src/stories/CpLoader.stories.ts

@@ -2,13 +2,21 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 
 import CpLoader from '@/components/CpLoader.vue'
 
+import { Colors } from '@/constants'
+
 const meta = {
   title: 'CpLoader',
   component: CpLoader,
   argTypes: {
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg'],
+      description: 'The size of the button',
+    },
     color: {
-      control: 'color',
-      description: 'The color of the loader',
+      control: 'select',
+      options: ['Blue', 'Purple', 'Green', 'Orange', 'Red'],
+      description: 'The color variant of the button',
     },
   },
 } satisfies Meta<typeof CpLoader>
@@ -18,13 +26,6 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
   args: {
-    color: '#4F46E5',
-  },
-}
-
-export const CustomColor: Story = {
-  args: {
-    ...Default.args,
-    color: '#10B981',
+    color: Colors.PURPLE,
   },
 }