@zl-ui-kit/components 0.12.0 → 0.14.0
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 +235 -50
- package/dist/components/ZlPageContainer/index.css +1 -0
- package/dist/components/{ZlPageHeader → ZlPageContainer}/index.vue.d.ts +6 -1
- package/dist/components/{ZlPageHeader → ZlPageContainer}/index.vue.mjs +2 -2
- package/dist/components/ZlPageContainer/index2.vue.mjs +53 -0
- package/dist/components/ZlStep/index.css +1 -0
- package/dist/components/ZlStep/index.vue.d.ts +73 -0
- package/dist/components/ZlStep/index.vue.mjs +8 -0
- package/dist/components/ZlStep/index2.vue.mjs +91 -0
- package/dist/components/ZlTreeSelect/index.css +1 -1
- package/dist/components/ZlTreeSelect/index.vue.d.ts +22 -3
- package/dist/components/ZlTreeSelect/index.vue.mjs +2 -2
- package/dist/components/ZlTreeSelect/index2.vue.mjs +101 -40
- package/dist/index.d.ts +3 -1
- package/dist/index.mjs +83 -80
- package/package.json +6 -6
- package/dist/components/ZlPageHeader/index.css +0 -1
- package/dist/components/ZlPageHeader/index2.vue.mjs +0 -38
package/README.md
CHANGED
|
@@ -57,8 +57,10 @@ ZL UI 业务组件库 —— Element Plus 体系，`Zl` 前缀，56 个业务组
|
|
|
57
57
|
- [9. 文件与编辑](#9-文件与编辑)
|
|
58
58
|
- [9.1 `ZlEditor`：monaco worker 配置与首屏治理](#91-zleditormonaco-worker-配置与首屏治理)
|
|
59
59
|
- [10. 主题定制（@zl-ui-kit/theme）](#10-主题定制zl-ui-kittheme)
|
|
60
|
+
- [两种用法：用默认主题 / 覆盖默认主题](#两种用法用默认主题-覆盖默认主题)
|
|
60
61
|
- [L1 变量直覆（小幅微调）](#l1-变量直覆小幅微调)
|
|
61
62
|
- [L2 运行时定义主题（换肤/多租户推荐）](#l2-运行时定义主题换肤多租户推荐)
|
|
63
|
+
- [色阶契约（`light-n` / `dark-2`）](#色阶契约light-n-dark-2)
|
|
62
64
|
- [变量速查（改样式时最常用）](#变量速查改样式时最常用)
|
|
63
65
|
- [主题状态与 `useGlobalData().theme` 的关系（容易踩）](#主题状态与-useglobaldatatheme-的关系容易踩)
|
|
64
66
|
- [换肤不生效？按这个顺序查](#换肤不生效按这个顺序查)
|
|
@@ -289,7 +291,8 @@ setDictSource(async (key) => {
|
|
|
289
291
|
createApp(App).use(i18n).use(ElementPlus).use(ZlUI).use(router).mount('#app')
|
|
290
292
|
```
|
|
291
293
|
|
|
292
|
-
|
|
294
|
+
上面那行 `import '@zl-ui-kit/theme/themes.css'` 已经把**默认主题**带上了（内置 `light`）—— 不写任何主题代码就是它。
|
|
295
|
+
要切内置主题、或自定义主色/圆角（`setTheme` / `defineTheme` / `enableThemePersistence`），看 §2.3 与第 10 章。
|
|
293
296
|
|
|
294
297
|
#### 1.2.2 `App.vue`：根组件包一层 `ZlI18nProvider`
|
|
295
298
|
|
|
@@ -353,6 +356,7 @@ app.component('ZlChart', ZlChart) // 用到才注册，避免把 echarts 打进
|
|
|
353
356
|
| `ZlDictTag` 显示原始 value | 没 `setDictSource` 或 key 不匹配 | 应用入口注册数据源 |
|
|
354
357
|
| EP 分页、日期还是英文 | 没包 `ZlI18nProvider` 或没传 `elLocales` | 见 §13 |
|
|
355
358
|
| 主题切了但 EP 组件颜色不变 | 只引了 `theme/light` 单主题 CSS，且没调 `setTheme` | 见 §10 |
|
|
359
|
+
| 只有几个组件没跟着变色 | 页面或覆盖样式里写死了色值字面量，取色没单源 | 见 §10 排查清单第 7 条 |
|
|
356
360
|
|
|
357
361
|
---
|
|
358
362
|
|
|
@@ -400,25 +404,49 @@ playground 的界面按 **Element Plus 官网的信息架构**组织（顶栏 +
|
|
|
400
404
|
|
|
401
405
|
### 2.3 主题快速接入（宿主项目）
|
|
402
406
|
|
|
407
|
+
**用默认主题：只引一个 CSS，不写任何主题代码。**
|
|
408
|
+
|
|
403
409
|
```ts
|
|
404
|
-
// main.ts
|
|
405
|
-
import '
|
|
406
|
-
import
|
|
410
|
+
// main.ts —— 顺序不能倒：EP 样式在前、主题在后，否则会被 EP 默认值压掉
|
|
411
|
+
import 'element-plus/dist/index.css'
|
|
412
|
+
import '@zl-ui-kit/theme/themes.css' // 5 套内置主题全量；只要默认一套可换成 '@zl-ui-kit/theme/light'
|
|
413
|
+
```
|
|
414
|
+
|
|
415
|
+
引入即得到默认主题（内置 `light`）：主色 `#3B82F6`、hover `--el-color-primary-light-3`
|
|
416
|
+
`#76a8f9`、按下 `--el-color-primary-dark-2` `#2f68c5`、控件圆角 `--el-border-radius-base` `4px`。
|
|
417
|
+
业务组件（`--zl-*`）与 Element Plus 控件（`--el-*`）由同一套变量驱动，不会出现两套皮肤。
|
|
407
418
|
|
|
408
|
-
|
|
419
|
+
**要覆盖默认主题（切内置主题 / 自定义主色与圆角）：**
|
|
420
|
+
|
|
421
|
+
```ts
|
|
422
|
+
import { setTheme, defineTheme } from '@zl-ui-kit/theme'
|
|
423
|
+
|
|
424
|
+
setTheme('dark') // 1) 切到另一套内置主题：light / dark / red-light / red-dark / blue
|
|
425
|
+
|
|
426
|
+
// 2) 宿主自己的主题：声明要改的量，其余继承基线并自动派生色阶
|
|
427
|
+
defineTheme({
|
|
428
|
+
name: 'my-app',
|
|
429
|
+
base: 'light',
|
|
430
|
+
colors: { primary: '#1677ff' },
|
|
431
|
+
tokens: { 'radius-base': '2px' }, // 同时写 --el-border-radius-base，EP 控件跟着变
|
|
432
|
+
apply: true,
|
|
433
|
+
})
|
|
409
434
|
```
|
|
410
435
|
|
|
436
|
+
完整选型（L1 变量直覆 / L2 运行时定义 / L3 构建期生成）与宿主工程写法见 **§10 主题定制**；
|
|
437
|
+
可运行的实时版（含「当前实际生效值」读数）见 playground 的 `/theme` 页。
|
|
438
|
+
|
|
411
439
|
### 2.4 示例页面索引
|
|
412
440
|
|
|
413
441
|
| 路由 | 页面 | 覆盖内容 |
|
|
414
442
|
| ------------------------ | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
415
|
-
| `/guide` | 快速接入 | **宿主从零接入的 8 步清单**：安装 → `main.ts` 装配（i18n / 图标 / 字典 / 请求全局配置）→ `App.vue` 包 `ZlI18nProvider` →
|
|
443
|
+
| `/guide` | 快速接入 | **宿主从零接入的 8 步清单**：安装 → `main.ts` 装配（i18n / 图标 / 字典 / 请求全局配置）→ `App.vue` 包 `ZlI18nProvider` → 主题（默认一套 + 按需覆盖）→ 组件注册与「EP 必须能被按名解析」的坑 → 自检表「症状 → 原因」 |
|
|
416
444
|
| `/hooks` | Hooks 与工具 | `useGlobalData` / `useDict` / `useZlT` / `useGlobalMessage` / `createCacheComputed`，以及 `utils` 的 `convertArrayToTree` / `paginate` / `formatFilesize` / `formatNumber` / `getIndex` / `generateUUID` / `deepCopy`（全部可交互） |
|
|
417
445
|
| `/` | 组件总览 | 按功能分组的组件卡片，点击进入组件页（Element Plus 官网 overview 的组织方式） |
|
|
418
446
|
| `/component/:name` | 组件页 | 基础用法实时示例 + 用法示例 / 插槽用法代码块 + props / 事件 / 插槽 / 暴露方法表 + 上/下一页 |
|
|
419
447
|
| `/manual` | 接口手册 | 全量 API 检索，支持按 props 名 / 事件名反查组件，`?name=ZlTable` 直接定位 |
|
|
420
448
|
| `/icons` | 图标集 | 全量图标浏览/搜索，`zl:` 前缀渲染 |
|
|
421
|
-
| `/theme` | 主题工场 | 5
|
|
449
|
+
| `/theme` | 主题工场 | **默认主题零配置**（含从 `body` 实时读出的生效值）、5 套内置主题切换、L1/L2 覆盖与选层对照表、`defineTheme` 运行时自定义、不生效排查顺序 |
|
|
422
450
|
| `/gallery` | 组件陈列 | 56 个组件逐个渲染（用于批量截图与冒烟） |
|
|
423
451
|
| `/use-request` | useRequest 联调 | 用 Mock 模块驱动各数据型组件（见第 6 章） |
|
|
424
452
|
| `/examples/basic` | 通用展示示例 | ZlTitle/ZlTag/ZlCornerTag/ZlIcon/ZlText/ZlCopy/ZlAutoTooltip/ZlPagination/ZlEmpty |
|
|
@@ -1486,6 +1514,41 @@ const ZlEditor = defineAsyncComponent(() => import('@zl-ui-kit/components/editor
|
|
|
1486
1514
|
|
|
1487
1515
|
> 主题负责「视觉」的定义与覆盖；**「文案」的同等人格能力见第 13 章**（`createZlI18n`，与 `defineTheme` 对称）。
|
|
1488
1516
|
|
|
1517
|
+
### 两种用法：用默认主题 / 覆盖默认主题
|
|
1518
|
+
|
|
1519
|
+
主题默认就有一套能跑的 `light`，**宿主不写任何主题代码也能直接出效果**；要改再走覆盖。两个姿势：
|
|
1520
|
+
|
|
1521
|
+
**① 用默认主题（零配置）** —— 只引一个 CSS，顺序不能倒（先 EP、后主题，否则被 EP 自带默认值压掉）：
|
|
1522
|
+
|
|
1523
|
+
```ts
|
|
1524
|
+
// main.ts
|
|
1525
|
+
import 'element-plus/dist/index.css'
|
|
1526
|
+
import '@zl-ui-kit/theme/themes.css' // 一行都不用多写：组件与 Element Plus 控件已是同一套色
|
|
1527
|
+
```
|
|
1528
|
+
|
|
1529
|
+
开箱即得（`light` 基线实测值）：主色 `#3B82F6`、hover `#76a8f9`、按下 `#2f68c5`、控件圆角 `4px`；
|
|
1530
|
+
`setTheme('dark')` 就切到内置 dark，一共 5 套可选。持久化一行 `enableThemePersistence()`，组件内响应式 `useTheme()`。
|
|
1531
|
+
|
|
1532
|
+
**② 覆盖默认主题** —— 按「要改多少」选层，**并且收敛到宿主侧的一个文件**（库源码一行都不动）：
|
|
1533
|
+
|
|
1534
|
+
| 想改什么 | 走哪层 | 写在哪 |
|
|
1535
|
+
| -------------------------------- | ----------------------------- | ------------------------------------------ |
|
|
1536
|
+
| 一两个变量（主色 / 圆角 / 底色） | L1 变量直覆 | 全局样式里 `body { --zl-*: …; --el-*: … }` |
|
|
1537
|
+
| 整套品牌色、换肤、多租户 | L2 `defineTheme` + `setTheme` | `src/config/theme.ts` 一处，启动时调用 |
|
|
1538
|
+
| 要产出静态 CSS 产物（不依赖 JS） | L3 `themegen`（规划中） | 构建期 |
|
|
1539
|
+
|
|
1540
|
+
覆盖时的三条硬约定（每条都对应一次真实返工）：
|
|
1541
|
+
|
|
1542
|
+
1. **一处定义、不再回写**：页面与覆盖样式里一律写 `var(--el-color-primary)` / `var(--zl-*)`，不要留色值字面量，
|
|
1543
|
+
也不要再加「把主题色重新写回某个变量」的中间层 —— 否则会出现按钮跟主题、卡片跟旧皮肤的分裂（见排查清单第 7 条）。
|
|
1544
|
+
2. **两层要么都改、要么交给引擎联动**：EP 控件只读 `--el-*`。走 L2 时 `colors` / `tokens` 会同时派生 `--el-*` 与 `--zl-*`
|
|
1545
|
+
（含 `--el-border-radius-base`）；手写 L1 就得两边都写。
|
|
1546
|
+
3. **画布与独立文档不解析 `var()`**：ECharts 的 `colorStops` 只能拿「解析后的具体色值」（见下文色阶契约的 canvas 段），
|
|
1547
|
+
`window.open` + `document.write` 出去的弹窗是另一份文档、没有本页的变量级联，必须在写前把占位色替换掉。
|
|
1548
|
+
|
|
1549
|
+
> 两个姿势的可运行版都在 playground 的 **`/#/theme`** 页：默认态、L1 实时覆写、L2 自定义主题都能试，
|
|
1550
|
+
> 还有一块「当前实际生效值」直接读 `body` 上解析后的变量，用来确认「我到底覆赢了没有」。
|
|
1551
|
+
|
|
1489
1552
|
### L1 变量直覆（小幅微调）
|
|
1490
1553
|
|
|
1491
1554
|
```css
|
|
@@ -1508,29 +1571,71 @@ defineTheme({
|
|
|
1508
1571
|
})
|
|
1509
1572
|
setTheme('brand-purple')
|
|
1510
1573
|
enableThemePersistence() // 可选：localStorage 记住选择（key: zl-theme）
|
|
1511
|
-
const { theme, themes
|
|
1574
|
+
const { theme, themes } = useTheme() // 组件内响应式读（theme 只读，切换用上面的 setTheme）
|
|
1512
1575
|
```
|
|
1513
1576
|
|
|
1514
1577
|
自定义主题与内置主题变量完全同构，色阶派生算法与 EP theme-chalk 对齐，支持任意数量并存切换；`tokens` 参数可覆盖任意底层 token 深度定制（键 = `--zl-` 后面的部分，如 `{ 'radius-large': '10px' }`）。
|
|
1515
1578
|
|
|
1579
|
+
### 色阶契约（`light-n` / `dark-2`）
|
|
1580
|
+
|
|
1581
|
+
主色只需给一个 `colors.primary`，其余 10 级由下表公式派生。**权重方向是本包与 SCSS 内置 `mix()` 的
|
|
1582
|
+
差异点**：本包 `mix(c1, c2, w)` 的 `w` 是「混入 `c2` 的比例」，与 SCSS 相反，写反了会得到一堆不属于
|
|
1583
|
+
任何色阶的脏色（历史上 `dark-2` 就被反写成了 80% 黑，主色按钮按下去变黑块）。
|
|
1584
|
+
|
|
1585
|
+
| 变量 | 公式（浅色主题） | 公式（深色主题） | 语义 |
|
|
1586
|
+
| -------------------------- | ------------------------------ | ------------------------------ | ------------------------------------------ |
|
|
1587
|
+
| `--el-color-{s}-light-{n}` | `mix(背景白, 主色, (10-n)*10)` | `mix(背景黑, 主色, (10-n)*10)` | n 越大越靠近背景（`light-9` 常做选中底色） |
|
|
1588
|
+
| `--el-color-{s}-dark-2` | `mix(主色, 黑, 20)` | `mix(主色, 白, 20)` | 按下态 / 强调边框（EP 有 26 处引用） |
|
|
1589
|
+
|
|
1590
|
+
锚点值（EP 官方 `theme-chalk` 对默认主色 `#409eff` 的派生结果，可用于自检）：
|
|
1591
|
+
`light-3 = #79bbff`、`light-9 = #ecf5ff`、`dark-2 = #337ecc`。themegen 落盘前会断言这些方向与单调性，
|
|
1592
|
+
派生实现被改坏时 `pnpm --filter @zl-ui-kit/theme gen|build` 会直接失败。
|
|
1593
|
+
|
|
1594
|
+
**canvas 场景（ECharts 等）不解析 `var()`** —— 颜色是画进画布的，只能读「主题变量解析后的具体色值」。
|
|
1595
|
+
配合 `useTheme()` 的响应式主题名取色，换肤时图表才会跟着重算：
|
|
1596
|
+
|
|
1597
|
+
```ts
|
|
1598
|
+
import { useTheme } from '@zl-ui-kit/theme'
|
|
1599
|
+
const { theme } = useTheme()
|
|
1600
|
+
|
|
1601
|
+
/** 在 computed 里调用即自动建立响应依赖；变量落在 body 上，所以读 document.body */
|
|
1602
|
+
const themeVar = (name: string, fallback = ''): string => {
|
|
1603
|
+
void theme.value
|
|
1604
|
+
return getComputedStyle(document.body).getPropertyValue(name).trim() || fallback
|
|
1605
|
+
}
|
|
1606
|
+
|
|
1607
|
+
const barGradient = computed(() => ({
|
|
1608
|
+
type: 'linear',
|
|
1609
|
+
colorStops: [
|
|
1610
|
+
{ offset: 0, color: themeVar('--el-color-primary-light-9') },
|
|
1611
|
+
{ offset: 1, color: themeVar('--el-color-primary') }, // 不能写 'var(--el-color-primary)'
|
|
1612
|
+
],
|
|
1613
|
+
}))
|
|
1614
|
+
```
|
|
1615
|
+
|
|
1516
1616
|
### 变量速查（改样式时最常用）
|
|
1517
1617
|
|
|
1518
1618
|
全部 `--zl-*` 由 `packages/theme/src/generated/themes.css` 产出。宿主改视觉时优先改这些，不要改组件源码：
|
|
1519
1619
|
|
|
1520
|
-
| 分类 | 变量 | 说明
|
|
1521
|
-
| -------- | ------------------------------------------------------------------------------------ |
|
|
1522
|
-
| 底色 | `--zl-bg-1` ~ `--zl-bg-5` | 1 页面 / 2 容器卡片 / 3 浮层 / 4-5 更浅
|
|
1523
|
-
| 文本 | `--zl-text-1` ~ `--zl-text-4` | 主 / 常规 / 次要 / 占位与禁用
|
|
1524
|
-
| 边框 | `--zl-border-1` ~ `--zl-border-4` | 越深越强调（`-2` 是最常见的 1px 边框色）
|
|
1525
|
-
| 填充 | `--zl-fill-1` ~ `--zl-fill-4` | 表头 / hover / 选中 / 更重
|
|
1526
|
-
| 主色板 | `--zl-primary-1` ~ `--zl-primary-10` | 6 为主色，1 最浅（选中底），9 较深
|
|
1527
|
-
| 其它色板 | `--zl-{modo,link,success,warning,danger,error,purple,cyan,blue,...}-1..10` | 与 `--el-color-*` 双向联动
|
|
1528
|
-
| 形状 | `--zl-radius-{small,base,medium,large,xl,round}` | 2 / 4 / 4 / 6 / 12 / 99px
|
|
1529
|
-
| 字体 | `--zl-font-family-code` / `--zl-slogan-font-family` | 等宽（代码/日志）/ 品牌标语
|
|
1530
|
-
| 阴影 | `--zl-shadow` | 卡片投影色
|
|
1531
|
-
| 布局 | `--zl-layout-vertical-aside-bg` / `--zl-layout-horizontal-header-bg` / `--zl-menu-*` | 侧栏 / 顶栏渐变，菜单文字与 hover 底
|
|
1620
|
+
| 分类 | 变量 | 说明 |
|
|
1621
|
+
| -------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------ |
|
|
1622
|
+
| 底色 | `--zl-bg-1` ~ `--zl-bg-5` | 1 页面 / 2 容器卡片 / 3 浮层 / 4-5 更浅 |
|
|
1623
|
+
| 文本 | `--zl-text-1` ~ `--zl-text-4` | 主 / 常规 / 次要 / 占位与禁用 |
|
|
1624
|
+
| 边框 | `--zl-border-1` ~ `--zl-border-4` | 越深越强调（`-2` 是最常见的 1px 边框色） |
|
|
1625
|
+
| 填充 | `--zl-fill-1` ~ `--zl-fill-4` | 表头 / hover / 选中 / 更重 |
|
|
1626
|
+
| 主色板 | `--zl-primary-1` ~ `--zl-primary-10` | 6 为主色，1 最浅（选中底），9 较深 |
|
|
1627
|
+
| 其它色板 | `--zl-{modo,link,success,warning,danger,error,purple,cyan,blue,...}-1..10` | 与 `--el-color-*` 双向联动 |
|
|
1628
|
+
| 形状 | `--zl-radius-{small,base,medium,large,xl,round}` | 2 / 4 / 4 / 6 / 12 / 99px；`-base` / `-small` 同步产出 `--el-border-radius-base` / `-small`，EP 控件圆角一并跟着走 |
|
|
1629
|
+
| 字体 | `--zl-font-family-code` / `--zl-slogan-font-family` | 等宽（代码/日志）/ 品牌标语 |
|
|
1630
|
+
| 阴影 | `--zl-shadow` | 卡片投影色 |
|
|
1631
|
+
| 布局 | `--zl-layout-vertical-aside-bg` / `--zl-layout-horizontal-header-bg` / `--zl-menu-*` | 侧栏 / 顶栏渐变，菜单文字与 hover 底 |
|
|
1532
1632
|
|
|
1533
1633
|
> **形状 / 字体 token 自 `0.6.4` 起才真正产出。** 组件里一直写的是 `var(--zl-radius-large, 6px)` 这类带兜底的形式，此前这些 token 从未生成，等于「值被兜底写死、宿主改不了」。现在按兜底值原样产出 —— 视觉不变，但可在 `body` 上覆写，或经 `defineTheme({ tokens })` 定制。
|
|
1634
|
+
>
|
|
1635
|
+
> **`0.14.0` 起圆角进一步联动 EP 层**：`--zl-radius-base` / `--zl-radius-small` 会同时写成
|
|
1636
|
+
> `--el-border-radius-base` / `--el-border-radius-small`。宿主改圆角只需在 `defineTheme({ tokens })`
|
|
1637
|
+
> 里给一处，不必再用 `body .el-button { border-radius: … }` 这类高优先级选择器去抢 EP 的默认值 ——
|
|
1638
|
+
> 那种写法会随 EP 版本升级失守，且换肤时改不掉。
|
|
1534
1639
|
|
|
1535
1640
|
### 主题状态与 `useGlobalData().theme` 的关系（容易踩）
|
|
1536
1641
|
|
|
@@ -1557,6 +1662,10 @@ watch(theme, (value) => (g.theme.value = value), { immediate: true })
|
|
|
1557
1662
|
4. **`--zl-*` 与 `--el-*` 是否都改了**：EP 组件读 `--el-*`，只改 `--zl-*` 时 EP 自身组件不变（内置主题两层已联动，手写覆写要两边都写）。
|
|
1558
1663
|
5. **刷新后丢主题**：没调 `enableThemePersistence()`（storage: `zl-theme`）。
|
|
1559
1664
|
6. **自定义主题少了菜单/侧栏变量**：`0.6.4` 前 `defineTheme` 造的主题会漏 `--zl-menu-*` / `--zl-layout-*` 与 `--el-color-error`，升级即可。
|
|
1665
|
+
7. **只有几个组件没变色**：多半是页面或覆盖样式里写死了色值字面量。取色应单源 —— 主题层
|
|
1666
|
+
（`defineTheme`）定义一次，页面一律写 `var(--el-color-primary)` / `var(--zl-*)`，不要再加
|
|
1667
|
+
「回写层」；否则会出现按钮跟主题、卡片跟旧皮肤的分裂。图表配色见上文「色阶契约」的
|
|
1668
|
+
canvas 说明（既不能写 `var()`，也不该留字面量）。
|
|
1560
1669
|
|
|
1561
1670
|
### L3 构建时生成主题（深度定制，规划中）
|
|
1562
1671
|
|
|
@@ -3464,7 +3573,7 @@ const { i18n } = useLocale({ messages })
|
|
|
3464
3573
|
| [`ZlIconLabel`](#zliconlabel) | 主入口 | 1 | 1 | 1 | 0 |
|
|
3465
3574
|
| [`ZlCornerTag`](#zlcornertag) | 主入口 | 3 | 0 | 1 | 0 |
|
|
3466
3575
|
| [`ZlLayoutSwitch`](#zllayoutswitch) | 主入口 | 2 | 1 | 0 | 0 |
|
|
3467
|
-
| [`
|
|
3576
|
+
| [`ZlPageContainer`](#zlpagecontainer) | 主入口 | 3 | 0 | 4 | 0 |
|
|
3468
3577
|
| [`ZlPagination`](#zlpagination) | 主入口 | 4 | 3 | 0 | 0 |
|
|
3469
3578
|
| [`ZlPermission`](#zlpermission) | 主入口 | 1 | 0 | 1 | 0 |
|
|
3470
3579
|
| [`ZlPopconfirm`](#zlpopconfirm) | 主入口 | 4 | 2 | 3 | 0 |
|
|
@@ -3474,6 +3583,7 @@ const { i18n } = useLocale({ messages })
|
|
|
3474
3583
|
| [`ZlSection`](#zlsection) | 主入口 | 4 | 0 | 3 | 0 |
|
|
3475
3584
|
| [`ZlSorter`](#zlsorter) | 主入口 | 2 | 2 | 1 | 0 |
|
|
3476
3585
|
| [`ZlSorterList`](#zlsorterlist) | 主入口 | 2 | 1 | 0 | 0 |
|
|
3586
|
+
| [`ZlStep`](#zlstep) | 主入口 | 10 | 0 | 3 | 0 |
|
|
3477
3587
|
| [`ZlSwitch`](#zlswitch) | 主入口 | 8 | 2 | 2 | 0 |
|
|
3478
3588
|
| [`ZlTable`](#zltable) | 主入口 | 6 | 3 | 3 | 16 |
|
|
3479
3589
|
| [`ZlTabs`](#zltabs) | 主入口 | 5 | 1 | 3 | 0 |
|
|
@@ -3482,7 +3592,7 @@ const { i18n } = useLocale({ messages })
|
|
|
3482
3592
|
| [`ZlTitle`](#zltitle) | 主入口 | 5 | 0 | 3 | 0 |
|
|
3483
3593
|
| [`ZlUpload`](#zlupload) | 主入口 | 13 | 1 | 1 | 0 |
|
|
3484
3594
|
| [`ZlTree`](#zltree) | 主入口 | 10 | 2 | 5 | 23 |
|
|
3485
|
-
| [`ZlTreeSelect`](#zltreeselect) | 主入口 |
|
|
3595
|
+
| [`ZlTreeSelect`](#zltreeselect) | 主入口 | 10 | 1 | 0 | 0 |
|
|
3486
3596
|
| [`ZlChart`](#zlchart) | 子入口 chart | 2 | 0 | 0 | 1 |
|
|
3487
3597
|
| [`ZlEditor`](#zleditor) | 子入口 editor | 3 | 1 | 0 | 10 |
|
|
3488
3598
|
| [`ZlSqlEditor`](#zlsqleditor) | 子入口 editor | 4 | 1 | 0 | 3 |
|
|
@@ -4911,52 +5021,61 @@ import { ZlLayoutSwitch } from '@zl-ui-kit/components'
|
|
|
4911
5021
|
| ------------------- | ------------------- | -------------- |
|
|
4912
5022
|
| `update:modelValue` | `'grid' \| 'table'` | `v-model` 更新 |
|
|
4913
5023
|
|
|
4914
|
-
#### `
|
|
5024
|
+
#### `ZlPageContainer`
|
|
4915
5025
|
|
|
4916
|
-
<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/
|
|
5026
|
+
<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlPageContainer/index.vue`</sub>
|
|
4917
5027
|
|
|
4918
|
-
|
|
5028
|
+
**简介**：页面容器：占满父级高度的整页骨架，统一页面底色（浅灰）与内边距；顶部标题栏（标题 + 描述 + 右侧 extra 操作，无任何头部内容时自动隐藏），下方 content 插槽放页面主体内容
|
|
4919
5029
|
|
|
4920
|
-
**接口概览**：
|
|
5030
|
+
**接口概览**：3 props · 4 插槽
|
|
4921
5031
|
|
|
4922
5032
|
**用法示例**
|
|
4923
5033
|
|
|
4924
5034
|
```vue
|
|
4925
5035
|
<script setup lang="ts">
|
|
4926
|
-
import {
|
|
5036
|
+
import { ZlPageContainer } from '@zl-ui-kit/components'
|
|
4927
5037
|
</script>
|
|
4928
5038
|
|
|
4929
5039
|
<template>
|
|
4930
|
-
<
|
|
5040
|
+
<ZlPageContainer
|
|
5041
|
+
:title="hasHeader.value ? '数据加工管理' : undefined"
|
|
5042
|
+
:description="description"
|
|
5043
|
+
style="flex: 1; min-height: 0"
|
|
5044
|
+
/>
|
|
4931
5045
|
</template>
|
|
4932
5046
|
```
|
|
4933
5047
|
|
|
5048
|
+
> 示例中的 `title`、`description` 是数组 / 对象 / 函数等非字面量入参，由调用方提供数据；其余属性写法可直接照搬。
|
|
5049
|
+
|
|
4934
5050
|
**插槽用法**
|
|
4935
5051
|
|
|
4936
5052
|
```vue
|
|
4937
5053
|
<template>
|
|
4938
|
-
<
|
|
5054
|
+
<ZlPageContainer>
|
|
4939
5055
|
<template #title>…</template>
|
|
4940
5056
|
<template #description>…</template>
|
|
4941
5057
|
<template #extra>…</template>
|
|
4942
|
-
|
|
5058
|
+
<template #content>…</template>
|
|
5059
|
+
</ZlPageContainer>
|
|
4943
5060
|
</template>
|
|
4944
5061
|
```
|
|
4945
5062
|
|
|
4946
5063
|
**props**
|
|
4947
5064
|
|
|
4948
|
-
| 属性 | 类型
|
|
4949
|
-
| ------------- |
|
|
4950
|
-
| `title` | `string`
|
|
4951
|
-
| `description` | `string`
|
|
5065
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
5066
|
+
| ------------- | ------------------ | ------ | ---- | ---------------------- | ---------------------------------------------------------- |
|
|
5067
|
+
| `title` | `string` | — | 否 | `title="标题"` | 页头标题文案；可用 title 插槽覆盖 |
|
|
5068
|
+
| `description` | `string` | — | 否 | `description="副标题"` | 标题下方的描述文案；可用 description 插槽覆盖 |
|
|
5069
|
+
| `padding` | `number \| string` | `16` | 否 | `:padding="padding"` | 页面统一内边距，数字为 px、字符串原样用于 padding；默认 16 |
|
|
4952
5070
|
|
|
4953
5071
|
**插槽（slots）**
|
|
4954
5072
|
|
|
4955
|
-
| 插槽 | 作用域参数 | 示例 | 说明
|
|
4956
|
-
| ------------- | ---------- | ------------------------------------- |
|
|
4957
|
-
| `title` | — | `<template #title>…</template>` | 自定义标题内容，覆盖 title
|
|
4958
|
-
| `description` | — | `<template #description>…</template>` | 自定义描述内容，覆盖 description
|
|
4959
|
-
| `extra` | — | `<template #extra>…</template>` | 页头右侧自定义内容区（如新建、导出等操作按钮）
|
|
5073
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
5074
|
+
| ------------- | ---------- | ------------------------------------- | --------------------------------------------------------------------- |
|
|
5075
|
+
| `title` | — | `<template #title>…</template>` | 自定义标题内容，覆盖 title |
|
|
5076
|
+
| `description` | — | `<template #description>…</template>` | 自定义描述内容，覆盖 description |
|
|
5077
|
+
| `extra` | — | `<template #extra>…</template>` | 页头右侧自定义内容区（如新建、导出等操作按钮） |
|
|
5078
|
+
| `content` | — | `<template #content>…</template>` | 页面主体内容区，占满页头以下的剩余高度（如左列表 + 右详情的整块布局） |
|
|
4960
5079
|
|
|
4961
5080
|
#### `ZlPagination`
|
|
4962
5081
|
|
|
@@ -5416,6 +5535,63 @@ import { ZlSorterList } from '@zl-ui-kit/components'
|
|
|
5416
5535
|
| -------- | ------------------------------------- | -------------------------------------------------------------- |
|
|
5417
5536
|
| `change` | `Record<string, any>, string, string` | 某字段排序变化时触发，参数依次为整份排序对象、字段名、新排序值 |
|
|
5418
5537
|
|
|
5538
|
+
#### `ZlStep`
|
|
5539
|
+
|
|
5540
|
+
<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlStep/index.vue`</sub>
|
|
5541
|
+
|
|
5542
|
+
**简介**：步骤条：以 schema 描述各步骤，支持横向/纵向排列与标题、描述、图标级作用域插槽自定义； 封装 Element Plus el-steps，状态（finish/process/wait/error/success）随 current 自动推算，也可逐项覆盖
|
|
5543
|
+
|
|
5544
|
+
**接口概览**：10 props · 3 插槽
|
|
5545
|
+
|
|
5546
|
+
**用法示例**
|
|
5547
|
+
|
|
5548
|
+
```vue
|
|
5549
|
+
<script setup lang="ts">
|
|
5550
|
+
import { ZlStep } from '@zl-ui-kit/components'
|
|
5551
|
+
</script>
|
|
5552
|
+
|
|
5553
|
+
<template>
|
|
5554
|
+
<ZlStep :current="current.value" :direction="direction.value" />
|
|
5555
|
+
</template>
|
|
5556
|
+
```
|
|
5557
|
+
|
|
5558
|
+
> 示例中的 `current`、`direction` 是数组 / 对象 / 函数等非字面量入参，由调用方提供数据；其余属性写法可直接照搬。
|
|
5559
|
+
|
|
5560
|
+
**插槽用法**
|
|
5561
|
+
|
|
5562
|
+
```vue
|
|
5563
|
+
<template>
|
|
5564
|
+
<ZlStep>
|
|
5565
|
+
<template #title="{ item, index }">…</template>
|
|
5566
|
+
<template #description="{ item, index }">…</template>
|
|
5567
|
+
<template #icon="{ item, index }">…</template>
|
|
5568
|
+
</ZlStep>
|
|
5569
|
+
</template>
|
|
5570
|
+
```
|
|
5571
|
+
|
|
5572
|
+
**props**
|
|
5573
|
+
|
|
5574
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
5575
|
+
| --------------------- | --------------------------------------------------------- | -------------- | ---- | ---------------------------- | ------------------------------------------------------- |
|
|
5576
|
+
| `steps` | `StepItem[]` | `() => []` | 否 | `:steps="steps"` | 步骤列表，决定步骤数量、顺序与内容 |
|
|
5577
|
+
| `current` | `number` | `0` | 否 | `:current="1"` | 当前步骤下标（从 0 开始） |
|
|
5578
|
+
| `direction` | `'horizontal' \| 'vertical'` | `'horizontal'` | 否 | `direction="horizontal"` | 排列方向：横向或纵向 |
|
|
5579
|
+
| `processStatus` | `'process' \| 'finish' \| 'error'` | `'process'` | 否 | `process-status="process"` | 当前步骤呈现的状态 |
|
|
5580
|
+
| `finishStatus` | `'wait' \| 'process' \| 'finish' \| 'error' \| 'success'` | `'finish'` | 否 | `finish-status="wait"` | 已完成步骤呈现的状态 |
|
|
5581
|
+
| `showDescription` | `boolean` | `true` | 否 | `:show-description="false"` | 是否展示各步骤描述 |
|
|
5582
|
+
| `alignCenter` | `boolean` | `true` | 否 | `:align-center="false"` | 各步骤是否居中对齐（图标与标题/描述水平居中，默认居中） |
|
|
5583
|
+
| `space` | `number \| string` | — | 否 | `:space="space"` | 步骤条间距，数字为 px、字符串支持百分比；缺省自动均分 |
|
|
5584
|
+
| `titleFontSize` | `number` | — | 否 | `:title-font-size="1"` | 标题字号（px） |
|
|
5585
|
+
| `descriptionFontSize` | `number` | — | 否 | `:description-font-size="1"` | 描述字号（px） |
|
|
5586
|
+
|
|
5587
|
+
**插槽（slots）**
|
|
5588
|
+
|
|
5589
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
5590
|
+
| ------------- | ---------------- | ------------------------------------------------------- | -------------------------------------------------------------- |
|
|
5591
|
+
| `title` | `item` / `index` | `<template #title="{ item, index }">…</template>` | 自定义步骤标题，作用域参数 { item, index } |
|
|
5592
|
+
| `description` | `item` / `index` | `<template #description="{ item, index }">…</template>` | 自定义步骤描述，作用域参数 { item, index } |
|
|
5593
|
+
| `icon` | `item` / `index` | `<template #icon="{ item, index }">…</template>` | 自定义步骤图标，作用域参数 { item, index }；缺省渲染 item.icon |
|
|
5594
|
+
|
|
5419
5595
|
#### `ZlSwitch`
|
|
5420
5596
|
|
|
5421
5597
|
<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlSwitch/index.vue`</sub>
|
|
@@ -5944,7 +6120,7 @@ import { ZlTree } from '@zl-ui-kit/components'
|
|
|
5944
6120
|
|
|
5945
6121
|
<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlTreeSelect/index.vue`</sub>
|
|
5946
6122
|
|
|
5947
|
-
**接口概览**：
|
|
6123
|
+
**接口概览**：10 props · 1 事件
|
|
5948
6124
|
|
|
5949
6125
|
**用法示例**
|
|
5950
6126
|
|
|
@@ -5954,22 +6130,31 @@ import { ZlTreeSelect } from '@zl-ui-kit/components'
|
|
|
5954
6130
|
</script>
|
|
5955
6131
|
|
|
5956
6132
|
<template>
|
|
5957
|
-
<ZlTreeSelect
|
|
6133
|
+
<ZlTreeSelect
|
|
6134
|
+
:multiple="multiple.value"
|
|
6135
|
+
:origin-tree-data="treeData"
|
|
6136
|
+
placeholder="请选择"
|
|
6137
|
+
v-model="value"
|
|
6138
|
+
/>
|
|
5958
6139
|
</template>
|
|
5959
6140
|
```
|
|
5960
6141
|
|
|
5961
|
-
> 示例中的 `originTreeData` 是数组 / 对象 / 函数等非字面量入参，由调用方提供数据；其余属性写法可直接照搬。
|
|
6142
|
+
> 示例中的 `multiple`、`originTreeData` 是数组 / 对象 / 函数等非字面量入参，由调用方提供数据；其余属性写法可直接照搬。
|
|
5962
6143
|
|
|
5963
6144
|
**props**
|
|
5964
6145
|
|
|
5965
|
-
| 属性 | 类型
|
|
5966
|
-
| ------------------- |
|
|
5967
|
-
| `modelValue` | `any`
|
|
5968
|
-
| `originTreeData` | `any[]`
|
|
5969
|
-
| `allName` | `string`
|
|
5970
|
-
| `labelInValue` | `boolean`
|
|
5971
|
-
| `fieldNames` | `{ key?: string; title?: string; children?: string }`
|
|
5972
|
-
| `treeCheckStrictly` | `boolean`
|
|
6146
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
6147
|
+
| ------------------- | ---------------------------------------------------------------- | -------------------------------------------------------------- | ---- | --------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
|
|
6148
|
+
| `modelValue` | `any` | — | 否 | `v-model="value"` | 当前选中值：多选为键值数组（级联下含半选父键），单选为单个键值；labelInValue 时包成 {label,value} |
|
|
6149
|
+
| `originTreeData` | `any[]` | — | 是 | `:origin-tree-data="[]"` | 树数据 |
|
|
6150
|
+
| `allName` | `string` | — | 否 | `all-name="全部"` | "全部"节点名（启用全选控制条，仅多选模式生效） |
|
|
6151
|
+
| `labelInValue` | `boolean` | `false` | 否 | `label-in-value` | 返回 {label, value} 对象数组（缺省返回键值数组） |
|
|
6152
|
+
| `fieldNames` | `{ key?: string; title?: string; children?: string }` | `() => ({ key: 'key', title: 'title', children: 'children' })` | 否 | `:field-names="{}"` | 树节点键名、标题与子级字段映射 |
|
|
6153
|
+
| `treeCheckStrictly` | `boolean` | `false` | 否 | `tree-check-strictly` | 父子不关联（true 时取消级联：勾选/单选互不影响） |
|
|
6154
|
+
| `multiple` | `boolean` | `true` | 否 | `:multiple="false"` | 是否多选（默认 true）；true 时节点前渲染复选框并父子级联，false 时仅叶子节点可单选 |
|
|
6155
|
+
| `disabled` | `boolean \| Array<string \| number> \| ((data: any) => boolean)` | `undefined` | 否 | `:disabled="() => {}"` | 动态控制不可选项： - 布尔值：整体禁用下拉控件 - 键数组：禁用这些 key 对应的节点 - 函数：`(data) => boolean` 返回 true 的节点禁用 |
|
|
6156
|
+
| `showPath` | `boolean` | `true` | 否 | `:show-path="false"` | 选中后是否在输入框 / 标签里显示完整父级路径（默认 true，体现级联关系） |
|
|
6157
|
+
| `pathSeparator` | `string` | `' / '` | 否 | `path-separator="path-separator"` | 路径分隔符（showPath 生效时用） |
|
|
5973
6158
|
|
|
5974
6159
|
> 把 `$attrs` 透传给 `el-tree-select`，未列出的属性会继续下传
|
|
5975
6160
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.zl-page-container[data-v-4a47d884]{display:flex;flex-direction:column;box-sizing:border-box;height:100%;background-color:var(--zl-fill-2, #f0f2f7)}.zl-page-container__header[data-v-4a47d884]{display:flex;flex-shrink:0;gap:16px;align-items:center;margin-bottom:16px}.zl-page-container__main[data-v-4a47d884]{flex:1;min-width:0}.zl-page-container__title[data-v-4a47d884]{font-size:16px;font-weight:600;line-height:24px;color:var(--zl-text-1, #242e43)}.zl-page-container__description[data-v-4a47d884]{margin-top:2px;font-size:13px;line-height:20px;color:var(--zl-text-3, #79879c)}.zl-page-container__extra[data-v-4a47d884]{display:flex;flex-shrink:0;align-items:center;gap:8px}.zl-page-container__content[data-v-4a47d884]{flex:1;min-height:0;overflow:auto}
|
|
@@ -3,6 +3,8 @@ type __VLS_Props = {
|
|
|
3
3
|
title?: string;
|
|
4
4
|
/** 标题下方的描述文案；可用 description 插槽覆盖 */
|
|
5
5
|
description?: string;
|
|
6
|
+
/** 页面统一内边距，数字为 px、字符串原样用于 padding；默认 16 */
|
|
7
|
+
padding?: number | string;
|
|
6
8
|
};
|
|
7
9
|
declare function __VLS_template(): {
|
|
8
10
|
attrs: Partial<{}>;
|
|
@@ -10,12 +12,15 @@ declare function __VLS_template(): {
|
|
|
10
12
|
title?(_: {}): any;
|
|
11
13
|
description?(_: {}): any;
|
|
12
14
|
extra?(_: {}): any;
|
|
15
|
+
content?(_: {}): any;
|
|
13
16
|
};
|
|
14
17
|
refs: {};
|
|
15
18
|
rootEl: HTMLDivElement;
|
|
16
19
|
};
|
|
17
20
|
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
18
|
-
declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
21
|
+
declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
22
|
+
padding: number | string;
|
|
23
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
|
|
19
24
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
20
25
|
export default _default;
|
|
21
26
|
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./index2.vue.mjs";
|
|
2
2
|
import './index.css';/* empty css */
|
|
3
|
-
import
|
|
4
|
-
const m = /* @__PURE__ */
|
|
3
|
+
import t from "../../_virtual/_plugin-vue_export-helper.mjs";
|
|
4
|
+
const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-4a47d884"]]);
|
|
5
5
|
export {
|
|
6
6
|
m as default
|
|
7
7
|
};
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { defineComponent as p, computed as g, openBlock as n, createElementBlock as i, normalizeStyle as u, createElementVNode as a, renderSlot as o, createTextVNode as l, toDisplayString as r, createCommentVNode as d } from "vue";
|
|
2
|
+
const m = {
|
|
3
|
+
key: 0,
|
|
4
|
+
class: "zl-page-container__header"
|
|
5
|
+
}, _ = { class: "zl-page-container__main" }, v = { class: "zl-page-container__title" }, $ = {
|
|
6
|
+
key: 0,
|
|
7
|
+
class: "zl-page-container__description"
|
|
8
|
+
}, h = {
|
|
9
|
+
key: 0,
|
|
10
|
+
class: "zl-page-container__extra"
|
|
11
|
+
}, y = { class: "zl-page-container__content" }, k = /* @__PURE__ */ p({
|
|
12
|
+
name: "ZlPageContainer",
|
|
13
|
+
__name: "index",
|
|
14
|
+
props: {
|
|
15
|
+
title: {},
|
|
16
|
+
description: {},
|
|
17
|
+
padding: { default: 16 }
|
|
18
|
+
},
|
|
19
|
+
setup(t) {
|
|
20
|
+
const s = t, c = g(() => ({
|
|
21
|
+
padding: typeof s.padding == "number" ? `${s.padding}px` : s.padding
|
|
22
|
+
}));
|
|
23
|
+
return (e, z) => (n(), i("div", {
|
|
24
|
+
class: "zl-page-container",
|
|
25
|
+
style: u(c.value)
|
|
26
|
+
}, [
|
|
27
|
+
t.title || t.description || e.$slots.title || e.$slots.description || e.$slots.extra ? (n(), i("div", m, [
|
|
28
|
+
a("div", _, [
|
|
29
|
+
a("div", v, [
|
|
30
|
+
o(e.$slots, "title", {}, () => [
|
|
31
|
+
l(r(t.title), 1)
|
|
32
|
+
], !0)
|
|
33
|
+
]),
|
|
34
|
+
t.description || e.$slots.description ? (n(), i("div", $, [
|
|
35
|
+
o(e.$slots, "description", {}, () => [
|
|
36
|
+
l(r(t.description), 1)
|
|
37
|
+
], !0)
|
|
38
|
+
])) : d("", !0)
|
|
39
|
+
]),
|
|
40
|
+
e.$slots.extra ? (n(), i("div", h, [
|
|
41
|
+
o(e.$slots, "extra", {}, void 0, !0)
|
|
42
|
+
])) : d("", !0)
|
|
43
|
+
])) : d("", !0),
|
|
44
|
+
a("div", y, [
|
|
45
|
+
o(e.$slots, "content", {}, void 0, !0)
|
|
46
|
+
])
|
|
47
|
+
], 4));
|
|
48
|
+
}
|
|
49
|
+
});
|
|
50
|
+
export {
|
|
51
|
+
k as default
|
|
52
|
+
};
|
|
53
|
+
//# sourceMappingURL=index2.vue.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.zl-step[data-v-0fadba95]{width:100%}
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
export interface StepItem {
|
|
2
|
+
/** 步骤标题；可用 title 插槽覆盖 */
|
|
3
|
+
title?: string;
|
|
4
|
+
/** 步骤描述；可用 description 插槽覆盖 */
|
|
5
|
+
description?: string;
|
|
6
|
+
/** 步骤图标（图标名字符串，经 ZlIcon 渲染）；可用 icon 插槽覆盖 */
|
|
7
|
+
icon?: string;
|
|
8
|
+
/** 该步骤状态；缺省由 current 自动推算（finish/process/wait），显式指定则覆盖 */
|
|
9
|
+
status?: 'wait' | 'process' | 'finish' | 'error' | 'success';
|
|
10
|
+
/** 是否禁用该步骤 */
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
/** 透传给该步骤的其它属性 */
|
|
13
|
+
[key: string]: any;
|
|
14
|
+
}
|
|
15
|
+
type __VLS_Props = {
|
|
16
|
+
/** 步骤列表，决定步骤数量、顺序与内容 */
|
|
17
|
+
steps?: StepItem[];
|
|
18
|
+
/** 当前步骤下标（从 0 开始） */
|
|
19
|
+
current?: number;
|
|
20
|
+
/** 排列方向：横向或纵向 */
|
|
21
|
+
direction?: 'horizontal' | 'vertical';
|
|
22
|
+
/** 当前步骤呈现的状态 */
|
|
23
|
+
processStatus?: 'process' | 'finish' | 'error';
|
|
24
|
+
/** 已完成步骤呈现的状态 */
|
|
25
|
+
finishStatus?: 'wait' | 'process' | 'finish' | 'error' | 'success';
|
|
26
|
+
/** 是否展示各步骤描述 */
|
|
27
|
+
showDescription?: boolean;
|
|
28
|
+
/** 各步骤是否居中对齐（图标与标题/描述水平居中，默认居中） */
|
|
29
|
+
alignCenter?: boolean;
|
|
30
|
+
/** 步骤条间距，数字为 px、字符串支持百分比；缺省自动均分 */
|
|
31
|
+
space?: number | string;
|
|
32
|
+
/** 标题字号（px） */
|
|
33
|
+
titleFontSize?: number;
|
|
34
|
+
/** 描述字号（px） */
|
|
35
|
+
descriptionFontSize?: number;
|
|
36
|
+
};
|
|
37
|
+
declare function __VLS_template(): {
|
|
38
|
+
attrs: Partial<{}>;
|
|
39
|
+
slots: {
|
|
40
|
+
title?(_: {
|
|
41
|
+
item: StepItem;
|
|
42
|
+
index: number;
|
|
43
|
+
}): any;
|
|
44
|
+
description?(_: {
|
|
45
|
+
item: StepItem;
|
|
46
|
+
index: number;
|
|
47
|
+
}): any;
|
|
48
|
+
icon?(_: {
|
|
49
|
+
item: StepItem;
|
|
50
|
+
index: number;
|
|
51
|
+
}): any;
|
|
52
|
+
};
|
|
53
|
+
refs: {};
|
|
54
|
+
rootEl: any;
|
|
55
|
+
};
|
|
56
|
+
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
57
|
+
declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
58
|
+
steps: StepItem[];
|
|
59
|
+
current: number;
|
|
60
|
+
direction: "horizontal" | "vertical";
|
|
61
|
+
processStatus: "process" | "finish" | "error";
|
|
62
|
+
finishStatus: "wait" | "process" | "finish" | "error" | "success";
|
|
63
|
+
showDescription: boolean;
|
|
64
|
+
alignCenter: boolean;
|
|
65
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
66
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
67
|
+
export default _default;
|
|
68
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
69
|
+
new (): {
|
|
70
|
+
$slots: S;
|
|
71
|
+
};
|
|
72
|
+
};
|
|
73
|
+
//# sourceMappingURL=index.vue.d.ts.map
|