albinasoft-ui-package 1.0.80 → 1.0.82

package/dist/assets/css/dark.css

@@ -1,5 +1,15 @@
 .dark {
-    --bs-body-bg: #151824; /* Karanlık tema için arka plan */
+    --bs-body-bg: #151824;
+    --bs-card-bg: #222738;
+
+    --bs-grid-accentColor: #3A57E8;
+    --bs-grid-backgroundColor: #1E212F;
+    --bs-grid-foregroundColor: #F5F5F5;
+    --bs-grid-headerBackgroundColor: #2D3243;
+    --bs-grid-headerTextColor: #D8D8DA;
+
+    --bs-grid-searchBoxBorderColor: #565a68;
+    --bs-grid-searchBoxBackgroundColor: #1E212F;
   }
 
 :focus {

package/dist/assets/css/main.css

@@ -216,7 +216,16 @@ body {
     --bs-link-color: #3a57e8;
     --bs-link-hover-color: #2e46ba;
     --bs-code-color: #d63384;
-    --bs-highlight-bg: #fce1d1
+    --bs-highlight-bg: #fce1d1;
+
+    --bs-grid-accentColor: #3A57E8;
+    --bs-grid-backgroundColor: #F5F5F5;
+    --bs-grid-foregroundColor: #171717;
+    --bs-grid-headerBackgroundColor: #D8D8DA;
+    --bs-grid-headerTextColor: #000000;
+
+    --bs-grid-searchBoxBorderColor: #acacae;
+    --bs-grid-searchBoxBackgroundColor: #F5F5F5;
 }
 
 *,

package/dist/components/CustomDatatable.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+import { ColDef } from "ag-grid-community";
+interface CustomDatatableProps<T> {
+    rowData: T[];
+    columnDefs: ColDef<T>[];
+    filter?: boolean;
+    floatingFilter?: boolean;
+    minWidth?: number;
+    pagination?: boolean;
+    paginationPageSize?: number;
+    localeText?: any;
+    filterAll?: boolean;
+}
+declare function CustomDatatable<T extends {}>({ rowData, columnDefs, filter, floatingFilter, minWidth, pagination, paginationPageSize, localeText, filterAll, }: CustomDatatableProps<T>): React.JSX.Element;
+export { CustomDatatable, ColDef };
+export default CustomDatatable;

package/dist/components/CustomDatatable.js

@@ -0,0 +1,78 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomDatatable = void 0;
+var react_1 = __importStar(require("react"));
+var ag_grid_react_1 = require("ag-grid-react"); // React Data Grid Component
+var ag_grid_community_1 = require("ag-grid-community");
+var locale_1 = require("@ag-grid-community/locale");
+var CustomInput_1 = __importDefault(require("./CustomInput"));
+ag_grid_community_1.ModuleRegistry.registerModules([ag_grid_community_1.AllCommunityModule]);
+function CustomDatatable(_a) {
+    var rowData = _a.rowData, columnDefs = _a.columnDefs, _b = _a.filter, filter = _b === void 0 ? true : _b, _c = _a.floatingFilter, floatingFilter = _c === void 0 ? true : _c, _d = _a.minWidth, minWidth = _d === void 0 ? 100 : _d, _e = _a.pagination, pagination = _e === void 0 ? true : _e, _f = _a.paginationPageSize, paginationPageSize = _f === void 0 ? 10 : _f, _g = _a.localeText, localeText = _g === void 0 ? locale_1.AG_GRID_LOCALE_TR : _g, _h = _a.filterAll, filterAll = _h === void 0 ? true : _h;
+    // Global arama (quick filter) için state
+    var _j = (0, react_1.useState)(""), quickFilterText = _j[0], setQuickFilterText = _j[1];
+    // Sabit tema ayarları: global CSS değişkenlerinizi kullanabilirsiniz.
+    var myTheme = ag_grid_community_1.themeQuartz.withParams({
+        accentColor: "var(--bs-grid-accentColor)",
+        backgroundColor: "var(--bs-grid-backgroundColor)",
+        foregroundColor: "var(--bs-grid-foregroundColor)",
+        headerBackgroundColor: "var(--bs-grid-headerBackgroundColor)",
+        headerTextColor: "var(--bs-grid-headerTextColor)",
+    });
+    return (react_1.default.createElement("div", { style: { width: "100%" } },
+        filterAll && (react_1.default.createElement("div", { style: { marginBottom: "5px" } },
+            react_1.default.createElement(CustomInput_1.default, { value: quickFilterText, onChange: function (e) { return setQuickFilterText(e.target.value); }, placeholder: "B\u00FCt\u00FCn tabloda ara...", style: {
+                    width: "100%",
+                    padding: "5px",
+                    border: "2px solid var(--bs-grid-searchBoxBorderColor)",
+                    background: "var(--bs-grid-searchBoxBackgroundColor)",
+                    borderRadius: "10px",
+                } }))),
+        react_1.default.createElement("div", { style: { width: "100%", height: "500px" } },
+            react_1.default.createElement(ag_grid_react_1.AgGridReact, { theme: myTheme, rowData: rowData, columnDefs: columnDefs, localeText: localeText, defaultColDef: {
+                    flex: 1,
+                    minWidth: minWidth,
+                    resizable: true,
+                    filter: filter,
+                    floatingFilter: floatingFilter,
+                    getQuickFilterText: function (params) {
+                        return params.value ? params.value.toLocaleLowerCase("tr-TR") : "";
+                    },
+                    filterParams: {
+                        textFormatter: function (value) {
+                            return value ? value.toLocaleLowerCase("tr-TR") : null;
+                        },
+                        filterOptions: ["contains"],
+                        defaultOption: "contains",
+                        suppressAndOrCondition: true,
+                    },
+                }, quickFilterText: quickFilterText ? quickFilterText.toLocaleLowerCase("tr-TR") : "", pagination: pagination, paginationPageSize: paginationPageSize }))));
+}
+exports.CustomDatatable = CustomDatatable;
+exports.default = CustomDatatable;

package/dist/index.d.ts

@@ -15,4 +15,5 @@ import CustomTreeView from './components/CustomTreeView';
 import CustomAutocompleteInput from './components/CustomAutocompleteInput';
 import CustomProgressBar from './components/CustomProgressBar';
 import CustomTimeline from './components/CustomTimeline';
-export { CustomButton, CustomCheckbox, CustomDateTimePicker, CustomDivider, CustomForm, CustomInput, CustomModal, CustomRadioButton, CustomRichTextbox, CustomSelect, CustomTab, CustomText, CustomTextarea, CustomTreeView, CustomAutocompleteInput, CustomProgressBar, CustomTimeline, };
+import CustomDatatable from './components/CustomDatatable';
+export { CustomButton, CustomCheckbox, CustomDateTimePicker, CustomDivider, CustomForm, CustomInput, CustomModal, CustomRadioButton, CustomRichTextbox, CustomSelect, 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.CustomTimeline = exports.CustomProgressBar = exports.CustomAutocompleteInput = exports.CustomTreeView = exports.CustomTextarea = exports.CustomText = exports.CustomTab = exports.CustomSelect = exports.CustomRichTextbox = exports.CustomRadioButton = exports.CustomModal = exports.CustomInput = exports.CustomForm = exports.CustomDivider = exports.CustomDateTimePicker = exports.CustomCheckbox = exports.CustomButton = void 0;
+exports.CustomDatatable = exports.CustomTimeline = exports.CustomProgressBar = exports.CustomAutocompleteInput = exports.CustomTreeView = exports.CustomTextarea = exports.CustomText = exports.CustomTab = exports.CustomSelect = exports.CustomRichTextbox = exports.CustomRadioButton = exports.CustomModal = exports.CustomInput = exports.CustomForm = exports.CustomDivider = exports.CustomDateTimePicker = exports.CustomCheckbox = exports.CustomButton = void 0;
 var CustomButton_1 = __importDefault(require("./components/CustomButton"));
 exports.CustomButton = CustomButton_1.default;
 var CustomCheckbox_1 = __importDefault(require("./components/CustomCheckbox"));
@@ -38,3 +38,5 @@ var CustomProgressBar_1 = __importDefault(require("./components/CustomProgressBa
 exports.CustomProgressBar = CustomProgressBar_1.default;
 var CustomTimeline_1 = __importDefault(require("./components/CustomTimeline"));
 exports.CustomTimeline = CustomTimeline_1.default;
+var CustomDatatable_1 = __importDefault(require("./components/CustomDatatable"));
+exports.CustomDatatable = CustomDatatable_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "albinasoft-ui-package",
-  "version": "1.0.80",
+  "version": "1.0.82",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
@@ -8,7 +8,10 @@
     "prepare": "npm run build"
   },
   "dependencies": {
+    "@ag-grid-community/locale": "^33.1.1",
     "@mui/x-tree-view": "^7.23.2",
+    "ag-grid-community": "^33.1.1",
+    "ag-grid-react": "^33.1.1",
     "date-fns": "^4.1.0",
     "react": "^18.0.0",
     "react-bootstrap": "^2.10.6",