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

SSR component library of YUI with Vue3

import { ref as P, reactive as z, inject as G, getCurrentInstance as K, onUnmounted as R, computed as M, defineComponent as C, createVNode as i, onMounted as q, watch as L, Transition as B, withDirectives as I, vShow as _, Teleport as U, Fragment as H, isVNode as J } from "vue";
const O = (e, t) => t ? typeof t == "string" ? ` ${e}--${t}` : Array.isArray(t) ? t.reduce((u, a) => u + O(e, a), "") : Object.keys(t).reduce(
  (u, a) => u + (t[a] ? O(e, a) : ""),
  ""
) : "", Q = (e) => (t, u) => {
  let a = t, r = u;
  return a && typeof a != "string" && (r = a, a = ""), a = a ? `${e}__${a}` : e, `${a}${O(a, r)}`;
}, X = () => (e, t) => t ? `${O(`y-${e}`, t)}` : `y-${e}`, Z = {
  "pull-refresh": {
    pulling: "下拉刷新...",
    loosing: "释放刷新...",
    loading: "数据加载中...",
    success: "数据已更新",
    failed: "数据跟新失败，请稍后再试"
  },
  "form-item": {
    validateMessage: "请输入正确内容"
  }
};
P("zh-CN");
z({
  "zh-CN": Z
});
const v = (e) => {
  const t = `y-${e}`;
  return [t, Q(t), X()];
};
var W = /* @__PURE__ */ ((e) => (e.Mini = "mini", e.Small = "small", e.Middle = "middle", e.Large = "large", e))(W || {}), E = /* @__PURE__ */ ((e) => (e.Top = "top", e.Middle = "middle", e.Bottom = "bottom", e))(E || {}), V = /* @__PURE__ */ ((e) => (e.Top = "top", e.Right = "right", e.Bottom = "bottom", e.Left = "left", e.Center = "center", e))(V || {}), w = /* @__PURE__ */ ((e) => (e.UP = "up", e.DOWN = "down", e))(w || {});
const F = (e) => isNaN(Number(e)) && typeof e == "string" ? e : `${e}px`, ee = (e) => {
  const t = G(e, null), u = K();
  if (t && u) {
    const { children: a, addChild: r, removeChild: s } = t;
    return r(u), R(() => s(u)), {
      index: M(() => a.indexOf(u)),
      parent: t
    };
  }
  return {
    parent: null,
    index: P(-1)
  };
}, [te, Ne] = v("dropdown"), ne = te;
w.DOWN;
const [le, N] = v("icon"), ae = (e) => new RegExp(/\.(https|png|jpg|gif|jpeg|webp|apng)$/).test(e.toLowerCase()), oe = /* @__PURE__ */ C({
  name: le,
  props: {
    dot: {
      type: Boolean,
      default: !1
    },
    name: {
      type: String,
      default: ""
    },
    size: {
      type: [Number, String],
      default: ""
    },
    info: {
      type: [Number, String],
      default: ""
    },
    badge: {
      type: [Number, String],
      default: ""
    },
    color: {
      type: String,
      default: ""
    },
    subColor: {
      type: String,
      default: ""
    },
    subBg: {
      type: String,
      default: ""
    },
    classPrefix: {
      type: String,
      default: "y-icon"
    },
    /**
     * @ignore
     */
    tag: {
      type: String,
      default: "i"
    }
  },
  emits: ["click"],
  setup(e, {
    slots: t,
    emit: u
  }) {
    const a = ae(e.name), r = () => ({
      fontSize: F(e.size),
      color: e.color
    }), s = (l) => {
      u("click", l);
    };
    return () => {
      const {
        name: l,
        classPrefix: o,
        badge: f,
        dot: m,
        subColor: p,
        subBg: n,
        tag: c
      } = e;
      return i(c, {
        class: `${o}${a ? "" : ` y-icon--${l}`}`,
        style: r(),
        onClick: s
      }, {
        default: () => {
          var y;
          return [a ? i("em", {
            class: N("node")
          }, [i("img", {
            class: N("image"),
            src: l,
            alt: "icon"
          }, null)]) : null, m ? i("em", {
            class: N("dot"),
            style: {
              backgroundColor: n
            }
          }, null) : null, f ? i("em", {
            class: N("badge"),
            style: {
              color: p,
              backgroundColor: n
            }
          }, [f]) : null, ((y = t.default) == null ? void 0 : y.call(t)) || null];
        }
      });
    };
  }
});
function S(e) {
  const t = e;
  return t.install = (u) => {
    const { name: a } = e;
    a && u.component(a, e);
  }, t;
}
const Y = S(oe), [re, k, ue] = v("cell"), ie = /* @__PURE__ */ C({
  name: re,
  props: {
    tag: {
      type: String,
      default: "div"
    },
    title: {
      type: [Number, String],
      default: ""
    },
    label: {
      type: [Number, String],
      default: ""
    },
    value: {
      type: [Number, String],
      default: ""
    },
    size: {
      type: String,
      default: W.Middle
    },
    // 垂直对齐方式
    vertical: {
      type: String,
      default: E.Middle
    },
    // 是否有 border
    border: {
      type: Boolean,
      default: !0
    },
    icon: {
      type: String,
      default: ""
    },
    // 点击态
    clickable: {
      type: Boolean,
      default: !1
    }
  },
  emits: ["click"],
  setup(e, {
    slots: t,
    emit: u
  }) {
    const a = (r) => {
      u("click", r);
    };
    return () => {
      const {
        tag: r,
        vertical: s,
        border: l,
        size: o,
        title: f,
        icon: m,
        label: p,
        value: n,
        clickable: c
      } = e, y = r === "a" ? !0 : c;
      return i(r, {
        class: [k({
          [`is-${s}`]: s,
          [o]: o,
          hairline: l
        }), ue("el", {
          clickable: y
        })],
        onClick: a
      }, {
        default: () => {
          var g, d;
          return [(g = t.left) == null ? void 0 : g.call(t), i("div", {
            class: k("center", {
              "has-left": t.left
            })
          }, [t.center ? t.center() : [i("h4", {
            class: k("title")
          }, [f]), i("p", {
            class: k("label")
          }, [p])]]), t.default ? t.default() : i("div", {
            class: k("value")
          }, [n]), ((d = t.right) == null ? void 0 : d.call(t)) || m && i(Y, {
            name: m,
            class: k("icon")
          }, null)];
        }
      });
    };
  }
});
const ce = S(ie), [se, de, fe] = v("mask"), me = {
  // 控制显示
  modelValue: {
    type: Boolean,
    default: !1
  },
  // 层级
  zIndex: {
    type: [Number, String],
    default: null
  },
  // 动画时长
  duration: {
    type: Number,
    default: 300
  },
  // 自定义类名
  customClass: {
    type: String,
    default: ""
  },
  // 自定义样式
  customStyle: {
    type: Object,
    default: () => ({})
  },
  // 触摸滚动开关
  lockScroll: {
    type: Boolean,
    default: !0
  },
  onAfterLeave: {
    type: Function,
    default: null
  }
}, b = z([]);
let D = 0;
const pe = /* @__PURE__ */ C({
  name: se,
  props: me,
  emits: ["update:modelValue"],
  setup(e, {
    slots: t
  }) {
    const u = P("");
    q(() => {
      u.value = `mask${D}`, D += 1, a(e.modelValue, !0);
    }), R(() => {
      const l = b.findIndex((o) => o._id === u.value);
      l >= 0 && b.splice(l, 1);
    }), L(() => e.modelValue, (l) => {
      a(l);
    });
    const a = (l, o) => {
      l ? (b.unshift({
        _id: u.value,
        _state: l
      }), b.length > 1 && (b[1]._state = !1)) : o || (b.splice(0, 1), b.length > 0 && (b[0]._state = !0));
    }, r = () => {
      let l = !1;
      for (let o = 0; o < b.length; o++)
        b[o]._id === u.value && (l = b[o]._state);
      return {
        _state: l
      };
    }, s = (l) => {
      const {
        lockScroll: o
      } = e;
      o && (l.preventDefault(), l.stopPropagation());
    };
    return () => {
      const {
        customClass: l,
        duration: o,
        zIndex: f,
        customStyle: m,
        onAfterLeave: p
      } = e, {
        _state: n
      } = r();
      return i(B, {
        name: fe("animation", "fade"),
        onAfterLeave: p
      }, {
        default: () => {
          var c;
          return [I(i("div", {
            style: {
              animationDuration: `${o}ms`,
              zIndex: f,
              ...m
            },
            class: [de(), l],
            onTouchmove: s
          }, [(c = t.default) == null ? void 0 : c.call(t)]), [[_, n]])];
        }
      });
    };
  }
});
const j = S(pe), [ye, T, A] = v("popup"), ge = {
  // 控制显示
  modelValue: {
    type: Boolean,
    default: !1
  },
  // 位置
  position: {
    type: String,
    default: "center"
  },
  // 圆角
  borderRadius: {
    type: [Number, String],
    default: ""
  },
  // 自定义类名
  customClass: {
    type: String,
    default: ""
  },
  // 自定义属性
  customStyle: {
    type: Object,
    default: () => ({})
  },
  // 自定义类名
  maskCustomClass: {
    type: String,
    default: ""
  },
  // 自定义属性
  maskCustomStyle: {
    type: Object,
    default: () => ({})
  },
  // 插入对象
  teleport: {
    type: String,
    default: "body"
  },
  // 动画时长
  duration: {
    type: Number,
    default: 300
  },
  // 点击遮罩是否关闭
  isCloseOnClickMask: {
    type: Boolean,
    default: !0
  },
  onAfterLeave: {
    type: Function,
    default: null
  },
  lockScroll: {
    type: Boolean,
    default: !0
  },
  zIndex: {
    type: Number,
    default: 100
  }
}, be = /* @__PURE__ */ C({
  name: ye,
  props: ge,
  emits: ["clickMask", "update:modelValue"],
  setup(e, {
    slots: t,
    emit: u
  }) {
    const a = M(() => {
      const {
        position: l,
        borderRadius: o,
        customStyle: f,
        duration: m,
        zIndex: p
      } = e, n = F(o);
      let c = "0";
      switch (l) {
        case "top":
          c = ` 0 0 ${n} ${n}`;
          break;
        case "bottom":
          c = `${n} ${n} 0 0`;
          break;
        case "left":
          c = `0 ${n} ${n} 0`;
          break;
        case "right":
          c = `${n} 0 0 ${n}`;
          break;
        default:
          c = `${n}`;
      }
      return {
        borderRadius: c,
        animationDuration: `${m}ms`,
        ...f,
        zIndex: p + 1
      };
    }), r = (l) => {
      u("clickMask", l), e.isCloseOnClickMask && (s.value = !1);
    }, s = M({
      get: () => e.modelValue,
      set: (l) => u("update:modelValue", l)
    });
    return L(() => s.value, (l, o) => {
      l !== o && (l && e.lockScroll ? document.body.style.overflow = "hidden" : document.body.style.overflow = "");
    }), () => {
      const {
        teleport: l,
        position: o,
        customClass: f,
        duration: m,
        onAfterLeave: p,
        lockScroll: n,
        zIndex: c,
        maskCustomClass: y,
        maskCustomStyle: g
      } = e;
      return l ? i(U, {
        to: l
      }, {
        default: () => [i(j, {
          modelValue: s.value,
          "onUpdate:modelValue": (d) => s.value = d,
          duration: m,
          lockScroll: n,
          onClick: r,
          onAfterLeave: p,
          zIndex: c,
          customClass: y,
          customStyle: g
        }, null), i(B, {
          name: A("animation", `slide-${o}`)
        }, {
          default: () => {
            var d;
            return [I(i("div", {
              style: a.value,
              class: [T("content", {
                [o]: o
              }), f]
            }, [((d = t.default) == null ? void 0 : d.call(t)) || null]), [[_, s.value]])];
          }
        })]
      }) : i(H, null, [i(j, {
        modelValue: s.value,
        "onUpdate:modelValue": (d) => s.value = d,
        duration: m,
        lockScroll: n,
        onClick: r,
        onAfterLeave: p,
        zIndex: c,
        customClass: y,
        customStyle: g
      }, null), i(B, {
        name: A("animation", `slide-${o}`)
      }, {
        default: () => {
          var d;
          return [I(i("div", {
            style: a.value,
            class: [T("content", {
              [o]: o
            }), f]
          }, [((d = t.default) == null ? void 0 : d.call(t)) || null]), [[_, s.value]])];
        }
      })]);
    };
  }
});
const ke = S(be);
function ve(e) {
  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !J(e);
}
const [Ce, x] = v("dropdown-item"), Se = {
  modelValue: {
    type: [Number, String],
    default: ""
  },
  title: {
    type: String,
    default: ""
  },
  options: {
    type: Object,
    default: () => ({})
  },
  disabled: {
    type: Boolean,
    default: !1
  },
  teleport: {
    type: String,
    default: ""
  }
}, $e = /* @__PURE__ */ C({
  name: Ce,
  props: Se,
  emits: ["change", "update:modelValue"],
  setup(e, {
    slots: t,
    emit: u,
    expose: a
  }) {
    const r = z({
      showPopup: !1,
      transition: !0,
      id: Math.random().toString(36).slice(2)
    }), {
      parent: s
    } = ee(ne);
    if (!s) {
      console.error("<YDropdownItem> must be a child component of <YDropdown>.");
      return;
    }
    const l = (n) => {
      e.teleport && n.stopPropagation();
    }, o = (n = !r.showPopup, c = {}) => {
      n !== r.showPopup && (r.showPopup = n, r.transition = !c.immediate, n && s.updateOffset());
    }, f = () => {
      if (t.title)
        return t.title();
      if (e.title)
        return e.title;
      const n = e.options.find((c) => c.value === e.modelValue);
      return n ? n.text : "";
    }, m = (n) => {
      const {
        activeColor: c
      } = s.props, y = n.value === e.modelValue, g = () => {
        r.showPopup = !1, n.value !== e.modelValue && (u("update:modelValue", n.value), u("change", n.value));
      }, d = () => y ? i(Y, {
        class: x("icon"),
        color: c,
        name: n.icon || "done"
      }, null) : null;
      return i(ce, {
        key: String(n.value),
        title: n.text,
        class: x("option", {
          active: y
        }),
        style: {
          color: y ? c : ""
        },
        clickable: !0,
        onClick: g
      }, {
        right: d
      });
    }, p = () => {
      const {
        offset: n
      } = s, {
        zIndex: c,
        duration: y,
        direction: g,
        isCloseOnClickMask: d
      } = s.props, $ = {};
      return $.zIndex = c, g === w.DOWN ? $.top = `${n.value}px` : $.bottom = `${n.value}px`, I(i("div", {
        style: $,
        class: x([g]),
        onClick: l,
        id: r.id
      }, [i(ke, {
        modelValue: r.showPopup,
        "onUpdate:modelValue": (h) => r.showPopup = h,
        customClass: x("content"),
        maskCustomStyle: {
          position: "absolute"
        },
        position: g === w.DOWN ? V.Top : V.Bottom,
        duration: r.transition ? y : 0,
        isCloseOnClickMask: d,
        teleport: e.teleport
      }, {
        default: () => {
          var h;
          return [e.options.map(m), (h = t.default) == null ? void 0 : h.call(t)];
        }
      })]), [[_, r.showPopup]]);
    };
    return a({
      state: r,
      toggle: o,
      renderItemTitle: f
    }), () => {
      let n;
      return e.teleport ? i(U, {
        to: e.teleport
      }, ve(n = p()) ? n : {
        default: () => [n]
      }) : p();
    };
  }
});
const xe = S($e);
export {
  xe as default
};