@zl-ui-kit/components 0.17.0 → 0.17.1

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
@@ -642,7 +642,9 @@ presetIconifyIcon(icons)
642
642
  > `#f00` 或 `rgb(255 0 0)` —— 单写 `red` 会被当成色板名(本库色板里确实有 `red`)。
643
643
 
644
644
  **绶带尺寸**:梯形高度(斜带宽度)用 `ribbon-height` 控,数字按 `px`、字符串原样当 CSS 长度,默认 `28px`;
645
- 加大后斜带不会被裁掉(贴角的正方形底图会自动长开)。另外两支几何变量继续可覆盖:
645
+ 加大后斜带不会被裁掉(贴角的正方形底图会自动长开)。带内**文字字号跟着 `ribbon-height` 等比自适应**
646
+ (取高度的 `0.4` 倍,兜底在 `10px ~ 16px`:默认 `28px` ≈ `11px` 字,`ribbon-height="20"` 收到 `10px`、`="40"` 放到 `16px`),
647
+ 不需要为窄带单独调字号;想固定字号就覆盖 `--zl-corner-tag-ribbon-font-size`。另外两支几何变量继续可覆盖:
646
648
  `--zl-corner-tag-ribbon-size`(正方形边长,默认 `76px`)/ `--zl-corner-tag-ribbon-gap`(与角点留白,默认 `12px`)。
647
649
 
