y-design-ssr/libs/dropdown/index.mjs

SSR component library of YUI with Vue3

import { ref as v, reactive as $, getCurrentInstance as I, provide as L, isVNode as z, defineComponent as R, computed as x, onMounted as S, onBeforeUnmount as W, createVNode as p, unref as P, nextTick as Y } from "vue";
const m = (e, n) => n ? typeof n == "string" ? ` ${e}--${n}` : Array.isArray(n) ? n.reduce((r, o) => r + m(e, o), "") : Object.keys(n).reduce(
  (r, o) => r + (n[o] ? m(e, o) : ""),
  ""
) : "", H = (e) => (n, r) => {
  let o = n, i = r;
  return o && typeof o != "string" && (i = o, o = ""), o = o ? `${e}__${o}` : e, `${o}${m(o, i)}`;
}, U = () => (e, n) => n ? `${m(`y-${e}`, n)}` : `y-${e}`, V = {
  "pull-refresh": {
    pulling: "下拉刷新...",
    loosing: "释放刷新...",
    loading: "数据加载中...",
    success: "数据已更新",
    failed: "数据跟新失败，请稍后再试"
  },
  "form-item": {
    validateMessage: "请输入正确内容"
  }
};
v("zh-CN");
$({
  "zh-CN": V
});
const j = (e) => {
  const n = `y-${e}`;
  return [n, H(n), U()];
};
var w = /* @__PURE__ */ ((e) => (e.UP = "up", e.DOWN = "down", e))(w || {});
const G = (e) => {
  const n = [], r = (o) => {
    Array.isArray(o) && o.forEach((i) => {
      var d;
      z(i) && (n.push(i), (d = i.component) != null && d.subTree && r(i.component.subTree.children), i.children && r(i.children));
    });
  };
  return r(e), n;
}, K = (e, n) => {
  const r = G(n.subTree.children);
  e.sort((o, i) => r.indexOf(o.vnode) - r.indexOf(i.vnode));
}, q = (e) => {
  const n = I(), r = $([]);
  return {
    children: r,
    initProvide: (i) => {
      L(e, {
        addChild: (u) => {
          u.proxy && (r.push(u), n && K(r, n));
        },
        removeChild: (u) => {
          const a = r.indexOf(u);
          r.splice(a, 1);
        },
        children: r,
        ...i
      });
    }
  };
}, [_, g] = j("dropdown"), F = _, J = {
  zIndex: {
    type: Number,
    default: 100
  },
  duration: {
    type: Number,
    default: 300
  },
  direction: {
    type: String,
    default: w.DOWN
  },
  activeColor: {
    type: String,
    default: ""
  },
  isCloseOnClickOutside: {
    type: Boolean,
    default: !0
  },
  isCloseOnClickMask: {
    type: Boolean,
    default: !0
  },
  swipeThreshold: {
    type: Number,
    default: 0
  }
}, Q = /* @__PURE__ */ R({
  name: _,
  props: J,
  setup(e, {
    slots: n,
    expose: r
  }) {
    const o = `dropdown-${Math.ceil(Math.random() * 100)}`, i = v(), d = v(null), h = v(0), {
      initProvide: u,
      children: a
    } = q(F), y = x(() => a.some((t) => t.exposed.state.showPopup)), N = x(() => e.swipeThreshold && a.length > Number(e.swipeThreshold)), k = x(() => y.value && e.zIndex ? {
      zIndex: Number(e.zIndex) + 1
    } : {}), M = (t) => t.tagName !== "HTML" && t.tagName !== "BODY" && t.nodeType === 1, A = (t, s = window) => {
      let l = t;
      for (; l && l !== s && M(l); ) {
        const {
          overflowY: c
        } = window.getComputedStyle(l);
        if (/scroll|auto|overlay/i.test(c))
          return l;
        l = l.parentNode;
      }
      return s;
    }, C = v(), E = () => {
      if (d.value) {
        let t = {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          width: 0,
          height: 0
        };
        const s = P(d);
        s === window && (t.width = window.innerWidth, t.height = window.innerHeight), s && (s != null && s.getBoundingClientRect) && (t = s.getBoundingClientRect()), e.direction === w.DOWN ? h.value = t.bottom : h.value = window.innerHeight - t.top;
      }
    }, b = () => {
      y.value && E();
    }, O = () => {
      a.forEach((t) => {
        t.exposed.toggle(!1);
      });
    }, T = (t) => {
      (Array.isArray(i) ? i : [i]).every((c) => {
        const f = P(c);
        return f && !f.contains(t.target);
      }) && e.isCloseOnClickOutside && O();
    };
    S(() => {
      var t;
      i.value && (C.value = A(i.value)), (t = C.value) == null || t.addEventListener("scroll", b, {
        passive: !0
      }), document.addEventListener("click", T);
    }), W(() => {
      var t;
      (t = C.value) == null || t.removeEventListener("scroll", b), document.removeEventListener("click", T);
    });
    const D = (t) => {
      const s = [-1, -1];
      a.forEach((l, c) => {
        const f = l.exposed;
        c === t ? s[1] = c : f.state.showPopup && (s[0] = c);
      }), s[0] !== -1 && a[s[0]].exposed.toggle(!1, {
        immediate: !0
      }), Y(() => {
        s[1] !== -1 && a[s[1]].exposed.toggle();
      }).catch((l) => {
        throw new Error(l);
      });
    }, B = (t, s) => {
      const l = t.exposed, {
        disabled: c,
        titleClass: f
      } = t.proxy;
      return p("div", {
        id: `${o}-${s}`,
        class: [g("item", {
          disabled: c,
          grow: N.value
        })],
        onClick: () => {
          c || D(s);
        }
      }, [p("span", {
        class: [g("title", {
          down: l.state.showPopup === (e.direction === w.DOWN),
          active: l.state.showPopup
        }), f],
        style: {
          color: l.state.showPopup ? e.activeColor : ""
        }
      }, [p("div", {
        class: "y-el--ellipsis"
      }, [l.renderItemTitle()])])]);
    };
    return r({
      close: O
    }), u({
      id: o,
      props: e,
      offset: h,
      updateOffset: E
    }), () => {
      var t;
      return p("div", {
        ref: i,
        class: g()
      }, [p("div", {
        ref: d,
        style: k.value,
        class: g("bar", {
          opened: y.value,
          scrollable: N.value
        })
      }, [a.map(B)]), (t = n.default) == null ? void 0 : t.call(n)]);
    };
  }
});
function X(e) {
  const n = e;
  return n.install = (r) => {
    const { name: o } = e;
    o && r.component(o, e);
  }, n;
}
const ee = X(Q);
export {
  ee as default
};