@citizenplane/pimp 13.1.0 → 14.0.0

package/src/stories/CpInput.stories.ts

@@ -6,7 +6,7 @@ import CpIcon from '@/components/CpIcon.vue'
 import CpInput from '@/components/CpInput.vue'
 
 const meta = {
-  title: 'CpInput',
+  title: 'Form/CpInput',
   component: CpInput,
   argTypes: {
     modelValue: {

package/src/stories/CpItemActions.stories.ts

@@ -6,7 +6,7 @@ import type { MenuItem } from 'primevue/menuitem'
 import CpItemActions from '@/components/CpItemActions.vue'
 
 const meta = {
-  title: 'CpItemActions',
+  title: 'Menu/CpItemActions',
   component: CpItemActions,
   argTypes: {
     actions: {

package/src/stories/CpLoader.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpLoader from '@/components/CpLoader.vue'
 
 const meta = {
-  title: 'CpLoader',
+  title: 'Visual/CpLoader',
   component: CpLoader,
   argTypes: {
     size: {

package/src/stories/CpMenuItem.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpMenuItem from '@/components/CpMenuItem.vue'
 
 const meta = {
-  title: 'CpMenuItem',
+  title: 'Menu/CpMenuItem',
   component: CpMenuItem,
   argTypes: {
     label: {

package/src/stories/CpMultiselect.stories.ts

@@ -51,7 +51,7 @@ const airlineOptions: IOption[] = [
 ]
 
 const meta = {
-  title: 'CpMultiSelect',
+  title: 'Form/CpMultiSelect',
   component: CpMultiselect,
   argTypes: {
     label: {

package/src/stories/CpPartnerBadge.stories.ts

@@ -5,7 +5,7 @@ import CpPartnerBadge from '@/components/CpPartnerBadge.vue'
 import { PartnerTypes } from '@/constants'
 
 const meta = {
-  title: 'CpPartnerBadge',
+  title: 'Visual/CpPartnerBadge',
   component: CpPartnerBadge,
   parameters: {
     docs: {

package/src/stories/CpRadio.stories.ts

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpRadio from '@/components/CpRadio.vue'
 
 const meta = {
-  title: 'CpRadio',
+  title: 'Form/CpRadio',
   component: CpRadio,
   argTypes: {
     modelValue: {

package/src/stories/CpSelect.stories.ts

@@ -6,7 +6,7 @@ import CpInput from '@/components/CpInput.vue'
 import CpSelect from '@/components/CpSelect.vue'
 
 const meta = {
-  title: 'CpSelect',
+  title: 'Form/CpSelect',
   component: CpSelect,
   argTypes: {
     modelValue: {

package/src/stories/CpSelectMenu.stories.ts

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpSelectMenu from '@/components/CpSelectMenu.vue'
 
 const meta = {
-  title: 'CpSelectMenu',
+  title: 'Form/CpSelectMenu',
   component: CpSelectMenu,
   argTypes: {
     values: {

package/src/stories/CpSelectableButton.stories.ts

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpSelectableButton from '@/components/CpSelectableButton.vue'
 
 const meta = {
-  title: 'CpSelectableButton',
+  title: 'Form/CpSelectableButton',
   component: CpSelectableButton,
   argTypes: {
     appearance: {

package/src/stories/CpSwitch.stories.ts

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpSwitch from '@/components/CpSwitch.vue'
 
 const meta = {
-  title: 'CpSwitch',
+  title: 'Form/CpSwitch',
   component: CpSwitch,
   argTypes: {
     autofocus: {

package/src/stories/CpTable.stories.ts

@@ -8,7 +8,7 @@ import CpTable from '@/components/CpTable.vue'
 import { PAGINATION_FORMATS } from '@/constants'
 
 const meta = {
-  title: 'CpTable',
+  title: 'Data display/CpTable',
   component: CpTable,
   parameters: {
     backgrounds: {

package/src/stories/CpTableEmptyState.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpTableEmptyState from '@/components/CpTableEmptyState.vue'
 
 const meta = {
-  title: 'CpTableEmptyState',
+  title: 'Data display/CpTableEmptyState',
   component: CpTableEmptyState,
   argTypes: {
     placeholder: {

package/src/stories/CpTabs.stories.ts

@@ -6,7 +6,7 @@ import type { Args, Meta, StoryObj } from '@storybook/vue3'
 import CpTabs from '@/components/CpTabs.vue'
 
 const meta = {
-  title: 'CpTabs',
+  title: 'Navigation/CpTabs',
   component: CpTabs,
   argTypes: {
     defaultActiveIndex: {

package/src/stories/CpTelInput.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpTelInput from '@/components/CpTelInput.vue'
 
 const meta = {
-  title: 'CpTelInput',
+  title: 'Form/CpTelInput',
   component: CpTelInput,
   argTypes: {
     telModel: {

package/src/stories/CpTextarea.stories.ts

@@ -5,7 +5,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpTextarea from '@/components/CpTextarea.vue'
 
 const meta = {
-  title: 'CpTextarea',
+  title: 'Form/CpTextarea',
   component: CpTextarea,
   argTypes: {
     modelValue: {

package/src/stories/CpToast.stories.ts

@@ -8,7 +8,7 @@ import { CpToastTypes } from '@/constants/CpToastTypes'
 import CpToast from '@/components/CpToast.vue'
 
 const meta: Meta<typeof CpToast> = {
-  title: 'CpToast',
+  title: 'Feedback/CpToast',
   component: CpToast,
   argTypes: {
     position: {

package/src/stories/CpTooltip.stories.ts

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 import CpTooltip from '@/components/CpTooltip.vue'
 
 const meta = {
-  title: 'CpTooltip',
+  title: 'Feedback/CpTooltip',
   component: CpTooltip,
   argTypes: {
     content: {

package/src/stories/CpTransitionCounter.stories.ts

@@ -0,0 +1,66 @@
+import { computed, ref } from 'vue'
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import CpButton from '@/components/CpButton.vue'
+import CpIcon from '@/components/CpIcon.vue'
+import CpTransitionCounter from '@/components/CpTransitionCounter.vue'
+
+const meta = {
+  title: 'Transitions/CpTransitionCounter',
+  component: CpTransitionCounter,
+  argTypes: {
+    duration: {
+      control: { type: 'number', min: 0, max: 2000, step: 50 },
+    },
+    counterNumber: { table: { disable: true } },
+  },
+} satisfies Meta<typeof CpTransitionCounter>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const rowStyle = 'padding: 24px; display: inline-flex; align-items: center; justify-content: center; gap: 24px;'
+
+const counterTextStyle = 'font-weight: bold; font-size: 4.5rem; line-height: 1; font-variant-numeric: tabular-nums;'
+
+export const Default: Story = {
+  args: {
+    duration: 150,
+  },
+  render: (args) => ({
+    components: { CpTransitionCounter, CpButton, CpIcon },
+    setup() {
+      const count = ref(1)
+
+      const increment = () => count.value++
+      const decrement = () => {
+        if (count.value <= 0) return
+        count.value--
+      }
+
+      const isDecrementDisabled = computed(() => count.value <= 1)
+
+      return { args, count, increment, decrement, isDecrementDisabled }
+    },
+    template: `
+      <div style="${rowStyle}">
+        <CpButton appearance="tertiary" color="accent" size="lg" :disabled="isDecrementDisabled" @click="decrement">
+          <template #leading-icon>
+            <CpIcon type="minus" />
+          </template>
+        </CpButton>
+        <CpTransitionCounter :counter-number="count" :duration="args.duration">
+          <span style="${counterTextStyle}">
+            {{ count }}
+          </span>
+        </CpTransitionCounter>
+        <CpButton appearance="tertiary" color="accent" size="lg" @click="increment">
+          <template #leading-icon>
+            <CpIcon type="plus" />
+          </template>
+        </CpButton>
+      </div>
+    `,
+  }),
+}

package/src/stories/{TransitionExpand.stories.ts → CpTransitionExpand.stories.ts}

@@ -2,15 +2,15 @@ import { ref } from 'vue'
 
 import type { Meta, StoryObj } from '@storybook/vue3'
 
-import TransitionExpand from '@/components/TransitionExpand.vue'
+import CpTransitionExpand from '@/components/CpTransitionExpand.vue'
 
 const meta = {
-  title: 'TransitionExpand',
-  component: TransitionExpand,
+  title: 'Transitions/CpTransitionExpand',
+  component: CpTransitionExpand,
   argTypes: {
     // No props to document as this is a utility component
   },
-} satisfies Meta<typeof TransitionExpand>
+} satisfies Meta<typeof CpTransitionExpand>
 
 export default meta
 type Story = StoryObj<typeof meta>
@@ -19,7 +19,7 @@ const wrapperStyle = 'display: flex; flex-direction: column; align-items: center
 
 export const Default: Story = {
   render: () => ({
-    components: { TransitionExpand },
+    components: { CpTransitionExpand },
     setup() {
       const isExpanded = ref(false)
       return { isExpanded }
@@ -34,7 +34,7 @@ export const Default: Story = {
           {{ isExpanded ? 'Collapse' : 'Expand' }}
         </CpButton>
 
-        <TransitionExpand>
+        <CpTransitionExpand>
           <div v-if="isExpanded" style="
             background: #F3F4F6;
             border-radius: 6px;
@@ -42,10 +42,10 @@ export const Default: Story = {
             <h3 style="margin: 0 0 8px 0;">Expanded Content</h3>
             <p style="margin: 0;">
               This content will smoothly expand and collapse with a nice animation.
-              The height transition is handled automatically by the TransitionExpand component.
+              The height transition is handled automatically by the CpTransitionExpand component.
             </p>
           </div>
-        </TransitionExpand>
+        </CpTransitionExpand>
       </div>
     `,
   }),
@@ -53,7 +53,7 @@ export const Default: Story = {
 
 export const WithLongContent: Story = {
   render: () => ({
-    components: { TransitionExpand },
+    components: { CpTransitionExpand },
     setup() {
       const isExpanded = ref(false)
       return { isExpanded }
@@ -68,7 +68,7 @@ export const WithLongContent: Story = {
           {{ isExpanded ? 'Collapse' : 'Expand' }}
         </CpButton>
 
-        <TransitionExpand>
+        <CpTransitionExpand>
           <div v-if="isExpanded" style="
             background: #F3F4F6;
             border-radius: 6px;
@@ -80,7 +80,7 @@ export const WithLongContent: Story = {
               nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
             </p>
           </div>
-        </TransitionExpand>
+        </CpTransitionExpand>
       </div>
     `,
   }),

package/src/stories/CpTransitionListItems.stories.ts

@@ -0,0 +1,147 @@
+import { ref } from 'vue'
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+import type { MenuItem } from 'primevue/menuitem'
+
+import CpButton from '@/components/CpButton.vue'
+import CpIcon from '@/components/CpIcon.vue'
+import CpItemActions from '@/components/CpItemActions.vue'
+import CpTransitionListItems from '@/components/CpTransitionListItems.vue'
+
+interface LineItem {
+  id: string
+  label: string
+}
+
+const meta = {
+  title: 'Transitions/CpTransitionListItems',
+  component: CpTransitionListItems,
+  argTypes: {
+    disableOnLoad: {
+      control: 'boolean',
+      description: 'Skips enter transition on first paint',
+    },
+  },
+} satisfies Meta<typeof CpTransitionListItems>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const rowStyle = `
+  display: flex;
+  align-items: center;
+  min-height: 48px;
+  min-width: 100%;
+  padding: 16px;
+  margin-bottom: 12px;
+  border: 1px solid #e5e7eb;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: var(--cp-shadows-sm);
+  `
+
+const fabWrapperStyle = {
+  position: 'fixed',
+  bottom: '50px',
+  right: '50px',
+  zIndex: 2,
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '12px',
+  alignItems: 'flex-end',
+}
+
+export const Default: Story = {
+  args: {
+    disableOnLoad: false,
+  },
+  render: (args) => ({
+    components: { CpTransitionListItems, CpItemActions, CpButton, CpIcon },
+    setup() {
+      let idSeq = 0
+      const nextId = () => {
+        idSeq += 1
+        return `line-${idSeq}`
+      }
+
+      const items = ref<LineItem[]>([
+        { id: nextId(), label: 'Line 1' },
+        { id: nextId(), label: 'Line 2' },
+        { id: nextId(), label: 'Line 3' },
+      ])
+
+      const removeItem = (id: string) => {
+        items.value = items.value.filter((i) => i.id !== id)
+      }
+
+      const addLine = () => {
+        items.value.push({
+          id: nextId(),
+          label: `Line ${items.value.length + 1}`,
+        })
+      }
+
+      const shuffleItems = () => {
+        const arr = [...items.value]
+        for (let i = arr.length - 1; i > 0; i--) {
+          const j = Math.floor(Math.random() * (i + 1))
+          ;[arr[i], arr[j]] = [arr[j], arr[i]]
+        }
+        items.value = arr
+      }
+
+      const deleteActionsFor = (id: string): MenuItem[] => [
+        {
+          icon: 'trash-2',
+          label: 'Delete',
+          isCritical: true,
+          command: () => removeItem(id),
+        },
+      ]
+
+      return { args, items, addLine, shuffleItems, deleteActionsFor, rowStyle, fabWrapperStyle }
+    },
+    template: `
+      <div style="padding: 24px; min-width: 400px; min-height: 280px; padding-bottom: 120px;">
+        <div style="position: relative;">
+          <CpTransitionListItems v-bind="args">
+            <div
+              v-for="item in items"
+              :key="item.id"
+              cp-item-actions-trigger
+              :style="rowStyle"
+            >
+              <span style="font-size: 15px;">{{ item.label }}</span>
+              <CpItemActions :actions="deleteActionsFor(item.id)" style="right: var(--cp-spacing-lg)" />
+            </div>
+          </CpTransitionListItems>
+        </div>
+        <div :style="fabWrapperStyle">
+          <CpButton
+            appearance="secondary"
+            size="lg"
+            is-square
+            aria-label="Shuffle order"
+            @click="shuffleItems"
+          >
+            <template #leading-icon>
+              <CpIcon type="refresh-cw" />
+            </template>
+          </CpButton>
+          <CpButton
+            appearance="primary"
+            color="accent"
+            size="lg"
+            is-square
+            aria-label="Add line"
+            @click="addLine"
+          >
+            <template #leading-icon>
+              <CpIcon type="plus" />
+            </template>
+          </CpButton>
+        </div>
+      </div>
+    `,
+  }),
+}

package/src/stories/CpTransitionSize.stories.ts

@@ -0,0 +1,147 @@
+import { computed, ref } from 'vue'
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import CpButton from '@/components/CpButton.vue'
+import CpTransitionSize from '@/components/CpTransitionSize.vue'
+
+const meta = {
+  title: 'Transitions/CpTransitionSize',
+  component: CpTransitionSize,
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['width', 'height'],
+    },
+  },
+} satisfies Meta<typeof CpTransitionSize>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const wrapperStyle = 'display: flex; flex-direction: column; align-items: center; gap: 12px;'
+
+export const Default: Story = {
+  args: {
+    type: 'width',
+  },
+  render: (args) => ({
+    components: { CpTransitionSize, CpButton },
+    setup() {
+      const isShort = ref(true)
+      const dynamicLabel = computed(() => {
+        return isShort.value ? 'Short label' : 'Much longer label'
+      })
+      return { args, isShort, dynamicLabel }
+    },
+    template: `
+      <div style="${wrapperStyle}">
+        <CpButton
+        appearance="primary"
+        color="accent"
+        @click="isShort = !isShort"
+        >
+          <CpTransitionSize v-bind="args">
+            <span>{{ dynamicLabel }}</span>
+          </CpTransitionSize>
+        </CpButton>
+      </div>
+    `,
+  }),
+}
+
+export const HeightTransition: Story = {
+  args: {
+    type: 'height',
+  },
+  render: (args) => ({
+    components: { CpTransitionSize, CpButton },
+    setup() {
+      const isOpen = ref(false)
+      const currentStep = ref(0)
+      const stepCount = 3
+
+      const dialogTitle = computed(() => `Step ${currentStep.value + 1} of ${stepCount}`)
+
+      /** More steps ⇒ more paragraphs (1-based depth). */
+      const paragraphCount = computed(() => (currentStep.value + 1) * 3)
+
+      const openDialog = () => {
+        currentStep.value = 0
+        isOpen.value = true
+      }
+
+      const closeDialog = () => {
+        isOpen.value = false
+        currentStep.value = 0
+      }
+
+      const paragraphStyle = computed(() => {
+        return { margin: 0, whiteSpace: 'normal' }
+      })
+
+      return {
+        args,
+        isOpen,
+        currentStep,
+        stepCount,
+        dialogTitle,
+        paragraphCount,
+        openDialog,
+        closeDialog,
+        paragraphStyle,
+      }
+    },
+    template: `
+      <div style="${wrapperStyle}">
+        <CpButton appearance="primary" color="accent" @click="openDialog">
+          Open stepped dialog
+        </CpButton>
+        <CpTransitionDialog>
+          <CpDialog
+            v-if="isOpen"
+            :max-width="520"
+            :title="dialogTitle"
+            @close="closeDialog"
+          >
+            <CpTransitionSize v-bind="args">
+              <div style="display: flex; flex-direction: column; gap: 8px;">
+                <p v-for="i in paragraphCount" :key="i" :style="paragraphStyle">
+                  Paragraph {{ i }}. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
+                </p>
+              </div>
+            </CpTransitionSize>
+            <template #footer>
+              <div style="display: flex; justify-content: space-between; gap: 8px; width: 100%;">
+                <CpButton
+                  v-if="currentStep > 0"
+                  appearance="secondary"
+                  color="neutral"
+                  @click="currentStep--"
+                >
+                  Back
+                </CpButton>
+                <CpButton
+                  v-if="currentStep < stepCount - 1"
+                  appearance="primary"
+                  color="accent"
+                  @click="currentStep++"
+                >
+                  Next
+                </CpButton>
+                <CpButton
+                  v-if="currentStep === stepCount - 1"
+                  appearance="primary"
+                  color="accent"
+                  @click="closeDialog"
+                >
+                  Done
+                </CpButton>
+              </div>
+            </template>
+          </CpDialog>
+        </CpTransitionDialog>
+      </div>
+    `,
+  }),
+}

package/src/stories/CpTransitionSlide.stories.ts

@@ -0,0 +1,65 @@
+import { ref } from 'vue'
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import CpButton from '@/components/CpButton.vue'
+import CpTransitionSlide from '@/components/CpTransitionSlide.vue'
+
+const meta = {
+  title: 'Transitions/CpTransitionSlide',
+  component: CpTransitionSlide,
+  argTypes: {
+    slideTo: {
+      control: 'select',
+      options: ['top', 'left'],
+    },
+    mode: {
+      control: 'select',
+      options: ['default', 'in-out', 'out-in'],
+    },
+  },
+} satisfies Meta<typeof CpTransitionSlide>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const wrapperStyle = 'display: flex; flex-direction: column; align-items: center; gap: 60px; min-width: 600px;'
+
+const panelStyle =
+  'min-width: 260px; max-width: 320px; padding: 20px; border-radius: 12px; background: #f3f4f6; text-align: center;'
+
+export const Toggle: Story = {
+  name: 'Toggle',
+  args: {
+    slideTo: 'top',
+    mode: 'out-in',
+  },
+  render: (args) => ({
+    components: { CpTransitionSlide, CpButton },
+    setup() {
+      const showFirst = ref(true)
+      return { args, showFirst }
+    },
+    template: `
+      <div style="${wrapperStyle}">
+        <CpButton appearance="primary" color="accent" @click="showFirst = !showFirst">
+          <CpTransitionSize size="md">
+            <span>{{ showFirst ? 'Show second view' : 'Show first view' }}</span>
+          </CpTransitionSize>
+        </CpButton>
+        <CpTransitionSlide v-bind="args">
+          <div :key="showFirst ? 'a' : 'b'" style="${panelStyle}">
+            <template v-if="showFirst">
+              <strong>View A</strong>
+              <p style="margin: 8px 0 0; font-size: 14px;">Vertical slide (top).</p>
+            </template>
+            <template v-else>
+              <strong>View B</strong>
+              <p style="margin: 8px 0 0; font-size: 14px;">Vertical slide (top).</p>
+            </template>
+          </div>
+        </CpTransitionSlide>
+      </div>
+    `,
+  }),
+}