@citizenplane/pimp 8.26.1 → 8.28.1

package/src/components/{typography/CpHeading.vue → CpHeading.vue}

@@ -4,42 +4,24 @@
   </component>
 </template>
 
-<script>
-const headingLevels = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']
+<script setup lang="ts">
+import { HeadingLevels } from '@/constants'
 
-const sizes = [100, 200, 300, 400, 500, 600, 700, 800, 900]
+type HeadingSize = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
 
-export default {
-  props: {
-    headingLevel: {
-      type: String,
-      default: headingLevels[0],
-      validator: (value) => {
-        return headingLevels.includes(value)
-      },
-      required: false,
-    },
-    size: {
-      type: Number,
-      default: sizes[4],
-      validator: (value) => {
-        return sizes.includes(value)
-      },
-      required: false,
-    },
-  },
-  data() {
-    return {
-      headingLevels,
-    }
-  },
+interface Props {
+  headingLevel?: HeadingLevels
+  size?: HeadingSize
 }
+
+withDefaults(defineProps<Props>(), {
+  headingLevel: HeadingLevels.H1,
+  size: 500,
+})
 </script>
 
 <style lang="scss">
 .cpHeading {
-  color: colors.$neutral-dark;
-
   &:first-letter {
     text-transform: capitalize;
   }
@@ -49,14 +31,12 @@ export default {
     font-weight: 400;
     line-height: fn.px-to-rem(16);
     letter-spacing: fn.px-to-em(0.6);
-    color: colors.$neutral-dark-1;
   }
 
   &--200 {
     font-size: fn.px-to-rem(12);
     font-weight: 600;
     line-height: fn.px-to-rem(16);
-    color: colors.$neutral-dark-1;
   }
 
   &--300 {

package/src/components/{visual/CpIcon.vue → CpIcon.vue}

@@ -5,8 +5,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
 import * as feather from 'feather-icons'
+import { computed } from 'vue'
+
 import { CustomCpIcons } from '@/constants'
 
 interface Props {

package/src/components/{inputs/CpInput.vue → CpInput.vue}

@@ -4,7 +4,7 @@
       {{ capitalizedLabel }} <span v-if="isRequired" class="u-asterisk">*</span>
       <cp-tooltip v-if="tooltip" :content="tooltip">
         <button type="button" class="cpInput__tooltip">
-          <cp-icon class="cpInput__tooltipIcon" type="cp-tooltip" />
+          <cp-icon class="cpInput__tooltipIcon" type="tooltip" />
         </button>
       </cp-tooltip>
     </base-input-label>
@@ -56,72 +56,55 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { ref, useAttrs, useSlots, computed, nextTick, onMounted, useId } from 'vue'
 
-import BaseInputLabel from '@/components/core/BaseInputLabel.vue'
+import BaseInputLabel from '@/components/BaseInputLabel.vue'
 
 import { randomString, capitalizeFirstLetter } from '@/helpers'
 
-const props = defineProps({
-  modelValue: {
-    type: [String, Number, Boolean],
-    default: '',
-  },
-  tooltip: {
-    type: String,
-    default: '',
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-  inputId: {
-    type: String,
-    default: null,
-  },
-  isInvalid: {
-    type: Boolean,
-    default: false,
-  },
-  errorMessage: {
-    type: String,
-    default: '',
-  },
-  mask: {
-    type: [String, Object],
-    default: null,
-  },
-  hideInvalidityIcon: {
-    type: Boolean,
-    default: false,
-  },
-  removeBorder: {
-    type: Boolean,
-    default: false,
-  },
-  isLarge: {
-    type: Boolean,
-    default: false,
-  },
-  isSearch: {
-    type: Boolean,
-    default: false,
-  },
-  help: {
-    type: String,
-    default: '',
-  },
+interface Props {
+  errorMessage?: string
+  help?: string
+  hideInvalidityIcon?: boolean
+  inputId?: string | null
+  isInvalid?: boolean
+  isLarge?: boolean
+  isSearch?: boolean
+  label?: string
+  mask?: string | Record<string, unknown> | null
+  modelValue?: string | number | boolean
+  removeBorder?: boolean
+  tooltip?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: '',
+  tooltip: '',
+  label: '',
+  inputId: null,
+  isInvalid: false,
+  errorMessage: '',
+  mask: null,
+  hideInvalidityIcon: false,
+  removeBorder: false,
+  isLarge: false,
+  isSearch: false,
+  help: '',
 })
 
-const emit = defineEmits(['update:modelValue'])
+interface Emits {
+  (e: 'update:modelValue', value: string | number | boolean): void
+}
+
+const emit = defineEmits<Emits>()
 
 defineOptions({ inheritAttrs: false })
 
 const attrs = useAttrs()
 
 // class is a reserved word, we can't remove 'class' property from attrs
-// eslint-disable-next-line
+
 const { ['class']: value, id, ...restAttributes } = attrs
 
 const inputIdentifier = ref(id || randomString())
@@ -135,7 +118,7 @@ const slots = useSlots()
 
 const capitalizedLabel = computed(() => capitalizeFirstLetter(props.label))
 
-const inputModel = defineModel({
+const inputModel = defineModel<string | number | boolean>({
   type: [String, Number, Boolean],
   default: '',
   set(newValue) {
@@ -181,11 +164,11 @@ const iconInvalidityClasses = computed(() => {
 const DOMElement = computed(() => cpInputContainer.value.children.namedItem(inputIdentifier.value))
 
 const displayErrorMessage = computed(() => isInputInvalid.value && props.errorMessage.length)
-const isClearButtonVisible = computed(() => props.isSearch && inputModel.value.length)
+const isClearButtonVisible = computed(() => props.isSearch && inputModel.value.toString().length)
 
 const displayHelp = computed(() => props.help?.length && !displayErrorMessage.value)
 
-const handleChange = (newValue) => {
+const handleChange = (newValue: string | number | boolean) => {
   emit('update:modelValue', newValue)
   checkInputValidity()
 }
@@ -203,7 +186,7 @@ const checkInputValidity = () => {
     (DOMElement.value.validity && DOMElement.value.validity.valueMissing)
 }
 
-const checkAttribute = (attribute) => attrs[attribute] === '' || attrs[attribute] === true
+const checkAttribute = (attribute: string) => attrs[attribute] === '' || attrs[attribute] === true
 
 const clearInputValue = () => emit('update:modelValue', '')
 

package/src/components/{feedback-indicators/CpLoader.vue → CpLoader.vue}

@@ -33,13 +33,12 @@
   </svg>
 </template>
 
-<script>
-export default {
-  props: {
-    color: {
-      type: String,
-      default: '#ff6700',
-    },
-  },
+<script setup lang="ts">
+interface Props {
+  color?: string
 }
+
+withDefaults(defineProps<Props>(), {
+  color: '#ff6700',
+})
 </script>

package/src/components/{selects/CpMultiselect.vue → CpMultiselect.vue}

@@ -67,96 +67,61 @@
   </div>
 </template>
 
-<script setup>
-import { ref, computed, onMounted } from 'vue'
-import AutoComplete from 'primevue/autocomplete'
-
+<script setup lang="ts">
 import { absolutePosition, getOuterWidth } from '@primeuix/utils/dom'
+import AutoComplete from 'primevue/autocomplete'
+import { ref, computed, onMounted } from 'vue'
 
-import BaseInputLabel from '@/components/core/BaseInputLabel.vue'
-import TransitionExpand from '@/components/helpers-utilities/TransitionExpand.vue'
-import BaseSelectClearButton from '@/components/core/BaseSelectClearButton.vue'
+import BaseInputLabel from '@/components/BaseInputLabel.vue'
+import BaseSelectClearButton from '@/components/BaseSelectClearButton.vue'
+import TransitionExpand from '@/components/TransitionExpand.vue'
 
 import { isEmpty } from '@/helpers/object'
 
-const props = defineProps({
-  label: {
-    type: String,
-    required: false,
-    default: '',
-  },
-  required: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  name: {
-    type: String,
-    required: false,
-    default: '',
-  },
-  placeholder: {
-    type: String,
-    required: false,
-    default: '',
-  },
-  isInvalid: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  isClearable: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  isLoading: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  disabled: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  multiple: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  options: {
-    type: Array,
-    required: false,
-    default: () => [],
-  },
-  optionLabel: {
-    type: String,
-    required: false,
-    default: 'name',
-  },
-  trackBy: {
-    type: String,
-    required: false,
-    default: 'id',
-  },
-  emptyMessage: {
-    type: String,
-    required: false,
-    default: 'No results found',
-  },
-  errorMessage: {
-    type: String,
-    required: false,
-    default: '',
-  },
-  modelValue: {
-    type: [Array, Object],
-    required: false,
-  },
+interface Props {
+  disabled?: boolean
+  emptyMessage?: string
+  errorMessage?: string
+  isClearable?: boolean
+  isInvalid?: boolean
+  isLoading?: boolean
+  label?: string
+  modelValue?: Record<string, unknown>[] | Record<string, unknown> | null
+  multiple?: boolean
+  name?: string
+  optionLabel?: string
+  options?: unknown[]
+  placeholder?: string
+  required?: boolean
+  trackBy?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: '',
+  required: false,
+  name: '',
+  placeholder: '',
+  isInvalid: false,
+  isClearable: false,
+  isLoading: false,
+  disabled: false,
+  multiple: false,
+  options: () => [],
+  optionLabel: 'name',
+  trackBy: 'id',
+  emptyMessage: 'No results found',
+  errorMessage: '',
+  modelValue: null,
 })
 
-const emit = defineEmits(['search', 'select', 'clear'])
+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({
   get() {
@@ -183,7 +148,7 @@ const passThroughConfig = {
   loader: { class: 'cpMultiselect__hidden' },
 }
 
-const multiselect = ref(null)
+const multiselect = ref<InstanceType<typeof AutoComplete> | null>(null)
 
 const isDropdownOpen = computed(() => multiselect.value?.overlayVisible)
 
@@ -203,29 +168,33 @@ const displayClearButton = computed(() => {
   return props.isClearable && !isEmpty(selectModel.value)
 })
 
-const handleSearch = (event) => emit('search', event.query)
+const handleSearch = (event: { query: string }) => emit('search', event.query)
 const handleClear = () => (selectModel.value = null)
 
 const toggleDropdown = () => {
   if (isDropdownOpen.value) {
-    multiselect.value.hide()
+    multiselect.value?.hide()
   } else {
-    multiselect.value.show()
+    multiselect.value?.show()
   }
 }
 
-const handleUpdateModelValue = (value) => {
+const handleUpdateModelValue = (value: Record<string, unknown> | null) => {
   // Autocomplete will set the model value to the query string if not blocked
   if (!value || typeof value === 'string') {
     return
   }
 }
 
-const overrideAlignOverlay = () => (multiselect.value.alignOverlay = alignOverlay)
+const overrideAlignOverlay = () => {
+  if (multiselect.value) {
+    multiselect.value.alignOverlay = alignOverlay
+  }
+}
 
 const alignOverlay = () => {
-  const target = multiselect.value.$el
-  if (!multiselect.value.overlay || !target) return
+  const target = multiselect.value?.$el
+  if (!multiselect.value?.overlay || !target) return
 
   multiselect.value.overlay.style.width = `${getOuterWidth(target)}px`
 

package/src/components/{atomic-elements/CpPartnerBadge.vue → CpPartnerBadge.vue}

@@ -6,32 +6,24 @@
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue'
 
-import { PartnerTypes, Sizes } from '@/utils/constants'
-
-import IconOta from '@/components/icons/IconOta.vue'
 import IconAirline from '@/components/icons/IconAirline.vue'
+import IconOta from '@/components/icons/IconOta.vue'
 import IconSupplier from '@/components/icons/IconSupplier.vue'
 import IconThirdParty from '@/components/icons/IconThirdParty.vue'
 
-const props = defineProps({
-  size: {
-    type: String,
-    required: false,
-    default: Sizes.MD,
-    validator(value) {
-      return Object.values(Sizes).includes(value)
-    },
-  },
-  type: {
-    type: String,
-    required: true,
-    validator(value) {
-      return Object.values(PartnerTypes).includes(value)
-    },
-  },
+import { PartnerTypes, Sizes } from '@/constants'
+
+interface Props {
+  size?: Sizes
+  type?: PartnerTypes
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: Sizes.MD,
+  type: PartnerTypes.THIRDPARTY,
 })
 
 const dynamicBadgeProps = computed(() => {

package/src/components/{toggles/CpRadio.vue → CpRadio.vue}

@@ -28,67 +28,56 @@
   </div>
 </template>
 
-<script>
-import { capitalizeFirstLetter, randomString } from '@/helpers'
+<script setup lang="ts">
+import { ref } from 'vue'
+
 import { ToggleColors } from '@/constants'
+import { capitalizeFirstLetter, randomString } from '@/helpers'
 
-export default {
-  props: {
-    modelValue: {
-      type: String,
-      default: '',
-      required: true,
-    },
-    options: {
-      type: Array,
-      required: true,
-    },
-    groupName: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    color: {
-      type: String,
-      required: false,
-      default: ToggleColors.BLUE,
-      validator: (value) => Object.values(ToggleColors).includes(value),
-    },
-    autofocus: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      radioUniqueId: '',
-    }
-  },
-  mounted() {
-    this.radioUniqueId = randomString()
-  },
-  methods: {
-    onChange(value) {
-      this.$emit('update:modelValue', value)
-    },
-    getRadioId(index) {
-      return `${this.radioUniqueId}${index}`
-    },
-    isActive(value) {
-      return value === this.modelValue
-    },
-    computedClasses({ value, disabled }) {
-      return [
-        {
-          'cpRadio--isActive': this.isActive(value),
-          'cpRadio--isDisabled': disabled,
-        },
-        `cpRadio--is${capitalizeFirstLetter(this.color)}`,
-      ]
+interface RadioOption {
+  additionalData?: string
+  description?: string
+  disabled?: boolean
+  label: string
+  value: string
+}
+
+interface Props {
+  autofocus?: boolean
+  color?: string
+  groupName?: string
+  modelValue: string
+  options: RadioOption[]
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: string): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  groupName: '',
+  color: ToggleColors.BLUE,
+  autofocus: false,
+})
+
+const emit = defineEmits<Emits>()
+
+const radioUniqueId = ref(randomString())
+
+const onChange = (value: string): void => emit('update:modelValue', value)
+
+const getRadioId = (index: number): string => `${radioUniqueId.value}${index}`
+
+const isActive = (value: string): boolean => value === props.modelValue
+
+const computedClasses = ({ value, disabled }: { disabled?: boolean; value: string }) => {
+  return [
+    {
+      'cpRadio--isActive': isActive(value),
+      'cpRadio--isDisabled': disabled,
     },
-  },
+    `cpRadio--is${capitalizeFirstLetter(props.color)}`,
+  ]
 }
 </script>