ingenious-flow-designer
Version:
[演示地址](http://antd-vben5-pro.madong.tech/)
296 lines (295 loc) • 10.4 kB
JavaScript
import { computed, inject, ref, useSlots, Text, defineComponent, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, createElementBlock, Fragment, renderSlot, normalizeClass, createCommentVNode, provide, reactive, toRef } from "vue";
import { i as iconPropType, l as loading_default, E as ElIcon } from "./icon-BjcUSrq3.js";
import { u as useDeprecated } from "./index-BAOcmYcy.js";
import { u as useGlobalConfig } from "./use-global-config-Bs4LkZX1.js";
import { u as useFormItem, a as useFormSize, b as useFormDisabled } from "./use-form-common-props-D9bNSy3B.js";
import { b as buildProps, d as definePropType, u as useNamespace, _ as _export_sfc, w as withInstall, a as withNoopInstall } from "./install-DW2-zxb6.js";
import { u as useSizeProp } from "./index-Bg0OtIyq.js";
import { T as TinyColor } from "./index-i2BXpzPC.js";
const buttonGroupContextKey = Symbol("buttonGroupContextKey");
const useButton = (props, emit) => {
useDeprecated({
from: "type.text",
replacement: "link",
version: "3.0.0",
scope: "props",
ref: "https://element-plus.org/en-US/component/button.html#button-attributes"
}, computed(() => props.type === "text"));
const buttonGroupContext = inject(buttonGroupContextKey, void 0);
const globalConfig = useGlobalConfig("button");
const { form } = useFormItem();
const _size = useFormSize(computed(() => buttonGroupContext == null ? void 0 : buttonGroupContext.size));
const _disabled = useFormDisabled();
const _ref = ref();
const slots = useSlots();
const _type = computed(() => props.type || (buttonGroupContext == null ? void 0 : buttonGroupContext.type) || "");
const autoInsertSpace = computed(() => {
var _a, _b, _c;
return (_c = (_b = props.autoInsertSpace) != null ? _b : (_a = globalConfig.value) == null ? void 0 : _a.autoInsertSpace) != null ? _c : false;
});
const _props = computed(() => {
if (props.tag === "button") {
return {
ariaDisabled: _disabled.value || props.loading,
disabled: _disabled.value || props.loading,
autofocus: props.autofocus,
type: props.nativeType
};
}
return {};
});
const shouldAddSpace = computed(() => {
var _a;
const defaultSlot = (_a = slots.default) == null ? void 0 : _a.call(slots);
if (autoInsertSpace.value && (defaultSlot == null ? void 0 : defaultSlot.length) === 1) {
const slot = defaultSlot[0];
if ((slot == null ? void 0 : slot.type) === Text) {
const text = slot.children;
return new RegExp("^\\p{Unified_Ideograph}{2}$", "u").test(text.trim());
}
}
return false;
});
const handleClick = (evt) => {
if (_disabled.value || props.loading) {
evt.stopPropagation();
return;
}
if (props.nativeType === "reset") {
form == null ? void 0 : form.resetFields();
}
emit("click", evt);
};
return {
_disabled,
_size,
_type,
_ref,
_props,
shouldAddSpace,
handleClick
};
};
const buttonTypes = [
"default",
"primary",
"success",
"warning",
"info",
"danger",
"text",
""
];
const buttonNativeTypes = ["button", "submit", "reset"];
const buttonProps = buildProps({
size: useSizeProp,
disabled: Boolean,
type: {
type: String,
values: buttonTypes,
default: ""
},
icon: {
type: iconPropType
},
nativeType: {
type: String,
values: buttonNativeTypes,
default: "button"
},
loading: Boolean,
loadingIcon: {
type: iconPropType,
default: () => loading_default
},
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: definePropType([String, Object]),
default: "button"
}
});
const buttonEmits = {
click: (evt) => evt instanceof MouseEvent
};
function darken(color, amount = 20) {
return color.mix("#141414", amount).toString();
}
function useButtonCustomStyle(props) {
const _disabled = useFormDisabled();
const ns = useNamespace("button");
return computed(() => {
let styles = {};
let buttonColor = props.color;
if (buttonColor) {
const match = buttonColor.match(/var\((.*?)\)/);
if (match) {
buttonColor = window.getComputedStyle(window.document.documentElement).getPropertyValue(match[1]);
}
const color = new TinyColor(buttonColor);
const activeBgColor = props.dark ? color.tint(20).toString() : darken(color, 20);
if (props.plain) {
styles = ns.cssVarBlock({
"bg-color": props.dark ? darken(color, 90) : color.tint(90).toString(),
"text-color": buttonColor,
"border-color": props.dark ? darken(color, 50) : color.tint(50).toString(),
"hover-text-color": `var(${ns.cssVarName("color-white")})`,
"hover-bg-color": buttonColor,
"hover-border-color": buttonColor,
"active-bg-color": activeBgColor,
"active-text-color": `var(${ns.cssVarName("color-white")})`,
"active-border-color": activeBgColor
});
if (_disabled.value) {
styles[ns.cssVarBlockName("disabled-bg-color")] = props.dark ? darken(color, 90) : color.tint(90).toString();
styles[ns.cssVarBlockName("disabled-text-color")] = props.dark ? darken(color, 50) : color.tint(50).toString();
styles[ns.cssVarBlockName("disabled-border-color")] = props.dark ? darken(color, 80) : color.tint(80).toString();
}
} else {
const hoverBgColor = props.dark ? darken(color, 30) : color.tint(30).toString();
const textColor = color.isDark() ? `var(${ns.cssVarName("color-white")})` : `var(${ns.cssVarName("color-black")})`;
styles = ns.cssVarBlock({
"bg-color": buttonColor,
"text-color": textColor,
"border-color": buttonColor,
"hover-bg-color": hoverBgColor,
"hover-text-color": textColor,
"hover-border-color": hoverBgColor,
"active-bg-color": activeBgColor,
"active-border-color": activeBgColor
});
if (_disabled.value) {
const disabledButtonColor = props.dark ? darken(color, 50) : color.tint(50).toString();
styles[ns.cssVarBlockName("disabled-bg-color")] = disabledButtonColor;
styles[ns.cssVarBlockName("disabled-text-color")] = props.dark ? "rgba(255, 255, 255, 0.5)" : `var(${ns.cssVarName("color-white")})`;
styles[ns.cssVarBlockName("disabled-border-color")] = disabledButtonColor;
}
}
}
return styles;
});
}
const __default__$1 = defineComponent({
name: "ElButton"
});
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
...__default__$1,
props: buttonProps,
emits: buttonEmits,
setup(__props, { expose, emit }) {
const props = __props;
const buttonStyle = useButtonCustomStyle(props);
const ns = useNamespace("button");
const { _ref, _size, _type, _disabled, _props, shouldAddSpace, handleClick } = useButton(props, emit);
const buttonKls = computed(() => [
ns.b(),
ns.m(_type.value),
ns.m(_size.value),
ns.is("disabled", _disabled.value),
ns.is("loading", props.loading),
ns.is("plain", props.plain),
ns.is("round", props.round),
ns.is("circle", props.circle),
ns.is("text", props.text),
ns.is("link", props.link),
ns.is("has-bg", props.bg)
]);
expose({
ref: _ref,
size: _size,
type: _type,
disabled: _disabled,
shouldAddSpace
});
return (_ctx, _cache) => {
return openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), mergeProps({
ref_key: "_ref",
ref: _ref
}, unref(_props), {
class: unref(buttonKls),
style: unref(buttonStyle),
onClick: unref(handleClick)
}), {
default: withCtx(() => [
_ctx.loading ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
_ctx.$slots.loading ? renderSlot(_ctx.$slots, "loading", { key: 0 }) : (openBlock(), createBlock(unref(ElIcon), {
key: 1,
class: normalizeClass(unref(ns).is("loading"))
}, {
default: withCtx(() => [
(openBlock(), createBlock(resolveDynamicComponent(_ctx.loadingIcon)))
]),
_: 1
}, 8, ["class"]))
], 64)) : _ctx.icon || _ctx.$slots.icon ? (openBlock(), createBlock(unref(ElIcon), { key: 1 }, {
default: withCtx(() => [
_ctx.icon ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon), { key: 0 })) : renderSlot(_ctx.$slots, "icon", { key: 1 })
]),
_: 3
})) : createCommentVNode("v-if", true),
_ctx.$slots.default ? (openBlock(), createElementBlock("span", {
key: 2,
class: normalizeClass({ [unref(ns).em("text", "expand")]: unref(shouldAddSpace) })
}, [
renderSlot(_ctx.$slots, "default")
], 2)) : createCommentVNode("v-if", true)
]),
_: 3
}, 16, ["class", "style", "onClick"]);
};
}
});
var Button = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__file", "button.vue"]]);
const buttonGroupProps = {
size: buttonProps.size,
type: buttonProps.type
};
const __default__ = defineComponent({
name: "ElButtonGroup"
});
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: buttonGroupProps,
setup(__props) {
const props = __props;
provide(buttonGroupContextKey, reactive({
size: toRef(props, "size"),
type: toRef(props, "type")
}));
const ns = useNamespace("button");
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass(unref(ns).b("group"))
}, [
renderSlot(_ctx.$slots, "default")
], 2);
};
}
});
var ButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "button-group.vue"]]);
const ElButton = withInstall(Button, {
ButtonGroup
});
const ElButtonGroup = withNoopInstall(ButtonGroup);
export {
ElButton,
ElButtonGroup,
buttonEmits,
buttonGroupContextKey,
buttonNativeTypes,
buttonProps,
buttonTypes,
ElButton as default
};
//# sourceMappingURL=index-CMqvJDaa.js.map