y-design-ssr 1.0.0 → 1.1.1

package/libs/dropdownItem/index.mjs

@@ -0,0 +1,645 @@
+import { ref as P, reactive as z, inject as Y, getCurrentInstance as G, onUnmounted as R, computed as M, defineComponent as v, createVNode as i, onMounted as K, watch as q, Transition as B, withDirectives as I, vShow as _, Teleport as L, 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, o = u;
+  return a && typeof a != "string" && (o = a, a = ""), a = a ? `${e}__${a}` : e, `${a}${O(a, o)}`;
+}, 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 C = (e) => {
+  const t = `y-${e}`;
+  return [t, Q(t), X()];
+};
+var U = /* @__PURE__ */ ((e) => (e.Mini = "mini", e.Small = "small", e.Middle = "middle", e.Large = "large", e))(U || {}), W = /* @__PURE__ */ ((e) => (e.Top = "top", e.Middle = "middle", e.Bottom = "bottom", e))(W || {}), 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 E = (e) => isNaN(Number(e)) && typeof e == "string" ? e : `${e}px`, ee = (e) => {
+  const t = Y(e, null), u = G();
+  if (t && u) {
+    const { children: a, addChild: o, removeChild: s } = t;
+    return o(u), R(() => s(u)), {
+      index: M(() => a.indexOf(u)),
+      parent: t
+    };
+  }
+  return {
+    parent: null,
+    index: P(-1)
+  };
+}, [te, Ne] = C("dropdown"), ne = te;
+w.DOWN;
+const [le, N] = C("icon"), ae = (e) => new RegExp(/\.(https|png|jpg|gif|jpeg|webp|apng)$/).test(e.toLowerCase()), oe = /* @__PURE__ */ v({
+  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), o = () => ({
+      fontSize: E(e.size),
+      color: e.color
+    }), s = (l) => {
+      u("click", l);
+    };
+    return () => {
+      const {
+        name: l,
+        classPrefix: r,
+        badge: f,
+        dot: m,
+        subColor: p,
+        subBg: n,
+        tag: c
+      } = e;
+      return i(c, {
+        class: `${r}${a ? "" : ` y-icon--${l}`}`,
+        style: o(),
+        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 F = S(oe), [re, k, ue] = C("cell"), ie = /* @__PURE__ */ v({
+  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: U.Middle
+    },
+    // 垂直对齐方式
+    vertical: {
+      type: String,
+      default: W.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 = (o) => {
+      u("click", o);
+    };
+    return () => {
+      const {
+        tag: o,
+        vertical: s,
+        border: l,
+        size: r,
+        title: f,
+        icon: m,
+        label: p,
+        value: n,
+        clickable: c
+      } = e, y = o === "a" ? !0 : c;
+      return i(o, {
+        class: [k({
+          [`is-${s}`]: s,
+          [r]: r,
+          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(F, {
+            name: m,
+            class: k("icon")
+          }, null)];
+        }
+      });
+    };
+  }
+});
+const ce = S(ie), [se, de, fe] = C("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__ */ v({
+  name: se,
+  props: me,
+  emits: ["update:modelValue"],
+  setup(e, {
+    slots: t
+  }) {
+    const u = P("");
+    K(() => {
+      u.value = `mask${D}`, D += 1, a(e.modelValue, !0);
+    }), R(() => {
+      const l = b.findIndex((r) => r._id === u.value);
+      l >= 0 && b.splice(l, 1);
+    }), q(() => e.modelValue, (l) => {
+      a(l);
+    });
+    const a = (l, r) => {
+      l ? (b.unshift({
+        _id: u.value,
+        _state: l
+      }), b.length > 1 && (b[1]._state = !1)) : r || (b.splice(0, 1), b.length > 0 && (b[0]._state = !0));
+    }, o = () => {
+      let l = !1;
+      for (let r = 0; r < b.length; r++)
+        b[r]._id === u.value && (l = b[r]._state);
+      return {
+        _state: l
+      };
+    }, s = (l) => {
+      const {
+        lockScroll: r
+      } = e;
+      r && (l.preventDefault(), l.stopPropagation());
+    };
+    return () => {
+      const {
+        customClass: l,
+        duration: r,
+        zIndex: f,
+        customStyle: m,
+        onAfterLeave: p
+      } = e, {
+        _state: n
+      } = o();
+      return i(B, {
+        name: fe("animation", "fade"),
+        onAfterLeave: p
+      }, {
+        default: () => {
+          var c;
+          return [I(i("div", {
+            style: {
+              animationDuration: `${r}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] = C("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__ */ v({
+  name: ye,
+  props: ge,
+  emits: ["clickMask", "update:modelValue"],
+  setup(e, {
+    slots: t,
+    emit: u
+  }) {
+    const a = M(() => {
+      const {
+        position: l,
+        borderRadius: r,
+        customStyle: f,
+        duration: m,
+        zIndex: p
+      } = e, n = E(r);
+      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
+      };
+    }), o = (l) => {
+      u("clickMask", l), e.isCloseOnClickMask && (s.value = !1);
+    }, s = M({
+      get: () => e.modelValue,
+      set: (l) => u("update:modelValue", l)
+    });
+    return () => {
+      const {
+        teleport: l,
+        position: r,
+        customClass: f,
+        duration: m,
+        onAfterLeave: p,
+        lockScroll: n,
+        zIndex: c,
+        maskCustomClass: y,
+        maskCustomStyle: g
+      } = e;
+      return l ? i(L, {
+        to: l
+      }, {
+        default: () => [i(j, {
+          modelValue: s.value,
+          "onUpdate:modelValue": (d) => s.value = d,
+          duration: m,
+          lockScroll: n,
+          onClick: o,
+          onAfterLeave: p,
+          zIndex: c,
+          customClass: y,
+          customStyle: g
+        }, null), i(B, {
+          name: A("animation", `slide-${r}`)
+        }, {
+          default: () => {
+            var d;
+            return [I(i("div", {
+              style: a.value,
+              class: [T("content", {
+                [r]: r
+              }), 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: o,
+        onAfterLeave: p,
+        zIndex: c,
+        customClass: y,
+        customStyle: g
+      }, null), i(B, {
+        name: A("animation", `slide-${r}`)
+      }, {
+        default: () => {
+          var d;
+          return [I(i("div", {
+            style: a.value,
+            class: [T("content", {
+              [r]: r
+            }), f]
+          }, [((d = t.default) == null ? void 0 : d.call(t)) || null]), [[_, s.value]])];
+        }
+      })]);
+    };
+  }
+});
+const ke = S(be);
+function Ce(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !J(e);
+}
+const [ve, x] = C("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__ */ v({
+  name: ve,
+  props: Se,
+  emits: ["change", "update:modelValue"],
+  setup(e, {
+    slots: t,
+    emit: u,
+    expose: a
+  }) {
+    const o = 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();
+    }, r = (n = !o.showPopup, c = {}) => {
+      n !== o.showPopup && (o.showPopup = n, o.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 = () => {
+        o.showPopup = !1, n.value !== e.modelValue && (u("update:modelValue", n.value), u("change", n.value));
+      }, d = () => y ? i(F, {
+        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: o.id
+      }, [i(ke, {
+        modelValue: o.showPopup,
+        "onUpdate:modelValue": (h) => o.showPopup = h,
+        customClass: x("content"),
+        maskCustomStyle: {
+          position: "absolute"
+        },
+        position: g === w.DOWN ? V.Top : V.Bottom,
+        duration: o.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)];
+        }
+      })]), [[_, o.showPopup]]);
+    };
+    return a({
+      state: o,
+      toggle: r,
+      renderItemTitle: f
+    }), () => {
+      let n;
+      return e.teleport ? i(L, {
+        to: e.teleport
+      }, Ce(n = p()) ? n : {
+        default: () => [n]
+      }) : p();
+    };
+  }
+});
+const xe = S($e);
+export {
+  xe as default
+};