@ztwoint/z-ui 0.1.126 → 0.1.128
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/dist/components/column-reorder/column-reorder.hook.js +11 -9
- package/dist/components/column-reorder/column-reorder.js +23 -19
- package/dist/components/column-reorder/column-reorder.type.d.ts +3 -0
- package/dist/components/column-reorder/components/column-item/column-item.hook.d.ts +13 -2
- package/dist/components/column-reorder/components/column-item/column-item.hook.js +57 -39
- package/dist/components/column-reorder/components/column-item/column-item.js +111 -45
- package/dist/components/column-reorder/components/column-item/column-item.type.d.ts +2 -0
- package/dist/components/{chart-card → primitives/chart-card}/chart-card.js +2 -2
- package/dist/components/primitives/index.d.ts +2 -0
- package/dist/components/primitives/popconfirm/popconfirm.const.d.ts +20 -0
- package/dist/components/primitives/popconfirm/popconfirm.const.js +22 -0
- package/dist/components/primitives/popconfirm/popconfirm.d.ts +4 -0
- package/dist/components/primitives/popconfirm/popconfirm.hook.d.ts +14 -0
- package/dist/components/primitives/popconfirm/popconfirm.hook.js +32 -0
- package/dist/components/primitives/popconfirm/popconfirm.js +78 -0
- package/dist/components/primitives/popconfirm/popconfirm.type.d.ts +24 -0
- package/dist/components/primitives/popconfirm/popconfirm.utils.d.ts +3 -0
- package/dist/components/primitives/popconfirm/popconfirm.utils.js +6 -0
- package/dist/components/primitives/select-compact/select-compact.js +17 -0
- package/dist/components/{table-card → primitives/table-card}/table-card.js +74 -73
- package/dist/components/{table-card → primitives/table-card}/table-card.type.d.ts +3 -3
- package/dist/components/table/components/cell/avatar-cell.js +5 -4
- package/dist/components/table/table-provider.js +3 -2
- package/dist/css/styles/tailwind.css +1 -1
- package/dist/index.d.ts +4 -3
- package/dist/index.js +80 -78
- package/dist/types/components/column-reorder/column-reorder.type.d.ts +3 -0
- package/dist/types/components/column-reorder/components/column-item/column-item.hook.d.ts +13 -2
- package/dist/types/components/column-reorder/components/column-item/column-item.type.d.ts +2 -0
- package/dist/types/components/primitives/index.d.ts +2 -0
- package/dist/types/components/primitives/popconfirm/popconfirm.const.d.ts +20 -0
- package/dist/types/components/primitives/popconfirm/popconfirm.d.ts +4 -0
- package/dist/types/components/primitives/popconfirm/popconfirm.hook.d.ts +14 -0
- package/dist/types/components/primitives/popconfirm/popconfirm.type.d.ts +24 -0
- package/dist/types/components/primitives/popconfirm/popconfirm.utils.d.ts +3 -0
- package/dist/types/components/{table-card → primitives/table-card}/table-card.type.d.ts +4 -4
- package/dist/types/index.d.ts +4 -3
- package/package.json +1 -1
- package/dist/components/select-compact/select-compact.js +0 -17
- /package/dist/components/{chart-card → primitives/chart-card}/builders/bar-chart-builder.d.ts +0 -0
- /package/dist/components/{chart-card → primitives/chart-card}/builders/bar-chart-builder.js +0 -0
- /package/dist/components/{chart-card → primitives/chart-card}/builders/chart-builder-factory.d.ts +0 -0
- /package/dist/components/{chart-card → primitives/chart-card}/builders/chart-builder-factory.js +0 -0
- /package/dist/components/{chart-card → primitives/chart-card}/builders/line-chart-builder.d.ts +0 -0
- /package/dist/components/{chart-card → primitives/chart-card}/builders/line-chart-builder.js +0 -0
- /package/dist/components/{chart-card → primitives/chart-card}/builders/pie-chart-builder.d.ts +0 -0
- /package/dist/components/{chart-card → primitives/chart-card}/builders/pie-chart-builder.js +0 -0
- /package/dist/components/{chart-card → primitives/chart-card}/chart-card-states.d.ts +0 -0
- /package/dist/components/{chart-card → primitives/chart-card}/chart-card-states.js +0 -0
- /package/dist/components/{chart-card → primitives/chart-card}/chart-card.config.types.d.ts +0 -0
- /package/dist/components/{chart-card → primitives/chart-card}/chart-card.d.ts +0 -0
- /package/dist/components/{chart-card → primitives/chart-card}/chart-card.types.d.ts +0 -0
- /package/dist/components/{chart-card → primitives/chart-card}/config/colors.d.ts +0 -0
- /package/dist/components/{chart-card → primitives/chart-card}/config/colors.js +0 -0
- /package/dist/components/{chart-card → primitives/chart-card}/config/defaults.d.ts +0 -0
- /package/dist/components/{chart-card → primitives/chart-card}/config/defaults.js +0 -0
- /package/dist/components/{chart-card → primitives/chart-card}/index.d.ts +0 -0
- /package/dist/components/{chart-card → primitives/chart-card}/validators/config-validator.d.ts +0 -0
- /package/dist/components/{chart-card → primitives/chart-card}/validators/config-validator.js +0 -0
- /package/dist/components/{select-compact → primitives/select-compact}/select-compact.d.ts +0 -0
- /package/dist/components/{table-card → primitives/table-card}/index.d.ts +0 -0
- /package/dist/components/{table-card → primitives/table-card}/table-card.d.ts +0 -0
- /package/dist/types/components/{chart-card → primitives/chart-card}/builders/bar-chart-builder.d.ts +0 -0
- /package/dist/types/components/{chart-card → primitives/chart-card}/builders/chart-builder-factory.d.ts +0 -0
- /package/dist/types/components/{chart-card → primitives/chart-card}/builders/line-chart-builder.d.ts +0 -0
- /package/dist/types/components/{chart-card → primitives/chart-card}/builders/pie-chart-builder.d.ts +0 -0
- /package/dist/types/components/{chart-card → primitives/chart-card}/chart-card-states.d.ts +0 -0
- /package/dist/types/components/{chart-card → primitives/chart-card}/chart-card.config.types.d.ts +0 -0
- /package/dist/types/components/{chart-card → primitives/chart-card}/chart-card.d.ts +0 -0
- /package/dist/types/components/{chart-card → primitives/chart-card}/chart-card.types.d.ts +0 -0
- /package/dist/types/components/{chart-card → primitives/chart-card}/config/colors.d.ts +0 -0
- /package/dist/types/components/{chart-card → primitives/chart-card}/config/defaults.d.ts +0 -0
- /package/dist/types/components/{chart-card → primitives/chart-card}/index.d.ts +0 -0
- /package/dist/types/components/{chart-card → primitives/chart-card}/validators/config-validator.d.ts +0 -0
- /package/dist/types/components/{select-compact → primitives/select-compact}/select-compact.d.ts +0 -0
- /package/dist/types/components/{table-card → primitives/table-card}/index.d.ts +0 -0
- /package/dist/types/components/{table-card → primitives/table-card}/table-card.d.ts +0 -0
|
@@ -5,20 +5,22 @@ import { reorderWithEdge as D } from "../../node_modules/@atlaskit/pragmatic-dra
|
|
|
5
5
|
import { triggerPostMoveFlash as S } from "../../node_modules/@atlaskit/pragmatic-drag-and-drop-flourish/dist/esm/trigger-post-move-flash.js";
|
|
6
6
|
import { flushSync as T } from "react-dom";
|
|
7
7
|
import "react/jsx-runtime";
|
|
8
|
+
import "lucide-react";
|
|
8
9
|
import "clsx";
|
|
9
10
|
import "tailwind-merge";
|
|
10
11
|
import { isColumnData as s } from "./components/column-item/column-item.util.js";
|
|
11
12
|
import "../button/button.js";
|
|
12
|
-
|
|
13
|
-
|
|
13
|
+
import "../input/input.js";
|
|
14
|
+
const j = ({ columns: o, onReorder: r }) => {
|
|
15
|
+
const [t, a] = I(o);
|
|
14
16
|
return p(() => {
|
|
15
|
-
a(
|
|
16
|
-
}, [
|
|
17
|
-
canMonitor({ source:
|
|
18
|
-
return s(
|
|
17
|
+
a(o);
|
|
18
|
+
}, [o]), p(() => C({
|
|
19
|
+
canMonitor({ source: e }) {
|
|
20
|
+
return s(e.data);
|
|
19
21
|
},
|
|
20
|
-
onDrop({ location:
|
|
21
|
-
const c =
|
|
22
|
+
onDrop({ location: e, source: g }) {
|
|
23
|
+
const c = e.current.dropTargets[0];
|
|
22
24
|
if (!c)
|
|
23
25
|
return;
|
|
24
26
|
const n = g.data, i = c.data;
|
|
@@ -43,5 +45,5 @@ const $ = ({ columns: e, onReorder: r }) => {
|
|
|
43
45
|
}), [t, r]), { internalColumns: t };
|
|
44
46
|
};
|
|
45
47
|
export {
|
|
46
|
-
|
|
48
|
+
j as useColumnReorder
|
|
47
49
|
};
|
|
@@ -1,38 +1,42 @@
|
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
|
-
import { cn as
|
|
4
|
-
import { ColumnItem as
|
|
5
|
-
import { useColumnReorder as
|
|
6
|
-
const
|
|
7
|
-
columns:
|
|
3
|
+
import { cn as f } from "../../lib/utils.js";
|
|
4
|
+
import { ColumnItem as p } from "./components/column-item/column-item.js";
|
|
5
|
+
import { useColumnReorder as c } from "./column-reorder.hook.js";
|
|
6
|
+
const C = ({
|
|
7
|
+
columns: o,
|
|
8
8
|
onReorder: d,
|
|
9
9
|
onRemove: i,
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
onEdit: l,
|
|
11
|
+
renderAction: t,
|
|
12
|
+
className: m,
|
|
13
|
+
disabled: n = !1,
|
|
14
|
+
editable: s = !1
|
|
13
15
|
}) => {
|
|
14
|
-
const { internalColumns:
|
|
16
|
+
const { internalColumns: a } = c({ columns: o, onReorder: d });
|
|
15
17
|
return /* @__PURE__ */ r(
|
|
16
18
|
"div",
|
|
17
19
|
{
|
|
18
|
-
className:
|
|
20
|
+
className: f(
|
|
19
21
|
"rounded-2xl border-[0.5px] border-stroke-solid-light bg-background-neutral-default overflow-hidden",
|
|
20
|
-
|
|
22
|
+
m
|
|
21
23
|
),
|
|
22
|
-
children: /* @__PURE__ */ r("div", { className: "divide-y divide-stroke-solid-light", children:
|
|
23
|
-
|
|
24
|
+
children: /* @__PURE__ */ r("div", { className: "divide-y divide-stroke-solid-light", children: a.map((e, u) => /* @__PURE__ */ r(
|
|
25
|
+
p,
|
|
24
26
|
{
|
|
25
|
-
column:
|
|
26
|
-
index:
|
|
27
|
+
column: e,
|
|
28
|
+
index: u,
|
|
27
29
|
onRemove: i,
|
|
28
|
-
|
|
29
|
-
|
|
30
|
+
onEdit: l,
|
|
31
|
+
renderAction: t,
|
|
32
|
+
disabled: n,
|
|
33
|
+
editable: s
|
|
30
34
|
},
|
|
31
|
-
|
|
35
|
+
e.id
|
|
32
36
|
)) })
|
|
33
37
|
}
|
|
34
38
|
);
|
|
35
39
|
};
|
|
36
40
|
export {
|
|
37
|
-
|
|
41
|
+
C as ColumnReOrder
|
|
38
42
|
};
|
|
@@ -3,12 +3,15 @@ export type ColumnType = {
|
|
|
3
3
|
id: string;
|
|
4
4
|
label: [string, string];
|
|
5
5
|
icon: React.ReactNode;
|
|
6
|
+
editedLabel?: string;
|
|
6
7
|
};
|
|
7
8
|
export interface ColumnReOrderProps {
|
|
8
9
|
columns: ColumnType[];
|
|
9
10
|
onReorder?: (reorderedColumns: ColumnType[]) => void;
|
|
10
11
|
onRemove?: (columnId: string) => void;
|
|
12
|
+
onEdit?: (columnId: string, newLabel: string) => void;
|
|
11
13
|
renderAction?: (column: ColumnType, onRemove: ((columnId: string) => void) | undefined) => React.ReactNode;
|
|
12
14
|
className?: string;
|
|
13
15
|
disabled?: boolean;
|
|
16
|
+
editable?: boolean;
|
|
14
17
|
}
|
|
@@ -1,7 +1,18 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
1
2
|
import { ColumnType } from '../../column-reorder.type';
|
|
2
3
|
import { ColumnItemState } from './column-item.type';
|
|
3
4
|
export declare const idle: ColumnItemState;
|
|
4
|
-
export declare const useColumnItemDragAndDrop: (column: ColumnType, index: number, disabled?: boolean) => {
|
|
5
|
-
ref:
|
|
5
|
+
export declare const useColumnItemDragAndDrop: (column: ColumnType, index: number, disabled?: boolean, onEdit?: (columnId: string, newLabel: string) => void) => {
|
|
6
|
+
ref: React.RefObject<HTMLDivElement | null>;
|
|
6
7
|
state: ColumnItemState;
|
|
8
|
+
isEditing: boolean;
|
|
9
|
+
editValue: string;
|
|
10
|
+
setEditValue: React.Dispatch<React.SetStateAction<string>>;
|
|
11
|
+
handleEditClick: () => void;
|
|
12
|
+
handleSave: () => void;
|
|
13
|
+
handleCancel: () => void;
|
|
14
|
+
handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
15
|
+
groupLabel: string;
|
|
16
|
+
fieldLabel: string;
|
|
17
|
+
fullLabel: string;
|
|
7
18
|
};
|
|
@@ -1,49 +1,57 @@
|
|
|
1
|
-
import { useRef as
|
|
2
|
-
import { dropTargetForElements as
|
|
3
|
-
import { setCustomNativeDragPreview as
|
|
4
|
-
import { pointerOutsideOfPreview as
|
|
5
|
-
import { combine as
|
|
6
|
-
import { extractClosestEdge as
|
|
7
|
-
import { getColumnData as
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
1
|
+
import { useRef as k, useState as p, useEffect as I } from "react";
|
|
2
|
+
import { dropTargetForElements as x, draggable as O } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/adapter/element-adapter.js";
|
|
3
|
+
import { setCustomNativeDragPreview as P } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/element/custom-native-drag-preview/set-custom-native-drag-preview.js";
|
|
4
|
+
import { pointerOutsideOfPreview as V } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/element/custom-native-drag-preview/pointer-outside-of-preview.js";
|
|
5
|
+
import { combine as $ } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/combine.js";
|
|
6
|
+
import { extractClosestEdge as v, attachClosestEdge as A } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop-hitbox/dist/esm/closest-edge.js";
|
|
7
|
+
import { parseColumnLabel as F, getColumnData as C, isColumnData as G } from "./column-item.util.js";
|
|
8
|
+
const n = { type: "idle" }, B = (o, i, m = !1, g) => {
|
|
9
|
+
const c = k(null), [b, a] = p(n), [h, l] = p(!1), [s, d] = p(""), { groupLabel: u, fieldLabel: D } = F(o), w = `${u} / ${D}`, L = () => {
|
|
10
|
+
l(!0), d(o.editedLabel || "");
|
|
11
|
+
}, y = () => {
|
|
12
|
+
(s.length > 0 && s.trim() || s === "") && (g == null || g(o.id, s.trim())), l(!1);
|
|
13
|
+
}, E = () => {
|
|
14
|
+
l(!1), d("");
|
|
15
|
+
}, S = (t) => {
|
|
16
|
+
t.key === "Enter" ? y() : t.key === "Escape" && E();
|
|
17
|
+
};
|
|
18
|
+
return I(() => {
|
|
19
|
+
const t = c.current;
|
|
20
|
+
if (!(!t || m))
|
|
21
|
+
return $(
|
|
22
|
+
O({
|
|
23
|
+
element: t,
|
|
16
24
|
getInitialData() {
|
|
17
|
-
return
|
|
25
|
+
return C(o, i);
|
|
18
26
|
},
|
|
19
27
|
onGenerateDragPreview({ nativeSetDragImage: e }) {
|
|
20
|
-
|
|
28
|
+
P({
|
|
21
29
|
nativeSetDragImage: e,
|
|
22
|
-
getOffset:
|
|
30
|
+
getOffset: V({
|
|
23
31
|
x: "16px",
|
|
24
32
|
y: "0px"
|
|
25
33
|
}),
|
|
26
|
-
render({ container:
|
|
27
|
-
|
|
34
|
+
render({ container: r }) {
|
|
35
|
+
a({ type: "preview", container: r });
|
|
28
36
|
}
|
|
29
37
|
});
|
|
30
38
|
},
|
|
31
39
|
onDragStart() {
|
|
32
|
-
|
|
40
|
+
a({ type: "is-dragging" });
|
|
33
41
|
},
|
|
34
42
|
onDrop() {
|
|
35
|
-
|
|
43
|
+
a(n);
|
|
36
44
|
}
|
|
37
45
|
}),
|
|
38
|
-
|
|
39
|
-
element:
|
|
46
|
+
x({
|
|
47
|
+
element: t,
|
|
40
48
|
canDrop({ source: e }) {
|
|
41
|
-
return e.element ===
|
|
49
|
+
return e.element === t ? !1 : G(e.data);
|
|
42
50
|
},
|
|
43
51
|
getData({ input: e }) {
|
|
44
|
-
const
|
|
45
|
-
return
|
|
46
|
-
element:
|
|
52
|
+
const r = C(o, i);
|
|
53
|
+
return A(r, {
|
|
54
|
+
element: t,
|
|
47
55
|
input: e,
|
|
48
56
|
allowedEdges: ["top", "bottom"]
|
|
49
57
|
});
|
|
@@ -52,27 +60,37 @@ const a = { type: "idle" }, A = (n, s, i = !1) => {
|
|
|
52
60
|
return !0;
|
|
53
61
|
},
|
|
54
62
|
onDragEnter({ self: e }) {
|
|
55
|
-
const
|
|
56
|
-
|
|
63
|
+
const r = v(e.data);
|
|
64
|
+
a({ type: "is-dragging-over", closestEdge: r });
|
|
57
65
|
},
|
|
58
66
|
onDrag({ self: e }) {
|
|
59
|
-
const
|
|
60
|
-
|
|
67
|
+
const r = v(e.data);
|
|
68
|
+
a((f) => f.type === "is-dragging-over" && f.closestEdge === r ? f : { type: "is-dragging-over", closestEdge: r });
|
|
61
69
|
},
|
|
62
70
|
onDragLeave() {
|
|
63
|
-
|
|
71
|
+
a(n);
|
|
64
72
|
},
|
|
65
73
|
onDrop() {
|
|
66
|
-
|
|
74
|
+
a(n);
|
|
67
75
|
}
|
|
68
76
|
})
|
|
69
77
|
);
|
|
70
|
-
}, [
|
|
71
|
-
ref:
|
|
72
|
-
state:
|
|
78
|
+
}, [o, i, m]), {
|
|
79
|
+
ref: c,
|
|
80
|
+
state: b,
|
|
81
|
+
isEditing: h,
|
|
82
|
+
editValue: s,
|
|
83
|
+
setEditValue: d,
|
|
84
|
+
handleEditClick: L,
|
|
85
|
+
handleSave: y,
|
|
86
|
+
handleCancel: E,
|
|
87
|
+
handleKeyDown: S,
|
|
88
|
+
groupLabel: u,
|
|
89
|
+
fieldLabel: D,
|
|
90
|
+
fullLabel: w
|
|
73
91
|
};
|
|
74
92
|
};
|
|
75
93
|
export {
|
|
76
|
-
|
|
77
|
-
|
|
94
|
+
n as idle,
|
|
95
|
+
B as useColumnItemDragAndDrop
|
|
78
96
|
};
|
|
@@ -1,87 +1,153 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { createPortal as
|
|
1
|
+
import { jsxs as a, Fragment as d, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { createPortal as E } from "react-dom";
|
|
3
|
+
import { Check as j, Pen as z } from "lucide-react";
|
|
3
4
|
import "react";
|
|
4
|
-
import { cn as
|
|
5
|
-
import { useColumnItemDragAndDrop as
|
|
6
|
-
import { Button as
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import
|
|
10
|
-
|
|
5
|
+
import { cn as m } from "../../../../lib/utils.js";
|
|
6
|
+
import { useColumnItemDragAndDrop as F } from "./column-item.hook.js";
|
|
7
|
+
import { Button as i } from "../../../button/button.js";
|
|
8
|
+
import { Input as P } from "../../../input/input.js";
|
|
9
|
+
import f from "../../../assets/icons/x.js";
|
|
10
|
+
import p from "../../../assets/icons/drag-handle.js";
|
|
11
|
+
import { parseColumnLabel as K } from "./column-item.util.js";
|
|
12
|
+
const S = {
|
|
11
13
|
"is-dragging": "opacity-40",
|
|
12
14
|
"is-dragging-over": "bg-background-neutral-medium"
|
|
13
|
-
},
|
|
15
|
+
}, n = ({ text: t, className: r }) => /* @__PURE__ */ e("span", { className: m("truncate min-w-0", r), children: t }), T = ({
|
|
14
16
|
edge: t,
|
|
15
17
|
isFirstElement: r = !1
|
|
16
18
|
}) => /* @__PURE__ */ e(
|
|
17
19
|
"div",
|
|
18
20
|
{
|
|
19
|
-
className:
|
|
21
|
+
className: m(
|
|
20
22
|
"absolute left-0 right-0 h-0.5 bg-blue-500",
|
|
21
23
|
t === "top" ? r ? "top-0" : "top-[-3px]" : "bottom-0"
|
|
22
24
|
)
|
|
23
25
|
}
|
|
24
26
|
);
|
|
25
|
-
function
|
|
26
|
-
const { groupLabel: r, fieldLabel:
|
|
27
|
-
return /* @__PURE__ */
|
|
28
|
-
/* @__PURE__ */ e(
|
|
27
|
+
function V({ column: t }) {
|
|
28
|
+
const { groupLabel: r, fieldLabel: l } = K(t);
|
|
29
|
+
return /* @__PURE__ */ a("div", { className: "flex items-center gap-3 p-1 bg-background-neutral-default border border-stroke-solid-light rounded-xl ", children: [
|
|
30
|
+
/* @__PURE__ */ e(p, {}),
|
|
29
31
|
/* @__PURE__ */ e("div", { className: "shrink-0 flex items-center justify-center w-3.5 h-3.5 ", children: t.icon }),
|
|
30
|
-
/* @__PURE__ */
|
|
31
|
-
/* @__PURE__ */ e(
|
|
32
|
+
/* @__PURE__ */ a("div", { className: "flex items-center gap-0.5 min-w-0 flex-1 leading-none-regular-sm", children: [
|
|
33
|
+
/* @__PURE__ */ e(n, { text: r, className: "text-text-neutral-secondary" }),
|
|
32
34
|
/* @__PURE__ */ e("span", { className: "text-text-neutral-muted flex-shrink-0", children: "/" }),
|
|
33
|
-
/* @__PURE__ */ e(
|
|
35
|
+
/* @__PURE__ */ e(n, { text: l, className: "text-text-neutral-primary" })
|
|
34
36
|
] })
|
|
35
37
|
] });
|
|
36
38
|
}
|
|
37
|
-
const
|
|
39
|
+
const U = ({
|
|
38
40
|
column: t,
|
|
39
41
|
index: r,
|
|
40
|
-
onRemove:
|
|
42
|
+
onRemove: l,
|
|
43
|
+
onEdit: x,
|
|
41
44
|
renderAction: o,
|
|
42
|
-
disabled:
|
|
45
|
+
disabled: c = !1,
|
|
46
|
+
editable: N = !1
|
|
43
47
|
}) => {
|
|
44
|
-
const {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
+
const {
|
|
49
|
+
ref: b,
|
|
50
|
+
state: s,
|
|
51
|
+
isEditing: u,
|
|
52
|
+
editValue: v,
|
|
53
|
+
setEditValue: k,
|
|
54
|
+
handleEditClick: w,
|
|
55
|
+
handleSave: y,
|
|
56
|
+
handleCancel: C,
|
|
57
|
+
handleKeyDown: I,
|
|
58
|
+
groupLabel: g,
|
|
59
|
+
fieldLabel: h,
|
|
60
|
+
fullLabel: L
|
|
61
|
+
} = F(t, r, c, x);
|
|
62
|
+
return /* @__PURE__ */ a(d, { children: [
|
|
63
|
+
/* @__PURE__ */ a("div", { className: "relative border-b-0.5", children: [
|
|
64
|
+
/* @__PURE__ */ a(
|
|
48
65
|
"div",
|
|
49
66
|
{
|
|
50
67
|
"data-column-id": t.id,
|
|
51
|
-
ref:
|
|
52
|
-
title: `${
|
|
53
|
-
className:
|
|
68
|
+
ref: b,
|
|
69
|
+
title: `${g} / ${h}`,
|
|
70
|
+
className: m(
|
|
54
71
|
"flex items-center gap-2 p-1 pl-3 bg-background-neutral-default transition-colors",
|
|
55
|
-
|
|
56
|
-
|
|
72
|
+
c ? "cursor-default" : "cursor-grab hover:bg-background-neutral-medium",
|
|
73
|
+
S[s.type] ?? ""
|
|
57
74
|
),
|
|
58
75
|
children: [
|
|
59
|
-
!
|
|
60
|
-
/* @__PURE__ */ e("div", { className: "
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
76
|
+
!c && /* @__PURE__ */ e("div", { className: "shrink-0 flex items-center justify-center", children: /* @__PURE__ */ e(p, {}) }),
|
|
77
|
+
u ? /* @__PURE__ */ e(d, { children: /* @__PURE__ */ a("div", { className: "flex items-center gap-2 min-w-0 flex-1", children: [
|
|
78
|
+
/* @__PURE__ */ e(
|
|
79
|
+
P,
|
|
80
|
+
{
|
|
81
|
+
size: "small",
|
|
82
|
+
value: v,
|
|
83
|
+
onChange: (D) => k(D.target.value),
|
|
84
|
+
onKeyDown: I,
|
|
85
|
+
placeholder: L,
|
|
86
|
+
className: "flex-1",
|
|
87
|
+
autoFocus: !0
|
|
88
|
+
}
|
|
89
|
+
),
|
|
90
|
+
/* @__PURE__ */ e(
|
|
91
|
+
i,
|
|
92
|
+
{
|
|
93
|
+
onClick: y,
|
|
94
|
+
variant: "ghost",
|
|
95
|
+
shade: "neutral",
|
|
96
|
+
size: "medium",
|
|
97
|
+
leftIcon: /* @__PURE__ */ e(j, { className: "w-3.5 h-3.5" })
|
|
98
|
+
}
|
|
99
|
+
)
|
|
100
|
+
] }) }) : /* @__PURE__ */ a("div", { className: "flex flex-col gap-1 min-w-0", children: [
|
|
101
|
+
/* @__PURE__ */ a("div", { className: "flex items-center gap-1", children: [
|
|
102
|
+
/* @__PURE__ */ e("div", { className: "shrink-0 flex items-center justify-center w-3.5 h-3.5", children: t.icon }),
|
|
103
|
+
/* @__PURE__ */ a("div", { className: "flex items-center gap-0.5 min-w-0 flex-1 leading-none-regular-sm", children: [
|
|
104
|
+
/* @__PURE__ */ e(n, { text: g, className: "text-text-neutral-secondary" }),
|
|
105
|
+
/* @__PURE__ */ e("span", { className: "text-text-neutral-muted flex-shrink-0", children: "/" }),
|
|
106
|
+
/* @__PURE__ */ e(n, { text: h, className: "text-text-neutral-primary" })
|
|
107
|
+
] })
|
|
108
|
+
] }),
|
|
109
|
+
t.editedLabel && /* @__PURE__ */ e("span", { className: "leading-none-regular-sm text-text-neutral-secondary truncate min-w-0", children: t.editedLabel })
|
|
65
110
|
] }),
|
|
66
|
-
/* @__PURE__ */ e("div", { className: "ml-auto flex items-center gap-3", children:
|
|
67
|
-
|
|
111
|
+
/* @__PURE__ */ e("div", { className: "ml-auto flex items-center gap-3", children: u ? /* @__PURE__ */ e(
|
|
112
|
+
i,
|
|
68
113
|
{
|
|
69
|
-
onClick:
|
|
114
|
+
onClick: C,
|
|
70
115
|
variant: "ghost",
|
|
71
116
|
shade: "neutral",
|
|
72
117
|
size: "medium",
|
|
73
|
-
leftIcon: /* @__PURE__ */ e(
|
|
118
|
+
leftIcon: /* @__PURE__ */ e(f, { className: "w-3.5 h-3.5" })
|
|
74
119
|
}
|
|
75
|
-
)
|
|
120
|
+
) : /* @__PURE__ */ a(d, { children: [
|
|
121
|
+
N && /* @__PURE__ */ e(
|
|
122
|
+
i,
|
|
123
|
+
{
|
|
124
|
+
onClick: w,
|
|
125
|
+
variant: "ghost",
|
|
126
|
+
shade: "neutral",
|
|
127
|
+
size: "medium",
|
|
128
|
+
leftIcon: /* @__PURE__ */ e(z, { className: "w-3.5 h-3.5" })
|
|
129
|
+
}
|
|
130
|
+
),
|
|
131
|
+
o ? o(t, l) : /* @__PURE__ */ e(
|
|
132
|
+
i,
|
|
133
|
+
{
|
|
134
|
+
onClick: () => l == null ? void 0 : l(t.id),
|
|
135
|
+
variant: "ghost",
|
|
136
|
+
shade: "neutral",
|
|
137
|
+
size: "medium",
|
|
138
|
+
leftIcon: /* @__PURE__ */ e(f, { className: "w-3.5 h-3.5" })
|
|
139
|
+
}
|
|
140
|
+
)
|
|
141
|
+
] }) })
|
|
76
142
|
]
|
|
77
143
|
}
|
|
78
144
|
),
|
|
79
|
-
s.type === "is-dragging-over" && s.closestEdge && /* @__PURE__ */ e(
|
|
145
|
+
s.type === "is-dragging-over" && s.closestEdge && /* @__PURE__ */ e(T, { edge: s.closestEdge, isFirstElement: r === 0 })
|
|
80
146
|
] }),
|
|
81
|
-
s.type === "preview" &&
|
|
147
|
+
s.type === "preview" && E(/* @__PURE__ */ e(V, { column: t }), s.container)
|
|
82
148
|
] });
|
|
83
149
|
};
|
|
84
150
|
export {
|
|
85
|
-
|
|
86
|
-
|
|
151
|
+
U as ColumnItem,
|
|
152
|
+
U as default
|
|
87
153
|
};
|
|
@@ -16,6 +16,8 @@ export interface ColumnItemProps {
|
|
|
16
16
|
column: ColumnType;
|
|
17
17
|
index: number;
|
|
18
18
|
onRemove?: (columnId: string) => void;
|
|
19
|
+
onEdit?: (columnId: string, newLabel: string) => void;
|
|
19
20
|
renderAction?: (column: ColumnType, onRemove?: (columnId: string) => void) => ReactNode;
|
|
20
21
|
disabled?: boolean;
|
|
22
|
+
editable?: boolean;
|
|
21
23
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as a } from "react/jsx-runtime";
|
|
2
2
|
import * as p from "react";
|
|
3
|
-
import { cn as w } from "
|
|
3
|
+
import { cn as w } from "../../../lib/utils.js";
|
|
4
4
|
import { validateChartConfig as S, validateChartData as E } from "./validators/config-validator.js";
|
|
5
5
|
import { buildChartOptions as O } from "./builders/chart-builder-factory.js";
|
|
6
|
-
import { Chart as R } from "
|
|
6
|
+
import { Chart as R } from "../../chart/chart.js";
|
|
7
7
|
import { LoadingState as V, ErrorState as l, EmptyState as $ } from "./chart-card-states.js";
|
|
8
8
|
function D({
|
|
9
9
|
config: t,
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export declare const POPCONFIRM_PLACEMENTS: {
|
|
2
|
+
readonly TOP: "top";
|
|
3
|
+
readonly TOP_LEFT: "topLeft";
|
|
4
|
+
readonly TOP_RIGHT: "topRight";
|
|
5
|
+
readonly BOTTOM: "bottom";
|
|
6
|
+
readonly BOTTOM_LEFT: "bottomLeft";
|
|
7
|
+
readonly BOTTOM_RIGHT: "bottomRight";
|
|
8
|
+
readonly LEFT: "left";
|
|
9
|
+
readonly LEFT_TOP: "leftTop";
|
|
10
|
+
readonly LEFT_BOTTOM: "leftBottom";
|
|
11
|
+
readonly RIGHT: "right";
|
|
12
|
+
readonly RIGHT_TOP: "rightTop";
|
|
13
|
+
readonly RIGHT_BOTTOM: "rightBottom";
|
|
14
|
+
};
|
|
15
|
+
export type PopconfirmPlacement = (typeof POPCONFIRM_PLACEMENTS)[keyof typeof POPCONFIRM_PLACEMENTS];
|
|
16
|
+
export declare const POPCONFIRM_DEFAULT_CONFIG: {
|
|
17
|
+
readonly okText: "OK";
|
|
18
|
+
readonly cancelText: "Cancel";
|
|
19
|
+
readonly placement: PopconfirmPlacement;
|
|
20
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
const T = {
|
|
2
|
+
TOP: "top",
|
|
3
|
+
TOP_LEFT: "topLeft",
|
|
4
|
+
TOP_RIGHT: "topRight",
|
|
5
|
+
BOTTOM: "bottom",
|
|
6
|
+
BOTTOM_LEFT: "bottomLeft",
|
|
7
|
+
BOTTOM_RIGHT: "bottomRight",
|
|
8
|
+
LEFT: "left",
|
|
9
|
+
LEFT_TOP: "leftTop",
|
|
10
|
+
LEFT_BOTTOM: "leftBottom",
|
|
11
|
+
RIGHT: "right",
|
|
12
|
+
RIGHT_TOP: "rightTop",
|
|
13
|
+
RIGHT_BOTTOM: "rightBottom"
|
|
14
|
+
}, t = {
|
|
15
|
+
okText: "OK",
|
|
16
|
+
cancelText: "Cancel",
|
|
17
|
+
placement: T.TOP
|
|
18
|
+
};
|
|
19
|
+
export {
|
|
20
|
+
t as POPCONFIRM_DEFAULT_CONFIG,
|
|
21
|
+
T as POPCONFIRM_PLACEMENTS
|
|
22
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
interface UsePopconfirmProps {
|
|
2
|
+
open?: boolean;
|
|
3
|
+
onOpenChange?: (open: boolean) => void;
|
|
4
|
+
onConfirm?: () => void | Promise<void>;
|
|
5
|
+
onCancel?: () => void;
|
|
6
|
+
}
|
|
7
|
+
export declare const usePopconfirm: (props: UsePopconfirmProps) => {
|
|
8
|
+
open: boolean;
|
|
9
|
+
confirmLoading: boolean;
|
|
10
|
+
handleOpenChange: (newOpen: boolean) => void;
|
|
11
|
+
handleConfirm: () => Promise<void>;
|
|
12
|
+
handleCancel: () => void;
|
|
13
|
+
};
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { useState as i, useCallback as a } from "react";
|
|
2
|
+
const g = (f) => {
|
|
3
|
+
const { open: c, onOpenChange: o, onConfirm: t, onCancel: e } = f, [m, d] = i(!1), [p, l] = i(!1), s = c !== void 0, u = s ? c : m, n = a(
|
|
4
|
+
(r) => {
|
|
5
|
+
s || d(r), o == null || o(r);
|
|
6
|
+
},
|
|
7
|
+
[s, o]
|
|
8
|
+
), C = a(async () => {
|
|
9
|
+
if (t) {
|
|
10
|
+
l(!0);
|
|
11
|
+
try {
|
|
12
|
+
await t(), n(!1);
|
|
13
|
+
} catch (r) {
|
|
14
|
+
console.error("Popconfirm confirm error:", r);
|
|
15
|
+
} finally {
|
|
16
|
+
l(!1);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
}, [t, n]), h = a(() => {
|
|
20
|
+
e == null || e(), n(!1);
|
|
21
|
+
}, [e, n]);
|
|
22
|
+
return {
|
|
23
|
+
open: u,
|
|
24
|
+
confirmLoading: p,
|
|
25
|
+
handleOpenChange: n,
|
|
26
|
+
handleConfirm: C,
|
|
27
|
+
handleCancel: h
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
export {
|
|
31
|
+
g as usePopconfirm
|
|
32
|
+
};
|