epic-designer-cjh
Version:
基于vue3的设计器,可视化开发页面表单
236 lines (235 loc) • 7.26 kB
JavaScript
import { computed as f, inject as A, ref as K, useSlots as U, Text as M, defineComponent as h, openBlock as b, createBlock as k, resolveDynamicComponent as C, mergeProps as O, unref as t, withCtx as $, createElementBlock as N, Fragment as Q, renderSlot as B, normalizeClass as V, createCommentVNode as I, provide as R, reactive as q, toRef as T } from "vue";
import { aQ as H, ad as J, aD as G, a5 as L, a8 as W, ao as X, a6 as Y, a9 as w, af as E, ag as P, aF as Z, bC as oo } from "./index-97ce4605.js";
import { a as eo } from "./use-global-config-0bac757e.js";
import { u as to } from "./use-form-item-5dfea179.js";
import { i as x } from "./index-da336cb2.js";
import { T as no } from "./index-2b6651fc.js";
const D = Symbol("buttonGroupContextKey"), ao = (e, r) => {
H({
from: "type.text",
replacement: "link",
version: "3.0.0",
scope: "props",
ref: "https://element-plus.org/en-US/component/button.html#button-attributes"
}, f(() => e.type === "text"));
const n = A(D, void 0), s = eo("button"), { form: l } = to(), o = J(f(() => n == null ? void 0 : n.size)), i = G(), m = K(), c = U(), p = f(() => e.type || (n == null ? void 0 : n.type) || ""), S = f(() => {
var u, g, v;
return (v = (g = e.autoInsertSpace) != null ? g : (u = s.value) == null ? void 0 : u.autoInsertSpace) != null ? v : !1;
}), y = f(() => e.tag === "button" ? {
ariaDisabled: i.value || e.loading,
disabled: i.value || e.loading,
autofocus: e.autofocus,
type: e.nativeType
} : {}), _ = f(() => {
var u;
const g = (u = c.default) == null ? void 0 : u.call(c);
if (S.value && (g == null ? void 0 : g.length) === 1) {
const v = g[0];
if ((v == null ? void 0 : v.type) === M) {
const j = v.children;
return /^\p{Unified_Ideograph}{2}$/u.test(j.trim());
}
}
return !1;
});
return {
_disabled: i,
_size: o,
_type: p,
_ref: m,
_props: y,
shouldAddSpace: _,
handleClick: (u) => {
e.nativeType === "reset" && (l == null || l.resetFields()), r("click", u);
}
};
}, so = [
"default",
"primary",
"success",
"warning",
"info",
"danger",
"text",
""
], lo = ["button", "submit", "reset"], z = L({
size: W,
disabled: Boolean,
type: {
type: String,
values: so,
default: ""
},
icon: {
type: x
},
nativeType: {
type: String,
values: lo,
default: "button"
},
loading: Boolean,
loadingIcon: {
type: x,
default: () => X
},
plain: Boolean,
text: Boolean,
link: Boolean,
bg: Boolean,
autofocus: Boolean,
round: Boolean,
circle: Boolean,
color: String,
dark: Boolean,
autoInsertSpace: {
type: Boolean,
default: void 0
},
tag: {
type: Y([String, Object]),
default: "button"
}
}), ro = {
click: (e) => e instanceof MouseEvent
};
function d(e, r = 20) {
return e.mix("#141414", r).toString();
}
function io(e) {
const r = G(), n = w("button");
return f(() => {
let s = {};
const l = e.color;
if (l) {
const o = new no(l), i = e.dark ? o.tint(20).toString() : d(o, 20);
if (e.plain)
s = n.cssVarBlock({
"bg-color": e.dark ? d(o, 90) : o.tint(90).toString(),
"text-color": l,
"border-color": e.dark ? d(o, 50) : o.tint(50).toString(),
"hover-text-color": `var(${n.cssVarName("color-white")})`,
"hover-bg-color": l,
"hover-border-color": l,
"active-bg-color": i,
"active-text-color": `var(${n.cssVarName("color-white")})`,
"active-border-color": i
}), r.value && (s[n.cssVarBlockName("disabled-bg-color")] = e.dark ? d(o, 90) : o.tint(90).toString(), s[n.cssVarBlockName("disabled-text-color")] = e.dark ? d(o, 50) : o.tint(50).toString(), s[n.cssVarBlockName("disabled-border-color")] = e.dark ? d(o, 80) : o.tint(80).toString());
else {
const m = e.dark ? d(o, 30) : o.tint(30).toString(), c = o.isDark() ? `var(${n.cssVarName("color-white")})` : `var(${n.cssVarName("color-black")})`;
if (s = n.cssVarBlock({
"bg-color": l,
"text-color": c,
"border-color": l,
"hover-bg-color": m,
"hover-text-color": c,
"hover-border-color": m,
"active-bg-color": i,
"active-border-color": i
}), r.value) {
const p = e.dark ? d(o, 50) : o.tint(50).toString();
s[n.cssVarBlockName("disabled-bg-color")] = p, s[n.cssVarBlockName("disabled-text-color")] = e.dark ? "rgba(255, 255, 255, 0.5)" : `var(${n.cssVarName("color-white")})`, s[n.cssVarBlockName("disabled-border-color")] = p;
}
}
}
return s;
});
}
const co = h({
name: "ElButton"
}), uo = /* @__PURE__ */ h({
...co,
props: z,
emits: ro,
setup(e, { expose: r, emit: n }) {
const s = e, l = io(s), o = w("button"), { _ref: i, _size: m, _type: c, _disabled: p, _props: S, shouldAddSpace: y, handleClick: _ } = ao(s, n);
return r({
ref: i,
size: m,
type: c,
disabled: p,
shouldAddSpace: y
}), (a, u) => (b(), k(C(a.tag), O({
ref_key: "_ref",
ref: i
}, t(S), {
class: [
t(o).b(),
t(o).m(t(c)),
t(o).m(t(m)),
t(o).is("disabled", t(p)),
t(o).is("loading", a.loading),
t(o).is("plain", a.plain),
t(o).is("round", a.round),
t(o).is("circle", a.circle),
t(o).is("text", a.text),
t(o).is("link", a.link),
t(o).is("has-bg", a.bg)
],
style: t(l),
onClick: t(_)
}), {
default: $(() => [
a.loading ? (b(), N(Q, { key: 0 }, [
a.$slots.loading ? B(a.$slots, "loading", { key: 0 }) : (b(), k(t(E), {
key: 1,
class: V(t(o).is("loading"))
}, {
default: $(() => [
(b(), k(C(a.loadingIcon)))
]),
_: 1
}, 8, ["class"]))
], 64)) : a.icon || a.$slots.icon ? (b(), k(t(E), { key: 1 }, {
default: $(() => [
a.icon ? (b(), k(C(a.icon), { key: 0 })) : B(a.$slots, "icon", { key: 1 })
]),
_: 3
})) : I("v-if", !0),
a.$slots.default ? (b(), N("span", {
key: 2,
class: V({ [t(o).em("text", "expand")]: t(y) })
}, [
B(a.$slots, "default")
], 2)) : I("v-if", !0)
]),
_: 3
}, 16, ["class", "style", "onClick"]));
}
});
var bo = /* @__PURE__ */ P(uo, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/button/src/button.vue"]]);
const mo = {
size: z.size,
type: z.type
}, po = h({
name: "ElButtonGroup"
}), fo = /* @__PURE__ */ h({
...po,
props: mo,
setup(e) {
const r = e;
R(D, q({
size: T(r, "size"),
type: T(r, "type")
}));
const n = w("button");
return (s, l) => (b(), N("div", {
class: V(`${t(n).b("group")}`)
}, [
B(s.$slots, "default")
], 2));
}
});
var F = /* @__PURE__ */ P(fo, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/button/src/button-group.vue"]]);
const So = Z(bo, {
ButtonGroup: F
});
oo(F);
export {
So as E,
lo as a,
ro as b,
z as c,
so as d,
D as e
};