snail.vue 2.0.17 → 2.0.19

package/dist/snail.vue.umd.js

@@ -27,10 +27,6 @@
     }
   });
 
-  var addLink = href => setTimeout(snail_view.link.register, 0, href);
-
-  addLink("/styles/snail.vue.vue.css");
-
   function getBuiltinIcon(iconType) {
     switch (iconType) {
       case "success":
@@ -70,8 +66,8 @@
   }
 
   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 = vue.defineComponent({
     __name: "icon",
     props: {
@@ -127,22 +123,22 @@
           onMouseleave: _cache[1] || (_cache[1] = $event => isMouseEnterRef.value = false)
         }), [vue.createElementVNode("title", {
           textContent: vue.toDisplayString(__props.title || "")
-        }, null, 8, _hoisted_2$e), __props.custom == true ? vue.renderSlot(_ctx.$slots, "default", {
+        }, null, 8, _hoisted_2$d), __props.custom == true ? vue.renderSlot(_ctx.$slots, "default", {
           key: 0
         }) : (vue.openBlock(true), vue.createElementBlock(vue.Fragment, {
           key: 1
         }, vue.renderList(vue.unref(getBuiltinIcon)(__props.type), d => {
           return vue.openBlock(), vue.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 = vue.defineComponent({
     ...{
@@ -220,7 +216,7 @@
             key: 0,
             type: vue.unref(type),
             checked: node.selected
-          }, null, 8, _hoisted_2$d)) : vue.unref(mode) == "beautiful" ? (vue.openBlock(), vue.createElementBlock("div", {
+          }, null, 8, _hoisted_2$c)) : vue.unref(mode) == "beautiful" ? (vue.openBlock(), vue.createElementBlock("div", {
             key: 1,
             class: vue.normalizeClass(["status", [node.selected ? "selected" : ""]])
           }, [node.selected ? (vue.openBlock(), vue.createBlock(_sfc_main$C, {
@@ -232,7 +228,7 @@
             key: 2,
             class: "item-text",
             textContent: vue.toDisplayString(node.item.text)
-          }, null, 8, _hoisted_3$a)) : vue.createCommentVNode("", true), node.item.description ? (vue.openBlock(), vue.createElementBlock("span", {
+          }, null, 8, _hoisted_3$9)) : vue.createCommentVNode("", true), node.item.description ? (vue.openBlock(), vue.createElementBlock("span", {
             key: 3,
             class: "item-des",
             textContent: vue.toDisplayString(node.item.description)
@@ -290,6 +286,10 @@
     }
   });
 
+  var addLink = href => setTimeout(snail_view.link.register, 0, href);
+
+  addLink("/styles/snail.vue.vue.css");
+
   const _hoisted_1$k = ["textContent"];
   var _sfc_main$z = vue.defineComponent({
     ...{
@@ -344,12 +344,12 @@
   });
 
   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"];
@@ -406,7 +406,7 @@
         }, [vue.createElementVNode("span", {
           class: "text",
           textContent: vue.toDisplayString(__props.title)
-        }, null, 8, _hoisted_1$j), __props.readonly != true && __props.required == true ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$c)) : vue.createCommentVNode("", true)], 4)) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_3$9, [vue.createElementVNode("input", {
+        }, null, 8, _hoisted_1$j), __props.readonly != true && __props.required == true ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$b)) : vue.createCommentVNode("", true)], 4)) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_3$8, [vue.createElementVNode("input", {
           ref: "input-el",
           type: __props.type || "text",
           value: inputModel.value,
@@ -633,8 +633,8 @@
     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"
@@ -792,7 +792,7 @@
         }, [vue.unref(hasPrefix) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$i, [vue.createElementVNode("span", {
           class: "ellipsis",
           textContent: vue.toDisplayString(vue.unref(prefix))
-        }, null, 8, _hoisted_2$b)])) : vue.createCommentVNode("", true), vue.createElementVNode("div", {
+        }, null, 8, _hoisted_2$a)])) : vue.createCommentVNode("", true), vue.createElementVNode("div", {
           class: vue.normalizeClass(["input-panel", vue.unref(controls)])
         }, [vue.withDirectives(vue.createElementVNode("input", {
           type: "text",
@@ -804,7 +804,7 @@
           onFocus: _cache[1] || (_cache[1] = $event => vue.isRef(needBackSection) ? needBackSection.value = true : needBackSection = true),
           onPaste: _cache[2] || (_cache[2] = $event => vue.isRef(needBackSection) ? needBackSection.value = false : needBackSection = false),
           onBlur: _cache[3] || (_cache[3] = $event => formatOnEnd(true))
-        }, null, 40, _hoisted_3$8), [[vue.vModelText, displayValueRef.value]]), vue.unref(controls) == "default" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+        }, null, 40, _hoisted_3$7), [[vue.vModelText, displayValueRef.value]]), vue.unref(controls) == "default" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
           key: 0
         }, [vue.createElementVNode("div", {
           class: "controls default subtract",
@@ -1132,7 +1132,7 @@
   const _hoisted_1$g = {
     class: "snail-confirm flex-column"
   };
-  const _hoisted_2$a = ["innerHTML"];
+  const _hoisted_2$9 = ["innerHTML"];
   var _sfc_main$v = vue.defineComponent({
     ...{
       name: "ConfirmContainer",
@@ -1168,7 +1168,7 @@
         }, null, 8, ["title"]), vue.createElementVNode("div", {
           class: "confirm-body",
           innerHTML: __props.message || "请确认？"
-        }, null, 8, _hoisted_2$a), vue.createVNode(_sfc_main$A, {
+        }, null, 8, _hoisted_2$9), vue.createVNode(_sfc_main$A, {
           align: "right",
           "cancel-name": __props.cancelName,
           "cancel-disabled": __props.cancelDisabled,
@@ -1648,7 +1648,7 @@
     key: 1,
     class: "icon"
   };
-  const _hoisted_2$9 = ["innerHTML"];
+  const _hoisted_2$8 = ["innerHTML"];
   var _sfc_main$o = vue.defineComponent({
     ...{
       name: "ToastContainer",
@@ -1704,7 +1704,7 @@
         }, null, 8, ["type"])])) : vue.createCommentVNode("", true), vue.createElementVNode("div", {
           class: "message",
           innerHTML: vue.unref(props).message
-        }, null, 8, _hoisted_2$9)], 38);
+        }, null, 8, _hoisted_2$8)], 38);
       };
     }
   });
