@hbdlzy/ui 0.1.7 → 0.1.9

package/AI-USAGE.md

@@ -35,6 +35,7 @@ node_modules/@hbdlzy/ui/AI-USAGE.md
   - `BaseCard`
   - `BaseEChart`
   - `BaseExportButton`
+  - `SvgIcon`
   - `OutlinedInput`
   - `OutlinedSelect`
   - `OutlinedDatePicker`
@@ -45,12 +46,22 @@ node_modules/@hbdlzy/ui/AI-USAGE.md
   - `echarts`
   - `exportExcel`
   - `companyTokens`
-  - 全局按钮 ripple 已随 `@hbdlzy/ui` 入口自动启用，局部关闭可添加 `data-hbdl-ripple="false"`
+  - `Ripple`
+  - 全局点击涟漪已随 `@hbdlzy/ui` 入口自动启用，局部关闭可添加 `data-hbdl-ripple="false"`
 - 只有当现有组件无法满足需求时，才考虑新增公共组件
 
 ## 导入约定
 
-优先统一从 `@hbdlzy/ui` 导入：
+应用入口优先全局安装：
+
+```ts
+import HbdlUI from '@hbdlzy/ui'
+import '@hbdlzy/ui/style.css'
+
+createApp(App).use(HbdlUI).mount('#app')
+```
+
+页面里需要类型、工具或局部注册时，优先统一从 `@hbdlzy/ui` 导入：
 
 ```ts
 import {
@@ -58,6 +69,7 @@ import {
   BaseCard,
   BaseEChart,
   BaseExportButton,
+  SvgIcon,
   OutlinedInput,
   OutlinedSelect,
   OutlinedDatePicker,
@@ -65,6 +77,7 @@ import {
   OutlinedTimePicker,
   OutlinedCascader,
   OutlinedTreeSelect,
+  Ripple,
   installRipple,
   uninstallRipple,
   companyTokens,
@@ -72,12 +85,19 @@ import {
 } from '@hbdlzy/ui'
 ```
 
+只接入点击涟漪时，也可以使用细粒度入口：
+
+```ts
+import { Ripple, installRipple, uninstallRipple } from '@hbdlzy/ui/ripple'
+```
+
 ## 复用规则
 
 - 不要在页面里重复写通用表格的分页、远程请求承接、排序参数映射和勾选暴露逻辑，优先使用 `BaseTable`
 - 不要在页面里重复写 ECharts 初始化、resize、dispose 逻辑，优先使用 `BaseEChart`
 - 不要在页面里重复写卡片外层容器、标题区、右侧时间和导出触发区，优先使用 `BaseCard`
 - 不要在页面里重复写导出按钮 loading、成功失败提示和文件下载逻辑，优先使用 `BaseExportButton`
+- 不要在页面里重复写 SVG symbol 或外链 SVG 图标展示壳子，优先使用 `SvgIcon`
 - 不要在页面里重复写浮动标签输入框、数值基础校验和输入框实例方法暴露逻辑，优先使用 `OutlinedInput`
 - 不要在页面里重复写基础下拉的浮动标签、选项映射和焦点态逻辑，优先使用 `OutlinedSelect`
 - 不要在页面里重复写基础日期控件的浮动标签、禁用日期和焦点态逻辑，优先使用 `OutlinedDatePicker`
