@citizenplane/pimp 8.26.1 → 8.27.0

package/src/components/toggles/CpCheckbox.vue

@@ -26,63 +26,36 @@
   </label>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed, ref, onMounted, useSlots } from 'vue'
 
-import { capitalizeFirstLetter, randomString } from '@/helpers'
 import { ToggleColors } from '@/constants'
+import { capitalizeFirstLetter, randomString } from '@/helpers'
 
-const props = defineProps({
-  modelValue: {
-    type: [Array, Boolean],
-    default: () => [],
-    required: false,
-  },
-  checkboxValue: {
-    type: [String, Number],
-    default: '',
-    required: false,
-  },
-  checkboxLabel: {
-    type: String,
-    required: false,
-    default: '',
-  },
-  isDisabled: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-  groupName: {
-    type: String,
-    default: '',
-    required: false,
-  },
-  capitalizeLabel: {
-    type: Boolean,
-    default: true,
-  },
-  color: {
-    type: String,
-    required: false,
-    default: ToggleColors.BLUE,
-    validator: (value) => Object.values(ToggleColors).includes(value),
-  },
-  reverseLabel: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  autofocus: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
-  helper: {
-    type: String,
-    required: false,
-    default: '',
-  },
+interface Props {
+  autofocus?: boolean
+  capitalizeLabel?: boolean
+  checkboxLabel?: string
+  checkboxValue?: string | number
+  color?: string
+  groupName?: string
+  helper?: string
+  isDisabled?: boolean
+  modelValue?: boolean | unknown[]
+  reverseLabel?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  checkboxValue: '',
+  checkboxLabel: '',
+  isDisabled: false,
+  groupName: '',
+  capitalizeLabel: true,
+  color: ToggleColors.BLUE,
+  reverseLabel: false,
+  autofocus: false,
+  helper: '',
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -92,6 +65,9 @@ const checkboxUniqueId = ref('')
 
 const isChecked = computed({
   get() {
+    if (Array.isArray(props.modelValue)) {
+      return props.modelValue.includes(props.checkboxValue)
+    }
     return props.modelValue
   },
   set(newValue) {
@@ -123,7 +99,22 @@ const labelComputedClasses = computed(() => {
 
 onMounted(() => (checkboxUniqueId.value = randomString()))
 
-const onChange = () => emit('update:modelValue', checkedProxy.value)
+const onChange = (value: string | number) => {
+  if (Array.isArray(props.modelValue)) {
+    const currentValues = [...props.modelValue]
+    const valueIndex = currentValues.indexOf(value)
+
+    if (valueIndex > -1) {
+      currentValues.splice(valueIndex, 1)
+    } else {
+      currentValues.push(value)
+    }
+
+    emit('update:modelValue', currentValues)
+  } else {
+    emit('update:modelValue', !props.modelValue)
+  }
+}
 </script>
 
 <style lang="scss">

package/src/components/toggles/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>
 

package/src/components/toggles/CpSwitch.vue

@@ -22,76 +22,60 @@
   </label>
 </template>
 
-<script>
-import { capitalizeFirstLetter, randomString } from '@/helpers'
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+
 import { ToggleColors } from '@/constants'
+import { capitalizeFirstLetter, randomString } from '@/helpers'
 
-export default {
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: null,
-    },
-    label: {
-      type: String,
-      default: '',
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    groupName: {
-      type: String,
-      default: '',
-      required: false,
-    },
-    color: {
-      type: String,
-      required: false,
-      default: ToggleColors.BLUE,
-      validator: (value) => Object.values(ToggleColors).includes(value),
-    },
-    reverseLabel: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    autofocus: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-  emits: ['update:modelValue'],
-  data() {
-    return {
-      switchUniqueId: '',
-    }
-  },
-  computed: {
-    capitalizedColor() {
-      return capitalizeFirstLetter(this.color)
-    },
-    computedClasses() {
-      return [
-        {
-          'cpSwitch--hasLabel': this.label,
-          'cpSwitch--isActive': this.modelValue,
-          'cpSwitch--isDisabled': this.disabled,
-          'cpSwitch--isReversed': this.reverseLabel,
-        },
-        `cpSwitch--is${this.capitalizedColor}`,
-      ]
-    },
-  },
-  mounted() {
-    this.switchUniqueId = randomString()
-  },
-  methods: {
-    handleClick(value) {
-      this.$emit('update:modelValue', !value)
+interface Props {
+  autofocus?: boolean
+  color?: string
+  disabled?: boolean
+  groupName?: string
+  label?: string
+  modelValue?: boolean
+  reverseLabel?: boolean
+}
+
+interface Emits {
+  (e: 'update:modelValue', value: boolean): void
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  label: '',
+  disabled: false,
+  groupName: '',
+  color: ToggleColors.BLUE,
+  reverseLabel: false,
+  autofocus: false,
+})
+
+const emit = defineEmits<Emits>()
+
+const switchUniqueId = ref('')
+
+switchUniqueId.value = randomString()
+
+const capitalizedColor = computed(() => {
+  return capitalizeFirstLetter(props.color)
+})
+
+const computedClasses = computed(() => {
+  return [
+    {
+      'cpSwitch--hasLabel': props.label,
+      'cpSwitch--isActive': props.modelValue,
+      'cpSwitch--isDisabled': props.disabled,
+      'cpSwitch--isReversed': props.reverseLabel,
     },
-  },
+    `cpSwitch--is${capitalizedColor.value}`,
+  ]
+})
+
+const handleClick = (value: boolean): void => {
+  emit('update:modelValue', !value)
 }
 </script>
 

package/src/components/typography/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

@@ -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/constants/{src/CpCustomIcons.ts → CpCustomIcons.ts}

@@ -1,6 +1,6 @@
 import { defineAsyncComponent } from 'vue'
 
-export default {
+export const CustomCpIcons = {
   'accompanied-minor-each': defineAsyncComponent(() => import('@/components/icons/IconAccompaniedMinorEach.vue')),
   'accompanied-minor-none': defineAsyncComponent(() => import('@/components/icons/IconAccompaniedMinorNone.vue')),
   'accompanied-minor-one': defineAsyncComponent(() => import('@/components/icons/IconAccompaniedMinorOne.vue')),

package/src/constants/CpTableConfig.ts

@@ -0,0 +1,12 @@
+export const VISIBLE_ROWS_MAX = 100
+
+export enum RESERVED_KEYS {
+  GROUP_BY = 'groupBy',
+  FULL_WIDTH = 'fullWidth',
+  IS_SELECTED = 'isSelected',
+}
+
+export enum PAGINATION_FORMATS {
+  RESULTS = 'results',
+  PAGES = 'pages',
+}

package/src/constants/Heading.ts

@@ -0,0 +1,8 @@
+export enum HeadingLevels {
+  H1 = 'h1',
+  H2 = 'h2',
+  H3 = 'h3',
+  H4 = 'h4',
+  H5 = 'h5',
+  H6 = 'h6',
+}

package/src/{utils/constants/src/Intent.js → constants/Intent.ts}

@@ -1,4 +1,4 @@
-export default {
+export const Intent = {
   SUCCESS: {
     value: 'success',
     icon: 'check-circle',

package/src/constants/PartnerTypes.ts

@@ -0,0 +1,6 @@
+export enum PartnerTypes {
+  OTA = 'ota',
+  AIRLINE = 'airline',
+  SUPPLIER = 'supplier',
+  THIRDPARTY = 'thirdParty',
+}

package/src/constants/Position.ts

@@ -0,0 +1,10 @@
+export enum Position {
+  TOP = 'top',
+  TOP_LEFT = 'top-left',
+  TOP_RIGHT = 'top-right',
+  BOTTOM = 'bottom',
+  BOTTOM_LEFT = 'bottom-left',
+  BOTTOM_RIGHT = 'bottom-right',
+  LEFT = 'left',
+  RIGHT = 'right',
+}

package/src/constants/Sizes.ts

@@ -0,0 +1,5 @@
+export enum Sizes {
+  XS = 'xs',
+  SM = 'sm',
+  MD = 'md',
+}

package/src/constants/colors/Colors.ts

@@ -0,0 +1,10 @@
+export enum Colors {
+  BLUE = 'blue',
+  GRAY = 'gray',
+  GREEN = 'green',
+  ORANGE = 'orange',
+  PINK = 'pink',
+  PURPLE = 'purple',
+  RED = 'red',
+  YELLOW = 'yellow',
+}

package/src/constants/colors/ToggleColors.ts

@@ -0,0 +1,6 @@
+import { Colors } from './Colors'
+
+export enum ToggleColors {
+  BLUE = Colors.BLUE,
+  PURPLE = Colors.PURPLE,
+}

package/src/constants/index.ts

@@ -1,5 +1,10 @@
-export { default as Colors } from './src/colors/Colors'
-export { default as ToggleColors } from './src/colors/ToggleColors'
-export { default as Position } from './src/Position'
-export { default as CpTableConfig } from './src/CpTableConfig'
-export { default as CustomCpIcons } from './src/CpCustomIcons'
+export { Colors } from './colors/Colors'
+export { Position } from './Position'
+export { ToggleColors } from './colors/ToggleColors'
+export { HeadingLevels } from './Heading'
+export { PAGINATION_FORMATS, RESERVED_KEYS, VISIBLE_ROWS_MAX } from './CpTableConfig'
+export { Sizes } from './Sizes'
+export { PartnerTypes } from './PartnerTypes'
+
+export { CustomCpIcons } from './CpCustomIcons'
+export { Intent } from './Intent'

package/src/directives/ClickOutside.ts

@@ -0,0 +1,17 @@
+type ClickOutsideBinding = {
+  value: (event: MouseEvent, el: HTMLElement) => void
+}
+
+export default {
+  beforeMount(el: HTMLElement & { clickOutsideEvent?: (e: MouseEvent) => void }, binding: ClickOutsideBinding) {
+    el.clickOutsideEvent = function (event: MouseEvent) {
+      if (!(el === event.target || el.contains(event.target as Node))) {
+        binding.value(event, el)
+      }
+    }
+    document.body.addEventListener('click', el.clickOutsideEvent)
+  },
+  unmounted(el: HTMLElement & { clickOutsideEvent?: (e: MouseEvent) => void }) {
+    document.body.removeEventListener('click', el.clickOutsideEvent as (e: MouseEvent) => void)
+  },
+}

package/src/directives/{ResizeSelect.js → ResizeSelect.ts}

@@ -3,13 +3,13 @@ export default {
   inserted: resizeSelect,
 }
 
-function resizeSelect(el) {
+function resizeSelect(el: HTMLSelectElement) {
   const select = document.createElement('select')
   select.className = el.className
   const option = document.createElement('option')
   option.textContent = el.value
   select.appendChild(option)
-  el.parentNode.appendChild(select)
+  el.parentNode?.appendChild(select)
   el.style.width = select.offsetWidth + 'px'
-  select.parentNode.removeChild(select)
+  select.parentNode?.removeChild(select)
 }

package/src/helpers/{dom.js → dom.ts}

@@ -1,9 +1,11 @@
-export const getKeyboardFocusableElements = (DOMElement = document) => {
-  if (DOMElement === null) return []
+export const getKeyboardFocusableElements = (DOMElement: Document | HTMLElement | null = document) => {
+  if (DOMElement === null) return [] as (HTMLElement | SVGElement)[]
 
-  const focusableElements = [
-    ...DOMElement.querySelectorAll('a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'),
-  ]
+  const focusableElements = Array.from(
+    (DOMElement as Document | HTMLElement).querySelectorAll<HTMLElement | SVGElement>(
+      'a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])',
+    ),
+  )
 
   if (!focusableElements.length) {
     return DOMElement instanceof HTMLElement ? [DOMElement] : []
@@ -11,7 +13,7 @@ export const getKeyboardFocusableElements = (DOMElement = document) => {
 
   return focusableElements.filter((element) => {
     const isElementDisabled = element.hasAttribute('disabled')
-    const isElementVisible = element.offsetHeight !== 0 && element.offsetWidth !== 0
+    const isElementVisible = (element as HTMLElement).offsetHeight !== 0 && (element as HTMLElement).offsetWidth !== 0
 
     const isInputElement = element instanceof HTMLInputElement
     const isElementRadioNotChecked = isInputElement && element.type === 'radio' && element.checked === false
@@ -20,7 +22,9 @@ export const getKeyboardFocusableElements = (DOMElement = document) => {
   })
 }
 
-export const handleTrapFocus = (event, DOMElement) => {
+export const handleTrapFocus = (event: KeyboardEvent, DOMElement?: HTMLElement) => {
+  if (!DOMElement) return
+
   const childFocusableElements = getKeyboardFocusableElements(DOMElement)
   const firstElement = childFocusableElements[0]
   const lastElement = childFocusableElements[childFocusableElements.length - 1]
@@ -32,10 +36,10 @@ export const handleTrapFocus = (event, DOMElement) => {
     // only TAB is pressed, not SHIFT simultaneously
     // Prevent default behavior of keydown on TAB (i.e. focus next element)
     event.preventDefault()
-    firstElement.focus()
+    firstElement?.focus()
   } else if (tabBackwards) {
     // TAB and SHIFT are pressed simultaneously
     event.preventDefault()
-    lastElement.focus()
+    lastElement?.focus()
   }
 }

package/src/helpers/{index.js → index.ts}

@@ -1,10 +1,20 @@
 import { DateTime } from 'luxon'
 
-export const randomString = () => {
+export const randomString = (): string => {
   return `_${Math.random().toString(36).substr(2, 9)}`
 }
 
-export const formatDates = function formatDates({ dateOne, dateTwo, format, locale }) {
+export const formatDates = ({
+  dateOne,
+  dateTwo,
+  format,
+  locale,
+}: {
+  dateOne?: string
+  dateTwo?: string
+  format: string
+  locale?: string
+}): string => {
   let formattedDates = ''
 
   if (dateOne) {
@@ -17,7 +27,7 @@ export const formatDates = function formatDates({ dateOne, dateTwo, format, loca
   return formattedDates
 }
 
-export const capitalizeFirstLetter = (rawString) => {
+export const capitalizeFirstLetter = (rawString: unknown): string => {
   if (typeof rawString !== 'string') return ''
   return rawString.charAt(0).toUpperCase() + rawString.slice(1)
 }