albinasoft-ui-package 1.1.43 → 1.1.44

package/dist/assets/css/custom-treeview.css

@@ -0,0 +1,84 @@
+.form-control-unreq {
+    display: block;
+    width: 100%;
+    padding: .5rem 1rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+
+    background-color: #fff;
+    -webkit-background-clip: padding-box;
+    background-clip: padding-box;
+    border: 1px solid #131313;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    -webkit-border-radius: .25rem;
+    border-radius: .25rem;
+    -webkit-box-shadow: 0 0 0 0;
+    box-shadow: 0 0 0 0;
+    -webkit-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
+    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
+    -o-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
+
+    all: unset;
+    width: 100%;
+    padding: 0.375rem 0.75rem;
+    border: 1px solid #ccc;
+    border-radius: 0.25rem;
+}
+
+@media(prefers-reduced-motion: reduce) {
+    .form-control-unreq {
+        -webkit-transition: none;
+        -o-transition: none;
+        transition: none
+    }
+}
+
+.dark .form-control-unreq {
+    color: #A2A4A9;
+    background-color: #222738;
+    border-color: #30384f;
+    border: 1px solid rgba(255, 255, 255, .1);
+}
+
+.dark .form-control-unreq::placeholder {
+    color: #6c757d; /* Lighter shade to make it visible */
+    opacity: 1; /* Ensure the placeholder color is solid */
+}
+  
+
+.was-validated .form-control-unreq:valid:focus,
+.form-control-unreq.is-valid:focus {
+    border-color: #1aa053;
+    -webkit-box-shadow: 0 0 0rem 0rem rgba(26, 160, 83, .15);
+    box-shadow: 0 0 0rem 0rem rgba(26, 160, 83, .15)
+}
+
+.was-validated textarea.form-control-unreq:valid,
+textarea.form-control-unreq.is-valid {
+    padding-right: -webkit-calc(1.5em + 1rem);
+    padding-right: calc(1.5em + 1rem);
+    background-position: top -webkit-calc(0.375em + 0.25rem) right -webkit-calc(0.375em + 0.25rem);
+    background-position: top calc(0.375em + 0.25rem) right calc(0.375em + 0.25rem)
+}
+
+
+.treeview-input-group {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+  
+  .treeview-input-group input {
+    flex-grow: 1;
+    min-width: 0; /* Overflow kontrolü */
+  }
+  
+  .treeview-input-group button {
+    white-space: nowrap;
+  }
+  

package/dist/components/CustomForm.js

@@ -123,7 +123,7 @@ var CustomForm = function (_a) {
     var _g = (0, react_1.useState)(false), submitted = _g[0], setSubmitted = _g[1];
     var _h = (0, react_1.useState)(false), isUploading = _h[0], setIsUploading = _h[1];
     var handleConfirm = function (e) { return __awaiter(void 0, void 0, void 0, function () {
-        var form, customSelectValid, isValid, formValues_1, error_1;
+        var form, customSelectValid, customTreeViewValid, isValid, formValues_1, error_1;
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
@@ -134,16 +134,28 @@ var CustomForm = function (_a) {
                         return [2 /*return*/];
                     customSelectValid = true;
                     elements.forEach(function (element) {
-                        if (element.type === ElementType.SELECT && element.required) {
+                        if (element.type === ElementType.SELECT &&
+                            element.required) {
                             var selectElement = element;
                             // Eğer değer boş (string) veya boş array ise geçersiz kabul edin
-                            if ((Array.isArray(selectElement.value) && selectElement.value.length === 0) ||
+                            if ((Array.isArray(selectElement.value) &&
+                                selectElement.value.length === 0) ||
                                 (!Array.isArray(selectElement.value) && !selectElement.value)) {
                                 customSelectValid = false;
                             }
                         }
                     });
-                    isValid = form.checkValidity() && customSelectValid;
+                    customTreeViewValid = true;
+                    elements.forEach(function (element) {
+                        if (element.type === ElementType.TREEVIEW && element.required) {
+                            var val = element.value;
+                            var arr = Array.isArray(val) ? val : val ? [val] : [];
+                            if (arr.length === 0) {
+                                customTreeViewValid = false;
+                            }
+                        }
+                    });
+                    isValid = form.checkValidity() && customSelectValid && customTreeViewValid;
                     if (!isValid) return [3 /*break*/, 6];
                     setIsLoading(true);
                     _a.label = 1;
@@ -227,7 +239,11 @@ 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.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 ? (
+                    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, { submitted: submitted }))) : 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, onUploadingChange: setIsUploading }))) : null)); })));

