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

package/src/popup-ui/drawer/index.ts

@@ -0,0 +1,7 @@
+export type * from './drawer';
+export { default as VbenDrawer } from './drawer.vue';
+export {
+  createVbenDrawer,
+  setDefaultDrawerProps,
+  useVbenDrawer,
+} from './use-drawer';

package/src/popup-ui/drawer/use-drawer.ts

@@ -0,0 +1,210 @@
+import type { Component } from 'vue';
+
+import type {
+  DrawerApiOptions,
+  DrawerProps,
+  ExtendedDrawerApi,
+  InferDrawerData,
+} from './drawer';
+
+import {
+  defineComponent,
+  h,
+  inject,
+  markRaw,
+  nextTick,
+  onBeforeUnmount,
+  provide,
+  ref,
+  shallowReactive,
+} from 'vue';
+
+import { usePreferences } from '@melt-js/libs-vben/core-preferences';
+import { useSelector } from '@melt-js/libs-vben/shared/store';
+
+import { DrawerApi } from './drawer-api';
+import VbenDrawer from './drawer.vue';
+
+const USER_DRAWER_INJECT_KEY = Symbol('VBEN_DRAWER_INJECT');
+
+declare const DRAWER_DATA_NOT_PROVIDED: unique symbol;
+
+type DrawerDataNotProvided = {
+  readonly [DRAWER_DATA_NOT_PROVIDED]: true;
+};
+
+type ResolvedDrawerData<
+  TData,
+  TConnectedComponent extends Component,
+> = TData extends DrawerDataNotProvided
+  ? InferDrawerData<TConnectedComponent>
+  : TData;
+
+interface DrawerInjectData<TData> {
+  consumed?: boolean;
+  extendApi?: (api: ExtendedDrawerApi<TData>) => void;
+  options?: DrawerApiOptions;
+  reCreateDrawer?: () => Promise<void>;
+}
+
+const { globalEscapeShortcutKey } = usePreferences();
+
+/**
+ * 默认配置
+ */
+const DEFAULT_DRAWER_PROPS: Partial<DrawerProps> = {};
+
+export function setDefaultDrawerProps(props: Partial<DrawerProps>) {
+  Object.assign(DEFAULT_DRAWER_PROPS, props);
+}
+
+export function useVbenDrawer<
+  TData = DrawerDataNotProvided,
+  TConnectedComponent extends Component = Component,
+>(options: DrawerApiOptions<TConnectedComponent> = {}) {
+  type TResolvedData = ResolvedDrawerData<TData, TConnectedComponent>;
+
+  // Drawer一般会抽离出来，所以如果有传入 connectedComponent，则表示为外部调用，与内部组件进行连接
+  // 外部的Drawer通过provide/inject传递api
+
+  const defaultOptions = {
+    closeOnPressEscape: globalEscapeShortcutKey.value, // 全局Esc快捷键配置
+    ...options,
+  };
+  const { connectedComponent } = options;
+  if (connectedComponent) {
+    const extendedApi = shallowReactive({}) as ExtendedDrawerApi<TResolvedData>;
+    const isDrawerReady = ref(true);
+    const Drawer = defineComponent(
+      (props: DrawerProps, { attrs, slots }) => {
+        function rebindApi(api: ExtendedDrawerApi<TResolvedData>) {
+          Object.setPrototypeOf(extendedApi, markRaw(api));
+        }
+
+        provide(USER_DRAWER_INJECT_KEY, {
+          extendApi: rebindApi,
+          consumed: false,
+          options: defaultOptions,
+          async reCreateDrawer() {
+            isDrawerReady.value = false;
+            await nextTick();
+            isDrawerReady.value = true;
+          },
+        });
+        void checkProps(extendedApi, {
+          ...props,
+          ...attrs,
+          ...slots,
+        });
+        return () =>
+          h(
+            isDrawerReady.value ? connectedComponent : 'div',
+            { ...props, ...attrs },
+            slots,
+          );
+      },
+      // eslint-disable-next-line vue/one-component-per-file
+      {
+        name: 'VbenParentDrawer',
+        inheritAttrs: false,
+      },
+    );
+
+    return [Drawer, extendedApi] as const;
+  }
+
+  const injectData = inject<DrawerInjectData<TResolvedData>>(
+    USER_DRAWER_INJECT_KEY,
+    {},
+  );
+  const isConsumed = injectData.consumed;
+  const effectiveOptions = isConsumed ? {} : injectData.options;
+  if (!isConsumed && injectData.consumed !== undefined) {
+    injectData.consumed = true;
+  }
+  onBeforeUnmount(() => {
+    if (!isConsumed && injectData.consumed !== undefined) {
+      injectData.consumed = false;
+    }
+  });
+
+  const mergedOptions = {
+    ...DEFAULT_DRAWER_PROPS,
+    ...effectiveOptions,
+    ...defaultOptions,
+  } as DrawerApiOptions;
+
+  mergedOptions.onOpenChange = (isOpen: boolean) => {
+    options.onOpenChange?.(isOpen);
+    if (!isConsumed) {
+      injectData.options?.onOpenChange?.(isOpen);
+    }
+  };
+
+  const onClosed = mergedOptions.onClosed;
+  mergedOptions.onClosed = () => {
+    onClosed?.();
+    if (mergedOptions.destroyOnClose && !isConsumed) {
+      if (injectData.consumed !== undefined) {
+        injectData.consumed = false;
+      }
+      void injectData.reCreateDrawer?.();
+    }
+  };
+  const api = new DrawerApi<TResolvedData>(mergedOptions);
+
+  const extendedApi = api as ExtendedDrawerApi<TResolvedData>;
+
+  extendedApi.useStore = (selector) => {
+    return useSelector(api.store, selector);
+  };
+
+  const Drawer = defineComponent(
+    (props: DrawerProps, { attrs, slots }) => {
+      return () =>
+        h(VbenDrawer, { ...props, ...attrs, drawerApi: extendedApi }, slots);
+    },
+    // eslint-disable-next-line vue/one-component-per-file
+    {
+      name: 'VbenDrawer',
+      inheritAttrs: false,
+    },
+  );
+  injectData.extendApi?.(extendedApi);
+  return [Drawer, extendedApi] as const;
+}
+
+export function createVbenDrawer<TData = unknown>() {
+  return function useTypedVbenDrawer<
+    TConnectedComponent extends Component = Component,
+  >(options: DrawerApiOptions<TConnectedComponent> = {}) {
+    return useVbenDrawer<TData, TConnectedComponent>(options);
+  };
+}
+
+async function checkProps<TData>(
+  api: ExtendedDrawerApi<TData>,
+  attrs: Record<string, any>,
+) {
+  if (!attrs || Object.keys(attrs).length === 0) {
+    return;
+  }
+  await nextTick();
+
+  const state = api?.store?.state;
+
+  if (!state) {
+    return;
+  }
+
+  const stateKeys = new Set(Object.keys(state));
+
+  for (const attr of Object.keys(attrs)) {
+    if (stateKeys.has(attr) && !['class'].includes(attr)) {
+      // connectedComponent存在时，不要传入Drawer的props，会造成复杂度提升，如果你需要修改Drawer的props，请使用 useVbenDrawer 或者api
+      console.warn(
+        `[Vben Drawer]: When 'connectedComponent' exists, do not set props or slots '${attr}', which will increase complexity. If you need to modify the props of Drawer, please use useVbenDrawer or api.`,
+      );
+    }
+  }
+}

package/src/popup-ui/index.ts

@@ -0,0 +1,3 @@
+export * from './alert';
+export * from './drawer';
+export * from './modal';

package/src/popup-ui/modal/index.ts

@@ -0,0 +1,7 @@
+export type * from './modal';
+export { default as VbenModal } from './modal.vue';
+export {
+  createVbenModal,
+  setDefaultModalProps,
+  useVbenModal,
+} from './use-modal';

package/src/popup-ui/modal/modal-api.ts

@@ -0,0 +1,191 @@
+import type { ModalApiOptions, ModalState } from './modal';
+
+import { Store } from '@melt-js/libs-vben/shared/store';
+import { bindMethods, isFunction } from '@melt-js/libs-vben/shared/utils';
+
+export class ModalApi<TData = unknown> {
+  // 共享数据
+  public sharedData: Record<'payload', TData | undefined> = {
+    payload: undefined,
+  };
+  public store: Store<ModalState>;
+
+  private api: Pick<
+    ModalApiOptions,
+    | 'onBeforeClose'
+    | 'onCancel'
+    | 'onClosed'
+    | 'onConfirm'
+    | 'onOpenChange'
+    | 'onOpened'
+  >;
+
+  // private prevState!: ModalState;
+  private state!: ModalState;
+
+  constructor(options: ModalApiOptions = {}) {
+    const {
+      connectedComponent: _,
+      onBeforeClose,
+      onCancel,
+      onClosed,
+      onConfirm,
+      onOpenChange,
+      onOpened,
+      ...storeState
+    } = options;
+
+    const defaultState: ModalState = {
+      bordered: true,
+      centered: false,
+      class: '',
+      closeOnClickModal: true,
+      closeOnPressEscape: true,
+      confirmDisabled: false,
+      confirmLoading: false,
+      contentClass: '',
+      destroyOnClose: true,
+      draggable: false,
+      overflow: false,
+      footer: true,
+      footerClass: '',
+      fullscreen: false,
+      fullscreenButton: true,
+      header: true,
+      headerClass: '',
+      isOpen: false,
+      loading: false,
+      modal: true,
+      openAutoFocus: false,
+      showCancelButton: true,
+      showConfirmButton: true,
+      title: '',
+      animationType: 'slide',
+    };
+
+    this.store = new Store<ModalState>({
+      ...defaultState,
+      ...storeState,
+    });
+
+    this.store.subscribe((state) => {
+      // 每次更新状态时，都会调用 onOpenChange 回调函数
+      const prevIsOpen = this.state?.isOpen;
+      this.state = state;
+      if (state?.isOpen !== prevIsOpen) {
+        this.api.onOpenChange?.(!!state?.isOpen);
+      }
+    });
+
+    this.state = this.store.state;
+
+    this.api = {
+      onBeforeClose,
+      onCancel,
+      onClosed,
+      onConfirm,
+      onOpenChange,
+      onOpened,
+    };
+    bindMethods(this);
+  }
+
+  /**
+   * 关闭弹窗
+   * @description 关闭弹窗时会调用 onBeforeClose 钩子函数，如果 onBeforeClose 返回 false，则不关闭弹窗
+   */
+  async close() {
+    // 通过 onBeforeClose 钩子函数来判断是否允许关闭弹窗
+    // 如果 onBeforeClose 返回 false，则不关闭弹窗
+    const allowClose = (await this.api.onBeforeClose?.()) ?? true;
+    if (allowClose) {
+      this.store.setState((prev) => ({
+        ...prev,
+        isOpen: false,
+      }));
+    }
+  }
+
+  getData(): TData | undefined {
+    return this.sharedData.payload;
+  }
+
+  /**
+   * 锁定弹窗状态（用于提交过程中的等待状态）
+   * @description 锁定状态将禁用默认的取消按钮，使用spinner覆盖弹窗内容，隐藏关闭按钮，阻止手动关闭弹窗，将默认的提交按钮标记为loading状态
+   * @param isLocked 是否锁定
+   */
+  lock(isLocked = true) {
+    return this.setState({ submitting: isLocked });
+  }
+
+  /**
+   * 取消操作
+   */
+  onCancel() {
+    if (this.api.onCancel) {
+      this.api.onCancel?.();
+    } else {
+      void this.close();
+    }
+  }
+
+  /**
+   * 弹窗关闭动画播放完毕后的回调
+   */
+  onClosed() {
+    if (!this.state.isOpen) {
+      this.api.onClosed?.();
+    }
+  }
+
+  /**
+   * 确认操作
+   */
+  onConfirm() {
+    this.api.onConfirm?.();
+  }
+
+  /**
+   * 弹窗打开动画播放完毕后的回调
+   */
+  onOpened() {
+    if (this.state.isOpen) {
+      this.api.onOpened?.();
+    }
+  }
+
+  open() {
+    this.store.setState((prev) => ({
+      ...prev,
+      isOpen: true,
+      submitting: false,
+    }));
+  }
+
+  setData(payload: TData) {
+    this.sharedData.payload = payload;
+    return this;
+  }
+
+  setState(
+    stateOrFn:
+      | ((prev: ModalState) => Partial<ModalState>)
+      | Partial<ModalState>,
+  ) {
+    if (isFunction(stateOrFn)) {
+      this.store.setState(stateOrFn);
+    } else {
+      this.store.setState((prev) => ({ ...prev, ...stateOrFn }));
+    }
+    return this;
+  }
+
+  /**
+   * 解除弹窗的锁定状态
+   * @description 解除由lock方法设置的锁定状态，是lock(false)的别名
+   */
+  unlock() {
+    return this.lock(false);
+  }
+}

