ar-design 0.4.12 → 0.4.13

package/dist/assets/css/components/data-display/kanban-board/styles.css

@@ -4,13 +4,13 @@
   max-width: 100%;
   min-width: 100%;
   border-radius: var(--border-radius-lg);
-  padding-bottom: 1rem;
   overflow-x: auto;
+  overflow-y: auto;
 
   /* width */
   &::-webkit-scrollbar {
-    width: 0.5rem;
-    height: 0.5rem;
+    width: 0.75rem;
+    height: 0.75rem;
   }
 
   /* Track */
@@ -29,77 +29,128 @@
     background: var(--gray-500);
   }
 
-  > .columns {
+  > .buttons {
+    position: absolute;
+    top: 150px;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    height: 2.5rem;
+    z-index: 5;
+
+    > .button {
+      position: relative;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background-color: rgba(var(--black-rgb), 0.1);
+      backdrop-filter: blur(5px);
+      width: 2rem;
+      height: 5rem;
+      border-radius: var(--border-radius-sm);
+      cursor: pointer;
+
+      &.left {
+        left: -10px;
+      }
+
+      &.right {
+        right: 0;
+      }
+    }
+  }
+
+  > .titles {
+    position: sticky;
+    top: 0;
+    left: auto;
+    right: auto;
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     gap: 1.5rem;
     width: 100%;
+    z-index: 5;
 
-    > .column {
+    > .title {
       display: flex;
       flex-direction: column;
-      flex-wrap: nowrap;
-      gap: 0.75rem;
-      position: relative;
-      flex-shrink: 0;
+      justify-content: center;
+      gap: 0.5rem;
+      background-color: var(--white);
       max-width: 350px;
       min-width: 350px;
-      user-select: none;
+      margin-bottom: 1rem;
+      padding: 0.5rem 1rem;
+      border-radius: var(--border-radius-lg);
+      color: var(--gray-700);
+      font-family: var(--system);
+      font-size: 0.85rem;
+      font-weight: 700;
+      box-shadow: 0px 5px 5px -2px rgba(var(--black-rgb), 0.1);
 
-      > .title {
+      > h4 {
         display: flex;
-        flex-direction: column;
-        justify-content: center;
+        flex-direction: row;
+        align-items: center;
         gap: 0.5rem;
-        background-color: var(--white);
-        padding: 0.5rem 1rem;
-        border-radius: var(--border-radius-lg);
-        color: var(--gray-700);
-        font-family: var(--system);
-        font-size: 0.85rem;
-        font-weight: 700;
-        box-shadow: 0px 5px 5px -2px rgba(var(--black-rgb), 0.1);
-
-        > h4 {
-          display: flex;
-          flex-direction: row;
-          align-items: center;
-          gap: 0.5rem;
-          color: var(--gray-500);
+        color: var(--gray-500);
 
-          > span {
-            position: relative;
-            width: 5px;
-            height: 20px;
-            border-radius: var(--border-radius-pill);
+        > span {
+          position: relative;
+          width: 5px;
+          height: 20px;
+          border-radius: var(--border-radius-pill);
 
-            &::after {
-              position: absolute;
-              top: 50%;
-              transform: translateY(-50%);
-              left: 100%;
-              content: "";
-              border: solid 5px transparent;
-              border-left-color: inherit;
-            }
+          &::after {
+            position: absolute;
+            top: 50%;
+            transform: translateY(-50%);
+            left: 100%;
+            content: "";
+            border: solid 5px transparent;
+            border-left-color: inherit;
           }
         }
+      }
 
-        > span {
-          color: var(--gray-400);
-          font-weight: 400;
-        }
+      > span {
+        color: var(--gray-400);
+        font-weight: 400;
       }
+    }
+  }
+
+  > .columns {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    gap: 1.5rem;
+    width: 100%;
+    height: max-content;
+    z-index: 4;
+
+    > .column {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      flex-wrap: nowrap;
+      gap: 0.75rem;
+      flex-shrink: 0;
+      max-width: 350px;
+      min-width: 350px;
+      user-select: none;
 
       > .items {
         position: relative;
         background-color: var(--white);
         padding: 1rem;
-        height: calc(100% - 1rem);
+        height: 100%;
         border: dashed 0 transparent;
         border-radius: var(--border-radius-lg);
-        transition: transform 250ms, border 250ms ease-in-out;
+        transition:
+          transform 250ms,
+          border 250ms ease-in-out;
 
         &:has(> .no-item) {
           display: flex;
@@ -158,3 +209,86 @@
     }
   }
 }
+
+/* --- [KÜÇÜK MOBİL - IPHONE SE VB.] --- */
+/* Çok dar ekranlar için özel düzeltmeler */
+@media (max-width: 375px) {
+}
+
+/* --- [MOBİL - STANDART] --- */
+/* Ekran 576px ve altına düştüğünde çalışır */
+@media (max-width: 576px) {
+}
+
+/* --- [TABLET DİKEY & BÜYÜK TELEFONLAR] --- */
+/* Ekran 768px ve altına düştüğünde çalışır */
+@media (max-width: 768px) {
+  .ar-kanban-board {
+    /* width */
+    &::-webkit-scrollbar {
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+    }
+
+    /* Handle on hover */
+    &::-webkit-scrollbar-thumb:hover {
+    }
+
+    > .buttons {
+      display: none;
+
+      > .button {
+        &.left {
+        }
+
+        &.right {
+        }
+      }
+    }
+
+    > .titles {
+      > .title {
+        > h4 {
+          > span {
+            &::after {
+            }
+          }
+        }
+
+        > span {
+        }
+      }
+    }
+
+    > .columns {
+      > .column {
+        > .items {
+          &:has(> .no-item) {
+          }
+
+          &.dragging {
+          }
+
+          > .no-item {
+            &::after {
+            }
+
+            > span {
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+/* --- [TABLET & KÜÇÜK LAPTOP] --- */
+/* Ekran 1024px ve altına düştüğünde çalışır */
+@media (max-width: 1024px) {
+}

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

@@ -74,8 +74,7 @@
       }
     }
 
-    > .left,
-    .right {
+    > .button {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
@@ -86,22 +85,20 @@
       backdrop-filter: blur(5px);
       width: 2rem;
       height: 2rem;
-      border-radius: var(--border-radius);
-      color: var(--blue);
-      font-size: 1rem;
+      border-radius: var(--border-radius-sm);
       cursor: pointer;
       transition:
         visibility 0.25s,
         opacity 0.25s ease-in-out;
       z-index: 5;
-    }
 
-    > .left {
-      left: 0;
-    }
+      &.left {
+        left: 0;
+      }
 
-    > .right {
-      right: 0;
+      &.right {
+        right: 0;
+      }
     }
   }
 
@@ -191,52 +188,6 @@
 /* --- [MOBİL - STANDART] --- */
 /* Ekran 576px ve altına düştüğünde çalışır */
 @media (max-width: 576px) {
-  .ar-tabs {
-    > .tabs {
-      padding: 0 2rem;
-
-      > .container {
-        > .item {
-          &:not(:last-child) {
-            &::after {
-            }
-          }
-
-          &.selection {
-            &::before {
-            }
-          }
-
-          > .close-button {
-          }
-        }
-      }
-
-      > .left,
-      .right {
-      }
-
-      > .left {
-      }
-
-      > .right {
-      }
-    }
-
-    &.skeleton {
-      > .tabs {
-        > .item {
-          > span {
-          }
-        }
-      }
-
-      > .content {
-        &::before {
-        }
-      }
-    }
-  }
 }
 
 /* --- [TABLET DİKEY & BÜYÜK TELEFONLAR] --- */
@@ -263,14 +214,12 @@
         }
       }
 
-      > .left,
-      .right {
-      }
-
-      > .left {
-      }
+      > .button {
+        &.left {
+        }
 
-      > .right {
+        &.right {
+        }
       }
     }
 

package/dist/components/data-display/kanban-board/IProps.d.ts

@@ -3,5 +3,13 @@ interface IProps<T, TColumnProperties> {
     trackBy: (item: T) => string;
     columns: KanbanBoardColumnType<T, TColumnProperties>[];
     onChange?: (item: T, columnKey: string, columnProperties: TColumnProperties, hoverIndex: number) => void;
+    config?: {
+        safeAreaOffset?: {
+            top?: number;
+            right?: number;
+            bottom?: number;
+            left?: number;
+        };
+    };
 }
 export default IProps;

package/dist/components/data-display/kanban-board/index.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
 import IProps from "./IProps";
 import "../../../assets/css/components/data-display/kanban-board/styles.css";
-declare const KanbanBoard: <T, TColumnProperties>({ trackBy, columns, onChange }: IProps<T, TColumnProperties>) => React.JSX.Element;
+declare const KanbanBoard: <T, TColumnProperties>({ trackBy, columns, onChange, config, }: IProps<T, TColumnProperties>) => React.JSX.Element;
 export default KanbanBoard;

package/dist/components/data-display/kanban-board/index.js

@@ -2,10 +2,12 @@
 import React, { useEffect, useRef, useState } from "react";
 import "../../../assets/css/components/data-display/kanban-board/styles.css";
 import DnD from "../dnd";
-const KanbanBoard = function ({ trackBy, columns, onChange }) {
+import { ARIcon } from "../../icons";
+const KanbanBoard = function ({ trackBy, columns, onChange, config, }) {
     // refs
     const _kanbanWrapper = useRef(null);
     const _hoverItemIndex = useRef(null);
+    const _scrollInterval = useRef(null);
     const _scrollAnimationFrame = useRef(null);
     const _scrollSpeedRef = useRef(0); // px/frame
     // states
@@ -95,6 +97,21 @@ const KanbanBoard = function ({ trackBy, columns, onChange }) {
         if (item.classList.contains("dragging"))
             item.classList.remove("dragging");
     };
+    const handleStartScroll = (direction) => {
+        const el = _kanbanWrapper.current;
+        if (!el)
+            return;
+        handleStopScroll();
+        _scrollInterval.current = window.setInterval(() => {
+            el.scrollLeft += direction === "left" ? -10 : 10;
+        }, 16); // ~60fps
+    };
+    const handleStopScroll = () => {
+        if (_scrollInterval.current) {
+            clearInterval(_scrollInterval.current);
+            _scrollInterval.current = null;
+        }
+    };
     const stopScrolling = () => {
         if (_scrollAnimationFrame.current) {
             cancelAnimationFrame(_scrollAnimationFrame.current);
@@ -114,16 +131,23 @@ const KanbanBoard = function ({ trackBy, columns, onChange }) {
     };
     // useEffects
     useEffect(() => setData(columns), [columns]);
-    return (React.createElement("div", { ref: _kanbanWrapper, className: "ar-kanban-board", onDragOver: handleBoardDragOver, onDragEnd: stopScrolling, onDrop: stopScrolling },
+    return (React.createElement("div", { ref: _kanbanWrapper, className: "ar-kanban-board", style: {
+            height: `calc(100dvh - (${_kanbanWrapper.current?.getBoundingClientRect().top}px + ${config?.safeAreaOffset?.bottom ?? 0}px))`,
+        }, onDragOver: handleBoardDragOver, onDragEnd: stopScrolling, onDrop: stopScrolling },
+        React.createElement("div", { className: "buttons" },
+            React.createElement("div", { className: "button left", onMouseDown: () => handleStartScroll("left"), onMouseUp: handleStopScroll, onMouseLeave: handleStopScroll },
+                React.createElement(ARIcon, { icon: "ArrowLeft" })),
+            React.createElement("div", { className: "button right", onMouseDown: () => handleStartScroll("right"), onMouseUp: handleStopScroll, onMouseLeave: handleStopScroll },
+                React.createElement(ARIcon, { icon: "ArrowRight" }))),
+        React.createElement("div", { className: "titles" }, data.map((board, index) => (React.createElement("div", { key: index, className: "title" },
+            React.createElement("h4", null,
+                React.createElement("span", { style: {
+                        backgroundColor: darkenColor(board.titleColor ?? "", 1),
+                        borderColor: darkenColor(board.titleColor ?? "", 1),
+                    } }),
+                board.title.toLocaleUpperCase("tr")),
+            board.description && React.createElement("span", null, board.description))))),
         React.createElement("div", { className: "columns" }, data.map((board, index) => (React.createElement("div", { key: index, className: "column", onDrop: handleDrop(board.key) },
-            React.createElement("div", { className: "title" },
-                React.createElement("h4", null,
-                    React.createElement("span", { style: {
-                            backgroundColor: darkenColor(board.titleColor ?? "", 1),
-                            borderColor: darkenColor(board.titleColor ?? "", 1),
-                        } }),
-                    board.title.toLocaleUpperCase("tr")),
-                board.description && React.createElement("span", null, board.description)),
             React.createElement("div", { className: "items", onDragOver: handleItemsDragOver, onDragLeave: handleItemsDragLeave, onDrop: handleItemsDrop },
                 React.createElement(DnD, { key: board.key, data: board.items, renderItem: (item, index) => {
                         return (React.createElement("div", { key: index, className: "item", onDragOver: (event) => {

package/dist/components/data-display/tabs/index.js

@@ -80,9 +80,9 @@ const Tabs = ({ name, tabs = [], activeTab, onChange, onClose }) => {
         return React.createElement(Skeleton, { name: name, tabs: tabs });
     return (React.createElement("div", { className: "ar-tabs" },
         React.createElement("div", { className: "tabs" },
-            scrollInfo.current > 0 && (React.createElement("div", { className: "left", onClick: () => scroll("left") },
+            scrollInfo.current > 0 && (React.createElement("div", { className: "button left", onClick: () => scroll("left") },
                 React.createElement(ARIcon, { icon: "ArrowLeft", stroke: "var(--gray-700)" }))),
-            !scrollInfo.isMaxRight && (React.createElement("div", { className: "right", onClick: () => scroll("right") },
+            !scrollInfo.isMaxRight && (React.createElement("div", { className: "button right", onClick: () => scroll("right") },
                 React.createElement(ARIcon, { icon: "ArrowRight", stroke: "var(--gray-700)" }))),
             React.createElement("div", { ref: _container, className: "container", onScroll: handleScroll }, tabs.length > 0 &&
                 tabs.map((tab, index) => {

package/package.json

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