yc-pro-components 0.0.1

package/es/hooks/usePlusFormReset.mjs

@@ -0,0 +1,83 @@
+import { ref, watch, nextTick } from 'vue';
+
+function usePlusFormReset(visible, options = {}) {
+  const {
+    clearValidateOnOpen = true,
+    resetFieldsOnClose = true,
+    resetFieldsOnOpen = false,
+    onReset,
+    onClearValidate
+  } = options;
+  const formRef = ref();
+  const clearValidate = async () => {
+    var _a, _b;
+    await nextTick();
+    try {
+      (_b = (_a = formRef.value) == null ? void 0 : _a.formInstance) == null ? void 0 : _b.clearValidate();
+      onClearValidate == null ? void 0 : onClearValidate();
+    } catch (error) {
+      console.warn("\u6E05\u9664\u8868\u5355\u9A8C\u8BC1\u72B6\u6001\u5931\u8D25:", error);
+    }
+  };
+  const resetFields = async () => {
+    var _a, _b;
+    await nextTick();
+    try {
+      (_b = (_a = formRef.value) == null ? void 0 : _a.formInstance) == null ? void 0 : _b.resetFields();
+      onReset == null ? void 0 : onReset();
+    } catch (error) {
+      console.warn("\u91CD\u7F6E\u8868\u5355\u5B57\u6BB5\u5931\u8D25:", error);
+    }
+  };
+  watch(
+    visible,
+    async (newVisible, oldVisible) => {
+      if (newVisible && !oldVisible) {
+        if (resetFieldsOnOpen) {
+          await resetFields();
+        }
+        if (clearValidateOnOpen) {
+          await clearValidate();
+        }
+      }
+      if (!newVisible && oldVisible) {
+        if (resetFieldsOnClose) {
+          await resetFields();
+        }
+      }
+    },
+    { flush: "post" }
+    // 在 DOM 更新后执行
+  );
+  return {
+    /**
+     * 表单引用，需要绑定到 PlusDialogForm 或 PlusDrawerForm 的 ref
+     */
+    formRef,
+    /**
+     * 手动清除验证状态
+     */
+    clearValidate,
+    /**
+     * 手动重置表单字段
+     */
+    resetFields
+  };
+}
+function usePlusFormClearValidate(visible) {
+  return usePlusFormReset(visible, {
+    clearValidateOnOpen: true,
+    resetFieldsOnClose: false,
+    resetFieldsOnOpen: false
+  });
+}
+function usePlusFormFullReset(visible, onReset) {
+  return usePlusFormReset(visible, {
+    clearValidateOnOpen: true,
+    resetFieldsOnClose: true,
+    resetFieldsOnOpen: false,
+    onReset
+  });
+}
+
+export { usePlusFormClearValidate, usePlusFormFullReset, usePlusFormReset };

package/es/hooks/usePlusProConfig.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Plus Pro Components 全局表单配置接口
+ */
+export interface PlusProFormConfig {
+    /** 标签宽度 */
+    labelWidth?: string;
+    /** 标签后缀（冒号） */
+    labelSuffix?: string;
+    /** 标签位置 */
+    labelPosition?: 'left' | 'right' | 'top';
+    /** 表单项之间的间距 */
+    rowProps?: {
+        gutter?: number;
+    };
+}
+/**
+ * Plus Pro Components 全局配置
+ */
+export interface PlusProGlobalConfig {
+    /** PlusDialogForm 默认配置 */
+    dialogForm: PlusProFormConfig;
+    /** PlusDrawerForm 默认配置 */
+    drawerForm: PlusProFormConfig;
+}
+/**
+ * 提供 Plus Pro Components 全局配置（在根组件中使用）
+ */
+export declare function providePlusProConfig(): void;
+/**
+ * 注入 Plus Pro Components 全局配置（在子组件中使用）
+ * @returns Plus Pro Components 全局配置对象
+ */
+export declare function usePlusProConfig(): PlusProGlobalConfig;
+/**
+ * 获取 PlusDialogForm 的默认配置
+ */
+export declare function useDialogFormConfig(): PlusProFormConfig;
+/**
+ * 获取 PlusDrawerForm 的默认配置
+ */
+export declare function useDrawerFormConfig(): PlusProFormConfig;

package/es/hooks/usePlusProConfig.mjs

