@aoao-y33/ui 0.0.2

package/src/modal/components/form-modal/form-modal.vue

@@ -0,0 +1,158 @@
+<template>
+  <Modal v-bind="{...modalProps,...attrs}" v-model="_open"
+         :header-class="'ax-form-modal-header'+' '+headerClass"
+         :footer-class="'ax-form-modal-footer'+' '+footerClass"
+         :body-class="'ax-form-modal-body'+' '+bodyClass"
+         :close-icon
+         :class="['ax-form-modal',className]"
+         ref="modalRef"
+         :show-close="false">
+    <template #header v-if="title||showClose">
+      <div class="flex justify-between items-center overflow-hidden gap-1">
+        <div :title="title" class="flex-1 whitespace-nowrap text-ellipsis overflow-hidden">{{ title }}</div>
+        <ElIcon @click="close">
+          <Close/>
+        </ElIcon>
+      </div>
+    </template>
+    <template #default>
+      <AxForm v-loading="_loading" v-bind="{...modalProps,...attrs} as AxFormProps" :is-default="false" ref="formRef">
+        <slot></slot>
+      </AxForm>
+    </template>
+    <template #footer v-if="slots.button||isDefault">
+      <template v-if="isDefault">
+        <ax-button v-bind="_confirmButton" @click="onConfirm"></ax-button>
+        <ax-button v-bind="_cancelButton" @click="close"></ax-button>
+      </template>
+      <slot name="button"></slot>
+    </template>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+import type {AxFormModalProps, AxFormModalEmits} from "./props";
+import {useDefineProps, useFetch} from "@aoao-y33/hooks";
+import {computed, type Ref, ref, useAttrs, useSlots} from "vue";
+import {type DrawerInstance, ElDialog, ElDrawer, ElIcon,vLoading} from "element-plus";
+import {AxButton, type AxButtonProps} from "@/button";
+import {Close} from "@element-plus/icons-vue";
+import {AxForm, type AxFormInstance, type AxFormProps, useFormExpose} from "@/form";
+
+const {
+  type = 'dialog',
+  showClose = true,
+  open = false,
+  title = '',
+  isDefault = true,
+  confirmButton = {},
+  cancelButton = {},
+  className = "md:w-[30%]! w-[100%]!",
+  api = null,
+  apiConfig = {},
+  loading=false,
+  ...props
+} = defineProps<AxFormModalProps>();
+
+const emits = defineEmits<AxFormModalEmits>();
+
+const _confirmButton = useDefineProps<AxButtonProps>(confirmButton, {
+  text: '确定',
+  icon: 'CircleCheckFilled',
+  componentProps: {
+    type: 'primary',
+  }
+})
+
+const _cancelButton = useDefineProps<AxButtonProps>(cancelButton, {
+  text: '取消',
+  icon: 'CircleCloseFilled',
+  componentProps: {
+    type: 'default',
+  }
+})
+
+const slots = useSlots();
+
+const attrs = useAttrs();
+
+const [,requestApi] = useFetch(api, apiConfig);
+
+const modalProps = useDefineProps(props);
+
+const _open = computed({
+  get() {
+    return open;
+  },
+  set(value) {
+    emits('update:open', value);
+  }
+})
+
+const _loading = computed(()=>{
+  return Boolean(loading||requestApi.getConfig().loading);
+})
+
+
+const modalRef = ref<DrawerInstance>();
+
+const formRef = ref<AxFormInstance>() as Ref<AxFormInstance>;
+
+const formApi = useFormExpose(formRef);
+
+const Modal = computed(() => {
+  return type === 'dialog' ? ElDialog : ElDrawer;
+})
+
+const close = () => {
+  modalRef.value?.handleClose();
+  emits("cancel");
+}
+
+const onConfirm = () => {
+  const data = formApi.getValues();
+  formApi.getElForm().validate((res) => {
+    if(res){
+      if(requestApi.getReady()){
+        requestApi.load(data);
+      }
+      emits("confirm",data);
+    }
+  })
+
+}
+
+const getModal = () => {
+  return modalRef.value;
+}
+
+defineExpose({
+  getModal,
+  close,
+  ...formApi,
+  ...requestApi,
+})
+</script>
+
+<style lang="scss">
+.ax-form-modal {
+  padding: 0 !important;
+}
+
+.ax-form-modal-header {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--el-border-color);
+}
+
+.ax-form-modal-body {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  padding: 8px 12px;
+}
+
+.ax-form-modal-footer {
+  padding: 8px 12px;
+  border-top: 1px solid var(--el-border-color);
+}
+</style>

package/src/modal/components/form-modal/index.ts

@@ -0,0 +1,5 @@
+import formModal from './form-modal.vue';
+export * from './props';
+export const AxFormModal = formModal;
+export default AxFormModal;
+export type AxFormModalInstance = InstanceType<typeof formModal>;

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

