@k2b/ui 0.46.0 → 0.48.0

package/dist/browser/layout/DetailSections.js

@@ -37,17 +37,19 @@ var _tmpl$ = /*#__PURE__*/_$template(`<span class=k2b-detail-presence__face><!$>
   _tmpl$21 = /*#__PURE__*/_$template(`<span class=k2b-detail-row-skeleton>`),
   _tmpl$22 = /*#__PURE__*/_$template(`<i class="ti ti-settings"aria-hidden=true>`),
   _tmpl$23 = /*#__PURE__*/_$template(`<div class=k2b-detail-section-group><div class=k2b-detail-section-label></div><!$><!/><!$><!/>`),
-  _tmpl$24 = /*#__PURE__*/_$template(`<div class=k2b-detail-section-rows><!$><!/><!$><!/>`),
-  _tmpl$25 = /*#__PURE__*/_$template(`<dl class=k2b-detail-properties>`),
-  _tmpl$26 = /*#__PURE__*/_$template(`<span class=k2b-detail-properties__leading>`),
-  _tmpl$27 = /*#__PURE__*/_$template(`<div class=k2b-detail-properties__item><dt></dt><dd><!$><!/><!$><!/>`),
-  _tmpl$28 = /*#__PURE__*/_$template(`<span class=k2b-detail-properties__value>`),
-  _tmpl$29 = /*#__PURE__*/_$template(`<a class="k2b-detail-properties__value k2b-detail-properties__link">`),
-  _tmpl$30 = /*#__PURE__*/_$template(`<ul class=k2b-detail-tags>`),
-  _tmpl$31 = /*#__PURE__*/_$template(`<li>`),
-  _tmpl$32 = /*#__PURE__*/_$template(`<span class=k2b-detail-tag>#<!$><!/>`),
-  _tmpl$33 = /*#__PURE__*/_$template(`<a class=k2b-detail-tag>#<!$><!/>`);
-import { createMemo, createSignal, For, onCleanup, Show } from "solid-js";
+  _tmpl$24 = /*#__PURE__*/_$template(`<div class=k2b-detail-section-rows aria-busy=true><!$><!/><span class=k2b-sr-only role=status>`),
+  _tmpl$25 = /*#__PURE__*/_$template(`<div class=k2b-detail-section-rows><!$><!/><!$><!/><!$><!/><!$><!/>`),
+  _tmpl$26 = /*#__PURE__*/_$template(`<div class=k2b-detail-section-rows><!$><!/><!$><!/>`),
+  _tmpl$27 = /*#__PURE__*/_$template(`<dl class=k2b-detail-properties>`),
+  _tmpl$28 = /*#__PURE__*/_$template(`<span class=k2b-detail-properties__leading>`),
+  _tmpl$29 = /*#__PURE__*/_$template(`<div class=k2b-detail-properties__item><dt></dt><dd><!$><!/><!$><!/>`),
+  _tmpl$30 = /*#__PURE__*/_$template(`<span class=k2b-detail-properties__value>`),
+  _tmpl$31 = /*#__PURE__*/_$template(`<a class="k2b-detail-properties__value k2b-detail-properties__link">`),
+  _tmpl$32 = /*#__PURE__*/_$template(`<ul class=k2b-detail-tags>`),
+  _tmpl$33 = /*#__PURE__*/_$template(`<li>`),
+  _tmpl$34 = /*#__PURE__*/_$template(`<span class=k2b-detail-tag>#<!$><!/>`),
+  _tmpl$35 = /*#__PURE__*/_$template(`<a class=k2b-detail-tag>#<!$><!/>`);
+import { children, createMemo, createSignal, For, onCleanup, Show } from "solid-js";
 import { Button } from "../actions/Button";
 import { Avatar } from "../surfaces/Avatar";
 import { AvatarStack } from "../surfaces/AvatarStack";
@@ -698,52 +700,71 @@ export function DetailAccess(props) {
 
 // ── Links ───────────────────────────────────────────────────────────────
 
+const LinkRow = props => {
+  const item = props.item;
+  const menu = item.menuItems ? {
+    menuItems: item.menuItems,
+    menuLabel: item.menuLabel
+  } : {};
+  const shared = {
+    leading: item.leading ?? (() => {
+      var _el$69 = _$getNextElement(_tmpl$4);
+      _$effect(() => _$className(_el$69, item.icon ?? "ti ti-file-text"));
+      return _el$69;
+    })(),
+    title: item.title,
+    description: item.description,
+    trailing: item.trailing,
+    ...menu
+  };
+  return _$createComponent(Show, {
+    get when() {
+      return _$memo(() => !!!item.disabled)() && item.href;
+    },
+    get fallback() {
+      return _$createComponent(DetailPanel.Action, _$mergeProps({
+        type: "button",
+        get disabled() {
+          return item.disabled;
+        },
+        onClick: event => item.onClick?.(event)
+      }, shared));
+    },
+    children: href => _$createComponent(DetailPanel.Action, _$mergeProps({
+      get href() {
+        return href();
+      },
+      get target() {
+        return item.target;
+      },
+      get rel() {
+        return item.rel;
+      },
+      onClick: event => item.onClick?.(event)
+    }, shared))
+  });
+};
 const LinkGroup = props => {
   const panel = useDetailPanelMessages();
   const [all, setAll] = createSignal(false);
   const hiddenCount = () => Math.max(0, props.items.length - props.limit);
   return (() => {
-    var _el$69 = _$getNextElement(_tmpl$23),
-      _el$70 = _el$69.firstChild,
-      _el$71 = _el$70.nextSibling,
-      [_el$72, _co$14] = _$getNextMarker(_el$71.nextSibling),
-      _el$73 = _el$72.nextSibling,
-      [_el$74, _co$15] = _$getNextMarker(_el$73.nextSibling);
-    _$insert(_el$70, () => props.label);
-    _$insert(_el$69, _$createComponent(For, {
+    var _el$70 = _$getNextElement(_tmpl$23),
+      _el$71 = _el$70.firstChild,
+      _el$72 = _el$71.nextSibling,
+      [_el$73, _co$14] = _$getNextMarker(_el$72.nextSibling),
+      _el$74 = _el$73.nextSibling,
+      [_el$75, _co$15] = _$getNextMarker(_el$74.nextSibling);
+    _$insert(_el$71, () => props.label);
+    _$insert(_el$70, _$createComponent(For, {
       get each() {
         return _$memo(() => !!all())() ? props.items : props.items.slice(0, props.limit);
       },
-      children: item => {
-        const shared = {
-          leading: (() => {
-            var _el$75 = _$getNextElement(_tmpl$4);
-            _$effect(() => _$className(_el$75, item.icon ?? "ti ti-file-text"));
-            return _el$75;
-          })(),
-          title: item.title,
-          trailing: item.trailing
-        };
-        return _$createComponent(Show, {
-          get when() {
-            return item.href;
-          },
-          get fallback() {
-            return _$createComponent(DetailPanel.Action, _$mergeProps({
-              type: "button",
-              onClick: event => item.onClick?.(event)
-            }, shared));
-          },
-          children: href => _$createComponent(DetailPanel.Action, _$mergeProps({
-            get href() {
-              return href();
-            },
-            onClick: event => item.onClick?.(event)
-          }, shared))
-        });
-      }
-    }), _el$72, _co$14);
-    _$insert(_el$69, _$createComponent(Show, {
+      children: item => _$createComponent(LinkRow, {
+        item: item
+      })
+    }), _el$73, _co$14);
+    _$insert(_el$70, _$createComponent(Show, {
       get when() {
         return hiddenCount() > 0;
       },
@@ -768,23 +789,79 @@ const LinkGroup = props => {
           onClick: () => setAll(!all())
         });
       }
-    }), _el$74, _co$15);
-    return _el$69;
+    }), _el$75, _co$15);
+    return _el$70;
   })();
 };
 
