@citizenplane/pimp 16.1.0 → 16.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@citizenplane/pimp",
-  "version": "16.1.0",
+  "version": "16.2.0",
   "scripts": {
     "dev": "storybook dev -p 8081",
     "build-storybook": "storybook build --output-dir ./docs",
@@ -11,6 +11,7 @@
     "lint:style:write": "stylelint \"**/*.{css,scss,vue}\" --fix",
     "format": "prettier . --write",
     "test": "jest tests",
+    "types": "vue-tsc --noEmit",
     "commitlint": "commitlint --edit",
     "prepare": "husky"
   },
@@ -48,12 +49,11 @@
     "@commitlint/cli": "20.4.2",
     "@eslint/eslintrc": "^3.3.3",
     "@eslint/js": "^9.39.2",
-    "@storybook/addon-docs": "^9.1.20",
-    "@storybook/addon-onboarding": "^9.1.17",
-    "@storybook/addon-vitest": "^9.0.18",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/addon-onboarding": "^10.3.5",
+    "@storybook/addon-vitest": "^10.3.5",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/vue3": "^9.1.17",
-    "@storybook/vue3-vite": "^9.1.17",
+    "@storybook/vue3-vite": "^10.3.5",
     "@stylistic/eslint-plugin": "^5.7.1",
     "@types/feather-icons": "^4.29.4",
     "@types/vue-tel-input": "^2.1.7",
@@ -71,7 +71,7 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-perfectionist": "^5.4.0",
     "eslint-plugin-prettier": "^5.5.5",
-    "eslint-plugin-storybook": "^9.1.17",
+    "eslint-plugin-storybook": "^10.3.5",
     "eslint-plugin-vue": "^10.7.0",
     "globals": "^17.2.0",
     "husky": "^9.1.7",
@@ -82,11 +82,12 @@
     "prettier": "^3.6.2",
     "sass": "~1.97.3",
     "sass-loader": "^16.0.6",
-    "storybook": "^9.1.17",
+    "storybook": "^10.3.5",
     "ts-jest": "^29.4.6",
     "typescript-eslint": "^8.54.0",
     "vite": "^7.3.1",
