sccoreui 2.2.9 → 2.3.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/dist/App.scss +13 -15
- package/dist/assets/flex.css +845 -404
- package/dist/assets/sccoreui.css +457 -230
- package/dist/assets/theme.css +2 -2
- package/dist/components/breadcrumb/breacrumb.js +4 -0
- package/dist/directives/svg-icons.js +170 -0
- package/dist/pages/breadcrumb/breadcrumb.js +12 -0
- package/dist/pages/button/button.js +10 -0
- package/dist/pages/button-group/button-group.js +10 -0
- package/dist/pages/chart/chart.js +257 -0
- package/dist/pages/home.js +9 -1
- package/dist/pages/paginator/pagination.js +123 -0
- package/dist/pages/progress-steps/progress-steps.js +44 -0
- package/dist/pages/shadows/shadows.js +7 -0
- package/dist/pages/tabs/tabs.js +9 -0
- package/dist/pages/tooltip/tooltip.js +1 -1
- package/dist/types/components/breadcrumb/breacrumb.d.ts +2 -0
- package/dist/types/pages/breadcrumb/breadcrumb.d.ts +2 -0
- package/dist/types/pages/button/button.d.ts +2 -0
- package/dist/types/pages/button-group/button-group.d.ts +2 -0
- package/dist/types/pages/chart/chart.d.ts +2 -0
- package/dist/types/pages/paginator/pagination.d.ts +2 -0
- package/dist/types/pages/progress-steps/progress-steps.d.ts +2 -0
- package/dist/types/pages/shadows/shadows.d.ts +2 -0
- package/dist/types/pages/tabs/tabs.d.ts +3 -0
- package/package.json +1 -1
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const react_1 = require("react");
|
|
6
|
+
const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
|
|
7
|
+
const paginator_1 = require("primereact/paginator");
|
|
8
|
+
const ripple_1 = require("primereact/ripple");
|
|
9
|
+
const utils_1 = require("primereact/utils");
|
|
10
|
+
const button_1 = require("primereact/button");
|
|
11
|
+
require("./pagination.scss");
|
|
12
|
+
function TemplateDemo() {
|
|
13
|
+
const [first, setFirst] = (0, react_1.useState)([0, 0, 0]);
|
|
14
|
+
const [rows, setRows] = (0, react_1.useState)([10, 10, 10]);
|
|
15
|
+
const [first1, setFirst1] = (0, react_1.useState)(0);
|
|
16
|
+
const [rows1, setRows1] = (0, react_1.useState)(10);
|
|
17
|
+
const onPageChange1 = (event) => {
|
|
18
|
+
setFirst1(event.first);
|
|
19
|
+
setRows1(event.rows);
|
|
20
|
+
};
|
|
21
|
+
const onPageChange = (e, index) => {
|
|
22
|
+
setFirst(first.map((f, i) => (index === i ? e.first : f)));
|
|
23
|
+
setRows(rows.map((r, i) => (index === i ? e.rows : r)));
|
|
24
|
+
};
|
|
25
|
+
const template1 = {
|
|
26
|
+
layout: 'PrevPageLink PageLinks CurrentPageReport NextPageLink ',
|
|
27
|
+
PrevPageLink: (options) => {
|
|
28
|
+
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-gray-300 mr-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-left-gray-700" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
|
|
29
|
+
},
|
|
30
|
+
PageLinks: (options) => {
|
|
31
|
+
console.log(options);
|
|
32
|
+
if ((options.view.startPage === options.page && options.view.startPage !== 0) || (options.view.endPage === options.page && options.page + 1 !== options.totalPages)) {
|
|
33
|
+
const className = (0, utils_1.classNames)(options.className, { 'p-disabled': true });
|
|
34
|
+
return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: className, style: { userSelect: 'none' } }, { children: "..." })));
|
|
35
|
+
}
|
|
36
|
+
return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", className: options.className, onClick: options.onClick }, { children: [options.page + 1, (0, jsx_runtime_1.jsx)(ripple_1.Ripple, {})] })));
|
|
37
|
+
},
|
|
38
|
+
NextPageLink: (options) => {
|
|
39
|
+
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-gray-300 ml-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-gray-700" })] })));
|
|
40
|
+
},
|
|
41
|
+
CurrentPageReport: (options) => {
|
|
42
|
+
console.log(options);
|
|
43
|
+
return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: { color: 'var(--gray-700)', userSelect: 'none', width: '120px', textAlign: 'center' }, className: "flex md:hidden line-height-2 text-base" }, { children: ["Page ", options.first, " of ", options.totalRecords] })));
|
|
44
|
+
}
|
|
45
|
+
};
|
|
46
|
+
const template2 = {
|
|
47
|
+
layout: 'PrevPageLink PageLinks CurrentPageReport NextPageLink',
|
|
48
|
+
PrevPageLink: (options) => {
|
|
49
|
+
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-gray-300 mr-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-left-gray-700" }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
|
|
50
|
+
},
|
|
51
|
+
PageLinks: (options) => {
|
|
52
|
+
console.log(options);
|
|
53
|
+
if ((options.view.startPage === options.page && options.view.startPage !== 0) || (options.view.endPage === options.page && options.page + 1 !== options.totalPages)) {
|
|
54
|
+
const className = (0, utils_1.classNames)(options.className, { 'p-disabled': true });
|
|
55
|
+
return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: className }, { children: "..." })));
|
|
56
|
+
}
|
|
57
|
+
return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", className: options.className, onClick: options.onClick }, { children: [options.page + 1, (0, jsx_runtime_1.jsx)(ripple_1.Ripple, {})] })));
|
|
58
|
+
},
|
|
59
|
+
NextPageLink: (options) => {
|
|
60
|
+
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 px-4 py-2 border-gray-300 ml-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-gray-700" })] })));
|
|
61
|
+
},
|
|
62
|
+
CurrentPageReport: (options) => {
|
|
63
|
+
console.log(options);
|
|
64
|
+
return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: { color: 'var(--gray-700)', userSelect: 'none', width: '120px', textAlign: 'center' }, className: "flex md:hidden line-height-2 text-base" }, { children: ["Page ", options.first, " of ", options.totalRecords] })));
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
const template3 = {
|
|
68
|
+
layout: ' CurrentPageReport PrevPageLink NextPageLink',
|
|
69
|
+
PrevPageLink: (options) => {
|
|
70
|
+
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-gray-300 ml-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "md:hidden flex" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-left-gray-700" }) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
|
|
71
|
+
},
|
|
72
|
+
NextPageLink: (options) => {
|
|
73
|
+
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 px-4 py-2 border-gray-300 ml-3", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "md:hidden flex" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-gray-700" }) }))] })));
|
|
74
|
+
},
|
|
75
|
+
CurrentPageReport: (options) => {
|
|
76
|
+
return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: { color: 'var(--gray-700)', userSelect: 'none', width: '120px', textAlign: 'center' }, className: " line-height-2 text-base" }, { children: ["Page ", options.first, " of ", options.totalRecords] })));
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
const template4 = {
|
|
80
|
+
layout: 'PrevPageLink NextPageLink CurrentPageReport',
|
|
81
|
+
PrevPageLink: (options) => {
|
|
82
|
+
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-gray-300 mr-3", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-left-gray-700" }) }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
|
|
83
|
+
},
|
|
84
|
+
NextPageLink: (options) => {
|
|
85
|
+
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 px-4 py-2 border-gray-300 mr-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-gray-700" }) })] })));
|
|
86
|
+
},
|
|
87
|
+
CurrentPageReport: (options) => {
|
|
88
|
+
console.log(options);
|
|
89
|
+
return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: { color: 'var(--gray-700)', userSelect: 'none', width: '120px', textAlign: 'center' }, className: " line-height-2 text-base" }, { children: ["Page ", options.first, " of ", options.totalRecords] })));
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
const template5 = {
|
|
93
|
+
layout: 'PrevPageLink CurrentPageReport NextPageLink ',
|
|
94
|
+
PrevPageLink: (options) => {
|
|
95
|
+
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-gray-300 mr-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-left-gray-700" }) }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
|
|
96
|
+
},
|
|
97
|
+
NextPageLink: (options) => {
|
|
98
|
+
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 px-4 py-2 border-gray-300 ml-auto", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-gray-700" }) })] })));
|
|
99
|
+
},
|
|
100
|
+
CurrentPageReport: (options) => {
|
|
101
|
+
console.log(options);
|
|
102
|
+
return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: { color: 'var(--gray-700)', userSelect: 'none', width: '120px', textAlign: 'center' }, className: " line-height-2 text-base" }, { children: ["Page ", options.first, " of ", options.totalRecords] })));
|
|
103
|
+
}
|
|
104
|
+
};
|
|
105
|
+
const template6 = {
|
|
106
|
+
layout: 'PrevPageLink PageLinks NextPageLink ',
|
|
107
|
+
PrevPageLink: (options) => {
|
|
108
|
+
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-noround-right border-gray-300 ", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-left-gray-700" }) }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Previous" }))] })));
|
|
109
|
+
},
|
|
110
|
+
PageLinks: (options) => {
|
|
111
|
+
if ((options.view.startPage === options.page && options.view.startPage !== 0) || (options.view.endPage === options.page && options.page + 1 !== options.totalPages)) {
|
|
112
|
+
const className = (0, utils_1.classNames)(options.className, { 'p-disabled': false }, "border-1 border-left-none border-gray-300");
|
|
113
|
+
return ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: className, style: { userSelect: 'none' } }, { children: "..." })));
|
|
114
|
+
}
|
|
115
|
+
return ((0, jsx_runtime_1.jsxs)("button", Object.assign({ type: "button", className: `${options.className} border-1 border-left-none border-gray-300`, onClick: options.onClick }, { children: [options.page + 1, (0, jsx_runtime_1.jsx)(ripple_1.Ripple, {})] })));
|
|
116
|
+
},
|
|
117
|
+
NextPageLink: (options) => {
|
|
118
|
+
return ((0, jsx_runtime_1.jsxs)(button_1.Button, Object.assign({ type: "button", className: "bg-white border-1 border-noround-left border-left-none px-4 py-2 border-gray-300 ", onClick: options.onClick, disabled: options.disabled }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-3 text-gray-700 md:flex hidden" }, { children: "Next" })), (0, jsx_runtime_1.jsx)("span", { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "arrow-right-gray-700" }) })] })));
|
|
119
|
+
},
|
|
120
|
+
};
|
|
121
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Input" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-10 ml-auto mr-auto grid" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { className: "bg-square", template: template1, first: first[0], rows: rows[0], totalRecords: 100, onPageChange: (e) => onPageChange(e, 0) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { template: template2, first: first[0], rows: rows[0], totalRecords: 100, onPageChange: (e) => onPageChange(e, 0) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { template: template3, first: first[0], rows: rows[0], totalRecords: 100, onPageChange: (e) => onPageChange(e, 0) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { template: template4, first: first[0], rows: rows[0], totalRecords: 100, onPageChange: (e) => onPageChange(e, 0) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { template: template5, first: first[0], rows: rows[0], totalRecords: 100, onPageChange: (e) => onPageChange(e, 0) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { className: "paginator-boxes", template: template6, first: first[0], rows: rows[0], totalRecords: 100, onPageChange: (e) => onPageChange(e, 0) }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 " }, { children: (0, jsx_runtime_1.jsx)(paginator_1.Paginator, { first: first1, rows: rows1, totalRecords: 120, rowsPerPageOptions: [10, 20, 30], onPageChange: onPageChange1 }) }))] }))] }));
|
|
122
|
+
}
|
|
123
|
+
exports.default = TemplateDemo;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const steps_1 = require("primereact/steps");
|
|
6
|
+
const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
|
|
7
|
+
const generateTemplate = (icon, label, optionalText) => ((0, jsx_runtime_1.jsxs)("a", Object.assign({ href: "#", className: "flex flex-column justify-content-end gap-3 align-items-center z-2" }, { children: [(0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: icon }), (0, jsx_runtime_1.jsxs)("section", Object.assign({ className: "flex flex-column justify-content-center align-items-center" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-700 font-medium text-base" }, { children: label })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-gray-600 font-normal text-base" }, { children: optionalText }))] }))] })));
|
|
8
|
+
const itemsDefault = [
|
|
9
|
+
{
|
|
10
|
+
label: "Personal Details",
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
label: "Company Details",
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
label: "Confirmation",
|
|
17
|
+
},
|
|
18
|
+
];
|
|
19
|
+
const stepItemsBasic = [
|
|
20
|
+
{
|
|
21
|
+
template: generateTemplate("step-checked", "Your Details", "Please provide your name and email"),
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
template: generateTemplate("step-current", "Company Details", "A few details about your company"),
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
template: generateTemplate("step-unvisited", "Invite Your Team", "Start collaborating with your team"),
|
|
28
|
+
},
|
|
29
|
+
];
|
|
30
|
+
const stepItemsOutline = [
|
|
31
|
+
{
|
|
32
|
+
template: generateTemplate("step-checked-outline", "Your Details", "Please provide your name and email"),
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
template: generateTemplate("step-current-outline", "Company Details", "A few details about your company"),
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
template: generateTemplate("step-unvisited-outline", "Invite Your Team", "Start collaborating with your team"),
|
|
39
|
+
},
|
|
40
|
+
];
|
|
41
|
+
const ProgressStepsComponent = () => {
|
|
42
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-8" }, { children: [(0, jsx_runtime_1.jsx)(steps_1.Steps, { model: itemsDefault, readOnly: false }), (0, jsx_runtime_1.jsx)(steps_1.Steps, { model: stepItemsBasic, readOnly: false }), (0, jsx_runtime_1.jsx)(steps_1.Steps, { model: stepItemsOutline, readOnly: false })] })));
|
|
43
|
+
};
|
|
44
|
+
exports.default = ProgressStepsComponent;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
+
const ShadowComponent = () => {
|
|
5
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mb-4 mt-0" }, { children: "Input" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex w-full h-full flex-wrap align-items-center justify-content-center gap-5 my-8" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-6rem w-6rem bg-white flex align-items-center justify-content-center border-round-lg shadow-1" }, { children: "shadow-1" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-6rem w-6rem bg-white flex align-items-center justify-content-center border-round-lg shadow-2" }, { children: "shadow-2" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-6rem w-6rem bg-white flex align-items-center justify-content-center border-round-lg shadow-3" }, { children: "shadow-3" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-6rem w-6rem bg-white flex align-items-center justify-content-center border-round-lg shadow-4" }, { children: "shadow-4" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-6rem w-6rem bg-white flex align-items-center justify-content-center border-round-lg shadow-5" }, { children: "shadow-5" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-6rem w-6rem bg-white flex align-items-center justify-content-center border-round-lg shadow-6" }, { children: "shadow-6" })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-6rem w-6rem bg-white flex align-items-center justify-content-center border-round-lg shadow-7" }, { children: "shadow-7" }))] }))] }));
|
|
6
|
+
};
|
|
7
|
+
exports.default = ShadowComponent;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
+
const tabview_1 = require("primereact/tabview");
|
|
5
|
+
require("./tabs.scss");
|
|
6
|
+
const TabsComponent = () => {
|
|
7
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Tabs" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "grid w-10 ml-auto mr-auto" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-border-light " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Team" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Plan" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Email" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Integrations" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "API" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-border-light expand " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Team", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark flex flex-row md:flex-column not-expand " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "My details" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "5555555555555555555555 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Profile" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "dddddddddddddddddddddd At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Password" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "0000000000000000000000 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Team" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "344444444444444444444 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Billing" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "fghfgh At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Email" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "fgxhfgh At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "tab-badge bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "3" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Integrations" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "API" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark expand " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "tab-badge bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark not-expand border-no-radius " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details", className: "bg-primary-800" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Team" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Plan" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Email" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Integrations" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "API" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-bg-dark expand border-no-radius" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" })] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-shadow-box flex flex-row md:flex-column not-expand" }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "My details" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "5555555555555555quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Profile" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Password" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "55555555555s excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "5555555555555555555555 et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) })), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, Object.assign({ header: "Billing" }, { children: (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "m-0" }, { children: "555555555 At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus." })) }))] })) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "col-12 hidden md:flex" }, { children: (0, jsx_runtime_1.jsxs)(tabview_1.TabView, Object.assign({ className: "tab-view-shadow-box expand " }, { children: [(0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "My details" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Profile" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Password" }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: (0, jsx_runtime_1.jsxs)("span", { children: ["Notification", (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "bg-gray-100 border-round-2xl py-1 px-2 ml-2 text-gray-700" }, { children: "2" }))] }) }), (0, jsx_runtime_1.jsx)(tabview_1.TabPanel, { header: "Billing" })] })) }))] }))] }));
|
|
8
|
+
};
|
|
9
|
+
exports.default = TabsComponent;
|
|
@@ -7,7 +7,7 @@ const TooltipComponent = () => {
|
|
|
7
7
|
const content = () => {
|
|
8
8
|
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "m-0 flex flex-column gap-1 px-0 shadow-none" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "p-0 m-0 font-semibold shadow-none" }, { children: "This is a Tooltip" })), (0, jsx_runtime_1.jsxs)("p", Object.assign({ className: "p-0 m-0 font-medium shadow-none" }, { children: ["Tooltips are used to describe or identify an ", (0, jsx_runtime_1.jsx)("br", {}), " element. In most scenarios, tooltips help the user ", (0, jsx_runtime_1.jsx)("br", {}), " understand meaning, function or alt-text."] }))] })));
|
|
9
9
|
};
|
|
10
|
-
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Tooltips" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-5" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-top-dark", position: "top",
|
|
10
|
+
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("h2", Object.assign({ className: "flex bg-gray-200 p-3 justify-content-center mt-0 mb-4" }, { children: "Tooltips" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column gap-5" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-top-dark", position: "top", content: "This is a tooltip" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-top-dark pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Top" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-bottom-dark", position: "bottom", content: "This is a tooltip" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-bottom-dark pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Bottom" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-left-dark", position: "left", content: "This is a tooltip" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-left-dark pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Left" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-right-dark", position: "right", content: "This is a tooltip" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-right-dark pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Right" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-top-light", position: "top", className: "p-light-tooltip", content: "This is a tooltip" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-top-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Top" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-bottom-light", position: "bottom", className: "p-light-tooltip", content: "This is a tooltip" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-bottom-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Bottom" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-left-light", position: "left", className: "p-light-tooltip", content: "This is a tooltip" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-left-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Left" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { target: ".custom-target-icon-right-light", position: "right", className: "p-light-tooltip", content: "This is a tooltip" }), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-right-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Right" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-top", position: "top" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-top pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Top" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-bottom", position: "bottom" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-bottom pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Bottom" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-left", position: "left" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-left pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Left" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-right", position: "right" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-right pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Right" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-center gap-4" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-top-light", position: "top", className: "p-light-tooltip" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-top-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Top" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-bottom-light", position: "bottom", className: "p-light-tooltip" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-bottom-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Bottom" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-left-light", position: "left", className: "p-light-tooltip" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-left-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Left" })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-column align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, Object.assign({ target: ".custom-target-icon-content-right-light", position: "right", className: "p-light-tooltip" }, { children: content() })), (0, jsx_runtime_1.jsx)("i", { className: "custom-target-icon-content-right-light pi pi-question-circle p-text-secondary p-overlay-badge", style: { fontSize: "2rem", cursor: "pointer" } }), (0, jsx_runtime_1.jsx)("span", { children: "Right" })] }))] }))] }))] }));
|
|
11
11
|
};
|
|
12
12
|
exports.TooltipComponent = TooltipComponent;
|
|
13
13
|
exports.default = exports.TooltipComponent;
|