bramw_baserow/web-frontend/stories/Paginator.stories.mdx

import { Meta, Story, Props, Canvas } from '@storybook/addon-docs/blocks'
import { config, withDesign } from 'storybook-addon-designs'
import { action } from '@storybook/addon-actions'
import { useArgs } from '@storybook/client-api'

import Paginator from '@baserow/modules/core/components/Paginator'

<Meta
    title="Baserow/Paginator"
    component={Paginator}
    parameters={{
        backgrounds: {
            default: 'white',
            values: [
                { name: 'white', value: '#ffffff' },
                { name: 'light', value: '#eeeeee' },
                { name: 'dark', value: '#222222' },
            ],
        },
    }}
    decorators={[
        withDesign,
        (story, context) => {
            const [_, updateArgs] = useArgs()
            return story({ ...context, updateArgs })
        },
    ]}
    argTypes={{
        page: {
            control: {
                type: 'number',
            },
            defaultValue: 3,
        },
        totalPages: {
            control: {
                type: 'number',
            },
            defaultValue: 10,
        },
    }}
/>

# Paginator

Shows pagination buttons and the current page. Emits a `change-page` event when the
user attempts to change the page. If this event is successfully completed it is up
the parent component to update the provided page prop to show the new current page.

export const Template = (args, { argTypes, updateArgs }) => ({
    components: { Paginator },
    props: Object.keys(argTypes),
    template: `<Paginator @change-page="changePage" v-bind="$props"></Paginator>`,
    methods: {
        action,
        changePage(currentPage) {
            const page = currentPage
            updateArgs({ ...args, page })
            action('changePage')(currentPage)
        },
    },
})

export const designConfig = {
    type: 'figma',
    url: 'https://www.figma.com/file/W7R2rQW7ohsZMeHRfEcPFW/Design-Library?node-id=1204%3A4132&mode=dev',
}

<Canvas>
    <Story
        name="Default"
        parameters={{
            design: config(designConfig),
        }}
    >
        {Template.bind({})}
    </Story>
</Canvas>

## Example

```javascript
<Paginator :total-pages="12" :page="5"></Paginator>
```

## Props

<Props of={Paginator} />