@oneflowui/ui 0.4.3 → 0.5.0

package/dist/composables/useKeyboardNavigation.d.ts

@@ -0,0 +1,45 @@
+import { Ref } from 'vue';
+import { TableColumn } from '../types';
+import { EditingCell } from './useInlineEdit';
+export interface UseKeyboardNavigationOptions {
+    columns: Ref<TableColumn[]>;
+    rows: Ref<Array<{
+        id: string;
+    } & Record<string, any>>>;
+    containerRef: Ref<HTMLElement | null>;
+    editingCell: Ref<EditingCell | null>;
+    enabled: Ref<boolean>;
+    /** Callback to activate inline edit on a cell */
+    onActivateEdit?: (rowId: string, colKey: string) => void;
+    /** Callback to cancel inline edit */
+    onCancelEdit?: () => void;
+    /** Callback to scroll a row into view */
+    onScrollToRow?: (rowIndex: number) => void;
+    /** Callback to get cell text value for copy (optional, enables Ctrl+C) */
+    getCellValue?: (rowId: string, colKey: string) => string;
+    /** Callback when paste data is received (optional, enables Ctrl+V) */
+    onPaste?: (startRowId: string, startColKey: string, data: string[][]) => void;
+}
+export interface SelectedCell {
+    rowId: string;
+    colKey: string;
+}
+export declare function useKeyboardNavigation(options: UseKeyboardNavigationOptions): {
+    activeCell: Readonly<Ref<{
+        readonly rowId: string;
+        readonly colKey: string;
+    } | null, {
+        readonly rowId: string;
+        readonly colKey: string;
+    } | null>>;
+    selectedRange: Readonly<Ref<readonly {
+        readonly rowId: string;
+        readonly colKey: string;
+    }[], readonly {
+        readonly rowId: string;
+        readonly colKey: string;
+    }[]>>;
+    setActiveCell: (rowId: string, colKey: string) => void;
+    clearActiveCell: () => void;
+    handleKeyDown: (e: KeyboardEvent) => void;
+};

package/dist/composables/useKeyboardNavigation.js

