mv-iconfront 1.0.4 → 1.0.6

package/README.md

@@ -1,59 +1,115 @@
 # mv-iconfront
 
-A general purpose Vue 3 icon component encapsulating your custom Iconfont icons.
+一个通用的 Vue 3 Iconfont 图标组件封装库。
 
-## Installation
+## 安装 (Installation)
 
 ```bash
 npm install mv-iconfront
 ```
 
-## Usage
+## 使用方法 (Usage)
 
-Register it globally in your main file:
+### 全局注册
+
+在项目的入口文件中全局注册组件。您还可以在此配置全局默认的主题色。
 
 ```js
 import { createApp } from 'vue'
 import App from './App.vue'
 import MvIconfront from 'mv-iconfront'
-import 'mv-iconfront/dist/style.css' // Import styles if needed, though they are usually bundled
+import 'mv-iconfront/dist/style.css' // 必须引入 CSS 文件以保证样式正常
 
 const app = createApp(App)
+
+// 基础注册 (默认颜色为白色 #FFFFFF)
 app.use(MvIconfront)
+
+// 或者：配置全局默认主题色
+app.use(MvIconfront, {
+  defaultColor: '#409EFF' // 自定义全局默认颜色
+})
+
 app.mount('#app')
 ```
 
-Or import locally:
+### 局部引入
 
 ```js
 import { MvIconfront } from 'mv-iconfront'
+import 'mv-iconfront/dist/style.css'
 ```
 
-## Component Usage
+## 组件使用 (Component Usage)
+
+该组件接收 `name` 属性来指定图标类名（例如 `icon-home`），并支持多种自定义属性。
 
-The component accepts a `name` prop for the icon class (e.g., `icon-home`) and a `color` prop.
+### 基础示例
 
 ```html
-<!-- Default color (White) -->
+<!-- 使用全局默认颜色 (如果未配置则默认为白色) -->
 <mv-iconfront name="icon-home" />
 
-<!-- Custom color -->
+<!-- 自定义颜色 (覆盖全局默认值) -->
 <mv-iconfront name="icon-user" color="#FF0000" />
 
-<!-- With Size -->
-<mv-iconfront name="icon-settings" color="#000" size="24" />
+<!-- 自定义大小 (支持数字或带单位的字符串) -->
+<mv-iconfront name="icon-settings" size="24" />
+<mv-iconfront name="icon-settings" size="2rem" />
+```
+
+### 状态与变体
+
+**1. 禁用状态 (Disabled State)**
+图标显示为**灰色** (`#C0C4CC`)，并且鼠标悬停时显示为禁止手势 (`not-allowed`)。
+优先级：**最高** (会覆盖所有其他颜色设置)。
+
+```html
+<mv-iconfront name="icon-edit" disabled />
+```
+
+**2. 红色变体 (Red Variant)**
+快速将图标设置为标准的错误/危险红色 (`#f56c6c`)。
+优先级：**中等** (会覆盖 `color` 和全局默认值，但在 `disabled` 状态下无效)。
+
+```html
+<mv-iconfront name="icon-delete" isRed />
 ```
 
-Note: The `name` prop must match the class names in your iconfont assets (e.g., `icon-a-qianse_tubiao_yichangbaocuo1`).
+### 颜色优先级逻辑 (Color Priority)
+
+组件确定图标颜色的顺序如下（优先级从高到低）：
+
+1.  **`disabled`**: 如果为 `true`，强制显示 **灰色** (`#C0C4CC`)。
+2.  **`isRed`**: 如果为 `true`，强制显示 **红色** (`#f56c6c`)。
+3.  **`color`**: 如果提供了该属性，使用 **自定义颜色**。
+4.  **`defaultColor`**: 使用 `app.use()` 中配置的全局颜色 (未配置则默认为 `#FFFFFF`)。
+
+```html
+<!-- 示例：禁用状态优先级高于红色变体 -->
+<mv-iconfront name="icon-trash" isRed disabled /> 
+<!-- 结果：显示为灰色图标 -->
+```
+
+## 属性 API (Props API)
+
+| 属性名 (Prop) | 类型 (Type) | 默认值 (Default) | 说明 (Description) |
+|---|---|---|---|
+| `name` | String | `''` | 具体的图标类名 (例如 `icon-a-qianse_tubiao_yichangbaocuo1`) |
+| `color` | String | `''` | 自定义颜色覆盖 (hex, rgb 等) |
+| `size` | String/Number | `''` | 字体大小。纯数字会被视为 `px` 单位。 |
+| `isRed` | Boolean | `false` | 设置图标为红色 (`#f56c6c`)。 |
+| `disabled` | Boolean | `false` | 设置图标为灰色 (`#C0C4CC`) 并将鼠标样式设为禁止。 |
+
 
-## Build and Publish
+## 构建与发布
 
-1. Build the library:
+1. 构建库 (生成 JS 和 类型定义文件):
    ```bash
    npm run build
    ```
 
-2. Publish to npm:
+2. 发布到 npm:
    ```bash
    npm publish
    ```

package/dist/mv-iconfront.es.js

