@floegence/floe-webapp-core 0.35.5 → 0.35.7
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/file-browser/DirectoryTree.js +78 -68
- package/dist/components/file-browser/FileContextMenu.d.ts +2 -0
- package/dist/components/file-browser/FileContextMenu.js +175 -157
- package/dist/components/file-browser/FileGridView.js +136 -125
- package/dist/components/file-browser/FileListView.js +145 -133
- package/dist/components/file-browser/touchInteractionGuard.d.ts +5 -0
- package/dist/components/file-browser/touchInteractionGuard.js +8 -0
- package/dist/components/file-browser/types.d.ts +2 -1
- package/dist/floe.css +8 -0
- package/dist/styles.css +1 -1
- package/package.json +1 -1
|
@@ -1,38 +1,39 @@
|
|
|
1
|
-
import { insert as s, createComponent as
|
|
2
|
-
import { createMemo as
|
|
3
|
-
import { cn as
|
|
4
|
-
import { useFileBrowser as
|
|
5
|
-
import { useFileBrowserDrag as
|
|
6
|
-
import { FolderOpenIcon as
|
|
7
|
-
import { ChevronRight as
|
|
8
|
-
import { createLongPressContextMenuHandlers as
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
import { insert as s, createComponent as o, effect as D, className as b, template as h, setAttribute as Y, spread as q, mergeProps as z, memo as _, setStyleProperty as J, delegateEvents as K } from "solid-js/web";
|
|
2
|
+
import { createMemo as T, For as Q, untrack as W, createSignal as Z, Show as v } from "solid-js";
|
|
3
|
+
import { cn as m } from "../../utils/cn.js";
|
|
4
|
+
import { useFileBrowser as E } from "./FileBrowserContext.js";
|
|
5
|
+
import { useFileBrowserDrag as ee } from "../../context/FileBrowserDragContext.js";
|
|
6
|
+
import { FolderOpenIcon as te, FolderIcon as ne } from "./FileIcons.js";
|
|
7
|
+
import { ChevronRight as re } from "../icons/index.js";
|
|
8
|
+
import { createLongPressContextMenuHandlers as ie } from "./longPressContextMenu.js";
|
|
9
|
+
import { fileBrowserTouchTargetAttrs as ae } from "./touchInteractionGuard.js";
|
|
10
|
+
var M = /* @__PURE__ */ h("<div>"), oe = /* @__PURE__ */ h("<button type=button>"), le = /* @__PURE__ */ h('<span class="ml-auto mr-2 text-[10px] text-muted-foreground/60 opacity-0 group-hover:opacity-100 transition-opacity">'), se = /* @__PURE__ */ h('<div class="flex flex-col"><div><button type=button><span class="flex-shrink-0 w-4 h-4"></span><span class=truncate>'), ce = /* @__PURE__ */ h('<span class="flex-shrink-0 w-3.5 h-3.5">');
|
|
11
|
+
function Ce(e) {
|
|
12
|
+
const l = E(), i = ee(), C = () => (e.enableDragDrop ?? !0) && !!i, x = () => e.instanceId ?? "default", d = T(() => l.files().filter((r) => r.type === "folder"));
|
|
12
13
|
return (() => {
|
|
13
|
-
var r =
|
|
14
|
-
return r.$$contextmenu = (
|
|
14
|
+
var r = M();
|
|
15
|
+
return r.$$contextmenu = (y) => y.preventDefault(), s(r, o(F, {
|
|
15
16
|
get items() {
|
|
16
|
-
return
|
|
17
|
+
return d();
|
|
17
18
|
},
|
|
18
19
|
depth: 0,
|
|
19
20
|
get instanceId() {
|
|
20
|
-
return
|
|
21
|
+
return x();
|
|
21
22
|
},
|
|
22
23
|
get enableDragDrop() {
|
|
23
|
-
return
|
|
24
|
+
return C();
|
|
24
25
|
},
|
|
25
26
|
dragContext: i
|
|
26
|
-
})),
|
|
27
|
+
})), D(() => b(r, m("flex flex-col", e.class))), r;
|
|
27
28
|
})();
|
|
28
29
|
}
|
|
29
|
-
function
|
|
30
|
-
const
|
|
31
|
-
return
|
|
30
|
+
function F(e) {
|
|
31
|
+
const l = T(() => e.items.filter((i) => i.type === "folder"));
|
|
32
|
+
return o(Q, {
|
|
32
33
|
get each() {
|
|
33
|
-
return
|
|
34
|
+
return l();
|
|
34
35
|
},
|
|
35
|
-
children: (i) =>
|
|
36
|
+
children: (i) => o(de, {
|
|
36
37
|
item: i,
|
|
37
38
|
get depth() {
|
|
38
39
|
return e.depth;
|
|
@@ -49,100 +50,110 @@ function L(e) {
|
|
|
49
50
|
})
|
|
50
51
|
});
|
|
51
52
|
}
|
|
52
|
-
function
|
|
53
|
-
const
|
|
53
|
+
function de(e) {
|
|
54
|
+
const l = E(), i = () => l.isExpanded(e.item.path), C = () => l.currentPath() === e.item.path, x = W(() => e.item), d = ie(l, x, {
|
|
54
55
|
selectOnOpen: !1
|
|
55
56
|
});
|
|
56
57
|
let r;
|
|
57
|
-
const [
|
|
58
|
+
const [y, I] = Z(!1), L = () => r === "touch" || r === "pen", p = T(() => e.item.children?.filter((t) => t.type === "folder").length ?? 0), u = () => p() > 0, $ = () => {
|
|
58
59
|
if (!e.enableDragDrop || !e.dragContext) return !1;
|
|
59
60
|
const t = e.dragContext.dragState();
|
|
60
61
|
return t.isDragging ? e.dragContext.canDropOn(t.draggedItems, e.item.path, e.item, e.instanceId) : !1;
|
|
61
|
-
}, O = () => e.dragContext?.dragState(), A = () => O()?.isDragging ?? !1,
|
|
62
|
-
r = t.pointerType,
|
|
62
|
+
}, O = () => e.dragContext?.dragState(), A = () => O()?.isDragging ?? !1, k = () => y() && A() && e.enableDragDrop, B = (t) => {
|
|
63
|
+
r = t.pointerType, d.onPointerDown(t);
|
|
63
64
|
}, H = (t) => {
|
|
64
|
-
r = t.pointerType,
|
|
65
|
+
r = t.pointerType, d.onPointerMove(t);
|
|
65
66
|
}, N = (t) => {
|
|
66
|
-
r = t.pointerType,
|
|
67
|
+
r = t.pointerType, d.onPointerUp();
|
|
67
68
|
}, R = (t) => {
|
|
68
|
-
r = t.pointerType,
|
|
69
|
+
r = t.pointerType, d.onPointerCancel();
|
|
69
70
|
}, U = (t) => {
|
|
70
71
|
if (!e.enableDragDrop || !e.dragContext) return;
|
|
71
72
|
const a = e.dragContext.dragState();
|
|
72
73
|
if (!a.isDragging) return;
|
|
73
|
-
|
|
74
|
-
const
|
|
74
|
+
I(!0);
|
|
75
|
+
const g = e.dragContext.canDropOn(a.draggedItems, e.item.path, e.item, e.instanceId), P = t.currentTarget?.getBoundingClientRect() ?? null;
|
|
75
76
|
e.dragContext.setDropTarget({
|
|
76
77
|
instanceId: e.instanceId,
|
|
77
78
|
targetPath: e.item.path,
|
|
78
79
|
targetItem: e.item
|
|
79
|
-
},
|
|
80
|
+
}, g, P);
|
|
80
81
|
}, V = (t) => {
|
|
81
82
|
if (!e.dragContext) return;
|
|
82
|
-
|
|
83
|
+
I(!1);
|
|
83
84
|
const a = e.dragContext.dragState();
|
|
84
85
|
a.isDragging && a.dropTarget?.targetPath === e.item.path && e.dragContext.setDropTarget(null, !1);
|
|
85
86
|
}, j = (t) => {
|
|
86
|
-
|
|
87
|
+
d.consumeClickSuppression(t) || l.navigateTo(x);
|
|
87
88
|
}, G = (t) => {
|
|
88
|
-
t.preventDefault(), t.stopPropagation(), !
|
|
89
|
+
t.preventDefault(), t.stopPropagation(), !L() && l.showContextMenu({
|
|
89
90
|
x: t.clientX,
|
|
90
91
|
y: t.clientY,
|
|
91
92
|
items: [e.item]
|
|
92
93
|
});
|
|
93
94
|
}, X = () => {
|
|
94
|
-
u() &&
|
|
95
|
+
u() && l.toggleFolder(e.item.path);
|
|
95
96
|
};
|
|
96
97
|
return (() => {
|
|
97
|
-
var t =
|
|
98
|
-
return a.addEventListener("pointerleave", V), a.addEventListener("pointerenter", U), s(a,
|
|
98
|
+
var t = se(), a = t.firstChild, g = a.firstChild, w = g.firstChild, P = w.nextSibling;
|
|
99
|
+
return a.addEventListener("pointerleave", V), a.addEventListener("pointerenter", U), s(a, o(v, {
|
|
99
100
|
get when() {
|
|
100
101
|
return u();
|
|
101
102
|
},
|
|
102
103
|
get fallback() {
|
|
103
|
-
return
|
|
104
|
+
return ce();
|
|
104
105
|
},
|
|
105
106
|
get children() {
|
|
106
|
-
var n =
|
|
107
|
-
return n.$$click = X, s(n,
|
|
107
|
+
var n = oe();
|
|
108
|
+
return n.$$click = X, s(n, o(re, {
|
|
108
109
|
class: "w-3 h-3 opacity-50"
|
|
109
|
-
})),
|
|
110
|
-
var f =
|
|
111
|
-
return f !==
|
|
110
|
+
})), D((c) => {
|
|
111
|
+
var f = m("flex-shrink-0 w-3.5 h-3.5 flex items-center justify-center cursor-pointer", "transition-transform duration-150", i() && "rotate-90", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-sidebar-ring"), S = i() ? "Collapse folder" : "Expand folder";
|
|
112
|
+
return f !== c.e && b(n, c.e = f), S !== c.t && Y(n, "aria-label", c.t = S), c;
|
|
112
113
|
}, {
|
|
113
114
|
e: void 0,
|
|
114
115
|
t: void 0
|
|
115
116
|
}), n;
|
|
116
117
|
}
|
|
117
|
-
}),
|
|
118
|
+
}), g), q(g, z(ae, {
|
|
119
|
+
onClick: j,
|
|
120
|
+
onContextMenu: G,
|
|
121
|
+
onPointerDown: B,
|
|
122
|
+
onPointerMove: H,
|
|
123
|
+
onPointerUp: N,
|
|
124
|
+
onPointerCancel: R,
|
|
125
|
+
get class() {
|
|
126
|
+
return m("flex items-center gap-1 flex-1 min-w-0 text-left cursor-pointer pl-1", "focus:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-sidebar-ring");
|
|
127
|
+
}
|
|
128
|
+
}), !1, !0), s(w, o(v, {
|
|
118
129
|
get when() {
|
|
119
|
-
return
|
|
130
|
+
return _(() => !!u())() && i();
|
|
120
131
|
},
|
|
121
132
|
get fallback() {
|
|
122
|
-
return
|
|
133
|
+
return o(ne, {
|
|
123
134
|
class: "w-4 h-4"
|
|
124
135
|
});
|
|
125
136
|
},
|
|
126
137
|
get children() {
|
|
127
|
-
return
|
|
138
|
+
return o(te, {
|
|
128
139
|
class: "w-4 h-4"
|
|
129
140
|
});
|
|
130
141
|
}
|
|
131
|
-
})), s(
|
|
142
|
+
})), s(P, () => e.item.name), s(g, o(v, {
|
|
132
143
|
get when() {
|
|
133
144
|
return u();
|
|
134
145
|
},
|
|
135
146
|
get children() {
|
|
136
|
-
var n =
|
|
137
|
-
return s(n,
|
|
147
|
+
var n = le();
|
|
148
|
+
return s(n, p), n;
|
|
138
149
|
}
|
|
139
|
-
}), null), s(t,
|
|
150
|
+
}), null), s(t, o(v, {
|
|
140
151
|
get when() {
|
|
141
|
-
return
|
|
152
|
+
return _(() => !!i())() && u();
|
|
142
153
|
},
|
|
143
154
|
get children() {
|
|
144
|
-
var n =
|
|
145
|
-
return s(n,
|
|
155
|
+
var n = M();
|
|
156
|
+
return s(n, o(F, {
|
|
146
157
|
get items() {
|
|
147
158
|
return e.item.children ?? [];
|
|
148
159
|
},
|
|
@@ -158,27 +169,26 @@ function le(e) {
|
|
|
158
169
|
get dragContext() {
|
|
159
170
|
return e.dragContext;
|
|
160
171
|
}
|
|
161
|
-
})),
|
|
172
|
+
})), D(() => b(n, m("overflow-hidden transition-all duration-200", i() ? "opacity-100" : "opacity-0"))), n;
|
|
162
173
|
}
|
|
163
|
-
}), null),
|
|
164
|
-
var
|
|
174
|
+
}), null), D((n) => {
|
|
175
|
+
var c = m(
|
|
165
176
|
"group flex items-center w-full py-1 text-xs",
|
|
166
177
|
"transition-all duration-150 ease-out",
|
|
167
178
|
"hover:bg-sidebar-accent/60",
|
|
168
|
-
|
|
179
|
+
C() && "bg-sidebar-accent text-sidebar-accent-foreground font-medium",
|
|
169
180
|
// Drop target styling - enhanced visual feedback
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
), f = `${8 + e.depth * 12}px
|
|
173
|
-
return
|
|
181
|
+
k() && $() && ["bg-primary/15 outline outline-2 outline-primary/60", "shadow-sm shadow-primary/10"],
|
|
182
|
+
k() && !$() && ["bg-destructive/10 outline outline-2 outline-dashed outline-destructive/50"]
|
|
183
|
+
), f = `${8 + e.depth * 12}px`;
|
|
184
|
+
return c !== n.e && b(a, n.e = c), f !== n.t && J(a, "padding-left", n.t = f), n;
|
|
174
185
|
}, {
|
|
175
186
|
e: void 0,
|
|
176
|
-
t: void 0
|
|
177
|
-
a: void 0
|
|
187
|
+
t: void 0
|
|
178
188
|
}), t;
|
|
179
189
|
})();
|
|
180
190
|
}
|
|
181
|
-
|
|
191
|
+
K(["contextmenu", "click"]);
|
|
182
192
|
export {
|
|
183
|
-
|
|
193
|
+
Ce as DirectoryTree
|
|
184
194
|
};
|
|
@@ -28,6 +28,8 @@ export interface FileContextMenuProps {
|
|
|
28
28
|
*/
|
|
29
29
|
hideItems?: HideItemsValue;
|
|
30
30
|
}
|
|
31
|
+
export declare function createDefaultContextMenuItems(callbacks?: ContextMenuCallbacks): ContextMenuItem[];
|
|
32
|
+
export declare function dispatchContextMenuAction(item: ContextMenuItem, items: FileItem[], callbacks?: ContextMenuCallbacks): void;
|
|
31
33
|
/**
|
|
32
34
|
* Context menu for file browser items
|
|
33
35
|
*/
|