@nutui/nutui 3.0.2 → 3.1.2-3.beta-4

package/dist/packages/_es/Sticky.js

@@ -0,0 +1,144 @@
+/*!
+* @nutui/nutui v3.1.23.beta-4 Mon Jul 25 2022 22:38:45 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
+* Released under the MIT License.
+*/
+import { ref, reactive, computed, watch, onMounted, onUnmounted, h, unref } from "vue";
+import { c as createComponent } from "./component.js";
+import { u as useRect } from "./index2.js";
+import "../locale/lang";
+const { componentName, create } = createComponent("sticky");
+const _sfc_main = create({
+  props: {
+    position: {
+      type: String,
+      default: "top"
+    },
+    top: {
+      type: [Number, String],
+      default: 0
+    },
+    bottom: {
+      type: [Number, String],
+      default: 0
+    },
+    container: {
+      type: Object
+    },
+    zIndex: {
+      type: [Number, String],
+      default: 2e3
+    }
+  },
+  emits: ["change", "scroll"],
+  setup(props, { emit, slots }) {
+    const root = ref();
+    const state = reactive({
+      width: 0,
+      height: 0,
+      fixed: false,
+      transform: 0
+    });
+    const rootStyle = computed(() => {
+      const { fixed, width, height } = state;
+      if (fixed) {
+        return {
+          width: `${width}px`,
+          height: `${height}px`
+        };
+      }
+    });
+    const stickyStyle = computed(() => {
+      if (!state.fixed)
+        return;
+      const style = {
+        width: `${state.width}px`,
+        height: `${state.height}px`,
+        [props.position]: `${offset.value}px`,
+        zIndex: +props.zIndex
+      };
+      if (state.transform)
+        style.transform = `translate3d(0, ${state.transform}px, 0)`;
+      return style;
+    });
+    const offset = computed(() => {
+      return props.position === "top" ? props.top : props.bottom;
+    });
+    const isHidden = (elementRef) => {
+      const el = unref(elementRef);
+      if (!el)
+        return false;
+      const style = window.getComputedStyle(el);
+      const hidden = style.display === "none";
+      const parentHidden = el.offsetParent === null && style.position !== "fixed";
+      return hidden || parentHidden;
+    };
+    const isExistRoot = () => {
+      if (!root.value || isHidden(root))
+        return false;
+      return true;
+    };
+    const getScrollTop = (el) => {
+      return Math.max(0, "scrollTop" in el ? el.scrollTop : el.pageYOffset);
+    };
+    const renderFixed = () => {
+      var _a;
+      return h("view", {
+        style: stickyStyle.value,
+        class: state.fixed ? `${componentName} nut-sticky--fixed` : componentName
+      }, (_a = slots.default) == null ? void 0 : _a.call(slots));
+    };
+    const onScroll = () => {
+      if (!isExistRoot())
+        return;
+      const { container, position } = props;
+      const scrollTop = getScrollTop(window);
+      const rootRect = useRect(root);
+      if (rootRect.width || rootRect.height) {
+        state.width = rootRect.width;
+        state.height = rootRect.height;
+      }
+      if (position === "top") {
+        if (container) {
+          const containerRect = useRect(container);
+          const diff = containerRect.bottom - +offset.value - state.height;
+          state.fixed = +offset.value > rootRect.top && containerRect.bottom > 0;
+          state.transform = diff < 0 ? diff : 0;
+        } else {
+          state.fixed = offset.value > rootRect.top;
+        }
+      } else if (position === "bottom") {
+        const clientHeight = document.documentElement.clientHeight;
+        if (container) {
+          const containerRect = useRect(container);
+          const diff = clientHeight - containerRect.top - +offset.value - state.height;
+          state.fixed = clientHeight - +offset.value < rootRect.bottom && clientHeight > containerRect.top;
+          state.transform = diff < 0 ? -diff : 0;
+        } else {
+          state.fixed = clientHeight - +offset.value < rootRect.bottom;
+        }
+      }
+      emit("scroll", {
+        top: scrollTop,
+        fixed: state.fixed
+      });
+    };
+    watch(() => state.fixed, (val) => {
+      emit("change", val);
+    });
+    onMounted(() => {
+      window.addEventListener("scroll", onScroll);
+      onScroll();
+    });
+    onUnmounted(() => {
+      window.removeEventListener("scroll", onScroll);
+    });
+    return () => {
+      return h("view", {
+        style: rootStyle.value,
+        ref: root
+      }, [renderFixed()]);
+    };
+  }
+});
+export { _sfc_main as default };

