@sydsoft/base 1.47.0 → 1.48.0

package/dist/esm/tooltip/index.js

@@ -1,59 +1,56 @@
-import { __assign, __rest } from "tslib";
 import React, { memo, useEffect } from "react";
-export var Tooltip = memo(function MemoFunction(_a) {
-    var children = _a.children, title = _a.title, _b = _a.position, position = _b === void 0 ? "top" : _b, _c = _a.arrow, arrow = _c === void 0 ? false : _c, _d = _a.distance, distance = _d === void 0 ? 5 : _d, other = __rest(_a, ["children", "title", "position", "arrow", "distance"]);
-    useEffect(function () {
+export const Tooltip = memo(function MemoFunction({ children, title, position = "top", arrow = false, distance = 5, ...other }) {
+    useEffect(() => {
         if (typeof window === "undefined")
             return null;
-        var cssCheck = document.getElementsByClassName("stooltip_css")[0];
+        const cssCheck = document.getElementsByClassName("stooltip_css")[0];
         if (!cssCheck) {
-            var head = document.getElementsByTagName('head')[0];
-            var s = document.createElement('style');
+            const head = document.getElementsByTagName('head')[0];
+            const s = document.createElement('style');
             s.setAttribute('type', 'text/css');
             s.classList.add("stooltip_css");
             s.appendChild(document.createTextNode(tooltipCss));
             head.appendChild(s);
         }
-        return function () { return tooltipSil(); };
+        return () => tooltipSil();
     }, []);
-    var tooltipEkle = function (e) {
+    const tooltipEkle = (e) => {
         tooltipSil();
-        var tooltip = document.createElement("div");
+        const tooltip = document.createElement("div");
         tooltip.innerHTML = title;
         tooltip.classList.add("stooltip");
         document.body.appendChild(tooltip);
         tooltipPosition({ target: e.currentTarget, position: position });
     };
-    var tooltipSil = function () {
-        var check = document.body.getElementsByClassName("stooltip")[0];
+    const tooltipSil = () => {
+        const check = document.body.getElementsByClassName("stooltip")[0];
         if (check)
             check.remove();
     };
-    var tooltipPosition = function (_a) {
-        var target = _a.target, position = _a.position;
-        var tooltip = document.body.getElementsByClassName("stooltip")[0];
+    const tooltipPosition = ({ target, position }) => {
+        const tooltip = document.body.getElementsByClassName("stooltip")[0];
         if (tooltip) {
-            var arrowMargin = (arrow) ? 5 : 0;
-            var margin = distance + arrowMargin;
+            const arrowMargin = (arrow) ? 5 : 0;
+            const margin = distance + arrowMargin;
             if (arrow)
                 tooltip.classList.add("arrow");
-            var targetPosition = target.getBoundingClientRect();
-            var tooltipPosition_1 = tooltip.getBoundingClientRect();
-            var style = [];
+            const targetPosition = target.getBoundingClientRect();
+            const tooltipPosition = tooltip.getBoundingClientRect();
+            const style = [];
             if (position === "top" || position === "bottom") {
                 if (position === "top") {
-                    if ((targetPosition.top - tooltipPosition_1.height - margin) < 0) {
+                    if ((targetPosition.top - tooltipPosition.height - margin) < 0) {
                         style.push("top:" + (targetPosition.bottom + margin) + "px");
                         tooltip.classList.add("bottom");
                     }
                     else {
-                        style.push("top:" + (targetPosition.top - tooltipPosition_1.height - margin) + "px");
+                        style.push("top:" + (targetPosition.top - tooltipPosition.height - margin) + "px");
                         tooltip.classList.add("top");
                     }
                 }
                 if (position === "bottom") {
-                    if ((targetPosition.bottom + tooltipPosition_1.height + margin) > window.innerHeight) {
-                        style.push("top:" + (targetPosition.top - tooltipPosition_1.height - margin) + "px");
+                    if ((targetPosition.bottom + tooltipPosition.height + margin) > window.innerHeight) {
+                        style.push("top:" + (targetPosition.top - tooltipPosition.height - margin) + "px");
                         tooltip.classList.add("top");
                     }
                     else {
@@ -62,11 +59,11 @@ export var Tooltip = memo(function MemoFunction(_a) {
                     }
                 }
                 // if ((targetPosition.left - tooltipPosition.width) < 0) {
-                if ((targetPosition.left + (targetPosition.width / 2) - (tooltipPosition_1.width / 2)) < 0) {
+                if ((targetPosition.left + (targetPosition.width / 2) - (tooltipPosition.width / 2)) < 0) {
                     style.push("left:2px");
                     tooltip.classList.add("start");
                 }
-                else if ((targetPosition.left + (targetPosition.width / 2) + tooltipPosition_1.width) > window.innerWidth) {
+                else if ((targetPosition.left + (targetPosition.width / 2) + tooltipPosition.width) > window.innerWidth) {
                     style.push("right:2px");
                     tooltip.classList.add("end");
                 }
@@ -78,18 +75,18 @@ export var Tooltip = memo(function MemoFunction(_a) {
             }
             if (position === "left" || position === "right") {
                 if (position === "left") {
-                    if ((targetPosition.left - tooltipPosition_1.width - margin) < 0) {
+                    if ((targetPosition.left - tooltipPosition.width - margin) < 0) {
                         style.push("left:" + (targetPosition.right + margin) + "px");
                         tooltip.classList.add("right");
                     }
                     else {
-                        style.push("left:" + (targetPosition.left - tooltipPosition_1.width - margin) + "px");
+                        style.push("left:" + (targetPosition.left - tooltipPosition.width - margin) + "px");
                         tooltip.classList.add("left");
                     }
                 }
                 if (position === "right") {
-                    if ((targetPosition.left + (targetPosition.width / 2) + tooltipPosition_1.width + margin) > window.innerWidth) {
-                        style.push("left:" + (targetPosition.left - tooltipPosition_1.width - margin) + "px");
+                    if ((targetPosition.left + (targetPosition.width / 2) + tooltipPosition.width + margin) > window.innerWidth) {
+                        style.push("left:" + (targetPosition.left - tooltipPosition.width - margin) + "px");
                         tooltip.classList.add("left");
                     }
                     else {
@@ -97,11 +94,11 @@ export var Tooltip = memo(function MemoFunction(_a) {
                         tooltip.classList.add("right");
                     }
                 }
-                if ((targetPosition.top + (targetPosition.height / 2) - (tooltipPosition_1.height / 2)) < 0) {
+                if ((targetPosition.top + (targetPosition.height / 2) - (tooltipPosition.height / 2)) < 0) {
                     style.push("top:2px");
                     tooltip.classList.add("start");
                 }
-                else if ((targetPosition.top + (targetPosition.height / 2) + (tooltipPosition_1.height / 2)) > window.innerHeight) {
+                else if ((targetPosition.top + (targetPosition.height / 2) + (tooltipPosition.height / 2)) > window.innerHeight) {
                     style.push("bottom:2px");
                     tooltip.classList.add("end");
                 }
@@ -114,6 +111,92 @@ export var Tooltip = memo(function MemoFunction(_a) {
             tooltip.setAttribute("style", style.join(";"));
         }
     };
-    return React.cloneElement(children, __assign({ onMouseEnter: tooltipEkle, onMouseLeave: tooltipSil, onMouseDown: tooltipSil }, other));
+    return React.cloneElement(children, {
+        onMouseEnter: tooltipEkle,
+        onMouseLeave: tooltipSil,
+        onMouseDown: tooltipSil,
+        ...other
+    });
 });
-var tooltipCss = "\n.stooltip {\n    position: fixed;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: #1a1a1a;\n    color: rgba(255,255,255,0.9);\n    text-align: center;\n    font-size: 0.9rem;\n    font-weight:400;\n    padding: 5px 10px;\n    border-radius: 8px;\n    z-index: 1000000;\n    opacity: 0.9;\n    pointer-events: none;\n    /*transition: all 0.1s;*/\n    white-space:pre-line;\n    max-width: 300px;\n    animation: stooltip_fadein 0.7s;\n}\n\n.stooltip.arrow:after {\n    content: \"\";\n    position: absolute;\n    margin-left: -5px;\n    border-width: 5px;\n    border-style: solid;\n}\n\n.stooltip.arrow.top:after {\n    top: 100%;\n    border-color: #1a1a1a transparent transparent transparent;\n}\n\n.stooltip.arrow.top.start:after { left: 15px;}\n\n.stooltip.arrow.top.center:after { left: 50%;}\n\n.stooltip.arrow.top.end:after { right: 15px;}\n\n\n.stooltip.arrow.bottom:after {\n    bottom: 100%;\n    border-color: transparent transparent #1a1a1a transparent;\n}\n\n.stooltip.arrow.bottom.start:after { left: 15px;}\n\n.stooltip.arrow.bottom.center:after { left: 50%;}\n\n.stooltip.bottom.end:after { right: 15px;}\n\n.stooltip.arrow.left:after {\n    margin-left: -1px;\n    left: 100%;\n    border-color: transparent transparent transparent #1a1a1a;\n}\n\n.stooltip.arrow.left.start:after { top: 5px;}\n\n.stooltip.arrow.left.center:after { top: 50%; margin-top: -5px;}\n\n.stooltip.arrow.left.end:after { bottom: 15px;}\n\n.stooltip.arrow.right:after {\n    margin-right: -1px;\n    right: 100%;\n    border-color: transparent #1a1a1a transparent transparent;\n}\n\n.stooltip.arrow.right.start:after { top: 5px;}\n\n.stooltip.arrow.right.center:after { top: 50%; margin-top: -5px;}\n\n.stooltip.arrow.right.end:after { bottom: 15px;}\n\n@keyframes stooltip_fadein {\n    from { opacity: 0; }\n    to   { opacity: 0.85; }\n}\n";
+const tooltipCss = `
+.stooltip {
+    position: fixed;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #1a1a1a;
+    color: rgba(255,255,255,0.9);
+    text-align: center;
+    font-size: 0.9rem;
+    font-weight:400;
+    padding: 5px 10px;
+    border-radius: 8px;
+    z-index: 1000000;
+    opacity: 0.9;
+    pointer-events: none;
+    /*transition: all 0.1s;*/
+    white-space:pre-line;
+    max-width: 300px;
+    animation: stooltip_fadein 0.7s;
+}
+
+.stooltip.arrow:after {
+    content: "";
+    position: absolute;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+}
+
+.stooltip.arrow.top:after {
+    top: 100%;
+    border-color: #1a1a1a transparent transparent transparent;
+}
+
+.stooltip.arrow.top.start:after { left: 15px;}
+
+.stooltip.arrow.top.center:after { left: 50%;}
+
+.stooltip.arrow.top.end:after { right: 15px;}
+
+
+.stooltip.arrow.bottom:after {
+    bottom: 100%;
+    border-color: transparent transparent #1a1a1a transparent;
+}
+
+.stooltip.arrow.bottom.start:after { left: 15px;}
+
+.stooltip.arrow.bottom.center:after { left: 50%;}
+
+.stooltip.bottom.end:after { right: 15px;}
+
+.stooltip.arrow.left:after {
+    margin-left: -1px;
+    left: 100%;
+    border-color: transparent transparent transparent #1a1a1a;
+}
+
+.stooltip.arrow.left.start:after { top: 5px;}
+
+.stooltip.arrow.left.center:after { top: 50%; margin-top: -5px;}
+
+.stooltip.arrow.left.end:after { bottom: 15px;}
+
+.stooltip.arrow.right:after {
+    margin-right: -1px;
+    right: 100%;
+    border-color: transparent #1a1a1a transparent transparent;
+}
+
+.stooltip.arrow.right.start:after { top: 5px;}
+
+.stooltip.arrow.right.center:after { top: 50%; margin-top: -5px;}
+
+.stooltip.arrow.right.end:after { bottom: 15px;}
+
+@keyframes stooltip_fadein {
+    from { opacity: 0; }
+    to   { opacity: 0.85; }
+}
+`;

package/package.json

@@ -1,20 +1,25 @@
 {
     "name": "@sydsoft/base",
     "private": false,
-    "version": "1.47.0",
+    "version": "1.48.0",
     "description": "",
-    "main": "./dist/cjs/index.js",
+    "main": "./dist/esm/index.js",
     "module": "./dist/esm/index.js",
     "types": "./dist/esm/index.d.ts",
     "files": [
         "./dist/",
         "README.md"
     ],
+    "exports": {
+        ".": {
+            "types": "./dist/esm/index.d.ts",
+            "default": "./dist/esm/index.js"
+        }
+    },
     "scripts": {
-        "test": "rm -rf ../*.tgz && rm -rf ../.next && npm run build && npm pack --pack-destination ../ && cd ../ && npm uninstall @sydsoft/base && npm install *.tgz && npm run dev",
-        "buildCommonJS": "rm -rf ./dist && tsc && tsc --module commonjs --outDir ./dist/csj",
-        "copyFiles": "copyfiles -u 2 \"../@base/**/*.css\" dist/esm",
-        "build": "rm -rf ./dist && tsc && npm run copyFiles",
+        "clean": "rm -rf ./dist",
+        "copyFiles": "copyfiles -u 1 \"**/*.css\" dist/esm",
+        "build": "npm run clean && tsc && npm run copyFiles",
         "publishNPM": "npm run build && npm version patch && npm version minor && npm publish --dry-run && npm publish --access public && rm -rf ./dist"
     },
     "publishConfig": {
@@ -36,6 +41,7 @@
     "devDependencies": {
         "@types/react": "^18",
         "@types/react-dom": "^18",
+        "copyfiles": "^2.4.1",
         "react": "^18",
         "react-dom": "^18",
         "typescript": "^5"

package/dist/esm/alert/index.module.css

@@ -1,119 +0,0 @@
-.message {
-  flex: 1;
-}
-
-.close {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 17px;
-  height: 17px;
-  border-radius: 50%;
-  padding: 3px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 9px;
-  letter-spacing: 0;
-  transform: translate(-50%, -50%) scale(0);
-  transition: ease-in-out 0.2s;
-  border: 1px #97979740 solid;
-  box-shadow: 1px 1px 4px 0 #000000a6;
-  cursor: pointer;
-  background: inherit;
-}
-.close:hover {
-  zoom: 1.1;
-}
-.salert:hover .close {
-  transform: translate(-50%, -50%) scale(1);
-}
-.salert {
-  position: relative;
-  min-width: 50px;
-  width: fit-content;
-  margin: 6px 0 6px auto;
-  padding: 10px 15px;
-  border-radius: 5px;
-  cursor: default;
-  background: #1f1f1f;
-  color: rgba(255, 255, 255, 0.93);
-  border: 1px #97979740 solid;
-  box-shadow: 1px 1px 4px 0 #000000a6;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  transition: transform 225ms cubic-bezier(0, 0, 0.2, 1) 0ms;
-  animation: show 0.3s;
-  font-family: inherit;
-  font-size: 1rem;
-  line-height: 1.5;
-}
-
-.error {
-  background: rgb(211, 47, 47);
-  background: linear-gradient(
-    135deg,
-    rgba(211, 47, 47, 1) 0%,
-    rgba(211, 47, 47, 0.8) 70%
-  );
-  color: rgba(255, 255, 255, 0.93);
-}
-
-.success {
-  background: rgb(67, 160, 71);
-  background: linear-gradient(
-    135deg,
-    rgba(67, 160, 71, 1) 0%,
-    rgba(67, 160, 71, 0.8) 70%
-  );
-  color: rgba(255, 255, 255, 0.93);
-}
-
-.info {
-  background: rgb(13, 141, 189);
-  background: linear-gradient(
-    135deg,
-    rgba(13, 141, 189, 1) 0%,
-    rgba(13, 141, 189, 0.8) 70%
-  );
-  color: rgba(255, 255, 255, 0.93);
-}
-
-.warning {
-  background: rgb(217, 142, 4);
-  background: linear-gradient(
-    135deg,
-    rgba(217, 142, 4, 1) 0%,
-    rgba(217, 142, 4, 0.8) 70%
-  );
-  color: rgba(255, 255, 255, 0.93);
-}
-
-.loading {
-  background: linear-gradient(
-    60deg,
-    rgb(15 33 34) 0%,
-    rgba(0, 172, 193, 1) 100%
-  );
-  color: rgba(255, 255, 255, 0.93);
-  animation: waves 50s infinite linear;
-}
-
-@keyframes show {
-  from {
-    transform: translateX(200%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes waves {
-  from {
-    background-position: 0;
-  }
-  to {
-    background-position: 100vw 0;
-  }
-}