sccoreui 3.5.4 → 3.5.5

package/dist/App.scss

@@ -304,4 +304,97 @@ h3 {
     align-items: center;
     display: flex;
   }
-}
+}
+
+.status_dropdown_item:before {
+  content: '';
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  transform: translateY(-50%);
+  top: 50%;
+  left: 0px;
+  border-radius: 50px;
+}
+
+.status_dropdown_item.Active::before {
+  background: #12B76A;
+}
+
+.status_dropdown_item.Inactive::before {
+  background: #F04438;
+}
+
+.status_dropdown_item.Draft::before {
+  background: #162578;
+}
+
+.custom_date_picker {
+  // padding-left: 134px;
+}
+
+.date_filter {
+  margin: 0;
+  position: absolute;
+  top: 0;
+  left: 0px;
+  background: #fff;
+  height: 100%;
+  padding: 4px 16px;
+  li {
+    height: 40px;
+    &:hover{
+      background: #F9FAFB;
+    }
+  }
+
+  .active {
+    background: #F9FAFB;
+  }
+
+  
+}
+
+div:has(ul.date_filter) .p-datepicker-group-container {
+  padding-left: 116px;
+  margin: -8px;
+}
+
+.bottom_date_filters {
+  width: calc(100% - 116px);
+  border-left: 1px solid #dee2e6;
+}
+
+div:has(ul.date_filter) .p-datepicker-group-container .p-datepicker table td>span {
+  width: 40px;
+  height: 40px;
+}
+
+// .date_item {
+//   height: 40px;
+// }
+
+div:has(ul.date_filter) .p-datepicker-group-container .p-datepicker-group {
+  width: 328px;
+  max-width: 328px;
+  padding: 8px 20px !important;
+  border: 1px solid #dee2e6;
+  border-top: 0;
+}
+
+div:has(ul.date_filter) .p-datepicker-group-container div:nth-child(2){
+  border-right: 0;
+}
+
+div:has(ul.date_filter) .p-datepicker-group-container table td {
+  padding: 0;
+
+}
+
+div:has(ul.date_filter) .p-datepicker-footer {
+  margin: -8px;
+}
+
+// div:has(ul.date_filter) .p-datepicker-group-container {
+//   padding: 0;
+// }