@@ -87,6 +107,7 @@ import {
 - 不要在页面里重复写树形下拉选择的字段映射、浮动标签和清空逻辑，优先使用 `OutlinedTreeSelect`
 - 需要渐变色、图形工具时，优先使用统一导出的 `echarts`
 - 需要主题变量时，优先使用 `companyTokens`
+- 需要全局点击反馈时，优先使用已内置的 `Ripple` / `installRipple`，不要重复写 `v-ripple` 指令或按钮动画 DOM
 
 ## 维护组件库时
 

package/README.md

@@ -16,6 +16,29 @@ npm install @hbdlzy/ui
 
 ## 使用方式
 
+### 全局注册所有组件
+
+业务项目入口推荐这样接入，之后页面里可以直接写 `<BaseTable />`、`<BaseCard />`、`<OutlinedInput />` 等组件：
+
+```ts
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import 'element-plus/dist/index.css'
+import '@hbdlzy/ui/style.css'
+import HbdlUI from '@hbdlzy/ui'
+import App from './App.vue'
+
+createApp(App)
+  .use(ElementPlus, { locale: zhCn })
+  .use(HbdlUI)
+  .mount('#app')
+```
+
+### 按需导入
+
+页面或组合式函数里需要类型、工具或局部注册时，可以继续从统一入口导入：
+
 ```ts
 import '@hbdlzy/ui/style.css'
 
@@ -24,6 +47,7 @@ import {
   BaseCard,
   BaseEChart,
   BaseExportButton,
+  SvgIcon,
   OutlinedInput,
   OutlinedSelect,
   OutlinedDatePicker,
@@ -31,6 +55,7 @@ import {
   OutlinedTimePicker,
   OutlinedCascader,
   OutlinedTreeSelect,
+  Ripple,
   installRipple,
   uninstallRipple,
   companyTokens,
@@ -38,7 +63,25 @@ import {
 } from '@hbdlzy/ui'
 ```
 
-导入 `@hbdlzy/ui` 后会自动为项目里的按钮启用 ripple 效果，覆盖原生 `button`、Element Plus `el-button` 以及 radio/checkbox button 形态。局部不需要时，可在按钮或父级元素上添加 `data-hbdl-ripple="false"`。
+导入 `@hbdlzy/ui` 后会自动为项目里的按钮启用点击涟漪效果，覆盖原生 `button`、Element Plus `el-button` 以及 radio/checkbox button 形态。局部不需要时，可在按钮或父级元素上添加 `data-hbdl-ripple="false"`。
+
+## 全局点击涟漪
+
+推荐业务项目在入口统一导入：
+
+```ts
+import '@hbdlzy/ui'
+```
+
+需要显式控制安装时机时，也可以按 Vue 插件使用：
+
+```ts
+import { createApp } from 'vue'
+import { Ripple } from '@hbdlzy/ui/ripple'
+import App from './App.vue'
+
+createApp(App).use(Ripple).mount('#app')
+```
 
 ## 当前聚合内容
 
@@ -52,6 +95,7 @@ import {
 - `BaseCard`
 - `BaseEChart`
 - `BaseExportButton`
+- `SvgIcon`
 - `OutlinedInput`
 - `OutlinedSelect`
 - `OutlinedDatePicker`
@@ -62,6 +106,7 @@ import {
 - `echarts`
 - `exportExcel`
 - `companyTokens`
+- `Ripple`
 - `installRipple`
 - `uninstallRipple`
 
@@ -74,6 +119,7 @@ import {
 - `BaseCard` 文档：[../ui-core/src/components/BaseCard/README.md](../ui-core/src/components/BaseCard/README.md)
 - `BaseEChart` 文档：[../ui-core/src/components/BaseEChart/README.md](../ui-core/src/components/BaseEChart/README.md)
 - `BaseExportButton` 文档：[../ui-core/src/components/BaseExportButton/README.md](../ui-core/src/components/BaseExportButton/README.md)
+- `SvgIcon` 文档：[../ui-core/src/components/SvgIcon/README.md](../ui-core/src/components/SvgIcon/README.md)
 - `OutlinedInput` 文档：[../ui-core/src/components/OutlinedInput/README.md](../ui-core/src/components/OutlinedInput/README.md)
 - `OutlinedSelect` 文档：[../ui-core/src/components/OutlinedSelect/README.md](../ui-core/src/components/OutlinedSelect/README.md)
 - `OutlinedDatePicker` 文档：[../ui-core/src/components/OutlinedDatePicker/README.md](../ui-core/src/components/OutlinedDatePicker/README.md)
@@ -81,6 +127,7 @@ import {
 - `OutlinedTimePicker` 文档：[../ui-core/src/components/OutlinedTimePicker/README.md](../ui-core/src/components/OutlinedTimePicker/README.md)
 - `OutlinedCascader` 文档：[../ui-core/src/components/OutlinedCascader/README.md](../ui-core/src/components/OutlinedCascader/README.md)
 - `OutlinedTreeSelect` 文档：[../ui-core/src/components/OutlinedTreeSelect/README.md](../ui-core/src/components/OutlinedTreeSelect/README.md)
+- `Ripple` 文档：[../ui-core/src/ripple/README.md](../ui-core/src/ripple/README.md)
 
 ## AI 使用指令
 

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var n=require("@hbdlzy/tokens"),t=require("@hbdlzy/ui-core"),r=require("@hbdlzy/ui-energy");function u(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var o=u(n);const a="@hbdlzy/ui";Object.defineProperty(exports,"companyTokens",{enumerable:!0,get:function(){return n.companyTokens}});Object.defineProperty(exports,"defaultCompanyTokens",{enumerable:!0,get:function(){return o.default}});exports.uiPackageName=a;Object.keys(t).forEach(function(e){e!=="default"&&!exports.hasOwnProperty(e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return t[e]}})});Object.keys(r).forEach(function(e){e!=="default"&&!exports.hasOwnProperty(e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return r[e]}})});
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var n=require("@hbdlzy/tokens"),t=require("@hbdlzy/ui-core"),r=require("@hbdlzy/ui-energy");function u(e){return e&&typeof e=="object"&&"default"in e?e:{default:e}}var l=u(n),i=u(t);const f="@hbdlzy/ui";function a(e){e.use(i.default)}const o={install:a};Object.defineProperty(exports,"companyTokens",{enumerable:!0,get:function(){return n.companyTokens}});Object.defineProperty(exports,"defaultCompanyTokens",{enumerable:!0,get:function(){return l.default}});exports.HbdlUI=o;exports.default=o;exports.install=a;exports.uiPackageName=f;Object.keys(t).forEach(function(e){e!=="default"&&!exports.hasOwnProperty(e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return t[e]}})});Object.keys(r).forEach(function(e){e!=="default"&&!exports.hasOwnProperty(e)&&Object.defineProperty(exports,e,{enumerable:!0,get:function(){return r[e]}})});

