@aoao-y33/ui 0.0.2 → 0.0.5

package/src/modal/components/modal/props.ts

@@ -1,78 +0,0 @@
-import type {DrawerProps,DrawerEmits} from "element-plus";
-import type {AxButtonOptions, AxButtonProps} from "@/button";
-import type {EmitsToEventProps} from "@aoao-y33/utils";
-import type {Component, EmitsToProps} from "vue";
-import type {FieldsConfig} from "@aoao-y33/hooks";
-
-/**
- * AxModal 弹窗组件属性接口
- * 继承自 Element Plus DrawerProps，扩展了通用弹窗功能
- * 支持 Drawer（抽屉）和 Dialog（对话框）两种展示模式
- */
-export interface AxModalProps extends DrawerProps{
-    /**
-     * 弹窗类型，决定使用哪种展示形式
-     * - 'drawer': 抽屉式弹窗，从屏幕边缘滑出
-     * - 'dialog': 对话框式弹窗，居中显示
-     * @default 'drawer'
-     */
-    type?:'drawer'|'dialog',
-
-    /** 弹窗标题，显示在弹窗顶部 */
-    title?:string
-
-    /** 弹窗的显示/隐藏状态，用于外部控制 */
-    open?:boolean
-
-    /** 自定义 CSS 类名，用于样式定制 */
-    className?:string
-
-    /** 确认按钮的配置项，用于自定义确认按钮的外观和行为 */
-    confirmButton?:AxButtonProps
-
-    /** 取消按钮的配置项，用于自定义取消按钮的外观和行为 */
-    cancelButton?:AxButtonProps
-
-    /** 是否使用默认配置，启用后将自动应用预设的弹窗样式和按钮 */
-    isDefault?:boolean
-}
-
-/**
- * AxModal 弹窗组件事件发射接口
- */
-export interface AxModalEmits{
-    /**
-     * 弹窗显示状态变化事件（用于 v-model:open 双向绑定）
-     * @param data - 新的显示状态（true/false）
-     */
-    'update:open':[data:boolean],
-
-    /** 取消按钮点击或关闭弹窗时触发 */
-    'cancel':[]
-
-    /** 确认按钮点击时触发 */
-    'confirm':[]
-}
-
-/**
- * AxModal 弹窗配置选项接口
- * 整合了弹窗属性、事件处理和动态内容配置
- */
-export interface AxModalOptions
-    extends Omit<AxModalProps, 'open'>,      // 排除 open 属性（由内部状态管理）
-        EmitsToEventProps<AxModalEmits>,      // 合并自定义事件处理函数
-        EmitsToProps<DrawerEmits>{            // 合并 Element Plus Drawer 的事件属性
-    /**
-     * 动态渲染的组件，用于在弹窗内容区域显示自定义组件
-     * @example
-     * component: UserFormComponent
-     */
-    component?:Component,
-
-    /**
-     * 按钮配置映射表，用于配置弹窗中的各种操作按钮
-     * @see FieldsConfig - 字段配置类型
-     * @see AxButtonOptions - 按钮选项类型
-     */
-    buttonConfig?:FieldsConfig<AxButtonOptions>
-}

package/src/modal/hoc/index.ts

@@ -1,3 +0,0 @@
-export * from './useModal';
-export * from './useFormModal';
-export * from './useModalExpose';

package/src/modal/hoc/useFormModal.ts

