@oneflowui/ui 0.4.4 → 0.5.0

package/dist/components/database/index.d.ts

@@ -0,0 +1,2 @@
+export { default as DatabaseView } from './DatabaseView.vue';
+export type { DatabaseViewActions, DatabaseViewSchemaEvent, DatabaseViewViewTab, DatabaseViewProps, } from './DatabaseView.vue';

package/dist/composables/index.d.ts

@@ -40,5 +40,7 @@ export { useSupabaseProvider } from './useSupabaseProvider';
 export type { SupabaseQueryBuilder, SupabaseFilterBuilder, UseSupabaseProviderOptions, } from './useSupabaseProvider';
 export { useViewPersistence, createLocalStorageBackend, createSupabaseBackend, } from './useViewPersistence';
 export type { ViewStorageBackend, SupabaseViewBackendOptions, UseViewPersistenceOptions, } from './useViewPersistence';
+export { useDatabaseView } from './useDatabaseView';
+export type { DatabaseViewMode, DatabaseViewFetchParams, DatabaseViewFetchResult, DatabaseViewProvider, DatabaseSchemaEvent, DatabaseViewActions, DatabaseViewDetailOptions, DatabaseViewNavigationOptions, UseDatabaseViewOptions, UseDatabaseViewResult, } from './useDatabaseView';
 export { useSearch } from './useSearch';
 export type { UseSearchOptions, SearchHighlight } from './useSearch';

package/dist/composables/useDatabaseView.d.ts

