morghulis 2.0.30 → 2.0.32
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +134 -0
- package/dist/favicon.ico +0 -0
- package/dist/index.css +1 -0
- package/dist/index.js +91 -0
- package/package.json +35 -20
- package/dist/MyComp.vue.d.ts +0 -5
- package/dist/index.d.ts +0 -7
- package/dist/morghulis.es.js +0 -24
- package/dist/morghulis.umd.js +0 -1
package/README.md
ADDED
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
# Morghulis
|
|
2
|
+
|
|
3
|
+
一个简洁、高效的Vue 3按钮组件库，提供完整的TypeScript类型支持。
|
|
4
|
+
|
|
5
|
+
## 特性
|
|
6
|
+
|
|
7
|
+
- 🎨 多种按钮样式：默认、主要、成功、警告、危险、信息
|
|
8
|
+
- 📏 多种尺寸：小、中、大
|
|
9
|
+
- 🔄 加载状态
|
|
10
|
+
- 🚫 禁用状态
|
|
11
|
+
- 🔘 圆角按钮
|
|
12
|
+
- ⚙️ 完整的TypeScript类型支持和IDE自动补全
|
|
13
|
+
- 🧩 支持全局注册和按需引入
|
|
14
|
+
|
|
15
|
+
## 安装
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install morghulis
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## 全局注册
|
|
22
|
+
|
|
23
|
+
```ts
|
|
24
|
+
// main.ts
|
|
25
|
+
import { createApp } from 'vue'
|
|
26
|
+
import App from './App.vue'
|
|
27
|
+
import Morghulis from 'morghulis'
|
|
28
|
+
|
|
29
|
+
const app = createApp(App)
|
|
30
|
+
app.use(Morghulis)
|
|
31
|
+
app.mount('#app')
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## 按需引入
|
|
35
|
+
|
|
36
|
+
```vue
|
|
37
|
+
<script setup lang="ts">
|
|
38
|
+
import { MButton } from 'morghulis'
|
|
39
|
+
</script>
|
|
40
|
+
|
|
41
|
+
<template>
|
|
42
|
+
<MButton>默认按钮</MButton>
|
|
43
|
+
<MButton type="primary">主要按钮</MButton>
|
|
44
|
+
</template>
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## API
|
|
48
|
+
|
|
49
|
+
### 属性
|
|
50
|
+
|
|
51
|
+
| 属性名 | 类型 | 默认值 | 描述 |
|
|
52
|
+
| --- | --- | --- | --- |
|
|
53
|
+
| type | 'default' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info' | 'default' | 按钮类型 |
|
|
54
|
+
| size | 'small' \| 'medium' \| 'large' | 'medium' | 按钮尺寸 |
|
|
55
|
+
| round | boolean | false | 是否为圆角按钮 |
|
|
56
|
+
| plain | boolean | false | 是否为朴素按钮 |
|
|
57
|
+
| disabled | boolean | false | 是否禁用 |
|
|
58
|
+
| loading | boolean | false | 是否为加载状态 |
|
|
59
|
+
| text | string | - | 按钮文本 |
|
|
60
|
+
| icon | string | - | 按钮图标类名 |
|
|
61
|
+
|
|
62
|
+
### 事件
|
|
63
|
+
|
|
64
|
+
| 事件名 | 类型 | 描述 |
|
|
65
|
+
| --- | --- | --- |
|
|
66
|
+
| click | (event: MouseEvent) => void | 点击按钮时触发 |
|
|
67
|
+
|
|
68
|
+
### 方法
|
|
69
|
+
|
|
70
|
+
可以通过模板ref获取按钮实例并调用其方法：
|
|
71
|
+
|
|
72
|
+
```vue
|
|
73
|
+
<script setup lang="ts">
|
|
74
|
+
import { ref } from 'vue'
|
|
75
|
+
import { MButton } from 'morghulis'
|
|
76
|
+
|
|
77
|
+
const buttonRef = ref<InstanceType<typeof MButton> | null>(null)
|
|
78
|
+
|
|
79
|
+
const triggerButtonClick = () => {
|
|
80
|
+
buttonRef.value?.triggerClick()
|
|
81
|
+
}
|
|
82
|
+
</script>
|
|
83
|
+
|
|
84
|
+
<template>
|
|
85
|
+
<MButton ref="buttonRef">按钮</MButton>
|
|
86
|
+
</template>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
| 方法名 | 描述 |
|
|
90
|
+
| --- | --- |
|
|
91
|
+
| triggerClick | 模拟按钮点击事件 |
|
|
92
|
+
|
|
93
|
+
## 示例
|
|
94
|
+
|
|
95
|
+
```vue
|
|
96
|
+
<template>
|
|
97
|
+
<!-- 基础用法 -->
|
|
98
|
+
<MButton>默认按钮</MButton>
|
|
99
|
+
<MButton type="primary">主要按钮</MButton>
|
|
100
|
+
<MButton type="success">成功按钮</MButton>
|
|
101
|
+
<MButton type="warning">警告按钮</MButton>
|
|
102
|
+
<MButton type="danger">危险按钮</MButton>
|
|
103
|
+
<MButton type="info">信息按钮</MButton>
|
|
104
|
+
|
|
105
|
+
<!-- 尺寸 -->
|
|
106
|
+
<MButton size="small">小型按钮</MButton>
|
|
107
|
+
<MButton>默认按钮</MButton>
|
|
108
|
+
<MButton size="large">大型按钮</MButton>
|
|
109
|
+
|
|
110
|
+
<!-- 圆角和朴素按钮 -->
|
|
111
|
+
<MButton round>圆角按钮</MButton>
|
|
112
|
+
<MButton plain>朴素按钮</MButton>
|
|
113
|
+
|
|
114
|
+
<!-- 禁用和加载状态 -->
|
|
115
|
+
<MButton disabled>禁用按钮</MButton>
|
|
116
|
+
<MButton loading>加载中</MButton>
|
|
117
|
+
|
|
118
|
+
<!-- 带图标的按钮 -->
|
|
119
|
+
<MButton icon="icon-search">搜索</MButton>
|
|
120
|
+
|
|
121
|
+
<!-- 点击事件 -->
|
|
122
|
+
<MButton @click="handleClick">点击我</MButton>
|
|
123
|
+
</template>
|
|
124
|
+
|
|
125
|
+
<script setup lang="ts">
|
|
126
|
+
const handleClick = (event: MouseEvent) => {
|
|
127
|
+
console.log('按钮被点击', event)
|
|
128
|
+
}
|
|
129
|
+
</script>
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
## 许可证
|
|
133
|
+
|
|
134
|
+
MIT
|
package/dist/favicon.ico
ADDED
|
Binary file
|
package/dist/index.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.m-button[data-v-191e53ce]{display:inline-flex;justify-content:center;align-items:center;line-height:1;height:32px;white-space:nowrap;cursor:pointer;color:#606266;text-align:center;box-sizing:border-box;outline:none;transition:.1s;font-weight:500;-webkit-user-select:none;user-select:none;vertical-align:middle;-webkit-appearance:none;background-color:#fff;border:1px solid #dcdfe6;padding:8px 15px;font-size:14px;border-radius:4px}.m-button[data-v-191e53ce]:hover{color:#409eff;border-color:#c6e2ff;background-color:#ecf5ff}.m-button[data-v-191e53ce]:active{color:#3a8ee6;border-color:#3a8ee6;outline:none}.m-button--primary[data-v-191e53ce]{color:#fff;background-color:#409eff;border-color:#409eff}.m-button--primary[data-v-191e53ce]:hover{background:#66b1ff;border-color:#66b1ff;color:#fff}.m-button--primary[data-v-191e53ce]:active{background:#3a8ee6;border-color:#3a8ee6;color:#fff}.m-button--success[data-v-191e53ce]{color:#fff;background-color:#67c23a;border-color:#67c23a}.m-button--success[data-v-191e53ce]:hover{background:#85ce61;border-color:#85ce61;color:#fff}.m-button--success[data-v-191e53ce]:active{background:#5daf34;border-color:#5daf34;color:#fff}.m-button--warning[data-v-191e53ce]{color:#fff;background-color:#e6a23c;border-color:#e6a23c}.m-button--warning[data-v-191e53ce]:hover{background:#ebb563;border-color:#ebb563;color:#fff}.m-button--warning[data-v-191e53ce]:active{background:#cf9236;border-color:#cf9236;color:#fff}.m-button--danger[data-v-191e53ce]{color:#fff;background-color:#f56c6c;border-color:#f56c6c}.m-button--danger[data-v-191e53ce]:hover{background:#f78989;border-color:#f78989;color:#fff}.m-button--danger[data-v-191e53ce]:active{background:#dd6161;border-color:#dd6161;color:#fff}.m-button--info[data-v-191e53ce]{color:#fff;background-color:#909399;border-color:#909399}.m-button--info[data-v-191e53ce]:hover{background:#a6a9ad;border-color:#a6a9ad;color:#fff}.m-button--info[data-v-191e53ce]:active{background:#82848a;border-color:#82848a;color:#fff}.m-button--small[data-v-191e53ce]{height:24px;padding:5px 11px;font-size:12px;border-radius:3px}.m-button--large[data-v-191e53ce]{height:40px;padding:12px 19px;font-size:16px;border-radius:4px}.m-button--round[data-v-191e53ce]{border-radius:20px}.m-button--plain[data-v-191e53ce]{background:transparent}.m-button--plain.m-button--primary[data-v-191e53ce]{color:#409eff}.m-button--plain.m-button--success[data-v-191e53ce]{color:#67c23a}.m-button--plain.m-button--warning[data-v-191e53ce]{color:#e6a23c}.m-button--plain.m-button--danger[data-v-191e53ce]{color:#f56c6c}.m-button--plain.m-button--info[data-v-191e53ce]{color:#909399}.m-button--disabled[data-v-191e53ce],.m-button--disabled[data-v-191e53ce]:hover,.m-button--disabled[data-v-191e53ce]:focus,.m-button--disabled[data-v-191e53ce]:active{color:#c0c4cc;cursor:not-allowed;background-image:none;background-color:#fff;border-color:#ebeef5}.m-button--disabled.m-button--primary[data-v-191e53ce],.m-button--disabled.m-button--success[data-v-191e53ce],.m-button--disabled.m-button--warning[data-v-191e53ce],.m-button--disabled.m-button--danger[data-v-191e53ce],.m-button--disabled.m-button--info[data-v-191e53ce]{color:#fff;background-color:#a0cfff;border-color:#a0cfff;opacity:.6}.m-button__loading[data-v-191e53ce]{display:inline-flex;align-items:center;margin-right:5px}.m-button__loading-icon[data-v-191e53ce]{animation:rotating-191e53ce 2s linear infinite}.m-button__icon[data-v-191e53ce]{margin-right:5px}.m-button__icon+.m-button__text[data-v-191e53ce]{margin-left:5px}@keyframes rotating-191e53ce{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import { defineComponent as f, computed as b, createElementBlock as s, openBlock as a, normalizeClass as r, createCommentVNode as u, createElementVNode as i, renderSlot as g, createTextVNode as _, toDisplayString as k } from "vue";
|
|
2
|
+
const y = ["disabled"], B = {
|
|
3
|
+
key: 0,
|
|
4
|
+
class: "m-button__loading"
|
|
5
|
+
}, h = {
|
|
6
|
+
key: 1,
|
|
7
|
+
class: "m-button__icon"
|
|
8
|
+
}, C = {
|
|
9
|
+
key: 2,
|
|
10
|
+
class: "m-button__text"
|
|
11
|
+
}, v = /* @__PURE__ */ f({
|
|
12
|
+
name: "MButton",
|
|
13
|
+
__name: "MButton",
|
|
14
|
+
props: {
|
|
15
|
+
type: { default: "default" },
|
|
16
|
+
size: { default: "medium" },
|
|
17
|
+
round: { type: Boolean, default: !1 },
|
|
18
|
+
plain: { type: Boolean, default: !1 },
|
|
19
|
+
disabled: { type: Boolean, default: !1 },
|
|
20
|
+
text: {},
|
|
21
|
+
loading: { type: Boolean, default: !1 },
|
|
22
|
+
icon: {}
|
|
23
|
+
},
|
|
24
|
+
emits: ["click"],
|
|
25
|
+
setup(o, { expose: d, emit: n }) {
|
|
26
|
+
const t = o, l = n, m = b(() => [
|
|
27
|
+
"m-button",
|
|
28
|
+
`m-button--${t.type}`,
|
|
29
|
+
`m-button--${t.size}`,
|
|
30
|
+
{
|
|
31
|
+
"m-button--round": t.round,
|
|
32
|
+
"m-button--plain": t.plain,
|
|
33
|
+
"m-button--disabled": t.disabled,
|
|
34
|
+
"m-button--loading": t.loading
|
|
35
|
+
}
|
|
36
|
+
]), p = (e) => {
|
|
37
|
+
t.disabled || t.loading || l("click", e);
|
|
38
|
+
};
|
|
39
|
+
return d({
|
|
40
|
+
triggerClick: () => {
|
|
41
|
+
!t.disabled && !t.loading && l("click", new MouseEvent("click"));
|
|
42
|
+
}
|
|
43
|
+
}), (e, c) => (a(), s("button", {
|
|
44
|
+
class: r(m.value),
|
|
45
|
+
disabled: e.disabled,
|
|
46
|
+
onClick: p
|
|
47
|
+
}, [
|
|
48
|
+
e.loading ? (a(), s("span", B, c[0] || (c[0] = [
|
|
49
|
+
i("svg", {
|
|
50
|
+
class: "m-button__loading-icon",
|
|
51
|
+
viewBox: "0 0 1024 1024",
|
|
52
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
53
|
+
width: "16",
|
|
54
|
+
height: "16"
|
|
55
|
+
}, [
|
|
56
|
+
i("path", {
|
|
57
|
+
d: "M512 64c-247.42 0-448 200.58-448 448s200.58 448 448 448 448-200.58 448-448-200.58-448-448-448zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z",
|
|
58
|
+
fill: "#e6e6e6"
|
|
59
|
+
}),
|
|
60
|
+
i("path", {
|
|
61
|
+
d: "M512 140c-205.4 0-372 166.6-372 372s166.6 372 372 372V140z",
|
|
62
|
+
fill: "currentColor"
|
|
63
|
+
})
|
|
64
|
+
], -1)
|
|
65
|
+
]))) : u("", !0),
|
|
66
|
+
e.icon && !e.loading ? (a(), s("span", h, [
|
|
67
|
+
i("i", {
|
|
68
|
+
class: r(e.icon)
|
|
69
|
+
}, null, 2)
|
|
70
|
+
])) : u("", !0),
|
|
71
|
+
e.$slots.default || e.text ? (a(), s("span", C, [
|
|
72
|
+
g(e.$slots, "default", {}, () => [
|
|
73
|
+
_(k(e.text), 1)
|
|
74
|
+
], !0)
|
|
75
|
+
])) : u("", !0)
|
|
76
|
+
], 10, y));
|
|
77
|
+
}
|
|
78
|
+
}), w = (o, d) => {
|
|
79
|
+
const n = o.__vccOpts || o;
|
|
80
|
+
for (const [t, l] of d)
|
|
81
|
+
n[t] = l;
|
|
82
|
+
return n;
|
|
83
|
+
}, M = /* @__PURE__ */ w(v, [["__scopeId", "data-v-191e53ce"]]), $ = {
|
|
84
|
+
install(o) {
|
|
85
|
+
o.component("MButton", M);
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
export {
|
|
89
|
+
M as MButton,
|
|
90
|
+
$ as default
|
|
91
|
+
};
|
package/package.json
CHANGED
|
@@ -1,28 +1,43 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "morghulis",
|
|
3
|
-
"version": "2.0.
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}
|
|
13
|
-
},
|
|
14
|
-
"files": ["dist"],
|
|
3
|
+
"version": "2.0.32",
|
|
4
|
+
"private": false,
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "dist/index.js",
|
|
7
|
+
"module": "dist/index.js",
|
|
8
|
+
"types": "dist/index.d.ts",
|
|
9
|
+
"files": [
|
|
10
|
+
"dist"
|
|
11
|
+
],
|
|
15
12
|
"scripts": {
|
|
16
|
-
"
|
|
13
|
+
"dev": "vite",
|
|
14
|
+
"build": "vue-tsc && vite build",
|
|
15
|
+
"preview": "vite preview",
|
|
16
|
+
"type-check": "vue-tsc --build",
|
|
17
|
+
"prepublishOnly": "npm run build"
|
|
17
18
|
},
|
|
18
|
-
"
|
|
19
|
-
"vue": "^3.
|
|
19
|
+
"dependencies": {
|
|
20
|
+
"vue": "^3.5.13"
|
|
20
21
|
},
|
|
21
22
|
"devDependencies": {
|
|
23
|
+
"@tsconfig/node22": "^22.0.1",
|
|
24
|
+
"@types/node": "^22.14.0",
|
|
22
25
|
"@vitejs/plugin-vue": "^5.2.3",
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
|
|
26
|
+
"@vue/tsconfig": "^0.7.0",
|
|
27
|
+
"npm-run-all2": "^7.0.2",
|
|
28
|
+
"typescript": "~5.8.0",
|
|
29
|
+
"vite": "^6.2.4",
|
|
30
|
+
"vite-plugin-vue-devtools": "^7.7.2",
|
|
31
|
+
"vue-tsc": "^2.2.8"
|
|
32
|
+
},
|
|
33
|
+
"peerDependencies": {
|
|
34
|
+
"vue": "^3.0.0"
|
|
35
|
+
},
|
|
36
|
+
"keywords": [
|
|
37
|
+
"vue",
|
|
38
|
+
"button",
|
|
39
|
+
"component",
|
|
40
|
+
"ui"
|
|
41
|
+
],
|
|
42
|
+
"license": "MIT"
|
|
28
43
|
}
|
package/dist/MyComp.vue.d.ts
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
type __VLS_Props = {
|
|
2
|
-
msg: string;
|
|
3
|
-
};
|
|
4
|
-
declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
5
|
-
export default _default;
|
package/dist/index.d.ts
DELETED
package/dist/morghulis.es.js
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { defineComponent as r, ref as m, createElementBlock as p, openBlock as i, createElementVNode as l, toDisplayString as t } from "vue";
|
|
2
|
-
const a = /* @__PURE__ */ r({
|
|
3
|
-
__name: "MyComp",
|
|
4
|
-
props: {
|
|
5
|
-
msg: {}
|
|
6
|
-
},
|
|
7
|
-
setup(e) {
|
|
8
|
-
const o = m(0);
|
|
9
|
-
return (s, n) => (i(), p("div", null, [
|
|
10
|
-
l("h2", null, t(s.msg), 1),
|
|
11
|
-
l("button", {
|
|
12
|
-
onClick: n[0] || (n[0] = (c) => o.value++)
|
|
13
|
-
}, "Clicked " + t(o.value) + " times", 1)
|
|
14
|
-
]));
|
|
15
|
-
}
|
|
16
|
-
}), d = {
|
|
17
|
-
install(e) {
|
|
18
|
-
console.log("[Morghulis] install called"), e.component("MyComp", a);
|
|
19
|
-
}
|
|
20
|
-
};
|
|
21
|
-
export {
|
|
22
|
-
a as MyComp,
|
|
23
|
-
d as default
|
|
24
|
-
};
|
package/dist/morghulis.umd.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
(function(n,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis<"u"?globalThis:n||self,e(n.Morghulis={},n.Vue))})(this,function(n,e){"use strict";const t=e.defineComponent({__name:"MyComp",props:{msg:{}},setup(o){const l=e.ref(0);return(u,i)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("h2",null,e.toDisplayString(u.msg),1),e.createElementVNode("button",{onClick:i[0]||(i[0]=r=>l.value++)},"Clicked "+e.toDisplayString(l.value)+" times",1)]))}}),s={install(o){console.log("[Morghulis] install called"),o.component("MyComp",t)}};n.MyComp=t,n.default=s,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
|