@@ -0,0 +1,56 @@
+import { provide, inject } from 'vue';
+
+const PLUS_PRO_CONFIG_KEY = Symbol("plusProConfig");
+function providePlusProConfig() {
+  const config = {
+    // PlusDialogForm 默认配置
+    dialogForm: {
+      labelWidth: "150px",
+      labelSuffix: "",
+      // 移除冒号
+      labelPosition: "right",
+      // 标签靠右
+      rowProps: { gutter: 20 }
+    },
+    // PlusDrawerForm 默认配置
+    drawerForm: {
+      labelWidth: "150px",
+      labelSuffix: "",
+      // 移除冒号
+      labelPosition: "right",
+      // 标签靠右
+      rowProps: { gutter: 20 }
+    }
+  };
+  provide(PLUS_PRO_CONFIG_KEY, config);
+}
+function usePlusProConfig() {
+  const config = inject(PLUS_PRO_CONFIG_KEY);
+  if (!config) {
+    return {
+      dialogForm: {
+        labelWidth: "150px",
+        labelSuffix: "",
+        labelPosition: "right",
+        rowProps: { gutter: 20 }
+      },
+      drawerForm: {
+        labelWidth: "150px",
+        labelSuffix: "",
+        labelPosition: "right",
+        rowProps: { gutter: 20 }
+      }
+    };
+  }
+  return config;
+}
+function useDialogFormConfig() {
+  const config = usePlusProConfig();
+  return config.dialogForm;
+}
+function useDrawerFormConfig() {
+  const config = usePlusProConfig();
+  return config.drawerForm;
+}
+
+export { providePlusProConfig, useDialogFormConfig, useDrawerFormConfig, usePlusProConfig };

package/es/hooks/useSelectWithMapping.d.ts

@@ -0,0 +1,149 @@
+import { Ref } from 'vue';
+
+/**
+ * 选项数据类型（统一返回格式）
+ */
+export interface MappedOption<T = Record<string, unknown>> {
+    /** 显示文本 */
+    label: string;
+    /** 选项值 */
+    value: string | number;
+    /** 原始数据 */
+    rawData: T;
+    /** 索引签名（兼容 SelectOption） */
+    [key: string]: unknown;
+}
+/**
+ * 数据转换配置
+ */
+export interface TransformConfig<T> {
+    /**
+     * label 映射
+     * - string: 字段名
+     * - function: 自定义格式化函数
+     */
+    label: keyof T | ((item: T) => string);
+    /**
+     * value 映射
+     * - string: 字段名
+     * - function: 自定义格式化函数
+     */
+    value: keyof T | ((item: T) => string | number);
+}
+/**
+ * API 响应类型（通用）
+ */
+export interface ApiResponseLike<T = unknown> {
+    data?: {
+        result?: T[];
+        total?: number;
+    };
+    code?: string;
+}
+/**
+ * 加载更多参数（内部使用）
+ */
+interface LoadMoreParamsInternal {
+    page: number;
+    pageSize: number;
+    keyword?: string;
+}
+/**
+ * 加载更多结果（内部使用）
+ */
+interface LoadMoreResultInternal {
+    list: MappedOption[];
+    total: number;
+    hasMore: boolean;
+}
+/**
+ * 加载更多函数类型（内部使用）
+ */
+type LoadMoreFunctionInternal = (params: LoadMoreParamsInternal) => Promise<LoadMoreResultInternal>;
+/**
+ * Hook 配置项
+ */
+export interface UseSelectWithMappingConfig<T = Record<string, unknown>> {
+    /**
+     * API 调用函数
+     * @param params 请求参数
+     * @returns Promise
+     */
+    apiFn: (params: {
+        keyword: string;
+        pageSize: number;
+        offset: number;
+    }) => Promise<ApiResponseLike<T>>;
+    /**
+     * 数据转换配置（label/value 映射）
+     */
+    transform: TransformConfig<T>;
+    /**
+     * 响应数据路径配置
+     */
+    dataPath?: {
+        /** 列表数据路径，默认 'result' (相对于 data) */
+        list?: string;
+        /** 总数路径，默认 'total' (相对于 data) */
+        total?: string;
+    };
+    /**
+     * 是否在无关键词时返回空列表
+     * @default true
+     */
+    requireKeyword?: boolean;
+}
+/**
+ * Hook 返回值
+ */
+export interface UseSelectWithMappingReturn<T = Record<string, unknown>> {
+    /** 分页加载函数（用于 YcSelectV2 组件） */
+    loadMore: LoadMoreFunctionInternal;
+    /** 数据映射（通过 value 查找原始数据） */
+    dataMap: Ref<Map<string | number, MappedOption<T>>>;
+    /** 根据 value 获取原始数据 */
+    getRawData: (value: string | number) => T | undefined;
+    /** 根据 value 获取完整选项 */
+    getOption: (value: string | number) => MappedOption<T> | undefined;
+    /** 清空数据映射 */
+    clearDataMap: () => void;
+    /** 加载状态 */
+    loading: Ref<boolean>;
+}
+/**
+ * 通用分页选择器 Hook（带数据映射）
+ *
+ * @description 封装分页搜索 API 调用逻辑，支持自定义 label/value 映射
+ * 统一返回 { label, value, rawData } 格式给下拉组件使用
+ *
+ * @param config 配置项
+ * @returns 返回 loadMore 函数和数据映射
+ *
+ * @example
+ * ```ts
+ * // 基础用法：使用字段名映射
+ * const { loadMore, getRawData } = useSelectWithMapping({
+ *   apiFn: ({ keyword, pageSize, offset }) =>
+ *     mySearchApi(keyword, pageSize, offset),
+ *   transform: {
+ *     label: 'name',  // 使用 name 字段作为 label
+ *     value: 'id'     // 使用 id 字段作为 value
+ *   }
+ * });
+ * ```
+ *
+ * @example
+ * ```ts
+ * // 高级用法：使用函数自定义格式
+ * const { loadMore, getRawData } = useSelectWithMapping({
+ *   apiFn: ({ keyword, pageSize, offset }) =>
+ *     searchApi(keyword, pageSize, offset),
+ *   transform: {
+ *     label: (item) => `${item.name} (${item.code})`,
+ *     value: (item) => item.id
+ *   }
+ * });
+ * ```
+ */
+export declare function useSelectWithMapping<T = Record<string, unknown>>(config: UseSelectWithMappingConfig<T>): UseSelectWithMappingReturn<T>;
+export {};

