@wisemen/wise-crm-web 2.0.0-alpha.27 → 2.0.0-alpha.29

package/README.md

@@ -0,0 +1,90 @@
+# @wisemen/wise-crm-web
+
+Vue 3 CRM package: business, individual and deal overviews, detail views, dialogs and widgets.
+
+## Extending the detail views
+
+The business and individual detail views can be extended with content from the host app in two places.
+
+### Custom tabs
+
+Tabs next to the detail sidebar are routes, registered through `useWiseCrmRoutes`. At least one tab is required for businesses and individuals. The tab component reads the entity uuid from the route params (`businessUuid` / `individualUuid` / `dealUuid`).
+
+```ts
+useWiseCrmRoutes({
+  businessTabRoutes: [
+    {
+      label: computed<string>(() => t('crm.business.tabs.information')),
+      route: {
+        name: 'crm-business-information',
+        path: 'information',
+        component: (): Component => import('./CrmBusinessInformationTabView.vue'),
+      },
+    },
+  ],
+  dealTabRoutes: [...],
+  individualTabRoutes: [...],
+})
+```
+
+### Custom sidebar sections
+
+Accordion sections rendered at the end of the sidebar's Overview tab, after the built-in sections. They show in both the detail view and the quick-view dialog. Register them through the `business` / `individual` options of `useWiseCrmConfig().init()`:
+
+```ts
+import type { WiseCrmSidebarSection } from '@wisemen/wise-crm-web'
+
+useWiseCrmConfig().init({
+  // ...
+  options: {
+    business: {
+      sidebarSections: [
+        {
+          icon: ShoppingCart01Icon,
+          key: 'orders',
+          label: computed<string>(() => t('crm.business.sidebar.orders')),
+          component: defineAsyncComponent(() => import('./BusinessOrdersSidebarSection.vue')),
+        },
+      ],
+    },
+    individual: {
+      sidebarSections: [...],
+    },
+    // ...
+  },
+})
+```
+
+| Field          | Description                                                                                                                       |
+| -------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| `key`          | Unique per entity; used as the accordion item value.                                                                              |
+| `label`        | Section header, a `ComputedRef<string>` so it follows the locale.                                                                 |
+| `icon`         | Section header icon.                                                                                                              |
+| `component`    | Section body.                                                                                                                     |
+| `useIsVisible` | Optional. Receives the component's props as a `ComputedRef` and returns a `ComputedRef<boolean>`; the section is hidden while it is `false`. |
+
+The component receives only the entity uuid. It fetches its own data and renders its own loading and empty state. Sections are open by default.
+
+```vue
+<script setup lang="ts">
+import type { WiseCrmBusinessUuid } from '@wisemen/wise-crm-web'
+
+const props = defineProps<{
+  businessUuid: WiseCrmBusinessUuid
+}>()
+</script>
+```
+
+Individual sections receive `individualUuid: WiseCrmIndividualUuid` instead. A component with the wrong props is a type error.
+
+`useIsVisible` is called once in the sidebar's setup, so it can use composables such as queries. Use it to hide a section that has nothing to show for this entity, rather than rendering an empty body under its header:
+
+```ts
+{
+  key: 'parent',
+  // ...
+  useIsVisible: (props) => useBusinessHasParent(computed(() => props.value.businessUuid)),
+}
+```
+
+A section that becomes visible after the sidebar has mounted still opens by default.

