snail.vue 2.0.17 → 2.0.19

package/dist/snail.vue.js

@@ -1,7 +1,7 @@
 //@ sourceURL=/snail.vue.js
-import { defineComponent, createElementBlock, openBlock, normalizeClass, renderSlot, createTextVNode, shallowRef, computed, mergeProps, unref, createElementVNode, toDisplayString, Fragment, renderList, mergeModels, useModel, normalizeStyle, createCommentVNode, createBlock, nextTick, useTemplateRef, createVNode, watch, withDirectives, isRef, vModelText, withCtx, createApp, resolveDynamicComponent, TransitionGroup, Transition, normalizeProps, guardReactiveProps, ref, onErrorCaptured, createSlots, onMounted, withModifiers, getCurrentInstance, resolveComponent, onBeforeUnmount, onActivated, vShow, getCurrentScope, onScopeDispose } from 'vue';
+import { defineComponent, createElementBlock, openBlock, normalizeClass, renderSlot, createTextVNode, shallowRef, computed, mergeProps, unref, createElementVNode, toDisplayString, Fragment, renderList, mergeModels, useModel, normalizeStyle, createCommentVNode, createBlock, nextTick, useTemplateRef, createVNode, watch, withDirectives, isRef, vModelText, withCtx, createApp, resolveDynamicComponent, TransitionGroup, Transition, normalizeProps, guardReactiveProps, ref, onErrorCaptured, createSlots, onMounted, withModifiers, getCurrentInstance, resolveComponent, vShow, onBeforeUnmount, onActivated, getCurrentScope, onScopeDispose } from 'vue';
 import { throwError, isObject, correctNumber, correctString, useKey, isArray, mountScope, useScopes, throwIfFalse, isPromise, wait, isNumberNotNaN, isStringNotEmpty, hasAny, mustFunction, useScope, removeFromArray, mustObject, isArrayNotEmpty, hasOwnProperty, isString, script, delay, useTimer, defer, useAsyncScope, useHook, newId, throwIfTrue, isFunction, isNullish, getTimeNumber, getDateValue, parseDate, formatDateValue, getDateByValue, parseTimeValue, getTimeValue, padStart, formatTimeValue, parseDateValue, correctDateFormat, isValidTime, getFromArray, onMountScope } from 'snail.core';
-import { link, css, useObserver, useAnimation } from 'snail.view';
+import { css, link, useObserver, useAnimation } from 'snail.view';
 
 const _hoisted_1$n = ["title"];
 var _sfc_main$D = defineComponent({
@@ -25,10 +25,6 @@ var _sfc_main$D = defineComponent({
   }
 });
 
-var addLink = href => setTimeout(link.register, 0, href);
-
-addLink("/styles/snail.vue.vue.css");
-
 function getBuiltinIcon(iconType) {
   switch (iconType) {
     case "success":
@@ -68,8 +64,8 @@ function getBuiltinIcon(iconType) {
 }
 
 const _hoisted_1$m = ["viewBox"];
-const _hoisted_2$e = ["textContent"];
-const _hoisted_3$b = ["d"];
+const _hoisted_2$d = ["textContent"];
+const _hoisted_3$a = ["d"];
 var _sfc_main$C = defineComponent({
   __name: "icon",
   props: {
@@ -125,22 +121,22 @@ var _sfc_main$C = defineComponent({
         onMouseleave: _cache[1] || (_cache[1] = $event => isMouseEnterRef.value = false)
       }), [createElementVNode("title", {
         textContent: toDisplayString(__props.title || "")
-      }, null, 8, _hoisted_2$e), __props.custom == true ? renderSlot(_ctx.$slots, "default", {
+      }, null, 8, _hoisted_2$d), __props.custom == true ? renderSlot(_ctx.$slots, "default", {
         key: 0
       }) : (openBlock(true), createElementBlock(Fragment, {
         key: 1
       }, renderList(unref(getBuiltinIcon)(__props.type), d => {
         return openBlock(), createElementBlock("path", {
           d
-        }, null, 8, _hoisted_3$b);
+        }, null, 8, _hoisted_3$a);
       }), 256))], 16, _hoisted_1$m);
     };
   }
 });
 
 const _hoisted_1$l = ["title", "onClick"];
