@sydsoft/base 1.12.0 → 1.13.0

package/dist/esm/form/Dialog.js

@@ -1,9 +1,9 @@
 import { __assign } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, BoxFooter } from "../box";
-import { Button } from "./Button";
-import { Modal } from "../modal";
 import { createRoot } from "react-dom/client";
+import { Modal } from "../modal";
+import { Button } from "./Button";
 export var Dialog = function (config) {
     return new Promise(function (resolve) {
         if (typeof window === "undefined")
@@ -17,7 +17,7 @@ export var Dialog = function (config) {
         }
         var root = createRoot(mainDiv);
         var settings = __assign({ acceptButtonShow: true, cancelButtonShow: true, acceptButtonText: "EVET", cancelButtonText: "HAYIR", acceptButtonClass: "danger", cancelButtonClass: "secondary", vertialAlign: "center", horizontalAlign: "center", hideBackdrop: true, hideEsc: true, styleMessage: {
-                fontSize: "1.2rem",
+                fontSize: "1.1rem",
                 padding: "10px 20px"
             }, styleBox: { padding: 0, margin: 0, minWidth: 250 }, styleBoxFooter: { padding: "8px 5px" }, autoFocus: "accept" }, config);
         var close = function () {

package/dist/esm/index.d.ts

@@ -5,6 +5,7 @@ export * from "./datetime";
 export * from "./form";
 export * from "./grid";
 export * from "./icon";
+export * from "./menu";
 export * from "./modal";
 export * from "./popover";
 export * from "./tooltip";

package/dist/esm/index.js

@@ -5,6 +5,7 @@ export * from "./datetime";
 export * from "./form";
 export * from "./grid";
 export * from "./icon";
+export * from "./menu";
 export * from "./modal";
 export * from "./popover";
 export * from "./tooltip";

package/dist/esm/menu/index.d.ts

@@ -0,0 +1,43 @@
+import { propsDialog } from "../form";
+import React from "react";
+interface BaseProps {
+    style?: React.CSSProperties;
+    itemProps?: any;
+    [key: string]: any;
+}
+interface SeperatorProps extends BaseProps {
+    seperator: boolean;
+    title?: never;
+    icon?: never;
+    fullComponent?: never;
+    href?: never;
+    onClick?: never;
+    dialog?: never;
+}
+interface FullComponentProps extends BaseProps {
+    fullComponent: React.ReactElement;
+    seperator?: never;
+    title?: never;
+    icon?: never;
+    href?: never;
+    onClick?: never;
+    dialog?: never;
+}
+interface ItemComponentProps extends BaseProps {
+    seperator?: false;
+    fullComponent?: never;
+    title: string;
+    icon?: React.ReactNode;
+    href?: string;
+    onClick?: (e: React.MouseEvent<HTMLLIElement>) => void;
+    dialog?: propsDialog;
+}
+export type typeMenu = SeperatorProps | FullComponentProps | ItemComponentProps;
+interface Props {
+    menu: typeMenu[];
+    className?: string;
+    style?: React.CSSProperties;
+    withIcon?: boolean;
+}
+export declare const Menu: React.NamedExoticComponent<Props>;
+export {};

package/dist/esm/menu/index.js

@@ -0,0 +1,32 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Dialog } from "../form";
+import React, { memo } from "react";
+import Link from "next/link";
+import styles from "./index.module.css";
+export var Menu = memo(function MemoFunction(_a) {
+    var menu = _a.menu, className = _a.className, style = _a.style, _b = _a.withIcon, withIcon = _b === void 0 ? true : _b;
+    var handleClick = function (item, e) {
+        if (!item.onClick)
+            return;
+        if (item.dialog) {
+            Dialog(__assign({}, item.dialog)).then(function (result) {
+                if (result && item.onClick) {
+                    item.onClick(e);
+                }
+            });
+        }
+        else {
+            item.onClick(e);
+        }
+    };
+    return (_jsx("ul", { className: "smenu ".concat(styles.ul, " ").concat(className || ""), style: style, children: Object.values(menu).map(function (item, key) {
+            var fullComponent = item.fullComponent, icon = item.icon, title = item.title, onClick = item.onClick, seperator = item.seperator, href = item.href, style = item.style, itemProps = item.itemProps, other = __rest(item, ["fullComponent", "icon", "title", "onClick", "seperator", "href", "style", "itemProps"]);
+            if (fullComponent)
+                return React.cloneElement(fullComponent, { key: key });
+            if (seperator)
+                return _jsx("li", __assign({ className: "".concat(styles.li, " ").concat(styles.seperator), style: style }, itemProps, other), key);
+            var Component = (_jsxs(_Fragment, { children: [withIcon && _jsx("div", { className: styles.menuicon, children: icon }), _jsx("div", { className: styles.menutitle, children: title })] }));
+            return (_jsx("li", __assign({ className: "".concat(styles.li), style: style, onClick: function (e) { return handleClick(item, e); } }, itemProps, other, { children: (href) ? _jsx(Link, { href: href, children: Component }) : Component }), key));
+        }) }));
+});

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

@@ -0,0 +1,67 @@
+.ul {
+    position: relative;
+    width: 100%;
+    background-color: #fff;
+    box-shadow: 0 2px 4px rgb(0 0 0 / 40%), 0 8px 16px rgb(0 0 0 / 10%);
+    border-radius: 8px;
+    margin: 0;
+    padding: 4px 0;
+    list-style: none;
+}
+.li {
+    cursor: pointer;
+    padding: 7px 15px;
+    min-height: 25px;
+}
+.li,
+.li a {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    width: 100%;
+}
+.li a,
+.li a:visited {
+    color: inherit;
+    text-decoration: none;
+}
+
+.li.seperator {
+    display: block;
+    border-bottom: 1px #ced0d4 solid;
+    margin: 4px;
+    padding: 0;
+    cursor: default;
+    min-height: unset;
+}
+
+.li:first-child {
+    margin-top: 5px;
+}
+
+.li:last-child {
+    margin-bottom: 5px;
+}
+
+.li:hover {
+    background: #f0f2f5;
+}
+
+.menuicon {
+    display: inline-flex;
+    overflow: hidden;
+    width: 35px;
+    flex: 0 0 auto;
+    align-items: center;
+    justify-content: center;
+    margin-right: 15px;
+    color: #606060;
+}
+
+.menutitle {
+    display: inline-flex;
+    flex: 1;
+    align-items: center;
+    justify-content: flex-start;
+    margin-right: 10px;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@sydsoft/base",
     "private": false,
-    "version": "1.12.0",
+    "version": "1.13.0",
     "description": "",
     "main": "./dist/cjs/index.js",
     "module": "./dist/esm/index.js",