ep-craft 0.1.0 → 0.1.2

package/README.md

@@ -0,0 +1,108 @@
+# ep-craft
+
+基于 Vue 3 和 Element Plus 的组件库封装，统一使用 `Ep` 前缀对外提供组件与服务类 API。
+
+## 环境要求
+
+- Node.js：建议 18+（Vite 5 需要较新的 Node 版本）
+- 包管理器：npm（项目已包含 `package-lock.json`）
+
+## 依赖安装
+
+在项目根目录执行：
+
+```bash
+npm install
+```
+
+## 开发与构建
+
+### 组件库构建
+
+```bash
+npm run build
+```
+
+构建产物输出到 `dist/`，包含：
+
+- `dist/ep-craft.js`
+- `dist/index.d.ts`
+- `dist/index.css`
+
+### 生成代码/文档（可选）
+
+```bash
+npm run gen
+npm run gen:docs
+```
+
+### 本地启动文档站
+
+```bash
+npm run docs:dev
+```
+
+### 构建与预览文档站
+
+```bash
+npm run docs:build
+npm run docs:preview
+```
+
+## 在业务项目中使用
+
+`ep-craft` 的对等依赖（peerDependencies）为 `vue` 与 `element-plus`，请确保业务项目已安装并满足版本要求。
+
+### 方式一：全量注册
+
+```ts
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import EpCraft from 'ep-craft'
+import 'ep-craft/dist/index.css'
+
+const app = createApp(App)
+app.use(EpCraft)
+app.mount('#app')
+```
+
+### 方式二：按需导入（配合 unplugin-vue-components）
+
+安装依赖：
+
+```bash
+npm i -D unplugin-vue-components
+```
+
+在 `vite.config.ts` 中配置解析器：
+
+```ts
+import Components from 'unplugin-vue-components/vite'
+import { EpCraftResolver } from 'ep-craft/resolver'
+
+export default {
+  plugins: [
+    Components({
+      resolvers: [EpCraftResolver()],
+    }),
+  ],
+}
+```
+
+## Element Plus 服务类 API（Ep 前缀）
+
+库内对 Element Plus 的部分服务类 API 做了前缀导出，便于统一使用：
+
+- `EpMessage`
+- `EpMessageBox`
+- `EpNotification`
+- `EpLoading`
+- `EpInfiniteScroll`
+
+```ts
+import { EpMessage } from 'ep-craft'
+
+EpMessage.success('Hello')
+```
+

package/dist/components/button/EpButton.vue.d.ts

