@agile-team/mach-report 2.8.2 → 2.8.4

package/dist/designer.js

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