tdesign-pro-component/dist/es/ProFormSelect-CTZGhQlG.js

ProComponents tdesign-vue-next + Vue3 + TS

import "lodash-es";
import { g as t, b as B, w as O } from "./utils-CIySOLoe.js";
import { defineComponent as j, ref as i, onMounted as N, watch as s, createVNode as m, mergeProps as h, resolveComponent as P, isVNode as V } from "vue";
import { FormItem as p, Select as x } from "tdesign-vue-next";
function R(e) {
  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !V(e);
}
const T = /* @__PURE__ */ j({
  name: "ProFormSelect",
  props: {
    // about pro
    data: {
      type: [Array, Function],
      default: () => []
    },
    labelName: {
      type: String,
      default: "label"
    },
    valueName: {
      type: String,
      default: "value"
    },
    // about form
    name: {
      required: !0,
      type: String
    },
    label: [String, Function, Object],
    rules: Array,
    formItemProps: Object,
    // about input
    modelValue: [String, Number, Boolean, Array],
    placeholder: {
      type: String,
      default: "请选择"
    },
    readonly: Boolean,
    disabled: Boolean,
    clearable: Boolean,
    multiple: Boolean,
    filterable: Boolean,
    borderless: Boolean,
    filter: Function,
    onSearch: Function,
    panelTopContent: [String, Function, Object],
    panelBottomContent: [String, Function, Object],
    collapsedItems: [String, Function, Object],
    prefixIcon: [String, Function, Object],
    selectProps: Object
  },
  emits: ["update:modelValue", "change", "search"],
  setup(e, {
    slots: a,
    emit: r,
    expose: v
  }) {
    const b = t("label", a, e), u = i([]), d = i(!1), o = i(e.modelValue || ""), f = t("panelTopContent", a, e), S = t("panelBottomContent", a, e), g = t("prefixIcon", a, e), y = (l) => {
      const n = t("collapsedItems", a, e, l);
      return n() ? n() : null;
    };
    N(() => {
      c();
    });
    function c() {
      d.value = !0, B(e.data, e.labelName, e.valueName).then((l) => {
        u.value = l.map((n) => ({
          ...n,
          //@ts-ignore
          render: (I) => n.render ? n.render(I) : a[`option-${n[e.valueName]}`] ? a[`option-${n[e.valueName]}`]({
            option: n
          }) : n[e.labelName]
        }));
      }).finally(() => {
        d.value = !1;
      });
    }
    function C(l) {
      r("update:modelValue", l), r("change", l);
    }
    function F(l) {
      r("search", l);
    }
    return s(() => e.modelValue, (l) => {
      l !== o.value && (o.value = l);
    }), s(() => e.data, () => {
      c();
    }, {
      deep: !0
    }), v({
      reset: c
    }), () => m(p, h({
      rules: e.rules,
      name: e.name
    }, e.formItemProps), {
      label: b() ? b : null,
      default: () => m(x, h({
        modelValue: o.value,
        "onUpdate:modelValue": (l) => o.value = l,
        borderless: e.borderless,
        style: {
          width: "100%"
        },
        filterable: e.filterable,
        filter: e.filter,
        multiple: e.multiple,
        disabled: e.disabled,
        readonly: e.readonly,
        clearable: e.clearable,
        placeholder: e.placeholder,
        loading: d.value,
        onSearch: F,
        onChange: C
      }, e.selectProps), {
        default: () => u.value && u.value.map((l) => {
          let n;
          return m(P("t-option"), {
            disabled: e.disabled || l.disabled,
            key: l.value,
            value: l.value,
            label: l.label
          }, R(n = l.render(l)) ? n : {
            default: () => [n]
          });
        }),
        panelTopContent: f() ? f : null,
        panelBottomContent: S() ? S : null,
        collapsedItems: (l) => y(l),
        prefixIcon: g() ? g : null
      })
    });
  }
}), _ = O(T);
export {
  _ as P
};