@nutui/nutui 4.0.12-beta.1 → 4.0.12

package/dist/packages/_es/Elevator.js

@@ -1,21 +1,29 @@
-var V = Object.defineProperty, j = Object.defineProperties;
-var q = Object.getOwnPropertyDescriptors;
-var w = Object.getOwnPropertySymbols;
-var x = Object.prototype.hasOwnProperty, J = Object.prototype.propertyIsEnumerable;
-var K = (e, r, n) => r in e ? V(e, r, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[r] = n, C = (e, r) => {
-  for (var n in r || (r = {}))
-    x.call(r, n) && K(e, n, r[n]);
-  if (w)
-    for (var n of w(r))
-      J.call(r, n) && K(e, n, r[n]);
-  return e;
-}, L = (e, r) => j(e, q(r));
-import { ref as O, reactive as P, computed as v, onMounted as Q, watch as m, nextTick as Y, toRefs as U, openBlock as a, createElementBlock as c, normalizeClass as k, createElementVNode as h, normalizeStyle as $, Fragment as S, renderList as H, toDisplayString as f, renderSlot as W, withDirectives as E, vShow as G, createCommentVNode as M, withModifiers as X } from "vue";
-import { c as Z } from "./component-234624bc.js";
-import { u as ee } from "./index-fadb0974.js";
-import { _ as te } from "./_plugin-vue_export-helper-dad06003.js";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { ref, reactive, computed, onMounted, watch, nextTick, toRefs, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, Fragment, renderList, toDisplayString, renderSlot, withDirectives, vShow, createCommentVNode, withModifiers } from "vue";
+import { c as createComponent } from "./component-81a4c1d0.js";
+import { u as useExpose } from "./index-79c5dc33.js";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
 import "../locale/lang";
-const { componentName: le, create: re } = Z("elevator"), ie = re({
+const { componentName, create } = createComponent("elevator");
+const _sfc_main = create({
   props: {
     height: {
       type: [Number, String],
@@ -27,11 +35,13 @@ const { componentName: le, create: re } = Z("elevator"), ie = re({
     },
     indexList: {
       type: Array,
-      default: () => []
+      default: () => {
+        return [];
+      }
     },
     isSticky: {
       type: [Boolean],
-      default: !1
+      default: false
     },
     spaceHeight: {
       type: [Number],
@@ -43,8 +53,9 @@ const { componentName: le, create: re } = Z("elevator"), ie = re({
     }
   },
   emits: ["click-item", "click-index", "change"],
-  setup(e, r) {
-    const n = O(null), t = P({
+  setup(props, context) {
+    const listview = ref(null);
+    const state = reactive({
       anchorIndex: 0,
       codeIndex: 0,
       listHeight: [],
@@ -53,163 +64,228 @@ const { componentName: le, create: re } = Z("elevator"), ie = re({
         y1: 0,
         y2: 0
       },
-      scrollStart: !1,
+      scrollStart: false,
       currentIndex: 0,
       currentData: {},
       currentKey: "",
       scrollY: 0,
       diff: -1,
       fixedTop: 0
-    }), I = v(() => ({
-      [le]: !0
-    })), _ = v(() => ({
-      transform: `translate3d(0, ${t.scrollY + t.fixedTop}px, 0)`
-    })), i = v(() => n.value.clientHeight), u = (l, o) => {
-      const s = "data-";
-      return l.getAttribute(s + o);
-    }, g = (l) => {
-      Y(() => {
-        !t.listGroup.includes(l) && l != null && t.listGroup.push(l);
+    });
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    const fixedStyle = computed(() => {
+      return {
+        transform: `translate3d(0, ${state.scrollY + state.fixedTop}px, 0)`
+      };
+    });
+    const clientHeight = computed(() => {
+      return listview.value.clientHeight;
+    });
+    const getData = (el, name) => {
+      const prefix = "data-";
+      return el.getAttribute(prefix + name);
+    };
+    const setListGroup = (el) => {
+      nextTick(() => {
+        if (!state.listGroup.includes(el) && el != null) {
+          state.listGroup.push(el);
+        }
       });
-    }, N = () => {
-      let l = 0;
-      t.listHeight.push(l);
-      for (let o = 0; o < t.listGroup.length; o++) {
-        let s = t.listGroup[o];
-        l += Math.floor(s.clientHeight), t.listHeight.push(l);
+    };
+    const calculateHeight = () => {
+      let height = 0;
+      state.listHeight.push(height);
+      for (let i = 0; i < state.listGroup.length; i++) {
+        let item = state.listGroup[i];
+        height += Math.floor(item.clientHeight);
+        state.listHeight.push(height);
+      }
+    };
+    const scrollTo = (index) => {
+      if (!index && index !== 0) {
+        return;
       }
-    }, y = (l) => {
-      !l && l !== 0 || (l < 0 && (l = 0), l > t.listHeight.length - 2 && (l = t.listHeight.length - 2), t.codeIndex = l, n.value.scrollTo(0, t.listHeight[l]));
-    }, D = (l) => {
-      t.scrollStart = !0;
-      let o = u(l.target, "index"), s = l.touches[0];
-      t.touchState.y1 = s.pageY, t.anchorIndex = +o, t.codeIndex = +o, y(+o);
-    }, b = (l) => {
-      let o = l.touches[0];
-      t.touchState.y2 = o.pageY;
-      let s = (t.touchState.y2 - t.touchState.y1) / e.spaceHeight | 0;
-      t.codeIndex = t.anchorIndex + s, y(t.codeIndex);
-    }, B = () => {
-      t.scrollStart = !1;
-    }, z = (l, o) => {
-      r.emit("click-item", l, o), t.currentData = o, t.currentKey = l;
-    }, A = (l) => {
-      r.emit("click-index", l);
-    }, F = (l) => {
-      let s = l.target.scrollTop;
-      const p = t.listHeight;
-      t.scrollY = s;
-      for (let d = 0; d < p.length - 1; d++) {
-        let R = p[d], T = p[d + 1];
-        if (t.scrollY >= R && t.scrollY < T) {
-          t.currentIndex = d, t.diff = T - t.scrollY;
+      if (index < 0)
+        index = 0;
+      if (index > state.listHeight.length - 2)
+        index = state.listHeight.length - 2;
+      state.codeIndex = index;
+      listview.value.scrollTo(0, state.listHeight[index]);
+    };
+    const touchStart = (e) => {
+      state.scrollStart = true;
+      let index = getData(e.target, "index");
+      let firstTouch = e.touches[0];
+      state.touchState.y1 = firstTouch.pageY;
+      state.anchorIndex = +index;
+      state.codeIndex = +index;
+      scrollTo(+index);
+    };
+    const touchMove = (e) => {
+      let firstTouch = e.touches[0];
+      state.touchState.y2 = firstTouch.pageY;
+      let delta = (state.touchState.y2 - state.touchState.y1) / props.spaceHeight | 0;
+      state.codeIndex = state.anchorIndex + delta;
+      scrollTo(state.codeIndex);
+    };
+    const touchEnd = () => {
+      state.scrollStart = false;
+    };
+    const handleClickItem = (key, item) => {
+      context.emit("click-item", key, item);
+      state.currentData = item;
+      state.currentKey = key;
+    };
+    const handleClickIndex = (key) => {
+      context.emit("click-index", key);
+    };
+    const listViewScroll = (e) => {
+      let target = e.target;
+      let scrollTop = target.scrollTop;
+      const listHeight = state.listHeight;
+      state.scrollY = scrollTop;
+      for (let i = 0; i < listHeight.length - 1; i++) {
+        let height1 = listHeight[i];
+        let height2 = listHeight[i + 1];
+        if (state.scrollY >= height1 && state.scrollY < height2) {
+          state.currentIndex = i;
+          state.diff = height2 - state.scrollY;
           return;
         }
       }
-      t.currentIndex = p.length - 2;
+      state.currentIndex = listHeight.length - 2;
     };
-    return Q(() => {
-      n.value.addEventListener("scroll", F);
-    }), ee({
-      scrollTo: y
-    }), m(
-      () => t.listGroup.length,
+    onMounted(() => {
+      listview.value.addEventListener("scroll", listViewScroll);
+    });
+    useExpose({
+      scrollTo
+    });
+    watch(
+      () => state.listGroup.length,
       () => {
-        t.listHeight = [], Y(N);
+        state.listHeight = [];
+        nextTick(calculateHeight);
       }
-    ), m(
-      () => t.diff,
-      (l) => {
-        const o = t.listHeight;
-        let s = l > 0 && l < e.titleHeight ? l - e.titleHeight : 0;
-        t.scrollY + i.value === o[o.length - 1] && s !== 0 && (s = 0), t.fixedTop !== s && (t.fixedTop = s);
+    );
+    watch(
+      () => state.diff,
+      (newVal) => {
+        const listHeight = state.listHeight;
+        let fixedTop = newVal > 0 && newVal < props.titleHeight ? newVal - props.titleHeight : 0;
+        if (state.scrollY + clientHeight.value === listHeight[listHeight.length - 1]) {
+          if (fixedTop !== 0)
+            fixedTop = 0;
+        }
+        if (state.fixedTop === fixedTop)
+          return;
+        state.fixedTop = fixedTop;
       }
-    ), m(
-      () => t.currentIndex,
-      (l) => {
-        r.emit("change", l);
+    );
+    watch(
+      () => state.currentIndex,
+      (newVal) => {
+        context.emit("change", newVal);
       }
-    ), L(C({
-      classes: I
-    }, U(t)), {
-      fixedStyle: _,
-      clientHeight: i,
-      setListGroup: g,
-      listview: n,
-      touchStart: D,
-      touchMove: b,
-      touchEnd: B,
-      handleClickItem: z,
-      handleClickIndex: A
+    );
+    return __spreadProps(__spreadValues({
+      classes
+    }, toRefs(state)), {
+      fixedStyle,
+      clientHeight,
+      setListGroup,
+      listview,
+      touchStart,
+      touchMove,
+      touchEnd,
+      handleClickItem,
+      handleClickIndex
     });
   }
-}), oe = { class: "nut-elevator__list__item__code" }, ne = ["onClick"], se = ["innerHTML"], ae = { class: "nut-elevator__fixed-title" }, ce = { class: "nut-elevator__bars__inner" }, ue = ["data-index", "onClick"];
-function de(e, r, n, t, I, _) {
-  return a(), c("view", {
-    class: k(e.classes)
+});
+const _hoisted_1 = { class: "nut-elevator__list__item__code" };
+const _hoisted_2 = ["onClick"];
+const _hoisted_3 = ["innerHTML"];
+const _hoisted_4 = { class: "nut-elevator__fixed-title" };
+const _hoisted_5 = { class: "nut-elevator__bars__inner" };
+const _hoisted_6 = ["data-index", "onClick"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes)
   }, [
-    h("view", {
+    createElementVNode("view", {
       class: "nut-elevator__list",
       ref: "listview",
-      style: $({ height: isNaN(+e.height) ? e.height : `${e.height}px` })
+      style: normalizeStyle({ height: isNaN(+_ctx.height) ? _ctx.height : `${_ctx.height}px` })
     }, [
-      (a(!0), c(S, null, H(e.indexList, (i) => (a(), c("view", {
-        class: "nut-elevator__list__item",
-        key: i[e.acceptKey],
-        ref_for: !0,
-        ref: e.setListGroup
-      }, [
-        h("view", oe, f(i[e.acceptKey]), 1),
-        (a(!0), c(S, null, H(i.list, (u) => (a(), c("view", {
-          class: k(["nut-elevator__list__item__name", {
-            "nut-elevator__list__item__name--highcolor": e.currentData.id === u.id && e.currentKey === i[e.acceptKey]
-          }]),
-          key: u.id,
-          onClick: (g) => e.handleClickItem(i[e.acceptKey], u)
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.indexList, (item) => {
+        return openBlock(), createElementBlock("view", {
+          class: "nut-elevator__list__item",
+          key: item[_ctx.acceptKey],
+          ref_for: true,
+          ref: _ctx.setListGroup
         }, [
-          e.$slots.default ? W(e.$slots, "default", {
-            key: 1,
-            item: u
-          }) : (a(), c("span", {
-            key: 0,
-            innerHTML: u.name
-          }, null, 8, se))
-        ], 10, ne))), 128))
-      ]))), 128)),
-      e.isSticky ? E((a(), c("view", {
+          createElementVNode("view", _hoisted_1, toDisplayString(item[_ctx.acceptKey]), 1),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(item.list, (subitem) => {
+            return openBlock(), createElementBlock("view", {
+              class: normalizeClass(["nut-elevator__list__item__name", {
+                "nut-elevator__list__item__name--highcolor": _ctx.currentData.id === subitem.id && _ctx.currentKey === item[_ctx.acceptKey]
+              }]),
+              key: subitem["id"],
+              onClick: ($event) => _ctx.handleClickItem(item[_ctx.acceptKey], subitem)
+            }, [
+              !_ctx.$slots.default ? (openBlock(), createElementBlock("span", {
+                key: 0,
+                innerHTML: subitem.name
+              }, null, 8, _hoisted_3)) : renderSlot(_ctx.$slots, "default", {
+                key: 1,
+                item: subitem
+              })
+            ], 10, _hoisted_2);
+          }), 128))
+        ]);
+      }), 128)),
+      _ctx.isSticky ? withDirectives((openBlock(), createElementBlock("view", {
         key: 0,
         class: "nut-elevator__list__fixed",
-        style: $(e.fixedStyle)
+        style: normalizeStyle(_ctx.fixedStyle)
       }, [
-        h("span", ae, f(e.indexList[e.currentIndex][e.acceptKey]), 1)
+        createElementVNode("span", _hoisted_4, toDisplayString(_ctx.indexList[_ctx.currentIndex][_ctx.acceptKey]), 1)
       ], 4)), [
-        [G, e.scrollY > 0]
-      ]) : M("", !0)
+        [vShow, _ctx.scrollY > 0]
+      ]) : createCommentVNode("", true)
     ], 4),
-    e.indexList.length ? E((a(), c("view", {
+    _ctx.indexList.length ? withDirectives((openBlock(), createElementBlock("view", {
       key: 0,
       class: "nut-elevator__code--current"
-    }, f(e.indexList[e.codeIndex][e.acceptKey]), 513)), [
-      [G, e.scrollStart]
-    ]) : M("", !0),
-    h("view", {
+    }, toDisplayString(_ctx.indexList[_ctx.codeIndex][_ctx.acceptKey]), 513)), [
+      [vShow, _ctx.scrollStart]
+    ]) : createCommentVNode("", true),
+    createElementVNode("view", {
       class: "nut-elevator__bars",
-      onTouchstart: r[0] || (r[0] = (...i) => e.touchStart && e.touchStart(...i)),
-      onTouchmove: r[1] || (r[1] = X((...i) => e.touchMove && e.touchMove(...i), ["stop", "prevent"])),
-      onTouchend: r[2] || (r[2] = (...i) => e.touchEnd && e.touchEnd(...i))
+      onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.touchStart && _ctx.touchStart(...args)),
+      onTouchmove: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.touchMove && _ctx.touchMove(...args), ["stop", "prevent"])),
+      onTouchend: _cache[2] || (_cache[2] = (...args) => _ctx.touchEnd && _ctx.touchEnd(...args))
     }, [
-      h("view", ce, [
-        (a(!0), c(S, null, H(e.indexList, (i, u) => (a(), c("view", {
-          class: k(["nut-elevator__bars__inner__item", { active: i[e.acceptKey] === e.indexList[e.currentIndex][e.acceptKey] }]),
-          "data-index": u,
-          key: i[e.acceptKey],
-          onClick: (g) => e.handleClickIndex(i[e.acceptKey])
-        }, f(i[e.acceptKey]), 11, ue))), 128))
+      createElementVNode("view", _hoisted_5, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.indexList, (item, index) => {
+          return openBlock(), createElementBlock("view", {
+            class: normalizeClass(["nut-elevator__bars__inner__item", { active: item[_ctx.acceptKey] === _ctx.indexList[_ctx.currentIndex][_ctx.acceptKey] }]),
+            "data-index": index,
+            key: item[_ctx.acceptKey],
+            onClick: ($event) => _ctx.handleClickIndex(item[_ctx.acceptKey])
+          }, toDisplayString(item[_ctx.acceptKey]), 11, _hoisted_6);
+        }), 128))
       ])
     ], 32)
   ], 2);
 }
-const me = /* @__PURE__ */ te(ie, [["render", de]]);
+const Elevator = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  me as default
+  Elevator as default
 };