epic-designer-cjh
Version:
基于vue3的设计器,可视化开发页面表单
951 lines (950 loc) • 32.6 kB
JavaScript
import { defineComponent as so, toRef as bo, h as l, ref as N, onBeforeUnmount as Ho, nextTick as Bo, watchEffect as Do, inject as Eo, computed as Q } from "vue";
import { a as fo, c as Y } from "./index-4562f02c.js";
import { b$ as Fo, c0 as Io } from "./index-97ce4605.js";
import { c as p, a as j, b as s, d as Go, e as D, f as lo, u as Ro, g as Wo } from "./use-rtl-d05cb593.js";
import { i as no, N as xo } from "./icon-switch.cssr-d74fe364.js";
import { c as _o, u as ho, a as Oo, b as Mo } from "./light-76d75dc8.js";
import { u as No } from "./use-memo-01b53d71.js";
import { u as jo } from "./use-form-item-4d43edfb.js";
import { c as t } from "./create-key-76a2bf3d.js";
import { r as co, i as Lo } from "./resolve-slot-d8544b74.js";
import { N as Ko } from "./FadeInExpandTransition-596a1c51.js";
import { u as po } from "./use-style-b9e822e4.js";
function uo(o) {
return o.replace(/#|\(|\)|,|\s/g, "_");
}
const X = typeof document < "u" && typeof window < "u", Vo = p([p("@keyframes loading-container-rotate", `
to {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
`), p("@keyframes loading-layer-rotate", `
12.5% {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
25% {
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
37.5% {
-webkit-transform: rotate(405deg);
transform: rotate(405deg);
}
50% {
-webkit-transform: rotate(540deg);
transform: rotate(540deg);
}
62.5% {
-webkit-transform: rotate(675deg);
transform: rotate(675deg);
}
75% {
-webkit-transform: rotate(810deg);
transform: rotate(810deg);
}
87.5% {
-webkit-transform: rotate(945deg);
transform: rotate(945deg);
}
100% {
-webkit-transform: rotate(1080deg);
transform: rotate(1080deg);
}
`), p("@keyframes loading-left-spin", `
from {
-webkit-transform: rotate(265deg);
transform: rotate(265deg);
}
50% {
-webkit-transform: rotate(130deg);
transform: rotate(130deg);
}
to {
-webkit-transform: rotate(265deg);
transform: rotate(265deg);
}
`), p("@keyframes loading-right-spin", `
from {
-webkit-transform: rotate(-265deg);
transform: rotate(-265deg);
}
50% {
-webkit-transform: rotate(-130deg);
transform: rotate(-130deg);
}
to {
-webkit-transform: rotate(-265deg);
transform: rotate(-265deg);
}
`), j("base-loading", `
position: relative;
line-height: 0;
width: 1em;
height: 1em;
`, [s("transition-wrapper", `
position: absolute;
width: 100%;
height: 100%;
`, [no()]), s("container", `
display: inline-flex;
position: relative;
direction: ltr;
line-height: 0;
animation: loading-container-rotate 1568.2352941176ms linear infinite;
font-size: 0;
letter-spacing: 0;
white-space: nowrap;
opacity: 1;
width: 100%;
height: 100%;
`, [s("svg", `
stroke: var(--n-text-color);
fill: transparent;
position: absolute;
height: 100%;
overflow: hidden;
`), s("container-layer", `
position: absolute;
width: 100%;
height: 100%;
animation: loading-layer-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
`, [s("container-layer-left", `
display: inline-flex;
position: relative;
width: 50%;
height: 100%;
overflow: hidden;
`, [s("svg", `
animation: loading-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
width: 200%;
`)]), s("container-layer-patch", `
position: absolute;
top: 0;
left: 47.5%;
box-sizing: border-box;
width: 5%;
height: 100%;
overflow: hidden;
`, [s("svg", `
left: -900%;
width: 2000%;
transform: rotate(180deg);
`)]), s("container-layer-right", `
display: inline-flex;
position: relative;
width: 50%;
height: 100%;
overflow: hidden;
`, [s("svg", `
animation: loading-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
left: -100%;
width: 200%;
`)])])]), s("placeholder", `
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
`, [no({
left: "50%",
top: "50%",
originalTransform: "translateX(-50%) translateY(-50%)"
})])])]), qo = {
strokeWidth: {
type: Number,
default: 28
},
stroke: {
type: String,
default: void 0
}
}, Qo = so({
name: "BaseLoading",
props: Object.assign({ clsPrefix: {
type: String,
required: !0
}, show: {
type: Boolean,
default: !0
}, scale: {
type: Number,
default: 1
}, radius: {
type: Number,
default: 100
} }, qo),
setup(o) {
po("-base-loading", Vo, bo(o, "clsPrefix"));
},
render() {
const { clsPrefix: o, radius: d, strokeWidth: x, stroke: u, scale: C } = this, g = d / C;
return l(
"div",
{ class: `${o}-base-loading`, role: "img", "aria-label": "loading" },
l(xo, null, {
default: () => this.show ? l(
"div",
{ key: "icon", class: `${o}-base-loading__transition-wrapper` },
l(
"div",
{ class: `${o}-base-loading__container` },
l(
"div",
{ class: `${o}-base-loading__container-layer` },
l(
"div",
{ class: `${o}-base-loading__container-layer-left` },
l(
"svg",
{ class: `${o}-base-loading__svg`, viewBox: `0 0 ${2 * g} ${2 * g}`, xmlns: "http://www.w3.org/2000/svg", style: { color: u } },
l("circle", { fill: "none", stroke: "currentColor", "stroke-width": x, "stroke-linecap": "round", cx: g, cy: g, r: d - x / 2, "stroke-dasharray": 4.91 * d, "stroke-dashoffset": 2.46 * d })
)
),
l(
"div",
{ class: `${o}-base-loading__container-layer-patch` },
l(
"svg",
{ class: `${o}-base-loading__svg`, viewBox: `0 0 ${2 * g} ${2 * g}`, xmlns: "http://www.w3.org/2000/svg", style: { color: u } },
l("circle", { fill: "none", stroke: "currentColor", "stroke-width": x, "stroke-linecap": "round", cx: g, cy: g, r: d - x / 2, "stroke-dasharray": 4.91 * d, "stroke-dashoffset": 2.46 * d })
)
),
l(
"div",
{ class: `${o}-base-loading__container-layer-right` },
l(
"svg",
{ class: `${o}-base-loading__svg`, viewBox: `0 0 ${2 * g} ${2 * g}`, xmlns: "http://www.w3.org/2000/svg", style: { color: u } },
l("circle", { fill: "none", stroke: "currentColor", "stroke-width": x, "stroke-linecap": "round", cx: g, cy: g, r: d - x / 2, "stroke-dasharray": 4.91 * d, "stroke-dashoffset": 2.46 * d })
)
)
)
)
) : l("div", { key: "placeholder", class: `${o}-base-loading__placeholder` }, this.$slots)
})
);
}
}), Yo = j("base-wave", `
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
border-radius: inherit;
`), Ao = so({
name: "BaseWave",
props: {
clsPrefix: {
type: String,
required: !0
}
},
setup(o) {
po("-base-wave", Yo, bo(o, "clsPrefix"));
const d = N(null), x = N(!1);
let u = null;
return Ho(() => {
u !== null && window.clearTimeout(u);
}), {
active: x,
selfRef: d,
play() {
u !== null && (window.clearTimeout(u), x.value = !1, u = null), Bo(() => {
var C;
(C = d.value) === null || C === void 0 || C.offsetHeight, x.value = !0, u = window.setTimeout(() => {
x.value = !1, u = null;
}, 1e3);
});
}
};
},
render() {
const { clsPrefix: o } = this;
return l("div", { ref: "selfRef", "aria-hidden": !0, class: [
`${o}-base-wave`,
this.active && `${o}-base-wave--active`
] });
}
}), {
cubicBezierEaseInOut: G
} = Go;
function Xo({
duration: o = ".2s",
delay: d = ".1s"
} = {}) {
return [p("&.fade-in-width-expand-transition-leave-from, &.fade-in-width-expand-transition-enter-to", {
opacity: 1
}), p("&.fade-in-width-expand-transition-leave-to, &.fade-in-width-expand-transition-enter-from", `
opacity: 0!important;
margin-left: 0!important;
margin-right: 0!important;
`), p("&.fade-in-width-expand-transition-leave-active", `
overflow: hidden;
transition:
opacity ${o} ${G},
max-width ${o} ${G} ${d},
margin-left ${o} ${G} ${d},
margin-right ${o} ${G} ${d};
`), p("&.fade-in-width-expand-transition-enter-active", `
overflow: hidden;
transition:
opacity ${o} ${G} ${d},
max-width ${o} ${G},
margin-left ${o} ${G},
margin-right ${o} ${G};
`)];
}
const Uo = X && "chrome" in window;
X && navigator.userAgent.includes("Firefox");
const Jo = X && navigator.userAgent.includes("Safari") && !Uo;
function W(o) {
return fo(o, [255, 255, 255, 0.16]);
}
function A(o) {
return fo(o, [0, 0, 0, 0.12]);
}
const Zo = Fo("n-button-group"), oe = {
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"
}, ee = (o) => {
const { heightTiny: d, heightSmall: x, heightMedium: u, heightLarge: C, borderRadius: g, fontSizeTiny: O, fontSizeSmall: M, fontSizeMedium: U, fontSizeLarge: J, opacityDisabled: Z, textColor2: S, textColor3: oo, primaryColorHover: m, primaryColorPressed: T, borderColor: L, primaryColor: H, baseColor: a, infoColor: B, infoColorHover: w, infoColorPressed: r, successColor: i, successColorHover: h, successColorPressed: e, warningColor: $, warningColorHover: P, warningColorPressed: F, errorColor: k, errorColorHover: v, errorColorPressed: I, fontWeight: E, buttonColor2: _, buttonColor2Hover: z, buttonColor2Pressed: c, fontWeightStrong: K } = o;
return Object.assign(Object.assign({}, oe), {
heightTiny: d,
heightSmall: x,
heightMedium: u,
heightLarge: C,
borderRadiusTiny: g,
borderRadiusSmall: g,
borderRadiusMedium: g,
borderRadiusLarge: g,
fontSizeTiny: O,
fontSizeSmall: M,
fontSizeMedium: U,
fontSizeLarge: J,
opacityDisabled: Z,
// secondary
colorOpacitySecondary: "0.16",
colorOpacitySecondaryHover: "0.22",
colorOpacitySecondaryPressed: "0.28",
colorSecondary: _,
colorSecondaryHover: z,
colorSecondaryPressed: c,
// tertiary
colorTertiary: _,
colorTertiaryHover: z,
colorTertiaryPressed: c,
// quaternary
colorQuaternary: "#0000",
colorQuaternaryHover: z,
colorQuaternaryPressed: c,
// default type
color: "#0000",
colorHover: "#0000",
colorPressed: "#0000",
colorFocus: "#0000",
colorDisabled: "#0000",
textColor: S,
textColorTertiary: oo,
textColorHover: m,
textColorPressed: T,
textColorFocus: m,
textColorDisabled: S,
textColorText: S,
textColorTextHover: m,
textColorTextPressed: T,
textColorTextFocus: m,
textColorTextDisabled: S,
textColorGhost: S,
textColorGhostHover: m,
textColorGhostPressed: T,
textColorGhostFocus: m,
textColorGhostDisabled: S,
border: `1px solid ${L}`,
borderHover: `1px solid ${m}`,
borderPressed: `1px solid ${T}`,
borderFocus: `1px solid ${m}`,
borderDisabled: `1px solid ${L}`,
rippleColor: H,
// primary
colorPrimary: H,
colorHoverPrimary: m,
colorPressedPrimary: T,
colorFocusPrimary: m,
colorDisabledPrimary: H,
textColorPrimary: a,
textColorHoverPrimary: a,
textColorPressedPrimary: a,
textColorFocusPrimary: a,
textColorDisabledPrimary: a,
textColorTextPrimary: H,
textColorTextHoverPrimary: m,
textColorTextPressedPrimary: T,
textColorTextFocusPrimary: m,
textColorTextDisabledPrimary: S,
textColorGhostPrimary: H,
textColorGhostHoverPrimary: m,
textColorGhostPressedPrimary: T,
textColorGhostFocusPrimary: m,
textColorGhostDisabledPrimary: H,
borderPrimary: `1px solid ${H}`,
borderHoverPrimary: `1px solid ${m}`,
borderPressedPrimary: `1px solid ${T}`,
borderFocusPrimary: `1px solid ${m}`,
borderDisabledPrimary: `1px solid ${H}`,
rippleColorPrimary: H,
// info
colorInfo: B,
colorHoverInfo: w,
colorPressedInfo: r,
colorFocusInfo: w,
colorDisabledInfo: B,
textColorInfo: a,
textColorHoverInfo: a,
textColorPressedInfo: a,
textColorFocusInfo: a,
textColorDisabledInfo: a,
textColorTextInfo: B,
textColorTextHoverInfo: w,
textColorTextPressedInfo: r,
textColorTextFocusInfo: w,
textColorTextDisabledInfo: S,
textColorGhostInfo: B,
textColorGhostHoverInfo: w,
textColorGhostPressedInfo: r,
textColorGhostFocusInfo: w,
textColorGhostDisabledInfo: B,
borderInfo: `1px solid ${B}`,
borderHoverInfo: `1px solid ${w}`,
borderPressedInfo: `1px solid ${r}`,
borderFocusInfo: `1px solid ${w}`,
borderDisabledInfo: `1px solid ${B}`,
rippleColorInfo: B,
// success
colorSuccess: i,
colorHoverSuccess: h,
colorPressedSuccess: e,
colorFocusSuccess: h,
colorDisabledSuccess: i,
textColorSuccess: a,
textColorHoverSuccess: a,
textColorPressedSuccess: a,
textColorFocusSuccess: a,
textColorDisabledSuccess: a,
textColorTextSuccess: i,
textColorTextHoverSuccess: h,
textColorTextPressedSuccess: e,
textColorTextFocusSuccess: h,
textColorTextDisabledSuccess: S,
textColorGhostSuccess: i,
textColorGhostHoverSuccess: h,
textColorGhostPressedSuccess: e,
textColorGhostFocusSuccess: h,
textColorGhostDisabledSuccess: i,
borderSuccess: `1px solid ${i}`,
borderHoverSuccess: `1px solid ${h}`,
borderPressedSuccess: `1px solid ${e}`,
borderFocusSuccess: `1px solid ${h}`,
borderDisabledSuccess: `1px solid ${i}`,
rippleColorSuccess: i,
// warning
colorWarning: $,
colorHoverWarning: P,
colorPressedWarning: F,
colorFocusWarning: P,
colorDisabledWarning: $,
textColorWarning: a,
textColorHoverWarning: a,
textColorPressedWarning: a,
textColorFocusWarning: a,
textColorDisabledWarning: a,
textColorTextWarning: $,
textColorTextHoverWarning: P,
textColorTextPressedWarning: F,
textColorTextFocusWarning: P,
textColorTextDisabledWarning: S,
textColorGhostWarning: $,
textColorGhostHoverWarning: P,
textColorGhostPressedWarning: F,
textColorGhostFocusWarning: P,
textColorGhostDisabledWarning: $,
borderWarning: `1px solid ${$}`,
borderHoverWarning: `1px solid ${P}`,
borderPressedWarning: `1px solid ${F}`,
borderFocusWarning: `1px solid ${P}`,
borderDisabledWarning: `1px solid ${$}`,
rippleColorWarning: $,
// error
colorError: k,
colorHoverError: v,
colorPressedError: I,
colorFocusError: v,
colorDisabledError: k,
textColorError: a,
textColorHoverError: a,
textColorPressedError: a,
textColorFocusError: a,
textColorDisabledError: a,
textColorTextError: k,
textColorTextHoverError: v,
textColorTextPressedError: I,
textColorTextFocusError: v,
textColorTextDisabledError: S,
textColorGhostError: k,
textColorGhostHoverError: v,
textColorGhostPressedError: I,
textColorGhostFocusError: v,
textColorGhostDisabledError: k,
borderError: `1px solid ${k}`,
borderHoverError: `1px solid ${v}`,
borderPressedError: `1px solid ${I}`,
borderFocusError: `1px solid ${v}`,
borderDisabledError: `1px solid ${k}`,
rippleColorError: k,
waveOpacity: "0.6",
fontWeight: E,
fontWeightStrong: K
});
}, re = {
name: "Button",
common: _o,
self: ee
}, te = re, ne = p([j("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);
`, [D("color", [s("border", {
borderColor: "var(--n-border-color)"
}), D("disabled", [s("border", {
borderColor: "var(--n-border-color-disabled)"
})]), lo("disabled", [p("&:focus", [s("state-border", {
borderColor: "var(--n-border-color-focus)"
})]), p("&:hover", [s("state-border", {
borderColor: "var(--n-border-color-hover)"
})]), p("&:active", [s("state-border", {
borderColor: "var(--n-border-color-pressed)"
})]), D("pressed", [s("state-border", {
borderColor: "var(--n-border-color-pressed)"
})])])]), D("disabled", {
backgroundColor: "var(--n-color-disabled)",
color: "var(--n-text-color-disabled)"
}, [s("border", {
border: "var(--n-border-disabled)"
})]), lo("disabled", [p("&:focus", {
backgroundColor: "var(--n-color-focus)",
color: "var(--n-text-color-focus)"
}, [s("state-border", {
border: "var(--n-border-focus)"
})]), p("&:hover", {
backgroundColor: "var(--n-color-hover)",
color: "var(--n-text-color-hover)"
}, [s("state-border", {
border: "var(--n-border-hover)"
})]), p("&:active", {
backgroundColor: "var(--n-color-pressed)",
color: "var(--n-text-color-pressed)"
}, [s("state-border", {
border: "var(--n-border-pressed)"
})]), D("pressed", {
backgroundColor: "var(--n-color-pressed)",
color: "var(--n-text-color-pressed)"
}, [s("state-border", {
border: "var(--n-border-pressed)"
})])]), D("loading", "cursor: wait;"), j("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);
`, [D("active", {
zIndex: 1,
animationName: "button-wave-spread, button-wave-opacity"
})]), X && "MozBoxSizing" in document.createElement("div").style ? p("&::moz-focus-inner", {
border: 0
}) : null, s("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;
`), s("border", {
border: "var(--n-border)"
}), s("state-border", {
border: "var(--n-border)",
borderColor: "#0000",
zIndex: 1
}), s("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;
`, [j("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;
`, [no({
top: "50%",
originalTransform: "translateY(-50%)"
})]), Xo()]), s("content", `
display: flex;
align-items: center;
flex-wrap: nowrap;
min-width: 0;
`, [p("~", [s("icon", {
margin: "var(--n-icon-margin)",
marginRight: 0
})])]), D("block", `
display: flex;
width: 100%;
`), D("dashed", [s("border, state-border", {
borderStyle: "dashed !important"
})]), D("disabled", {
cursor: "not-allowed",
opacity: "var(--n-opacity-disabled)"
})]), p("@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)"
}
}), p("@keyframes button-wave-opacity", {
from: {
opacity: "var(--n-wave-opacity)"
},
to: {
opacity: 0
}
})]), se = Object.assign(Object.assign({}, ho.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: !Jo
} }), ie = so({
name: "Button",
props: se,
setup(o) {
process.env.NODE_ENV !== "production" && Do(() => {
const { dashed: r, ghost: i, text: h, secondary: e, tertiary: $, quaternary: P } = o;
(r || i || h) && (e || $ || P) && Io("button", "`dashed`, `ghost` and `text` props can't be used along with `secondary`, `tertiary` and `quaterary` props.");
});
const d = N(null), x = N(null), u = N(!1), C = No(() => !o.quaternary && !o.tertiary && !o.secondary && !o.text && (!o.color || o.ghost || o.dashed) && o.bordered), g = Eo(Zo, {}), { mergedSizeRef: O } = jo({}, {
defaultSize: "medium",
mergedSize: (r) => {
const { size: i } = o;
if (i)
return i;
const { size: h } = g;
if (h)
return h;
const { mergedSize: e } = r || {};
return e ? e.value : "medium";
}
}), M = Q(() => o.focusable && !o.disabled), U = (r) => {
var i;
M.value || r.preventDefault(), !o.nativeFocusBehavior && (r.preventDefault(), !o.disabled && M.value && ((i = d.value) === null || i === void 0 || i.focus({ preventScroll: !0 })));
}, J = (r) => {
var i;
if (!o.disabled && !o.loading) {
const { onClick: h } = o;
h && Mo(h, r), o.text || (i = x.value) === null || i === void 0 || i.play();
}
}, Z = (r) => {
switch (r.key) {
case "Enter":
if (!o.keyboard)
return;
u.value = !1;
}
}, S = (r) => {
switch (r.key) {
case "Enter":
if (!o.keyboard || o.loading) {
r.preventDefault();
return;
}
u.value = !0;
}
}, oo = () => {
u.value = !1;
}, { inlineThemeDisabled: m, mergedClsPrefixRef: T, mergedRtlRef: L } = Ro(o), H = ho("Button", "-button", ne, te, o, T), a = Wo("Button", L, T), B = Q(() => {
const r = H.value, { common: { cubicBezierEaseInOut: i, cubicBezierEaseOut: h }, self: e } = r, { rippleDuration: $, opacityDisabled: P, fontWeight: F, fontWeightStrong: k } = e, v = O.value, { dashed: I, type: E, ghost: _, text: z, color: c, round: K, circle: eo, textColor: R, secondary: go, tertiary: io, quaternary: mo, strong: vo } = o, yo = {
"font-weight": vo ? k : F
};
let b = {
"--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 V = E === "tertiary", ao = E === "default", n = V ? "default" : E;
if (z) {
const f = R || c;
b = {
"--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": f || e[t("textColorText", n)],
"--n-text-color-hover": f ? W(f) : e[t("textColorTextHover", n)],
"--n-text-color-pressed": f ? A(f) : e[t("textColorTextPressed", n)],
"--n-text-color-focus": f ? W(f) : e[t("textColorTextHover", n)],
"--n-text-color-disabled": f || e[t("textColorTextDisabled", n)]
};
} else if (_ || I) {
const f = R || c;
b = {
"--n-color": "#0000",
"--n-color-hover": "#0000",
"--n-color-pressed": "#0000",
"--n-color-focus": "#0000",
"--n-color-disabled": "#0000",
"--n-ripple-color": c || e[t("rippleColor", n)],
"--n-text-color": f || e[t("textColorGhost", n)],
"--n-text-color-hover": f ? W(f) : e[t("textColorGhostHover", n)],
"--n-text-color-pressed": f ? A(f) : e[t("textColorGhostPressed", n)],
"--n-text-color-focus": f ? W(f) : e[t("textColorGhostHover", n)],
"--n-text-color-disabled": f || e[t("textColorGhostDisabled", n)]
};
} else if (go) {
const f = ao ? e.textColor : V ? e.textColorTertiary : e[t("color", n)], y = c || f, q = E !== "default" && E !== "tertiary";
b = {
"--n-color": q ? Y(y, {
alpha: Number(e.colorOpacitySecondary)
}) : e.colorSecondary,
"--n-color-hover": q ? Y(y, {
alpha: Number(e.colorOpacitySecondaryHover)
}) : e.colorSecondaryHover,
"--n-color-pressed": q ? Y(y, {
alpha: Number(e.colorOpacitySecondaryPressed)
}) : e.colorSecondaryPressed,
"--n-color-focus": q ? Y(y, {
alpha: Number(e.colorOpacitySecondaryHover)
}) : e.colorSecondaryHover,
"--n-color-disabled": e.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 (io || mo) {
const f = ao ? e.textColor : V ? e.textColorTertiary : e[t("color", n)], y = c || f;
io ? (b["--n-color"] = e.colorTertiary, b["--n-color-hover"] = e.colorTertiaryHover, b["--n-color-pressed"] = e.colorTertiaryPressed, b["--n-color-focus"] = e.colorSecondaryHover, b["--n-color-disabled"] = e.colorTertiary) : (b["--n-color"] = e.colorQuaternary, b["--n-color-hover"] = e.colorQuaternaryHover, b["--n-color-pressed"] = e.colorQuaternaryPressed, b["--n-color-focus"] = e.colorQuaternaryHover, b["--n-color-disabled"] = e.colorQuaternary), b["--n-ripple-color"] = "#0000", b["--n-text-color"] = y, b["--n-text-color-hover"] = y, b["--n-text-color-pressed"] = y, b["--n-text-color-focus"] = y, b["--n-text-color-disabled"] = y;
} else
b = {
"--n-color": c || e[t("color", n)],
"--n-color-hover": c ? W(c) : e[t("colorHover", n)],
"--n-color-pressed": c ? A(c) : e[t("colorPressed", n)],
"--n-color-focus": c ? W(c) : e[t("colorFocus", n)],
"--n-color-disabled": c || e[t("colorDisabled", n)],
"--n-ripple-color": c || e[t("rippleColor", n)],
"--n-text-color": R || (c ? e.textColorPrimary : V ? e.textColorTertiary : e[t("textColor", n)]),
"--n-text-color-hover": R || (c ? e.textColorHoverPrimary : e[t("textColorHover", n)]),
"--n-text-color-pressed": R || (c ? e.textColorPressedPrimary : e[t("textColorPressed", n)]),
"--n-text-color-focus": R || (c ? e.textColorFocusPrimary : e[t("textColorFocus", n)]),
"--n-text-color-disabled": R || (c ? e.textColorDisabledPrimary : e[t("textColorDisabled", n)])
};
let ro = {
"--n-border": "initial",
"--n-border-hover": "initial",
"--n-border-pressed": "initial",
"--n-border-focus": "initial",
"--n-border-disabled": "initial"
};
z ? ro = {
"--n-border": "none",
"--n-border-hover": "none",
"--n-border-pressed": "none",
"--n-border-focus": "none",
"--n-border-disabled": "none"
} : ro = {
"--n-border": e[t("border", n)],
"--n-border-hover": e[t("borderHover", n)],
"--n-border-pressed": e[t("borderPressed", n)],
"--n-border-focus": e[t("borderFocus", n)],
"--n-border-disabled": e[t("borderDisabled", n)]
};
const { [t("height", v)]: to, [t("fontSize", v)]: Co, [t("padding", v)]: wo, [t("paddingRound", v)]: Po, [t("iconSize", v)]: $o, [t("borderRadius", v)]: So, [t("iconMargin", v)]: To, waveOpacity: ko } = e, zo = {
"--n-width": eo && !z ? to : "initial",
"--n-height": z ? "initial" : to,
"--n-font-size": Co,
"--n-padding": eo || z ? "initial" : K ? Po : wo,
"--n-icon-size": $o,
"--n-icon-margin": To,
"--n-border-radius": z ? "initial" : eo || K ? to : So
};
return Object.assign(Object.assign(Object.assign(Object.assign({ "--n-bezier": i, "--n-bezier-ease-out": h, "--n-ripple-duration": $, "--n-opacity-disabled": P, "--n-wave-opacity": ko }, yo), b), ro), zo);
}), w = m ? Oo("button", Q(() => {
let r = "";
const { dashed: i, type: h, ghost: e, text: $, color: P, round: F, circle: k, textColor: v, secondary: I, tertiary: E, quaternary: _, strong: z } = o;
i && (r += "a"), e && (r += "b"), $ && (r += "c"), F && (r += "d"), k && (r += "e"), I && (r += "f"), E && (r += "g"), _ && (r += "h"), z && (r += "i"), P && (r += "j" + uo(P)), v && (r += "k" + uo(v));
const { value: c } = O;
return r += "l" + c[0], r += "m" + h[0], r;
}), B, o) : void 0;
return {
selfElRef: d,
waveElRef: x,
mergedClsPrefix: T,
mergedFocusable: M,
mergedSize: O,
showBorder: C,
enterPressed: u,
rtlEnabled: a,
handleMousedown: U,
handleKeydown: S,
handleBlur: oo,
handleKeyup: Z,
handleClick: J,
customColorCssVars: Q(() => {
const { color: r } = o;
if (!r)
return null;
const i = W(r);
return {
"--n-border-color": r,
"--n-border-color-hover": i,
"--n-border-color-pressed": A(r),
"--n-border-color-focus": i,
"--n-border-color-disabled": r
};
}),
cssVars: m ? void 0 : B,
themeClass: w == null ? void 0 : w.themeClass,
onRender: w == null ? void 0 : w.onRender
};
},
render() {
const { mergedClsPrefix: o, tag: d, onRender: x } = this;
x == null || x();
const u = co(this.$slots.default, (C) => C && l("span", { class: `${o}-button__content` }, C));
return l(
d,
{ ref: "selfElRef", class: [
this.themeClass,
`${o}-button`,
`${o}-button--${this.type}-type`,
`${o}-button--${this.mergedSize}-type`,
this.rtlEnabled && `${o}-button--rtl`,
this.disabled && `${o}-button--disabled`,
this.block && `${o}-button--block`,
this.enterPressed && `${o}-button--pressed`,
!this.text && this.dashed && `${o}-button--dashed`,
this.color && `${o}-button--color`,
this.secondary && `${o}-button--secondary`,
this.loading && `${o}-button--loading`,
this.ghost && `${o}-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" && u,
l(Ko, { width: !0 }, {
default: () => co(this.$slots.icon, (C) => (this.loading || this.renderIcon || C) && l(
"span",
{ class: `${o}-button__icon`, style: {
margin: Lo(this.$slots.default) ? "0" : ""
} },
l(xo, null, {
default: () => this.loading ? l(Qo, { clsPrefix: o, key: "loading", class: `${o}-icon-slot`, strokeWidth: 20 }) : l("div", { key: "icon", class: `${o}-icon-slot`, role: "none" }, this.renderIcon ? this.renderIcon() : C)
})
))
}),
this.iconPlacement === "left" && u,
this.text ? null : l(Ao, { ref: "waveElRef", clsPrefix: o }),
this.showBorder ? l("div", { "aria-hidden": !0, class: `${o}-button__border`, style: this.customColorCssVars }) : null,
this.showBorder ? l("div", { "aria-hidden": !0, class: `${o}-button__state-border`, style: this.customColorCssVars }) : null
);
}
}), ve = ie;
export {
ve as N,
te as b,
X as i
};