@zl-ui-kit/components 0.16.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 +50 -22
- package/dist/components/ZlAutoTooltip/index.css +1 -1
- package/dist/components/ZlAutoTooltip/index.vue.mjs +2 -2
- package/dist/components/ZlCheckAll/index.css +1 -1
- package/dist/components/ZlCheckAll/index.vue.mjs +1 -1
- package/dist/components/ZlCopy/index.css +1 -1
- package/dist/components/ZlCopy/index.vue.mjs +1 -1
- package/dist/components/ZlDictTag/index.vue.d.ts +6 -3
- package/dist/components/ZlEmpty/index.css +1 -1
- package/dist/components/ZlEmpty/index.vue.mjs +2 -2
- package/dist/components/ZlFilePreview/FileFetchError.css +1 -1
- package/dist/components/ZlFilePreview/FileFetchError.vue.mjs +2 -2
- package/dist/components/ZlLayoutSwitch/index.css +1 -1
- package/dist/components/ZlLayoutSwitch/index.vue.mjs +2 -2
- package/dist/components/ZlLogin/components/LoginForm.css +1 -1
- package/dist/components/ZlLogin/components/LoginForm.vue.mjs +1 -1
- package/dist/components/ZlLogin/components/SlideChecker.css +1 -1
- package/dist/components/ZlLogin/components/SlideChecker.vue.mjs +3 -3
- package/dist/components/ZlPageContainer/index.css +1 -1
- package/dist/components/ZlPageContainer/index.vue.mjs +1 -1
- package/dist/components/ZlPagination/index.css +1 -1
- package/dist/components/ZlPagination/index.vue.mjs +1 -1
- package/dist/components/ZlSorter/ZlSorterList.css +1 -1
- package/dist/components/ZlSorter/ZlSorterList.vue.mjs +2 -2
- package/dist/components/ZlSorter/index.css +1 -1
- package/dist/components/ZlSorter/index.vue.mjs +1 -1
- package/dist/components/ZlStep/index.css +1 -1
- package/dist/components/ZlStep/index.vue.mjs +2 -2
- package/dist/components/ZlTag/ZlCornerTag.css +1 -1
- package/dist/components/ZlTag/ZlCornerTag.vue.d.ts +14 -1
- package/dist/components/ZlTag/ZlCornerTag.vue.mjs +25 -14
- package/dist/components/ZlText/index.css +1 -1
- package/dist/components/ZlText/index.vue.mjs +2 -2
- package/dist/components/ZlUpload/index.css +1 -1
- package/dist/components/ZlUpload/index.vue.mjs +2 -2
- package/package.json +7 -7
package/README.md
CHANGED
|
@@ -629,8 +629,34 @@ presetIconifyIcon(icons)
|
|
|
629
629
|
|
|
630
630
|
`ZlCornerTag` 为四角定位标签，语义一致、定位展开为显式四类；`variant` 分 `badge`（贴边小标签，默认）/
|
|
631
631
|
`ribbon`（斜跨角上的 45° 绶带，两端与容器边缘齐平、但整体与角点留白，靠 `clip-path` 裁切，不需要父级 `overflow: hidden`）。
|
|
632
|
-
|
|
633
|
-
|
|
632
|
+
|
|
633
|
+
**颜色（`color`）两种写法**，`badge` / `ribbon` 通用：
|
|
634
|
+
|
|
635
|
+
| 写法 | 渲染结果 |
|
|
636
|
+
| --------------------------------------------------- | ----------------------------------------------------------------------- |
|
|
637
|
+
| 主题色名 `primary` / `success` / `green` … | 色板 `6 → 3` 渐变（随主题切换） |
|
|
638
|
+
| 原生 CSS 颜色值 `#ff7d45` / `rgb(255 125 69)` | **原样纯色填充，不自动渐变**；`var(--zl-primary-6)` 这种 token 也走这里 |
|
|
639
|
+
| CSS 图片值 `linear-gradient(135deg, #f00, #ff7d45)` | 想要渐变就自己传渐变值（同一份 `color`，不区分形态） |
|
|
640
|
+
|
|
641
|
+
> 判定规则：值里含 `#` / `(` / 逗号 / 空格就按原生 CSS 处理，否则当主题色名。所以 CSS 关键字色（`red`）请写成
|
|
642
|
+
> `#f00` 或 `rgb(255 0 0)` —— 单写 `red` 会被当成色板名（本库色板里确实有 `red`）。
|
|
643
|
+
|
|
644
|
+
**绶带尺寸**：梯形高度（斜带宽度）用 `ribbon-height` 控，数字按 `px`、字符串原样当 CSS 长度，默认 `28px`；
|
|
645
|
+
加大后斜带不会被裁掉（贴角的正方形底图会自动长开）。带内**文字字号跟着 `ribbon-height` 等比自适应**
|
|
646
|
+
（取高度的 `0.4` 倍，兜底在 `10px ~ 16px`：默认 `28px` ≈ `11px` 字，`ribbon-height="20"` 收到 `10px`、`="40"` 放到 `16px`），
|
|
647
|
+
不需要为窄带单独调字号；想固定字号就覆盖 `--zl-corner-tag-ribbon-font-size`。另外两支几何变量继续可覆盖：
|
|
648
|
+
`--zl-corner-tag-ribbon-size`（正方形边长，默认 `76px`）/ `--zl-corner-tag-ribbon-gap`（与角点留白，默认 `12px`）。
|
|
649
|
+
|
|
650
|
+
```vue
|
|
651
|
+
<ZlCornerTag color="purple">角标</ZlCornerTag>
|
|
652
|
+
<ZlCornerTag color="#1d2129">角标</ZlCornerTag>
|
|
653
|
+
<!-- 绶带：自定义色 + 加高 -->
|
|
654
|
+
<ZlCornerTag
|
|
655
|
+
color="linear-gradient(135deg, #ff9a2e, #ff5f3c)"
|
|
656
|
+
variant="ribbon"
|
|
657
|
+
:ribbon-height="40"
|
|
658
|
+
>加急</ZlCornerTag>
|
|
659
|
+
```
|
|
634
660
|
|
|
635
661
|
### ZlCopy — 一键复制
|
|
636
662
|
|
|
@@ -668,7 +694,7 @@ presetIconifyIcon(icons)
|
|
|
668
694
|
```
|
|
669
695
|
|
|
670
696
|
字典项字段：`label` / `value`（都是字符串，与 `:value` 做 `===` 比较）/ `icon`（须是 `@zl-ui-kit/icons` 里真实存在的图标名）/
|
|
671
|
-
`color`（主题色名，如 `primary` / `success` / `warning` / `danger` / `gray
|
|
697
|
+
`color`（主题色名，如 `primary` / `success` / `warning` / `danger` / `gray`；角标形态下也可直接写 `#ff7d45` 这类原生 CSS 颜色值）；
|
|
672
698
|
`type` 为旧写法兜底（`color` 优先，`info` 自动映射为 `gray`）。详见第 6.3 节 ⑤。
|
|
673
699
|
|
|
674
700
|
**风格一览**：同一套字典解析，四种外观。
|
|
@@ -702,7 +728,8 @@ presetIconifyIcon(icons)
|
|
|
702
728
|
> 角标贴的是**父容器的角**：父级需 `position: relative`（卡片本身不是定位元素时要自己补一个），
|
|
703
729
|
> 圆角容器再加 `overflow: hidden`，避免角标压到圆角外的直角区域。`variant` 只在 `corner` 生效时起作用，四个角都支持；
|
|
704
730
|
> `ribbon` 的带两端与容器边缘齐平，但与角点留了一段距离（`--zl-corner-tag-ribbon-gap`，默认 `12px`），
|
|
705
|
-
>
|
|
731
|
+
> 梯形高度（斜带宽度）走 `ribbon-height`（默认 `28px`，`ZlDictTag` 上同名透传，带内字号自适应），正方形边长走
|
|
732
|
+
> `--zl-corner-tag-ribbon-size`（默认 `76px`）。
|
|
706
733
|
> 角标本体由 `ZlCornerTag` 提供，需要脱离字典单独用时直接写 `<ZlCornerTag variant="ribbon">委托任务</ZlCornerTag>`。
|
|
707
734
|
|
|
708
735
|
### ZlCard / ZlPagination — 卡片与分页的视觉约定
|
|
@@ -3678,7 +3705,7 @@ const { i18n } = useLocale({ messages })
|
|
|
3678
3705
|
| [`ZlI18nProvider`](#zli18nprovider) | 主入口 | 0 | 0 | 1 | 0 |
|
|
3679
3706
|
| [`ZlIconHover`](#zliconhover) | 主入口 | 0 | 0 | 0 | 0 |
|
|
3680
3707
|
| [`ZlIconLabel`](#zliconlabel) | 主入口 | 1 | 1 | 1 | 0 |
|
|
3681
|
-
| [`ZlCornerTag`](#zlcornertag) | 主入口 |
|
|
3708
|
+
| [`ZlCornerTag`](#zlcornertag) | 主入口 | 5 | 0 | 1 | 0 |
|
|
3682
3709
|
| [`ZlLayoutSwitch`](#zllayoutswitch) | 主入口 | 2 | 1 | 0 | 0 |
|
|
3683
3710
|
| [`ZlPageContainer`](#zlpagecontainer) | 主入口 | 3 | 0 | 4 | 0 |
|
|
3684
3711
|
| [`ZlPagination`](#zlpagination) | 主入口 | 4 | 3 | 0 | 0 |
|
|
@@ -4421,16 +4448,16 @@ import { ZlDictTag } from '@zl-ui-kit/components'
|
|
|
4421
4448
|
|
|
4422
4449
|
**props**
|
|
4423
4450
|
|
|
4424
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
4425
|
-
| ------------- | ------------------------------------------------------------------------- | ----------- | ---- | ------------------- |
|
|
4426
|
-
| `dictKey` | `string` | — | 是 | `dict-key="gender"` | 字典键（对应全局字典缓存的键；外部直传数据也以该键写入共享缓存）。 ⚠️ 直传 `dict` 会**覆盖全局同名 key**，不要在列表里逐行传不同的 `dict`（最后一行会污染全站）， 行级字典请用独立 key（如 `` `resourceType.${row.id}` ``）。
|
|
4427
|
-
| `dict` | `DictItem[]` | — | 否 | `:dict="dict"` | 外部直传字典数据：无需依赖全局数据源即可翻译。格式同 `DictItem[]`（`{ label, value, icon?, color?, type? }
|
|
4428
|
-
| `corner` | `boolean \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `false` | 否 | `corner="top-left"` | 是否渲染成角标并指定方位，true 时为右上角
|
|
4429
|
-
| `variant` | `'badge' \| 'ribbon'` | `'badge'` | 否 | `variant="badge"` | 角标形态（`corner` 生效时才起作用）： `badge` 贴边小标签（默认）；`ribbon` 斜跨在角上的绶带（45° 文字，如卡片右上角的「委托任务」）。 绶带与角点留有间距、文案建议 ≤4
|
|
4430
|
-
| `value` | `string` | — | 否 | `value="1"` | 待翻译的字典值，匹配不到时原样展示。 与字典项的 `value` 做**严格相等**比较，后端返回数字状态码时要先转成字符串 （`:value="String(row.status)"`，或在字典数据源里归一）。
|
|
4431
|
-
| `simple` | `boolean` | — | 否 | `simple` | 忽略字典项自带的颜色，改用标签默认配色
|
|
4432
|
-
| `iconVisible` | `boolean` | `undefined` | 否 | `icon-visible` | 是否展示字典项图标（默认 true）
|
|
4433
|
-
| `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` 控制图标显隐 |
|
|
4434
4461
|
|
|
4435
4462
|
> 把 `$attrs` 透传给 `zl-corner-tag`，未列出的属性会继续下传
|
|
4436
4463
|
|
|
@@ -5060,7 +5087,7 @@ import { ZlIconLabel } from '@zl-ui-kit/components'
|
|
|
5060
5087
|
|
|
5061
5088
|
**简介**：角落标签：贴在容器四个角（`position`），常用于「新」「热」「任务类型」等标记。 形态由 `variant` 决定：`badge` 贴边小标签（默认）；`ribbon` 斜跨角上的 45° 绶带（用 `clip-path` 裁切，不需要父级 `overflow: hidden`）。
|
|
5062
5089
|
|
|
5063
|
-
**接口概览**：
|
|
5090
|
+
**接口概览**：5 props · 1 插槽
|
|
5064
5091
|
|
|
5065
5092
|
**用法示例**
|
|
5066
5093
|
|
|
@@ -5086,12 +5113,13 @@ import { ZlCornerTag } from '@zl-ui-kit/components'
|
|
|
5086
5113
|
|
|
5087
5114
|
**props**
|
|
5088
5115
|
|
|
5089
|
-
| 属性
|
|
5090
|
-
|
|
|
5091
|
-
| `icon`
|
|
5092
|
-
| `color`
|
|
5093
|
-
| `position`
|
|
5094
|
-
| `variant`
|
|
5116
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
5117
|
+
| -------------- | -------------------------------------------------------------- | ------------- | ---- | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
5118
|
+
| `icon` | `string` | — | 否 | `icon="zl:search"` | 文案前的图标名，走 ZlIcon 渲染（ribbon 形态下不展示图标） |
|
|
5119
|
+
| `color` | `string` | — | 否 | `color="#409eff"` | 背景色。两种写法： ① 内置主题色名（`primary` / `success` / `green` …），走色板 6→3 渐变； ② 原生 CSS 颜色值（`#ff7d45` / `rgb(255 125 69)` / `var(--zl-primary-6)`），**原样纯色填充、不自动渐变**， 需要渐变时自己传 `linear-gradient(...)`。 含 `#` / `(` / 逗号 / 空格的值一律按 ② 处理（想写 `red` 这类关键字请写成 `#f00`，否则会被当成色名）。 |
|
|
5120
|
+
| `position` | `'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `'top-right'` | 否 | `position="top-left"` | 贴在容器的哪个角，默认右上角 |
|
|
5121
|
+
| `variant` | `'badge' \| 'ribbon'` | `'badge'` | 否 | `variant="badge"` | 形态：`badge` 贴边小标签（默认）/ `ribbon` 斜跨角上的绶带 |
|
|
5122
|
+
| `ribbonHeight` | `number \| string` | — | 否 | `:ribbon-height="ribbonHeight"` | 绶带的梯形高度（斜带宽度的垂直值），只在 `variant="ribbon"` 下生效。 数字按 px 处理，字符串原样当 CSS 长度（`36px` / `2rem`）；默认 `28px`。 加大后正方形底图会自动跟着长开，不会把斜带裁掉；带内文字字号也按该高度等比缩放， 窄带不会把字撑出带外、宽带也不会显得字过小（可用 CSS 变量 `--zl-corner-tag-ribbon-font-size` 固定字号）。 |
|
|
5095
5123
|
|
|
5096
5124
|
**插槽（slots）**
|
|
5097
5125
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.zl-auto-tooltip[data-v-
|
|
1
|
+
.zl-auto-tooltip[data-v-6249e6d9]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import o from "./index2.vue.mjs";
|
|
2
2
|
import './index.css';/* empty css */
|
|
3
3
|
import t from "../../_virtual/_plugin-vue_export-helper.mjs";
|
|
4
|
-
const
|
|
4
|
+
const _ = /* @__PURE__ */ t(o, [["__scopeId", "data-v-6249e6d9"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
_ as default
|
|
7
7
|
};
|
|
8
8
|
//# sourceMappingURL=index.vue.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.zl-check[data-v-
|
|
1
|
+
.zl-check[data-v-3505c631]{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.zl-check__all[data-v-3505c631]{margin-bottom:4px}.zl-check[data-v-3505c631] .el-checkbox:not(.zl-check__all){padding:5px;background:var(--zl-primary-1, var(--el-color-primary-light-9, #e8f3ff))}.zl-check[data-v-3505c631] .el-checkbox:not(.zl-check__all):hover{background:var(--zl-fill-3, #e3e9ef)}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./index2.vue.mjs";
|
|
2
2
|
import './index.css';/* empty css */
|
|
3
3
|
import t from "../../_virtual/_plugin-vue_export-helper.mjs";
|
|
4
|
-
const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-
|
|
4
|
+
const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-3505c631"]]);
|
|
5
5
|
export {
|
|
6
6
|
p as default
|
|
7
7
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.zl-copy[data-v-
|
|
1
|
+
.zl-copy[data-v-9ed5846a]{max-width:100%;display:inline-flex;align-items:center;gap:12px}.zl-copy__text[data-v-9ed5846a]{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./index2.vue.mjs";
|
|
2
2
|
import './index.css';/* empty css */
|
|
3
3
|
import t from "../../_virtual/_plugin-vue_export-helper.mjs";
|
|
4
|
-
const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-
|
|
4
|
+
const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-9ed5846a"]]);
|
|
5
5
|
export {
|
|
6
6
|
m as default
|
|
7
7
|
};
|
|
@@ -6,15 +6,18 @@ type __VLS_Props = {
|
|
|
6
6
|
* 行级字典请用独立 key（如 `` `resourceType.${row.id}` ``）。
|
|
7
7
|
*/
|
|
8
8
|
dictKey: string;
|
|
9
|
-
/**
|
|
9
|
+
/**
|
|
10
|
+
* 外部直传字典数据：无需依赖全局数据源即可翻译。格式同 `DictItem[]`（`{ label, value, icon?, color?, type? }`）。
|
|
11
|
+
* `color` 可以是主题色名，也可以是 `#ff7d45` 这类原生 CSS 颜色值（角标上按纯色渲染，不自动渐变）
|
|
12
|
+
*/
|
|
10
13
|
dict?: DictItem[];
|
|
11
14
|
/** 是否渲染成角标并指定方位，true 时为右上角 */
|
|
12
15
|
corner?: boolean | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
|
|
13
16
|
/**
|
|
14
17
|
* 角标形态（`corner` 生效时才起作用）：
|
|
15
18
|
* `badge` 贴边小标签（默认）；`ribbon` 斜跨在角上的绶带（45° 文字，如卡片右上角的「委托任务」）。
|
|
16
|
-
* 绶带与角点留有间距、文案建议 ≤4
|
|
17
|
-
* `--zl-corner-tag-ribbon-size` / `--zl-corner-tag-ribbon-gap
|
|
19
|
+
* 绶带与角点留有间距、文案建议 ≤4 个字；梯形高度用 `ribbon-height` 透传（带内字号跟着高度等比缩放），
|
|
20
|
+
* 尺寸/留白仍走 CSS 变量 `--zl-corner-tag-ribbon-size` / `--zl-corner-tag-ribbon-gap`。
|
|
18
21
|
*/
|
|
19
22
|
variant?: 'badge' | 'ribbon';
|
|
20
23
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.zl-empty[data-v-
|
|
1
|
+
.zl-empty[data-v-931061b4]{padding-block:5vw;display:flex;flex-direction:column;justify-content:center;align-items:center}.zl-empty__icon[data-v-931061b4]{width:128px;max-width:100%}.zl-empty__icon svg[data-v-931061b4]{width:100%}.zl-empty__text[data-v-931061b4]{margin-top:18px;font-size:14px;line-height:22px;color:var(--zl-text-3, var(--el-text-color-secondary, #79879c))}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import o from "./index2.vue.mjs";
|
|
2
2
|
import './index.css';/* empty css */
|
|
3
3
|
import t from "../../_virtual/_plugin-vue_export-helper.mjs";
|
|
4
|
-
const
|
|
4
|
+
const _ = /* @__PURE__ */ t(o, [["__scopeId", "data-v-931061b4"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
_ as default
|
|
7
7
|
};
|
|
8
8
|
//# sourceMappingURL=index.vue.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.zl-file-fetch-error[data-v-
|
|
1
|
+
.zl-file-fetch-error[data-v-ac3baf14]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--zl-text-3, var(--el-text-color-secondary));font-size:13px}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import o from "./FileFetchError2.vue.mjs";
|
|
2
2
|
import './FileFetchError.css';/* empty css */
|
|
3
3
|
import r from "../../_virtual/_plugin-vue_export-helper.mjs";
|
|
4
|
-
const
|
|
4
|
+
const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-ac3baf14"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
e as default
|
|
7
7
|
};
|
|
8
8
|
//# sourceMappingURL=FileFetchError.vue.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.zl-layout-switch .el-radio-button[data-v-
|
|
1
|
+
.zl-layout-switch .el-radio-button[data-v-13a0ea85]{line-height:1;font-size:14px;padding:9px}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import o from "./index2.vue.mjs";
|
|
2
2
|
import './index.css';/* empty css */
|
|
3
3
|
import t from "../../_virtual/_plugin-vue_export-helper.mjs";
|
|
4
|
-
const
|
|
4
|
+
const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-13a0ea85"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
p as default
|
|
7
7
|
};
|
|
8
8
|
//# sourceMappingURL=index.vue.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.zl-login__action[data-v-
|
|
1
|
+
.zl-login__action[data-v-a1724530]{margin-top:15px}[data-v-a1724530] .el-form-item{margin-bottom:20px}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./LoginForm2.vue.mjs";
|
|
2
2
|
import './LoginForm.css';/* empty css */
|
|
3
3
|
import r from "../../../_virtual/_plugin-vue_export-helper.mjs";
|
|
4
|
-
const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-
|
|
4
|
+
const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-a1724530"]]);
|
|
5
5
|
export {
|
|
6
6
|
p as default
|
|
7
7
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.slide-checker[data-v-
|
|
1
|
+
.slide-checker[data-v-7ddcdcbf]{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:32px;background-color:var(--slider-check-bg-color);pointer-events:none;--slider-check-bg-color: var(--zl-fill-3);--slider-check-progress: 0px;--slider-check-success-color: var(--zl-success-6, var(--el-color-success));--slider-check-trigger-border-color: var(--slider-check-bg-color);--slider-check-trigger-color: var(--zl-text-3)}.slide-checker__progress[data-v-7ddcdcbf]{position:absolute;top:0;left:0;width:var(--slider-check-progress);background-color:var(--slider-check-success-color);height:100%;opacity:.2}.slide-checker__trigger[data-v-7ddcdcbf]{position:absolute;left:var(--slider-check-progress);top:0;height:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:var(--zl-bg-1, #fff);border:1px solid var(--slider-check-trigger-border-color);cursor:grab;pointer-events:auto;color:var(--slider-check-trigger-color)}.slide-checker__text[data-v-7ddcdcbf]{font-size:12px;color:var(--zl-text-3);user-select:none}.slide-checker.is-checked[data-v-7ddcdcbf]{--slider-check-bg-color: var(--slider-check-success-color)}.slide-checker.is-checked .slide-checker__text[data-v-7ddcdcbf]{color:#fff}.slide-checker.is-checked .slide-checker__trigger[data-v-7ddcdcbf]{border-color:transparent;color:var(--slider-check-success-color);pointer-events:none}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import o from "./SlideChecker2.vue.mjs";
|
|
2
2
|
import './SlideChecker.css';/* empty css */
|
|
3
|
-
import
|
|
4
|
-
const
|
|
3
|
+
import r from "../../../_virtual/_plugin-vue_export-helper.mjs";
|
|
4
|
+
const e = /* @__PURE__ */ r(o, [["__scopeId", "data-v-7ddcdcbf"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
e as default
|
|
7
7
|
};
|
|
8
8
|
//# sourceMappingURL=SlideChecker.vue.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.zl-page-container[data-v-
|
|
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}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./index2.vue.mjs";
|
|
2
2
|
import './index.css';/* empty css */
|
|
3
3
|
import t from "../../_virtual/_plugin-vue_export-helper.mjs";
|
|
4
|
-
const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-
|
|
4
|
+
const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-4a47d884"]]);
|
|
5
5
|
export {
|
|
6
6
|
m as default
|
|
7
7
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";.zl-pagination[data-v-
|
|
1
|
+
@charset "UTF-8";.zl-pagination[data-v-78457fcd]{padding:6px 16px;background-color:var(--zl-fill-1, #f9fbfd);justify-content:var(--zl-pagination-justify, flex-end)}.zl-pagination--left[data-v-78457fcd]{--zl-pagination-justify: flex-start}.zl-pagination--center[data-v-78457fcd]{--zl-pagination-justify: center}.zl-pagination--right[data-v-78457fcd]{--zl-pagination-justify: flex-end}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./index2.vue.mjs";
|
|
2
2
|
import './index.css';/* empty css */
|
|
3
3
|
import t from "../../_virtual/_plugin-vue_export-helper.mjs";
|
|
4
|
-
const i = /* @__PURE__ */ t(o, [["__scopeId", "data-v-
|
|
4
|
+
const i = /* @__PURE__ */ t(o, [["__scopeId", "data-v-78457fcd"]]);
|
|
5
5
|
export {
|
|
6
6
|
i as default
|
|
7
7
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.zl-sorter-list[data-v-
|
|
1
|
+
.zl-sorter-list[data-v-32694666]{display:flex}.zl-sorter-list__separator[data-v-32694666]{margin:4px 2px;width:1px;background-color:var(--zl-border-2, #e3e9ef)}.zl-sorter-list__separator[data-v-32694666]:last-child{display:none}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import o from "./ZlSorterList2.vue.mjs";
|
|
2
2
|
import './ZlSorterList.css';/* empty css */
|
|
3
3
|
import t from "../../_virtual/_plugin-vue_export-helper.mjs";
|
|
4
|
-
const
|
|
4
|
+
const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-32694666"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
s as default
|
|
7
7
|
};
|
|
8
8
|
//# sourceMappingURL=ZlSorterList.vue.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.zl-sorter[data-v-
|
|
1
|
+
.zl-sorter[data-v-65e8178e]{display:inline-flex;align-items:center;cursor:pointer;gap:4px;font-size:12px;padding:1px 4px}.zl-sorter__label[data-v-65e8178e]{color:var(--zl-text-2, #4d5e7d)}.zl-sorter__label.active[data-v-65e8178e]{color:var(--zl-link-6, var(--el-color-primary, #3b82f6))}.zl-sorter__icon[data-v-65e8178e]{display:inline-flex;flex-direction:column;font-size:8px;color:var(--zl-text-4, #b3c0cc)}.zl-sorter__icon .active[data-v-65e8178e]{color:var(--zl-link-6, var(--el-color-primary, #3b82f6))}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "./index2.vue.mjs";
|
|
2
2
|
import './index.css';/* empty css */
|
|
3
3
|
import r from "../../_virtual/_plugin-vue_export-helper.mjs";
|
|
4
|
-
const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-
|
|
4
|
+
const p = /* @__PURE__ */ r(o, [["__scopeId", "data-v-65e8178e"]]);
|
|
5
5
|
export {
|
|
6
6
|
p as default
|
|
7
7
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.zl-step[data-v-
|
|
1
|
+
.zl-step[data-v-0fadba95]{width:100%}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import o from "./index2.vue.mjs";
|
|
2
2
|
import './index.css';/* empty css */
|
|
3
3
|
import t from "../../_virtual/_plugin-vue_export-helper.mjs";
|
|
4
|
-
const
|
|
4
|
+
const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-0fadba95"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
f as default
|
|
7
7
|
};
|
|
8
8
|
//# sourceMappingURL=index.vue.mjs.map
|
|
@@ -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);display:block;width:var(--zl-ribbon-
|
|
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)}
|
|
@@ -1,12 +1,25 @@
|
|
|
1
1
|
type __VLS_Props = {
|
|
2
2
|
/** 文案前的图标名，走 ZlIcon 渲染（ribbon 形态下不展示图标） */
|
|
3
3
|
icon?: string;
|
|
4
|
-
/**
|
|
4
|
+
/**
|
|
5
|
+
* 背景色。两种写法：
|
|
6
|
+
* ① 内置主题色名（`primary` / `success` / `green` …），走色板 6→3 渐变；
|
|
7
|
+
* ② 原生 CSS 颜色值（`#ff7d45` / `rgb(255 125 69)` / `var(--zl-primary-6)`），**原样纯色填充、不自动渐变**，
|
|
8
|
+
* 需要渐变时自己传 `linear-gradient(...)`。
|
|
9
|
+
* 含 `#` / `(` / 逗号 / 空格的值一律按 ② 处理（想写 `red` 这类关键字请写成 `#f00`，否则会被当成色名）。
|
|
10
|
+
*/
|
|
5
11
|
color?: string;
|
|
6
12
|
/** 贴在容器的哪个角，默认右上角 */
|
|
7
13
|
position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
|
|
8
14
|
/** 形态：`badge` 贴边小标签（默认）/ `ribbon` 斜跨角上的绶带 */
|
|
9
15
|
variant?: 'badge' | 'ribbon';
|
|
16
|
+
/**
|
|
17
|
+
* 绶带的梯形高度（斜带宽度的垂直值），只在 `variant="ribbon"` 下生效。
|
|
18
|
+
* 数字按 px 处理，字符串原样当 CSS 长度（`36px` / `2rem`）；默认 `28px`。
|
|
19
|
+
* 加大后正方形底图会自动跟着长开，不会把斜带裁掉；带内文字字号也按该高度等比缩放，
|
|
20
|
+
* 窄带不会把字撑出带外、宽带也不会显得字过小（可用 CSS 变量 `--zl-corner-tag-ribbon-font-size` 固定字号）。
|
|
21
|
+
*/
|
|
22
|
+
ribbonHeight?: number | string;
|
|
10
23
|
};
|
|
11
24
|
declare function __VLS_template(): {
|
|
12
25
|
attrs: Partial<{}>;
|
|
@@ -1,34 +1,45 @@
|
|
|
1
|
-
import { defineComponent as n, openBlock as
|
|
2
|
-
import
|
|
3
|
-
const
|
|
1
|
+
import { defineComponent as i, computed as n, openBlock as l, createElementBlock as s, normalizeStyle as u, normalizeClass as g, createBlock as d, createCommentVNode as m, createElementVNode as b, renderSlot as f } from "vue";
|
|
2
|
+
import v from "../ZlIcon/index.vue.mjs";
|
|
3
|
+
const z = { class: "zl-corner-tag__text" }, y = /* @__PURE__ */ i({
|
|
4
4
|
name: "ZlCornerTag",
|
|
5
5
|
__name: "ZlCornerTag",
|
|
6
6
|
props: {
|
|
7
7
|
icon: {},
|
|
8
8
|
color: {},
|
|
9
9
|
position: { default: "top-right" },
|
|
10
|
-
variant: { default: "badge" }
|
|
10
|
+
variant: { default: "badge" },
|
|
11
|
+
ribbonHeight: {}
|
|
11
12
|
},
|
|
12
13
|
setup(e) {
|
|
13
|
-
|
|
14
|
-
|
|
14
|
+
const t = e, r = n(() => !!t.color && /[#(,\s]/.test(t.color)), a = n(() => {
|
|
15
|
+
const { color: o } = t;
|
|
16
|
+
return !o || !r.value ? {} : /gradient\(|url\(/i.test(o) ? { backgroundImage: o } : { backgroundColor: o };
|
|
17
|
+
}), c = n(() => {
|
|
18
|
+
const { ribbonHeight: o } = t;
|
|
19
|
+
return o == null || o === "" ? {} : {
|
|
20
|
+
"--zl-corner-tag-ribbon-width": typeof o == "number" ? `${o}px` : String(o)
|
|
21
|
+
};
|
|
22
|
+
});
|
|
23
|
+
return (o, C) => (l(), s("div", {
|
|
24
|
+
class: g(["zl-corner-tag", {
|
|
15
25
|
[`zl-corner-tag-position-${e.position}`]: e.position,
|
|
16
|
-
[`zl-corner-tag-color-${e.color}`]: e.color,
|
|
26
|
+
[`zl-corner-tag-color-${e.color}`]: e.color && !r.value,
|
|
17
27
|
[`zl-corner-tag-variant-${e.variant}`]: e.variant !== "badge"
|
|
18
|
-
}])
|
|
28
|
+
}]),
|
|
29
|
+
style: u([a.value, c.value])
|
|
19
30
|
}, [
|
|
20
|
-
e.icon ? (
|
|
31
|
+
e.icon ? (l(), d(v, {
|
|
21
32
|
key: 0,
|
|
22
33
|
class: "zl-corner-tag__icon",
|
|
23
34
|
icon: e.icon
|
|
24
|
-
}, null, 8, ["icon"])) :
|
|
25
|
-
|
|
26
|
-
|
|
35
|
+
}, null, 8, ["icon"])) : m("", !0),
|
|
36
|
+
b("span", z, [
|
|
37
|
+
f(o.$slots, "default")
|
|
27
38
|
])
|
|
28
|
-
],
|
|
39
|
+
], 6));
|
|
29
40
|
}
|
|
30
41
|
});
|
|
31
42
|
export {
|
|
32
|
-
|
|
43
|
+
y as default
|
|
33
44
|
};
|
|
34
45
|
//# sourceMappingURL=ZlCornerTag.vue.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.zl-text[data-v-
|
|
1
|
+
.zl-text[data-v-2d3647ab]{display:inline-flex;font-size:12px;line-height:20px}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import o from "./index2.vue.mjs";
|
|
2
2
|
import './index.css';/* empty css */
|
|
3
3
|
import t from "../../_virtual/_plugin-vue_export-helper.mjs";
|
|
4
|
-
const
|
|
4
|
+
const p = /* @__PURE__ */ t(o, [["__scopeId", "data-v-2d3647ab"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
p as default
|
|
7
7
|
};
|
|
8
8
|
//# sourceMappingURL=index.vue.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.zl-upload[data-v-
|
|
1
|
+
.zl-upload[data-v-37051671]{width:100%}.zl-upload__trigger[data-v-37051671]{width:80px;height:80px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--zl-border-3, var(--el-border-color));border-radius:6px;cursor:pointer}.zl-upload__trigger[data-v-37051671]:hover{border-color:var(--zl-primary-6, var(--el-color-primary))}.zl-upload__item[data-v-37051671]{display:flex;align-items:center;gap:8px;padding:4px 8px;width:100%}.zl-upload__item[data-v-37051671]:hover{background:var(--zl-fill-1, var(--el-fill-color-light))}.zl-upload__item-thumbnail[data-v-37051671]{height:32px;width:32px;object-fit:cover;cursor:pointer}.zl-upload__item-name[data-v-37051671]{flex:1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.zl-upload__item-op[data-v-37051671]{color:var(--zl-text-2)}.zl-upload__tip[data-v-37051671]{font-size:12px;color:var(--zl-text-3);line-height:18px;white-space:pre-wrap;word-break:break-all}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import o from "./index2.vue.mjs";
|
|
2
2
|
import './index.css';/* empty css */
|
|
3
3
|
import t from "../../_virtual/_plugin-vue_export-helper.mjs";
|
|
4
|
-
const
|
|
4
|
+
const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-37051671"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
m as default
|
|
7
7
|
};
|
|
8
8
|
//# sourceMappingURL=index.vue.mjs.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zl-ui-kit/components",
|
|
3
|
-
"version": "0.
|
|
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/composables": "0.
|
|
43
|
-
"@zl-ui-kit/
|
|
44
|
-
"@zl-ui-kit/
|
|
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/eslint-config": "1.0.0",
|
|
102
101
|
"@jichuang/tsconfig": "1.0.0",
|
|
103
|
-
"@jichuang/
|
|
104
|
-
"@zl-ui-kit/theme": "0.
|
|
102
|
+
"@jichuang/eslint-config": "1.0.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",
|