@kit-data-manager/pid-component
Version:
The PID-Component is a web component that can be used to evaluate and display FAIR Digital Objects, PIDs, ORCiDs, and possibly other identifiers in a user-friendly way. It is easily extensible to support other identifier types.
291 lines (290 loc) • 8.01 kB
JavaScript
/*!
*
* Copyright 2024 Karlsruhe Institute of Technology.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/
import { html } from "lit";
const meta = {
title: 'Internal/Pagination',
component: 'pid-pagination',
tags: ['autodocs'],
argTypes: {
currentPage: {
description: 'Current page (0-based index)',
control: { type: 'number' },
table: {
defaultValue: { summary: '0' },
type: { summary: 'number' },
},
},
totalItems: {
description: 'Total number of items',
control: { type: 'number' },
table: {
defaultValue: { summary: '0' },
type: { summary: 'number' },
},
},
itemsPerPage: {
description: 'Number of items per page',
control: { type: 'number' },
table: {
defaultValue: { summary: '10' },
type: { summary: 'number' },
},
},
adaptivePagination: {
description: 'Enable adaptive pagination mode',
control: { type: 'boolean' },
table: {
defaultValue: { summary: 'false' },
type: { summary: 'boolean' },
},
},
pageSizes: {
description: 'Available page sizes',
control: { type: 'object' },
table: {
defaultValue: { summary: '[5, 10, 25, 50, 100]' },
type: { summary: 'number[]' },
},
},
showItemsPerPageControl: {
description: 'Whether to show the items per page control',
control: { type: 'boolean' },
table: {
defaultValue: { summary: 'true' },
type: { summary: 'boolean' },
},
},
darkMode: {
description: 'The dark mode setting for the component',
control: 'select',
options: ['light', 'dark', 'system'],
table: {
type: { summary: 'string' },
defaultValue: { summary: 'system' },
},
},
},
args: {
currentPage: 0,
totalItems: 100,
itemsPerPage: 10,
adaptivePagination: false,
showItemsPerPageControl: true,
darkMode: 'system',
},
};
export default meta;
const PaginationContainer = (args, width = '500px', styles = {}) => {
const containerStyles = Object.assign({ width, border: '1px solid #ccc', padding: '10px' }, styles);
return html `
<div style=${containerStyles}>
<pid-pagination
currentPage=${args.currentPage}
totalItems=${args.totalItems}
itemsPerPage=${args.itemsPerPage}
adaptivePagination=${args.adaptivePagination}
showItemsPerPageControl=${args.showItemsPerPageControl}
@pageChange=${e => console.log('Page changed to', e.detail)}
@itemsPerPageChange=${e => console.log('Items per page changed to', e.detail)}
></pid-pagination>
</div>
`;
};
export const Default = {
args: {
currentPage: 0,
totalItems: 100,
itemsPerPage: 10,
adaptivePagination: false,
},
render: args => PaginationContainer(args),
parameters: {
docs: {
source: {
code: `
<pid-pagination
currentPage="0"
totalItems="100"
itemsPerPage="10"
></pid-pagination>
`,
},
},
},
};
export const WithMoreItemsPerPage = {
args: {
currentPage: 0,
totalItems: 100,
itemsPerPage: 20,
},
render: args => PaginationContainer(args),
parameters: {
docs: {
source: {
code: `
<pid-pagination
currentPage="0"
totalItems="100"
itemsPerPage="20"
></pid-pagination>
`,
},
},
},
};
export const OnSecondPage = {
args: {
currentPage: 1,
totalItems: 100,
itemsPerPage: 10,
},
render: args => PaginationContainer(args),
parameters: {
docs: {
source: {
code: `
<pid-pagination
currentPage="1"
totalItems="100"
itemsPerPage="10"
></pid-pagination>
`,
},
},
},
};
export const WithFewItems = {
args: {
currentPage: 0,
totalItems: 5,
itemsPerPage: 10,
},
render: args => PaginationContainer(args),
parameters: {
docs: {
source: {
code: `
<pid-pagination
currentPage="0"
totalItems="5"
itemsPerPage="10"
></pid-pagination>
`,
},
},
},
};
export const WithAdaptivePagination = {
args: {
currentPage: 0,
totalItems: 100,
itemsPerPage: 10,
adaptivePagination: true,
},
render: args => PaginationContainer(args),
parameters: {
docs: {
source: {
code: `
<pid-pagination
currentPage="0"
totalItems="100"
itemsPerPage="10"
adaptivePagination="true"
></pid-pagination>
`,
},
},
},
};
export const SmallContainer = {
args: {
currentPage: 0,
totalItems: 50,
itemsPerPage: 10,
adaptivePagination: true,
},
render: args => html `
<div style="width: 500px; height: 150px; border: 1px solid #cc0000; padding: 10px; background-color: #ffeeee;" class="rounded-md">
<h3 class="mt-0 mb-2 text-sm font-medium">Small Container (Limited Height)</h3>
<pid-pagination
currentPage="0"
totalItems=${args.totalItems}
itemsPerPage="10"
adaptivePagination=${args.adaptivePagination}
@pageChange=${e => console.log('Page changed to', e.detail)}
></pid-pagination>
</div>
`,
parameters: {
docs: {
source: {
code: `
<div style="width: 500px; height: 150px; border: 1px solid #cc0000; padding: 10px; background-color: #ffeeee;" class="rounded-md">
<h3 class="mt-0 mb-2 text-sm font-medium">Small Container (Limited Height)</h3>
<pid-pagination
currentPage="0"
totalItems="50"
itemsPerPage="10"
adaptivePagination="true"
></pid-pagination>
</div>
`,
},
},
},
};
export const LargeContainer = {
args: {
currentPage: 0,
totalItems: 150,
itemsPerPage: 10,
adaptivePagination: true,
},
render: args => html `
<div style="width: 800px; height: 300px; border: 1px solid #00cc00; padding: 10px; background-color: #eeffee;" class="rounded-md">
<h3 class="mt-0 mb-2 text-sm font-medium">Large Container</h3>
<pid-pagination
currentPage="0"
totalItems=${args.totalItems}
itemsPerPage="10"
adaptivePagination=${args.adaptivePagination}
@pageChange=${e => console.log('Page changed to', e.detail)}
></pid-pagination>
</div>
`,
parameters: {
docs: {
source: {
code: `
<div style="width: 800px; height: 300px; border: 1px solid #00cc00; padding: 10px; background-color: #eeffee;" class="rounded-md">
<h3 class="mt-0 mb-2 text-sm font-medium">Large Container</h3>
<pid-pagination
currentPage="0"
totalItems="150"
itemsPerPage="10"
adaptivePagination="true"
></pid-pagination>
</div>
`,
},
},
},
};
//# sourceMappingURL=pid-pagination.stories.js.map