@mozaic-ds/vue/src/components/pagination/MPagination.stories.ts

Mozaic-Vue is the Vue.js implementation of ADEO Design system

import type { Meta, StoryObj } from '@storybook/vue3-vite';
import { action } from 'storybook/actions';

import MPagination from './MPagination.vue';

const meta: Meta<typeof MPagination> = {
  title: 'Navigation/Pagination',
  component: MPagination,
  parameters: {
    docs: {
      description: {
        component:
          'Pagination is a navigation component that allows users to browse through large sets of content by dividing it into discrete pages. It typically includes previous and next buttons, numeric page selectors, or dropdowns to jump between pages efficiently. Pagination improves usability and performance in content-heavy applications such as tables, search results, and articles by preventing long scrolls and reducing page load times.',
      },
    },
  },
  args: {
    id: 'paginationId',
    modelValue: 10,
    options: [
      {
        text: 'Page 1 of 99',
        value: 1,
      },
      {
        text: 'Page 2 of 99',
        value: 2,
      },
      {
        text: 'Page 3 of 99',
        value: 3,
      },
      {
        text: 'Page 10 of 99',
        value: 10,
      },
      {
        text: 'Page 99 of 99',
        value: 99,
      },
    ],
    selectLabel: 'Select page',
  },
  render: (args) => ({
    components: { MPagination },
    setup() {
      const handleUpdate = action('update:modelValue');

      return { args, handleUpdate };
    },
    template: `
      <MPagination 
        v-bind="args"
        @update:modelValue="handleUpdate"
      />
    `,
  }),
};
export default meta;
type Story = StoryObj<typeof MPagination>;

export const Default: Story = {};

export const First: Story = {
  args: {
    id: 'firstId',
    modelValue: 1,
  },
};

export const Last: Story = {
  args: {
    id: 'lastId',
    modelValue: 99,
  },
};

export const Compact: Story = {
  args: {
    id: 'compactId',
    compact: true,
  },
};