yk-element-components/select/index.mjs

import { defineComponent as M, ref as f, watch as A, onMounted as D, resolveComponent as k, openBlock as u, createElementBlock as r, unref as i, normalizeClass as I, createElementVNode as y, toDisplayString as h, withModifiers as L, createCommentVNode as _, createVNode as R, isRef as U, withCtx as N, Fragment as O, renderList as x, createBlock as j } from "vue";
const G = { class: "custom_select_box" }, H = ["src"], P = ["onClick"], Q = { class: "custom_select_option" }, T = ["src"], W = { style: { "margin-left": "10px" } }, X = /* @__PURE__ */ M({
  __name: "index",
  props: {
    disabled: {
      type: Boolean,
      default: !1
    },
    clearable: {
      type: Boolean,
      default: !0
    },
    labelKey: {
      type: String,
      default: ""
    },
    valueKey: {
      type: String,
      default: ""
    },
    placeholder: {
      type: String,
      default: "\u8BF7\u9009\u62E9"
    },
    size: {
      type: String,
      default: ""
    },
    data: {
      type: Array,
      default: () => []
    },
    optionColumn: {
      type: Array,
      default: () => []
    },
    filterable: {
      type: Boolean,
      default: !0
    },
    value: {
      type: String,
      default: ""
    }
  },
  emits: [
    "visible-change",
    "input",
    "clear",
    "blur",
    "focus",
    "change"
  ],
  setup(l, { emit: s }) {
    const t = l;
    let o = f(""), c = f([]), v = f(!1), d = f({});
    A(
      () => t.data,
      (e) => {
        c.value = JSON.parse(JSON.stringify(e));
      },
      {
        deep: !0
      }
    ), D(() => {
      c.value = JSON.parse(JSON.stringify(t.data)), o.value = t.value, b(o.value);
    });
    const b = (e) => {
      e ? (t.data.forEach((n) => {
        e == n[t.valueKey ? t.valueKey : "value"] && (d.value = n);
      }), v.value = !0) : (v.value = !1, d.value = {});
    };
    let p = f();
    const J = () => {
      t.disabled || (v.value = !1, p.value.focus());
    }, K = (e) => {
      e ? c.value = JSON.parse(JSON.stringify(t.data)) : b(o.value), s("visible-change", e);
    }, C = (e) => {
      c.value = JSON.parse(JSON.stringify(t.data)), b(), o.value = "", s("input", ""), s("clear", e);
    }, V = (e) => {
      s("blur", e);
    }, B = (e) => {
      s("focus", e);
    }, w = (e) => {
      b(e), s("input", e), s("change", e);
    }, z = (e) => {
      let n = [];
      e ? n = t.data.filter((g) => {
        let m = !1;
        return t.optionColumn.forEach((a) => {
          g[a.key].indexOf(e) != -1 && (m = !0);
        }), m;
      }) : n = t.data, c.value = JSON.parse(JSON.stringify(n));
    };
    return (e, n) => {
      const g = k("el-option"), m = k("el-select");
      return u(), r("div", G, [
        i(v) ? (u(), r("div", {
          key: 0,
          class: I(["custom_value", { disabledBg: l.disabled }]),
          onClick: J
        }, [
          y("img", {
            src: i(d).image
          }, null, 8, H),
          y("div", null, h(l.labelKey ? i(d)[l.labelKey] : i(d).label), 1),
          l.disabled ? _("", !0) : (u(), r("i", {
            key: 0,
            class: "el-icon-circle-close",
            onClick: L(C, ["stop"])
          }, null, 8, P))
        ], 2)) : _("", !0),
        R(m, {
          ref_key: "custom_select",
          ref: p,
          size: l.size,
          modelValue: i(o),
          "onUpdate:modelValue": n[0] || (n[0] = (a) => U(o) ? o.value = a : o = a),
          placeholder: l.placeholder,
          "popper-class": "custom_select",
          filterable: !0,
          disabled: l.disabled,
          clearable: l.clearable,
          remote: "",
          "reserve-keyword": "",
          "remote-method": z,
          onVisibleChange: K,
          onClear: C,
          onBlur: V,
          onFocus: B,
          onChange: w
        }, {
          default: N(() => [
            (u(!0), r(O, null, x(i(c), (a, E) => (u(), j(g, {
              key: "f" + E,
              label: l.labelKey ? a[l.labelKey] : a.label,
              value: l.valueKey ? a[l.valueKey] : a.value
            }, {
              default: N(() => [
                y("div", Q, [
                  y("img", {
                    src: a.image
                  }, null, 8, T),
                  y("div", W, [
                    (u(!0), r(O, null, x(l.optionColumn, (S, F) => (u(), r("div", {
                      key: "child" + F
                    }, h(S.name) + ": " + h(a[S.key]), 1))), 128))
                  ])
                ])
              ]),
              _: 2
            }, 1032, ["label", "value"]))), 128))
          ]),
          _: 1
        }, 8, ["size", "modelValue", "placeholder", "disabled", "clearable"])
      ]);
    };
  }
});
const Z = {
  install(l) {
    l.component("yk-custom-select", X);
  }
};
export {
  Z as default
};