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.
Files changed (39) hide show
  1. package/dist/assets/sccoreui.css +26 -7
  2. package/dist/components/chips/chip.js +13 -2
  3. package/dist/components/input/input.js +0 -8
  4. package/dist/components/progress-steps/progress-steps.js +1 -1
  5. package/dist/components/sliders/sliders.js +98 -2
  6. package/dist/components/types/type.js +2 -0
  7. package/dist/directives/svg-component.js +24 -950
  8. package/dist/directives/svg-icons.js +4570 -197
  9. package/dist/pages/avatar/avatar.js +6 -6
  10. package/dist/pages/badges/badge.js +6 -6
  11. package/dist/pages/breadcrumb/breadcrumb.js +2 -2
  12. package/dist/pages/button/button.js +1 -1
  13. package/dist/pages/button-group/button-group.js +1 -1
  14. package/dist/pages/checkbox/checkbox.js +6 -6
  15. package/dist/pages/checkbox-group/checkbox-group-component.js +1 -1
  16. package/dist/pages/color-picker/color-picker.js +1 -1
  17. package/dist/pages/content-dividers/content-dividers.js +1 -1
  18. package/dist/pages/date-picker/date-picker.js +1 -1
  19. package/dist/pages/dropdown/dropdown-component.js +3 -3
  20. package/dist/pages/file-upload/file-upload.js +4 -4
  21. package/dist/pages/home.js +1 -1
  22. package/dist/pages/input/input-text.js +22 -22
  23. package/dist/pages/mega-mennu/mega-menu.js +10 -10
  24. package/dist/pages/not-found/not-found.js +1 -1
  25. package/dist/pages/paginator/pagination.js +12 -12
  26. package/dist/pages/slideout-menus/slideout-menus.js +5 -5
  27. package/dist/pages/sliders/slider.js +2 -2
  28. package/dist/pages/tabels/table.js +5 -5
  29. package/dist/pages/tags/tags.js +19 -10
  30. package/dist/pages/toast/toast.js +5 -5
  31. package/dist/types/components/chips/chip.d.ts +3 -2
  32. package/dist/types/components/input/input.d.ts +1 -2
  33. package/dist/types/components/sliders/sliders.d.ts +2 -1
  34. package/dist/types/components/types/type.d.ts +64 -0
  35. package/dist/types/directives/svg-component.d.ts +4 -3
  36. package/dist/types/index.d.ts +3 -1
  37. package/dist/types/pages/sliders/slider.d.ts +1 -1
  38. package/dist/types/pages/types/type.d.ts +8 -0
  39. package/package.json +1 -1
@@ -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.5715rem;
2117
- margin-bottom: -0.5715rem;
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: #f4f6fd;
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 chip_1 = require("primereact/chip");
4
- exports.default = chip_1.Chip;
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, { iconName: index === currentActive
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 slider_1 = require("primereact/slider");
4
- exports.default = slider_1.Slider;
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;
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });