@melt-js/comps-vben 0.0.0-stage → 2026.11.8-2

package/src/plugins/tiptap/types.ts

@@ -0,0 +1,87 @@
+import type { Extensions, JSONContent } from '@tiptap/core';
+import type { Editor } from '@tiptap/vue-3';
+
+import type { Component } from 'vue';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    imageUpload: {
+      uploadImage: () => ReturnType;
+    };
+  }
+}
+
+export interface ImageUploadOptions {
+  /** 允许的文件类型，默认 'image/*' */
+  accept?: string;
+  /** 最大文件大小(字节)，默认 5MB */
+  maxSize?: number;
+  /** 上传失败回调，未提供时使用 alert 弹窗提示 */
+  onUploadError?: (error: unknown) => void;
+  /** 上传函数，返回图片 URL，可选 onProgress 回调报告上传进度 */
+  upload: (
+    file: File,
+    onProgress?: (percent: number) => void,
+  ) => Promise<string>;
+}
+
+export interface TipTapProps {
+  editable?: boolean;
+  extensions?: Extensions;
+  imageUpload?: ImageUploadOptions;
+  minHeight?: number | string;
+  maxHeight?: number | string;
+  placeholder?: string;
+  previewable?: boolean;
+  toolbar?: boolean;
+}
+
+export interface TipTapPreviewProps {
+  class?: any;
+  content?: string;
+  minHeight?: number | string;
+}
+
+export interface VbenTiptapChangeEvent {
+  html: string;
+  json: JSONContent;
+  text: string;
+}
+
+export interface VbenTiptapExtensionOptions {
+  imageUpload?: ImageUploadOptions;
+  /** 内部使用：追踪 blob URL 以便组件销毁时清理 */
+  _blobUrlTracker?: Set<string>;
+  placeholder?: string;
+}
+
+export interface ToolbarAction {
+  action: (editor: Editor) => void;
+  active?: {
+    attrs?: Record<string, unknown>;
+    name: string;
+  };
+  can?: (editor: Editor) => boolean;
+  icon?: Component;
+  indicatorColor?: (editor: Editor) => string | undefined;
+  isActive?: (editor: Editor) => boolean;
+  label: string;
+  menu?: {
+    items: ToolbarMenuItem[];
+  };
+  palette?: {
+    apply: (editor: Editor, color: string) => void;
+    clear?: (editor: Editor) => void;
+    colors: string[];
+    currentColor?: (editor: Editor) => string | undefined;
+  };
+  triggerText?: ((editor?: Editor) => string) | string;
+}
+
+export interface ToolbarMenuItem {
+  action: (editor: Editor) => void;
+  can?: (editor: Editor) => boolean;
+  isActive?: (editor: Editor) => boolean;
+  label: string;
+  shortLabel: string;
+}

package/src/plugins/tiptap/use-tiptap-toolbar.ts

