lecom-ui 5.3.28 → 5.3.30
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.md +1 -1
- package/dist/components/Collapse/Collapse.js +94 -0
- package/dist/components/DataTable/Table.js +4 -2
- package/dist/components/Input/Input.js +1 -1
- package/dist/components/MultiSelect/MultiSelect.js +206 -11
- package/dist/index.d.ts +23 -8
- package/dist/plugin/extend.js +78 -78
- package/dist/plugin/fontFaces.js +172 -172
- package/dist/plugin/general.js +12 -12
- package/dist/plugin/pluginDev.cjs +5 -5
- package/dist/plugin/pluginNext.cjs +5 -5
- package/dist/plugin/pluginNextTurbo.cjs +5 -5
- package/dist/plugin/pluginVite.cjs +5 -5
- package/dist/plugin/template.js +31 -31
- package/dist/plugin/typographies.js +152 -152
- package/dist/plugin/varsTheme.js +79 -79
- package/dist/style.min.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
lecom-ui
|
|
1
|
+
lecom-ui
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { cn } from '../../lib/utils.js';
|
|
3
|
+
import * as AccordionPrimitive from '@radix-ui/react-accordion';
|
|
4
|
+
import { cva } from 'class-variance-authority';
|
|
5
|
+
import { ChevronRight } from 'lucide-react';
|
|
6
|
+
|
|
7
|
+
const collapseTriggerVariants = cva(
|
|
8
|
+
"flex items-center justify-between w-full transition-all text-left outline-none data-[state=open]:font-semibold",
|
|
9
|
+
{
|
|
10
|
+
variants: {
|
|
11
|
+
size: {
|
|
12
|
+
small: "text-sm py-1.5 px-4 min-h-8",
|
|
13
|
+
medium: "text-base py-2.5 px-4 min-h-10",
|
|
14
|
+
large: "text-lg py-3 px-4 min-h-12"
|
|
15
|
+
},
|
|
16
|
+
ghost: {
|
|
17
|
+
true: "bg-transparent border-none",
|
|
18
|
+
false: "border-t-none border-grey-400"
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
defaultVariants: {
|
|
22
|
+
size: "large",
|
|
23
|
+
ghost: false
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
);
|
|
27
|
+
const CollapseRoot = AccordionPrimitive.Root;
|
|
28
|
+
const CollapseItem = AccordionPrimitive.Item;
|
|
29
|
+
const CollapsePanel = React.forwardRef(
|
|
30
|
+
({
|
|
31
|
+
header,
|
|
32
|
+
children,
|
|
33
|
+
extra,
|
|
34
|
+
expandIconPosition = "start",
|
|
35
|
+
size = "large",
|
|
36
|
+
ghost = false,
|
|
37
|
+
disabled = false,
|
|
38
|
+
className,
|
|
39
|
+
...props
|
|
40
|
+
}, ref) => /* @__PURE__ */ React.createElement(
|
|
41
|
+
CollapseItem,
|
|
42
|
+
{
|
|
43
|
+
ref,
|
|
44
|
+
...props,
|
|
45
|
+
className: cn(
|
|
46
|
+
"group w-full",
|
|
47
|
+
disabled && "pointer-events-none opacity-50",
|
|
48
|
+
className
|
|
49
|
+
)
|
|
50
|
+
},
|
|
51
|
+
/* @__PURE__ */ React.createElement(AccordionPrimitive.Header, { asChild: true }, /* @__PURE__ */ React.createElement(
|
|
52
|
+
AccordionPrimitive.Trigger,
|
|
53
|
+
{
|
|
54
|
+
disabled,
|
|
55
|
+
className: cn(
|
|
56
|
+
collapseTriggerVariants({ size, ghost }),
|
|
57
|
+
"flex gap-2 items-center text-left font-normal"
|
|
58
|
+
)
|
|
59
|
+
},
|
|
60
|
+
/* @__PURE__ */ React.createElement(
|
|
61
|
+
"div",
|
|
62
|
+
{
|
|
63
|
+
className: cn(
|
|
64
|
+
"flex flex-1 items-center justify-between gap-4 w-full",
|
|
65
|
+
expandIconPosition === "end" ? "flex-row-reverse" : ""
|
|
66
|
+
)
|
|
67
|
+
},
|
|
68
|
+
/* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 truncate" }, /* @__PURE__ */ React.createElement(
|
|
69
|
+
"span",
|
|
70
|
+
{
|
|
71
|
+
className: "flex items-center justify-center flex-shrink-0 min-w-4 min-h-4 transition-transform duration-300 group-data-[state=open]:rotate-90 text-grey-700 text-lg select-none font-normal"
|
|
72
|
+
},
|
|
73
|
+
/* @__PURE__ */ React.createElement(ChevronRight, { className: "size-4" })
|
|
74
|
+
), /* @__PURE__ */ React.createElement("span", { className: "font-normal" }, header)),
|
|
75
|
+
extra && /* @__PURE__ */ React.createElement("div", { className: "text-sm text-grey-500" }, extra)
|
|
76
|
+
)
|
|
77
|
+
)),
|
|
78
|
+
/* @__PURE__ */ React.createElement(
|
|
79
|
+
AccordionPrimitive.Content,
|
|
80
|
+
{
|
|
81
|
+
className: cn(
|
|
82
|
+
"overflow-hidden data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up"
|
|
83
|
+
)
|
|
84
|
+
},
|
|
85
|
+
/* @__PURE__ */ React.createElement("div", { className: "text-sm text-grey-800 pt-2 pb-4 px-4" }, children)
|
|
86
|
+
)
|
|
87
|
+
)
|
|
88
|
+
);
|
|
89
|
+
CollapsePanel.displayName = "CollapsePanel";
|
|
90
|
+
const Collapse = Object.assign(CollapseRoot, {
|
|
91
|
+
Panel: CollapsePanel
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
export { Collapse, collapseTriggerVariants };
|
|
@@ -17,9 +17,9 @@ function Table({
|
|
|
17
17
|
if (elem === "td" && meta.truncate) {
|
|
18
18
|
return {
|
|
19
19
|
width: meta.width,
|
|
20
|
+
maxWidth: meta.maxWidth ?? "0",
|
|
21
|
+
minWidth: meta.minWidth ?? "0",
|
|
20
22
|
overflow: "hidden",
|
|
21
|
-
maxWidth: meta.maxWidth || "0",
|
|
22
|
-
minWidth: meta.minWidth || "0",
|
|
23
23
|
textOverflow: "ellipsis",
|
|
24
24
|
whiteSpace: "nowrap",
|
|
25
25
|
textAlign: meta.align || "left"
|
|
@@ -27,6 +27,8 @@ function Table({
|
|
|
27
27
|
}
|
|
28
28
|
return {
|
|
29
29
|
width: meta.width,
|
|
30
|
+
maxWidth: meta.maxWidth ?? "0",
|
|
31
|
+
minWidth: meta.minWidth ?? "0",
|
|
30
32
|
textAlign: meta.align || "left"
|
|
31
33
|
};
|
|
32
34
|
}, []);
|
|
@@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority';
|
|
|
4
4
|
|
|
5
5
|
const inputVariants = cva(
|
|
6
6
|
`flex h-8 w-full rounded-[4px] border border-grey-400 bg-background px-3 py-2
|
|
7
|
-
placeholder:text-muted-foreground outline-none
|
|
7
|
+
placeholder:text-muted-foreground outline-none placeholder:body-medium-400
|
|
8
8
|
hover:border-grey-500 focus:bg-background focus:border-grey-400 focus:ring-grey-600 focus:ring-opacity-15 focus:ring-4
|
|
9
9
|
disabled:cursor-not-allowed disabled:opacity-50
|
|
10
10
|
transition-all duration-300`,
|
|
@@ -17,13 +17,40 @@ const MultiSelect = React.forwardRef(
|
|
|
17
17
|
placeholder = "Select options",
|
|
18
18
|
maxCount = 3,
|
|
19
19
|
modalPopover = false,
|
|
20
|
-
className
|
|
20
|
+
className,
|
|
21
|
+
treeOptions,
|
|
22
|
+
treeSelectionStrategy = "leaf",
|
|
23
|
+
defaultExpandAll = false,
|
|
24
|
+
selectAllLabel,
|
|
25
|
+
treeSearch = true,
|
|
26
|
+
treeSearchPlaceholder,
|
|
27
|
+
matchTriggerWidth = true
|
|
21
28
|
}, ref) => {
|
|
22
29
|
const { t } = useTranslation();
|
|
23
30
|
const [selectedValues, setSelectedValues] = React.useState(value);
|
|
24
31
|
const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
|
|
32
|
+
const [expandedNodes, setExpandedNodes] = React.useState(
|
|
33
|
+
() => new Set(
|
|
34
|
+
defaultExpandAll ? function collectAll(ids, opts) {
|
|
35
|
+
if (!opts) return ids;
|
|
36
|
+
for (const o of opts) {
|
|
37
|
+
if (o.children?.length) {
|
|
38
|
+
ids.push(o.value);
|
|
39
|
+
collectAll(ids, o.children);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
return ids;
|
|
43
|
+
}([], treeOptions) : []
|
|
44
|
+
)
|
|
45
|
+
);
|
|
25
46
|
React.useEffect(() => {
|
|
26
|
-
|
|
47
|
+
const shallowEqual = (a, b) => {
|
|
48
|
+
if (a === b) return true;
|
|
49
|
+
if (a.length !== b.length) return false;
|
|
50
|
+
for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
|
|
51
|
+
return true;
|
|
52
|
+
};
|
|
53
|
+
setSelectedValues((prev) => shallowEqual(prev, value) ? prev : value);
|
|
27
54
|
}, [value]);
|
|
28
55
|
const handleInputKeyDown = (event) => {
|
|
29
56
|
if (event.key === "Enter") {
|
|
@@ -53,13 +80,142 @@ const MultiSelect = React.forwardRef(
|
|
|
53
80
|
onValueChange(newSelectedValues);
|
|
54
81
|
};
|
|
55
82
|
const toggleAll = () => {
|
|
56
|
-
if (
|
|
57
|
-
|
|
83
|
+
if (treeOptions && treeOptions.length) {
|
|
84
|
+
const gather = (acc, nodes) => {
|
|
85
|
+
for (const n of nodes) {
|
|
86
|
+
const isLeaf = !n.children || n.children.length === 0;
|
|
87
|
+
if (isLeaf || treeSelectionStrategy === "all") acc.push(n.value);
|
|
88
|
+
if (n.children) gather(acc, n.children);
|
|
89
|
+
}
|
|
90
|
+
return acc;
|
|
91
|
+
};
|
|
92
|
+
const all = gather([], treeOptions);
|
|
93
|
+
if (selectedValues.length === all.length) {
|
|
94
|
+
handleClear();
|
|
95
|
+
} else {
|
|
96
|
+
setSelectedValues(all);
|
|
97
|
+
onValueChange(all);
|
|
98
|
+
}
|
|
99
|
+
} else {
|
|
100
|
+
if (selectedValues.length === options.length) {
|
|
101
|
+
handleClear();
|
|
102
|
+
} else {
|
|
103
|
+
const allValues = options.map((option) => option.value);
|
|
104
|
+
setSelectedValues(allValues);
|
|
105
|
+
onValueChange(allValues);
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
const isTree = !!(treeOptions && treeOptions.length);
|
|
110
|
+
const [treeQuery, setTreeQuery] = React.useState("");
|
|
111
|
+
const filterTree = React.useCallback((nodes, q) => {
|
|
112
|
+
if (!q) return nodes;
|
|
113
|
+
const lower = q.toLowerCase();
|
|
114
|
+
const walk = (list) => {
|
|
115
|
+
const out = [];
|
|
116
|
+
for (const n of list) {
|
|
117
|
+
const selfMatch = n.label.toLowerCase().includes(lower);
|
|
118
|
+
const children = n.children ? walk(n.children) : void 0;
|
|
119
|
+
if (selfMatch || children && children.length) {
|
|
120
|
+
out.push({ ...n, children });
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
return out;
|
|
124
|
+
};
|
|
125
|
+
return walk(nodes);
|
|
126
|
+
}, []);
|
|
127
|
+
const displayedTree = React.useMemo(() => {
|
|
128
|
+
if (!treeOptions) return [];
|
|
129
|
+
return filterTree(treeOptions, treeQuery);
|
|
130
|
+
}, [treeOptions, treeQuery, filterTree]);
|
|
131
|
+
React.useEffect(() => {
|
|
132
|
+
if (!treeOptions) return;
|
|
133
|
+
if (treeQuery) {
|
|
134
|
+
const all = /* @__PURE__ */ new Set();
|
|
135
|
+
const collect = (list) => {
|
|
136
|
+
for (const n of list) {
|
|
137
|
+
if (n.children?.length) {
|
|
138
|
+
all.add(n.value);
|
|
139
|
+
collect(n.children);
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
};
|
|
143
|
+
collect(treeOptions);
|
|
144
|
+
setExpandedNodes(all);
|
|
145
|
+
}
|
|
146
|
+
}, [treeQuery, treeOptions]);
|
|
147
|
+
React.useCallback((val) => {
|
|
148
|
+
if (!treeOptions) return void 0;
|
|
149
|
+
const stack = [...treeOptions];
|
|
150
|
+
while (stack.length) {
|
|
151
|
+
const n = stack.pop();
|
|
152
|
+
if (n.value === val) return n.label;
|
|
153
|
+
if (n.children) stack.push(...n.children);
|
|
154
|
+
}
|
|
155
|
+
return void 0;
|
|
156
|
+
}, [treeOptions]);
|
|
157
|
+
React.useCallback(
|
|
158
|
+
(id) => expandedNodes.has(id),
|
|
159
|
+
[expandedNodes]
|
|
160
|
+
);
|
|
161
|
+
const collectAllValues = (node) => {
|
|
162
|
+
const self = treeSelectionStrategy === "all" ? [node.value] : [];
|
|
163
|
+
if (!node.children || node.children.length === 0) {
|
|
164
|
+
return treeSelectionStrategy === "all" ? [node.value] : [node.value];
|
|
165
|
+
}
|
|
166
|
+
return [
|
|
167
|
+
...self,
|
|
168
|
+
...node.children.flatMap((c) => collectAllValues(c))
|
|
169
|
+
];
|
|
170
|
+
};
|
|
171
|
+
const isNodeFullySelected = (node) => {
|
|
172
|
+
const values = collectAllValues(node);
|
|
173
|
+
return values.every((v) => selectedValues.includes(v));
|
|
174
|
+
};
|
|
175
|
+
const isNodePartiallySelected = (node) => {
|
|
176
|
+
const values = collectAllValues(node);
|
|
177
|
+
const some = values.some((v) => selectedValues.includes(v));
|
|
178
|
+
const all = values.every((v) => selectedValues.includes(v));
|
|
179
|
+
return some && !all;
|
|
180
|
+
};
|
|
181
|
+
const toggleTreeNode = (node) => {
|
|
182
|
+
const nodeValues = collectAllValues(node);
|
|
183
|
+
const allSelected = nodeValues.every((v) => selectedValues.includes(v));
|
|
184
|
+
let next;
|
|
185
|
+
if (allSelected) {
|
|
186
|
+
next = selectedValues.filter((v) => !nodeValues.includes(v));
|
|
58
187
|
} else {
|
|
59
|
-
|
|
60
|
-
setSelectedValues(allValues);
|
|
61
|
-
onValueChange(allValues);
|
|
188
|
+
next = Array.from(/* @__PURE__ */ new Set([...selectedValues, ...nodeValues]));
|
|
62
189
|
}
|
|
190
|
+
setSelectedValues(next);
|
|
191
|
+
onValueChange(next);
|
|
192
|
+
};
|
|
193
|
+
const renderTree = (nodes, depth = 0) => {
|
|
194
|
+
return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, nodes.map((n) => {
|
|
195
|
+
const hasChildren = !!(n.children && n.children.length);
|
|
196
|
+
const fully = isNodeFullySelected(n);
|
|
197
|
+
const partial = !fully && isNodePartiallySelected(n);
|
|
198
|
+
const isSelectedLeaf = !hasChildren && selectedValues.includes(n.value);
|
|
199
|
+
return /* @__PURE__ */ React.createElement("div", { key: n.value, className: "select-none" }, /* @__PURE__ */ React.createElement(
|
|
200
|
+
"div",
|
|
201
|
+
{
|
|
202
|
+
className: cn(
|
|
203
|
+
"flex items-center gap-2 px-2 py-1 cursor-pointer rounded-sm text-grey-800 hover:bg-grey-100 text-sm",
|
|
204
|
+
(fully || isSelectedLeaf) && "bg-blue-50"
|
|
205
|
+
),
|
|
206
|
+
style: { paddingLeft: depth * 14 + 8 },
|
|
207
|
+
onClick: (e) => {
|
|
208
|
+
e.stopPropagation();
|
|
209
|
+
toggleTreeNode(n);
|
|
210
|
+
}
|
|
211
|
+
},
|
|
212
|
+
/* @__PURE__ */ React.createElement("div", { className: cn(
|
|
213
|
+
"flex h-4 w-4 items-center justify-center rounded-sm border transition-colors",
|
|
214
|
+
fully ? "bg-blue-600 border-blue-600 text-primary-foreground" : "border-grey-400 bg-white"
|
|
215
|
+
) }, fully && /* @__PURE__ */ React.createElement(Check, { className: "h-3 w-3" }), partial && !fully && /* @__PURE__ */ React.createElement(Minus, { className: "h-3 w-3 text-blue-600" })),
|
|
216
|
+
/* @__PURE__ */ React.createElement("span", { className: "text-sm flex-1 truncate" }, n.label)
|
|
217
|
+
), hasChildren && /* @__PURE__ */ React.createElement("div", null, renderTree(n.children, depth + 1)));
|
|
218
|
+
}));
|
|
63
219
|
};
|
|
64
220
|
return /* @__PURE__ */ React.createElement(
|
|
65
221
|
Popover,
|
|
@@ -123,11 +279,14 @@ const MultiSelect = React.forwardRef(
|
|
|
123
279
|
/* @__PURE__ */ React.createElement(
|
|
124
280
|
PopoverContent,
|
|
125
281
|
{
|
|
126
|
-
className:
|
|
282
|
+
className: cn(
|
|
283
|
+
"p-0 max-h-80 overflow-auto",
|
|
284
|
+
matchTriggerWidth && "w-[var(--radix-popover-trigger-width)]"
|
|
285
|
+
),
|
|
127
286
|
align: "start",
|
|
128
287
|
onEscapeKeyDown: () => setIsPopoverOpen(false)
|
|
129
288
|
},
|
|
130
|
-
/* @__PURE__ */ React.createElement(Command, null, /* @__PURE__ */ React.createElement(
|
|
289
|
+
!isTree && /* @__PURE__ */ React.createElement(Command, null, /* @__PURE__ */ React.createElement(
|
|
131
290
|
CommandInput,
|
|
132
291
|
{
|
|
133
292
|
placeholder: t("multiSelect.search"),
|
|
@@ -150,7 +309,7 @@ const MultiSelect = React.forwardRef(
|
|
|
150
309
|
},
|
|
151
310
|
selectedValues.length === options.length ? /* @__PURE__ */ React.createElement(Check, { className: "h-4 w-4" }) : /* @__PURE__ */ React.createElement(Minus, { className: "h-4 w-4" })
|
|
152
311
|
),
|
|
153
|
-
/* @__PURE__ */ React.createElement("span", { className: "text-grey-800" }, t("multiSelect.selectAll"))
|
|
312
|
+
/* @__PURE__ */ React.createElement("span", { className: "text-grey-800" }, selectAllLabel ?? t("multiSelect.selectAll"))
|
|
154
313
|
), options.map((option) => {
|
|
155
314
|
const isSelected = selectedValues.includes(option.value);
|
|
156
315
|
return /* @__PURE__ */ React.createElement(
|
|
@@ -172,7 +331,43 @@ const MultiSelect = React.forwardRef(
|
|
|
172
331
|
),
|
|
173
332
|
/* @__PURE__ */ React.createElement("span", { className: "text-grey-800" }, option.label)
|
|
174
333
|
);
|
|
175
|
-
}))))
|
|
334
|
+
})))),
|
|
335
|
+
isTree && /* @__PURE__ */ React.createElement("div", { className: "min-w-[260px]" }, treeSearch && /* @__PURE__ */ React.createElement("div", { className: "px-1 pt-2 pb-0 border-b border-grey-300" }, /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement("svg", { className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-4.35-4.35m0 0A7.5 7.5 0 1 0 5.25 5.25a7.5 7.5 0 0 0 11.4 11.4z" })), /* @__PURE__ */ React.createElement(
|
|
336
|
+
"input",
|
|
337
|
+
{
|
|
338
|
+
type: "text",
|
|
339
|
+
value: treeQuery,
|
|
340
|
+
onChange: (e) => setTreeQuery(e.target.value),
|
|
341
|
+
placeholder: treeSearchPlaceholder || t("multiSelect.search"),
|
|
342
|
+
className: "w-full h-9 pl-9 pr-3 text-sm border-0 focus:outline-none focus:ring-0 bg-transparent placeholder:text-muted-foreground"
|
|
343
|
+
}
|
|
344
|
+
))), /* @__PURE__ */ React.createElement("div", { className: "px-2 pb-1" }, /* @__PURE__ */ React.createElement(
|
|
345
|
+
"div",
|
|
346
|
+
{
|
|
347
|
+
className: "flex items-center gap-2 px-2 py-1 cursor-pointer rounded-sm hover:bg-accent text-sm",
|
|
348
|
+
onClick: toggleAll
|
|
349
|
+
},
|
|
350
|
+
/* @__PURE__ */ React.createElement(
|
|
351
|
+
"div",
|
|
352
|
+
{
|
|
353
|
+
className: cn(
|
|
354
|
+
"flex h-4 w-4 items-center justify-center rounded-sm border-2 border-grey-400",
|
|
355
|
+
selectedValues.length > 0 ? "bg-blue-600 border-blue-600 text-primary-foreground" : "opacity-50 [&_svg]:invisible"
|
|
356
|
+
)
|
|
357
|
+
},
|
|
358
|
+
treeOptions && selectedValues.length === function countAll(nodes) {
|
|
359
|
+
if (!nodes) return 0;
|
|
360
|
+
let acc = 0;
|
|
361
|
+
for (const n of nodes) {
|
|
362
|
+
const hasChildren = !!(n.children && n.children.length);
|
|
363
|
+
if (!hasChildren) acc += 1;
|
|
364
|
+
else acc += treeSelectionStrategy === "all" ? 1 + countAll(n.children) : countAll(n.children);
|
|
365
|
+
}
|
|
366
|
+
return acc;
|
|
367
|
+
}(treeOptions) ? /* @__PURE__ */ React.createElement(Check, { className: "h-4 w-4" }) : /* @__PURE__ */ React.createElement(Minus, { className: "h-4 w-4" })
|
|
368
|
+
),
|
|
369
|
+
/* @__PURE__ */ React.createElement("span", { className: "text-grey-800" }, selectAllLabel ?? t("multiSelect.selectAll"))
|
|
370
|
+
), treeOptions && renderTree(displayedTree)))
|
|
176
371
|
)
|
|
177
372
|
);
|
|
178
373
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -742,9 +742,9 @@ interface HeaderProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<
|
|
|
742
742
|
}
|
|
743
743
|
|
|
744
744
|
declare const inputVariants: (props?: ({
|
|
745
|
-
variant?: "
|
|
746
|
-
size?: "
|
|
747
|
-
radius?: "
|
|
745
|
+
variant?: "default" | "filled" | "borderless" | null | undefined;
|
|
746
|
+
size?: "default" | "small" | "large" | null | undefined;
|
|
747
|
+
radius?: "default" | "small" | "large" | "full" | null | undefined;
|
|
748
748
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
749
749
|
interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size' | 'sufix' | 'prefix'>, VariantProps<typeof inputVariants> {
|
|
750
750
|
sufix?: React$1.ReactNode;
|
|
@@ -797,6 +797,21 @@ interface MultiSelectProps extends React$1.ButtonHTMLAttributes<HTMLButtonElemen
|
|
|
797
797
|
modalPopover?: boolean;
|
|
798
798
|
asChild?: boolean;
|
|
799
799
|
className?: string;
|
|
800
|
+
matchTriggerWidth?: boolean;
|
|
801
|
+
treeOptions?: MultiSelectTreeOption[];
|
|
802
|
+
treeSelectionStrategy?: 'leaf' | 'all';
|
|
803
|
+
defaultExpandAll?: boolean;
|
|
804
|
+
/** Custom label para "selecionar tudo" */
|
|
805
|
+
selectAllLabel?: string;
|
|
806
|
+
/** Exibe input de busca em modo árvore (default true) */
|
|
807
|
+
treeSearch?: boolean;
|
|
808
|
+
/** Placeholder da busca em modo árvore */
|
|
809
|
+
treeSearchPlaceholder?: string;
|
|
810
|
+
}
|
|
811
|
+
interface MultiSelectTreeOption {
|
|
812
|
+
label: string;
|
|
813
|
+
value: string;
|
|
814
|
+
children?: MultiSelectTreeOption[];
|
|
800
815
|
}
|
|
801
816
|
declare const MultiSelect: React$1.ForwardRefExoticComponent<MultiSelectProps & React$1.RefAttributes<HTMLButtonElement>>;
|
|
802
817
|
|
|
@@ -903,7 +918,7 @@ declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimi
|
|
|
903
918
|
declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
|
|
904
919
|
|
|
905
920
|
declare const ResizablePanelGroup: ({ className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => React$1.JSX.Element;
|
|
906
|
-
declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement |
|
|
921
|
+
declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLButtonElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLHeadingElement | HTMLParagraphElement | HTMLLabelElement | HTMLInputElement | HTMLUListElement | HTMLObjectElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLegendElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement>, "id" | "onResize"> & {
|
|
907
922
|
className?: string;
|
|
908
923
|
collapsedSize?: number | undefined;
|
|
909
924
|
collapsible?: boolean | undefined;
|
|
@@ -1058,9 +1073,9 @@ declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.
|
|
|
1058
1073
|
declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
1059
1074
|
|
|
1060
1075
|
declare const textareaVariants: (props?: ({
|
|
1061
|
-
variant?: "
|
|
1062
|
-
size?: "
|
|
1063
|
-
radius?: "
|
|
1076
|
+
variant?: "default" | "filled" | "borderless" | null | undefined;
|
|
1077
|
+
size?: "default" | "small" | "large" | null | undefined;
|
|
1078
|
+
radius?: "default" | "small" | "large" | "full" | null | undefined;
|
|
1064
1079
|
resize?: "default" | "both" | "horizontal" | "vertical" | null | undefined;
|
|
1065
1080
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
1066
1081
|
interface TextareaProps extends React$1.ComponentProps<'textarea'>, VariantProps<typeof textareaVariants> {
|
|
@@ -1213,4 +1228,4 @@ interface DateInputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputEleme
|
|
|
1213
1228
|
declare const DateInput: React$1.ForwardRefExoticComponent<DateInputProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
1214
1229
|
|
|
1215
1230
|
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, CadastroFacil, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent, Checkbox, Combobox, CustomDivider, MemoizedDataTable as DataTable, DateInput, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogScroll, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, ErrorEmptyDisplay, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Input, Layout, LogoLecom, LogoLecomBrand, ModoTeste, MultiSelect, Notification, Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationIndex, PaginationItem, PaginationLast, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverTrigger, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Rpa, SairModoTeste, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Spin, Steps, Switch, TOAST_REMOVE_DELAY, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TagInput, Textarea, ToggleGroup, ToggleGroupItem, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Translations, TypeMessageNotification, Typography, Upload, accordionVariants, buttonVariants, colors, fonts, initializeI18n, inputVariants, notificationVariants, reducer, tagVariants, textareaVariants, toast, typographyVariants, useFormField, useIsMobile, useNotificationToast, usePagination, useSidebar };
|
|
1216
|
-
export type { BgColor, BuildCellSelect, BuildColumns, BuildHeaderSelect, ButtonProps, CadastroFacilProps, CalloutNotificationProps, ChartConfig, CheckboxProps, CheckedCell, CheckedCellChange, CheckedHeader, CheckedHeaderChange, Color, ColorToken, Column, ColumnRender, ColumnSort, ColumnSortClient, ColumnTitle, ComboboxGroup, ComboboxOption, ComboboxProps, CustomStyles$1 as CustomStyles, DataTableProps, DateInputProps, DatePickerProps, DialogContentProps, ErrorEmptyDisplayProps, File, FillColor, Fonts, Header, HeaderProps, InlineNotificationProps, InputProps, LayoutProps, LogoLecomBrandProps, LogoLecomProps, Meta, ModoTesteProps, NotificationProps, PaginationProps, Row, RpaProps, SideBarProps, SpinProps, StepsProps, SwitchProps, TableProps, TagInputProps, TagItem, TagProps, TextColor, TextareaProps, TimelineStepItem, ToastNotificationProps, ToasterToast, TooltipContentProps, TypographyProps, UploadProps, UsePaginationItem };
|
|
1231
|
+
export type { BgColor, BuildCellSelect, BuildColumns, BuildHeaderSelect, ButtonProps, CadastroFacilProps, CalloutNotificationProps, ChartConfig, CheckboxProps, CheckedCell, CheckedCellChange, CheckedHeader, CheckedHeaderChange, Color, ColorToken, Column, ColumnRender, ColumnSort, ColumnSortClient, ColumnTitle, ComboboxGroup, ComboboxOption, ComboboxProps, CustomStyles$1 as CustomStyles, DataTableProps, DateInputProps, DatePickerProps, DialogContentProps, ErrorEmptyDisplayProps, File, FillColor, Fonts, Header, HeaderProps, InlineNotificationProps, InputProps, LayoutProps, LogoLecomBrandProps, LogoLecomProps, Meta, ModoTesteProps, MultiSelectTreeOption, NotificationProps, PaginationProps, Row, RpaProps, SideBarProps, SpinProps, StepsProps, SwitchProps, TableProps, TagInputProps, TagItem, TagProps, TextColor, TextareaProps, TimelineStepItem, ToastNotificationProps, ToasterToast, TooltipContentProps, TypographyProps, UploadProps, UsePaginationItem };
|
package/dist/plugin/extend.js
CHANGED
|
@@ -1,78 +1,78 @@
|
|
|
1
|
-
const extend = {
|
|
2
|
-
colors: {
|
|
3
|
-
background: 'hsl(var(--background))',
|
|
4
|
-
foreground: 'hsl(var(--foreground))',
|
|
5
|
-
card: {
|
|
6
|
-
DEFAULT: 'hsl(var(--card))',
|
|
7
|
-
foreground: 'hsl(var(--card-foreground))',
|
|
8
|
-
},
|
|
9
|
-
popover: {
|
|
10
|
-
DEFAULT: 'hsl(var(--popover))',
|
|
11
|
-
foreground: 'hsl(var(--popover-foreground))',
|
|
12
|
-
},
|
|
13
|
-
primary: {
|
|
14
|
-
DEFAULT: 'hsl(var(--primary))',
|
|
15
|
-
foreground: 'hsl(var(--primary-foreground))',
|
|
16
|
-
},
|
|
17
|
-
secondary: {
|
|
18
|
-
DEFAULT: 'hsl(var(--secondary))',
|
|
19
|
-
foreground: 'hsl(var(--secondary-foreground))',
|
|
20
|
-
},
|
|
21
|
-
muted: {
|
|
22
|
-
DEFAULT: 'hsl(var(--muted))',
|
|
23
|
-
foreground: 'hsl(var(--muted-foreground))',
|
|
24
|
-
},
|
|
25
|
-
accent: {
|
|
26
|
-
DEFAULT: 'hsl(var(--accent))',
|
|
27
|
-
foreground: 'hsl(var(--accent-foreground))',
|
|
28
|
-
},
|
|
29
|
-
destructive: {
|
|
30
|
-
DEFAULT: 'hsl(var(--destructive))',
|
|
31
|
-
foreground: 'hsl(var(--destructive-foreground))',
|
|
32
|
-
},
|
|
33
|
-
border: 'hsl(var(--border))',
|
|
34
|
-
input: 'hsl(var(--input))',
|
|
35
|
-
ring: 'hsl(var(--ring))',
|
|
36
|
-
chart: {
|
|
37
|
-
1: 'hsl(var(--chart-1))',
|
|
38
|
-
2: 'hsl(var(--chart-2))',
|
|
39
|
-
3: 'hsl(var(--chart-3))',
|
|
40
|
-
4: 'hsl(var(--chart-4))',
|
|
41
|
-
5: 'hsl(var(--chart-5))',
|
|
42
|
-
6: 'hsl(var(--chart-6))',
|
|
43
|
-
7: 'hsl(var(--chart-7))',
|
|
44
|
-
8: 'hsl(var(--chart-8))',
|
|
45
|
-
},
|
|
46
|
-
sidebar: {
|
|
47
|
-
DEFAULT: 'hsl(var(--sidebar-background))',
|
|
48
|
-
foreground: 'hsl(var(--sidebar-foreground))',
|
|
49
|
-
primary: 'hsl(var(--sidebar-primary))',
|
|
50
|
-
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
|
|
51
|
-
accent: 'hsl(var(--sidebar-accent))',
|
|
52
|
-
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
|
|
53
|
-
border: 'hsl(var(--sidebar-border))',
|
|
54
|
-
ring: 'hsl(var(--sidebar-ring))',
|
|
55
|
-
},
|
|
56
|
-
},
|
|
57
|
-
borderRadius: {
|
|
58
|
-
lg: 'var(--radius)',
|
|
59
|
-
md: 'calc(var(--radius) - 2px)',
|
|
60
|
-
sm: 'calc(var(--radius) - 4px)',
|
|
61
|
-
},
|
|
62
|
-
keyframes: {
|
|
63
|
-
'accordion-down': {
|
|
64
|
-
from: { height: '0' },
|
|
65
|
-
to: { height: 'var(--radix-accordion-content-height)' },
|
|
66
|
-
},
|
|
67
|
-
'accordion-up': {
|
|
68
|
-
from: { height: 'var(--radix-accordion-content-height)' },
|
|
69
|
-
to: { height: '0' },
|
|
70
|
-
},
|
|
71
|
-
},
|
|
72
|
-
animation: {
|
|
73
|
-
'accordion-down': 'accordion-down 0.2s ease-out',
|
|
74
|
-
'accordion-up': 'accordion-up 0.2s ease-out',
|
|
75
|
-
},
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
export { extend };
|
|
1
|
+
const extend = {
|
|
2
|
+
colors: {
|
|
3
|
+
background: 'hsl(var(--background))',
|
|
4
|
+
foreground: 'hsl(var(--foreground))',
|
|
5
|
+
card: {
|
|
6
|
+
DEFAULT: 'hsl(var(--card))',
|
|
7
|
+
foreground: 'hsl(var(--card-foreground))',
|
|
8
|
+
},
|
|
9
|
+
popover: {
|
|
10
|
+
DEFAULT: 'hsl(var(--popover))',
|
|
11
|
+
foreground: 'hsl(var(--popover-foreground))',
|
|
12
|
+
},
|
|
13
|
+
primary: {
|
|
14
|
+
DEFAULT: 'hsl(var(--primary))',
|
|
15
|
+
foreground: 'hsl(var(--primary-foreground))',
|
|
16
|
+
},
|
|
17
|
+
secondary: {
|
|
18
|
+
DEFAULT: 'hsl(var(--secondary))',
|
|
19
|
+
foreground: 'hsl(var(--secondary-foreground))',
|
|
20
|
+
},
|
|
21
|
+
muted: {
|
|
22
|
+
DEFAULT: 'hsl(var(--muted))',
|
|
23
|
+
foreground: 'hsl(var(--muted-foreground))',
|
|
24
|
+
},
|
|
25
|
+
accent: {
|
|
26
|
+
DEFAULT: 'hsl(var(--accent))',
|
|
27
|
+
foreground: 'hsl(var(--accent-foreground))',
|
|
28
|
+
},
|
|
29
|
+
destructive: {
|
|
30
|
+
DEFAULT: 'hsl(var(--destructive))',
|
|
31
|
+
foreground: 'hsl(var(--destructive-foreground))',
|
|
32
|
+
},
|
|
33
|
+
border: 'hsl(var(--border))',
|
|
34
|
+
input: 'hsl(var(--input))',
|
|
35
|
+
ring: 'hsl(var(--ring))',
|
|
36
|
+
chart: {
|
|
37
|
+
1: 'hsl(var(--chart-1))',
|
|
38
|
+
2: 'hsl(var(--chart-2))',
|
|
39
|
+
3: 'hsl(var(--chart-3))',
|
|
40
|
+
4: 'hsl(var(--chart-4))',
|
|
41
|
+
5: 'hsl(var(--chart-5))',
|
|
42
|
+
6: 'hsl(var(--chart-6))',
|
|
43
|
+
7: 'hsl(var(--chart-7))',
|
|
44
|
+
8: 'hsl(var(--chart-8))',
|
|
45
|
+
},
|
|
46
|
+
sidebar: {
|
|
47
|
+
DEFAULT: 'hsl(var(--sidebar-background))',
|
|
48
|
+
foreground: 'hsl(var(--sidebar-foreground))',
|
|
49
|
+
primary: 'hsl(var(--sidebar-primary))',
|
|
50
|
+
'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
|
|
51
|
+
accent: 'hsl(var(--sidebar-accent))',
|
|
52
|
+
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
|
|
53
|
+
border: 'hsl(var(--sidebar-border))',
|
|
54
|
+
ring: 'hsl(var(--sidebar-ring))',
|
|
55
|
+
},
|
|
56
|
+
},
|
|
57
|
+
borderRadius: {
|
|
58
|
+
lg: 'var(--radius)',
|
|
59
|
+
md: 'calc(var(--radius) - 2px)',
|
|
60
|
+
sm: 'calc(var(--radius) - 4px)',
|
|
61
|
+
},
|
|
62
|
+
keyframes: {
|
|
63
|
+
'accordion-down': {
|
|
64
|
+
from: { height: '0' },
|
|
65
|
+
to: { height: 'var(--radix-accordion-content-height)' },
|
|
66
|
+
},
|
|
67
|
+
'accordion-up': {
|
|
68
|
+
from: { height: 'var(--radix-accordion-content-height)' },
|
|
69
|
+
to: { height: '0' },
|
|
70
|
+
},
|
|
71
|
+
},
|
|
72
|
+
animation: {
|
|
73
|
+
'accordion-down': 'accordion-down 0.2s ease-out',
|
|
74
|
+
'accordion-up': 'accordion-up 0.2s ease-out',
|
|
75
|
+
},
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
export { extend };
|