snail.vue 1.0.32 → 1.0.33

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.
@@ -1,8 +1,8 @@
1
1
  import * as snail_view from 'snail.view';
2
- import { BaseStyle, WidthStyle, FlexBoxStyle, HeightStyle, BorderStyle, PaddingStyle } from 'snail.view';
2
+ import { BaseStyle, WidthStyle, FlexBoxStyle, HeightStyle, BorderStyle, PaddingStyle, MarginStyle } from 'snail.view';
3
3
  import * as vue from 'vue';
4
4
  import { Component, ShallowRef, Ref, App } from 'vue';
5
- import { IScope, IAsyncScope } from 'snail.core';
5
+ import { IScope, RunResult, IAsyncScope } from 'snail.core';
6
6
 
7
7
  /**
8
8
  * loading提示框的配置选项
@@ -135,6 +135,83 @@ type InputEvents = {
135
135
  change: [value: string];
136
136
  };
137
137
 
138
+ /**
139
+ * 树组件配置选项
140
+ */
141
+ type TreeOptions<T> = {
142
+ /**
143
+ * 树节点
144
+ */
145
+ nodes: TreeNode<T>[];
146
+ /**
147
+ * 树节点的扩展配置
148
+ * - 用于对树节点做进一步控制
149
+ */
150
+ nodeExtend?: TreeNodeExtendOptions;
151
+ };
152
+ /**
153
+ * 树节点
154
+ */
155
+ type TreeNode<T> = {
156
+ /**
157
+ * 树节点 文本
158
+ */
159
+ text: string;
160
+ /**
161
+ * 节点类型
162
+ * - 用于外部构建插槽时做区分使用
163
+ */
164
+ type?: string;
165
+ /**
166
+ * 树节点附加数据
167
+ */
168
+ data?: T;
169
+ /**
170
+ * 是否禁用
171
+ * - true:禁用此节点 禁用时不显示此节点及其子节点
172
+ */
173
+ disabled?: boolean;
174
+ /**
175
+ * 子节点 数据
176
+ */
177
+ children?: TreeNode<T>[];
178
+ };
179
+ /**
180
+ * 树节点 组件配置选项
181
+ */
182
+ type TreeNodeOptions<T> = {
183
+ /**
184
+ * 树节点
185
+ */
186
+ node: TreeNode<T>;
187
+ /**
188
+ * 节点层级
189
+ * - 从1开始
190
+ */
191
+ level: number;
192
+ /**
193
+ * 节点的扩展配置
194
+ * - 用于对树节点做进一步控制
195
+ */
196
+ extend?: TreeNodeExtendOptions;
197
+ };
198
+ /**
199
+ * 树节点扩展配置选项
200
+ */
201
+ type TreeNodeExtendOptions = {
202
+ /**
203
+ * 是否禁用【折叠】子节点操作
204
+ * - true 时禁用 折叠操作
205
+ */
206
+ foldDisabled?: boolean;
207
+ /**
208
+ * 重写树节点
209
+ * - true 时,插槽作为完整树节点对象;
210
+ * - false 时,插槽仅作为扩展元素,如自定义操作等
211
+ */
212
+ rewrite?: boolean;
213
+ };
214
+
138
215
  /**
139
216
  * 滚动视图配置选项
140
217
  */
@@ -300,6 +377,30 @@ type SwitchEvents = {
300
377
  change: [value: boolean];
301
378
  };
302
379
 
380
+ /**
381
+ * 搜索组件配置选项
382
+ */
383
+ type SearchOptions = {
384
+ /**
385
+ * 是否为只读模式
386
+ */
387
+ readonly?: boolean;
388
+ /**
389
+ * 搜索提示语
390
+ */
391
+ placeholder?: string;
392
+ };
393
+ /**
394
+ * 搜索组件事件
395
+ */
396
+ type SearchEvents = {
397
+ /**
398
+ * 事件:执行搜索
399
+ * @param value 为搜索文本
400
+ */
401
+ search: [value: string];
402
+ };
403
+
303
404
  /**
304
405
  * 图标配置选项
305
406
  * - 后续支持外部直接传入svg路径,这样实现更细粒度的控制
@@ -313,6 +414,10 @@ type IconOptions = {
313
414
  * 图标颜色
314
415
  */
315
416
  color?: string;
417
+ /**
418
+ * 鼠标移入时的图标颜色
419
+ */
420
+ hoverColor?: string;
316
421
  /**
317
422
  * 图标大小:默认24
318
423
  */
@@ -321,8 +426,9 @@ type IconOptions = {
321
426
  * 图标绘制路径
322
427
  * - 等效 svg-path的d属性
323
428
  * - 仅在type为 custom 时生效
429
+ * - 若为数组,则表示多条绘制路径
324
430
  */
325
- draw?: string;
431
+ draw?: string | string[];
326
432
  };
