epic-designer-gold/dist/index-DDGSZCWD.js

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

import { c as M } from "./_commonjsHelpers-BVfed4GL.js";
import { f as Po, d as fo, b as _o, c as So, a as ko, e as Wo, u as No } from "./index-B2_JTx7E.js";
import { r as Lo } from "./_vue_commonjs-external-NwvjgbHK.js";
import { i as qo, f as Qo, _ as Vo } from "./index-kOCEDlqX.js";
import { b as Xo } from "./index-CaIHah0h.js";
var Yo = {}, To = {}, oo = {};
Object.defineProperty(oo, "__esModule", { value: !0 });
oo.createHoverColor = Ao;
oo.createPressedColor = Jo;
const Ho = Po;
function Ao(n) {
  return (0, Ho.composite)(n, [255, 255, 255, 0.16]);
}
function Jo(n) {
  return (0, Ho.composite)(n, [0, 0, 0, 0.12]);
}
var eo = {};
Object.defineProperty(eo, "__esModule", { value: !0 });
eo.buttonGroupInjectionKey = void 0;
const Uo = fo;
eo.buttonGroupInjectionKey = (0, Uo.createInjectionKey)("n-button-group");
var Eo = {}, vo = {}, Y = {}, yo = {};
Object.defineProperty(yo, "__esModule", { value: !0 });
yo.default = {
  paddingTiny: "0 6px",
  paddingSmall: "0 10px",
  paddingMedium: "0 14px",
  paddingLarge: "0 18px",
  paddingRoundTiny: "0 10px",
  paddingRoundSmall: "0 14px",
  paddingRoundMedium: "0 18px",
  paddingRoundLarge: "0 22px",
  iconMarginTiny: "6px",
  iconMarginSmall: "6px",
  iconMarginMedium: "6px",
  iconMarginLarge: "6px",
  iconSizeTiny: "14px",
  iconSizeSmall: "18px",
  iconSizeMedium: "18px",
  iconSizeLarge: "20px",
  rippleDuration: ".6s"
};
var Zo = M && M.__importDefault || function(n) {
  return n && n.__esModule ? n : { default: n };
};
Object.defineProperty(Y, "__esModule", { value: !0 });
Y.self = wo;
const oe = _o, ee = Zo(yo);
function wo(n) {
  const { heightTiny: h, heightSmall: P, heightMedium: D, heightLarge: a, borderRadius: p, fontSizeTiny: G, fontSizeSmall: to, fontSizeMedium: r, fontSizeLarge: g, opacityDisabled: no, textColor2: m, textColor3: lo, primaryColorHover: x, primaryColorPressed: E, borderColor: e, primaryColor: C, baseColor: s, infoColor: f, infoColorHover: v, infoColorPressed: k, successColor: w, successColorHover: _, successColorPressed: W, warningColor: S, warningColorHover: T, warningColorPressed: O, errorColor: z, errorColorHover: B, errorColorPressed: N, fontWeight: so, buttonColor2: A, buttonColor2Hover: V, buttonColor2Pressed: X, fontWeightStrong: J } = n;
  return Object.assign(Object.assign({}, ee.default), {
    heightTiny: h,
    heightSmall: P,
    heightMedium: D,
    heightLarge: a,
    borderRadiusTiny: p,
    borderRadiusSmall: p,
    borderRadiusMedium: p,
    borderRadiusLarge: p,
    fontSizeTiny: G,
    fontSizeSmall: to,
    fontSizeMedium: r,
    fontSizeLarge: g,
    opacityDisabled: no,
    // secondary
    colorOpacitySecondary: "0.16",
    colorOpacitySecondaryHover: "0.22",
    colorOpacitySecondaryPressed: "0.28",
    colorSecondary: A,
    colorSecondaryHover: V,
    colorSecondaryPressed: X,
    // tertiary
    colorTertiary: A,
    colorTertiaryHover: V,
    colorTertiaryPressed: X,
    // quaternary
    colorQuaternary: "#0000",
    colorQuaternaryHover: V,
    colorQuaternaryPressed: X,
    // default type
    color: "#0000",
    colorHover: "#0000",
    colorPressed: "#0000",
    colorFocus: "#0000",
    colorDisabled: "#0000",
    textColor: m,
    textColorTertiary: lo,
    textColorHover: x,
    textColorPressed: E,
    textColorFocus: x,
    textColorDisabled: m,
    textColorText: m,
    textColorTextHover: x,
    textColorTextPressed: E,
    textColorTextFocus: x,
    textColorTextDisabled: m,
    textColorGhost: m,
    textColorGhostHover: x,
    textColorGhostPressed: E,
    textColorGhostFocus: x,
    textColorGhostDisabled: m,
    border: `1px solid ${e}`,
    borderHover: `1px solid ${x}`,
    borderPressed: `1px solid ${E}`,
    borderFocus: `1px solid ${x}`,
    borderDisabled: `1px solid ${e}`,
    rippleColor: C,
    // primary
    colorPrimary: C,
    colorHoverPrimary: x,
    colorPressedPrimary: E,
    colorFocusPrimary: x,
    colorDisabledPrimary: C,
    textColorPrimary: s,
    textColorHoverPrimary: s,
    textColorPressedPrimary: s,
    textColorFocusPrimary: s,
    textColorDisabledPrimary: s,
    textColorTextPrimary: C,
    textColorTextHoverPrimary: x,
    textColorTextPressedPrimary: E,
    textColorTextFocusPrimary: x,
    textColorTextDisabledPrimary: m,
    textColorGhostPrimary: C,
    textColorGhostHoverPrimary: x,
    textColorGhostPressedPrimary: E,
    textColorGhostFocusPrimary: x,
    textColorGhostDisabledPrimary: C,
    borderPrimary: `1px solid ${C}`,
    borderHoverPrimary: `1px solid ${x}`,
    borderPressedPrimary: `1px solid ${E}`,
    borderFocusPrimary: `1px solid ${x}`,
    borderDisabledPrimary: `1px solid ${C}`,
    rippleColorPrimary: C,
    // info
    colorInfo: f,
    colorHoverInfo: v,
    colorPressedInfo: k,
    colorFocusInfo: v,
    colorDisabledInfo: f,
    textColorInfo: s,
    textColorHoverInfo: s,
    textColorPressedInfo: s,
    textColorFocusInfo: s,
    textColorDisabledInfo: s,
    textColorTextInfo: f,
    textColorTextHoverInfo: v,
    textColorTextPressedInfo: k,
    textColorTextFocusInfo: v,
    textColorTextDisabledInfo: m,
    textColorGhostInfo: f,
    textColorGhostHoverInfo: v,
    textColorGhostPressedInfo: k,
    textColorGhostFocusInfo: v,
    textColorGhostDisabledInfo: f,
    borderInfo: `1px solid ${f}`,
    borderHoverInfo: `1px solid ${v}`,
    borderPressedInfo: `1px solid ${k}`,
    borderFocusInfo: `1px solid ${v}`,
    borderDisabledInfo: `1px solid ${f}`,
    rippleColorInfo: f,
    // success
    colorSuccess: w,
    colorHoverSuccess: _,
    colorPressedSuccess: W,
    colorFocusSuccess: _,
    colorDisabledSuccess: w,
    textColorSuccess: s,
    textColorHoverSuccess: s,
    textColorPressedSuccess: s,
    textColorFocusSuccess: s,
    textColorDisabledSuccess: s,
    textColorTextSuccess: w,
    textColorTextHoverSuccess: _,
    textColorTextPressedSuccess: W,
    textColorTextFocusSuccess: _,
    textColorTextDisabledSuccess: m,
    textColorGhostSuccess: w,
    textColorGhostHoverSuccess: _,
    textColorGhostPressedSuccess: W,
    textColorGhostFocusSuccess: _,
    textColorGhostDisabledSuccess: w,
    borderSuccess: `1px solid ${w}`,
    borderHoverSuccess: `1px solid ${_}`,
    borderPressedSuccess: `1px solid ${W}`,
    borderFocusSuccess: `1px solid ${_}`,
    borderDisabledSuccess: `1px solid ${w}`,
    rippleColorSuccess: w,
    // warning
    colorWarning: S,
    colorHoverWarning: T,
    colorPressedWarning: O,
    colorFocusWarning: T,
    colorDisabledWarning: S,
    textColorWarning: s,
    textColorHoverWarning: s,
    textColorPressedWarning: s,
    textColorFocusWarning: s,
    textColorDisabledWarning: s,
    textColorTextWarning: S,
    textColorTextHoverWarning: T,
    textColorTextPressedWarning: O,
    textColorTextFocusWarning: T,
    textColorTextDisabledWarning: m,
    textColorGhostWarning: S,
    textColorGhostHoverWarning: T,
    textColorGhostPressedWarning: O,
    textColorGhostFocusWarning: T,
    textColorGhostDisabledWarning: S,
    borderWarning: `1px solid ${S}`,
    borderHoverWarning: `1px solid ${T}`,
    borderPressedWarning: `1px solid ${O}`,
    borderFocusWarning: `1px solid ${T}`,
    borderDisabledWarning: `1px solid ${S}`,
    rippleColorWarning: S,
    // error
    colorError: z,
    colorHoverError: B,
    colorPressedError: N,
    colorFocusError: B,
    colorDisabledError: z,
    textColorError: s,
    textColorHoverError: s,
    textColorPressedError: s,
    textColorFocusError: s,
    textColorDisabledError: s,
    textColorTextError: z,
    textColorTextHoverError: B,
    textColorTextPressedError: N,
    textColorTextFocusError: B,
    textColorTextDisabledError: m,
    textColorGhostError: z,
    textColorGhostHoverError: B,
    textColorGhostPressedError: N,
    textColorGhostFocusError: B,
    textColorGhostDisabledError: z,
    borderError: `1px solid ${z}`,
    borderHoverError: `1px solid ${B}`,
    borderPressedError: `1px solid ${N}`,
    borderFocusError: `1px solid ${B}`,
    borderDisabledError: `1px solid ${z}`,
    rippleColorError: z,
    waveOpacity: "0.6",
    fontWeight: so,
    fontWeightStrong: J
  });
}
const re = {
  name: "Button",
  common: oe.commonLight,
  self: wo
};
Y.default = re;
Object.defineProperty(vo, "__esModule", { value: !0 });
const te = _o, ne = Y, le = {
  name: "Button",
  common: te.commonDark,
  self(n) {
    const h = (0, ne.self)(n);
    return h.waveOpacity = "0.8", h.colorOpacitySecondary = "0.16", h.colorOpacitySecondaryHover = "0.2", h.colorOpacitySecondaryPressed = "0.12", h;
  }
};
vo.default = le;
var ro = {}, ho = {};
Object.defineProperty(ho, "__esModule", {
  value: !0
});
const Q = So;
ho.default = (0, Q.cB)("button", [(0, Q.cM)("rtl", `
 direction: rtl;
 `, [(0, Q.cE)("icon", {
  margin: "var(--n-icon-margin)",
  marginRight: 0
}), (0, Q.cE)("content", [(0, Q.c)("~", [(0, Q.cE)("icon", {
  margin: "var(--n-icon-margin)",
  marginLeft: 0
})])])])]);
var se = M && M.__importDefault || function(n) {
  return n && n.__esModule ? n : { default: n };
};
Object.defineProperty(ro, "__esModule", { value: !0 });
ro.buttonRtl = void 0;
const ie = se(ho);
ro.buttonRtl = {
  name: "Button",
  style: ie.default
};
(function(n) {
  var h = M && M.__importDefault || function(p) {
    return p && p.__esModule ? p : { default: p };
  };
  Object.defineProperty(n, "__esModule", { value: !0 }), n.buttonRtl = n.buttonLight = n.buttonDark = void 0;
  var P = vo;
  Object.defineProperty(n, "buttonDark", { enumerable: !0, get: function() {
    return h(P).default;
  } });
  var D = Y;
  Object.defineProperty(n, "buttonLight", { enumerable: !0, get: function() {
    return h(D).default;
  } });
  var a = ro;
  Object.defineProperty(n, "buttonRtl", { enumerable: !0, get: function() {
    return a.buttonRtl;
  } });
})(Eo);
var po = {};
Object.defineProperty(po, "__esModule", {
  value: !0
});
const ae = Qo, ce = qo, de = fo, t = So;
po.default = (0, t.c)([(0, t.cB)("button", `
 margin: 0;
 font-weight: var(--n-font-weight);
 line-height: 1;
 font-family: inherit;
 padding: var(--n-padding);
 height: var(--n-height);
 font-size: var(--n-font-size);
 border-radius: var(--n-border-radius);
 color: var(--n-text-color);
 background-color: var(--n-color);
 width: var(--n-width);
 white-space: nowrap;
 outline: none;
 position: relative;
 z-index: auto;
 border: none;
 display: inline-flex;
 flex-wrap: nowrap;
 flex-shrink: 0;
 align-items: center;
 justify-content: center;
 user-select: none;
 -webkit-user-select: none;
 text-align: center;
 cursor: pointer;
 text-decoration: none;
 transition:
 color .3s var(--n-bezier),
 background-color .3s var(--n-bezier),
 opacity .3s var(--n-bezier),
 border-color .3s var(--n-bezier);
 `, [(0, t.cM)("color", [(0, t.cE)("border", {
  borderColor: "var(--n-border-color)"
}), (0, t.cM)("disabled", [(0, t.cE)("border", {
  borderColor: "var(--n-border-color-disabled)"
})]), (0, t.cNotM)("disabled", [(0, t.c)("&:focus", [(0, t.cE)("state-border", {
  borderColor: "var(--n-border-color-focus)"
})]), (0, t.c)("&:hover", [(0, t.cE)("state-border", {
  borderColor: "var(--n-border-color-hover)"
})]), (0, t.c)("&:active", [(0, t.cE)("state-border", {
  borderColor: "var(--n-border-color-pressed)"
})]), (0, t.cM)("pressed", [(0, t.cE)("state-border", {
  borderColor: "var(--n-border-color-pressed)"
})])])]), (0, t.cM)("disabled", {
  backgroundColor: "var(--n-color-disabled)",
  color: "var(--n-text-color-disabled)"
}, [(0, t.cE)("border", {
  border: "var(--n-border-disabled)"
})]), (0, t.cNotM)("disabled", [(0, t.c)("&:focus", {
  backgroundColor: "var(--n-color-focus)",
  color: "var(--n-text-color-focus)"
}, [(0, t.cE)("state-border", {
  border: "var(--n-border-focus)"
})]), (0, t.c)("&:hover", {
  backgroundColor: "var(--n-color-hover)",
  color: "var(--n-text-color-hover)"
}, [(0, t.cE)("state-border", {
  border: "var(--n-border-hover)"
})]), (0, t.c)("&:active", {
  backgroundColor: "var(--n-color-pressed)",
  color: "var(--n-text-color-pressed)"
}, [(0, t.cE)("state-border", {
  border: "var(--n-border-pressed)"
})]), (0, t.cM)("pressed", {
  backgroundColor: "var(--n-color-pressed)",
  color: "var(--n-text-color-pressed)"
}, [(0, t.cE)("state-border", {
  border: "var(--n-border-pressed)"
})])]), (0, t.cM)("loading", "cursor: wait;"), (0, t.cB)("base-wave", `
 pointer-events: none;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 animation-iteration-count: 1;
 animation-duration: var(--n-ripple-duration);
 animation-timing-function: var(--n-bezier-ease-out), var(--n-bezier-ease-out);
 `, [(0, t.cM)("active", {
  zIndex: 1,
  animationName: "button-wave-spread, button-wave-opacity"
})]), de.isBrowser && "MozBoxSizing" in document.createElement("div").style ? (0, t.c)("&::moz-focus-inner", {
  border: 0
}) : null, (0, t.cE)("border, state-border", `
 position: absolute;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
 border-radius: inherit;
 transition: border-color .3s var(--n-bezier);
 pointer-events: none;
 `), (0, t.cE)("border", `
 border: var(--n-border);
 `), (0, t.cE)("state-border", `
 border: var(--n-border);
 border-color: #0000;
 z-index: 1;
 `), (0, t.cE)("icon", `
 margin: var(--n-icon-margin);
 margin-left: 0;
 height: var(--n-icon-size);
 width: var(--n-icon-size);
 max-width: var(--n-icon-size);
 font-size: var(--n-icon-size);
 position: relative;
 flex-shrink: 0;
 `, [(0, t.cB)("icon-slot", `
 height: var(--n-icon-size);
 width: var(--n-icon-size);
 position: absolute;
 left: 0;
 top: 50%;
 transform: translateY(-50%);
 display: flex;
 align-items: center;
 justify-content: center;
 `, [(0, ce.iconSwitchTransition)({
  top: "50%",
  originalTransform: "translateY(-50%)"
})]), (0, ae.fadeInWidthExpandTransition)()]), (0, t.cE)("content", `
 display: flex;
 align-items: center;
 flex-wrap: nowrap;
 min-width: 0;
 `, [(0, t.c)("~", [(0, t.cE)("icon", {
  margin: "var(--n-icon-margin)",
  marginRight: 0
})])]), (0, t.cM)("block", `
 display: flex;
 width: 100%;
 `), (0, t.cM)("dashed", [(0, t.cE)("border, state-border", {
  borderStyle: "dashed !important"
})]), (0, t.cM)("disabled", {
  cursor: "not-allowed",
  opacity: "var(--n-opacity-disabled)"
})]), (0, t.c)("@keyframes button-wave-spread", {
  from: {
    boxShadow: "0 0 0.5px 0 var(--n-ripple-color)"
  },
  to: {
    // don't use exact 5px since chrome will display the animation with glitches
    boxShadow: "0 0 0.5px 4.5px var(--n-ripple-color)"
  }
}), (0, t.c)("@keyframes button-wave-opacity", {
  from: {
    opacity: "var(--n-wave-opacity)"
  },
  to: {
    opacity: 0
  }
})]);
(function(n) {
  var h = M && M.__importDefault || function(e) {
    return e && e.__esModule ? e : { default: e };
  };
  Object.defineProperty(n, "__esModule", { value: !0 }), n.XButton = n.buttonProps = void 0;
  const P = Po, D = Wo, a = Lo, p = Vo, G = ko, to = No, r = fo, g = oo, no = Xo, m = eo, lo = Eo, x = h(po);
  n.buttonProps = Object.assign(Object.assign({}, G.useTheme.props), { color: String, textColor: String, text: Boolean, block: Boolean, loading: Boolean, disabled: Boolean, circle: Boolean, size: String, ghost: Boolean, round: Boolean, secondary: Boolean, tertiary: Boolean, quaternary: Boolean, strong: Boolean, focusable: {
    type: Boolean,
    default: !0
  }, keyboard: {
    type: Boolean,
    default: !0
  }, tag: {
    type: String,
    default: "button"
  }, type: {
    type: String,
    default: "default"
  }, dashed: Boolean, renderIcon: Function, iconPlacement: {
    type: String,
    default: "left"
  }, attrType: {
    type: String,
    default: "button"
  }, bordered: {
    type: Boolean,
    default: !0
  }, onClick: [Function, Array], nativeFocusBehavior: {
    type: Boolean,
    default: !no.isSafari
  }, spinProps: Object });
  const E = (0, a.defineComponent)({
    name: "Button",
    props: n.buttonProps,
    slots: Object,
    setup(e) {
      process.env.NODE_ENV !== "production" && (0, a.watchEffect)(() => {
        const { dashed: l, ghost: b, text: H, secondary: o, tertiary: I, quaternary: K } = e;
        (l || b || H) && (o || I || K) && (0, r.warnOnce)("button", "`dashed`, `ghost` and `text` props can't be used along with `secondary`, `tertiary` and `quaternary` props.");
      });
      const C = (0, a.ref)(null), s = (0, a.ref)(null), f = (0, a.ref)(!1), v = (0, D.useMemo)(() => !e.quaternary && !e.tertiary && !e.secondary && !e.text && (!e.color || e.ghost || e.dashed) && e.bordered), k = (0, a.inject)(m.buttonGroupInjectionKey, {}), { inlineThemeDisabled: w, mergedClsPrefixRef: _, mergedRtlRef: W, mergedComponentPropsRef: S } = (0, G.useConfig)(e), { mergedSizeRef: T } = (0, G.useFormItem)({}, {
        defaultSize: "medium",
        mergedSize: (l) => {
          var b, H;
          const { size: o } = e;
          if (o)
            return o;
          const { size: I } = k;
          if (I)
            return I;
          const { mergedSize: K } = l || {};
          if (K)
            return K.value;
          const q = (H = (b = S == null ? void 0 : S.value) === null || b === void 0 ? void 0 : b.Button) === null || H === void 0 ? void 0 : H.size;
          return q || "medium";
        }
      }), O = (0, a.computed)(() => e.focusable && !e.disabled), z = (l) => {
        var b;
        O.value || l.preventDefault(), !e.nativeFocusBehavior && (l.preventDefault(), !e.disabled && O.value && ((b = C.value) === null || b === void 0 || b.focus({ preventScroll: !0 })));
      }, B = (l) => {
        var b;
        if (!e.disabled && !e.loading) {
          const { onClick: H } = e;
          H && (0, r.call)(H, l), e.text || (b = s.value) === null || b === void 0 || b.play();
        }
      }, N = (l) => {
        switch (l.key) {
          case "Enter":
            if (!e.keyboard)
              return;
            f.value = !1;
        }
      }, so = (l) => {
        switch (l.key) {
          case "Enter":
            if (!e.keyboard || e.loading) {
              l.preventDefault();
              return;
            }
            f.value = !0;
        }
      }, A = () => {
        f.value = !1;
      }, V = (0, G.useTheme)("Button", "-button", x.default, lo.buttonLight, e, _), X = (0, to.useRtl)("Button", W, _), J = (0, a.computed)(() => {
        const l = V.value, { common: { cubicBezierEaseInOut: b, cubicBezierEaseOut: H }, self: o } = l, { rippleDuration: I, opacityDisabled: K, fontWeight: q, fontWeightStrong: io } = o, $ = T.value, { dashed: ao, type: R, ghost: co, text: F, color: c, round: Co, circle: uo, textColor: j, secondary: Do, tertiary: go, quaternary: zo, strong: Bo } = e, $o = {
          "--n-font-weight": Bo ? io : q
        };
        let d = {
          "--n-color": "initial",
          "--n-color-hover": "initial",
          "--n-color-pressed": "initial",
          "--n-color-focus": "initial",
          "--n-color-disabled": "initial",
          "--n-ripple-color": "initial",
          "--n-text-color": "initial",
          "--n-text-color-hover": "initial",
          "--n-text-color-pressed": "initial",
          "--n-text-color-focus": "initial",
          "--n-text-color-disabled": "initial"
        };
        const U = R === "tertiary", mo = R === "default", i = U ? "default" : R;
        if (F) {
          const u = j || c;
          d = {
            "--n-color": "#0000",
            "--n-color-hover": "#0000",
            "--n-color-pressed": "#0000",
            "--n-color-focus": "#0000",
            "--n-color-disabled": "#0000",
            "--n-ripple-color": "#0000",
            "--n-text-color": u || o[(0, r.createKey)("textColorText", i)],
            "--n-text-color-hover": u ? (0, g.createHoverColor)(u) : o[(0, r.createKey)("textColorTextHover", i)],
            "--n-text-color-pressed": u ? (0, g.createPressedColor)(u) : o[(0, r.createKey)("textColorTextPressed", i)],
            "--n-text-color-focus": u ? (0, g.createHoverColor)(u) : o[(0, r.createKey)("textColorTextHover", i)],
            "--n-text-color-disabled": u || o[(0, r.createKey)("textColorTextDisabled", i)]
          };
        } else if (co || ao) {
          const u = j || c;
          d = {
            "--n-color": "#0000",
            "--n-color-hover": "#0000",
            "--n-color-pressed": "#0000",
            "--n-color-focus": "#0000",
            "--n-color-disabled": "#0000",
            "--n-ripple-color": c || o[(0, r.createKey)("rippleColor", i)],
            "--n-text-color": u || o[(0, r.createKey)("textColorGhost", i)],
            "--n-text-color-hover": u ? (0, g.createHoverColor)(u) : o[(0, r.createKey)("textColorGhostHover", i)],
            "--n-text-color-pressed": u ? (0, g.createPressedColor)(u) : o[(0, r.createKey)("textColorGhostPressed", i)],
            "--n-text-color-focus": u ? (0, g.createHoverColor)(u) : o[(0, r.createKey)("textColorGhostHover", i)],
            "--n-text-color-disabled": u || o[(0, r.createKey)("textColorGhostDisabled", i)]
          };
        } else if (Do) {
          const u = mo ? o.textColor : U ? o.textColorTertiary : o[(0, r.createKey)("color", i)], y = c || u, Z = R !== "default" && R !== "tertiary";
          d = {
            "--n-color": Z ? (0, P.changeColor)(y, {
              alpha: Number(o.colorOpacitySecondary)
            }) : o.colorSecondary,
            "--n-color-hover": Z ? (0, P.changeColor)(y, {
              alpha: Number(o.colorOpacitySecondaryHover)
            }) : o.colorSecondaryHover,
            "--n-color-pressed": Z ? (0, P.changeColor)(y, {
              alpha: Number(o.colorOpacitySecondaryPressed)
            }) : o.colorSecondaryPressed,
            "--n-color-focus": Z ? (0, P.changeColor)(y, {
              alpha: Number(o.colorOpacitySecondaryHover)
            }) : o.colorSecondaryHover,
            "--n-color-disabled": o.colorSecondary,
            "--n-ripple-color": "#0000",
            "--n-text-color": y,
            "--n-text-color-hover": y,
            "--n-text-color-pressed": y,
            "--n-text-color-focus": y,
            "--n-text-color-disabled": y
          };
        } else if (go || zo) {
          const u = mo ? o.textColor : U ? o.textColorTertiary : o[(0, r.createKey)("color", i)], y = c || u;
          go ? (d["--n-color"] = o.colorTertiary, d["--n-color-hover"] = o.colorTertiaryHover, d["--n-color-pressed"] = o.colorTertiaryPressed, d["--n-color-focus"] = o.colorSecondaryHover, d["--n-color-disabled"] = o.colorTertiary) : (d["--n-color"] = o.colorQuaternary, d["--n-color-hover"] = o.colorQuaternaryHover, d["--n-color-pressed"] = o.colorQuaternaryPressed, d["--n-color-focus"] = o.colorQuaternaryHover, d["--n-color-disabled"] = o.colorQuaternary), d["--n-ripple-color"] = "#0000", d["--n-text-color"] = y, d["--n-text-color-hover"] = y, d["--n-text-color-pressed"] = y, d["--n-text-color-focus"] = y, d["--n-text-color-disabled"] = y;
        } else
          d = {
            "--n-color": c || o[(0, r.createKey)("color", i)],
            "--n-color-hover": c ? (0, g.createHoverColor)(c) : o[(0, r.createKey)("colorHover", i)],
            "--n-color-pressed": c ? (0, g.createPressedColor)(c) : o[(0, r.createKey)("colorPressed", i)],
            "--n-color-focus": c ? (0, g.createHoverColor)(c) : o[(0, r.createKey)("colorFocus", i)],
            "--n-color-disabled": c || o[(0, r.createKey)("colorDisabled", i)],
            "--n-ripple-color": c || o[(0, r.createKey)("rippleColor", i)],
            "--n-text-color": j || (c ? o.textColorPrimary : U ? o.textColorTertiary : o[(0, r.createKey)("textColor", i)]),
            "--n-text-color-hover": j || (c ? o.textColorHoverPrimary : o[(0, r.createKey)("textColorHover", i)]),
            "--n-text-color-pressed": j || (c ? o.textColorPressedPrimary : o[(0, r.createKey)("textColorPressed", i)]),
            "--n-text-color-focus": j || (c ? o.textColorFocusPrimary : o[(0, r.createKey)("textColorFocus", i)]),
            "--n-text-color-disabled": j || (c ? o.textColorDisabledPrimary : o[(0, r.createKey)("textColorDisabled", i)])
          };
        let bo = {
          "--n-border": "initial",
          "--n-border-hover": "initial",
          "--n-border-pressed": "initial",
          "--n-border-focus": "initial",
          "--n-border-disabled": "initial"
        };
        F ? bo = {
          "--n-border": "none",
          "--n-border-hover": "none",
          "--n-border-pressed": "none",
          "--n-border-focus": "none",
          "--n-border-disabled": "none"
        } : bo = {
          "--n-border": o[(0, r.createKey)("border", i)],
          "--n-border-hover": o[(0, r.createKey)("borderHover", i)],
          "--n-border-pressed": o[(0, r.createKey)("borderPressed", i)],
          "--n-border-focus": o[(0, r.createKey)("borderFocus", i)],
          "--n-border-disabled": o[(0, r.createKey)("borderDisabled", i)]
        };
        const { [(0, r.createKey)("height", $)]: xo, [(0, r.createKey)("fontSize", $)]: Mo, [(0, r.createKey)("padding", $)]: Ko, [(0, r.createKey)("paddingRound", $)]: Oo, [(0, r.createKey)("iconSize", $)]: Io, [(0, r.createKey)("borderRadius", $)]: Fo, [(0, r.createKey)("iconMargin", $)]: Go, waveOpacity: Ro } = o, jo = {
          "--n-width": uo && !F ? xo : "initial",
          "--n-height": F ? "initial" : xo,
          "--n-font-size": Mo,
          "--n-padding": uo || F ? "initial" : Co ? Oo : Ko,
          "--n-icon-size": Io,
          "--n-icon-margin": Go,
          "--n-border-radius": F ? "initial" : uo || Co ? xo : Fo
        };
        return Object.assign(Object.assign(Object.assign(Object.assign({ "--n-bezier": b, "--n-bezier-ease-out": H, "--n-ripple-duration": I, "--n-opacity-disabled": K, "--n-wave-opacity": Ro }, $o), d), bo), jo);
      }), L = w ? (0, G.useThemeClass)("button", (0, a.computed)(() => {
        let l = "";
        const { dashed: b, type: H, ghost: o, text: I, color: K, round: q, circle: io, textColor: $, secondary: ao, tertiary: R, quaternary: co, strong: F } = e;
        b && (l += "a"), o && (l += "b"), I && (l += "c"), q && (l += "d"), io && (l += "e"), ao && (l += "f"), R && (l += "g"), co && (l += "h"), F && (l += "i"), K && (l += `j${(0, r.color2Class)(K)}`), $ && (l += `k${(0, r.color2Class)($)}`);
        const { value: c } = T;
        return l += `l${c[0]}`, l += `m${H[0]}`, l;
      }), J, e) : void 0;
      return {
        selfElRef: C,
        waveElRef: s,
        mergedClsPrefix: _,
        mergedFocusable: O,
        mergedSize: T,
        showBorder: v,
        enterPressed: f,
        rtlEnabled: X,
        handleMousedown: z,
        handleKeydown: so,
        handleBlur: A,
        handleKeyup: N,
        handleClick: B,
        customColorCssVars: (0, a.computed)(() => {
          const { color: l } = e;
          if (!l)
            return null;
          const b = (0, g.createHoverColor)(l);
          return {
            "--n-border-color": l,
            "--n-border-color-hover": b,
            "--n-border-color-pressed": (0, g.createPressedColor)(l),
            "--n-border-color-focus": b,
            "--n-border-color-disabled": l
          };
        }),
        cssVars: w ? void 0 : J,
        themeClass: L == null ? void 0 : L.themeClass,
        onRender: L == null ? void 0 : L.onRender
      };
    },
    render() {
      const { mergedClsPrefix: e, tag: C, onRender: s } = this;
      s == null || s();
      const f = (0, r.resolveWrappedSlot)(this.$slots.default, (v) => v && (0, a.h)("span", { class: `${e}-button__content` }, v));
      return (0, a.h)(
        C,
        { ref: "selfElRef", class: [
          this.themeClass,
          `${e}-button`,
          `${e}-button--${this.type}-type`,
          `${e}-button--${this.mergedSize}-type`,
          this.rtlEnabled && `${e}-button--rtl`,
          this.disabled && `${e}-button--disabled`,
          this.block && `${e}-button--block`,
          this.enterPressed && `${e}-button--pressed`,
          !this.text && this.dashed && `${e}-button--dashed`,
          this.color && `${e}-button--color`,
          this.secondary && `${e}-button--secondary`,
          this.loading && `${e}-button--loading`,
          this.ghost && `${e}-button--ghost`
          // required for button group border collapse
        ], tabindex: this.mergedFocusable ? 0 : -1, type: this.attrType, style: this.cssVars, disabled: this.disabled, onClick: this.handleClick, onBlur: this.handleBlur, onMousedown: this.handleMousedown, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown },
        this.iconPlacement === "right" && f,
        (0, a.h)(p.NFadeInExpandTransition, { width: !0 }, {
          default: () => (0, r.resolveWrappedSlot)(this.$slots.icon, (v) => (this.loading || this.renderIcon || v) && (0, a.h)(
            "span",
            { class: `${e}-button__icon`, style: {
              margin: (0, r.isSlotEmpty)(this.$slots.default) ? "0" : ""
            } },
            (0, a.h)(p.NIconSwitchTransition, null, {
              default: () => this.loading ? (0, a.h)(p.NBaseLoading, Object.assign({ clsPrefix: e, key: "loading", class: `${e}-icon-slot`, strokeWidth: 20 }, this.spinProps)) : (0, a.h)("div", { key: "icon", class: `${e}-icon-slot`, role: "none" }, this.renderIcon ? this.renderIcon() : v)
            })
          ))
        }),
        this.iconPlacement === "left" && f,
        this.text ? null : (0, a.h)(p.NBaseWave, { ref: "waveElRef", clsPrefix: e }),
        this.showBorder ? (0, a.h)("div", { "aria-hidden": !0, class: `${e}-button__border`, style: this.customColorCssVars }) : null,
        this.showBorder ? (0, a.h)("div", { "aria-hidden": !0, class: `${e}-button__state-border`, style: this.customColorCssVars }) : null
      );
    }
  });
  n.default = E, n.XButton = E;
})(To);
(function(n) {
  var h = M && M.__importDefault || function(D) {
    return D && D.__esModule ? D : { default: D };
  };
  Object.defineProperty(n, "__esModule", { value: !0 }), n.NxButton = n.NButton = n.buttonProps = void 0;
  var P = To;
  Object.defineProperty(n, "buttonProps", { enumerable: !0, get: function() {
    return P.buttonProps;
  } }), Object.defineProperty(n, "NButton", { enumerable: !0, get: function() {
    return h(P).default;
  } }), Object.defineProperty(n, "NxButton", { enumerable: !0, get: function() {
    return P.XButton;
  } });
})(Yo);
export {
  Yo as b,
  ro as r,
  Eo as s
};