snail.vue 2.0.19 → 2.0.21

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.
Files changed (8) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +86 -86
  3. package/dist/snail.vue.d.ts +188 -82
  4. package/dist/snail.vue.js +426 -275
  5. package/dist/snail.vue.umd.js +425 -274
  6. package/dist/styles/snail.vue.vue.css +53 -49
  7. package/package.json +31 -31
  8. package/vue.code-snippets +35 -35
package/LICENSE CHANGED
@@ -1,21 +1,21 @@
1
- The MIT License (MIT)
2
-
3
- Copyright (c) 2025-present, Snai <snail_dev@163.com>
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in
13
- all copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
- THE SOFTWARE.
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2025-present, Snai <snail_dev@163.com>
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+ THE SOFTWARE.
package/README.md CHANGED
@@ -1,86 +1,86 @@
1
- # 1. **概述**
2
-
3
- **snail.vue 基于 vue 3.x，实现一些常用功能模块，通过 MIT 协议开放使用：**
4
-
5
- 1. **基于 vue 封装常用组件（如表单、列表、树、弹窗、容器、提示等组件），并不断补充**
6
- 2. **提供基于 vue 的通用数据结构和事件模型**
7
- 3. **对 vue 的部分功能做了再次封装，简化使用和生命周期管理**
8
-
9
- # 2. **环境搭建**
10
-
11
- ## 2.1. **依赖安装**
12
-
13
- 1. **安装 npm 包：**`<span class="ne-text">pnpm add snail.vue</span>`
14
- 2. **注册依赖组件：**`<span class="ne-text">pnpm add vue</span>`
15
- 3. **打包输出**
16
-
17
- ## 2.2. **动态注册**
18
-
19
- # 3. **使用说明**
20
-
21
- ## 3.1. **base 基础组件**
22
-
23
- **封装基础 vue 组件，如 Button、Select、Header、Icon、Search、Switch 等等**
24
-
25
- **详细说明：**[https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8)
26
-
27
- | **组件** | **简介** |
28
- | ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ |
29
- | [Button](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#s1zYq) | **按钮组件；集成 type、size 属性，封装大小和类型，简化使用** |
30
- | [Choose](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#gCenb) | **选择组件；集成 radio、checkbook 常用功能，支持选项组；支持美化和原生两种渲染模式** |
31
- | [DatePicker](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#je00A) | **日期选择器组件；仅支持盖板模式，后续支持 input 输入框模式** |
32
- | [Icon](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#xf4og) | **图标组件；使用 svg 进行图标绘，内置常用图标类型；并支持自定义图标绘制路径** |
33
- | [Search](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#VoyjZ) | **搜索组件；封装搜索输入框、搜索按钮；支持自动完成等功能** |
34
- | [Select](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#NPAQL) | **选项菜单组件；对原生 select 的扩充，支持多级选项，支持单选和多选等** |
35
- | [Switch](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#sOSDT) | **开关组件；支持只读、v-model 绑定操纵** |
36
- | [Reactive](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#LzpHK) | **响应式模块，非 vue 组件；对 vue 响应时做了封装，集成常用生命周期管理** |
37
- | [Footer](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#Mk0Pf) | **尾部组件；和 Header 配套，封装确定、取消按钮；不常用** |
38
- | [Header](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#jQkjV) | **头部组件；封装标题、关闭按钮，用于 page 和 dialog 模式；支持插槽** |
39
-
40
- ## 3.2. **container 容器组件**
41
-
42
- **实现对子组件的动态加载，如列表、树、滚动容器，折叠面板，动态组件等等；**
43
-
44
- **详细说明：**[https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc)
45
-
46
- | **组件** | **简介** |
47
- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
48
- | [Dynamic](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#NNGJt) | **动态组件；vue 的 Component 组件扩展，支持 url、name、object 方式加载异步组件，并支持 event、props、model、slot 等绑定** |
49
- | [Fold](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#sJOfO) | **折叠面板组件；通过 slot 加载实际内容，封装折叠 title 实现面板展开、收起功能** |
50
- | [Layout](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#lGmps) | **布局组件；实现上中下、左中右布局，通过 slot 指定每块内容** |
51
- | [Scroll](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#IcwVh) | **滚动组件；实现滚动条状态、事件封装，并通过 class、event 等方式对外，通过 slot 加载实际内容** |
52
- | [Sort](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#dKA7E) | **排序组件；集成 sortable.js 库，实现再次封装，暴露常见属性** |
53
- | [Table](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#UViu6) | **表格组件；封装表头、内容区域，基于 TableCol、TableRow 子组件对外做自定义渲染** |
54
- | [Tree](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#tKdSd) | **树组件；基于 nodes 渲染树，支持节点自定义，集成节点事件和本地搜索** |
55
- | [Wrapper](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#gita6) | **包裹层组件；作为常用组件的包裹层，自动实现组件在 page 和 popup 中展现，让内容组件关注核心逻辑即可** |
56
-
57
- ## 3.3. picker 选择器组件
58
-
59
- > 基于IPopupManager实现的各类选择器组件，如日期选择器、时间选择器、颜色选择器、、、
60
-
61
- ## 3.4. **popup 弹窗组件**
62
-
63
- **基于 IPopupManager 实现弹窗管理，自动管理弹窗层级、弹窗生命周期；提供基础 popup 弹窗方法；并扩展 dialog、follow、toast、confirm 弹窗方法**
64
-
65
- **详细说明：**[https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2](https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2)
66
-
67
- | **弹窗方法** | **简介** |
68
- | ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
69
- | [usePopup](https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2#MF7uV) | **弹窗管理器接口实现接口，后续 popup、dialog 等弹窗的具体实现** |
70
- | [popup](https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2#gppwu) | **通用弹窗方法；管理弹窗生成周期，自动分配弹层，实现属性、事件绑定** |
71
- | [dialog](https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2#YZ42j) | **模态弹窗；利用 popup 实现弹窗遮罩，支持关闭前拦截** |
72
- | [follow](https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2#lMTk5) | **跟随弹窗；弹窗自动跟随指定 target 元素，实现高度、宽度跟随、位置跟随、位置智能感知** |
73
- | [toast](https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2#FWNH1) | **消息提示弹窗；模拟 Android 的 Toast 弹窗提示消息** |
74
- | [confirm](https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2#wohc0) | **确认弹窗；模拟实现原生 confirm 弹窗** |
75
-
76
- ## 3.5. **prompt 提示组件**
77
-
78
- **封装一些提示性质的通用组件，如数据加载状态、无数据提醒等等**
79
-
80
- **详细说明：**[https://www.yuque.com/snail-devx/js/kp0nznuu61qs8zgw](https://www.yuque.com/snail-devx/js/kp0nznuu61qs8zgw)
81
-
82
- | **组件** | **简介** |
83
- | ------------------------------------------------------------------------ | ------------------------------------------------------ |
84
- | [DragVerify](https://www.yuque.com/snail-devx/js/kp0nznuu61qs8zgw#YN3YF) | **拖拽验证组件；拖动滑块验证，给出验证提示和结果信息** |
85
- | [Empty](https://www.yuque.com/snail-devx/js/kp0nznuu61qs8zgw#qZsqi) | **空组件；用于提示无数据、无搜索结果等空状态** |
86
- | [Loading](https://www.yuque.com/snail-devx/js/kp0nznuu61qs8zgw#IuBmQ) | **加载组件；用于在数据加载过程中进行加载提示** |
1
+ # 1. **概述**
2
+
3
+ **snail.vue 基于 vue 3.x，实现一些常用功能模块，通过 MIT 协议开放使用：**
4
+
5
+ 1. **基于 vue 封装常用组件（如表单、列表、树、弹窗、容器、提示等组件），并不断补充**
6
+ 2. **提供基于 vue 的通用数据结构和事件模型**
7
+ 3. **对 vue 的部分功能做了再次封装，简化使用和生命周期管理**
8
+
9
+ # 2. **环境搭建**
10
+
11
+ ## 2.1. **依赖安装**
12
+
13
+ 1. **安装 npm 包：**`<span class="ne-text">pnpm add snail.vue</span>`
14
+ 2. **注册依赖组件：**`<span class="ne-text">pnpm add vue</span>`
15
+ 3. **打包输出**
16
+
17
+ ## 2.2. **动态注册**
18
+
19
+ # 3. **使用说明**
20
+
21
+ ## 3.1. **base 基础组件**
22
+
23
+ **封装基础 vue 组件，如 Button、Select、Header、Icon、Search、Switch 等等**
24
+
25
+ **详细说明：**[https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8)
26
+
27
+ | **组件** | **简介** |
28
+ | ------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ |
29
+ | [Button](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#s1zYq) | **按钮组件；集成 type、size 属性，封装大小和类型，简化使用** |
30
+ | [Choose](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#gCenb) | **选择组件；集成 radio、checkbook 常用功能，支持选项组；支持美化和原生两种渲染模式** |
31
+ | [DatePicker](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#je00A) | **日期选择器组件；仅支持盖板模式，后续支持 input 输入框模式** |
32
+ | [Icon](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#xf4og) | **图标组件；使用 svg 进行图标绘，内置常用图标类型；并支持自定义图标绘制路径** |
33
+ | [Search](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#VoyjZ) | **搜索组件；封装搜索输入框、搜索按钮；支持自动完成等功能** |
34
+ | [Select](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#NPAQL) | **选项菜单组件；对原生 select 的扩充，支持多级选项，支持单选和多选等** |
35
+ | [Switch](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#sOSDT) | **开关组件；支持只读、v-model 绑定操纵** |
36
+ | [Reactive](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#LzpHK) | **响应式模块，非 vue 组件；对 vue 响应时做了封装，集成常用生命周期管理** |
37
+ | [Footer](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#Mk0Pf) | **尾部组件；和 Header 配套，封装确定、取消按钮；不常用** |
38
+ | [Header](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#jQkjV) | **头部组件；封装标题、关闭按钮，用于 page 和 dialog 模式；支持插槽** |
39
+
40
+ ## 3.2. **container 容器组件**
41
+
42
+ **实现对子组件的动态加载，如列表、树、滚动容器，折叠面板，动态组件等等；**
43
+
44
+ **详细说明：**[https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc)
45
+
46
+ | **组件** | **简介** |
47
+ | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
48
+ | [Dynamic](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#NNGJt) | **动态组件；vue 的 Component 组件扩展，支持 url、name、object 方式加载异步组件，并支持 event、props、model、slot 等绑定** |
49
+ | [Fold](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#sJOfO) | **折叠面板组件；通过 slot 加载实际内容，封装折叠 title 实现面板展开、收起功能** |
50
+ | [Layout](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#lGmps) | **布局组件；实现上中下、左中右布局，通过 slot 指定每块内容** |
51
+ | [Scroll](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#IcwVh) | **滚动组件；实现滚动条状态、事件封装，并通过 class、event 等方式对外，通过 slot 加载实际内容** |
52
+ | [Sort](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#dKA7E) | **排序组件；集成 sortable.js 库，实现再次封装，暴露常见属性** |
53
+ | [Table](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#UViu6) | **表格组件；封装表头、内容区域，基于 TableCol、TableRow 子组件对外做自定义渲染** |
54
+ | [Tree](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#tKdSd) | **树组件；基于 nodes 渲染树，支持节点自定义，集成节点事件和本地搜索** |
55
+ | [Wrapper](https://www.yuque.com/snail-devx/js/kaynh9t44gbl6fxc#gita6) | **包裹层组件；作为常用组件的包裹层，自动实现组件在 page 和 popup 中展现，让内容组件关注核心逻辑即可** |
56
+
57
+ ## 3.3. picker 选择器组件
58
+
59
+ > 基于IPopupManager实现的各类选择器组件，如日期选择器、时间选择器、颜色选择器、、、
60
+
61
+ ## 3.4. **popup 弹窗组件**
62
+
63
+ **基于 IPopupManager 实现弹窗管理，自动管理弹窗层级、弹窗生命周期；提供基础 popup 弹窗方法；并扩展 dialog、follow、toast、confirm 弹窗方法**
64
+
65
+ **详细说明：**[https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2](https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2)
66
+
67
+ | **弹窗方法** | **简介** |
68
+ | ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
69
+ | [usePopup](https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2#MF7uV) | **弹窗管理器接口实现接口，后续 popup、dialog 等弹窗的具体实现** |
70
+ | [popup](https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2#gppwu) | **通用弹窗方法；管理弹窗生成周期，自动分配弹层，实现属性、事件绑定** |
71
+ | [dialog](https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2#YZ42j) | **模态弹窗；利用 popup 实现弹窗遮罩，支持关闭前拦截** |
72
+ | [follow](https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2#lMTk5) | **跟随弹窗；弹窗自动跟随指定 target 元素，实现高度、宽度跟随、位置跟随、位置智能感知** |
73
+ | [toast](https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2#FWNH1) | **消息提示弹窗；模拟 Android 的 Toast 弹窗提示消息** |
74
+ | [confirm](https://www.yuque.com/snail-devx/js/byho94c6ms40kdb2#wohc0) | **确认弹窗；模拟实现原生 confirm 弹窗** |
75
+
76
+ ## 3.5. **prompt 提示组件**
77
+
78
+ **封装一些提示性质的通用组件，如数据加载状态、无数据提醒等等**
79
+
80
+ **详细说明：**[https://www.yuque.com/snail-devx/js/kp0nznuu61qs8zgw](https://www.yuque.com/snail-devx/js/kp0nznuu61qs8zgw)
81
+
82
+ | **组件** | **简介** |
83
+ | ------------------------------------------------------------------------ | ------------------------------------------------------ |
84
+ | [DragVerify](https://www.yuque.com/snail-devx/js/kp0nznuu61qs8zgw#YN3YF) | **拖拽验证组件；拖动滑块验证，给出验证提示和结果信息** |
85
+ | [Empty](https://www.yuque.com/snail-devx/js/kp0nznuu61qs8zgw#qZsqi) | **空组件；用于提示无数据、无搜索结果等空状态** |
86
+ | [Loading](https://www.yuque.com/snail-devx/js/kp0nznuu61qs8zgw#IuBmQ) | **加载组件；用于在数据加载过程中进行加载提示** |
package/dist/snail.vue.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as snail_core from 'snail.core';
2
2
  import { DateFormat, DateValue, TimeValue, IScope, RunResult, IAsyncScope } from 'snail.core';
3
3
  import * as snail_view from 'snail.view';
4
- import { ScrollbarOptions, BaseStyle, HeightStyle, FlexBoxStyle, WidthStyle, BorderStyle, PaddingStyle, MarginStyle } from 'snail.view';
4
+ import { ScrollbarOptions, ScrollStatus, BaseStyle, HeightStyle, FlexBoxStyle, WidthStyle, BorderStyle, PaddingStyle, MarginStyle } from 'snail.view';
5
5
  import * as vue from 'vue';
6
6
  import { Component, ShallowRef, Ref, WatchSource, App } from 'vue';
7
7
 
@@ -381,6 +381,29 @@ type FooterEvents = {
381
381
  * 滚动视图配置选项
382
382
  */
383
383
  type ScrollOptions = ScrollbarOptions & {};
384
+ /**
385
+ * 滚动视图对外暴露方法
386
+ */
387
+ type ScrollExpose = {
388
+ /**
389
+ * 获取滚动状态信息
390
+ * @returns
391
+ */
392
+ getStatus(): ScrollStatus;
393
+ /**
394
+ * 进行滚动操作
395
+ * - 在当前的滚动条位置基础上，滚动指定单位
396
+ * @param left 水平滚动单位；null、undefined 表示水平不滚动；小于0向左滚动；大于0向右滚动
397
+ * @param top 垂直滚动单位；null、undefined 表示垂直不滚动；小于0向上滚动；大于0向下滚动
398
+ */
399
+ scroll(left?: number, top?: number): void;
400
+ /**
401
+ * 滚动到指定位置
402
+ * @param left 水平滚动条位置；null、undefined 表示水平不滚动
403
+ * @param top 垂直滚动条位置；null、undefined 表示垂直不滚动
404
+ */
405
+ scrollTo(left?: number, top?: number): void;
406
+ };
384
407
  /**
385
408
  * 滚动视图事件
386
409
  */
@@ -412,44 +435,6 @@ type ScrollEvents = {
412
435
  */
413
436
  bottom: [];
414
437
  };
415
- /**
416
- * 滚动视图状态
417
- * - 缓存起来 和下次滚动做比对，触发对应事件
418
- */
419
- type ScrollStatus = {
420
- /**
421
- * 水平滚动条是否显示
422
- */
423
- xbar: boolean;
424
- /**
425
- * 垂直滚动条是否显示
426
- */
427
- ybar: boolean;
428
- /**
429
- * 滚动到【左侧】了
430
- */
431
- left: boolean;
432
- /**
433
- * 滚动到【右侧】了
434
- */
435
- right: boolean;
436
- /**
437
- * 滚动到【顶部】了
438
- */
439
- top: boolean;
440
- /**
441
- * 滚动到【底部】了
442
- */
443
- bottom: boolean;
444
- /**
445
- * 滚动视图宽度
446
- */
447
- scrollwidth: number;
448
- /**
449
- * 滚动视图高度
450
- */
451
- scrollheight: number;
452
- };
453
438
 
454
439
  /**
455
440
  * 包裹组件 相关实体
@@ -1305,7 +1290,7 @@ type ElasticOptions = ScrollOptions & {
1305
1290
  /**
1306
1291
  * 弹性容器组件 事件监听
1307
1292
  */
1308
- type ElasticEvents = {
1293
+ type ElasticEvents = ScrollEvents & {
1309
1294
  /**
1310
1295
  * 刷新数据
1311
1296
  * - 配合 `downRefresh`实现下拉刷新功能
@@ -1320,42 +1305,21 @@ type ElasticEvents = {
1320
1305
  more: [resolve: () => void];
1321
1306
  };
1322
1307
  /**
1323
- * 弹性组件的滚动状态信息
1324
- * - 缓存滚动状态 和下次做比对，触发对应事件
1308
+ * 弹性组件 对外暴露属性接口
1325
1309
  */
1326
- type ElasticScrollStatus = {
1327
- /**
1328
- * 水平滚动条是否显示
1329
- */
1330
- xbar: boolean;
1331
- /**
1332
- * 垂直滚动条是否显示
1333
- */
1334
- ybar: boolean;
1335
- /**
1336
- * 滚动到【左侧】了
1337
- */
1338
- left: boolean;
1310
+ type ElasticExpose = {
1339
1311
  /**
1340
- * 滚动到【右侧】了
1312
+ * 加载刷新数据
1313
+ * - 触发下拉刷新数据
1314
+ * @returns 异步任务对象，外部感知任务执行完成
1341
1315
  */
1342
- right: boolean;
1316
+ loadRefresh(): Promise<void>;
1343
1317
  /**
1344
- * 滚动到【顶部】了
1318
+ * 加载更多数据
1319
+ * - 触发上拉加载更多数据
1320
+ * @returns 异步任务对象，外部感知任务执行完成
1345
1321
  */
1346
- top: boolean;
1347
- /**
1348
- * 滚动到【底部】了
1349
- */
1350
- bottom: boolean;
1351
- /**
1352
- * 滚动视图宽度
1353
- */
1354
- scrollwidth: number;
1355
- /**
1356
- * 滚动视图高度
1357
- */
1358
- scrollheight: number;
1322
+ loadMore(): Promise<void>;
1359
1323
  };
1360
1324
  /**
1361
1325
  * 弹性组件的弹簧状态信息
@@ -2005,6 +1969,79 @@ type ButtonOptions = TitleOptions & {
2005
1969
  type: "primary" | "default" | "link";
2006
1970
  };
2007
1971
 
1972
+ /**
1973
+ * 可操作项组件 的配置选项
1974
+ */
1975
+ type ActionOptions = {
1976
+ /**
1977
+ * 触发方式
1978
+ * - hover：鼠标移入显示
1979
+ * - long-press：长摁显示
1980
+ */
1981
+ trigger: "hover" | "long-press";
1982
+ /**
1983
+ * 显示模式
1984
+ * - popup：弹出显示操作项
1985
+ * - inline：内联显示操作项
1986
+ */
1987
+ /**
1988
+ * 可用操作项
1989
+ */
1990
+ actions: ActionItem[];
1991
+ };
1992
+ /**
1993
+ * 操作项集合 组件渲染配置选项
1994
+ */
1995
+ type ActionItemsOptions = {
1996
+ /**
1997
+ * 展示模式
1998
+ * - horizontal 水平展示
1999
+ * - vertical 垂直展示
2000
+ */
2001
+ mode: "horizontal" | "vertical";
2002
+ /**
2003
+ * 要渲染的操作项
2004
+ */
2005
+ actions: ActionItem[];
2006
+ };
2007
+ /**
2008
+ * 一个操作项的配置
2009
+ */
2010
+ type ActionItem = {
2011
+ /**
2012
+ * 操作项编码
2013
+ * - 确保唯一
2014
+ */
2015
+ code: string;
2016
+ /**
2017
+ * 操作项名称
2018
+ * - 确保唯一
2019
+ */
2020
+ name: string;
2021
+ /**
2022
+ * 操作项颜色
2023
+ */
2024
+ color?: string;
2025
+ /**
2026
+ * 操作项移入时颜色
2027
+ */
2028
+ hoverColor?: string;
2029
+ /**
2030
+ * 操作项图标
2031
+ */
2032
+ icon?: Pick<IconOptions, "type" | "size" | "title">;
2033
+ };
2034
+ /**
2035
+ * 可操作项组件 的事件
2036
+ */
2037
+ type ActionEvents = {
2038
+ /**
2039
+ * 操作项激活时
2040
+ * @param code 操作项的code
2041
+ */
2042
+ trigger: [code: string];
2043
+ };
2044
+
2008
2045
  /**
2009
2046
  * 输入框配置选项
2010
2047
  * - title 将作为 输入框标题区域文本；不传入则不展示 标题区域，仅展示输入框
@@ -2586,7 +2623,7 @@ type FollowExtend = PopupStatusOptions & {
2586
2623
  /**
2587
2624
  * 跟随的目标元素
2588
2625
  */
2589
- target: HTMLElement;
2626
+ target: Element;
2590
2627
  /**
2591
2628
  * x轴方向的跟随策略：响应式
2592
2629
  * - 基于外部传入的跟随策略，计算选举出来的最优策略值
@@ -2743,6 +2780,33 @@ declare function usePicker(): IPickerManager & IScope;
2743
2780
  declare function usePopup(): IPopupManager & IScope;
2744
2781
 
2745
2782
  declare const components: {
2783
+ Action: {
2784
+ new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<ActionOptions> & Readonly<{
2785
+ onTrigger?: (code: string) => any;
2786
+ }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
2787
+ trigger: (code: string) => any;
2788
+ }, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
2789
+ P: {};
2790
+ B: {};
2791
+ D: {};
2792
+ C: {};
2793
+ M: {};
2794
+ Defaults: {};
2795
+ }, Readonly<ActionOptions> & Readonly<{
2796
+ onTrigger?: (code: string) => any;
2797
+ }>, {}, {}, {}, {}, {}>;
2798
+ __isFragment?: never;
2799
+ __isTeleport?: never;
2800
+ __isSuspense?: never;
2801
+ } & vue.ComponentOptionsBase<Readonly<ActionOptions> & Readonly<{
2802
+ onTrigger?: (code: string) => any;
2803
+ }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
2804
+ trigger: (code: string) => any;
2805
+ }, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
2806
+ $slots: {
2807
+ default?: (props: {}) => any;
2808
+ };
2809
+ });
2746
2810
  Button: {
2747
2811
  new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<ButtonOptions> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
2748
2812
  P: {};
@@ -2999,9 +3063,24 @@ declare const components: {
2999
3063
  });
3000
3064
  Elastic: {
3001
3065
  new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<ElasticOptions> & Readonly<{
3066
+ onLeft?: () => any;
3067
+ onRight?: () => any;
3068
+ onTop?: () => any;
3069
+ onBottom?: () => any;
3070
+ onXbar?: (show: boolean) => any;
3071
+ onYbar?: (show: boolean) => any;
3002
3072
  onRefresh?: (resolve: () => void) => any;
3003
3073
  onMore?: (resolve: () => void) => any;
3004
- }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
3074
+ }>, {
3075
+ loadRefresh(): Promise<void>;
3076
+ loadMore(): Promise<void>;
3077
+ }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
3078
+ left: () => any;
3079
+ right: () => any;
3080
+ top: () => any;
3081
+ bottom: () => any;
3082
+ xbar: (show: boolean) => any;
3083
+ ybar: (show: boolean) => any;
3005
3084
  refresh: (resolve: () => void) => any;
3006
3085
  more: (resolve: () => void) => any;
3007
3086
  }, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
@@ -3012,16 +3091,40 @@ declare const components: {
3012
3091
  M: {};
3013
3092
  Defaults: {};
3014
3093
  }, Readonly<ElasticOptions> & Readonly<{
3094
+ onLeft?: () => any;
3095
+ onRight?: () => any;
3096
+ onTop?: () => any;
3097
+ onBottom?: () => any;
3098
+ onXbar?: (show: boolean) => any;
3099
+ onYbar?: (show: boolean) => any;
3015
3100
  onRefresh?: (resolve: () => void) => any;
3016
3101
  onMore?: (resolve: () => void) => any;
3017
- }>, {}, {}, {}, {}, {}>;
3102
+ }>, {
3103
+ loadRefresh(): Promise<void>;
3104
+ loadMore(): Promise<void>;
3105
+ }, {}, {}, {}, {}>;
3018
3106
  __isFragment?: never;
3019
3107
  __isTeleport?: never;
3020
3108
  __isSuspense?: never;
3021
3109
  } & vue.ComponentOptionsBase<Readonly<ElasticOptions> & Readonly<{
3110
+ onLeft?: () => any;
3111
+ onRight?: () => any;
3112
+ onTop?: () => any;
3113
+ onBottom?: () => any;
3114
+ onXbar?: (show: boolean) => any;
3115
+ onYbar?: (show: boolean) => any;
3022
3116
  onRefresh?: (resolve: () => void) => any;
3023
3117
  onMore?: (resolve: () => void) => any;
3024
- }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
3118
+ }>, {
3119
+ loadRefresh(): Promise<void>;
3120
+ loadMore(): Promise<void>;
3121
+ }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
3122
+ left: () => any;
3123
+ right: () => any;
3124
+ top: () => any;
3125
+ bottom: () => any;
3126
+ xbar: (show: boolean) => any;
3127
+ ybar: (show: boolean) => any;
3025
3128
  refresh: (resolve: () => void) => any;
3026
3129
  more: (resolve: () => void) => any;
3027
3130
  }, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
@@ -3137,8 +3240,9 @@ declare const components: {
3137
3240
  onXbar?: (show: boolean) => any;
3138
3241
  onYbar?: (show: boolean) => any;
3139
3242
  }>, {
3140
- scroll: (left?: number, top?: number) => void;
3141
- scrollTo: (left?: number, top?: number) => void;
3243
+ getStatus(): snail_view.ScrollStatus;
3244
+ scroll(left?: number, top?: number): void;
3245
+ scrollTo(left?: number, top?: number): void;
3142
3246
  }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
3143
3247
  left: () => any;
3144
3248
  right: () => any;
@@ -3161,8 +3265,9 @@ declare const components: {
3161
3265
  onXbar?: (show: boolean) => any;
3162
3266
  onYbar?: (show: boolean) => any;
3163
3267
  }>, {
3164
- scroll: (left?: number, top?: number) => void;
3165
- scrollTo: (left?: number, top?: number) => void;
3268
+ getStatus(): snail_view.ScrollStatus;
3269
+ scroll(left?: number, top?: number): void;
3270
+ scrollTo(left?: number, top?: number): void;
3166
3271
  }, {}, {}, {}, {}>;
3167
3272
  __isFragment?: never;
3168
3273
  __isTeleport?: never;
@@ -3175,8 +3280,9 @@ declare const components: {
3175
3280
  onXbar?: (show: boolean) => any;
3176
3281
  onYbar?: (show: boolean) => any;
3177
3282
  }>, {
3178
- scroll: (left?: number, top?: number) => void;
3179
- scrollTo: (left?: number, top?: number) => void;
3283
+ getStatus(): snail_view.ScrollStatus;
3284
+ scroll(left?: number, top?: number): void;
3285
+ scrollTo(left?: number, top?: number): void;
3180
3286
  }, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
3181
3287
  left: () => any;
3182
3288
  right: () => any;
@@ -3501,4 +3607,4 @@ declare const components: {
3501
3607
  };
3502
3608
 
3503
3609
  export { MOTION, components, getBuiltinIcon, mount, onAppCreated, triggerAppCreated, usePicker, usePopup, useReactive, useTreeContext };
3504
- export type { ButtonOptions, ChangeEvents, ChooseEvents, ChooseItem, ChooseOptions, ClickEvents, CloseEvents, ComponentBindOptions, ComponentOptions, ConfirmAreaOptions, ConfirmOptions, DatePickerDayItem, DatePickerMonthItem, DatePickerOptions, DatePickerYearItem, DatetimeDisabledOptions, DatetimePickerEvents, DeleteEvents, DialogHandle, DialogOptions, DisabledOptions, DragVerifyInfo, DragVerifyOptions, ElasticEvents, ElasticOptions, ElasticScrollStatus, ElasticSpringStatus, EmitterType, EmptyOptions, EventsType, FlexOptions, FoldEvents, FoldOptions, FoldStatus, FollowElectResult, FollowExtend, FollowHandle, FollowOptions, FollowPositionOptions, FollowStrategy, FollowStrategyOptions, FooterEvents, FooterOptions, HeaderEvents, HeaderOptions, INumberFormatter, IPickerManager, IPopupManager, IReactiveManager, ISelectContext, ITreeBaseContext, IconOptions, IconType, InputEvents, InputOptions, LayoutAraeOptions, LayoutAreaItem, LayoutOptions, LoadingOptions, MessageOptions, MotionEffectOptions, MotionOptions, MoveEvents, NumberBaseOptions, NumberEvents, NumberFormatResult, NumberOptions, PickerExtend, PickerPopupOptions, PlaceholderOptions, PopupDescriptor, PopupHandle, PopupOptions, PopupStatus, PopupStatusOptions, PropsType, ReactiveVar, ReadonlyOptions, ScrollEvents, ScrollOptions, ScrollStatus, SearchEvents, SearchOptions, SelectBaseEvents, SelectBaseOptions, SelectEvents, SelectItem, SelectNodeEvents, SelectNodeOptions, SelectOptions, SelectPopupEvents, SelectPopupExtend, SelectPopupOptions, SelectSlotOptions, SlotsType, SortEvent, SortEvents, SortGroupHook, SortGroupOptions, SortOptions, SwitchEvents, SwitchOptions, TableColOptions, TableOptions, TableRowOptions, TextareaEvents, TextareaOptions, TimePickerHourItem, TimePickerMinuteItem, TimePickerOptions, TimePickerSecondItem, TitleOptions, ToastOptions, TreeEvents, TreeNode, TreeNodeEvents, TreeNodeExtend, TreeNodeModel, TreeNodeOptions, TreeNodeRenderOptions, TreeNodeSlotOptions, TreeOptions, TreeSearchResult, ValueOptions, WrapperEvents, WrapperOptions };
3610
+ export type { ActionEvents, ActionItem, ActionItemsOptions, ActionOptions, ButtonOptions, ChangeEvents, ChooseEvents, ChooseItem, ChooseOptions, ClickEvents, CloseEvents, ComponentBindOptions, ComponentOptions, ConfirmAreaOptions, ConfirmOptions, DatePickerDayItem, DatePickerMonthItem, DatePickerOptions, DatePickerYearItem, DatetimeDisabledOptions, DatetimePickerEvents, DeleteEvents, DialogHandle, DialogOptions, DisabledOptions, DragVerifyInfo, DragVerifyOptions, ElasticEvents, ElasticExpose, ElasticOptions, ElasticSpringStatus, EmitterType, EmptyOptions, EventsType, FlexOptions, FoldEvents, FoldOptions, FoldStatus, FollowElectResult, FollowExtend, FollowHandle, FollowOptions, FollowPositionOptions, FollowStrategy, FollowStrategyOptions, FooterEvents, FooterOptions, HeaderEvents, HeaderOptions, INumberFormatter, IPickerManager, IPopupManager, IReactiveManager, ISelectContext, ITreeBaseContext, IconOptions, IconType, InputEvents, InputOptions, LayoutAraeOptions, LayoutAreaItem, LayoutOptions, LoadingOptions, MessageOptions, MotionEffectOptions, MotionOptions, MoveEvents, NumberBaseOptions, NumberEvents, NumberFormatResult, NumberOptions, PickerExtend, PickerPopupOptions, PlaceholderOptions, PopupDescriptor, PopupHandle, PopupOptions, PopupStatus, PopupStatusOptions, PropsType, ReactiveVar, ReadonlyOptions, ScrollEvents, ScrollExpose, ScrollOptions, SearchEvents, SearchOptions, SelectBaseEvents, SelectBaseOptions, SelectEvents, SelectItem, SelectNodeEvents, SelectNodeOptions, SelectOptions, SelectPopupEvents, SelectPopupExtend, SelectPopupOptions, SelectSlotOptions, SlotsType, SortEvent, SortEvents, SortGroupHook, SortGroupOptions, SortOptions, SwitchEvents, SwitchOptions, TableColOptions, TableOptions, TableRowOptions, TextareaEvents, TextareaOptions, TimePickerHourItem, TimePickerMinuteItem, TimePickerOptions, TimePickerSecondItem, TitleOptions, ToastOptions, TreeEvents, TreeNode, TreeNodeEvents, TreeNodeExtend, TreeNodeModel, TreeNodeOptions, TreeNodeRenderOptions, TreeNodeSlotOptions, TreeOptions, TreeSearchResult, ValueOptions, WrapperEvents, WrapperOptions };