@nutui/nutui 3.1.22 → 3.1.23-beta.0

package/dist/packages/_es/Step.js

@@ -1,25 +1,120 @@
 /*!
-* @nutui/nutui v3.1.22 Fri Jun 24 2022 18:11:16 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.0 Mon Jun 27 2022 17:55:50 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { getCurrentInstance as e, inject as t, reactive as n, computed as s, toRefs as o, resolveComponent as i, openBlock as l, createElementBlock as c, normalizeClass as r, createElementVNode as p, createBlock as a, Fragment as u, toDisplayString as d, createCommentVNode as m, renderSlot as v } from "vue";
-import { c as f } from "./component.js";
-import { _ as y } from "./plugin-vue_export-helper.js";
+import { getCurrentInstance, inject, reactive, computed, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createBlock, Fragment, toDisplayString, createCommentVNode, renderSlot } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
-const { create: k, componentName: w } = f("step"), g = k({ props: { title: { type: String, default: "" }, content: { type: String, default: "" }, icon: { type: String, default: null }, iconColor: { type: String, default: "" }, size: { type: [String, Number], default: "12px" } }, emits: ["click-step"], setup(i2, { emit: l2, slots: c2 }) {
-  const { proxy: r2 } = e(), p2 = t("parent");
-  p2.relation(r2);
-  const a2 = n({ dot: p2.props.progressDot }), u2 = s(() => p2.state.children.indexOf(r2) + 1), d2 = s(() => (() => {
-    const e2 = u2.value;
-    return e2 < +p2.props.current ? "finish" : e2 === +p2.props.current ? "process" : "wait";
-  })()), m2 = s(() => ({ [w]: true, [`${w}-${d2.value}`]: true }));
-  return { ...o(a2), index: u2, classes: m2, handleClickStep: () => {
-    p2.onEmit(u2.value);
-  } };
-} }), x = { class: "nut-step-head" }, S = p("view", { class: "nut-step-line" }, null, -1), h = { key: 2, class: "nut-step-inner" }, $ = { class: "nut-step-main" }, C = { class: "nut-step-title" }, z = { key: 0 }, j = { key: 0, class: "nut-step-content" }, H = ["innerHTML"];
-var L = y(g, [["render", function(e2, t2, n2, s2, o2, f2) {
-  const y2 = i("nut-icon");
-  return l(), c("view", { class: r(e2.classes), onClick: t2[0] || (t2[0] = (...t3) => e2.handleClickStep && e2.handleClickStep(...t3)) }, [p("view", x, [S, p("view", { class: r(["nut-step-icon", [e2.dot ? "" : e2.icon ? "is-icon" : "is-text"]]) }, [e2.icon ? (l(), a(y2, { key: 0, class: "nut-step-icon-inner", color: e2.iconColor, name: e2.icon, size: e2.size }, null, 8, ["color", "name", "size"])) : e2.dot ? (l(), c(u, { key: 1 }, [], 64)) : (l(), c("view", h, d(e2.index), 1))], 2)]), p("view", $, [p("view", C, [e2.$slots.title ? m("", true) : (l(), c("span", z, d(e2.title), 1)), v(e2.$slots, "title")]), e2.content || e2.$slots.content ? (l(), c("view", j, [e2.$slots.content ? m("", true) : (l(), c("span", { key: 0, innerHTML: e2.content }, null, 8, H)), v(e2.$slots, "content")])) : m("", true)])], 2);
-}]]);
-export { L as default };
+const { create, componentName } = createComponent("step");
+const _sfc_main = create({
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    content: {
+      type: String,
+      default: ""
+    },
+    icon: {
+      type: String,
+      default: null
+    },
+    iconColor: {
+      type: String,
+      default: ""
+    },
+    size: {
+      type: [String, Number],
+      default: "12px"
+    }
+  },
+  emits: ["click-step"],
+  setup(props, { emit, slots }) {
+    const { proxy } = getCurrentInstance();
+    const parent = inject("parent");
+    parent["relation"](proxy);
+    const state = reactive({
+      dot: parent.props.progressDot
+    });
+    const index2 = computed(() => parent.state.children.indexOf(proxy) + 1);
+    const getCurrentStatus = () => {
+      const activeIndex = index2.value;
+      if (activeIndex < +parent.props.current)
+        return "finish";
+      return activeIndex === +parent.props.current ? "process" : "wait";
+    };
+    const status = computed(() => {
+      return getCurrentStatus();
+    });
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        [`${prefixCls}-${status.value}`]: true
+      };
+    });
+    const handleClickStep = () => {
+      parent["onEmit"](index2.value);
+    };
+    return {
+      ...toRefs(state),
+      index: index2,
+      classes,
+      handleClickStep
+    };
+  }
+});
+const _hoisted_1 = { class: "nut-step-head" };
+const _hoisted_2 = /* @__PURE__ */ createElementVNode("view", { class: "nut-step-line" }, null, -1);
+const _hoisted_3 = {
+  key: 2,
+  class: "nut-step-inner"
+};
+const _hoisted_4 = { class: "nut-step-main" };
+const _hoisted_5 = { class: "nut-step-title" };
+const _hoisted_6 = { key: 0 };
+const _hoisted_7 = {
+  key: 0,
+  class: "nut-step-content"
+};
+const _hoisted_8 = ["innerHTML"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_icon = resolveComponent("nut-icon");
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes),
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClickStep && _ctx.handleClickStep(...args))
+  }, [
+    createElementVNode("view", _hoisted_1, [
+      _hoisted_2,
+      createElementVNode("view", {
+        class: normalizeClass(["nut-step-icon", [!_ctx.dot ? _ctx.icon ? "is-icon" : "is-text" : ""]])
+      }, [
+        _ctx.icon ? (openBlock(), createBlock(_component_nut_icon, {
+          key: 0,
+          class: "nut-step-icon-inner",
+          color: _ctx.iconColor,
+          name: _ctx.icon,
+          size: _ctx.size
+        }, null, 8, ["color", "name", "size"])) : _ctx.dot ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [], 64)) : (openBlock(), createElementBlock("view", _hoisted_3, toDisplayString(_ctx.index), 1))
+      ], 2)
+    ]),
+    createElementVNode("view", _hoisted_4, [
+      createElementVNode("view", _hoisted_5, [
+        !_ctx.$slots.title ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(_ctx.title), 1)) : createCommentVNode("", true),
+        renderSlot(_ctx.$slots, "title")
+      ]),
+      _ctx.content || _ctx.$slots.content ? (openBlock(), createElementBlock("view", _hoisted_7, [
+        !_ctx.$slots.content ? (openBlock(), createElementBlock("span", {
+          key: 0,
+          innerHTML: _ctx.content
+        }, null, 8, _hoisted_8)) : createCommentVNode("", true),
+        renderSlot(_ctx.$slots, "content")
+      ])) : createCommentVNode("", true)
+    ])
+  ], 2);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/Steps.js

