jsuites 6.4.2 → 6.4.3
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/LICENSE +21 -21
- package/README.md +119 -119
- package/dist/jsuites.css +3424 -3424
- package/dist/jsuites.d.ts +10 -10
- package/dist/jsuites.js +22475 -22450
- package/dist/jsuites.webcomponents.js +501 -501
- package/dist/types/animation.d.ts +23 -23
- package/dist/types/calendar.d.ts +87 -87
- package/dist/types/color.d.ts +50 -50
- package/dist/types/contextmenu.d.ts +43 -43
- package/dist/types/dropdown.d.ts +177 -177
- package/dist/types/editor.d.ts +96 -96
- package/dist/types/floating.d.ts +23 -23
- package/dist/types/form.d.ts +57 -57
- package/dist/types/index.d.ts +59 -59
- package/dist/types/mask.d.ts +50 -50
- package/dist/types/modal.d.ts +35 -35
- package/dist/types/notification.d.ts +27 -27
- package/dist/types/picker.d.ts +45 -45
- package/dist/types/rating.d.ts +19 -19
- package/dist/types/search.d.ts +23 -23
- package/dist/types/slider.d.ts +31 -31
- package/dist/types/tabs.d.ts +79 -79
- package/dist/types/tags.d.ts +105 -105
- package/dist/types/toolbar.d.ts +70 -70
- package/dist/types/upload.d.ts +45 -45
- package/dist/types/validations.d.ts +39 -39
- package/package.json +4 -4
- package/react/calendar/index.d.ts +105 -105
- package/react/calendar/index.js +28 -28
- package/react/color/index.d.ts +84 -84
- package/react/color/index.js +28 -28
- package/react/contextmenu/index.d.ts +61 -61
- package/react/contextmenu/index.js +24 -24
- package/react/dropdown/index.d.ts +184 -184
- package/react/dropdown/index.js +25 -25
- package/react/editor/index.d.ts +114 -114
- package/react/editor/index.js +31 -31
- package/react/index.js +26 -26
- package/react/modal/index.d.ts +53 -53
- package/react/modal/index.js +30 -30
- package/react/picker/index.d.ts +64 -64
- package/react/picker/index.js +28 -28
- package/react/rating/index.d.ts +37 -37
- package/react/rating/index.js +28 -28
- package/react/slider/index.d.ts +49 -49
- package/react/slider/index.js +30 -30
- package/react/tabs/index.d.ts +97 -97
- package/react/tabs/index.js +29 -29
- package/react/tags/index.d.ts +121 -121
- package/react/tags/index.js +24 -24
- package/react/toolbar/index.d.ts +88 -88
- package/react/toolbar/index.js +24 -24
- package/vue/calendar/index.d.ts +105 -105
- package/vue/calendar/index.js +36 -36
- package/vue/color/index.d.ts +84 -84
- package/vue/color/index.js +36 -36
- package/vue/contextmenu/index.d.ts +61 -61
- package/vue/contextmenu/index.js +21 -21
- package/vue/dropdown/index.d.ts +184 -184
- package/vue/dropdown/index.js +25 -25
- package/vue/editor/index.d.ts +114 -114
- package/vue/editor/index.js +40 -40
- package/vue/index.js +40 -40
- package/vue/modal/index.d.ts +53 -53
- package/vue/modal/index.js +41 -41
- package/vue/picker/index.d.ts +64 -64
- package/vue/picker/index.js +36 -36
- package/vue/rating/index.d.ts +37 -37
- package/vue/rating/index.js +36 -36
- package/vue/slider/index.d.ts +49 -49
- package/vue/slider/index.js +33 -33
- package/vue/tabs/index.d.ts +97 -97
- package/vue/tabs/index.js +28 -28
- package/vue/tags/index.d.ts +121 -121
- package/vue/tags/index.js +21 -21
- package/vue/toolbar/index.d.ts +88 -88
- package/vue/toolbar/index.js +21 -21
|
@@ -1,39 +1,39 @@
|
|
|
1
|
-
interface Options {
|
|
2
|
-
/** Validation type */
|
|
3
|
-
type: 'number' | 'text' | 'date' | 'list' | 'textLength' | 'empty' | 'notEmpty';
|
|
4
|
-
// Ignore the validation when is blank
|
|
5
|
-
allowBlank?: boolean;
|
|
6
|
-
/** Criteria to be match */
|
|
7
|
-
criteria:
|
|
8
|
-
| '='
|
|
9
|
-
| '!='
|
|
10
|
-
| '>='
|
|
11
|
-
| '>'
|
|
12
|
-
| '<='
|
|
13
|
-
| '<'
|
|
14
|
-
| 'between'
|
|
15
|
-
| 'not between'
|
|
16
|
-
| 'valid date'
|
|
17
|
-
| 'valid email'
|
|
18
|
-
| 'valid url'
|
|
19
|
-
| 'contains'
|
|
20
|
-
| 'not contains'
|
|
21
|
-
| 'begins with'
|
|
22
|
-
| 'ends with'
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
export type Validations = (value: string | number, options: Options) => boolean | {
|
|
26
|
-
url: (value: any, options: object) => boolean;
|
|
27
|
-
email: (value: any, options: object) => boolean;
|
|
28
|
-
required: (value: any, options: object) => boolean;
|
|
29
|
-
empty: (value: any, options: object) => boolean;
|
|
30
|
-
notEmpty: (value: any, options: object) => boolean;
|
|
31
|
-
number: (value: any, options: object) => boolean;
|
|
32
|
-
login: (value: any, options: object) => boolean;
|
|
33
|
-
list: (value: any, options: object) => boolean;
|
|
34
|
-
date: (value: any, options: object) => boolean;
|
|
35
|
-
text: (value: any, options: object) => boolean;
|
|
36
|
-
textLength: (value: any, options: object) => boolean;
|
|
37
|
-
exist: (value: any, options: object) => boolean;
|
|
38
|
-
'not exists': (value: any, options: object) => boolean;
|
|
39
|
-
}
|
|
1
|
+
interface Options {
|
|
2
|
+
/** Validation type */
|
|
3
|
+
type: 'number' | 'text' | 'date' | 'list' | 'textLength' | 'empty' | 'notEmpty';
|
|
4
|
+
// Ignore the validation when is blank
|
|
5
|
+
allowBlank?: boolean;
|
|
6
|
+
/** Criteria to be match */
|
|
7
|
+
criteria:
|
|
8
|
+
| '='
|
|
9
|
+
| '!='
|
|
10
|
+
| '>='
|
|
11
|
+
| '>'
|
|
12
|
+
| '<='
|
|
13
|
+
| '<'
|
|
14
|
+
| 'between'
|
|
15
|
+
| 'not between'
|
|
16
|
+
| 'valid date'
|
|
17
|
+
| 'valid email'
|
|
18
|
+
| 'valid url'
|
|
19
|
+
| 'contains'
|
|
20
|
+
| 'not contains'
|
|
21
|
+
| 'begins with'
|
|
22
|
+
| 'ends with'
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
export type Validations = (value: string | number, options: Options) => boolean | {
|
|
26
|
+
url: (value: any, options: object) => boolean;
|
|
27
|
+
email: (value: any, options: object) => boolean;
|
|
28
|
+
required: (value: any, options: object) => boolean;
|
|
29
|
+
empty: (value: any, options: object) => boolean;
|
|
30
|
+
notEmpty: (value: any, options: object) => boolean;
|
|
31
|
+
number: (value: any, options: object) => boolean;
|
|
32
|
+
login: (value: any, options: object) => boolean;
|
|
33
|
+
list: (value: any, options: object) => boolean;
|
|
34
|
+
date: (value: any, options: object) => boolean;
|
|
35
|
+
text: (value: any, options: object) => boolean;
|
|
36
|
+
textLength: (value: any, options: object) => boolean;
|
|
37
|
+
exist: (value: any, options: object) => boolean;
|
|
38
|
+
'not exists': (value: any, options: object) => boolean;
|
|
39
|
+
}
|
package/package.json
CHANGED
|
@@ -26,17 +26,17 @@
|
|
|
26
26
|
},
|
|
27
27
|
"main": "dist/jsuites.js",
|
|
28
28
|
"types": "dist/jsuites.d.ts",
|
|
29
|
-
"version": "6.4.
|
|
29
|
+
"version": "6.4.3",
|
|
30
30
|
"bugs": "https://github.com/jsuites/jsuites/issues",
|
|
31
31
|
"homepage": "https://github.com/jsuites/jsuites",
|
|
32
32
|
"docs": "https://jsuites.net",
|
|
33
33
|
"download": "https://github.com/jsuites/jsuites/archive/master.zip",
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@jsuites/utils": "^6.0.
|
|
35
|
+
"@jsuites/utils": "^6.0.7",
|
|
36
36
|
"@lemonadejs/calendar": "^5.9.3",
|
|
37
37
|
"@lemonadejs/color": "^5.8.0",
|
|
38
|
-
"@lemonadejs/contextmenu": "^5.8.
|
|
39
|
-
"@lemonadejs/dropdown": "^5.8.
|
|
38
|
+
"@lemonadejs/contextmenu": "^5.8.4",
|
|
39
|
+
"@lemonadejs/dropdown": "^5.8.3",
|
|
40
40
|
"@lemonadejs/modal": "^5.8.3",
|
|
41
41
|
"@lemonadejs/rating": "^5.8.1",
|
|
42
42
|
"@lemonadejs/switch": "^5.8.0",
|
|
@@ -1,105 +1,105 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Official Type definitions for LemonadeJS plugins
|
|
3
|
-
* https://lemonadejs.net
|
|
4
|
-
* Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
declare function Component(el: HTMLElement, options?: Component.Options): Component.Instance;
|
|
8
|
-
|
|
9
|
-
declare namespace Component {
|
|
10
|
-
interface Options {
|
|
11
|
-
// Render type: [ default | year-month-picker ]. Default: default
|
|
12
|
-
type?: 'default' | 'year-month-picker';
|
|
13
|
-
// Range restriction [dateStart, dateEnd]
|
|
14
|
-
validRange?: [string|null, string|null];
|
|
15
|
-
// Starting weekday - 0 for sunday, 6 for saturday
|
|
16
|
-
startingDay?: number,
|
|
17
|
-
// Date format. Default 'DD/MM/YYYY'
|
|
18
|
-
format?: string,
|
|
19
|
-
// Allow keyboard date entry
|
|
20
|
-
readonly?: boolean,
|
|
21
|
-
// Today is default
|
|
22
|
-
today?: boolean,
|
|
23
|
-
// Show timepicker
|
|
24
|
-
time?: boolean,
|
|
25
|
-
// Show the reset button
|
|
26
|
-
resetButton?: boolean,
|
|
27
|
-
// Placeholder
|
|
28
|
-
placeholder?: string,
|
|
29
|
-
// Translations can be done here
|
|
30
|
-
months?: string[],
|
|
31
|
-
monthsFull?: string[],
|
|
32
|
-
weekdays?: string[],
|
|
33
|
-
textDone?: string[],
|
|
34
|
-
textReset?: string[],
|
|
35
|
-
textUpdate?: string[],
|
|
36
|
-
// Start with the value
|
|
37
|
-
value?: string,
|
|
38
|
-
// Fullscreen (this is automatic set for screen size < 800)
|
|
39
|
-
fullscreen: boolean,
|
|
40
|
-
// Create the calendar closed as default
|
|
41
|
-
opened: boolean,
|
|
42
|
-
// Events
|
|
43
|
-
onopen: () => void,
|
|
44
|
-
onclose: () => void,
|
|
45
|
-
onchange: () => void,
|
|
46
|
-
onupdate: () => void,
|
|
47
|
-
// Internal mode controller
|
|
48
|
-
mode: null,
|
|
49
|
-
position: null,
|
|
50
|
-
// Data type
|
|
51
|
-
dataType: null,
|
|
52
|
-
// Controls
|
|
53
|
-
controls: boolean,
|
|
54
|
-
/** Auto select confirms the current date as the new value onblur. Default: true */
|
|
55
|
-
autoSelect: boolean;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
interface Instance {
|
|
59
|
-
/** Close the calendar picker */
|
|
60
|
-
close: () => void;
|
|
61
|
-
/** Internal date value */
|
|
62
|
-
date: number[];
|
|
63
|
-
/** Convert a formatted string to a valid raw date */
|
|
64
|
-
fromFormatted: string;
|
|
65
|
-
/** Show the calendar in day picker mode */
|
|
66
|
-
getDays: () => void;
|
|
67
|
-
/** Show the calendar in month picker mode */
|
|
68
|
-
getMonths: () => void;
|
|
69
|
-
/** Show the calendar in year picker mode */
|
|
70
|
-
getYears: () => void;
|
|
71
|
-
/** Get the current date */
|
|
72
|
-
getValue: () => string;
|
|
73
|
-
/** Advance to the next month, year or group of years depending on the current view mode */
|
|
74
|
-
next: () => void;
|
|
75
|
-
/** Previous month, year or group of years depending on the current view mode */
|
|
76
|
-
prev: () => void;
|
|
77
|
-
/** Open the calendar picker */
|
|
78
|
-
open: () => void;
|
|
79
|
-
/** Initial settings */
|
|
80
|
-
options: Options;
|
|
81
|
-
/** Reset date */
|
|
82
|
-
reset: () => void;
|
|
83
|
-
/** Change the configurations */
|
|
84
|
-
setOptions
|
|
85
|
-
/** Change the date for today */
|
|
86
|
-
setToday: () => void;
|
|
87
|
-
/** Change the value for a given date */
|
|
88
|
-
setValue: (newDate: string) => void;
|
|
89
|
-
/** Type calendar */
|
|
90
|
-
type: 'calendar';
|
|
91
|
-
/** Alias for setValue */
|
|
92
|
-
update: () => void;
|
|
93
|
-
/** Auto select confirms the current date as the new value onblur. Default: true */
|
|
94
|
-
autoSelect: boolean;
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
interface Calendar {
|
|
100
|
-
(): any
|
|
101
|
-
[key: string]: any
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
declare function Calendar<Calendar>(props: Component.Options): any;
|
|
105
|
-
export default Calendar;
|
|
1
|
+
/**
|
|
2
|
+
* Official Type definitions for LemonadeJS plugins
|
|
3
|
+
* https://lemonadejs.net
|
|
4
|
+
* Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
declare function Component(el: HTMLElement, options?: Component.Options): Component.Instance;
|
|
8
|
+
|
|
9
|
+
declare namespace Component {
|
|
10
|
+
interface Options {
|
|
11
|
+
// Render type: [ default | year-month-picker ]. Default: default
|
|
12
|
+
type?: 'default' | 'year-month-picker';
|
|
13
|
+
// Range restriction [dateStart, dateEnd]
|
|
14
|
+
validRange?: [string|null, string|null];
|
|
15
|
+
// Starting weekday - 0 for sunday, 6 for saturday
|
|
16
|
+
startingDay?: number,
|
|
17
|
+
// Date format. Default 'DD/MM/YYYY'
|
|
18
|
+
format?: string,
|
|
19
|
+
// Allow keyboard date entry
|
|
20
|
+
readonly?: boolean,
|
|
21
|
+
// Today is default
|
|
22
|
+
today?: boolean,
|
|
23
|
+
// Show timepicker
|
|
24
|
+
time?: boolean,
|
|
25
|
+
// Show the reset button
|
|
26
|
+
resetButton?: boolean,
|
|
27
|
+
// Placeholder
|
|
28
|
+
placeholder?: string,
|
|
29
|
+
// Translations can be done here
|
|
30
|
+
months?: string[],
|
|
31
|
+
monthsFull?: string[],
|
|
32
|
+
weekdays?: string[],
|
|
33
|
+
textDone?: string[],
|
|
34
|
+
textReset?: string[],
|
|
35
|
+
textUpdate?: string[],
|
|
36
|
+
// Start with the value
|
|
37
|
+
value?: string,
|
|
38
|
+
// Fullscreen (this is automatic set for screen size < 800)
|
|
39
|
+
fullscreen: boolean,
|
|
40
|
+
// Create the calendar closed as default
|
|
41
|
+
opened: boolean,
|
|
42
|
+
// Events
|
|
43
|
+
onopen: () => void,
|
|
44
|
+
onclose: () => void,
|
|
45
|
+
onchange: () => void,
|
|
46
|
+
onupdate: () => void,
|
|
47
|
+
// Internal mode controller
|
|
48
|
+
mode: null,
|
|
49
|
+
position: null,
|
|
50
|
+
// Data type
|
|
51
|
+
dataType: null,
|
|
52
|
+
// Controls
|
|
53
|
+
controls: boolean,
|
|
54
|
+
/** Auto select confirms the current date as the new value onblur. Default: true */
|
|
55
|
+
autoSelect: boolean;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
interface Instance {
|
|
59
|
+
/** Close the calendar picker */
|
|
60
|
+
close: () => void;
|
|
61
|
+
/** Internal date value */
|
|
62
|
+
date: number[];
|
|
63
|
+
/** Convert a formatted string to a valid raw date */
|
|
64
|
+
fromFormatted: string;
|
|
65
|
+
/** Show the calendar in day picker mode */
|
|
66
|
+
getDays: () => void;
|
|
67
|
+
/** Show the calendar in month picker mode */
|
|
68
|
+
getMonths: () => void;
|
|
69
|
+
/** Show the calendar in year picker mode */
|
|
70
|
+
getYears: () => void;
|
|
71
|
+
/** Get the current date */
|
|
72
|
+
getValue: () => string;
|
|
73
|
+
/** Advance to the next month, year or group of years depending on the current view mode */
|
|
74
|
+
next: () => void;
|
|
75
|
+
/** Previous month, year or group of years depending on the current view mode */
|
|
76
|
+
prev: () => void;
|
|
77
|
+
/** Open the calendar picker */
|
|
78
|
+
open: () => void;
|
|
79
|
+
/** Initial settings */
|
|
80
|
+
options: Options;
|
|
81
|
+
/** Reset date */
|
|
82
|
+
reset: () => void;
|
|
83
|
+
/** Change the configurations */
|
|
84
|
+
setOptions
|
|
85
|
+
/** Change the date for today */
|
|
86
|
+
setToday: () => void;
|
|
87
|
+
/** Change the value for a given date */
|
|
88
|
+
setValue: (newDate: string) => void;
|
|
89
|
+
/** Type calendar */
|
|
90
|
+
type: 'calendar';
|
|
91
|
+
/** Alias for setValue */
|
|
92
|
+
update: () => void;
|
|
93
|
+
/** Auto select confirms the current date as the new value onblur. Default: true */
|
|
94
|
+
autoSelect: boolean;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
interface Calendar {
|
|
100
|
+
(): any
|
|
101
|
+
[key: string]: any
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
declare function Calendar<Calendar>(props: Component.Options): any;
|
|
105
|
+
export default Calendar;
|
package/react/calendar/index.js
CHANGED
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
// @ts-nocheck
|
|
2
|
-
import React, { useRef, useEffect } from "react";
|
|
3
|
-
import jSuites from '../../dist/jsuites';
|
|
4
|
-
|
|
5
|
-
// @ts-ignore
|
|
6
|
-
export default React.forwardRef((props, mainReference) => {
|
|
7
|
-
// Dom element
|
|
8
|
-
const Ref = useRef(null);
|
|
9
|
-
|
|
10
|
-
// Get the properties for the spreadsheet
|
|
11
|
-
let options = { ...props };
|
|
12
|
-
|
|
13
|
-
useEffect(() => {
|
|
14
|
-
// @ts-ignore
|
|
15
|
-
if (!Ref.current.innerHTML) {
|
|
16
|
-
mainReference.current = jSuites.calendar(Ref.current, options);
|
|
17
|
-
}
|
|
18
|
-
}, []);
|
|
19
|
-
|
|
20
|
-
useEffect(() => {
|
|
21
|
-
mainReference.current.setValue(props.value)
|
|
22
|
-
}, [props.value])
|
|
23
|
-
|
|
24
|
-
let prop = {
|
|
25
|
-
ref: Ref,
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
return React.createElement("input", prop);
|
|
1
|
+
// @ts-nocheck
|
|
2
|
+
import React, { useRef, useEffect } from "react";
|
|
3
|
+
import jSuites from '../../dist/jsuites';
|
|
4
|
+
|
|
5
|
+
// @ts-ignore
|
|
6
|
+
export default React.forwardRef((props, mainReference) => {
|
|
7
|
+
// Dom element
|
|
8
|
+
const Ref = useRef(null);
|
|
9
|
+
|
|
10
|
+
// Get the properties for the spreadsheet
|
|
11
|
+
let options = { ...props };
|
|
12
|
+
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
// @ts-ignore
|
|
15
|
+
if (!Ref.current.innerHTML) {
|
|
16
|
+
mainReference.current = jSuites.calendar(Ref.current, options);
|
|
17
|
+
}
|
|
18
|
+
}, []);
|
|
19
|
+
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
mainReference.current.setValue(props.value)
|
|
22
|
+
}, [props.value])
|
|
23
|
+
|
|
24
|
+
let prop = {
|
|
25
|
+
ref: Ref,
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
return React.createElement("input", prop);
|
|
29
29
|
})
|
package/react/color/index.d.ts
CHANGED
|
@@ -1,84 +1,84 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Official Type definitions for LemonadeJS plugins
|
|
3
|
-
* https://lemonadejs.net
|
|
4
|
-
* Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
declare function Component(el: HTMLElement, options?: Component.Options): Component.Instance;
|
|
8
|
-
|
|
9
|
-
declare namespace Component {
|
|
10
|
-
interface Options {
|
|
11
|
-
/** Color picker input place holder */
|
|
12
|
-
placeholder: string;
|
|
13
|
-
/** Initial value */
|
|
14
|
-
value: string;
|
|
15
|
-
/** When the color picker is opened */
|
|
16
|
-
onopen: (el: HTMLElement, instance: Color) => void;
|
|
17
|
-
/** When the color picker is closed */
|
|
18
|
-
onclose: (el: HTMLElement, instance: Color) => void;
|
|
19
|
-
/** When the color is changed */
|
|
20
|
-
onchange: (el: HTMLElement, value: string, instance: Color) => void;
|
|
21
|
-
/** Automatically close the color picker when a new color is clicked */
|
|
22
|
-
closeOnChange: boolean;
|
|
23
|
-
/** Color palette options */
|
|
24
|
-
palette: string[];
|
|
25
|
-
/** Fixed or normal */
|
|
26
|
-
position: 'absolute' | null;
|
|
27
|
-
/** Button label */
|
|
28
|
-
doneLabel: string;
|
|
29
|
-
/** Button label */
|
|
30
|
-
resetLabel: string;
|
|
31
|
-
/** Fullscreen mode */
|
|
32
|
-
fullscreen: boolean;
|
|
33
|
-
/** Start the picker opened */
|
|
34
|
-
opened: boolean;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
interface Instance {
|
|
38
|
-
/** Close the calendar picker */
|
|
39
|
-
close: () => void;
|
|
40
|
-
/** Internal date value */
|
|
41
|
-
date: number[];
|
|
42
|
-
/** Convert a formatted string to a valid raw date */
|
|
43
|
-
fromFormatted: string;
|
|
44
|
-
/** Show the calendar in day picker mode */
|
|
45
|
-
getDays: () => void;
|
|
46
|
-
/** Show the calendar in month picker mode */
|
|
47
|
-
getMonths: () => void;
|
|
48
|
-
/** Show the calendar in year picker mode */
|
|
49
|
-
getYears: () => void;
|
|
50
|
-
/** Get the current date */
|
|
51
|
-
getValue: () => string;
|
|
52
|
-
/** Advance to the next month, year or group of years depending on the current view mode */
|
|
53
|
-
next: () => void;
|
|
54
|
-
/** Previous month, year or group of years depending on the current view mode */
|
|
55
|
-
prev: () => void;
|
|
56
|
-
/** Open the calendar picker */
|
|
57
|
-
open: () => void;
|
|
58
|
-
/** Initial settings */
|
|
59
|
-
options: Options;
|
|
60
|
-
/** Reset date */
|
|
61
|
-
reset: () => void;
|
|
62
|
-
/** Change the configurations */
|
|
63
|
-
setOptions
|
|
64
|
-
/** Change the date for today */
|
|
65
|
-
setToday: () => void;
|
|
66
|
-
/** Change the value for a given date */
|
|
67
|
-
setValue: (newDate: string) => void;
|
|
68
|
-
/** Type calendar */
|
|
69
|
-
type: 'calendar';
|
|
70
|
-
/** Alias for setValue */
|
|
71
|
-
update: () => void;
|
|
72
|
-
/** Auto select confirms the current date as the new value onblur. Default: true */
|
|
73
|
-
autoSelect: boolean;
|
|
74
|
-
}
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
interface Color {
|
|
79
|
-
(): any
|
|
80
|
-
[key: string]: any
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
declare function Color<Color>(props: Component.Options): any;
|
|
84
|
-
export default Color;
|
|
1
|
+
/**
|
|
2
|
+
* Official Type definitions for LemonadeJS plugins
|
|
3
|
+
* https://lemonadejs.net
|
|
4
|
+
* Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
declare function Component(el: HTMLElement, options?: Component.Options): Component.Instance;
|
|
8
|
+
|
|
9
|
+
declare namespace Component {
|
|
10
|
+
interface Options {
|
|
11
|
+
/** Color picker input place holder */
|
|
12
|
+
placeholder: string;
|
|
13
|
+
/** Initial value */
|
|
14
|
+
value: string;
|
|
15
|
+
/** When the color picker is opened */
|
|
16
|
+
onopen: (el: HTMLElement, instance: Color) => void;
|
|
17
|
+
/** When the color picker is closed */
|
|
18
|
+
onclose: (el: HTMLElement, instance: Color) => void;
|
|
19
|
+
/** When the color is changed */
|
|
20
|
+
onchange: (el: HTMLElement, value: string, instance: Color) => void;
|
|
21
|
+
/** Automatically close the color picker when a new color is clicked */
|
|
22
|
+
closeOnChange: boolean;
|
|
23
|
+
/** Color palette options */
|
|
24
|
+
palette: string[];
|
|
25
|
+
/** Fixed or normal */
|
|
26
|
+
position: 'absolute' | null;
|
|
27
|
+
/** Button label */
|
|
28
|
+
doneLabel: string;
|
|
29
|
+
/** Button label */
|
|
30
|
+
resetLabel: string;
|
|
31
|
+
/** Fullscreen mode */
|
|
32
|
+
fullscreen: boolean;
|
|
33
|
+
/** Start the picker opened */
|
|
34
|
+
opened: boolean;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
interface Instance {
|
|
38
|
+
/** Close the calendar picker */
|
|
39
|
+
close: () => void;
|
|
40
|
+
/** Internal date value */
|
|
41
|
+
date: number[];
|
|
42
|
+
/** Convert a formatted string to a valid raw date */
|
|
43
|
+
fromFormatted: string;
|
|
44
|
+
/** Show the calendar in day picker mode */
|
|
45
|
+
getDays: () => void;
|
|
46
|
+
/** Show the calendar in month picker mode */
|
|
47
|
+
getMonths: () => void;
|
|
48
|
+
/** Show the calendar in year picker mode */
|
|
49
|
+
getYears: () => void;
|
|
50
|
+
/** Get the current date */
|
|
51
|
+
getValue: () => string;
|
|
52
|
+
/** Advance to the next month, year or group of years depending on the current view mode */
|
|
53
|
+
next: () => void;
|
|
54
|
+
/** Previous month, year or group of years depending on the current view mode */
|
|
55
|
+
prev: () => void;
|
|
56
|
+
/** Open the calendar picker */
|
|
57
|
+
open: () => void;
|
|
58
|
+
/** Initial settings */
|
|
59
|
+
options: Options;
|
|
60
|
+
/** Reset date */
|
|
61
|
+
reset: () => void;
|
|
62
|
+
/** Change the configurations */
|
|
63
|
+
setOptions
|
|
64
|
+
/** Change the date for today */
|
|
65
|
+
setToday: () => void;
|
|
66
|
+
/** Change the value for a given date */
|
|
67
|
+
setValue: (newDate: string) => void;
|
|
68
|
+
/** Type calendar */
|
|
69
|
+
type: 'calendar';
|
|
70
|
+
/** Alias for setValue */
|
|
71
|
+
update: () => void;
|
|
72
|
+
/** Auto select confirms the current date as the new value onblur. Default: true */
|
|
73
|
+
autoSelect: boolean;
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
interface Color {
|
|
79
|
+
(): any
|
|
80
|
+
[key: string]: any
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
declare function Color<Color>(props: Component.Options): any;
|
|
84
|
+
export default Color;
|
package/react/color/index.js
CHANGED
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
// @ts-nocheck
|
|
2
|
-
import React, { useRef, useEffect } from "react";
|
|
3
|
-
import jSuites from '../../dist/jsuites';
|
|
4
|
-
|
|
5
|
-
// @ts-ignore
|
|
6
|
-
export default React.forwardRef((props, mainReference) => {
|
|
7
|
-
// Dom element
|
|
8
|
-
const Ref = useRef(null);
|
|
9
|
-
|
|
10
|
-
// Get the properties for the spreadsheet
|
|
11
|
-
let options = { ...props };
|
|
12
|
-
|
|
13
|
-
useEffect(() => {
|
|
14
|
-
// @ts-ignore
|
|
15
|
-
if (!Ref.current.innerHTML) {
|
|
16
|
-
mainReference.current = jSuites.color(Ref.current, options);
|
|
17
|
-
}
|
|
18
|
-
}, []);
|
|
19
|
-
|
|
20
|
-
useEffect(() => {
|
|
21
|
-
mainReference.current.setValue(props.value)
|
|
22
|
-
}, [props.value])
|
|
23
|
-
|
|
24
|
-
let prop = {
|
|
25
|
-
ref: Ref,
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
return React.createElement("input", prop);
|
|
1
|
+
// @ts-nocheck
|
|
2
|
+
import React, { useRef, useEffect } from "react";
|
|
3
|
+
import jSuites from '../../dist/jsuites';
|
|
4
|
+
|
|
5
|
+
// @ts-ignore
|
|
6
|
+
export default React.forwardRef((props, mainReference) => {
|
|
7
|
+
// Dom element
|
|
8
|
+
const Ref = useRef(null);
|
|
9
|
+
|
|
10
|
+
// Get the properties for the spreadsheet
|
|
11
|
+
let options = { ...props };
|
|
12
|
+
|
|
13
|
+
useEffect(() => {
|
|
14
|
+
// @ts-ignore
|
|
15
|
+
if (!Ref.current.innerHTML) {
|
|
16
|
+
mainReference.current = jSuites.color(Ref.current, options);
|
|
17
|
+
}
|
|
18
|
+
}, []);
|
|
19
|
+
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
mainReference.current.setValue(props.value)
|
|
22
|
+
}, [props.value])
|
|
23
|
+
|
|
24
|
+
let prop = {
|
|
25
|
+
ref: Ref,
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
return React.createElement("input", prop);
|
|
29
29
|
})
|