easy-elplus 1.0.0

package/es/packages/components/dialog/src/dialog.mjs

@@ -0,0 +1,130 @@
+import { ref, createApp, h, getCurrentInstance } from 'vue';
+import { ElConfigProvider, ElDialog, ElButton } from 'element-plus';
+import { getApp } from '../../../utils/vue/install.mjs';
+import { isString } from '../../../utils/type.mjs';
+
+function useEplDialog(componet, props, DialogProps) {
+  if (isString(componet)) {
+    const text = componet;
+    componet = () => h("div", text);
+  }
+
+  const modal = ref(true);
+  const instance = ref();
+  const disabled = ref(false);
+  const cb = DialogProps.cb;
+
+  const dialog = () =>
+    h(
+      ElConfigProvider,
+      {
+        locale: getCurrentInstance()?.appContext?.config.globalProperties?.locale
+      },
+      {
+        default: () =>
+          h(
+            ElDialog,
+            {
+              ...DialogProps,
+              modelValue: modal.value
+            },
+            {
+              default: () => h(componet, { ref: instance, ...props }),
+              footer: DialogProps.footer
+            }
+          )
+      }
+    );
+
+  const app = createApp(dialog);
+
+  // 同步全局 app 的上下文
+  const globalApp = getApp();
+  if (globalApp) {
+    app._context.components = { ...globalApp._context.components, ...app._context.components };
+    app._context.directives = { ...globalApp._context.directives, ...app._context.directives };
+    app._context.provides = { ...globalApp._context.provides, ...app._context.provides };
+  }
+
+  const div = document.createElement("div");
+  document.body.appendChild(div);
+  app.mount(div);
+
+  const close = () => {
+    modal.value = false;
+  };
+
+  const createConfirm = props => {
+    const Component = {
+      setup() {
+        const _props = {
+          name: "确认",
+          hidden: false,
+          autoClose: true,
+          click: "confirm",
+          ...(isString(props) ? { name: props } : props)
+        };
+
+        const { name, hidden, autoClose, click } = _props;
+        const loading = ref(false);
+
+        const onClick = async () => {
+          try {
+            loading.value = true;
+            disabled.value = true;
+
+            if (isString(click)) {
+              await instance.value?.[click]?.();
+            } else {
+              await click?.(instance);
+            }
+
+            cb?.();
+            autoClose && close();
+          } finally {
+            loading.value = false;
+            const t = setTimeout(() => {
+              disabled.value = false;
+              clearTimeout(t);
+            }, 200);
+          }
+        };
+
+        return () =>
+          !hidden &&
+          h(
+            ElButton,
+            {
+              loading: loading.value,
+              type: "primary",
+              disabled: disabled.value,
+              onClick,
+              ..._props
+            },
+            () => name
+          )
+      }
+    };
+
+    return h(Component)
+  };
+
+  const createCancel = (name = "取消", props) => {
+    const Component = {
+      setup() {
+        return () => h(ElButton, { ...props, onClick: close }, () => name)
+      }
+    };
+
+    return h(Component)
+  };
+
+  return {
+    instance,
+    close,
+    createConfirm,
+    createCancel
+  }
+}
+
+export { useEplDialog };

package/es/packages/components/dialog/src/useDialog.mjs

