@k2b/ui 0.50.0 → 0.51.0

package/dist/ssr/widgets/DashboardFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["widgets/DashboardFrame.tsx"],"sourcesContent":["import { children, type JSX, Match, Show, Switch } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport { Button } from \"../actions/Button\";\nimport { useChartMessages } from \"../content/chart-messages\";\nimport { useUiMessages } from \"../intl/messages\";\nimport { Paper } from \"../surfaces/Paper\";\nimport type { DashboardWidth } from \"./Dashboard\";\n\n/**\n * What the host's read shows: its content (`ready`), the first read in flight (`loading`), nothing to show (`empty`),\n * a failed first read (`error`), or content whose refresh failed (`stale`).\n */\nexport type DashboardFrameState = \"ready\" | \"loading\" | \"empty\" | \"error\" | \"stale\";\n\nexport type DashboardFrameProps = {\n  /**\n   * Heading of the frame. Without it the frame is only the surface, for content that brings its own head and states,\n   * such as `ChartExplorer` with `inset=\"1rem\"`.\n   */\n  title?: string;\n  /** One line under the title; loading and stale notes take its place, so nothing moves. */\n  subtitle?: JSX.Element;\n  /** Level of the title heading; defaults to 3. */\n  headingLevel?: 2 | 3 | 4 | 5 | 6;\n  /** Controls at the right of the head, such as a search field or a grouping chip. */\n  tools?: JSX.Element;\n  /** Defaults to `ready`. */\n  state?: DashboardFrameState;\n  /** When the shown content was read, formatted by the host (\"09:12\"); a stale note names it. */\n  asOf?: string;\n  /** Try again after a failure; without it a failure has no button. */\n  onRetry?: () => void;\n  /** The empty sentence, such as \"No campaign in this period.\" */\n  empty?: JSX.Element;\n  /** Tabler icon of the empty state; defaults to `ti ti-chart-bar-off`. */\n  emptyIcon?: string;\n  /** An action under the empty sentence, such as \"Clear search\". */\n  emptyAction?: JSX.Element;\n  /**\n   * The content has nothing to show right now although the read succeeded, such as a search without matches: the body\n   * shows the empty sentence and action while the head keeps its state, so a stale note stays.\n   */\n  emptyContent?: boolean;\n  /** Height of the body, a CSS length. Every state keeps it. */\n  height?: string;\n  /**\n   * A hidden copy of the full content that holds the body's height in every state, such as every row of a table. The\n   * body then reaches the frame's left, right and bottom edges, like a table that brings its own rows.\n   */\n  reserve?: JSX.Element;\n  /** States as one quiet line instead of a centred message, for short content such as an amount or one bar. */\n  compact?: boolean;\n  /**\n   * Share of a `DashboardSection`'s six columns, like `DashboardPanel`: the frame is the grid cell itself, so it never\n   * sits in a second frame. Defaults to a third there; ignored elsewhere.\n   */\n  width?: DashboardWidth;\n  class?: string;\n  children?: JSX.Element;\n};\n\n/**\n * One framed dashboard panel: title, subtitle, tools and the content the host passes, with loading, empty, failure and\n * stale in the same place and at the same height.\n */\nexport function DashboardFrame(props: DashboardFrameProps): JSX.Element {\n  const ui = useUiMessages();\n  const chart = useChartMessages();\n  const state = () => props.state ?? \"ready\";\n  const failed = () => state() === \"error\";\n  const read = () => state() === \"ready\" || state() === \"stale\";\n  const shown = () => read() && !props.emptyContent;\n  const empty = () => state() === \"empty\" || (read() && props.emptyContent === true);\n  // Slots resolve once: checking a slot and then rendering it must not mount its components twice.\n  const tools = children(() => props.tools);\n  const reserve = children(() => props.reserve);\n  const busy = () => (state() === \"loading\" ? \"true\" : undefined);\n  const className = () => (props.class ? `k2b-dashboard-frame ${props.class}` : \"k2b-dashboard-frame\");\n  const retryLink = () => (\n    <button type=\"button\" class=\"k2b-dashboard-frame__link\" onClick={() => props.onRetry?.()}>\n      {ui().tryAgain}\n    </button>\n  );\n  const status = () =>\n    state() === \"loading\"\n      ? chart().chartLoading\n      : state() === \"stale\"\n        ? [props.asOf ? chart().chartAsOf({ time: props.asOf }) : undefined, chart().chartRefreshFailed].filter(Boolean).join(\" · \")\n        : props.subtitle;\n  const sentence = () => props.empty ?? ui().noData;\n  return (\n    <Show\n      when={props.title !== undefined}\n      fallback={\n        <Paper class={className()} data-width={props.width ?? \"third\"}>\n          {props.children}\n        </Paper>\n      }\n    >\n      <Paper class={className()} data-width={props.width ?? \"third\"}>\n        <header class=\"k2b-dashboard-frame__header\">\n          <div>\n            <Dynamic component={`h${props.headingLevel ?? 3}`}>{props.title}</Dynamic>\n            {/* One reserved line and a polite live region: loading and stale replace the subtitle without moving. */}\n            <p role=\"status\" class={state() === \"stale\" ? \"k2b-dashboard-frame__stale\" : undefined}>\n              {status()}\n              <Show when={state() === \"stale\" && props.onRetry}>\n                {\" · \"}\n                {retryLink()}\n              </Show>\n            </p>\n          </div>\n          <Show when={tools() !== undefined}>\n            <div class=\"k2b-dashboard-frame__tools\">{tools()}</div>\n          </Show>\n        </header>\n        <Show\n          when={reserve() !== undefined}\n          fallback={\n            <div class=\"k2b-dashboard-frame__body\" style={props.height ? { height: props.height } : undefined} aria-busy={busy()}>\n              <Switch fallback={props.children}>\n                <Match when={state() === \"loading\" && props.compact}>\n                  <div class=\"k2b-dashboard-frame__skeleton\" aria-hidden=\"true\">\n                    <span />\n                    <span />\n                  </div>\n                </Match>\n                <Match when={(failed() || empty()) && props.compact}>\n                  <p class=\"k2b-dashboard-frame__inline-state\" role={failed() ? \"alert\" : undefined}>\n                    <i class={failed() ? \"ti ti-alert-circle\" : (props.emptyIcon ?? \"ti ti-chart-bar-off\")} aria-hidden=\"true\" />\n                    {failed() ? chart().chartLoadFailed : sentence()}\n                    <Show when={failed() && props.onRetry}>{retryLink()}</Show>\n                    <Show when={empty()}>{props.emptyAction}</Show>\n                  </p>\n                </Match>\n                <Match when={!shown()}>\n                  <Message />\n                </Match>\n              </Switch>\n            </div>\n          }\n        >\n          <div class=\"k2b-dashboard-frame__stack\" aria-busy={busy()}>\n            {/* The full content, hidden: the body's height in every state. */}\n            <div class=\"k2b-dashboard-frame__reserve\" aria-hidden=\"true\" inert>\n              {reserve()}\n            </div>\n            <Show when={shown()} fallback={<Message />}>\n              <div class=\"k2b-dashboard-frame__content\">{props.children}</div>\n            </Show>\n          </div>\n        </Show>\n      </Paper>\n    </Show>\n  );\n\n  function Message(): JSX.Element {\n    return (\n      <div class=\"k2b-chart-explorer__state\" data-state={state()} role={failed() ? \"alert\" : undefined}>\n        <Show when={state() !== \"loading\"}>\n          <span class=\"k2b-chart-explorer__state-icon\" aria-hidden=\"true\">\n            <i class={failed() ? \"ti ti-alert-circle\" : (props.emptyIcon ?? \"ti ti-chart-bar-off\")} />\n          </span>\n        </Show>\n        <p>{failed() ? chart().chartLoadFailed : state() === \"loading\" ? \"\" : sentence()}</p>\n        <Show when={failed() && props.onRetry}>\n          <Button variant=\"secondary\" size=\"sm\" onClick={() => props.onRetry?.()}>\n            <i class=\"ti ti-refresh\" aria-hidden=\"true\" />\n            {ui().tryAgain}\n          </Button>\n        </Show>\n        <Show when={empty()}>{props.emptyAction}</Show>\n      </div>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ssr/widgets/index.js

@@ -1,4 +1,5 @@
 export * from "./Dashboard";
+export * from "./DashboardFrame";
 export * from "./Widget";
 export * from "./WidgetHero";
 export * from "./WidgetList";

package/dist/ssr/widgets/index.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["widgets/index.ts"],"sourcesContent":["export * from \"./Dashboard\";\nexport * from \"./Widget\";\nexport * from \"./WidgetHero\";\nexport * from \"./WidgetList\";\nexport * from \"./WidgetPills\";\nexport * from \"./WidgetStat\";\nexport * from \"./WidgetStatus\";\n"],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,UAAU;AACxB,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,cAAc,eAAe;AAC7B,cAAc,cAAc;AAC5B,cAAc,gBAAgB","ignoreList":[]}
+{"version":3,"names":[],"sources":["widgets/index.ts"],"sourcesContent":["export * from \"./Dashboard\";\nexport * from \"./DashboardFrame\";\nexport * from \"./Widget\";\nexport * from \"./WidgetHero\";\nexport * from \"./WidgetList\";\nexport * from \"./WidgetPills\";\nexport * from \"./WidgetStat\";\nexport * from \"./WidgetStatus\";\n"],"mappings":"AAAA,cAAc,aAAa;AAC3B,cAAc,kBAAkB;AAChC,cAAc,UAAU;AACxB,cAAc,cAAc;AAC5B,cAAc,cAAc;AAC5B,cAAc,eAAe;AAC7B,cAAc,cAAc;AAC5B,cAAc,gBAAgB","ignoreList":[]}