ep-craft 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ep-craft",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "A Vue 3 component library based on element-plus with ep- prefix",
   "type": "module",
   "main": "./dist/ep-craft.js",

package/theme-chalk/src/button.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:list';
 
 @use 'common/var' as *;
 @use 'mixins/button' as *;
@@ -16,8 +17,84 @@ $button-icon-span-gap: map.merge(
   $button-icon-span-gap
 );
 
+@mixin button-reverse-variant(
+  $text-color,
+  $border-color,
+  $hover-bg-color,
+  $active-bg-color,
+  $disabled-bg-color: getCssVar('color-white')
+) {
+  @include set-css-var-value(('button', 'text-color'), $text-color);
+  @include set-css-var-value(('button', 'bg-color'), getCssVar('color-white'));
+  @include set-css-var-value(('button', 'border-color'), $border-color);
+  @include set-css-var-value(('button', 'hover', 'text-color'), $text-color);
+  @include set-css-var-value(('button', 'hover', 'bg-color'), $hover-bg-color);
+  @include set-css-var-value(('button', 'hover', 'border-color'), $border-color);
+  @include set-css-var-value(('button', 'active', 'text-color'), $text-color);
+  @include set-css-var-value(('button', 'active', 'bg-color'), $active-bg-color);
+  @include set-css-var-value(('button', 'active', 'border-color'), $border-color);
+  @include set-css-var-value(('button', 'disabled', 'text-color'), $text-color);
+  @include set-css-var-value(('button', 'disabled', 'bg-color'), $disabled-bg-color);
+  @include set-css-var-value(('button', 'disabled', 'border-color'), $border-color);
+
+  // 禁用态整体 40% 透明（保持实色，符合 Figma 设计）
+  @include when(disabled) {
+    opacity: 0.4;
+  }
+}
+
+// Button 专用浅色（hover/active 背景），公共色板未覆盖，集中在此管理
+$button-plain-hover-bg: (
+  primary: #f5f8ff,
+  success: #f3fbf9,
+  warning: #fff6eb,
+  danger: #fff5f5,
+);
+$button-plain-active-bg: (
+  primary: #e5edff,
+  success: #e7f8f3,
+  warning: #ffe8cc,
+  danger: #ffc9c9,
+);
+// info plain 的 hover 浅背景，公共色板未覆盖
+$button-info-plain-hover-bg: #f7f8fa;
+
+// 各类型 plain 样式配置：text/border 色、hover 背景、active 背景、禁用背景
+$button-plain-config: (
+  primary: (
+    $color-primary,
+    $color-primary,
+    map.get($button-plain-hover-bg, primary),
+    map.get($button-plain-active-bg, primary),
+    transparent,
+  ),
+  success: (
+    $color-success,
+    $color-success,
+    map.get($button-plain-hover-bg, success),
+    map.get($button-plain-active-bg, success),
+    transparent,
+  ),
+  warning: (
+    $color-warning,
+    $color-warning,
+    map.get($button-plain-hover-bg, warning),
+    map.get($button-plain-active-bg, warning),
+    transparent,
+  ),
+  danger: (
+    $color-danger,
+    $color-danger,
+    map.get($button-plain-hover-bg, danger),
+    map.get($button-plain-active-bg, danger),
+    transparent,
+  ),
+);
+
 @include b(button) {
   @include set-component-css-var('button', $button);
+  // 默认按钮（未指定 type）样式与 primary 保持一致
+  @include button-variant(primary);
 }
 
 @include b(button) {
@@ -97,17 +174,14 @@ $button-icon-span-gap: map.merge(
   }
 
   @include when(plain) {
-    @include css-var-from-global(
-      ('button', 'hover', 'text-color'),
-      ('color', 'primary')
-    );
-    @include css-var-from-global(
-      ('button', 'hover', 'bg-color'),
-      ('fill-color', 'blank')
-    );
-    @include css-var-from-global(
-      ('button', 'hover', 'border-color'),
-      ('color', 'primary')
+    // 默认朴素按钮样式与 primary + plain 保持一致
+    $cfg: map.get($button-plain-config, primary);
+    @include button-reverse-variant(
+      $color-primary,
+      list.nth($cfg, 2),
+      list.nth($cfg, 3),
+      list.nth($cfg, 4),
+      list.nth($cfg, 5)
     );
   }
 
@@ -127,6 +201,14 @@ $button-icon-span-gap: map.merge(
       background-color: getCssVar('button', 'disabled', 'bg-color');
       border-color: getCssVar('button', 'disabled', 'border-color');
     }
+
+    // 非 plain 按钮禁用时删除边框
+    &:not(.is-plain) {
+      &,
+      &:hover {
+        border-color: transparent;
+      }
+    }
   }
 
   @include when(loading) {
@@ -286,9 +368,104 @@ $button-icon-span-gap: map.merge(
     }
   }
 
-  @each $type in (primary, success, warning, danger, info) {
+  // default 类型样式与 primary 保持一致
+  @include m(default) {
+    @include button-variant(primary);
+
+    &.is-plain {
+      $cfg: map.get($button-plain-config, primary);
+      @include button-reverse-variant(
+        getCssVar('color-primary'),
+        list.nth($cfg, 2),
+        list.nth($cfg, 3),
+        list.nth($cfg, 4),
+        list.nth($cfg, 5)
+      );
+
+      // plain 禁用态按 Figma 设计：透明背景 + 主题色 + 整体 40% 透明
+      &.is-disabled {
+        &,
+        &:hover,
+        &:focus,
+        &:active {
+          color: getCssVar('color-primary');
+          background-color: transparent;
+          border-color: list.nth($cfg, 2);
+          opacity: 0.4;
+        }
+      }
+    }
+  }
+
+  @each $type in (primary, success, warning, danger) {
     @include m($type) {
       @include button-variant($type);
+
+      &.is-plain {
+        $cfg: map.get($button-plain-config, $type);
+        // primary 文字色沿用全局 CSS 变量，其余用配置色值
+        $text: list.nth($cfg, 1);
+        @if $type == primary {
+          $text: getCssVar('color-primary');
+        }
+
+        @include button-reverse-variant(
+          $text,
+          list.nth($cfg, 2),
+          list.nth($cfg, 3),
+          list.nth($cfg, 4),
+          list.nth($cfg, 5)
+        );
+
+        // plain 禁用态按 Figma 设计：透明背景 + 主题色 + 整体 40% 透明
+        // 覆盖 button-plain mixin 内置的浅色禁用样式
+        &.is-disabled {
+          &,
+          &:hover,
+          &:focus,
+          &:active {
+            color: $text;
+            background-color: transparent;
+            border-color: list.nth($cfg, 2);
+            opacity: 0.4;
+          }
+        }
+      }
+    }
+  }
+
+  @include m(info) {
+    $info-text: map.get($text-color, 'primary');
+    $info-border: map.get($colors, 'info', 'light-3');
+
+    @include button-variant(info);
+    @include set-css-var-value(('button', 'text-color'), $info-text);
+    @include set-css-var-value(('button', 'hover', 'text-color'), $info-text);
+    @include set-css-var-value(('button', 'active', 'text-color'), $info-text);
+    @include set-css-var-value(('button', 'disabled', 'text-color'), rgba($info-text, 0.4));
+
+    &.is-plain {
+      // 禁用背景保持白色，其余同 button-reverse-variant 默认（含整体 40% 透明）
+      @include button-reverse-variant(
+        $info-text,
+        $info-border,
+        $button-info-plain-hover-bg,
+        $color-info
+      );
+
+      // plain + info 禁用态按 Figma 设计：白底 + 实色 + 整体 40% 透明
+      // 覆盖 button-plain mixin 内置的浅色禁用样式
+      &.is-disabled {
+        &,
+        &:hover,
+        &:focus,
+        &:active {
+          color: $info-text;
+          background-color: getCssVar('color-white');
+          border-color: $info-border;
+          opacity: 0.4;
+        }
+      }
     }
   }
 
@@ -307,6 +484,7 @@ $button-icon-span-gap: map.merge(
         }
       }
 
+      
       & {
         @include button-size(
           map.get($button-padding-vertical, $size) - $button-border-width,

package/theme-chalk/src/common/var.scss

@@ -19,22 +19,40 @@ $colors: map.deep-merge(
     'white': #ffffff,
     'black': #000000,
     'primary': (
-      'base': #409eff,
+      'base': #1c64fd,
+      'light-3': #4480ff,
+      'light-5': rgba(28, 100, 253, 0.4),
+      'dark-2': #164ed1,
     ),
     'success': (
-      'base': #67c23a,
+      'base': #12b886,
+      'light-3': #59cdaa,
+      'light-5': rgba(18, 184, 134, 0.4),
+      'dark-2': #0f956c,
     ),
     'warning': (
-      'base': #e6a23c,
+      'base': #f57f00,
+      'light-3': #ffa94d,
+      'light-5': rgba(245, 127, 0, 0.4),
+      'dark-2': #d05706,
     ),
     'danger': (
-      'base': #f56c6c,
+      'base': #f14646,
+      'light-3': #fb7c7c,
+      'light-5': rgba(241, 70, 70, 0.4),
+      'dark-2': #dc2c2c,
     ),
     'error': (
-      'base': #f56c6c,
+      'base': #f14646,
+      'light-3': #fb7c7c,
+      'light-5': rgba(241, 70, 70, 0.4),
+      'dark-2': #dc2c2c,
     ),
     'info': (
-      'base': #909399,
+      'base': #f2f3f5,
+      'light-3': #e5e6eb,
+      'light-5': rgba(242, 243, 245, 0.4),
+      'dark-2': #c9cbd4,
     ),
   ),
   $colors
@@ -98,8 +116,8 @@ $color-info: map.get($colors, 'info', 'base') !default;
 $text-color: () !default;
 $text-color: map.merge(
   (
-    'primary': #303133,
-    'regular': #606266,
+    'primary': #1d1f29,
+    'regular': #1d1f29,
     'secondary': #909399,
     'placeholder': #a8abb2,
     'disabled': #c0c4cc,
@@ -815,8 +833,8 @@ $button-font-size: map.merge(
   (
     'large': getCssVar('font-size', 'base'),
     'default': getCssVar('font-size', 'base'),
-    'small': 12px,
-    'mini': 12px,
+    'small': getCssVar('font-size', 'base'),
+    'mini': getCssVar('font-size', 'extra-small'),
   ),
   $button-font-size
 );

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

@@ -1,171 +0,0 @@
-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 vo } from "./button.js";
-import { TinyColor as po } from "../../node_modules/@ctrl/tinycolor/dist/module/index.js";
-const b = "el", k = "button", So = /* @__PURE__ */ Z({
-  name: "EpButton",
-  __name: "EpButton",
-  props: vo,
-  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), v = 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 = v.value) == null ? void 0 : o.type) || "";
-      }
-    ), M = a(
-      () => {
-        var o;
-        return e.autoInsertSpace ?? ((o = v.value) == null ? void 0 : o.autoInsertSpace) ?? !1;
-      }
-    ), F = a(() => {
-      var o;
-      return e.plain ?? ((o = v.value) == null ? void 0 : o.plain) ?? !1;
-    }), O = a(() => {
-      var o;
-      return e.round ?? ((o = v.value) == null ? void 0 : o.round) ?? !1;
-    }), V = a(() => {
-      var o;
-      return e.text ?? ((o = v.value) == null ? void 0 : o.text) ?? !1;
-    }), Q = a(() => {
-      var o;
-      return e.dashed ?? ((o = v.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 po(r), p = 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": p,
-            "active-text-color": `var(${g("color-white")})`,
-            "active-border-color": p
-          }), 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": p
-          }), e.link && (o[l("hover-link-text-color")] = f, o[l("active-color")] = p), 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": p,
-            "active-border-color": p
-          }), 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({ "el-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

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

package/dist/components/button/button.js

@@ -1,95 +0,0 @@
-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", "mini"]
-  },
-  /** 是否禁用 */
-  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
-};