@zl-ui-kit/components 0.7.1 → 0.8.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 +114 -63
- package/dist/components/ZlAction/List.vue.mjs +16 -15
- package/dist/components/ZlAction/types.d.ts +5 -2
- package/dist/components/ZlCardPage/index.vue.d.ts +37 -5
- package/dist/components/ZlCardPage/index.vue.mjs +87 -93
- package/dist/components/ZlDictTag/index.vue.d.ts +5 -0
- package/dist/components/ZlDictTag/index.vue.mjs +20 -19
- package/dist/components/ZlPagination/index.css +1 -1
- package/dist/components/ZlPagination/index.vue.mjs +1 -1
- package/dist/components/ZlPagination/usePagination.d.ts +6 -0
- package/dist/components/ZlPagination/usePagination.mjs +22 -19
- package/dist/components/ZlSearch/index.vue.d.ts +3 -0
- package/dist/components/ZlSearch/index.vue.mjs +105 -92
- package/dist/components/ZlSearchTable/index.vue.d.ts +12 -2
- package/dist/components/ZlUpload/index.css +1 -1
- package/dist/components/ZlUpload/index.vue.d.ts +8 -0
- package/dist/components/ZlUpload/index.vue.mjs +2 -2
- package/dist/components/ZlUpload/index2.vue.mjs +76 -72
- package/dist/locales/en.mjs +1 -0
- package/dist/locales/zh-cn.mjs +1 -0
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -850,7 +850,19 @@ const items: FormItem[] = [
|
|
|
850
850
|
|
|
851
851
|
**展开 / 收起**：`lastVisibleIndex !== null` 时在「查询」左侧出现筛选图标按钮，点击在查询条**上层**
|
|
852
852
|
展开全量表单浮层（`position: absolute` + 上滑 `--28px` 淡入，不改变页面高度），再点收起；查询/重置后自动收起。
|
|
853
|
-
`showLabels`
|
|
853
|
+
`labelsVisible` 不显式传时，仅在发生溢出时展示「筛选条件」标签行（旧名 `showLabels` 仍兼容）。
|
|
854
|
+
|
|
855
|
+
**图标按钮的移入提示**：重置、展开、收起都是纯图标按钮，鼠标移入给出文字提示（原生 `title`，
|
|
856
|
+
同时带 `aria-label` 供读屏）。文案走 i18n，随 `setLocale` 切换、也可被消费方覆盖：
|
|
857
|
+
|
|
858
|
+
| 按钮 | key | 中文 | English |
|
|
859
|
+
| ---- | -------------------- | ---- | -------- |
|
|
860
|
+
| 重置 | `zl.search.reset` | 重置 | Reset |
|
|
861
|
+
| 展开 | `zl.search.expand` | 展开 | Expand |
|
|
862
|
+
| 收起 | `zl.search.collapse` | 收起 | Collapse |
|
|
863
|
+
|
|
864
|
+
> 浮层里的重置按钮与单行内的按钮共用 `zl-search-form-actions__reset` class，展开/收起为
|
|
865
|
+
> `zl-search-form-actions__toggle`，需要自定义样式或做 e2e 断言时可直接用这两个 class 定位。
|
|
854
866
|
|
|
855
867
|
### ZlDrawer / ZlPopconfirm / ZlSwitch
|
|
856
868
|
|
|
@@ -860,7 +872,42 @@ const items: FormItem[] = [
|
|
|
860
872
|
|
|
861
873
|
### ZlAction / ZlActionList —— 操作列与操作列表
|
|
862
874
|
|
|
863
|
-
基于 `ActionItem`（label/icon/
|
|
875
|
+
基于 `ActionItem`（label/icon/disabled/visible/permission/handler 等），`ZlTable` 列 `actions` 即渲染 `ZlActionList`。
|
|
876
|
+
`ZlAction` 是 `ZlActionList` 的薄封装（固定 `listCount: 2` + 「更多」图标下拉）。
|
|
877
|
+
|
|
878
|
+
**`visible` —— 控制显示与隐藏（推荐用于互斥操作）**
|
|
879
|
+
|
|
880
|
+
`visible` 支持两种写法，与 `permission` 取交集（两者都通过才展示）：
|
|
881
|
+
|
|
882
|
+
| 写法 | 说明 |
|
|
883
|
+
| ------------------------------- | -------------------------------------------------- |
|
|
884
|
+
| `visible: false` | 布尔值直接判定 |
|
|
885
|
+
| `visible: (...args) => boolean` | 函数判定，接收 `visibleArgs`，末尾追加 `item` 自身 |
|
|
886
|
+
|
|
887
|
+
互斥的两个操作（如启用 / 停用）应当用 `visible` 只展示「能做的那一个」，而不是用 `disabled`
|
|
888
|
+
把当前状态渲染成一个可看不可点的灰按钮：
|
|
889
|
+
|
|
890
|
+
```ts
|
|
891
|
+
const statusActions = (item: Item): ActionItem[] => [
|
|
892
|
+
{ label: '启用', visible: item.status === false, handler: () => change(item, true) },
|
|
893
|
+
{ label: '停用', visible: item.status === true, handler: () => change(item, false) },
|
|
894
|
+
]
|
|
895
|
+
```
|
|
896
|
+
|
|
897
|
+
**`disabled`**
|
|
898
|
+
|
|
899
|
+
内联按钮与「更多」下拉项都生效：`el-link` 绑定 `:disabled`（视觉置灰），`handleAction`
|
|
900
|
+
再兜底拦截一次（避免自定义 icon 分支绕过）。请求进行中置灰可防连点。
|
|
901
|
+
|
|
902
|
+
**全库显隐属性命名约定**
|
|
903
|
+
|
|
904
|
+
| 场景 | 命名 | 示例 |
|
|
905
|
+
| ------------------------------ | --------------- | ------------------------------------------------------------------------------------------------------------- |
|
|
906
|
+
| 描述对象**自身**的显隐 | `visible` | `ActionItem` / `FormItem` / `Description` 项 / `ZlGrid` 项 / `ZlTable` 列 / `ZlTag` |
|
|
907
|
+
| 描述组件**内部某个局部**的显隐 | `<局部>Visible` | `labelsVisible` / `tipVisible` / `downloadButtonVisible` / `iconVisible` / `totalVisible` / `pageSizeVisible` |
|
|
908
|
+
|
|
909
|
+
不要用 `show*` / `hide*`（历史上出现过 `showLabels` / `showTip` / `hideIcon`，已全部重命名，
|
|
910
|
+
旧名保留为 `@deprecated` 并继续生效：新名优先，未给时回落旧名）。
|
|
864
911
|
|
|
865
912
|
### ZlRadioTag / ZlCheckboxTag / ZlCheckAll / ZlSorter / ZlAddSub / ZlLayoutSwitch
|
|
866
913
|
|
|
@@ -1428,7 +1475,7 @@ const { i18n } = useLocale({ messages })
|
|
|
1428
1475
|
| `ZlCheckboxTag` | 主入口 | 7 | 1 | 1 | 0 |
|
|
1429
1476
|
| `ZlCopy` | 主入口 | 2 | 0 | 2 | 0 |
|
|
1430
1477
|
| `ZlDescription` | 主入口 | 5 | 0 | 1 | 0 |
|
|
1431
|
-
| `ZlDictTag` | 主入口 |
|
|
1478
|
+
| `ZlDictTag` | 主入口 | 7 | 0 | 0 | 0 |
|
|
1432
1479
|
| `ZlDrawer` | 主入口 | 6 | 1 | 2 | 0 |
|
|
1433
1480
|
| `ZlDynamicComponent` | 主入口 | 3 | 2 | 0 | 0 |
|
|
1434
1481
|
| `ZlPdfViewer` | 主入口 | 2 | 0 | 0 | 0 |
|
|
@@ -1450,7 +1497,7 @@ const { i18n } = useLocale({ messages })
|
|
|
1450
1497
|
| `ZlPermission` | 主入口 | 1 | 0 | 1 | 0 |
|
|
1451
1498
|
| `ZlPopconfirm` | 主入口 | 4 | 2 | 3 | 0 |
|
|
1452
1499
|
| `ZlRadioTag` | 主入口 | 3 | 1 | 1 | 0 |
|
|
1453
|
-
| `ZlSearch` | 主入口 |
|
|
1500
|
+
| `ZlSearch` | 主入口 | 6 | 2 | 2 | 3 |
|
|
1454
1501
|
| `ZlSearchTable` | 主入口 | 5 | 1 | 3 | 4 |
|
|
1455
1502
|
| `ZlSection` | 主入口 | 4 | 0 | 3 | 0 |
|
|
1456
1503
|
| `ZlSorter` | 主入口 | 2 | 2 | 1 | 0 |
|
|
@@ -1461,7 +1508,7 @@ const { i18n } = useLocale({ messages })
|
|
|
1461
1508
|
| `ZlTag` | 主入口 | 15 | 4 | 1 | 0 |
|
|
1462
1509
|
| `ZlText` | 主入口 | 1 | 0 | 1 | 0 |
|
|
1463
1510
|
| `ZlTitle` | 主入口 | 5 | 0 | 3 | 0 |
|
|
1464
|
-
| `ZlUpload` | 主入口 |
|
|
1511
|
+
| `ZlUpload` | 主入口 | 13 | 1 | 1 | 0 |
|
|
1465
1512
|
| `ZlTree` | 主入口 | 5 | 0 | 3 | 0 |
|
|
1466
1513
|
| `ZlTreeSelect` | 主入口 | 6 | 1 | 0 | 0 |
|
|
1467
1514
|
| `ZlChart` | 子入口 chart | 2 | 0 | 0 | 1 |
|
|
@@ -1470,7 +1517,7 @@ const { i18n } = useLocale({ messages })
|
|
|
1470
1517
|
| `ZlFilePreview` | 子入口 file-preview | 1 | 0 | 0 | 0 |
|
|
1471
1518
|
| `ZlFileViewer` | 子入口 file-preview | 1 | 0 | 0 | 0 |
|
|
1472
1519
|
|
|
1473
|
-
> 说明列为 `—` 表示该属性在源码里没写 `/** */` 注释（当前
|
|
1520
|
+
> 说明列为 `—` 表示该属性在源码里没写 `/** */` 注释（当前 134/194 个）；补完注释重跑 `pnpm docs:api` 即可同步。
|
|
1474
1521
|
|
|
1475
1522
|
### 14.1 主入口组件（`@zl-ui-kit/components`）
|
|
1476
1523
|
|
|
@@ -1900,14 +1947,14 @@ import { ZlCardPage } from '@zl-ui-kit/components'
|
|
|
1900
1947
|
|
|
1901
1948
|
**props**
|
|
1902
1949
|
|
|
1903
|
-
| 属性 | 类型
|
|
1904
|
-
| -------------- |
|
|
1905
|
-
| `immediate` | `boolean`
|
|
1906
|
-
| `request` | `\| ((...args: any[]) => Promise<any>) \| { service: (...args: any[]) => Promise<any>; options?: Record<string, any> }` | — | 是 | `:request="async () => {}"` |
|
|
1907
|
-
| `queryItems` | `SearchItem[]`
|
|
1908
|
-
| `pagination` | `Record<string, any> \| boolean`
|
|
1909
|
-
| `itemKey` | `string`
|
|
1910
|
-
| `cardMinWidth` | `string`
|
|
1950
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
1951
|
+
| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | ---- | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1952
|
+
| `immediate` | `boolean` | `true` | 否 | `:immediate="false"` | — |
|
|
1953
|
+
| `request` | `\| ((...args: any[]) => Promise<any>) \| { service: (...args: any[]) => Promise<any>; options?: Record<string, any> } \| UseRequestInstance` | — | 是 | `:request="async () => {}"` | 请求来源，三种形态任一： 1. 请求函数 `(...args) => Promise` 2. `{ service, options }` 对象（ZlCardPage 内部再包一层 usePageableRequest） 3. `useRequest` / `usePageableRequest` 实例（消费方自行创建，便于接管 loading/refresh） |
|
|
1954
|
+
| `queryItems` | `SearchItem[]` | `() => []` | 否 | `:query-items="queryItems"` | — |
|
|
1955
|
+
| `pagination` | `Record<string, any> \| boolean` | `true` | 否 | `:pagination="{}"` | — |
|
|
1956
|
+
| `itemKey` | `string` | `'id'` | 否 | `item-key="id"` | — |
|
|
1957
|
+
| `cardMinWidth` | `string` | — | 否 | `card-min-width="280px"` | — |
|
|
1911
1958
|
|
|
1912
1959
|
**事件（emits）**
|
|
1913
1960
|
|
|
@@ -1925,11 +1972,11 @@ import { ZlCardPage } from '@zl-ui-kit/components'
|
|
|
1925
1972
|
|
|
1926
1973
|
**暴露（defineExpose）**
|
|
1927
1974
|
|
|
1928
|
-
| 名称 | 说明
|
|
1929
|
-
| --------- |
|
|
1930
|
-
| `refresh` | —
|
|
1931
|
-
| `params` | —
|
|
1932
|
-
| `search` |
|
|
1975
|
+
| 名称 | 说明 |
|
|
1976
|
+
| --------- | ------------------------------------------------------------------------ |
|
|
1977
|
+
| `refresh` | — |
|
|
1978
|
+
| `params` | — |
|
|
1979
|
+
| `search` | 重新查询并回到第 1 页；消费方可在 useRequest 的 refreshDepsAction 里调用 |
|
|
1933
1980
|
|
|
1934
1981
|
**完整示例**：见 §6 数据型组件 + useRequest 体系（核心） › ② ZlCardPage —— 直接传 service
|
|
1935
1982
|
|
|
@@ -2123,7 +2170,7 @@ import { ZlDescription } from '@zl-ui-kit/components'
|
|
|
2123
2170
|
|
|
2124
2171
|
**简介**：字典标签
|
|
2125
2172
|
|
|
2126
|
-
**接口概览**：
|
|
2173
|
+
**接口概览**：7 props
|
|
2127
2174
|
|
|
2128
2175
|
**用法示例**
|
|
2129
2176
|
|
|
@@ -2141,14 +2188,15 @@ import { ZlDictTag } from '@zl-ui-kit/components'
|
|
|
2141
2188
|
|
|
2142
2189
|
**props**
|
|
2143
2190
|
|
|
2144
|
-
| 属性
|
|
2145
|
-
|
|
|
2146
|
-
| `dictKey`
|
|
2147
|
-
| `dict`
|
|
2148
|
-
| `corner`
|
|
2149
|
-
| `value`
|
|
2150
|
-
| `simple`
|
|
2151
|
-
| `
|
|
2191
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
2192
|
+
| ------------- | ------------------------------------------------------------------------- | ----------- | ---- | ------------------- | ------------------------------------------------------------------------------------------------- |
|
|
2193
|
+
| `dictKey` | `string` | — | 是 | `dict-key="gender"` | 字典键（对应全局字典缓存的键；外部直传数据也以该键写入共享缓存） |
|
|
2194
|
+
| `dict` | `DictItem[]` | — | 否 | `:dict="dict"` | 外部直传字典数据：无需依赖全局数据源即可翻译。格式同 DictItem[]（{ label, value, icon?, type? }） |
|
|
2195
|
+
| `corner` | `boolean \| 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `false` | 否 | `corner="top-left"` | — |
|
|
2196
|
+
| `value` | `string` | — | 否 | `value="1"` | — |
|
|
2197
|
+
| `simple` | `boolean` | — | 否 | `simple` | — |
|
|
2198
|
+
| `iconVisible` | `boolean` | `undefined` | 否 | `icon-visible` | 是否展示字典项图标（默认 true） |
|
|
2199
|
+
| `hideIcon` | `boolean` | `undefined` | 否 | `hide-icon` | — |
|
|
2152
2200
|
|
|
2153
2201
|
> 把 `$attrs` 透传给 `zl-corner-tag`，未列出的属性会继续下传
|
|
2154
2202
|
|
|
@@ -2848,7 +2896,7 @@ import { ZlLayoutSwitch } from '@zl-ui-kit/components'
|
|
|
2848
2896
|
|
|
2849
2897
|
<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlPagination/index.vue`</sub>
|
|
2850
2898
|
|
|
2851
|
-
**简介**：分页器（el-pagination 封装）：默认靠右对齐，分页入参（pageNum/pageSize/
|
|
2899
|
+
**简介**：分页器（el-pagination 封装）：默认靠右对齐，分页入参（pageNum/pageSize/totalVisible…） 经 `$attrs` 透传，`align` 控制水平对齐（left/center/right）
|
|
2852
2900
|
|
|
2853
2901
|
**接口概览**：4 props · 3 事件
|
|
2854
2902
|
|
|
@@ -3045,7 +3093,7 @@ import { ZlRadioTag } from '@zl-ui-kit/components'
|
|
|
3045
3093
|
|
|
3046
3094
|
**简介**：查询条：表单项按容器宽度自适应排列（auto-fill 网格），放不下的项自动隐藏， 并在「查询」左侧给出展开按钮（点击后在查询条上层展开全量表单，再点收起）。
|
|
3047
3095
|
|
|
3048
|
-
**接口概览**：
|
|
3096
|
+
**接口概览**：6 props · 2 事件 · 2 插槽 · 3 暴露
|
|
3049
3097
|
|
|
3050
3098
|
**用法示例**
|
|
3051
3099
|
|
|
@@ -3074,13 +3122,14 @@ import { ZlSearch } from '@zl-ui-kit/components'
|
|
|
3074
3122
|
|
|
3075
3123
|
**props**
|
|
3076
3124
|
|
|
3077
|
-
| 属性
|
|
3078
|
-
|
|
|
3079
|
-
| `items`
|
|
3080
|
-
| `model`
|
|
3081
|
-
| `immediate`
|
|
3082
|
-
| `disabled`
|
|
3083
|
-
| `
|
|
3125
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3126
|
+
| --------------- | --------------------- | ----------- | ---- | -------------------- | -------------------------------------------------------------------------------------------- |
|
|
3127
|
+
| `items` | `SearchItem[]` | `() => []` | 否 | `:items="items"` | 查询项定义（SearchItem[]），按数组顺序排列 |
|
|
3128
|
+
| `model` | `Record<string, any>` | — | 否 | `:model="{}"` | 表单数据。传入时组件直接读写该对象（受控）； 不传则用内部副本，`params` / 标签行仍可正常工作 |
|
|
3129
|
+
| `immediate` | `boolean` | `true` | 否 | `:immediate="false"` | 挂载后立即执行一次查询（默认 true） |
|
|
3130
|
+
| `disabled` | `boolean` | `false` | 否 | `disabled` | 禁用全部查询项 |
|
|
3131
|
+
| `labelsVisible` | `boolean` | `undefined` | 否 | `labels-visible` | 是否展示「筛选条件」标签行；不传时按「是否发生溢出」自动判定 |
|
|
3132
|
+
| `showLabels` | `boolean` | `undefined` | 否 | `show-labels` | — |
|
|
3084
3133
|
|
|
3085
3134
|
**事件（emits）**
|
|
3086
3135
|
|
|
@@ -3665,7 +3714,7 @@ import { ZlTitle } from '@zl-ui-kit/components'
|
|
|
3665
3714
|
|
|
3666
3715
|
**简介**：传上传 service
|
|
3667
3716
|
|
|
3668
|
-
**接口概览**：
|
|
3717
|
+
**接口概览**：13 props · 1 事件 · 1 插槽
|
|
3669
3718
|
|
|
3670
3719
|
**用法示例**
|
|
3671
3720
|
|
|
@@ -3693,19 +3742,21 @@ import { ZlUpload } from '@zl-ui-kit/components'
|
|
|
3693
3742
|
|
|
3694
3743
|
**props**
|
|
3695
3744
|
|
|
3696
|
-
| 属性
|
|
3697
|
-
|
|
|
3698
|
-
| `request`
|
|
3699
|
-
| `modelValue`
|
|
3700
|
-
| `accept`
|
|
3701
|
-
| `maxSize`
|
|
3702
|
-
| `limit`
|
|
3703
|
-
| `tip`
|
|
3704
|
-
| `separator`
|
|
3705
|
-
| `responseUrlKey`
|
|
3706
|
-
| `
|
|
3707
|
-
| `
|
|
3708
|
-
| `
|
|
3745
|
+
| 属性 | 类型 | 默认值 | 必填 | 示例 | 说明 |
|
|
3746
|
+
| ----------------------- | --------------------------------------------------------------- | ----------- | ---- | ----------------------------------------- | -------------------------------------------- |
|
|
3747
|
+
| `request` | `(form: FormData, config: Record<string, any>) => Promise<any>` | — | 否 | `:request="async () => {}"` | 自定义上传函数（form, config）→ Promise |
|
|
3748
|
+
| `modelValue` | `string \| any[]` | `''` | 否 | `v-model="value"` | `v-model` 绑定的值（`defineModel` 隐式声明） |
|
|
3749
|
+
| `accept` | `string` | — | 否 | `accept=".png,.jpg,.pdf"` | — |
|
|
3750
|
+
| `maxSize` | `number` | — | 否 | `:max-size="1"` | 单文件大小上限（MB） |
|
|
3751
|
+
| `limit` | `number` | — | 否 | `:limit="1"` | — |
|
|
3752
|
+
| `tip` | `string` | — | 否 | `tip="支持批量上传，单个文件不超过 10MB"` | — |
|
|
3753
|
+
| `separator` | `string` | `';'` | 否 | `separator=","` | 多路径分隔符（modelValue 为字符串时） |
|
|
3754
|
+
| `responseUrlKey` | `string` | `'meta'` | 否 | `response-url-key="url"` | 响应中文件地址的取值键 |
|
|
3755
|
+
| `downloadButtonVisible` | `boolean` | `undefined` | 否 | `download-button-visible` | 是否展示「下载」按钮（默认 true） |
|
|
3756
|
+
| `tipVisible` | `boolean` | `undefined` | 否 | `tip-visible` | 是否展示提示文案（默认 true） |
|
|
3757
|
+
| `showDownloadButton` | `boolean` | `undefined` | 否 | `show-download-button` | — |
|
|
3758
|
+
| `showTip` | `boolean` | `undefined` | 否 | `show-tip` | — |
|
|
3759
|
+
| `verifySpace` | `boolean` | `false` | 否 | `verify-space` | 校验文件名不得含空格 |
|
|
3709
3760
|
|
|
3710
3761
|
**事件（emits）**
|
|
3711
3762
|
|
|
@@ -3988,18 +4039,18 @@ import { ZlFileViewer } from '@zl-ui-kit/components/file-preview'
|
|
|
3988
4039
|
|
|
3989
4040
|
操作项模型（ZlActionList / ZlTable actions 列共用）
|
|
3990
4041
|
|
|
3991
|
-
| 字段 | 类型
|
|
3992
|
-
| ------------ |
|
|
3993
|
-
| `label` | `string`
|
|
3994
|
-
| `icon` | `string`
|
|
3995
|
-
| `iconProps` | `Record<string, any>`
|
|
3996
|
-
| `iconClass` | `string`
|
|
3997
|
-
| `tooltip` | `boolean`
|
|
3998
|
-
| `disabled` | `boolean`
|
|
3999
|
-
| `divided` | `boolean`
|
|
4000
|
-
| `permission` | `string \| string[]`
|
|
4001
|
-
| `visible` | `(...args: any[]) => boolean` | 否 |
|
|
4002
|
-
| `handler` | `(...args: any[]) => void`
|
|
4042
|
+
| 字段 | 类型 | 必填 | 说明 |
|
|
4043
|
+
| ------------ | ------------------------------------------ | ---- | ----------------------------------------------------------------------------------------------------------------- |
|
|
4044
|
+
| `label` | `string` | 是 | 操作文案 |
|
|
4045
|
+
| `icon` | `string` | 否 | 图标（`zl:` 前缀走 ZlIcon，其余按 iconify/EP 规则） |
|
|
4046
|
+
| `iconProps` | `Record<string, any>` | 否 | 传给图标组件的 props |
|
|
4047
|
+
| `iconClass` | `string` | 否 | 图标自定义类名 |
|
|
4048
|
+
| `tooltip` | `boolean` | 否 | 是否用 tooltip 包住文案（文字过长时） |
|
|
4049
|
+
| `disabled` | `boolean` | 否 | 禁用（点击无响应） |
|
|
4050
|
+
| `divided` | `boolean` | 否 | 与下一项之间显示分割线 |
|
|
4051
|
+
| `permission` | `string \| string[]` | 否 | 权限键（三段式，经 usePermission 校验） |
|
|
4052
|
+
| `visible` | `boolean \| ((...args: any[]) => boolean)` | 否 | 显隐控制：布尔值直接判定；函数接收 `visibleArgs`（末尾追加 action 自身）后判定。 与权限取交集：两者都通过才展示。 |
|
|
4053
|
+
| `handler` | `(...args: any[]) => void` | 否 | 点击处理（接收 actionArgs） |
|
|
4003
4054
|
|
|
4004
4055
|
#### `IComponent`
|
|
4005
4056
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as Z, computed as C, resolveComponent as s, openBlock as n, createElementBlock as c, Fragment as p, renderList as g, createBlock as r, withCtx as i, createVNode as h, mergeProps as f, withModifiers as _, createCommentVNode as
|
|
1
|
+
import { defineComponent as Z, computed as C, resolveComponent as s, openBlock as n, createElementBlock as c, Fragment as p, renderList as g, createBlock as r, withCtx as i, createVNode as h, mergeProps as f, withModifiers as _, createCommentVNode as a, createElementVNode as j, toDisplayString as v, renderSlot as E, normalizeProps as O, createTextVNode as z, unref as S, normalizeClass as T } from "vue";
|
|
2
2
|
import { useZlT as D } from "@zl-ui-kit/composables";
|
|
3
3
|
import { isPlainObject as F } from "@zl-ui-kit/utils";
|
|
4
4
|
import w from "../ZlIcon/index.vue.mjs";
|
|
@@ -19,8 +19,8 @@ const q = { class: "zl-action-list" }, G = {
|
|
|
19
19
|
separator: { type: Boolean }
|
|
20
20
|
},
|
|
21
21
|
emits: ["action"],
|
|
22
|
-
setup(
|
|
23
|
-
const { t: M } = D(), t =
|
|
22
|
+
setup(b, { emit: P }) {
|
|
23
|
+
const { t: M } = D(), t = b, B = P, k = C(() => {
|
|
24
24
|
if (t.iconMore === !0)
|
|
25
25
|
return { icon: "zl:operate-color" };
|
|
26
26
|
if (F(t.iconMore))
|
|
@@ -31,8 +31,8 @@ const q = { class: "zl-action-list" }, G = {
|
|
|
31
31
|
}
|
|
32
32
|
const u = C(() => {
|
|
33
33
|
const o = t.actions.filter((l) => {
|
|
34
|
-
const
|
|
35
|
-
return typeof l.visible == "function" ? l.visible(...t.visibleArgs, l) &&
|
|
34
|
+
const d = N(l);
|
|
35
|
+
return typeof l.visible == "function" ? l.visible(...t.visibleArgs, l) && d : (l.visible === void 0 || !!l.visible) && d;
|
|
36
36
|
});
|
|
37
37
|
return o.length <= t.listCount ? { list: o, more: [] } : {
|
|
38
38
|
list: o.slice(0, t.listCount - 1),
|
|
@@ -40,15 +40,15 @@ const q = { class: "zl-action-list" }, G = {
|
|
|
40
40
|
};
|
|
41
41
|
});
|
|
42
42
|
function m(o) {
|
|
43
|
-
B("action", o, ...t.actionArgs), typeof o.handler == "function" && o.handler(...t.actionArgs, o);
|
|
43
|
+
o.disabled || (B("action", o, ...t.actionArgs), typeof o.handler == "function" && o.handler(...t.actionArgs, o));
|
|
44
44
|
}
|
|
45
45
|
return (o, l) => {
|
|
46
|
-
const
|
|
46
|
+
const d = s("el-tooltip"), y = s("el-link"), V = s("el-dropdown-item"), $ = s("el-dropdown-menu"), x = s("el-dropdown");
|
|
47
47
|
return n(), c("div", q, [
|
|
48
48
|
(n(!0), c(p, null, g(u.value.list, (e) => (n(), c(p, {
|
|
49
49
|
key: e.label
|
|
50
50
|
}, [
|
|
51
|
-
e.tooltip && e.icon ? (n(), r(
|
|
51
|
+
e.tooltip && e.icon ? (n(), r(d, {
|
|
52
52
|
key: 0,
|
|
53
53
|
content: e.label,
|
|
54
54
|
placement: "top"
|
|
@@ -61,23 +61,24 @@ const q = { class: "zl-action-list" }, G = {
|
|
|
61
61
|
}), null, 16, ["icon", "onClick"])
|
|
62
62
|
]),
|
|
63
63
|
_: 2
|
|
64
|
-
}, 1032, ["content"])) : (n(), r(
|
|
64
|
+
}, 1032, ["content"])) : (n(), r(y, {
|
|
65
65
|
key: 1,
|
|
66
66
|
class: "zl-action-list__action",
|
|
67
67
|
type: "primary",
|
|
68
68
|
underline: !1,
|
|
69
|
+
disabled: e.disabled,
|
|
69
70
|
onClick: _((L) => m(e), ["stop"])
|
|
70
71
|
}, {
|
|
71
72
|
default: i(() => [
|
|
72
73
|
e.icon ? (n(), r(w, f({
|
|
73
74
|
key: 0,
|
|
74
75
|
icon: e.icon
|
|
75
|
-
}, { ref_for: !0 }, e.iconProps), null, 16, ["icon"])) :
|
|
76
|
+
}, { ref_for: !0 }, e.iconProps), null, 16, ["icon"])) : a("", !0),
|
|
76
77
|
j("span", null, v(e.label), 1)
|
|
77
78
|
]),
|
|
78
79
|
_: 2
|
|
79
|
-
}, 1032, ["onClick"])),
|
|
80
|
-
|
|
80
|
+
}, 1032, ["disabled", "onClick"])),
|
|
81
|
+
b.separator ? (n(), c("div", G)) : a("", !0)
|
|
81
82
|
], 64))), 128)),
|
|
82
83
|
u.value.more.length ? (n(), r(x, {
|
|
83
84
|
key: 0,
|
|
@@ -100,7 +101,7 @@ const q = { class: "zl-action-list" }, G = {
|
|
|
100
101
|
key: 0,
|
|
101
102
|
icon: e.icon,
|
|
102
103
|
class: T(e.iconClass)
|
|
103
|
-
}, null, 8, ["icon", "class"])) :
|
|
104
|
+
}, null, 8, ["icon", "class"])) : a("", !0),
|
|
104
105
|
z(" " + v(e.label), 1)
|
|
105
106
|
]),
|
|
106
107
|
_: 2
|
|
@@ -111,7 +112,7 @@ const q = { class: "zl-action-list" }, G = {
|
|
|
111
112
|
]),
|
|
112
113
|
default: i(() => [
|
|
113
114
|
E(o.$slots, "more", {}, () => [
|
|
114
|
-
|
|
115
|
+
k.value ? (n(), r(A, O(f({ key: 0 }, k.value)), null, 16)) : (n(), r(y, {
|
|
115
116
|
key: 1,
|
|
116
117
|
class: "zl-action-list__more-icon",
|
|
117
118
|
type: "primary",
|
|
@@ -127,7 +128,7 @@ const q = { class: "zl-action-list" }, G = {
|
|
|
127
128
|
])
|
|
128
129
|
]),
|
|
129
130
|
_: 3
|
|
130
|
-
})) :
|
|
131
|
+
})) : a("", !0)
|
|
131
132
|
]);
|
|
132
133
|
};
|
|
133
134
|
}
|
|
@@ -18,8 +18,11 @@ export interface ActionItem {
|
|
|
18
18
|
divided?: boolean;
|
|
19
19
|
/** 权限键（三段式，经 usePermission 校验） */
|
|
20
20
|
permission?: string | string[];
|
|
21
|
-
/**
|
|
22
|
-
|
|
21
|
+
/**
|
|
22
|
+
* 显隐控制：布尔值直接判定；函数接收 `visibleArgs`（末尾追加 action 自身）后判定。
|
|
23
|
+
* 与权限取交集：两者都通过才展示。
|
|
24
|
+
*/
|
|
25
|
+
visible?: boolean | ((...args: any[]) => boolean);
|
|
23
26
|
/** 点击处理（接收 actionArgs） */
|
|
24
27
|
handler?: (...args: any[]) => void;
|
|
25
28
|
[key: string]: any;
|
|
@@ -1,16 +1,37 @@
|
|
|
1
1
|
import { SearchItem } from '../../types';
|
|
2
|
+
/**
|
|
3
|
+
* useRequest / usePageableRequest 实例形态（消费方自行创建后传入）。
|
|
4
|
+
* 仅用结构特征识别：带 `run`/`data`/`loading` 且**没有** `service` 字段即视为实例。
|
|
5
|
+
*/
|
|
6
|
+
interface UseRequestInstance {
|
|
7
|
+
run: (...args: any[]) => Promise<any>;
|
|
8
|
+
data: any;
|
|
9
|
+
loading: any;
|
|
10
|
+
params?: any;
|
|
11
|
+
refresh?: () => void;
|
|
12
|
+
[key: string]: any;
|
|
13
|
+
}
|
|
2
14
|
type __VLS_Props = {
|
|
3
15
|
immediate?: boolean;
|
|
4
|
-
/**
|
|
16
|
+
/**
|
|
17
|
+
* 请求来源，三种形态任一：
|
|
18
|
+
* 1. 请求函数 `(...args) => Promise`
|
|
19
|
+
* 2. `{ service, options }` 对象（ZlCardPage 内部再包一层 usePageableRequest）
|
|
20
|
+
* 3. `useRequest` / `usePageableRequest` 实例（消费方自行创建，便于接管 loading/refresh）
|
|
21
|
+
*/
|
|
5
22
|
request: ((...args: any[]) => Promise<any>) | {
|
|
6
23
|
service: (...args: any[]) => Promise<any>;
|
|
7
24
|
options?: Record<string, any>;
|
|
8
|
-
};
|
|
25
|
+
} | UseRequestInstance;
|
|
9
26
|
queryItems?: SearchItem[];
|
|
10
27
|
pagination?: Record<string, any> | boolean;
|
|
11
28
|
itemKey?: string;
|
|
12
29
|
cardMinWidth?: string;
|
|
13
30
|
};
|
|
31
|
+
declare function search(form?: Record<string, any>, pagination?: {
|
|
32
|
+
pageNum: number;
|
|
33
|
+
pageSize: number;
|
|
34
|
+
}): void;
|
|
14
35
|
declare function __VLS_template(): {
|
|
15
36
|
attrs: Partial<{}>;
|
|
16
37
|
slots: Partial<Record<`search-${string}`, (_: {
|
|
@@ -41,6 +62,7 @@ declare function __VLS_template(): {
|
|
|
41
62
|
readonly model?: Record<string, any> | undefined;
|
|
42
63
|
readonly immediate?: boolean | undefined;
|
|
43
64
|
readonly disabled?: boolean | undefined;
|
|
65
|
+
readonly labelsVisible?: boolean | undefined;
|
|
44
66
|
readonly showLabels?: boolean | undefined;
|
|
45
67
|
readonly onSearch?: ((params: Record<string, any>) => any) | undefined;
|
|
46
68
|
readonly onReset?: (() => any) | undefined;
|
|
@@ -237,6 +259,7 @@ declare function __VLS_template(): {
|
|
|
237
259
|
model?: Record<string, any>;
|
|
238
260
|
immediate?: boolean;
|
|
239
261
|
disabled?: boolean;
|
|
262
|
+
labelsVisible?: boolean;
|
|
240
263
|
showLabels?: boolean;
|
|
241
264
|
}> & Readonly<{
|
|
242
265
|
onSearch?: ((params: Record<string, any>) => any) | undefined;
|
|
@@ -252,6 +275,7 @@ declare function __VLS_template(): {
|
|
|
252
275
|
immediate: boolean;
|
|
253
276
|
disabled: boolean;
|
|
254
277
|
items: SearchItem[];
|
|
278
|
+
labelsVisible: boolean;
|
|
255
279
|
showLabels: boolean;
|
|
256
280
|
}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
|
|
257
281
|
beforeCreate?: (() => void) | (() => void)[];
|
|
@@ -277,17 +301,19 @@ declare function __VLS_template(): {
|
|
|
277
301
|
immediate: boolean;
|
|
278
302
|
disabled: boolean;
|
|
279
303
|
items: SearchItem[];
|
|
304
|
+
labelsVisible: boolean;
|
|
280
305
|
showLabels: boolean;
|
|
281
306
|
}> & Omit<Readonly<{
|
|
282
307
|
items?: SearchItem[];
|
|
283
308
|
model?: Record<string, any>;
|
|
284
309
|
immediate?: boolean;
|
|
285
310
|
disabled?: boolean;
|
|
311
|
+
labelsVisible?: boolean;
|
|
286
312
|
showLabels?: boolean;
|
|
287
313
|
}> & Readonly<{
|
|
288
314
|
onSearch?: ((params: Record<string, any>) => any) | undefined;
|
|
289
315
|
onReset?: (() => any) | undefined;
|
|
290
|
-
}>, "search" | "reset" | "params" | ("immediate" | "disabled" | "items" | "showLabels")> & {
|
|
316
|
+
}>, "search" | "reset" | "params" | ("immediate" | "disabled" | "items" | "labelsVisible" | "showLabels")> & {
|
|
291
317
|
params: Record<string, any>;
|
|
292
318
|
search: () => Promise<void>;
|
|
293
319
|
reset: () => Promise<void>;
|
|
@@ -327,7 +353,8 @@ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
|
327
353
|
declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
|
|
328
354
|
refresh: () => void;
|
|
329
355
|
params: import('vue').ComputedRef<unknown>;
|
|
330
|
-
|
|
356
|
+
/** 重新查询并回到第 1 页；消费方可在 useRequest 的 refreshDepsAction 里调用 */
|
|
357
|
+
search: typeof search;
|
|
331
358
|
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
|
|
332
359
|
"search-reset": () => any;
|
|
333
360
|
}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
@@ -346,6 +373,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
|
|
|
346
373
|
readonly model?: Record<string, any> | undefined;
|
|
347
374
|
readonly immediate?: boolean | undefined;
|
|
348
375
|
readonly disabled?: boolean | undefined;
|
|
376
|
+
readonly labelsVisible?: boolean | undefined;
|
|
349
377
|
readonly showLabels?: boolean | undefined;
|
|
350
378
|
readonly onSearch?: ((params: Record<string, any>) => any) | undefined;
|
|
351
379
|
readonly onReset?: (() => any) | undefined;
|
|
@@ -542,6 +570,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
|
|
|
542
570
|
model?: Record<string, any>;
|
|
543
571
|
immediate?: boolean;
|
|
544
572
|
disabled?: boolean;
|
|
573
|
+
labelsVisible?: boolean;
|
|
545
574
|
showLabels?: boolean;
|
|
546
575
|
}> & Readonly<{
|
|
547
576
|
onSearch?: ((params: Record<string, any>) => any) | undefined;
|
|
@@ -557,6 +586,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
|
|
|
557
586
|
immediate: boolean;
|
|
558
587
|
disabled: boolean;
|
|
559
588
|
items: SearchItem[];
|
|
589
|
+
labelsVisible: boolean;
|
|
560
590
|
showLabels: boolean;
|
|
561
591
|
}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
|
|
562
592
|
beforeCreate?: (() => void) | (() => void)[];
|
|
@@ -582,17 +612,19 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
|
|
|
582
612
|
immediate: boolean;
|
|
583
613
|
disabled: boolean;
|
|
584
614
|
items: SearchItem[];
|
|
615
|
+
labelsVisible: boolean;
|
|
585
616
|
showLabels: boolean;
|
|
586
617
|
}> & Omit<Readonly<{
|
|
587
618
|
items?: SearchItem[];
|
|
588
619
|
model?: Record<string, any>;
|
|
589
620
|
immediate?: boolean;
|
|
590
621
|
disabled?: boolean;
|
|
622
|
+
labelsVisible?: boolean;
|
|
591
623
|
showLabels?: boolean;
|
|
592
624
|
}> & Readonly<{
|
|
593
625
|
onSearch?: ((params: Record<string, any>) => any) | undefined;
|
|
594
626
|
onReset?: (() => any) | undefined;
|
|
595
|
-
}>, "search" | "reset" | "params" | ("immediate" | "disabled" | "items" | "showLabels")> & {
|
|
627
|
+
}>, "search" | "reset" | "params" | ("immediate" | "disabled" | "items" | "labelsVisible" | "showLabels")> & {
|
|
596
628
|
params: Record<string, any>;
|
|
597
629
|
search: () => Promise<void>;
|
|
598
630
|
reset: () => Promise<void>;
|