sccoreui 6.3.41 → 6.3.43
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
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
4
|
require("./App.scss");
|
|
5
|
+
// import Home from "./pages/home";
|
|
5
6
|
// import FroalaTextEditor from "./components/froala-editor/FroalaEditor";
|
|
6
7
|
// import Home from "./pages/home";
|
|
7
8
|
const App = () => {
|
package/dist/App.scss
CHANGED
|
@@ -1120,6 +1120,68 @@ button[aria-expanded="true"] {
|
|
|
1120
1120
|
}
|
|
1121
1121
|
}
|
|
1122
1122
|
|
|
1123
|
+
.p-button.list_box_button {
|
|
1124
|
+
height: auto;
|
|
1125
|
+
padding: 4px 8px;
|
|
1126
|
+
border-radius: var(--border-radius);
|
|
1127
|
+
color: var(--primary-400);
|
|
1128
|
+
svg {
|
|
1129
|
+
path {
|
|
1130
|
+
stroke: var(--primary-400);
|
|
1131
|
+
}
|
|
1132
|
+
}
|
|
1133
|
+
&:enabled {
|
|
1134
|
+
&:hover {
|
|
1135
|
+
background-color: var(--primary-25);
|
|
1136
|
+
border-radius: var(--border-radius);
|
|
1137
|
+
color: var(--primary-400);
|
|
1138
|
+
svg {
|
|
1139
|
+
path {
|
|
1140
|
+
stroke: var(--primary-400);
|
|
1141
|
+
}
|
|
1142
|
+
}
|
|
1143
|
+
}
|
|
1144
|
+
}
|
|
1145
|
+
|
|
1146
|
+
|
|
1147
|
+
}
|
|
1148
|
+
|
|
1149
|
+
.list_box_chips {
|
|
1150
|
+
display: flex;
|
|
1151
|
+
flex-wrap: wrap;
|
|
1152
|
+
align-items: center;
|
|
1153
|
+
list-style: none;
|
|
1154
|
+
margin: 0;
|
|
1155
|
+
padding: 0;
|
|
1156
|
+
gap: 8px;
|
|
1157
|
+
|
|
1158
|
+
.list_box_chip {
|
|
1159
|
+
padding:4px 8px;
|
|
1160
|
+
border: 1px solid var(--gray-200);
|
|
1161
|
+
border-radius: var(--border-radius);
|
|
1162
|
+
color: var(--gray-700);
|
|
1163
|
+
display: flex;
|
|
1164
|
+
align-items: center;
|
|
1165
|
+
font-size: 14px;
|
|
1166
|
+
svg {
|
|
1167
|
+
path {
|
|
1168
|
+
stroke: var(--gray-400);
|
|
1169
|
+
}
|
|
1170
|
+
}
|
|
1171
|
+
&:hover {
|
|
1172
|
+
border: 1px solid var(--gray-300);
|
|
1173
|
+
background-color: var(--primary-25);
|
|
1174
|
+
svg {
|
|
1175
|
+
transform: scale(1.1);
|
|
1176
|
+
cursor: pointer;
|
|
1177
|
+
path {
|
|
1178
|
+
stroke: var(--red-500);
|
|
1179
|
+
}
|
|
1180
|
+
}
|
|
1181
|
+
}
|
|
1182
|
+
}
|
|
1183
|
+
}
|
|
1184
|
+
|
|
1123
1185
|
.list_box_dropdown {
|
|
1124
1186
|
.p-listbox-header {
|
|
1125
1187
|
padding: 12px !important;
|
|
@@ -1166,16 +1228,7 @@ button[aria-expanded="true"] {
|
|
|
1166
1228
|
}
|
|
1167
1229
|
}
|
|
1168
1230
|
|
|
1169
|
-
.list_box_chips {
|
|
1170
|
-
display: inline-block;
|
|
1171
|
-
align-items: center;
|
|
1172
|
-
list-style: none;
|
|
1173
1231
|
|
|
1174
|
-
li {
|
|
1175
|
-
float: left;
|
|
1176
|
-
height: 24px;
|
|
1177
|
-
}
|
|
1178
|
-
}
|
|
1179
1232
|
|
|
1180
1233
|
/////// Custom list_box_dropdown ///////////
|
|
1181
1234
|
|
|
@@ -2169,16 +2222,7 @@ button[aria-expanded="true"] {
|
|
|
2169
2222
|
}
|
|
2170
2223
|
}
|
|
2171
2224
|
|
|
2172
|
-
.list_box_chips {
|
|
2173
|
-
display: inline-block;
|
|
2174
|
-
align-items: center;
|
|
2175
|
-
list-style: none;
|
|
2176
2225
|
|
|
2177
|
-
li {
|
|
2178
|
-
float: left;
|
|
2179
|
-
height: 24px;
|
|
2180
|
-
}
|
|
2181
|
-
}
|
|
2182
2226
|
|
|
2183
2227
|
/////// Custom list_box_dropdown ///////////
|
|
2184
2228
|
|
|
@@ -2889,3 +2933,5 @@ button[aria-expanded="true"] {
|
|
|
2889
2933
|
}
|
|
2890
2934
|
}
|
|
2891
2935
|
}
|
|
2936
|
+
|
|
2937
|
+
// listbox styles
|
package/dist/assets/sccoreui.css
CHANGED
|
@@ -5909,7 +5909,7 @@ a {
|
|
|
5909
5909
|
.p-dialog .p-dialog-content {
|
|
5910
5910
|
background: #ffffff;
|
|
5911
5911
|
color: #495057;
|
|
5912
|
-
padding: 24px;
|
|
5912
|
+
padding: 20px 24px 24px 24px;
|
|
5913
5913
|
}
|
|
5914
5914
|
.p-dialog .p-dialog-content:last-of-type {
|
|
5915
5915
|
border-bottom-right-radius: var(--border-radius);
|
|
@@ -11,7 +11,9 @@ const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-co
|
|
|
11
11
|
// import { Checkbox } from "primereact/checkbox";
|
|
12
12
|
const ListBoxDropdown = ({ selectAll,
|
|
13
13
|
// onSelectAll,
|
|
14
|
-
onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId,
|
|
14
|
+
onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId,
|
|
15
|
+
// buttonClassName,
|
|
16
|
+
showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, confirmationOption, selectedOptionNone, }) => {
|
|
15
17
|
const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
|
|
16
18
|
// const [inpValue, setInpValue] = useState<any>();
|
|
17
19
|
const optionsMenuRef = (0, react_1.useRef)();
|
|
@@ -96,7 +98,7 @@ onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIc
|
|
|
96
98
|
window.removeEventListener("scroll", handleScroll);
|
|
97
99
|
};
|
|
98
100
|
}, [buttonPosition]);
|
|
99
|
-
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: className }, { children: [(0, jsx_runtime_1.jsx)(menu_1.Menu, { onShow: (e) => onShow && onShow(e), onHide: (e) => onHide && onHide(e), onFocus: (e) => onFocus && onFocus(e), popup: true, ref: optionsMenuRef,
|
|
101
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `${className}` }, { children: [(0, jsx_runtime_1.jsx)(menu_1.Menu, { onShow: (e) => onShow && onShow(e), onHide: (e) => onHide && onHide(e), onFocus: (e) => onFocus && onFocus(e), popup: true, ref: optionsMenuRef,
|
|
100
102
|
// onMouseLeave={onMouseLeaveMenu}
|
|
101
103
|
id: "popup_menu_bottom", className: menuClassName ? menuClassName : "", model: [
|
|
102
104
|
{
|
|
@@ -111,18 +113,17 @@ onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIc
|
|
|
111
113
|
? listBoxclassName
|
|
112
114
|
: "w-16rem border-none "} `, filterPlaceholder: filterPlaceholder ? filterPlaceholder : "" }), footeTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footeTemplate() })] }))),
|
|
113
115
|
},
|
|
114
|
-
] }), !showChips ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className:
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
}))] })))] })) }));
|
|
116
|
+
] }), !showChips ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: "list_box_button", link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event) })) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-wrap gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button",
|
|
117
|
+
// className={`list_box_button focus:shadow-none p-0 h-max h-auto mx-2`}
|
|
118
|
+
// link={link ? true : false}
|
|
119
|
+
icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), "aria-controls": "popup_menu_right", "aria-haspopup": true, ref: buttonRef, className: "list_box_button", text: true }), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: `list_box_chips ${chipsParentClassName}` }, { children: selectedItems &&
|
|
120
|
+
(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map((item, index) => {
|
|
121
|
+
var _a, _b;
|
|
122
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isDraggable !== undefined ? ((0, jsx_runtime_1.jsx)("li", Object.assign({ draggable: isDraggable, onDragStart: (e) => handleDragStart(e, index), onDragOver: (e) => handleDragOver(e), onDrop: (e) => handleDrop(e, index), className: `select-none ${chipClassName ? chipClassName : ""} ${showRemoveIcon ? "pr-6 relative text-gray-700" : ""}` }, { children: chipTemplate ? (chipTemplate(item)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [typeof item === "object"
|
|
123
|
+
? item[`${optionLabel}`]
|
|
124
|
+
: (_a = listItems.find((x) => x.value === item)) === null || _a === void 0 ? void 0 : _a[`${optionLabel}`], showRemoveIcon && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ onClick: () => onRemoveItem(item), className: `absolute right-0 p-1` }, { children: [" ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: showRemoveIcon, size: removeIconSize ? removeIconSize : 15 })] })))] })) }), index)) : ((0, jsx_runtime_1.jsx)("li", Object.assign({ className: `select-none ${chipClassName ? chipClassName : "list_box_chip"} ${showRemoveIcon ? "pr-6 relative" : ""}` }, { children: chipTemplate ? (chipTemplate(item)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [typeof item === "object"
|
|
125
|
+
? item[`${optionLabel}`]
|
|
126
|
+
: (_b = listItems.find((x) => x.value === item)) === null || _b === void 0 ? void 0 : _b[`${optionLabel}`], showRemoveIcon && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ onClick: () => onRemoveItem(item), className: `absolute right-0 p-1 ${removeIconClassName}` }, { children: [" ", (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: showRemoveIcon, size: removeIconSize ? removeIconSize : 15 })] })))] })) }), index)) }));
|
|
127
|
+
})) }))] })))] })) }));
|
|
127
128
|
};
|
|
128
129
|
exports.default = ListBoxDropdown;
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { ListBoxDropdownTypes } from "../types/type";
|
|
2
|
-
declare const ListBoxDropdown: ({ selectAll, onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId,
|
|
2
|
+
declare const ListBoxDropdown: ({ selectAll, onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, showChips, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus, confirmationOption, selectedOptionNone, }: ListBoxDropdownTypes) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default ListBoxDropdown;
|