@zl-ui-kit/components 0.7.2 → 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 +102 -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 +81 -78
- 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/package.json +7 -7
package/README.md
CHANGED
|
@@ -850,7 +850,7 @@ const items: FormItem[] = [
|
|
|
850
850
|
|
|
851
851
|
**展开 / 收起**：`lastVisibleIndex !== null` 时在「查询」左侧出现筛选图标按钮，点击在查询条**上层**
|
|
852
852
|
展开全量表单浮层（`position: absolute` + 上滑 `--28px` 淡入，不改变页面高度），再点收起；查询/重置后自动收起。
|
|
853
|
-
`showLabels`
|
|
853
|
+
`labelsVisible` 不显式传时，仅在发生溢出时展示「筛选条件」标签行（旧名 `showLabels` 仍兼容）。
|
|
854
854
|
|
|
855
855
|
**图标按钮的移入提示**：重置、展开、收起都是纯图标按钮，鼠标移入给出文字提示（原生 `title`，
|
|
856
856
|
同时带 `aria-label` 供读屏）。文案走 i18n，随 `setLocale` 切换、也可被消费方覆盖：
|
|
@@ -872,7 +872,42 @@ const items: FormItem[] = [
|
|
|
872
872
|
|
|
873
873
|
### ZlAction / ZlActionList —— 操作列与操作列表
|
|
874
874
|
|
|
875
|
-
基于 `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` 并继续生效：新名优先，未给时回落旧名）。
|
|
876
911
|
|
|
877
912
|
### ZlRadioTag / ZlCheckboxTag / ZlCheckAll / ZlSorter / ZlAddSub / ZlLayoutSwitch
|
|
878
913
|
|
|
@@ -1440,7 +1475,7 @@ const { i18n } = useLocale({ messages })
|
|
|
1440
1475
|
| `ZlCheckboxTag` | 主入口 | 7 | 1 | 1 | 0 |
|
|
1441
1476
|
| `ZlCopy` | 主入口 | 2 | 0 | 2 | 0 |
|
|
1442
1477
|
| `ZlDescription` | 主入口 | 5 | 0 | 1 | 0 |
|
|
1443
|
-
| `ZlDictTag` | 主入口 |
|
|
1478
|
+
| `ZlDictTag` | 主入口 | 7 | 0 | 0 | 0 |
|
|
1444
1479
|
| `ZlDrawer` | 主入口 | 6 | 1 | 2 | 0 |
|
|
1445
1480
|
| `ZlDynamicComponent` | 主入口 | 3 | 2 | 0 | 0 |
|
|
1446
1481
|
| `ZlPdfViewer` | 主入口 | 2 | 0 | 0 | 0 |
|
|
@@ -1462,7 +1497,7 @@ const { i18n } = useLocale({ messages })
|
|
|
1462
1497
|
| `ZlPermission` | 主入口 | 1 | 0 | 1 | 0 |
|
|
1463
1498
|
| `ZlPopconfirm` | 主入口 | 4 | 2 | 3 | 0 |
|
|
1464
1499
|
| `ZlRadioTag` | 主入口 | 3 | 1 | 1 | 0 |
|
|
1465
|
-
| `ZlSearch` | 主入口 |
|
|
1500
|
+
| `ZlSearch` | 主入口 | 6 | 2 | 2 | 3 |
|
|
1466
1501
|
| `ZlSearchTable` | 主入口 | 5 | 1 | 3 | 4 |
|
|
1467
1502
|
| `ZlSection` | 主入口 | 4 | 0 | 3 | 0 |
|
|
1468
1503
|
| `ZlSorter` | 主入口 | 2 | 2 | 1 | 0 |
|
|
@@ -1473,7 +1508,7 @@ const { i18n } = useLocale({ messages })
|
|
|
1473
1508
|
| `ZlTag` | 主入口 | 15 | 4 | 1 | 0 |
|
|
1474
1509
|
| `ZlText` | 主入口 | 1 | 0 | 1 | 0 |
|
|
1475
1510
|
| `ZlTitle` | 主入口 | 5 | 0 | 3 | 0 |
|
|
1476
|
-
| `ZlUpload` | 主入口 |
|
|
1511
|
+
| `ZlUpload` | 主入口 | 13 | 1 | 1 | 0 |
|
|
1477
1512
|
| `ZlTree` | 主入口 | 5 | 0 | 3 | 0 |
|
|
1478
1513
|
| `ZlTreeSelect` | 主入口 | 6 | 1 | 0 | 0 |
|
|
1479
1514
|
| `ZlChart` | 子入口 chart | 2 | 0 | 0 | 1 |
|
|
@@ -1482,7 +1517,7 @@ const { i18n } = useLocale({ messages })
|
|
|
1482
1517
|
| `ZlFilePreview` | 子入口 file-preview | 1 | 0 | 0 | 0 |
|
|
1483
1518
|
| `ZlFileViewer` | 子入口 file-preview | 1 | 0 | 0 | 0 |
|
|
1484
1519
|
|
|
1485
|
-
> 说明列为 `—` 表示该属性在源码里没写 `/** */` 注释（当前
|
|
1520
|
+
> 说明列为 `—` 表示该属性在源码里没写 `/** */` 注释（当前 134/194 个）；补完注释重跑 `pnpm docs:api` 即可同步。
|
|
1486
1521
|
|
|
1487
1522
|
### 14.1 主入口组件（`@zl-ui-kit/components`）
|
|
1488
1523
|
|
|
@@ -1912,14 +1947,14 @@ import { ZlCardPage } from '@zl-ui-kit/components'
|
|
|
1912
1947
|
|
|
1913
1948
|
**props**
|
|
1914
1949
|
|
|
1915
|
-
| 属性 | 类型
|
|
1916
|
-
| -------------- |
|
|
1917
|
-
| `immediate` | `boolean`
|
|
1918
|
-
| `request` | `\| ((...args: any[]) => Promise<any>) \| { service: (...args: any[]) => Promise<any>; options?: Record<string, any> }` | — | 是 | `:request="async () => {}"` |
|
|
1919
|
-
| `queryItems` | `SearchItem[]`
|
|
1920
|
-
| `pagination` | `Record<string, any> \| boolean`
|
|
1921
|
-
| `itemKey` | `string`
|
|
1922
|
-
| `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"` | — |
|
|
1923
1958
|
|
|
1924
1959
|
**事件（emits）**
|
|
1925
1960
|
|
|
@@ -1937,11 +1972,11 @@ import { ZlCardPage } from '@zl-ui-kit/components'
|
|
|
1937
1972
|
|
|
1938
1973
|
**暴露（defineExpose）**
|
|
1939
1974
|
|
|
1940
|
-
| 名称 | 说明
|
|
1941
|
-
| --------- |
|
|
1942
|
-
| `refresh` | —
|
|
1943
|
-
| `params` | —
|
|
1944
|
-
| `search` |
|
|
1975
|
+
| 名称 | 说明 |
|
|
1976
|
+
| --------- | ------------------------------------------------------------------------ |
|
|
1977
|
+
| `refresh` | — |
|
|
1978
|
+
| `params` | — |
|
|
1979
|
+
| `search` | 重新查询并回到第 1 页；消费方可在 useRequest 的 refreshDepsAction 里调用 |
|
|
1945
1980
|
|
|
1946
1981
|
**完整示例**：见 §6 数据型组件 + useRequest 体系（核心） › ② ZlCardPage —— 直接传 service
|
|
1947
1982
|
|
|
@@ -2135,7 +2170,7 @@ import { ZlDescription } from '@zl-ui-kit/components'
|
|
|
2135
2170
|
|
|
2136
2171
|
**简介**：字典标签
|
|
2137
2172
|
|
|
2138
|
-
**接口概览**：
|
|
2173
|
+
**接口概览**：7 props
|
|
2139
2174
|
|
|
2140
2175
|
**用法示例**
|
|
2141
2176
|
|
|
@@ -2153,14 +2188,15 @@ import { ZlDictTag } from '@zl-ui-kit/components'
|
|
|
2153
2188
|
|
|
2154
2189
|
**props**
|
|
2155
2190
|
|
|
2156
|
-
| 属性
|
|
2157
|
-
|
|
|
2158
|
-
| `dictKey`
|
|
2159
|
-
| `dict`
|
|
2160
|
-
| `corner`
|
|
2161
|
-
| `value`
|
|
2162
|
-
| `simple`
|
|
2163
|
-
| `
|
|
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` | — |
|
|
2164
2200
|
|
|
2165
2201
|
> 把 `$attrs` 透传给 `zl-corner-tag`，未列出的属性会继续下传
|
|
2166
2202
|
|
|
@@ -2860,7 +2896,7 @@ import { ZlLayoutSwitch } from '@zl-ui-kit/components'
|
|
|
2860
2896
|
|
|
2861
2897
|
<sub>入口 `@zl-ui-kit/components` · 源码 `packages/components/src/components/ZlPagination/index.vue`</sub>
|
|
2862
2898
|
|
|
2863
|
-
**简介**：分页器（el-pagination 封装）：默认靠右对齐，分页入参（pageNum/pageSize/
|
|
2899
|
+
**简介**：分页器（el-pagination 封装）：默认靠右对齐，分页入参（pageNum/pageSize/totalVisible…） 经 `$attrs` 透传，`align` 控制水平对齐（left/center/right）
|
|
2864
2900
|
|
|
2865
2901
|
**接口概览**：4 props · 3 事件
|
|
2866
2902
|
|
|
@@ -3057,7 +3093,7 @@ import { ZlRadioTag } from '@zl-ui-kit/components'
|
|
|
3057
3093
|
|
|
3058
3094
|
**简介**：查询条：表单项按容器宽度自适应排列（auto-fill 网格），放不下的项自动隐藏， 并在「查询」左侧给出展开按钮（点击后在查询条上层展开全量表单，再点收起）。
|
|
3059
3095
|
|
|
3060
|
-
**接口概览**：
|
|
3096
|
+
**接口概览**：6 props · 2 事件 · 2 插槽 · 3 暴露
|
|
3061
3097
|
|
|
3062
3098
|
**用法示例**
|
|
3063
3099
|
|
|
@@ -3086,13 +3122,14 @@ import { ZlSearch } from '@zl-ui-kit/components'
|
|
|
3086
3122
|
|
|
3087
3123
|
**props**
|
|
3088
3124
|
|
|
3089
|
-
| 属性
|
|
3090
|
-
|
|
|
3091
|
-
| `items`
|
|
3092
|
-
| `model`
|
|
3093
|
-
| `immediate`
|
|
3094
|
-
| `disabled`
|
|
3095
|
-
| `
|
|
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` | — |
|
|
3096
3133
|
|
|
3097
3134
|
**事件（emits）**
|
|
3098
3135
|
|
|
@@ -3677,7 +3714,7 @@ import { ZlTitle } from '@zl-ui-kit/components'
|
|
|
3677
3714
|
|
|
3678
3715
|
**简介**：传上传 service
|
|
3679
3716
|
|
|
3680
|
-
**接口概览**：
|
|
3717
|
+
**接口概览**：13 props · 1 事件 · 1 插槽
|
|
3681
3718
|
|
|
3682
3719
|
**用法示例**
|
|
3683
3720
|
|
|
@@ -3705,19 +3742,21 @@ import { ZlUpload } from '@zl-ui-kit/components'
|
|
|
3705
3742
|
|
|
3706
3743
|
**props**
|
|
3707
3744
|
|
|
3708
|
-
| 属性
|
|
3709
|
-
|
|
|
3710
|
-
| `request`
|
|
3711
|
-
| `modelValue`
|
|
3712
|
-
| `accept`
|
|
3713
|
-
| `maxSize`
|
|
3714
|
-
| `limit`
|
|
3715
|
-
| `tip`
|
|
3716
|
-
| `separator`
|
|
3717
|
-
| `responseUrlKey`
|
|
3718
|
-
| `
|
|
3719
|
-
| `
|
|
3720
|
-
| `
|
|
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` | 校验文件名不得含空格 |
|
|
3721
3760
|
|
|
3722
3761
|
**事件（emits）**
|
|
3723
3762
|
|
|
@@ -4000,18 +4039,18 @@ import { ZlFileViewer } from '@zl-ui-kit/components/file-preview'
|
|
|
4000
4039
|
|
|
4001
4040
|
操作项模型（ZlActionList / ZlTable actions 列共用）
|
|
4002
4041
|
|
|
4003
|
-
| 字段 | 类型
|
|
4004
|
-
| ------------ |
|
|
4005
|
-
| `label` | `string`
|
|
4006
|
-
| `icon` | `string`
|
|
4007
|
-
| `iconProps` | `Record<string, any>`
|
|
4008
|
-
| `iconClass` | `string`
|
|
4009
|
-
| `tooltip` | `boolean`
|
|
4010
|
-
| `disabled` | `boolean`
|
|
4011
|
-
| `divided` | `boolean`
|
|
4012
|
-
| `permission` | `string \| string[]`
|
|
4013
|
-
| `visible` | `(...args: any[]) => boolean` | 否 |
|
|
4014
|
-
| `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） |
|
|
4015
4054
|
|
|
4016
4055
|
#### `IComponent`
|
|
4017
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>;
|