@@ -0,0 +1,176 @@
+import type { Editor } from '@tiptap/vue-3';
+
+import type { ShallowRef } from 'vue';
+
+import type { ToolbarAction, ToolbarMenuItem } from './types';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+interface UseTiptapToolbarOptions {
+  editable: () => boolean;
+  editor: Readonly<ShallowRef<Editor | undefined>>;
+}
+
+export function useTiptapToolbar(options: UseTiptapToolbarOptions) {
+  const getEditor = () => options.editor.value;
+
+  function getActionIndicatorColor(action: ToolbarAction) {
+    const currentEditor = getEditor();
+
+    if (!currentEditor || !action.indicatorColor) {
+      return undefined;
+    }
+
+    return action.indicatorColor(currentEditor);
+  }
+
+  function getPaletteCurrentColor(action: ToolbarAction) {
+    const currentEditor = getEditor();
+
+    if (!currentEditor || !action.palette?.currentColor) {
+      return undefined;
+    }
+
+    return action.palette.currentColor(currentEditor);
+  }
+
+  function canRunAction(action: ToolbarAction) {
+    const currentEditor = getEditor();
+
+    if (!currentEditor || !options.editable()) {
+      return false;
+    }
+
+    return action.can ? action.can(currentEditor) : true;
+  }
+
+  function canRunMenuItem(item: ToolbarMenuItem) {
+    const currentEditor = getEditor();
+
+    if (!currentEditor || !options.editable()) {
+      return false;
+    }
+
+    return item.can ? item.can(currentEditor) : true;
+  }
+
+  function isActionActive(action: ToolbarAction) {
+    const currentEditor = getEditor();
+
+    if (!currentEditor) {
+      return false;
+    }
+
+    if (action.isActive) {
+      return action.isActive(currentEditor);
+    }
+
+    if (!action.active) {
+      return false;
+    }
+
+    return currentEditor.isActive(action.active.name, action.active.attrs);
+  }
+
+  function isMenuItemActive(item: ToolbarMenuItem, currentEditor?: Editor) {
+    const targetEditor = currentEditor ?? getEditor();
+
+    if (!targetEditor || !item.isActive) {
+      return false;
+    }
+
+    return item.isActive(targetEditor);
+  }
+
+  function runAction(action: ToolbarAction) {
+    const currentEditor = getEditor();
+
+    if (!currentEditor || !options.editable()) {
+      return;
+    }
+
+    if (action.menu || action.palette) {
+      return;
+    }
+
+    action.action(currentEditor);
+  }
+
+  function runMenuItem(item: ToolbarMenuItem) {
+    const currentEditor = getEditor();
+
+    if (!currentEditor || !options.editable()) {
+      return;
+    }
+
+    item.action(currentEditor);
+  }
+
+  function applyPaletteColor(action: ToolbarAction, color: string) {
+    const currentEditor = getEditor();
+
+    if (!currentEditor || !action.palette) {
+      return;
+    }
+
+    action.palette.apply(currentEditor, color);
+  }
+
+  function clearPaletteColor(action: ToolbarAction) {
+    const currentEditor = getEditor();
+
+    if (!currentEditor || !action.palette?.clear) {
+      return;
+    }
+
+    action.palette.clear(currentEditor);
+  }
+
+  function getToolbarButtonClass(action: ToolbarAction) {
+    return cn(
+      'relative rounded-[10px] border border-transparent bg-transparent text-muted-foreground shadow-none',
+      'transition-[transform,color,background-color,border-color,box-shadow] duration-200 ease-out',
+      'enabled:hover:-translate-y-px enabled:hover:border-border disabled:opacity-45',
+      'enabled:hover:bg-accent enabled:hover:text-foreground',
+      isActionActive(action) &&
+        'border-primary/30 bg-accent text-primary shadow-primary',
+    );
+  }
+
+  function getPaletteSwatchClass(action: ToolbarAction, color: string) {
+    return cn(
+      'inline-flex size-8 items-center justify-center rounded-full border border-border',
+      'shadow-accent',
+      'transition-[transform,box-shadow,border-color] duration-200 ease-out',
+      'hover:-translate-y-px hover:scale-[1.04]',
+      getPaletteCurrentColor(action) === color &&
+        'border-primary shadow-primary',
+    );
+  }
+
+  function getMenuItemClass(item: ToolbarMenuItem) {
+    return cn(
+      'flex items-center gap-2 rounded-lg p-2 text-left text-sm transition-colors',
+      'disabled:cursor-not-allowed disabled:opacity-45',
+      isMenuItemActive(item)
+        ? 'bg-accent text-foreground'
+        : 'text-muted-foreground hover:bg-accent hover:text-foreground',
+    );
+  }
+
+  return {
+    applyPaletteColor,
+    canRunAction,
+    canRunMenuItem,
+    clearPaletteColor,
+    getActionIndicatorColor,
+    getMenuItemClass,
+    getPaletteCurrentColor,
+    getPaletteSwatchClass,
+    getToolbarButtonClass,
+    isActionActive,
+    isMenuItemActive,
+    runAction,
+    runMenuItem,
+  };
+}

package/src/plugins/types.ts

@@ -0,0 +1,24 @@
+import type { Component } from 'vue';
+
+export interface VbenPluginsFormOptions {
+  useVbenForm: (...args: any[]) => any;
+}
+
+export interface VbenPluginsModalOptions {
+  useVbenModal?: () => any;
+}
+
+export interface VbenPluginsMessageOptions {
+  useMessage?: () => any;
+}
+
+export interface VbenPluginsComponentsOptions {
+  [key: string]: Component;
+}
+
+export interface VbenPluginsOptions {
+  form?: VbenPluginsFormOptions;
+  modal?: VbenPluginsModalOptions;
+  message?: VbenPluginsMessageOptions;
+  components?: VbenPluginsComponentsOptions;
+}

package/src/plugins/vxe-table/README.md

