@citizenplane/pimp 16.1.0 → 16.2.1

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'
 

package/src/stories/CpPartnerBadge.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpPartnerBadge from '@/components/CpPartnerBadge.vue'
 
@@ -42,10 +42,13 @@ const meta = {
 } satisfies Meta<typeof CpPartnerBadge>
 
 export default meta
+
 type Story = StoryObj<typeof meta>
 
+type PartnerBadgeStoryArgs = NonNullable<Story['args']>
+
 const defaultTemplate = '<CpPartnerBadge v-bind="args" />'
-const defaultRender = (args) => ({
+const defaultRender = (args: PartnerBadgeStoryArgs) => ({
   components: { CpPartnerBadge },
   setup() {
     return { args }

package/src/stories/CpRadio.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 CpRadio from '@/components/CpRadio.vue'
 

package/src/stories/CpRadioGroup.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 CpRadioGroup from '@/components/CpRadioGroup.vue'
 

package/src/stories/CpSelect.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 CpInput from '@/components/CpInput.vue'
 import CpSelect from '@/components/CpSelect.vue'
@@ -76,6 +76,7 @@ const meta = {
 } satisfies Meta<typeof CpSelect>
 
 export default meta
+
 type Story = StoryObj<typeof meta>
 
 const sampleOptions = [
@@ -124,7 +125,14 @@ export const Default: Story = {
  * All sizes rendered side by side, from `sm` to `lg`.
  */
 export const Sizes: Story = {
-  parameters: { controls: { disable: true } },
+  parameters: {
+    controls: {
+      disable: true,
+    },
+  },
+  args: {
+    ...Default.args,
+  },
   render: () => ({
     components: { CpSelect },
     setup() {
@@ -156,7 +164,14 @@ export const Sizes: Story = {
  * Default, required, disabled and invalid states compared side by side.
  */
 export const States: Story = {
-  parameters: { controls: { disable: true } },
+  parameters: {
+    controls: {
+      disable: true,
+    },
+  },
+  args: {
+    ...Default.args,
+  },
   render: () => ({
     components: { CpSelect },
     setup() {

package/src/stories/CpSelectMenu.stories.ts

@@ -1,9 +1,14 @@
 import { ref } from 'vue'
 
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpSelectMenu from '@/components/CpSelectMenu.vue'
 
+interface SelectValue {
+  label: string
+  value: string
+}
+
 const meta = {
   title: 'Molecules/CpSelectMenu',
   component: CpSelectMenu,
@@ -23,8 +28,21 @@ const meta = {
 } satisfies Meta<typeof CpSelectMenu>
 
 export default meta
+
 type Story = StoryObj<typeof meta>
 
+type SelectMenuStoryArgs = NonNullable<Story['args']>
+
+function pickSelectMenuBindProps(args: SelectMenuStoryArgs) {
+  return {
+    closeOnSelect: args.closeOnSelect,
+    dropdownEmptyViewPlaceholder: args.dropdownEmptyViewPlaceholder,
+    dropdownFilterPlaceholder: args.dropdownFilterPlaceholder,
+    dropdownTitle: args.dropdownTitle,
+    hasFilter: args.hasFilter,
+  }
+}
+
 const sampleOptions = [
   { value: '1', label: 'Apple' },
   { value: '2', label: 'Banana' },
@@ -49,70 +67,71 @@ export const Default: Story = {
     dropdownEmptyViewPlaceholder: 'No option found',
     closeOnSelect: true,
   },
-  render: (args) => ({
+  render: (args: SelectMenuStoryArgs) => ({
     components: { CpSelectMenu },
     setup() {
-      const selectedValue = ref(args.selectedValue)
-      return { args, selectedValue }
+      const selectedValue = ref<SelectValue>({ ...args.selectedValue })
+      const values = ref<SelectValue[]>([...(args.values ?? [])])
+      const menuProps = pickSelectMenuBindProps(args)
+
+      const onUpdateSelectedValue = (data: SelectValue) => {
+        selectedValue.value = data
+      }
+
+      return { menuProps, onUpdateSelectedValue, selectedValue, values }
     },
     template: `
       <div style="max-width: 400px; padding: 20px;">
         <CpSelectMenu
           v-model:selectedValue="selectedValue"
-          v-bind="args"
+          v-bind="menuProps"
+          :values="values"
           @update:selected-value="onUpdateSelectedValue"
         />
       </div>
     `,
-    methods: {
-      onUpdateSelectedValue(data: unknown) {
-        args.selectedValue = data
-      },
-    },
   }),
 }
 
-/**
- * Enable `hasFilter` to render a search input above the list. The
- * `@on-filter-change` event lets the caller filter its own options list.
- */
 export const WithFilter: Story = {
   args: {
     ...Default.args,
     hasFilter: true,
     dropdownTitle: 'Search for a fruit',
   },
-  render: (args) => {
-    const searchQuery = ref('')
-    return {
-      components: { CpSelectMenu },
-      setup() {
-        const selectedValue = ref(args.selectedValue)
-        return { args, selectedValue }
-      },
-      template: `
-        <div style="max-width: 400px; padding: 20px;">
-          <CpSelectMenu
-            v-model:selectedValue="selectedValue"
-            v-bind="args"
-            @on-filter-change="onFilterChange"
-            @update:selected-value="onUpdateSelectedValue"
-          />
-        </div>
-      `,
-      methods: {
-        onFilterChange(data: string) {
-          searchQuery.value = data
-          args.values = sampleOptions.filter((option) =>
-            option.label.toLowerCase().includes(searchQuery.value.toLowerCase()),
-          )
-        },
-        onUpdateSelectedValue(data: unknown) {
-          args.selectedValue = data
-        },
-      },
-    }
-  },
+  render: (args: SelectMenuStoryArgs) => ({
+    components: { CpSelectMenu },
+    setup() {
+      const selectedValue = ref<SelectValue>({ ...args.selectedValue })
+      const values = ref<SelectValue[]>([...(args.values ?? [])])
+      const menuProps = pickSelectMenuBindProps(args)
+      const searchQuery = ref('')
+
+      const onUpdateSelectedValue = (data: SelectValue) => {
+        selectedValue.value = data
+      }
+
+      const onFilterChange = (data: string) => {
+        searchQuery.value = data
+        values.value = sampleOptions.filter((option) =>
+          option.label.toLowerCase().includes(searchQuery.value.toLowerCase()),
+        )
+      }
+
+      return { menuProps, onFilterChange, onUpdateSelectedValue, selectedValue, values }
+    },
+    template: `
+      <div style="max-width: 400px; padding: 20px;">
+        <CpSelectMenu
+          v-model:selectedValue="selectedValue"
+          v-bind="menuProps"
+          :values="values"
+          @on-filter-change="onFilterChange"
+          @update:selected-value="onUpdateSelectedValue"
+        />
+      </div>
+    `,
+  }),
 }
 
 /**

package/src/stories/CpSelectableButton.stories.ts

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

package/src/stories/CpSwitch.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 CpSwitch from '@/components/CpSwitch.vue'
 

package/src/stories/CpTable.stories.ts

@@ -1,7 +1,7 @@
 import { action } from 'storybook/actions'
 import { ref, computed } from 'vue'
 
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpTable from '@/components/CpTable.vue'
 
@@ -22,8 +22,11 @@ const meta = {
 } satisfies Meta<typeof CpTable>
 
 export default meta
+
 type Story = StoryObj<typeof meta>
 
+type TableStoryArgs = NonNullable<Story['args']>
+
 const sampleColumns = ['name', 'age', 'email', 'status']
 
 const sampleData = [
@@ -57,7 +60,7 @@ export const Default: Story = {
     onOnNextClick: action('on-next-click'),
     onOnColumnsChanged: action('on-columns-changed'),
   },
-  render: (args) => ({
+  render: (args: TableStoryArgs) => ({
     components: { CpTable },
     setup() {
       return { args }
@@ -156,7 +159,7 @@ export const WithGroupBy: Story = {
       },
     ],
   },
-  render: (args) => ({
+  render: (args: TableStoryArgs) => ({
     components: { CpTable },
     setup() {
       return { args }
@@ -191,7 +194,7 @@ export const WithCustomRowOptions: Story = {
     enableRowOptions: true,
     enableColumnEdition: true,
   },
-  render: (args) => ({
+  render: (args: TableStoryArgs) => ({
     components: { CpTable },
     setup() {
       const isEditLoading = ref(false)
@@ -209,7 +212,7 @@ export const WithCustomRowOptions: Story = {
           icon: 'edit-2',
           isAsync: true,
           isLoading: isEditLoading.value,
-          action: async (payload) => {
+          action: async (payload: Record<string, unknown>) => {
             isEditLoading.value = true
             console.log('Edit', payload)
             await new Promise((resolve) => setTimeout(resolve, 2000))
@@ -221,7 +224,7 @@ export const WithCustomRowOptions: Story = {
           label: 'Disable',
           icon: 'history',
           isDisabled: true,
-          action: (payload) => console.log('History', payload),
+          action: (payload: Record<string, unknown>) => console.log('History', payload),
         },
         {
           id: 'delete',
@@ -263,7 +266,7 @@ export const WithoutDefaultAction: Story = {
     quickOptionsLimit: 2,
     enableColumnEdition: true,
   },
-  render: (args) => ({
+  render: (args: TableStoryArgs) => ({
     components: { CpTable },
     setup() {
       const isEditLoading = ref(false)
@@ -315,7 +318,7 @@ export const WithOnlyDefaultAction: Story = {
     enableColumnEdition: true,
     quickOptionsLimit: 0,
   },
-  render: (args) => ({
+  render: (args: TableStoryArgs) => ({
     components: { CpTable },
     setup() {
       const isEditLoading = ref(false)
@@ -333,7 +336,7 @@ export const WithOnlyDefaultAction: Story = {
           icon: 'edit-2',
           isAsync: true,
           isLoading: isEditLoading.value,
-          action: async (payload) => {
+          action: async (payload: Record<string, unknown>) => {
             isEditLoading.value = true
             console.log('Edit', payload)
             await new Promise((resolve) => setTimeout(resolve, 2000))
@@ -403,7 +406,7 @@ export const ScrollCue: Story = {
       },
     ],
   },
-  render: (args) => ({
+  render: (args: TableStoryArgs) => ({
     components: { CpTable },
     setup() {
       return { args }
@@ -429,7 +432,7 @@ export const FullWidthRow: Story = {
       { name: 'Jane Smith', age: 25, email: 'jane@example.com', status: 'Inactive' },
     ],
   },
-  render: (args) => ({
+  render: (args: TableStoryArgs) => ({
     components: { CpTable },
     setup() {
       return { args }
@@ -455,7 +458,7 @@ export const SelectedRow: Story = {
       { name: 'Bob Johnson', age: 35, email: 'bob@example.com', status: 'Active' },
     ],
   },
-  render: (args) => ({
+  render: (args: TableStoryArgs) => ({
     components: { CpTable },
     setup() {
       return { args }

package/src/stories/CpTableEmptyState.stories.ts

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

package/src/stories/CpTabs.stories.ts

@@ -1,7 +1,7 @@
 import { action } from 'storybook/actions'
 import { ref } from 'vue'
 
-import type { Args, Meta, StoryObj } from '@storybook/vue3'
+import type { Args, Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpTabs from '@/components/CpTabs.vue'
 

package/src/stories/CpTelInput.stories.ts

@@ -1,4 +1,4 @@
-import type { Args, Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpTelInput from '@/components/CpTelInput.vue'
 
@@ -8,7 +8,7 @@ const meta = {
   title: 'Molecules/CpTelInput',
   component: CpTelInput,
   argTypes: {
-    telModel: {
+    modelValue: {
       control: 'text',
       description: 'The phone number value',
     },
@@ -21,14 +21,17 @@ const meta = {
 } satisfies Meta<typeof CpTelInput>
 
 export default meta
+
 type Story = StoryObj<typeof meta>
 
-const defaultRender = (args: Args) => ({
+type TelInputStoryArgs = NonNullable<Story['args']>
+
+const defaultRender = (args: TelInputStoryArgs) => ({
   components: { CpTelInput },
   setup() {
     return { args }
   },
-  template: '<CpTelInput v-bind="args" />',
+  template: `<CpTelInput v-bind="args" />`,
 })
 
 /**
@@ -36,7 +39,9 @@ const defaultRender = (args: Args) => ({
  * experiment with each prop in isolation.
  */
 export const Default: Story = {
-  args: { telModel: '' },
+  args: {
+    modelValue: '',
+  },
   render: defaultRender,
 }
 
@@ -45,6 +50,8 @@ export const Default: Story = {
  * `fr`, `gb`).
  */
 export const WithDefaultCountry: Story = {
-  args: { defaultCountry: 'us' },
+  args: {
+    defaultCountry: 'us',
+  },
   render: defaultRender,
 }

package/src/stories/CpText.stories.ts

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

package/src/stories/CpTextarea.stories.ts

@@ -1,11 +1,19 @@
 import { ref } from 'vue'
 
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { ComponentPropsAndSlots, Meta, StoryObj } from '@storybook/vue3-vite'
 
 import CpTextarea from '@/components/CpTextarea.vue'
 
 import { docCellStyle, docLabelStyle, docRowColumnStyle } from '@/stories/documentationStyles'
 
+/** Native `<textarea>` attributes not declared as Vue props (see `CpTextarea` template). */
+type CpTextareaPassthroughAttrs = {
+  maxLength?: number
+  rows?: number
+}
+
+type CpTextareaStoryArgs = ComponentPropsAndSlots<typeof CpTextarea> & CpTextareaPassthroughAttrs
+
 const textareaStackStyle = `${docCellStyle} width: 100%; max-width: 360px;`
 
 const meta = {
@@ -49,10 +57,13 @@ const meta = {
       description: 'Maximum number of characters allowed',
     },
   },
-} satisfies Meta<typeof CpTextarea>
+} satisfies Meta<CpTextareaStoryArgs>
 
 export default meta
-type Story = StoryObj<typeof meta>
+
+type Story = StoryObj<CpTextareaStoryArgs>
+
+type TextareaStoryArgs = Partial<CpTextareaStoryArgs>
 
 /**
  * Default textarea. Use the controls to experiment with each prop in isolation.
@@ -63,7 +74,7 @@ export const Default: Story = {
     placeholder: 'Enter your message here',
     rows: 4,
   },
-  render: (args) => ({
+  render: (args: TextareaStoryArgs) => ({
     components: { CpTextarea },
     setup() {
       const value = ref('')

package/src/stories/CpToast.stories.ts

@@ -1,12 +1,28 @@
 import { useToast } from 'primevue/usetoast'
 import { ref } from 'vue'
 
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import { CpToastTypes } from '@/constants/CpToastTypes'
 
 import CpToast from '@/components/CpToast.vue'
 
+type CpToastPosition =
+  | 'bottom-center'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'center'
+  | 'top-center'
+  | 'top-left'
+  | 'top-right'
+
+/** `CpToast` has no `defineProps`; layout props are passed through to PrimeVue `Toast`. */
+type CpToastStoryArgs = {
+  enableHaptics?: boolean
+  group?: string
+  position?: CpToastPosition
+}
+
 const toastPositions = [
   'center',
   'top-left',
@@ -17,7 +33,7 @@ const toastPositions = [
   'bottom-right',
 ] as const
 
-const meta: Meta<typeof CpToast> = {
+const meta = {
   title: 'Molecules/CpToast',
   component: CpToast,
   argTypes: {
@@ -32,11 +48,11 @@ const meta: Meta<typeof CpToast> = {
     group: undefined,
     enableHaptics: false,
   },
-}
+} satisfies Meta<CpToastStoryArgs>
 
 export default meta
 
-type Story = StoryObj<typeof CpToast>
+type Story = StoryObj<CpToastStoryArgs>
 
 /**
  * Trigger toasts of every severity using the `useToast()` composable.
@@ -97,7 +113,7 @@ export const WithTimer: Story = {
           detail: 'This is a cpToast description.',
           life: 2500,
           showTimer: showTimer.value,
-        })
+        } as never)
       }
 
       return { args, notifyWithTimer, showTimer }
@@ -140,7 +156,7 @@ export const WithActions: Story = {
             trailingIcon: 'arrow-right',
             onClick: () => console.log('Secondary action clicked'),
           },
-        })
+        } as never)
       }
 
       return { args, notifyWithActions }

package/src/stories/CpTooltip.stories.ts

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

package/src/stories/CpTransitionCounter.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 CpIcon from '@/components/CpIcon.vue'

package/src/stories/CpTransitionExpand.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 CpTransitionExpand from '@/components/CpTransitionExpand.vue'
 

package/src/stories/CpTransitionListItems.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 CpButton from '@/components/CpButton.vue'

package/src/stories/CpTransitionSize.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 CpTransitionSize from '@/components/CpTransitionSize.vue'

package/src/stories/CpTransitionSlide.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 CpButton from '@/components/CpButton.vue'
 import CpTransitionSlide from '@/components/CpTransitionSlide.vue'

package/src/stories/CpTransitionTabContent.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 CpTabs from '@/components/CpTabs.vue'
 import CpTransitionTabContent from '@/components/CpTransitionTabContent.vue'

package/src/stories/Dimensions.stories.ts

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

package/src/stories/Easings.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import { copyableClass, copyableCopiedClass, readTokens, tokenTableClass, useCopier } from '@/stories/tokenUtils'
 

package/src/stories/FocusRings.stories.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
 
 import { copyableClass, copyableCopiedClass, readTokens, tokenTableClass, useCopier } from '@/stories/tokenUtils'
 

package/src/stories/Shadows.stories.ts

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