@oneflowui/ui 0.4.4 → 0.5.0

package/README.en.md

@@ -4,7 +4,7 @@
 [![npm downloads](https://img.shields.io/npm/dm/@oneflowui/ui.svg)](https://www.npmjs.com/package/@oneflowui/ui)
 [![license](https://img.shields.io/npm/l/@oneflowui/ui.svg)](https://github.com/qixi54/oneui/blob/main/LICENSE)
 
-A **Vue 3 + TypeScript** component library for building task management and productivity applications. Ships **75+ ready-to-use components** covering views, AI chat, dashboards, editors, and more.
+A **Vue 3 + TypeScript** UI library for building task management and productivity applications. It now includes a page-level `DatabaseView` solution on top of the component layer.
 
 > [中文文档](./README.md)
 

package/README.md

@@ -97,6 +97,76 @@ import '@oneflowui/ui/styles'
 
 ---
 
+## 页面级方案
+
+当前已经支持直接从包里接入页面级入口：
+
+```ts
+import { DatabaseView, useDatabaseView } from '@oneflowui/ui'
+```
+
+`DatabaseView` 负责统一页面容器，`useDatabaseView` 负责页面状态编排。`dev` app 也已经接入这条链路，
+用于证明 `local/provider` 双模式、视图切换、selected record 与 detail workspace 可以在同一页面层里闭环。
+
+```ts
+const view = useDatabaseView({
+  mode: 'provider',
+  schemaSource,
+  dataSource,
+  actions: {
+    onFetch,
+    onRefresh,
+    onUpdateRecord,
+    onCreateRecord,
+    onDeleteRecord,
+    onSaveView,
+    onSchemaChange,
+  },
+})
+```
+
+### 模式
+
+- `local` 模式：外部直接传 `schema + records + view`，页面只负责筛选、排序、切视图和展示状态，不触发远程请求。
+- `provider` 模式：外部传入数据获取/刷新能力，页面 shell 只消费 provider 返回的 `schema / records / views`，不绑定具体后端实现。
+
+### actions 契约
+
+页面级方案只回传动作，不在组件内部写死业务逻辑。常见契约如下：
+
+```ts
+type DatabaseViewActions = {
+  onFetch?: (params: { viewId: string }) => Promise<void> | void
+  onRefresh?: () => Promise<void> | void
+  onUpdateRecord?: (recordId: string, patch: Record<string, unknown>) => Promise<void> | void
+  onCreateRecord?: (record: Record<string, unknown>) => Promise<void> | void
+  onDeleteRecord?: (recordId: string) => Promise<void> | void
+  onSaveView?: (viewId: string, payload: Record<string, unknown>) => Promise<void> | void
+  onSchemaChange?: (payload: Record<string, unknown>) => Promise<void> | void
+}
+```
+
+如果接入的是 `provider` 模式，建议把 `onFetch` / `onRefresh` 作为必配项；如果接入的是 `local` 模式，则重点只需要保证 `onUpdateRecord`、`onCreateRecord`、`onDeleteRecord` 和 `onSaveView` 这几类页面动作可回传。
+
+### Selected record / detail workspace
+
+当前 dev app 已经把“选中记录 -> detail workspace”这条链路接起来了：点击 table / kanban / gallery / timeline 中的条目，会把当前记录送入详情工作区，再由 `DetailLayout`、`PropPanel`、`CommentItem` 这组组件展示主内容、属性和活动记录。
+
+这证明页面级方案已经具备“列表视图 + 选中态 + 详情工作区”的最小闭环，并且可以作为业务页面底座直接接入。
+
+### 已支持 / 暂未支持
+
+| 已支持 | 暂未支持 |
+|---|---|
+| `local/provider` 两种模式的页面壳层接入 | 真实 provider 数据闭环、权限与持久化策略 |
+| `normal / loading / empty / error` 四态透传 | 写操作的最终落库与回滚编排 |
+| `table / kanban / gallery / timeline` 多视图切换 | 可编辑 detail workspace 的最终保存、ACL、schema 管理后台 |
+| `search / filter / sort / group / save-view / load-view` 工具栏契约 | 远程视图保存、跨端同步与更重的页面编排 |
+| `schema + records + viewConfig` 数据驱动 | 业务应用侧自定义的 provider 适配层 |
+| `selected record -> detail workspace` 页面链路 | detail 编辑后的最终提交、乐观更新、冲突处理 |
+
+---
+
 ## 组件一览
 
 | 分类 | 组件 |

package/dist/components/database/DatabaseView.vue.d.ts

@@ -0,0 +1,171 @@
+import { Component } from 'vue';
+import { DatabaseViewActions as ViewDatabaseActions, DatabaseViewMode, DatabaseSchemaEvent, DatabaseViewProvider as ViewDatabaseProvider } from '../../composables/useDatabaseView';
+import { FilterLogic } from '../../composables/useTableFilter';
+import { DataRecord, TableColumn, TableSchema, ViewConfig } from '../../types';
+export interface DatabaseViewViewTab {
+    value: string;
+    label: string;
+    icon?: string | Component;
+}
+export type DatabaseViewSchemaEvent = DatabaseSchemaEvent;
+export interface DatabaseViewActions extends ViewDatabaseActions<DataRecord> {
+    onViewChange?: (payload: {
+        tableId: string;
+        view: ViewConfig;
+    }) => void | Promise<void>;
+    onViewLoad?: (payload: {
+        tableId: string;
+        viewId: string;
+    }) => void | Promise<void>;
+    onViewSave?: (payload: {
+        tableId: string;
+        viewId: string;
+        name: string;
+    }) => void | Promise<void>;
+    onRecordChange?: (payload: {
+        tableId: string;
+        recordId: string;
+        startDate?: string;
+        endDate?: string;
+    }) => void | Promise<void>;
+}
+export interface DatabaseViewUiOptions {
+    enableFieldManagement?: boolean;
+}
+export interface DatabaseViewProps {
+    tableId?: string;
+    mode?: DatabaseViewMode;
+    schema?: TableSchema | null;
+    records?: DataRecord[];
+    views?: ViewConfig[];
+    provider?: ViewDatabaseProvider<DataRecord>;
+    defaultView?: ViewConfig;
+    currentViewId?: string;
+    initialViewId?: string;
+    selectedRecordId?: string | null;
+    initialSelectedRecordId?: string | null;
+    searchKeyword?: string;
+    loading?: boolean;
+    error?: string | Error | null;
+    viewTabs?: DatabaseViewViewTab[];
+    actions?: DatabaseViewActions;
+    ui?: DatabaseViewUiOptions;
+    showToolbar?: boolean;
+    showViewSwitch?: boolean;
+    showFilter?: boolean;
+    showSort?: boolean;
+    showGroup?: boolean;
+    showColumns?: boolean;
+    showSearch?: boolean;
+    readonly?: boolean;
+    pageSize?: number;
+    autoLoad?: boolean;
+}
+declare const _default: import('vue').DefineComponent<DatabaseViewProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    sort: (args_0: string) => any;
+    add: () => any;
+    group: (args_0: string | null) => any;
+    "row-click": (args_0: unknown) => any;
+    "cell-edit": (args_0: {
+        rowId: string;
+        fieldId: string;
+        value: unknown;
+    }) => any;
+    "schema-add-field": (args_0: string) => any;
+    "schema-rename-field": (args_0: {
+        fieldId: string;
+        newName: string;
+    }) => any;
+    "schema-change-field-type": (args_0: {
+        fieldId: string;
+        newType: string;
+    }) => any;
+    "schema-hide-field": (args_0: string) => any;
+    "schema-delete-field": (args_0: string) => any;
+    "schema-duplicate-field": (args_0: string) => any;
+    "update:columns": (args_0: TableColumn[]) => any;
+    "update:searchKeyword": (args_0: string) => any;
+    "update:filterLogic": (args_0: FilterLogic) => any;
+    "save-view": (args_0: string) => any;
+    "load-view": (args_0: string) => any;
+    "card-click": (args_0: unknown) => any;
+    "record-change": (args_0: {
+        recordId: string;
+        startDate?: string;
+        endDate?: string;
+    }) => any;
+    "update:records": (args_0: DataRecord[]) => any;
+    "add-column": () => any;
+    "update:currentViewId": (args_0: string) => any;
+    "update:selectedRecordId": (args_0: string | null) => any;
+    "select-record": (args_0: DataRecord | null) => any;
+    refresh: () => any;
+}, string, import('vue').PublicProps, Readonly<DatabaseViewProps> & Readonly<{
+    onSort?: ((args_0: string) => any) | undefined;
+    onAdd?: (() => any) | undefined;
+    onGroup?: ((args_0: string | null) => any) | undefined;
+    "onRow-click"?: ((args_0: unknown) => any) | undefined;
+    "onCell-edit"?: ((args_0: {
+        rowId: string;
+        fieldId: string;
+        value: unknown;
+    }) => any) | undefined;
+    "onSchema-add-field"?: ((args_0: string) => any) | undefined;
+    "onSchema-rename-field"?: ((args_0: {
+        fieldId: string;
+        newName: string;
+    }) => any) | undefined;
+    "onSchema-change-field-type"?: ((args_0: {
+        fieldId: string;
+        newType: string;
+    }) => any) | undefined;
+    "onSchema-hide-field"?: ((args_0: string) => any) | undefined;
+    "onSchema-delete-field"?: ((args_0: string) => any) | undefined;
+    "onSchema-duplicate-field"?: ((args_0: string) => any) | undefined;
+    "onUpdate:columns"?: ((args_0: TableColumn[]) => any) | undefined;
+    "onUpdate:searchKeyword"?: ((args_0: string) => any) | undefined;
+    "onUpdate:filterLogic"?: ((args_0: FilterLogic) => any) | undefined;
+    "onSave-view"?: ((args_0: string) => any) | undefined;
+    "onLoad-view"?: ((args_0: string) => any) | undefined;
+    "onCard-click"?: ((args_0: unknown) => any) | undefined;
+    "onRecord-change"?: ((args_0: {
+        recordId: string;
+        startDate?: string;
+        endDate?: string;
+    }) => any) | undefined;
+    "onUpdate:records"?: ((args_0: DataRecord[]) => any) | undefined;
+    "onAdd-column"?: (() => any) | undefined;
+    "onUpdate:currentViewId"?: ((args_0: string) => any) | undefined;
+    "onUpdate:selectedRecordId"?: ((args_0: string | null) => any) | undefined;
+    "onSelect-record"?: ((args_0: DataRecord | null) => any) | undefined;
+    onRefresh?: (() => any) | undefined;
+}>, {
+    mode: DatabaseViewMode;
+    error: string | Error | null;
+    showFilter: boolean;
+    showGroup: boolean;
+    showSort: boolean;
+    showSearch: boolean;
+    actions: DatabaseViewActions;
+    readonly: boolean;
+    pageSize: number;
+    records: DataRecord[];
+    schema: TableSchema | null;
+    viewTabs: DatabaseViewViewTab[];
+    searchKeyword: string;
+    showViewSwitch: boolean;
+    showColumns: boolean;
+    loading: boolean;
+    tableId: string;
+    views: ViewConfig[];
+    provider: ViewDatabaseProvider<DataRecord>;
+    defaultView: ViewConfig;
+    currentViewId: string;
+    initialViewId: string;
+    selectedRecordId: string | null;
+    initialSelectedRecordId: string | null;
+    ui: DatabaseViewUiOptions;
+    showToolbar: boolean;
+    autoLoad: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,7 @@
+import o from "./DatabaseView.vue2.js";
+/* empty css                  */
+import t from "../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-d15b2365"]]);
+export {
+  m as default
+};