@floegence/floe-webapp-core 0.2.3 → 0.3.0

package/dist/components/file-browser/Breadcrumb.d.ts

@@ -3,5 +3,6 @@ export interface BreadcrumbProps {
 }
 /**
  * Breadcrumb navigation showing current path
+ * 基于容器宽度自适应折叠：尽量显示更多路径段，宽度不足时折叠中间部分
  */
 export declare function Breadcrumb(props: BreadcrumbProps): import("solid-js").JSX.Element;

package/dist/index44.js

@@ -1,69 +1,154 @@
-import { delegateEvents as g, template as l, insert as m, createComponent as s, effect as f, className as d } from "solid-js/web";
-import { createMemo as p, For as v, Show as x } from "solid-js";
-import { cn as h } from "./index67.js";
-import { useFileBrowser as b } from "./index39.js";
-import { ChevronRight as k } from "./index32.js";
-var C = /* @__PURE__ */ l("<nav aria-label=Breadcrumb>"), w = /* @__PURE__ */ l('<button type=button><span class="truncate max-w-[120px] block">');
-function y(o) {
-  const e = b(), i = p(() => {
-    const t = e.currentPath();
-    if (t === "/" || t === "")
+import { delegateEvents as H, template as v, insert as E, createComponent as a, memo as P, effect as b, className as x, use as y } from "solid-js/web";
+import { createSignal as B, onMount as L, createMemo as k, For as O, Show as M, onCleanup as F } from "solid-js";
+import { cn as W } from "./index67.js";
+import { useFileBrowser as G } from "./index39.js";
+import { ChevronRight as T } from "./index32.js";
+import { Dropdown as z } from "./index24.js";
+var X = /* @__PURE__ */ v("<nav aria-label=Breadcrumb>"), j = /* @__PURE__ */ v('<button type=button title="Show hidden path segments">…'), q = /* @__PURE__ */ v('<button type=button><span class="truncate max-w-[120px] block">');
+const g = 16, J = 28, R = 12, K = 7, Q = 120, U = 100;
+function V(n) {
+  const r = n.length * K;
+  return Math.min(r + R, Q + R);
+}
+function ce(n) {
+  const r = G();
+  let s;
+  const [t, c] = B(0);
+  L(() => {
+    if (!s) return;
+    const e = () => {
+      s && c(s.offsetWidth);
+    };
+    e();
+    const o = new ResizeObserver(e);
+    o.observe(s), F(() => o.disconnect());
+  });
+  const d = k(() => {
+    const e = r.currentPath();
+    if (e === "/" || e === "")
       return [{
         name: "Root",
         path: "/"
       }];
-    const n = t.split("/").filter(Boolean), a = [{
+    const o = e.split("/").filter(Boolean), i = [{
       name: "Root",
       path: "/"
     }];
-    let u = "";
-    for (const c of n)
-      u += "/" + c, a.push({
-        name: c,
-        path: u
+    let l = "";
+    for (const f of o)
+      l += "/" + f, i.push({
+        name: f,
+        path: l
       });
-    return a;
-  }), r = (t) => {
-    e.setCurrentPath(t.path);
+    return i;
+  }), m = k(() => {
+    const e = d(), o = t();
+    if (o < U || e.length <= 2)
+      return {
+        collapsed: [],
+        visible: e,
+        shouldCollapse: !1
+      };
+    const i = e.map((u) => V(u.name)), l = i[0], f = i[e.length - 1], D = g, $ = e.length > 1 ? g : 0, S = l + f + D + $;
+    if (S > o && e.length > 2)
+      return {
+        collapsed: e.slice(1, -1),
+        visible: [e[0], e[e.length - 1]],
+        shouldCollapse: !0
+      };
+    const h = e.slice(1, -1), p = [];
+    let _ = o - S;
+    const N = h.length > 0 ? J + g : 0;
+    for (let u = h.length - 1; u >= 0; u--) {
+      const I = i[u + 1] + g, A = u > 0 ? N : 0;
+      if (_ - A >= I)
+        p.unshift(h[u]), _ -= I;
+      else
+        break;
+    }
+    const w = h.slice(0, h.length - p.length);
+    return {
+      collapsed: w,
+      visible: [e[0], ...p, e[e.length - 1]],
+      shouldCollapse: w.length > 0
+    };
+  }), C = (e) => {
+    r.setCurrentPath(e.path);
   };
   return (() => {
-    var t = C();
-    return m(t, s(v, {
+    var e = X(), o = s;
+    return typeof o == "function" ? y(o, e) : s = e, E(e, a(O, {
       get each() {
-        return i();
+        return m().visible;
       },
-      children: (n, a) => [s(x, {
+      children: (i, l) => [a(M, {
         get when() {
-          return a() > 0;
+          return l() > 0;
         },
         get children() {
-          return s(k, {
+          return a(T, {
             class: "w-3 h-3 text-muted-foreground/50 flex-shrink-0"
           });
         }
-      }), s(B, {
-        segment: n,
+      }), a(M, {
+        get when() {
+          return P(() => !!m().shouldCollapse)() && l() === 1;
+        },
+        get children() {
+          return [a(Y, {
+            get segments() {
+              return m().collapsed;
+            },
+            onSelect: C
+          }), a(T, {
+            class: "w-3 h-3 text-muted-foreground/50 flex-shrink-0"
+          })];
+        }
+      }), a(Z, {
+        segment: i,
         get isLast() {
-          return a() === i().length - 1;
+          return l() === m().visible.length - 1;
         },
-        onClick: () => r(n)
+        onClick: () => C(i)
       })]
-    })), f(() => d(t, h("flex items-center gap-1 min-w-0", o.class))), t;
+    })), b(() => x(e, W("flex items-center gap-1 min-w-0 overflow-hidden", n.class))), e;
   })();
 }
-function B(o) {
+function Y(n) {
+  const r = () => n.segments.map((t) => ({
+    id: t.path,
+    label: t.name
+  }));
+  return a(z, {
+    get trigger() {
+      return (() => {
+        var t = j();
+        return b(() => x(t, W("text-xs px-1.5 py-0.5 rounded cursor-pointer flex-shrink-0", "transition-all duration-100", "text-muted-foreground hover:text-foreground hover:bg-muted/50", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring"))), t;
+      })();
+    },
+    get items() {
+      return r();
+    },
+    onSelect: (t) => {
+      const c = n.segments.find((d) => d.path === t);
+      c && n.onSelect(c);
+    },
+    align: "start"
+  });
+}
+function Z(n) {
   return (() => {
-    var e = w(), i = e.firstChild;
-    return e.$$click = () => o.onClick(), m(i, () => o.segment.name), f((r) => {
-      var t = o.isLast, n = h("text-xs px-1.5 py-0.5 rounded cursor-pointer", "transition-all duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", o.isLast ? "font-medium text-foreground cursor-default" : "text-muted-foreground hover:text-foreground hover:bg-muted/50");
-      return t !== r.e && (e.disabled = r.e = t), n !== r.t && d(e, r.t = n), r;
+    var r = q(), s = r.firstChild;
+    return r.$$click = () => n.onClick(), E(s, () => n.segment.name), b((t) => {
+      var c = n.isLast, d = W("text-xs px-1.5 py-0.5 rounded cursor-pointer flex-shrink-0", "transition-all duration-100", "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring", n.isLast ? "font-medium text-foreground cursor-default" : "text-muted-foreground hover:text-foreground hover:bg-muted/50");
+      return c !== t.e && (r.disabled = t.e = c), d !== t.t && x(r, t.t = d), t;
     }, {
       e: void 0,
       t: void 0
-    }), e;
+    }), r;
   })();
 }
-g(["click"]);
+H(["click"]);
 export {
-  y as Breadcrumb
+  ce as Breadcrumb
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",