@oneflowui/ui 0.8.3 → 0.8.5

package/dist/components/table/FieldCell.vue.d.ts

@@ -18,17 +18,23 @@ type __VLS_Props = {
     field: FieldDef;
     value?: CellValue;
     readonly?: boolean;
+    editing?: boolean;
 };
 declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     cancel: () => any;
     commit: (rowId: string, fieldId: string, value: CellValue) => any;
     tabNext: () => any;
+    "request-cancel": () => any;
+    "request-edit": (rowId: string, fieldId: string) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
     onCancel?: (() => any) | undefined;
     onCommit?: ((rowId: string, fieldId: string, value: CellValue) => any) | undefined;
     onTabNext?: (() => any) | undefined;
+    "onRequest-cancel"?: (() => any) | undefined;
+    "onRequest-edit"?: ((rowId: string, fieldId: string) => any) | undefined;
 }>, {
     value: string | number | boolean | string[] | null;
+    editing: boolean;
     readonly: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/components/table/FieldCell.vue.js

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

package/dist/components/table/FieldCell.vue2.js

@@ -1,32 +1,39 @@
-import { defineComponent as F, computed as a, defineAsyncComponent as e, openBlock as o, createBlock as d, resolveDynamicComponent as s, withKeys as p, withModifiers as v, normalizeClass as K, withCtx as u, Suspense as M, createElementVNode as D, createElementBlock as y, Fragment as T, unref as V, toDisplayString as $ } from "vue";
+import { defineComponent as F, computed as o, defineAsyncComponent as e, openBlock as a, createBlock as c, resolveDynamicComponent as s, withKeys as p, withModifiers as v, normalizeClass as K, withCtx as m, Suspense as M, createElementVNode as D, createElementBlock as y, Fragment as T, unref as V, toDisplayString as $ } from "vue";
 import { useInlineEdit as j } from "../../composables/useInlineEdit.js";
 const z = {
   key: 1,
   class: "of-field-cell__display"
-}, q = /* @__PURE__ */ F({
+}, G = /* @__PURE__ */ F({
   __name: "FieldCell",
   props: {
     rowId: {},
     field: {},
     value: { type: [String, Number, Boolean, Array, null], default: void 0 },
-    readonly: { type: Boolean, default: !1 }
+    readonly: { type: Boolean, default: !1 },
+    editing: { type: Boolean, default: void 0 }
   },
-  emits: ["commit", "cancel", "tabNext"],
-  setup(i, { emit: b }) {
-    const t = i, c = b, { isEditing: h, activate: k, commit: w, cancel: x } = j(), r = a(() => h(t.rowId, t.field.id)), n = a(() => t.readonly || t.field.readonly), C = a(() => !n.value);
-    function m() {
-      n.value || k(t.rowId, t.field.id);
+  emits: ["commit", "cancel", "request-cancel", "tabNext", "request-edit"],
+  setup(l, { emit: b }) {
+    const t = l, r = b, { isEditing: g, activate: w, commit: h, cancel: k } = j(), x = o(() => g(t.rowId, t.field.id)), d = o(() => t.editing ?? x.value), n = o(() => t.readonly || t.field.readonly), C = o(() => !n.value);
+    function u() {
+      if (!n.value) {
+        if (t.editing !== void 0) {
+          r("request-edit", t.rowId, t.field.id);
+          return;
+        }
+        w(t.rowId, t.field.id);
+      }
     }
-    function g(l) {
-      w(t.rowId, t.field.id, l), c("commit", t.rowId, t.field.id, l);
+    function E(i) {
+      h(t.rowId, t.field.id, i), r("commit", t.rowId, t.field.id, i);
     }
-    function A() {
-      x(), c("cancel");
+    function I() {
+      t.editing === void 0 && k(), r("request-cancel"), r("cancel");
     }
-    function E() {
-      c("tabNext");
+    function A() {
+      r("tabNext");
     }
-    const I = {
+    const B = {
       text: e(() => import("../field/FieldText.vue.js")),
       number: e(() => import("../field/FieldNumber.vue.js")),
       checkbox: e(() => import("../field/FieldCheckbox.vue.js")),
@@ -47,46 +54,46 @@ const z = {
       phone: e(() => import("../field/FieldPhone.vue.js"))
     }, N = e(
       () => import("../field/FieldMarkdownPreview.vue.js")
-    ), B = a(() => I[t.field.type]), S = a(() => {
-      const l = t.value;
-      return l == null || l === "" ? "—" : Array.isArray(l) ? l.join(", ") : typeof l == "boolean" ? l ? "✓" : "—" : String(l);
+    ), q = o(() => B[t.field.type]), S = o(() => {
+      const i = t.value;
+      return i == null || i === "" ? "—" : Array.isArray(i) ? i.join(", ") : typeof i == "boolean" ? i ? "✓" : "—" : String(i);
     });
-    return (l, f) => (o(), d(s(n.value || r.value ? "div" : "button"), {
+    return (i, f) => (a(), c(s(n.value || d.value ? "div" : "button"), {
       class: K(["of-field-cell", {
-        "of-field-cell--editing": r.value,
+        "of-field-cell--editing": d.value,
         "of-field-cell--readonly": n.value,
         "of-field-cell--actionable": C.value
       }]),
-      type: n.value || r.value ? void 0 : "button",
-      "aria-label": `${i.field.label}字段`,
-      title: n.value ? void 0 : `点击编辑 ${i.field.label}`,
-      onClick: m,
+      type: n.value || d.value ? void 0 : "button",
+      "aria-label": `${l.field.label}字段`,
+      title: n.value ? void 0 : `点击编辑 ${l.field.label}`,
+      onClick: u,
       onKeydown: [
-        p(v(m, ["prevent"]), ["enter"]),
-        p(v(m, ["prevent"]), ["space"])
+        p(v(u, ["prevent"]), ["enter"]),
+        p(v(u, ["prevent"]), ["space"])
       ]
     }, {
-      default: u(() => [
-        r.value ? (o(), d(M, { key: 0 }, {
-          fallback: u(() => [...f[0] || (f[0] = [
+      default: m(() => [
+        d.value ? (a(), c(M, { key: 0 }, {
+          fallback: m(() => [...f[0] || (f[0] = [
             D("span", { class: "of-field-cell__loading" }, "...", -1)
           ])]),
-          default: u(() => [
-            (o(), d(s(B.value), {
-              value: i.value,
-              field: i.field,
-              onCommit: g,
-              onCancel: A,
-              onTabNext: E
+          default: m(() => [
+            (a(), c(s(q.value), {
+              value: l.value,
+              field: l.field,
+              onCommit: E,
+              onCancel: I,
+              onTabNext: A
             }, null, 40, ["value", "field"]))
           ]),
           _: 1
-        })) : (o(), y(T, { key: 1 }, [
-          i.field.type === "richtext" && typeof i.value == "string" && i.value ? (o(), d(V(N), {
+        })) : (a(), y(T, { key: 1 }, [
+          l.field.type === "richtext" && typeof l.value == "string" && l.value ? (a(), c(V(N), {
             key: 0,
-            content: i.value,
+            content: l.value,
             "max-lines": 2
-          }, null, 8, ["content"])) : (o(), y("span", z, $(S.value), 1))
+          }, null, 8, ["content"])) : (a(), y("span", z, $(S.value), 1))
         ], 64))
       ]),
       _: 1
@@ -94,5 +101,5 @@ const z = {
   }
 });
 export {
-  q as default
+  G as default
 };

package/dist/composables/index.d.ts

@@ -14,8 +14,8 @@ export { useMarkdown } from './useMarkdown';
 export type { UseMarkdownOptions } from './useMarkdown';
 export { useInlineEdit } from './useInlineEdit';
 export type { EditingCell } from './useInlineEdit';
-export { useVirtualList } from './useVirtualList';
-export type { UseVirtualListOptions, VirtualItem } from './useVirtualList';
+export { createVirtualListState, useVirtualList, useVirtualListStateCache } from './useVirtualList';
+export type { UseVirtualListOptions, VirtualItem, VirtualListState } from './useVirtualList';
 export { useToast } from './useToast';
 export type { UseToastOptions, ToastType, ToastItem } from './useToast';
 export { useTableData } from './useTableData';
@@ -45,7 +45,9 @@ export type { SupabaseQueryBuilder, SupabaseFilterBuilder, UseSupabaseProviderOp
 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 { composeDatabaseViewMiddlewares, createDatabaseViewAnalyticsMiddleware, createDatabaseViewToastMiddleware, createDatabaseViewOptimisticMiddleware, } from './useDatabaseViewMiddleware';
+export type { DatabaseViewActionContext, DatabaseViewActionErrorContext, DatabaseViewActionMiddleware, DatabaseViewActionMiddlewareList, DatabaseViewMode, DatabaseViewFetchParams, DatabaseViewFetchResult, DatabaseViewProvider, DatabaseSchemaEvent, DatabaseViewActions, DatabaseViewDetailOptions, DatabaseViewNavigationOptions, UseDatabaseViewOptions, UseDatabaseViewResult, } from './useDatabaseView';
+export type { DatabaseViewAnalyticsEvent, DatabaseViewAnalyticsMiddlewareOptions, DatabaseViewMiddlewareInput, DatabaseViewOptimisticMiddlewareOptions, DatabaseViewToastMiddlewareOptions, } from './useDatabaseViewMiddleware';
 export { useDatabaseViewport, useDatabaseWorkspaceState } from './useDatabaseWorkspace';
 export { useSearch } from './useSearch';
 export type { UseSearchOptions, SearchHighlight } from './useSearch';

package/dist/composables/useDataTableLayout.d.ts

@@ -5,6 +5,7 @@ export declare function useDataTableLayout(params: {
     density: Ref<Density>;
     containerResponsive: Ref<boolean>;
     isMobile: Ref<boolean>;
+    onContainerWidthChange?: (width: number) => void;
 }): {
     tableContainerWidth: Ref<number, number>;
     containerDensity: import('vue').ComputedRef<Density>;

package/dist/composables/useDataTableLayout.js

@@ -1,38 +1,41 @@
-import { ref as m, onMounted as g, onBeforeUnmount as y, computed as n } from "vue";
+import { ref as x, onMounted as g, onBeforeUnmount as w, computed as o } from "vue";
 import { TABLE_DENSITY_METRICS as h } from "../types/data-table.js";
-function x(c) {
-  const { tableContainerRef: o, density: l, containerResponsive: f, isMobile: v } = c, e = m(0);
-  let t = null;
-  function d() {
+function M(v) {
+  const { tableContainerRef: r, density: u, containerResponsive: s, isMobile: b, onContainerWidthChange: a } = v, e = x(0);
+  let n = null;
+  function f() {
     var i;
-    e.value = ((i = o.value) == null ? void 0 : i.clientWidth) ?? 0;
+    const l = ((i = r.value) == null ? void 0 : i.clientWidth) ?? 0;
+    l !== e.value && (e.value = l, a == null || a(l));
   }
   g(() => {
-    d(), !(typeof ResizeObserver > "u" || !o.value) && (t = new ResizeObserver((i) => {
-      const u = i[0];
-      u && (e.value = u.contentRect.width);
-    }), t.observe(o.value));
-  }), y(() => {
-    t == null || t.disconnect(), t = null;
+    f(), !(typeof ResizeObserver > "u" || !r.value) && (n = new ResizeObserver((l) => {
+      const i = l[0];
+      if (!i) return;
+      const c = i.contentRect.width;
+      c !== e.value && (e.value = c, a == null || a(c));
+    }), n.observe(r.value));
+  }), w(() => {
+    n == null || n.disconnect(), n = null;
   });
-  const r = n(() => !f.value || v.value ? l.value : e.value > 0 && e.value <= 860 ? "compact" : e.value > 0 && e.value <= 1080 && l.value === "comfortable" ? "standard" : l.value), a = n(() => h[r.value]), s = n(() => `of-data-table--${r.value}`), b = n(() => e.value > 0 && e.value <= 860 ? "of-data-table--container-tight" : e.value > 0 && e.value <= 1080 ? "of-data-table--container-medium" : "of-data-table--container-wide"), p = n(() => ({
-    "--of-data-table-group-row-height": `${a.value.groupRowHeight}px`,
-    "--of-data-table-mobile-card-padding-x": `${a.value.mobileCardPaddingX}px`,
-    "--of-data-table-mobile-card-padding-y": `${a.value.mobileCardPaddingY}px`,
-    "--of-data-table-new-row-padding-x": `${a.value.mobileCardPaddingX}px`,
-    "--of-data-table-new-row-padding-y": `${a.value.mobileCardPaddingY}px`,
-    "--of-data-table-fill-min-width": `${a.value.fillMinWidth}px`
+  const d = o(() => !s.value || b.value ? u.value : e.value > 0 && e.value <= 860 ? "compact" : e.value > 0 && e.value <= 1080 && u.value === "comfortable" ? "standard" : u.value), t = o(() => h[d.value]), p = o(() => `of-data-table--${d.value}`), m = o(() => e.value > 0 && e.value <= 860 ? "of-data-table--container-tight" : e.value > 0 && e.value <= 1080 ? "of-data-table--container-medium" : "of-data-table--container-wide"), y = o(() => ({
+    "--of-data-table-group-row-height": `${t.value.groupRowHeight}px`,
+    "--of-data-table-mobile-card-padding-x": `${t.value.mobileCardPaddingX}px`,
+    "--of-data-table-mobile-card-padding-y": `${t.value.mobileCardPaddingY}px`,
+    "--of-data-table-new-row-padding-x": `${t.value.mobileCardPaddingX}px`,
+    "--of-data-table-new-row-padding-y": `${t.value.mobileCardPaddingY}px`,
+    "--of-data-table-fill-min-width": `${t.value.fillMinWidth}px`
   }));
   return {
     tableContainerWidth: e,
-    containerDensity: r,
-    densityMetrics: a,
-    densityClass: s,
-    containerWidthClass: b,
-    densityStyle: p,
-    syncTableContainerWidth: d
+    containerDensity: d,
+    densityMetrics: t,
+    densityClass: p,
+    containerWidthClass: m,
+    densityStyle: y,
+    syncTableContainerWidth: f
   };
 }
 export {
-  x as useDataTableLayout
+  M as useDataTableLayout
 };

package/dist/composables/useDatabaseView.d.ts

@@ -1,4 +1,4 @@
 import { DataRecord } from '../types';
 import { UseDatabaseViewOptions, UseDatabaseViewResult } from '../contracts/database';
-export type { DatabaseViewMode, DatabaseViewFetchParams, DatabaseViewFetchResult, DatabaseViewProvider, DatabaseSchemaEvent, DatabaseViewActions, DatabaseViewDetailOptions, DatabaseViewNavigationOptions, UseDatabaseViewOptions, UseDatabaseViewResult, } from '../contracts/database';
+export type { DatabaseViewActionContext, DatabaseViewActionErrorContext, DatabaseViewActionMiddleware, DatabaseViewActionMiddlewareList, DatabaseViewMode, DatabaseViewFetchParams, DatabaseViewFetchResult, DatabaseViewProvider, DatabaseSchemaEvent, DatabaseViewActions, DatabaseViewDetailOptions, DatabaseViewNavigationOptions, UseDatabaseViewOptions, UseDatabaseViewResult, } from '../contracts/database';
 export declare function useDatabaseView<T extends DataRecord = DataRecord>(options: UseDatabaseViewOptions<T>): UseDatabaseViewResult<T>;