@@ -0,0 +1,61 @@
+import type {AxModalProps} from "@/modal";
+import type {AxFormItemOptions, AxFormProps} from "@/form";
+import type {EmitsToEventProps} from "@aoao-y33/utils";
+import type {FieldsConfig} from "@aoao-y33/hooks";
+import type {AxButtonOptions} from "@/button";
+import type {EmitsToProps} from "vue";
+import type {DrawerEmits} from "element-plus";
+
+/**
+ * AxFormModal 表单弹窗组件属性接口
+ * 继承自 AxModalProps（弹窗属性）和 AxFormProps（表单属性），组合了弹窗和表单的双重功能
+ * @template T - 表单数据类型，必须是对象类型
+ */
+export interface AxFormModalProps<T extends Record<string, any> = any> extends AxModalProps, Omit<AxFormProps<T>, 'size'> {
+    // 继承了弹窗的所有属性和表单的大部分属性（排除了 size，避免与弹窗尺寸冲突）
+}
+
+/**
+ * AxFormModal 表单弹窗组件事件发射接口
+ * @template T - 表单数据类型
+ */
+export interface AxFormModalEmits<T extends Record<string, any> = any> {
+    /**
+     * 弹窗显示状态变化事件（用于 v-model:open 双向绑定）
+     * @param data - 新的显示状态（true/false）
+     */
+    'update:open': [data: boolean]
+
+    /**
+     * 确认按钮点击事件，触发表单验证和提交
+     * @param data - 验证通过后的表单数据
+     */
+    'confirm': [data: T]
+
+    /** 取消按钮点击事件或关闭弹窗时触发 */
+    'cancel': []
+}
+
+/**
+ * AxFormModal 表单弹窗配置选项接口
+ * 整合了弹窗属性、表单属性、事件处理和字段配置
+ * @template T - 表单数据类型
+ */
+export interface AxFormModalOptions<T extends Record<string, any> = any>
+    extends Omit<AxFormModalProps<T>, 'open'>,  // 排除 open 属性（由内部状态管理）
+        EmitsToProps<DrawerEmits>,              // 合并 Element Plus Drawer 的事件属性
+        EmitsToEventProps<AxFormModalEmits<T>> { // 合并自定义事件处理函数
+    /**
+     * 按钮配置映射表，用于配置弹窗中的操作按钮（确认、取消等）
+     * @see FieldsConfig - 字段配置类型
+     * @see AxButtonOptions - 按钮选项类型
+     */
+    buttonConfig?: FieldsConfig<AxButtonOptions>
+
+    /**
+     * 表单项配置映射表，用于配置弹窗内表单的各个字段
+     * @see FieldsConfig - 字段配置类型
+     * @see AxFormItemOptions - 表单项选项类型
+     */
+    fieldConfig?: FieldsConfig<AxFormItemOptions>
+}

package/src/modal/components/modal/index.ts

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

package/src/modal/components/modal/modal.vue

@@ -0,0 +1,127 @@
+<template>
+  <Modal v-bind="{...modalProps,...attrs}" v-model="_open"
+         :header-class="'ax-modal-header'+' '+headerClass"
+         :footer-class="'ax-modal-footer'+' '+footerClass"
+         :body-class="'ax-modal-body'+' '+bodyClass"
+         :close-icon
+         :class="['ax-modal',className]"
+         ref="modalRef"
+         :show-close="false" >
+    <template #header v-if="title||showClose">
+      <div class="flex justify-between items-center overflow-hidden gap-1">
+        <div :title="title" class="flex-1 whitespace-nowrap text-ellipsis overflow-hidden">{{title}}</div>
+        <ElIcon @click="close">
+          <Close/>
+        </ElIcon>
+      </div>
+    </template>
+    <template #default>
+      <slot></slot>
+    </template>
+    <template #footer v-if="slots.button||isDefault">
+      <template v-if="isDefault">
+        <ax-button v-bind="_confirmButton" @click="onConfirm"></ax-button>
+        <ax-button v-bind="_cancelButton" @click="close"></ax-button>
+      </template>
+      <slot name="button"></slot>
+    </template>
+  </Modal>
+</template>
+
+<script setup lang="ts">
+import type {AxModalProps, AxModalEmits} from "./props";
+import {useDefineProps} from "@aoao-y33/hooks";
+import {computed, ref, useAttrs, useSlots} from "vue";
+import {type DrawerInstance, ElDialog, ElDrawer,ElIcon} from "element-plus";
+import {AxButton, type AxButtonProps} from "@/button";
+import {Close} from "@element-plus/icons-vue";
+
+const {
+  type = 'dialog',
+  showClose = true,
+  open = false,
+  title = '',
+  isDefault = true,
+  confirmButton = {},
+  cancelButton = {},
+  className = "md:w-[30%]! w-[100%]!",
+  ...props
+} = defineProps<AxModalProps>();
+
+const emits = defineEmits<AxModalEmits>();
+
+const _confirmButton = useDefineProps<AxButtonProps>(confirmButton, {
+  text: '确定',
+  icon: 'CircleCheckFilled',
+  componentProps: {
+    type: 'primary',
+  }
+})
+
+const _cancelButton = useDefineProps<AxButtonProps>(cancelButton, {
+  text: '取消',
+  icon: 'CircleCloseFilled',
+  componentProps: {
+    type: 'default',
+  }
+})
+
+const slots = useSlots();
+
+const attrs = useAttrs();
+
+const modalProps = useDefineProps(props);
+
+const _open = computed({
+  get() {
+    return open;
+  },
+  set(value) {
+    emits('update:open', value);
+  }
+})
+
+const modalRef = ref<DrawerInstance>();
+
+const Modal = computed(() => {
+  return type === 'dialog' ? ElDialog : ElDrawer;
+})
+
+const close = ()=>{
+  modalRef.value?.handleClose();
+  emits("cancel");
+}
+
+const onConfirm=()=>{
+  emits("confirm");
+}
+
+const getModal =()=>{
+  return modalRef.value;
+}
+
+defineExpose({
+  getModal,
+  close
+})
+</script>
+
+<style lang="scss">
+.ax-modal{
+  padding: 0 !important;
+}
+.ax-modal-header{
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--el-border-color);
+}
+.ax-modal-body{
+  flex:1;
+  width: 100%;
+  height: 100%;
+  padding: 8px 12px;
+}
+.ax-modal-footer{
+  padding: 8px 12px;
+  border-top: 1px solid var(--el-border-color);
+}
+</style>

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

@@ -0,0 +1,78 @@
+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

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

package/src/modal/hoc/useFormModal.ts

@@ -0,0 +1,140 @@
+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;
+}