package/src/popup-ui/modal/modal.ts

@@ -0,0 +1,212 @@
+import type { Component, Ref } from 'vue';
+
+import type { ClassType, MaybePromise } from '@melt-js/libs-vben/typings';
+
+import type { ModalApi } from './modal-api';
+
+export interface ModalProps {
+  /**
+   * 动画类型
+   * @default 'slide'
+   */
+  animationType?: 'scale' | 'slide';
+  /**
+   * 是否要挂载到内容区域
+   * @default false
+   */
+  appendToMain?: boolean;
+  /**
+   * 是否显示边框
+   * @default false
+   */
+  bordered?: boolean;
+  /**
+   * 取消按钮文字
+   */
+  cancelText?: string;
+  /**
+   * 是否居中
+   * @default false
+   */
+  centered?: boolean;
+
+  class?: ClassType;
+
+  /**
+   * 是否显示右上角的关闭按钮
+   * @default true
+   */
+  closable?: boolean;
+  /**
+   * 点击弹窗遮罩是否关闭弹窗
+   * @default true
+   */
+  closeOnClickModal?: boolean;
+  /**
+   * 按下 ESC 键是否关闭弹窗
+   * @default true
+   */
+  closeOnPressEscape?: boolean;
+  /**
+   * 禁用确认按钮
+   */
+  confirmDisabled?: boolean;
+  /**
+   * 确定按钮 loading
+   * @default false
+   */
+  confirmLoading?: boolean;
+  /**
+   * 确定按钮文字
+   */
+  confirmText?: string;
+  contentClass?: ClassType;
+  /**
+   * 弹窗描述
+   */
+  description?: string;
+  /**
+   * 在关闭时销毁弹窗
+   */
+  destroyOnClose?: boolean;
+  /**
+   * 是否可拖拽
+   * @default false
+   */
+  draggable?: boolean;
+  /**
+   * 是否显示底部
+   * @default true
+   */
+  footer?: boolean;
+  footerClass?: ClassType;
+  /**
+   * 是否全屏
+   * @default false
+   */
+  fullscreen?: boolean;
+  /**
+   * 是否显示全屏按钮
+   * @default true
+   */
+  fullscreenButton?: boolean;
+  /**
+   * 是否显示顶栏
+   * @default true
+   */
+  header?: boolean;
+  headerClass?: ClassType;
+  /**
+   * 弹窗加载状态
+   * @default false
+   */
+  loading?: boolean;
+  /**
+   * 是否显示遮罩
+   * @default true
+   */
+  modal?: boolean;
+  /**
+   * 是否自动聚焦
+   */
+  openAutoFocus?: boolean;
+  /**
+   * 拖动范围是否可以超出可视区
+   * @default false
+   */
+  overflow?: boolean;
+  /**
+   * 弹窗遮罩模糊效果
+   */
+  overlayBlur?: number;
+  /**
+   * 是否显示取消按钮
+   * @default true
+   */
+  showCancelButton?: boolean;
+  /**
+   * 是否显示确认按钮
+   * @default true
+   */
+  showConfirmButton?: boolean;
+  /**
+   * 提交中（锁定弹窗状态）
+   */
+  submitting?: boolean;
+  /**
+   * 弹窗标题
+   */
+  title?: string;
+  /**
+   * 弹窗标题提示
+   */
+  titleTooltip?: string;
+  /**
+   * 弹窗层级
+   */
+  zIndex?: number;
+}
+
+export interface ModalState extends ModalProps {
+  /** 弹窗打开状态 */
+  isOpen?: boolean;
+}
+
+export type ExtendedModalApi<TData = unknown> = ModalApi<TData> & {
+  useStore: <T = NoInfer<ModalState>>(
+    selector?: (state: NoInfer<ModalState>) => T,
+  ) => Readonly<Ref<T>>;
+};
+
+type ModalComponentInstance<TComponent extends Component> =
+  TComponent extends abstract new (...args: any[]) => infer TInstance
+    ? TInstance
+    : never;
+
+export type InferModalData<TComponent extends Component> = [
+  ModalComponentInstance<TComponent>,
+] extends [never]
+  ? unknown
+  : ModalComponentInstance<TComponent> extends {
+        modalApi: ExtendedModalApi<infer TData>;
+      }
+    ? TData
+    : unknown;
+
+export interface ModalApiOptions<
+  TConnectedComponent extends Component = Component,
+> extends ModalState {
+  /**
+   * 独立的弹窗组件
+   */
+  connectedComponent?: TConnectedComponent;
+  /**
+   * 关闭前的回调，返回 false 可以阻止关闭
+   * @returns
+   */
+  onBeforeClose?: () => MaybePromise<boolean | undefined>;
+  /**
+   * 点击取消按钮的回调
+   */
+  onCancel?: () => void;
+  /**
+   * 弹窗关闭动画结束的回调
+   * @returns
+   */
+  onClosed?: () => void;
+  /**
+   * 点击确定按钮的回调
+   */
+  onConfirm?: () => void;
+  /**
+   * 弹窗状态变化回调
+   * @param isOpen
+   * @returns
+   */
+  onOpenChange?: (isOpen: boolean) => void;
+  /**
+   * 弹窗打开动画结束的回调
+   * @returns
+   */
+  onOpened?: () => void;
+}