@ztwoint/z-ui 0.1.98 → 0.1.100
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/assets/icons/chain.d.ts +7 -0
- package/dist/components/assets/icons/chain.js +44 -0
- package/dist/components/assets/icons/descending.d.ts +8 -0
- package/dist/components/assets/icons/descending.js +96 -0
- package/dist/components/assets/icons/filter-icon.d.ts +6 -0
- package/dist/components/assets/icons/filter-icon.js +36 -0
- package/dist/components/assets/icons/index.d.ts +3 -0
- package/dist/components/column-reorder/column-reorder.hook.js +10 -9
- package/dist/components/column-reorder/column-reorder.js +16 -14
- package/dist/components/column-reorder/column-reorder.type.d.ts +1 -0
- package/dist/components/column-reorder/components/column-item/column-item.hook.d.ts +1 -1
- package/dist/components/column-reorder/components/column-item/column-item.hook.js +26 -26
- package/dist/components/column-reorder/components/column-item/column-item.js +91 -47
- package/dist/components/column-reorder/components/column-item/column-item.type.d.ts +1 -0
- package/dist/css/styles/tailwind.css +1 -1
- package/dist/index.js +44 -38
- package/dist/types/components/assets/icons/chain.d.ts +7 -0
- package/dist/types/components/assets/icons/descending.d.ts +8 -0
- package/dist/types/components/assets/icons/filter-icon.d.ts +6 -0
- package/dist/types/components/assets/icons/index.d.ts +3 -0
- package/dist/types/components/column-reorder/column-reorder.type.d.ts +1 -0
- package/dist/types/components/column-reorder/components/column-item/column-item.hook.d.ts +1 -1
- package/dist/types/components/column-reorder/components/column-item/column-item.type.d.ts +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { SVGProps } from 'react';
|
|
2
|
+
type IconProps = SVGProps<SVGSVGElement> & {
|
|
3
|
+
secondaryfill?: string;
|
|
4
|
+
title?: string;
|
|
5
|
+
};
|
|
6
|
+
declare function Link({ fill, secondaryfill, width, height, title, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export default Link;
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { jsxs as r, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
function l({
|
|
3
|
+
fill: C = "currentColor",
|
|
4
|
+
secondaryfill: e,
|
|
5
|
+
width: d = "1em",
|
|
6
|
+
height: n = "1em",
|
|
7
|
+
title: L = "badge 13",
|
|
8
|
+
...o
|
|
9
|
+
}) {
|
|
10
|
+
return e = e || C, /* @__PURE__ */ r(
|
|
11
|
+
"svg",
|
|
12
|
+
{
|
|
13
|
+
height: n,
|
|
14
|
+
width: d,
|
|
15
|
+
viewBox: "0 0 18 18",
|
|
16
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
17
|
+
...o,
|
|
18
|
+
children: [
|
|
19
|
+
/* @__PURE__ */ t("title", { children: L }),
|
|
20
|
+
/* @__PURE__ */ r("g", { fill: C, children: [
|
|
21
|
+
/* @__PURE__ */ t(
|
|
22
|
+
"path",
|
|
23
|
+
{
|
|
24
|
+
d: "M9.03166 6.54197C9.22575 6.9079 9.08644 7.36188 8.72052 7.55597C8.47184 7.68787 8.24717 7.85851 8.04832 8.05733C6.96021 9.14544 6.96021 10.9086 8.04832 11.9967L10.2233 14.1717C11.3114 15.2598 13.0746 15.2598 14.1627 14.1717C15.2507 13.0836 15.2608 11.3104 14.1727 10.2223L13.4103 9.45993C13.1174 9.16703 13.1174 8.69216 13.4103 8.39927C13.7032 8.10638 14.178 8.10638 14.4709 8.39927L15.2333 9.16167C16.9072 10.8356 16.9072 13.5484 15.2333 15.2223C13.5594 16.8962 10.8365 16.9062 9.16266 15.2323L6.98766 13.0573C5.31377 11.3834 5.31377 8.67056 6.98766 6.99667C7.29576 6.68747 7.64975 6.42597 8.01766 6.23083C8.38359 6.03674 8.83757 6.17604 9.03166 6.54197Z",
|
|
25
|
+
fill: e,
|
|
26
|
+
fillRule: "evenodd"
|
|
27
|
+
}
|
|
28
|
+
),
|
|
29
|
+
/* @__PURE__ */ t(
|
|
30
|
+
"path",
|
|
31
|
+
{
|
|
32
|
+
d: "M2.77868 2.76766C4.45257 1.09376 7.16544 1.09376 8.83934 2.76766L11.0143 4.94266C12.6882 6.61655 12.6882 9.32942 11.0143 11.0033C10.7101 11.3075 10.3647 11.5674 9.98433 11.7692C9.6184 11.9633 9.16442 11.824 8.97033 11.458C8.77624 11.0921 8.91554 10.6381 9.28147 10.444C9.53006 10.3122 9.7549 10.1414 9.95368 9.94267C11.0418 8.85455 11.0418 7.09142 9.95368 6.00332L7.77868 3.82832C6.69057 2.74021 4.92744 2.74021 3.83934 3.82832C2.76193 4.90573 2.74775 6.69607 3.82934 7.77766L4.59174 8.54006C4.88463 8.83295 4.88463 9.30782 4.59174 9.60072C4.29884 9.89361 3.82397 9.89361 3.53108 9.60072L2.76868 8.83832C1.10903 7.17867 1.1232 4.42314 2.77868 2.76766Z",
|
|
33
|
+
fill: C,
|
|
34
|
+
fillRule: "evenodd"
|
|
35
|
+
}
|
|
36
|
+
)
|
|
37
|
+
] })
|
|
38
|
+
]
|
|
39
|
+
}
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
export {
|
|
43
|
+
l as default
|
|
44
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { SVGProps } from 'react';
|
|
2
|
+
type IconProps = SVGProps<SVGSVGElement> & {
|
|
3
|
+
secondaryfill?: string;
|
|
4
|
+
strokewidth?: number;
|
|
5
|
+
title?: string;
|
|
6
|
+
};
|
|
7
|
+
declare function DescendingSorting({ fill, secondaryfill, strokewidth, width, height, title, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export default DescendingSorting;
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import { jsxs as i, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
function x({
|
|
3
|
+
fill: e = "currentColor",
|
|
4
|
+
secondaryfill: r,
|
|
5
|
+
strokewidth: o = 1,
|
|
6
|
+
width: t = "1em",
|
|
7
|
+
height: s = "1em",
|
|
8
|
+
title: k = "badge 13",
|
|
9
|
+
...d
|
|
10
|
+
}) {
|
|
11
|
+
return r = r || e, /* @__PURE__ */ i(
|
|
12
|
+
"svg",
|
|
13
|
+
{
|
|
14
|
+
height: s,
|
|
15
|
+
width: t,
|
|
16
|
+
viewBox: "0 0 18 18",
|
|
17
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
18
|
+
...d,
|
|
19
|
+
children: [
|
|
20
|
+
/* @__PURE__ */ n("title", { children: k }),
|
|
21
|
+
/* @__PURE__ */ i("g", { fill: e, children: [
|
|
22
|
+
/* @__PURE__ */ n(
|
|
23
|
+
"polyline",
|
|
24
|
+
{
|
|
25
|
+
fill: "none",
|
|
26
|
+
points: "10.25 12.75 12.75 15.25 15.25 12.75",
|
|
27
|
+
stroke: r,
|
|
28
|
+
strokeLinecap: "round",
|
|
29
|
+
strokeLinejoin: "round",
|
|
30
|
+
strokeWidth: o
|
|
31
|
+
}
|
|
32
|
+
),
|
|
33
|
+
/* @__PURE__ */ n(
|
|
34
|
+
"line",
|
|
35
|
+
{
|
|
36
|
+
fill: "none",
|
|
37
|
+
stroke: r,
|
|
38
|
+
strokeLinecap: "round",
|
|
39
|
+
strokeLinejoin: "round",
|
|
40
|
+
strokeWidth: o,
|
|
41
|
+
x1: "12.75",
|
|
42
|
+
x2: "12.75",
|
|
43
|
+
y1: "15.25",
|
|
44
|
+
y2: "6.25"
|
|
45
|
+
}
|
|
46
|
+
),
|
|
47
|
+
/* @__PURE__ */ n(
|
|
48
|
+
"line",
|
|
49
|
+
{
|
|
50
|
+
fill: "none",
|
|
51
|
+
stroke: e,
|
|
52
|
+
strokeLinecap: "round",
|
|
53
|
+
strokeLinejoin: "round",
|
|
54
|
+
strokeWidth: o,
|
|
55
|
+
x1: "2.75",
|
|
56
|
+
x2: "9.25",
|
|
57
|
+
y1: "9.75",
|
|
58
|
+
y2: "9.75"
|
|
59
|
+
}
|
|
60
|
+
),
|
|
61
|
+
/* @__PURE__ */ n(
|
|
62
|
+
"line",
|
|
63
|
+
{
|
|
64
|
+
fill: "none",
|
|
65
|
+
stroke: e,
|
|
66
|
+
strokeLinecap: "round",
|
|
67
|
+
strokeLinejoin: "round",
|
|
68
|
+
strokeWidth: o,
|
|
69
|
+
x1: "2.75",
|
|
70
|
+
x2: "9.25",
|
|
71
|
+
y1: "6.25",
|
|
72
|
+
y2: "6.25"
|
|
73
|
+
}
|
|
74
|
+
),
|
|
75
|
+
/* @__PURE__ */ n(
|
|
76
|
+
"line",
|
|
77
|
+
{
|
|
78
|
+
fill: "none",
|
|
79
|
+
stroke: e,
|
|
80
|
+
strokeLinecap: "round",
|
|
81
|
+
strokeLinejoin: "round",
|
|
82
|
+
strokeWidth: o,
|
|
83
|
+
x1: "2.75",
|
|
84
|
+
x2: "12.75",
|
|
85
|
+
y1: "2.75",
|
|
86
|
+
y2: "2.75"
|
|
87
|
+
}
|
|
88
|
+
)
|
|
89
|
+
] })
|
|
90
|
+
]
|
|
91
|
+
}
|
|
92
|
+
);
|
|
93
|
+
}
|
|
94
|
+
export {
|
|
95
|
+
x as default
|
|
96
|
+
};
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { jsxs as s, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
function d({
|
|
3
|
+
fill: o = "currentColor",
|
|
4
|
+
width: r = "1em",
|
|
5
|
+
height: n = "1em",
|
|
6
|
+
title: t = "badge 13",
|
|
7
|
+
...i
|
|
8
|
+
}) {
|
|
9
|
+
return /* @__PURE__ */ s(
|
|
10
|
+
"svg",
|
|
11
|
+
{
|
|
12
|
+
height: n,
|
|
13
|
+
width: r,
|
|
14
|
+
viewBox: "0 0 20 20",
|
|
15
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
16
|
+
...i,
|
|
17
|
+
children: [
|
|
18
|
+
/* @__PURE__ */ e("title", { children: t }),
|
|
19
|
+
/* @__PURE__ */ e("g", { fill: o, children: /* @__PURE__ */ e(
|
|
20
|
+
"polygon",
|
|
21
|
+
{
|
|
22
|
+
fill: "none",
|
|
23
|
+
points: "4 3 8 9 8 17 12 15 12 9 16 3 4 3",
|
|
24
|
+
stroke: o,
|
|
25
|
+
strokeLinecap: "round",
|
|
26
|
+
strokeLinejoin: "round",
|
|
27
|
+
strokeWidth: "2"
|
|
28
|
+
}
|
|
29
|
+
) })
|
|
30
|
+
]
|
|
31
|
+
}
|
|
32
|
+
);
|
|
33
|
+
}
|
|
34
|
+
export {
|
|
35
|
+
d as default
|
|
36
|
+
};
|
|
@@ -38,3 +38,6 @@ export { default as Vector3Icon } from './vector_3';
|
|
|
38
38
|
export { default as TableCols2Icon } from './table-cols-2';
|
|
39
39
|
export { default as TriangleWarningIcon } from './triangle-warning';
|
|
40
40
|
export { default as ArrowLeftIcon } from './arrow-left';
|
|
41
|
+
export { default as FilterIcon } from './filter-icon';
|
|
42
|
+
export { default as DescendingSortingIcon } from './descending';
|
|
43
|
+
export { default as ChainIcon } from './chain';
|
|
@@ -9,16 +9,17 @@ import "clsx";
|
|
|
9
9
|
import "tailwind-merge";
|
|
10
10
|
import { isColumnData as s } from "./components/column-item/column-item.util.js";
|
|
11
11
|
import "../button/button.js";
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
import "../tooltip/tooltip.js";
|
|
13
|
+
const b = ({ columns: o, onReorder: r }) => {
|
|
14
|
+
const [t, a] = I(o);
|
|
14
15
|
return p(() => {
|
|
15
|
-
a(
|
|
16
|
-
}, [
|
|
17
|
-
canMonitor({ source:
|
|
18
|
-
return s(
|
|
16
|
+
a(o);
|
|
17
|
+
}, [o]), p(() => C({
|
|
18
|
+
canMonitor({ source: e }) {
|
|
19
|
+
return s(e.data);
|
|
19
20
|
},
|
|
20
|
-
onDrop({ location:
|
|
21
|
-
const c =
|
|
21
|
+
onDrop({ location: e, source: g }) {
|
|
22
|
+
const c = e.current.dropTargets[0];
|
|
22
23
|
if (!c)
|
|
23
24
|
return;
|
|
24
25
|
const n = g.data, i = c.data;
|
|
@@ -43,5 +44,5 @@ const $ = ({ columns: e, onReorder: r }) => {
|
|
|
43
44
|
}), [t, r]), { internalColumns: t };
|
|
44
45
|
};
|
|
45
46
|
export {
|
|
46
|
-
|
|
47
|
+
b as useColumnReorder
|
|
47
48
|
};
|
|
@@ -1,30 +1,32 @@
|
|
|
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
|
|
3
|
+
import { cn as a } from "../../lib/utils.js";
|
|
4
|
+
import { ColumnItem as u } from "./components/column-item/column-item.js";
|
|
5
|
+
import { useColumnReorder as p } from "./column-reorder.hook.js";
|
|
6
|
+
const g = ({
|
|
7
7
|
columns: e,
|
|
8
8
|
onReorder: d,
|
|
9
9
|
onRemove: i,
|
|
10
|
-
renderAction:
|
|
11
|
-
className: t
|
|
10
|
+
renderAction: l,
|
|
11
|
+
className: t,
|
|
12
|
+
disabled: m = !1
|
|
12
13
|
}) => {
|
|
13
|
-
const { internalColumns:
|
|
14
|
+
const { internalColumns: n } = p({ columns: e, onReorder: d });
|
|
14
15
|
return /* @__PURE__ */ r(
|
|
15
16
|
"div",
|
|
16
17
|
{
|
|
17
|
-
className:
|
|
18
|
-
"rounded-2xl border-[0.5px] border-stroke-solid-light bg-background-neutral-default overflow-hidden
|
|
18
|
+
className: a(
|
|
19
|
+
"rounded-2xl border-[0.5px] border-stroke-solid-light bg-background-neutral-default overflow-hidden",
|
|
19
20
|
t
|
|
20
21
|
),
|
|
21
|
-
children: /* @__PURE__ */ r("div", { className: "divide-y divide-stroke-solid-light", children:
|
|
22
|
-
|
|
22
|
+
children: /* @__PURE__ */ r("div", { className: "divide-y divide-stroke-solid-light", children: n.map((o, s) => /* @__PURE__ */ r(
|
|
23
|
+
u,
|
|
23
24
|
{
|
|
24
25
|
column: o,
|
|
25
|
-
index:
|
|
26
|
+
index: s,
|
|
26
27
|
onRemove: i,
|
|
27
|
-
renderAction:
|
|
28
|
+
renderAction: l,
|
|
29
|
+
disabled: m
|
|
28
30
|
},
|
|
29
31
|
o.id
|
|
30
32
|
)) })
|
|
@@ -32,5 +34,5 @@ const v = ({
|
|
|
32
34
|
);
|
|
33
35
|
};
|
|
34
36
|
export {
|
|
35
|
-
|
|
37
|
+
g as ColumnReOrder
|
|
36
38
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ColumnType } from '../../column-reorder.type';
|
|
2
2
|
import { ColumnItemState } from './column-item.type';
|
|
3
3
|
export declare const idle: ColumnItemState;
|
|
4
|
-
export declare const useColumnItemDragAndDrop: (column: ColumnType, index: number) => {
|
|
4
|
+
export declare const useColumnItemDragAndDrop: (column: ColumnType, index: number, disabled?: boolean) => {
|
|
5
5
|
ref: import('react').RefObject<HTMLDivElement | null>;
|
|
6
6
|
state: ColumnItemState;
|
|
7
7
|
};
|
|
@@ -1,25 +1,25 @@
|
|
|
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 a = { type: "idle" },
|
|
9
|
-
const
|
|
10
|
-
return
|
|
11
|
-
const o =
|
|
12
|
-
if (o)
|
|
13
|
-
return
|
|
14
|
-
|
|
1
|
+
import { useRef as l, useState as u, useEffect as D } from "react";
|
|
2
|
+
import { dropTargetForElements as c, draggable as v } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/adapter/element-adapter.js";
|
|
3
|
+
import { setCustomNativeDragPreview as E } 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 y } 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 C } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/public-utils/combine.js";
|
|
6
|
+
import { extractClosestEdge as m, attachClosestEdge as w } from "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop-hitbox/dist/esm/closest-edge.js";
|
|
7
|
+
import { getColumnData as f, isColumnData as S } from "./column-item.util.js";
|
|
8
|
+
const a = { type: "idle" }, A = (n, s, i = !1) => {
|
|
9
|
+
const p = l(null), [d, r] = u(a);
|
|
10
|
+
return D(() => {
|
|
11
|
+
const o = p.current;
|
|
12
|
+
if (!(!o || i))
|
|
13
|
+
return C(
|
|
14
|
+
v({
|
|
15
15
|
element: o,
|
|
16
16
|
getInitialData() {
|
|
17
|
-
return
|
|
17
|
+
return f(n, s);
|
|
18
18
|
},
|
|
19
19
|
onGenerateDragPreview({ nativeSetDragImage: e }) {
|
|
20
|
-
|
|
20
|
+
E({
|
|
21
21
|
nativeSetDragImage: e,
|
|
22
|
-
getOffset:
|
|
22
|
+
getOffset: y({
|
|
23
23
|
x: "16px",
|
|
24
24
|
y: "0px"
|
|
25
25
|
}),
|
|
@@ -35,14 +35,14 @@ const a = { type: "idle" }, k = (n, s) => {
|
|
|
35
35
|
r(a);
|
|
36
36
|
}
|
|
37
37
|
}),
|
|
38
|
-
|
|
38
|
+
c({
|
|
39
39
|
element: o,
|
|
40
40
|
canDrop({ source: e }) {
|
|
41
|
-
return e.element === o ? !1 :
|
|
41
|
+
return e.element === o ? !1 : S(e.data);
|
|
42
42
|
},
|
|
43
43
|
getData({ input: e }) {
|
|
44
|
-
const t =
|
|
45
|
-
return
|
|
44
|
+
const t = f(n, s);
|
|
45
|
+
return w(t, {
|
|
46
46
|
element: o,
|
|
47
47
|
input: e,
|
|
48
48
|
allowedEdges: ["top", "bottom"]
|
|
@@ -52,11 +52,11 @@ const a = { type: "idle" }, k = (n, s) => {
|
|
|
52
52
|
return !0;
|
|
53
53
|
},
|
|
54
54
|
onDragEnter({ self: e }) {
|
|
55
|
-
const t =
|
|
55
|
+
const t = m(e.data);
|
|
56
56
|
r({ type: "is-dragging-over", closestEdge: t });
|
|
57
57
|
},
|
|
58
58
|
onDrag({ self: e }) {
|
|
59
|
-
const t =
|
|
59
|
+
const t = m(e.data);
|
|
60
60
|
r((g) => g.type === "is-dragging-over" && g.closestEdge === t ? g : { type: "is-dragging-over", closestEdge: t });
|
|
61
61
|
},
|
|
62
62
|
onDragLeave() {
|
|
@@ -67,12 +67,12 @@ const a = { type: "idle" }, k = (n, s) => {
|
|
|
67
67
|
}
|
|
68
68
|
})
|
|
69
69
|
);
|
|
70
|
-
}, [n, s]), {
|
|
71
|
-
ref:
|
|
70
|
+
}, [n, s, i]), {
|
|
71
|
+
ref: p,
|
|
72
72
|
state: d
|
|
73
73
|
};
|
|
74
74
|
};
|
|
75
75
|
export {
|
|
76
76
|
a as idle,
|
|
77
|
-
|
|
77
|
+
A as useColumnItemDragAndDrop
|
|
78
78
|
};
|
|
@@ -1,84 +1,128 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import {
|
|
3
|
-
import "react";
|
|
4
|
-
import { cn as
|
|
5
|
-
import { useColumnItemDragAndDrop as
|
|
6
|
-
import { Button as
|
|
7
|
-
import { Minus as
|
|
8
|
-
import { parseColumnLabel as
|
|
9
|
-
import
|
|
10
|
-
|
|
1
|
+
import { jsxs as l, Fragment as f, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as x, useState as h, useEffect as b } from "react";
|
|
3
|
+
import { createPortal as N } from "react-dom";
|
|
4
|
+
import { cn as u } from "../../../../lib/utils.js";
|
|
5
|
+
import { useColumnItemDragAndDrop as v } from "./column-item.hook.js";
|
|
6
|
+
import { Button as y } from "../../../button/button.js";
|
|
7
|
+
import { Minus as w } from "../../../assets/icons/minus.js";
|
|
8
|
+
import { parseColumnLabel as p } from "./column-item.util.js";
|
|
9
|
+
import g from "../../../assets/icons/drag-handle.js";
|
|
10
|
+
import { Z2Tooltip as k } from "../../../tooltip/tooltip.js";
|
|
11
|
+
const L = {
|
|
11
12
|
"is-dragging": "opacity-40",
|
|
12
13
|
"is-dragging-over": "bg-background-neutral-medium"
|
|
13
|
-
},
|
|
14
|
+
}, d = ({ text: t, className: s, tooltipMessage: r }) => {
|
|
15
|
+
const i = x(null), [o, m] = h(!1);
|
|
16
|
+
b(() => {
|
|
17
|
+
const n = () => {
|
|
18
|
+
if (i.current) {
|
|
19
|
+
const c = i.current;
|
|
20
|
+
m(c.scrollWidth > c.clientWidth);
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
|
|
24
|
+
}, [t]);
|
|
25
|
+
const a = /* @__PURE__ */ e("span", { ref: i, className: u("truncate min-w-0", s), children: t });
|
|
26
|
+
return o && r ? /* @__PURE__ */ e(k, { message: r, side: "top", children: a }) : a;
|
|
27
|
+
}, T = ({
|
|
14
28
|
edge: t,
|
|
15
|
-
isFirstElement:
|
|
29
|
+
isFirstElement: s = !1
|
|
16
30
|
}) => /* @__PURE__ */ e(
|
|
17
31
|
"div",
|
|
18
32
|
{
|
|
19
|
-
className:
|
|
33
|
+
className: u(
|
|
20
34
|
"absolute left-0 right-0 h-0.5 bg-blue-500",
|
|
21
|
-
t === "top" ?
|
|
35
|
+
t === "top" ? s ? "top-0" : "top-[-3px]" : "bottom-0"
|
|
22
36
|
)
|
|
23
37
|
}
|
|
24
38
|
);
|
|
25
|
-
function
|
|
26
|
-
const { groupLabel:
|
|
27
|
-
return /* @__PURE__ */
|
|
28
|
-
/* @__PURE__ */ e(
|
|
39
|
+
function E({ column: t }) {
|
|
40
|
+
const { groupLabel: s, fieldLabel: r } = p(t);
|
|
41
|
+
return /* @__PURE__ */ l("div", { className: "flex items-center gap-3 p-1 bg-background-neutral-default border border-stroke-solid-light rounded-xl ", children: [
|
|
42
|
+
/* @__PURE__ */ e(g, {}),
|
|
29
43
|
/* @__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
|
-
|
|
33
|
-
|
|
44
|
+
/* @__PURE__ */ l("div", { className: "flex items-center gap-0.5 min-w-0 flex-1 leading-none-regular-sm", children: [
|
|
45
|
+
/* @__PURE__ */ e(
|
|
46
|
+
d,
|
|
47
|
+
{
|
|
48
|
+
text: s,
|
|
49
|
+
className: "text-text-neutral-secondary",
|
|
50
|
+
tooltipMessage: `Group: ${s}`
|
|
51
|
+
}
|
|
52
|
+
),
|
|
53
|
+
/* @__PURE__ */ e("span", { className: "text-text-neutral-muted flex-shrink-0", children: "/" }),
|
|
54
|
+
/* @__PURE__ */ e(
|
|
55
|
+
d,
|
|
56
|
+
{
|
|
57
|
+
text: r,
|
|
58
|
+
className: "text-text-neutral-primary",
|
|
59
|
+
tooltipMessage: `Field: ${r}`
|
|
60
|
+
}
|
|
61
|
+
)
|
|
34
62
|
] })
|
|
35
63
|
] });
|
|
36
64
|
}
|
|
37
|
-
const
|
|
65
|
+
const S = ({
|
|
38
66
|
column: t,
|
|
39
|
-
index:
|
|
40
|
-
onRemove:
|
|
41
|
-
renderAction:
|
|
67
|
+
index: s,
|
|
68
|
+
onRemove: r,
|
|
69
|
+
renderAction: i,
|
|
70
|
+
disabled: o = !1
|
|
42
71
|
}) => {
|
|
43
|
-
const { ref:
|
|
44
|
-
return /* @__PURE__ */
|
|
45
|
-
/* @__PURE__ */
|
|
46
|
-
/* @__PURE__ */
|
|
72
|
+
const { ref: m, state: a } = v(t, s, o), { groupLabel: n, fieldLabel: c } = p(t);
|
|
73
|
+
return /* @__PURE__ */ l(f, { children: [
|
|
74
|
+
/* @__PURE__ */ l("div", { className: "relative border-b-0.5", children: [
|
|
75
|
+
/* @__PURE__ */ l(
|
|
47
76
|
"div",
|
|
48
77
|
{
|
|
49
78
|
"data-column-id": t.id,
|
|
50
|
-
ref:
|
|
51
|
-
className:
|
|
52
|
-
"flex items-center gap-2 p-1 pl-3 bg-background-neutral-default
|
|
53
|
-
|
|
79
|
+
ref: m,
|
|
80
|
+
className: u(
|
|
81
|
+
"flex items-center gap-2 p-1 pl-3 bg-background-neutral-default transition-colors",
|
|
82
|
+
o ? "cursor-default opacity-60" : "cursor-grab hover:bg-background-neutral-medium",
|
|
83
|
+
L[a.type] ?? ""
|
|
54
84
|
),
|
|
55
85
|
children: [
|
|
56
|
-
/* @__PURE__ */ e(
|
|
86
|
+
!o && /* @__PURE__ */ e(g, {}),
|
|
57
87
|
/* @__PURE__ */ e("div", { className: "shrink-0 flex items-center justify-center w-3.5 h-3.5", children: t.icon }),
|
|
58
|
-
/* @__PURE__ */
|
|
59
|
-
/* @__PURE__ */ e(
|
|
60
|
-
|
|
61
|
-
|
|
88
|
+
/* @__PURE__ */ l("div", { className: "flex items-center gap-0.5 min-w-0 flex-1 leading-none-regular-sm", children: [
|
|
89
|
+
/* @__PURE__ */ e(
|
|
90
|
+
d,
|
|
91
|
+
{
|
|
92
|
+
text: n,
|
|
93
|
+
className: "text-text-neutral-secondary",
|
|
94
|
+
tooltipMessage: `Group: ${n}`
|
|
95
|
+
}
|
|
96
|
+
),
|
|
97
|
+
/* @__PURE__ */ e("span", { className: "text-text-neutral-muted flex-shrink-0", children: "/" }),
|
|
98
|
+
/* @__PURE__ */ e(
|
|
99
|
+
d,
|
|
100
|
+
{
|
|
101
|
+
text: c,
|
|
102
|
+
className: "text-text-neutral-primary",
|
|
103
|
+
tooltipMessage: `Field: ${c}`
|
|
104
|
+
}
|
|
105
|
+
)
|
|
62
106
|
] }),
|
|
63
|
-
/* @__PURE__ */ e("div", { className: "ml-auto flex items-center gap-3", children:
|
|
64
|
-
|
|
107
|
+
/* @__PURE__ */ e("div", { className: "ml-auto flex items-center gap-3", children: i ? i(t, r) : /* @__PURE__ */ e(
|
|
108
|
+
y,
|
|
65
109
|
{
|
|
66
|
-
onClick: () =>
|
|
110
|
+
onClick: () => r == null ? void 0 : r(t.id),
|
|
67
111
|
variant: "ghost",
|
|
68
112
|
shade: "neutral",
|
|
69
113
|
size: "medium",
|
|
70
|
-
leftIcon: /* @__PURE__ */ e(
|
|
114
|
+
leftIcon: /* @__PURE__ */ e(w, { className: "w-4 h-4" })
|
|
71
115
|
}
|
|
72
116
|
) })
|
|
73
117
|
]
|
|
74
118
|
}
|
|
75
119
|
),
|
|
76
|
-
|
|
120
|
+
a.type === "is-dragging-over" && a.closestEdge && /* @__PURE__ */ e(T, { edge: a.closestEdge, isFirstElement: s === 0 })
|
|
77
121
|
] }),
|
|
78
|
-
|
|
122
|
+
a.type === "preview" && N(/* @__PURE__ */ e(E, { column: t }), a.container)
|
|
79
123
|
] });
|
|
80
124
|
};
|
|
81
125
|
export {
|
|
82
|
-
|
|
83
|
-
|
|
126
|
+
S as ColumnItem,
|
|
127
|
+
S as default
|
|
84
128
|
};
|