epic-designer-cjh/dist/radio-9de1067b.js

基于vue3的设计器,可视化开发页面表单

import { watchEffect as ne, ref as V, inject as ae, toRef as U, defineComponent as O, computed as F, h as S, provide as ie } from "vue";
import { b$ as de, c0 as le, ca as se } from "./index-97ce4605.js";
import { u as M } from "./use-form-item-4d43edfb.js";
import { u as G } from "./use-merged-state-7348d957.js";
import { u as j } from "./use-memo-01b53d71.js";
import { u as N, a as B, e as x, b as u, c as k, f as P, g as K } from "./use-rtl-d05cb593.js";
import { c as ue, b as _, u as D, a as W } from "./light-76d75dc8.js";
import { c as I } from "./create-key-76a2bf3d.js";
import { f as ce } from "./flatten-3c263333.js";
import { g as be } from "./get-slot-e373a3d7.js";
import { c as L } from "./index-4562f02c.js";
import { r as he } from "./resolve-slot-d8544b74.js";
import "./index-e2a664aa.js";
import "./isArrayLikeObject-e5e231b4.js";
import "./_overRest-dc82ce77.js";
const fe = {
  radioSizeSmall: "14px",
  radioSizeMedium: "16px",
  radioSizeLarge: "18px",
  labelPadding: "0 8px",
  labelFontWeight: "400"
}, ve = (e) => {
  const { borderColor: t, primaryColor: o, baseColor: a, textColorDisabled: n, inputColorDisabled: l, textColor2: r, opacityDisabled: s, borderRadius: d, fontSizeSmall: v, fontSizeMedium: g, fontSizeLarge: C, heightSmall: h, heightMedium: w, heightLarge: m, lineHeight: R } = e;
  return Object.assign(Object.assign({}, fe), {
    labelLineHeight: R,
    buttonHeightSmall: h,
    buttonHeightMedium: w,
    buttonHeightLarge: m,
    fontSizeSmall: v,
    fontSizeMedium: g,
    fontSizeLarge: C,
    boxShadow: `inset 0 0 0 1px ${t}`,
    boxShadowActive: `inset 0 0 0 1px ${o}`,
    boxShadowFocus: `inset 0 0 0 1px ${o}, 0 0 0 2px ${L(o, { alpha: 0.2 })}`,
    boxShadowHover: `inset 0 0 0 1px ${o}`,
    boxShadowDisabled: `inset 0 0 0 1px ${t}`,
    color: a,
    colorDisabled: l,
    colorActive: "#0000",
    textColor: r,
    textColorDisabled: n,
    dotColorActive: o,
    dotColorDisabled: t,
    buttonBorderColor: t,
    buttonBorderColorActive: o,
    buttonBorderColorHover: t,
    buttonColor: a,
    buttonColorActive: a,
    buttonTextColor: r,
    buttonTextColorActive: o,
    buttonTextColorHover: o,
    opacityDisabled: s,
    buttonBoxShadowFocus: `inset 0 0 0 1px ${o}, 0 0 0 2px ${L(o, { alpha: 0.3 })}`,
    buttonBoxShadowHover: "inset 0 0 0 1px #0000",
    buttonBoxShadow: "inset 0 0 0 1px #0000",
    buttonBorderRadius: d
  });
}, pe = {
  name: "Radio",
  common: ue,
  self: ve
}, Y = pe, ge = {
  name: String,
  value: {
    type: [String, Number, Boolean],
    default: "on"
  },
  checked: {
    type: Boolean,
    default: void 0
  },
  defaultChecked: Boolean,
  disabled: {
    type: Boolean,
    default: void 0
  },
  label: String,
  size: String,
  onUpdateChecked: [Function, Array],
  "onUpdate:checked": [Function, Array],
  // deprecated
  checkedValue: {
    type: Boolean,
    default: void 0
  }
}, q = de("n-radio-group");
function me(e) {
  process.env.NODE_ENV !== "production" && ne(() => {
    e.checkedValue !== void 0 && le("radio", "`checked-value` is deprecated, please use `checked` instead.");
  });
  const t = M(e, {
    mergedSize(i) {
      const { size: c } = e;
      if (c !== void 0)
        return c;
      if (r) {
        const { mergedSizeRef: { value: f } } = r;
        if (f !== void 0)
          return f;
      }
      return i ? i.mergedSize.value : "medium";
    },
    mergedDisabled(i) {
      return !!(e.disabled || r != null && r.disabledRef.value || i != null && i.disabled.value);
    }
  }), { mergedSizeRef: o, mergedDisabledRef: a } = t, n = V(null), l = V(null), r = ae(q, null), s = V(e.defaultChecked), d = U(e, "checked"), v = G(d, s), g = j(() => r ? r.valueRef.value === e.value : v.value), C = j(() => {
    const { name: i } = e;
    if (i !== void 0)
      return i;
    if (r)
      return r.nameRef.value;
  }), h = V(!1);
  function w() {
    if (r) {
      const { doUpdateValue: i } = r, { value: c } = e;
      _(i, c);
    } else {
      const { onUpdateChecked: i, "onUpdate:checked": c } = e, { nTriggerFormInput: f, nTriggerFormChange: b } = t;
      i && _(i, !0), c && _(c, !0), f(), b(), s.value = !0;
    }
  }
  function m() {
    a.value || g.value || w();
  }
  function R() {
    m();
  }
  function z() {
    h.value = !1;
  }
  function y() {
    h.value = !0;
  }
  return {
    mergedClsPrefix: r ? r.mergedClsPrefixRef : N(e).mergedClsPrefixRef,
    inputRef: n,
    labelRef: l,
    mergedName: C,
    mergedDisabled: a,
    uncontrolledChecked: s,
    renderSafeChecked: g,
    focus: h,
    mergedSize: o,
    handleRadioInputChange: R,
    handleRadioInputBlur: z,
    handleRadioInputFocus: y
  };
}
const xe = B("radio", `
 line-height: var(--n-label-line-height);
 outline: none;
 position: relative;
 user-select: none;
 -webkit-user-select: none;
 display: inline-flex;
 align-items: flex-start;
 flex-wrap: nowrap;
 font-size: var(--n-font-size);
 word-break: break-word;
`, [x("checked", [u("dot", `
 background-color: var(--n-color-active);
 `)]), u("dot-wrapper", `
 position: relative;
 flex-shrink: 0;
 flex-grow: 0;
 width: var(--n-radio-size);
 `), B("radio-input", `
 position: absolute;
 border: 0;
 border-radius: inherit;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 opacity: 0;
 z-index: 1;
 cursor: pointer;
 `), u("dot", `
 position: absolute;
 top: 50%;
 left: 0;
 transform: translateY(-50%);
 height: var(--n-radio-size);
 width: var(--n-radio-size);
 background: var(--n-color);
 box-shadow: var(--n-box-shadow);
 border-radius: 50%;
 transition:
 background-color .3s var(--n-bezier),
 box-shadow .3s var(--n-bezier);
 `, [k("&::before", `
 content: "";
 opacity: 0;
 position: absolute;
 left: 4px;
 top: 4px;
 height: calc(100% - 8px);
 width: calc(100% - 8px);
 border-radius: 50%;
 transform: scale(.8);
 background: var(--n-dot-color-active);
 transition: 
 opacity .3s var(--n-bezier),
 background-color .3s var(--n-bezier),
 transform .3s var(--n-bezier);
 `), x("checked", {
  boxShadow: "var(--n-box-shadow-active)"
}, [k("&::before", `
 opacity: 1;
 transform: scale(1);
 `)])]), u("label", `
 color: var(--n-text-color);
 padding: var(--n-label-padding);
 font-weight: var(--n-label-font-weight);
 display: inline-block;
 transition: color .3s var(--n-bezier);
 `), P("disabled", `
 cursor: pointer;
 `, [k("&:hover", [u("dot", {
  boxShadow: "var(--n-box-shadow-hover)"
})]), x("focus", [k("&:not(:active)", [u("dot", {
  boxShadow: "var(--n-box-shadow-focus)"
})])])]), x("disabled", `
 cursor: not-allowed;
 `, [u("dot", {
  boxShadow: "var(--n-box-shadow-disabled)",
  backgroundColor: "var(--n-color-disabled)"
}, [k("&::before", {
  backgroundColor: "var(--n-dot-color-disabled)"
}), x("checked", `
 opacity: 1;
 `)]), u("label", {
  color: "var(--n-text-color-disabled)"
}), B("radio-input", `
 cursor: not-allowed;
 `)])]), Ce = O({
  name: "Radio",
  props: Object.assign(Object.assign({}, D.props), ge),
  setup(e) {
    const t = me(e), o = D("Radio", "-radio", xe, Y, e, t.mergedClsPrefix), a = F(() => {
      const { mergedSize: { value: v } } = t, { common: { cubicBezierEaseInOut: g }, self: { boxShadow: C, boxShadowActive: h, boxShadowDisabled: w, boxShadowFocus: m, boxShadowHover: R, color: z, colorDisabled: y, colorActive: i, textColor: c, textColorDisabled: f, dotColorActive: b, dotColorDisabled: p, labelPadding: $, labelLineHeight: E, labelFontWeight: T, [I("fontSize", v)]: A, [I("radioSize", v)]: H } } = o.value;
      return {
        "--n-bezier": g,
        "--n-label-line-height": E,
        "--n-label-font-weight": T,
        "--n-box-shadow": C,
        "--n-box-shadow-active": h,
        "--n-box-shadow-disabled": w,
        "--n-box-shadow-focus": m,
        "--n-box-shadow-hover": R,
        "--n-color": z,
        "--n-color-active": i,
        "--n-color-disabled": y,
        "--n-dot-color-active": b,
        "--n-dot-color-disabled": p,
        "--n-font-size": A,
        "--n-radio-size": H,
        "--n-text-color": c,
        "--n-text-color-disabled": f,
        "--n-label-padding": $
      };
    }), { inlineThemeDisabled: n, mergedClsPrefixRef: l, mergedRtlRef: r } = N(e), s = K("Radio", r, l), d = n ? W("radio", F(() => t.mergedSize.value[0]), a, e) : void 0;
    return Object.assign(t, {
      rtlEnabled: s,
      cssVars: n ? void 0 : a,
      themeClass: d == null ? void 0 : d.themeClass,
      onRender: d == null ? void 0 : d.onRender
    });
  },
  render() {
    const { $slots: e, mergedClsPrefix: t, onRender: o, label: a } = this;
    return o == null || o(), S(
      "label",
      { class: [
        `${t}-radio`,
        this.themeClass,
        {
          [`${t}-radio--rtl`]: this.rtlEnabled,
          [`${t}-radio--disabled`]: this.mergedDisabled,
          [`${t}-radio--checked`]: this.renderSafeChecked,
          [`${t}-radio--focus`]: this.focus
        }
      ], style: this.cssVars },
      S("input", { ref: "inputRef", type: "radio", class: `${t}-radio-input`, value: this.value, name: this.mergedName, checked: this.renderSafeChecked, disabled: this.mergedDisabled, onChange: this.handleRadioInputChange, onFocus: this.handleRadioInputFocus, onBlur: this.handleRadioInputBlur }),
      S(
        "div",
        { class: `${t}-radio__dot-wrapper` },
        " ",
        S("div", { class: [
          `${t}-radio__dot`,
          this.renderSafeChecked && `${t}-radio__dot--checked`
        ] })
      ),
      he(e.default, (n) => !n && !a ? null : S("div", { ref: "labelRef", class: `${t}-radio__label` }, n || a))
    );
  }
}), we = B("radio-group", `
 display: inline-block;
 font-size: var(--n-font-size);
`, [u("splitor", `
 display: inline-block;
 vertical-align: bottom;
 width: 1px;
 transition:
 background-color .3s var(--n-bezier),
 opacity .3s var(--n-bezier);
 background: var(--n-button-border-color);
 `, [x("checked", {
  backgroundColor: "var(--n-button-border-color-active)"
}), x("disabled", {
  opacity: "var(--n-opacity-disabled)"
})]), x("button-group", `
 white-space: nowrap;
 height: var(--n-height);
 line-height: var(--n-height);
 `, [B("radio-button", {
  height: "var(--n-height)",
  lineHeight: "var(--n-height)"
}), u("splitor", {
  height: "var(--n-height)"
})]), B("radio-button", `
 vertical-align: bottom;
 outline: none;
 position: relative;
 user-select: none;
 -webkit-user-select: none;
 display: inline-block;
 box-sizing: border-box;
 padding-left: 14px;
 padding-right: 14px;
 white-space: nowrap;
 transition:
 background-color .3s var(--n-bezier),
 opacity .3s var(--n-bezier),
 border-color .3s var(--n-bezier),
 color .3s var(--n-bezier);
 color: var(--n-button-text-color);
 border-top: 1px solid var(--n-button-border-color);
 border-bottom: 1px solid var(--n-button-border-color);
 `, [B("radio-input", `
 pointer-events: none;
 position: absolute;
 border: 0;
 border-radius: inherit;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 opacity: 0;
 z-index: 1;
 `), u("state-border", `
 z-index: 1;
 pointer-events: none;
 position: absolute;
 box-shadow: var(--n-button-box-shadow);
 transition: box-shadow .3s var(--n-bezier);
 left: -1px;
 bottom: -1px;
 right: -1px;
 top: -1px;
 `), k("&:first-child", `
 border-top-left-radius: var(--n-button-border-radius);
 border-bottom-left-radius: var(--n-button-border-radius);
 border-left: 1px solid var(--n-button-border-color);
 `, [u("state-border", `
 border-top-left-radius: var(--n-button-border-radius);
 border-bottom-left-radius: var(--n-button-border-radius);
 `)]), k("&:last-child", `
 border-top-right-radius: var(--n-button-border-radius);
 border-bottom-right-radius: var(--n-button-border-radius);
 border-right: 1px solid var(--n-button-border-color);
 `, [u("state-border", `
 border-top-right-radius: var(--n-button-border-radius);
 border-bottom-right-radius: var(--n-button-border-radius);
 `)]), P("disabled", `
 cursor: pointer;
 `, [k("&:hover", [u("state-border", `
 transition: box-shadow .3s var(--n-bezier);
 box-shadow: var(--n-button-box-shadow-hover);
 `), P("checked", {
  color: "var(--n-button-text-color-hover)"
})]), x("focus", [k("&:not(:active)", [u("state-border", {
  boxShadow: "var(--n-button-box-shadow-focus)"
})])])]), x("checked", `
 background: var(--n-button-color-active);
 color: var(--n-button-text-color-active);
 border-color: var(--n-button-border-color-active);
 `), x("disabled", `
 cursor: not-allowed;
 opacity: var(--n-opacity-disabled);
 `)])]);