@@ -1,140 +0,0 @@
-import {type AxFormModalOptions, AxFormModal, useModalExpose, type ModalApi} from "@/modal";
-import {type FieldsApi, type StateApi, useComponentPool, useState} from "@aoao-y33/hooks";
-import {omit} from "lodash";
-import {AxButton, type AxButtonOptions} from "@/button";
-import {AxFormItem, type AxFormItemOptions, type FormApi, type FormFetchApi, useFormExpose, useFormFetch} from "@/form";
-import {type Component, defineComponent, h, ref} from "vue";
-
-/**
- * UseFormModal Hook 返回的 API 接口
- * 整合了弹窗控制、表单操作和请求管理的完整功能集
- * @template T - 表单数据类型
- */
-export interface UseFormModalApi<T extends Record<string, any>> extends ModalApi, FormApi<T>, FormFetchApi<T> {
-    /**
-     * 打开弹窗的方法
-     * 调用后将显示表单弹窗
-     */
-    readonly open: () => void;
-
-    /** 按钮组件池 API，用于管理弹窗中的操作按钮（确认、取消等） */
-    readonly buttonsApi: FieldsApi<AxButtonOptions>
-
-    /**
-     * 弹窗属性状态管理器
-     * 用于动态更新弹窗配置（不包含 buttonConfig 和 fieldConfig）
-     */
-    readonly setModal: StateApi<Omit<AxFormModalOptions, 'buttonConfig' | 'fieldConfig'>>
-
-    /** 表单项组件池 API，用于管理弹窗内表单的各个字段配置 */
-    readonly fieldsApi: FieldsApi<AxFormItemOptions>
-}
-
-/**
- * 表单弹窗 Hook，用于创建集成了表单功能的弹窗组件
- *
- * 该 Hook 封装了弹窗和表单的组合逻辑，包括：
- * - 弹窗显示/隐藏控制
- * - 表单字段动态配置
- * - 按钮动态配置
- * - 表单验证和提交
- * - 数据双向绑定
- *
- * @param options - 表单弹窗初始配置选项
- * @returns [Modal 组件, FormModal API] 元组
- *
- * @example
- * const [FormModal, modalApi] = useFormModal({
- *   title: '编辑用户',
- *   api: submitUserData,
- *   fieldConfig: {
- *     username: { label: '用户名', type: 'input', vtypes: ['required'] },
- *     email: { label: '邮箱', type: 'input', vtypes: ['required', 'mail'] }
- *   },
- *   buttonConfig: {
- *     confirm: { text: '保存' },
- *     cancel: { text: '取消' }
- *   }
- * })
- *
- * // 在模板中使用
- * <FormModal />
- *
- * // 通过 API 控制弹窗
- * modalApi.open()           // 打开弹窗
- * modalApi.fieldsApi.addField('phone', { label: '电话', type: 'input' })
- * modalApi.requestApi.submit()
- */
-export function useFormModal<T extends Record<string, any> = any>(options: AxFormModalOptions<T> = {}): [Component, UseFormModalApi<T>] {
-    // 创建弹窗属性状态，排除 buttonConfig 和 fieldConfig（它们由独立的组件池管理）
-    const [props, setModal] = useState(omit(options, ['buttonConfig', 'fieldConfig']))
-
-    // 创建按钮组件池，用于管理和渲染弹窗中的操作按钮
-    const [Buttons, buttonsApi] = useComponentPool<AxButtonOptions>(AxButton, options.buttonConfig);
-
-    // 创建表单项组件池，用于管理和渲染弹窗内的表单字段
-    const [Fields, fieldsApi] = useComponentPool<AxFormItemOptions>(AxFormItem, options.fieldConfig);
-
-    // 创建弹窗引用，用于访问弹窗实例的方法
-    const modalRef = ref();
-
-    // 获取弹窗暴露的 API（关闭、销毁等方法）
-    const modalApi = useModalExpose(modalRef);
-
-    // 获取表单暴露的 API（验证、重置、获取数据等方法）
-    const formApi = useFormExpose<T>(modalRef);
-
-    // 获取表单请求 API（提交、数据获取等异步操作）
-    const requestApi = useFormFetch<T>(modalRef);
-
-    // 创建内部可见性状态，用于控制弹窗显示/隐藏
-    const [visible, setVisible] = useState(false);
-
-    /**
-     * 打开弹窗方法
-     * 设置内部可见性状态为 true
-     */
-    const open = () => {
-        setVisible(true);
-    }
-
-    // 定义表单弹窗渲染组件
-    const Modal = defineComponent({
-        setup() {
-            const slots: Record<string, Component> = {};
-
-            // 如果存在字段配置，创建默认插槽（表单项列表）
-            if (fieldsApi.getList().length) {
-                slots.default = () => h(Fields);
-            }
-
-            // 如果存在按钮配置，创建按钮插槽
-            if (buttonsApi.getList().length) {
-                slots.button = () => h(Buttons);
-            }
-
-            // 渲染 AxFormModal 组件，传入 ref、属性和事件处理
-            return () => h(AxFormModal, {
-                ref: modalRef,
-                ...props.value,
-                // 监听弹窗显示状态变化，同步到内部状态
-                "onUpdate:open": (val: boolean) => {
-                    setVisible(val);
-                },
-                // 绑定内部可见性状态到弹窗
-                open: visible.value,
-            }, slots);
-        }
-    })
-
-    // 返回弹窗组件和完整的 API 集合（合并弹窗、表单、请求 API）
-    return [Modal, {
-        ...modalApi,
-        ...formApi,
-        ...requestApi,
-        buttonsApi,
-        fieldsApi,
-        open,
-        setModal
-    }] as const;
-}