@@ -0,0 +1,183 @@
+import { markRaw, ref, createApp, h } from 'vue';
+import { ElDialog, ElButton } from 'element-plus';
+import { isFunction } from '../../../../node_modules/.pnpm/@vue_shared@3.5.27/node_modules/@vue/shared/dist/shared.esm-bundler.mjs';
+import { getGlobalAppContext } from '../../../utils/vue/appContext.mjs';
+import { isString } from '../../../utils/type.mjs';
+
+/**
+ *
+ * @param {*} component 组件
+ * @param {*} componentProps 组件属性
+ * @param {*} modalProps 对话框属性
+ * @param {*} context 上下文
+ * @returns Promise
+ */
+const useDialog = (component, componentProps = {}, modalProps = {}, context = null) => {
+  // 如果 component 是字符串，转换为渲染函数
+  const contentComponent = isString(component) ? { render: () => h("div", component) } : markRaw(component);
+
+  const {
+    title = "提示",
+    confirmButtonText = "确 认",
+    cancelButtonText = "取 消",
+    showConfirmButton = true,
+    showCancelButton = true,
+    methodKey = "submit",
+    beforeClose,
+    onConfirm,
+    onCancel,
+    footer,
+    draggable = true,
+    ...dialogProps
+  } = modalProps;
+
+  const visible = ref(true);
+  const loading = ref(false);
+  const componentRef = ref(null);
+
+  const appContext = context || getGlobalAppContext();
+
+  const div = document.createElement("div");
+  document.body.appendChild(div);
+
+  return new Promise((resolve, reject) => {
+    let app = null;
+    let isSettled = false; // 标记 Promise 是否已完成，防止重复触发
+
+    // 销毁
+    const destroy = () => {
+      if (app) {
+        app.unmount();
+        app = null;
+      }
+      if (div.parentNode) {
+        div.parentNode.removeChild(div);
+      }
+    };
+
+    // 关闭
+    const close = () => {
+      visible.value = false;
+    };
+
+    // 统一处理 Promise 结束逻辑
+    const handleAction = async (action, data) => {
+      if (isSettled) return
+      isSettled = true;
+      if (action === "resolve") resolve(data);
+      else reject(data);
+      close();
+    };
+
+    // 确认
+    const handleConfirm = async () => {
+      loading.value = true;
+      try {
+        const target = componentRef.value;
+        // 调用组件方法
+        if (target && methodKey && isFunction(target[methodKey])) {
+          await target[methodKey]();
+        }
+        // 调用 onConfirm
+        if (isFunction(onConfirm)) {
+          await onConfirm(target);
+        }
+        // 返回 resolve
+        await handleAction("resolve", target);
+      } catch (e) {
+        isSettled = false; // 失败时不沉淀状态，允许用户修正后重试
+        reject(e);
+      } finally {
+        loading.value = false;
+      }
+    };
+
+    // 取消
+    const handleCancel = () => {
+      if (isFunction(onCancel)) onCancel();
+      handleAction("reject", "closed");
+    };
+
+    // DialogApp
+    const DialogApp = {
+      setup() {
+        return () =>
+          h(
+            ElDialog,
+            {
+              ...dialogProps,
+              modelValue: visible.value,
+              "onUpdate:modelValue": val => {
+                visible.value = val;
+                if (!val && !isSettled) handleAction("reject", "closed");
+              },
+              title,
+              draggable,
+              destroyOnClose: true,
+              onClosed: destroy, // 动画结束后彻底回收
+              // 拦截右上角 X 和遮罩层点击
+              beforeClose: done => {
+                if (beforeClose) {
+                  beforeClose(() => {
+                    if (!isSettled) handleAction("reject", "closed");
+                    done();
+                  });
+                } else {
+                  if (!isSettled) handleAction("reject", "closed");
+                  done();
+                }
+              }
+            },
+            {
+              // 默认内容 渲染组件
+              default: () => h(contentComponent, { ...componentProps, ref: componentRef }),
+
+              // 底部内容
+              footer: () => {
+                // 自定义 footer
+                if (footer) {
+                  return isFunction(footer)
+                    ? footer({ close: handleCancel, confirm: handleConfirm, loading: loading.value })
+                    : footer
+                }
+                return h("div", { class: "dialog-footer" }, [
+                  // 取消按钮
+                  showCancelButton && h(ElButton, { onClick: handleCancel }, () => cancelButtonText),
+                  // 确认按钮
+                  showConfirmButton &&
+                    h(
+                      ElButton,
+                      {
+                        type: "primary",
+                        loading: loading.value,
+                        onClick: handleConfirm
+                      },
+                      () => confirmButtonText
+                    )
+                ])
+              }
+            }
+          )
+      }
+    };
+
+    app = createApp(DialogApp);
+
+    // 优化：上下文继承
+    if (appContext) {
+      // 核心插件继承 (避免直接操作 _context 私有属性的风险)
+      // 如果你的 getGlobalAppContext 已经拿到了真实的 context，可以这样同步
+      Object.assign(app._context, {
+        ...appContext,
+        reload: app._context.reload // 保留新应用的 reload 方法
+      });
+
+      // 必须手动同步 provides 以确保 inject 可用
+      app._context.provides = { ...(appContext.provides || {}), ...app._context.provides };
+    }
+
+    app.mount(div);
+  })
+};
+
+export { useDialog };

package/es/packages/components/table/index.mjs

@@ -0,0 +1,10 @@
+import { withInstall } from '../../utils/vue/install.mjs';
+import table from './src/table.vue.mjs';
+
+// 用来整合组件的，最终实现导出组件
+
+
+// 通过 withInstall 方法给 button 添加了一个 Vue3 插件所需的 install 方法
+const EasyTable = withInstall(table);
+
+export { EasyTable, EasyTable as default };

package/es/packages/components/table/src/scrollTo.mjs

@@ -0,0 +1,69 @@
+import { isUndefined } from '../../../utils/type.mjs';
+
+Math.easeInOutQuad = function (t, b, c, d) {
+  t /= d / 2;
+  if (t < 1) {
+    return (c / 2) * t * t + b
+  }
+  t--;
+  return (-c / 2) * (t * (t - 2) - 1) + b
+};
+
+// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
+var requestAnimFrame = (function () {
+  if (typeof window === "undefined") {
+    return function (callback) {
+      setTimeout(callback, 1000 / 60);
+    }
+  }
+  return (
+    window.requestAnimationFrame ||
+    window.webkitRequestAnimationFrame ||
+    window.mozRequestAnimationFrame ||
+    function (callback) {
+      window.setTimeout(callback, 1000 / 60);
+    }
+  )
+})();
+
+/**
+ * Because it's so fucking difficult to detect the scrolling element, just move them all
+ * @param {number} amount
+ */
+function move(amount) {
+  document.documentElement.scrollTop = amount;
+  document.body.parentNode.scrollTop = amount;
+  document.body.scrollTop = amount;
+}
+
+function position() {
+  return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
+}
+
+/**
+ * @param {number} to
+ * @param {number} duration
+ * @param {Function} callback
+ */
+function scrollTo(to, duration, callback) {
+  const start = position();
+  const change = to - start;
+  const increment = 20;
+  let currentTime = 0;
+  duration = isUndefined(duration) ? 500 : duration;
+  var animateScroll = function () {
+    // increment the time
+    currentTime += increment;
+    // find the value with the quadratic in-out easing function
+    var val = Math.easeInOutQuad(currentTime, start, change, duration);
+    // move the document.body
+    move(val);
+    // do the animation unless its over
+    if (currentTime < duration) {
+      requestAnimFrame(animateScroll);
+    }
+  };
+  animateScroll();
+}
+
+export { scrollTo };