@zl-ui-kit/components 0.14.4 → 0.15.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.
Files changed (9) hide show
  1. package/README.md +80 -41
  2. package/dist/components/ZlDictTag/index.vue.d.ts +8 -0
  3. package/dist/components/ZlDictTag/index.vue.mjs +21 -17
  4. package/dist/components/ZlTabs/index.vue.d.ts +2 -2
  5. package/dist/components/ZlTabs/index.vue.mjs +11 -11
  6. package/dist/components/ZlTag/ZlCornerTag.css +1 -1
  7. package/dist/components/ZlTag/ZlCornerTag.vue.d.ts +4 -1
  8. package/dist/components/ZlTag/ZlCornerTag.vue.mjs +14 -12
  9. package/package.json +7 -7
package/README.md CHANGED
@@ -627,7 +627,10 @@ presetIconifyIcon(icons)
627
627
  | `icon` / `iconColor` | 前置图标 |
628
628
  | `closable` / `rounded` | 可关闭 / 圆角 |
629
629
 
630
- `ZlCornerTag` 为四角定位标签，语义一致、定位展开为显式四类。
630
+ `ZlCornerTag` 为四角定位标签，语义一致、定位展开为显式四类；`variant` 分 `badge`（贴边小标签，默认）/
631
+ `ribbon`（斜跨角上的 45° 绶带，两端与容器边缘齐平、但整体与角点留白，靠 `clip-path` 裁切，不需要父级 `overflow: hidden`）。
632
+ 绶带的三支 CSS 变量：`--zl-corner-tag-ribbon-size`（正方形边长，默认 `76px`）/
633
+ `--zl-corner-tag-ribbon-gap`（与角点留白，默认 `12px`）/ `--zl-corner-tag-ribbon-width`（带宽度，默认 `28px`）。
631
634
 
632
635
  ### ZlCopy — 一键复制
633
636
 
@@ -668,6 +671,40 @@ presetIconifyIcon(icons)
668
671
  `color`（主题色名，如 `primary` / `success` / `warning` / `danger` / `gray`，不是 CSS 颜色值）；
669
672
  `type` 为旧写法兜底（`color` 优先，`info` 自动映射为 `gray`）。详见第 6.3 节 ⑤。
670
673
 
674
+ **风格一览**：同一套字典解析，四种外观。
675
+
676
+ | 形态 | 写法 | 说明 |
677
+ | ----------- | --------------------------------------- | ------------------------------------------------------------------------- |
678
+ | 基础标签 | `<ZlDictTag dict-key="k" :value="v" />` | 配色与图标取自字典项（`color`，旧写法 `type`，`info` → `gray`） |
679
+ | 精简标签 | `… simple` | 忽略字典项配色，回到标签默认样式 |
680
+ | 角标 badge | `… corner` / `corner="top-left"` | 贴边小标签，`corner` 指定方位，`true` 即右上角 |
681
+ | 绶带 ribbon | `… corner variant="ribbon"` | 斜跨在角上的 45° 绶带（如卡片右上角的「委托任务」），须与 `corner` 配合用 |
682
+
683
+ ```vue
684
+ <!-- ① 基础标签：配色 / 图标取自字典项 -->
685
+ <ZlDictTag dict-key="resourceType" :value="row.type" />
686
+
687
+ <!-- ② simple 精简：忽略字典项配色 -->
688
+ <ZlDictTag dict-key="resourceType" :value="row.type" simple />
689
+
690
+ <!-- ③ 角标 badge：贴边小标签，corner 指定方位（true = 右上角） -->
691
+ <div class="card" style="position: relative">
692
+ <ZlDictTag dict-key="taskType" :value="row.taskType" corner />
693
+ <ZlDictTag dict-key="taskType" :value="row.taskType" corner="top-left" />
694
+ </div>
695
+
696
+ <!-- ④ 绶带 ribbon：斜跨在角上，文案建议 ≤4 字 -->
697
+ <div class="card" style="position: relative">
698
+ <ZlDictTag dict-key="taskType" :value="row.taskType" corner variant="ribbon" />
699
+ </div>
700
+ ```
701
+
702
+ > 角标贴的是**父容器的角**：父级需 `position: relative`（卡片本身不是定位元素时要自己补一个），
703
+ > 圆角容器再加 `overflow: hidden`，避免角标压到圆角外的直角区域。`variant` 只在 `corner` 生效时起作用，四个角都支持；
704
+ > `ribbon` 的带两端与容器边缘齐平，但与角点留了一段距离（`--zl-corner-tag-ribbon-gap`，默认 `12px`），
705
+ > 尺寸与带宽度分别走 `--zl-corner-tag-ribbon-size`（默认 `76px`）/ `--zl-corner-tag-ribbon-width`（默认 `28px`）。
706
+ > 角标本体由 `ZlCornerTag` 提供，需要脱离字典单独用时直接写 `<ZlCornerTag variant="ribbon">委托任务</ZlCornerTag>`。
707
+
671
708
  ### ZlCard / ZlPagination — 卡片与分页的视觉约定
672
709
 
673
710
  `ZlCard` 的外观对齐设计稿（`DnCard`）：圆角 6px、轻阴影、右上角一张很淡的蓝紫渐变装饰底图。