package/src/modal/hoc/useModal.ts

@@ -1,151 +0,0 @@
-import {AxModal, type AxModalOptions, type ModalApi} from "@/modal";
-import {type FieldsApi, type StateApi, useComponentPool, useState} from "@aoao-y33/hooks";
-import {type Component, defineComponent, h, ref, shallowRef} from "vue";
-import {omit} from "lodash";
-import {AxButton, type AxButtonOptions} from "@/button";
-import {useModalExpose} from "@/modal";
-
-/**
- * UseModal Hook 返回的 API 接口
- * 提供完整的弹窗控制和内容管理能力
- */
-export interface UseModalApi extends ModalApi {
-    /**
-     * 打开弹窗的方法
-     * 调用后将显示弹窗
-     */
-    readonly open: () => void;
-
-    /** 按钮组件池 API，用于管理弹窗中的操作按钮（确认、取消等） */
-    readonly buttonsApi: FieldsApi<AxButtonOptions>
-
-    /**
-     * 弹窗属性状态管理器
-     * 用于动态更新弹窗配置（不包含 buttonConfig 和 component）
-     */
-    readonly setModal: StateApi<Omit<AxModalOptions, 'buttonConfig' | 'component'>>
-
-    /**
-     * 获取弹窗内动态组件实例的方法
-     * @returns 组件实例引用，可用于访问子组件的方法和属性
-     */
-    readonly getComponent: () => any
-}
-
-/**
- * 通用弹窗 Hook，用于创建可配置的弹窗组件
- *
- * 该 Hook 封装了弹窗的核心逻辑，包括：
- * - 弹窗显示/隐藏控制
- * - 动态组件渲染（支持自定义内容组件）
- * - 按钮动态配置
- * - 弹窗状态管理
- * - 组件实例访问
- *
- * @param options - 弹窗初始配置选项
- * @returns [Modal 组件, Modal API] 元组
- *
- * @example
- * // 基础用法
- * const [Modal, modalApi] = useModal({
- *   title: '提示',
- *   type: 'dialog'
- * })
- *
- * // 带自定义组件的用法
- * import UserDetail from './UserDetail.vue'
- * const [Modal, modalApi] = useModal({
- *   title: '用户详情',
- *   component: UserDetail,
- *   buttonConfig: {
- *     confirm: { text: '关闭' }
- *   }
- * })
- *
- * // 在模板中使用
- * <Modal />
- *
- * // 通过 API 控制弹窗
- * modalApi.open()                    // 打开弹窗
- * modalApi.getComponent()            // 获取内部组件实例
- * modalApi.setModal({ title: '新标题' })  // 动态修改弹窗属性
- */
-export function useModal(options: AxModalOptions = {}): [Component, UseModalApi] {
-
-    // 创建弹窗属性状态，排除 component 和 buttonConfig（它们由独立方式管理）
-    const [props, setModal] = useState(omit(options, ['component', 'buttonConfig']));
-
-    // 使用 shallowRef 存储动态组件，避免深层响应式开销
-    const component = shallowRef(options.component);
-
-    // 创建按钮组件池，用于管理和渲染弹窗中的操作按钮
-    const [Buttons, buttonsApi] = useComponentPool<AxButtonOptions>(AxButton, options.buttonConfig);
-
-    // 创建内部可见性状态，用于控制弹窗显示/隐藏
-    const [visible, setVisible] = useState(false);
-
-    /**
-     * 打开弹窗方法
-     * 设置内部可见性状态为 true
-     */
-    const open = () => {
-        setVisible(true);
-    }
-
-    // 创建组件引用，用于访问弹窗内动态组件的实例
-    const componentRef = ref();
-
-    /**
-     * 获取动态组件实例的方法
-     * @returns 组件实例引用
-     */
-    const getComponent = () => {
-        return componentRef.value;
-    }
-
-    // 创建弹窗引用，用于访问弹窗实例的方法
-    const modalRef = ref();
-
-    // 获取弹窗暴露的 API（关闭、销毁等方法）
-    const modalApi = useModalExpose(modalRef);
-
-    // 定义弹窗渲染组件
-    const Modal = defineComponent({
-        setup() {
-            const slots: Record<string, Component> = {};
-
-            // 如果配置了动态组件，创建默认插槽并传入组件引用
-            if (component.value) {
-                slots.default = () => h(component.value, {ref: componentRef});
-            }
-
-            // 如果存在按钮配置，创建按钮插槽
-            if (buttonsApi.getList().length) {
-                slots.button = () => h(Buttons);
-            }
-
-            // 渲染 AxModal 组件，传入 ref、属性和事件处理
-            return () => h(AxModal, {
-                ref: modalRef,
-                ...props.value,
-                // 监听弹窗显示状态变化，同步到内部状态
-                "onUpdate:open": (val: boolean) => {
-                    setVisible(val);
-                },
-                // 绑定内部可见性状态到弹窗
-                open: visible.value,
-            }, slots);
-        }
-    })
-
-    // 返回弹窗组件和完整的 API 集合（合并按钮管理、状态管理、打开方法和弹窗 API）
-    return [Modal,
-        {
-            buttonsApi,
-            setModal,
-            open,
-            ...modalApi,
-            getComponent
-        }] as const;
-
-}