@@ -1950,8 +1950,8 @@
   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 = vue.defineComponent({
     ...{
       name: "Empty",
@@ -1967,17 +1967,17 @@
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [vue.createElementVNode("img", {
           src: __props.imageUrl || vue.unref(defaultImageBase64)
-        }, null, 8, _hoisted_2$8), vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createElementVNode("div", {
+        }, null, 8, _hoisted_2$7), vue.renderSlot(_ctx.$slots, "default", {}, () => [vue.createElementVNode("div", {
           class: "message",
           textContent: vue.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"
   };
@@ -2026,10 +2026,10 @@
         }, [vue.createElementVNode("div", {
           class: "item-text ellipsis",
           textContent: vue.toDisplayString(__props.item.text)
-        }, null, 8, _hoisted_2$7), __props.item.type == "group" ? (vue.openBlock(), vue.createBlock(_sfc_main$C, {
+        }, null, 8, _hoisted_2$6), __props.item.type == "group" ? (vue.openBlock(), vue.createBlock(_sfc_main$C, {
           key: 0,
           type: "arrow"
-        })) : __props.multiple == true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$6, [vue.createVNode(_sfc_main$C, {
+        })) : __props.multiple == true ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$5, [vue.createVNode(_sfc_main$C, {
           type: "success",
           button: "",
           size: 12,
@@ -2254,8 +2254,8 @@
     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"
@@ -2399,11 +2399,11 @@
           class: "select-text ellipsis",
           title: selectedTextRef.value,
           textContent: vue.toDisplayString(selectedTextRef.value)
-        }, null, 8, _hoisted_2$6)])])) : (vue.openBlock(), vue.createElementBlock("div", {
+        }, null, 8, _hoisted_2$5)])])) : (vue.openBlock(), vue.createElementBlock("div", {
           key: 1,
           class: "placeholder",
           textContent: vue.toDisplayString(__props.readonly ? "" : __props.placeholder || "请选择")
-        }, null, 8, _hoisted_3$5)), __props.readonly != true ? (vue.openBlock(), vue.createBlock(_sfc_main$C, {
+        }, null, 8, _hoisted_3$4)), __props.readonly != true ? (vue.openBlock(), vue.createBlock(_sfc_main$C, {
           key: 2,
           type: "arrow",
           button: "",
@@ -2466,7 +2466,8 @@
   const _hoisted_1$b = ["readonly", "placeholder", "rows"];
   var _sfc_main$i = vue.defineComponent({
     ...{
-      name: "Textarea"
+      name: "Textarea",
+      inheritAttrs: true
     },
     __name: "textarea",
     props: vue.mergeModels({
@@ -2512,10 +2513,9 @@
       }
       props.autoHeight == true && vue.onMounted(calcRows);
       return (_ctx, _cache) => {
-        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("textarea", vue.mergeProps({
+        return vue.withDirectives((vue.openBlock(), vue.createElementBlock("textarea", {
           class: "snail-textarea",
-          ref: "textarea"
-        }, _ctx.$attrs, {
+          ref: "textarea",
           readonly: __props.readonly,
           placeholder: __props.placeholder,
           rows: rowsRef.value,
@@ -2524,90 +2524,77 @@
           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)), [[vue.vModelText, valueModel.value]]);
+        }, null, 40, _hoisted_1$b)), [[vue.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 = vue.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
       } = snail_view.useObserver();
-      const rootDom = vue.useTemplateRef("root-dom");
-      const scrollStyleRef = vue.computed(buildScrollStyle);
-      vue.ref(void 0);
-      const springStyleRef = vue.computed(buildSpringStyle);
+      const {
+        watcher
+      } = useReactive();
+      const downRefreshDom = vue.useTemplateRef("down-refresh");
+      const mainBodyDom = vue.useTemplateRef("main-body");
+      const upMoreDom = vue.useTemplateRef("up-more");
+      let isStartByTouch = false;
+      const startPointerRef = vue.ref(void 0);
+      const isMovingRef = vue.shallowRef(false);
+      const springStatusRef = vue.ref(Object.create(null));
       const springXRef = vue.computed(() => props.spring == "x" || props.spring == "both");
       const springYRef = vue.computed(() => props.spring == "y" || props.spring == "both");
-      const downRefreshRef = vue.computed(() => springYRef.value == true && props.downRefresh == true);
-      const upMoreRef = vue.computed(() => springYRef.value == true && props.upMore == true);
-      const isMovingRef = vue.ref(false);
-      const springStatusRef = vue.ref(void 0);
-      const startPointerRef = vue.ref(void 0);
-      let isStartByTouch = false;
-      function buildScrollStyle() {
-        const vars = Object.create(null);
+      const loadingRef = vue.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,
@@ -2616,18 +2603,19 @@
           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
@@ -2635,73 +2623,119 @@
         }
       }
       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;
       }
       vue.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 vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(["snail-elastic", {
-            "spring": springXRef.value || springYRef.value,
-            "moving": isMovingRef.value
+        return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [springYRef.value == true && __props.downRefresh == true ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+          key: 0,
+          class: vue.normalizeClass(["down-refresh", {
+            "running": loadingRef.value == "refresh"
           }]),
-          style: vue.normalizeStyle([scrollStyleRef.value, springStyleRef.value]),
-          ref: "root-dom"
-        }, [downRefreshRef.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$a, [vue.renderSlot(_ctx.$slots, "down-refresh", {}, () => [_cache[0] || (_cache[0] = vue.createTextVNode(" 默认实现[下拉刷新] ", -1))])])) : vue.createCommentVNode("", true), vue.createElementVNode("div", _hoisted_2$5, [vue.renderSlot(_ctx.$slots, "default")]), upMoreRef.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3$4, [vue.renderSlot(_ctx.$slots, "up-more", {}, () => [_cache[1] || (_cache[1] = vue.createTextVNode(" 默认实现[上拉加载更多] ", -1))])])) : vue.createCommentVNode("", true)], 6);
+          ref: "down-refresh"
+        }, [vue.renderSlot(_ctx.$slots, "down-refresh", {}, () => [_cache[0] || (_cache[0] = vue.createElementVNode("div", {
+          class: "flex-center default-loading"
+        }, [vue.createElementVNode("span"), vue.createElementVNode("span"), vue.createElementVNode("span")], -1))])], 2)), [[vue.vShow, loadingRef.value != "more"]]) : vue.createCommentVNode("", true), vue.createElementVNode("div", {
+          class: vue.normalizeClass(["main-body wh-fill", [__props.barSize ? `${__props.barSize}-scrollbar` : "", isMovingRef.value ? "moving" : ""]]),
+          ref: "main-body",
+          key: "main-body",
+          style: vue.normalizeStyle(buildMainBodyStyle())
+        }, [vue.renderSlot(_ctx.$slots, "default")], 6), springYRef.value == true && __props.upMore == true ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
+          key: 1,
+          class: vue.normalizeClass(["up-more", {
+            "running": loadingRef.value == "more"
+          }]),
+          ref: "up-more"
+        }, [vue.renderSlot(_ctx.$slots, "up-more", {}, () => [_cache[1] || (_cache[1] = vue.createElementVNode("div", {
+          class: "flex-center default-loading"
+        }, [vue.createElementVNode("span"), vue.createElementVNode("span"), vue.createElementVNode("span")], -1))])], 2)), [[vue.vShow, loadingRef.value != "refresh"]]) : vue.createCommentVNode("", true)]);
       };
     }
   });
 
   var _sfc_main$g = vue.defineComponent({
+    ...{
+      name: "Flex",
+      inheritAttrs: false
+    },
     __name: "flex",
     props: {
       direction: {},
       wrap: {},
       gap: {},
-      justifyContent: {},
-      alignItems: {},
-      alignContent: {},
+      main: {},
+      cross: {},
+      content: {},
       repairItem: {
         type: Boolean
       },
@@ -2718,40 +2752,22 @@
       const {
         watcher
       } = useReactive();
-      const styleRef = vue.computed(buildStyleVar);
+      const classRef = vue.computed(buildClass);
       const repairItemsRef = vue.shallowRef(0);
-      function isColumnDirection(direction) {
-        switch (direction) {
-          case "column":
-          case "column-reverse":
-            return true;
-          default:
-            return false;
-        }
-      }
-      function buildStyleVar() {
-        const styleVar = Object.create(null);
-        snail_core.isStringNotEmpty(props.direction) && (styleVar["flex-direction"] = props.direction);
-        snail_core.isStringNotEmpty(props.wrap) && (styleVar["flex-wrap"] = props.wrap);
-        snail_core.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;
-          }
-        };
-        snail_core.isStringNotEmpty(props.justifyContent) && (styleVar["justify-content"] = tmpFunc(props.justifyContent));
-        snail_core.isStringNotEmpty(props.alignItems) && (styleVar["align-items"] = tmpFunc(props.alignItems));
-        snail_core.isStringNotEmpty(props.alignContent) && (styleVar["align-content"] = tmpFunc(props.alignContent));
-        return styleVar;
+      function buildClass() {
+        const items = [];
+        let direction = props.direction;
+        props.repairItem == true && snail_core.isStringNotEmpty(direction) == false && (direction = "row");
+        direction && items.push(direction);
+        props.wrap && items.push(props.wrap);
+        snail_core.isStringNotEmpty(props.main) && items.push(`justify-${props.main}`);
+        snail_core.isStringNotEmpty(props.cross) && items.push(`items-${props.cross}`);
+        snail_core.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);
@@ -2773,8 +2789,7 @@
                 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);
@@ -2788,17 +2803,17 @@
         onSize(rootDom.value, repairSpace);
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("div", {
-          class: vue.normalizeClass(["snail-flex", {
-            "column": isColumnDirection(props.direction)
-          }]),
-          style: vue.normalizeStyle(styleRef.value),
+        return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps(_ctx.$attrs, {
+          class: ["snail-flex", classRef.value],
+          style: vue.unref(snail_core.isStringNotEmpty)(__props.gap) ? {
+            "--gap": __props.gap
+          } : void 0,
           ref: "root-flex"
-        }, [vue.renderSlot(_ctx.$slots, "default"), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(repairItemsRef.value, _ => {
+        }), [vue.renderSlot(_ctx.$slots, "default"), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(repairItemsRef.value, _ => {
           return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(snail_core.correctString)(props.itemTag, "div", true)), {
             class: vue.normalizeClass([props.itemClass || "", "repair-item"])
           }, null, 8, ["class"]);
-        }), 256))], 6);
+        }), 256))], 16);
       };
     }
   });
