@citizenplane/pimp 9.4.6 → 9.5.0

package/src/stories/CpItemActions.stories.ts

@@ -0,0 +1,70 @@
+import { ref } from 'vue'
+
+import type { Meta, StoryObj } from '@storybook/vue3'
+import type { MenuItem } from 'primevue/menuitem'
+
+import CpItemActions from '@/components/CpItemActions.vue'
+
+const meta = {
+  title: 'CpItemActions',
+  component: CpItemActions,
+  argTypes: {
+    actions: {
+      control: 'object',
+      description: 'The actions to display',
+    },
+  },
+} satisfies Meta<typeof CpItemActions>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { CpItemActions },
+    setup() {
+      const actions: MenuItem[] = ref([
+        {
+          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]
+
+      const listItemStyle = {
+        padding: '16px',
+        border: '1px solid #ccc',
+        borderRadius: '12px',
+        marginBottom: '16px',
+      }
+
+      return { actions, listItemStyle, listItems }
+    },
+    template: `
+      <div style="padding: 20px; display: flex; flex-direction: column; gap: 16px; min-width: 400px;">
+      <ul>
+        <li  v-for="(item, index) in listItems" :key="item" :style="listItemStyle" cp-item-actions-trigger>
+          <p>Item {{ index + 1 }}</p>
+          <CpItemActions
+            size="xs"
+            :actions="actions"
+          />
+        </li>
+      </ul>
+      </div>
+    `,
+  }),
+}