sunyard-szyy-ui 0.2.7 → 0.3.0

package/README.md

@@ -0,0 +1,173 @@
+# sunyard-szyy-ui
+
+> 企业级 Vue 3 组件库 - 基于 Element Plus 的二次封装
+
+[![npm version](https://img.shields.io/npm/v/sunyard-szyy-ui.svg)](https://www.npmjs.com/package/sunyard-szyy-ui)
+
+<!-- [![license](https://img.shields.io/npm/l/sunyard-szyy-ui.svg)](https://github.com/your-org/sunyard-szyy-ui/blob/main/LICENSE) -->
+
+## ✨ 特性
+
+- 🚀 **Vue 3 + TypeScript** - 基于 Vue 3.5+ 和 TypeScript 5.6+
+- 📦 **Monorepo 架构** - 使用 pnpm workspace 管理
+- 🎨 **主题定制** - 支持 SCSS 变量和 CSS 变量双重定制
+- 🔥 **按需加载** - 支持自动按需导入，极致的打包体积
+- 📚 **完整文档** - 详细的使用文档和 API 说明
+- 💪 **TypeScript** - 完整的类型定义和类型推导
+- 🌲 **Tree-shaking** - 支持 ES Module，自动 tree-shaking
+- ⚡️ **高性能** - 基于 Element Plus，性能卓越
+
+## 📦 安装
+
+```bash
+# npm
+npm install sunyard-szyy-ui element-plus
+
+# pnpm
+pnpm add sunyard-szyy-ui element-plus
+
+# yarn
+yarn add sunyard-szyy-ui element-plus
+```
+
+## 🚀 快速开始
+
+### 全量引入
+
+```typescript
+// main.ts
+import { createApp } from 'vue';
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
+
+import SunyardSzyyUI from 'sunyard-szyy-ui';
+import 'sunyard-szyy-ui/theme-chalk/index.css';
+
+import App from './App.vue';
+
+const app = createApp(App);
+
+app.use(ElementPlus);
+app.use(SunyardSzyyUI);
+app.mount('#app');
+```
+
+### 自动按需引入（推荐）
+
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import AutoImport from 'unplugin-auto-import/vite';
+import Components from 'unplugin-vue-components/vite';
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
+import { SunyardSzyyUIResolver } from 'sunyard-szyy-ui/utils';
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    AutoImport({
+      resolvers: [ElementPlusResolver()]
+    }),
+    Components({
+      resolvers: [ElementPlusResolver({ importStyle: 'sass' }), SunyardSzyyUIResolver()]
+    })
+  ],
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@use "sunyard-szyy-ui/theme-chalk/var.scss" as *;`
+      }
+    }
+  }
+});
+```
+
+```typescript
+// main.ts (按需引入时只需引入基础样式)
+import 'sunyard-szyy-ui/theme-chalk/base.css';
+```
+
+### 使用组件
+
+```vue
+<template>
+  <div>
+    <SySearchBar v-model="keyword" placeholder="请输入搜索关键词" @search="handleSearch" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const keyword = ref('');
+
+const handleSearch = (value: string) => {
+  console.log('搜索:', value);
+};
+</script>
+```
+
+## 📚 包结构
+
+本项目采用 Monorepo 架构，包含以下子包：
+
+```
+sunyard-szyy-ui/
+├── @sunyard-szyy-ui/components   # Vue 组件
+├── @sunyard-szyy-ui/hooks        # Composition API Hooks
+├── @sunyard-szyy-ui/utils        # 工具函数
+├── @sunyard-szyy-ui/theme-chalk  # 样式主题
+└── sunyard-szyy-ui              # 主包（聚合导出）
+```
+
+### 子包说明
+
+| 包名                           | 说明                  | 独立使用  |
+| ------------------------------ | --------------------- | --------- |
+| `sunyard-szyy-ui`              | 主包，包含所有功能    | ✅ 推荐   |
+| `@sunyard-szyy-ui/components`  | Vue 组件              | ✅ 可以   |
+| `@sunyard-szyy-ui/hooks`       | Composition API Hooks | ✅ 可以   |
+| `@sunyard-szyy-ui/utils`       | 工具函数              | ✅ 可以   |
+| `@sunyard-szyy-ui/theme-chalk` | 样式主题              | ❌ 不推荐 |
+
+## 📦 发布产物
+
+安装 `sunyard-szyy-ui` 后，包含以下内容：
+
+```
+sunyard-szyy-ui/
+├── es/                    # ESM 格式
+│   ├── index.mjs
+│   └── index.d.ts
+├── lib/                   # CJS 格式
+│   ├── index.js
+│   └── index.d.ts
+├── dist/                  # UMD 格式 + 子包
+│   ├── index.full.js      # UMD bundle
+│   ├── index.full.mjs     # ESM bundle
+│   ├── hooks/             # Hooks 子包
+│   └── utils/             # Utils 子包
+└── theme-chalk/           # 样式文件
+    ├── index.css          # 完整样式
+    ├── base.css           # 基础样式
+    └── *.css              # 组件样式
+```
+
+## 🤝 依赖关系
+
+```
+sunyard-szyy-ui
+├── @sunyard-szyy-ui/components
+│   ├── @sunyard-szyy-ui/hooks
+│   │   └── @sunyard-szyy-ui/utils
+│   └── @sunyard-szyy-ui/utils
+├── @sunyard-szyy-ui/hooks
+│   └── @sunyard-szyy-ui/utils
+└── @sunyard-szyy-ui/utils
+```
+
+**外部依赖（Peer Dependencies）：**
+
+- `vue` ^3.0.0
+- `element-plus` ^2.0.0

package/dist/index.full.js

@@ -0,0 +1,4 @@
+(function(e,u){typeof exports=="object"&&typeof module!="undefined"?u(exports,require("element-plus"),require("vue"),require("@sunyard-szyy-ui/hooks"),require("@sunyard-szyy-ui/utils")):typeof define=="function"&&define.amd?define(["exports","element-plus","vue","@sunyard-szyy-ui/hooks","@sunyard-szyy-ui/utils"],u):(e=typeof globalThis!="undefined"?globalThis:e||self,u(e.SunyardSzyyUI={},e.ElementPlus,e.Vue,e.hooks,e.utils))})(this,function(e,u,n,i,d){"use strict";/*!
+ * sunyard-szyy-ui v0.3.0
+ * (c) 2026 Sunyard SZYY Base Team
+ */const y=n.defineComponent({name:"SySearchBar",props:{modelValue:{type:String,default:""},placeholder:{type:String,default:"请输入关键字"},buttonText:{type:String,default:"搜索"}},emits:["update:modelValue","search"],setup(r,{emit:s}){const l=i.useNamespace("search-bar"),a=n.ref(r.modelValue);n.watch(()=>r.modelValue,t=>{t!==a.value&&(a.value=t)});function o(){s("search",a.value)}return()=>n.h("div",{class:l.b()},[n.h(u.ElInput,{class:l.e("input"),modelValue:a.value,placeholder:r.placeholder,clearable:!0,"onUpdate:modelValue":t=>{a.value=t,s("update:modelValue",t)},onKeydown:t=>{t.key==="Enter"&&o()}}),n.h(u.ElButton,{class:l.e("button"),type:"primary",onClick:o},()=>r.buttonText)])}}),c=d.withInstall(y);e.SySearchBar=c,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});

package/dist/index.full.mjs

@@ -0,0 +1,64 @@
+import { ElInput as u, ElButton as c } from "element-plus";
+import { defineComponent as d, ref as m, watch as i, h as o } from "vue";
+import { useNamespace as p } from "@sunyard-szyy-ui/hooks";
+import { withInstall as s } from "@sunyard-szyy-ui/utils";
+/*!
+ * sunyard-szyy-ui v0.3.0
+ * (c) 2026 Sunyard SZYY Base Team
+ */
+const h = d({
+  name: "SySearchBar",
+  props: {
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    placeholder: {
+      type: String,
+      default: "请输入关键字"
+    },
+    buttonText: {
+      type: String,
+      default: "搜索"
+    }
+  },
+  emits: ["update:modelValue", "search"],
+  setup(t, { emit: r }) {
+    const l = p("search-bar"), a = m(t.modelValue);
+    i(
+      () => t.modelValue,
+      (e) => {
+        e !== a.value && (a.value = e);
+      }
+    );
+    function n() {
+      r("search", a.value);
+    }
+    return () => o("div", { class: l.b() }, [
+      o(u, {
+        class: l.e("input"),
+        modelValue: a.value,
+        placeholder: t.placeholder,
+        clearable: !0,
+        "onUpdate:modelValue": (e) => {
+          a.value = e, r("update:modelValue", e);
+        },
+        onKeydown: (e) => {
+          e.key === "Enter" && n();
+        }
+      }),
+      o(
+        c,
+        {
+          class: l.e("button"),
+          type: "primary",
+          onClick: n
+        },
+        () => t.buttonText
+      )
+    ]);
+  }
+}), b = s(h);
+export {
+  b as SySearchBar
+};

package/es/index.d.ts

@@ -3,7 +3,7 @@ export { SySearchBar } from '@sunyard-szyy-ui/components';
 export * from '@sunyard-szyy-ui/hooks';
 export * from '@sunyard-szyy-ui/utils';
 export { makeInstaller } from './make-installer';
-export declare const version = "0.2.5";
+export { version } from './version';
 export declare const install: (app: App) => void;
 declare const _default: {
     version: string;

package/es/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAU,MAAM,KAAK,CAAC;AAIvC,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAG1D,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AAGvC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,eAAO,MAAM,OAAO,UAAU,CAAC;AAM/B,eAAO,MAAM,OAAO,GAAI,KAAK,GAAG,SAE/B,CAAC;;;mBAF2B,GAAG;;AAKhC,wBAGE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAU,MAAM,KAAK,CAAC;AAKvC,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAG1D,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AAGvC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGjD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAMpC,eAAO,MAAM,OAAO,GAAI,KAAK,GAAG,SAgC/B,CAAC;;;mBAhC2B,GAAG;;AAmChC,wBAGE"}

package/es/index.mjs

@@ -1 +1,4 @@
-import{SySearchBar as e}from"@sunyard-szyy-ui/components";import{SySearchBar as p}from"@sunyard-szyy-ui/components";export*from"@sunyard-szyy-ui/hooks";export*from"@sunyard-szyy-ui/utils";import{makeInstaller as S}from"./make-installer.mjs";const t="0.2.5",a=[e],n=o=>{a.forEach(r=>o.use(r))},c={version:t,install:n};export{p as SySearchBar,c as default,n as install,S as makeInstaller,t as version};
+import{SySearchBar as t}from"@sunyard-szyy-ui/components";import{SySearchBar as f}from"@sunyard-szyy-ui/components";import{version as e}from"./version.mjs";export*from"@sunyard-szyy-ui/hooks";export*from"@sunyard-szyy-ui/utils";import{makeInstaller as S}from"./make-installer.mjs";/*!
+ * sunyard-szyy-ui v0.3.0
+ * (c) 2026 Sunyard SZYY UI Team
+ */const r=[t],a=n=>{if(typeof window!="undefined"&&(console.log(`%c[Sunyard SZYY UI]%c v${e} %cinstalled`,"color: #409eff; font-weight: bold","color: #67c23a","color: #909399"),window.__SUNYARD_SZYY_UI_VERSION__=e,window.__SUNYARD_SZYY_UI__={version:e,components:r.map(o=>o.name||"Unknown")}),r.forEach(o=>n.use(o)),typeof window!="undefined"){const o=window.__VUE_DEVTOOLS_GLOBAL_HOOK__;o&&o.emit("app:init",n,e,{label:"Sunyard SZYY UI",packageName:"sunyard-szyy-ui",homepage:"https://github.com/your-org/sunyard-szyy-ui"})}},c={version:e,install:a};export{f as SySearchBar,c as default,a as install,S as makeInstaller,e as version};

package/es/make-installer.d.ts

@@ -3,13 +3,14 @@ import type { App, Plugin } from 'vue';
  * 创建组件库安装器
  *
  * @param components - 组件列表
- * @returns 包含 install 方法的插件对象
+ * @param version - 版本号
+ * @returns 包含 install 方法和 version 的插件对象
  *
  * @example
- * const installer = makeInstaller([SySearchBar, SyButton]);
+ * const installer = makeInstaller([SySearchBar, SyButton], '1.0.0');
  * app.use(installer);
  */
-export declare const makeInstaller: (components?: Plugin[]) => {
+export declare const makeInstaller: (components?: Plugin[], version?: string) => {
     version: string;
     install: (app: App) => void;
 };

package/es/make-installer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"make-installer.d.ts","sourceRoot":"","sources":["../src/make-installer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AAIvC;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,GAAI,aAAY,MAAM,EAAO;;mBAC/B,GAAG;CAc1B,CAAC"}
+{"version":3,"file":"make-installer.d.ts","sourceRoot":"","sources":["../src/make-installer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AAIvC;;;;;;;;;;GAUG;AACH,eAAO,MAAM,aAAa,GAAI,aAAY,MAAM,EAAO,EAAE,gBAAiB;;mBAClD,GAAG;CAc1B,CAAC"}

package/es/make-installer.mjs

@@ -1 +1,4 @@
-const n=Symbol("SUNYARD_SZYY_UI_INSTALLED"),l=(r=[])=>({version:"0.2.5",install:t=>{t[n]||(t[n]=!0,r.forEach(e=>t.use(e)))}});export{l as makeInstaller};
+/*!
+ * sunyard-szyy-ui v0.3.0
+ * (c) 2026 Sunyard SZYY UI Team
+ */const n=Symbol("SUNYARD_SZYY_UI_INSTALLED"),o=(r=[],e="0.0.0")=>({version:e,install:t=>{t[n]||(t[n]=!0,r.forEach(l=>t.use(l)))}});export{o as makeInstaller};

package/es/search-bar/style/css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../../src/search-bar/style/css.ts"],"names":[],"mappings":"AACA,OAAO,6CAA6C,CAAC;AACrD,OAAO,4CAA4C,CAAC;AAGpD,OAAO,4CAA4C,CAAC"}
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../../src/search-bar/style/css.ts"],"names":[],"mappings":"AACA,OAAO,6CAA6C,CAAC;AACrD,OAAO,4CAA4C,CAAC;AAKpD,OAAO,4CAA4C,CAAC"}

package/es/version.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 自动生成的版本文件
+ * 请勿手动修改
+ * 通过 pnpm version:set 命令更新版本号
+ */
+export declare const version = "0.3.0";
+//# sourceMappingURL=version.d.ts.map

package/es/version.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/version.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,eAAO,MAAM,OAAO,UAAU,CAAC"}

package/es/version.mjs

@@ -0,0 +1,4 @@
+/*!
+ * sunyard-szyy-ui v0.3.0
+ * (c) 2026 Sunyard SZYY UI Team
+ */const o="0.3.0";export{o as version};

package/lib/index.d.ts

@@ -3,7 +3,7 @@ export { SySearchBar } from '@sunyard-szyy-ui/components';
 export * from '@sunyard-szyy-ui/hooks';
 export * from '@sunyard-szyy-ui/utils';
 export { makeInstaller } from './make-installer';
-export declare const version = "0.2.5";
+export { version } from './version';
 export declare const install: (app: App) => void;
 declare const _default: {
     version: string;

package/lib/index.js

@@ -1 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@sunyard-szyy-ui/components"),t=require("@sunyard-szyy-ui/hooks"),r=require("@sunyard-szyy-ui/utils"),c=require("./make-installer.js"),a="0.2.5",l=[o.SySearchBar],n=e=>{l.forEach(s=>e.use(s))},u={version:a,install:n};Object.defineProperty(exports,"SySearchBar",{enumerable:!0,get:()=>o.SySearchBar});exports.makeInstaller=c.makeInstaller;exports.default=u;exports.install=n;exports.version=a;Object.keys(t).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});Object.keys(r).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>r[e]})});
+"use strict";/*!
+ * sunyard-szyy-ui v0.3.0
+ * (c) 2026 Sunyard SZYY UI Team
+ */Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("@sunyard-szyy-ui/components"),r=require("./version.js"),n=require("@sunyard-szyy-ui/hooks"),t=require("@sunyard-szyy-ui/utils"),c=require("./make-installer.js"),i=[s.SySearchBar],a=e=>{if(typeof window!="undefined"&&(console.log(`%c[Sunyard SZYY UI]%c v${r.version} %cinstalled`,"color: #409eff; font-weight: bold","color: #67c23a","color: #909399"),window.__SUNYARD_SZYY_UI_VERSION__=r.version,window.__SUNYARD_SZYY_UI__={version:r.version,components:i.map(o=>o.name||"Unknown")}),i.forEach(o=>e.use(o)),typeof window!="undefined"){const o=window.__VUE_DEVTOOLS_GLOBAL_HOOK__;o&&o.emit("app:init",e,r.version,{label:"Sunyard SZYY UI",packageName:"sunyard-szyy-ui",homepage:"https://github.com/your-org/sunyard-szyy-ui"})}},l={version:r.version,install:a};Object.defineProperty(exports,"SySearchBar",{enumerable:!0,get:()=>s.SySearchBar});exports.version=r.version;exports.makeInstaller=c.makeInstaller;exports.default=l;exports.install=a;Object.keys(n).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>n[e]})});Object.keys(t).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});

package/lib/make-installer.d.ts

@@ -3,13 +3,14 @@ import type { App, Plugin } from 'vue';
  * 创建组件库安装器
  *
  * @param components - 组件列表
- * @returns 包含 install 方法的插件对象
+ * @param version - 版本号
+ * @returns 包含 install 方法和 version 的插件对象
  *
  * @example
- * const installer = makeInstaller([SySearchBar, SyButton]);
+ * const installer = makeInstaller([SySearchBar, SyButton], '1.0.0');
  * app.use(installer);
  */
-export declare const makeInstaller: (components?: Plugin[]) => {
+export declare const makeInstaller: (components?: Plugin[], version?: string) => {
     version: string;
     install: (app: App) => void;
 };

package/lib/make-installer.js

@@ -1 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=Symbol("SUNYARD_SZYY_UI_INSTALLED"),n=(r=[])=>({version:"0.2.5",install:e=>{e[t]||(e[t]=!0,r.forEach(l=>e.use(l)))}});exports.makeInstaller=n;
+"use strict";/*!
+ * sunyard-szyy-ui v0.3.0
+ * (c) 2026 Sunyard SZYY UI Team
+ */Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Symbol("SUNYARD_SZYY_UI_INSTALLED"),s=(l=[],r="0.0.0")=>({version:r,install:t=>{t[e]||(t[e]=!0,l.forEach(n=>t.use(n)))}});exports.makeInstaller=s;

package/lib/version.d.ts

@@ -0,0 +1,7 @@
+/**
+ * 自动生成的版本文件
+ * 请勿手动修改
+ * 通过 pnpm version:set 命令更新版本号
+ */
+export declare const version = "0.3.0";
+//# sourceMappingURL=version.d.ts.map

package/lib/version.js

@@ -0,0 +1,4 @@
+"use strict";/*!
+ * sunyard-szyy-ui v0.3.0
+ * (c) 2026 Sunyard SZYY UI Team
+ */Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="0.3.0";exports.version=e;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sunyard-szyy-ui",
-  "version": "0.2.7",
+  "version": "0.3.0",
   "type": "module",
   "main": "lib/index.js",
   "module": "es/index.mjs",
@@ -19,6 +19,7 @@
       "types": "./lib/index.d.ts",
       "require": "./lib/index.js"
     },
+    "./dist/*": "./dist/*",
     "./hooks": {
       "types": "./dist/hooks/index.d.ts",
       "import": "./dist/hooks/index.js",
@@ -82,9 +83,9 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@sunyard-szyy-ui/components": "0.2.7",
-    "@sunyard-szyy-ui/hooks": "0.2.7",
-    "@sunyard-szyy-ui/utils": "0.2.7"
+    "@sunyard-szyy-ui/components": "0.3.0",
+    "@sunyard-szyy-ui/hooks": "0.3.0",
+    "@sunyard-szyy-ui/utils": "0.3.0"
   },
   "publishConfig": {
     "access": "public"