@@ -0,0 +1,50 @@
+# VXE Table Plugin
+
+基于 vxe-table 和 vxe-pc-ui 的表格组件插件。
+
+## 导出
+
+| 导出                  | 类型 | 说明           |
+| --------------------- | ---- | -------------- |
+| `setupVbenVxeTable`   | 函数 | 初始化配置函数 |
+| `useVbenVxeGrid`      | 函数 | 表格组合式函数 |
+| `VbenVxeGrid`         | 组件 | 表格组件       |
+| `VxeTableGridColumns` | 类型 | 表格列类型     |
+| `VxeTableGridOptions` | 类型 | 表格配置类型   |
+| `VxeGridProps`        | 类型 | 表格 Props     |
+| `VxeGridListeners`    | 类型 | 表格事件类型   |
+
+## 使用
+
+```ts
+import {
+  setupVbenVxeTable,
+  useVbenVxeGrid,
+  VbenVxeGrid,
+} from '@vben/plugins/vxe-table';
+```
+
+## 初始化
+
+在应用入口处调用：
+
+```ts
+import { setupVbenVxeTable } from '@vben/plugins/vxe-table';
+import { useVbenForm } from '@vben-core/form-ui';
+
+setupVbenVxeTable({
+  configVxeTable: (vxeUI) => {
+    // 配置 VXE Table
+  },
+  useVbenForm,
+});
+```
+
+## 类型
+
+```ts
+import type {
+  VxeTableGridOptions,
+  VxeGridProps,
+} from '@vben/plugins/vxe-table';
+```

package/src/plugins/vxe-table/api.ts

@@ -0,0 +1,202 @@
+import type { VxeGridInstance } from 'vxe-table';
+
+import type {
+  BaseFormComponentType,
+  ExtendedFormApi,
+  FormValues,
+} from '@melt-js/comps-vben/form-ui';
+
+import type { VxeGridProps } from './types';
+import type { ViewedRowHelper } from './viewed-row';
+
+import { toRaw } from 'vue';
+
+import { Store } from '@melt-js/libs-vben/shared/store';
+import {
+  bindMethods,
+  isBoolean,
+  isFunction,
+  mergeWithArrayOverride,
+  StateHandler,
+} from '@melt-js/libs-vben/shared/utils';
+
+function getDefaultState(): VxeGridProps {
+  return {
+    class: '',
+    gridClass: '',
+    gridOptions: {},
+    gridEvents: {},
+    formOptions: undefined,
+    showSearchForm: true,
+  };
+}
+
+export class VxeGridApi<
+  T extends Record<string, any> = any,
+  D extends BaseFormComponentType = BaseFormComponentType,
+  P extends Record<string, any> = Record<string, never>,
+  TFormValues extends FormValues = FormValues,
+  TSubmitValues extends FormValues = TFormValues,
+> {
+  public formApi = {} as ExtendedFormApi<TFormValues, D, P, TSubmitValues>;
+
+  // private prevState: null | VxeGridProps = null;
+  public grid = {} as VxeGridInstance<T>;
+  public state: null | VxeGridProps<T, D, P, TFormValues, TSubmitValues> = null;
+
+  public store: Store<VxeGridProps<T, D, P, TFormValues, TSubmitValues>>;
+
+  /**
+   * 已读行 helper（在 mount 中初始化，业务能力全部封装在 useViewedRow 中）
+   */
+  public viewedRowHelper: null | ViewedRowHelper<T> = null;
+
+  private isMounted = false;
+
+  private stateHandler: StateHandler;
+
+  constructor(options: VxeGridProps<T, D, P, TFormValues, TSubmitValues> = {}) {
+    const storeState = { ...options };
+
+    const defaultState = getDefaultState();
+    this.store = new Store<VxeGridProps<T, D, P, TFormValues, TSubmitValues>>(
+      mergeWithArrayOverride(storeState, defaultState) as VxeGridProps<
+        T,
+        D,
+        P,
+        TFormValues,
+        TSubmitValues
+      >,
+    );
+
+    this.store.subscribe((state) => {
+      // this.prevState = this.state;
+      this.state = state;
+    });
+
+    this.state = this.store.state;
+    this.stateHandler = new StateHandler();
+    bindMethods(this);
+  }
+
+  /**
+   * 清除所有已读状态
+   */
+  clearViewedRows() {
+    this.viewedRowHelper?.clearViewed();
+  }
+
+  /**
+   * 获取所有已读的 key 集合（返回副本，避免外部修改内部状态）
+   */
+  getViewedKeys(): Set<number | string> {
+    const raw = this.viewedRowHelper?.viewedSet.value;
+    return raw ? new Set(raw) : new Set();
+  }
+
+  /**
+   * 判断某行是否已读
+   */
+  isRowViewed(record: T): boolean {
+    return this.viewedRowHelper?.isViewed(record) ?? false;
+  }
+
+  /**
+   * 批量标记行为已读
+   */
+  markKeysAsViewed(keys: Array<number | string>) {
+    this.viewedRowHelper?.markKeysAsViewed(keys);
+  }
+
+  /**
+   * 标记某行为已读
+   */
+  markRowAsViewed(record: T) {
+    this.viewedRowHelper?.markAsViewed(record);
+  }
+
+  mount(
+    instance: null | VxeGridInstance,
+    formApi: ExtendedFormApi<TFormValues, D, P, TSubmitValues>,
+  ) {
+    if (!this.isMounted && instance) {
+      this.grid = instance;
+      this.formApi = formApi;
+      this.stateHandler.setConditionTrue();
+      this.isMounted = true;
+    }
+  }
+
+  async query(params: Record<string, any> = {}) {
+    try {
+      await this.grid.commitProxy('query', toRaw(params));
+    } catch (error) {
+      console.error('Error occurred while querying:', error);
+    }
+  }
+
+  async reload(params: Record<string, any> = {}) {
+    try {
+      await this.grid.commitProxy('reload', toRaw(params));
+    } catch (error) {
+      console.error('Error occurred while reloading:', error);
+    }
+  }
+
+  /**
+   * 移除指定 key 的已读状态
+   */
+  removeViewedKeys(keys: Array<number | string>) {
+    this.viewedRowHelper?.removeKeys(keys);
+  }
+
+  setGridOptions(
+    options: Partial<
+      VxeGridProps<T, D, P, TFormValues, TSubmitValues>['gridOptions']
+    >,
+  ) {
+    this.setState({
+      gridOptions: options,
+    });
+  }
+
+  setLoading(isLoading: boolean) {
+    this.setState({
+      gridOptions: {
+        loading: isLoading,
+      },
+    });
+  }
+
+  setState(
+    stateOrFn:
+      | ((
+          prev: VxeGridProps<T, D, P, TFormValues, TSubmitValues>,
+        ) => Partial<VxeGridProps<T, D, P, TFormValues, TSubmitValues>>)
+      | Partial<VxeGridProps<T, D, P, TFormValues, TSubmitValues>>,
+  ) {
+    if (isFunction(stateOrFn)) {
+      this.store.setState((prev) => {
+        return mergeWithArrayOverride(stateOrFn(prev), prev);
+      });
+    } else {
+      this.store.setState((prev) => mergeWithArrayOverride(stateOrFn, prev));
+    }
+  }
+
+  toggleSearchForm(show?: boolean) {
+    this.setState({
+      showSearchForm: isBoolean(show) ? show : !this.state?.showSearchForm,
+    });
+    // nextTick(() => {
+    //   this.grid.recalculate();
+    // });
+    return this.state?.showSearchForm;
+  }
+
+  unmount() {
+    this.isMounted = false;
+    this.stateHandler.reset();
+    this.viewedRowHelper = null;
+  }
+}