package/dist/components/date-picker/date-picker.js

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DatePicker = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const calendar_1 = require("primereact/calendar");
+const react_1 = require("react");
+const button_1 = require("primereact/button");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const DatePicker = (props) => {
+    const today = new Date();
+    const options = { year: 'numeric', month: 'short', day: 'numeric' };
+    const oneWeekFromToday = new Date(today);
+    oneWeekFromToday.setDate(today.getDate() + 7);
+    const formattedDate = today.toLocaleDateString('en-US', options);
+    const [fromDate, setFromDate] = (0, react_1.useState)(today);
+    const [fromDateFormate, setFromDateFormate] = (0, react_1.useState)(formattedDate);
+    const [toDateFormate, setToDateFormate] = (0, react_1.useState)('-');
+    const [propsState, setPropsState] = (0, react_1.useState)({});
+    let dateFromTo = {
+        0: null,
+        1: null,
+    };
+    const selecteDateOption = (dateType) => {
+        dateFromTo[0] = today;
+        switch (dateType) {
+            case 'Today':
+                // Default date
+                break;
+            case 'Yesterday':
+                const yesterdayFromToday = new Date(today);
+                yesterdayFromToday.setDate(today.getDate() - 1);
+                dateFromTo[0] = yesterdayFromToday;
+                dateFromTo[1] = today;
+                break;
+            case 'This week': {
+                const oneWeekFromToday = new Date(today);
+                oneWeekFromToday.setDate(today.getDate() + 7);
+                dateFromTo[1] = oneWeekFromToday;
+                break;
+            }
+            case 'Last week': {
+                const lastWeekFromToday = new Date(today);
+                lastWeekFromToday.setDate(today.getDate() - 7);
+                dateFromTo[0] = lastWeekFromToday;
+                dateFromTo[1] = today;
+                break;
+            }
+            case 'This month':
+                const oneMonthFromToday = new Date(today);
+                oneMonthFromToday.setDate(today.getDate() + 30);
+                dateFromTo[1] = oneMonthFromToday;
+                break;
+            case 'Last month':
+                const lastOneMonthFromToday = new Date(today);
+                lastOneMonthFromToday.setDate(today.getDate() - 30);
+                dateFromTo[0] = lastOneMonthFromToday;
+                dateFromTo[1] = today;
+                break;
+            case 'This year':
+                const oneYearFromToday = new Date(today);
+                oneYearFromToday.setFullYear(today.getFullYear() + 1);
+                dateFromTo[1] = oneYearFromToday;
+                break;
+            case 'Last year':
+                const lastOneYearFromToday = new Date(today);
+                lastOneYearFromToday.setFullYear(today.getFullYear() - 1);
+                dateFromTo[0] = lastOneYearFromToday;
+                dateFromTo[1] = today;
+                break;
+            case 'Custom':
+                // Default date 
+                break;
+        }
+        setFromDate(dateFromTo);
+        const formatFromDate = dateFromTo[0].toLocaleDateString('en-US', options);
+        setFromDateFormate(formatFromDate);
+        if (dateFromTo[1]) {
+            const formatToDate = dateFromTo[1].toLocaleDateString('en-US', options);
+            setToDateFormate(formatToDate);
+        }
+        else {
+            setToDateFormate('-');
+        }
+        if (props.onChange)
+            props.onChange(dateFromTo);
+    };
+    const template = () => {
+        return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-end" }, { children: [(0, jsx_runtime_1.jsxs)("ul", Object.assign({ className: "list-none date_filter" }, { children: [(0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('Today') }, { children: "Today" })), (0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('Yesterday') }, { children: "Yesterday" })), (0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('This week') }, { children: "This week" })), (0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('Last week') }, { children: "Last week" })), (0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('This month') }, { children: "This month" })), (0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('Last month') }, { children: "Last month" })), (0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('This year') }, { children: "This year" })), (0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('Last year') }, { children: "Last year" })), (0, jsx_runtime_1.jsx)("li", Object.assign({ className: "border-round-xs p-2 flex align-items-center text-gray-700 cursor-pointer ", onClick: () => selecteDateOption('Custom') }, { children: "Custom" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "bottom_date_filters pt-4 px-6 pb-2 flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: "Today", className: "bg-white text-gray-900 border-1 border-gray-300", onClick: () => selecteDateOption('Today') }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { label: `${fromDateFormate}`, className: "text-left bg-white text-gray-900 border-1 border-gray-300 mr-2 w-7rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-gray-900 text-xl" }, { children: "-" })), (0, jsx_runtime_1.jsx)(button_1.Button, { label: `${toDateFormate}`, className: "text-left bg-white text-gray-900 border-1 border-gray-300 ml-2 w-7rem" })] }))] }))] })) }));
+    };
+    const onChangeDate = (e) => {
+        setFromDate(e.value);
+        const frmD = e.value[0].toLocaleDateString('en-US', options);
+        setFromDateFormate(frmD);
+        if (e.value[1]) {
+            const toD = e.value[1].toLocaleDateString('en-US', options);
+            setToDateFormate(toD);
+        }
+        else {
+            setToDateFormate('-');
+        }
+        if (props.onChange)
+            props.onChange(e);
+    };
+    (0, react_1.useEffect)(() => {
+        const datePickerProps = {};
+        for (let key in props) {
+            switch (key) {
+                case 'iconPos':
+                    datePickerProps['iconPos'] = props.iconPos;
+                    datePickerProps['icon'] = (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: props.icon });
+                    break;
+                case 'numberOfMonths':
+                    datePickerProps['numberOfMonths'] = props.numberOfMonths;
+                    break;
+                case 'dateFormat':
+                    datePickerProps['dateFormat'] = props.dateFormat;
+                    break;
+                case 'selectionMode':
+                    datePickerProps['selectionMode'] = props.selectionMode;
+                    break;
+                case 'placeholder':
+                    datePickerProps['placeholder'] = props.placeholder;
+                    break;
+            }
+        }
+        setPropsState(datePickerProps);
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex justify-content-center w-full my-2" }, { children: (0, jsx_runtime_1.jsx)(calendar_1.Calendar, Object.assign({ showIcon: true, value: fromDate, onChange: (e) => onChangeDate(e), footerTemplate: template, className: "custom_date_picker" }, propsState)) })));
+};
+exports.DatePicker = DatePicker;
+exports.default = exports.DatePicker;

