@citizenplane/pimp 18.6.2 → 18.8.0

package/src/components/index.ts

@@ -8,11 +8,10 @@ import { vTooltip } from 'floating-vue'
 import { vMaska } from 'maska/vue'
 import PrimeVue from 'primevue/config'
 import ToastService from 'primevue/toastservice'
+import type { App, Plugin } from 'vue'
 import { BindOnceDirective } from 'vue-bind-once'
 import VueTelInput from 'vue-tel-input'
 
-import type { App, Plugin } from 'vue'
-
 import ClickOutside from '../directives/ClickOutside'
 import CpCoreDatepicker from '../libs/CoreDatepicker.vue'
 import CpAccordion from './CpAccordion.vue'
@@ -60,6 +59,7 @@ import CpTransitionListItems from './CpTransitionListItems.vue'
 import CpTransitionSize from './CpTransitionSize.vue'
 import CpTransitionSlide from './CpTransitionSlide.vue'
 import CpTransitionTabContent from './CpTransitionTabContent.vue'
+import CpTrip from './CpTrip.vue'
 import IconAirline from './icons/IconAirline.vue'
 import IconCheckList from './icons/IconCheckList.vue'
 import IconCollapse from './icons/IconCollapse.vue'
@@ -126,6 +126,7 @@ const Components = {
   CpTransitionListItems,
   CpTransitionSlide,
   CpTransitionTabContent,
+  CpTrip,
 }
 
 const Pimp: Plugin = {
@@ -149,59 +150,60 @@ const Pimp: Plugin = {
 export {
   CpAccordion,
   CpAccordionGroup,
-  CpToast,
-  CpButtonToggle,
+  CpAirlineLogo,
+  CpAlert,
   CpBadge,
-  CpTabs,
-  CpHeading,
   CpButton,
   CpButtonGroup,
-  CpDialog,
-  CpDate,
+  CpButtonToggle,
+  CpCalendar,
+  CpCheckbox,
   CpContextualMenu,
-  CpMenu,
-  CpMenuItem,
-  CpMenuList,
-  CpItemActions,
   CpCoreDatepicker,
+  CpDate,
   CpDatepicker,
-  CpRadioNew,
-  CpCalendar,
-  CpAlert,
-  CpLoader,
+  CpDialog,
+  CpHeading,
+  CpIcon,
   CpInput,
-  CpText,
-  CpTextarea,
-  CpSelect,
-  CpSelectMenu,
+  CpItemActions,
+  CpLoader,
+  CpMenu,
+  CpMenuItem,
+  CpMenuList,
   CpMultiselect,
-  CpCheckbox,
   CpRadio,
   CpRadioGroup,
+  CpRadioNew,
+  CpSelect,
   CpSelectableButton,
+  CpSelectMenu,
   CpSwitch,
   CpTable,
   CpTableColumnEditor,
-  CpIcon,
+  CpTabs,
   CpTelInput,
+  CpText,
+  CpTextarea,
+  CpToast,
   CpTooltip,
-  CpAirlineLogo,
-  IconAirline,
-  IconOta,
-  IconSupplier,
-  IconThirdParty,
-  IconTooltip,
-  IconGroupBy,
-  IconCollapse,
-  IconExpand,
-  IconCheckList,
+  CpTransitionCounter,
   CpTransitionDialog,
   CpTransitionExpand,
-  CpTransitionSize,
-  CpTransitionCounter,
   CpTransitionListItems,
+  CpTransitionSize,
   CpTransitionSlide,
   CpTransitionTabContent,
+  CpTrip,
+  IconAirline,
+  IconCheckList,
+  IconCollapse,
+  IconExpand,
+  IconGroupBy,
+  IconOta,
+  IconSupplier,
+  IconThirdParty,
+  IconTooltip,
 }
 
 export default Pimp

package/src/composables/useDynamicSize.ts

@@ -0,0 +1,60 @@
+import { useWindowSize } from '@vueuse/core'
+import { computed, onMounted, ref } from 'vue'
+
+import type { Sizes } from '@/constants/layout'
+
+import { Breakpoints } from '@/constants/layout'
+
+type SizeValue = Sizes | number
+
+type BreakpointName = 'mobile' | 'tablet' | 'largeTablet' | 'desktop' | 'large'
+
+const NAMED_BREAKPOINTS: Record<BreakpointName, number> = {
+  mobile: Breakpoints.MOBILE,
+  tablet: Breakpoints.TABLET,
+  largeTablet: Breakpoints.LARGE_TABLET,
+  desktop: Breakpoints.DESKTOP,
+  large: Breakpoints.LARGE,
+}
+
+export type DynamicSizeConfig = {
+  default: SizeValue
+} & Partial<Record<number | BreakpointName, SizeValue>>
+
+const resolveThreshold = (key: string): number => {
+  if (key in NAMED_BREAKPOINTS) {
+    return NAMED_BREAKPOINTS[key as BreakpointName]
+  }
+  return Number(key)
+}
+
+const resolveSize = (width: number, config: DynamicSizeConfig): SizeValue => {
+  const { default: defaultValue, ...breakpoints } = config
+
+  let match: SizeValue | undefined
+  let matchThreshold = -1
+
+  for (const [key, value] of Object.entries(breakpoints)) {
+    const threshold = resolveThreshold(key)
+    if (width <= threshold && threshold > matchThreshold) {
+      match = value
+      matchThreshold = threshold
+    }
+  }
+
+  return match ?? defaultValue
+}
+
+export const useDynamicSize = (config: DynamicSizeConfig) => {
+  if (import.meta.env.SSR) return config.default
+
+  const isMounted = ref(false)
+  onMounted(() => (isMounted.value = true))
+
+  const { width: windowWidth } = useWindowSize()
+
+  return computed(() => {
+    if (!isMounted.value) return config.default
+    return resolveSize(windowWidth.value, config)
+  })
+}

package/src/constants/index.ts

@@ -1,10 +1,10 @@
 export type { Colors } from './colors/Colors'
-export { Position } from './Position'
 export type { ToggleColors } from './colors/ToggleColors'
-export { RESERVED_KEYS, VISIBLE_ROWS_MAX } from './CpTableConfig'
 export type { Sizes } from './Sizes'
 
 export { CustomCpIcons } from './CpCustomIcons'
+export { RESERVED_KEYS, VISIBLE_ROWS_MAX } from './CpTableConfig'
 export { Intent } from './Intent'
+export { Position } from './Position'
 
 export const HUMAN_MAX_AGE = 120

package/src/constants/layout/Breakpoints.ts

@@ -0,0 +1,8 @@
+export enum Breakpoints {
+  SMALL_MOBILE = 370,
+  MOBILE = 552,
+  TABLET = 768,
+  LARGE_TABLET = 968,
+  DESKTOP = 1024,
+  LARGE = 1440,
+}

package/src/constants/layout/Sizes.ts

@@ -0,0 +1 @@
+export type Sizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl'

package/src/constants/layout/index.ts

@@ -0,0 +1,3 @@
+export type { Sizes } from './Sizes'
+
+export { Breakpoints } from './Breakpoints'

package/src/directives/ClickOutside.ts

@@ -4,7 +4,7 @@ type ClickOutsideBinding = {
 
 export default {
   beforeMount(el: HTMLElement & { clickOutsideEvent?: (e: MouseEvent) => void }, binding: ClickOutsideBinding) {
-    el.clickOutsideEvent = function (event: MouseEvent) {
+    el.clickOutsideEvent = (event: MouseEvent) => {
       if (!(el === event.target || el.contains(event.target as Node))) {
         binding.value(event, el)
       }

package/src/directives/ResizeSelect.ts

@@ -10,6 +10,6 @@ function resizeSelect(el: HTMLSelectElement) {
   option.textContent = el.value
   select.appendChild(option)
   el.parentNode?.appendChild(select)
-  el.style.width = select.offsetWidth + 'px'
+  el.style.width = `${select.offsetWidth}px`
   select.parentNode?.removeChild(select)
 }

package/src/helpers/functions.ts

@@ -1,4 +1,4 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
+/** biome-ignore-all lint/suspicious/noExplicitAny: generic debounce helper */
 // https://decipher.dev/30-seconds-of-typescript/docs/debounce/
 export function debounce<T extends (...args: any[]) => any>(
   fn: T,

package/src/helpers/index.ts

@@ -17,7 +17,7 @@ export const formatDates = ({
     formattedDates = DateTime.fromISO(dateOne).toFormat(format, { locale })
   }
   if (dateTwo) {
-    formattedDates += ' - ' + DateTime.fromISO(dateTwo).toFormat(format, { locale })
+    formattedDates += ` - ${DateTime.fromISO(dateTwo).toFormat(format, { locale })}`
   }
 
   return formattedDates