package/dist/components/CustomSelect.js

@@ -32,7 +32,6 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     return to.concat(ar || Array.prototype.slice.call(from));
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-//CustomSelect.tsx
 var react_1 = __importStar(require("react"));
 var fa_1 = require("react-icons/fa");
 require("../assets/css/custom-select.css");

package/dist/components/CustomTreeView.d.ts

@@ -1,21 +1,19 @@
-import React from 'react';
+import React from "react";
+import "../assets/css/custom-treeview.css";
 export interface TreeNode {
     label: string;
     value: string;
     children?: TreeNode[];
 }
 export interface CustomTreeViewProps {
-    /** Eğer başlık göstermek isterseniz */
     label?: string;
-    /** Seçili değerin (veya çokluysa dizi halinde) prop’u */
     value: string | string[] | null;
-    /** Gösterilecek ağaç verisi */
     treeData: TreeNode[];
-    /** Input placeholder’ı */
     placeholder?: string;
-    /** Çoklu seçim modu */
     multi?: boolean;
-    /** Seçim değiştiğinde çağrılır */
+    required?: boolean;
+    submitted?: boolean;
+    errorMessage?: string;
     onChange: (selected: string | string[] | null) => void;
 }
 declare const CustomTreeView: React.FC<CustomTreeViewProps>;

package/dist/components/CustomTreeView.js

@@ -48,12 +48,12 @@ var react_1 = __importStar(require("react"));
 var SimpleTreeView_1 = require("@mui/x-tree-view/SimpleTreeView");
 var TreeItem_1 = require("@mui/x-tree-view/TreeItem");
 var fa_1 = require("react-icons/fa");
