fy-components-test 1.0.0

package/README.md

@@ -0,0 +1,66 @@
+# @miaoma/components
+
+基于 Element Plus 的二次封装组件库，提供更加易用、美观的 UI 组件。
+
+## 特性
+
+- 基于 Element Plus 二次封装
+- 支持 Vue 3 + TypeScript
+- 现代化的设计风格
+- 丰富的组件库
+- 完善的文档
+
+## 安装
+
+```bash
+# 使用 npm
+npm install @miaoma/components element-plus
+
+# 使用 pnpm
+pnpm add @miaoma/components element-plus
+
+# 使用 yarn
+yarn add @miaoma/components element-plus
+```
+
+## 引入
+
+### 全局引入
+
+```ts
+import { createApp } from 'vue'
+import App from './App.vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import MiaomaComponents from '@miaoma/components'
+
+const app = createApp(App)
+app.use(ElementPlus)
+app.use(MiaomaComponents)
+app.mount('#app')
+```
+
+### 按需引入
+
+```ts
+import { MButton } from '@miaoma/components'
+```
+
+## 组件列表
+
+- MButton - 按钮组件
+
+## 文档
+
+详细文档请查看 [官方文档](https://miaoma-components-docs.netlify.app/)
+
+## 浏览器支持
+
+- Chrome
+- Firefox
+- Safari
+- Edge
+
+## 许可证
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './src/index'
+import MiaomaComponents from './src/index'
+export default MiaomaComponents

package/dist/index.es.js

@@ -0,0 +1,126 @@
+import { defineComponent as c, resolveComponent as u, openBlock as o, createBlock as d, withCtx as r, renderSlot as s, createElementBlock as f, Fragment as y, createTextVNode as g, toDisplayString as m } from "vue";
+const p = {
+  name: "MButton"
+}, v = /* @__PURE__ */ c({
+  ...p,
+  props: {
+    // 按钮类型
+    type: {
+      type: String,
+      default: "primary",
+      validator: (t) => [
+        "primary",
+        "success",
+        "warning",
+        "danger",
+        "info",
+        "text"
+      ].includes(t)
+    },
+    // 按钮尺寸
+    size: {
+      type: String,
+      default: "default",
+      validator: (t) => ["large", "default", "small", "mini"].includes(t)
+    },
+    // 是否朴素按钮
+    plain: {
+      type: Boolean,
+      default: !1
+    },
+    // 是否圆角按钮
+    round: {
+      type: Boolean,
+      default: !1
+    },
+    // 是否圆形按钮
+    circle: {
+      type: Boolean,
+      default: !1
+    },
+    // 是否禁用
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    // 是否加载中
+    loading: {
+      type: Boolean,
+      default: !1
+    },
+    // 图标
+    icon: {
+      type: String,
+      default: ""
+    },
+    // 按钮文本
+    text: {
+      type: String,
+      default: ""
+    },
+    // 是否自动聚焦
+    autofocus: {
+      type: Boolean,
+      default: !1
+    },
+    // 原生 type 属性
+    nativeType: {
+      type: String,
+      default: "button",
+      validator: (t) => ["button", "submit", "reset"].includes(t)
+    },
+    // 自定义标签
+    tag: {
+      type: String,
+      default: "button"
+    }
+  },
+  emits: ["click"],
+  setup(t, { emit: e }) {
+    const n = e, l = (a) => {
+      n("click", a);
+    };
+    return (a, x) => {
+      const i = u("el-button");
+      return o(), d(i, {
+        type: t.type,
+        size: t.size,
+        plain: t.plain,
+        round: t.round,
+        circle: t.circle,
+        disabled: t.disabled,
+        loading: t.loading,
+        icon: t.icon,
+        autofocus: t.autofocus,
+        "native-type": t.nativeType,
+        tag: t.tag,
+        onClick: l
+      }, {
+        default: r(() => [
+          a.$slots.default ? s(a.$slots, "default", { key: 0 }, void 0, !0) : (o(), f(y, { key: 1 }, [
+            g(m(t.text), 1)
+          ], 64))
+        ]),
+        _: 3
+      }, 8, ["type", "size", "plain", "round", "circle", "disabled", "loading", "icon", "autofocus", "native-type", "tag"]);
+    };
+  }
+}), B = (t, e) => {
+  const n = t.__vccOpts || t;
+  for (const [l, a] of e)
+    n[l] = a;
+  return n;
+}, b = /* @__PURE__ */ B(v, [["__scopeId", "data-v-79154a89"]]), k = [
+  b
+], S = (t) => {
+  k.forEach((e) => {
+    e.name && t.component(e.name, e);
+  });
+}, h = {
+  install: S
+};
+export {
+  b as MButton,
+  h as default,
+  S as install
+};

package/dist/index.umd.js

@@ -0,0 +1 @@
+(function(n,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(n=typeof globalThis<"u"?globalThis:n||self,t(n.MiaomaComponents={},n.Vue))})(this,function(n,t){"use strict";const u={name:"MButton"},s=t.defineComponent({...u,props:{type:{type:String,default:"primary",validator:e=>["primary","success","warning","danger","info","text"].includes(e)},size:{type:String,default:"default",validator:e=>["large","default","small","mini"].includes(e)},plain:{type:Boolean,default:!1},round:{type:Boolean,default:!1},circle:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},icon:{type:String,default:""},text:{type:String,default:""},autofocus:{type:Boolean,default:!1},nativeType:{type:String,default:"button",validator:e=>["button","submit","reset"].includes(e)},tag:{type:String,default:"button"}},emits:["click"],setup(e,{emit:a}){const l=a,i=o=>{l("click",o)};return(o,m)=>{const y=t.resolveComponent("el-button");return t.openBlock(),t.createBlock(y,{type:e.type,size:e.size,plain:e.plain,round:e.round,circle:e.circle,disabled:e.disabled,loading:e.loading,icon:e.icon,autofocus:e.autofocus,"native-type":e.nativeType,tag:e.tag,onClick:i},{default:t.withCtx(()=>[o.$slots.default?t.renderSlot(o.$slots,"default",{key:0},void 0,!0):(t.openBlock(),t.createElementBlock(t.Fragment,{key:1},[t.createTextVNode(t.toDisplayString(e.text),1)],64))]),_:3},8,["type","size","plain","round","circle","disabled","loading","icon","autofocus","native-type","tag"])}}}),d=((e,a)=>{const l=e.__vccOpts||e;for(const[i,o]of a)l[i]=o;return l})(s,[["__scopeId","data-v-79154a89"]]),f=[d],c=e=>{f.forEach(a=>{a.name&&e.component(a.name,a)})},r={install:c};n.MButton=d,n.default=r,n.install=c,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

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

@@ -0,0 +1,130 @@
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    type: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    plain: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    round: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    circle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    autofocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    nativeType: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    type: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    size: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    plain: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    round: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    circle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    loading: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    icon: {
+        type: StringConstructor;
+        default: string;
+    };
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    autofocus: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    nativeType: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onClick?: ((...args: any[]) => any) | undefined;
+}>, {
+    type: string;
+    size: string;
+    plain: boolean;
+    round: boolean;
+    circle: boolean;
+    disabled: boolean;
+    loading: boolean;
+    icon: string;
+    text: string;
+    autofocus: boolean;
+    nativeType: string;
+    tag: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/src/index.d.ts

@@ -0,0 +1,9 @@
+import { App } from 'vue';
+import { default as MButton } from './components/MButton.vue';
+
+export declare const install: (app: App) => void;
+export { MButton };
+declare const _default: {
+    install: (app: App) => void;
+};
+export default _default;

package/dist/src/main.d.ts

@@ -0,0 +1 @@
+

package/dist/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vite').UserConfig;
+export default _default;

package/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>组件库测试</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "fy-components-test",
+  "version": "1.0.0",
+  "description": "基于 Element Plus 的二次封装组件库",
+  "type": "module",
+  "main": "./dist/index.umd.js",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "element-plus": "^2.6.0",
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "@types/node": "^25.5.2",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.7.0"
+  },
+  "keywords": [
+    "vue3",
+    "element-plus",
+    "components"
+  ],
+  "author": "",
+  "license": "MIT"
+}