@@ -2912,12 +2927,7 @@
     },
     __name: "scroll",
     props: {
-      scrollX: {
-        type: Boolean
-      },
-      scrollY: {
-        type: Boolean
-      },
+      scroll: {},
       barSize: {}
     },
     emits: ["xbar", "left", "right", "ybar", "top", "bottom"],
@@ -2935,32 +2945,26 @@
       const {
         onInterval
       } = snail_core.useTimer();
-      const styleRef = vue.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);
@@ -3026,11 +3030,11 @@
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
-          class: "snail-scroll",
+          class: vue.normalizeClass(["snail-scroll", __props.barSize ? `${__props.barSize}-scrollbar` : ""]),
           ref: "scroll-root",
-          style: vue.normalizeStyle(styleRef.value),
+          style: vue.normalizeStyle(buildStyle()),
           onScroll: refreshScrollInfo
-        }, [vue.renderSlot(_ctx.$slots, "default")], 36);
+        }, [vue.renderSlot(_ctx.$slots, "default")], 38);
       };
     }
   });
@@ -3231,12 +3235,7 @@
     },
     __name: "table",
     props: {
-      scrollX: {
-        type: Boolean
-      },
-      scrollY: {
-        type: Boolean
-      },
+      scroll: {},
       barSize: {},
       border: {
         type: Boolean
@@ -3253,8 +3252,8 @@
           class: vue.normalizeClass(["snail-table", {
             "start-border": __props.border == true
           }]),
-          "scroll-x": __props.scrollX,
-          "scroll-y": __props.scrollY
+          scroll: __props.scroll,
+          "bar-size": __props.barSize
         }, {
           default: vue.withCtx(() => [vue.createElementVNode("div", {
             class: "table-header",
@@ -3264,7 +3263,7 @@
             style: vue.normalizeStyle(fStyleRef.value)
           }, [vue.renderSlot(_ctx.$slots, "footer")], 4)]),
           _: 3
-        }, 8, ["scroll-x", "scroll-y", "class"]);
+        }, 8, ["scroll", "bar-size", "class"]);
       };
     }
   });
@@ -3535,7 +3534,7 @@
         }, __props.search, {
           onSearch
         }), null, 16)) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$e, {
-          "scroll-y": true
+          scroll: "y"
         }, {
           default: vue.withCtx(() => [(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.nodes || [], node => {
             return vue.openBlock(), vue.createBlock(_sfc_main$8, {
@@ -3591,8 +3590,7 @@
         }), null, 16)) : vue.createCommentVNode("", true), vue.createVNode(_sfc_main$e, vue.mergeProps({
           class: "wrapper-body"
         }, __props.content || {
-          scrollX: false,
-          scrollY: false
+          scroll: "none"
         }), {
           default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
           _: 3