-var CustomInput_1 = __importStar(require("./CustomInput"));
+require("../assets/css/custom-treeview.css");
 var CustomTreeView = function (_a) {
-    var label = _a.label, value = _a.value, treeData = _a.treeData, _b = _a.placeholder, placeholder = _b === void 0 ? 'Ağaç Yapısını Filtrele...' : _b, _c = _a.multi, multi = _c === void 0 ? false : _c, onChange = _a.onChange;
-    var _d = (0, react_1.useState)(''), filterTerm = _d[0], setFilterTerm = _d[1];
-    var _f = (0, react_1.useState)([]), selectedItems = _f[0], setSelectedItems = _f[1];
-    var _g = (0, react_1.useState)([]), expandedItems = _g[0], setExpandedItems = _g[1];
+    var label = _a.label, value = _a.value, treeData = _a.treeData, _b = _a.placeholder, placeholder = _b === void 0 ? "Ağaç Yapısını Filtrele..." : _b, _c = _a.multi, multi = _c === void 0 ? false : _c, _d = _a.required, required = _d === void 0 ? false : _d, submitted = _a.submitted, errorMessage = _a.errorMessage, onChange = _a.onChange;
+    var _f = (0, react_1.useState)(""), filterTerm = _f[0], setFilterTerm = _f[1];
+    var _g = (0, react_1.useState)([]), selectedItems = _g[0], setSelectedItems = _g[1];
+    var _h = (0, react_1.useState)([]), expandedItems = _h[0], setExpandedItems = _h[1];
     // Helper to find a node by value
     var findNodeByValue = function (nodes, val) {
         for (var _i = 0, nodes_1 = nodes; _i < nodes_1.length; _i++) {
@@ -79,11 +79,11 @@ var CustomTreeView = function (_a) {
     }, [value]);
     // Filter tree utility
     var filterTree = function (nodes, term) {
-        var norm = term.toLocaleLowerCase('tr-TR');
+        var norm = term.toLocaleLowerCase("tr-TR");
         var paths = [];
         var filtered = nodes
             .map(function (node) {
-            var labelNorm = node.label.toLocaleLowerCase('tr-TR');
+            var labelNorm = node.label.toLocaleLowerCase("tr-TR");
             var childResult = node.children
                 ? filterTree(node.children, term)
                 : { filteredNodes: [], pathsToExpand: [] };
@@ -96,12 +96,15 @@ var CustomTreeView = function (_a) {
             return null;
         })
             .filter(Boolean);
-        return { filteredNodes: filtered, pathsToExpand: Array.from(new Set(paths)) };
+        return {
+            filteredNodes: filtered,
+            pathsToExpand: Array.from(new Set(paths)),
+        };
     };
     // Determine filtered nodes and which to expand
-    var _h = filterTerm
+    var _j = filterTerm
         ? filterTree(treeData, filterTerm)
-        : { filteredNodes: treeData, pathsToExpand: [] }, filteredNodes = _h.filteredNodes, pathsToExpand = _h.pathsToExpand;
+        : { filteredNodes: treeData, pathsToExpand: [] }, filteredNodes = _j.filteredNodes, pathsToExpand = _j.pathsToExpand;
     // Auto-expand when filtering
     (0, react_1.useEffect)(function () {
         if (filterTerm) {
@@ -122,7 +125,7 @@ var CustomTreeView = function (_a) {
     };
     // Clear filter only
     var handleReset = function () {
-        setFilterTerm('');
+        setFilterTerm("");
     };
     // Clear all selections
     var handleClearAll = function () {
@@ -139,19 +142,27 @@ var CustomTreeView = function (_a) {
                             : __spreadArray(__spreadArray([], selectedItems, true), [node.value], false)
                         : [node.value];
                     handleSelectionChange({}, next);
-                }, style: { cursor: 'pointer' } }, node.label || 'Kök') }, node.children ? renderTree(node.children) : null)); });
+                }, style: { cursor: "pointer" } }, node.label || "Kök") }, node.children ? renderTree(node.children) : null)); });
     };
     return (react_1.default.createElement("div", null,
-        react_1.default.createElement(CustomInput_1.default, { id: "tree-search", label: label, value: filterTerm, inputType: CustomInput_1.InputType.TEXT, placeholder: placeholder, buttonIcon: react_1.default.createElement(fa_1.FaTimes, null), buttonClass: "btn btn-danger bg-soft-danger", buttonOnClick: handleReset, onChange: function (e) { return setFilterTerm(e.target.value); } }),
+        react_1.default.createElement("div", { className: "form-group" },
+            label && react_1.default.createElement("label", { className: "form-label" }, label),
+            react_1.default.createElement("div", { className: "treeview-input-group" },
+                react_1.default.createElement("input", { type: "text", value: filterTerm, onChange: function (e) { return setFilterTerm(e.target.value); }, placeholder: placeholder, className: "form-control-unreq", autoComplete: "off", name: "tree-filter-".concat(label === null || label === void 0 ? void 0 : label.replace(/\s+/g, "-").toLowerCase()), required: false }),
+                react_1.default.createElement("button", { type: "button", onClick: handleReset, className: "btn btn-danger bg-soft-danger", title: "Temizle" },
+                    react_1.default.createElement(fa_1.FaTimes, null)))),
         multi && selectedItems.length > 0 && (react_1.default.createElement("div", { className: "mb-2" },
-            selectedItems.length > 1 && (react_1.default.createElement("span", { className: "btn btn-sm btn-danger rounded-pill me-1", style: { cursor: 'pointer' }, onClick: handleClearAll },
+            selectedItems.length > 1 && (react_1.default.createElement("span", { className: "btn btn-sm btn-danger rounded-pill me-1", style: { cursor: "pointer" }, onClick: handleClearAll },
                 react_1.default.createElement(fa_1.FaTrash, null))),
-            selectedItems.map(function (val) { return (react_1.default.createElement("span", { key: val, className: "badge bg-secondary me-1", style: { cursor: 'pointer' }, onClick: function () { return handleBadgeRemove(val); } },
+            selectedItems.map(function (val) { return (react_1.default.createElement("span", { key: val, className: "badge bg-secondary me-1", style: { cursor: "pointer" }, onClick: function () { return handleBadgeRemove(val); } },
                 findLabelByValue(treeData, val),
                 " \u00D7")); }))),
         react_1.default.createElement(SimpleTreeView_1.SimpleTreeView, { checkboxSelection: true, multiSelect: multi, selectedItems: selectedItems, expandedItems: expandedItems, onSelectedItemsChange: handleSelectionChange, onExpandedItemsChange: function (_e, ids) {
                 var arr = Array.isArray(ids) ? ids : ids ? [ids] : [];
                 setExpandedItems(arr);
-            } }, renderTree(filteredNodes))));
+            } }, renderTree(filteredNodes)),
+        submitted && required && selectedItems.length === 0 && (react_1.default.createElement("div", { className: "invalid-feedback d-block mt-2 text-danger" },
+            react_1.default.createElement(fa_1.FaExclamationTriangle, { className: "me-2" }),
+            errorMessage || "Lütfen en az bir seçim yapınız."))));
 };
 exports.default = CustomTreeView;

package/package.json

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