@zl-ui-kit/components 0.14.0 → 0.14.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -412,8 +412,8 @@ import 'element-plus/dist/index.css'
|
|
|
412
412
|
import '@zl-ui-kit/theme/themes.css' // 5 套内置主题全量；只要默认一套可换成 '@zl-ui-kit/theme/light'
|
|
413
413
|
```
|
|
414
414
|
|
|
415
|
-
引入即得到默认主题（内置 `light`）：主色 `#
|
|
416
|
-
`#
|
|
415
|
+
引入即得到默认主题（内置 `light`）：主色 `#3056D3`、hover `--el-color-primary-light-3`
|
|
416
|
+
`#6e89e0`、按下 `--el-color-primary-dark-2` `#2645a9`、控件圆角 `--el-border-radius-base` `4px`。
|
|
417
417
|
业务组件（`--zl-*`）与 Element Plus 控件（`--el-*`）由同一套变量驱动，不会出现两套皮肤。
|
|
418
418
|
|
|
419
419
|
**要覆盖默认主题（切内置主题 / 自定义主色与圆角）：**
|
|
@@ -1526,7 +1526,7 @@ import 'element-plus/dist/index.css'
|
|
|
1526
1526
|
import '@zl-ui-kit/theme/themes.css' // 一行都不用多写：组件与 Element Plus 控件已是同一套色
|
|
1527
1527
|
```
|
|
1528
1528
|
|
|
1529
|
-
开箱即得（`light` 基线实测值）：主色 `#
|
|
1529
|
+
开箱即得（`light` 基线实测值）：主色 `#3056D3`、hover `#6e89e0`、按下 `#2645a9`、控件圆角 `4px`；
|
|
1530
1530
|
`setTheme('dark')` 就切到内置 dark，一共 5 套可选。持久化一行 `enableThemePersistence()`，组件内响应式 `useTheme()`。
|
|
1531
1531
|
|
|
1532
1532
|
**② 覆盖默认主题** —— 按「要改多少」选层，**并且收敛到宿主侧的一个文件**（库源码一行都不动）：
|
|
@@ -5774,13 +5774,13 @@ import { ZlTabs } from '@zl-ui-kit/components'
|
|
|
5774
5774
|
|
|
5775
5775
|
**props**
|
|
5776
5776
|
|
|
5777
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
5778
|
-
| ------------ | ------------------ | ----------- | ---- | ------------------- |
|
|
5779
|
-
| `tabs` | `any[]` | `() => []` | 否 | `:tabs="[]"` | 页签配置列表，以 key 关联内容插槽
|
|
5780
|
-
| `modelValue` | `[String, Number]` | `undefined` | 否 | `v-model="value"` | 当前激活页签的 key，可用 v-model 双向绑定
|
|
5781
|
-
| `border` | `boolean` | `true` | 否 | `:border="false"` | 是否显示页签导航分隔线，默认显示
|
|
5782
|
-
| `fit` | `boolean` | — | 否 | `fit` | 是否撑满容器并让内容区滚动
|
|
5783
|
-
| `darkNav` | `boolean` | `true` | 否 | `:dark-nav="false"` |
|
|
5777
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
5778
|
+
| ------------ | ------------------ | ----------- | ---- | ------------------- | ------------------------------------------------------------------------ |
|
|
5779
|
+
| `tabs` | `any[]` | `() => []` | 否 | `:tabs="[]"` | 页签配置列表，以 key 关联内容插槽 |
|
|
5780
|
+
| `modelValue` | `[String, Number]` | `undefined` | 否 | `v-model="value"` | 当前激活页签的 key，可用 v-model 双向绑定 |
|
|
5781
|
+
| `border` | `boolean` | `true` | 否 | `:border="false"` | 是否显示页签导航分隔线，默认显示 |
|
|
5782
|
+
| `fit` | `boolean` | — | 否 | `fit` | 是否撑满容器并让内容区滚动 |
|
|
5783
|
+
| `darkNav` | `boolean` | `true` | 否 | `:dark-nav="false"` | 是否启用导航背景色（取主题卡片底色 `--zl-bg-2`，light 为白底），默认启用 |
|
|
5784
5784
|
|
|
5785
5785
|
> 选项式组件（`defineComponent`），props 定义在 `props: {}` 中
|
|
5786
5786
|
> 把 `$attrs` 透传给内部组件，未列出的属性会继续下传
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.zl-tabs-wrap{position:relative;width:100%}.zl-tabs-wrap>.zl-tabs__extra,.zl-tabs-wrap [slot=extra]{position:absolute;top:6px;right:12px;z-index:1}.zl-tabs{--nav-bg: var(--zl-
|
|
1
|
+
.zl-tabs-wrap{position:relative;width:100%}.zl-tabs-wrap>.zl-tabs__extra,.zl-tabs-wrap [slot=extra]{position:absolute;top:6px;right:12px;z-index:1}.zl-tabs{--nav-bg: var(--zl-bg-2, #fff)}.zl-tabs-dark-nav.zl-tabs>.el-tabs__header{background-color:var(--nav-bg);margin-bottom:0}.zl-tabs-no-border .el-tabs__nav-wrap:after{display:none}.zl-tabs-fit{height:100%;display:flex;flex-direction:column}.zl-tabs-fit .el-tabs__content{flex:1;overflow:auto}.zl-tabs .el-tabs__item{font-weight:400;font-size:12px;line-height:20px;padding:0 16px}.zl-tabs .el-tabs__item.is-active{font-weight:600;color:var(--zl-text-1, #242e43)}
|
|
@@ -12,6 +12,11 @@
|
|
|
12
12
|
* 里手写的裸函数没有上下文：EP 的 ElTabs / ElTabPane 在各自 render 里调用它时，
|
|
13
13
|
* Vue 会告警 `Slot "default" invoked outside of the render function`，且 slot 内的
|
|
14
14
|
* 响应式依赖不会被追踪（数据变了页签内容不更新）。withCtx 补齐上下文后与模板写法等价。
|
|
15
|
+
*
|
|
16
|
+
* 注意 3：`class` 必须经 mergeProps 合并，不能写成 `{ class: [...], ...attrs }`。
|
|
17
|
+
* 对象字面量后展开的 `attrs.class` 会整键覆盖前一个 `class`，调用方只要写了
|
|
18
|
+
* `class="xxx"`，内部的 `zl-tabs` / `zl-tabs-no-border` 等类就全丢，`border` 等开关随之失效
|
|
19
|
+
* （且无任何告警）。mergeProps 会把两边 class/style/事件合并成数组。
|
|
15
20
|
*/
|
|
16
21
|
declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
17
22
|
/** 页签配置列表，以 key 关联内容插槽 */
|
|
@@ -31,7 +36,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
31
36
|
};
|
|
32
37
|
/** 是否撑满容器并让内容区滚动 */
|
|
33
38
|
fit: BooleanConstructor;
|
|
34
|
-
/**
|
|
39
|
+
/** 是否启用导航背景色（取主题卡片底色 `--zl-bg-2`，light 为白底），默认启用 */
|
|
35
40
|
darkNav: {
|
|
36
41
|
type: BooleanConstructor;
|
|
37
42
|
default: boolean;
|
|
@@ -59,7 +64,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
59
64
|
};
|
|
60
65
|
/** 是否撑满容器并让内容区滚动 */
|
|
61
66
|
fit: BooleanConstructor;
|
|
62
|
-
/**
|
|
67
|
+
/** 是否启用导航背景色（取主题卡片底色 `--zl-bg-2`，light 为白底），默认启用 */
|
|
63
68
|
darkNav: {
|
|
64
69
|
type: BooleanConstructor;
|
|
65
70
|
default: boolean;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ElTabs as b, ElTabPane as p } from "element-plus";
|
|
2
|
-
import { defineComponent as c, getCurrentInstance as y, h as r, withCtx as
|
|
3
|
-
const
|
|
2
|
+
import { defineComponent as c, getCurrentInstance as y, h as r, mergeProps as z, withCtx as n, renderSlot as d } from "vue";
|
|
3
|
+
const g = c({
|
|
4
4
|
name: "ZlTabs",
|
|
5
5
|
inheritAttrs: !1,
|
|
6
6
|
props: {
|
|
@@ -12,7 +12,7 @@ const V = c({
|
|
|
12
12
|
border: { type: Boolean, default: !0 },
|
|
13
13
|
/** 是否撑满容器并让内容区滚动 */
|
|
14
14
|
fit: Boolean,
|
|
15
|
-
/**
|
|
15
|
+
/** 是否启用导航背景色（取主题卡片底色 `--zl-bg-2`，light 为白底），默认启用 */
|
|
16
16
|
darkNav: { type: Boolean, default: !0 }
|
|
17
17
|
},
|
|
18
18
|
emits: {
|
|
@@ -20,50 +20,54 @@ const V = c({
|
|
|
20
20
|
"update:modelValue": (e) => typeof e == "string" || typeof e == "number" || e === void 0
|
|
21
21
|
},
|
|
22
22
|
setup(e, { slots: a, attrs: u, emit: s }) {
|
|
23
|
-
const
|
|
23
|
+
const o = y();
|
|
24
24
|
return () => r("div", { class: "zl-tabs-wrap" }, [
|
|
25
25
|
r(
|
|
26
26
|
b,
|
|
27
|
+
z(
|
|
28
|
+
{
|
|
29
|
+
class: [
|
|
30
|
+
"zl-tabs",
|
|
31
|
+
{
|
|
32
|
+
"zl-tabs-no-border": !e.border,
|
|
33
|
+
"zl-tabs-fit": e.fit,
|
|
34
|
+
"zl-tabs-dark-nav": e.darkNav
|
|
35
|
+
}
|
|
36
|
+
]
|
|
37
|
+
},
|
|
38
|
+
u,
|
|
39
|
+
{
|
|
40
|
+
// 受控页签走显式契约（modelValue 已声明为 prop，不会落在 attrs 里）
|
|
41
|
+
modelValue: e.modelValue,
|
|
42
|
+
"onUpdate:modelValue": (t) => s("update:modelValue", t)
|
|
43
|
+
}
|
|
44
|
+
),
|
|
27
45
|
{
|
|
28
|
-
|
|
29
|
-
"zl-tabs",
|
|
30
|
-
{
|
|
31
|
-
"zl-tabs-no-border": !e.border,
|
|
32
|
-
"zl-tabs-fit": e.fit,
|
|
33
|
-
"zl-tabs-dark-nav": e.darkNav
|
|
34
|
-
}
|
|
35
|
-
],
|
|
36
|
-
...u,
|
|
37
|
-
// 受控页签走显式契约（modelValue 已声明为 prop，不会落在 attrs 里）
|
|
38
|
-
modelValue: e.modelValue,
|
|
39
|
-
"onUpdate:modelValue": (t) => s("update:modelValue", t)
|
|
40
|
-
},
|
|
41
|
-
{
|
|
42
|
-
default: o(
|
|
46
|
+
default: n(
|
|
43
47
|
() => [
|
|
44
48
|
...e.tabs.map((t) => {
|
|
45
|
-
const { key: l, title:
|
|
49
|
+
const { key: l, title: m, lazyLoad: f, ...i } = t;
|
|
46
50
|
return r(
|
|
47
51
|
p,
|
|
48
52
|
{
|
|
49
53
|
key: l,
|
|
50
54
|
name: l,
|
|
51
|
-
label:
|
|
55
|
+
label: m,
|
|
52
56
|
// 默认懒挂载；可用 tab 里的 `lazy: false` 或 arco 风 `lazyLoad: false` 覆盖
|
|
53
|
-
lazy:
|
|
54
|
-
...
|
|
57
|
+
lazy: f ?? !0,
|
|
58
|
+
...i
|
|
55
59
|
},
|
|
56
60
|
{
|
|
57
61
|
// 必须返回数组：ElTabPane 用 renderSlot 渲染内容，内部 ensureValidVNode
|
|
58
62
|
// 会对返回值调用 .some()，拿到单个 vnode 会直接抛 TypeError。
|
|
59
|
-
default:
|
|
63
|
+
default: n(() => [d(a, l, { tab: t })], o)
|
|
60
64
|
}
|
|
61
65
|
);
|
|
62
66
|
}),
|
|
63
67
|
// 追加在页签列表之后的内容（不在任何 ElTabPane 内）
|
|
64
68
|
d(a, "default")
|
|
65
69
|
],
|
|
66
|
-
|
|
70
|
+
o
|
|
67
71
|
)
|
|
68
72
|
}
|
|
69
73
|
),
|
|
@@ -73,6 +77,6 @@ const V = c({
|
|
|
73
77
|
}
|
|
74
78
|
});
|
|
75
79
|
export {
|
|
76
|
-
|
|
80
|
+
g as default
|
|
77
81
|
};
|
|
78
82
|
//# sourceMappingURL=index.vue.mjs.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zl-ui-kit/components",
|
|
3
|
-
"version": "0.14.
|
|
3
|
+
"version": "0.14.2",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "ZL UI 业务组件库（Element Plus 体系，Zl 前缀）——首批：Icon/AutoTooltip/Tag/CornerTag/Text/Title/Copy/Empty/Pagination/DictTag",
|
|
6
6
|
"license": "MIT",
|
|
@@ -39,9 +39,9 @@
|
|
|
39
39
|
"file-type": "^20.4.1",
|
|
40
40
|
"dt-sql-parser": "^4.3.1",
|
|
41
41
|
"sql-formatter": "^15.4.2",
|
|
42
|
-
"@zl-ui-kit/composables": "0.14.
|
|
43
|
-
"@zl-ui-kit/
|
|
44
|
-
"@zl-ui-kit/
|
|
42
|
+
"@zl-ui-kit/composables": "0.14.2",
|
|
43
|
+
"@zl-ui-kit/icons": "0.14.2",
|
|
44
|
+
"@zl-ui-kit/utils": "0.14.2"
|
|
45
45
|
},
|
|
46
46
|
"peerDependencies": {
|
|
47
47
|
"@vueuse/core": "^12.3.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
|
|
@@ -98,10 +98,10 @@
|
|
|
98
98
|
"@vue-office/pdf": "^2.0.10",
|
|
99
99
|
"@vue-office/pptx": "1.0.1",
|
|
100
100
|
"echarts": "^5.6.0",
|
|
101
|
-
"@
|
|
102
|
-
"@jichuang/vite-config": "1.0.0",
|
|
101
|
+
"@jichuang/tsconfig": "1.0.0",
|
|
103
102
|
"@jichuang/eslint-config": "1.0.0",
|
|
104
|
-
"@jichuang/
|
|
103
|
+
"@jichuang/vite-config": "1.0.0",
|
|
104
|
+
"@zl-ui-kit/theme": "0.14.2"
|
|
105
105
|
},
|
|
106
106
|
"repository": {
|
|
107
107
|
"type": "git",
|