@@ -0,0 +1,140 @@
+import { ref as g, readonly as A } from "vue";
+function M(t) {
+  const l = g(null), i = g(null), s = g([]);
+  function k(e, a) {
+    l.value = { rowId: e, colKey: a }, i.value = null, s.value = [];
+  }
+  function m() {
+    l.value = null, i.value = null, s.value = [];
+  }
+  function h() {
+    return t.columns.value.filter((e) => !e.hidden);
+  }
+  function C(e, a) {
+    const n = t.rows.value, c = h(), r = n.findIndex((v) => v.id === e.rowId), u = c.findIndex((v) => v.key === e.colKey), o = n.findIndex((v) => v.id === a.rowId), y = c.findIndex((v) => v.key === a.colKey);
+    if (r === -1 || u === -1 || o === -1 || y === -1)
+      return [];
+    const I = Math.min(r, o), K = Math.max(r, o), d = Math.min(u, y), w = Math.max(u, y), f = [];
+    for (let v = I; v <= K; v++)
+      for (let x = d; x <= w; x++)
+        f.push({ rowId: n[v].id, colKey: c[x].key });
+    return f;
+  }
+  async function S() {
+    if (!t.getCellValue) return;
+    const e = s.value.length > 0 ? s.value : l.value ? [l.value] : [];
+    if (e.length === 0) return;
+    const a = t.rows.value, n = h(), c = [...new Set(e.map((d) => d.rowId))], r = [...new Set(e.map((d) => d.colKey))], u = c.sort((d, w) => a.findIndex((f) => f.id === d) - a.findIndex((f) => f.id === w)), o = r.sort((d, w) => n.findIndex((f) => f.key === d) - n.findIndex((f) => f.key === w)), y = new Set(e.map((d) => `${d.rowId}:${d.colKey}`)), I = [];
+    for (const d of u) {
+      const w = [];
+      for (const f of o)
+        y.has(`${d}:${f}`) ? w.push(t.getCellValue(d, f)) : w.push("");
+      I.push(w.join("	"));
+    }
+    const K = I.join(`
+`);
+    try {
+      await navigator.clipboard.writeText(K);
+    } catch {
+    }
+  }
+  async function E() {
+    if (!t.onPaste || !l.value) return;
+    let e;
+    try {
+      e = await navigator.clipboard.readText();
+    } catch {
+      return;
+    }
+    if (!e) return;
+    const a = e.split(/\r?\n/).filter((n) => n.length > 0).map((n) => n.split("	"));
+    a.length !== 0 && t.onPaste(l.value.rowId, l.value.colKey, a);
+  }
+  function T(e) {
+    var n, c, r;
+    if (!t.enabled.value) return;
+    if (t.editingCell.value !== null) {
+      if (e.key === "Escape") {
+        e.preventDefault(), (n = t.onCancelEdit) == null || n.call(t);
+        return;
+      }
+      if (e.key === "Tab") {
+        e.preventDefault(), (c = t.onCancelEdit) == null || c.call(t), R(e.shiftKey);
+        return;
+      }
+      return;
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key === "c") {
+      e.preventDefault(), S();
+      return;
+    }
+    if ((e.ctrlKey || e.metaKey) && e.key === "v") {
+      e.preventDefault(), E();
+      return;
+    }
+    if (!l.value) {
+      if (["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(e.key)) {
+        e.preventDefault();
+        const u = t.rows.value, o = h();
+        u.length > 0 && o.length > 0 && k(u[0].id, o[0].key);
+      }
+      return;
+    }
+    switch (e.key) {
+      case "ArrowUp":
+        e.preventDefault(), D(-1, e.shiftKey);
+        break;
+      case "ArrowDown":
+        e.preventDefault(), D(1, e.shiftKey);
+        break;
+      case "ArrowLeft":
+        e.preventDefault(), b(-1, e.shiftKey);
+        break;
+      case "ArrowRight":
+        e.preventDefault(), b(1, e.shiftKey);
+        break;
+      case "Enter":
+        e.preventDefault(), l.value && ((r = t.onActivateEdit) == null || r.call(t, l.value.rowId, l.value.colKey));
+        break;
+      case "Escape":
+        e.preventDefault(), m();
+        break;
+      case "Tab":
+        e.preventDefault(), R(e.shiftKey);
+        break;
+    }
+  }
+  function D(e, a = !1) {
+    var u;
+    if (!l.value) return;
+    const n = t.rows.value, c = n.findIndex((o) => o.id === l.value.rowId);
+    if (c === -1) return;
+    const r = c + e;
+    r < 0 || r >= n.length || (a ? (i.value || (i.value = { rowId: l.value.rowId, colKey: l.value.colKey }), l.value = { rowId: n[r].id, colKey: l.value.colKey }, s.value = C(i.value, l.value)) : (i.value = null, s.value = [], l.value = { rowId: n[r].id, colKey: l.value.colKey }), (u = t.onScrollToRow) == null || u.call(t, r));
+  }
+  function b(e, a = !1) {
+    if (!l.value) return;
+    const n = h(), c = n.findIndex((u) => u.key === l.value.colKey);
+    if (c === -1) return;
+    const r = c + e;
+    r < 0 || r >= n.length || (a ? (i.value || (i.value = { rowId: l.value.rowId, colKey: l.value.colKey }), l.value = { rowId: l.value.rowId, colKey: n[r].key }, s.value = C(i.value, l.value)) : (i.value = null, s.value = [], l.value = { rowId: l.value.rowId, colKey: n[r].key }));
+  }
+  function R(e) {
+    var y;
+    if (!l.value) return;
+    const a = t.rows.value, n = h(), c = a.findIndex((I) => I.id === l.value.rowId), r = n.findIndex((I) => I.key === l.value.colKey);
+    if (c === -1 || r === -1) return;
+    let u = r + (e ? -1 : 1), o = c;
+    u >= n.length ? (u = 0, o++) : u < 0 && (u = n.length - 1, o--), !(o < 0 || o >= a.length) && (l.value = { rowId: a[o].id, colKey: n[u].key }, i.value = null, s.value = [], (y = t.onScrollToRow) == null || y.call(t, o));
+  }
+  return {
+    activeCell: A(l),
+    selectedRange: A(s),
+    setActiveCell: k,
+    clearActiveCell: m,
+    handleKeyDown: T
+  };
+}
+export {
+  M as useKeyboardNavigation
+};

package/dist/composables/useRowDrag.d.ts

@@ -0,0 +1,32 @@
+import { Ref } from 'vue';
+import { GroupedListItem } from './useTableGroup';
+export interface UseRowDragOptions<T> {
+    /** The flattened items list (with group headers) */
+    processedItems: Ref<GroupedListItem<T>[]>;
+    /** Whether cross-group drag is allowed */
+    enableCrossGroupDrag?: Ref<boolean>;
+    /** The field id used for grouping (needed for cross-group value update) */
+    groupFieldId?: Ref<string | undefined>;
+}
+export interface RowReorderPayload {
+    rowId: string;
+    beforeRowId: string | null;
+}
+export interface RowGroupChangePayload {
+    rowId: string;
+    groupFieldId: string;
+    newValue: unknown;
+}
+export declare function useRowDrag<T extends Record<string, any>>(options: UseRowDragOptions<T>): {
+    isDragging: Readonly<Ref<boolean, boolean>>;
+    draggedRowId: Readonly<Ref<string | null, string | null>>;
+    dropTargetId: Readonly<Ref<string | null, string | null>>;
+    dropPosition: Readonly<Ref<"before" | "after" | "into-group", "before" | "after" | "into-group">>;
+    handleDragStart: (e: DragEvent, item: GroupedListItem<T>) => void;
+    handleDragOver: (e: DragEvent, targetItem: GroupedListItem<T>) => void;
+    handleDrop: (e: DragEvent, targetItem: GroupedListItem<T>, callbacks: {
+        onReorder?: (payload: RowReorderPayload) => void;
+        onGroupChange?: (payload: RowGroupChangePayload) => void;
+    }) => void;
+    handleDragEnd: () => void;
+};

package/dist/composables/useRowDrag.js

@@ -0,0 +1,85 @@
+import { ref as c, readonly as D } from "vue";
+function y(i) {
+  const I = c(!1), u = c(null), g = c(null), s = c("before");
+  let v = null;
+  function f(e) {
+    return (e == null ? void 0 : e.__type) === "group-header";
+  }
+  function d(e) {
+    return String(e.id ?? "");
+  }
+  function T(e, r) {
+    if (f(r)) {
+      e.preventDefault();
+      return;
+    }
+    v = r, u.value = d(r), I.value = !0, e.dataTransfer && (e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", u.value));
+  }
+  function R(e, r) {
+    var l;
+    if (e.preventDefault(), !v) return;
+    if (e.dataTransfer && (e.dataTransfer.dropEffect = "move"), f(r)) {
+      (l = i.enableCrossGroupDrag) != null && l.value && (g.value = r.id, s.value = "into-group");
+      return;
+    }
+    const n = e.currentTarget;
+    if (!n) return;
+    const t = n.getBoundingClientRect(), p = e.clientY - t.top < t.height / 2;
+    g.value = d(r), s.value = p ? "before" : "after";
+  }
+  function C(e, r, n) {
+    var o, p, l, w;
+    if (e.preventDefault(), !v || !u.value) {
+      h();
+      return;
+    }
+    const t = u.value;
+    if (f(r)) {
+      const a = (o = i.groupFieldId) == null ? void 0 : o.value;
+      a && ((p = i.enableCrossGroupDrag) != null && p.value) && ((l = n.onGroupChange) == null || l.call(n, {
+        rowId: t,
+        groupFieldId: a,
+        newValue: r.__groupKey
+      }));
+    } else {
+      const a = d(r);
+      t !== a && ((w = n.onReorder) == null || w.call(n, {
+        rowId: t,
+        beforeRowId: s.value === "before" ? a : _(a)
+      }));
+    }
+    h();
+  }
+  function G() {
+    h();
+  }
+  function _(e) {
+    const r = i.processedItems.value;
+    for (let n = 0; n < r.length; n++) {
+      const t = r[n];
+      if (!f(t) && d(t) === e) {
+        for (let o = n + 1; o < r.length; o++)
+          if (!f(r[o]))
+            return d(r[o]);
+        return null;
+      }
+    }
+    return null;
+  }
+  function h() {
+    I.value = !1, u.value = null, g.value = null, v = null;
+  }
+  return {
+    isDragging: D(I),
+    draggedRowId: D(u),
+    dropTargetId: D(g),
+    dropPosition: D(s),
+    handleDragStart: T,
+    handleDragOver: R,
+    handleDrop: C,
+    handleDragEnd: G
+  };
+}
+export {
+  y as useRowDrag
+};

package/dist/composables/useSchemaEngine.d.ts

@@ -0,0 +1,31 @@
+import { Ref, ComputedRef } from 'vue';
+import { FieldDef, TableColumn, TableSchema, ViewConfig } from '../types';
+export interface ValidationRule {
+    fieldId: string;
+    type: "required" | "min" | "max" | "pattern" | "custom";
+    message: string;
+    validate: (value: unknown) => boolean;
+}
+export interface FilterFieldConfig {
+    fieldId: string;
+    label: string;
+    type: "string" | "number" | "date" | "select" | "boolean";
+    options?: {
+        value: string;
+        label: string;
+    }[];
+}
+export interface FilterPanelConfig {
+    fields: FilterFieldConfig[];
+}
+export interface UseSchemaEngineOptions {
+    schema: Ref<TableSchema | undefined>;
+    view?: Ref<ViewConfig | undefined>;
+}
+export declare function useSchemaEngine(options: UseSchemaEngineOptions): {
+    columns: ComputedRef<TableColumn[]>;
+    fieldDefs: ComputedRef<FieldDef[]>;
+    validationRules: ComputedRef<Map<string, ValidationRule[]>>;
+    filterConfig: ComputedRef<FilterPanelConfig>;
+    formulaDependencyGraph: ComputedRef<Map<string, string[]>>;
+};

package/dist/composables/useSchemaEngine.js

@@ -0,0 +1,129 @@
+import { computed as l } from "vue";
+function b(n) {
+  const r = l(() => {
+    var e;
+    const s = n.schema.value;
+    if (!s) return [];
+    const i = (e = n.view) == null ? void 0 : e.value;
+    if (i != null && i.visibleFields && i.visibleFields.length > 0) {
+      const a = new Map(s.fields.map((t) => [t.id, t]));
+      return i.visibleFields.map((t) => a.get(t)).filter((t) => t !== void 0 && !t.hidden);
+    }
+    return s.fields.filter((a) => !a.hidden);
+  }), c = l(() => r.value.map((s) => f(s))), m = l(() => {
+    const s = /* @__PURE__ */ new Map(), i = n.schema.value;
+    if (!i) return s;
+    for (const e of i.fields) {
+      const a = [];
+      if (e.required && a.push({
+        fieldId: e.id,
+        type: "required",
+        message: `${e.name} 为必填项`,
+        validate: (t) => t != null && t !== ""
+      }), e.type === "number") {
+        if (e.min !== void 0) {
+          const t = e.min;
+          a.push({
+            fieldId: e.id,
+            type: "min",
+            message: `${e.name} 不能小于 ${t}`,
+            validate: (d) => typeof d == "number" && d >= t
+          });
+        }
+        if (e.max !== void 0) {
+          const t = e.max;
+          a.push({
+            fieldId: e.id,
+            type: "max",
+            message: `${e.name} 不能大于 ${t}`,
+            validate: (d) => typeof d == "number" && d <= t
+          });
+        }
+      }
+      e.type === "email" && a.push({
+        fieldId: e.id,
+        type: "pattern",
+        message: `${e.name} 格式不正确`,
+        validate: (t) => typeof t != "string" || t === "" || /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(t)
+      }), e.type === "url" && a.push({
+        fieldId: e.id,
+        type: "pattern",
+        message: `${e.name} 不是有效的 URL`,
+        validate: (t) => {
+          if (typeof t != "string" || t === "") return !0;
+          try {
+            return new URL(t), !0;
+          } catch {
+            return !1;
+          }
+        }
+      }), a.length > 0 && s.set(e.id, a);
+    }
+    return s;
+  }), u = l(() => ({
+    fields: r.value.map((s) => y(s))
+  })), o = l(() => {
+    const s = /* @__PURE__ */ new Map(), i = n.schema.value;
+    if (!i) return s;
+    for (const e of i.fields)
+      e.type === "formula" && e.dependencies && s.set(e.id, [...e.dependencies]);
+    return s;
+  });
+  return {
+    columns: c,
+    fieldDefs: r,
+    validationRules: m,
+    filterConfig: u,
+    formulaDependencyGraph: o
+  };
+}
+const p = {
+  text: "string",
+  number: "number",
+  currency: "number",
+  progress: "number",
+  rating: "number",
+  date: "date",
+  datetime: "date",
+  select: "status",
+  multi_select: "status"
+};
+function f(n) {
+  return {
+    key: n.id,
+    label: n.name,
+    width: n.width ?? "fill",
+    type: p[n.type] ?? "string",
+    hidden: n.hidden
+  };
+}
+function y(n) {
+  const r = {
+    fieldId: n.id,
+    label: n.name,
+    type: "string"
+  };
+  switch (n.type) {
+    case "number":
+    case "currency":
+    case "progress":
+    case "rating":
+      r.type = "number";
+      break;
+    case "date":
+    case "datetime":
+      r.type = "date";
+      break;
+    case "checkbox":
+      r.type = "boolean";
+      break;
+    case "select":
+    case "multi_select":
+      r.type = "select", r.options = n.options.map((c) => ({ value: c.value, label: c.label }));
+      break;
+  }
+  return r;
+}
+export {
+  b as useSchemaEngine
+};

package/dist/composables/useSearch.d.ts

@@ -0,0 +1,30 @@
+export interface UseSearchOptions {
+    /** 防抖延迟（ms），默认 300 */
+    debounceMs?: number;
+    /** 最小搜索字符数，默认 1 */
+    minChars?: number;
+    /** 搜索模式 */
+    mode?: "client" | "server";
+}
+export interface SearchHighlight {
+    /** 原始文本 */
+    text: string;
+    /** 是否为匹配片段 */
+    match: boolean;
+}
+export declare function useSearch(options?: UseSearchOptions): {
+    /** 绑定到 input 的 v-model */
+    inputKeyword: import('vue').Ref<string, string>;
+    /** 防抖后的搜索词（传给 useSupabaseProvider 的 searchKeyword） */
+    keyword: Readonly<import('vue').Ref<string, string>>;
+    /** 是否有有效搜索词 */
+    isSearching: import('vue').ComputedRef<boolean>;
+    /** 高亮文本分段 */
+    highlightText: (text: string, query?: string) => SearchHighlight[];
+    /** 客户端过滤 */
+    filterBySearch: <T extends Record<string, unknown>>(data: T[], searchColumns: string[]) => T[];
+    /** 清空 */
+    clearSearch: () => void;
+    /** 直接设置 */
+    setKeyword: (val: string) => void;
+};

package/dist/composables/useSearch.js

@@ -0,0 +1,59 @@
+import { ref as f, computed as y, watch as T, readonly as S } from "vue";
+function L(m = {}) {
+  const { debounceMs: h = 300, minChars: a = 1 } = m, u = f(""), r = f(""), w = y(() => r.value.length >= a);
+  let t = null;
+  T(u, (e) => {
+    t && clearTimeout(t);
+    const n = e.trim();
+    if (n.length < a) {
+      r.value = "";
+      return;
+    }
+    t = setTimeout(() => {
+      r.value = n;
+    }, h);
+  });
+  function d(e, n) {
+    const o = n ?? r.value;
+    if (!o || !e)
+      return [{ text: e, match: !1 }];
+    const i = o.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), c = new RegExp(`(${i})`, "gi");
+    return e.split(c).filter(Boolean).map((s) => ({
+      text: s,
+      match: s.toLowerCase() === o.toLowerCase()
+    }));
+  }
+  function g(e, n) {
+    if (!r.value || !n.length) return e;
+    const o = r.value.toLowerCase();
+    return e.filter((i) => n.some((c) => {
+      const l = i[c];
+      return l == null ? !1 : String(l).toLowerCase().includes(o);
+    }));
+  }
+  function p() {
+    u.value = "", r.value = "", t && clearTimeout(t);
+  }
+  function v(e) {
+    u.value = e, r.value = e.trim(), t && clearTimeout(t);
+  }
+  return {
+    /** 绑定到 input 的 v-model */
+    inputKeyword: u,
+    /** 防抖后的搜索词（传给 useSupabaseProvider 的 searchKeyword） */
+    keyword: S(r),
+    /** 是否有有效搜索词 */
+    isSearching: w,
+    /** 高亮文本分段 */
+    highlightText: d,
+    /** 客户端过滤 */
+    filterBySearch: g,
+    /** 清空 */
+    clearSearch: p,
+    /** 直接设置 */
+    setKeyword: v
+  };
+}
+export {
+  L as useSearch
+};

package/dist/composables/useSupabaseProvider.d.ts

@@ -0,0 +1,70 @@
+import { Ref } from 'vue';
+import { SortState } from './useTable';
+import { FilterCondition as TableFilterCondition, FilterLogic } from './useTableFilter';
+export interface SupabaseQueryBuilder {
+    from(table: string): SupabaseFilterBuilder;
+}
+export interface SupabaseFilterBuilder {
+    select(columns?: string, options?: {
+        count?: "exact" | "planned" | "estimated";
+    }): SupabaseFilterBuilder;
+    order(column: string, options?: {
+        ascending?: boolean;
+    }): SupabaseFilterBuilder;
+    range(from: number, to: number): SupabaseFilterBuilder;
+    eq(column: string, value: unknown): SupabaseFilterBuilder;
+    neq(column: string, value: unknown): SupabaseFilterBuilder;
+    gt(column: string, value: unknown): SupabaseFilterBuilder;
+    gte(column: string, value: unknown): SupabaseFilterBuilder;
+    lt(column: string, value: unknown): SupabaseFilterBuilder;
+    lte(column: string, value: unknown): SupabaseFilterBuilder;
+    like(column: string, pattern: string): SupabaseFilterBuilder;
+    ilike(column: string, pattern: string): SupabaseFilterBuilder;
+    is(column: string, value: null): SupabaseFilterBuilder;
+    not(column: string, operator: string, value: unknown): SupabaseFilterBuilder;
+    in(column: string, values: unknown[]): SupabaseFilterBuilder;
+    textSearch(column: string, query: string, options?: {
+        type?: "plain" | "phrase" | "websearch";
+    }): SupabaseFilterBuilder;
+    or(filters: string): SupabaseFilterBuilder;
+    then<T>(onfulfilled?: (value: any) => T): Promise<T>;
+}
+export interface UseSupabaseProviderOptions {
+    /** Supabase client instance (pass your createClient() result) */
+    client: SupabaseQueryBuilder;
+    /** Supabase table name */
+    table: string;
+    /** select columns, defaults to '*' */
+    select?: string;
+    /** Fixed filter conditions always appended (e.g. { project: 'xxx' }) */
+    baseFilters?: Record<string, unknown>;
+    /** Reactive filter conditions from useTableFilter */
+    filterConditions?: Ref<readonly TableFilterCondition[]>;
+    /** Filter logic: and / or */
+    filterLogic?: Ref<FilterLogic>;
+    /** Full-text search keyword */
+    searchKeyword?: Ref<string>;
+    /** Columns to search with ilike */
+    searchColumns?: string[];
+    /** Row transformer: Supabase row -> your T type */
+    transform?: (row: Record<string, unknown>) => Record<string, unknown>;
+}
+export declare function useSupabaseProvider<T extends Record<string, unknown> = Record<string, unknown>>(options: UseSupabaseProviderOptions): {
+    onFetch: (params: {
+        page: number;
+        pageSize: number;
+        sort: SortState;
+    }) => Promise<{
+        data: T[];
+        total: number;
+    }>;
+    totalCount: Readonly<Ref<number, number>>;
+    loading: Readonly<Ref<boolean, boolean>>;
+    error: Readonly<Ref<Error | null, Error | null>>;
+    /** Exposed for advanced usage */
+    buildQuery: (params: {
+        page: number;
+        pageSize: number;
+        sort: SortState;
+    }) => SupabaseFilterBuilder;
+};