package/src/modal/hoc/useModalExpose.ts

@@ -1,52 +0,0 @@
-import type {Ref} from "vue";
-import type {AxModalInstance} from "@/modal";
-
-/**
- * ModalApi 类型定义
- * 由 useModalExpose 函数返回的 API 对象类型
- */
-export type ModalApi = ReturnType<typeof useModalExpose>;
-
-/**
- * 弹窗暴露 API Hook，用于获取和控制弹窗实例的方法
- *
- * 该 Hook 提供了访问底层弹窗实例的能力，包括：
- * - 关闭弹窗
- * - 获取原生弹窗组件实例
- *
- * @param modal - 弹窗组件的 Ref 引用，指向 AxModalInstance 实例
- * @returns 包含弹窗控制方法的 API 对象
- *
- * @example
- * const modalRef = ref<AxModalInstance>();
- * const modalApi = useModalExpose(modalRef);
- *
- * // 关闭弹窗
- * modalApi.close()
- *
- * // 获取原生弹窗实例（如 Element Plus 的 Drawer/Dialog 实例）
- * const instance = modalApi.getModal()
- */
-export function useModalExpose(modal:Ref<AxModalInstance>){
-    /**
-     * 关闭弹窗方法
-     * 调用底层弹窗实例的 close 方法
-     */
-    const close = ()=>{
-        modal.value.close();
-    }
-
-    /**
-     * 获取原生弹窗组件实例
-     * 可用于访问 Element Plus 弹窗组件的原生方法和属性
-     * @returns 原生弹窗实例（Drawer 或 Dialog 实例）
-     */
-    const getModal=()=>{
-        return modal.value.getModal();
-    }
-
-    return {
-        close,
-        getModal
-    }
-}

package/src/modal/index.ts

@@ -1,3 +0,0 @@
-export * from "./components/modal";
-export * from './components/form-modal';
-export * from './hoc';

package/src/style/index.css

