@thebuoyant-tsdev/mui-ts-library 3.31.0 → 3.33.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/README.de.md +28 -0
- package/README.md +28 -0
- package/dist/components/kanban-board/KanbanBoard.d.ts +1 -1
- package/dist/components/kanban-board/KanbanBoard.js +72 -62
- package/dist/components/kanban-board/KanbanBoard.types.d.ts +16 -0
- package/dist/components/kanban-board/KanbanBoardCard.d.ts +2 -1
- package/dist/components/kanban-board/KanbanBoardCard.js +71 -46
- package/dist/components/kanban-board/KanbanBoardColumn.d.ts +4 -1
- package/dist/components/kanban-board/KanbanBoardColumn.js +22 -21
- package/dist/components/kanban-board/kanbanBoardClasses.d.ts +2 -0
- package/dist/components/kanban-board/kanbanBoardClasses.js +1 -0
- package/dist/index.cjs +2 -2
- package/package.json +1 -1
package/README.de.md
CHANGED
|
@@ -555,6 +555,34 @@ Dieses Projekt folgt [Semantic Versioning](https://semver.org/):
|
|
|
555
555
|
|
|
556
556
|
## Changelog
|
|
557
557
|
|
|
558
|
+
### [3.33.0] — 2026-07-18
|
|
559
|
+
|
|
560
|
+
**Hinzugefügt**
|
|
561
|
+
- **KanbanBoard — `filterText`-Prop**: `filterText?: string` filtert sichtbare Karten nach Titel und Zuständiger Person. Der Consumer rendert das Suchfeld selbst und übergibt den String. Spalten-Counter passen sich an; WIP-Limit-Prüfungen nutzen die ungefilterte Gesamtanzahl. Siehe [Vollständiger Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.de.md) für Details.
|
|
562
|
+
|
|
563
|
+
---
|
|
564
|
+
|
|
565
|
+
### [3.32.0] — 2026-07-18
|
|
566
|
+
|
|
567
|
+
**Hinzugefügt**
|
|
568
|
+
- **KanbanBoard — `priority`-Feld + `showPriority`-Prop**: `priority?: "low" | "medium" | "high" | "critical"` auf `KanbanTask` — als farbiger Punkt neben dem Kartentitel. `showPriority={false}` blendet alle Punkte aus. Neuer Typ-Export: `KanbanTaskPriority`. Siehe [Vollständiger Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.de.md) für Details.
|
|
569
|
+
|
|
570
|
+
---
|
|
571
|
+
|
|
572
|
+
### [3.31.0] — 2026-07-18
|
|
573
|
+
|
|
574
|
+
**Hinzugefügt**
|
|
575
|
+
- **KanbanBoard — `showDueDateWarning`**: Überfällige Karten (dueDate in der Vergangenheit) erhalten automatisch roten Chip, Hintergrundton und linken Rahmen. `showDueDateWarning={false}` zum Deaktivieren. Siehe [Vollständiger Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.de.md) für Details.
|
|
576
|
+
- **KanbanBoard — `width`-Prop**: `width?: number | string` (Standard `"100%"`).
|
|
577
|
+
|
|
578
|
+
**Behoben**
|
|
579
|
+
- **KanbanBoard — Spalten-Scroll**: Karten in einer hohen Spalte scrollen jetzt korrekt statt still abgeschnitten zu werden.
|
|
580
|
+
|
|
581
|
+
**Geändert**
|
|
582
|
+
- **KanbanBoard — Kartenoptik poliert**: Expliziter `1px`-Rahmen, kontrollierter Box-Shadow mit Hover-Lift, ausgeblendeter Scrollbalken, `fontWeight: 700`-Titel. Siehe [Vollständiger Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.de.md) für Details.
|
|
583
|
+
|
|
584
|
+
---
|
|
585
|
+
|
|
558
586
|
### [3.30.0] — 2026-07-17
|
|
559
587
|
|
|
560
588
|
**Hinzugefügt**
|
package/README.md
CHANGED
|
@@ -555,6 +555,34 @@ This project follows [Semantic Versioning](https://semver.org/):
|
|
|
555
555
|
|
|
556
556
|
## Changelog
|
|
557
557
|
|
|
558
|
+
### [3.33.0] — 2026-07-18
|
|
559
|
+
|
|
560
|
+
**Added**
|
|
561
|
+
- **KanbanBoard — `filterText` prop**: `filterText?: string` filters visible cards by title and assignee. The consumer renders the search field and passes the string. Column counters adjust; WIP-limit checks use the unfiltered total. See [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) for details.
|
|
562
|
+
|
|
563
|
+
---
|
|
564
|
+
|
|
565
|
+
### [3.32.0] — 2026-07-18
|
|
566
|
+
|
|
567
|
+
**Added**
|
|
568
|
+
- **KanbanBoard — `priority` field + `showPriority` prop**: `priority?: "low" | "medium" | "high" | "critical"` on `KanbanTask` — shown as a colored dot next to the card title. `showPriority={false}` to hide all dots. New type export: `KanbanTaskPriority`. See [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) for details.
|
|
569
|
+
|
|
570
|
+
---
|
|
571
|
+
|
|
572
|
+
### [3.31.0] — 2026-07-18
|
|
573
|
+
|
|
574
|
+
**Added**
|
|
575
|
+
- **KanbanBoard — `showDueDateWarning`**: Overdue cards (dueDate in the past) auto-highlight with a red chip, background tint, and left border. `showDueDateWarning={false}` to opt out. See [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) for details.
|
|
576
|
+
- **KanbanBoard — `width` prop**: `width?: number | string` (default `"100%"`).
|
|
577
|
+
|
|
578
|
+
**Fixed**
|
|
579
|
+
- **KanbanBoard — column scroll**: Cards in a tall column now scroll correctly instead of being silently clipped.
|
|
580
|
+
|
|
581
|
+
**Changed**
|
|
582
|
+
- **KanbanBoard — card visual polish**: Explicit `1px` border, controlled box-shadow with hover lift, hidden scrollbar, `fontWeight: 700` title. See [Full Changelog](https://github.com/thebuoyant/mui-ts-library/blob/main/CHANGELOG.md) for details.
|
|
583
|
+
|
|
584
|
+
---
|
|
585
|
+
|
|
558
586
|
### [3.30.0] — 2026-07-17
|
|
559
587
|
|
|
560
588
|
**Added**
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { type KanbanBoardProps } from "./KanbanBoard.types";
|
|
2
|
-
export declare function KanbanBoard({ tasks, columns, onTasksChange, onCardClick, enableBuiltinDialogs, onTaskCreated, onTaskUpdated, onTaskDeleted, onTaskMoved, showAssignee, showDueDate, showDueDateWarning, chipVariant, width, height, translation, }: KanbanBoardProps): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare function KanbanBoard({ tasks, columns, onTasksChange, onCardClick, enableBuiltinDialogs, onTaskCreated, onTaskUpdated, onTaskDeleted, onTaskMoved, showPriority, showAssignee, showDueDate, showDueDateWarning, chipVariant, filterText, width, height, translation, }: KanbanBoardProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -9,81 +9,85 @@ import { Box as m } from "@mui/material";
|
|
|
9
9
|
import { useEffect as h, useState as g } from "react";
|
|
10
10
|
import { jsx as _, jsxs as v } from "react/jsx-runtime";
|
|
11
11
|
//#region src/components/kanban-board/KanbanBoard.tsx
|
|
12
|
-
function y({ tasks: y, columns: b, onTasksChange: x, onCardClick: S, enableBuiltinDialogs: C = !0, onTaskCreated: w, onTaskUpdated: T, onTaskDeleted: E, onTaskMoved: D,
|
|
13
|
-
let
|
|
12
|
+
function y({ tasks: y, columns: b, onTasksChange: x, onCardClick: S, enableBuiltinDialogs: C = !0, onTaskCreated: w, onTaskUpdated: T, onTaskDeleted: E, onTaskMoved: D, showPriority: O = !0, showAssignee: k = !0, showDueDate: A = !0, showDueDateWarning: j = !0, chipVariant: M = "outlined", filterText: N = "", width: P = "100%", height: F = "100%", translation: I }) {
|
|
13
|
+
let L = {
|
|
14
14
|
...t,
|
|
15
|
-
...
|
|
16
|
-
}, [
|
|
15
|
+
...I
|
|
16
|
+
}, [R, z] = g(y);
|
|
17
17
|
h(() => {
|
|
18
|
-
|
|
18
|
+
z(y);
|
|
19
19
|
}, [y]);
|
|
20
|
-
let [
|
|
21
|
-
function
|
|
22
|
-
|
|
20
|
+
let [B, V] = g(null), [H, U] = g(null), W = d(u(c, { activationConstraint: { distance: 8 } }), u(s, { coordinateGetter: p }));
|
|
21
|
+
function G({ active: e }) {
|
|
22
|
+
V(R.find((t) => t.id === e.id) ?? null);
|
|
23
23
|
}
|
|
24
|
-
function
|
|
24
|
+
function K({ active: e, over: t }) {
|
|
25
25
|
if (!t) return;
|
|
26
|
-
let n = e.id, r = t.id, i =
|
|
26
|
+
let n = e.id, r = t.id, i = R.find((e) => e.id === n);
|
|
27
27
|
if (!i) return;
|
|
28
|
-
let a = b.find((e) => e.id === r), o =
|
|
29
|
-
!s || i.status === s ||
|
|
28
|
+
let a = b.find((e) => e.id === r), o = R.find((e) => e.id === r), s = a?.id ?? o?.status;
|
|
29
|
+
!s || i.status === s || z((e) => e.map((e) => e.id === n ? {
|
|
30
30
|
...e,
|
|
31
31
|
status: s
|
|
32
32
|
} : e));
|
|
33
33
|
}
|
|
34
|
-
function
|
|
35
|
-
let n =
|
|
36
|
-
if (
|
|
37
|
-
|
|
34
|
+
function q({ active: e, over: t }) {
|
|
35
|
+
let n = B?.status;
|
|
36
|
+
if (V(null), !t) {
|
|
37
|
+
z(y);
|
|
38
38
|
return;
|
|
39
39
|
}
|
|
40
|
-
let r = e.id, i = t.id, a =
|
|
41
|
-
if (s = a !== -1 && o !== -1 && a !== o ? f(
|
|
40
|
+
let r = e.id, i = t.id, a = R.findIndex((e) => e.id === r), o = R.findIndex((e) => e.id === i), s;
|
|
41
|
+
if (s = a !== -1 && o !== -1 && a !== o ? f(R, a, o) : [...R], z(s), x?.(s), n) {
|
|
42
42
|
let e = s.find((e) => e.id === r);
|
|
43
43
|
e && e.status !== n && D?.(e, n, e.status);
|
|
44
44
|
}
|
|
45
45
|
}
|
|
46
|
-
function
|
|
47
|
-
C ?
|
|
46
|
+
function J(e) {
|
|
47
|
+
C ? U({
|
|
48
48
|
mode: "edit",
|
|
49
49
|
task: e
|
|
50
50
|
}) : S?.(e);
|
|
51
51
|
}
|
|
52
|
-
function
|
|
53
|
-
|
|
52
|
+
function Y(e) {
|
|
53
|
+
U({
|
|
54
54
|
mode: "add",
|
|
55
55
|
columnId: e
|
|
56
56
|
});
|
|
57
57
|
}
|
|
58
|
-
function
|
|
59
|
-
let t = !
|
|
60
|
-
|
|
58
|
+
function X(e) {
|
|
59
|
+
let t = !R.find((t) => t.id === e.id), n = t ? [...R, e] : R.map((t) => t.id === e.id ? e : t);
|
|
60
|
+
z(n), x?.(n), t ? w?.(e) : T?.(e), U(null);
|
|
61
61
|
}
|
|
62
|
-
function
|
|
63
|
-
let t =
|
|
64
|
-
|
|
62
|
+
function Z(e) {
|
|
63
|
+
let t = R.filter((t) => t.id !== e);
|
|
64
|
+
z(t), x?.(t), E?.(e), U(null);
|
|
65
65
|
}
|
|
66
|
-
function
|
|
67
|
-
|
|
66
|
+
function Q(e) {
|
|
67
|
+
U({
|
|
68
68
|
mode: "delete",
|
|
69
69
|
task: e
|
|
70
70
|
});
|
|
71
71
|
}
|
|
72
|
+
let $ = N.trim().toLowerCase();
|
|
73
|
+
function ee(e) {
|
|
74
|
+
return $ ? e.title.toLowerCase().includes($) || (e.assignee?.toLowerCase().includes($) ?? !1) : !0;
|
|
75
|
+
}
|
|
72
76
|
return /* @__PURE__ */ v(m, {
|
|
73
77
|
className: e.root,
|
|
74
78
|
sx: {
|
|
75
|
-
width:
|
|
76
|
-
height:
|
|
79
|
+
width: P,
|
|
80
|
+
height: F,
|
|
77
81
|
display: "flex",
|
|
78
82
|
flexDirection: "column",
|
|
79
83
|
overflow: "hidden"
|
|
80
84
|
},
|
|
81
85
|
children: [/* @__PURE__ */ v(a, {
|
|
82
|
-
sensors:
|
|
86
|
+
sensors: W,
|
|
83
87
|
collisionDetection: l,
|
|
84
|
-
onDragStart:
|
|
85
|
-
onDragOver:
|
|
86
|
-
onDragEnd:
|
|
88
|
+
onDragStart: G,
|
|
89
|
+
onDragOver: K,
|
|
90
|
+
onDragEnd: q,
|
|
87
91
|
children: [/* @__PURE__ */ _(m, {
|
|
88
92
|
className: e.columns,
|
|
89
93
|
sx: {
|
|
@@ -95,37 +99,43 @@ function y({ tasks: y, columns: b, onTasksChange: x, onCardClick: S, enableBuilt
|
|
|
95
99
|
overflowY: "hidden",
|
|
96
100
|
alignItems: "stretch"
|
|
97
101
|
},
|
|
98
|
-
children: b.map((e) =>
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
102
|
+
children: b.map((e) => {
|
|
103
|
+
let t = R.filter((t) => t.status === e.id);
|
|
104
|
+
return /* @__PURE__ */ _(i, {
|
|
105
|
+
column: e,
|
|
106
|
+
tasks: t.filter(ee),
|
|
107
|
+
totalCount: t.length,
|
|
108
|
+
showPriority: O,
|
|
109
|
+
showAssignee: k,
|
|
110
|
+
showDueDate: A,
|
|
111
|
+
showDueDateWarning: j,
|
|
112
|
+
chipVariant: M,
|
|
113
|
+
t: L,
|
|
114
|
+
enableBuiltinDialogs: C,
|
|
115
|
+
onCardClick: J,
|
|
116
|
+
onAddClick: Y
|
|
117
|
+
}, e.id);
|
|
118
|
+
})
|
|
119
|
+
}), /* @__PURE__ */ _(o, { children: B && /* @__PURE__ */ _(n, {
|
|
120
|
+
task: B,
|
|
121
|
+
showPriority: O,
|
|
122
|
+
showAssignee: k,
|
|
123
|
+
showDueDate: A,
|
|
124
|
+
showDueDateWarning: j,
|
|
125
|
+
chipVariant: M,
|
|
126
|
+
t: L,
|
|
117
127
|
onCardClick: () => {},
|
|
118
128
|
isOverlay: !0
|
|
119
129
|
}) })]
|
|
120
130
|
}), C && /* @__PURE__ */ _(r, {
|
|
121
|
-
state:
|
|
131
|
+
state: H,
|
|
122
132
|
columns: b,
|
|
123
|
-
t:
|
|
124
|
-
onSave:
|
|
125
|
-
onDelete:
|
|
126
|
-
onRequestDelete:
|
|
127
|
-
onClose: () =>
|
|
128
|
-
},
|
|
133
|
+
t: L,
|
|
134
|
+
onSave: X,
|
|
135
|
+
onDelete: Z,
|
|
136
|
+
onRequestDelete: Q,
|
|
137
|
+
onClose: () => U(null)
|
|
138
|
+
}, H ? `${H.mode}-${H.mode === "add" ? H.columnId : H.task.id}` : "closed")]
|
|
129
139
|
});
|
|
130
140
|
}
|
|
131
141
|
//#endregion
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
export type KanbanTaskPriority = "low" | "medium" | "high" | "critical";
|
|
1
2
|
export type KanbanTask = {
|
|
2
3
|
id: string;
|
|
3
4
|
title: string;
|
|
@@ -8,6 +9,8 @@ export type KanbanTask = {
|
|
|
8
9
|
/** Overrides the column's default card color for this individual card. Any CSS color value. */
|
|
9
10
|
color?: string;
|
|
10
11
|
dueDate?: Date;
|
|
12
|
+
/** Optional priority level — shown as a colored dot next to the card title when `showPriority` is true. */
|
|
13
|
+
priority?: KanbanTaskPriority;
|
|
11
14
|
};
|
|
12
15
|
export type KanbanColumn = {
|
|
13
16
|
/** Used as the key — must match `KanbanTask.status` values. */
|
|
@@ -67,6 +70,11 @@ export type KanbanBoardProps = {
|
|
|
67
70
|
* so consumers can issue a targeted API call without diffing the full list.
|
|
68
71
|
*/
|
|
69
72
|
onTaskMoved?: (task: KanbanTask, fromColumnId: string, toColumnId: string) => void;
|
|
73
|
+
/**
|
|
74
|
+
* Show the priority dot on cards (default: true).
|
|
75
|
+
* Has no visual effect when a card has no `priority` field set.
|
|
76
|
+
*/
|
|
77
|
+
showPriority?: boolean;
|
|
70
78
|
/** Show the assignee label on cards (default: true). */
|
|
71
79
|
showAssignee?: boolean;
|
|
72
80
|
/** Show the due date on cards (default: true). */
|
|
@@ -84,6 +92,14 @@ export type KanbanBoardProps = {
|
|
|
84
92
|
* `"filled"` — solid background, more prominent.
|
|
85
93
|
*/
|
|
86
94
|
chipVariant?: "outlined" | "filled";
|
|
95
|
+
/**
|
|
96
|
+
* Filters visible cards by title and assignee (case-insensitive substring match).
|
|
97
|
+
* The consumer is responsible for rendering the search input and passing the string.
|
|
98
|
+
* An empty string or `undefined` shows all cards.
|
|
99
|
+
* Column counters reflect the filtered count; WIP-limit checks always use the
|
|
100
|
+
* unfiltered column total so the over-limit warning is never hidden by a filter.
|
|
101
|
+
*/
|
|
102
|
+
filterText?: string;
|
|
87
103
|
/** Width of the board. Default: "100%". */
|
|
88
104
|
width?: number | string;
|
|
89
105
|
/** Height of the board. Default: "100%". */
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { KanbanBoardTranslation, KanbanTask } from "./KanbanBoard.types";
|
|
2
2
|
type KanbanBoardCardProps = {
|
|
3
3
|
task: KanbanTask;
|
|
4
|
+
showPriority: boolean;
|
|
4
5
|
showAssignee: boolean;
|
|
5
6
|
showDueDate: boolean;
|
|
6
7
|
showDueDateWarning: boolean;
|
|
@@ -10,5 +11,5 @@ type KanbanBoardCardProps = {
|
|
|
10
11
|
/** True when this card is the drag overlay ghost — rendered without transform/listeners. */
|
|
11
12
|
isOverlay?: boolean;
|
|
12
13
|
};
|
|
13
|
-
export declare function KanbanBoardCard({ task, showAssignee, showDueDate, showDueDateWarning, chipVariant, t, onCardClick, isOverlay, }: KanbanBoardCardProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export declare function KanbanBoardCard({ task, showPriority, showAssignee, showDueDate, showDueDateWarning, chipVariant, t, onCardClick, isOverlay, }: KanbanBoardCardProps): import("react/jsx-runtime").JSX.Element;
|
|
14
15
|
export {};
|
|
@@ -9,6 +9,11 @@ import { alpha as f } from "@mui/material/styles";
|
|
|
9
9
|
import { jsx as p, jsxs as m } from "react/jsx-runtime";
|
|
10
10
|
//#region src/components/kanban-board/KanbanBoardCard.tsx
|
|
11
11
|
var h = {
|
|
12
|
+
low: "#4caf50",
|
|
13
|
+
medium: "#ff9800",
|
|
14
|
+
high: "#f44336",
|
|
15
|
+
critical: "#9c27b0"
|
|
16
|
+
}, g = {
|
|
12
17
|
fontSize: "0.7rem",
|
|
13
18
|
height: 22,
|
|
14
19
|
"& .MuiChip-icon": {
|
|
@@ -23,48 +28,48 @@ var h = {
|
|
|
23
28
|
pr: "10px"
|
|
24
29
|
}
|
|
25
30
|
};
|
|
26
|
-
function
|
|
27
|
-
let { attributes:
|
|
28
|
-
id:
|
|
29
|
-
disabled:
|
|
30
|
-
}),
|
|
31
|
-
transform: l.Transform.toString(
|
|
32
|
-
transition:
|
|
33
|
-
opacity: +!
|
|
34
|
-
},
|
|
31
|
+
function _({ task: _, showPriority: v, showAssignee: y, showDueDate: b, showDueDateWarning: x, chipVariant: S, t: C, onCardClick: w, isOverlay: T = !1 }) {
|
|
32
|
+
let { attributes: E, listeners: D, setNodeRef: O, transform: k, transition: A, isDragging: j } = n({
|
|
33
|
+
id: _.id,
|
|
34
|
+
disabled: T
|
|
35
|
+
}), M = T ? void 0 : {
|
|
36
|
+
transform: l.Transform.toString(k),
|
|
37
|
+
transition: A,
|
|
38
|
+
opacity: +!j
|
|
39
|
+
}, N = y && !!_.assignee || b && !!_.dueDate, P = _.dueDate ? _.dueDate.toLocaleDateString(void 0, {
|
|
35
40
|
day: "2-digit",
|
|
36
41
|
month: "short",
|
|
37
42
|
year: "numeric"
|
|
38
|
-
}) : null,
|
|
39
|
-
|
|
40
|
-
let
|
|
43
|
+
}) : null, F = /* @__PURE__ */ new Date();
|
|
44
|
+
F.setHours(0, 0, 0, 0);
|
|
45
|
+
let I = x && !!_.dueDate && _.dueDate < F;
|
|
41
46
|
return /* @__PURE__ */ p(i, {
|
|
42
|
-
ref:
|
|
43
|
-
style:
|
|
47
|
+
ref: T ? void 0 : O,
|
|
48
|
+
style: M,
|
|
44
49
|
elevation: 0,
|
|
45
|
-
className: [t.card,
|
|
50
|
+
className: [t.card, j && e.selected].filter(Boolean).join(" "),
|
|
46
51
|
sx: {
|
|
47
52
|
mb: 1,
|
|
48
53
|
border: "1px solid",
|
|
49
|
-
borderColor:
|
|
50
|
-
borderLeft:
|
|
54
|
+
borderColor: I && !_.color ? "error.light" : "divider",
|
|
55
|
+
borderLeft: _.color ? `4px solid ${_.color}` : I ? (e) => `4px solid ${e.palette.error.main}` : void 0,
|
|
51
56
|
userSelect: "none",
|
|
52
|
-
cursor:
|
|
53
|
-
bgcolor: (e) =>
|
|
57
|
+
cursor: T ? "grabbing" : "grab",
|
|
58
|
+
bgcolor: (e) => I ? e.palette.mode === "dark" ? f(e.palette.error.main, .12) : f(e.palette.error.main, .04) : e.palette.mode === "dark" ? e.palette.grey[800] : e.palette.background.paper,
|
|
54
59
|
boxShadow: (e) => e.palette.mode === "dark" ? "0 1px 3px rgba(0,0,0,0.4)" : "0 1px 3px rgba(0,0,0,0.08)",
|
|
55
60
|
transition: "box-shadow 0.15s ease, transform 0.15s ease",
|
|
56
|
-
...!
|
|
61
|
+
...!j && !T && { "&:hover": {
|
|
57
62
|
boxShadow: (e) => e.palette.mode === "dark" ? "0 4px 14px rgba(0,0,0,0.5)" : "0 4px 14px rgba(0,0,0,0.12)",
|
|
58
63
|
transform: "translateY(-1px)"
|
|
59
64
|
} },
|
|
60
65
|
"&:active": { cursor: "grabbing" }
|
|
61
66
|
},
|
|
62
|
-
...
|
|
63
|
-
...
|
|
64
|
-
...
|
|
67
|
+
...T ? {} : {
|
|
68
|
+
...E,
|
|
69
|
+
...D
|
|
65
70
|
},
|
|
66
|
-
onClick: () => !
|
|
67
|
-
"aria-label":
|
|
71
|
+
onClick: () => !j && w(_),
|
|
72
|
+
"aria-label": _.title,
|
|
68
73
|
children: /* @__PURE__ */ p(a, {
|
|
69
74
|
component: "div",
|
|
70
75
|
sx: { cursor: "inherit" },
|
|
@@ -73,17 +78,37 @@ function g({ task: g, showAssignee: _, showDueDate: v, showDueDateWarning: y, ch
|
|
|
73
78
|
p: 1.5,
|
|
74
79
|
"&:last-child": { pb: 1.5 }
|
|
75
80
|
},
|
|
76
|
-
children: [/* @__PURE__ */
|
|
77
|
-
className: t.cardTitle,
|
|
78
|
-
variant: "body2",
|
|
81
|
+
children: [/* @__PURE__ */ m(r, {
|
|
79
82
|
sx: {
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
83
|
+
display: "flex",
|
|
84
|
+
alignItems: "flex-start",
|
|
85
|
+
gap: .75,
|
|
86
|
+
mb: +!!N
|
|
84
87
|
},
|
|
85
|
-
children:
|
|
86
|
-
|
|
88
|
+
children: [v && _.priority && /* @__PURE__ */ p(r, {
|
|
89
|
+
className: t.cardPriorityDot,
|
|
90
|
+
role: "img",
|
|
91
|
+
"aria-label": `Priority: ${_.priority}`,
|
|
92
|
+
sx: {
|
|
93
|
+
width: 8,
|
|
94
|
+
height: 8,
|
|
95
|
+
minWidth: 8,
|
|
96
|
+
borderRadius: "50%",
|
|
97
|
+
bgcolor: h[_.priority],
|
|
98
|
+
mt: "5px",
|
|
99
|
+
flexShrink: 0
|
|
100
|
+
}
|
|
101
|
+
}), /* @__PURE__ */ p(c, {
|
|
102
|
+
className: t.cardTitle,
|
|
103
|
+
variant: "body2",
|
|
104
|
+
sx: {
|
|
105
|
+
lineHeight: 1.4,
|
|
106
|
+
fontWeight: 700,
|
|
107
|
+
letterSpacing: "-0.01em"
|
|
108
|
+
},
|
|
109
|
+
children: _.title
|
|
110
|
+
})]
|
|
111
|
+
}), N && /* @__PURE__ */ m(r, {
|
|
87
112
|
className: t.cardMeta,
|
|
88
113
|
sx: {
|
|
89
114
|
display: "flex",
|
|
@@ -91,23 +116,23 @@ function g({ task: g, showAssignee: _, showDueDate: v, showDueDateWarning: y, ch
|
|
|
91
116
|
flexWrap: "wrap",
|
|
92
117
|
alignItems: "center"
|
|
93
118
|
},
|
|
94
|
-
children: [
|
|
119
|
+
children: [y && _.assignee && /* @__PURE__ */ p(s, {
|
|
95
120
|
className: t.cardAssignee,
|
|
96
121
|
icon: /* @__PURE__ */ p(d, {}),
|
|
97
|
-
label:
|
|
122
|
+
label: _.assignee,
|
|
98
123
|
size: "small",
|
|
99
|
-
variant:
|
|
100
|
-
"aria-label": `${
|
|
101
|
-
sx:
|
|
102
|
-
}),
|
|
124
|
+
variant: S,
|
|
125
|
+
"aria-label": `${C.dialogFieldAssignee}: ${_.assignee}`,
|
|
126
|
+
sx: g
|
|
127
|
+
}), b && P && /* @__PURE__ */ p(s, {
|
|
103
128
|
className: t.cardDueDate,
|
|
104
129
|
icon: /* @__PURE__ */ p(u, {}),
|
|
105
|
-
label:
|
|
130
|
+
label: P,
|
|
106
131
|
size: "small",
|
|
107
|
-
variant:
|
|
108
|
-
color:
|
|
109
|
-
"aria-label": `${
|
|
110
|
-
sx:
|
|
132
|
+
variant: S,
|
|
133
|
+
color: I ? "error" : "default",
|
|
134
|
+
"aria-label": `${C.dialogFieldDueDate}: ${P}`,
|
|
135
|
+
sx: g
|
|
111
136
|
})]
|
|
112
137
|
})]
|
|
113
138
|
})
|
|
@@ -115,4 +140,4 @@ function g({ task: g, showAssignee: _, showDueDate: v, showDueDateWarning: y, ch
|
|
|
115
140
|
});
|
|
116
141
|
}
|
|
117
142
|
//#endregion
|
|
118
|
-
export {
|
|
143
|
+
export { _ as KanbanBoardCard };
|
|
@@ -2,6 +2,9 @@ import type { KanbanBoardTranslation, KanbanColumn, KanbanTask } from "./KanbanB
|
|
|
2
2
|
type KanbanBoardColumnProps = {
|
|
3
3
|
column: KanbanColumn;
|
|
4
4
|
tasks: KanbanTask[];
|
|
5
|
+
/** Total tasks in this column before any filter — used for WIP-limit checking. */
|
|
6
|
+
totalCount: number;
|
|
7
|
+
showPriority: boolean;
|
|
5
8
|
showAssignee: boolean;
|
|
6
9
|
showDueDate: boolean;
|
|
7
10
|
showDueDateWarning: boolean;
|
|
@@ -11,5 +14,5 @@ type KanbanBoardColumnProps = {
|
|
|
11
14
|
onCardClick: (task: KanbanTask) => void;
|
|
12
15
|
onAddClick: (columnId: string) => void;
|
|
13
16
|
};
|
|
14
|
-
export declare function KanbanBoardColumn({ column, tasks, showAssignee, showDueDate, showDueDateWarning, chipVariant, t, enableBuiltinDialogs, onCardClick, onAddClick, }: KanbanBoardColumnProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export declare function KanbanBoardColumn({ column, tasks, totalCount, showPriority, showAssignee, showDueDate, showDueDateWarning, chipVariant, t, enableBuiltinDialogs, onCardClick, onAddClick, }: KanbanBoardColumnProps): import("react/jsx-runtime").JSX.Element;
|
|
15
18
|
export {};
|
|
@@ -6,8 +6,8 @@ import { Box as a, Button as o, Chip as s, Typography as c } from "@mui/material
|
|
|
6
6
|
import { jsx as l, jsxs as u } from "react/jsx-runtime";
|
|
7
7
|
import d from "@mui/icons-material/Add";
|
|
8
8
|
//#region src/components/kanban-board/KanbanBoardColumn.tsx
|
|
9
|
-
function f({ column: f, tasks: p,
|
|
10
|
-
let { setNodeRef:
|
|
9
|
+
function f({ column: f, tasks: p, totalCount: m, showPriority: h, showAssignee: g, showDueDate: _, showDueDateWarning: v, chipVariant: y, t: b, enableBuiltinDialogs: x, onCardClick: S, onAddClick: C }) {
|
|
10
|
+
let { setNodeRef: w, isOver: T } = n({ id: f.id }), E = f.wipLimit !== void 0 && m > f.wipLimit, D = f.wipLimit === void 0 ? `${p.length}` : `${p.length} / ${f.wipLimit}`, O = f.color ?? "primary.main";
|
|
11
11
|
return /* @__PURE__ */ u(a, {
|
|
12
12
|
className: e.column,
|
|
13
13
|
sx: {
|
|
@@ -46,25 +46,25 @@ function f({ column: f, tasks: p, showAssignee: m, showDueDate: h, showDueDateWa
|
|
|
46
46
|
children: f.label
|
|
47
47
|
}), /* @__PURE__ */ l(s, {
|
|
48
48
|
className: e.columnCount,
|
|
49
|
-
label:
|
|
49
|
+
label: D,
|
|
50
50
|
size: "small",
|
|
51
|
-
color:
|
|
51
|
+
color: E ? "error" : "default",
|
|
52
52
|
sx: {
|
|
53
53
|
height: 20,
|
|
54
54
|
fontSize: "0.7rem",
|
|
55
|
-
...!
|
|
55
|
+
...!E && f.color && {
|
|
56
56
|
bgcolor: f.color,
|
|
57
57
|
color: "#fff"
|
|
58
58
|
}
|
|
59
59
|
},
|
|
60
|
-
"aria-label": `${p.length} cards${f.wipLimit ? ` of ${f.wipLimit} limit` : ""}`
|
|
60
|
+
"aria-label": `${p.length} cards${f.wipLimit ? ` of ${f.wipLimit} limit` : ""}${p.length === m ? "" : ` (${m} total)`}`
|
|
61
61
|
})]
|
|
62
62
|
}),
|
|
63
63
|
/* @__PURE__ */ l(r, {
|
|
64
64
|
items: p.map((e) => e.id),
|
|
65
65
|
strategy: i,
|
|
66
66
|
children: /* @__PURE__ */ u(a, {
|
|
67
|
-
ref:
|
|
67
|
+
ref: w,
|
|
68
68
|
className: e.columnBody,
|
|
69
69
|
sx: {
|
|
70
70
|
flex: 1,
|
|
@@ -73,10 +73,10 @@ function f({ column: f, tasks: p, showAssignee: m, showDueDate: h, showDueDateWa
|
|
|
73
73
|
"&::-webkit-scrollbar": { display: "none" },
|
|
74
74
|
p: 1,
|
|
75
75
|
minHeight: 80,
|
|
76
|
-
bgcolor: (e) =>
|
|
76
|
+
bgcolor: (e) => T ? e.palette.action.selected : e.palette.mode === "dark" ? e.palette.grey[900] : e.palette.grey[100],
|
|
77
77
|
transition: "background-color 0.15s"
|
|
78
78
|
},
|
|
79
|
-
children: [p.length === 0 && !
|
|
79
|
+
children: [p.length === 0 && !T && /* @__PURE__ */ l(c, {
|
|
80
80
|
variant: "caption",
|
|
81
81
|
color: "text.disabled",
|
|
82
82
|
sx: {
|
|
@@ -84,19 +84,20 @@ function f({ column: f, tasks: p, showAssignee: m, showDueDate: h, showDueDateWa
|
|
|
84
84
|
textAlign: "center",
|
|
85
85
|
mt: 2
|
|
86
86
|
},
|
|
87
|
-
children:
|
|
87
|
+
children: b.noCardsLabel
|
|
88
88
|
}), p.map((e) => /* @__PURE__ */ l(t, {
|
|
89
89
|
task: e,
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
90
|
+
showPriority: h,
|
|
91
|
+
showAssignee: g,
|
|
92
|
+
showDueDate: _,
|
|
93
|
+
showDueDateWarning: v,
|
|
94
|
+
chipVariant: y,
|
|
95
|
+
t: b,
|
|
96
|
+
onCardClick: S
|
|
96
97
|
}, e.id))]
|
|
97
98
|
})
|
|
98
99
|
}),
|
|
99
|
-
|
|
100
|
+
x && /* @__PURE__ */ l(a, {
|
|
100
101
|
sx: {
|
|
101
102
|
p: 1,
|
|
102
103
|
borderTop: "1px solid",
|
|
@@ -107,12 +108,12 @@ function f({ column: f, tasks: p, showAssignee: m, showDueDate: h, showDueDateWa
|
|
|
107
108
|
startIcon: /* @__PURE__ */ l(d, {}),
|
|
108
109
|
size: "small",
|
|
109
110
|
fullWidth: !0,
|
|
110
|
-
onClick: () =>
|
|
111
|
+
onClick: () => C(f.id),
|
|
111
112
|
sx: {
|
|
112
113
|
justifyContent: "flex-start",
|
|
113
|
-
color:
|
|
114
|
+
color: O,
|
|
114
115
|
border: "1px dashed",
|
|
115
|
-
borderColor:
|
|
116
|
+
borderColor: O,
|
|
116
117
|
borderRadius: 1,
|
|
117
118
|
py: .75,
|
|
118
119
|
fontWeight: 600,
|
|
@@ -122,7 +123,7 @@ function f({ column: f, tasks: p, showAssignee: m, showDueDate: h, showDueDateWa
|
|
|
122
123
|
borderStyle: "dashed"
|
|
123
124
|
}
|
|
124
125
|
},
|
|
125
|
-
children:
|
|
126
|
+
children: b.addCardLabel
|
|
126
127
|
})
|
|
127
128
|
})
|
|
128
129
|
]
|
|
@@ -42,6 +42,8 @@ export declare const kanbanBoardClasses: {
|
|
|
42
42
|
readonly cardAssignee: "MuiTsKanbanBoard-cardAssignee";
|
|
43
43
|
/** The due date label on a card. */
|
|
44
44
|
readonly cardDueDate: "MuiTsKanbanBoard-cardDueDate";
|
|
45
|
+
/** The priority indicator dot on a card. */
|
|
46
|
+
readonly cardPriorityDot: "MuiTsKanbanBoard-cardPriorityDot";
|
|
45
47
|
/** The "+ Add card" button at the bottom of each column. */
|
|
46
48
|
readonly addButton: "MuiTsKanbanBoard-addButton";
|
|
47
49
|
};
|
|
@@ -12,6 +12,7 @@ var e = {
|
|
|
12
12
|
cardMeta: "MuiTsKanbanBoard-cardMeta",
|
|
13
13
|
cardAssignee: "MuiTsKanbanBoard-cardAssignee",
|
|
14
14
|
cardDueDate: "MuiTsKanbanBoard-cardDueDate",
|
|
15
|
+
cardPriorityDot: "MuiTsKanbanBoard-cardPriorityDot",
|
|
15
16
|
addButton: "MuiTsKanbanBoard-addButton"
|
|
16
17
|
};
|
|
17
18
|
//#endregion
|