sccoreui 6.3.53 → 6.3.55
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.js +4 -1
- package/dist/App.scss +3 -1
- package/dist/assets/sccoreui.css +16 -14
- package/dist/components/sc-multi-select/scMultiSelect.js +33 -37
- package/dist/directives/svg-icons.js +1158 -0
- package/package.json +1 -1
package/dist/App.js
CHANGED
|
@@ -1,11 +1,14 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
+
// import { MultiSelect } from "primereact/multiselect";
|
|
4
5
|
require("./App.scss");
|
|
5
6
|
// import Home from "./pages/home";
|
|
6
7
|
// import FroalaTextEditor from "./components/froala-editor/FroalaEditor";
|
|
7
8
|
// import Home from "./pages/home";
|
|
9
|
+
// import { useState } from "react";
|
|
8
10
|
const App = () => {
|
|
9
|
-
|
|
11
|
+
// const [selectedCountries, setSelectedCountries] = useState(null);
|
|
12
|
+
return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "m-6" }, { children: " " })));
|
|
10
13
|
};
|
|
11
14
|
exports.default = App;
|
package/dist/App.scss
CHANGED
package/dist/assets/sccoreui.css
CHANGED
|
@@ -1769,7 +1769,7 @@ a {
|
|
|
1769
1769
|
padding-right: 1.75rem;
|
|
1770
1770
|
}
|
|
1771
1771
|
.p-multiselect .p-multiselect-label {
|
|
1772
|
-
padding: 0px
|
|
1772
|
+
padding: 0px 6px;
|
|
1773
1773
|
height: 38px;
|
|
1774
1774
|
line-height: 40px;
|
|
1775
1775
|
transition: background-color 0.2s, color 0.2s, border-color 0.2s,
|
|
@@ -1802,7 +1802,8 @@ a {
|
|
|
1802
1802
|
|
|
1803
1803
|
.p-multiselect.p-multiselect-chip
|
|
1804
1804
|
.p-multiselect-token
|
|
1805
|
-
.p-multiselect-token-icon {
|
|
1805
|
+
.p-multiselect-token-icon:hover {
|
|
1806
|
+
/* stroke: var(--gray-700); */
|
|
1806
1807
|
}
|
|
1807
1808
|
.p-multiselect.p-multiselect-chip
|
|
1808
1809
|
.p-multiselect-token
|
|
@@ -1846,17 +1847,18 @@ a {
|
|
|
1846
1847
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
1847
1848
|
}
|
|
1848
1849
|
.p-multiselect-panel .p-multiselect-header {
|
|
1849
|
-
padding:
|
|
1850
|
+
padding: 8px;
|
|
1850
1851
|
border-bottom: 1px solid #dee2e6;
|
|
1851
1852
|
color: #343a40;
|
|
1852
1853
|
background: #f8f9fa;
|
|
1853
1854
|
margin: 0;
|
|
1854
1855
|
border-top-right-radius: 6px;
|
|
1855
1856
|
border-top-left-radius: 6px;
|
|
1856
|
-
|
|
1857
|
+
gap: 5px;
|
|
1858
|
+
/* display: none; */
|
|
1857
1859
|
}
|
|
1858
1860
|
.p-multiselect-panel .p-multiselect-header .p-multiselect-filter-container {
|
|
1859
|
-
margin: 0 0.
|
|
1861
|
+
margin: 0 0.3rem;
|
|
1860
1862
|
}
|
|
1861
1863
|
.p-multiselect-panel
|
|
1862
1864
|
.p-multiselect-header
|
|
@@ -1877,13 +1879,13 @@ a {
|
|
|
1877
1879
|
color: #6c757d;
|
|
1878
1880
|
border: 0 none;
|
|
1879
1881
|
background: transparent;
|
|
1880
|
-
border-radius:
|
|
1881
|
-
transition:
|
|
1882
|
+
border-radius: 6px;
|
|
1883
|
+
transition: var(--gray-500) 0.2s, color 0.2s, box-shadow 0.2s;
|
|
1882
1884
|
}
|
|
1883
1885
|
.p-multiselect-panel .p-multiselect-header .p-multiselect-close:enabled:hover {
|
|
1884
|
-
color:
|
|
1886
|
+
color: var(--red-500);
|
|
1885
1887
|
border-color: transparent;
|
|
1886
|
-
background:
|
|
1888
|
+
background: var(--red-50);
|
|
1887
1889
|
}
|
|
1888
1890
|
.p-multiselect-panel .p-multiselect-header .p-multiselect-close:focus {
|
|
1889
1891
|
outline: 0 none;
|
|
@@ -3925,20 +3927,20 @@ a {
|
|
|
3925
3927
|
font-weight: 700;
|
|
3926
3928
|
}
|
|
3927
3929
|
.p-datatable .p-datatable-footer {
|
|
3928
|
-
background:
|
|
3930
|
+
background: #f8f9fa;
|
|
3929
3931
|
color: #343a40;
|
|
3930
|
-
border: 1px solid
|
|
3932
|
+
border: 1px solid #dee2e6;
|
|
3931
3933
|
border-width: 0 0 1px 0;
|
|
3932
3934
|
padding: 1rem 1rem;
|
|
3933
3935
|
font-weight: 700;
|
|
3934
3936
|
}
|
|
3935
3937
|
.p-datatable .p-datatable-thead > tr > th {
|
|
3936
3938
|
text-align: left;
|
|
3937
|
-
border: 1px solid
|
|
3939
|
+
border: 1px solid #edeff9;
|
|
3938
3940
|
border-width: 0 0 1px 0;
|
|
3939
3941
|
font-weight: 400;
|
|
3940
3942
|
color: #6b7094;
|
|
3941
|
-
background:
|
|
3943
|
+
background: #fbfcfe;
|
|
3942
3944
|
transition: box-shadow 0.2s;
|
|
3943
3945
|
height: 32px;
|
|
3944
3946
|
font-size: 12px;
|
|
@@ -5781,7 +5783,7 @@ a {
|
|
|
5781
5783
|
|
|
5782
5784
|
.p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
|
|
5783
5785
|
background: #ffffff;
|
|
5784
|
-
color: var(--primary-
|
|
5786
|
+
color: var(--primary-700); /* color changed */
|
|
5785
5787
|
position: relative;
|
|
5786
5788
|
transition: 500ms cubic-bezier(0.35, 0, 0.25, 1);
|
|
5787
5789
|
}
|
|
@@ -5,43 +5,39 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
5
5
|
const multiselect_1 = require("primereact/multiselect");
|
|
6
6
|
const react_1 = require("react");
|
|
7
7
|
const ScMultiSelect = (props) => {
|
|
8
|
-
var _a;
|
|
9
8
|
const multiselectElm = (0, react_1.useRef)(null);
|
|
10
|
-
const [showCount, setShowCount] =
|
|
11
|
-
const checkOverflow =
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
}, [props
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
}, [checkOverflow]);
|
|
36
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
: "noShowSelectedCount"} ${(props === null || props === void 0 ? void 0 : props.removeChipIcon) ? "hideChipremoveIcon" : ""} sc_multiSelect`, id: props === null || props === void 0 ? void 0 : props.id }), showCount !== 0 &&
|
|
44
|
-
(props === null || props === void 0 ? void 0 : props.showSelectedCount) &&
|
|
45
|
-
((_a = props === null || props === void 0 ? void 0 : props.value) === null || _a === void 0 ? void 0 : _a.length) > 2 && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "absolute top-0 h-full text-center flex align-items-center w-2rem justify-content-center", style: { right: `${(props === null || props === void 0 ? void 0 : props.showClear) ? "68px" : "40px"}` } }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ style: { top: "10px" }, className: "px-2 bg-primary-50 border-round-sm text-base" }, { children: `+${showCount - 1}` })) })))] })) }));
|
|
9
|
+
// const [showCount, setShowCount] = useState<number>(0);
|
|
10
|
+
// const checkOverflow = useCallback(() => {
|
|
11
|
+
// if (multiselectElm !== null) {
|
|
12
|
+
// const dropDownItem =
|
|
13
|
+
// multiselectElm.current.getElement().children[1].children[0];
|
|
14
|
+
// const selectedItems =
|
|
15
|
+
// multiselectElm.current.getElement().children[1].children[0].children;
|
|
16
|
+
// const containerWidth = dropDownItem.offsetWidth;
|
|
17
|
+
// let totalWidth = 0;
|
|
18
|
+
// for (let i = 0; i < selectedItems.length; i++) {
|
|
19
|
+
// totalWidth += selectedItems[i].offsetWidth; // Approximation, adjust as necessary
|
|
20
|
+
// if (totalWidth + (78 + selectedItems.length * 8) > containerWidth) {
|
|
21
|
+
// // 20px buffer for ellipsis
|
|
22
|
+
// setShowCount(selectedItems.length - i);
|
|
23
|
+
// i = selectedItems.length;
|
|
24
|
+
// } else {
|
|
25
|
+
// setShowCount(0);
|
|
26
|
+
// }
|
|
27
|
+
// }
|
|
28
|
+
// } else {
|
|
29
|
+
// setShowCount(0);
|
|
30
|
+
// }
|
|
31
|
+
// }, [props?.value, multiselectElm]);
|
|
32
|
+
// useEffect(() => {
|
|
33
|
+
// checkOverflow();
|
|
34
|
+
// }, [checkOverflow]);
|
|
35
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "relative form_field" }, { children: (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { ref: multiselectElm, selectAll: props === null || props === void 0 ? void 0 : props.selectAll, filter: props === null || props === void 0 ? void 0 : props.filter, filterIcon: props === null || props === void 0 ? void 0 : props.filterIcon, filterBy: props === null || props === void 0 ? void 0 : props.filterBy, onFilter: props === null || props === void 0 ? void 0 : props.onFilter, filterPlaceholder: props === null || props === void 0 ? void 0 : props.filterPlaceholder, filterTemplate: props === null || props === void 0 ? void 0 : props.filterTemplate, filterMatchMode: props.filterMatchMode, fixedPlaceholder: props === null || props === void 0 ? void 0 : props.fixedPlaceholder, filterLocale: props === null || props === void 0 ? void 0 : props.filterLocale, filterInputAutoFocus: props === null || props === void 0 ? void 0 : props.filterInputAutoFocus, emptyFilterMessage: props === null || props === void 0 ? void 0 : props.emptyFilterMessage, panelClassName: "sc_multiSelect_panel", onShow: props === null || props === void 0 ? void 0 : props.onShow, onHide: props === null || props === void 0 ? void 0 : props.onHide, dropdownIcon: props === null || props === void 0 ? void 0 : props.dropdownIcon, showClear: props === null || props === void 0 ? void 0 : props.showClear, display: props === null || props === void 0 ? void 0 : props.display, value: props === null || props === void 0 ? void 0 : props.value, removeIcon: "x-close", onChange: (e) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
|
|
36
|
+
yield (props === null || props === void 0 ? void 0 : props.onChange(e));
|
|
37
|
+
// if (props?.showSelectedCount) checkOverflow();
|
|
38
|
+
}), itemTemplate: (item) => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: item[props.optionLabel] }), options: props === null || props === void 0 ? void 0 : props.options, optionLabel: props === null || props === void 0 ? void 0 : props.optionLabel, placeholder: props === null || props === void 0 ? void 0 : props.placeholder, className: (props === null || props === void 0 ? void 0 : props.className) +
|
|
39
|
+
` ${(props === null || props === void 0 ? void 0 : props.showSelectedCount)
|
|
40
|
+
? "showSelectedCount"
|
|
41
|
+
: "noShowSelectedCount"} ${(props === null || props === void 0 ? void 0 : props.removeChipIcon) ? "hideChipremoveIcon" : ""} sc_multiSelect`, id: props === null || props === void 0 ? void 0 : props.id }) })) }));
|
|
46
42
|
};
|
|
47
43
|
exports.default = ScMultiSelect;
|