@aoao-y33/ui 0.0.3 → 0.0.5

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>
-}

package/src/table/components/table/table.vue

@@ -1,77 +0,0 @@
-<template>
-  <div class="flex flex-col w-full h-full gap-2 overflow-hidden p-4" v-loading="_loading">
-    <div class="w-full rounded-(--ax-normal-radius) p-4 pb-0 bg-(--ax-block-color)" v-if="slots.search">
-      <slot name="search"></slot>
-    </div>
-    <div class="w-full rounded-(--ax-normal-radius) p-4 bg-(--ax-block-color)" v-if="slots.tool">
-      <slot name="tool"></slot>
-    </div>
-    <div class="flex-1 rounded-(--ax-normal-radius) overflow-hidden gap-2 flex flex-col bg-(--ax-block-color) p-4">
-      <div class="flex-1 overflow-auto">
-        <ElTable v-bind="{...tableProps,...attrs}"
-                 :header-cell-class-name="'ax-table__header'+' '+headerCellClassName"
-                 :stripe="true"
-                 :showOverflowTooltip="showOverflowTooltip"
-                 :data="_data" height="100%" ref="tableRef">
-          <slot></slot>
-        </ElTable>
-      </div>
-      <div v-if="slots.footer" class="flex justify-end">
-        <slot name="footer"></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {ElTable, vLoading, type TableInstance} from "element-plus";
-
-defineOptions({name: 'AxTable'})
-import type {AxTableProps} from "./props";
-import {useDefineProps, useFetch} from "@aoao-y33/hooks";
-import {computed, onMounted, provide, ref, useAttrs, useSlots} from "vue";
-
-const {
-  data = [],
-  showOverflowTooltip = true,
-  api = null,
-  apiConfig = {immediate: true},
-  ...props
-} = defineProps<AxTableProps>()
-const attrs = useAttrs();
-const slots = useSlots();
-const [result, requestApi] = useFetch(null, apiConfig);
-provide("requestApi", requestApi);
-const tableProps = useDefineProps(props)
-const tableRef = ref<TableInstance>();
-const _data = computed(() => {
-  if (result.value) {
-    if (slots.footer) {
-      return result.value?.data?.data || []
-    }
-    return result.value?.data || []
-  }
-  return data;
-})
-const _loading = computed(() => {
-  return requestApi.getConfig().loading || false;
-})
-const getElTable = () => {
-  return tableRef.value as TableInstance;
-}
-onMounted(() => {
-  if (api) {
-    requestApi.setApi(api);
-  }
-})
-defineExpose({
-  getElTable,
-  ...requestApi,
-})
-
-</script>
-<style scoped lang="scss">
-:deep(.ax-table__header) {
-  background: var(--el-fill-color-lighter) !important;
-}
-</style>

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

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

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

@@ -1,26 +0,0 @@
-import type {TableColumnCtx} from "element-plus";
-
-/**
- * AxTableColumns 表格列组件属性接口
- * 继承自 Element Plus TableColumnCtx，扩展了自定义列类型和组件配置功能
- * @template T - 表格行数据类型，必须是对象类型
- */
-export interface AxTableColumnsProps<T extends Record<string, any>= any> extends Partial<TableColumnCtx<T>>{
-    /**
-     * 列类型，决定该列的渲染方式
-     * @example
-     * - 'index': 索引列（显示行号）
-     * - 'selection': 选择列（复选框）
-     * - 'expand': 展开列（展开行内容）
-     * - 'custom': 自定义列（使用自定义组件渲染）
-     */
-    type?:string,
-
-    /**
-     * 自定义组件的属性配置
-     * 当列使用自定义组件渲染时，透传给该组件的属性
-     * @example
-     * componentProps: { color: 'red', size: 'large' }
-     */
-    componentProps?:Record<string, any>
-}