@floegence/floe-webapp-core 0.35.32 → 0.35.33

package/dist/components/file-browser/FileGridView.js

@@ -1,15 +1,16 @@
-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";
-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";
+import { addEventListener as le, use as K, insert as w, createComponent as C, effect as Y, setStyleProperty as X, className as G, template as b, spread as ce, mergeProps as se, memo as de, delegateEvents as ge } from "solid-js/web";
+import { createSignal as W, createMemo as j, createEffect as ue, Show as A, For as q, untrack as me, onCleanup as fe } from "solid-js";
 import { cn as $ } from "../../utils/cn.js";
 import { useResizeObserver as he } from "../../hooks/useResizeObserver.js";
 import { useVirtualWindow as ve } from "../../hooks/useVirtualWindow.js";
 import { useFileBrowser as J } from "./FileBrowserContext.js";
 import { useFileBrowserDrag as xe } from "../../context/FileBrowserDragContext.js";
-import { FileItemIcon as be } from "./FileIcons.js";
-import { createLongPressContextMenuHandlers as Ce } from "./longPressContextMenu.js";
+import { FileItemIcon as Ce } from "./FileIcons.js";
+import { createLongPressContextMenuHandlers as be } from "./longPressContextMenu.js";
 import { fileBrowserTouchTargetAttrs as De } from "./touchInteractionGuard.js";