@@ -0,0 +1,138 @@
+import { Ref } from 'vue';
+import { DataRecord, TableSchema, ViewConfig } from '../types';
+import { SortState } from './useTable';
+export type DatabaseViewMode = "local" | "provider";
+export interface DatabaseViewFetchParams {
+    tableId: string;
+    schema: TableSchema | null;
+    view: ViewConfig;
+    page: number;
+    pageSize: number;
+    sort: SortState;
+    selectedRecordId: string | null;
+}
+export interface DatabaseViewFetchResult<T extends DataRecord = DataRecord> {
+    records?: readonly T[] | T[];
+    data?: readonly T[] | T[];
+    total?: number;
+    schema?: TableSchema | null;
+    views?: readonly ViewConfig[] | ViewConfig[] | null;
+    activeViewId?: string | null;
+    selectedRecordId?: string | null;
+}
+export interface DatabaseViewProvider<T extends DataRecord = DataRecord> {
+    mode?: DatabaseViewMode;
+    onFetch?: (params: DatabaseViewFetchParams) => Promise<DatabaseViewFetchResult<T>>;
+    onRefresh?: (params: DatabaseViewFetchParams) => Promise<void> | void;
+}
+export type DatabaseSchemaEvent = {
+    type: "schema-add-field";
+    fieldType: string;
+} | {
+    type: "schema-rename-field";
+    fieldId: string;
+    newName: string;
+} | {
+    type: "schema-change-field-type";
+    fieldId: string;
+    newType: string;
+} | {
+    type: "schema-hide-field";
+    fieldId: string;
+} | {
+    type: "schema-delete-field";
+    fieldId: string;
+} | {
+    type: "schema-duplicate-field";
+    fieldId: string;
+};
+export interface DatabaseViewActions<T extends DataRecord = DataRecord> {
+    onCellEdit?: (payload: {
+        rowId: string;
+        fieldId: string;
+        value: unknown;
+    }) => Promise<void> | void;
+    onSelectRecord?: (record: T | null) => Promise<void> | void;
+    onSchemaEvent?: (event: DatabaseSchemaEvent) => Promise<void> | void;
+    onSaveView?: (view: ViewConfig) => Promise<void> | void;
+    onDeleteView?: (viewId: string) => Promise<void> | void;
+    onRefresh?: () => Promise<void> | void;
+}
+export interface DatabaseViewDetailOptions {
+    clearSelection?: boolean;
+}
+export interface DatabaseViewNavigationOptions {
+    wrap?: boolean;
+    openDetail?: boolean;
+}
+export interface UseDatabaseViewOptions<T extends DataRecord = DataRecord> {
+    tableId: string;
+    mode?: DatabaseViewMode;
+    schema?: Ref<TableSchema | null | undefined> | TableSchema | null | undefined;
+    records?: Ref<readonly T[] | T[] | undefined> | readonly T[] | T[] | undefined;
+    views?: Ref<readonly ViewConfig[] | ViewConfig[] | undefined> | readonly ViewConfig[] | ViewConfig[] | undefined;
+    provider?: DatabaseViewProvider<T>;
+    actions?: DatabaseViewActions<T>;
+    defaultView?: ViewConfig;
+    initialViewId?: string;
+    initialSelectedRecordId?: string | null;
+    initialDetailOpen?: boolean;
+    pageSize?: number;
+    autoLoad?: boolean;
+}
+export interface UseDatabaseViewResult<T extends DataRecord = DataRecord> {
+    tableId: string;
+    mode: Readonly<Ref<DatabaseViewMode>>;
+    schema: Readonly<Ref<TableSchema | null>>;
+    records: Readonly<Ref<readonly T[]>>;
+    views: Readonly<Ref<ViewConfig[]>>;
+    activeViewId: Readonly<Ref<string>>;
+    activeView: Readonly<Ref<ViewConfig>>;
+    selectedRecordId: Readonly<Ref<string | null>>;
+    selectedRecord: Readonly<Ref<T | null>>;
+    selectedRecordIndex: Readonly<Ref<number>>;
+    selectedRecordOrdinal: Readonly<Ref<number | null>>;
+    hasSelectedRecord: Readonly<Ref<boolean>>;
+    detailOpen: Readonly<Ref<boolean>>;
+    detailRecord: Readonly<Ref<T | null>>;
+    loading: Readonly<Ref<boolean>>;
+    error: Readonly<Ref<Error | null>>;
+    page: Readonly<Ref<number>>;
+    pageSize: Readonly<Ref<number>>;
+    totalCount: Readonly<Ref<number>>;
+    viewList: Readonly<Ref<{
+        id: string;
+        name: string;
+        type: ViewConfig["viewType"];
+    }[]>>;
+    isProviderMode: Readonly<Ref<boolean>>;
+    isLocalMode: Readonly<Ref<boolean>>;
+    refresh: () => Promise<void>;
+    getRecordById: (recordId: string) => T | null;
+    getRecordIndex: (recordId: string) => number;
+    selectRecord: (record: T | string | null) => void;
+    openRecordDetail: (record?: T | string | null) => void;
+    closeRecordDetail: (options?: DatabaseViewDetailOptions) => void;
+    toggleRecordDetail: (record?: T | string | null) => void;
+    selectNextRecord: (options?: DatabaseViewNavigationOptions) => void;
+    selectPreviousRecord: (options?: DatabaseViewNavigationOptions) => void;
+    switchView: (viewId: string) => void;
+    setActiveViewId: (viewId: string) => void;
+    createView: (name: string, baseConfig?: Partial<ViewConfig>) => Promise<string>;
+    saveView: (config?: Partial<ViewConfig>) => Promise<void>;
+    deleteView: (viewId: string) => Promise<void>;
+    duplicateView: (sourceViewId: string, newName: string) => Promise<string>;
+    updateActiveView: (patch: Partial<ViewConfig>) => void;
+    setSelectedRecord: (record: T | string | null) => void;
+    clearSelectedRecord: () => void;
+    setPage: (page: number) => void;
+    setPageSize: (pageSize: number) => void;
+    emitCellEdit: (payload: {
+        rowId: string;
+        fieldId: string;
+        value: unknown;
+    }) => Promise<void>;
+    emitSchemaEvent: (event: DatabaseSchemaEvent) => Promise<void>;
+    setRecords: (next: readonly T[] | T[]) => void;
+}
+export declare function useDatabaseView<T extends DataRecord = DataRecord>(options: UseDatabaseViewOptions<T>): UseDatabaseViewResult<T>;

package/dist/composables/useDatabaseView.js

