@wisemen/wise-crm-web 2.0.0-alpha.41 → 2.0.0-alpha.42

package/README.md

@@ -125,9 +125,25 @@ useWiseCrmConfig().init({
 | Field                                 | Description                                                                                                 |
 | ------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
 | `key`                                 | Unique per entity; used to cache the badge's data.                                                          |
-| `getData`                             | Receives `{ uuid }` and resolves to the badge label. Resolve to `null` or `''` to hide the badge.            |
+| `getData`                             | Receives `{ uuid }` and resolves to the badge label, or to `{ label, color?, variant?, icon?, dot? }` when the style depends on the data. Resolve to `null` or an empty label to hide the badge. |
 | `color`, `variant`, `icon`, `dot`     | Optional, passed to `UIBadge`. Defaults match the built-in badges (`gray`, `translucent`).                  |
 
+Styles returned from `getData` override the ones on the badge, for example to color a score by its value:
+
+```ts
+{
+  key: 'credit-score',
+  getData: async ({ uuid }) => {
+    const { score, isHealthy } = await CreditService.getForBusiness(uuid)
+
+    return {
+      label: t('crm.business.badges.credit_score', { score }),
+      color: isHealthy ? 'success' : 'error',
+    }
+  },
+}
+```
+
 Type the arrays with `WiseCrmBusinessHeaderBadge`, `WiseCrmIndividualHeaderBadge` or `WiseCrmDealHeaderBadge`; `uuid` is then a `WiseCrmBusinessUuid`, `WiseCrmIndividualUuid` or `WiseCrmDealUuid`.
 
 - The label is rendered as is, so translate it in `getData`. Badges refetch when the locale changes. Long labels are truncated with a tooltip.

package/dist/{BusinessDetailView-CHKBpSrI.js → BusinessDetailView-DCLbk1zs.js}

@@ -1,8 +1,8 @@
 import { defineComponent as n, openBlock as o, createBlock as r, unref as s, withCtx as a, createVNode as u } from "vue";
 import { useRouteParams as m } from "@vueuse/router";
-import { _ as p } from "./index-DEBSTcsW.js";
+import { _ as p } from "./index-D0Wq9rrv.js";
 import { br as c } from "./uuid.util-SYJY4Bt5.js";
-import { _ } from "./CrmDetailView.vue_vue_type_script_setup_true_lang-Xwd_IT_R.js";
+import { _ } from "./CrmDetailView.vue_vue_type_script_setup_true_lang-hKRJ0iTD.js";
 const x = /* @__PURE__ */ n({
   __name: "BusinessDetailView",
   props: {

package/dist/{CrmDetailView.vue_vue_type_script_setup_true_lang-Xwd_IT_R.js → CrmDetailView.vue_vue_type_script_setup_true_lang-hKRJ0iTD.js}

@@ -1,7 +1,7 @@
 import { defineComponent as v, ref as h, unref as e, openBlock as d, createElementBlock as u, createElementVNode as t, renderSlot as x, createVNode as r, withCtx as f, Fragment as y, renderList as g, createBlock as w, toValue as m, createCommentVNode as b } from "vue";
 import { onKeyStroke as C } from "@vueuse/core";
 import { UITabsRouterLink as k, UITabsRouterLinkItem as R, UIIconButton as B } from "@wisemen/vue-core-design-system";
-import { h as E, j as I, $ as T, ad as V } from "./index-DEBSTcsW.js";
+import { h as E, j as I, $ as T, ad as V } from "./index-D0Wq9rrv.js";
 import { useRoute as $, RouterView as j } from "vue-router";
 class A {
   /**

package/dist/{DealCommunicationTabView-DsghmRPh.js → DealCommunicationTabView-DLpKFEzi.js}

@@ -1,7 +1,7 @@
 import { defineComponent as y, openBlock as t, createElementBlock as _, createElementVNode as s, createBlock as o, resolveDynamicComponent as x, unref as e, toDisplayString as p, createVNode as r, withCtx as n, createCommentVNode as f, Fragment as b, renderList as w, normalizeClass as k, computed as I } from "vue";
 import { useRouteParams as U } from "@vueuse/router";
 import { useOffsetInfiniteQuery as M } from "@wisemen/vue-core-api-utils";
-import { M as z, u as E, a as L, T as j, b as B, W as F, F as T, c as S, D as h, g as A, d as D, m as N, e as V, A as H } from "./index-DEBSTcsW.js";
+import { M as z, u as E, a as L, T as j, b as B, W as F, F as T, c as S, D as h, g as A, d as D, m as N, e as V, A as H } from "./index-D0Wq9rrv.js";
 import { UIIconButton as Q, UIEmptyState as q, UIBadge as P } from "@wisemen/vue-core-design-system";
 import { AnimatePresence as W, Motion as O } from "motion-v";
 import { AccordionRoot as R, AccordionItem as G, AccordionHeader as J, AccordionTrigger as K, AccordionContent as X } from "reka-ui";

package/dist/{DealDetailView-BWmuuBj8.js → DealDetailView-fnpBvgUj.js}

@@ -2,8 +2,8 @@ import { defineComponent as x, openBlock as c, createBlock as y, unref as e, ref
 import { useRouteParams as Oe } from "@vueuse/router";
 import { useI18n as I } from "vue-i18n";
 import { br as ge, bw as Ee, by as Ve, bB as Le } from "./uuid.util-SYJY4Bt5.js";
-import { _ as qe } from "./CrmDetailView.vue_vue_type_script_setup_true_lang-Xwd_IT_R.js";
-import { f as T, h as ye, i as Ae, j as F, k as E, u as q, l as Be, E as be, C as he, n as Qe, o as Ke, p as Re, q as je, r as z, g as ze, J as Ge, s as Ye, t as ue, v as Ze, I as He, w as ve, x as Q, y as Je, z as Ce, B as Xe, G as We, U as ea, H as aa, e as ta, K as na, Q as la, L as oa, N as ia, O as ra, P as ce, R as Ue, S as sa, V as de, X as ua, Y as ca, Z as da, $ as ma, a0 as we, a1 as fa, a2 as pa, a3 as _a, a4 as ga, a5 as ya, a6 as ba, a7 as ha, a8 as va, a9 as Ca, aa as Ua, ab as wa, A as Pa } from "./index-DEBSTcsW.js";
+import { _ as qe } from "./CrmDetailView.vue_vue_type_script_setup_true_lang-hKRJ0iTD.js";
+import { f as T, h as ye, i as Ae, j as F, k as E, u as q, l as Be, E as be, C as he, n as Qe, o as Ke, p as Re, q as je, r as z, g as ze, J as Ge, s as Ye, t as ue, v as Ze, I as He, w as ve, x as Q, y as Je, z as Ce, B as Xe, G as We, U as ea, H as aa, e as ta, K as na, Q as la, L as oa, N as ia, O as ra, P as ce, R as Ue, S as sa, V as de, X as ua, Y as ca, Z as da, $ as ma, a0 as we, a1 as fa, a2 as pa, a3 as _a, a4 as ga, a5 as ya, a6 as ba, a7 as ha, a8 as va, a9 as Ca, aa as Ua, ab as wa, A as Pa } from "./index-D0Wq9rrv.js";
 import { useToast as Pe, useOverlay as X, UIConfirmDialog as Da, UIIconButton as oe, UITextField as Y, toFormField as B, UIDropdownMenu as xa, UIDropdownMenuGroup as Ia, UIDropdownMenuItem as me, UIPhoneNumberField as fe, UIFormLayout as ie, UIFormFieldGroup as K, UIFormFieldGrid as R, UIFormDialog as De, UIDialogHeader as xe, UIForm as pe, UIDialogBody as W, UIDialogFooter as ee, UIDialogFooterSubmit as ae, createAutocompleteOptions as Na, createSelectOptions as te, UIAutocomplete as Sa, UISelect as ne, UIButton as ka, UIBadge as le, UIColumnLayout as Ta, UIBadgeGroup as Fa } from "@wisemen/vue-core-design-system";
 import { useMutation as M, useQuery as Ie, useOffsetInfiniteQuery as $a, useKeysetInfiniteQuery as Ma } from "@wisemen/vue-core-api-utils";
 import { useForm as Z } from "formango";

package/dist/{IndividualDetailView-CRD2Z_3X.js → IndividualDetailView-4OENIyX3.js}

@@ -1,8 +1,8 @@
 import { defineComponent as n, openBlock as o, createBlock as r, unref as i, withCtx as s, createVNode as u } from "vue";
 import { useRouteParams as d } from "@vueuse/router";
 import { br as m } from "./uuid.util-SYJY4Bt5.js";
-import { _ as p } from "./CrmDetailView.vue_vue_type_script_setup_true_lang-Xwd_IT_R.js";
-import { ac as c } from "./index-DEBSTcsW.js";
+import { _ as p } from "./CrmDetailView.vue_vue_type_script_setup_true_lang-hKRJ0iTD.js";
+import { ac as c } from "./index-D0Wq9rrv.js";
 const k = /* @__PURE__ */ n({
   __name: "IndividualDetailView",
   props: {

package/dist/{index-DEBSTcsW.js → index-D0Wq9rrv.js}

@@ -4812,8 +4812,16 @@ const Ai = /* @__PURE__ */ k({
     }), r = x(() => {
       if (!o.result.value.isOk())
         return null;
-      const u = o.result.value.getValue()?.trim() ?? "";
-      return u === "" ? null : u;
+      const u = o.result.value.getValue();
+      if (u === null)
+        return null;
+      const m = typeof u == "string" ? {
+        label: u
+      } : u, _ = m.label.trim();
+      return _ === "" ? null : {
+        ...m,
+        label: _
+      };
     });
     async function l() {
       try {
@@ -4839,11 +4847,11 @@ const Ai = /* @__PURE__ */ k({
     }, {
       default: d(() => [
         s(a(ze), {
-          label: r.value,
-          icon: e.badge.icon,
-          color: e.badge.color,
-          dot: e.badge.dot,
-          variant: e.badge.variant,
+          label: r.value.label,
+          icon: r.value.icon ?? e.badge.icon,
+          color: r.value.color ?? e.badge.color,
+          dot: r.value.dot ?? e.badge.dot,
+          variant: r.value.variant ?? e.badge.variant,
           class: "max-w-full"
         }, null, 8, ["label", "icon", "color", "dot", "variant"])
       ]),
@@ -17469,7 +17477,7 @@ function qy(n) {
         }))
       },
       path: "/business/:businessUuid",
-      component: () => import("./BusinessDetailView-CHKBpSrI.js"),
+      component: () => import("./BusinessDetailView-DCLbk1zs.js"),
       redirect: {
         name: n[0].route.name
       },
@@ -17483,7 +17491,7 @@ function Oy(n) {
     {
       name: "deal-communication",
       path: "communication",
-      component: () => import("./DealCommunicationTabView-DsghmRPh.js")
+      component: () => import("./DealCommunicationTabView-DLpKFEzi.js")
     }
   ];
   return [
@@ -17496,7 +17504,7 @@ function Oy(n) {
         }))
       },
       path: "/deals/:dealUuid",
-      component: () => import("./DealDetailView-BWmuuBj8.js"),
+      component: () => import("./DealDetailView-fnpBvgUj.js"),
       redirect: {
         name: e[0].name
       },
@@ -17515,7 +17523,7 @@ function Ry(n) {
         }))
       },
       path: "/individual/:individualUuid",
-      component: () => import("./IndividualDetailView-CRD2Z_3X.js"),
+      component: () => import("./IndividualDetailView-4OENIyX3.js"),
       redirect: {
         name: n[0].route.name
       },

package/dist/index.d.ts

@@ -300,14 +300,15 @@ declare type GlobalSearchCollectionName = 'business' | 'individual' | 'user';
  * A consumer-provided badge rendered after the built-in badges in the
  * header of a detail sidebar.
  */
-declare interface HeaderBadge<TUuid extends string> extends Pick<UIBadgeProps, 'color' | 'dot' | 'icon' | 'variant'> {
+declare interface HeaderBadge<TUuid extends string> extends HeaderBadgeStyle {
     /**
-     * Returns the badge label. Return `null` or an empty string to hide the badge.
+     * Returns the badge label, or the label with styles that depend on the data.
+     * Return `null` or an empty label to hide the badge.
      * Invalidate the `wiseCrmHeaderBadge` query key to call it again.
      */
     getData: (context: {
         uuid: TUuid;
-    }) => Promise<string | null>;
+    }) => Promise<string | WiseCrmHeaderBadgeData | null>;
     /**
      * Unique per entity, used to cache the badge's data.
      */
@@ -316,6 +317,8 @@ declare interface HeaderBadge<TUuid extends string> extends Pick<UIBadgeProps, '
 
 declare type HeaderBadgeEntity = 'business' | 'deal' | 'individual';
 
+declare type HeaderBadgeStyle = Pick<UIBadgeProps, 'color' | 'dot' | 'icon' | 'variant'>;
+
 declare interface IndividualIndexQueryParams extends WithSearchQuery {
 }
 
@@ -563,6 +566,14 @@ export declare enum WiseCrmEntityType {
 
 export declare const WiseCrmFormCardSubmitButtonTransition: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 
+/**
+ * The resolved badge. Any style set here overrides the one on the badge,
+ * for example to pick the color from the entity's data.
+ */
+export declare interface WiseCrmHeaderBadgeData extends HeaderBadgeStyle {
+    label: string;
+}
+
 export declare const WiseCrmIndividualBillingInformationCard: DefineComponent<__VLS_Props_7, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_7> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 export declare const WiseCrmIndividualDialog: DefineComponent<__VLS_Props_9, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {

package/dist/index.js

@@ -1,4 +1,4 @@
-import { ae as i, af as r, ag as C, ah as m, ai as n, aj as t, ak as d, al as W, am as l, k as o, Z as u, an as g, ao as v, ap as p, aq as B, ar as D, as as c, at as I, au as f, av as h, y, h as T, j as b, aw as S, ax as w, ay as U } from "./index-DEBSTcsW.js";
+import { ae as i, af as r, ag as C, ah as m, ai as n, aj as t, ak as d, al as W, am as l, k as o, Z as u, an as g, ao as v, ap as p, aq as B, ar as D, as as c, at as I, au as f, av as h, y, h as T, j as b, aw as S, ax as w, ay as U } from "./index-D0Wq9rrv.js";
 import "zod";
 import { br as j } from "./uuid.util-SYJY4Bt5.js";
 export {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wisemen/wise-crm-web",
   "type": "module",
-  "version": "2.0.0-alpha.41",
+  "version": "2.0.0-alpha.42",
   "private": false,
   "description": "CRM frontend package with Vue 3 components, composables and types",
   "author": "Wisemen",