@citizenplane/pimp 9.7.9 → 9.7.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "9.7.9",
+  "version": "9.7.12",
   "scripts": {
     "dev": "storybook dev -p 8080",
     "build-storybook": "storybook build --output-dir ./docs",

package/src/components/CpMultiselect.vue

@@ -22,7 +22,6 @@
       :suggestions="options"
       :typeahead
       @click="handleClick"
-      @complete="handleSearch"
       @hide="handleOverlayHidden"
       @keydown.enter="toggleDropdown"
       @keydown.esc.stop
@@ -80,12 +79,13 @@
 <script setup lang="ts">
 import { absolutePosition, getOuterWidth } from '@primeuix/utils/dom'
 import AutoComplete from 'primevue/autocomplete'
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 import BaseSelectClearButton from '@/components/BaseSelectClearButton.vue'
 import TransitionExpand from '@/components/TransitionExpand.vue'
 
+import { debounce } from '@/helpers/functions'
 import { isEmpty } from '@/helpers/object'
 
 interface Emits {
@@ -94,7 +94,6 @@ interface Emits {
   (e: 'update:modelValue', value: Record<string, unknown> | Record<string, unknown>[] | string[] | null): void
   (e: 'overlayShown'): void
   (e: 'overlayHidden'): void
-  (e: 'searchChange', value: string | object): void
 }
 
 interface Props {
@@ -145,7 +144,6 @@ const selectModel = computed({
     if (typeof value === 'string') {
       return
     }
-
     emit('update:modelValue', value)
   },
 })
@@ -190,18 +188,20 @@ const displayClearButton = computed(() => {
   return props.isClearable && !isEmpty(selectModel.value)
 })
 
-const handleSearch = (event: { query: string }) => emit('search', event.query)
 const handleClear = () => (selectModel.value = null)
 const handleOverlayShown = () => emit('overlayShown')
 const handleOverlayHidden = () => emit('overlayHidden')
 
 const handleValueChange = (newValue: string | object) => {
   if (typeof newValue !== 'string') return
-
   searchQuery.value = newValue
-  emit('searchChange', newValue)
 }
 
+watch(
+  searchQuery,
+  debounce((newValue) => emit('search', newValue), 500),
+)
+
 const getInputElement = () => {
   if (!multiselect.value) return null
   // @ts-expect-error '$el' does not exist on type instance of AutoComplete
@@ -210,9 +210,7 @@ const getInputElement = () => {
 
 const selectInputContent = () => {
   const inputElement = getInputElement()
-  if (inputElement) {
-    inputElement.select()
-  }
+  if (inputElement) inputElement.select()
 }
 
 const focusAndSelectInput = () => {
@@ -245,9 +243,7 @@ const toggleDropdown = () => {
 
 const handleUpdateModelValue = (value: Record<string, unknown> | string[] | null) => {
   // Autocomplete will set the model value to the query string if not blocked
-  if (!value || typeof value === 'string') {
-    return
-  }
+  if (!value || typeof value === 'string') return
 }
 
 const overrideAlignOverlay = () => {

package/src/components/CpToaster.vue

@@ -17,11 +17,16 @@
           <p v-if="description" class="cpToaster__description">{{ description }}</p>
         </div>
       </div>
-      <button class="cpToaster__close" type="button" @click="closeToaster"><cp-icon type="x" /></button>
+      <button class="cpToaster__close" type="button" @click="closeToaster">
+        <cp-icon type="x" />
+      </button>
       <div v-if="actionLabel" class="cpToaster__footer">
-        <button class="cpToaster__button" type="button" @click="handleActionMethod">
+        <button v-if="actionIsButton" class="cpToaster__button" type="button" @click="handleActionMethod">
           {{ actionLabel }}
         </button>
+        <a v-else class="cpToaster__button" v-bind="actionLinkProperties">
+          {{ actionLabel }}
+        </a>
       </div>
     </div>
   </transition>
@@ -37,7 +42,9 @@ import CpIcon from '@/components/CpIcon.vue'
 import { HeadingLevels, Intent } from '@/constants'
 
 interface Props {
+  actionAs?: 'link' | 'button'
   actionLabel?: string
+  actionLinkProperties?: Record<string, unknown>
   actionMethod?: (vmProperties: Record<string, unknown>) => void
   delayBeforeCloseInMs?: number
   description?: string
@@ -55,6 +62,8 @@ const props = withDefaults(defineProps<Props>(), {
   type: 'info',
   delayBeforeCloseInMs: 5000,
   actionLabel: '',
+  actionLinkProperties: () => ({}),
+  actionAs: 'button',
   actionMethod: () => {},
   isUnique: false,
 })
@@ -78,6 +87,8 @@ const countDownInterval = ref<ReturnType<typeof setInterval>>()
 
 const instance = getCurrentInstance()
 
+const actionIsButton = computed(() => props.actionAs === 'button')
+
 const toasterIcon = computed(() => {
   const intentValues = Object.values(Intent)
   const intent = intentValues.find((intentItem) => intentItem.value === props.type)
@@ -185,8 +196,8 @@ const closeToaster = (): void => {
 }
 
 const removeElement = (el: Element): void => {
-  if (typeof (el as HTMLElement).remove !== 'undefined') {
-    ;(el as HTMLElement).remove()
+  if (typeof el.remove !== 'undefined') {
+    el.remove()
   } else if (el.parentNode) {
     el.parentNode.removeChild(el)
   }

package/src/helpers/functions.ts

@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// https://decipher.dev/30-seconds-of-typescript/docs/debounce/
+export function debounce<T extends (...args: any[]) => any>(
+  fn: T,
+  wait: number = 300,
+): (...args: Parameters<T>) => void {
+  let timeout: ReturnType<typeof setTimeout>
+  return function (this: any, ...args: Parameters<T>) {
+    clearTimeout(timeout)
+    timeout = setTimeout(() => fn.apply(this, args), wait)
+  }
+}

package/src/stories/CpMultiselect.stories.ts

@@ -4,7 +4,14 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 
 import CpMultiselect from '@/components/CpMultiselect.vue'
 
-const supplierOptions = [
+interface IOption {
+  disabled?: boolean
+  iata_code?: string
+  id: number
+  name: string
+}
+
+const supplierOptions: IOption[] = [
   { id: 1, name: 'MGA AIRLINES' },
   { id: 2, name: 'ZENITH - EUROATLANTIC AIRWAYS' },
   { id: 3, name: 'ZENITH - SOUTHERN AIRWAYS EXPRESS MOKULELE AIRLINES AND SURF AIR MOBILITY' },
@@ -18,7 +25,7 @@ const supplierOptions = [
   { id: 11, name: 'UNITRAVEL UTAZÁSI IRODA' },
 ]
 
-const airlineOptions = [
+const airlineOptions: IOption[] = [
   { id: 1, name: 'United Airlines', iata_code: 'UA' },
   { id: 2, name: 'Delta Airlines', iata_code: 'DL' },
   { id: 3, name: 'American Airlines', iata_code: 'AA' },
@@ -123,24 +130,21 @@ export const Single: Story = {
 
       const originalOptions = ref(args.options)
       const dynamicOptions = ref(toValue(originalOptions))
+      const selectedSupplier = ref(null)
 
       const handleSearch = async (query: string) => {
         isLoading.value = true
         searchQuery.value = query
 
-        dynamicOptions.value = originalOptions.value
-
         await new Promise((resolve) => setTimeout(resolve, 500))
 
-        dynamicOptions.value = dynamicOptions.value?.filter((option) => {
-          // @ts-expect-error option is unknown
-          return option.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+        dynamicOptions.value = originalOptions.value?.filter((option) => {
+          return (option as IOption).name.toLowerCase().includes(searchQuery.value.toLowerCase())
         })
 
         isLoading.value = false
       }
 
-      const selectedSupplier = ref(null)
       return { args, selectedSupplier, dynamicOptions, handleSearch, isLoading }
     },
     template: `
@@ -174,24 +178,21 @@ export const Multiple: Story = {
 
       const originalOptions = ref(args.options)
       const dynamicOptions = ref(toValue(originalOptions))
+      const selectedAirlines = ref([])
 
       const handleSearch = async (query: string) => {
         isLoading.value = true
         searchQuery.value = query
 
-        if (!searchQuery.value) return (dynamicOptions.value = originalOptions.value)
-
         await new Promise((resolve) => setTimeout(resolve, 500))
 
-        dynamicOptions.value = dynamicOptions.value?.filter((option) => {
-          // @ts-expect-error option is unknown
-          return option.name.toLowerCase().includes(searchQuery.value.toLowerCase())
+        dynamicOptions.value = originalOptions.value?.filter((option) => {
+          return (option as IOption).name.toLowerCase().includes(searchQuery.value.toLowerCase())
         })
 
         isLoading.value = false
       }
 
-      const selectedAirlines = ref([])
       return { args, selectedAirlines, dynamicOptions, handleSearch, isLoading }
     },
     template: `

package/src/stories/CpToaster.stories.ts

@@ -6,6 +6,15 @@ const meta = {
   title: 'CpToaster',
   component: CpToaster,
   argTypes: {
+    actionAs: {
+      control: 'select',
+      options: ['link', 'button'],
+      description: 'Determines if the action is a link or a button',
+    },
+    actionLinkProperties: {
+      control: 'object',
+      description: 'Properties for the action link when actionAs is "link"',
+    },
     title: {
       control: 'text',
       description: 'The title of the toast',
@@ -37,15 +46,17 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+const defaultArgs = {
+  title: 'Default Toast',
+  description: 'This is a default toast message',
+  type: 'info',
+  delayBeforeCloseInMs: 3000,
+  actionLabel: '',
+  isUnique: false,
+}
+
 export const Default: Story = {
-  args: {
-    title: 'Default Toast',
-    description: 'This is a default toast message',
-    type: 'info',
-    delayBeforeCloseInMs: 3000,
-    actionLabel: '',
-    isUnique: false,
-  },
+  args: defaultArgs,
   render: (args) => ({
     template: `
       <div style="padding: 20px;">
@@ -61,6 +72,7 @@ export const Default: Story = {
 }
 
 export const DifferentTypes: Story = {
+  args: defaultArgs,
   render: () => ({
     template: `
       <div style="padding: 20px; display: flex; flex-direction: column; gap: 16px;">
@@ -103,7 +115,35 @@ export const DifferentTypes: Story = {
   }),
 }
 
-export const WithAction: Story = {
+export const WithActionAsLink: Story = {
+  args: defaultArgs,
+  render: () => ({
+    template: `
+      <div style="padding: 20px;">
+        <cp-button @click="addLinkToaster">Show Toast with Action</cp-button>
+      </div>
+    `,
+    methods: {
+      addLinkToaster() {
+        this.$toaster.success({
+          title: 'This is a success toaster',
+          description: 'Description of a toaster with a link',
+          actionAs: 'link',
+          actionLabel: 'See flight information',
+          actionLinkProperties: {
+            href: 'http://app.citizenplane.com',
+            target: '_blank',
+            rel: 'noopener noreferrer',
+          },
+          isUnique: true,
+        })
+      },
+    },
+  }),
+}
+
+export const WithActionAsButton: Story = {
+  args: defaultArgs,
   render: () => ({
     template: `
       <div style="padding: 20px;">
@@ -117,9 +157,8 @@ export const WithAction: Story = {
           description: 'Description of a toaster with a link',
           actionLabel: 'See flight information',
           isUnique: true,
-          actionMethod: (vm) => {
-            vm.closeToaster()
-            window.open('http://app.citizenplane.com', '_blank')
+          actionMethod: () => {
+            alert('Action button clicked!')
           },
         })
       },
@@ -128,6 +167,7 @@ export const WithAction: Story = {
 }
 
 export const CustomDuration: Story = {
+  args: defaultArgs,
   render: () => ({
     template: `
       <div style="padding: 20px;">