package/dist/packages/_es/SubSideNavBar.js

@@ -0,0 +1,87 @@
+/*!
+* @nutui/nutui v3.1.23.beta-4 Mon Jul 25 2022 22:38:45 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
+* Released under the MIT License.
+*/
+import { reactive, computed, onMounted, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, toDisplayString, createVNode, normalizeStyle, renderSlot } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import "../locale/lang";
+const { componentName, create } = createComponent("subsidenavbar");
+const _sfc_main = create({
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    ikey: {
+      type: [String, Number],
+      default: ""
+    },
+    open: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ["title-click"],
+  setup: (props, context) => {
+    const state = reactive({
+      direction: ""
+    });
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    const style = computed(() => {
+      return {
+        height: !state.direction ? "auto" : "0px"
+      };
+    });
+    const handleClick = () => {
+      context.emit("title-click");
+      state.direction = !state.direction ? "up" : "";
+    };
+    onMounted(() => {
+      state.direction = props.open ? "" : "up";
+    });
+    return {
+      ...toRefs(state),
+      classes,
+      style,
+      handleClick
+    };
+  }
+});
+const _hoisted_1 = ["ikey"];
+const _hoisted_2 = { class: "nut-subsidenavbar__title__text" };
+const _hoisted_3 = { class: "nut-subsidenavbar__title__icon" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_icon = resolveComponent("nut-icon");
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes),
+    ikey: _ctx.ikey
+  }, [
+    createElementVNode("view", {
+      class: "nut-subsidenavbar__title",
+      onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.handleClick && _ctx.handleClick(...args), ["stop"]))
+    }, [
+      createElementVNode("span", _hoisted_2, toDisplayString(_ctx.title), 1),
+      createElementVNode("span", _hoisted_3, [
+        createVNode(_component_nut_icon, {
+          name: "down-arrow",
+          class: normalizeClass(_ctx.direction)
+        }, null, 8, ["class"])
+      ])
+    ]),
+    createElementVNode("view", {
+      class: normalizeClass(["nut-subsidenavbar__list", !_ctx.direction ? "nutFadeIn" : "nutFadeOut"]),
+      style: normalizeStyle(_ctx.style)
+    }, [
+      renderSlot(_ctx.$slots, "default")
+    ], 6)
+  ], 10, _hoisted_1);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/Swipe.js

