snail.vue 2.0.5 → 2.0.6

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.
@@ -668,6 +668,159 @@ type TableRowOptions = HeightStyle & {};
668
668
  */
669
669
  type TableColOptions = BaseStyle & FlexBoxStyle & WidthStyle & BorderStyle & PaddingStyle;
670
670
 
671
+ /**
672
+ * 排序组件 配置选项
673
+ * - 整理部分SortableJs中的配置,不分逻辑不开放
674
+ */
675
+ type SortOptions<T> = {
676
+ /**
677
+ * 变化器
678
+ * - 在此元素值发生变化时,重新刷新排序面板
679
+ * - 如在增加元素时,改变此值实现 新元素 可拖拽排序
680
+ */
681
+ changer: T;
682
+ /**
683
+ * 拖动哪个元素
684
+ * - 传入类样式选择器;如 .table-row
685
+ */
686
+ draggable: string;
687
+ /**
688
+ * 哪个元素启动拖拽
689
+ * - 传入类样式选择器;如 .sort-handle
690
+ * - 不传入则默认 draggable
691
+ * - 若自定义,则传入 draggable 下的dom元素作为启动拖拽的句柄
692
+ */
693
+ handle?: string;
694
+ /**
695
+ * 拖动的元素上增加的类样式
696
+ * - 执行拖拽时随着鼠标移动元素,脱离文档流了
697
+ * - 可自定义一些样式实现拖动元素的高度、宽度自定义等
698
+ * - 默认:snail-sort-drag
699
+ */
700
+ dragClass?: string;
701
+ /**
702
+ * 幽灵元素类样式名称
703
+ * - 拖动时在面板上占位的元素
704
+ * - 默认:snail-sort-ghost
705
+ */
706
+ ghostClass?: string;
707
+ /**
708
+ * 过滤器,不需要进行拖动的元素
709
+ * - 传入类样式选择器;如 .sort-handle
710
+ * - 实现特定子元素不触发拖动排序功能
711
+ */
712
+ filter?: string;
713
+ /**
714
+ * 排序组
715
+ * - 组相同时,可跨组拖拽排序
716
+ * - 不传入,则内部生成guid
717
+ * - 为
718
+ */
719
+ group?: string | SortGroupOptions;
720
+ /**
721
+ * 动画时间
722
+ * - 单位ms;默认150ms
723
+ */
724
+ animation?: number;
725
+ /**
726
+ * 禁用排序效果
727
+ * - 为true时,此容器内元素不能拖动,此不构建sortable实例
728
+ */
729
+ disabled?: boolean;
730
+ /**
731
+ * 在当前容器内是否禁用拖拽排序
732
+ * - 为true时,此容器内部不能拖拽,但可拖动到其他同名group内
733
+ * - 初期想用sort,但作Vue组件属性时,bool类型不传值会自动默认false,和初衷不符
734
+ */
735
+ sortDisabled?: boolean;
736
+ };
737
+ /**
738
+ * 排序组件的Group属性配置选项
739
+ */
740
+ type SortGroupOptions = {
741
+ /**
742
+ * 排序组名称;
743
+ * - 不传入时自动生成
744
+ */
745
+ name: string;
746
+ /**
747
+ * 定义从这个列表容器移动出去的设置
748
+ * - true:列表容器内的列表单元可以被移出;
749
+ * - false:列表容器内的列表单元不可以被移出;
750
+ * - "clone":列表单元移出,移动的为该元素的副本;
751
+ * - function:用来进行pull的函数判断,可以进行复杂逻辑,在函数中return false/true来判断是否移出;
752
+ * - - 暂时不支持 function
753
+ */
754
+ pull: true | false | "clone";
755
+ /**
756
+ * 用来定义往这个列表容器放置列表单元的的设置
757
+ * - true:列表容器可以从其他列表容器内放入列表单元;
758
+ * - false:与true相反;
759
+ * - string|string[]:代表的是group配置项里定义的name值。如['foo','bar']
760
+ * - function:用来进行put的函数判断,可以进行复杂逻辑,在函数中return false/true来判断是否放入;
761
+ * - - 暂时不支持 function
762
+ */
763
+ put: true | false | string | string[];
764
+ };
765
+ /**
766
+ * 排序组件 事件
767
+ */
768
+ type SortEvents = {
769
+ /**
770
+ * 开始拖拽
771
+ */
772
+ start: [evt: SortEvent];
773
+ /**
774
+ * 移动到新容器时
775
+ */
776
+ add: [evt: SortEvent];
777
+ /**
778
+ * 从当前容器移除时
779
+ */
780
+ remove: [evt: SortEvent];
781
+ /**
782
+ * 结束拖拽
783
+ */
784
+ end: [evt: SortEvent];
785
+ /**
786
+ * 元素排序顺序变化
787
+ * @param oldIndex 旧位置索引值
788
+ * @param newIndex 新顺序索引值
789
+ */
790
+ update: [oldIndex: number, newIndex: number];
791
+ };
792
+ /**
793
+ * 排序事件对象
794
+ */
795
+ type SortEvent = {
796
+ /**
797
+ * 目标容器
798
+ */
799
+ to: HTMLElement;
800
+ /**
801
+ * 来源容器
802
+ */
803
+ from: HTMLElement;
804
+ /**
805
+ * 被移动的元素
806
+ * - 在`group.pull`配置为 clone 时,此值为原始元素,复制元素放到原来位置了
807
+ */
808
+ item: HTMLElement;
809
+ /**
810
+ * 副本的元素
811
+ * - 在`group.pull`配置为 clone 时
812
+ */
813
+ clone: HTMLElement;
814
+ /**
815
+ * 容器中的原序号
816
+ */
817
+ oldIndex: number | undefined;
818
+ /**
819
+ * 容器中的新序号
820
+ */
821
+ newIndex: number | undefined;
822
+ };
823
+
671
824
  /**
672
825
  * 布局组件 数据结构
673
826
  */
