@wisemen/wise-crm-web 2.0.0-alpha.3 → 2.0.0-alpha.31

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-C49Ul2jK.js → BusinessDetailView-BKrRMyuW.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-D4yr-qw2.js";
-import { aV as c } from "./uuid.util-B9bkU4IX.js";
-import { _ } from "./CrmDetailView.vue_vue_type_script_setup_true_lang-CONdU2gO.js";
+import { _ as p } from "./index-DIg0NJqw.js";
+import { bq as c } from "./uuid.util-DIPbDJ-m.js";
+import { _ } from "./CrmDetailView.vue_vue_type_script_setup_true_lang-B6S4_83Z.js";
 const x = /* @__PURE__ */ n({
   __name: "BusinessDetailView",
   props: {

package/dist/{CrmDetailView.vue_vue_type_script_setup_true_lang-CONdU2gO.js → CrmDetailView.vue_vue_type_script_setup_true_lang-B6S4_83Z.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 b, createBlock as g, toValue as m, createCommentVNode as w } from "vue";
+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 { a1 as E, V as I, X as V, ab as T } from "./index-D4yr-qw2.js";
+import { d as E, f as T, T as I, a6 as V } from "./index-DIg0NJqw.js";
 import { useRoute as A, RouterView as H } from "vue-router";
 class U {
   /**
@@ -19,14 +19,14 @@ class U {
     return !1;
   }
 }
-const $ = { key: 0 }, j = { class: "flex h-dvh w-dvw flex-1 overflow-hidden" }, z = { class: "flex h-full min-w-100 flex-col" }, L = { class: "flex size-full flex-1 justify-center overflow-hidden bg-secondary" }, N = { class: "flex w-full flex-col" }, S = { class: "grid w-full grid-cols-3 p-lg" }, X = { class: "flex items-center justify-center" }, D = { class: "flex items-center justify-end" }, F = { class: "size-full overflow-y-auto" }, O = /* @__PURE__ */ v({
+const $ = { key: 0 }, j = { class: "flex h-dvh w-dvw flex-1 overflow-hidden" }, z = { class: "flex h-full min-w-100 flex-col" }, L = { class: "flex size-full flex-1 justify-center overflow-hidden bg-secondary" }, N = { class: "flex w-full flex-col" }, S = { class: "grid w-full grid-cols-3 p-lg" }, D = { class: "flex items-center justify-center" }, F = { class: "flex items-center justify-end" }, K = { class: "size-full overflow-y-auto" }, P = /* @__PURE__ */ v({
   __name: "CrmDetailView",
   props: {
     entityType: {},
     tabs: {}
   },
   setup(i) {
-    const a = i, o = h(null), c = E(), _ = I(), p = A();
+    const a = i, o = h(null), c = E(), _ = T(), p = A();
     return C("Escape", () => {
       const l = o.value?.$el;
       l && U.parentHasAriaHidden(l) || c.goToReturnRoute();
@@ -35,7 +35,7 @@ const $ = { key: 0 }, j = { class: "flex h-dvh w-dvw flex-1 overflow-hidden" },
         t("div", z, [
           x(l.$slots, "sidebar")
         ]),
-        r(V, {
+        r(I, {
           color: e(c).getEntityConfig(i.entityType)?.color ?? null,
           class: "relative flex flex-1 flex-col overflow-hidden"
         }, {
@@ -44,10 +44,10 @@ const $ = { key: 0 }, j = { class: "flex h-dvh w-dvw flex-1 overflow-hidden" },
               t("div", N, [
                 t("div", S, [
                   n[1] || (n[1] = t("div", null, null, -1)),
-                  t("div", X, [
+                  t("div", D, [
                     r(e(k), { variant: "button-border" }, {
                       default: f(() => [
-                        (d(!0), u(y, null, b(a.tabs, (s) => (d(), g(e(R), {
+                        (d(!0), u(y, null, g(a.tabs, (s) => (d(), w(e(R), {
                           key: m(s.label),
                           label: m(s.label),
                           to: {
@@ -59,21 +59,21 @@ const $ = { key: 0 }, j = { class: "flex h-dvh w-dvw flex-1 overflow-hidden" },
                       _: 1
                     })
                   ]),
-                  t("div", D, [
+                  t("div", F, [
                     r(e(B), {
                       ref_key: "closeButtonRef",
                       ref: o,
                       "class-config": {
                         root: "rounded-md shadow-lg"
                       },
-                      icon: e(T),
+                      icon: e(V),
                       label: "Close",
                       variant: "secondary",
                       onClick: n[0] || (n[0] = (s) => e(c).goToReturnRoute())
                     }, null, 8, ["icon"])
                   ])
                 ]),
-                t("div", F, [
+                t("div", K, [
                   r(e(H))
                 ])
               ])
@@ -82,9 +82,9 @@ const $ = { key: 0 }, j = { class: "flex h-dvh w-dvw flex-1 overflow-hidden" },
           _: 1
         }, 8, ["color"])
       ])
-    ])) : w("", !0);
+    ])) : b("", !0);
   }
 });
 export {
-  O as _
+  P as _
 };

package/dist/{DealCommunicationTabView-DNSRG5Xf.js → DealCommunicationTabView-BRTIEVN0.js}

@@ -1,88 +1,88 @@
-import { defineComponent as A, openBlock as t, createElementBlock as f, createElementVNode as n, createVNode as a, withCtx as s, toDisplayString as m, unref as e, createBlock as l, createCommentVNode as _, Fragment as v, renderList as g, normalizeClass as b, resolveDynamicComponent as k, computed as I } from "vue";
-import { useRouteParams as M } from "@vueuse/router";
+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, a as w, b as C, C as S, c as V, u as j, A as U } from "./index-D4yr-qw2.js";
-import { UIEmptyState as $ } from "@wisemen/vue-core-design-system";
-import { AnimatePresence as q, Motion as z } from "motion-v";
-import { AccordionRoot as B, AccordionItem as E, AccordionHeader as F, AccordionTrigger as H, AccordionContent as N } from "reka-ui";
-import { useI18n as P } from "vue-i18n";
-function Q(r) {
+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-DIg0NJqw.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";
+import { useI18n as N } from "vue-i18n";
+function P(r) {
   return L("mailIndex", {
     params: {
       queryParams: r.params
     },
-    queryFn: (o) => T.getAll({
+    queryFn: (l) => T.getAll({
       filters: r.params.filters.value,
-      pagination: o
+      pagination: l
     })
   });
 }
-const O = { class: "p-xl" }, R = { class: "overflow-hidden rounded-xl border border-secondary bg-primary shadow-lg" }, G = { class: "text-md font-medium" }, J = { class: "relative" }, K = { class: "sr-only" }, W = { class: "flex min-w-0 flex-1 items-center gap-sm" }, X = { class: "truncate" }, Y = { class: "flex items-center gap-sm" }, Z = { class: "flex flex-col items-end text-sm text-tertiary" }, ee = { class: "flex flex-col" }, te = ["innerHTML"], ne = /* @__PURE__ */ A({
+const O = { class: "p-xl" }, R = { class: "overflow-hidden rounded-xl border border-secondary bg-primary shadow-lg" }, G = { class: "text-md font-medium" }, J = { class: "relative" }, K = { class: "sr-only" }, W = { class: "flex min-w-0 flex-1 items-center gap-sm" }, X = { class: "truncate" }, Y = { class: "pointer-events-none flex items-center gap-sm" }, Z = { class: "flex flex-col items-end text-sm text-tertiary" }, ee = { class: "flex flex-col" }, te = ["innerHTML"], se = /* @__PURE__ */ C({
   __name: "DealCommunicationMailList",
   props: {
     mails: {}
   },
   setup(r) {
-    const o = r, c = P();
+    const l = r, c = N();
     function u(d) {
       return j().toDateTime(d.createdAt);
     }
-    function h(d) {
+    function x(d) {
       return d.to.join(", ");
     }
     return (d, ie) => (t(), f("div", O, [
-      n("div", R, [
+      s("div", R, [
         a(p, null, {
-          default: s(() => [
-            n("p", G, m(e(c).t("wise_crm.deal.communication.mail_list.title")), 1)
+          default: n(() => [
+            s("p", G, m(e(c).t("wise_crm.deal.communication.mail_list.title")), 1)
           ]),
           _: 1
         }),
-        o.mails.length === 0 ? (t(), l(e($), {
+        l.mails.length === 0 ? (t(), o(e(U), {
           key: 0,
           icon: e(w),
           title: e(c).t("wise_crm.deal.communication.mail_list.no_communication_sent"),
           description: e(c).t("wise_crm.deal.communication.mail_list.create_quote_instruction"),
           class: "h-120"
         }, null, 8, ["icon", "title", "description"])) : _("", !0),
-        o.mails.length > 0 ? (t(), l(e(B), {
+        l.mails.length > 0 ? (t(), o(e(z), {
           key: 1,
           collapsible: !0,
           type: "multiple",
           class: "flex flex-col gap-0"
         }, {
-          default: s(() => [
-            (t(!0), f(v, null, g(o.mails, (i, D) => (t(), l(e(E), {
+          default: n(() => [
+            (t(!0), f(g, null, v(l.mails, (i, D) => (t(), o(e(B), {
               key: i.uuid,
               value: i.uuid
             }, {
-              default: s(({ open: y }) => [
-                a(e(F), null, {
-                  default: s(() => [
-                    n("div", J, [
-                      a(e(H), { class: "absolute inset-0 rounded-none ring-brand-500 ring-offset-1 duration-200 outline-none focus-visible:ring-2" }, {
-                        default: s(() => [
-                          n("span", K, m(i.subject), 1)
+              default: n(({ open: y }) => [
+                a(e(E), null, {
+                  default: n(() => [
+                    s("div", J, [
+                      a(e(F), { class: "absolute inset-0 rounded-none ring-brand-500 ring-offset-1 duration-200 outline-none focus-visible:ring-2" }, {
+                        default: n(() => [
+                          s("span", K, m(i.subject), 1)
                         ]),
                         _: 2
                       }, 1024),
-                      n("div", {
+                      s("div", {
                         class: b([{
-                          "border-b border-secondary": D < o.mails.length - 1
+                          "border-b border-secondary": D < l.mails.length - 1
                         }, "px-2xl py-lg"])
                       }, [
-                        a(C, { justify: "between" }, {
-                          default: s(() => [
-                            n("div", W, [
-                              (t(), l(k(e(w)), { class: "size-4 shrink-0 text-secondary" })),
-                              n("p", X, m(i.subject), 1)
+                        a(A, { justify: "between" }, {
+                          default: n(() => [
+                            s("div", W, [
+                              (t(), o(k(e(w)), { class: "size-4 shrink-0 text-secondary" })),
+                              s("p", X, m(i.subject), 1)
                             ]),
-                            n("div", Y, [
-                              n("div", Z, [
-                                n("span", null, m(h(i)), 1),
-                                n("span", null, m(u(i)), 1)
+                            s("div", Y, [
+                              s("div", Z, [
+                                s("span", null, m(x(i)), 1),
+                                s("span", null, m(u(i)), 1)
                               ]),
-                              (t(), l(k(e(S)), {
+                              (t(), o(k(e(S)), {
                                 class: b([{
                                   "-rotate-180": y
                                 }, "size-4 shrink-0 text-secondary duration-300"])
@@ -96,14 +96,14 @@ const O = { class: "p-xl" }, R = { class: "overflow-hidden rounded-xl border bor
                   ]),
                   _: 2
                 }, 1024),
-                a(e(q), { initial: !1 }, {
-                  default: s(() => [
-                    y ? (t(), l(e(N), {
+                a(e($), { initial: !1 }, {
+                  default: n(() => [
+                    y ? (t(), o(e(H), {
                       key: 0,
                       class: "overflow-clip"
                     }, {
-                      default: s(() => [
-                        a(e(z), {
+                      default: n(() => [
+                        a(e(q), {
                           initial: {
                             opacity: 0,
                             height: 0,
@@ -127,15 +127,15 @@ const O = { class: "p-xl" }, R = { class: "overflow-hidden rounded-xl border bor
                             type: "spring"
                           }
                         }, {
-                          default: s(() => [
-                            n("div", ee, [
-                              i.attachments.length > 0 ? (t(), l(p, { key: 0 }, {
-                                default: s(() => [
-                                  a(C, null, {
-                                    default: s(() => [
-                                      (t(!0), f(v, null, g(i.attachments, (x) => (t(), l(V, {
-                                        key: x.uuid,
-                                        attachment: x
+                          default: n(() => [
+                            s("div", ee, [
+                              i.attachments.length > 0 ? (t(), o(p, { key: 0 }, {
+                                default: n(() => [
+                                  a(A, { class: "flex-wrap" }, {
+                                    default: n(() => [
+                                      (t(!0), f(g, null, v(i.attachments, (h) => (t(), o(V, {
+                                        key: h.uuid,
+                                        attachment: h
                                       }, null, 8, ["attachment"]))), 128))
                                     ]),
                                     _: 2
@@ -144,9 +144,9 @@ const O = { class: "p-xl" }, R = { class: "overflow-hidden rounded-xl border bor
                                 _: 2
                               }, 1024)) : _("", !0),
                               a(p, null, {
-                                default: s(() => [
-                                  n("div", {
-                                    class: "prose max-w-full py-3xl pb-xl",
+                                default: n(() => [
+                                  s("div", {
+                                    class: "prose prose-sm max-w-full py-3xl pb-xl",
                                     innerHTML: i.text
                                   }, null, 8, te)
                                 ]),
@@ -171,23 +171,23 @@ const O = { class: "p-xl" }, R = { class: "overflow-hidden rounded-xl border bor
       ])
     ]));
   }
-}), se = {
+}), ne = {
   key: 0,
   class: "p-xl"
-}, _e = /* @__PURE__ */ A({
+}, _e = /* @__PURE__ */ C({
   __name: "DealCommunicationTabView",
   setup(r) {
-    const o = M("dealUuid"), c = I(() => ({
-      dealUuid: o.value
-    })), u = Q({
+    const l = I("dealUuid"), c = M(() => ({
+      dealUuid: l.value
+    })), u = P({
       params: {
         filters: c
       }
     });
-    return (h, d) => (t(), f("div", null, [
-      e(u).isLoading.value ? (t(), f("div", se, [
-        a(U, { class: "h-150 w-full" })
-      ])) : e(u).result.value.isOk() ? (t(), l(ne, {
+    return (x, d) => (t(), f("div", null, [
+      e(u).isLoading.value ? (t(), f("div", ne, [
+        a(Q, { class: "h-150 w-full" })
+      ])) : e(u).result.value.isOk() ? (t(), o(se, {
         key: 1,
         mails: e(u).result.value.getValue().data
       }, null, 8, ["mails"])) : _("", !0)