package/dist/index.d.ts

@@ -1,6 +1,10 @@
+import type { App, Plugin } from 'vue';
 import '@hbdlzy/tokens';
 export { companyTokens } from '@hbdlzy/tokens';
 export { default as defaultCompanyTokens } from '@hbdlzy/tokens';
 export * from '@hbdlzy/ui-core';
 export * from '@hbdlzy/ui-energy';
 export declare const uiPackageName = "@hbdlzy/ui";
+export declare function install(app: App): void;
+export declare const HbdlUI: Plugin;
+export default HbdlUI;

package/dist/index.js

@@ -1,5 +1,12 @@
 export { companyTokens, default as defaultCompanyTokens } from "@hbdlzy/tokens";
+import HbdlUICore__default from "@hbdlzy/ui-core";
 export * from "@hbdlzy/ui-core";
 export * from "@hbdlzy/ui-energy";
 const uiPackageName = "@hbdlzy/ui";
-export { uiPackageName };
+function install(app) {
+  app.use(HbdlUICore__default);
+}
+const HbdlUI = {
+  install
+};
+export { HbdlUI, HbdlUI as default, install, uiPackageName };

package/dist/ripple.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var e=require("@hbdlzy/ui-core/ripple");Object.defineProperty(exports,"Ripple",{enumerable:!0,get:function(){return e.Ripple}});Object.defineProperty(exports,"installRipple",{enumerable:!0,get:function(){return e.installRipple}});Object.defineProperty(exports,"uninstallRipple",{enumerable:!0,get:function(){return e.uninstallRipple}});

package/dist/ripple.d.ts

@@ -0,0 +1,2 @@
+export { Ripple, installRipple, uninstallRipple } from '@hbdlzy/ui-core/ripple';
+export type { RipplePlugin, RippleTeardown } from '@hbdlzy/ui-core/ripple';

package/dist/ripple.js

@@ -0,0 +1 @@
+export { Ripple, installRipple, uninstallRipple } from "@hbdlzy/ui-core/ripple";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hbdlzy/ui",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Company unified UI entry package.",
   "license": "MIT",
   "repository": {
@@ -17,10 +17,25 @@
       "require": "./dist/index.cjs",
       "types": "./dist/index.d.ts"
     },
+    "./ripple": {
+      "import": "./dist/ripple.js",
+      "require": "./dist/ripple.cjs",
+      "types": "./dist/ripple.d.ts"
+    },
     "./style.css": "./src/style.css",
     "./dist/style.css": "./src/style.css",
     "./package.manifest.json": "./package.manifest.json"
   },
