@floegence/floe-webapp-core 0.35.19 → 0.35.21
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/DragPreview.js +42 -44
- package/dist/components/file-browser/FileGridView.js +99 -97
- package/dist/components/file-browser/FileIcons.d.ts +15 -4
- package/dist/components/file-browser/FileIcons.js +386 -50
- package/dist/components/file-browser/FileListView.js +151 -151
- package/dist/components/file-browser/index.d.ts +2 -2
- package/dist/components/file-browser/types.d.ts +5 -2
- package/dist/components/ui/FileSavePicker.js +56 -58
- package/dist/file-browser.js +25 -21
- package/dist/full.js +396 -392
- package/package.json +1 -1
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
import { createComponent as o, Portal as
|
|
2
|
-
import { createSignal as F, createEffect as
|
|
3
|
-
import { Presence as
|
|
1
|
+
import { createComponent as o, Portal as N, insert as a, effect as u, className as $, memo as V, template as l, setAttribute as A } from "solid-js/web";
|
|
2
|
+
import { createSignal as F, createEffect as j, createMemo as d, Show as m, For as B } from "solid-js";
|
|
3
|
+
import { Presence as U, Motion as X } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
|
|
4
4
|
import { cn as f } from "../../utils/cn.js";
|
|
5
|
-
import { useFileBrowserDrag as
|
|
6
|
-
import {
|
|
7
|
-
var
|
|
8
|
-
const x = 3, P = 4, T = 4,
|
|
9
|
-
function
|
|
10
|
-
const g =
|
|
5
|
+
import { useFileBrowserDrag as G } from "../../context/FileBrowserDragContext.js";
|
|
6
|
+
import { FileItemIcon as W } from "./FileIcons.js";
|
|
7
|
+
var Y = /* @__PURE__ */ l('<div class="text-[10px] text-muted-foreground pl-6">and <!> more...'), q = /* @__PURE__ */ l("<span>Drop to move"), y = /* @__PURE__ */ l("<div>"), H = /* @__PURE__ */ l('<div class="flex items-center gap-2.5 text-xs text-foreground"><span class="flex-shrink-0 w-4 h-4"></span><span class="truncate font-medium">'), J = /* @__PURE__ */ l("<span>Cannot drop here"), K = /* @__PURE__ */ l('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><polyline points="20 6 9 17 4 12">'), L = /* @__PURE__ */ l('<svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><line x1=18 y1=6 x2=6 y2=18></line><line x1=6 y1=6 x2=18 y2=18>');
|
|
8
|
+
const x = 3, P = 4, T = 4, Q = 0.2;
|
|
9
|
+
function at() {
|
|
10
|
+
const g = G(), n = () => g?.dragState(), S = () => n()?.isDragging ?? !1, C = () => n()?.isDragEnding ?? !1, [c, h] = F(null), [s, w] = F(!1);
|
|
11
11
|
let _ = !1;
|
|
12
|
-
|
|
12
|
+
j(() => {
|
|
13
13
|
const t = S(), e = C();
|
|
14
14
|
if (t && !e && !_ && (h(null), w(!1)), e && !_) {
|
|
15
15
|
const r = n();
|
|
16
16
|
if (r && r.draggedItems.length > 0) {
|
|
17
17
|
const i = r.pointerPosition;
|
|
18
18
|
h({
|
|
19
|
-
items: r.draggedItems.map((
|
|
19
|
+
items: r.draggedItems.map((D) => D.item),
|
|
20
20
|
position: {
|
|
21
21
|
x: i.x + P,
|
|
22
22
|
y: i.y + T
|
|
@@ -52,17 +52,17 @@ function dt() {
|
|
|
52
52
|
}), z = d(() => {
|
|
53
53
|
const t = c();
|
|
54
54
|
return t?.committed && t?.target ? t.target : b();
|
|
55
|
-
}), M = d(() => c()?.committed ?? !1), p = () => n()?.isValidDrop ?? !1, O = () => !!n()?.dropTarget, I = () => O() && !c()
|
|
56
|
-
return o(
|
|
55
|
+
}), M = d(() => c()?.committed ?? !1), p = () => n()?.isValidDrop ?? !1, O = () => !!n()?.dropTarget, I = () => O() && !c();
|
|
56
|
+
return o(U, {
|
|
57
57
|
get children() {
|
|
58
58
|
return o(m, {
|
|
59
59
|
get when() {
|
|
60
|
-
return
|
|
60
|
+
return V(() => !!R())() && E().length > 0;
|
|
61
61
|
},
|
|
62
62
|
get children() {
|
|
63
|
-
return o(
|
|
63
|
+
return o(N, {
|
|
64
64
|
get children() {
|
|
65
|
-
return o(
|
|
65
|
+
return o(X.div, {
|
|
66
66
|
get class() {
|
|
67
67
|
return f("fixed top-0 left-0 pointer-events-none z-[9999]", "will-change-transform");
|
|
68
68
|
},
|
|
@@ -81,7 +81,7 @@ function dt() {
|
|
|
81
81
|
},
|
|
82
82
|
get transition() {
|
|
83
83
|
return {
|
|
84
|
-
duration: s() ?
|
|
84
|
+
duration: s() ? Q : 0,
|
|
85
85
|
easing: "ease-out"
|
|
86
86
|
};
|
|
87
87
|
},
|
|
@@ -90,51 +90,49 @@ function dt() {
|
|
|
90
90
|
},
|
|
91
91
|
get children() {
|
|
92
92
|
return [(() => {
|
|
93
|
-
var t =
|
|
94
|
-
return
|
|
93
|
+
var t = y();
|
|
94
|
+
return a(t, o(B, {
|
|
95
95
|
get each() {
|
|
96
96
|
return E();
|
|
97
97
|
},
|
|
98
98
|
children: (e) => (() => {
|
|
99
|
-
var r =
|
|
100
|
-
return
|
|
101
|
-
|
|
102
|
-
return N(e);
|
|
103
|
-
},
|
|
99
|
+
var r = H(), i = r.firstChild, D = i.nextSibling;
|
|
100
|
+
return a(i, o(W, {
|
|
101
|
+
item: e,
|
|
104
102
|
class: "w-4 h-4"
|
|
105
|
-
})),
|
|
103
|
+
})), a(D, () => e.name), r;
|
|
106
104
|
})()
|
|
107
|
-
}), null),
|
|
105
|
+
}), null), a(t, o(m, {
|
|
108
106
|
get when() {
|
|
109
107
|
return k() > 0;
|
|
110
108
|
},
|
|
111
109
|
get children() {
|
|
112
|
-
var e =
|
|
113
|
-
return i.nextSibling,
|
|
110
|
+
var e = Y(), r = e.firstChild, i = r.nextSibling;
|
|
111
|
+
return i.nextSibling, a(e, k, i), e;
|
|
114
112
|
}
|
|
115
|
-
}), null),
|
|
113
|
+
}), null), a(t, o(m, {
|
|
116
114
|
get when() {
|
|
117
115
|
return I();
|
|
118
116
|
},
|
|
119
117
|
get children() {
|
|
120
|
-
var e =
|
|
121
|
-
return
|
|
118
|
+
var e = y();
|
|
119
|
+
return a(e, o(m, {
|
|
122
120
|
get when() {
|
|
123
121
|
return p();
|
|
124
122
|
},
|
|
125
123
|
get fallback() {
|
|
126
|
-
return [o(
|
|
124
|
+
return [o(tt, {
|
|
127
125
|
class: "w-3.5 h-3.5"
|
|
128
|
-
}),
|
|
126
|
+
}), J()];
|
|
129
127
|
},
|
|
130
128
|
get children() {
|
|
131
|
-
return [o(
|
|
129
|
+
return [o(Z, {
|
|
132
130
|
class: "w-3.5 h-3.5"
|
|
133
|
-
}),
|
|
131
|
+
}), q()];
|
|
134
132
|
}
|
|
135
|
-
})), u(() =>
|
|
133
|
+
})), u(() => $(e, f("flex items-center gap-1.5 pt-1.5 mt-1 border-t border-border text-[11px] font-medium", "transition-colors duration-150", p() ? "text-success" : "text-error"))), e;
|
|
136
134
|
}
|
|
137
|
-
}), null), u(() =>
|
|
135
|
+
}), null), u(() => $(t, f(
|
|
138
136
|
"flex flex-col gap-1 p-2.5 rounded-lg",
|
|
139
137
|
"bg-card border border-border",
|
|
140
138
|
"shadow-md",
|
|
@@ -153,8 +151,8 @@ function dt() {
|
|
|
153
151
|
return v() > 1;
|
|
154
152
|
},
|
|
155
153
|
get children() {
|
|
156
|
-
var t =
|
|
157
|
-
return
|
|
154
|
+
var t = y();
|
|
155
|
+
return a(t, v), u(() => $(t, f(
|
|
158
156
|
"absolute -top-2 -right-2",
|
|
159
157
|
"min-w-[20px] h-5 px-1.5 rounded-full",
|
|
160
158
|
"bg-foreground text-background",
|
|
@@ -175,18 +173,18 @@ function dt() {
|
|
|
175
173
|
}
|
|
176
174
|
});
|
|
177
175
|
}
|
|
178
|
-
function
|
|
176
|
+
function Z(g) {
|
|
179
177
|
return (() => {
|
|
180
|
-
var n =
|
|
178
|
+
var n = K();
|
|
181
179
|
return u(() => A(n, "class", g.class)), n;
|
|
182
180
|
})();
|
|
183
181
|
}
|
|
184
|
-
function
|
|
182
|
+
function tt(g) {
|
|
185
183
|
return (() => {
|
|
186
|
-
var n =
|
|
184
|
+
var n = L();
|
|
187
185
|
return u(() => A(n, "class", g.class)), n;
|
|
188
186
|
})();
|
|
189
187
|
}
|
|
190
188
|
export {
|
|
191
|
-
|
|
189
|
+
at as DragPreview
|
|
192
190
|
};
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { addEventListener as
|
|
2
|
-
import { createSignal as
|
|
1
|
+
import { addEventListener as le, use as K, insert as w, createComponent as b, effect as Y, setStyleProperty as X, className as G, template as C, spread as ce, mergeProps as se, memo as de, delegateEvents as ge } from "solid-js/web";
|
|
2
|
+
import { createSignal as W, createMemo as j, createEffect as ue, Show as p, For as q, untrack as me, onCleanup as fe } from "solid-js";
|
|
3
3
|
import { cn as $ } from "../../utils/cn.js";
|
|
4
|
-
import { useResizeObserver as
|
|
5
|
-
import { useVirtualWindow as
|
|
6
|
-
import { useFileBrowser as
|
|
7
|
-
import { useFileBrowserDrag as
|
|
8
|
-
import {
|
|
9
|
-
import { createLongPressContextMenuHandlers as
|
|
10
|
-
import { fileBrowserTouchTargetAttrs as
|
|
11
|
-
var
|
|
12
|
-
function
|
|
4
|
+
import { useResizeObserver as he } from "../../hooks/useResizeObserver.js";
|
|
5
|
+
import { useVirtualWindow as ve } from "../../hooks/useVirtualWindow.js";
|
|
6
|
+
import { useFileBrowser as J } from "./FileBrowserContext.js";
|
|
7
|
+
import { useFileBrowserDrag as xe } from "../../context/FileBrowserDragContext.js";
|
|
8
|
+
import { FileItemIcon as be } from "./FileIcons.js";
|
|
9
|
+
import { createLongPressContextMenuHandlers as Ce } from "./longPressContextMenu.js";
|
|
10
|
+
import { fileBrowserTouchTargetAttrs as De } from "./touchInteractionGuard.js";
|
|
11
|
+
var Ie = /* @__PURE__ */ C('<mark class="bg-warning/40 text-inherit rounded-sm">'), we = /* @__PURE__ */ C('<div class="grid gap-2">'), ye = /* @__PURE__ */ C('<div><div class=p-3><div class="w-full h-0"aria-hidden=true>'), Pe = /* @__PURE__ */ C('<span>No files matching "<!>"'), Se = /* @__PURE__ */ C('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), Me = /* @__PURE__ */ C('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), _e = /* @__PURE__ */ C("<span>This folder is empty"), Te = /* @__PURE__ */ C('<div class="absolute top-1.5 right-1.5 w-4 h-4 rounded-full bg-primary flex items-center justify-center"><svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round class="w-2.5 h-2.5 text-primary-foreground"><polyline points="20 6 9 17 4 12">'), Ee = /* @__PURE__ */ C("<button type=button><div></div><span></span><div>");
|
|
12
|
+
function Le(e) {
|
|
13
13
|
const n = j(() => {
|
|
14
14
|
if (!e.match || e.match.matchedIndices.length === 0)
|
|
15
15
|
return [{
|
|
@@ -17,82 +17,82 @@ function Re(e) {
|
|
|
17
17
|
highlight: !1
|
|
18
18
|
}];
|
|
19
19
|
const o = [], D = new Set(e.match.matchedIndices);
|
|
20
|
-
let h = "",
|
|
20
|
+
let h = "", d = !1;
|
|
21
21
|
for (let l = 0; l < e.name.length; l++) {
|
|
22
22
|
const f = D.has(l);
|
|
23
|
-
l === 0 ? (
|
|
23
|
+
l === 0 ? (d = f, h = e.name[l]) : f === d ? h += e.name[l] : (o.push({
|
|
24
24
|
text: h,
|
|
25
|
-
highlight:
|
|
26
|
-
}), h = e.name[l],
|
|
25
|
+
highlight: d
|
|
26
|
+
}), h = e.name[l], d = f);
|
|
27
27
|
}
|
|
28
28
|
return h && o.push({
|
|
29
29
|
text: h,
|
|
30
|
-
highlight:
|
|
30
|
+
highlight: d
|
|
31
31
|
}), o;
|
|
32
32
|
});
|
|
33
|
-
return b(
|
|
33
|
+
return b(q, {
|
|
34
34
|
get each() {
|
|
35
35
|
return n();
|
|
36
36
|
},
|
|
37
|
-
children: (o) => b(
|
|
37
|
+
children: (o) => b(p, {
|
|
38
38
|
get when() {
|
|
39
39
|
return o.highlight;
|
|
40
40
|
},
|
|
41
41
|
get fallback() {
|
|
42
|
-
return
|
|
42
|
+
return de(() => o.text);
|
|
43
43
|
},
|
|
44
44
|
get children() {
|
|
45
|
-
var D =
|
|
45
|
+
var D = Ie();
|
|
46
46
|
return w(D, () => o.text), D;
|
|
47
47
|
}
|
|
48
48
|
})
|
|
49
49
|
});
|
|
50
50
|
}
|
|
51
|
-
function
|
|
52
|
-
const n =
|
|
53
|
-
const s =
|
|
51
|
+
function Ne(e) {
|
|
52
|
+
const n = J(), o = xe(), D = () => (e.enableDragDrop ?? !0) && !!o, h = () => e.instanceId ?? "default", d = 112, l = 8, f = 180, y = 2, E = 6, [g, A] = W(null), O = he(g), v = j(() => {
|
|
53
|
+
const s = O()?.width ?? 0;
|
|
54
54
|
if (s <= 0) return y;
|
|
55
55
|
const x = Math.floor((s + l) / (f + l));
|
|
56
56
|
return Math.max(y, Math.min(E, x));
|
|
57
|
-
}), k = () =>
|
|
57
|
+
}), k = () => d + l, c = ve({
|
|
58
58
|
count: () => Math.ceil(n.currentFiles().length / Math.max(1, v())),
|
|
59
59
|
itemSize: k,
|
|
60
60
|
overscan: 2
|
|
61
61
|
}), N = () => c.range().start * v(), L = () => Math.min(n.currentFiles().length, c.range().end * v()), F = j(() => n.currentFiles().slice(N(), L()));
|
|
62
|
-
let
|
|
63
|
-
return
|
|
62
|
+
let T = null, P = y;
|
|
63
|
+
return ue(() => {
|
|
64
64
|
const s = v();
|
|
65
|
-
if (!
|
|
65
|
+
if (!T) {
|
|
66
66
|
P = s;
|
|
67
67
|
return;
|
|
68
68
|
}
|
|
69
69
|
if (s === P) return;
|
|
70
|
-
const x = k(), a = Math.floor(
|
|
71
|
-
|
|
70
|
+
const x = k(), a = Math.floor(T.scrollTop / Math.max(1, x)) * Math.max(1, P), r = Math.floor(a / Math.max(1, s));
|
|
71
|
+
T.scrollTop = r * x, c.onScroll(), P = s;
|
|
72
72
|
}), (() => {
|
|
73
|
-
var s =
|
|
74
|
-
return
|
|
75
|
-
|
|
76
|
-
}, s),
|
|
73
|
+
var s = ye(), x = s.firstChild, S = x.firstChild;
|
|
74
|
+
return le(s, "scroll", c.onScroll), K((a) => {
|
|
75
|
+
T = a, c.scrollRef(a), n.setScrollContainer(a);
|
|
76
|
+
}, s), K((a) => A(a), S), w(x, b(p, {
|
|
77
77
|
get when() {
|
|
78
78
|
return n.currentFiles().length > 0;
|
|
79
79
|
},
|
|
80
80
|
get fallback() {
|
|
81
81
|
return (() => {
|
|
82
|
-
var a =
|
|
83
|
-
return w(a, b(
|
|
82
|
+
var a = Me();
|
|
83
|
+
return w(a, b(p, {
|
|
84
84
|
get when() {
|
|
85
85
|
return n.filterQueryApplied().trim();
|
|
86
86
|
},
|
|
87
87
|
get fallback() {
|
|
88
|
-
return
|
|
88
|
+
return _e();
|
|
89
89
|
},
|
|
90
90
|
get children() {
|
|
91
91
|
return [(() => {
|
|
92
|
-
var r =
|
|
92
|
+
var r = Pe(), M = r.firstChild, I = M.nextSibling;
|
|
93
93
|
return I.nextSibling, w(r, () => n.filterQueryApplied(), I), r;
|
|
94
94
|
})(), (() => {
|
|
95
|
-
var r =
|
|
95
|
+
var r = Se();
|
|
96
96
|
return r.$$click = () => n.setFilterQuery(""), r;
|
|
97
97
|
})()];
|
|
98
98
|
}
|
|
@@ -100,12 +100,12 @@ function ze(e) {
|
|
|
100
100
|
})();
|
|
101
101
|
},
|
|
102
102
|
get children() {
|
|
103
|
-
var a =
|
|
104
|
-
return w(a, b(
|
|
103
|
+
var a = we();
|
|
104
|
+
return w(a, b(q, {
|
|
105
105
|
get each() {
|
|
106
106
|
return F();
|
|
107
107
|
},
|
|
108
|
-
children: (r) => b(
|
|
108
|
+
children: (r) => b($e, {
|
|
109
109
|
item: r,
|
|
110
110
|
get instanceId() {
|
|
111
111
|
return h();
|
|
@@ -127,16 +127,16 @@ function ze(e) {
|
|
|
127
127
|
}), null), Y(() => G(s, $("h-full min-h-0 overflow-auto", e.class))), s;
|
|
128
128
|
})();
|
|
129
129
|
}
|
|
130
|
-
function
|
|
131
|
-
const n =
|
|
132
|
-
let l, f = null, y = 0, E = 0,
|
|
133
|
-
const
|
|
130
|
+
function $e(e) {
|
|
131
|
+
const n = J(), o = () => n.isSelected(e.item.id), D = () => n.getFilterMatchForId(e.item.id), h = me(() => e.item), d = Ce(n, h);
|
|
132
|
+
let l, f = null, y = 0, E = 0, g = !1;
|
|
133
|
+
const A = 5, O = 500;
|
|
134
134
|
let v = null;
|
|
135
|
-
const [k, B] =
|
|
135
|
+
const [k, B] = W(!1), c = () => l === "touch" || l === "pen", N = () => e.item.type === "folder", L = () => N() && e.enableDragDrop && e.dragContext, F = () => {
|
|
136
136
|
if (!L() || !e.dragContext) return !1;
|
|
137
137
|
const t = e.dragContext.dragState();
|
|
138
138
|
return t.isDragging ? e.dragContext.canDropOn(t.draggedItems, e.item.path, e.item, e.instanceId) : !1;
|
|
139
|
-
},
|
|
139
|
+
}, T = () => {
|
|
140
140
|
if (!e.dragContext) return !1;
|
|
141
141
|
const t = e.dragContext.dragState();
|
|
142
142
|
return t.isDragging ? t.draggedItems.some((i) => i.item.id === e.item.id) : !1;
|
|
@@ -147,15 +147,15 @@ function Xe(e) {
|
|
|
147
147
|
}, x = () => {
|
|
148
148
|
typeof document > "u" || (document.addEventListener("pointermove", r, !0), document.addEventListener("pointerup", M, !0), document.addEventListener("pointercancel", I, !0));
|
|
149
149
|
}, S = (t) => {
|
|
150
|
-
P(), s(),
|
|
150
|
+
P(), s(), g && e.dragContext && e.dragContext.endDrag(t), f = null, g = !1;
|
|
151
151
|
};
|
|
152
|
-
|
|
152
|
+
fe(() => {
|
|
153
153
|
S(!1);
|
|
154
154
|
});
|
|
155
155
|
const a = (t, i) => {
|
|
156
|
-
if (!e.enableDragDrop || !e.dragContext ||
|
|
157
|
-
|
|
158
|
-
const
|
|
156
|
+
if (!e.enableDragDrop || !e.dragContext || g) return;
|
|
157
|
+
g = !0, o() || n.selectItem(e.item.id, !1);
|
|
158
|
+
const u = n.getSelectedItemsList(), m = (u.length > 0 && o() ? u : [e.item]).map((R) => ({
|
|
159
159
|
item: R,
|
|
160
160
|
sourceInstanceId: e.instanceId,
|
|
161
161
|
sourcePath: n.currentPath()
|
|
@@ -165,75 +165,78 @@ function Xe(e) {
|
|
|
165
165
|
navigator.vibrate(50);
|
|
166
166
|
} catch {
|
|
167
167
|
}
|
|
168
|
-
e.dragContext.startDrag(
|
|
168
|
+
e.dragContext.startDrag(m, t, i);
|
|
169
169
|
}, r = (t) => {
|
|
170
170
|
if (f !== t.pointerId) return;
|
|
171
|
-
const i = t.clientX - y,
|
|
172
|
-
if (c() && !
|
|
171
|
+
const i = t.clientX - y, u = t.clientY - E, _ = Math.sqrt(i * i + u * u);
|
|
172
|
+
if (c() && !g && _ > 10) {
|
|
173
173
|
S(!1);
|
|
174
174
|
return;
|
|
175
175
|
}
|
|
176
|
-
!c() && !
|
|
176
|
+
!c() && !g && _ > A && a(t.clientX, t.clientY), g && e.dragContext && e.dragContext.updateDrag(t.clientX, t.clientY);
|
|
177
177
|
}, M = (t) => {
|
|
178
|
-
f === t.pointerId && (
|
|
178
|
+
f === t.pointerId && (d.onPointerUp(), S(!0));
|
|
179
179
|
}, I = (t) => {
|
|
180
|
-
f === t.pointerId && (
|
|
180
|
+
f === t.pointerId && (d.onPointerCancel(), S(!1));
|
|
181
181
|
}, H = (t) => {
|
|
182
|
-
l = t.pointerType,
|
|
183
|
-
f !== null && !
|
|
184
|
-
},
|
|
182
|
+
l = t.pointerType, d.onPointerDown(t), !(t.pointerType === "mouse" && t.button !== 0) && (!e.enableDragDrop || !e.dragContext || (f = t.pointerId, y = t.clientX, E = t.clientY, g = !1, x(), c() && (P(), v = setTimeout(() => {
|
|
183
|
+
f !== null && !g && a(y, E);
|
|
184
|
+
}, O))));
|
|
185
|
+
}, Z = (t) => {
|
|
186
|
+
l = t.pointerType, d.onPointerMove(t);
|
|
185
187
|
}, ee = (t) => {
|
|
186
|
-
l = t.pointerType, u.onPointerMove(t);
|
|
187
|
-
}, te = (t) => {
|
|
188
188
|
if (!L() || !e.dragContext) return;
|
|
189
189
|
const i = e.dragContext.dragState();
|
|
190
190
|
if (!i.isDragging) return;
|
|
191
191
|
B(!0);
|
|
192
|
-
const
|
|
192
|
+
const u = e.dragContext.canDropOn(i.draggedItems, e.item.path, e.item, e.instanceId), m = t.currentTarget?.getBoundingClientRect() ?? null;
|
|
193
193
|
e.dragContext.setDropTarget({
|
|
194
194
|
instanceId: e.instanceId,
|
|
195
195
|
targetPath: e.item.path,
|
|
196
196
|
targetItem: e.item
|
|
197
|
-
},
|
|
198
|
-
},
|
|
197
|
+
}, u, m);
|
|
198
|
+
}, te = (t) => {
|
|
199
199
|
if (!e.dragContext) return;
|
|
200
200
|
B(!1);
|
|
201
201
|
const i = e.dragContext.dragState();
|
|
202
202
|
i.isDragging && i.dropTarget?.targetPath === e.item.path && e.dragContext.setDropTarget(null, !1);
|
|
203
|
-
},
|
|
204
|
-
if (
|
|
205
|
-
|
|
203
|
+
}, ne = (t) => {
|
|
204
|
+
if (g) {
|
|
205
|
+
g = !1;
|
|
206
206
|
return;
|
|
207
207
|
}
|
|
208
|
-
if (!
|
|
208
|
+
if (!d.consumeClickSuppression(t)) {
|
|
209
209
|
if (c()) {
|
|
210
210
|
n.openItem(e.item);
|
|
211
211
|
return;
|
|
212
212
|
}
|
|
213
213
|
n.selectItem(e.item.id, t.metaKey || t.ctrlKey);
|
|
214
214
|
}
|
|
215
|
-
},
|
|
215
|
+
}, re = () => {
|
|
216
216
|
c() || n.openItem(e.item);
|
|
217
|
-
},
|
|
217
|
+
}, ie = (t) => {
|
|
218
218
|
if (t.preventDefault(), t.stopPropagation(), c()) return;
|
|
219
219
|
o() || n.selectItem(e.item.id, !1);
|
|
220
|
-
const i = n.getSelectedItemsList(),
|
|
220
|
+
const i = n.getSelectedItemsList(), u = i.length > 0 ? i : [e.item];
|
|
221
221
|
n.showContextMenu({
|
|
222
222
|
x: t.clientX,
|
|
223
223
|
y: t.clientY,
|
|
224
|
-
items:
|
|
224
|
+
items: u
|
|
225
225
|
});
|
|
226
|
-
},
|
|
226
|
+
}, ae = () => e.dragContext?.dragState(), oe = () => ae()?.isDragging ?? !1, U = () => k() && oe() && L();
|
|
227
227
|
return (() => {
|
|
228
|
-
var t =
|
|
229
|
-
return
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
228
|
+
var t = Ee(), i = t.firstChild, u = i.nextSibling, _ = u.nextSibling;
|
|
229
|
+
return ce(t, se(De, {
|
|
230
|
+
get title() {
|
|
231
|
+
return e.item.name;
|
|
232
|
+
},
|
|
233
|
+
onClick: ne,
|
|
234
|
+
onDblClick: re,
|
|
235
|
+
onContextMenu: ie,
|
|
233
236
|
onPointerDown: H,
|
|
234
|
-
onPointerMove:
|
|
235
|
-
onPointerEnter:
|
|
236
|
-
onPointerLeave:
|
|
237
|
+
onPointerMove: Z,
|
|
238
|
+
onPointerEnter: ee,
|
|
239
|
+
onPointerLeave: te,
|
|
237
240
|
get class() {
|
|
238
241
|
return $(
|
|
239
242
|
"group relative flex flex-col items-center gap-2 p-3 rounded-lg cursor-pointer h-28",
|
|
@@ -243,44 +246,43 @@ function Xe(e) {
|
|
|
243
246
|
"active:scale-[0.98]",
|
|
244
247
|
o() && "bg-accent ring-2 ring-primary/50",
|
|
245
248
|
// Drag state styling - being dragged items become translucent and shrink
|
|
246
|
-
|
|
249
|
+
T() && "opacity-40 scale-90",
|
|
247
250
|
// Drop target styling - enhanced visual feedback for folders
|
|
248
251
|
U() && F() && ["bg-primary/15 ring-2 ring-primary/60", "scale-105 shadow-lg shadow-primary/15"],
|
|
249
252
|
U() && !F() && ["bg-destructive/10 ring-2 ring-dashed ring-destructive/50"]
|
|
250
253
|
);
|
|
251
254
|
}
|
|
252
|
-
}), !1, !0), w(t, b(
|
|
255
|
+
}), !1, !0), w(t, b(p, {
|
|
253
256
|
get when() {
|
|
254
257
|
return o();
|
|
255
258
|
},
|
|
256
259
|
get children() {
|
|
257
|
-
return
|
|
260
|
+
return Te();
|
|
258
261
|
}
|
|
259
|
-
}), i), w(i, b(
|
|
260
|
-
get
|
|
261
|
-
return
|
|
262
|
+
}), i), w(i, b(be, {
|
|
263
|
+
get item() {
|
|
264
|
+
return e.item;
|
|
262
265
|
},
|
|
263
266
|
class: "w-8 h-8"
|
|
264
|
-
})), w(
|
|
267
|
+
})), w(u, b(Le, {
|
|
265
268
|
get name() {
|
|
266
269
|
return e.item.name;
|
|
267
270
|
},
|
|
268
271
|
get match() {
|
|
269
272
|
return D();
|
|
270
273
|
}
|
|
271
|
-
})), Y((
|
|
272
|
-
var R = $("w-12 h-12 flex items-center justify-center rounded-lg", "transition-transform duration-200", "group-hover:scale-110", e.item.type === "folder" ? "bg-warning/10" : "bg-muted/50"), V = $("
|
|
273
|
-
return R !==
|
|
274
|
+
})), Y((m) => {
|
|
275
|
+
var R = $("w-12 h-12 flex items-center justify-center rounded-lg", "transition-transform duration-200", "group-hover:scale-110", e.item.type === "folder" ? "bg-warning/10" : "bg-muted/50"), V = $("block w-full min-w-0 truncate px-1 text-xs text-center", "transition-colors duration-150", o() && "font-medium"), z = $("absolute inset-0 rounded-lg opacity-0 transition-opacity duration-300", "group-hover:opacity-100", "pointer-events-none"), Q = e.item.type === "folder" ? "radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--warning) 8%, transparent), transparent 70%)" : "radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--primary) 5%, transparent), transparent 70%)";
|
|
276
|
+
return R !== m.e && G(i, m.e = R), V !== m.t && G(u, m.t = V), z !== m.a && G(_, m.a = z), Q !== m.o && X(_, "background", m.o = Q), m;
|
|
274
277
|
}, {
|
|
275
278
|
e: void 0,
|
|
276
279
|
t: void 0,
|
|
277
280
|
a: void 0,
|
|
278
|
-
o: void 0
|
|
279
|
-
i: void 0
|
|
281
|
+
o: void 0
|
|
280
282
|
}), t;
|
|
281
283
|
})();
|
|
282
284
|
}
|
|
283
|
-
|
|
285
|
+
ge(["click"]);
|
|
284
286
|
export {
|
|
285
|
-
|
|
287
|
+
Ne as FileGridView
|
|
286
288
|
};
|
|
@@ -1,15 +1,26 @@
|
|
|
1
|
-
import { type JSX } from 'solid-js';
|
|
2
|
-
|
|
1
|
+
import { type Component, type JSX } from 'solid-js';
|
|
2
|
+
import type { FileItem } from './types';
|
|
3
|
+
export interface FileIconProps {
|
|
3
4
|
class?: string;
|
|
4
5
|
}
|
|
6
|
+
type FileIconComponent = Component<FileIconProps>;
|
|
7
|
+
type ResolvableFileIcon = Pick<FileItem, 'name' | 'type' | 'extension' | 'icon'>;
|
|
8
|
+
export type FileItemIconRenderer = FileIconComponent | JSX.Element;
|
|
5
9
|
export declare const FolderIcon: (props: FileIconProps) => JSX.Element;
|
|
6
10
|
export declare const FolderOpenIcon: (props: FileIconProps) => JSX.Element;
|
|
7
11
|
export declare const FileIcon: (props: FileIconProps) => JSX.Element;
|
|
8
12
|
export declare const CodeFileIcon: (props: FileIconProps) => JSX.Element;
|
|
9
|
-
export declare const
|
|
13
|
+
export declare const JavaScriptFileIcon: FileIconComponent;
|
|
14
|
+
export declare const TypeScriptFileIcon: FileIconComponent;
|
|
15
|
+
export declare const ShellScriptFileIcon: FileIconComponent;
|
|
10
16
|
export declare const ImageFileIcon: (props: FileIconProps) => JSX.Element;
|
|
11
17
|
export declare const DocumentFileIcon: (props: FileIconProps) => JSX.Element;
|
|
12
18
|
export declare const ConfigFileIcon: (props: FileIconProps) => JSX.Element;
|
|
13
19
|
export declare const StyleFileIcon: (props: FileIconProps) => JSX.Element;
|
|
14
|
-
export declare function getFileIcon(extension?: string):
|
|
20
|
+
export declare function getFileIcon(extension?: string): FileIconComponent;
|
|
21
|
+
export declare function resolveFileItemIcon(item: ResolvableFileIcon): FileItemIconRenderer;
|
|
22
|
+
export declare function FileItemIcon(props: {
|
|
23
|
+
item: ResolvableFileIcon;
|
|
24
|
+
class?: string;
|
|
25
|
+
}): JSX.Element;
|
|
15
26
|
export {};
|