@@ -1,21 +0,0 @@
-@import "element-plus/dist/index.css";
-@import "tailwindcss";
-@import 'element-plus/theme-chalk/dark/css-vars.css';
-
-:root {
-    --ax-bg-color: #F5F5F5;
-    --ax-block-color: #FFFFFF;
-    --ax-border-color: #E7E7E7;
-    --ax-small-radius: 4px;
-    --ax-normal-radius: 10px;
-    --el-fill-color-lighter: #EEF1F5;
-    --el-fill-color-blank: #fff;
-}
-
-:root.dark {
-    --ax-bg-color: #14161A;
-    --ax-block-color: #1C1E23;
-    --ax-border-color: #1C1E23;
-    --el-fill-color-lighter: #313740;
-    --el-fill-color-blank: #191E27;
-}

package/src/table/components/fields/action-column/action-column.vue

@@ -1,34 +0,0 @@
-<template>
-  <div class="flex items-center gap-1">
-    <ax-button v-for="button in actionList.slice(0, over)" v-bind="button" :link="link" :isMl="false"></ax-button>
-    <ElPopover trigger="click" v-if="actionList.length>over">
-      <template #reference>
-        <el-icon style="transform: rotate(90deg);cursor: pointer">
-          <MoreFilled/>
-        </el-icon>
-      </template>
-      <div class="flex flex-col gap-2">
-        <ax-button v-for="button in hiddenAction.slice(0, over)" v-bind="button" :link="link" :isMl="false"></ax-button>
-      </div>
-    </ElPopover>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type {ActionColumnProps} from "./props";
-import {computed, provide} from "vue";
-import {AxButton} from "@/button";
-import {ElPopover, ElIcon} from "element-plus";
-import {MoreFilled} from "@element-plus/icons-vue";
-
-defineOptions({name: 'action-column'})
-const {rowData = {}, link = true, over = 1, actionList = []} = defineProps<ActionColumnProps>()
-provide("clickData", rowData.row)
-const hiddenAction = computed(() => {
-  return actionList.slice(over);
-})
-</script>
-
-<style scoped>
-
-</style>

package/src/table/components/fields/action-column/props.ts

@@ -1,8 +0,0 @@
-import type {AxButtonOptions} from "@/button";
-
-export interface ActionColumnProps<T extends Record<string, any> = any> {
-    over?: number,
-    rowData?: any,
-    link?:boolean
-    actionList?: AxButtonOptions<T>[]
-}

package/src/table/components/fields/index.ts

@@ -1,6 +0,0 @@
-import action from './action-column/action-column.vue';
-import {addTableColumnField} from "@/table";
-
-export const initTableColumns = () => {
-    addTableColumnField('action', action);
-}

package/src/table/components/table/index.ts

@@ -1,6 +0,0 @@
-import table from './table.vue';
-
-export const AxTable = table;
-export type AxTableInstance = InstanceType<typeof table>;
-export default AxTable;
-export * from './props';

package/src/table/components/table/props.ts