@@ -735,6 +888,20 @@ type ComponentOptions = {
735
888
  */
736
889
  url?: string;
737
890
  };
891
+ /**
892
+ * 提取组件的props类型
893
+ * - 有效的 Props 类型:extends Record<string, any>
894
+ * - 有效类型则返回 Props 自身;否则无效,为undefined
895
+ */
896
+ type PropsType<Props> = Props extends Record<string, any> ? Props : undefined;
897
+ /**
898
+ * 事件发射器类型
899
+ * - 将【组件中组件】转换为vue的 defineEmits 类型
900
+ * - 用于将组件的事件发射器包裹传递到其他组件、class中使用
901
+ */
902
+ type EmitterType<Events extends Record<string, any[]>> = {
903
+ <K extends keyof Events>(event: K, ...payload: Events[K]): any;
904
+ };
738
905
  /**
739
906
  * 提取【组件事件】类型
740
907
  * - 将【组件事件】中的key首字母小写,追加上on前缀;key对应的value为监听函数参数
@@ -743,12 +910,6 @@ type ComponentOptions = {
743
910
  type EventsType<Events> = Events extends Record<string, unknown[]> ? ({
744
911
  [key in keyof Events as `on${Capitalize<string & key>}`]?: (...args: Events[key]) => void;
745
912
  }) : never;
746
- /**
747
- * 提取组件的props类型
748
- * - 有效的 Props 类型:extends Record<string, any>
749
- * - 有效类型则返回 Props 自身;否则无效,为undefined
750
- */
751
- type PropsType<Props> = Props extends Record<string, any> ? Props : undefined;
752
913
  /**
753
914
  * 组件绑定 配置选项
754
915
  * - Props、Events、Model 为可选泛型,分别约束 props、events、model 属性
@@ -1479,73 +1640,6 @@ declare function triggerAppCreated(app: App, type?: AppType): App;
1479
1640
  */
1480
1641
  declare function getSvgDraw(iconType: IconType, draw: string[] | string): string[];
1481
1642
 
1482
- /**
1483
- * 排序组件 配置选项
1484
- * - disabled 禁用排序效果,不能再拖拽元素排序
1485
- * - 整理部分SortableJs中的配置,不分逻辑不开放
1486
- */
1487
- type SortOptions<T> = DisabledOptions & {
1488
- /**
1489
- * 变化器
1490
- * - 在此元素值发生变化时,重新刷新排序面板
1491
- * - 如在增加元素时,改变此值实现 新元素 可拖拽排序
1492
- */
1493
- changer: T;
1494
- /**
1495
- * 拖动哪个元素
1496
- * - 传入类样式选择器;如 .table-row
1497
- */
1498
- draggable: string;
1499
- /**
1500
- * 哪个元素启动拖拽
1501
- * - 传入类样式选择器;如 .sort-handle
1502
- * - 不传入则默认 draggable
1503
- * - 若自定义,则传入 draggable 下的dom元素作为启动拖拽的句柄
1504
- */
1505
- handle?: string;
1506
- /**
1507
- * 拖动的元素上增加的类样式
1508
- * - 执行拖拽时随着鼠标移动元素,脱离文档流了
1509
- * - 可自定义一些样式实现拖动元素的高度、宽度自定义等
1510
- * - 默认:snail-sort-drag
1511
- */
1512
- dragClass?: string;
1513
- /**
1514
- * 幽灵元素类样式名称
1515
- * - 拖动时在面板上占位的元素
1516
- * - 默认:snail-sort-ghost
1517
- */
1518
- ghostClass?: string;
1519
- /**
1520
- * 过滤器,不需要进行拖动的元素
1521
- * - 传入类样式选择器;如 .sort-handle
1522
- * - 实现特定子元素不触发拖动排序功能
1523
- */
1524
- filter?: string;
1525
- /**
1526
- * 排序组
1527
- * - 组相同时,可跨组拖拽排序
1528
- * - 不传入,则内部生成guid
1529
- */
1530
- group?: string;
1531
- /**
1532
- * 动画时间
1533
- * - 单位ms;默认150ms
1534
- */
1535
- animation?: number;
1536
- };
1537
- /**
1538
- * 排序组件 事件
1539
- */
1540
- type SortEvents = {
1541
- /**
1542
- * 元素排序顺序变化
1543
- * @param oldIndex 旧位置索引值
1544
- * @param newIndex 新顺序索引值
1545
- */
1546
- update: [oldIndex: number, newIndex: number];
1547
- };
1548
-
1549
1643
  /**
1550
1644
  * 动态加载组件 组件配置选项
1551
1645
  */