package/dist/components/multi-select-dropdown/multi-select-dropdown.js

@@ -13,7 +13,7 @@ const MultiSelectDropDown = (props) => {
         return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (props.dropdownType !== undefined && props.dropdownType === "status") ?
                 (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'select_status_prv absolute left_section_item z-5' }, { children: items.length > 0 ?
                         (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: 'p-0 m-0 list-none' }, { children: items.map((status, i) => {
-                                return (0, jsx_runtime_1.jsx)("li", { className: status.lable }, i);
+                                return (0, jsx_runtime_1.jsx)("li", { className: `${status.lable}` }, i);
                             }) }))
                         :
                             (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: 'p-0 m-0 list-none' }, { children: (0, jsx_runtime_1.jsx)("li", { className: 'all' }) })) }))
@@ -35,7 +35,7 @@ const MultiSelectDropDown = (props) => {
             setIsMoreThenOne(false);
     }, [items]);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [props.dropdownType !== '' &&
-                (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative ${(props.dropdownType !== undefined && props.dropdownType === "status") ? 'status_dropdown' : ''} ${isMoreThanOne ? `selected_multile ${`selected_num_` + items.length}` : ''}` }, { children: [(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, className: `w-full md:w-20rem` }), items.length > 0 &&
+                (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `sc_custom_multiselect flex align-items-center relative ${(props.dropdownType !== undefined && props.dropdownType === "status") ? 'status_dropdown' : ''} ${isMoreThanOne ? `selected_multile ${`selected_num_` + items.length}` : ''}` }, { children: [(0, jsx_runtime_1.jsx)(LeftSection, {}), (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", itemTemplate: props.dropdownType === 'status' ? (option) => { return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `status_dropdown_item pl-3 ${option.name}` }, { children: option.name })) })); } : '', filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, className: `w-full md:w-20rem` }), items.length > 0 &&
                             (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 &&
                                         clearIcon()] }))] })), props.dropdownType === '' &&
                 (0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, { value: items, onChange: (e) => onChange(e), options: props.options, optionLabel: "name", filter: true, placeholder: props.placeholder, display: "chip", maxSelectedLabels: props.maxSelectedLabels, className: `w-full md:w-20rem` })] }));

package/dist/index.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chart = 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.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;
 exports.Terminal = exports.StyleClass = exports.ScrollTop = exports.InplaceContent = exports.InplaceDisplay = exports.Inplace = exports.BlockUI = exports.Messages = exports.Message = exports.TieredMenu = exports.Stesp = exports.SlideMenu = 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 = void 0;
-exports.MultiSelectDropDown = void 0;
+exports.DatePicker = exports.MultiSelectDropDown = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const client_1 = tslib_1.__importDefault(require("react-dom/client"));
@@ -205,4 +205,6 @@ var terminal_1 = require("./components/terminal/terminal");
 Object.defineProperty(exports, "Terminal", { enumerable: true, get: function () { return tslib_1.__importDefault(terminal_1).default; } });
 var multi_select_dropdown_1 = require("./components/multi-select-dropdown/multi-select-dropdown");
 Object.defineProperty(exports, "MultiSelectDropDown", { enumerable: true, get: function () { return tslib_1.__importDefault(multi_select_dropdown_1).default; } });
+var date_picker_1 = require("./components/date-picker/date-picker");
+Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return tslib_1.__importDefault(date_picker_1).default; } });
 client_1.default.createRoot(document.getElementById("root")).render((0, jsx_runtime_1.jsx)(App_1.default, {}));

package/dist/types/components/date-picker/date-picker.d.ts

@@ -0,0 +1,2 @@
+export declare const DatePicker: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default DatePicker;

package/dist/types/index.d.ts

@@ -92,6 +92,7 @@ export { default as ScrollTop } from "./components/scroll-top/scrollTop";
 export { default as StyleClass } from "./components/style-class/styleClass";
 export { default as Terminal } from "./components/terminal/terminal";
 export { default as MultiSelectDropDown } from './components/multi-select-dropdown/multi-select-dropdown';
+export { default as DatePicker } from "./components/date-picker/date-picker";
 import { DropdownChangeEvent } from "primereact/dropdown";
 import { ColorPickerChangeEvent } from "primereact/colorpicker";
 import { SliderChangeEvent } from "primereact/slider";

package/package.json

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