package/es/hooks/useSelectWithMapping.mjs

@@ -0,0 +1,103 @@
+import { ref } from 'vue';
+
+const getNestedValue = (obj, path) => {
+  const keys = path.split(".");
+  let value = obj;
+  for (const key of keys) {
+    if (value && typeof value === "object" && key in value) {
+      value = value[key];
+    } else {
+      return void 0;
+    }
+  }
+  return value;
+};
+const getMappedValue = (item, mapper) => {
+  if (typeof mapper === "function") {
+    return mapper(item);
+  }
+  return item[mapper];
+};
+function useSelectWithMapping(config) {
+  const { apiFn, transform, dataPath = {}, requireKeyword = true } = config;
+  const listPath = dataPath.list || "result";
+  const loading = ref(false);
+  const dataMap = ref(/* @__PURE__ */ new Map());
+  const loadMore = async (params) => {
+    const { page, pageSize, keyword } = params;
+    if (requireKeyword && (!keyword || !keyword.trim())) {
+      return {
+        list: [],
+        total: 0,
+        hasMore: false
+      };
+    }
+    if (loading.value) {
+      return {
+        list: [],
+        total: 0,
+        hasMore: false
+      };
+    }
+    try {
+      loading.value = true;
+      const offset = (page - 1) * pageSize;
+      const response = await apiFn({
+        keyword: (keyword == null ? void 0 : keyword.trim()) || "",
+        pageSize,
+        offset
+      });
+      if (!response.data) {
+        return { list: [], total: 0, hasMore: false };
+      }
+      const resultList = getNestedValue(response.data, listPath) || [];
+      const list = resultList.map((item) => {
+        const label = String(getMappedValue(item, transform.label));
+        const value = getMappedValue(item, transform.value);
+        const option = {
+          label,
+          value,
+          rawData: item
+        };
+        dataMap.value.set(value, option);
+        dataMap.value.set(label, option);
+        return option;
+      });
+      const hasMore = list.length >= pageSize;
+      return {
+        list,
+        total: 0,
+        hasMore
+      };
+    } catch (error) {
+      console.error("\u52A0\u8F7D\u6570\u636E\u5931\u8D25:", error);
+      return {
+        list: [],
+        total: 0,
+        hasMore: false
+      };
+    } finally {
+      loading.value = false;
+    }
+  };
+  const getRawData = (value) => {
+    var _a;
+    return (_a = dataMap.value.get(value)) == null ? void 0 : _a.rawData;
+  };
+  const getOption = (value) => {
+    return dataMap.value.get(value);
+  };
+  const clearDataMap = () => {
+    dataMap.value.clear();
+  };
+  return {
+    loadMore,
+    dataMap,
+    getRawData,
+    getOption,
+    clearDataMap,
+    loading
+  };
+}
+
+export { useSelectWithMapping };

