@zzzzzzhaopu/my-ui 1.0.0

package/README.md

@@ -0,0 +1,289 @@
+# My UI Library
+
+基于 Vite + Vue3 + TypeScript 的业务组件库
+
+## 特性
+
+- ⚡️ 基于 Vite 构建，开发体验极佳
+- 🎨 基于 Element Plus，UI 精美
+- 📦 支持按需引入，Tree-shaking
+- 🔧 完整的 TypeScript 类型定义
+- 🌈 支持 SCSS 变量定制主题
+- 📖 详细的文档和示例
+
+## 安装
+
+```bash
+npm install @demo/my-ui
+```
+
+## 快速开始
+
+### 完整引入
+
+```typescript
+import { createApp } from 'vue'
+import MyUI from '@demo/my-ui'
+import '@demo/my-ui/dist/style.css'
+
+const app = createApp(App)
+app.use(MyUI)
+```
+
+### 按需引入
+
+```vue
+<script setup>
+import { MyButton, MyInput } from '@demo/my-ui'
+import '@demo/my-ui/dist/style.css'
+</script>
+
+<template>
+  <MyButton>按钮</MyButton>
+  <MyInput v-model="value" />
+</template>
+```
+
+## 组件列表
+
+- MyButton - 按钮组件
+- MyInput - 输入框组件
+- MyCard - 卡片组件
+
+## 开发
+
+```bash
+# 安装依赖
+npm install
+
+# 启动开发服务器
+npm run dev
+
+# 启动文档站点
+npm run docs:dev
+
+# 构建组件库
+npm run build
+
+# 构建文档
+npm run docs:build
+```
+
+## 项目结构
+
+```
+my-component-library/
+├── packages/                    # 组件源码目录
+│   ├── components/             # 业务组件
+│   │   ├── MyButton/          # 按钮组件
+│   │   │   ├── src/
+│   │   │   │   ├── MyButton.vue     # 组件实现
+│   │   │   │   └── types.ts         # 组件类型定义
+│   │   │   ├── style/
+│   │   │   │   └── index.scss       # 组件样式
+│   │   │   └── index.ts             # 组件入口（支持 install 方法）
+│   │   ├── MyInput/           # 输入框组件（结构同上）
+│   │   ├── MyCard/            # 卡片组件（结构同上）
+│   │   └── index.ts           # 组件统一导出
+│   ├── styles/                # 全局样式系统
+│   │   ├── variables.scss     # SCSS 变量（颜色、字体、间距等）
+│   │   ├── mixins.scss        # SCSS 混入（工具函数）
+│   │   └── index.scss         # 样式入口
+│   ├── types/                 # 全局类型定义
+│   ├── utils/                 # 工具函数
+│   ├── composables/           # 组合式函数
+│   └── index.ts               # 组件库总入口（导出所有组件）
+│
+├── src/                        # 开发预览环境
+│   ├── App.vue                # 组件预览页面
+│   ├── main.ts                # 开发环境入口
+│   └── examples/              # 组件示例
+│
+├── docs/                       # VitePress 文档站点
+│   ├── .vitepress/            # VitePress 配置
+│   │   ├── config.ts          # 站点配置（导航、侧边栏等）
+│   │   └── theme/
+│   │       └── index.ts       # 自定义主题（注册组件库）
+│   ├── components/            # 组件文档
+│   │   ├── button.md         # Button 组件文档
+│   │   ├── input.md          # Input 组件文档
+│   │   └── card.md           # Card 组件文档
+│   ├── guide/                # 指南文档
+│   │   └── quick-start.md    # 快速开始
+│   └── index.md              # 文档首页
+│
+├── dist/                      # 构建产物（自动生成）
+│   ├── index.es.js           # ES Module 格式
+│   ├── index.umd.js          # UMD 格式
+│   ├── index.d.ts            # TypeScript 类型定义
+│   ├── style.css             # 打包后的样式
+│   ├── components/           # 各组件独立文件（支持按需引入）
+│   └── assets/               # 静态资源
+│
+├── vite.config.ts             # Vite 核心配置（库模式构建）
+├── tsconfig.json              # TypeScript 配置
+├── package.json               # 项目配置和依赖管理
+├── env.d.ts                   # 环境类型声明
+├── .gitignore                 # Git 忽略文件
+├── .npmignore                 # npm 发布忽略文件
+└── README.md                  # 项目说明文档
+```
+
+### 关键文件说明
+
+#### 配置文件
+
+**vite.config.ts** - Vite 核心配置
+```typescript
+// 关键配置项说明：
+{
+  plugins: [
+    vue(),                    // Vue 3 支持
+    dts({                     // 自动生成 TypeScript 类型定义
+      include: ['packages/**/*'],
+      outDir: 'dist'
+    }),
+    svgLoader()              // SVG 作为 Vue 组件导入
+  ],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'packages')  // 路径别名，@ 指向 packages 目录
+    }
+  },
+  build: {
+    lib: {
+      entry: 'packages/index.ts',          // 组件库入口
+      name: 'MyUILibrary',                 // UMD 格式全局变量名
+      formats: ['es', 'umd']               // 输出 ES Module 和 UMD 两种格式
+    },
+    rollupOptions: {
+      external: ['vue', 'element-plus'],   // 外部依赖，不打包进组件库
+      output: {
+        preserveModules: true,             // 保留模块结构，支持按需引入
+        preserveModulesRoot: 'packages'
+      }
+    },
+    cssCodeSplit: true                     // CSS 代码分割，每个组件独立样式
+  }
+}
+```
+
+**package.json** - 项目配置
+```json
+{
+  "name": "@demo/my-ui",              // npm 包名
+  "type": "module",                   // 声明为 ES Module
+  "main": "./dist/index.umd.js",     // CommonJS 入口
+  "module": "./dist/index.es.js",    // ES Module 入口
+  "types": "./dist/index.d.ts",      // TypeScript 类型入口
+  "exports": {                        // 现代化导出方式
+    ".": {
+      "import": "./dist/index.es.js", // import 使用 ES Module
+      "require": "./dist/index.umd.js", // require 使用 UMD
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/style.css": "./dist/style.css"  // 样式文件导出
+  },
+  "files": ["dist"],                 // npm 发布时只包含 dist 目录
+  "scripts": {
+    "dev": "vite",                   // 启动开发服务器
+    "build": "vue-tsc && vite build", // 类型检查 + 构建
+    "docs:dev": "vitepress dev docs", // 启动文档站点
+    "prepublishOnly": "npm run build" // 发布前自动构建
+  },
+  "peerDependencies": {              // 对等依赖，用户项目需要安装
+    "vue": "^3.4.0"
+  }
+}
+```
+
+**tsconfig.json** - TypeScript 配置
+```json
+{
+  "compilerOptions": {
+    "target": "ES2020",              // 编译目标
+    "module": "ESNext",              // 模块系统
+    "moduleResolution": "bundler",   // 模块解析策略
+    "strict": true,                  // 严格类型检查
+    "jsx": "preserve",               // 保留 JSX（由 Vite 处理）
+    "baseUrl": ".",                  // 路径解析基准
+    "paths": {
+      "@/*": ["packages/*"]          // 路径映射，@ 指向 packages
+    }
+  },
+  "include": ["src/**/*", "packages/**/*"],  // 包含的文件
+  "exclude": ["node_modules", "dist"]        // 排除的文件
+}
+```
+
+**docs/.vitepress/config.ts** - VitePress 配置
+```typescript
+{
+  title: 'My UI Library',           // 站点标题
+  description: '基于 Vite + Vue3 的业务组件库',
+  themeConfig: {
+    nav: [...],                     // 顶部导航栏
+    sidebar: [...],                 // 侧边栏菜单
+    socialLinks: [...]              // 社交链接（GitHub 等）
+  },
+  vite: {                           // 继承 Vite 配置
+    resolve: { alias: { '@': '/packages' } },
+    css: {                          // SCSS 全局变量注入
+      preprocessorOptions: {
+        scss: {
+          additionalData: `@import "/packages/styles/variables.scss";`
+        }
+      }
+    }
+  }
+}
+```
+
+#### 核心源码文件
+
+**packages/index.ts** - 组件库总入口
+- 导出所有组件
+- 提供全局安装方法（支持 app.use()）
+- 导入全局样式
+
+**packages/components/index.ts** - 组件统一导出
+- 收集所有组件
+- 实现全局安装逻辑
+- 支持按需引入和全量引入
+
+**packages/components/MyButton/index.ts** - 单个组件入口
+- 为组件添加 install 方法
+- 导出组件和类型定义
+- 支持独立使用 app.use(MyButton)
+
+**packages/styles/variables.scss** - SCSS 变量系统
+- 定义颜色、字体、间距等设计令牌
+- 支持主题定制
+- 全局自动注入，组件中可直接使用
+
+#### 文档相关文件
+
+**docs/.vitepress/theme/index.ts** - 自定义主题
+- 扩展默认主题
+- 注册组件库（使文档中可直接使用组件）
+- 引入 Element Plus
+
+**docs/components/*.md** - 组件文档
+- Markdown 格式
+- 支持内嵌 Vue 组件（实时预览）
+- 包含组件 API 说明和示例代码
+
+### 构建产物说明
+
+运行 `npm run build` 后，在 `dist/` 目录生成：
+
+1. **index.es.js** - ES Module 格式，支持 Tree-shaking
+2. **index.umd.js** - UMD 格式，支持 script 标签直接引入
+3. **index.d.ts** - TypeScript 类型定义入口
+4. **style.css** - 打包后的全量样式文件
+5. **components/** - 各组件独立文件，支持按需引入
+6. **各组件的 .d.ts 文件** - 每个组件的类型定义
+
+## License
+
+MIT

package/dist/es/_virtual/_plugin-vue_export-helper.js

@@ -0,0 +1,9 @@
+const s = (t, e) => {
+  const o = t.__vccOpts || t;
+  for (const [r, c] of e)
+    o[r] = c;
+  return o;
+};
+export {
+  s as default
+};

package/dist/es/components/MyButton/index.d.ts

@@ -0,0 +1,6 @@
+import { Plugin } from 'vue';
+import { default as MyButton } from './src/MyButton.vue';
+
+declare const _default: typeof MyButton & Plugin;
+export default _default;
+export * from './src/types';

package/dist/es/components/MyButton/index.js

@@ -0,0 +1,7 @@
+import t from "./src/MyButton.vue.js";
+t.install = function(n) {
+  n.component(t.name, t);
+};
+export {
+  t as default
+};

package/dist/es/components/MyButton/src/MyButton.css

@@ -0,0 +1 @@
+.my-button[data-v-4e6c7abb]{font-weight:500;transition:all .3s cubic-bezier(.645,.045,.355,1)}.my-button[data-v-4e6c7abb]:hover{opacity:.8}

package/dist/es/components/MyButton/src/MyButton.vue.d.ts

@@ -0,0 +1,59 @@
+import { MyButtonProps } from './types';
+import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, PropType } from 'vue';
+
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MyButtonProps>, {
+    type: string;
+    size: string;
+    disabled: boolean;
+    loading: boolean;
+    text: string;
+    round: boolean;
+    circle: boolean;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    click: (event: MouseEvent) => void;
+}, string, PublicProps, Readonly< ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MyButtonProps>, {
+    type: string;
+    size: string;
+    disabled: boolean;
+    loading: boolean;
+    text: string;
+    round: boolean;
+    circle: boolean;
+}>>> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    type: "primary" | "success" | "warning" | "danger" | "info";
+    size: "large" | "default" | "small";
+    disabled: boolean;
+    loading: boolean;
+    text: string;
+    round: boolean;
+    circle: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/es/components/MyButton/src/MyButton.vue.js

@@ -0,0 +1,7 @@
+import o from "./MyButton.vue2.js";
+/* empty css              */
+import t from "../../../_virtual/_plugin-vue_export-helper.js";
+const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-4e6c7abb"]]);
+export {
+  p as default
+};

