snail.vue 1.0.43 → 1.0.45
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/dist/snail.vue.d.ts +34 -20
- package/dist/snail.vue.js +28 -16
- package/dist/snail.vue.umd.js +28 -16
- package/dist/styles/snail.vue.vue.css +20 -20
- package/package.json +3 -3
package/dist/snail.vue.d.ts
CHANGED
|
@@ -823,16 +823,21 @@ type IconOptions = TitleOptions & {
|
|
|
823
823
|
};
|
|
824
824
|
/**
|
|
825
825
|
* 图标类型
|
|
826
|
-
* -
|
|
827
|
-
* -
|
|
828
|
-
* - error
|
|
829
|
-
* - warn
|
|
830
|
-
* -
|
|
831
|
-
* -
|
|
832
|
-
* -
|
|
833
|
-
* -
|
|
834
|
-
|
|
835
|
-
|
|
826
|
+
* - 状态类:
|
|
827
|
+
* - - success 成功图标,对勾
|
|
828
|
+
* - - error 错误
|
|
829
|
+
* - - warn 警告图标
|
|
830
|
+
* - 操作类:
|
|
831
|
+
* - - close 关闭 用作数据删除,弹窗关闭
|
|
832
|
+
* - - trash 垃圾桶图标,常用于【删除】操作
|
|
833
|
+
* - - download 下载
|
|
834
|
+
* - 指向类:
|
|
835
|
+
* - - arrow 向右箭头
|
|
836
|
+
* - 其他类:
|
|
837
|
+
* - - grip 紧握图标,垂直方向,一般用于拖动句柄
|
|
838
|
+
* - - custom 自定义图标:此时IconOptions.draw属性传入绘制路径
|
|
839
|
+
*/
|
|
840
|
+
type IconType = "success" | "error" | "warn" | "close" | "trash" | "download" | "arrow" | "grip" | "custom";
|
|
836
841
|
|
|
837
842
|
/**
|
|
838
843
|
* 头部配置选项
|
|
@@ -1107,13 +1112,6 @@ type SortOptions<T> = DisabledOptions & {
|
|
|
1107
1112
|
* - 传入类样式选择器;如 .table-row
|
|
1108
1113
|
*/
|
|
1109
1114
|
draggable: string;
|
|
1110
|
-
/**
|
|
1111
|
-
* 哪个元素启动拖拽
|
|
1112
|
-
* - 传入类样式选择器;如 .sort-handle
|
|
1113
|
-
* - 不传入则默认 draggable
|
|
1114
|
-
* - 若自定义,则传入 draggable 下的dom元素作为启动拖拽的句柄
|
|
1115
|
-
*/
|
|
1116
|
-
handle?: string;
|
|
1117
1115
|
/**
|
|
1118
1116
|
* 拖动的元素上增加的类样式
|
|
1119
1117
|
* - 执行拖拽时随着鼠标移动元素,脱离文档流了
|
|
@@ -1127,6 +1125,19 @@ type SortOptions<T> = DisabledOptions & {
|
|
|
1127
1125
|
* - 默认:snail-sort-ghost
|
|
1128
1126
|
*/
|
|
1129
1127
|
ghostClass?: string;
|
|
1128
|
+
/**
|
|
1129
|
+
* 哪个元素启动拖拽
|
|
1130
|
+
* - 传入类样式选择器;如 .sort-handle
|
|
1131
|
+
* - 不传入则默认 draggable
|
|
1132
|
+
* - 若自定义,则传入 draggable 下的dom元素作为启动拖拽的句柄
|
|
1133
|
+
*/
|
|
1134
|
+
handle?: string;
|
|
1135
|
+
/**
|
|
1136
|
+
* 过滤器,不需要进行拖动的元素
|
|
1137
|
+
* - 传入类样式选择器;如 .sort-handle
|
|
1138
|
+
* - 实现特定子元素不触发拖动排序功能
|
|
1139
|
+
*/
|
|
1140
|
+
filter?: string;
|
|
1130
1141
|
/**
|
|
1131
1142
|
* 排序组
|
|
1132
1143
|
* - 组相同时,可跨组拖拽排序
|
|
@@ -1876,9 +1887,10 @@ declare const components: {
|
|
|
1876
1887
|
new (...args: any[]): vue.CreateComponentPublicInstanceWithMixins<Readonly<DisabledOptions & {
|
|
1877
1888
|
changer: any;
|
|
1878
1889
|
draggable: string;
|
|
1879
|
-
handle?: string;
|
|
1880
1890
|
dragClass?: string;
|
|
1881
1891
|
ghostClass?: string;
|
|
1892
|
+
handle?: string;
|
|
1893
|
+
filter?: string;
|
|
1882
1894
|
group?: string;
|
|
1883
1895
|
animation?: number;
|
|
1884
1896
|
}> & Readonly<{
|
|
@@ -1895,9 +1907,10 @@ declare const components: {
|
|
|
1895
1907
|
}, Readonly<DisabledOptions & {
|
|
1896
1908
|
changer: any;
|
|
1897
1909
|
draggable: string;
|
|
1898
|
-
handle?: string;
|
|
1899
1910
|
dragClass?: string;
|
|
1900
1911
|
ghostClass?: string;
|
|
1912
|
+
handle?: string;
|
|
1913
|
+
filter?: string;
|
|
1901
1914
|
group?: string;
|
|
1902
1915
|
animation?: number;
|
|
1903
1916
|
}> & Readonly<{
|
|
@@ -1909,9 +1922,10 @@ declare const components: {
|
|
|
1909
1922
|
} & vue.ComponentOptionsBase<Readonly<DisabledOptions & {
|
|
1910
1923
|
changer: any;
|
|
1911
1924
|
draggable: string;
|
|
1912
|
-
handle?: string;
|
|
1913
1925
|
dragClass?: string;
|
|
1914
1926
|
ghostClass?: string;
|
|
1927
|
+
handle?: string;
|
|
1928
|
+
filter?: string;
|
|
1915
1929
|
group?: string;
|
|
1916
1930
|
animation?: number;
|
|
1917
1931
|
}> & Readonly<{
|
package/dist/snail.vue.js
CHANGED
|
@@ -153,15 +153,18 @@ function getSvgDraw(options) {
|
|
|
153
153
|
switch (options.type) {
|
|
154
154
|
case "success":
|
|
155
155
|
return ["M 102.272 613.285 a 48.9258 48.9258 0 0 1 -1.34967 -62.8444 l 26.0656 -31.2113 a 50.6129 50.6129 0 0 1 62.6756 -11.2192 l 199.583 121.218 c 19.4859 11.8097 49.0102 8.26677 65.9655 -8.01371 l 540.714 -519.625 a 40.3216 40.3216 0 0 1 57.9518 1.6871 l 37.9597 43.3583 a 47.5762 47.5762 0 0 1 -0.843545 62.4226 L 452.766 920.675 a 38.4658 38.4658 0 0 1 -56.8553 1.18097 L 102.272 613.285 Z"];
|
|
156
|
-
case "close":
|
|
157
156
|
case "error":
|
|
158
157
|
return ["M 571.733 512 l 187.733 -187.733 c 17.0667 -17.0667 17.0667 -42.6667 0 -59.7333 c -17.0667 -17.0667 -42.6667 -17.0667 -59.7333 0 L 512 452.267 L 324.267 268.8 c -17.0667 -17.0667 -42.6667 -17.0667 -59.7333 0 c -17.0667 17.0667 -17.0667 42.6667 0 59.7333 l 187.733 187.733 l -187.733 187.733 c -17.0667 17.0667 -17.0667 42.6667 0 59.7333 c 17.0667 17.0667 42.6667 17.0667 59.7333 0 l 187.733 -187.733 l 187.733 187.733 c 17.0667 17.0667 42.6667 17.0667 59.7333 0 c 17.0667 -17.0667 17.0667 -42.6667 0 -59.7333 L 571.733 512 Z"];
|
|
159
158
|
case "warn":
|
|
160
159
|
return ["M 891.733 750.933 l -341.333 -558.933 c -17.0667 -25.6 -59.7333 -25.6 -72.5333 0 l -341.333 558.933 c -8.53333 12.8 -8.53333 29.8667 0 42.6667 c 4.26667 8.53333 17.0667 17.0667 34.1333 17.0667 h 682.667 c 17.0667 0 29.8667 -8.53333 38.4 -21.3333 c 4.26667 -12.8 4.26667 -25.6 0 -38.4 Z m -341.333 -46.9333 c -8.53333 17.0667 -34.1333 25.6 -55.4667 17.0667 s -29.8667 -34.1333 -17.0667 -51.2 c 8.53333 -17.0667 34.1333 -25.6 55.4667 -17.0667 c 17.0667 8.53333 25.6 34.1333 17.0667 51.2 Z m 4.26667 -132.267 c 0 21.3333 -17.0667 38.4 -42.6667 38.4 s -42.6667 -17.0667 -42.6667 -38.4 V 379.733 c 0 -21.3333 17.0667 -38.4 42.6667 -38.4 s 42.6667 17.0667 42.6667 38.4 v 192 Z"];
|
|
161
|
-
case "
|
|
162
|
-
return ["
|
|
160
|
+
case "close":
|
|
161
|
+
return ["M 571.733 512 l 187.733 -187.733 c 17.0667 -17.0667 17.0667 -42.6667 0 -59.7333 c -17.0667 -17.0667 -42.6667 -17.0667 -59.7333 0 L 512 452.267 L 324.267 268.8 c -17.0667 -17.0667 -42.6667 -17.0667 -59.7333 0 c -17.0667 17.0667 -17.0667 42.6667 0 59.7333 l 187.733 187.733 l -187.733 187.733 c -17.0667 17.0667 -17.0667 42.6667 0 59.7333 c 17.0667 17.0667 42.6667 17.0667 59.7333 0 l 187.733 -187.733 l 187.733 187.733 c 17.0667 17.0667 42.6667 17.0667 59.7333 0 c 17.0667 -17.0667 17.0667 -42.6667 0 -59.7333 L 571.733 512 Z"];
|
|
163
162
|
case "trash":
|
|
164
163
|
return ["M 597.333 213.333 V 170.667 h -170.667 v 42.6667 H 213.333 v 42.6667 h 597.333 V 213.333 Z M 298.667 298.667 H 256 v 469.333 h 512 V 298.667 H 298.667 Z m 170.667 341.333 h -42.6667 V 384 h 42.6667 v 256 Z m 128 0 h -42.6667 V 384 h 42.6667 v 256 Z"];
|
|
164
|
+
case "download":
|
|
165
|
+
return ["M47.234 979.775v-210.45h102.303v70.151h724.874v-70.15h102.3v210.45H47.233zM149.54 359.948l242.595 0.175V44.451h242.6v309.827h242.6L517.821 734.253 149.539 359.948z"];
|
|
166
|
+
case "arrow":
|
|
167
|
+
return ["M651.3 514.2c0 8.2-3.1 16.4-9.4 22.6L426.4 752.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L574 514.2 381.1 321.4c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l215.5 215.5c6.2 6.3 9.4 14.5 9.4 22.6z"];
|
|
165
168
|
case "grip":
|
|
166
169
|
return ["M 384 256 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 384 426.667 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 384 597.333 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 384 768 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 640 256 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 640 426.667 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 640 597.333 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 640 768 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z"];
|
|
167
170
|
case "custom":
|
|
@@ -1938,9 +1941,10 @@ var _sfc_main$7 = defineComponent({
|
|
|
1938
1941
|
},
|
|
1939
1942
|
changer: {},
|
|
1940
1943
|
draggable: {},
|
|
1941
|
-
handle: {},
|
|
1942
1944
|
dragClass: {},
|
|
1943
1945
|
ghostClass: {},
|
|
1946
|
+
handle: {},
|
|
1947
|
+
filter: {},
|
|
1944
1948
|
group: {},
|
|
1945
1949
|
animation: {}
|
|
1946
1950
|
},
|
|
@@ -1954,25 +1958,30 @@ var _sfc_main$7 = defineComponent({
|
|
|
1954
1958
|
const {
|
|
1955
1959
|
watcher
|
|
1956
1960
|
} = useReactive();
|
|
1961
|
+
const {
|
|
1962
|
+
onTimeout
|
|
1963
|
+
} = useTimer();
|
|
1964
|
+
var MODULE_Sortable = void 0;
|
|
1957
1965
|
var sortPanel = void 0;
|
|
1958
1966
|
var sortInstance = void 0;
|
|
1959
|
-
|
|
1967
|
+
function buildSortable() {
|
|
1960
1968
|
{
|
|
1961
1969
|
sortInstance && sortInstance.destroy();
|
|
1962
1970
|
sortInstance = void 0;
|
|
1971
|
+
sortPanel.classList.remove("sortable");
|
|
1963
1972
|
}
|
|
1964
|
-
if (props.disabled != true) {
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
sortInstance = new Sortable(sortPanel, {
|
|
1973
|
+
if (props.disabled != true && MODULE_Sortable != void 0) {
|
|
1974
|
+
sortPanel.classList.add("sortable");
|
|
1975
|
+
sortInstance = new MODULE_Sortable(sortPanel, {
|
|
1968
1976
|
group: props.group || newId(),
|
|
1969
1977
|
draggable: props.draggable,
|
|
1970
|
-
handle: props.handle || props.draggable,
|
|
1971
1978
|
dragClass: props.dragClass || "snail-sort-drag",
|
|
1972
1979
|
ghostClass: props.ghostClass || "snail-sort-ghost",
|
|
1980
|
+
handle: props.handle || props.draggable,
|
|
1981
|
+
filter: props.filter,
|
|
1982
|
+
preventOnFilter: false,
|
|
1973
1983
|
animation: props.animation > 0 ? props.animation : 150,
|
|
1974
1984
|
forceFallback: true,
|
|
1975
|
-
preventOnFilter: false,
|
|
1976
1985
|
fallbackTolerance: 2,
|
|
1977
1986
|
onUpdate(evt) {
|
|
1978
1987
|
emits("update", evt.oldIndex, evt.newIndex);
|
|
@@ -1980,13 +1989,16 @@ var _sfc_main$7 = defineComponent({
|
|
|
1980
1989
|
});
|
|
1981
1990
|
}
|
|
1982
1991
|
}
|
|
1983
|
-
onMounted(() => {
|
|
1992
|
+
onMounted(async () => {
|
|
1984
1993
|
const instance = getCurrentInstance();
|
|
1985
1994
|
sortPanel = instance.vnode.el.parentElement;
|
|
1986
|
-
|
|
1987
|
-
|
|
1988
|
-
|
|
1989
|
-
|
|
1995
|
+
MODULE_Sortable = await script.load("sortablejs");
|
|
1996
|
+
var timerScope = void 0;
|
|
1997
|
+
buildSortable();
|
|
1998
|
+
watcher(() => props.disabled, buildSortable);
|
|
1999
|
+
watcher(() => props.changer, () => {
|
|
2000
|
+
timerScope && timerScope.destroy();
|
|
2001
|
+
timerScope = onTimeout(() => buildSortable(), 100);
|
|
1990
2002
|
});
|
|
1991
2003
|
});
|
|
1992
2004
|
onBeforeUnmount(() => sortInstance && sortInstance.destroy());
|
package/dist/snail.vue.umd.js
CHANGED
|
@@ -155,15 +155,18 @@
|
|
|
155
155
|
switch (options.type) {
|
|
156
156
|
case "success":
|
|
157
157
|
return ["M 102.272 613.285 a 48.9258 48.9258 0 0 1 -1.34967 -62.8444 l 26.0656 -31.2113 a 50.6129 50.6129 0 0 1 62.6756 -11.2192 l 199.583 121.218 c 19.4859 11.8097 49.0102 8.26677 65.9655 -8.01371 l 540.714 -519.625 a 40.3216 40.3216 0 0 1 57.9518 1.6871 l 37.9597 43.3583 a 47.5762 47.5762 0 0 1 -0.843545 62.4226 L 452.766 920.675 a 38.4658 38.4658 0 0 1 -56.8553 1.18097 L 102.272 613.285 Z"];
|
|
158
|
-
case "close":
|
|
159
158
|
case "error":
|
|
160
159
|
return ["M 571.733 512 l 187.733 -187.733 c 17.0667 -17.0667 17.0667 -42.6667 0 -59.7333 c -17.0667 -17.0667 -42.6667 -17.0667 -59.7333 0 L 512 452.267 L 324.267 268.8 c -17.0667 -17.0667 -42.6667 -17.0667 -59.7333 0 c -17.0667 17.0667 -17.0667 42.6667 0 59.7333 l 187.733 187.733 l -187.733 187.733 c -17.0667 17.0667 -17.0667 42.6667 0 59.7333 c 17.0667 17.0667 42.6667 17.0667 59.7333 0 l 187.733 -187.733 l 187.733 187.733 c 17.0667 17.0667 42.6667 17.0667 59.7333 0 c 17.0667 -17.0667 17.0667 -42.6667 0 -59.7333 L 571.733 512 Z"];
|
|
161
160
|
case "warn":
|
|
162
161
|
return ["M 891.733 750.933 l -341.333 -558.933 c -17.0667 -25.6 -59.7333 -25.6 -72.5333 0 l -341.333 558.933 c -8.53333 12.8 -8.53333 29.8667 0 42.6667 c 4.26667 8.53333 17.0667 17.0667 34.1333 17.0667 h 682.667 c 17.0667 0 29.8667 -8.53333 38.4 -21.3333 c 4.26667 -12.8 4.26667 -25.6 0 -38.4 Z m -341.333 -46.9333 c -8.53333 17.0667 -34.1333 25.6 -55.4667 17.0667 s -29.8667 -34.1333 -17.0667 -51.2 c 8.53333 -17.0667 34.1333 -25.6 55.4667 -17.0667 c 17.0667 8.53333 25.6 34.1333 17.0667 51.2 Z m 4.26667 -132.267 c 0 21.3333 -17.0667 38.4 -42.6667 38.4 s -42.6667 -17.0667 -42.6667 -38.4 V 379.733 c 0 -21.3333 17.0667 -38.4 42.6667 -38.4 s 42.6667 17.0667 42.6667 38.4 v 192 Z"];
|
|
163
|
-
case "
|
|
164
|
-
return ["
|
|
162
|
+
case "close":
|
|
163
|
+
return ["M 571.733 512 l 187.733 -187.733 c 17.0667 -17.0667 17.0667 -42.6667 0 -59.7333 c -17.0667 -17.0667 -42.6667 -17.0667 -59.7333 0 L 512 452.267 L 324.267 268.8 c -17.0667 -17.0667 -42.6667 -17.0667 -59.7333 0 c -17.0667 17.0667 -17.0667 42.6667 0 59.7333 l 187.733 187.733 l -187.733 187.733 c -17.0667 17.0667 -17.0667 42.6667 0 59.7333 c 17.0667 17.0667 42.6667 17.0667 59.7333 0 l 187.733 -187.733 l 187.733 187.733 c 17.0667 17.0667 42.6667 17.0667 59.7333 0 c 17.0667 -17.0667 17.0667 -42.6667 0 -59.7333 L 571.733 512 Z"];
|
|
165
164
|
case "trash":
|
|
166
165
|
return ["M 597.333 213.333 V 170.667 h -170.667 v 42.6667 H 213.333 v 42.6667 h 597.333 V 213.333 Z M 298.667 298.667 H 256 v 469.333 h 512 V 298.667 H 298.667 Z m 170.667 341.333 h -42.6667 V 384 h 42.6667 v 256 Z m 128 0 h -42.6667 V 384 h 42.6667 v 256 Z"];
|
|
166
|
+
case "download":
|
|
167
|
+
return ["M47.234 979.775v-210.45h102.303v70.151h724.874v-70.15h102.3v210.45H47.233zM149.54 359.948l242.595 0.175V44.451h242.6v309.827h242.6L517.821 734.253 149.539 359.948z"];
|
|
168
|
+
case "arrow":
|
|
169
|
+
return ["M651.3 514.2c0 8.2-3.1 16.4-9.4 22.6L426.4 752.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L574 514.2 381.1 321.4c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l215.5 215.5c6.2 6.3 9.4 14.5 9.4 22.6z"];
|
|
167
170
|
case "grip":
|
|
168
171
|
return ["M 384 256 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 384 426.667 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 384 597.333 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 384 768 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 640 256 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 640 426.667 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 640 597.333 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z", "M 640 768 m -42.6667 0 a 42.6667 42.6667 0 1 0 85.3333 0 a 42.6667 42.6667 0 1 0 -85.3333 0 Z"];
|
|
169
172
|
case "custom":
|
|
@@ -1940,9 +1943,10 @@
|
|
|
1940
1943
|
},
|
|
1941
1944
|
changer: {},
|
|
1942
1945
|
draggable: {},
|
|
1943
|
-
handle: {},
|
|
1944
1946
|
dragClass: {},
|
|
1945
1947
|
ghostClass: {},
|
|
1948
|
+
handle: {},
|
|
1949
|
+
filter: {},
|
|
1946
1950
|
group: {},
|
|
1947
1951
|
animation: {}
|
|
1948
1952
|
},
|
|
@@ -1956,25 +1960,30 @@
|
|
|
1956
1960
|
const {
|
|
1957
1961
|
watcher
|
|
1958
1962
|
} = useReactive();
|
|
1963
|
+
const {
|
|
1964
|
+
onTimeout
|
|
1965
|
+
} = snail_core.useTimer();
|
|
1966
|
+
var MODULE_Sortable = void 0;
|
|
1959
1967
|
var sortPanel = void 0;
|
|
1960
1968
|
var sortInstance = void 0;
|
|
1961
|
-
|
|
1969
|
+
function buildSortable() {
|
|
1962
1970
|
{
|
|
1963
1971
|
sortInstance && sortInstance.destroy();
|
|
1964
1972
|
sortInstance = void 0;
|
|
1973
|
+
sortPanel.classList.remove("sortable");
|
|
1965
1974
|
}
|
|
1966
|
-
if (props.disabled != true) {
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
sortInstance = new Sortable(sortPanel, {
|
|
1975
|
+
if (props.disabled != true && MODULE_Sortable != void 0) {
|
|
1976
|
+
sortPanel.classList.add("sortable");
|
|
1977
|
+
sortInstance = new MODULE_Sortable(sortPanel, {
|
|
1970
1978
|
group: props.group || snail_core.newId(),
|
|
1971
1979
|
draggable: props.draggable,
|
|
1972
|
-
handle: props.handle || props.draggable,
|
|
1973
1980
|
dragClass: props.dragClass || "snail-sort-drag",
|
|
1974
1981
|
ghostClass: props.ghostClass || "snail-sort-ghost",
|
|
1982
|
+
handle: props.handle || props.draggable,
|
|
1983
|
+
filter: props.filter,
|
|
1984
|
+
preventOnFilter: false,
|
|
1975
1985
|
animation: props.animation > 0 ? props.animation : 150,
|
|
1976
1986
|
forceFallback: true,
|
|
1977
|
-
preventOnFilter: false,
|
|
1978
1987
|
fallbackTolerance: 2,
|
|
1979
1988
|
onUpdate(evt) {
|
|
1980
1989
|
emits("update", evt.oldIndex, evt.newIndex);
|
|
@@ -1982,13 +1991,16 @@
|
|
|
1982
1991
|
});
|
|
1983
1992
|
}
|
|
1984
1993
|
}
|
|
1985
|
-
vue.onMounted(() => {
|
|
1994
|
+
vue.onMounted(async () => {
|
|
1986
1995
|
const instance = vue.getCurrentInstance();
|
|
1987
1996
|
sortPanel = instance.vnode.el.parentElement;
|
|
1988
|
-
|
|
1989
|
-
|
|
1990
|
-
|
|
1991
|
-
|
|
1997
|
+
MODULE_Sortable = await snail_core.script.load("sortablejs");
|
|
1998
|
+
var timerScope = void 0;
|
|
1999
|
+
buildSortable();
|
|
2000
|
+
watcher(() => props.disabled, buildSortable);
|
|
2001
|
+
watcher(() => props.changer, () => {
|
|
2002
|
+
timerScope && timerScope.destroy();
|
|
2003
|
+
timerScope = onTimeout(() => buildSortable(), 100);
|
|
1992
2004
|
});
|
|
1993
2005
|
});
|
|
1994
2006
|
vue.onBeforeUnmount(() => sortInstance && sortInstance.destroy());
|
|
@@ -1,53 +1,53 @@
|
|
|
1
1
|
/* src:base\button.vue index:0 */
|
|
2
2
|
.snail-button{align-items:center;border-radius:2px;cursor:pointer;display:flex;display:inline-flex;justify-content:center;-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
|
-
/* src:base\choose.vue index:0 */
|
|
4
|
-
.snail-choose{align-items:center;display:flex;flex-wrap:wrap;overflow-x:hidden}.snail-choose>div.choose-item{align-items:center;cursor:pointer;display:flex;flex-shrink:0;margin:0 8px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-choose>div.choose-item:after{content:"";height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%}.snail-choose>div.choose-item>input::checkmark{background-color:#2196f3;border-color:#2196f3}.snail-choose>div.choose-item>span{margin-left:4px}.snail-choose.readonly>div.choose-item{cursor:not-allowed}
|
|
5
3
|
/* src:base\footer.vue index:0 */
|
|
6
4
|
.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:left}.snail-footer.center{justify-content:center}.snail-footer.right{justify-content:right}
|
|
5
|
+
/* src:base\choose.vue index:0 */
|
|
6
|
+
.snail-choose{align-items:center;display:flex;flex-wrap:wrap;overflow-x:hidden}.snail-choose>div.choose-item{align-items:center;cursor:pointer;display:flex;flex-shrink:0;margin:0 8px;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-choose>div.choose-item:after{content:"";height:100%;left:0;overflow:hidden;position:absolute;top:0;width:100%}.snail-choose>div.choose-item>input::checkmark{background-color:#2196f3;border-color:#2196f3}.snail-choose>div.choose-item>span{margin-left:4px}.snail-choose.readonly>div.choose-item{cursor:not-allowed}
|
|
7
7
|
/* src:base\header.vue index:0 */
|
|
8
8
|
.snail-header{align-items:center;background-color:#fff;display:flex;flex-shrink:0;position:relative;width:100%}.snail-header>.header-title{color:#2e3033;flex:1;line-height:48px;overflow:hidden;padding:0 30px;text-overflow:ellipsis;white-space:nowrap;width:100%}.snail-header>.header-title.left{text-align:left}.snail-header>.header-title.center{text-align:center}.snail-header>.header-title.right{text-align:right}.snail-header.start-divider{border-bottom:1px solid #dddfed}.snail-header.page{height:48px}.snail-header.page>.header-title{font-size:16px;font-weight:bold}.snail-header.page>.close-icon{margin-right:18px}.snail-header.dialog{height:64px;padding-top:16px}.snail-header.dialog>.header-title{font-size:20px}.snail-header.dialog>.close-icon{position:absolute;right:8px;top:8px}
|
|
9
9
|
/* src:base\icon.vue index:0 */
|
|
10
10
|
.snail-icon{cursor:pointer;opacity:1}
|
|
11
|
-
/* src:base\search.vue index:0 */
|
|
12
|
-
.snail-search{align-items:center;background:#fff;display:flex;flex-shrink:0;height:34px}.snail-search>input{border-radius:0!important;flex:1;height:100%}.snail-search>div{align-items:center;border:1px solid #dddfed;border-left:none;display:flex;flex-shrink:0;height:100%;justify-content:center;width:34px}
|
|
13
11
|
/* src:base\select.vue index:0 */
|
|
14
12
|
.snail-select{align-items:center;background-color:#fff;border:1px solid #dddfed;border-radius:4px;color:#2e3033;cursor:pointer;display:flex;height:32px;width:100%}.snail-select>div.select-result{align-items:center;display:flex;flex:1;flex-wrap:nowrap;height:30px;overflow:hidden;padding:0 10px 0 6px}.snail-select>div.select-result>div.select-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.snail-select>svg.snail-icon{flex-shrink:0;margin-right:4px}.snail-select>div.no-items{cursor:text;padding:0 8px}.snail-select.readonly{cursor:auto}.snail-select.readonly>svg.snail-icon{display:none}
|
|
13
|
+
/* src:container\dynamic.vue index:0 */
|
|
14
|
+
.snail-dynamic-error{color:red}.snail-dynamic-error>span{color:gray}
|
|
15
15
|
/* src:base\switch.vue index:0 */
|
|
16
16
|
.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}
|
|
17
|
+
/* src:base\search.vue index:0 */
|
|
18
|
+
.snail-search{align-items:center;background:#fff;display:flex;flex-shrink:0;height:34px}.snail-search>input{border-radius:0!important;flex:1;height:100%}.snail-search>div{align-items:center;border:1px solid #dddfed;border-left:none;display:flex;flex-shrink:0;height:100%;justify-content:center;width:34px}
|
|
17
19
|
/* src:container\fold.vue index:0 */
|
|
18
20
|
.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>.subtitle,.snail-fold>div.fold-header>.title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}.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:right;display:flex;flex:1;justify-content:right}.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)}
|
|
19
|
-
/* src:container\scroll.vue index:0 */
|
|
20
|
-
.snail-scroll{overflow:hidden}.snail-scroll.scroll-x{overflow-x:auto}.snail-scroll.scroll-y{overflow-y:auto}
|
|
21
|
-
/* src:container\dynamic.vue index:0 */
|
|
22
|
-
.snail-dynamic-error{color:red}.snail-dynamic-error>span{color:gray}
|
|
23
21
|
/* src:container\sort.vue index:0 */
|
|
24
22
|
.snail-sort-drag{background:#fff;border:1px solid #4c9aff;border-radius:4px;cursor:move}.snail-sort-ghost{border:1px dashed #4c9aff;border-radius:4px}
|
|
25
|
-
/* src:container\
|
|
26
|
-
.snail-
|
|
23
|
+
/* src:container\scroll.vue index:0 */
|
|
24
|
+
.snail-scroll{overflow:hidden}.snail-scroll.scroll-x{overflow-x:auto}.snail-scroll.scroll-y{overflow-y:auto}
|
|
27
25
|
/* src:container\components\table-row.vue index:0 */
|
|
28
26
|
.table-row{align-items:center;display:flex}
|
|
29
|
-
/* src:
|
|
30
|
-
.snail-
|
|
31
|
-
/* src:container\tree.vue index:0 */
|
|
32
|
-
.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}
|
|
27
|
+
/* src:container\table.vue index:0 */
|
|
28
|
+
.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
29
|
/* src:container\components\table-col.vue index:0 */
|
|
34
30
|
.table-col{align-items:center;display:flex;height:100%;white-space:nowrap}.table-col.left{justify-content:left}.table-col.center{justify-content:center}.table-col.right{justify-content:right}
|
|
35
|
-
/* src:
|
|
36
|
-
.snail-
|
|
31
|
+
/* src:container\tree.vue index:0 */
|
|
32
|
+
.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}
|
|
33
|
+
/* src:form\input.vue index:0 */
|
|
34
|
+
.snail-input{display:inline-flex;min-height:34px}.snail-input>.input-title{flex-shrink:0;padding-top:6px}.snail-input>.input-title>span.text{color:#2e3033}.snail-input>.input-title>span.required{color:#f74b4b;margin-left:2px}.snail-input>.input-body{align-self:start;display:flex;flex:1;height:32px}.snail-input>.input-body>input{flex:1}.snail-input>.input-body>span{background-color:red;flex-shrink:0}
|
|
37
35
|
/* src:prompt\empty.vue index:0 */
|
|
38
36
|
.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}
|
|
37
|
+
/* src:prompt\drag-verify.vue index:0 */
|
|
38
|
+
.snail-drag-verify{background:#f8f9fa;border:1px solid #dddfed;border-radius:8px;height:40px;overflow:hidden;position:relative;width:100%}.snail-drag-verify>div{height:100%;width:100%}.snail-drag-verify>.drag-progress{background-color:#0c6;transition:width .5s ease-in-out}.snail-drag-verify>.drag-handle,.snail-drag-verify>.verify-message{left:0;position:absolute;top:0;transition:left .5s ease-in-out}.snail-drag-verify>.verify-message{background-image:-webkit-linear-gradient(left,#666,#666 45%,#fff 50%,#666 55%,#666);-webkit-text-fill-color:transparent;align-items:center;animation:snail-drag-verify 2s linear infinite;-webkit-background-clip:text;background-clip:text;background-size:200% 100%;color:#7e848c;display:flex;font-size:12px;font-weight:400;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.snail-drag-verify>.drag-handle{align-items:center;background-color:#fff;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAnUExURQAAAGBQUGBaWmJZWWJYWGNYWGNZWWJYWGJZWWBYWGNYWGNZWWRYWIqwlb0AAAANdFJOUwAQMMDQoFBgcCCw4ECQ8pPMAAAAP0lEQVQI12NgwATTGBgawAwRBYZwMIPRiYErAcxSFmA0AjN4HBikBcCsUgYmQxQGE0wKphhIQrSzwAyEW4EOACHhB32zIad6AAAAAElFTkSuQmCC);background-position:50%;background-repeat:no-repeat;border-right:1px solid #dddfed;cursor:move;display:flex;justify-content:center;width:40px}.snail-drag-verify.dragging>.drag-handle,.snail-drag-verify.dragging>.drag-progress{transition:none!important}.snail-drag-verify.success>.verify-message{-webkit-text-fill-color:#fff;color:#fff}.snail-drag-verify.success>.drag-handle>svg{background:#76c61d;border-radius:50%;padding:4px}@keyframes snail-drag-verify{0%{background-position:0 0}to{background-position:-200% 0}}
|
|
39
39
|
/* src:prompt\loading.vue index:0 */
|
|
40
40
|
.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 .5s ease-in-out}.snail-loading-enter-from,.snail-loading-leave-to{opacity:0}
|
|
41
|
-
/* src:popup\components\dialog-container.vue index:0 */
|
|
42
|
-
.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)}
|
|
43
41
|
/* src:popup\components\confirm-container.vue index:0 */
|
|
44
42
|
.snail-confirm{background-color:#fff;border-radius:4px;color:#2e2f33;display:flex;flex-direction:column;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}
|
|
45
43
|
/* src:popup\components\follow-container.vue index:0 */
|
|
46
44
|
.snail-follow{background-color:#fff;display:inline-block;max-height:100%;max-width:100%;position:fixed;transition-duration:.5s;transition-property:left,top;transition-timing-function:ease}.snail-follow.initial{top:100%;transition:none}
|
|
47
|
-
/* src:popup\components\popup-container.vue index:0 */
|
|
48
|
-
.snail-popup{left:0;position:fixed;top:0}
|
|
49
45
|
/* src:popup\components\toast-container.vue index:0 */
|
|
50
46
|
.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}
|
|
47
|
+
/* src:popup\components\popup-container.vue index:0 */
|
|
48
|
+
.snail-popup{left:0;position:fixed;top:0}
|
|
49
|
+
/* src:popup\components\dialog-container.vue index:0 */
|
|
50
|
+
.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)}
|
|
51
51
|
/* src:container\components\tree-node.vue index:0 */
|
|
52
52
|
.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-slot,.snail-tree-node>.node-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.snail-tree-node>.node-text{color:#2e3033;flex:1;min-width:30px}.snail-tree-node.clickable>.node-text{cursor:pointer}.snail-tree-children{width:100%}.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}
|
|
53
53
|
/* 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": "1.0.
|
|
6
|
+
"version": "1.0.45",
|
|
7
7
|
"type": "module",
|
|
8
8
|
"main": "dist/snail.vue.js",
|
|
9
9
|
"module": "dist/snail.vue.js",
|
|
@@ -14,13 +14,13 @@
|
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
16
|
"vue": "^3.5.14",
|
|
17
|
-
"snail.core": ">=2.0.
|
|
17
|
+
"snail.core": ">=2.0.13",
|
|
18
18
|
"snail.view": ">=1.0.20",
|
|
19
19
|
"sortablejs": ">=1.15.6"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
22
|
"vue-tsc": "^2.2.10",
|
|
23
|
-
"snail.rollup": ">=1.2.
|
|
23
|
+
"snail.rollup": ">=1.2.9",
|
|
24
24
|
"snail.rollup-asset": ">=1.2.1",
|
|
25
25
|
"snail.rollup-html": ">=1.2.3",
|
|
26
26
|
"snail.rollup-url": ">=1.2.2",
|