package/es/hooks/useSelectWithPagination.d.ts

@@ -0,0 +1,71 @@
+import { LoadMoreFunction, SelectOption } from 'yc-components/es/components/yc-select-v2';
+import { Ref } from 'vue';
+
+/**
+ * 分页加载配置
+ */
+export interface UseSelectWithPaginationConfig {
+    /** API 调用函数 */
+    apiFn: (searchParams: Record<string, unknown>, page: number, pageSize: number) => Promise<unknown>;
+    /** 搜索参数对象（固定参数，如 nodeType 等） */
+    searchParams?: Record<string, unknown>;
+    /** 每页数量 */
+    pageSize?: number;
+    /** 数据转换函数，将 API 返回的数据转换为 SelectOption 格式 */
+    transform?: (item: unknown) => SelectOption;
+    /** 响应数据路径（用于提取 result 和 total） */
+    dataPath?: {
+        list?: string;
+        total?: string;
+        code?: string;
+    };
+    /** 搜索字段名（用于 keyword 搜索，默认 'realShortName'） */
+    searchField?: string;
+}
+/**
+ * 使用分页选择器的返回值
+ */
+export interface UseSelectWithPaginationReturn {
+    /** 分页加载函数（供 YcSelectV2 使用） */
+    loadMore: LoadMoreFunction;
+    /** 当前已加载的选项列表 */
+    options: Ref<SelectOption[]>;
+    /** 当前页码 */
+    currentPage: Ref<number>;
+    /** 是否还有更多数据 */
+    hasMore: Ref<boolean>;
+    /** 总数据量 */
+    total: Ref<number>;
+    /** 加载状态 */
+    loading: Ref<boolean>;
+    /** 重新加载数据（重置页码） */
+    reload: () => Promise<void>;
+    /** 清空数据 */
+    clear: () => void;
+}
+/**
+ * 分页选择器 Hooks
+ * @param config 配置项
+ * @returns 返回 loadMore 函数和相关状态
+ *
+ * @example
+ * ```ts
+ * import { useSelectWithPagination } from 'yc-components/es/hooks';
+ * import { getHousePage } from '@/api/fee-manage';
+ *
+ * const {
+ *   loadMore,
+ *   options,
+ *   reload
+ * } = useSelectWithPagination({
+ *   apiFn: getHousePage,
+ *   searchParams: { nodeType: 1 },
+ *   pageSize: 20,
+ *   transform: (item) => ({
+ *     label: item.realShortName,
+ *     value: item.houseId
+ *   })
+ * });
+ * ```
+ */
+export declare function useSelectWithPagination(config: UseSelectWithPaginationConfig): UseSelectWithPaginationReturn;

package/es/hooks/useSelectWithPagination.mjs

@@ -0,0 +1,118 @@
+import { ref } from 'vue';
+
+const defaultTransform = (item) => {
+  const data = item;
+  return {
+    label: data.realShortName || data.label || data.name || String(data.value),
+    value: data.houseId || data.value || data.id
+  };
+};
+function useSelectWithPagination(config) {
+  const {
+    apiFn,
+    searchParams = {},
+    pageSize = 5,
+    transform = defaultTransform,
+    dataPath = {},
+    searchField = "realShortName"
+  } = config;
+  const listPath = dataPath.list || "data.result";
+  const totalPath = dataPath.total || "data.total";
+  const codePath = dataPath.code || "code";
+  const currentPage = ref(1);
+  const options = ref([]);
+  const hasMore = ref(true);
+  const total = ref(0);
+  const loading = ref(false);
+  const extractData = (response, path) => {
+    const keys = path.split(".");
+    let value = response;
+    for (const key of keys) {
+      if (value && typeof value === "object" && key in value) {
+        value = value[key];
+      } else {
+        return void 0;
+      }
+    }
+    return value;
+  };
+  const loadMore = async ({
+    page,
+    pageSize: size,
+    keyword
+  }) => {
+    if (loading.value) {
+      return {
+        list: [],
+        total: total.value,
+        hasMore: hasMore.value
+      };
+    }
+    try {
+      loading.value = true;
+      const finalSearchParams = {
+        ...searchParams,
+        ...keyword ? { [searchField]: keyword } : {}
+      };
+      const response = await apiFn(finalSearchParams, page, size);
+      const code = extractData(response, codePath);
+      const listData = extractData(response, listPath) || [];
+      const totalData = extractData(response, totalPath) || listData.length;
+      if (code === "00000" || code === void 0) {
+        const list = listData.map(transform);
+        if (page === 1) {
+          options.value = list;
+        } else {
+          options.value = [...options.value, ...list];
+        }
+        total.value = totalData;
+        hasMore.value = page * size < total.value;
+        currentPage.value = page;
+        return {
+          list,
+          total: total.value,
+          hasMore: hasMore.value
+        };
+      }
+      return {
+        list: [],
+        total: 0,
+        hasMore: false
+      };
+    } catch (error) {
+      console.error("\u5206\u9875\u52A0\u8F7D\u5931\u8D25:", error);
+      return {
+        list: [],
+        total: total.value,
+        hasMore: false
+      };
+    } finally {
+      loading.value = false;
+    }
+  };
+  const reload = async () => {
+    currentPage.value = 1;
+    hasMore.value = true;
+    options.value = [];
+    total.value = 0;
+    await loadMore({ page: 1, pageSize });
+  };
+  const clear = () => {
+    currentPage.value = 1;
+    hasMore.value = true;
+    options.value = [];
+    total.value = 0;
+  };
+  return {
+    loadMore,
+    options,
+    currentPage,
+    hasMore,
+    total,
+    loading,
+    reload,
+    clear
+  };
+}
+
+export { useSelectWithPagination };