package/src/plugins/vxe-table/extends.ts

@@ -0,0 +1,150 @@
+import type { VxeUIExport } from 'vxe-table';
+
+import type { Recordable } from '@melt-js/libs-vben/types';
+
+import type { VxeGridApi } from './api';
+import type { VxeGridProps as VbenVxeGridProps } from './types';
+
+import { formatDate, formatDateTime, isFunction } from '@melt-js/libs-vben/utils';
+
+type VbenGridOptions = NonNullable<VbenVxeGridProps['gridOptions']>;
+
+type FormValuesGetter = () => Recordable<any>;
+
+type AjaxFn = (...args: any[]) => any;
+
+const PROXY_AJAX_KEYS = [
+  'query',
+  'querySuccess',
+  'queryError',
+  'queryAll',
+  'queryAllSuccess',
+  'queryAllError',
+] as const;
+
+export function extendProxyOptions(
+  api: VxeGridApi,
+  options: VbenGridOptions,
+  getFormValues: FormValuesGetter,
+) {
+  formValueGetters.set(api, getFormValues);
+  PROXY_AJAX_KEYS.forEach((key) => {
+    extendProxyOption(key, api, options);
+  });
+}
+
+/**
+ * 就地包装传入选项中的 proxyConfig.ajax 回调（不写回 api 状态）。
+ *
+ * gridOptions 可能由父组件以 prop 传入，prop 的优先级高于 state，
+ * extendProxyOptions 写入 state 的包装器会被 prop 遮蔽。因此对最终
+ * 传给 VxeGrid 的选项直接包装（调用方传入克隆对象，源数据不会被修改）。
+ */
+export function wrapProxyAjaxOptions(
+  api: VxeGridApi,
+  options: VbenGridOptions,
+  getFormValues: FormValuesGetter,
+) {
+  formValueGetters.set(api, getFormValues);
+  const ajax = options.proxyConfig?.ajax as Recordable<any> | undefined;
+  if (!ajax) {
+    return;
+  }
+  PROXY_AJAX_KEYS.forEach((key) => {
+    ajax[key] = wrapAjaxFn(api, ajax[key]);
+  });
+}
+
+export function extendsDefaultFormatter(vxeUI: VxeUIExport) {
+  vxeUI.formats.add('formatDate', {
+    tableCellFormatMethod({ cellValue }) {
+      return formatDate(cellValue);
+    },
+  });
+
+  vxeUI.formats.add('formatDateTime', {
+    tableCellFormatMethod({ cellValue }) {
+      return formatDateTime(cellValue);
+    },
+  });
+}
+
+// Tracks ajax handlers wrapped by wrapAjaxFn so repeated wrapping is a no-op
+// instead of stacking wrappers (e.g. setup-time wrap + init-time re-wrap +
+// options recompute). Keyed by function identity.
+const wrappedAjaxFns = new WeakSet<object>();
+
+// Source function -> wrapper, per api: the same source function reuses the
+// same wrapper, so the reference passed to VxeGrid stays stable across option
+// recomputes. Wrappers capture their api, so mappings are never shared across
+// apis.
+const ajaxFnWrappers = new WeakMap<object, WeakMap<object, AjaxFn>>();
+
+// Latest form-value getter per api. The wrapper resolves it at call time, so
+// it stays bound to the current mount's formApi even when the api (and its
+// wrapped callbacks) survives an unmount/remount.
+const formValueGetters = new WeakMap<object, FormValuesGetter>();
+
+function extendProxyOption(
+  key: string,
+  api: VxeGridApi,
+  options: VbenGridOptions,
+) {
+  const { proxyConfig } = options;
+  const configFn = (proxyConfig?.ajax as Recordable<any> | undefined)?.[key];
+  const wrapperFn = wrapAjaxFn(api, configFn);
+  if (wrapperFn === configFn) {
+    return options;
+  }
+  api.setState({
+    gridOptions: {
+      proxyConfig: {
+        ajax: {
+          [key]: wrapperFn,
+        },
+      },
+    },
+  });
+  return options;
+}
+
+/**
+ * 返回 configFn 的包装器（幂等）：非函数或已包装的函数原样返回；
+ * 同一 api 内同一源函数复用同一包装器，保持引用稳定。
+ */
+function wrapAjaxFn(api: VxeGridApi, configFn: unknown): unknown {
+  if (!isFunction(configFn) || wrappedAjaxFns.has(configFn)) {
+    return configFn;
+  }
+  let apiWrappers = ajaxFnWrappers.get(api);
+  if (!apiWrappers) {
+    apiWrappers = new WeakMap();
+    ajaxFnWrappers.set(api, apiWrappers);
+  }
+  let wrapperFn = apiWrappers.get(configFn);
+  if (!wrapperFn) {
+    wrapperFn = async (
+      params: Recordable<any>,
+      customValues: Recordable<any>,
+      ...args: Recordable<any>[]
+    ) => {
+      const formValues = formValueGetters.get(api)?.() ?? {};
+      const data = await configFn(
+        params,
+        {
+          /**
+           * 开启toolbarConfig.refresh功能
+           * 点击刷新按钮 这里的值为PointerEvent 会携带错误参数
+           */
+          ...(customValues instanceof PointerEvent ? {} : customValues),
+          ...formValues,
+        },
+        ...args,
+      );
+      return data;
+    };
+    wrappedAjaxFns.add(wrapperFn);
+    apiWrappers.set(configFn, wrapperFn);
+  }
+  return wrapperFn;
+}

package/src/plugins/vxe-table/index.ts

@@ -0,0 +1,10 @@
+export { setupVbenVxeTable } from './init';
+export type { VxeTableGridColumns, VxeTableGridOptions } from './types';
+export * from './use-vxe-grid';
+
+export { default as VbenVxeGrid } from './use-vxe-grid.vue';
+export type {
+  VxeGridListeners,
+  VxeGridProps,
+  VxeGridPropTypes,
+} from 'vxe-table';