@citizenplane/pimp 8.29.0 → 8.32.0

package/src/components/CpDatepicker.vue

@@ -70,6 +70,7 @@ interface Emits {
 const props = withDefaults(defineProps<Props>(), {
   triggerElementId: '',
   mode: 'single',
+  // eslint-disable-next-line vue/no-boolean-default
   closeAfterSelect: true,
   label: '',
   placeholder: 'Select a date',

package/src/components/CpHeading.vue

@@ -18,6 +18,10 @@ withDefaults(defineProps<Props>(), {
   headingLevel: HeadingLevels.H1,
   size: 500,
 })
+
+defineOptions({
+  inheritAttrs: false,
+})
 </script>
 
 <style lang="scss">

package/src/components/CpInput.vue

@@ -63,6 +63,10 @@ import BaseInputLabel from '@/components/BaseInputLabel.vue'
 
 import { randomString, capitalizeFirstLetter } from '@/helpers'
 
+interface Emits {
+  (e: 'update:modelValue', value: string | number | boolean): void
+}
+
 interface Props {
   errorMessage?: string
   help?: string
@@ -93,10 +97,6 @@ const props = withDefaults(defineProps<Props>(), {
   help: '',
 })
 
-interface Emits {
-  (e: 'update:modelValue', value: string | number | boolean): void
-}
-
 const emit = defineEmits<Emits>()
 
 defineOptions({ inheritAttrs: false })
@@ -104,7 +104,7 @@ defineOptions({ inheritAttrs: false })
 const attrs = useAttrs()
 
 // class is a reserved word, we can't remove 'class' property from attrs
-
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const { ['class']: value, id, ...restAttributes } = attrs
 
 const inputIdentifier = ref(id || randomString())

package/src/components/CpMultiselect.vue

@@ -3,8 +3,7 @@
     <base-input-label v-if="label" :required="required" class="cpMultiselect__label">
       {{ label }}
     </base-input-label>
-
-    <AutoComplete
+    <auto-complete
       ref="multiselect"
       v-model="selectModel"
       :suggestions="options"
@@ -29,7 +28,6 @@
           <div class="cpMultiselect__empty">{{ emptyMessage }}</div>
         </slot>
       </template>
-
       <template #chip="{ value, removeCallback }">
         <slot name="selected-option" :option="value" :remove="removeCallback">
           <cp-badge is-clearable size="sm" @on-clear="removeCallback()">
@@ -40,25 +38,20 @@
           </cp-badge>
         </slot>
       </template>
-
       <template #option="{ option }">
         <slot name="option" :option="option" />
       </template>
-
       <template #dropdown>
         <div v-if="displayPrefix" class="cpMultiselect__prefix">
           <slot name="prefix" />
         </div>
-
         <cp-loader v-if="isLoading" class="cpMultiselect__loader" color="#B2B2BD" />
         <button v-else :disabled="disabled" type="button" class="cpMultiselect__toggle" @click.stop="toggleDropdown">
           <cp-icon type="chevron-down" class="cpMultiselect__dropdownIcon" :class="chevronDynamicClass" />
         </button>
-
         <base-select-clear-button v-if="displayClearButton" class="cpMultiselect__clear" @click="handleClear" />
       </template>
-    </AutoComplete>
-
+    </auto-complete>
     <transition-expand>
       <p v-if="isInvalid" class="cpMultiselect__error">
         {{ errorMessage }}
@@ -78,6 +71,13 @@ import TransitionExpand from '@/components/TransitionExpand.vue'
 
 import { isEmpty } from '@/helpers/object'
 
+interface Emits {
+  (e: 'search', query: string): void
+  (e: 'select', option: Record<string, unknown>): void
+  (e: 'clear'): void
+  (e: 'update:modelValue', value: Record<string, unknown> | Record<string, unknown>[] | null): void
+}
+
 interface Props {
   disabled?: boolean
   emptyMessage?: string
@@ -114,13 +114,6 @@ const props = withDefaults(defineProps<Props>(), {
   modelValue: null,
 })
 
-interface Emits {
-  (e: 'search', query: string): void
-  (e: 'select', option: Record<string, unknown>): void
-  (e: 'clear'): void
-  (e: 'update:modelValue', value: Record<string, unknown> | Record<string, unknown>[] | null): void
-}
-
 const emit = defineEmits<Emits>()
 
 const selectModel = computed({

package/src/components/CpSelect.vue

@@ -6,7 +6,6 @@
     <div class="cpSelect__container">
       <select
         :id="selectReferenceId"
-        ref="cpSelect"
         :value="modelValue"
         :disabled="disabled"
         :required="required"
@@ -40,6 +39,10 @@ import TransitionExpand from '@/components/TransitionExpand.vue'
 
 import { randomString, capitalizeFirstLetter } from '@/helpers'
 
+interface Emits {
+  (e: 'update:modelValue', value: string): void
+}
+
 interface SelectOption {
   label: string
   value: string | number
@@ -60,10 +63,6 @@ interface Props {
   required?: boolean
 }
 
-interface Emits {
-  (e: 'update:modelValue', value: string): void
-}
-
 const props = withDefaults(defineProps<Props>(), {
   label: '',
   modelValue: '',

package/src/components/CpSelectMenu.vue

@@ -78,6 +78,7 @@ const props = withDefaults(defineProps<Props>(), {
   dropdownTitle: 'Select value',
   dropdownFilterPlaceholder: 'Filter...',
   dropdownEmptyViewPlaceholder: 'No option found',
+  // eslint-disable-next-line vue/no-boolean-default
   closeOnSelect: true,
 })
 

package/src/components/CpTable.vue

@@ -121,7 +121,12 @@ import { camelize, decamelize } from '@/helpers/string'
 import { PAGINATION_FORMATS, RESERVED_KEYS, VISIBLE_ROWS_MAX } from '@/constants'
 import { randomString } from '@/helpers'
 
-const LoaderColor = '#5341F9'
+interface Emits {
+  (e: 'onRowClick', data: Record<string, unknown>): void
+  (e: 'onRowRightClick', payload: { data: Record<string, unknown>; event: Event }): void
+  (e: 'onNextClick'): void
+  (e: 'onPreviousClick'): void
+}
 
 interface ColumnDefinition {
   id: string
@@ -183,15 +188,10 @@ const props = withDefaults(defineProps<Props>(), {
   rowOptions: () => [],
 })
 
-interface Emits {
-  (e: 'onRowClick', data: Record<string, unknown>): void
-  (e: 'onRowRightClick', payload: { data: Record<string, unknown>; event: Event }): void
-  (e: 'onNextClick'): void
-  (e: 'onPreviousClick'): void
-}
-
 const emit = defineEmits<Emits>()
 
+const LoaderColor = '#5341F9'
+
 const uniqueId = ref(randomString())
 const pageNumber = ref(0)
 const cpTableContainer = ref<HTMLElement | null>(null)

package/src/components/CpTextarea.vue

@@ -35,6 +35,10 @@ import TransitionExpand from '@/components/TransitionExpand.vue'
 
 import { randomString, capitalizeFirstLetter } from '@/helpers'
 
+interface Emits {
+  (e: 'update:modelValue', value: string): void
+}
+
 interface Props {
   disabled?: boolean
   errorMessage?: string
@@ -59,10 +63,6 @@ const props = withDefaults(defineProps<Props>(), {
   height: 200,
 })
 
-interface Emits {
-  (e: 'update:modelValue', value: string): void
-}
-
 const emit = defineEmits<Emits>()
 
 const textareaModel = defineModel<string>({

package/src/constants/Button.ts

@@ -0,0 +1,16 @@
+export enum ButtonAppearances {
+  DEFAULT = 'default',
+  PRIMARY = 'primary',
+  MINIMAL = 'minimal',
+}
+
+export enum ButtonTags {
+  BUTTON = 'button',
+  A = 'a',
+}
+
+export enum ButtonTypes {
+  BUTTON = 'button',
+  SUBMIT = 'submit',
+  RESET = 'reset',
+}

package/src/constants/CpCustomIcons.ts

@@ -10,7 +10,7 @@ export const CustomCpIcons = {
   arrival: defineAsyncComponent(() => import('@/components/icons/IconArrival.vue')),
   'baggage-cabin-none': defineAsyncComponent(() => import('@/components/icons/IconBaggageCabinNone.vue')),
   'baggage-checked-none': defineAsyncComponent(() => import('@/components/icons/IconBaggageCheckedNone.vue')),
-  'baggage-checked-personal-none': defineAsyncComponent(() => import('@/components/icons/IconBaggagePersonalNone.vue')),
+  'baggage-personal-none': defineAsyncComponent(() => import('@/components/icons/IconBaggagePersonalNone.vue')),
   broadcast: defineAsyncComponent(() => import('@/components/icons/IconBroadcast.vue')),
   'calendar-2': defineAsyncComponent(() => import('@/components/icons/IconCalendar.vue')),
   'calendar-delay': defineAsyncComponent(() => import('@/components/icons/IconCalendarDelay.vue')),

package/src/constants/index.ts

@@ -8,3 +8,5 @@ export { PartnerTypes } from './PartnerTypes'
 
 export { CustomCpIcons } from './CpCustomIcons'
 export { Intent } from './Intent'
+
+export const HUMAN_MAX_AGE = 120

package/src/libs/CoreDatepicker.vue

@@ -79,7 +79,7 @@
               >
                 <option
                   v-if="years.indexOf(month.year) === -1"
-                  :key="`month-${monthIndex}-${year}`"
+                  :key="`month-${monthIndex}-${month.year}`"
                   :value="month.year"
                   :disabled="true"
                 >
@@ -246,15 +246,16 @@ export default {
     },
     isTest: {
       type: Boolean,
+      // eslint-disable-next-line vue/no-boolean-default
       default: () => process.env.NODE_ENV === 'test',
     },
   },
   emits: [
-    'date-one-selected',
-    'date-two-selected',
-    'is-inline',
-    'previous-month',
-    'next-month',
+    'dateOneSelected',
+    'dateTwoSelected',
+    'isInline',
+    'previousMonth',
+    'nextMonth',
     'opened',
     'cancelled',
     'closed',
@@ -382,11 +383,11 @@ export default {
   watch: {
     selectedDate1(newValue) {
       const newDate = !newValue || newValue === '' ? '' : newValue
-      this.$emit('date-one-selected', newDate)
+      this.$emit('dateOneSelected', newDate)
     },
     selectedDate2(newValue) {
       const newDate = !newValue || newValue === '' ? '' : newValue
-      this.$emit('date-two-selected', newDate)
+      this.$emit('dateTwoSelected', newDate)
     },
     mode() {
       this.setStartDates()
@@ -408,7 +409,7 @@ export default {
       }
       if (this.isDateTwoBeforeDateOne) {
         this.selectedDate2 = ''
-        this.$emit('date-two-selected', '')
+        this.$emit('dateTwoSelected', '')
       }
     },
     trigger(newValue) {
@@ -442,11 +443,15 @@ 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)
+
     this.triggerElement.removeEventListener('click', this._handleWindowClickEvent)
   },
   methods: {
@@ -456,7 +461,7 @@ export default {
       this._handleWindowResizeEvent = this.debounce(() => {
         if (this.inline) this.openDatepicker()
         else this.closeDatepicker()
-        this.$emit('is-inline', this.inline)
+        this.$emit('isInline', this.inline)
         this.positionDatepicker()
         this.setStartDates()
       }, 200)
@@ -878,7 +883,7 @@ export default {
 
       this.months.unshift(this.getMonth(this.startingDate))
       this.months.splice(this.months.length - 1, 1)
-      this.$emit('previous-month', this.visibleMonths)
+      this.$emit('previousMonth', this.visibleMonths)
       this.resetFocusedDate(false)
     },
     nextMonth() {
@@ -886,7 +891,7 @@ export default {
       this.startingDate = this.addMonths(this.months[this.months.length - 1].firstDateOfMonth)
       this.months.push(this.getMonth(this.startingDate))
       this.months.splice(0, 1)
-      this.$emit('next-month', this.visibleMonths)
+      this.$emit('nextMonth', this.visibleMonths)
       this.resetFocusedDate(true)
     },
     subtractMonths(date) {
@@ -922,7 +927,9 @@ 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(() => {
@@ -988,6 +995,7 @@ export default {
   },
 }
 </script>
+
 <style lang="scss">
 $tablet: 768px;
 

package/src/stories/CpBadge.stories.ts

@@ -1,7 +1,9 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Args, Meta, StoryObj } from '@storybook/vue3'
 
 import CpBadge from '@/components/CpBadge.vue'
 
+import { Colors, Sizes } from '@/constants'
+
 const meta = {
   title: 'CpBadge',
   component: CpBadge,
@@ -13,7 +15,7 @@ const meta = {
     },
     size: {
       control: 'select',
-      options: ['sm', 'md'],
+      options: ['xs', 'sm', 'md'],
       description: 'The size of the badge',
     },
     isStroked: {
@@ -26,12 +28,12 @@ const meta = {
     },
     leadingIcon: {
       control: 'select',
-      options: ['check', 'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down'],
+      options: ['', 'check', 'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down', 'plus'],
       description: 'Type of leading icon (if any)',
     },
     trailingIcon: {
       control: 'select',
-      options: ['check', 'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down'],
+      options: ['', 'check', 'arrow-right', 'arrow-left', 'arrow-up', 'arrow-down', 'plus'],
       description: 'Type of trailing icon (if any)',
     },
     label: {
@@ -45,23 +47,28 @@ export default meta
 
 type Story = StoryObj<typeof meta>
 
+const defaultTemplate = '<CpBadge v-bind="args" />'
+const defaultRender = (args: Args) => ({
+  components: { CpBadge },
+  setup() {
+    return { args }
+  },
+  template: defaultTemplate,
+})
+
 export const Default: Story = {
   args: {
-    color: 'gray',
-    size: 'md',
+    color: Colors.GRAY,
+    size: Sizes.MD,
     isStroked: false,
     isSquare: false,
+    isClearable: false,
+    isDisabled: false,
     leadingIcon: '',
     trailingIcon: '',
     label: 'Badge',
   },
-  render: (args) => ({
-    components: { CpBadge },
-    setup() {
-      return { args }
-    },
-    template: '<CpBadge v-bind="args" />',
-  }),
+  render: defaultRender,
 }
 
 export const WithColors: Story = {
@@ -83,74 +90,84 @@ export const WithColors: Story = {
 }
 
 export const WithSizes: Story = {
-  render: () => ({
+  render: (args: Args) => ({
     components: { CpBadge },
+    setup() {
+      return { args }
+    },
     template: `
       <div style="display: flex; gap: 8px; align-items: center;">
-        <CpBadge size="sm" label="Small" />
-        <CpBadge size="md" label="Medium" />
+        <CpBadge v-bind="args" leading-icon="plus" trailing-icon="plus" size="md" label="Medium" />
+        <CpBadge v-bind="args" leading-icon="plus" trailing-icon="plus" size="sm" label="Small" />
+        <CpBadge v-bind="args" leading-icon="plus" trailing-icon="plus" size="xs" label="Extra Small" />
       </div>
     `,
   }),
 }
 
-export const IsStroked: Story = {
-  render: () => ({
-    components: { CpBadge },
-    template: `
-      <div style="display: flex; gap: 8px; flex-wrap: wrap;">
-        <CpBadge color="blue" isStroked label="Stroked" />
-        <CpBadge color="green" isStroked label="Stroked" />
-        <CpBadge color="red" isStroked label="Stroked" />
-      </div>
-    `,
-  }),
+export const WithIcons: Story = {
+  args: { ...Default.args, leadingIcon: 'check', trailingIcon: 'arrow-right', label: 'Both Icons' },
+  render: defaultRender,
 }
 
-export const WithIcons: Story = {
-  render: () => ({
+export const WithLeadingIcon: Story = {
+  args: { ...Default.args, leadingIcon: 'check', label: 'Leading Icon' },
+  render: defaultRender,
+}
+
+export const WithTrailingIcon: Story = {
+  args: { ...Default.args, trailingIcon: 'check', label: 'Trailing Icon' },
+  render: defaultRender,
+}
+
+export const IconOnly: Story = {
+  args: { ...Default.args, leadingIcon: 'check', label: '' },
+  render: defaultRender,
+}
+
+export const IsStroked: Story = {
+  render: (args: Args) => ({
     components: { CpBadge },
+    setup() {
+      return { args }
+    },
     template: `
       <div style="display: flex; gap: 8px; align-items: center;">
-        <CpBadge color="blue" leading-icon="check" label="Leading Icon" />
-        <CpBadge color="green" trailing-icon="arrow-right" label="Trailing Icon" />
-        <CpBadge color="red" leading-icon="check" trailing-icon="arrow-right" label="Both Icons" />
+        <CpBadge v-bind="args" is-stroked color="blue" leading-icon="plus" trailing-icon="plus" label="Label" />
+        <CpBadge v-bind="args" is-stroked color="red" leading-icon="plus" trailing-icon="plus" label="Label" />
+        <CpBadge v-bind="args" is-stroked color="orange" leading-icon="plus" trailing-icon="plus" label="Label" />
+        <CpBadge v-bind="args" is-stroked color="yellow" leading-icon="plus" trailing-icon="plus" label="Label" />
+        <CpBadge v-bind="args" is-stroked color="green" leading-icon="plus" trailing-icon="plus" label="Label" />
+        <CpBadge v-bind="args" is-stroked color="purple" leading-icon="plus" trailing-icon="plus" label="Label" />
+        <CpBadge v-bind="args" is-stroked color="gray" leading-icon="plus" trailing-icon="plus" label="Label" />
       </div>
     `,
   }),
 }
 
 export const IsSquare: Story = {
-  render: () => ({
-    components: { CpBadge },
-    template: `
-      <div style="display: flex; gap: 8px; align-items: center;">
-        <CpBadge color="blue" isSquare label="Square" />
-        <CpBadge color="green" isSquare label="Square" />
-        <CpBadge color="red" isSquare label="Square" />
-      </div>
-    `,
-  }),
+  args: { ...Default.args, isSquare: true, label: 'Square' },
+  render: defaultRender,
 }
 
 export const IsClearable: Story = {
-  render: () => ({
-    components: { CpBadge },
-    template: `
-      <div style="display: flex; gap: 8px; align-items: center;">
-        <CpBadge color="blue" isClearable label="Clearable" />
-        <CpBadge color="green" isClearable label="Clearable" />
-        <CpBadge color="red" isClearable label="Clearable" />
-      </div>
-    `,
-  }),
+  args: { ...Default.args, isClearable: true, label: 'Clearable' },
+  render: defaultRender,
+}
+
+export const IsDisabled: Story = {
+  args: { ...Default.args, isDisabled: true, label: 'Disabled' },
+  render: defaultRender,
 }
 
 export const WithSlot: Story = {
-  render: () => ({
+  render: (args: Args) => ({
     components: { CpBadge },
+    setup() {
+      return { args }
+    },
     template: `
-      <CpBadge color="purple">
+      <CpBadge v-bind="args">
         <template #leading-icon>
           <span style="font-size: 16px; margin-right: 4px;">🌟</span>
         </template>

package/src/stories/CpDate.stories.ts

@@ -77,7 +77,7 @@ export const Default: Story = {
         <CpDate
           v-model="date"
           v-bind="args"
-          @on-validation="(isValid) => console.log('Validation:', isValid)"
+          @onValidation="(isValid) => console.log('Validation:', isValid)"
         />
       </div>
     `,

package/src/stories/CpMultiselect.stories.ts

@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { ref, toValue } from 'vue'
 
 import type { Meta, StoryObj } from '@storybook/vue3'
 
@@ -87,7 +87,7 @@ export const Single: Story = {
       const isLoading = ref(false)
 
       const originalOptions = ref(args.options)
-      const dynamicOptions = ref(originalOptions.value)
+      const dynamicOptions = ref(toValue(originalOptions))
 
       const handleSearch = async (query: string) => {
         isLoading.value = true
@@ -97,7 +97,8 @@ export const Single: Story = {
 
         await new Promise((resolve) => setTimeout(resolve, 500))
 
-        dynamicOptions.value = dynamicOptions.value.filter((option: { name: string }) => {
+        dynamicOptions.value = dynamicOptions.value?.filter((option) => {
+          // @ts-expect-error option is unknown
           return option.name.toLowerCase().includes(searchQuery.value.toLowerCase())
         })
 
@@ -165,7 +166,7 @@ export const Multiple: Story = {
       const isLoading = ref(false)
 
       const originalOptions = ref(args.options)
-      const dynamicOptions = ref(originalOptions.value)
+      const dynamicOptions = ref(toValue(originalOptions))
 
       const handleSearch = async (query: string) => {
         isLoading.value = true
@@ -175,7 +176,8 @@ export const Multiple: Story = {
 
         await new Promise((resolve) => setTimeout(resolve, 500))
 
-        dynamicOptions.value = dynamicOptions.value.filter((option: { name: string }) => {
+        dynamicOptions.value = dynamicOptions.value?.filter((option) => {
+          // @ts-expect-error option is unknown
           return option.name.toLowerCase().includes(searchQuery.value.toLowerCase())
         })