package/dist/es/components/MyButton/src/MyButton.vue2.js

@@ -0,0 +1,42 @@
+import { defineComponent as i, createBlock as d, openBlock as c, unref as u, normalizeClass as s, withCtx as r, renderSlot as f, createTextVNode as m, toDisplayString as y } from "vue";
+import { ElButton as B } from "element-plus";
+const p = /* @__PURE__ */ i({
+  name: "MyButton",
+  __name: "MyButton",
+  props: {
+    type: { default: "primary" },
+    size: { default: "default" },
+    disabled: { type: Boolean, default: !1 },
+    loading: { type: Boolean, default: !1 },
+    text: { default: "" },
+    icon: {},
+    round: { type: Boolean, default: !1 },
+    circle: { type: Boolean, default: !1 }
+  },
+  emits: ["click"],
+  setup(e, { emit: a }) {
+    const l = e, n = a, o = (t) => {
+      l.disabled || l.loading || n("click", t);
+    };
+    return (t, b) => (c(), d(u(B), {
+      class: s(["my-button", `my-button--${e.type}`]),
+      type: e.type,
+      size: e.size,
+      disabled: e.disabled,
+      loading: e.loading,
+      round: e.round,
+      circle: e.circle,
+      onClick: o
+    }, {
+      default: r(() => [
+        f(t.$slots, "default", {}, () => [
+          m(y(e.text), 1)
+        ], !0)
+      ]),
+      _: 3
+    }, 8, ["class", "type", "size", "disabled", "loading", "round", "circle"]));
+  }
+});
+export {
+  p as default
+};