@@ -1,23 +1,58 @@
 /*!
-* @nutui/nutui v3.1.22 Fri Jun 24 2022 18:11:16 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.0 Mon Jun 27 2022 17:55:50 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { reactive as t, computed as e, provide as o, h as r } from "vue";
-import { c as s } from "./component.js";
+import { reactive, computed, provide, h } from "vue";
+import { c as createComponent } from "./component.js";
 import "../locale/lang";
-const { create: n, componentName: p } = s("steps"), i = n({ props: { direction: { type: String, default: "horizontal" }, current: { type: [String, Number], default: "0" }, progressDot: { type: Boolean, default: false } }, emits: ["click-step"], setup(s2, { emit: n2, slots: i2 }) {
-  const a = t({ children: [] }), c = e(() => {
-    const t2 = p;
-    return { [t2]: true, [`${t2}-${s2.direction}`]: true, [`${t2}-dot`]: !!s2.progressDot };
-  });
-  return o("parent", { relation: (t2) => {
-    t2 && a.children.push(t2);
-  }, state: a, props: s2, onEmit: (t2) => {
-    n2("click-step", t2);
-  } }), () => {
-    var _a;
-    return r("view", { class: c.value }, (_a = i2.default) == null ? void 0 : _a.call(i2));
-  };
-} });
-export { i as default };
+const { create, componentName } = createComponent("steps");
+const _sfc_main = create({
+  props: {
+    direction: {
+      type: String,
+      default: "horizontal"
+    },
+    current: {
+      type: [String, Number],
+      default: "0"
+    },
+    progressDot: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["click-step"],
+  setup(props, { emit, slots }) {
+    const state = reactive({
+      children: []
+    });
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        [`${prefixCls}-${props.direction}`]: true,
+        [`${prefixCls}-dot`]: !!props.progressDot
+      };
+    });
+    const relation = (child) => {
+      child && state.children.push(child);
+    };
+    const onEmit = (index) => {
+      emit("click-step", index);
+    };
+    provide("parent", {
+      relation,
+      state,
+      props,
+      onEmit
+    });
+    return () => {
+      var _a;
+      return h("view", {
+        class: classes.value
+      }, (_a = slots.default) == null ? void 0 : _a.call(slots));
+    };
+  }
+});
+export { _sfc_main as default };

package/dist/packages/_es/Sticky.js

@@ -1,59 +1,144 @@
 /*!
-* @nutui/nutui v3.1.22 Fri Jun 24 2022 18:11:16 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.0 Mon Jun 27 2022 17:55:50 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { ref as t, reactive as e, computed as o, watch as i, onMounted as n, onUnmounted as r, h as s, unref as l } from "vue";
-import { c as a } from "./component.js";
-import { u as d } from "./index2.js";
+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: f, create: p } = a("sticky"), m = p({ 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(a2, { emit: p2, slots: m2 }) {
-  const u = t(), c = e({ width: 0, height: 0, fixed: false, transform: 0 }), h = o(() => {
-    const { fixed: t2, width: e2, height: o2 } = c;
-    if (t2)
-      return { width: `${e2}px`, height: `${o2}px` };
-  }), x = o(() => {
-    if (!c.fixed)
-      return;
-    const t2 = { width: `${c.width}px`, height: `${c.height}px`, [a2.position]: `${g.value}px`, zIndex: +a2.zIndex };
-    return c.transform && (t2.transform = `translate3d(0, ${c.transform}px, 0)`), t2;
-  }), g = o(() => a2.position === "top" ? a2.top : a2.bottom), w = () => !(!u.value || ((t2) => {
-    const e2 = l(t2);
-    if (!e2)
-      return false;
-    const o2 = window.getComputedStyle(e2), i2 = o2.display === "none", n2 = e2.offsetParent === null && o2.position !== "fixed";
-    return i2 || n2;
-  })(u)), v = () => {
-    if (!w())
-      return;
-    const { container: t2, position: e2 } = a2, o2 = (i2 = window, Math.max(0, "scrollTop" in i2 ? i2.scrollTop : i2.pageYOffset));
-    var i2;
-    const n2 = d(u);
-    if ((n2.width || n2.height) && (c.width = n2.width, c.height = n2.height), e2 === "top")
-      if (t2) {
-        const e3 = d(t2), o3 = e3.bottom - +g.value - c.height;
-        c.fixed = +g.value > n2.top && e3.bottom > 0, c.transform = o3 < 0 ? o3 : 0;
-      } else
-        c.fixed = g.value > n2.top;
-    else if (e2 === "bottom") {
-      const e3 = document.documentElement.clientHeight;
-      if (t2) {
-        const o3 = d(t2), i3 = e3 - o3.top - +g.value - c.height;
-        c.fixed = e3 - +g.value < n2.bottom && e3 > o3.top, c.transform = i3 < 0 ? -i3 : 0;
-      } else
-        c.fixed = e3 - +g.value < n2.bottom;
+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
     }
-    p2("scroll", { top: o2, fixed: c.fixed });
-  };
-  return i(() => c.fixed, (t2) => {
-    p2("change", t2);
-  }), n(() => {
-    window.addEventListener("scroll", v), v();
-  }), r(() => {
-    window.removeEventListener("scroll", v);
-  }), () => {
-    var _a;
-    return s("view", { style: h.value, ref: u }, [s("view", { style: x.value, class: c.fixed ? `${f} nut-sticky--fixed` : f }, (_a = m2.default) == null ? void 0 : _a.call(m2))]);
-  };
-} });
-export { m as default };
+  },
+  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

@@ -1,22 +1,87 @@
 /*!
-* @nutui/nutui v3.1.22 Fri Jun 24 2022 18:11:16 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.0 Mon Jun 27 2022 17:55:50 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { reactive as e, computed as t, onMounted as i, toRefs as n, resolveComponent as s, openBlock as a, createElementBlock as l, normalizeClass as o, createElementVNode as r, withModifiers as c, toDisplayString as u, createVNode as d, normalizeStyle as p, renderSlot as m } from "vue";
-import { c as _ } from "./component.js";
-import { _ as b } from "./plugin-vue_export-helper.js";
+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: v, create: k } = _("subsidenavbar"), y = k({ props: { title: { type: String, default: "" }, ikey: { type: [String, Number], default: "" }, open: { type: Boolean, default: true } }, emits: ["title-click"], setup: (s2, a2) => {
-  const l2 = e({ direction: "" }), o2 = t(() => ({ [v]: true })), r2 = t(() => ({ height: l2.direction ? "0px" : "auto" }));
-  return i(() => {
-    l2.direction = s2.open ? "" : "up";
-  }), { ...n(l2), classes: o2, style: r2, handleClick: () => {
-    a2.emit("title-click"), l2.direction = l2.direction ? "" : "up";
-  } };
-} }), f = ["ikey"], h = { class: "nut-subsidenavbar__title__text" }, g = { class: "nut-subsidenavbar__title__icon" };
-var w = b(y, [["render", function(e2, t2, i2, n2, _2, b2) {
-  const v2 = s("nut-icon");
-  return a(), l("view", { class: o(e2.classes), ikey: e2.ikey }, [r("view", { class: "nut-subsidenavbar__title", onClick: t2[0] || (t2[0] = c((...t3) => e2.handleClick && e2.handleClick(...t3), ["stop"])) }, [r("span", h, u(e2.title), 1), r("span", g, [d(v2, { name: "down-arrow", class: o(e2.direction) }, null, 8, ["class"])])]), r("view", { class: o(["nut-subsidenavbar__list", e2.direction ? "nutFadeOut" : "nutFadeIn"]), style: p(e2.style) }, [m(e2.$slots, "default")], 6)], 10, f);
-}]]);
-export { w as default };
+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 };