-const _hoisted_2$d = ["type", "checked"];
-const _hoisted_3$a = ["textContent"];
+const _hoisted_2$c = ["type", "checked"];
+const _hoisted_3$9 = ["textContent"];
 const _hoisted_4$7 = ["textContent"];
 var _sfc_main$B = defineComponent({
   ...{
@@ -218,7 +214,7 @@ var _sfc_main$B = defineComponent({
           key: 0,
           type: unref(type),
           checked: node.selected
-        }, null, 8, _hoisted_2$d)) : unref(mode) == "beautiful" ? (openBlock(), createElementBlock("div", {
+        }, null, 8, _hoisted_2$c)) : unref(mode) == "beautiful" ? (openBlock(), createElementBlock("div", {
           key: 1,
           class: normalizeClass(["status", [node.selected ? "selected" : ""]])
         }, [node.selected ? (openBlock(), createBlock(_sfc_main$C, {
@@ -230,7 +226,7 @@ var _sfc_main$B = defineComponent({
           key: 2,
           class: "item-text",
           textContent: toDisplayString(node.item.text)
-        }, null, 8, _hoisted_3$a)) : createCommentVNode("", true), node.item.description ? (openBlock(), createElementBlock("span", {
+        }, null, 8, _hoisted_3$9)) : createCommentVNode("", true), node.item.description ? (openBlock(), createElementBlock("span", {
           key: 3,
           class: "item-des",
           textContent: toDisplayString(node.item.description)
@@ -288,6 +284,10 @@ var _sfc_main$A = defineComponent({
   }
 });
 
+var addLink = href => setTimeout(link.register, 0, href);
+
+addLink("/styles/snail.vue.vue.css");
+
 const _hoisted_1$k = ["textContent"];
 var _sfc_main$z = defineComponent({
   ...{
@@ -342,12 +342,12 @@ var _sfc_main$z = defineComponent({
 });
 
 const _hoisted_1$j = ["textContent"];
-const _hoisted_2$c = {
+const _hoisted_2$b = {
   key: 0,
   class: "required",
   textContent: "*"
 };
-const _hoisted_3$9 = {
+const _hoisted_3$8 = {
   class: "input-body"
 };
 const _hoisted_4$6 = ["type", "value", "readonly", "placeholder", "title"];
@@ -404,7 +404,7 @@ var _sfc_main$y = defineComponent({
       }, [createElementVNode("span", {
         class: "text",
         textContent: toDisplayString(__props.title)
-      }, null, 8, _hoisted_1$j), __props.readonly != true && __props.required == true ? (openBlock(), createElementBlock("span", _hoisted_2$c)) : createCommentVNode("", true)], 4)) : createCommentVNode("", true), createElementVNode("div", _hoisted_3$9, [createElementVNode("input", {
+      }, null, 8, _hoisted_1$j), __props.readonly != true && __props.required == true ? (openBlock(), createElementBlock("span", _hoisted_2$b)) : createCommentVNode("", true)], 4)) : createCommentVNode("", true), createElementVNode("div", _hoisted_3$8, [createElementVNode("input", {
         ref: "input-el",
         type: __props.type || "text",
         value: inputModel.value,
@@ -631,8 +631,8 @@ const _hoisted_1$i = {
   key: 0,
   class: "number-prefix"
 };
-const _hoisted_2$b = ["textContent"];
-const _hoisted_3$8 = ["inputmode", "placeholder", "title"];
+const _hoisted_2$a = ["textContent"];
+const _hoisted_3$7 = ["inputmode", "placeholder", "title"];
 const _hoisted_4$5 = {
   key: 1,
   class: "number-suffix"
@@ -790,7 +790,7 @@ var _sfc_main$x = defineComponent({
       }, [unref(hasPrefix) ? (openBlock(), createElementBlock("div", _hoisted_1$i, [createElementVNode("span", {
         class: "ellipsis",
         textContent: toDisplayString(unref(prefix))
-      }, null, 8, _hoisted_2$b)])) : createCommentVNode("", true), createElementVNode("div", {
+      }, null, 8, _hoisted_2$a)])) : createCommentVNode("", true), createElementVNode("div", {
         class: normalizeClass(["input-panel", unref(controls)])
       }, [withDirectives(createElementVNode("input", {
         type: "text",
@@ -802,7 +802,7 @@ var _sfc_main$x = defineComponent({
         onFocus: _cache[1] || (_cache[1] = $event => isRef(needBackSection) ? needBackSection.value = true : needBackSection = true),
         onPaste: _cache[2] || (_cache[2] = $event => isRef(needBackSection) ? needBackSection.value = false : needBackSection = false),
         onBlur: _cache[3] || (_cache[3] = $event => formatOnEnd(true))
-      }, null, 40, _hoisted_3$8), [[vModelText, displayValueRef.value]]), unref(controls) == "default" ? (openBlock(), createElementBlock(Fragment, {
+      }, null, 40, _hoisted_3$7), [[vModelText, displayValueRef.value]]), unref(controls) == "default" ? (openBlock(), createElementBlock(Fragment, {
         key: 0
       }, [createElementVNode("div", {
         class: "controls default subtract",
@@ -1130,7 +1130,7 @@ function deducePosition(strategy, targetStart, targetEnd, contentSize, clientSiz
 const _hoisted_1$g = {
   class: "snail-confirm flex-column"
 };
-const _hoisted_2$a = ["innerHTML"];
+const _hoisted_2$9 = ["innerHTML"];
 var _sfc_main$v = defineComponent({
   ...{
     name: "ConfirmContainer",
@@ -1166,7 +1166,7 @@ var _sfc_main$v = defineComponent({
       }, null, 8, ["title"]), createElementVNode("div", {
         class: "confirm-body",
         innerHTML: __props.message || "请确认？"
-      }, null, 8, _hoisted_2$a), createVNode(_sfc_main$A, {
+      }, null, 8, _hoisted_2$9), createVNode(_sfc_main$A, {
         align: "right",
         "cancel-name": __props.cancelName,
         "cancel-disabled": __props.cancelDisabled,
@@ -1646,7 +1646,7 @@ const _hoisted_1$f = {
   key: 1,
   class: "icon"
 };
-const _hoisted_2$9 = ["innerHTML"];
+const _hoisted_2$8 = ["innerHTML"];
 var _sfc_main$o = defineComponent({
   ...{
     name: "ToastContainer",
@@ -1702,7 +1702,7 @@ var _sfc_main$o = defineComponent({
       }, null, 8, ["type"])])) : createCommentVNode("", true), createElementVNode("div", {
         class: "message",
         innerHTML: unref(props).message
-      }, null, 8, _hoisted_2$9)], 38);
+      }, null, 8, _hoisted_2$8)], 38);
     };
   }
 });
@@ -1948,8 +1948,8 @@ function getNoDataBase64Image() {
 const _hoisted_1$e = {
   class: "snail-empty"
 };
-const _hoisted_2$8 = ["src"];
-const _hoisted_3$7 = ["textContent"];
+const _hoisted_2$7 = ["src"];
+const _hoisted_3$6 = ["textContent"];
 var _sfc_main$n = defineComponent({
   ...{
     name: "Empty",
@@ -1965,17 +1965,17 @@ var _sfc_main$n = defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", _hoisted_1$e, [createElementVNode("img", {
         src: __props.imageUrl || unref(defaultImageBase64)
-      }, null, 8, _hoisted_2$8), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("div", {
+      }, null, 8, _hoisted_2$7), renderSlot(_ctx.$slots, "default", {}, () => [createElementVNode("div", {
         class: "message",
         textContent: toDisplayString(__props.message || "无数据")
-      }, null, 8, _hoisted_3$7)])]);
+      }, null, 8, _hoisted_3$6)])]);
     };
   }
 });
 
 const _hoisted_1$d = ["title"];
-const _hoisted_2$7 = ["textContent"];
-const _hoisted_3$6 = {
+const _hoisted_2$6 = ["textContent"];
+const _hoisted_3$5 = {
   key: 1,
   class: "select-status"
 };
@@ -2024,10 +2024,10 @@ var _sfc_main$m = defineComponent({
       }, [createElementVNode("div", {
         class: "item-text ellipsis",
         textContent: toDisplayString(__props.item.text)
-      }, null, 8, _hoisted_2$7), __props.item.type == "group" ? (openBlock(), createBlock(_sfc_main$C, {
+      }, null, 8, _hoisted_2$6), __props.item.type == "group" ? (openBlock(), createBlock(_sfc_main$C, {
         key: 0,
         type: "arrow"
-      })) : __props.multiple == true ? (openBlock(), createElementBlock("div", _hoisted_3$6, [createVNode(_sfc_main$C, {
+      })) : __props.multiple == true ? (openBlock(), createElementBlock("div", _hoisted_3$5, [createVNode(_sfc_main$C, {
         type: "success",
         button: "",
         size: 12,
@@ -2252,8 +2252,8 @@ const _hoisted_1$c = {
   key: 0,
   class: "select-result"
 };
-const _hoisted_2$6 = ["title", "textContent"];
-const _hoisted_3$5 = ["textContent"];
+const _hoisted_2$5 = ["title", "textContent"];
+const _hoisted_3$4 = ["textContent"];
 const _hoisted_4$4 = {
   key: 1,
   class: "placeholder"
@@ -2397,11 +2397,11 @@ var _sfc_main$k = defineComponent({
         class: "select-text ellipsis",
         title: selectedTextRef.value,
         textContent: toDisplayString(selectedTextRef.value)
-      }, null, 8, _hoisted_2$6)])])) : (openBlock(), createElementBlock("div", {
+      }, null, 8, _hoisted_2$5)])])) : (openBlock(), createElementBlock("div", {
         key: 1,
         class: "placeholder",
         textContent: toDisplayString(__props.readonly ? "" : __props.placeholder || "请选择")
-      }, null, 8, _hoisted_3$5)), __props.readonly != true ? (openBlock(), createBlock(_sfc_main$C, {
+      }, null, 8, _hoisted_3$4)), __props.readonly != true ? (openBlock(), createBlock(_sfc_main$C, {
         key: 2,
         type: "arrow",
         button: "",
@@ -2464,7 +2464,8 @@ var _sfc_main$j = defineComponent({
 const _hoisted_1$b = ["readonly", "placeholder", "rows"];
 var _sfc_main$i = defineComponent({
   ...{
-    name: "Textarea"
+    name: "Textarea",
+    inheritAttrs: true
   },
   __name: "textarea",
   props: mergeModels({
@@ -2510,10 +2511,9 @@ var _sfc_main$i = defineComponent({
     }
     props.autoHeight == true && onMounted(calcRows);
     return (_ctx, _cache) => {
-      return withDirectives((openBlock(), createElementBlock("textarea", mergeProps({
+      return withDirectives((openBlock(), createElementBlock("textarea", {
         class: "snail-textarea",
-        ref: "textarea"
-      }, _ctx.$attrs, {
+        ref: "textarea",
         readonly: __props.readonly,
         placeholder: __props.placeholder,
         rows: rowsRef.value,
@@ -2522,90 +2522,77 @@ var _sfc_main$i = defineComponent({
         onInput: _cache[2] || (_cache[2] = $event => emits("input", textareaDom.value.value)),
         onBlur: _cache[3] || (_cache[3] = $event => emits("blur", textareaDom.value.value)),
         onChange: _cache[4] || (_cache[4] = $event => emits("change", textareaDom.value.value))
-      }), null, 16, _hoisted_1$b)), [[vModelText, valueModel.value]]);
+      }, null, 40, _hoisted_1$b)), [[vModelText, valueModel.value]]);
     };
   }
 });
 
+function isLeft(root) {
+  return root.scrollLeft == 0;
+}
 function isRight(root) {
-  return root.scrollLeft + root.clientWidth >= root.scrollWidth;
+  return Math.abs(root.scrollWidth - root.clientWidth - root.scrollLeft) < 1;
+}
+function isTop(root) {
+  return root.scrollTop == 0;
 }
 function isBottom(root) {
-  return root.scrollTop + root.clientHeight >= root.scrollHeight;
+  return Math.abs(root.scrollHeight - root.clientHeight - root.scrollTop) < 1;
 }
 
 const _hoisted_1$a = {
-  key: 0,
-  class: "down-refresh"
-};
-const _hoisted_2$5 = {
-  class: "main-body"
-};
-const _hoisted_3$4 = {
-  key: 1,
-  class: "up-more"
+  class: "snail-elastic"
 };
 var _sfc_main$h = defineComponent({
   __name: "elastic",
   props: {
     scroll: {},
+    barSize: {},
     spring: {},
     downRefresh: {
       type: Boolean
     },
     upMore: {
       type: Boolean
-    },
-    barSize: {}
+    }
   },
-  setup(__props) {
+  emits: ["refresh", "more"],
+  setup(__props, _ref) {
+    let {
+      emit: __emit
+    } = _ref;
     const props = __props;
+    const emits = __emit;
     const {
-      onEvent
+      onEvent,
+      onSize
     } = useObserver();
-    const rootDom = useTemplateRef("root-dom");
-    const scrollStyleRef = computed(buildScrollStyle);
-    ref(void 0);
-    const springStyleRef = computed(buildSpringStyle);
+    const {
+      watcher
+    } = useReactive();
+    const downRefreshDom = useTemplateRef("down-refresh");
+    const mainBodyDom = useTemplateRef("main-body");
+    const upMoreDom = useTemplateRef("up-more");
+    let isStartByTouch = false;
+    const startPointerRef = ref(void 0);
+    const isMovingRef = shallowRef(false);
+    const springStatusRef = ref(Object.create(null));
     const springXRef = computed(() => props.spring == "x" || props.spring == "both");
     const springYRef = computed(() => props.spring == "y" || props.spring == "both");
-    const downRefreshRef = computed(() => springYRef.value == true && props.downRefresh == true);
-    const upMoreRef = computed(() => springYRef.value == true && props.upMore == true);
-    const isMovingRef = ref(false);
-    const springStatusRef = ref(void 0);
-    const startPointerRef = ref(void 0);
-    let isStartByTouch = false;
-    function buildScrollStyle() {
-      const vars = Object.create(null);
+    const loadingRef = shallowRef();
+    function buildMainBodyStyle() {
+      const style = Object.create(null);
       switch (props.scroll) {
         case "x":
-          vars["--overflow"] = "auto hidden";
+          style["overflow"] = "auto hidden";
           break;
         case "y":
-          vars["--overflow"] = "hidden auto";
-          break;
-        case "both":
-          vars["--overflow"] = "auto";
-          break;
-      }
-      switch (props.barSize) {
-        case "normal":
-          vars["--bar-size"] = "10px";
-          break;
-        case "small":
-          vars["--bar-size"] = "6px";
-          break;
-        case "mini":
-          vars["--bar-size"] = "4px";
+          style["overflow"] = "hidden auto";
           break;
         case "none":
-          vars["--bar-size"] = "0";
+          style["overflow"] = "none";
           break;
       }
-      return vars;
-    }
-    function buildSpringStyle() {
-      const style = Object.create(null);
       if (springStatusRef.value != void 0) {
         const {
           x,
@@ -2614,18 +2601,19 @@ var _sfc_main$h = defineComponent({
         const transforms = [];
         x != void 0 && transforms.push(`translateX(${x}px)`);
         y != void 0 && transforms.push(`translateY(${y}px)`);
-        transforms.length && (style["--spring-transform"] = transforms.join(" "));
+        transforms.length && (style["transform"] = transforms.join(" "));
       }
       return style;
     }
     function onSpringStart(isTouch, position) {
-      if (isTouch != true && isStartByTouch == true) {
+      if (loadingRef.value != void 0) {
+        return;
+      }
+      if (isStartByTouch == true && isTouch != true) {
         return;
       }
       isTouch && (isStartByTouch = true);
       if (springXRef.value == true || springYRef.value == true) {
-        isMovingRef.value = true;
-        springStatusRef.value = Object.create(null);
         startPointerRef.value = {
           clientX: position.clientX,
           clientY: position.clientY
@@ -2633,73 +2621,119 @@ var _sfc_main$h = defineComponent({
       }
     }
     function onSpringMove(isTouch, position) {
-      if (startPointerRef.value == void 0 || isTouch != true && isStartByTouch == true) {
+      if (startPointerRef.value == void 0 || isStartByTouch == true && isTouch != true) {
         return;
       }
+      isMovingRef.value = true;
       if (springXRef.value == true) {
         const distance = position.clientX - startPointerRef.value.clientX;
-        if (distance >= 0 && rootDom.value.scrollLeft == 0) {
+        if (distance >= 0 && isLeft(mainBodyDom.value)) {
           springStatusRef.value.x = Math.pow(distance, 0.8);
-        } else if (distance <= 0 && isRight(rootDom.value)) {
+        } else if (distance <= 0 && isRight(mainBodyDom.value)) {
           springStatusRef.value.x = -Math.pow(-distance, 0.8);
         }
       }
       if (springYRef.value == true) {
         const distance = position.clientY - startPointerRef.value.clientY;
-        if (distance >= 0) {
-          if (rootDom.value.scrollTop == 0) {
-            springStatusRef.value.y = Math.pow(distance, 0.8);
-          } else {
-            startPointerRef.value.clientY = position.clientY;
-          }
-        } else if (distance <= 0 && isBottom(rootDom.value) == true) {
-          springStatusRef.value.y = -Math.pow(-distance, 0.8);
+        switch (loadingRef.value) {
+          default:
+            {
+              if (distance >= 0) {
+                isTop(mainBodyDom.value) ? springStatusRef.value.y = Math.pow(distance, 0.8) : startPointerRef.value.clientY = position.clientY;
+              } else {
+                console.log("isBottom", mainBodyDom.value.scrollTop + mainBodyDom.value.clientHeight, "---", mainBodyDom.value.scrollHeight);
+                isBottom(mainBodyDom.value) ? springStatusRef.value.y = -Math.pow(-distance, 0.8) : startPointerRef.value.clientY = position.clientY;
+              }
+              break;
+            }
         }
       }
     }
     function onSpringEnd(isTouch, isCancel) {
-      if (startPointerRef.value != void 0) {
-        springStatusRef.value = Object.create(null);
-        isMovingRef.value = false;
-        startPointerRef.value = void 0;
-        isStartByTouch = false;
+      if (startPointerRef.value == void 0 || isStartByTouch == true && isTouch != true) {
+        return;
+      }
+      if (isMovingRef.value != true) {
+        return;
+      }
+      if (loadingRef.value == void 0) {
+        if (downRefreshDom.value && springStatusRef.value.y > downRefreshDom.value.clientHeight) {
+          resetAfterEnd();
+          loadingRef.value = "refresh";
+          springStatusRef.value.y = downRefreshDom.value.clientHeight;
+          emits("refresh", resetAfterEnd);
+          return;
+        }
+        if (upMoreDom.value && springStatusRef.value.y <= -upMoreDom.value.clientHeight) {
+          resetAfterEnd();
+          loadingRef.value = "more";
+          springStatusRef.value.y = -upMoreDom.value.clientHeight;
+          emits("more", resetAfterEnd);
+          return;
+        }
       }
+      resetAfterEnd();
+    }
+    function resetAfterEnd() {
+      loadingRef.value = void 0;
+      springStatusRef.value = Object.create(null);
+      isMovingRef.value = false;
+      startPointerRef.value = void 0;
+      isStartByTouch = false;
     }
     onMounted(() => {
       if ("ontouchstart" in window) {
-        onEvent(rootDom.value, "touchstart", evt => onSpringStart(true, evt.touches[0]));
+        onEvent(mainBodyDom.value, "touchstart", evt => onSpringStart(true, evt.touches[0]));
         onEvent(window, "touchmove", evt => onSpringMove(true, evt.touches[0]));
-        onEvent(window, "touchend", () => onSpringEnd());
-        onEvent(window, "touchcancel", () => onSpringEnd());
+        onEvent(window, "touchend", () => onSpringEnd(true));
+        onEvent(window, "touchcancel", () => onSpringEnd(true));
       }
       if ("onmousedown" in window) {
-        onEvent(rootDom.value, "mousedown", evt => onSpringStart(false, evt));
+        onEvent(mainBodyDom.value, "mousedown", evt => onSpringStart(false, evt));
         onEvent(window, "mousemove", evt => onSpringMove(false, evt));
-        onEvent(window, "mouseup", () => onSpringEnd());
+        onEvent(window, "mouseup", () => onSpringEnd(false));
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["snail-elastic", {
-          "spring": springXRef.value || springYRef.value,
-          "moving": isMovingRef.value
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [springYRef.value == true && __props.downRefresh == true ? withDirectives((openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(["down-refresh", {
+          "running": loadingRef.value == "refresh"
         }]),
-        style: normalizeStyle([scrollStyleRef.value, springStyleRef.value]),
-        ref: "root-dom"
-      }, [downRefreshRef.value ? (openBlock(), createElementBlock("div", _hoisted_1$a, [renderSlot(_ctx.$slots, "down-refresh", {}, () => [_cache[0] || (_cache[0] = createTextVNode(" 默认实现[下拉刷新] ", -1))])])) : createCommentVNode("", true), createElementVNode("div", _hoisted_2$5, [renderSlot(_ctx.$slots, "default")]), upMoreRef.value ? (openBlock(), createElementBlock("div", _hoisted_3$4, [renderSlot(_ctx.$slots, "up-more", {}, () => [_cache[1] || (_cache[1] = createTextVNode(" 默认实现[上拉加载更多] ", -1))])])) : createCommentVNode("", true)], 6);
+        ref: "down-refresh"
+      }, [renderSlot(_ctx.$slots, "down-refresh", {}, () => [_cache[0] || (_cache[0] = createElementVNode("div", {
+        class: "flex-center default-loading"
+      }, [createElementVNode("span"), createElementVNode("span"), createElementVNode("span")], -1))])], 2)), [[vShow, loadingRef.value != "more"]]) : createCommentVNode("", true), createElementVNode("div", {
+        class: normalizeClass(["main-body wh-fill", [__props.barSize ? `${__props.barSize}-scrollbar` : "", isMovingRef.value ? "moving" : ""]]),
+        ref: "main-body",
+        key: "main-body",
+        style: normalizeStyle(buildMainBodyStyle())
+      }, [renderSlot(_ctx.$slots, "default")], 6), springYRef.value == true && __props.upMore == true ? withDirectives((openBlock(), createElementBlock("div", {
+        key: 1,
+        class: normalizeClass(["up-more", {
+          "running": loadingRef.value == "more"
+        }]),
+        ref: "up-more"
+      }, [renderSlot(_ctx.$slots, "up-more", {}, () => [_cache[1] || (_cache[1] = createElementVNode("div", {
+        class: "flex-center default-loading"
+      }, [createElementVNode("span"), createElementVNode("span"), createElementVNode("span")], -1))])], 2)), [[vShow, loadingRef.value != "refresh"]]) : createCommentVNode("", true)]);
     };
   }
 });
 
 var _sfc_main$g = defineComponent({
+  ...{
+    name: "Flex",
+    inheritAttrs: false
+  },
   __name: "flex",
   props: {
     direction: {},
     wrap: {},
     gap: {},
-    justifyContent: {},
-    alignItems: {},
-    alignContent: {},
+    main: {},
+    cross: {},
+    content: {},
     repairItem: {
       type: Boolean
     },
@@ -2716,40 +2750,22 @@ var _sfc_main$g = defineComponent({
     const {
       watcher
     } = useReactive();
-    const styleRef = computed(buildStyleVar);
+    const classRef = computed(buildClass);
     const repairItemsRef = shallowRef(0);
-    function isColumnDirection(direction) {
-      switch (direction) {
-        case "column":
-        case "column-reverse":
-          return true;
-        default:
-          return false;
-      }
-    }
-    function buildStyleVar() {
-      const styleVar = Object.create(null);
-      isStringNotEmpty(props.direction) && (styleVar["flex-direction"] = props.direction);
-      isStringNotEmpty(props.wrap) && (styleVar["flex-wrap"] = props.wrap);
-      isStringNotEmpty(props.gap) && (styleVar["gap"] = props.gap);
-      const tmpFunc = value => {
-        switch (value) {
-          case "start":
-            return "flex-start";
-          case "end":
-            return "flex-end";
-          default:
-            return value;
-        }
-      };
-      isStringNotEmpty(props.justifyContent) && (styleVar["justify-content"] = tmpFunc(props.justifyContent));
-      isStringNotEmpty(props.alignItems) && (styleVar["align-items"] = tmpFunc(props.alignItems));
-      isStringNotEmpty(props.alignContent) && (styleVar["align-content"] = tmpFunc(props.alignContent));
-      return styleVar;
+    function buildClass() {
+      const items = [];
+      let direction = props.direction;
+      props.repairItem == true && isStringNotEmpty(direction) == false && (direction = "row");
+      direction && items.push(direction);
+      props.wrap && items.push(props.wrap);
+      isStringNotEmpty(props.main) && items.push(`justify-${props.main}`);
+      isStringNotEmpty(props.cross) && items.push(`items-${props.cross}`);
+      isStringNotEmpty(props.content) && items.push(`content-${props.content}`);
+      return items;
     }
     function repairSpace() {
       repairItemsRef.value = 0;
-      const needRepair = props.repairItem == true && props.justifyContent && props.justifyContent.startsWith("space-") && props.itemCount > 0 && rootDom.value.children.length > 0;
+      const needRepair = props.repairItem == true && (props.main == "between" || props.main == "around" || props.main == "evenly") && props.itemCount > 0 && rootDom.value.children.length > 0;
       if (needRepair == true) {
         let containerSize, itemSize, itemGap;
         const containerStyle = getComputedStyle(rootDom.value);
@@ -2771,8 +2787,7 @@ var _sfc_main$g = defineComponent({
               break;
             }
         }
-        let itemCountPer;
-        itemCountPer = Math.floor((containerSize + itemGap) / (itemSize + itemGap));
+        let itemCountPer = Math.floor((containerSize + itemGap) / (itemSize + itemGap));
         if (itemCountPer > 1) {
           const mode = props.itemCount % itemCountPer;
           mode > 0 && (repairItemsRef.value = itemCountPer - mode);
@@ -2786,17 +2801,17 @@ var _sfc_main$g = defineComponent({
       onSize(rootDom.value, repairSpace);
     });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["snail-flex", {
-          "column": isColumnDirection(props.direction)
-        }]),
-        style: normalizeStyle(styleRef.value),
+      return openBlock(), createElementBlock("div", mergeProps(_ctx.$attrs, {
+        class: ["snail-flex", classRef.value],
+        style: unref(isStringNotEmpty)(__props.gap) ? {
+          "--gap": __props.gap
+        } : void 0,
         ref: "root-flex"
-      }, [renderSlot(_ctx.$slots, "default"), (openBlock(true), createElementBlock(Fragment, null, renderList(repairItemsRef.value, _ => {
+      }), [renderSlot(_ctx.$slots, "default"), (openBlock(true), createElementBlock(Fragment, null, renderList(repairItemsRef.value, _ => {
         return openBlock(), createBlock(resolveDynamicComponent(unref(correctString)(props.itemTag, "div", true)), {
           class: normalizeClass([props.itemClass || "", "repair-item"])
         }, null, 8, ["class"]);
-      }), 256))], 6);
+      }), 256))], 16);
     };
   }
 });
@@ -2910,12 +2925,7 @@ var _sfc_main$e = defineComponent({
   },
   __name: "scroll",
   props: {
-    scrollX: {
-      type: Boolean
-    },
-    scrollY: {
-      type: Boolean
-    },
+    scroll: {},
     barSize: {}
   },
   emits: ["xbar", "left", "right", "ybar", "top", "bottom"],
@@ -2933,32 +2943,26 @@ var _sfc_main$e = defineComponent({
     const {
       onInterval
     } = useTimer();
-    const styleRef = computed(() => {
-      const style = Object.create(null);
-      (props.scrollX || props.scrollY) && (style["--scroll-overflow"] = `${props.scrollX == true ? "auto" : "hidden"} ${props.scrollY == true ? "auto" : "hidden"}`);
-      if (props.barSize) {
-        switch (props.barSize) {
-          case "normal":
-            style["--scroll-bar-size"] = "10px";
-            break;
-          case "small":
-            style["--scroll-bar-size"] = "6px";
-            break;
-          case "mini":
-            style["--scroll-bar-size"] = "4px";
-            break;
-          case "none":
-            style["--scroll-bar-size"] = "0";
-            break;
-        }
-      }
-      return style;
-    });
     var preStatus = void 0;
     __expose({
       scroll,
       scrollTo
     });
+    function buildStyle() {
+      const style = Object.create(null);
+      switch (props.scroll) {
+        case "x":
+          style["overflow"] = "auto hidden";
+          break;
+        case "y":
+          style["overflow"] = "hidden auto";
+          break;
+        case "none":
+          style["overflow"] = "none";
+          break;
+      }
+      return style;
+    }
     function scroll(left, top) {
       left == void 0 || (rootDom.value.scrollLeft += left);
       top == void 0 || (rootDom.value.scrollTop += top);
@@ -3024,11 +3028,11 @@ var _sfc_main$e = defineComponent({
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: "snail-scroll",
+        class: normalizeClass(["snail-scroll", __props.barSize ? `${__props.barSize}-scrollbar` : ""]),
         ref: "scroll-root",
-        style: normalizeStyle(styleRef.value),
+        style: normalizeStyle(buildStyle()),
         onScroll: refreshScrollInfo
-      }, [renderSlot(_ctx.$slots, "default")], 36);
+      }, [renderSlot(_ctx.$slots, "default")], 38);
     };
   }
 });
@@ -3229,12 +3233,7 @@ var _sfc_main$b = defineComponent({
   },
   __name: "table",
   props: {
-    scrollX: {
-      type: Boolean
-    },
-    scrollY: {
-      type: Boolean
-    },
+    scroll: {},
     barSize: {},
     border: {
       type: Boolean
@@ -3251,8 +3250,8 @@ var _sfc_main$b = defineComponent({
         class: normalizeClass(["snail-table", {
           "start-border": __props.border == true
         }]),
-        "scroll-x": __props.scrollX,
-        "scroll-y": __props.scrollY
+        scroll: __props.scroll,
+        "bar-size": __props.barSize
       }, {
         default: withCtx(() => [createElementVNode("div", {
           class: "table-header",
@@ -3262,7 +3261,7 @@ var _sfc_main$b = defineComponent({
           style: normalizeStyle(fStyleRef.value)
         }, [renderSlot(_ctx.$slots, "footer")], 4)]),
         _: 3
-      }, 8, ["scroll-x", "scroll-y", "class"]);
+      }, 8, ["scroll", "bar-size", "class"]);
     };
   }
 });
@@ -3533,7 +3532,7 @@ var _sfc_main$7 = defineComponent({
       }, __props.search, {
         onSearch
       }), null, 16)) : createCommentVNode("", true), createVNode(_sfc_main$e, {
-        "scroll-y": true
+        scroll: "y"
       }, {
         default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.nodes || [], node => {
           return openBlock(), createBlock(_sfc_main$8, {
@@ -3589,8 +3588,7 @@ var _sfc_main$6 = defineComponent({
       }), null, 16)) : createCommentVNode("", true), createVNode(_sfc_main$e, mergeProps({
         class: "wrapper-body"
       }, __props.content || {
-        scrollX: false,
-        scrollY: false
+        scroll: "none"
       }), {
         default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
         _: 3