@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.
254 lines (253 loc) • 7.34 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 { FoldableItem } from "../../utils/FoldableItem";
const createMockItems = (count) => {
return Array.from({ length: count }, (_, i) => {
return new FoldableItem(i, `Property ${i + 1}`, `Value for property ${i + 1}. This is a sample value that demonstrates the content.`, `Tooltip for Property ${i + 1}`, `https://example.com/property/${i + 1}`, undefined, false);
});
};
const meta = {
title: 'Internal/Data Table',
component: 'pid-data-table',
argTypes: {
items: {
description: 'Array of items to display in the table',
control: 'object',
table: {
type: {
summary: 'FoldableItem[]',
},
},
},
itemsPerPage: {
description: 'Number of items to show per page',
control: {
type: 'number',
min: 1,
},
table: {
defaultValue: {
summary: '10',
},
type: {
summary: 'number',
},
},
},
currentPage: {
description: 'Current page (0-based index)',
control: {
type: 'number',
min: 0,
},
table: {
defaultValue: {
summary: '0',
},
type: {
summary: 'number',
},
},
},
pageSizes: {
description: 'Available page sizes',
control: {
type: 'object',
},
table: {
defaultValue: {
summary: '[5, 10, 25, 50, 100]',
},
type: {
summary: 'number[]',
},
},
},
loadSubcomponents: {
description: 'Whether to load subcomponents',
control: {
type: 'boolean',
},
table: {
defaultValue: {
summary: 'false',
},
type: {
summary: 'boolean',
},
},
},
hideSubcomponents: {
description: 'Whether to hide subcomponents',
control: {
type: 'boolean',
},
table: {
defaultValue: {
summary: 'false',
},
type: {
summary: 'boolean',
},
},
},
currentLevelOfSubcomponents: {
description: 'Current level of subcomponents',
control: {
type: 'number',
min: 0,
},
table: {
defaultValue: {
summary: '0',
},
type: {
summary: 'number',
},
},
},
levelOfSubcomponents: {
description: 'Total level of subcomponents',
control: {
type: 'number',
min: 0,
},
table: {
defaultValue: {
summary: '1',
},
type: {
summary: 'number',
},
},
},
settings: {
description: 'Settings to pass to subcomponents',
control: {
type: 'text',
},
table: {
defaultValue: {
summary: '[]',
},
type: {
summary: 'string',
},
},
},
adaptivePagination: {
description: 'Enable adaptive pagination mode',
control: {
type: 'boolean',
},
table: {
defaultValue: {
summary: 'false',
},
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: {
items: createMockItems(25),
itemsPerPage: 10,
currentPage: 0,
pageSizes: [5, 10, 25, 50, 100],
loadSubcomponents: false,
hideSubcomponents: false,
currentLevelOfSubcomponents: 0,
levelOfSubcomponents: 1,
settings: '[]',
adaptivePagination: false,
darkMode: 'system',
},
parameters: {
actions: {
handles: ['pageChange', 'itemsPerPageChange'],
},
},
};
export default meta;
const createDataTableStory = (props) => {
return {
render: () => {
const dataTable = document.createElement('pid-data-table');
Object.entries(props).forEach(([key, value]) => {
if (key === 'items') {
dataTable.items = value;
}
else {
dataTable[key] = value;
}
});
const container = document.createElement('div');
container.className = 'p-4 max-w-3xl';
container.appendChild(dataTable);
return container;
},
};
};
export const Default = createDataTableStory({
items: createMockItems(25),
itemsPerPage: 10,
});
export const SmallPageSize = createDataTableStory({
items: createMockItems(25),
itemsPerPage: 5,
});
export const LargePageSize = createDataTableStory({
items: createMockItems(25),
itemsPerPage: 25,
});
export const WithSubcomponents = createDataTableStory({
items: createMockItems(15),
itemsPerPage: 10,
loadSubcomponents: true,
});
export const AdaptivePagination = createDataTableStory({
items: createMockItems(50),
itemsPerPage: 10,
adaptivePagination: true,
});
export const DarkMode = createDataTableStory({
items: createMockItems(25),
itemsPerPage: 10,
darkMode: 'dark',
});
export const LightMode = createDataTableStory({
items: createMockItems(25),
itemsPerPage: 10,
darkMode: 'light',
});
export const SystemMode = createDataTableStory({
items: createMockItems(25),
itemsPerPage: 10,
darkMode: 'system',
});
//# sourceMappingURL=pid-data-table.stories.js.map