@phis/ui 0.4.2 → 0.4.3

package/plugins/runtime-modules/core/themes.js

@@ -0,0 +1,12 @@
+import { PHI_CORE_THEME_PRESET_PLUGINS } from "../../../theme/phi-theme-presets";
+import { PHI_CORE_RUNTIME_MODULE_ID } from "./ids";
+/* The Theme presets Core ships, one descriptor each. */
+export const PHI_CORE_RUNTIME_MODULE_THEMES = PHI_CORE_THEME_PRESET_PLUGINS.map((preset) => ({
+    ownerModuleId: PHI_CORE_RUNTIME_MODULE_ID,
+    presetKey: `${preset.key}-theme-preset`,
+    presetVersion: 1,
+    themeKey: preset.key,
+    title: preset.title,
+    ...(preset.description ? { description: preset.description } : {}),
+    loadPreset: () => preset,
+}));

package/plugins/runtime-modules/core/widgets/card/collection-view-binding.js

@@ -10,6 +10,8 @@ import { PHI_SURFACE_CARD } from "../../../../../helpers/surface-presets";
 import { resolvePhiImagePresentation } from "../../../../../components/media/image-presentation";
 import { normalizePhiCssSize } from "../../../../../components/layouts/phi-layout-contract";
 import { usePhiSearchDraft } from "../../../../../components/widgets/client/shared/phi-search-draft";
+import { PhiBulletListControl } from "../../../../../components/controls/phi-bullet-list-control";
+import { buildPhiBulletListTree, readPhiBulletListEntries, } from "../../../../../components/widgets/shared/bullet-list-vocabulary";
 /**
  * A Collection drawn as Cards.
  *
@@ -34,15 +36,18 @@ import { usePhiSearchDraft } from "../../../../../components/widgets/client/shar
  * squeezed pair.
  */
 const CARD_MIN_COLUMN_WIDTH = 260;
+/* A dot path, because a provider's rows are documents and the interesting field is often one level in. */
+function readValue(item, path) {
+    return path.split(".").reduce((current, key) => (current && typeof current === "object"
+        ? current[key]
+        : undefined), item);
+}
 function readPath(item, path) {
     if (!path) {
         return undefined;
     }
-    // A dot path, because a provider's rows are documents and the interesting field is often one level
-    // in. Anything that is not a string or a number is not a label and is left alone.
-    const value = path.split(".").reduce((current, key) => (current && typeof current === "object"
-        ? current[key]
-        : undefined), item);
+    // Anything that is not a string or a number is not a label and is left alone.
+    const value = readValue(item, path);
     return typeof value === "string" || typeof value === "number" ? String(value) : undefined;
 }
 /**
@@ -59,7 +64,7 @@ function readIconName(value) {
 function readTruth(item, path) {
     if (!path)
         return false;
-    const value = path.split(".").reduce((current, key) => (current && typeof current === "object" ? current[key] : undefined), item);
+    const value = readValue(item, path);
     return value === true || value === "true" || value === 1;
 }
 /*
@@ -85,6 +90,11 @@ function buildCard(item, card) {
         meta: readPath(item, card?.meta),
         actionLabel: readPath(item, card?.actionLabel),
         value: readPath(item, card?.value),
+        badge: readPath(item, card?.badge),
+        price: readPath(item, card?.price),
+        pricePeriod: readPath(item, card?.pricePeriod),
+        priceYearly: readPath(item, card?.priceYearly),
+        pricePeriodYearly: readPath(item, card?.pricePeriodYearly),
     };
     /*
      * Two pictures with two jobs, and the fallbacks say which is which. A cover opens the card and takes
@@ -110,8 +120,14 @@ function buildCard(item, card) {
         ...(card?.variant ? { variant: card.variant } : {}),
         ...(card?.body ? { body: card.body } : {}),
         highlight: readTruth(item, card?.highlight),
+        ...(card?.billingPeriod ? { billingPeriod: card.billingPeriod } : {}),
     };
-    return { labels, config };
+    /* A plan's features are a list in the row, drawn as a plan card's list is drawn on a page. */
+    const features = card?.body === "plan" && card.features
+        ? readPhiBulletListEntries(readValue(item, card.features)).filter((entry) => Boolean(entry.text))
+        : [];
+    const listContent = features.length > 0 ? (_jsx(PhiBulletListControl, { items: buildPhiBulletListTree(features, (entry) => entry.text) })) : null;
+    return { labels, config, listContent };
 }
 export function PhiCardCollectionViewBinding({ config, binding, widgetId, }) {
     void widgetId;
@@ -126,7 +142,7 @@ export function PhiCardCollectionViewBinding({ config, binding, widgetId, }) {
     });
     const cards = items.map((item, index) => {
         const card = buildCard(item, presentation.card);
-        return (_jsx(PhiCardWidgetClient, { labels: card.labels, config: card.config }, readPath(item, "id") ?? readPath(item, "slug") ?? String(index)));
+        return (_jsx(PhiCardWidgetClient, { labels: card.labels, config: card.config, listContent: card.listContent }, readPath(item, "id") ?? readPath(item, "slug") ?? String(index)));
     });
     return (_jsx(PhiCollectionViewControl, { title: presentation.title, description: presentation.description, mode: presentation.mode, ...(presentation.gap ? { gap: presentation.gap } : {}), minColumnWidth: presentation.minColumnWidth ?? CARD_MIN_COLUMN_WIDTH, filters: features.search?.enabled ? (_jsx(PhiTextControl, { inputType: "search", value: searchDraft, placeholder: features.search.placeholder, ariaLabel: features.search.placeholder ?? "Search", onChange: (value) => setSearchDraft(value ?? ""), style: {
                 flex: "1 1 12rem",
@@ -134,7 +150,7 @@ export function PhiCardCollectionViewBinding({ config, binding, widgetId, }) {
             }, size: presentation.controlSize })) : null, diagnostics: binding.error ? (_jsx(PhiAlertControl, { level: "error", title: binding.error })) : null, body: items.length === 0 && !binding.loading ? (_jsx(PhiEmptyControl, { description: presentation.emptyDescription ?? "Nothing here yet." })) : undefined, items: cards, pagination: features.pagination?.enabled === false ? null : {
             page: binding.query.page ?? 1,
             pageSize: binding.query.pageSize ?? features.pagination?.pageSize ?? 20,
-            total: binding.data?.total ?? items.length,
+            total: binding.data?.total ?? 0,
             ...(features.pagination?.compact === undefined
                 ? {}
                 : { simple: features.pagination.compact }),