@coreui/react-pro 4.1.4 → 4.2.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/components/Types.d.ts +1 -1
- package/dist/components/accordion/index.d.ts +7 -0
- package/dist/components/alert/index.d.ts +4 -0
- package/dist/components/avatar/index.d.ts +2 -0
- package/dist/components/backdrop/index.d.ts +2 -0
- package/dist/components/badge/index.d.ts +2 -0
- package/dist/components/breadcrumb/index.d.ts +3 -0
- package/dist/components/button/index.d.ts +2 -0
- package/dist/components/button-group/index.d.ts +3 -0
- package/dist/components/calendar/CCalendar.d.ts +113 -0
- package/dist/components/callout/index.d.ts +2 -0
- package/dist/components/card/index.d.ts +12 -0
- package/dist/components/carousel/index.d.ts +4 -0
- package/dist/components/close-button/index.d.ts +2 -0
- package/dist/components/collapse/index.d.ts +2 -0
- package/dist/components/datepicker/CDatePicker.d.ts +13 -0
- package/dist/components/datepicker/index.d.ts +2 -0
- package/dist/components/daterangepicker/CDateRangePicker.d.ts +65 -0
- package/dist/components/daterangepicker/index.d.ts +2 -0
- package/dist/components/dropdown/CDropdown.d.ts +10 -1
- package/dist/components/dropdown/CDropdownToggle.d.ts +4 -0
- package/dist/components/dropdown/index.d.ts +8 -0
- package/dist/components/footer/index.d.ts +2 -0
- package/dist/components/form/CForm.d.ts +2 -2
- package/dist/components/form/CFormCheck.d.ts +2 -1
- package/dist/components/form/CFormControlValidation.d.ts +46 -0
- package/dist/components/form/CFormControlWrapper.d.ts +31 -0
- package/dist/components/form/CFormInput.d.ts +2 -9
- package/dist/components/form/CFormRange.d.ts +7 -1
- package/dist/components/form/CFormSelect.d.ts +3 -10
- package/dist/components/form/CFormTextarea.d.ts +2 -9
- package/dist/components/form/index.d.ts +14 -0
- package/dist/components/grid/index.d.ts +4 -0
- package/dist/components/header/index.d.ts +7 -0
- package/dist/components/image/index.d.ts +2 -0
- package/dist/components/index.d.ts +41 -0
- package/dist/components/link/index.d.ts +2 -0
- package/dist/components/list-group/index.d.ts +3 -0
- package/dist/components/loading-button/index.d.ts +2 -0
- package/dist/components/modal/CModal.d.ts +3 -0
- package/dist/components/modal/index.d.ts +8 -0
- package/dist/components/multi-select/index.d.ts +2 -0
- package/dist/components/nav/index.d.ts +7 -0
- package/dist/components/navbar/index.d.ts +6 -0
- package/dist/components/offcanvas/index.d.ts +5 -0
- package/dist/components/pagination/index.d.ts +4 -0
- package/dist/components/picker/CPicker.d.ts +78 -0
- package/dist/components/placeholder/index.d.ts +2 -0
- package/dist/components/popover/CPopover.d.ts +2 -2
- package/dist/components/popover/index.d.ts +2 -0
- package/dist/components/progress/index.d.ts +3 -0
- package/dist/components/sidebar/index.d.ts +7 -0
- package/dist/components/smart-table/index.d.ts +2 -0
- package/dist/components/spinner/index.d.ts +2 -0
- package/dist/components/table/index.d.ts +9 -0
- package/dist/components/tabs/index.d.ts +3 -0
- package/dist/components/timepicker/CTimePicker.d.ts +45 -0
- package/dist/components/timepicker/CTimePickerRollCol.d.ts +11 -0
- package/dist/components/timepicker/index.d.ts +2 -0
- package/dist/components/toast/index.d.ts +6 -0
- package/dist/components/tooltip/CTooltip.d.ts +2 -2
- package/dist/components/tooltip/index.d.ts +2 -0
- package/dist/index.d.ts +0 -125
- package/dist/index.es.js +3268 -1339
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +3513 -1582
- package/dist/index.js.map +1 -1
- package/dist/utils/calendar.d.ts +23 -0
- package/dist/utils/hooks/useStateWithCallback.d.ts +2 -1
- package/dist/utils/time.d.ts +21 -0
- package/package.json +12 -11
- package/src/components/Types.tsx +2 -2
- package/src/components/accordion/CAccordionButton.tsx +2 -1
- package/src/components/accordion/__tests__/__snapshots__/CAccordionButton.spec.tsx.snap +2 -0
- package/src/components/accordion/__tests__/__snapshots__/CAccordionHeader.spec.tsx.snap +2 -0
- package/src/components/accordion/index.ts +15 -0
- package/src/components/alert/CAlert.tsx +14 -3
- package/src/components/alert/index.ts +5 -0
- package/src/components/avatar/index.ts +3 -0
- package/src/components/backdrop/CBackdrop.tsx +10 -3
- package/src/components/backdrop/index.ts +3 -0
- package/src/components/badge/index.ts +3 -0
- package/src/components/breadcrumb/index.ts +4 -0
- package/src/components/button/index.ts +3 -0
- package/src/components/button-group/index.ts +4 -0
- package/src/components/calendar/CCalendar.tsx +559 -0
- package/src/components/calendar/__tests__/CCalendar.spec.tsx +9 -0
- package/src/components/calendar/__tests__/__snapshots__/CCalendar.spec.tsx.snap +573 -0
- package/src/components/callout/index.ts +3 -0
- package/src/components/card/index.ts +25 -0
- package/src/components/carousel/index.ts +5 -0
- package/src/components/close-button/index.ts +3 -0
- package/src/components/collapse/CCollapse.tsx +1 -0
- package/src/components/collapse/index.ts +3 -0
- package/src/components/datepicker/CDatePicker.tsx +50 -0
- package/src/components/datepicker/__tests__/CDatePicker.spec.tsx +9 -0
- package/src/components/datepicker/__tests__/__snapshots__/CDatePicker.spec.tsx.snap +617 -0
- package/src/components/datepicker/index.ts +3 -0
- package/src/components/daterangepicker/CDateRangePicker.tsx +432 -0
- package/src/components/daterangepicker/__tests__/CDateRangePicker.spec.tsx +9 -0
- package/src/components/daterangepicker/__tests__/__snapshots__/CDateRangePicker.spec.tsx.snap +1201 -0
- package/src/components/daterangepicker/index.ts +3 -0
- package/src/components/dropdown/CDropdown.tsx +19 -24
- package/src/components/dropdown/CDropdownItem.tsx +1 -1
- package/src/components/dropdown/CDropdownMenu.tsx +55 -3
- package/src/components/dropdown/CDropdownToggle.tsx +28 -5
- package/src/components/dropdown/index.ts +17 -0
- package/src/components/footer/index.ts +3 -0
- package/src/components/form/CForm.tsx +2 -2
- package/src/components/form/CFormCheck.tsx +32 -7
- package/src/components/form/CFormControlValidation.tsx +97 -0
- package/src/components/form/CFormControlWrapper.tsx +85 -0
- package/src/components/form/CFormInput.tsx +47 -18
- package/src/components/form/CFormRange.tsx +18 -4
- package/src/components/form/CFormSelect.tsx +60 -32
- package/src/components/form/CFormTextarea.tsx +45 -17
- package/src/components/form/index.ts +29 -0
- package/src/components/grid/index.ts +5 -0
- package/src/components/header/index.ts +8 -0
- package/src/components/image/index.ts +3 -0
- package/src/components/index.ts +41 -0
- package/src/components/link/index.ts +3 -0
- package/src/components/list-group/index.ts +4 -0
- package/src/components/loading-button/index.ts +3 -0
- package/src/components/modal/CModal.tsx +3 -2
- package/src/components/modal/index.ts +9 -0
- package/src/components/multi-select/CMultiSelect.tsx +45 -38
- package/src/components/multi-select/index.ts +3 -0
- package/src/components/nav/CNavGroup.tsx +1 -0
- package/src/components/nav/index.ts +8 -0
- package/src/components/navbar/index.ts +7 -0
- package/src/components/offcanvas/COffcanvas.tsx +1 -0
- package/src/components/offcanvas/index.ts +6 -0
- package/src/components/pagination/index.ts +5 -0
- package/src/components/picker/CPicker.tsx +207 -0
- package/src/components/picker/__tests__/CPicker.spec.tsx +9 -0
- package/src/components/picker/__tests__/__snapshots__/CPicker.spec.tsx.snap +23 -0
- package/src/components/placeholder/index.ts +3 -0
- package/src/components/popover/CPopover.tsx +78 -70
- package/src/components/popover/index.ts +3 -0
- package/src/components/progress/index.ts +4 -0
- package/src/components/sidebar/index.ts +8 -0
- package/src/components/smart-table/index.ts +3 -0
- package/src/components/spinner/index.ts +3 -0
- package/src/components/table/index.ts +19 -0
- package/src/components/tabs/CTabPane.tsx +7 -3
- package/src/components/tabs/index.ts +4 -0
- package/src/components/timepicker/CTimePicker.tsx +313 -0
- package/src/components/timepicker/CTimePickerRollCol.tsx +63 -0
- package/src/components/timepicker/__tests__/CTimePicker.spec.tsx +9 -0
- package/src/components/timepicker/index.ts +3 -0
- package/src/components/toast/CToast.tsx +6 -1
- package/src/components/toast/index.ts +7 -0
- package/src/components/tooltip/CTooltip.tsx +68 -60
- package/src/components/tooltip/index.ts +3 -0
- package/src/index.ts +0 -252
- package/src/utils/calendar.ts +270 -0
- package/src/utils/hooks/useStateWithCallback.ts +6 -3
- package/src/utils/time.ts +84 -0
- package/dist/components/dropdown/CDropdownToggleCustom.d.ts +0 -15
- package/src/components/dropdown/CDropdownToggleCustom.tsx +0 -81
package/README.md
CHANGED
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
|
|
44
44
|
Several quick start options are available:
|
|
45
45
|
|
|
46
|
-
- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.
|
|
46
|
+
- [Download the latest release](https://github.com/coreui/coreui-react/archive/v4.2.0-rc.0.zip)
|
|
47
47
|
- Clone the repo: `git clone https://github.com/coreui/coreui-react.git`
|
|
48
48
|
- Install with [npm](https://www.npmjs.com/): `npm install @coreui/react`
|
|
49
49
|
- Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react`
|
|
@@ -10,5 +10,5 @@ export declare type Shapes = 'rounded' | 'rounded-top' | 'rounded-end' | 'rounde
|
|
|
10
10
|
export declare const shapePropType: PropTypes.Requireable<string>;
|
|
11
11
|
export declare type TextColors = Colors | 'white' | 'muted' | 'high-emphasis' | 'medium-emphasis' | 'disabled' | 'high-emphasis-inverse' | 'medium-emphasis-inverse' | 'disabled-inverse' | string;
|
|
12
12
|
export declare const textColorsPropType: PropTypes.Requireable<string>;
|
|
13
|
-
export declare type Triggers = 'hover' | 'focus' | 'click'
|
|
13
|
+
export declare type Triggers = 'hover' | 'focus' | 'click';
|
|
14
14
|
export declare const triggerPropType: PropTypes.Requireable<Triggers>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { CAccordion } from './CAccordion';
|
|
2
|
+
import { CAccordionBody } from './CAccordionBody';
|
|
3
|
+
import { CAccordionButton } from './CAccordionButton';
|
|
4
|
+
import { CAccordionCollapse } from './CAccordionCollapse';
|
|
5
|
+
import { CAccordionHeader } from './CAccordionHeader';
|
|
6
|
+
import { CAccordionItem } from './CAccordionItem';
|
|
7
|
+
export { CAccordion, CAccordionBody, CAccordionButton, CAccordionCollapse, CAccordionHeader, CAccordionItem, };
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
export interface CCalendarProps {
|
|
3
|
+
/**
|
|
4
|
+
* Default date of the component
|
|
5
|
+
*/
|
|
6
|
+
calendarDate?: Date | string;
|
|
7
|
+
/**
|
|
8
|
+
* A string of all className you want applied to the component.
|
|
9
|
+
*/
|
|
10
|
+
className?: string;
|
|
11
|
+
/**
|
|
12
|
+
* Specify the list of dates that cannot be selected.
|
|
13
|
+
*/
|
|
14
|
+
disabledDates?: Date[] | Date[][];
|
|
15
|
+
/**
|
|
16
|
+
* Initial selected to date (range).
|
|
17
|
+
*/
|
|
18
|
+
endDate?: Date | string | null;
|
|
19
|
+
/**
|
|
20
|
+
* Sets the day of start week.
|
|
21
|
+
* - 0 - Sunday,
|
|
22
|
+
* - 1 - Monday,
|
|
23
|
+
* - 2 - Tuesday,
|
|
24
|
+
* - 3 - Wednesday,
|
|
25
|
+
* - 4 - Thursday,
|
|
26
|
+
* - 5 - Friday,
|
|
27
|
+
* - 6 - Saturday,
|
|
28
|
+
*
|
|
29
|
+
* @default 1
|
|
30
|
+
*/
|
|
31
|
+
firstDayOfWeek?: number;
|
|
32
|
+
/**
|
|
33
|
+
* @ignore
|
|
34
|
+
*/
|
|
35
|
+
hoverDate?: Date | null;
|
|
36
|
+
/**
|
|
37
|
+
* Sets the default locale for components. If not set, it is inherited from the browser.
|
|
38
|
+
*
|
|
39
|
+
* @default 'default'
|
|
40
|
+
*/
|
|
41
|
+
locale?: string;
|
|
42
|
+
/**
|
|
43
|
+
* Max selectable date.
|
|
44
|
+
*/
|
|
45
|
+
maxDate?: Date | string;
|
|
46
|
+
/**
|
|
47
|
+
* Min selectable date.
|
|
48
|
+
*/
|
|
49
|
+
minDate?: Date | string;
|
|
50
|
+
/**
|
|
51
|
+
* Show arrows navigation.
|
|
52
|
+
*/
|
|
53
|
+
navigation?: boolean;
|
|
54
|
+
/**
|
|
55
|
+
* The custom next icon.
|
|
56
|
+
*/
|
|
57
|
+
navNextIcon?: ReactNode;
|
|
58
|
+
/**
|
|
59
|
+
* The custom next double icon.
|
|
60
|
+
*/
|
|
61
|
+
navNextDoubleIcon?: ReactNode;
|
|
62
|
+
/**
|
|
63
|
+
* The custom prev icon.
|
|
64
|
+
*/
|
|
65
|
+
navPrevIcon?: ReactNode;
|
|
66
|
+
/**
|
|
67
|
+
* The custom prev double icon.
|
|
68
|
+
*/
|
|
69
|
+
navPrevDoubleIcon?: ReactNode;
|
|
70
|
+
/**
|
|
71
|
+
* Allow range selection.
|
|
72
|
+
*/
|
|
73
|
+
range?: boolean;
|
|
74
|
+
/**
|
|
75
|
+
* Toggle select mode between start and end date.
|
|
76
|
+
*/
|
|
77
|
+
selectEndDate?: boolean;
|
|
78
|
+
/**
|
|
79
|
+
* Initial selected date.
|
|
80
|
+
*/
|
|
81
|
+
startDate?: Date | string | null;
|
|
82
|
+
/**
|
|
83
|
+
* Set length or format of day name.
|
|
84
|
+
*
|
|
85
|
+
* @default 2
|
|
86
|
+
*/
|
|
87
|
+
weekdayFormat?: number | 'long' | 'narrow' | 'short';
|
|
88
|
+
/**
|
|
89
|
+
* Callback fired when the user hovers over the calendar cell.
|
|
90
|
+
*/
|
|
91
|
+
onCalendarCellHover?: (date: Date | null) => void;
|
|
92
|
+
/**
|
|
93
|
+
* Callback fired when the calendar date changed.
|
|
94
|
+
*/
|
|
95
|
+
onCalendarDateChange?: (date: Date) => void;
|
|
96
|
+
/**
|
|
97
|
+
* Callback fired when the start date changed.
|
|
98
|
+
*/
|
|
99
|
+
onStartDateChange?: (date: Date | null) => void;
|
|
100
|
+
/**
|
|
101
|
+
* Callback fired when the end date changed.
|
|
102
|
+
*/
|
|
103
|
+
onEndDateChange?: (date: Date | null) => void;
|
|
104
|
+
/**
|
|
105
|
+
* Callback fired when the selection type changed.
|
|
106
|
+
*/
|
|
107
|
+
onSelectEndChange?: (value: boolean) => void;
|
|
108
|
+
/**
|
|
109
|
+
* Callback fired when the view type of calendar changed.
|
|
110
|
+
*/
|
|
111
|
+
onViewChanged?: (view: string) => void;
|
|
112
|
+
}
|
|
113
|
+
export declare const CCalendar: React.ForwardRefExoticComponent<CCalendarProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { CCard } from './CCard';
|
|
2
|
+
import { CCardBody } from './CCardBody';
|
|
3
|
+
import { CCardFooter } from './CCardFooter';
|
|
4
|
+
import { CCardGroup } from './CCardGroup';
|
|
5
|
+
import { CCardHeader } from './CCardHeader';
|
|
6
|
+
import { CCardImage } from './CCardImage';
|
|
7
|
+
import { CCardImageOverlay } from './CCardImageOverlay';
|
|
8
|
+
import { CCardLink } from './CCardLink';
|
|
9
|
+
import { CCardSubtitle } from './CCardSubtitle';
|
|
10
|
+
import { CCardText } from './CCardText';
|
|
11
|
+
import { CCardTitle } from './CCardTitle';
|
|
12
|
+
export { CCard, CCardBody, CCardFooter, CCardGroup, CCardHeader, CCardImage, CCardImageOverlay, CCardLink, CCardSubtitle, CCardText, CCardTitle, };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { CDateRangePickerProps } from '../daterangepicker/CDateRangePicker';
|
|
3
|
+
export interface CDatePickerProps extends Omit<CDateRangePickerProps, 'calendars' | 'endDate' | 'range' | 'onEndDateChange' | 'onStartDateChange' | 'ranges' | 'selectEndDate' | 'startDate'> {
|
|
4
|
+
/**
|
|
5
|
+
* Initial selected date.
|
|
6
|
+
*/
|
|
7
|
+
date?: Date | string | null;
|
|
8
|
+
/**
|
|
9
|
+
* Callback fired when the date changed.
|
|
10
|
+
*/
|
|
11
|
+
onDateChange?: (date: Date | null) => void;
|
|
12
|
+
}
|
|
13
|
+
export declare const CDatePicker: React.ForwardRefExoticComponent<CDatePickerProps & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
|
+
import { CCalendarProps } from '../calendar/CCalendar';
|
|
3
|
+
import { CPickerProps } from '../picker/CPicker';
|
|
4
|
+
import { Colors } from '../Types';
|
|
5
|
+
export interface CDateRangePickerProps extends Omit<CPickerProps, 'autoClose' | 'component' | 'dark' | 'placeholder' | 'variant'>, Omit<CCalendarProps, 'onCalendarCellHover' | 'onCalendarDateChange'> {
|
|
6
|
+
/**
|
|
7
|
+
* The number of calendars that render on desktop devices.
|
|
8
|
+
*/
|
|
9
|
+
calendars?: number;
|
|
10
|
+
/**
|
|
11
|
+
* A string of all className you want applied to the component.
|
|
12
|
+
*/
|
|
13
|
+
className?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Toggle visibility or set the content of the cleaner button.
|
|
16
|
+
*/
|
|
17
|
+
cleaner?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Toggle visibility or set the content of the input indicator.
|
|
20
|
+
*/
|
|
21
|
+
indicator?: ReactNode | boolean;
|
|
22
|
+
/**
|
|
23
|
+
* Toggle the readonly state for the component.
|
|
24
|
+
*/
|
|
25
|
+
inputReadOnly?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Specifies short hints that are visible in start date and end date inputs.
|
|
28
|
+
*/
|
|
29
|
+
placeholder?: string | string[];
|
|
30
|
+
/**
|
|
31
|
+
* @ignore
|
|
32
|
+
*/
|
|
33
|
+
range?: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* Predefined date ranges the user can select from.
|
|
36
|
+
*/
|
|
37
|
+
ranges?: object;
|
|
38
|
+
/**
|
|
39
|
+
* Sets the color context of the cancel button to one of CoreUI’s themed colors.
|
|
40
|
+
*
|
|
41
|
+
* @type 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'dark' | 'light' | string
|
|
42
|
+
*/
|
|
43
|
+
rangesButtonsColor?: Colors;
|
|
44
|
+
/**
|
|
45
|
+
* Size the ranges button small or large.
|
|
46
|
+
*/
|
|
47
|
+
rangesButtonsSize?: 'sm' | 'lg';
|
|
48
|
+
/**
|
|
49
|
+
* Set the ranges button variant to an outlined button or a ghost button.
|
|
50
|
+
*/
|
|
51
|
+
rangesButtonsVariant?: 'outline' | 'ghost';
|
|
52
|
+
/**
|
|
53
|
+
* Default icon or character character that separates two dates.
|
|
54
|
+
*/
|
|
55
|
+
separator?: ReactNode | boolean;
|
|
56
|
+
/**
|
|
57
|
+
* Size the component small or large.
|
|
58
|
+
*/
|
|
59
|
+
size?: 'sm' | 'lg';
|
|
60
|
+
/**
|
|
61
|
+
* Provide an additional time selection by adding select boxes to choose times.
|
|
62
|
+
*/
|
|
63
|
+
timepicker?: boolean;
|
|
64
|
+
}
|
|
65
|
+
export declare const CDateRangePicker: React.ForwardRefExoticComponent<CDateRangePickerProps & React.RefAttributes<HTMLDivElement | HTMLLIElement>>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { ElementType, HTMLAttributes } from 'react';
|
|
1
|
+
import React, { ElementType, HTMLAttributes, RefObject } from 'react';
|
|
2
2
|
import { Placements } from '../Types';
|
|
3
3
|
export declare type Directions = 'start' | 'end';
|
|
4
4
|
export declare type Breakpoints = {
|
|
@@ -22,6 +22,14 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
|
|
|
22
22
|
* @type 'start' | 'end' | { xs: 'start' | 'end' } | { sm: 'start' | 'end' } | { md: 'start' | 'end' } | { lg: 'start' | 'end' } | { xl: 'start' | 'end'} | { xxl: 'start' | 'end'}
|
|
23
23
|
*/
|
|
24
24
|
alignment?: Alignments;
|
|
25
|
+
/**
|
|
26
|
+
* Configure the auto close behavior of the dropdown:
|
|
27
|
+
* - `true` - the dropdown will be closed by clicking outside or inside the dropdown menu.
|
|
28
|
+
* - `false` - the dropdown will be closed by clicking the toggle button and manually calling hide or toggle method. (Also will not be closed by pressing esc key)
|
|
29
|
+
* - `'inside'` - the dropdown will be closed (only) by clicking inside the dropdown menu.
|
|
30
|
+
* - `'outside'` - the dropdown will be closed (only) by clicking outside the dropdown menu.
|
|
31
|
+
*/
|
|
32
|
+
autoClose?: 'inside' | 'outside' | boolean;
|
|
25
33
|
/**
|
|
26
34
|
* A string of all className you want applied to the base component.
|
|
27
35
|
*/
|
|
@@ -68,6 +76,7 @@ export interface CDropdownProps extends HTMLAttributes<HTMLDivElement | HTMLLIEl
|
|
|
68
76
|
visible?: boolean;
|
|
69
77
|
}
|
|
70
78
|
interface ContextProps extends CDropdownProps {
|
|
79
|
+
dropdownToggleRef: RefObject<any> | undefined;
|
|
71
80
|
setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>;
|
|
72
81
|
}
|
|
73
82
|
export declare const CDropdownContext: React.Context<ContextProps>;
|
|
@@ -6,6 +6,10 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
|
|
|
6
6
|
* Enables pseudo element caret on toggler.
|
|
7
7
|
*/
|
|
8
8
|
caret?: boolean;
|
|
9
|
+
/**
|
|
10
|
+
* Create a custom toggler which accepts any content.
|
|
11
|
+
*/
|
|
12
|
+
custom?: boolean;
|
|
9
13
|
/**
|
|
10
14
|
* Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` className for proper spacing around the dropdown caret.
|
|
11
15
|
*/
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { CDropdown } from './CDropdown';
|
|
2
|
+
import { CDropdownDivider } from './CDropdownDivider';
|
|
3
|
+
import { CDropdownHeader } from './CDropdownHeader';
|
|
4
|
+
import { CDropdownItem } from './CDropdownItem';
|
|
5
|
+
import { CDropdownItemPlain } from './CDropdownItemPlain';
|
|
6
|
+
import { CDropdownMenu } from './CDropdownMenu';
|
|
7
|
+
import { CDropdownToggle } from './CDropdownToggle';
|
|
8
|
+
export { CDropdown, CDropdownDivider, CDropdownHeader, CDropdownItem, CDropdownItemPlain, CDropdownMenu, CDropdownToggle, };
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
export interface CFormProps extends
|
|
1
|
+
import React, { FormHTMLAttributes } from 'react';
|
|
2
|
+
export interface CFormProps extends FormHTMLAttributes<HTMLFormElement> {
|
|
3
3
|
/**
|
|
4
4
|
* A string of all className you want applied to the component.
|
|
5
5
|
*/
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { InputHTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
import { Colors, Shapes } from '../Types';
|
|
3
|
+
import { CFormControlValidationProps } from './CFormControlValidation';
|
|
3
4
|
export declare type ButtonObject = {
|
|
4
5
|
/**
|
|
5
6
|
* Sets the color context of the component to one of CoreUI’s themed colors.
|
|
@@ -22,7 +23,7 @@ export declare type ButtonObject = {
|
|
|
22
23
|
*/
|
|
23
24
|
variant?: 'outline' | 'ghost';
|
|
24
25
|
};
|
|
25
|
-
export interface CFormCheckProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
26
|
+
export interface CFormCheckProps extends CFormControlValidationProps, InputHTMLAttributes<HTMLInputElement> {
|
|
26
27
|
/**
|
|
27
28
|
* Create button-like checkboxes and radio buttons.
|
|
28
29
|
*/
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
export interface CFormControlValidationProps {
|
|
3
|
+
/**
|
|
4
|
+
* @ignore
|
|
5
|
+
*/
|
|
6
|
+
describedby?: string;
|
|
7
|
+
/**
|
|
8
|
+
* Provide valuable, actionable feedback.
|
|
9
|
+
*
|
|
10
|
+
* @since 4.2.0
|
|
11
|
+
*/
|
|
12
|
+
feedback?: ReactNode | string;
|
|
13
|
+
/**
|
|
14
|
+
* Provide valuable, actionable feedback.
|
|
15
|
+
*
|
|
16
|
+
* @since 4.2.0
|
|
17
|
+
*/
|
|
18
|
+
feedbackInvalid?: ReactNode | string;
|
|
19
|
+
/**
|
|
20
|
+
* Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
|
|
21
|
+
*
|
|
22
|
+
* @since 4.2.0
|
|
23
|
+
*/
|
|
24
|
+
feedbackValid?: ReactNode | string;
|
|
25
|
+
/**
|
|
26
|
+
* Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
|
|
27
|
+
*
|
|
28
|
+
* @since 4.2.0
|
|
29
|
+
*/
|
|
30
|
+
floatingLabel?: ReactNode | string;
|
|
31
|
+
/**
|
|
32
|
+
* Set component validation state to invalid.
|
|
33
|
+
*/
|
|
34
|
+
invalid?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Display validation feedback in a styled tooltip.
|
|
37
|
+
*
|
|
38
|
+
* @since 4.2.0
|
|
39
|
+
*/
|
|
40
|
+
tooltipFeedback?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* Set component validation state to valid.
|
|
43
|
+
*/
|
|
44
|
+
valid?: boolean;
|
|
45
|
+
}
|
|
46
|
+
export declare const CFormControlValidation: FC<CFormControlValidationProps>;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { FC, ReactNode } from 'react';
|
|
2
|
+
import { CFormControlValidationProps } from './CFormControlValidation';
|
|
3
|
+
export interface CFormControlWrapperProps extends CFormControlValidationProps {
|
|
4
|
+
/**
|
|
5
|
+
* @ignore
|
|
6
|
+
*/
|
|
7
|
+
children?: ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Provide valuable, actionable valid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.
|
|
10
|
+
*
|
|
11
|
+
* @since 4.2.0
|
|
12
|
+
*/
|
|
13
|
+
floatingLabel?: ReactNode | string;
|
|
14
|
+
/**
|
|
15
|
+
* @ignore
|
|
16
|
+
*/
|
|
17
|
+
id?: string;
|
|
18
|
+
/**
|
|
19
|
+
* Add a caption for a component.
|
|
20
|
+
*
|
|
21
|
+
* @since 4.2.0
|
|
22
|
+
*/
|
|
23
|
+
label?: ReactNode | string;
|
|
24
|
+
/**
|
|
25
|
+
* Add helper text to the component.
|
|
26
|
+
*
|
|
27
|
+
* @since 4.2.0
|
|
28
|
+
*/
|
|
29
|
+
text?: ReactNode | string;
|
|
30
|
+
}
|
|
31
|
+
export declare const CFormControlWrapper: FC<CFormControlWrapperProps>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { ChangeEventHandler, InputHTMLAttributes } from 'react';
|
|
2
|
-
|
|
2
|
+
import { CFormControlWrapperProps } from './CFormControlWrapper';
|
|
3
|
+
export interface CFormInputProps extends CFormControlWrapperProps, Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
|
|
3
4
|
/**
|
|
4
5
|
* A string of all className you want applied to the component.
|
|
5
6
|
*/
|
|
@@ -8,10 +9,6 @@ export interface CFormInputProps extends Omit<InputHTMLAttributes<HTMLInputEleme
|
|
|
8
9
|
* Toggle the disabled state for the component.
|
|
9
10
|
*/
|
|
10
11
|
disabled?: boolean;
|
|
11
|
-
/**
|
|
12
|
-
* Set component validation state to invalid.
|
|
13
|
-
*/
|
|
14
|
-
invalid?: boolean;
|
|
15
12
|
/**
|
|
16
13
|
* Method called immediately after the `value` prop changes.
|
|
17
14
|
*/
|
|
@@ -32,10 +29,6 @@ export interface CFormInputProps extends Omit<InputHTMLAttributes<HTMLInputEleme
|
|
|
32
29
|
* Specifies the type of component.
|
|
33
30
|
*/
|
|
34
31
|
type?: 'color' | 'file' | 'text' | string;
|
|
35
|
-
/**
|
|
36
|
-
* Set component validation state to valid.
|
|
37
|
-
*/
|
|
38
|
-
valid?: boolean;
|
|
39
32
|
/**
|
|
40
33
|
* The `value` attribute of component.
|
|
41
34
|
*
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { ChangeEventHandler, InputHTMLAttributes } from 'react';
|
|
1
|
+
import React, { ChangeEventHandler, InputHTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
export interface CFormRangeProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
3
3
|
/**
|
|
4
4
|
* A string of all className you want applied to the component.
|
|
@@ -8,6 +8,12 @@ export interface CFormRangeProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
|
8
8
|
* Toggle the disabled state for the component.
|
|
9
9
|
*/
|
|
10
10
|
disabled?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Add a caption for a component.
|
|
13
|
+
*
|
|
14
|
+
* @since 4.2.0
|
|
15
|
+
*/
|
|
16
|
+
label?: ReactNode | string;
|
|
11
17
|
/**
|
|
12
18
|
* Specifies the maximum value for the component.
|
|
13
19
|
*/
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import React, { ChangeEventHandler, InputHTMLAttributes } from 'react';
|
|
2
|
+
import { CFormControlWrapperProps } from './CFormControlWrapper';
|
|
2
3
|
declare type Option = {
|
|
3
4
|
disabled?: boolean;
|
|
4
5
|
label?: string;
|
|
5
6
|
value?: string;
|
|
6
7
|
};
|
|
7
|
-
export interface CFormSelectProps extends Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'> {
|
|
8
|
+
export interface CFormSelectProps extends CFormControlWrapperProps, Omit<InputHTMLAttributes<HTMLSelectElement>, 'size'> {
|
|
8
9
|
/**
|
|
9
10
|
* A string of all className you want applied to the component.
|
|
10
11
|
*/
|
|
@@ -13,10 +14,6 @@ export interface CFormSelectProps extends Omit<InputHTMLAttributes<HTMLSelectEle
|
|
|
13
14
|
* Specifies the number of visible options in a drop-down list.
|
|
14
15
|
*/
|
|
15
16
|
htmlSize?: number;
|
|
16
|
-
/**
|
|
17
|
-
* Set component validation state to invalid.
|
|
18
|
-
*/
|
|
19
|
-
invalid?: boolean;
|
|
20
17
|
/**
|
|
21
18
|
* Method called immediately after the `value` prop changes.
|
|
22
19
|
*/
|
|
@@ -32,15 +29,11 @@ export interface CFormSelectProps extends Omit<InputHTMLAttributes<HTMLSelectEle
|
|
|
32
29
|
* Size the component small or large.
|
|
33
30
|
*/
|
|
34
31
|
size?: 'sm' | 'lg';
|
|
35
|
-
/**
|
|
36
|
-
* Set component validation state to valid.
|
|
37
|
-
*/
|
|
38
|
-
valid?: boolean;
|
|
39
32
|
/**
|
|
40
33
|
* The `value` attribute of component.
|
|
41
34
|
*
|
|
42
35
|
* @controllable onChange
|
|
43
|
-
|
|
36
|
+
*/
|
|
44
37
|
value?: string | string[] | number;
|
|
45
38
|
}
|
|
46
39
|
export declare const CFormSelect: React.ForwardRefExoticComponent<CFormSelectProps & React.RefAttributes<HTMLSelectElement>>;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { ChangeEventHandler, InputHTMLAttributes } from 'react';
|
|
2
|
-
|
|
2
|
+
import { CFormControlWrapperProps } from './CFormControlWrapper';
|
|
3
|
+
export interface CFormTextareaProps extends CFormControlWrapperProps, InputHTMLAttributes<HTMLTextAreaElement> {
|
|
3
4
|
/**
|
|
4
5
|
* A string of all className you want applied to the component.
|
|
5
6
|
*/
|
|
@@ -8,10 +9,6 @@ export interface CFormTextareaProps extends InputHTMLAttributes<HTMLTextAreaElem
|
|
|
8
9
|
* Toggle the disabled state for the component.
|
|
9
10
|
*/
|
|
10
11
|
disabled?: boolean;
|
|
11
|
-
/**
|
|
12
|
-
* Set component validation state to invalid.
|
|
13
|
-
*/
|
|
14
|
-
invalid?: boolean;
|
|
15
12
|
/**
|
|
16
13
|
* Method called immediately after the `value` prop changes.
|
|
17
14
|
*/
|
|
@@ -24,10 +21,6 @@ export interface CFormTextareaProps extends InputHTMLAttributes<HTMLTextAreaElem
|
|
|
24
21
|
* Toggle the readonly state for the component.
|
|
25
22
|
*/
|
|
26
23
|
readOnly?: boolean;
|
|
27
|
-
/**
|
|
28
|
-
* Set component validation state to valid.
|
|
29
|
-
*/
|
|
30
|
-
valid?: boolean;
|
|
31
24
|
/**
|
|
32
25
|
* The `value` attribute of component.
|
|
33
26
|
*
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { CForm } from './CForm';
|
|
2
|
+
import { CFormCheck } from './CFormCheck';
|
|
3
|
+
import { CFormFeedback } from './CFormFeedback';
|
|
4
|
+
import { CFormFloating } from './CFormFloating';
|
|
5
|
+
import { CFormInput } from './CFormInput';
|
|
6
|
+
import { CFormLabel } from './CFormLabel';
|
|
7
|
+
import { CFormRange } from './CFormRange';
|
|
8
|
+
import { CFormSelect } from './CFormSelect';
|
|
9
|
+
import { CFormSwitch } from './CFormSwitch';
|
|
10
|
+
import { CFormText } from './CFormText';
|
|
11
|
+
import { CFormTextarea } from './CFormTextarea';
|
|
12
|
+
import { CInputGroup } from './CInputGroup';
|
|
13
|
+
import { CInputGroupText } from './CInputGroupText';
|
|
14
|
+
export { CForm, CFormCheck, CFormFeedback, CFormFloating, CFormInput, CFormLabel, CFormRange, CFormSelect, CFormSwitch, CFormText, CFormTextarea, CInputGroup, CInputGroupText, };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { CHeader } from './CHeader';
|
|
2
|
+
import { CHeaderBrand } from './CHeaderBrand';
|
|
3
|
+
import { CHeaderDivider } from './CHeaderDivider';
|
|
4
|
+
import { CHeaderNav } from './CHeaderNav';
|
|
5
|
+
import { CHeaderText } from './CHeaderText';
|
|
6
|
+
import { CHeaderToggler } from './CHeaderToggler';
|
|
7
|
+
export { CHeader, CHeaderBrand, CHeaderDivider, CHeaderNav, CHeaderText, CHeaderToggler };
|
|
@@ -1 +1,42 @@
|
|
|
1
|
+
export * from './accordion';
|
|
2
|
+
export * from './alert';
|
|
3
|
+
export * from './avatar';
|
|
4
|
+
export * from './backdrop';
|
|
5
|
+
export * from './badge';
|
|
6
|
+
export * from './breadcrumb';
|
|
7
|
+
export * from './button';
|
|
8
|
+
export * from './button-group';
|
|
9
|
+
export * from './callout';
|
|
10
|
+
export * from './card';
|
|
11
|
+
export * from './carousel';
|
|
12
|
+
export * from './close-button';
|
|
13
|
+
export * from './collapse';
|
|
14
|
+
export * from './datepicker';
|
|
15
|
+
export * from './daterangepicker';
|
|
16
|
+
export * from './dropdown';
|
|
17
|
+
export * from './footer';
|
|
18
|
+
export * from './form';
|
|
19
|
+
export * from './grid';
|
|
20
|
+
export * from './header';
|
|
21
|
+
export * from './image';
|
|
22
|
+
export * from './link';
|
|
23
|
+
export * from './list-group';
|
|
24
|
+
export * from './loading-button';
|
|
25
|
+
export * from './modal';
|
|
26
|
+
export * from './multi-select';
|
|
27
|
+
export * from './nav';
|
|
28
|
+
export * from './navbar';
|
|
29
|
+
export * from './offcanvas';
|
|
30
|
+
export * from './pagination';
|
|
31
|
+
export * from './placeholder';
|
|
32
|
+
export * from './progress';
|
|
33
|
+
export * from './popover';
|
|
34
|
+
export * from './smart-table';
|
|
35
|
+
export * from './sidebar';
|
|
36
|
+
export * from './spinner';
|
|
37
|
+
export * from './table';
|
|
38
|
+
export * from './tabs';
|
|
39
|
+
export * from './timepicker';
|
|
40
|
+
export * from './toast';
|
|
41
|
+
export * from './tooltip';
|
|
1
42
|
export * from './widgets';
|