reactive-bulma 2.8.0 → 2.10.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.js +75 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/types/components/atoms/TabItem/index.d.ts +4 -0
- package/dist/cjs/types/components/atoms/index.d.ts +2 -0
- package/dist/cjs/types/components/molecules/Modal/index.d.ts +4 -0
- package/dist/cjs/types/components/molecules/Tabs/index.d.ts +4 -0
- package/dist/cjs/types/components/molecules/index.d.ts +2 -0
- package/dist/cjs/types/functions/parsers.d.ts +7 -0
- package/dist/cjs/types/interfaces/atomProps.d.ts +8 -0
- package/dist/cjs/types/interfaces/commonProps.d.ts +3 -0
- package/dist/cjs/types/interfaces/moleculeProps.d.ts +22 -2
- package/dist/cjs/types/types/styleTypes.d.ts +1 -0
- package/dist/esm/index.js +72 -2
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/atoms/TabItem/index.d.ts +4 -0
- package/dist/esm/types/components/atoms/index.d.ts +2 -0
- package/dist/esm/types/components/molecules/Modal/index.d.ts +4 -0
- package/dist/esm/types/components/molecules/Tabs/index.d.ts +4 -0
- package/dist/esm/types/components/molecules/index.d.ts +2 -0
- package/dist/esm/types/functions/parsers.d.ts +7 -0
- package/dist/esm/types/interfaces/atomProps.d.ts +8 -0
- package/dist/esm/types/interfaces/commonProps.d.ts +3 -0
- package/dist/esm/types/interfaces/moleculeProps.d.ts +22 -2
- package/dist/esm/types/types/styleTypes.d.ts +1 -0
- package/dist/index.d.ts +47 -1
- package/package.json +31 -31
@@ -17,4 +17,6 @@ export { default as BreadcrumbItem } from './BreadcrumbItem';
|
|
17
17
|
export { default as DropdownTrigger } from './DropdownTrigger';
|
18
18
|
export { default as DropdownItem } from './DropdownItem';
|
19
19
|
export { default as MenuItem } from './MenuItem';
|
20
|
+
export { default as Image } from './Image';
|
20
21
|
export { default as PaginationItem } from './PaginationItem';
|
22
|
+
export { default as TabItem } from './TabItem';
|
@@ -7,3 +7,5 @@ export { default as Message } from './Message';
|
|
7
7
|
export { default as Menu } from './Menu';
|
8
8
|
export { default as MenuList } from './MenuList';
|
9
9
|
export { default as Pagination } from './Pagination';
|
10
|
+
export { default as Modal } from './Modal';
|
11
|
+
export { default as Tabs } from './Tabs';
|
@@ -1,3 +1,4 @@
|
|
1
|
+
import { GenericObjectProps } from '../interfaces/commonProps';
|
1
2
|
import { ParseTestIdProps } from '../interfaces/functionProps';
|
2
3
|
/**
|
3
4
|
* @param { Array<string | null> } _classes `Required`. Array of classNames on `string` (or `null`) values
|
@@ -13,3 +14,9 @@ export declare const parseClasses: (_classes: Array<string | null | undefined>)
|
|
13
14
|
*/
|
14
15
|
export declare const parseTestId: (config: ParseTestIdProps) => string;
|
15
16
|
export declare const parseKey: (max?: number, min?: number) => string;
|
17
|
+
interface CreateObjArrayProps {
|
18
|
+
numberOfItems?: number;
|
19
|
+
externalParser?: (i: number) => GenericObjectProps;
|
20
|
+
}
|
21
|
+
export declare const createObjArray: <ImportedProps>({ numberOfItems, externalParser }?: CreateObjArrayProps) => ImportedProps[] | GenericObjectProps[];
|
22
|
+
export {};
|
@@ -257,3 +257,11 @@ export interface PaginationItemProps extends ElementProps, ClickeableProps {
|
|
257
257
|
/** `Styling` Makes the item the selected one, changing its background to blue */
|
258
258
|
isSelected?: boolean;
|
259
259
|
}
|
260
|
+
export interface TabItemProps extends ComposedElementProps, ClickeableProps {
|
261
|
+
/** `Attribute` `Required` The text will be shown in the `TabItem` */
|
262
|
+
text: string;
|
263
|
+
/** `Attribute` Adds an `Icon` component before the text */
|
264
|
+
icon?: IconProps;
|
265
|
+
/** `Styling` Used for Tabs styling purpose only. Will mark the tab as the one selected among its group */
|
266
|
+
isActive?: boolean;
|
267
|
+
}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import { ClickeableProps, ComposedElementProps, ElementProps } from './commonProps';
|
3
|
-
import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, MenuItemProps, PaginationItemProps } from './atomProps';
|
4
|
-
import { basicColorType, elementAlignType, breadcrumbSeparatorType, columnGapType, reducedSizeType } from '../types/styleTypes';
|
3
|
+
import { BreadcrumbItemProps, ButtonProps, ColumnProps, DeleteProps, DropdownItemProps, MenuItemProps, PaginationItemProps, TabItemProps } from './atomProps';
|
4
|
+
import { basicColorType, elementAlignType, breadcrumbSeparatorType, columnGapType, reducedSizeType, tabsFormatType } from '../types/styleTypes';
|
5
5
|
export interface ButtonGroupProps extends ElementProps {
|
6
6
|
/** `Atribute` `Required` Array of `Button` objects that will be shown */
|
7
7
|
buttonList: ButtonProps[];
|
@@ -109,4 +109,24 @@ export interface PaginationProps extends ComposedElementProps {
|
|
109
109
|
/** `Styling` Will adjust the pages position on screen */
|
110
110
|
alignment?: elementAlignType | null;
|
111
111
|
}
|
112
|
+
export interface ModalProps extends ComposedElementProps {
|
113
|
+
/** `Attribute` Reffers to the component or array of components that will be shown inside the column */
|
114
|
+
children?: string | React.ReactElement | React.ReactElement[] | null;
|
115
|
+
/** `Function` Custom function related to the modal's close button to inject custom code if needed */
|
116
|
+
onCloseClick?: () => void;
|
117
|
+
}
|
118
|
+
export interface TabsProps extends ElementProps {
|
119
|
+
/** `Attribute` `Required` List of tabs that will be shown in order */
|
120
|
+
tabs: TabItemProps[];
|
121
|
+
/** `Styling` Will adjust the tabs position on screen */
|
122
|
+
alignment?: elementAlignType;
|
123
|
+
/** `Styling` Set tab's size on bulma's size tokens */
|
124
|
+
size?: reducedSizeType;
|
125
|
+
/** `Styling` Set tab's size on bulma's size tokens */
|
126
|
+
format?: tabsFormatType;
|
127
|
+
/** `Styling` Will add round tabs borders. Only visible if `format` is set to `is-toggle` */
|
128
|
+
isRounded?: boolean;
|
129
|
+
/** `Styling` The whole container will occupy its parent container width */
|
130
|
+
isFullWidth?: boolean;
|
131
|
+
}
|
112
132
|
export {};
|
@@ -10,3 +10,4 @@ export type iconColorModeType = 'light' | 'dark';
|
|
10
10
|
export type columnGapType = 'is-0' | 'is-1' | 'is-2' | 'is-3' | 'is-4' | 'is-5' | 'is-6' | 'is-7' | 'is-8';
|
11
11
|
export type elementAlignType = 'is-centered' | 'is-right';
|
12
12
|
export type breadcrumbSeparatorType = 'has-arrow-separator' | 'has-bullet-separator' | 'has-dot-separator' | 'has-succeeds-separator';
|
13
|
+
export type tabsFormatType = 'is-boxed' | 'is-toggle';
|