ar-design 0.1.24 → 0.1.26

package/dist/assets/css/components/data-display/table/table.css

@@ -35,14 +35,27 @@
 }
 
 .ar-table > .content > table > thead > tr > th {
+  position: relative;
   background-color: var(--gray-100);
-  padding: 1rem 0.5rem;
-  color: var(--gray-700);
-  box-shadow: 0 2px 0 0 var(--gray-200);
+  padding: 0.5rem;
+  color: var(--gray-600);
   text-align: left;
   transition: background 250ms, box-shadow 250ms ease-in-out;
   z-index: 2;
 }
+.ar-table > .content > table > thead > tr > th::after {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 0;
+  content: "";
+  background-color: var(--gray-200);
+  width: 1px;
+  height: 50%;
+}
+.ar-table > .content > table > thead > tr > th:last-child:after {
+  display: none;
+}
 .ar-table > .content > table > thead > tr > th.selection-col {
   width: 2rem;
 }

package/dist/assets/css/components/layout/header.css

@@ -20,5 +20,6 @@
 .ar-layout > header > .ar-header-with-wrap > .logo-wrapper {
   display: flex;
   flex-direction: row;
+  align-items: center;
   gap: 0 1rem;
 }

package/dist/assets/css/components/navigation/menu/core/open-or-close.css

@@ -2,52 +2,10 @@
   opacity: 0;
   max-height: 0;
   overflow: hidden;
-  transition: max-height 250ms, opacity 250ms ease-in-out;
 }
 
 .ar-menu ul li ul.opened {
   opacity: 1;
   max-height: 100rem;
+  margin: 0.5rem 0 0.5rem 1rem;
 }
-
-/* .ar-menu ul li ul {
-  opacity: 0;
-  max-height: 0;
-  overflow: hidden;
-  transition: max-height 250ms ease-in-out, opacity 250ms cubic-bezier(1, 0, 0, 1);
-}
-.ar-menu .ar-menu-list-item-groups.opened {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem 0;
-  opacity: 1;
-  max-height: 100rem;
-  padding-top: 0.2rem;
-  padding-bottom: 0.2rem;
-}
-.ar-menu .ar-menu-list-item-group-item-title {
-  display: flex;
-  align-items: center;
-}
-.ar-menu .ar-menu-list-item-group-item-title:is(.ar-angle-down, .ar-angle-up) {
-  cursor: pointer;
-}
-.ar-menu .ar-menu-list-item-group-item-title:is(.ar-angle-down, .ar-angle-up)::after {
-  display: inline-block;
-  position: relative;
-  top: 0.5px;
-  content: "";
-  width: 0.5rem;
-  height: 0.5rem;
-  margin-left: 0.5rem;
-  border: solid 2px transparent;
-  border-right-color: var(--red);
-  border-bottom-color: var(--red);
-  transform-origin: center;
-  transform: rotate(45deg);
-  transition: top 250ms, transform 250ms ease-in-out;
-}
-.ar-menu .ar-menu-list-item-group-item-title.ar-angle-up::after {
-  top: -1px;
-  transform: rotate(585deg);
-} */

package/dist/assets/css/components/navigation/menu/menu.css

@@ -3,25 +3,46 @@
   font-family: var(--system);
 }
 .ar-menu ul {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem 0;
   margin: 0;
   padding: 0;
   list-style: none;
 }
+.ar-menu ul li {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
 .ar-menu ul li a {
   color: inherit;
   text-decoration: none;
   letter-spacing: 1px;
 }
-.ar-menu ul li ul {
-  margin-left: 1rem;
+.ar-menu ul li span {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 2rem;
+  height: 2rem;
+  margin-right: 0.75rem;
+  border-radius: var(--border-radius-pill);
+}
+.ar-menu ul li span svg {
+  color: var(--light);
 }
+
 .ar-menu ul li.selected {
   color: var(--primary);
 }
+.ar-menu ul li.selected span {
+  background-color: var(--primary);
+  box-shadow: 0 0 0 5px rgba(var(--primary-rgb), 0.1);
+}
+.ar-menu ul li.selected span svg {
+  color: var(--white);
+}
 
 /* Core Css */
-/* @import url("./core/selected.css"); */
 @import url("./core/open-or-close.css");
-
-/* Variant Css */
-/* @import url("./variant/vertical.css"); */

package/dist/components/layout/Header.js

@@ -5,7 +5,7 @@ const Header = ({ logoWrapper, actions }) => {
         React.createElement("div", { className: "ar-header-with-wrap" },
             React.createElement("div", { className: "logo-wrapper" },
                 logoWrapper?.image && logoWrapper.image,
-                logoWrapper?.text && React.createElement("h1", null, logoWrapper.text)),
+                logoWrapper?.text && React.createElement("h3", null, logoWrapper.text)),
             actions && actions)));
 };
 Header.displayName = "Layout.Header";

package/dist/components/navigation/menu/index.js

