sccoreui 2.1.3 → 2.1.4

package/dist/assets/sccoreui.css

@@ -849,7 +849,8 @@ a {
     box-shadow 0.2s;
   border-radius: 8px;
   box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
-  padding: 10px 14px;
+  padding: 5px 10px 0px 15px;
+  height: 40px;
 }
 .p-inputgroup > .p-dropdown {
   background: #ffffff;
@@ -921,6 +922,7 @@ a {
   color: #444b74;
   height: 20px;
   width: 20px;
+  padding-top: 6px;
 }
 .p-inputgroup > .p-dropdown .p-dropdown-trigger {
   width: 1rem;

package/dist/components/toast/toast.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const toast_1 = require("primereact/toast");
+exports.default = toast_1.Toast;

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputNumber = exports.OverlayPanel = exports.Tag = exports.Carousel = exports.ToggleButton = exports.Slider = 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.Toast = exports.InputNumber = exports.OverlayPanel = exports.Tag = exports.Carousel = exports.ToggleButton = exports.Slider = 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;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const client_1 = tslib_1.__importDefault(require("react-dom/client"));
@@ -76,4 +76,6 @@ var overlay_panel_1 = require("./components/overlays/overlay-panel");
 Object.defineProperty(exports, "OverlayPanel", { enumerable: true, get: function () { return tslib_1.__importDefault(overlay_panel_1).default; } });
 var input_number_1 = require("./components/input/input-number");
 Object.defineProperty(exports, "InputNumber", { enumerable: true, get: function () { return tslib_1.__importDefault(input_number_1).default; } });
+var toast_1 = require("./components/toast/toast");
+Object.defineProperty(exports, "Toast", { enumerable: true, get: function () { return tslib_1.__importDefault(toast_1).default; } });
 client_1.default.createRoot(document.getElementById('root')).render((0, jsx_runtime_1.jsx)(App_1.default, {}));

package/dist/pages/color-picker/color-picker.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colorpicker_1 = require("primereact/colorpicker");
+const button_1 = require("primereact/button");
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const ColorPickerComponent = () => {
+    const [color, setColor] = (0, react_1.useState)();
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "card flex justify-content-center", children: [(0, jsx_runtime_1.jsx)(colorpicker_1.ColorPicker, { value: color, onChange: (e) => setColor(e.value) }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "p-0 gap-1", link: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "user" }), label: "Add User" })] }));
+};
+exports.default = ColorPickerComponent;

package/dist/pages/dropdown/dropdown-component.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dropdown_1 = require("primereact/dropdown");
+// import { Button } from 'primereact/button';
+const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
+const react_1 = require("react");
+const DropdownComponent = () => {
+    const [selectedValue, setSelectedValue] = (0, react_1.useState)(null);
+    // Dropdown options
+    const members = [
+        { name: "Phoenix Baker", at: "@phoenix" },
+        { name: "Olivia Rhye", at: "@olivia" },
+        { name: "Lana Steiner", at: "@lana" },
+        { name: "Demi Wilkinson", at: "@demi" },
+        { name: "Candice Wu", at: "@candice" },
+        { name: "Natali Craig", at: "@natali" },
+        { name: "Drew Cano", at: "@drew" },
+    ];
+    const handleDropdownChange = (e) => {
+        setSelectedValue(e.value);
+    };
+    // const userIcon = <SvgIcon iconName="user" />
+    // Item Template to display the options in the dropdown pannel
+    const itemTemplate = (option, isIcon) => {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-content-between align-items-center", children: [(0, jsx_runtime_1.jsxs)("span", { className: "flex align-items-center gap-2", children: [isIcon && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "user" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium text-gray-900 text-lg", children: option.name }), (0, jsx_runtime_1.jsx)("span", { className: "font-normal text-gray-600 text-lg", children: option.at })] }), selectedValue && selectedValue.name === option.name && ((0, jsx_runtime_1.jsx)("i", { className: "pi pi-check text-primary-600" }))] }));
+    };
+    // Value Template to display value in the dropdown after selecting an option from the dropdown.
+    const selectedOptionTemplate = (option, isIcon, props) => {
+        if (option) {
+            return ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-content-between align-items-center", children: (0, jsx_runtime_1.jsxs)("span", { className: "flex align-items-center gap-2", children: [isIcon && (0, jsx_runtime_1.jsx)(svg_component_1.default, { iconName: "user" }), (0, jsx_runtime_1.jsx)("span", { className: "font-medium text-gray-900 text-lg", children: option.name }), (0, jsx_runtime_1.jsx)("span", { className: "font-normal text-gray-600 text-lg", children: option.at })] }) }));
+        }
+        return (0, jsx_runtime_1.jsx)("span", { children: props.placeholder });
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { children: "Dropdown Component" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex align-items-center gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "card flex flex-column justify-content-between ml-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-base font-medium text-gray-700 h-auto mb-1", children: "Team member" }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedValue, onChange: handleDropdownChange, options: members, optionLabel: "name", valueTemplate: (option, props) => selectedOptionTemplate(option, false, props), placeholder: "Select team member", className: "w-20rem", itemTemplate: (options) => itemTemplate(options, false) }), (0, jsx_runtime_1.jsx)("p", { className: "font-normal text-base h-1rem mt-2 text-gray-600", children: "This is a hint text to help user." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "card flex flex-column justify-content-between ml-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-base font-medium text-gray-700 h-auto mb-1", children: "Team member" }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedValue, onChange: handleDropdownChange, options: members, optionLabel: "name", valueTemplate: (option, props) => selectedOptionTemplate(option, true, props), placeholder: "Select team member", className: "w-20rem", itemTemplate: (options) => itemTemplate(options, true) }), (0, jsx_runtime_1.jsx)("p", { className: "font-normal text-base h-1rem mt-2 text-gray-600", children: "This is a hint text to help user." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "card flex flex-column justify-content-between ml-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-base font-medium text-gray-700 h-auto mb-1", children: "Team member" }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedValue, onChange: handleDropdownChange, options: members, optionLabel: "name", valueTemplate: (option, props) => selectedOptionTemplate(option, false, props), placeholder: "Select team member", className: "w-20rem p-invalid", itemTemplate: (options) => itemTemplate(options, false) }), (0, jsx_runtime_1.jsx)("p", { className: "font-normal text-base h-1rem mt-2 p-error", children: "This is an error message." })] }), (0, jsx_runtime_1.jsxs)("div", { className: "card flex flex-column justify-content-between ml-2", children: [(0, jsx_runtime_1.jsx)("label", { className: "text-base font-medium text-gray-700 h-auto mb-1", children: "Team member" }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { disabled: true, onChange: handleDropdownChange, options: members, optionLabel: "name", placeholder: "Select team member", className: "w-20rem", itemTemplate: (options) => itemTemplate(options, false) }), (0, jsx_runtime_1.jsx)("p", { className: "font-normal text-base h-1rem mt-2 text-gray-600", children: "This is a hint text to help user." })] })] })] }));
+};
+exports.default = DropdownComponent;

