snail.vue 1.0.53 → 2.0.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 +28 -27
- package/dist/snail.vue.d.ts +138 -3
- package/dist/snail.vue.js +211 -52
- package/dist/snail.vue.umd.js +208 -49
- package/dist/styles/snail.vue.vue.css +25 -23
- package/package.json +4 -3
- package/{.code-snippets → vue.code-snippets} +1 -14
- package/dist/styles/app.css +0 -1
package/README.md
CHANGED
|
@@ -10,8 +10,8 @@
|
|
|
10
10
|
|
|
11
11
|
## 2.1. **依赖安装**
|
|
12
12
|
|
|
13
|
-
1. **安装 npm
|
|
14
|
-
2.
|
|
13
|
+
1. **安装 npm 包：**`<span class="ne-text">pnpm add snail.vue</span>`
|
|
14
|
+
2. **注册依赖组件：**`<span class="ne-text">pnpm add vue</span>`
|
|
15
15
|
3. **打包输出**
|
|
16
16
|
|
|
17
17
|
## 2.2. **动态注册**
|
|
@@ -24,17 +24,18 @@
|
|
|
24
24
|
|
|
25
25
|
**详细说明：**[https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8)
|
|
26
26
|
|
|
27
|
-
| **组件**
|
|
28
|
-
|
|
|
29
|
-
| [Button](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#s1zYq)
|
|
30
|
-
| [Choose](https://www.yuque.com/snail-devx/js/mhieowa8ddbdhgu8#gCenb)
|
|
31
|
-
| [
|
|
32
|
-
| [
|
|
33
|
-
| [
|
|
34
|
-
| [
|
|
35
|
-
| [
|
|
36
|
-
| [
|
|
37
|
-
| [
|
|
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 模式；支持插槽** |
|
|
38
39
|
|
|
39
40
|
## 3.2. **container 容器组件**
|
|
40
41
|
|
|
@@ -44,14 +45,14 @@
|
|
|
44
45
|
|
|
45
46
|
| **组件** | **简介** |
|
|
46
47
|
| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
|
|
47
|
-
| [
|
|
48
|
-
| [
|
|
49
|
-
| [
|
|
50
|
-
| [
|
|
51
|
-
| [
|
|
52
|
-
| [
|
|
53
|
-
| [
|
|
54
|
-
| [
|
|
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 中展现，让内容组件关注核心逻辑即可** |
|
|
55
56
|
|
|
56
57
|
## 3.3. **form 表单组件**
|
|
57
58
|
|
|
@@ -61,7 +62,7 @@
|
|
|
61
62
|
|
|
62
63
|
| **组件** | **简介** |
|
|
63
64
|
| ------------------------------------------------------------------- | ----------------------------------------------- |
|
|
64
|
-
| [
|
|
65
|
+
| [Input](https://www.yuque.com/snail-devx/js/wl1q8db0qms764eg#lw7O6) | **输入框组件，对原生 input 做美化，支持标题等** |
|
|
65
66
|
|
|
66
67
|
## 3.4. **popup 弹窗组件**
|
|
67
68
|
|
|
@@ -84,8 +85,8 @@
|
|
|
84
85
|
|
|
85
86
|
**详细说明：**[https://www.yuque.com/snail-devx/js/kp0nznuu61qs8zgw](https://www.yuque.com/snail-devx/js/kp0nznuu61qs8zgw)
|
|
86
87
|
|
|
87
|
-
| **组件**
|
|
88
|
-
|
|
|
89
|
-
| [
|
|
90
|
-
| [
|
|
91
|
-
| [
|
|
88
|
+
| **组件** | **简介** |
|
|
89
|
+
| ------------------------------------------------------------------------ | ------------------------------------------------------ |
|
|
90
|
+
| [DragVerify](https://www.yuque.com/snail-devx/js/kp0nznuu61qs8zgw#YN3YF) | **拖拽验证组件；拖动滑块验证，给出验证提示和结果信息** |
|
|
91
|
+
| [Empty](https://www.yuque.com/snail-devx/js/kp0nznuu61qs8zgw#qZsqi) | **空组件；用于提示无数据、无搜索结果等空状态** |
|
|
92
|
+
| [Loading](https://www.yuque.com/snail-devx/js/kp0nznuu61qs8zgw#IuBmQ) | **加载组件；用于在数据加载过程中进行加载提示** |
|
package/dist/snail.vue.d.ts
CHANGED
|
@@ -1041,6 +1041,130 @@ type IconOptions = TitleOptions & {
|
|
|
1041
1041
|
*/
|
|
1042
1042
|
type IconType = "success" | "error" | "warn" | "close" | "trash" | "download" | "print" | "edit" | "arrow" | "plus" | "subtract" | "grip" | "custom";
|
|
1043
1043
|
|
|
1044
|
+
/**
|
|
1045
|
+
* 日期组件相关数据模型
|
|
1046
|
+
*/
|
|
1047
|
+
/**
|
|
1048
|
+
* 日期选择组件 配置选项
|
|
1049
|
+
* - 参照 zane-calendar 组件的配置选项
|
|
1050
|
+
* @see https://github.com/wangweianger/zane-data-time-calendar/blob/master/README.md#%E5%8F%82%E6%95%B0%E8%AF%B4%E6%98%8E
|
|
1051
|
+
*/
|
|
1052
|
+
type DatepickerOptions = {
|
|
1053
|
+
/**
|
|
1054
|
+
* 日期选择类型
|
|
1055
|
+
* - 默认值：day
|
|
1056
|
+
* - 可选值：
|
|
1057
|
+
* - - day 年月日选择
|
|
1058
|
+
* - - year 年选择
|
|
1059
|
+
* - - month 年月选择
|
|
1060
|
+
* - - time 时分秒选择
|
|
1061
|
+
*/
|
|
1062
|
+
type?: "day" | "year" | "month" | "time";
|
|
1063
|
+
/**
|
|
1064
|
+
* 是否为范围选择
|
|
1065
|
+
* - true 则选择 开始时间 - 结束时间
|
|
1066
|
+
*/
|
|
1067
|
+
range?: boolean;
|
|
1068
|
+
/**
|
|
1069
|
+
* 日期时间格式化
|
|
1070
|
+
* - 默认值：yyyy-MM-dd
|
|
1071
|
+
* - 可选值 通用格式化字符串；如 yyyy-MM-dd HH:mm:ss yyyy年MM月dd日 HH时mm分ss秒 、、、
|
|
1072
|
+
*/
|
|
1073
|
+
format?: string;
|
|
1074
|
+
/**
|
|
1075
|
+
* 开始日期
|
|
1076
|
+
* - 单选择可选项
|
|
1077
|
+
* - 作为初始选中日期，不传入则默认当前
|
|
1078
|
+
*/
|
|
1079
|
+
begin?: string;
|
|
1080
|
+
/**
|
|
1081
|
+
* 结束日期
|
|
1082
|
+
* - range 为true时 选择器可选项
|
|
1083
|
+
* - 作为初始选中日期，不传入则默认当前
|
|
1084
|
+
*/
|
|
1085
|
+
end?: string;
|
|
1086
|
+
/**
|
|
1087
|
+
* 可选取时间最小范围
|
|
1088
|
+
* - 默认值：1900-10-01
|
|
1089
|
+
*/
|
|
1090
|
+
min?: string;
|
|
1091
|
+
/**
|
|
1092
|
+
* 可选取时间最大范围
|
|
1093
|
+
* - 默认值：2099-12-31
|
|
1094
|
+
*/
|
|
1095
|
+
max?: string;
|
|
1096
|
+
/**
|
|
1097
|
+
* 弹窗z-index值
|
|
1098
|
+
* - 默认：10000
|
|
1099
|
+
*/
|
|
1100
|
+
zIndex?: number;
|
|
1101
|
+
/**
|
|
1102
|
+
* 是否禁用【选择时间】
|
|
1103
|
+
* - 为true时，不出【选择时间】按钮
|
|
1104
|
+
*/
|
|
1105
|
+
timeDisabled?: boolean;
|
|
1106
|
+
/**
|
|
1107
|
+
* 是否禁用【选择秒】
|
|
1108
|
+
* - 为true时，选择时间时不支持选择秒单位
|
|
1109
|
+
*/
|
|
1110
|
+
secondDisabled?: boolean;
|
|
1111
|
+
/**
|
|
1112
|
+
* 是否禁止【清空】按钮
|
|
1113
|
+
* - 为true时，不显示【清空【按钮
|
|
1114
|
+
*/
|
|
1115
|
+
cleanDisabled?: boolean;
|
|
1116
|
+
/**
|
|
1117
|
+
* 是否禁用【现在】按钮
|
|
1118
|
+
* - 为true时，不显示【现在】按钮
|
|
1119
|
+
* - 在 type 为 doublexxx 时始终禁止
|
|
1120
|
+
* - 同时指定min和max时，时始终禁止
|
|
1121
|
+
*/
|
|
1122
|
+
nowDisabled?: boolean;
|
|
1123
|
+
/**
|
|
1124
|
+
* 是否禁止【确定】按钮
|
|
1125
|
+
* - 为true时，不显示【确定】按钮
|
|
1126
|
+
*/
|
|
1127
|
+
submitDisabled?: boolean;
|
|
1128
|
+
/**
|
|
1129
|
+
* 插件宽度配置
|
|
1130
|
+
* - 默认值：280
|
|
1131
|
+
* - 220 <= X <= 500
|
|
1132
|
+
*/
|
|
1133
|
+
width?: number;
|
|
1134
|
+
/**
|
|
1135
|
+
* 插件高度配置
|
|
1136
|
+
* - 默认值：300
|
|
1137
|
+
* - 240 <= X <= 350
|
|
1138
|
+
*/
|
|
1139
|
+
height?: number;
|
|
1140
|
+
/**
|
|
1141
|
+
* 插件与输入框的高度
|
|
1142
|
+
* - 默认值：4
|
|
1143
|
+
*/
|
|
1144
|
+
behindTop?: number;
|
|
1145
|
+
};
|
|
1146
|
+
/**
|
|
1147
|
+
* 日期选择器 组件事件
|
|
1148
|
+
*/
|
|
1149
|
+
type DatePickerEvents = {
|
|
1150
|
+
/**
|
|
1151
|
+
* 日期选择器 选择值改变
|
|
1152
|
+
* @param begin 选择的起始日期；undefined表示无值，如清空时
|
|
1153
|
+
* @param end 选择的结束日期；在range范围选择时才有值；undefined表示无值，如清空时
|
|
1154
|
+
*/
|
|
1155
|
+
change: [begin: string | undefined, end: string | undefined];
|
|
1156
|
+
/**
|
|
1157
|
+
* 日期选择器得到焦点
|
|
1158
|
+
* - 鼠标进入选择器
|
|
1159
|
+
*/
|
|
1160
|
+
"picker-focus": [];
|
|
1161
|
+
/**
|
|
1162
|
+
* 日期选择器失去焦点
|
|
1163
|
+
* - 鼠标离开选择器
|
|
1164
|
+
*/
|
|
1165
|
+
"picker-blur": [];
|
|
1166
|
+
};
|
|
1167
|
+
|
|
1044
1168
|
/**
|
|
1045
1169
|
* 检查选项 数据结构
|
|
1046
1170
|
*/
|
|
@@ -1442,9 +1566,9 @@ type InputEvents = {
|
|
|
1442
1566
|
type PopupOptions<Props = void, Model = void> = ComponentOptions & ComponentBindOptions<Props, Model> & {
|
|
1443
1567
|
/**
|
|
1444
1568
|
* 弹窗动画名
|
|
1445
|
-
* - 不传则默认“
|
|
1569
|
+
* - 不传则默认“fade”
|
|
1446
1570
|
* - 动画规则：打开弹窗时，为 [transition]-in ；关闭弹窗时，为[transition]-out
|
|
1447
|
-
* - - 传入 "
|
|
1571
|
+
* - - 传入 "scale"，则打开弹窗为 "scale-in"；关闭弹窗时为 "scale-out"
|
|
1448
1572
|
*/
|
|
1449
1573
|
transition?: string;
|
|
1450
1574
|
/**
|
|
@@ -1854,6 +1978,17 @@ declare const components: {
|
|
|
1854
1978
|
onChange?: (values: any) => any;
|
|
1855
1979
|
"onUpdate:modelValue"?: (value: any) => any;
|
|
1856
1980
|
}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
|
|
1981
|
+
DatePicker: vue.DefineComponent<DatepickerOptions, {
|
|
1982
|
+
showPicker: (delay: number) => void;
|
|
1983
|
+
}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
|
|
1984
|
+
change: (begin: string, end: string) => any;
|
|
1985
|
+
"picker-focus": () => any;
|
|
1986
|
+
"picker-blur": () => any;
|
|
1987
|
+
}, string, vue.PublicProps, Readonly<DatepickerOptions> & Readonly<{
|
|
1988
|
+
onChange?: (begin: string, end: string) => any;
|
|
1989
|
+
"onPicker-focus"?: () => any;
|
|
1990
|
+
"onPicker-blur"?: () => any;
|
|
1991
|
+
}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
1857
1992
|
Footer: {
|
|
1858
1993
|
new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<FooterOptions> & Readonly<{
|
|
1859
1994
|
onCancel?: () => any;
|
|
@@ -2378,4 +2513,4 @@ declare const components: {
|
|
|
2378
2513
|
};
|
|
2379
2514
|
|
|
2380
2515
|
export { components, getSvgDraw, mount, onAppCreated, triggerAppCreated, usePopup, useReactive, useTreeContext };
|
|
2381
|
-
export type { ButtonOptions, ChangeEvents, ChooseEvents, ChooseItem, ChooseOptions, ClickEvents, CloseEvents, ComponentBindOptions, ComponentOptions, ConfirmAreaOptions, ConfirmOptions, DeleteEvents, DialogHandle, DialogOptions, DisabledOptions, DragVerifyInfo, DragVerifyOptions, EmptyOptions, EventsType, FoldEvents, FoldOptions, FoldStatus, FollowElectResult, FollowExtend, FollowHandle, FollowOptions, FollowStrategy, FollowStrategyOptions, FooterEvents, FooterOptions, HeaderEvents, HeaderOptions, IPopupManager, IReactiveManager, ISelectContext, ITreeBaseContext, IconOptions, IconType, InputEvents, InputOptions, LayoutOptions, LoadingOptions, MessageOptions, MoveEvents, 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, SortEvents, SortOptions, SwitchEvents, SwitchOptions, TableColOptions, TableOptions, TableRowOptions, TitleOptions, ToastOptions, TreeEvents, TreeNode, TreeNodeEvents, TreeNodeExtend, TreeNodeModel, TreeNodeOptions, TreeNodeRenderOptions, TreeNodeSlotOptions, TreeOptions, TreeSearchResult, ValueOptions, WrapperEvents, WrapperOptions };
|
|
2516
|
+
export type { ButtonOptions, ChangeEvents, ChooseEvents, ChooseItem, ChooseOptions, ClickEvents, CloseEvents, ComponentBindOptions, ComponentOptions, ConfirmAreaOptions, ConfirmOptions, DatePickerEvents, DatepickerOptions, DeleteEvents, DialogHandle, DialogOptions, DisabledOptions, DragVerifyInfo, DragVerifyOptions, EmptyOptions, EventsType, FoldEvents, FoldOptions, FoldStatus, FollowElectResult, FollowExtend, FollowHandle, FollowOptions, FollowStrategy, FollowStrategyOptions, FooterEvents, FooterOptions, HeaderEvents, HeaderOptions, IPopupManager, IReactiveManager, ISelectContext, ITreeBaseContext, IconOptions, IconType, InputEvents, InputOptions, LayoutOptions, LoadingOptions, MessageOptions, MoveEvents, 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, SortEvents, SortOptions, SwitchEvents, SwitchOptions, TableColOptions, TableOptions, TableRowOptions, TitleOptions, ToastOptions, TreeEvents, TreeNode, TreeNodeEvents, TreeNodeExtend, TreeNodeModel, TreeNodeOptions, TreeNodeRenderOptions, TreeNodeSlotOptions, TreeOptions, TreeSearchResult, ValueOptions, WrapperEvents, WrapperOptions };
|