package/dist/{BusinessDetailView-CiKV_R78.js → BusinessDetailView-DAEwVRud.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-BdE_BLXy.js";
-import { bq as c } from "./uuid.util-8nyk7pzI.js";
-import { _ } from "./CrmDetailView.vue_vue_type_script_setup_true_lang-UxTnX2I8.js";
+import { _ as p } from "./index-BUpwoOnq.js";
+import { bq as c } from "./uuid.util-DeP0Xkdy.js";
+import { _ } from "./CrmDetailView.vue_vue_type_script_setup_true_lang-64gLoRcz.js";
 const x = /* @__PURE__ */ n({
   __name: "BusinessDetailView",
   props: {

package/dist/{CrmDetailView.vue_vue_type_script_setup_true_lang-UxTnX2I8.js → CrmDetailView.vue_vue_type_script_setup_true_lang-64gLoRcz.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 { d as E, f as T, T as I, a6 as V } from "./index-BdE_BLXy.js";
+import { d as E, f as T, T as I, a6 as V } from "./index-BUpwoOnq.js";
 import { useRoute as A, RouterView as H } from "vue-router";
 class U {
   /**

package/dist/{DealCommunicationTabView-Dv8DwZvL.js → DealCommunicationTabView-DoVmIMir.js}

@@ -1,7 +1,7 @@
 import { defineComponent as C, openBlock as t, createElementBlock as f, createElementVNode as s, createVNode as a, withCtx as n, toDisplayString as m, unref as e, createBlock as o, createCommentVNode as _, Fragment as g, renderList as v, normalizeClass as b, resolveDynamicComponent as k, computed as M } from "vue";
 import { useRouteParams as I } from "@vueuse/router";
 import { useOffsetInfiniteQuery as L } from "@wisemen/vue-core-api-utils";
-import { M as T, D as p, g as w, a as A, m as S, b as V, u as j, A as Q } from "./index-BdE_BLXy.js";
+import { M as T, D as p, g as w, a as A, m as S, b as V, u as j, A as Q } from "./index-BUpwoOnq.js";
 import { UIEmptyState as U } from "@wisemen/vue-core-design-system";
 import { AnimatePresence as $, Motion as q } from "motion-v";
 import { AccordionRoot as z, AccordionItem as B, AccordionHeader as E, AccordionTrigger as F, AccordionContent as H } from "reka-ui";

package/dist/{DealDetailView-BNWu5Dmn.js → DealDetailView-nZMP6Vjc.js}

@@ -1,9 +1,9 @@
 import { defineComponent as x, openBlock as d, createBlock as g, unref as e, ref as V, useTemplateRef as Se, createElementBlock as q, withCtx as r, createVNode as o, mergeProps as O, createElementVNode as S, toDisplayString as z, nextTick as ke, computed as w, createCommentVNode as F, Fragment as te, createTextVNode as ie, renderList as Fe, useModel as $e, mergeModels as Te } from "vue";
 import { useRouteParams as Me } from "@vueuse/router";
 import { useI18n as I } from "vue-i18n";
-import { bq as fe, bv as Ve, bx as qe, bA as Ee } from "./uuid.util-8nyk7pzI.js";
-import { _ as Le } from "./CrmDetailView.vue_vue_type_script_setup_true_lang-UxTnX2I8.js";
-import { c as k, d as pe, e as Oe, f as $, h as L, i as Qe, E as _e, C as ge, j as Ae, k as Be, l as Ke, n as je, o as R, g as Re, J as ze, p as Ge, q as re, r as Ye, I as Ze, s as ye, t as A, v as He, w as be, x as Je, y as Xe, U as We, z as ea, u as aa, B as ta, Q as na, F as la, G as oa, H as ia, K as se, L as he, N as ra, O as ue, P as sa, R as ua, S as ca, T as da, V as ve, W as ma, X as fa, Y as pa, Z as _a, $ as ga, a0 as ya, a1 as ba, a2 as ha, a3 as va, a4 as Ua, A as Ca } from "./index-BdE_BLXy.js";
+import { bq as fe, bv as Ve, bx as qe, bA as Ee } from "./uuid.util-DeP0Xkdy.js";
+import { _ as Le } from "./CrmDetailView.vue_vue_type_script_setup_true_lang-64gLoRcz.js";
+import { c as k, d as pe, e as Oe, f as $, h as L, i as Qe, E as _e, C as ge, j as Ae, k as Be, l as Ke, n as je, o as R, g as Re, J as ze, p as Ge, q as re, r as Ye, I as Ze, s as ye, t as A, v as He, w as be, x as Je, y as Xe, U as We, z as ea, u as aa, B as ta, Q as na, F as la, G as oa, H as ia, K as se, L as he, N as ra, O as ue, P as sa, R as ua, S as ca, T as da, V as ve, W as ma, X as fa, Y as pa, Z as _a, $ as ga, a0 as ya, a1 as ba, a2 as ha, a3 as va, a4 as Ua, A as Ca } from "./index-BUpwoOnq.js";
 import { useToast as Ue, useOverlay as H, UIConfirmDialog as wa, UIIconButton as ne, UITextField as G, toFormField as Q, UIDropdownMenu as Pa, UIDropdownMenuGroup as Da, UIDropdownMenuItem as ce, UIPhoneNumberField as de, UIFormLayout as le, UIFormFieldGroup as B, UIFormFieldGrid as K, UIFormDialog as Ce, UIDialogHeader as we, UIForm as me, UIDialogBody as J, UIDialogFooter as X, UIDialogFooterSubmit as W, createAutocompleteOptions as xa, createSelectOptions as ee, UIAutocomplete as Ia, UISelect as ae, UIButton as Na, UIBadge as Pe } from "@wisemen/vue-core-design-system";
 import { useMutation as T, useQuery as De, useOffsetInfiniteQuery as Sa, useKeysetInfiniteQuery as ka } from "@wisemen/vue-core-api-utils";
 import { useForm as Y } from "formango";

package/dist/{IndividualDetailView-u6SK4EhX.js → IndividualDetailView-BTcAGFHx.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 { bq as m } from "./uuid.util-8nyk7pzI.js";
-import { _ as p } from "./CrmDetailView.vue_vue_type_script_setup_true_lang-UxTnX2I8.js";
-import { a5 as c } from "./index-BdE_BLXy.js";
+import { bq as m } from "./uuid.util-DeP0Xkdy.js";
+import { _ as p } from "./CrmDetailView.vue_vue_type_script_setup_true_lang-64gLoRcz.js";
+import { a5 as c } from "./index-BUpwoOnq.js";
 const k = /* @__PURE__ */ n({
   __name: "IndividualDetailView",
   props: {