package/dist/es/components/MyButton/src/types.d.ts

@@ -0,0 +1,13 @@
+export interface MyButtonProps {
+    type?: 'primary' | 'success' | 'warning' | 'danger' | 'info';
+    size?: 'large' | 'default' | 'small';
+    disabled?: boolean;
+    loading?: boolean;
+    text?: string;
+    icon?: string;
+    round?: boolean;
+    circle?: boolean;
+}
+export interface MyButtonEmits {
+    (e: 'click', event: MouseEvent): void;
+}

package/dist/es/components/MyCard/index.d.ts

@@ -0,0 +1,6 @@
+import { Plugin } from 'vue';
+import { default as MyCard } from './src/MyCard.vue';
+
+declare const _default: typeof MyCard & Plugin;
+export default _default;
+export * from './src/types';

package/dist/es/components/MyCard/index.js

@@ -0,0 +1,7 @@
+import n from "./src/MyCard.vue.js";
+n.install = function(o) {
+  o.component(n.name, n);
+};
+export {
+  n as default
+};

package/dist/es/components/MyCard/src/MyCard.css

@@ -0,0 +1 @@
+.my-card[data-v-88cf7b28]{border-radius:4px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.my-card[data-v-88cf7b28]:hover{box-shadow:0 2px 12px rgba(0,0,0,.1)}

package/dist/es/components/MyCard/src/MyCard.vue.d.ts

@@ -0,0 +1,38 @@
+import { MyCardProps } from './types';
+import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, PropType } from 'vue';
+
+declare function __VLS_template(): {
+    header?(_: {}): any;
+    default?(_: {}): any;
+};
+declare const __VLS_component: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MyCardProps>, {
+    shadow: string;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly< ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MyCardProps>, {
+    shadow: string;
+}>>> & Readonly<{}>, {
+    shadow: "always" | "hover" | "never";
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/es/components/MyCard/src/MyCard.vue.js

@@ -0,0 +1,7 @@
+import o from "./MyCard.vue2.js";
+/* empty css            */
+import r from "../../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-88cf7b28"]]);
+export {
+  m as default
+};