@@ -0,0 +1,388 @@
+import { computed as s, ref as I, shallowRef as De, watch as N } from "vue";
+function Le(l) {
+  return !!(l && typeof l == "object" && "value" in l);
+}
+function G(l) {
+  if (l !== void 0)
+    return Le(l) ? l.value : l;
+}
+function _e(l) {
+  if (l)
+    return { ...l };
+}
+function z(l) {
+  var r, v, a, S;
+  return {
+    ...l,
+    visibleFields: [...l.visibleFields],
+    sorts: (r = l.sorts) == null ? void 0 : r.map(_e).filter((w) => w !== void 0),
+    groups: (v = l.groups) == null ? void 0 : v.map((w) => ({ ...w })),
+    filters: (a = l.filters) == null ? void 0 : a.map((w) => ({ ...w })),
+    aggregations: (S = l.aggregations) == null ? void 0 : S.map((w) => ({ ...w })),
+    fixedColumns: l.fixedColumns ? [...l.fixedColumns] : void 0,
+    galleryCardFields: l.galleryCardFields ? [...l.galleryCardFields] : void 0
+  };
+}
+function ue(l) {
+  return l ? {
+    ...l,
+    fields: l.fields.map((r) => ({ ...r })),
+    views: (l.views ?? []).map(z)
+  } : null;
+}
+function H(l) {
+  return l ? l.map((r) => ({
+    ...r,
+    fields: { ...r.fields }
+  })) : [];
+}
+function J(l) {
+  if (!l) return [];
+  const r = /* @__PURE__ */ new Set(), v = [];
+  for (const a of l)
+    !(a != null && a.viewId) || r.has(a.viewId) || (r.add(a.viewId), v.push(z(a)));
+  return v;
+}
+function K(l, r, v = (r == null ? void 0 : r.viewId) ?? "__default__") {
+  var w;
+  const a = r ? z(r) : void 0, S = (w = a == null ? void 0 : a.visibleFields) != null && w.length ? [...a.visibleFields] : (l == null ? void 0 : l.fields.map((p) => p.id)) ?? [];
+  return {
+    viewId: v,
+    viewType: (a == null ? void 0 : a.viewType) ?? "table",
+    name: (a == null ? void 0 : a.name) ?? (l == null ? void 0 : l.name) ?? "全部记录",
+    visibleFields: S,
+    sorts: a == null ? void 0 : a.sorts,
+    groups: a == null ? void 0 : a.groups,
+    filters: a == null ? void 0 : a.filters,
+    aggregations: a == null ? void 0 : a.aggregations,
+    fixedColumns: a == null ? void 0 : a.fixedColumns,
+    galleryCardFields: a == null ? void 0 : a.galleryCardFields
+  };
+}
+function Ee(l, r, v, a) {
+  const S = l.filter((n) => !a.has(n.viewId)), w = /* @__PURE__ */ new Map();
+  for (const n of S)
+    w.set(n.viewId, n);
+  const p = /* @__PURE__ */ new Map();
+  for (const n of r)
+    a.has(n.viewId) || p.set(n.viewId, n);
+  const V = /* @__PURE__ */ new Map();
+  for (const n of v)
+    a.has(n.viewId) || V.set(n.viewId, n);
+  const y = [], d = /* @__PURE__ */ new Set();
+  for (const n of S) {
+    const D = V.get(n.viewId) ?? p.get(n.viewId) ?? n;
+    y.push(D), d.add(D.viewId);
+  }
+  for (const n of r)
+    a.has(n.viewId) || d.has(n.viewId) || (y.push(n), d.add(n.viewId));
+  for (const n of v)
+    a.has(n.viewId) || d.has(n.viewId) || (y.push(n), d.add(n.viewId));
+  return y;
+}
+function Be(l) {
+  var v;
+  const r = (v = l == null ? void 0 : l.sorts) == null ? void 0 : v[0];
+  return r ? {
+    field: r.fieldId,
+    order: r.direction
+  } : { field: null, order: null };
+}
+function Q(l, r) {
+  return l.some((v) => v.viewId === r);
+}
+function Ae(l) {
+  var ie;
+  const r = s(() => {
+    var e, t;
+    return l.mode ? l.mode : (e = l.provider) != null && e.mode ? l.provider.mode : (t = l.provider) != null && t.onFetch ? "provider" : "local";
+  }), v = s(() => ue(G(l.schema) ?? null)), a = s(() => H(G(l.records))), S = s(() => J(G(l.views))), w = I(null), p = I([]), V = I([]), y = I(/* @__PURE__ */ new Set()), d = De(a.value), n = I(!1), D = I(null), E = I(d.value.length), L = I(1), k = I(l.pageSize ?? 20), f = I(
+    l.initialSelectedRecordId !== void 0 ? l.initialSelectedRecordId : ((ie = d.value[0]) == null ? void 0 : ie.id) ?? null
+  ), m = I(l.initialViewId ?? ""), $ = I(!1), B = I(0), F = I(l.initialSelectedRecordId === void 0), q = s(() => w.value ?? v.value), b = s(() => {
+    var i;
+    const e = [...((i = v.value) == null ? void 0 : i.views) ?? [], ...S.value], t = J(e);
+    return t.length > 0 ? t : [K(v.value, l.defaultView)];
+  }), g = s(
+    () => Ee(b.value, p.value, V.value, y.value)
+  ), C = s(() => g.value.find((t) => t.viewId === m.value) ?? g.value[0] ?? K(q.value, l.defaultView, m.value || "__default__")), O = s(() => f.value ? d.value.find((e) => e.id === f.value) ?? null : null), T = s(() => f.value ? d.value.findIndex((e) => e.id === f.value) : -1), U = s(() => T.value >= 0), re = s(
+    () => U.value ? T.value + 1 : null
+  ), h = I(!!(l.initialDetailOpen ?? l.initialSelectedRecordId)), ce = s(() => h.value ? O.value : null), de = s(
+    () => g.value.map((e) => ({
+      id: e.viewId,
+      name: e.name,
+      type: e.viewType
+    }))
+  ), M = s(() => {
+    var e;
+    return r.value === "provider" && !!((e = l.provider) != null && e.onFetch);
+  }), oe = s(() => !M.value);
+  function x(e) {
+    D.value = e instanceof Error ? e : new Error(String(e));
+  }
+  function W(e) {
+    return d.value.findIndex((t) => t.id === e);
+  }
+  function ve(e) {
+    return d.value.find((t) => t.id === e) ?? null;
+  }
+  function fe(e) {
+    return W(e) >= 0;
+  }
+  function X(e) {
+    return e == null ? null : typeof e == "string" ? e : e.id;
+  }
+  function _() {
+    var e;
+    Q(g.value, m.value) || (m.value = ((e = g.value[0]) == null ? void 0 : e.viewId) ?? K(q.value, l.defaultView).viewId);
+  }
+  function P() {
+    var e;
+    F.value && (!f.value || !fe(f.value)) && (f.value = ((e = d.value[0]) == null ? void 0 : e.id) ?? null);
+  }
+  function Y(e) {
+    F.value = !1, f.value = X(e);
+  }
+  function Z(e) {
+    F.value = !1, e !== void 0 && (f.value = X(e)), h.value = !0;
+  }
+  function ee(e) {
+    h.value = !1, e != null && e.clearSelection && (F.value = !1, f.value = null);
+  }
+  function se(e) {
+    if (h.value) {
+      ee();
+      return;
+    }
+    Z(e);
+  }
+  function le(e, t) {
+    const i = d.value.length;
+    if (i <= 0) return;
+    const c = T.value;
+    let o = c >= 0 ? c + e : e > 0 ? 0 : i - 1;
+    if (t != null && t.wrap)
+      o = (o + i) % i;
+    else if (o < 0 || o >= i)
+      return;
+    const u = d.value[o];
+    u && (F.value = !1, f.value = u.id, ((t == null ? void 0 : t.openDetail) ?? h.value) && (h.value = !0));
+  }
+  function we(e) {
+    le(1, e);
+  }
+  function Ie(e) {
+    le(-1, e);
+  }
+  function j(e) {
+    const t = z(e);
+    V.value = [...V.value.filter((i) => i.viewId !== t.viewId), t], y.value.delete(t.viewId), _();
+  }
+  function te(e) {
+    V.value = V.value.filter((t) => t.viewId !== e);
+  }
+  function me(e) {
+    y.value = /* @__PURE__ */ new Set([...y.value, e]), te(e);
+  }
+  async function A() {
+    var i, c, o;
+    const e = {
+      tableId: l.tableId,
+      schema: q.value,
+      view: C.value,
+      page: L.value,
+      pageSize: k.value,
+      sort: Be(C.value),
+      selectedRecordId: f.value
+    };
+    if (D.value = null, (i = l.actions) != null && i.onRefresh)
+      try {
+        await l.actions.onRefresh();
+      } catch (u) {
+        x(u);
+        return;
+      }
+    if ((c = l.provider) != null && c.onRefresh)
+      try {
+        await l.provider.onRefresh(e);
+      } catch (u) {
+        x(u);
+        return;
+      }
+    if (!M.value || !((o = l.provider) != null && o.onFetch)) {
+      d.value = a.value, E.value = d.value.length, P(), _(), $.value = !1;
+      return;
+    }
+    const t = B.value + 1;
+    B.value = t, n.value = !0;
+    try {
+      const u = await l.provider.onFetch(e);
+      if (B.value !== t) return;
+      const R = H(u.records ?? u.data);
+      d.value = R, E.value = u.total ?? R.length, u.schema !== void 0 && (w.value = ue(u.schema)), u.views !== void 0 && u.views !== null && (p.value = J(u.views)), u.activeViewId && (m.value = u.activeViewId), u.selectedRecordId !== void 0 && (F.value = !1, f.value = u.selectedRecordId, u.selectedRecordId === null && (h.value = !1)), $.value = !0, _(), P();
+    } catch (u) {
+      B.value === t && x(u);
+    } finally {
+      B.value === t && (n.value = !1);
+    }
+  }
+  function ae(e) {
+    Q(g.value, e) && (m.value = e, L.value = 1, M.value && A());
+  }
+  function ge(e) {
+    ae(e);
+  }
+  async function he(e) {
+    var c, o;
+    const t = C.value, i = z({
+      ...t,
+      ...e,
+      viewId: t.viewId
+    });
+    j(i);
+    try {
+      await ((o = (c = l.actions) == null ? void 0 : c.onSaveView) == null ? void 0 : o.call(c, i));
+    } catch (u) {
+      x(u);
+    }
+  }
+  async function ne(e, t) {
+    var o, u;
+    const i = `view-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 6)}`, c = z({
+      ...C.value,
+      ...t,
+      viewId: i,
+      name: e
+    });
+    j(c), m.value = i, L.value = 1;
+    try {
+      await ((u = (o = l.actions) == null ? void 0 : o.onSaveView) == null ? void 0 : u.call(o, c));
+    } catch (R) {
+      x(R);
+    }
+    return i;
+  }
+  async function Re(e) {
+    var c, o, u;
+    if (!Q(g.value, e)) return;
+    const t = m.value === e;
+    b.value.some((R) => R.viewId === e) ? me(e) : te(e), t && (m.value = ((c = g.value.find((R) => R.viewId !== e)) == null ? void 0 : c.viewId) ?? "", _());
+    try {
+      await ((u = (o = l.actions) == null ? void 0 : o.onDeleteView) == null ? void 0 : u.call(o, e));
+    } catch (R) {
+      x(R);
+    }
+  }
+  async function Se(e, t) {
+    const i = g.value.find((c) => c.viewId === e);
+    return i ? ne(t, { ...i }) : "";
+  }
+  function ye(e) {
+    const t = z({
+      ...C.value,
+      ...e,
+      viewId: C.value.viewId
+    });
+    j(t);
+  }
+  function Ve(e) {
+    Y(e), f.value === null && (h.value = !1);
+  }
+  function xe() {
+    F.value = !1, f.value = null, h.value = !1;
+  }
+  function pe(e) {
+    L.value = Math.max(1, Math.floor(e) || 1), M.value && A();
+  }
+  function Fe(e) {
+    k.value = Math.max(1, Math.floor(e) || 1), L.value = 1, M.value && A();
+  }
+  async function Ce(e) {
+    var t, i;
+    try {
+      await ((i = (t = l.actions) == null ? void 0 : t.onCellEdit) == null ? void 0 : i.call(t, e));
+    } catch (c) {
+      x(c);
+    }
+  }
+  async function Me(e) {
+    var t, i;
+    try {
+      await ((i = (t = l.actions) == null ? void 0 : t.onSchemaEvent) == null ? void 0 : i.call(t, e));
+    } catch (c) {
+      x(c);
+    }
+  }
+  function ze(e) {
+    const t = H(e);
+    d.value = t, E.value = t.length, P();
+  }
+  return N(
+    a,
+    (e) => {
+      M.value && $.value || (d.value = e, E.value = e.length, P());
+    },
+    { immediate: !0 }
+  ), N(
+    b,
+    () => {
+      _();
+    },
+    { immediate: !0, deep: !0 }
+  ), N(
+    O,
+    () => {
+      var e, t;
+      (t = (e = l.actions) == null ? void 0 : e.onSelectRecord) == null || t.call(e, O.value);
+    },
+    { immediate: !0, deep: !1, flush: "sync" }
+  ), l.autoLoad !== !1 ? A() : (_(), P()), {
+    tableId: l.tableId,
+    mode: r,
+    schema: q,
+    records: d,
+    views: g,
+    activeViewId: m,
+    activeView: C,
+    selectedRecordId: f,
+    selectedRecord: O,
+    selectedRecordIndex: T,
+    selectedRecordOrdinal: re,
+    hasSelectedRecord: U,
+    detailOpen: h,
+    detailRecord: ce,
+    loading: n,
+    error: D,
+    page: L,
+    pageSize: k,
+    totalCount: E,
+    viewList: de,
+    isProviderMode: M,
+    isLocalMode: oe,
+    refresh: A,
+    getRecordById: ve,
+    getRecordIndex: W,
+    selectRecord: Y,
+    openRecordDetail: Z,
+    closeRecordDetail: ee,
+    toggleRecordDetail: se,
+    selectNextRecord: we,
+    selectPreviousRecord: Ie,
+    switchView: ae,
+    setActiveViewId: ge,
+    createView: ne,
+    saveView: he,
+    deleteView: Re,
+    duplicateView: Se,
+    updateActiveView: ye,
+    setSelectedRecord: Ve,
+    clearSelectedRecord: xe,
+    setPage: pe,
+    setPageSize: Fe,
+    emitCellEdit: Ce,
+    emitSchemaEvent: Me,
+    setRecords: ze
+  };
+}
+export {
+  Ae as useDatabaseView
+};