@@ -0,0 +1,188 @@
+/*!
+* @nutui/nutui v3.1.23.beta-4 Mon Jul 25 2022 22:38:45 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
+* Released under the MIT License.
+*/
+import { u as useTouch } from "./index4.js";
+import { computed, ref, reactive, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import "../locale/lang";
+const { componentName, create } = createComponent("swipe");
+const _sfc_main = create({
+  props: {
+    name: {
+      type: String,
+      default: ""
+    },
+    touchMoveStopPropagation: {
+      type: Boolean,
+      default: false
+    },
+    touchMovePreventDefault: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["open", "close"],
+  setup(props, { emit }) {
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    const getRefWidth = (ref2) => {
+      var _a;
+      return ((_a = ref2.value) == null ? void 0 : _a.clientWidth) || 0;
+    };
+    const leftRef = ref(), leftRefWidth = computed(() => {
+      return getRefWidth(leftRef);
+    });
+    const rightRef = ref(), rightRefWidth = computed(() => {
+      return getRefWidth(rightRef);
+    });
+    let opened = false;
+    let position = "";
+    let oldPosition = "";
+    const state = reactive({
+      offset: 0,
+      moving: false
+    });
+    const open = (p = "") => {
+      opened = true;
+      if (p) {
+        state.offset = p === "left" ? -rightRefWidth.value : leftRefWidth.value;
+      }
+      emit("open", {
+        name: props.name,
+        position: position || p
+      });
+    };
+    const close = () => {
+      state.offset = 0;
+      opened = false;
+      emit("close", {
+        name: props.name,
+        position
+      });
+    };
+    const touchStyle = computed(() => {
+      return {
+        transform: `translate3d(${state.offset}px, 0, 0)`
+      };
+    });
+    const setoffset = (deltaX) => {
+      position = deltaX > 0 ? "right" : "left";
+      let offset = deltaX;
+      switch (position) {
+        case "left":
+          if (opened && oldPosition === position) {
+            offset = -rightRefWidth.value;
+          } else {
+            offset = Math.abs(deltaX) > rightRefWidth.value ? -rightRefWidth.value : deltaX;
+          }
+          break;
+        case "right":
+          if (opened && oldPosition === position) {
+            offset = leftRefWidth.value;
+          } else {
+            offset = Math.abs(deltaX) > leftRefWidth.value ? leftRefWidth.value : deltaX;
+          }
+          break;
+      }
+      state.offset = offset;
+    };
+    const touch = useTouch();
+    const touchMethods = {
+      onTouchStart(event) {
+        if (props.disabled)
+          return;
+        touch.start(event);
+      },
+      onTouchMove(event) {
+        if (props.disabled)
+          return;
+        touch.move(event);
+        if (touch.isHorizontal()) {
+          state.moving = true;
+          setoffset(touch.deltaX.value);
+          if (props.touchMovePreventDefault) {
+            event.preventDefault();
+          }
+          if (props.touchMoveStopPropagation) {
+            event.stopPropagation();
+          }
+        }
+      },
+      onTouchEnd() {
+        if (state.moving) {
+          state.moving = false;
+          oldPosition = position;
+          switch (position) {
+            case "left":
+              if (Math.abs(state.offset) <= rightRefWidth.value / 2) {
+                close();
+              } else {
+                state.offset = -rightRefWidth.value;
+                open();
+              }
+              break;
+            case "right":
+              if (Math.abs(state.offset) <= leftRefWidth.value / 2) {
+                close();
+              } else {
+                state.offset = leftRefWidth.value;
+                open();
+              }
+              break;
+          }
+        }
+      }
+    };
+    return {
+      classes,
+      touchStyle,
+      ...touchMethods,
+      leftRef,
+      rightRef,
+      open,
+      close
+    };
+  }
+});
+const _hoisted_1 = {
+  class: "nut-swipe__left",
+  ref: "leftRef"
+};
+const _hoisted_2 = { class: "nut-swipe__content" };
+const _hoisted_3 = {
+  class: "nut-swipe__right",
+  ref: "rightRef"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes),
+    style: normalizeStyle(_ctx.touchStyle),
+    onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.onTouchStart && _ctx.onTouchStart(...args)),
+    onTouchmove: _cache[1] || (_cache[1] = (...args) => _ctx.onTouchMove && _ctx.onTouchMove(...args)),
+    onTouchend: _cache[2] || (_cache[2] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args)),
+    onTouchcancel: _cache[3] || (_cache[3] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args))
+  }, [
+    createElementVNode("view", _hoisted_1, [
+      renderSlot(_ctx.$slots, "left")
+    ], 512),
+    createElementVNode("view", _hoisted_2, [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    createElementVNode("view", _hoisted_3, [
+      renderSlot(_ctx.$slots, "right")
+    ], 512)
+  ], 38);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };