sccoreui 5.1.4 → 5.1.6

package/dist/App.scss

@@ -749,7 +749,7 @@ button[aria-expanded="true"] {
 
     li {
       margin: 4px 0 !important;
-      border-radius: 10px !important;
+      border-radius: 4px !important;
       padding: 8px 14px !important;
 
       .item_content {
@@ -779,4 +779,15 @@ button[aria-expanded="true"] {
     }
   }
 }
+
+.list_box_chips {
+  display: inline-block;
+  align-items: center;
+  list-style: none;
+  li {
+    float: left;
+    height: 24px;
+  }
+}
+
 /////// Custom list_box_dropdown ///////////

package/dist/components/list-box-dropdown/list-box-dropdown.js

@@ -5,15 +5,15 @@ const listbox_1 = require("primereact/listbox");
 const menu_1 = require("primereact/menu");
 const react_1 = require("react");
 const sccoreui_1 = require("sccoreui");
-const ListBoxDropdown = ({ onChange, footeTemplate, headerTemplate, labelIcon, labelIconPos, label, labelIconSize, listItems, filter, multiple, filterPlaceholder, optionLabel, listClassName, menuClassName, listBoxParentClassName, listBoxclassName, optionTemplate, values, link, className, scrollElementId, buttonClassName }) => {
-    const [selectedCities, setSelectedCities] = (0, react_1.useState)();
+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 }) => {
+    const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
     const optionsMenuRef = (0, react_1.useRef)();
     const onSelectOption = (e) => {
-        setSelectedCities(e.value);
+        setSelectedItems(e.value);
         onChange(e);
     };
     (0, react_1.useEffect)(() => {
-        setSelectedCities(values);
+        setSelectedItems(values);
     }, [values]);
     const handleScroll = (e) => {
         if (optionsMenuRef === null || optionsMenuRef === void 0 ? void 0 : optionsMenuRef.current)
@@ -26,13 +26,47 @@ const ListBoxDropdown = ({ onChange, footeTemplate, headerTemplate, labelIcon, l
                 elm.addEventListener('scroll', handleScroll);
         }
     }, []);
+    const handleDragStart = (e, index) => {
+        e.dataTransfer.setData('text/plain', index);
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+    };
+    const handleDrop = (e, targetIndex) => {
+        const draggedIndex = e.dataTransfer.getData('text/plain');
+        const newItems = [...selectedItems];
+        const draggedItem = newItems[draggedIndex];
+        newItems.splice(draggedIndex, 1);
+        newItems.splice(targetIndex, 0, draggedItem);
+        setSelectedItems(newItems);
+        // const formValues = {
+        //     values: newItems,
+        //     isValid,
+        //     formIndex: optionValueIndex
+        // }
+        // handleFormValues(formValues);
+    };
     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: [{
                             template: () => (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: listBoxParentClassName ? listBoxParentClassName + ' list_box_dropdown' : 'list_box_dropdown' }, { children: [headerTemplate &&
                                         (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 ?
                                                 optionTemplate(option)
                                                 :
-                                                    (0, jsx_runtime_1.jsx)("span", { children: option[`${optionLabel}`] }) }), listClassName: listClassName ? listClassName : '', filter: filter ? true : false, multiple: multiple ? true : false, value: selectedCities, onChange: (e) => onSelectOption(e), options: listItems, optionLabel: optionLabel, className: listBoxclassName ? listBoxclassName : '', filterPlaceholder: filterPlaceholder ? filterPlaceholder : '' }), footeTemplate &&
+                                                    (0, jsx_runtime_1.jsx)("span", { children: option[`${optionLabel}`] }) }), listClassName: listClassName ? listClassName : '', filter: filter ? true : false, multiple: multiple ? true : false, value: selectedItems, onChange: (e) => onSelectOption(e), options: listItems, optionLabel: optionLabel, className: listBoxclassName ? listBoxclassName : '', filterPlaceholder: filterPlaceholder ? filterPlaceholder : '' }), footeTemplate &&
                                         (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footeTemplate() })] }))
-                        }] }), (0, jsx_runtime_1.jsx)(sccoreui_1.Button, { type: "button", className: `focus:shadow-none ${buttonClassName}`, link: link ? true : false, icon: labelIcon ? labelIcon : '', size: labelIconSize ? labelIconSize : '', iconPos: labelIconPos ? labelIconPos : '', label: label, onClick: (event) => optionsMenuRef.current.toggle(event) })] })) }));
+                        }] }), !showChilps ?
+                    (0, jsx_runtime_1.jsx)(sccoreui_1.Button, { type: "button", className: `focus:shadow-none ${buttonClassName}`, 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)("ul", Object.assign({ className: `list_box_chips ${chipsParentClassName}` }, { children: [(0, jsx_runtime_1.jsx)("li", Object.assign({ className: `cursor-pointer min-w-max mx-2 max-w-max ${buttonClassName}` }, { children: (0, jsx_runtime_1.jsx)(sccoreui_1.Button, { type: "button", className: `focus:shadow-none p-0 h-max`, link: link ? true : false, icon: labelIcon ? labelIcon : '', size: labelIconSize ? labelIconSize : '', iconPos: labelIconPos ? labelIconPos : '', label: label, onClick: (event) => optionsMenuRef.current.toggle(event) }) })), selectedItems && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map((item, index) => {
+                                    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: `${chipClassName} ${showRemoveIcon ? 'pr-6 relative' : ''}` }, { children: chipTemplate ?
+                                                    chipTemplate(item)
+                                                    :
+                                                        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [" ", item[`${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)(sccoreui_1.SvgComponent, { icon: showRemoveIcon, size: removeIconSize ? removeIconSize : 20 })] }))] }) }))
+                                            :
+                                                (0, jsx_runtime_1.jsx)("li", Object.assign({ className: `${chipClassName} ${showRemoveIcon ? 'pr-6 relative' : ''}` }, { children: chipTemplate ?
+                                                        chipTemplate(item)
+                                                        :
+                                                            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [" ", item[`${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)(sccoreui_1.SvgComponent, { icon: showRemoveIcon, size: removeIconSize ? removeIconSize : 20 })] }))] }) })) }));
+                                }))] }))] })) }));
 };
 exports.default = ListBoxDropdown;

package/dist/types/components/list-box-dropdown/list-box-dropdown.d.ts

@@ -1,3 +1,3 @@
 import { ListBoxDropdownTypes } from "../types/type";
-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 }: ListBoxDropdownTypes) => import("react/jsx-runtime").JSX.Element;
+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 }: ListBoxDropdownTypes) => import("react/jsx-runtime").JSX.Element;
 export default ListBoxDropdown;

package/dist/types/components/types/type.d.ts

@@ -206,6 +206,15 @@ export interface ListBoxDropdownTypes {
     className?: string;
     scrollElementId?: string;
     buttonClassName?: string;
+    showChilps?: boolean;
+    chipsParentClassName?: string;
+    chipClassName?: string;
+    chipTemplate?: any;
+    showRemoveIcon?: string;
+    removeIconSize?: number;
+    removeIconClassName?: any;
+    onRemoveItem?: any;
+    isDraggable?: boolean;
 }
 export interface DatePickerTypes {
     value: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sccoreui",
-  "version": "5.1.4",
+  "version": "5.1.6",
   "description": "ui-sccore",
   "main": "./dist/index.js",
   "module": "./dist/index.js",