@nivaro/react 0.3.36 → 0.3.37

package/dist/shared/components/layout-editor/settings/EntrySection.js

@@ -1,27 +1,27 @@
 import { jsxs as f, Fragment as _, jsx as r } from "react/jsx-runtime";
 import { useState as x, useRef as v, useEffect as N } from "react";
 import { badgeClasses as b } from "../../../lib/entry-badge-style.js";
-import { entryConfigOf as w, ENTRY_THRESHOLD_DEFAULT as S, sanitizeEntryConfig as E, ENTRY_THRESHOLD_MAX as T, ENTRY_BADGE_TAG_MAX as B, BADGE_COLORS as D } from "../../../lib/entry-config.js";
-import { cn as p } from "../../../lib/utils.js";
+import { entryConfigOf as w, ENTRY_THRESHOLD_DEFAULT as S, sanitizeEntryConfig as T, ENTRY_THRESHOLD_MAX as E, ENTRY_BADGE_TAG_MAX as B, BADGE_COLORS as D } from "../../../lib/entry-config.js";
+import { cn as h } from "../../../lib/utils.js";
 import { useEntryEditor as A } from "../entry/entry-editor-context.js";
 import { presetSummary as R, withPresets as O } from "../entry/presets.js";
-import { Setting as d, Toggle as m, quietText as g, smallBtn as h, inputCls as k } from "./controls.js";
-function U(o) {
+import { Setting as d, Toggle as p, quietText as g, smallBtn as m, inputCls as k } from "./controls.js";
+function U(n) {
   var l;
-  const n = w(o.layout), u = A(), t = (e, a, c = !1) => {
-    const C = E({ ...n, ...e });
-    (c ? o.setText : o.set)({ entry_config: C }, a);
-  }, s = ((l = n.tab_order) == null ? void 0 : l.length) ?? 0, i = n.presets ?? [];
+  const o = w(n.layout), u = A(), t = (e, a, c = !1) => {
+    const C = T({ ...o, ...e });
+    (c ? n.setText : n.set)({ entry_config: C }, a);
+  }, s = ((l = o.tab_order) == null ? void 0 : l.length) ?? 0, i = o.presets ?? [];
   return /* @__PURE__ */ f(_, { children: [
     /* @__PURE__ */ r(
       d,
       {
         k: "layout.focus_first",
         control: /* @__PURE__ */ r(
-          m,
+          p,
           {
             label: "Start on the first empty required field",
-            checked: n.focus_first === !0,
+            checked: o.focus_first === !0,
             onChange: (e) => t(
               { focus_first: e || void 0 },
               e ? "Start on the first empty required field" : "Stop starting on a required field"
@@ -35,10 +35,10 @@ function U(o) {
       {
         k: "layout.enter_next",
         control: /* @__PURE__ */ r(
-          m,
+          p,
           {
             label: "Enter moves to the next field",
-            checked: n.enter_next === !0,
+            checked: o.enter_next === !0,
             onChange: (e) => t(
               { enter_next: e || void 0 },
               e ? "Make Enter move to the next field" : "Make Enter save again"
@@ -57,7 +57,7 @@ function U(o) {
             {
               type: "button",
               "data-tab-order-start": "",
-              className: h,
+              className: m,
               disabled: u.tabOrderActive,
               onClick: u.startTabOrder,
               children: s ? "Change order on the canvas" : "Set order on the canvas"
@@ -67,7 +67,7 @@ function U(o) {
             "button",
             {
               type: "button",
-              className: h,
+              className: m,
               onClick: () => t({ tab_order: void 0 }, "Clear the tab order"),
               children: "Clear"
             }
@@ -81,10 +81,10 @@ function U(o) {
       {
         k: "layout.adaptive_mode",
         control: /* @__PURE__ */ r(
-          m,
+          p,
           {
             label: "Guided steps for new people",
-            checked: n.adaptive === !0,
+            checked: o.adaptive === !0,
             onChange: (e) => t(
               { adaptive: e || void 0 },
               e ? "Show steps to new people" : "Stop switching between steps and tabs"
@@ -100,21 +100,39 @@ function U(o) {
         control: /* @__PURE__ */ r(
           F,
           {
-            value: n.adaptive_threshold ?? S,
+            value: o.adaptive_threshold ?? S,
             label: "Records before tabs",
-            disabled: n.adaptive !== !0,
+            disabled: o.adaptive !== !0,
             onChange: (e) => t({ adaptive_threshold: e }, "Change records before tabs", !0),
-            onBlur: o.flush
+            onBlur: n.flush
           }
         )
       }
     ),
+    /* @__PURE__ */ r(
+      d,
+      {
+        k: "layout.tour",
+        control: /* @__PURE__ */ r(
+          p,
+          {
+            label: "First-use tour",
+            checked: o.tour === !0,
+            onChange: (e) => t(
+              { tour: e || void 0 },
+              e ? "Turn on the first-use tour" : "Turn off the first-use tour"
+            )
+          }
+        ),
+        note: o.tour ? "Each section is a step: its name, its help text, or the fields it holds. Section help text reads best here." : void 0
+      }
+    ),
     /* @__PURE__ */ r(d, { k: "layout.badge", children: /* @__PURE__ */ r(
       G,
       {
-        config: n,
+        config: o,
         onChange: (e, a) => t({ badge: e }, "Change the form badge", a),
-        onBlur: o.flush
+        onBlur: n.flush
       }
     ) }),
     /* @__PURE__ */ r(
@@ -122,10 +140,10 @@ function U(o) {
       {
         k: "layout.glossary",
         control: /* @__PURE__ */ r(
-          m,
+          p,
           {
             label: "Glossary tooltips in help text",
-            checked: n.glossary !== !1,
+            checked: o.glossary !== !1,
             onChange: (e) => t(
               { glossary: e ? void 0 : !1 },
               e ? "Turn on glossary tooltips" : "Turn off glossary tooltips"
@@ -142,7 +160,7 @@ function U(o) {
           "button",
           {
             type: "button",
-            className: h,
+            className: m,
             disabled: i.length === 0,
             onClick: () => t({ presets: void 0 }, "Delete all presets"),
             children: "Delete all"
@@ -155,20 +173,20 @@ function U(o) {
             children: [
               /* @__PURE__ */ f("span", { className: "min-w-0", children: [
                 /* @__PURE__ */ r("span", { className: "block truncate text-[12.5px] font-medium text-slate-800 dark:text-foreground", children: e.name }),
-                /* @__PURE__ */ r("span", { className: p(g, "block truncate"), children: R(e) })
+                /* @__PURE__ */ r("span", { className: h(g, "block truncate"), children: R(e) })
               ] }),
               /* @__PURE__ */ r(
                 "button",
                 {
                   type: "button",
-                  className: h,
+                  className: m,
                   "aria-label": `Delete preset ${e.name}`,
                   onClick: () => {
                     var a;
                     return t(
                       {
                         presets: (a = O(
-                          n,
+                          o,
                           i.filter((c) => c.id !== e.id)
                         )) == null ? void 0 : a.presets
                       },
@@ -187,45 +205,45 @@ function U(o) {
   ] });
 }
 function F({
-  value: o,
-  onChange: n,
+  value: n,
+  onChange: o,
   onBlur: u,
   label: t,
   disabled: s
 }) {
-  const [i, l] = x(String(o)), e = v(!1);
+  const [i, l] = x(String(n)), e = v(!1);
   return N(() => {
-    e.current || l(String(o));
-  }, [o]), /* @__PURE__ */ r(
+    e.current || l(String(n));
+  }, [n]), /* @__PURE__ */ r(
     "input",
     {
       type: "number",
       min: 1,
-      max: T,
+      max: E,
       "aria-label": t,
       disabled: s,
       value: i,
-      className: p(k, "w-20"),
+      className: h(k, "w-20"),
       onFocus: () => {
         e.current = !0;
       },
       onChange: (a) => {
         l(a.target.value);
         const c = Number(a.target.value);
-        Number.isFinite(c) && c >= 1 && n(c);
+        Number.isFinite(c) && c >= 1 && o(c);
       },
       onBlur: () => {
-        e.current = !1, l(String(o)), u();
+        e.current = !1, l(String(n)), u();
       }
     }
   );
 }
 function G({
-  config: o,
-  onChange: n,
+  config: n,
+  onChange: o,
   onBlur: u
 }) {
-  const t = o.badge, [s, i] = x((t == null ? void 0 : t.tag) ?? ""), l = v(!1);
+  const t = n.badge, [s, i] = x((t == null ? void 0 : t.tag) ?? ""), l = v(!1);
   N(() => {
     l.current || i((t == null ? void 0 : t.tag) ?? "");
   }, [t == null ? void 0 : t.tag]);
@@ -240,12 +258,12 @@ function G({
           placeholder: "Short tag, e.g. Sparing",
           maxLength: B,
           value: s,
-          className: p(k, "min-w-0 flex-1"),
+          className: h(k, "min-w-0 flex-1"),
           onFocus: () => {
             l.current = !0;
           },
           onChange: (a) => {
-            i(a.target.value), n(a.target.value.trim() ? { tag: a.target.value, color: e } : void 0, !0);
+            i(a.target.value), o(a.target.value.trim() ? { tag: a.target.value, color: e } : void 0, !0);
           },
           onBlur: () => {
             l.current = !1, u();
@@ -256,7 +274,7 @@ function G({
         "span",
         {
           "data-badge-preview": "",
-          className: p(
+          className: h(
             "inline-flex h-5 shrink-0 items-center rounded-full px-2 text-[11px] font-medium",
             b(t.color)
           ),
@@ -277,8 +295,8 @@ function G({
             "aria-label": y(a),
             "data-tip": s.trim() ? y(a) : "Type the badge text first",
             disabled: !s.trim(),
-            onClick: () => n({ tag: s, color: a }, !1),
-            className: p(
+            onClick: () => o({ tag: s, color: a }, !1),
+            className: h(
               "h-5 w-5 rounded-full border transition-shadow disabled:cursor-not-allowed disabled:opacity-50",
               b(a),
               e === a && !!t && "ring-2 ring-nvr-cyan/60 ring-offset-1 ring-offset-white dark:ring-offset-card"
@@ -290,7 +308,7 @@ function G({
     )
   ] });
 }
-const y = (o) => o.charAt(0).toUpperCase() + o.slice(1);
+const y = (n) => n.charAt(0).toUpperCase() + n.slice(1);
 export {
   U as EntrySection
 };

package/dist/shared/components/layout-editor/settings/LayoutSection.js

@@ -1,17 +1,18 @@
-import { jsxs as m, Fragment as f, jsx as o } from "react/jsx-runtime";
-import { Setting as b, Segmented as g, quietText as c, PickList as _, Toggle as h } from "./controls.js";
-import { changeLabel as y, toggleLabel as w } from "./section-props.js";
-import { useFieldSources as L, numericFieldNames as S, fieldOptions as k } from "./settings-api.js";
+import { jsxs as f, Fragment as g, jsx as t } from "react/jsx-runtime";
+import { entryConfigOf as y, sanitizeEntryConfig as h } from "../../../lib/entry-config.js";
+import { Setting as c, Segmented as b, quietText as m, PickList as _, Toggle as k } from "./controls.js";
+import { changeLabel as v, toggleLabel as w } from "./section-props.js";
+import { useFieldSources as C, numericFieldNames as L, fieldOptions as S } from "./settings-api.js";
 import { ToggleSetting as u } from "./ToggleSetting.js";
-function F(e) {
-  const { layout: l } = e, a = l.tab_mode === "steps" ? "steps" : "tabs";
-  return /* @__PURE__ */ m(f, { children: [
-    /* @__PURE__ */ o(
-      b,
+function D(e) {
+  const { layout: o } = e, a = o.tab_mode === "steps" ? "steps" : "tabs";
+  return /* @__PURE__ */ f(g, { children: [
+    /* @__PURE__ */ t(
+      c,
       {
         k: "layout.tab_mode",
-        control: /* @__PURE__ */ o(
-          g,
+        control: /* @__PURE__ */ t(
+          b,
           {
             ariaLabel: "Loose tabs show as",
             value: a,
@@ -19,52 +20,82 @@ function F(e) {
               { value: "tabs", label: "Tabs" },
               { value: "steps", label: "Steps" }
             ],
-            onChange: (n) => e.set({ tab_mode: n }, y("layout.tab_mode"))
+            onChange: (l) => e.set({ tab_mode: l }, v("layout.tab_mode"))
           }
         )
       }
     ),
-    /* @__PURE__ */ o(u, { k: "layout.validate_before_next", props: e }),
-    /* @__PURE__ */ o(u, { k: "layout.accordion_mode", props: e }),
-    /* @__PURE__ */ o(v, { ...e })
+    /* @__PURE__ */ t(u, { k: "layout.validate_before_next", props: e }),
+    /* @__PURE__ */ t(u, { k: "layout.accordion_mode", props: e }),
+    /* @__PURE__ */ t(p, { ...e }),
+    /* @__PURE__ */ t(x, { ...e })
   ] });
 }
-function v(e) {
-  const { fields: l, columns: a, relations: n } = L(e.collection), i = S(e.collection, l, a, n), r = e.layout.row_order_field ? String(e.layout.row_order_field) : null, d = k(l, i);
-  return /* @__PURE__ */ o(
-    b,
+function p(e) {
+  const o = y(e.layout), a = o.density === "compact" ? "compact" : "comfortable";
+  return /* @__PURE__ */ t(
+    c,
+    {
+      k: "layout.density",
+      control: /* @__PURE__ */ t(
+        b,
+        {
+          ariaLabel: "Density",
+          value: a,
+          options: [
+            { value: "comfortable", label: "Comfortable" },
+            { value: "compact", label: "Compact" }
+          ],
+          onChange: (l) => e.set(
+            {
+              entry_config: h({
+                ...o,
+                density: l === "compact" ? "compact" : void 0
+              })
+            },
+            l === "compact" ? "Make the form compact" : "Make the form comfortable"
+          )
+        }
+      )
+    }
+  );
+}
+function x(e) {
+  const { fields: o, columns: a, relations: l } = C(e.collection), i = L(e.collection, o, a, l), r = e.layout.row_order_field ? String(e.layout.row_order_field) : null, s = S(o, i);
+  return /* @__PURE__ */ t(
+    c,
     {
       k: "layout.row_order_field",
-      control: /* @__PURE__ */ o(
-        h,
+      control: /* @__PURE__ */ t(
+        k,
         {
           label: "Let people reorder rows",
           checked: !!r,
           disabled: !r && i.length === 0,
-          onChange: (t) => {
-            var s;
+          onChange: (n) => {
+            var d;
             return e.set(
-              { row_order_field: t ? ((s = d[0]) == null ? void 0 : s.value) ?? null : null },
-              w("layout.row_order_field", t)
+              { row_order_field: n ? ((d = s[0]) == null ? void 0 : d.value) ?? null : null },
+              w("layout.row_order_field", n)
             );
           }
         }
       ),
-      children: r ? /* @__PURE__ */ m("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ o("span", { className: c, children: "Order is saved in" }),
-        /* @__PURE__ */ o(
+      children: r ? /* @__PURE__ */ f("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ t("span", { className: m, children: "Order is saved in" }),
+        /* @__PURE__ */ t(
           _,
           {
             ariaLabel: "Order field",
             value: r,
-            options: d,
-            onChange: (t) => t && e.set({ row_order_field: t }, "Change the field rows are ordered by")
+            options: s,
+            onChange: (n) => n && e.set({ row_order_field: n }, "Change the field rows are ordered by")
           }
         )
-      ] }) : i.length === 0 ? /* @__PURE__ */ o("p", { className: c, children: "This collection has no number field to keep the order in." }) : null
+      ] }) : i.length === 0 ? /* @__PURE__ */ t("p", { className: m, children: "This collection has no number field to keep the order in." }) : null
     }
   );
 }
 export {
-  F as LayoutSection
+  D as LayoutSection
 };