morghulis 2.0.59 → 2.0.60

package/README.md

@@ -1,33 +1,99 @@
-# button2
+# Morghulis 按钮组件
 
-This template should help get you started developing with Vue 3 in Vite.
+一个简单的Vue 3 TypeScript按钮组件库，提供美观且易用的按钮组件。
 
-## Recommended IDE Setup
+## 安装
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+```bash
+npm install morghulis
+```
 
-## Type Support for `.vue` Imports in TS
+## 使用
 
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+### 基本用法
 
-## Customize configuration
+```vue
+<template>
+  <MButton>默认按钮</MButton>
+  <MButton color="success" round>成功按钮</MButton>
+  <MButton color="warning" size="large">警告按钮</MButton>
+  <MButton color="danger" disabled>危险按钮</MButton>
+</template>
 
-See [Vite Configuration Reference](https://vite.dev/config/).
+<script setup lang="ts">
+import { MButton } from 'morghulis'
+</script>
+```
 
-## Project Setup
+### 导入样式
 
-```sh
-npm install
+```ts
+// 在main.ts中导入样式
+import 'morghulis/dist/morghulis.css'
 ```
 
-### Compile and Hot-Reload for Development
+### 使用弹窗功能
+
+```vue
+<template>
+  <MButton ref="buttonRef" popupMessage="自定义弹窗消息">点击弹窗</MButton>
+  <button @click="showCustomPopup">手动调用弹窗</button>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { MButton } from 'morghulis'
 
-```sh
-npm run dev
+const buttonRef = ref()
+
+function showCustomPopup() {
+  buttonRef.value.popup('这是一个自定义弹窗！')
+}
+</script>
 ```
 