-/** "Linked from" and "Links to" in one section. Without links it is one row: the title and "None yet". */
+/**
+ * "Linked from" and "Links to" in one section. Without links it is one row: the title and "None yet", followed by the
+ * `footer` when there is one.
+ */
 export function DetailLinks(props) {
   const t = useDetailSectionMessages();
   const limit = () => Math.max(1, props.limit ?? 5);
+  const state = () => props.state ?? "ready";
   const total = () => props.incoming.length + props.outgoing.length;
+  // Resolve once: the empty state reads it as a condition and as content.
+  const footer = children(() => props.footer);
   const summary = () => {
+    if (state() === "loading") return t().linksLoading;
+    if (state() === "error") return t().linksFailed;
     const names = items => ({
       names: listNames(items.slice(0, 2).map(item => item.title), t().and),
       more: Math.max(0, items.length - 2)
     });
     return props.incoming.length ? t().linkedBySummary(names(props.incoming)) : t().linksToSummary(names(props.outgoing));
   };
+  // Loading and failure take the row the next links would take, so the loaded rows above never move.
+  const pending = () => [_$createComponent(Show, {
+    get when() {
+      return state() === "loading";
+    },
+    get children() {
+      var _el$77 = _$getNextElement(_tmpl$24),
+        _el$79 = _el$77.firstChild,
+        [_el$80, _co$16] = _$getNextMarker(_el$79.nextSibling),
+        _el$78 = _el$80.nextSibling;
+      _$insert(_el$77, _$createComponent(DetailPanel.Row, {
+        get leading() {
+          return _$getNextElement(_tmpl$20);
+        },
+        get title() {
+          return _$getNextElement(_tmpl$21);
+        }
+      }), _el$80, _co$16);
+      _$insert(_el$78, () => t().linksLoading);
+      return _el$77;
+    }
+  }), _$createComponent(Show, {
+    get when() {
+      return state() === "error";
+    },
+    get children() {
+      var _el$81 = _$getNextElement(_tmpl$17),
+        _el$82 = _el$81.firstChild,
+        _el$83 = _el$82.nextSibling,
+        _el$84 = _el$83.nextSibling,
+        [_el$85, _co$17] = _$getNextMarker(_el$84.nextSibling);
+      _$insert(_el$83, () => t().linksFailed);
+      _$insert(_el$81, _$createComponent(Show, {
+        get when() {
+          return props.onRetry;
+        },
+        children: retry => _$createComponent(Button, {
+          variant: "text",
+          size: "xs",
+          onClick: () => retry()(),
+          get children() {
+            return t().retry;
+          }
+        })
+      }), _el$85, _co$17);
+      return _el$81;
+    }
+  })];
   return _$createComponent(Show, {
     get when() {
       return total() > 0;
@@ -795,9 +872,28 @@ export function DetailLinks(props) {
           return props.title ?? t().links;
         },
         icon: "ti ti-arrows-exchange",
-        count: 0,
+        get count() {
+          return state() === "ready" ? 0 : undefined;
+        },
         get ["class"]() {
           return props.class;
+        },
+        get children() {
+          return _$createComponent(Show, {
+            get when() {
+              return state() !== "ready" || footer();
+            },
+            get children() {
+              var _el$97 = _$getNextElement(_tmpl$26),
+                _el$98 = _el$97.firstChild,
+                [_el$99, _co$22] = _$getNextMarker(_el$98.nextSibling),
+                _el$100 = _el$99.nextSibling,
+                [_el$101, _co$23] = _$getNextMarker(_el$100.nextSibling);
+              _$insert(_el$97, pending, _el$99, _co$22);
+              _$insert(_el$97, footer, _el$101, _co$23);
+              return _el$97;
+            }
+          });
         }
       });
     },
@@ -808,7 +904,7 @@ export function DetailLinks(props) {
         },
         icon: "ti ti-arrows-exchange",
         get count() {
-          return total();
+          return _$memo(() => state() === "ready")() ? total() : undefined;
         },
         collapsible: true,
         get defaultOpen() {
@@ -821,12 +917,16 @@ export function DetailLinks(props) {
           return props.class;
         },
         get children() {
-          var _el$77 = _$getNextElement(_tmpl$24),
-            _el$78 = _el$77.firstChild,
-            [_el$79, _co$16] = _$getNextMarker(_el$78.nextSibling),
-            _el$80 = _el$79.nextSibling,
-            [_el$81, _co$17] = _$getNextMarker(_el$80.nextSibling);
-          _$insert(_el$77, _$createComponent(Show, {
+          var _el$88 = _$getNextElement(_tmpl$25),
+            _el$89 = _el$88.firstChild,
+            [_el$90, _co$18] = _$getNextMarker(_el$89.nextSibling),
+            _el$91 = _el$90.nextSibling,
+            [_el$92, _co$19] = _$getNextMarker(_el$91.nextSibling),
+            _el$93 = _el$92.nextSibling,
+            [_el$94, _co$20] = _$getNextMarker(_el$93.nextSibling),
+            _el$95 = _el$94.nextSibling,
+            [_el$96, _co$21] = _$getNextMarker(_el$95.nextSibling);
+          _$insert(_el$88, _$createComponent(Show, {
             get when() {
               return props.incoming.length > 0;
             },
@@ -845,8 +945,8 @@ export function DetailLinks(props) {
                 }
               });
             }
-          }), _el$79, _co$16);
-          _$insert(_el$77, _$createComponent(Show, {
+          }), _el$90, _co$18);
+          _$insert(_el$88, _$createComponent(Show, {
             get when() {
               return props.outgoing.length > 0;
             },
@@ -865,8 +965,10 @@ export function DetailLinks(props) {
                 }
               });
             }
-          }), _el$81, _co$17);
-          return _el$77;
+          }), _el$92, _co$19);
+          _$insert(_el$88, pending, _el$94, _co$20);
+          _$insert(_el$88, footer, _el$96, _co$21);
+          return _el$88;
         }
       });
     }