@@ -0,0 +1,157 @@
+declare var __VLS_11: {}, __VLS_29: {}, __VLS_31: {};
+type __VLS_Slots = {} & {
+    loading?: (props: typeof __VLS_11) => any;
+} & {
+    icon?: (props: typeof __VLS_29) => any;
+} & {
+    default?: (props: typeof __VLS_31) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    readonly size: {
+        readonly type: import("vue").PropType<"" | "large" | "default" | "small">;
+        readonly values: readonly ["", "large", "default", "small"];
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly type: {
+        readonly type: import("vue").PropType<typeof import("./button").buttonTypes[number]>;
+        readonly values: readonly ["default", "primary", "success", "warning", "info", "danger", "text", ""];
+        readonly default: "";
+    };
+    readonly icon: {
+        readonly type: import("vue").PropType<any>;
+    };
+    readonly nativeType: {
+        readonly type: import("vue").PropType<typeof import("./button").buttonNativeTypes[number]>;
+        readonly values: readonly ["button", "submit", "reset"];
+        readonly default: "button";
+    };
+    readonly loading: BooleanConstructor;
+    readonly loadingIcon: {
+        readonly type: import("vue").PropType<any>;
+        readonly default: () => import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    };
+    readonly plain: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly text: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly link: BooleanConstructor;
+    readonly bg: BooleanConstructor;
+    readonly autofocus: BooleanConstructor;
+    readonly round: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly circle: BooleanConstructor;
+    readonly dashed: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly color: StringConstructor;
+    readonly dark: BooleanConstructor;
+    readonly autoInsertSpace: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly tag: {
+        readonly type: import("vue").PropType<string | object>;
+        readonly default: "button";
+    };
+}>, {
+    ref: import("vue").Ref<HTMLButtonElement | undefined, HTMLButtonElement | undefined>;
+    size: import("vue").ComputedRef<"" | "default" | "small" | "large">;
+    type: import("vue").ComputedRef<any>;
+    disabled: import("vue").ComputedRef<boolean>;
+    shouldAddSpace: import("vue").ComputedRef<boolean>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (evt: MouseEvent) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly size: {
+        readonly type: import("vue").PropType<"" | "large" | "default" | "small">;
+        readonly values: readonly ["", "large", "default", "small"];
+    };
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly type: {
+        readonly type: import("vue").PropType<typeof import("./button").buttonTypes[number]>;
+        readonly values: readonly ["default", "primary", "success", "warning", "info", "danger", "text", ""];
+        readonly default: "";
+    };
+    readonly icon: {
+        readonly type: import("vue").PropType<any>;
+    };
+    readonly nativeType: {
+        readonly type: import("vue").PropType<typeof import("./button").buttonNativeTypes[number]>;
+        readonly values: readonly ["button", "submit", "reset"];
+        readonly default: "button";
+    };
+    readonly loading: BooleanConstructor;
+    readonly loadingIcon: {
+        readonly type: import("vue").PropType<any>;
+        readonly default: () => import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    };
+    readonly plain: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly text: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly link: BooleanConstructor;
+    readonly bg: BooleanConstructor;
+    readonly autofocus: BooleanConstructor;
+    readonly round: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly circle: BooleanConstructor;
+    readonly dashed: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly color: StringConstructor;
+    readonly dark: BooleanConstructor;
+    readonly autoInsertSpace: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    readonly tag: {
+        readonly type: import("vue").PropType<string | object>;
+        readonly default: "button";
+    };
+}>> & Readonly<{
+    onClick?: ((evt: MouseEvent) => any) | undefined;
+}>, {
+    readonly type: "" | "primary" | "success" | "warning" | "info" | "default" | "text" | "danger";
+    readonly dark: boolean;
+    readonly disabled: boolean;
+    readonly autofocus: boolean;
+    readonly text: boolean;
+    readonly loading: boolean;
+    readonly circle: boolean;
+    readonly nativeType: "button" | "submit" | "reset";
+    readonly loadingIcon: any;
+    readonly plain: boolean;
+    readonly link: boolean;
+    readonly bg: boolean;
+    readonly round: boolean;
+    readonly dashed: boolean;
+    readonly autoInsertSpace: boolean;
+    readonly tag: string | object;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/button/EpButton.vue.js

@@ -0,0 +1,171 @@
+import { defineComponent as Z, useSlots as j, inject as G, computed as a, ref as oo, Text as eo, openBlock as d, createBlock as m, resolveDynamicComponent as C, mergeProps as to, withCtx as x, createElementBlock as T, Fragment as ro, renderSlot as _, unref as N, normalizeClass as K, createCommentVNode as A } from "vue";
+import { ElIcon as lo } from "element-plus/es/components/icon/index.mjs";
+import { useFormSize as no, useFormDisabled as ao } from "element-plus/es/components/form/src/hooks/use-form-common-props.mjs";
+import { useFormItem as so } from "element-plus/es/components/form/src/hooks/use-form-item.mjs";
+import { useGlobalConfig as io } from "element-plus/es/components/config-provider/src/hooks/use-global-config.mjs";
+import { buttonGroupContextKey as co } from "element-plus/es/components/button/src/constants.mjs";
+import { buttonEmits as uo, buttonProps as po } from "./button.js";
+import { TinyColor as vo } from "../../node_modules/@ctrl/tinycolor/dist/module/index.js";
+const b = "ep", k = "button", So = /* @__PURE__ */ Z({
+  name: "EpButton",
+  __name: "EpButton",
+  props: po,
+  emits: uo,
+  setup(U, { expose: q, emit: H }) {
+    const w = lo, e = U, J = H, h = j(), L = (o = "") => o ? `${b}-${k}-${o}` : `${b}-${k}`, B = (o) => o ? `${b}-${k}--${o}` : "", i = (o, r = !0) => o && r ? `is-${o}` : "", l = (o) => `--${b}-${k}-${o}`, g = (o) => `--${b}-${o}`, y = (o) => {
+      const r = {};
+      for (const n in o) o[n] && (r[`--${b}-${k}-${n}`] = o[n]);
+      return r;
+    }, u = G(co, void 0), p = io("button"), { form: S } = so(), I = no(a(() => u == null ? void 0 : u.size)), c = ao(), E = oo(), z = a(
+      () => {
+        var o;
+        return e.type || (u == null ? void 0 : u.type) || ((o = p.value) == null ? void 0 : o.type) || "";
+      }
+    ), M = a(
+      () => {
+        var o;
+        return e.autoInsertSpace ?? ((o = p.value) == null ? void 0 : o.autoInsertSpace) ?? !1;
+      }
+    ), F = a(() => {
+      var o;
+      return e.plain ?? ((o = p.value) == null ? void 0 : o.plain) ?? !1;
+    }), O = a(() => {
+      var o;
+      return e.round ?? ((o = p.value) == null ? void 0 : o.round) ?? !1;
+    }), V = a(() => {
+      var o;
+      return e.text ?? ((o = p.value) == null ? void 0 : o.text) ?? !1;
+    }), Q = a(() => {
+      var o;
+      return e.dashed ?? ((o = p.value) == null ? void 0 : o.dashed) ?? !1;
+    }), R = a(() => e.tag === "button" ? {
+      ariaDisabled: c.value || e.loading,
+      disabled: c.value || e.loading,
+      autofocus: e.autofocus,
+      type: e.nativeType
+    } : {}), D = a(() => {
+      var r;
+      const o = (r = h.default) == null ? void 0 : r.call(h);
+      if (M.value && (o == null ? void 0 : o.length) === 1) {
+        const n = o[0];
+        if ((n == null ? void 0 : n.type) === eo) {
+          const t = n.children;
+          return new RegExp("^\\p{Unified_Ideograph}{2}$", "u").test(t.trim());
+        }
+      }
+      return !1;
+    }), W = (o) => {
+      if (c.value || e.loading) {
+        o.stopPropagation();
+        return;
+      }
+      e.nativeType === "reset" && (S == null || S.resetFields()), J("click", o);
+    };
+    function s(o, r = 20) {
+      return o.mix("#141414", r).toString();
+    }
+    const X = a(() => {
+      let o = {}, r = e.color;
+      if (r) {
+        const n = r.match(/var\((.*?)\)/);
+        n && (r = window.getComputedStyle(window.document.documentElement).getPropertyValue(n[1]));
+        const t = new vo(r), v = e.dark ? t.tint(20).toString() : s(t, 20);
+        if (F.value)
+          o = y({
+            "bg-color": e.dark ? s(t, 90) : t.tint(90).toString(),
+            "text-color": r,
+            "border-color": e.dark ? s(t, 50) : t.tint(50).toString(),
+            "hover-text-color": `var(${g("color-white")})`,
+            "hover-bg-color": r,
+            "hover-border-color": r,
+            "active-bg-color": v,
+            "active-text-color": `var(${g("color-white")})`,
+            "active-border-color": v
+          }), c.value && (o[l("disabled-bg-color")] = e.dark ? s(t, 90) : t.tint(90).toString(), o[l("disabled-text-color")] = e.dark ? s(t, 50) : t.tint(50).toString(), o[l("disabled-border-color")] = e.dark ? s(t, 80) : t.tint(80).toString());
+        else if (e.link || V.value) {
+          const f = e.dark ? s(t, 30) : t.tint(30).toString();
+          if (o = y({
+            "text-color": r,
+            "hover-text-color": f,
+            "active-text-color": v
+          }), e.link && (o[l("hover-link-text-color")] = f, o[l("active-color")] = v), c.value) {
+            const $ = e.dark ? s(t, 50) : t.tint(50).toString();
+            o[l("disabled-bg-color")] = "transparent", o[l("disabled-text-color")] = $, o[l("disabled-border-color")] = "transparent";
+          }
+        } else {
+          const f = e.dark ? s(t, 30) : t.tint(30).toString(), $ = t.isDark() ? `var(${g("color-white")})` : `var(${g("color-black")})`;
+          if (o = y({
+            "bg-color": r,
+            "text-color": $,
+            "border-color": r,
+            "hover-bg-color": f,
+            "hover-text-color": $,
+            "hover-border-color": f,
+            "active-bg-color": v,
+            "active-border-color": v
+          }), c.value) {
+            const P = e.dark ? s(t, 50) : t.tint(50).toString();
+            o[l("disabled-bg-color")] = P, o[l("disabled-text-color")] = e.dark ? "rgba(255, 255, 255, 0.5)" : `var(${g("color-white")})`, o[l("disabled-border-color")] = P;
+          }
+        }
+      }
+      return o;
+    }), Y = a(() => [
+      L(),
+      B(z.value),
+      B(I.value),
+      i("disabled", c.value),
+      i("loading", e.loading),
+      i("plain", F.value),
+      i("round", O.value),
+      i("circle", e.circle),
+      i("text", V.value),
+      i("dashed", Q.value),
+      i("link", e.link),
+      i("has-bg", e.bg)
+    ]);
+    return q({
+      ref: E,
+      size: I,
+      type: z,
+      disabled: c,
+      shouldAddSpace: D
+    }), (o, r) => (d(), m(C(o.tag), to({
+      ref_key: "_ref",
+      ref: E
+    }, R.value, {
+      class: Y.value,
+      style: X.value,
+      onClick: W
+    }), {
+      default: x(() => [
+        o.loading ? (d(), T(ro, { key: 0 }, [
+          o.$slots.loading ? _(o.$slots, "loading", { key: 0 }) : (d(), m(N(w), {
+            key: 1,
+            class: K("is-loading")
+          }, {
+            default: x(() => [
+              (d(), m(C(o.loadingIcon)))
+            ]),
+            _: 1
+          }))
+        ], 64)) : o.icon || o.$slots.icon ? (d(), m(N(w), { key: 1 }, {
+          default: x(() => [
+            o.icon ? (d(), m(C(o.icon), { key: 0 })) : _(o.$slots, "icon", { key: 1 })
+          ]),
+          _: 3
+        })) : A("", !0),
+        o.$slots.default ? (d(), T("span", {
+          key: 2,
+          class: K({ "ep-button__text--expand": D.value })
+        }, [
+          _(o.$slots, "default")
+        ], 2)) : A("", !0)
+      ]),
+      _: 3
+    }, 16, ["class", "style"]));
+  }
+});
+export {
+  So as default
+};

package/dist/components/button/EpButton2.vue.js

@@ -0,0 +1,4 @@
+import f from "./EpButton.vue.js";
+export {
+  f as default
+};

package/dist/components/button/button.d.ts

@@ -0,0 +1,88 @@
+import type { ExtractPropTypes, PropType } from 'vue';
+/**
+ * EpButton 的 props / emits / 常量定义
+ * 从 element-plus 按钮源码 vendored 而来，可直接修改。
+ */
+export declare const buttonTypes: readonly ["default", "primary", "success", "warning", "info", "danger", "text", ""];
+export declare const buttonNativeTypes: readonly ["button", "submit", "reset"];
+export declare const buttonProps: {
+    /** 按钮尺寸 */
+    readonly size: {
+        readonly type: PropType<"" | "large" | "default" | "small">;
+        readonly values: readonly ["", "large", "default", "small"];
+    };
+    /** 是否禁用 */
+    readonly disabled: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    /** 按钮类型 */
+    readonly type: {
+        readonly type: PropType<(typeof buttonTypes)[number]>;
+        readonly values: readonly ["default", "primary", "success", "warning", "info", "danger", "text", ""];
+        readonly default: "";
+    };
+    /** 图标组件 */
+    readonly icon: {
+        readonly type: PropType<any>;
+    };
+    /** 原生 button 类型 */
+    readonly nativeType: {
+        readonly type: PropType<(typeof buttonNativeTypes)[number]>;
+        readonly values: readonly ["button", "submit", "reset"];
+        readonly default: "button";
+    };
+    /** 是否为加载中状态 */
+    readonly loading: BooleanConstructor;
+    /** 自定义加载中图标组件 */
+    readonly loadingIcon: {
+        readonly type: PropType<any>;
+        readonly default: () => import("vue").DefineComponent<{}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    };
+    /** 是否为朴素按钮 */
+    readonly plain: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    /** 是否为文字按钮 */
+    readonly text: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    /** 是否为链接按钮 */
+    readonly link: BooleanConstructor;
+    /** 文字按钮背景色是否常亮 */
+    readonly bg: BooleanConstructor;
+    /** 原生 autofocus */
+    readonly autofocus: BooleanConstructor;
+    /** 是否为圆角按钮 */
+    readonly round: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    /** 是否为圆形按钮 */
+    readonly circle: BooleanConstructor;
+    /** 是否为虚线按钮 */
+    readonly dashed: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    /** 自定义按钮颜色，自动计算 hover 和 active 颜色 */
+    readonly color: StringConstructor;
+    /** 暗黑模式，将 color 自动转换为暗黑模式颜色 */
+    readonly dark: BooleanConstructor;
+    /** 是否在两个中文字符之间自动插入空格 */
+    readonly autoInsertSpace: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    /** 自定义元素标签 */
+    readonly tag: {
+        readonly type: PropType<string | object>;
+        readonly default: "button";
+    };
+};
+export declare const buttonEmits: {
+    click: (evt: MouseEvent) => boolean;
+};
+export type ButtonProps = ExtractPropTypes<typeof buttonProps>;

package/dist/components/button/button.js

@@ -0,0 +1,95 @@
+import { Loading as e } from "@element-plus/icons-vue";
+const o = [
+  "default",
+  "primary",
+  "success",
+  "warning",
+  "info",
+  "danger",
+  "text",
+  ""
+], n = ["button", "submit", "reset"], l = {
+  /** 按钮尺寸 */
+  size: {
+    type: String,
+    values: ["", "large", "default", "small"]
+  },
+  /** 是否禁用 */
+  disabled: {
+    type: Boolean,
+    default: void 0
+  },
+  /** 按钮类型 */
+  type: {
+    type: String,
+    values: o,
+    default: ""
+  },
+  /** 图标组件 */
+  icon: {
+    type: [String, Object, Function]
+  },
+  /** 原生 button 类型 */
+  nativeType: {
+    type: String,
+    values: n,
+    default: "button"
+  },
+  /** 是否为加载中状态 */
+  loading: Boolean,
+  /** 自定义加载中图标组件 */
+  loadingIcon: {
+    type: [String, Object, Function],
+    default: () => e
+  },
+  /** 是否为朴素按钮 */
+  plain: {
+    type: Boolean,
+    default: void 0
+  },
+  /** 是否为文字按钮 */
+  text: {
+    type: Boolean,
+    default: void 0
+  },
+  /** 是否为链接按钮 */
+  link: Boolean,
+  /** 文字按钮背景色是否常亮 */
+  bg: Boolean,
+  /** 原生 autofocus */
+  autofocus: Boolean,
+  /** 是否为圆角按钮 */
+  round: {
+    type: Boolean,
+    default: void 0
+  },
+  /** 是否为圆形按钮 */
+  circle: Boolean,
+  /** 是否为虚线按钮 */
+  dashed: {
+    type: Boolean,
+    default: void 0
+  },
+  /** 自定义按钮颜色，自动计算 hover 和 active 颜色 */
+  color: String,
+  /** 暗黑模式，将 color 自动转换为暗黑模式颜色 */
+  dark: Boolean,
+  /** 是否在两个中文字符之间自动插入空格 */
+  autoInsertSpace: {
+    type: Boolean,
+    default: void 0
+  },
+  /** 自定义元素标签 */
+  tag: {
+    type: [String, Object],
+    default: "button"
+  }
+}, i = {
+  click: (t) => t instanceof MouseEvent
+};
+export {
+  i as buttonEmits,
+  n as buttonNativeTypes,
+  l as buttonProps,
+  o as buttonTypes
+};

package/dist/components/button/index.d.ts

@@ -1,4 +1,6 @@
 import type { Plugin } from 'vue';
-import { ElButton } from 'element-plus';
-export declare const EpButton: typeof ElButton & Plugin;
+import EpButtonComponent from './EpButton.vue';
+import './theme/index.scss';
+export declare const EpButton: typeof EpButtonComponent & Plugin;
 export default EpButton;
+export * from './button';

package/dist/components/button/index.js

@@ -1,6 +1,8 @@
-import { ElButton as t } from "element-plus";
-import { withInstall as o } from "../../utils/with-install.js";
-const n = Object.assign({}, t, { name: "EpButton" }), r = o(n, "ep-button");
+import { withInstall as t } from "../../utils/with-install.js";
+import o from "./EpButton.vue.js";
+/* empty css                 */
+import "@element-plus/icons-vue";
+const n = t(o, "ep-button");
 export {
-  r as EpButton
+  n as EpButton
 };