package/dist/index.d.ts

@@ -9,6 +9,8 @@ export { ActivityTimeline, GanttTimeline, GanttRow } from './components/timeline
 export type { ActivityTimelineProps, ActivityTimelineStatus, TimelineItem, } from './components/timeline';
 export { ContentBlock, BlockQuote, CodeBlock, RefLink, RichTextEditor } from './components/editor';
 export { FormDesigner } from './components/form';
+export { DatabaseView } from './components/database';
+export type { DatabaseViewActions as DatabaseViewComponentActions, DatabaseViewSchemaEvent, DatabaseViewViewTab, DatabaseViewProps, } from './components/database';
 export { ColorPanel, PersonPanel, FileUpload } from './components/auxiliary';
 export { DetailLayout, PropPanel, PropRow, CommentItem } from './components/detail';
 export { Dashboard, BarChart, PieChart, DoughnutChart, NumberCard, TableChart, } from './components/Dashboard';
@@ -66,6 +68,8 @@ export { useSupabaseProvider } from './composables/useSupabaseProvider';
 export type { SupabaseQueryBuilder, SupabaseFilterBuilder, UseSupabaseProviderOptions, } from './composables/useSupabaseProvider';
 export { useViewPersistence, createLocalStorageBackend, createSupabaseBackend, } from './composables/useViewPersistence';
 export type { ViewStorageBackend, SupabaseViewBackendOptions, UseViewPersistenceOptions, } from './composables/useViewPersistence';
+export { useDatabaseView } from './composables/useDatabaseView';
+export type { DatabaseViewMode, DatabaseViewFetchParams, DatabaseViewFetchResult, DatabaseViewProvider, DatabaseSchemaEvent, DatabaseViewActions, UseDatabaseViewOptions, UseDatabaseViewResult, } from './composables/useDatabaseView';
 export { useSearch } from './composables/useSearch';
 export type { UseSearchOptions, SearchHighlight as SearchHighlightSegment, } from './composables/useSearch';
 export declare const OneflowUI: {