package/src/App.vue

@@ -0,0 +1,27 @@
+<template>
+  <div style="padding: 20px;">
+    <h1>组件库测试</h1>
+    <div style="display: flex; gap: 10px; margin: 20px 0;">
+      <m-button type="primary" text="主要按钮" />
+      <m-button type="success" text="成功按钮" />
+      <m-button type="warning" text="警告按钮" />
+      <m-button type="danger" text="危险按钮" />
+      <m-button type="info" text="信息按钮" />
+    </div>
+    <div style="display: flex; gap: 10px; margin: 20px 0;">
+      <m-button type="primary" size="large" text="大按钮" />
+      <m-button type="primary" size="default" text="默认按钮" />
+      <m-button type="primary" size="small" text="小按钮" />
+      <m-button type="primary" size="mini" text="迷你按钮" />
+    </div>
+    <div style="display: flex; gap: 10px; margin: 20px 0;">
+      <m-button type="primary" plain text="朴素按钮" />
+      <m-button type="primary" round text="圆角按钮" />
+      <m-button type="primary" circle icon="el-icon-search" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MButton } from './index'
+</script>

package/src/components/MButton.vue

@@ -0,0 +1,122 @@
+<template>
+  <el-button
+    :type="type"
+    :size="size"
+    :plain="plain"
+    :round="round"
+    :circle="circle"
+    :disabled="disabled"
+    :loading="loading"
+    :icon="icon"
+    :autofocus="autofocus"
+    :native-type="nativeType"
+    :tag="tag"
+    @click="handleClick"
+  >
+    <template v-if="$slots.default">
+      <slot></slot>
+    </template>
+    <template v-else>
+      {{ text }}
+    </template>
+  </el-button>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'MButton',
+};
+</script>
+
+<script setup lang="ts">
+import { defineProps, defineEmits } from 'vue';
+
+defineProps({
+  // 按钮类型
+  type: {
+    type: String,
+    default: 'primary',
+    validator: (value: string) => {
+      return [
+        'primary',
+        'success',
+        'warning',
+        'danger',
+        'info',
+        'text',
+      ].includes(value);
+    },
+  },
+  // 按钮尺寸
+  size: {
+    type: String,
+    default: 'default',
+    validator: (value: string) => {
+      return ['large', 'default', 'small', 'mini'].includes(value);
+    },
+  },
+  // 是否朴素按钮
+  plain: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否圆角按钮
+  round: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否圆形按钮
+  circle: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否禁用
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  // 是否加载中
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  // 图标
+  icon: {
+    type: String,
+    default: '',
+  },
+  // 按钮文本
+  text: {
+    type: String,
+    default: '',
+  },
+  // 是否自动聚焦
+  autofocus: {
+    type: Boolean,
+    default: false,
+  },
+  // 原生 type 属性
+  nativeType: {
+    type: String,
+    default: 'button',
+    validator: (value: string) => {
+      return ['button', 'submit', 'reset'].includes(value);
+    },
+  },
+  // 自定义标签
+  tag: {
+    type: String,
+    default: 'button',
+  },
+});
+
+const emit = defineEmits(['click']);
+
+const handleClick = (event: MouseEvent) => {
+  emit('click', event);
+};
+</script>
+
+<style scoped>
+/* 可以添加自定义样式 */
+</style>

package/src/index.ts

@@ -0,0 +1,22 @@
+import type { App } from 'vue'
+import MButton from './components/MButton.vue'
+
+const components = [
+  MButton
+]
+
+export const install = (app: App) => {
+  components.forEach(component => {
+    if (component.name) {
+      app.component(component.name, component)
+    }
+  })
+}
+
+export {
+  MButton
+}
+
+export default {
+  install
+}

package/src/main.ts

@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import MiaomaComponents from './index'
+
+const app = createApp(App)
+app.use(ElementPlus)
+app.use(MiaomaComponents)
+app.mount('#app')

package/vite.config.ts

@@ -0,0 +1,32 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import dts from 'vite-plugin-dts'
+import { resolve } from 'path'
+import { fileURLToPath, URL } from 'url'
+
+const __dirname = fileURLToPath(new URL('.', import.meta.url))
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    dts({
+      insertTypesEntry: true
+    })
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'MiaomaComponents',
+      fileName: (format) => `index.${format}.js`
+    },
+    rollupOptions: {
+      external: ['vue', 'element-plus'],
+      output: {
+        globals: {
+          vue: 'Vue',
+          'element-plus': 'ElementPlus'
+        }
+      }
+    }
+  }
+})