-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>");
-function Le(e) {
+import { createItemContextMenuEvent as Ie } from "./contextMenuEvent.js";
+var we = /* @__PURE__ */ b('<mark class="bg-warning/40 text-inherit rounded-sm">'), ye = /* @__PURE__ */ b('<div class="grid gap-2">'), Pe = /* @__PURE__ */ b('<div><div class=p-3><div class="w-full h-0"aria-hidden=true>'), Me = /* @__PURE__ */ b('<span>No files matching "<!>"'), Se = /* @__PURE__ */ b('<button type=button class="px-2 py-1 rounded bg-muted hover:bg-muted/80 transition-colors">Clear Filter'), _e = /* @__PURE__ */ b('<div class="flex flex-col items-center justify-center h-32 gap-2 text-xs text-muted-foreground">'), Te = /* @__PURE__ */ b("<span>This folder is empty"), Ee = /* @__PURE__ */ b('<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">'), Le = /* @__PURE__ */ b("<button type=button><div></div><span></span><div>");
+function $e(e) {
   const n = j(() => {
     if (!e.match || e.match.matchedIndices.length === 0)
       return [{
@@ -30,11 +31,11 @@ function Le(e) {
       highlight: d
     }), o;
   });
-  return b(q, {
+  return C(q, {
     get each() {
       return n();
     },
-    children: (o) => b(p, {
+    children: (o) => C(A, {
       get when() {
         return o.highlight;
       },
@@ -42,15 +43,15 @@ function Le(e) {
         return de(() => o.text);
       },
       get children() {
-        var D = Ie();
+        var D = we();
         return w(D, () => o.text), D;
       }
     })
   });
 }
-function Ne(e) {
-  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(() => {
-    const s = O()?.width ?? 0;
+function je(e) {
+  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, O] = W(null), p = he(g), v = j(() => {
+    const s = p()?.width ?? 0;
     if (s <= 0) return y;
     const x = Math.floor((s + l) / (f + l));
     return Math.max(y, Math.min(E, x));
@@ -70,26 +71,26 @@ function Ne(e) {
     const x = k(), a = Math.floor(T.scrollTop / Math.max(1, x)) * Math.max(1, P), r = Math.floor(a / Math.max(1, s));
     T.scrollTop = r * x, c.onScroll(), P = s;
   }), (() => {
-    var s = ye(), x = s.firstChild, S = x.firstChild;
+    var s = Pe(), x = s.firstChild, M = x.firstChild;
     return le(s, "scroll", c.onScroll), K((a) => {
       T = a, c.scrollRef(a), n.setScrollContainer(a);
-    }, s), K((a) => A(a), S), w(x, b(p, {
+    }, s), K((a) => O(a), M), w(x, C(A, {
       get when() {
         return n.currentFiles().length > 0;
       },
       get fallback() {
         return (() => {
-          var a = Me();
-          return w(a, b(p, {
+          var a = _e();
+          return w(a, C(A, {
             get when() {
               return n.filterQueryApplied().trim();
             },
             get fallback() {
-              return _e();
+              return Te();
             },
             get children() {
               return [(() => {
-                var r = Pe(), M = r.firstChild, I = M.nextSibling;
+                var r = Me(), S = r.firstChild, I = S.nextSibling;
                 return I.nextSibling, w(r, () => n.filterQueryApplied(), I), r;
               })(), (() => {
                 var r = Se();
@@ -100,12 +101,12 @@ function Ne(e) {
         })();
       },
       get children() {
-        var a = we();
-        return w(a, b(q, {
+        var a = ye();
+        return w(a, C(q, {
           get each() {
             return F();
           },
-          children: (r) => b($e, {
+          children: (r) => C(ke, {
             item: r,
             get instanceId() {
               return h();
@@ -116,8 +117,8 @@ function Ne(e) {
             dragContext: o
           })
         })), Y((r) => {
-          var M = `repeat(${v()}, minmax(0, 1fr))`, I = `${c.paddingTop()}px`, H = `${c.paddingBottom()}px`;
-          return M !== r.e && X(a, "grid-template-columns", r.e = M), I !== r.t && X(a, "padding-top", r.t = I), H !== r.a && X(a, "padding-bottom", r.a = H), r;
+          var S = `repeat(${v()}, minmax(0, 1fr))`, I = `${c.paddingTop()}px`, H = `${c.paddingBottom()}px`;
+          return S !== r.e && X(a, "grid-template-columns", r.e = S), I !== r.t && X(a, "padding-top", r.t = I), H !== r.a && X(a, "padding-bottom", r.a = H), r;
         }, {
           e: void 0,
           t: void 0,
@@ -127,10 +128,12 @@ function Ne(e) {
     }), null), Y(() => G(s, $("h-full min-h-0 overflow-auto", e.class))), s;
   })();
 }
-function $e(e) {
-  const n = J(), o = () => n.isSelected(e.item.id), D = () => n.getFilterMatchForId(e.item.id), h = me(() => e.item), d = Ce(n, h);
+function ke(e) {
+  const n = J(), o = () => n.isSelected(e.item.id), D = () => n.getFilterMatchForId(e.item.id), h = me(() => e.item), d = be(n, h, {
+    source: "grid"
+  });
   let l, f = null, y = 0, E = 0, g = !1;
-  const A = 5, O = 500;
+  const O = 5, p = 500;
   let v = null;
   const [k, B] = W(!1), c = () => l === "touch" || l === "pen", N = () => e.item.type === "folder", L = () => N() && e.enableDragDrop && e.dragContext, F = () => {
     if (!L() || !e.dragContext) return !1;
@@ -143,14 +146,14 @@ function $e(e) {
   }, P = () => {
     v !== null && (clearTimeout(v), v = null);
   }, s = () => {
-    typeof document > "u" || (document.removeEventListener("pointermove", r, !0), document.removeEventListener("pointerup", M, !0), document.removeEventListener("pointercancel", I, !0));
+    typeof document > "u" || (document.removeEventListener("pointermove", r, !0), document.removeEventListener("pointerup", S, !0), document.removeEventListener("pointercancel", I, !0));
   }, x = () => {
-    typeof document > "u" || (document.addEventListener("pointermove", r, !0), document.addEventListener("pointerup", M, !0), document.addEventListener("pointercancel", I, !0));
-  }, S = (t) => {
+    typeof document > "u" || (document.addEventListener("pointermove", r, !0), document.addEventListener("pointerup", S, !0), document.addEventListener("pointercancel", I, !0));
+  }, M = (t) => {
     P(), s(), g && e.dragContext && e.dragContext.endDrag(t), f = null, g = !1;
   };
   fe(() => {
-    S(!1);
+    M(!1);
   });
   const a = (t, i) => {
     if (!e.enableDragDrop || !e.dragContext || g) return;
@@ -170,18 +173,18 @@ function $e(e) {
     if (f !== t.pointerId) return;
     const i = t.clientX - y, u = t.clientY - E, _ = Math.sqrt(i * i + u * u);
     if (c() && !g && _ > 10) {
-      S(!1);
+      M(!1);
       return;
     }
-    !c() && !g && _ > A && a(t.clientX, t.clientY), g && e.dragContext && e.dragContext.updateDrag(t.clientX, t.clientY);
-  }, M = (t) => {
-    f === t.pointerId && (d.onPointerUp(), S(!0));
+    !c() && !g && _ > O && a(t.clientX, t.clientY), g && e.dragContext && e.dragContext.updateDrag(t.clientX, t.clientY);
+  }, S = (t) => {
+    f === t.pointerId && (d.onPointerUp(), M(!0));
   }, I = (t) => {
-    f === t.pointerId && (d.onPointerCancel(), S(!1));
+    f === t.pointerId && (d.onPointerCancel(), M(!1));
   }, H = (t) => {
     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(() => {
       f !== null && !g && a(y, E);
-    }, O))));
+    }, p))));
   }, Z = (t) => {
     l = t.pointerType, d.onPointerMove(t);
   }, ee = (t) => {
@@ -218,14 +221,16 @@ function $e(e) {
     if (t.preventDefault(), t.stopPropagation(), c()) return;
     o() || n.selectItem(e.item.id, !1);
     const i = n.getSelectedItemsList(), u = i.length > 0 ? i : [e.item];
-    n.showContextMenu({
+    n.showContextMenu(Ie({
       x: t.clientX,
       y: t.clientY,
-      items: u
-    });
+      triggerItem: e.item,
+      items: u,
+      source: "grid"
+    }));
   }, ae = () => e.dragContext?.dragState(), oe = () => ae()?.isDragging ?? !1, U = () => k() && oe() && L();
   return (() => {
-    var t = Ee(), i = t.firstChild, u = i.nextSibling, _ = u.nextSibling;
+    var t = Le(), i = t.firstChild, u = i.nextSibling, _ = u.nextSibling;
     return ce(t, se(De, {
       get title() {
         return e.item.name;
@@ -252,19 +257,19 @@ function $e(e) {
           U() && !F() && ["bg-destructive/10 ring-2 ring-dashed ring-destructive/50"]
         );
       }
-    }), !1, !0), w(t, b(p, {
+    }), !1, !0), w(t, C(A, {
       get when() {
         return o();
       },
       get children() {
-        return Te();
+        return Ee();
       }
-    }), i), w(i, b(be, {
+    }), i), w(i, C(Ce, {
       get item() {
         return e.item;
       },
       class: "w-8 h-8"
-    })), w(u, b(Le, {
+    })), w(u, C($e, {
       get name() {
         return e.item.name;
       },
@@ -284,5 +289,5 @@ function $e(e) {
 }
 ge(["click"]);
 export {
-  Ne as FileGridView
+  je as FileGridView
 };