@agile-team/mach-report 2.8.3 → 2.8.4

package/dist/designer.js

@@ -1,122 +1,266 @@
-import { ref as j, computed as A, shallowRef as be, onBeforeUnmount as pe, watch as W, defineComponent as ye, getCurrentInstance as _e, nextTick as ne, openBlock as _, createElementBlock as C, unref as e, createElementVNode as n, createVNode as le, toDisplayString as a, normalizeClass as fe, createTextVNode as R, createCommentVNode as N, withKeys as ke, withModifiers as Ce, Fragment as K, renderList as ie, withDirectives as ue, isRef as ce, vModelSelect as we, vModelText as ge, createBlock as he } from "vue";
-import { provideMachReportConfig as Se, createLocalFetcher as xe, ReportPreview as Ee } from "@agile-team/mach-report/vue";
-import { _ as Y, a as Me } from "./_plugin-vue_export-helper-DPbiz14D.js";
-import { resolveGridLayout as ve, parseReportTemplate as I, serializeReportTemplate as U, validateReportTemplateDocument as Te } from "@agile-team/mach-report";
-function Ae(v, M, c, y) {
-  const f = j(0), s = j(""), w = j([]), $ = A(() => v.value.template.pages.flatMap((d, r) => d.components.flatMap((i, m) => i.kind === "list" ? [{ component: i, pageIndex: r, componentIndex: m }] : []))), S = A(() => $.value[f.value]?.component), p = A(() => {
-    const d = S.value;
-    if (!d) return [];
-    const r = d.columns.map((i) => i.headerStyle?.align ?? i.headerAlign ?? d.headerStyle?.align ?? d.headerAlign ?? i.style?.align ?? "center");
-    if (d.headerGrid && M())
-      for (const i of ve(d.headerGrid, d.widthMm, 100).cells)
-        for (let m = i.ci; m < i.ci + (i.cell.colSpan ?? 1); m++) r[m] = i.cell.style?.align ?? "left";
-    return r;
-  }), g = A(() => {
-    const d = s.value.trim().toLocaleLowerCase().split(/\s+/).filter(Boolean);
-    return (S.value?.columns ?? []).flatMap((r, i) => {
-      const m = `${r.header} ${r.field}`.toLocaleLowerCase();
-      return d.every((x) => m.includes(x)) ? [{ column: r, index: i }] : [];
+import { defineComponent as Ce, openBlock as p, createElementBlock as y, Fragment as X, renderList as oe, toDisplayString as s, nextTick as Y, ref as D, watch as te, onMounted as Ee, onBeforeUnmount as be, computed as j, shallowRef as Ae, getCurrentInstance as Te, unref as e, createElementVNode as n, createVNode as q, normalizeClass as me, createTextVNode as P, createCommentVNode as H, withKeys as ge, withModifiers as De, withDirectives as fe, isRef as he, vModelSelect as $e, vModelText as _e, createBlock as ke } from "vue";
+import { provideMachReportConfig as je, createLocalFetcher as Ve, ReportPreview as Le } from "@agile-team/mach-report/vue";
+import { _ as Se, a as W } from "./_plugin-vue_export-helper-8SL1F89S.js";
+import { resolveGridLayout as pe, parseReportTemplate as U, serializeReportTemplate as ee, validateReportTemplateDocument as Re } from "@agile-team/mach-report";
+const Be = ["aria-label"], Pe = ["data-align", "aria-label", "title", "aria-checked", "tabindex", "onClick", "onKeydown"], Oe = { key: 0 }, Ie = {
+  key: 1,
+  viewBox: "0 0 20 20",
+  fill: "none",
+  "aria-hidden": "true"
+}, Je = {
+  key: 0,
+  d: "M3 4h14M3 8h9M3 12h14M3 16h9"
+}, Ne = {
+  key: 1,
+  d: "M3 4h14M6 8h8M3 12h14M6 16h8"
+}, Ge = {
+  key: 2,
+  d: "M3 4h14M8 8h9M3 12h14M8 16h9"
+}, He = {
+  key: 3,
+  d: "M3 4h14M3 8h14M3 12h14M3 16h14"
+}, Ue = /* @__PURE__ */ Ce({
+  __name: "AlignmentControl",
+  props: {
+    modelValue: {},
+    label: {},
+    labels: {},
+    autoLabel: {},
+    allowAuto: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(r, { emit: w }) {
+    const c = r, g = w, u = () => c.allowAuto ? ["auto", "left", "center", "right", "justify"] : ["left", "center", "right", "justify"];
+    async function i(b, $) {
+      if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(b.key)) return;
+      b.preventDefault();
+      const _ = u(), k = _.indexOf($), C = b.key === "Home" ? 0 : b.key === "End" ? _.length - 1 : (k + (b.key === "ArrowRight" ? 1 : -1) + _.length) % _.length;
+      g("update:modelValue", _[C]);
+      const A = b.currentTarget.parentElement;
+      await Y(), A?.querySelector(`[data-align="${_[C]}"]`)?.focus();
+    }
+    return (b, $) => (p(), y("div", {
+      class: "mr-designer-alignment",
+      role: "radiogroup",
+      "aria-label": r.label
+    }, [
+      (p(!0), y(X, null, oe(u(), (m) => (p(), y("button", {
+        key: m,
+        type: "button",
+        role: "radio",
+        "data-align": m,
+        "aria-label": r.labels[m],
+        title: r.labels[m],
+        "aria-checked": r.modelValue === m,
+        tabindex: r.modelValue === m ? 0 : -1,
+        onClick: (_) => g("update:modelValue", m),
+        onKeydown: (_) => i(_, m)
+      }, [
+        m === "auto" ? (p(), y("span", Oe, s(r.autoLabel), 1)) : (p(), y("svg", Ie, [
+          m === "left" ? (p(), y("path", Je)) : m === "center" ? (p(), y("path", Ne)) : m === "right" ? (p(), y("path", Ge)) : (p(), y("path", He))
+        ]))
+      ], 40, Pe))), 128))
+    ], 8, Be));
+  }
+}), we = /* @__PURE__ */ Se(Ue, [["__scopeId", "data-v-c85770c4"]]);
+function Fe(r, w, c) {
+  if (!r.length) return;
+  const g = Math.max(0, r.indexOf(w)), i = {
+    ArrowDown: Math.min(g + 1, r.length - 1),
+    ArrowUp: Math.max(g - 1, 0),
+    Home: 0,
+    End: r.length - 1
+  }[c];
+  return i === void 0 ? void 0 : r[i];
+}
+function ze(r, w, c) {
+  const g = D(!1), u = D(r.activeIndex.value), i = D(null), b = D(null), $ = D(null), m = D(null);
+  function _(f = !1) {
+    const o = m.value, d = o?.querySelector(
+      `button[data-column-index="${u.value}"]`
+    );
+    if (!o || !d) return;
+    f && d.focus({ preventScroll: !0 });
+    const v = o.getBoundingClientRect(), h = d.getBoundingClientRect(), x = v.top + o.clientTop, t = x + o.clientHeight;
+    h.top < x ? o.scrollTop += h.top - x : h.bottom > t && (o.scrollTop += h.bottom - t);
+  }
+  async function k(f = !1) {
+    g.value && (g.value = !1, f && (await Y(), i.value?.focus({ preventScroll: !0 })));
+  }
+  async function C() {
+    if (g.value) return k(!0);
+    const f = c.value.map((o) => o.index);
+    u.value = f.includes(r.activeIndex.value) ? r.activeIndex.value : f[0] ?? -1, g.value = !0, await Y(), $.value?.focus({ preventScroll: !0 }), _();
+  }
+  function A(f) {
+    r.activate(f), k(!0);
+  }
+  function S(f) {
+    g.value && (f.preventDefault(), f.stopPropagation(), k(!0));
+  }
+  async function G(f) {
+    const o = Fe(
+      c.value.map((d) => d.index),
+      u.value,
+      f.key
+    );
+    o !== void 0 && (u.value = o, f.preventDefault(), await Y(), _(!0));
+  }
+  async function Z(f) {
+    if (!["ArrowDown", "ArrowUp", "Enter"].includes(f.key)) return;
+    f.preventDefault(), f.stopPropagation();
+    const o = c.value.map((d) => d.index);
+    if (o.length) {
+      if (f.key === "Enter") {
+        o.includes(u.value) && A(u.value);
+        return;
+      }
+      f.key === "ArrowUp" && (u.value = o.at(-1)), await Y(), _(!0);
+    }
+  }
+  function O(f) {
+    const o = f.target;
+    !g.value || b.value?.contains(o) || i.value?.contains(o) || k();
+  }
+  function V(f) {
+    const o = f.relatedTarget;
+    !o || b.value?.contains(o) || i.value?.contains(o) || k();
+  }
+  return te(c, (f) => {
+    f.some((o) => o.index === u.value) || (u.value = f[0]?.index ?? -1);
+  }), te(w, () => {
+    k();
+  }), Ee(() => document.addEventListener("pointerdown", O)), be(() => document.removeEventListener("pointerdown", O)), {
+    open: g,
+    cursor: u,
+    trigger: i,
+    panel: b,
+    search: $,
+    list: m,
+    toggle: C,
+    close: k,
+    choose: A,
+    escape: S,
+    navigate: G,
+    searchKeydown: Z,
+    leave: V
+  };
+}
+function Ke(r, w, c, g) {
+  const u = D(0), i = D(""), b = D([]), $ = j(() => r.value.template.pages.flatMap((o, d) => o.components.flatMap((v, h) => v.kind === "list" ? [{ component: v, pageIndex: d, componentIndex: h }] : []))), m = j(() => $.value[u.value]?.component), _ = j(() => {
+    const o = m.value;
+    if (!o) return [];
+    const d = o.columns.map((v) => v.headerStyle?.align ?? v.headerAlign ?? o.headerStyle?.align ?? o.headerAlign ?? v.style?.align ?? "center");
+    if (o.headerGrid && w())
+      for (const v of pe(o.headerGrid, o.widthMm, 100).cells)
+        for (let h = v.ci; h < v.ci + (v.cell.colSpan ?? 1); h++) d[h] = v.cell.style?.align ?? "left";
+    return d;
+  }), k = j(() => {
+    const o = i.value.trim().toLocaleLowerCase().split(/\s+/).filter(Boolean);
+    return (m.value?.columns ?? []).flatMap((d, v) => {
+      const h = `${d.header} ${d.field}`.toLocaleLowerCase();
+      return o.every((x) => h.includes(x)) ? [{ column: d, index: v }] : [];
     });
   });
-  function k(d, r) {
-    w.value = r ? [.../* @__PURE__ */ new Set([...w.value, d])] : w.value.filter((i) => i !== d);
+  function C(o, d) {
+    b.value = d ? [.../* @__PURE__ */ new Set([...b.value, o])] : b.value.filter((v) => v !== o);
   }
-  function T(d) {
-    for (const r of g.value) k(r.index, d);
+  function A(o) {
+    for (const d of k.value) C(d.index, o);
   }
-  function h() {
-    w.value = [];
+  function S() {
+    b.value = [];
   }
-  function B(d, r, i) {
+  function G(o, d, v) {
     if (!c()) return;
-    const m = S.value?.columns[d];
-    m && (Object.assign(m, { [r]: r === "widthMm" ? Number(i) : i }), r === "header" && O(d, String(i)), r === "headerAlign" && D(d, i), r === "widthMm" && Q(), y());
-  }
-  function Q() {
-    const d = $.value[f.value];
-    if (!d) return;
-    const r = d.component, i = v.value.template.pages[d.pageIndex], m = r.columns.map((x) => x.widthMm);
-    r.headerGrid && (r.headerGrid.colWidthsMm = m), i.layout === "wide" && m.every((x) => Number.isFinite(x) && x > 0) && (r.widthMm = m.reduce((x, t) => x + t, 0), i.widthMm = Math.max(...i.components.map((x) => x.leftMm + x.widthMm)) + (i.marginRightMm ?? 0));
-  }
-  function O(d, r) {
-    const i = S.value;
-    if (!i?.headerGrid) return;
-    const x = ve(i.headerGrid, i.widthMm, 100).cells.filter(({ ci: t, cell: L }) => t <= d && t + (L.colSpan ?? 1) > d).slice(-1)[0];
-    x && (Object.assign(x.cell, { text: r, rawText: r, value: r }), i.columns.slice(x.ci, x.ci + (x.cell.colSpan ?? 1)).forEach((t) => {
-      t.header = r;
+    const h = m.value?.columns[o];
+    h && (Object.assign(h, { [d]: d === "widthMm" ? Number(v) : v }), d === "header" && O(o, String(v)), d === "headerAlign" && V(o, v), d === "widthMm" && Z(), g());
+  }
+  function Z() {
+    const o = $.value[u.value];
+    if (!o) return;
+    const d = o.component, v = r.value.template.pages[o.pageIndex], h = d.columns.map((x) => x.widthMm);
+    d.headerGrid && (d.headerGrid.colWidthsMm = h), v.layout === "wide" && h.every((x) => Number.isFinite(x) && x > 0) && (d.widthMm = h.reduce((x, t) => x + t, 0), v.widthMm = Math.max(...v.components.map((x) => x.leftMm + x.widthMm)) + (v.marginRightMm ?? 0));
+  }
+  function O(o, d) {
+    const v = m.value;
+    if (!v?.headerGrid) return;
+    const x = pe(v.headerGrid, v.widthMm, 100).cells.filter(({ ci: t, cell: I }) => t <= o && t + (I.colSpan ?? 1) > o).slice(-1)[0];
+    x && (Object.assign(x.cell, { text: d, rawText: d, value: d }), v.columns.slice(x.ci, x.ci + (x.cell.colSpan ?? 1)).forEach((t) => {
+      t.header = d;
     }));
   }
-  function D(d, r) {
-    const i = S.value, m = i?.columns[d];
-    if (m?.headerStyle?.align !== void 0 && (m.headerStyle = { ...m.headerStyle, align: r }), !i?.headerGrid) return;
-    const t = ve(i.headerGrid, i.widthMm, 100).cells.filter(({ ci: L, cell: V }) => L <= d && L + (V.colSpan ?? 1) > d).slice(-1)[0];
-    t && (t.cell.style = { ...t.cell.style, align: r }, i.columns.slice(t.ci, t.ci + (t.cell.colSpan ?? 1)).forEach((L) => {
-      L.headerAlign = r, L.headerStyle?.align !== void 0 && (L.headerStyle = { ...L.headerStyle, align: r });
+  function V(o, d) {
+    const v = m.value, h = v?.columns[o];
+    if (h?.headerStyle?.align !== void 0 && (h.headerStyle = { ...h.headerStyle, align: d }), !v?.headerGrid) return;
+    const t = pe(v.headerGrid, v.widthMm, 100).cells.filter(({ ci: I, cell: R }) => I <= o && I + (R.colSpan ?? 1) > o).slice(-1)[0];
+    t && (t.cell.style = { ...t.cell.style, align: d }, v.columns.slice(t.ci, t.ci + (t.cell.colSpan ?? 1)).forEach((I) => {
+      I.headerAlign = d, I.headerStyle?.align !== void 0 && (I.headerStyle = { ...I.headerStyle, align: d });
     }));
   }
-  function P(d, r) {
-    if (!(!c() || d === "headerAlign" && r === "auto")) {
-      for (const i of w.value) {
-        const m = S.value?.columns[i];
-        m && (Object.assign(m, { [d]: r }), d === "headerAlign" && D(i, r));
+  function f(o, d) {
+    if (!(!c() || o === "headerAlign" && d === "auto")) {
+      for (const v of b.value) {
+        const h = m.value?.columns[v];
+        h && (Object.assign(h, { [o]: d }), o === "headerAlign" && V(v, d));
       }
-      y();
+      g();
     }
   }
-  return { selected: f, query: s, selectedColumns: w, lists: $, activeList: S, headerAlignments: p, visibleColumns: g, toggleColumn: k, selectVisible: T, clearSelection: h, setColumn: B, alignColumns: P };
+  return { selected: u, query: i, selectedColumns: b, lists: $, activeList: m, headerAlignments: _, visibleColumns: k, toggleColumn: C, selectVisible: A, clearSelection: S, setColumn: G, alignColumns: f };
 }
-function De(v, M = { entries: 100, bytes: 16 * 1024 * 1024 }) {
-  const c = j([v]), y = j(0), f = A(() => y.value > 0), s = A(() => y.value + 1 < c.value.length), w = A(() => c.value[y.value]);
-  function $(g) {
-    c.value = [g], y.value = 0;
-  }
-  function S(g) {
-    if (c.value[y.value] === g) return;
-    const k = c.value.slice(0, y.value + 1);
-    k.push(g);
-    let T = k.reduce((h, B) => h + B.length * 2, 0);
-    for (; k.length > 1 && (k.length > M.entries || T > M.bytes); ) T -= k.shift().length * 2;
-    c.value = k, y.value = c.value.length - 1;
-  }
-  function p(g) {
-    if (!(g < 0 ? !f.value : !s.value))
-      return y.value += g, c.value[y.value];
-  }
-  return { canUndo: f, canRedo: s, current: w, reset: $, record: S, move: p };
+function qe(r, w = { entries: 100, bytes: 16 * 1024 * 1024 }) {
+  const c = D([r]), g = D(0), u = j(() => g.value > 0), i = j(() => g.value + 1 < c.value.length), b = j(() => c.value[g.value]);
+  function $(k) {
+    c.value = [k], g.value = 0;
+  }
+  function m(k) {
+    if (c.value[g.value] === k) return;
+    const C = c.value.slice(0, g.value + 1);
+    C.push(k);
+    let A = C.reduce((S, G) => S + G.length * 2, 0);
+    for (; C.length > 1 && (C.length > w.entries || A > w.bytes); ) A -= C.shift().length * 2;
+    c.value = C, g.value = c.value.length - 1;
+  }
+  function _(k) {
+    if (!(k < 0 ? !u.value : !i.value))
+      return g.value += k, c.value[g.value];
+  }
+  return { canUndo: u, canRedo: i, current: b, reset: $, record: m, move: _ };
 }
-function je(v) {
-  const M = be(null), c = j(!1);
-  let y, f = 0;
-  function s(S) {
-    y?.(S), y = void 0, M.value = null;
-  }
-  function w() {
-    f++, s(!1), c.value = !1;
-  }
-  async function $(S) {
-    w();
-    const p = f, g = v();
+function We(r) {
+  const w = Ae(null), c = D(!1);
+  let g, u = 0;
+  function i(m) {
+    g?.(m), g = void 0, w.value = null;
+  }
+  function b() {
+    u++, i(!1), c.value = !1;
+  }
+  async function $(m) {
+    b();
+    const _ = u, k = r();
     c.value = !0;
     try {
-      const k = await new Promise((T, h) => {
-        if (y = T, !g) {
-          M.value = S;
+      const C = await new Promise((A, S) => {
+        if (g = A, !k) {
+          w.value = m;
           return;
         }
-        Promise.resolve().then(() => f === p ? g(S) : !1).then((B) => {
-          f === p && s(B === !0);
-        }, (B) => {
-          f === p && (y = void 0, M.value = null, h(B));
+        Promise.resolve().then(() => u === _ ? k(m) : !1).then((G) => {
+          u === _ && i(G === !0);
+        }, (G) => {
+          u === _ && (g = void 0, w.value = null, S(G));
         });
       });
-      return f === p && k === !0;
+      return u === _ && C === !0;
     } finally {
-      f === p && (c.value = !1);
+      u === _ && (c.value = !1);
     }
   }
-  return pe(w), { confirmation: M, pending: c, decide: s, request: $, cancel: w };
+  return be(b), { confirmation: w, pending: c, decide: i, request: $, cancel: b };
 }
-const Re = {
+const Qe = {
   title: "报表模板属性编辑器",
   heading: "模板属性",
   unpublished: "未发布",
@@ -149,7 +293,7 @@ const Re = {
   applyJson: "校验并应用 JSON",
   note: "字段映射应与数据源契约一致。此编辑器维护模板属性；保存由接入方提供的版本服务处理。",
   invalid: "请先修正模板错误，再预览或保存。"
-}, $e = {
+}, Xe = {
   undo: "撤销",
   redo: "重做",
   columnsSearch: "搜索列名或字段",
@@ -181,14 +325,26 @@ const Re = {
   templateRevision: "当前修订",
   readonly: "只读",
   ready: "可编辑",
-  previewTitle: "实时预览"
-}, Be = { ...Re, ...$e };
-function Le(v, M) {
-  const c = j(I(v.modelValue)), y = j(U(c.value)), f = j(U(c.value)), s = j(""), w = j(!1), $ = A(() => ({ ...Be, ...v.messages })), S = A(() => ({
+  previewTitle: "实时预览",
+  contentGroup: "内容",
+  formatGroup: "格式",
+  autoShort: "自动",
+  previousColumn: "上一字段",
+  nextColumn: "下一字段",
+  closeDirectory: "关闭字段目录",
+  technicalDetails: "标识与修订",
+  fieldPosition: "当前字段",
+  previewFieldDirectory: "定位字段"
+}, Ye = {
+  ...Qe,
+  ...Xe
+};
+function Ze(r, w) {
+  const c = D(U(r.modelValue)), g = D(ee(c.value)), u = D(ee(c.value)), i = D(""), b = D(!1), $ = j(() => ({ ...Ye, ...r.messages })), m = j(() => ({
     showExport: !1,
     showPrint: !1,
     showPdfWindow: !1,
-    ...v.preview,
+    ...r.preview,
     theme: {
       shellBg: "#f1f5f9",
       shellFg: "#334155",
@@ -200,183 +356,170 @@ function Le(v, M) {
       btnHoverBg: "#eff6ff",
       btnHoverFg: "#1d4ed8",
       btnActiveBg: "#2563eb",
-      ...v.preview?.theme
+      ...r.preview?.theme
     }
   }));
-  Se({ get defaults() {
-    return S.value;
+  je({ get defaults() {
+    return m.value;
   } });
-  let p, g = 0;
-  const k = A(() => Te(c.value)), T = A(() => {
+  let _, k = 0;
+  const C = j(() => Re(c.value)), A = j(() => {
     try {
-      return U(c.value) !== y.value;
+      return ee(c.value) !== g.value;
     } catch {
       return !0;
     }
-  }), h = j(f.value), B = A(() => f.value !== h.value), Q = A(() => T.value || f.value !== h.value), O = () => JSON.stringify({ document: c.value, json: f.value, appliedJson: h.value }), D = De(O()), P = je(() => v.beforeDiscard), d = A(() => w.value || P.pending.value), r = () => !v.readonly && !d.value && !B.value, i = Ae(c, () => k.value.ok, r, q), { selected: m, lists: x, activeList: t, headerAlignments: L, setColumn: V } = i;
-  W(m, () => i.clearSelection());
-  const z = A(() => k.value.ok ? xe({ draft: { template: c.value.template, datasets: v.datasets ?? {}, params: [] } }) : void 0);
-  function E() {
-    g++, p?.abort(), p = void 0, w.value = !1;
-  }
-  let H = 0;
-  async function J(u = "replace", o) {
-    if (!Q.value) return !0;
-    const l = O();
+  }), S = D(u.value), G = j(() => u.value !== S.value), Z = j(() => A.value || u.value !== S.value), O = () => JSON.stringify({ document: c.value, json: u.value, appliedJson: S.value }), V = qe(O()), f = We(() => r.beforeDiscard), o = j(() => b.value || f.pending.value), d = () => !r.readonly && !o.value && !G.value, v = Ke(c, () => C.value.ok, d, ne), { selected: h, lists: x, activeList: t, headerAlignments: I, setColumn: R } = v;
+  te(h, () => v.clearSelection());
+  const Q = j(() => C.value.ok ? Ve({ draft: { template: c.value.template, datasets: r.datasets ?? {}, params: [] } }) : void 0);
+  function T() {
+    k++, _?.abort(), _ = void 0, b.value = !1;
+  }
+  let F = 0;
+  async function z(M = "replace", L) {
+    if (!Z.value) return !0;
+    const E = O();
     try {
-      return await P.request({
-        reason: u,
+      return await f.request({
+        reason: M,
         document: JSON.parse(JSON.stringify(c.value)),
-        replacement: o ? I(o) : void 0,
+        replacement: L ? U(L) : void 0,
         pendingLocalChanges: !0
-      }) && l === O();
-    } catch (b) {
-      return s.value = b instanceof Error ? b.message : String(b), !1;
+      }) && E === O();
+    } catch (K) {
+      return i.value = K instanceof Error ? K.message : String(K), !1;
     }
   }
-  function oe(u) {
-    E(), c.value = u, y.value = U(u), f.value = y.value, h.value = f.value, s.value = "", m.value = 0, i.clearSelection(), D.reset(O());
+  function se(M) {
+    T(), c.value = M, g.value = ee(M), u.value = g.value, S.value = u.value, i.value = "", h.value = 0, v.clearSelection(), V.reset(O());
   }
-  W(() => v.modelValue, async (u) => {
-    let o;
+  te(() => r.modelValue, async (M) => {
+    let L;
     try {
-      o = I(u);
-    } catch (b) {
-      s.value = b instanceof Error ? b.message : String(b);
+      L = U(M);
+    } catch (K) {
+      i.value = K instanceof Error ? K.message : String(K);
       return;
     }
     try {
-      if (U(o) === U(c.value)) return;
+      if (ee(L) === ee(c.value)) return;
     } catch {
     }
-    const l = ++H;
-    if (E(), !await J("replace", o)) {
-      l === H && k.value.ok && M("update:modelValue", I(c.value));
+    const E = ++F;
+    if (T(), !await z("replace", L)) {
+      E === F && C.value.ok && w("update:modelValue", U(c.value));
       return;
     }
-    l === H && oe(o);
-  }), pe(() => {
-    H++, E();
+    E === F && se(L);
+  }), be(() => {
+    F++, T();
   });
-  function q() {
-    P.cancel(), s.value = "", k.value.ok && (f.value = U(c.value), h.value = f.value, M("update:modelValue", I(c.value))), D.record(O());
+  function ne() {
+    f.cancel(), i.value = "", C.value.ok && (u.value = ee(c.value), S.value = u.value, w("update:modelValue", U(c.value))), V.record(O());
   }
-  function ae(u) {
-    r() && (c.value.name = u, q());
+  function ae(M) {
+    d() && (c.value.name = M, ne());
   }
-  function Z(u) {
-    r() && (c.value.description = u, q());
+  function B(M) {
+    d() && (c.value.description = M, ne());
   }
-  function X() {
-    if (!(v.readonly || d.value))
+  function ie() {
+    if (!(r.readonly || o.value))
       try {
-        const u = I(f.value);
-        if (u.id !== c.value.id) throw new Error("属性编辑不允许更换模板 ID，请另存为新模板");
-        if (u.revision !== c.value.revision) throw new Error("修订号由保存服务管理，不能在 JSON 中修改");
-        c.value = u, m.value = 0, i.clearSelection(), q();
-      } catch (u) {
-        s.value = u instanceof Error ? u.message : String(u);
+        const M = U(u.value);
+        if (M.id !== c.value.id) throw new Error("属性编辑不允许更换模板 ID，请另存为新模板");
+        if (M.revision !== c.value.revision) throw new Error("修订号由保存服务管理，不能在 JSON 中修改");
+        c.value = M, h.value = 0, v.clearSelection(), ne();
+      } catch (M) {
+        i.value = M instanceof Error ? M.message : String(M);
       }
   }
-  async function G() {
-    d.value || v.readonly || !await J("reset") || (oe(I(y.value)), M("update:modelValue", I(c.value)));
+  async function ue() {
+    o.value || r.readonly || !await z("reset") || (se(U(g.value)), w("update:modelValue", U(c.value)));
   }
-  function ee(u) {
-    if (d.value || v.readonly) return;
-    D.record(O());
-    const o = D.move(u);
-    if (!o) return;
-    P.cancel();
-    const l = JSON.parse(o);
-    c.value = l.document, f.value = l.json, h.value = l.appliedJson, s.value = "", m.value = 0, i.clearSelection(), k.value.ok && M("update:modelValue", I(c.value));
-  }
-  async function se() {
-    if (!v.save || !r() || !k.value.ok) return;
-    const u = ++g;
-    p = new AbortController(), w.value = !0, s.value = "";
-    const o = I(c.value);
+  function re(M) {
+    if (o.value || r.readonly) return;
+    V.record(O());
+    const L = V.move(M);
+    if (!L) return;
+    f.cancel();
+    const E = JSON.parse(L);
+    c.value = E.document, u.value = E.json, S.value = E.appliedJson, i.value = "", h.value = 0, v.clearSelection(), C.value.ok && w("update:modelValue", U(c.value));
+  }
+  async function de() {
+    if (!r.save || !d() || !C.value.ok) return;
+    const M = ++k;
+    _ = new AbortController(), b.value = !0, i.value = "";
+    const L = U(c.value);
     try {
-      const l = I(await v.save(o, { expectedRevision: o.revision, signal: p.signal }));
-      if (u !== g) return;
-      if (l.id !== o.id) throw new Error("保存服务返回了其他模板的文档");
-      c.value = l, y.value = U(l), f.value = y.value, h.value = f.value, D.reset(O()), M("saved", I(l)), M("update:modelValue", I(l));
-    } catch (l) {
-      u === g && (s.value = l instanceof Error ? l.message : String(l));
+      const E = U(await r.save(L, { expectedRevision: L.revision, signal: _.signal }));
+      if (M !== k) return;
+      if (E.id !== L.id) throw new Error("保存服务返回了其他模板的文档");
+      c.value = E, g.value = ee(E), u.value = g.value, S.value = u.value, V.reset(O()), w("saved", U(E)), w("update:modelValue", U(E));
+    } catch (E) {
+      M === k && (i.value = E instanceof Error ? E.message : String(E));
     } finally {
-      u === g && (w.value = !1, p = void 0);
+      M === k && (b.value = !1, _ = void 0);
     }
   }
-  const re = A(() => D.canUndo.value || O() !== D.current.value), de = A(() => D.canRedo.value && O() === D.current.value);
-  return { ...i, canUndo: re, canRedo: de, undo: () => ee(-1), redo: () => ee(1), pendingLocalChanges: Q, jsonPending: B, blocked: d, confirmation: P.confirmation, decideDiscard: P.decide, guardChanges: J, draft: c, json: f, selected: m, error: s, saving: w, dirty: T, validation: k, lists: x, activeList: t, headerAlignments: L, previewOptions: S, fetcher: z, messages: $, setName: ae, setDescription: Z, setColumn: V, applyJson: X, reset: G, save: se };
+  const ce = j(() => V.canUndo.value || O() !== V.current.value), ve = j(() => V.canRedo.value && O() === V.current.value);
+  return { ...v, canUndo: ce, canRedo: ve, undo: () => re(-1), redo: () => re(1), pendingLocalChanges: Z, jsonPending: G, blocked: o, confirmation: f.confirmation, decideDiscard: f.decide, guardChanges: z, draft: c, json: u, selected: h, error: i, saving: b, dirty: A, validation: C, lists: x, activeList: t, headerAlignments: I, previewOptions: m, fetcher: Q, messages: $, setName: ae, setDescription: B, setColumn: R, applyJson: ie, reset: ue, save: de };
 }
-function Ve(v, M, c, y) {
-  const f = j("fields"), s = j(v.value[0]?.index ?? -1), w = A(() => {
-    const p = c.value?.columns[s.value];
-    return p ? { column: p, index: s.value } : void 0;
+function et(r, w) {
+  const c = D("fields"), g = () => w.value?.columns.length ? 0 : -1, u = D(g()), i = j(() => {
+    const m = w.value?.columns[u.value];
+    return m ? { column: m, index: u.value } : void 0;
   });
-  W(y, () => {
-    v.value.some((p) => p.index === s.value) || (s.value = v.value[0]?.index ?? -1);
-  }), W(M, () => {
-    s.value = v.value[0]?.index ?? -1;
-  }), W(c, (p) => {
-    p?.columns[s.value] || (s.value = v.value[0]?.index ?? -1);
+  te(r, () => {
+    u.value = g();
+  }), te(w, (m) => {
+    m?.columns[u.value] || (u.value = g());
   });
-  function $(p) {
-    v.value.some((g) => g.index === p) && (s.value = p);
+  function b(m) {
+    w.value?.columns[m] && (u.value = m);
   }
-  function S(p) {
-    const g = v.value;
-    if (!g.length) return;
-    const k = Math.max(
+  function $(m) {
+    const _ = w.value?.columns.length ?? 0;
+    _ && (u.value = Math.max(
       0,
-      g.findIndex((B) => B.index === s.value)
-    ), h = {
-      ArrowDown: Math.min(k + 1, g.length - 1),
-      ArrowUp: Math.max(k - 1, 0),
-      Home: 0,
-      End: g.length - 1
-    }[p];
-    if (h !== void 0)
-      return s.value = g[h].index, s.value;
-  }
-  return { section: f, activeIndex: s, activeColumn: w, activate: $, moveColumn: S };
+      Math.min(_ - 1, u.value + m)
+    ));
+  }
+  return { section: c, activeIndex: u, activeColumn: i, activate: b, stepColumn: $ };
 }
-const Oe = ["aria-label", "aria-busy"], Ie = { class: "mr-designer-bar" }, Je = { class: "mr-designer-heading" }, Ne = { class: "mr-designer-actions" }, Pe = { class: "mr-designer-history" }, He = ["aria-label", "title", "disabled"], Ge = ["aria-label", "title", "disabled"], Fe = ["disabled"], Ue = ["disabled"], ze = ["aria-label"], qe = { class: "mr-designer-body" }, Ke = { class: "mr-designer-inspector" }, We = ["aria-label"], Qe = ["id", "aria-selected", "aria-controls", "tabindex", "onClick"], Xe = ["id", "aria-labelledby"], Ye = {
+const tt = ["aria-label", "aria-busy"], nt = { class: "mr-designer-bar" }, lt = { class: "mr-designer-heading" }, at = ["aria-label"], ot = ["id", "aria-selected", "aria-controls", "tabindex", "onClick"], st = { class: "mr-designer-actions" }, it = { class: "mr-designer-history" }, rt = ["aria-label", "title", "disabled"], ut = ["aria-label", "title", "disabled"], dt = ["disabled"], ct = ["disabled"], vt = ["aria-label"], mt = { class: "mr-designer-body" }, gt = { class: "mr-designer-inspector" }, ft = ["id", "aria-labelledby"], ht = {
   key: 0,
   class: "mr-designer-area"
-}, Ze = ["value"], et = {
-  key: 1,
-  class: "mr-designer-columns"
-}, tt = { class: "mr-designer-directory-heading" }, nt = { class: "mr-designer-search" }, lt = ["aria-label", "placeholder"], ot = ["aria-label", "title"], at = { class: "mr-designer-column-tools" }, st = ["disabled"], it = {
+}, pt = ["value"], bt = { class: "mr-designer-current" }, yt = ["aria-expanded", "aria-controls"], _t = { class: "mr-designer-current-name" }, kt = { class: "mr-designer-directory-entry" }, wt = { class: "mr-designer-field-position" }, Ct = ["aria-label"], St = ["aria-label", "title", "disabled"], xt = ["aria-label", "title", "disabled"], Mt = ["disabled", "aria-label"], Et = { class: "mr-designer-property-group" }, At = ["value"], Tt = ["value"], Dt = { class: "mr-designer-property-group" }, $t = { class: "mr-designer-format-pair" }, jt = { class: "mr-designer-stacked" }, Vt = ["value"], Lt = { class: "mr-designer-stacked" }, Rt = ["value"], Bt = { value: "identifier" }, Pt = { value: "dimension" }, Ot = { value: "measure" }, It = { value: "date" }, Jt = { value: "text" }, Nt = { class: "mr-designer-control-row" }, Gt = { class: "mr-designer-control-row" }, Ht = { class: "mr-designer-toggle" }, Ut = ["checked"], Ft = ["id", "aria-label"], zt = { class: "mr-designer-directory-heading" }, Kt = ["aria-label"], qt = { class: "mr-designer-search" }, Wt = ["aria-label", "placeholder"], Qt = ["aria-label", "title"], Xt = { class: "mr-designer-column-tools" }, Yt = ["disabled"], Zt = {
   key: 1,
   role: "status"
-}, rt = { key: 2 }, dt = ["aria-label"], ut = ["aria-label", "checked", "disabled", "onChange"], ct = ["data-column-index", "aria-pressed", "tabindex", "onClick"], vt = { class: "mr-designer-column-number" }, mt = { class: "mr-designer-column-name" }, ft = {
+}, en = { key: 2 }, tn = ["aria-label"], nn = ["aria-label", "checked", "disabled", "onChange"], ln = ["data-column-index", "aria-pressed", "tabindex", "onClick"], an = { class: "mr-designer-column-number" }, on = { class: "mr-designer-column-name" }, sn = {
   key: 0,
   role: "status",
   class: "mr-designer-empty"
-}, gt = {
+}, rn = {
   key: 0,
   class: "mr-designer-batch"
-}, ht = ["aria-label", "disabled"], pt = { value: "" }, bt = { value: "auto" }, yt = { value: "left" }, _t = { value: "center" }, kt = { value: "right" }, Ct = { value: "justify" }, wt = ["aria-label", "disabled"], St = { value: "" }, xt = { value: "left" }, Et = { value: "center" }, Mt = { value: "right" }, Tt = { value: "justify" }, At = ["disabled"], Dt = ["value"], jt = ["value"], Rt = ["value"], $t = ["value"], Bt = { value: "identifier" }, Lt = { value: "dimension" }, Vt = { value: "measure" }, Ot = { value: "date" }, It = { value: "text" }, Jt = ["value"], Nt = { value: "auto" }, Pt = { value: "left" }, Ht = { value: "center" }, Gt = { value: "right" }, Ft = { value: "justify" }, Ut = ["value"], zt = { value: "left" }, qt = { value: "center" }, Kt = { value: "right" }, Wt = { value: "justify" }, Qt = { class: "mr-designer-toggle" }, Xt = ["checked"], Yt = {
+}, un = ["aria-label", "disabled"], dn = { value: "" }, cn = { value: "auto" }, vn = { value: "left" }, mn = { value: "center" }, gn = { value: "right" }, fn = { value: "justify" }, hn = ["aria-label", "disabled"], pn = { value: "" }, bn = { value: "left" }, yn = { value: "center" }, _n = { value: "right" }, kn = { value: "justify" }, wn = {
   key: 2,
   role: "status",
   class: "mr-designer-empty"
-}, Zt = { class: "mr-designer-stacked" }, en = ["value", "disabled"], tn = { class: "mr-designer-stacked" }, nn = ["value", "disabled"], ln = { class: "mr-designer-identity" }, on = { class: "mr-designer-note" }, an = { class: "mr-designer-note" }, sn = { class: "mr-designer-stacked" }, rn = ["aria-label", "disabled"], dn = ["disabled"], un = {
+}, Cn = { class: "mr-designer-stacked" }, Sn = ["value", "disabled"], xn = { class: "mr-designer-stacked" }, Mn = ["value", "disabled"], En = { class: "mr-designer-technical" }, An = { class: "mr-designer-identity" }, Tn = { class: "mr-designer-stacked mr-designer-json-label" }, Dn = ["aria-label", "disabled"], $n = ["disabled"], jn = {
   key: 3,
   role: "status",
   class: "mr-designer-note mr-designer-pending"
-}, cn = ["aria-label"], vn = {
+}, Vn = ["aria-label"], Ln = {
   key: 0,
   role: "alert",
   class: "mr-designer-error"
-}, mn = {
+}, Rn = {
   key: 1,
   role: "alert",
   class: "mr-designer-error"
-}, fn = {
+}, Bn = {
   key: 3,
   class: "mr-designer-note mr-designer-invalid"
-}, gn = /* @__PURE__ */ ye({
+}, Pn = /* @__PURE__ */ Ce({
   __name: "ReportTemplateEditor",
   props: {
     modelValue: {},
@@ -388,132 +531,137 @@ const Oe = ["aria-label", "aria-busy"], Ie = { class: "mr-designer-bar" }, Je =
     save: { type: Function }
   },
   emits: ["update:modelValue", "saved"],
-  setup(v, { expose: M, emit: c }) {
-    const y = v, f = c, s = Le(y, (u, o) => {
-      f(u === "saved" ? "saved" : "update:modelValue", o);
+  setup(r, { expose: w, emit: c }) {
+    const g = r, u = c, i = Ze(g, (J, a) => {
+      u(J === "saved" ? "saved" : "update:modelValue", a);
     }), {
-      draft: w,
+      draft: b,
       json: $,
-      selected: S,
-      error: p,
-      saving: g,
-      pendingLocalChanges: k,
-      jsonPending: T,
-      blocked: h,
-      confirmation: B,
-      canUndo: Q,
+      selected: m,
+      error: _,
+      saving: k,
+      pendingLocalChanges: C,
+      jsonPending: A,
+      blocked: S,
+      confirmation: G,
+      canUndo: Z,
       canRedo: O,
-      validation: D,
-      lists: P,
-      activeList: d,
-      visibleColumns: r,
-      query: i,
-      selectedColumns: m,
+      validation: V,
+      lists: f,
+      activeList: o,
+      visibleColumns: d,
+      query: v,
+      selectedColumns: h,
       fetcher: x,
       messages: t
-    } = s, L = Ve(
-      r,
-      S,
-      d,
-      i
-    ), { section: V, activeIndex: z, activeColumn: E } = L, H = `mr-designer-${_e()?.uid ?? 0}`, J = ["fields", "template", "advanced"], oe = A(
-      () => g.value ? t.value.saving : y.readonly ? t.value.readonly : k.value ? t.value.dirty : t.value.ready
-    ), q = j(null), ae = j(null), Z = j(null);
-    W(V, async (u) => {
-      if (await ne(), Z.value && (Z.value.scrollTop = 0), u !== "fields") return;
-      const o = ae.value, l = o?.querySelector(
-        `button[data-column-index="${z.value}"]`
-      );
-      if (!o || !l) return;
-      const b = o.getBoundingClientRect(), F = l.getBoundingClientRect(), te = b.top + o.clientTop, me = te + o.clientHeight;
-      F.top < te ? o.scrollTop += F.top - te : F.bottom > me && (o.scrollTop += F.bottom - me);
+    } = i, I = et(m, o), { section: R, activeIndex: Q, activeColumn: T } = I, F = `mr-designer-${Te()?.uid ?? 0}`, z = ["fields", "template", "advanced"], se = j(
+      () => k.value ? t.value.saving : g.readonly ? t.value.readonly : C.value ? t.value.dirty : t.value.ready
+    ), ne = D(null), ae = D(null), B = ze(I, R, d), {
+      open: ie,
+      cursor: ue,
+      trigger: re,
+      panel: de,
+      search: ce,
+      list: ve
+    } = B;
+    te(R, async () => {
+      await Y(), ae.value && (ae.value.scrollTop = 0);
     });
-    let X = null;
-    W(B, async (u) => {
-      u ? (X = document.activeElement, await ne(), q.value?.focus()) : (await ne(), X?.isConnected && X.focus(), X = null);
-    }), M({
+    const M = j(() => ({
+      auto: t.value.auto,
+      left: t.value.left,
+      center: t.value.center,
+      right: t.value.right,
+      justify: t.value.justify
+    }));
+    let L = null;
+    te(G, async (J) => {
+      J ? (L = document.activeElement, await Y(), ne.value?.focus()) : (await Y(), L?.isConnected && L.focus(), L = null);
+    }), w({
       get pendingLocalChanges() {
-        return k.value;
+        return C.value;
       },
       get saving() {
-        return g.value;
+        return k.value;
       },
       get blocked() {
-        return h.value;
+        return S.value;
       },
-      guardChanges: s.guardChanges,
-      reset: s.reset,
-      save: s.save
+      guardChanges: i.guardChanges,
+      reset: i.reset,
+      save: i.save
     });
-    function G(u) {
-      return u.target.value;
+    function E(J) {
+      return J.target.value;
     }
-    function ee(u) {
-      return u.target.checked;
+    function K(J) {
+      return J.target.checked;
     }
-    function se(u, o) {
-      const l = u.target;
-      s.alignColumns(
-        o,
+    function ye(J, a) {
+      const l = J.target;
+      i.alignColumns(
+        a,
         l.value
       ), l.value = "";
     }
-    async function re(u) {
-      const o = L.moveColumn(u.key);
-      if (o === void 0) return;
-      u.preventDefault();
-      const l = u.currentTarget.closest(
-        ".mr-designer-column-list"
-      );
-      await ne();
-      const b = l?.querySelector(
-        `button[data-column-index="${o}"]`
-      );
-      b?.focus({ preventScroll: !0 }), b?.scrollIntoView({ block: "nearest" });
-    }
-    async function de(u) {
+    async function xe(J) {
       const l = {
         ArrowRight: 1,
         ArrowLeft: -1,
-        Home: -J.length,
-        End: J.length
-      }[u.key];
+        Home: -z.length,
+        End: z.length
+      }[J.key];
       if (l === void 0) return;
-      u.preventDefault();
-      const b = J.indexOf(V.value), F = u.key === "Home" ? 0 : u.key === "End" ? J.length - 1 : (b + l + J.length) % J.length;
-      V.value = J[F];
-      const te = u.currentTarget.parentElement;
-      await ne(), te?.querySelector(`#${H}-tab-${V.value}`)?.focus();
+      J.preventDefault();
+      const N = z.indexOf(R.value), le = J.key === "Home" ? 0 : J.key === "End" ? z.length - 1 : (N + l + z.length) % z.length;
+      R.value = z[le];
+      const Me = J.currentTarget.parentElement;
+      await Y(), Me?.querySelector(`#${F}-tab-${R.value}`)?.focus();
     }
-    return (u, o) => (_(), C("section", {
+    return (J, a) => (p(), y("section", {
       class: "mr-designer",
       "aria-label": e(t).title,
-      "aria-busy": e(g)
+      "aria-busy": e(k)
     }, [
-      n("header", Ie, [
-        n("div", Je, [
-          le(Y, {
+      n("header", nt, [
+        n("div", lt, [
+          q(W, {
             name: "columns",
-            size: 18
+            size: 15
           }),
-          n("div", null, [
-            n("strong", null, a(e(t).heading), 1),
-            n("span", {
-              class: fe({ "mr-designer-dirty": e(k) })
-            }, a(oe.value), 3)
-          ])
+          n("strong", null, s(e(t).heading), 1),
+          n("span", {
+            class: me({ "mr-designer-dirty": e(C) })
+          }, s(se.value), 3)
         ]),
-        n("div", Ne, [
-          n("div", Pe, [
+        n("nav", {
+          class: "mr-designer-tabs",
+          role: "tablist",
+          "aria-label": e(t).sectionsLabel
+        }, [
+          (p(), y(X, null, oe(z, (l) => n("button", {
+            id: `${F}-tab-${l}`,
+            key: l,
+            type: "button",
+            role: "tab",
+            "aria-selected": e(R) === l,
+            "aria-controls": `${F}-panel-${l}`,
+            tabindex: e(R) === l ? 0 : -1,
+            onClick: (N) => R.value = l,
+            onKeydown: xe
+          }, s(e(t)[`${l}Section`]), 41, ot)), 64))
+        ], 8, at),
+        n("div", st, [
+          n("div", it, [
             n("button", {
               type: "button",
               class: "mr-designer-icon-button",
               "aria-label": e(t).undo,
               title: e(t).undo,
-              disabled: v.readonly || e(h) || !e(Q),
-              onClick: o[0] || (o[0] = //@ts-ignore
-              (...l) => e(s).undo && e(s).undo(...l))
-            }, [...o[25] || (o[25] = [
+              disabled: r.readonly || e(S) || !e(Z),
+              onClick: a[0] || (a[0] = //@ts-ignore
+              (...l) => e(i).undo && e(i).undo(...l))
+            }, [...a[34] || (a[34] = [
               n("svg", {
                 viewBox: "0 0 24 24",
                 fill: "none",
@@ -521,16 +669,16 @@ const Oe = ["aria-label", "aria-busy"], Ie = { class: "mr-designer-bar" }, Je =
               }, [
                 n("path", { d: "M4 10h10a6 6 0 0 1 0 12M4 10l5-5M4 10l5 5" })
               ], -1)
-            ])], 8, He),
+            ])], 8, rt),
             n("button", {
               type: "button",
               class: "mr-designer-icon-button",
               "aria-label": e(t).redo,
               title: e(t).redo,
-              disabled: v.readonly || e(h) || !e(O),
-              onClick: o[1] || (o[1] = //@ts-ignore
-              (...l) => e(s).redo && e(s).redo(...l))
-            }, [...o[26] || (o[26] = [
+              disabled: r.readonly || e(S) || !e(O),
+              onClick: a[1] || (a[1] = //@ts-ignore
+              (...l) => e(i).redo && e(i).redo(...l))
+            }, [...a[35] || (a[35] = [
               n("svg", {
                 viewBox: "0 0 24 24",
                 fill: "none",
@@ -538,405 +686,492 @@ const Oe = ["aria-label", "aria-busy"], Ie = { class: "mr-designer-bar" }, Je =
               }, [
                 n("path", { d: "M20 10H10a6 6 0 0 0 0 12m10-12-5-5m5 5-5 5" })
               ], -1)
-            ])], 8, Ge)
+            ])], 8, ut)
           ]),
           n("button", {
             type: "button",
             class: "mr-designer-reset",
-            disabled: v.readonly || e(h) || !e(k),
-            onClick: o[2] || (o[2] = //@ts-ignore
-            (...l) => e(s).reset && e(s).reset(...l))
-          }, a(e(t).reset), 9, Fe),
-          v.save ? (_(), C("button", {
+            disabled: r.readonly || e(S) || !e(C),
+            onClick: a[2] || (a[2] = //@ts-ignore
+            (...l) => e(i).reset && e(i).reset(...l))
+          }, s(e(t).reset), 9, dt),
+          r.save ? (p(), y("button", {
             key: 0,
             type: "button",
             class: "mr-designer-save",
-            disabled: v.readonly || e(h) || e(T) || !e(D).ok || !e(k),
-            onClick: o[3] || (o[3] = //@ts-ignore
-            (...l) => e(s).save && e(s).save(...l))
+            disabled: r.readonly || e(S) || e(A) || !e(V).ok || !e(C),
+            onClick: a[3] || (a[3] = //@ts-ignore
+            (...l) => e(i).save && e(i).save(...l))
           }, [
-            le(Y, {
+            q(W, {
               name: "file",
-              size: 14
+              size: 13
             }),
-            R(a(e(g) ? e(t).saving : e(t).save), 1)
-          ], 8, Ue)) : N("", !0)
+            P(s(e(k) ? e(t).saving : e(t).save), 1)
+          ], 8, ct)) : H("", !0)
         ])
       ]),
-      e(B) ? (_(), C("div", {
+      e(G) ? (p(), y("div", {
         key: 0,
         role: "alertdialog",
         "aria-label": e(t).discardTitle,
         class: "mr-designer-confirm",
-        onKeydown: o[6] || (o[6] = ke(Ce((l) => e(s).decideDiscard(!1), ["prevent"]), ["esc"]))
+        onKeydown: a[6] || (a[6] = ge(De((l) => e(i).decideDiscard(!1), ["prevent", "stop"]), ["esc"]))
       }, [
         n("div", null, [
-          n("strong", null, a(e(t).discardTitle), 1),
-          n("p", null, a(e(t).discardDescription), 1)
+          n("strong", null, s(e(t).discardTitle), 1),
+          n("p", null, s(e(t).discardDescription), 1)
         ]),
         n("div", null, [
           n("button", {
             ref_key: "keepButton",
-            ref: q,
+            ref: ne,
             type: "button",
-            onClick: o[4] || (o[4] = (l) => e(s).decideDiscard(!1))
-          }, a(e(t).keepEditing), 513),
+            onClick: a[4] || (a[4] = (l) => e(i).decideDiscard(!1))
+          }, s(e(t).keepEditing), 513),
           n("button", {
             type: "button",
-            onClick: o[5] || (o[5] = (l) => e(s).decideDiscard(!0))
-          }, a(e(t).discard), 1)
+            onClick: a[5] || (a[5] = (l) => e(i).decideDiscard(!0))
+          }, s(e(t).discard), 1)
         ])
-      ], 40, ze)) : N("", !0),
-      n("div", qe, [
-        n("aside", Ke, [
-          n("nav", {
-            class: "mr-designer-tabs",
-            role: "tablist",
-            "aria-label": e(t).sectionsLabel
-          }, [
-            (_(), C(K, null, ie(J, (l) => n("button", {
-              id: `${H}-tab-${l}`,
-              key: l,
-              type: "button",
-              role: "tab",
-              "aria-selected": e(V) === l,
-              "aria-controls": `${H}-panel-${l}`,
-              tabindex: e(V) === l ? 0 : -1,
-              onClick: (b) => V.value = l,
-              onKeydown: de
-            }, a(e(t)[`${l}Section`]), 41, Qe)), 64))
-          ], 8, We),
+      ], 40, vt)) : H("", !0),
+      n("div", mt, [
+        n("aside", gt, [
           n("div", {
             ref_key: "inspectorPanel",
-            ref: Z,
-            id: `${H}-panel-${e(V)}`,
-            class: "mr-designer-panel",
+            ref: ae,
+            id: `${F}-panel-${e(R)}`,
+            class: me(["mr-designer-panel", { "is-advanced": e(R) === "advanced" }]),
             role: "tabpanel",
-            "aria-labelledby": `${H}-tab-${e(V)}`
+            "aria-labelledby": `${F}-tab-${e(R)}`
           }, [
-            e(V) === "fields" ? (_(), C(K, { key: 0 }, [
-              e(P).length > 1 ? (_(), C("label", Ye, [
-                R(a(e(t).area), 1),
-                ue(n("select", {
-                  "onUpdate:modelValue": o[7] || (o[7] = (l) => ce(S) ? S.value = l : null)
+            e(R) === "fields" ? (p(), y(X, { key: 0 }, [
+              e(f).length > 1 ? (p(), y("label", ht, [
+                P(s(e(t).area), 1),
+                fe(n("select", {
+                  "onUpdate:modelValue": a[7] || (a[7] = (l) => he(m) ? m.value = l : null)
                 }, [
-                  (_(!0), C(K, null, ie(e(P), (l, b) => (_(), C("option", {
-                    key: b,
-                    value: b
-                  }, a(l.pageIndex + 1) + " " + a(e(t).page) + " · " + a(l.component.title || l.component.dataset), 9, Ze))), 128))
+                  (p(!0), y(X, null, oe(e(f), (l, N) => (p(), y("option", {
+                    key: N,
+                    value: N
+                  }, s(l.pageIndex + 1) + " " + s(e(t).page) + " · " + s(l.component.title || l.component.dataset), 9, pt))), 128))
                 ], 512), [
-                  [we, e(S)]
+                  [$e, e(m)]
                 ])
-              ])) : N("", !0),
-              e(d) ? (_(), C("div", et, [
-                n("div", tt, [
-                  n("strong", null, a(e(t).columnDirectory), 1),
-                  n("span", null, a(e(d).columns.length) + " " + a(e(t).fieldsCount), 1)
-                ]),
-                n("div", nt, [
-                  le(Y, {
-                    name: "search",
-                    size: 15
-                  }),
-                  ue(n("input", {
-                    "onUpdate:modelValue": o[8] || (o[8] = (l) => ce(i) ? i.value = l : null),
-                    type: "search",
-                    "aria-label": e(t).columnsSearch,
-                    placeholder: e(t).columnsSearch
-                  }, null, 8, lt), [
-                    [ge, e(i)]
-                  ]),
-                  e(i) ? (_(), C("button", {
-                    key: 0,
-                    type: "button",
-                    class: "mr-designer-icon-button",
-                    "aria-label": e(t).clearSearch,
-                    title: e(t).clearSearch,
-                    onClick: o[9] || (o[9] = (l) => i.value = "")
-                  }, [
-                    le(Y, {
-                      name: "close",
-                      size: 14
-                    })
-                  ], 8, ot)) : N("", !0)
-                ]),
-                n("div", at, [
+              ])) : H("", !0),
+              e(o) ? (p(), y(X, { key: 1 }, [
+                n("div", bt, [
                   n("button", {
+                    ref_key: "directoryTrigger",
+                    ref: re,
                     type: "button",
-                    disabled: v.readonly || e(h) || e(T) || !e(r).length,
-                    onClick: o[10] || (o[10] = (l) => e(s).selectVisible(!0))
-                  }, a(e(t).selectVisible), 9, st),
-                  e(m).length ? (_(), C("button", {
-                    key: 0,
-                    type: "button",
-                    onClick: o[11] || (o[11] = //@ts-ignore
-                    (...l) => e(s).clearSelection && e(s).clearSelection(...l))
-                  }, a(e(t).clearSelection), 1)) : N("", !0),
-                  e(m).length ? (_(), C("span", it, a(e(t).columnsSelected) + " " + a(e(m).length), 1)) : (_(), C("span", rt, a(e(r).length) + " / " + a(e(d).columns.length), 1))
-                ]),
-                n("div", {
-                  ref_key: "columnList",
-                  ref: ae,
-                  class: "mr-designer-column-list",
-                  "aria-label": e(t).columnDirectory,
-                  role: "group"
-                }, [
-                  (_(!0), C(K, null, ie(e(r), ({ column: l, index: b }) => (_(), C("div", {
-                    key: b,
-                    class: fe(["mr-designer-column-row", { "is-active": e(z) === b }])
+                    class: "mr-designer-field-trigger",
+                    "aria-expanded": e(ie),
+                    "aria-controls": `${F}-directory`,
+                    "aria-haspopup": "dialog",
+                    onClick: a[8] || (a[8] = //@ts-ignore
+                    (...l) => e(B).toggle && e(B).toggle(...l)),
+                    onKeydown: a[9] || (a[9] = ge(
+                      //@ts-ignore
+                      (...l) => e(B).escape && e(B).escape(...l),
+                      ["esc"]
+                    ))
                   }, [
-                    n("input", {
-                      type: "checkbox",
-                      "aria-label": `${e(t).selectColumn} ${l.header}`,
-                      checked: e(m).includes(b),
-                      disabled: v.readonly || e(h) || e(T),
-                      onChange: (F) => e(s).toggleColumn(b, ee(F))
-                    }, null, 40, ut),
+                    n("span", _t, [
+                      n("strong", null, s(e(T)?.column.header || e(t).noColumns), 1),
+                      n("small", null, s(e(T)?.column.field || "—"), 1)
+                    ]),
+                    n("span", kt, [
+                      P(s(e(t).columnDirectory) + " ", 1),
+                      n("b", null, s(e(o).columns.length), 1),
+                      q(W, {
+                        name: "chevron-down",
+                        size: 13
+                      })
+                    ])
+                  ], 40, yt),
+                  n("div", wt, [
+                    n("span", {
+                      "aria-label": e(t).fieldPosition
+                    }, [
+                      P(s(e(Q) >= 0 ? e(Q) + 1 : 0), 1),
+                      a[36] || (a[36] = n("i", null, "/", -1)),
+                      P(s(e(o).columns.length), 1)
+                    ], 8, Ct),
                     n("button", {
                       type: "button",
-                      "data-column-index": b,
-                      "aria-pressed": e(z) === b,
-                      tabindex: e(z) === b ? 0 : -1,
-                      onClick: (F) => e(L).activate(b),
-                      onKeydown: re
+                      class: "mr-designer-icon-button",
+                      "aria-label": e(t).previousColumn,
+                      title: e(t).previousColumn,
+                      disabled: e(Q) <= 0,
+                      onClick: a[10] || (a[10] = (l) => e(I).stepColumn(-1))
                     }, [
-                      n("span", vt, a(b + 1), 1),
-                      n("span", mt, [
-                        n("strong", null, a(l.header), 1),
-                        n("small", null, a(l.field), 1)
-                      ]),
-                      e(z) === b ? (_(), he(Y, {
-                        key: 0,
-                        name: "chevron-right",
+                      q(W, {
+                        name: "chevron-left",
                         size: 14
-                      })) : N("", !0)
-                    ], 40, ct)
-                  ], 2))), 128)),
-                  e(r).length ? N("", !0) : (_(), C("p", ft, [
-                    le(Y, {
-                      name: "search",
-                      size: 20
-                    }),
-                    R(a(e(t).noColumns), 1)
-                  ]))
-                ], 8, dt),
-                e(m).length ? (_(), C("div", gt, [
-                  n("label", null, [
-                    R(a(e(t).batchBody), 1),
-                    n("select", {
-                      "aria-label": e(t).batchBody,
-                      disabled: v.readonly || e(h) || e(T),
-                      onChange: o[12] || (o[12] = (l) => se(l, "align"))
-                    }, [
-                      n("option", pt, a(e(t).chooseAlignment), 1),
-                      n("option", bt, a(e(t).auto), 1),
-                      n("option", yt, a(e(t).left), 1),
-                      n("option", _t, a(e(t).center), 1),
-                      n("option", kt, a(e(t).right), 1),
-                      n("option", Ct, a(e(t).justify), 1)
-                    ], 40, ht)
-                  ]),
-                  n("label", null, [
-                    R(a(e(t).batchHeader), 1),
-                    n("select", {
-                      "aria-label": e(t).batchHeader,
-                      disabled: v.readonly || e(h) || e(T),
-                      onChange: o[13] || (o[13] = (l) => se(l, "headerAlign"))
+                      })
+                    ], 8, St),
+                    n("button", {
+                      type: "button",
+                      class: "mr-designer-icon-button",
+                      "aria-label": e(t).nextColumn,
+                      title: e(t).nextColumn,
+                      disabled: e(Q) >= e(o).columns.length - 1,
+                      onClick: a[11] || (a[11] = (l) => e(I).stepColumn(1))
                     }, [
-                      n("option", St, a(e(t).chooseAlignment), 1),
-                      n("option", xt, a(e(t).left), 1),
-                      n("option", Et, a(e(t).center), 1),
-                      n("option", Mt, a(e(t).right), 1),
-                      n("option", Tt, a(e(t).justify), 1)
-                    ], 40, wt)
+                      q(W, {
+                        name: "chevron-right",
+                        size: 14
+                      })
+                    ], 8, xt)
                   ])
-                ])) : N("", !0),
-                e(E) ? (_(), C("fieldset", {
-                  key: 1,
+                ]),
+                e(T) ? (p(), y("fieldset", {
+                  key: 0,
                   class: "mr-designer-properties",
-                  disabled: v.readonly || e(h) || e(T)
+                  disabled: r.readonly || e(S) || e(A),
+                  "aria-label": e(t).columnProperties
                 }, [
-                  n("legend", null, [
-                    R(a(e(t).columnProperties) + " ", 1),
-                    n("span", null, a(e(E).index + 1) + " · " + a(e(E).column.header), 1)
-                  ]),
-                  n("label", null, [
-                    R(a(e(t).header), 1),
-                    n("input", {
-                      value: e(E).column.header,
-                      onInput: o[14] || (o[14] = (l) => e(s).setColumn(
-                        e(E).index,
-                        "header",
-                        G(l)
-                      ))
-                    }, null, 40, Dt)
+                  n("div", Et, [
+                    n("h3", null, s(e(t).contentGroup), 1),
+                    n("label", null, [
+                      P(s(e(t).header), 1),
+                      n("input", {
+                        value: e(T).column.header,
+                        onInput: a[12] || (a[12] = (l) => e(i).setColumn(
+                          e(T).index,
+                          "header",
+                          E(l)
+                        ))
+                      }, null, 40, At)
+                    ]),
+                    n("label", null, [
+                      P(s(e(t).field), 1),
+                      n("input", {
+                        value: e(T).column.field,
+                        onChange: a[13] || (a[13] = (l) => e(i).setColumn(
+                          e(T).index,
+                          "field",
+                          E(l)
+                        ))
+                      }, null, 40, Tt)
+                    ])
                   ]),
-                  n("label", null, [
-                    R(a(e(t).field), 1),
-                    n("input", {
-                      value: e(E).column.field,
-                      onChange: o[15] || (o[15] = (l) => e(s).setColumn(
-                        e(E).index,
-                        "field",
-                        G(l)
-                      ))
-                    }, null, 40, jt)
+                  n("div", Dt, [
+                    n("h3", null, s(e(t).formatGroup), 1),
+                    n("div", $t, [
+                      n("label", jt, [
+                        P(s(e(t).width), 1),
+                        n("input", {
+                          type: "number",
+                          min: "0.1",
+                          step: "0.5",
+                          value: e(T).column.widthMm,
+                          onChange: a[14] || (a[14] = (l) => e(i).setColumn(
+                            e(T).index,
+                            "widthMm",
+                            E(l)
+                          ))
+                        }, null, 40, Vt)
+                      ]),
+                      n("label", Lt, [
+                        P(s(e(t).semantic), 1),
+                        n("select", {
+                          value: e(T).column.semanticRole || "text",
+                          onChange: a[15] || (a[15] = (l) => e(i).setColumn(
+                            e(T).index,
+                            "semanticRole",
+                            E(l)
+                          ))
+                        }, [
+                          n("option", Bt, s(e(t).identifier), 1),
+                          n("option", Pt, s(e(t).dimension), 1),
+                          n("option", Ot, s(e(t).measure), 1),
+                          n("option", It, s(e(t).date), 1),
+                          n("option", Jt, s(e(t).text), 1)
+                        ], 40, Rt)
+                      ])
+                    ]),
+                    n("div", Nt, [
+                      n("span", null, s(e(t).bodyAlign), 1),
+                      q(we, {
+                        "model-value": e(T).column.align ?? e(T).column.style?.align ?? e(o).align ?? "left",
+                        label: e(t).bodyAlign,
+                        labels: M.value,
+                        "auto-label": e(t).autoShort,
+                        "allow-auto": "",
+                        "onUpdate:modelValue": a[16] || (a[16] = (l) => e(i).setColumn(e(T).index, "align", l))
+                      }, null, 8, ["model-value", "label", "labels", "auto-label"])
+                    ]),
+                    n("div", Gt, [
+                      n("span", null, s(e(t).headerAlign), 1),
+                      q(we, {
+                        "model-value": e(i).headerAlignments.value[e(T).index] || "left",
+                        label: e(t).headerAlign,
+                        labels: M.value,
+                        "auto-label": e(t).autoShort,
+                        "onUpdate:modelValue": a[17] || (a[17] = (l) => e(i).setColumn(
+                          e(T).index,
+                          "headerAlign",
+                          l
+                        ))
+                      }, null, 8, ["model-value", "label", "labels", "auto-label"])
+                    ])
                   ]),
-                  n("label", null, [
-                    R(a(e(t).width), 1),
+                  n("label", Ht, [
+                    P(s(e(t).editable), 1),
                     n("input", {
-                      type: "number",
-                      min: "0.1",
-                      step: "0.5",
-                      value: e(E).column.widthMm,
-                      onChange: o[16] || (o[16] = (l) => e(s).setColumn(
-                        e(E).index,
-                        "widthMm",
-                        G(l)
-                      ))
-                    }, null, 40, Rt)
-                  ]),
-                  n("label", null, [
-                    R(a(e(t).semantic), 1),
-                    n("select", {
-                      value: e(E).column.semanticRole || "text",
-                      onChange: o[17] || (o[17] = (l) => e(s).setColumn(
-                        e(E).index,
-                        "semanticRole",
-                        G(l)
+                      type: "checkbox",
+                      role: "switch",
+                      checked: e(T).column.editable === !0,
+                      onChange: a[18] || (a[18] = (l) => e(i).setColumn(
+                        e(T).index,
+                        "editable",
+                        K(l)
                       ))
+                    }, null, 40, Ut)
+                  ])
+                ], 8, Mt)) : H("", !0),
+                e(ie) ? (p(), y("div", {
+                  key: 1,
+                  id: `${F}-directory`,
+                  ref_key: "directoryPanel",
+                  ref: de,
+                  role: "dialog",
+                  "aria-label": e(t).columnDirectory,
+                  class: "mr-designer-directory",
+                  onKeydown: a[28] || (a[28] = ge(
+                    //@ts-ignore
+                    (...l) => e(B).escape && e(B).escape(...l),
+                    ["esc"]
+                  )),
+                  onFocusout: a[29] || (a[29] = //@ts-ignore
+                  (...l) => e(B).leave && e(B).leave(...l))
+                }, [
+                  n("div", zt, [
+                    n("strong", null, [
+                      P(s(e(t).columnDirectory) + " ", 1),
+                      n("span", null, s(e(o).columns.length), 1)
+                    ]),
+                    n("button", {
+                      type: "button",
+                      class: "mr-designer-icon-button",
+                      "aria-label": e(t).closeDirectory,
+                      onClick: a[19] || (a[19] = (l) => e(B).close(!0))
                     }, [
-                      n("option", Bt, a(e(t).identifier), 1),
-                      n("option", Lt, a(e(t).dimension), 1),
-                      n("option", Vt, a(e(t).measure), 1),
-                      n("option", Ot, a(e(t).date), 1),
-                      n("option", It, a(e(t).text), 1)
-                    ], 40, $t)
+                      q(W, {
+                        name: "close",
+                        size: 15
+                      })
+                    ], 8, Kt)
                   ]),
-                  n("label", null, [
-                    R(a(e(t).bodyAlign), 1),
-                    n("select", {
-                      value: e(E).column.align ?? e(E).column.style?.align ?? e(d).align ?? "left",
-                      onChange: o[18] || (o[18] = (l) => e(s).setColumn(
-                        e(E).index,
-                        "align",
-                        G(l)
-                      ))
+                  n("div", qt, [
+                    q(W, {
+                      name: "search",
+                      size: 14
+                    }),
+                    fe(n("input", {
+                      ref_key: "directorySearch",
+                      ref: ce,
+                      "onUpdate:modelValue": a[20] || (a[20] = (l) => he(v) ? v.value = l : null),
+                      type: "search",
+                      "aria-label": e(t).columnsSearch,
+                      placeholder: e(t).columnsSearch,
+                      onKeydown: a[21] || (a[21] = //@ts-ignore
+                      (...l) => e(B).searchKeydown && e(B).searchKeydown(...l))
+                    }, null, 40, Wt), [
+                      [_e, e(v)]
+                    ]),
+                    e(v) ? (p(), y("button", {
+                      key: 0,
+                      type: "button",
+                      class: "mr-designer-icon-button",
+                      "aria-label": e(t).clearSearch,
+                      title: e(t).clearSearch,
+                      onClick: a[22] || (a[22] = (l) => v.value = "")
                     }, [
-                      n("option", Nt, a(e(t).auto), 1),
-                      n("option", Pt, a(e(t).left), 1),
-                      n("option", Ht, a(e(t).center), 1),
-                      n("option", Gt, a(e(t).right), 1),
-                      n("option", Ft, a(e(t).justify), 1)
-                    ], 40, Jt)
+                      q(W, {
+                        name: "close",
+                        size: 13
+                      })
+                    ], 8, Qt)) : H("", !0)
                   ]),
-                  n("label", null, [
-                    R(a(e(t).headerAlign), 1),
-                    n("select", {
-                      value: e(s).headerAlignments.value[e(E).index],
-                      onChange: o[19] || (o[19] = (l) => e(s).setColumn(
-                        e(E).index,
-                        "headerAlign",
-                        G(l)
-                      ))
-                    }, [
-                      n("option", zt, a(e(t).left), 1),
-                      n("option", qt, a(e(t).center), 1),
-                      n("option", Kt, a(e(t).right), 1),
-                      n("option", Wt, a(e(t).justify), 1)
-                    ], 40, Ut)
+                  n("div", Xt, [
+                    n("button", {
+                      type: "button",
+                      disabled: r.readonly || e(S) || e(A) || !e(d).length,
+                      onClick: a[23] || (a[23] = (l) => e(i).selectVisible(!0))
+                    }, s(e(t).selectVisible), 9, Yt),
+                    e(h).length ? (p(), y("button", {
+                      key: 0,
+                      type: "button",
+                      onClick: a[24] || (a[24] = //@ts-ignore
+                      (...l) => e(i).clearSelection && e(i).clearSelection(...l))
+                    }, s(e(t).clearSelection), 1)) : H("", !0),
+                    e(h).length ? (p(), y("span", Zt, s(e(t).columnsSelected) + " " + s(e(h).length), 1)) : (p(), y("span", en, s(e(d).length) + " / " + s(e(o).columns.length), 1))
                   ]),
-                  n("label", Qt, [
-                    R(a(e(t).editable), 1),
-                    n("input", {
-                      type: "checkbox",
-                      checked: e(E).column.editable === !0,
-                      onChange: o[20] || (o[20] = (l) => e(s).setColumn(
-                        e(E).index,
-                        "editable",
-                        ee(l)
-                      ))
-                    }, null, 40, Xt)
-                  ])
-                ], 8, At)) : N("", !0)
-              ])) : (_(), C("p", Yt, a(e(t).noColumns), 1))
-            ], 64)) : e(V) === "template" ? (_(), C(K, { key: 1 }, [
-              n("h3", null, a(e(t).templateDetails), 1),
-              n("label", Zt, [
-                R(a(e(t).name), 1),
+                  n("div", {
+                    ref_key: "columnList",
+                    ref: ve,
+                    class: "mr-designer-column-list",
+                    "aria-label": e(t).columnDirectory,
+                    role: "group"
+                  }, [
+                    (p(!0), y(X, null, oe(e(d), ({ column: l, index: N }) => (p(), y("div", {
+                      key: N,
+                      class: me(["mr-designer-column-row", { "is-active": e(Q) === N }])
+                    }, [
+                      n("input", {
+                        type: "checkbox",
+                        "aria-label": `${e(t).selectColumn} ${l.header}`,
+                        checked: e(h).includes(N),
+                        disabled: r.readonly || e(S) || e(A),
+                        onChange: (le) => e(i).toggleColumn(N, K(le))
+                      }, null, 40, nn),
+                      n("button", {
+                        type: "button",
+                        "data-column-index": N,
+                        "aria-pressed": e(Q) === N,
+                        tabindex: e(ue) === N ? 0 : -1,
+                        onClick: (le) => e(B).choose(N),
+                        onKeydown: a[25] || (a[25] = //@ts-ignore
+                        (...le) => e(B).navigate && e(B).navigate(...le))
+                      }, [
+                        n("span", an, s(N + 1), 1),
+                        n("span", on, [
+                          n("strong", null, s(l.header), 1),
+                          n("small", null, s(l.field), 1)
+                        ]),
+                        e(Q) === N ? (p(), ke(W, {
+                          key: 0,
+                          name: "chevron-right",
+                          size: 13
+                        })) : H("", !0)
+                      ], 40, ln)
+                    ], 2))), 128)),
+                    e(d).length ? H("", !0) : (p(), y("p", sn, [
+                      q(W, {
+                        name: "search",
+                        size: 20
+                      }),
+                      P(s(e(t).noColumns), 1)
+                    ]))
+                  ], 8, tn),
+                  e(h).length ? (p(), y("div", rn, [
+                    n("label", null, [
+                      P(s(e(t).batchBody), 1),
+                      n("select", {
+                        "aria-label": e(t).batchBody,
+                        disabled: r.readonly || e(S) || e(A),
+                        onChange: a[26] || (a[26] = (l) => ye(l, "align"))
+                      }, [
+                        n("option", dn, s(e(t).chooseAlignment), 1),
+                        n("option", cn, s(e(t).auto), 1),
+                        n("option", vn, s(e(t).left), 1),
+                        n("option", mn, s(e(t).center), 1),
+                        n("option", gn, s(e(t).right), 1),
+                        n("option", fn, s(e(t).justify), 1)
+                      ], 40, un)
+                    ]),
+                    n("label", null, [
+                      P(s(e(t).batchHeader), 1),
+                      n("select", {
+                        "aria-label": e(t).batchHeader,
+                        disabled: r.readonly || e(S) || e(A),
+                        onChange: a[27] || (a[27] = (l) => ye(l, "headerAlign"))
+                      }, [
+                        n("option", pn, s(e(t).chooseAlignment), 1),
+                        n("option", bn, s(e(t).left), 1),
+                        n("option", yn, s(e(t).center), 1),
+                        n("option", _n, s(e(t).right), 1),
+                        n("option", kn, s(e(t).justify), 1)
+                      ], 40, hn)
+                    ])
+                  ])) : H("", !0)
+                ], 40, Ft)) : H("", !0)
+              ], 64)) : (p(), y("p", wn, s(e(t).noColumns), 1))
+            ], 64)) : e(R) === "template" ? (p(), y(X, { key: 1 }, [
+              n("h3", null, s(e(t).templateDetails), 1),
+              n("label", Cn, [
+                P(s(e(t).name), 1),
                 n("input", {
-                  value: e(w).name,
-                  disabled: v.readonly || e(h) || e(T),
-                  onInput: o[21] || (o[21] = (l) => e(s).setName(G(l)))
-                }, null, 40, en)
+                  value: e(b).name,
+                  disabled: r.readonly || e(S) || e(A),
+                  onInput: a[30] || (a[30] = (l) => e(i).setName(E(l)))
+                }, null, 40, Sn)
               ]),
-              n("label", tn, [
-                R(a(e(t).description), 1),
+              n("label", xn, [
+                P(s(e(t).description), 1),
                 n("textarea", {
-                  rows: "4",
-                  value: e(w).description,
-                  disabled: v.readonly || e(h) || e(T),
-                  onInput: o[22] || (o[22] = (l) => e(s).setDescription(G(l)))
-                }, null, 40, nn)
-              ]),
-              n("dl", ln, [
-                n("dt", null, a(e(t).templateIdentity), 1),
-                n("dd", null, a(e(w).id), 1),
-                n("dt", null, a(e(t).templateRevision), 1),
-                n("dd", null, a(e(w).revision || e(t).unpublished), 1)
+                  rows: "2",
+                  value: e(b).description,
+                  disabled: r.readonly || e(S) || e(A),
+                  onInput: a[31] || (a[31] = (l) => e(i).setDescription(E(l)))
+                }, null, 40, Mn)
               ]),
-              n("p", on, a(e(t).note), 1)
-            ], 64)) : (_(), C(K, { key: 2 }, [
-              n("h3", null, a(e(t).advancedTitle), 1),
-              n("p", an, a(e(t).advancedDescription), 1),
-              n("label", sn, [
-                R(a(e(t).json), 1),
-                ue(n("textarea", {
-                  "onUpdate:modelValue": o[23] || (o[23] = (l) => ce($) ? $.value = l : null),
+              n("details", En, [
+                n("summary", null, s(e(t).technicalDetails), 1),
+                n("dl", An, [
+                  n("dt", null, s(e(t).templateIdentity), 1),
+                  n("dd", null, s(e(b).id), 1),
+                  n("dt", null, s(e(t).templateRevision), 1),
+                  n("dd", null, s(e(b).revision || e(t).unpublished), 1)
+                ])
+              ])
+            ], 64)) : (p(), y(X, { key: 2 }, [
+              n("h3", null, s(e(t).advancedTitle), 1),
+              n("label", Tn, [
+                P(s(e(t).json), 1),
+                fe(n("textarea", {
+                  "onUpdate:modelValue": a[32] || (a[32] = (l) => he($) ? $.value = l : null),
                   class: "mr-designer-json",
                   "aria-label": e(t).json,
-                  disabled: v.readonly || e(h),
+                  disabled: r.readonly || e(S),
                   spellcheck: "false"
-                }, null, 8, rn), [
-                  [ge, e($)]
+                }, null, 8, Dn), [
+                  [_e, e($)]
                 ])
               ]),
               n("button", {
                 type: "button",
                 class: "mr-designer-apply-json",
-                disabled: v.readonly || e(h),
-                onClick: o[24] || (o[24] = //@ts-ignore
-                (...l) => e(s).applyJson && e(s).applyJson(...l))
-              }, a(e(t).applyJson), 9, dn)
+                disabled: r.readonly || e(S),
+                onClick: a[33] || (a[33] = //@ts-ignore
+                (...l) => e(i).applyJson && e(i).applyJson(...l))
+              }, s(e(t).applyJson), 9, $n)
             ], 64)),
-            e(T) ? (_(), C("p", un, a(e(t).jsonPending), 1)) : N("", !0)
-          ], 8, Xe)
+            e(A) ? (p(), y("p", jn, s(e(t).jsonPending), 1)) : H("", !0)
+          ], 10, ft)
         ]),
         n("div", {
           class: "mr-designer-preview",
           "aria-label": e(t).previewTitle
         }, [
-          e(p) ? (_(), C("div", vn, a(e(p)), 1)) : N("", !0),
-          e(D).ok ? N("", !0) : (_(), C("ul", mn, [
-            (_(!0), C(K, null, ie(e(D).errors, (l) => (_(), C("li", {
+          e(_) ? (p(), y("div", Ln, s(e(_)), 1)) : H("", !0),
+          e(V).ok ? H("", !0) : (p(), y("ul", Rn, [
+            (p(!0), y(X, null, oe(e(V).errors, (l) => (p(), y("li", {
               key: l.path
-            }, a(l.path) + "：" + a(l.message), 1))), 128))
+            }, s(l.path) + "：" + s(l.message), 1))), 128))
           ])),
-          e(x) && e(D).ok ? (_(), he(e(Ee), {
+          e(x) && e(V).ok ? (p(), ke(e(Le), {
             key: 2,
             "report-id": "draft",
             fetcher: e(x),
+            messages: {
+              title: e(t).previewTitle,
+              columnDirectory: e(t).previewFieldDirectory
+            },
             "show-params": !1,
             editable: !1,
             "excel-import": !1,
             height: "100%"
-          }, null, 8, ["fetcher"])) : (_(), C("p", fn, a(e(t).invalid), 1))
-        ], 8, cn)
+          }, null, 8, ["fetcher", "messages"])) : (p(), y("p", Bn, s(e(t).invalid), 1))
+        ], 8, Vn)
       ])
-    ], 8, Oe));
+    ], 8, tt));
   }
-}), _n = /* @__PURE__ */ Me(gn, [["__scopeId", "data-v-c4eab8e7"]]);
+}), Gn = /* @__PURE__ */ Se(Pn, [["__scopeId", "data-v-10c10f4e"]]);
 export {
-  _n as ReportTemplateEditor,
-  Be as TEMPLATE_EDITOR_MESSAGES
+  Gn as ReportTemplateEditor,
+  Ye as TEMPLATE_EDITOR_MESSAGES
 };