@@ -3598,7 +3635,7 @@ const { i18n } = useLocale({ messages })
3598
3635
  | [`ZlCopy`](#zlcopy) | 主入口 | 2 | 0 | 2 | 0 |
3599
3636
  | [`ZlDescription`](#zldescription) | 主入口 | 5 | 0 | 1 | 0 |
3600
3637
  | [`ZlDialog`](#zldialog) | 主入口 | 6 | 1 | 2 | 0 |
3601
- | [`ZlDictTag`](#zldicttag) | 主入口 | 7 | 0 | 0 | 0 |
3638
+ | [`ZlDictTag`](#zldicttag) | 主入口 | 8 | 0 | 0 | 0 |
3602
3639
  | [`ZlDrawer`](#zldrawer) | 主入口 | 6 | 1 | 2 | 0 |
3603
3640
  | [`ZlDynamicComponent`](#zldynamiccomponent) | 主入口 | 3 | 2 | 0 | 0 |
3604
3641
  | [`ZlPdfViewer`](#zlpdfviewer) | 主入口 | 2 | 0 | 0 | 0 |
@@ -3614,7 +3651,7 @@ const { i18n } = useLocale({ messages })
3614
3651
  | [`ZlI18nProvider`](#zli18nprovider) | 主入口 | 0 | 0 | 1 | 0 |
3615
3652
  | [`ZlIconHover`](#zliconhover) | 主入口 | 0 | 0 | 0 | 0 |
3616
3653
  | [`ZlIconLabel`](#zliconlabel) | 主入口 | 1 | 1 | 1 | 0 |
3617
- | [`ZlCornerTag`](#zlcornertag) | 主入口 | 3 | 0 | 1 | 0 |
3654
+ | [`ZlCornerTag`](#zlcornertag) | 主入口 | 4 | 0 | 1 | 0 |
3618
3655
  | [`ZlLayoutSwitch`](#zllayoutswitch) | 主入口 | 2 | 1 | 0 | 0 |
3619
3656
  | [`ZlPageContainer`](#zlpagecontainer) | 主入口 | 3 | 0 | 4 | 0 |
3620
3657
  | [`ZlPagination`](#zlpagination) | 主入口 | 4 | 3 | 0 | 0 |
@@ -4337,7 +4374,7 @@ import { ZlDialog } from '@zl-ui-kit/components'
4337
4374
 
4338
4375
  <sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlDictTag/index.vue`</sub>
4339
4376
 
4340
- **接口概览**：7 props
4377
+ **接口概览**：8 props
4341
4378
 
4342
4379
  **用法示例**
4343
4380
 
@@ -4355,15 +4392,16 @@ import { ZlDictTag } from '@zl-ui-kit/components'
4355
4392
 
4356
4393
  **props**
4357
4394
 
4358
- | 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
4359
- | ------------- | ------------------------------------------------------------------------- | ----------- | ---- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
4360
- | `dictKey` | `string` | — | 是 | `dict-key="gender"` | 字典键（对应全局字典缓存的键；外部直传数据也以该键写入共享缓存）。 ⚠️ 直传 `dict` 会**覆盖全局同名 key**，不要在列表里逐行传不同的 `dict`（最后一行会污染全站）， 行级字典请用独立 key（如 `` `resourceType.${row.id}` ``）。 |
4361
- | `dict` | `DictItem[]` | — | 否 | `:dict="dict"` | 外部直传字典数据：无需依赖全局数据源即可翻译。格式同 `DictItem[]`（`{ label, value, icon?, color?, type? }`） |
4362
- | `corner` | `boolean \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `false` | 否 | `corner="top-left"` | 是否渲染成角标并指定方位，true 时为右上角 |
4363
- | `value` | `string` | — | 否 | `value="1"` | 待翻译的字典值，匹配不到时原样展示。 与字典项的 `value` 做**严格相等**比较，后端返回数字状态码时要先转成字符串 （`:value="String(row.status)"`，或在字典数据源里归一）。 |
4364
- | `simple` | `boolean` | — | 否 | `simple` | 忽略字典项自带的颜色，改用标签默认配色 |
4365
- | `iconVisible` | `boolean` | `undefined` | 否 | `icon-visible` | 是否展示字典项图标（默认 true） |
4366
- | `hideIcon` | `boolean` | `undefined` | 否 | `hide-icon` | 已废弃，请用 `iconVisible` 控制图标显隐 |
4395
+ | 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
4396
+ | ------------- | ------------------------------------------------------------------------- | ----------- | ---- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
4397
+ | `dictKey` | `string` | — | 是 | `dict-key="gender"` | 字典键（对应全局字典缓存的键；外部直传数据也以该键写入共享缓存）。 ⚠️ 直传 `dict` 会**覆盖全局同名 key**，不要在列表里逐行传不同的 `dict`（最后一行会污染全站）， 行级字典请用独立 key（如 `` `resourceType.${row.id}` ``）。 |
4398
+ | `dict` | `DictItem[]` | — | 否 | `:dict="dict"` | 外部直传字典数据：无需依赖全局数据源即可翻译。格式同 `DictItem[]`（`{ label, value, icon?, color?, type? }`） |
4399
+ | `corner` | `boolean \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `false` | 否 | `corner="top-left"` | 是否渲染成角标并指定方位，true 时为右上角 |
4400
+ | `variant` | `'badge' \| 'ribbon'` | `'badge'` | 否 | `variant="badge"` | 角标形态（`corner` 生效时才起作用）： `badge` 贴边小标签（默认）；`ribbon` 斜跨在角上的绶带（45° 文字，如卡片右上角的「委托任务」）。 绶带与角点留有间距、文案建议 ≤4 个字；尺寸/留白/带宽度走 CSS 变量 `--zl-corner-tag-ribbon-size` / `--zl-corner-tag-ribbon-gap` / `--zl-corner-tag-ribbon-width` |
4401
+ | `value` | `string` | — | 否 | `value="1"` | 待翻译的字典值，匹配不到时原样展示。 与字典项的 `value` 做**严格相等**比较，后端返回数字状态码时要先转成字符串 （`:value="String(row.status)"`，或在字典数据源里归一）。 |
4402
+ | `simple` | `boolean` | — | 否 | `simple` | 忽略字典项自带的颜色，改用标签默认配色 |
4403
+ | `iconVisible` | `boolean` | `undefined` | 否 | `icon-visible` | 是否展示字典项图标（默认 true） |
4404
+ | `hideIcon` | `boolean` | `undefined` | 否 | `hide-icon` | 已废弃，请用 `iconVisible` 控制图标显隐 |
4367
4405
 
4368
4406
  > 把 `$attrs` 透传给 `zl-corner-tag`，未列出的属性会继续下传
4369
4407
 
@@ -4991,9 +5029,9 @@ import { ZlIconLabel } from '@zl-ui-kit/components'
4991
5029
 
4992
5030
  <sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlTag/ZlCornerTag.vue`</sub>
4993
5031
 
4994
- **简介**：角落标签：贴在容器四个角（`position`），常用于「新」「热」等标记
5032
+ **简介**：角落标签：贴在容器四个角（`position`），常用于「新」「热」「任务类型」等标记。 形态由 `variant` 决定：`badge` 贴边小标签（默认）；`ribbon` 斜跨角上的 45° 绶带（用 `clip-path` 裁切，不需要父级 `overflow: hidden`）。
4995
5033
 
4996
- **接口概览**：3 props · 1 插槽
5034
+ **接口概览**：4 props · 1 插槽
4997
5035
 
4998
5036
  **用法示例**
4999
5037
 
@@ -5019,11 +5057,12 @@ import { ZlCornerTag } from '@zl-ui-kit/components'
5019
5057
 
5020
5058
  **props**
5021
5059
 
5022
- | 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
5023
- | ---------- | -------------------------------------------------------------- | ------------- | ---- | --------------------- | ------------------------------ |
5024
- | `icon` | `string` | — | 否 | `icon="zl:search"` | 文案前的图标名，走 ZlIcon 渲染 |
5025
- | `color` | `string` | — | 否 | `color="#409eff"` | 背景渐变的主色，取内置主题色名 |
5026
- | `position` | `'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `'top-right'` | 否 | `position="top-left"` | 贴在容器的哪个角，默认右上角 |
5060
+ | 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
5061
+ | ---------- | -------------------------------------------------------------- | ------------- | ---- | --------------------- | --------------------------------------------------------- |
5062
+ | `icon` | `string` | — | 否 | `icon="zl:search"` | 文案前的图标名，走 ZlIcon 渲染（ribbon 形态下不展示图标） |
5063
+ | `color` | `string` | — | 否 | `color="#409eff"` | 背景渐变的主色，取内置主题色名 |
5064
+ | `position` | `'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `'top-right'` | 否 | `position="top-left"` | 贴在容器的哪个角，默认右上角 |
5065
+ | `variant` | `'badge' \| 'ribbon'` | `'badge'` | 否 | `variant="badge"` | 形态：`badge` 贴边小标签（默认）/ `ribbon` 斜跨角上的绶带 |
5027
5066
 
5028
5067
  **插槽（slots）**
5029
5068
 
@@ -5817,13 +5856,13 @@ import { ZlTabs } from '@zl-ui-kit/components'
5817
5856
 
5818
5857
  **props**
5819
5858
 
5820
- | 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
5821
- | ------------ | ------------------ | ----------- | ---- | ------------------- | ------------------------------------------------------------------------ |
5822
- | `tabs` | `any[]` | `() => []` | 否 | `:tabs="[]"` | 页签配置列表，以 key 关联内容插槽 |
5823
- | `modelValue` | `[String, Number]` | `undefined` | 否 | `v-model="value"` | 当前激活页签的 key，可用 v-model 双向绑定 |
5824
- | `border` | `boolean` | `true` | 否 | `:border="false"` | 是否显示页签导航分隔线，默认显示 |
5825
- | `fit` | `boolean` | — | 否 | `fit` | 是否撑满容器并让内容区滚动 |
5826
- | `darkNav` | `boolean` | `true` | 否 | `:dark-nav="false"` | 是否启用导航背景色（取主题卡片底色 `--zl-bg-2`，light 为白底），默认启用 |
5859
+ | 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
5860
+ | ------------ | ------------------ | ----------- | ---- | ------------------- | ------------------------------------------------------------------------- |
5861
+ | `tabs` | `any[]` | `() => []` | 否 | `:tabs="[]"` | 页签配置列表，以 key 关联内容插槽 |
5862
+ | `modelValue` | `[String, Number]` | `undefined` | 否 | `v-model="value"` | 当前激活页签的 key，可用 v-model 双向绑定 |
5863
+ | `border` | `boolean` | `false` | 否 | `border` | 是否显示页签导航分隔线，默认不显示（需要导航下那条细线时显式传 `border`） |
5864
+ | `fit` | `boolean` | — | 否 | `fit` | 是否撑满容器并让内容区滚动 |
5865
+ | `darkNav` | `boolean` | `true` | 否 | `:dark-nav="false"` | 是否启用导航背景色（取主题卡片底色 `--zl-bg-2`，light 为白底），默认启用 |
5827
5866
 
5828
5867
  > 选项式组件（`defineComponent`），props 定义在 `props: {}` 中
5829
5868
  > 把 `$attrs` 透传给内部组件，未列出的属性会继续下传
@@ -5856,7 +5895,7 @@ import { ZlTag } from '@zl-ui-kit/components'
5856
5895
  </script>
5857
5896
 
5858
5897
  <template>
5859
- <ZlTag color="blue" bordered> blue 边框 </ZlTag>
5898
+ <ZlTag color="blue" fill> 隐私计算 </ZlTag>
5860
5899
  </template>
5861
5900
  ```
5862
5901
 
@@ -6657,19 +6696,19 @@ ZlGrid 子项 schema
6657
6696
 
6658
6697
  #### 与 Element Plus 不等价 / 需注意事项
6659
6698
 
6660
- | 组件 | 差异 | 迁移注意 |
6661
- | -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
6662
- | `ZlDrawer` | `width` 映射到内部 `size`（默认 `600`）；`destroy-on-close` **默认 `true`**（EP 默认 `false`）；自带底部取消 / 确定按钮区 | 抽屉内容**关闭即销毁**，内部状态不保留；需保留状态时显式传 `:destroy-on-close="false"` |
6663
- | `ZlForm` | `validate()` / `validateField()` 与 `el-form` **完全同语义**（成功 `resolve(true)`、失败 `reject(invalidFields)`、支持 callback）；暴露 `el-form` 的 8 项能力 + `elForm` | **仅 ≥ 0.10.0**：0.9.0 及更早成功时返回 `undefined`（签名为 `Promise<void>`），`const ok = await formRef.validate()` 判为 falsy；需 `el-form` 未暴露的方法时用 `formRef.elForm` |
6664
- | `ZlTable` | 列插槽按 `prop` 名命名，作用域含 `{ row, column, $index }`；暴露 `el-table` 的 15 个公开方法 + `elTable` getter | `tableRef.toggleRowSelection(row)` 等均有类型提示；其余方法走 `tableRef.elTable` |
6665
- | `ZlSwitch` | 主名 `checked-value` / `unchecked-value`，同时**兼容 EP 的 `active-value` / `inactive-value` 别名**（同传时主名优先）；`@change` 参数是**业务值**而非内部布尔 | 直搬 `:active-value="'1'"` 可用；从 `el-switch` 迁移时注意 `@change` 入参含义已变 |
6666
- | `ZlTabs` | schema 驱动：`tab.key`→`name`、`tab.title`→`label`；页签内容**默认懒挂载**（`lazy` / `lazyLoad` 默认 `true`）；内容写在以 key 命名的插槽里 | 需挂载时就初始化的页签要显式 `lazyLoad: false`；`type` / `tab-click` 等透传 `el-tabs` |
6667
- | `ZlIcon` | 单色图标：尺寸走 `size`（作用在 `font-size`），颜色走 `color` / `currentColor`；`spin` / `rotate` 等仅 `zl:` 前缀（iconify）分支生效 | 图标名未注册或拼错时**不报错、不告警、只渲染空白**；迁移前用 `@zl-ui-kit/icons` 核名（见 §4.1） |
6668
- | `ZlTree` | 勾选多选 / 字段映射 / 暴露方法的完整说明见 §7 › ZlTree | 从 `el-tree` 直搬时先核对 `node-key` 与字段映射 |
6669
- | `ZlEditor` / `ZlSqlEditor` | 暴露对象是 `Proxy`：§14 列的是显式能力，未列出的 monaco 原生 API 靠运行时下钻（旧行为，**不算契约**）；`ZlSqlEditor.validate()` 不通过时 **`throw diagnostics`** | 需要原生能力时用 `editorRef.value.monacoEditor`（SQL 编辑器用 `.zlEditor`）；`format()` 内部会先校验 |
6670
- | `ZlAppLayout` | 只声明 `layout`（`horizontal` / `vertical`）；插槽由同目录形态子组件定义（`footer` 仅 vertical，`logo` / `menu` 在 vertical 下带 `{ collapsed }`） | 菜单数据传给 `#menu` 里的 `ZlAppMenu`，**不要写 `:menus="…"` 给 `ZlAppLayout`**（未声明的 prop 会落到 DOM） |
6671
- | `ZlDictTag` | 字典项的 `type` 从 **0.10.1** 起参与上色（`color ?? type`，`info` → `gray`）；更早版本只读 `color`，传 `type` 一律默认配色 | 升级后原来“无色”的标签会变有色（预期修正，属视觉变更，需回归）；直传 `:dict` 会覆盖全局同名 `dictKey` 缓存 |
6672
- | 普通单选 / 复选框 | **有意不封装**：库内只有标签式的 `ZlRadioTag` / `ZlCheckboxTag` 与自带半选的 `ZlCheckAll` | `el-radio` / `el-checkbox` / `el-radio-group` / `el-checkbox-group` **继续用 `el-*`**，不要找 Zl 对应物；表头全选 / 半选场景可直接用 `ZlCheckAll` |
6699
+ | 组件 | 差异 | 迁移注意 |
6700
+ | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
6701
+ | `ZlDrawer` | `width` 映射到内部 `size`（默认 `600`）；`destroy-on-close` **默认 `true`**（EP 默认 `false`）；自带底部取消 / 确定按钮区 | 抽屉内容**关闭即销毁**，内部状态不保留；需保留状态时显式传 `:destroy-on-close="false"` |
6702
+ | `ZlForm` | `validate()` / `validateField()` 与 `el-form` **完全同语义**（成功 `resolve(true)`、失败 `reject(invalidFields)`、支持 callback）；暴露 `el-form` 的 8 项能力 + `elForm` | **仅 ≥ 0.10.0**：0.9.0 及更早成功时返回 `undefined`（签名为 `Promise<void>`），`const ok = await formRef.validate()` 判为 falsy；需 `el-form` 未暴露的方法时用 `formRef.elForm` |
6703
+ | `ZlTable` | 列插槽按 `prop` 名命名，作用域含 `{ row, column, $index }`；暴露 `el-table` 的 15 个公开方法 + `elTable` getter | `tableRef.toggleRowSelection(row)` 等均有类型提示；其余方法走 `tableRef.elTable` |
6704
+ | `ZlSwitch` | 主名 `checked-value` / `unchecked-value`，同时**兼容 EP 的 `active-value` / `inactive-value` 别名**（同传时主名优先）；`@change` 参数是**业务值**而非内部布尔 | 直搬 `:active-value="'1'"` 可用；从 `el-switch` 迁移时注意 `@change` 入参含义已变 |
6705
+ | `ZlTabs` | schema 驱动：`tab.key`→`name`、`tab.title`→`label`；页签内容**默认懒挂载**（`lazy` / `lazyLoad` 默认 `true`）；内容写在以 key 命名的插槽里；`border` **默认 `false`**（不显示导航下分隔线，与 EP 默认显示相反） | 需挂载时就初始化的页签要显式 `lazyLoad: false`；需要导航分隔线时显式传 `border`；`type` / `tab-click` 等透传 `el-tabs` |
6706
+ | `ZlIcon` | 单色图标：尺寸走 `size`（作用在 `font-size`），颜色走 `color` / `currentColor`；`spin` / `rotate` 等仅 `zl:` 前缀（iconify）分支生效 | 图标名未注册或拼错时**不报错、不告警、只渲染空白**；迁移前用 `@zl-ui-kit/icons` 核名（见 §4.1） |
6707
+ | `ZlTree` | 勾选多选 / 字段映射 / 暴露方法的完整说明见 §7 › ZlTree | 从 `el-tree` 直搬时先核对 `node-key` 与字段映射 |
6708
+ | `ZlEditor` / `ZlSqlEditor` | 暴露对象是 `Proxy`：§14 列的是显式能力，未列出的 monaco 原生 API 靠运行时下钻（旧行为，**不算契约**）；`ZlSqlEditor.validate()` 不通过时 **`throw diagnostics`** | 需要原生能力时用 `editorRef.value.monacoEditor`（SQL 编辑器用 `.zlEditor`）；`format()` 内部会先校验 |
6709
+ | `ZlAppLayout` | 只声明 `layout`（`horizontal` / `vertical`）；插槽由同目录形态子组件定义（`footer` 仅 vertical，`logo` / `menu` 在 vertical 下带 `{ collapsed }`） | 菜单数据传给 `#menu` 里的 `ZlAppMenu`，**不要写 `:menus="…"` 给 `ZlAppLayout`**（未声明的 prop 会落到 DOM） |
6710
+ | `ZlDictTag` | 字典项的 `type` 从 **0.10.1** 起参与上色（`color ?? type`，`info` → `gray`）；更早版本只读 `color`，传 `type` 一律默认配色 | 升级后原来“无色”的标签会变有色（预期修正，属视觉变更，需回归）；直传 `:dict` 会覆盖全局同名 `dictKey` 缓存 |
6711
+ | 普通单选 / 复选框 | **有意不封装**：库内只有标签式的 `ZlRadioTag` / `ZlCheckboxTag` 与自带半选的 `ZlCheckAll` | `el-radio` / `el-checkbox` / `el-radio-group` / `el-checkbox-group` **继续用 `el-*`**，不要找 Zl 对应物；表头全选 / 半选场景可直接用 `ZlCheckAll` |
6673
6712
 
6674
6713
  > 发现**文档与实现不一致**（包括本节未覆盖的组件）：先以源码与 playground 实跑为准，并在宿主侧登记；
6675
6714
  > 属组件缺陷的回到本仓库修复（优先把契约补齐到与 EP 等价），属文档错误的直接修正本文件与 §14。修复方向以“**不破坏已有写法**”为序。
package/dist/components/ZlDictTag/index.vue.d.ts CHANGED
@@ -10,6 +10,13 @@ type __VLS_Props = {
10
10
  dict?: DictItem[];
11
11
  /** 是否渲染成角标并指定方位，true 时为右上角 */
12
12
  corner?: boolean | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
13
+ /**
14
+ * 角标形态（`corner` 生效时才起作用）：
15
+ * `badge` 贴边小标签（默认）；`ribbon` 斜跨在角上的绶带（45° 文字，如卡片右上角的「委托任务」）。
16
+ * 绶带与角点留有间距、文案建议 ≤4 个字；尺寸/留白/带宽度走 CSS 变量
17
+ * `--zl-corner-tag-ribbon-size` / `--zl-corner-tag-ribbon-gap` / `--zl-corner-tag-ribbon-width`
18
+ */
19
+ variant?: 'badge' | 'ribbon';
13
20
  /**
14
21
  * 待翻译的字典值，匹配不到时原样展示。
15
22
  * 与字典项的 `value` 做**严格相等**比较，后端返回数字状态码时要先转成字符串
@@ -27,6 +34,7 @@ type __VLS_Props = {
27
34
  hideIcon?: boolean;
28
35
  };
29
36
  declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
37
+ variant: "badge" | "ribbon";
30
38
  corner: boolean | "top-left" | "top-right" | "bottom-left" | "bottom-right";
31
39
  iconVisible: boolean;
32
40
  hideIcon: boolean;
package/dist/components/ZlDictTag/index.vue.mjs CHANGED
@@ -1,8 +1,8 @@
1
- import { defineComponent as g, watch as _, computed as n, openBlock as l, createBlock as s, mergeProps as u, withCtx as d, createTextVNode as p, toDisplayString as f } from "vue";
2
- import { useDict as h, useDictStore as B } from "@zl-ui-kit/composables";
3
- import S from "../ZlTag/ZlCornerTag.vue.mjs";
1
+ import { defineComponent as g, watch as h, computed as n, openBlock as l, createBlock as s, mergeProps as u, withCtx as d, createTextVNode as v, toDisplayString as f } from "vue";
2
+ import { useDict as B, useDictStore as _ } from "@zl-ui-kit/composables";
3
+ import b from "../ZlTag/ZlCornerTag.vue.mjs";
4
4
  import '../ZlTag/index.css';import '../ZlTag/ZlCornerTag.css';/* empty css */
5
- import b from "../ZlTag/index.vue.mjs";
5
+ import S from "../ZlTag/index.vue.mjs";
6
6
  /* empty css */
7
7
  const I = /* @__PURE__ */ g({
8
8
  name: "ZlDictTag",
@@ -11,50 +11,54 @@ const I = /* @__PURE__ */ g({
11
11
  dictKey: {},
12
12
  dict: {},
13
13
  corner: { type: [Boolean, String], default: !1 },
14
+ variant: { default: "badge" },
14
15
  value: {},
15
16
  simple: { type: Boolean },
16
17
  iconVisible: { type: Boolean, default: void 0 },
17
18
  hideIcon: { type: Boolean, default: void 0 }
18
19
  },
19
20
  setup(i) {
20
- const t = i, m = h(t.dictKey, { data: t.dict });
21
- _(
21
+ const t = i, p = B(t.dictKey, { data: t.dict });
22
+ h(
22
23
  () => t.dict,
23
24
  (e) => {
24
25
  if (e?.length) {
25
- const { dictStore: o } = B();
26
+ const { dictStore: o } = _();
26
27
  o.value = { ...o.value, [t.dictKey]: e };
27
28
  }
28
29
  },
29
30
  { deep: !1 }
30
31
  );
31
- const r = n(() => m.value.find((e) => e.value === t.value)), v = { info: "gray" };
32
+ const a = n(() => p.value.find((e) => e.value === t.value)), m = { info: "gray" };
32
33
  function y(e) {
33
34
  const o = e.color ?? e.type;
34
35
  if (o)
35
- return v[o] ?? o;
36
+ return m[o] ?? o;
36
37
  }
37
- const a = n(() => {
38
- const e = r.value;
38
+ const r = n(() => {
39
+ const e = a.value;
39
40
  return e ? {
40
41
  color: t.simple ? void 0 : y(e),
41
42
  icon: t.iconVisible ?? !t.hideIcon ? e.icon : void 0
42
43
  } : {};
43
44
  }), c = n(() => t.corner === !0 ? "top-right" : t.corner);
44
- return (e, o) => c.value ? (l(), s(S, u({
45
+ return (e, o) => c.value ? (l(), s(b, u({
45
46
  key: 0,
46
47
  class: "zl-dict-corner-tag"
47
- }, { ...a.value, ...e.$attrs }, { position: c.value }), {
48
+ }, { ...r.value, ...e.$attrs }, {
49
+ position: c.value,
50
+ variant: i.variant
51
+ }), {
48
52
  default: d(() => [
49
- p(f(r.value?.label || i.value), 1)
53
+ v(f(a.value?.label || i.value), 1)
50
54
  ]),
51
55
  _: 1
52
- }, 16, ["position"])) : (l(), s(b, u({
56
+ }, 16, ["position", "variant"])) : (l(), s(S, u({
53
57
  key: 1,
54
58
  class: "zl-dict-tag"
55
- }, { ...a.value, ...e.$attrs }), {
59
+ }, { ...r.value, ...e.$attrs }), {
56
60
  default: d(() => [
57
- p(f(r.value?.label || i.value), 1)
61
+ v(f(a.value?.label || i.value), 1)
58
62
  ]),
59
63
  _: 1
60
64
  }, 16));
package/dist/components/ZlTabs/index.vue.d.ts CHANGED
@@ -29,7 +29,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
29
29
  type: (StringConstructor | NumberConstructor)[];
30
30
  default: undefined;
31
31
  };
32
- /** 是否显示页签导航分隔线，默认显示 */
32
+ /** 是否显示页签导航分隔线，默认不显示（需要导航下那条细线时显式传 `border`） */
33
33
  border: {
34
34
  type: BooleanConstructor;
35
35
  default: boolean;
@@ -57,7 +57,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
57
57
  type: (StringConstructor | NumberConstructor)[];
58
58
  default: undefined;
59
59
  };
60
- /** 是否显示页签导航分隔线，默认显示 */
60
+ /** 是否显示页签导航分隔线，默认不显示（需要导航下那条细线时显式传 `border`） */
61
61
  border: {
62
62
  type: BooleanConstructor;
63
63
  default: boolean;
package/dist/components/ZlTabs/index.vue.mjs CHANGED
@@ -8,8 +8,8 @@ const g = c({
8
8
  tabs: { type: Array, default: () => [] },
9
9
  /** 当前激活页签的 key，可用 v-model 双向绑定 */
10
10
  modelValue: { type: [String, Number], default: void 0 },
11
- /** 是否显示页签导航分隔线，默认显示 */
12
- border: { type: Boolean, default: !0 },
11
+ /** 是否显示页签导航分隔线，默认不显示（需要导航下那条细线时显式传 `border`） */
12
+ border: { type: Boolean, default: !1 },
13
13
  /** 是否撑满容器并让内容区滚动 */
14
14
  fit: Boolean,
15
15
  /** 是否启用导航背景色（取主题卡片底色 `--zl-bg-2`，light 为白底），默认启用 */
@@ -19,7 +19,7 @@ const g = c({
19
19
  /** 点击页签切换后触发，参数为新激活页签的 key（v-model 更新） */
20
20
  "update:modelValue": (e) => typeof e == "string" || typeof e == "number" || e === void 0
21
21
  },
22
- setup(e, { slots: a, attrs: u, emit: s }) {
22
+ setup(e, { slots: t, attrs: u, emit: s }) {
23
23
  const o = y();
24
24
  return () => r("div", { class: "zl-tabs-wrap" }, [
25
25
  r(
@@ -39,40 +39,40 @@ const g = c({
39
39
  {
40
40
  // 受控页签走显式契约（modelValue 已声明为 prop，不会落在 attrs 里）
41
41
  modelValue: e.modelValue,
42
- "onUpdate:modelValue": (t) => s("update:modelValue", t)
42
+ "onUpdate:modelValue": (a) => s("update:modelValue", a)
43
43
  }
44
44
  ),
45
45
  {
46
46
  default: n(
47
47
  () => [
48
- ...e.tabs.map((t) => {
49
- const { key: l, title: m, lazyLoad: f, ...i } = t;
48
+ ...e.tabs.map((a) => {
49
+ const { key: l, title: f, lazyLoad: m, ...i } = a;
50
50
  return r(
51
51
  p,
52
52
  {
53
53
  key: l,
54
54
  name: l,
55
- label: m,
55
+ label: f,
56
56
  // 默认懒挂载；可用 tab 里的 `lazy: false` 或 arco 风 `lazyLoad: false` 覆盖
57
- lazy: f ?? !0,
57
+ lazy: m ?? !0,
58
58
  ...i
59
59
  },
60
60
  {
61
61
  // 必须返回数组：ElTabPane 用 renderSlot 渲染内容，内部 ensureValidVNode
62
62
  // 会对返回值调用 .some()，拿到单个 vnode 会直接抛 TypeError。
63
- default: n(() => [d(a, l, { tab: t })], o)
63
+ default: n(() => [d(t, l, { tab: a })], o)
64
64
  }
65
65
  );
66
66
  }),
67
67
  // 追加在页签列表之后的内容（不在任何 ElTabPane 内）
68
- d(a, "default")
68
+ d(t, "default")
69
69
  ],
70
70
  o
71
71
  )
72
72
  }
73
73
  ),
74
74
  // 页签栏右侧的附加操作区
75
- d(a, "extra")
75
+ d(t, "extra")
76
76
  ]);
77
77
  }
78
78
  });
package/dist/components/ZlTag/ZlCornerTag.css CHANGED
@@ -1 +1 @@
1
- @charset "UTF-8";.zl-corner-tag{position:absolute;z-index:1;display:inline-flex;align-items:center;font-size:12px;line-height:20px;font-weight:600;padding:2px 8px;color:#fff;cursor:default}.zl-corner-tag-color-bg{background-image:linear-gradient(to right,var(--zl-bg-6),var(--zl-bg-3))}.zl-corner-tag-color-blue{background-image:linear-gradient(to right,var(--zl-blue-6),var(--zl-blue-3))}.zl-corner-tag-color-border{background-image:linear-gradient(to right,var(--zl-border-6),var(--zl-border-3))}.zl-corner-tag-color-cyan{background-image:linear-gradient(to right,var(--zl-cyan-6),var(--zl-cyan-3))}.zl-corner-tag-color-danger{background-image:linear-gradient(to right,var(--zl-danger-6),var(--zl-danger-3))}.zl-corner-tag-color-fill{background-image:linear-gradient(to right,var(--zl-fill-6),var(--zl-fill-3))}.zl-corner-tag-color-gold{background-image:linear-gradient(to right,var(--zl-gold-6),var(--zl-gold-3))}.zl-corner-tag-color-gray{background-image:linear-gradient(to right,var(--zl-gray-6),var(--zl-gray-3))}.zl-corner-tag-color-green{background-image:linear-gradient(to right,var(--zl-green-6),var(--zl-green-3))}.zl-corner-tag-color-lime{background-image:linear-gradient(to right,var(--zl-lime-6),var(--zl-lime-3))}.zl-corner-tag-color-link{background-image:linear-gradient(to right,var(--zl-link-6),var(--zl-link-3))}.zl-corner-tag-color-magenta{background-image:linear-gradient(to right,var(--zl-magenta-6),var(--zl-magenta-3))}.zl-corner-tag-color-modo{background-image:linear-gradient(to right,var(--zl-modo-6),var(--zl-modo-3))}.zl-corner-tag-color-neutral{background-image:linear-gradient(to right,var(--zl-neutral-6),var(--zl-neutral-3))}.zl-corner-tag-color-orange{background-image:linear-gradient(to right,var(--zl-orange-6),var(--zl-orange-3))}.zl-corner-tag-color-orangered{background-image:linear-gradient(to right,var(--zl-orangered-6),var(--zl-orangered-3))}.zl-corner-tag-color-pinkpurple{background-image:linear-gradient(to right,var(--zl-pinkpurple-6),var(--zl-pinkpurple-3))}.zl-corner-tag-color-primary{background-image:linear-gradient(to right,var(--zl-primary-6),var(--zl-primary-3))}.zl-corner-tag-color-purple{background-image:linear-gradient(to right,var(--zl-purple-6),var(--zl-purple-3))}.zl-corner-tag-color-red{background-image:linear-gradient(to right,var(--zl-red-6),var(--zl-red-3))}.zl-corner-tag-color-success{background-image:linear-gradient(to right,var(--zl-success-6),var(--zl-success-3))}.zl-corner-tag-color-text{background-image:linear-gradient(to right,var(--zl-text-6),var(--zl-text-3))}.zl-corner-tag-color-warning{background-image:linear-gradient(to right,var(--zl-warning-6),var(--zl-warning-3))}.zl-corner-tag-color-yellow{background-image:linear-gradient(to right,var(--zl-yellow-6),var(--zl-yellow-3))}.zl-corner-tag-position-top-left{top:0;left:0;border-bottom-right-radius:var(--zl-radius-xl, 12px)}.zl-corner-tag-position-top-right{top:0;right:0;border-bottom-left-radius:var(--zl-radius-xl, 12px)}.zl-corner-tag-position-bottom-left{bottom:0;left:0;border-top-right-radius:var(--zl-radius-xl, 12px)}.zl-corner-tag-position-bottom-right{bottom:0;right:0;border-top-left-radius:var(--zl-radius-xl, 12px)}
1
+ @charset "UTF-8";.zl-corner-tag{position:absolute;z-index:1;display:inline-flex;align-items:center;font-size:12px;line-height:20px;font-weight:600;padding:2px 8px;color:#fff;cursor:default}.zl-corner-tag-color-bg{background-image:linear-gradient(to right,var(--zl-bg-6),var(--zl-bg-3))}.zl-corner-tag-color-blue{background-image:linear-gradient(to right,var(--zl-blue-6),var(--zl-blue-3))}.zl-corner-tag-color-border{background-image:linear-gradient(to right,var(--zl-border-6),var(--zl-border-3))}.zl-corner-tag-color-cyan{background-image:linear-gradient(to right,var(--zl-cyan-6),var(--zl-cyan-3))}.zl-corner-tag-color-danger{background-image:linear-gradient(to right,var(--zl-danger-6),var(--zl-danger-3))}.zl-corner-tag-color-fill{background-image:linear-gradient(to right,var(--zl-fill-6),var(--zl-fill-3))}.zl-corner-tag-color-gold{background-image:linear-gradient(to right,var(--zl-gold-6),var(--zl-gold-3))}.zl-corner-tag-color-gray{background-image:linear-gradient(to right,var(--zl-gray-6),var(--zl-gray-3))}.zl-corner-tag-color-green{background-image:linear-gradient(to right,var(--zl-green-6),var(--zl-green-3))}.zl-corner-tag-color-lime{background-image:linear-gradient(to right,var(--zl-lime-6),var(--zl-lime-3))}.zl-corner-tag-color-link{background-image:linear-gradient(to right,var(--zl-link-6),var(--zl-link-3))}.zl-corner-tag-color-magenta{background-image:linear-gradient(to right,var(--zl-magenta-6),var(--zl-magenta-3))}.zl-corner-tag-color-modo{background-image:linear-gradient(to right,var(--zl-modo-6),var(--zl-modo-3))}.zl-corner-tag-color-neutral{background-image:linear-gradient(to right,var(--zl-neutral-6),var(--zl-neutral-3))}.zl-corner-tag-color-orange{background-image:linear-gradient(to right,var(--zl-orange-6),var(--zl-orange-3))}.zl-corner-tag-color-orangered{background-image:linear-gradient(to right,var(--zl-orangered-6),var(--zl-orangered-3))}.zl-corner-tag-color-pinkpurple{background-image:linear-gradient(to right,var(--zl-pinkpurple-6),var(--zl-pinkpurple-3))}.zl-corner-tag-color-primary{background-image:linear-gradient(to right,var(--zl-primary-6),var(--zl-primary-3))}.zl-corner-tag-color-purple{background-image:linear-gradient(to right,var(--zl-purple-6),var(--zl-purple-3))}.zl-corner-tag-color-red{background-image:linear-gradient(to right,var(--zl-red-6),var(--zl-red-3))}.zl-corner-tag-color-success{background-image:linear-gradient(to right,var(--zl-success-6),var(--zl-success-3))}.zl-corner-tag-color-text{background-image:linear-gradient(to right,var(--zl-text-6),var(--zl-text-3))}.zl-corner-tag-color-warning{background-image:linear-gradient(to right,var(--zl-warning-6),var(--zl-warning-3))}.zl-corner-tag-color-yellow{background-image:linear-gradient(to right,var(--zl-yellow-6),var(--zl-yellow-3))}.zl-corner-tag-position-top-left{top:0;left:0;border-bottom-right-radius:var(--zl-radius-xl, 12px)}.zl-corner-tag-position-top-right{top:0;right:0;border-bottom-left-radius:var(--zl-radius-xl, 12px)}.zl-corner-tag-position-bottom-left{bottom:0;left:0;border-top-right-radius:var(--zl-radius-xl, 12px)}.zl-corner-tag-position-bottom-right{bottom:0;right:0;border-top-left-radius:var(--zl-radius-xl, 12px)}.zl-corner-tag-variant-ribbon{--zl-ribbon-size: var(--zl-corner-tag-ribbon-size, 76px);--zl-ribbon-gap: var(--zl-corner-tag-ribbon-gap, 12px);--zl-ribbon-width: var(--zl-corner-tag-ribbon-width, 28px);--zl-ribbon-k: 1.4142;--zl-ribbon-center: calc((var(--zl-ribbon-gap) * 2 + var(--zl-ribbon-width)) * .35355);display:block;width:var(--zl-ribbon-size);height:var(--zl-ribbon-size);padding:0;overflow:hidden}.zl-corner-tag-variant-ribbon .zl-corner-tag__icon{display:none}.zl-corner-tag-variant-ribbon .zl-corner-tag__text{position:absolute;white-space:nowrap;font-size:11px;line-height:1}.zl-corner-tag-variant-ribbon.zl-corner-tag-position-top-right{clip-path:polygon(calc(100% - (var(--zl-ribbon-gap) + var(--zl-ribbon-width)) * var(--zl-ribbon-k)) 0,calc(100% - var(--zl-ribbon-gap) * var(--zl-ribbon-k)) 0,100% calc(var(--zl-ribbon-gap) * var(--zl-ribbon-k)),100% calc((var(--zl-ribbon-gap) + var(--zl-ribbon-width)) * var(--zl-ribbon-k)))}.zl-corner-tag-variant-ribbon.zl-corner-tag-position-top-right .zl-corner-tag__text{top:var(--zl-ribbon-center);left:calc(100% - var(--zl-ribbon-center));transform:translate(-50%,-50%) rotate(45deg)}.zl-corner-tag-variant-ribbon.zl-corner-tag-position-top-left{clip-path:polygon(calc((var(--zl-ribbon-gap) + var(--zl-ribbon-width)) * var(--zl-ribbon-k)) 0,calc(var(--zl-ribbon-gap) * var(--zl-ribbon-k)) 0,0 calc(var(--zl-ribbon-gap) * var(--zl-ribbon-k)),0 calc((var(--zl-ribbon-gap) + var(--zl-ribbon-width)) * var(--zl-ribbon-k)))}.zl-corner-tag-variant-ribbon.zl-corner-tag-position-top-left .zl-corner-tag__text{top:var(--zl-ribbon-center);left:var(--zl-ribbon-center);transform:translate(-50%,-50%) rotate(-45deg)}.zl-corner-tag-variant-ribbon.zl-corner-tag-position-bottom-right{clip-path:polygon(calc(100% - (var(--zl-ribbon-gap) + var(--zl-ribbon-width)) * var(--zl-ribbon-k)) 100%,calc(100% - var(--zl-ribbon-gap) * var(--zl-ribbon-k)) 100%,100% calc(100% - var(--zl-ribbon-gap) * var(--zl-ribbon-k)),100% calc(100% - (var(--zl-ribbon-gap) + var(--zl-ribbon-width)) * var(--zl-ribbon-k)))}.zl-corner-tag-variant-ribbon.zl-corner-tag-position-bottom-right .zl-corner-tag__text{top:calc(100% - var(--zl-ribbon-center));left:calc(100% - var(--zl-ribbon-center));transform:translate(-50%,-50%) rotate(-45deg)}.zl-corner-tag-variant-ribbon.zl-corner-tag-position-bottom-left{clip-path:polygon(calc((var(--zl-ribbon-gap) + var(--zl-ribbon-width)) * var(--zl-ribbon-k)) 100%,calc(var(--zl-ribbon-gap) * var(--zl-ribbon-k)) 100%,0 calc(100% - var(--zl-ribbon-gap) * var(--zl-ribbon-k)),0 calc(100% - (var(--zl-ribbon-gap) + var(--zl-ribbon-width)) * var(--zl-ribbon-k)))}.zl-corner-tag-variant-ribbon.zl-corner-tag-position-bottom-left .zl-corner-tag__text{top:calc(100% - var(--zl-ribbon-center));left:var(--zl-ribbon-center);transform:translate(-50%,-50%) rotate(45deg)}
package/dist/components/ZlTag/ZlCornerTag.vue.d.ts CHANGED
@@ -1,10 +1,12 @@
1
1
  type __VLS_Props = {
2
- /** 文案前的图标名，走 ZlIcon 渲染 */
2
+ /** 文案前的图标名，走 ZlIcon 渲染（ribbon 形态下不展示图标） */
3
3
  icon?: string;
4
4
  /** 背景渐变的主色，取内置主题色名 */
5
5
  color?: string;
6
6
  /** 贴在容器的哪个角，默认右上角 */
7
7
  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
8
+ /** 形态：`badge` 贴边小标签（默认）/ `ribbon` 斜跨角上的绶带 */
9
+ variant?: 'badge' | 'ribbon';
8
10
  };
9
11
  declare function __VLS_template(): {
10
12
  attrs: Partial<{}>;
@@ -17,6 +19,7 @@ declare function __VLS_template(): {
17
19
  type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
18
20
  declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
19
21
  position: "top-left" | "top-right" | "bottom-left" | "bottom-right";
22
+ variant: "badge" | "ribbon";
20
23
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
21
24
  declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
22
25
  export default _default;
package/dist/components/ZlTag/ZlCornerTag.vue.mjs CHANGED
@@ -1,27 +1,29 @@
1
- import { defineComponent as t, openBlock as e, createElementBlock as r, normalizeClass as c, createBlock as l, createCommentVNode as a, createElementVNode as i, renderSlot as s } from "vue";
1
+ import { defineComponent as n, openBlock as o, createElementBlock as a, normalizeClass as r, createBlock as c, createCommentVNode as l, createElementVNode as i, renderSlot as s } from "vue";
2
2
  import m from "../ZlIcon/index.vue.mjs";
3
- const d = { class: "zl-corner-tag__text" }, z = /* @__PURE__ */ t({
3
+ const d = { class: "zl-corner-tag__text" }, z = /* @__PURE__ */ n({
4
4
  name: "ZlCornerTag",
5
5
  __name: "ZlCornerTag",
6
6
  props: {
7
7
  icon: {},
8
8
  color: {},
9
- position: { default: "top-right" }
9
+ position: { default: "top-right" },
10
+ variant: { default: "badge" }
10
11
  },
11
- setup(o) {
12
- return (n, g) => (e(), r("div", {
13
- class: c(["zl-corner-tag", {
14
- [`zl-corner-tag-position-${o.position}`]: o.position,
15
- [`zl-corner-tag-color-${o.color}`]: o.color
12
+ setup(e) {
13
+ return (t, g) => (o(), a("div", {
14
+ class: r(["zl-corner-tag", {
15
+ [`zl-corner-tag-position-${e.position}`]: e.position,
16
+ [`zl-corner-tag-color-${e.color}`]: e.color,
17
+ [`zl-corner-tag-variant-${e.variant}`]: e.variant !== "badge"
16
18
  }])
17
19
  }, [
18
- o.icon ? (e(), l(m, {
20
+ e.icon ? (o(), c(m, {
19
21
  key: 0,
20
22
  class: "zl-corner-tag__icon",
21
- icon: o.icon
22
- }, null, 8, ["icon"])) : a("", !0),
23
+ icon: e.icon
24
+ }, null, 8, ["icon"])) : l("", !0),
23
25
  i("span", d, [
24
- s(n.$slots, "default")
26
+ s(t.$slots, "default")
25
27
  ])
26
28
  ], 2));
27
29
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zl-ui-kit/components",
3
- "version": "0.14.4",
3
+ "version": "0.15.0",
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.4",
43
- "@zl-ui-kit/utils": "0.14.4",
44
- "@zl-ui-kit/icons": "0.14.4"
42
+ "@zl-ui-kit/composables": "0.15.0",
43
+ "@zl-ui-kit/utils": "0.15.0",
44
+ "@zl-ui-kit/icons": "0.15.0"
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
- "@jichuang/tsconfig": "1.0.0",
102
101
  "@jichuang/eslint-config": "1.0.0",
103
- "@jichuang/vite-config": "1.0.0",
104
- "@zl-ui-kit/theme": "0.14.4"
102
+ "@jichuang/tsconfig": "1.0.0",
103
+ "@zl-ui-kit/theme": "0.15.0",
104
+ "@jichuang/vite-config": "1.0.0"
105
105
  },
106
106
  "repository": {
107
107
  "type": "git",