@@ -2262,18 +2356,28 @@ declare const components: {
2262
2356
  };
2263
2357
  });
2264
2358
  Sort: {
2265
- new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<DisabledOptions & {
2359
+ new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<{
2266
2360
  changer: any;
2267
2361
  draggable: string;
2268
2362
  handle?: string;
2269
2363
  dragClass?: string;
2270
2364
  ghostClass?: string;
2271
2365
  filter?: string;
2272
- group?: string;
2366
+ group?: string | SortGroupOptions;
2273
2367
  animation?: number;
2368
+ disabled?: boolean;
2369
+ sortDisabled?: boolean;
2274
2370
  }> & Readonly<{
2371
+ onEnd?: (evt: SortEvent) => any;
2372
+ onAdd?: (evt: SortEvent) => any;
2373
+ onStart?: (evt: SortEvent) => any;
2374
+ onRemove?: (evt: SortEvent) => any;
2275
2375
  onUpdate?: (oldIndex: number, newIndex: number) => any;
2276
2376
  }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
2377
+ end: (evt: SortEvent) => any;
2378
+ add: (evt: SortEvent) => any;
2379
+ start: (evt: SortEvent) => any;
2380
+ remove: (evt: SortEvent) => any;
2277
2381
  update: (oldIndex: number, newIndex: number) => any;
2278
2382
  }, vue.PublicProps, {}, false, {}, {}, vue.GlobalComponents, vue.GlobalDirectives, string, {}, any, vue.ComponentProvideOptions, {
2279
2383
  P: {};
@@ -2282,33 +2386,49 @@ declare const components: {
2282
2386
  C: {};
2283
2387
  M: {};
2284
2388
  Defaults: {};
2285
- }, Readonly<DisabledOptions & {
2389
+ }, Readonly<{
2286
2390
  changer: any;
2287
2391
  draggable: string;
2288
2392
  handle?: string;
2289
2393
  dragClass?: string;
2290
2394
  ghostClass?: string;
2291
2395
  filter?: string;
2292
- group?: string;
2396
+ group?: string | SortGroupOptions;
2293
2397
  animation?: number;
2398
+ disabled?: boolean;
2399
+ sortDisabled?: boolean;
2294
2400
  }> & Readonly<{
2401
+ onEnd?: (evt: SortEvent) => any;
2402
+ onAdd?: (evt: SortEvent) => any;
2403
+ onStart?: (evt: SortEvent) => any;
2404
+ onRemove?: (evt: SortEvent) => any;
2295
2405
  onUpdate?: (oldIndex: number, newIndex: number) => any;
2296
2406
  }>, {}, {}, {}, {}, {}>;
2297
2407
  __isFragment?: never;
2298
2408
  __isTeleport?: never;
2299
2409
  __isSuspense?: never;
2300
- } & vue.ComponentOptionsBase<Readonly<DisabledOptions & {
2410
+ } & vue.ComponentOptionsBase<Readonly<{
2301
2411
  changer: any;
2302
2412
  draggable: string;
2303
2413
  handle?: string;
2304
2414
  dragClass?: string;
2305
2415
  ghostClass?: string;
2306
2416
  filter?: string;
2307
- group?: string;
2417
+ group?: string | SortGroupOptions;
2308
2418
  animation?: number;
2419
+ disabled?: boolean;
2420
+ sortDisabled?: boolean;
2309
2421
  }> & Readonly<{
2422
+ onEnd?: (evt: SortEvent) => any;
2423
+ onAdd?: (evt: SortEvent) => any;
2424
+ onStart?: (evt: SortEvent) => any;
2425
+ onRemove?: (evt: SortEvent) => any;
2310
2426
  onUpdate?: (oldIndex: number, newIndex: number) => any;
2311
2427
  }>, {}, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
2428
+ end: (evt: SortEvent) => any;
2429
+ add: (evt: SortEvent) => any;
2430
+ start: (evt: SortEvent) => any;
2431
+ remove: (evt: SortEvent) => any;
2312
2432
  update: (oldIndex: number, newIndex: number) => any;
2313
2433
  }, string, {}, {}, string, {}, vue.GlobalComponents, vue.GlobalDirectives, string, vue.ComponentProvideOptions> & vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps & (new () => {
2314
2434
  $slots: {
@@ -2524,4 +2644,4 @@ declare const components: {
2524
2644
  };
2525
2645
 
2526
2646
  export { components, getSvgDraw, mount, onAppCreated, triggerAppCreated, usePopup, useReactive, useTreeContext };
2527
- 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 };
2647
+ export type { ButtonOptions, ChangeEvents, ChooseEvents, ChooseItem, ChooseOptions, ClickEvents, CloseEvents, ComponentBindOptions, ComponentOptions, ConfirmAreaOptions, ConfirmOptions, DatePickerEvents, DatepickerOptions, DeleteEvents, DialogHandle, DialogOptions, DisabledOptions, DragVerifyInfo, DragVerifyOptions, EmitterType, 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, SortEvent, SortEvents, SortGroupOptions, SortOptions, SwitchEvents, SwitchOptions, TableColOptions, TableOptions, TableRowOptions, TitleOptions, ToastOptions, TreeEvents, TreeNode, TreeNodeEvents, TreeNodeExtend, TreeNodeModel, TreeNodeOptions, TreeNodeRenderOptions, TreeNodeSlotOptions, TreeOptions, TreeSearchResult, ValueOptions, WrapperEvents, WrapperOptions };
package/dist/snail.vue.js CHANGED
@@ -1,7 +1,7 @@
1
1
  //@ sourceURL=/snail.vue.js
2
2
  import { defineComponent, createElementBlock, openBlock, normalizeClass, renderSlot, createTextVNode, shallowRef, normalizeStyle, createElementVNode, toDisplayString, Fragment, renderList, unref, mergeModels, useModel, computed, createCommentVNode, createBlock, nextTick, onMounted, onUnmounted, useTemplateRef, createVNode, withDirectives, vModelText, createApp, Transition, withCtx, normalizeProps, guardReactiveProps, watch, ref, onErrorCaptured, resolveDynamicComponent, mergeProps, createSlots, withModifiers, isRef, getCurrentInstance, resolveComponent, onBeforeUnmount, getCurrentScope, onScopeDispose } from 'vue';
3
3
  import { throwError, isArrayNotEmpty, isStringNotEmpty, useKey, isArray, useTimer, newId, script, isFunction, getFromArray, mustFunction, useScope, removeFromArray, mustObject, throwIfFalse, isObject, isNumberNotNaN, mountScope, useScopes, isPromise, wait, delay, defer, useAsyncScope, useHook, hasAny, throwIfTrue, onMountScope } from 'snail.core';
4
- import { link, css, useObserver, useAnimation } from 'snail.view';
4
+ import { css, link, useObserver, useAnimation } from 'snail.view';
5
5
 
6
6
  const _hoisted_1$h = ["title"];
7
7
  var _sfc_main$u = defineComponent({
@@ -25,10 +25,6 @@ var _sfc_main$u = defineComponent({
25
25
  }
26
26
  });
27
27
 
28
- var addLink = href => setTimeout(link.register, 0, href);
29
-
30
- addLink("/styles/snail.vue.vue.css");
31
-
32
28
  function getSvgDraw(iconType, draw) {
33
29
  switch (iconType) {
34
30
  case "success":
@@ -210,6 +206,10 @@ var _sfc_main$s = defineComponent({
210
206
  }
211
207
  });
212
208
 
209
+ var addLink = href => setTimeout(link.register, 0, href);
210
+
211
+ addLink("/styles/snail.vue.vue.css");
212
+
213
213
  const _hoisted_1$e = ["id"];
214
214
  var _sfc_main$r = defineComponent({
215
215
  __name: "datepicker",
@@ -2330,9 +2330,6 @@ var _sfc_main$7 = defineComponent({
2330
2330
  },
2331
2331
  __name: "sort",
2332
2332
  props: {
2333
- disabled: {
2334
- type: Boolean
2335
- },
2336
2333
  changer: {},
2337
2334
  draggable: {},
2338
2335
  handle: {},
@@ -2340,9 +2337,15 @@ var _sfc_main$7 = defineComponent({
2340
2337
  ghostClass: {},
2341
2338
  filter: {},
2342
2339
  group: {},
2343
- animation: {}
2340
+ animation: {},
2341
+ disabled: {
2342
+ type: Boolean
2343
+ },
2344
+ sortDisabled: {
2345
+ type: Boolean
2346
+ }
2344
2347
  },
2345
- emits: ["update"],
2348
+ emits: ["start", "add", "remove", "end", "update"],
2346
2349
  setup(__props, _ref) {
2347
2350
  let {
2348
2351
  emit: __emit
@@ -2366,8 +2369,16 @@ var _sfc_main$7 = defineComponent({
2366
2369
  }
2367
2370
  if (props.disabled != true && MODULE_Sortable != void 0) {
2368
2371
  sortPanel.classList.add("sortable");
2372
+ const group = {
2373
+ name: void 0,
2374
+ pull: true,
2375
+ put: true
2376
+ };
2377
+ isStringNotEmpty(props.group) ? group.name = props.group : isObject(props.group) && Object.assign(group, props.group);
2378
+ group.name || (group.name = newId());
2369
2379
  sortInstance = new MODULE_Sortable(sortPanel, {
2370
- group: props.group || newId(),
2380
+ group,
2381
+ sort: props.sortDisabled != true,
2371
2382
  draggable: props.draggable,
2372
2383
  dragClass: props.dragClass || "snail-sort-drag",
2373
2384
  ghostClass: props.ghostClass || "snail-sort-ghost",
@@ -2377,9 +2388,11 @@ var _sfc_main$7 = defineComponent({
2377
2388
  animation: props.animation > 0 ? props.animation : 150,
2378
2389
  forceFallback: true,
2379
2390
  fallbackTolerance: 2,
2380
- onUpdate(evt) {
2381
- emits("update", evt.oldIndex, evt.newIndex);
2382
- }
2391
+ onStart: evt => emits("start", evt),
2392
+ onAdd: evt => emits("add", evt),
2393
+ onRemove: evt => emits("remove", evt),
2394
+ onEnd: evt => emits("add", evt),
2395
+ onUpdate: evt => emits("update", evt.oldIndex, evt.newIndex)
2383
2396
  });
2384
2397
  }
2385
2398
  }
@@ -27,10 +27,6 @@
27
27
  }
28
28
  });
29
29
 
30
- var addLink = href => setTimeout(snail_view.link.register, 0, href);
31
-
32
- addLink("/styles/snail.vue.vue.css");
33
-
34
30
  function getSvgDraw(iconType, draw) {
35
31
  switch (iconType) {
36
32
  case "success":
@@ -212,6 +208,10 @@
212
208
  }
213
209
  });
214
210
 
211
+ var addLink = href => setTimeout(snail_view.link.register, 0, href);
212
+
213
+ addLink("/styles/snail.vue.vue.css");
214
+
215
215
  const _hoisted_1$e = ["id"];
216
216
  var _sfc_main$r = vue.defineComponent({
217
217
  __name: "datepicker",
@@ -2332,9 +2332,6 @@
2332
2332
  },
2333
2333
  __name: "sort",
2334
2334
  props: {
2335
- disabled: {
2336
- type: Boolean
2337
- },
2338
2335
  changer: {},
2339
2336
  draggable: {},
2340
2337
  handle: {},
@@ -2342,9 +2339,15 @@
2342
2339
  ghostClass: {},
2343
2340
  filter: {},
2344
2341
  group: {},
2345
- animation: {}
2342
+ animation: {},
2343
+ disabled: {
2344
+ type: Boolean
2345
+ },
2346
+ sortDisabled: {
2347
+ type: Boolean
2348
+ }
2346
2349
  },
2347
- emits: ["update"],
2350
+ emits: ["start", "add", "remove", "end", "update"],
2348
2351
  setup(__props, _ref) {
2349
2352
  let {
2350
2353
  emit: __emit
@@ -2368,8 +2371,16 @@
2368
2371
  }
2369
2372
  if (props.disabled != true && MODULE_Sortable != void 0) {
2370
2373
  sortPanel.classList.add("sortable");
2374
+ const group = {
2375
+ name: void 0,
2376
+ pull: true,
2377
+ put: true
2378
+ };
2379
+ snail_core.isStringNotEmpty(props.group) ? group.name = props.group : snail_core.isObject(props.group) && Object.assign(group, props.group);
2380
+ group.name || (group.name = snail_core.newId());
2371
2381
  sortInstance = new MODULE_Sortable(sortPanel, {
2372
- group: props.group || snail_core.newId(),
2382
+ group,
2383
+ sort: props.sortDisabled != true,
2373
2384
  draggable: props.draggable,
2374
2385
  dragClass: props.dragClass || "snail-sort-drag",
2375
2386
  ghostClass: props.ghostClass || "snail-sort-ghost",
@@ -2379,9 +2390,11 @@
2379
2390
  animation: props.animation > 0 ? props.animation : 150,
2380
2391
  forceFallback: true,
2381
2392
  fallbackTolerance: 2,
2382
- onUpdate(evt) {
2383
- emits("update", evt.oldIndex, evt.newIndex);
2384
- }
2393
+ onStart: evt => emits("start", evt),
2394
+ onAdd: evt => emits("add", evt),
2395
+ onRemove: evt => emits("remove", evt),
2396
+ onEnd: evt => emits("add", evt),
2397
+ onUpdate: evt => emits("update", evt.oldIndex, evt.newIndex)
2385
2398
  });
2386
2399
  }
2387
2400
  }
@@ -1,11 +1,11 @@
1
- /* src:base\button.vue index:0 */
2
- .snail-button{align-items:center;border-radius:2px;cursor:pointer;display:flex;display:inline-flex;justify-content:center;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.snail-button.max{height:40px;width:120px}.snail-button.middle{height:32px;width:90px}.snail-button.normal{height:28px;width:54px}.snail-button.small{height:20px;width:30px}.snail-button.primary{background-color:#5ca3ff;color:#fff}.snail-button.default{background-color:#fff;border:1px solid #dddfed;color:#2e2f33}.snail-button.link{color:#4c9aff}
3
1
  /* src:base\choose.vue index:0 */
4
2
  .snail-choose>div.choose-item{align-items:center;display:flex;flex-shrink:0;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-choose>div.choose-item:not(.readonly){cursor:pointer}.snail-choose>div.choose-item>input::checkmark{background-color:#2196f3;border-color:#2196f3}.snail-choose>div.choose-item>span{margin-left:4px}.snail-choose>div.choose-item>span.item-des{color:#8a9099}.snail-choose>div.choose-item:after{content:"";height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%}.snail-choose.horizontal{align-items:center;display:flex;flex-wrap:wrap;overflow-x:hidden}.snail-choose.horizontal>div.choose-item{margin:0 8px}.snail-choose.horizontal>div.choose-item:first-child{margin-left:0}.snail-choose.vertical{display:flex;flex-direction:column;justify-content:center}.snail-choose.beautiful>.choose-item>.status{align-items:center;display:flex;flex-shrink:0;justify-content:center;overflow:hidden}.snail-choose.beautiful>.choose-item>.status.selected{background-color:#4c9aff;border:1px solid #4c9aff}.snail-choose.beautiful>.choose-item>.status:not(.selected){border:1px solid #8a9099}.snail-choose.beautiful.radio>.choose-item>.status{border-radius:50%;height:16px;width:16px}.snail-choose.beautiful.checkbox>.choose-item>.status{height:14px;width:14px}.snail-choose.beautiful.readonly>.choose-item>.status.selected{background-color:#d5d7db;border-color:#d5d7db}.snail-choose.beautiful.readonly>.choose-item>.status:not(.selected){opacity:.5}
5
- /* src:base\datepicker.vue index:0 */
6
- .snail-datepicker{height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;width:100%}
3
+ /* src:base\button.vue index:0 */
4
+ .snail-button{align-items:center;border-radius:2px;cursor:pointer;display:flex;display:inline-flex;justify-content:center;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.snail-button.max{height:40px;width:120px}.snail-button.middle{height:32px;width:90px}.snail-button.normal{height:28px;width:54px}.snail-button.small{height:20px;width:30px}.snail-button.primary{background-color:#5ca3ff;color:#fff}.snail-button.default{background-color:#fff;border:1px solid #dddfed;color:#2e2f33}.snail-button.link{color:#4c9aff}
7
5
  /* src:base\footer.vue index:0 */
8
6
  .snail-footer{align-items:center;background-color:#fff;display:flex;flex-shrink:0;height:72px;padding:0 40px;width:100%}.snail-footer>.snail-button:nth-child(n+2){margin-left:20px}.snail-footer.start-divider{border-top:1px solid #dddfed}.snail-footer.left{justify-content:flex-start}.snail-footer.center{justify-content:center}.snail-footer.right{justify-content:flex-end}
7
+ /* src:base\datepicker.vue index:0 */
8
+ .snail-datepicker{height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;width:100%}
9
9
  /* src:base\icon.vue index:0 */
10
10
  .snail-icon{cursor:pointer;opacity:1}
11
11
  /* src:base\header.vue index:0 */
@@ -20,20 +20,20 @@
20
20
  .snail-switch{border-radius:10px 10px 10px 10px;cursor:pointer;height:20px!important;overflow:hidden;position:relative;width:36px!important}.snail-switch>div{height:100%;width:100%}.snail-switch>div.on{background-color:#5ca3ff}.snail-switch>div.off{background-color:#c4c8cc;position:absolute;transition:left .2s ease}.snail-switch>div.status{background:#fff;border-radius:10px 10px 10px 10px;height:16px;position:absolute;top:2px;transition:left .2s ease;width:16px}.snail-switch.on>div.off{left:100%;top:0}.snail-switch.on>div.status{left:calc(100% - 18px)}.snail-switch.off>div.off{left:0;top:0}.snail-switch.off>div.status{left:2px}.snail-switch.readonly{cursor:not-allowed}
21
21
  /* src:container\dynamic.vue index:0 */
22
22
  .snail-dynamic-error{color:red}.snail-dynamic-error>span{color:gray}
23
- /* src:container\fold.vue index:0 */
24
- .snail-fold{flex-shrink:0}.snail-fold>div.fold-header{align-items:center;display:flex;height:32px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-fold>div.fold-header:before{background-color:#2c97fb;content:"";height:18px;left:0;position:absolute;top:7px;width:4px}.snail-fold>div.fold-header>.title{color:#2e3033;font-weight:bold;padding-left:20px}.snail-fold>div.fold-header>.subtitle{color:#8a9099;font-size:13px}.snail-fold>div.fold-header>div.status{align-items:flex-end;display:flex;flex:1;justify-content:flex-end}.snail-fold>div.fold-header>div.status>svg.snail-icon{transition:transform .2s ease}.snail-fold>div.fold-body{padding-left:20px}.snail-fold.expand>div.fold-header>div.status>svg.snail-icon{transform:rotate(-90deg)}.snail-fold.fold>div.fold-header>div.status>svg.snail-icon{transform:rotate(90deg)}
25
23
  /* src:container\layout.vue index:0 */
26
24
  .snail-layout{display:flex;height:100%;overflow:hidden;width:100%}.snail-layout>.layout-end,.snail-layout>.layout-start{flex-shrink:0}.snail-layout>.layout-body{flex:1}.snail-layout.horizontal{flex-direction:row}.snail-layout.horizontal>div{height:100%}.snail-layout.horizontal>.layout-end,.snail-layout.horizontal>.layout-start{width:-moz-fit-content;width:fit-content}.snail-layout.vertical{flex-direction:column}.snail-layout.vertical>div{width:100%}.snail-layout.vertical>.layout-end,.snail-layout.vertical>.layout-start{height:-moz-fit-content;height:fit-content}
25
+ /* src:container\fold.vue index:0 */
26
+ .snail-fold{flex-shrink:0}.snail-fold>div.fold-header{align-items:center;display:flex;height:32px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-fold>div.fold-header:before{background-color:#2c97fb;content:"";height:18px;left:0;position:absolute;top:7px;width:4px}.snail-fold>div.fold-header>.title{color:#2e3033;font-weight:bold;padding-left:20px}.snail-fold>div.fold-header>.subtitle{color:#8a9099;font-size:13px}.snail-fold>div.fold-header>div.status{align-items:flex-end;display:flex;flex:1;justify-content:flex-end}.snail-fold>div.fold-header>div.status>svg.snail-icon{transition:transform .2s ease}.snail-fold>div.fold-body{padding-left:20px}.snail-fold.expand>div.fold-header>div.status>svg.snail-icon{transform:rotate(-90deg)}.snail-fold.fold>div.fold-header>div.status>svg.snail-icon{transform:rotate(90deg)}
27
27
  /* src:container\scroll.vue index:0 */
28
28
  .snail-scroll{overflow:hidden}.snail-scroll.scroll-x{overflow-x:auto}.snail-scroll.scroll-y{overflow-y:auto}
29
29
  /* src:container\sort.vue index:0 */
30
30
  .snail-sort-drag{background:#fff;border:1px solid #4c9aff;border-radius:4px;cursor:move}.snail-sort-ghost{border:1px dashed #4c9aff;border-radius:4px}
31
31
  /* src:container\table.vue index:0 */
32
32
  .snail-table{display:flex;flex-direction:column}.snail-table>div.table-footer,.snail-table>div.table-header{align-items:center;display:flex;flex-shrink:0;width:100%}.snail-table>div.table-header{background-color:#fff;position:sticky!important;top:0;z-index:1}.snail-table>div.table-body{flex:1;width:100%}.snail-table.start-border>div.table-body>.table-row>.table-col:nth-child(n+2),.snail-table.start-border>div.table-footer>.table-col:nth-child(n+2),.snail-table.start-border>div.table-header>.table-col:nth-child(n+2){border-left:none!important}.snail-table.start-border>div.table-body>.table-row>.table-col,.snail-table.start-border>div.table-footer>.table-col{border-top:none!important}
33
- /* src:container\components\table-row.vue index:0 */
34
- .table-row{align-items:center;display:flex}
35
33
  /* src:container\components\table-col.vue index:0 */
36
34
  .table-col{align-items:center;display:flex;height:100%;white-space:nowrap}.table-col.left{justify-content:flex-start}.table-col.center{justify-content:center}.table-col.right{justify-content:flex-end}
35
+ /* src:container\components\table-row.vue index:0 */
36
+ .table-row{align-items:center;display:flex}
37
37
  /* src:container\tree.vue index:0 */
38
38
  .snail-tree{background-color:#fff;display:flex;flex-direction:column}.snail-tree .snail-search{flex-shrink:0;margin:12px}.snail-tree .snail-scroll{flex:1}
39
39
  /* src:container\wrapper.vue index:0 */
@@ -44,16 +44,16 @@
44
44
  .snail-empty{align-items:center;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:150px;width:100%}.snail-empty>img{height:60px;width:60px}.snail-empty>div.message{color:#babdc2;font-weight:400;padding:0 10px 10px}
45
45
  /* src:prompt\loading.vue index:0 */
46
46
  .snail-loading{height:100%;left:0;position:absolute;top:0;width:100%;z-index:10000}.snail-loading.show-mask{background-color:rgba(0,0,0,.15)}.snail-loading:after,.snail-loading:before{animation:snail-loading-stretch 1s ease-in-out infinite;border-radius:50%;content:"";display:block;display:inline-block;height:10px;left:50%;margin-left:-18px;margin-top:-6px;position:absolute;top:50%;width:10px}.snail-loading:before{background-color:#279bf1}.snail-loading:after{animation-delay:-.5s;background:#64d214;margin-left:0;margin-right:-18px}@keyframes snail-loading-stretch{0%,to{transform:scale(1)}50%{transform:scale(2)}}.snail-loading-enter-active,.snail-loading-leave-active{transition:opacity .3s ease-in-out}.snail-loading-enter-from,.snail-loading-leave-to{opacity:0}
47
- /* src:popup\components\confirm-container.vue index:0 */
48
- .snail-confirm{background-color:#fff;border-radius:4px;color:#2e2f33;max-height:350px;max-width:548px;min-width:348px}.snail-confirm>div.confirm-body{flex:1;margin:20px 40px;overflow:auto;word-wrap:break-word}
49
47
  /* src:popup\components\dialog-container.vue index:0 */
50
48
  .snail-dialog{align-items:center;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%}.snail-dialog:before{background-color:rgba(24,27,33,.45);content:"";height:100%;opacity:1;position:absolute;transition:opacity .4s ease-in-out;width:100%}.snail-dialog>.dialog-body{background-color:#fff;border-radius:4px;box-shadow:0 0 15px rgba(0,0,0,.3);position:relative}.snail-dialog.unactive:before{opacity:0}.snail-dialog.unactive>.dialog-body{box-shadow:0 0 4px rgba(0,0,0,.3)}
49
+ /* src:popup\components\confirm-container.vue index:0 */
50
+ .snail-confirm{background-color:#fff;border-radius:4px;color:#2e2f33;max-height:350px;max-width:548px;min-width:348px}.snail-confirm>div.confirm-body{flex:1;margin:20px 40px;overflow:auto;word-wrap:break-word}
51
+ /* src:popup\components\popup-container.vue index:0 */
52
+ .snail-popup{left:0;position:fixed;top:0}
51
53
  /* src:popup\components\follow-container.vue index:0 */
52
54
  .snail-follow{background-color:#fff;display:inline-block;max-height:100%;max-width:100%;position:fixed;transition-duration:.1s;transition-property:left,top;transition-timing-function:ease}.snail-follow.initial{top:100%;transition:none}
53
55
  /* src:popup\components\toast-container.vue index:0 */
54
56
  .snail-toast{background:rgba(0,0,0,.7);border-radius:10px;color:#fff;display:flex;left:50%;max-height:200px;max-width:400px;min-width:200px;overflow:hidden;padding:20px 35px 20px 15px;position:fixed;top:50%;transform:translate(-50%,-50%)}.snail-toast>svg.close-icon{position:absolute;right:10px;top:12px}.snail-toast>div.icon{align-items:center;align-self:center;background:hsla(0,0%,100%,.15);border-radius:50%;display:flex;height:26px;justify-content:center;margin-right:6px;width:26px}.snail-toast>div.icon>svg{background:#fff;border-radius:50%;cursor:none!important;padding:2px}.snail-toast>div.message{flex:1;line-height:24px;overflow:hidden;word-break:break-all}
55
- /* src:popup\components\popup-container.vue index:0 */
56
- .snail-popup{left:0;position:fixed;top:0}
57
57
  /* src:container\components\tree-node.vue index:0 */
58
58
  .snail-tree-node{align-items:center;display:flex;flex-wrap:nowrap;height:40px;width:100%}.snail-tree-node:hover{background-color:#f8f9fa}.snail-tree-node>.indent,.snail-tree-node>.node-slot,.snail-tree-node>.snail-icon{flex-shrink:0}.snail-tree-node>.node-fold{align-items:center;display:flex;height:100%;justify-content:center;width:24px}.snail-tree-node>.node-fold>.snail-icon{transition:transform .1s ease-in}.snail-tree-node>.node-fold>.snail-icon.fold{transform:rotate(-90deg)}.snail-tree-node>.node-text{color:#2e3033;flex:1;min-width:30px}.snail-tree-node.clickable{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-tree-children{width:100%}.snail-tree-children.hidden{display:none;height:0;overflow:hidden}.snail-tree-node.level-1>.indent{padding-left:4px}.snail-tree-node.level-2>.indent{padding-left:24px}.snail-tree-node.level-3>.indent{padding-left:48px}.snail-tree-node.level-4>.indent{padding-left:72px}.snail-tree-node.level-5>.indent{padding-left:96px}.snail-tree-node.level-6>.indent{padding-left:120px}.snail-tree-node.level-7>.indent{padding-left:144px}.snail-tree-node.level-8>.indent{padding-left:168px}.snail-tree-node.level-9>.indent{padding-left:192px}.snail-tree-node.level-10>.indent{padding-left:216px}
59
59
  /* src:base\components\select-popup.vue index:0 */
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "description": "依赖【snail】,基于vue封装常用UI组件",
4
4
  "author": "snail_dev@163.com",
5
5
  "license": "MIT",
6
- "version": "2.0.5",
6
+ "version": "2.0.6",
7
7
  "type": "module",
8
8
  "main": "dist/snail.vue.js",
9
9
  "module": "dist/snail.vue.js",