function Re(e, t, o) {
  var a;
  const n = [];
  let l = !1;
  for (let r = 0; r < e.length; ++r) {
    const s = e[r], d = (a = s.type) === null || a === void 0 ? void 0 : a.name;
    if (d === "RadioButton" && (l = !0), process.env.NODE_ENV !== "production" && l && d !== "RadioButton") {
      se("radio-group", "`n-radio-group` in button mode only takes `n-radio-button` as children.");
      continue;
    }
    const v = s.props;
    if (d !== "RadioButton") {
      n.push(s);
      continue;
    }
    if (r === 0)
      n.push(s);
    else {
      const g = n[n.length - 1].props, C = t === g.value, h = g.disabled, w = t === v.value, m = v.disabled, R = (C ? 2 : 0) + (h ? 0 : 1), z = (w ? 2 : 0) + (m ? 0 : 1), y = {
        [`${o}-radio-group__splitor--disabled`]: h,
        [`${o}-radio-group__splitor--checked`]: C
      }, i = {
        [`${o}-radio-group__splitor--disabled`]: m,
        [`${o}-radio-group__splitor--checked`]: w
      }, c = R < z ? i : y;
      n.push(S("div", { class: [`${o}-radio-group__splitor`, c] }), s);
    }
  }
  return {
    children: n,
    isButtonGroup: l
  };
}
const Se = Object.assign(Object.assign({}, D.props), { name: String, value: [String, Number, Boolean], defaultValue: {
  type: [String, Number, Boolean],
  default: null
}, size: String, disabled: {
  type: Boolean,
  default: void 0
}, "onUpdate:value": [Function, Array], onUpdateValue: [Function, Array] }), ke = O({
  name: "RadioGroup",
  props: Se,
  setup(e) {
    const t = V(null), { mergedSizeRef: o, mergedDisabledRef: a, nTriggerFormChange: n, nTriggerFormInput: l, nTriggerFormBlur: r, nTriggerFormFocus: s } = M(e), { mergedClsPrefixRef: d, inlineThemeDisabled: v, mergedRtlRef: g } = N(e), C = D("Radio", "-radio-group", we, Y, e, d), h = V(e.defaultValue), w = U(e, "value"), m = G(w, h);
    function R(b) {
      const { onUpdateValue: p, "onUpdate:value": $ } = e;
      p && _(p, b), $ && _($, b), h.value = b, n(), l();
    }
    function z(b) {
      const { value: p } = t;
      p && (p.contains(b.relatedTarget) || s());
    }
    function y(b) {
      const { value: p } = t;
      p && (p.contains(b.relatedTarget) || r());
    }
    ie(q, {
      mergedClsPrefixRef: d,
      nameRef: U(e, "name"),
      valueRef: m,
      disabledRef: a,
      mergedSizeRef: o,
      doUpdateValue: R
    });
    const i = K("Radio", g, d), c = F(() => {
      const { value: b } = o, { common: { cubicBezierEaseInOut: p }, self: { buttonBorderColor: $, buttonBorderColorActive: E, buttonBorderRadius: T, buttonBoxShadow: A, buttonBoxShadowFocus: H, buttonBoxShadowHover: J, buttonColorActive: Q, buttonTextColor: X, buttonTextColorActive: Z, buttonTextColorHover: ee, opacityDisabled: oe, [I("buttonHeight", b)]: te, [I("fontSize", b)]: re } } = C.value;
      return {
        "--n-font-size": re,
        "--n-bezier": p,
        "--n-button-border-color": $,
        "--n-button-border-color-active": E,
        "--n-button-border-radius": T,
        "--n-button-box-shadow": A,
        "--n-button-box-shadow-focus": H,
        "--n-button-box-shadow-hover": J,
        "--n-button-color-active": Q,
        "--n-button-text-color": X,
        "--n-button-text-color-hover": ee,
        "--n-button-text-color-active": Z,
        "--n-height": te,
        "--n-opacity-disabled": oe
      };
    }), f = v ? W("radio-group", F(() => o.value[0]), c, e) : void 0;
    return {
      selfElRef: t,
      rtlEnabled: i,
      mergedClsPrefix: d,
      mergedValue: m,
      handleFocusout: y,
      handleFocusin: z,
      cssVars: v ? void 0 : c,
      themeClass: f == null ? void 0 : f.themeClass,
      onRender: f == null ? void 0 : f.onRender
    };
  },
  render() {
    var e;
    const { mergedValue: t, mergedClsPrefix: o, handleFocusin: a, handleFocusout: n } = this, { children: l, isButtonGroup: r } = Re(ce(be(this)), t, o);
    return (e = this.onRender) === null || e === void 0 || e.call(this), S("div", { onFocusin: a, onFocusout: n, ref: "selfElRef", class: [
      `${o}-radio-group`,
      this.rtlEnabled && `${o}-radio-group--rtl`,
      this.themeClass,
      r && `${o}-radio-group--button-group`
    ], style: this.cssVars }, l);
  }
}), Oe = O({
  emits: ["update:modelValue"],
  setup(e, { emit: t, attrs: o }) {
    function a(n = null) {
      t("update:modelValue", n);
    }
    return () => {
      const n = {
        ...o,
        value: o.modelValue,
        "onUpdate:value": a
      };
      return S(ke, n, {
        default: () => {
          var l;
          return [
            (l = n.options) == null ? void 0 : l.map(
              (r) => S(Ce, { value: r.value, key: r.value }, { default: () => r.label })
            )
          ];
        }
      });
    };
  }
});
export {
  Oe as default
};