@@ -21,37 +21,32 @@ const handleOnClick = (event) => {
  * @param type - "group" | "divider" türlerinden birisi olmalıdır.
  * @returns Menü yapısını temsil eden iç içe geçmiş liste
  */
-const SubMenu = ({ items, variant, type, setSelectedMenu, selectedMenu, setSelectedItem, selectedItem }) => {
+const SubMenu = ({ items, variant, setSelectedMenu, selectedMenu, setSelectedItem, selectedItem }) => {
     if (!items)
         return null;
     let className = ["list"];
-    if (variant === "vertical" && type === "group")
-        className.push("opened");
     return (React.createElement("ul", { className: className.map((c) => c).join(" ") }, items.map((item, index) => {
-        let className_li = ["item"];
-        if (item.submenu && item.submenu.length > 0) {
-            if (variant === "horizontal" || item.type !== "group")
-                if (selectedMenu.length > 0 && selectedMenu.includes(item) && item.type !== "group") {
-                    // Eğer seçili olan menüyse "selected" sınıfını ekler.
-                    className_li.push("selected");
-                }
-        }
-        return (React.createElement("li", { key: index, className: className_li.map((c) => c).join(" "), onClick: handleOnClick },
+        if (item.type === "group")
+            className.push("opened");
+        return (React.createElement("li", { key: index, className: "item", onClick: handleOnClick },
+            React.createElement("span", null, item.icon && item.icon),
             item.render,
-            item.submenu && (React.createElement(SubMenu, { items: item.submenu, variant: variant, type: item.type, setSelectedMenu: setSelectedMenu, selectedMenu: selectedMenu, setSelectedItem: setSelectedItem, selectedItem: selectedItem }))));
+            item.submenu && (React.createElement(SubMenu, { items: item.submenu, variant: variant, setSelectedMenu: setSelectedMenu, selectedMenu: selectedMenu, setSelectedItem: setSelectedItem, selectedItem: selectedItem }))));
     })));
 };
 const Menu = ({ data, variant = "vertical", ...attributes }) => {
-    // refs
-    let _className_li = ["item"];
     // states
     const [selectedMenu, setSelectedMenu] = useState([]);
     const [selectedItem, setSelectedItem] = useState(null);
     return (React.createElement("nav", { className: "ar-menu", ...attributes },
         React.createElement("ul", { className: "list" }, data.map((item, index) => {
-            return (React.createElement("li", { key: index, className: _className_li.map((c) => c).join(" "), onClick: handleOnClick },
+            let className_li = ["item"];
+            if (item.type === "group")
+                className_li.push("opened");
+            return (React.createElement("li", { key: index, className: className_li.map((c) => c).join(" "), onClick: handleOnClick },
+                React.createElement("span", null, item.icon && item.icon),
                 item.type === "divider" ? React.createElement(Divider, null) : item.render,
-                item.submenu && (React.createElement(SubMenu, { items: item.submenu, variant: variant, type: item.type, setSelectedMenu: setSelectedMenu, selectedMenu: selectedMenu, setSelectedItem: setSelectedItem, selectedItem: selectedItem }))));
+                item.submenu && (React.createElement(SubMenu, { items: item.submenu, variant: variant, setSelectedMenu: setSelectedMenu, selectedMenu: selectedMenu, setSelectedItem: setSelectedItem, selectedItem: selectedItem }))));
         }))));
 };
 Menu.displayName = "Menu";

package/dist/libs/core/service/index.js

@@ -17,7 +17,7 @@ class Service {
             });
             const text = (await response.text()).trim();
             return {
-                ...(text.length > 0 ? await response.json() : {}),
+                ...(text.length > 0 ? JSON.parse(text) : {}),
                 __ok__: response.ok,
                 __statusCode__: response.status,
                 __statusText__: response.statusText,
@@ -39,7 +39,7 @@ class Service {
             });
             const text = (await response.text()).trim();
             return {
-                ...(text.length > 0 ? await response.json() : {}),
+                ...(text.length > 0 ? JSON.parse(text) : {}),
                 __ok__: response.ok,
                 __statusCode__: response.status,
                 __statusText__: response.statusText,
@@ -61,7 +61,7 @@ class Service {
             });
             const text = (await response.text()).trim();
             return {
-                ...(text.length > 0 ? await response.json() : {}),
+                ...(text.length > 0 ? JSON.parse(text) : {}),
                 __ok__: response.ok,
                 __statusCode__: response.status,
                 __statusText__: response.statusText,
@@ -82,7 +82,7 @@ class Service {
             });
             const text = (await response.text()).trim();
             return {
-                ...(text.length > 0 ? await response.json() : {}),
+                ...(text.length > 0 ? JSON.parse(text) : {}),
                 __ok__: response.ok,
                 __statusCode__: response.status,
                 __statusText__: response.statusText,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/dist/assets/css/components/navigation/menu/core/selected.css

@@ -1,17 +0,0 @@
-.ar-menu .ar-menu-list-item.selected {
-  background-color: rgba(var(--black-rgb), 0.03) !important;
-  border-top-left-radius: var(--border-radius-lg);
-  border-bottom-left-radius: var(--border-radius-lg);
-}
-
-/* SubMenu */
-.ar-menu .ar-menu-list-item-group-item.selected {
-  background-color: rgba(var(--black-rgb), 0.03) !important;
-  border-top-left-radius: var(--border-radius-lg);
-  border-bottom-left-radius: var(--border-radius-lg);
-}
-.ar-menu .ar-menu-list-item-group-item-title.selected {
-  background-color: var(--gray-200) !important;
-  border-radius: var(--border-radius-lg);
-  box-shadow: 0 0 0 1px var(--gray-200);
-}