@fcurd/core 0.1.0

package/dist/index.js

@@ -0,0 +1,719 @@
+'use strict';
+
+var vue = require('vue');
+
+// src/hooks/useCrudActions.ts
+function useCrudActions(options = {}) {
+  const { actions: initialActions = [] } = options;
+  const actions = vue.ref([...initialActions]);
+  function getByArea(area) {
+    return actions.value.filter((a) => a.area === area).sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+  }
+  function register(action) {
+    const existing = actions.value.findIndex((a) => a.id === action.id);
+    if (existing >= 0) {
+      actions.value[existing] = action;
+    } else {
+      actions.value.push(action);
+    }
+  }
+  function unregister(id) {
+    const idx = actions.value.findIndex((a) => a.id === id);
+    if (idx >= 0) {
+      actions.value.splice(idx, 1);
+    }
+  }
+  return {
+    actions,
+    getByArea,
+    register,
+    unregister
+  };
+}
+function createAction(options) {
+  return {
+    id: "create",
+    label: options.label ?? "\u65B0\u589E",
+    type: "primary",
+    area: "toolbar",
+    order: 0,
+    onClick: options.onClick
+  };
+}
+function editAction(options) {
+  return {
+    id: "edit",
+    label: options.label ?? "\u7F16\u8F91",
+    type: "default",
+    area: "row",
+    order: 0,
+    onClick: (ctx) => {
+      if (ctx.row) {
+        options.onClick(ctx.row);
+      }
+    }
+  };
+}
+function deleteAction(options) {
+  const { adapter, getId = (row) => row?.id, confirm = true } = options;
+  return {
+    id: "delete",
+    label: options.label ?? "\u5220\u9664",
+    type: "error",
+    area: "row",
+    order: 10,
+    confirm: confirm === true ? "\u786E\u5B9A\u8981\u5220\u9664\u6B64\u8BB0\u5F55\u5417\uFF1F" : confirm,
+    onClick: async (ctx) => {
+      if (!ctx.row || !adapter.remove)
+        return;
+      try {
+        const id = getId(ctx.row);
+        await adapter.remove(id);
+        await ctx.refresh();
+        options.onSuccess?.();
+      } catch (err) {
+        options.onError?.(err);
+      }
+    }
+  };
+}
+function batchDeleteAction(options) {
+  const { adapter, getId = (row) => row?.id, confirm = true } = options;
+  return {
+    id: "batchDelete",
+    label: options.label ?? "\u6279\u91CF\u5220\u9664",
+    type: "error",
+    area: "batch",
+    order: 0,
+    confirm: confirm === true ? "\u786E\u5B9A\u8981\u5220\u9664\u9009\u4E2D\u7684\u8BB0\u5F55\u5417\uFF1F" : confirm,
+    visible: (ctx) => ctx.selectedIds.length > 0,
+    onClick: async (ctx) => {
+      if (!adapter.remove || ctx.selectedIds.length === 0)
+        return;
+      try {
+        await Promise.all(ctx.selectedIds.map((id) => adapter.remove(id)));
+        ctx.clearSelection();
+        await ctx.refresh();
+        options.onSuccess?.();
+      } catch (err) {
+        options.onError?.(err);
+      }
+    }
+  };
+}
+function exportAction(options) {
+  const { adapter } = options;
+  return {
+    id: "export",
+    label: options.label ?? "\u5BFC\u51FA",
+    type: "default",
+    area: "toolbar",
+    order: 100,
+    visible: () => typeof adapter.export === "function",
+    onClick: async (ctx) => {
+      if (!adapter.export)
+        return;
+      try {
+        const query = ctx.query ?? {};
+        const sort = ctx.sort ?? null;
+        const result = await adapter.export({
+          query,
+          sort
+        });
+        options.handleExport?.(result, options.filename);
+        options.onSuccess?.();
+      } catch (err) {
+        options.onError?.(err);
+      }
+    }
+  };
+}
+var presetActions = {
+  create: createAction,
+  edit: editAction,
+  delete: deleteAction,
+  batchDelete: batchDeleteAction,
+  export: exportAction
+};
+function useCrudForm(options) {
+  const { fields, initialData } = options;
+  const model = vue.reactive({});
+  const mode = vue.ref("create");
+  const initialSnapshot = vue.ref({});
+  function initModel(data) {
+    Object.keys(model).forEach((key) => {
+      delete model[key];
+    });
+    if (data) {
+      Object.assign(model, data);
+    }
+    initialSnapshot.value = { ...model };
+  }
+  if (initialData) {
+    initModel(initialData);
+  }
+  const changedKeys = vue.computed(() => {
+    const before = initialSnapshot.value ?? {};
+    const after = model;
+    const keys = /* @__PURE__ */ new Set([
+      ...Object.keys(before),
+      ...Object.keys(after)
+    ]);
+    const changed = [];
+    keys.forEach((key) => {
+      const a = before[key];
+      const b = after[key];
+      if (a !== b)
+        changed.push(key);
+    });
+    return changed;
+  });
+  const changedData = vue.computed(() => {
+    const after = model;
+    const data = {};
+    for (const key of changedKeys.value)
+      data[key] = after[key];
+    return data;
+  });
+  const dirty = vue.computed(() => changedKeys.value.length > 0);
+  const visibleFields = vue.computed(() => {
+    return fields.filter((field) => {
+      const formVisible = field.visibleIn?.form;
+      if (formVisible === void 0 || formVisible === true)
+        return true;
+      if (formVisible === false)
+        return false;
+      if (typeof formVisible === "function") {
+        const ctx = {
+          surface: "form",
+          formModel: model
+        };
+        return formVisible(ctx);
+      }
+      return true;
+    });
+  });
+  function reset(data) {
+    initModel(data);
+  }
+  function setMode(newMode) {
+    mode.value = newMode;
+  }
+  function getSubmitData() {
+    if (mode.value === "create") {
+      return { ...model };
+    }
+    return changedData.value;
+  }
+  return {
+    model,
+    mode,
+    dirty,
+    changedKeys,
+    changedData,
+    visibleFields,
+    reset,
+    setMode,
+    getSubmitData
+  };
+}
+function useCrudList(options) {
+  const {
+    adapter,
+    initialQuery,
+    initialPage = 1,
+    initialPageSize = 20,
+    autoFetch = true,
+    debounceMs = 0,
+    dedupe = true,
+    onError
+  } = options;
+  const rows = vue.shallowRef([]);
+  const total = vue.ref(0);
+  const loading = vue.ref(false);
+  const error = vue.ref(null);
+  const query = vue.shallowRef(initialQuery ?? {});
+  const sort = vue.shallowRef(null);
+  const page = vue.ref(initialPage);
+  const pageSize = vue.ref(initialPageSize);
+  let fetchTimer = null;
+  let requestSeq = 0;
+  let activeSeq = 0;
+  let lastKey = null;
+  let activeKey = null;
+  let abortController = null;
+  function buildKey() {
+    try {
+      return JSON.stringify({
+        page: page.value,
+        pageSize: pageSize.value,
+        query: query.value,
+        sort: sort.value
+      });
+    } catch {
+      return null;
+    }
+  }
+  function isAbortError(err) {
+    if (!err || typeof err !== "object")
+      return false;
+    const obj = err;
+    return obj.name === "AbortError" || obj.code === "ABORT_ERR";
+  }
+  function isPlainObject(value) {
+    return Object.prototype.toString.call(value) === "[object Object]";
+  }
+  function pruneEmptyDeep(value) {
+    if (value === void 0 || value === null)
+      return void 0;
+    if (typeof value === "string" && value === "")
+      return void 0;
+    if (Array.isArray(value)) {
+      const next = value.map((v) => pruneEmptyDeep(v)).filter((v) => v !== void 0);
+      return next.length === 0 ? void 0 : next;
+    }
+    if (isPlainObject(value)) {
+      const out = {};
+      for (const [k, v] of Object.entries(value)) {
+        const pv = pruneEmptyDeep(v);
+        if (pv !== void 0)
+          out[k] = pv;
+      }
+      return Object.keys(out).length === 0 ? void 0 : out;
+    }
+    return value;
+  }
+  async function fetchList(opts) {
+    if (!adapter || typeof adapter.list !== "function")
+      return;
+    const force = Boolean(opts?.force);
+    const key = buildKey();
+    if (!force && dedupe && key) {
+      if (key === lastKey || key === activeKey)
+        return;
+    }
+    if (abortController) {
+      try {
+        abortController.abort();
+      } catch {
+      }
+    }
+    abortController = typeof AbortController !== "undefined" ? new AbortController() : null;
+    activeKey = key;
+    const seq = requestSeq += 1;
+    activeSeq = seq;
+    loading.value = true;
+    error.value = null;
+    try {
+      const result = await adapter.list({
+        page: page.value,
+        pageSize: pageSize.value,
+        query: query.value,
+        sort: sort.value,
+        signal: abortController?.signal
+      });
+      if (seq !== activeSeq)
+        return;
+      rows.value = result.items;
+      total.value = result.total;
+      if (key)
+        lastKey = key;
+    } catch (err) {
+      if (isAbortError(err))
+        return;
+      if (seq !== activeSeq)
+        return;
+      error.value = err;
+      if (onError)
+        onError(err);
+    } finally {
+      if (seq === activeSeq) {
+        loading.value = false;
+        activeKey = null;
+      }
+    }
+  }
+  function scheduleFetch() {
+    if (!autoFetch)
+      return;
+    if (fetchTimer) {
+      clearTimeout(fetchTimer);
+      fetchTimer = null;
+    }
+    if (debounceMs > 0) {
+      fetchTimer = setTimeout(() => {
+        fetchTimer = null;
+        void fetchList({ force: false });
+      }, debounceMs);
+      return;
+    }
+    void fetchList({ force: false });
+  }
+  vue.watch([query, sort, page, pageSize], () => {
+    scheduleFetch();
+  }, { deep: false });
+  function setQuery(partial, options2) {
+    const mode = options2?.mode ?? "merge";
+    const clearKeys = options2?.clearKeys ?? [];
+    const shouldPrune = Boolean(options2?.pruneEmpty);
+    const base = mode === "replace" ? {} : { ...query.value };
+    for (const k of clearKeys)
+      delete base[k];
+    const merged = mode === "replace" ? { ...partial } : { ...base, ...partial };
+    const next = shouldPrune ? pruneEmptyDeep(merged) ?? {} : merged;
+    query.value = next;
+    page.value = 1;
+  }
+  function setPage(nextPage) {
+    if (nextPage <= 0)
+      return;
+    page.value = nextPage;
+  }
+  function setPageSize(size) {
+    if (size <= 0)
+      return;
+    pageSize.value = size;
+    page.value = 1;
+  }
+  function setSort(nextSort) {
+    sort.value = nextSort;
+    page.value = 1;
+  }
+  function reset() {
+    query.value = initialQuery ?? {};
+    sort.value = null;
+    page.value = initialPage;
+    pageSize.value = initialPageSize;
+    void fetchList({ force: true });
+  }
+  async function refresh() {
+    await fetchList({ force: true });
+  }
+  scheduleFetch();
+  vue.onScopeDispose(() => {
+    if (fetchTimer) {
+      clearTimeout(fetchTimer);
+      fetchTimer = null;
+    }
+    if (abortController) {
+      try {
+        abortController.abort();
+      } catch {
+      }
+      abortController = null;
+    }
+    activeSeq = 0;
+    activeKey = null;
+  });
+  return {
+    // State
+    rows,
+    total,
+    loading,
+    error,
+    query,
+    sort,
+    page,
+    pageSize,
+    // Actions
+    refresh,
+    setQuery,
+    setPage,
+    setPageSize,
+    setSort,
+    reset
+  };
+}
+function useCrudRouteSync(options) {
+  const {
+    query,
+    setQuery,
+    router,
+    route,
+    queryKey = "q",
+    serialize = (q) => JSON.stringify(q),
+    deserialize = (s) => JSON.parse(s),
+    debounceMs = 300,
+    syncFromRouteMode = "replace"
+  } = options;
+  let syncTimer = null;
+  let isSyncingFromRoute = false;
+  let releaseSyncTimer = null;
+  function isPlainObject(value) {
+    return Object.prototype.toString.call(value) === "[object Object]";
+  }
+  function pruneEmptyDeep(value) {
+    if (value === void 0 || value === null)
+      return void 0;
+    if (typeof value === "string" && value === "")
+      return void 0;
+    if (Array.isArray(value)) {
+      const next = value.map((v) => pruneEmptyDeep(v)).filter((v) => v !== void 0);
+      return next.length === 0 ? void 0 : next;
+    }
+    if (isPlainObject(value)) {
+      const out = {};
+      for (const [k, v] of Object.entries(value)) {
+        const pv = pruneEmptyDeep(v);
+        if (pv !== void 0)
+          out[k] = pv;
+      }
+      return Object.keys(out).length === 0 ? void 0 : out;
+    }
+    return value;
+  }
+  function syncFromRoute() {
+    if (!route)
+      return;
+    const raw = route.query?.[queryKey];
+    if (!raw || typeof raw !== "string")
+      return;
+    try {
+      isSyncingFromRoute = true;
+      const parsed = deserialize(raw);
+      if (parsed && typeof parsed === "object") {
+        setQuery(parsed, {
+          mode: syncFromRouteMode,
+          pruneEmpty: true
+        });
+      }
+    } catch {
+    } finally {
+      if (releaseSyncTimer)
+        clearTimeout(releaseSyncTimer);
+      releaseSyncTimer = setTimeout(() => {
+        releaseSyncTimer = null;
+        isSyncingFromRoute = false;
+      }, 0);
+    }
+  }
+  function syncToRoute() {
+    if (!router || !route || isSyncingFromRoute)
+      return;
+    const currentQuery = query.value;
+    const normalized = pruneEmptyDeep(currentQuery);
+    const isEmpty = normalized === void 0 || isPlainObject(normalized) && Object.keys(normalized).length === 0;
+    const newRouteQuery = { ...route.query };
+    if (isEmpty) {
+      delete newRouteQuery[queryKey];
+    } else {
+      newRouteQuery[queryKey] = serialize(normalized);
+    }
+    const currentStr = route.query?.[queryKey] ?? "";
+    const newStr = newRouteQuery[queryKey] ?? "";
+    if (currentStr !== newStr) {
+      void Promise.resolve(router.replace({ query: newRouteQuery })).catch(() => {
+      });
+    }
+  }
+  vue.watch(
+    query,
+    () => {
+      if (isSyncingFromRoute)
+        return;
+      if (syncTimer) {
+        clearTimeout(syncTimer);
+      }
+      syncTimer = setTimeout(() => {
+        syncTimer = null;
+        syncToRoute();
+      }, debounceMs);
+    },
+    { deep: true }
+  );
+  if (route) {
+    syncFromRoute();
+  }
+  vue.onScopeDispose(() => {
+    if (syncTimer) {
+      clearTimeout(syncTimer);
+      syncTimer = null;
+    }
+    if (releaseSyncTimer) {
+      clearTimeout(releaseSyncTimer);
+      releaseSyncTimer = null;
+    }
+  });
+  return {
+    syncFromRoute,
+    syncToRoute
+  };
+}
+function useCrudSelection(options) {
+  const { rows, getId = (row) => row?.id } = options;
+  const selectedIds = vue.shallowRef(/* @__PURE__ */ new Set());
+  const selectedRowMap = vue.shallowRef(/* @__PURE__ */ new Map());
+  const selectedRows = vue.computed(() => {
+    const ids = selectedIds.value;
+    const map = selectedRowMap.value;
+    const result = [];
+    ids.forEach((id) => {
+      const row = map.get(id);
+      if (row !== void 0)
+        result.push(row);
+    });
+    return result;
+  });
+  const selectedCount = vue.computed(() => selectedIds.value.size);
+  function syncCacheFromRows(nextRows) {
+    const ids = selectedIds.value;
+    if (ids.size === 0)
+      return;
+    const map = new Map(selectedRowMap.value);
+    for (const row of nextRows) {
+      const id = getId(row);
+      if (ids.has(id))
+        map.set(id, row);
+    }
+    selectedRowMap.value = map;
+  }
+  vue.watch(
+    rows,
+    (newRows) => {
+      syncCacheFromRows(newRows);
+    },
+    { immediate: true }
+  );
+  vue.watch(
+    selectedIds,
+    (next) => {
+      const map = new Map(selectedRowMap.value);
+      for (const id of map.keys()) {
+        if (!next.has(id))
+          map.delete(id);
+      }
+      selectedRowMap.value = map;
+      syncCacheFromRows(rows.value);
+    },
+    { deep: false }
+  );
+  function setSelectedIds(ids) {
+    selectedIds.value = new Set(ids);
+  }
+  function select(id) {
+    const newSet = new Set(selectedIds.value);
+    newSet.add(id);
+    selectedIds.value = newSet;
+    const row = rows.value.find((r) => getId(r) === id);
+    if (row !== void 0) {
+      const map = new Map(selectedRowMap.value);
+      map.set(id, row);
+      selectedRowMap.value = map;
+    }
+  }
+  function deselect(id) {
+    const newSet = new Set(selectedIds.value);
+    newSet.delete(id);
+    selectedIds.value = newSet;
+    const map = new Map(selectedRowMap.value);
+    map.delete(id);
+    selectedRowMap.value = map;
+  }
+  function toggle(id) {
+    if (selectedIds.value.has(id)) {
+      deselect(id);
+    } else {
+      select(id);
+    }
+  }
+  function selectAll() {
+    const map = new Map(selectedRowMap.value);
+    const allIds = [];
+    for (const row of rows.value) {
+      const id = getId(row);
+      allIds.push(id);
+      map.set(id, row);
+    }
+    selectedIds.value = new Set(allIds);
+    selectedRowMap.value = map;
+  }
+  function clear() {
+    selectedIds.value = /* @__PURE__ */ new Set();
+    selectedRowMap.value = /* @__PURE__ */ new Map();
+  }
+  function isSelected(id) {
+    return selectedIds.value.has(id);
+  }
+  return {
+    selectedIds,
+    selectedRows,
+    selectedCount,
+    setSelectedIds,
+    select,
+    deselect,
+    toggle,
+    selectAll,
+    clear,
+    isSelected
+  };
+}
+
+// src/utils/fields.ts
+function defineFields(fields) {
+  return fields;
+}
+function filterFieldsBySurface(fields, surface, ctx) {
+  return fields.filter((field) => {
+    const visibility = field.visibleIn?.[surface];
+    if (visibility === void 0 || visibility === true)
+      return true;
+    if (visibility === false)
+      return false;
+    if (typeof visibility === "function") {
+      const fullCtx = {
+        surface,
+        row: ctx?.row,
+        formModel: ctx?.formModel,
+        query: ctx?.query
+      };
+      return visibility(fullCtx);
+    }
+    return true;
+  });
+}
+function getFieldLabel(field) {
+  if (typeof field.label === "function") {
+    return field.label();
+  }
+  return field.label;
+}
+
+// src/utils/columns.ts
+function defineColumns(columns) {
+  return columns;
+}
+function createColumnsFromFields(fields, options) {
+  const { overrides = {}, defaults = {}, filter } = options ?? {};
+  const visibleFields = filter ? fields.filter(filter) : fields.filter((f) => {
+    const tableVisible = f.visibleIn?.table;
+    return tableVisible !== false;
+  });
+  return visibleFields.map((field) => {
+    const override = overrides[field.key] ?? {};
+    return {
+      key: field.key,
+      label: () => getFieldLabel(field),
+      ...defaults,
+      ...override
+    };
+  });
+}
+
+exports.batchDeleteAction = batchDeleteAction;
+exports.createAction = createAction;
+exports.createColumnsFromFields = createColumnsFromFields;
+exports.defineColumns = defineColumns;
+exports.defineFields = defineFields;
+exports.deleteAction = deleteAction;
+exports.editAction = editAction;
+exports.exportAction = exportAction;
+exports.filterFieldsBySurface = filterFieldsBySurface;
+exports.getFieldLabel = getFieldLabel;
+exports.presetActions = presetActions;
+exports.useCrudActions = useCrudActions;
+exports.useCrudForm = useCrudForm;
+exports.useCrudList = useCrudList;
+exports.useCrudRouteSync = useCrudRouteSync;
+exports.useCrudSelection = useCrudSelection;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map