@k2b/ui 0.22.0 → 0.23.0

package/dist/browser/surfaces/StatCell.js

@@ -143,7 +143,16 @@ export function StatCell(props) {
         var _el$12 = _$getNextElement(_tmpl$7);
         _$setAttribute(_el$12, "data-surface", surface);
         _$insert(_el$12, _$createComponent(Body, props));
-        _$effect(() => _$setAttribute(_el$12, "data-size", size()));
+        _$effect(_p$ => {
+          var _v$8 = size(),
+            _v$9 = props.wrap || undefined;
+          _v$8 !== _p$.e && _$setAttribute(_el$12, "data-size", _p$.e = _v$8);
+          _v$9 !== _p$.t && _$setAttribute(_el$12, "data-wrap", _p$.t = _v$9);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined
+        });
         return _el$12;
       })();
     },
@@ -155,14 +164,17 @@ export function StatCell(props) {
       _$setAttribute(_el$13, "data-surface", surface);
       _$insert(_el$13, _$createComponent(Body, props), _el$16, _co$4);
       _$effect(_p$ => {
-        var _v$8 = href(),
-          _v$9 = size();
-        _v$8 !== _p$.e && _$setAttribute(_el$13, "href", _p$.e = _v$8);
-        _v$9 !== _p$.t && _$setAttribute(_el$13, "data-size", _p$.t = _v$9);
+        var _v$0 = href(),
+          _v$1 = size(),
+          _v$10 = props.wrap || undefined;
+        _v$0 !== _p$.e && _$setAttribute(_el$13, "href", _p$.e = _v$0);
+        _v$1 !== _p$.t && _$setAttribute(_el$13, "data-size", _p$.t = _v$1);
+        _v$10 !== _p$.a && _$setAttribute(_el$13, "data-wrap", _p$.a = _v$10);
         return _p$;
       }, {
         e: undefined,
-        t: undefined
+        t: undefined,
+        a: undefined
       });
       return _el$13;
     })()

