@zl-ui-kit/components 0.23.0 → 0.24.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +62 -39
- package/dist/components/ZlAppLayout/Vertical2.vue.mjs +39 -41
- package/dist/components/ZlAppSlogan/index.css +1 -1
- package/dist/components/ZlAppSlogan/index.vue.d.ts +1 -1
- package/dist/components/ZlAppSlogan/index.vue.mjs +19 -12
- package/dist/components/ZlButton/index.vue.d.ts +19 -2
- package/dist/components/ZlButton/index.vue.mjs +30 -14
- package/dist/components/ZlCopy/index.css +1 -1
- package/dist/components/ZlCopy/index.vue.mjs +2 -2
- package/dist/components/ZlCopy/index2.vue.mjs +30 -32
- package/dist/components/ZlDevMenu/index.vue.mjs +34 -33
- package/dist/components/ZlDialog/index.vue.mjs +26 -25
- package/dist/components/ZlDrawer/index.vue.mjs +23 -22
- package/dist/components/ZlLogin/components/LoginForm.css +1 -1
- package/dist/components/ZlLogin/components/LoginForm.vue.mjs +1 -1
- package/dist/components/ZlLogin/components/LoginForm2.vue.mjs +26 -25
- package/dist/components/ZlPopconfirm/index.vue.mjs +25 -24
- package/dist/components/ZlSearch/index.vue.mjs +196 -202
- package/dist/locales/zh-cn.mjs +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -631,11 +631,12 @@ presetIconifyIcon(icons)
|
|
|
631
631
|
|
|
632
632
|
### ZlButton — 按钮
|
|
633
633
|
|
|
634
|
-
`el-button` 的**零语义透传封装**：显式声明 EP 全部 19 个属性（`size` / `type` / `plain` / `text` / `link` / `bg` / `round` / `circle` / `dashed` / `loading` / `loadingIcon` / `icon` / `disabled` / `color` / `dark` / `nativeType` / `autofocus` / `autoInsertSpace` / `tag`），默认值一律 `undefined
|
|
634
|
+
`el-button` 的**零语义透传封装**：显式声明 EP 全部 19 个属性（`size` / `type` / `plain` / `text` / `link` / `bg` / `round` / `circle` / `dashed` / `loading` / `loadingIcon` / `icon` / `disabled` / `color` / `dark` / `nativeType` / `autofocus` / `autoInsertSpace` / `tag`），默认值一律 `undefined`（不覆盖 EP 默认与 `el-form` 的 `disabled` 继承），唯一例外是 `round` 默认 `true`（胶囊圆角）；未声明的属性、事件与 `default` / `icon` / `loading` 插槽原样透传，不附带任何自定义样式。
|
|
635
635
|
|
|
636
636
|
```vue
|
|
637
637
|
<ZlButton type="primary" @click="save">保存</ZlButton>
|
|
638
|
-
<ZlButton type="primary" plain
|
|
638
|
+
<ZlButton type="primary" plain>朴素按钮</ZlButton>
|
|
639
|
+
<ZlButton type="primary" :round="false">方形圆角</ZlButton>
|
|
639
640
|
<ZlButton type="warning" loading>提交中</ZlButton>
|
|
640
641
|
<ZlButton type="primary" text>文字按钮</ZlButton>
|
|
641
642
|
<ZlButton color="#5b8ff9" dark>自定义色</ZlButton>
|
|
@@ -646,7 +647,7 @@ presetIconifyIcon(icons)
|
|
|
646
647
|
</ZlButton>
|
|
647
648
|
```
|
|
648
649
|
|
|
649
|
-
> 与 `ZlAction` 的分工：操作列 / 卡片内的按钮组用 `ZlAction`（汇总、折叠、权限），单颗按钮用 `ZlButton
|
|
650
|
+
> 与 `ZlAction` 的分工：操作列 / 卡片内的按钮组用 `ZlAction`（汇总、折叠、权限），单颗按钮用 `ZlButton`（默认胶囊圆角，需要 EP 的 4px 圆角时传 `:round="false"`）。
|
|
650
651
|
|
|
651
652
|
### ZlTag — 标签
|
|
652
653
|
|
|
@@ -846,7 +847,7 @@ presetIconifyIcon(icons)
|
|
|
846
847
|
|
|
847
848
|
### 其余
|
|
848
849
|
|
|
849
|
-
`ZlText`（文本省略）、`ZlAutoTooltip`（超长省略 + tooltip）、`ZlDescription`（描述列表）、`ZlSection`（分区容器）、`ZlAvatar`(+Group)、`ZlAppSlogan
|
|
850
|
+
`ZlText`（文本省略）、`ZlAutoTooltip`（超长省略 + tooltip）、`ZlDescription`（描述列表）、`ZlSection`（分区容器）、`ZlAvatar`(+Group)、`ZlAppSlogan`（品牌标语，标题字体优先 PingFang TC，回退 `--zl-slogan-font-family`）、`ZlIconLabel`/`ZlIconHover`（图标 + 文字组合）。
|
|
850
851
|
|
|
851
852
|
---
|
|
852
853
|
|
|
@@ -1764,15 +1765,17 @@ const items: SearchItem[] = [
|
|
|
1764
1765
|
校验与取值不受影响），所以查询条永远只有一行高；
|
|
1765
1766
|
- `ResizeObserver` 监听宽度变化重算，拉宽窗口后展开按钮会自己消失；查询项增删/显隐后也会重测。
|
|
1766
1767
|
|
|
1767
|
-
|
|
1768
|
-
|
|
1768
|
+
**按钮布局**：操作区从左到右为「搜索」→ 展开/收起图标按钮（有溢出时）→「重置」；「搜索」「重置」为
|
|
1769
|
+
文本按钮、不带图标，展开/收起为纯图标按钮。点击图标按钮在查询条**上层**展开全量表单浮层
|
|
1770
|
+
（`position: absolute` + 上滑 `--28px` 淡入，不改变页面高度），再点收起；搜索/重置后自动收起。
|
|
1769
1771
|
`labelsVisible` 不显式传时，仅在发生溢出时展示「筛选条件」标签行（旧名 `showLabels` 仍兼容）。
|
|
1770
1772
|
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
+
**图标按钮的移入提示**：展开、收起是纯图标按钮，鼠标移入给出文字提示（原生 `title`，同时带 `aria-label`
|
|
1774
|
+
供读屏）。文案走 i18n，随 `setLocale` 切换、也可被消费方覆盖：
|
|
1773
1775
|
|
|
1774
1776
|
| 按钮 | key | 中文 | English |
|
|
1775
1777
|
| ---- | -------------------- | ---- | -------- |
|
|
1778
|
+
| 搜索 | `zl.search.search` | 搜索 | Search |
|
|
1776
1779
|
| 重置 | `zl.search.reset` | 重置 | Reset |
|
|
1777
1780
|
| 展开 | `zl.search.expand` | 展开 | Expand |
|
|
1778
1781
|
| 收起 | `zl.search.collapse` | 收起 | Collapse |
|
|
@@ -4071,7 +4074,7 @@ const { i18n } = useLocale({ messages })
|
|
|
4071
4074
|
| ZlPopconfirm | `zl.popconfirm.confirm` / `cancel` | 确定 / 取消 |
|
|
4072
4075
|
| ZlLayoutSwitch | `zl.layoutSwitch.grid` / `table` | 网格 / 表格 |
|
|
4073
4076
|
| ZlUpload | `zl.upload.accept` / `limit` / `maxSize` / `nameSpace` | 仅支持{accept}格式的文件 / 最多可上传{limit}个 / 大小不超过{maxSize}MB / 文件名中不得包含空格 |
|
|
4074
|
-
| ZlSearch | `zl.search.search` / `filterConditions` / `all` |
|
|
4077
|
+
| ZlSearch | `zl.search.search` / `filterConditions` / `all` | 搜索 / 筛选条件 / 全部 |
|
|
4075
4078
|
| ZlLogin | `zl.login.username` / `password` / `usernamePlaceholder` / `passwordPlaceholder` / `slideRequired` / `slideText` / `slideSuccess` / `submit` / `welcome` | 用户名 / 密码 / 请输入用户名 / 请输入密码 / 请将滑块移至右侧 / 请滑动到右侧 / 验证通过 / 登 录 / 欢迎登录 |
|
|
4076
4079
|
| ZlFilePreview | `zl.filePreview.typeError` / `fetchError` | 获取文件类型失败 / 文件获取失败 |
|
|
4077
4080
|
| ZlAction | `zl.action.more` | 更多 |
|
|
@@ -4116,7 +4119,7 @@ const { i18n } = useLocale({ messages })
|
|
|
4116
4119
|
| [`ZlAvatar`](#zlavatar) | 主入口 | 3 | 0 | 0 | 0 |
|
|
4117
4120
|
| [`ZlAvatarGroup`](#zlavatargroup) | 主入口 | 3 | 0 | 0 | 0 |
|
|
4118
4121
|
| [`ZlBreadcrumb`](#zlbreadcrumb) | 主入口 | 2 | 0 | 1 | 0 |
|
|
4119
|
-
| [`ZlButton`](#zlbutton) | 主入口 | 19 | 0 |
|
|
4122
|
+
| [`ZlButton`](#zlbutton) | 主入口 | 19 | 0 | 3 | 0 |
|
|
4120
4123
|
| [`ZlCard`](#zlcard) | 主入口 | 3 | 0 | 8 | 0 |
|
|
4121
4124
|
| [`ZlCardPage`](#zlcardpage) | 主入口 | 7 | 1 | 3 | 3 |
|
|
4122
4125
|
| [`ZlCheckAll`](#zlcheckall) | 主入口 | 2 | 1 | 0 | 0 |
|
|
@@ -4396,11 +4399,11 @@ import { ZlAppSlogan } from '@zl-ui-kit/components'
|
|
|
4396
4399
|
|
|
4397
4400
|
**props**
|
|
4398
4401
|
|
|
4399
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
4400
|
-
| ----------- | --------- | ------ | ---- | ------------------------------------- |
|
|
4401
|
-
| `collapsed` | `boolean` | — | 否 | `collapsed` | 为 true 时只显示 Logo，隐藏标题
|
|
4402
|
-
| `logo` | `string` | — | 否 | `logo="https://example.com/logo.png"` | 品牌 Logo
|
|
4403
|
-
| `title` | `string` | — | 否 | `title="标题"` | 应用标题文案，折叠时隐藏
|
|
4402
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4403
|
+
| ----------- | --------- | ------ | ---- | ------------------------------------- | -------------------------------------------------- |
|
|
4404
|
+
| `collapsed` | `boolean` | — | 否 | `collapsed` | 为 true 时只显示 Logo，隐藏标题 |
|
|
4405
|
+
| `logo` | `string` | — | 否 | `logo="https://example.com/logo.png"` | 品牌 Logo 的图片地址；不传时渲染内置默认 Logo 图标 |
|
|
4406
|
+
| `title` | `string` | — | 否 | `title="标题"` | 应用标题文案，折叠时隐藏 |
|
|
4404
4407
|
|
|
4405
4408
|
#### `ZlAutoTooltip`
|
|
4406
4409
|
|
|
@@ -4555,7 +4558,7 @@ import { ZlBreadcrumb } from '@zl-ui-kit/components'
|
|
|
4555
4558
|
|
|
4556
4559
|
**简介**：ZlButton —— `el-button` 全属性透传封装 显式声明 `el-button` 的全部 props（默认值统一为 `undefined`，不覆盖 EP 自身默认与 `el-form` 的 disabled 继承）， `default` / `icon` / `loading` 插槽与未声明的事件、…
|
|
4557
4560
|
|
|
4558
|
-
**接口概览**：19 props
|
|
4561
|
+
**接口概览**：19 props · 3 插槽
|
|
4559
4562
|
|
|
4560
4563
|
**用法示例**
|
|
4561
4564
|
|
|
@@ -4569,29 +4572,49 @@ import { ZlButton } from '@zl-ui-kit/components'
|
|
|
4569
4572
|
</template>
|
|
4570
4573
|
```
|
|
4571
4574
|
|
|
4575
|
+
**插槽用法**
|
|
4576
|
+
|
|
4577
|
+
```vue
|
|
4578
|
+
<template>
|
|
4579
|
+
<ZlButton>
|
|
4580
|
+
<template #icon>…</template>
|
|
4581
|
+
<template #loading>…</template>
|
|
4582
|
+
<template #default>…</template>
|
|
4583
|
+
</ZlButton>
|
|
4584
|
+
</template>
|
|
4585
|
+
```
|
|
4586
|
+
|
|
4572
4587
|
**props**
|
|
4573
4588
|
|
|
4574
|
-
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明
|
|
4575
|
-
| ----------------- | ---------------------------------------------------------------------------------- | ----------- | ---- | ----------------------------- |
|
|
4576
|
-
| `size` | `'large' \| 'default' \| 'small'` | `undefined` | 否 | `size="large"` | 尺寸；不传时沿用 `el-form` / 全局配置
|
|
4577
|
-
| `disabled` | `boolean` | `undefined` | 否 | `disabled` | 是否禁用；不传时沿用 `el-form` 的 disabled
|
|
4578
|
-
| `type` | `'default' \| 'primary' \| 'success' \| 'warning' \| 'info' \| 'danger' \| 'text'` | `undefined` | 否 | `type="default"` | 按钮类型
|
|
4579
|
-
| `icon` | `string \| Component` | `undefined` | 否 | `:icon="icon"` | 图标（同 el-button 的 icon，支持组件或已注册的组件名）
|
|
4580
|
-
| `nativeType` | `'button' \| 'submit' \| 'reset'` | `undefined` | 否 | `native-type="button"` | 原生 type 属性
|
|
4581
|
-
| `loading` | `boolean` | `undefined` | 否 | `loading` | 是否加载中
|
|
4582
|
-
| `loadingIcon` | `string \| Component` | `undefined` | 否 | `:loading-icon="loadingIcon"` | 自定义加载图标
|
|
4583
|
-
| `plain` | `boolean` | `undefined` | 否 | `plain` | 是否为朴素按钮
|
|
4584
|
-
| `text` | `boolean` | `undefined` | 否 | `text` | 是否为文字按钮
|
|
4585
|
-
| `link` | `boolean` | `undefined` | 否 | `link` | 是否为链接按钮
|
|
4586
|
-
| `bg` | `boolean` | `undefined` | 否 | `bg` | 文字按钮是否始终显示背景
|
|
4587
|
-
| `autofocus` | `boolean` | `undefined` | 否 | `autofocus` | 是否自动聚焦
|
|
4588
|
-
| `round` | `boolean` | `
|
|
4589
|
-
| `circle` | `boolean` | `undefined` | 否 | `circle` | 是否为圆形按钮
|
|
4590
|
-
| `dashed` | `boolean` | `undefined` | 否 | `dashed` | 是否为虚线按钮
|
|
4591
|
-
| `color` | `string` | `undefined` | 否 | `color="#409eff"` | 自定义颜色（自动计算 hover / active）
|
|
4592
|
-
| `dark` | `boolean` | `undefined` | 否 | `dark` | 自定义颜色是否走暗色模式
|
|
4593
|
-
| `autoInsertSpace` | `boolean` | `undefined` | 否 | `auto-insert-space` | 两个汉字之间是否自动插入空格
|
|
4594
|
-
| `tag` | `string \| Record<string, any>` | `undefined` | 否 | `:tag="tag"` | 自定义渲染标签，默认 `button`
|
|
4589
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
4590
|
+
| ----------------- | ---------------------------------------------------------------------------------- | ----------- | ---- | ----------------------------- | ---------------------------------------------------------------- |
|
|
4591
|
+
| `size` | `'large' \| 'default' \| 'small'` | `undefined` | 否 | `size="large"` | 尺寸；不传时沿用 `el-form` / 全局配置 |
|
|
4592
|
+
| `disabled` | `boolean` | `undefined` | 否 | `disabled` | 是否禁用；不传时沿用 `el-form` 的 disabled |
|
|
4593
|
+
| `type` | `'default' \| 'primary' \| 'success' \| 'warning' \| 'info' \| 'danger' \| 'text'` | `undefined` | 否 | `type="default"` | 按钮类型 |
|
|
4594
|
+
| `icon` | `string \| Component` | `undefined` | 否 | `:icon="icon"` | 图标（同 el-button 的 icon，支持组件或已注册的组件名） |
|
|
4595
|
+
| `nativeType` | `'button' \| 'submit' \| 'reset'` | `undefined` | 否 | `native-type="button"` | 原生 type 属性 |
|
|
4596
|
+
| `loading` | `boolean` | `undefined` | 否 | `loading` | 是否加载中 |
|
|
4597
|
+
| `loadingIcon` | `string \| Component` | `undefined` | 否 | `:loading-icon="loadingIcon"` | 自定义加载图标 |
|
|
4598
|
+
| `plain` | `boolean` | `undefined` | 否 | `plain` | 是否为朴素按钮 |
|
|
4599
|
+
| `text` | `boolean` | `undefined` | 否 | `text` | 是否为文字按钮 |
|
|
4600
|
+
| `link` | `boolean` | `undefined` | 否 | `link` | 是否为链接按钮 |
|
|
4601
|
+
| `bg` | `boolean` | `undefined` | 否 | `bg` | 文字按钮是否始终显示背景 |
|
|
4602
|
+
| `autofocus` | `boolean` | `undefined` | 否 | `autofocus` | 是否自动聚焦 |
|
|
4603
|
+
| `round` | `boolean` | `true` | 否 | `:round="false"` | 是否为圆角按钮（胶囊形）；默认开启，传 false 走 EP 默认 4px 圆角 |
|
|
4604
|
+
| `circle` | `boolean` | `undefined` | 否 | `circle` | 是否为圆形按钮 |
|
|
4605
|
+
| `dashed` | `boolean` | `undefined` | 否 | `dashed` | 是否为虚线按钮 |
|
|
4606
|
+
| `color` | `string` | `undefined` | 否 | `color="#409eff"` | 自定义颜色（自动计算 hover / active） |
|
|
4607
|
+
| `dark` | `boolean` | `undefined` | 否 | `dark` | 自定义颜色是否走暗色模式 |
|
|
4608
|
+
| `autoInsertSpace` | `boolean` | `undefined` | 否 | `auto-insert-space` | 两个汉字之间是否自动插入空格 |
|
|
4609
|
+
| `tag` | `string \| Record<string, any>` | `undefined` | 否 | `:tag="tag"` | 自定义渲染标签，默认 `button` |
|
|
4610
|
+
|
|
4611
|
+
**插槽（slots）**
|
|
4612
|
+
|
|
4613
|
+
| 插槽 | 作用域参数 | 示例 | 说明 |
|
|
4614
|
+
| --------- | ---------- | --------------------------------- | ---- |
|
|
4615
|
+
| `icon` | — | `<template #icon>…</template>` | — |
|
|
4616
|
+
| `loading` | — | `<template #loading>…</template>` | — |
|
|
4617
|
+
| `default` | — | `<template #default>…</template>` | — |
|
|
4595
4618
|
|
|
4596
4619
|
#### `ZlCard`
|
|
4597
4620
|
|
|
@@ -7628,7 +7651,7 @@ ZlMenu 菜单项配置
|
|
|
7628
7651
|
| `el-form` | `ZlForm` | 弹窗内新增 / 编辑 / 详情表单（schema 驱动） |
|
|
7629
7652
|
| `el-card` | `ZlCard` | 卡片容器 |
|
|
7630
7653
|
| `el-button`（操作栏 / 卡片内） | `ZlAction` | 操作列与卡片内的按钮组用 `ZlAction`（汇总 / 折叠 / 权限） |
|
|
7631
|
-
| `el-button`（单颗按钮） | `ZlButton` |
|
|
7654
|
+
| `el-button`（单颗按钮） | `ZlButton` | 全属性透传；`round` 默认开启（胶囊圆角），`:round="false"` 回到 EP 默认圆角，差异见 §15.5 |
|
|
7632
7655
|
| `el-tooltip`（超长省略） | `ZlAutoTooltip` | 文字溢出时自动提示 |
|
|
7633
7656
|
| `el-icon` | `ZlIcon` | 需先注册图标集（§4.1） |
|
|
7634
7657
|
| `el-tree` | `ZlTree` | 勾选多选 / 字段映射 / 暴露方法见 §7 › ZlTree |
|
|
@@ -7732,7 +7755,7 @@ ZlMenu 菜单项配置
|
|
|
7732
7755
|
| `ZlTable` | 列插槽按 `prop` 名命名，作用域含 `{ row, column, $index }`；暴露 `el-table` 的 15 个公开方法 + `elTable` getter | `tableRef.toggleRowSelection(row)` 等均有类型提示；其余方法走 `tableRef.elTable` |
|
|
7733
7756
|
| `ZlSwitch` | 主名 `checked-value` / `unchecked-value`，同时**兼容 EP 的 `active-value` / `inactive-value` 别名**（同传时主名优先）；`@change` 参数是**业务值**而非内部布尔 | 直搬 `:active-value="'1'"` 可用；从 `el-switch` 迁移时注意 `@change` 入参含义已变 |
|
|
7734
7757
|
| `ZlTabs` | schema 驱动：`tab.key`→`name`、`tab.title`→`label`；页签内容**默认懒挂载**（`lazy` / `lazyLoad` 默认 `true`）；内容写在以 key 命名的插槽里；`border` **默认 `false`**（不显示导航下分隔线，与 EP 默认显示相反） | 需挂载时就初始化的页签要显式 `lazyLoad: false`；需要导航分隔线时显式传 `border`；`type` / `tab-click` 等透传 `el-tabs` |
|
|
7735
|
-
| `ZlButton` |
|
|
7758
|
+
| `ZlButton` | `round` **默认 `true`**（胶囊圆角），其余 18 项属性默认 `undefined`（不覆盖 EP 默认与 `el-form` 继承），无自定义样式；`default` / `icon` / `loading` 插槽**仅在调用方传入时**才转发（否则会盖掉同名 prop 的默认渲染） | **仅 ≥ 0.24.0**：更早版本 `round` 默认关闭（EP 4px 圆角）；升级后按钮变胶囊形属视觉变更，需回归；要 4px 圆角显式传 `:round="false"` |
|
|
7736
7759
|
| `ZlDevMenu` | 不依赖 `vue-router` 包：通过 `globalProperties.$router` 取实例（无路由时面板为空）；浮球 `fixed` 定位，松手吸附右侧并保留垂直位置；**不含微前端页签**（旧 `DnDevMenu` 的 `AppTabs` 已移除） | 生产环境务必用 `v-if` / `visible` 关掉；路由文案取 `meta.title`，未设置时显示 `path` |
|
|
7737
7760
|
| `ZlBreadcrumb` | `items` schema 驱动：末项自动置为当前页（即使带 `to` 也不跳转、不触发 `click`）；`separator` / `separator-icon` 与 `el-breadcrumb` 同义，其余属性与事件透传 | 需要末项可点击时把它放到倒数第二项，或用 `#item` 自行渲染 |
|
|
7738
7761
|
| `ZlIcon` | 单色图标：尺寸走 `size`（作用在 `font-size`），颜色走 `color` / `currentColor`；`spin` / `rotate` 等仅 `zl:` 前缀（iconify）分支生效 | 图标名未注册或拼错时**不报错、不告警、只渲染空白**；迁移前用 `@zl-ui-kit/icons` 核名（见 §4.1） |
|
|
@@ -1,53 +1,51 @@
|
|
|
1
|
-
import { defineComponent as _,
|
|
2
|
-
import { useToggle as
|
|
1
|
+
import { defineComponent as _, openBlock as d, createElementBlock as n, normalizeClass as u, unref as t, createElementVNode as e, renderSlot as s, normalizeProps as i, guardReactiveProps as r, createVNode as c, withCtx as v } from "vue";
|
|
2
|
+
import { useToggle as m } from "@vueuse/core";
|
|
3
|
+
import p from "../ZlButton/index.vue.mjs";
|
|
3
4
|
import f from "../ZlIcon/index.vue.mjs";
|
|
4
|
-
const
|
|
5
|
+
const z = { class: "zl-layout-vertical__aside" }, h = { class: "zl-layout-vertical__aside__header" }, y = { class: "zl-layout-vertical__aside__content" }, $ = { class: "zl-layout-vertical__aside__footer" }, b = { class: "zl-layout-vertical__main" }, g = { class: "zl-layout-vertical__header" }, C = { class: "zl-layout-vertical__breadcrumb" }, V = { class: "zl-layout-vertical__app-header" }, k = { class: "zl-layout-vertical__content" }, I = /* @__PURE__ */ _({
|
|
5
6
|
name: "ZlVerticalLayout",
|
|
6
7
|
__name: "Vertical",
|
|
7
|
-
setup(
|
|
8
|
-
const [o] =
|
|
9
|
-
return (l, a) => {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
}, [
|
|
8
|
+
setup(B) {
|
|
9
|
+
const [o] = m(!1);
|
|
10
|
+
return (l, a) => (d(), n("div", {
|
|
11
|
+
class: u(["zl-layout-vertical", { collapsed: t(o) }])
|
|
12
|
+
}, [
|
|
13
|
+
e("div", z, [
|
|
14
14
|
e("div", h, [
|
|
15
|
-
|
|
16
|
-
t(l.$slots, "logo", c(i({ collapsed: s(o) })))
|
|
17
|
-
]),
|
|
18
|
-
e("div", $, [
|
|
19
|
-
t(l.$slots, "menu", c(i({ collapsed: s(o) })))
|
|
20
|
-
]),
|
|
21
|
-
e("div", b, [
|
|
22
|
-
r(n, {
|
|
23
|
-
circle: "",
|
|
24
|
-
onClick: a[0] || (a[0] = (N) => o.value = !s(o))
|
|
25
|
-
}, {
|
|
26
|
-
icon: p(() => [
|
|
27
|
-
r(f, {
|
|
28
|
-
icon: s(o) ? "zl:slider-on-color" : "zl:slider-off-color"
|
|
29
|
-
}, null, 8, ["icon"])
|
|
30
|
-
]),
|
|
31
|
-
_: 1
|
|
32
|
-
}),
|
|
33
|
-
t(l.$slots, "footer")
|
|
34
|
-
])
|
|
15
|
+
s(l.$slots, "logo", i(r({ collapsed: t(o) })))
|
|
35
16
|
]),
|
|
36
|
-
e("div",
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
17
|
+
e("div", y, [
|
|
18
|
+
s(l.$slots, "menu", i(r({ collapsed: t(o) })))
|
|
19
|
+
]),
|
|
20
|
+
e("div", $, [
|
|
21
|
+
c(p, {
|
|
22
|
+
circle: "",
|
|
23
|
+
onClick: a[0] || (a[0] = (E) => o.value = !t(o))
|
|
24
|
+
}, {
|
|
25
|
+
icon: v(() => [
|
|
26
|
+
c(f, {
|
|
27
|
+
icon: t(o) ? "zl:slider-on-color" : "zl:slider-off-color"
|
|
28
|
+
}, null, 8, ["icon"])
|
|
40
29
|
]),
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
30
|
+
_: 1
|
|
31
|
+
}),
|
|
32
|
+
s(l.$slots, "footer")
|
|
33
|
+
])
|
|
34
|
+
]),
|
|
35
|
+
e("div", b, [
|
|
36
|
+
e("div", g, [
|
|
37
|
+
e("div", C, [
|
|
38
|
+
s(l.$slots, "breadcrumb")
|
|
44
39
|
]),
|
|
45
|
-
e("div",
|
|
46
|
-
|
|
40
|
+
e("div", V, [
|
|
41
|
+
s(l.$slots, "header")
|
|
47
42
|
])
|
|
43
|
+
]),
|
|
44
|
+
e("div", k, [
|
|
45
|
+
s(l.$slots, "default")
|
|
48
46
|
])
|
|
49
|
-
]
|
|
50
|
-
|
|
47
|
+
])
|
|
48
|
+
], 2));
|
|
51
49
|
}
|
|
52
50
|
});
|
|
53
51
|
export {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";.zl-app-slogan{width:100%;overflow:hidden;display:flex;align-items:center;gap:6px}.zl-app-slogan__logo{width:24px;aspect-ratio:1;object-fit:cover}.zl-app-slogan__text{white-space:nowrap;font-family:var(--zl-slogan-font-family, "PingFang SC", "Microsoft YaHei", sans-serif);color:var(--zl-menu-text-color, var(--zl-text-2));font-size:
|
|
1
|
+
@charset "UTF-8";.zl-app-slogan{width:100%;overflow:hidden;display:flex;align-items:center;gap:6px}.zl-app-slogan__logo{width:24px;aspect-ratio:1;object-fit:cover}.zl-app-slogan__logo--default{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;background-color:var(--zl-primary-6, var(--el-color-primary));color:#fff;font-size:14px}.zl-app-slogan__text{white-space:nowrap;font-family:"PingFang TC",var(--zl-slogan-font-family, "PingFang SC", "Microsoft YaHei", sans-serif);color:var(--zl-menu-text-color, var(--zl-text-2));font-size:20px;font-weight:500;letter-spacing:1px;line-height:24px}
|
|
@@ -1,5 +1,9 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
|
|
1
|
+
import { defineComponent as a, openBlock as e, createElementBlock as l, createVNode as t, Transition as n, withCtx as s, withDirectives as c, createElementVNode as i, toDisplayString as p, vShow as r } from "vue";
|
|
2
|
+
import d from "../ZlIcon/index.vue.mjs";
|
|
3
|
+
const _ = { class: "zl-app-slogan" }, g = ["src"], m = {
|
|
4
|
+
key: 1,
|
|
5
|
+
class: "zl-app-slogan__logo zl-app-slogan__logo--default"
|
|
6
|
+
}, x = /* @__PURE__ */ a({
|
|
3
7
|
name: "ZlAppSlogan",
|
|
4
8
|
__name: "index",
|
|
5
9
|
props: {
|
|
@@ -7,16 +11,19 @@ const d = { class: "zl-app-slogan" }, _ = ["src"], u = /* @__PURE__ */ o({
|
|
|
7
11
|
logo: {},
|
|
8
12
|
title: {}
|
|
9
13
|
},
|
|
10
|
-
setup(
|
|
11
|
-
return (
|
|
12
|
-
|
|
14
|
+
setup(o) {
|
|
15
|
+
return (f, h) => (e(), l("div", _, [
|
|
16
|
+
o.logo ? (e(), l("img", {
|
|
17
|
+
key: 0,
|
|
13
18
|
class: "zl-app-slogan__logo",
|
|
14
|
-
src:
|
|
15
|
-
}, null, 8,
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
19
|
+
src: o.logo
|
|
20
|
+
}, null, 8, g)) : (e(), l("span", m, [
|
|
21
|
+
t(d, { icon: "zl:component" })
|
|
22
|
+
])),
|
|
23
|
+
t(n, { persisted: "" }, {
|
|
24
|
+
default: s(() => [
|
|
25
|
+
c(i("div", { class: "zl-app-slogan__text" }, p(o.title), 513), [
|
|
26
|
+
[r, !o.collapsed]
|
|
20
27
|
])
|
|
21
28
|
]),
|
|
22
29
|
_: 1
|
|
@@ -25,6 +32,6 @@ const d = { class: "zl-app-slogan" }, _ = ["src"], u = /* @__PURE__ */ o({
|
|
|
25
32
|
}
|
|
26
33
|
});
|
|
27
34
|
export {
|
|
28
|
-
|
|
35
|
+
x as default
|
|
29
36
|
};
|
|
30
37
|
//# sourceMappingURL=index.vue.mjs.map
|
|
@@ -24,7 +24,7 @@ type __VLS_Props = {
|
|
|
24
24
|
bg?: boolean;
|
|
25
25
|
/** 是否自动聚焦 */
|
|
26
26
|
autofocus?: boolean;
|
|
27
|
-
/**
|
|
27
|
+
/** 是否为圆角按钮（胶囊形）；默认开启，传 false 走 EP 默认 4px 圆角 */
|
|
28
28
|
round?: boolean;
|
|
29
29
|
/** 是否为圆形按钮 */
|
|
30
30
|
circle?: boolean;
|
|
@@ -39,7 +39,18 @@ type __VLS_Props = {
|
|
|
39
39
|
/** 自定义渲染标签，默认 `button` */
|
|
40
40
|
tag?: string | Record<string, any>;
|
|
41
41
|
};
|
|
42
|
-
declare
|
|
42
|
+
declare function __VLS_template(): {
|
|
43
|
+
attrs: Partial<{}>;
|
|
44
|
+
slots: {
|
|
45
|
+
icon?(_: {}): any;
|
|
46
|
+
loading?(_: {}): any;
|
|
47
|
+
default?(_: {}): any;
|
|
48
|
+
};
|
|
49
|
+
refs: {};
|
|
50
|
+
rootEl: any;
|
|
51
|
+
};
|
|
52
|
+
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
53
|
+
declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
43
54
|
icon: string | Component;
|
|
44
55
|
size: "large" | "default" | "small";
|
|
45
56
|
color: string;
|
|
@@ -60,5 +71,11 @@ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {
|
|
|
60
71
|
autoInsertSpace: boolean;
|
|
61
72
|
tag: string | Record<string, any>;
|
|
62
73
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
74
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
63
75
|
export default _default;
|
|
76
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
77
|
+
new (): {
|
|
78
|
+
$slots: S;
|
|
79
|
+
};
|
|
80
|
+
};
|
|
64
81
|
//# sourceMappingURL=index.vue.d.ts.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { defineComponent as
|
|
2
|
-
const
|
|
1
|
+
import { defineComponent as u, useAttrs as f, computed as p, mergeProps as a, resolveComponent as r, openBlock as v, createBlock as c, createSlots as y, withCtx as o, renderSlot as t } from "vue";
|
|
2
|
+
const g = /* @__PURE__ */ u({
|
|
3
3
|
name: "ZlButton",
|
|
4
4
|
inheritAttrs: !1,
|
|
5
5
|
__name: "index",
|
|
@@ -16,7 +16,7 @@ const h = /* @__PURE__ */ f({
|
|
|
16
16
|
link: { type: Boolean, default: void 0 },
|
|
17
17
|
bg: { type: Boolean, default: void 0 },
|
|
18
18
|
autofocus: { type: Boolean, default: void 0 },
|
|
19
|
-
round: { type: Boolean, default:
|
|
19
|
+
round: { type: Boolean, default: !0 },
|
|
20
20
|
circle: { type: Boolean, default: void 0 },
|
|
21
21
|
dashed: { type: Boolean, default: void 0 },
|
|
22
22
|
color: { default: void 0 },
|
|
@@ -25,20 +25,36 @@ const h = /* @__PURE__ */ f({
|
|
|
25
25
|
tag: { default: void 0 }
|
|
26
26
|
},
|
|
27
27
|
setup(l) {
|
|
28
|
-
const
|
|
29
|
-
|
|
30
|
-
const
|
|
31
|
-
return
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
28
|
+
const d = l, n = f(), i = p(() => a(n, d));
|
|
29
|
+
return (e, B) => {
|
|
30
|
+
const s = r("el-button");
|
|
31
|
+
return v(), c(s, a(i.value, { class: "zl-button" }), y({ _: 2 }, [
|
|
32
|
+
e.$slots.icon ? {
|
|
33
|
+
name: "icon",
|
|
34
|
+
fn: o(() => [
|
|
35
|
+
t(e.$slots, "icon")
|
|
36
|
+
]),
|
|
37
|
+
key: "0"
|
|
38
|
+
} : void 0,
|
|
39
|
+
e.$slots.loading ? {
|
|
40
|
+
name: "loading",
|
|
41
|
+
fn: o(() => [
|
|
42
|
+
t(e.$slots, "loading")
|
|
43
|
+
]),
|
|
44
|
+
key: "1"
|
|
45
|
+
} : void 0,
|
|
46
|
+
e.$slots.default ? {
|
|
47
|
+
name: "default",
|
|
48
|
+
fn: o(() => [
|
|
49
|
+
t(e.$slots, "default")
|
|
50
|
+
]),
|
|
51
|
+
key: "2"
|
|
52
|
+
} : void 0
|
|
53
|
+
]), 1040);
|
|
38
54
|
};
|
|
39
55
|
}
|
|
40
56
|
});
|
|
41
57
|
export {
|
|
42
|
-
|
|
58
|
+
g as default
|
|
43
59
|
};
|
|
44
60
|
//# sourceMappingURL=index.vue.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.zl-copy[data-v-
|
|
1
|
+
.zl-copy[data-v-802344df]{max-width:100%;display:inline-flex;align-items:center;gap:12px}.zl-copy__text[data-v-802344df]{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
@@ -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-802344df"]]);
|
|
5
5
|
export {
|
|
6
|
-
|
|
6
|
+
m as default
|
|
7
7
|
};
|
|
8
8
|
//# sourceMappingURL=index.vue.mjs.map
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import { defineComponent as m, ref as
|
|
2
|
-
import { useZlT as
|
|
1
|
+
import { defineComponent as m, ref as u, openBlock as y, createElementBlock as x, createElementVNode as r, renderSlot as n, toDisplayString as l, unref as a, createVNode as d, withCtx as _, createTextVNode as z } from "vue";
|
|
2
|
+
import { useZlT as h } from "@zl-ui-kit/composables";
|
|
3
3
|
import { ElMessage as p } from "element-plus";
|
|
4
|
+
import C from "../ZlButton/index.vue.mjs";
|
|
4
5
|
import i from "./copy.mjs";
|
|
5
|
-
const
|
|
6
|
+
const g = { class: "zl-copy" }, k = ["title"], w = /* @__PURE__ */ m({
|
|
6
7
|
name: "ZlCopy",
|
|
7
8
|
__name: "index",
|
|
8
9
|
props: {
|
|
@@ -10,42 +11,39 @@ const k = { class: "zl-copy" }, T = ["title"], w = /* @__PURE__ */ m({
|
|
|
10
11
|
copyText: {}
|
|
11
12
|
},
|
|
12
13
|
setup(e) {
|
|
13
|
-
const c = e, { t: o } =
|
|
14
|
-
async function
|
|
15
|
-
const t = c.copyText ?? c.text ??
|
|
14
|
+
const c = e, { t: o } = h(), s = u(null);
|
|
15
|
+
async function f() {
|
|
16
|
+
const t = c.copyText ?? c.text ?? s.value?.textContent ?? "";
|
|
16
17
|
try {
|
|
17
18
|
await i(t), p.success(o("zl.copy.success", "复制成功"));
|
|
18
19
|
} catch {
|
|
19
20
|
p.error(o("zl.copy.failed", "复制失败"));
|
|
20
21
|
}
|
|
21
22
|
}
|
|
22
|
-
return (t,
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
s
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
l(t.$slots, "default", {}, () => [
|
|
31
|
-
s("span", { title: e.text }, r(e.text), 9, T)
|
|
32
|
-
], !0)
|
|
33
|
-
], 512),
|
|
34
|
-
l(t.$slots, "trigger", { copy: a(i) }, () => [
|
|
35
|
-
z(f, {
|
|
36
|
-
size: "small",
|
|
37
|
-
text: "",
|
|
38
|
-
class: "zl-copy__button",
|
|
39
|
-
onClick: u
|
|
40
|
-
}, {
|
|
41
|
-
default: C(() => [
|
|
42
|
-
h(r(a(o)("zl.copy.copy", "复制")), 1)
|
|
43
|
-
]),
|
|
44
|
-
_: 1
|
|
45
|
-
})
|
|
23
|
+
return (t, T) => (y(), x("div", g, [
|
|
24
|
+
r("span", {
|
|
25
|
+
ref_key: "textRef",
|
|
26
|
+
ref: s,
|
|
27
|
+
class: "zl-copy__text"
|
|
28
|
+
}, [
|
|
29
|
+
n(t.$slots, "default", {}, () => [
|
|
30
|
+
r("span", { title: e.text }, l(e.text), 9, k)
|
|
46
31
|
], !0)
|
|
47
|
-
])
|
|
48
|
-
|
|
32
|
+
], 512),
|
|
33
|
+
n(t.$slots, "trigger", { copy: a(i) }, () => [
|
|
34
|
+
d(C, {
|
|
35
|
+
size: "small",
|
|
36
|
+
text: "",
|
|
37
|
+
class: "zl-copy__button",
|
|
38
|
+
onClick: f
|
|
39
|
+
}, {
|
|
40
|
+
default: _(() => [
|
|
41
|
+
z(l(a(o)("zl.copy.copy", "复制")), 1)
|
|
42
|
+
]),
|
|
43
|
+
_: 1
|
|
44
|
+
})
|
|
45
|
+
], !0)
|
|
46
|
+
]));
|
|
49
47
|
}
|
|
50
48
|
});
|
|
51
49
|
export {
|