@citizenplane/pimp 13.1.0 → 14.0.0

package/src/stories/CpTransitionTabContent.stories.ts

@@ -0,0 +1,78 @@
+import { ref } from 'vue'
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import CpTabs from '@/components/CpTabs.vue'
+import CpTransitionTabContent from '@/components/CpTransitionTabContent.vue'
+
+const meta = {
+  title: 'Transitions/CpTransitionTabContent',
+  component: CpTransitionTabContent,
+  argTypes: {
+    duration: {
+      control: { type: 'number', min: 100, max: 800, step: 50 },
+    },
+    direction: { table: { disable: true } },
+  },
+} satisfies Meta<typeof CpTransitionTabContent>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const tabs = [
+  { title: 'Details', icon: 'info' },
+  { title: 'History', icon: 'clock' },
+  { title: 'Settings', icon: 'settings' },
+]
+
+const tabBodies = [
+  'Overview and metadata for this item.',
+  'Past changes and audit trail appear here.',
+  'Preferences and access rules for this workspace.',
+]
+
+const layoutStyle = 'display: flex; flex-direction: column; gap: 20px; min-width: 600px;'
+
+const panelStyle =
+  'min-height: 120px; padding: 20px; border-radius: 12px; background: #f3f4f6; font-size: 15px; line-height: 1.5;'
+
+export const Default: Story = {
+  args: {
+    duration: 300,
+  },
+  render: (args) => ({
+    components: { CpTabs, CpTransitionTabContent },
+    setup() {
+      const activeTabIndex = ref(0)
+      const transitionDirection = ref<'forward' | 'backward'>('forward')
+
+      const onTabClick = (index: number) => {
+        if (index === activeTabIndex.value) return
+        transitionDirection.value = index > activeTabIndex.value ? 'forward' : 'backward'
+        activeTabIndex.value = index
+      }
+
+      return {
+        args,
+        tabs,
+        tabBodies,
+        activeTabIndex,
+        transitionDirection,
+        onTabClick,
+        layoutStyle,
+        panelStyle,
+      }
+    },
+    template: `
+      <div :style="layoutStyle">
+        <CpTabs :tabs="tabs" @on-tab-click="onTabClick" />
+        <CpTransitionTabContent v-bind="args" :direction="transitionDirection">
+          <div :key="activeTabIndex" :style="panelStyle">
+            <strong>{{ tabs[activeTabIndex].title }}</strong>
+            <p style="margin: 8px 0 0;">{{ tabBodies[activeTabIndex] }}</p>
+          </div>
+        </CpTransitionTabContent>
+      </div>
+    `,
+  }),
+}