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

ProComponents tdesign-vue-next + Vue3 + TS

import "lodash-es";
import { g as S, b as k, w as A } from "./utils-CIySOLoe.js";
import { defineComponent as v, ref as g, watch as y, createVNode as n, Fragment as _, isVNode as C, mergeProps as m, computed as T, onMounted as $ } from "vue";
import { RadioGroup as R, Radio as B, Row as I, Col as P, RadioButton as U, FormItem as D } from "tdesign-vue-next";
function b(e) {
  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !C(e);
}
const N = /* @__PURE__ */ v({
  name: "DefaultRadio",
  props: {
    data: {
      type: Array
    },
    vertical: {
      type: String,
      default: "row"
    },
    onChange: {
      type: Function
    },
    modelValue: {
      type: [String, Number, Boolean]
    },
    readonly: {
      type: Boolean
    },
    disabled: {
      type: Boolean
    }
  },
  emits: ["update:modelValue", "change"],
  setup(e, {
    emit: u
  }) {
    const t = g(e.modelValue || "");
    y(() => e.modelValue, (a) => {
      a !== t.value && (t.value = a);
    });
    const c = (a) => {
      e.readonly || (u("update:modelValue", a), u("change", a));
    }, d = () => {
      let a;
      return n(_, null, [n(R, {
        modelValue: t.value,
        "onUpdate:modelValue": (l) => t.value = l,
        onChange: c
      }, b(a = //@ts-ignore
      e.data.map((l) => {
        let r;
        return n(B, {
          disabled: e.disabled || l.disabled,
          key: l.value,
          value: l.value
        }, b(r = l.render(l)) ? r : {
          default: () => [r]
        });
      })) ? a : {
        default: () => [a]
      })]);
    }, o = () => {
      let a;
      return n(I, null, {
        default: () => [n(R, {
          modelValue: t.value,
          "onUpdate:modelValue": (l) => t.value = l,
          onChange: c
        }, b(a = //@ts-ignore
        e.data.map((l) => {
          let r;
          return n(P, {
            key: l.value,
            span: 12
          }, {
            default: () => [n(B, {
              disabled: e.disabled || l.disabled,
              value: l.value
            }, b(r = l.render(l)) ? r : {
              default: () => [r]
            })]
          });
        })) ? a : {
          default: () => [a]
        })]
      });
    };
    return () => e.vertical != "column" ? d() : o();
  }
});
function j(e) {
  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !C(e);
}
const w = /* @__PURE__ */ v({
  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: u
  }) {
    const t = g(e.modelValue || "");
    function c(d) {
      e.readonly || (u("change", d), t.value = d);
    }
    return y(() => e.modelValue, (d) => {
      t.value = d;
    }), y(t, (d) => {
      u("update:modelValue", d);
    }), () => {
      let d;
      return n(R, {
        readonly: e.readonly,
        value: t.value,
        onChange: c
      }, j(d = //@ts-ignore
      e.data.map((o) => {
        let a;
        return n(U, m({
          disabled: e.disabled || o.disabled
        }, e, {
          value: o.value
        }), j(a = o.render(o)) ? a : {
          default: () => [a]
        });
      })) ? d : {
        default: () => [d]
      });
    };
  }
}), V = /* @__PURE__ */ v({
  name: "TagItem",
  props: {
    data: Object,
    currentIndex: [String, Boolean, Number],
    fill: Boolean,
    updateColor: Boolean,
    disabled: Boolean
  },
  setup(e, {
    slots: u
  }) {
    const t = T(() => 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 () => n("div", {
      class: t.value
    }, [u.default && (u == null ? void 0 : u.default())]);
  }
});
function h(e) {
  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !C(e);
}
const O = /* @__PURE__ */ v({
  name: "TagRadio",
  props: {
    data: {
      type: Array
    },
    vertical: {
      type: String,
      default: "row"
    },
    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: V
  },
  emits: ["update:modelValue", "change"],
  setup(e, {
    emit: u
  }) {
    const t = g(e.modelValue || "");
    function c(a, l) {
      e.readonly || e.disabled || l.disabled || (u("change", a), t.value = a);
    }
    y(() => e.modelValue, (a) => {
      t.value = a;
    }), y(t, (a) => {
      u("update:modelValue", a);
    });
    const d = () => e.data.map((a) => {
      let l;
      return n("span", {
        style: {
          marginRight: e.gap
        }
      }, [n(V, {
        disabled: e.disabled || a.disabled,
        fill: e.fill,
        updateColor: e.updateColor,
        currentIndex: t.value,
        key: a.value,
        onClick: () => c(a.value, a),
        data: a
      }, h(l = a.render(a)) ? l : {
        default: () => [l]
      })]);
    }), o = () => {
      let a;
      return n(I, {
        gutter: 20,
        style: {
          width: "100%"
        }
      }, h(a = //@ts-ignore
      e.data.map((l) => {
        let r;
        return n(P, {
          style: {
            marginBottom: e.gap
          },
          key: l.value,
          span: 12
        }, {
          default: () => [n(V, {
            disabled: e.disabled || l.disabled,
            fill: e.fill,
            updateColor: e.updateColor,
            currentIndex: t.value,
            key: l.value,
            onClick: () => c(l.value, l),
            data: l
          }, h(r = l.render(l)) ? r : {
            default: () => [r]
          })]
        });
      })) ? a : {
        default: () => [a]
      });
    };
    return () => e.vertical == "row" ? d() : o();
  }
}), q = /* @__PURE__ */ v({
  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"
    },
    vertical: {
      type: String,
      default: "row"
    },
    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: N,
    ButtonRadio: w,
    TagRadio: O
  },
  emits: ["update:modelValue", "change"],
  setup(e, {
    emit: u,
    slots: t
  }) {
    const c = g([]), d = g(!1), o = g(e.modelValue || "2222"), a = S("label", t, e), l = S("loadingText", t, e);
    $(() => {
      r();
    });
    function r() {
      d.value = !0, k(e.data, e.labelName, e.valueName).then((i) => {
        c.value = i.map((f) => ({
          ...f,
          //@ts-ignore
          render: (F) => f.render ? f.render(F) : t[`option-${f[e.valueName]}`] ? t[`option-${f[e.valueName]}`]({
            option: f
          }) : f[e.labelName]
        }));
      }).finally(() => {
        d.value = !1;
      });
    }
    function s(i) {
      u("change", i), u("update:modelValue", i);
    }
    y(() => e.modelValue, (i) => {
      o.value = i;
    }), y(() => e.data, (i) => {
      Array.isArray(i) && r();
    }, {
      deep: !0
    });
    function x() {
      switch (e.theme) {
        case "radio":
        default:
          return n(_, null, [n(N, m({
            onChange: s
          }, e.radioProps, {
            readonly: e.readonly,
            disabled: e.disabled,
            vertical: e.vertical,
            modelValue: o.value,
            "onUpdate:modelValue": (i) => o.value = i,
            data: c.value
          }), null)]);
        case "button":
          return n(w, m({
            onChange: s
          }, e.radioProps, {
            readonly: e.readonly,
            disabled: e.disabled,
            vertical: e.vertical,
            modelValue: o.value,
            "onUpdate:modelValue": (i) => o.value = i,
            data: c.value
          }), null);
        case "tag":
          return n(O, m({
            onChange: s
          }, e.radioProps, {
            readonly: e.readonly,
            disabled: e.disabled,
            vertical: e.vertical,
            modelValue: o.value,
            "onUpdate:modelValue": (i) => o.value = i,
            data: c.value
          }), null);
      }
    }
    return () => n(D, m({
      rules: e.rules,
      name: e.name
    }, e.formItemProps), {
      default: () => d.value ? l() : x(),
      label: a() ? a() : null
    });
  }
}), X = A(q);
export {
  X as P
};