tdesign-pro-component/dist/es/ProFormRadio-Bu42TnPs.js

ProComponents tdesign-vue-next + Vue3 + TS

import "lodash-es";
import { g as V, b as x, w as _ } from "./utils-CIySOLoe.js";
import { defineComponent as y, ref as f, watch as c, createVNode as u, isVNode as b, mergeProps as m, computed as A, onMounted as T, Fragment as $ } from "vue";
import { RadioGroup as j, Space as O, Radio as k, RadioButton as w, FormItem as D } from "tdesign-vue-next";
function h(e) {
  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !b(e);
}
const S = /* @__PURE__ */ y({
  name: "DefaultRadio",
  props: {
    data: {
      type: Array
    },
    direction: {
      type: String,
      default: "horizontal"
    },
    onChange: {
      type: Function
    },
    modelValue: {
      type: [String, Number, Boolean]
    },
    readonly: {
      type: Boolean
    },
    disabled: {
      type: Boolean
    }
  },
  emits: ["update:modelValue", "change"],
  setup(e, {
    emit: n
  }) {
    const l = f(e.modelValue || "");
    c(() => e.modelValue, (a) => {
      a !== l.value && (l.value = a);
    });
    const r = (a) => {
      e.readonly || (n("update:modelValue", a), n("change", a));
    };
    return () => {
      let a;
      return u(j, {
        modelValue: l.value,
        "onUpdate:modelValue": (t) => l.value = t,
        onChange: r
      }, {
        default: () => [u(O, {
          direction: e.direction
        }, h(a = //@ts-ignore
        e.data.map((t) => {
          let d;
          return u(k, {
            disabled: e.disabled || t.disabled,
            key: t.value,
            value: t.value
          }, h(d = t.render(t)) ? d : {
            default: () => [d]
          });
        })) ? a : {
          default: () => [a]
        })]
      });
    };
  }
});
function s(e) {
  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !b(e);
}
const B = /* @__PURE__ */ y({
  name: "ButtonRadio",
  props: {
    data: {
      type: Array
    },
    vertical: {
      type: String,
      default: "row"
    },
    onChange: {
      type: Function
    },
    modelValue: {
      type: [String, Number, Boolean]
    },
    readonly: {
      type: Boolean
    },
    disabled: {
      type: Boolean
    }
  },
  setup(e, {
    emit: n
  }) {
    const l = f(e.modelValue || "");
    function r(a) {
      e.readonly || (n("change", a), l.value = a);
    }
    return c(() => e.modelValue, (a) => {
      l.value = a;
    }), c(l, (a) => {
      n("update:modelValue", a);
    }), () => {
      let a;
      return u(j, {
        readonly: e.readonly,
        value: l.value,
        onChange: r
      }, s(a = //@ts-ignore
      e.data.map((t) => {
        let d;
        return u(w, m({
          disabled: e.disabled || t.disabled
        }, e, {
          value: t.value
        }), s(d = t.render(t)) ? d : {
          default: () => [d]
        });
      })) ? a : {
        default: () => [a]
      });
    };
  }
}), C = /* @__PURE__ */ y({
  name: "TagItem",
  props: {
    data: Object,
    currentIndex: [String, Boolean, Number],
    fill: Boolean,
    updateColor: Boolean,
    disabled: Boolean
  },
  setup(e, {
    slots: n
  }) {
    const l = A(() => e.disabled ? e.currentIndex === e.data.value ? "tag-item tag-item-disabled-active" : "tag-item tag-item-disabled" : e.currentIndex === e.data.value ? `tag-item tag-item-active ${e.fill ? "tag-item-active-fill" : ""} ${e.updateColor ? "tag-item-color-active" : ""}` : "tag-item");
    return () => u("div", {
      class: l.value
    }, [n.default && (n == null ? void 0 : n.default())]);
  }
});
function R(e) {
  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !b(e);
}
const N = /* @__PURE__ */ y({
  name: "TagRadio",
  props: {
    data: {
      type: Array
    },
    direction: {
      type: String,
      default: "horizontal"
    },
    onChange: {
      type: Function
    },
    modelValue: {
      type: [String]
    },
    gap: {
      type: String,
      default: "24px"
    },
    updateColor: {
      type: Boolean,
      default: !1
    },
    fill: {
      type: Boolean,
      default: !1
    },
    readonly: {
      type: Boolean,
      default: !1
    },
    disabled: {
      type: Boolean,
      default: !1
    }
  },
  components: {
    TagItem: C
  },
  emits: ["update:modelValue", "change"],
  setup(e, {
    emit: n
  }) {
    const l = f(e.modelValue || "");
    function r(a, t) {
      e.readonly || e.disabled || t.disabled || (n("change", a), l.value = a);
    }
    return c(() => e.modelValue, (a) => {
      l.value = a;
    }), c(l, (a) => {
      n("update:modelValue", a);
    }), () => {
      let a;
      return u(O, {
        direction: e.direction
      }, R(a = e.data.map((t) => {
        let d;
        return u(C, {
          disabled: e.disabled || t.disabled,
          fill: e.fill,
          updateColor: e.updateColor,
          currentIndex: l.value,
          key: t.value,
          onClick: () => r(t.value, t),
          data: t
        }, R(d = t.render(t)) ? d : {
          default: () => [d]
        });
      })) ? a : {
        default: () => [a]
      });
    };
  }
}), U = /* @__PURE__ */ y({
  name: "ProFormRadio",
  props: {
    // about pro
    data: {
      type: [Array, Function],
      default: () => []
    },
    theme: {
      type: String,
      default: "radio"
    },
    labelName: {
      type: String,
      default: "label"
    },
    valueName: {
      type: String,
      default: "value"
    },
    direction: {
      type: String,
      default: "horizontal"
    },
    loadingText: {
      type: String,
      default: "数据加载中，请稍后..."
    },
    // about form
    name: {
      required: !0,
      type: String
    },
    label: [String, Function, Object],
    rules: Array,
    formItemProps: Object,
    // about input
    modelValue: {
      type: [String, Number, Boolean]
    },
    radioProps: {
      type: [Object]
    },
    readonly: {
      type: Boolean,
      default: !1
    },
    disabled: {
      type: Boolean,
      default: !1
    }
  },
  components: {
    DefaultRadio: S,
    ButtonRadio: B,
    TagRadio: N
  },
  emits: ["update:modelValue", "change"],
  setup(e, {
    emit: n,
    slots: l
  }) {
    const r = f([]), a = f(!1), t = f(e.modelValue || "2222"), d = V("label", l, e), P = V("loadingText", l, e);
    T(() => {
      v();
    });
    function v() {
      a.value = !0, x(e.data, e.labelName, e.valueName).then((o) => {
        r.value = o.map((i) => ({
          ...i,
          //@ts-ignore
          render: (I) => i.render ? i.render(I) : l[`option-${i[e.valueName]}`] ? l[`option-${i[e.valueName]}`]({
            option: i
          }) : i[e.labelName]
        }));
      }).finally(() => {
        a.value = !1;
      });
    }
    function g(o) {
      n("change", o), n("update:modelValue", o);
    }
    c(() => e.modelValue, (o) => {
      t.value = o;
    }), c(() => e.data, (o) => {
      Array.isArray(o) && v();
    }, {
      deep: !0
    });
    function F() {
      switch (e.theme) {
        case "radio":
        default:
          return u($, null, [u(S, m({
            direction: e.direction,
            onChange: g
          }, e.radioProps, {
            readonly: e.readonly,
            disabled: e.disabled,
            vertical: e.vertical,
            modelValue: t.value,
            "onUpdate:modelValue": (o) => t.value = o,
            data: r.value
          }), null)]);
        case "button":
          return u(B, m({
            onChange: g
          }, e.radioProps, {
            readonly: e.readonly,
            disabled: e.disabled,
            vertical: e.vertical,
            modelValue: t.value,
            "onUpdate:modelValue": (o) => t.value = o,
            data: r.value
          }), null);
        case "tag":
          return u(N, m({
            direction: e.direction,
            onChange: g
          }, e.radioProps, {
            readonly: e.readonly,
            disabled: e.disabled,
            vertical: e.vertical,
            modelValue: t.value,
            "onUpdate:modelValue": (o) => t.value = o,
            data: r.value
          }), null);
      }
    }
    return () => u(D, m({
      rules: e.rules,
      name: e.name
    }, e.formItemProps), {
      default: () => a.value ? P() : F(),
      label: d() ? d() : null
    });
  }
}), L = _(U);
export {
  L as P
};