@oneflowui/ui 0.5.7 → 0.5.9

package/dist/components/database/DatabaseView.vue2.js

@@ -1,36 +1,47 @@
-import { defineComponent as ot, computed as n, ref as B, watch as y, openBlock as v, createElementBlock as g, mergeProps as nt, createVNode as N, unref as j, createElementVNode as H, Fragment as st, createBlock as k, createCommentVNode as dt } from "vue";
-import { Loader2 as ut, AlertCircle as ct, Database as vt } from "lucide-vue-next";
-import re from "../base/EmptyState.vue.js";
-import ft from "../table/DetailSheet.vue.js";
-import mt from "../table/TableToolbar.vue.js";
-import wt from "../table/DataTable.vue.js";
-import pt from "../kanban/KanbanBoard.vue.js";
-import ht from "../gallery/GalleryView.vue.js";
-import bt from "../timeline/GanttTimeline.vue.js";
-import { useDatabaseView as yt } from "../../composables/useDatabaseView.js";
-import { buildGanttItems as gt } from "../../types/index.js";
-const Vt = {
+import { defineComponent as Tt, ref as B, onMounted as Rt, onBeforeUnmount as Dt, computed as n, watch as F, openBlock as c, createElementBlock as w, mergeProps as Lt, createVNode as ae, unref as ie, createElementVNode as u, Fragment as le, createBlock as S, createCommentVNode as oe, withCtx as Et, toDisplayString as x, renderList as Ie } from "vue";
+import { Loader2 as Bt, AlertCircle as At, Database as Nt } from "lucide-vue-next";
+import Se from "../base/EmptyState.vue.js";
+import xt from "../table/FieldCell.vue.js";
+import Ut from "../table/DetailSheet.vue.js";
+import Kt from "../overlay/SidePanel.vue.js";
+import qt from "../table/TableToolbar.vue.js";
+import Gt from "../table/DataTable.vue.js";
+import Mt from "../kanban/KanbanBoard.vue.js";
+import Pt from "../gallery/GalleryView.vue.js";
+import Wt from "../timeline/GanttTimeline.vue.js";
+import { useMarkdown as Ot } from "../../composables/useMarkdown.js";
+import { useDatabaseView as $t } from "../../composables/useDatabaseView.js";
+import { buildGanttItems as zt } from "../../types/index.js";
+const jt = {
   key: 0,
   class: "of-database-view__state of-database-view__state--loading",
   "data-role": "loading-state"
-}, _t = {
+}, Ht = {
   key: 1,
   class: "of-database-view__state",
   "data-role": "error-state"
-}, It = {
+}, Jt = {
   key: 1,
   class: "of-database-view__state of-database-view__state--empty",
   "data-role": "empty-state"
-}, Ct = ["data-view"], Ft = {
+}, Xt = ["data-view"], Yt = {
   key: 4,
   class: "of-database-view__detail-anchor"
-}, p = "detail", xt = /* @__PURE__ */ ot({
+}, Zt = ["data-record-id"], Qt = { class: "of-database-view__detail-workspace-header" }, ea = { class: "of-database-view__detail-workspace-heading" }, ta = { class: "of-database-view__detail-workspace-title" }, aa = { class: "of-database-view__detail-workspace-meta" }, ia = { class: "of-database-view__detail-workspace-id" }, la = { class: "of-database-view__detail-workspace-body" }, oa = { class: "of-database-view__detail-workspace-properties" }, ra = { class: "of-database-view__detail-workspace-label" }, na = { class: "of-database-view__detail-workspace-value" }, sa = {
+  key: 1,
+  class: "of-database-view__detail-workspace-fallback"
+}, da = {
+  key: 0,
+  class: "of-database-view__detail-workspace-content"
+}, ua = { class: "of-database-view__detail-workspace-content-label" }, ca = ["innerHTML"], va = { class: "of-database-view__detail-workspace-footer" }, fa = ["disabled"], k = "detail", wa = "(max-width: 768px)", Ra = /* @__PURE__ */ Tt({
   name: "DatabaseView",
   inheritAttrs: !1,
   __name: "DatabaseView",
   props: {
     tableId: { default: "database-view" },
     mode: { default: "local" },
+    detailPresentation: { default: "auto" },
+    density: { default: "standard" },
     schema: { default: null },
     records: { default: () => [] },
     views: { default: () => [] },
@@ -58,27 +69,36 @@ const Vt = {
     autoLoad: { type: Boolean, default: !0 }
   },
   emits: ["update:currentViewId", "update:selectedRecordId", "update:searchKeyword", "update:columns", "update:filterLogic", "update:records", "cell-edit", "select-record", "schema-add-field", "schema-rename-field", "schema-change-field-type", "schema-hide-field", "schema-delete-field", "schema-duplicate-field", "row-click", "card-click", "add", "add-column", "record-change", "load-view", "save-view", "sort", "group", "refresh"],
-  setup(T, { emit: oe }) {
-    var ie, le;
-    const l = T, d = oe;
-    function M(e) {
-      var t, a, i, r;
+  setup(T, { emit: Fe }) {
+    var ge, Ce;
+    const l = T, d = Fe, { renderMarkdown: Te } = Ot({ showCopyButton: !0 }), re = B(!1);
+    let g = null;
+    function O() {
+      re.value = (g == null ? void 0 : g.matches) ?? !1;
+    }
+    Rt(() => {
+      typeof window > "u" || typeof window.matchMedia != "function" || (g = window.matchMedia(wa), O(), g.addEventListener("change", O));
+    }), Dt(() => {
+      g == null || g.removeEventListener("change", O), g = null;
+    });
+    function ne(e) {
+      var t, a, i, o;
       return {
         ...e,
         visibleFields: [...e.visibleFields],
-        sorts: (t = e.sorts) == null ? void 0 : t.map((o) => ({ ...o })),
-        groups: (a = e.groups) == null ? void 0 : a.map((o) => ({ ...o })),
-        filters: (i = e.filters) == null ? void 0 : i.map((o) => ({ ...o })),
-        aggregations: (r = e.aggregations) == null ? void 0 : r.map((o) => ({ ...o })),
+        sorts: (t = e.sorts) == null ? void 0 : t.map((r) => ({ ...r })),
+        groups: (a = e.groups) == null ? void 0 : a.map((r) => ({ ...r })),
+        filters: (i = e.filters) == null ? void 0 : i.map((r) => ({ ...r })),
+        aggregations: (o = e.aggregations) == null ? void 0 : o.map((r) => ({ ...r })),
         fixedColumns: e.fixedColumns ? [...e.fixedColumns] : void 0,
         galleryCardFields: e.galleryCardFields ? [...e.galleryCardFields] : void 0
       };
     }
-    function ne(e) {
+    function Re(e) {
       const t = e[0];
       return t ? Object.keys(t.fields) : [];
     }
-    function O(e) {
+    function se(e) {
       switch (e) {
         case "kanban":
           return "columns-3";
@@ -93,8 +113,8 @@ const Vt = {
           return "table-2";
       }
     }
-    function se(e, t = []) {
-      const a = V(e, t);
+    function De(e, t = []) {
+      const a = R(e, t);
       return {
         viewId: "table",
         viewType: "table",
@@ -106,10 +126,10 @@ const Vt = {
         fixedColumns: []
       };
     }
-    function de(e, t = []) {
-      const a = V(e, t);
+    function Le(e, t = []) {
+      const a = R(e, t);
       return {
-        viewId: p,
+        viewId: k,
         viewType: "detail",
         name: "详情",
         visibleFields: a,
@@ -119,11 +139,11 @@ const Vt = {
         fixedColumns: []
       };
     }
-    function U(e, t) {
+    function $(e, t) {
       var a;
       return ((a = t == null ? void 0 : t.fields.find((i) => i.id === e)) == null ? void 0 : a.name) ?? e;
     }
-    function P(e) {
+    function de(e) {
       switch (e == null ? void 0 : e.type) {
         case "number":
         case "currency":
@@ -139,7 +159,7 @@ const Vt = {
           return "string";
       }
     }
-    function ue(e) {
+    function Ee(e) {
       switch (e == null ? void 0 : e.type) {
         case "number":
           return "number";
@@ -182,79 +202,79 @@ const Vt = {
           return "text";
       }
     }
-    function ce(e, t, a = []) {
-      var r;
-      return ((((r = e.visibleFields) == null ? void 0 : r.length) ?? 0) > 0 ? e.visibleFields : V(t, a)).map((o) => {
-        var S;
-        const u = (S = t == null ? void 0 : t.fields) == null ? void 0 : S.find((rt) => rt.id === o);
+    function Be(e, t, a = []) {
+      var o;
+      return ((((o = e.visibleFields) == null ? void 0 : o.length) ?? 0) > 0 ? e.visibleFields : R(t, a)).map((r) => {
+        var I;
+        const v = (I = t == null ? void 0 : t.fields) == null ? void 0 : I.find((p) => p.id === r);
         return {
-          key: o,
-          label: U(o, t),
-          type: P(u),
-          hidden: (u == null ? void 0 : u.hidden) ?? !1,
-          width: u == null ? void 0 : u.width
+          key: r,
+          label: $(r, t),
+          type: de(v),
+          hidden: (v == null ? void 0 : v.hidden) ?? !1,
+          width: v == null ? void 0 : v.width
         };
       });
     }
-    function ve(e, t = []) {
-      return V(e, t).map((i) => {
-        var o;
-        const r = (o = e == null ? void 0 : e.fields) == null ? void 0 : o.find((u) => u.id === i);
+    function Ae(e, t = []) {
+      return R(e, t).map((i) => {
+        var r;
+        const o = (r = e == null ? void 0 : e.fields) == null ? void 0 : r.find((v) => v.id === i);
         return {
           key: i,
-          label: U(i, e),
-          type: P(r),
-          hidden: (r == null ? void 0 : r.hidden) ?? !1,
-          width: r == null ? void 0 : r.width
+          label: $(i, e),
+          type: de(o),
+          hidden: (o == null ? void 0 : o.hidden) ?? !1,
+          width: o == null ? void 0 : o.width
         };
       });
     }
-    function fe(e, t = []) {
-      return V(e, t).map((i) => {
-        var o;
-        const r = (o = e == null ? void 0 : e.fields) == null ? void 0 : o.find((u) => u.id === i);
+    function Ne(e, t = []) {
+      return R(e, t).map((i) => {
+        var r;
+        const o = (r = e == null ? void 0 : e.fields) == null ? void 0 : r.find((v) => v.id === i);
         return {
           id: i,
-          type: ue(r),
-          label: U(i, e)
+          type: Ee(o),
+          label: $(i, e)
         };
       });
     }
-    function R(e) {
+    function U(e) {
       return e == null ? "" : Array.isArray(e) ? e.map((t) => String(t)).join(", ") : String(e);
     }
-    function F(e, t) {
+    function A(e, t) {
       if (e == null && t == null) return 0;
       if (e == null) return -1;
       if (t == null) return 1;
-      const a = Number(e), i = Number(t), r = Number.isFinite(a) && `${e}`.trim() !== "", o = Number.isFinite(i) && `${t}`.trim() !== "";
-      if (r && o) return a - i;
-      const u = Date.parse(String(e)), S = Date.parse(String(t));
-      return Number.isFinite(u) && Number.isFinite(S) ? u - S : R(e).localeCompare(R(t), "zh-Hans-CN");
+      const a = Number(e), i = Number(t), o = Number.isFinite(a) && `${e}`.trim() !== "", r = Number.isFinite(i) && `${t}`.trim() !== "";
+      if (o && r) return a - i;
+      const v = Date.parse(String(e)), I = Date.parse(String(t));
+      return Number.isFinite(v) && Number.isFinite(I) ? v - I : U(e).localeCompare(U(t), "zh-Hans-CN");
     }
-    function me(e, t) {
-      const a = R(e).trim(), i = (t.value ?? "").trim(), r = a.toLowerCase(), o = i.toLowerCase();
+    function xe(e, t) {
+      const a = U(e).trim(), i = (t.value ?? "").trim(), o = a.toLowerCase(), r = i.toLowerCase();
       switch (t.operator) {
         case "equals":
-          return r === o;
+          return o === r;
         case "not_equals":
-          return r !== o;
+          return o !== r;
         case "contains":
-          return r.includes(o);
+          return o.includes(r);
         case "not_contains":
-          return !r.includes(o);
+          return !o.includes(r);
         case "starts_with":
-          return r.startsWith(o);
+          return o.startsWith(r);
         case "ends_with":
-          return r.endsWith(o);
+          return o.endsWith(r);
         case "gt":
-          return F(e, i) > 0;
+          return A(e, i) > 0;
         case "gte":
-          return F(e, i) >= 0;
+          return A(e, i) >= 0;
         case "lt":
-          return F(e, i) < 0;
+          return A(e, i) < 0;
         case "lte":
-          return F(e, i) <= 0;
+          return A(e, i) <= 0;
         case "is_empty":
           return a === "";
         case "is_not_empty":
@@ -263,7 +283,7 @@ const Vt = {
           return !0;
       }
     }
-    function we(e) {
+    function Ue(e) {
       return {
         id: `f_${Math.random().toString(36).slice(2, 8)}`,
         field: e,
@@ -271,7 +291,7 @@ const Vt = {
         value: ""
       };
     }
-    function pe(e = []) {
+    function Ke(e = []) {
       return e.map((t, a) => ({
         id: `f_${t.fieldId}_${a}`,
         field: t.fieldId,
@@ -297,7 +317,7 @@ const Vt = {
         value: t.value == null ? "" : String(t.value)
       }));
     }
-    function he(e) {
+    function qe(e) {
       return e.filter((t) => t.field).map((t) => {
         let a;
         switch (t.operator) {
@@ -336,37 +356,37 @@ const Vt = {
         };
       });
     }
-    function V(e, t = []) {
+    function R(e, t = []) {
       var i;
-      const a = (i = e == null ? void 0 : e.fields) == null ? void 0 : i.filter((r) => !r.hidden).map((r) => r.id);
-      return a != null && a.length ? a : ne(t);
+      const a = (i = e == null ? void 0 : e.fields) == null ? void 0 : i.filter((o) => !o.hidden).map((o) => o.id);
+      return a != null && a.length ? a : Re(t);
     }
-    function be(e) {
+    function Ge(e) {
       return e ? {
         id: e.id,
         ...e.fields
       } : { id: "__detail-empty__" };
     }
-    function ye(e) {
+    function Me(e) {
       if (e)
         return {
           label: "返回列表",
-          onClick: () => ee(e)
+          onClick: () => he(e)
         };
     }
-    const J = n(() => l.schema ?? null), ge = n(() => l.records ?? []), Q = n(() => {
-      var i, r;
-      const e = (l.views ?? []).map((o) => M(o)), t = e.some((o) => o.viewType === "table") || (((i = l.schema) == null ? void 0 : i.views) ?? []).some((o) => o.viewType === "table"), a = e.some((o) => o.viewType === "detail") || (((r = l.schema) == null ? void 0 : r.views) ?? []).some((o) => o.viewType === "detail");
-      return t || e.unshift(se(l.schema, l.records ?? [])), a || e.push(de(l.schema, l.records ?? [])), e;
-    }), s = yt({
+    const ue = n(() => l.schema ?? null), Pe = n(() => l.records ?? []), ce = n(() => {
+      var i, o;
+      const e = (l.views ?? []).map((r) => ne(r)), t = e.some((r) => r.viewType === "table") || (((i = l.schema) == null ? void 0 : i.views) ?? []).some((r) => r.viewType === "table"), a = e.some((r) => r.viewType === "detail") || (((o = l.schema) == null ? void 0 : o.views) ?? []).some((r) => r.viewType === "detail");
+      return t || e.unshift(De(l.schema, l.records ?? [])), a || e.push(Le(l.schema, l.records ?? [])), e;
+    }), s = $t({
       tableId: l.tableId,
       mode: l.mode,
-      schema: J,
-      records: ge,
-      views: Q,
+      schema: ue,
+      records: Pe,
+      views: ce,
       provider: l.provider,
       defaultView: l.defaultView,
-      initialViewId: l.currentViewId || l.initialViewId || ((ie = l.defaultView) == null ? void 0 : ie.viewId) || ((le = Q.value[0]) == null ? void 0 : le.viewId) || "",
+      initialViewId: l.currentViewId || l.initialViewId || ((ge = l.defaultView) == null ? void 0 : ge.viewId) || ((Ce = ce.value[0]) == null ? void 0 : Ce.viewId) || "",
       initialSelectedRecordId: l.selectedRecordId ?? l.initialSelectedRecordId,
       pageSize: l.pageSize,
       autoLoad: l.autoLoad,
@@ -412,363 +432,488 @@ const Vt = {
           d("refresh"), await ((t = (e = l.actions) == null ? void 0 : e.onRefresh) == null ? void 0 : t.call(e));
         }
       }
-    }), f = n(() => s.activeView.value), x = n(() => s.activeViewId.value), q = n(() => s.selectedRecord.value), Ve = n(() => s.selectedRecordId.value), b = n(() => s.schema.value ?? J.value), h = n(() => [...s.records.value]), c = n(() => f.value.viewType || "table"), _ = B(l.searchKeyword ?? ""), K = B("and"), m = B([]), w = B(
-      l.currentViewId === p || l.initialViewId === p || l.selectedRecordId != null || l.initialSelectedRecordId != null
+    }), b = n(() => s.activeView.value), z = n(() => s.activeViewId.value), h = n(() => s.selectedRecord.value), We = n(() => s.selectedRecordId.value), V = n(() => s.schema.value ?? ue.value), C = n(() => [...s.records.value]), m = n(() => b.value.viewType || "table"), f = B({}), D = B(l.searchKeyword ?? ""), j = B("and"), y = B([]), _ = B(
+      l.currentViewId === k || l.initialViewId === k || l.selectedRecordId != null || l.initialSelectedRecordId != null
     );
-    y(
+    F(
       () => l.searchKeyword,
       (e) => {
-        _.value = e ?? "";
+        D.value = e ?? "";
       },
       { immediate: !0 }
-    ), y(_, (e) => {
+    ), F(D, (e) => {
       d("update:searchKeyword", e);
-    }), y(
-      f,
+    }), F(
+      b,
       (e) => {
-        m.value = pe(e.filters ?? []);
+        y.value = Ke(e.filters ?? []);
       },
       { immediate: !0 }
-    ), y(
+    ), F(
       () => l.currentViewId,
       (e) => {
-        !e || e === x.value || (s.setActiveViewId(e), e === p && (w.value = !0));
+        !e || e === z.value || (s.setActiveViewId(e), e === k && (_.value = !0));
       },
       { immediate: !0 }
-    ), y(
+    ), F(
       () => l.selectedRecordId,
       (e) => {
         if (e !== void 0) {
           if (!e) {
-            w.value = !1, s.clearSelectedRecord();
+            _.value = !1, f.value = {}, s.clearSelectedRecord();
             return;
           }
-          w.value = !0, s.setSelectedRecord(e);
+          _.value = !0, f.value = {}, s.setSelectedRecord(e);
         }
       },
       { immediate: !0 }
-    ), y(
-      x,
+    ), F(
+      z,
       (e, t) => {
         var a, i;
-        d("update:currentViewId", e), e === p && (w.value = !0), t !== void 0 && e !== t && ((i = (a = l.actions) == null ? void 0 : a.onViewChange) == null || i.call(a, { tableId: l.tableId, view: M(f.value) }));
+        d("update:currentViewId", e), e === k && (_.value = !0), t !== void 0 && e !== t && ((i = (a = l.actions) == null ? void 0 : a.onViewChange) == null || i.call(a, { tableId: l.tableId, view: ne(b.value) }));
       },
       { immediate: !0 }
-    ), y(
-      Ve,
+    ), F(
+      We,
       (e, t) => {
-        d("update:selectedRecordId", e), t !== void 0 && e !== t && d("select-record", q.value ?? null);
+        d("update:selectedRecordId", e), t !== void 0 && e !== t && d("select-record", h.value ?? null);
       },
       { immediate: !0 }
     );
-    const G = n(() => {
+    const H = n(() => {
       const e = l.viewTabs && l.viewTabs.length > 0 ? l.viewTabs.map((i) => ({ ...i })) : s.viewList.value.map((i) => ({
         value: i.id,
         label: i.name,
-        icon: O(i.type)
+        icon: se(i.type)
       })), t = [], a = /* @__PURE__ */ new Set();
       for (const i of e)
         a.has(i.value) || (a.add(i.value), t.push(i));
-      return a.has(p) || t.push({ value: p, label: "详情", icon: O("detail") }), t;
-    }), _e = n(
+      return a.has(k) || t.push({ value: k, label: "详情", icon: se("detail") }), t;
+    }), Oe = n(
       () => s.viewList.value.map((e) => ({
         id: e.id,
         name: e.name
       }))
-    ), z = n(() => ce(f.value, b.value, h.value)), Ie = n(() => ve(b.value, h.value)), Ce = n(() => fe(b.value, h.value)), Fe = n(() => be(q.value)), Se = n(() => V(b.value, h.value)), X = n(() => {
+    ), J = n(() => Be(b.value, V.value, C.value)), X = n(() => Ae(V.value, C.value)), K = n(() => Ne(V.value, C.value)), Y = n(() => Ge(h.value)), ve = n(() => ({
+      ...Y.value,
+      ...f.value
+    })), fe = n(
+      () => new Set(K.value.filter((e) => e.type === "richtext").map((e) => e.id))
+    ), $e = n(
+      () => X.value.filter((e) => !fe.value.has(e.key))
+    ), we = n(
+      () => X.value.filter((e) => fe.value.has(e.key))
+    ), ze = n(() => Object.keys(f.value).length > 0), je = n(() => R(V.value, C.value)), me = n(() => {
       var t;
-      const e = (t = f.value.sorts) == null ? void 0 : t[0];
+      const e = (t = b.value.sorts) == null ? void 0 : t[0];
       return {
         field: (e == null ? void 0 : e.fieldId) ?? null,
         order: (e == null ? void 0 : e.direction) ?? null
       };
-    }), ke = n(() => {
+    }), He = n(() => {
       var e, t;
-      return ((t = (e = f.value.groups) == null ? void 0 : e[0]) == null ? void 0 : t.fieldId) ?? void 0;
-    }), D = n(() => m.value), Te = n(() => D.value.length > 0), Re = n(() => l.showToolbar !== !1), De = n(() => l.showViewSwitch !== !1 && G.value.length > 1), Le = n(() => l.showFilter !== !1), Ee = n(() => l.showSort !== !1), Ae = n(() => l.showGroup !== !1), Be = n(() => l.showColumns !== !1), Ne = n(() => l.showSearch !== !1), Y = n(() => w.value && !!q.value), Ue = n(() => l.loading ?? s.loading.value), L = n(() => l.error ?? s.error.value), I = n(() => {
-      let e = [...h.value];
-      if (_.value.trim()) {
-        const a = _.value.trim().toLowerCase();
+      return ((t = (e = b.value.groups) == null ? void 0 : e[0]) == null ? void 0 : t.fieldId) ?? void 0;
+    }), q = n(() => y.value), Je = n(() => q.value.length > 0), Xe = n(() => l.showToolbar !== !1), Ye = n(() => l.showViewSwitch !== !1 && H.value.length > 1), Ze = n(() => l.showFilter !== !1), Qe = n(() => l.showSort !== !1), et = n(() => l.showGroup !== !1), tt = n(() => l.showColumns !== !1), at = n(() => l.showSearch !== !1), N = n(() => _.value && !!h.value), pe = n(() => l.detailPresentation !== "auto" ? l.detailPresentation : re.value ? "sheet" : "side-panel"), it = n(() => l.loading ?? s.loading.value), G = n(() => l.error ?? s.error.value), L = n(() => {
+      let e = [...C.value];
+      if (D.value.trim()) {
+        const a = D.value.trim().toLowerCase();
         e = e.filter(
-          (i) => Se.value.some(
-            (r) => R(i.fields[r]).toLowerCase().includes(a)
+          (i) => je.value.some(
+            (o) => U(i.fields[o]).toLowerCase().includes(a)
           )
         );
       }
-      D.value.length > 0 && (e = e.filter((a) => {
-        const i = D.value.map((r) => {
-          const o = a.fields[r.field];
-          return me(o, r);
+      q.value.length > 0 && (e = e.filter((a) => {
+        const i = q.value.map((o) => {
+          const r = a.fields[o.field];
+          return xe(r, o);
         });
-        return K.value === "and" ? i.every(Boolean) : i.some(Boolean);
+        return j.value === "and" ? i.every(Boolean) : i.some(Boolean);
       }));
-      const t = X.value;
+      const t = me.value;
       return t.field && t.order && e.sort((a, i) => {
-        const r = F(
+        const o = A(
           a.fields[t.field],
           i.fields[t.field]
         );
-        return t.order === "desc" ? -r : r;
+        return t.order === "desc" ? -o : o;
       }), e;
-    }), xe = n(
-      () => gt(I.value, {
-        startFieldId: c.value === "timeline" ? "startDate" : void 0,
-        endFieldId: c.value === "timeline" ? "endDate" : void 0,
+    }), lt = n(
+      () => zt(L.value, {
+        startFieldId: m.value === "timeline" ? "startDate" : void 0,
+        endFieldId: m.value === "timeline" ? "endDate" : void 0,
         labelFieldId: "title"
       })
-    ), $ = n(() => Ue.value ? "loading" : L.value ? "error" : c.value === "detail" ? Y.value ? "normal" : "empty" : c.value === "timeline" ? xe.value.length > 0 ? "normal" : "empty" : I.value.length > 0 ? "normal" : "empty"), qe = n(() => {
+    ), Z = n(() => it.value ? "loading" : G.value ? "error" : m.value === "detail" ? N.value ? "normal" : "empty" : m.value === "timeline" ? lt.value.length > 0 ? "normal" : "empty" : L.value.length > 0 ? "normal" : "empty"), ot = n(() => {
       var a;
-      if (c.value !== "detail") return;
-      const e = h.value[0];
+      if (m.value !== "detail") return;
+      const e = C.value[0];
       if (e)
         return {
           label: "打开第一条记录",
-          onClick: () => E(e)
+          onClick: () => M(e)
         };
-      const t = ((a = G.value.find((i) => i.value !== p)) == null ? void 0 : a.value) ?? null;
-      return ye(t);
+      const t = ((a = H.value.find((i) => i.value !== k)) == null ? void 0 : a.value) ?? null;
+      return Me(t);
     });
-    function W(e) {
+    function Q(e) {
       s.setRecords(e), d("update:records", e);
     }
-    function E(e) {
-      e && (w.value = !0, s.setSelectedRecord(e));
+    function M(e) {
+      e && (_.value = !0, f.value = {}, s.setSelectedRecord(e));
     }
-    function Z(e) {
-      return e ? h.value.find((t) => t.id === e) ?? null : null;
+    function be(e) {
+      return e ? C.value.find((t) => t.id === e) ?? null : null;
     }
-    function ee(e) {
-      s.viewList.value.some((t) => t.id === e) && (e === p && (w.value = !0), s.switchView(e));
+    function he(e) {
+      s.viewList.value.some((t) => t.id === e) && (e === k && (_.value = !0), s.switchView(e));
     }
-    function Ke(e) {
-      ee(e);
+    function rt(e) {
+      he(e);
     }
-    function Ge(e) {
+    function nt(e) {
       var t, a;
-      s.viewList.value.some((i) => i.id === e) && (e === p && (w.value = !0), s.switchView(e), d("load-view", e), (a = (t = l.actions) == null ? void 0 : t.onViewLoad) == null || a.call(t, { tableId: l.tableId, viewId: e }));
+      s.viewList.value.some((i) => i.id === e) && (e === k && (_.value = !0), s.switchView(e), d("load-view", e), (a = (t = l.actions) == null ? void 0 : t.onViewLoad) == null || a.call(t, { tableId: l.tableId, viewId: e }));
     }
-    function ze(e) {
+    function st(e) {
       s.saveView({ name: e });
     }
-    function A() {
+    function P() {
       s.updateActiveView({
-        filters: he(m.value)
+        filters: qe(y.value)
       });
     }
-    function $e() {
+    function dt() {
       var t;
-      const e = ((t = z.value.find((a) => !a.hidden)) == null ? void 0 : t.key) ?? "";
-      e && (m.value = [...m.value, we(e)], A());
+      const e = ((t = J.value.find((a) => !a.hidden)) == null ? void 0 : t.key) ?? "";
+      e && (y.value = [...y.value, Ue(e)], P());
     }
-    function We(e) {
-      m.value = m.value.filter((t) => t.id !== e), A();
+    function ut(e) {
+      y.value = y.value.filter((t) => t.id !== e), P();
     }
-    function je(e, t) {
-      m.value = m.value.map(
+    function ct(e, t) {
+      y.value = y.value.map(
         (a) => a.id === e ? { ...a, ...t } : a
-      ), A();
+      ), P();
     }
-    function He() {
-      m.value = [], A();
+    function vt() {
+      y.value = [], P();
     }
-    function Me(e) {
-      K.value = e, d("update:filterLogic", e);
+    function ft(e) {
+      j.value = e, d("update:filterLogic", e);
     }
-    function Oe(e) {
+    function wt(e) {
       d("update:columns", e), s.updateActiveView({
         visibleFields: e.filter((t) => !t.hidden).map((t) => t.key)
       });
     }
-    function Pe(e) {
+    function mt(e) {
       var i;
       if (!e) {
         s.updateActiveView({ sorts: [] }), d("sort", e);
         return;
       }
-      const t = (i = f.value.sorts) == null ? void 0 : i[0], a = (t == null ? void 0 : t.fieldId) === e && t.direction === "asc" ? "desc" : "asc";
+      const t = (i = b.value.sorts) == null ? void 0 : i[0], a = (t == null ? void 0 : t.fieldId) === e && t.direction === "asc" ? "desc" : "asc";
       s.updateActiveView({
         sorts: [{ fieldId: e, direction: a }]
       }), d("sort", e);
     }
-    function Je(e) {
+    function pt(e) {
       s.updateActiveView({
         groups: e ? [{ fieldId: e }] : []
       }), d("group", e);
     }
-    function Qe(e) {
-      _.value = e, d("update:searchKeyword", e);
+    function bt(e) {
+      D.value = e, d("update:searchKeyword", e);
     }
-    function C(e) {
+    function E(e) {
       s.emitSchemaEvent(e);
     }
-    function Xe(e, t, a) {
-      const i = h.value.map((r) => r.id !== e ? r : {
-        ...r,
+    function ht(e, t, a) {
+      const i = C.value.map((o) => o.id !== e ? o : {
+        ...o,
         fields: {
-          ...r.fields,
+          ...o.fields,
           [t]: a
         }
       });
-      W(i);
+      Q(i);
     }
-    function te(e) {
-      Xe(e.rowId, e.fieldId, e.value), s.emitCellEdit(e);
+    function ee(e) {
+      ht(e.rowId, e.fieldId, e.value), s.emitCellEdit(e);
     }
-    function Ye(e) {
+    function yt(e) {
       var t, a;
       d("record-change", e), (a = (t = l.actions) == null ? void 0 : t.onRecordChange) == null || a.call(t, { tableId: l.tableId, ...e });
     }
-    function Ze(e) {
-      W(e);
+    function _t(e) {
+      Q(e);
     }
-    function et(e) {
-      E(e);
+    function kt(e) {
+      M(e);
     }
-    function tt(e) {
+    function gt(e) {
       d("row-click", e);
     }
-    function ae(e) {
-      d("card-click", e), E(Z(e.id));
+    function ye(e) {
+      d("card-click", e), M(be(e.id));
+    }
+    function Ct(e) {
+      d("row-click", e), M(be(e.sourceRecordId ?? e.id));
+    }
+    function W() {
+      _.value = !1, f.value = {}, s.clearSelectedRecord();
+    }
+    function _e(e) {
+      for (const [t, a] of Object.entries(e.fields))
+        ee({ rowId: e.rowId, fieldId: t, value: a });
+      f.value = {}, W();
     }
-    function at(e) {
-      d("row-click", e), E(Z(e.sourceRecordId ?? e.id));
+    function ke(e) {
+      const t = C.value.filter((a) => a.id !== e);
+      Q(t), _.value = !1, f.value = {}, s.clearSelectedRecord();
     }
-    function it() {
-      w.value = !1, s.clearSelectedRecord();
+    function Vt(e) {
+      return K.value.find((t) => t.id === e) ?? {
+        id: e,
+        type: "text",
+        label: e
+      };
+    }
+    function te(e) {
+      return Object.prototype.hasOwnProperty.call(f.value, e) ? f.value[e] : Y.value[e];
+    }
+    function It(e) {
+      const t = te(e);
+      return typeof t != "string" || !t ? "" : Te(t);
     }
-    function lt(e) {
-      const t = h.value.filter((a) => a.id !== e);
-      W(t), w.value = !1, s.clearSelectedRecord();
+    function St(e, t, a) {
+      f.value = {
+        ...f.value,
+        [t]: a
+      };
+    }
+    function Ft() {
+      h.value && _e({
+        rowId: h.value.id,
+        fields: { ...f.value }
+      });
     }
     return (e, t) => {
       var a;
-      return v(), g("section", nt({
+      return c(), w("section", Lt({
         class: "of-database-view",
         "data-role": "database-view"
       }, e.$attrs), [
-        $.value === "loading" ? (v(), g("div", Vt, [
-          N(j(ut), {
+        Z.value === "loading" ? (c(), w("div", jt, [
+          ae(ie(Bt), {
             class: "of-database-view__spinner",
             size: 20
           }),
-          t[9] || (t[9] = H("div", { class: "of-database-view__state-text" }, [
-            H("div", { class: "of-database-view__state-title" }, "正在加载数据视图"),
-            H("div", { class: "of-database-view__state-description" }, "请稍候，页面级编排器正在准备当前视图。")
+          t[10] || (t[10] = u("div", { class: "of-database-view__state-text" }, [
+            u("div", { class: "of-database-view__state-title" }, "正在加载数据视图"),
+            u("div", { class: "of-database-view__state-description" }, "请稍候，页面级编排器正在准备当前视图。")
           ], -1))
-        ])) : $.value === "error" ? (v(), g("div", _t, [
-          N(re, {
-            icon: j(ct),
+        ])) : Z.value === "error" ? (c(), w("div", Ht, [
+          ae(Se, {
+            icon: ie(At),
             title: "数据视图加载失败",
-            description: L.value instanceof Error ? L.value.message : String(L.value)
+            description: G.value instanceof Error ? G.value.message : String(G.value)
           }, null, 8, ["icon", "description"])
-        ])) : (v(), g(st, { key: 2 }, [
-          Re.value ? (v(), k(mt, {
+        ])) : (c(), w(le, { key: 2 }, [
+          Xe.value ? (c(), S(qt, {
             key: 0,
             class: "of-database-view__toolbar",
-            "current-view": x.value,
-            "view-tabs": G.value,
-            columns: z.value,
-            "filter-conditions": D.value,
-            "filter-logic": K.value,
-            "filter-active": Te.value,
-            "current-sort": X.value,
-            "current-group": ke.value,
-            "search-keyword": _.value,
-            "show-view-switch": De.value,
-            "show-filter": Le.value,
-            "show-sort": Ee.value,
-            "show-group": Ae.value,
-            "show-columns": Be.value,
-            "show-search": Ne.value,
-            "saved-views": _e.value,
-            "onUpdate:currentView": Ke,
-            "onUpdate:columns": Oe,
-            "onUpdate:searchKeyword": Qe,
-            onAddFilter: $e,
-            onRemoveFilter: We,
-            onUpdateFilter: je,
-            onClearFilters: He,
-            "onUpdate:filterLogic": Me,
-            onSort: Pe,
-            onGroup: Je,
-            onSaveView: ze,
-            onLoadView: Ge
-          }, null, 8, ["current-view", "view-tabs", "columns", "filter-conditions", "filter-logic", "filter-active", "current-sort", "current-group", "search-keyword", "show-view-switch", "show-filter", "show-sort", "show-group", "show-columns", "show-search", "saved-views"])) : dt("", !0),
-          $.value === "empty" ? (v(), g("div", It, [
-            N(re, {
-              icon: j(vt),
+            "current-view": z.value,
+            "view-tabs": H.value,
+            columns: J.value,
+            "filter-conditions": q.value,
+            "filter-logic": j.value,
+            "filter-active": Je.value,
+            "current-sort": me.value,
+            "current-group": He.value,
+            "search-keyword": D.value,
+            "show-view-switch": Ye.value,
+            "show-filter": Ze.value,
+            "show-sort": Qe.value,
+            "show-group": et.value,
+            "show-columns": tt.value,
+            "show-search": at.value,
+            "saved-views": Oe.value,
+            "onUpdate:currentView": rt,
+            "onUpdate:columns": wt,
+            "onUpdate:searchKeyword": bt,
+            onAddFilter: dt,
+            onRemoveFilter: ut,
+            onUpdateFilter: ct,
+            onClearFilters: vt,
+            "onUpdate:filterLogic": ft,
+            onSort: mt,
+            onGroup: pt,
+            onSaveView: st,
+            onLoadView: nt
+          }, null, 8, ["current-view", "view-tabs", "columns", "filter-conditions", "filter-logic", "filter-active", "current-sort", "current-group", "search-keyword", "show-view-switch", "show-filter", "show-sort", "show-group", "show-columns", "show-search", "saved-views"])) : oe("", !0),
+          Z.value === "empty" ? (c(), w("div", Jt, [
+            ae(Se, {
+              icon: ie(Nt),
               title: "暂无记录",
-              description: c.value === "detail" ? "请选择一条记录，详情工作区会在这里打开。" : c.value === "timeline" ? "当前时间线没有可渲染的起止日期。" : "当前视图没有匹配的数据，或者被筛选条件过滤为空。",
-              action: qe.value
+              description: m.value === "detail" ? "请选择一条记录，详情工作区会在这里打开。" : m.value === "timeline" ? "当前时间线没有可渲染的起止日期。" : "当前视图没有匹配的数据，或者被筛选条件过滤为空。",
+              action: ot.value
             }, null, 8, ["icon", "description", "action"])
-          ])) : (v(), g("div", {
+          ])) : (c(), w("div", {
             key: 2,
             class: "of-database-view__content",
-            "data-view": c.value
+            "data-view": m.value
           }, [
-            c.value === "table" ? (v(), k(wt, {
+            m.value === "table" ? (c(), S(Gt, {
               key: 0,
               class: "of-database-view__view of-database-view__view--table",
-              records: I.value,
-              schema: b.value ?? void 0,
-              view: f.value,
-              columns: z.value,
+              records: L.value,
+              schema: V.value ?? void 0,
+              view: b.value,
+              columns: J.value,
               readonly: T.readonly,
               "enable-field-management": ((a = T.ui) == null ? void 0 : a.enableFieldManagement) ?? !1,
-              onCellEdit: te,
-              onSchemaAddField: t[0] || (t[0] = (i) => C({ type: "schema-add-field", fieldType: i })),
-              onSchemaRenameField: t[1] || (t[1] = ({ fieldId: i, newName: r }) => C({ type: "schema-rename-field", fieldId: i, newName: r })),
-              onSchemaChangeFieldType: t[2] || (t[2] = ({ fieldId: i, newType: r }) => C({ type: "schema-change-field-type", fieldId: i, newType: r })),
-              onSchemaHideField: t[3] || (t[3] = (i) => C({ type: "schema-hide-field", fieldId: i })),
-              onSchemaDeleteField: t[4] || (t[4] = (i) => C({ type: "schema-delete-field", fieldId: i })),
-              onSchemaDuplicateField: t[5] || (t[5] = (i) => C({ type: "schema-duplicate-field", fieldId: i })),
-              onRowClick: tt,
-              onRowClickRecord: et
-            }, null, 8, ["records", "schema", "view", "columns", "readonly", "enable-field-management"])) : c.value === "kanban" ? (v(), k(pt, {
+              onCellEdit: ee,
+              onSchemaAddField: t[0] || (t[0] = (i) => E({ type: "schema-add-field", fieldType: i })),
+              onSchemaRenameField: t[1] || (t[1] = ({ fieldId: i, newName: o }) => E({ type: "schema-rename-field", fieldId: i, newName: o })),
+              onSchemaChangeFieldType: t[2] || (t[2] = ({ fieldId: i, newType: o }) => E({ type: "schema-change-field-type", fieldId: i, newType: o })),
+              onSchemaHideField: t[3] || (t[3] = (i) => E({ type: "schema-hide-field", fieldId: i })),
+              onSchemaDeleteField: t[4] || (t[4] = (i) => E({ type: "schema-delete-field", fieldId: i })),
+              onSchemaDuplicateField: t[5] || (t[5] = (i) => E({ type: "schema-duplicate-field", fieldId: i })),
+              onRowClick: gt,
+              onRowClickRecord: kt
+            }, null, 8, ["records", "schema", "view", "columns", "readonly", "enable-field-management"])) : m.value === "kanban" ? (c(), S(Mt, {
               key: 1,
               class: "of-database-view__view of-database-view__view--kanban",
-              records: I.value,
-              schema: b.value ?? void 0,
-              view: f.value,
-              onCardClick: ae,
+              records: L.value,
+              schema: V.value ?? void 0,
+              view: b.value,
+              onCardClick: ye,
               "onUpdate:columns": t[6] || (t[6] = () => {
               }),
               onAddColumn: t[7] || (t[7] = () => d("add-column"))
-            }, null, 8, ["records", "schema", "view"])) : c.value === "gallery" ? (v(), k(ht, {
+            }, null, 8, ["records", "schema", "view"])) : m.value === "gallery" ? (c(), S(Pt, {
               key: 2,
               class: "of-database-view__view of-database-view__view--gallery",
-              records: I.value,
-              schema: b.value ?? void 0,
-              view: f.value,
-              onCardClick: ae,
+              records: L.value,
+              schema: V.value ?? void 0,
+              view: b.value,
+              onCardClick: ye,
               onAdd: t[8] || (t[8] = () => d("add"))
-            }, null, 8, ["records", "schema", "view"])) : c.value === "timeline" ? (v(), k(bt, {
+            }, null, 8, ["records", "schema", "view"])) : m.value === "timeline" ? (c(), S(Wt, {
               key: 3,
               class: "of-database-view__view of-database-view__view--timeline",
-              records: I.value,
-              schema: b.value ?? void 0,
-              "view-config": f.value,
-              onRowClick: at,
-              onRecordChange: Ye,
-              "onUpdate:records": Ze
-            }, null, 8, ["records", "schema", "view-config"])) : (v(), g("div", Ft))
-          ], 8, Ct))
+              records: L.value,
+              schema: V.value ?? void 0,
+              "view-config": b.value,
+              onRowClick: Ct,
+              onRecordChange: yt,
+              "onUpdate:records": _t
+            }, null, 8, ["records", "schema", "view-config"])) : (c(), w("div", Yt))
+          ], 8, Xt))
         ], 64)),
-        N(ft, {
-          visible: Y.value,
-          row: Fe.value,
-          columns: Ie.value,
-          "field-defs": Ce.value,
-          "full-page": c.value === "detail",
+        N.value && pe.value === "side-panel" ? (c(), S(Kt, {
+          key: 3,
+          "model-value": N.value,
+          title: "记录详情",
+          width: 640,
+          mode: "persistent",
+          "onUpdate:modelValue": W
+        }, {
+          default: Et(() => {
+            var i, o, r, v, I;
+            return [
+              u("div", {
+                class: "of-database-view__detail-workspace",
+                "data-record-id": ((i = h.value) == null ? void 0 : i.id) ?? ""
+              }, [
+                u("div", Qt, [
+                  u("div", ea, [
+                    t[11] || (t[11] = u("div", { class: "of-database-view__detail-workspace-kicker" }, "右侧工作区", -1)),
+                    u("h3", ta, x(((r = (o = h.value) == null ? void 0 : o.fields) == null ? void 0 : r.title) ?? ((v = h.value) == null ? void 0 : v.id) ?? "记录详情"), 1)
+                  ]),
+                  u("div", aa, [
+                    u("span", ia, x((I = h.value) == null ? void 0 : I.id), 1),
+                    t[12] || (t[12] = u("span", { class: "of-database-view__detail-workspace-mode" }, "side-panel", -1))
+                  ])
+                ]),
+                u("div", la, [
+                  u("section", oa, [
+                    (c(!0), w(le, null, Ie($e.value, (p) => (c(), w("div", {
+                      key: p.key,
+                      class: "of-database-view__detail-workspace-field"
+                    }, [
+                      u("span", ra, x(p.label), 1),
+                      u("div", na, [
+                        K.value.length > 0 ? (c(), S(xt, {
+                          key: 0,
+                          "row-id": ve.value.id,
+                          field: Vt(p.key),
+                          value: te(p.key),
+                          readonly: T.readonly,
+                          onCommit: St
+                        }, null, 8, ["row-id", "field", "value", "readonly"])) : (c(), w("span", sa, x(te(p.key) ?? "—"), 1))
+                      ])
+                    ]))), 128))
+                  ]),
+                  we.value.length > 0 ? (c(), w("section", da, [
+                    (c(!0), w(le, null, Ie(we.value, (p) => (c(), w("div", {
+                      key: p.key,
+                      class: "of-database-view__detail-workspace-content-block"
+                    }, [
+                      u("span", ua, x(p.label), 1),
+                      u("div", {
+                        class: "of-database-view__detail-workspace-markdown of-markdown",
+                        innerHTML: It(p.key)
+                      }, null, 8, ca)
+                    ]))), 128))
+                  ])) : oe("", !0)
+                ]),
+                u("div", va, [
+                  u("button", {
+                    class: "of-database-view__detail-workspace-btn of-database-view__detail-workspace-btn--delete",
+                    type: "button",
+                    onClick: t[9] || (t[9] = (p) => {
+                      var Ve;
+                      return ke(((Ve = h.value) == null ? void 0 : Ve.id) ?? ve.value.id);
+                    })
+                  }, " 删除 "),
+                  t[13] || (t[13] = u("div", { class: "of-database-view__detail-workspace-footer-spacer" }, null, -1)),
+                  u("button", {
+                    class: "of-database-view__detail-workspace-btn of-database-view__detail-workspace-btn--cancel",
+                    type: "button",
+                    onClick: W
+                  }, " 取消 "),
+                  u("button", {
+                    class: "of-database-view__detail-workspace-btn of-database-view__detail-workspace-btn--save",
+                    type: "button",
+                    disabled: T.readonly || !ze.value,
+                    onClick: Ft
+                  }, " 保存 ", 8, fa)
+                ])
+              ], 8, Zt)
+            ];
+          }),
+          _: 1
+        }, 8, ["model-value"])) : N.value ? (c(), S(Ut, {
+          key: 4,
+          visible: N.value,
+          row: Y.value,
+          columns: X.value,
+          "field-defs": K.value,
+          "full-page": pe.value === "full-page",
           readonly: T.readonly,
-          onClose: it,
-          onDelete: lt,
-          onCellEdit: te
-        }, null, 8, ["visible", "row", "columns", "field-defs", "full-page", "readonly"])
+          onClose: W,
+          onSave: _e,
+          onDelete: ke,
+          onCellEdit: ee
+        }, null, 8, ["visible", "row", "columns", "field-defs", "full-page", "readonly"])) : oe("", !0)
       ], 16);
     };
   }
 });
 export {
-  xt as default
+  Ra as default
 };