sccoreui 2.4.8 → 2.5.1
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/assets/sccoreui.css +26 -7
- package/dist/components/chips/chip.js +13 -2
- package/dist/components/input/input.js +0 -8
- package/dist/components/progress-steps/progress-steps.js +1 -1
- package/dist/components/sliders/sliders.js +98 -2
- package/dist/components/types/type.js +2 -0
- package/dist/directives/svg-component.js +24 -950
- package/dist/directives/svg-icons.js +4570 -197
- package/dist/pages/avatar/avatar.js +6 -6
- package/dist/pages/badges/badge.js +6 -6
- package/dist/pages/breadcrumb/breadcrumb.js +2 -2
- package/dist/pages/button/button.js +1 -1
- package/dist/pages/button-group/button-group.js +1 -1
- package/dist/pages/checkbox/checkbox.js +6 -6
- package/dist/pages/checkbox-group/checkbox-group-component.js +1 -1
- package/dist/pages/color-picker/color-picker.js +1 -1
- package/dist/pages/content-dividers/content-dividers.js +1 -1
- package/dist/pages/date-picker/date-picker.js +1 -1
- package/dist/pages/dropdown/dropdown-component.js +3 -3
- package/dist/pages/file-upload/file-upload.js +4 -4
- package/dist/pages/home.js +1 -1
- package/dist/pages/input/input-text.js +22 -22
- package/dist/pages/mega-mennu/mega-menu.js +10 -10
- package/dist/pages/not-found/not-found.js +1 -1
- package/dist/pages/paginator/pagination.js +12 -12
- package/dist/pages/slideout-menus/slideout-menus.js +5 -5
- package/dist/pages/sliders/slider.js +2 -2
- package/dist/pages/tabels/table.js +5 -5
- package/dist/pages/tags/tags.js +19 -10
- package/dist/pages/toast/toast.js +5 -5
- package/dist/types/components/chips/chip.d.ts +3 -2
- package/dist/types/components/input/input.d.ts +1 -2
- package/dist/types/components/sliders/sliders.d.ts +2 -1
- package/dist/types/components/types/type.d.ts +64 -0
- package/dist/types/directives/svg-component.d.ts +4 -3
- package/dist/types/index.d.ts +3 -1
- package/dist/types/pages/sliders/slider.d.ts +1 -1
- package/dist/types/pages/types/type.d.ts +8 -0
- package/package.json +1 -1
package/dist/assets/sccoreui.css
CHANGED
|
@@ -2113,8 +2113,8 @@ a {
|
|
|
2113
2113
|
width: 0.286rem;
|
|
2114
2114
|
}
|
|
2115
2115
|
.p-slider.p-slider-vertical .p-slider-handle {
|
|
2116
|
-
margin-left: -0.
|
|
2117
|
-
margin-bottom: -0.
|
|
2116
|
+
margin-left: -0.715rem;
|
|
2117
|
+
margin-bottom: -0.715rem;
|
|
2118
2118
|
}
|
|
2119
2119
|
.p-slider .p-slider-handle {
|
|
2120
2120
|
height: 1.5rem;
|
|
@@ -2371,6 +2371,7 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--gray-100);
|
|
|
2371
2371
|
background-color: transparent;
|
|
2372
2372
|
color: var(--gray-600);
|
|
2373
2373
|
border-color: transparent;
|
|
2374
|
+
box-shadow: none;
|
|
2374
2375
|
}
|
|
2375
2376
|
.p-button.p-button-text:enabled:hover,
|
|
2376
2377
|
.p-button.p-button-text:not(button):not(a):not(.p-disabled):hover {
|
|
@@ -2434,17 +2435,17 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--gray-100);
|
|
|
2434
2435
|
border-radius: 50%;
|
|
2435
2436
|
height: 3rem;
|
|
2436
2437
|
}
|
|
2437
|
-
.p-button.p-button-sm {
|
|
2438
|
+
/* .p-button.p-button-sm {
|
|
2438
2439
|
font-size: 0.875rem;
|
|
2439
2440
|
padding: 0.65625rem 1.09375rem;
|
|
2440
|
-
}
|
|
2441
|
+
} */
|
|
2441
2442
|
.p-button.p-button-sm .p-button-icon {
|
|
2442
2443
|
font-size: 0.875rem;
|
|
2443
2444
|
}
|
|
2444
|
-
.p-button.p-button-lg {
|
|
2445
|
+
/* .p-button.p-button-lg {
|
|
2445
2446
|
font-size: 1.25rem;
|
|
2446
2447
|
padding: 0.9375rem 1.5625rem;
|
|
2447
|
-
}
|
|
2448
|
+
} */
|
|
2448
2449
|
.p-button.p-button-lg .p-button-icon {
|
|
2449
2450
|
font-size: 1.25rem;
|
|
2450
2451
|
}
|
|
@@ -2483,13 +2484,15 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--gray-100);
|
|
|
2483
2484
|
} */
|
|
2484
2485
|
|
|
2485
2486
|
.p-fileupload .p-button {
|
|
2486
|
-
background-color:
|
|
2487
|
+
background-color: transparent;
|
|
2487
2488
|
color: var(--gray-900);
|
|
2488
2489
|
height: 48px !important;
|
|
2489
2490
|
line-height: 48px !important;
|
|
2490
2491
|
padding: 0px 22px;
|
|
2491
2492
|
border-radius: 4px;
|
|
2493
|
+
border: 1px dashed var(--gray-500);
|
|
2492
2494
|
font-size: 14px;
|
|
2495
|
+
box-shadow: none;
|
|
2493
2496
|
}
|
|
2494
2497
|
|
|
2495
2498
|
.p-fileupload .p-button .p-button-icon {
|
|
@@ -2506,6 +2509,7 @@ box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05), 0px 0px 0px 4px var(--gray-100);
|
|
|
2506
2509
|
.p-fileupload .p-button:enabled:hover,
|
|
2507
2510
|
.p-button:not(button):not(a):not(.p-disabled):hover {
|
|
2508
2511
|
color: var(--gray-900);
|
|
2512
|
+
background: var(--gray-50);
|
|
2509
2513
|
}
|
|
2510
2514
|
|
|
2511
2515
|
.p-button.p-button-secondary,
|
|
@@ -8689,6 +8693,16 @@ input[type="number"]::-webkit-outer-spin-button {
|
|
|
8689
8693
|
}
|
|
8690
8694
|
|
|
8691
8695
|
|
|
8696
|
+
.p-autocomplete.p-autocomplete-lg .p-inputtext{
|
|
8697
|
+
height: 40px;
|
|
8698
|
+
width: 320px;
|
|
8699
|
+
}
|
|
8700
|
+
|
|
8701
|
+
.p-autocomplete.p-autocomplete-xl .p-inputtext{
|
|
8702
|
+
height: 40px;
|
|
8703
|
+
width: 320px;
|
|
8704
|
+
}
|
|
8705
|
+
|
|
8692
8706
|
/* SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
|
|
8693
8707
|
|
|
8694
8708
|
|
|
@@ -8699,28 +8713,33 @@ input[type="number"]::-webkit-outer-spin-button {
|
|
|
8699
8713
|
height: 32px;
|
|
8700
8714
|
line-height: 20px;
|
|
8701
8715
|
font-size: 14px;
|
|
8716
|
+
padding: 6px 14px;
|
|
8702
8717
|
}
|
|
8703
8718
|
|
|
8704
8719
|
.p-button.p-button-sm {
|
|
8705
8720
|
height: 40px;
|
|
8706
8721
|
line-height: 20px;
|
|
8707
8722
|
font-size: 14px;
|
|
8723
|
+
padding: 10px 16px;
|
|
8708
8724
|
}
|
|
8709
8725
|
|
|
8710
8726
|
.p-button.p-button-md {
|
|
8711
8727
|
height: 44px ;
|
|
8712
8728
|
line-height: 24px ;
|
|
8713
8729
|
font-size: 16px ;
|
|
8730
|
+
padding: 10px 18px;
|
|
8714
8731
|
}
|
|
8715
8732
|
.p-button.p-button-lg {
|
|
8716
8733
|
height: 48px;
|
|
8717
8734
|
line-height: 24px;
|
|
8718
8735
|
font-size: 16px;
|
|
8736
|
+
padding: 12px 20px;
|
|
8719
8737
|
}
|
|
8720
8738
|
.p-button.p-button-xl {
|
|
8721
8739
|
height: 60px;
|
|
8722
8740
|
line-height: 28px;
|
|
8723
8741
|
font-size: 18px;
|
|
8742
|
+
padding: 16px 28px;
|
|
8724
8743
|
}
|
|
8725
8744
|
|
|
8726
8745
|
/* Default button with dual icon */
|
|
@@ -1,4 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const
|
|
4
|
-
|
|
3
|
+
const tslib_1 = require("tslib");
|
|
4
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
+
const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
|
|
6
|
+
const ChipTag = (props) => {
|
|
7
|
+
const { onRemove } = props;
|
|
8
|
+
return props.template ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.template })) : ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: !props.className
|
|
9
|
+
? "bg-gray-100 border-round-2xl flex justify-content-between align-items-center py-1 gap-2 px-3 text-gray-700"
|
|
10
|
+
: `bg-gray-100 border-round-2xl flex justify-content-between align-items-center py-1 gap-2 px-3 text-gray-700 ${props.className}` }, { children: [props.image && ((0, jsx_runtime_1.jsx)("img", { src: props.image, alt: props.imageAlt || "chip image" })), props.icon && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.icon }), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "font-medium" }, { children: props.label })), props.removable && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "cursor-pointer", onClick: (e) => {
|
|
11
|
+
const el = e.currentTarget.parentElement;
|
|
12
|
+
props.onRemove !== undefined ? onRemove : el.remove();
|
|
13
|
+
} }, { children: (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.removeIcon || (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close" }) }) })))] })));
|
|
14
|
+
};
|
|
15
|
+
exports.default = ChipTag;
|
|
@@ -1,12 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.InputComponent = void 0;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const react_1 = require("react");
|
|
6
3
|
const inputtext_1 = require("primereact/inputtext");
|
|
7
|
-
const InputComponent = () => {
|
|
8
|
-
const [value, setValue] = (0, react_1.useState)('');
|
|
9
|
-
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "card flex justify-content-center" }, { children: (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { value: value, onChange: (e) => setValue(e.target.value) }) })));
|
|
10
|
-
};
|
|
11
|
-
exports.InputComponent = InputComponent;
|
|
12
4
|
exports.default = inputtext_1.InputText;
|
|
@@ -48,7 +48,7 @@ const ProgressSteps = (props) => {
|
|
|
48
48
|
if (eachItem.action) {
|
|
49
49
|
eachItem.action();
|
|
50
50
|
}
|
|
51
|
-
} }, { children: [!icons ? ((0, jsx_runtime_1.jsx)(svg_component_1.default, {
|
|
51
|
+
} }, { children: [!icons ? ((0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: index === currentActive
|
|
52
52
|
? "step-current"
|
|
53
53
|
: index > currentActive
|
|
54
54
|
? "step-unvisited"
|
|
@@ -1,4 +1,100 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
const
|
|
4
|
-
|
|
3
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
+
const react_1 = require("react");
|
|
5
|
+
const Slider = (props) => {
|
|
6
|
+
const { min, max, orientation, range, value, indicator = true } = props;
|
|
7
|
+
const [rangeValues, setRangeValues] = (0, react_1.useState)(value);
|
|
8
|
+
const [sliderValue, setSliderValue] = (0, react_1.useState)(value);
|
|
9
|
+
const sliderRef = (0, react_1.useRef)(null);
|
|
10
|
+
if (range && typeof value === "number") {
|
|
11
|
+
throw new Error(`For a range slider value should be [number, number]. Make sure to provide a proper value.`);
|
|
12
|
+
}
|
|
13
|
+
const finalWidthValue = !range
|
|
14
|
+
? `${sliderValue}%`
|
|
15
|
+
: `${rangeValues[0] > rangeValues[1]
|
|
16
|
+
? rangeValues[0] - rangeValues[1]
|
|
17
|
+
: rangeValues[1] > rangeValues[0]
|
|
18
|
+
? rangeValues[1] - rangeValues[0]
|
|
19
|
+
: 0}%`;
|
|
20
|
+
const finalLeftValue = rangeValues[0] < rangeValues[1]
|
|
21
|
+
? `${rangeValues[0]}%`
|
|
22
|
+
: `${rangeValues[1]}%`;
|
|
23
|
+
const rangeStyles = range
|
|
24
|
+
? {
|
|
25
|
+
[orientation === "horizontal" ? "width" : "height"]: finalWidthValue,
|
|
26
|
+
[orientation === "horizontal" ? "left" : "top"]: finalLeftValue,
|
|
27
|
+
}
|
|
28
|
+
: {
|
|
29
|
+
[orientation === "horizontal" ? "width" : "height"]: `${sliderValue}%`,
|
|
30
|
+
[orientation === "vertical" ? "top" : null]: 0,
|
|
31
|
+
};
|
|
32
|
+
const handleStyles = !range
|
|
33
|
+
? { [orientation === "horizontal" ? "left" : "top"]: `${sliderValue}%` }
|
|
34
|
+
: null;
|
|
35
|
+
const mouseMoveController = (e, index) => {
|
|
36
|
+
const sliderRect = sliderRef.current.getBoundingClientRect();
|
|
37
|
+
const currentRange = Math.round((e[orientation === "horizontal" ? "clientX" : "clientY"] -
|
|
38
|
+
sliderRect[orientation === "horizontal" ? "left" : "top"]) /
|
|
39
|
+
4);
|
|
40
|
+
if (min && max) {
|
|
41
|
+
if (e[orientation === "horizontal" ? "clientX" : "clientY"] -
|
|
42
|
+
sliderRect[orientation === "horizontal" ? "left" : "top"] <
|
|
43
|
+
0 ||
|
|
44
|
+
e[orientation === "horizontal" ? "clientX" : "clientY"] -
|
|
45
|
+
sliderRect[orientation === "horizontal" ? "left" : "top"] >
|
|
46
|
+
sliderRect[orientation === "horizontal" ? "width" : "height"])
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
else {
|
|
50
|
+
if (currentRange < 0 || currentRange > 100)
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
if (range) {
|
|
54
|
+
if (index) {
|
|
55
|
+
setRangeValues((prevRanges) => [prevRanges[0], currentRange]);
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
setRangeValues((prevRanges) => [currentRange, prevRanges[1]]);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
else {
|
|
62
|
+
setSliderValue(currentRange);
|
|
63
|
+
}
|
|
64
|
+
};
|
|
65
|
+
const handleMovement = (index) => {
|
|
66
|
+
const handler = (e) => {
|
|
67
|
+
mouseMoveController(e, index);
|
|
68
|
+
};
|
|
69
|
+
document.addEventListener("mousemove", handler);
|
|
70
|
+
document.addEventListener("mouseup", () => {
|
|
71
|
+
document.removeEventListener("mousemove", handler);
|
|
72
|
+
});
|
|
73
|
+
};
|
|
74
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ "data-pc-name": "slider", "data-pc-section": "root", className: `p-slider ${orientation === "horizontal" ? "w" : "h"}-25rem p-component p-slider-${orientation}${props.className ? ` ${props.className}` : ""}`, ref: sliderRef }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "p-slider-range", "data-pc-section": "range", style: rangeStyles }), range && typeof value !== "number" ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-slider-handle p-slider-handle-start", tabIndex: 0, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": rangeValues[0], "aria-orientation": orientation, style: {
|
|
75
|
+
[orientation === "horizontal"
|
|
76
|
+
? "left"
|
|
77
|
+
: "top"]: `${rangeValues[0]}%`,
|
|
78
|
+
}, onMouseDown: () => handleMovement(0) }, { children: indicator && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
|
|
79
|
+
position: "absolute",
|
|
80
|
+
height: "40px",
|
|
81
|
+
[orientation === "vertical" ? "left" : "top"]: orientation === "horizontal" ? "-50px" : "-70px",
|
|
82
|
+
transform: `translate${orientation === "horizontal" ? "X" : "Y"}(-30%)`,
|
|
83
|
+
}, className: "px-3 bg-white border-1 border-gray-300 border-round-lg shadow-4 py-2 text-center text-lg" }, { children: [rangeValues[0], "%"] }))) })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-slider-handle p-slider-handle-end p-slider-handle-active", tabIndex: 0, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": rangeValues[1], "aria-orientation": orientation, style: {
|
|
84
|
+
[orientation === "horizontal"
|
|
85
|
+
? "left"
|
|
86
|
+
: "top"]: `${rangeValues[1]}%`,
|
|
87
|
+
}, onMouseDown: () => handleMovement(1) }, { children: indicator && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
|
|
88
|
+
position: "absolute",
|
|
89
|
+
height: "40px",
|
|
90
|
+
[orientation === "vertical" ? "left" : "top"]: orientation === "horizontal" ? "-50px" : "-70px",
|
|
91
|
+
transform: `translate${orientation === "horizontal" ? "X" : "Y"}(-30%)`,
|
|
92
|
+
}, className: "px-3 bg-white border-1 border-gray-300 border-round-lg shadow-4 py-2 text-center text-lg" }, { children: [rangeValues[1], "%"] }))) }))] })) : ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-slider-handle", role: "slider", "aria-valuenow": typeof value === "number" ? value : undefined, "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": orientation, style: handleStyles, onMouseDown: () => handleMovement() }, { children: indicator && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ style: {
|
|
93
|
+
position: "absolute",
|
|
94
|
+
height: "40px",
|
|
95
|
+
width: "60px",
|
|
96
|
+
[orientation === "vertical" ? "left" : "top"]: "-50px",
|
|
97
|
+
transform: "translateX(-30%)",
|
|
98
|
+
}, className: "px-3 bg-white border-1 border-gray-300 border-round-lg shadow-4 py-2 text-center text-lg" }, { children: [sliderValue, "%"] }))) })))] })));
|
|
99
|
+
};
|
|
100
|
+
exports.default = Slider;
|