sccoreui 5.1.7 → 5.1.9
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 +19 -2
- package/dist/components/list-box-dropdown/list-box-dropdown.js +2 -2
- package/dist/components/multi-select-dropdown/multi-select-dropdown.js +1 -1
- package/dist/components/sc-multi-select/scMultiSelect.js +10 -0
- package/dist/index.js +5 -3
- package/dist/types/components/list-box-dropdown/list-box-dropdown.d.ts +1 -1
- package/dist/types/components/sc-multi-select/scMultiSelect.d.ts +3 -0
- package/dist/types/components/types/type.d.ts +19 -0
- package/dist/types/index.d.ts +1 -0
- package/package.json +1 -1
package/dist/App.scss
CHANGED
|
@@ -302,6 +302,13 @@ code {
|
|
|
302
302
|
}
|
|
303
303
|
}
|
|
304
304
|
|
|
305
|
+
|
|
306
|
+
.multi-pl-32 {
|
|
307
|
+
padding-left: 40px;
|
|
308
|
+
border: 1px solid red;
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
|
|
305
312
|
.selected_multile {
|
|
306
313
|
.p-multiselect-token-label {
|
|
307
314
|
padding-right: 18px;
|
|
@@ -321,7 +328,11 @@ code {
|
|
|
321
328
|
}
|
|
322
329
|
}
|
|
323
330
|
|
|
324
|
-
|
|
331
|
+
.mutli_select_status {
|
|
332
|
+
.p-multiselect-label {
|
|
333
|
+
padding-left: 44px !important;
|
|
334
|
+
}
|
|
335
|
+
}
|
|
325
336
|
|
|
326
337
|
.status_dropdown.selected_multile {
|
|
327
338
|
.left_section_item {
|
|
@@ -790,4 +801,10 @@ button[aria-expanded="true"] {
|
|
|
790
801
|
}
|
|
791
802
|
}
|
|
792
803
|
|
|
793
|
-
/////// Custom list_box_dropdown ///////////
|
|
804
|
+
/////// Custom list_box_dropdown ///////////
|
|
805
|
+
|
|
806
|
+
//ScMulti Select//
|
|
807
|
+
.sc_multiSelect .p-multiselect-clear-icon {
|
|
808
|
+
right: 42px;
|
|
809
|
+
}
|
|
810
|
+
//////////////////////////////////////////////
|
|
@@ -5,7 +5,7 @@ const listbox_1 = require("primereact/listbox");
|
|
|
5
5
|
const menu_1 = require("primereact/menu");
|
|
6
6
|
const react_1 = require("react");
|
|
7
7
|
const sccoreui_1 = require("sccoreui");
|
|
8
|
-
const ListBoxDropdown = ({ onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, buttonClassName, showChilps, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle }) => {
|
|
8
|
+
const ListBoxDropdown = ({ onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, buttonClassName, showChilps, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus }) => {
|
|
9
9
|
const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
|
|
10
10
|
const optionsMenuRef = (0, react_1.useRef)();
|
|
11
11
|
const onSelectOption = (e) => {
|
|
@@ -47,7 +47,7 @@ const ListBoxDropdown = ({ onChange, footeTemplate, headerTemplate, labelIcon, l
|
|
|
47
47
|
// handleFormValues(formValues);
|
|
48
48
|
onDranghandle(newItems);
|
|
49
49
|
};
|
|
50
|
-
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, { popup: true, className: menuClassName ? menuClassName : '', ref: optionsMenuRef, model: [{
|
|
50
|
+
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(e), onHide: (e) => onHide(e), onFocus: (e) => onFocus(e), popup: true, className: menuClassName ? menuClassName : '', ref: optionsMenuRef, model: [{
|
|
51
51
|
template: () => (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: listBoxParentClassName ? listBoxParentClassName + ' list_box_dropdown' : 'list_box_dropdown' }, { children: [headerTemplate &&
|
|
52
52
|
(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: headerTemplate() }), (0, jsx_runtime_1.jsx)(listbox_1.ListBox, { itemTemplate: (option) => (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: optionTemplate ?
|
|
53
53
|
optionTemplate(option)
|
|
@@ -53,7 +53,7 @@ const MultiSelectDropDown = (props) => {
|
|
|
53
53
|
(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.panelClassName} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: { minWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '', maxWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '' }, className: `w-full md:w-20rem`, panelStyle: { width: props.panelWidth ? props.panelWidth + 'px' : '' } }), items.length > 0 &&
|
|
54
54
|
(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [isMoreThanOne && (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "selected_moreThan_one absolute z-5" }, { children: [" +", items.length - props.maxSelectedLabels] })), props.clear &&
|
|
55
55
|
clearIcon()] }))] })), props.dropdownType === 'status' &&
|
|
56
|
-
(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative status_dropdown ${
|
|
56
|
+
(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative status_dropdown ${items.length > 2 ? "mutli_select_status" : ""} ${props.className} ${items.length > 3 ? 'moreThanThreeItems' : ''}` }, { children: [(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { panelClassName: `Multi_select_dropdown_panel panel_${props.dropdownType} ${props.panelClassName} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", itemTemplate: (option) => itemTemplate(option), filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: { minWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '', maxWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '' }, className: `w-full md:w-20rem`, panelStyle: { width: props.panelWidth ? props.panelWidth + 'px' : '' } }), items.length > 0 &&
|
|
57
57
|
(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [isMoreThanOne && (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: "selected_moreThan_one absolute z-5" }, { children: [" +", items.length - props.maxSelectedLabels] })), props.clear &&
|
|
58
58
|
clearIcon()] }))] })), props.dropdownType === '' &&
|
|
59
59
|
(0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { value: items, panelClassName: `Multi_select_dropdown_panel ${props.panelClassName} ${props.hidePanelHeader !== undefined ? 'hidePanelHeader' : ''}`, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, style: { minWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '', maxWidth: props.dropdownWidth ? props.dropdownWidth + 'px' : '' }, className: `w-full md:w-20rem`, panelStyle: { width: props.panelWidth ? props.panelWidth + 'px' : '' } })] }));
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
4
|
+
const sccoreui_1 = require("sccoreui");
|
|
5
|
+
const ScMultiSelect = (props) => {
|
|
6
|
+
var _a, _b;
|
|
7
|
+
return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "w-full relative" }, { children: [(0, jsx_runtime_1.jsx)(sccoreui_1.MultiSelect, { 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, onChange: (e) => props === null || props === void 0 ? void 0 : props.onChange(e), 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) + ` ${(props === null || props === void 0 ? void 0 : props.removeChipIcon) ? 'hideChipremoveIcon' : ''} sc_multiSelect`, id: props === null || props === void 0 ? void 0 : props.id }), (props === null || props === void 0 ? void 0 : props.showSelectedCount) &&
|
|
8
|
+
(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: '68px' } }, { children: (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "px-2 bg-primary-50 border-round-sm text-base" }, { children: (((_a = props === null || props === void 0 ? void 0 : props.value) === null || _a === void 0 ? void 0 : _a.length) > 0) && `+${(_b = props === null || props === void 0 ? void 0 : props.value) === null || _b === void 0 ? void 0 : _b.length}` })) }))] })) }));
|
|
9
|
+
};
|
|
10
|
+
exports.default = ScMultiSelect;
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.
|
|
4
|
-
exports.
|
|
5
|
-
exports.useOverlayScrollListener = exports.useOverlayListener = exports.useClickOutside = exports.CustomColorPicker = exports.ListBoxDropdown = exports.FroalaTextEditor = exports.FormFields = exports.FormComponent = exports.TreeDropdownSelect = exports.DatePicker = exports.MultiSelectDropDown = exports.Terminal = void 0;
|
|
3
|
+
exports.ProgressSpinner = exports.Skeleton = exports.Chip = exports.Chips = exports.Rating = exports.InputTextarea = exports.InputSwitch = exports.InputMask = exports.SpeedDial = exports.SplitButton = exports.DataViewLayoutOptions = exports.DataView = exports.Toast = exports.InputNumber = exports.OverlayPanel = exports.Tag = exports.Carousel = exports.ToggleButton = exports.CustomSlider = exports.Card = exports.Dialog = exports.Password = exports.confirmPopup = exports.ConfirmDialog = exports.RadioButton = exports.Badge = exports.Tooltip = exports.Calendar = exports.Image = exports.AvatarGroup = exports.Avatar = exports.classNames = exports.Paginator = exports.ScMultiSelect = exports.MultiSelect = exports.FileUpload = exports.TabMenu = exports.TabPanel = exports.TabView = exports.Sidebar = exports.Column = exports.DataTable = exports.Checkbox = exports.AutoComplete = exports.ColorPicker = exports.AccordionTab = exports.Accordion = exports.InputText = exports.Dropdown = exports.Button = void 0;
|
|
4
|
+
exports.ScrollTop = exports.InplaceContent = exports.InplaceDisplay = exports.Inplace = exports.BlockUI = exports.Messages = exports.Message = exports.TieredMenu = exports.Stesp = exports.SlideMenu = exports.PanelMenu = exports.Menubar = exports.Menu = exports.Dock = exports.ContextMenu = exports.Toolbar = exports.SplitterPanel = exports.Splitter = exports.ScrollPanel = exports.Panel = exports.Fieldset = exports.DeferredContent = exports.Timeline = exports.TreeTable = exports.Tree = exports.PickList = exports.OrganizationChart = exports.OrderList = exports.DataScroller = exports.TriStateCheckbox = exports.TreeSelect = exports.SelectButton = exports.MultiStateCheckbox = exports.Mention = exports.ListBox = exports.Knob = exports.Editor = exports.CascadeSelect = exports.FilterOperator = exports.FilterMatchMode = exports.Slider = exports.Galleria = exports.SvgComponent = exports.CircleProgressComponent = exports.ProgressSteps = exports.ProgressBar = exports.Divider = exports.MegaMenu = exports.BreadCrumb = exports.Chart = void 0;
|
|
5
|
+
exports.useOverlayScrollListener = exports.useOverlayListener = exports.useClickOutside = exports.CustomColorPicker = exports.ListBoxDropdown = exports.FroalaTextEditor = exports.FormFields = exports.FormComponent = exports.TreeDropdownSelect = exports.DatePicker = exports.MultiSelectDropDown = exports.Terminal = exports.StyleClass = void 0;
|
|
6
6
|
const tslib_1 = require("tslib");
|
|
7
7
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
8
|
const client_1 = tslib_1.__importDefault(require("react-dom/client"));
|
|
@@ -38,6 +38,8 @@ var file_upload_1 = require("./components/file-upload/file-upload");
|
|
|
38
38
|
Object.defineProperty(exports, "FileUpload", { enumerable: true, get: function () { return tslib_1.__importDefault(file_upload_1).default; } });
|
|
39
39
|
var multi_select_1 = require("./components/multi-select/multi-select");
|
|
40
40
|
Object.defineProperty(exports, "MultiSelect", { enumerable: true, get: function () { return tslib_1.__importDefault(multi_select_1).default; } });
|
|
41
|
+
var scMultiSelect_1 = require("./components/sc-multi-select/scMultiSelect");
|
|
42
|
+
Object.defineProperty(exports, "ScMultiSelect", { enumerable: true, get: function () { return tslib_1.__importDefault(scMultiSelect_1).default; } });
|
|
41
43
|
var paginator_1 = require("./components/data-table/paginator");
|
|
42
44
|
Object.defineProperty(exports, "Paginator", { enumerable: true, get: function () { return tslib_1.__importDefault(paginator_1).default; } });
|
|
43
45
|
var classnames_1 = require("./components/utils/classnames");
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { ListBoxDropdownTypes } from "../types/type";
|
|
2
|
-
declare const ListBoxDropdown: ({ onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, buttonClassName, showChilps, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle }: ListBoxDropdownTypes) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const ListBoxDropdown: ({ onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, buttonClassName, showChilps, chipTemplate, chipClassName, chipsParentClassName, showRemoveIcon, removeIconSize, removeIconClassName, onRemoveItem, isDraggable, onDranghandle, onShow, onHide, onFocus }: ListBoxDropdownTypes) => import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
export default ListBoxDropdown;
|
|
@@ -216,6 +216,9 @@ export interface ListBoxDropdownTypes {
|
|
|
216
216
|
onRemoveItem?: any;
|
|
217
217
|
isDraggable?: boolean;
|
|
218
218
|
onDranghandle?: (payload: any) => void;
|
|
219
|
+
onShow?: (payload: any) => void;
|
|
220
|
+
onHide?: (payload: any) => void;
|
|
221
|
+
onFocus?: (payload: any) => void;
|
|
219
222
|
}
|
|
220
223
|
export interface DatePickerTypes {
|
|
221
224
|
value: any;
|
|
@@ -236,3 +239,19 @@ export interface DatePickerTypes {
|
|
|
236
239
|
todayButtonClassName?: any;
|
|
237
240
|
showButtonBar?: any;
|
|
238
241
|
}
|
|
242
|
+
export interface ScMultiSelectTypes {
|
|
243
|
+
optionLabel: string;
|
|
244
|
+
value: any;
|
|
245
|
+
options: any;
|
|
246
|
+
showClear?: boolean;
|
|
247
|
+
display?: "comma" | "chip";
|
|
248
|
+
removeChipIcon?: boolean;
|
|
249
|
+
onChange?: (e: any) => void;
|
|
250
|
+
placeholder?: string;
|
|
251
|
+
className?: string;
|
|
252
|
+
id?: string;
|
|
253
|
+
showSelectedCount?: boolean;
|
|
254
|
+
dropdownIcon?: string;
|
|
255
|
+
onShow?: () => void;
|
|
256
|
+
onHide?: () => void;
|
|
257
|
+
}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -12,6 +12,7 @@ export { TabView, TabPanel } from "./components/tabview/tabview";
|
|
|
12
12
|
export { default as TabMenu } from "./components/tab-menu/tab-menu";
|
|
13
13
|
export { default as FileUpload } from "./components/file-upload/file-upload";
|
|
14
14
|
export { default as MultiSelect } from "./components/multi-select/multi-select";
|
|
15
|
+
export { default as ScMultiSelect } from "./components/sc-multi-select/scMultiSelect";
|
|
15
16
|
export { default as Paginator } from "./components/data-table/paginator";
|
|
16
17
|
export { default as classNames } from "./components/utils/classnames";
|
|
17
18
|
export { default as Avatar } from "./components/avatar/avatar";
|