327
433
  /**
328
434
  * 图标类型
@@ -330,22 +436,11 @@ type IconOptions = {
330
436
  * - close 关闭 用作数据删除,弹窗关闭
331
437
  * - error 错误
332
438
  * - warn 警告图标
439
+ * - trash 垃圾桶图标,常用于【删除】操作
440
+ * - grip 紧握图标,垂直方向,一般用于拖动句柄
333
441
  * - custom 自定义图标:此时IconOptions.draw属性传入绘制路径
334
442
  */
335
- type IconType = "success" | "close" | "error" | "warn" | "custom";
336
- /**
337
- * 图标路径配置选项
338
- */
339
- type IconPathOptions = {
340
- /**
341
- * 绘制路径
342
- */
343
- d: string;
344
- /**
345
- * 填充颜色
346
- */
347
- fill?: string;
348
- };
443
+ type IconType = "success" | "close" | "error" | "warn" | "trash" | "grip" | "custom";
349
444
 
350
445
  /**
351
446
  * 头部配置选项
@@ -435,6 +530,65 @@ type FooterEvents = {
435
530
  confirm: [];
436
531
  };
437
532
 
533
+ /**
534
+ * 检查选项 数据结构
535
+ */
536
+
537
+ /**
538
+ * 选择 组件配置选项
539
+ */
540
+ type ChooseOptions<T> = {
541
+ /**
542
+ * 是否为多选模式
543
+ * - true 多选模式,可以选中items中多个选项
544
+ * - false 单选模式,只能选中items中的一个选项
545
+ */
546
+ multi?: boolean;
547
+ /**
548
+ * 选项类型
549
+ * - radio: 单选框样式
550
+ * - checkbox: 多选框样式
551
+ */
552
+ type: "checkbox" | "radio";
553
+ /**
554
+ * 是否是只读模式
555
+ */
556
+ readonly?: boolean;
557
+ /**
558
+ * 待选项目
559
+ * text 可不传入
560
+ */
561
+ items: ChooseItem<T>[];
562
+ /**
563
+ * 选项自定义样式
564
+ * - 可指定选项宽度、高度、外边距
565
+ */
566
+ itemStyle?: WidthStyle & HeightStyle & MarginStyle;
567
+ };
568
+ /**
569
+ * 选择项
570
+ */
571
+ type ChooseItem<T> = {
572
+ /**
573
+ * 选项文本
574
+ */
575
+ text?: string;
576
+ /**
577
+ * 选项值
578
+ */
579
+ value: any;
580
+ };
581
+ /**
582
+ * 选择 组件事件
583
+ */
584
+ type ChooseEvents<T> = {
585
+ /**
586
+ * 值改变 事件
587
+ * - values 为当前选中值;单选时为单个值,多选时为值数组
588
+ */
589
+ change: [values: T | T[]];
590
+ };
591
+
438
592
  /**
439
593
  * 按钮配置选项
440
594
  */