648
650
  ```vue
@@ -726,7 +728,7 @@ presetIconifyIcon(icons)
726
728
  > 角标贴的是**父容器的角**:父级需 `position: relative`(卡片本身不是定位元素时要自己补一个),
727
729
  > 圆角容器再加 `overflow: hidden`,避免角标压到圆角外的直角区域。`variant` 只在 `corner` 生效时起作用,四个角都支持;
728
730
  > `ribbon` 的带两端与容器边缘齐平,但与角点留了一段距离(`--zl-corner-tag-ribbon-gap`,默认 `12px`),
729
- > 梯形高度(斜带宽度)走 `ribbon-height`(默认 `28px`,`ZlDictTag` 上同名透传),正方形边长走
731
+ > 梯形高度(斜带宽度)走 `ribbon-height`(默认 `28px`,`ZlDictTag` 上同名透传,带内字号自适应),正方形边长走
730
732
  > `--zl-corner-tag-ribbon-size`(默认 `76px`)。
731
733
  > 角标本体由 `ZlCornerTag` 提供,需要脱离字典单独用时直接写 `<ZlCornerTag variant="ribbon">委托任务</ZlCornerTag>`。
732
734
 
@@ -4446,16 +4448,16 @@ import { ZlDictTag } from '@zl-ui-kit/components'
4446
4448
 
4447
4449
  **props**
4448
4450
 
4449
- | 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
4450
- | ------------- | ------------------------------------------------------------------------- | ----------- | ---- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
4451
- | `dictKey` | `string` | — | 是 | `dict-key="gender"` | 字典键(对应全局字典缓存的键;外部直传数据也以该键写入共享缓存)。 ⚠️ 直传 `dict` 会**覆盖全局同名 key**,不要在列表里逐行传不同的 `dict`(最后一行会污染全站), 行级字典请用独立 key(如 `` `resourceType.${row.id}` ``)。 |
4452
- | `dict` | `DictItem[]` | — | 否 | `:dict="dict"` | 外部直传字典数据:无需依赖全局数据源即可翻译。格式同 `DictItem[]`(`{ label, value, icon?, color?, type? }`)。 `color` 可以是主题色名,也可以是 `#ff7d45` 这类原生 CSS 颜色值(角标上按纯色渲染,不自动渐变) |
4453
- | `corner` | `boolean \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `false` | 否 | `corner="top-left"` | 是否渲染成角标并指定方位,true 时为右上角 |
4454
- | `variant` | `'badge' \| 'ribbon'` | `'badge'` | 否 | `variant="badge"` | 角标形态(`corner` 生效时才起作用): `badge` 贴边小标签(默认);`ribbon` 斜跨在角上的绶带(45° 文字,如卡片右上角的「委托任务」)。 绶带与角点留有间距、文案建议 ≤4 个字;梯形高度用 `ribbon-height` 透传, 尺寸/留白仍走 CSS 变量 `--zl-corner-tag-ribbon-size` / `--zl-corner-tag-ribbon-gap`。 |
4455
- | `value` | `string` | — | 否 | `value="1"` | 待翻译的字典值,匹配不到时原样展示。 与字典项的 `value` 做**严格相等**比较,后端返回数字状态码时要先转成字符串 (`:value="String(row.status)"`,或在字典数据源里归一)。 |
4456
- | `simple` | `boolean` | — | 否 | `simple` | 忽略字典项自带的颜色,改用标签默认配色 |
4457
- | `iconVisible` | `boolean` | `undefined` | 否 | `icon-visible` | 是否展示字典项图标(默认 true) |
4458
- | `hideIcon` | `boolean` | `undefined` | 否 | `hide-icon` | 已废弃,请用 `iconVisible` 控制图标显隐 |
4451
+ | 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
4452
+ | ------------- | ------------------------------------------------------------------------- | ----------- | ---- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
4453
+ | `dictKey` | `string` | — | 是 | `dict-key="gender"` | 字典键(对应全局字典缓存的键;外部直传数据也以该键写入共享缓存)。 ⚠️ 直传 `dict` 会**覆盖全局同名 key**,不要在列表里逐行传不同的 `dict`(最后一行会污染全站), 行级字典请用独立 key(如 `` `resourceType.${row.id}` ``)。 |
4454
+ | `dict` | `DictItem[]` | — | 否 | `:dict="dict"` | 外部直传字典数据:无需依赖全局数据源即可翻译。格式同 `DictItem[]`(`{ label, value, icon?, color?, type? }`)。 `color` 可以是主题色名,也可以是 `#ff7d45` 这类原生 CSS 颜色值(角标上按纯色渲染,不自动渐变) |
4455
+ | `corner` | `boolean \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `false` | 否 | `corner="top-left"` | 是否渲染成角标并指定方位,true 时为右上角 |
4456
+ | `variant` | `'badge' \| 'ribbon'` | `'badge'` | 否 | `variant="badge"` | 角标形态(`corner` 生效时才起作用): `badge` 贴边小标签(默认);`ribbon` 斜跨在角上的绶带(45° 文字,如卡片右上角的「委托任务」)。 绶带与角点留有间距、文案建议 ≤4 个字;梯形高度用 `ribbon-height` 透传(带内字号跟着高度等比缩放), 尺寸/留白仍走 CSS 变量 `--zl-corner-tag-ribbon-size` / `--zl-corner-tag-ribbon-gap`。 |
4457
+ | `value` | `string` | — | 否 | `value="1"` | 待翻译的字典值,匹配不到时原样展示。 与字典项的 `value` 做**严格相等**比较,后端返回数字状态码时要先转成字符串 (`:value="String(row.status)"`,或在字典数据源里归一)。 |
4458
+ | `simple` | `boolean` | — | 否 | `simple` | 忽略字典项自带的颜色,改用标签默认配色 |
4459
+ | `iconVisible` | `boolean` | `undefined` | 否 | `icon-visible` | 是否展示字典项图标(默认 true) |
4460
+ | `hideIcon` | `boolean` | `undefined` | 否 | `hide-icon` | 已废弃,请用 `iconVisible` 控制图标显隐 |
4459
4461
 
4460
4462
  > 把 `$attrs` 透传给 `zl-corner-tag`,未列出的属性会继续下传
4461
4463
 
@@ -5117,7 +5119,7 @@ import { ZlCornerTag } from '@zl-ui-kit/components'
5117
5119
  | `color` | `string` | — | 否 | `color="#409eff"` | 背景色。两种写法: ① 内置主题色名(`primary` / `success` / `green` …),走色板 6→3 渐变; ② 原生 CSS 颜色值(`#ff7d45` / `rgb(255 125 69)` / `var(--zl-primary-6)`),**原样纯色填充、不自动渐变**, 需要渐变时自己传 `linear-gradient(...)`。 含 `#` / `(` / 逗号 / 空格的值一律按 ② 处理(想写 `red` 这类关键字请写成 `#f00`,否则会被当成色名)。 |
