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
package/react/picker/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.picker(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("div", 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.picker(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("div", prop);
|
|
29
29
|
})
|
package/react/rating/index.d.ts
CHANGED
|
@@ -1,37 +1,37 @@
|
|
|
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
|
-
/** Number of stars */
|
|
12
|
-
number?: 5,
|
|
13
|
-
/** Current value */
|
|
14
|
-
value?: number,
|
|
15
|
-
/** Example by default. [ 'Very bad', 'Bad', 'Average', 'Good', 'Very good' ] */
|
|
16
|
-
tooltip?: string[],
|
|
17
|
-
/** When the value changes */
|
|
18
|
-
onchange?: () => void,
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
interface Instance {
|
|
22
|
-
/** Change the value */
|
|
23
|
-
setValue: (index: number) => void;
|
|
24
|
-
/** Get the current value */
|
|
25
|
-
getValue: () => void;
|
|
26
|
-
/** Current options */
|
|
27
|
-
options: Component.Options;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
interface Rating {
|
|
32
|
-
(): any
|
|
33
|
-
[key: string]: any
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
declare function Rating<Rating>(props: Component.Options): any;
|
|
37
|
-
export default Rating;
|
|
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
|
+
/** Number of stars */
|
|
12
|
+
number?: 5,
|
|
13
|
+
/** Current value */
|
|
14
|
+
value?: number,
|
|
15
|
+
/** Example by default. [ 'Very bad', 'Bad', 'Average', 'Good', 'Very good' ] */
|
|
16
|
+
tooltip?: string[],
|
|
17
|
+
/** When the value changes */
|
|
18
|
+
onchange?: () => void,
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
interface Instance {
|
|
22
|
+
/** Change the value */
|
|
23
|
+
setValue: (index: number) => void;
|
|
24
|
+
/** Get the current value */
|
|
25
|
+
getValue: () => void;
|
|
26
|
+
/** Current options */
|
|
27
|
+
options: Component.Options;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
interface Rating {
|
|
32
|
+
(): any
|
|
33
|
+
[key: string]: any
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
declare function Rating<Rating>(props: Component.Options): any;
|
|
37
|
+
export default Rating;
|
package/react/rating/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.rating(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("div", 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.rating(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("div", prop);
|
|
29
29
|
})
|
package/react/slider/index.d.ts
CHANGED
|
@@ -1,49 +1,49 @@
|
|
|
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
|
-
/** Items */
|
|
12
|
-
items: [];
|
|
13
|
-
/** Height */
|
|
14
|
-
height: number
|
|
15
|
-
/** Height */
|
|
16
|
-
width: number
|
|
17
|
-
/** Height */
|
|
18
|
-
grid: boolean
|
|
19
|
-
/** Height */
|
|
20
|
-
onopen: (el: HTMLElement) => void
|
|
21
|
-
/** Height */
|
|
22
|
-
onclose: (el: HTMLElement) => void
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
interface Instance {
|
|
26
|
-
/** Update the number of photos label */
|
|
27
|
-
updateCounter: (index) => void;
|
|
28
|
-
/** Open photo preview with a photo define in the arguments */
|
|
29
|
-
show: (target) => void;
|
|
30
|
-
/** Open photo preview */
|
|
31
|
-
open: () => void;
|
|
32
|
-
/** Close the photo preview */
|
|
33
|
-
close: () => void;
|
|
34
|
-
/** Reset photos */
|
|
35
|
-
reset: () => void;
|
|
36
|
-
/** Next photo */
|
|
37
|
-
next: () => void;
|
|
38
|
-
/** Previous photo */
|
|
39
|
-
prev: () => void;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
interface Slider {
|
|
44
|
-
(): any
|
|
45
|
-
[key: string]: any
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
declare function Slider<Slider>(props: Component.Options): any;
|
|
49
|
-
export default Slider;
|
|
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
|
+
/** Items */
|
|
12
|
+
items: [];
|
|
13
|
+
/** Height */
|
|
14
|
+
height: number
|
|
15
|
+
/** Height */
|
|
16
|
+
width: number
|
|
17
|
+
/** Height */
|
|
18
|
+
grid: boolean
|
|
19
|
+
/** Height */
|
|
20
|
+
onopen: (el: HTMLElement) => void
|
|
21
|
+
/** Height */
|
|
22
|
+
onclose: (el: HTMLElement) => void
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
interface Instance {
|
|
26
|
+
/** Update the number of photos label */
|
|
27
|
+
updateCounter: (index) => void;
|
|
28
|
+
/** Open photo preview with a photo define in the arguments */
|
|
29
|
+
show: (target) => void;
|
|
30
|
+
/** Open photo preview */
|
|
31
|
+
open: () => void;
|
|
32
|
+
/** Close the photo preview */
|
|
33
|
+
close: () => void;
|
|
34
|
+
/** Reset photos */
|
|
35
|
+
reset: () => void;
|
|
36
|
+
/** Next photo */
|
|
37
|
+
next: () => void;
|
|
38
|
+
/** Previous photo */
|
|
39
|
+
prev: () => void;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
interface Slider {
|
|
44
|
+
(): any
|
|
45
|
+
[key: string]: any
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
declare function Slider<Slider>(props: Component.Options): any;
|
|
49
|
+
export default Slider;
|
package/react/slider/index.js
CHANGED
|
@@ -1,31 +1,31 @@
|
|
|
1
|
-
// @ts-nocheck
|
|
2
|
-
import React, { useRef, useEffect } from "react";
|
|
3
|
-
import jSuites from '../../dist/jsuites';
|
|
4
|
-
import { renderToStaticMarkup } from 'react-dom/server';
|
|
5
|
-
|
|
6
|
-
// @ts-ignore
|
|
7
|
-
export default React.forwardRef((props, mainReference) => {
|
|
8
|
-
// Dom element
|
|
9
|
-
const Ref = useRef(null);
|
|
10
|
-
|
|
11
|
-
const template = renderToStaticMarkup(props.children)
|
|
12
|
-
|
|
13
|
-
// Get the properties for the spreadsheet
|
|
14
|
-
let options = { ...props };
|
|
15
|
-
|
|
16
|
-
useEffect(() => {
|
|
17
|
-
// @ts-ignore
|
|
18
|
-
if (!Ref.current.innerHTML) {
|
|
19
|
-
Ref.current.innerHTML = template
|
|
20
|
-
|
|
21
|
-
mainReference.current = jSuites.slider(Ref.current, options);
|
|
22
|
-
}
|
|
23
|
-
}, []);
|
|
24
|
-
|
|
25
|
-
let prop = {
|
|
26
|
-
ref: Ref,
|
|
27
|
-
style: { height: '100%', width: '100%' }
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
return React.createElement("div", prop);
|
|
1
|
+
// @ts-nocheck
|
|
2
|
+
import React, { useRef, useEffect } from "react";
|
|
3
|
+
import jSuites from '../../dist/jsuites';
|
|
4
|
+
import { renderToStaticMarkup } from 'react-dom/server';
|
|
5
|
+
|
|
6
|
+
// @ts-ignore
|
|
7
|
+
export default React.forwardRef((props, mainReference) => {
|
|
8
|
+
// Dom element
|
|
9
|
+
const Ref = useRef(null);
|
|
10
|
+
|
|
11
|
+
const template = renderToStaticMarkup(props.children)
|
|
12
|
+
|
|
13
|
+
// Get the properties for the spreadsheet
|
|
14
|
+
let options = { ...props };
|
|
15
|
+
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
// @ts-ignore
|
|
18
|
+
if (!Ref.current.innerHTML) {
|
|
19
|
+
Ref.current.innerHTML = template
|
|
20
|
+
|
|
21
|
+
mainReference.current = jSuites.slider(Ref.current, options);
|
|
22
|
+
}
|
|
23
|
+
}, []);
|
|
24
|
+
|
|
25
|
+
let prop = {
|
|
26
|
+
ref: Ref,
|
|
27
|
+
style: { height: '100%', width: '100%' }
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
return React.createElement("div", prop);
|
|
31
31
|
})
|
package/react/tabs/index.d.ts
CHANGED
|
@@ -1,97 +1,97 @@
|
|
|
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
|
-
interface Item {
|
|
10
|
-
/** DOMElement for the header title */
|
|
11
|
-
titleElement?: HTMLElement;
|
|
12
|
-
/** DOMElement for the header content */
|
|
13
|
-
contentElement?: HTMLElement;
|
|
14
|
-
/** Material icon keyword */
|
|
15
|
-
icon?: string;
|
|
16
|
-
/** Tab header */
|
|
17
|
-
title?: string;
|
|
18
|
-
/** Width */
|
|
19
|
-
width?: number;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
declare namespace Component {
|
|
23
|
-
interface Options {
|
|
24
|
-
/** Tabs definition */
|
|
25
|
-
data: Item[],
|
|
26
|
-
/** Position */
|
|
27
|
-
position: 'top' | 'bottom' | null,
|
|
28
|
-
/** Show the add new tab button. Default: false */
|
|
29
|
-
allowCreate: boolean,
|
|
30
|
-
/** Allow drag and drop to change the tabs position. Default: false */
|
|
31
|
-
allowChangePosition: boolean,
|
|
32
|
-
/** On click event */
|
|
33
|
-
onclick: (el: HTMLElement, instance: Tabs, index: number, header: HTMLElement, content: HTMLElement) => void;
|
|
34
|
-
/** On load event */
|
|
35
|
-
onload: (el: HTMLElement, instance: Tabs) => void,
|
|
36
|
-
/** On change event */
|
|
37
|
-
onchange: (el: HTMLElement, instance: Tabs, index: number, header: HTMLElement, content: HTMLElement) => void;
|
|
38
|
-
/** On create new tab event */
|
|
39
|
-
oncreate: (el: HTMLElement, div: HTMLElement) => void;
|
|
40
|
-
/** On delete tab event */
|
|
41
|
-
ondelete: (el: HTMLElement, index: number) => void;
|
|
42
|
-
/**
|
|
43
|
-
* On before create new tab event
|
|
44
|
-
* @return {string} Header title
|
|
45
|
-
*/
|
|
46
|
-
onbeforecreate: (el: HTMLElement) => string;
|
|
47
|
-
/** On change tab position event */
|
|
48
|
-
onchangeposition: (headers: HTMLElement[], from: number, to: number) => void;
|
|
49
|
-
/** Enable animation. Default: false */
|
|
50
|
-
animation: boolean,
|
|
51
|
-
/** Hide headers. Default: false */
|
|
52
|
-
hideHeaders: boolean,
|
|
53
|
-
/** Content padding */
|
|
54
|
-
padding: number,
|
|
55
|
-
/** Design */
|
|
56
|
-
palette?: 'modern' | null,
|
|
57
|
-
/** Max container width */
|
|
58
|
-
maxWidth: number,
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
interface Instance {
|
|
62
|
-
/** Set the border to a header */
|
|
63
|
-
setBorder: (index: number) => void;
|
|
64
|
-
/** Open a tab by number */
|
|
65
|
-
open: (index: number) => void;
|
|
66
|
-
/** Open a tab by its header DOM element */
|
|
67
|
-
selectIndex: (element: HTMLElement) => void;
|
|
68
|
-
/** Rename a header title */
|
|
69
|
-
rename: (index: number, title: string) => void;
|
|
70
|
-
/** Create a new tab */
|
|
71
|
-
create: (title: string, url: string) => void;
|
|
72
|
-
/** Remove a tab */
|
|
73
|
-
remove: (index: number) => void;
|
|
74
|
-
/** Automatic name the next tab number */
|
|
75
|
-
nextNumber: () => void;
|
|
76
|
-
/** Delete tab element */
|
|
77
|
-
deleteElement: () => void;
|
|
78
|
-
/** Append tab element */
|
|
79
|
-
appendElement: (title?: string, callback?: Function, openTab?: boolean) => void;
|
|
80
|
-
/** Get the active tab index */
|
|
81
|
-
getActive: () => number;
|
|
82
|
-
/** Update the content of a tab */
|
|
83
|
-
updateContent: (index: number, newContent: string) => void;
|
|
84
|
-
/** Update tab position */
|
|
85
|
-
updatePosition: (from: number, to: number, ignoreEvents?: boolean) => void;
|
|
86
|
-
/** Update DOM position */
|
|
87
|
-
move: (from: number, to: number, ignoreEvents?: boolean, openTab?: boolean) => void;
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
interface Tabs {
|
|
92
|
-
(): any
|
|
93
|
-
[key: string]: any
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
declare function Tabs<Tabs>(props: Component.Options): any;
|
|
97
|
-
export default Tabs;
|
|
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
|
+
interface Item {
|
|
10
|
+
/** DOMElement for the header title */
|
|
11
|
+
titleElement?: HTMLElement;
|
|
12
|
+
/** DOMElement for the header content */
|
|
13
|
+
contentElement?: HTMLElement;
|
|
14
|
+
/** Material icon keyword */
|
|
15
|
+
icon?: string;
|
|
16
|
+
/** Tab header */
|
|
17
|
+
title?: string;
|
|
18
|
+
/** Width */
|
|
19
|
+
width?: number;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
declare namespace Component {
|
|
23
|
+
interface Options {
|
|
24
|
+
/** Tabs definition */
|
|
25
|
+
data: Item[],
|
|
26
|
+
/** Position */
|
|
27
|
+
position: 'top' | 'bottom' | null,
|
|
28
|
+
/** Show the add new tab button. Default: false */
|
|
29
|
+
allowCreate: boolean,
|
|
30
|
+
/** Allow drag and drop to change the tabs position. Default: false */
|
|
31
|
+
allowChangePosition: boolean,
|
|
32
|
+
/** On click event */
|
|
33
|
+
onclick: (el: HTMLElement, instance: Tabs, index: number, header: HTMLElement, content: HTMLElement) => void;
|
|
34
|
+
/** On load event */
|
|
35
|
+
onload: (el: HTMLElement, instance: Tabs) => void,
|
|
36
|
+
/** On change event */
|
|
37
|
+
onchange: (el: HTMLElement, instance: Tabs, index: number, header: HTMLElement, content: HTMLElement) => void;
|
|
38
|
+
/** On create new tab event */
|
|
39
|
+
oncreate: (el: HTMLElement, div: HTMLElement) => void;
|
|
40
|
+
/** On delete tab event */
|
|
41
|
+
ondelete: (el: HTMLElement, index: number) => void;
|
|
42
|
+
/**
|
|
43
|
+
* On before create new tab event
|
|
44
|
+
* @return {string} Header title
|
|
45
|
+
*/
|
|
46
|
+
onbeforecreate: (el: HTMLElement) => string;
|
|
47
|
+
/** On change tab position event */
|
|
48
|
+
onchangeposition: (headers: HTMLElement[], from: number, to: number) => void;
|
|
49
|
+
/** Enable animation. Default: false */
|
|
50
|
+
animation: boolean,
|
|
51
|
+
/** Hide headers. Default: false */
|
|
52
|
+
hideHeaders: boolean,
|
|
53
|
+
/** Content padding */
|
|
54
|
+
padding: number,
|
|
55
|
+
/** Design */
|
|
56
|
+
palette?: 'modern' | null,
|
|
57
|
+
/** Max container width */
|
|
58
|
+
maxWidth: number,
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
interface Instance {
|
|
62
|
+
/** Set the border to a header */
|
|
63
|
+
setBorder: (index: number) => void;
|
|
64
|
+
/** Open a tab by number */
|
|
65
|
+
open: (index: number) => void;
|
|
66
|
+
/** Open a tab by its header DOM element */
|
|
67
|
+
selectIndex: (element: HTMLElement) => void;
|
|
68
|
+
/** Rename a header title */
|
|
69
|
+
rename: (index: number, title: string) => void;
|
|
70
|
+
/** Create a new tab */
|
|
71
|
+
create: (title: string, url: string) => void;
|
|
72
|
+
/** Remove a tab */
|
|
73
|
+
remove: (index: number) => void;
|
|
74
|
+
/** Automatic name the next tab number */
|
|
75
|
+
nextNumber: () => void;
|
|
76
|
+
/** Delete tab element */
|
|
77
|
+
deleteElement: () => void;
|
|
78
|
+
/** Append tab element */
|
|
79
|
+
appendElement: (title?: string, callback?: Function, openTab?: boolean) => void;
|
|
80
|
+
/** Get the active tab index */
|
|
81
|
+
getActive: () => number;
|
|
82
|
+
/** Update the content of a tab */
|
|
83
|
+
updateContent: (index: number, newContent: string) => void;
|
|
84
|
+
/** Update tab position */
|
|
85
|
+
updatePosition: (from: number, to: number, ignoreEvents?: boolean) => void;
|
|
86
|
+
/** Update DOM position */
|
|
87
|
+
move: (from: number, to: number, ignoreEvents?: boolean, openTab?: boolean) => void;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
interface Tabs {
|
|
92
|
+
(): any
|
|
93
|
+
[key: string]: any
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
declare function Tabs<Tabs>(props: Component.Options): any;
|
|
97
|
+
export default Tabs;
|
package/react/tabs/index.js
CHANGED
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
// @ts-nocheck
|
|
2
|
-
import React, { useRef, useEffect } from "react";
|
|
3
|
-
import jSuites from '../../dist/jsuites';
|
|
4
|
-
import { renderToStaticMarkup } from 'react-dom/server';
|
|
5
|
-
|
|
6
|
-
// @ts-ignore
|
|
7
|
-
export default React.forwardRef((props, mainReference) => {
|
|
8
|
-
// Dom element
|
|
9
|
-
const Ref = useRef(null);
|
|
10
|
-
|
|
11
|
-
const template = renderToStaticMarkup(props.children)
|
|
12
|
-
|
|
13
|
-
// Get the properties for the spreadsheet
|
|
14
|
-
let options = { ...props };
|
|
15
|
-
|
|
16
|
-
useEffect(() => {
|
|
17
|
-
// @ts-ignore
|
|
18
|
-
if (!Ref.current.innerHTML) {
|
|
19
|
-
Ref.current.innerHTML = template
|
|
20
|
-
|
|
21
|
-
mainReference.current = jSuites.tabs(Ref.current, options);
|
|
22
|
-
}
|
|
23
|
-
}, []);
|
|
24
|
-
|
|
25
|
-
let prop = {
|
|
26
|
-
ref: Ref,
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
return React.createElement("div", prop);
|
|
1
|
+
// @ts-nocheck
|
|
2
|
+
import React, { useRef, useEffect } from "react";
|
|
3
|
+
import jSuites from '../../dist/jsuites';
|
|
4
|
+
import { renderToStaticMarkup } from 'react-dom/server';
|
|
5
|
+
|
|
6
|
+
// @ts-ignore
|
|
7
|
+
export default React.forwardRef((props, mainReference) => {
|
|
8
|
+
// Dom element
|
|
9
|
+
const Ref = useRef(null);
|
|
10
|
+
|
|
11
|
+
const template = renderToStaticMarkup(props.children)
|
|
12
|
+
|
|
13
|
+
// Get the properties for the spreadsheet
|
|
14
|
+
let options = { ...props };
|
|
15
|
+
|
|
16
|
+
useEffect(() => {
|
|
17
|
+
// @ts-ignore
|
|
18
|
+
if (!Ref.current.innerHTML) {
|
|
19
|
+
Ref.current.innerHTML = template
|
|
20
|
+
|
|
21
|
+
mainReference.current = jSuites.tabs(Ref.current, options);
|
|
22
|
+
}
|
|
23
|
+
}, []);
|
|
24
|
+
|
|
25
|
+
let prop = {
|
|
26
|
+
ref: Ref,
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
return React.createElement("div", prop);
|
|
30
30
|
})
|