@zl-ui-kit/components 0.3.3 → 0.4.0

package/README.md

@@ -56,6 +56,14 @@ import { ZlFilePreview, ZlFileViewer } from '@zl-ui-kit/components/file-preview'
 > 例外：`ZlPdfViewer` 没有重型依赖，仍留在主入口，`import { ZlPdfViewer } from '@zl-ui-kit/components'`。
 > `app.use(ZlUI)` 全量注册**不含**上述子入口组件，需要的话手动 `app.component('ZlChart', ZlChart)`。
 
+**关于 `echarts` 版本**（`peerDependencies: "^5.6.0 || ^6.0.0"`，5.6+ 与 6.x 均支持）：
+
+- `ZlChart` 内部是 `import * as echarts from 'echarts'`（全量包，开箱即用、无需自己 `use()` 注册图表类型）；
+  若宿主用 `echarts/core` + 按需注册，两者是两份独立实例，产物会同时含两份 echarts（实测约 +600KB）。
+  此时可按需改用宿主实例自绘，或在构建里把 `echarts` 设为 external 由宿主提供。
+- 升级到 **echarts 6** 后默认主题变了（配色、legend 默认挪到画布底部、轴标签防溢出默认开启），
+  想保持 v5 观感：`import 'echarts/theme/v5'` + `<ZlChart theme="v5" ... />`（`theme` prop 见 §6 ⑧）。
+
 接入：
 
 ```ts
@@ -445,6 +453,13 @@ const chartOption = computed(() => {
 <ZlChart v-bind="chartOption" />
 ```
 
+| Prop | 类型 | 说明 |
+| --- | --- | --- |
+| `series` | `object \| object[]` | 系列（单个或数组）；其余 option 字段经 attrs 透传 |
+| `theme` | `string` | 主题名，initialize 时指定。需先注册，如 `import 'echarts/theme/v5'` 后传 `theme="v5"`；echarts 6 想保留 v5 观感时用 |
+
+> 暴露方法：`clear()`（模板 ref 调用）。尺寸自适应由 `useResizeObserver` 负责，容器需有明确高度。
+
 #### ⑨ `useRequest` 生命周期面板
 ```ts
 const req = useRequest(getResourcePageMaybeFail, { defaultParams: [{ pageNum: 1, pageSize: 5 }] })

package/dist/components/ZlChart/index.vue.d.ts

@@ -1,6 +1,8 @@
 type __VLS_Props = {
     /** 系列（单对象或数组）；其余图表配置经 attrs 透传（title/xAxis/yAxis/tooltip 等，可用 src/utils/echarts 工具构造） */
     series?: Record<string, any> | Array<Record<string, any>>;
+    /** 主题名：先 `import 'echarts/theme/v5'` 之类注册主题，再传 `theme="v5"`。升级到 echarts 6 后想保持 v5 观感时用 */
+    theme?: string;
 };
 declare function clear(): void;
 declare const _default: import('vue').DefineComponent<__VLS_Props, {

package/dist/components/ZlChart/index.vue.mjs

@@ -1,41 +1,44 @@
-import { defineComponent as m, useAttrs as v, computed as h, shallowRef as d, ref as _, watch as x, onMounted as k, onScopeDispose as w, openBlock as R, createElementBlock as y, nextTick as o } from "vue";
+import { defineComponent as v, useAttrs as h, computed as d, shallowRef as _, ref as x, watch as c, onMounted as k, onScopeDispose as w, openBlock as R, createElementBlock as y, nextTick as i } from "vue";
 import { useResizeObserver as z } from "@vueuse/core";
 import * as O from "echarts";
-const C = /* @__PURE__ */ m({
+const C = /* @__PURE__ */ v({
   name: "ZlChart",
   inheritAttrs: !1,
   __name: "index",
   props: {
-    series: {}
+    series: {},
+    theme: {}
   },
-  setup(a, { expose: c }) {
-    const i = a, l = v(), s = h(() => {
-      const { series: f, ...n } = l;
+  setup(l, { expose: u }) {
+    const s = l, p = h(), r = d(() => {
+      const { series: m, ...a } = p;
       return {
-        ...n,
-        series: [].concat(i.series ?? [])
+        ...a,
+        series: [].concat(s.series ?? [])
       };
-    }), e = d(), t = _();
-    async function r() {
-      await o(), e.value?.setOption(s.value);
+    }), e = _(), t = x();
+    async function n() {
+      await i(), e.value?.setOption(r.value);
     }
-    async function u() {
-      await o(), t.value && (e.value = O.init(t.value), r());
+    async function o() {
+      await i(), t.value && (e.value = O.init(t.value, s.theme), n());
     }
-    function p() {
+    function f() {
       e.value?.clear();
     }
     return z(t, () => {
       e.value?.resize();
-    }), x(() => s.value, () => {
-      r();
+    }), c(() => r.value, () => {
+      n();
+    }), c(() => s.theme, () => {
+      e.value?.dispose(), e.value = void 0, o();
     }), k(() => {
-      u();
+      o();
     }), w(() => {
       e.value?.dispose();
-    }), c({
-      clear: p
-    }), (f, n) => (R(), y("div", {
+    }), u({
+      clear: f
+    }), (m, a) => (R(), y("div", {
       ref_key: "chartRef",
       ref: t,
       class: "zl-chart"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zl-ui-kit/components",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "type": "module",
   "description": "ZL UI 业务组件库（Element Plus 体系，Zl 前缀）——首批：Icon/AutoTooltip/Tag/CornerTag/Text/Title/Copy/Empty/Pagination/DictTag",
   "license": "MIT",
@@ -39,9 +39,9 @@
     "file-type": "^20.4.1",
     "dt-sql-parser": "^4.3.1",
     "sql-formatter": "^15.4.2",
-    "@zl-ui-kit/composables": "0.3.3",
-    "@zl-ui-kit/utils": "0.3.3",
-    "@zl-ui-kit/icons": "0.3.3"
+    "@zl-ui-kit/icons": "0.4.0",
+    "@zl-ui-kit/utils": "0.4.0",
+    "@zl-ui-kit/composables": "0.4.0"
   },
   "peerDependencies": {
     "@vueuse/core": "^12.3.0",
@@ -52,7 +52,7 @@
     "@vue-office/excel": "1.7.14",
     "@vue-office/pdf": "^2.0.10",
     "@vue-office/pptx": "1.0.1",
-    "echarts": "^5.6.0"
+    "echarts": "^5.6.0 || ^6.0.0"
   },
   "peerDependenciesMeta": {
     "monaco-editor": {
@@ -98,10 +98,10 @@
     "@vue-office/pdf": "^2.0.10",
     "@vue-office/pptx": "1.0.1",
     "echarts": "^5.6.0",
-    "@jichuang/vite-config": "1.0.0",
     "@jichuang/tsconfig": "1.0.0",
     "@jichuang/eslint-config": "1.0.0",
-    "@zl-ui-kit/theme": "0.3.3"
+    "@jichuang/vite-config": "1.0.0",
+    "@zl-ui-kit/theme": "0.4.0"
   },
   "repository": {
     "type": "git",