package/dist/browser/surfaces/StatCell.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["surfaces/StatCell.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport Chart from \"../content/Chart\";\nimport type { AccentColor } from \"../semantics\";\nimport { type StatGridSize, useStatGridSize, useStatGridSurface } from \"./StatGrid\";\n\nexport type StatCellTone = AccentColor;\n\nexport type StatCellAccent = {\n  tone: StatCellTone;\n  icon: string;\n  text?: string;\n};\n\nexport type StatCellProps = {\n  label: string;\n  value: string | number | JSX.Element;\n  sub?: string;\n  valueClass?: string;\n  accent?: StatCellAccent;\n  href?: string;\n  title?: string;\n  trend?: readonly number[];\n  size?: StatGridSize;\n};\n\nfunction Body(props: StatCellProps): JSX.Element {\n  const gridSize = useStatGridSize();\n  const size = () => props.size ?? gridSize;\n  const accent = () => props.accent;\n  return (\n    <>\n      <span class=\"k2b-stat-cell__label\" data-size={size()}>\n        {props.label}\n      </span>\n      <span class={`k2b-stat-cell__value ${props.valueClass ?? \"\"}`} data-size={size()} title={props.title}>\n        {props.value}\n      </span>\n      <Show when={props.trend && props.trend.length > 1}>\n        <Chart\n          kind=\"sparkline\"\n          class=\"k2b-stat-cell__trend\"\n          style={{ height: \"32px\" }}\n          data={Array.from(props.trend ?? [])}\n          showLast\n          showMinMax\n        />\n      </Show>\n      <Show when={props.sub || accent()}>\n        <div class=\"k2b-stat-cell__support\">\n          <Show when={props.sub}>{(sub) => <span class=\"k2b-stat-cell__sub\">{sub()}</span>}</Show>\n          <Show when={accent()}>\n            {(value) => (\n              <Show\n                when={value().text}\n                fallback={<i class={`${value().icon} k2b-stat-cell__accent-icon`} data-tone={value().tone} aria-hidden=\"true\" />}\n              >\n                {(text) => (\n                  <span class=\"k2b-stat-cell__accent\" data-tone={value().tone}>\n                    <i class={value().icon} aria-hidden=\"true\" />\n                    {text()}\n                  </span>\n                )}\n              </Show>\n            )}\n          </Show>\n        </div>\n      </Show>\n    </>\n  );\n}\n\nexport function StatCell(props: StatCellProps): JSX.Element {\n  const gridSize = useStatGridSize();\n  const size = () => props.size ?? gridSize;\n  const surface = useStatGridSurface();\n  return (\n    <Show\n      when={props.href}\n      fallback={\n        <div class=\"k2b-stat-cell\" data-size={size()} data-surface={surface}>\n          <Body {...props} />\n        </div>\n      }\n    >\n      {(href) => (\n        <a href={href()} class=\"k2b-stat-cell k2b-stat-cell--link\" data-size={size()} data-surface={surface}>\n          <i class=\"ti ti-external-link k2b-stat-cell__link-icon\" aria-hidden=\"true\" />\n          <Body {...props} />\n        </a>\n      )}\n    </Show>\n  );\n}\n\nexport default StatCell;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":[],"sources":["surfaces/StatCell.tsx"],"sourcesContent":["import { type JSX, Show } from \"solid-js\";\nimport Chart from \"../content/Chart\";\nimport type { AccentColor } from \"../semantics\";\nimport { type StatGridSize, useStatGridSize, useStatGridSurface } from \"./StatGrid\";\n\nexport type StatCellTone = AccentColor;\n\nexport type StatCellAccent = {\n  tone: StatCellTone;\n  icon: string;\n  text?: string;\n};\n\nexport type StatCellProps = {\n  label: string;\n  value: string | number | JSX.Element;\n  sub?: string;\n  valueClass?: string;\n  accent?: StatCellAccent;\n  href?: string;\n  title?: string;\n  trend?: readonly number[];\n  size?: StatGridSize;\n  /**\n   * Wraps the label, value and support line instead of truncating them. Use it for a cell whose height nothing\n   * reserves, such as one figure on its own; cells compared in a row keep one line each.\n   */\n  wrap?: boolean;\n};\n\nfunction Body(props: StatCellProps): JSX.Element {\n  const gridSize = useStatGridSize();\n  const size = () => props.size ?? gridSize;\n  const accent = () => props.accent;\n  return (\n    <>\n      <span class=\"k2b-stat-cell__label\" data-size={size()}>\n        {props.label}\n      </span>\n      <span class={`k2b-stat-cell__value ${props.valueClass ?? \"\"}`} data-size={size()} title={props.title}>\n        {props.value}\n      </span>\n      <Show when={props.trend && props.trend.length > 1}>\n        <Chart\n          kind=\"sparkline\"\n          class=\"k2b-stat-cell__trend\"\n          style={{ height: \"32px\" }}\n          data={Array.from(props.trend ?? [])}\n          showLast\n          showMinMax\n        />\n      </Show>\n      <Show when={props.sub || accent()}>\n        <div class=\"k2b-stat-cell__support\">\n          <Show when={props.sub}>{(sub) => <span class=\"k2b-stat-cell__sub\">{sub()}</span>}</Show>\n          <Show when={accent()}>\n            {(value) => (\n              <Show\n                when={value().text}\n                fallback={<i class={`${value().icon} k2b-stat-cell__accent-icon`} data-tone={value().tone} aria-hidden=\"true\" />}\n              >\n                {(text) => (\n                  <span class=\"k2b-stat-cell__accent\" data-tone={value().tone}>\n                    <i class={value().icon} aria-hidden=\"true\" />\n                    {text()}\n                  </span>\n                )}\n              </Show>\n            )}\n          </Show>\n        </div>\n      </Show>\n    </>\n  );\n}\n\nexport function StatCell(props: StatCellProps): JSX.Element {\n  const gridSize = useStatGridSize();\n  const size = () => props.size ?? gridSize;\n  const surface = useStatGridSurface();\n  return (\n    <Show\n      when={props.href}\n      fallback={\n        <div class=\"k2b-stat-cell\" data-size={size()} data-surface={surface} data-wrap={props.wrap || undefined}>\n          <Body {...props} />\n        </div>\n      }\n    >\n      {(href) => (\n        <a\n          href={href()}\n          class=\"k2b-stat-cell k2b-stat-cell--link\"\n          data-size={size()}\n          data-surface={surface}\n          data-wrap={props.wrap || undefined}\n        >\n          <i class=\"ti ti-external-link k2b-stat-cell__link-icon\" aria-hidden=\"true\" />\n          <Body {...props} />\n        </a>\n      )}\n    </Show>\n  );\n}\n\nexport default StatCell;\n"],"mappings":"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","ignoreList":[]}