@@ -1,5 +1,5 @@
-import { defineComponent as c, computed as l, createElementBlock as r, openBlock as i, mergeProps as a } from "vue";
-const d = c({
+import { defineComponent as r, inject as c, computed as f, createElementBlock as s, openBlock as a, mergeProps as i } from "vue";
+const d = r({
   name: "MvIconfront",
   props: {
     // The specific icon class, e.g. "icon-home"
@@ -7,10 +7,11 @@ const d = c({
       type: String,
       default: ""
     },
-    // Icon color, defaults to white
+    // Icon color, defaults to white if not provided
     color: {
       type: String,
-      default: "#FFFFFF"
+      default: ""
+      // CHANGED: Empty default so we can detect difference between prop passed vs global default
     },
     // Optional size prop
     size: {
@@ -28,35 +29,36 @@ const d = c({
     }
   },
   setup(e) {
+    const o = c("mvIconfrontDefaultColor", "#FFFFFF");
     return {
-      iconStyle: l(() => {
+      iconStyle: f(() => {
         const t = {};
-        if (e.disabled ? t.color = "#C0C4CC" : e.isRed ? t.color = "#f56c6c" : e.color && (t.color = e.color), e.size) {
-          const o = e.size.toString();
-          t.fontSize = o.endsWith("px") || o.endsWith("rem") ? o : `${o}px`;
+        if (e.disabled ? t.color = "#C0C4CC" : e.isRed ? t.color = "#f56c6c" : e.color ? t.color = e.color : t.color = o, e.size) {
+          const l = e.size.toString();
+          t.fontSize = l.endsWith("px") || l.endsWith("rem") ? l : `${l}px`;
         }
         return t;
       })
     };
   }
-}), f = (e, n) => {
-  const t = e.__vccOpts || e;
-  for (const [o, s] of n)
-    t[o] = s;
-  return t;
+}), u = (e, o) => {
+  const n = e.__vccOpts || e;
+  for (const [t, l] of o)
+    n[t] = l;
+  return n;
 };
-function u(e, n, t, o, s, y) {
-  return i(), r("i", a({
+function m(e, o, n, t, l, g) {
+  return a(), s("i", i({
     class: ["icon2", e.name, { "is-disabled": e.disabled }],
     style: e.iconStyle
   }, e.$attrs), null, 16);
 }
-const p = /* @__PURE__ */ f(d, [["render", u], ["__scopeId", "data-v-a841787a"]]), m = (e) => {
-  e.component("MvIconfront", p);
-}, _ = {
-  install: m
+const C = /* @__PURE__ */ u(d, [["render", m]]), y = (e, o) => {
+  o != null && o.defaultColor && (e.config.globalProperties.$mvIconfrontDefaultColor = o.defaultColor, e.provide("mvIconfrontDefaultColor", o.defaultColor)), e.component("MvIconfront", C);
+}, S = {
+  install: y
 };
 export {
-  p as MvIconfront,
-  _ as default
+  C as MvIconfront,
+  S as default
 };

package/dist/mv-iconfront.umd.js

@@ -1 +1 @@
-(function(o,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(o=typeof globalThis<"u"?globalThis:o||self,t(o.MvIconfront={},o.Vue))})(this,function(o,t){"use strict";const r=t.defineComponent({name:"MvIconfront",props:{name:{type:String,default:""},color:{type:String,default:"#FFFFFF"},size:{type:[String,Number],default:""},isRed:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},setup(e){return{iconStyle:t.computed(()=>{const n={};if(e.disabled?n.color="#C0C4CC":e.isRed?n.color="#f56c6c":e.color&&(n.color=e.color),e.size){const i=e.size.toString();n.fontSize=i.endsWith("px")||i.endsWith("rem")?i:`${i}px`}return n})}}}),d=(e,s)=>{const n=e.__vccOpts||e;for(const[i,c]of s)n[i]=c;return n};function f(e,s,n,i,c,p){return t.openBlock(),t.createElementBlock("i",t.mergeProps({class:["icon2",e.name,{"is-disabled":e.disabled}],style:e.iconStyle},e.$attrs),null,16)}const l=d(r,[["render",f],["__scopeId","data-v-a841787a"]]),a={install:e=>{e.component("MvIconfront",l)}};o.MvIconfront=l,o.default=a,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(l,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],o):(l=typeof globalThis<"u"?globalThis:l||self,o(l.MvIconfront={},l.Vue))})(this,function(l,o){"use strict";const i=o.defineComponent({name:"MvIconfront",props:{name:{type:String,default:""},color:{type:String,default:""},size:{type:[String,Number],default:""},isRed:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},setup(e){const t=o.inject("mvIconfrontDefaultColor","#FFFFFF");return{iconStyle:o.computed(()=>{const n={};if(e.disabled?n.color="#C0C4CC":e.isRed?n.color="#f56c6c":e.color?n.color=e.color:n.color=t,e.size){const r=e.size.toString();n.fontSize=r.endsWith("px")||r.endsWith("rem")?r:`${r}px`}return n})}}}),s=(e,t)=>{const f=e.__vccOpts||e;for(const[n,r]of t)f[n]=r;return f};function d(e,t,f,n,r,m){return o.openBlock(),o.createElementBlock("i",o.mergeProps({class:["icon2",e.name,{"is-disabled":e.disabled}],style:e.iconStyle},e.$attrs),null,16)}const c=s(i,[["render",d]]),a={install:(e,t)=>{t!=null&&t.defaultColor&&(e.config.globalProperties.$mvIconfrontDefaultColor=t.defaultColor,e.provide("mvIconfrontDefaultColor",t.defaultColor)),e.component("MvIconfront",c)}};l.MvIconfront=c,l.default=a,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});