package/es/hooks/useSortableDrag.d.ts

@@ -0,0 +1,80 @@
+import { SortableDragOptions } from 'yc-components/es/components/yc-plus-tree';
+import { Ref } from 'vue';
+import { default as Sortable } from 'sortablejs';
+
+export type { SortableDragOptions };
+/**
+ * 拖拽事件回调
+ */
+export interface SortableDragEvents {
+    /** 拖拽开始事件 */
+    onStart?: (evt: Sortable.SortableEvent) => void;
+    /** 拖拽结束事件 */
+    onEnd?: (evt: Sortable.SortableEvent) => void;
+    /** 元素移动事件 */
+    onMove?: (evt: Sortable.MoveEvent, originalEvent: Event) => boolean | -1 | 1;
+    /** 拖拽更新事件（在同一列表中排序） */
+    onUpdate?: (evt: Sortable.SortableEvent) => void;
+    /** 元素添加事件（从其他列表添加） */
+    onAdd?: (evt: Sortable.SortableEvent) => void;
+    /** 元素移除事件（移动到其他列表） */
+    onRemove?: (evt: Sortable.SortableEvent) => void;
+    /** 拖拽选择事件 */
+    onChoose?: (evt: Sortable.SortableEvent) => void;
+    /** 取消选择事件 */
+    onUnchoose?: (evt: Sortable.SortableEvent) => void;
+}
+/**
+ * useSortableDrag 参数接口
+ */
+export interface UseSortableDragParams {
+    /** 树容器的 DOM 引用 */
+    containerRef: Ref<HTMLElement | undefined>;
+    /** 拖拽配置选项 */
+    options: SortableDragOptions;
+    /** 拖拽事件回调 */
+    events: SortableDragEvents;
+    /** 搜索关键词（用于判断是否禁用拖拽） */
+    filterText?: Ref<string>;
+    /** 树节点容器选择器 */
+    treeNodeSelector?: string;
+}
+/**
+ * useSortableDrag 返回值接口
+ */
+export interface UseSortableDragReturn {
+    /** 是否启用拖拽（搜索时自动禁用） */
+    isDraggableEnabled: Ref<boolean>;
+    /** SortableJS 实例 */
+    sortableInstance: Ref<Sortable | null>;
+    /** 销毁拖拽实例 */
+    destroy: () => void;
+    /** 启用拖拽 */
+    enable: () => void;
+    /** 禁用拖拽 */
+    disable: () => void;
+}
+/**
+ * 使用 SortableJS 实现树形组件拖拽
+ *
+ * @param params - 拖拽参数配置
+ * @returns 拖拽控制方法和状态
+ *
+ * @example
+ * ```ts
+ * const { isDraggableEnabled, destroy } = useSortableDrag({
+ *   containerRef: treeRef,
+ *   options: {
+ *     enabled: true,
+ *     animation: 150,
+ *     handle: '.drag-handle'
+ *   },
+ *   events: {
+ *     onEnd: (evt) => {
+ *       console.log('拖拽完成', evt);
+ *     }
+ *   }
+ * });
+ * ```
+ */
+export declare function useSortableDrag(params: UseSortableDragParams): UseSortableDragReturn;