albinasoft-ui-package 1.1.32 → 1.1.33

package/dist/assets/css/custom-simple-select.css

@@ -0,0 +1,94 @@
+ .dropdown-menu {
+    background: white;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+  
+  .dropdown-menu::-webkit-scrollbar-thumb {
+   
+    background-color: #888;
+  }
+  
+  .dropdown-menu::-webkit-scrollbar-thumb:hover {
+    
+    background-color: #555; 
+  }
+  
+  .dropdown-menu::-webkit-scrollbar-track {
+    
+    background: transparent;
+  }
+
+/* WebKit-tabanlı tarayıcılar için */
+.dark .dropdown-menu::-webkit-scrollbar {
+  width: 8px;          
+}
+
+.dark .dropdown-menu::-webkit-scrollbar-thumb {
+  background-color: #444;  
+  border-radius: 4px;
+}
+
+.dark .dropdown-menu::-webkit-scrollbar-thumb:hover {
+  background-color: #666;
+}
+
+.dark .dropdown-menu::-webkit-scrollbar-track {
+  background: #151824;    
+}
+
+.dark .dropdown-menu {
+  scrollbar-color: #444 #151824;
+}
+    
+  .dropdown-item {
+    padding: 8px 12px;
+    cursor: pointer;
+  }
+  
+  .dropdown-item:hover {
+    background: #f1f1f1;
+  }
+  
+  .dark .dropdown-item:hover {
+    background: #151824;
+  }
+  
+  .simple-select.form-control {
+  white-space: nowrap;
+  overflow: hidden;
+  cursor: pointer;
+
+  padding: 0.5rem;
+  margin-left : 3rem;
+    display: flex;
+    align-items: center;
+   border: 1px solid var(--bs-primary);
+   border-radius: 3rem;
+   width: 300px !important;
+
+}
+
+.simple-select .selected {
+  font-weight: 600;
+  /* color:var(--bs-primary) */
+}
+
+.simple-select .icon-left,
+.simple-select .icon-right {
+  flex: none;
+  color: #6c757d;
+}
+.simple-select .icon-left {
+  margin-right: 0.5rem;
+  color:var(--bs-primary)
+}
+
+.search-input{
+    margin-left: 2rem;
+    width: 90% !important;
+    box-sizing: border-box;
+    border: none !important;
+    outline: none !important;
+}
+

package/dist/components/CustomForm.d.ts

@@ -7,6 +7,7 @@ declare enum ElementType {
     CHECKBOX = "checkbox",
     RADIO = "radio",
     SELECT = "select",
+    SIMPLESELECT = "simpleselect",
     DATETIMEPICKER = "datetimepicker",
     TEXT = "text",
     DIVIDER = "divider",
@@ -83,6 +84,23 @@ interface SelectElement {
     colClass?: string;
     onChange: (value: string | string[]) => void;
 }
+interface SimpleSelectElement {
+    required: boolean;
+    id?: string;
+    type: ElementType;
+    label: string;
+    value: string[];
+    options: {
+        id: string;
+        label: string;
+        value: string;
+    }[];
+    rowId?: number;
+    colId?: number;
+    innerRowId?: number;
+    colClass?: string;
+    onChange: (value: string | string[]) => void;
+}
 interface DateTimePickerElement {
     id?: string;
     type: ElementType;
@@ -191,7 +209,7 @@ interface FileUploaderElement {
     innerRowId?: number;
     colClass?: string;
 }
-type FormElement = InputElement | TextareaElement | CheckboxElement | RadioButtonElement | SelectElement | DateTimePickerElement | TextElement | DividerElement | RichTextboxElement | TreeViewElement | ButtonElement | AutoCompleteInputElement | PhoneElement | FileUploaderElement;
+type FormElement = InputElement | TextareaElement | CheckboxElement | RadioButtonElement | SelectElement | SimpleSelectElement | DateTimePickerElement | TextElement | DividerElement | RichTextboxElement | TreeViewElement | ButtonElement | AutoCompleteInputElement | PhoneElement | FileUploaderElement;
 interface CustomFormProps {
     elements: FormElement[];
     innerRowCustomClass?: string;

package/dist/components/CustomForm.js

@@ -82,6 +82,7 @@ var CustomTextarea_1 = __importDefault(require("./CustomTextarea"));
 var CustomCheckbox_1 = __importDefault(require("./CustomCheckbox"));
 var CustomRadioButton_1 = __importDefault(require("./CustomRadioButton"));
 var CustomSelect_1 = __importDefault(require("./CustomSelect"));
+var CustomSimpleSelect_1 = __importDefault(require("./CustomSimpleSelect"));
 var CustomDateTimePicker_1 = __importDefault(require("./CustomDateTimePicker"));
 var CustomText_1 = __importDefault(require("./CustomText"));
 var CustomDivider_1 = __importDefault(require("./CustomDivider"));
@@ -97,6 +98,7 @@ var ElementType;
     ElementType["CHECKBOX"] = "checkbox";
     ElementType["RADIO"] = "radio";
     ElementType["SELECT"] = "select";
+    ElementType["SIMPLESELECT"] = "simpleselect";
     ElementType["DATETIMEPICKER"] = "datetimepicker";
     ElementType["TEXT"] = "text";
     ElementType["DIVIDER"] = "divider";
@@ -223,7 +225,7 @@ var CustomForm = function (_a) {
                 var colId = _a[0], innerRows = _a[1];
                 return (react_1.default.createElement("div", { className: "col", key: "col-".concat(rowId, "-").concat(colId) }, Object.entries(innerRows).map(function (_a) {
                     var innerRowId = _a[0], elements = _a[1];
-                    return (react_1.default.createElement("div", { className: "row ".concat(innerRowCustomClass), key: "inner-row-".concat(rowId, "-").concat(colId, "-").concat(innerRowId) }, elements.map(function (element) { return (react_1.default.createElement("div", { className: element.colClass || "col-12", key: element.id }, element.type === ElementType.TEXT ? (react_1.default.createElement(CustomText_1.default, __assign({}, element))) : element.type === ElementType.INPUT ? (react_1.default.createElement(CustomInput_1.default, __assign({}, element))) : element.type === ElementType.TEXTAREA ? (react_1.default.createElement(CustomTextarea_1.default, __assign({}, element))) : element.type === ElementType.CHECKBOX ? (react_1.default.createElement(CustomCheckbox_1.default, __assign({}, element))) : element.type === ElementType.RADIO ? (react_1.default.createElement(CustomRadioButton_1.default, __assign({}, element))) : element.type === ElementType.SELECT ? (react_1.default.createElement(CustomSelect_1.default, __assign({}, element, { submitted: submitted }))) : element.type === ElementType.DATETIMEPICKER ? (react_1.default.createElement(CustomDateTimePicker_1.default, __assign({}, element, { submitted: submitted }))) : element.type === ElementType.DIVIDER ? (react_1.default.createElement(CustomDivider_1.default, __assign({}, element))) : element.type === ElementType.RICHTEXTBOX ? (react_1.default.createElement(CustomRichTextbox_1.default, __assign({}, element))) : element.type === ElementType.TREEVIEW ? (react_1.default.createElement(CustomTreeView_1.default, __assign({}, element))) : element.type === ElementType.BUTTON ? (react_1.default.createElement(CustomButton_1.default, __assign({}, element, { isLoading: isLoading }))) : element.type === ElementType.AUTOCOMPLETEINPUT ? (react_1.default.createElement(CustomAutocompleteInput_1.default, __assign({}, element))) : element.type === ElementType.PHONE ? (react_1.default.createElement(CustomPhoneInput_1.default, __assign({}, element))) : element.type === ElementType.FILEUPLOADER ? (
+                    return (react_1.default.createElement("div", { className: "row ".concat(innerRowCustomClass), key: "inner-row-".concat(rowId, "-").concat(colId, "-").concat(innerRowId) }, elements.map(function (element) { return (react_1.default.createElement("div", { className: element.colClass || "col-12", key: element.id }, element.type === ElementType.TEXT ? (react_1.default.createElement(CustomText_1.default, __assign({}, element))) : element.type === ElementType.INPUT ? (react_1.default.createElement(CustomInput_1.default, __assign({}, element))) : element.type === ElementType.TEXTAREA ? (react_1.default.createElement(CustomTextarea_1.default, __assign({}, element))) : element.type === ElementType.CHECKBOX ? (react_1.default.createElement(CustomCheckbox_1.default, __assign({}, element))) : element.type === ElementType.RADIO ? (react_1.default.createElement(CustomRadioButton_1.default, __assign({}, element))) : element.type === ElementType.SELECT ? (react_1.default.createElement(CustomSelect_1.default, __assign({}, element, { submitted: submitted }))) : element.type === ElementType.SIMPLESELECT ? (react_1.default.createElement(CustomSimpleSelect_1.default, __assign({}, element, { value: Array.isArray(element.value) ? element.value[0] || "" : "", onChange: function (val) { return element.onChange(val); } }))) : element.type === ElementType.DATETIMEPICKER ? (react_1.default.createElement(CustomDateTimePicker_1.default, __assign({}, element, { submitted: submitted }))) : element.type === ElementType.DIVIDER ? (react_1.default.createElement(CustomDivider_1.default, __assign({}, element))) : element.type === ElementType.RICHTEXTBOX ? (react_1.default.createElement(CustomRichTextbox_1.default, __assign({}, element))) : element.type === ElementType.TREEVIEW ? (react_1.default.createElement(CustomTreeView_1.default, __assign({}, element))) : element.type === ElementType.BUTTON ? (react_1.default.createElement(CustomButton_1.default, __assign({}, element, { isLoading: isLoading }))) : element.type === ElementType.AUTOCOMPLETEINPUT ? (react_1.default.createElement(CustomAutocompleteInput_1.default, __assign({}, element))) : element.type === ElementType.PHONE ? (react_1.default.createElement(CustomPhoneInput_1.default, __assign({}, element))) : element.type === ElementType.FILEUPLOADER ? (
                     // FILEUPLOADER elemanı için CustomFileUploader'ı render ediyoruz
                     react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(CustomFileUploader_1.default, { url: element.url, multi: element.multi, allowedTypes: element.allowedTypes, maxFile: element.maxFile, maxSize: element.maxSize, onUploadComplete: element.onUploadComplete, onRemoveUploaded: element.onRemoveUploaded, onPendingChange: element.onPendingChange, clearTrigger: element.clearTrigger, label: element.label, translations: element.translations }))) : null)); })));

package/dist/components/CustomSimpleSelect.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import "../assets/css/custom-simple-select.css";
+interface Option {
+    value: string;
+    label: string;
+}
+interface SimpleSelectProps {
+    id?: string;
+    name?: string;
+    label?: string;
+    options: Option[];
+    value: string;
+    placeholder?: string;
+    searchable?: boolean;
+    disabled?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    onChange: (value: string) => void;
+}
+declare const CustomSimpleSelect: React.FC<SimpleSelectProps>;
+export default CustomSimpleSelect;

package/dist/components/CustomSimpleSelect.js

@@ -0,0 +1,64 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+require("../assets/css/custom-simple-select.css");
+var fa_1 = require("react-icons/fa");
+var CustomSimpleSelect = function (_a) {
+    var _b;
+    var id = _a.id, name = _a.name, label = _a.label, options = _a.options, value = _a.value, _c = _a.placeholder, placeholder = _c === void 0 ? "Seçiniz..." : _c, _d = _a.searchable, searchable = _d === void 0 ? true : _d, _e = _a.disabled, disabled = _e === void 0 ? false : _e, className = _a.className, style = _a.style, onChange = _a.onChange;
+    var _f = (0, react_1.useState)(false), isOpen = _f[0], setIsOpen = _f[1];
+    var _g = (0, react_1.useState)(""), filterText = _g[0], setFilterText = _g[1];
+    var containerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(function () {
+        var handleClickOutside = function (event) {
+            if (containerRef.current &&
+                !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return function () { return document.removeEventListener("mousedown", handleClickOutside); };
+    }, []);
+    var handleSelect = function (val) {
+        onChange(val);
+        setIsOpen(false);
+        setFilterText("");
+    };
+    var displayedLabel = ((_b = options.find(function (o) { return o.value === value; })) === null || _b === void 0 ? void 0 : _b.label) || "";
+    return (react_1.default.createElement("div", { className: className, style: style, ref: containerRef },
+        label && (react_1.default.createElement("label", { htmlFor: id, className: "form-label" }, label)),
+        react_1.default.createElement("div", { className: "simple-select form-control ".concat(disabled ? "disabled" : ""), onClick: function () { return !disabled && setIsOpen(function (v) { return !v; }); } },
+            react_1.default.createElement(fa_1.FaSyncAlt, { className: "icon-left" }),
+            react_1.default.createElement("div", { className: "selected" }, displayedLabel || react_1.default.createElement("span", { className: "placeholder" }, placeholder))),
+        isOpen && (react_1.default.createElement("div", { className: "dropdown-menu show" },
+            searchable && (react_1.default.createElement("input", { type: "text", className: "form-control search-input", placeholder: "Ara...", value: filterText, onChange: function (e) { return setFilterText(e.target.value); } })),
+            react_1.default.createElement("ul", { className: "options-list" }, options
+                .filter(function (o) {
+                return o.label.toLowerCase().includes(filterText.toLowerCase());
+            })
+                .map(function (o) { return (react_1.default.createElement("li", { key: o.value, className: "dropdown-item ".concat(o.value === value ? "selected" : ""), onClick: function () { return handleSelect(o.value); } }, o.label)); }))))));
+};
+exports.default = CustomSimpleSelect;

package/dist/index.d.ts

@@ -10,6 +10,7 @@ import CustomPhoneInput from './components/CustomPhoneInput';
 import CustomRadioButton from './components/CustomRadioButton';
 import CustomRichTextbox from './components/CustomRichTextbox';
 import CustomSelect from './components/CustomSelect';
+import CustomSimpleSelect from './components/CustomSimpleSelect';
 import CustomTab from './components/CustomTab';
 import CustomText from './components/CustomText';
 import CustomTextarea from './components/CustomTextarea';
@@ -18,4 +19,4 @@ import CustomAutocompleteInput from './components/CustomAutocompleteInput';
 import CustomProgressBar from './components/CustomProgressBar';
 import CustomTimeline from './components/CustomTimeline';
 import CustomDatatable from './components/CustomDatatable';
-export { AlbinaForm, CustomButton, CustomCheckbox, CustomDateTimePicker, CustomDivider, CustomForm, CustomInput, CustomModal, CustomPhoneInput, CustomRadioButton, CustomRichTextbox, CustomSelect, CustomTab, CustomText, CustomTextarea, CustomTreeView, CustomAutocompleteInput, CustomProgressBar, CustomTimeline, CustomDatatable, };
+export { AlbinaForm, CustomButton, CustomCheckbox, CustomDateTimePicker, CustomDivider, CustomForm, CustomInput, CustomModal, CustomPhoneInput, CustomRadioButton, CustomRichTextbox, CustomSelect, CustomSimpleSelect, CustomTab, CustomText, CustomTextarea, CustomTreeView, CustomAutocompleteInput, CustomProgressBar, CustomTimeline, CustomDatatable, };

package/dist/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomDatatable = exports.CustomTimeline = exports.CustomProgressBar = exports.CustomAutocompleteInput = exports.CustomTreeView = exports.CustomTextarea = exports.CustomText = exports.CustomTab = exports.CustomSelect = exports.CustomRichTextbox = exports.CustomRadioButton = exports.CustomPhoneInput = exports.CustomModal = exports.CustomInput = exports.CustomForm = exports.CustomDivider = exports.CustomDateTimePicker = exports.CustomCheckbox = exports.CustomButton = exports.AlbinaForm = void 0;
+exports.CustomDatatable = exports.CustomTimeline = exports.CustomProgressBar = exports.CustomAutocompleteInput = exports.CustomTreeView = exports.CustomTextarea = exports.CustomText = exports.CustomTab = exports.CustomSimpleSelect = exports.CustomSelect = exports.CustomRichTextbox = exports.CustomRadioButton = exports.CustomPhoneInput = exports.CustomModal = exports.CustomInput = exports.CustomForm = exports.CustomDivider = exports.CustomDateTimePicker = exports.CustomCheckbox = exports.CustomButton = exports.AlbinaForm = void 0;
 var AlbinaForm_1 = __importDefault(require("./components/AlbinaForm"));
 exports.AlbinaForm = AlbinaForm_1.default;
 var CustomButton_1 = __importDefault(require("./components/CustomButton"));
@@ -28,6 +28,8 @@ var CustomRichTextbox_1 = __importDefault(require("./components/CustomRichTextbo
 exports.CustomRichTextbox = CustomRichTextbox_1.default;
 var CustomSelect_1 = __importDefault(require("./components/CustomSelect"));
 exports.CustomSelect = CustomSelect_1.default;
+var CustomSimpleSelect_1 = __importDefault(require("./components/CustomSimpleSelect"));
+exports.CustomSimpleSelect = CustomSimpleSelect_1.default;
 var CustomTab_1 = __importDefault(require("./components/CustomTab"));
 exports.CustomTab = CustomTab_1.default;
 var CustomText_1 = __importDefault(require("./components/CustomText"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "albinasoft-ui-package",
-  "version": "1.1.32",
+  "version": "1.1.33",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {