@kamod-ch/ui 1.2.0 → 1.3.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/dist/TreeProvider-Cpu8yo3y.d.ts +270 -0
- package/dist/chunk-YMKC3H55.js +921 -0
- package/dist/chunk-YMKC3H55.js.map +1 -0
- package/dist/components/tree/index.d.ts +24 -0
- package/dist/components/tree/index.js +5 -0
- package/dist/components/tree/index.js.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/package.json +8 -2
|
@@ -0,0 +1,270 @@
|
|
|
1
|
+
import * as preact from 'preact';
|
|
2
|
+
import { ComponentChildren, JSX, RefObject } from 'preact';
|
|
3
|
+
import * as tailwind_variants from 'tailwind-variants';
|
|
4
|
+
import { VariantProps } from 'tailwind-variants';
|
|
5
|
+
import { Signal } from '@preact/signals';
|
|
6
|
+
|
|
7
|
+
type TreeLinesProps = {
|
|
8
|
+
level: number;
|
|
9
|
+
parentPath: boolean[];
|
|
10
|
+
isLast: boolean;
|
|
11
|
+
indent: number | string;
|
|
12
|
+
class?: string;
|
|
13
|
+
};
|
|
14
|
+
declare const TreeLines: ({ level, parentPath, isLast, indent, class: className, }: TreeLinesProps) => preact.JSX.Element | null;
|
|
15
|
+
|
|
16
|
+
type TreeIconState = {
|
|
17
|
+
nodeId: string;
|
|
18
|
+
branch: boolean;
|
|
19
|
+
expanded: boolean;
|
|
20
|
+
selected: boolean;
|
|
21
|
+
disabled: boolean;
|
|
22
|
+
level: number;
|
|
23
|
+
};
|
|
24
|
+
type TreeIconRender = (state: TreeIconState) => ComponentChildren;
|
|
25
|
+
type TreeIconProp = ComponentChildren | TreeIconRender;
|
|
26
|
+
type TreeIcons = {
|
|
27
|
+
branch?: ComponentChildren;
|
|
28
|
+
branchExpanded?: ComponentChildren;
|
|
29
|
+
leaf?: ComponentChildren;
|
|
30
|
+
expander?: ComponentChildren;
|
|
31
|
+
expanderExpanded?: ComponentChildren;
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
type TreeNodeContextValue = {
|
|
35
|
+
nodeId: string;
|
|
36
|
+
disabled: boolean;
|
|
37
|
+
hasChildren: boolean;
|
|
38
|
+
data?: unknown;
|
|
39
|
+
icon?: TreeIconProp;
|
|
40
|
+
expandedIcon?: ComponentChildren;
|
|
41
|
+
selectedIcon?: ComponentChildren;
|
|
42
|
+
disabledIcon?: ComponentChildren;
|
|
43
|
+
level: number;
|
|
44
|
+
parentPath: boolean[];
|
|
45
|
+
isLast: boolean;
|
|
46
|
+
itemRef: RefObject<HTMLDivElement>;
|
|
47
|
+
};
|
|
48
|
+
declare const useTreeNodeContext: () => TreeNodeContextValue;
|
|
49
|
+
type TreeNodeProps = {
|
|
50
|
+
nodeId: string;
|
|
51
|
+
disabled?: boolean;
|
|
52
|
+
data?: unknown;
|
|
53
|
+
icon?: TreeIconProp;
|
|
54
|
+
expandedIcon?: ComponentChildren;
|
|
55
|
+
selectedIcon?: ComponentChildren;
|
|
56
|
+
disabledIcon?: ComponentChildren;
|
|
57
|
+
children?: ComponentChildren;
|
|
58
|
+
};
|
|
59
|
+
declare const TreeNode: ({ nodeId, disabled, data, icon, expandedIcon, selectedIcon, disabledIcon, children, }: TreeNodeProps) => JSX.Element;
|
|
60
|
+
type TreeNodeTriggerProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "class"> & {
|
|
61
|
+
class?: string;
|
|
62
|
+
children?: ComponentChildren;
|
|
63
|
+
};
|
|
64
|
+
declare const TreeNodeTrigger: ({ class: className, children, onClick, onFocus, ...rest }: TreeNodeTriggerProps) => JSX.Element;
|
|
65
|
+
type TreeExpanderProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "class"> & {
|
|
66
|
+
class?: string;
|
|
67
|
+
};
|
|
68
|
+
declare const TreeExpander: ({ class: className, ...rest }: TreeExpanderProps) => JSX.Element;
|
|
69
|
+
type TreeIconProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "class"> & {
|
|
70
|
+
class?: string;
|
|
71
|
+
icon?: TreeIconProp;
|
|
72
|
+
expandedIcon?: ComponentChildren;
|
|
73
|
+
selectedIcon?: ComponentChildren;
|
|
74
|
+
disabledIcon?: ComponentChildren;
|
|
75
|
+
};
|
|
76
|
+
declare const TreeIcon: ({ class: className, icon: iconProp, expandedIcon: expandedIconProp, selectedIcon: selectedIconProp, disabledIcon: disabledIconProp, ...rest }: TreeIconProps) => JSX.Element | null;
|
|
77
|
+
type TreeLabelProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "class"> & {
|
|
78
|
+
class?: string;
|
|
79
|
+
children?: ComponentChildren;
|
|
80
|
+
};
|
|
81
|
+
declare const TreeLabel: ({ class: className, children, ...rest }: TreeLabelProps) => JSX.Element;
|
|
82
|
+
type TreeNodeActionsProps = Omit<JSX.HTMLAttributes<HTMLSpanElement>, "class"> & {
|
|
83
|
+
class?: string;
|
|
84
|
+
children?: ComponentChildren;
|
|
85
|
+
};
|
|
86
|
+
declare const TreeNodeActions: ({ class: className, children, onClick, onKeyDown, ...rest }: TreeNodeActionsProps) => JSX.Element;
|
|
87
|
+
type TreeNodeContentProps = {
|
|
88
|
+
children?: ComponentChildren;
|
|
89
|
+
class?: string;
|
|
90
|
+
};
|
|
91
|
+
declare const TreeNodeContent: {
|
|
92
|
+
({ children, class: className }: TreeNodeContentProps): JSX.Element | null;
|
|
93
|
+
__kamodTreeContent: boolean;
|
|
94
|
+
};
|
|
95
|
+
|
|
96
|
+
type TreeItemProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "class"> & {
|
|
97
|
+
nodeId: string;
|
|
98
|
+
label: ComponentChildren;
|
|
99
|
+
icon?: TreeIconProp;
|
|
100
|
+
expandedIcon?: ComponentChildren;
|
|
101
|
+
selectedIcon?: ComponentChildren;
|
|
102
|
+
disabledIcon?: ComponentChildren;
|
|
103
|
+
endContent?: ComponentChildren;
|
|
104
|
+
data?: unknown;
|
|
105
|
+
disabled?: boolean;
|
|
106
|
+
class?: string;
|
|
107
|
+
children?: ComponentChildren;
|
|
108
|
+
};
|
|
109
|
+
declare const TreeItem: ({ nodeId, label, icon, expandedIcon, selectedIcon, disabledIcon, endContent, data, disabled, class: className, children, ...rest }: TreeItemProps) => JSX.Element;
|
|
110
|
+
|
|
111
|
+
type TreeProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "class"> & {
|
|
112
|
+
class?: string;
|
|
113
|
+
children?: ComponentChildren;
|
|
114
|
+
};
|
|
115
|
+
declare const Tree: ({ class: className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: TreeProps) => JSX.Element;
|
|
116
|
+
|
|
117
|
+
type TreeNodeRecord = {
|
|
118
|
+
nodeId: string;
|
|
119
|
+
parentId: string | null;
|
|
120
|
+
disabled: boolean;
|
|
121
|
+
hasChildren: boolean;
|
|
122
|
+
data: unknown;
|
|
123
|
+
element: HTMLElement | null;
|
|
124
|
+
order: number;
|
|
125
|
+
isLast: boolean;
|
|
126
|
+
level: number;
|
|
127
|
+
};
|
|
128
|
+
declare class TreeRegistry {
|
|
129
|
+
private nodes;
|
|
130
|
+
private childrenByParent;
|
|
131
|
+
private orderCounter;
|
|
132
|
+
readonly version: Signal<number>;
|
|
133
|
+
private bump;
|
|
134
|
+
register(node: Omit<TreeNodeRecord, "order" | "isLast" | "level"> & {
|
|
135
|
+
level: number;
|
|
136
|
+
}): void;
|
|
137
|
+
unregister(nodeId: string): void;
|
|
138
|
+
setElement(nodeId: string, element: HTMLElement | null): void;
|
|
139
|
+
getNode(nodeId: string): TreeNodeRecord | undefined;
|
|
140
|
+
getChildren(parentId: string | null): string[];
|
|
141
|
+
getParent(nodeId: string): TreeNodeRecord | null;
|
|
142
|
+
isVisible(nodeId: string, expandedIds: ReadonlySet<string>): boolean;
|
|
143
|
+
getVisibleActivatableIds(expandedIds: ReadonlySet<string>): string[];
|
|
144
|
+
private rebuildChildren;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
type TreeSelectionMode = "none" | "single" | "multiple";
|
|
148
|
+
declare const treeVariants: tailwind_variants.TVReturnType<{
|
|
149
|
+
variant: {
|
|
150
|
+
default: "";
|
|
151
|
+
outline: "border-2";
|
|
152
|
+
ghost: "border-transparent bg-transparent";
|
|
153
|
+
};
|
|
154
|
+
size: {
|
|
155
|
+
sm: "text-sm";
|
|
156
|
+
default: "";
|
|
157
|
+
lg: "text-lg";
|
|
158
|
+
};
|
|
159
|
+
}, undefined, "w-full rounded-lg border border-border bg-background", {
|
|
160
|
+
variant: {
|
|
161
|
+
default: "";
|
|
162
|
+
outline: "border-2";
|
|
163
|
+
ghost: "border-transparent bg-transparent";
|
|
164
|
+
};
|
|
165
|
+
size: {
|
|
166
|
+
sm: "text-sm";
|
|
167
|
+
default: "";
|
|
168
|
+
lg: "text-lg";
|
|
169
|
+
};
|
|
170
|
+
}, undefined, tailwind_variants.TVReturnTypeLike<{
|
|
171
|
+
variant: {
|
|
172
|
+
default: "";
|
|
173
|
+
outline: "border-2";
|
|
174
|
+
ghost: "border-transparent bg-transparent";
|
|
175
|
+
};
|
|
176
|
+
size: {
|
|
177
|
+
sm: "text-sm";
|
|
178
|
+
default: "";
|
|
179
|
+
lg: "text-lg";
|
|
180
|
+
};
|
|
181
|
+
}, undefined>>;
|
|
182
|
+
declare const treeItemVariants: tailwind_variants.TVReturnType<{
|
|
183
|
+
variant: {
|
|
184
|
+
default: "hover:bg-accent/60 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground";
|
|
185
|
+
outline: "hover:bg-accent/40 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground";
|
|
186
|
+
ghost: "hover:bg-accent/50 data-[selected=true]:bg-accent/70 data-[selected=true]:text-accent-foreground";
|
|
187
|
+
};
|
|
188
|
+
size: {
|
|
189
|
+
sm: "min-h-7 gap-1.5 px-2 py-1 text-sm";
|
|
190
|
+
default: "min-h-8 gap-2 px-2.5 py-1.5 text-sm";
|
|
191
|
+
lg: "min-h-10 gap-2.5 px-3 py-2 text-base";
|
|
192
|
+
};
|
|
193
|
+
}, undefined, string[], {
|
|
194
|
+
variant: {
|
|
195
|
+
default: "hover:bg-accent/60 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground";
|
|
196
|
+
outline: "hover:bg-accent/40 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground";
|
|
197
|
+
ghost: "hover:bg-accent/50 data-[selected=true]:bg-accent/70 data-[selected=true]:text-accent-foreground";
|
|
198
|
+
};
|
|
199
|
+
size: {
|
|
200
|
+
sm: "min-h-7 gap-1.5 px-2 py-1 text-sm";
|
|
201
|
+
default: "min-h-8 gap-2 px-2.5 py-1.5 text-sm";
|
|
202
|
+
lg: "min-h-10 gap-2.5 px-3 py-2 text-base";
|
|
203
|
+
};
|
|
204
|
+
}, undefined, tailwind_variants.TVReturnTypeLike<{
|
|
205
|
+
variant: {
|
|
206
|
+
default: "hover:bg-accent/60 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground";
|
|
207
|
+
outline: "hover:bg-accent/40 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground";
|
|
208
|
+
ghost: "hover:bg-accent/50 data-[selected=true]:bg-accent/70 data-[selected=true]:text-accent-foreground";
|
|
209
|
+
};
|
|
210
|
+
size: {
|
|
211
|
+
sm: "min-h-7 gap-1.5 px-2 py-1 text-sm";
|
|
212
|
+
default: "min-h-8 gap-2 px-2.5 py-1.5 text-sm";
|
|
213
|
+
lg: "min-h-10 gap-2.5 px-3 py-2 text-base";
|
|
214
|
+
};
|
|
215
|
+
}, undefined>>;
|
|
216
|
+
type TreeProviderContextValue = {
|
|
217
|
+
registry: TreeRegistry;
|
|
218
|
+
expandedIds: Signal<Set<string>>;
|
|
219
|
+
selectedIds: Signal<Set<string>>;
|
|
220
|
+
selectionMode: TreeSelectionMode;
|
|
221
|
+
showLines: boolean;
|
|
222
|
+
showIcons: boolean;
|
|
223
|
+
animateExpand: boolean;
|
|
224
|
+
indent: number | string;
|
|
225
|
+
icons?: TreeIcons;
|
|
226
|
+
variant: NonNullable<VariantProps<typeof treeVariants>["variant"]>;
|
|
227
|
+
size: NonNullable<VariantProps<typeof treeVariants>["size"]>;
|
|
228
|
+
focusedId: Signal<string | null>;
|
|
229
|
+
tabbableId: Signal<string | null>;
|
|
230
|
+
isExpandedControlled: boolean;
|
|
231
|
+
isSelectedControlled: boolean;
|
|
232
|
+
setExpandedIds: (ids: string[]) => void;
|
|
233
|
+
setSelectedIds: (ids: string[]) => void;
|
|
234
|
+
toggleExpanded: (nodeId: string) => void;
|
|
235
|
+
selectNode: (nodeId: string, options?: {
|
|
236
|
+
additive?: boolean;
|
|
237
|
+
toggle?: boolean;
|
|
238
|
+
}) => void;
|
|
239
|
+
focusNode: (nodeId: string, options?: {
|
|
240
|
+
moveDOMFocus?: boolean;
|
|
241
|
+
}) => void;
|
|
242
|
+
getNodeData: (nodeId: string) => unknown;
|
|
243
|
+
};
|
|
244
|
+
declare const useTreeProvider: () => TreeProviderContextValue;
|
|
245
|
+
type TreeItemContextValue = {
|
|
246
|
+
nodeId: string;
|
|
247
|
+
level: number;
|
|
248
|
+
parentPath: boolean[];
|
|
249
|
+
isLast: boolean;
|
|
250
|
+
};
|
|
251
|
+
declare const useTreeItemContext: () => TreeItemContextValue | null;
|
|
252
|
+
type TreeProviderProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "class"> & VariantProps<typeof treeVariants> & {
|
|
253
|
+
class?: string;
|
|
254
|
+
expandedIds?: readonly string[];
|
|
255
|
+
defaultExpandedIds?: readonly string[];
|
|
256
|
+
onExpandedChange?: (ids: string[]) => void;
|
|
257
|
+
selectedIds?: readonly string[];
|
|
258
|
+
defaultSelectedIds?: readonly string[];
|
|
259
|
+
onSelectionChange?: (ids: string[]) => void;
|
|
260
|
+
selectionMode?: TreeSelectionMode;
|
|
261
|
+
showLines?: boolean;
|
|
262
|
+
showIcons?: boolean;
|
|
263
|
+
animateExpand?: boolean;
|
|
264
|
+
indent?: number | string;
|
|
265
|
+
icons?: TreeIcons;
|
|
266
|
+
children?: ComponentChildren;
|
|
267
|
+
};
|
|
268
|
+
declare const TreeProvider: ({ class: className, variant, size, expandedIds: expandedIdsProp, defaultExpandedIds, onExpandedChange, selectedIds: selectedIdsProp, defaultSelectedIds, onSelectionChange, selectionMode, showLines, showIcons, animateExpand, indent, icons, children, ...rest }: TreeProviderProps) => JSX.Element;
|
|
269
|
+
|
|
270
|
+
export { type TreeProps as A, type TreeIconProps as B, type TreeLabelProps as C, type TreeItemContextValue as D, type TreeNodeContextValue as E, type TreeProviderContextValue as F, useTreeItemContext as G, useTreeProvider as H, Tree as T, TreeExpander as a, type TreeExpanderProps as b, TreeIcon as c, type TreeIconProp as d, type TreeIconRender as e, type TreeIconState as f, type TreeIcons as g, TreeItem as h, type TreeItemProps as i, TreeLabel as j, TreeLines as k, type TreeLinesProps as l, TreeNode as m, TreeNodeActions as n, type TreeNodeActionsProps as o, TreeNodeContent as p, type TreeNodeContentProps as q, type TreeNodeProps as r, TreeNodeTrigger as s, type TreeNodeTriggerProps as t, TreeProvider as u, type TreeProviderProps as v, type TreeSelectionMode as w, treeItemVariants as x, treeVariants as y, useTreeNodeContext as z };
|