@sydsoft/base 1.58.0 → 2.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/_lib/baseFunctions.d.ts +16 -0
- package/dist/esm/_lib/baseFunctions.js +102 -0
- package/dist/esm/_lib/inputMask.d.ts +12 -0
- package/dist/esm/_lib/inputMask.js +234 -0
- package/dist/esm/_lib/listFunctions.d.ts +7 -0
- package/dist/esm/_lib/listFunctions.js +119 -0
- package/dist/esm/_lib/storage/cookies.d.ts +9 -0
- package/dist/esm/_lib/storage/cookies.js +39 -0
- package/dist/esm/_lib/storage/encData.d.ts +7 -0
- package/dist/esm/_lib/storage/encData.js +48 -0
- package/dist/esm/_lib/storage/localStorage.d.ts +11 -0
- package/dist/esm/_lib/storage/localStorage.js +74 -0
- package/dist/esm/_lib/storage/sessionStorage.d.ts +11 -0
- package/dist/esm/_lib/storage/sessionStorage.js +74 -0
- package/dist/esm/_lib/useInterval.d.ts +6 -0
- package/dist/esm/_lib/useInterval.js +24 -0
- package/dist/esm/alert/index.d.ts +23 -0
- package/dist/esm/alert/index.js +112 -0
- package/dist/esm/alert/index.module.css +125 -0
- package/dist/esm/box/Box.d.ts +14 -0
- package/dist/esm/box/Box.js +20 -0
- package/dist/esm/box/Box.module.css +159 -0
- package/dist/esm/box/BoxContent.d.ts +14 -0
- package/dist/esm/box/BoxContent.js +7 -0
- package/dist/esm/box/BoxFooter.d.ts +15 -0
- package/dist/esm/box/BoxFooter.js +13 -0
- package/dist/esm/box/BoxHeader.d.ts +21 -0
- package/dist/esm/box/BoxHeader.js +14 -0
- package/dist/esm/box/index.d.ts +9 -0
- package/dist/esm/box/index.js +9 -0
- package/dist/esm/countDown/index.d.ts +27 -0
- package/dist/esm/countDown/index.js +102 -0
- package/dist/esm/dateTime/index.d.ts +17 -0
- package/dist/esm/dateTime/index.js +81 -0
- package/dist/esm/form/Button.d.ts +32 -0
- package/dist/esm/form/Button.js +81 -0
- package/dist/esm/form/Checkbox.d.ts +28 -0
- package/dist/esm/form/Checkbox.js +28 -0
- package/dist/esm/form/Dialog.d.ts +25 -0
- package/dist/esm/form/Dialog.js +40 -0
- package/dist/esm/form/Form.d.ts +15 -0
- package/dist/esm/form/Form.js +17 -0
- package/dist/esm/form/FormOlustur.d.ts +44 -0
- package/dist/esm/form/FormOlustur.js +57 -0
- package/dist/esm/form/Input.d.ts +66 -0
- package/dist/esm/form/Input.js +196 -0
- package/dist/esm/form/Label.d.ts +12 -0
- package/dist/esm/form/Label.js +14 -0
- package/dist/esm/form/SearchableInput.d.ts +42 -0
- package/dist/esm/form/SearchableInput.js +277 -0
- package/dist/esm/form/UploadBase.d.ts +25 -0
- package/dist/esm/form/UploadBase.js +86 -0
- package/dist/esm/form/index.d.ts +14 -0
- package/dist/esm/form/index.js +14 -0
- package/dist/esm/form/styles/Button.module.css +151 -0
- package/dist/esm/form/styles/Input.module.css +227 -0
- package/dist/esm/form/styles/Label.module.css +37 -0
- package/dist/esm/form/styles/SearchableInput.module.css +86 -0
- package/dist/esm/grid/index.d.ts +43 -0
- package/dist/esm/grid/index.js +102 -0
- package/dist/esm/grid/index.module.css +812 -0
- package/dist/esm/icon/icons.d.ts +27 -0
- package/dist/esm/icon/icons.js +28 -0
- package/dist/esm/icon/index.d.ts +38 -0
- package/dist/esm/icon/index.js +25 -0
- package/dist/esm/icon/mui.d.ts +6 -0
- package/dist/esm/icon/mui.js +6 -0
- package/dist/esm/index.d.ts +24 -0
- package/dist/esm/index.js +24 -0
- package/dist/esm/menu/index.d.ts +75 -0
- package/dist/esm/menu/index.js +59 -0
- package/dist/esm/menu/index.module.css +106 -0
- package/dist/esm/modal/index.d.ts +23 -0
- package/dist/esm/modal/index.js +66 -0
- package/dist/esm/modal/index.module.css +83 -0
- package/dist/esm/popover/index.d.ts +26 -0
- package/dist/esm/popover/index.js +343 -0
- package/dist/esm/popover/index.module.css +95 -0
- package/dist/esm/tooltip/index.d.ts +16 -0
- package/dist/esm/tooltip/index.js +124 -0
- package/package.json +12 -8
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @author : izzetseydaoglu
|
|
3
|
+
* @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
|
|
4
|
+
* @version : 2026-02-10 20:23:07
|
|
5
|
+
*/
|
|
6
|
+
import { decData, encData } from './encData';
|
|
7
|
+
import { isDev } from '../baseFunctions';
|
|
8
|
+
var storageAvailable = typeof Storage === 'undefined' || !window.localStorage ? false : true;
|
|
9
|
+
export var setLocalStorage = function (key, value) {
|
|
10
|
+
if (!storageAvailable)
|
|
11
|
+
return false;
|
|
12
|
+
try {
|
|
13
|
+
localStorage.setItem(key, encData(value));
|
|
14
|
+
return true;
|
|
15
|
+
}
|
|
16
|
+
catch (e) {
|
|
17
|
+
isDev && console.log('ERROR => localStorage =>', e);
|
|
18
|
+
return false;
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
export var getLocalStorage = function (key) {
|
|
22
|
+
if (!storageAvailable)
|
|
23
|
+
return false;
|
|
24
|
+
try {
|
|
25
|
+
var saved = localStorage.getItem(key);
|
|
26
|
+
return saved ? decData(saved) : null;
|
|
27
|
+
}
|
|
28
|
+
catch (e) {
|
|
29
|
+
isDev && console.log('ERROR => localStorage =>', e);
|
|
30
|
+
return null;
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
export var removeLocalStorage = function (key) {
|
|
34
|
+
if (!storageAvailable)
|
|
35
|
+
return false;
|
|
36
|
+
try {
|
|
37
|
+
localStorage.removeItem(key);
|
|
38
|
+
return true;
|
|
39
|
+
}
|
|
40
|
+
catch (e) {
|
|
41
|
+
isDev && console.log('ERROR => localStorage =>', e);
|
|
42
|
+
return false;
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
export var clearLocalStorage = function () {
|
|
46
|
+
if (!storageAvailable)
|
|
47
|
+
return false;
|
|
48
|
+
try {
|
|
49
|
+
localStorage.clear();
|
|
50
|
+
return true;
|
|
51
|
+
}
|
|
52
|
+
catch (e) {
|
|
53
|
+
isDev && console.log('ERROR => localStorage =>', e);
|
|
54
|
+
return false;
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
// Tüm localStorage anahtarlarını getir
|
|
58
|
+
export var getLocalStorageAllKeys = function () {
|
|
59
|
+
if (!storageAvailable)
|
|
60
|
+
return [];
|
|
61
|
+
return Object.keys(localStorage);
|
|
62
|
+
};
|
|
63
|
+
// Tüm localStorage boyutunu getir
|
|
64
|
+
export var getLocalStorageSize = function () {
|
|
65
|
+
if (!storageAvailable)
|
|
66
|
+
return 0;
|
|
67
|
+
var total = 0;
|
|
68
|
+
for (var key in localStorage) {
|
|
69
|
+
if (localStorage.hasOwnProperty(key)) {
|
|
70
|
+
total += localStorage[key].length + key.length;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
return total;
|
|
74
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @author : izzetseydaoglu
|
|
3
|
+
* @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
|
|
4
|
+
* @version : 2026-02-10 20:23:07
|
|
5
|
+
*/
|
|
6
|
+
export declare const setSessionStorage: (key: string, value: any) => boolean;
|
|
7
|
+
export declare const getSessionStorage: (key: string) => any;
|
|
8
|
+
export declare const removeSessionStorage: (key: string) => boolean;
|
|
9
|
+
export declare const clearSessionStorage: () => boolean;
|
|
10
|
+
export declare const getSessionStorageAllKeys: () => string[];
|
|
11
|
+
export declare const getSessionStorageSize: () => number;
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @author : izzetseydaoglu
|
|
3
|
+
* @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
|
|
4
|
+
* @version : 2026-02-10 20:23:07
|
|
5
|
+
*/
|
|
6
|
+
import { decData, encData } from "./encData";
|
|
7
|
+
import { isDev } from "../baseFunctions";
|
|
8
|
+
var storageAvailable = typeof Storage === "undefined" || !window.sessionStorage ? false : true;
|
|
9
|
+
export var setSessionStorage = function (key, value) {
|
|
10
|
+
if (!storageAvailable)
|
|
11
|
+
return false;
|
|
12
|
+
try {
|
|
13
|
+
sessionStorage.setItem(key, encData(value));
|
|
14
|
+
return true;
|
|
15
|
+
}
|
|
16
|
+
catch (e) {
|
|
17
|
+
isDev && console.log("ERROR => SessionStorage =>", e);
|
|
18
|
+
return false;
|
|
19
|
+
}
|
|
20
|
+
};
|
|
21
|
+
export var getSessionStorage = function (key) {
|
|
22
|
+
if (!storageAvailable)
|
|
23
|
+
return false;
|
|
24
|
+
try {
|
|
25
|
+
var saved = sessionStorage.getItem(key);
|
|
26
|
+
return saved ? decData(saved) : null;
|
|
27
|
+
}
|
|
28
|
+
catch (e) {
|
|
29
|
+
isDev && console.log("ERROR => SessionStorage =>", e);
|
|
30
|
+
return null;
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
export var removeSessionStorage = function (key) {
|
|
34
|
+
if (!storageAvailable)
|
|
35
|
+
return false;
|
|
36
|
+
try {
|
|
37
|
+
sessionStorage.removeItem(key);
|
|
38
|
+
return true;
|
|
39
|
+
}
|
|
40
|
+
catch (e) {
|
|
41
|
+
isDev && console.log("ERROR => SessionStorage =>", e);
|
|
42
|
+
return false;
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
export var clearSessionStorage = function () {
|
|
46
|
+
if (!storageAvailable)
|
|
47
|
+
return false;
|
|
48
|
+
try {
|
|
49
|
+
sessionStorage.clear();
|
|
50
|
+
return true;
|
|
51
|
+
}
|
|
52
|
+
catch (e) {
|
|
53
|
+
isDev && console.log("ERROR => SessionStorage =>", e);
|
|
54
|
+
return false;
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
// Tüm SessionStorage anahtarlarını getir
|
|
58
|
+
export var getSessionStorageAllKeys = function () {
|
|
59
|
+
if (!storageAvailable)
|
|
60
|
+
return [];
|
|
61
|
+
return Object.keys(sessionStorage);
|
|
62
|
+
};
|
|
63
|
+
// Tüm SessionStorage boyutunu getir
|
|
64
|
+
export var getSessionStorageSize = function () {
|
|
65
|
+
if (!storageAvailable)
|
|
66
|
+
return 0;
|
|
67
|
+
var total = 0;
|
|
68
|
+
for (var key in sessionStorage) {
|
|
69
|
+
if (sessionStorage.hasOwnProperty(key)) {
|
|
70
|
+
total += sessionStorage[key].length + key.length;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
return total;
|
|
74
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2023
|
|
3
|
+
* @author: izzetseydaoglu
|
|
4
|
+
* @last-modified: 29.01.2024 04:09
|
|
5
|
+
*/
|
|
6
|
+
// source: https://overreacted.io/making-setinterval-declarative-with-react-hooks/
|
|
7
|
+
import { useEffect, useRef } from "react";
|
|
8
|
+
export function useInterval(callback, delay) {
|
|
9
|
+
var savedCallback = useRef(null);
|
|
10
|
+
// Remember the latest callback.
|
|
11
|
+
useEffect(function () {
|
|
12
|
+
savedCallback.current = callback;
|
|
13
|
+
}, [callback]);
|
|
14
|
+
// Set up the interval.
|
|
15
|
+
useEffect(function () {
|
|
16
|
+
function tick() {
|
|
17
|
+
savedCallback && savedCallback.current && savedCallback.current();
|
|
18
|
+
}
|
|
19
|
+
if (delay !== null) {
|
|
20
|
+
var id_1 = setInterval(tick, delay);
|
|
21
|
+
return function () { return clearInterval(id_1); };
|
|
22
|
+
}
|
|
23
|
+
}, [delay]);
|
|
24
|
+
}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @author : izzetseydaoglu
|
|
3
|
+
* @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
|
|
4
|
+
* @version : 2026-02-10 20:23:07
|
|
5
|
+
*/
|
|
6
|
+
import React from "react";
|
|
7
|
+
export type typeAlert = {
|
|
8
|
+
defaultTimer?: string;
|
|
9
|
+
defaultErrorTimer?: string;
|
|
10
|
+
defaultSuccessTimer?: string;
|
|
11
|
+
};
|
|
12
|
+
export declare const Alert: ({ defaultTimer, defaultErrorTimer, defaultSuccessTimer }: typeAlert) => null;
|
|
13
|
+
type typeAddAlert = {
|
|
14
|
+
type: "error" | "success" | "warning" | "info" | "loading";
|
|
15
|
+
message: string;
|
|
16
|
+
timer?: number | boolean;
|
|
17
|
+
style?: React.CSSProperties;
|
|
18
|
+
};
|
|
19
|
+
export declare const alert_add: ({ type, message, style, timer }: typeAddAlert) => false | HTMLDivElement | null;
|
|
20
|
+
export declare const alert_remove: (alert: any) => void;
|
|
21
|
+
export declare const alert_clear: () => boolean;
|
|
22
|
+
export declare function alertCheck(response: any): void;
|
|
23
|
+
export {};
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* @author : izzetseydaoglu
|
|
4
|
+
* @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
|
|
5
|
+
* @version : 2026-02-10 20:23:07
|
|
6
|
+
*/
|
|
7
|
+
import { useEffect } from "react";
|
|
8
|
+
import { createRoot } from "react-dom/client";
|
|
9
|
+
import styles from "./index.module.css";
|
|
10
|
+
var sAlertTimeout = [];
|
|
11
|
+
export var Alert = function (_a) {
|
|
12
|
+
var _b = _a.defaultTimer, defaultTimer = _b === void 0 ? "5000" : _b, _c = _a.defaultErrorTimer, defaultErrorTimer = _c === void 0 ? "10000" : _c, _d = _a.defaultSuccessTimer, defaultSuccessTimer = _d === void 0 ? "5000" : _d;
|
|
13
|
+
useEffect(function () {
|
|
14
|
+
if (typeof window === "undefined")
|
|
15
|
+
return;
|
|
16
|
+
var divCheck = document.getElementById("salert");
|
|
17
|
+
if (!divCheck) {
|
|
18
|
+
// let div = document.createElement('div') as HTMLDivElement
|
|
19
|
+
var div = document.createElement("div");
|
|
20
|
+
div.setAttribute("id", "salert");
|
|
21
|
+
div.setAttribute("defaultTimer", defaultTimer);
|
|
22
|
+
div.setAttribute("defaultErrorTimer", defaultErrorTimer);
|
|
23
|
+
div.setAttribute("defaultSuccessTimer", defaultSuccessTimer);
|
|
24
|
+
var alertStyle = [
|
|
25
|
+
"position: fixed",
|
|
26
|
+
"bottom: 0",
|
|
27
|
+
"right: 0",
|
|
28
|
+
"max-width: 300px",
|
|
29
|
+
"max-height: 600px",
|
|
30
|
+
"overflow-x: hidden",
|
|
31
|
+
"padding: 15px",
|
|
32
|
+
"display: flex",
|
|
33
|
+
"flex-direction: column",
|
|
34
|
+
"z-index: 9999999"
|
|
35
|
+
];
|
|
36
|
+
div.setAttribute("style", alertStyle.join(";"));
|
|
37
|
+
document.body.appendChild(div);
|
|
38
|
+
}
|
|
39
|
+
}, []);
|
|
40
|
+
return null;
|
|
41
|
+
};
|
|
42
|
+
export var alert_add = function (_a) {
|
|
43
|
+
var _b, _c, _d;
|
|
44
|
+
var type = _a.type, message = _a.message, style = _a.style, timer = _a.timer;
|
|
45
|
+
if (typeof window === "undefined")
|
|
46
|
+
return false;
|
|
47
|
+
var mainDiv = document.getElementById("salert");
|
|
48
|
+
if (mainDiv) {
|
|
49
|
+
var alert_1 = document.createElement("div");
|
|
50
|
+
mainDiv.prepend(alert_1);
|
|
51
|
+
var onClose_1 = function () {
|
|
52
|
+
if (mainDiv && alert_1 && mainDiv.contains(alert_1))
|
|
53
|
+
mainDiv.removeChild(alert_1);
|
|
54
|
+
};
|
|
55
|
+
var root = createRoot(alert_1);
|
|
56
|
+
var Component = (_jsxs("div", { className: "".concat(styles.salert, " ").concat(styles[type]), style: style, children: [_jsx("div", { className: styles.message, dangerouslySetInnerHTML: { __html: message } }), _jsx("div", { className: styles.close, onClick: onClose_1, children: "\u2715" })] }));
|
|
57
|
+
root.render(Component);
|
|
58
|
+
var defaultTimer = (_b = mainDiv.getAttribute("defaulttimer")) !== null && _b !== void 0 ? _b : "5000";
|
|
59
|
+
var defaultErrorTimer = (_c = mainDiv.getAttribute("defaulterrortimer")) !== null && _c !== void 0 ? _c : "10000";
|
|
60
|
+
var defaultSuccessTimer = (_d = mainDiv.getAttribute("defaultsuccesstimer")) !== null && _d !== void 0 ? _d : "5000";
|
|
61
|
+
var timerFilled = typeof timer === "number" && timer > 0;
|
|
62
|
+
var newTimer = timerFilled ? timer : defaultTimer;
|
|
63
|
+
switch (type) {
|
|
64
|
+
case "error":
|
|
65
|
+
newTimer = timerFilled ? timer : defaultErrorTimer;
|
|
66
|
+
break;
|
|
67
|
+
case "success":
|
|
68
|
+
newTimer = timerFilled ? timer : defaultSuccessTimer;
|
|
69
|
+
break;
|
|
70
|
+
default:
|
|
71
|
+
break;
|
|
72
|
+
}
|
|
73
|
+
newTimer = newTimer;
|
|
74
|
+
if (typeof timer !== "boolean") {
|
|
75
|
+
// False gelmişse sabit kalsın
|
|
76
|
+
if (newTimer > 0) {
|
|
77
|
+
var timeout = setTimeout(function () { return onClose_1(); }, newTimer);
|
|
78
|
+
sAlertTimeout.push(timeout);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
return alert_1;
|
|
82
|
+
}
|
|
83
|
+
return null;
|
|
84
|
+
};
|
|
85
|
+
export var alert_remove = function (alert) {
|
|
86
|
+
if (typeof window === "undefined" || !alert)
|
|
87
|
+
return;
|
|
88
|
+
var mainDiv = document.getElementById("salert");
|
|
89
|
+
if (mainDiv && alert && mainDiv.contains(alert))
|
|
90
|
+
mainDiv.removeChild(alert);
|
|
91
|
+
return;
|
|
92
|
+
};
|
|
93
|
+
export var alert_clear = function () {
|
|
94
|
+
if (typeof window === "undefined")
|
|
95
|
+
return false;
|
|
96
|
+
sAlertTimeout.map(function (id) { return clearTimeout(id); });
|
|
97
|
+
var mainDiv = document.getElementById("salert");
|
|
98
|
+
if (mainDiv)
|
|
99
|
+
mainDiv.innerHTML = "";
|
|
100
|
+
return true;
|
|
101
|
+
};
|
|
102
|
+
export function alertCheck(response) {
|
|
103
|
+
if (response.data && response.data["alert"]) {
|
|
104
|
+
response.data["alert"].map(function (alert) {
|
|
105
|
+
alert_add({
|
|
106
|
+
type: alert.type,
|
|
107
|
+
message: alert.message,
|
|
108
|
+
timer: alert.timer
|
|
109
|
+
});
|
|
110
|
+
});
|
|
111
|
+
}
|
|
112
|
+
}
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @author : izzetseydaoglu
|
|
3
|
+
* @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
|
|
4
|
+
* @version : 2026-02-10 20:25:31
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
.message {
|
|
8
|
+
flex: 1;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.close {
|
|
12
|
+
position: absolute;
|
|
13
|
+
top: 0;
|
|
14
|
+
left: 0;
|
|
15
|
+
width: 17px;
|
|
16
|
+
height: 17px;
|
|
17
|
+
border-radius: 50%;
|
|
18
|
+
padding: 3px;
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
justify-content: center;
|
|
22
|
+
font-size: 9px;
|
|
23
|
+
letter-spacing: 0;
|
|
24
|
+
transform: translate(-50%, -50%) scale(0);
|
|
25
|
+
transition: ease-in-out 0.2s;
|
|
26
|
+
border: 1px #97979740 solid;
|
|
27
|
+
box-shadow: 1px 1px 4px 0 #000000a6;
|
|
28
|
+
cursor: pointer;
|
|
29
|
+
background: inherit;
|
|
30
|
+
}
|
|
31
|
+
.close:hover {
|
|
32
|
+
zoom: 1.1;
|
|
33
|
+
}
|
|
34
|
+
.salert:hover .close {
|
|
35
|
+
transform: translate(-50%, -50%) scale(1);
|
|
36
|
+
}
|
|
37
|
+
.salert {
|
|
38
|
+
position: relative;
|
|
39
|
+
min-width: 50px;
|
|
40
|
+
width: fit-content;
|
|
41
|
+
margin: 6px 0 6px auto;
|
|
42
|
+
padding: 10px 15px;
|
|
43
|
+
border-radius: 5px;
|
|
44
|
+
cursor: default;
|
|
45
|
+
background: #1f1f1f;
|
|
46
|
+
color: rgba(255, 255, 255, 0.93);
|
|
47
|
+
border: 1px #97979740 solid;
|
|
48
|
+
box-shadow: 1px 1px 4px 0 #000000a6;
|
|
49
|
+
display: flex;
|
|
50
|
+
flex-direction: row;
|
|
51
|
+
align-items: center;
|
|
52
|
+
transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
|
|
53
|
+
animation: show 0.3s;
|
|
54
|
+
font-family: inherit;
|
|
55
|
+
font-size: 1rem;
|
|
56
|
+
line-height: 1.5;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.error {
|
|
60
|
+
background: rgb(211, 47, 47);
|
|
61
|
+
background: linear-gradient(
|
|
62
|
+
135deg,
|
|
63
|
+
rgba(211, 47, 47, 1) 0%,
|
|
64
|
+
rgba(211, 47, 47, 0.8) 70%
|
|
65
|
+
);
|
|
66
|
+
color: rgba(255, 255, 255, 0.93);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.success {
|
|
70
|
+
background: rgb(67, 160, 71);
|
|
71
|
+
background: linear-gradient(
|
|
72
|
+
135deg,
|
|
73
|
+
rgba(67, 160, 71, 1) 0%,
|
|
74
|
+
rgba(67, 160, 71, 0.8) 70%
|
|
75
|
+
);
|
|
76
|
+
color: rgba(255, 255, 255, 0.93);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.info {
|
|
80
|
+
background: rgb(13, 141, 189);
|
|
81
|
+
background: linear-gradient(
|
|
82
|
+
135deg,
|
|
83
|
+
rgba(13, 141, 189, 1) 0%,
|
|
84
|
+
rgba(13, 141, 189, 0.8) 70%
|
|
85
|
+
);
|
|
86
|
+
color: rgba(255, 255, 255, 0.93);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.warning {
|
|
90
|
+
background: rgb(217, 142, 4);
|
|
91
|
+
background: linear-gradient(
|
|
92
|
+
135deg,
|
|
93
|
+
rgba(217, 142, 4, 1) 0%,
|
|
94
|
+
rgba(217, 142, 4, 0.8) 70%
|
|
95
|
+
);
|
|
96
|
+
color: rgba(255, 255, 255, 0.93);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.loading {
|
|
100
|
+
background: linear-gradient(
|
|
101
|
+
60deg,
|
|
102
|
+
rgb(15 33 34) 0%,
|
|
103
|
+
rgba(0, 172, 193, 1) 100%
|
|
104
|
+
);
|
|
105
|
+
color: rgba(255, 255, 255, 0.93);
|
|
106
|
+
animation: waves 50s infinite linear;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
@keyframes show {
|
|
110
|
+
from {
|
|
111
|
+
transform: translateX(200%);
|
|
112
|
+
}
|
|
113
|
+
to {
|
|
114
|
+
transform: translateX(0);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
@keyframes waves {
|
|
119
|
+
from {
|
|
120
|
+
background-position: 0;
|
|
121
|
+
}
|
|
122
|
+
to {
|
|
123
|
+
background-position: 100vw 0;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @author : izzetseydaoglu
|
|
3
|
+
* @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
|
|
4
|
+
* @version : 2026-02-10 20:23:07
|
|
5
|
+
*/
|
|
6
|
+
import React from "react";
|
|
7
|
+
type Props = {
|
|
8
|
+
children: React.ReactNode;
|
|
9
|
+
className?: string;
|
|
10
|
+
style?: React.CSSProperties;
|
|
11
|
+
loading?: boolean;
|
|
12
|
+
};
|
|
13
|
+
export declare const Box: React.NamedExoticComponent<Props>;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* @author : izzetseydaoglu
|
|
4
|
+
* @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
|
|
5
|
+
* @version : 2026-02-10 20:23:07
|
|
6
|
+
*/
|
|
7
|
+
import { memo, useEffect, useRef, useState } from "react";
|
|
8
|
+
import styles from "./Box.module.css";
|
|
9
|
+
export var Box = memo(function MemoFunction(_a) {
|
|
10
|
+
var children = _a.children, className = _a.className, style = _a.style, _b = _a.loading, loading = _b === void 0 ? false : _b;
|
|
11
|
+
var boxRef = useRef(null);
|
|
12
|
+
var _c = useState(false), hasContent = _c[0], setHasContent = _c[1];
|
|
13
|
+
useEffect(function () {
|
|
14
|
+
if (!boxRef.current)
|
|
15
|
+
return;
|
|
16
|
+
var found = boxRef.current.querySelector(".sbox_content");
|
|
17
|
+
setHasContent(!!found);
|
|
18
|
+
}, [children]);
|
|
19
|
+
return (_jsxs("div", { ref: boxRef, className: "sbox ".concat(styles.sbox, " ").concat(className || ""), style: style, children: [(hasContent && children) || _jsx("div", { className: styles.content, children: children }), loading && (_jsx("div", { className: styles.loading, children: _jsx("div", { className: styles.loading_spinner }) }))] }));
|
|
20
|
+
});
|
|
@@ -0,0 +1,159 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @author : izzetseydaoglu
|
|
3
|
+
* @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
|
|
4
|
+
* @version : 2026-02-10 20:25:31
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
.sbox {
|
|
8
|
+
position: relative;
|
|
9
|
+
max-width: 100%;
|
|
10
|
+
background-color: #fff;
|
|
11
|
+
box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
|
|
12
|
+
border-radius: 8px;
|
|
13
|
+
overflow-y: auto;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.sbox h1,
|
|
17
|
+
.sbox h2,
|
|
18
|
+
.sbox h3,
|
|
19
|
+
.sbox h4,
|
|
20
|
+
.sbox h5,
|
|
21
|
+
.sbox h6 {
|
|
22
|
+
margin: 0;
|
|
23
|
+
padding: 0;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.content {
|
|
27
|
+
padding: 20px;
|
|
28
|
+
box-sizing: border-box;
|
|
29
|
+
overflow: auto;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.header,
|
|
33
|
+
.footer {
|
|
34
|
+
z-index: 1;
|
|
35
|
+
position: sticky;
|
|
36
|
+
padding: 12px 16px;
|
|
37
|
+
background: inherit;
|
|
38
|
+
}
|
|
39
|
+
.header {
|
|
40
|
+
top: 0;
|
|
41
|
+
border-bottom: 1px solid #00000020;
|
|
42
|
+
display: flex;
|
|
43
|
+
flex-direction: row;
|
|
44
|
+
justify-content: flex-start;
|
|
45
|
+
align-items: center;
|
|
46
|
+
gap: 10px;
|
|
47
|
+
/* margin: 10px 0 5px 0; */
|
|
48
|
+
}
|
|
49
|
+
.footer {
|
|
50
|
+
display: flex;
|
|
51
|
+
flex-direction: row;
|
|
52
|
+
flex-wrap: wrap;
|
|
53
|
+
align-items: center;
|
|
54
|
+
justify-content: flex-end;
|
|
55
|
+
gap: 10px;
|
|
56
|
+
bottom: 0;
|
|
57
|
+
border-top: 1px solid #00000020;
|
|
58
|
+
background-color: #f7f7f7;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.icon {
|
|
62
|
+
display: inline-flex;
|
|
63
|
+
align-items: center;
|
|
64
|
+
flex: 0 0 auto;
|
|
65
|
+
text-align: center;
|
|
66
|
+
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.title {
|
|
70
|
+
flex: 1;
|
|
71
|
+
font-size: 1.1rem;
|
|
72
|
+
font-weight: 500;
|
|
73
|
+
line-height: 1.5;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
.menu {
|
|
77
|
+
display: inline-flex;
|
|
78
|
+
flex: 0 0 auto;
|
|
79
|
+
align-items: center;
|
|
80
|
+
justify-content: center;
|
|
81
|
+
}
|
|
82
|
+
.menu > * {
|
|
83
|
+
margin: 0 3px;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.loading {
|
|
87
|
+
position: absolute;
|
|
88
|
+
top: 0;
|
|
89
|
+
left: 0;
|
|
90
|
+
width: 100%;
|
|
91
|
+
height: 100%;
|
|
92
|
+
background-color: #f4f7faa6;
|
|
93
|
+
overflow: hidden;
|
|
94
|
+
border-radius: inherit;
|
|
95
|
+
display: flex;
|
|
96
|
+
justify-content: center;
|
|
97
|
+
align-items: center;
|
|
98
|
+
z-index: 9999;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.loading::after {
|
|
102
|
+
position: absolute;
|
|
103
|
+
top: 0;
|
|
104
|
+
right: 0;
|
|
105
|
+
bottom: 0;
|
|
106
|
+
left: 0;
|
|
107
|
+
transform: translateX(-100%);
|
|
108
|
+
background: linear-gradient(90deg, rgb(183 190 199 / 2%) 0, rgb(182 190 198 / 19%) 20%, rgb(183 190 199 / 2%) 60%, rgb(184 192 200 / 1%));
|
|
109
|
+
animation: shimmer 2s infinite;
|
|
110
|
+
content: "";
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.loading_spinner {
|
|
114
|
+
position: relative;
|
|
115
|
+
margin: 6px;
|
|
116
|
+
width: 24px;
|
|
117
|
+
height: 24px;
|
|
118
|
+
}
|
|
119
|
+
.loading_spinner:before {
|
|
120
|
+
position: absolute;
|
|
121
|
+
display: block;
|
|
122
|
+
content: "";
|
|
123
|
+
z-index: 12;
|
|
124
|
+
top: 3px;
|
|
125
|
+
left: 3px;
|
|
126
|
+
width: 30px;
|
|
127
|
+
height: 30px;
|
|
128
|
+
border-radius: 50%;
|
|
129
|
+
background-color: #fff;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.loading_spinner:after {
|
|
133
|
+
position: absolute;
|
|
134
|
+
display: block;
|
|
135
|
+
content: "";
|
|
136
|
+
z-index: 11;
|
|
137
|
+
width: 18px;
|
|
138
|
+
height: 18px;
|
|
139
|
+
border-radius: 200px 0 0;
|
|
140
|
+
background: linear-gradient(45deg, rgba(0, 0, 0, 0) 0, rgba(69, 154, 215, 1) 50%, rgba(69, 154, 215, 1) 100%);
|
|
141
|
+
animation: loading_spinner 0.5s linear infinite;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
@keyframes shimmer {
|
|
145
|
+
100% {
|
|
146
|
+
transform: translateX(100%);
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
@keyframes loading_spinner {
|
|
150
|
+
0% {
|
|
151
|
+
transform-origin: 100% 100%;
|
|
152
|
+
transform: rotate(0deg);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
100% {
|
|
156
|
+
transform-origin: 100% 100%;
|
|
157
|
+
transform: rotate(360deg);
|
|
158
|
+
}
|
|
159
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @author : izzetseydaoglu
|
|
3
|
+
* @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
|
|
4
|
+
* @version : 2026-02-10 20:23:07
|
|
5
|
+
*/
|
|
6
|
+
import React, { ReactNode } from "react";
|
|
7
|
+
interface Props {
|
|
8
|
+
className?: string;
|
|
9
|
+
style?: React.CSSProperties;
|
|
10
|
+
padding?: number;
|
|
11
|
+
children?: ReactNode;
|
|
12
|
+
}
|
|
13
|
+
export declare const BoxContent: ({ className, style, padding, children }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { __assign } from "tslib";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import styles from "./Box.module.css";
|
|
4
|
+
export var BoxContent = function (_a) {
|
|
5
|
+
var className = _a.className, style = _a.style, padding = _a.padding, children = _a.children;
|
|
6
|
+
return (_jsx("div", { className: "".concat(styles.content, " sbox_content ").concat(className || ""), style: __assign(__assign({}, style), { padding: padding }), children: children }));
|
|
7
|
+
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @author : izzetseydaoglu
|
|
3
|
+
* @copyright : sydSOFT Bilişim Hizmetleri (c) 2026
|
|
4
|
+
* @version : 2026-02-10 20:23:07
|
|
5
|
+
*/
|
|
6
|
+
import React from "react";
|
|
7
|
+
interface Props {
|
|
8
|
+
children: React.ReactNode;
|
|
9
|
+
className?: string;
|
|
10
|
+
style?: React.CSSProperties;
|
|
11
|
+
marginTop?: number;
|
|
12
|
+
align?: "flex-start" | "center" | "flex-end" | "stretch";
|
|
13
|
+
}
|
|
14
|
+
export declare const BoxFooter: React.NamedExoticComponent<Props>;
|
|
15
|
+
export {};
|