@@ -1,148 +0,0 @@
-import type {TableProps} from "element-plus";
-import type {FetchOptions, FieldsConfig, RequestFetch} from "@aoao-y33/hooks";
-import type {AxTableColumnsProps, AxTablePageOptions, AxTableSelectOptions} from "@/table";
-import type {AxButtonOptions} from "@/button";
-
-/**
- * 分页数据结构
- * 用于封装分页查询返回的数据格式
- * @template T - 列表项数据类型
- */
-export interface PageData<T> {
-    /** 数据总条数 */
-    total: number;
-
-    /** 当前页的数据列表 */
-    list: T[];
-
-    /** 当前页码 */
-    currentPage: number
-
-    /** 每页显示条数 */
-    currentSize: number
-}
-
-/**
- * AxTable 表格组件属性接口
- * 继承自 Element Plus TableProps，扩展了数据请求和分页功能
- * @template T - 表格行数据类型，必须是对象类型
- */
-export interface AxTableProps<T extends Record<string, any> = any> extends Partial<TableProps<T>> {
-    /**
-     * 表格数据源（本地数据）
-     * 如果提供了 api，则优先使用 api 获取数据
-     */
-    data?: T[];
-
-    /**
-     * API 请求函数，用于从服务器获取表格数据
-     * 支持返回普通数组或分页数据结构
-     * @see RequestFetch - 请求函数类型
-     */
-    api?: RequestFetch<any, T[] | PageData<T>>
-
-    /**
-     * API 请求配置项，包含请求参数、拦截器、转换函数等配置
-     * @see FetchOptions - 请求配置选项类型
-     */
-    apiConfig?: FetchOptions<any, T[] | PageData<T>>
-}
-
-/**
- * AxTable 表格组件事件发射接口
- * 封装了 Element Plus Table 的所有事件
- * @template T - 表格行数据类型
- */
-export interface AxTableEmits<T extends Record<string, any> = any> {
-    /** 滚动事件 */
-    onScroll?: ((...args: T[]) => any) | undefined;
-
-    /** 选择行事件（点击复选框） */
-    onSelect?: ((...args: T[]) => any) | undefined;
-
-    /** 展开行变化事件 */
-    "onExpand-change"?: ((...args: T[]) => any) | undefined;
-
-    /** 当前页变化事件（分页） */
-    "onCurrent-change"?: ((...args: T[]) => any) | undefined;
-
-    /** 全选事件 */
-    "onSelect-all"?: ((...args: T[]) => any) | undefined;
-
-    /** 选中项变化事件 */
-    "onSelection-change"?: ((...args: T[]) => any) | undefined;
-
-    /** 单元格鼠标进入事件 */
-    "onCell-mouse-enter"?: ((...args: T[]) => any) | undefined;
-
-    /** 单元格鼠标离开事件 */
-    "onCell-mouse-leave"?: ((...args: T[]) => any) | undefined;
-
-    /** 单元格右键菜单事件 */
-    "onCell-contextmenu"?: ((...args: T[]) => any) | undefined;
-
-    /** 单元格单击事件 */
-    "onCell-click"?: ((...args: T[]) => any) | undefined;
-
-    /** 单元格双击事件 */
-    "onCell-dblclick"?: ((...args: T[]) => any) | undefined;
-
-    /** 行单击事件 */
-    "onRow-click"?: ((...args: T[]) => any) | undefined;
-
-    /** 行右键菜单事件 */
-    "onRow-contextmenu"?: ((...args: T[]) => any) | undefined;
-
-    /** 行双击事件 */
-    "onRow-dblclick"?: ((...args: T[]) => any) | undefined;
-
-    /** 表头单击事件 */
-    "onHeader-click"?: ((...args: T[]) => any) | undefined;
-
-    /** 表头右键菜单事件 */
-    "onHeader-contextmenu"?: ((...args: T[]) => any) | undefined;
-
-    /** 排序变化事件 */
-    "onSort-change"?: ((...args: T[]) => any) | undefined;
-
-    /** 筛选变化事件 */
-    "onFilter-change"?: ((...args: T[]) => any) | undefined;
-
-    /** 表头拖拽结束事件 */
-    "onHeader-dragend"?: ((...args: T[]) => any) | undefined;
-}
-
-/**
- * AxTable 表格配置选项接口
- * 整合了表格属性、事件、列配置、分页配置、工具栏和搜索配置
- * @template T - 表格行数据类型
- * @template R - 搜索条件数据类型
- */
-export interface AxTableOptions<T extends Record<string, any> = any, R extends Record<string, any> = any>
-    extends AxTableProps<T>, AxTableEmits<T>, AxTableEmits<T> {
-    /**
-     * 表格列配置映射表，用于定义表格的各个列（字段名、宽度、渲染方式等）
-     * @see FieldsConfig - 字段配置类型
-     * @see AxTableColumnsProps - 表格列属性类型
-     */
-    columnConfig?: FieldsConfig<AxTableColumnsProps>
-
-    /**
-     * 分页配置项，用于配置分页组件的显示和行为
-     * @see AxTablePageOptions - 分页选项类型
-     */
-    pageConfig?: AxTablePageOptions
-
-    /**
-     * 工具栏按钮配置映射表，用于配置表格上方的操作按钮（新增、删除、导出等）
-     * @see FieldsConfig - 字段配置类型
-     * @see AxButtonOptions - 按钮选项类型
-     */
-    toolConfig?: FieldsConfig<AxButtonOptions>
-
-    /**
-     * 搜索区域配置项，用于配置表格上方的搜索表单
-     * @see AxTableSelectOptions - 表格搜索选项类型
-     */
-    searchConfig?: AxTableSelectOptions<R>
-}