package/dist/es/components/MyCard/src/MyCard.vue2.js

@@ -0,0 +1,35 @@
+import { defineComponent as r, createBlock as t, openBlock as s, unref as l, createSlots as n, withCtx as d, renderSlot as o } from "vue";
+import { ElCard as h } from "element-plus";
+const u = /* @__PURE__ */ r({
+  name: "MyCard",
+  __name: "MyCard",
+  props: {
+    header: {},
+    shadow: { default: "always" },
+    bodyStyle: {}
+  },
+  setup(e) {
+    return (a, y) => (s(), t(l(h), {
+      header: e.header,
+      shadow: e.shadow,
+      "body-style": e.bodyStyle,
+      class: "my-card"
+    }, n({
+      default: d(() => [
+        o(a.$slots, "default", {}, void 0, !0)
+      ]),
+      _: 2
+    }, [
+      a.$slots.header ? {
+        name: "header",
+        fn: d(() => [
+          o(a.$slots, "header", {}, void 0, !0)
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1032, ["header", "shadow", "body-style"]));
+  }
+});
+export {
+  u as default
+};

package/dist/es/components/MyCard/src/types.d.ts

@@ -0,0 +1,5 @@
+export interface MyCardProps {
+    header?: string;
+    shadow?: 'always' | 'hover' | 'never';
+    bodyStyle?: Record<string, string>;
+}

package/dist/es/components/MyInput/index.d.ts

@@ -0,0 +1,6 @@
+import { Plugin } from 'vue';
+import { default as MyInput } from './src/MyInput.vue';
+
+declare const _default: typeof MyInput & Plugin;
+export default _default;
+export * from './src/types';

package/dist/es/components/MyInput/index.js

@@ -0,0 +1,7 @@
+import n from "./src/MyInput.vue.js";
+n.install = function(t) {
+  t.component(n.name, n);
+};
+export {
+  n as default
+};

package/dist/es/components/MyInput/src/MyInput.css

@@ -0,0 +1 @@
+.my-input[data-v-151b015e]{width:100%}

package/dist/es/components/MyInput/src/MyInput.vue.d.ts

@@ -0,0 +1,60 @@
+import { MyInputProps } from './types';
+import { DefineComponent, ExtractPropTypes, ComponentOptionsMixin, PublicProps, ComponentProvideOptions, PropType } from 'vue';
+
+declare function __VLS_template(): {
+    prefix?(_: {}): any;
+    suffix?(_: {}): any;
+};
+declare const __VLS_component: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MyInputProps>, {
+    type: string;
+    placeholder: string;
+    disabled: boolean;
+    clearable: boolean;
+    size: string;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+    "update:modelValue": (value: string | number) => void;
+    change: (value: string | number) => void;
+    blur: (event: FocusEvent) => void;
+    focus: (event: FocusEvent) => void;
+}, string, PublicProps, Readonly< ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<MyInputProps>, {
+    type: string;
+    placeholder: string;
+    disabled: boolean;
+    clearable: boolean;
+    size: string;
+}>>> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | number) => any) | undefined;
+    onChange?: ((value: string | number) => any) | undefined;
+    onBlur?: ((event: FocusEvent) => any) | undefined;
+    onFocus?: ((event: FocusEvent) => any) | undefined;
+}>, {
+    type: "text" | "password" | "number" | "email";
+    size: "large" | "default" | "small";
+    disabled: boolean;
+    placeholder: string;
+    clearable: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/es/components/MyInput/src/MyInput.vue.js

@@ -0,0 +1,7 @@
+import o from "./MyInput.vue2.js";
+/* empty css             */
+import t from "../../../_virtual/_plugin-vue_export-helper.js";
+const _ = /* @__PURE__ */ t(o, [["__scopeId", "data-v-151b015e"]]);
+export {
+  _ as default
+};

package/dist/es/components/MyInput/src/MyInput.vue2.js

@@ -0,0 +1,59 @@
+import { defineComponent as i, createBlock as r, openBlock as c, unref as m, createSlots as h, withCtx as t, renderSlot as n } from "vue";
+import { ElInput as p } from "element-plus";
+const g = /* @__PURE__ */ i({
+  name: "MyInput",
+  __name: "MyInput",
+  props: {
+    modelValue: {},
+    type: { default: "text" },
+    placeholder: { default: "请输入" },
+    disabled: { type: Boolean, default: !1 },
+    clearable: { type: Boolean, default: !1 },
+    size: { default: "default" },
+    maxlength: {}
+  },
+  emits: ["update:modelValue", "change", "blur", "focus"],
+  setup(l, { emit: o }) {
+    const a = o, d = (e) => {
+      a("update:modelValue", e);
+    }, u = (e) => {
+      a("change", e);
+    }, s = (e) => {
+      a("blur", e);
+    }, f = (e) => {
+      a("focus", e);
+    };
+    return (e, y) => (c(), r(m(p), {
+      "model-value": l.modelValue,
+      type: l.type,
+      placeholder: l.placeholder,
+      disabled: l.disabled,
+      clearable: l.clearable,
+      size: l.size,
+      maxlength: l.maxlength,
+      class: "my-input",
+      "onUpdate:modelValue": d,
+      onChange: u,
+      onBlur: s,
+      onFocus: f
+    }, h({ _: 2 }, [
+      e.$slots.prefix ? {
+        name: "prefix",
+        fn: t(() => [
+          n(e.$slots, "prefix", {}, void 0, !0)
+        ]),
+        key: "0"
+      } : void 0,
+      e.$slots.suffix ? {
+        name: "suffix",
+        fn: t(() => [
+          n(e.$slots, "suffix", {}, void 0, !0)
+        ]),
+        key: "1"
+      } : void 0
+    ]), 1032, ["model-value", "type", "placeholder", "disabled", "clearable", "size", "maxlength"]));
+  }
+});
+export {
+  g as default
+};

package/dist/es/components/MyInput/src/types.d.ts

@@ -0,0 +1,15 @@
+export interface MyInputProps {
+    modelValue?: string | number;
+    type?: 'text' | 'password' | 'number' | 'email';
+    placeholder?: string;
+    disabled?: boolean;
+    clearable?: boolean;
+    size?: 'large' | 'default' | 'small';
+    maxlength?: number;
+}
+export interface MyInputEmits {
+    (e: 'update:modelValue', value: string | number): void;
+    (e: 'change', value: string | number): void;
+    (e: 'blur', event: FocusEvent): void;
+    (e: 'focus', event: FocusEvent): void;
+}

package/dist/es/components/index.d.ts

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

package/dist/es/components/index.js

@@ -0,0 +1,24 @@
+import "./MyButton/index.js";
+import "./MyInput/index.js";
+import "./MyCard/index.js";
+import r from "./MyButton/src/MyButton.vue.js";
+import m from "./MyInput/src/MyInput.vue.js";
+import n from "./MyCard/src/MyCard.vue.js";
+const p = [
+  r,
+  m,
+  n
+], i = (o) => {
+  p.forEach((t) => {
+    o.use(t);
+  });
+}, d = {
+  install: i
+};
+export {
+  r as MyButton,
+  n as MyCard,
+  m as MyInput,
+  d as default,
+  i as install
+};

package/dist/es/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export { default } from './components';

package/dist/es/index.js

@@ -0,0 +1,15 @@
+import { default as f, install as m } from "./components/index.js";
+/* empty css                  */
+import "./components/MyButton/index.js";
+import { default as u } from "./components/MyButton/src/MyButton.vue.js";
+import "./components/MyInput/index.js";
+import { default as i } from "./components/MyInput/src/MyInput.vue.js";
+import "./components/MyCard/index.js";
+import { default as x } from "./components/MyCard/src/MyCard.vue.js";
+export {
+  u as MyButton,
+  x as MyCard,
+  i as MyInput,
+  f as default,
+  m as install
+};

package/dist/es/styles/index.css

@@ -0,0 +1 @@
+*{margin:0;padding:0;box-sizing:border-box}

package/dist/umd/index.js

@@ -0,0 +1,2 @@
+(function(a,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue"),require("element-plus")):typeof define=="function"&&define.amd?define(["exports","vue","element-plus"],t):(a=typeof globalThis!="undefined"?globalThis:a||self,t(a.MyUILibrary={},a.Vue,a.ElementPlus))})(this,function(a,t,f){"use strict";var y=document.createElement("style");y.textContent=`.my-button[data-v-4e6c7abb]{font-weight:500;transition:all .3s cubic-bezier(.645,.045,.355,1)}.my-button[data-v-4e6c7abb]:hover{opacity:.8}.my-input[data-v-151b015e]{width:100%}.my-card[data-v-88cf7b28]{border-radius:4px;transition:all .3s cubic-bezier(.645,.045,.355,1)}.my-card[data-v-88cf7b28]:hover{box-shadow:0 2px 12px rgba(0,0,0,.1)}*{margin:0;padding:0;box-sizing:border-box}
+/*$vite$:1*/`,document.head.appendChild(y);const p=t.defineComponent({name:"MyButton",__name:"MyButton",props:{type:{default:"primary"},size:{default:"default"},disabled:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},text:{default:""},icon:{},round:{type:Boolean,default:!1},circle:{type:Boolean,default:!1}},emits:["click"],setup(e,{emit:l}){const o=e,c=l,r=u=>{o.disabled||o.loading||c("click",u)};return(u,b)=>(t.openBlock(),t.createBlock(t.unref(f.ElButton),{class:t.normalizeClass(["my-button",`my-button--${e.type}`]),type:e.type,size:e.size,disabled:e.disabled,loading:e.loading,round:e.round,circle:e.circle,onClick:r},{default:t.withCtx(()=>[t.renderSlot(u.$slots,"default",{},()=>[t.createTextVNode(t.toDisplayString(e.text),1)],!0)]),_:3},8,["class","type","size","disabled","loading","round","circle"]))}}),m=(e,l)=>{const o=e.__vccOpts||e;for(const[c,r]of l)o[c]=r;return o},d=m(p,[["__scopeId","data-v-4e6c7abb"]]);d.install=function(e){e.component(d.name,d)};const i=m(t.defineComponent({name:"MyInput",__name:"MyInput",props:{modelValue:{},type:{default:"text"},placeholder:{default:"请输入"},disabled:{type:Boolean,default:!1},clearable:{type:Boolean,default:!1},size:{default:"default"},maxlength:{}},emits:["update:modelValue","change","blur","focus"],setup(e,{emit:l}){const o=l,c=n=>{o("update:modelValue",n)},r=n=>{o("change",n)},u=n=>{o("blur",n)},b=n=>{o("focus",n)};return(n,M)=>(t.openBlock(),t.createBlock(t.unref(f.ElInput),{"model-value":e.modelValue,type:e.type,placeholder:e.placeholder,disabled:e.disabled,clearable:e.clearable,size:e.size,maxlength:e.maxlength,class:"my-input","onUpdate:modelValue":c,onChange:r,onBlur:u,onFocus:b},t.createSlots({_:2},[n.$slots.prefix?{name:"prefix",fn:t.withCtx(()=>[t.renderSlot(n.$slots,"prefix",{},void 0,!0)]),key:"0"}:void 0,n.$slots.suffix?{name:"suffix",fn:t.withCtx(()=>[t.renderSlot(n.$slots,"suffix",{},void 0,!0)]),key:"1"}:void 0]),1032,["model-value","type","placeholder","disabled","clearable","size","maxlength"]))}}),[["__scopeId","data-v-151b015e"]]);i.install=function(e){e.component(i.name,i)};const s=m(t.defineComponent({name:"MyCard",__name:"MyCard",props:{header:{},shadow:{default:"always"},bodyStyle:{}},setup(e){return(l,o)=>(t.openBlock(),t.createBlock(t.unref(f.ElCard),{header:e.header,shadow:e.shadow,"body-style":e.bodyStyle,class:"my-card"},t.createSlots({default:t.withCtx(()=>[t.renderSlot(l.$slots,"default",{},void 0,!0)]),_:2},[l.$slots.header?{name:"header",fn:t.withCtx(()=>[t.renderSlot(l.$slots,"header",{},void 0,!0)]),key:"0"}:void 0]),1032,["header","shadow","body-style"]))}}),[["__scopeId","data-v-88cf7b28"]]);s.install=function(e){e.component(s.name,s)};const x=[d,i,s],h=e=>{x.forEach(l=>{e.use(l)})},g={install:h};a.MyButton=d,a.MyCard=s,a.MyInput=i,a.default=g,a.install=h,Object.defineProperties(a,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@zzzzzzhaopu/my-ui",
+  "version": "1.0.0",
+  "description": "基于 Vite + Vue3 的业务组件库",
+  "type": "module",
+  "main": "./dist/umd/index.js",
+  "module": "./dist/es/index.js",
+  "types": "./dist/es/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/es/index.js",
+      "require": "./dist/umd/index.js",
+      "types": "./dist/es/index.d.ts"
+    },
+    "./es/*": "./dist/es/*",
+    "./dist/*": "./dist/*",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "rm -rf dist && vue-tsc && vite build",
+    "build:watch": "vite build --watch",
+    "preview": "vite preview",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "vue3",
+    "component",
+    "ui",
+    "vite",
+    "typescript"
+  ],
+  "author": "Demo",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "dependencies": {
+    "element-plus": "^2.5.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "sass": "^1.70.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.7.0",
+    "vite-svg-loader": "^5.1.0",
+    "vitepress": "^1.0.0",
+    "vue": "^3.4.0",
+    "vue-tsc": "^2.0.0"
+  }
+}