-    "vitest": "^4.0.18"
+    "vitest": "^4.0.18",
+    "vue-tsc": "3.2.5"
   },
   "eslintConfig": {
     "extends": [

package/src/components/CpDate.vue

@@ -246,7 +246,9 @@ const selectDynamicClass = computed(() => {
 })
 
 const autocompleteFields = computed(() => {
-  if (!props.autocompleteBirthday) return 'off'
+  if (!props.autocompleteBirthday) {
+    return { day: 'off', month: 'off', year: 'off' }
+  }
 
   return {
     day: 'bday-day',

package/src/components/CpMultiselect.vue

@@ -166,11 +166,8 @@ const selectModel = computed({
   get() {
     return props.modelValue
   },
-  set(value: string | object | string[] | null) {
-    if (typeof value === 'string') {
-      return
-    }
-
+  set(value) {
+    if (typeof value === 'string') return
     emit('update:modelValue', value)
   },
 })

package/src/components/CpTable.vue

@@ -126,6 +126,8 @@
 <script setup lang="ts">
 import { ref, computed, useId, watch } from 'vue'
 
+import type { MenuItemCommandEvent } from 'primevue/menuitem'
+
 import { CpTableColumnObject } from '@/constants/CpTableColumn'
 
 import CpContextualMenu from '@/components/CpContextualMenu.vue'
@@ -154,7 +156,7 @@ interface Pagination {
 }
 
 interface RowOptions {
-  action: (rowData: Record<string, unknown>, $event: MouseEvent) => void
+  action: (rowData: Record<string, unknown>, $event: Event) => void
   icon: string
   id: string
   isAsync?: boolean
@@ -228,7 +230,7 @@ const currentRowData = ref<Record<string, unknown>>({})
 const contextualMenuItems = computed(() => {
   return props.rowOptions.map((option) => ({
     ...option,
-    command: ({ originalEvent }: { originalEvent: MouseEvent }) => option.action(currentRowData.value, originalEvent),
+    command: (event: MenuItemCommandEvent) => option.action(currentRowData.value, event.originalEvent),
   }))
 })
 

package/src/components/CpTelInput.vue

@@ -41,7 +41,9 @@
 </template>
 
 <script setup lang="ts">
-import { useAttrs, ref, useId, computed, nextTick } from 'vue'
+import { computed, nextTick, ref, useAttrs, useId, useTemplateRef } from 'vue'
+
+import type { ComponentPublicInstance } from 'vue'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 
@@ -97,7 +99,13 @@ interface Emits {
 }
 
 const inputModel = defineModel<string>()
-const telInputRef = ref<HTMLInputElement | null>(null)
+
+type VueTelInputInstance = ComponentPublicInstance & {
+  $el: HTMLElement
+  focus: VoidFunction
+}
+
+const telInputRefElement = useTemplateRef<VueTelInputInstance>('telInputRef')
 
 const helpMessageId = useId()
 const errorMessageId = useId()
@@ -139,27 +147,25 @@ const displayErrorMessage = computed(() => props.isInvalid && props.errorMessage
 const displayHelp = computed(() => props.help?.length && !displayErrorMessage.value)
 
 const focusOnInput = async () => {
-  if (!telInputRef.value) return
-  setTimeout(() => telInputRef.value?.focus(), 1)
+  if (!telInputRefElement.value) return
+  setTimeout(() => telInputRefElement.value?.focus(), 1)
 }
 
 const handleDropdownOpen = async () => {
-  if (!telInputRef.value) return
+  if (!telInputRefElement.value) return
+
   await nextTick()
 
-  const searchBox = telInputRef.value?.$el?.querySelector('input.vti__search_box')
+  const searchBox = telInputRefElement.value?.$el?.querySelector('input.vti__search_box')
+
   if (!searchBox) return
 
   setTimeout(() => searchBox.focus(), 1)
 }
 
-const handleCountryChanged = (country: { iso2: string }) => {
-  emit('countryChanged', country?.iso2 || '')
-}
+const handleCountryChanged = (country: { iso2: string }) => emit('countryChanged', country?.iso2 || '')
 
-const handleOnValidate = (phoneObject: PhoneObject) => {
-  emit('validate', phoneObject)
-}
+const handleOnValidate = (phoneObject: PhoneObject) => emit('validate', phoneObject)
 </script>
 
 <style lang="scss">

package/src/components/CpToast.vue

@@ -92,7 +92,7 @@ interface Message {
   summary: string
 }
 
-onMounted(() => ToastEventBus.on('add', handleToastAdded))
+onMounted(() => ToastEventBus.on('add', (payload: unknown) => handleToastAdded(payload as Message)))
 
 const displayTimer = (message: Message) => message.showTimer && message.life !== undefined
 

package/src/components/CpTransitionExpand.vue

@@ -1,47 +1,50 @@
 <template>
-  <transition name="expand" @enter="enter" @after-enter="afterEnter" @leave="leave">
+  <transition name="expand" @after-enter="afterEnter" @enter="enter" @leave="leave">
     <slot />
   </transition>
 </template>
 
 <script setup lang="ts">
-const afterEnter = (element: HTMLElement): void => {
-  element.style.height = `auto`
+const afterEnter = (element: Element) => {
+  const el = element as HTMLElement
+  el.style.height = `auto`
 }
 
-const enter = (element: HTMLElement): void => {
-  const { width } = getComputedStyle(element)
+const enter = (element: Element) => {
+  const el = element as HTMLElement
+  const { width } = getComputedStyle(el)
 
-  element.style.width = width
-  element.style.position = `absolute`
-  element.style.visibility = `hidden`
-  element.style.height = `auto`
+  el.style.width = width
+  el.style.position = `absolute`
+  el.style.visibility = `hidden`
+  el.style.height = `auto`
 
-  const { height } = getComputedStyle(element)
+  const { height } = getComputedStyle(el)
 
-  element.style.width = ''
-  element.style.position = ''
-  element.style.visibility = ''
-  element.style.height = '0'
+  el.style.width = ''
+  el.style.position = ''
+  el.style.visibility = ''
+  el.style.height = '0'
 
   // Force repaint to make sure the
   // animation is triggered correctly.
 
   // @typescript-eslint/no-unused-expressions
-  void getComputedStyle(element).height
+  void getComputedStyle(el).height
 
-  requestAnimationFrame(() => (element.style.height = height))
+  requestAnimationFrame(() => (el.style.height = height))
 }
 
-const leave = (element: HTMLElement): void => {
-  const { height } = getComputedStyle(element)
+const leave = (element: Element): void => {
+  const el = element as HTMLElement
+  const { height } = getComputedStyle(el)
 
-  element.style.height = height
+  el.style.height = height
 
   // Force repaint to make sure the
   // animation is triggered correctly.
   requestAnimationFrame(() => {
-    element.style.height = '0'
+    el.style.height = '0'
   })
 }
 </script>

package/src/libs/CoreDatepicker.vue

@@ -127,6 +127,7 @@
 </template>
 
 <script lang="ts">
+// @ts-nocheck — legacy Options API bundle; excluded from strict type-checking until a typed rewrite.
 import { DateTime, Info } from 'luxon'
 import { useId } from 'vue'
 

package/src/stories/BaseInputLabel.stories.ts

@@ -1,4 +1,4 @@
-import type { Args, Meta, StoryObj } from '@storybook/vue3'
+import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
 
 import BaseInputLabel from '@/components/BaseInputLabel.vue'
 

package/src/stories/Colors.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import { docLabelStyle } from '@/stories/documentationStyles'
 import type { Token } from '@/stories/tokenUtils'

package/src/stories/CpAccordion.stories.ts

@@ -1,6 +1,6 @@
 import { computed } from 'vue'
 
-import type { Args, Meta, StoryObj } from '@storybook/vue3'
+import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
 import type { MenuItem } from 'primevue/menuitem'
 
 import type { CpAccordionBaseProps } from '@/components/CpAccordion.vue'

package/src/stories/CpAccordionGroup.stories.ts

@@ -1,6 +1,6 @@
 import { computed } from 'vue'
 
-import type { Args, Meta, StoryObj } from '@storybook/vue3'
+import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
 import type { MenuItem } from 'primevue/menuitem'
 
 import CpAccordion from '@/components/CpAccordion.vue'

package/src/stories/CpAirlineLogo.stories.ts

@@ -1,4 +1,4 @@
-import type { Args, Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpAirlineLogo from '@/components/CpAirlineLogo.vue'
 
@@ -38,9 +38,12 @@ const meta = {
 } satisfies Meta<typeof CpAirlineLogo>
 
 export default meta
+
 type Story = StoryObj<typeof meta>
 
-const defaultRender = (args: Args) => ({
+type AirlineLogoStoryArgs = NonNullable<Story['args']>
+
+const defaultRender = (args: AirlineLogoStoryArgs) => ({
   components: { CpAirlineLogo },
   setup() {
     return { args }

package/src/stories/CpAlert.stories.ts

@@ -1,4 +1,4 @@
-import type { Args, Meta, StoryObj } from '@storybook/vue3'
+import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpAlert from '@/components/CpAlert.vue'
 

package/src/stories/CpBadge.stories.ts

@@ -1,4 +1,4 @@
-import type { Args, Meta, StoryObj } from '@storybook/vue3'
+import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpBadge from '@/components/CpBadge.vue'
 

package/src/stories/CpButton.stories.ts

@@ -1,4 +1,4 @@
-import type { Args, Meta, StoryObj } from '@storybook/vue3'
+import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpButton from '@/components/CpButton.vue'
 import CpIcon from '@/components/CpIcon.vue'

package/src/stories/CpCheckbox.stories.ts

@@ -1,6 +1,6 @@
 import { ref, computed } from 'vue'
 
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpCheckbox from '@/components/CpCheckbox.vue'
 

package/src/stories/CpContextualMenu.stories.ts

@@ -1,6 +1,6 @@
 import { computed, ref } from 'vue'
 
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpButton from '@/components/CpButton.vue'
 import CpContextualMenu from '@/components/CpContextualMenu.vue'
@@ -29,6 +29,7 @@ const meta = {
 } satisfies Meta<typeof CpContextualMenu>
 
 export default meta
+
 type Story = StoryObj<typeof meta>
 
 /**
@@ -36,6 +37,9 @@ type Story = StoryObj<typeof meta>
  * a separator and a critical "Delete" action.
  */
 export const Default: Story = {
+  args: {
+    items: [],
+  },
   render: () => ({
     components: { CpButton, CpContextualMenu },
     setup() {

package/src/stories/CpDate.stories.ts

@@ -1,6 +1,6 @@
 import { ref } from 'vue'
 
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpDate from '@/components/CpDate.vue'
 

package/src/stories/CpDatepicker.stories.ts

@@ -1,6 +1,6 @@
 import { ref } from 'vue'
 
-import type { Args, Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpDatepicker from '@/components/CpDatepicker.vue'
 
@@ -35,25 +35,29 @@ const meta = {
 } satisfies Meta<typeof CpDatepicker>
 
 export default meta
+
 type Story = StoryObj<typeof meta>
 
-const datepickerRender = (args: Args) => ({
+type DatepickerStoryArgs = NonNullable<Story['args']>
+
+const defaultTemplate = `
+  <div style="height: 35vh; max-width: 600px; padding: 20px;">
+    <CpDatepicker
+      v-bind="args"
+      @dates="(selectedDates) => dates = selectedDates"
+    />
+  </div>
+`
+
+const renderDatepicker = (args: DatepickerStoryArgs) => ({
   components: { CpDatepicker },
   setup() {
-    const dates = ref([])
+    const dates = ref<string[]>([])
     return { args, dates }
   },
-  template: `
-    <div style="height: 35vh; max-width: 600px; padding: 20px;">
-      <CpDatepicker v-bind="args" @dates="(selectedDates) => dates = selectedDates" />
-    </div>
-  `,
+  template: defaultTemplate,
 })
 
-/**
- * Default single-date picker. Use the controls to experiment with each
- * prop in isolation.
- */
 export const Default: Story = {
   args: {
     mode: 'single',
@@ -64,7 +68,7 @@ export const Default: Story = {
     isInline: false,
     singleMonth: false,
   },
-  render: datepickerRender,
+  render: renderDatepicker,
 }
 
 /**
@@ -77,7 +81,7 @@ export const DateRange: Story = {
     label: 'Select Date Range',
     placeholder: 'Choose date range',
   },
-  render: datepickerRender,
+  render: renderDatepicker,
 }
 
 /**
@@ -90,7 +94,7 @@ export const WithError: Story = {
     isError: true,
     errorMessage: 'Please select a valid date',
   },
-  render: datepickerRender,
+  render: renderDatepicker,
 }
 
 /**
@@ -103,7 +107,7 @@ export const WithInitialDates: Story = {
     initDateOne: '2024-03-15',
     label: 'Datepicker with Initial Date',
   },
-  render: datepickerRender,
+  render: renderDatepicker,
 }
 
 /**
@@ -116,7 +120,7 @@ export const SingleMonth: Story = {
     singleMonth: true,
     label: 'Single Month View',
   },
-  render: datepickerRender,
+  render: renderDatepicker,
 }
 
 /**
@@ -129,5 +133,5 @@ export const AllowPastDates: Story = {
     allowPastDates: true,
     label: 'Allow Past Dates',
   },
-  render: datepickerRender,
+  render: renderDatepicker,
 }

package/src/stories/CpDialog.stories.ts

@@ -1,6 +1,6 @@
 import { ref } from 'vue'
 
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpDialog from '@/components/CpDialog.vue'
 

package/src/stories/CpHeading.stories.ts

@@ -1,4 +1,4 @@
-import type { Args, Meta, StoryObj } from '@storybook/vue3'
+import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpHeading from '@/components/CpHeading.vue'
 
@@ -36,6 +36,7 @@ const meta = {
 } satisfies Meta<typeof CpHeading>
 
 export default meta
+
 type Story = StoryObj<typeof meta>
 
 /**

package/src/stories/CpIcon.stories.ts

@@ -1,4 +1,4 @@
-import type { Args, Meta, StoryObj } from '@storybook/vue3'
+import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpIcon from '@/components/CpIcon.vue'
 

package/src/stories/CpInput.stories.ts

@@ -1,12 +1,23 @@
 import { ref } from 'vue'
 
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { ComponentPropsAndSlots, Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpIcon from '@/components/CpIcon.vue'
 import CpInput from '@/components/CpInput.vue'
 
 import { docCellStyle, docLabelStyle, docRowColumnStyle } from '@/stories/documentationStyles'
 
+/** Native attributes forwarded to the inner `<input>` (not declared as Vue props). */
+type CpInputPassthroughAttrs = {
+  autocomplete?: string
+  disabled?: boolean
+  placeholder?: string
+  required?: boolean
+  type?: string
+}
+
+type CpInputStoryArgs = ComponentPropsAndSlots<typeof CpInput> & CpInputPassthroughAttrs
+
 const inputSizes = ['sm', 'md', 'lg'] as const
 const inputTypes = ['text', 'email', 'password', 'number', 'tel', 'url'] as const
 
@@ -59,10 +70,15 @@ const meta = {
       description: 'Autocomplete attribute value',
     },
   },
-} satisfies Meta<typeof CpInput>
+} satisfies Meta<CpInputStoryArgs>
 
 export default meta
-type Story = StoryObj<typeof meta>
+
+// Use explicit args type: `StoryObj<typeof meta>` would re-infer args from `component` only
+// and drop native attributes passed through `$attrs`.
+type Story = StoryObj<CpInputStoryArgs>
+
+type StoryArgs = Partial<CpInputStoryArgs>
 
 /**
  * Default input. Use the controls to experiment with each prop in isolation.
@@ -82,7 +98,7 @@ export const Default: Story = {
     isSearch: false,
     help: '',
   },
-  render: (args) => ({
+  render: (args: StoryArgs) => ({
     components: { CpInput },
     setup() {
       const value = ref('')
@@ -249,7 +265,7 @@ export const Mask: Story = {
  */
 export const WithIcon: Story = {
   args: { ...Default.args },
-  render: (args) => ({
+  render: (args: StoryArgs) => ({
     components: { CpInput, CpIcon },
     setup() {
       const value = ref('')
@@ -276,7 +292,7 @@ export const WithIcon: Story = {
  */
 export const WithUnits: Story = {
   args: { ...Default.args },
-  render: (args) => ({
+  render: (args: StoryArgs) => ({
     components: { CpInput },
     setup() {
       const value = ref('')

package/src/stories/CpItemActions.stories.ts

@@ -1,6 +1,6 @@
 import { ref } from 'vue'
 
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import type { MenuItem } from 'primevue/menuitem'
 
 import CpItemActions from '@/components/CpItemActions.vue'
@@ -25,13 +25,29 @@ type Story = StoryObj<typeof meta>
  * still opening the menu on the trigger button.
  */
 export const Default: Story = {
+  args: {
+    actions: [],
+  },
   render: () => ({
     components: { CpItemActions },
     setup() {
       const actions = ref<MenuItem[]>([
-        { icon: 'edit', label: 'Action 1', command: () => alert('Action 1 clicked') },
-        { icon: 'download', label: 'Action 3', command: () => alert('Action 3 clicked') },
-        { icon: 'trash-2', label: 'Action 2', command: () => alert('Action 2 clicked'), isCritical: true },
+        {
+          icon: 'edit',
+          label: 'Action 1',
+          command: () => alert('Action 1 clicked'),
+        },
+        {
+          icon: 'download',
+          label: 'Action 3',
+          command: () => alert('Action 3 clicked'),
+        },
+        {
+          icon: 'trash-2',
+          label: 'Action 2',
+          command: () => alert('Action 2 clicked'),
+          isCritical: true,
+        },
       ])
 
       const listItems = [1, 2, 3, 4]

package/src/stories/CpLoader.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpLoader from '@/components/CpLoader.vue'
 

package/src/stories/CpMenuItem.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpMenuItem from '@/components/CpMenuItem.vue'
 

package/src/stories/CpMultiselect.stories.ts

@@ -1,6 +1,6 @@
 import { ref, toValue } from 'vue'
 
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpMultiselect from '@/components/CpMultiselect.vue'