@@ -471,7 +625,7 @@ interface IReactiveManager {
471
625
  * @param time 过渡持续时间,到时间后销毁作用域
472
626
  * @returns 作用域对象,可销毁【值过渡】效果
473
627
  */
474
- transition<T>(rv: ShallowRef<T> | Ref<T>, effect: {
628
+ transition<T>(rv: ReactiveVar<T>, effect: {
475
629
  from: T;
476
630
  to: T;
477
631
  }, time: number): IScope;
@@ -486,11 +640,7 @@ interface IReactiveManager {
486
640
  * @param delay 延迟时间,单位ms;不传则不延迟
487
641
  * @returns 任务自身
488
642
  */
489
- load<T, E>(task: Promise<T>, loading: ShallowRef<boolean> | Ref<boolean>, delay: number): Promise<{
490
- success: boolean;
491
- data?: T;
492
- error?: E;
493
- }>;
643
+ load<T>(task: Promise<T>, loading: ReactiveVar<boolean>, delay: number): Promise<RunResult<T>>;
494
644
  }
495
645
  /**
496
646
  * 响应式变量
@@ -526,12 +676,12 @@ declare function triggerAppCreated(app: App): App;
526
676
  */
527
677
 
528
678
  /**
529
- * 基于类型获取Svg图标信息
679
+ * 基于类型获取Svg图标绘制路径
530
680
  * @param type 图标类型
531
681
  * @param color 填充颜色,不传入则使用默认的
532
- * @returns 图标路径信息
682
+ * @returns 图标路径
533
683
  */
534
- declare function getSvgIcon(options: IconOptions): IconPathOptions;
684
+ declare function getSvgDraw(options: IconOptions): string[];
535
685
 
536
686
  /**
537
687
  * 挂载vue组件
@@ -822,6 +972,29 @@ declare const components: {
822
972
  default?: (props: {}) => any;
823
973
  };
824
974
  });
975
+ Choose: vue.DefineComponent<{
976
+ multi?: boolean;
977
+ type: "checkbox" | "radio";
978
+ readonly?: boolean;
979
+ items: ChooseItem<any>[];
980
+ itemStyle?: snail_view.WidthStyle & snail_view.HeightStyle & snail_view.MarginStyle;
981
+ } & {
982
+ modelValue?: any | any[];
983
+ }, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
984
+ change: (values: any) => any;
985
+ "update:modelValue": (value: any) => any;
986
+ }, string, vue.PublicProps, Readonly<{
987
+ multi?: boolean;
988
+ type: "checkbox" | "radio";
989
+ readonly?: boolean;
990
+ items: ChooseItem<any>[];
991
+ itemStyle?: snail_view.WidthStyle & snail_view.HeightStyle & snail_view.MarginStyle;
992
+ } & {
993
+ modelValue?: any | any[];
994
+ }> & Readonly<{
995
+ onChange?: (values: any) => any;
996
+ "onUpdate:modelValue"?: (value: any) => any;
997
+ }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
825
998
  Footer: {
826
999
  new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<FooterOptions> & Readonly<{
827
1000
  onCancel?: () => any;
@@ -882,6 +1055,17 @@ declare const components: {
882
1055
  };
883
1056
  });
884
1057
  Icon: vue.DefineComponent<IconOptions, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<IconOptions> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, false, {}, any>;
1058
+ Search: vue.DefineComponent<SearchOptions & {
1059
+ modelValue?: string;
1060
+ }, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
1061
+ search: (value: string) => any;
1062
+ "update:modelValue": (value: string) => any;
1063
+ }, string, vue.PublicProps, Readonly<SearchOptions & {
1064
+ modelValue?: string;
1065
+ }> & Readonly<{
1066
+ onSearch?: (value: string) => any;
1067
+ "onUpdate:modelValue"?: (value: string) => any;
1068
+ }>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
885
1069
  Switch: vue.DefineComponent<SwitchOptions & {
886
1070
  modelValue?: boolean;
887
1071
  }, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
@@ -1023,6 +1207,32 @@ declare const components: {
1023
1207
  default?: (props: {}) => any;
1024
1208
  };
1025
1209
  });
1210
+ Tree: {
1211
+ new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<{
1212
+ nodes: TreeNode<any>[];
1213
+ nodeExtend?: TreeNodeExtendOptions;
1214
+ }> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
1215
+ P: {};
1216
+ B: {};
1217
+ D: {};
1218
+ C: {};
1219
+ M: {};
1220
+ Defaults: {};
1221
+ }, Readonly<{
1222
+ nodes: TreeNode<any>[];
1223
+ nodeExtend?: TreeNodeExtendOptions;
1224
+ }> & Readonly<{}>, {}, {}, {}, {}, {}>;
1225
+ __isFragment?: never;
1226
+ __isTeleport?: never;
1227
+ __isSuspense?: never;
1228
+ } & vue.ComponentOptionsBase<Readonly<{
1229
+ nodes: TreeNode<any>[];
1230
+ nodeExtend?: TreeNodeExtendOptions;
1231
+ }> & Readonly<{}>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
1232
+ $slots: {
1233
+ default?: (props: any) => any;
1234
+ };
1235
+ });
1026
1236
  Input: vue.DefineComponent<InputOptions & {
1027
1237
  modelValue?: string;
1028
1238
  }, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
@@ -1077,5 +1287,5 @@ declare const components: {
1077
1287
  });
1078
1288
  };
1079
1289
 
1080
- export { components, getSvgIcon, mount, onAppCreated, triggerAppCreated, usePopup, useReactive };
1081
- export type { ButtonOptions, ComponentMountOptions, ComponentOptions, ConfirmOptions, DailogExtend, DialogHandle, DialogOptions, DragVerifyInfo, DragVerifyOptions, EmptyOptions, FoldEvents, FoldOptions, FoldStatus, FooterEvents, FooterOptions, HeaderEvents, HeaderOptions, IPopupManager, IReactiveManager, IconOptions, IconPathOptions, IconType, InputEvents, InputOptions, LoadingOptions, PopupDescriptor, PopupExtend, PopupFlagOptions, PopupHandle, PopupOptions, PopupStatus, ReactiveVar, ScrollEvents, ScrollOptions, ScrollTouchType, SwitchEvents, SwitchOptions, TableColOptions, TableOptions, TableRowOptions, ToastOptions };
1290
+ export { components, getSvgDraw, mount, onAppCreated, triggerAppCreated, usePopup, useReactive };
1291
+ export type { ButtonOptions, ChooseEvents, ChooseItem, ChooseOptions, ComponentMountOptions, ComponentOptions, ConfirmOptions, DailogExtend, DialogHandle, DialogOptions, DragVerifyInfo, DragVerifyOptions, EmptyOptions, FoldEvents, FoldOptions, FoldStatus, FooterEvents, FooterOptions, HeaderEvents, HeaderOptions, IPopupManager, IReactiveManager, IconOptions, IconType, InputEvents, InputOptions, LoadingOptions, PopupDescriptor, PopupExtend, PopupFlagOptions, PopupHandle, PopupOptions, PopupStatus, ReactiveVar, ScrollEvents, ScrollOptions, ScrollTouchType, SearchEvents, SearchOptions, SwitchEvents, SwitchOptions, TableColOptions, TableOptions, TableRowOptions, ToastOptions, TreeNode, TreeNodeExtendOptions, TreeNodeOptions, TreeOptions };