package/dist/pages/home.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_router_dom_1 = require("react-router-dom");
+const dropdown_component_1 = tslib_1.__importDefault(require("./dropdown/dropdown-component"));
+const input_text_1 = tslib_1.__importDefault(require("./input/input-text"));
+const color_picker_1 = tslib_1.__importDefault(require("./color-picker/color-picker"));
+const Home = () => {
+    return ((0, jsx_runtime_1.jsx)(react_router_dom_1.BrowserRouter, { children: (0, jsx_runtime_1.jsxs)(react_router_dom_1.Routes, { children: [(0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/dropdown", element: (0, jsx_runtime_1.jsx)(dropdown_component_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/input", element: (0, jsx_runtime_1.jsx)(input_text_1.default, {}) }), (0, jsx_runtime_1.jsx)(react_router_dom_1.Route, { path: "/color-picker", element: (0, jsx_runtime_1.jsx)(color_picker_1.default, {}) })] }) }));
+};
+exports.default = Home;

package/dist/pages/input/input-text.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dropdown_1 = require("primereact/dropdown");
+const react_1 = require("react");
+const InputComponent = () => {
+    const [selectedCity, setSelectedCity] = (0, react_1.useState)(null);
+    const cities = [
+        { name: 'New York', code: 'NY' },
+        { name: 'Rome', code: 'RM' },
+        { name: 'London', code: 'LDN' },
+        { name: 'Istanbul', code: 'IST' },
+        { name: 'Paris', code: 'PRS' }
+    ];
+    const optionTemplate = (option) => {
+        return ((0, jsx_runtime_1.jsxs)("div", { className: "dropdown-option", children: [(0, jsx_runtime_1.jsx)("span", { children: option.name }), selectedCity && selectedCity.code === option.code && ((0, jsx_runtime_1.jsx)("i", { className: "pi pi-check selected-icon" }))] }));
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { className: "card flex justify-content-center", children: (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: selectedCity, onChange: (e) => setSelectedCity(e.value), options: cities, optionLabel: "name", placeholder: "Select a City", className: "w-full md:w-14rem", itemTemplate: optionTemplate }) }));
+};
+exports.default = InputComponent;

package/dist/pages/types/type.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,2 @@
+import { Toast } from 'primereact/toast';
+export default Toast;

package/dist/types/index.d.ts

@@ -36,4 +36,5 @@ export { default as Carousel } from './components/carousel/carousel';
 export { default as Tag } from './components/carousel/tag';
 export { default as OverlayPanel } from './components/overlays/overlay-panel';
 export { default as InputNumber } from './components/input/input-number';
+export { default as Toast } from './components/toast/toast';
 export type { DropdownChangeEvent, CarouselResponsiveOption, ColorPickerChangeEvent, SliderChangeEvent };

package/dist/types/pages/color-picker/color-picker.d.ts

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

package/dist/types/pages/dropdown/dropdown-component.d.ts

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

package/dist/types/pages/home.d.ts

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

package/dist/types/pages/input/input-text.d.ts

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

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

@@ -0,0 +1,4 @@
+export interface City {
+    name: string;
+    code: string;
+}

package/package.json

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