-### Type-Check, Compile and Minify for Production
+## API
+
+### 属性
+
+| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
+|-------|------|-------|-------|------|
+| color | string | 'primary' | 'primary', 'success', 'warning', 'danger', 'info' | 按钮颜色 |
+| size | string | 'medium' | 'small', 'medium', 'large' | 按钮尺寸 |
+| round | boolean | false | - | 是否为圆角按钮 |
+| disabled | boolean | false | - | 是否禁用 |
+| popupMessage | string | '按钮被点击！' | - | 自定义弹窗消息 |
+
+### 事件
+
+| 事件名 | 参数 | 说明 |
+|-------|------|------|
+| click | MouseEvent | 按钮点击事件 |
+| popup | string | 弹窗显示事件，参数为弹窗消息 |
+
+### 方法
+
+| 方法名 | 参数 | 返回值 | 说明 |
+|-------|------|-------|------|
+| popup | message: string | string | 显示弹窗，参数为弹窗消息 |
+
+## Python使用方法
+
+当使用pip安装morghulis包后，您可以在Python项目中使用此组件，并享受自动代码补全功能。
+
+```python
+# 在您的Python项目中使用
+from morghulis import MButton
+
+# 创建按钮实例
+button = MButton(
+    color="primary",
+    size="medium",
+    round=True,
+    disabled=False,
+    popupMessage="这是一个弹窗消息"
+)
 
-```sh
-npm run build
+# 调用按钮方法
+button.popup("显示自定义弹窗")
 ```

package/dist/components/MButton.d.ts

@@ -0,0 +1,46 @@
+import { DefineComponent } from 'vue';
+
+
+export type ButtonColor = 'primary' | 'success' | 'warning' | 'danger' | 'info'
+export type ButtonSize = 'small' | 'medium' | 'large'
+
+export interface ButtonProps {
+  /**
+   * 按钮颜色
+   */
+  color?: ButtonColor
+  /**
+   * 是否为圆角按钮
+   */
+  round?: boolean
+  /**
+   * 按钮尺寸
+   */
+  size?: ButtonSize
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean
+  /**
+   * 自定义弹窗消息
+   */
+  popupMessage?: string
+}
+
+export interface ButtonEmits {
+  (e: 'click', event: MouseEvent): void
+  (e: 'popup', message: string): void
+}
+
+export interface ButtonExpose {
+  /**
+   * 显示弹窗
+   * @param message 弹窗消息
+   */
+  popup: (message: string) => string
+}
+
+declare const MButton: DefineComponent<ButtonProps, {}, {}, {}, {}, {}, {}, ButtonEmits, string, Readonly<ButtonProps>, ButtonExpose>
+
+export default MButton
+export function popup(message: string): void

package/dist/components/MButton.vue.d.ts

@@ -0,0 +1,4 @@
+import { DefineComponent } from 'vue';
+import { ButtonProps, ButtonEmits, ButtonExpose } from './MButton';
+declare const MButton: DefineComponent<ButtonProps, {}, {}, {}, {}, {}, {}, ButtonEmits, string, Readonly<ButtonProps>, ButtonExpose>;
+export default MButton;

package/dist/components/index.d.ts

@@ -0,0 +1,5 @@
+import { default as MButton } from './MButton.vue';
+
+export type { ButtonColor, ButtonSize, ButtonProps, ButtonEmits, ButtonExpose } from './MButton.d.ts';
+export { MButton };
+export default MButton;

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { MButton } from './components/index';
+export type { ButtonColor, ButtonSize, ButtonProps, ButtonEmits, ButtonExpose } from './components/index';
+declare const _default: {
+    MButton: any;
+};
+export default _default;

package/dist/morghulis.css

@@ -1 +1 @@
-.m-btn[data-v-455b51a7]{border:none;cursor:pointer;padding:.5em 1.2em;font-size:1em;transition:background .2s,color .2s}.m-btn.primary[data-v-455b51a7]{background:#409eff;color:#fff}.m-btn.round[data-v-455b51a7]{border-radius:999px}.m-btn.small[data-v-455b51a7]{font-size:.8em;padding:.3em .8em}.m-btn.medium[data-v-455b51a7]{font-size:1em;padding:.5em 1.2em}.m-btn.large[data-v-455b51a7]{font-size:1.2em;padding:.7em 1.6em}
+.m-btn[data-v-658f9125]{border:none;cursor:pointer;padding:.5em 1.2em;font-size:1em;transition:all .3s;display:inline-block;line-height:1;white-space:nowrap;background:#fff;border:1px solid #dcdfe6;color:#606266;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:none;margin:0;font-weight:500}.m-btn.round[data-v-658f9125]{border-radius:20px}.m-btn.primary[data-v-658f9125]{background-color:#409eff;border-color:#409eff;color:#fff}.m-btn.success[data-v-658f9125]{background-color:#67c23a;border-color:#67c23a;color:#fff}.m-btn.warning[data-v-658f9125]{background-color:#e6a23c;border-color:#e6a23c;color:#fff}.m-btn.danger[data-v-658f9125]{background-color:#f56c6c;border-color:#f56c6c;color:#fff}.m-btn.info[data-v-658f9125]{background-color:#909399;border-color:#909399;color:#fff}.m-btn.small[data-v-658f9125]{font-size:.8em;padding:.3em .8em}.m-btn.medium[data-v-658f9125]{font-size:1em;padding:.5em 1.2em}.m-btn.large[data-v-658f9125]{font-size:1.2em;padding:.7em 1.6em}.m-btn.disabled[data-v-658f9125]{opacity:.6;cursor:not-allowed;pointer-events:none}.m-btn[data-v-658f9125]:hover:not(.disabled){opacity:.8}

package/dist/morghulis.es.js

@@ -1,43 +1,85 @@
-import { defineComponent as c, createElementBlock as u, openBlock as i, normalizeClass as p, renderSlot as s } from "vue";
-const d = /* @__PURE__ */ c({
-  __name: "MButton",
+import { defineComponent as r, createElementBlock as s, openBlock as i, normalizeClass as u, renderSlot as p } from "vue";
+const c = r({
+  name: "MButton",
   props: {
+    /**
+     * 按钮颜色
+     */
     color: {
       type: String,
-      default: "primary"
+      default: "primary",
+      validator: (e) => ["primary", "success", "warning", "danger", "info"].includes(e)
     },
+    /**
+     * 是否为圆角按钮
+     */
     round: {
       type: Boolean,
       default: !1
     },
+    /**
+     * 按钮尺寸
+     */
     size: {
       type: String,
       default: "medium",
-      validator: (t) => ["small", "medium", "large"].includes(t)
+      validator: (e) => ["small", "medium", "large"].includes(e)
+    },
+    /**
+     * 是否禁用
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * 自定义弹窗消息
+     */
+    popupMessage: {
+      type: String,
+      default: "按钮被点击！"
     }
   },
-  emits: ["popup"],
-  setup(t, { expose: r, emit: o }) {
-    const l = o;
-    function n(e) {
-      window.alert(e), l("popup", e);
+  emits: ["click", "popup"],
+  setup(e, { emit: n, expose: l }) {
+    function o(t) {
+      return window.alert(t), n("popup", t), t;
     }
-    function a(e) {
-      n("按钮被点击！");
+    function a(t) {
+      e.disabled || (n("click", t), o(e.popupMessage));
     }
-    return r({ popup: n }), (e, f) => (i(), u("button", {
-      class: p(["m-btn", t.size, t.color, { round: t.round }]),
-      onClick: a
-    }, [
-      s(e.$slots, "default", {}, void 0, !0)
-    ], 2));
+    return l({
+      popup: o
+    }), {
+      popup: o,
+      handleClick: a
+    };
   }
-}), m = (t, r) => {
-  const o = t.__vccOpts || t;
-  for (const [l, n] of r)
-    o[l] = n;
-  return o;
-}, k = /* @__PURE__ */ m(d, [["__scopeId", "data-v-455b51a7"]]);
+}), f = (e, n) => {
+  const l = e.__vccOpts || e;
+  for (const [o, a] of n)
+    l[o] = a;
+  return l;
+}, m = ["disabled"];
+function b(e, n, l, o, a, t) {
+  return i(), s("button", {
+    class: u([
+      "m-btn",
+      e.size,
+      e.color,
+      {
+        round: e.round,
+        disabled: e.disabled
+      }
+    ]),
+    disabled: e.disabled,
+    onClick: n[0] || (n[0] = (...d) => e.handleClick && e.handleClick(...d))
+  }, [
+    p(e.$slots, "default", {}, void 0, !0)
+  ], 10, m);
+}
+const k = /* @__PURE__ */ f(c, [["render", b], ["__scopeId", "data-v-658f9125"]]), B = { MButton: k };
 export {
-  k as MButton
+  k as MButton,
+  B as default
 };

package/dist/morghulis.umd.js

@@ -1 +1 @@
-(function(o,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(o=typeof globalThis<"u"?globalThis:o||self,e(o.Morghulis={},o.Vue))})(this,function(o,e){"use strict";const l=((t,r)=>{const i=t.__vccOpts||t;for(const[s,u]of r)i[s]=u;return i})(e.defineComponent({__name:"MButton",props:{color:{type:String,default:"primary"},round:{type:Boolean,default:!1},size:{type:String,default:"medium",validator:t=>["small","medium","large"].includes(t)}},emits:["popup"],setup(t,{expose:r,emit:i}){const s=i;function u(n){window.alert(n),s("popup",n)}function c(n){u("按钮被点击！")}return r({popup:u}),(n,a)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["m-btn",t.size,t.color,{round:t.round}]),onClick:c},[e.renderSlot(n.$slots,"default",{},void 0,!0)],2))}}),[["__scopeId","data-v-455b51a7"]]);o.MButton=l,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"})});
+(function(t,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(t=typeof globalThis<"u"?globalThis:t||self,n(t.Morghulis={},t.Vue))})(this,function(t,n){"use strict";const r=n.defineComponent({name:"MButton",props:{color:{type:String,default:"primary",validator:e=>["primary","success","warning","danger","info"].includes(e)},round:{type:Boolean,default:!1},size:{type:String,default:"medium",validator:e=>["small","medium","large"].includes(e)},disabled:{type:Boolean,default:!1},popupMessage:{type:String,default:"按钮被点击！"}},emits:["click","popup"],setup(e,{emit:o,expose:l}){function d(i){return window.alert(i),o("popup",i),i}function s(i){e.disabled||(o("click",i),d(e.popupMessage))}return l({popup:d}),{popup:d,handleClick:s}}}),a=(e,o)=>{const l=e.__vccOpts||e;for(const[d,s]of o)l[d]=s;return l},p=["disabled"];function f(e,o,l,d,s,i){return n.openBlock(),n.createElementBlock("button",{class:n.normalizeClass(["m-btn",e.size,e.color,{round:e.round,disabled:e.disabled}]),disabled:e.disabled,onClick:o[0]||(o[0]=(...m)=>e.handleClick&&e.handleClick(...m))},[n.renderSlot(e.$slots,"default",{},void 0,!0)],10,p)}const u=a(r,[["render",f],["__scopeId","data-v-658f9125"]]),c={MButton:u};t.MButton=u,t.default=c,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "morghulis",
-  "version": "2.0.59",
+  "version": "2.0.60",
   "private": false,
   "type": "module",
   "main": "dist/morghulis.umd.js",
@@ -16,7 +16,22 @@
     "preview": "vite preview",
     "build-only": "vite build",
     "build-lib": "vite build --config vite.lib.config.ts",
-    "type-check": "vue-tsc --build"
+    "type-check": "vue-tsc --build",
+    "prepublishOnly": "npm run build-lib"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "component",
+    "button",
+    "ui",
+    "typescript"
+  ],
+  "author": "MorghulisDev",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/morghulis/morghulis"
   },
   "dependencies": {
     "vue": "^3.5.13"
@@ -29,7 +44,11 @@
     "npm-run-all2": "^7.0.2",
     "typescript": "~5.8.0",
     "vite": "^6.2.4",
+    "vite-plugin-dts": "^3.7.3",
     "vite-plugin-vue-devtools": "^7.7.2",
     "vue-tsc": "^2.2.8"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
   }
 }