@open-data-v/ui/es/Select/SelectDown.vue.esm.js

OpenDataV UI基础包

import { defineComponent as j, ref as L, reactive as q, watch as A, computed as N, onMounted as G, nextTick as E, onBeforeUnmount as Q, openBlock as i, createElementBlock as s, normalizeClass as u, normalizeStyle as H, createElementVNode as a, withDirectives as c, vModelText as m, toDisplayString as h, Fragment as M, withModifiers as B, createCommentVNode as k, createVNode as S, withCtx as P, createTextVNode as W, renderList as X, withKeys as I, unref as O, renderSlot as Z, vShow as x } from "vue";
import _ from "../Icon/Close.esm.js";
import ee from "../Tag/Tag.vue.esm.js";
/* empty css                  */
import le from "../Transition/Transition.vue.esm.js";
const oe = ["readonly", "placeholder", "disabled"], te = ["readonly", "placeholder", "disabled"], ne = ["placeholder"], ae = { key: 0 }, ie = ["textContent"], se = { key: 1 }, de = ["textContent"], re = ["onClick"], ue = {
  key: 2,
  class: "input"
}, pe = ["disabled", "placeholder"], ce = ["readonly", "placeholder", "disabled"], fe = { class: "group-icon" }, we = /* @__PURE__ */ j({
  __name: "SelectDown",
  props: {
    value: {},
    width: {},
    multiple: { type: Boolean, default: !1 },
    collapseTags: { type: Boolean, default: !1 },
    clearable: { type: Boolean, default: !0 },
    filterable: { type: Boolean, default: !1 },
    size: {},
    placeholder: {},
    disabled: { type: Boolean, default: !1 },
    direction: { default: 0 },
    downClass: { default: "" },
    downStyle: {},
    appendToBody: { type: Boolean, default: !1 },
    downHeight: { default: 0 },
    icon: { default: "arrow" },
    fixedIcon: { type: Boolean },
    isRange: { type: Boolean, default: !1 },
    rangeSeparator: { default: "To" },
    endPlaceholder: {}
  },
  emits: ["update:value", "updateValue", "blur", "toggleClick", "clear", "delete", "input", "focus", "keyupEnter"],
  setup(z, { expose: F, emit: J }) {
    const n = z, d = J, U = L(), p = L(), l = q({
      valueLabel: L(JSON.parse(JSON.stringify(n.value || []))),
      visible: !1,
      appendStyle: {
        top: "",
        width: "",
        bottom: "",
        left: ""
      },
      direction2: n.direction,
      stopPropagation: !1,
      searchValueM: ""
      // 多选输入框的值
    });
    A(
      () => n.value,
      (e) => {
        l.valueLabel = JSON.parse(JSON.stringify(e));
      }
    );
    const w = N(() => {
      const e = ["o-input-control"];
      return n.size && e.push(n.size), n.disabled && e.push("disabled"), e.join(" ");
    }), D = (e) => {
      n.disabled || (l.visible = !0, E(() => {
        K(e);
      }), d("toggleClick", l.visible, e), l.stopPropagation = !0, setTimeout(() => {
        l.stopPropagation = !1;
      }, 50));
    }, $ = (e) => {
      l.visible && !n.filterable && (f(e), e.stopPropagation());
    }, V = (e) => {
      l.valueLabel.splice(e, 1), b(), d("delete", e);
    }, R = (e) => {
      l.valueLabel = [], b(), d("clear"), e.stopPropagation();
    }, f = (e) => {
      l.visible && !l.stopPropagation && (e && d("toggleClick", !1, e), l.visible = !1, l.searchValueM = "");
    }, b = () => {
      d("update:value", l.valueLabel), d("updateValue", l.valueLabel);
    }, C = (e, o, t) => {
      if (n.filterable) {
        if (n.isRange) {
          d(o, l.valueLabel, t), b();
          return;
        }
        const { value: r } = e.target;
        d(o, r), b();
      }
    }, v = (e, o) => {
      C(e, "input", o);
    }, g = (e, o) => {
      C(e, "blur", o);
    }, y = (e, o) => {
      C(e, "focus", o);
    }, T = (e) => {
      const { value: o } = e.target;
      d("keyupEnter", o);
    }, K = (e) => {
      if (n.direction === 0) {
        l.direction2 = n.direction;
        const o = document.documentElement.clientHeight || document.body.clientHeight, t = e.clientY, r = n.downHeight || p.value.offsetHeight || 0;
        r > o - t && t > r && (l.direction2 = 2);
      }
    }, Y = N(() => n.downHeight ? {
      "max-height": n.downHeight + "px",
      "overflow-y": "auto"
    } : {});
    return G(() => {
      E(() => {
        document.addEventListener("click", f), n.appendToBody && document.body.appendChild(p.value);
      });
    }), Q(() => {
      document.removeEventListener("click", f), n.appendToBody && p.value && document.body.removeChild(p.value);
    }), F({ slideUp: f, setValue: (e) => {
      l.valueLabel = JSON.parse(JSON.stringify(e));
    } }), (e, o) => (i(), s("div", {
      ref_key: "el",
      ref: U,
      class: u({
        "is-down": l.visible,
        "o-select-down": !0,
        disabled: e.disabled
      }),
      style: H({ width: e.width }),
      onClick: D
    }, [
      a("div", {
        class: "select-control",
        onClick: $
      }, [
        e.isRange ? (i(), s("div", {
          key: 0,
          class: u(["select-range", w.value])
        }, [
          c(a("input", {
            "onUpdate:modelValue": o[0] || (o[0] = (t) => l.valueLabel[0] = t),
            readonly: !e.filterable,
            placeholder: e.placeholder,
            disabled: e.disabled,
            onInput: o[1] || (o[1] = (t) => v(t, 0)),
            onFocus: o[2] || (o[2] = (t) => y(t, 0)),
            onBlur: o[3] || (o[3] = (t) => g(t, 0))
          }, null, 40, oe), [
            [m, l.valueLabel[0]]
          ]),
          a("span", null, h(e.rangeSeparator), 1),
          c(a("input", {
            "onUpdate:modelValue": o[4] || (o[4] = (t) => l.valueLabel[1] = t),
            readonly: !e.filterable,
            placeholder: e.endPlaceholder,
            disabled: e.disabled,
            onInput: o[5] || (o[5] = (t) => v(t, 1)),
            onFocus: o[6] || (o[6] = (t) => y(t, 1)),
            onBlur: o[7] || (o[7] = (t) => g(t, 1))
          }, null, 40, te), [
            [m, l.valueLabel[1]]
          ])
        ], 2)) : e.multiple ? (i(), s("div", {
          key: 1,
          class: u([w.value, "multiple-text"])
        }, [
          a("ul", { placeholder: e.placeholder }, [
            e.collapseTags ? (i(), s(M, { key: 0 }, [
              l.valueLabel.length > 0 ? (i(), s("li", ae, [
                a("span", {
                  textContent: h(l.valueLabel[0])
                }, null, 8, ie),
                a("i", {
                  class: "icon-error",
                  onClick: o[8] || (o[8] = B((t) => V(0), ["stop"]))
                })
              ])) : k("", !0),
              l.valueLabel.length > 1 ? (i(), s("li", se, [
                S(ee, {
                  size: "mini",
                  type: "info"
                }, {
                  default: P(() => [
                    W(" +" + h(l.valueLabel.length), 1)
                  ]),
                  _: 1
                })
              ])) : k("", !0)
            ], 64)) : (i(!0), s(M, { key: 1 }, X(l.valueLabel, (t, r) => (i(), s("li", { key: r }, [
              a("span", {
                textContent: h(t)
              }, null, 8, de),
              a("i", {
                class: "icon-error",
                onClick: B((ve) => V(r), ["stop"])
              }, null, 8, re)
            ]))), 128)),
            e.filterable ? (i(), s("li", ue, [
              c(a("input", {
                "onUpdate:modelValue": o[9] || (o[9] = (t) => l.searchValueM = t),
                type: "text",
                disabled: e.disabled,
                placeholder: l.valueLabel.length === 0 ? e.placeholder : "",
                onInput: v,
                onFocus: y,
                onBlur: g,
                onKeyup: I(T, ["enter"])
              }, null, 40, pe), [
                [m, l.searchValueM]
              ])
            ])) : k("", !0)
          ], 8, ne)
        ], 2)) : c((i(), s("input", {
          key: 2,
          "onUpdate:modelValue": o[10] || (o[10] = (t) => l.valueLabel[0] = t),
          readonly: !e.filterable,
          placeholder: e.placeholder,
          class: u(w.value),
          disabled: e.disabled,
          onInput: v,
          onFocus: y,
          onBlur: g,
          onKeyup: I(T, ["enter"])
        }, null, 42, ce)), [
          [m, l.valueLabel[0]]
        ]),
        a("span", fe, [
          e.clearable && e.value.length > 0 ? (i(), s("i", {
            key: 0,
            class: "icon-close",
            title: "清空",
            onClick: R
          }, [
            S(O(_))
          ])) : k("", !0),
          a("i", {
            class: u({ down: l.visible && !e.fixedIcon, [`icon-${e.icon}`]: !0 })
          }, null, 2)
        ])
      ]),
      S(O(le), {
        name: l.direction2 === 2 ? "slide-toggle-top" : "slide-toggle"
      }, {
        default: P(() => [
          c(a("div", {
            ref_key: "selectDown",
            ref: p,
            class: u({
              "o-select-down-pane": !0,
              top: l.direction2 === 2
            }),
            onClick: o[11] || (o[11] = B(() => {
            }, ["stop"]))
          }, [
            a("div", {
              style: H(Y.value),
              class: "scroll-pane"
            }, [
              Z(e.$slots, "default")
            ], 4),
            a("span", {
              class: u(["down-arrow", { "is-range": e.isRange }])
            }, null, 2)
          ], 2), [
            [x, l.visible]
          ])
        ]),
        _: 3
      }, 8, ["name"])
    ], 6));
  }
});
export {
  we as default
};
//# sourceMappingURL=SelectDown.vue.esm.js.map