@@ -896,52 +998,54 @@ export function DetailProperties(props) {
       return props.class;
     },
     get children() {
-      var _el$82 = _$getNextElement(_tmpl$25);
-      _$insert(_el$82, _$createComponent(For, {
-        get each() {
-          return props.items;
-        },
-        children: item => (() => {
-          var _el$83 = _$getNextElement(_tmpl$27),
-            _el$84 = _el$83.firstChild,
-            _el$85 = _el$84.nextSibling,
-            _el$87 = _el$85.firstChild,
-            [_el$88, _co$18] = _$getNextMarker(_el$87.nextSibling),
-            _el$89 = _el$88.nextSibling,
-            [_el$90, _co$19] = _$getNextMarker(_el$89.nextSibling);
-          _$insert(_el$84, () => item.label);
-          _$insert(_el$85, _$createComponent(Show, {
-            get when() {
-              return item.leading;
-            },
-            get children() {
-              var _el$86 = _$getNextElement(_tmpl$26);
-              _$insert(_el$86, () => item.leading);
-              return _el$86;
-            }
-          }), _el$88, _co$18);
-          _$insert(_el$85, _$createComponent(Show, {
-            get when() {
-              return item.href;
-            },
-            get fallback() {
-              return (() => {
-                var _el$91 = _$getNextElement(_tmpl$28);
-                _$insert(_el$91, () => item.value);
-                return _el$91;
-              })();
-            },
-            children: href => (() => {
-              var _el$92 = _$getNextElement(_tmpl$29);
-              _$insert(_el$92, () => item.value);
-              _$effect(() => _$setAttribute(_el$92, "href", href()));
-              return _el$92;
-            })()
-          }), _el$90, _co$19);
-          return _el$83;
-        })()
-      }));
-      return _el$82;
+      return [(() => {
+        var _el$102 = _$getNextElement(_tmpl$27);
+        _$insert(_el$102, _$createComponent(For, {
+          get each() {
+            return props.items;
+          },
+          children: item => (() => {
+            var _el$103 = _$getNextElement(_tmpl$29),
+              _el$104 = _el$103.firstChild,
+              _el$105 = _el$104.nextSibling,
+              _el$107 = _el$105.firstChild,
+              [_el$108, _co$24] = _$getNextMarker(_el$107.nextSibling),
+              _el$109 = _el$108.nextSibling,
+              [_el$110, _co$25] = _$getNextMarker(_el$109.nextSibling);
+            _$insert(_el$104, () => item.label);
+            _$insert(_el$105, _$createComponent(Show, {
+              get when() {
+                return item.leading;
+              },
+              get children() {
+                var _el$106 = _$getNextElement(_tmpl$28);
+                _$insert(_el$106, () => item.leading);
+                return _el$106;
+              }
+            }), _el$108, _co$24);
+            _$insert(_el$105, _$createComponent(Show, {
+              get when() {
+                return item.href;
+              },
+              get fallback() {
+                return (() => {
+                  var _el$111 = _$getNextElement(_tmpl$30);
+                  _$insert(_el$111, () => item.value);
+                  return _el$111;
+                })();
+              },
+              children: href => (() => {
+                var _el$112 = _$getNextElement(_tmpl$31);
+                _$insert(_el$112, () => item.value);
+                _$effect(() => _$setAttribute(_el$112, "href", href()));
+                return _el$112;
+              })()
+            }), _el$110, _co$25);
+            return _el$103;
+          })()
+        }));
+        return _el$102;
+      })(), _$memo(() => props.children)];
     }
   });
 }