5118
5120
  | `position` | `'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `'top-right'` | 否 | `position="top-left"` | 贴在容器的哪个角,默认右上角 |
5119
5121
  | `variant` | `'badge' \| 'ribbon'` | `'badge'` | 否 | `variant="badge"` | 形态:`badge` 贴边小标签(默认)/ `ribbon` 斜跨角上的绶带 |
5120
- | `ribbonHeight` | `number \| string` | — | 否 | `:ribbon-height="ribbonHeight"` | 绶带的梯形高度(斜带宽度的垂直值),只在 `variant="ribbon"` 下生效。 数字按 px 处理,字符串原样当 CSS 长度(`36px` / `2rem`);默认 `28px`。 加大后正方形底图会自动跟着长开,不会把斜带裁掉。 |
5122
+ | `ribbonHeight` | `number \| string` | — | 否 | `:ribbon-height="ribbonHeight"` | 绶带的梯形高度(斜带宽度的垂直值),只在 `variant="ribbon"` 下生效。 数字按 px 处理,字符串原样当 CSS 长度(`36px` / `2rem`);默认 `28px`。 加大后正方形底图会自动跟着长开,不会把斜带裁掉;带内文字字号也按该高度等比缩放, 窄带不会把字撑出带外、宽带也不会显得字过小(可用 CSS 变量 `--zl-corner-tag-ribbon-font-size` 固定字号)。 |
5121
5123
 
5122
5124
  **插槽(slots)**
5123
5125
 
@@ -16,7 +16,7 @@ type __VLS_Props = {
16
16
  /**
17
17
  * 角标形态(`corner` 生效时才起作用):
18
18
  * `badge` 贴边小标签(默认);`ribbon` 斜跨在角上的绶带(45° 文字,如卡片右上角的「委托任务」)。
19
- * 绶带与角点留有间距、文案建议 ≤4 个字;梯形高度用 `ribbon-height` 透传,
19
+ * 绶带与角点留有间距、文案建议 ≤4 个字;梯形高度用 `ribbon-height` 透传(带内字号跟着高度等比缩放),
20
20
  * 尺寸/留白仍走 CSS 变量 `--zl-corner-tag-ribbon-size` / `--zl-corner-tag-ribbon-gap`。
21
21
  */
22
22
  variant?: 'badge' | 'ribbon';
@@ -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)}.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);--zl-ribbon-box: max( var(--zl-ribbon-size), calc((var(--zl-ribbon-gap) + var(--zl-ribbon-width)) * var(--zl-ribbon-k)) );display:block;width:var(--zl-ribbon-box);height:var(--zl-ribbon-box);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)}
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-font-size: var( --zl-corner-tag-ribbon-font-size, clamp(10px, calc(var(--zl-ribbon-width) * .4), 16px) );--zl-ribbon-center: calc((var(--zl-ribbon-gap) * 2 + var(--zl-ribbon-width)) * .35355);--zl-ribbon-box: max( var(--zl-ribbon-size), calc((var(--zl-ribbon-gap) + var(--zl-ribbon-width)) * var(--zl-ribbon-k)) );display:block;width:var(--zl-ribbon-box);height:var(--zl-ribbon-box);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:var(--zl-ribbon-font-size);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)}
@@ -16,7 +16,8 @@ type __VLS_Props = {
16
16
  /**
17
17
  * 绶带的梯形高度(斜带宽度的垂直值),只在 `variant="ribbon"` 下生效。
18
18
  * 数字按 px 处理,字符串原样当 CSS 长度(`36px` / `2rem`);默认 `28px`。
19
- * 加大后正方形底图会自动跟着长开,不会把斜带裁掉。
19
+ * 加大后正方形底图会自动跟着长开,不会把斜带裁掉;带内文字字号也按该高度等比缩放,
20
+ * 窄带不会把字撑出带外、宽带也不会显得字过小(可用 CSS 变量 `--zl-corner-tag-ribbon-font-size` 固定字号)。
20
21
  */
21
22
  ribbonHeight?: number | string;
22
23
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zl-ui-kit/components",
3
- "version": "0.17.0",
3
+ "version": "0.17.1",
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/icons": "0.17.0",
43
- "@zl-ui-kit/composables": "0.17.0",
44
- "@zl-ui-kit/utils": "0.17.0"
42
+ "@zl-ui-kit/composables": "0.17.1",
43
+ "@zl-ui-kit/utils": "0.17.1",
44
+ "@zl-ui-kit/icons": "0.17.1"
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/vite-config": "1.0.0",
102
101
  "@jichuang/tsconfig": "1.0.0",
103
102
  "@jichuang/eslint-config": "1.0.0",
104
- "@zl-ui-kit/theme": "0.17.0"
103
+ "@zl-ui-kit/theme": "0.17.1",
104
+ "@jichuang/vite-config": "1.0.0"
105
105
  },
106
106
  "repository": {
107
107
  "type": "git",