@citizenplane/pimp 8.23.0 → 8.25.0

package/src/stories/CpTable.stories.ts

@@ -41,6 +41,14 @@ const meta = {
       control: 'boolean',
       description: 'Whether to show row options menu',
     },
+    rowOptions: {
+      control: 'array',
+      description: 'Array of row options to display',
+    },
+    quickOptionsLimit: {
+      control: 'number',
+      description: 'Maximum number of quick options to display before showing the more button',
+    },
     onRowClick: { action: 'row-clicked' },
     onRowRightClick: { action: 'row-right-clicked' },
     onNextClick: { action: 'next-clicked' },
@@ -79,6 +87,7 @@ export const Default: Story = {
     noResultPlaceholder: 'No results found',
     isLoading: false,
     enableRowOptions: false,
+    quickOptionsLimit: 3,
     pagination: {
       enabled: true,
     },
@@ -175,10 +184,32 @@ export const WithGroupBy: Story = {
   }),
 }
 
-export const WithCustomSlots: Story = {
+export const WithCustomRowOptions: Story = {
   args: {
     ...Default.args,
     enableRowOptions: true,
+    rowOptions: [
+      {
+        label: 'see',
+        icon: 'eye',
+        action: () => console.log('See'),
+      },
+      {
+        label: 'edit',
+        icon: 'edit-2',
+        action: () => console.log('Edit'),
+      },
+      {
+        label: 'disable',
+        icon: 'history',
+        action: () => console.log('History'),
+      },
+      {
+        label: 'delete',
+        icon: 'trash',
+        action: () => console.log('Delete'),
+      },
+    ],
   },
   render: (args) => ({
     components: { CpTable },
@@ -198,27 +229,6 @@ export const WithCustomSlots: Story = {
               {{ cell }}
             </span>
           </template>
-          <template #row-quick-actions="{ row }">
-            <button
-              type="button"
-              @click.stop="() => console.log('See', row)"
-            >
-              <cp-icon type="eye" />
-            </button>
-            <button
-              type="button"
-              @click.stop="() => console.log('Edit', row)"
-              disabled
-            >
-              <cp-icon type="edit-2" />
-            </button>
-            <button
-              type="button"
-              @click.stop="() => console.log('Delete', row)"
-            >
-              <cp-icon type="trash" />
-            </button>
-          </template>
         </CpTable>
     `,
   }),