@@ -969,47 +1073,47 @@ export function DetailTags(props) {
         },
         get fallback() {
           return _$memo(() => !!props.emptyHint)() ? (() => {
-            var _el$94 = _$getNextElement(_tmpl$18);
-            _$insert(_el$94, () => props.emptyHint);
-            return _el$94;
+            var _el$114 = _$getNextElement(_tmpl$18);
+            _$insert(_el$114, () => props.emptyHint);
+            return _el$114;
           })() : undefined;
         },
         get children() {
-          var _el$93 = _$getNextElement(_tmpl$30);
-          _$insert(_el$93, _$createComponent(For, {
+          var _el$113 = _$getNextElement(_tmpl$32);
+          _$insert(_el$113, _$createComponent(For, {
             get each() {
               return props.tags;
             },
             children: tag => (() => {
-              var _el$95 = _$getNextElement(_tmpl$31);
-              _$insert(_el$95, _$createComponent(Show, {
+              var _el$115 = _$getNextElement(_tmpl$33);
+              _$insert(_el$115, _$createComponent(Show, {
                 get when() {
                   return tag.href;
                 },
                 get fallback() {
                   return (() => {
-                    var _el$96 = _$getNextElement(_tmpl$32),
-                      _el$97 = _el$96.firstChild,
-                      _el$98 = _el$97.nextSibling,
-                      [_el$99, _co$20] = _$getNextMarker(_el$98.nextSibling);
-                    _$insert(_el$96, () => tag.label, _el$99, _co$20);
-                    return _el$96;
+                    var _el$116 = _$getNextElement(_tmpl$34),
+                      _el$117 = _el$116.firstChild,
+                      _el$118 = _el$117.nextSibling,
+                      [_el$119, _co$26] = _$getNextMarker(_el$118.nextSibling);
+                    _$insert(_el$116, () => tag.label, _el$119, _co$26);
+                    return _el$116;
                   })();
                 },
                 children: href => (() => {
-                  var _el$100 = _$getNextElement(_tmpl$33),
-                    _el$101 = _el$100.firstChild,
-                    _el$102 = _el$101.nextSibling,
-                    [_el$103, _co$21] = _$getNextMarker(_el$102.nextSibling);
-                  _$insert(_el$100, () => tag.label, _el$103, _co$21);
-                  _$effect(() => _$setAttribute(_el$100, "href", href()));
-                  return _el$100;
+                  var _el$120 = _$getNextElement(_tmpl$35),
+                    _el$121 = _el$120.firstChild,
+                    _el$122 = _el$121.nextSibling,
+                    [_el$123, _co$27] = _$getNextMarker(_el$122.nextSibling);
+                  _$insert(_el$120, () => tag.label, _el$123, _co$27);
+                  _$effect(() => _$setAttribute(_el$120, "href", href()));
+                  return _el$120;
                 })()
               }));
-              return _el$95;
+              return _el$115;
             })()
           }));
-          return _el$93;
+          return _el$113;
         }
       });
     }