+  "typesVersions": {
+    "*": {
+      "ripple": [
+        "dist/ripple.d.ts"
+      ],
+      "package.manifest.json": [
+        "package.manifest.json"
+      ]
+    }
+  },
   "files": [
     "dist",
     "src",
@@ -30,7 +45,7 @@
   ],
   "dependencies": {
     "@hbdlzy/tokens": "0.1.2",
-    "@hbdlzy/ui-core": "0.1.6",
+    "@hbdlzy/ui-core": "0.1.8",
     "@hbdlzy/ui-energy": "0.1.2"
   },
   "peerDependencies": {
@@ -48,7 +63,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "scripts": {
-    "build": "vite build && pnpm run build:types",
+    "build": "vite build && vite build --config vite.ripple.config.ts && pnpm run build:types",
     "build:types": "vue-tsc -p tsconfig.build.json --declaration --emitDeclarationOnly"
   }
 }

package/package.manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "@hbdlzy/ui",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "entry": "@hbdlzy/ui",
   "readme": "README.md",
   "aiGuide": "AI-USAGE.md",
@@ -11,6 +11,12 @@
     "@hbdlzy/ui-energy"
   ],
   "description": "Unified install entry for company UI packages.",
+  "plugin": {
+    "name": "HbdlUI",
+    "importName": "default",
+    "entry": "@hbdlzy/ui",
+    "description": "Vue 插件入口，调用 app.use(HbdlUI) 可全局注册当前组件库已有组件并启用全局点击涟漪。"
+  },
   "exports": {
     "components": [
       {
@@ -37,6 +43,12 @@
         "importName": "BaseExportButton",
         "docs": "../ui-core/src/components/BaseExportButton/README.md"
       },
+      {
+        "name": "SvgIcon",
+        "from": "@hbdlzy/ui-core",
+        "importName": "SvgIcon",
+        "docs": "../ui-core/src/components/SvgIcon/README.md"
+      },
       {
         "name": "OutlinedInput",
         "from": "@hbdlzy/ui-core",
@@ -99,17 +111,23 @@
         "importName": "companyTokens",
         "docs": "../tokens/README.md"
       },
+      {
+        "name": "Ripple",
+        "from": "@hbdlzy/ui-core",
+        "importName": "Ripple",
+        "docs": "../ui-core/src/ripple/README.md"
+      },
       {
         "name": "installRipple",
         "from": "@hbdlzy/ui-core",
         "importName": "installRipple",
-        "docs": "../ui-core/README.md"
+        "docs": "../ui-core/src/ripple/README.md"
       },
       {
         "name": "uninstallRipple",
         "from": "@hbdlzy/ui-core",
         "importName": "uninstallRipple",
-        "docs": "../ui-core/README.md"
+        "docs": "../ui-core/src/ripple/README.md"
       }
     ]
   },
@@ -136,10 +154,12 @@
     "AI-USAGE.md",
     "../ui-core/components.manifest.json",
     "../ui-core/README.md",
+    "../ui-core/src/ripple/README.md",
     "../ui-core/src/components/BaseTable/README.md",
     "../ui-core/src/components/BaseCard/README.md",
     "../ui-core/src/components/BaseEChart/README.md",
     "../ui-core/src/components/BaseExportButton/README.md",
+    "../ui-core/src/components/SvgIcon/README.md",
     "../ui-core/src/components/OutlinedInput/README.md",
     "../ui-core/src/components/OutlinedSelect/README.md",
     "../ui-core/src/components/OutlinedDatePicker/README.md",

package/src/index.ts

@@ -1,4 +1,6 @@
+import type { App, Plugin } from 'vue'
 import '@hbdlzy/tokens'
+import HbdlUICore from '@hbdlzy/ui-core'
 
 export { companyTokens } from '@hbdlzy/tokens'
 export { default as defaultCompanyTokens } from '@hbdlzy/tokens'
@@ -6,3 +8,13 @@ export * from '@hbdlzy/ui-core'
 export * from '@hbdlzy/ui-energy'
 
 export const uiPackageName = '@hbdlzy/ui'
+
+export function install(app: App) {
+  app.use(HbdlUICore)
+}
+
+export const HbdlUI: Plugin = {
+  install
+}
+
+export default HbdlUI

package/src/ripple.ts

@@ -0,0 +1,2 @@
+export { Ripple, installRipple, uninstallRipple } from '@hbdlzy/ui-core/ripple'
+export type { RipplePlugin, RippleTeardown } from '@hbdlzy/ui-core/ripple'