vue-2024-ui 0.0.9 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-2024-ui",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "private": false,
   "type": "module",
   "main": "src/components/index.js",

package/src/components/g-form.vue

@@ -20,7 +20,7 @@
             <slot name="footer" v-if="!model.form.footer.hidden">
                 <div :style="model.form.footer.style">
                     <slot name="footer-left"></slot>
-                    <el-button @click="model.form.submit.click(formInfo, model)"
+                    <el-button @click.stop="model.form.submit.click(formInfo, model)"
                         v-bind="filterObject(model.form.submit, k => !['click'].includes(k))"
                         v-if="!model?.form?.submit?.hidden">
                         {{ model?.form?.submit?.label }}
@@ -46,7 +46,7 @@ defineOptions({
     inheritAttrs: false
 })
 const model = defineModel({ required: true });
-const emits = defineEmits(["usubmit", "reset"]);
+const emits = defineEmits(["handSubmit", "reset"]);
 const gform = ref(null);
 let marginRight = ref(32);
 const options = inject('options');
@@ -78,10 +78,10 @@ const defaultFormAttrs = {
         plain: true,
         hidden: false,
         click: async (formInfo, model) => {
-            emits("usubmit", formInfo, model);
             if (!gform.value) return
             await gform.value.validate((valid, fields) => {
                 if (valid) {
+                    emits("handSubmit", formInfo, model);
                     console.log("提交");
                 } else {
                     console.log('表单验证不通过!', fields);
@@ -144,7 +144,6 @@ const getItemRulesByItem = (item) => {
         }
         // 获取item属性并合并规则
         const itemInfo = { ...itemDefaultRule, ...item };
-
         //必填验证
         if (itemInfo.required) {
             itemRules.push({ required: true, message: `${itemInfo.label}不能为空！`, trigger: 'blur' });

package/src/components/g-table.vue

@@ -12,7 +12,7 @@
                             <slot name="control-add">
                                 <el-button v-bind="model.control.add" @click="model.control.add.click(model)">{{
                                     model.control.add.label
-                                }}</el-button>
+                                    }}</el-button>
                             </slot>
                             <slot name="control-add-right"></slot>
                         </div>
@@ -89,11 +89,10 @@
 <script setup>
 import dayjs from 'dayjs';
 import { ElMessageBox } from 'element-plus';
-import { computed, onMounted, watchEffect, h, inject, ref, defineAsyncComponent, shallowRef } from 'vue';
+import { computed, watchEffect, inject, ref, h } from 'vue';
 import GForm from './g-form.vue';
 import gQuery from './g-query.vue';
-import { openModal, mergeObjects, convertToPx } from './index';
-import { filterObject } from '.';
+import { openModal, mergeObjects, convertToPx, filterObject } from './index';
 
 defineOptions({
     name: "g-table",
@@ -140,9 +139,6 @@ model.value.table = mergeObjects(
     options?.table,
     model.value.table
 );
-
-let closeModel = ref(() => { });
-const editModel = defineAsyncComponent(() => import('./g-form.vue'));
 const defaultControl = {
     type: 'control', label: '操作', edit: false, width: 250, fixed: 'right',
     style: { ...model.value?.control?.style },
@@ -154,9 +150,6 @@ const defaultControl = {
         dialog: {
             title: '新增',
             mode: "drawer",
-            slots: {
-                default: () => h(GForm, { modelValue: model.value }, { ...model.value.form.slots }),
-            },
         },
         auth: () => true,
         click: (m) => {
@@ -164,6 +157,7 @@ const defaultControl = {
                 ...model.value.form,
                 type: 'hidden',
                 disabled: undefined,
+                footer: { hidden: false }
             };
             let w = model.value?.form?.style?.width || 600;
             if (model.value.control.add.dialog.mode == "drawer") {
@@ -177,7 +171,20 @@ const defaultControl = {
                     model.value[key].value = initFormData[key];
                 }
             });
-            model.value.form.close = openModal(model.value.control.add.dialog, model.value?.control?.add?.dialog?.mode);
+            let colse = openModal(
+                {
+                    ...model.value?.control?.add?.dialog,
+                    slots: {
+                        default: () => h(GForm, {
+                            modelValue: model.value,
+                            ...model.value.form,
+                            key: new Date(),
+                            onHandSubmit: () => {
+                                colse();
+                            },
+                        }, { ...model.value.form.slots })
+                    }
+                }, model.value?.control?.add?.dialog?.mode);
         },
     },
     view: {
@@ -185,9 +192,6 @@ const defaultControl = {
         dialog: {
             title: '查看',
             mode: "dialog",
-            slots: {
-                default: () => h(GForm, { modelValue: model.value }, { ...model.value.form.slots }),
-            },
         },
         auth: (row, column, $index) => {
             return false;
@@ -197,6 +201,7 @@ const defaultControl = {
                 ...model.value.form,
                 type: 'hidden',
                 disabled: true,
+                footer: { hidden: true }
             };
             let w = model.value?.form?.style?.width || 600;
             if (model.value.control.view.dialog.mode == "drawer") {
@@ -210,7 +215,19 @@ const defaultControl = {
                     model.value[key].value = row[key];
                 }
             });
-            model.value.form.close = openModal(model.value.control.view.dialog, model.value?.control?.view?.dialog?.mode);
+            let colse = openModal(
+                {
+                    ...model.value?.control?.view?.dialog,
+                    slots: {
+                        default: () => h(GForm, {
+                            modelValue: model.value,
+                            ...model.value.form,
+                            onHandSubmit: () => {
+                                colse();
+                            },
+                        }, { ...model.value.form.slots })
+                    }
+                }, model.value?.control?.view?.dialog?.mode);
         },
     },
     edit: {
@@ -218,15 +235,6 @@ const defaultControl = {
         dialog: {
             title: '编辑',
             mode: "dialog",
-            slots: {
-                default: () => {
-                    model.value.form.onUsubmit = () => {
-                        if (closeModel.value)
-                            closeModel.value();
-                    }
-                    return h(editModel, { modelValue: model.value, ...model.value.form }, { ...model.value.form.slots })
-                },
-            },
         },
         auth: (row, column, $index) => {
             return true;
@@ -236,6 +244,7 @@ const defaultControl = {
                 ...model.value.form,
                 type: 'hidden',
                 disabled: undefined,
+                footer: { hidden: false }
             };
             let w = model.value?.form?.style?.width || 600;
             if (model.value.control.edit.dialog.mode == "drawer") {
@@ -249,7 +258,19 @@ const defaultControl = {
                     model.value[key].value = row[key];
                 }
             });
-            closeModel.value = openModal(model.value?.control?.edit?.dialog, model.value?.control?.edit?.dialog?.mode);
+            let colse = openModal(
+                {
+                    ...model.value?.control?.edit?.dialog,
+                    slots: {
+                        default: () => h(GForm, {
+                            modelValue: model.value,
+                            ...model.value.form,
+                            onHandSubmit: () => {
+                                colse();
+                            },
+                        }, { ...model.value.form.slots })
+                    }
+                }, model.value?.control?.edit?.dialog?.mode);
         },
     },
     delete: {
@@ -350,9 +371,6 @@ const query = (q) => {
     //model.value.table.load();
 }
 
-onMounted(() => {
-
-});
 
 watchEffect(() => {
     model.value.table.load();

package/src/components/index.d.ts

@@ -1,37 +1,90 @@
-import { Component, VNode } from 'vue';
-
-declare const ElementPlus: any; // 假设ElementPlus已经有了类型声明
-declare const ElDialog: Component;
-declare const ElDrawer: Component;
+// 导入Vue的Component模块
+import { Component } from 'vue';
+// 从element-plus库中导入ElDialog和ElDrawer组件
+import { ElDialog, ElDrawer } from 'element-plus';
 
+/**
+ * 全局选项的接口定义
+ */
 export interface GlobalOptions {
-    // 这里定义全局选项的类型
+    // 在这里定义全局选项的类型
 }
 
+/**
+ * 打开模态框的属性接口定义
+ */
 export interface OpenModalProps {
+    // 在这里定义传递给模态组件的属性类型
     slots?: {
-        default?: (a: any) => VNode;
-        header?: (p: any) => VNode;
-        footer?: (p: any) => VNode;
+        // 默认插槽的函数类型定义
+        default?: (a: any) => any;
+        // 头部插槽的函数类型定义
+        header?: (p: any) => any;
+        // 底部插槽的函数类型定义
+        footer?: (p: any) => any;
     };
-    // 其他props的类型定义
 }
 
-export function openModal(props?: OpenModalProps, mode?: 'dialog' | 'drawer'): () => void;
+/**
+ * 转换为像素的选项接口定义
+ */
+export interface ConvertToPxOptions {
+    // 参考尺寸的可选属性，类型为number
+    referenceSize?: number;
+}
 
-export function convertToPx(value: string | number, referenceSize?: number): number;
+/**
+ * 合并对象的选项接口定义
+ */
+export interface MergeObjectsOptions {
+    // 在这里定义合并对象的选项类型
+}
 
-export function mergeObjects<T>(...objects: T[]): T;
+/**
+ * 过滤对象的选项接口定义
+ */
+export interface FilterObjectOptions {
+    // 过滤函数的可选属性，类型为(key: string, value: any) => boolean
+    filter?: (key: string, value: any) => boolean;
+}
 
-export function filterObject<T>(obj: T, filter?: (key: keyof T) => boolean): T;
+/**
+ * 打开模态框的函数定义
+ * @param {OpenModalProps} [props] - 传递给模态组件的属性
+ * @param {'dialog' | 'drawer'} [mode] - 模态框的模式，可选值为'dialog'或'drawer'
+ * @returns {() => void} - 返回一个函数，用于关闭模态框
+ */
+export function openModal(props?: OpenModalProps, mode?: 'dialog' | 'drawer'): () => void;
+
+/**
+ * 将值转换为像素的函数定义
+ * @param {string | number} value - 需要转换的值
+ * @param {ConvertToPxOptions} [options] - 转换选项
+ * @returns {number} - 转换后的像素值
+ */
+export function convertToPx(value: string | number, options?: ConvertToPxOptions): number;
 
-export const components: {
-    gTable: Component;
-    gForm: Component;
-    // 其他组件的类型定义
-};
+/**
+ * 合并多个对象的函数定义
+ * @param {...Record<string, any>} objects - 需要合并的对象
+ * @returns {Record<string, any>} - 合并后的对象
+ */
+export function mergeObjects(...objects: Array<Record<string, any>>): Record<string, any>;
 
-declare const _default: {
-    install: (app: any, options?: GlobalOptions) => void;
-};
-export default _default;
+/**
+ * 过滤对象的函数定义
+ * @param {Record<string, any>} obj - 需要过滤的对象
+ * @param {FilterObjectOptions} [options] - 过滤选项
+ * @returns {Record<string, any>} - 过滤后的对象
+ */
+export function filterObject(obj: Record<string, any>, options?: FilterObjectOptions): Record<string, any>;
+
+/**
+ * 扩展Vue的ComponentCustomProperties接口，添加openModel属性
+ */
+declare module 'vue' {
+    interface ComponentCustomProperties {
+        // openModel属性的类型定义，指向openModal函数
+        openModel: typeof openModal;
+    }
+}

package/src/components/index.js

@@ -2,11 +2,11 @@
 
 import ElementPlus from 'element-plus'
 import { ElDialog, ElDrawer } from "element-plus";
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import gTable from "./g-table.vue";
 import gForm from "./g-form.vue";
 import { createApp, h, provide, readonly, ref } from "vue";
 const globalOptions = {};
-
 const components = [
     gTable,
     gForm
@@ -19,45 +19,73 @@ export default {
             app.component(component.name, component);
         }
         app.provide("options", readonly(options));
-        app.config.globalProperties.openModel = openModal;
+        app.config.globalProperties.openModal = openModal;
     }
 }
-const openModal = (props = {}, mode = "dialog") => {
+
+/**
+ * 打开模态对话框的函数。
+ * @param {Object} modalProps - 模态对话框的属性。
+ * @param {string} [mode="dialog"] - 模态对话框的模式，支持"dialog"和"drawer"。
+ * @returns {Function} - 关闭模态对话框的函数。
+ */
+const openModal = (modalProps = {}, mode = "dialog") => {
+    // 创建一个新的 div 元素
     const el = document.createElement('div');
+    // 定义关闭模态对话框的函数
     let closeModal = () => { };
+    // 使用 ref 创建一个响应式的 visible 变量
     const visible = ref(true);
+    // 创建一个新的 Vue 应用实例
     let modalApp = createApp({
         setup() {
+            // 定义关闭模态对话框的函数
             closeModal = () => {
                 visible.value = false;
                 modalApp.unmount(); // 关闭对话框时卸载组件
-                delete el.remove(); // 关闭对话框时删除元素
+                el.remove(); // 关闭对话框时删除元素
                 modalApp = null;
             };
-            provide("options", globalOptions);
+            // 返回渲染函数
             return () => h(mode == "dialog" ? ElDialog : mode == "drawer" ? ElDrawer : null, {
                 modelValue: visible.value,
                 'onUpdate:modelValue': closeModal,
                 draggable: true,
                 "append-to-body": true,
-                ...props
+                'destroy-on-close': true,
+                ...modalProps
             },
                 {
-                    default: props.slots?.default ? (a) => h('div', {}, props.slots.default(a)) : null,
-                    header: props.slots?.header ? (p) => h('div', {}, props.slots.header(p)) : null,
-                    footer: props.slots?.footer ? (p) => h('div', {}, props.slots.footer(p)) : null
+                    default: modalProps.slots?.default ? () => modalProps.slots.default() : null,
+                    header: modalProps.slots?.header ? () => h('div', {}, modalProps.slots.header()) : null,
+                    footer: modalProps.slots?.footer ? () => h('div', {}, modalProps.slots.footer()) : null
                 }
             );
         }
     });
+    // 注册全局组件
     for (const component of components) {
         modalApp.component(component.name, component);
     }
-    modalApp.use(ElementPlus).mount(el);
+    // 提供全局选项
+    modalApp.provide("options", globalOptions);
+    // 使用 ElementPlus 插件
+    modalApp.use(ElementPlus, { locale: zhCn }).mount(el);
+    // 将元素添加到 body 中
     document.body.appendChild(el);
+    // 返回关闭模态对话框的函数
     return closeModal;
 };
 
+
+/**
+ * 将值转换为像素的函数，支持px、vh、vw、%和calc表达式。
+ * @param {string|number} value - 需要转换的值。
+ * @param {number} [referenceSize=window.innerWidth] - 用于转换%值的参考大小。
+ * @returns {number} - 转换后的像素值。
+ * @throws {Error} - 如果无法识别单位或提供的参考大小无效。
+ */
+
 function convertToPx(value, referenceSize = window.innerWidth) {
     // 如果已经是px，直接返回
     if (typeof value === 'number') {
@@ -108,6 +136,11 @@ function convertToPx(value, referenceSize = window.innerWidth) {
     throw new Error('Unsupported unit in value: ' + value);
 }
 
+/**
+ * 合并多个对象的函数，递归地合并嵌套对象。
+ * @param {...Object} objects - 需要合并的对象。
+ * @returns {Object} - 合并后的对象。
+ */
 
 function mergeObjects(...objects) {
     const result = ref({});
@@ -127,7 +160,12 @@ function mergeObjects(...objects) {
     return result.value;
 }
 
-
+/**
+ * 过滤对象的函数，根据给定的过滤条件返回一个新的对象。
+ * @param {Object} obj - 需要过滤的对象。
+ * @param {Function} filter - 过滤条件函数，接收键和值作为参数，返回布尔值。
+ * @returns {Object} - 过滤后的新对象。
+ */
 function filterObject(obj, filter = (key, value) => filter(key, value)) {
     const result = {};
     for (const key in obj) {